@psnext/design-system 2.4.0 → 2.6.0

package/dist/primitives/Sheet/index.cjs

@@ -48,11 +48,43 @@ const sheetOverlayVariants = {
 	glass: "bg-glass-40-bg backdrop-blur-glass",
 	none: "bg-transparent"
 };
+const sheetSizeVariants = {
+	small: {
+		right: "w-2/3 sm:max-w-xs",
+		left: "w-2/3 sm:max-w-xs",
+		top: "h-[40vh]",
+		bottom: "h-[40vh]"
+	},
+	default: {
+		right: "w-3/4 sm:max-w-sm",
+		left: "w-3/4 sm:max-w-sm",
+		top: "h-auto",
+		bottom: "h-auto"
+	},
+	medium: {
+		right: "w-4/5 sm:max-w-md",
+		left: "w-4/5 sm:max-w-md",
+		top: "h-[60vh]",
+		bottom: "h-[60vh]"
+	},
+	large: {
+		right: "w-11/12 sm:max-w-lg",
+		left: "w-11/12 sm:max-w-lg",
+		top: "h-[80vh]",
+		bottom: "h-[80vh]"
+	},
+	extraLarge: {
+		right: "w-[95vw] sm:max-w-2xl",
+		left: "w-[95vw] sm:max-w-2xl",
+		top: "h-[95vh]",
+		bottom: "h-[95vh]"
+	}
+};
 /** The sliding panel surface (portaled, with its overlay). Holds the header, body, and footer. */
-function SheetContent({ className, children, side = "right", showCloseButton = true, overlay = "default", ...props }) {
+function SheetContent({ className, children, side = "right", showCloseButton = true, overlay = "default", size = "default", ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SheetPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetOverlay, { className: sheetOverlayVariants[overlay] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Content, {
 		"data-slot": "sheet-content",
-		className: require_cn.cn("bg-primary-bg data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-y-auto shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 rounded-l-8 sm:max-w-sm", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 rounded-r-8 sm:max-w-sm", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto rounded-b-8", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto rounded-t-8", className),
+		className: require_cn.cn("bg-primary-bg data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-y-auto shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full rounded-l-8", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full rounded-r-8", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 rounded-b-8", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 rounded-t-8", sheetSizeVariants[size][side], className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Close, {
 			className: "absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none",

package/dist/primitives/Sheet/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["SheetPrimitive","cn","Icon","XIcon"],"sources":["../../../src/primitives/Sheet/Sheet.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as SheetPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a slide-in panel (drawer). Wraps a `SheetTrigger` and `SheetContent`; controls open/closed state. */\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\n/** Element that opens the sheet when activated. Use `asChild` to wrap your own button. */\nfunction SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\n/** Element that closes the sheet when activated. Use `asChild` to wrap your own button. */\nfunction SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\n/** Portals the overlay and content out of the DOM tree to the document body. */\nfunction SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\n/** Full-screen scrim rendered behind the sheet content. */\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Predefined scrim styles for the sheet overlay. Pass via `overlay`. */\nconst sheetOverlayVariants = {\n  default: \"bg-overlay-bg\",\n  dark: \"bg-black/50\",\n  glass: \"bg-glass-40-bg backdrop-blur-glass\",\n  none: \"bg-transparent\",\n} as const;\n\n/** The sliding panel surface (portaled, with its overlay). Holds the header, body, and footer. */\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  overlay = \"default\",\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  /** Edge the sheet slides in from. */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /** Whether to render the built-in top-right close (X) button. */\n  showCloseButton?: boolean;\n  /** Scrim style behind the sheet (e.g. `glass` for drawer patterns). */\n  overlay?: keyof typeof sheetOverlayVariants;\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay className={sheetOverlayVariants[overlay]} />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          // Figma: bg/primary panel with shadow-lg only (no border binding);\n          // radius-8 on the inward edge — the outer edge sits flush.\n          \"bg-primary-bg data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-y-auto shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 rounded-l-8 sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 rounded-r-8 sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto rounded-b-8\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto rounded-t-8\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close className=\"absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none\">\n            <Icon as={XIcon} className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n}\n\n/** Top region of the sheet; typically holds the `SheetTitle` and `SheetDescription`. */\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"sheet-header\" className={cn(\"flex flex-col gap-2 p-6\", className)} {...props} />\n  );\n}\n\n/** Bottom region of the sheet, pinned to the base; typically holds action buttons. */\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        \"mt-auto flex flex-col-reverse gap-3 p-6 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Accessible title for the sheet, announced when it opens. */\nfunction SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      // Figma: heading 4 (Outfit Regular 20/24). Bound to raw neutral/900 in\n      // Figma — we use content/primary (flag #13).\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Accessible supporting text for the sheet, linked to the dialog for screen readers. */\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-txt text-sm leading-5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,MAAM,EAAE,GAAG,SAA2D;CAC7E,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;AAGA,SAAS,WAAW,EAAE,GAAG,SAA4D;CACnF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;;AAGA,SAAS,YAAY,EAAE,GAAG,SAA6D;CACrF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAe,SAAhB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,8IACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,MAAM,uBAAuB;CAC3B,SAAS;CACT,MAAM;CACN,OAAO;CACP,MAAM;AACR;;AAGA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,UAAU,WACV,GAAG,SAQF;CACD,OACE,iBAAA,GAAA,kBAAA,MAAC,aAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,cAAD,EAAc,WAAW,qBAAqB,SAAW,CAAA,GACzD,iBAAA,GAAA,kBAAA,MAACD,SAAAA,OAAe,SAAhB;EACE,aAAU;EACV,WAAWC,WAAAA,GAGT,8NACA,SAAS,WACP,uIACF,SAAS,UACP,oIACF,SAAS,SACP,+GACF,SAAS,YACP,wHACF,SACF;EACA,GAAI;YAhBN,CAkBG,UACA,mBACC,iBAAA,GAAA,kBAAA,MAACD,SAAAA,OAAe,OAAhB;GAAsB,WAAU;aAAhC,CACE,iBAAA,GAAA,kBAAA,KAACE,aAAAA,MAAD;IAAM,IAAIC,aAAAA;IAAO,WAAU;GAAU,CAAA,GACrC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAU;GAAW,CAAA,CACjB;IAEF;GACb,EAAA,CAAA;AAEjB;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAe,WAAWF,WAAAA,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,sEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,OAAe,OAAhB;EACE,aAAU;EAGV,WAAWC,WAAAA,GACT,6HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,OAAe,aAAhB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["SheetPrimitive","cn","Icon","XIcon"],"sources":["../../../src/primitives/Sheet/Sheet.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as SheetPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a slide-in panel (drawer). Wraps a `SheetTrigger` and `SheetContent`; controls open/closed state. */\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\n/** Element that opens the sheet when activated. Use `asChild` to wrap your own button. */\nfunction SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\n/** Element that closes the sheet when activated. Use `asChild` to wrap your own button. */\nfunction SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\n/** Portals the overlay and content out of the DOM tree to the document body. */\nfunction SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\n/** Full-screen scrim rendered behind the sheet content. */\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Predefined scrim styles for the sheet overlay. Pass via `overlay`. */\nconst sheetOverlayVariants = {\n  default: \"bg-overlay-bg\",\n  dark: \"bg-black/50\",\n  glass: \"bg-glass-40-bg backdrop-blur-glass\",\n  none: \"bg-transparent\",\n} as const;\n\nconst sheetSizeVariants = {\n  small: {\n    right: \"w-2/3 sm:max-w-xs\",\n    left: \"w-2/3 sm:max-w-xs\",\n    top: \"h-[40vh]\",\n    bottom: \"h-[40vh]\",\n  },\n  default: {\n    right: \"w-3/4 sm:max-w-sm\",\n    left: \"w-3/4 sm:max-w-sm\",\n    top: \"h-auto\",\n    bottom: \"h-auto\",\n  },\n  medium: {\n    right: \"w-4/5 sm:max-w-md\",\n    left: \"w-4/5 sm:max-w-md\",\n    top: \"h-[60vh]\",\n    bottom: \"h-[60vh]\",\n  },\n  large: {\n    right: \"w-11/12 sm:max-w-lg\",\n    left: \"w-11/12 sm:max-w-lg\",\n    top: \"h-[80vh]\",\n    bottom: \"h-[80vh]\",\n  },\n  extraLarge: {\n    right: \"w-[95vw] sm:max-w-2xl\",\n    left: \"w-[95vw] sm:max-w-2xl\",\n    top: \"h-[95vh]\",\n    bottom: \"h-[95vh]\",\n  },\n} as const;\n\n/** The sliding panel surface (portaled, with its overlay). Holds the header, body, and footer. */\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  overlay = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  /** Edge the sheet slides in from. */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /** Whether to render the built-in top-right close (X) button. */\n  showCloseButton?: boolean;\n  /** Scrim style behind the sheet (e.g. `glass` for drawer patterns). */\n  overlay?: keyof typeof sheetOverlayVariants;\n  /** Panel size. `default` matches the existing production sizing. */\n  size?: keyof typeof sheetSizeVariants;\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay className={sheetOverlayVariants[overlay]} />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          // Figma: bg/primary panel with shadow-lg only (no border binding);\n          // radius-8 on the inward edge — the outer edge sits flush.\n          \"bg-primary-bg data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-y-auto shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full rounded-l-8\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full rounded-r-8\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 rounded-b-8\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 rounded-t-8\",\n          sheetSizeVariants[size][side],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close className=\"absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none\">\n            <Icon as={XIcon} className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n}\n\n/** Top region of the sheet; typically holds the `SheetTitle` and `SheetDescription`. */\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"sheet-header\" className={cn(\"flex flex-col gap-2 p-6\", className)} {...props} />\n  );\n}\n\n/** Bottom region of the sheet, pinned to the base; typically holds action buttons. */\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        \"mt-auto flex flex-col-reverse gap-3 p-6 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Accessible title for the sheet, announced when it opens. */\nfunction SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      // Figma: heading 4 (Outfit Regular 20/24). Bound to raw neutral/900 in\n      // Figma — we use content/primary (flag #13).\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Accessible supporting text for the sheet, linked to the dialog for screen readers. */\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-txt text-sm leading-5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n};\n"],"mappings":"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"}

package/dist/primitives/Sheet/index.d.cts

@@ -1,2 +1,2 @@
-import { a as SheetFooter, c as SheetTrigger, i as SheetDescription, n as SheetClose, o as SheetHeader, r as SheetContent, s as SheetTitle, t as Sheet } from "../../index51.cjs";
+import { a as SheetFooter, c as SheetTrigger, i as SheetDescription, n as SheetClose, o as SheetHeader, r as SheetContent, s as SheetTitle, t as Sheet } from "../../index56.cjs";
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/primitives/Sheet/index.d.ts

@@ -1,2 +1,2 @@
-import { a as SheetFooter, c as SheetTrigger, i as SheetDescription, n as SheetClose, o as SheetHeader, r as SheetContent, s as SheetTitle, t as Sheet } from "../../index51.js";
+import { a as SheetFooter, c as SheetTrigger, i as SheetDescription, n as SheetClose, o as SheetHeader, r as SheetContent, s as SheetTitle, t as Sheet } from "../../index56.js";
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/primitives/Sheet/index.js

@@ -47,11 +47,43 @@ const sheetOverlayVariants = {
 	glass: "bg-glass-40-bg backdrop-blur-glass",
 	none: "bg-transparent"
 };
+const sheetSizeVariants = {
+	small: {
+		right: "w-2/3 sm:max-w-xs",
+		left: "w-2/3 sm:max-w-xs",
+		top: "h-[40vh]",
+		bottom: "h-[40vh]"
+	},
+	default: {
+		right: "w-3/4 sm:max-w-sm",
+		left: "w-3/4 sm:max-w-sm",
+		top: "h-auto",
+		bottom: "h-auto"
+	},
+	medium: {
+		right: "w-4/5 sm:max-w-md",
+		left: "w-4/5 sm:max-w-md",
+		top: "h-[60vh]",
+		bottom: "h-[60vh]"
+	},
+	large: {
+		right: "w-11/12 sm:max-w-lg",
+		left: "w-11/12 sm:max-w-lg",
+		top: "h-[80vh]",
+		bottom: "h-[80vh]"
+	},
+	extraLarge: {
+		right: "w-[95vw] sm:max-w-2xl",
+		left: "w-[95vw] sm:max-w-2xl",
+		top: "h-[95vh]",
+		bottom: "h-[95vh]"
+	}
+};
 /** The sliding panel surface (portaled, with its overlay). Holds the header, body, and footer. */
-function SheetContent({ className, children, side = "right", showCloseButton = true, overlay = "default", ...props }) {
+function SheetContent({ className, children, side = "right", showCloseButton = true, overlay = "default", size = "default", ...props }) {
 	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, { className: sheetOverlayVariants[overlay] }), /* @__PURE__ */ jsxs(Dialog.Content, {
 		"data-slot": "sheet-content",
-		className: cn("bg-primary-bg data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-y-auto shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 rounded-l-8 sm:max-w-sm", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 rounded-r-8 sm:max-w-sm", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto rounded-b-8", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto rounded-t-8", className),
+		className: cn("bg-primary-bg data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-y-auto shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full rounded-l-8", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full rounded-r-8", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 rounded-b-8", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 rounded-t-8", sheetSizeVariants[size][side], className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
 			className: "absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none",

package/dist/primitives/Sheet/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SheetPrimitive"],"sources":["../../../src/primitives/Sheet/Sheet.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as SheetPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a slide-in panel (drawer). Wraps a `SheetTrigger` and `SheetContent`; controls open/closed state. */\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\n/** Element that opens the sheet when activated. Use `asChild` to wrap your own button. */\nfunction SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\n/** Element that closes the sheet when activated. Use `asChild` to wrap your own button. */\nfunction SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\n/** Portals the overlay and content out of the DOM tree to the document body. */\nfunction SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\n/** Full-screen scrim rendered behind the sheet content. */\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Predefined scrim styles for the sheet overlay. Pass via `overlay`. */\nconst sheetOverlayVariants = {\n  default: \"bg-overlay-bg\",\n  dark: \"bg-black/50\",\n  glass: \"bg-glass-40-bg backdrop-blur-glass\",\n  none: \"bg-transparent\",\n} as const;\n\n/** The sliding panel surface (portaled, with its overlay). Holds the header, body, and footer. */\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  overlay = \"default\",\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  /** Edge the sheet slides in from. */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /** Whether to render the built-in top-right close (X) button. */\n  showCloseButton?: boolean;\n  /** Scrim style behind the sheet (e.g. `glass` for drawer patterns). */\n  overlay?: keyof typeof sheetOverlayVariants;\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay className={sheetOverlayVariants[overlay]} />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          // Figma: bg/primary panel with shadow-lg only (no border binding);\n          // radius-8 on the inward edge — the outer edge sits flush.\n          \"bg-primary-bg data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-y-auto shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 rounded-l-8 sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 rounded-r-8 sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto rounded-b-8\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto rounded-t-8\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close className=\"absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none\">\n            <Icon as={XIcon} className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n}\n\n/** Top region of the sheet; typically holds the `SheetTitle` and `SheetDescription`. */\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"sheet-header\" className={cn(\"flex flex-col gap-2 p-6\", className)} {...props} />\n  );\n}\n\n/** Bottom region of the sheet, pinned to the base; typically holds action buttons. */\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        \"mt-auto flex flex-col-reverse gap-3 p-6 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Accessible title for the sheet, announced when it opens. */\nfunction SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      // Figma: heading 4 (Outfit Regular 20/24). Bound to raw neutral/900 in\n      // Figma — we use content/primary (flag #13).\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Accessible supporting text for the sheet, linked to the dialog for screen readers. */\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-txt text-sm leading-5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n};\n"],"mappings":";;;;;;;AAQA,SAAS,MAAM,EAAE,GAAG,SAA2D;CAC7E,OAAO,oBAACA,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;AAGA,SAAS,WAAW,EAAE,GAAG,SAA4D;CACnF,OAAO,oBAACA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;;AAGA,SAAS,YAAY,EAAE,GAAG,SAA6D;CACrF,OAAO,oBAACA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,8IACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,MAAM,uBAAuB;CAC3B,SAAS;CACT,MAAM;CACN,OAAO;CACP,MAAM;AACR;;AAGA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,UAAU,WACV,GAAG,SAQF;CACD,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAc,WAAW,qBAAqB,SAAW,CAAA,GACzD,qBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GAGT,8NACA,SAAS,WACP,uIACF,SAAS,UACP,oIACF,SAAS,SACP,+GACF,SAAS,YACP,wHACF,SACF;EACA,GAAI;YAhBN,CAkBG,UACA,mBACC,qBAACA,OAAe,OAAhB;GAAsB,WAAU;aAAhC,CACE,oBAAC,MAAD;IAAM,IAAI;IAAO,WAAU;GAAU,CAAA,GACrC,oBAAC,QAAD;IAAM,WAAU;cAAU;GAAW,CAAA,CACjB;IAEF;GACb,EAAA,CAAA;AAEjB;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EAGV,WAAW,GACT,6HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":["SheetPrimitive"],"sources":["../../../src/primitives/Sheet/Sheet.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as SheetPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a slide-in panel (drawer). Wraps a `SheetTrigger` and `SheetContent`; controls open/closed state. */\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\n/** Element that opens the sheet when activated. Use `asChild` to wrap your own button. */\nfunction SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\n/** Element that closes the sheet when activated. Use `asChild` to wrap your own button. */\nfunction SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\n/** Portals the overlay and content out of the DOM tree to the document body. */\nfunction SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\n/** Full-screen scrim rendered behind the sheet content. */\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Predefined scrim styles for the sheet overlay. Pass via `overlay`. */\nconst sheetOverlayVariants = {\n  default: \"bg-overlay-bg\",\n  dark: \"bg-black/50\",\n  glass: \"bg-glass-40-bg backdrop-blur-glass\",\n  none: \"bg-transparent\",\n} as const;\n\nconst sheetSizeVariants = {\n  small: {\n    right: \"w-2/3 sm:max-w-xs\",\n    left: \"w-2/3 sm:max-w-xs\",\n    top: \"h-[40vh]\",\n    bottom: \"h-[40vh]\",\n  },\n  default: {\n    right: \"w-3/4 sm:max-w-sm\",\n    left: \"w-3/4 sm:max-w-sm\",\n    top: \"h-auto\",\n    bottom: \"h-auto\",\n  },\n  medium: {\n    right: \"w-4/5 sm:max-w-md\",\n    left: \"w-4/5 sm:max-w-md\",\n    top: \"h-[60vh]\",\n    bottom: \"h-[60vh]\",\n  },\n  large: {\n    right: \"w-11/12 sm:max-w-lg\",\n    left: \"w-11/12 sm:max-w-lg\",\n    top: \"h-[80vh]\",\n    bottom: \"h-[80vh]\",\n  },\n  extraLarge: {\n    right: \"w-[95vw] sm:max-w-2xl\",\n    left: \"w-[95vw] sm:max-w-2xl\",\n    top: \"h-[95vh]\",\n    bottom: \"h-[95vh]\",\n  },\n} as const;\n\n/** The sliding panel surface (portaled, with its overlay). Holds the header, body, and footer. */\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  overlay = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  /** Edge the sheet slides in from. */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /** Whether to render the built-in top-right close (X) button. */\n  showCloseButton?: boolean;\n  /** Scrim style behind the sheet (e.g. `glass` for drawer patterns). */\n  overlay?: keyof typeof sheetOverlayVariants;\n  /** Panel size. `default` matches the existing production sizing. */\n  size?: keyof typeof sheetSizeVariants;\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay className={sheetOverlayVariants[overlay]} />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          // Figma: bg/primary panel with shadow-lg only (no border binding);\n          // radius-8 on the inward edge — the outer edge sits flush.\n          \"bg-primary-bg data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 overflow-y-auto shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full rounded-l-8\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full rounded-r-8\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 rounded-b-8\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 rounded-t-8\",\n          sheetSizeVariants[size][side],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close className=\"absolute top-4 right-4 rounded-2 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-focus focus-visible:ring-3 focus:outline-hidden disabled:pointer-events-none\">\n            <Icon as={XIcon} className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n}\n\n/** Top region of the sheet; typically holds the `SheetTitle` and `SheetDescription`. */\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"sheet-header\" className={cn(\"flex flex-col gap-2 p-6\", className)} {...props} />\n  );\n}\n\n/** Bottom region of the sheet, pinned to the base; typically holds action buttons. */\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        \"mt-auto flex flex-col-reverse gap-3 p-6 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Accessible title for the sheet, announced when it opens. */\nfunction SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      // Figma: heading 4 (Outfit Regular 20/24). Bound to raw neutral/900 in\n      // Figma — we use content/primary (flag #13).\n      className={cn(\n        \"font-heading text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal text-primary-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Accessible supporting text for the sheet, linked to the dialog for screen readers. */\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-txt text-sm leading-5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n};\n"],"mappings":";;;;;;;AAQA,SAAS,MAAM,EAAE,GAAG,SAA2D;CAC7E,OAAO,oBAACA,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;AAGA,SAAS,WAAW,EAAE,GAAG,SAA4D;CACnF,OAAO,oBAACA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;;AAGA,SAAS,YAAY,EAAE,GAAG,SAA6D;CACrF,OAAO,oBAACA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,8IACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,MAAM,uBAAuB;CAC3B,SAAS;CACT,MAAM;CACN,OAAO;CACP,MAAM;AACR;AAEA,MAAM,oBAAoB;CACxB,OAAO;EACL,OAAO;EACP,MAAM;EACN,KAAK;EACL,QAAQ;CACV;CACA,SAAS;EACP,OAAO;EACP,MAAM;EACN,KAAK;EACL,QAAQ;CACV;CACA,QAAQ;EACN,OAAO;EACP,MAAM;EACN,KAAK;EACL,QAAQ;CACV;CACA,OAAO;EACL,OAAO;EACP,MAAM;EACN,KAAK;EACL,QAAQ;CACV;CACA,YAAY;EACV,OAAO;EACP,MAAM;EACN,KAAK;EACL,QAAQ;CACV;AACF;;AAGA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,UAAU,WACV,OAAO,WACP,GAAG,SAUF;CACD,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAc,WAAW,qBAAqB,SAAW,CAAA,GACzD,qBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GAGT,8NACA,SAAS,WACP,qHACF,SAAS,UACP,kHACF,SAAS,SACP,wGACF,SAAS,YACP,iHACF,kBAAkB,MAAM,OACxB,SACF;EACA,GAAI;YAjBN,CAmBG,UACA,mBACC,qBAACA,OAAe,OAAhB;GAAsB,WAAU;aAAhC,CACE,oBAAC,MAAD;IAAM,IAAI;IAAO,WAAU;GAAU,CAAA,GACrC,oBAAC,QAAD;IAAM,WAAU;cAAU;GAAW,CAAA,CACjB;IAEF;GACb,EAAA,CAAA;AAEjB;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnG;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EAGV,WAAW,GACT,6HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Sidebar/index.d.cts

@@ -1,2 +1,2 @@
-import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, a as SidebarGroupAction, b as SidebarProvider, c as SidebarHeader, d as SidebarMenu, f as SidebarMenuAction, g as SidebarMenuSkeleton, h as SidebarMenuItem, i as SidebarGroup, l as SidebarInput, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, p as SidebarMenuBadge, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, u as SidebarInset, v as SidebarMenuSubButton, w as useSidebar, x as SidebarRail, y as SidebarMenuSubItem } from "../../index53.cjs";
+import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, a as SidebarGroupAction, b as SidebarProvider, c as SidebarHeader, d as SidebarMenu, f as SidebarMenuAction, g as SidebarMenuSkeleton, h as SidebarMenuItem, i as SidebarGroup, l as SidebarInput, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, p as SidebarMenuBadge, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, u as SidebarInset, v as SidebarMenuSubButton, w as useSidebar, x as SidebarRail, y as SidebarMenuSubItem } from "../../index58.cjs";
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };

package/dist/primitives/Sidebar/index.d.ts

@@ -1,2 +1,2 @@
-import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, a as SidebarGroupAction, b as SidebarProvider, c as SidebarHeader, d as SidebarMenu, f as SidebarMenuAction, g as SidebarMenuSkeleton, h as SidebarMenuItem, i as SidebarGroup, l as SidebarInput, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, p as SidebarMenuBadge, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, u as SidebarInset, v as SidebarMenuSubButton, w as useSidebar, x as SidebarRail, y as SidebarMenuSubItem } from "../../index53.js";
+import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, a as SidebarGroupAction, b as SidebarProvider, c as SidebarHeader, d as SidebarMenu, f as SidebarMenuAction, g as SidebarMenuSkeleton, h as SidebarMenuItem, i as SidebarGroup, l as SidebarInput, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, p as SidebarMenuBadge, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, u as SidebarInset, v as SidebarMenuSubButton, w as useSidebar, x as SidebarRail, y as SidebarMenuSubItem } from "../../index58.js";
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };

package/dist/primitives/Skeleton/index.d.cts

@@ -1,2 +1,2 @@
-import { i as SkeletonObject, n as SkeletonAvatar, r as SkeletonLine, t as Skeleton } from "../../index54.cjs";
+import { i as SkeletonObject, n as SkeletonAvatar, r as SkeletonLine, t as Skeleton } from "../../index59.cjs";
 export { Skeleton, SkeletonAvatar, SkeletonLine, SkeletonObject };

package/dist/primitives/Skeleton/index.d.ts

@@ -1,2 +1,2 @@
-import { i as SkeletonObject, n as SkeletonAvatar, r as SkeletonLine, t as Skeleton } from "../../index54.js";
+import { i as SkeletonObject, n as SkeletonAvatar, r as SkeletonLine, t as Skeleton } from "../../index59.js";
 export { Skeleton, SkeletonAvatar, SkeletonLine, SkeletonObject };

package/dist/primitives/Slider/index.d.cts

@@ -1,2 +1,2 @@
-import { t as Slider } from "../../index55.cjs";
+import { t as Slider } from "../../index60.cjs";
 export { Slider };

package/dist/primitives/Slider/index.d.ts

@@ -1,2 +1,2 @@
-import { t as Slider } from "../../index55.js";
+import { t as Slider } from "../../index60.js";
 export { Slider };

package/dist/primitives/Sonner/index.d.cts

@@ -1,2 +1,2 @@
-import { t as Toaster } from "../../index56.cjs";
+import { t as Toaster } from "../../index61.cjs";
 export { Toaster };

package/dist/primitives/Sonner/index.d.ts

@@ -1,2 +1,2 @@
-import { t as Toaster } from "../../index56.js";
+import { t as Toaster } from "../../index61.js";
 export { Toaster };

package/dist/primitives/Spinner/index.d.cts

@@ -1,2 +1,2 @@
-import { t as Spinner } from "../../index57.cjs";
+import { t as Spinner } from "../../index62.cjs";
 export { Spinner };

package/dist/primitives/Spinner/index.d.ts

@@ -1,2 +1,2 @@
-import { t as Spinner } from "../../index57.js";
+import { t as Spinner } from "../../index62.js";
 export { Spinner };

package/dist/primitives/Switch/index.d.cts

@@ -1,2 +1,2 @@
-import { n as Switch, r as SwitchGroup, t as RichSwitchGroup } from "../../index58.cjs";
+import { n as Switch, r as SwitchGroup, t as RichSwitchGroup } from "../../index63.cjs";
 export { RichSwitchGroup, Switch, SwitchGroup };

package/dist/primitives/Switch/index.d.ts

@@ -1,2 +1,2 @@
-import { n as Switch, r as SwitchGroup, t as RichSwitchGroup } from "../../index58.js";
+import { n as Switch, r as SwitchGroup, t as RichSwitchGroup } from "../../index63.js";
 export { RichSwitchGroup, Switch, SwitchGroup };

package/dist/primitives/Table/index.d.cts

@@ -1,2 +1,2 @@
-import { a as TableFooter, c as TableRow, i as TableCell, n as TableBody, o as TableHead, r as TableCaption, s as TableHeader, t as Table } from "../../index59.cjs";
+import { a as TableFooter, c as TableRow, i as TableCell, n as TableBody, o as TableHead, r as TableCaption, s as TableHeader, t as Table } from "../../index64.cjs";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/primitives/Table/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TableFooter, c as TableRow, i as TableCell, n as TableBody, o as TableHead, r as TableCaption, s as TableHeader, t as Table } from "../../index59.js";
+import { a as TableFooter, c as TableRow, i as TableCell, n as TableBody, o as TableHead, r as TableCaption, s as TableHeader, t as Table } from "../../index64.js";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/primitives/Tabs/index.cjs

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../../chunk.cjs");
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
 let class_variance_authority = require("class-variance-authority");
 let react = require("react");
 react = require_chunk.__toESM(react);
@@ -45,11 +46,11 @@ const tabsListVariants = (0, class_variance_authority.cva)("relative inline-flex
 			line: "gap-1 bg-transparent",
 			pill: "justify-center rounded-10 bg-muted-bg p-0.75",
 			segmented: "justify-center rounded-12 bg-muted-bg p-1",
-			fancy: "w-full items-stretch gap-1 bg-transparent"
+			fancy: "items-stretch gap-1 bg-transparent"
 		},
 		orientation: {
-			horizontal: "",
-			vertical: "h-fit flex-col"
+			horizontal: "w-max min-w-full",
+			vertical: "h-fit w-full flex-col"
 		},
 		size: {
 			sm: "",
@@ -88,7 +89,79 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 	const { variant, size, orientation } = react.useContext(TabsContext);
 	const isSegmented = variant === "segmented";
 	const listRef = react.useRef(null);
+	const scrollContainerRef = react.useRef(null);
 	const [indicator, setIndicator] = react.useState(null);
+	const [scrollAffordance, setScrollAffordance] = react.useState({
+		hasOverflow: false,
+		canScrollLeft: false,
+		canScrollRight: false
+	});
+	const revealTrigger = react.useCallback((trigger) => {
+		if (!trigger || orientation !== "horizontal") return;
+		trigger.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [orientation]);
+	react.useEffect(() => {
+		if (orientation !== "horizontal") return;
+		const list = listRef.current;
+		if (!list) return;
+		const revealActive = () => {
+			revealTrigger(list.querySelector("[data-slot=\"tabs-trigger\"][data-state=\"active\"]"));
+		};
+		const onFocusIn = (event) => {
+			const target = event.target;
+			if (!(target instanceof HTMLElement)) return;
+			if (!target.matches("[data-slot=\"tabs-trigger\"]")) return;
+			revealTrigger(target);
+		};
+		revealActive();
+		list.addEventListener("focusin", onFocusIn);
+		const mutation = new MutationObserver(revealActive);
+		mutation.observe(list, {
+			attributes: true,
+			attributeFilter: ["data-state"],
+			subtree: true
+		});
+		return () => {
+			list.removeEventListener("focusin", onFocusIn);
+			mutation.disconnect();
+		};
+	}, [orientation, revealTrigger]);
+	react.useLayoutEffect(() => {
+		if (orientation !== "horizontal") {
+			setScrollAffordance({
+				hasOverflow: false,
+				canScrollLeft: false,
+				canScrollRight: false
+			});
+			return;
+		}
+		const container = scrollContainerRef.current;
+		const list = listRef.current;
+		if (!container || !list) return;
+		const update = () => {
+			const hasOverflow = container.scrollWidth - container.clientWidth > 1;
+			const containerRect = container.getBoundingClientRect();
+			const listRect = list.getBoundingClientRect();
+			setScrollAffordance({
+				hasOverflow,
+				canScrollLeft: hasOverflow && listRect.left < containerRect.left - 1,
+				canScrollRight: hasOverflow && listRect.right > containerRect.right + 1
+			});
+		};
+		update();
+		const resize = new ResizeObserver(update);
+		resize.observe(container);
+		resize.observe(list);
+		container.addEventListener("scroll", update, { passive: true });
+		document.fonts?.ready.then(update);
+		return () => {
+			resize.disconnect();
+			container.removeEventListener("scroll", update);
+		};
+	}, [orientation]);
 	react.useEffect(() => {
 		if (!isSegmented) return;
 		const list = listRef.current;
@@ -120,17 +193,39 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 			resize.disconnect();
 		};
 	}, [isSegmented]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Tabs.List, {
-		ref: listRef,
-		"data-slot": "tabs-list",
-		className: require_cn.cn(tabsListVariants({
+	const scrollLeft = react.useCallback(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const scrollAmount = container.clientWidth * .8;
+		container.scrollBy({
+			left: -scrollAmount,
+			behavior: "smooth"
+		});
+	}, []);
+	const scrollRight = react.useCallback(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const scrollAmount = container.clientWidth * .8;
+		container.scrollBy({
+			left: scrollAmount,
+			behavior: "smooth"
+		});
+	}, []);
+	const getListClassName = () => {
+		if (orientation === "horizontal") return require_cn.cn("relative inline-flex h-full items-center text-muted-txt", variant === "line" && "gap-1 bg-transparent", variant === "pill" && "gap-0.5", variant === "segmented" && "gap-0.5", variant === "fancy" && "items-stretch gap-1 bg-transparent", "w-max min-w-full", className);
+		return require_cn.cn(tabsListVariants({
 			variant,
 			size,
 			orientation
-		}), className),
+		}), className);
+	};
+	const list = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Tabs.List, {
+		ref: listRef,
+		"data-slot": "tabs-list",
+		className: getListClassName(),
 		...props,
 		children: [
-			tabPrefix,
+			orientation !== "horizontal" && tabPrefix,
 			isSegmented && indicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"data-slot": "tabs-indicator",
 				"aria-hidden": true,
@@ -148,7 +243,55 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 				}
 			}),
 			children,
-			tabSuffix
+			orientation !== "horizontal" && tabSuffix
+		]
+	});
+	if (orientation === "vertical") return list;
+	const { hasOverflow } = scrollAffordance;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_cn.cn("flex w-full items-stretch", variant === "pill" && "rounded-10 bg-muted-bg p-0.75", variant === "segmented" && "rounded-12 bg-muted-bg p-1", variant === "pill" && size === "sm" && "h-6 p-0.5", variant === "pill" && size === "md" && "h-8.75", variant === "pill" && size === "lg" && "h-10 p-1", variant === "segmented" && size === "sm" && "h-6 p-0.5", variant === "segmented" && size === "md" && "h-8.75", variant === "segmented" && size === "lg" && "h-10 p-1"),
+		"data-slot": "tabs-wrapper",
+		children: [
+			tabPrefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-slot": "tabs-prefix",
+				className: "flex shrink-0 items-center px-1",
+				children: tabPrefix
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: scrollLeft,
+				disabled: !scrollAffordance.canScrollLeft,
+				"aria-label": "Scroll tabs left",
+				tabIndex: hasOverflow ? 0 : -1,
+				className: require_cn.cn("flex shrink-0 items-center justify-center overflow-hidden transition-all", hasOverflow ? "w-8" : "w-0", hasOverflow && (variant === "pill" || variant === "segmented") && "mr-0.5 border-r border-border/30", "disabled:cursor-not-allowed disabled:opacity-40", "enabled:hover:opacity-70 enabled:active:scale-95", "focus:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					icon: "chevron-left",
+					className: "size-4 shrink-0 text-muted-txt"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: scrollContainerRef,
+				"data-slot": "tabs-scroll-container",
+				className: require_cn.cn("min-w-0 flex-1 touch-pan-x overflow-x-auto overscroll-x-contain [-webkit-overflow-scrolling:touch]", "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", variant === "line" && "pb-1.5"),
+				children: list
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: scrollRight,
+				disabled: !scrollAffordance.canScrollRight,
+				"aria-label": "Scroll tabs right",
+				tabIndex: hasOverflow ? 0 : -1,
+				className: require_cn.cn("flex shrink-0 items-center justify-center overflow-hidden transition-all", hasOverflow ? "w-8" : "w-0", hasOverflow && (variant === "pill" || variant === "segmented") && "ml-0.5 border-l border-border/30", "disabled:cursor-not-allowed disabled:opacity-40", "enabled:hover:opacity-70 enabled:active:scale-95", "focus:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					icon: "chevron-right",
+					className: "size-4 shrink-0 text-muted-txt"
+				})
+			}),
+			tabSuffix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-slot": "tabs-suffix",
+				className: "flex shrink-0 items-center px-1",
+				children: tabSuffix
+			})
 		]
 	});
 }

package/dist/primitives/Tabs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","TabsPrimitive","cn"],"sources":["../../../src/primitives/Tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Tabs — built on Radix Tabs (content panels + roving-focus keyboard nav + a11y).\n// One component, four visual `variant`s, each supporting horizontal/vertical\n// `orientation`:\n//  - \"line\": underline under the active tab.\n//  - \"pill\" (default): a muted track; the active tab is an elevated pill.\n//  - \"segmented\": a muted track with a single sliding indicator that animates\n//    between tabs.\n//  - \"fancy\": translucent glass card tabs; the active tab merges into the glass\n//    content panel below (login-style). `size` controls the fancy vertical padding.\n// `variant`/`size`/`orientation` are set on the root and shared via context.\n\ntype TabsVariant = \"line\" | \"pill\" | \"segmented\" | \"fancy\";\ntype TabsSize = \"sm\" | \"md\" | \"lg\";\ntype TabsOrientation = \"horizontal\" | \"vertical\";\n\nconst TabsContext = React.createContext<{\n  variant: TabsVariant;\n  size: TabsSize;\n  orientation: TabsOrientation;\n}>({ variant: \"pill\", size: \"md\", orientation: \"horizontal\" });\n\n/**\n * Tabbed interface root: holds the active value and shares `variant`/`size`/\n * `orientation` with its `TabsList`/`TabsTrigger`/`TabsContent` via context.\n */\nfunction Tabs({\n  className,\n  variant = \"pill\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** Visual style of the tabs: underline, pill track, sliding segmented, or glass cards. */\n  variant?: TabsVariant;\n  /** Control density — drives padding and text size of the triggers. */\n  size?: TabsSize;\n}) {\n  const resolvedOrientation: TabsOrientation =\n    orientation === \"vertical\" ? \"vertical\" : \"horizontal\";\n  const ctx = React.useMemo(\n    () => ({ variant, size, orientation: resolvedOrientation }),\n    [variant, size, resolvedOrientation],\n  );\n  return (\n    <TabsContext.Provider value={ctx}>\n      <TabsPrimitive.Root\n        data-slot=\"tabs\"\n        data-variant={variant}\n        data-orientation={resolvedOrientation}\n        orientation={resolvedOrientation}\n        className={cn(\n          \"group/tabs flex data-[orientation=horizontal]:flex-col\",\n          variant === \"fancy\" ? \"gap-0\" : \"gap-2\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsContext.Provider>\n  );\n}\n\nconst tabsListVariants = cva(\"relative inline-flex items-center text-muted-txt\", {\n  variants: {\n    variant: {\n      line: \"gap-1 bg-transparent\",\n      pill: \"justify-center rounded-10 bg-muted-bg p-0.75\",\n      segmented: \"justify-center rounded-12 bg-muted-bg p-1\",\n      fancy: \"w-full items-stretch gap-1 bg-transparent\",\n    },\n    orientation: {\n      horizontal: \"\",\n      vertical: \"h-fit flex-col\",\n    },\n    size: { sm: \"\", md: \"\", lg: \"\" },\n  },\n  compoundVariants: [\n    // Track height for the horizontal pill/segmented variants.\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"sm\", class: \"h-6 p-0.5\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"md\", class: \"h-8.75\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"lg\", class: \"h-10 p-1\" },\n  ],\n  defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n});\n\n/** Row (or column) of tab triggers; renders the sliding indicator for the `segmented` variant. */\nfunction TabsList({\n  className,\n  children,\n  tabPrefix,\n  tabSuffix,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & {\n  tabPrefix?: React.ReactNode;\n  tabSuffix?: React.ReactNode;\n}) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  const isSegmented = variant === \"segmented\";\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [indicator, setIndicator] = React.useState<{\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n  } | null>(null);\n\n  React.useEffect(() => {\n    if (!isSegmented) return;\n    const list = listRef.current;\n    if (!list) return;\n    const update = () => {\n      const active = list.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n      );\n      if (!active) {\n        setIndicator(null);\n        return;\n      }\n      setIndicator({\n        left: active.offsetLeft,\n        top: active.offsetTop,\n        width: active.offsetWidth,\n        height: active.offsetHeight,\n      });\n    };\n    update();\n    const mutation = new MutationObserver(update);\n    mutation.observe(list, { attributes: true, attributeFilter: [\"data-state\"], subtree: true });\n    const resize = new ResizeObserver(update);\n    resize.observe(list);\n    return () => {\n      mutation.disconnect();\n      resize.disconnect();\n    };\n  }, [isSegmented]);\n\n  return (\n    <TabsPrimitive.List\n      ref={listRef}\n      data-slot=\"tabs-list\"\n      className={cn(tabsListVariants({ variant, size, orientation }), className)}\n      {...props}\n    >\n      {tabPrefix}\n      {isSegmented && indicator && (\n        <span\n          data-slot=\"tabs-indicator\"\n          aria-hidden\n          className=\"absolute z-0 rounded-8 bg-primary-bg shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none\"\n          style={\n            orientation === \"vertical\"\n              ? { top: indicator.top, height: indicator.height, left: 4, right: 4 }\n              : { left: indicator.left, width: indicator.width, top: 4, bottom: 4 }\n          }\n        />\n      )}\n      {children}\n      {tabSuffix}\n    </TabsPrimitive.List>\n  );\n}\n\nconst tabsTriggerVariants = cva(\n  \"relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap text-primary-txt outline-none transition-all focus-visible:ring-3 focus-visible:ring-focus disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary-txt [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        line: \"h-[calc(100%-1px)] flex-1 rounded-none\",\n        pill: \"h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-primary-bg data-[state=active]:shadow-sm\",\n        segmented: \"z-[1] h-[calc(100%-1px)] flex-1 rounded-8\",\n        // Fancy (Figma Components file, node 1:6831): default = glass-60→glass-20\n        // vertical gradient card; hover = solid glass-none; selected = 4px taller,\n        // flat-bottomed, glass-none→glass-40 (72.6% stop), semibold, with concave\n        // 16px corner curves where it meets the panel.\n        fancy: cn(\n          \"mb-1 flex-1 justify-between rounded-16 font-normal backdrop-blur-glass\",\n          \"bg-gradient-to-b from-glass-60-bg from-[3.4%] to-glass-20-bg\",\n          \"data-[state=inactive]:hover:bg-none data-[state=inactive]:hover:bg-glass-none-bg\",\n          \"data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:from-glass-none-bg data-[state=active]:to-glass-40-bg data-[state=active]:to-[72.6%] data-[state=active]:font-semibold\",\n          \"data-[state=active]:before:absolute data-[state=active]:before:-left-4 data-[state=active]:before:bottom-0 data-[state=active]:before:size-4 data-[state=active]:before:bg-[radial-gradient(circle_at_top_left,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          \"data-[state=active]:after:absolute data-[state=active]:after:-right-4 data-[state=active]:after:bottom-0 data-[state=active]:after:size-4 data-[state=active]:after:bg-[radial-gradient(circle_at_top_right,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          // The curves flow into NEIGHBOURING tabs only — never past the group edge.\n          \"first:before:hidden last:after:hidden\",\n        ),\n      },\n      orientation: { horizontal: \"\", vertical: \"w-full justify-start\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    compoundVariants: [\n      // Padding + text size for the track variants.\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"sm\",\n        class: \"px-2 py-0.5 text-xs leading-4\",\n      },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"md\", class: \"px-2 py-1 text-sm leading-5\" },\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"lg\",\n        class: \"px-2 py-1.5 text-sm leading-5\",\n      },\n      // Fancy footprint scales with size; the active tab adds bottom padding so it\n      // merges into the panel while inactive tabs stay shorter (gap above content).\n      { variant: \"fancy\", size: \"sm\", class: \"px-4 py-2 text-sm\" },\n      { variant: \"fancy\", size: \"md\", class: \"px-6 py-3 text-sm\" },\n      { variant: \"fancy\", size: \"lg\", class: \"px-6 py-4 text-base\" },\n      // Underline position for the line variant (per orientation).\n      {\n        variant: \"line\",\n        orientation: \"horizontal\",\n        class:\n          \"after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n      {\n        variant: \"line\",\n        orientation: \"vertical\",\n        class:\n          \"after:absolute after:inset-y-0 after:right-[-5px] after:w-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n    ],\n    defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n  },\n);\n\n/** Clickable tab button; its `value` selects the matching `TabsContent` panel. */\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(tabsTriggerVariants({ variant, size, orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Panel shown when its `value` matches the active tab; styled as a glass panel for the `fancy` variant. */\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  const { variant } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"flex-1 outline-none\",\n        // Fancy: a glass panel the active tab merges into (flat top, matching tint).\n        variant === \"fancy\" &&\n          \"flex-none rounded-16 rounded-t-none bg-glass-40-bg p-5 backdrop-blur-glass\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Trailing count badge for a tab trigger; goes dark on the `fancy` variant to match its cards. */\nfunction TabsCounter({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"tabs-counter\"\n      className={cn(\n        \"ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-muted-bg px-1 text-xs font-medium text-muted-txt\",\n        \"group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-primary-invert-bg group-data-[variant=fancy]/tabs:px-2 group-data-[variant=fancy]/tabs:leading-4 group-data-[variant=fancy]/tabs:font-semibold group-data-[variant=fancy]/tabs:text-primary-invert-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  TabsCounter,\n  tabsListVariants,\n  tabsTriggerVariants,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["React","TabsPrimitive","cn","Icon"],"sources":["../../../src/primitives/Tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\nimport { Icon } from \"../Icon\";\n\n// Tabs — built on Radix Tabs (content panels + roving-focus keyboard nav + a11y).\n// One component, four visual `variant`s, each supporting horizontal/vertical\n// `orientation`:\n//  - \"line\": underline under the active tab.\n//  - \"pill\" (default): a muted track; the active tab is an elevated pill.\n//  - \"segmented\": a muted track with a single sliding indicator that animates\n//    between tabs.\n//  - \"fancy\": translucent glass card tabs; the active tab merges into the glass\n//    content panel below (login-style). `size` controls the fancy vertical padding.\n// `variant`/`size`/`orientation` are set on the root and shared via context.\n\ntype TabsVariant = \"line\" | \"pill\" | \"segmented\" | \"fancy\";\ntype TabsSize = \"sm\" | \"md\" | \"lg\";\ntype TabsOrientation = \"horizontal\" | \"vertical\";\n\nconst TabsContext = React.createContext<{\n  variant: TabsVariant;\n  size: TabsSize;\n  orientation: TabsOrientation;\n}>({ variant: \"pill\", size: \"md\", orientation: \"horizontal\" });\n\n/**\n * Tabbed interface root: holds the active value and shares `variant`/`size`/\n * `orientation` with its `TabsList`/`TabsTrigger`/`TabsContent` via context.\n */\nfunction Tabs({\n  className,\n  variant = \"pill\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** Visual style of the tabs: underline, pill track, sliding segmented, or glass cards. */\n  variant?: TabsVariant;\n  /** Control density — drives padding and text size of the triggers. */\n  size?: TabsSize;\n}) {\n  const resolvedOrientation: TabsOrientation =\n    orientation === \"vertical\" ? \"vertical\" : \"horizontal\";\n  const ctx = React.useMemo(\n    () => ({ variant, size, orientation: resolvedOrientation }),\n    [variant, size, resolvedOrientation],\n  );\n  return (\n    <TabsContext.Provider value={ctx}>\n      <TabsPrimitive.Root\n        data-slot=\"tabs\"\n        data-variant={variant}\n        data-orientation={resolvedOrientation}\n        orientation={resolvedOrientation}\n        className={cn(\n          \"group/tabs flex data-[orientation=horizontal]:flex-col\",\n          variant === \"fancy\" ? \"gap-0\" : \"gap-2\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsContext.Provider>\n  );\n}\n\nconst tabsListVariants = cva(\"relative inline-flex items-center text-muted-txt\", {\n  variants: {\n    variant: {\n      line: \"gap-1 bg-transparent\",\n      pill: \"justify-center rounded-10 bg-muted-bg p-0.75\",\n      segmented: \"justify-center rounded-12 bg-muted-bg p-1\",\n      fancy: \"items-stretch gap-1 bg-transparent\",\n    },\n    orientation: {\n      horizontal: \"w-max min-w-full\",\n      vertical: \"h-fit w-full flex-col\",\n    },\n    size: { sm: \"\", md: \"\", lg: \"\" },\n  },\n  compoundVariants: [\n    // Track height for the horizontal pill/segmented variants.\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"sm\", class: \"h-6 p-0.5\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"md\", class: \"h-8.75\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"lg\", class: \"h-10 p-1\" },\n  ],\n  defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n});\n\n/** Row (or column) of tab triggers; renders the sliding indicator for the `segmented` variant. */\nfunction TabsList({\n  className,\n  children,\n  tabPrefix,\n  tabSuffix,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & {\n  tabPrefix?: React.ReactNode;\n  tabSuffix?: React.ReactNode;\n}) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  const isSegmented = variant === \"segmented\";\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n  const [indicator, setIndicator] = React.useState<{\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n  } | null>(null);\n  const [scrollAffordance, setScrollAffordance] = React.useState({\n    hasOverflow: false,\n    canScrollLeft: false,\n    canScrollRight: false,\n  });\n\n  const revealTrigger = React.useCallback(\n    (trigger: HTMLElement | null) => {\n      if (!trigger || orientation !== \"horizontal\") return;\n      trigger.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n    },\n    [orientation],\n  );\n\n  React.useEffect(() => {\n    if (orientation !== \"horizontal\") return;\n    const list = listRef.current;\n    if (!list) return;\n\n    const revealActive = () => {\n      const active = list.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n      );\n      revealTrigger(active);\n    };\n\n    const onFocusIn = (event: FocusEvent) => {\n      const target = event.target;\n      if (!(target instanceof HTMLElement)) return;\n      if (!target.matches('[data-slot=\"tabs-trigger\"]')) return;\n      revealTrigger(target);\n    };\n\n    revealActive();\n    list.addEventListener(\"focusin\", onFocusIn);\n\n    const mutation = new MutationObserver(revealActive);\n    mutation.observe(list, { attributes: true, attributeFilter: [\"data-state\"], subtree: true });\n\n    return () => {\n      list.removeEventListener(\"focusin\", onFocusIn);\n      mutation.disconnect();\n    };\n  }, [orientation, revealTrigger]);\n\n  // Layout effect (not a plain effect) so the very first paint already\n  // reflects real overflow — a plain effect fires after paint, so the\n  // arrows would mount hidden for one frame and then pop in, which is both\n  // a visible flash and a race automated screenshot tools can catch mid-flight.\n  React.useLayoutEffect(() => {\n    if (orientation !== \"horizontal\") {\n      setScrollAffordance({ hasOverflow: false, canScrollLeft: false, canScrollRight: false });\n      return;\n    }\n\n    const container = scrollContainerRef.current;\n    const list = listRef.current;\n    if (!container || !list) return;\n\n    const update = () => {\n      const hasOverflow = container.scrollWidth - container.clientWidth > 1;\n      // Measured from rendered position rather than `scrollLeft` — `scrollLeft`'s\n      // zero point and sign flip in RTL, so a direct comparison would mislabel\n      // which edge is scrollable. Comparing rects stays correct in both directions.\n      const containerRect = container.getBoundingClientRect();\n      const listRect = list.getBoundingClientRect();\n      setScrollAffordance({\n        hasOverflow,\n        canScrollLeft: hasOverflow && listRect.left < containerRect.left - 1,\n        canScrollRight: hasOverflow && listRect.right > containerRect.right + 1,\n      });\n    };\n\n    update();\n    // `list`'s size reacts to content changes (tabs added/removed, prefix/suffix\n    // toggled), so observing it also covers those cases without depending on\n    // `children`/`tabPrefix`/`tabSuffix` directly.\n    const resize = new ResizeObserver(update);\n    resize.observe(container);\n    resize.observe(list);\n    container.addEventListener(\"scroll\", update, { passive: true });\n\n    // Web fonts can still be swapping in when this first `update()` runs, so\n    // it may measure with fallback-font (narrower) text metrics and miss real\n    // overflow. `list`'s width changes once the real font lands, which the\n    // ResizeObserver above will also catch — this just makes the correction\n    // immediate instead of waiting on that indirect signal.\n    document.fonts?.ready.then(update);\n\n    return () => {\n      resize.disconnect();\n      container.removeEventListener(\"scroll\", update);\n    };\n  }, [orientation]);\n\n  React.useEffect(() => {\n    if (!isSegmented) return;\n    const list = listRef.current;\n    if (!list) return;\n    const update = () => {\n      const active = list.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n      );\n      if (!active) {\n        setIndicator(null);\n        return;\n      }\n      setIndicator({\n        left: active.offsetLeft,\n        top: active.offsetTop,\n        width: active.offsetWidth,\n        height: active.offsetHeight,\n      });\n    };\n    update();\n    const mutation = new MutationObserver(update);\n    mutation.observe(list, { attributes: true, attributeFilter: [\"data-state\"], subtree: true });\n    const resize = new ResizeObserver(update);\n    resize.observe(list);\n    return () => {\n      mutation.disconnect();\n      resize.disconnect();\n    };\n  }, [isSegmented]);\n\n  const scrollLeft = React.useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n    // Scroll by 80% of visible width for smooth navigation\n    const scrollAmount = container.clientWidth * 0.8;\n    container.scrollBy({ left: -scrollAmount, behavior: \"smooth\" });\n  }, []);\n\n  const scrollRight = React.useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n    // Scroll by 80% of visible width for smooth navigation\n    const scrollAmount = container.clientWidth * 0.8;\n    container.scrollBy({ left: scrollAmount, behavior: \"smooth\" });\n  }, []);\n\n  // TabsList's own styling only ever needs the \"reduced\" (gap-only, no\n  // bg/padding/rounding) look for horizontal orientation now — the track\n  // background/padding lives on the always-mounted wrapper below instead, so\n  // `tabPrefix`/`tabSuffix` (rendered as wrapper children, not list children)\n  // sit on the same surface as the tabs whether or not there's overflow.\n  // `h-full` fills the scroll container's height (itself stretched to the\n  // wrapper's content box, see the wrapper below), giving TabsList a definite\n  // height again — triggers size themselves via `h-[calc(100%-1px)]`, which\n  // resolves to `auto` (collapsing to their own content height, shorter than\n  // the track) against an indefinite parent height.\n  const getListClassName = () => {\n    if (orientation === \"horizontal\") {\n      return cn(\n        \"relative inline-flex h-full items-center text-muted-txt\",\n        variant === \"line\" && \"gap-1 bg-transparent\",\n        variant === \"pill\" && \"gap-0.5\",\n        variant === \"segmented\" && \"gap-0.5\",\n        variant === \"fancy\" && \"items-stretch gap-1 bg-transparent\",\n        \"w-max min-w-full\",\n        className,\n      );\n    }\n    return cn(tabsListVariants({ variant, size, orientation }), className);\n  };\n\n  // `tabPrefix`/`tabSuffix` only render inline in the (non-scrolling)\n  // vertical list; for horizontal they're rendered as fixed wrapper children\n  // outside the scroll container below, so they never scroll with the tabs.\n  const list = (\n    <TabsPrimitive.List\n      ref={listRef}\n      data-slot=\"tabs-list\"\n      className={getListClassName()}\n      {...props}\n    >\n      {orientation !== \"horizontal\" && tabPrefix}\n      {isSegmented && indicator && (\n        <span\n          data-slot=\"tabs-indicator\"\n          aria-hidden\n          className=\"absolute z-0 rounded-8 bg-primary-bg shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none\"\n          style={\n            orientation === \"vertical\"\n              ? { top: indicator.top, height: indicator.height, left: 4, right: 4 }\n              : { left: indicator.left, width: indicator.width, top: 4, bottom: 4 }\n          }\n        />\n      )}\n      {children}\n      {orientation !== \"horizontal\" && tabSuffix}\n    </TabsPrimitive.List>\n  );\n\n  if (orientation === \"vertical\") {\n    return list;\n  }\n\n  const { hasOverflow } = scrollAffordance;\n\n  // Arrows and the scroll container are always mounted (never conditionally\n  // swapped) so `scrollContainerRef`/`listRef` stay attached to the same DOM\n  // nodes across overflow toggles — the ResizeObserver/MutationObserver\n  // effects below only run once per `orientation` and would otherwise end up\n  // watching detached elements after a remount. Arrows collapse to 0 width\n  // instead of unmounting when there's no overflow. Track background/padding\n  // is unconditional (not gated on `hasOverflow`) since it now lives here\n  // rather than on TabsList, so `tabPrefix`/`tabSuffix` share the same\n  // surface as the tabs regardless of overflow state.\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-stretch\",\n        variant === \"pill\" && \"rounded-10 bg-muted-bg p-0.75\",\n        variant === \"segmented\" && \"rounded-12 bg-muted-bg p-1\",\n        variant === \"pill\" && size === \"sm\" && \"h-6 p-0.5\",\n        variant === \"pill\" && size === \"md\" && \"h-8.75\",\n        variant === \"pill\" && size === \"lg\" && \"h-10 p-1\",\n        variant === \"segmented\" && size === \"sm\" && \"h-6 p-0.5\",\n        variant === \"segmented\" && size === \"md\" && \"h-8.75\",\n        variant === \"segmented\" && size === \"lg\" && \"h-10 p-1\",\n      )}\n      data-slot=\"tabs-wrapper\"\n    >\n      {/* Fixed prefix — sits outside the scroll container, never scrolls */}\n      {tabPrefix && (\n        <div data-slot=\"tabs-prefix\" className=\"flex shrink-0 items-center px-1\">\n          {tabPrefix}\n        </div>\n      )}\n\n      {/* Left scroll arrow - collapses to 0 width when there's no overflow */}\n      <button\n        type=\"button\"\n        onClick={scrollLeft}\n        disabled={!scrollAffordance.canScrollLeft}\n        aria-label=\"Scroll tabs left\"\n        tabIndex={hasOverflow ? 0 : -1}\n        className={cn(\n          \"flex shrink-0 items-center justify-center overflow-hidden transition-all\",\n          // Width\n          hasOverflow ? \"w-8\" : \"w-0\",\n          // Divider for pill/segmented variants\n          hasOverflow &&\n            (variant === \"pill\" || variant === \"segmented\") &&\n            \"mr-0.5 border-r border-border/30\",\n          // Disabled state\n          \"disabled:cursor-not-allowed disabled:opacity-40\",\n          // Hover state (only when enabled)\n          \"enabled:hover:opacity-70 enabled:active:scale-95\",\n          // Focus state\n          \"focus:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset\",\n        )}\n      >\n        <Icon icon=\"chevron-left\" className=\"size-4 shrink-0 text-muted-txt\" />\n      </button>\n\n      {/* Scrollable container - flex-1 to fill space between arrows */}\n      <div\n        ref={scrollContainerRef}\n        data-slot=\"tabs-scroll-container\"\n        className={cn(\n          \"min-w-0 flex-1 touch-pan-x overflow-x-auto overscroll-x-contain [-webkit-overflow-scrolling:touch]\",\n          // Hide scrollbar\n          \"[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\",\n          variant === \"line\" && \"pb-1.5\",\n        )}\n      >\n        {list}\n      </div>\n\n      {/* Right scroll arrow - collapses to 0 width when there's no overflow */}\n      <button\n        type=\"button\"\n        onClick={scrollRight}\n        disabled={!scrollAffordance.canScrollRight}\n        aria-label=\"Scroll tabs right\"\n        tabIndex={hasOverflow ? 0 : -1}\n        className={cn(\n          \"flex shrink-0 items-center justify-center overflow-hidden transition-all\",\n          // Width\n          hasOverflow ? \"w-8\" : \"w-0\",\n          // Divider for pill/segmented variants\n          hasOverflow &&\n            (variant === \"pill\" || variant === \"segmented\") &&\n            \"ml-0.5 border-l border-border/30\",\n          // Disabled state\n          \"disabled:cursor-not-allowed disabled:opacity-40\",\n          // Hover state (only when enabled)\n          \"enabled:hover:opacity-70 enabled:active:scale-95\",\n          // Focus state\n          \"focus:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset\",\n        )}\n      >\n        <Icon icon=\"chevron-right\" className=\"size-4 shrink-0 text-muted-txt\" />\n      </button>\n\n      {/* Fixed suffix — sits outside the scroll container, never scrolls */}\n      {tabSuffix && (\n        <div data-slot=\"tabs-suffix\" className=\"flex shrink-0 items-center px-1\">\n          {tabSuffix}\n        </div>\n      )}\n    </div>\n  );\n}\n\nconst tabsTriggerVariants = cva(\n  \"relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap text-primary-txt outline-none transition-all focus-visible:ring-3 focus-visible:ring-focus disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary-txt [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        line: \"h-[calc(100%-1px)] flex-1 rounded-none\",\n        pill: \"h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-primary-bg data-[state=active]:shadow-sm\",\n        segmented: \"z-[1] h-[calc(100%-1px)] flex-1 rounded-8\",\n        // Fancy (Figma Components file, node 1:6831): default = glass-60→glass-20\n        // vertical gradient card; hover = solid glass-none; selected = 4px taller,\n        // flat-bottomed, glass-none→glass-40 (72.6% stop), semibold, with concave\n        // 16px corner curves where it meets the panel.\n        fancy: cn(\n          \"mb-1 flex-1 justify-between rounded-16 font-normal backdrop-blur-glass\",\n          \"bg-gradient-to-b from-glass-60-bg from-[3.4%] to-glass-20-bg\",\n          \"data-[state=inactive]:hover:bg-none data-[state=inactive]:hover:bg-glass-none-bg\",\n          \"data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:from-glass-none-bg data-[state=active]:to-glass-40-bg data-[state=active]:to-[72.6%] data-[state=active]:font-semibold\",\n          \"data-[state=active]:before:absolute data-[state=active]:before:-left-4 data-[state=active]:before:bottom-0 data-[state=active]:before:size-4 data-[state=active]:before:bg-[radial-gradient(circle_at_top_left,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          \"data-[state=active]:after:absolute data-[state=active]:after:-right-4 data-[state=active]:after:bottom-0 data-[state=active]:after:size-4 data-[state=active]:after:bg-[radial-gradient(circle_at_top_right,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          // The curves flow into NEIGHBOURING tabs only — never past the group edge.\n          \"first:before:hidden last:after:hidden\",\n        ),\n      },\n      orientation: { horizontal: \"\", vertical: \"w-full justify-start\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    compoundVariants: [\n      // Padding + text size for the track variants.\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"sm\",\n        class: \"px-2 py-0.5 text-xs leading-4\",\n      },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"md\", class: \"px-2 py-1 text-sm leading-5\" },\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"lg\",\n        class: \"px-2 py-1.5 text-sm leading-5\",\n      },\n      // Fancy footprint scales with size; the active tab adds bottom padding so it\n      // merges into the panel while inactive tabs stay shorter (gap above content).\n      { variant: \"fancy\", size: \"sm\", class: \"px-4 py-2 text-sm\" },\n      { variant: \"fancy\", size: \"md\", class: \"px-6 py-3 text-sm\" },\n      { variant: \"fancy\", size: \"lg\", class: \"px-6 py-4 text-base\" },\n      // Underline position for the line variant (per orientation).\n      {\n        variant: \"line\",\n        orientation: \"horizontal\",\n        class:\n          \"after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n      {\n        variant: \"line\",\n        orientation: \"vertical\",\n        class:\n          \"after:absolute after:inset-y-0 after:right-[-5px] after:w-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n    ],\n    defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n  },\n);\n\n/** Clickable tab button; its `value` selects the matching `TabsContent` panel. */\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(tabsTriggerVariants({ variant, size, orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Panel shown when its `value` matches the active tab; styled as a glass panel for the `fancy` variant. */\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  const { variant } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"flex-1 outline-none\",\n        // Fancy: a glass panel the active tab merges into (flat top, matching tint).\n        variant === \"fancy\" &&\n          \"flex-none rounded-16 rounded-t-none bg-glass-40-bg p-5 backdrop-blur-glass\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Trailing count badge for a tab trigger; goes dark on the `fancy` variant to match its cards. */\nfunction TabsCounter({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"tabs-counter\"\n      className={cn(\n        \"ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-muted-bg px-1 text-xs font-medium text-muted-txt\",\n        \"group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-primary-invert-bg group-data-[variant=fancy]/tabs:px-2 group-data-[variant=fancy]/tabs:leading-4 group-data-[variant=fancy]/tabs:font-semibold group-data-[variant=fancy]/tabs:text-primary-invert-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  TabsCounter,\n  tabsListVariants,\n  tabsTriggerVariants,\n};\n"],"mappings":"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"}

package/dist/primitives/Tabs/index.d.cts

@@ -1,2 +1,2 @@
-import { a as TabsTrigger, i as TabsList, n as TabsContent, o as tabsListVariants, r as TabsCounter, s as tabsTriggerVariants, t as Tabs } from "../../index60.cjs";
+import { a as TabsTrigger, i as TabsList, n as TabsContent, o as tabsListVariants, r as TabsCounter, s as tabsTriggerVariants, t as Tabs } from "../../index65.cjs";
 export { Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };