41 |
45 | ),
46 | };
47 |
48 | export const Rounded: Story = {
49 | render: (args) => (
50 |
51 |
54 | ),
55 | };
56 |
--------------------------------------------------------------------------------
/src/avatar/avatar.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 |
3 | export interface AvatarProps extends React.HTMLAttributes
41 | {isImage ? (
42 | 
47 | ) : (
48 | fallback
49 | )}
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/avatar/index.ts:
--------------------------------------------------------------------------------
1 | export * from './avatar';
2 |
--------------------------------------------------------------------------------
/src/badge/badge.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { AiFillNotification } from 'react-icons/ai';
3 |
4 | import { Badge } from './badge';
5 |
6 | const meta: Meta
53 |
54 | Solid
55 |
56 |
57 | Outline
58 |
59 |
60 | Soft
61 |
62 |
63 | ),
64 | };
65 |
66 | export const Colors: Story = {
67 | render: (args) => (
68 |
69 |
70 | Default
71 |
72 |
73 | Success
74 |
75 |
76 | Warning
77 |
78 |
79 | Danger
80 |
81 |
82 | ),
83 | };
84 |
85 | export const Sizes: Story = {
86 | render: (args) => (
87 |
88 |
89 | Small
90 |
91 |
92 | Default
93 |
94 |
95 | Large
96 |
97 |
98 | ),
99 | };
100 |
101 | export const WithIcon: Story = {
102 | render: (args) => (
103 |
104 |
125 | ),
126 | };
127 |
--------------------------------------------------------------------------------
/src/badge/badge.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 |
4 | export type BadgeVariant = 'solid' | 'outline' | 'soft';
5 | export type BadgeColor = 'default' | 'success' | 'warning' | 'danger';
6 | export type BadgeSize = 'sm' | 'default' | 'lg';
7 |
8 | export interface BadgeProps extends React.HTMLAttributes
51 |
52 |
55 |
58 |
59 | ),
60 | };
61 |
62 | export const Sizes: Story = {
63 | render: (args) => (
64 |
65 |
68 |
71 |
74 |
75 | ),
76 | };
77 |
78 | export const DisabledStates: Story = {
79 | args: { disabled: true },
80 | render: (args) => (
81 |
82 |
83 |
86 |
89 |
90 | ),
91 | };
92 |
93 | export const WithIcon: Story = {
94 | render: (args) => (
95 |
96 | } />
97 | } />
98 | } />
99 | }>
100 | With Text
101 |
102 | }>
103 | With Text
104 |
105 | }>
106 | With Text
107 |
108 |
109 | ),
110 | };
111 |
112 | export const LoadingStates: Story = {
113 | args: { loading: true },
114 | render: (args) => (
115 |
116 |
160 | ),
161 | };
162 |
--------------------------------------------------------------------------------
/src/button/button.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 |
4 | import { Spinner } from '../spinner';
5 |
6 | export type ButtonVariant = 'primary' | 'outline' | 'link';
7 | export type ButtonSize = 'sm' | 'default' | 'lg';
8 |
9 | export interface ButtonProps
10 | extends React.ButtonHTMLAttributes
117 |
120 |
123 |
126 |
127 |
128 |
129 |
132 |
135 |
138 |
139 |
140 |
141 | } />
142 | } />
143 |
144 |
145 |
146 | }>
147 | With Text
148 |
149 | }>
150 | Large With Text
151 |
152 |
153 |
154 |
155 |
158 |
159 |
49 | ℹ️}>
50 | Primary variant
51 |
52 | 📦}>
53 | Outline variant
54 |
55 | ❌}>
56 | Danger variant
57 |
58 | ⚠️}>
59 | Warning variant
60 |
61 | ✅}>
62 | Success variant
63 |
64 |
65 | ),
66 | };
67 |
68 | export const Sizes: Story = {
69 | render: (args) => (
70 |
71 | 🔹}>
72 | Small size
73 |
74 | 🔸}>
75 | Default size
76 |
77 | 🔷}>
78 | Large size
79 |
80 |
81 | ),
82 | };
83 |
84 | export const Closable: Story = {
85 | render: (args) => {
86 | const [open, setOpen] = useState(true);
87 | return open ? (
88 |
50 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/src/callout/index.ts:
--------------------------------------------------------------------------------
1 | export * from './callout';
2 |
--------------------------------------------------------------------------------
/src/card/card.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Card } from './card';
4 |
5 | const meta: Meta
51 | {icon && {icon}}
52 | {children}
53 |
54 | {closable && (
55 |
63 | )}
64 | This is a basic card content.
, 39 | }, 40 | }; 41 | 42 | export const Sizes: Story = { 43 | render: (args) => ( 44 |
45 |
46 |
48 |
49 |
51 |
52 |
54 |
55 | ),
56 | };
57 |
58 | export const Minimal: Story = {
59 | args: {
60 | title: 'Minimal Card',
61 | minimal: true,
62 | children: (
63 | Content for small card.
47 |Content for default card.
50 |Content for large card.
53 |64 | This card does not have a divider between the title and the content. 65 |
66 | ), 67 | }, 68 | }; 69 | 70 | export const WithoutTitle: Story = { 71 | args: { 72 | children:This card has no title, only content.
, 73 | }, 74 | }; 75 | 76 | export const CustomContent: Story = { 77 | render: (args) => ( 78 |-
80 |
- Feature one 81 |
- Feature two 82 |
- Feature three 83 |
46 | {title && (
47 | <>
48 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/src/card/index.ts:
--------------------------------------------------------------------------------
1 | export * from './card';
2 |
--------------------------------------------------------------------------------
/src/checkbox/checkbox.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Checkbox } from './checkbox';
4 |
5 | const meta = {
6 | title: 'Components/Checkbox',
7 | component: Checkbox,
8 | tags: ['autodocs'],
9 | parameters: {
10 | layout: 'centered',
11 | docs: {
12 | description: {
13 | component:
14 | "A versatile Checkbox component that supports standard checked and indeterminate states. It is styled to match the Button component's design, with unified focus ring, hover, and disabled styles. Supports labels, accessibility attributes, and server-side rendering (SSR) without relying on client-side effects.",
15 | },
16 | },
17 | },
18 | args: {
19 | label: 'Label',
20 | checked: false,
21 | disabled: false,
22 | indeterminate: false,
23 | onChange: (e) => console.log(e.target.checked),
24 | },
25 | argTypes: {
26 | checked: {
27 | control: 'boolean',
28 | },
29 | disabled: {
30 | control: 'boolean',
31 | },
32 | indeterminate: {
33 | control: 'boolean',
34 | },
35 | },
36 | } satisfies Meta{title}
49 | {!minimal && }
50 |
51 | )}
52 | {children}
53 |
60 |
64 | ),
65 | };
66 |
--------------------------------------------------------------------------------
/src/checkbox/checkbox.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 |
3 | export interface CheckboxProps
4 | extends React.InputHTMLAttributes
61 | {[1, 2, 3].map((i) => (
62 | setActive(active === i ? null : i)}
68 | >
69 | {`This is the content of panel ${i}.`}
70 |
71 | ))}
72 |
73 | );
74 | },
75 | };
76 |
--------------------------------------------------------------------------------
/src/collapse/collapse.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 |
4 | export interface CollapseProps extends React.HTMLAttributes
31 |
82 | );
83 | }
84 |
--------------------------------------------------------------------------------
/src/collapse/index.ts:
--------------------------------------------------------------------------------
1 | export * from './collapse';
2 |
--------------------------------------------------------------------------------
/src/dialog/dialog.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import { Button } from '../button';
5 |
6 | import { Dialog } from './dialog';
7 |
8 | const meta: Meta !disabled && onOpenChange(!open)}
44 | onKeyDown={(e) => {
45 | if (disabled) return;
46 | if (e.key === 'Enter' || e.key === ' ') {
47 | e.preventDefault();
48 | onOpenChange(!open);
49 | }
50 | }}
51 | >
52 | {header}
53 |
70 |
71 |
79 |
81 | {children}
80 |
40 |
62 | {showClose && (
63 |
73 | )}
74 | {title && (
75 |
86 |
87 | )}
88 |
76 |
80 | )}
81 | 77 | {title} 78 |
79 |{children}
82 | {footer && (
83 | {footer}
84 | )}
85 | 39 | In today' fast-paced digital world, staying connected and informed is 40 | more important than ever. Whether through social media, online news, or 41 | virtual meetings, technology continues to shape the way we communicate and 42 | interact. From remote work to e-learning, the convenience of digital tools 43 | has transformed our daily routines, making it easier to stay productive and 44 | engaged no matter where we are. 45 |
46 | ); 47 | 48 | export const Default: Story = { 49 | args: {}, 50 | render: (args) => ( 51 |
52 |
56 | ),
57 | };
58 |
59 | export const WithText: Story = {
60 | args: {},
61 | render: (args) => (
62 |
63 | Text
65 |
67 | ),
68 | };
69 |
70 | export const Variants: Story = {
71 | render: (args) => (
72 |
73 | Solid Divider
75 |
77 | Dashed Divider
78 |
79 |
81 | ),
82 | };
83 |
84 | export const VerticalDivider: Story = {
85 | args: {
86 | orientation: 'vertical',
87 | },
88 | render: (args) => (
89 |
90 | Left
91 |
94 | ),
95 | };
96 |
--------------------------------------------------------------------------------
/src/divider/divider.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { ReactNode } from 'react';
3 |
4 | export interface DividerProps {
5 | children?: ReactNode;
6 | variant?: 'solid' | 'dashed';
7 | orientation?: 'horizontal' | 'vertical';
8 | className?: string;
9 | }
10 |
11 | export function Divider({
12 | children,
13 | variant = 'solid',
14 | orientation = 'horizontal',
15 | className,
16 | }: DividerProps) {
17 | const borderClass =
18 | variant === 'solid' ? 'border-zinc-200' : 'border-dashed border-zinc-200';
19 |
20 | if (orientation === 'vertical') {
21 | return (
22 |
31 | );
32 | }
33 |
34 | return (
35 |
41 |
42 | {children && (
43 |
44 | {children}
45 |
46 | )}
47 |
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/src/divider/index.ts:
--------------------------------------------------------------------------------
1 | export * from './divider';
2 |
--------------------------------------------------------------------------------
/src/dropdown/dropdown.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Button } from '../button';
4 |
5 | import { Dropdown } from './dropdown';
6 |
7 | const meta: Meta
18 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/dropdown/index.ts:
--------------------------------------------------------------------------------
1 | export * from './dropdown';
2 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './avatar';
2 | export * from './badge';
3 | export * from './button';
4 | export * from './callout';
5 | export * from './card';
6 | export * from './checkbox';
7 | export * from './collapse';
8 | export * from './dialog';
9 | export * from './divider';
10 | export * from './dropdown';
11 | export * from './input';
12 | export * from './mask';
13 | export * from './radio';
14 | export * from './select';
15 | export * from './spinner';
16 | export * from './tabs';
17 | export * from './textarea';
18 | export * from './toast';
19 | export * from './tooltip';
20 |
--------------------------------------------------------------------------------
/src/input/index.ts:
--------------------------------------------------------------------------------
1 | export * from './input';
2 |
--------------------------------------------------------------------------------
/src/input/input.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Input } from './input';
4 |
5 | const meta: Meta
19 |
51 | {children}
20 |
28 |
50 | -
29 | {menu.map((item, i) =>
30 | item.href ? (
31 |
36 | {item.label}
37 |
38 | ) : (
39 |
- 44 | {item.label} 45 | 46 | ), 47 | )} 48 |
56 |
57 |
58 |
59 |
60 | ),
61 | };
62 |
63 | export const WithCustomLabel: Story = {
64 | args: {
65 | label: (
66 |
67 | Email *
68 |
69 | ),
70 | placeholder: 'you@example.com',
71 | },
72 | };
73 |
--------------------------------------------------------------------------------
/src/input/input.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 |
4 | export type InputSize = 'sm' | 'default' | 'lg';
5 |
6 | type NativeInputProps = Omit<
7 | React.InputHTMLAttributes
27 | {label && (
28 |
31 | )}
32 |
43 | {error &&
45 | );
46 | },
47 | );
48 |
49 | Input.displayName = 'Input';
50 |
--------------------------------------------------------------------------------
/src/mask/index.ts:
--------------------------------------------------------------------------------
1 | export * from './mask';
2 |
--------------------------------------------------------------------------------
/src/mask/mask.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import { Button } from '../button';
5 |
6 | import { Mask } from './mask';
7 |
8 | const meta: Meta{error}
} 44 |
49 |
50 |
51 | setOpen(false)}>
52 |
54 |
55 | );
56 | },
57 | };
58 |
--------------------------------------------------------------------------------
/src/mask/mask.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 |
4 | import { Button } from '../button';
5 |
6 | export interface MaskProps {
7 | open: boolean;
8 | opacity?: number;
9 | zIndex?: number;
10 | children?: React.ReactNode;
11 | closable?: boolean;
12 | onClose?: () => void;
13 | }
14 |
15 | export function Mask({
16 | open,
17 | opacity = 0.6,
18 | zIndex = 1000,
19 | children,
20 | closable = true,
21 | onClose,
22 | }: MaskProps) {
23 | if (!open) return null;
24 |
25 | const safeOpacity = Math.max(0.05, opacity);
26 |
27 | return (
28 | Loading...
53 |
38 | {closable && (
39 |
47 | )}
48 | {children}
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/radio/index.ts:
--------------------------------------------------------------------------------
1 | export * from './radio';
2 |
--------------------------------------------------------------------------------
/src/radio/radio.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Radio } from './radio';
4 |
5 | const meta: Meta
46 |
47 | Small
48 |
49 |
50 | Default
51 |
52 |
53 | Large
54 |
55 |
56 | ),
57 | };
58 |
59 | export const DisabledStates: Story = {
60 | args: {
61 | children: 'Option',
62 | disabled: true,
63 | },
64 | render: (args) => (
65 |
66 | Disabled
67 |
68 | Disabled & Checked
69 |
70 |
71 | ),
72 | };
73 |
--------------------------------------------------------------------------------
/src/radio/radio.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React, { useId } from 'react';
3 |
4 | export type RadioSize = 'sm' | 'default' | 'lg';
5 |
6 | export interface RadioProps
7 | extends Omit<
8 | React.InputHTMLAttributes
57 |
58 |
59 |
60 |
61 | );
62 | },
63 | };
64 |
65 | export const Disabled: Story = {
66 | render: (args) => (
67 |
68 |
70 | ),
71 | };
72 |
73 | export const WithIcon: Story = {
74 | render: (args) => {
75 | const [value, setValue] = useState('');
76 | return (
77 | }
80 | value={value}
81 | onChange={setValue}
82 | />
83 | );
84 | },
85 | };
86 |
87 | export const Controlled: Story = {
88 | render: (args) => {
89 | const [value, setValue] = useState('banana');
90 | return (
91 |
92 |
93 |
97 | );
98 | },
99 | };
100 |
--------------------------------------------------------------------------------
/src/select/select.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React, { useRef, useEffect, useState } from 'react';
3 |
4 | import { Button, ButtonProps } from '../button';
5 |
6 | export type SelectSize = ButtonProps['size'];
7 |
8 | export interface SelectOption {
9 | label: React.ReactNode;
10 | value: string;
11 | disabled?: boolean;
12 | }
13 |
14 | export interface SelectProps {
15 | value: string;
16 | onChange: (value: string) => void;
17 | options: SelectOption[];
18 | placeholder?: string;
19 | disabled?: boolean;
20 | className?: string;
21 | size?: SelectSize;
22 | icon?: React.ReactNode;
23 | }
24 |
25 | export function Select({
26 | value,
27 | onChange,
28 | options,
29 | placeholder = 'Please select',
30 | disabled = false,
31 | className,
32 | size = 'default',
33 | icon,
34 | }: SelectProps) {
35 | const [open, setOpen] = useState(false);
36 | const selectRef = useRef
94 | Selected value: {value || 'None'}
95 |
96 |
59 |
102 | {open && (
103 |
131 | );
132 | }
133 |
--------------------------------------------------------------------------------
/src/spinner/index.ts:
--------------------------------------------------------------------------------
1 | export * from './spinner';
2 |
--------------------------------------------------------------------------------
/src/spinner/spinner.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Spinner } from './spinner';
4 |
5 | const meta: Meta-
109 | {options.map((option) => (
110 |
- handleSelect(option.value, option)} 121 | aria-selected={option.value === value} 122 | role="option" 123 | aria-disabled={option.disabled} 124 | > 125 | {option.label} 126 | 127 | ))} 128 |
37 |
42 | ),
43 | };
44 |
45 | export const CustomColors: Story = {
46 | render: (args) => (
47 |
48 |
53 | ),
54 | };
55 |
--------------------------------------------------------------------------------
/src/spinner/spinner.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 |
3 | export interface SpinnerProps {
4 | size?: number;
5 | color?: string;
6 | className?: string;
7 | }
8 |
9 | export function Spinner({ size, color = '#4b5563', className }: SpinnerProps) {
10 | const style = {
11 | ...(size
12 | ? {
13 | width: size,
14 | height: size,
15 | borderWidth: size / 8,
16 | borderTopWidth: size / 8,
17 | }
18 | : {
19 | width: '100%',
20 | height: '100%',
21 | borderWidth: '2px',
22 | borderTopWidth: '2px',
23 | }),
24 | borderTopColor: color,
25 | };
26 |
27 | return (
28 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export * from './tabs';
2 |
--------------------------------------------------------------------------------
/src/tabs/tabs.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { useState } from 'react';
3 |
4 | import { Tabs } from './tabs';
5 |
6 | const meta: MetaThis is the profile panel.
39 |Settings and preferences go here.
42 |Change your password and manage security settings.
45 |This is the active tab.
58 | This tab is disabled and cannot be selected.
61 | Another tab content.
64 | User tab with icon in label.
87 | Settings tab with icon in label.
100 | Plain label tab.
103 |
32 |
83 | );
84 | }
85 |
86 | const TabItem: React.FC
39 | {items.map((item) => {
40 | const isActive = value === item.props.value;
41 | const isDisabled = item.props.disabled;
42 | return (
43 |
79 | {
57 | if (isDisabled) return;
58 | onChange?.(item.props.value);
59 | }}
60 | onKeyDown={(e) => {
61 | if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
62 | onChange?.(item.props.value);
63 | }
64 | }}
65 | >
66 | {item.props.label}
67 |
75 |
76 | );
77 | })}
78 |
80 | {items.find((item) => item.props.value === value)?.props.children}
81 |
82 |
33 |
34 |
35 |
36 |
37 | ),
38 | };
39 |
40 | export const Resizes: Story = {
41 | render: () => (
42 |
43 |
76 | ),
77 | };
78 |
79 | export const WithError: Story = {
80 | args: {
81 | label: 'Description',
82 | placeholder: 'This field has an error',
83 | error: 'This field is required',
84 | },
85 | };
86 |
--------------------------------------------------------------------------------
/src/textarea/textarea.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 |
4 | export type TextAreaSize = 'sm' | 'default' | 'lg';
5 | export type TextAreaResize = 'none' | 'both' | 'x' | 'y';
6 |
7 | type NativeTextAreaProps = Omit<
8 | React.TextareaHTMLAttributes
44 |
50 |
51 |
52 |
58 |
59 |
60 |
66 |
67 |
68 |
74 |
75 |
39 | {label && (
40 |
43 | )}
44 |
56 | {error &&
58 | );
59 | },
60 | );
61 |
62 | TextArea.displayName = 'TextArea';
63 |
--------------------------------------------------------------------------------
/src/toast/index.ts:
--------------------------------------------------------------------------------
1 | export * from './toast';
2 |
--------------------------------------------------------------------------------
/src/toast/toast.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Button } from '../button';
4 |
5 | import { toast } from './toast';
6 |
7 | const meta: Meta = {
8 | title: 'Components/Toast',
9 | tags: ['autodocs'],
10 | parameters: {
11 | layout: 'centered',
12 | docs: {
13 | description: {
14 | component:
15 | 'A global Toast utility supporting info, success, warning, and error variants. Use `toast.success("...")` and similar methods to display notifications.',
16 | },
17 | },
18 | },
19 | };
20 |
21 | export default meta;
22 | type Story = StoryObj;
23 |
24 | export const Default: Story = {
25 | render: () => (
26 | {error}
} 57 |
27 |
30 |
33 |
36 |
37 |
38 | ),
39 | };
40 |
41 | export const CustomDuration: Story = {
42 | render: () => (
43 |
50 | ),
51 | };
52 |
53 | export const CustomIcon: Story = {
54 | render: () => (
55 |
68 | ),
69 | };
70 |
--------------------------------------------------------------------------------
/src/toast/toast.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React, { useEffect, useState } from 'react';
3 | import type { Root } from 'react-dom/client';
4 | import { createRoot } from 'react-dom/client';
5 |
6 | type ToastVariant = 'info' | 'success' | 'warning' | 'error';
7 |
8 | interface ToastProps {
9 | message: React.ReactNode;
10 | variant: ToastVariant;
11 | icon?: React.ReactNode;
12 | duration?: number;
13 | k: number;
14 | }
15 |
16 | function Toast({ message, variant, icon, duration = 3000, k }: ToastProps) {
17 | const [show, setShow] = useState(false);
18 | useEffect(() => {
19 | setShow(true);
20 | const hide = setTimeout(() => setShow(false), duration);
21 | const remove = setTimeout(() => removeToast(k), duration + 200);
22 | return () => {
23 | clearTimeout(hide);
24 | clearTimeout(remove);
25 | };
26 | }, [duration, k]);
27 |
28 | const variantClass = {
29 | info: 'bg-zinc-100 text-zinc-900 border-transparent',
30 | success: 'bg-green-50 text-green-900 border-green-200',
31 | warning: 'bg-yellow-50 text-yellow-900 border-yellow-200',
32 | error: 'bg-red-50 text-red-900 border-red-200',
33 | }[variant];
34 |
35 | const icons: Record
94 | {icon ?? icons[variant]}
95 | {message}
96 |
97 | );
98 | }
99 |
100 | let toastRoot: HTMLDivElement | null = null;
101 | let reactRoot: Root | null = null;
102 | let toasts: Array<{ key: number; props: ToastProps }> = [];
103 | let key = 0;
104 |
105 | function renderToasts() {
106 | if (!toastRoot) {
107 | toastRoot = document.createElement('div');
108 | toastRoot.className =
109 | 'fixed top-4 left-1/2 z-[9999] -translate-x-1/2 flex flex-col items-center pointer-events-none';
110 | document.body.appendChild(toastRoot);
111 | reactRoot = createRoot(toastRoot);
112 | }
113 | (reactRoot as Root).render(
114 | <>
115 | {toasts.map(({ key, props }) => (
116 |
51 |
52 | Top
53 |
54 |
55 | Right
56 |
57 |
58 | Bottom
59 |
60 |
61 | Left
62 |
63 |
64 | ),
65 | };
66 |
67 | export const Delay: Story = {
68 | render: (args) => (
69 | 96 | Additional details 97 | 98 | } 99 | > 100 | Rich content 101 |