@psnext/design-system 1.5.1 → 2.0.0

package/dist/primitives/Table/index.js

@@ -9,7 +9,7 @@ function Table({ className, striped = false, ...props }) {
 		children: /* @__PURE__ */ jsx("table", {
 			"data-slot": "table",
 			"data-striped": striped || void 0,
-			className: cn("w-full caption-bottom text-sm", striped && "[&_tbody_tr:nth-child(even)]:bg-accent", className),
+			className: cn("w-full caption-bottom text-sm  rounded-t-16 rounded-b-16 overflow-hidden", striped && "[&_tbody_tr:nth-child(odd)]:bg-muted-bg [&_tbody_tr:nth-child(even)]:bg-primary-bg", className),
 			...props
 		})
 	});
@@ -18,7 +18,7 @@ function Table({ className, striped = false, ...props }) {
 function TableHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("thead", {
 		"data-slot": "table-header",
-		className: cn("[&_tr]:border-b", className),
+		className: cn("[&_tr]:border-b bg-glass-60-bg backdrop-blur-glass", className),
 		...props
 	});
 }
@@ -34,7 +34,7 @@ function TableBody({ className, ...props }) {
 function TableFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tfoot", {
 		"data-slot": "table-footer",
-		className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+		className: cn("border-t bg-muted-bg/50 font-medium [&>tr]:last:border-b-0", className),
 		...props
 	});
 }
@@ -42,7 +42,7 @@ function TableFooter({ className, ...props }) {
 function TableRow({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tr", {
 		"data-slot": "table-row",
-		className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className),
+		className: cn("border-b transition-colors hover:bg-muted-bg/50 has-aria-expanded:bg-muted-bg/50 data-[state=selected]:bg-muted-bg", className),
 		...props
 	});
 }
@@ -50,7 +50,7 @@ function TableRow({ className, ...props }) {
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("h-10 px-2 text-base text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+		className: cn("h-10 px-2 text-base leading-6 text-left align-middle font-medium whitespace-nowrap text-primary-txt [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5", className),
 		...props
 	});
 }
@@ -58,7 +58,7 @@ function TableHead({ className, ...props }) {
 function TableCell({ className, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("p-2 text-base align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+		className: cn("p-2 text-base leading-6 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5", className),
 		...props
 	});
 }
@@ -66,7 +66,7 @@ function TableCell({ className, ...props }) {
 function TableCaption({ className, ...props }) {
 	return /* @__PURE__ */ jsx("caption", {
 		"data-slot": "table-caption",
-		className: cn("mt-4 text-sm text-muted-foreground", className),
+		className: cn("mt-4 text-sm text-muted-txt", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Table/Table.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** The table root: wraps a `<table>` in a horizontally scrollable container. */\nfunction Table({\n  className,\n  striped = false,\n  ...props\n}: React.ComponentProps<\"table\"> & {\n  /** Shades even body rows for a zebra-striped layout (Figma odd/even rows). */\n  striped?: boolean;\n}) {\n  return (\n    <div data-slot=\"table-container\" className=\"relative w-full overflow-x-auto\">\n      <table\n        data-slot=\"table\"\n        data-striped={striped || undefined}\n        className={cn(\n          \"w-full caption-bottom text-sm\",\n          // Zebra striping (Figma odd/even rows).\n          striped && \"[&_tbody_tr:nth-child(even)]:bg-accent\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** The `<thead>` section; holds the header row(s). */\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return <thead data-slot=\"table-header\" className={cn(\"[&_tr]:border-b\", className)} {...props} />;\n}\n\n/** The `<tbody>` section; holds the data rows. */\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The `<tfoot>` section; a muted, emphasised summary row band. */\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A table row (`<tr>`); supports hover and `data-state=\"selected\"` styling. */\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A header cell (`<th>`); left-aligned, medium-weight column label. */\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-base text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A data cell (`<td>`). */\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 text-base align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A `<caption>` rendered beneath the table as muted descriptive text. */\nfunction TableCaption({ className, ...props }: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n"],"mappings":";;;;AAKA,SAAS,MAAM,EACb,WACA,UAAU,OACV,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EAAK,aAAU;EAAkB,WAAU;YACzC,oBAAC,SAAD;GACE,aAAU;GACV,gBAAc,WAAW,KAAA;GACzB,WAAW,GACT,iCAEA,WAAW,0CACX,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;CAC3E,OAAO,oBAAC,SAAD;EAAO,aAAU;EAAe,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClG;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAwC;CACzE,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAqC;CACrE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,6GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqC;CACtE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,gKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqC;CACtE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,oHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAA0C;CAC9E,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Table/Table.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** The table root: wraps a `<table>` in a horizontally scrollable container. */\nfunction Table({\n  className,\n  striped = false,\n  ...props\n}: React.ComponentProps<\"table\"> & {\n  /** Zebra-stripes the body, tinting alternate rows starting with the first (Figma odd/even parity). */\n  striped?: boolean;\n}) {\n  return (\n    <div data-slot=\"table-container\" className=\"relative w-full overflow-x-auto\">\n      <table\n        data-slot=\"table\"\n        data-striped={striped || undefined}\n        className={cn(\n          \"w-full caption-bottom text-sm  rounded-t-16 rounded-b-16 overflow-hidden\",\n          // Zebra striping (Figma odd/even rows).\n          striped &&\n            \"[&_tbody_tr:nth-child(odd)]:bg-muted-bg [&_tbody_tr:nth-child(even)]:bg-primary-bg\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** The `<thead>` section; holds the header row(s). */\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b bg-glass-60-bg backdrop-blur-glass\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The `<tbody>` section; holds the data rows. */\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The `<tfoot>` section; a muted, emphasised summary row band. */\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\"border-t bg-muted-bg/50 font-medium [&>tr]:last:border-b-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A table row (`<tr>`); supports hover and `data-state=\"selected\"` styling. */\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted-bg/50 has-aria-expanded:bg-muted-bg/50 data-[state=selected]:bg-muted-bg\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A header cell (`<th>`); left-aligned, medium-weight column label. */\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-base leading-6 text-left align-middle font-medium whitespace-nowrap text-primary-txt [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A data cell (`<td>`). */\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 text-base leading-6 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A `<caption>` rendered beneath the table as muted descriptive text. */\nfunction TableCaption({ className, ...props }: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n"],"mappings":";;;;AAKA,SAAS,MAAM,EACb,WACA,UAAU,OACV,GAAG,SAIF;CACD,OACE,oBAAC,OAAD;EAAK,aAAU;EAAkB,WAAU;YACzC,oBAAC,SAAD;GACE,aAAU;GACV,gBAAc,WAAW,KAAA;GACzB,WAAW,GACT,4EAEA,WACE,sFACF,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAwC;CACzE,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAqC;CACrE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,sHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqC;CACtE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,yKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqC;CACtE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,4HACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAA0C;CAC9E,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Tabs/index.cjs

@@ -39,13 +39,13 @@ function Tabs({ className, variant = "pill", size = "md", orientation = "horizon
 		})
 	});
 }
-const tabsListVariants = (0, class_variance_authority.cva)("relative inline-flex items-center text-muted-foreground", {
+const tabsListVariants = (0, class_variance_authority.cva)("relative inline-flex items-center text-muted-txt", {
 	variants: {
 		variant: {
 			line: "gap-1 bg-transparent",
-			pill: "justify-center rounded-lg bg-muted p-[3px]",
-			segmented: "justify-center rounded-xl bg-muted p-1",
-			fancy: "w-full items-stretch gap-2 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"
 		},
 		orientation: {
 			horizontal: "",
@@ -62,19 +62,19 @@ const tabsListVariants = (0, class_variance_authority.cva)("relative inline-flex
 			variant: ["pill", "segmented"],
 			orientation: "horizontal",
 			size: "sm",
-			class: "h-8"
+			class: "h-6 p-0.5"
 		},
 		{
 			variant: ["pill", "segmented"],
 			orientation: "horizontal",
 			size: "md",
-			class: "h-9"
+			class: "h-8.75"
 		},
 		{
 			variant: ["pill", "segmented"],
 			orientation: "horizontal",
 			size: "lg",
-			class: "h-10"
+			class: "h-10 p-1"
 		}
 	],
 	defaultVariants: {
@@ -134,7 +134,7 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 			isSegmented && indicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"data-slot": "tabs-indicator",
 				"aria-hidden": true,
-				className: "absolute z-0 rounded-lg bg-background shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none",
+				className: "absolute z-0 rounded-8 bg-primary-bg shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none",
 				style: orientation === "vertical" ? {
 					top: indicator.top,
 					height: indicator.height,
@@ -152,13 +152,13 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 		]
 	});
 }
-const tabsTriggerVariants = (0, class_variance_authority.cva)("relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap text-foreground/70 outline-none transition-all hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const tabsTriggerVariants = (0, class_variance_authority.cva)("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", {
 	variants: {
 		variant: {
 			line: "h-[calc(100%-1px)] flex-1 rounded-none",
-			pill: "h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-background data-[state=active]:shadow-sm",
-			segmented: "z-[1] h-[calc(100%-1px)] flex-1 rounded-lg",
-			fancy: "mb-1.5 flex-1 justify-between rounded-xl bg-[var(--glass-subtle)] backdrop-blur-glass hover:bg-[var(--glass-light)] data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:bg-[var(--glass-light)]"
+			pill: "h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-primary-bg data-[state=active]:shadow-sm",
+			segmented: "z-[1] h-[calc(100%-1px)] flex-1 rounded-8",
+			fancy: require_cn.cn("mb-1 flex-1 justify-between rounded-16 font-normal backdrop-blur-glass", "bg-gradient-to-b from-glass-60-bg from-[3.4%] to-glass-20-bg", "data-[state=inactive]:hover:bg-none data-[state=inactive]:hover:bg-glass-none-bg", "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", "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)]", "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)]", "first:before:hidden last:after:hidden")
 		},
 		orientation: {
 			horizontal: "",
@@ -178,7 +178,7 @@ const tabsTriggerVariants = (0, class_variance_authority.cva)("relative inline-f
 				"segmented"
 			],
 			size: "sm",
-			class: "px-1.5 py-1 text-xs"
+			class: "px-2 py-0.5 text-xs leading-4"
 		},
 		{
 			variant: [
@@ -187,7 +187,7 @@ const tabsTriggerVariants = (0, class_variance_authority.cva)("relative inline-f
 				"segmented"
 			],
 			size: "md",
-			class: "px-2 py-1 text-sm"
+			class: "px-2 py-1 text-sm leading-5"
 		},
 		{
 			variant: [
@@ -196,7 +196,7 @@ const tabsTriggerVariants = (0, class_variance_authority.cva)("relative inline-f
 				"segmented"
 			],
 			size: "lg",
-			class: "px-3 py-1 text-base"
+			class: "px-2 py-1.5 text-sm leading-5"
 		},
 		{
 			variant: "fancy",
@@ -206,22 +206,22 @@ const tabsTriggerVariants = (0, class_variance_authority.cva)("relative inline-f
 		{
 			variant: "fancy",
 			size: "md",
-			class: "px-4 py-3 text-sm"
+			class: "px-6 py-3 text-sm"
 		},
 		{
 			variant: "fancy",
 			size: "lg",
-			class: "px-4 py-4 text-base"
+			class: "px-6 py-4 text-base"
 		},
 		{
 			variant: "line",
 			orientation: "horizontal",
-			class: "after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-foreground after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100"
+			class: "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"
 		},
 		{
 			variant: "line",
 			orientation: "vertical",
-			class: "after:absolute after:inset-y-0 after:right-[-5px] after:w-0.5 after:bg-foreground after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100"
+			class: "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"
 		}
 	],
 	defaultVariants: {
@@ -248,7 +248,7 @@ function TabsContent({ className, ...props }) {
 	const { variant } = react.useContext(TabsContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.Content, {
 		"data-slot": "tabs-content",
-		className: require_cn.cn("flex-1 outline-none", variant === "fancy" && "flex-none rounded-xl rounded-t-none bg-[var(--glass-light)] p-5 backdrop-blur-glass", className),
+		className: require_cn.cn("flex-1 outline-none", variant === "fancy" && "flex-none rounded-16 rounded-t-none bg-glass-40-bg p-5 backdrop-blur-glass", className),
 		...props
 	});
 }
@@ -256,7 +256,7 @@ function TabsContent({ className, ...props }) {
 function TabsCounter({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"data-slot": "tabs-counter",
-		className: require_cn.cn("ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-muted px-1 text-xs font-medium text-muted-foreground", "group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-inverse group-data-[variant=fancy]/tabs:text-inverse-foreground", className),
+		className: require_cn.cn("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", "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", className),
 		...props
 	});
 }

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-foreground\", {\n  variants: {\n    variant: {\n      line: \"gap-1 bg-transparent\",\n      pill: \"justify-center rounded-lg bg-muted p-[3px]\",\n      segmented: \"justify-center rounded-xl bg-muted p-1\",\n      fancy: \"w-full items-stretch gap-2 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-8\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"md\", class: \"h-9\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"lg\", class: \"h-10\" },\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-lg bg-background 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-foreground/70 outline-none transition-all hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground [&_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-background data-[state=active]:shadow-sm\",\n        segmented: \"z-[1] h-[calc(100%-1px)] flex-1 rounded-lg\",\n        fancy:\n          \"mb-1.5 flex-1 justify-between rounded-xl bg-[var(--glass-subtle)] backdrop-blur-glass hover:bg-[var(--glass-light)] data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:bg-[var(--glass-light)]\",\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      { variant: [\"line\", \"pill\", \"segmented\"], size: \"sm\", class: \"px-1.5 py-1 text-xs\" },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"md\", class: \"px-2 py-1 text-sm\" },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"lg\", class: \"px-3 py-1 text-base\" },\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-4 py-3 text-sm\" },\n      { variant: \"fancy\", size: \"lg\", class: \"px-4 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-foreground 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-foreground 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-xl rounded-t-none bg-[var(--glass-light)] 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 px-1 text-xs font-medium text-muted-foreground\",\n        \"group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-inverse group-data-[variant=fancy]/tabs:text-inverse-foreground\",\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":";;;;;;;;;AAuBA,MAAM,cAAcA,MAAM,cAIvB;CAAE,SAAS;CAAQ,MAAM;CAAM,aAAa;AAAa,CAAC;;;;;AAM7D,SAAS,KAAK,EACZ,WACA,UAAU,QACV,OAAO,MACP,cAAc,cACd,GAAG,SAMF;CACD,MAAM,sBACJ,gBAAgB,aAAa,aAAa;CAC5C,MAAM,MAAMA,MAAM,eACT;EAAE;EAAS;EAAM,aAAa;CAAoB,IACzD;EAAC;EAAS;EAAM;CAAmB,CACrC;CACA,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAY,UAAb;EAAsB,OAAO;YAC3B,iBAAA,GAAA,kBAAA,KAACC,SAAAA,KAAc,MAAf;GACE,aAAU;GACV,gBAAc;GACd,oBAAkB;GAClB,aAAa;GACb,WAAWC,WAAAA,GACT,0DACA,YAAY,UAAU,UAAU,SAChC,SACF;GACA,GAAI;EACL,CAAA;CACmB,CAAA;AAE1B;AAEA,MAAM,oBAAA,GAAA,yBAAA,KAAuB,2DAA2D;CACtF,UAAU;EACR,SAAS;GACP,MAAM;GACN,MAAM;GACN,WAAW;GACX,OAAO;EACT;EACA,aAAa;GACX,YAAY;GACZ,UAAU;EACZ;EACA,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CACA,kBAAkB;EAEhB;GAAE,SAAS,CAAC,QAAQ,WAAW;GAAG,aAAa;GAAc,MAAM;GAAM,OAAO;EAAM;EACtF;GAAE,SAAS,CAAC,QAAQ,WAAW;GAAG,aAAa;GAAc,MAAM;GAAM,OAAO;EAAM;EACtF;GAAE,SAAS,CAAC,QAAQ,WAAW;GAAG,aAAa;GAAc,MAAM;GAAM,OAAO;EAAO;CACzF;CACA,iBAAiB;EAAE,SAAS;EAAQ,aAAa;EAAc,MAAM;CAAK;AAC5E,CAAC;;AAGD,SAAS,SAAS,EAChB,WACA,UACA,WACA,WACA,GAAG,SAIF;CACD,MAAM,EAAE,SAAS,MAAM,gBAAgBF,MAAM,WAAW,WAAW;CACnE,MAAM,cAAc,YAAY;CAChC,MAAM,UAAUA,MAAM,OAAuB,IAAI;CACjD,MAAM,CAAC,WAAW,gBAAgBA,MAAM,SAK9B,IAAI;CAEd,MAAM,gBAAgB;EACpB,IAAI,CAAC,aAAa;EAClB,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,MAAM;EACX,MAAM,eAAe;GACnB,MAAM,SAAS,KAAK,cAClB,qDACF;GACA,IAAI,CAAC,QAAQ;IACX,aAAa,IAAI;IACjB;GACF;GACA,aAAa;IACX,MAAM,OAAO;IACb,KAAK,OAAO;IACZ,OAAO,OAAO;IACd,QAAQ,OAAO;GACjB,CAAC;EACH;EACA,OAAO;EACP,MAAM,WAAW,IAAI,iBAAiB,MAAM;EAC5C,SAAS,QAAQ,MAAM;GAAE,YAAY;GAAM,iBAAiB,CAAC,YAAY;GAAG,SAAS;EAAK,CAAC;EAC3F,MAAM,SAAS,IAAI,eAAe,MAAM;EACxC,OAAO,QAAQ,IAAI;EACnB,aAAa;GACX,SAAS,WAAW;GACpB,OAAO,WAAW;EACpB;CACF,GAAG,CAAC,WAAW,CAAC;CAEhB,OACE,iBAAA,GAAA,kBAAA,MAACC,SAAAA,KAAc,MAAf;EACE,KAAK;EACL,aAAU;EACV,WAAWC,WAAAA,GAAG,iBAAiB;GAAE;GAAS;GAAM;EAAY,CAAC,GAAG,SAAS;EACzE,GAAI;YAJN;GAMG;GACA,eAAe,aACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,aAAU;IACV,eAAA;IACA,WAAU;IACV,OACE,gBAAgB,aACZ;KAAE,KAAK,UAAU;KAAK,QAAQ,UAAU;KAAQ,MAAM;KAAG,OAAO;IAAE,IAClE;KAAE,MAAM,UAAU;KAAM,OAAO,UAAU;KAAO,KAAK;KAAG,QAAQ;IAAE;GAEzE,CAAA;GAEF;GACA;EACiB;;AAExB;AAEA,MAAM,uBAAA,GAAA,yBAAA,KACJ,0XACA;CACE,UAAU;EACR,SAAS;GACP,MAAM;GACN,MAAM;GACN,WAAW;GACX,OACE;EACJ;EACA,aAAa;GAAE,YAAY;GAAI,UAAU;EAAuB;EAChE,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CACA,kBAAkB;EAEhB;GAAE,SAAS;IAAC;IAAQ;IAAQ;GAAW;GAAG,MAAM;GAAM,OAAO;EAAsB;EACnF;GAAE,SAAS;IAAC;IAAQ;IAAQ;GAAW;GAAG,MAAM;GAAM,OAAO;EAAoB;EACjF;GAAE,SAAS;IAAC;IAAQ;IAAQ;GAAW;GAAG,MAAM;GAAM,OAAO;EAAsB;EAGnF;GAAE,SAAS;GAAS,MAAM;GAAM,OAAO;EAAoB;EAC3D;GAAE,SAAS;GAAS,MAAM;GAAM,OAAO;EAAoB;EAC3D;GAAE,SAAS;GAAS,MAAM;GAAM,OAAO;EAAsB;EAE7D;GACE,SAAS;GACT,aAAa;GACb,OACE;EACJ;EACA;GACE,SAAS;GACT,aAAa;GACb,OACE;EACJ;CACF;CACA,iBAAiB;EAAE,SAAS;EAAQ,aAAa;EAAc,MAAM;CAAK;AAC5E,CACF;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,MAAM,EAAE,SAAS,MAAM,gBAAgBF,MAAM,WAAW,WAAW;CACnE,OACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,KAAc,SAAf;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,oBAAoB;GAAE;GAAS;GAAM;EAAY,CAAC,GAAG,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,MAAM,EAAE,YAAYF,MAAM,WAAW,WAAW;CAChD,OACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,KAAc,SAAf;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,uBAEA,YAAY,WACV,uFACF,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAuC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,iIACA,kLACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"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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"}

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 "../../index59.cjs";
+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";
 export { Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };

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

@@ -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 "../../index59.js";
+import { a as TabsTrigger, i as TabsList, n as TabsContent, o as tabsListVariants, r as TabsCounter, s as tabsTriggerVariants, t as Tabs } from "../../index60.js";
 export { Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };

package/dist/primitives/Tabs/index.js

@@ -36,13 +36,13 @@ function Tabs({ className, variant = "pill", size = "md", orientation = "horizon
 		})
 	});
 }
-const tabsListVariants = cva("relative inline-flex items-center text-muted-foreground", {
+const tabsListVariants = cva("relative inline-flex items-center text-muted-txt", {
 	variants: {
 		variant: {
 			line: "gap-1 bg-transparent",
-			pill: "justify-center rounded-lg bg-muted p-[3px]",
-			segmented: "justify-center rounded-xl bg-muted p-1",
-			fancy: "w-full items-stretch gap-2 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"
 		},
 		orientation: {
 			horizontal: "",
@@ -59,19 +59,19 @@ const tabsListVariants = cva("relative inline-flex items-center text-muted-foreg
 			variant: ["pill", "segmented"],
 			orientation: "horizontal",
 			size: "sm",
-			class: "h-8"
+			class: "h-6 p-0.5"
 		},
 		{
 			variant: ["pill", "segmented"],
 			orientation: "horizontal",
 			size: "md",
-			class: "h-9"
+			class: "h-8.75"
 		},
 		{
 			variant: ["pill", "segmented"],
 			orientation: "horizontal",
 			size: "lg",
-			class: "h-10"
+			class: "h-10 p-1"
 		}
 	],
 	defaultVariants: {
@@ -131,7 +131,7 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 			isSegmented && indicator && /* @__PURE__ */ jsx("span", {
 				"data-slot": "tabs-indicator",
 				"aria-hidden": true,
-				className: "absolute z-0 rounded-lg bg-background shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none",
+				className: "absolute z-0 rounded-8 bg-primary-bg shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none",
 				style: orientation === "vertical" ? {
 					top: indicator.top,
 					height: indicator.height,
@@ -149,13 +149,13 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 		]
 	});
 }
-const tabsTriggerVariants = cva("relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap text-foreground/70 outline-none transition-all hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const tabsTriggerVariants = cva("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", {
 	variants: {
 		variant: {
 			line: "h-[calc(100%-1px)] flex-1 rounded-none",
-			pill: "h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-background data-[state=active]:shadow-sm",
-			segmented: "z-[1] h-[calc(100%-1px)] flex-1 rounded-lg",
-			fancy: "mb-1.5 flex-1 justify-between rounded-xl bg-[var(--glass-subtle)] backdrop-blur-glass hover:bg-[var(--glass-light)] data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:bg-[var(--glass-light)]"
+			pill: "h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-primary-bg data-[state=active]:shadow-sm",
+			segmented: "z-[1] h-[calc(100%-1px)] flex-1 rounded-8",
+			fancy: cn("mb-1 flex-1 justify-between rounded-16 font-normal backdrop-blur-glass", "bg-gradient-to-b from-glass-60-bg from-[3.4%] to-glass-20-bg", "data-[state=inactive]:hover:bg-none data-[state=inactive]:hover:bg-glass-none-bg", "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", "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)]", "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)]", "first:before:hidden last:after:hidden")
 		},
 		orientation: {
 			horizontal: "",
@@ -175,7 +175,7 @@ const tabsTriggerVariants = cva("relative inline-flex items-center justify-cente
 				"segmented"
 			],
 			size: "sm",
-			class: "px-1.5 py-1 text-xs"
+			class: "px-2 py-0.5 text-xs leading-4"
 		},
 		{
 			variant: [
@@ -184,7 +184,7 @@ const tabsTriggerVariants = cva("relative inline-flex items-center justify-cente
 				"segmented"
 			],
 			size: "md",
-			class: "px-2 py-1 text-sm"
+			class: "px-2 py-1 text-sm leading-5"
 		},
 		{
 			variant: [
@@ -193,7 +193,7 @@ const tabsTriggerVariants = cva("relative inline-flex items-center justify-cente
 				"segmented"
 			],
 			size: "lg",
-			class: "px-3 py-1 text-base"
+			class: "px-2 py-1.5 text-sm leading-5"
 		},
 		{
 			variant: "fancy",
@@ -203,22 +203,22 @@ const tabsTriggerVariants = cva("relative inline-flex items-center justify-cente
 		{
 			variant: "fancy",
 			size: "md",
-			class: "px-4 py-3 text-sm"
+			class: "px-6 py-3 text-sm"
 		},
 		{
 			variant: "fancy",
 			size: "lg",
-			class: "px-4 py-4 text-base"
+			class: "px-6 py-4 text-base"
 		},
 		{
 			variant: "line",
 			orientation: "horizontal",
-			class: "after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-foreground after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100"
+			class: "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"
 		},
 		{
 			variant: "line",
 			orientation: "vertical",
-			class: "after:absolute after:inset-y-0 after:right-[-5px] after:w-0.5 after:bg-foreground after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100"
+			class: "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"
 		}
 	],
 	defaultVariants: {
@@ -245,7 +245,7 @@ function TabsContent({ className, ...props }) {
 	const { variant } = React.useContext(TabsContext);
 	return /* @__PURE__ */ jsx(Tabs$1.Content, {
 		"data-slot": "tabs-content",
-		className: cn("flex-1 outline-none", variant === "fancy" && "flex-none rounded-xl rounded-t-none bg-[var(--glass-light)] p-5 backdrop-blur-glass", className),
+		className: cn("flex-1 outline-none", variant === "fancy" && "flex-none rounded-16 rounded-t-none bg-glass-40-bg p-5 backdrop-blur-glass", className),
 		...props
 	});
 }
@@ -253,7 +253,7 @@ function TabsContent({ className, ...props }) {
 function TabsCounter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "tabs-counter",
-		className: cn("ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-muted px-1 text-xs font-medium text-muted-foreground", "group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-inverse group-data-[variant=fancy]/tabs:text-inverse-foreground", className),
+		className: cn("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", "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", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TabsPrimitive"],"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-foreground\", {\n  variants: {\n    variant: {\n      line: \"gap-1 bg-transparent\",\n      pill: \"justify-center rounded-lg bg-muted p-[3px]\",\n      segmented: \"justify-center rounded-xl bg-muted p-1\",\n      fancy: \"w-full items-stretch gap-2 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-8\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"md\", class: \"h-9\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"lg\", class: \"h-10\" },\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-lg bg-background 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-foreground/70 outline-none transition-all hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground [&_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-background data-[state=active]:shadow-sm\",\n        segmented: \"z-[1] h-[calc(100%-1px)] flex-1 rounded-lg\",\n        fancy:\n          \"mb-1.5 flex-1 justify-between rounded-xl bg-[var(--glass-subtle)] backdrop-blur-glass hover:bg-[var(--glass-light)] data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:bg-[var(--glass-light)]\",\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      { variant: [\"line\", \"pill\", \"segmented\"], size: \"sm\", class: \"px-1.5 py-1 text-xs\" },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"md\", class: \"px-2 py-1 text-sm\" },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"lg\", class: \"px-3 py-1 text-base\" },\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-4 py-3 text-sm\" },\n      { variant: \"fancy\", size: \"lg\", class: \"px-4 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-foreground 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-foreground 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-xl rounded-t-none bg-[var(--glass-light)] 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 px-1 text-xs font-medium text-muted-foreground\",\n        \"group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-inverse group-data-[variant=fancy]/tabs:text-inverse-foreground\",\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.js","names":["TabsPrimitive"],"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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"}

package/dist/primitives/Text/index.cjs

@@ -17,11 +17,11 @@ const textVariants = (0, require("class-variance-authority").cva)("", {
 			semibold: "font-semibold"
 		},
 		variant: {
-			default: "text-foreground",
-			muted: "text-muted-foreground",
-			primary: "text-primary",
-			destructive: "text-destructive",
-			success: "text-[var(--content-success)]"
+			default: "text-primary-txt",
+			muted: "text-muted-txt",
+			primary: "text-primary-txt",
+			destructive: "text-danger-txt",
+			success: "text-success-txt"
 		},
 		font: {
 			body: "font-sans",

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Text/Text.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Text — the typography primitive. Renders any element via `as` and drives\n// size/line-height from the design-system BODY type scale (Inter): the Figma\n// \"paragraph large/regular/small/mini\" + caption steps (tokens in\n// styles/tokens/typography.css). Inline links compose as children.\nconst textVariants = cva(\"\", {\n  variants: {\n    // Body scale — font-size + line-height come straight from the type tokens.\n    size: {\n      large:\n        \"text-[length:var(--paragraph-large-font-size)] leading-[var(--paragraph-large-line-height)]\",\n      regular:\n        \"text-[length:var(--paragraph-regular-font-size)] leading-[var(--paragraph-regular-line-height)]\",\n      small:\n        \"text-[length:var(--paragraph-small-font-size)] leading-[var(--paragraph-small-line-height)]\",\n      mini: \"text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]\",\n      caption:\n        \"text-[length:var(--caption-font-size)] leading-[var(--caption-line-height)] tracking-[var(--caption-letter-spacing)] uppercase\",\n    },\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    variant: {\n      default: \"text-foreground\",\n      muted: \"text-muted-foreground\",\n      primary: \"text-primary\",\n      destructive: \"text-destructive\",\n      success: \"text-[var(--content-success)]\",\n    },\n    font: {\n      body: \"font-sans\",\n      heading: \"font-heading\",\n      mono: \"font-mono\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    truncate: {\n      true: \"truncate\",\n    },\n  },\n  defaultVariants: {\n    size: \"regular\",\n    weight: \"normal\",\n    variant: \"default\",\n    font: \"body\",\n  },\n});\n\ntype TextProps = Omit<React.ComponentProps<\"p\">, \"color\"> &\n  VariantProps<typeof textVariants> & {\n    /** Element/component to render. Defaults to `p`. */\n    as?: React.ElementType;\n    /** Body type-scale step (font-size + line-height). Defaults to `regular`. */\n    size?: VariantProps<typeof textVariants>[\"size\"];\n    /** Font weight. Defaults to `normal`. */\n    weight?: VariantProps<typeof textVariants>[\"weight\"];\n    /** Foreground colour token. Defaults to `default` (text-foreground). */\n    variant?: VariantProps<typeof textVariants>[\"variant\"];\n    /** Font family. Defaults to `body` (sans). */\n    font?: VariantProps<typeof textVariants>[\"font\"];\n    /** Horizontal text alignment. */\n    align?: VariantProps<typeof textVariants>[\"align\"];\n    /** Truncate to a single line with an ellipsis. */\n    truncate?: VariantProps<typeof textVariants>[\"truncate\"];\n  };\n\n/** The typography primitive: renders any element via `as` and drives size/weight/colour from the body type scale. */\nfunction Text({\n  as,\n  className,\n  size,\n  weight,\n  variant,\n  font,\n  align,\n  truncate,\n  ...props\n}: TextProps) {\n  const Comp = as ?? \"p\";\n  return (\n    <Comp\n      data-slot=\"text\"\n      className={cn(textVariants({ size, weight, variant, font, align, truncate }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Text, textVariants, type TextProps };\n"],"mappings":";;;;AASA,MAAM,gBAAA,qCAAA,EAAA,KAAmB,IAAI;CAC3B,UAAU;EAER,MAAM;GACJ,OACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;EACJ;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;GACT,aAAa;GACb,SAAS;EACX;EACA,MAAM;GACJ,MAAM;GACN,SAAS;GACT,MAAM;EACR;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU,EACR,MAAM,WACR;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAqBD,SAAS,KAAK,EACZ,IACA,WACA,MACA,QACA,SACA,MACA,OACA,UACA,GAAG,SACS;CAEZ,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,KAEjB;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,aAAa;GAAE;GAAM;GAAQ;GAAS;GAAM;GAAO;EAAS,CAAC,GAAG,SAAS;EACvF,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Text/Text.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Text — the typography primitive. Renders any element via `as` and drives\n// size/line-height from the design-system BODY type scale (Inter): the Figma\n// \"paragraph large/regular/small/mini\" + caption steps (tokens in\n// styles/tokens/typography.css). Inline links compose as children.\nconst textVariants = cva(\"\", {\n  variants: {\n    // Body scale — font-size + line-height come straight from the type tokens.\n    size: {\n      large:\n        \"text-[length:var(--paragraph-large-font-size)] leading-[var(--paragraph-large-line-height)]\",\n      regular:\n        \"text-[length:var(--paragraph-regular-font-size)] leading-[var(--paragraph-regular-line-height)]\",\n      small:\n        \"text-[length:var(--paragraph-small-font-size)] leading-[var(--paragraph-small-line-height)]\",\n      mini: \"text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]\",\n      caption:\n        \"text-[length:var(--caption-font-size)] leading-[var(--caption-line-height)] tracking-[var(--caption-letter-spacing)] uppercase\",\n    },\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    variant: {\n      default: \"text-primary-txt\",\n      muted: \"text-muted-txt\",\n      primary: \"text-primary-txt\",\n      destructive: \"text-danger-txt\",\n      success: \"text-success-txt\",\n    },\n    font: {\n      body: \"font-sans\",\n      heading: \"font-heading\",\n      mono: \"font-mono\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    truncate: {\n      true: \"truncate\",\n    },\n  },\n  defaultVariants: {\n    size: \"regular\",\n    weight: \"normal\",\n    variant: \"default\",\n    font: \"body\",\n  },\n});\n\ntype TextProps = Omit<React.ComponentProps<\"p\">, \"color\"> &\n  VariantProps<typeof textVariants> & {\n    /** Element/component to render. Defaults to `p`. */\n    as?: React.ElementType;\n    /** Body type-scale step (font-size + line-height). Defaults to `regular`. */\n    size?: VariantProps<typeof textVariants>[\"size\"];\n    /** Font weight. Defaults to `normal`. */\n    weight?: VariantProps<typeof textVariants>[\"weight\"];\n    /** Foreground colour token. Defaults to `default` (text-primary-txt). */\n    variant?: VariantProps<typeof textVariants>[\"variant\"];\n    /** Font family. Defaults to `body` (sans). */\n    font?: VariantProps<typeof textVariants>[\"font\"];\n    /** Horizontal text alignment. */\n    align?: VariantProps<typeof textVariants>[\"align\"];\n    /** Truncate to a single line with an ellipsis. */\n    truncate?: VariantProps<typeof textVariants>[\"truncate\"];\n  };\n\n/** The typography primitive: renders any element via `as` and drives size/weight/colour from the body type scale. */\nfunction Text({\n  as,\n  className,\n  size,\n  weight,\n  variant,\n  font,\n  align,\n  truncate,\n  ...props\n}: TextProps) {\n  const Comp = as ?? \"p\";\n  return (\n    <Comp\n      data-slot=\"text\"\n      className={cn(textVariants({ size, weight, variant, font, align, truncate }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Text, textVariants, type TextProps };\n"],"mappings":";;;;AASA,MAAM,gBAAA,qCAAA,EAAA,KAAmB,IAAI;CAC3B,UAAU;EAER,MAAM;GACJ,OACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;EACJ;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;GACT,aAAa;GACb,SAAS;EACX;EACA,MAAM;GACJ,MAAM;GACN,SAAS;GACT,MAAM;EACR;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU,EACR,MAAM,WACR;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAqBD,SAAS,KAAK,EACZ,IACA,WACA,MACA,QACA,SACA,MACA,OACA,UACA,GAAG,SACS;CAEZ,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,KAEjB;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,aAAa;GAAE;GAAM;GAAQ;GAAS;GAAM;GAAO;EAAS,CAAC,GAAG,SAAS;EACvF,GAAI;CACL,CAAA;AAEL"}

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

@@ -1,2 +1,2 @@
-import { n as TextProps, r as textVariants, t as Text } from "../../index60.cjs";
+import { n as TextProps, r as textVariants, t as Text } from "../../index61.cjs";
 export { Text, TextProps, textVariants };

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

@@ -1,2 +1,2 @@
-import { n as TextProps, r as textVariants, t as Text } from "../../index60.js";
+import { n as TextProps, r as textVariants, t as Text } from "../../index61.js";
 export { Text, TextProps, textVariants };

package/dist/primitives/Text/index.js

@@ -17,11 +17,11 @@ const textVariants = cva("", {
 			semibold: "font-semibold"
 		},
 		variant: {
-			default: "text-foreground",
-			muted: "text-muted-foreground",
-			primary: "text-primary",
-			destructive: "text-destructive",
-			success: "text-[var(--content-success)]"
+			default: "text-primary-txt",
+			muted: "text-muted-txt",
+			primary: "text-primary-txt",
+			destructive: "text-danger-txt",
+			success: "text-success-txt"
 		},
 		font: {
 			body: "font-sans",