@devalok/shilp-sutra 0.38.0 → 0.39.0

package/dist/ui/segmented-control.js

@@ -58,7 +58,7 @@ var o = {
 		tabIndex: -1,
 		"aria-label": _["aria-label"] ?? "Segmented control",
 		onKeyDown: S,
-		className: e("inline-flex p-[3px] rounded-ds-lg", "bg-surface-raised-hover border border-surface-border-subtle shadow-inset", h && "opacity-action-disabled pointer-events-none", g),
+		className: e("inline-flex p-[3px] rounded-pill", "bg-surface-raised-hover border border-surface-border-subtle shadow-inset", h && "opacity-action-disabled pointer-events-none", g),
 		..._,
 		children: /* @__PURE__ */ n(i, {
 			id: y,
@@ -71,11 +71,11 @@ var o = {
 					tabIndex: i ? 0 : -1,
 					disabled: h,
 					onClick: () => m(t.id),
-					className: e("relative inline-flex items-center justify-center gap-ds-02 rounded-ds-md", "font-medium transition-colors duration-fast-02 ease-productive-standard", "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", C, i ? c[d] : "text-surface-fg-muted hover:text-surface-fg"),
+					className: e("relative inline-flex items-center justify-center gap-ds-02 rounded-pill", "font-medium transition-colors duration-fast-02 ease-productive-standard", "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", C, i ? c[d] : "text-surface-fg-muted hover:text-surface-fg"),
 					children: [
 						i && /* @__PURE__ */ n(a.span, {
 							layoutId: "segment-pill",
-							className: e("absolute inset-0 rounded-ds-md pointer-events-none", s[d]),
+							className: e("absolute inset-0 rounded-pill pointer-events-none", s[d]),
 							transition: l
 						}),
 						o && /* @__PURE__ */ n(o, { className: e("relative z-[1] shrink-0", w) }),

package/dist/ui/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","names":[],"sources":["../../src/ui/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { LayoutGroup,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/* ── Types ─────────────────────────────────────────────────── */\n\nexport type SegmentedControlSize = 'sm' | 'md' | 'lg'\nexport type SegmentedControlVariant = 'default' | 'solid'\n\nexport interface SegmentedControlOption {\n  id: string\n  text: string\n  /** Optional icon component rendered before the text label. */\n  icon?: React.ComponentType<{ className?: string }>\n}\n\nexport interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  size?: SegmentedControlSize\n  variant?: SegmentedControlVariant\n  options: SegmentedControlOption[]\n  selectedId: string\n  onSelect: (id: string) => void\n  disabled?: boolean\n}\n\n/* ── Size config ───────────────────────────────────────────── */\n\nconst sizeConfig = {\n  sm: { button: 'h-7 px-ds-04 text-ds-sm', icon: 'h-3.5 w-3.5' },\n  md: { button: 'h-8 px-ds-05 text-ds-md', icon: 'h-4 w-4' },\n  lg: { button: 'h-10 px-ds-06 text-ds-md', icon: 'h-4 w-4' },\n} as const\n\n/* ── Pill styles per variant ───────────────────────────────── */\n\nconst pillStyles = {\n  default: 'bg-surface-overlay shadow-raised',\n  solid: 'bg-accent-9',\n} as const\n\nconst selectedTextStyles = {\n  default: 'text-surface-fg',\n  solid: 'text-accent-fg',\n} as const\n\n/* ── Spring config (snappy, minimal overshoot) ─────────────── */\n/* Intentionally softer than springs.snappy (500/30/0.5) for pill slide feel */\n\nconst pillSpring = { type: 'spring' as const, stiffness: 400, damping: 30 }\n\n/* ── SegmentedControl ──────────────────────────────────────── */\n\nconst SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      size = 'md',\n      variant = 'default',\n      options,\n      selectedId,\n      onSelect,\n      disabled = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const instanceId = React.useId()\n    const tablistRef = React.useRef<HTMLDivElement | null>(null)\n\n    // Compose refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        tablistRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      },\n      [ref],\n    )\n\n    // Keyboard navigation\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      const currentIndex = options.findIndex((o) => o.id === selectedId)\n      let nextIndex = currentIndex\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          e.preventDefault()\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0\n          break\n        case 'Home':\n          e.preventDefault()\n          nextIndex = 0\n          break\n        case 'End':\n          e.preventDefault()\n          nextIndex = options.length - 1\n          break\n        default:\n          return\n      }\n\n      onSelect(options[nextIndex].id)\n      requestAnimationFrame(() => {\n        const buttons = tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n        buttons?.[nextIndex]?.focus()\n      })\n    }\n\n    const { button: buttonSize, icon: iconSize } = sizeConfig[size]\n\n    return (\n      <div\n        ref={mergedRef}\n        role=\"tablist\"\n        tabIndex={-1}\n        aria-label={props['aria-label'] ?? 'Segmented control'}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'inline-flex p-[3px] rounded-ds-lg',\n          'bg-surface-raised-hover border border-surface-border-subtle shadow-inset',\n          disabled && 'opacity-action-disabled pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        <LayoutGroup id={instanceId}>\n          {options.map((option) => {\n            const isSelected = option.id === selectedId\n            const OptionIcon = option.icon\n\n            return (\n              <button\n                key={option.id}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isSelected}\n                tabIndex={isSelected ? 0 : -1}\n                disabled={disabled}\n                onClick={() => onSelect(option.id)}\n                className={cn(\n                  'relative inline-flex items-center justify-center gap-ds-02 rounded-ds-md',\n                  'font-medium transition-colors duration-fast-02 ease-productive-standard',\n                  'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n                  buttonSize,\n                  isSelected\n                    ? selectedTextStyles[variant]\n                    : 'text-surface-fg-muted hover:text-surface-fg',\n                )}\n              >\n                {/* Sliding pill indicator */}\n                {isSelected && (\n                  <motion.span\n                    layoutId=\"segment-pill\"\n                    className={cn(\n                      'absolute inset-0 rounded-ds-md pointer-events-none',\n                      pillStyles[variant],\n                    )}\n                    transition={pillSpring}\n                  />\n                )}\n\n                {/* Content (above pill via z-index) */}\n                {OptionIcon && (\n                  <OptionIcon className={cn('relative z-[1] shrink-0', iconSize)} />\n                )}\n                <span className=\"relative z-[1]\">{option.text}</span>\n              </button>\n            )\n          })}\n        </LayoutGroup>\n      </div>\n    )\n  },\n)\nSegmentedControl.displayName = 'SegmentedControl'\n\n/* ── Exports ───────────────────────────────────────────────── */\n\nexport { SegmentedControl }\n"],"mappings":";;;;;;AA8BA,IAAM,IAAa;CACjB,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAe;CAC9D,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAW;CAC1D,IAAI;EAAE,QAAQ;EAA4B,MAAM;EAAW;CAC5D,EAIK,IAAa;CACjB,SAAS;CACT,OAAO;CACR,EAEK,IAAqB;CACzB,SAAS;CACT,OAAO;CACR,EAKK,IAAa;CAAE,MAAM;CAAmB,WAAW;CAAK,SAAS;CAAI,EAIrE,IAAmB,EAAM,WAC7B,SACE,EACE,UAAO,MACP,aAAU,WACV,YACA,eACA,aACA,cAAW,IACX,cACA,GAAG,KAEL,GACA;CACA,IAAM,IAAa,EAAM,OAAO,EAC1B,IAAa,EAAM,OAA8B,KAAK,EAGtD,IAAY,EAAM,aACrB,MAAgC;AAE/B,EADA,EAAW,UAAU,GACjB,OAAO,KAAQ,aAAY,EAAI,EAAK,GAC/B,MAAM,EAAsD,UAAU;IAEjF,CAAC,EAAI,CACN,EAGK,KAAiB,MAA2C;AAChE,MAAI,EAAU;EAEd,IAAM,IAAe,EAAQ,WAAW,MAAM,EAAE,OAAO,EAAW,EAC9D,IAAY;AAEhB,UAAQ,EAAE,KAAV;GACE,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,IAAI,IAAe,IAAI,EAAQ,SAAS;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,EAAQ,SAAS,IAAI,IAAe,IAAI;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY;AACZ;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,EAAQ,SAAS;AAC7B;GACF,QACE;;AAIJ,EADA,EAAS,EAAQ,GAAW,GAAG,EAC/B,4BAA4B;AAE1B,IADgB,EAAW,SAAS,iBAAoC,iBAAe,IAC7E,IAAY,OAAO;IAC7B;IAGE,EAAE,QAAQ,GAAY,MAAM,MAAa,EAAW;AAE1D,QACE,kBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,UAAU;EACV,cAAY,EAAM,iBAAiB;EACnC,WAAW;EACX,WAAW,EACT,qCACA,4EACA,KAAY,+CACZ,EACD;EACD,GAAI;YAEJ,kBAAC,GAAD;GAAa,IAAI;aACd,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAa,EAAO,OAAO,GAC3B,IAAa,EAAO;AAE1B,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,iBAAe;KACf,UAAU,IAAa,IAAI;KACjB;KACV,eAAe,EAAS,EAAO,GAAG;KAClC,WAAW,EACT,4EACA,2EACA,+FACA,GACA,IACI,EAAmB,KACnB,8CACL;eAhBH;MAmBG,KACC,kBAAC,EAAO,MAAR;OACE,UAAS;OACT,WAAW,EACT,sDACA,EAAW,GACZ;OACD,YAAY;OACZ,CAAA;MAIH,KACC,kBAAC,GAAD,EAAY,WAAW,EAAG,2BAA2B,EAAS,EAAI,CAAA;MAEpE,kBAAC,QAAD;OAAM,WAAU;iBAAkB,EAAO;OAAY,CAAA;MAC9C;OAlCF,EAAO,GAkCL;KAEX;GACU,CAAA;EACV,CAAA;EAGX;AACD,EAAiB,cAAc"}
+{"version":3,"file":"segmented-control.js","names":[],"sources":["../../src/ui/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { LayoutGroup,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/* ── Types ─────────────────────────────────────────────────── */\n\nexport type SegmentedControlSize = 'sm' | 'md' | 'lg'\nexport type SegmentedControlVariant = 'default' | 'solid'\n\nexport interface SegmentedControlOption {\n  id: string\n  text: string\n  /** Optional icon component rendered before the text label. */\n  icon?: React.ComponentType<{ className?: string }>\n}\n\nexport interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  size?: SegmentedControlSize\n  variant?: SegmentedControlVariant\n  options: SegmentedControlOption[]\n  selectedId: string\n  onSelect: (id: string) => void\n  disabled?: boolean\n}\n\n/* ── Size config ───────────────────────────────────────────── */\n\nconst sizeConfig = {\n  sm: { button: 'h-7 px-ds-04 text-ds-sm', icon: 'h-3.5 w-3.5' },\n  md: { button: 'h-8 px-ds-05 text-ds-md', icon: 'h-4 w-4' },\n  lg: { button: 'h-10 px-ds-06 text-ds-md', icon: 'h-4 w-4' },\n} as const\n\n/* ── Pill styles per variant ───────────────────────────────── */\n\nconst pillStyles = {\n  default: 'bg-surface-overlay shadow-raised',\n  solid: 'bg-accent-9',\n} as const\n\nconst selectedTextStyles = {\n  default: 'text-surface-fg',\n  solid: 'text-accent-fg',\n} as const\n\n/* ── Spring config (snappy, minimal overshoot) ─────────────── */\n/* Intentionally softer than springs.snappy (500/30/0.5) for pill slide feel */\n\nconst pillSpring = { type: 'spring' as const, stiffness: 400, damping: 30 }\n\n/* ── SegmentedControl ──────────────────────────────────────── */\n\nconst SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      size = 'md',\n      variant = 'default',\n      options,\n      selectedId,\n      onSelect,\n      disabled = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const instanceId = React.useId()\n    const tablistRef = React.useRef<HTMLDivElement | null>(null)\n\n    // Compose refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        tablistRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      },\n      [ref],\n    )\n\n    // Keyboard navigation\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      const currentIndex = options.findIndex((o) => o.id === selectedId)\n      let nextIndex = currentIndex\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          e.preventDefault()\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0\n          break\n        case 'Home':\n          e.preventDefault()\n          nextIndex = 0\n          break\n        case 'End':\n          e.preventDefault()\n          nextIndex = options.length - 1\n          break\n        default:\n          return\n      }\n\n      onSelect(options[nextIndex].id)\n      requestAnimationFrame(() => {\n        const buttons = tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n        buttons?.[nextIndex]?.focus()\n      })\n    }\n\n    const { button: buttonSize, icon: iconSize } = sizeConfig[size]\n\n    return (\n      <div\n        ref={mergedRef}\n        role=\"tablist\"\n        tabIndex={-1}\n        aria-label={props['aria-label'] ?? 'Segmented control'}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'inline-flex p-[3px] rounded-pill',\n          'bg-surface-raised-hover border border-surface-border-subtle shadow-inset',\n          disabled && 'opacity-action-disabled pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        <LayoutGroup id={instanceId}>\n          {options.map((option) => {\n            const isSelected = option.id === selectedId\n            const OptionIcon = option.icon\n\n            return (\n              <button\n                key={option.id}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isSelected}\n                tabIndex={isSelected ? 0 : -1}\n                disabled={disabled}\n                onClick={() => onSelect(option.id)}\n                className={cn(\n                  'relative inline-flex items-center justify-center gap-ds-02 rounded-pill',\n                  'font-medium transition-colors duration-fast-02 ease-productive-standard',\n                  'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n                  buttonSize,\n                  isSelected\n                    ? selectedTextStyles[variant]\n                    : 'text-surface-fg-muted hover:text-surface-fg',\n                )}\n              >\n                {/* Sliding pill indicator */}\n                {isSelected && (\n                  <motion.span\n                    layoutId=\"segment-pill\"\n                    className={cn(\n                      'absolute inset-0 rounded-pill pointer-events-none',\n                      pillStyles[variant],\n                    )}\n                    transition={pillSpring}\n                  />\n                )}\n\n                {/* Content (above pill via z-index) */}\n                {OptionIcon && (\n                  <OptionIcon className={cn('relative z-[1] shrink-0', iconSize)} />\n                )}\n                <span className=\"relative z-[1]\">{option.text}</span>\n              </button>\n            )\n          })}\n        </LayoutGroup>\n      </div>\n    )\n  },\n)\nSegmentedControl.displayName = 'SegmentedControl'\n\n/* ── Exports ───────────────────────────────────────────────── */\n\nexport { SegmentedControl }\n"],"mappings":";;;;;;AA8BA,IAAM,IAAa;CACjB,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAe;CAC9D,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAW;CAC1D,IAAI;EAAE,QAAQ;EAA4B,MAAM;EAAW;CAC5D,EAIK,IAAa;CACjB,SAAS;CACT,OAAO;CACR,EAEK,IAAqB;CACzB,SAAS;CACT,OAAO;CACR,EAKK,IAAa;CAAE,MAAM;CAAmB,WAAW;CAAK,SAAS;CAAI,EAIrE,IAAmB,EAAM,WAC7B,SACE,EACE,UAAO,MACP,aAAU,WACV,YACA,eACA,aACA,cAAW,IACX,cACA,GAAG,KAEL,GACA;CACA,IAAM,IAAa,EAAM,OAAO,EAC1B,IAAa,EAAM,OAA8B,KAAK,EAGtD,IAAY,EAAM,aACrB,MAAgC;AAE/B,EADA,EAAW,UAAU,GACjB,OAAO,KAAQ,aAAY,EAAI,EAAK,GAC/B,MAAM,EAAsD,UAAU;IAEjF,CAAC,EAAI,CACN,EAGK,KAAiB,MAA2C;AAChE,MAAI,EAAU;EAEd,IAAM,IAAe,EAAQ,WAAW,MAAM,EAAE,OAAO,EAAW,EAC9D,IAAY;AAEhB,UAAQ,EAAE,KAAV;GACE,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,IAAI,IAAe,IAAI,EAAQ,SAAS;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,EAAQ,SAAS,IAAI,IAAe,IAAI;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY;AACZ;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,EAAQ,SAAS;AAC7B;GACF,QACE;;AAIJ,EADA,EAAS,EAAQ,GAAW,GAAG,EAC/B,4BAA4B;AAE1B,IADgB,EAAW,SAAS,iBAAoC,iBAAe,IAC7E,IAAY,OAAO;IAC7B;IAGE,EAAE,QAAQ,GAAY,MAAM,MAAa,EAAW;AAE1D,QACE,kBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,UAAU;EACV,cAAY,EAAM,iBAAiB;EACnC,WAAW;EACX,WAAW,EACT,oCACA,4EACA,KAAY,+CACZ,EACD;EACD,GAAI;YAEJ,kBAAC,GAAD;GAAa,IAAI;aACd,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAa,EAAO,OAAO,GAC3B,IAAa,EAAO;AAE1B,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,iBAAe;KACf,UAAU,IAAa,IAAI;KACjB;KACV,eAAe,EAAS,EAAO,GAAG;KAClC,WAAW,EACT,2EACA,2EACA,+FACA,GACA,IACI,EAAmB,KACnB,8CACL;eAhBH;MAmBG,KACC,kBAAC,EAAO,MAAR;OACE,UAAS;OACT,WAAW,EACT,qDACA,EAAW,GACZ;OACD,YAAY;OACZ,CAAA;MAIH,KACC,kBAAC,GAAD,EAAY,WAAW,EAAG,2BAA2B,EAAS,EAAI,CAAA;MAEpE,kBAAC,QAAD;OAAM,WAAU;iBAAkB,EAAO;OAAY,CAAA;MAC9C;OAlCF,EAAO,GAkCL;KAEX;GACU,CAAA;EACV,CAAA;EAGX;AACD,EAAiB,cAAc"}

package/dist/ui/select.js

@@ -10,7 +10,7 @@ import { jsx as S, jsxs as C } from "react/jsx-runtime";
 import { IconCheck as w, IconChevronDown as T, IconChevronUp as E } from "@tabler/icons-react";
 import { motion as D } from "framer-motion";
 //#region src/ui/select.tsx
-var O = e, k = r, A = u, j = _("flex w-full items-center justify-between whitespace-nowrap rounded-ds-md placeholder:text-surface-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1", {
+var O = e, k = r, A = u, j = _("flex w-full items-center justify-between whitespace-nowrap rounded-control placeholder:text-surface-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1", {
 	variants: {
 		variant: {
 			default: "border border-surface-border-strong bg-surface-raised-hover focus-visible:border-accent-7",
@@ -97,7 +97,7 @@ var F = x.forwardRef(({ className: e, children: n, position: r = "popper", ...a
 			...h.snappy,
 			opacity: g.fade
 		},
-		className: v("relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay text-surface-fg shadow-floating", r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", e),
+		className: v("relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay border border-surface-border-strong bg-surface-overlay text-surface-fg shadow-floating", r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", e),
 		children: [
 			/* @__PURE__ */ S(N, {}),
 			/* @__PURE__ */ S(c, {
@@ -117,7 +117,7 @@ var I = x.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ S(s, {
 I.displayName = s.displayName;
 var L = x.forwardRef(({ className: e, children: t, ...r }, i) => /* @__PURE__ */ C(n, {
 	ref: i,
-	className: v("relative flex w-full cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-03 pr-ds-07 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	className: v("relative flex w-full cursor-default select-none items-center rounded-control py-ds-02b pl-ds-03 pr-ds-07 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
 	...r,
 	children: [/* @__PURE__ */ S("span", {
 		className: "absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",

package/dist/ui/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../src/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@primitives/react-select'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Select root — manages open/close state and selected value.\n *\n * **Important:** `size` is NOT a prop on `Select`. Set it on `SelectTrigger` instead.\n * Passing `size` directly to `Select` produces no TypeScript error but has no effect.\n *\n * @example\n * // CORRECT — size goes on SelectTrigger:\n * <Select onValueChange={setValue}>\n *   <SelectTrigger size=\"lg\">\n *     <SelectValue placeholder=\"Choose...\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"a\">Option A</SelectItem>\n *     <SelectItem value=\"b\">Option B</SelectItem>\n *   </SelectContent>\n * </Select>\n *\n * // WRONG — size on Select root is silently ignored (no TypeScript error):\n * // <Select size=\"lg\">...</Select>\n */\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nexport const selectTriggerVariants = cva(\n  'flex w-full items-center justify-between whitespace-nowrap rounded-ds-md placeholder:text-surface-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1',\n  {\n    variants: {\n      variant: {\n        default:\n          'border border-surface-border-strong bg-surface-raised-hover focus-visible:border-accent-7',\n        outline:\n          'border border-surface-border-strong bg-transparent focus-visible:border-accent-7',\n        ghost:\n          'border border-transparent bg-transparent hover:bg-surface-raised-hover focus-visible:border-accent-7',\n      },\n      color: {\n        default: '',\n        error: 'border-error-7 text-error-11 focus-visible:ring-error-9',\n        success: 'border-success-7',\n        warning: 'border-warning-7',\n      },\n      size: {\n        xs: 'h-ds-xs-plus text-ds-sm px-ds-02',\n        sm: 'h-ds-sm text-ds-sm px-ds-03',\n        md: 'h-ds-md text-ds-md px-ds-04',\n        lg: 'h-ds-lg text-ds-md px-ds-05',\n      },\n    },\n    defaultVariants: { variant: 'default', color: 'default', size: 'md' },\n  },\n)\n\n/**\n * Props for SelectTrigger. Use `size` here (not on the `Select` root).\n *\n * @example\n * <SelectTrigger size=\"lg\" className=\"w-[200px]\">\n *   <SelectValue placeholder=\"Select an option\" />\n * </SelectTrigger>\n */\nexport interface SelectTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'color'>,\n    VariantProps<typeof selectTriggerVariants> {}\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  SelectTriggerProps\n>(({ className, children, variant, color, size, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const isError =\n    color === 'error' ||\n    (fieldCtx.state === 'error' && color == null)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  return (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(selectTriggerVariants({ variant, color: isError && !color ? 'error' : color, size }), className)}\n    aria-invalid={isError || undefined}\n    aria-describedby={ariaDescribedBy}\n    aria-required={ariaRequired || undefined}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <Icon icon={IconChevronDown} size=\"sm\" className=\"opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n  )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-ds-02',\n      className,\n    )}\n    {...props}\n  >\n    <Icon icon={IconChevronUp} size=\"sm\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-ds-02',\n      className,\n    )}\n    {...props}\n  >\n    <Icon icon={IconChevronDown} size=\"sm\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      asChild\n      {...props}\n    >\n      <motion.div\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ ...springs.snappy, opacity: tweens.fade }}\n        className={cn(\n          'relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay text-surface-fg shadow-floating',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className,\n        )}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-ds-02',\n            position === 'popper' &&\n              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </motion.div>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn('px-ds-03 py-ds-02b text-ds-md font-semibold', className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex w-full cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-03 pr-ds-07 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":[],"sources":["../../src/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@primitives/react-select'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Select root — manages open/close state and selected value.\n *\n * **Important:** `size` is NOT a prop on `Select`. Set it on `SelectTrigger` instead.\n * Passing `size` directly to `Select` produces no TypeScript error but has no effect.\n *\n * @example\n * // CORRECT — size goes on SelectTrigger:\n * <Select onValueChange={setValue}>\n *   <SelectTrigger size=\"lg\">\n *     <SelectValue placeholder=\"Choose...\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"a\">Option A</SelectItem>\n *     <SelectItem value=\"b\">Option B</SelectItem>\n *   </SelectContent>\n * </Select>\n *\n * // WRONG — size on Select root is silently ignored (no TypeScript error):\n * // <Select size=\"lg\">...</Select>\n */\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nexport const selectTriggerVariants = cva(\n  'flex w-full items-center justify-between whitespace-nowrap rounded-control placeholder:text-surface-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1',\n  {\n    variants: {\n      variant: {\n        default:\n          'border border-surface-border-strong bg-surface-raised-hover focus-visible:border-accent-7',\n        outline:\n          'border border-surface-border-strong bg-transparent focus-visible:border-accent-7',\n        ghost:\n          'border border-transparent bg-transparent hover:bg-surface-raised-hover focus-visible:border-accent-7',\n      },\n      color: {\n        default: '',\n        error: 'border-error-7 text-error-11 focus-visible:ring-error-9',\n        success: 'border-success-7',\n        warning: 'border-warning-7',\n      },\n      size: {\n        xs: 'h-ds-xs-plus text-ds-sm px-ds-02',\n        sm: 'h-ds-sm text-ds-sm px-ds-03',\n        md: 'h-ds-md text-ds-md px-ds-04',\n        lg: 'h-ds-lg text-ds-md px-ds-05',\n      },\n    },\n    defaultVariants: { variant: 'default', color: 'default', size: 'md' },\n  },\n)\n\n/**\n * Props for SelectTrigger. Use `size` here (not on the `Select` root).\n *\n * @example\n * <SelectTrigger size=\"lg\" className=\"w-[200px]\">\n *   <SelectValue placeholder=\"Select an option\" />\n * </SelectTrigger>\n */\nexport interface SelectTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'color'>,\n    VariantProps<typeof selectTriggerVariants> {}\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  SelectTriggerProps\n>(({ className, children, variant, color, size, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const isError =\n    color === 'error' ||\n    (fieldCtx.state === 'error' && color == null)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  return (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(selectTriggerVariants({ variant, color: isError && !color ? 'error' : color, size }), className)}\n    aria-invalid={isError || undefined}\n    aria-describedby={ariaDescribedBy}\n    aria-required={ariaRequired || undefined}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <Icon icon={IconChevronDown} size=\"sm\" className=\"opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n  )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-ds-02',\n      className,\n    )}\n    {...props}\n  >\n    <Icon icon={IconChevronUp} size=\"sm\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-ds-02',\n      className,\n    )}\n    {...props}\n  >\n    <Icon icon={IconChevronDown} size=\"sm\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      asChild\n      {...props}\n    >\n      <motion.div\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ ...springs.snappy, opacity: tweens.fade }}\n        className={cn(\n          'relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay border border-surface-border-strong bg-surface-overlay text-surface-fg shadow-floating',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className,\n        )}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-ds-02',\n            position === 'popper' &&\n              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </motion.div>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn('px-ds-03 py-ds-02b text-ds-md font-semibold', className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex w-full cursor-default select-none items-center rounded-control py-ds-02b pl-ds-03 pr-ds-07 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"mappings":"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"}

package/dist/ui/sheet.js

@@ -90,11 +90,11 @@ var O = {
 				children: [
 					d && /* @__PURE__ */ g("div", {
 						className: "flex justify-center pt-ds-03 pb-ds-02",
-						children: /* @__PURE__ */ g("div", { className: "h-1 w-8 rounded-ds-full bg-surface-border" })
+						children: /* @__PURE__ */ g("div", { className: "h-1 w-8 rounded-pill bg-surface-border" })
 					}),
 					/* @__PURE__ */ _(n, {
 						title: "Close",
-						className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none",
+						className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none",
 						children: [/* @__PURE__ */ g(p, {
 							icon: v,
 							size: "sm"

package/dist/ui/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":[],"sources":["../../src/ui/sheet.tsx"],"sourcesContent":["'use client'\n\nimport * as SheetPrimitive from '@primitives/react-dialog'\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Icon } from './icon'\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal open-state context ──────────────────────────────────────\n\nconst SheetOpenContext = React.createContext<{ open: boolean; onClose: () => void }>({ open: false, onClose: () => {} })\n\n/**\n * Sheet compound component — accessible sliding panel anchored to a screen edge, with focus trap\n * and Escape dismissal. Built on the Dialog primitive.\n *\n * **Parts (in composition order):**\n * - `Sheet` — manages open/closed state (this root)\n * - `SheetTrigger` — element that opens the sheet (use `asChild` to render your own button)\n * - `SheetContent` — the sliding panel (use `side=\"right\"|\"left\"|\"top\"|\"bottom\"`, default `\"right\"`)\n * - `SheetHeader` — optional layout wrapper for title + description\n * - `SheetTitle` — required for accessibility (sets the sheet's ARIA label)\n * - `SheetDescription` — optional subtitle text\n * - `SheetFooter` — optional layout wrapper for action buttons\n * - `SheetClose` — manual close trigger (a close button is already built into SheetContent)\n * - `SheetPortal` — low-level portal wrapper (exported for custom layout; used internally by SheetContent)\n * - `SheetOverlay` — the backdrop element (exported for custom overlay styling)\n *\n * @compound\n *\n * Note: The `side` prop goes on `SheetContent`, NOT on `Sheet`.\n * A close button is auto-rendered in the top corner of `SheetContent`.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n *   <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitle>Account settings</SheetTitle>\n *       <SheetDescription>Manage your profile and preferences.</SheetDescription>\n *     </SheetHeader>\n *   </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n *   <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n *   <SheetContent side=\"bottom\">\n *     <SheetTitle>Actions</SheetTitle>\n *     <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n *       <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n *       <Button variant=\"outline\" fullWidth>Duplicate</Button>\n *     </div>\n *   </SheetContent>\n * </Sheet>\n */\nconst Sheet: React.FC<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const contextValue = React.useMemo(\n    () => ({ open, onClose: () => handleOpenChange(false) }),\n    [open, handleOpenChange],\n  )\n\n  return (\n    <SheetOpenContext.Provider value={contextValue}>\n      <SheetPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props}>\n        {children}\n      </SheetPrimitive.Root>\n    </SheetOpenContext.Provider>\n  )\n}\nSheet.displayName = 'Sheet'\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay forceMount asChild>\n    <motion.div\n      ref={ref}\n      className={cn('fixed inset-0 z-modal bg-overlay', className)}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={tweens.fade}\n      {...motionProps(props)}\n    />\n  </SheetPrimitive.Overlay>\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── Slide direction map ──────────────────────────────────────────────\n\nconst slideInitial = {\n  top: { y: '-100%' },\n  bottom: { y: '100%' },\n  left: { x: '-100%' },\n  right: { x: '100%' },\n} as const\n\nconst slideAnimate = {\n  top: { y: 0 },\n  bottom: { y: 0 },\n  left: { x: 0 },\n  right: { x: 0 },\n} as const\n\nconst sheetVariants = cva(\n  'fixed z-modal gap-ds-05 bg-surface-overlay p-ds-06 shadow-overlay',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b border-surface-border-strong',\n        bottom: 'inset-x-0 bottom-0 border-t border-surface-border-strong',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-surface-border-strong sm:max-w-sm',\n        right: 'inset-y-0 right-0 h-full w-3/4 border-l border-surface-border-strong sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\n/**\n * Props for SheetContent — the sliding panel content that appears from one of four screen edges.\n * Built on the Dialog primitive: accessible, focus-trapped, and dismissible with Escape.\n *\n * **`side` variants:** `right` (default, slide from right) | `left` | `top` | `bottom`\n *\n * **Usage pattern:** Wrap the whole sheet in `<Sheet>`, add a `<SheetTrigger>`, and put content\n * inside `<SheetContent>`. Use `<SheetHeader>`, `<SheetTitle>`, and `<SheetDescription>` for\n * accessible structure. A close button is auto-rendered in the top corner.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n *   <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitle>Account settings</SheetTitle>\n *       <SheetDescription>Manage your profile and preferences.</SheetDescription>\n *     </SheetHeader>\n *   </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n *   <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n *   <SheetContent side=\"bottom\">\n *     <SheetTitle>Actions</SheetTitle>\n *     <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n *       <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n *       <Button variant=\"outline\" fullWidth>Duplicate</Button>\n *     </div>\n *   </SheetContent>\n * </Sheet>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {\n  /** When true (default), Sheet slides from bottom on mobile with swipe-to-dismiss. */\n  responsive?: boolean\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = 'right', responsive, className, children, ...props }, ref) => {\n  const isMobileRaw = useIsMobile()\n  const isMobile = responsive !== false && isMobileRaw\n  const isReduced = useReducedMotion()\n  const { open, onClose } = React.useContext(SheetOpenContext)\n  const effectiveSide = isMobile ? 'bottom' : (side ?? 'right')\n\n  const internalRef = React.useRef<HTMLDivElement>(null)\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      internalRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n    },\n    [ref],\n  )\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <SheetPortal forceMount>\n          <SheetOverlay />\n          <SheetPrimitive.Content forceMount asChild>\n            <motion.div\n              ref={composedRef}\n              className={cn(sheetVariants({ side: effectiveSide }), className)}\n              initial={slideInitial[effectiveSide]}\n              animate={slideAnimate[effectiveSide]}\n              exit={slideInitial[effectiveSide]}\n              transition={springs.smooth}\n              drag={isMobile && !isReduced ? 'y' : false}\n              dragConstraints={{ top: 0 }}\n              dragElastic={0.2}\n              onDragEnd={\n                isMobile\n                  ? (\n                      _: unknown,\n                      info: { offset: { y: number }; velocity: { y: number } },\n                    ) => {\n                      const h =\n                        internalRef.current?.getBoundingClientRect().height ?? 300\n                      if (info.offset.y > h * 0.3 || info.velocity.y > 500)\n                        onClose()\n                    }\n                  : undefined\n              }\n              {...motionProps(props)}\n            >\n              {isMobile && (\n                <div className=\"flex justify-center pt-ds-03 pb-ds-02\">\n                  <div className=\"h-1 w-8 rounded-ds-full bg-surface-border\" />\n                </div>\n              )}\n              <SheetPrimitive.Close title=\"Close\" className=\"absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none\">\n                <Icon icon={IconX} size=\"sm\" />\n                <span className=\"sr-only\">Close</span>\n              </SheetPrimitive.Close>\n              {children}\n            </motion.div>\n          </SheetPrimitive.Content>\n        </SheetPortal>\n      )}\n    </AnimatePresence>\n  )\n})\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col space-y-ds-03 text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSheetHeader.displayName = 'SheetHeader'\n\nconst SheetFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn('text-ds-lg font-semibold text-surface-fg', className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn('text-ds-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"sheet.js","names":[],"sources":["../../src/ui/sheet.tsx"],"sourcesContent":["'use client'\n\nimport * as SheetPrimitive from '@primitives/react-dialog'\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Icon } from './icon'\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal open-state context ──────────────────────────────────────\n\nconst SheetOpenContext = React.createContext<{ open: boolean; onClose: () => void }>({ open: false, onClose: () => {} })\n\n/**\n * Sheet compound component — accessible sliding panel anchored to a screen edge, with focus trap\n * and Escape dismissal. Built on the Dialog primitive.\n *\n * **Parts (in composition order):**\n * - `Sheet` — manages open/closed state (this root)\n * - `SheetTrigger` — element that opens the sheet (use `asChild` to render your own button)\n * - `SheetContent` — the sliding panel (use `side=\"right\"|\"left\"|\"top\"|\"bottom\"`, default `\"right\"`)\n * - `SheetHeader` — optional layout wrapper for title + description\n * - `SheetTitle` — required for accessibility (sets the sheet's ARIA label)\n * - `SheetDescription` — optional subtitle text\n * - `SheetFooter` — optional layout wrapper for action buttons\n * - `SheetClose` — manual close trigger (a close button is already built into SheetContent)\n * - `SheetPortal` — low-level portal wrapper (exported for custom layout; used internally by SheetContent)\n * - `SheetOverlay` — the backdrop element (exported for custom overlay styling)\n *\n * @compound\n *\n * Note: The `side` prop goes on `SheetContent`, NOT on `Sheet`.\n * A close button is auto-rendered in the top corner of `SheetContent`.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n *   <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitle>Account settings</SheetTitle>\n *       <SheetDescription>Manage your profile and preferences.</SheetDescription>\n *     </SheetHeader>\n *   </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n *   <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n *   <SheetContent side=\"bottom\">\n *     <SheetTitle>Actions</SheetTitle>\n *     <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n *       <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n *       <Button variant=\"outline\" fullWidth>Duplicate</Button>\n *     </div>\n *   </SheetContent>\n * </Sheet>\n */\nconst Sheet: React.FC<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const contextValue = React.useMemo(\n    () => ({ open, onClose: () => handleOpenChange(false) }),\n    [open, handleOpenChange],\n  )\n\n  return (\n    <SheetOpenContext.Provider value={contextValue}>\n      <SheetPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props}>\n        {children}\n      </SheetPrimitive.Root>\n    </SheetOpenContext.Provider>\n  )\n}\nSheet.displayName = 'Sheet'\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay forceMount asChild>\n    <motion.div\n      ref={ref}\n      className={cn('fixed inset-0 z-modal bg-overlay', className)}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n      transition={tweens.fade}\n      {...motionProps(props)}\n    />\n  </SheetPrimitive.Overlay>\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── Slide direction map ──────────────────────────────────────────────\n\nconst slideInitial = {\n  top: { y: '-100%' },\n  bottom: { y: '100%' },\n  left: { x: '-100%' },\n  right: { x: '100%' },\n} as const\n\nconst slideAnimate = {\n  top: { y: 0 },\n  bottom: { y: 0 },\n  left: { x: 0 },\n  right: { x: 0 },\n} as const\n\nconst sheetVariants = cva(\n  'fixed z-modal gap-ds-05 bg-surface-overlay p-ds-06 shadow-overlay',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b border-surface-border-strong',\n        bottom: 'inset-x-0 bottom-0 border-t border-surface-border-strong',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-surface-border-strong sm:max-w-sm',\n        right: 'inset-y-0 right-0 h-full w-3/4 border-l border-surface-border-strong sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n\n/**\n * Props for SheetContent — the sliding panel content that appears from one of four screen edges.\n * Built on the Dialog primitive: accessible, focus-trapped, and dismissible with Escape.\n *\n * **`side` variants:** `right` (default, slide from right) | `left` | `top` | `bottom`\n *\n * **Usage pattern:** Wrap the whole sheet in `<Sheet>`, add a `<SheetTrigger>`, and put content\n * inside `<SheetContent>`. Use `<SheetHeader>`, `<SheetTitle>`, and `<SheetDescription>` for\n * accessible structure. A close button is auto-rendered in the top corner.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n *   <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitle>Account settings</SheetTitle>\n *       <SheetDescription>Manage your profile and preferences.</SheetDescription>\n *     </SheetHeader>\n *   </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n *   <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n *   <SheetContent side=\"bottom\">\n *     <SheetTitle>Actions</SheetTitle>\n *     <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n *       <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n *       <Button variant=\"outline\" fullWidth>Duplicate</Button>\n *     </div>\n *   </SheetContent>\n * </Sheet>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {\n  /** When true (default), Sheet slides from bottom on mobile with swipe-to-dismiss. */\n  responsive?: boolean\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = 'right', responsive, className, children, ...props }, ref) => {\n  const isMobileRaw = useIsMobile()\n  const isMobile = responsive !== false && isMobileRaw\n  const isReduced = useReducedMotion()\n  const { open, onClose } = React.useContext(SheetOpenContext)\n  const effectiveSide = isMobile ? 'bottom' : (side ?? 'right')\n\n  const internalRef = React.useRef<HTMLDivElement>(null)\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      internalRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n    },\n    [ref],\n  )\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <SheetPortal forceMount>\n          <SheetOverlay />\n          <SheetPrimitive.Content forceMount asChild>\n            <motion.div\n              ref={composedRef}\n              className={cn(sheetVariants({ side: effectiveSide }), className)}\n              initial={slideInitial[effectiveSide]}\n              animate={slideAnimate[effectiveSide]}\n              exit={slideInitial[effectiveSide]}\n              transition={springs.smooth}\n              drag={isMobile && !isReduced ? 'y' : false}\n              dragConstraints={{ top: 0 }}\n              dragElastic={0.2}\n              onDragEnd={\n                isMobile\n                  ? (\n                      _: unknown,\n                      info: { offset: { y: number }; velocity: { y: number } },\n                    ) => {\n                      const h =\n                        internalRef.current?.getBoundingClientRect().height ?? 300\n                      if (info.offset.y > h * 0.3 || info.velocity.y > 500)\n                        onClose()\n                    }\n                  : undefined\n              }\n              {...motionProps(props)}\n            >\n              {isMobile && (\n                <div className=\"flex justify-center pt-ds-03 pb-ds-02\">\n                  <div className=\"h-1 w-8 rounded-pill bg-surface-border\" />\n                </div>\n              )}\n              <SheetPrimitive.Close title=\"Close\" className=\"absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none\">\n                <Icon icon={IconX} size=\"sm\" />\n                <span className=\"sr-only\">Close</span>\n              </SheetPrimitive.Close>\n              {children}\n            </motion.div>\n          </SheetPrimitive.Content>\n        </SheetPortal>\n      )}\n    </AnimatePresence>\n  )\n})\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col space-y-ds-03 text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSheetHeader.displayName = 'SheetHeader'\n\nconst SheetFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn('text-ds-lg font-semibold text-surface-fg', className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn('text-ds-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n}\n"],"mappings":"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"}

package/dist/ui/sidebar.js

@@ -130,7 +130,7 @@ var M = _(({ side: e = "left", variant: t = "sidebar", collapsible: n = "offcanv
 			children: /* @__PURE__ */ w("aside", {
 				"aria-label": "Sidebar",
 				"data-sidebar": "sidebar",
-				className: "flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow-raised",
+				className: "flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow-raised",
 				children: a
 			})
 		})]
@@ -175,7 +175,7 @@ var P = _(({ className: e, ...t }, n) => {
 P.displayName = "SidebarRail";
 var F = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("main", {
 	ref: n,
-	className: r("relative flex min-h-svh flex-1 flex-col bg-surface-base", "peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-ds-xl md:peer-data-[variant=inset]:shadow-raised", e),
+	className: r("relative flex min-h-svh flex-1 flex-col bg-surface-base", "peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-overlay-lg md:peer-data-[variant=inset]:shadow-raised", e),
 	...t
 }));
 F.displayName = "SidebarInset";
@@ -226,14 +226,14 @@ V.displayName = "SidebarGroup";
 var H = _(({ className: t, asChild: n = !1, ...i }, a) => /* @__PURE__ */ w(n ? e : "div", {
 	ref: a,
 	"data-sidebar": "group-label",
-	className: r("flex h-ds-sm shrink-0 items-center rounded-ds-md px-ds-03 text-ds-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", t),
+	className: r("flex h-ds-sm shrink-0 items-center rounded-control px-ds-03 text-ds-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", t),
 	...i
 }));
 H.displayName = "SidebarGroupLabel";
 var U = _(({ className: t, asChild: n = !1, ...i }, a) => /* @__PURE__ */ w(n ? e : "button", {
 	ref: a,
 	"data-sidebar": "group-action",
-	className: r("hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "group-data-[collapsible=icon]:hidden", t),
+	className: r("hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "group-data-[collapsible=icon]:hidden", t),
 	...i
 }));
 U.displayName = "SidebarGroupAction";
@@ -258,7 +258,7 @@ var K = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("li", {
 	...t
 }));
 K.displayName = "SidebarMenuItem";
-var ce = n("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-ds-md p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", {
+var ce = n("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", {
 	variants: {
 		variant: {
 			default: "hover:bg-surface-raised-hover hover:text-surface-fg",
@@ -287,7 +287,7 @@ var ce = n("peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 da
 		...u,
 		children: n ? l : /* @__PURE__ */ T(C, { children: [i && /* @__PURE__ */ w(E.span, {
 			layoutId: "sidebar-active-indicator",
-			className: "absolute inset-0 rounded-ds-md bg-accent-2",
+			className: "absolute inset-0 rounded-control bg-accent-2",
 			transition: t.smooth
 		}), /* @__PURE__ */ w("span", {
 			className: "relative z-[1] flex w-full items-center gap-[inherit]",
@@ -308,14 +308,14 @@ q.displayName = "SidebarMenuButton";
 var J = _(({ className: t, asChild: n = !1, showOnHover: i = !1, ...a }, o) => /* @__PURE__ */ w(n ? e : "button", {
 	ref: o,
 	"data-sidebar": "menu-action",
-	className: r("hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", i && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0", t),
+	className: r("hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", "after:absolute after:-inset-2 after:md:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", i && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0", t),
 	...a
 }));
 J.displayName = "SidebarMenuAction";
 var Y = _(({ className: e, ...t }, n) => /* @__PURE__ */ w("div", {
 	ref: n,
 	"data-sidebar": "menu-badge",
-	className: r("pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-ds-md px-ds-02 text-ds-sm font-medium tabular-nums text-surface-fg", "peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", e),
+	className: r("pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-control px-ds-02 text-ds-sm font-medium tabular-nums text-surface-fg", "peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=md]/menu-button:top-ds-02b", "peer-data-[size=lg]/menu-button:top-ds-03", "group-data-[collapsible=icon]:hidden", e),
 	...t
 }));
 Y.displayName = "SidebarMenuBadge";
@@ -324,10 +324,10 @@ var X = _(({ className: e, showIcon: t = !1, ...n }, i) => {
 	return /* @__PURE__ */ T("div", {
 		ref: i,
 		"data-sidebar": "menu-skeleton",
-		className: r("flex h-ds-sm items-center gap-ds-03 rounded-ds-md px-ds-03", e),
+		className: r("flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03", e),
 		...n,
 		children: [t && /* @__PURE__ */ w(s, {
-			className: "h-ico-sm w-ico-sm rounded-ds-md",
+			className: "h-ico-sm w-ico-sm rounded-control",
 			"data-sidebar": "menu-skeleton-icon"
 		}), /* @__PURE__ */ w(s, {
 			className: "h-4 max-w-(--skeleton-width) flex-1",
@@ -354,7 +354,7 @@ var $ = _(({ asChild: t = !1, size: n = "md", isActive: i, className: a, ...o },
 	"data-sidebar": "menu-sub-button",
 	"data-size": n,
 	"data-active": i,
-	className: r("hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-ds-md px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg", "data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg", n === "sm" && "text-ds-sm", n === "md" && "text-ds-md", "group-data-[collapsible=icon]:hidden", a),
+	className: r("hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg", "data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg", n === "sm" && "text-ds-sm", n === "md" && "text-ds-md", "group-data-[collapsible=icon]:hidden", a),
 	...o
 }));
 $.displayName = "SidebarMenuSubButton";

package/dist/ui/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/ui/sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react'\nimport { cva,VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport {\n  ComponentProps,\n  createContext,\n  CSSProperties,\n  ElementRef,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { Input } from './input'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Separator } from './separator'\nimport { Sheet, SheetContent } from './sheet'\nimport { Skeleton } from './skeleton'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar:state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ntype SidebarContext = {\n  state: 'expanded' | 'collapsed'\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = useState(false)\n    const [_open, _setOpen] = useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === 'function' ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n        if (typeof document !== 'undefined') {\n          document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n        }\n      },\n      [setOpenProp, open],\n    )\n\n    const toggleSidebar = useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [toggleSidebar])\n    const state = open ? 'expanded' : 'collapsed'\n\n    const contextValue = useMemo<SidebarContext>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      ],\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH,\n                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as CSSProperties\n            }\n            className={cn(\n              'group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken',\n              className,\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\n// ── SidebarSwipeWrapper (swipe-to-close on mobile) ─────────────────\n\n// TODO: edge-swipe-to-open (swipe from left edge to open sidebar)\n\nfunction SidebarSwipeWrapper({\n  side,\n  onClose,\n  children,\n}: {\n  side: 'left' | 'right'\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  const isReduced = useReducedMotion()\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  // For a left sidebar, user swipes left (negative x) to close.\n  // For a right sidebar, user swipes right (positive x) to close.\n  const dragAxis = 'x' as const\n  const dragConstraints = side === 'left' ? { right: 0 } : { left: 0 }\n\n  return (\n    <motion.div\n      ref={panelRef}\n      className=\"h-full w-full\"\n      drag={!isReduced ? dragAxis : false}\n      dragConstraints={dragConstraints}\n      dragElastic={0.2}\n      onDragEnd={(\n        _: unknown,\n        info: { offset: { x: number }; velocity: { x: number } },\n      ) => {\n        const w = panelRef.current?.getBoundingClientRect().width ?? 280\n        if (side === 'left') {\n          // Swipe left to close: negative offset\n          if (info.offset.x < -(w * 0.3) || info.velocity.x < -500) {\n            onClose()\n          }\n        } else {\n          // Swipe right to close: positive offset\n          if (info.offset.x > w * 0.3 || info.velocity.x > 500) {\n            onClose()\n          }\n        }\n      }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\nconst Sidebar = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'sidebar' | 'floating' | 'inset'\n    collapsible?: 'offcanvas' | 'icon' | 'none'\n  }\n>(\n  (\n    {\n      side = 'left',\n      variant = 'sidebar',\n      collapsible = 'offcanvas',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n    if (collapsible === 'none') {\n      return (\n        <aside\n          aria-label=\"Sidebar\"\n          className={cn(\n            'flex h-full w-(--sidebar-width) flex-col bg-surface-raised text-surface-fg',\n            className,\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </aside>\n      )\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-(--sidebar-width) bg-surface-raised p-0 text-surface-fg [&>button]:hidden\"\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n              } as CSSProperties\n            }\n            side={side}\n            responsive={false}\n          >\n            <SidebarSwipeWrapper side={side} onClose={() => setOpenMobile(false)}>\n              <aside aria-label=\"Sidebar\" className=\"flex h-full w-full flex-col\">{children}</aside>\n            </SidebarSwipeWrapper>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-surface-fg md:block\"\n        data-state={state}\n        data-collapsible={state === 'collapsed' ? collapsible : ''}\n        data-variant={variant}\n        data-side={side}\n      >\n        <div\n          className={cn(\n            'relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit',\n            'group-data-[collapsible=offcanvas]:w-0',\n            'group-data-[side=right]:rotate-180',\n            variant === 'floating' || variant === 'inset'\n              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]'\n              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n          )}\n        />\n        <div\n          className={cn(\n            'fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex',\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            variant === 'floating' || variant === 'inset'\n              ? 'p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]'\n              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n            className,\n          )}\n          {...props}\n        >\n          <aside\n            aria-label=\"Sidebar\"\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow-raised\"\n          >\n            {children}\n          </aside>\n        </div>\n      </div>\n    )\n  },\n)\nSidebar.displayName = 'Sidebar'\n\nconst SidebarTrigger = forwardRef<\n  ElementRef<typeof Button>,\n  ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon-md\"\n      className={cn('h-ds-xs-plus w-ds-xs-plus', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <Icon icon={IconLayoutSidebarLeftCollapse} size=\"sm\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-raised-hover',\n          '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n          '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = forwardRef<HTMLDivElement, ComponentProps<'main'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <main\n        ref={ref}\n        className={cn(\n          'relative flex min-h-svh flex-1 flex-col bg-surface-base',\n          'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-ds-xl md:peer-data-[variant=inset]:shadow-raised',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = forwardRef<\n  ElementRef<typeof Input>,\n  ComponentProps<typeof Input>\n>(({ className, wrapperClassName, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      size=\"sm\"\n      wrapperClassName={cn(\n        'bg-surface-raised shadow-none focus-within:ring-2 focus-within:ring-accent-9',\n        wrapperClassName,\n      )}\n      className={cn('w-full', className)}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"header\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"footer\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = forwardRef<\n  ElementRef<typeof Separator>,\n  ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\n        'bg-surface-border mx-ds-03 w-auto',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"content\"\n        className={cn(\n          'flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn('relative flex w-full min-w-0 flex-col p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        'flex h-ds-sm shrink-0 items-center rounded-ds-md px-ds-03 text-ds-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        'hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn('w-full text-ds-md', className)}\n      {...props}\n    />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={cn('flex w-full min-w-0 flex-col gap-ds-02', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn('group/menu-item relative', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n  'peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-ds-md p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'hover:bg-surface-raised-hover hover:text-surface-fg',\n        outline:\n          'hover:bg-surface-raised-hover bg-surface-raised shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]',\n      },\n      size: {\n        md: 'h-ds-sm text-ds-md',\n        sm: 'h-ds-xs-plus text-ds-sm',\n        lg: 'h-ds-lg text-ds-md group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n)\n\nconst SidebarMenuButton = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = 'default',\n      size = 'md',\n      tooltip,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const { isMobile, state } = useSidebar()\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), !asChild && 'relative', className)}\n        {...props}\n      >\n        {asChild ? children : (\n          <>\n            {isActive && (\n              <motion.span\n                layoutId=\"sidebar-active-indicator\"\n                className=\"absolute inset-0 rounded-ds-md bg-accent-2\"\n                transition={springs.smooth}\n              />\n            )}\n            <span className=\"relative z-[1] flex w-full items-center gap-[inherit]\">{children}</span>\n          </>\n        )}\n      </Comp>\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === 'string') {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== 'collapsed' || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    )\n  },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-ds-md px-ds-02 text-ds-sm font-medium tabular-nums text-surface-fg',\n        'peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  const width = useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-ds-sm items-center gap-ds-03 rounded-ds-md px-ds-03', className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"h-ico-sm w-ico-sm rounded-ds-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-surface-border px-ds-03 py-ds-01',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ ...props }, ref) => <li ref={ref} {...props} />,\n)\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = forwardRef<\n  HTMLAnchorElement,\n  ComponentProps<'a'> & {\n    asChild?: boolean\n    size?: 'sm' | 'md'\n    isActive?: boolean\n  }\n>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-ds-md px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg',\n        'data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg',\n        size === 'sm' && 'text-ds-sm',\n        size === 'md' && 'text-ds-md',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport type SidebarProps = React.ComponentPropsWithoutRef<'div'> & { side?: 'left' | 'right'; variant?: 'sidebar' | 'floating' | 'inset'; collapsible?: 'offcanvas' | 'icon' | 'none' }\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/ui/sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react'\nimport { cva,VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport {\n  ComponentProps,\n  createContext,\n  CSSProperties,\n  ElementRef,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { Input } from './input'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Separator } from './separator'\nimport { Sheet, SheetContent } from './sheet'\nimport { Skeleton } from './skeleton'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from './tooltip'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar:state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ntype SidebarContext = {\n  state: 'expanded' | 'collapsed'\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = useContext(SidebarContext)\n  if (!context) {\n    throw new Error('useSidebar must be used within a SidebarProvider.')\n  }\n\n  return context\n}\n\nconst SidebarProvider = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = useState(false)\n    const [_open, _setOpen] = useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === 'function' ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n        if (typeof document !== 'undefined') {\n          document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n        }\n      },\n      [setOpenProp, open],\n    )\n\n    const toggleSidebar = useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [toggleSidebar])\n    const state = open ? 'expanded' : 'collapsed'\n\n    const contextValue = useMemo<SidebarContext>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      ],\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH,\n                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as CSSProperties\n            }\n            className={cn(\n              'group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken',\n              className,\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\n// ── SidebarSwipeWrapper (swipe-to-close on mobile) ─────────────────\n\n// TODO: edge-swipe-to-open (swipe from left edge to open sidebar)\n\nfunction SidebarSwipeWrapper({\n  side,\n  onClose,\n  children,\n}: {\n  side: 'left' | 'right'\n  onClose: () => void\n  children: React.ReactNode\n}) {\n  const isReduced = useReducedMotion()\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  // For a left sidebar, user swipes left (negative x) to close.\n  // For a right sidebar, user swipes right (positive x) to close.\n  const dragAxis = 'x' as const\n  const dragConstraints = side === 'left' ? { right: 0 } : { left: 0 }\n\n  return (\n    <motion.div\n      ref={panelRef}\n      className=\"h-full w-full\"\n      drag={!isReduced ? dragAxis : false}\n      dragConstraints={dragConstraints}\n      dragElastic={0.2}\n      onDragEnd={(\n        _: unknown,\n        info: { offset: { x: number }; velocity: { x: number } },\n      ) => {\n        const w = panelRef.current?.getBoundingClientRect().width ?? 280\n        if (side === 'left') {\n          // Swipe left to close: negative offset\n          if (info.offset.x < -(w * 0.3) || info.velocity.x < -500) {\n            onClose()\n          }\n        } else {\n          // Swipe right to close: positive offset\n          if (info.offset.x > w * 0.3 || info.velocity.x > 500) {\n            onClose()\n          }\n        }\n      }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\nconst Sidebar = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    side?: 'left' | 'right'\n    variant?: 'sidebar' | 'floating' | 'inset'\n    collapsible?: 'offcanvas' | 'icon' | 'none'\n  }\n>(\n  (\n    {\n      side = 'left',\n      variant = 'sidebar',\n      collapsible = 'offcanvas',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n    if (collapsible === 'none') {\n      return (\n        <aside\n          aria-label=\"Sidebar\"\n          className={cn(\n            'flex h-full w-(--sidebar-width) flex-col bg-surface-raised text-surface-fg',\n            className,\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </aside>\n      )\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-(--sidebar-width) bg-surface-raised p-0 text-surface-fg [&>button]:hidden\"\n            style={\n              {\n                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n              } as CSSProperties\n            }\n            side={side}\n            responsive={false}\n          >\n            <SidebarSwipeWrapper side={side} onClose={() => setOpenMobile(false)}>\n              <aside aria-label=\"Sidebar\" className=\"flex h-full w-full flex-col\">{children}</aside>\n            </SidebarSwipeWrapper>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-surface-fg md:block\"\n        data-state={state}\n        data-collapsible={state === 'collapsed' ? collapsible : ''}\n        data-variant={variant}\n        data-side={side}\n      >\n        <div\n          className={cn(\n            'relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit',\n            'group-data-[collapsible=offcanvas]:w-0',\n            'group-data-[side=right]:rotate-180',\n            variant === 'floating' || variant === 'inset'\n              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]'\n              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n          )}\n        />\n        <div\n          className={cn(\n            'fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex',\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            variant === 'floating' || variant === 'inset'\n              ? 'p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]'\n              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n            className,\n          )}\n          {...props}\n        >\n          <aside\n            aria-label=\"Sidebar\"\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow-raised\"\n          >\n            {children}\n          </aside>\n        </div>\n      </div>\n    )\n  },\n)\nSidebar.displayName = 'Sidebar'\n\nconst SidebarTrigger = forwardRef<\n  ElementRef<typeof Button>,\n  ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon-md\"\n      className={cn('h-ds-xs-plus w-ds-xs-plus', className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <Icon icon={IconLayoutSidebarLeftCollapse} size=\"sm\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar()\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          'hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n          'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-raised-hover',\n          '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n          '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = forwardRef<HTMLDivElement, ComponentProps<'main'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <main\n        ref={ref}\n        className={cn(\n          'relative flex min-h-svh flex-1 flex-col bg-surface-base',\n          'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-overlay-lg md:peer-data-[variant=inset]:shadow-raised',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = forwardRef<\n  ElementRef<typeof Input>,\n  ComponentProps<typeof Input>\n>(({ className, wrapperClassName, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      size=\"sm\"\n      wrapperClassName={cn(\n        'bg-surface-raised shadow-none focus-within:ring-2 focus-within:ring-accent-9',\n        wrapperClassName,\n      )}\n      className={cn('w-full', className)}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"header\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"footer\"\n        className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = forwardRef<\n  ElementRef<typeof Separator>,\n  ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\n        'bg-surface-border mx-ds-03 w-auto',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"content\"\n        className={cn(\n          'flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn('relative flex w-full min-w-0 flex-col p-ds-03', className)}\n        {...props}\n      />\n    )\n  },\n)\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        'flex h-ds-sm shrink-0 items-center rounded-control px-ds-03 text-ds-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        'hover:bg-surface-raised-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn('w-full text-ds-md', className)}\n      {...props}\n    />\n  ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={cn('flex w-full min-w-0 flex-col gap-ds-02', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn('group/menu-item relative', className)}\n      {...props}\n    />\n  ),\n)\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n  'peer/menu-button hover:bg-surface-raised-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-raised-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'hover:bg-surface-raised-hover hover:text-surface-fg',\n        outline:\n          'hover:bg-surface-raised-hover bg-surface-raised shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]',\n      },\n      size: {\n        md: 'h-ds-sm text-ds-md',\n        sm: 'h-ds-xs-plus text-ds-sm',\n        lg: 'h-ds-lg text-ds-md group-data-[collapsible=icon]:p-0!',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  },\n)\n\nconst SidebarMenuButton = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = 'default',\n      size = 'md',\n      tooltip,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const { isMobile, state } = useSidebar()\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), !asChild && 'relative', className)}\n        {...props}\n      >\n        {asChild ? children : (\n          <>\n            {isActive && (\n              <motion.span\n                layoutId=\"sidebar-active-indicator\"\n                className=\"absolute inset-0 rounded-control bg-accent-2\"\n                transition={springs.smooth}\n              />\n            )}\n            <span className=\"relative z-[1] flex w-full items-center gap-[inherit]\">{children}</span>\n          </>\n        )}\n      </Comp>\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === 'string') {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== 'collapsed' || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    )\n  },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = forwardRef<\n  HTMLButtonElement,\n  ComponentProps<'button'> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'hover:bg-surface-raised-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 after:md:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover &&\n          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-control px-ds-02 text-ds-sm font-medium tabular-nums text-surface-fg',\n        'peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=md]/menu-button:top-ds-02b',\n        'peer-data-[size=lg]/menu-button:top-ds-03',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = forwardRef<\n  HTMLDivElement,\n  ComponentProps<'div'> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  const width = useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn('flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03', className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"h-ico-sm w-ico-sm rounded-control\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            '--skeleton-width': width,\n          } as CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-surface-border px-ds-03 py-ds-01',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n  ({ ...props }, ref) => <li ref={ref} {...props} />,\n)\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = forwardRef<\n  HTMLAnchorElement,\n  ComponentProps<'a'> & {\n    asChild?: boolean\n    size?: 'sm' | 'md'\n    isActive?: boolean\n  }\n>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'a'\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'hover:bg-surface-raised-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg',\n        'data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg',\n        size === 'sm' && 'text-ds-sm',\n        size === 'md' && 'text-ds-md',\n        'group-data-[collapsible=icon]:hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport type SidebarProps = React.ComponentPropsWithoutRef<'div'> & { side?: 'left' | 'right'; variant?: 'sidebar' | 'floating' | 'inset'; collapsible?: 'offcanvas' | 'icon' | 'none' }\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n"],"mappings":"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"}

package/dist/ui/skeleton.js

@@ -6,9 +6,9 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 var a = e("bg-skeleton-base", {
 	variants: {
 		variant: {
-			rectangle: "rounded-ds-md",
-			circle: "rounded-ds-full aspect-square",
-			text: "rounded-ds-sm h-4 w-full"
+			rectangle: "rounded-control",
+			circle: "rounded-pill aspect-square",
+			text: "rounded-control-inner h-4 w-full"
 		},
 		animation: {
 			pulse: "animate-pulse motion-reduce:animate-none",
@@ -41,7 +41,7 @@ var s = {
 	xl: "h-16 w-16"
 }, l = n.forwardRef(({ className: e, size: n = "md", animation: i = "pulse", ...a }, o) => /* @__PURE__ */ r("div", {
 	ref: o,
-	className: t("bg-skeleton-base rounded-ds-full", c[n], s[i], e),
+	className: t("bg-skeleton-base rounded-pill", c[n], s[i], e),
 	...a
 }));
 l.displayName = "SkeletonAvatar";
@@ -58,7 +58,7 @@ var u = {
 		ref: l,
 		className: t("flex flex-col", d[a], e),
 		...c,
-		children: Array.from({ length: f }).map((e, n) => /* @__PURE__ */ r("div", { className: t("h-3.5 rounded-ds-sm bg-skeleton-base", s[o], n === f - 1 ? u[i] : "w-full") }, n))
+		children: Array.from({ length: f }).map((e, n) => /* @__PURE__ */ r("div", { className: t("h-3.5 rounded-control-inner bg-skeleton-base", s[o], n === f - 1 ? u[i] : "w-full") }, n))
 	});
 });
 f.displayName = "SkeletonText";
@@ -81,7 +81,7 @@ var p = {
 	let l = i === "icon";
 	return /* @__PURE__ */ r("div", {
 		ref: c,
-		className: t("bg-skeleton-base rounded-ds-md", p[n], l ? "aspect-square" : m[i][n], s[a], e),
+		className: t("bg-skeleton-base rounded-control", p[n], l ? "aspect-square" : m[i][n], s[a], e),
 		...o
 	});
 });
@@ -92,7 +92,7 @@ var g = {
 	lg: "h-ds-lg"
 }, _ = n.forwardRef(({ className: e, size: n = "md", animation: i = "pulse", ...a }, o) => /* @__PURE__ */ r("div", {
 	ref: o,
-	className: t("w-full bg-skeleton-base rounded-ds-md border border-skeleton-base/30", g[n], s[i], e),
+	className: t("w-full bg-skeleton-base rounded-control border border-skeleton-base/30", g[n], s[i], e),
 	...a
 }));
 _.displayName = "SkeletonInput";
@@ -121,7 +121,7 @@ var v = [
 		children: Array.from({ length: l }).map((e, n) => {
 			let i = v[n % v.length];
 			return /* @__PURE__ */ r("div", {
-				className: t("flex-1 bg-skeleton-base rounded-t-ds-sm", s[a]),
+				className: t("flex-1 bg-skeleton-base rounded-t-control-inner", s[a]),
 				style: { height: `${i}%` }
 			}, n);
 		})
@@ -130,7 +130,7 @@ var v = [
 y.displayName = "SkeletonChart";
 var b = n.forwardRef(({ className: e, width: n = "w-full", height: a = "h-40", animation: o = "pulse", ...c }, l) => /* @__PURE__ */ r("div", {
 	ref: l,
-	className: t("bg-skeleton-base rounded-ds-md relative flex items-center justify-center", n, a, s[o], e),
+	className: t("bg-skeleton-base rounded-control relative flex items-center justify-center", n, a, s[o], e),
 	...c,
 	children: /* @__PURE__ */ i("svg", {
 		xmlns: "http://www.w3.org/2000/svg",