@wheelhouse/ui 0.2.0 → 0.2.2

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 (108) hide show
  1. package/dist/components/accordion/accordion.js +2 -2
  2. package/dist/components/alert/alert.stories.js +4 -4
  3. package/dist/components/alert-dialog/alert-dialog.stories.js +2 -2
  4. package/dist/components/breadcrumb/breadcrumb.d.ts.map +1 -1
  5. package/dist/components/breadcrumb/breadcrumb.js +3 -4
  6. package/dist/components/calendar/calendar.d.ts +34 -0
  7. package/dist/components/calendar/calendar.d.ts.map +1 -0
  8. package/dist/components/calendar/calendar.js +82 -0
  9. package/dist/components/calendar/calendar.stories.d.ts +16 -0
  10. package/dist/components/calendar/calendar.stories.d.ts.map +1 -0
  11. package/dist/components/calendar/calendar.stories.js +33 -0
  12. package/dist/components/calendar/index.d.ts +3 -0
  13. package/dist/components/calendar/index.d.ts.map +1 -0
  14. package/dist/components/calendar/index.js +1 -0
  15. package/dist/components/checkbox/checkbox.js +2 -2
  16. package/dist/components/collapsible/collapsible.stories.js +4 -4
  17. package/dist/components/combobox/combobox.d.ts.map +1 -1
  18. package/dist/components/combobox/combobox.js +5 -7
  19. package/dist/components/command/command.d.ts.map +1 -1
  20. package/dist/components/command/command.js +3 -4
  21. package/dist/components/context-menu/context-menu.d.ts.map +1 -1
  22. package/dist/components/context-menu/context-menu.js +4 -5
  23. package/dist/components/date-selector/date-selector-context.d.ts +6 -0
  24. package/dist/components/date-selector/date-selector-context.d.ts.map +1 -0
  25. package/dist/components/date-selector/date-selector-context.js +11 -0
  26. package/dist/components/date-selector/date-selector-parts.d.ts +68 -0
  27. package/dist/components/date-selector/date-selector-parts.d.ts.map +1 -0
  28. package/dist/components/date-selector/date-selector-parts.js +131 -0
  29. package/dist/components/date-selector/date-selector-types.d.ts +118 -0
  30. package/dist/components/date-selector/date-selector-types.d.ts.map +1 -0
  31. package/dist/components/date-selector/date-selector-types.js +32 -0
  32. package/dist/components/date-selector/date-selector-value.d.ts +47 -0
  33. package/dist/components/date-selector/date-selector-value.d.ts.map +1 -0
  34. package/dist/components/date-selector/date-selector-value.js +183 -0
  35. package/dist/components/date-selector/date-selector.d.ts +6 -0
  36. package/dist/components/date-selector/date-selector.d.ts.map +1 -0
  37. package/dist/components/date-selector/date-selector.js +144 -0
  38. package/dist/components/date-selector/date-selector.stories.d.ts +135 -0
  39. package/dist/components/date-selector/date-selector.stories.d.ts.map +1 -0
  40. package/dist/components/date-selector/date-selector.stories.js +144 -0
  41. package/dist/components/date-selector/index.d.ts +7 -0
  42. package/dist/components/date-selector/index.d.ts.map +1 -0
  43. package/dist/components/date-selector/index.js +5 -0
  44. package/dist/components/date-selector/use-date-selector.d.ts +50 -0
  45. package/dist/components/date-selector/use-date-selector.d.ts.map +1 -0
  46. package/dist/components/date-selector/use-date-selector.js +305 -0
  47. package/dist/components/dialog/dialog.js +2 -2
  48. package/dist/components/dropdown-menu/dropdown-menu.d.ts.map +1 -1
  49. package/dist/components/dropdown-menu/dropdown-menu.js +5 -6
  50. package/dist/components/empty/empty.stories.js +2 -2
  51. package/dist/components/filters/filters.js +4 -4
  52. package/dist/components/filters/filters.stories.js +3 -3
  53. package/dist/components/index.d.ts +5 -0
  54. package/dist/components/index.d.ts.map +1 -1
  55. package/dist/components/index.js +5 -0
  56. package/dist/components/input-group/input-group.stories.js +3 -3
  57. package/dist/components/item/item.stories.d.ts.map +1 -1
  58. package/dist/components/item/item.stories.js +5 -6
  59. package/dist/components/kbd/kbd.stories.js +2 -2
  60. package/dist/components/menubar/menubar.js +3 -3
  61. package/dist/components/native-select/native-select.js +2 -2
  62. package/dist/components/navigation-menu/navigation-menu.js +2 -2
  63. package/dist/components/navigation-pattern-1/index.d.ts +3 -0
  64. package/dist/components/navigation-pattern-1/index.d.ts.map +1 -0
  65. package/dist/components/navigation-pattern-1/index.js +1 -0
  66. package/dist/components/navigation-pattern-1/pattern-1.config.d.ts +47 -0
  67. package/dist/components/navigation-pattern-1/pattern-1.config.d.ts.map +1 -0
  68. package/dist/components/navigation-pattern-1/pattern-1.config.js +55 -0
  69. package/dist/components/navigation-pattern-1/pattern-1.d.ts +7 -0
  70. package/dist/components/navigation-pattern-1/pattern-1.d.ts.map +1 -0
  71. package/dist/components/navigation-pattern-1/pattern-1.js +83 -0
  72. package/dist/components/navigation-pattern-1/pattern-1.stories.d.ts +16 -0
  73. package/dist/components/navigation-pattern-1/pattern-1.stories.d.ts.map +1 -0
  74. package/dist/components/navigation-pattern-1/pattern-1.stories.js +20 -0
  75. package/dist/components/pagination/pagination.js +4 -4
  76. package/dist/components/select/select.js +5 -5
  77. package/dist/components/sheet/sheet.js +2 -2
  78. package/dist/components/sonner/sonner.d.ts +1 -1
  79. package/dist/components/sonner/sonner.js +7 -7
  80. package/dist/components/sortable/index.d.ts +3 -0
  81. package/dist/components/sortable/index.d.ts.map +1 -0
  82. package/dist/components/sortable/index.js +1 -0
  83. package/dist/components/sortable/sortable.d.ts +94 -0
  84. package/dist/components/sortable/sortable.d.ts.map +1 -0
  85. package/dist/components/sortable/sortable.js +210 -0
  86. package/dist/components/sortable/sortable.stories.d.ts +14 -0
  87. package/dist/components/sortable/sortable.stories.d.ts.map +1 -0
  88. package/dist/components/sortable/sortable.stories.js +38 -0
  89. package/dist/components/spinner/spinner.d.ts +3 -3
  90. package/dist/components/spinner/spinner.d.ts.map +1 -1
  91. package/dist/components/spinner/spinner.js +2 -2
  92. package/dist/components/status-indicator/index.d.ts +3 -0
  93. package/dist/components/status-indicator/index.d.ts.map +1 -0
  94. package/dist/components/status-indicator/index.js +1 -0
  95. package/dist/components/status-indicator/status-indicator.d.ts +51 -0
  96. package/dist/components/status-indicator/status-indicator.d.ts.map +1 -0
  97. package/dist/components/status-indicator/status-indicator.js +48 -0
  98. package/dist/components/status-indicator/status-indicator.stories.d.ts +20 -0
  99. package/dist/components/status-indicator/status-indicator.stories.d.ts.map +1 -0
  100. package/dist/components/status-indicator/status-indicator.stories.js +97 -0
  101. package/dist/components/text/text.js +1 -1
  102. package/dist/hooks/use-mobile.d.ts +2 -0
  103. package/dist/hooks/use-mobile.d.ts.map +1 -0
  104. package/dist/hooks/use-mobile.js +15 -0
  105. package/dist/tsconfig.tsbuildinfo +1 -1
  106. package/llms.txt +4 -4
  107. package/package.json +7 -4
  108. package/src/styles/globals.css +4 -12
@@ -0,0 +1,305 @@
1
+ 'use client';
2
+ import { useCallback, useMemo, useState } from 'react';
3
+ import { isBefore } from 'date-fns';
4
+ import { buildCurrentValueFromInternal, computeStateSyncKey, createInitialInternalState, dateSelectorDataKey, } from './date-selector-value';
5
+ /**
6
+ * Headless state and handlers for the date selector: period, filter operator, selected dates/ranges, and year lists.
7
+ * Use when building a custom layout; otherwise prefer {@link DateSelector}.
8
+ *
9
+ * **`syncInternalFromParsedValue`:** When the UI parses free text into a {@link DateSelectorValue} and `value` is
10
+ * undefined (uncontrolled), call this so internal state matches the parsed value. Controlled flows should rely on
11
+ * `value` + `onChange` only.
12
+ */
13
+ export function useDateSelector({ value, onChange, defaultPeriodType = 'day', defaultFilterType = 'is', presetMode, allowRange = true, yearRange = 11, baseYear, minYear, maxYear, yearOptions, periodTypes, }) {
14
+ const currentYear = baseYear ?? new Date().getFullYear();
15
+ const validDefaultPeriodType = useMemo(() => {
16
+ if (!periodTypes || periodTypes.length === 0)
17
+ return defaultPeriodType;
18
+ if (periodTypes.includes(defaultPeriodType))
19
+ return defaultPeriodType;
20
+ return periodTypes[0];
21
+ }, [periodTypes, defaultPeriodType]);
22
+ const syncKey = computeStateSyncKey(value, presetMode, defaultFilterType, validDefaultPeriodType);
23
+ const [storedSyncKey, setStoredSyncKey] = useState(syncKey);
24
+ const [bundle, setBundle] = useState(() => {
25
+ const internal = createInitialInternalState(value, validDefaultPeriodType, defaultFilterType, presetMode);
26
+ return {
27
+ internal,
28
+ lastEmittedDataKey: dateSelectorDataKey(buildCurrentValueFromInternal(internal, presetMode)),
29
+ };
30
+ });
31
+ if (syncKey !== storedSyncKey) {
32
+ setStoredSyncKey(syncKey);
33
+ const nextInitial = createInitialInternalState(value, validDefaultPeriodType, defaultFilterType, presetMode);
34
+ setBundle({
35
+ internal: nextInitial,
36
+ lastEmittedDataKey: dateSelectorDataKey(buildCurrentValueFromInternal(nextInitial, presetMode)),
37
+ });
38
+ }
39
+ const internal = bundle.internal;
40
+ const commit = useCallback((updater) => {
41
+ setBundle((prevBundle) => {
42
+ const next = updater(prevBundle.internal);
43
+ const cv = buildCurrentValueFromInternal(next, presetMode);
44
+ const sig = dateSelectorDataKey(cv);
45
+ if (sig !== prevBundle.lastEmittedDataKey) {
46
+ onChange?.(cv);
47
+ return { internal: next, lastEmittedDataKey: sig };
48
+ }
49
+ return { internal: next, lastEmittedDataKey: prevBundle.lastEmittedDataKey };
50
+ });
51
+ }, [onChange, presetMode]);
52
+ const syncInternalFromParsedValue = useCallback((parsed) => {
53
+ const nextInternal = createInitialInternalState(parsed, validDefaultPeriodType, defaultFilterType, presetMode);
54
+ setBundle({
55
+ internal: nextInternal,
56
+ lastEmittedDataKey: dateSelectorDataKey(buildCurrentValueFromInternal(nextInternal, presetMode)),
57
+ });
58
+ }, [validDefaultPeriodType, defaultFilterType, presetMode]);
59
+ const setCalendarMonth = useCallback((action) => {
60
+ setBundle((prev) => ({
61
+ ...prev,
62
+ internal: {
63
+ ...prev.internal,
64
+ calendarMonth: typeof action === 'function' ? action(prev.internal.calendarMonth) : action,
65
+ },
66
+ }));
67
+ }, []);
68
+ const setHoverDate = useCallback((action) => {
69
+ setBundle((prev) => ({
70
+ ...prev,
71
+ internal: {
72
+ ...prev.internal,
73
+ hoverDate: typeof action === 'function' ? action(prev.internal.hoverDate) : action,
74
+ },
75
+ }));
76
+ }, []);
77
+ const setSelectedDate = useCallback((action) => {
78
+ commit((prev) => ({
79
+ ...prev,
80
+ selectedDate: typeof action === 'function' ? action(prev.selectedDate) : action,
81
+ }));
82
+ }, [commit]);
83
+ const setSelectedEndDate = useCallback((action) => {
84
+ commit((prev) => ({
85
+ ...prev,
86
+ selectedEndDate: typeof action === 'function' ? action(prev.selectedEndDate) : action,
87
+ }));
88
+ }, [commit]);
89
+ const years = useMemo(() => {
90
+ if (yearOptions !== undefined && yearOptions.length > 0) {
91
+ return [...new Set(yearOptions)].sort((a, b) => a - b);
92
+ }
93
+ if (minYear !== undefined && maxYear !== undefined) {
94
+ return Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i);
95
+ }
96
+ return Array.from({ length: yearRange }, (_, i) => currentYear - Math.floor(yearRange / 2) + i);
97
+ }, [currentYear, yearRange, minYear, maxYear, yearOptions]);
98
+ const currentValue = useMemo(() => buildCurrentValueFromInternal(internal, presetMode), [internal, presetMode]);
99
+ const clearSelection = useCallback(() => {
100
+ commit((prev) => ({
101
+ ...prev,
102
+ selectionMode: 'custom',
103
+ rollingDays: undefined,
104
+ selectedDate: undefined,
105
+ selectedEndDate: undefined,
106
+ selectedYear: undefined,
107
+ selectedMonth: undefined,
108
+ selectedQuarter: undefined,
109
+ rangeStart: undefined,
110
+ rangeEnd: undefined,
111
+ }));
112
+ }, [commit]);
113
+ const applyRollingPreset = useCallback((mode, days) => {
114
+ commit((prev) => ({
115
+ ...prev,
116
+ periodType: 'day',
117
+ selectionMode: mode,
118
+ rollingDays: days,
119
+ selectedDate: undefined,
120
+ selectedEndDate: undefined,
121
+ }));
122
+ }, [commit]);
123
+ const enterCustomRange = useCallback(() => {
124
+ commit((prev) => ({ ...prev, selectionMode: 'custom', rollingDays: undefined }));
125
+ }, [commit]);
126
+ const handleDayClick = useCallback((day) => {
127
+ commit((prev) => {
128
+ const s = { ...prev };
129
+ if (s.selectionMode === 'rolling-next' || s.selectionMode === 'rolling-last') {
130
+ s.selectionMode = 'custom';
131
+ s.rollingDays = undefined;
132
+ }
133
+ const activeFilter = presetMode ?? s.filterType;
134
+ if (activeFilter === 'between' && allowRange) {
135
+ if (!s.selectedDate || (s.selectedDate && s.selectedEndDate)) {
136
+ s.selectedDate = day;
137
+ s.selectedEndDate = undefined;
138
+ }
139
+ else {
140
+ if (isBefore(day, s.selectedDate)) {
141
+ s.selectedEndDate = s.selectedDate;
142
+ s.selectedDate = day;
143
+ }
144
+ else {
145
+ s.selectedEndDate = day;
146
+ }
147
+ }
148
+ }
149
+ else {
150
+ s.selectedDate = day;
151
+ s.selectedEndDate = undefined;
152
+ }
153
+ return s;
154
+ });
155
+ }, [commit, presetMode, allowRange]);
156
+ const handlePeriodSelect = useCallback((year, periodValue) => {
157
+ commit((prev) => {
158
+ const activeFilter = presetMode ?? prev.filterType;
159
+ if (activeFilter === 'between' && allowRange) {
160
+ if (!prev.rangeStart || (prev.rangeStart && prev.rangeEnd)) {
161
+ return {
162
+ ...prev,
163
+ rangeStart: { year, value: periodValue },
164
+ rangeEnd: undefined,
165
+ selectedYear: year,
166
+ selectedMonth: prev.periodType === 'month' ? periodValue : prev.selectedMonth,
167
+ selectedQuarter: prev.periodType === 'quarter' ? periodValue : prev.selectedQuarter,
168
+ };
169
+ }
170
+ const startKey = prev.rangeStart.year * 100 + prev.rangeStart.value;
171
+ const endKey = year * 100 + periodValue;
172
+ if (endKey < startKey) {
173
+ return {
174
+ ...prev,
175
+ rangeEnd: prev.rangeStart,
176
+ rangeStart: { year, value: periodValue },
177
+ };
178
+ }
179
+ return {
180
+ ...prev,
181
+ rangeEnd: { year, value: periodValue },
182
+ };
183
+ }
184
+ return {
185
+ ...prev,
186
+ selectedYear: year,
187
+ selectedMonth: prev.periodType === 'month' ? periodValue : prev.selectedMonth,
188
+ selectedQuarter: prev.periodType === 'quarter' ? periodValue : prev.selectedQuarter,
189
+ rangeStart: undefined,
190
+ rangeEnd: undefined,
191
+ };
192
+ });
193
+ }, [commit, presetMode, allowRange]);
194
+ const handleYearSelect = useCallback((year) => {
195
+ commit((prev) => {
196
+ const activeFilter = presetMode ?? prev.filterType;
197
+ if (activeFilter === 'between' && allowRange) {
198
+ if (!prev.rangeStart || (prev.rangeStart && prev.rangeEnd)) {
199
+ return {
200
+ ...prev,
201
+ rangeStart: { year, value: 0 },
202
+ rangeEnd: undefined,
203
+ selectedYear: year,
204
+ };
205
+ }
206
+ if (year < prev.rangeStart.year) {
207
+ return {
208
+ ...prev,
209
+ rangeEnd: prev.rangeStart,
210
+ rangeStart: { year, value: 0 },
211
+ };
212
+ }
213
+ return {
214
+ ...prev,
215
+ rangeEnd: { year, value: 0 },
216
+ };
217
+ }
218
+ return {
219
+ ...prev,
220
+ selectedYear: year,
221
+ rangeStart: undefined,
222
+ rangeEnd: undefined,
223
+ };
224
+ });
225
+ }, [commit, presetMode, allowRange]);
226
+ const handlePeriodTypeChange = useCallback((type) => {
227
+ commit((prev) => ({
228
+ ...prev,
229
+ periodType: type,
230
+ selectionMode: 'custom',
231
+ rollingDays: undefined,
232
+ selectedDate: undefined,
233
+ selectedEndDate: undefined,
234
+ selectedYear: undefined,
235
+ selectedMonth: undefined,
236
+ selectedQuarter: undefined,
237
+ rangeStart: undefined,
238
+ rangeEnd: undefined,
239
+ }));
240
+ }, [commit]);
241
+ const handleFilterTypeChange = useCallback((type) => {
242
+ if (presetMode !== undefined)
243
+ return;
244
+ commit((prev) => ({
245
+ ...prev,
246
+ filterType: type,
247
+ selectionMode: 'custom',
248
+ rollingDays: undefined,
249
+ selectedDate: undefined,
250
+ selectedEndDate: undefined,
251
+ selectedYear: undefined,
252
+ selectedMonth: undefined,
253
+ selectedQuarter: undefined,
254
+ rangeStart: undefined,
255
+ rangeEnd: undefined,
256
+ }));
257
+ }, [commit, presetMode]);
258
+ const isInRange = useCallback((year, periodValue) => {
259
+ if (!internal.rangeStart || !internal.rangeEnd)
260
+ return false;
261
+ const key = year * 100 + periodValue;
262
+ const startKey = internal.rangeStart.year * 100 + internal.rangeStart.value;
263
+ const endKey = internal.rangeEnd.year * 100 + internal.rangeEnd.value;
264
+ return key >= startKey && key <= endKey;
265
+ }, [internal.rangeStart, internal.rangeEnd]);
266
+ const isYearInRange = useCallback((year) => {
267
+ if (!internal.rangeStart || !internal.rangeEnd)
268
+ return false;
269
+ return year >= internal.rangeStart.year && year <= internal.rangeEnd.year;
270
+ }, [internal.rangeStart, internal.rangeEnd]);
271
+ const filterType = presetMode ?? internal.filterType;
272
+ return {
273
+ periodType: internal.periodType,
274
+ filterType,
275
+ selectedDate: internal.selectedDate,
276
+ selectedEndDate: internal.selectedEndDate,
277
+ calendarMonth: internal.calendarMonth,
278
+ selectedYear: internal.selectedYear,
279
+ selectedMonth: internal.selectedMonth,
280
+ selectedQuarter: internal.selectedQuarter,
281
+ rangeStart: internal.rangeStart,
282
+ rangeEnd: internal.rangeEnd,
283
+ hoverDate: internal.hoverDate,
284
+ years,
285
+ currentValue,
286
+ allowRange,
287
+ selectionMode: internal.selectionMode,
288
+ rollingDays: internal.rollingDays,
289
+ setPeriodType: handlePeriodTypeChange,
290
+ setFilterType: handleFilterTypeChange,
291
+ setSelectedDate,
292
+ setSelectedEndDate,
293
+ setCalendarMonth,
294
+ setHoverDate,
295
+ clearSelection,
296
+ handleDayClick,
297
+ handlePeriodSelect,
298
+ handleYearSelect,
299
+ isInRange,
300
+ isYearInRange,
301
+ applyRollingPreset,
302
+ enterCustomRange,
303
+ syncInternalFromParsedValue,
304
+ };
305
+ }
@@ -2,7 +2,7 @@
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import * as React from 'react';
4
4
  import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
5
- import { XIcon } from '@phosphor-icons/react/X';
5
+ import { X } from 'lucide-react';
6
6
  import { cn } from '../../lib/utils';
7
7
  import { Button } from '../button';
8
8
  function Dialog({ ...props }) {
@@ -21,7 +21,7 @@ function DialogOverlay({ className, ...props }) {
21
21
  return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn('fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0', className), ...props }));
22
22
  }
23
23
  function DialogContent({ className, children, showCloseButton = true, ...props }) {
24
- return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn('fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
24
+ return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn('fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [_jsx(X, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
25
25
  }
26
26
  function DialogHeader({ className, ...props }) {
27
27
  return _jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2', className), ...props });
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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"}
@@ -3,8 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import * as React from 'react';
4
4
  import { Menu as MenuPrimitive } from '@base-ui/react/menu';
5
5
  import { cn } from '../../lib/utils';
6
- import { CaretRightIcon } from '@phosphor-icons/react/CaretRight';
7
- import { CheckIcon } from '@phosphor-icons/react/Check';
6
+ import { Check, ChevronRight } from 'lucide-react';
8
7
  function DropdownMenu({ ...props }) {
9
8
  return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
10
9
  }
@@ -21,7 +20,7 @@ function DropdownMenuGroup({ ...props }) {
21
20
  return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
22
21
  }
23
22
  function DropdownMenuLabel({ className, inset, ...props }) {
24
- return (_jsx("div", { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7', className), ...props }));
23
+ return (_jsx("div", { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-1.5 py-1 text-xs text-muted-foreground data-inset:pl-7', className), ...props }));
25
24
  }
26
25
  function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
27
26
  return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive-foreground/10 data-[variant=destructive]:focus:text-destructive-foreground dark:data-[variant=destructive]:focus:bg-destructive-foreground/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive-foreground", className), ...props }));
@@ -30,19 +29,19 @@ function DropdownMenuSub({ ...props }) {
30
29
  return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
31
30
  }
32
31
  function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
33
- return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(CaretRightIcon, { className: "ml-auto" })] }));
32
+ return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto" })] }));
34
33
  }
35
34
  function DropdownMenuSubContent({ align = 'start', alignOffset = -3, side = 'right', sideOffset = 0, className, ...props }) {
36
35
  return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn('w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
37
36
  }
38
37
  function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
39
- return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
38
+ return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
40
39
  }
41
40
  function DropdownMenuRadioGroup({ ...props }) {
42
41
  return (_jsx(MenuPrimitive.Group, { children: _jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }) }));
43
42
  }
44
43
  function DropdownMenuRadioItem({ className, children, inset, ...props }) {
45
- return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
44
+ return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
46
45
  }
47
46
  function DropdownMenuSeparator({ className, ...props }) {
48
47
  return _jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn('-mx-1 my-1 h-px bg-border', className), ...props });
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { FolderOpenIcon } from '@phosphor-icons/react/dist/ssr';
2
+ import { FolderOpen } from 'lucide-react';
3
3
  import { Button } from '../button';
4
4
  import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './empty';
5
5
  const meta = {
@@ -15,5 +15,5 @@ const meta = {
15
15
  };
16
16
  export default meta;
17
17
  export const Default = {
18
- render: () => (_jsxs(Empty, { children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(FolderOpenIcon, {}) }), _jsx(EmptyTitle, { children: "No projects yet" }), _jsx(EmptyDescription, { children: "Create a project to get started, or browse templates." })] }), _jsx(EmptyContent, { children: _jsx(Button, { size: "sm", children: "New project" }) })] })),
18
+ render: () => (_jsxs(Empty, { children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(FolderOpen, {}) }), _jsx(EmptyTitle, { children: "No projects yet" }), _jsx(EmptyDescription, { children: "Create a project to get started, or browse templates." })] }), _jsx(EmptyContent, { children: _jsx(Button, { size: "sm", children: "New project" }) })] })),
19
19
  };
@@ -12,7 +12,7 @@ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGr
12
12
  import { Kbd } from '../kbd';
13
13
  import { ScrollArea } from '../scroll-area';
14
14
  import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
15
- import { CheckIcon, WarningCircleIcon, XIcon } from '@phosphor-icons/react/dist/ssr';
15
+ import { AlertCircle, Check, X } from 'lucide-react';
16
16
  import { createOperatorsFromI18n, DEFAULT_I18N } from './filters-defaults';
17
17
  import { createFilter } from './filters-utils';
18
18
  const FilterContext = createContext({
@@ -113,9 +113,9 @@ function FilterInput({ field, onBlur, onKeyDown, className, ...props }) {
113
113
  // Call the original onKeyDown if provided
114
114
  onKeyDown?.(e);
115
115
  };
116
- return (_jsxs(InputGroup, { className: cn('w-36', context.size == 'sm' && 'h-7!', context.size == 'default' && 'h-8!', context.size == 'lg' && 'h-9!', className), children: [field?.prefix && (_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: field.prefix }) })), _jsx(InputGroupInput, { ref: inputRef, "aria-invalid": !isValid, "aria-describedby": !isValid && validationMessage ? `${field?.key || 'input'}-error` : undefined, onBlur: handleBlur, onKeyDown: handleKeyDown, className: cn(context.size == 'sm' && 'h-7! text-xs', context.size == 'default' && 'h-8!', context.size == 'lg' && 'h-9!'), ...props }), !isValid && validationMessage && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(InputGroupButton, { size: "icon-xs" }), children: _jsx(WarningCircleIcon, { className: "size-3.5 text-destructive" }) }), _jsx(TooltipContent, { children: _jsx("p", { className: "text-sm", children: validationMessage }) })] }) })), field?.suffix && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: field.suffix }) }))] }));
116
+ return (_jsxs(InputGroup, { className: cn('w-36', context.size == 'sm' && 'h-7!', context.size == 'default' && 'h-8!', context.size == 'lg' && 'h-9!', className), children: [field?.prefix && (_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: field.prefix }) })), _jsx(InputGroupInput, { ref: inputRef, "aria-invalid": !isValid, "aria-describedby": !isValid && validationMessage ? `${field?.key || 'input'}-error` : undefined, onBlur: handleBlur, onKeyDown: handleKeyDown, className: cn(context.size == 'sm' && 'h-7! text-xs', context.size == 'default' && 'h-8!', context.size == 'lg' && 'h-9!'), ...props }), !isValid && validationMessage && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(InputGroupButton, { size: "icon-xs" }), children: _jsx(AlertCircle, { className: "size-3.5 text-destructive" }) }), _jsx(TooltipContent, { children: _jsx("p", { className: "text-sm", children: validationMessage }) })] }) })), field?.suffix && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: field.suffix }) }))] }));
117
117
  }
118
- function FilterRemoveButton({ className, icon = _jsx(XIcon, {}), ...props }) {
118
+ function FilterRemoveButton({ className, icon = _jsx(X, {}), ...props }) {
119
119
  const context = useFilterContext();
120
120
  return (_jsx(Button, { variant: "outline", size: context.size === 'sm' ? 'icon-sm' : context.size === 'lg' ? 'icon-lg' : 'icon', className: className, ...props, children: icon }));
121
121
  }
@@ -171,7 +171,7 @@ function FilterOperatorDropdown({ field, operator, values, onChange }) {
171
171
  const operators = getOperatorsForField(field, values, context.i18n);
172
172
  // Find the operator label, with fallback to formatted operator name
173
173
  const operatorLabel = operators.find((op) => op.value === operator)?.label || context.i18n.helpers.formatOperator(operator);
174
- return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", size: context.size, className: "text-muted-foreground hover:text-foreground", children: operatorLabel }) }), _jsx(DropdownMenuContent, { align: "start", className: "w-fit min-w-fit", children: operators.map((op) => (_jsxs(DropdownMenuItem, { onClick: () => onChange(op.value), className: cn('flex items-center justify-between data-highlighted:bg-accent data-highlighted:text-accent-foreground'), children: [_jsx("span", { children: op.label }), _jsx(CheckIcon, { className: cn('ms-auto text-primary', op.value === operator ? 'opacity-100' : 'opacity-0') })] }, op.value))) })] }));
174
+ return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", size: context.size, className: "text-muted-foreground hover:text-foreground", children: operatorLabel }) }), _jsx(DropdownMenuContent, { align: "start", className: "w-fit min-w-fit", children: operators.map((op) => (_jsxs(DropdownMenuItem, { onClick: () => onChange(op.value), className: cn('flex items-center justify-between data-highlighted:bg-accent data-highlighted:text-accent-foreground'), children: [_jsx("span", { children: op.label }), _jsx(Check, { className: cn('ms-auto text-primary', op.value === operator ? 'opacity-100' : 'opacity-0') })] }, op.value))) })] }));
175
175
  }
176
176
  function SelectOptionsPopover({ field, values, onChange, onClose, inline = false }) {
177
177
  const [open, setOpen] = useState(false);
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import { useState } from 'react';
4
- import { FunnelSimpleIcon, TagIcon } from '@phosphor-icons/react/dist/ssr';
4
+ import { Filter as FilterIcon, Tag } from 'lucide-react';
5
5
  import { Button } from '../button';
6
6
  import { createFilter, Filters } from '.';
7
7
  const demoFields = [
@@ -9,7 +9,7 @@ const demoFields = [
9
9
  key: 'status',
10
10
  label: 'Status',
11
11
  type: 'select',
12
- icon: _jsx(FunnelSimpleIcon, { className: "size-4" }),
12
+ icon: _jsx(FilterIcon, { className: "size-4" }),
13
13
  options: [
14
14
  { value: 'active', label: 'Active' },
15
15
  { value: 'draft', label: 'Draft' },
@@ -20,7 +20,7 @@ const demoFields = [
20
20
  label: 'Name',
21
21
  type: 'text',
22
22
  placeholder: 'Contains…',
23
- icon: _jsx(TagIcon, { className: "size-4" }),
23
+ icon: _jsx(Tag, { className: "size-4" }),
24
24
  },
25
25
  ];
26
26
  function FiltersStoryHost() {
@@ -7,12 +7,14 @@ export * from './badge';
7
7
  export * from './breadcrumb';
8
8
  export * from './button';
9
9
  export * from './button-group';
10
+ export * from './calendar';
10
11
  export * from './card';
11
12
  export * from './checkbox';
12
13
  export * from './collapsible';
13
14
  export * from './command';
14
15
  export * from './combobox';
15
16
  export * from './context-menu';
17
+ export * from './date-selector';
16
18
  export * from './dialog';
17
19
  export * from './direction';
18
20
  export * from './drawer';
@@ -30,6 +32,7 @@ export * from './label';
30
32
  export * from './menubar';
31
33
  export * from './native-select';
32
34
  export * from './navigation-menu';
35
+ export * from './navigation-pattern-1';
33
36
  export * from './pagination';
34
37
  export * from './popover';
35
38
  export * from './progress';
@@ -41,7 +44,9 @@ export * from './select';
41
44
  export * from './sheet';
42
45
  export * from './slider';
43
46
  export * from './sonner';
47
+ export * from './sortable';
44
48
  export * from './spinner';
49
+ export * from './status-indicator';
45
50
  export * from './switch';
46
51
  export * from './tabs';
47
52
  export * from './text';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
@@ -7,12 +7,14 @@ export * from './badge';
7
7
  export * from './breadcrumb';
8
8
  export * from './button';
9
9
  export * from './button-group';
10
+ export * from './calendar';
10
11
  export * from './card';
11
12
  export * from './checkbox';
12
13
  export * from './collapsible';
13
14
  export * from './command';
14
15
  export * from './combobox';
15
16
  export * from './context-menu';
17
+ export * from './date-selector';
16
18
  export * from './dialog';
17
19
  export * from './direction';
18
20
  export * from './drawer';
@@ -30,6 +32,7 @@ export * from './label';
30
32
  export * from './menubar';
31
33
  export * from './native-select';
32
34
  export * from './navigation-menu';
35
+ export * from './navigation-pattern-1';
33
36
  export * from './pagination';
34
37
  export * from './popover';
35
38
  export * from './progress';
@@ -41,7 +44,9 @@ export * from './select';
41
44
  export * from './sheet';
42
45
  export * from './slider';
43
46
  export * from './sonner';
47
+ export * from './sortable';
44
48
  export * from './spinner';
49
+ export * from './status-indicator';
45
50
  export * from './switch';
46
51
  export * from './tabs';
47
52
  export * from './text';
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass';
2
+ import { Search } from 'lucide-react';
3
3
  import { Kbd } from '../kbd';
4
4
  import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from '.';
5
5
  const meta = {
@@ -15,7 +15,7 @@ export const Default = {
15
15
  render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "example.com" })] }) })),
16
16
  };
17
17
  export const WithTrailingButton = {
18
- render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(MagnifyingGlassIcon, { className: "size-4" }) }) })] }) })),
18
+ render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(Search, { className: "size-4" }) }) })] }) })),
19
19
  };
20
20
  export const WithKbd = {
21
21
  render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Command\u2026" }), _jsxs(InputGroupAddon, { align: "inline-end", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] }) })),
@@ -25,5 +25,5 @@ export const Textarea = {
25
25
  };
26
26
  export const Gallery = {
27
27
  parameters: { layout: 'padded' },
28
- render: () => (_jsxs("div", { className: "flex max-w-md flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "URL prefix" }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "yoursite.com" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Trailing action" }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(MagnifyingGlassIcon, { className: "size-4" }) }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Multiline" }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "block-start", children: _jsx(InputGroupText, { children: "Comment" }) }), _jsx(InputGroupTextarea, { rows: 3, placeholder: "Write here\u2026" })] })] })] })),
28
+ render: () => (_jsxs("div", { className: "flex max-w-md flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "URL prefix" }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "yoursite.com" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Trailing action" }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(Search, { className: "size-4" }) }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Multiline" }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "block-start", children: _jsx(InputGroupText, { children: "Comment" }) }), _jsx(InputGroupTextarea, { rows: 3, placeholder: "Write here\u2026" })] })] })] })),
29
29
  };
@@ -1 +1 @@
1
- {"version":3,"file":"item.stories.d.ts","sourceRoot":"","sources":["../../../src/components/item/item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EACH,IAAI,EAaP,MAAM,GAAG,CAAC;AAEX,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAgBmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA+FrB,CAAC"}
1
+ {"version":3,"file":"item.stories.d.ts","sourceRoot":"","sources":["../../../src/components/item/item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EACH,IAAI,EAaP,MAAM,GAAG,CAAC;AAEX,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAgBmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA2FrB,CAAC"}