@nsaa/core 0.1.0-alpha.4 → 0.1.0-alpha.6
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.
- package/dist/button/button.js +1 -0
- package/dist/date-range-picker/date-range-picker.d.ts +55 -0
- package/dist/date-range-picker/date-range-picker.js +346 -0
- package/dist/date-range-picker/index.d.ts +4 -0
- package/dist/date-range-picker/presets.d.ts +25 -0
- package/dist/date-range-picker/presets.js +115 -0
- package/dist/index.d.ts +15 -2
- package/dist/index.js +11 -4
- package/dist/lib/dev.js +14 -0
- package/dist/meter/index.d.ts +3 -0
- package/dist/meter/meter.d.ts +33 -0
- package/dist/meter/meter.js +145 -0
- package/dist/money/index.d.ts +3 -0
- package/dist/money/money.d.ts +28 -0
- package/dist/money/money.js +77 -0
- package/dist/progress/index.d.ts +3 -0
- package/dist/progress/progress.d.ts +8 -0
- package/dist/progress/progress.js +43 -0
- package/dist/sidebar/index.d.ts +3 -0
- package/dist/sidebar/sidebar.d.ts +66 -0
- package/dist/sidebar/sidebar.js +449 -0
- package/dist/sidebar/use-mobile.js +13 -0
- package/dist/sources/date-range-picker.css +29 -0
- package/dist/sources/meter.css +3 -0
- package/dist/sources/money.css +3 -0
- package/dist/sources/progress.css +3 -0
- package/dist/sources/sidebar.css +32 -0
- package/dist/sources/stat.css +4 -0
- package/dist/stat/index.d.ts +3 -0
- package/dist/stat/stat.d.ts +47 -0
- package/dist/stat/stat.js +161 -0
- package/dist/tokens/dist/motion.js +19 -1
- package/dist/toolbar/toolbar-item.js +1 -1
- package/dist/toolbar/toolbar.js +1 -1
- package/package.json +2 -2
- package/src/feel.css +104 -3
package/dist/button/button.js
CHANGED
|
@@ -95,6 +95,7 @@ function Button$1({ className, variant = "default", size = "default", loading =
|
|
|
95
95
|
const placement = loading ? resolvePlacement(loadingPlacement, children, size ?? "default") : null;
|
|
96
96
|
return /* @__PURE__ */ jsx(Button, {
|
|
97
97
|
"data-slot": "button",
|
|
98
|
+
"data-variant": variant ?? "default",
|
|
98
99
|
className: cn(buttonVariants({
|
|
99
100
|
variant,
|
|
100
101
|
size
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
|
|
2
|
+
import { DateRangePreset, DateRangeValue, WeekDay } from "./presets.js";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { Locale, Matcher } from "react-day-picker";
|
|
5
|
+
export type DateRangePickerLabels = {
|
|
6
|
+
/** Trigger text when there is no range. */
|
|
7
|
+
placeholder: string;
|
|
8
|
+
/** The radio for a range that matches no preset; in presetsOnly it opens the calendar. */
|
|
9
|
+
custom: string;
|
|
10
|
+
/** The presets radio group's name. */
|
|
11
|
+
presets: string;
|
|
12
|
+
/** The panel's name (Popover) and the Drawer's title. */
|
|
13
|
+
title: string;
|
|
14
|
+
};
|
|
15
|
+
export type DateRangePickerProps = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange" | "children"> & {
|
|
16
|
+
/** The selected range (controlled), or null for none. */
|
|
17
|
+
value?: DateRangeValue | null | undefined;
|
|
18
|
+
/** The range it starts with when uncontrolled. */
|
|
19
|
+
defaultValue?: DateRangeValue | null | undefined;
|
|
20
|
+
/** `preset` is the id of the picked preset, or of the preset a custom range matches; else null. */
|
|
21
|
+
onValueChange?: ((range: DateRangeValue, details: {
|
|
22
|
+
preset: string | null;
|
|
23
|
+
}) => void) | undefined;
|
|
24
|
+
/** Default: every built-in preset, in the order of `presets`. Pass `[]` for none. */
|
|
25
|
+
presets?: readonly DateRangePreset[] | undefined;
|
|
26
|
+
/** Presets in a Select-like menu; "Custom…" opens the calendar. */
|
|
27
|
+
presetsOnly?: boolean | undefined;
|
|
28
|
+
/** Default: the locale's first day (`Intl.Locale` week info), else Monday. */
|
|
29
|
+
weekStartsOn?: WeekDay | undefined;
|
|
30
|
+
/** IANA zone that decides what "today" is. Default: the device zone. */
|
|
31
|
+
timeZone?: string | undefined;
|
|
32
|
+
/**
|
|
33
|
+
* A BCP 47 tag (formats the trigger and the announcement, sets the week start) or a date-fns locale
|
|
34
|
+
* (`import { fr } from "date-fns/locale"`), which also translates the calendar's month and day
|
|
35
|
+
* names. Default: `<html lang>`, else the runtime's; the calendar's names stay English unless a
|
|
36
|
+
* date-fns locale is passed.
|
|
37
|
+
*/
|
|
38
|
+
locale?: string | Partial<Locale> | undefined;
|
|
39
|
+
/** The current instant. Default: now. Pin it for tests and stable screenshots. */
|
|
40
|
+
now?: Date | undefined;
|
|
41
|
+
/** The earliest day that can be picked; presets ending before it are disabled. */
|
|
42
|
+
min?: Date | undefined;
|
|
43
|
+
/** The latest day that can be picked; presets starting after it are disabled. */
|
|
44
|
+
max?: Date | undefined;
|
|
45
|
+
/** Days that cannot be picked (react-day-picker matchers). */
|
|
46
|
+
disabled?: Matcher | Matcher[] | undefined;
|
|
47
|
+
/** Default: 2 on containers at least 600 px wide, else 1. 2 also puts presets in a side list. */
|
|
48
|
+
numberOfMonths?: 1 | 2 | undefined;
|
|
49
|
+
/** The trigger Button's size. */
|
|
50
|
+
size?: "default" | "sm" | undefined;
|
|
51
|
+
/** Overrides for the visible and spoken strings: placeholder, custom, preset labels and the panel title. */
|
|
52
|
+
labels?: Partial<DateRangePickerLabels> | undefined;
|
|
53
|
+
};
|
|
54
|
+
declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, presets: presetList, presetsOnly, weekStartsOn: weekStartsOnProp, timeZone, locale: localeProp, now, min, max, disabled, numberOfMonths: monthsProp, size, labels: labelsProp, id, "aria-label": ariaLabel, className, ...props }: DateRangePickerProps): React.JSX.Element;
|
|
55
|
+
export { DateRangePicker };
|
|
@@ -0,0 +1,346 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
import { cn } from "../lib/cn.js";
|
|
4
|
+
import { duration } from "../tokens/dist/motion.js";
|
|
5
|
+
import { Button } from "../button/button.js";
|
|
6
|
+
import { Calendar } from "../calendar/calendar.js";
|
|
7
|
+
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "../drawer/drawer.js";
|
|
8
|
+
import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
|
|
9
|
+
import { localeWeekStart, matchPreset, presets, todayIn } from "./presets.js";
|
|
10
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
import * as React from "react";
|
|
12
|
+
import { useReducedMotion, useReducedMotionConfig } from "motion/react";
|
|
13
|
+
import { Radio } from "@base-ui/react/radio";
|
|
14
|
+
import { RadioGroup } from "@base-ui/react/radio-group";
|
|
15
|
+
// src/date-range-picker/date-range-picker.tsx
|
|
16
|
+
const DEFAULT_LABELS = {
|
|
17
|
+
placeholder: "Pick a date range",
|
|
18
|
+
custom: "Custom…",
|
|
19
|
+
presets: "Period",
|
|
20
|
+
title: "Date range"
|
|
21
|
+
};
|
|
22
|
+
const DEFAULT_PRESETS = Object.values(presets);
|
|
23
|
+
const CUSTOM = "__custom";
|
|
24
|
+
const WIDE_PX = 600;
|
|
25
|
+
const DRAWER_QUERY = "(pointer: coarse) and (max-width: 639px)";
|
|
26
|
+
const AXES = [
|
|
27
|
+
"data-mode",
|
|
28
|
+
"data-theme",
|
|
29
|
+
"data-corners",
|
|
30
|
+
"data-surface"
|
|
31
|
+
];
|
|
32
|
+
/** Lucide `calendar`. */
|
|
33
|
+
function CalendarIcon() {
|
|
34
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
35
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
36
|
+
viewBox: "0 0 24 24",
|
|
37
|
+
fill: "none",
|
|
38
|
+
stroke: "currentColor",
|
|
39
|
+
strokeWidth: "2",
|
|
40
|
+
strokeLinecap: "round",
|
|
41
|
+
strokeLinejoin: "round",
|
|
42
|
+
"aria-hidden": "true",
|
|
43
|
+
"data-icon": "inline-start",
|
|
44
|
+
children: [
|
|
45
|
+
/* @__PURE__ */ jsx("path", { d: "M8 2v4" }),
|
|
46
|
+
/* @__PURE__ */ jsx("path", { d: "M16 2v4" }),
|
|
47
|
+
/* @__PURE__ */ jsx("rect", {
|
|
48
|
+
width: "18",
|
|
49
|
+
height: "18",
|
|
50
|
+
x: "3",
|
|
51
|
+
y: "4",
|
|
52
|
+
rx: "2"
|
|
53
|
+
}),
|
|
54
|
+
/* @__PURE__ */ jsx("path", { d: "M3 10h18" })
|
|
55
|
+
]
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
/** Lucide `chevron-down`, for the presetsOnly trigger. */
|
|
59
|
+
function ChevronIcon() {
|
|
60
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
61
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
62
|
+
viewBox: "0 0 24 24",
|
|
63
|
+
fill: "none",
|
|
64
|
+
stroke: "currentColor",
|
|
65
|
+
strokeWidth: "2",
|
|
66
|
+
strokeLinecap: "round",
|
|
67
|
+
strokeLinejoin: "round",
|
|
68
|
+
"aria-hidden": "true",
|
|
69
|
+
"data-icon": "inline-end",
|
|
70
|
+
className: "ms-auto text-muted-foreground",
|
|
71
|
+
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
function useContainerWide(ref) {
|
|
75
|
+
const [wide, setWide] = React.useState(false);
|
|
76
|
+
React.useLayoutEffect(() => {
|
|
77
|
+
const container = ref.current?.parentElement;
|
|
78
|
+
if (!container) return;
|
|
79
|
+
setWide(container.clientWidth >= WIDE_PX);
|
|
80
|
+
const observer = new ResizeObserver(([entry]) => {
|
|
81
|
+
if (entry) setWide(entry.contentRect.width >= WIDE_PX);
|
|
82
|
+
});
|
|
83
|
+
observer.observe(container);
|
|
84
|
+
return () => observer.disconnect();
|
|
85
|
+
}, [ref]);
|
|
86
|
+
return wide;
|
|
87
|
+
}
|
|
88
|
+
function useMedia(query) {
|
|
89
|
+
return React.useSyncExternalStore((onChange) => {
|
|
90
|
+
const list = window.matchMedia(query);
|
|
91
|
+
list.addEventListener("change", onChange);
|
|
92
|
+
return () => list.removeEventListener("change", onChange);
|
|
93
|
+
}, () => window.matchMedia(query).matches, () => false);
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Presets on Base UI Radio Group (#159): one tab stop, arrows move the checked radio. The checked
|
|
97
|
+
* radio is only a draft (the calendar previews it); a click, Space (Base UI turns it into a click)
|
|
98
|
+
* or Enter applies it.
|
|
99
|
+
*/
|
|
100
|
+
function PresetList({ options, value, orientation, label, onDraft, onPick }) {
|
|
101
|
+
return /* @__PURE__ */ jsx(RadioGroup, {
|
|
102
|
+
value: value ?? null,
|
|
103
|
+
onValueChange: (next) => onDraft(next),
|
|
104
|
+
"aria-label": label,
|
|
105
|
+
"data-slot": "date-range-picker-presets",
|
|
106
|
+
"data-orientation": orientation,
|
|
107
|
+
className: cn("flex gap-1 p-2", orientation === "vertical" ? "w-40 shrink-0 flex-col" : "overflow-x-auto border-b border-border"),
|
|
108
|
+
children: options.map((option) => /* @__PURE__ */ jsx(Radio.Root, {
|
|
109
|
+
value: option.id,
|
|
110
|
+
disabled: option.disabled,
|
|
111
|
+
"data-slot": "date-range-picker-preset",
|
|
112
|
+
onClick: () => onPick(option.id),
|
|
113
|
+
onKeyDown: (event) => {
|
|
114
|
+
if (event.key === "Enter") onPick(option.id);
|
|
115
|
+
},
|
|
116
|
+
className: cn("flex cursor-default items-center rounded-md text-start text-sm whitespace-nowrap text-foreground outline-hidden select-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 data-checked:bg-muted data-checked:font-medium data-disabled:pointer-events-none data-disabled:opacity-50", orientation === "vertical" ? "min-h-8 px-2 pointer-coarse:min-h-11" : "h-7 shrink-0 border border-border px-2.5 pointer-coarse:h-11"),
|
|
117
|
+
children: option.label
|
|
118
|
+
}, option.id))
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange, presets: presetList = DEFAULT_PRESETS, presetsOnly = false, weekStartsOn: weekStartsOnProp, timeZone, locale: localeProp, now, min, max, disabled, numberOfMonths: monthsProp, size = "default", labels: labelsProp, id, "aria-label": ariaLabel, className, ...props }) {
|
|
122
|
+
const labels = {
|
|
123
|
+
...DEFAULT_LABELS,
|
|
124
|
+
...labelsProp
|
|
125
|
+
};
|
|
126
|
+
const rootRef = React.useRef(null);
|
|
127
|
+
const timer = React.useRef(void 0);
|
|
128
|
+
const [inner, setInner] = React.useState(defaultValue);
|
|
129
|
+
const [open, setOpen] = React.useState(false);
|
|
130
|
+
const [view, setView] = React.useState("calendar");
|
|
131
|
+
const [draft, setDraft] = React.useState(null);
|
|
132
|
+
const [presetDraft, setPresetDraft] = React.useState();
|
|
133
|
+
const [axes, setAxes] = React.useState({});
|
|
134
|
+
const [announcement, setAnnouncement] = React.useState("");
|
|
135
|
+
const wide = useContainerWide(rootRef);
|
|
136
|
+
const drawer = useMedia(DRAWER_QUERY);
|
|
137
|
+
const prefersReduced = useReducedMotion() ?? false;
|
|
138
|
+
const configReduced = useReducedMotionConfig() ?? false;
|
|
139
|
+
const value = valueProp !== void 0 ? valueProp : inner;
|
|
140
|
+
const calendarLocale = typeof localeProp === "object" ? localeProp : void 0;
|
|
141
|
+
const locale = (typeof localeProp === "string" ? localeProp : localeProp?.code) ?? (typeof document !== "undefined" && document.documentElement.lang || void 0);
|
|
142
|
+
const weekStartsOn = weekStartsOnProp ?? calendarLocale?.options?.weekStartsOn ?? localeWeekStart(locale);
|
|
143
|
+
const options = { weekStartsOn };
|
|
144
|
+
const today = todayIn(now, timeZone);
|
|
145
|
+
const months = drawer ? 1 : monthsProp ?? (wide ? 2 : 1);
|
|
146
|
+
const matched = matchPreset(value, presetList, today, options);
|
|
147
|
+
const short = new Intl.DateTimeFormat(locale, {
|
|
148
|
+
day: "numeric",
|
|
149
|
+
month: "short",
|
|
150
|
+
year: "numeric"
|
|
151
|
+
});
|
|
152
|
+
const long = new Intl.DateTimeFormat(locale, { dateStyle: "long" });
|
|
153
|
+
const spoken = (range, preset) => `${preset ? `${preset.label}, ` : ""}${long.formatRange(range.from, range.to)}`;
|
|
154
|
+
React.useEffect(() => () => clearTimeout(timer.current), []);
|
|
155
|
+
const panelRef = React.useRef(null);
|
|
156
|
+
React.useEffect(() => {
|
|
157
|
+
if (open && presetsOnly && view === "calendar") panelRef.current?.querySelector("button[data-day][tabindex=\"0\"]")?.focus();
|
|
158
|
+
}, [
|
|
159
|
+
open,
|
|
160
|
+
presetsOnly,
|
|
161
|
+
view
|
|
162
|
+
]);
|
|
163
|
+
const changeOpen = (next) => {
|
|
164
|
+
clearTimeout(timer.current);
|
|
165
|
+
if (next) {
|
|
166
|
+
const trigger = rootRef.current;
|
|
167
|
+
const read = {};
|
|
168
|
+
for (const name of [...AXES, "dir"]) {
|
|
169
|
+
const found = trigger?.closest(`[${name}]`)?.getAttribute(name);
|
|
170
|
+
if (found) read[name] = found;
|
|
171
|
+
}
|
|
172
|
+
setAxes(read);
|
|
173
|
+
setView(presetsOnly ? "list" : "calendar");
|
|
174
|
+
}
|
|
175
|
+
setDraft(null);
|
|
176
|
+
setPresetDraft(next ? matched?.id ?? CUSTOM : void 0);
|
|
177
|
+
setOpen(next);
|
|
178
|
+
};
|
|
179
|
+
const apply = (range, picked) => {
|
|
180
|
+
const preset = picked ?? matchPreset(range, presetList, today, options);
|
|
181
|
+
if (valueProp === void 0) setInner(range);
|
|
182
|
+
onValueChange?.(range, { preset: preset?.id ?? null });
|
|
183
|
+
setAnnouncement(spoken(range, preset));
|
|
184
|
+
changeOpen(false);
|
|
185
|
+
};
|
|
186
|
+
const reduced = () => {
|
|
187
|
+
const html = document.documentElement.dataset.motion;
|
|
188
|
+
if (html === "reduce") return true;
|
|
189
|
+
if (html === "full") return false;
|
|
190
|
+
return prefersReduced || configReduced;
|
|
191
|
+
};
|
|
192
|
+
const onDay = (_range, day) => {
|
|
193
|
+
clearTimeout(timer.current);
|
|
194
|
+
setPresetDraft(CUSTOM);
|
|
195
|
+
if (!draft || draft.to) {
|
|
196
|
+
setDraft({ from: day });
|
|
197
|
+
return;
|
|
198
|
+
}
|
|
199
|
+
const range = day < draft.from ? {
|
|
200
|
+
from: day,
|
|
201
|
+
to: draft.from
|
|
202
|
+
} : {
|
|
203
|
+
from: draft.from,
|
|
204
|
+
to: day
|
|
205
|
+
};
|
|
206
|
+
setDraft(range);
|
|
207
|
+
if (reduced()) apply(range);
|
|
208
|
+
else timer.current = setTimeout(() => apply(range), duration.chunk);
|
|
209
|
+
};
|
|
210
|
+
const floor = (date) => todayIn(date);
|
|
211
|
+
const presetOptions = presetList.map((preset) => {
|
|
212
|
+
const r = preset.range(today, options);
|
|
213
|
+
return {
|
|
214
|
+
id: preset.id,
|
|
215
|
+
label: preset.label,
|
|
216
|
+
disabled: !!min && r.from < floor(min) || !!max && r.to > floor(max)
|
|
217
|
+
};
|
|
218
|
+
});
|
|
219
|
+
const pickPreset = (presetId) => {
|
|
220
|
+
if (presetId === CUSTOM) {
|
|
221
|
+
if (presetsOnly) return setView("calendar");
|
|
222
|
+
panelRef.current?.querySelector("button[data-day][tabindex=\"0\"]")?.focus();
|
|
223
|
+
return;
|
|
224
|
+
}
|
|
225
|
+
const preset = presetList.find((p) => p.id === presetId);
|
|
226
|
+
if (preset) apply(preset.range(today, options), preset);
|
|
227
|
+
};
|
|
228
|
+
const presetChoices = [...presetOptions, {
|
|
229
|
+
id: CUSTOM,
|
|
230
|
+
label: labels.custom
|
|
231
|
+
}];
|
|
232
|
+
const previewPreset = presetList.find((p) => p.id === presetDraft);
|
|
233
|
+
const previewed = previewPreset ? previewPreset.range(today, options) : void 0;
|
|
234
|
+
const matchers = [
|
|
235
|
+
...min ? [{ before: min }] : [],
|
|
236
|
+
...max ? [{ after: max }] : [],
|
|
237
|
+
...disabled === void 0 ? [] : Array.isArray(disabled) ? disabled : [disabled]
|
|
238
|
+
];
|
|
239
|
+
const anchor = value?.to ?? today;
|
|
240
|
+
const defaultMonth = months === 2 ? new Date(anchor.getFullYear(), anchor.getMonth() - 1, 1) : anchor;
|
|
241
|
+
const narrow = months === 1;
|
|
242
|
+
const panel = view === "list" ? /* @__PURE__ */ jsx(PresetList, {
|
|
243
|
+
options: presetChoices,
|
|
244
|
+
value: presetDraft,
|
|
245
|
+
orientation: "vertical",
|
|
246
|
+
label: labels.presets,
|
|
247
|
+
onDraft: setPresetDraft,
|
|
248
|
+
onPick: pickPreset
|
|
249
|
+
}) : /* @__PURE__ */ jsxs("div", {
|
|
250
|
+
ref: panelRef,
|
|
251
|
+
"data-slot": "date-range-picker-panel",
|
|
252
|
+
className: cn("flex", narrow ? "flex-col" : "flex-row"),
|
|
253
|
+
children: [!presetsOnly && presetOptions.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
254
|
+
className: cn(!narrow && "border-e border-border"),
|
|
255
|
+
children: /* @__PURE__ */ jsx(PresetList, {
|
|
256
|
+
options: presetChoices,
|
|
257
|
+
value: presetDraft,
|
|
258
|
+
orientation: narrow ? "horizontal" : "vertical",
|
|
259
|
+
label: labels.presets,
|
|
260
|
+
onDraft: setPresetDraft,
|
|
261
|
+
onPick: pickPreset
|
|
262
|
+
})
|
|
263
|
+
}), /* @__PURE__ */ jsx(Calendar, {
|
|
264
|
+
mode: "range",
|
|
265
|
+
locale: calendarLocale,
|
|
266
|
+
selected: draft ?? previewed ?? value ?? void 0,
|
|
267
|
+
onSelect: onDay,
|
|
268
|
+
numberOfMonths: months,
|
|
269
|
+
showOutsideDays: months === 1,
|
|
270
|
+
defaultMonth,
|
|
271
|
+
today,
|
|
272
|
+
weekStartsOn,
|
|
273
|
+
disabled: matchers,
|
|
274
|
+
startMonth: min,
|
|
275
|
+
endMonth: max,
|
|
276
|
+
className: cn(narrow && "mx-auto")
|
|
277
|
+
})]
|
|
278
|
+
});
|
|
279
|
+
const triggerText = matched ? matched.label : value ? short.formatRange(value.from, value.to) : "";
|
|
280
|
+
const trigger = /* @__PURE__ */ jsx(Button, {
|
|
281
|
+
variant: "outline",
|
|
282
|
+
size,
|
|
283
|
+
id,
|
|
284
|
+
"data-slot": "date-range-picker-trigger",
|
|
285
|
+
className: cn("justify-start font-normal text-foreground", presetsOnly && "min-w-40")
|
|
286
|
+
});
|
|
287
|
+
const triggerChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
288
|
+
ariaLabel && /* @__PURE__ */ jsx("span", {
|
|
289
|
+
className: "sr-only",
|
|
290
|
+
children: `${ariaLabel},`
|
|
291
|
+
}),
|
|
292
|
+
ariaLabel && " ",
|
|
293
|
+
/* @__PURE__ */ jsx(CalendarIcon, {}),
|
|
294
|
+
value ? /* @__PURE__ */ jsx("span", {
|
|
295
|
+
"data-slot": "date-range-picker-value",
|
|
296
|
+
children: triggerText
|
|
297
|
+
}) : /* @__PURE__ */ jsx("span", {
|
|
298
|
+
"data-slot": "date-range-picker-placeholder",
|
|
299
|
+
className: "text-muted-foreground",
|
|
300
|
+
children: labels.placeholder
|
|
301
|
+
}),
|
|
302
|
+
value && matched && /* @__PURE__ */ jsxs("span", {
|
|
303
|
+
className: "sr-only",
|
|
304
|
+
children: [", ", long.formatRange(value.from, value.to)]
|
|
305
|
+
}),
|
|
306
|
+
presetsOnly && /* @__PURE__ */ jsx(ChevronIcon, {})
|
|
307
|
+
] });
|
|
308
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
309
|
+
ref: rootRef,
|
|
310
|
+
"data-slot": "date-range-picker",
|
|
311
|
+
className: cn("inline-flex", className),
|
|
312
|
+
...props,
|
|
313
|
+
children: [drawer ? /* @__PURE__ */ jsxs(Drawer, {
|
|
314
|
+
open,
|
|
315
|
+
onOpenChange: changeOpen,
|
|
316
|
+
children: [/* @__PURE__ */ jsx(DrawerTrigger, {
|
|
317
|
+
render: trigger,
|
|
318
|
+
children: triggerChildren
|
|
319
|
+
}), /* @__PURE__ */ jsxs(DrawerContent, {
|
|
320
|
+
"data-slot": "date-range-picker-content",
|
|
321
|
+
...axes,
|
|
322
|
+
children: [/* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: labels.title }) }), panel]
|
|
323
|
+
})]
|
|
324
|
+
}) : /* @__PURE__ */ jsxs(Popover, {
|
|
325
|
+
open,
|
|
326
|
+
onOpenChange: changeOpen,
|
|
327
|
+
children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
328
|
+
render: trigger,
|
|
329
|
+
children: triggerChildren
|
|
330
|
+
}), /* @__PURE__ */ jsx(PopoverContent, {
|
|
331
|
+
"data-slot": "date-range-picker-content",
|
|
332
|
+
"aria-label": labels.title,
|
|
333
|
+
align: "start",
|
|
334
|
+
className: "w-auto max-w-(--available-width) gap-0 p-0",
|
|
335
|
+
...axes,
|
|
336
|
+
children: panel
|
|
337
|
+
})]
|
|
338
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
339
|
+
role: "status",
|
|
340
|
+
className: "sr-only",
|
|
341
|
+
"data-slot": "date-range-picker-status",
|
|
342
|
+
children: announcement
|
|
343
|
+
})]
|
|
344
|
+
});
|
|
345
|
+
}
|
|
346
|
+
export { DateRangePicker };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
|
|
2
|
+
import { BuiltInPresetId, DateRangePreset, DateRangePresetOptions, DateRangeValue, WeekDay, localeWeekStart, matchPreset, presets, todayIn } from "./presets.js";
|
|
3
|
+
import { DateRangePicker, DateRangePickerLabels, DateRangePickerProps } from "./date-range-picker.js";
|
|
4
|
+
export { type BuiltInPresetId, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps, type DateRangePreset, type DateRangePresetOptions, type DateRangeValue, type WeekDay, localeWeekStart, matchPreset, presets, todayIn };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
|
|
2
|
+
/** A range of whole days. Both ends are dates at local midnight, the way react-day-picker reads them. */
|
|
3
|
+
export type DateRangeValue = {
|
|
4
|
+
from: Date;
|
|
5
|
+
to: Date;
|
|
6
|
+
};
|
|
7
|
+
/** 0 = Sunday … 6 = Saturday, as react-day-picker's `weekStartsOn`. */
|
|
8
|
+
export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
9
|
+
export type DateRangePresetOptions = {
|
|
10
|
+
weekStartsOn: WeekDay;
|
|
11
|
+
};
|
|
12
|
+
export type DateRangePreset = {
|
|
13
|
+
id: string;
|
|
14
|
+
label: string;
|
|
15
|
+
/** `now` is today at local midnight, in the picker's `timeZone`. */
|
|
16
|
+
range: (now: Date, options: DateRangePresetOptions) => DateRangeValue;
|
|
17
|
+
};
|
|
18
|
+
/** Today as a local-midnight date, read in `timeZone` (IANA) when given, else the device zone. */
|
|
19
|
+
export declare function todayIn(now?: Date, timeZone?: string): Date;
|
|
20
|
+
export type BuiltInPresetId = "today" | "yesterday" | "thisWeek" | "lastWeek" | "thisMonth" | "lastMonth" | "last7Days" | "last30Days" | "thisYear";
|
|
21
|
+
export declare const presets: Record<BuiltInPresetId, DateRangePreset>;
|
|
22
|
+
/** The first preset whose range is `range`, day for day; list order decides ties. */
|
|
23
|
+
export declare function matchPreset(range: DateRangeValue | null | undefined, list: readonly DateRangePreset[], now: Date, options: DateRangePresetOptions): DateRangePreset | undefined;
|
|
24
|
+
/** The locale's first day of the week (`Intl.Locale` week info), else Monday. */
|
|
25
|
+
export declare function localeWeekStart(locale?: string): WeekDay;
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
// src/date-range-picker/presets.ts
|
|
3
|
+
const day = (y, m, d) => new Date(y, m, d);
|
|
4
|
+
const addDays = (date, n) => day(date.getFullYear(), date.getMonth(), date.getDate() + n);
|
|
5
|
+
const startOfWeek = (date, weekStartsOn) => addDays(date, -((date.getDay() - weekStartsOn + 7) % 7));
|
|
6
|
+
const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
7
|
+
/** Today as a local-midnight date, read in `timeZone` (IANA) when given, else the device zone. */
|
|
8
|
+
function todayIn(now = /* @__PURE__ */ new Date(), timeZone) {
|
|
9
|
+
if (!timeZone) return day(now.getFullYear(), now.getMonth(), now.getDate());
|
|
10
|
+
const parts = new Intl.DateTimeFormat("en-US", {
|
|
11
|
+
timeZone,
|
|
12
|
+
year: "numeric",
|
|
13
|
+
month: "numeric",
|
|
14
|
+
day: "numeric"
|
|
15
|
+
}).formatToParts(now);
|
|
16
|
+
const get = (type) => Number(parts.find((p) => p.type === type)?.value);
|
|
17
|
+
return day(get("year"), get("month") - 1, get("day"));
|
|
18
|
+
}
|
|
19
|
+
const presets = {
|
|
20
|
+
today: {
|
|
21
|
+
id: "today",
|
|
22
|
+
label: "Today",
|
|
23
|
+
range: (now) => ({
|
|
24
|
+
from: now,
|
|
25
|
+
to: now
|
|
26
|
+
})
|
|
27
|
+
},
|
|
28
|
+
yesterday: {
|
|
29
|
+
id: "yesterday",
|
|
30
|
+
label: "Yesterday",
|
|
31
|
+
range: (now) => ({
|
|
32
|
+
from: addDays(now, -1),
|
|
33
|
+
to: addDays(now, -1)
|
|
34
|
+
})
|
|
35
|
+
},
|
|
36
|
+
thisWeek: {
|
|
37
|
+
id: "thisWeek",
|
|
38
|
+
label: "This week",
|
|
39
|
+
range: (now, { weekStartsOn }) => ({
|
|
40
|
+
from: startOfWeek(now, weekStartsOn),
|
|
41
|
+
to: now
|
|
42
|
+
})
|
|
43
|
+
},
|
|
44
|
+
lastWeek: {
|
|
45
|
+
id: "lastWeek",
|
|
46
|
+
label: "Last week",
|
|
47
|
+
range: (now, { weekStartsOn }) => {
|
|
48
|
+
const from = addDays(startOfWeek(now, weekStartsOn), -7);
|
|
49
|
+
return {
|
|
50
|
+
from,
|
|
51
|
+
to: addDays(from, 6)
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
thisMonth: {
|
|
56
|
+
id: "thisMonth",
|
|
57
|
+
label: "This month",
|
|
58
|
+
range: (now) => ({
|
|
59
|
+
from: day(now.getFullYear(), now.getMonth(), 1),
|
|
60
|
+
to: now
|
|
61
|
+
})
|
|
62
|
+
},
|
|
63
|
+
lastMonth: {
|
|
64
|
+
id: "lastMonth",
|
|
65
|
+
label: "Last month",
|
|
66
|
+
range: (now) => ({
|
|
67
|
+
from: day(now.getFullYear(), now.getMonth() - 1, 1),
|
|
68
|
+
to: day(now.getFullYear(), now.getMonth(), 0)
|
|
69
|
+
})
|
|
70
|
+
},
|
|
71
|
+
last7Days: {
|
|
72
|
+
id: "last7Days",
|
|
73
|
+
label: "Last 7 days",
|
|
74
|
+
range: (now) => ({
|
|
75
|
+
from: addDays(now, -6),
|
|
76
|
+
to: now
|
|
77
|
+
})
|
|
78
|
+
},
|
|
79
|
+
last30Days: {
|
|
80
|
+
id: "last30Days",
|
|
81
|
+
label: "Last 30 days",
|
|
82
|
+
range: (now) => ({
|
|
83
|
+
from: addDays(now, -29),
|
|
84
|
+
to: now
|
|
85
|
+
})
|
|
86
|
+
},
|
|
87
|
+
thisYear: {
|
|
88
|
+
id: "thisYear",
|
|
89
|
+
label: "This year",
|
|
90
|
+
range: (now) => ({
|
|
91
|
+
from: day(now.getFullYear(), 0, 1),
|
|
92
|
+
to: now
|
|
93
|
+
})
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
/** The first preset whose range is `range`, day for day; list order decides ties. */
|
|
97
|
+
function matchPreset(range, list, now, options) {
|
|
98
|
+
if (!range) return void 0;
|
|
99
|
+
return list.find((preset) => {
|
|
100
|
+
const r = preset.range(now, options);
|
|
101
|
+
return isSameDay(r.from, range.from) && isSameDay(r.to, range.to);
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
/** The locale's first day of the week (`Intl.Locale` week info), else Monday. */
|
|
105
|
+
function localeWeekStart(locale) {
|
|
106
|
+
try {
|
|
107
|
+
const tag = locale ?? (typeof navigator !== "undefined" ? navigator.language : void 0);
|
|
108
|
+
if (!tag) return 1;
|
|
109
|
+
const info = new Intl.Locale(tag);
|
|
110
|
+
const first = (info.getWeekInfo?.() ?? info.weekInfo)?.firstDay;
|
|
111
|
+
if (first) return first % 7;
|
|
112
|
+
} catch {}
|
|
113
|
+
return 1;
|
|
114
|
+
}
|
|
115
|
+
export { isSameDay, localeWeekStart, matchPreset, presets, todayIn };
|
package/dist/index.d.ts
CHANGED
|
@@ -26,6 +26,9 @@ import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, Comma
|
|
|
26
26
|
import "./command/index.js";
|
|
27
27
|
import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./context-menu/context-menu.js";
|
|
28
28
|
import "./context-menu/index.js";
|
|
29
|
+
import { BuiltInPresetId, DateRangePreset, DateRangePresetOptions, DateRangeValue, WeekDay, localeWeekStart, matchPreset, presets, todayIn } from "./date-range-picker/presets.js";
|
|
30
|
+
import { DateRangePicker, DateRangePickerLabels, DateRangePickerProps } from "./date-range-picker/date-range-picker.js";
|
|
31
|
+
import "./date-range-picker/index.js";
|
|
29
32
|
import "./dialog/index.js";
|
|
30
33
|
import { DirectionProvider } from "./direction.js";
|
|
31
34
|
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger } from "./drawer/drawer.js";
|
|
@@ -48,18 +51,27 @@ import "./kbd/index.js";
|
|
|
48
51
|
import "./label/index.js";
|
|
49
52
|
import { cn } from "./lib/cn.js";
|
|
50
53
|
import { IconSwap, IconSwapProps } from "./lib/icon-swap.js";
|
|
54
|
+
import { Meter, MeterIndicator, MeterLabel, MeterLegend, MeterProps, MeterSegment, MeterSegmentProps, MeterTrack, MeterValue } from "./meter/meter.js";
|
|
55
|
+
import "./meter/index.js";
|
|
56
|
+
import { Money, MoneyOptions, MoneyProps, formatMoney } from "./money/money.js";
|
|
57
|
+
import "./money/index.js";
|
|
51
58
|
import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./native-select/native-select.js";
|
|
52
59
|
import "./native-select/index.js";
|
|
53
60
|
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination/pagination.js";
|
|
54
61
|
import "./pagination/index.js";
|
|
55
62
|
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./popover/popover.js";
|
|
56
63
|
import "./popover/index.js";
|
|
64
|
+
import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "./progress/progress.js";
|
|
65
|
+
import "./progress/index.js";
|
|
57
66
|
import { RadioGroup, RadioGroupItem } from "./radio-group/radio-group.js";
|
|
58
67
|
import "./radio-group/index.js";
|
|
59
68
|
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./select/select.js";
|
|
60
69
|
import "./select/index.js";
|
|
61
70
|
import { Separator } from "./separator/separator.js";
|
|
62
71
|
import "./separator/index.js";
|
|
72
|
+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip/tooltip.js";
|
|
73
|
+
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./sidebar/sidebar.js";
|
|
74
|
+
import "./sidebar/index.js";
|
|
63
75
|
import { Skeleton, SkeletonContent } from "./skeleton/skeleton.js";
|
|
64
76
|
import "./skeleton/index.js";
|
|
65
77
|
import { Slider } from "./slider/slider.js";
|
|
@@ -71,6 +83,8 @@ import { LoaderProvider, LoaderProviderProps } from "./spinner/loader-provider.j
|
|
|
71
83
|
import { LoaderComponent, registerLoader, registerLoaders } from "./spinner/registry.js";
|
|
72
84
|
import { Spinner, SpinnerProps, SpinnerVariant } from "./spinner/spinner.js";
|
|
73
85
|
import "./spinner/index.js";
|
|
86
|
+
import { Stat, StatAction, StatActionProps, StatChange, StatChangeProps, StatDescription, StatGroup, StatGroupProps, StatIcon, StatLabel, StatProps, StatValue } from "./stat/stat.js";
|
|
87
|
+
import "./stat/index.js";
|
|
74
88
|
import { Switch } from "./switch/switch.js";
|
|
75
89
|
import "./switch/index.js";
|
|
76
90
|
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table/table.js";
|
|
@@ -85,7 +99,6 @@ import { ToggleGroup, ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGrou
|
|
|
85
99
|
import "./toggle-group/index.js";
|
|
86
100
|
import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarInputProps, ToolbarLinkProps, ToolbarProps, ToolbarSize } from "./toolbar/toolbar.js";
|
|
87
101
|
import "./toolbar/index.js";
|
|
88
|
-
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip/tooltip.js";
|
|
89
102
|
import "./tooltip/index.js";
|
|
90
103
|
import "./lib/track-input-modality.js";
|
|
91
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertClose, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertLink, AlertLinks, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, type EmptyIllustrationOptions, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, type IconSwapProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, type LoaderComponent, LoaderProvider, type LoaderProviderProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, type SoundComponent, type SoundCue, type SoundPlayer, SoundProvider, type SoundProviderProps, Spinner, type SpinnerProps, type SpinnerVariant, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, type ToggleGroupVariant, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSize, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, lazyUisfxPlayer, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };
|
|
104
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertClose, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertLink, AlertLinks, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, type BuiltInPresetId, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps, type DateRangePreset, type DateRangePresetOptions, type DateRangeValue, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, type EmptyIllustrationOptions, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, type IconSwapProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, type LoaderComponent, LoaderProvider, type LoaderProviderProps, Meter, MeterIndicator, MeterLabel, MeterLegend, type MeterProps, MeterSegment, type MeterSegmentProps, MeterTrack, MeterValue, Money, type MoneyOptions, type MoneyProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkeletonContent, Slider, type SoundComponent, type SoundCue, type SoundPlayer, SoundProvider, type SoundProviderProps, Spinner, type SpinnerProps, type SpinnerVariant, Stat, StatAction, type StatActionProps, StatChange, type StatChangeProps, StatDescription, StatGroup, type StatGroupProps, StatIcon, StatLabel, type StatProps, StatValue, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, type ToggleGroupVariant, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSize, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type WeekDay, badgeVariants, buttonVariants, cn, createToastManager, formatMoney, lazyUisfxPlayer, localeWeekStart, matchPreset, presets, registerLoader, registerLoaders, tabsListVariants, toast, todayIn, useComboboxAnchor, useEmptyIllustration, useSidebar, useSound, useToastManager };
|