@psnext/design-system 1.0.0 → 1.2.0

package/dist/primitives/Table/index.js

@@ -0,0 +1,76 @@
+import { t as cn } from "../../cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/Table/Table.tsx
+/** The table root: wraps a `<table>` in a horizontally scrollable container. */
+function Table({ className, striped = false, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		className: "relative w-full overflow-x-auto",
+		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-muted/50", className),
+			...props
+		})
+	});
+}
+/** The `<thead>` section; holds the header row(s). */
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: cn("[&_tr]:border-b", className),
+		...props
+	});
+}
+/** The `<tbody>` section; holds the data rows. */
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: cn("[&_tr:last-child]:border-0", className),
+		...props
+	});
+}
+/** The `<tfoot>` section; a muted, emphasised summary row band. */
+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),
+		...props
+	});
+}
+/** A table row (`<tr>`); supports hover and `data-state="selected"` styling. */
+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),
+		...props
+	});
+}
+/** A header cell (`<th>`); left-aligned, medium-weight column label. */
+function TableHead({ className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+		...props
+	});
+}
+/** A data cell (`<td>`). */
+function TableCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+		...props
+	});
+}
+/** A `<caption>` rendered beneath the table as muted descriptive text. */
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: cn("mt-4 text-sm text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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-muted/50\",\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-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 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,4CACX,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,sJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqC;CACtE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,0GACA,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"}

package/dist/primitives/Tabs/index.cjs

@@ -0,0 +1,267 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk.cjs");
+const require_cn = require("../../cn.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let radix_ui = require("radix-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+//#region src/primitives/Tabs/Tabs.tsx
+const TabsContext = react.createContext({
+	variant: "pill",
+	size: "md",
+	orientation: "horizontal"
+});
+/**
+* Tabbed interface root: holds the active value and shares `variant`/`size`/
+* `orientation` with its `TabsList`/`TabsTrigger`/`TabsContent` via context.
+*/
+function Tabs({ className, variant = "pill", size = "md", orientation = "horizontal", ...props }) {
+	const resolvedOrientation = orientation === "vertical" ? "vertical" : "horizontal";
+	const ctx = react.useMemo(() => ({
+		variant,
+		size,
+		orientation: resolvedOrientation
+	}), [
+		variant,
+		size,
+		resolvedOrientation
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.Root, {
+			"data-slot": "tabs",
+			"data-variant": variant,
+			"data-orientation": resolvedOrientation,
+			orientation: resolvedOrientation,
+			className: require_cn.cn("group/tabs flex data-[orientation=horizontal]:flex-col", variant === "fancy" ? "gap-0" : "gap-2", className),
+			...props
+		})
+	});
+}
+const tabsListVariants = (0, class_variance_authority.cva)("relative inline-flex items-center text-muted-foreground", {
+	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"
+		},
+		orientation: {
+			horizontal: "",
+			vertical: "h-fit flex-col"
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: ["pill", "segmented"],
+			orientation: "horizontal",
+			size: "sm",
+			class: "h-8"
+		},
+		{
+			variant: ["pill", "segmented"],
+			orientation: "horizontal",
+			size: "md",
+			class: "h-9"
+		},
+		{
+			variant: ["pill", "segmented"],
+			orientation: "horizontal",
+			size: "lg",
+			class: "h-10"
+		}
+	],
+	defaultVariants: {
+		variant: "pill",
+		orientation: "horizontal",
+		size: "md"
+	}
+});
+/** Row (or column) of tab triggers; renders the sliding indicator for the `segmented` variant. */
+function TabsList({ className, children, ...props }) {
+	const { variant, size, orientation } = react.useContext(TabsContext);
+	const isSegmented = variant === "segmented";
+	const listRef = react.useRef(null);
+	const [indicator, setIndicator] = react.useState(null);
+	react.useEffect(() => {
+		if (!isSegmented) return;
+		const list = listRef.current;
+		if (!list) return;
+		const update = () => {
+			const active = list.querySelector("[data-slot=\"tabs-trigger\"][data-state=\"active\"]");
+			if (!active) {
+				setIndicator(null);
+				return;
+			}
+			setIndicator({
+				left: active.offsetLeft,
+				top: active.offsetTop,
+				width: active.offsetWidth,
+				height: active.offsetHeight
+			});
+		};
+		update();
+		const mutation = new MutationObserver(update);
+		mutation.observe(list, {
+			attributes: true,
+			attributeFilter: ["data-state"],
+			subtree: true
+		});
+		const resize = new ResizeObserver(update);
+		resize.observe(list);
+		return () => {
+			mutation.disconnect();
+			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({
+			variant,
+			size,
+			orientation
+		}), className),
+		...props,
+		children: [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",
+			style: orientation === "vertical" ? {
+				top: indicator.top,
+				height: indicator.height,
+				left: 4,
+				right: 4
+			} : {
+				left: indicator.left,
+				width: indicator.width,
+				top: 4,
+				bottom: 4
+			}
+		}), children]
+	});
+}
+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", {
+	variants: {
+		variant: {
+			line: "h-[calc(100%-1px)] flex-1 rounded-none",
+			pill: "h-[calc(100%-1px)] flex-1 rounded-md border border-transparent data-[state=active]:bg-background data-[state=active]:shadow-sm dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30",
+			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-[var(--glass-blur)] hover:bg-[var(--glass-light)] data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:bg-[var(--glass-light)]"
+		},
+		orientation: {
+			horizontal: "",
+			vertical: "w-full justify-start"
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: [
+				"line",
+				"pill",
+				"segmented"
+			],
+			size: "sm",
+			class: "px-1.5 py-1 text-xs"
+		},
+		{
+			variant: [
+				"line",
+				"pill",
+				"segmented"
+			],
+			size: "md",
+			class: "px-2 py-1 text-sm"
+		},
+		{
+			variant: [
+				"line",
+				"pill",
+				"segmented"
+			],
+			size: "lg",
+			class: "px-3 py-1 text-base"
+		},
+		{
+			variant: "fancy",
+			size: "sm",
+			class: "px-4 py-2 text-sm"
+		},
+		{
+			variant: "fancy",
+			size: "md",
+			class: "px-4 py-3 text-sm"
+		},
+		{
+			variant: "fancy",
+			size: "lg",
+			class: "px-4 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"
+		},
+		{
+			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"
+		}
+	],
+	defaultVariants: {
+		variant: "pill",
+		orientation: "horizontal",
+		size: "md"
+	}
+});
+/** Clickable tab button; its `value` selects the matching `TabsContent` panel. */
+function TabsTrigger({ className, ...props }) {
+	const { variant, size, orientation } = react.useContext(TabsContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Tabs.Trigger, {
+		"data-slot": "tabs-trigger",
+		className: require_cn.cn(tabsTriggerVariants({
+			variant,
+			size,
+			orientation
+		}), className),
+		...props
+	});
+}
+/** Panel shown when its `value` matches the active tab; styled as a glass panel for the `fancy` variant. */
+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-[var(--glass-blur)]", className),
+		...props
+	});
+}
+/** Trailing count badge for a tab trigger; goes dark on the `fancy` variant to match its cards. */
+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-foreground group-data-[variant=fancy]/tabs:text-background", className),
+		...props
+	});
+}
+//#endregion
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsCounter = TabsCounter;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
+exports.tabsListVariants = tabsListVariants;
+exports.tabsTriggerVariants = tabsTriggerVariants;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\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      {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    </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-md border border-transparent data-[state=active]:bg-background data-[state=active]:shadow-sm dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30\",\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-[var(--glass-blur)] 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-[var(--glass-blur)]\",\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-foreground group-data-[variant=fancy]/tabs:text-background\",\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

@@ -0,0 +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";
+export { Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };

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

@@ -0,0 +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";
+export { Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };

package/dist/primitives/Tabs/index.js

@@ -0,0 +1,258 @@
+import { t as cn } from "../../cn.js";
+import * as React from "react";
+import { Tabs as Tabs$1 } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/primitives/Tabs/Tabs.tsx
+const TabsContext = React.createContext({
+	variant: "pill",
+	size: "md",
+	orientation: "horizontal"
+});
+/**
+* Tabbed interface root: holds the active value and shares `variant`/`size`/
+* `orientation` with its `TabsList`/`TabsTrigger`/`TabsContent` via context.
+*/
+function Tabs({ className, variant = "pill", size = "md", orientation = "horizontal", ...props }) {
+	const resolvedOrientation = orientation === "vertical" ? "vertical" : "horizontal";
+	const ctx = React.useMemo(() => ({
+		variant,
+		size,
+		orientation: resolvedOrientation
+	}), [
+		variant,
+		size,
+		resolvedOrientation
+	]);
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx(Tabs$1.Root, {
+			"data-slot": "tabs",
+			"data-variant": variant,
+			"data-orientation": resolvedOrientation,
+			orientation: resolvedOrientation,
+			className: cn("group/tabs flex data-[orientation=horizontal]:flex-col", variant === "fancy" ? "gap-0" : "gap-2", className),
+			...props
+		})
+	});
+}
+const tabsListVariants = cva("relative inline-flex items-center text-muted-foreground", {
+	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"
+		},
+		orientation: {
+			horizontal: "",
+			vertical: "h-fit flex-col"
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: ["pill", "segmented"],
+			orientation: "horizontal",
+			size: "sm",
+			class: "h-8"
+		},
+		{
+			variant: ["pill", "segmented"],
+			orientation: "horizontal",
+			size: "md",
+			class: "h-9"
+		},
+		{
+			variant: ["pill", "segmented"],
+			orientation: "horizontal",
+			size: "lg",
+			class: "h-10"
+		}
+	],
+	defaultVariants: {
+		variant: "pill",
+		orientation: "horizontal",
+		size: "md"
+	}
+});
+/** Row (or column) of tab triggers; renders the sliding indicator for the `segmented` variant. */
+function TabsList({ className, children, ...props }) {
+	const { variant, size, orientation } = React.useContext(TabsContext);
+	const isSegmented = variant === "segmented";
+	const listRef = React.useRef(null);
+	const [indicator, setIndicator] = React.useState(null);
+	React.useEffect(() => {
+		if (!isSegmented) return;
+		const list = listRef.current;
+		if (!list) return;
+		const update = () => {
+			const active = list.querySelector("[data-slot=\"tabs-trigger\"][data-state=\"active\"]");
+			if (!active) {
+				setIndicator(null);
+				return;
+			}
+			setIndicator({
+				left: active.offsetLeft,
+				top: active.offsetTop,
+				width: active.offsetWidth,
+				height: active.offsetHeight
+			});
+		};
+		update();
+		const mutation = new MutationObserver(update);
+		mutation.observe(list, {
+			attributes: true,
+			attributeFilter: ["data-state"],
+			subtree: true
+		});
+		const resize = new ResizeObserver(update);
+		resize.observe(list);
+		return () => {
+			mutation.disconnect();
+			resize.disconnect();
+		};
+	}, [isSegmented]);
+	return /* @__PURE__ */ jsxs(Tabs$1.List, {
+		ref: listRef,
+		"data-slot": "tabs-list",
+		className: cn(tabsListVariants({
+			variant,
+			size,
+			orientation
+		}), className),
+		...props,
+		children: [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",
+			style: orientation === "vertical" ? {
+				top: indicator.top,
+				height: indicator.height,
+				left: 4,
+				right: 4
+			} : {
+				left: indicator.left,
+				width: indicator.width,
+				top: 4,
+				bottom: 4
+			}
+		}), children]
+	});
+}
+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", {
+	variants: {
+		variant: {
+			line: "h-[calc(100%-1px)] flex-1 rounded-none",
+			pill: "h-[calc(100%-1px)] flex-1 rounded-md border border-transparent data-[state=active]:bg-background data-[state=active]:shadow-sm dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30",
+			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-[var(--glass-blur)] hover:bg-[var(--glass-light)] data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:bg-[var(--glass-light)]"
+		},
+		orientation: {
+			horizontal: "",
+			vertical: "w-full justify-start"
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: [
+				"line",
+				"pill",
+				"segmented"
+			],
+			size: "sm",
+			class: "px-1.5 py-1 text-xs"
+		},
+		{
+			variant: [
+				"line",
+				"pill",
+				"segmented"
+			],
+			size: "md",
+			class: "px-2 py-1 text-sm"
+		},
+		{
+			variant: [
+				"line",
+				"pill",
+				"segmented"
+			],
+			size: "lg",
+			class: "px-3 py-1 text-base"
+		},
+		{
+			variant: "fancy",
+			size: "sm",
+			class: "px-4 py-2 text-sm"
+		},
+		{
+			variant: "fancy",
+			size: "md",
+			class: "px-4 py-3 text-sm"
+		},
+		{
+			variant: "fancy",
+			size: "lg",
+			class: "px-4 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"
+		},
+		{
+			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"
+		}
+	],
+	defaultVariants: {
+		variant: "pill",
+		orientation: "horizontal",
+		size: "md"
+	}
+});
+/** Clickable tab button; its `value` selects the matching `TabsContent` panel. */
+function TabsTrigger({ className, ...props }) {
+	const { variant, size, orientation } = React.useContext(TabsContext);
+	return /* @__PURE__ */ jsx(Tabs$1.Trigger, {
+		"data-slot": "tabs-trigger",
+		className: cn(tabsTriggerVariants({
+			variant,
+			size,
+			orientation
+		}), className),
+		...props
+	});
+}
+/** Panel shown when its `value` matches the active tab; styled as a glass panel for the `fancy` variant. */
+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-[var(--glass-blur)]", className),
+		...props
+	});
+}
+/** Trailing count badge for a tab trigger; goes dark on the `fancy` variant to match its cards. */
+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-foreground group-data-[variant=fancy]/tabs:text-background", className),
+		...props
+	});
+}
+//#endregion
+export { Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };
+
+//# sourceMappingURL=index.js.map