@tlglobal/ui 2.0.0

package/dist/chunk-H3RKRRVM.js

@@ -0,0 +1,526 @@
+'use client';
+import {
+  Tooltip
+} from "./chunk-SKQHJJ6L.js";
+import {
+  Separator
+} from "./chunk-YFS2VFC5.js";
+import {
+  Sheet
+} from "./chunk-QX75NAXT.js";
+import {
+  Skeleton
+} from "./chunk-MIKQY57Q.js";
+import {
+  Input
+} from "./chunk-72IENMXB.js";
+import {
+  IconButton
+} from "./chunk-Y523KUML.js";
+import {
+  cn
+} from "./chunk-74GQ35MJ.js";
+
+// src/components/sidebar/Sidebar.jsx
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Slot } from "radix-ui";
+import { PanelLeft } from "@tlglobal/icons";
+
+// src/components/sidebar/Sidebar.variants.js
+import { cva } from "class-variance-authority";
+var sidebarMenuButtonVariants = cva(
+  [
+    "group/menu-button peer/menu-button relative flex w-full items-center gap-2 overflow-hidden rounded-md",
+    "px-2 py-2 text-left font-sans text-text-primary outline-none transition-colors",
+    "hover:bg-bg-surface-hover",
+    "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "data-[active=true]:bg-bg-surface-hover data-[active=true]:font-medium data-[active=true]:text-text-primary",
+    "[&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-text-secondary",
+    "data-[active=true]:[&>svg]:text-text-primary",
+    // In the icon rail only the leading icon survives: the label collapses to zero width rather
+    // than unmounting, so expanding again doesn't re-run the consumer's render.
+    "group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0",
+    "group-data-[collapsible=icon]:[&>span]:hidden"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: [
+          "bg-bg-page shadow-[0_0_0_1px_var(--border-default)]",
+          "hover:shadow-[0_0_0_1px_var(--border-strong)]"
+        ]
+      },
+      size: {
+        sm: "h-7 text-xs",
+        md: "h-8 text-sm",
+        lg: "h-12 text-sm"
+      }
+    },
+    defaultVariants: { variant: "default", size: "md" }
+  }
+);
+var sidebarMenuSubButtonVariants = cva(
+  [
+    "relative flex h-7 w-full items-center gap-2 overflow-hidden rounded-md px-2",
+    "font-sans text-text-secondary outline-none transition-colors",
+    "hover:bg-bg-surface-hover hover:text-text-primary",
+    "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]",
+    "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "data-[active=true]:bg-bg-surface-hover data-[active=true]:font-medium data-[active=true]:text-text-primary",
+    "[&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
+    "[&>span]:truncate"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+
+// src/components/sidebar/Sidebar.jsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SIDEBAR_WIDTH = "16rem";
+var SIDEBAR_WIDTH_ICON = "3rem";
+var SIDEBAR_WIDTH_MOBILE = "18rem";
+var SidebarContext = createContext(null);
+function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) throw new Error("Sidebar parts must be used within Sidebar.Provider");
+  return context;
+}
+function useIsMobile(breakpoint) {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const query = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const update = () => setIsMobile(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, [breakpoint]);
+  return isMobile;
+}
+function Provider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  persistKey,
+  mobileBreakpoint = 768,
+  keyboardShortcut = "b",
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile(mobileBreakpoint);
+  const [openMobile, setOpenMobile] = useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const setOpen = useCallback(
+    (value) => {
+      const next = typeof value === "function" ? value(open) : value;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+      if (persistKey) {
+        try {
+          window.localStorage.setItem(persistKey, String(next));
+        } catch {
+        }
+      }
+    },
+    [open, isControlled, onOpenChange, persistKey]
+  );
+  useEffect(() => {
+    if (!persistKey || isControlled) return;
+    try {
+      const stored = window.localStorage.getItem(persistKey);
+      if (stored !== null) setUncontrolledOpen(stored === "true");
+    } catch {
+    }
+  }, [persistKey, isControlled]);
+  const toggleSidebar = useCallback(() => {
+    if (isMobile) setOpenMobile((value) => !value);
+    else setOpen((value) => !value);
+  }, [isMobile, setOpen]);
+  useEffect(() => {
+    if (!keyboardShortcut) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key.toLowerCase() !== keyboardShortcut.toLowerCase()) return;
+      if (!event.metaKey && !event.ctrlKey) return;
+      event.preventDefault();
+      toggleSidebar();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [keyboardShortcut, toggleSidebar]);
+  const state = open ? "expanded" : "collapsed";
+  const context = useMemo(
+    () => ({ state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }),
+    [state, open, setOpen, openMobile, isMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        "--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE,
+        ...style
+      },
+      className: cn("group/sidebar-wrapper flex min-h-svh w-full font-sans", className),
+      ...props,
+      children
+    }
+  ) });
+}
+function Root({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  mobileTitle = "Sidebar",
+  className,
+  children,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const detached = variant === "floating" || variant === "inset";
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-sidebar": "root",
+        className: cn("flex h-full w-[var(--sidebar-width)] flex-col bg-bg-surface", className),
+        ...props,
+        children
+      }
+    );
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Sheet.Root, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxs(
+      Sheet.Content,
+      {
+        side,
+        "data-sidebar": "root",
+        "data-mobile": "true",
+        className: cn("w-[var(--sidebar-width-mobile)] gap-0 bg-bg-surface p-0", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Sheet.Title, { className: "sr-only", children: mobileTitle }),
+          /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "group peer hidden md:block",
+      "data-sidebar": "wrapper",
+      "data-state": state,
+      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              detached ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]" : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-sidebar": "root",
+            className: cn(
+              "fixed inset-y-0 z-30 hidden h-svh w-[var(--sidebar-width)] md:flex",
+              "transition-[left,right,width] duration-200 ease-linear",
+              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)]",
+              detached ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]" : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]",
+              !detached && (side === "left" ? "border-r border-border-default" : "border-l border-border-default"),
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-sidebar": "panel",
+                className: cn(
+                  "relative flex h-full w-full flex-col overflow-hidden bg-bg-surface",
+                  detached && "rounded-lg border border-border-default shadow-sm"
+                ),
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Inset({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      className: cn(
+        "relative flex min-h-svh flex-1 flex-col bg-bg-page",
+        "peer-data-[variant=inset]:m-2 peer-data-[variant=inset]:min-h-[calc(100svh-1rem)]",
+        "peer-data-[variant=inset]:rounded-xl peer-data-[variant=inset]:border peer-data-[variant=inset]:border-border-default",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var Trigger = React.forwardRef(function Trigger2({ className, onClick, ...props }, ref) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ref,
+      variant: "ghost",
+      size: "sm",
+      "aria-label": "Toggle sidebar",
+      icon: /* @__PURE__ */ jsx(PanelLeft, { size: 16 }),
+      onClick: (event) => {
+        onClick == null ? void 0 : onClick(event);
+        toggleSidebar();
+      },
+      className: cn("shrink-0", className),
+      ...props
+    }
+  );
+});
+function Rail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      "aria-hidden": "true",
+      title: "Toggle sidebar",
+      "data-sidebar": "rail",
+      onClick: toggleSidebar,
+      className: cn(
+        "absolute inset-y-0 z-20 hidden w-4 cursor-pointer transition-colors sm:block",
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2",
+        "hover:after:bg-border-strong",
+        "group-data-[side=left]:right-0 group-data-[side=right]:left-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Header({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-sidebar": "header", className: cn("flex flex-col gap-2 p-2", className), ...props });
+}
+function Footer({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-sidebar": "footer", className: cn("mt-auto flex flex-col gap-2 p-2", className), ...props });
+}
+function Content({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-sidebar": "content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto",
+        "group-data-[collapsible=icon]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Separator, { "data-sidebar": "separator", className: cn("mx-2 w-auto", className), ...props });
+}
+function SidebarInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Input, { "data-sidebar": "input", className: cn("h-8 w-full bg-bg-page", className), ...props });
+}
+function Group({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col p-2", className), ...props });
+}
+function GroupLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-sidebar": "group-label",
+      className: cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-text-secondary",
+        "transition-[margin,opacity] duration-200 ease-linear",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function GroupAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-sidebar": "group-action",
+      className: cn(
+        "absolute right-3 top-3.5 flex h-5 w-5 items-center justify-center rounded-md",
+        "text-text-secondary outline-none transition-colors",
+        "hover:bg-bg-surface-hover hover:text-text-primary",
+        "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]",
+        "[&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function GroupContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props });
+}
+function Menu({ className, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-1", className), ...props });
+}
+function MenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props });
+}
+var MenuButton = React.forwardRef(function MenuButton2({ asChild = false, isActive = false, variant, size, tooltip, className, ...props }, ref) {
+  const { state, isMobile } = useSidebar();
+  const Comp = asChild ? Slot.Root : "button";
+  const button = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      type: asChild ? void 0 : "button",
+      "data-sidebar": "menu-button",
+      "data-active": isActive,
+      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+  if (!tooltip || state !== "collapsed" || isMobile) return button;
+  return /* @__PURE__ */ jsx(Tooltip, { label: tooltip, side: "right", children: button });
+});
+function MenuAction({ className, showOnHover = false, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-sidebar": "menu-action",
+      className: cn(
+        "absolute right-1 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md",
+        "text-text-secondary outline-none transition-colors",
+        "hover:bg-bg-surface-hover hover:text-text-primary",
+        "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]",
+        "[&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover && "opacity-0 focus-within:opacity-100 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MenuBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-sidebar": "menu-badge",
+      className: cn(
+        "pointer-events-none absolute right-2 top-1/2 flex h-5 min-w-5 -translate-y-1/2 select-none",
+        "items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-text-secondary",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MenuSkeleton({ showIcon = false, width = "70%", className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-sidebar": "menu-skeleton",
+      className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 shrink-0 rounded-sm" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 max-w-full flex-1", style: { width } })
+      ]
+    }
+  );
+}
+function MenuSub({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-sidebar": "menu-sub",
+      className: cn(
+        "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-border-default px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MenuSubItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-sidebar": "menu-sub-item", className: cn("group/menu-sub-item relative", className), ...props });
+}
+var MenuSubButton = React.forwardRef(function MenuSubButton2({ asChild = false, isActive = false, size, className, ...props }, ref) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-sidebar": "menu-sub-button",
+      "data-active": isActive,
+      className: cn(sidebarMenuSubButtonVariants({ size }), className),
+      ...props
+    }
+  );
+});
+var Sidebar = {
+  Provider,
+  Root,
+  Inset,
+  Trigger,
+  Rail,
+  Header,
+  Footer,
+  Content,
+  Separator: SidebarSeparator,
+  Input: SidebarInput,
+  Group,
+  GroupLabel,
+  GroupAction,
+  GroupContent,
+  Menu,
+  MenuItem,
+  MenuButton,
+  MenuAction,
+  MenuBadge,
+  MenuSkeleton,
+  MenuSub,
+  MenuSubItem,
+  MenuSubButton
+};
+
+export {
+  useSidebar,
+  Sidebar
+};
+//# sourceMappingURL=chunk-H3RKRRVM.js.map

package/dist/chunk-H3RKRRVM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/sidebar/Sidebar.jsx","../src/components/sidebar/Sidebar.variants.js"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { PanelLeft } from \"@tlglobal/icons\";\nimport { cn } from \"../../lib/cn.js\";\nimport { IconButton } from \"../icon-button/IconButton.jsx\";\nimport { Input } from \"../input/Input.jsx\";\nimport { Separator as BaseSeparator } from \"../separator/Separator.jsx\";\nimport { Sheet } from \"../sheet/Sheet.jsx\";\nimport { Skeleton } from \"../skeleton/Skeleton.jsx\";\nimport { Tooltip } from \"../tooltip/Tooltip.jsx\";\nimport { sidebarMenuButtonVariants, sidebarMenuSubButtonVariants } from \"./Sidebar.variants.js\";\n\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\n\nconst SidebarContext = createContext(null);\n\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n  if (!context) throw new Error(\"Sidebar parts must be used within Sidebar.Provider\");\n  return context;\n}\n\n/*\n * Starts false so the first render matches what a server would produce, then corrects on mount.\n * The desktop panel is `hidden md:block` in CSS anyway, so the pre-hydration frame is already\n * correct at both sizes — this hook only drives *which tree* renders (fixed panel vs. Sheet).\n */\nfunction useIsMobile(breakpoint) {\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    const query = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);\n    const update = () => setIsMobile(query.matches);\n    update();\n    query.addEventListener(\"change\", update);\n    return () => query.removeEventListener(\"change\", update);\n  }, [breakpoint]);\n\n  return isMobile;\n}\n\nfunction Provider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange,\n  persistKey,\n  mobileBreakpoint = 768,\n  keyboardShortcut = \"b\",\n  className,\n  style,\n  children,\n  ...props\n}) {\n  const isMobile = useIsMobile(mobileBreakpoint);\n  const [openMobile, setOpenMobile] = useState(false);\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n\n  const isControlled = openProp !== undefined;\n  const open = isControlled ? openProp : uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (value) => {\n      const next = typeof value === \"function\" ? value(open) : value;\n      if (!isControlled) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n      if (persistKey) {\n        // Storage throws in Safari private mode and when cookies/storage are blocked outright;\n        // persistence is a nicety, so a failure here must never take the sidebar down with it.\n        try {\n          window.localStorage.setItem(persistKey, String(next));\n        } catch {\n          /* ignore */\n        }\n      }\n    },\n    [open, isControlled, onOpenChange, persistKey],\n  );\n\n  /*\n   * Rehydrate after mount rather than in the useState initializer: reading localStorage during\n   * render would produce server/client markup that disagrees and blow up hydration. The cost is\n   * one corrective frame — SSR apps that care should read their own cookie and pass `defaultOpen`.\n   */\n  useEffect(() => {\n    if (!persistKey || isControlled) return;\n    try {\n      const stored = window.localStorage.getItem(persistKey);\n      if (stored !== null) setUncontrolledOpen(stored === \"true\");\n    } catch {\n      /* ignore */\n    }\n  }, [persistKey, isControlled]);\n\n  const toggleSidebar = useCallback(() => {\n    if (isMobile) setOpenMobile((value) => !value);\n    else setOpen((value) => !value);\n  }, [isMobile, setOpen]);\n\n  useEffect(() => {\n    if (!keyboardShortcut) return undefined;\n    const onKeyDown = (event) => {\n      if (event.key.toLowerCase() !== keyboardShortcut.toLowerCase()) return;\n      if (!event.metaKey && !event.ctrlKey) return;\n      event.preventDefault();\n      toggleSidebar();\n    };\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => window.removeEventListener(\"keydown\", onKeyDown);\n  }, [keyboardShortcut, toggleSidebar]);\n\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const context = useMemo(\n    () => ({ state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }),\n    [state, open, setOpen, openMobile, isMobile, toggleSidebar],\n  );\n\n  return (\n    <SidebarContext.Provider value={context}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={{\n          \"--sidebar-width\": SIDEBAR_WIDTH,\n          \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n          \"--sidebar-width-mobile\": SIDEBAR_WIDTH_MOBILE,\n          ...style,\n        }}\n        className={cn(\"group/sidebar-wrapper flex min-h-svh w-full font-sans\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nfunction Root({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  mobileTitle = \"Sidebar\",\n  className,\n  children,\n  ...props\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n  const detached = variant === \"floating\" || variant === \"inset\";\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-sidebar=\"root\"\n        className={cn(\"flex h-full w-[var(--sidebar-width)] flex-col bg-bg-surface\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet.Root open={openMobile} onOpenChange={setOpenMobile}>\n        <Sheet.Content\n          side={side}\n          data-sidebar=\"root\"\n          data-mobile=\"true\"\n          className={cn(\"w-[var(--sidebar-width-mobile)] gap-0 bg-bg-surface p-0\", className)}\n          {...props}\n        >\n          <Sheet.Title className=\"sr-only\">{mobileTitle}</Sheet.Title>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </Sheet.Content>\n      </Sheet.Root>\n    );\n  }\n\n  /*\n   * Two elements, deliberately: the first is an inert spacer that occupies the sidebar's width in\n   * normal flow so Sidebar.Inset lays out beside it, and the second is the fixed panel the user\n   * actually sees. Collapsing animates both — the spacer's width and the panel's offset — which is\n   * what lets the main content reflow in step with the panel sliding away, without either element\n   * needing to know about the other.\n   */\n  return (\n    <div\n      className=\"group peer hidden md:block\"\n      data-sidebar=\"wrapper\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n    >\n      <div\n        aria-hidden=\"true\"\n        className={cn(\n          \"relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          detached\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]\"\n            : \"group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]\",\n        )}\n      />\n      <div\n        data-sidebar=\"root\"\n        className={cn(\n          \"fixed inset-y-0 z-30 hidden h-svh w-[var(--sidebar-width)] md:flex\",\n          \"transition-[left,right,width] duration-200 ease-linear\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          detached\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]\"\n            : \"group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]\",\n          !detached && (side === \"left\" ? \"border-r border-border-default\" : \"border-l border-border-default\"),\n          className,\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"panel\"\n          className={cn(\n            \"relative flex h-full w-full flex-col overflow-hidden bg-bg-surface\",\n            detached && \"rounded-lg border border-border-default shadow-sm\",\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Inset({ className, ...props }) {\n  return (\n    <main\n      className={cn(\n        \"relative flex min-h-svh flex-1 flex-col bg-bg-page\",\n        \"peer-data-[variant=inset]:m-2 peer-data-[variant=inset]:min-h-[calc(100svh-1rem)]\",\n        \"peer-data-[variant=inset]:rounded-xl peer-data-[variant=inset]:border peer-data-[variant=inset]:border-border-default\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst Trigger = React.forwardRef(function Trigger({ className, onClick, ...props }, ref) {\n  const { toggleSidebar } = useSidebar();\n  return (\n    <IconButton\n      ref={ref}\n      variant=\"ghost\"\n      size=\"sm\"\n      aria-label=\"Toggle sidebar\"\n      icon={<PanelLeft size={16} />}\n      onClick={(event) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    />\n  );\n});\n\n/*\n * The hit strip along the panel's outer edge. tabIndex={-1} is deliberate: Sidebar.Trigger is the\n * keyboard-and-screen-reader path, and exposing a second focusable control that does exactly the\n * same thing just adds a stop to the tab order for no benefit. aria-hidden matches that intent.\n */\nfunction Rail({ className, ...props }) {\n  const { toggleSidebar } = useSidebar();\n  return (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      aria-hidden=\"true\"\n      title=\"Toggle sidebar\"\n      data-sidebar=\"rail\"\n      onClick={toggleSidebar}\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 cursor-pointer transition-colors sm:block\",\n        \"after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2\",\n        \"hover:after:bg-border-strong\",\n        \"group-data-[side=left]:right-0 group-data-[side=right]:left-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Header({ className, ...props }) {\n  return <div data-sidebar=\"header\" className={cn(\"flex flex-col gap-2 p-2\", className)} {...props} />;\n}\n\nfunction Footer({ className, ...props }) {\n  return <div data-sidebar=\"footer\" className={cn(\"mt-auto flex flex-col gap-2 p-2\", className)} {...props} />;\n}\n\nfunction Content({ className, ...props }) {\n  return (\n    <div\n      data-sidebar=\"content\"\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto\",\n        \"group-data-[collapsible=icon]:overflow-hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarSeparator({ className, ...props }) {\n  return <BaseSeparator data-sidebar=\"separator\" className={cn(\"mx-2 w-auto\", className)} {...props} />;\n}\n\nfunction SidebarInput({ className, ...props }) {\n  return <Input data-sidebar=\"input\" className={cn(\"h-8 w-full bg-bg-page\", className)} {...props} />;\n}\n\nfunction Group({ className, ...props }) {\n  return (\n    <div data-sidebar=\"group\" className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)} {...props} />\n  );\n}\n\n/*\n * Collapses upward into the group above it rather than disappearing outright — the negative margin\n * plus opacity keeps the transition continuous, where `hidden` would snap the whole menu up a row.\n */\nfunction GroupLabel({ className, ...props }) {\n  return (\n    <div\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-text-secondary\",\n        \"transition-[margin,opacity] duration-200 ease-linear\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction GroupAction({ className, ...props }) {\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"absolute right-3 top-3.5 flex h-5 w-5 items-center justify-center rounded-md\",\n        \"text-text-secondary outline-none transition-colors\",\n        \"hover:bg-bg-surface-hover hover:text-text-primary\",\n        \"focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]\",\n        \"[&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction GroupContent({ className, ...props }) {\n  return <div data-sidebar=\"group-content\" className={cn(\"w-full text-sm\", className)} {...props} />;\n}\n\nfunction Menu({ className, ...props }) {\n  return <ul data-sidebar=\"menu\" className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)} {...props} />;\n}\n\nfunction MenuItem({ className, ...props }) {\n  return <li data-sidebar=\"menu-item\" className={cn(\"group/menu-item relative\", className)} {...props} />;\n}\n\nconst MenuButton = React.forwardRef(function MenuButton(\n  { asChild = false, isActive = false, variant, size, tooltip, className, ...props },\n  ref,\n) {\n  const { state, isMobile } = useSidebar();\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  const button = (\n    <Comp\n      ref={ref}\n      type={asChild ? undefined : \"button\"}\n      data-sidebar=\"menu-button\"\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n\n  // Only worth mounting once the label is actually hidden — the mobile panel is full-width, so\n  // there's nothing a tooltip could reveal there.\n  if (!tooltip || state !== \"collapsed\" || isMobile) return button;\n\n  return (\n    <Tooltip label={tooltip} side=\"right\">\n      {button}\n    </Tooltip>\n  );\n});\n\nfunction MenuAction({ className, showOnHover = false, ...props }) {\n  return (\n    <button\n      type=\"button\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute right-1 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md\",\n        \"text-text-secondary outline-none transition-colors\",\n        \"hover:bg-bg-surface-hover hover:text-text-primary\",\n        \"focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]\",\n        \"[&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"opacity-0 focus-within:opacity-100 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenuBadge({ className, ...props }) {\n  return (\n    <div\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"pointer-events-none absolute right-2 top-1/2 flex h-5 min-w-5 -translate-y-1/2 select-none\",\n        \"items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-text-secondary\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/*\n * `width` is a prop rather than the randomised value shadcn uses, so a page of skeletons renders\n * identically every time — otherwise visual-regression snapshots would diff on every run.\n */\nfunction MenuSkeleton({ showIcon = false, width = \"70%\", className, ...props }) {\n  return (\n    <div\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && <Skeleton className=\"h-4 w-4 shrink-0 rounded-sm\" />}\n      <Skeleton className=\"h-4 max-w-full flex-1\" style={{ width }} />\n    </div>\n  );\n}\n\nfunction MenuSub({ className, ...props }) {\n  return (\n    <ul\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"mx-3.5 flex min-w-0 flex-col gap-1 border-l border-border-default px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenuSubItem({ className, ...props }) {\n  return <li data-sidebar=\"menu-sub-item\" className={cn(\"group/menu-sub-item relative\", className)} {...props} />;\n}\n\nconst MenuSubButton = React.forwardRef(function MenuSubButton(\n  { asChild = false, isActive = false, size, className, ...props },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-active={isActive}\n      className={cn(sidebarMenuSubButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n});\n\nexport const Sidebar = {\n  Provider,\n  Root,\n  Inset,\n  Trigger,\n  Rail,\n  Header,\n  Footer,\n  Content,\n  Separator: SidebarSeparator,\n  Input: SidebarInput,\n  Group,\n  GroupLabel,\n  GroupAction,\n  GroupContent,\n  Menu,\n  MenuItem,\n  MenuButton,\n  MenuAction,\n  MenuBadge,\n  MenuSkeleton,\n  MenuSub,\n  MenuSubItem,\n  MenuSubButton,\n};\n","import { cva } from \"class-variance-authority\";\n\n/*\n * The `group-data-[collapsible=icon]:` variants throughout this file key off the data attributes\n * set by Sidebar.Root's outer wrapper — that's how every nested part knows the rail has collapsed\n * without each one subscribing to context. Anything that should vanish in the icon rail (labels,\n * badges, actions, sub-menus) hides itself here rather than being conditionally rendered, so the\n * collapse stays a pure CSS transition with no remount.\n */\nexport const sidebarMenuButtonVariants = cva(\n  [\n    \"group/menu-button peer/menu-button relative flex w-full items-center gap-2 overflow-hidden rounded-md\",\n    \"px-2 py-2 text-left font-sans text-text-primary outline-none transition-colors\",\n    \"hover:bg-bg-surface-hover\",\n    \"focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n    \"data-[active=true]:bg-bg-surface-hover data-[active=true]:font-medium data-[active=true]:text-text-primary\",\n    \"[&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-text-secondary\",\n    \"data-[active=true]:[&>svg]:text-text-primary\",\n    // In the icon rail only the leading icon survives: the label collapses to zero width rather\n    // than unmounting, so expanding again doesn't re-run the consumer's render.\n    \"group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0\",\n    \"group-data-[collapsible=icon]:[&>span]:hidden\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        outline: [\n          \"bg-bg-page shadow-[0_0_0_1px_var(--border-default)]\",\n          \"hover:shadow-[0_0_0_1px_var(--border-strong)]\",\n        ],\n      },\n      size: {\n        sm: \"h-7 text-xs\",\n        md: \"h-8 text-sm\",\n        lg: \"h-12 text-sm\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"md\" },\n  },\n);\n\nexport const sidebarMenuSubButtonVariants = cva(\n  [\n    \"relative flex h-7 w-full items-center gap-2 overflow-hidden rounded-md px-2\",\n    \"font-sans text-text-secondary outline-none transition-colors\",\n    \"hover:bg-bg-surface-hover hover:text-text-primary\",\n    \"focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]\",\n    \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n    \"data-[active=true]:bg-bg-surface-hover data-[active=true]:font-medium data-[active=true]:text-text-primary\",\n    \"[&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0\",\n    \"[&>span]:truncate\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n"],"mappings":"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","names":["Trigger","MenuButton","MenuSubButton"]}

package/dist/chunk-HAMZFEZO.cjs

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }'use client';
+
+
+var _chunkNSTYHMFWcjs = require('./chunk-NSTYHMFW.cjs');
+
+// src/components/button/Button.jsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// src/components/button/Button.variants.js
+var _classvarianceauthority = require('class-variance-authority');
+var buttonVariants = _classvarianceauthority.cva.call(void 0, 
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-sans font-semibold transition-[background-color,border-color,transform] duration-150 ease-out active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:border-border-focus focus-visible:shadow-[var(--shadow-focus-ring)]",
+  {
+    variants: {
+      variant: {
+        primary: "border border-accent bg-accent text-text-inverse hover:bg-accent-hover",
+        secondary: "border border-border-strong bg-bg-page text-text-primary hover:bg-bg-surface",
+        ghost: "border border-transparent bg-transparent text-text-primary hover:bg-bg-surface",
+        danger: "border border-danger-500 bg-danger-500 text-text-inverse hover:bg-danger-700"
+      },
+      size: {
+        sm: "h-8 gap-1.5 px-3 text-sm",
+        md: "h-[38px] gap-2 px-4 text-base",
+        lg: "h-11 gap-2 px-5 text-md"
+      }
+    },
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+
+// src/components/button/Button.jsx
+var _jsxruntime = require('react/jsx-runtime');
+var Button = _react2.default.forwardRef(function Button2({ variant, size, disabled, iconLeft, iconRight, children, className, type = "button", ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      ref,
+      type,
+      disabled,
+      className: _chunkNSTYHMFWcjs.cn.call(void 0, buttonVariants({ variant, size }), className),
+      ...props,
+      children: [
+        iconLeft,
+        children,
+        iconRight
+      ]
+    }
+  );
+});
+
+
+
+exports.Button = Button;
+//# sourceMappingURL=chunk-HAMZFEZO.cjs.map

package/dist/chunk-HAMZFEZO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/Atoms/Atoms/packages/ui/dist/chunk-HAMZFEZO.cjs","../src/components/button/Button.jsx","../src/components/button/Button.variants.js"],"names":["Button"],"mappings":"AAAA,qLAAY;AACZ;AACE;AACF,wDAA6B;AAC7B;AACA;ACLA,4EAAkB;ADOlB;AACA;AERA,kEAAoB;AAEb,IAAM,eAAA,EAAiB,yCAAA;AAAA,EAC5B,iWAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,wEAAA;AAAA,QACT,SAAA,EAAW,8EAAA;AAAA,QACX,KAAA,EAAO,gFAAA;AAAA,QACP,MAAA,EAAQ;AAAA,MACV,CAAA;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,0BAAA;AAAA,QACJ,EAAA,EAAI,+BAAA;AAAA,QACJ,EAAA,EAAI;AAAA,MACN;AAAA,IACF,CAAA;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,KAAK;AAAA,EACpD;AACF,CAAA;AFSA;AACA;ACrBI,+CAAA;AALG,IAAM,OAAA,EAAS,eAAA,CAAM,UAAA,CAAW,SAASA,OAAAA,CAC9C,EAAE,OAAA,EAAS,IAAA,EAAM,QAAA,EAAU,QAAA,EAAU,SAAA,EAAW,QAAA,EAAU,SAAA,EAAW,KAAA,EAAO,QAAA,EAAU,GAAG,MAAM,CAAA,EAC/F,GAAA,EACA;AACA,EAAA,uBACE,8BAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA,EAAW,kCAAA,cAAG,CAAe,EAAE,OAAA,EAAS,KAAK,CAAC,CAAA,EAAG,SAAS,CAAA;AAAA,MACzD,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAC,CAAA;AD4BD;AACA;AACE;AACF,wBAAC","file":"/home/runner/work/Atoms/Atoms/packages/ui/dist/chunk-HAMZFEZO.cjs","sourcesContent":[null,"import React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { buttonVariants } from \"./Button.variants.js\";\n\nexport const Button = React.forwardRef(function Button(\n  { variant, size, disabled, iconLeft, iconRight, children, className, type = \"button\", ...props },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    >\n      {iconLeft}\n      {children}\n      {iconRight}\n    </button>\n  );\n});\n","import { cva } from \"class-variance-authority\";\n\nexport const buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-sans font-semibold transition-[background-color,border-color,transform] duration-150 ease-out active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:border-border-focus focus-visible:shadow-[var(--shadow-focus-ring)]\",\n  {\n    variants: {\n      variant: {\n        primary: \"border border-accent bg-accent text-text-inverse hover:bg-accent-hover\",\n        secondary: \"border border-border-strong bg-bg-page text-text-primary hover:bg-bg-surface\",\n        ghost: \"border border-transparent bg-transparent text-text-primary hover:bg-bg-surface\",\n        danger: \"border border-danger-500 bg-danger-500 text-text-inverse hover:bg-danger-700\",\n      },\n      size: {\n        sm: \"h-8 gap-1.5 px-3 text-sm\",\n        md: \"h-[38px] gap-2 px-4 text-base\",\n        lg: \"h-11 gap-2 px-5 text-md\",\n      },\n    },\n    defaultVariants: { variant: \"primary\", size: \"md\" },\n  },\n);\n"]}