@minidev.fun/ui 1.0.2 → 1.0.4

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 (247) hide show
  1. package/dist/accordion.d.ts +36 -0
  2. package/dist/alert-dialog.d.ts +114 -0
  3. package/dist/alert.d.ts +41 -0
  4. package/dist/aspect-ratio.d.ts +14 -0
  5. package/dist/avatar.d.ts +55 -0
  6. package/dist/{components/ui/badge.d.ts → badge.d.ts} +22 -16
  7. package/dist/breadcrumb.d.ts +54 -0
  8. package/dist/button-group.d.ts +45 -0
  9. package/dist/{components/ui/button.d.ts → button.d.ts} +46 -41
  10. package/dist/calendar.d.ts +68 -0
  11. package/dist/card.d.ts +45 -0
  12. package/dist/carousel.d.ts +116 -0
  13. package/dist/{components/ui/chart.d.ts → chart.d.ts} +85 -73
  14. package/dist/checkbox.d.ts +14 -0
  15. package/dist/collapsible.d.ts +28 -0
  16. package/dist/combobox.d.ts +113 -0
  17. package/dist/command.d.ts +90 -0
  18. package/dist/components/minidev.fun/undefined/index.d.ts +2 -0
  19. package/dist/components/ui/src/components/ui/accordion.d.ts +2 -0
  20. package/dist/components/ui/src/components/ui/alert-dialog.d.ts +2 -0
  21. package/dist/components/ui/src/components/ui/alert.d.ts +2 -0
  22. package/dist/components/ui/src/components/ui/aspect-ratio.d.ts +2 -0
  23. package/dist/components/ui/src/components/ui/avatar.d.ts +2 -0
  24. package/dist/components/ui/src/components/ui/badge.d.ts +2 -0
  25. package/dist/components/ui/src/components/ui/breadcrumb.d.ts +2 -0
  26. package/dist/components/ui/src/components/ui/button-group.d.ts +2 -0
  27. package/dist/components/ui/src/components/ui/button.d.ts +2 -0
  28. package/dist/components/ui/src/components/ui/calendar.d.ts +2 -0
  29. package/dist/components/ui/src/components/ui/card.d.ts +2 -0
  30. package/dist/components/ui/src/components/ui/carousel.d.ts +2 -0
  31. package/dist/components/ui/src/components/ui/chart.d.ts +2 -0
  32. package/dist/components/ui/src/components/ui/checkbox.d.ts +2 -0
  33. package/dist/components/ui/src/components/ui/collapsible.d.ts +2 -0
  34. package/dist/components/ui/src/components/ui/combobox.d.ts +2 -0
  35. package/dist/components/ui/src/components/ui/command.d.ts +2 -0
  36. package/dist/components/ui/src/components/ui/context-menu.d.ts +2 -0
  37. package/dist/components/ui/src/components/ui/dialog.d.ts +2 -0
  38. package/dist/components/ui/src/components/ui/drawer.d.ts +2 -0
  39. package/dist/components/ui/src/components/ui/dropdown-menu.d.ts +2 -0
  40. package/dist/components/ui/src/components/ui/empty.d.ts +2 -0
  41. package/dist/components/ui/src/components/ui/field.d.ts +2 -0
  42. package/dist/components/ui/src/components/ui/hover-card.d.ts +2 -0
  43. package/dist/components/ui/src/components/ui/input-group.d.ts +2 -0
  44. package/dist/components/ui/src/components/ui/input-otp.d.ts +2 -0
  45. package/dist/components/ui/src/components/ui/input.d.ts +2 -0
  46. package/dist/components/ui/src/components/ui/item.d.ts +2 -0
  47. package/dist/components/ui/src/components/ui/kbd.d.ts +2 -0
  48. package/dist/components/ui/src/components/ui/label.d.ts +2 -0
  49. package/dist/components/ui/src/components/ui/menubar.d.ts +2 -0
  50. package/dist/components/ui/src/components/ui/modal.d.ts +2 -0
  51. package/dist/components/ui/src/components/ui/navigation-menu.d.ts +2 -0
  52. package/dist/components/ui/src/components/ui/pagination.d.ts +2 -0
  53. package/dist/components/ui/src/components/ui/popover.d.ts +2 -0
  54. package/dist/components/ui/src/components/ui/progress.d.ts +2 -0
  55. package/dist/components/ui/src/components/ui/radio-group.d.ts +2 -0
  56. package/dist/components/ui/src/components/ui/resizable.d.ts +2 -0
  57. package/dist/components/ui/src/components/ui/scroll-area.d.ts +2 -0
  58. package/dist/components/ui/src/components/ui/select.d.ts +2 -0
  59. package/dist/components/ui/src/components/ui/separator.d.ts +2 -0
  60. package/dist/components/ui/src/components/ui/sheet.d.ts +2 -0
  61. package/dist/components/ui/src/components/ui/sidebar.d.ts +2 -0
  62. package/dist/components/ui/src/components/ui/skeleton.d.ts +2 -0
  63. package/dist/components/ui/src/components/ui/slider.d.ts +2 -0
  64. package/dist/components/ui/src/components/ui/sonner.d.ts +2 -0
  65. package/dist/components/ui/src/components/ui/spinner.d.ts +2 -0
  66. package/dist/components/ui/src/components/ui/switch.d.ts +2 -0
  67. package/dist/components/ui/src/components/ui/table.d.ts +2 -0
  68. package/dist/components/ui/src/components/ui/tabs.d.ts +2 -0
  69. package/dist/components/ui/src/components/ui/textarea.d.ts +2 -0
  70. package/dist/components/ui/src/components/ui/toast.d.ts +2 -0
  71. package/dist/components/ui/src/components/ui/toggle-group.d.ts +2 -0
  72. package/dist/components/ui/src/components/ui/toggle.d.ts +2 -0
  73. package/dist/components/ui/src/components/ui/tooltip.d.ts +2 -0
  74. package/dist/context-menu.d.ts +97 -0
  75. package/dist/dialog.d.ts +90 -0
  76. package/dist/drawer.d.ts +61 -0
  77. package/dist/dropdown-menu.d.ts +121 -0
  78. package/dist/empty.d.ts +56 -0
  79. package/dist/field.d.ts +109 -0
  80. package/dist/hooks/src/hooks/use-mobile.d.ts +2 -0
  81. package/dist/hover-card.d.ts +28 -0
  82. package/dist/index.d.ts +290 -0
  83. package/dist/input-group.d.ts +106 -0
  84. package/dist/input-otp.d.ts +43 -0
  85. package/dist/input.d.ts +14 -0
  86. package/dist/item.d.ts +101 -0
  87. package/dist/kbd.d.ts +19 -0
  88. package/dist/label.d.ts +12 -0
  89. package/dist/lib/utils.d.ts +2 -23
  90. package/dist/menubar.d.ts +205 -0
  91. package/dist/modal.d.ts +104 -0
  92. package/dist/navigation-menu.d.ts +66 -0
  93. package/dist/pagination.d.ts +99 -0
  94. package/dist/popover.d.ts +55 -0
  95. package/dist/progress.d.ts +41 -0
  96. package/dist/radio-group.d.ts +21 -0
  97. package/dist/{components/ui/resizable.d.ts → resizable.d.ts} +47 -38
  98. package/dist/{components/ui/scroll-area.d.ts → scroll-area.d.ts} +69 -64
  99. package/dist/select.d.ts +79 -0
  100. package/dist/separator.d.ts +12 -0
  101. package/dist/sheet.d.ts +68 -0
  102. package/dist/sidebar.d.ts +288 -0
  103. package/dist/skeleton.d.ts +11 -0
  104. package/dist/{components/ui/slider.d.ts → slider.d.ts} +24 -21
  105. package/dist/{components/ui/sonner.d.ts → sonner.d.ts} +27 -21
  106. package/dist/spinner.d.ts +11 -0
  107. package/dist/switch.d.ts +15 -0
  108. package/dist/table.d.ts +68 -0
  109. package/dist/tabs.d.ts +42 -0
  110. package/dist/{components/ui/textarea.d.ts → textarea.d.ts} +21 -18
  111. package/dist/toast.d.ts +15 -0
  112. package/dist/toggle-group.d.ts +36 -0
  113. package/dist/toggle.d.ts +19 -0
  114. package/dist/tooltip.d.ts +36 -0
  115. package/dist/{hooks/use-mobile.d.ts → use-mobile.d.ts} +19 -18
  116. package/dist/utils.d.ts +25 -0
  117. package/package.json +1 -1
  118. package/dist/components/minidev.fun/color-mode/color-mode-initializer.d.ts +0 -46
  119. package/dist/components/minidev.fun/color-mode/color-mode-initializer.d.ts.map +0 -1
  120. package/dist/components/minidev.fun/color-mode/color-mode-toggle.d.ts +0 -106
  121. package/dist/components/minidev.fun/color-mode/color-mode-toggle.d.ts.map +0 -1
  122. package/dist/components/minidev.fun/color-mode/index.d.ts +0 -4
  123. package/dist/components/minidev.fun/color-mode/index.d.ts.map +0 -1
  124. package/dist/components/minidev.fun/color-mode/use-color-mode.d.ts +0 -91
  125. package/dist/components/minidev.fun/color-mode/use-color-mode.d.ts.map +0 -1
  126. package/dist/components/minidev.fun/first-light/first-light-filters.d.ts +0 -27
  127. package/dist/components/minidev.fun/first-light/first-light-filters.d.ts.map +0 -1
  128. package/dist/components/minidev.fun/first-light/index.d.ts +0 -2
  129. package/dist/components/minidev.fun/first-light/index.d.ts.map +0 -1
  130. package/dist/components/minidev.fun/typography/blockquote.d.ts +0 -13
  131. package/dist/components/minidev.fun/typography/blockquote.d.ts.map +0 -1
  132. package/dist/components/minidev.fun/typography/code.d.ts +0 -13
  133. package/dist/components/minidev.fun/typography/code.d.ts.map +0 -1
  134. package/dist/components/minidev.fun/typography/index.d.ts +0 -6
  135. package/dist/components/minidev.fun/typography/index.d.ts.map +0 -1
  136. package/dist/components/minidev.fun/typography/list-item.d.ts +0 -27
  137. package/dist/components/minidev.fun/typography/list-item.d.ts.map +0 -1
  138. package/dist/components/minidev.fun/typography/text.d.ts +0 -44
  139. package/dist/components/minidev.fun/typography/text.d.ts.map +0 -1
  140. package/dist/components/minidev.fun/typography/title.d.ts +0 -22
  141. package/dist/components/minidev.fun/typography/title.d.ts.map +0 -1
  142. package/dist/components/ui/accordion.d.ts +0 -27
  143. package/dist/components/ui/accordion.d.ts.map +0 -1
  144. package/dist/components/ui/alert-dialog.d.ts +0 -47
  145. package/dist/components/ui/alert-dialog.d.ts.map +0 -1
  146. package/dist/components/ui/alert.d.ts +0 -30
  147. package/dist/components/ui/alert.d.ts.map +0 -1
  148. package/dist/components/ui/aspect-ratio.d.ts +0 -11
  149. package/dist/components/ui/aspect-ratio.d.ts.map +0 -1
  150. package/dist/components/ui/avatar.d.ts +0 -42
  151. package/dist/components/ui/avatar.d.ts.map +0 -1
  152. package/dist/components/ui/badge.d.ts.map +0 -1
  153. package/dist/components/ui/breadcrumb.d.ts +0 -39
  154. package/dist/components/ui/breadcrumb.d.ts.map +0 -1
  155. package/dist/components/ui/button-group.d.ts +0 -26
  156. package/dist/components/ui/button-group.d.ts.map +0 -1
  157. package/dist/components/ui/button.d.ts.map +0 -1
  158. package/dist/components/ui/calendar.d.ts +0 -20
  159. package/dist/components/ui/calendar.d.ts.map +0 -1
  160. package/dist/components/ui/card.d.ts +0 -30
  161. package/dist/components/ui/card.d.ts.map +0 -1
  162. package/dist/components/ui/carousel.d.ts +0 -56
  163. package/dist/components/ui/carousel.d.ts.map +0 -1
  164. package/dist/components/ui/chart.d.ts.map +0 -1
  165. package/dist/components/ui/checkbox.d.ts +0 -11
  166. package/dist/components/ui/checkbox.d.ts.map +0 -1
  167. package/dist/components/ui/collapsible.d.ts +0 -21
  168. package/dist/components/ui/collapsible.d.ts.map +0 -1
  169. package/dist/components/ui/combobox.d.ts +0 -80
  170. package/dist/components/ui/combobox.d.ts.map +0 -1
  171. package/dist/components/ui/command.d.ts +0 -63
  172. package/dist/components/ui/command.d.ts.map +0 -1
  173. package/dist/components/ui/context-menu.d.ts +0 -64
  174. package/dist/components/ui/context-menu.d.ts.map +0 -1
  175. package/dist/components/ui/dialog.d.ts +0 -69
  176. package/dist/components/ui/dialog.d.ts.map +0 -1
  177. package/dist/components/ui/drawer.d.ts +0 -40
  178. package/dist/components/ui/drawer.d.ts.map +0 -1
  179. package/dist/components/ui/dropdown-menu.d.ts +0 -88
  180. package/dist/components/ui/dropdown-menu.d.ts.map +0 -1
  181. package/dist/components/ui/empty.d.ts +0 -41
  182. package/dist/components/ui/empty.d.ts.map +0 -1
  183. package/dist/components/ui/field.d.ts +0 -78
  184. package/dist/components/ui/field.d.ts.map +0 -1
  185. package/dist/components/ui/hover-card.d.ts +0 -21
  186. package/dist/components/ui/hover-card.d.ts.map +0 -1
  187. package/dist/components/ui/input-group.d.ts +0 -50
  188. package/dist/components/ui/input-group.d.ts.map +0 -1
  189. package/dist/components/ui/input-otp.d.ts +0 -34
  190. package/dist/components/ui/input-otp.d.ts.map +0 -1
  191. package/dist/components/ui/input.d.ts +0 -11
  192. package/dist/components/ui/input.d.ts.map +0 -1
  193. package/dist/components/ui/item.d.ts +0 -69
  194. package/dist/components/ui/item.d.ts.map +0 -1
  195. package/dist/components/ui/kbd.d.ts +0 -14
  196. package/dist/components/ui/kbd.d.ts.map +0 -1
  197. package/dist/components/ui/label.d.ts +0 -9
  198. package/dist/components/ui/label.d.ts.map +0 -1
  199. package/dist/components/ui/menubar.d.ts +0 -87
  200. package/dist/components/ui/menubar.d.ts.map +0 -1
  201. package/dist/components/ui/modal.d.ts +0 -41
  202. package/dist/components/ui/modal.d.ts.map +0 -1
  203. package/dist/components/ui/navigation-menu.d.ts +0 -52
  204. package/dist/components/ui/navigation-menu.d.ts.map +0 -1
  205. package/dist/components/ui/pagination.d.ts +0 -42
  206. package/dist/components/ui/pagination.d.ts.map +0 -1
  207. package/dist/components/ui/popover.d.ts +0 -42
  208. package/dist/components/ui/popover.d.ts.map +0 -1
  209. package/dist/components/ui/progress.d.ts +0 -30
  210. package/dist/components/ui/progress.d.ts.map +0 -1
  211. package/dist/components/ui/radio-group.d.ts +0 -16
  212. package/dist/components/ui/radio-group.d.ts.map +0 -1
  213. package/dist/components/ui/resizable.d.ts.map +0 -1
  214. package/dist/components/ui/scroll-area.d.ts.map +0 -1
  215. package/dist/components/ui/select.d.ts +0 -58
  216. package/dist/components/ui/select.d.ts.map +0 -1
  217. package/dist/components/ui/separator.d.ts +0 -9
  218. package/dist/components/ui/separator.d.ts.map +0 -1
  219. package/dist/components/ui/sheet.d.ts +0 -51
  220. package/dist/components/ui/sheet.d.ts.map +0 -1
  221. package/dist/components/ui/sidebar.d.ts +0 -172
  222. package/dist/components/ui/sidebar.d.ts.map +0 -1
  223. package/dist/components/ui/skeleton.d.ts +0 -8
  224. package/dist/components/ui/skeleton.d.ts.map +0 -1
  225. package/dist/components/ui/slider.d.ts.map +0 -1
  226. package/dist/components/ui/sonner.d.ts.map +0 -1
  227. package/dist/components/ui/spinner.d.ts +0 -8
  228. package/dist/components/ui/spinner.d.ts.map +0 -1
  229. package/dist/components/ui/switch.d.ts +0 -12
  230. package/dist/components/ui/switch.d.ts.map +0 -1
  231. package/dist/components/ui/table.d.ts +0 -51
  232. package/dist/components/ui/table.d.ts.map +0 -1
  233. package/dist/components/ui/tabs.d.ts +0 -31
  234. package/dist/components/ui/tabs.d.ts.map +0 -1
  235. package/dist/components/ui/textarea.d.ts.map +0 -1
  236. package/dist/components/ui/toast.d.ts +0 -11
  237. package/dist/components/ui/toast.d.ts.map +0 -1
  238. package/dist/components/ui/toggle-group.d.ts +0 -26
  239. package/dist/components/ui/toggle-group.d.ts.map +0 -1
  240. package/dist/components/ui/toggle.d.ts +0 -14
  241. package/dist/components/ui/toggle.d.ts.map +0 -1
  242. package/dist/components/ui/tooltip.d.ts +0 -27
  243. package/dist/components/ui/tooltip.d.ts.map +0 -1
  244. package/dist/hooks/use-mobile.d.ts.map +0 -1
  245. package/dist/lib/utils.d.ts.map +0 -1
  246. package/dist/lib/variants.d.ts +0 -107
  247. package/dist/lib/variants.d.ts.map +0 -1
package/dist/hooks/src/hooks/use-mobile.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from '../../../src/hooks/use-mobile'
2
+ export {}
package/dist/hover-card.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ import { JSX } from 'react/jsx-runtime';
2
+ import { PreviewCard } from '@base-ui/react/preview-card';
3
+
4
+ /**
5
+ * HoverCard root container - manages state and hover interactions.
6
+ * Wrap trigger and content with this component.
7
+ */
8
+ export declare function HoverCard({ ...props }: HoverCardProps): JSX.Element;
9
+
10
+ /**
11
+ * HoverCard content container with automatic portal, positioning, and animations.
12
+ * Supports positioning on all sides with alignment options.
13
+ */
14
+ export declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: HoverCardContentProps): JSX.Element;
15
+
16
+ export declare type HoverCardContentProps = PreviewCard.Popup.Props & Pick<PreviewCard.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">;
17
+
18
+ export declare type HoverCardProps = PreviewCard.Root.Props;
19
+
20
+ /**
21
+ * Element that triggers the hover card on hover.
22
+ * Use `render` prop to customize the trigger element.
23
+ */
24
+ export declare function HoverCardTrigger({ ...props }: HoverCardTriggerProps): JSX.Element;
25
+
26
+ export declare type HoverCardTriggerProps = PreviewCard.Trigger.Props;
27
+
28
+ export { }
package/dist/index.d.ts ADDED
@@ -0,0 +1,290 @@
1
+ import { Button as Button_2 } from '@base-ui/react/button';
2
+ import { ClassProp } from 'class-variance-authority/types';
3
+ import { JSX } from 'react/jsx-runtime';
4
+ import { VariantProps } from 'class-variance-authority';
5
+
6
+ /**
7
+ * Versatile button component with multiple visual variants and sizes.
8
+ *
9
+ * Supports icon placement via `data-icon="inline-start"` or `data-icon="inline-end"` attributes
10
+ * on child elements. Use the `render` prop to compose with other components or change the
11
+ * underlying element while maintaining button semantics.
12
+ *
13
+ * @example
14
+ * ```tsx
15
+ * // Basic button
16
+ * <Button variant="default">Click me</Button>
17
+ *
18
+ * // With icon
19
+ * <Button>
20
+ * <PlusIcon data-icon="inline-start" />
21
+ * Create
22
+ * </Button>
23
+ *
24
+ * // Icon only
25
+ * <Button size="icon" aria-label="Settings">
26
+ * <SettingsIcon />
27
+ * </Button>
28
+ *
29
+ * // Custom element
30
+ * <Button render={<a href="/login" />}>Sign in</Button>
31
+ * ```
32
+ */
33
+ declare function Button({ className, variant, size, ...props }: ButtonProps): JSX.Element;
34
+
35
+ /**
36
+ * Props for the Button component.
37
+ * Combines Base UI Button props with variant styling options.
38
+ */
39
+ declare type ButtonProps = Button_2.Props & VariantProps<typeof buttonVariants>;
40
+
41
+ declare const buttonVariants: (props?: ({
42
+ variant?: "link" | "default" | "outline" | "success" | "destructive" | "info" | "primary" | "secondary" | "ghost" | "warning" | null | undefined;
43
+ size?: "default" | "icon" | "sm" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
44
+ } & ClassProp) | undefined) => string;
45
+
46
+ /**
47
+ * ColorModeInitializer - Prevents flash of unstyled content (FOUC) during color mode initialization
48
+ *
49
+ * A React component that injects the color mode initialization script into the page.
50
+ * Use this in SSR frameworks like Next.js where React controls the document.
51
+ *
52
+ * **For Vite/static HTML apps:** This component won't prevent FOUC because React
53
+ * renders after first paint. Instead, copy the initialization script directly into
54
+ * your `index.html` `<head>`. See the Vite integration guide for the full script.
55
+ *
56
+ * @component
57
+ * @example Next.js App Router
58
+ * ```tsx
59
+ * // app/layout.tsx
60
+ * import { ColorModeInitializer } from "@minidev.fun/ui/color-mode";
61
+ *
62
+ * export default function RootLayout({ children }) {
63
+ * return (
64
+ * <html lang="en" suppressHydrationWarning>
65
+ * <head>
66
+ * <ColorModeInitializer />
67
+ * </head>
68
+ * <body>{children}</body>
69
+ * </html>
70
+ * );
71
+ * }
72
+ * ```
73
+ *
74
+ * @example Vite - copy script to index.html instead
75
+ * ```html
76
+ * <!-- See docs/integrations/vite.md for the full script to copy -->
77
+ * <head>
78
+ * <script>
79
+ * (function() {
80
+ * // ... color mode initialization script
81
+ * })();
82
+ * </script>
83
+ * </head>
84
+ * ```
85
+ *
86
+ * @see {@link useColorMode} - Hook for runtime color mode management
87
+ * @see {@link ColorModeToggle} - UI component for user color mode switching
88
+ * @since 1.0.0
89
+ */
90
+ export declare function ColorModeInitializer(): JSX.Element;
91
+
92
+ /**
93
+ * Color mode preference options for the color mode system
94
+ *
95
+ * Controls how the application determines the active color mode:
96
+ * - `"system"` - Automatically follows the user's OS preference
97
+ * - `"light"` - Forces light mode regardless of system preference
98
+ * - `"dark"` - Forces dark mode regardless of system preference
99
+ *
100
+ * @example
101
+ * ```tsx
102
+ * const { preference, setPreference } = useColorMode();
103
+ *
104
+ * // Switch to dark mode
105
+ * setPreference("dark");
106
+ *
107
+ * // Follow system preference
108
+ * setPreference("system");
109
+ * ```
110
+ *
111
+ * @since 1.0.0
112
+ */
113
+ export declare type ColorModePreference = "system" | "light" | "dark";
114
+
115
+ /**
116
+ * ColorModeToggle - A zero-configuration color mode switcher with system, light, and dark modes
117
+ *
118
+ * A completely self-contained color mode toggle component that provides an intuitive dropdown
119
+ * interface for switching between system preference, light mode, and dark mode. Works
120
+ * immediately without any provider setup, context configuration, or additional dependencies.
121
+ *
122
+ * Built on top of Base UI components (Button + DropdownMenu) with the Minidev useColorMode
123
+ * hook for state management. Handles color mode persistence via cookies, system preference
124
+ * detection, real-time system changes, and synchronization across multiple instances.
125
+ *
126
+ * **Zero Configuration Design:**
127
+ * Just import and use - no providers, no setup, no configuration required. The component
128
+ * handles all color mode management internally and provides a complete solution out of the box.
129
+ *
130
+ * @example Basic usage (most common - icon button)
131
+ * ```tsx
132
+ * import { ColorModeToggle } from "@minidev.fun/ui/color-mode";
133
+ *
134
+ * // Just drop it in! Works immediately with zero setup
135
+ * function Header() {
136
+ * return (
137
+ * <header className="flex items-center justify-between p-4">
138
+ * <Logo />
139
+ * <ColorModeToggle />
140
+ * </header>
141
+ * );
142
+ * }
143
+ * ```
144
+ *
145
+ * @example With text labels for better UX
146
+ * ```tsx
147
+ * // Show current color mode name next to icon
148
+ * <ColorModeToggle size="default" showLabel />
149
+ *
150
+ * // In a settings panel
151
+ * <div className="space-y-4">
152
+ * <h3>Appearance</h3>
153
+ * <div className="flex items-center justify-between">
154
+ * <span>Color Mode</span>
155
+ * <ColorModeToggle size="sm" showLabel />
156
+ * </div>
157
+ * </div>
158
+ * ```
159
+ *
160
+ * @example Different visual variants
161
+ * ```tsx
162
+ * // Ghost button for minimalist toolbars
163
+ * <ColorModeToggle variant="ghost" />
164
+ *
165
+ * // Secondary style for subtle integration
166
+ * <ColorModeToggle variant="secondary" size="sm" />
167
+ *
168
+ * // Outline style (default) for clear boundaries
169
+ * <ColorModeToggle variant="outline" size="lg" />
170
+ * ```
171
+ *
172
+ * @param variant - Visual style variant inherited from Button component (default: "outline")
173
+ * @param size - Button size: xs, sm, default, lg. Renders as icon button when showLabel is false (default: "default")
174
+ * @param className - Additional CSS classes for custom styling
175
+ * @param showLabel - Whether to show color mode name text. When false, renders as square icon button (default: false)
176
+ * @param align - Dropdown menu alignment relative to trigger button (default: "end")
177
+ *
178
+ * @features
179
+ * - **Zero Configuration**: Import and use immediately - no setup required
180
+ * - **System Detection**: Automatically follows OS dark/light preference changes
181
+ * - **Perfect Persistence**: Color mode choice saved via cookies for SSR compatibility
182
+ * - **Multi-Instance Sync**: Multiple toggles stay perfectly synchronized
183
+ * - **Real-Time Updates**: Responds to system color mode changes while app is running
184
+ * - **Smooth Transitions**: CSS-based mode switching with no flash of wrong content
185
+ * - **Accessibility First**: Full keyboard navigation and screen reader support
186
+ * - **Touch Optimized**: Works perfectly on mobile and tablet devices
187
+ * - **Framework Agnostic**: Works with Next.js, Vite, Create React App, etc.
188
+ *
189
+ * @accessibility
190
+ * - **Keyboard Navigation**: Full support for Enter, Space, and Arrow keys
191
+ * - **Screen Reader Support**: Proper ARIA labels and role announcements
192
+ * - **Focus Management**: Visible focus indicators meeting WCAG 2.1 AA standards
193
+ * - **State Communication**: Current selection clearly indicated with checkmarks
194
+ *
195
+ * @see {@link useColorMode} - The underlying color mode management hook with event-driven architecture
196
+ * @see {@link ColorModeScript} - Component for FOUC prevention (required in root layout)
197
+ * @since 1.0.0
198
+ */
199
+ export declare function ColorModeToggle({ variant, size, className, showLabel, align, ...props }: ColorModeToggleProps): JSX.Element;
200
+
201
+ declare type ColorModeToggleProps = {
202
+ /**
203
+ * Button size - when showLabel is false, renders as a square icon button
204
+ * @default "default"
205
+ */
206
+ size?: ColorModeToggleSize;
207
+ /**
208
+ * Whether to show the current color mode name as text next to the icon
209
+ * @default false
210
+ */
211
+ showLabel?: boolean;
212
+ /**
213
+ * Alignment of the dropdown menu relative to the trigger button
214
+ * @default "end"
215
+ */
216
+ align?: "start" | "center" | "end";
217
+ } & Omit<React.ComponentProps<typeof Button>, "size">;
218
+
219
+ declare type ColorModeToggleSize = "xs" | "sm" | "default" | "lg";
220
+
221
+ /**
222
+ * Hook for managing application color mode with automatic system preference detection
223
+ *
224
+ * A complete color mode management solution that handles persistence, system preference
225
+ * detection, and DOM manipulation without requiring any context providers. Designed
226
+ * for applications that need simple light/dark mode switching with optional system
227
+ * preference following.
228
+ *
229
+ * This hook works in conjunction with the {@link ColorModeScript} component to provide
230
+ * a complete color mode solution with FOUC prevention and perfect synchronization
231
+ * across multiple instances.
232
+ *
233
+ * Features:
234
+ * - **Perfect synchronization**: Multiple hook instances stay in sync via custom events
235
+ * - **Automatic persistence**: Color mode preference saved to cookies across sessions
236
+ * - **System preference detection**: Automatically follows OS dark/light mode when set to "system"
237
+ * - **Live system updates**: Responds to system color mode changes in real-time
238
+ * - **SSR compatible**: Works safely during server-side rendering
239
+ * - **Type safe**: Full TypeScript support with proper type definitions
240
+ * - **No provider required**: Self-contained hook that works out of the box
241
+ *
242
+ * @example Basic color mode switching
243
+ * ```tsx
244
+ * function ColorModeToggle() {
245
+ * const { preference, mode, setPreference } = useColorMode();
246
+ *
247
+ * const toggleMode = () => {
248
+ * setPreference(mode === "dark" ? "light" : "dark");
249
+ * };
250
+ *
251
+ * return (
252
+ * <button onClick={toggleMode}>
253
+ * Switch to {mode === "dark" ? "light" : "dark"} mode
254
+ * </button>
255
+ * );
256
+ * }
257
+ * ```
258
+ *
259
+ * @example Color mode selector dropdown
260
+ * ```tsx
261
+ * function ColorModeSelector() {
262
+ * const { preference, setPreference } = useColorMode();
263
+ *
264
+ * return (
265
+ * <select value={preference} onChange={(e) => setPreference(e.target.value as ColorModePreference)}>
266
+ * <option value="system">Follow system</option>
267
+ * <option value="light">Light mode</option>
268
+ * <option value="dark">Dark mode</option>
269
+ * </select>
270
+ * );
271
+ * }
272
+ * ```
273
+ *
274
+ * @returns Object containing current color mode state and setter function
275
+ * @returns returns.preference - The user's selected color mode preference
276
+ * @returns returns.mode - The actual color mode currently applied (always "light" or "dark")
277
+ * @returns returns.setPreference - Function to change the color mode preference
278
+ *
279
+ * @see {@link ColorModePreference} - Available color mode preference options
280
+ * @see {@link ColorModeScript} - Component for FOUC prevention
281
+ * @see {@link ColorModeToggle} - UI component for color mode switching
282
+ * @since 1.0.0
283
+ */
284
+ export declare function useColorMode(): {
285
+ preference: ColorModePreference;
286
+ mode: "dark" | "light";
287
+ setPreference: (newPreference: ColorModePreference) => void;
288
+ };
289
+
290
+ export { }
package/dist/input-group.d.ts ADDED
@@ -0,0 +1,106 @@
1
+ import { Button as Button_2 } from '@base-ui/react/button';
2
+ import { ClassProp } from 'class-variance-authority/types';
3
+ import { JSX } from 'react/jsx-runtime';
4
+ import * as React_2 from 'react';
5
+ import { VariantProps } from 'class-variance-authority';
6
+
7
+ /**
8
+ * Versatile button component with multiple visual variants and sizes.
9
+ *
10
+ * Supports icon placement via `data-icon="inline-start"` or `data-icon="inline-end"` attributes
11
+ * on child elements. Use the `render` prop to compose with other components or change the
12
+ * underlying element while maintaining button semantics.
13
+ *
14
+ * @example
15
+ * ```tsx
16
+ * // Basic button
17
+ * <Button variant="default">Click me</Button>
18
+ *
19
+ * // With icon
20
+ * <Button>
21
+ * <PlusIcon data-icon="inline-start" />
22
+ * Create
23
+ * </Button>
24
+ *
25
+ * // Icon only
26
+ * <Button size="icon" aria-label="Settings">
27
+ * <SettingsIcon />
28
+ * </Button>
29
+ *
30
+ * // Custom element
31
+ * <Button render={<a href="/login" />}>Sign in</Button>
32
+ * ```
33
+ */
34
+ declare function Button({ className, variant, size, ...props }: ButtonProps): JSX.Element;
35
+
36
+ /**
37
+ * Props for the Button component.
38
+ * Combines Base UI Button props with variant styling options.
39
+ */
40
+ declare type ButtonProps = Button_2.Props & VariantProps<typeof buttonVariants>;
41
+
42
+ declare const buttonVariants: (props?: ({
43
+ variant?: "link" | "default" | "outline" | "success" | "destructive" | "info" | "primary" | "secondary" | "ghost" | "warning" | null | undefined;
44
+ size?: "default" | "icon" | "sm" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
45
+ } & ClassProp) | undefined) => string;
46
+
47
+ /**
48
+ * Container for input with addons (icons, text, buttons) at start/end.
49
+ * Manages focus ring, validation states, and addon alignment.
50
+ */
51
+ export declare function InputGroup({ className, ...props }: InputGroupProps): JSX.Element;
52
+
53
+ /**
54
+ * Addon container for icons, text, or buttons at input start/end.
55
+ * Clicking the addon focuses the input (unless clicking a button).
56
+ */
57
+ export declare function InputGroupAddon({ className, align, ...props }: InputGroupAddonProps): JSX.Element;
58
+
59
+ export declare type InputGroupAddonProps = React_2.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>;
60
+
61
+ export declare const inputGroupAddonVariants: (props?: ({
62
+ align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
63
+ } & ClassProp) | undefined) => string;
64
+
65
+ /**
66
+ * Button sized for use within InputGroupAddon.
67
+ * Defaults to ghost variant and extra-small size.
68
+ */
69
+ export declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonProps): JSX.Element;
70
+
71
+ export declare type InputGroupButtonProps = Omit<React_2.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
72
+ /** Button type. @default "button" */
73
+ type?: "button" | "submit" | "reset";
74
+ };
75
+
76
+ export declare const inputGroupButtonVariants: (props?: ({
77
+ size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
78
+ } & ClassProp) | undefined) => string;
79
+
80
+ /**
81
+ * Input styled for use within InputGroup.
82
+ * Removes border/shadow/ring to integrate with group container styling.
83
+ */
84
+ export declare function InputGroupInput({ className, ...props }: InputGroupInputProps): JSX.Element;
85
+
86
+ export declare type InputGroupInputProps = React_2.ComponentProps<"input">;
87
+
88
+ export declare type InputGroupProps = React_2.ComponentProps<"div">;
89
+
90
+ /**
91
+ * Text label/prefix/suffix for use within InputGroupAddon.
92
+ * Commonly used for URL schemes (https://), units (USD, MB), or format indicators (@, /).
93
+ */
94
+ export declare function InputGroupText({ className, ...props }: InputGroupTextProps): JSX.Element;
95
+
96
+ /**
97
+ * Textarea styled for use within InputGroup.
98
+ * Removes border/shadow/ring to integrate with group container styling.
99
+ */
100
+ export declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): JSX.Element;
101
+
102
+ export declare type InputGroupTextareaProps = React_2.ComponentProps<"textarea">;
103
+
104
+ export declare type InputGroupTextProps = React_2.ComponentProps<"span">;
105
+
106
+ export { }
package/dist/input-otp.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ import { JSX } from 'react/jsx-runtime';
2
+ import { OTPInput } from 'input-otp';
3
+ import * as React_2 from 'react';
4
+
5
+ /**
6
+ * One-time password input with individual character slots.
7
+ * Built on input-otp library with styled slots and separators.
8
+ */
9
+ export declare function InputOTP({ className, containerClassName, ...props }: InputOTPProps): JSX.Element;
10
+
11
+ /**
12
+ * Groups multiple InputOTPSlot components together.
13
+ * Supports error state via aria-invalid.
14
+ */
15
+ export declare function InputOTPGroup({ className, ...props }: InputOTPGroupProps): JSX.Element;
16
+
17
+ export declare type InputOTPGroupProps = React_2.ComponentProps<"div">;
18
+
19
+ export declare type InputOTPProps = React_2.ComponentProps<typeof OTPInput> & {
20
+ /** Additional class names for the container element. */
21
+ containerClassName?: string;
22
+ };
23
+
24
+ /**
25
+ * Visual separator between InputOTPGroup components.
26
+ * Renders a minus icon by default.
27
+ */
28
+ export declare function InputOTPSeparator({ ...props }: InputOTPSeparatorProps): JSX.Element;
29
+
30
+ export declare type InputOTPSeparatorProps = React_2.ComponentProps<"div">;
31
+
32
+ /**
33
+ * Individual character slot for OTP input.
34
+ * Displays current character, active state, and animated caret.
35
+ */
36
+ export declare function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps): JSX.Element;
37
+
38
+ export declare type InputOTPSlotProps = React_2.ComponentProps<"div"> & {
39
+ /** Zero-based index of this slot in the OTP sequence. */
40
+ index: number;
41
+ };
42
+
43
+ export { }
package/dist/input.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { JSX } from 'react/jsx-runtime';
2
+ import * as React_2 from 'react';
3
+
4
+ /**
5
+ * Text input field with support for all HTML input types.
6
+ *
7
+ * Supports text, email, password, number, tel, url, search, date, time, file, and other input types.
8
+ * Includes built-in validation styling via `aria-invalid` attribute.
9
+ */
10
+ export declare function Input({ className, type, ...props }: InputProps): JSX.Element;
11
+
12
+ export declare type InputProps = React_2.ComponentProps<"input">;
13
+
14
+ export { }
package/dist/item.d.ts ADDED
@@ -0,0 +1,101 @@
1
+ import { ClassProp } from 'class-variance-authority/types';
2
+ import { JSX } from 'react/jsx-runtime';
3
+ import * as React_2 from 'react';
4
+ import { Separator as Separator_2 } from '@base-ui/react/separator';
5
+ import { useRender } from '@base-ui/react/use-render';
6
+ import { VariantProps } from 'class-variance-authority';
7
+
8
+ /**
9
+ * Flexible list item component for displaying structured content.
10
+ * Use `render` prop to customize the underlying element (e.g., `<a>`, `<button>`).
11
+ */
12
+ export declare function Item({ className, variant, size, render, ...props }: ItemProps): React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>>;
13
+
14
+ /**
15
+ * Container for action buttons or controls.
16
+ */
17
+ export declare function ItemActions({ className, ...props }: ItemActionsProps): JSX.Element;
18
+
19
+ export declare type ItemActionsProps = React_2.ComponentProps<"div">;
20
+
21
+ /**
22
+ * Main content area for title and description.
23
+ * Flexes to fill available space.
24
+ */
25
+ export declare function ItemContent({ className, ...props }: ItemContentProps): JSX.Element;
26
+
27
+ export declare type ItemContentProps = React_2.ComponentProps<"div">;
28
+
29
+ /**
30
+ * Secondary description text.
31
+ * Automatically truncates after 2 lines.
32
+ */
33
+ export declare function ItemDescription({ className, ...props }: ItemDescriptionProps): JSX.Element;
34
+
35
+ export declare type ItemDescriptionProps = React_2.ComponentProps<"p">;
36
+
37
+ /**
38
+ * Full-width footer section for additional information.
39
+ */
40
+ export declare function ItemFooter({ className, ...props }: ItemFooterProps): JSX.Element;
41
+
42
+ export declare type ItemFooterProps = React_2.ComponentProps<"div">;
43
+
44
+ /**
45
+ * Container for organizing related items in a vertical list.
46
+ * Automatically adjusts gap based on child item sizes.
47
+ */
48
+ export declare function ItemGroup({ className, ...props }: ItemGroupProps): JSX.Element;
49
+
50
+ export declare type ItemGroupProps = React_2.ComponentProps<"div">;
51
+
52
+ /**
53
+ * Full-width header section for complex item layouts.
54
+ */
55
+ export declare function ItemHeader({ className, ...props }: ItemHeaderProps): JSX.Element;
56
+
57
+ export declare type ItemHeaderProps = React_2.ComponentProps<"div">;
58
+
59
+ /**
60
+ * Media container for icons, images, or avatars in an item.
61
+ * Automatically aligns with description text when present.
62
+ */
63
+ export declare function ItemMedia({ className, variant, ...props }: ItemMediaProps): JSX.Element;
64
+
65
+ export declare type ItemMediaProps = React_2.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>;
66
+
67
+ declare const itemMediaVariants: (props?: ({
68
+ variant?: "image" | "default" | "icon" | null | undefined;
69
+ } & ClassProp) | undefined) => string;
70
+
71
+ export declare type ItemProps = useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>;
72
+
73
+ /**
74
+ * Horizontal separator for dividing items within an ItemGroup.
75
+ */
76
+ export declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): JSX.Element;
77
+
78
+ export declare type ItemSeparatorProps = React_2.ComponentProps<typeof Separator>;
79
+
80
+ /**
81
+ * Title text with medium weight.
82
+ * Supports inline badges and icons.
83
+ */
84
+ export declare function ItemTitle({ className, ...props }: ItemTitleProps): JSX.Element;
85
+
86
+ export declare type ItemTitleProps = React_2.ComponentProps<"div">;
87
+
88
+ declare const itemVariants: (props?: ({
89
+ variant?: "default" | "outline" | "muted" | null | undefined;
90
+ size?: "default" | "sm" | "xs" | null | undefined;
91
+ } & ClassProp) | undefined) => string;
92
+
93
+ /**
94
+ * Visual divider for separating content sections.
95
+ * Supports both horizontal (default) and vertical orientations.
96
+ */
97
+ declare function Separator({ className, orientation, ...props }: SeparatorProps): JSX.Element;
98
+
99
+ declare type SeparatorProps = Separator_2.Props;
100
+
101
+ export { }
package/dist/kbd.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import { JSX } from 'react/jsx-runtime';
2
+
3
+ /**
4
+ * Keyboard key display component for showing keyboard shortcuts and key combinations.
5
+ * Supports text and icon content (e.g., Command, Arrow keys).
6
+ */
7
+ export declare function Kbd({ className, ...props }: KbdProps): JSX.Element;
8
+
9
+ /**
10
+ * Container for grouping multiple Kbd components to represent key combinations.
11
+ * Use for shortcuts like Cmd+K or sequential keys like G→H.
12
+ */
13
+ export declare function KbdGroup({ className, ...props }: KbdGroupProps): JSX.Element;
14
+
15
+ export declare type KbdGroupProps = React.ComponentProps<"div">;
16
+
17
+ export declare type KbdProps = React.ComponentProps<"kbd">;
18
+
19
+ export { }
package/dist/label.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { JSX } from 'react/jsx-runtime';
2
+ import * as React_2 from 'react';
3
+
4
+ /**
5
+ * Accessible label component that associates with form controls.
6
+ * Automatically styles for disabled states via peer and group data attributes.
7
+ */
8
+ export declare function Label({ className, ...props }: LabelProps): JSX.Element;
9
+
10
+ export declare type LabelProps = React_2.ComponentProps<"label">;
11
+
12
+ export { }
package/dist/lib/utils.d.ts CHANGED
@@ -1,23 +1,2 @@
1
- import { ClassValue } from 'clsx';
2
- /**
3
- * Merges class names with Tailwind CSS conflict resolution.
4
- * Combines `clsx` (conditional classes) + `tailwind-merge` (deduplication).
5
- *
6
- * @param inputs - Class values: strings, arrays, objects, or conditionals
7
- * @returns Merged and deduplicated class string
8
- *
9
- * @example
10
- * ```tsx
11
- * // Conditional classes
12
- * cn("px-4 py-2", isActive && "bg-primary", className)
13
- *
14
- * // Tailwind conflict resolution (last wins)
15
- * cn("text-red-500", "text-blue-500") // → "text-blue-500"
16
- * cn("px-4 py-2", "px-8") // → "px-8 py-2"
17
- *
18
- * // Objects and arrays
19
- * cn({ "opacity-50": disabled }, ["flex", "items-center"])
20
- * ```
21
- */
22
- export declare function cn(...inputs: ClassValue[]): string;
23
- //# sourceMappingURL=utils.d.ts.map
1
+ export * from '../src/lib/utils'
2
+ export {}