@optiaxiom/react 3.4.2 → 3.5.0

package/dist/cjs/sprinkles.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_sprinkles = require("./sprinkles-COrycuH3.js");
+exports.mapResponsiveValue = require_sprinkles.mapResponsiveValue;
+exports.normalizeResponsiveValue = require_sprinkles.normalizeResponsiveValue;
+exports.sprinkles = require_sprinkles.sprinkles;
+exports.sprinklesMerge = require_sprinkles.sprinklesMerge;
+exports.vars = require_sprinkles.vars;

package/dist/cjs/sub-nav-CigtDajR.js

@@ -0,0 +1,56 @@
+"use client";
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_group = require("./group.js");
+const require_SidebarContext = require("./SidebarContext-BgFk7dXx.js");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./assets/SubNav.css.ts.vanilla-CFdffvHS.css");
+//#region src/sub-nav/SubNav.css.ts
+var nav = require_recipeRuntime.recipeRuntime({ base: [{
+	bg: "bg.default",
+	flex: "1",
+	flexDirection: "column",
+	gap: "0",
+	overflow: "hidden",
+	py: "16"
+}, "_170nyha"] });
+//#endregion
+//#region src/sub-nav/SubNav.tsx
+/**
+* @group Sidebar
+*/
+const SubNav = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		borderColor: "border.secondary",
+		borderL: "1",
+		flexDirection: "column",
+		gap: "16",
+		h: "full",
+		ref,
+		w: "fit",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+			asChild: true,
+			...nav(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+				"aria-label": "Secondary",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SidebarContext.SidebarProvider, {
+					expanded: true,
+					navId: "",
+					onExpandedChange: () => {},
+					spacing: "12",
+					children
+				})
+			})
+		})
+	});
+});
+SubNav.displayName = "@optiaxiom/react/SubNav";
+//#endregion
+Object.defineProperty(exports, "SubNav", {
+	enumerable: true,
+	get: function() {
+		return SubNav;
+	}
+});

package/dist/cjs/sub-nav.js

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_sub_nav = require("./sub-nav-CigtDajR.js");
+exports.SubNav = require_sub_nav.SubNav;

package/dist/cjs/switch.js

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_SuggestionPopover = require("./SuggestionPopover-Bu_sY4dq.js");
+exports.Switch = require_SuggestionPopover.Switch;

package/dist/cjs/table-D9HONUVJ.js

@@ -0,0 +1,272 @@
+"use client";
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_ActionsRoot = require("./ActionsRoot-CDKZO8d6.js");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./assets/Table.css.ts.vanilla-k9DCmqqo.css");
+require("./assets/TableBody.css.ts.vanilla-ClsNTjk0.css");
+require("./assets/TableRow.css.ts.vanilla-qnTbGpk5.css");
+require("./assets/TableCell.css.ts.vanilla-DozW4vmM.css");
+require("./assets/TableHeader.css.ts.vanilla-_wNN70Lw.css");
+require("./assets/TableHeaderCell.css.ts.vanilla-9vqfYpKC.css");
+//#region src/table/Table.css.ts
+var table = require_recipeRuntime.recipeRuntime({
+	base: [{
+		color: "fg.default",
+		fontSize: "md",
+		w: "full"
+	}, "p2gz2b"],
+	variants: { layout: {
+		auto: ["_6asylj"],
+		fixed: [{ display: "grid" }, "jtoy7k"]
+	} }
+});
+var wrapper = require_recipeRuntime.recipeRuntime({ base: [{
+	bg: "bg.default",
+	border: "1",
+	borderColor: "border.tertiary",
+	maxW: "full",
+	overflow: "auto",
+	rounded: "xl"
+}, "_12mxqic"] });
+//#endregion
+//#region src/table/Table.tsx
+/**
+* Display tabular data using rows and columns.
+*
+* ⚠️ **IMPORTANT**: Consider using `DataTable` instead for displaying tabular
+* data.
+*
+* `DataTable` provides built-in support for:
+* - Sorting (client-side and server-side)
+* - Pagination (client-side and server-side)
+* - Row selection with checkboxes
+* - Column pinning (sticky columns)
+* - Row expansion
+* - Loading states
+* - Virtualization for large datasets
+*
+* `Table` is a low-level primitive and should only be used for very specific
+* custom table layouts. For most use cases, `DataTable` is the recommended
+* choice.
+*
+* @group Table
+* @since 1.4.0
+* @category data-display
+*/
+const Table = (0, react.forwardRef)(({ "aria-colcount": ariaColCount, "aria-rowcount": ariaRowCount, children, className, layout = "auto", ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		ref,
+		tabIndex: 0,
+		...wrapper({}, className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+			asChild: true,
+			...table({ layout }),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+				"aria-colcount": ariaColCount,
+				"aria-rowcount": ariaRowCount,
+				children
+			})
+		})
+	});
+});
+Table.displayName = "@optiaxiom/react/Table";
+//#endregion
+//#region src/table/TableAction.tsx
+/**
+* @group Table
+*/
+const TableAction = (0, react.forwardRef)(({ asChild = true, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActionsRoot.ActionsContent, {
+		asChild,
+		ref,
+		...props
+	});
+});
+TableAction.displayName = "@optiaxiom/react/TableAction";
+//#endregion
+//#region src/table/TableBody.css.ts
+var body = require_recipeRuntime.recipeRuntime({ base: ["lscau6"] });
+//#endregion
+//#region src/table/TableBody.tsx
+/**
+* @group Table
+*/
+const TableBody = (0, react.forwardRef)(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+	asChild: true,
+	...body({}, className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+		ref,
+		children
+	})
+}));
+TableBody.displayName = "@optiaxiom/react/TableBody";
+//#endregion
+//#region src/table/TableCell.css.ts
+var cell$1 = require_recipeRuntime.recipeRuntime({
+	base: [{
+		borderColor: "border.tertiary",
+		p: "16"
+	}, "a60zpi"],
+	variants: { pinned: {
+		false: "gt1eo2",
+		true: "ng43e2"
+	} }
+});
+//#endregion
+//#region src/table/TableCell.tsx
+/**
+* @group Table
+*/
+const TableCell = (0, react.forwardRef)(({ children, className, colSpan, pinned = false, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		"data-pinned": pinned ? "" : void 0,
+		...cell$1({ pinned }, className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+			colSpan,
+			ref,
+			children
+		})
+	});
+});
+TableCell.displayName = "@optiaxiom/react/TableCell";
+//#endregion
+//#region src/table/TableHeader.css.ts
+var header = require_recipeRuntime.recipeRuntime({ variants: { pinned: {
+	false: {},
+	true: "hzmvx8"
+} } });
+//#endregion
+//#region src/table/TableHeader.tsx
+/**
+* @group Table
+*/
+const TableHeader = (0, react.forwardRef)(({ children, className, pinned, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+	asChild: true,
+	...header({ pinned }, className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+		ref,
+		children
+	})
+}));
+TableHeader.displayName = "@optiaxiom/react/TableHeader";
+//#endregion
+//#region src/table/TableHeaderCell.css.ts
+var cell = require_recipeRuntime.recipeRuntime({
+	base: [{ borderColor: "border.tertiary" }, "_1bh5yzj"],
+	variants: { pinned: {
+		false: "_14op3k6",
+		true: "_17js9e2"
+	} }
+});
+var content = require_recipeRuntime.recipeRuntime({ base: [{
+	alignItems: "center",
+	bg: "bg.default",
+	color: "fg.tertiary",
+	display: "flex",
+	fontFamily: "mono",
+	fontSize: "sm",
+	fontWeight: "400",
+	size: "full",
+	textTransform: "uppercase"
+}, "_1id9qfa"] });
+//#endregion
+//#region src/table/TableHeaderCell.tsx
+/**
+* @group Table
+*/
+const TableHeaderCell = (0, react.forwardRef)(({ children, className, colSpan, p, pinned = false, px = "16", py = "12", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+	asChild: true,
+	"data-pinned": pinned ? "" : void 0,
+	...cell({ pinned }, className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+		colSpan,
+		ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+			...content(),
+			px: p ?? px,
+			py: p ?? py,
+			children
+		})
+	})
+}));
+TableHeaderCell.displayName = "@optiaxiom/react/TableHeaderCell";
+//#endregion
+//#region src/table/TableRow.css.ts
+var row = require_recipeRuntime.recipeRuntime({ base: [
+	"_9v6qaa",
+	{
+		transition: "colors",
+		w: "full"
+	},
+	"qycwda"
+] });
+//#endregion
+//#region src/table/TableRow.tsx
+/**
+* @group Table
+*/
+const TableRow = (0, react.forwardRef)(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActionsRoot.ActionsRoot, {
+	asChild: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		...row({}, className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+			ref,
+			children
+		})
+	})
+}));
+TableRow.displayName = "@optiaxiom/react/TableRow";
+//#endregion
+Object.defineProperty(exports, "Table", {
+	enumerable: true,
+	get: function() {
+		return Table;
+	}
+});
+Object.defineProperty(exports, "TableAction", {
+	enumerable: true,
+	get: function() {
+		return TableAction;
+	}
+});
+Object.defineProperty(exports, "TableBody", {
+	enumerable: true,
+	get: function() {
+		return TableBody;
+	}
+});
+Object.defineProperty(exports, "TableCell", {
+	enumerable: true,
+	get: function() {
+		return TableCell;
+	}
+});
+Object.defineProperty(exports, "TableHeader", {
+	enumerable: true,
+	get: function() {
+		return TableHeader;
+	}
+});
+Object.defineProperty(exports, "TableHeaderCell", {
+	enumerable: true,
+	get: function() {
+		return TableHeaderCell;
+	}
+});
+Object.defineProperty(exports, "TableRow", {
+	enumerable: true,
+	get: function() {
+		return TableRow;
+	}
+});

package/dist/cjs/table.js

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_table = require("./table-D9HONUVJ.js");
+exports.Table = require_table.Table;
+exports.TableAction = require_table.TableAction;
+exports.TableBody = require_table.TableBody;
+exports.TableCell = require_table.TableCell;
+exports.TableHeader = require_table.TableHeader;
+exports.TableHeaderCell = require_table.TableHeaderCell;
+exports.TableRow = require_table.TableRow;

package/dist/cjs/tabs-DojqVKM1.js

@@ -0,0 +1,184 @@
+"use client";
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.js");
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_useSurface = require("./useSurface-Dy0GdyeS.js");
+const require_decorateChildren = require("./decorateChildren-BuXnWpNx.js");
+const require_group = require("./group.js");
+let react = require("react");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_tabs = require("@radix-ui/react-tabs");
+_radix_ui_react_tabs = require_rolldown_runtime.__toESM(_radix_ui_react_tabs, 1);
+require("./assets/Tabs.css.ts.vanilla-CzyHGsQv.css");
+require("./assets/TabsList.css.ts.vanilla-aqfZmxSg.css");
+require("./assets/TabsTrigger.css.ts.vanilla-CAUgN9lH.css");
+//#region src/tabs/Tabs.css.ts
+var tabs = require_recipeRuntime.recipeRuntime({ base: [{ display: "flex" }, "zjy88j"] });
+//#endregion
+//#region src/tabs/Tabs.tsx
+/**
+* Tabs organize content into multiple sections with horizontal navigation.
+*
+* Use this component when users need to switch between different views of
+* related content. Don't manually build tab navigation with multiple Buttons in
+* a Flex - Tabs handles state management, active states, keyboard navigation,
+* and accessibility automatically.
+*
+* When not to use:
+* - For primary/vertical navigation use Sidebar instead.
+*
+* @group Tabs
+* @since 0.1.0
+* @category navigation
+*/
+const Tabs = (0, react.forwardRef)(({ children, className, onValueChange, ...props }, ref) => {
+	const { boxProps, restProps } = require_box.extractBoxProps(props);
+	const { track } = require_useSurface.useSurface("tab") ?? {};
+	const [initialValue] = (0, react.useState)(props.value);
+	(0, react.useEffect)(() => {
+		if (initialValue) track?.({
+			id: initialValue,
+			name: "viewed"
+		});
+	}, [initialValue, track]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		...tabs({}, className),
+		...boxProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tabs.Root, {
+			onValueChange: (value) => {
+				onValueChange?.(value);
+				track?.({
+					id: value,
+					name: "viewed"
+				});
+			},
+			ref,
+			...restProps,
+			children
+		})
+	});
+});
+Tabs.displayName = "@optiaxiom/react/Tabs";
+//#endregion
+//#region src/tabs/TabsContent.tsx
+/**
+* @group Tabs
+*/
+const TabsContent = (0, react.forwardRef)(({ children, value, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		flex: "1",
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tabs.TabsContent, {
+			value,
+			children
+		})
+	});
+});
+TabsContent.displayName = "@optiaxiom/react/TabsContent";
+//#endregion
+//#region src/tabs/TabsList.css.ts
+var list = require_recipeRuntime.recipeRuntime({ base: [{
+	borderColor: "border.tertiary",
+	display: "flex"
+}, "_1vj5vtk"] });
+//#endregion
+//#region src/tabs/TabsList.tsx
+/**
+* @group Tabs
+*/
+const TabsList = (0, react.forwardRef)(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		...list({}, className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tabs.List, {
+			ref,
+			children
+		})
+	});
+});
+TabsList.displayName = "@optiaxiom/react/TabsList";
+//#endregion
+//#region src/tabs/TabsTrigger.css.ts
+var content = require_recipeRuntime.recipeRuntime({ base: [{
+	gap: "8",
+	justifyContent: ["center", "flex-start"],
+	py: "6",
+	rounded: "sm",
+	transition: "colors"
+}, "qxvzas"] });
+var trigger = require_recipeRuntime.recipeRuntime({ base: [
+	"bako93",
+	{
+		flex: ["1", "initial"],
+		fontSize: "md",
+		fontWeight: "500",
+		py: "4",
+		transition: "colors"
+	},
+	"_1m1cgcv"
+] });
+//#endregion
+//#region src/tabs/TabsTrigger.tsx
+const Slot = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/TabsTrigger");
+/**
+* @extends Button
+* @group Tabs
+*/
+const TabsTrigger = (0, react.forwardRef)(({ addonAfter, addonBefore, asChild, children, className, value, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+	const { boxProps, restProps } = require_box.extractBoxProps(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		...trigger({}, className),
+		...boxProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tabs.Trigger, {
+			asChild: true,
+			ref,
+			value,
+			...restProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, { children: require_decorateChildren.decorateChildren({
+				asChild,
+				children
+			}, (children) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+				...content(),
+				children: [
+					addonBefore,
+					children,
+					addonAfter
+				]
+			})) })
+		})
+	});
+});
+TabsTrigger.displayName = "@optiaxiom/react/TabsTrigger";
+//#endregion
+Object.defineProperty(exports, "Tabs", {
+	enumerable: true,
+	get: function() {
+		return Tabs;
+	}
+});
+Object.defineProperty(exports, "TabsContent", {
+	enumerable: true,
+	get: function() {
+		return TabsContent;
+	}
+});
+Object.defineProperty(exports, "TabsList", {
+	enumerable: true,
+	get: function() {
+		return TabsList;
+	}
+});
+Object.defineProperty(exports, "TabsTrigger", {
+	enumerable: true,
+	get: function() {
+		return TabsTrigger;
+	}
+});

package/dist/cjs/tabs.js

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_tabs = require("./tabs-DojqVKM1.js");
+exports.Tabs = require_tabs.Tabs;
+exports.TabsContent = require_tabs.TabsContent;
+exports.TabsList = require_tabs.TabsList;
+exports.TabsTrigger = require_tabs.TabsTrigger;

package/dist/cjs/testing.js

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_dialogkit = require("./dialogkit-gcepZ2zv.js");
+let _optiaxiom_globals = require("@optiaxiom/globals");
+//#region src/testing.ts
+function cleanup() {
+	require_dialogkit.dialogkit.clear();
+	_optiaxiom_globals.toaster.clear();
+}
+//#endregion
+exports.cleanup = cleanup;

package/dist/cjs/text-BWyl3PQL.js

@@ -0,0 +1,92 @@
+"use client";
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+let react = require("react");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./assets/Text.css.ts.vanilla-CsT1luH5.css");
+//#region src/text/Text.css.ts
+var text = require_recipeRuntime.recipeRuntime(function() {
+	var x = { variants: {
+		lineClamp: {
+			"1": [
+				{ overflow: "hidden" },
+				"x77ve6",
+				"_1l11nf",
+				"bdvtgz"
+			],
+			"2": [
+				void 0,
+				"x77ve6",
+				"_1l11nf",
+				"_1rrdkut"
+			],
+			"3": [
+				void 0,
+				"x77ve6",
+				"_1l11nf",
+				"sn9l3h"
+			],
+			"4": [
+				void 0,
+				"x77ve6",
+				"_1l11nf",
+				"_1pmvj1w"
+			]
+		},
+		truncate: { true: [
+			void 0,
+			"x77ve6",
+			{ whiteSpace: "nowrap" }
+		] }
+	} };
+	x.variants.lineClamp["2"][0] = x.variants.lineClamp["1"][0];
+	x.variants.lineClamp["3"][0] = x.variants.lineClamp["1"][0];
+	x.variants.lineClamp["4"][0] = x.variants.lineClamp["1"][0];
+	x.variants.truncate.true[0] = x.variants.lineClamp["1"][0];
+	return x;
+}());
+//#endregion
+//#region src/text/Text.tsx
+const Slot = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/Text");
+/**
+* Renders text content for body copy, descriptions, and general text without
+* semantic meaning.
+*
+* 🚨 Renders a `<p>` tag by default, which cannot be nested inside another
+* `<p>` tag. For inline text styling within a paragraph, use `asChild` with a
+* `<span>` element.
+*
+* Use this for paragraphs, captions, descriptions, and non-heading text.
+*
+* When not to use:
+* - For headings and titles use Heading instead.
+* - For form labels use Label instead.
+* - Don't combine large fontSize ('xl'+) with bold fontWeight ('500'+) - that
+*   indicates a heading.
+*
+* @since 0.1.0
+* @category typography
+*/
+const Text = (0, react.forwardRef)(({ asChild, children, className, lineClamp, truncate, ...props }, ref) => {
+	const Comp = asChild ? Slot : "p";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		ref,
+		...text({
+			lineClamp,
+			truncate
+		}, className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, { children })
+	});
+});
+Text.displayName = "@optiaxiom/react/Text";
+//#endregion
+Object.defineProperty(exports, "Text", {
+	enumerable: true,
+	get: function() {
+		return Text;
+	}
+});

package/dist/cjs/text.js

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_text = require("./text-BWyl3PQL.js");
+exports.Text = require_text.Text;