@datum-cloud/datum-ui 0.3.0-alpha.ffa8392 → 0.4.0

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 (193) hide show
  1. package/README.md +114 -49
  2. package/dist/app-navigation/index.mjs +12 -0
  3. package/dist/app-navigation-DsCKgfPe.mjs +416 -0
  4. package/dist/autocomplete/index.mjs +5 -5
  5. package/dist/{autocomplete-e33EmvBu.mjs → autocomplete-DRB_kSVx.mjs} +3 -3
  6. package/dist/avatar/index.mjs +4 -0
  7. package/dist/avatar-DyLq0xkt.mjs +30 -0
  8. package/dist/avatar-stack/index.mjs +4 -3
  9. package/dist/{avatar-stack-Ci0cnjxv.mjs → avatar-stack-BT0dBswq.mjs} +2 -27
  10. package/dist/badge/index.mjs +1 -1
  11. package/dist/breadcrumb/index.mjs +2 -2
  12. package/dist/{breadcrumb-BGYJgom_.mjs → breadcrumb-CJNaYyk1.mjs} +1 -1
  13. package/dist/button/index.mjs +2 -2
  14. package/dist/{button-C1wRfGtT.mjs → button-0N61fmAR.mjs} +1 -1
  15. package/dist/{button-AzpnV-WB.mjs → button-D6AORsOz.mjs} +1 -1
  16. package/dist/button-group/index.mjs +3 -3
  17. package/dist/{button-group-C1IB2K5s.mjs → button-group-BDk8btAy.mjs} +2 -2
  18. package/dist/calendar/index.mjs +3 -3
  19. package/dist/{calendar-DlIHeWb0.mjs → calendar-BtfraIvX.mjs} +2 -2
  20. package/dist/{calendar-date-picker-BBAg78Lg.mjs → calendar-date-picker-B9mxJM7f.mjs} +6 -5
  21. package/dist/card/index.mjs +2 -2
  22. package/dist/{card-3Kd0VdNf.mjs → card-BiHXFt4s.mjs} +1 -1
  23. package/dist/chart/index.mjs +2 -2
  24. package/dist/{chart-BZqUKpkh.mjs → chart-CL0i-xIt.mjs} +1 -1
  25. package/dist/checkbox/index.mjs +2 -3
  26. package/dist/checkbox-CQrjygFt.mjs +34 -0
  27. package/dist/command/index.mjs +3 -3
  28. package/dist/{command-DQlO6uTL.mjs → command-DVroicgn.mjs} +2 -2
  29. package/dist/components/base/avatar/index.d.ts +2 -0
  30. package/dist/components/base/avatar/index.d.ts.map +1 -0
  31. package/dist/components/base/index.d.ts +2 -0
  32. package/dist/components/base/index.d.ts.map +1 -1
  33. package/dist/components/base/sidebar/index.d.ts +2 -0
  34. package/dist/components/base/sidebar/index.d.ts.map +1 -0
  35. package/dist/components/{features → base}/sidebar/sidebar.d.ts +1 -1
  36. package/dist/components/base/sidebar/sidebar.d.ts.map +1 -0
  37. package/dist/components/base/skeleton/index.d.ts +1 -1
  38. package/dist/components/base/skeleton/index.d.ts.map +1 -1
  39. package/dist/components/base/skeleton/skeleton.d.ts +22 -0
  40. package/dist/components/base/skeleton/skeleton.d.ts.map +1 -0
  41. package/dist/components/base/typography/typography.d.ts +2 -2
  42. package/dist/components/features/app-navigation/app-navigation.d.ts +14 -0
  43. package/dist/components/features/app-navigation/app-navigation.d.ts.map +1 -0
  44. package/dist/components/features/app-navigation/index.d.ts +4 -0
  45. package/dist/components/features/app-navigation/index.d.ts.map +1 -0
  46. package/dist/components/features/{sidebar/nav-main.d.ts → app-navigation/nav-menu.d.ts} +3 -3
  47. package/dist/components/features/app-navigation/nav-menu.d.ts.map +1 -0
  48. package/dist/components/features/calendar-date-picker/calendar-date-picker.d.ts +2 -1
  49. package/dist/components/features/calendar-date-picker/calendar-date-picker.d.ts.map +1 -1
  50. package/dist/components/features/data-table/components/active-filters.d.ts +5 -0
  51. package/dist/components/features/data-table/components/active-filters.d.ts.map +1 -0
  52. package/dist/components/features/data-table/components/column-header.d.ts.map +1 -1
  53. package/dist/components/features/data-table/components/content.d.ts.map +1 -1
  54. package/dist/components/features/data-table/components/loading.d.ts.map +1 -1
  55. package/dist/components/features/data-table/components/pagination.d.ts.map +1 -1
  56. package/dist/components/features/data-table/components/search.d.ts +1 -1
  57. package/dist/components/features/data-table/components/search.d.ts.map +1 -1
  58. package/dist/components/features/data-table/core/client-provider.d.ts +5 -7
  59. package/dist/components/features/data-table/core/client-provider.d.ts.map +1 -1
  60. package/dist/components/features/data-table/core/data-table-context.d.ts +23 -0
  61. package/dist/components/features/data-table/core/data-table-context.d.ts.map +1 -1
  62. package/dist/components/features/data-table/core/filter-engine.d.ts +5 -0
  63. package/dist/components/features/data-table/core/filter-engine.d.ts.map +1 -1
  64. package/dist/components/features/data-table/core/server-provider.d.ts +4 -7
  65. package/dist/components/features/data-table/core/server-provider.d.ts.map +1 -1
  66. package/dist/components/features/data-table/core/store.d.ts.map +1 -1
  67. package/dist/components/features/data-table/data-table.d.ts +1 -0
  68. package/dist/components/features/data-table/data-table.d.ts.map +1 -1
  69. package/dist/components/features/data-table/filters/checkbox-filter.d.ts +1 -1
  70. package/dist/components/features/data-table/filters/checkbox-filter.d.ts.map +1 -1
  71. package/dist/components/features/data-table/filters/date-picker-filter.d.ts +1 -1
  72. package/dist/components/features/data-table/filters/date-picker-filter.d.ts.map +1 -1
  73. package/dist/components/features/data-table/filters/select-filter.d.ts +1 -1
  74. package/dist/components/features/data-table/filters/select-filter.d.ts.map +1 -1
  75. package/dist/components/features/data-table/hooks/index.d.ts +1 -1
  76. package/dist/components/features/data-table/hooks/index.d.ts.map +1 -1
  77. package/dist/components/features/data-table/hooks/use-data-table-client.d.ts +11 -10
  78. package/dist/components/features/data-table/hooks/use-data-table-client.d.ts.map +1 -1
  79. package/dist/components/features/data-table/hooks/use-data-table-server.d.ts +12 -17
  80. package/dist/components/features/data-table/hooks/use-data-table-server.d.ts.map +1 -1
  81. package/dist/components/features/data-table/hooks/use-selectors.d.ts +4 -33
  82. package/dist/components/features/data-table/hooks/use-selectors.d.ts.map +1 -1
  83. package/dist/components/features/data-table/index.d.ts +2 -4
  84. package/dist/components/features/data-table/index.d.ts.map +1 -1
  85. package/dist/components/features/data-table/types.d.ts +45 -31
  86. package/dist/components/features/data-table/types.d.ts.map +1 -1
  87. package/dist/components/features/index.d.ts +1 -1
  88. package/dist/components/features/index.d.ts.map +1 -1
  89. package/dist/data-table/index.mjs +659 -414
  90. package/dist/date-picker/index.mjs +8 -8
  91. package/dist/dialog/index.mjs +3 -3
  92. package/dist/{dialog-B2EZJW-q.mjs → dialog-B0B3Kbfk.mjs} +1 -1
  93. package/dist/{dialog-Bm4trnic.mjs → dialog-DdrHeboM.mjs} +1 -1
  94. package/dist/dropdown/index.mjs +1 -1
  95. package/dist/{dropdown-DLZXinlT.mjs → dropdown-Cdx7rOKv.mjs} +1 -1
  96. package/dist/{dropdown-menu-Xahj42Gr.mjs → dropdown-menu-CdShrDz_.mjs} +1 -1
  97. package/dist/dropzone/index.mjs +3 -3
  98. package/dist/{dropzone-CGyjGnER.mjs → dropzone-B6kSN3DY.mjs} +3 -3
  99. package/dist/empty-content/index.mjs +1 -1
  100. package/dist/{empty-content-ByvwjHUs.mjs → empty-content-B1lwLr40.mjs} +1 -1
  101. package/dist/form/index.mjs +14 -14
  102. package/dist/grid/index.mjs +1 -1
  103. package/dist/hooks/index.mjs +2 -2
  104. package/dist/hover-card/index.mjs +2 -2
  105. package/dist/{hover-card-BNrHtWy6.mjs → hover-card-CEIauuie.mjs} +1 -1
  106. package/dist/icons/index.mjs +2 -2
  107. package/dist/index.mjs +65 -64
  108. package/dist/input/index.mjs +3 -3
  109. package/dist/{input-D241oNEm.mjs → input-CYFN0Ap2.mjs} +1 -1
  110. package/dist/{input-C-ZmsHkk.mjs → input-DEMoi_8F.mjs} +1 -1
  111. package/dist/input-group/index.mjs +5 -5
  112. package/dist/{input-group-uobp64zr.mjs → input-group-DJgYpOlq.mjs} +4 -4
  113. package/dist/input-number/index.mjs +4 -4
  114. package/dist/{input-number-CEMgBk8-.mjs → input-number-Cuy9CCg_.mjs} +3 -3
  115. package/dist/input-with-addons/index.mjs +1 -1
  116. package/dist/label/index.mjs +2 -3
  117. package/dist/{label-byipFGok.mjs → label-mOg07fuQ.mjs} +12 -1
  118. package/dist/{link-button-TIF2Zdrk.mjs → link-button-Cby0p4LW.mjs} +1 -1
  119. package/dist/loader-overlay/index.mjs +1 -1
  120. package/dist/{loader-overlay-CbxcjyHV.mjs → loader-overlay-8IWX_1Ga.mjs} +1 -1
  121. package/dist/map/index.mjs +12 -12
  122. package/dist/{map-DupFPkJT.mjs → map-CaI1EshG.mjs} +8 -8
  123. package/dist/more-actions/index.mjs +3 -3
  124. package/dist/{more-actions-D6OyqZQS.mjs → more-actions-BO5ikUxY.mjs} +3 -3
  125. package/dist/page-title/index.mjs +1 -1
  126. package/dist/popover/index.mjs +2 -2
  127. package/dist/{popover-CYzXdp9q.mjs → popover-ugw5MpuT.mjs} +1 -1
  128. package/dist/radio-group/index.mjs +2 -2
  129. package/dist/{radio-group-WZCIDQCH.mjs → radio-group-_gMymwnb.mjs} +1 -1
  130. package/dist/select/index.mjs +2 -2
  131. package/dist/{select-BznmyqBr.mjs → select-BZOKWjlH.mjs} +2 -2
  132. package/dist/separator/index.mjs +2 -2
  133. package/dist/{separator-T2ppyD-8.mjs → separator-BzyALya2.mjs} +1 -1
  134. package/dist/sheet/index.mjs +3 -3
  135. package/dist/{sheet-Bmayi68h.mjs → sheet-BX6lae56.mjs} +1 -1
  136. package/dist/{sheet-b9V9soz8.mjs → sheet-DAcFjaGw.mjs} +1 -1
  137. package/dist/sidebar/index.mjs +9 -10
  138. package/dist/{sidebar-D2zE7rPy.mjs → sidebar-B3EV33mG.mjs} +11 -420
  139. package/dist/skeleton/index.mjs +3 -2
  140. package/dist/{skeleton-D3qW_KvG.mjs → skeleton-2vQ0vFQk.mjs} +1 -1
  141. package/dist/skeleton-BgOwIgE0.mjs +28 -0
  142. package/dist/spinner/index.mjs +2 -2
  143. package/dist/{spinner-CKTGKv5n.mjs → spinner-osyXAlhr.mjs} +1 -1
  144. package/dist/stepper/index.mjs +3 -3
  145. package/dist/{stepper-B07hPGG7.mjs → stepper-BMsn7I78.mjs} +1 -1
  146. package/dist/styles/root.css +3 -0
  147. package/dist/switch/index.mjs +2 -2
  148. package/dist/{switch-CujyyOi6.mjs → switch-C60FpEal.mjs} +1 -1
  149. package/dist/table/index.mjs +2 -2
  150. package/dist/{table-fZEvpdD-.mjs → table-Cl3UzIhI.mjs} +1 -1
  151. package/dist/tabs/index.mjs +1 -1
  152. package/dist/tag-input/index.mjs +3 -3
  153. package/dist/{tag-input-BI8IRBDH.mjs → tag-input-DR2gukhL.mjs} +3 -3
  154. package/dist/task-queue/index.mjs +5 -5
  155. package/dist/{task-queue-dropdown-D6k067_W.mjs → task-queue-dropdown-C9KHKbGh.mjs} +8 -8
  156. package/dist/textarea/index.mjs +3 -3
  157. package/dist/{textarea-BSkDKiej.mjs → textarea-CVo38n3S.mjs} +1 -1
  158. package/dist/{textarea-BZ85VFsJ.mjs → textarea-CZF5n57i.mjs} +1 -1
  159. package/dist/theme/index.mjs +1 -1
  160. package/dist/{to-api-format-CXQ7knV4.mjs → to-api-format-naIpF-NI.mjs} +7 -7
  161. package/dist/toast/index.mjs +1 -1
  162. package/dist/tooltip/index.mjs +2 -2
  163. package/dist/{tooltip-CbCWKEzu.mjs → tooltip-CuX2jQA9.mjs} +1 -1
  164. package/dist/typography/index.mjs +1 -1
  165. package/dist/{use-copy-to-clipboard-CC2hhyYI.mjs → use-copy-to-clipboard-n29wJwvW.mjs} +1 -1
  166. package/dist/{use-stepper-CU75TdjZ.mjs → use-stepper-DigoyHhX.mjs} +16 -16
  167. package/dist/visually-hidden/index.mjs +1 -1
  168. package/package.json +88 -77
  169. package/dist/checkbox-DB5_3E_l.mjs +0 -22
  170. package/dist/checkbox-DMC1Mhaw.mjs +0 -17
  171. package/dist/components/features/data-table/hooks/use-data-table-context.d.ts +0 -2
  172. package/dist/components/features/data-table/hooks/use-data-table-context.d.ts.map +0 -1
  173. package/dist/components/features/sidebar/app-sidebar.d.ts +0 -14
  174. package/dist/components/features/sidebar/app-sidebar.d.ts.map +0 -1
  175. package/dist/components/features/sidebar/index.d.ts +0 -4
  176. package/dist/components/features/sidebar/index.d.ts.map +0 -1
  177. package/dist/components/features/sidebar/nav-main.d.ts.map +0 -1
  178. package/dist/components/features/sidebar/sidebar.d.ts.map +0 -1
  179. package/dist/label-ClzLBWRT.mjs +0 -16
  180. /package/dist/{badge-bFgeYceE.mjs → badge-BgFj4Nsc.mjs} +0 -0
  181. /package/dist/{col-Cg_2sTDA.mjs → col-C9PDhvm5.mjs} +0 -0
  182. /package/dist/{icon-wrapper-9ticVbRL.mjs → icon-wrapper-BBK4z4tj.mjs} +0 -0
  183. /package/dist/{input-with-addons-DzuyGa6G.mjs → input-with-addons-B8rzNhpq.mjs} +0 -0
  184. /package/dist/{map-leaflet-imports-CgEyVRnp.mjs → map-leaflet-imports-J7w1V7mh.mjs} +0 -0
  185. /package/dist/{page-title-CrYQ091u.mjs → page-title-DWteBy1E.mjs} +0 -0
  186. /package/dist/{spinner.icon-Bg8zgGh0.mjs → spinner.icon-C0MbtgqX.mjs} +0 -0
  187. /package/dist/{tabs-B7cW59gB.mjs → tabs-DJU7JA3h.mjs} +0 -0
  188. /package/dist/{theme.provider-BG3cS9xe.mjs → theme.provider-TUHlMsjM.mjs} +0 -0
  189. /package/dist/{typography-DdrxIJMd.mjs → typography-Iap9fU5P.mjs} +0 -0
  190. /package/dist/{use-debounce-Dc95PFRX.mjs → use-debounce-MnfjH51L.mjs} +0 -0
  191. /package/dist/{use-toast-BLBGnOC3.mjs → use-toast-By9HuFwP.mjs} +0 -0
  192. /package/dist/{utils-Bfgoe-Gm.mjs → utils-DJboNGQM.mjs} +0 -0
  193. /package/dist/{visuallyhidden-CfBnXfvh.mjs → visuallyhidden-BJsQCmg-.mjs} +0 -0
package/README.md CHANGED
@@ -63,7 +63,7 @@ import { Dialog } from '@datum-cloud/datum-ui/dialog'
63
63
  import { Form, FormField, FormInput } from '@datum-cloud/datum-ui/form'
64
64
  ```
65
65
 
66
- This keeps your bundle small and means you only install peer dependencies for the components you actually use.
66
+ This keeps your bundle small. Some components require additional dependencies — check the component tables below for what to install.
67
67
 
68
68
  ### Shared Exports
69
69
 
@@ -82,7 +82,7 @@ This keeps your bundle small and means you only install peer dependencies for th
82
82
 
83
83
  Some components with shared heavy dependencies are grouped under a single subpath:
84
84
 
85
- | Import Path | Includes | Peer Dependencies |
85
+ | Import Path | Includes | Required Dependencies |
86
86
  | ----------------------------------- | ------------------------------------------ | --------------------------------------------- |
87
87
  | `@datum-cloud/datum-ui/date-picker` | `CalendarDatePicker`, `TimeRangePicker` | `react-day-picker`, `date-fns`, `date-fns-tz` |
88
88
  | `@datum-cloud/datum-ui/map` | `Map`, `PlaceAutocomplete`, + map controls | `leaflet`, `react-leaflet`, + leaflet plugins |
@@ -94,73 +94,98 @@ Some components with shared heavy dependencies are grouped under a single subpat
94
94
 
95
95
  ### Base Components
96
96
 
97
- Thin wrappers around shadcn/Radix primitives with Datum styling.
97
+ Thin wrappers around shadcn/Radix primitives with Datum styling. **Radix UI dependencies are bundled** — no additional installation required for these components.
98
98
 
99
- | Component | Peer Dependencies | Description |
99
+ | Component | Additional Dependencies | Description |
100
100
  | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
101
101
  | `Alert`, `AlertTitle`, `AlertDescription` | — | Status alert banners |
102
+ | `Avatar`, `AvatarImage`, `AvatarFallback` | — | User profile image with fallback support |
102
103
  | `Badge` | — | Labels and status indicators with `type` and `theme` variants |
103
104
  | `Breadcrumb`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbSeparator`, `BreadcrumbList`, `BreadcrumbPage`, `BreadcrumbEllipsis` | — | Navigation breadcrumbs |
104
- | `Button` | `@radix-ui/react-slot` | Button with `type` (primary/secondary/danger/warning/success) and `theme` (solid/outline/ghost/link) variants |
105
+ | `Button` | — | Button with `type` (primary/secondary/danger/warning/success) and `theme` (solid/outline/ghost/link) variants |
105
106
  | `ButtonGroup` | — | Group buttons horizontally |
106
107
  | `Calendar` | `react-day-picker` | Date picker calendar |
107
108
  | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter` | — | Content container |
108
109
  | `Chart` (ChartContainer, ChartTooltip, etc.) | `recharts` | Data visualization wrapper |
109
- | `Checkbox` | `@radix-ui/react-checkbox` | Toggle checkbox |
110
- | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` | `@radix-ui/react-collapsible` | Expandable sections |
111
- | `Command`, `CommandInput`, `CommandList`, `CommandItem`, `CommandGroup` | `cmdk` | Command palette / search |
112
- | `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogClose` | `@radix-ui/react-dialog` | Modal dialog |
113
- | `HoverCard`, `HoverCardTrigger`, `HoverCardContent` | `@radix-ui/react-hover-card` | Hover-triggered popover |
110
+ | `Checkbox` | — | Toggle checkbox |
111
+ | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` | — | Expandable sections |
112
+ | `Command`, `CommandInput`, `CommandList`, `CommandItem`, `CommandGroup` | — | Command palette / search |
113
+ | `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogClose` | — | Modal dialog |
114
+ | `HoverCard`, `HoverCardTrigger`, `HoverCardContent` | — | Hover-triggered popover |
114
115
  | `Input` | — | Text input |
115
116
  | `InputGroup`, `InputGroupInput`, `InputGroupText` | — | Input with prefix/suffix elements |
116
- | `Label` | `@radix-ui/react-label` | Form label |
117
+ | `Label` | — | Form label |
117
118
  | `Map`, `MapTileLayer`, `MapMarker`, `MapPopup`, `MapTooltip`, `MapZoomControl`, `MapFullscreenControl`, `MapLayers`, `MapLayersControl`, `MapLayerGroup`, `MapCircle`, `MapPolygon`, `MapRectangle`, `MapPolyline`, `MapDrawControl`, `MapDrawMarker`, `MapDrawPolyline`, `MapDrawCircle`, `MapDrawPolygon`, `MapDrawEdit`, `MapDrawDelete`, `MapDrawUndo`, `MapLocateControl`, `MapSearchControl`, `MapControlContainer` | `leaflet`, `react-leaflet`, `leaflet-draw`, `leaflet.fullscreen`, `leaflet.markercluster`, `react-leaflet-markercluster` | Interactive map (SSR-safe, lazy-loaded) |
118
119
  | `PlaceAutocomplete` | — | Google Places address autocomplete |
119
- | `Popover`, `PopoverTrigger`, `PopoverContent` | `@radix-ui/react-popover` | Click-triggered popover |
120
- | `RadioGroup`, `RadioGroupItem` | `@radix-ui/react-radio-group` | Radio button group |
121
- | `Select`, `SelectTrigger`, `SelectContent`, `SelectItem`, `SelectValue`, `SelectGroup`, `SelectLabel`, `SelectSeparator` | `@radix-ui/react-select` | Dropdown select |
122
- | `Separator` | `@radix-ui/react-separator` | Visual divider |
123
- | `Sheet`, `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetTitle`, `SheetDescription`, `SheetFooter`, `SheetClose` | `@radix-ui/react-dialog` | Slide-out panel |
120
+ | `Popover`, `PopoverTrigger`, `PopoverContent` | — | Click-triggered popover |
121
+ | `RadioGroup`, `RadioGroupItem` | — | Radio button group |
122
+ | `Select`, `SelectTrigger`, `SelectContent`, `SelectItem`, `SelectValue`, `SelectGroup`, `SelectLabel`, `SelectSeparator` | — | Dropdown select |
123
+ | `Separator` | — | Visual divider |
124
+ | `Sheet`, `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetTitle`, `SheetDescription`, `SheetFooter`, `SheetClose` | — | Slide-out panel |
124
125
  | `Skeleton` | — | Loading placeholder |
125
126
  | `Spinner` | — | Loading spinner |
126
- | `Switch` | `@radix-ui/react-switch` | Toggle switch |
127
+ | `Switch` | — | Toggle switch |
127
128
  | `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableHead`, `TableRow`, `TableCell`, `TableCaption` | — | Data table |
128
- | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | `@radix-ui/react-tabs` | Tabbed interface |
129
+ | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | — | Tabbed interface |
129
130
  | `Textarea` | — | Multi-line text input |
130
- | `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider` | `@radix-ui/react-tooltip` | Hover tooltip |
131
+ | `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider` | — | Hover tooltip |
131
132
  | `Title`, `Text`, `Paragraph`, `Link`, `List`, `ListItem`, `Blockquote`, `Code` | — | Typography components with `level`, `size`, `weight`, `color`, `type` variants |
132
- | `VisuallyHidden` | `@radix-ui/react-visually-hidden` | Screen-reader only content |
133
+ | `VisuallyHidden` | — | Screen-reader only content |
133
134
 
134
135
  ### Feature Components
135
136
 
136
137
  Complex, fully-customized components with significant business logic.
137
138
 
138
- | Component | Peer Dependencies | Description |
139
- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ----------------------------------------- |
140
- | `Autocomplete` | `cmdk` | Search autocomplete input |
141
- | `AvatarStack` | `@radix-ui/react-avatar`, `@radix-ui/react-tooltip` | Stacked avatar display |
142
- | `CalendarDatePicker` | `react-day-picker`, `date-fns` | Date/range picker with presets |
143
- | `Dropdown`, `DropdownHeader`, `DropdownItem`, `DropdownSection` | `@radix-ui/react-dropdown-menu` | Dropdown menu |
144
- | `Dropzone` | `react-dropzone` | File drag-and-drop upload area |
145
- | `EmptyContent` | — | Empty state placeholder |
146
- | `FileInputButton` | — | File upload button |
147
- | `Form`, `FormField`, `FormInput`, `FormTextarea`, `FormSelect`, `FormCheckbox`, `FormSwitch`, `FormRadioGroup`, `FormFieldArray` | `@conform-to/react`, `@conform-to/zod`, `zod` | Form system with validation |
148
- | `Grid` | `@tanstack/react-virtual` | Virtualized data grid |
149
- | `InputNumber` | `react-number-format` | Numeric input with formatting |
150
- | `InputWithAddons` | — | Input with prefix/suffix addons |
151
- | `LoaderOverlay` | — | Full-screen loading overlay |
152
- | `MoreActions` | `@radix-ui/react-dropdown-menu` | Three-dot actions menu |
153
- | `NProgress` | `nprogress` | Page navigation progress bar |
154
- | `PageTitle` | — | Page header with breadcrumbs |
155
- | `Sidebar`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton` | — | App sidebar navigation |
156
- | `Stepper` | `@stepperize/react` | Multi-step wizard |
157
- | `TagInput` | — | Tag/chip input |
158
- | `TaskQueue`, `TaskQueueProvider`, `TaskQueueDropdown`, `TaskPanelHeader`, `TaskSummaryDialog` | — | Background task queue with progress UI |
159
- | `TimeRangePicker` | `date-fns`, `date-fns-tz` | Time range selector with timezone support |
160
- | `Toast`, `Toaster`, `useToast` | `sonner` | Toast notifications |
139
+ | Component | Additional Dependencies | Description |
140
+ | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ------------------------------------------ |
141
+ | `Autocomplete` | — | Search autocomplete input |
142
+ | `AvatarStack` | — | Stacked avatar display |
143
+ | `CalendarDatePicker` | `react-day-picker`, `date-fns` | Date/range picker with presets |
144
+ | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableToolbar`, `DataTableViewOptions` | `@tanstack/react-table` | Advanced data table with sorting/filtering |
145
+ | `Dropdown`, `DropdownHeader`, `DropdownItem`, `DropdownSection` | — | Dropdown menu |
146
+ | `Dropzone` | `react-dropzone` | File drag-and-drop upload area |
147
+ | `EmptyContent` | — | Empty state placeholder |
148
+ | `FileInputButton` | — | File upload button |
149
+ | `Form`, `FormField`, `FormInput`, `FormTextarea`, `FormSelect`, `FormCheckbox`, `FormSwitch`, `FormRadioGroup`, `FormFieldArray` | `@conform-to/react`, `@conform-to/zod`, `zod` | Form system with validation |
150
+ | `Grid` | `@tanstack/react-virtual` | Virtualized data grid |
151
+ | `InputNumber` | `react-number-format` | Numeric input with formatting |
152
+ | `InputWithAddons` | — | Input with prefix/suffix addons |
153
+ | `LoaderOverlay` | — | Full-screen loading overlay |
154
+ | `MoreActions` | — | Three-dot actions menu |
155
+ | `NProgress` | `nprogress` | Page navigation progress bar |
156
+ | `PageTitle` | — | Page header with breadcrumbs |
157
+ | `Sidebar`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton` | — | App sidebar navigation |
158
+ | `Stepper` | `@stepperize/react` | Multi-step wizard |
159
+ | `TagInput` | — | Tag/chip input |
160
+ | `TaskQueue`, `TaskQueueProvider`, `TaskQueueDropdown`, `TaskPanelHeader`, `TaskSummaryDialog` | — | Background task queue with progress UI |
161
+ | `TimeRangePicker` | `date-fns`, `date-fns-tz` | Time range selector with timezone support |
162
+ | `Toast`, `Toaster`, `useToast` | `sonner` | Toast notifications |
161
163
 
162
164
  ## Usage Examples
163
165
 
166
+ ### Avatar
167
+
168
+ ```tsx
169
+ import { Avatar, AvatarImage, AvatarFallback } from '@datum-cloud/datum-ui/avatar'
170
+
171
+ // With image and fallback
172
+ <Avatar>
173
+ <AvatarImage src="https://example.com/avatar.jpg" alt="User Name" />
174
+ <AvatarFallback>UN</AvatarFallback>
175
+ </Avatar>
176
+
177
+ // Custom size
178
+ <Avatar className="size-16">
179
+ <AvatarImage src="https://example.com/avatar.jpg" alt="User Name" />
180
+ <AvatarFallback className="text-lg">UN</AvatarFallback>
181
+ </Avatar>
182
+
183
+ // Fallback only (no image)
184
+ <Avatar>
185
+ <AvatarFallback>AB</AvatarFallback>
186
+ </Avatar>
187
+ ```
188
+
164
189
  ### Button
165
190
 
166
191
  ```tsx
@@ -317,24 +342,64 @@ const { theme, setTheme, resolvedTheme } = useTheme()
317
342
 
318
343
  ## Peer Dependencies
319
344
 
320
- All peer dependencies are **optional** — install only what you use.
345
+ ### Required
346
+
347
+ These dependencies are **required** to use datum-ui:
348
+
349
+ ```bash
350
+ npm install react react-dom tailwindcss lucide-react
351
+ ```
352
+
353
+ - **React 19+** and **React DOM 19+**: Framework requirements
354
+ - **Tailwind CSS v4** (v4.0.7+, v4.2.1+ recommended): Required for styling
355
+ - **lucide-react**: Icon library used throughout components
356
+
357
+ **All Radix UI packages are bundled** — you don't need to install them separately.
358
+
359
+ ### Optional (Component-Specific)
360
+
361
+ Many components require additional packages. Install only what you use:
321
362
 
322
363
  > Replace `npm install` with `yarn add`, `pnpm add`, or `bun add` for your package manager.
323
364
 
324
365
  ```bash
325
- # Forms
366
+ # Forms (Form, FormField, FormInput, etc.)
326
367
  npm install @conform-to/react @conform-to/zod zod
327
368
 
328
- # Maps
369
+ # Maps (Map, MapMarker, MapPopup, etc.)
329
370
  npm install leaflet react-leaflet leaflet-draw leaflet.fullscreen leaflet.markercluster react-leaflet-markercluster
330
371
 
331
- # Charts
372
+ # Charts (ChartContainer, ChartTooltip, etc.)
332
373
  npm install recharts
333
374
 
334
- # Date pickers
375
+ # Date pickers (Calendar, CalendarDatePicker, TimeRangePicker)
335
376
  npm install react-day-picker date-fns date-fns-tz
336
377
 
337
- # Animations
378
+ # File upload (Dropzone)
379
+ npm install react-dropzone
380
+
381
+ # Number formatting (InputNumber)
382
+ npm install react-number-format
383
+
384
+ # Stepper (multi-step flows)
385
+ npm install @stepperize/react
386
+
387
+ # Toast notifications (Toast, Toaster)
388
+ npm install sonner
389
+
390
+ # Progress bar (NProgress)
391
+ npm install nprogress
392
+
393
+ # Data grid (Grid - virtualized tables)
394
+ npm install @tanstack/react-virtual
395
+
396
+ # Data Table (DataTable component)
397
+ npm install @tanstack/react-table
398
+
399
+ # Data Table with URL state (optional)
400
+ npm install nuqs
401
+
402
+ # Animations (motion components)
338
403
  npm install motion
339
404
  ```
340
405
 
package/dist/app-navigation/index.mjs ADDED
@@ -0,0 +1,12 @@
1
+ import "../utils-DJboNGQM.mjs";
2
+ import "../separator-BzyALya2.mjs";
3
+ import "../button-D6AORsOz.mjs";
4
+ import "../collapsible-Dw71o2um.mjs";
5
+ import "../input-DEMoi_8F.mjs";
6
+ import "../sheet-DAcFjaGw.mjs";
7
+ import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, a as SidebarGroupAction, b as SidebarProvider, c as SidebarHeader, d as SidebarMenu, f as SidebarMenuAction, g as SidebarMenuSkeleton, h as SidebarMenuItem, i as SidebarGroup, l as SidebarInput, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, p as SidebarMenuBadge, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, u as SidebarInset, v as SidebarMenuSubButton, w as useSidebar, x as SidebarRail, y as SidebarMenuSubItem } from "../sidebar-B3EV33mG.mjs";
8
+ import "../skeleton-2vQ0vFQk.mjs";
9
+ import "../tooltip-CuX2jQA9.mjs";
10
+ import { n as NavMenu, t as AppNavigation } from "../app-navigation-DsCKgfPe.mjs";
11
+
12
+ export { AppNavigation, NavMenu, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };