@evinvest/uikit 0.19.0 → 0.21.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.
- package/README.md +17 -5
- package/dist/components/accordion.js +136 -0
- package/dist/components/accordion.js.map +1 -0
- package/dist/components/alert-dialog.js +175 -0
- package/dist/components/alert-dialog.js.map +1 -0
- package/dist/components/alert.js +49 -0
- package/dist/components/alert.js.map +1 -0
- package/dist/components/avatar.js +54 -0
- package/dist/components/avatar.js.map +1 -0
- package/dist/components/badge.js +25 -0
- package/dist/components/badge.js.map +1 -0
- package/dist/components/band.js +75 -0
- package/dist/components/band.js.map +1 -0
- package/dist/components/breadcrumb.js +132 -0
- package/dist/components/breadcrumb.js.map +1 -0
- package/dist/components/button-group.js +61 -0
- package/dist/components/button-group.js.map +1 -0
- package/dist/components/button.js +55 -0
- package/dist/components/button.js.map +1 -0
- package/dist/components/calendar.js +226 -0
- package/dist/components/calendar.js.map +1 -0
- package/dist/components/card.js +98 -0
- package/dist/components/card.js.map +1 -0
- package/dist/components/carousel.js +262 -0
- package/dist/components/carousel.js.map +1 -0
- package/dist/components/chart.js +151 -0
- package/dist/components/chart.js.map +1 -0
- package/dist/components/checkbox.js +68 -0
- package/dist/components/checkbox.js.map +1 -0
- package/dist/components/collapsible.js +60 -0
- package/dist/components/collapsible.js.map +1 -0
- package/dist/components/command.js +274 -0
- package/dist/components/command.js.map +1 -0
- package/dist/components/container.js +18 -0
- package/dist/components/container.js.map +1 -0
- package/dist/components/context-menu.js +337 -0
- package/dist/components/context-menu.js.map +1 -0
- package/dist/components/date-time-picker.js +301 -0
- package/dist/components/date-time-picker.js.map +1 -0
- package/dist/components/dialog.js +207 -0
- package/dist/components/dialog.js.map +1 -0
- package/dist/components/drawer.js +351 -0
- package/dist/components/drawer.js.map +1 -0
- package/dist/components/dropdown-menu.js +356 -0
- package/dist/components/dropdown-menu.js.map +1 -0
- package/dist/components/empty.js +91 -0
- package/dist/components/empty.js.map +1 -0
- package/dist/components/field-context.js +30 -0
- package/dist/components/field-context.js.map +1 -0
- package/dist/components/field.js +216 -0
- package/dist/components/field.js.map +1 -0
- package/dist/components/footer.js +89 -0
- package/dist/components/footer.js.map +1 -0
- package/dist/components/form.js +101 -0
- package/dist/components/form.js.map +1 -0
- package/dist/components/hover-card.js +90 -0
- package/dist/components/hover-card.js.map +1 -0
- package/dist/components/info-tip.js +161 -0
- package/dist/components/info-tip.js.map +1 -0
- package/dist/components/input-group.js +124 -0
- package/dist/components/input-group.js.map +1 -0
- package/dist/components/input-otp.js +120 -0
- package/dist/components/input-otp.js.map +1 -0
- package/dist/components/input.js +26 -0
- package/dist/components/input.js.map +1 -0
- package/dist/components/item.js +167 -0
- package/dist/components/item.js.map +1 -0
- package/dist/components/kbd.js +29 -0
- package/dist/components/kbd.js.map +1 -0
- package/dist/components/label.js +11 -0
- package/dist/components/label.js.map +1 -0
- package/dist/components/logo.js +41 -0
- package/dist/components/logo.js.map +1 -0
- package/dist/components/menubar.js +330 -0
- package/dist/components/menubar.js.map +1 -0
- package/dist/components/native-select.js +62 -0
- package/dist/components/native-select.js.map +1 -0
- package/dist/components/navigation-menu.js +204 -0
- package/dist/components/navigation-menu.js.map +1 -0
- package/dist/components/pagination.js +138 -0
- package/dist/components/pagination.js.map +1 -0
- package/dist/components/popover.js +104 -0
- package/dist/components/popover.js.map +1 -0
- package/dist/components/progress.js +30 -0
- package/dist/components/progress.js.map +1 -0
- package/dist/components/radio-group.js +113 -0
- package/dist/components/radio-group.js.map +1 -0
- package/dist/components/resizable.js +193 -0
- package/dist/components/resizable.js.map +1 -0
- package/dist/components/scroll-area.js +40 -0
- package/dist/components/scroll-area.js.map +1 -0
- package/dist/components/section-descriptor.js +88 -0
- package/dist/components/section-descriptor.js.map +1 -0
- package/dist/components/select-chevron.js +25 -0
- package/dist/components/select-chevron.js.map +1 -0
- package/dist/components/select.js +288 -0
- package/dist/components/select.js.map +1 -0
- package/dist/components/separator.js +31 -0
- package/dist/components/separator.js.map +1 -0
- package/dist/components/sheet.js +200 -0
- package/dist/components/sheet.js.map +1 -0
- package/dist/components/sidebar.js +326 -0
- package/dist/components/sidebar.js.map +1 -0
- package/dist/components/skeleton.js +18 -0
- package/dist/components/skeleton.js.map +1 -0
- package/dist/components/slider.js +138 -0
- package/dist/components/slider.js.map +1 -0
- package/dist/components/sonner.js +319 -0
- package/dist/components/sonner.js.map +1 -0
- package/dist/components/spinner.js +23 -0
- package/dist/components/spinner.js.map +1 -0
- package/dist/components/status-screen.js +145 -0
- package/dist/components/status-screen.js.map +1 -0
- package/dist/components/switch.js +54 -0
- package/dist/components/switch.js.map +1 -0
- package/dist/components/table.js +124 -0
- package/dist/components/table.js.map +1 -0
- package/dist/components/tabs.js +133 -0
- package/dist/components/tabs.js.map +1 -0
- package/dist/components/terminal.js +206 -0
- package/dist/components/terminal.js.map +1 -0
- package/dist/components/textarea.js +22 -0
- package/dist/components/textarea.js.map +1 -0
- package/dist/components/toggle-group.js +105 -0
- package/dist/components/toggle-group.js.map +1 -0
- package/dist/components/toggle.js +53 -0
- package/dist/components/toggle.js.map +1 -0
- package/dist/components/tooltip.js +102 -0
- package/dist/components/tooltip.js.map +1 -0
- package/dist/generated/accent.js +27 -0
- package/dist/generated/accent.js.map +1 -0
- package/dist/generated/accordion.js +13 -0
- package/dist/generated/accordion.js.map +1 -0
- package/dist/generated/alert-dialog.js +15 -0
- package/dist/generated/alert-dialog.js.map +1 -0
- package/dist/generated/alert.js +16 -0
- package/dist/generated/alert.js.map +1 -0
- package/dist/generated/avatar.js +9 -0
- package/dist/generated/avatar.js.map +1 -0
- package/dist/generated/badge.js +13 -0
- package/dist/generated/badge.js.map +1 -0
- package/dist/generated/band.js +39 -0
- package/dist/generated/band.js.map +1 -0
- package/dist/generated/breadcrumb.js +15 -0
- package/dist/generated/breadcrumb.js.map +1 -0
- package/dist/generated/button-group.js +14 -0
- package/dist/generated/button-group.js.map +1 -0
- package/dist/generated/button.js +30 -0
- package/dist/generated/button.js.map +1 -0
- package/dist/generated/calendar.js +29 -0
- package/dist/generated/calendar.js.map +1 -0
- package/dist/generated/card.js +17 -0
- package/dist/generated/card.js.map +1 -0
- package/dist/generated/carousel.js +31 -0
- package/dist/generated/carousel.js.map +1 -0
- package/dist/generated/chart.js +9 -0
- package/dist/generated/chart.js.map +1 -0
- package/dist/generated/checkbox.js +7 -0
- package/dist/generated/checkbox.js.map +1 -0
- package/dist/generated/command.js +27 -0
- package/dist/generated/command.js.map +1 -0
- package/dist/generated/container.js +5 -0
- package/dist/generated/container.js.map +1 -0
- package/dist/generated/context-menu.js +19 -0
- package/dist/generated/context-menu.js.map +1 -0
- package/dist/generated/date-time-picker.js +15 -0
- package/dist/generated/date-time-picker.js.map +1 -0
- package/dist/generated/dialog.js +17 -0
- package/dist/generated/dialog.js.map +1 -0
- package/dist/generated/drawer.js +26 -0
- package/dist/generated/drawer.js.map +1 -0
- package/dist/generated/dropdown-menu.js +21 -0
- package/dist/generated/dropdown-menu.js.map +1 -0
- package/dist/generated/empty.js +20 -0
- package/dist/generated/empty.js.map +1 -0
- package/dist/generated/field.js +33 -0
- package/dist/generated/field.js.map +1 -0
- package/dist/generated/focus.js +5 -0
- package/dist/generated/focus.js.map +1 -0
- package/dist/generated/form.js +11 -0
- package/dist/generated/form.js.map +1 -0
- package/dist/generated/hover-card.js +5 -0
- package/dist/generated/hover-card.js.map +1 -0
- package/dist/generated/input-group.js +29 -0
- package/dist/generated/input-group.js.map +1 -0
- package/dist/generated/input-otp.js +15 -0
- package/dist/generated/input-otp.js.map +1 -0
- package/dist/generated/input.js +11 -0
- package/dist/generated/input.js.map +1 -0
- package/dist/generated/item.js +40 -0
- package/dist/generated/item.js.map +1 -0
- package/dist/generated/kbd.js +7 -0
- package/dist/generated/kbd.js.map +1 -0
- package/dist/generated/label.js +5 -0
- package/dist/generated/label.js.map +1 -0
- package/dist/generated/menubar.js +27 -0
- package/dist/generated/menubar.js.map +1 -0
- package/dist/generated/navigation-menu.js +19 -0
- package/dist/generated/navigation-menu.js.map +1 -0
- package/dist/generated/popover.js +5 -0
- package/dist/generated/popover.js.map +1 -0
- package/dist/generated/progress.js +7 -0
- package/dist/generated/progress.js.map +1 -0
- package/dist/generated/radio-group.js +7 -0
- package/dist/generated/radio-group.js.map +1 -0
- package/dist/generated/resizable.js +11 -0
- package/dist/generated/resizable.js.map +1 -0
- package/dist/generated/scroll-area.js +14 -0
- package/dist/generated/scroll-area.js.map +1 -0
- package/dist/generated/select.js +15 -0
- package/dist/generated/select.js.map +1 -0
- package/dist/generated/separator.js +10 -0
- package/dist/generated/separator.js.map +1 -0
- package/dist/generated/sheet.js +25 -0
- package/dist/generated/sheet.js.map +1 -0
- package/dist/generated/sidebar.js +41 -0
- package/dist/generated/sidebar.js.map +1 -0
- package/dist/generated/skeleton.js +5 -0
- package/dist/generated/skeleton.js.map +1 -0
- package/dist/generated/slider.js +11 -0
- package/dist/generated/slider.js.map +1 -0
- package/dist/generated/sonner.js +30 -0
- package/dist/generated/sonner.js.map +1 -0
- package/dist/generated/switch.js +7 -0
- package/dist/generated/switch.js.map +1 -0
- package/dist/generated/table.js +21 -0
- package/dist/generated/table.js.map +1 -0
- package/dist/generated/tabs.js +11 -0
- package/dist/generated/tabs.js.map +1 -0
- package/dist/generated/terminal.js +70 -0
- package/dist/generated/terminal.js.map +1 -0
- package/dist/generated/textarea.js +11 -0
- package/dist/generated/textarea.js.map +1 -0
- package/dist/generated/toggle.js +18 -0
- package/dist/generated/toggle.js.map +1 -0
- package/dist/generated/tooltip.js +5 -0
- package/dist/generated/tooltip.js.map +1 -0
- package/dist/index.d.ts +43 -10
- package/dist/index.js +73 -8805
- package/dist/lib/cn.js +12 -0
- package/dist/lib/cn.js.map +1 -0
- package/dist/lib/focus.js +5 -0
- package/dist/lib/focus.js.map +1 -0
- package/dist/primitives/dismissable-layer.js +35 -0
- package/dist/primitives/dismissable-layer.js.map +1 -0
- package/dist/primitives/focus-scope.js +58 -0
- package/dist/primitives/focus-scope.js.map +1 -0
- package/dist/primitives/merge-refs.js +13 -0
- package/dist/primitives/merge-refs.js.map +1 -0
- package/dist/primitives/portal.js +19 -0
- package/dist/primitives/portal.js.map +1 -0
- package/dist/primitives/presence.js +45 -0
- package/dist/primitives/presence.js.map +1 -0
- package/dist/primitives/slot.js +39 -0
- package/dist/primitives/slot.js.map +1 -0
- package/dist/primitives/use-controllable-state.js +24 -0
- package/dist/primitives/use-controllable-state.js.map +1 -0
- package/dist/primitives/use-floating.js +128 -0
- package/dist/primitives/use-floating.js.map +1 -0
- package/dist/primitives/use-hover-intent.js +50 -0
- package/dist/primitives/use-hover-intent.js.map +1 -0
- package/dist/primitives/use-roving-focus.js +40 -0
- package/dist/primitives/use-roving-focus.js.map +1 -0
- package/dist/primitives/walk-elements.js +13 -0
- package/dist/primitives/walk-elements.js.map +1 -0
- package/package.json +5 -4
- package/styles/theme.css +5 -1
- package/styles/tokens.css +5 -1
- package/dist/index.js.map +0 -1
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { cn } from "../lib/cn.js";
|
|
5
|
+
import { Slot } from "../primitives/slot.js";
|
|
6
|
+
import { useControllableState } from "../primitives/use-controllable-state.js";
|
|
7
|
+
import {
|
|
8
|
+
SIDEBAR_MENU_BUTTON_BASE,
|
|
9
|
+
sidebarMenuButtonSizeClasses,
|
|
10
|
+
SIDEBAR_WRAPPER,
|
|
11
|
+
SIDEBAR_FLAT,
|
|
12
|
+
SIDEBAR_INNER,
|
|
13
|
+
SIDEBAR_TRIGGER,
|
|
14
|
+
SIDEBAR_RAIL,
|
|
15
|
+
SIDEBAR_INSET,
|
|
16
|
+
SIDEBAR_HEADER,
|
|
17
|
+
SIDEBAR_FOOTER,
|
|
18
|
+
SIDEBAR_SEPARATOR,
|
|
19
|
+
SIDEBAR_CONTENT,
|
|
20
|
+
SIDEBAR_GROUP,
|
|
21
|
+
SIDEBAR_GROUP_LABEL,
|
|
22
|
+
SIDEBAR_GROUP_CONTENT,
|
|
23
|
+
SIDEBAR_MENU,
|
|
24
|
+
SIDEBAR_MENU_ITEM
|
|
25
|
+
} from "../generated/sidebar.js";
|
|
26
|
+
import { buttonVariantClasses } from "../generated/button.js";
|
|
27
|
+
const SIDEBAR_WIDTH = "16rem";
|
|
28
|
+
const SIDEBAR_WIDTH_ICON = "3rem";
|
|
29
|
+
const SidebarContext = React.createContext(null);
|
|
30
|
+
function useSidebar() {
|
|
31
|
+
const ctx = React.useContext(SidebarContext);
|
|
32
|
+
if (!ctx) throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
33
|
+
return ctx;
|
|
34
|
+
}
|
|
35
|
+
function SidebarProvider({
|
|
36
|
+
defaultOpen = true,
|
|
37
|
+
open: openProp,
|
|
38
|
+
onOpenChange,
|
|
39
|
+
className,
|
|
40
|
+
style,
|
|
41
|
+
children,
|
|
42
|
+
...props
|
|
43
|
+
}) {
|
|
44
|
+
const [open, setOpen] = useControllableState({
|
|
45
|
+
...openProp !== void 0 ? { value: openProp } : {},
|
|
46
|
+
defaultValue: defaultOpen,
|
|
47
|
+
...onOpenChange ? { onChange: onOpenChange } : {}
|
|
48
|
+
});
|
|
49
|
+
const toggleSidebar = React.useCallback(
|
|
50
|
+
() => setOpen(!open),
|
|
51
|
+
[open, setOpen]
|
|
52
|
+
);
|
|
53
|
+
const state = open ? "expanded" : "collapsed";
|
|
54
|
+
const contextValue = React.useMemo(
|
|
55
|
+
() => ({ state, open, setOpen, toggleSidebar }),
|
|
56
|
+
[state, open, setOpen, toggleSidebar]
|
|
57
|
+
);
|
|
58
|
+
return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
|
|
59
|
+
"div",
|
|
60
|
+
{
|
|
61
|
+
"data-slot": "sidebar-wrapper",
|
|
62
|
+
style: {
|
|
63
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
64
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
65
|
+
...style
|
|
66
|
+
},
|
|
67
|
+
className: cn(SIDEBAR_WRAPPER, className),
|
|
68
|
+
...props,
|
|
69
|
+
children
|
|
70
|
+
}
|
|
71
|
+
) });
|
|
72
|
+
}
|
|
73
|
+
function Sidebar({
|
|
74
|
+
side = "left",
|
|
75
|
+
variant = "sidebar",
|
|
76
|
+
collapsible = "offcanvas",
|
|
77
|
+
className,
|
|
78
|
+
children,
|
|
79
|
+
...props
|
|
80
|
+
}) {
|
|
81
|
+
const { state } = useSidebar();
|
|
82
|
+
if (collapsible === "none") {
|
|
83
|
+
return /* @__PURE__ */ jsx(
|
|
84
|
+
"div",
|
|
85
|
+
{
|
|
86
|
+
"data-slot": "sidebar",
|
|
87
|
+
className: cn(SIDEBAR_FLAT, className),
|
|
88
|
+
...props,
|
|
89
|
+
children
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
return /* @__PURE__ */ jsx(
|
|
94
|
+
"div",
|
|
95
|
+
{
|
|
96
|
+
className: "group peer text-ink hidden md:block",
|
|
97
|
+
"data-state": state,
|
|
98
|
+
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
99
|
+
"data-variant": variant,
|
|
100
|
+
"data-side": side,
|
|
101
|
+
"data-slot": "sidebar",
|
|
102
|
+
children: /* @__PURE__ */ jsx(
|
|
103
|
+
"div",
|
|
104
|
+
{
|
|
105
|
+
"data-slot": "sidebar-inner",
|
|
106
|
+
className: cn(SIDEBAR_INNER, className),
|
|
107
|
+
...props,
|
|
108
|
+
children
|
|
109
|
+
}
|
|
110
|
+
)
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
function SidebarTrigger({
|
|
115
|
+
className,
|
|
116
|
+
onClick,
|
|
117
|
+
children,
|
|
118
|
+
...props
|
|
119
|
+
}) {
|
|
120
|
+
const { toggleSidebar } = useSidebar();
|
|
121
|
+
return /* @__PURE__ */ jsxs(
|
|
122
|
+
"button",
|
|
123
|
+
{
|
|
124
|
+
type: "button",
|
|
125
|
+
"data-sidebar": "trigger",
|
|
126
|
+
"data-slot": "sidebar-trigger",
|
|
127
|
+
"aria-label": "Toggle Sidebar",
|
|
128
|
+
className: cn(SIDEBAR_TRIGGER, className),
|
|
129
|
+
onClick: (event) => {
|
|
130
|
+
onClick?.(event);
|
|
131
|
+
toggleSidebar();
|
|
132
|
+
},
|
|
133
|
+
...props,
|
|
134
|
+
children: [
|
|
135
|
+
children,
|
|
136
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
function SidebarRail({
|
|
142
|
+
className,
|
|
143
|
+
...props
|
|
144
|
+
}) {
|
|
145
|
+
const { toggleSidebar } = useSidebar();
|
|
146
|
+
return /* @__PURE__ */ jsx(
|
|
147
|
+
"button",
|
|
148
|
+
{
|
|
149
|
+
type: "button",
|
|
150
|
+
"data-sidebar": "rail",
|
|
151
|
+
"data-slot": "sidebar-rail",
|
|
152
|
+
"aria-label": "Toggle Sidebar",
|
|
153
|
+
tabIndex: -1,
|
|
154
|
+
onClick: toggleSidebar,
|
|
155
|
+
title: "Toggle Sidebar",
|
|
156
|
+
className: cn(SIDEBAR_RAIL, className),
|
|
157
|
+
...props
|
|
158
|
+
}
|
|
159
|
+
);
|
|
160
|
+
}
|
|
161
|
+
function SidebarInset({ className, ...props }) {
|
|
162
|
+
return /* @__PURE__ */ jsx(
|
|
163
|
+
"main",
|
|
164
|
+
{
|
|
165
|
+
"data-slot": "sidebar-inset",
|
|
166
|
+
className: cn(SIDEBAR_INSET, className),
|
|
167
|
+
...props
|
|
168
|
+
}
|
|
169
|
+
);
|
|
170
|
+
}
|
|
171
|
+
function SidebarHeader({ className, ...props }) {
|
|
172
|
+
return /* @__PURE__ */ jsx(
|
|
173
|
+
"div",
|
|
174
|
+
{
|
|
175
|
+
"data-slot": "sidebar-header",
|
|
176
|
+
"data-sidebar": "header",
|
|
177
|
+
className: cn(SIDEBAR_HEADER, className),
|
|
178
|
+
...props
|
|
179
|
+
}
|
|
180
|
+
);
|
|
181
|
+
}
|
|
182
|
+
function SidebarFooter({ className, ...props }) {
|
|
183
|
+
return /* @__PURE__ */ jsx(
|
|
184
|
+
"div",
|
|
185
|
+
{
|
|
186
|
+
"data-slot": "sidebar-footer",
|
|
187
|
+
"data-sidebar": "footer",
|
|
188
|
+
className: cn(SIDEBAR_FOOTER, className),
|
|
189
|
+
...props
|
|
190
|
+
}
|
|
191
|
+
);
|
|
192
|
+
}
|
|
193
|
+
function SidebarSeparator({
|
|
194
|
+
className,
|
|
195
|
+
...props
|
|
196
|
+
}) {
|
|
197
|
+
return /* @__PURE__ */ jsx(
|
|
198
|
+
"div",
|
|
199
|
+
{
|
|
200
|
+
"data-slot": "sidebar-separator",
|
|
201
|
+
"data-sidebar": "separator",
|
|
202
|
+
role: "separator",
|
|
203
|
+
className: cn(SIDEBAR_SEPARATOR, className),
|
|
204
|
+
...props
|
|
205
|
+
}
|
|
206
|
+
);
|
|
207
|
+
}
|
|
208
|
+
function SidebarContent({ className, ...props }) {
|
|
209
|
+
return /* @__PURE__ */ jsx(
|
|
210
|
+
"div",
|
|
211
|
+
{
|
|
212
|
+
"data-slot": "sidebar-content",
|
|
213
|
+
"data-sidebar": "content",
|
|
214
|
+
className: cn(SIDEBAR_CONTENT, className),
|
|
215
|
+
...props
|
|
216
|
+
}
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
function SidebarGroup({ className, ...props }) {
|
|
220
|
+
return /* @__PURE__ */ jsx(
|
|
221
|
+
"div",
|
|
222
|
+
{
|
|
223
|
+
"data-slot": "sidebar-group",
|
|
224
|
+
"data-sidebar": "group",
|
|
225
|
+
className: cn(SIDEBAR_GROUP, className),
|
|
226
|
+
...props
|
|
227
|
+
}
|
|
228
|
+
);
|
|
229
|
+
}
|
|
230
|
+
function SidebarGroupLabel({
|
|
231
|
+
className,
|
|
232
|
+
asChild = false,
|
|
233
|
+
...props
|
|
234
|
+
}) {
|
|
235
|
+
const Comp = asChild ? Slot : "div";
|
|
236
|
+
return /* @__PURE__ */ jsx(
|
|
237
|
+
Comp,
|
|
238
|
+
{
|
|
239
|
+
"data-slot": "sidebar-group-label",
|
|
240
|
+
"data-sidebar": "group-label",
|
|
241
|
+
className: cn(SIDEBAR_GROUP_LABEL, className),
|
|
242
|
+
...props
|
|
243
|
+
}
|
|
244
|
+
);
|
|
245
|
+
}
|
|
246
|
+
function SidebarGroupContent({
|
|
247
|
+
className,
|
|
248
|
+
...props
|
|
249
|
+
}) {
|
|
250
|
+
return /* @__PURE__ */ jsx(
|
|
251
|
+
"div",
|
|
252
|
+
{
|
|
253
|
+
"data-slot": "sidebar-group-content",
|
|
254
|
+
"data-sidebar": "group-content",
|
|
255
|
+
className: cn(SIDEBAR_GROUP_CONTENT, className),
|
|
256
|
+
...props
|
|
257
|
+
}
|
|
258
|
+
);
|
|
259
|
+
}
|
|
260
|
+
function SidebarMenu({ className, ...props }) {
|
|
261
|
+
return /* @__PURE__ */ jsx(
|
|
262
|
+
"ul",
|
|
263
|
+
{
|
|
264
|
+
"data-slot": "sidebar-menu",
|
|
265
|
+
"data-sidebar": "menu",
|
|
266
|
+
className: cn(SIDEBAR_MENU, className),
|
|
267
|
+
...props
|
|
268
|
+
}
|
|
269
|
+
);
|
|
270
|
+
}
|
|
271
|
+
function SidebarMenuItem({ className, ...props }) {
|
|
272
|
+
return /* @__PURE__ */ jsx(
|
|
273
|
+
"li",
|
|
274
|
+
{
|
|
275
|
+
"data-slot": "sidebar-menu-item",
|
|
276
|
+
"data-sidebar": "menu-item",
|
|
277
|
+
className: cn(SIDEBAR_MENU_ITEM, className),
|
|
278
|
+
...props
|
|
279
|
+
}
|
|
280
|
+
);
|
|
281
|
+
}
|
|
282
|
+
function SidebarMenuButton({
|
|
283
|
+
asChild = false,
|
|
284
|
+
isActive = false,
|
|
285
|
+
variant = "ghost",
|
|
286
|
+
size = "sm",
|
|
287
|
+
className,
|
|
288
|
+
...props
|
|
289
|
+
}) {
|
|
290
|
+
const Comp = asChild ? Slot : "button";
|
|
291
|
+
return /* @__PURE__ */ jsx(
|
|
292
|
+
Comp,
|
|
293
|
+
{
|
|
294
|
+
"data-slot": "sidebar-menu-button",
|
|
295
|
+
"data-sidebar": "menu-button",
|
|
296
|
+
"data-size": size,
|
|
297
|
+
"data-active": isActive,
|
|
298
|
+
className: cn(
|
|
299
|
+
SIDEBAR_MENU_BUTTON_BASE,
|
|
300
|
+
buttonVariantClasses[variant],
|
|
301
|
+
sidebarMenuButtonSizeClasses[size],
|
|
302
|
+
className
|
|
303
|
+
),
|
|
304
|
+
...props
|
|
305
|
+
}
|
|
306
|
+
);
|
|
307
|
+
}
|
|
308
|
+
export {
|
|
309
|
+
Sidebar,
|
|
310
|
+
SidebarContent,
|
|
311
|
+
SidebarFooter,
|
|
312
|
+
SidebarGroup,
|
|
313
|
+
SidebarGroupContent,
|
|
314
|
+
SidebarGroupLabel,
|
|
315
|
+
SidebarHeader,
|
|
316
|
+
SidebarInset,
|
|
317
|
+
SidebarMenu,
|
|
318
|
+
SidebarMenuButton,
|
|
319
|
+
SidebarMenuItem,
|
|
320
|
+
SidebarProvider,
|
|
321
|
+
SidebarRail,
|
|
322
|
+
SidebarSeparator,
|
|
323
|
+
SidebarTrigger,
|
|
324
|
+
useSidebar
|
|
325
|
+
};
|
|
326
|
+
//# sourceMappingURL=sidebar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Slot } from \"../primitives/slot\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport {\n SIDEBAR_MENU_BUTTON_BASE,\n sidebarMenuButtonSizeClasses,\n SIDEBAR_WRAPPER,\n SIDEBAR_FLAT,\n SIDEBAR_INNER,\n SIDEBAR_TRIGGER,\n SIDEBAR_RAIL,\n SIDEBAR_INSET,\n SIDEBAR_HEADER,\n SIDEBAR_FOOTER,\n SIDEBAR_SEPARATOR,\n SIDEBAR_CONTENT,\n SIDEBAR_GROUP,\n SIDEBAR_GROUP_LABEL,\n SIDEBAR_GROUP_CONTENT,\n SIDEBAR_MENU,\n SIDEBAR_MENU_ITEM,\n type SidebarMenuButtonSize,\n} from \"../generated/sidebar\";\nimport { buttonVariantClasses, type ButtonVariant } from \"../generated/button\";\n\nexport type { SidebarMenuButtonSize };\n\n// omitted: mobile sheet, cookie, kbd shortcut — see README Limitations\n\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\n\ninterface SidebarContextValue {\n state: \"expanded\" | \"collapsed\";\n open: boolean;\n setOpen: (open: boolean) => void;\n toggleSidebar: () => void;\n}\n\nconst SidebarContext = React.createContext<SidebarContextValue | null>(null);\n\nexport function useSidebar(): SidebarContextValue {\n const ctx = React.useContext(SidebarContext);\n if (!ctx) throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n return ctx;\n}\n\nexport interface SidebarProviderProps extends React.ComponentProps<\"div\"> {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}\n\nexport function SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange,\n className,\n style,\n children,\n ...props\n}: SidebarProviderProps) {\n const [open, setOpen] = useControllableState<boolean>({\n ...(openProp !== undefined ? { value: openProp } : {}),\n defaultValue: defaultOpen,\n ...(onOpenChange ? { onChange: onOpenChange } : {}),\n });\n const toggleSidebar = React.useCallback(\n () => setOpen(!open),\n [open, setOpen],\n );\n const state = open ? \"expanded\" : \"collapsed\";\n\n const contextValue = React.useMemo<SidebarContextValue>(\n () => ({ state, open, setOpen, toggleSidebar }),\n [state, open, setOpen, toggleSidebar],\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH,\n \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn(SIDEBAR_WRAPPER, className)}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nexport interface SidebarProps extends React.ComponentProps<\"div\"> {\n side?: \"left\" | \"right\";\n variant?: \"sidebar\" | \"floating\" | \"inset\";\n collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}\n\nexport function Sidebar({\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n}: SidebarProps) {\n const { state } = useSidebar();\n\n if (collapsible === \"none\") {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn(SIDEBAR_FLAT, className)}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n return (\n <div\n className=\"group peer text-ink hidden md:block\"\n data-state={state}\n data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n <div\n data-slot=\"sidebar-inner\"\n className={cn(SIDEBAR_INNER, className)}\n {...props}\n >\n {children}\n </div>\n </div>\n );\n}\n\nexport function SidebarTrigger({\n className,\n onClick,\n children,\n ...props\n}: React.ComponentProps<\"button\">) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n type=\"button\"\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n aria-label=\"Toggle Sidebar\"\n className={cn(SIDEBAR_TRIGGER, className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n {children}\n <span className=\"sr-only\">Toggle Sidebar</span>\n </button>\n );\n}\n\nexport function SidebarRail({\n className,\n ...props\n}: React.ComponentProps<\"button\">) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n type=\"button\"\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(SIDEBAR_RAIL, className)}\n {...props}\n />\n );\n}\n\nexport function SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(SIDEBAR_INSET, className)}\n {...props}\n />\n );\n}\n\nexport function SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-header\"\n data-sidebar=\"header\"\n className={cn(SIDEBAR_HEADER, className)}\n {...props}\n />\n );\n}\n\nexport function SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n data-sidebar=\"footer\"\n className={cn(SIDEBAR_FOOTER, className)}\n {...props}\n />\n );\n}\n\nexport function SidebarSeparator({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n role=\"separator\"\n className={cn(SIDEBAR_SEPARATOR, className)}\n {...props}\n />\n );\n}\n\nexport function SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn(SIDEBAR_CONTENT, className)}\n {...props}\n />\n );\n}\n\nexport function SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-group\"\n data-sidebar=\"group\"\n className={cn(SIDEBAR_GROUP, className)}\n {...props}\n />\n );\n}\n\nexport interface SidebarGroupLabelProps extends React.ComponentProps<\"div\"> {\n asChild?: boolean;\n}\n\nexport function SidebarGroupLabel({\n className,\n asChild = false,\n ...props\n}: SidebarGroupLabelProps) {\n const Comp = asChild ? Slot : \"div\";\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(SIDEBAR_GROUP_LABEL, className)}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n\nexport function SidebarGroupContent({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n data-sidebar=\"group-content\"\n className={cn(SIDEBAR_GROUP_CONTENT, className)}\n {...props}\n />\n );\n}\n\nexport function SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n data-sidebar=\"menu\"\n className={cn(SIDEBAR_MENU, className)}\n {...props}\n />\n );\n}\n\nexport function SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n data-sidebar=\"menu-item\"\n className={cn(SIDEBAR_MENU_ITEM, className)}\n {...props}\n />\n );\n}\n\nexport interface SidebarMenuButtonProps extends React.ComponentProps<\"button\"> {\n asChild?: boolean;\n isActive?: boolean;\n variant?: ButtonVariant;\n size?: SidebarMenuButtonSize;\n}\n\nexport function SidebarMenuButton({\n asChild = false,\n isActive = false,\n variant = \"ghost\",\n size = \"sm\",\n className,\n ...props\n}: SidebarMenuButtonProps) {\n const Comp = asChild ? Slot : \"button\";\n\n return (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n SIDEBAR_MENU_BUTTON_BASE,\n buttonVariantClasses[variant],\n sidebarMenuButtonSizeClasses[size],\n className,\n )}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { cn } from "../lib/cn.js";
|
|
4
|
+
import { SKELETON_BASE } from "../generated/skeleton.js";
|
|
5
|
+
function Skeleton({ className, ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx(
|
|
7
|
+
"div",
|
|
8
|
+
{
|
|
9
|
+
"data-slot": "skeleton",
|
|
10
|
+
className: cn(SKELETON_BASE, className),
|
|
11
|
+
...props
|
|
12
|
+
}
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
export {
|
|
16
|
+
Skeleton
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=skeleton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SKELETON_BASE } from \"../generated/skeleton\";\n\nexport function Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"skeleton\"\n className={cn(SKELETON_BASE, className)}\n {...props}\n />\n );\n}\n"],"mappings":"AAMI;AANJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAEvB,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,SAAS;AAAA,MACrC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { cn } from "../lib/cn.js";
|
|
5
|
+
import { useControllableState } from "../primitives/use-controllable-state.js";
|
|
6
|
+
import { SLIDER_RANGE, SLIDER_ROOT, SLIDER_THUMB, SLIDER_TRACK } from "../generated/slider.js";
|
|
7
|
+
function clampStep(value, min, max, step) {
|
|
8
|
+
const clamped = Math.min(max, Math.max(min, value));
|
|
9
|
+
if (step <= 0) return clamped;
|
|
10
|
+
const steps = Math.round((clamped - min) / step);
|
|
11
|
+
return Math.min(max, Math.max(min, min + steps * step));
|
|
12
|
+
}
|
|
13
|
+
function Slider({
|
|
14
|
+
className,
|
|
15
|
+
value,
|
|
16
|
+
defaultValue = 0,
|
|
17
|
+
onValueChange,
|
|
18
|
+
min = 0,
|
|
19
|
+
max = 100,
|
|
20
|
+
step = 1,
|
|
21
|
+
orientation = "horizontal",
|
|
22
|
+
disabled = false,
|
|
23
|
+
...props
|
|
24
|
+
}) {
|
|
25
|
+
const [raw, setRaw] = useControllableState({
|
|
26
|
+
...value !== void 0 ? { value } : {},
|
|
27
|
+
defaultValue,
|
|
28
|
+
...onValueChange ? { onChange: onValueChange } : {}
|
|
29
|
+
});
|
|
30
|
+
const current = clampStep(raw, min, max, step);
|
|
31
|
+
const span = Math.max(max - min, Number.EPSILON);
|
|
32
|
+
const percent = Math.min(100, Math.max(0, (current - min) / span * 100));
|
|
33
|
+
const trackRef = React.useRef(null);
|
|
34
|
+
const draggingRef = React.useRef(false);
|
|
35
|
+
const valueFromPointer = React.useCallback(
|
|
36
|
+
(clientX, clientY) => {
|
|
37
|
+
const rect = trackRef.current?.getBoundingClientRect();
|
|
38
|
+
if (!rect) return current;
|
|
39
|
+
const ratio = orientation === "vertical" ? (rect.bottom - clientY) / rect.height : (clientX - rect.left) / rect.width;
|
|
40
|
+
return clampStep(min + ratio * (max - min), min, max, step);
|
|
41
|
+
},
|
|
42
|
+
[current, orientation, min, max, step]
|
|
43
|
+
);
|
|
44
|
+
const onKeyDown = (event) => {
|
|
45
|
+
if (disabled) return;
|
|
46
|
+
let next;
|
|
47
|
+
switch (event.key) {
|
|
48
|
+
case "ArrowRight":
|
|
49
|
+
case "ArrowUp":
|
|
50
|
+
next = current + step;
|
|
51
|
+
break;
|
|
52
|
+
case "ArrowLeft":
|
|
53
|
+
case "ArrowDown":
|
|
54
|
+
next = current - step;
|
|
55
|
+
break;
|
|
56
|
+
case "Home":
|
|
57
|
+
next = min;
|
|
58
|
+
break;
|
|
59
|
+
case "End":
|
|
60
|
+
next = max;
|
|
61
|
+
break;
|
|
62
|
+
default:
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
event.preventDefault();
|
|
66
|
+
setRaw(clampStep(next, min, max, step));
|
|
67
|
+
};
|
|
68
|
+
const onPointerDown = (event) => {
|
|
69
|
+
if (disabled) return;
|
|
70
|
+
draggingRef.current = true;
|
|
71
|
+
event.currentTarget.setPointerCapture?.(event.pointerId);
|
|
72
|
+
setRaw(valueFromPointer(event.clientX, event.clientY));
|
|
73
|
+
};
|
|
74
|
+
const onPointerMove = (event) => {
|
|
75
|
+
if (!draggingRef.current || disabled) return;
|
|
76
|
+
setRaw(valueFromPointer(event.clientX, event.clientY));
|
|
77
|
+
};
|
|
78
|
+
const onPointerUp = (event) => {
|
|
79
|
+
draggingRef.current = false;
|
|
80
|
+
event.currentTarget.releasePointerCapture?.(event.pointerId);
|
|
81
|
+
};
|
|
82
|
+
const rangeStyle = orientation === "vertical" ? { height: `${percent}%` } : { width: `${percent}%` };
|
|
83
|
+
const thumbStyle = orientation === "vertical" ? { position: "absolute", bottom: `${percent}%`, left: "50%", transform: "translate(-50%, 50%)" } : { position: "absolute", left: `${percent}%`, top: "50%", transform: "translate(-50%, -50%)" };
|
|
84
|
+
return /* @__PURE__ */ jsxs(
|
|
85
|
+
"span",
|
|
86
|
+
{
|
|
87
|
+
"data-slot": "slider",
|
|
88
|
+
"data-orientation": orientation,
|
|
89
|
+
"data-disabled": disabled || void 0,
|
|
90
|
+
className: cn(SLIDER_ROOT, className),
|
|
91
|
+
...props,
|
|
92
|
+
onPointerDown,
|
|
93
|
+
onPointerMove,
|
|
94
|
+
onPointerUp,
|
|
95
|
+
children: [
|
|
96
|
+
/* @__PURE__ */ jsx(
|
|
97
|
+
"span",
|
|
98
|
+
{
|
|
99
|
+
ref: trackRef,
|
|
100
|
+
"data-slot": "slider-track",
|
|
101
|
+
"data-orientation": orientation,
|
|
102
|
+
className: SLIDER_TRACK,
|
|
103
|
+
children: /* @__PURE__ */ jsx(
|
|
104
|
+
"span",
|
|
105
|
+
{
|
|
106
|
+
"data-slot": "slider-range",
|
|
107
|
+
"data-orientation": orientation,
|
|
108
|
+
className: SLIDER_RANGE,
|
|
109
|
+
style: rangeStyle
|
|
110
|
+
}
|
|
111
|
+
)
|
|
112
|
+
}
|
|
113
|
+
),
|
|
114
|
+
/* @__PURE__ */ jsx(
|
|
115
|
+
"span",
|
|
116
|
+
{
|
|
117
|
+
"data-slot": "slider-thumb",
|
|
118
|
+
"data-orientation": orientation,
|
|
119
|
+
className: SLIDER_THUMB,
|
|
120
|
+
style: thumbStyle,
|
|
121
|
+
role: "slider",
|
|
122
|
+
tabIndex: disabled ? -1 : 0,
|
|
123
|
+
"aria-valuenow": current,
|
|
124
|
+
"aria-valuemin": min,
|
|
125
|
+
"aria-valuemax": max,
|
|
126
|
+
"aria-orientation": orientation,
|
|
127
|
+
"aria-disabled": disabled || void 0,
|
|
128
|
+
onKeyDown
|
|
129
|
+
}
|
|
130
|
+
)
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
export {
|
|
136
|
+
Slider
|
|
137
|
+
};
|
|
138
|
+
//# sourceMappingURL=slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { SLIDER_RANGE, SLIDER_ROOT, SLIDER_THUMB, SLIDER_TRACK } from \"../generated/slider\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\nfunction clampStep(value: number, min: number, max: number, step: number): number {\n const clamped = Math.min(max, Math.max(min, value));\n if (step <= 0) return clamped;\n const steps = Math.round((clamped - min) / step);\n return Math.min(max, Math.max(min, min + steps * step));\n}\n\nexport interface SliderProps\n extends Omit<React.ComponentProps<\"span\">, \"defaultValue\" | \"onChange\"> {\n value?: number;\n defaultValue?: number;\n onValueChange?: (value: number) => void;\n min?: number;\n max?: number;\n step?: number;\n orientation?: Orientation;\n disabled?: boolean;\n}\n\nexport function Slider({\n className,\n value,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = 100,\n step = 1,\n orientation = \"horizontal\",\n disabled = false,\n ...props\n}: SliderProps) {\n const [raw, setRaw] = useControllableState<number>({\n ...(value !== undefined ? { value } : {}),\n defaultValue,\n ...(onValueChange ? { onChange: onValueChange } : {}),\n });\n const current = clampStep(raw, min, max, step);\n const span = Math.max(max - min, Number.EPSILON);\n const percent = Math.min(100, Math.max(0, ((current - min) / span) * 100));\n\n const trackRef = React.useRef<HTMLSpanElement>(null);\n const draggingRef = React.useRef(false);\n\n const valueFromPointer = React.useCallback(\n (clientX: number, clientY: number) => {\n const rect = trackRef.current?.getBoundingClientRect();\n if (!rect) return current;\n const ratio =\n orientation === \"vertical\"\n ? (rect.bottom - clientY) / rect.height\n : (clientX - rect.left) / rect.width;\n return clampStep(min + ratio * (max - min), min, max, step);\n },\n [current, orientation, min, max, step],\n );\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n if (disabled) return;\n let next: number;\n switch (event.key) {\n case \"ArrowRight\":\n case \"ArrowUp\":\n next = current + step;\n break;\n case \"ArrowLeft\":\n case \"ArrowDown\":\n next = current - step;\n break;\n case \"Home\":\n next = min;\n break;\n case \"End\":\n next = max;\n break;\n default:\n return;\n }\n event.preventDefault();\n setRaw(clampStep(next, min, max, step));\n };\n\n const onPointerDown = (event: React.PointerEvent) => {\n if (disabled) return;\n draggingRef.current = true;\n event.currentTarget.setPointerCapture?.(event.pointerId);\n setRaw(valueFromPointer(event.clientX, event.clientY));\n };\n\n const onPointerMove = (event: React.PointerEvent) => {\n if (!draggingRef.current || disabled) return;\n setRaw(valueFromPointer(event.clientX, event.clientY));\n };\n\n const onPointerUp = (event: React.PointerEvent) => {\n draggingRef.current = false;\n event.currentTarget.releasePointerCapture?.(event.pointerId);\n };\n\n const rangeStyle: React.CSSProperties =\n orientation === \"vertical\" ? { height: `${percent}%` } : { width: `${percent}%` };\n // The thumb is absolutely positioned within the (relative) root and centered\n // on the value point; without `position:absolute` the `%` offset is ignored and\n // flow layout parks it at the end of the row.\n const thumbStyle: React.CSSProperties =\n orientation === \"vertical\"\n ? { position: \"absolute\", bottom: `${percent}%`, left: \"50%\", transform: \"translate(-50%, 50%)\" }\n : { position: \"absolute\", left: `${percent}%`, top: \"50%\", transform: \"translate(-50%, -50%)\" };\n\n return (\n <span\n data-slot=\"slider\"\n data-orientation={orientation}\n data-disabled={disabled || undefined}\n className={cn(SLIDER_ROOT, className)}\n {...props}\n // Pointer handling lives on the root, not the track: the thumb sits above\n // the track (absolute), so grabbing it must still start a drag.\n onPointerDown={onPointerDown}\n onPointerMove={onPointerMove}\n onPointerUp={onPointerUp}\n >\n <span\n ref={trackRef}\n data-slot=\"slider-track\"\n data-orientation={orientation}\n className={SLIDER_TRACK}\n >\n <span\n data-slot=\"slider-range\"\n data-orientation={orientation}\n className={SLIDER_RANGE}\n style={rangeStyle}\n />\n </span>\n <span\n data-slot=\"slider-thumb\"\n data-orientation={orientation}\n className={SLIDER_THUMB}\n style={thumbStyle}\n role=\"slider\"\n tabIndex={disabled ? -1 : 0}\n aria-valuenow={current}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-orientation={orientation}\n aria-disabled={disabled || undefined}\n onKeyDown={onKeyDown}\n />\n </span>\n );\n}\n"],"mappings":"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","names":[]}
|