@devalok/shilp-sutra 0.30.0 → 0.32.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 (266) hide show
  1. package/README.md +82 -239
  2. package/dist/_chunks/badge-group.js +123 -171
  3. package/dist/_chunks/document-preview.js +92 -0
  4. package/dist/_chunks/file-preview.js +511 -0
  5. package/dist/_chunks/image-preview.js +90 -0
  6. package/dist/_chunks/primitives.js +109 -109
  7. package/dist/_chunks/stat-row.js +144 -124
  8. package/dist/_chunks/use-calendar.js +558 -490
  9. package/dist/ai/block-renderer.d.ts +2 -1
  10. package/dist/ai/block-renderer.d.ts.map +1 -1
  11. package/dist/ai/block-renderer.js +30 -29
  12. package/dist/ai/blocks/block-table.d.ts.map +1 -1
  13. package/dist/ai/blocks/confirm.d.ts.map +1 -1
  14. package/dist/ai/blocks/divider.d.ts.map +1 -1
  15. package/dist/ai/blocks/error.d.ts.map +1 -1
  16. package/dist/ai/blocks/info.d.ts.map +1 -1
  17. package/dist/ai/blocks/loading.d.ts.map +1 -1
  18. package/dist/ai/blocks/stat-row.d.ts.map +1 -1
  19. package/dist/ai/blocks/success.d.ts.map +1 -1
  20. package/dist/ai/blocks/text.d.ts.map +1 -1
  21. package/dist/ai/command-bar.d.ts +18 -0
  22. package/dist/ai/command-bar.d.ts.map +1 -1
  23. package/dist/ai/command-bar.js +126 -125
  24. package/dist/ai/conversation.d.ts +13 -1
  25. package/dist/ai/conversation.d.ts.map +1 -1
  26. package/dist/ai/conversation.js +78 -78
  27. package/dist/ai/types.d.ts +0 -1
  28. package/dist/ai/types.d.ts.map +1 -1
  29. package/dist/ai/types.js +1 -0
  30. package/dist/composed/bulk-action-bar.d.ts +6 -4
  31. package/dist/composed/bulk-action-bar.d.ts.map +1 -1
  32. package/dist/composed/bulk-action-bar.js +102 -58
  33. package/dist/composed/command-palette.d.ts +9 -0
  34. package/dist/composed/command-palette.d.ts.map +1 -1
  35. package/dist/composed/command-palette.js +68 -68
  36. package/dist/composed/confirm-dialog.d.ts +1 -1
  37. package/dist/composed/confirm-dialog.d.ts.map +1 -1
  38. package/dist/composed/confirm-dialog.js +10 -10
  39. package/dist/composed/content-card.d.ts.map +1 -1
  40. package/dist/composed/date-picker/date-picker.d.ts +11 -1
  41. package/dist/composed/date-picker/date-picker.d.ts.map +1 -1
  42. package/dist/composed/date-picker/month-picker.d.ts.map +1 -1
  43. package/dist/composed/date-picker/year-picker.d.ts.map +1 -1
  44. package/dist/composed/deadline-indicator.d.ts +1 -1
  45. package/dist/composed/deadline-indicator.d.ts.map +1 -1
  46. package/dist/composed/deadline-indicator.js +39 -36
  47. package/dist/composed/emoji-picker.d.ts +6 -0
  48. package/dist/composed/emoji-picker.d.ts.map +1 -1
  49. package/dist/composed/emoji-picker.js +22 -20
  50. package/dist/composed/error-boundary.d.ts +21 -1
  51. package/dist/composed/error-boundary.d.ts.map +1 -1
  52. package/dist/composed/error-boundary.js +47 -32
  53. package/dist/composed/file-preview/audio-preview.d.ts +7 -0
  54. package/dist/composed/file-preview/audio-preview.d.ts.map +1 -0
  55. package/dist/composed/file-preview/document-preview.d.ts +7 -0
  56. package/dist/composed/file-preview/document-preview.d.ts.map +1 -0
  57. package/dist/composed/file-preview/embed-preview.d.ts +7 -0
  58. package/dist/composed/file-preview/embed-preview.d.ts.map +1 -0
  59. package/dist/composed/file-preview/image-preview.d.ts +7 -0
  60. package/dist/composed/file-preview/image-preview.d.ts.map +1 -0
  61. package/dist/composed/file-preview/shared.d.ts +20 -0
  62. package/dist/composed/file-preview/shared.d.ts.map +1 -0
  63. package/dist/composed/file-preview/video-preview.d.ts +6 -0
  64. package/dist/composed/file-preview/video-preview.d.ts.map +1 -0
  65. package/dist/composed/file-preview.d.ts.map +1 -1
  66. package/dist/composed/file-preview.js +10 -662
  67. package/dist/composed/filter-bar.d.ts +10 -2
  68. package/dist/composed/filter-bar.d.ts.map +1 -1
  69. package/dist/composed/filter-bar.js +42 -43
  70. package/dist/composed/form-section.d.ts +1 -1
  71. package/dist/composed/form-section.d.ts.map +1 -1
  72. package/dist/composed/form-section.js +22 -21
  73. package/dist/composed/index.d.ts +2 -2
  74. package/dist/composed/index.d.ts.map +1 -1
  75. package/dist/composed/index.js +58 -57
  76. package/dist/composed/inline-edit.d.ts +1 -1
  77. package/dist/composed/inline-edit.d.ts.map +1 -1
  78. package/dist/composed/inline-edit.js +33 -32
  79. package/dist/composed/lib/string-utils.d.ts.map +1 -1
  80. package/dist/composed/loading-skeleton.d.ts.map +1 -1
  81. package/dist/composed/markdown-viewer.d.ts +1 -1
  82. package/dist/composed/markdown-viewer.d.ts.map +1 -1
  83. package/dist/composed/markdown-viewer.js +60 -59
  84. package/dist/composed/master-detail.d.ts +11 -7
  85. package/dist/composed/master-detail.d.ts.map +1 -1
  86. package/dist/composed/master-detail.js +123 -84
  87. package/dist/composed/page-header.d.ts.map +1 -1
  88. package/dist/composed/page-skeletons.d.ts.map +1 -1
  89. package/dist/composed/priority-indicator.d.ts +1 -0
  90. package/dist/composed/priority-indicator.js +1 -0
  91. package/dist/composed/responsive-overlay.d.ts +8 -0
  92. package/dist/composed/responsive-overlay.d.ts.map +1 -1
  93. package/dist/composed/rich-text-editor.d.ts +11 -3
  94. package/dist/composed/rich-text-editor.d.ts.map +1 -1
  95. package/dist/composed/rich-text-editor.js +21 -20
  96. package/dist/composed/schedule-view.d.ts +9 -1
  97. package/dist/composed/schedule-view.d.ts.map +1 -1
  98. package/dist/hooks/index.d.ts +2 -0
  99. package/dist/hooks/index.d.ts.map +1 -1
  100. package/dist/hooks/index.js +8 -4
  101. package/dist/hooks/use-touch-device.d.ts +12 -0
  102. package/dist/hooks/use-touch-device.d.ts.map +1 -0
  103. package/dist/hooks/use-touch-device.js +13 -0
  104. package/dist/hooks/use-viewport-height.d.ts +11 -0
  105. package/dist/hooks/use-viewport-height.d.ts.map +1 -0
  106. package/dist/hooks/use-viewport-height.js +16 -0
  107. package/dist/shell/bottom-navbar.d.ts.map +1 -1
  108. package/dist/shell/bottom-navbar.js +72 -63
  109. package/dist/shell/command-registry.d.ts.map +1 -1
  110. package/dist/shell/notification-center.d.ts.map +1 -1
  111. package/dist/shell/notification-center.js +77 -77
  112. package/dist/shell/top-bar.d.ts +2 -2
  113. package/dist/shell/top-bar.d.ts.map +1 -1
  114. package/dist/shell/top-bar.js +61 -60
  115. package/dist/tailwind/index.cjs +51 -7
  116. package/dist/tailwind/preset.d.ts.map +1 -1
  117. package/dist/tailwind/preset.js +51 -7
  118. package/dist/tokens/primitives.css +3 -1
  119. package/dist/tokens/semantic.css +16 -13
  120. package/dist/tokens/typography.css +33 -4
  121. package/dist/ui/alert.d.ts +1 -0
  122. package/dist/ui/alert.d.ts.map +1 -1
  123. package/dist/ui/alert.js +42 -37
  124. package/dist/ui/autocomplete.d.ts.map +1 -1
  125. package/dist/ui/autocomplete.js +38 -39
  126. package/dist/ui/badge.d.ts +110 -2
  127. package/dist/ui/badge.d.ts.map +1 -1
  128. package/dist/ui/banner.d.ts.map +1 -1
  129. package/dist/ui/banner.js +8 -7
  130. package/dist/ui/button.d.ts +2 -2
  131. package/dist/ui/button.d.ts.map +1 -1
  132. package/dist/ui/button.js +54 -74
  133. package/dist/ui/card.d.ts +5 -1
  134. package/dist/ui/card.d.ts.map +1 -1
  135. package/dist/ui/card.js +111 -79
  136. package/dist/ui/charts/area-chart.d.ts +2 -0
  137. package/dist/ui/charts/area-chart.d.ts.map +1 -1
  138. package/dist/ui/charts/bar-chart.d.ts +2 -0
  139. package/dist/ui/charts/bar-chart.d.ts.map +1 -1
  140. package/dist/ui/charts/chart-container.d.ts +2 -0
  141. package/dist/ui/charts/chart-container.d.ts.map +1 -1
  142. package/dist/ui/charts/index.js +583 -577
  143. package/dist/ui/charts/line-chart.d.ts +2 -0
  144. package/dist/ui/charts/line-chart.d.ts.map +1 -1
  145. package/dist/ui/charts/pie-chart.d.ts +2 -0
  146. package/dist/ui/charts/pie-chart.d.ts.map +1 -1
  147. package/dist/ui/charts/radar-chart.d.ts +2 -0
  148. package/dist/ui/charts/radar-chart.d.ts.map +1 -1
  149. package/dist/ui/checkbox.d.ts +2 -0
  150. package/dist/ui/checkbox.d.ts.map +1 -1
  151. package/dist/ui/checkbox.js +36 -27
  152. package/dist/ui/code.d.ts.map +1 -1
  153. package/dist/ui/color-input.js +5 -5
  154. package/dist/ui/combobox.d.ts +6 -1
  155. package/dist/ui/combobox.d.ts.map +1 -1
  156. package/dist/ui/combobox.js +1 -1
  157. package/dist/ui/container.d.ts.map +1 -1
  158. package/dist/ui/context-menu.js +1 -1
  159. package/dist/ui/data-table-body.d.ts +12 -0
  160. package/dist/ui/data-table-body.d.ts.map +1 -0
  161. package/dist/ui/data-table-body.js +219 -0
  162. package/dist/ui/data-table-bulk-actions.d.ts +19 -0
  163. package/dist/ui/data-table-bulk-actions.d.ts.map +1 -0
  164. package/dist/ui/data-table-bulk-actions.js +61 -0
  165. package/dist/ui/data-table-card.d.ts +9 -0
  166. package/dist/ui/data-table-card.d.ts.map +1 -0
  167. package/dist/ui/data-table-card.js +73 -0
  168. package/dist/ui/data-table-context.d.ts +62 -0
  169. package/dist/ui/data-table-context.d.ts.map +1 -0
  170. package/dist/ui/data-table-context.js +48 -0
  171. package/dist/ui/data-table-header.d.ts +10 -0
  172. package/dist/ui/data-table-header.d.ts.map +1 -0
  173. package/dist/ui/data-table-header.js +141 -0
  174. package/dist/ui/data-table-pagination.d.ts +13 -0
  175. package/dist/ui/data-table-pagination.d.ts.map +1 -0
  176. package/dist/ui/data-table-pagination.js +84 -0
  177. package/dist/ui/data-table.d.ts +11 -9
  178. package/dist/ui/data-table.d.ts.map +1 -1
  179. package/dist/ui/data-table.js +258 -573
  180. package/dist/ui/dialog.d.ts +6 -2
  181. package/dist/ui/dialog.d.ts.map +1 -1
  182. package/dist/ui/dialog.js +84 -82
  183. package/dist/ui/dropdown-menu.js +1 -1
  184. package/dist/ui/hover-card.d.ts +7 -0
  185. package/dist/ui/hover-card.d.ts.map +1 -1
  186. package/dist/ui/hover-card.js +3 -3
  187. package/dist/ui/icon-group.d.ts +2 -4
  188. package/dist/ui/icon-group.d.ts.map +1 -1
  189. package/dist/ui/icon-group.js +22 -23
  190. package/dist/ui/index.d.ts +1 -2
  191. package/dist/ui/index.d.ts.map +1 -1
  192. package/dist/ui/index.js +94 -99
  193. package/dist/ui/label.js +1 -1
  194. package/dist/ui/lib/bottom-sheet.d.ts +16 -0
  195. package/dist/ui/lib/bottom-sheet.d.ts.map +1 -0
  196. package/dist/ui/lib/date-utils.d.ts.map +1 -1
  197. package/dist/ui/lib/motion.d.ts.map +1 -1
  198. package/dist/ui/lib/utils.d.ts.map +1 -1
  199. package/dist/ui/menubar.d.ts.map +1 -1
  200. package/dist/ui/menubar.js +64 -73
  201. package/dist/ui/navigation-menu.d.ts.map +1 -1
  202. package/dist/ui/navigation-menu.js +40 -44
  203. package/dist/ui/number-input.d.ts.map +1 -1
  204. package/dist/ui/number-input.js +19 -17
  205. package/dist/ui/popover.d.ts.map +1 -1
  206. package/dist/ui/popover.js +107 -32
  207. package/dist/ui/progress-ring.d.ts.map +1 -1
  208. package/dist/ui/progress-ring.js +80 -80
  209. package/dist/ui/progress.js +4 -4
  210. package/dist/ui/radio.d.ts +5 -2
  211. package/dist/ui/radio.d.ts.map +1 -1
  212. package/dist/ui/radio.js +29 -20
  213. package/dist/ui/search-input.d.ts.map +1 -1
  214. package/dist/ui/search-input.js +13 -12
  215. package/dist/ui/segmented-control.d.ts +6 -108
  216. package/dist/ui/segmented-control.d.ts.map +1 -1
  217. package/dist/ui/segmented-control.js +86 -272
  218. package/dist/ui/select.d.ts +3 -1
  219. package/dist/ui/select.d.ts.map +1 -1
  220. package/dist/ui/select.js +83 -71
  221. package/dist/ui/separator.js +5 -5
  222. package/dist/ui/sheet.d.ts +2 -0
  223. package/dist/ui/sheet.d.ts.map +1 -1
  224. package/dist/ui/sheet.js +102 -84
  225. package/dist/ui/sidebar.d.ts.map +1 -1
  226. package/dist/ui/sidebar.js +200 -175
  227. package/dist/ui/skeleton.d.ts.map +1 -1
  228. package/dist/ui/slider.js +14 -14
  229. package/dist/ui/stack.d.ts.map +1 -1
  230. package/dist/ui/status-dot.js +8 -8
  231. package/dist/ui/stepper.d.ts.map +1 -1
  232. package/dist/ui/stepper.js +33 -31
  233. package/dist/ui/switch.js +3 -3
  234. package/dist/ui/table.d.ts.map +1 -1
  235. package/dist/ui/tabs.d.ts +7 -0
  236. package/dist/ui/tabs.d.ts.map +1 -1
  237. package/dist/ui/tabs.js +102 -76
  238. package/dist/ui/text.d.ts.map +1 -1
  239. package/dist/ui/toast-types.d.ts +0 -1
  240. package/dist/ui/toast-types.d.ts.map +1 -1
  241. package/dist/ui/toast-types.js +0 -1
  242. package/dist/ui/toast.d.ts.map +1 -1
  243. package/dist/ui/toast.js +156 -150
  244. package/dist/ui/toggle-group.js +1 -1
  245. package/dist/ui/toggle.js +1 -1
  246. package/dist/ui/tooltip.js +3 -3
  247. package/dist/ui/visually-hidden.d.ts.map +1 -1
  248. package/docs/components/ui/alert.md +3 -0
  249. package/docs/components/ui/badge.md +3 -0
  250. package/docs/components/ui/card.md +4 -0
  251. package/docs/components/ui/data-table-body.md +13 -0
  252. package/docs/components/ui/data-table-bulk-actions.md +13 -0
  253. package/docs/components/ui/data-table-card.md +13 -0
  254. package/docs/components/ui/data-table-context.md +13 -0
  255. package/docs/components/ui/data-table-header.md +13 -0
  256. package/docs/components/ui/data-table-pagination.md +13 -0
  257. package/docs/components/ui/select.md +4 -0
  258. package/docs/components/ui/tabs.md +4 -0
  259. package/llms-full.txt +97 -48
  260. package/llms.txt +46 -1
  261. package/package.json +37 -7
  262. package/dist/ui/chip.d.ts +0 -19
  263. package/dist/ui/chip.d.ts.map +0 -1
  264. package/dist/ui/chip.js +0 -14
  265. package/dist/ui/lib/use-ripple.d.ts +0 -14
  266. package/dist/ui/lib/use-ripple.d.ts.map +0 -1
@@ -1,18 +1,7 @@
1
1
  "use client";
2
- import { default as React } from 'react';
3
- declare const segmentedControlItemVariants: (props?: ({
4
- size?: "sm" | "md" | "lg" | null | undefined;
5
- variant?: "filled" | "tonal" | null | undefined;
6
- selected?: boolean | null | undefined;
7
- isHovered?: boolean | null | undefined;
8
- isDisabled?: boolean | null | undefined;
9
- } & import('class-variance-authority/types').ClassProp) | undefined) => string;
10
- export type SegmentedControlSize = 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'big';
11
- export type SegmentedControlVariant = 'filled' | 'tonal';
12
- /**
13
- * A single option in a `<SegmentedControl>`. The `id` must be unique across all options in
14
- * the same control — it is used as the selection key for `selectedId` and `onSelect`.
15
- */
2
+ import * as React from 'react';
3
+ export type SegmentedControlSize = 'sm' | 'md' | 'lg';
4
+ export type SegmentedControlVariant = 'default' | 'accent';
16
5
  export interface SegmentedControlOption {
17
6
  id: string;
18
7
  text: string;
@@ -21,105 +10,14 @@ export interface SegmentedControlOption {
21
10
  className?: string;
22
11
  }>;
23
12
  }
24
- /**
25
- * Props for SegmentedControl — a pill-shaped tab-row for mutually exclusive option selection,
26
- * similar to a radio group but styled as a single connected control.
27
- *
28
- * **`size`:** `'sm'` | `'md'` (default) | `'lg'`. Legacy aliases `'small'` | `'medium'` | `'big'` are
29
- * also accepted for backward compatibility but prefer the canonical form.
30
- *
31
- * **`variant`:** `'tonal'` (default, subdued) | `'filled'` (vibrant brand color when selected).
32
- *
33
- * **Options:** Each option needs a unique `id`, a display `text`, and an optional `icon` component.
34
- *
35
- * **Controlled only:** `selectedId` + `onSelect` are required. There is no uncontrolled mode.
36
- *
37
- * @example
38
- * // View mode switcher (list vs grid vs board):
39
- * <SegmentedControl
40
- * size="md"
41
- * variant="tonal"
42
- * options={[
43
- * { id: 'list', text: 'List' },
44
- * { id: 'grid', text: 'Grid' },
45
- * { id: 'board', text: 'Board' },
46
- * ]}
47
- * selectedId={viewMode}
48
- * onSelect={setViewMode}
49
- * />
50
- *
51
- * @example
52
- * // Time range selector with filled variant (more prominent):
53
- * <SegmentedControl
54
- * size="sm"
55
- * variant="filled"
56
- * options={[
57
- * { id: '7d', text: '7D' },
58
- * { id: '30d', text: '30D' },
59
- * { id: '90d', text: '90D' },
60
- * ]}
61
- * selectedId={range}
62
- * onSelect={setRange}
63
- * />
64
- * // These are just a few ways — feel free to combine props creatively!
65
- */
66
13
  export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
67
- size: SegmentedControlSize;
68
- variant: SegmentedControlVariant;
14
+ size?: SegmentedControlSize;
15
+ variant?: SegmentedControlVariant;
69
16
  options: SegmentedControlOption[];
70
17
  selectedId: string;
71
18
  onSelect: (id: string) => void;
72
19
  disabled?: boolean;
73
- className?: string;
74
20
  }
75
21
  declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
76
- /**
77
- * Props for SegmentedControlItem — the individual button segment within a `<SegmentedControl>`.
78
- * Normally you don't use this directly; compose via `<SegmentedControl options={...} />` instead.
79
- * Use `SegmentedControlItem` directly only when building a fully custom segmented tab row.
80
- *
81
- * **Note:** `isFocused`, `onFocus`, and `onBlur` are managed by the parent `SegmentedControl`.
82
- * You must wire them yourself when using the item standalone.
83
- *
84
- * @example
85
- * // Standalone custom segmented row (without parent SegmentedControl):
86
- * const [view, setView] = useState<'list' | 'grid'>('list')
87
- * const [focused, setFocused] = useState<string | null>(null)
88
- *
89
- * <div role="tablist" className="inline-flex rounded-full border border-surface-border-strong bg-surface-raised">
90
- * <SegmentedControlItem
91
- * size="md" variant="tonal" text="List"
92
- * isSelected={view === 'list'} isFocused={focused === 'list'}
93
- * onClick={() => setView('list')}
94
- * onFocus={() => setFocused('list')} onBlur={() => setFocused(null)}
95
- * />
96
- * <SegmentedControlItem
97
- * size="md" variant="tonal" text="Grid" icon={IconLayoutGrid}
98
- * isSelected={view === 'grid'} isFocused={focused === 'grid'}
99
- * onClick={() => setView('grid')}
100
- * onFocus={() => setFocused('grid')} onBlur={() => setFocused(null)}
101
- * />
102
- * </div>
103
- *
104
- * // These are just a few ways — feel free to combine props creatively!
105
- */
106
- export interface SegmentedControlItemProps {
107
- size: 'sm' | 'md' | 'lg';
108
- variant: SegmentedControlVariant;
109
- text: string;
110
- /** Optional icon component rendered before the text label. */
111
- icon?: React.ComponentType<{
112
- className?: string;
113
- }>;
114
- isSelected: boolean;
115
- onClick: () => void;
116
- disabled?: boolean;
117
- isFocused: boolean;
118
- onFocus: () => void;
119
- onBlur: () => void;
120
- /** @internal Unique layout animation ID — provided by the parent SegmentedControl. */
121
- layoutId?: string;
122
- }
123
- declare const SegmentedControlItem: React.ForwardRefExoticComponent<SegmentedControlItemProps & React.RefAttributes<HTMLButtonElement>>;
124
- export { SegmentedControl, SegmentedControlItem, segmentedControlItemVariants };
22
+ export { SegmentedControl };
125
23
  //# sourceMappingURL=segmented-control.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/ui/segmented-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAQtD,QAAA,MAAM,4BAA4B;;;;;;8EAmGjC,CAAA;AAqBD,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAClF,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,OAAO,CAAA;AAExD;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,8DAA8D;IAC9D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACnD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnG,IAAI,EAAE,oBAAoB,CAAA;IAC1B,OAAO,EAAE,uBAAuB,CAAA;IAChC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAGD,QAAA,MAAM,gBAAgB,8FA0FrB,CAAA;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACxB,OAAO,EAAE,uBAAuB,CAAA;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,8DAA8D;IAC9D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAClD,UAAU,EAAE,OAAO,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,oBAAoB,qGA6GzB,CAAA;AAGD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,4BAA4B,EAAE,CAAA"}
1
+ {"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/ui/segmented-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AACrD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE1D,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,8DAA8D;IAC9D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACnD;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnG,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA4BD,QAAA,MAAM,gBAAgB,8FA+HrB,CAAA;AAKD,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
@@ -1,301 +1,115 @@
1
1
  "use client";
2
- import { jsx as d, jsxs as z } from "react/jsx-runtime";
3
- import D, { useState as k, useRef as I, useEffect as S, useCallback as R, useId as E } from "react";
4
- import { a as H } from "../_chunks/vendor-utils.js";
5
- import { cn as w } from "./lib/utils.js";
6
- import { springs as L } from "./lib/motion.js";
7
- import { L as T, m as C, A } from "../_chunks/framer.js";
8
- function j(u = 600) {
9
- const [v, l] = k([]), s = I(/* @__PURE__ */ new Set());
10
- S(() => () => {
11
- s.current.forEach(clearTimeout);
12
- }, []);
13
- const m = R((n) => {
14
- const a = n.currentTarget.getBoundingClientRect(), t = Math.max(a.width, a.height) * 2, b = n.clientX - a.left - t / 2, o = n.clientY - a.top - t / 2, x = Date.now();
15
- l((i) => [...i, { id: x, x: b, y: o, size: t }]);
16
- const g = setTimeout(() => {
17
- l((i) => i.filter((f) => f.id !== x)), s.current.delete(g);
18
- }, u);
19
- s.current.add(g);
20
- }, [u]);
21
- return { ripples: v, createRipple: m };
22
- }
23
- const B = H(
24
- [
25
- "inline-flex items-center gap-ds-03 rounded-ds-full border-none outline-none cursor-pointer",
26
- "transition-[color,background-color,border-color,box-shadow] duration-moderate-02 ease-productive-standard",
27
- "relative overflow-hidden",
28
- "font-accent font-semibold leading-none text-center",
29
- "bg-surface-overlay",
30
- "first:rounded-tr-none first:rounded-br-none",
31
- "last:rounded-tl-none last:rounded-bl-none"
32
- ],
33
- {
34
- variants: {
35
- size: {
36
- sm: "h-ds-sm-plus px-ds-05 py-ds-03 text-ds-sm",
37
- md: "px-ds-02b py-ds-03 pl-ds-04 text-ds-md",
38
- lg: "h-[56px] px-ds-06 py-ds-05 text-ds-md"
39
- },
40
- variant: {
41
- filled: "text-accent-fg [text-shadow:0px_1px_1px_var(--color-text-shadow)]",
42
- tonal: "text-surface-fg-subtle"
43
- },
44
- selected: {
45
- true: "",
46
- false: ""
47
- },
48
- isHovered: {
49
- true: "",
50
- false: ""
51
- },
52
- isDisabled: {
53
- true: "cursor-not-allowed pointer-events-none border-none shadow-none [text-shadow:none]",
54
- false: ""
55
- }
56
- },
57
- compoundVariants: [
58
- // Selected + filled — bg/shadow handled by motion indicator
59
- {
60
- selected: !0,
61
- variant: "filled",
62
- className: ""
63
- },
64
- // Selected + tonal — bg handled by motion indicator
65
- {
66
- selected: !0,
67
- variant: "tonal",
68
- className: "text-surface-fg"
69
- },
70
- // Hover + filled
71
- {
72
- isHovered: !0,
73
- variant: "filled",
74
- className: [
75
- "bg-accent-9",
76
- "shadow-[0px_4px_8px_0px_var(--color-accent-10),0px_1px_3px_0.05px_var(--color-surface-raised),inset_0px_8px_16px_0px_var(--color-inset-glow-strong),inset_0px_2px_0px_0px_var(--color-inset-glow-subtle)]"
77
- ].join(" ")
78
- },
79
- // Hover + tonal
80
- {
81
- isHovered: !0,
82
- variant: "tonal",
83
- className: "text-surface-fg"
84
- },
85
- // Disabled + filled
86
- {
87
- isDisabled: !0,
88
- variant: "filled",
89
- className: "text-surface-fg-subtle"
90
- },
91
- // Disabled + tonal
92
- {
93
- isDisabled: !0,
94
- variant: "tonal",
95
- className: "text-surface-fg-subtle"
96
- },
97
- // Filled + SVG icon fill
98
- {
99
- variant: "filled",
100
- className: "[&_svg_path]:fill-accent-fg"
101
- },
102
- // Filled + disabled SVG icon fill
103
- {
104
- variant: "filled",
105
- isDisabled: !0,
106
- className: "[&_svg_path]:fill-disabled"
107
- },
108
- // Medium size last-child padding flip
109
- {
110
- size: "md",
111
- className: "last:pl-ds-02b last:pr-ds-04"
112
- }
113
- ],
114
- defaultVariants: {
115
- size: "md",
116
- variant: "tonal",
117
- selected: !1,
118
- isHovered: !1,
119
- isDisabled: !1
120
- }
121
- }
122
- ), F = {
123
- filled: "bg-surface-overlay-light",
124
- tonal: "bg-surface-overlay-dark"
125
- }, V = {
126
- small: "sm",
127
- medium: "md",
128
- big: "lg"
129
- };
130
- function K(u) {
131
- return V[u] ?? u;
132
- }
133
- const U = D.forwardRef(
2
+ import { jsx as a, jsxs as S } from "react/jsx-runtime";
3
+ import * as o from "react";
4
+ import { cn as i } from "./lib/utils.js";
5
+ import { L as k, m as I } from "../_chunks/framer.js";
6
+ const C = {
7
+ sm: { button: "h-7 px-ds-04 text-ds-sm", icon: "h-3.5 w-3.5" },
8
+ md: { button: "h-8 px-ds-05 text-ds-md", icon: "h-4 w-4" },
9
+ lg: { button: "h-10 px-ds-06 text-ds-md", icon: "h-4 w-4" }
10
+ }, D = {
11
+ default: "bg-surface-overlay shadow-sm",
12
+ accent: "bg-accent-9"
13
+ }, N = {
14
+ default: "text-surface-fg",
15
+ accent: "text-accent-fg"
16
+ }, R = { type: "spring", stiffness: 400, damping: 30 }, z = o.forwardRef(
134
17
  function({
135
- size: v,
136
- variant: l,
18
+ size: g = "md",
19
+ variant: l = "default",
137
20
  options: s,
138
- selectedId: m,
139
- onSelect: n,
140
- disabled: a = !1,
141
- className: t = "",
142
- ...b
143
- }, o) {
144
- const x = K(v), g = E(), [i, f] = k(null), h = I(null), y = D.useCallback((e) => {
145
- h.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
146
- }, [o]), N = (e) => {
147
- if (a) return;
148
- const p = s.findIndex((r) => r.id === i);
149
- let c = p;
21
+ selectedId: d,
22
+ onSelect: u,
23
+ disabled: c = !1,
24
+ className: x,
25
+ ...f
26
+ }, r) {
27
+ const p = o.useId(), m = o.useRef(null), h = o.useCallback(
28
+ (e) => {
29
+ m.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
30
+ },
31
+ [r]
32
+ ), v = (e) => {
33
+ if (c) return;
34
+ const t = s.findIndex((b) => b.id === d);
35
+ let n = t;
150
36
  switch (e.key) {
151
37
  case "ArrowLeft":
152
- e.preventDefault(), c = p > 0 ? p - 1 : s.length - 1;
38
+ e.preventDefault(), n = t > 0 ? t - 1 : s.length - 1;
153
39
  break;
154
40
  case "ArrowRight":
155
- e.preventDefault(), c = p < s.length - 1 ? p + 1 : 0;
41
+ e.preventDefault(), n = t < s.length - 1 ? t + 1 : 0;
156
42
  break;
157
43
  case "Home":
158
- e.preventDefault(), c = 0;
44
+ e.preventDefault(), n = 0;
159
45
  break;
160
46
  case "End":
161
- e.preventDefault(), c = s.length - 1;
47
+ e.preventDefault(), n = s.length - 1;
162
48
  break;
163
49
  default:
164
50
  return;
165
51
  }
166
- const _ = s[c];
167
- f(_.id), n(_.id);
168
- };
169
- return /* @__PURE__ */ d(
52
+ u(s[n].id), requestAnimationFrame(() => {
53
+ m.current?.querySelectorAll('[role="tab"]')?.[n]?.focus();
54
+ });
55
+ }, { button: y, icon: w } = C[g];
56
+ return /* @__PURE__ */ a(
170
57
  "div",
171
58
  {
172
- ref: y,
173
- className: w(
174
- "inline-flex gap-0 p-0 rounded-ds-full",
175
- "bg-surface-raised shadow-inset",
176
- "border border-solid border-surface-border-strong",
177
- t
178
- ),
59
+ ref: h,
179
60
  role: "tablist",
180
- onKeyDown: N,
181
61
  tabIndex: -1,
182
- "aria-label": "Segmented control options",
183
- ...b,
184
- children: /* @__PURE__ */ d(T, { children: s.map((e) => /* @__PURE__ */ d(
185
- M,
186
- {
187
- size: x,
188
- variant: l,
189
- text: e.text,
190
- icon: e.icon,
191
- isSelected: e.id === m,
192
- onClick: () => n(e.id),
193
- disabled: a,
194
- isFocused: e.id === i,
195
- onFocus: () => f(e.id),
196
- onBlur: () => f(null),
197
- layoutId: `${g}-segment-indicator`
198
- },
199
- e.id
200
- )) })
201
- }
202
- );
203
- }
204
- );
205
- U.displayName = "SegmentedControl";
206
- const M = D.forwardRef(
207
- function({
208
- size: v,
209
- variant: l,
210
- text: s,
211
- icon: m,
212
- isSelected: n,
213
- onClick: a,
214
- disabled: t = !1,
215
- isFocused: b,
216
- onFocus: o,
217
- onBlur: x,
218
- layoutId: g = "segment-indicator"
219
- }, i) {
220
- const [f, h] = k("default"), { ripples: y, createRipple: N } = j(), e = () => {
221
- !t && !b && h("hover");
222
- }, p = () => {
223
- t || h("default");
224
- }, c = () => {
225
- t || h("pressed");
226
- }, _ = () => {
227
- t || h("hover");
228
- };
229
- return /* @__PURE__ */ z(
230
- "button",
231
- {
232
- ref: i,
233
- className: w(
234
- B({
235
- size: v,
236
- variant: l,
237
- selected: n,
238
- isHovered: f === "hover",
239
- isDisabled: t
240
- })
62
+ "aria-label": f["aria-label"] ?? "Segmented control",
63
+ onKeyDown: v,
64
+ className: i(
65
+ "inline-flex p-[3px] rounded-ds-lg",
66
+ "bg-surface-raised-hover border border-surface-border-subtle shadow-inset",
67
+ c && "opacity-action-disabled pointer-events-none",
68
+ x
241
69
  ),
242
- onClick: (r) => {
243
- N(r), a();
244
- },
245
- disabled: t,
246
- type: "button",
247
- role: "tab",
248
- "aria-selected": n,
249
- "aria-disabled": t,
250
- onMouseEnter: e,
251
- onMouseLeave: p,
252
- onMouseDown: c,
253
- onMouseUp: _,
254
- onTouchStart: c,
255
- onTouchEnd: _,
256
- onFocus: o,
257
- onBlur: x,
258
- children: [
259
- n && /* @__PURE__ */ d(
260
- C.span,
261
- {
262
- layoutId: g,
263
- className: w(
264
- "absolute inset-0 rounded-ds-full pointer-events-none",
265
- l === "filled" ? "bg-accent-9 shadow-[0px_1px_3px_0.05px_var(--color-accent-10),inset_0px_8px_16px_0px_var(--color-inset-glow-strong),inset_0px_2px_0px_0px_var(--color-inset-glow-subtle)]" : "bg-surface-raised-hover"
266
- ),
267
- transition: L.smooth
268
- }
269
- ),
270
- /* @__PURE__ */ d(A, { children: y.map((r) => /* @__PURE__ */ d(
271
- C.span,
70
+ ...f,
71
+ children: /* @__PURE__ */ a(k, { id: p, children: s.map((e) => {
72
+ const t = e.id === d, n = e.icon;
73
+ return /* @__PURE__ */ S(
74
+ "button",
272
75
  {
273
- className: w(
274
- "absolute rounded-ds-full -translate-x-1/2 -translate-y-1/2 pointer-events-none",
275
- F[l]
76
+ type: "button",
77
+ role: "tab",
78
+ "aria-selected": t,
79
+ tabIndex: t ? 0 : -1,
80
+ disabled: c,
81
+ onClick: () => u(e.id),
82
+ className: i(
83
+ "relative inline-flex items-center justify-center gap-ds-02 rounded-ds-md",
84
+ "font-medium transition-colors duration-fast-02 ease-productive-standard",
85
+ "outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
86
+ y,
87
+ t ? N[l] : "text-surface-fg-muted hover:text-surface-fg"
276
88
  ),
277
- style: {
278
- left: r.x,
279
- top: r.y,
280
- width: r.size,
281
- height: r.size
282
- },
283
- initial: { scale: 0, opacity: 1 },
284
- animate: { scale: 4, opacity: 0 },
285
- transition: { duration: 0.6 }
89
+ children: [
90
+ t && /* @__PURE__ */ a(
91
+ I.span,
92
+ {
93
+ layoutId: "segment-pill",
94
+ className: i(
95
+ "absolute inset-0 rounded-ds-md pointer-events-none",
96
+ D[l]
97
+ ),
98
+ transition: R
99
+ }
100
+ ),
101
+ n && /* @__PURE__ */ a(n, { className: i("relative z-[1] shrink-0", w) }),
102
+ /* @__PURE__ */ a("span", { className: "relative z-[1]", children: e.text })
103
+ ]
286
104
  },
287
- r.id
288
- )) }),
289
- m && /* @__PURE__ */ d(m, { className: "relative z-[1] h-ico-sm w-ico-sm shrink-0" }),
290
- /* @__PURE__ */ d("span", { className: "relative z-[1] font-accent leading-none", children: s })
291
- ]
105
+ e.id
106
+ );
107
+ }) })
292
108
  }
293
109
  );
294
110
  }
295
111
  );
296
- M.displayName = "SegmentedControlItem";
112
+ z.displayName = "SegmentedControl";
297
113
  export {
298
- U as SegmentedControl,
299
- M as SegmentedControlItem,
300
- B as segmentedControlItemVariants
114
+ z as SegmentedControl
301
115
  };
@@ -27,6 +27,8 @@ declare const Select: React.FC<SelectPrimitive.SelectProps>;
27
27
  declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
28
28
  declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
29
29
  export declare const selectTriggerVariants: (props?: ({
30
+ variant?: "outline" | "default" | "ghost" | null | undefined;
31
+ color?: "default" | "success" | "error" | "warning" | null | undefined;
30
32
  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
31
33
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
32
34
  /**
@@ -37,7 +39,7 @@ export declare const selectTriggerVariants: (props?: ({
37
39
  * <SelectValue placeholder="Select an option" />
38
40
  * </SelectTrigger>
39
41
  */
40
- export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
42
+ export interface SelectTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'color'>, VariantProps<typeof selectTriggerVariants> {
41
43
  }
42
44
  declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
43
45
  declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,MAAM,uCAAuB,CAAA;AAEnC,QAAA,MAAM,WAAW,yGAAwB,CAAA;AAEzC,QAAA,MAAM,WAAW,0GAAwB,CAAA;AAEzC,eAAO,MAAM,qBAAqB;;8EAajC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EACpE,YAAY,CAAC,OAAO,qBAAqB,CAAC;CAAG;AAEjD,QAAA,MAAM,aAAa,8FAcjB,CAAA;AAGF,QAAA,MAAM,oBAAoB,qKAcxB,CAAA;AAGF,QAAA,MAAM,sBAAsB,uKAc1B,CAAA;AAIF,QAAA,MAAM,aAAa,8JAoCjB,CAAA;AAGF,QAAA,MAAM,WAAW,4JASf,CAAA;AAGF,QAAA,MAAM,UAAU,2JAmBd,CAAA;AAGF,QAAA,MAAM,eAAe,gKASnB,CAAA;AAGF,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,CAAA"}
1
+ {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,MAAM,uCAAuB,CAAA;AAEnC,QAAA,MAAM,WAAW,yGAAwB,CAAA;AAEzC,QAAA,MAAM,WAAW,0GAAwB,CAAA;AAEzC,eAAO,MAAM,qBAAqB;;;;8EA2BjC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,EACnF,YAAY,CAAC,OAAO,qBAAqB,CAAC;CAAG;AAEjD,QAAA,MAAM,aAAa,8FAejB,CAAA;AAGF,QAAA,MAAM,oBAAoB,qKAcxB,CAAA;AAGF,QAAA,MAAM,sBAAsB,uKAc1B,CAAA;AAIF,QAAA,MAAM,aAAa,8JAoCjB,CAAA;AAGF,QAAA,MAAM,WAAW,4JASf,CAAA;AAGF,QAAA,MAAM,UAAU,2JAmBd,CAAA;AAGF,QAAA,MAAM,eAAe,gKASnB,CAAA;AAGF,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,CAAA"}