@mvn-ui/react 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -0
- package/dist/index.css +3491 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +2519 -0
- package/dist/index.d.ts +2519 -0
- package/dist/index.js +10618 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +10266 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +115 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,2519 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import React__default, { ReactElement, ReactNode } from 'react';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
export { VariantProps as TypographyVariantProps, VariantProps } from 'class-variance-authority';
|
|
6
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
|
+
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
8
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
9
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
10
|
+
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
11
|
+
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
12
|
+
import * as TogglePrimitive from '@radix-ui/react-toggle';
|
|
13
|
+
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
14
|
+
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
15
|
+
import { OTPInput } from 'input-otp';
|
|
16
|
+
import { Toaster as Toaster$1 } from 'sonner';
|
|
17
|
+
export { toast } from 'sonner';
|
|
18
|
+
import * as ProgressPrimitive from '@radix-ui/react-progress';
|
|
19
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
20
|
+
import { DialogProps } from '@radix-ui/react-dialog';
|
|
21
|
+
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
22
|
+
import * as vaul from 'vaul';
|
|
23
|
+
import { Drawer as Drawer$1 } from 'vaul';
|
|
24
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
25
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
26
|
+
export { TooltipContentProps } from '@radix-ui/react-tooltip';
|
|
27
|
+
import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
|
|
28
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
29
|
+
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
|
|
30
|
+
import * as _radix_ui_react_context from '@radix-ui/react-context';
|
|
31
|
+
import * as MenubarPrimitive from '@radix-ui/react-menubar';
|
|
32
|
+
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
|
|
33
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
34
|
+
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
35
|
+
import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
|
|
36
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
37
|
+
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
38
|
+
import * as ResizablePrimitive from 'react-resizable-panels';
|
|
39
|
+
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
40
|
+
import { Row, ColumnFiltersState, ColumnDef } from '@tanstack/react-table';
|
|
41
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
42
|
+
import * as react_day_picker from 'react-day-picker';
|
|
43
|
+
import { DayPicker, DayButton, DateRange } from 'react-day-picker';
|
|
44
|
+
export { DateRange } from 'react-day-picker';
|
|
45
|
+
import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
|
|
46
|
+
import { ClassValue } from 'clsx';
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Button variants (shadcn-style)
|
|
50
|
+
*/
|
|
51
|
+
declare const buttonVariants: (props?: ({
|
|
52
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
53
|
+
size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | null | undefined;
|
|
54
|
+
fullWidth?: boolean | null | undefined;
|
|
55
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
56
|
+
interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
57
|
+
asChild?: boolean;
|
|
58
|
+
loading?: boolean;
|
|
59
|
+
leftIcon?: React$1.ReactNode;
|
|
60
|
+
rightIcon?: React$1.ReactNode;
|
|
61
|
+
loadingText?: string;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Button
|
|
65
|
+
* - asChild=true: áp class trực tiếp vào phần tử con duy nhất (Radix Slot).
|
|
66
|
+
* - Khi asChild=true: bỏ qua leftIcon/rightIcon để đảm bảo Slot hoạt động đúng.
|
|
67
|
+
*/
|
|
68
|
+
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
69
|
+
interface IconButtonProps extends Omit<ButtonProps, 'leftIcon' | 'rightIcon'> {
|
|
70
|
+
icon: React$1.ReactNode;
|
|
71
|
+
'aria-label': string;
|
|
72
|
+
}
|
|
73
|
+
declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
74
|
+
|
|
75
|
+
type Orientation = "horizontal" | "vertical";
|
|
76
|
+
interface ButtonGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
77
|
+
orientation?: Orientation;
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* ButtonGroup - groups related buttons with joined borders and radii.
|
|
81
|
+
* - orientation: horizontal | vertical (default: horizontal)
|
|
82
|
+
* - role="group" for a11y
|
|
83
|
+
*/
|
|
84
|
+
declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
|
|
85
|
+
interface ButtonGroupSeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
86
|
+
orientation?: Orientation;
|
|
87
|
+
}
|
|
88
|
+
declare function ButtonGroupSeparator({ className, orientation, ...props }: ButtonGroupSeparatorProps): react_jsx_runtime.JSX.Element;
|
|
89
|
+
interface ButtonGroupTextProps extends React$1.HTMLAttributes<HTMLSpanElement> {
|
|
90
|
+
asChild?: boolean;
|
|
91
|
+
}
|
|
92
|
+
declare function ButtonGroupText({ asChild, className, ...props }: ButtonGroupTextProps): react_jsx_runtime.JSX.Element;
|
|
93
|
+
|
|
94
|
+
declare const inputVariants: (props?: ({
|
|
95
|
+
variant?: "outlined" | "filled" | "borderless" | "underlined" | null | undefined;
|
|
96
|
+
inputSize?: "default" | "sm" | "lg" | null | undefined;
|
|
97
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
98
|
+
interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
|
|
99
|
+
label?: string;
|
|
100
|
+
helperText?: string;
|
|
101
|
+
error?: string;
|
|
102
|
+
leftIcon?: React$1.ReactNode;
|
|
103
|
+
rightIcon?: React$1.ReactNode;
|
|
104
|
+
clearable?: boolean;
|
|
105
|
+
onClear?: () => void;
|
|
106
|
+
containerClassName?: string;
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* Input component - Korean design system (Toss-inspired).
|
|
110
|
+
* No focus rings, only border color changes.
|
|
111
|
+
*
|
|
112
|
+
* @example
|
|
113
|
+
* ```tsx
|
|
114
|
+
* <Input placeholder="이메일을 입력하세요" />
|
|
115
|
+
*
|
|
116
|
+
* <Input
|
|
117
|
+
* label="이름"
|
|
118
|
+
* placeholder="홍길동"
|
|
119
|
+
* helperText="실명을 입력해주세요"
|
|
120
|
+
* />
|
|
121
|
+
*
|
|
122
|
+
* <Input
|
|
123
|
+
* label="비밀번호"
|
|
124
|
+
* type="password"
|
|
125
|
+
* error="비밀번호가 일치하지 않습니다"
|
|
126
|
+
* />
|
|
127
|
+
*
|
|
128
|
+
* <Input
|
|
129
|
+
* leftIcon={<SearchIcon />}
|
|
130
|
+
* placeholder="검색어를 입력하세요"
|
|
131
|
+
* clearable
|
|
132
|
+
* />
|
|
133
|
+
* ```
|
|
134
|
+
*/
|
|
135
|
+
declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
136
|
+
|
|
137
|
+
declare const labelVariants: (props?: ({
|
|
138
|
+
required?: boolean | null | undefined;
|
|
139
|
+
variant?: "default" | "muted" | null | undefined;
|
|
140
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
141
|
+
interface LabelProps extends React$1.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps<typeof labelVariants> {
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Label component - Korean design system.
|
|
145
|
+
*
|
|
146
|
+
* @example
|
|
147
|
+
* ```tsx
|
|
148
|
+
* <Label htmlFor="email">이메일</Label>
|
|
149
|
+
* <Input id="email" />
|
|
150
|
+
*
|
|
151
|
+
* <Label required>필수 항목</Label>
|
|
152
|
+
* <Label variant="muted">선택 항목</Label>
|
|
153
|
+
* ```
|
|
154
|
+
*/
|
|
155
|
+
declare const Label: React$1.ForwardRefExoticComponent<LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
|
|
156
|
+
|
|
157
|
+
declare const textareaVariants: (props?: ({
|
|
158
|
+
variant?: "outlined" | "filled" | "borderless" | "underlined" | null | undefined;
|
|
159
|
+
textareaSize?: "default" | "sm" | "lg" | null | undefined;
|
|
160
|
+
resize?: "none" | "both" | "horizontal" | "vertical" | null | undefined;
|
|
161
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
162
|
+
interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, VariantProps<typeof textareaVariants> {
|
|
163
|
+
label?: string;
|
|
164
|
+
helperText?: string;
|
|
165
|
+
error?: string;
|
|
166
|
+
showCount?: boolean;
|
|
167
|
+
containerClassName?: string;
|
|
168
|
+
autoResize?: boolean;
|
|
169
|
+
}
|
|
170
|
+
/**
|
|
171
|
+
* Textarea component with Korean design system.
|
|
172
|
+
*
|
|
173
|
+
* @example
|
|
174
|
+
* ```tsx
|
|
175
|
+
* // Basic
|
|
176
|
+
* <Textarea placeholder="메시지를 입력하세요..." />
|
|
177
|
+
*
|
|
178
|
+
* // With label and count
|
|
179
|
+
* <Textarea
|
|
180
|
+
* label="설명"
|
|
181
|
+
* placeholder="설명을 입력하세요"
|
|
182
|
+
* showCount
|
|
183
|
+
* maxLength={500}
|
|
184
|
+
* />
|
|
185
|
+
*
|
|
186
|
+
* // With error
|
|
187
|
+
* <Textarea
|
|
188
|
+
* label="내용"
|
|
189
|
+
* error="필수 입력 항목입니다."
|
|
190
|
+
* />
|
|
191
|
+
*
|
|
192
|
+
* // Auto resize
|
|
193
|
+
* <Textarea
|
|
194
|
+
* autoResize
|
|
195
|
+
* placeholder="자동으로 높이가 조절됩니다"
|
|
196
|
+
* />
|
|
197
|
+
* ```
|
|
198
|
+
*/
|
|
199
|
+
declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
200
|
+
|
|
201
|
+
declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
|
|
202
|
+
declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
203
|
+
declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
204
|
+
declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
205
|
+
variant?: "outlined" | "filled" | "borderless" | "underlined" | null | undefined;
|
|
206
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
207
|
+
declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
208
|
+
declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
209
|
+
declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
210
|
+
declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
211
|
+
declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
212
|
+
declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
213
|
+
|
|
214
|
+
declare const checkboxVariants: (props?: ({
|
|
215
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
216
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
217
|
+
interface CheckboxProps extends Omit<React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "size">, VariantProps<typeof checkboxVariants> {
|
|
218
|
+
label?: string;
|
|
219
|
+
description?: string;
|
|
220
|
+
indeterminate?: boolean;
|
|
221
|
+
}
|
|
222
|
+
/**
|
|
223
|
+
* Checkbox - Korean design system (no focus ring).
|
|
224
|
+
*
|
|
225
|
+
* @example
|
|
226
|
+
* ```tsx
|
|
227
|
+
* <Checkbox />
|
|
228
|
+
* <Checkbox label="동의합니다" />
|
|
229
|
+
* <Checkbox
|
|
230
|
+
* label="전체 동의"
|
|
231
|
+
* description="모든 약관에 동의합니다"
|
|
232
|
+
* />
|
|
233
|
+
* <Checkbox indeterminate />
|
|
234
|
+
* ```
|
|
235
|
+
*/
|
|
236
|
+
declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
237
|
+
|
|
238
|
+
declare const radioGroupVariants: (props?: ({
|
|
239
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
240
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
241
|
+
interface RadioGroupItemData {
|
|
242
|
+
value: string;
|
|
243
|
+
label: React$1.ReactNode;
|
|
244
|
+
description?: string;
|
|
245
|
+
disabled?: boolean;
|
|
246
|
+
icon?: React$1.ReactNode;
|
|
247
|
+
}
|
|
248
|
+
interface RadioGroupProps extends Omit<React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, "orientation"> {
|
|
249
|
+
orientation?: "vertical" | "horizontal";
|
|
250
|
+
items?: RadioGroupItemData[];
|
|
251
|
+
itemClassName?: string;
|
|
252
|
+
renderItem?: (item: RadioGroupItemData) => React$1.ReactNode;
|
|
253
|
+
label?: string;
|
|
254
|
+
error?: string;
|
|
255
|
+
helperText?: string;
|
|
256
|
+
}
|
|
257
|
+
/**
|
|
258
|
+
* RadioGroup component - Korean design system.
|
|
259
|
+
*
|
|
260
|
+
* @example
|
|
261
|
+
* ```tsx
|
|
262
|
+
* // Data-driven approach
|
|
263
|
+
* const [value, setValue] = React.useState("option1");
|
|
264
|
+
*
|
|
265
|
+
* <RadioGroup
|
|
266
|
+
* value={value}
|
|
267
|
+
* onValueChange={setValue}
|
|
268
|
+
* label="옵션 선택"
|
|
269
|
+
* items={[
|
|
270
|
+
* { value: "option1", label: "옵션 1", description: "첫 번째 옵션입니다" },
|
|
271
|
+
* { value: "option2", label: "옵션 2", description: "두 번째 옵션입니다" },
|
|
272
|
+
* { value: "option3", label: "옵션 3", disabled: true },
|
|
273
|
+
* ]}
|
|
274
|
+
* />
|
|
275
|
+
*
|
|
276
|
+
* // Horizontal layout
|
|
277
|
+
* <RadioGroup
|
|
278
|
+
* orientation="horizontal"
|
|
279
|
+
* value={value}
|
|
280
|
+
* onValueChange={setValue}
|
|
281
|
+
* items={[
|
|
282
|
+
* { value: "yes", label: "예" },
|
|
283
|
+
* { value: "no", label: "아니오" },
|
|
284
|
+
* ]}
|
|
285
|
+
* />
|
|
286
|
+
*
|
|
287
|
+
* // Children-based approach
|
|
288
|
+
* <RadioGroup value={value} onValueChange={setValue}>
|
|
289
|
+
* <div className="flex items-center gap-2">
|
|
290
|
+
* <RadioGroupItem value="option1" id="opt1" />
|
|
291
|
+
* <Label htmlFor="opt1">옵션 1</Label>
|
|
292
|
+
* </div>
|
|
293
|
+
* </RadioGroup>
|
|
294
|
+
* ```
|
|
295
|
+
*/
|
|
296
|
+
declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
297
|
+
declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
298
|
+
|
|
299
|
+
type SwitchProps = React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>;
|
|
300
|
+
declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
301
|
+
|
|
302
|
+
declare const toggleVariants: (props?: ({
|
|
303
|
+
variant?: "default" | "outline" | "solid" | null | undefined;
|
|
304
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
305
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
306
|
+
interface ToggleProps extends React$1.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof toggleVariants> {
|
|
307
|
+
icon?: React$1.ReactNode;
|
|
308
|
+
}
|
|
309
|
+
/**
|
|
310
|
+
* Toggle component - Korean design system.
|
|
311
|
+
*
|
|
312
|
+
* @example
|
|
313
|
+
* ```tsx
|
|
314
|
+
* const [pressed, setPressed] = React.useState(false);
|
|
315
|
+
*
|
|
316
|
+
* <Toggle pressed={pressed} onPressedChange={setPressed}>
|
|
317
|
+
* 토글
|
|
318
|
+
* </Toggle>
|
|
319
|
+
*
|
|
320
|
+
* <Toggle variant="outline" aria-label="Toggle bold">
|
|
321
|
+
* <BoldIcon className="h-4 w-4" />
|
|
322
|
+
* </Toggle>
|
|
323
|
+
*
|
|
324
|
+
* <Toggle variant="solid" size="sm">
|
|
325
|
+
* 작은 토글
|
|
326
|
+
* </Toggle>
|
|
327
|
+
* ```
|
|
328
|
+
*/
|
|
329
|
+
declare const Toggle: React$1.ForwardRefExoticComponent<ToggleProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
330
|
+
|
|
331
|
+
declare const toggleGroupVariants: (props?: ({
|
|
332
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
333
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
334
|
+
declare const toggleGroupItemVariants: (props?: ({
|
|
335
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
336
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
337
|
+
interface ToggleGroupItemData {
|
|
338
|
+
value: string;
|
|
339
|
+
label: React$1.ReactNode;
|
|
340
|
+
icon?: React$1.ReactNode;
|
|
341
|
+
disabled?: boolean;
|
|
342
|
+
ariaLabel?: string;
|
|
343
|
+
}
|
|
344
|
+
interface ToggleGroupSingleProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>, "type">, VariantProps<typeof toggleGroupVariants> {
|
|
345
|
+
type: "single";
|
|
346
|
+
value?: string;
|
|
347
|
+
defaultValue?: string;
|
|
348
|
+
onValueChange?: (value: string) => void;
|
|
349
|
+
items?: ToggleGroupItemData[];
|
|
350
|
+
itemClassName?: string;
|
|
351
|
+
renderItem?: (item: ToggleGroupItemData) => React$1.ReactNode;
|
|
352
|
+
}
|
|
353
|
+
interface ToggleGroupMultipleProps extends Omit<React$1.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>, "type">, VariantProps<typeof toggleGroupVariants> {
|
|
354
|
+
type: "multiple";
|
|
355
|
+
value?: string[];
|
|
356
|
+
defaultValue?: string[];
|
|
357
|
+
onValueChange?: (value: string[]) => void;
|
|
358
|
+
items?: ToggleGroupItemData[];
|
|
359
|
+
itemClassName?: string;
|
|
360
|
+
renderItem?: (item: ToggleGroupItemData) => React$1.ReactNode;
|
|
361
|
+
}
|
|
362
|
+
type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
|
|
363
|
+
/**
|
|
364
|
+
* ToggleGroup component for Korean design system.
|
|
365
|
+
*
|
|
366
|
+
* @example
|
|
367
|
+
* ```tsx
|
|
368
|
+
* // Single selection
|
|
369
|
+
* const [alignment, setAlignment] = React.useState("left");
|
|
370
|
+
* <ToggleGroup
|
|
371
|
+
* type="single"
|
|
372
|
+
* value={alignment}
|
|
373
|
+
* onValueChange={setAlignment}
|
|
374
|
+
* items={[
|
|
375
|
+
* { value: "left", label: "왼쪽", icon: <AlignLeftIcon /> },
|
|
376
|
+
* { value: "center", label: "가운데", icon: <AlignCenterIcon /> },
|
|
377
|
+
* { value: "right", label: "오른쪽", icon: <AlignRightIcon /> },
|
|
378
|
+
* ]}
|
|
379
|
+
* />
|
|
380
|
+
*
|
|
381
|
+
* // Multiple selection
|
|
382
|
+
* const [styles, setStyles] = React.useState<string[]>([]);
|
|
383
|
+
* <ToggleGroup
|
|
384
|
+
* type="multiple"
|
|
385
|
+
* value={styles}
|
|
386
|
+
* onValueChange={setStyles}
|
|
387
|
+
* items={[
|
|
388
|
+
* { value: "bold", label: "Bold", icon: <BoldIcon /> },
|
|
389
|
+
* { value: "italic", label: "Italic", icon: <ItalicIcon /> },
|
|
390
|
+
* { value: "underline", label: "Underline", icon: <UnderlineIcon /> },
|
|
391
|
+
* ]}
|
|
392
|
+
* />
|
|
393
|
+
*
|
|
394
|
+
* // With children
|
|
395
|
+
* <ToggleGroup type="single">
|
|
396
|
+
* <ToggleGroupItem value="left">Left</ToggleGroupItem>
|
|
397
|
+
* <ToggleGroupItem value="center">Center</ToggleGroupItem>
|
|
398
|
+
* <ToggleGroupItem value="right">Right</ToggleGroupItem>
|
|
399
|
+
* </ToggleGroup>
|
|
400
|
+
* ```
|
|
401
|
+
*/
|
|
402
|
+
declare const ToggleGroup: React$1.ForwardRefExoticComponent<ToggleGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
403
|
+
interface ToggleGroupItemProps extends React$1.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, VariantProps<typeof toggleGroupItemVariants> {
|
|
404
|
+
}
|
|
405
|
+
declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<ToggleGroupItemProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
406
|
+
|
|
407
|
+
interface SliderProps extends React$1.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
|
|
408
|
+
showValue?: boolean;
|
|
409
|
+
label?: string;
|
|
410
|
+
formatValue?: (value: number) => string;
|
|
411
|
+
}
|
|
412
|
+
/**
|
|
413
|
+
* Slider - Korean design system.
|
|
414
|
+
*
|
|
415
|
+
* @example
|
|
416
|
+
* ```tsx
|
|
417
|
+
* const [value, setValue] = React.useState([50]);
|
|
418
|
+
*
|
|
419
|
+
* <Slider
|
|
420
|
+
* value={value}
|
|
421
|
+
* onValueChange={setValue}
|
|
422
|
+
* max={100}
|
|
423
|
+
* step={1}
|
|
424
|
+
* />
|
|
425
|
+
*
|
|
426
|
+
* <Slider
|
|
427
|
+
* label="볼륨"
|
|
428
|
+
* showValue
|
|
429
|
+
* value={[75]}
|
|
430
|
+
* max={100}
|
|
431
|
+
* />
|
|
432
|
+
*
|
|
433
|
+
* <Slider
|
|
434
|
+
* defaultValue={[25, 75]}
|
|
435
|
+
* max={100}
|
|
436
|
+
* step={1}
|
|
437
|
+
* label="범위 선택"
|
|
438
|
+
* />
|
|
439
|
+
* ```
|
|
440
|
+
*/
|
|
441
|
+
declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
442
|
+
|
|
443
|
+
declare const inputGroupVariants: (props?: ({
|
|
444
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
445
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
446
|
+
interface InputGroupProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof inputGroupVariants> {
|
|
447
|
+
leftAddon?: React$1.ReactNode;
|
|
448
|
+
rightAddon?: React$1.ReactNode;
|
|
449
|
+
leftElement?: React$1.ReactNode;
|
|
450
|
+
rightElement?: React$1.ReactNode;
|
|
451
|
+
}
|
|
452
|
+
/**
|
|
453
|
+
* InputGroup component - Korean design system.
|
|
454
|
+
*
|
|
455
|
+
* @example
|
|
456
|
+
* ```tsx
|
|
457
|
+
* // With addon
|
|
458
|
+
* <InputGroup leftAddon="https://">
|
|
459
|
+
* <Input placeholder="example.com" />
|
|
460
|
+
* </InputGroup>
|
|
461
|
+
*
|
|
462
|
+
* // With element (button)
|
|
463
|
+
* <InputGroup rightElement={<Button size="sm">검색</Button>}>
|
|
464
|
+
* <Input placeholder="검색어 입력" />
|
|
465
|
+
* </InputGroup>
|
|
466
|
+
*
|
|
467
|
+
* // Both sides
|
|
468
|
+
* <InputGroup
|
|
469
|
+
* leftAddon="₩"
|
|
470
|
+
* rightAddon=".00"
|
|
471
|
+
* >
|
|
472
|
+
* <Input type="number" placeholder="0" />
|
|
473
|
+
* </InputGroup>
|
|
474
|
+
* ```
|
|
475
|
+
*/
|
|
476
|
+
declare const InputGroup: React$1.ForwardRefExoticComponent<InputGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
477
|
+
|
|
478
|
+
interface InputOTPProps extends Omit<React$1.ComponentPropsWithoutRef<typeof OTPInput>, "containerClassName" | "render"> {
|
|
479
|
+
containerClassName?: string;
|
|
480
|
+
}
|
|
481
|
+
/**
|
|
482
|
+
* InputOTP - Korean design system.
|
|
483
|
+
*
|
|
484
|
+
* @example
|
|
485
|
+
* ```tsx
|
|
486
|
+
* const [otp, setOtp] = React.useState("");
|
|
487
|
+
*
|
|
488
|
+
* <InputOTP
|
|
489
|
+
* maxLength={6}
|
|
490
|
+
* value={otp}
|
|
491
|
+
* onChange={(value) => setOtp(value)}
|
|
492
|
+
* >
|
|
493
|
+
* <InputOTPGroup>
|
|
494
|
+
* <InputOTPSlot index={0} />
|
|
495
|
+
* <InputOTPSlot index={1} />
|
|
496
|
+
* <InputOTPSlot index={2} />
|
|
497
|
+
* </InputOTPGroup>
|
|
498
|
+
* <InputOTPSeparator />
|
|
499
|
+
* <InputOTPGroup>
|
|
500
|
+
* <InputOTPSlot index={3} />
|
|
501
|
+
* <InputOTPSlot index={4} />
|
|
502
|
+
* <InputOTPSlot index={5} />
|
|
503
|
+
* </InputOTPGroup>
|
|
504
|
+
* </InputOTP>
|
|
505
|
+
* ```
|
|
506
|
+
*/
|
|
507
|
+
declare const InputOTP: React$1.ForwardRefExoticComponent<InputOTPProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
508
|
+
declare const InputOTPGroup: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
509
|
+
declare const InputOTPSlot: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
510
|
+
index: number;
|
|
511
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
512
|
+
declare const InputOTPSeparator: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
513
|
+
|
|
514
|
+
type PathKey = string;
|
|
515
|
+
type NamePath = string | number | Array<string | number>;
|
|
516
|
+
|
|
517
|
+
type Rule = {
|
|
518
|
+
required?: boolean;
|
|
519
|
+
message?: string;
|
|
520
|
+
validator?: (value: any) => boolean | Promise<boolean>;
|
|
521
|
+
};
|
|
522
|
+
declare const requiredRule: (message?: string) => Rule;
|
|
523
|
+
declare const minLengthRule: (min: number, message?: string) => Rule;
|
|
524
|
+
declare const maxLengthRule: (max: number, message?: string) => Rule;
|
|
525
|
+
declare const patternRule: (pattern: RegExp, message?: string) => Rule;
|
|
526
|
+
declare const emailRule: (message?: string) => Rule;
|
|
527
|
+
declare const urlRule: (message?: string) => Rule;
|
|
528
|
+
declare const numberRule: (message?: string) => Rule;
|
|
529
|
+
declare const minValueRule: (min: number, message?: string) => Rule;
|
|
530
|
+
declare const maxValueRule: (max: number, message?: string) => Rule;
|
|
531
|
+
declare const composeRules: (...rules: Array<Rule | undefined>) => Rule[];
|
|
532
|
+
|
|
533
|
+
type FieldError = {
|
|
534
|
+
name: Array<string | number>;
|
|
535
|
+
errors: string[];
|
|
536
|
+
};
|
|
537
|
+
type MountHandlers = {
|
|
538
|
+
onValuesChange?: (changed: Record<string, any>, all: Record<string, any>) => void;
|
|
539
|
+
onFieldsChange?: (fields: FieldError[]) => void;
|
|
540
|
+
onSubmit?: () => void;
|
|
541
|
+
onStoreChange?: () => void;
|
|
542
|
+
};
|
|
543
|
+
interface FormInstance {
|
|
544
|
+
getFieldsValue: (options?: {
|
|
545
|
+
clone?: boolean;
|
|
546
|
+
}) => Record<string, any>;
|
|
547
|
+
getFieldValue: (name: NamePath) => any;
|
|
548
|
+
setFieldsValue: (vals: Record<string, any>, options?: {
|
|
549
|
+
revalidate?: boolean;
|
|
550
|
+
}) => void;
|
|
551
|
+
setFieldValue: (name: NamePath, value: any) => void;
|
|
552
|
+
validateFields: (names?: NamePath[]) => Promise<Record<string, any>>;
|
|
553
|
+
submit: () => void;
|
|
554
|
+
resetFields: (names?: NamePath[]) => void;
|
|
555
|
+
getFieldError: (name: NamePath) => string[];
|
|
556
|
+
getFieldsError: () => FieldError[];
|
|
557
|
+
registerField?: (name: NamePath, meta: {
|
|
558
|
+
rules?: Rule[];
|
|
559
|
+
onStoreChange?: () => void;
|
|
560
|
+
valuePropName?: string;
|
|
561
|
+
trigger?: string;
|
|
562
|
+
getValueFromEvent?: (event: any) => any;
|
|
563
|
+
}) => void;
|
|
564
|
+
unregisterField?: (name: NamePath) => void;
|
|
565
|
+
setOnChange?: (fn: (state: {
|
|
566
|
+
values: Record<string, any>;
|
|
567
|
+
errors: Record<PathKey, string[]>;
|
|
568
|
+
version: number;
|
|
569
|
+
}) => void) => (() => void) | undefined;
|
|
570
|
+
onValuesChange?: (changedValues: Record<string, any>, allValues: Record<string, any>) => void;
|
|
571
|
+
onFieldsChange?: (fields: FieldError[]) => void;
|
|
572
|
+
subscribe(fn: (state: {
|
|
573
|
+
values: Record<string, any>;
|
|
574
|
+
errors: Record<PathKey, string[]>;
|
|
575
|
+
version: number;
|
|
576
|
+
}) => void): () => void;
|
|
577
|
+
preserveOnUnmount?: boolean;
|
|
578
|
+
setPreserve?: (preserve: boolean) => void;
|
|
579
|
+
INTERNAL?: {
|
|
580
|
+
name?: string;
|
|
581
|
+
itemRef: (name: Array<string | number>) => (node: ReactElement | null) => void;
|
|
582
|
+
};
|
|
583
|
+
getFieldInstance?: (name: NamePath) => any;
|
|
584
|
+
registerMount?: (id: string, handlers: MountHandlers) => () => void;
|
|
585
|
+
unregisterMount?: (id: string) => void;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
declare function useForm(): FormInstance;
|
|
589
|
+
declare function useWatch(name?: NamePath | NamePath[], formInstance?: FormInstance): any;
|
|
590
|
+
|
|
591
|
+
type FormItemVariant = 'outlined' | 'filled' | 'borderless' | 'underlined';
|
|
592
|
+
interface FormProps {
|
|
593
|
+
form?: FormInstance;
|
|
594
|
+
initialValues?: Record<string, any>;
|
|
595
|
+
preserve?: boolean;
|
|
596
|
+
disabled?: boolean;
|
|
597
|
+
onFinish?: (values: Record<string, any>) => void;
|
|
598
|
+
onFinishFailed?: (errorInfo: any) => void;
|
|
599
|
+
onValuesChange?: (changedValues: Record<string, any>, allValues: Record<string, any>) => void;
|
|
600
|
+
onFieldsChange?: (fields: FieldError[]) => void;
|
|
601
|
+
children?: ReactNode;
|
|
602
|
+
}
|
|
603
|
+
declare const Form: React__default.ForwardRefExoticComponent<FormProps & React__default.RefAttributes<FormInstance | null>>;
|
|
604
|
+
interface FormItemProps {
|
|
605
|
+
name: NamePath;
|
|
606
|
+
rules?: Rule[];
|
|
607
|
+
children?: ReactElement;
|
|
608
|
+
valuePropName?: string;
|
|
609
|
+
trigger?: 'onChange' | 'onSelect' | 'onClick' | 'onCheckedChange' | 'onBlur' | 'onValueChange' | 'onDateChange';
|
|
610
|
+
getValueFromEvent?: (e: any) => any;
|
|
611
|
+
label?: ReactNode;
|
|
612
|
+
help?: ReactNode;
|
|
613
|
+
className?: string;
|
|
614
|
+
style?: React__default.CSSProperties;
|
|
615
|
+
variant?: FormItemVariant;
|
|
616
|
+
requiredMark?: ReactNode;
|
|
617
|
+
}
|
|
618
|
+
declare const FormItem: (props: FormItemProps) => react_jsx_runtime.JSX.Element | null;
|
|
619
|
+
interface FormListField {
|
|
620
|
+
key: number;
|
|
621
|
+
name: number;
|
|
622
|
+
fieldKey: number;
|
|
623
|
+
}
|
|
624
|
+
interface FormListOperationHandlers {
|
|
625
|
+
add: (defaultValue?: any, index?: number) => void;
|
|
626
|
+
remove: (index: number | number[]) => void;
|
|
627
|
+
move: (from: number, to: number) => void;
|
|
628
|
+
}
|
|
629
|
+
interface FormListMeta {
|
|
630
|
+
errors: string[];
|
|
631
|
+
}
|
|
632
|
+
interface FormListProps {
|
|
633
|
+
name: NamePath;
|
|
634
|
+
initialValue?: any[];
|
|
635
|
+
children: (fields: FormListField[], operations: FormListOperationHandlers, meta: FormListMeta) => ReactNode;
|
|
636
|
+
}
|
|
637
|
+
declare const FormList: (props: FormListProps) => react_jsx_runtime.JSX.Element;
|
|
638
|
+
|
|
639
|
+
declare const fieldVariants: (props?: ({
|
|
640
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
641
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
642
|
+
interface FieldProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof fieldVariants> {
|
|
643
|
+
label?: string;
|
|
644
|
+
htmlFor?: string;
|
|
645
|
+
required?: boolean;
|
|
646
|
+
error?: string;
|
|
647
|
+
helperText?: string;
|
|
648
|
+
labelClassName?: string;
|
|
649
|
+
}
|
|
650
|
+
/**
|
|
651
|
+
* Field component - Korean design system form field wrapper.
|
|
652
|
+
*
|
|
653
|
+
* @example
|
|
654
|
+
* ```tsx
|
|
655
|
+
* <Field label="이메일" htmlFor="email" required helperText="example@email.com">
|
|
656
|
+
* <Input id="email" type="email" />
|
|
657
|
+
* </Field>
|
|
658
|
+
*
|
|
659
|
+
* <Field label="비밀번호" error="비밀번호가 일치하지 않습니다">
|
|
660
|
+
* <Input type="password" />
|
|
661
|
+
* </Field>
|
|
662
|
+
*
|
|
663
|
+
* <Field
|
|
664
|
+
* label="프로필"
|
|
665
|
+
* orientation="horizontal"
|
|
666
|
+
* helperText="사진을 업로드하세요"
|
|
667
|
+
* >
|
|
668
|
+
* <Input type="file" />
|
|
669
|
+
* </Field>
|
|
670
|
+
* ```
|
|
671
|
+
*/
|
|
672
|
+
declare const Field: React$1.ForwardRefExoticComponent<FieldProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
673
|
+
|
|
674
|
+
declare const alertVariants: (props?: ({
|
|
675
|
+
variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
|
|
676
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
677
|
+
interface AlertProps extends Omit<React$1.ComponentProps<"div">, "title">, VariantProps<typeof alertVariants> {
|
|
678
|
+
/** Icon to display at the start of the alert */
|
|
679
|
+
icon?: React$1.ReactNode;
|
|
680
|
+
/** Title/heading of the alert */
|
|
681
|
+
title?: React$1.ReactNode;
|
|
682
|
+
/** Description/content of the alert */
|
|
683
|
+
description?: React$1.ReactNode;
|
|
684
|
+
/** Whether the alert can be dismissed */
|
|
685
|
+
dismissible?: boolean;
|
|
686
|
+
/** Callback when alert is dismissed */
|
|
687
|
+
onClose?: () => void;
|
|
688
|
+
/** Additional CSS class for the title */
|
|
689
|
+
titleClassName?: string;
|
|
690
|
+
/** Additional CSS class for the description */
|
|
691
|
+
descriptionClassName?: string;
|
|
692
|
+
}
|
|
693
|
+
/**
|
|
694
|
+
* Alert component - Hiển thị thông báo cho người dùng
|
|
695
|
+
* Chỉ cần truyền props vào là được, đơn giản và dễ sử dụng
|
|
696
|
+
*
|
|
697
|
+
* @example
|
|
698
|
+
* // Destructive alert
|
|
699
|
+
* <Alert
|
|
700
|
+
* variant="destructive"
|
|
701
|
+
* icon={<AlertCircle />}
|
|
702
|
+
* title="Error"
|
|
703
|
+
* description="Something went wrong"
|
|
704
|
+
* dismissible
|
|
705
|
+
* onClose={() => console.log('closed')}
|
|
706
|
+
* />
|
|
707
|
+
*
|
|
708
|
+
* // Success alert
|
|
709
|
+
* <Alert
|
|
710
|
+
* variant="success"
|
|
711
|
+
* icon={<CheckCircle />}
|
|
712
|
+
* title="Success"
|
|
713
|
+
* description="Operation completed successfully"
|
|
714
|
+
* />
|
|
715
|
+
*
|
|
716
|
+
* // Warning alert
|
|
717
|
+
* <Alert
|
|
718
|
+
* variant="warning"
|
|
719
|
+
* icon={<AlertTriangle />}
|
|
720
|
+
* title="Warning"
|
|
721
|
+
* description="Please review before proceeding"
|
|
722
|
+
* />
|
|
723
|
+
*
|
|
724
|
+
* // Info alert
|
|
725
|
+
* <Alert
|
|
726
|
+
* variant="info"
|
|
727
|
+
* icon={<Info />}
|
|
728
|
+
* title="Information"
|
|
729
|
+
* description="Here's some helpful information"
|
|
730
|
+
* />
|
|
731
|
+
*/
|
|
732
|
+
declare const Alert: React$1.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
733
|
+
|
|
734
|
+
type ToastId = string;
|
|
735
|
+
interface ToastData extends Omit<ToastProps, "ref"> {
|
|
736
|
+
id: ToastId;
|
|
737
|
+
duration?: number;
|
|
738
|
+
}
|
|
739
|
+
declare function ToastProvider({ children, defaultDuration, position, }: {
|
|
740
|
+
children: React$1.ReactNode;
|
|
741
|
+
defaultDuration?: number;
|
|
742
|
+
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
743
|
+
}): react_jsx_runtime.JSX.Element;
|
|
744
|
+
|
|
745
|
+
type ToastOptions = {
|
|
746
|
+
variant?: "default" | "destructive" | "success" | "warning" | "info";
|
|
747
|
+
icon?: React.ReactNode;
|
|
748
|
+
title?: React.ReactNode;
|
|
749
|
+
description?: React.ReactNode;
|
|
750
|
+
dismissible?: boolean;
|
|
751
|
+
onClose?: () => void;
|
|
752
|
+
titleClassName?: string;
|
|
753
|
+
descriptionClassName?: string;
|
|
754
|
+
duration?: number;
|
|
755
|
+
className?: string;
|
|
756
|
+
};
|
|
757
|
+
declare function useToast(): {
|
|
758
|
+
toast: (props: ToastOptions) => string;
|
|
759
|
+
dismiss: (id: ToastId) => void;
|
|
760
|
+
};
|
|
761
|
+
|
|
762
|
+
declare const toastVariants: (props?: ({
|
|
763
|
+
variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
|
|
764
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
765
|
+
interface ToastProps extends Omit<React$1.ComponentProps<"div">, "title">, VariantProps<typeof toastVariants> {
|
|
766
|
+
/** Icon to display at the start of the toast */
|
|
767
|
+
icon?: React$1.ReactNode;
|
|
768
|
+
/** Title/heading of the toast */
|
|
769
|
+
title?: React$1.ReactNode;
|
|
770
|
+
/** Description/content of the toast */
|
|
771
|
+
description?: React$1.ReactNode;
|
|
772
|
+
/** Whether the toast can be dismissed */
|
|
773
|
+
dismissible?: boolean;
|
|
774
|
+
/** Callback when toast is dismissed */
|
|
775
|
+
onClose?: () => void;
|
|
776
|
+
/** Additional CSS class for the title */
|
|
777
|
+
titleClassName?: string;
|
|
778
|
+
/** Additional CSS class for the description */
|
|
779
|
+
descriptionClassName?: string;
|
|
780
|
+
}
|
|
781
|
+
/**
|
|
782
|
+
* @example
|
|
783
|
+
* <Toast
|
|
784
|
+
* variant="success"
|
|
785
|
+
* icon={<CheckCircle />}
|
|
786
|
+
* title="Success"
|
|
787
|
+
* description="Your changes have been saved"
|
|
788
|
+
* dismissible
|
|
789
|
+
* onClose={() => console.log('closed')}
|
|
790
|
+
* />
|
|
791
|
+
*/
|
|
792
|
+
declare const Toast: React$1.ForwardRefExoticComponent<Omit<ToastProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
793
|
+
|
|
794
|
+
type ToasterProps = React.ComponentProps<typeof Toaster$1>;
|
|
795
|
+
/**
|
|
796
|
+
* Toaster component with Korean design system.
|
|
797
|
+
* Add this to your root layout.
|
|
798
|
+
*
|
|
799
|
+
* @example
|
|
800
|
+
* ```tsx
|
|
801
|
+
* // In layout.tsx
|
|
802
|
+
* import { Toaster } from "@/components/ui/sonner";
|
|
803
|
+
*
|
|
804
|
+
* export default function RootLayout({ children }) {
|
|
805
|
+
* return (
|
|
806
|
+
* <html>
|
|
807
|
+
* <body>
|
|
808
|
+
* {children}
|
|
809
|
+
* <Toaster />
|
|
810
|
+
* </body>
|
|
811
|
+
* </html>
|
|
812
|
+
* );
|
|
813
|
+
* }
|
|
814
|
+
*
|
|
815
|
+
* // Usage
|
|
816
|
+
* import { toast } from "sonner";
|
|
817
|
+
*
|
|
818
|
+
* toast.success("저장되었습니다!");
|
|
819
|
+
* toast.error("오류가 발생했습니다.");
|
|
820
|
+
* toast.info("알림이 있습니다.");
|
|
821
|
+
* toast.warning("주의가 필요합니다.");
|
|
822
|
+
*
|
|
823
|
+
* toast("파일이 업로드되었습니다.", {
|
|
824
|
+
* action: {
|
|
825
|
+
* label: "보기",
|
|
826
|
+
* onClick: () => console.log("View"),
|
|
827
|
+
* },
|
|
828
|
+
* });
|
|
829
|
+
*
|
|
830
|
+
* toast.promise(
|
|
831
|
+
* fetchData(),
|
|
832
|
+
* {
|
|
833
|
+
* loading: "로딩 중...",
|
|
834
|
+
* success: "완료!",
|
|
835
|
+
* error: "오류 발생",
|
|
836
|
+
* }
|
|
837
|
+
* );
|
|
838
|
+
* ```
|
|
839
|
+
*/
|
|
840
|
+
declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
|
|
841
|
+
|
|
842
|
+
declare const progressVariants: (props?: ({
|
|
843
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
844
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
845
|
+
interface ProgressProps extends React$1.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, VariantProps<typeof progressVariants> {
|
|
846
|
+
value?: number;
|
|
847
|
+
max?: number;
|
|
848
|
+
showValue?: boolean;
|
|
849
|
+
label?: string;
|
|
850
|
+
}
|
|
851
|
+
/**
|
|
852
|
+
* Progress component - Korean design system.
|
|
853
|
+
*
|
|
854
|
+
* @example
|
|
855
|
+
* ```tsx
|
|
856
|
+
* <Progress value={60} />
|
|
857
|
+
*
|
|
858
|
+
* <Progress value={75} showValue label="업로드 중" />
|
|
859
|
+
*
|
|
860
|
+
* <Progress value={33} size="lg" />
|
|
861
|
+
* ```
|
|
862
|
+
*/
|
|
863
|
+
declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
864
|
+
|
|
865
|
+
declare const spinnerVariants: (props?: ({
|
|
866
|
+
size?: "default" | "sm" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
|
|
867
|
+
variant?: "default" | "destructive" | "secondary" | "muted" | "light" | null | undefined;
|
|
868
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
869
|
+
interface SpinnerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof spinnerVariants> {
|
|
870
|
+
label?: string;
|
|
871
|
+
centered?: boolean;
|
|
872
|
+
overlay?: boolean;
|
|
873
|
+
icon?: React$1.ReactNode;
|
|
874
|
+
}
|
|
875
|
+
/**
|
|
876
|
+
* Spinner component for loading states.
|
|
877
|
+
*
|
|
878
|
+
* @example
|
|
879
|
+
* ```tsx
|
|
880
|
+
* <Spinner />
|
|
881
|
+
* <Spinner label="로딩 중..." />
|
|
882
|
+
* <Spinner size="xl" />
|
|
883
|
+
* <Spinner centered label="데이터 로딩 중..." />
|
|
884
|
+
* <Spinner overlay label="처리 중입니다..." />
|
|
885
|
+
* ```
|
|
886
|
+
*/
|
|
887
|
+
declare const Spinner: React$1.ForwardRefExoticComponent<SpinnerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
888
|
+
interface DotsSpinnerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
889
|
+
size?: "xs" | "sm" | "default" | "lg" | "xl" | "2xl";
|
|
890
|
+
dotCount?: 3 | 4 | 5;
|
|
891
|
+
}
|
|
892
|
+
/**
|
|
893
|
+
* Dots spinner - Korean style loading indicator.
|
|
894
|
+
*
|
|
895
|
+
* @example
|
|
896
|
+
* ```tsx
|
|
897
|
+
* <DotsSpinner />
|
|
898
|
+
* <DotsSpinner dotCount={5} size="lg" />
|
|
899
|
+
* ```
|
|
900
|
+
*/
|
|
901
|
+
declare const DotsSpinner: React$1.ForwardRefExoticComponent<DotsSpinnerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
902
|
+
|
|
903
|
+
declare const skeletonVariants: (props?: ({
|
|
904
|
+
variant?: "default" | "shimmer" | "wave" | null | undefined;
|
|
905
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
906
|
+
interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
|
|
907
|
+
width?: string | number;
|
|
908
|
+
height?: string | number;
|
|
909
|
+
circle?: boolean;
|
|
910
|
+
count?: number;
|
|
911
|
+
gap?: string | number;
|
|
912
|
+
}
|
|
913
|
+
/**
|
|
914
|
+
* Skeleton loading component.
|
|
915
|
+
*
|
|
916
|
+
* @example
|
|
917
|
+
* ```tsx
|
|
918
|
+
* <Skeleton className="h-4 w-[250px]" />
|
|
919
|
+
* <Skeleton circle width={40} height={40} />
|
|
920
|
+
* <Skeleton count={3} className="h-4" />
|
|
921
|
+
* <Skeleton variant="shimmer" className="h-20 w-full" />
|
|
922
|
+
* ```
|
|
923
|
+
*/
|
|
924
|
+
declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
925
|
+
interface SkeletonCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
926
|
+
avatar?: boolean;
|
|
927
|
+
lines?: number;
|
|
928
|
+
}
|
|
929
|
+
/**
|
|
930
|
+
* Preset skeleton card layout.
|
|
931
|
+
*
|
|
932
|
+
* @example
|
|
933
|
+
* ```tsx
|
|
934
|
+
* <SkeletonCard avatar lines={3} />
|
|
935
|
+
* ```
|
|
936
|
+
*/
|
|
937
|
+
declare const SkeletonCard: React$1.ForwardRefExoticComponent<SkeletonCardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
938
|
+
|
|
939
|
+
declare const emptyVariants: (props?: ({
|
|
940
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
941
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
942
|
+
interface EmptyProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof emptyVariants> {
|
|
943
|
+
icon?: React$1.ReactNode;
|
|
944
|
+
title?: string;
|
|
945
|
+
description?: string;
|
|
946
|
+
action?: {
|
|
947
|
+
label: string;
|
|
948
|
+
onClick: () => void;
|
|
949
|
+
};
|
|
950
|
+
}
|
|
951
|
+
/**
|
|
952
|
+
* Empty state component - Korean design system.
|
|
953
|
+
*
|
|
954
|
+
* @example
|
|
955
|
+
* ```tsx
|
|
956
|
+
* <Empty
|
|
957
|
+
* title="No data found"
|
|
958
|
+
* description="There are no items yet."
|
|
959
|
+
* action={{
|
|
960
|
+
* label: "Add item",
|
|
961
|
+
* onClick: () => console.log("Add item"),
|
|
962
|
+
* }}
|
|
963
|
+
* />
|
|
964
|
+
*
|
|
965
|
+
* <Empty
|
|
966
|
+
* icon={<SearchIcon className="h-12 w-12" />}
|
|
967
|
+
* title="No search results"
|
|
968
|
+
* />
|
|
969
|
+
* ```
|
|
970
|
+
*/
|
|
971
|
+
declare const Empty: React$1.ForwardRefExoticComponent<EmptyProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
972
|
+
|
|
973
|
+
declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
|
|
974
|
+
declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
975
|
+
declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
|
|
976
|
+
declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
977
|
+
declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
978
|
+
declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
979
|
+
declare const DialogHeader: {
|
|
980
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
981
|
+
displayName: string;
|
|
982
|
+
};
|
|
983
|
+
declare const DialogFooter: {
|
|
984
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
985
|
+
displayName: string;
|
|
986
|
+
};
|
|
987
|
+
declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
988
|
+
declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
989
|
+
|
|
990
|
+
declare const AlertDialog: React$1.FC<AlertDialogPrimitive.AlertDialogProps>;
|
|
991
|
+
declare const AlertDialogTrigger: React$1.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
992
|
+
declare const AlertDialogPortal: React$1.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
|
|
993
|
+
declare const AlertDialogOverlay: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
994
|
+
declare const AlertDialogContent: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
995
|
+
declare const AlertDialogHeader: {
|
|
996
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
997
|
+
displayName: string;
|
|
998
|
+
};
|
|
999
|
+
declare const AlertDialogFooter: {
|
|
1000
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
1001
|
+
displayName: string;
|
|
1002
|
+
};
|
|
1003
|
+
declare const AlertDialogTitle: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
1004
|
+
declare const AlertDialogDescription: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1005
|
+
declare const AlertDialogAction: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1006
|
+
declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1007
|
+
|
|
1008
|
+
declare const Sheet: React$1.FC<DialogPrimitive.DialogProps>;
|
|
1009
|
+
declare const SheetTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1010
|
+
declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1011
|
+
declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
|
|
1012
|
+
declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1013
|
+
declare const sheetVariants: (props?: ({
|
|
1014
|
+
side?: "top" | "right" | "bottom" | "left" | null | undefined;
|
|
1015
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1016
|
+
interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
|
|
1017
|
+
hideClose?: boolean;
|
|
1018
|
+
}
|
|
1019
|
+
declare const SheetContent: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1020
|
+
declare const SheetHeader: {
|
|
1021
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
1022
|
+
displayName: string;
|
|
1023
|
+
};
|
|
1024
|
+
declare const SheetFooter: {
|
|
1025
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
1026
|
+
displayName: string;
|
|
1027
|
+
};
|
|
1028
|
+
declare const SheetTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
1029
|
+
declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1030
|
+
|
|
1031
|
+
declare const Drawer: {
|
|
1032
|
+
({ shouldScaleBackground, direction, ...props }: React$1.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
|
|
1033
|
+
displayName: string;
|
|
1034
|
+
};
|
|
1035
|
+
declare const DrawerTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1036
|
+
declare const DrawerPortal: typeof vaul.Portal;
|
|
1037
|
+
declare const DrawerClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1038
|
+
declare const DrawerOverlay: React$1.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1039
|
+
declare const DrawerContent: React$1.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1040
|
+
declare const DrawerHeader: {
|
|
1041
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
1042
|
+
displayName: string;
|
|
1043
|
+
};
|
|
1044
|
+
declare const DrawerFooter: {
|
|
1045
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
1046
|
+
displayName: string;
|
|
1047
|
+
};
|
|
1048
|
+
declare const DrawerTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
1049
|
+
declare const DrawerDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1050
|
+
|
|
1051
|
+
declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
|
|
1052
|
+
declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1053
|
+
declare const PopoverAnchor: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1054
|
+
declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1055
|
+
|
|
1056
|
+
declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
|
|
1057
|
+
declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
|
|
1058
|
+
declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1059
|
+
declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1060
|
+
interface SimpleTooltipProps {
|
|
1061
|
+
children: React$1.ReactNode;
|
|
1062
|
+
content: React$1.ReactNode;
|
|
1063
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
1064
|
+
align?: "start" | "center" | "end";
|
|
1065
|
+
delayDuration?: number;
|
|
1066
|
+
className?: string;
|
|
1067
|
+
}
|
|
1068
|
+
/**
|
|
1069
|
+
* SimpleTooltip - Simplified Korean design system tooltip.
|
|
1070
|
+
*
|
|
1071
|
+
* @example
|
|
1072
|
+
* ```tsx
|
|
1073
|
+
* <SimpleTooltip content="도움말 텍스트">
|
|
1074
|
+
* <Button>호버하세요</Button>
|
|
1075
|
+
* </SimpleTooltip>
|
|
1076
|
+
*
|
|
1077
|
+
* <SimpleTooltip content="위에 표시" side="top">
|
|
1078
|
+
* <IconButton icon={<HelpIcon />} />
|
|
1079
|
+
* </SimpleTooltip>
|
|
1080
|
+
* ```
|
|
1081
|
+
*/
|
|
1082
|
+
declare const SimpleTooltip: React$1.ForwardRefExoticComponent<SimpleTooltipProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1083
|
+
|
|
1084
|
+
declare const HoverCard: React$1.FC<HoverCardPrimitive.HoverCardProps>;
|
|
1085
|
+
declare const HoverCardTrigger: React$1.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React$1.RefAttributes<HTMLAnchorElement>>;
|
|
1086
|
+
declare const HoverCardContent: React$1.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1087
|
+
arrow?: boolean;
|
|
1088
|
+
arrowClassName?: string;
|
|
1089
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1090
|
+
|
|
1091
|
+
declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
|
|
1092
|
+
declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1093
|
+
declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1094
|
+
declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
|
|
1095
|
+
declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
1096
|
+
declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1097
|
+
declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1098
|
+
inset?: boolean;
|
|
1099
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1100
|
+
declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1101
|
+
declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1102
|
+
declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1103
|
+
inset?: boolean;
|
|
1104
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1105
|
+
declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1106
|
+
declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1107
|
+
declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1108
|
+
inset?: boolean;
|
|
1109
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1110
|
+
declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1111
|
+
declare const DropdownMenuShortcut: {
|
|
1112
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
|
|
1113
|
+
displayName: string;
|
|
1114
|
+
};
|
|
1115
|
+
|
|
1116
|
+
declare const ContextMenu: React$1.FC<ContextMenuPrimitive.ContextMenuProps>;
|
|
1117
|
+
declare const ContextMenuTrigger: React$1.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
1118
|
+
declare const ContextMenuGroup: React$1.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1119
|
+
declare const ContextMenuPortal: React$1.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
|
|
1120
|
+
declare const ContextMenuSub: React$1.FC<ContextMenuPrimitive.ContextMenuSubProps>;
|
|
1121
|
+
declare const ContextMenuRadioGroup: React$1.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1122
|
+
declare const ContextMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1123
|
+
inset?: boolean;
|
|
1124
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1125
|
+
declare const ContextMenuSubContent: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1126
|
+
declare const ContextMenuContent: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1127
|
+
declare const ContextMenuItem: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1128
|
+
inset?: boolean;
|
|
1129
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1130
|
+
declare const ContextMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1131
|
+
declare const ContextMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1132
|
+
declare const ContextMenuLabel: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1133
|
+
inset?: boolean;
|
|
1134
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1135
|
+
declare const ContextMenuSeparator: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1136
|
+
declare const ContextMenuShortcut: {
|
|
1137
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
|
|
1138
|
+
displayName: string;
|
|
1139
|
+
};
|
|
1140
|
+
|
|
1141
|
+
declare const MenubarMenu: {
|
|
1142
|
+
(props: MenubarPrimitive.MenubarMenuProps & {
|
|
1143
|
+
__scopeMenubar?: _radix_ui_react_context.Scope;
|
|
1144
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1145
|
+
displayName: string;
|
|
1146
|
+
};
|
|
1147
|
+
declare const MenubarGroup: React$1.ForwardRefExoticComponent<MenubarPrimitive.MenubarGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1148
|
+
declare const MenubarPortal: React$1.FC<MenubarPrimitive.MenubarPortalProps>;
|
|
1149
|
+
declare const MenubarSub: React$1.FC<MenubarPrimitive.MenubarSubProps>;
|
|
1150
|
+
declare const MenubarRadioGroup: React$1.ForwardRefExoticComponent<MenubarPrimitive.MenubarRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1151
|
+
declare const Menubar: React$1.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1152
|
+
declare const MenubarTrigger: React$1.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1153
|
+
declare const MenubarSubTrigger: React$1.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1154
|
+
inset?: boolean;
|
|
1155
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1156
|
+
declare const MenubarSubContent: React$1.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1157
|
+
declare const MenubarContent: React$1.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1158
|
+
declare const MenubarItem: React$1.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1159
|
+
inset?: boolean;
|
|
1160
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1161
|
+
declare const MenubarCheckboxItem: React$1.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1162
|
+
declare const MenubarRadioItem: React$1.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1163
|
+
declare const MenubarLabel: React$1.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1164
|
+
inset?: boolean;
|
|
1165
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1166
|
+
declare const MenubarSeparator: React$1.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1167
|
+
declare const MenubarShortcut: {
|
|
1168
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
|
|
1169
|
+
displayName: string;
|
|
1170
|
+
};
|
|
1171
|
+
|
|
1172
|
+
declare const NavigationMenu: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React$1.RefAttributes<HTMLElement>, "ref"> & React$1.RefAttributes<HTMLElement>>;
|
|
1173
|
+
declare const NavigationMenuList: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React$1.RefAttributes<HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
|
|
1174
|
+
declare const NavigationMenuItem: React$1.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React$1.RefAttributes<HTMLLIElement>>;
|
|
1175
|
+
declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
1176
|
+
declare const NavigationMenuTrigger: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1177
|
+
declare const NavigationMenuContent: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1178
|
+
declare const NavigationMenuLink: React$1.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
|
|
1179
|
+
declare const NavigationMenuViewport: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1180
|
+
declare const NavigationMenuIndicator: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1181
|
+
|
|
1182
|
+
declare const Command: React$1.ForwardRefExoticComponent<Omit<{
|
|
1183
|
+
children?: React$1.ReactNode;
|
|
1184
|
+
} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
1185
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
1186
|
+
} & {
|
|
1187
|
+
asChild?: boolean;
|
|
1188
|
+
}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
1189
|
+
label?: string;
|
|
1190
|
+
shouldFilter?: boolean;
|
|
1191
|
+
filter?: (value: string, search: string, keywords?: string[]) => number;
|
|
1192
|
+
defaultValue?: string;
|
|
1193
|
+
value?: string;
|
|
1194
|
+
onValueChange?: (value: string) => void;
|
|
1195
|
+
loop?: boolean;
|
|
1196
|
+
disablePointerSelection?: boolean;
|
|
1197
|
+
vimBindings?: boolean;
|
|
1198
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1199
|
+
interface CommandDialogProps extends DialogProps {
|
|
1200
|
+
}
|
|
1201
|
+
declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
|
|
1202
|
+
declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>> & {
|
|
1203
|
+
ref?: React$1.Ref<HTMLInputElement>;
|
|
1204
|
+
} & {
|
|
1205
|
+
asChild?: boolean;
|
|
1206
|
+
}, "asChild" | "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
|
|
1207
|
+
value?: string;
|
|
1208
|
+
onValueChange?: (search: string) => void;
|
|
1209
|
+
} & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
1210
|
+
declare const CommandList: React$1.ForwardRefExoticComponent<Omit<{
|
|
1211
|
+
children?: React$1.ReactNode;
|
|
1212
|
+
} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
1213
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
1214
|
+
} & {
|
|
1215
|
+
asChild?: boolean;
|
|
1216
|
+
}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
1217
|
+
label?: string;
|
|
1218
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1219
|
+
declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
|
|
1220
|
+
children?: React$1.ReactNode;
|
|
1221
|
+
} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
1222
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
1223
|
+
} & {
|
|
1224
|
+
asChild?: boolean;
|
|
1225
|
+
}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1226
|
+
declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
|
|
1227
|
+
children?: React$1.ReactNode;
|
|
1228
|
+
} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
1229
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
1230
|
+
} & {
|
|
1231
|
+
asChild?: boolean;
|
|
1232
|
+
}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
|
|
1233
|
+
heading?: React$1.ReactNode;
|
|
1234
|
+
value?: string;
|
|
1235
|
+
forceMount?: boolean;
|
|
1236
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1237
|
+
declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
1238
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
1239
|
+
} & {
|
|
1240
|
+
asChild?: boolean;
|
|
1241
|
+
}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
1242
|
+
alwaysRender?: boolean;
|
|
1243
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1244
|
+
declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
|
|
1245
|
+
children?: React$1.ReactNode;
|
|
1246
|
+
} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
|
|
1247
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
1248
|
+
} & {
|
|
1249
|
+
asChild?: boolean;
|
|
1250
|
+
}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
|
|
1251
|
+
disabled?: boolean;
|
|
1252
|
+
onSelect?: (value: string) => void;
|
|
1253
|
+
value?: string;
|
|
1254
|
+
keywords?: string[];
|
|
1255
|
+
forceMount?: boolean;
|
|
1256
|
+
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1257
|
+
declare const CommandShortcut: {
|
|
1258
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
|
|
1259
|
+
displayName: string;
|
|
1260
|
+
};
|
|
1261
|
+
|
|
1262
|
+
interface ComboboxOption {
|
|
1263
|
+
value: string;
|
|
1264
|
+
label: string;
|
|
1265
|
+
disabled?: boolean;
|
|
1266
|
+
}
|
|
1267
|
+
interface ComboboxProps {
|
|
1268
|
+
options: ComboboxOption[];
|
|
1269
|
+
value?: string;
|
|
1270
|
+
onValueChange?: (value: string) => void;
|
|
1271
|
+
placeholder?: string;
|
|
1272
|
+
searchPlaceholder?: string;
|
|
1273
|
+
emptyText?: string;
|
|
1274
|
+
className?: string;
|
|
1275
|
+
disabled?: boolean;
|
|
1276
|
+
clearable?: boolean;
|
|
1277
|
+
}
|
|
1278
|
+
/**
|
|
1279
|
+
* Combobox - Korean design system.
|
|
1280
|
+
*
|
|
1281
|
+
* @example
|
|
1282
|
+
* ```tsx
|
|
1283
|
+
* const [value, setValue] = React.useState("");
|
|
1284
|
+
*
|
|
1285
|
+
* <Combobox
|
|
1286
|
+
* options={[
|
|
1287
|
+
* { value: "seoul", label: "서울" },
|
|
1288
|
+
* { value: "busan", label: "부산" },
|
|
1289
|
+
* { value: "incheon", label: "인천" },
|
|
1290
|
+
* ]}
|
|
1291
|
+
* value={value}
|
|
1292
|
+
* onValueChange={setValue}
|
|
1293
|
+
* placeholder="도시를 선택하세요"
|
|
1294
|
+
* searchPlaceholder="도시 검색..."
|
|
1295
|
+
* clearable
|
|
1296
|
+
* />
|
|
1297
|
+
* ```
|
|
1298
|
+
*/
|
|
1299
|
+
declare const Combobox: React$1.ForwardRefExoticComponent<ComboboxProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1300
|
+
|
|
1301
|
+
declare const Breadcrumb: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
1302
|
+
separator?: React$1.ReactNode;
|
|
1303
|
+
} & React$1.RefAttributes<HTMLElement>>;
|
|
1304
|
+
declare const BreadcrumbList: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React$1.RefAttributes<HTMLOListElement>>;
|
|
1305
|
+
declare const BreadcrumbItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
|
|
1306
|
+
declare const BreadcrumbLink: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
|
|
1307
|
+
asChild?: boolean;
|
|
1308
|
+
} & React$1.RefAttributes<HTMLAnchorElement>>;
|
|
1309
|
+
declare const BreadcrumbPage: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
|
|
1310
|
+
declare const BreadcrumbSeparator: {
|
|
1311
|
+
({ children, className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
|
|
1312
|
+
displayName: string;
|
|
1313
|
+
};
|
|
1314
|
+
declare const BreadcrumbEllipsis: {
|
|
1315
|
+
({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
|
|
1316
|
+
displayName: string;
|
|
1317
|
+
};
|
|
1318
|
+
|
|
1319
|
+
declare const Pagination: {
|
|
1320
|
+
({ position, className, ...props }: React$1.ComponentProps<"nav"> & {
|
|
1321
|
+
position?: "right" | "left" | "middle";
|
|
1322
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1323
|
+
displayName: string;
|
|
1324
|
+
};
|
|
1325
|
+
declare const PaginationContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
|
|
1326
|
+
declare const PaginationItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
|
|
1327
|
+
type PaginationLinkProps = {
|
|
1328
|
+
isActive?: boolean;
|
|
1329
|
+
disabled?: boolean;
|
|
1330
|
+
} & React$1.ComponentProps<'a'>;
|
|
1331
|
+
declare const PaginationLink: {
|
|
1332
|
+
({ className, isActive, disabled, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
|
|
1333
|
+
displayName: string;
|
|
1334
|
+
};
|
|
1335
|
+
declare const PaginationPrevious: {
|
|
1336
|
+
({ className, title, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
|
|
1337
|
+
displayName: string;
|
|
1338
|
+
};
|
|
1339
|
+
declare const PaginationNext: {
|
|
1340
|
+
({ className, title, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
|
|
1341
|
+
displayName: string;
|
|
1342
|
+
};
|
|
1343
|
+
declare const PaginationFirst: {
|
|
1344
|
+
({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
|
|
1345
|
+
displayName: string;
|
|
1346
|
+
};
|
|
1347
|
+
declare const PaginationLast: {
|
|
1348
|
+
({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
|
|
1349
|
+
displayName: string;
|
|
1350
|
+
};
|
|
1351
|
+
declare const PaginationEllipsis: {
|
|
1352
|
+
({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
|
|
1353
|
+
displayName: string;
|
|
1354
|
+
};
|
|
1355
|
+
|
|
1356
|
+
declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1357
|
+
declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1358
|
+
declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1359
|
+
declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1360
|
+
interface TabItem {
|
|
1361
|
+
value: string;
|
|
1362
|
+
label: string;
|
|
1363
|
+
content: React$1.ReactNode;
|
|
1364
|
+
disabled?: boolean;
|
|
1365
|
+
}
|
|
1366
|
+
interface SimpleTabsProps {
|
|
1367
|
+
items: TabItem[];
|
|
1368
|
+
defaultValue?: string;
|
|
1369
|
+
value?: string;
|
|
1370
|
+
onValueChange?: (value: string) => void;
|
|
1371
|
+
className?: string;
|
|
1372
|
+
tabsListClassName?: string;
|
|
1373
|
+
tabsTriggerClassName?: string;
|
|
1374
|
+
tabsContentClassName?: string;
|
|
1375
|
+
orientation?: 'horizontal' | 'vertical';
|
|
1376
|
+
}
|
|
1377
|
+
declare function SimpleTabs({ items, defaultValue, value, onValueChange, className, tabsListClassName, tabsTriggerClassName, tabsContentClassName, orientation, }: SimpleTabsProps): react_jsx_runtime.JSX.Element;
|
|
1378
|
+
|
|
1379
|
+
declare const cardVariants: (props?: ({
|
|
1380
|
+
variant?: "default" | "outline" | "ghost" | "elevated" | null | undefined;
|
|
1381
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
1382
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1383
|
+
declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
1384
|
+
variant?: "default" | "outline" | "ghost" | "elevated" | null | undefined;
|
|
1385
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
1386
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1387
|
+
declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1388
|
+
declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1389
|
+
declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1390
|
+
declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1391
|
+
declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1392
|
+
interface SimpleCardProps extends VariantProps<typeof cardVariants> {
|
|
1393
|
+
/** Card title */
|
|
1394
|
+
title?: React$1.ReactNode;
|
|
1395
|
+
/** Card description */
|
|
1396
|
+
description?: React$1.ReactNode;
|
|
1397
|
+
/** Card content */
|
|
1398
|
+
content?: React$1.ReactNode;
|
|
1399
|
+
/** Card footer content */
|
|
1400
|
+
footer?: React$1.ReactNode;
|
|
1401
|
+
/** Card header content (alternative to title/description) */
|
|
1402
|
+
header?: React$1.ReactNode;
|
|
1403
|
+
/** Additional CSS class */
|
|
1404
|
+
className?: string;
|
|
1405
|
+
/** Header CSS class */
|
|
1406
|
+
headerClassName?: string;
|
|
1407
|
+
/** Content CSS class */
|
|
1408
|
+
contentClassName?: string;
|
|
1409
|
+
/** Footer CSS class */
|
|
1410
|
+
footerClassName?: string;
|
|
1411
|
+
/** Click handler */
|
|
1412
|
+
onClick?: () => void;
|
|
1413
|
+
/** Hover handler */
|
|
1414
|
+
onHover?: () => void;
|
|
1415
|
+
/** Card image */
|
|
1416
|
+
image?: {
|
|
1417
|
+
src: string;
|
|
1418
|
+
alt: string;
|
|
1419
|
+
className?: string;
|
|
1420
|
+
};
|
|
1421
|
+
/** Show loading state */
|
|
1422
|
+
loading?: boolean;
|
|
1423
|
+
/** Disabled state */
|
|
1424
|
+
disabled?: boolean;
|
|
1425
|
+
}
|
|
1426
|
+
/**
|
|
1427
|
+
* SimpleCard component - Easy-to-use card with minimal setup
|
|
1428
|
+
* Provides a clean API for common card patterns
|
|
1429
|
+
*
|
|
1430
|
+
* @example
|
|
1431
|
+
* // Basic card
|
|
1432
|
+
* <SimpleCard
|
|
1433
|
+
* title="Card Title"
|
|
1434
|
+
* description="Card description"
|
|
1435
|
+
* content={<p>Card content goes here</p>}
|
|
1436
|
+
* />
|
|
1437
|
+
*
|
|
1438
|
+
* // Card with image
|
|
1439
|
+
* <SimpleCard
|
|
1440
|
+
* image={{ src: "/image.jpg", alt: "Image" }}
|
|
1441
|
+
* title="Product Name"
|
|
1442
|
+
* description="Product description"
|
|
1443
|
+
* footer={<Button>Buy Now</Button>}
|
|
1444
|
+
* />
|
|
1445
|
+
*
|
|
1446
|
+
* // Interactive card
|
|
1447
|
+
* <SimpleCard
|
|
1448
|
+
* title="Clickable Card"
|
|
1449
|
+
* content="Click me!"
|
|
1450
|
+
* onClick={() => console.log('Card clicked')}
|
|
1451
|
+
* variant="elevated"
|
|
1452
|
+
* />
|
|
1453
|
+
*
|
|
1454
|
+
* // Loading card
|
|
1455
|
+
* <SimpleCard
|
|
1456
|
+
* title="Loading..."
|
|
1457
|
+
* loading
|
|
1458
|
+
* />
|
|
1459
|
+
*/
|
|
1460
|
+
declare function SimpleCard({ title, description, content, footer, header, image, className, headerClassName, contentClassName, footerClassName, onClick, onHover, loading, disabled, variant, size, }: SimpleCardProps): react_jsx_runtime.JSX.Element;
|
|
1461
|
+
declare function ProductCard({ image, title, price, originalPrice, rating, reviews, onAddToCart, onWishlist, className, ...props }: {
|
|
1462
|
+
image: {
|
|
1463
|
+
src: string;
|
|
1464
|
+
alt: string;
|
|
1465
|
+
};
|
|
1466
|
+
title: string;
|
|
1467
|
+
price: string;
|
|
1468
|
+
originalPrice?: string;
|
|
1469
|
+
rating?: number;
|
|
1470
|
+
reviews?: number;
|
|
1471
|
+
onAddToCart?: () => void;
|
|
1472
|
+
onWishlist?: () => void;
|
|
1473
|
+
className?: string;
|
|
1474
|
+
} & Omit<SimpleCardProps, "title" | "image">): react_jsx_runtime.JSX.Element;
|
|
1475
|
+
declare function ProfileCard({ avatar, name, role, company, email, onContact, onViewProfile, className, ...props }: {
|
|
1476
|
+
avatar: string;
|
|
1477
|
+
name: string;
|
|
1478
|
+
role?: string;
|
|
1479
|
+
company?: string;
|
|
1480
|
+
email?: string;
|
|
1481
|
+
onContact?: () => void;
|
|
1482
|
+
onViewProfile?: () => void;
|
|
1483
|
+
className?: string;
|
|
1484
|
+
} & Omit<SimpleCardProps, "title" | "description" | "content">): react_jsx_runtime.JSX.Element;
|
|
1485
|
+
|
|
1486
|
+
declare const separatorVariants: (props?: ({
|
|
1487
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
1488
|
+
variant?: "default" | "strong" | "dashed" | "soft" | "gradient" | "glow" | null | undefined;
|
|
1489
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1490
|
+
type SeparatorVariants = VariantProps<typeof separatorVariants>;
|
|
1491
|
+
interface SeparatorProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, "orientation"> {
|
|
1492
|
+
orientation?: "horizontal" | "vertical";
|
|
1493
|
+
variant?: SeparatorVariants["variant"];
|
|
1494
|
+
label?: string;
|
|
1495
|
+
}
|
|
1496
|
+
/**
|
|
1497
|
+
* Separator component - Korean design system.
|
|
1498
|
+
*
|
|
1499
|
+
* @example
|
|
1500
|
+
* ```tsx
|
|
1501
|
+
* <Separator />
|
|
1502
|
+
* <Separator variant="soft" />
|
|
1503
|
+
* <Separator variant="gradient" />
|
|
1504
|
+
* <Separator variant="dashed" />
|
|
1505
|
+
* <Separator variant="glow" />
|
|
1506
|
+
* <Separator orientation="vertical" className="h-20" />
|
|
1507
|
+
* <Separator label="또는" />
|
|
1508
|
+
* ```
|
|
1509
|
+
*/
|
|
1510
|
+
declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1511
|
+
|
|
1512
|
+
/**
|
|
1513
|
+
* AspectRatio - Korean design system.
|
|
1514
|
+
*
|
|
1515
|
+
* @example
|
|
1516
|
+
* ```tsx
|
|
1517
|
+
* <AspectRatio ratio={16 / 9}>
|
|
1518
|
+
* <img
|
|
1519
|
+
* src="/image.jpg"
|
|
1520
|
+
* alt="이미지"
|
|
1521
|
+
* className="rounded-md object-cover"
|
|
1522
|
+
* />
|
|
1523
|
+
* </AspectRatio>
|
|
1524
|
+
*
|
|
1525
|
+
* <AspectRatio ratio={1}>
|
|
1526
|
+
* <img src="/square.jpg" alt="정사각형" />
|
|
1527
|
+
* </AspectRatio>
|
|
1528
|
+
*
|
|
1529
|
+
* <AspectRatio ratio={4 / 3}>
|
|
1530
|
+
* <video src="/video.mp4" />
|
|
1531
|
+
* </AspectRatio>
|
|
1532
|
+
* ```
|
|
1533
|
+
*/
|
|
1534
|
+
declare const AspectRatio: React$1.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1535
|
+
|
|
1536
|
+
interface AccordionItemData {
|
|
1537
|
+
/** Unique identifier for the accordion item */
|
|
1538
|
+
id: string;
|
|
1539
|
+
/** Title/trigger text for the accordion item */
|
|
1540
|
+
title: React$1.ReactNode;
|
|
1541
|
+
/** Content to display when the accordion item is expanded */
|
|
1542
|
+
content: React$1.ReactNode;
|
|
1543
|
+
/** Whether this item is disabled */
|
|
1544
|
+
disabled?: boolean;
|
|
1545
|
+
}
|
|
1546
|
+
type AccordionProps = React$1.ComponentProps<typeof AccordionPrimitive.Root> & {
|
|
1547
|
+
/** Array of accordion items to display */
|
|
1548
|
+
items: AccordionItemData[];
|
|
1549
|
+
/** Additional CSS class name for accordion items */
|
|
1550
|
+
itemClassName?: string;
|
|
1551
|
+
/** Additional CSS class name for accordion triggers */
|
|
1552
|
+
triggerClassName?: string;
|
|
1553
|
+
/** Additional CSS class name for accordion content */
|
|
1554
|
+
contentClassName?: string;
|
|
1555
|
+
/** Custom render function for accordion items */
|
|
1556
|
+
renderItem?: (item: AccordionItemData) => React$1.ReactNode;
|
|
1557
|
+
};
|
|
1558
|
+
/**
|
|
1559
|
+
* Accordion component that renders a list of collapsible items.
|
|
1560
|
+
* Simply pass an array of items and the component handles the rest.
|
|
1561
|
+
*/
|
|
1562
|
+
declare const Accordion: React$1.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps & React$1.RefAttributes<HTMLDivElement> & {
|
|
1563
|
+
/** Array of accordion items to display */
|
|
1564
|
+
items: AccordionItemData[];
|
|
1565
|
+
/** Additional CSS class name for accordion items */
|
|
1566
|
+
itemClassName?: string;
|
|
1567
|
+
/** Additional CSS class name for accordion triggers */
|
|
1568
|
+
triggerClassName?: string;
|
|
1569
|
+
/** Additional CSS class name for accordion content */
|
|
1570
|
+
contentClassName?: string;
|
|
1571
|
+
/** Custom render function for accordion items */
|
|
1572
|
+
renderItem?: (item: AccordionItemData) => React$1.ReactNode;
|
|
1573
|
+
}, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React$1.RefAttributes<HTMLDivElement> & {
|
|
1574
|
+
/** Array of accordion items to display */
|
|
1575
|
+
items: AccordionItemData[];
|
|
1576
|
+
/** Additional CSS class name for accordion items */
|
|
1577
|
+
itemClassName?: string;
|
|
1578
|
+
/** Additional CSS class name for accordion triggers */
|
|
1579
|
+
triggerClassName?: string;
|
|
1580
|
+
/** Additional CSS class name for accordion content */
|
|
1581
|
+
contentClassName?: string;
|
|
1582
|
+
/** Custom render function for accordion items */
|
|
1583
|
+
renderItem?: (item: AccordionItemData) => React$1.ReactNode;
|
|
1584
|
+
}, "ref">) & React$1.RefAttributes<HTMLDivElement>>;
|
|
1585
|
+
|
|
1586
|
+
/**
|
|
1587
|
+
* Collapsible - Korean design system.
|
|
1588
|
+
*
|
|
1589
|
+
* @example
|
|
1590
|
+
* ```tsx
|
|
1591
|
+
* <Collapsible defaultOpen>
|
|
1592
|
+
* <CollapsibleItem>
|
|
1593
|
+
* <CollapsibleTrigger>Panel title</CollapsibleTrigger>
|
|
1594
|
+
* <CollapsibleContent>
|
|
1595
|
+
* <p>Hidden content</p>
|
|
1596
|
+
* </CollapsibleContent>
|
|
1597
|
+
* </CollapsibleItem>
|
|
1598
|
+
* </Collapsible>
|
|
1599
|
+
* ```
|
|
1600
|
+
*/
|
|
1601
|
+
declare const Collapsible: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1602
|
+
declare const CollapsibleItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1603
|
+
declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
1604
|
+
indicator?: React$1.ReactNode;
|
|
1605
|
+
} & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1606
|
+
declare const CollapsibleContent: React$1.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1607
|
+
contentClassName?: string;
|
|
1608
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1609
|
+
|
|
1610
|
+
declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => react_jsx_runtime.JSX.Element;
|
|
1611
|
+
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLButtonElement | HTMLElement | HTMLSpanElement | HTMLDivElement | HTMLInputElement | HTMLLabelElement | HTMLParagraphElement | HTMLObjectElement | HTMLLinkElement | HTMLFormElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLDialogElement | HTMLImageElement | HTMLOptionElement | HTMLTableElement | HTMLTimeElement | HTMLProgressElement | HTMLSelectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOutputElement | HTMLPreElement | HTMLScriptElement | HTMLSourceElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
|
|
1612
|
+
className?: string;
|
|
1613
|
+
collapsedSize?: number | undefined;
|
|
1614
|
+
collapsible?: boolean | undefined;
|
|
1615
|
+
defaultSize?: number | undefined;
|
|
1616
|
+
id?: string;
|
|
1617
|
+
maxSize?: number | undefined;
|
|
1618
|
+
minSize?: number | undefined;
|
|
1619
|
+
onCollapse?: ResizablePrimitive.PanelOnCollapse;
|
|
1620
|
+
onExpand?: ResizablePrimitive.PanelOnExpand;
|
|
1621
|
+
onResize?: ResizablePrimitive.PanelOnResize;
|
|
1622
|
+
order?: number;
|
|
1623
|
+
style?: object;
|
|
1624
|
+
tagName?: keyof HTMLElementTagNameMap | undefined;
|
|
1625
|
+
} & {
|
|
1626
|
+
children?: React$1.ReactNode | undefined;
|
|
1627
|
+
} & React$1.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
|
|
1628
|
+
declare const ResizableHandle: ({ withHandle, className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
|
1629
|
+
withHandle?: boolean;
|
|
1630
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
1631
|
+
|
|
1632
|
+
interface ScrollAreaProps extends React$1.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
|
|
1633
|
+
orientation?: "vertical" | "horizontal" | "both";
|
|
1634
|
+
scrollbarClassName?: string;
|
|
1635
|
+
thumbClassName?: string;
|
|
1636
|
+
}
|
|
1637
|
+
/**
|
|
1638
|
+
* ScrollArea component with Korean design system.
|
|
1639
|
+
*
|
|
1640
|
+
* @example
|
|
1641
|
+
* ```tsx
|
|
1642
|
+
* <ScrollArea className="h-[200px] w-full rounded-lg border p-4">
|
|
1643
|
+
* <div className="space-y-4">
|
|
1644
|
+
* {items.map((item) => (
|
|
1645
|
+
* <div key={item.id}>{item.content}</div>
|
|
1646
|
+
* ))}
|
|
1647
|
+
* </div>
|
|
1648
|
+
* </ScrollArea>
|
|
1649
|
+
*
|
|
1650
|
+
* <ScrollArea orientation="horizontal" className="w-full">
|
|
1651
|
+
* <div className="flex gap-4 p-4">
|
|
1652
|
+
* {items.map((item) => (
|
|
1653
|
+
* <div key={item.id} className="shrink-0">
|
|
1654
|
+
* {item.content}
|
|
1655
|
+
* </div>
|
|
1656
|
+
* ))}
|
|
1657
|
+
* </div>
|
|
1658
|
+
* </ScrollArea>
|
|
1659
|
+
* ```
|
|
1660
|
+
*/
|
|
1661
|
+
declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1662
|
+
interface ScrollBarProps extends React$1.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> {
|
|
1663
|
+
thumbClassName?: string;
|
|
1664
|
+
}
|
|
1665
|
+
declare const ScrollBar: React$1.ForwardRefExoticComponent<ScrollBarProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1666
|
+
|
|
1667
|
+
type SidebarContext = {
|
|
1668
|
+
state: "expanded" | "collapsed";
|
|
1669
|
+
open: boolean;
|
|
1670
|
+
setOpen: (open: boolean) => void;
|
|
1671
|
+
openMobile: boolean;
|
|
1672
|
+
setOpenMobile: (open: boolean) => void;
|
|
1673
|
+
isMobile: boolean;
|
|
1674
|
+
toggleSidebar: () => void;
|
|
1675
|
+
};
|
|
1676
|
+
declare const SidebarContext: React$1.Context<SidebarContext | null>;
|
|
1677
|
+
declare function useSidebar(): SidebarContext;
|
|
1678
|
+
interface SidebarProviderProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1679
|
+
defaultOpen?: boolean;
|
|
1680
|
+
open?: boolean;
|
|
1681
|
+
onOpenChange?: (open: boolean) => void;
|
|
1682
|
+
}
|
|
1683
|
+
/**
|
|
1684
|
+
* SidebarProvider - Must wrap your app to use sidebar components.
|
|
1685
|
+
*
|
|
1686
|
+
* @example
|
|
1687
|
+
* ```tsx
|
|
1688
|
+
* <SidebarProvider>
|
|
1689
|
+
* <Sidebar>
|
|
1690
|
+
* <SidebarHeader>
|
|
1691
|
+
* <h2>My App</h2>
|
|
1692
|
+
* </SidebarHeader>
|
|
1693
|
+
* <SidebarContent>
|
|
1694
|
+
* <SidebarGroup>
|
|
1695
|
+
* <SidebarGroupLabel>메뉴</SidebarGroupLabel>
|
|
1696
|
+
* <SidebarGroupContent>
|
|
1697
|
+
* <SidebarMenu>
|
|
1698
|
+
* <SidebarMenuItem>
|
|
1699
|
+
* <SidebarMenuButton>
|
|
1700
|
+
* <HomeIcon />
|
|
1701
|
+
* <span>홈</span>
|
|
1702
|
+
* </SidebarMenuButton>
|
|
1703
|
+
* </SidebarMenuItem>
|
|
1704
|
+
* </SidebarMenu>
|
|
1705
|
+
* </SidebarGroupContent>
|
|
1706
|
+
* </SidebarGroup>
|
|
1707
|
+
* </SidebarContent>
|
|
1708
|
+
* </Sidebar>
|
|
1709
|
+
* <SidebarInset>
|
|
1710
|
+
* <main>Your content</main>
|
|
1711
|
+
* </SidebarInset>
|
|
1712
|
+
* </SidebarProvider>
|
|
1713
|
+
* ```
|
|
1714
|
+
*/
|
|
1715
|
+
declare const SidebarProvider: React$1.ForwardRefExoticComponent<SidebarProviderProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1716
|
+
interface SidebarProps extends React$1.ComponentProps<"div"> {
|
|
1717
|
+
side?: "left" | "right";
|
|
1718
|
+
variant?: "sidebar" | "floating" | "inset";
|
|
1719
|
+
collapsible?: "offcanvas" | "icon" | "none";
|
|
1720
|
+
}
|
|
1721
|
+
declare const Sidebar: React$1.ForwardRefExoticComponent<Omit<SidebarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1722
|
+
declare const SidebarTrigger: React$1.ForwardRefExoticComponent<Omit<ButtonProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1723
|
+
declare const SidebarRail: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1724
|
+
declare const SidebarInset: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1725
|
+
declare const SidebarHeader: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1726
|
+
declare const SidebarFooter: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1727
|
+
declare const SidebarContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1728
|
+
declare const SidebarGroup: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1729
|
+
declare const SidebarGroupLabel: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1730
|
+
declare const SidebarGroupContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1731
|
+
declare const SidebarMenu: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
|
|
1732
|
+
declare const SidebarMenuItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
|
|
1733
|
+
declare const sidebarMenuButtonVariants: (props?: ({
|
|
1734
|
+
variant?: "default" | "outline" | null | undefined;
|
|
1735
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
1736
|
+
isActive?: boolean | null | undefined;
|
|
1737
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1738
|
+
interface SidebarMenuButtonProps extends React$1.ComponentProps<"button">, VariantProps<typeof sidebarMenuButtonVariants> {
|
|
1739
|
+
asChild?: boolean;
|
|
1740
|
+
isActive?: boolean;
|
|
1741
|
+
tooltip?: string;
|
|
1742
|
+
}
|
|
1743
|
+
declare const SidebarMenuButton: React$1.ForwardRefExoticComponent<Omit<SidebarMenuButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1744
|
+
declare const SidebarMenuAction: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1745
|
+
declare const SidebarMenuSub: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
|
|
1746
|
+
declare const SidebarMenuSubItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
|
|
1747
|
+
declare const SidebarMenuSubButton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
1748
|
+
isActive?: boolean;
|
|
1749
|
+
}, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1750
|
+
|
|
1751
|
+
declare const tableVariants: (props?: ({
|
|
1752
|
+
variant?: "default" | "striped" | "bordered" | null | undefined;
|
|
1753
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
1754
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1755
|
+
declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & VariantProps<(props?: ({
|
|
1756
|
+
variant?: "default" | "striped" | "bordered" | null | undefined;
|
|
1757
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
1758
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
1759
|
+
wrapperClassName?: string;
|
|
1760
|
+
} & React$1.RefAttributes<HTMLTableElement>>;
|
|
1761
|
+
declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
1762
|
+
declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
1763
|
+
declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
1764
|
+
declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
|
|
1765
|
+
declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
1766
|
+
declare const TableCell: React$1.ForwardRefExoticComponent<React$1.TdHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
1767
|
+
declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
|
|
1768
|
+
interface TableColumn<T = any> {
|
|
1769
|
+
/** Column key (should match data property) */
|
|
1770
|
+
key: keyof T | string;
|
|
1771
|
+
/** Column header title */
|
|
1772
|
+
title: React$1.ReactNode;
|
|
1773
|
+
/** Custom render function for cell content */
|
|
1774
|
+
render?: (value: any, record: T, index: number) => React$1.ReactNode;
|
|
1775
|
+
/** Column width */
|
|
1776
|
+
width?: string | number;
|
|
1777
|
+
/** Column alignment */
|
|
1778
|
+
align?: 'left' | 'center' | 'right';
|
|
1779
|
+
/** Sortable column */
|
|
1780
|
+
sortable?: boolean;
|
|
1781
|
+
/** Column class name */
|
|
1782
|
+
className?: string;
|
|
1783
|
+
/** Header class name */
|
|
1784
|
+
headerClassName?: string;
|
|
1785
|
+
/** Filterable column */
|
|
1786
|
+
filterable?: boolean;
|
|
1787
|
+
/** Filter placeholder */
|
|
1788
|
+
filterPlaceholder?: string;
|
|
1789
|
+
/** Default filter value */
|
|
1790
|
+
defaultFilterValue?: MetaFilterValue;
|
|
1791
|
+
/** Exportable column */
|
|
1792
|
+
exportable?: boolean;
|
|
1793
|
+
/** Export label */
|
|
1794
|
+
exportLabel?: string;
|
|
1795
|
+
/** Custom export value function */
|
|
1796
|
+
exportValue?: (record: T, index: number) => string | number;
|
|
1797
|
+
/** Resizable column */
|
|
1798
|
+
resizable?: boolean;
|
|
1799
|
+
/** Pinnable column */
|
|
1800
|
+
pinnable?: boolean;
|
|
1801
|
+
}
|
|
1802
|
+
type ColumnsProps<T> = Array<Omit<TableColumn<T>, 'key'> & {
|
|
1803
|
+
key: keyof T;
|
|
1804
|
+
}>;
|
|
1805
|
+
interface SimpleTableProps<T = any> extends VariantProps<typeof tableVariants> {
|
|
1806
|
+
/** Table data */
|
|
1807
|
+
data: T[];
|
|
1808
|
+
/** Table columns configuration */
|
|
1809
|
+
columns: TableColumn<T>[];
|
|
1810
|
+
/** Table caption */
|
|
1811
|
+
caption?: React$1.ReactNode;
|
|
1812
|
+
/** Loading state */
|
|
1813
|
+
loading?: boolean;
|
|
1814
|
+
/** Empty state message */
|
|
1815
|
+
emptyMessage?: React$1.ReactNode;
|
|
1816
|
+
/** Row key extractor */
|
|
1817
|
+
rowKey?: string | ((record: T, index: number) => string | number);
|
|
1818
|
+
/** Row click handler */
|
|
1819
|
+
onRowClick?: (record: T, index: number) => void;
|
|
1820
|
+
/** Row class name */
|
|
1821
|
+
rowClassName?: string | ((record: T, index: number) => string);
|
|
1822
|
+
/** Additional CSS class */
|
|
1823
|
+
className?: string;
|
|
1824
|
+
/** Show pagination */
|
|
1825
|
+
pagination?: boolean;
|
|
1826
|
+
/** Items per page */
|
|
1827
|
+
pageSize?: number;
|
|
1828
|
+
/** Current page */
|
|
1829
|
+
currentPage?: number;
|
|
1830
|
+
/** Pagination change handler */
|
|
1831
|
+
onPageChange?: (page: number) => void;
|
|
1832
|
+
/** Sort state */
|
|
1833
|
+
sortBy?: string;
|
|
1834
|
+
/** Sort direction */
|
|
1835
|
+
sortDirection?: 'asc' | 'desc';
|
|
1836
|
+
/** Sort change handler */
|
|
1837
|
+
onSortChange?: (key: string, direction: 'asc' | 'desc') => void;
|
|
1838
|
+
/** Selectable rows */
|
|
1839
|
+
selectable?: boolean;
|
|
1840
|
+
/** Selection change handler */
|
|
1841
|
+
onSelectionChange?: (rows: T[]) => void;
|
|
1842
|
+
/** Enable global filter */
|
|
1843
|
+
enableGlobalFilter?: boolean;
|
|
1844
|
+
/** Global filter placeholder */
|
|
1845
|
+
globalFilterPlaceholder?: string;
|
|
1846
|
+
/** Enable column ordering */
|
|
1847
|
+
enableColumnOrdering?: boolean;
|
|
1848
|
+
/** Enable export */
|
|
1849
|
+
enableExport?: boolean;
|
|
1850
|
+
/** Export file name */
|
|
1851
|
+
exportFileName?: string;
|
|
1852
|
+
/** Export handler */
|
|
1853
|
+
onExport?: (rows: T[]) => void;
|
|
1854
|
+
/** Expandable rows */
|
|
1855
|
+
expandable?: boolean;
|
|
1856
|
+
/** Render expanded content */
|
|
1857
|
+
renderExpandedContent?: (record: T, row: Row<T>) => React$1.ReactNode;
|
|
1858
|
+
/** Row expansion control */
|
|
1859
|
+
getRowCanExpand?: (record: T) => boolean;
|
|
1860
|
+
/** Control whether expand button is shown for a given row (receives Row<T>) */
|
|
1861
|
+
getRowExpandable?: (row: Row<T>) => boolean;
|
|
1862
|
+
/** Get checkbox props for each row when `selectable` is enabled */
|
|
1863
|
+
getCheckboxProps?: (record: T, index: number) => boolean;
|
|
1864
|
+
/** Expanded rows change handler */
|
|
1865
|
+
onExpandedChange?: (rows: T[]) => void;
|
|
1866
|
+
/** Get data when bottom reach to scrollLoadThreshold */
|
|
1867
|
+
onLazyScrollLoad?: () => void;
|
|
1868
|
+
/** The number of page buttons */
|
|
1869
|
+
numberOfPageButtons?: number;
|
|
1870
|
+
/** Custom export click handler */
|
|
1871
|
+
onClickExport?: () => void;
|
|
1872
|
+
/** Base row estimate height for virtualization in pixels, the closer you get the better */
|
|
1873
|
+
baseRowEstimateSize?: number;
|
|
1874
|
+
/** Expand content estimate height for virtualization in pixels, the closer you get the better */
|
|
1875
|
+
expandContentEstimateSize?: number;
|
|
1876
|
+
/** Over scan count for virtualization */
|
|
1877
|
+
overScan?: number;
|
|
1878
|
+
/** Virtualization threshold */
|
|
1879
|
+
virtualizationThreshold?: number;
|
|
1880
|
+
/** Show index column */
|
|
1881
|
+
showIndex?: boolean;
|
|
1882
|
+
/** Customize toolbar content */
|
|
1883
|
+
customizeToolbar?: React$1.ReactNode;
|
|
1884
|
+
/** Custom loading component */
|
|
1885
|
+
loadingComponent?: React$1.ReactNode;
|
|
1886
|
+
/** Disable local filtering */
|
|
1887
|
+
manualFiltering?: boolean;
|
|
1888
|
+
/** Disable local sorting */
|
|
1889
|
+
manualSorting?: boolean;
|
|
1890
|
+
/** Selected row keys to control selection externally */
|
|
1891
|
+
selectedRowKey?: Array<string>;
|
|
1892
|
+
/** Column filter change handler */
|
|
1893
|
+
onFilterChange?: (filters: ColumnFiltersState) => void | Promise<void>;
|
|
1894
|
+
/** Scroll load threshold in pixels */
|
|
1895
|
+
scrollLoadThreshold?: number;
|
|
1896
|
+
/** Maximum number of records to load via lazy loading. If provided, when data length >= maxRecords no further lazy-load calls are made. */
|
|
1897
|
+
maxRecords?: number;
|
|
1898
|
+
/** Lazy load indicator type */
|
|
1899
|
+
lazyLoadIndicatorType?: 'overlay' | 'row';
|
|
1900
|
+
/** Max height of the table container, default 500px*/
|
|
1901
|
+
maxHeight?: number;
|
|
1902
|
+
/** Max width of the table container, default 900px*/
|
|
1903
|
+
maxWidth?: number;
|
|
1904
|
+
/** Loading text to display when data is being fetched */
|
|
1905
|
+
loadingText?: string;
|
|
1906
|
+
/** Paging position */
|
|
1907
|
+
pagingPosition?: 'right' | 'left' | 'middle';
|
|
1908
|
+
/** Number of records to load per lazy load call */
|
|
1909
|
+
recordPerChunk?: number;
|
|
1910
|
+
}
|
|
1911
|
+
interface MetaFilterValue {
|
|
1912
|
+
filterType: string;
|
|
1913
|
+
value: string;
|
|
1914
|
+
}
|
|
1915
|
+
|
|
1916
|
+
/**
|
|
1917
|
+
* SimpleTable component - Easy-to-use table with minimal setup
|
|
1918
|
+
* Provides a clean API for common table patterns
|
|
1919
|
+
*
|
|
1920
|
+
* @example
|
|
1921
|
+
* // Basic table
|
|
1922
|
+
* <SimpleTable
|
|
1923
|
+
* data={users}
|
|
1924
|
+
* columns={[
|
|
1925
|
+
* { key: 'name', title: 'Name' },
|
|
1926
|
+
* { key: 'email', title: 'Email' },
|
|
1927
|
+
* { key: 'role', title: 'Role' },
|
|
1928
|
+
* ]}
|
|
1929
|
+
* />
|
|
1930
|
+
*
|
|
1931
|
+
* // Table with custom rendering
|
|
1932
|
+
* <SimpleTable
|
|
1933
|
+
* data={products}
|
|
1934
|
+
* columns={[
|
|
1935
|
+
* { key: 'name', title: 'Product' },
|
|
1936
|
+
* {
|
|
1937
|
+
* key: 'price',
|
|
1938
|
+
* title: 'Price',
|
|
1939
|
+
* render: (value) => `$${value.toFixed(2)}`
|
|
1940
|
+
* },
|
|
1941
|
+
* {
|
|
1942
|
+
* key: 'actions',
|
|
1943
|
+
* title: 'Actions',
|
|
1944
|
+
* render: (_, record) => (
|
|
1945
|
+
* <Button onClick={() => edit(record)}>Edit</Button>
|
|
1946
|
+
* )
|
|
1947
|
+
* }
|
|
1948
|
+
* ]}
|
|
1949
|
+
* />
|
|
1950
|
+
*
|
|
1951
|
+
* // Sortable and paginated table
|
|
1952
|
+
* <SimpleTable
|
|
1953
|
+
* data={data}
|
|
1954
|
+
* columns={columns}
|
|
1955
|
+
* sortable
|
|
1956
|
+
* pagination
|
|
1957
|
+
* pageSize={10}
|
|
1958
|
+
* onRowClick={(record) => console.log(record)}
|
|
1959
|
+
* />
|
|
1960
|
+
*/
|
|
1961
|
+
declare function SimpleTable<T = any>({ data, columns, caption, loading, loadingComponent, emptyMessage, rowKey, onRowClick, rowClassName, className, pagination, pageSize, currentPage, onPageChange, sortBy, sortDirection, onSortChange, variant, size, selectable, onSelectionChange, enableGlobalFilter, globalFilterPlaceholder, enableColumnOrdering, getCheckboxProps, selectedRowKey, enableExport, exportFileName, onExport, expandable, renderExpandedContent, getRowCanExpand, getRowExpandable, onExpandedChange, onLazyScrollLoad, scrollLoadThreshold, numberOfPageButtons, onClickExport, baseRowEstimateSize, expandContentEstimateSize, overScan, virtualizationThreshold, showIndex, customizeToolbar, manualSorting, onFilterChange, manualFiltering, lazyLoadIndicatorType, maxHeight, maxWidth, maxRecords, loadingText, pagingPosition, recordPerChunk, }: SimpleTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
1962
|
+
|
|
1963
|
+
interface DataTableProps<TData, TValue> {
|
|
1964
|
+
columns: ColumnDef<TData, TValue>[];
|
|
1965
|
+
data: TData[];
|
|
1966
|
+
searchKey?: string;
|
|
1967
|
+
searchPlaceholder?: string;
|
|
1968
|
+
showColumnVisibility?: boolean;
|
|
1969
|
+
showPagination?: boolean;
|
|
1970
|
+
pageSize?: number;
|
|
1971
|
+
className?: string;
|
|
1972
|
+
}
|
|
1973
|
+
/**
|
|
1974
|
+
* DataTable - Korean design system with TanStack Table.
|
|
1975
|
+
*
|
|
1976
|
+
* @example
|
|
1977
|
+
* ```tsx
|
|
1978
|
+
* type Payment = {
|
|
1979
|
+
* id: string;
|
|
1980
|
+
* amount: number;
|
|
1981
|
+
* status: "pending" | "processing" | "success" | "failed";
|
|
1982
|
+
* email: string;
|
|
1983
|
+
* };
|
|
1984
|
+
*
|
|
1985
|
+
* const columns: ColumnDef<Payment>[] = [
|
|
1986
|
+
* {
|
|
1987
|
+
* accessorKey: "email",
|
|
1988
|
+
* header: "Email",
|
|
1989
|
+
* },
|
|
1990
|
+
* {
|
|
1991
|
+
* accessorKey: "amount",
|
|
1992
|
+
* header: "Amount",
|
|
1993
|
+
* cell: ({ row }) => {
|
|
1994
|
+
* const amount = parseFloat(row.getValue("amount"));
|
|
1995
|
+
* const formatted = new Intl.NumberFormat("ko-KR", {
|
|
1996
|
+
* style: "currency",
|
|
1997
|
+
* currency: "KRW",
|
|
1998
|
+
* }).format(amount);
|
|
1999
|
+
* return <div>{formatted}</div>;
|
|
2000
|
+
* },
|
|
2001
|
+
* },
|
|
2002
|
+
* {
|
|
2003
|
+
* accessorKey: "status",
|
|
2004
|
+
* header: "Status",
|
|
2005
|
+
* },
|
|
2006
|
+
* ];
|
|
2007
|
+
*
|
|
2008
|
+
* <DataTable
|
|
2009
|
+
* columns={columns}
|
|
2010
|
+
* data={payments}
|
|
2011
|
+
* searchKey="email"
|
|
2012
|
+
* searchPlaceholder="Search email..."
|
|
2013
|
+
* />
|
|
2014
|
+
* ```
|
|
2015
|
+
*/
|
|
2016
|
+
declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, showColumnVisibility, showPagination, pageSize, className, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
2017
|
+
|
|
2018
|
+
declare const avatarVariants: (props?: ({
|
|
2019
|
+
size?: "default" | "sm" | "lg" | "xl" | "2xl" | null | undefined;
|
|
2020
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2021
|
+
declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & VariantProps<(props?: ({
|
|
2022
|
+
size?: "default" | "sm" | "lg" | "xl" | "2xl" | null | undefined;
|
|
2023
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLSpanElement>>;
|
|
2024
|
+
declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
|
|
2025
|
+
declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & VariantProps<(props?: ({
|
|
2026
|
+
size?: "default" | "sm" | "lg" | "xl" | "2xl" | null | undefined;
|
|
2027
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLSpanElement>>;
|
|
2028
|
+
interface SimpleAvatarProps extends VariantProps<typeof avatarVariants> {
|
|
2029
|
+
/** Avatar image URL */
|
|
2030
|
+
src?: string;
|
|
2031
|
+
/** Alt text for the image */
|
|
2032
|
+
alt?: string;
|
|
2033
|
+
/** Fallback text displayed when no image (usually initials) */
|
|
2034
|
+
fallback?: string;
|
|
2035
|
+
/** Custom fallback component */
|
|
2036
|
+
fallbackComponent?: React$1.ReactNode;
|
|
2037
|
+
/** Additional CSS class */
|
|
2038
|
+
className?: string;
|
|
2039
|
+
/** Click handler */
|
|
2040
|
+
onClick?: () => void;
|
|
2041
|
+
/** Hover handler */
|
|
2042
|
+
onHover?: () => void;
|
|
2043
|
+
/** Indicator for online status */
|
|
2044
|
+
showStatus?: boolean;
|
|
2045
|
+
/** Status indicator color */
|
|
2046
|
+
statusColor?: "online" | "offline" | "away" | "busy";
|
|
2047
|
+
}
|
|
2048
|
+
/**
|
|
2049
|
+
* Avatar component - Display user profile picture
|
|
2050
|
+
* Simplifies Radix Avatar usage with an easy-to-use API
|
|
2051
|
+
*
|
|
2052
|
+
* @example
|
|
2053
|
+
* // Avatar with image
|
|
2054
|
+
* <SimpleAvatar
|
|
2055
|
+
* src="/user-avatar.jpg"
|
|
2056
|
+
* alt="John Doe"
|
|
2057
|
+
* fallback="JD"
|
|
2058
|
+
* size="lg"
|
|
2059
|
+
* />
|
|
2060
|
+
*
|
|
2061
|
+
* // Avatar with fallback text only
|
|
2062
|
+
* <SimpleAvatar
|
|
2063
|
+
* fallback="AB"
|
|
2064
|
+
* size="default"
|
|
2065
|
+
* />
|
|
2066
|
+
*
|
|
2067
|
+
* // Avatar with status indicator
|
|
2068
|
+
* <SimpleAvatar
|
|
2069
|
+
* src="/user-avatar.jpg"
|
|
2070
|
+
* alt="Jane Smith"
|
|
2071
|
+
* fallback="JS"
|
|
2072
|
+
* size="xl"
|
|
2073
|
+
* showStatus
|
|
2074
|
+
* statusColor="online"
|
|
2075
|
+
* />
|
|
2076
|
+
*
|
|
2077
|
+
* // Avatar with custom fallback component
|
|
2078
|
+
* <SimpleAvatar
|
|
2079
|
+
* fallbackComponent={<UserIcon className="h-6 w-6" />}
|
|
2080
|
+
* size="lg"
|
|
2081
|
+
* />
|
|
2082
|
+
*/
|
|
2083
|
+
declare function SimpleAvatar({ src, alt, fallback, fallbackComponent, size, className, onClick, onHover, showStatus, statusColor, }: SimpleAvatarProps): react_jsx_runtime.JSX.Element;
|
|
2084
|
+
declare function getInitials(name: string): string;
|
|
2085
|
+
interface AvatarGroupData {
|
|
2086
|
+
/** Avatar image URL */
|
|
2087
|
+
src?: string;
|
|
2088
|
+
/** Alt text for the image */
|
|
2089
|
+
alt?: string;
|
|
2090
|
+
/** Fallback text displayed when no image */
|
|
2091
|
+
fallback?: string;
|
|
2092
|
+
/** Custom fallback component */
|
|
2093
|
+
fallbackComponent?: React$1.ReactNode;
|
|
2094
|
+
/** Click handler for this avatar */
|
|
2095
|
+
onClick?: () => void;
|
|
2096
|
+
/** Status indicator */
|
|
2097
|
+
showStatus?: boolean;
|
|
2098
|
+
/** Status color */
|
|
2099
|
+
statusColor?: "online" | "offline" | "away" | "busy";
|
|
2100
|
+
}
|
|
2101
|
+
interface AvatarGroupProps extends VariantProps<typeof avatarVariants> {
|
|
2102
|
+
/** List of avatar data */
|
|
2103
|
+
avatars: AvatarGroupData[];
|
|
2104
|
+
/** Maximum number of avatars to display */
|
|
2105
|
+
max?: number;
|
|
2106
|
+
/** Custom spacing between avatars (negative margin) */
|
|
2107
|
+
spacing?: "tight" | "normal" | "loose";
|
|
2108
|
+
/** Show remaining avatar count */
|
|
2109
|
+
showMore?: boolean;
|
|
2110
|
+
/** Custom text for "+X more" avatar */
|
|
2111
|
+
moreText?: string;
|
|
2112
|
+
/** Click handler for "+X more" avatar */
|
|
2113
|
+
onMoreClick?: () => void;
|
|
2114
|
+
/** Additional CSS class */
|
|
2115
|
+
className?: string;
|
|
2116
|
+
/** Direction of avatar group */
|
|
2117
|
+
direction?: "left" | "right";
|
|
2118
|
+
}
|
|
2119
|
+
/**
|
|
2120
|
+
* AvatarGroup component - Display a group of avatars with overlap
|
|
2121
|
+
* Commonly used to display team members, participants, etc.
|
|
2122
|
+
*
|
|
2123
|
+
* @example
|
|
2124
|
+
* // Basic avatar group
|
|
2125
|
+
* <AvatarGroup
|
|
2126
|
+
* avatars={[
|
|
2127
|
+
* { src: "/user1.jpg", alt: "User 1", fallback: "U1" },
|
|
2128
|
+
* { src: "/user2.jpg", alt: "User 2", fallback: "U2" },
|
|
2129
|
+
* { src: "/user3.jpg", alt: "User 3", fallback: "U3" },
|
|
2130
|
+
* ]}
|
|
2131
|
+
* size="lg"
|
|
2132
|
+
* />
|
|
2133
|
+
*
|
|
2134
|
+
* // Limited display count
|
|
2135
|
+
* <AvatarGroup
|
|
2136
|
+
* avatars={manyUsers}
|
|
2137
|
+
* max={3}
|
|
2138
|
+
* showMore
|
|
2139
|
+
* onMoreClick={() => console.log('Show all users')}
|
|
2140
|
+
* size="default"
|
|
2141
|
+
* />
|
|
2142
|
+
*
|
|
2143
|
+
* // With status indicators
|
|
2144
|
+
* <AvatarGroup
|
|
2145
|
+
* avatars={[
|
|
2146
|
+
* { fallback: "A", showStatus: true, statusColor: "online" },
|
|
2147
|
+
* { fallback: "B", showStatus: true, statusColor: "away" },
|
|
2148
|
+
* ]}
|
|
2149
|
+
* spacing="loose"
|
|
2150
|
+
* />
|
|
2151
|
+
*/
|
|
2152
|
+
declare function AvatarGroup({ avatars, max, spacing, showMore, moreText, onMoreClick, size, className, direction, }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
|
|
2153
|
+
|
|
2154
|
+
declare const itemVariants: (props?: ({
|
|
2155
|
+
variant?: "default" | "outline" | "ghost" | "filled" | null | undefined;
|
|
2156
|
+
clickable?: boolean | null | undefined;
|
|
2157
|
+
active?: boolean | null | undefined;
|
|
2158
|
+
disabled?: boolean | null | undefined;
|
|
2159
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2160
|
+
type BaseItemProps = VariantProps<typeof itemVariants> & {
|
|
2161
|
+
icon?: React$1.ReactNode;
|
|
2162
|
+
title?: string;
|
|
2163
|
+
description?: string;
|
|
2164
|
+
rightElement?: React$1.ReactNode;
|
|
2165
|
+
showChevron?: boolean;
|
|
2166
|
+
};
|
|
2167
|
+
type ItemDivProps = BaseItemProps & Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> & {
|
|
2168
|
+
href?: never;
|
|
2169
|
+
};
|
|
2170
|
+
type ItemAnchorProps = BaseItemProps & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "title"> & {
|
|
2171
|
+
href: string;
|
|
2172
|
+
};
|
|
2173
|
+
type ItemProps = ItemDivProps | ItemAnchorProps;
|
|
2174
|
+
/**
|
|
2175
|
+
* Item component - Korean design system generic list item.
|
|
2176
|
+
*
|
|
2177
|
+
* @example
|
|
2178
|
+
* ```tsx
|
|
2179
|
+
* // Simple item
|
|
2180
|
+
* <Item title="항목 1" />
|
|
2181
|
+
*
|
|
2182
|
+
* // With icon and description
|
|
2183
|
+
* <Item
|
|
2184
|
+
* icon={<UserIcon />}
|
|
2185
|
+
* title="사용자 이름"
|
|
2186
|
+
* description="user@example.com"
|
|
2187
|
+
* />
|
|
2188
|
+
*
|
|
2189
|
+
* // Clickable with chevron
|
|
2190
|
+
* <Item
|
|
2191
|
+
* clickable
|
|
2192
|
+
* showChevron
|
|
2193
|
+
* title="설정"
|
|
2194
|
+
* onClick={() => router.push('/settings')}
|
|
2195
|
+
* />
|
|
2196
|
+
*
|
|
2197
|
+
* // Active state
|
|
2198
|
+
* <Item
|
|
2199
|
+
* active
|
|
2200
|
+
* icon={<HomeIcon />}
|
|
2201
|
+
* title="홈"
|
|
2202
|
+
* />
|
|
2203
|
+
*
|
|
2204
|
+
* // With right element
|
|
2205
|
+
* <Item
|
|
2206
|
+
* title="알림"
|
|
2207
|
+
* rightElement={<Badge>3</Badge>}
|
|
2208
|
+
* />
|
|
2209
|
+
*
|
|
2210
|
+
* // As link
|
|
2211
|
+
* <Item
|
|
2212
|
+
* href="/profile"
|
|
2213
|
+
* clickable
|
|
2214
|
+
* showChevron
|
|
2215
|
+
* icon={<UserIcon />}
|
|
2216
|
+
* title="프로필"
|
|
2217
|
+
* />
|
|
2218
|
+
* ```
|
|
2219
|
+
*/
|
|
2220
|
+
declare const Item: React$1.ForwardRefExoticComponent<ItemProps & React$1.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
|
|
2221
|
+
/**
|
|
2222
|
+
* ItemGroup - Container for grouped items.
|
|
2223
|
+
*/
|
|
2224
|
+
declare const ItemGroup: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
|
|
2225
|
+
label?: string;
|
|
2226
|
+
description?: string;
|
|
2227
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
2228
|
+
/**
|
|
2229
|
+
* ItemList - Container for list of items.
|
|
2230
|
+
*/
|
|
2231
|
+
declare const ItemList: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
|
|
2232
|
+
divided?: boolean;
|
|
2233
|
+
spacing?: "none" | "sm" | "default" | "lg";
|
|
2234
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
2235
|
+
/**
|
|
2236
|
+
* ItemSeparator - Visual separator between items.
|
|
2237
|
+
*/
|
|
2238
|
+
declare const ItemSeparator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
2239
|
+
|
|
2240
|
+
declare const badgeVariants: (props?: ({
|
|
2241
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | "info" | null | undefined;
|
|
2242
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
2243
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2244
|
+
interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
2245
|
+
removable?: boolean;
|
|
2246
|
+
onRemove?: () => void;
|
|
2247
|
+
icon?: React$1.ReactNode;
|
|
2248
|
+
}
|
|
2249
|
+
/**
|
|
2250
|
+
* Badge component - Korean design system.
|
|
2251
|
+
*
|
|
2252
|
+
* @example
|
|
2253
|
+
* ```tsx
|
|
2254
|
+
* <Badge>기본</Badge>
|
|
2255
|
+
* <Badge variant="secondary">보조</Badge>
|
|
2256
|
+
* <Badge variant="destructive">삭제</Badge>
|
|
2257
|
+
* <Badge variant="outline">외곽선</Badge>
|
|
2258
|
+
*
|
|
2259
|
+
* <Badge removable onRemove={() => console.log("removed")}>
|
|
2260
|
+
* 제거 가능
|
|
2261
|
+
* </Badge>
|
|
2262
|
+
*
|
|
2263
|
+
* <Badge icon={<CheckIcon />}>아이콘</Badge>
|
|
2264
|
+
* ```
|
|
2265
|
+
*/
|
|
2266
|
+
declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2267
|
+
|
|
2268
|
+
type CalendarProps = React$1.ComponentProps<typeof DayPicker> & {
|
|
2269
|
+
buttonVariant?: React$1.ComponentProps<typeof Button>["variant"];
|
|
2270
|
+
clear?: boolean;
|
|
2271
|
+
quickSelect?: boolean;
|
|
2272
|
+
dateInfo?: boolean;
|
|
2273
|
+
presets?: Array<{
|
|
2274
|
+
label: string;
|
|
2275
|
+
value: () => Date | {
|
|
2276
|
+
from: Date;
|
|
2277
|
+
to: Date;
|
|
2278
|
+
} | Date[];
|
|
2279
|
+
icon?: React$1.ReactNode;
|
|
2280
|
+
}>;
|
|
2281
|
+
withCard?: boolean;
|
|
2282
|
+
cardTitle?: string;
|
|
2283
|
+
cardDescription?: string;
|
|
2284
|
+
layout?: "default" | "inline" | "compact";
|
|
2285
|
+
variant?: "default" | "outlined" | "minimal";
|
|
2286
|
+
containerClassName?: string;
|
|
2287
|
+
cardClassName?: string;
|
|
2288
|
+
sidebarClassName?: string;
|
|
2289
|
+
};
|
|
2290
|
+
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, clear, quickSelect, dateInfo, presets, withCard, cardTitle, cardDescription, layout, variant, containerClassName, cardClassName, sidebarClassName, ...props }: CalendarProps): React$1.FunctionComponentElement<react_day_picker.DayPickerProps> | React$1.CElement<{
|
|
2291
|
+
className: string;
|
|
2292
|
+
}, React$1.Component<{
|
|
2293
|
+
className: string;
|
|
2294
|
+
}, any, any>> | React$1.DetailedReactHTMLElement<{
|
|
2295
|
+
className: string;
|
|
2296
|
+
}, HTMLElement>;
|
|
2297
|
+
declare function CalendarDayButton({ className, day, modifiers, ...props }: React$1.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
|
|
2298
|
+
|
|
2299
|
+
declare const pickerVariants: (props?: ({
|
|
2300
|
+
variant?: "outlined" | "filled" | "borderless" | "underlined" | null | undefined;
|
|
2301
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2302
|
+
interface DatePickerProps {
|
|
2303
|
+
date?: Date;
|
|
2304
|
+
onDateChange?: (date: Date | undefined) => void;
|
|
2305
|
+
placeholder?: string;
|
|
2306
|
+
disabled?: boolean;
|
|
2307
|
+
className?: string;
|
|
2308
|
+
fromDate?: Date;
|
|
2309
|
+
toDate?: Date;
|
|
2310
|
+
variant?: VariantProps<typeof pickerVariants>['variant'];
|
|
2311
|
+
}
|
|
2312
|
+
/**
|
|
2313
|
+
* DatePicker - Korean design system.
|
|
2314
|
+
*
|
|
2315
|
+
* @example
|
|
2316
|
+
* ```tsx
|
|
2317
|
+
* const [date, setDate] = React.useState<Date>();
|
|
2318
|
+
*
|
|
2319
|
+
* <DatePicker
|
|
2320
|
+
* date={date}
|
|
2321
|
+
* onDateChange={setDate}
|
|
2322
|
+
* placeholder="Select a date"
|
|
2323
|
+
* />
|
|
2324
|
+
*
|
|
2325
|
+
* <DatePicker
|
|
2326
|
+
* date={date}
|
|
2327
|
+
* onDateChange={setDate}
|
|
2328
|
+
* fromDate={new Date()}
|
|
2329
|
+
* />
|
|
2330
|
+
* ```
|
|
2331
|
+
*/
|
|
2332
|
+
declare const DatePicker: React$1.ForwardRefExoticComponent<DatePickerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2333
|
+
interface DateRangePickerProps {
|
|
2334
|
+
dateRange?: DateRange;
|
|
2335
|
+
onDateRangeChange?: (range: DateRange | undefined) => void;
|
|
2336
|
+
placeholder?: string;
|
|
2337
|
+
disabled?: boolean;
|
|
2338
|
+
className?: string;
|
|
2339
|
+
fromDate?: Date;
|
|
2340
|
+
toDate?: Date;
|
|
2341
|
+
numberOfMonths?: number;
|
|
2342
|
+
variant?: VariantProps<typeof pickerVariants>['variant'];
|
|
2343
|
+
}
|
|
2344
|
+
/**
|
|
2345
|
+
* DateRangePicker - Korean design system.
|
|
2346
|
+
*
|
|
2347
|
+
* @example
|
|
2348
|
+
* ```tsx
|
|
2349
|
+
* import type { DateRange } from "react-day-picker";
|
|
2350
|
+
*
|
|
2351
|
+
* const [dateRange, setDateRange] = React.useState<DateRange | undefined>();
|
|
2352
|
+
*
|
|
2353
|
+
* <DateRangePicker
|
|
2354
|
+
* dateRange={dateRange}
|
|
2355
|
+
* onDateRangeChange={setDateRange}
|
|
2356
|
+
* />
|
|
2357
|
+
*
|
|
2358
|
+
* <DateRangePicker
|
|
2359
|
+
* dateRange={dateRange}
|
|
2360
|
+
* onDateRangeChange={setDateRange}
|
|
2361
|
+
* numberOfMonths={2}
|
|
2362
|
+
* />
|
|
2363
|
+
* ```
|
|
2364
|
+
*/
|
|
2365
|
+
declare const DateRangePicker: React$1.ForwardRefExoticComponent<DateRangePickerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2366
|
+
|
|
2367
|
+
type CarouselApi = UseEmblaCarouselType[1];
|
|
2368
|
+
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
2369
|
+
type CarouselOptions = UseCarouselParameters[0];
|
|
2370
|
+
type CarouselPlugin = UseCarouselParameters[1];
|
|
2371
|
+
type CarouselProps = {
|
|
2372
|
+
opts?: CarouselOptions;
|
|
2373
|
+
plugins?: CarouselPlugin;
|
|
2374
|
+
orientation?: "horizontal" | "vertical";
|
|
2375
|
+
setApi?: (api: CarouselApi) => void;
|
|
2376
|
+
};
|
|
2377
|
+
type CarouselContextProps = {
|
|
2378
|
+
carouselRef: ReturnType<typeof useEmblaCarousel>[0];
|
|
2379
|
+
api: ReturnType<typeof useEmblaCarousel>[1];
|
|
2380
|
+
scrollPrev: () => void;
|
|
2381
|
+
scrollNext: () => void;
|
|
2382
|
+
canScrollPrev: boolean;
|
|
2383
|
+
canScrollNext: boolean;
|
|
2384
|
+
} & CarouselProps;
|
|
2385
|
+
declare function useCarousel(): CarouselContextProps;
|
|
2386
|
+
declare const Carousel: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & CarouselProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2387
|
+
declare const CarouselContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
2388
|
+
declare const CarouselItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
2389
|
+
declare const CarouselPrevious: React$1.ForwardRefExoticComponent<Omit<ButtonProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2390
|
+
declare const CarouselNext: React$1.ForwardRefExoticComponent<Omit<ButtonProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2391
|
+
interface CarouselItemData {
|
|
2392
|
+
/** Unique identifier for the item */
|
|
2393
|
+
id?: string | number;
|
|
2394
|
+
/** Content to display in the carousel item */
|
|
2395
|
+
content: React$1.ReactNode;
|
|
2396
|
+
/** Additional CSS class for the item */
|
|
2397
|
+
className?: string;
|
|
2398
|
+
/** Click handler for the item */
|
|
2399
|
+
onClick?: () => void;
|
|
2400
|
+
}
|
|
2401
|
+
interface SimpleCarouselProps {
|
|
2402
|
+
/** Array of carousel items */
|
|
2403
|
+
items: CarouselItemData[];
|
|
2404
|
+
/** Carousel orientation */
|
|
2405
|
+
orientation?: "horizontal" | "vertical";
|
|
2406
|
+
/** Show navigation arrows */
|
|
2407
|
+
showArrows?: boolean;
|
|
2408
|
+
/** Show dots indicators */
|
|
2409
|
+
showDots?: boolean;
|
|
2410
|
+
/** Auto play interval in milliseconds */
|
|
2411
|
+
autoPlay?: number;
|
|
2412
|
+
/** Loop the carousel */
|
|
2413
|
+
loop?: boolean;
|
|
2414
|
+
/** Number of slides to show at once */
|
|
2415
|
+
slidesToShow?: number;
|
|
2416
|
+
/** Additional CSS class */
|
|
2417
|
+
className?: string;
|
|
2418
|
+
/** Carousel container class */
|
|
2419
|
+
containerClassName?: string;
|
|
2420
|
+
/** Item class */
|
|
2421
|
+
itemClassName?: string;
|
|
2422
|
+
/** Custom arrow components */
|
|
2423
|
+
prevArrow?: React$1.ReactNode;
|
|
2424
|
+
nextArrow?: React$1.ReactNode;
|
|
2425
|
+
/** Callback when slide changes */
|
|
2426
|
+
onSlideChange?: (index: number) => void;
|
|
2427
|
+
}
|
|
2428
|
+
/**
|
|
2429
|
+
* SimpleCarousel component - Easy-to-use carousel with minimal setup
|
|
2430
|
+
* Wraps the complex Embla Carousel with a simple API
|
|
2431
|
+
*
|
|
2432
|
+
* @example
|
|
2433
|
+
* // Basic carousel
|
|
2434
|
+
* <SimpleCarousel
|
|
2435
|
+
* items={[
|
|
2436
|
+
* { id: 1, content: <div>Slide 1</div> },
|
|
2437
|
+
* { id: 2, content: <div>Slide 2</div> },
|
|
2438
|
+
* { id: 3, content: <div>Slide 3</div> },
|
|
2439
|
+
* ]}
|
|
2440
|
+
* />
|
|
2441
|
+
*
|
|
2442
|
+
* // Auto-playing carousel with dots
|
|
2443
|
+
* <SimpleCarousel
|
|
2444
|
+
* items={slides}
|
|
2445
|
+
* autoPlay={3000}
|
|
2446
|
+
* showDots
|
|
2447
|
+
* loop
|
|
2448
|
+
* />
|
|
2449
|
+
*
|
|
2450
|
+
* // Multiple slides visible
|
|
2451
|
+
* <SimpleCarousel
|
|
2452
|
+
* items={products}
|
|
2453
|
+
* slidesToShow={3}
|
|
2454
|
+
* showArrows
|
|
2455
|
+
* />
|
|
2456
|
+
*
|
|
2457
|
+
* // Vertical carousel
|
|
2458
|
+
* <SimpleCarousel
|
|
2459
|
+
* items={verticalSlides}
|
|
2460
|
+
* orientation="vertical"
|
|
2461
|
+
* showArrows
|
|
2462
|
+
* />
|
|
2463
|
+
*/
|
|
2464
|
+
declare function SimpleCarousel({ items, orientation, showArrows, showDots, autoPlay, loop, slidesToShow, className, containerClassName, itemClassName, prevArrow, nextArrow, onSlideChange, }: SimpleCarouselProps): react_jsx_runtime.JSX.Element;
|
|
2465
|
+
|
|
2466
|
+
/**
|
|
2467
|
+
* Typography unified component
|
|
2468
|
+
* - One entry point: <Typography type="h1" ... />
|
|
2469
|
+
* - Backward compatible named exports (H1, H2, ...)
|
|
2470
|
+
*/
|
|
2471
|
+
type TypographyType = "h1" | "h2" | "h3" | "h4" | "p" | "lead" | "muted" | "small" | "code" | "blockquote" | "list" | "list-item";
|
|
2472
|
+
declare const typographyVariants: (props?: ({
|
|
2473
|
+
type?: "small" | "list" | "blockquote" | "code" | "h1" | "h2" | "h3" | "h4" | "p" | "muted" | "list-item" | "lead" | null | undefined;
|
|
2474
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
2475
|
+
align?: "center" | "right" | "left" | "justify" | null | undefined;
|
|
2476
|
+
weight?: "bold" | "normal" | "medium" | "light" | "semibold" | null | undefined;
|
|
2477
|
+
muted?: boolean | null | undefined;
|
|
2478
|
+
truncate?: boolean | null | undefined;
|
|
2479
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2480
|
+
interface TypographyProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "ref">, VariantProps<typeof typographyVariants> {
|
|
2481
|
+
type: TypographyType;
|
|
2482
|
+
/**
|
|
2483
|
+
* Override underlying tag.
|
|
2484
|
+
* Normally inferred from `type`.
|
|
2485
|
+
*/
|
|
2486
|
+
as?: keyof JSX.IntrinsicElements;
|
|
2487
|
+
}
|
|
2488
|
+
declare const Typography: React$1.ForwardRefExoticComponent<TypographyProps & React$1.RefAttributes<HTMLElement>>;
|
|
2489
|
+
declare const H1: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2490
|
+
declare const H2: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2491
|
+
declare const H3: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2492
|
+
declare const H4: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2493
|
+
declare const P: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2494
|
+
declare const Lead: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2495
|
+
declare const Muted: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2496
|
+
declare const Small: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2497
|
+
declare const InlineCode: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2498
|
+
declare const Blockquote: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2499
|
+
declare const List: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2500
|
+
declare const ListItem: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2501
|
+
declare const TypographyGroup: {
|
|
2502
|
+
Typography: React$1.ForwardRefExoticComponent<TypographyProps & React$1.RefAttributes<HTMLElement>>;
|
|
2503
|
+
H1: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2504
|
+
H2: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2505
|
+
H3: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2506
|
+
H4: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2507
|
+
P: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2508
|
+
Lead: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2509
|
+
Muted: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2510
|
+
Small: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2511
|
+
InlineCode: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2512
|
+
Blockquote: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2513
|
+
List: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2514
|
+
ListItem: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "type"> & React$1.RefAttributes<HTMLElement>>;
|
|
2515
|
+
};
|
|
2516
|
+
|
|
2517
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
2518
|
+
|
|
2519
|
+
export { Accordion, type AccordionItemData, type AccordionProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AspectRatio, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupData, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Blockquote, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonGroupTextProps, type ButtonProps, Calendar, CalendarDayButton, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, type CarouselItemData, CarouselNext, CarouselPrevious, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, type ColumnsProps, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, type DataTableProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotsSpinner, type DotsSpinnerProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, type EmptyProps, Field, type FieldError, type FieldProps, Form, type FormInstance, FormItem, type FormItemProps, type FormItemVariant, FormList, type FormProps, H1, H2, H3, H4, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, InlineCode, Input, InputGroup, type InputGroupProps, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputProps, Item, ItemGroup, ItemList, type ItemProps, ItemSeparator, Label, type LabelProps, Lead, List, ListItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Muted, type NamePath, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, P, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductCard, ProfileCard, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemData, type RadioGroupProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, type Rule, ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarTrigger, SimpleAvatar, type SimpleAvatarProps, SimpleCard, type SimpleCardProps, SimpleCarousel, type SimpleCarouselProps, SimpleTable, type SimpleTableProps, SimpleTabs, type SimpleTabsProps, SimpleTooltip, type SimpleTooltipProps, Skeleton, SkeletonCard, type SkeletonCardProps, type SkeletonProps, Slider, type SliderProps, Small, Spinner, type SpinnerProps, Switch, type SwitchProps, type TabItem, Table, TableBody, TableCaption, TableCell, type TableColumn, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast, type ToastData, type ToastId, type ToastProps, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemData, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, TypographyGroup, type TypographyProps, type TypographyType, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxVariants, cn, composeRules, emailRule, emptyVariants, fieldVariants, getInitials, inputGroupVariants, inputVariants, itemVariants, labelVariants, maxLengthRule, maxValueRule, minLengthRule, minValueRule, navigationMenuTriggerStyle, numberRule, patternRule, progressVariants, radioGroupVariants, requiredRule, separatorVariants, skeletonVariants, spinnerVariants, tableVariants, textareaVariants, toastVariants, toggleGroupVariants, toggleVariants, urlRule, useCarousel, useForm, useSidebar, useToast, useWatch };
|