@me1a/ui 2.2.1 → 2.2.3

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.
Files changed (230) hide show
  1. package/dist/accordion/index.d.mts +94 -0
  2. package/dist/accordion/index.mjs +2 -0
  3. package/dist/accordion/index.mjs.map +1 -0
  4. package/dist/avatar/index.d.mts +34 -0
  5. package/dist/avatar/index.mjs +2 -0
  6. package/dist/avatar/index.mjs.map +1 -0
  7. package/dist/badge/index.d.mts +41 -0
  8. package/dist/badge/index.mjs +2 -0
  9. package/dist/badge/index.mjs.map +1 -0
  10. package/dist/box/index.d.mts +50 -0
  11. package/dist/box/index.mjs +2 -0
  12. package/dist/box/index.mjs.map +1 -0
  13. package/dist/breadcrumb/index.d.mts +35 -0
  14. package/dist/breadcrumb/index.mjs +2 -0
  15. package/dist/breadcrumb/index.mjs.map +1 -0
  16. package/dist/{tooltip-B4jzaurK.d.mts → button/index.d.mts} +3 -25
  17. package/dist/button/index.mjs +2 -0
  18. package/dist/button/index.mjs.map +1 -0
  19. package/dist/card/index.d.mts +127 -0
  20. package/dist/card/index.mjs +2 -0
  21. package/dist/card/index.mjs.map +1 -0
  22. package/dist/checkbox/index.d.mts +21 -0
  23. package/dist/checkbox/index.mjs +2 -0
  24. package/dist/checkbox/index.mjs.map +1 -0
  25. package/dist/collapsible/index.d.mts +26 -0
  26. package/dist/collapsible/index.mjs +2 -0
  27. package/dist/collapsible/index.mjs.map +1 -0
  28. package/dist/command/index.d.mts +122 -0
  29. package/dist/command/index.mjs +2 -0
  30. package/dist/command/index.mjs.map +1 -0
  31. package/dist/container/index.d.mts +33 -0
  32. package/dist/container/index.mjs +2 -0
  33. package/dist/container/index.mjs.map +1 -0
  34. package/dist/dialog/index.d.mts +35 -0
  35. package/dist/dialog/index.mjs +2 -0
  36. package/dist/dialog/index.mjs.map +1 -0
  37. package/dist/drawer/index.d.mts +63 -0
  38. package/dist/drawer/index.mjs +2 -0
  39. package/dist/drawer/index.mjs.map +1 -0
  40. package/dist/dropdown-menu/index.d.mts +335 -0
  41. package/dist/dropdown-menu/index.mjs +2 -0
  42. package/dist/dropdown-menu/index.mjs.map +1 -0
  43. package/dist/form/index.d.mts +96 -0
  44. package/dist/form/index.mjs +2 -0
  45. package/dist/form/index.mjs.map +1 -0
  46. package/dist/{hooks.d.mts → hooks/index.d.mts} +10 -4
  47. package/dist/hooks/index.mjs +2 -0
  48. package/dist/hooks/index.mjs.map +1 -0
  49. package/dist/index.d.mts +2739 -30
  50. package/dist/index.mjs +47 -0
  51. package/dist/{index.esm.js.map → index.mjs.map} +1 -1
  52. package/dist/input/index.d.mts +12 -0
  53. package/dist/input/index.mjs +2 -0
  54. package/dist/input/index.mjs.map +1 -0
  55. package/dist/label/index.d.mts +18 -0
  56. package/dist/label/index.mjs +2 -0
  57. package/dist/label/index.mjs.map +1 -0
  58. package/dist/navigation-menu/index.d.mts +104 -0
  59. package/dist/navigation-menu/index.mjs +2 -0
  60. package/dist/navigation-menu/index.mjs.map +1 -0
  61. package/dist/page-loader/index.d.mts +29 -0
  62. package/dist/page-loader/index.mjs +2 -0
  63. package/dist/page-loader/index.mjs.map +1 -0
  64. package/dist/pagination/index.d.mts +105 -0
  65. package/dist/pagination/index.mjs +2 -0
  66. package/dist/pagination/index.mjs.map +1 -0
  67. package/dist/popover/index.d.mts +30 -0
  68. package/dist/popover/index.mjs +2 -0
  69. package/dist/popover/index.mjs.map +1 -0
  70. package/dist/{checkbox-DxgDKaHx.d.mts → radio-group/index.d.mts} +5 -51
  71. package/dist/radio-group/index.mjs +2 -0
  72. package/dist/radio-group/index.mjs.map +1 -0
  73. package/dist/resizable/index.d.mts +53 -0
  74. package/dist/resizable/index.mjs +2 -0
  75. package/dist/resizable/index.mjs.map +1 -0
  76. package/dist/rhf-checkbox/index.d.mts +57 -0
  77. package/dist/rhf-checkbox/index.mjs +2 -0
  78. package/dist/rhf-checkbox/index.mjs.map +1 -0
  79. package/dist/rhf-multi-select/index.d.mts +84 -0
  80. package/dist/rhf-multi-select/index.mjs +2 -0
  81. package/dist/rhf-multi-select/index.mjs.map +1 -0
  82. package/dist/rhf-radio-button-group/index.d.mts +73 -0
  83. package/dist/rhf-radio-button-group/index.mjs +2 -0
  84. package/dist/rhf-radio-button-group/index.mjs.map +1 -0
  85. package/dist/rhf-radio-group/index.d.mts +103 -0
  86. package/dist/rhf-radio-group/index.mjs +2 -0
  87. package/dist/rhf-radio-group/index.mjs.map +1 -0
  88. package/dist/rhf-select/index.d.mts +80 -0
  89. package/dist/rhf-select/index.mjs +2 -0
  90. package/dist/rhf-select/index.mjs.map +1 -0
  91. package/dist/rhf-switch/index.d.mts +57 -0
  92. package/dist/rhf-switch/index.mjs +2 -0
  93. package/dist/rhf-switch/index.mjs.map +1 -0
  94. package/dist/rhf-textarea/index.d.mts +66 -0
  95. package/dist/rhf-textarea/index.mjs +2 -0
  96. package/dist/rhf-textarea/index.mjs.map +1 -0
  97. package/dist/separator/index.d.mts +13 -0
  98. package/dist/separator/index.mjs +2 -0
  99. package/dist/separator/index.mjs.map +1 -0
  100. package/dist/sheet/index.d.mts +42 -0
  101. package/dist/sheet/index.mjs +2 -0
  102. package/dist/sheet/index.mjs.map +1 -0
  103. package/dist/sidebar/index.d.mts +328 -0
  104. package/dist/sidebar/index.mjs +2 -0
  105. package/dist/sidebar/index.mjs.map +1 -0
  106. package/dist/skeleton/index.d.mts +17 -0
  107. package/dist/skeleton/index.mjs +2 -0
  108. package/dist/skeleton/index.mjs.map +1 -0
  109. package/dist/stack/index.d.mts +121 -0
  110. package/dist/stack/index.mjs +2 -0
  111. package/dist/stack/index.mjs.map +1 -0
  112. package/dist/switch/index.d.mts +21 -0
  113. package/dist/switch/index.mjs +2 -0
  114. package/dist/switch/index.mjs.map +1 -0
  115. package/dist/table/index.d.mts +53 -0
  116. package/dist/table/index.mjs +2 -0
  117. package/dist/table/index.mjs.map +1 -0
  118. package/dist/tabs/index.d.mts +97 -0
  119. package/dist/tabs/index.mjs +2 -0
  120. package/dist/tabs/index.mjs.map +1 -0
  121. package/dist/text-field/index.d.mts +65 -0
  122. package/dist/text-field/index.mjs +2 -0
  123. package/dist/text-field/index.mjs.map +1 -0
  124. package/dist/textarea/index.d.mts +24 -0
  125. package/dist/textarea/index.mjs +2 -0
  126. package/dist/textarea/index.mjs.map +1 -0
  127. package/dist/{toast-2xT7L1tJ.d.mts → toast/index.d.mts} +3 -3
  128. package/dist/toast/index.mjs +2 -0
  129. package/dist/toast/index.mjs.map +1 -0
  130. package/dist/toaster/index.d.mts +26 -0
  131. package/dist/toaster/index.mjs +2 -0
  132. package/dist/toaster/index.mjs.map +1 -0
  133. package/dist/tooltip/index.d.mts +25 -0
  134. package/dist/tooltip/index.mjs +2 -0
  135. package/dist/tooltip/index.mjs.map +1 -0
  136. package/dist/types/index.mjs +2 -0
  137. package/dist/{index.cjs.js.map → types/index.mjs.map} +1 -1
  138. package/dist/typography/index.d.mts +24 -0
  139. package/dist/typography/index.mjs +2 -0
  140. package/dist/typography/index.mjs.map +1 -0
  141. package/dist/utils/index.mjs +2 -0
  142. package/dist/utils/index.mjs.map +1 -0
  143. package/package.json +199 -34
  144. package/dist/atoms.cjs.js +0 -2
  145. package/dist/atoms.cjs.js.map +0 -1
  146. package/dist/atoms.d.mts +0 -1051
  147. package/dist/atoms.d.ts +0 -1051
  148. package/dist/atoms.esm.js +0 -2
  149. package/dist/atoms.esm.js.map +0 -1
  150. package/dist/checkbox-DxgDKaHx.d.ts +0 -108
  151. package/dist/chunk-23T2PH5G.esm.js +0 -2
  152. package/dist/chunk-23T2PH5G.esm.js.map +0 -1
  153. package/dist/chunk-2QG3QTSW.cjs.js +0 -2
  154. package/dist/chunk-2QG3QTSW.cjs.js.map +0 -1
  155. package/dist/chunk-C26U3FL4.esm.js +0 -2
  156. package/dist/chunk-C26U3FL4.esm.js.map +0 -1
  157. package/dist/chunk-DTM5LZHM.cjs.js +0 -2
  158. package/dist/chunk-DTM5LZHM.cjs.js.map +0 -1
  159. package/dist/chunk-HW32JE75.cjs.js +0 -2
  160. package/dist/chunk-HW32JE75.cjs.js.map +0 -1
  161. package/dist/chunk-JIRS6MWF.cjs.js +0 -2
  162. package/dist/chunk-JIRS6MWF.cjs.js.map +0 -1
  163. package/dist/chunk-JKTYFZ5M.esm.js +0 -2
  164. package/dist/chunk-JKTYFZ5M.esm.js.map +0 -1
  165. package/dist/chunk-JUZG25DH.esm.js +0 -2
  166. package/dist/chunk-JUZG25DH.esm.js.map +0 -1
  167. package/dist/chunk-KOYJODOP.cjs.js +0 -2
  168. package/dist/chunk-KOYJODOP.cjs.js.map +0 -1
  169. package/dist/chunk-M4S5YZ56.esm.js +0 -2
  170. package/dist/chunk-M4S5YZ56.esm.js.map +0 -1
  171. package/dist/chunk-MOYOCJW6.esm.js +0 -2
  172. package/dist/chunk-MOYOCJW6.esm.js.map +0 -1
  173. package/dist/chunk-MVWMLXLL.cjs.js +0 -2
  174. package/dist/chunk-MVWMLXLL.cjs.js.map +0 -1
  175. package/dist/chunk-SL2ZUI4G.cjs.js +0 -2
  176. package/dist/chunk-SL2ZUI4G.cjs.js.map +0 -1
  177. package/dist/chunk-STRDPP3B.esm.js +0 -2
  178. package/dist/chunk-STRDPP3B.esm.js.map +0 -1
  179. package/dist/chunk-U4NMIMU7.esm.js +0 -2
  180. package/dist/chunk-U4NMIMU7.esm.js.map +0 -1
  181. package/dist/chunk-UK47BFA3.cjs.js +0 -2
  182. package/dist/chunk-UK47BFA3.cjs.js.map +0 -1
  183. package/dist/chunk-UTVXFZLD.esm.js +0 -2
  184. package/dist/chunk-UTVXFZLD.esm.js.map +0 -1
  185. package/dist/chunk-WJNYKJP6.cjs.js +0 -2
  186. package/dist/chunk-WJNYKJP6.cjs.js.map +0 -1
  187. package/dist/chunk-YEZB7AOJ.esm.js +0 -2
  188. package/dist/chunk-YEZB7AOJ.esm.js.map +0 -1
  189. package/dist/chunk-YGLYFSF6.cjs.js +0 -2
  190. package/dist/chunk-YGLYFSF6.cjs.js.map +0 -1
  191. package/dist/hooks.cjs.js +0 -2
  192. package/dist/hooks.cjs.js.map +0 -1
  193. package/dist/hooks.d.ts +0 -51
  194. package/dist/hooks.esm.js +0 -2
  195. package/dist/hooks.esm.js.map +0 -1
  196. package/dist/index.cjs.js +0 -2
  197. package/dist/index.d.ts +0 -30
  198. package/dist/index.esm.js +0 -2
  199. package/dist/molecules.cjs.js +0 -2
  200. package/dist/molecules.cjs.js.map +0 -1
  201. package/dist/molecules.d.mts +0 -201
  202. package/dist/molecules.d.ts +0 -201
  203. package/dist/molecules.esm.js +0 -2
  204. package/dist/molecules.esm.js.map +0 -1
  205. package/dist/organisms.cjs.js +0 -2
  206. package/dist/organisms.cjs.js.map +0 -1
  207. package/dist/organisms.d.mts +0 -673
  208. package/dist/organisms.d.ts +0 -673
  209. package/dist/organisms.esm.js +0 -2
  210. package/dist/organisms.esm.js.map +0 -1
  211. package/dist/rhf.cjs.js +0 -2
  212. package/dist/rhf.cjs.js.map +0 -1
  213. package/dist/rhf.d.mts +0 -408
  214. package/dist/rhf.d.ts +0 -408
  215. package/dist/rhf.esm.js +0 -2
  216. package/dist/rhf.esm.js.map +0 -1
  217. package/dist/toast-2xT7L1tJ.d.ts +0 -18
  218. package/dist/tooltip-B4jzaurK.d.ts +0 -104
  219. package/dist/types.cjs.js +0 -2
  220. package/dist/types.cjs.js.map +0 -1
  221. package/dist/types.d.ts +0 -2
  222. package/dist/types.esm.js +0 -2
  223. package/dist/types.esm.js.map +0 -1
  224. package/dist/utils.cjs.js +0 -2
  225. package/dist/utils.cjs.js.map +0 -1
  226. package/dist/utils.d.ts +0 -5
  227. package/dist/utils.esm.js +0 -2
  228. package/dist/utils.esm.js.map +0 -1
  229. /package/dist/{types.d.mts → types/index.d.mts} +0 -0
  230. /package/dist/{utils.d.mts → utils/index.d.mts} +0 -0
package/dist/atoms.d.mts DELETED
@@ -1,1051 +0,0 @@
1
- import { a as ButtonProps } from './tooltip-B4jzaurK.mjs';
2
- export { B as Button, T as Tooltip, d as TooltipContent, e as TooltipProvider, c as TooltipTrigger, b as buttonVariants } from './tooltip-B4jzaurK.mjs';
3
- import * as class_variance_authority_types from 'class-variance-authority/types';
4
- import * as React$1 from 'react';
5
- import { ComponentProps, ComponentPropsWithoutRef, ElementRef } from 'react';
6
- import { VariantProps } from 'class-variance-authority';
7
- import * as react_jsx_runtime from 'react/jsx-runtime';
8
- import * as DialogPrimitive from '@radix-ui/react-dialog';
9
- import { DialogProps } from '@radix-ui/react-dialog';
10
- export { C as Checkbox, I as Input, L as Label, a as LabelProps, R as RadioGroup, b as RadioGroupItem, d as RadioItemContainer, c as RadioItemLabel, S as Switch } from './checkbox-DxgDKaHx.mjs';
11
- import * as SeparatorPrimitive from '@radix-ui/react-separator';
12
- import * as AvatarPrimitive from '@radix-ui/react-avatar';
13
- export { d as Toast, h as ToastAction, a as ToastActionElement, g as ToastClose, f as ToastDescription, T as ToastProps, b as ToastProvider, e as ToastTitle, c as ToastViewport } from './toast-2xT7L1tJ.mjs';
14
- import * as ResizablePrimitive from 'react-resizable-panels';
15
- import * as SwitchPrimitives from '@radix-ui/react-switch';
16
- import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
17
- import { Command as Command$1 } from 'cmdk';
18
- import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
19
- import * as AccordionPrimitive from '@radix-ui/react-accordion';
20
- import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
21
- import '@radix-ui/react-tooltip';
22
- import '@radix-ui/react-label';
23
- import '@radix-ui/react-toast';
24
-
25
- /**
26
- * Props interface for the TextField component.
27
- * Extends the native input HTML attributes and adds support for variants and icons.
28
- *
29
- * @interface TextFieldProps
30
- * @extends {React.InputHTMLAttributes<HTMLInputElement>}
31
- * @extends {VariantProps<typeof textFieldVariants>}
32
- *
33
- * @property {string} [variant] - The visual style variant of the text field.
34
- * @property {string} [size] - The size variant of the text field.
35
- * @property {string} [className] - Additional CSS classes to apply to the text field.
36
- * @property {React.ReactNode} [startIcon] - Icon to display before the input.
37
- * @property {React.ReactNode} [endIcon] - Icon to display after the input.
38
- * @property {boolean} [loading] - Whether the text field is in a loading state.
39
- * @property {string} [error] - Error message to display below the text field.
40
- * @property {string} [label] - Label text for the text field.
41
- * @property {string} [helperText] - Helper text to display below the text field.
42
- */
43
- interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof textFieldVariants> {
44
- startIcon?: React$1.ReactNode;
45
- endIcon?: React$1.ReactNode;
46
- loading?: boolean;
47
- error?: string;
48
- label?: string;
49
- helperText?: string;
50
- }
51
-
52
- /**
53
- * Text field variant styles using class-variance-authority.
54
- * Defines the visual styles for different text field variants and sizes.
55
- */
56
- declare const textFieldVariants: (props?: ({
57
- variant?: "default" | "error" | null | undefined;
58
- size?: "default" | "sm" | "lg" | null | undefined;
59
- } & class_variance_authority_types.ClassProp) | undefined) => string;
60
- /**
61
- * A versatile text field component that supports multiple variants, sizes, and icons.
62
- * Built on top of shadcn/ui's Input component.
63
- *
64
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-text-field--docs
65
- *
66
- * @component
67
- * @example
68
- * ```tsx
69
- * // Default text field
70
- * <TextField placeholder="Enter text" />
71
- *
72
- * // With icons
73
- * <TextField startIcon={<SearchIcon />} placeholder="Search..." />
74
- * <TextField endIcon={<CalendarIcon />} placeholder="Select date" />
75
- *
76
- * // With loading state
77
- * <TextField loading placeholder="Loading..." />
78
- *
79
- * // With error
80
- * <TextField error="Invalid input" placeholder="Enter text" />
81
- * ```
82
- */
83
- declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps & React$1.RefAttributes<HTMLInputElement>>;
84
-
85
- interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
86
- /**
87
- * The maximum width of the container.
88
- * - "sm": 640px
89
- * - "md": 768px
90
- * - "lg": 1024px
91
- * - "xl": 1280px
92
- * - "full": 100%
93
- * - false: No max-width (fluid)
94
- *
95
- * @default "lg"
96
- */
97
- maxWidth?: "sm" | "md" | "lg" | "xl" | "full" | false;
98
- /**
99
- * Whether to disable the default horizontal padding.
100
- * When true, removes the default padding (px-4 sm:px-6 lg:px-8).
101
- *
102
- * @default false
103
- */
104
- disablePadding?: boolean;
105
- /**
106
- * Whether to make the container fluid (no max-width).
107
- * When true, the container will expand to fill its parent's width.
108
- *
109
- * @default false
110
- */
111
- fluid?: boolean;
112
- }
113
- declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLDivElement>>;
114
-
115
- /**
116
- * Box is a fundamental layout component that serves as a building block for other components.
117
- * It's a polymorphic component that can render as different HTML elements while maintaining
118
- * consistent styling and behavior.
119
- *
120
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-box--docs
121
- *
122
- * @example
123
- * ```tsx
124
- * // Basic usage
125
- * <Box>Content</Box>
126
- *
127
- * // As a different element
128
- * <Box as="section">Section content</Box>
129
- *
130
- * // With custom className
131
- * <Box className="bg-primary text-white p-4">Styled content</Box>
132
- *
133
- * // With custom dimensions
134
- * <Box width="100px" height="200px">Fixed size content</Box>
135
- * <Box width="50%" height="auto">Responsive content</Box>
136
- * ```
137
- */
138
-
139
- type BoxComponent = "div" | "span" | "section" | "article" | "main" | "aside" | "header" | "footer" | "nav";
140
- type DimensionValue = string | number;
141
- interface BoxProps extends React$1.HTMLAttributes<HTMLDivElement> {
142
- /**
143
- * The HTML element to render the Box as.
144
- * This allows for semantic HTML while maintaining consistent styling.
145
- *
146
- * @default "div"
147
- */
148
- as?: BoxComponent;
149
- /**
150
- * The width of the Box component.
151
- * Can be a number (interpreted as pixels) or a string (e.g., "100%", "50px", "10rem").
152
- */
153
- width?: DimensionValue;
154
- /**
155
- * The height of the Box component.
156
- * Can be a number (interpreted as pixels) or a string (e.g., "100%", "50px", "10rem").
157
- */
158
- height?: DimensionValue;
159
- }
160
- declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLDivElement>>;
161
-
162
- /**
163
- * Stack is a layout component that arranges its children in a vertical or horizontal stack
164
- * with consistent spacing between items. It's built on top of Flexbox and provides
165
- * a simple way to create consistent layouts.
166
- *
167
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-stack--docs
168
- *
169
- * @example
170
- * ```tsx
171
- * // Basic vertical stack
172
- * <Stack>
173
- * <div>Item 1</div>
174
- * <div>Item 2</div>
175
- * <div>Item 3</div>
176
- * </Stack>
177
- *
178
- * // Horizontal stack with custom spacing
179
- * <Stack direction="horizontal" spacing="lg">
180
- * <div>Item 1</div>
181
- * <div>Item 2</div>
182
- * </Stack>
183
- *
184
- * // Centered stack with wrapping
185
- * <Stack direction="horizontal" center wrap>
186
- * <div>Item 1</div>
187
- * <div>Item 2</div>
188
- * <div>Item 3</div>
189
- * </Stack>
190
- *
191
- * // Stack with custom alignment
192
- * <Stack align="center" justify="between">
193
- * <div>Left</div>
194
- * <div>Center</div>
195
- * <div>Right</div>
196
- * </Stack>
197
- *
198
- * // Stack with custom dimensions
199
- * <Stack width="100%" height="200px">
200
- * <div>Full width, fixed height stack</div>
201
- * </Stack>
202
- * ```
203
- */
204
-
205
- interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
206
- /**
207
- * The direction in which to stack the items.
208
- * - "vertical": Items are stacked top to bottom
209
- * - "horizontal": Items are stacked left to right
210
- *
211
- * @default "vertical"
212
- */
213
- direction?: "vertical" | "horizontal";
214
- /**
215
- * The spacing between items in the stack.
216
- * - "none": 0px
217
- * - "xs": 0.25rem (4px)
218
- * - "sm": 0.5rem (8px)
219
- * - "md": 1rem (16px)
220
- * - "lg": 1.5rem (24px)
221
- * - "xl": 2rem (32px)
222
- *
223
- * @default "md"
224
- */
225
- spacing?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
226
- /**
227
- * Whether to allow items to wrap to the next line when they don't fit.
228
- * Only applies to horizontal stacks.
229
- *
230
- * @default false
231
- */
232
- wrap?: boolean;
233
- /**
234
- * Whether to center items both horizontally and vertically.
235
- * This is a shorthand for setting both align and justify to "center".
236
- *
237
- * @default false
238
- */
239
- center?: boolean;
240
- /**
241
- * How to justify items along the main axis.
242
- * - "start": Items are packed toward the start
243
- * - "end": Items are packed toward the end
244
- * - "center": Items are centered
245
- * - "between": Items are evenly distributed with first item at start and last at end
246
- * - "around": Items are evenly distributed with equal space around them
247
- * - "evenly": Items are distributed so that the spacing between any two items is equal
248
- *
249
- * @default undefined
250
- */
251
- justify?: "start" | "end" | "center" | "between" | "around" | "evenly";
252
- /**
253
- * How to align items along the cross axis.
254
- * - "start": Items are aligned at the start
255
- * - "end": Items are aligned at the end
256
- * - "center": Items are centered
257
- * - "stretch": Items are stretched to fill the container
258
- * - "baseline": Items are aligned at their baselines
259
- *
260
- * @default undefined
261
- */
262
- align?: "start" | "end" | "center" | "stretch" | "baseline";
263
- /**
264
- * The width of the stack container.
265
- * Can be any valid CSS width value (e.g., "100%", "200px", "50vw").
266
- *
267
- * @default undefined
268
- */
269
- width?: string;
270
- /**
271
- * The height of the stack container.
272
- * Can be any valid CSS height value (e.g., "100%", "200px", "50vh").
273
- *
274
- * @default undefined
275
- */
276
- height?: string;
277
- }
278
- declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLDivElement>>;
279
-
280
- /**
281
- * Dialog component for creating accessible dialogs with overlay and content.
282
- * Built on top of Radix UI's Dialog primitive.
283
- *
284
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-dialog--docs
285
- *
286
- * @example
287
- * ```tsx
288
- * <Dialog>
289
- * <DialogTrigger>Open Dialog</DialogTrigger>
290
- * <DialogContent>Dialog Content</DialogContent>
291
- * </Dialog>
292
- */
293
- declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
294
- declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
295
- declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
296
- declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
297
- declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
298
- declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
299
- declare const DialogHeader: {
300
- ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
301
- displayName: string;
302
- };
303
- declare const DialogFooter: {
304
- ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
305
- displayName: string;
306
- };
307
- declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
308
- declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
309
-
310
- /**
311
- * Separator component for creating horizontal or vertical dividers.
312
- * Built on top of Radix UI's Separator primitive.
313
- *
314
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-separator--docs
315
- *
316
- */
317
- declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
318
-
319
- /**
320
- * Sheet component for creating accessible sheets with overlay and content.
321
- * Built on top of Radix UI's Sheet primitive.
322
- *
323
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-sheet--docs
324
- *
325
- * @example
326
- * ```tsx
327
- * <Sheet>
328
- * <SheetTrigger>Open Sheet</SheetTrigger>
329
- * <SheetContent>Sheet Content</SheetContent>
330
- * </Sheet>
331
- */
332
- declare const Sheet: React$1.FC<DialogPrimitive.DialogProps>;
333
- declare const SheetTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
334
- declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
335
- declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
336
- declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
337
- declare const sheetVariants: (props?: ({
338
- side?: "left" | "right" | "bottom" | "top" | null | undefined;
339
- } & class_variance_authority_types.ClassProp) | undefined) => string;
340
- interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
341
- }
342
- declare const SheetContent: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
343
- declare const SheetHeader: {
344
- ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
345
- displayName: string;
346
- };
347
- declare const SheetFooter: {
348
- ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
349
- displayName: string;
350
- };
351
- declare const SheetTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
352
- declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
353
-
354
- /**
355
- * Skeleton component for creating a loading state.
356
- * Built on top of shadcn/ui's Skeleton component.
357
- *
358
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-skeleton--docs
359
- *
360
- * @example
361
- * ```tsx
362
- * <Skeleton className="w-10 h-10" />
363
- * ```
364
- */
365
- declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
366
-
367
- /**
368
- * Avatar component that displays a user's profile picture or fallback.
369
- * Built on top of Radix UI's Avatar primitive.
370
- *
371
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-avatar--docs
372
- *
373
- * @example
374
- * ```tsx
375
- * <Avatar>
376
- * <AvatarImage src="/path/to/image.jpg" alt="User avatar" />
377
- * <AvatarFallback>JD</AvatarFallback>
378
- * </Avatar>
379
- * ```
380
- */
381
- declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
382
- /**
383
- * AvatarImage component that displays the user's profile picture.
384
- * Falls back to AvatarFallback if the image fails to load.
385
- */
386
- declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
387
- /**
388
- * AvatarFallback component that displays when the image fails to load.
389
- * Typically shows the user's initials or a placeholder icon.
390
- */
391
- declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
392
-
393
- type AvatarProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>;
394
- type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
395
- type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;
396
-
397
- declare const badgeVariants: (props?: ({
398
- variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | "info" | null | undefined;
399
- size?: "default" | "sm" | "lg" | null | undefined;
400
- } & class_variance_authority_types.ClassProp) | undefined) => string;
401
-
402
- interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
403
- /**
404
- * The content to display inside the badge
405
- */
406
- children: React.ReactNode;
407
- /**
408
- * Optional icon to display before the badge content
409
- */
410
- icon?: React.ReactNode;
411
- /**
412
- * Optional icon to display after the badge content
413
- */
414
- iconAfter?: React.ReactNode;
415
- }
416
-
417
- /**
418
- * Badge component for displaying status, counts, or labels.
419
- * Supports various variants, sizes, and optional icons.
420
- *
421
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-badge--docs
422
- *
423
- * @example
424
- * ```tsx
425
- * <Badge variant="success">Active</Badge>
426
- * <Badge variant="warning" icon={<AlertIcon />}>Warning</Badge>
427
- * <Badge variant="info" size="lg" iconAfter={<ArrowIcon />}>New</Badge>
428
- * ```
429
- */
430
- declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
431
-
432
- declare const typographyVariants: (props?: ({
433
- variant?: "list" | "small" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "muted" | "large" | "lead" | null | undefined;
434
- align?: "center" | "left" | "right" | "justify" | null | undefined;
435
- } & class_variance_authority_types.ClassProp) | undefined) => string;
436
- interface TypographyProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
437
- as?: React$1.ElementType;
438
- }
439
- /**
440
- * Typography component for creating accessible text elements.
441
- * Built on top of shadcn/ui's Typography component.
442
- *
443
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-typography--docs
444
- *
445
- */
446
- declare const Typography: React$1.ForwardRefExoticComponent<TypographyProps & React$1.RefAttributes<HTMLElement>>;
447
-
448
- type TypographyVariant = NonNullable<VariantProps<typeof typographyVariants>["variant"]>;
449
- type TypographyAlign = NonNullable<VariantProps<typeof typographyVariants>["align"]>;
450
-
451
- interface PageLoaderProps$1 {
452
- /**
453
- * Optional className to extend the component's styles
454
- */
455
- className?: string;
456
- /**
457
- * Optional size of the loader (default: "default")
458
- */
459
- size?: "sm" | "default" | "lg";
460
- /**
461
- * Optional text to display below the loader
462
- */
463
- text?: string;
464
- /**
465
- * Optional color of the loader (default: "primary")
466
- */
467
- color?: "primary" | "secondary" | "accent" | "muted" | "destructive" | string;
468
- }
469
- /**
470
- * PageLoader component for displaying a loading indicator.
471
- *
472
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-page-loader--docs
473
- *
474
- */
475
- declare function PageLoader({ className, size, text, color }: PageLoaderProps$1): react_jsx_runtime.JSX.Element;
476
-
477
- interface PageLoaderProps {
478
- /**
479
- * Optional className to extend the component's styles
480
- */
481
- className?: string;
482
- /**
483
- * Optional size of the loader (default: "default")
484
- */
485
- size?: "sm" | "default" | "lg";
486
- /**
487
- * Optional text to display below the loader
488
- */
489
- text?: string;
490
- /**
491
- * Optional color of the loader (default: "primary")
492
- */
493
- color?: "primary" | "secondary" | "accent" | "muted" | "destructive" | string;
494
- }
495
-
496
- /**
497
- * Toaster component for managing and displaying toast notifications.
498
- * Built on top of the Toast primitive components.
499
- *
500
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-toaster--docs
501
- *
502
- * @example
503
- * ```tsx
504
- * // Add Toaster to your app's root layout
505
- * <Toaster />
506
- *
507
- * // Use the toast hook to show notifications
508
- * const { toast } = useToast()
509
- *
510
- * toast({
511
- * title: "Success",
512
- * description: "Your changes have been saved.",
513
- * action: <ToastAction altText="Undo">Undo</ToastAction>
514
- * })
515
- * ```
516
- */
517
- declare function Toaster(): react_jsx_runtime.JSX.Element;
518
-
519
- interface TableProps extends React$1.HTMLAttributes<HTMLTableElement> {
520
- }
521
- interface TableHeaderProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
522
- }
523
- interface TableBodyProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
524
- }
525
- interface TableFooterProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
526
- }
527
- interface TableRowProps extends React$1.HTMLAttributes<HTMLTableRowElement> {
528
- }
529
- interface TableHeadProps extends React$1.ThHTMLAttributes<HTMLTableCellElement> {
530
- }
531
- interface TableCellProps extends React$1.TdHTMLAttributes<HTMLTableCellElement> {
532
- }
533
- interface TableCaptionProps extends React$1.HTMLAttributes<HTMLTableCaptionElement> {
534
- }
535
-
536
- /**
537
- * Table component that provides a structured way to display data in rows and columns.
538
- * Built on top of native HTML table elements with enhanced styling and accessibility.
539
- *
540
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-table--docs
541
- *
542
- * @example
543
- * ```tsx
544
- * <Table>
545
- * <TableHeader>
546
- * <TableRow>
547
- * <TableHead>Name</TableHead>
548
- * <TableHead>Email</TableHead>
549
- * </TableRow>
550
- * </TableHeader>
551
- * <TableBody>
552
- * <TableRow>
553
- * <TableCell>John Doe</TableCell>
554
- * <TableCell>john@example.com</TableCell>
555
- * </TableRow>
556
- * </TableBody>
557
- * </Table>
558
- * ```
559
- */
560
- declare const Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLTableElement>>;
561
- declare const TableHeader: React$1.ForwardRefExoticComponent<TableHeaderProps & React$1.RefAttributes<HTMLTableSectionElement>>;
562
- declare const TableBody: React$1.ForwardRefExoticComponent<TableBodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
563
- declare const TableFooter: React$1.ForwardRefExoticComponent<TableFooterProps & React$1.RefAttributes<HTMLTableSectionElement>>;
564
- declare const TableRow: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
565
- declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableCellElement>>;
566
- declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
567
- declare const TableCaption: React$1.ForwardRefExoticComponent<TableCaptionProps & React$1.RefAttributes<HTMLTableCaptionElement>>;
568
-
569
- /**
570
- * Resizable component that provides resizable panel functionality.
571
- * Built on top of react-resizable-panels.
572
- *
573
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-resizable--docs
574
- *
575
- * @example
576
- * ```tsx
577
- * <ResizablePanelGroup>
578
- * <ResizablePanel defaultSize={20}>
579
- * <div>Left Panel</div>
580
- * </ResizablePanel>
581
- * <ResizableHandle withHandle />
582
- * <ResizablePanel defaultSize={80}>
583
- * <div>Right Panel</div>
584
- * </ResizablePanel>
585
- * </ResizablePanelGroup>
586
- * ```
587
- */
588
- declare const ResizablePanelGroup: ({ className, ...props }: ComponentProps<typeof ResizablePrimitive.PanelGroup>) => react_jsx_runtime.JSX.Element;
589
- declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLButtonElement | HTMLElement | HTMLSpanElement | HTMLInputElement | HTMLLabelElement | HTMLObjectElement | HTMLLinkElement | HTMLFormElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLDialogElement | HTMLImageElement | HTMLOptionElement | HTMLTableElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
590
- className?: string;
591
- collapsedSize?: number | undefined;
592
- collapsible?: boolean | undefined;
593
- defaultSize?: number | undefined;
594
- id?: string;
595
- maxSize?: number | undefined;
596
- minSize?: number | undefined;
597
- onCollapse?: ResizablePrimitive.PanelOnCollapse;
598
- onExpand?: ResizablePrimitive.PanelOnExpand;
599
- onResize?: ResizablePrimitive.PanelOnResize;
600
- order?: number;
601
- style?: object;
602
- tagName?: keyof HTMLElementTagNameMap | undefined;
603
- } & {
604
- children?: React$1.ReactNode | undefined;
605
- } & React$1.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
606
- declare const ResizableHandle: ({ withHandle, className, ...props }: ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
607
- withHandle?: boolean;
608
- }) => react_jsx_runtime.JSX.Element;
609
-
610
- type ResizablePanelGroupProps = ComponentProps<typeof ResizablePrimitive.PanelGroup>;
611
- type ResizablePanelProps = ComponentProps<typeof ResizablePrimitive.Panel>;
612
- type ResizableHandleProps = ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
613
- withHandle?: boolean;
614
- };
615
-
616
- type SelectOption = {
617
- id: string;
618
- label: string;
619
- startIcon?: React$1.ReactNode;
620
- endIcon?: React$1.ReactNode;
621
- className?: string;
622
- disabled?: boolean;
623
- };
624
- type SelectProps = {
625
- /** Whether the select is searchable */
626
- searchable?: boolean;
627
- /** Whether the select should take up the full width of its container */
628
- fullWidth?: boolean;
629
- /** Currently selected value */
630
- value: string;
631
- /** Array of options to display in the select */
632
- options: SelectOption[];
633
- /** Callback fired when the value changes */
634
- onChange: (value: string) => void;
635
- /** Render a custom CommandList for the select, if not provided, the select will render a default CommandList with the options */
636
- renderCommandList?: (options: SelectOption[]) => React$1.ReactNode;
637
- /** Placeholder text to show when no value is selected */
638
- placeholder?: string;
639
- /** Whether the select is disabled */
640
- disabled?: boolean;
641
- /** Whether the select is required */
642
- required?: boolean;
643
- /** Error message to display */
644
- error?: string;
645
- /** Additional class name for the select */
646
- className?: string;
647
- /** ID for the select element */
648
- id?: string;
649
- };
650
- /**
651
- * SearchableSelect component that provides a searchable dropdown select input.
652
- * Built on top of Radix UI's Select primitive.
653
- *
654
- * @url https://sergii-melnykov.github.io/ui/?path=/docs-atoms-select--docs
655
- *
656
- * @example
657
- * ```tsx
658
- * <Select
659
- * options={[
660
- * { id: "1", label: "Option 1" },
661
- * { id: "2", label: "Option 2" }
662
- * ]}
663
- * value="1"
664
- * onChange={setValue}
665
- * required
666
- * />
667
- * ```
668
- */
669
- declare function Select({ options, value, onChange, placeholder, disabled, required, error, className, fullWidth, searchable, id, renderCommandList }: SelectProps): react_jsx_runtime.JSX.Element;
670
-
671
- type MultiSelectOption = {
672
- id: string;
673
- label: string;
674
- startIcon?: React$1.ReactNode;
675
- endIcon?: React$1.ReactNode;
676
- className?: string;
677
- disabled?: boolean;
678
- };
679
- type MultiSelectProps = {
680
- /** Whether the select is searchable */
681
- searchable?: boolean;
682
- /** Whether the select should take up the full width of its container */
683
- fullWidth?: boolean;
684
- /** Array of options to display in the select */
685
- options: MultiSelectOption[];
686
- /** Currently selected values */
687
- value: string[];
688
- /** Callback fired when the values change */
689
- onChange: (value: string[]) => void;
690
- /** Render a custom CommandList for the select, if not provided, the select will render a default CommandList with the options */
691
- renderCommandList?: (options: MultiSelectOption[]) => React$1.ReactNode;
692
- /** Placeholder text to show when no value is selected */
693
- placeholder?: string;
694
- /** Whether the select is disabled */
695
- disabled?: boolean;
696
- /** Whether the select is required */
697
- required?: boolean;
698
- /** Error message to display */
699
- error?: string;
700
- /** Additional class name for the select */
701
- className?: string;
702
- /** ID for the select element */
703
- id?: string;
704
- /** Maximum number of selections allowed */
705
- maxSelections?: number;
706
- /** Whether to show the select all option */
707
- showSelectAll?: boolean;
708
- };
709
- /**
710
- * MultiSelect component that provides a searchable dropdown select input with multiple selection.
711
- * Built on top of Radix UI's Select primitive.
712
- *
713
- * @url https://sergii-melnykov.github.io/ui/?path=/docs-atoms-multiselect--docs
714
- *
715
- * @example
716
- * ```tsx
717
- * <MultiSelect
718
- * options={[
719
- * { id: "1", label: "Option 1" },
720
- * { id: "2", label: "Option 2" }
721
- * ]}
722
- * value={["1"]}
723
- * onChange={setValue}
724
- * showSelectAll
725
- * />
726
- * ```
727
- */
728
- declare function MultiSelect({ options, value, onChange, placeholder, disabled, required, error, className, fullWidth, searchable, id, maxSelections, showSelectAll, renderCommandList }: MultiSelectProps): react_jsx_runtime.JSX.Element;
729
-
730
- type SwitchProps = React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>;
731
-
732
- /**
733
- * Collapsible component that allows content to be expanded and collapsed.
734
- * Built on top of Radix UI's Collapsible primitive.
735
- *
736
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-collapsible--docs
737
- *
738
- * @example
739
- * ```tsx
740
- * <Collapsible>
741
- * <CollapsibleTrigger>Toggle</CollapsibleTrigger>
742
- * <CollapsibleContent>Content</CollapsibleContent>
743
- * </Collapsible>
744
- * ```
745
- */
746
- declare const Collapsible: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React$1.RefAttributes<HTMLDivElement>>;
747
- declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
748
- declare const CollapsibleContent: React$1.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
749
-
750
- type CollapsibleProps = React$1.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;
751
- type CollapsibleTriggerProps = React$1.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;
752
- type CollapsibleContentProps = React$1.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>;
753
-
754
- type CommandProps = ComponentPropsWithoutRef<typeof Command$1>;
755
- type CommandRef = ElementRef<typeof Command$1>;
756
- type CommandDialogProps = DialogProps;
757
- type CommandInputProps = ComponentPropsWithoutRef<typeof Command$1.Input>;
758
- type CommandInputRef = ElementRef<typeof Command$1.Input>;
759
- type CommandListProps = ComponentPropsWithoutRef<typeof Command$1.List>;
760
- type CommandListRef = ElementRef<typeof Command$1.List>;
761
- type CommandEmptyProps = ComponentPropsWithoutRef<typeof Command$1.Empty>;
762
- type CommandEmptyRef = ElementRef<typeof Command$1.Empty>;
763
- type CommandGroupProps = ComponentPropsWithoutRef<typeof Command$1.Group>;
764
- type CommandGroupRef = ElementRef<typeof Command$1.Group>;
765
- type CommandSeparatorProps = ComponentPropsWithoutRef<typeof Command$1.Separator>;
766
- type CommandSeparatorRef = ElementRef<typeof Command$1.Separator>;
767
- type CommandItemProps = ComponentPropsWithoutRef<typeof Command$1.Item>;
768
- type CommandItemRef = ElementRef<typeof Command$1.Item>;
769
- type CommandShortcutProps = React$1.HTMLAttributes<HTMLSpanElement>;
770
-
771
- /**
772
- * Command component that provides a command palette interface.
773
- * Built on top of cmdk and Radix UI's Dialog primitive.
774
- *
775
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-command--docs
776
- *
777
- * @example
778
- * ```tsx
779
- * <Command>
780
- * <CommandInput placeholder="Search..." />
781
- * <CommandList>
782
- * <CommandEmpty>No results found.</CommandEmpty>
783
- * <CommandGroup heading="Suggestions">
784
- * <CommandItem>Calendar</CommandItem>
785
- * <CommandItem>Search</CommandItem>
786
- * </CommandGroup>
787
- * </CommandList>
788
- * </Command>
789
- * ```
790
- */
791
- declare const Command: React$1.ForwardRefExoticComponent<Omit<{
792
- children?: React$1.ReactNode;
793
- } & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
794
- ref?: React$1.Ref<HTMLDivElement>;
795
- } & {
796
- asChild?: boolean;
797
- }, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
798
- label?: string;
799
- shouldFilter?: boolean;
800
- filter?: (value: string, search: string, keywords?: string[]) => number;
801
- defaultValue?: string;
802
- value?: string;
803
- onValueChange?: (value: string) => void;
804
- loop?: boolean;
805
- disablePointerSelection?: boolean;
806
- vimBindings?: boolean;
807
- } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
808
- declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
809
- declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>> & {
810
- ref?: React$1.Ref<HTMLInputElement>;
811
- } & {
812
- asChild?: boolean;
813
- }, "asChild" | "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
814
- value?: string;
815
- onValueChange?: (search: string) => void;
816
- } & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
817
- declare const CommandList: React$1.ForwardRefExoticComponent<Omit<{
818
- children?: React$1.ReactNode;
819
- } & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
820
- ref?: React$1.Ref<HTMLDivElement>;
821
- } & {
822
- asChild?: boolean;
823
- }, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
824
- label?: string;
825
- } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
826
- declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
827
- children?: React$1.ReactNode;
828
- } & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
829
- ref?: React$1.Ref<HTMLDivElement>;
830
- } & {
831
- asChild?: boolean;
832
- }, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
833
- declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
834
- children?: React$1.ReactNode;
835
- } & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
836
- ref?: React$1.Ref<HTMLDivElement>;
837
- } & {
838
- asChild?: boolean;
839
- }, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
840
- heading?: React$1.ReactNode;
841
- value?: string;
842
- forceMount?: boolean;
843
- } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
844
- declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
845
- ref?: React$1.Ref<HTMLDivElement>;
846
- } & {
847
- asChild?: boolean;
848
- }, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
849
- alwaysRender?: boolean;
850
- } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
851
- declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
852
- children?: React$1.ReactNode;
853
- } & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
854
- ref?: React$1.Ref<HTMLDivElement>;
855
- } & {
856
- asChild?: boolean;
857
- }, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
858
- disabled?: boolean;
859
- onSelect?: (value: string) => void;
860
- value?: string;
861
- keywords?: string[];
862
- forceMount?: boolean;
863
- } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
864
- declare const CommandShortcut: {
865
- ({ className, ...props }: CommandShortcutProps): react_jsx_runtime.JSX.Element;
866
- displayName: string;
867
- };
868
-
869
- /**
870
- * Pagination component that provides navigation controls for paginated content.
871
- * Built on top of shadcn/ui's button component.
872
- *
873
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-pagination--docs
874
- *
875
- * @example
876
- * ```tsx
877
- * <Pagination>
878
- * <PaginationContent>
879
- * <PaginationItem>
880
- * <PaginationPrevious href="#" />
881
- * </PaginationItem>
882
- * <PaginationItem>
883
- * <PaginationLink href="#" isActive>1</PaginationLink>
884
- * </PaginationItem>
885
- * <PaginationItem>
886
- * <PaginationEllipsis />
887
- * </PaginationItem>
888
- * <PaginationItem>
889
- * <PaginationNext href="#" />
890
- * </PaginationItem>
891
- * </PaginationContent>
892
- * </Pagination>
893
- * ```
894
- */
895
- declare const Pagination: {
896
- ({ className, ...props }: React$1.ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
897
- displayName: string;
898
- };
899
- declare const PaginationContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
900
- declare const PaginationItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
901
- type PaginationLinkProps$1 = {
902
- isActive?: boolean;
903
- } & Pick<ButtonProps, "size"> & React$1.ComponentProps<"a">;
904
- declare const PaginationLink: {
905
- ({ className, isActive, size, children, ...props }: PaginationLinkProps$1): react_jsx_runtime.JSX.Element;
906
- displayName: string;
907
- };
908
- declare const PaginationPrevious: {
909
- ({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
910
- displayName: string;
911
- };
912
- declare const PaginationNext: {
913
- ({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
914
- displayName: string;
915
- };
916
- declare const PaginationEllipsis: {
917
- ({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
918
- displayName: string;
919
- };
920
-
921
- type PaginationLinkProps = {
922
- isActive?: boolean;
923
- } & Pick<ButtonProps, "size"> & React$1.ComponentProps<"a">;
924
-
925
- type RadioGroupProps = React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
926
- type RadioGroupItemProps = React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
927
-
928
- /**
929
- * Props for a single-item accordion
930
- */
931
- type AccordionSingleProps = React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
932
- /** The type of accordion - must be "single" for this variant */
933
- type: "single";
934
- /** The default value of the accordion item */
935
- defaultValue?: string;
936
- /** The controlled value of the accordion item */
937
- value?: string;
938
- /** Callback fired when the value changes */
939
- onValueChange?: (_value: string) => void;
940
- /** Whether the accordion item can be collapsed */
941
- collapsible?: boolean;
942
- };
943
- /**
944
- * Props for a multiple-item accordion
945
- */
946
- type AccordionMultipleProps = React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
947
- /** The type of accordion - must be "multiple" for this variant */
948
- type: "multiple";
949
- /** The default values of the accordion items */
950
- defaultValue?: string[];
951
- /** The controlled values of the accordion items */
952
- value?: string[];
953
- /** Callback fired when the values change */
954
- onValueChange?: (_value: string[]) => void;
955
- };
956
- /**
957
- * Props for the Accordion component
958
- */
959
- type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
960
- /**
961
- * Props for an individual accordion item
962
- */
963
- interface AccordionItemProps extends React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
964
- /** The value of the accordion item */
965
- value: string;
966
- }
967
- /**
968
- * Props for the accordion trigger button
969
- */
970
- interface AccordionTriggerProps extends React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
971
- /** The content of the accordion trigger */
972
- children: React$1.ReactNode;
973
- }
974
- /**
975
- * Props for the accordion content panel
976
- */
977
- interface AccordionContentProps extends React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
978
- /** The content of the accordion panel */
979
- children: React$1.ReactNode;
980
- }
981
-
982
- /**
983
- * Accordion component that displays a list of expandable/collapsible sections.
984
- * Built on top of Radix UI's Accordion primitive.
985
- *
986
- * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-accordion--docs
987
- *
988
- * @example
989
- * ```tsx
990
- * <Accordion type="single" collapsible>
991
- * <AccordionItem value="item-1">
992
- * <AccordionTrigger>Section 1</AccordionTrigger>
993
- * <AccordionContent>Content 1</AccordionContent>
994
- * </AccordionItem>
995
- * <AccordionItem value="item-2">
996
- * <AccordionTrigger>Section 2</AccordionTrigger>
997
- * <AccordionContent>Content 2</AccordionContent>
998
- * </AccordionItem>
999
- * </Accordion>
1000
- * ```
1001
- */
1002
- declare const Accordion: React$1.ForwardRefExoticComponent<((Omit<AccordionPrimitive.AccordionSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
1003
- type: "single";
1004
- defaultValue?: string;
1005
- value?: string;
1006
- onValueChange?: (_value: string) => void;
1007
- collapsible?: boolean;
1008
- }) | (Omit<AccordionPrimitive.AccordionMultipleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
1009
- type: "multiple";
1010
- defaultValue?: string[];
1011
- value?: string[];
1012
- onValueChange?: (_value: string[]) => void;
1013
- })) & React$1.RefAttributes<HTMLDivElement>>;
1014
- declare const AccordionItem: React$1.ForwardRefExoticComponent<AccordionItemProps & React$1.RefAttributes<HTMLDivElement>>;
1015
- declare const AccordionTrigger: React$1.ForwardRefExoticComponent<AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
1016
- declare const AccordionContent: React$1.ForwardRefExoticComponent<AccordionContentProps & React$1.RefAttributes<HTMLDivElement>>;
1017
-
1018
- type CheckboxProps = React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
1019
-
1020
- interface BreadcrumbProps extends React$1.ComponentPropsWithoutRef<"nav"> {
1021
- separator?: React$1.ReactNode;
1022
- }
1023
- interface BreadcrumbListProps extends React$1.ComponentPropsWithoutRef<"ol"> {
1024
- }
1025
- interface BreadcrumbItemProps extends React$1.ComponentPropsWithoutRef<"li"> {
1026
- }
1027
- interface BreadcrumbLinkProps extends React$1.ComponentPropsWithoutRef<"a"> {
1028
- asChild?: boolean;
1029
- }
1030
- interface BreadcrumbPageProps extends React$1.ComponentPropsWithoutRef<"span"> {
1031
- }
1032
- interface BreadcrumbSeparatorProps extends React$1.ComponentProps<"li"> {
1033
- }
1034
- interface BreadcrumbEllipsisProps extends React$1.ComponentProps<"span"> {
1035
- }
1036
-
1037
- declare const Breadcrumb: React$1.ForwardRefExoticComponent<BreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
1038
- declare const BreadcrumbList: React$1.ForwardRefExoticComponent<BreadcrumbListProps & React$1.RefAttributes<HTMLOListElement>>;
1039
- declare const BreadcrumbItem: React$1.ForwardRefExoticComponent<BreadcrumbItemProps & React$1.RefAttributes<HTMLLIElement>>;
1040
- declare const BreadcrumbLink: React$1.ForwardRefExoticComponent<BreadcrumbLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
1041
- declare const BreadcrumbPage: React$1.ForwardRefExoticComponent<BreadcrumbPageProps & React$1.RefAttributes<HTMLSpanElement>>;
1042
- declare const BreadcrumbSeparator: {
1043
- ({ children, className, ...props }: BreadcrumbSeparatorProps): react_jsx_runtime.JSX.Element;
1044
- displayName: string;
1045
- };
1046
- declare const BreadcrumbEllipsis: {
1047
- ({ className, ...props }: BreadcrumbEllipsisProps): react_jsx_runtime.JSX.Element;
1048
- displayName: string;
1049
- };
1050
-
1051
- export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, ButtonProps, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, type CommandEmptyRef, CommandGroup, type CommandGroupProps, type CommandGroupRef, CommandInput, type CommandInputProps, type CommandInputRef, CommandItem, type CommandItemProps, type CommandItemRef, CommandList, type CommandListProps, type CommandListRef, type CommandProps, type CommandRef, CommandSeparator, type CommandSeparatorProps, type CommandSeparatorRef, CommandShortcut, type CommandShortcutProps, Container, type ContainerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageLoader, type PageLoaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, type RadioGroupItemProps, type RadioGroupProps, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, Select, type SelectOption, type SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Stack, type StackProps, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, TextField, type TextFieldProps, Toaster, Typography, type TypographyAlign, type TypographyProps, type TypographyVariant, badgeVariants, typographyVariants };