@q9labsai/chalk-ui 4.0.1 → 4.1.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/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +489 -157
- package/dist/lib/use-is-mobile.d.ts +7 -0
- package/dist/lib/use-is-mobile.d.ts.map +1 -0
- package/dist/menu.d.ts +16 -0
- package/dist/menu.d.ts.map +1 -0
- package/dist/menu.js +102 -0
- package/dist/sidebar.d.ts +57 -0
- package/dist/sidebar.d.ts.map +1 -0
- package/dist/sidebar.js +353 -0
- package/dist/styles.css +29 -0
- package/package.json +19 -5
package/dist/index.js
CHANGED
|
@@ -34,8 +34,29 @@ __export(index_exports, {
|
|
|
34
34
|
EMOJI_KEYWORDS: () => EMOJI_KEYWORDS,
|
|
35
35
|
IconButton: () => IconButton,
|
|
36
36
|
Input: () => Input,
|
|
37
|
+
Menu: () => Menu,
|
|
38
|
+
MenuContent: () => MenuContent,
|
|
39
|
+
MenuGroupLabel: () => MenuGroupLabel,
|
|
40
|
+
MenuItem: () => MenuItem,
|
|
41
|
+
MenuRadioGroup: () => MenuRadioGroup,
|
|
42
|
+
MenuRadioItem: () => MenuRadioItem,
|
|
43
|
+
MenuSeparator: () => MenuSeparator,
|
|
44
|
+
MenuTrigger: () => MenuTrigger,
|
|
37
45
|
ProgressBar: () => ProgressBar,
|
|
38
46
|
Select: () => Select,
|
|
47
|
+
Sidebar: () => Sidebar,
|
|
48
|
+
SidebarContent: () => SidebarContent,
|
|
49
|
+
SidebarFooter: () => SidebarFooter,
|
|
50
|
+
SidebarGroup: () => SidebarGroup,
|
|
51
|
+
SidebarGroupLabel: () => SidebarGroupLabel,
|
|
52
|
+
SidebarHeader: () => SidebarHeader,
|
|
53
|
+
SidebarInset: () => SidebarInset,
|
|
54
|
+
SidebarMenu: () => SidebarMenu,
|
|
55
|
+
SidebarMenuButton: () => SidebarMenuButton,
|
|
56
|
+
SidebarMenuItem: () => SidebarMenuItem,
|
|
57
|
+
SidebarProvider: () => SidebarProvider,
|
|
58
|
+
SidebarRail: () => SidebarRail,
|
|
59
|
+
SidebarTrigger: () => SidebarTrigger,
|
|
39
60
|
Skeleton: () => Skeleton,
|
|
40
61
|
Spinner: () => Spinner,
|
|
41
62
|
StatusBadge: () => StatusBadge,
|
|
@@ -59,9 +80,11 @@ __export(index_exports, {
|
|
|
59
80
|
badgeVariants: () => badgeVariants,
|
|
60
81
|
buttonVariants: () => buttonVariants,
|
|
61
82
|
cn: () => cn,
|
|
83
|
+
sidebarMenuButtonVariants: () => sidebarMenuButtonVariants,
|
|
62
84
|
toast: () => toast,
|
|
63
85
|
toastManager: () => toastManager,
|
|
64
86
|
toggleVariants: () => toggleVariants,
|
|
87
|
+
useSidebar: () => useSidebar,
|
|
65
88
|
useToast: () => useToast
|
|
66
89
|
});
|
|
67
90
|
|
|
@@ -259,16 +282,100 @@ function Input({ className, type, label, error, icon, iconPosition = "left", siz
|
|
|
259
282
|
] });
|
|
260
283
|
}
|
|
261
284
|
|
|
285
|
+
// src/menu.tsx
|
|
286
|
+
import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
|
287
|
+
import { cva as cva3 } from "class-variance-authority";
|
|
288
|
+
|
|
289
|
+
// src/lib/theme.ts
|
|
290
|
+
var THEME_ATTRIBUTE_NAMES = ["data-chalk-theme", "data-theme"];
|
|
291
|
+
var THEME_CLASS_NAMES = ["dark", "light"];
|
|
292
|
+
var SYSTEM_DARK_QUERY = "(prefers-color-scheme: dark)";
|
|
293
|
+
var normalizeTheme = (value) => {
|
|
294
|
+
if (value === "dark" || value === "light") {
|
|
295
|
+
return value;
|
|
296
|
+
}
|
|
297
|
+
return null;
|
|
298
|
+
};
|
|
299
|
+
var resolveThemeFromElement = (element) => {
|
|
300
|
+
if (!element) return null;
|
|
301
|
+
const attributeTheme = THEME_ATTRIBUTE_NAMES.map((attributeName) => normalizeTheme(element.getAttribute(attributeName))).find((theme) => theme !== null);
|
|
302
|
+
const classTheme = THEME_CLASS_NAMES.find((theme) => element.classList.contains(theme));
|
|
303
|
+
return attributeTheme ?? classTheme ?? null;
|
|
304
|
+
};
|
|
305
|
+
var resolveSystemTheme = () => {
|
|
306
|
+
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return null;
|
|
307
|
+
return window.matchMedia(SYSTEM_DARK_QUERY).matches ? "dark" : "light";
|
|
308
|
+
};
|
|
309
|
+
var resolveExplicitThemeFromDocument = () => {
|
|
310
|
+
if (typeof document === "undefined") return null;
|
|
311
|
+
return resolveThemeFromElement(document.documentElement) ?? resolveThemeFromElement(document.body);
|
|
312
|
+
};
|
|
313
|
+
var resolveFallbackTheme = ({ defaultTheme, allowSystem }) => {
|
|
314
|
+
if (!allowSystem) return defaultTheme;
|
|
315
|
+
return resolveSystemTheme() ?? defaultTheme;
|
|
316
|
+
};
|
|
317
|
+
var resolveThemeFromDocument = ({ defaultTheme = "light", allowSystem = true } = {}) => {
|
|
318
|
+
const explicitTheme = resolveExplicitThemeFromDocument();
|
|
319
|
+
return explicitTheme ?? resolveFallbackTheme({ defaultTheme, allowSystem });
|
|
320
|
+
};
|
|
321
|
+
var resolvePortalThemeFromDocument = ({ defaultTheme = "light", allowSystem = true } = {}) => {
|
|
322
|
+
if (typeof document === "undefined") return defaultTheme;
|
|
323
|
+
const portalTheme = normalizeTheme(document.querySelector("[data-chalk-theme]")?.getAttribute("data-chalk-theme"));
|
|
324
|
+
if (portalTheme) return portalTheme;
|
|
325
|
+
return resolveThemeFromDocument({ defaultTheme, allowSystem });
|
|
326
|
+
};
|
|
327
|
+
|
|
328
|
+
// src/menu.tsx
|
|
329
|
+
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
330
|
+
function Menu(props) {
|
|
331
|
+
return /* @__PURE__ */ jsx5(MenuPrimitive.Root, { "data-slot": "menu", ...props });
|
|
332
|
+
}
|
|
333
|
+
function MenuTrigger(props) {
|
|
334
|
+
return /* @__PURE__ */ jsx5(MenuPrimitive.Trigger, { "data-slot": "menu-trigger", ...props });
|
|
335
|
+
}
|
|
336
|
+
var menuContentVariants = cva3("z-50 min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-xl border p-1 outline-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", {
|
|
337
|
+
variants: {
|
|
338
|
+
tone: {
|
|
339
|
+
default: "bg-popover text-popover-foreground border-border shadow-[var(--chalk-shadow-md)]",
|
|
340
|
+
sidebar: "bg-sidebar text-sidebar-foreground border-sidebar-border shadow-[0_18px_50px_rgba(0,0,0,0.45)]"
|
|
341
|
+
}
|
|
342
|
+
},
|
|
343
|
+
defaultVariants: { tone: "default" }
|
|
344
|
+
});
|
|
345
|
+
function MenuContent({ className, tone, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, children, ...props }) {
|
|
346
|
+
const portalTheme = resolvePortalThemeFromDocument();
|
|
347
|
+
return /* @__PURE__ */ jsx5(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx5(MenuPrimitive.Positioner, { className: "z-50", side, sideOffset, align, alignOffset, children: /* @__PURE__ */ jsx5(MenuPrimitive.Popup, { "data-chalk": true, "data-chalk-theme": portalTheme, "data-slot": "menu-content", className: cn("chalk-root", menuContentVariants({ tone }), className), ...props, children }) }) });
|
|
348
|
+
}
|
|
349
|
+
var menuItemClassName = "data-highlighted:bg-current/8 relative flex w-full cursor-default items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
|
|
350
|
+
function MenuItem({ className, ...props }) {
|
|
351
|
+
return /* @__PURE__ */ jsx5(MenuPrimitive.Item, { "data-slot": "menu-item", className: cn(menuItemClassName, className), ...props });
|
|
352
|
+
}
|
|
353
|
+
function MenuRadioGroup(props) {
|
|
354
|
+
return /* @__PURE__ */ jsx5(MenuPrimitive.RadioGroup, { "data-slot": "menu-radio-group", ...props });
|
|
355
|
+
}
|
|
356
|
+
function MenuRadioItem({ className, children, ...props }) {
|
|
357
|
+
return /* @__PURE__ */ jsxs3(MenuPrimitive.RadioItem, { "data-slot": "menu-radio-item", className: cn(menuItemClassName, className), ...props, children: [
|
|
358
|
+
children,
|
|
359
|
+
/* @__PURE__ */ jsx5(MenuPrimitive.RadioItemIndicator, { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "m5 12.5 4.5 4.5L19 7.5" }) }) })
|
|
360
|
+
] });
|
|
361
|
+
}
|
|
362
|
+
function MenuGroupLabel({ className, ...props }) {
|
|
363
|
+
return /* @__PURE__ */ jsx5(MenuPrimitive.GroupLabel, { "data-slot": "menu-group-label", className: cn("px-2 pt-1.5 pb-1 font-mono text-[10px] tracking-[0.08em] uppercase opacity-60", className), ...props });
|
|
364
|
+
}
|
|
365
|
+
function MenuSeparator({ className, ...props }) {
|
|
366
|
+
return /* @__PURE__ */ jsx5(MenuPrimitive.Separator, { "data-slot": "menu-separator", className: cn("bg-current/10 -mx-1 my-1 h-px", className), ...props });
|
|
367
|
+
}
|
|
368
|
+
|
|
262
369
|
// src/select.tsx
|
|
263
370
|
import * as React3 from "react";
|
|
264
|
-
import { jsx as
|
|
371
|
+
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
265
372
|
var Select = React3.forwardRef(function Select2({ options, value, onChange, label, error, size = "md", fullWidth = false, placeholder = "Select\u2026", disabled = false, className, id }, ref) {
|
|
266
373
|
const generatedId = React3.useId();
|
|
267
374
|
const selectId = id ?? generatedId;
|
|
268
375
|
const selectedOption = options.find((option) => option.value === value);
|
|
269
|
-
return /* @__PURE__ */
|
|
270
|
-
label ? /* @__PURE__ */
|
|
271
|
-
/* @__PURE__ */
|
|
376
|
+
return /* @__PURE__ */ jsxs4("label", { className: cn("flex flex-col gap-1", fullWidth && "w-full"), htmlFor: selectId, children: [
|
|
377
|
+
label ? /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium text-muted-foreground", children: label }) : null,
|
|
378
|
+
/* @__PURE__ */ jsxs4(
|
|
272
379
|
"select",
|
|
273
380
|
{
|
|
274
381
|
ref,
|
|
@@ -287,26 +394,315 @@ var Select = React3.forwardRef(function Select2({ options, value, onChange, labe
|
|
|
287
394
|
className
|
|
288
395
|
),
|
|
289
396
|
children: [
|
|
290
|
-
/* @__PURE__ */
|
|
291
|
-
options.map((option) => /* @__PURE__ */
|
|
397
|
+
/* @__PURE__ */ jsx6("option", { value: "", disabled: options.length > 0, children: placeholder }),
|
|
398
|
+
options.map((option) => /* @__PURE__ */ jsx6("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
|
|
292
399
|
]
|
|
293
400
|
}
|
|
294
401
|
),
|
|
295
|
-
error ? /* @__PURE__ */
|
|
402
|
+
error ? /* @__PURE__ */ jsx6("span", { className: "text-sm text-destructive", children: error }) : null
|
|
296
403
|
] });
|
|
297
404
|
});
|
|
298
405
|
Select.displayName = "Select";
|
|
299
406
|
|
|
300
|
-
// src/
|
|
407
|
+
// src/sidebar.tsx
|
|
408
|
+
import * as React6 from "react";
|
|
409
|
+
import { Drawer } from "@base-ui/react/drawer";
|
|
410
|
+
import { useRender as useRender2 } from "@base-ui/react/use-render";
|
|
411
|
+
import { cva as cva4 } from "class-variance-authority";
|
|
412
|
+
|
|
413
|
+
// src/lib/use-is-mobile.ts
|
|
301
414
|
import * as React4 from "react";
|
|
302
|
-
|
|
303
|
-
var
|
|
304
|
-
|
|
415
|
+
var MOBILE_BREAKPOINT = 768;
|
|
416
|
+
var MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
|
|
417
|
+
function matchMobileQuery() {
|
|
418
|
+
return typeof window.matchMedia === "function" ? window.matchMedia(MOBILE_QUERY) : null;
|
|
419
|
+
}
|
|
420
|
+
function useIsMobile() {
|
|
421
|
+
const subscribe = React4.useCallback((onChange) => {
|
|
422
|
+
const query = matchMobileQuery();
|
|
423
|
+
query?.addEventListener("change", onChange);
|
|
424
|
+
return () => query?.removeEventListener("change", onChange);
|
|
425
|
+
}, []);
|
|
426
|
+
return React4.useSyncExternalStore(
|
|
427
|
+
subscribe,
|
|
428
|
+
() => matchMobileQuery()?.matches ?? false,
|
|
429
|
+
() => false
|
|
430
|
+
);
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
// src/tooltip.tsx
|
|
434
|
+
import "react";
|
|
435
|
+
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
|
436
|
+
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
437
|
+
function TooltipProvider({ delay = 0, ...props }) {
|
|
438
|
+
return /* @__PURE__ */ jsx7(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay, ...props });
|
|
439
|
+
}
|
|
440
|
+
function Tooltip({ content, children, position = "top", delay = 200, className, ...props }) {
|
|
441
|
+
if (content !== void 0) {
|
|
442
|
+
return /* @__PURE__ */ jsx7(TooltipProvider, { delay, children: /* @__PURE__ */ jsxs5(TooltipPrimitive.Root, { children: [
|
|
443
|
+
/* @__PURE__ */ jsx7(
|
|
444
|
+
TooltipPrimitive.Trigger,
|
|
445
|
+
{
|
|
446
|
+
render: (triggerProps) => /* @__PURE__ */ jsx7("span", { ...triggerProps, className: "inline-flex", children })
|
|
447
|
+
}
|
|
448
|
+
),
|
|
449
|
+
/* @__PURE__ */ jsx7(TooltipContent, { className, side: position, children: content })
|
|
450
|
+
] }) });
|
|
451
|
+
}
|
|
452
|
+
return /* @__PURE__ */ jsx7(TooltipProvider, { children: /* @__PURE__ */ jsx7(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
|
|
453
|
+
}
|
|
454
|
+
function TooltipTrigger({ ...props }) {
|
|
455
|
+
return /* @__PURE__ */ jsx7(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
456
|
+
}
|
|
457
|
+
function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
|
|
458
|
+
const portalTheme = resolvePortalThemeFromDocument();
|
|
459
|
+
return /* @__PURE__ */ jsx7(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx7(TooltipPrimitive.Positioner, { align, alignOffset, side, sideOffset, className: "z-[9999]", children: /* @__PURE__ */ jsxs5(
|
|
460
|
+
TooltipPrimitive.Popup,
|
|
461
|
+
{
|
|
462
|
+
"data-chalk": true,
|
|
463
|
+
"data-chalk-theme": portalTheme,
|
|
464
|
+
"data-slot": "tooltip-content",
|
|
465
|
+
className: cn(
|
|
466
|
+
"chalk-root",
|
|
467
|
+
"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 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 rounded-lg px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background shadow-[var(--chalk-shadow-sm)] z-50 w-fit max-w-xs origin-(--transform-origin)",
|
|
468
|
+
className
|
|
469
|
+
),
|
|
470
|
+
...props,
|
|
471
|
+
children: [
|
|
472
|
+
children,
|
|
473
|
+
/* @__PURE__ */ jsx7(TooltipPrimitive.Arrow, { className: "size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
|
|
474
|
+
]
|
|
475
|
+
}
|
|
476
|
+
) }) });
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
// src/sidebar.tsx
|
|
480
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
481
|
+
var SIDEBAR_COOKIE_NAME = "chalk_sidebar_state";
|
|
482
|
+
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
483
|
+
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
484
|
+
var SidebarContext = React6.createContext(null);
|
|
485
|
+
function useSidebar() {
|
|
486
|
+
const context = React6.useContext(SidebarContext);
|
|
487
|
+
if (!context) throw new Error("useSidebar must be used inside a SidebarProvider");
|
|
488
|
+
return context;
|
|
489
|
+
}
|
|
490
|
+
function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, className, children, ...props }) {
|
|
491
|
+
const isMobile = useIsMobile();
|
|
492
|
+
const [openMobile, setOpenMobile] = React6.useState(false);
|
|
493
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React6.useState(defaultOpen);
|
|
494
|
+
const open = openProp ?? uncontrolledOpen;
|
|
495
|
+
const setOpen = React6.useCallback(
|
|
496
|
+
(value2) => {
|
|
497
|
+
if (onOpenChange) onOpenChange(value2);
|
|
498
|
+
else setUncontrolledOpen(value2);
|
|
499
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${value2}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}; samesite=lax`;
|
|
500
|
+
},
|
|
501
|
+
[onOpenChange]
|
|
502
|
+
);
|
|
503
|
+
const toggleSidebar = React6.useCallback(() => {
|
|
504
|
+
if (isMobile) setOpenMobile(!openMobile);
|
|
505
|
+
else setOpen(!open);
|
|
506
|
+
}, [isMobile, open, openMobile, setOpen]);
|
|
507
|
+
React6.useEffect(() => {
|
|
508
|
+
const toggleOnShortcut = (event) => {
|
|
509
|
+
if (event.key.toLowerCase() !== SIDEBAR_KEYBOARD_SHORTCUT || !(event.metaKey || event.ctrlKey)) return;
|
|
510
|
+
event.preventDefault();
|
|
511
|
+
toggleSidebar();
|
|
512
|
+
};
|
|
513
|
+
window.addEventListener("keydown", toggleOnShortcut);
|
|
514
|
+
return () => window.removeEventListener("keydown", toggleOnShortcut);
|
|
515
|
+
}, [toggleSidebar]);
|
|
516
|
+
const value = React6.useMemo(() => ({ state: open ? "expanded" : "collapsed", open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }), [isMobile, open, openMobile, setOpen, toggleSidebar]);
|
|
517
|
+
return /* @__PURE__ */ jsx8(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx8("div", { "data-slot": "sidebar-wrapper", className: cn("group/sidebar-wrapper flex min-h-svh w-full", className), ...props, children }) });
|
|
518
|
+
}
|
|
519
|
+
function Sidebar({ side = "left", variant = "sidebar", collapsible = "icon", title = "Navigation", className, children, ...props }) {
|
|
520
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
521
|
+
if (isMobile) {
|
|
522
|
+
const portalTheme = resolvePortalThemeFromDocument();
|
|
523
|
+
return /* @__PURE__ */ jsx8(Drawer.Root, { open: openMobile, onOpenChange: setOpenMobile, swipeDirection: side, children: /* @__PURE__ */ jsxs6(Drawer.Portal, { children: [
|
|
524
|
+
/* @__PURE__ */ jsx8(Drawer.Backdrop, { className: "fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0" }),
|
|
525
|
+
/* @__PURE__ */ jsx8(Drawer.Viewport, { className: cn("fixed inset-y-0 z-50 flex", side === "left" ? "left-0" : "right-0"), children: /* @__PURE__ */ jsxs6(
|
|
526
|
+
Drawer.Popup,
|
|
527
|
+
{
|
|
528
|
+
"data-chalk": true,
|
|
529
|
+
"data-chalk-theme": portalTheme,
|
|
530
|
+
"data-slot": "sidebar",
|
|
531
|
+
"data-mobile": "true",
|
|
532
|
+
className: cn(
|
|
533
|
+
"chalk-root bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width-mobile) flex-col transition-transform duration-300 ease-out",
|
|
534
|
+
side === "left" ? "data-ending-style:-translate-x-full data-starting-style:-translate-x-full" : "data-ending-style:translate-x-full data-starting-style:translate-x-full",
|
|
535
|
+
className
|
|
536
|
+
),
|
|
537
|
+
children: [
|
|
538
|
+
/* @__PURE__ */ jsx8(Drawer.Title, { className: "sr-only", children: title }),
|
|
539
|
+
children
|
|
540
|
+
]
|
|
541
|
+
}
|
|
542
|
+
) })
|
|
543
|
+
] }) });
|
|
544
|
+
}
|
|
545
|
+
if (collapsible === "none") {
|
|
546
|
+
return /* @__PURE__ */ jsx8("div", { "data-chalk": true, "data-slot": "sidebar", className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className), ...props, children });
|
|
547
|
+
}
|
|
548
|
+
return /* @__PURE__ */ jsxs6("div", { "data-chalk": true, "data-slot": "sidebar", "data-state": state, "data-collapsible": state === "collapsed" ? collapsible : "", "data-variant": variant, "data-side": side, className: "group peer text-sidebar-foreground hidden bg-transparent md:block", children: [
|
|
549
|
+
/* @__PURE__ */ jsx8(
|
|
550
|
+
"div",
|
|
551
|
+
{
|
|
552
|
+
className: cn(
|
|
553
|
+
"relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
|
554
|
+
"group-data-[collapsible=offcanvas]:w-0",
|
|
555
|
+
variant === "floating" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
|
556
|
+
)
|
|
557
|
+
}
|
|
558
|
+
),
|
|
559
|
+
/* @__PURE__ */ jsx8(
|
|
560
|
+
"div",
|
|
561
|
+
{
|
|
562
|
+
className: cn(
|
|
563
|
+
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
564
|
+
side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
565
|
+
variant === "floating" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
|
|
566
|
+
className
|
|
567
|
+
),
|
|
568
|
+
...props,
|
|
569
|
+
children: /* @__PURE__ */ jsx8("div", { "data-sidebar": "sidebar", className: cn("bg-sidebar flex h-full w-full flex-col", variant === "floating" ? "border-sidebar-border rounded-xl border shadow-[var(--chalk-shadow-lg)]" : ""), children })
|
|
570
|
+
}
|
|
571
|
+
)
|
|
572
|
+
] });
|
|
573
|
+
}
|
|
574
|
+
function SidebarInset({ className, ...props }) {
|
|
575
|
+
return /* @__PURE__ */ jsx8("main", { "data-slot": "sidebar-inset", className: cn("relative flex w-full min-w-0 flex-1 flex-col", className), ...props });
|
|
576
|
+
}
|
|
577
|
+
function SidebarTrigger({ className, onClick, children, ...props }) {
|
|
578
|
+
const { toggleSidebar, isMobile, open } = useSidebar();
|
|
579
|
+
return /* @__PURE__ */ jsx8(
|
|
580
|
+
"button",
|
|
581
|
+
{
|
|
582
|
+
type: "button",
|
|
583
|
+
"data-slot": "sidebar-trigger",
|
|
584
|
+
"aria-label": isMobile || !open ? "Open navigation" : "Collapse navigation",
|
|
585
|
+
"aria-expanded": isMobile ? void 0 : open,
|
|
586
|
+
onClick: (event) => {
|
|
587
|
+
onClick?.(event);
|
|
588
|
+
toggleSidebar();
|
|
589
|
+
},
|
|
590
|
+
className: cn("text-foreground/70 hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 inline-flex size-8 shrink-0 items-center justify-center rounded-lg outline-none transition-colors focus-visible:ring-[3px] [&_svg]:size-4.5", className),
|
|
591
|
+
...props,
|
|
592
|
+
children: children ?? /* @__PURE__ */ jsx8(PanelLeftIcon, {})
|
|
593
|
+
}
|
|
594
|
+
);
|
|
595
|
+
}
|
|
596
|
+
function SidebarRail({ className, ...props }) {
|
|
597
|
+
const { toggleSidebar } = useSidebar();
|
|
598
|
+
return /* @__PURE__ */ jsx8(
|
|
599
|
+
"button",
|
|
600
|
+
{
|
|
601
|
+
type: "button",
|
|
602
|
+
"data-slot": "sidebar-rail",
|
|
603
|
+
"aria-label": "Toggle navigation",
|
|
604
|
+
tabIndex: -1,
|
|
605
|
+
onClick: toggleSidebar,
|
|
606
|
+
title: "Toggle navigation",
|
|
607
|
+
className: cn(
|
|
608
|
+
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
|
|
609
|
+
"in-data-[side=left]:-right-4 in-data-[side=right]:left-0",
|
|
610
|
+
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
|
611
|
+
"in-data-[collapsible=offcanvas]:hover:bg-sidebar in-data-[collapsible=offcanvas]:translate-x-0 in-data-[collapsible=offcanvas]:after:left-full",
|
|
612
|
+
className
|
|
613
|
+
),
|
|
614
|
+
...props
|
|
615
|
+
}
|
|
616
|
+
);
|
|
617
|
+
}
|
|
618
|
+
function SidebarHeader({ className, ...props }) {
|
|
619
|
+
return /* @__PURE__ */ jsx8("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn("flex flex-col gap-2 p-3", className), ...props });
|
|
620
|
+
}
|
|
621
|
+
function SidebarContent({ className, ...props }) {
|
|
622
|
+
return /* @__PURE__ */ jsx8("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("flex min-h-0 flex-1 flex-col gap-4 overflow-x-hidden overflow-y-auto p-3 group-data-[collapsible=icon]:overflow-hidden", className), ...props });
|
|
623
|
+
}
|
|
624
|
+
function SidebarFooter({ className, ...props }) {
|
|
625
|
+
return /* @__PURE__ */ jsx8("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn("border-sidebar-border flex flex-col gap-1 border-t p-3", className), ...props });
|
|
626
|
+
}
|
|
627
|
+
function SidebarGroup({ className, ...props }) {
|
|
628
|
+
return /* @__PURE__ */ jsx8("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col", className), ...props });
|
|
629
|
+
}
|
|
630
|
+
function SidebarGroupLabel({ className, ...props }) {
|
|
631
|
+
return /* @__PURE__ */ jsx8(
|
|
632
|
+
"div",
|
|
633
|
+
{
|
|
634
|
+
"data-slot": "sidebar-group-label",
|
|
635
|
+
"data-sidebar": "group-label",
|
|
636
|
+
className: cn(
|
|
637
|
+
"text-sidebar-foreground/55 flex h-8 shrink-0 items-center rounded-md px-2 font-mono text-[10px] tracking-[0.09em] uppercase transition-[margin,opacity] duration-200 ease-linear",
|
|
638
|
+
"group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
|
639
|
+
className
|
|
640
|
+
),
|
|
641
|
+
...props
|
|
642
|
+
}
|
|
643
|
+
);
|
|
644
|
+
}
|
|
645
|
+
function SidebarMenu({ className, ...props }) {
|
|
646
|
+
return /* @__PURE__ */ jsx8("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-0.5", className), ...props });
|
|
647
|
+
}
|
|
648
|
+
function SidebarMenuItem({ className, ...props }) {
|
|
649
|
+
return /* @__PURE__ */ jsx8("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props });
|
|
650
|
+
}
|
|
651
|
+
var sidebarMenuButtonVariants = cva4(
|
|
652
|
+
"peer/menu-button ring-sidebar-ring flex w-full items-center gap-3 overflow-hidden rounded-lg px-2.5 text-left text-sm font-medium outline-none transition-colors focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[collapsible=icon]:size-9! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0! [&>span:last-child]:truncate [&>svg]:size-4.5 [&>svg]:shrink-0",
|
|
653
|
+
{
|
|
654
|
+
variants: {
|
|
655
|
+
variant: {
|
|
656
|
+
default: "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
|
657
|
+
outline: "border-sidebar-border hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground border bg-transparent",
|
|
658
|
+
primary: "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90 justify-start"
|
|
659
|
+
},
|
|
660
|
+
size: {
|
|
661
|
+
default: "h-9",
|
|
662
|
+
lg: "h-12 group-data-[collapsible=icon]:p-0!"
|
|
663
|
+
}
|
|
664
|
+
},
|
|
665
|
+
defaultVariants: { variant: "default", size: "default" }
|
|
666
|
+
}
|
|
667
|
+
);
|
|
668
|
+
function SidebarMenuButton({ render, isActive = false, variant, size, tooltip, className, ...props }) {
|
|
669
|
+
const { isMobile, state } = useSidebar();
|
|
670
|
+
const element = useRender2({
|
|
671
|
+
render,
|
|
672
|
+
defaultTagName: "button",
|
|
673
|
+
state: {},
|
|
674
|
+
props: {
|
|
675
|
+
type: render ? void 0 : "button",
|
|
676
|
+
"data-slot": "sidebar-menu-button",
|
|
677
|
+
"data-sidebar": "menu-button",
|
|
678
|
+
"data-active": isActive,
|
|
679
|
+
className: cn(sidebarMenuButtonVariants({ variant, size }), className),
|
|
680
|
+
...props
|
|
681
|
+
}
|
|
682
|
+
});
|
|
683
|
+
if (!tooltip || isMobile || state !== "collapsed") return element;
|
|
684
|
+
return /* @__PURE__ */ jsxs6(Tooltip, { children: [
|
|
685
|
+
/* @__PURE__ */ jsx8(TooltipTrigger, { render: element }),
|
|
686
|
+
/* @__PURE__ */ jsx8(TooltipContent, { side: "right", sideOffset: 10, children: tooltip })
|
|
687
|
+
] });
|
|
688
|
+
}
|
|
689
|
+
function PanelLeftIcon() {
|
|
690
|
+
return /* @__PURE__ */ jsxs6("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
691
|
+
/* @__PURE__ */ jsx8("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2.5" }),
|
|
692
|
+
/* @__PURE__ */ jsx8("path", { d: "M9.5 4v16" })
|
|
693
|
+
] });
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
// src/textarea.tsx
|
|
697
|
+
import * as React7 from "react";
|
|
698
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
699
|
+
var Textarea = React7.forwardRef(function Textarea2({ label, error, showCount = false, resize = "vertical", maxLength, value, className, id, ...props }, ref) {
|
|
700
|
+
const generatedId = React7.useId();
|
|
305
701
|
const textareaId = id ?? generatedId;
|
|
306
702
|
const currentLength = typeof value === "string" ? value.length : 0;
|
|
307
|
-
return /* @__PURE__ */
|
|
308
|
-
label ? /* @__PURE__ */
|
|
309
|
-
/* @__PURE__ */
|
|
703
|
+
return /* @__PURE__ */ jsxs7("label", { className: "flex w-full flex-col gap-1.5", htmlFor: textareaId, children: [
|
|
704
|
+
label ? /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-muted-foreground", children: label }) : null,
|
|
705
|
+
/* @__PURE__ */ jsx9(
|
|
310
706
|
"textarea",
|
|
311
707
|
{
|
|
312
708
|
ref,
|
|
@@ -326,9 +722,9 @@ var Textarea = React4.forwardRef(function Textarea2({ label, error, showCount =
|
|
|
326
722
|
...props
|
|
327
723
|
}
|
|
328
724
|
),
|
|
329
|
-
error || showCount && maxLength ? /* @__PURE__ */
|
|
330
|
-
/* @__PURE__ */
|
|
331
|
-
showCount && maxLength ? /* @__PURE__ */
|
|
725
|
+
error || showCount && maxLength ? /* @__PURE__ */ jsxs7("span", { className: cn("flex justify-between text-xs text-muted-foreground", error && "text-destructive"), children: [
|
|
726
|
+
/* @__PURE__ */ jsx9("span", { children: error }),
|
|
727
|
+
showCount && maxLength ? /* @__PURE__ */ jsxs7("span", { children: [
|
|
332
728
|
currentLength,
|
|
333
729
|
" / ",
|
|
334
730
|
maxLength
|
|
@@ -340,9 +736,9 @@ Textarea.displayName = "Textarea";
|
|
|
340
736
|
|
|
341
737
|
// src/spinner.tsx
|
|
342
738
|
import "react";
|
|
343
|
-
import { jsx as
|
|
739
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
344
740
|
function Spinner({ size = "md", color, className }) {
|
|
345
|
-
return /* @__PURE__ */
|
|
741
|
+
return /* @__PURE__ */ jsx10(
|
|
346
742
|
"span",
|
|
347
743
|
{
|
|
348
744
|
className: cn("inline-block animate-spin rounded-full border-2 border-current border-t-transparent text-primary", size === "sm" && "h-4 w-4", size === "md" && "h-6 w-6", size === "lg" && "h-8 w-8", size === "xl" && "h-12 w-12", className),
|
|
@@ -355,9 +751,9 @@ function Spinner({ size = "md", color, className }) {
|
|
|
355
751
|
|
|
356
752
|
// src/skeleton.tsx
|
|
357
753
|
import "react";
|
|
358
|
-
import { jsx as
|
|
754
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
359
755
|
function Skeleton({ width, height, variant = "text", animation = "pulse", className }) {
|
|
360
|
-
return /* @__PURE__ */
|
|
756
|
+
return /* @__PURE__ */ jsx11(
|
|
361
757
|
"div",
|
|
362
758
|
{
|
|
363
759
|
className: cn("bg-muted", variant === "text" && "rounded-sm", variant === "circular" && "rounded-full", variant === "rounded" && "rounded-md", animation === "pulse" && "animate-pulse", animation === "wave" && "animate-pulse", className),
|
|
@@ -368,10 +764,10 @@ function Skeleton({ width, height, variant = "text", animation = "pulse", classN
|
|
|
368
764
|
}
|
|
369
765
|
|
|
370
766
|
// src/icon-button.tsx
|
|
371
|
-
import * as
|
|
372
|
-
import { jsx as
|
|
373
|
-
var IconButton =
|
|
374
|
-
return /* @__PURE__ */
|
|
767
|
+
import * as React10 from "react";
|
|
768
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
769
|
+
var IconButton = React10.forwardRef(function IconButton2({ icon, size = "md", variant = "default", className, type = "button", ...props }, ref) {
|
|
770
|
+
return /* @__PURE__ */ jsx12(
|
|
375
771
|
"button",
|
|
376
772
|
{
|
|
377
773
|
ref,
|
|
@@ -395,15 +791,15 @@ IconButton.displayName = "IconButton";
|
|
|
395
791
|
|
|
396
792
|
// src/progress-bar.tsx
|
|
397
793
|
import "react";
|
|
398
|
-
import { jsx as
|
|
794
|
+
import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
399
795
|
function ProgressBar({ value, max = 100, showLabel = false, variant = "default", size = "md", animated = false, className }) {
|
|
400
796
|
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
401
|
-
return /* @__PURE__ */
|
|
402
|
-
showLabel ? /* @__PURE__ */
|
|
797
|
+
return /* @__PURE__ */ jsxs8("div", { className: cn("w-full", className), children: [
|
|
798
|
+
showLabel ? /* @__PURE__ */ jsx13("div", { className: "mb-1 flex justify-between text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs8("span", { children: [
|
|
403
799
|
Math.round(percentage),
|
|
404
800
|
"%"
|
|
405
801
|
] }) }) : null,
|
|
406
|
-
/* @__PURE__ */
|
|
802
|
+
/* @__PURE__ */ jsx13("div", { className: cn("w-full overflow-hidden rounded-full bg-muted", size === "sm" && "h-1", size === "md" && "h-2", size === "lg" && "h-4"), children: /* @__PURE__ */ jsx13(
|
|
407
803
|
"div",
|
|
408
804
|
{
|
|
409
805
|
role: "progressbar",
|
|
@@ -592,57 +988,16 @@ var EMOJI_KEYWORDS = {
|
|
|
592
988
|
};
|
|
593
989
|
|
|
594
990
|
// src/status-badge.tsx
|
|
595
|
-
import * as
|
|
596
|
-
import { jsx as
|
|
597
|
-
var StatusBadge =
|
|
598
|
-
return /* @__PURE__ */
|
|
991
|
+
import * as React12 from "react";
|
|
992
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
993
|
+
var StatusBadge = React12.forwardRef(function StatusBadge2({ children, className, label, status = "neutral", ...props }, ref) {
|
|
994
|
+
return /* @__PURE__ */ jsx14("span", { ref, "data-slot": "status-badge", "data-status": status, className: cn("chalk-ui-status-badge", className), ...props, children: label ?? children ?? status });
|
|
599
995
|
});
|
|
600
996
|
|
|
601
997
|
// src/toast.tsx
|
|
602
|
-
import * as
|
|
998
|
+
import * as React13 from "react";
|
|
603
999
|
import { Toast as ToastPrimitive } from "@base-ui/react/toast";
|
|
604
|
-
|
|
605
|
-
// src/lib/theme.ts
|
|
606
|
-
var THEME_ATTRIBUTE_NAMES = ["data-chalk-theme", "data-theme"];
|
|
607
|
-
var THEME_CLASS_NAMES = ["dark", "light"];
|
|
608
|
-
var SYSTEM_DARK_QUERY = "(prefers-color-scheme: dark)";
|
|
609
|
-
var normalizeTheme = (value) => {
|
|
610
|
-
if (value === "dark" || value === "light") {
|
|
611
|
-
return value;
|
|
612
|
-
}
|
|
613
|
-
return null;
|
|
614
|
-
};
|
|
615
|
-
var resolveThemeFromElement = (element) => {
|
|
616
|
-
if (!element) return null;
|
|
617
|
-
const attributeTheme = THEME_ATTRIBUTE_NAMES.map((attributeName) => normalizeTheme(element.getAttribute(attributeName))).find((theme) => theme !== null);
|
|
618
|
-
const classTheme = THEME_CLASS_NAMES.find((theme) => element.classList.contains(theme));
|
|
619
|
-
return attributeTheme ?? classTheme ?? null;
|
|
620
|
-
};
|
|
621
|
-
var resolveSystemTheme = () => {
|
|
622
|
-
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return null;
|
|
623
|
-
return window.matchMedia(SYSTEM_DARK_QUERY).matches ? "dark" : "light";
|
|
624
|
-
};
|
|
625
|
-
var resolveExplicitThemeFromDocument = () => {
|
|
626
|
-
if (typeof document === "undefined") return null;
|
|
627
|
-
return resolveThemeFromElement(document.documentElement) ?? resolveThemeFromElement(document.body);
|
|
628
|
-
};
|
|
629
|
-
var resolveFallbackTheme = ({ defaultTheme, allowSystem }) => {
|
|
630
|
-
if (!allowSystem) return defaultTheme;
|
|
631
|
-
return resolveSystemTheme() ?? defaultTheme;
|
|
632
|
-
};
|
|
633
|
-
var resolveThemeFromDocument = ({ defaultTheme = "light", allowSystem = true } = {}) => {
|
|
634
|
-
const explicitTheme = resolveExplicitThemeFromDocument();
|
|
635
|
-
return explicitTheme ?? resolveFallbackTheme({ defaultTheme, allowSystem });
|
|
636
|
-
};
|
|
637
|
-
var resolvePortalThemeFromDocument = ({ defaultTheme = "light", allowSystem = true } = {}) => {
|
|
638
|
-
if (typeof document === "undefined") return defaultTheme;
|
|
639
|
-
const portalTheme = normalizeTheme(document.querySelector("[data-chalk-theme]")?.getAttribute("data-chalk-theme"));
|
|
640
|
-
if (portalTheme) return portalTheme;
|
|
641
|
-
return resolveThemeFromDocument({ defaultTheme, allowSystem });
|
|
642
|
-
};
|
|
643
|
-
|
|
644
|
-
// src/toast.tsx
|
|
645
|
-
import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1000
|
+
import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
646
1001
|
var sharedToastManager = ToastPrimitive.createToastManager();
|
|
647
1002
|
var toastManager = sharedToastManager;
|
|
648
1003
|
var toast = Object.assign((options) => sharedToastManager.add(options), {
|
|
@@ -654,41 +1009,41 @@ var toast = Object.assign((options) => sharedToastManager.add(options), {
|
|
|
654
1009
|
warning: (options) => sharedToastManager.add({ ...options, type: "warning" })
|
|
655
1010
|
});
|
|
656
1011
|
function ToastProvider({ toastManager: manager = sharedToastManager, ...props }) {
|
|
657
|
-
return /* @__PURE__ */
|
|
1012
|
+
return /* @__PURE__ */ jsx15(ToastPrimitive.Provider, { toastManager: manager, ...props });
|
|
658
1013
|
}
|
|
659
|
-
var ToastRoot =
|
|
660
|
-
return /* @__PURE__ */
|
|
1014
|
+
var ToastRoot = React13.forwardRef(function ToastRoot2({ className, toast: toastObject, ...props }, ref) {
|
|
1015
|
+
return /* @__PURE__ */ jsx15(ToastPrimitive.Root, { ref, "data-slot": "toast", "data-type": toastObject.type ?? "neutral", toast: toastObject, className: cn("chalk-ui-toast", className), ...props });
|
|
661
1016
|
});
|
|
662
|
-
var ToastContent =
|
|
663
|
-
return /* @__PURE__ */
|
|
1017
|
+
var ToastContent = React13.forwardRef(function ToastContent2({ className, ...props }, ref) {
|
|
1018
|
+
return /* @__PURE__ */ jsx15(ToastPrimitive.Content, { ref, "data-slot": "toast-content", className: cn("chalk-ui-toast-content", className), ...props });
|
|
664
1019
|
});
|
|
665
|
-
var ToastTitle =
|
|
666
|
-
return /* @__PURE__ */
|
|
1020
|
+
var ToastTitle = React13.forwardRef(function ToastTitle2({ className, ...props }, ref) {
|
|
1021
|
+
return /* @__PURE__ */ jsx15(ToastPrimitive.Title, { ref, "data-slot": "toast-title", className: cn("chalk-ui-toast-title", className), ...props });
|
|
667
1022
|
});
|
|
668
|
-
var ToastDescription =
|
|
669
|
-
return /* @__PURE__ */
|
|
1023
|
+
var ToastDescription = React13.forwardRef(function ToastDescription2({ className, ...props }, ref) {
|
|
1024
|
+
return /* @__PURE__ */ jsx15(ToastPrimitive.Description, { ref, "data-slot": "toast-description", className: cn("chalk-ui-toast-description", className), ...props });
|
|
670
1025
|
});
|
|
671
|
-
var ToastClose =
|
|
672
|
-
return /* @__PURE__ */
|
|
1026
|
+
var ToastClose = React13.forwardRef(function ToastClose2({ "aria-label": ariaLabel = "Dismiss notification", children = "\xD7", className, ...props }, ref) {
|
|
1027
|
+
return /* @__PURE__ */ jsx15(ToastPrimitive.Close, { ref, "aria-label": ariaLabel, "data-slot": "toast-close", className: cn("chalk-ui-toast-close chalk-ui-focusable", className), ...props, children });
|
|
673
1028
|
});
|
|
674
|
-
var ToastAction =
|
|
675
|
-
return /* @__PURE__ */
|
|
1029
|
+
var ToastAction = React13.forwardRef(function ToastAction2({ className, ...props }, ref) {
|
|
1030
|
+
return /* @__PURE__ */ jsx15(ToastPrimitive.Action, { ref, "data-slot": "toast-action", className: cn("chalk-ui-focusable", className), ...props });
|
|
676
1031
|
});
|
|
677
1032
|
function ToastViewport({ className, children, ...props }) {
|
|
678
1033
|
const { toasts } = ToastPrimitive.useToastManager();
|
|
679
1034
|
const portalTheme = resolvePortalThemeFromDocument();
|
|
680
|
-
return /* @__PURE__ */
|
|
1035
|
+
return /* @__PURE__ */ jsxs9(ToastPrimitive.Viewport, { "data-chalk": true, "data-chalk-theme": portalTheme, "data-slot": "toast-viewport", className: cn("chalk-ui-root chalk-ui-toast-viewport", className), ...props, children: [
|
|
681
1036
|
children,
|
|
682
1037
|
toasts.map((toastObject) => {
|
|
683
1038
|
const actionProps = toastObject.actionProps;
|
|
684
1039
|
const { children: actionLabel, ...restActionProps } = actionProps ?? {};
|
|
685
|
-
return /* @__PURE__ */
|
|
686
|
-
/* @__PURE__ */
|
|
687
|
-
toastObject.title ? /* @__PURE__ */
|
|
688
|
-
toastObject.description ? /* @__PURE__ */
|
|
689
|
-
actionProps ? /* @__PURE__ */
|
|
1040
|
+
return /* @__PURE__ */ jsxs9(ToastPrimitive.Root, { "data-slot": "toast", "data-type": toastObject.type ?? "neutral", toast: toastObject, className: "chalk-ui-toast", children: [
|
|
1041
|
+
/* @__PURE__ */ jsxs9(ToastPrimitive.Content, { "data-slot": "toast-content", className: "chalk-ui-toast-content", children: [
|
|
1042
|
+
toastObject.title ? /* @__PURE__ */ jsx15(ToastPrimitive.Title, { "data-slot": "toast-title", className: "chalk-ui-toast-title", children: toastObject.title }) : null,
|
|
1043
|
+
toastObject.description ? /* @__PURE__ */ jsx15(ToastPrimitive.Description, { "data-slot": "toast-description", className: "chalk-ui-toast-description", children: toastObject.description }) : null,
|
|
1044
|
+
actionProps ? /* @__PURE__ */ jsx15(ToastPrimitive.Action, { "data-slot": "toast-action", className: "chalk-ui-focusable", ...restActionProps, children: actionLabel ?? "Action" }) : null
|
|
690
1045
|
] }),
|
|
691
|
-
/* @__PURE__ */
|
|
1046
|
+
/* @__PURE__ */ jsx15(ToastPrimitive.Close, { "aria-label": "Dismiss notification", "data-slot": "toast-close", className: "chalk-ui-toast-close chalk-ui-focusable", children: "\xD7" })
|
|
692
1047
|
] }, toastObject.id);
|
|
693
1048
|
})
|
|
694
1049
|
] });
|
|
@@ -708,11 +1063,11 @@ var Toast = Object.assign(ToastRoot, {
|
|
|
708
1063
|
});
|
|
709
1064
|
|
|
710
1065
|
// src/toggle.tsx
|
|
711
|
-
import * as
|
|
1066
|
+
import * as React14 from "react";
|
|
712
1067
|
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
|
713
|
-
import { cva as
|
|
714
|
-
import { jsx as
|
|
715
|
-
var toggleVariants =
|
|
1068
|
+
import { cva as cva5 } from "class-variance-authority";
|
|
1069
|
+
import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1070
|
+
var toggleVariants = cva5(
|
|
716
1071
|
"hover:text-foreground aria-pressed:bg-accent focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-accent data-[state=on]:text-accent-foreground gap-1 rounded-lg text-sm font-medium transition-colors [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-accent inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
717
1072
|
{
|
|
718
1073
|
variants: {
|
|
@@ -734,22 +1089,22 @@ var toggleVariants = cva3(
|
|
|
734
1089
|
);
|
|
735
1090
|
function Toggle({ className, variant = "default", size = "default", checked, enabled, onChange, label, ariaLabel, ariaLabelledby, pressed, onPressedChange, id, ...props }) {
|
|
736
1091
|
const resolvedPressed = checked ?? enabled ?? pressed;
|
|
737
|
-
const generatedId =
|
|
1092
|
+
const generatedId = React14.useId();
|
|
738
1093
|
const toggleId = id ?? (label ? `chalk-toggle-${generatedId.replace(/:/g, "")}` : void 0);
|
|
739
|
-
const toggle = /* @__PURE__ */
|
|
740
|
-
return label ? /* @__PURE__ */
|
|
1094
|
+
const toggle = /* @__PURE__ */ jsx16(TogglePrimitive, { id: toggleId, "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), pressed: resolvedPressed, onPressedChange: onPressedChange ?? onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props });
|
|
1095
|
+
return label ? /* @__PURE__ */ jsxs10("span", { className: "inline-flex items-center gap-2", children: [
|
|
741
1096
|
toggle,
|
|
742
|
-
/* @__PURE__ */
|
|
1097
|
+
/* @__PURE__ */ jsx16("label", { htmlFor: toggleId, children: label })
|
|
743
1098
|
] }) : toggle;
|
|
744
1099
|
}
|
|
745
1100
|
|
|
746
1101
|
// src/toggle-group.tsx
|
|
747
|
-
import * as
|
|
1102
|
+
import * as React15 from "react";
|
|
748
1103
|
import { Toggle as TogglePrimitive2 } from "@base-ui/react/toggle";
|
|
749
1104
|
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
|
|
750
1105
|
import "class-variance-authority";
|
|
751
|
-
import { jsx as
|
|
752
|
-
var ToggleGroupContext =
|
|
1106
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
1107
|
+
var ToggleGroupContext = React15.createContext({
|
|
753
1108
|
size: "default",
|
|
754
1109
|
variant: "default",
|
|
755
1110
|
spacing: 0,
|
|
@@ -764,7 +1119,7 @@ function ToggleGroup({
|
|
|
764
1119
|
children,
|
|
765
1120
|
...props
|
|
766
1121
|
}) {
|
|
767
|
-
return /* @__PURE__ */
|
|
1122
|
+
return /* @__PURE__ */ jsx17(
|
|
768
1123
|
ToggleGroupPrimitive,
|
|
769
1124
|
{
|
|
770
1125
|
"data-slot": "toggle-group",
|
|
@@ -775,15 +1130,15 @@ function ToggleGroup({
|
|
|
775
1130
|
style: { "--gap": spacing },
|
|
776
1131
|
className: cn("rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", className),
|
|
777
1132
|
...props,
|
|
778
|
-
children: /* @__PURE__ */
|
|
1133
|
+
children: /* @__PURE__ */ jsx17(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children })
|
|
779
1134
|
}
|
|
780
1135
|
);
|
|
781
1136
|
}
|
|
782
1137
|
function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
|
|
783
|
-
const context =
|
|
1138
|
+
const context = React15.useContext(ToggleGroupContext);
|
|
784
1139
|
const resolvedVariant = context.variant || variant;
|
|
785
1140
|
const resolvedSize = context.size || size;
|
|
786
|
-
return /* @__PURE__ */
|
|
1141
|
+
return /* @__PURE__ */ jsx17(
|
|
787
1142
|
TogglePrimitive2,
|
|
788
1143
|
{
|
|
789
1144
|
"data-slot": "toggle-group-item",
|
|
@@ -803,52 +1158,6 @@ function ToggleGroupItem({ className, children, variant = "default", size = "def
|
|
|
803
1158
|
}
|
|
804
1159
|
);
|
|
805
1160
|
}
|
|
806
|
-
|
|
807
|
-
// src/tooltip.tsx
|
|
808
|
-
import "react";
|
|
809
|
-
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
|
810
|
-
import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
811
|
-
function TooltipProvider({ delay = 0, ...props }) {
|
|
812
|
-
return /* @__PURE__ */ jsx15(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay, ...props });
|
|
813
|
-
}
|
|
814
|
-
function Tooltip({ content, children, position = "top", delay = 200, className, ...props }) {
|
|
815
|
-
if (content !== void 0) {
|
|
816
|
-
return /* @__PURE__ */ jsx15(TooltipProvider, { delay, children: /* @__PURE__ */ jsxs8(TooltipPrimitive.Root, { children: [
|
|
817
|
-
/* @__PURE__ */ jsx15(
|
|
818
|
-
TooltipPrimitive.Trigger,
|
|
819
|
-
{
|
|
820
|
-
render: (triggerProps) => /* @__PURE__ */ jsx15("span", { ...triggerProps, className: "inline-flex", children })
|
|
821
|
-
}
|
|
822
|
-
),
|
|
823
|
-
/* @__PURE__ */ jsx15(TooltipContent, { className, side: position, children: content })
|
|
824
|
-
] }) });
|
|
825
|
-
}
|
|
826
|
-
return /* @__PURE__ */ jsx15(TooltipProvider, { children: /* @__PURE__ */ jsx15(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
|
|
827
|
-
}
|
|
828
|
-
function TooltipTrigger({ ...props }) {
|
|
829
|
-
return /* @__PURE__ */ jsx15(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
830
|
-
}
|
|
831
|
-
function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
|
|
832
|
-
const portalTheme = resolvePortalThemeFromDocument();
|
|
833
|
-
return /* @__PURE__ */ jsx15(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx15(TooltipPrimitive.Positioner, { align, alignOffset, side, sideOffset, className: "z-[9999]", children: /* @__PURE__ */ jsxs8(
|
|
834
|
-
TooltipPrimitive.Popup,
|
|
835
|
-
{
|
|
836
|
-
"data-chalk": true,
|
|
837
|
-
"data-chalk-theme": portalTheme,
|
|
838
|
-
"data-slot": "tooltip-content",
|
|
839
|
-
className: cn(
|
|
840
|
-
"chalk-root",
|
|
841
|
-
"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 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 rounded-lg px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background shadow-[var(--chalk-shadow-sm)] z-50 w-fit max-w-xs origin-(--transform-origin)",
|
|
842
|
-
className
|
|
843
|
-
),
|
|
844
|
-
...props,
|
|
845
|
-
children: [
|
|
846
|
-
children,
|
|
847
|
-
/* @__PURE__ */ jsx15(TooltipPrimitive.Arrow, { className: "size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
|
|
848
|
-
]
|
|
849
|
-
}
|
|
850
|
-
) }) });
|
|
851
|
-
}
|
|
852
1161
|
export {
|
|
853
1162
|
Badge,
|
|
854
1163
|
Button,
|
|
@@ -865,8 +1174,29 @@ export {
|
|
|
865
1174
|
EMOJI_KEYWORDS,
|
|
866
1175
|
IconButton,
|
|
867
1176
|
Input,
|
|
1177
|
+
Menu,
|
|
1178
|
+
MenuContent,
|
|
1179
|
+
MenuGroupLabel,
|
|
1180
|
+
MenuItem,
|
|
1181
|
+
MenuRadioGroup,
|
|
1182
|
+
MenuRadioItem,
|
|
1183
|
+
MenuSeparator,
|
|
1184
|
+
MenuTrigger,
|
|
868
1185
|
ProgressBar,
|
|
869
1186
|
Select,
|
|
1187
|
+
Sidebar,
|
|
1188
|
+
SidebarContent,
|
|
1189
|
+
SidebarFooter,
|
|
1190
|
+
SidebarGroup,
|
|
1191
|
+
SidebarGroupLabel,
|
|
1192
|
+
SidebarHeader,
|
|
1193
|
+
SidebarInset,
|
|
1194
|
+
SidebarMenu,
|
|
1195
|
+
SidebarMenuButton,
|
|
1196
|
+
SidebarMenuItem,
|
|
1197
|
+
SidebarProvider,
|
|
1198
|
+
SidebarRail,
|
|
1199
|
+
SidebarTrigger,
|
|
870
1200
|
Skeleton,
|
|
871
1201
|
Spinner,
|
|
872
1202
|
StatusBadge,
|
|
@@ -890,8 +1220,10 @@ export {
|
|
|
890
1220
|
badgeVariants,
|
|
891
1221
|
buttonVariants,
|
|
892
1222
|
cn,
|
|
1223
|
+
sidebarMenuButtonVariants,
|
|
893
1224
|
toast,
|
|
894
1225
|
toastManager,
|
|
895
1226
|
toggleVariants,
|
|
1227
|
+
useSidebar,
|
|
896
1228
|
useToast
|
|
897
1229
|
};
|