@agentero/design-system 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.16.0",
+	"version": "0.17.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -73,6 +73,10 @@
 			"types": "./src/switch/index.d.ts",
 			"import": "./src/switch/index.js"
 		},
+		"./tabs": {
+			"types": "./src/tabs/index.d.ts",
+			"import": "./src/tabs/index.js"
+		},
 		"./tag": {
 			"types": "./src/tag/index.d.ts",
 			"import": "./src/tag/index.js"
@@ -110,6 +114,7 @@
 		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slot": "^1.2.4",
 		"@radix-ui/react-switch": "^1.3.2",
+		"@radix-ui/react-tabs": "^1.1.13",
 		"@radix-ui/react-tooltip": "^1.2.11",
 		"clsx": "^2.1.1",
 		"sonner": "^2.0.7",

package/src/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs, tabsRecipe } from './tabs';
+export type { TabsRootProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './tabs';

package/src/tabs/index.js

@@ -0,0 +1,2 @@
+import { Tabs as e, tabsRecipe as t } from "./tabs.js";
+export { e as Tabs, t as tabsRecipe };

package/src/tabs/tabs.d.ts

@@ -0,0 +1,135 @@
+import { ComponentProps } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export declare const tabsRecipe: import('tailwind-variants').TVReturnType<{
+    variant: {
+        line: {
+            list: string;
+            trigger: string[];
+        };
+        enclosed: {
+            list: string;
+            trigger: string;
+        };
+        button: {
+            list: string;
+            trigger: string[];
+        };
+    };
+    position: {
+        center: {
+            list: string;
+        };
+        start: {
+            list: string;
+        };
+        end: {
+            list: string;
+        };
+        full: {
+            list: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string[];
+    content: string;
+}, undefined, {
+    variant: {
+        line: {
+            list: string;
+            trigger: string[];
+        };
+        enclosed: {
+            list: string;
+            trigger: string;
+        };
+        button: {
+            list: string;
+            trigger: string[];
+        };
+    };
+    position: {
+        center: {
+            list: string;
+        };
+        start: {
+            list: string;
+        };
+        end: {
+            list: string;
+        };
+        full: {
+            list: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string[];
+    content: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        line: {
+            list: string;
+            trigger: string[];
+        };
+        enclosed: {
+            list: string;
+            trigger: string;
+        };
+        button: {
+            list: string;
+            trigger: string[];
+        };
+    };
+    position: {
+        center: {
+            list: string;
+        };
+        start: {
+            list: string;
+        };
+        end: {
+            list: string;
+        };
+        full: {
+            list: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    trigger: string[];
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+type TabsVariants = VariantProps<typeof tabsRecipe>;
+export type TabsRootProps = ComponentProps<typeof TabsPrimitive.Root> & TabsVariants;
+export type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
+export type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
+export type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
+/**
+ * Tabs built on Radix UI's Tabs (keyboard nav, roving focus and ARIA come for
+ * free). Compose `Root` with a `List` of `Trigger`s and matching `Content`s,
+ * pairing each `Trigger`/`Content` by `value`.
+ */
+export declare const Tabs: {
+    Root: {
+        ({ className, variant, position, ...props }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    List: {
+        ({ className, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        ({ className, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/src/tabs/tabs.js

@@ -0,0 +1,113 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { tv as t } from "tailwind-variants";
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as r, use as i } from "react";
+import * as a from "@radix-ui/react-tabs";
+//#region src/tabs/tabs.tsx
+var o = t({
+	slots: {
+		root: "flex flex-col",
+		list: "z-1 flex shrink-0 overflow-x-auto overflow-y-hidden",
+		trigger: [
+			"relative cursor-pointer text-sm font-semibold text-text-default-base-secondary transition-colors duration-150",
+			"hover:text-text-default-base-primary",
+			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring-button-primary",
+			"data-disabled:cursor-not-allowed data-disabled:opacity-50",
+			"data-[state=active]:text-text-default-base-primary"
+		],
+		content: ""
+	},
+	variants: {
+		variant: {
+			line: {
+				list: "w-full gap-6 border-b border-border-default-base-primary bg-bg-default-base-primary px-4",
+				trigger: [
+					"grid h-10 content-center",
+					"before:absolute before:inset-x-0 before:bottom-0 before:h-0.5 before:origin-bottom before:scale-y-0 before:bg-text-button-secondary-enable before:transition-transform before:duration-200 before:will-change-transform before:content-['']",
+					"data-[state=active]:before:scale-y-100"
+				]
+			},
+			enclosed: {
+				list: "inline-grid max-w-full auto-cols-fr grid-flow-col rounded-md bg-bg-default-base-tertiary p-1",
+				trigger: "flex items-center justify-center rounded-sm px-3 py-1 text-center data-[state=active]:bg-bg-default-base-primary"
+			},
+			button: {
+				list: "gap-2",
+				trigger: [
+					"flex h-8 items-center gap-2.5 rounded-md px-3 text-sm font-normal text-text-default-base-secondary",
+					"[&>svg]:-mx-1 [&>svg]:size-4 [&>svg]:fill-icon-default-base-secondary",
+					"hover:bg-bg-default-base-primary-hover data-[state=active]:bg-bg-default-base-primary-hover"
+				]
+			}
+		},
+		position: {
+			center: { list: "justify-center self-center" },
+			start: { list: "self-start" },
+			end: { list: "justify-end self-end" },
+			full: { list: "w-full self-stretch" }
+		}
+	},
+	compoundVariants: [{
+		variant: "button",
+		position: "start",
+		class: { list: "-ml-2.25" }
+	}],
+	defaultVariants: {
+		variant: "line",
+		position: "start"
+	}
+}), s = r(null), c = () => {
+	let e = i(s);
+	if (!e) throw Error("Tabs.List, Tabs.Trigger and Tabs.Content must be used within Tabs.Root");
+	return e;
+}, l = ({ className: t, variant: r, position: i, ...c }) => {
+	let l = o({
+		variant: r,
+		position: i
+	});
+	return /* @__PURE__ */ n(s, {
+		value: l,
+		children: /* @__PURE__ */ n(a.Root, {
+			"data-slot": "tabs-root",
+			className: e(l.root(), t),
+			...c
+		})
+	});
+};
+l.displayName = "Tabs.Root";
+var u = ({ className: t, ...r }) => {
+	let i = c();
+	return /* @__PURE__ */ n(a.List, {
+		"data-slot": "tabs-list",
+		className: e(i.list(), t),
+		...r
+	});
+};
+u.displayName = "Tabs.List";
+var d = ({ className: t, ...r }) => {
+	let i = c();
+	return /* @__PURE__ */ n(a.Trigger, {
+		"data-slot": "tabs-trigger",
+		className: e(i.trigger(), t),
+		...r
+	});
+};
+d.displayName = "Tabs.Trigger";
+var f = ({ className: t, ...r }) => {
+	let i = c();
+	return /* @__PURE__ */ n(a.Content, {
+		"data-slot": "tabs-content",
+		className: e(i.content(), t),
+		...r
+	});
+};
+f.displayName = "Tabs.Content";
+var p = {
+	Root: l,
+	List: u,
+	Trigger: d,
+	Content: f
+};
+//#endregion
+export { p as Tabs, o as tabsRecipe };