@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.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 jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
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__ */ jsxs3("label", { className: cn("flex flex-col gap-1", fullWidth && "w-full"), htmlFor: selectId, children: [
270
- label ? /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium text-muted-foreground", children: label }) : null,
271
- /* @__PURE__ */ jsxs3(
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__ */ jsx5("option", { value: "", disabled: options.length > 0, children: placeholder }),
291
- options.map((option) => /* @__PURE__ */ jsx5("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
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__ */ jsx5("span", { className: "text-sm text-destructive", children: error }) : null
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/textarea.tsx
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
- import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
303
- var Textarea = React4.forwardRef(function Textarea2({ label, error, showCount = false, resize = "vertical", maxLength, value, className, id, ...props }, ref) {
304
- const generatedId = React4.useId();
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__ */ jsxs4("label", { className: "flex w-full flex-col gap-1.5", htmlFor: textareaId, children: [
308
- label ? /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium text-muted-foreground", children: label }) : null,
309
- /* @__PURE__ */ jsx6(
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__ */ jsxs4("span", { className: cn("flex justify-between text-xs text-muted-foreground", error && "text-destructive"), children: [
330
- /* @__PURE__ */ jsx6("span", { children: error }),
331
- showCount && maxLength ? /* @__PURE__ */ jsxs4("span", { children: [
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 jsx7 } from "react/jsx-runtime";
739
+ import { jsx as jsx10 } from "react/jsx-runtime";
344
740
  function Spinner({ size = "md", color, className }) {
345
- return /* @__PURE__ */ jsx7(
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 jsx8 } from "react/jsx-runtime";
754
+ import { jsx as jsx11 } from "react/jsx-runtime";
359
755
  function Skeleton({ width, height, variant = "text", animation = "pulse", className }) {
360
- return /* @__PURE__ */ jsx8(
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 React7 from "react";
372
- import { jsx as jsx9 } from "react/jsx-runtime";
373
- var IconButton = React7.forwardRef(function IconButton2({ icon, size = "md", variant = "default", className, type = "button", ...props }, ref) {
374
- return /* @__PURE__ */ jsx9(
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 jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
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__ */ jsxs5("div", { className: cn("w-full", className), children: [
402
- showLabel ? /* @__PURE__ */ jsx10("div", { className: "mb-1 flex justify-between text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs5("span", { children: [
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__ */ jsx10("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__ */ jsx10(
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 React9 from "react";
596
- import { jsx as jsx11 } from "react/jsx-runtime";
597
- var StatusBadge = React9.forwardRef(function StatusBadge2({ children, className, label, status = "neutral", ...props }, ref) {
598
- return /* @__PURE__ */ jsx11("span", { ref, "data-slot": "status-badge", "data-status": status, className: cn("chalk-ui-status-badge", className), ...props, children: label ?? children ?? status });
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 React10 from "react";
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__ */ jsx12(ToastPrimitive.Provider, { toastManager: manager, ...props });
1012
+ return /* @__PURE__ */ jsx15(ToastPrimitive.Provider, { toastManager: manager, ...props });
658
1013
  }
659
- var ToastRoot = React10.forwardRef(function ToastRoot2({ className, toast: toastObject, ...props }, ref) {
660
- return /* @__PURE__ */ jsx12(ToastPrimitive.Root, { ref, "data-slot": "toast", "data-type": toastObject.type ?? "neutral", toast: toastObject, className: cn("chalk-ui-toast", className), ...props });
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 = React10.forwardRef(function ToastContent2({ className, ...props }, ref) {
663
- return /* @__PURE__ */ jsx12(ToastPrimitive.Content, { ref, "data-slot": "toast-content", className: cn("chalk-ui-toast-content", className), ...props });
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 = React10.forwardRef(function ToastTitle2({ className, ...props }, ref) {
666
- return /* @__PURE__ */ jsx12(ToastPrimitive.Title, { ref, "data-slot": "toast-title", className: cn("chalk-ui-toast-title", className), ...props });
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 = React10.forwardRef(function ToastDescription2({ className, ...props }, ref) {
669
- return /* @__PURE__ */ jsx12(ToastPrimitive.Description, { ref, "data-slot": "toast-description", className: cn("chalk-ui-toast-description", className), ...props });
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 = React10.forwardRef(function ToastClose2({ "aria-label": ariaLabel = "Dismiss notification", children = "\xD7", className, ...props }, ref) {
672
- return /* @__PURE__ */ jsx12(ToastPrimitive.Close, { ref, "aria-label": ariaLabel, "data-slot": "toast-close", className: cn("chalk-ui-toast-close chalk-ui-focusable", className), ...props, children });
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 = React10.forwardRef(function ToastAction2({ className, ...props }, ref) {
675
- return /* @__PURE__ */ jsx12(ToastPrimitive.Action, { ref, "data-slot": "toast-action", className: cn("chalk-ui-focusable", className), ...props });
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__ */ jsxs6(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: [
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__ */ jsxs6(ToastPrimitive.Root, { "data-slot": "toast", "data-type": toastObject.type ?? "neutral", toast: toastObject, className: "chalk-ui-toast", children: [
686
- /* @__PURE__ */ jsxs6(ToastPrimitive.Content, { "data-slot": "toast-content", className: "chalk-ui-toast-content", children: [
687
- toastObject.title ? /* @__PURE__ */ jsx12(ToastPrimitive.Title, { "data-slot": "toast-title", className: "chalk-ui-toast-title", children: toastObject.title }) : null,
688
- toastObject.description ? /* @__PURE__ */ jsx12(ToastPrimitive.Description, { "data-slot": "toast-description", className: "chalk-ui-toast-description", children: toastObject.description }) : null,
689
- actionProps ? /* @__PURE__ */ jsx12(ToastPrimitive.Action, { "data-slot": "toast-action", className: "chalk-ui-focusable", ...restActionProps, children: actionLabel ?? "Action" }) : null
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__ */ jsx12(ToastPrimitive.Close, { "aria-label": "Dismiss notification", "data-slot": "toast-close", className: "chalk-ui-toast-close chalk-ui-focusable", children: "\xD7" })
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 React11 from "react";
1066
+ import * as React14 from "react";
712
1067
  import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
713
- import { cva as cva3 } from "class-variance-authority";
714
- import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
715
- var toggleVariants = cva3(
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 = React11.useId();
1092
+ const generatedId = React14.useId();
738
1093
  const toggleId = id ?? (label ? `chalk-toggle-${generatedId.replace(/:/g, "")}` : void 0);
739
- const toggle = /* @__PURE__ */ jsx13(TogglePrimitive, { id: toggleId, "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), pressed: resolvedPressed, onPressedChange: onPressedChange ?? onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props });
740
- return label ? /* @__PURE__ */ jsxs7("span", { className: "inline-flex items-center gap-2", children: [
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__ */ jsx13("label", { htmlFor: toggleId, children: label })
1097
+ /* @__PURE__ */ jsx16("label", { htmlFor: toggleId, children: label })
743
1098
  ] }) : toggle;
744
1099
  }
745
1100
 
746
1101
  // src/toggle-group.tsx
747
- import * as React12 from "react";
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 jsx14 } from "react/jsx-runtime";
752
- var ToggleGroupContext = React12.createContext({
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__ */ jsx14(
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__ */ jsx14(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children })
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 = React12.useContext(ToggleGroupContext);
1138
+ const context = React15.useContext(ToggleGroupContext);
784
1139
  const resolvedVariant = context.variant || variant;
785
1140
  const resolvedSize = context.size || size;
786
- return /* @__PURE__ */ jsx14(
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
  };