@noxickon/onyx 5.0.2 → 6.1.0

package/dist/components/Table/Table.styles.js

@@ -0,0 +1,98 @@
+import { tv as e } from "../../internal/tv.js";
+//#region src/components/Table/Table.styles.ts
+var t = "bg-[color-mix(in_oklab,var(--color-primary-500)_16%,var(--card))]", n = e({
+	slots: {
+		wrapper: "relative w-full overflow-auto rounded-card border border-line bg-card shadow-[var(--shadow-card)] [-webkit-overflow-scrolling:touch]",
+		table: "w-full border-separate border-spacing-0 text-left align-middle text-body text-fg",
+		caption: "caption-top px-4 pb-2.5 text-left text-2xs text-fg-subtle",
+		header: "",
+		body: "",
+		footer: "",
+		row: "group/row",
+		head: "border-b border-line-strong px-4 text-left align-middle text-xs font-semibold tracking-[0.01em] whitespace-nowrap text-fg-muted pointer-coarse:px-3.5 pointer-coarse:py-2.75",
+		cell: "px-4 align-middle pointer-coarse:px-3.5 pointer-coarse:py-3 pointer-coarse:whitespace-nowrap",
+		selectControl: "flex items-center justify-center",
+		expandTrigger: [
+			"inline-flex size-5.5 shrink-0 items-center justify-center rounded-sm pointer-coarse:size-6.5",
+			"cursor-pointer text-fg-subtle transition-colors",
+			"hover:bg-fg/12 hover:text-fg",
+			"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-ink"
+		],
+		expandIcon: "size-3.5 transition-transform duration-300 ease-spring motion-reduce:transition-none",
+		expandedRow: "group/detail",
+		expandedCell: "p-0",
+		expandedClip: [
+			"grid grid-rows-[0fr] opacity-0",
+			"transition-[grid-template-rows,opacity] duration-300 ease-spring motion-reduce:transition-none",
+			"group-data-[expanded]/detail:grid-rows-[1fr] group-data-[expanded]/detail:opacity-100"
+		],
+		expandedContent: "min-h-0 overflow-hidden",
+		expandedInner: "border-t border-t-line bg-sunken text-fg-muted"
+	},
+	variants: {
+		density: {
+			comfortable: {
+				head: "py-2.5",
+				cell: "py-2.75",
+				expandedInner: "px-11 py-4.5"
+			},
+			compact: {
+				head: "py-1.75",
+				cell: "py-1.5",
+				expandedInner: "px-11 py-3.5"
+			}
+		},
+		section: {
+			head: {},
+			body: {},
+			foot: { row: "[&>td]:border-t [&>td]:border-line-strong font-semibold text-fg pointer-coarse:[&>td]:py-2.75" }
+		},
+		dividers: {
+			rows: { row: "[&>td]:border-t [&>td]:border-line first:[&>td]:border-t-0" },
+			none: {},
+			grid: {
+				row: "[&>td]:border-t [&>td]:border-r [&>td]:border-line first:[&>td]:border-t-0 [&>td:last-child]:border-r-0",
+				head: "border-r border-line last:border-r-0"
+			}
+		},
+		hover: { true: { row: "transition-colors not-data-selected:hover:bg-surface-raised" } },
+		stripe: { true: { row: "not-data-selected:even:bg-fg/3" } },
+		selected: { true: { row: t } },
+		stickyHeader: { true: { head: "sticky top-0 z-10 bg-card" } },
+		align: {
+			start: {
+				head: "text-left",
+				cell: "text-left"
+			},
+			center: {
+				head: "text-center",
+				cell: "text-center"
+			},
+			end: {
+				head: "text-right",
+				cell: "text-right"
+			}
+		},
+		sticky: { left: {
+			head: "sticky left-0 z-20 border-r border-line-strong bg-card",
+			cell: `sticky left-0 z-10 border-r border-line-strong bg-card group-hover/row:bg-surface-raised group-data-selected/row:${t}`
+		} }
+	},
+	compoundVariants: [{
+		selected: !0,
+		hover: !0,
+		class: { row: "hover:bg-[color-mix(in_oklab,var(--color-primary-500)_24%,var(--card))]" }
+	}, {
+		stickyHeader: !0,
+		sticky: "left",
+		class: { head: "z-30" }
+	}],
+	defaultVariants: {
+		density: "comfortable",
+		dividers: "rows",
+		section: "body",
+		align: "start"
+	}
+});
+//#endregion
+export { n as tableVariants };

package/dist/components/Table/Table.types.d.ts

@@ -0,0 +1,77 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { TableVariants } from './Table.styles';
+type TableDensity = NonNullable<TableVariants['density']>;
+type TableDividers = NonNullable<TableVariants['dividers']>;
+type TableAlign = NonNullable<TableVariants['align']>;
+type TableSticky = NonNullable<TableVariants['sticky']>;
+interface OxTableProps extends Omit<ComponentPropsWithoutRef<'table'>, 'className'> {
+    children: ReactNode;
+    className?: string;
+    defaultExpandedRows?: Set<string>;
+    defaultSelectedRows?: Set<string>;
+    density?: TableDensity;
+    dividers?: TableDividers;
+    hover?: boolean;
+    onSelectedChange?: (ids: Set<string>) => void;
+    selectable?: boolean;
+    selectedRows?: Set<string>;
+    stickyHeader?: boolean;
+    stripe?: boolean;
+    unwrapped?: boolean;
+    wrapperClassName?: string;
+}
+interface OxTableSectionProps extends Omit<ComponentPropsWithoutRef<'thead'>, 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+interface OxTableBodyProps extends Omit<ComponentPropsWithoutRef<'tbody'>, 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+interface OxTableFooterProps extends Omit<ComponentPropsWithoutRef<'tfoot'>, 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+interface OxTableCaptionProps extends Omit<ComponentPropsWithoutRef<'caption'>, 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+interface OxTableRowProps extends Omit<ComponentPropsWithoutRef<'tr'>, 'className'> {
+    children: ReactNode;
+    className?: string;
+    rowId?: string;
+    selected?: boolean;
+}
+interface OxTableHeadProps extends Omit<ComponentPropsWithoutRef<'th'>, 'className' | 'align'> {
+    align?: TableAlign;
+    children?: ReactNode;
+    className?: string;
+    sticky?: TableSticky;
+}
+interface OxTableCellProps extends Omit<ComponentPropsWithoutRef<'td'>, 'className' | 'align'> {
+    align?: TableAlign;
+    children?: ReactNode;
+    className?: string;
+    sticky?: TableSticky;
+}
+interface OxTableSelectAllCellProps extends Omit<ComponentPropsWithoutRef<'th'>, 'className'> {
+    className?: string;
+    label?: string;
+    sticky?: TableSticky;
+}
+interface OxTableSelectCellProps extends Omit<ComponentPropsWithoutRef<'td'>, 'className'> {
+    className?: string;
+    label?: string;
+    sticky?: TableSticky;
+}
+interface OxTableExpandTriggerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'className' | 'children'> {
+    className?: string;
+    label?: string;
+}
+interface OxTableExpandedRowProps extends Omit<ComponentPropsWithoutRef<'tr'>, 'className'> {
+    children: ReactNode;
+    className?: string;
+    colSpan?: number;
+    rowId: string;
+}
+export type { OxTableBodyProps, OxTableCaptionProps, OxTableCellProps, OxTableExpandedRowProps, OxTableExpandTriggerProps, OxTableFooterProps, OxTableHeadProps, OxTableProps, OxTableRowProps, OxTableSectionProps, OxTableSelectAllCellProps, OxTableSelectCellProps, TableAlign, TableDensity, TableDividers, TableSticky, };

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

@@ -0,0 +1,16 @@
+import { OxTableBody, OxTableCaption, OxTableCell, OxTableExpandedRow, OxTableExpandTrigger, OxTableFooter, OxTableHead, OxTableHeader, OxTableRoot, OxTableRow, OxTableSelectAllCell, OxTableSelectCell } from './Table';
+declare const OxTable: typeof OxTableRoot & {
+    Header: typeof OxTableHeader;
+    Body: typeof OxTableBody;
+    Footer: typeof OxTableFooter;
+    Caption: typeof OxTableCaption;
+    Row: typeof OxTableRow;
+    Head: typeof OxTableHead;
+    Cell: typeof OxTableCell;
+    SelectAllCell: typeof OxTableSelectAllCell;
+    SelectCell: typeof OxTableSelectCell;
+    ExpandTrigger: typeof OxTableExpandTrigger;
+    ExpandedRow: typeof OxTableExpandedRow;
+};
+export { OxTable };
+export type { OxTableBodyProps, OxTableCaptionProps, OxTableCellProps, OxTableExpandedRowProps, OxTableExpandTriggerProps, OxTableFooterProps, OxTableHeadProps, OxTableProps, OxTableRowProps, OxTableSectionProps, OxTableSelectAllCellProps, OxTableSelectCellProps, TableAlign, TableDensity, TableDividers, TableSticky, } from './Table.types';

package/dist/components/Table/index.js

@@ -0,0 +1,17 @@
+import { OxTableBody as e, OxTableCaption as t, OxTableCell as n, OxTableExpandTrigger as r, OxTableExpandedRow as i, OxTableFooter as a, OxTableHead as o, OxTableHeader as s, OxTableRoot as c, OxTableRow as l, OxTableSelectAllCell as u, OxTableSelectCell as d } from "./Table.js";
+//#region src/components/Table/index.ts
+var f = Object.assign(c, {
+	Header: s,
+	Body: e,
+	Footer: a,
+	Caption: t,
+	Row: l,
+	Head: o,
+	Cell: n,
+	SelectAllCell: u,
+	SelectCell: d,
+	ExpandTrigger: r,
+	ExpandedRow: i
+});
+//#endregion
+export { f as OxTable };

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,7 @@
+import { OxTabsIndicatorProps, OxTabsListProps, OxTabsPanelProps, OxTabsProps, OxTabsTabProps } from './Tabs.types';
+declare function OxTabsRoot({ children, className, defaultValue, fullWidth, onValueChange, orientation, render, value, variant, }: OxTabsProps): import("react").JSX.Element;
+declare function OxTabsList({ activateOnFocus, children, className, ...props }: OxTabsListProps): import("react").JSX.Element;
+declare function OxTabsTab({ children, className, disabled, value, ...props }: OxTabsTabProps): import("react").JSX.Element;
+declare function OxTabsPanel({ children, className, keepMounted, value, ...props }: OxTabsPanelProps): import("react").JSX.Element;
+declare function OxTabsIndicator({ className }: OxTabsIndicatorProps): import("react").JSX.Element;
+export { OxTabsIndicator, OxTabsList, OxTabsPanel, OxTabsRoot, OxTabsTab };

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,136 @@
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { createCompoundContext as t, createCompoundContextWithDefault as n } from "../../internal/context/createCompoundContext/createCompoundContext.js";
+import { TabsRoot as r } from "../../node_modules/@base-ui/react/tabs/root/TabsRoot.js";
+import { TabsTab as i } from "../../node_modules/@base-ui/react/tabs/tab/TabsTab.js";
+import { TabsPanel as a } from "../../node_modules/@base-ui/react/tabs/panel/TabsPanel.js";
+import { TabsList as o } from "../../node_modules/@base-ui/react/tabs/list/TabsList.js";
+import { index_parts_exports as s } from "../../node_modules/@base-ui/react/tabs/index.parts.js";
+import { tabsVariants as c } from "./Tabs.styles.js";
+import { Children as l, isValidElement as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/Tabs/Tabs.tsx
+var m = e(), { Provider: h, useRequiredContext: g } = t("OxTabs"), { Provider: _, useContext: v } = n("OxTabsClones", null);
+function y(e) {
+	let t = (0, m.c)(25), { children: n, className: i, defaultValue: a, fullWidth: o, onValueChange: s, orientation: l, render: u, value: d, variant: p } = e, g = o === void 0 ? !1 : o, _ = l === void 0 ? "horizontal" : l, v = p === void 0 ? "pill" : p, y, b, x, S;
+	if (t[0] !== i || t[1] !== g || t[2] !== _ || t[3] !== v) {
+		let e = c({
+			variant: v,
+			fullWidth: g
+		});
+		b = h, t[8] !== g || t[9] !== _ || t[10] !== v ? (S = {
+			variant: v,
+			fullWidth: g,
+			orientation: _
+		}, t[8] = g, t[9] = _, t[10] = v, t[11] = S) : S = t[11], y = r, x = e.root({ class: i }), t[0] = i, t[1] = g, t[2] = _, t[3] = v, t[4] = y, t[5] = b, t[6] = x, t[7] = S;
+	} else y = t[4], b = t[5], x = t[6], S = t[7];
+	let C;
+	t[12] !== y || t[13] !== n || t[14] !== a || t[15] !== s || t[16] !== _ || t[17] !== u || t[18] !== x || t[19] !== d ? (C = /* @__PURE__ */ f(y, {
+		className: x,
+		"data-ox-slot": "tabs",
+		defaultValue: a,
+		orientation: _,
+		render: u,
+		value: d,
+		onValueChange: s,
+		children: n
+	}), t[12] = y, t[13] = n, t[14] = a, t[15] = s, t[16] = _, t[17] = u, t[18] = x, t[19] = d, t[20] = C) : C = t[20];
+	let w;
+	return t[21] !== b || t[22] !== S || t[23] !== C ? (w = /* @__PURE__ */ f(b, {
+		value: S,
+		children: C
+	}), t[21] = b, t[22] = S, t[23] = C, t[24] = w) : w = t[24], w;
+}
+function b(e) {
+	let t = (0, m.c)(26), n, r, i, a;
+	t[0] === e ? (n = t[1], r = t[2], i = t[3], a = t[4]) : ({activateOnFocus: a, children: n, className: r, ...i} = e, t[0] = e, t[1] = n, t[2] = r, t[3] = i, t[4] = a);
+	let s = a === void 0 ? !0 : a, { fullWidth: d, orientation: p, variant: h } = g(), v, y, b, S, C;
+	if (t[5] !== s || t[6] !== n || t[7] !== r || t[8] !== d || t[9] !== p || t[10] !== i || t[11] !== h) {
+		let e = c({
+			variant: h,
+			fullWidth: d
+		});
+		y = h === "underline" ? null : l.toArray(n).flatMap((t) => {
+			if (!u(t) || t.type !== x) return [];
+			let { children: n, value: r } = t.props;
+			return [/* @__PURE__ */ f("span", {
+				"aria-hidden": !0,
+				className: e.clone(),
+				"data-orientation": p,
+				children: n
+			}, String(r))];
+		}), v = o, b = i, S = s, C = e.list({ class: r }), t[5] = s, t[6] = n, t[7] = r, t[8] = d, t[9] = p, t[10] = i, t[11] = h, t[12] = v, t[13] = y, t[14] = b, t[15] = S, t[16] = C;
+	} else v = t[12], y = t[13], b = t[14], S = t[15], C = t[16];
+	let w;
+	t[17] !== n || t[18] !== y ? (w = /* @__PURE__ */ f(_, {
+		value: y,
+		children: n
+	}), t[17] = n, t[18] = y, t[19] = w) : w = t[19];
+	let T;
+	return t[20] !== v || t[21] !== b || t[22] !== S || t[23] !== C || t[24] !== w ? (T = /* @__PURE__ */ f(v, {
+		...b,
+		activateOnFocus: S,
+		className: C,
+		"data-ox-slot": "tabs-list",
+		children: w
+	}), t[20] = v, t[21] = b, t[22] = S, t[23] = C, t[24] = w, t[25] = T) : T = t[25], T;
+}
+function x(e) {
+	let t = (0, m.c)(20), n, r, a, o, s;
+	t[0] === e ? (n = t[1], r = t[2], a = t[3], o = t[4], s = t[5]) : ({children: n, className: r, disabled: o, value: s, ...a} = e, t[0] = e, t[1] = n, t[2] = r, t[3] = a, t[4] = o, t[5] = s);
+	let l = o === void 0 ? !1 : o, { fullWidth: u, variant: d } = g(), p, h, _;
+	if (t[6] !== r || t[7] !== u || t[8] !== a || t[9] !== d) {
+		let e = c({
+			variant: d,
+			fullWidth: u
+		});
+		p = i, h = a, _ = e.tab({ class: r }), t[6] = r, t[7] = u, t[8] = a, t[9] = d, t[10] = p, t[11] = h, t[12] = _;
+	} else p = t[10], h = t[11], _ = t[12];
+	let v;
+	return t[13] !== p || t[14] !== n || t[15] !== l || t[16] !== h || t[17] !== _ || t[18] !== s ? (v = /* @__PURE__ */ f(p, {
+		...h,
+		className: _,
+		"data-ox-slot": "tabs-tab",
+		disabled: l,
+		value: s,
+		children: n
+	}), t[13] = p, t[14] = n, t[15] = l, t[16] = h, t[17] = _, t[18] = s, t[19] = v) : v = t[19], v;
+}
+function S(e) {
+	let t = (0, m.c)(20), n, r, i, o, s;
+	t[0] === e ? (n = t[1], r = t[2], i = t[3], o = t[4], s = t[5]) : ({children: n, className: r, keepMounted: o, value: s, ...i} = e, t[0] = e, t[1] = n, t[2] = r, t[3] = i, t[4] = o, t[5] = s);
+	let l = o === void 0 ? !1 : o, { fullWidth: u, variant: d } = g(), p, h, _;
+	if (t[6] !== r || t[7] !== u || t[8] !== i || t[9] !== d) {
+		let e = c({
+			variant: d,
+			fullWidth: u
+		});
+		p = a, h = i, _ = e.panel({ class: r }), t[6] = r, t[7] = u, t[8] = i, t[9] = d, t[10] = p, t[11] = h, t[12] = _;
+	} else p = t[10], h = t[11], _ = t[12];
+	let v;
+	return t[13] !== p || t[14] !== n || t[15] !== l || t[16] !== h || t[17] !== _ || t[18] !== s ? (v = /* @__PURE__ */ f(p, {
+		...h,
+		className: _,
+		"data-ox-slot": "tabs-panel",
+		keepMounted: l,
+		value: s,
+		children: n
+	}), t[13] = p, t[14] = n, t[15] = l, t[16] = h, t[17] = _, t[18] = s, t[19] = v) : v = t[19], v;
+}
+function C(e) {
+	let t = (0, m.c)(4), { className: n } = e, { fullWidth: r, orientation: i, variant: a } = g(), o = c({
+		variant: a,
+		fullWidth: r
+	}), l = v(), u = s, h = o.indicator({ class: n }), _ = a !== "underline" && l ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("span", { className: o.fill() }), /* @__PURE__ */ f("span", {
+		className: o.clones(),
+		"data-orientation": i,
+		children: l
+	})] }) : null, y;
+	return t[0] !== u.Indicator || t[1] !== h || t[2] !== _ ? (y = /* @__PURE__ */ f(u.Indicator, {
+		className: h,
+		"data-ox-slot": "tabs-indicator",
+		renderBeforeHydration: !0,
+		children: _
+	}), t[0] = u.Indicator, t[1] = h, t[2] = _, t[3] = y) : y = t[3], y;
+}
+//#endregion
+export { C as OxTabsIndicator, b as OxTabsList, S as OxTabsPanel, y as OxTabsRoot, x as OxTabsTab };

package/dist/components/Tabs/Tabs.styles.d.ts

@@ -0,0 +1,123 @@
+import { VariantProps } from '../../internal/tv';
+export declare const tabsVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        underline: {
+            list: string[];
+            tab: string[];
+            indicator: string[];
+        };
+        pill: {
+            list: string[];
+            tab: string[];
+            indicator: string[];
+            clones: string;
+            clone: string[];
+            fill: string;
+        };
+        inline: {
+            list: string[];
+            tab: string[];
+            indicator: string[];
+            clones: string;
+            clone: string[];
+            fill: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            list: string;
+            tab: string;
+            clone: string;
+        };
+    };
+}, {
+    root: string[];
+    list: string[];
+    tab: string[];
+    panel: string[];
+    indicator: string[];
+    clones: string[];
+    clone: string[];
+    fill: string[];
+}, undefined, {
+    variant: {
+        underline: {
+            list: string[];
+            tab: string[];
+            indicator: string[];
+        };
+        pill: {
+            list: string[];
+            tab: string[];
+            indicator: string[];
+            clones: string;
+            clone: string[];
+            fill: string;
+        };
+        inline: {
+            list: string[];
+            tab: string[];
+            indicator: string[];
+            clones: string;
+            clone: string[];
+            fill: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            list: string;
+            tab: string;
+            clone: string;
+        };
+    };
+}, {
+    root: string[];
+    list: string[];
+    tab: string[];
+    panel: string[];
+    indicator: string[];
+    clones: string[];
+    clone: string[];
+    fill: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        underline: {
+            list: string[];
+            tab: string[];
+            indicator: string[];
+        };
+        pill: {
+            list: string[];
+            tab: string[];
+            indicator: string[];
+            clones: string;
+            clone: string[];
+            fill: string;
+        };
+        inline: {
+            list: string[];
+            tab: string[];
+            indicator: string[];
+            clones: string;
+            clone: string[];
+            fill: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            list: string;
+            tab: string;
+            clone: string;
+        };
+    };
+}, {
+    root: string[];
+    list: string[];
+    tab: string[];
+    panel: string[];
+    indicator: string[];
+    clones: string[];
+    clone: string[];
+    fill: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type TabsVariants = VariantProps<typeof tabsVariants>;

package/dist/components/Tabs/Tabs.styles.js

@@ -0,0 +1,101 @@
+import { tv as e } from "../../internal/tv.js";
+//#region src/components/Tabs/Tabs.styles.ts
+var t = ["ox-horizontal:items-center", "ox-vertical:flex-col ox-vertical:items-stretch"], n = "ox-horizontal:justify-center ox-vertical:justify-start", r = ["inline-flex items-center gap-1.5", "text-body font-medium whitespace-nowrap"], i = "h-7 px-[13px]", a = "h-9 px-4", o = [
+	"absolute inset-0 z-20 overflow-hidden",
+	"pointer-coarse:w-max pointer-coarse:min-w-full",
+	"[clip-path:inset(var(--active-tab-top)_var(--active-tab-right)_var(--active-tab-bottom)_var(--active-tab-left)_round_var(--pill-radius))]",
+	"transition-[clip-path] duration-250 ease-out-quint motion-reduce:transition-none"
+], s = e({
+	slots: {
+		root: [
+			"flex",
+			"ox-horizontal:flex-col ox-horizontal:gap-3.5",
+			"ox-vertical:flex-row ox-vertical:gap-[18px]"
+		],
+		list: [
+			"relative flex",
+			...t,
+			"ox-horizontal:overflow-x-auto",
+			"ox-vertical:overflow-y-auto",
+			"pointer-coarse:[scrollbar-width:none] pointer-coarse:[&::-webkit-scrollbar]:hidden"
+		],
+		tab: [
+			"relative z-10 pointer-coarse:min-h-10",
+			...r,
+			n,
+			"cursor-pointer select-none",
+			"text-fg-muted ox-interactive:hover:text-fg",
+			"transition-colors ease-out-quint",
+			"focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary-ink",
+			"ox-disabled:pointer-events-none ox-disabled:opacity-50"
+		],
+		panel: [
+			"outline-none",
+			"ox-vertical:flex-1 ox-vertical:min-w-0",
+			"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-ink"
+		],
+		indicator: ["pointer-events-none"],
+		clones: ["flex size-full", ...t],
+		clone: [
+			"relative pointer-coarse:min-h-10",
+			...r,
+			n
+		],
+		fill: ["absolute inset-0"]
+	},
+	variants: {
+		variant: {
+			underline: {
+				list: [
+					"gap-0.5 border-line",
+					"ox-horizontal:border-b",
+					"ox-vertical:border-l ox-vertical:min-w-[150px]"
+				],
+				tab: [
+					"rounded-none ox-active:text-fg",
+					"ox-horizontal:h-9 ox-horizontal:px-1 ox-horizontal:mx-2 ox-horizontal:first:ml-0.5",
+					"ox-vertical:h-8 ox-vertical:px-3.5 ox-vertical:ox-active:bg-surface-raised"
+				],
+				indicator: [
+					"absolute z-20 bg-primary-ink",
+					"transition-[translate,width,height] duration-300 ease-out-quint",
+					"ox-horizontal:bottom-0 ox-horizontal:h-0.5 ox-horizontal:rounded-t-[2px]",
+					"ox-horizontal:w-[var(--active-tab-width)] ox-horizontal:translate-x-[var(--active-tab-left)]",
+					"ox-vertical:left-0 ox-vertical:w-0.5 ox-vertical:rounded-r-[2px]",
+					"ox-vertical:h-[var(--active-tab-height)] ox-vertical:translate-y-[var(--active-tab-top)]"
+				]
+			},
+			pill: {
+				list: ["w-fit gap-0.5 p-0.75 border border-line bg-surface-raised rounded-control"],
+				tab: [
+					i,
+					"rounded-sm",
+					"ox-active:shadow-[var(--shadow-1)]"
+				],
+				indicator: [...o, "[--pill-radius:var(--radius-sm)]"],
+				clones: "gap-0.5 p-0.75",
+				clone: [i, "text-fg"],
+				fill: "bg-card"
+			},
+			inline: {
+				list: ["gap-1"],
+				tab: [a, "rounded-full"],
+				indicator: [...o, "[--pill-radius:9999px]"],
+				clones: "gap-1",
+				clone: [a, "text-primary-fg"],
+				fill: "bg-primary"
+			}
+		},
+		fullWidth: { true: {
+			list: "w-full",
+			tab: "flex-1",
+			clone: "flex-1"
+		} }
+	},
+	defaultVariants: {
+		variant: "underline",
+		fullWidth: !1
+	}
+});
+//#endregion
+export { s as tabsVariants };

package/dist/components/Tabs/Tabs.types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { TabsListProps as BaseTabsListProps, TabsPanelProps as BaseTabsPanelProps, TabsRootProps as BaseTabsRootProps, TabsTabProps as BaseTabsTabProps } from '@base-ui/react/tabs';
+import { TabsVariants } from './Tabs.styles';
+type TabValue = string | number;
+interface OxTabsProps extends Omit<BaseTabsRootProps, 'className' | 'value' | 'defaultValue' | 'onValueChange'>, Pick<TabsVariants, 'variant' | 'fullWidth'> {
+    children: ReactNode;
+    className?: string;
+    defaultValue?: TabValue;
+    onValueChange?: (value: TabValue, event: {
+        activationDirection: string;
+    }) => void;
+    value?: TabValue | null;
+}
+interface OxTabsListProps extends Omit<BaseTabsListProps, 'className'> {
+    activateOnFocus?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+interface OxTabsTabProps extends Omit<BaseTabsTabProps, 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+interface OxTabsPanelProps extends Omit<BaseTabsPanelProps, 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+interface OxTabsIndicatorProps {
+    className?: string;
+}
+export type { OxTabsIndicatorProps, OxTabsListProps, OxTabsPanelProps, OxTabsProps, OxTabsTabProps, TabValue, };

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

@@ -0,0 +1,9 @@
+import { OxTabsIndicator, OxTabsList, OxTabsPanel, OxTabsRoot, OxTabsTab } from './Tabs';
+declare const OxTabs: typeof OxTabsRoot & {
+    List: typeof OxTabsList;
+    Tab: typeof OxTabsTab;
+    Panel: typeof OxTabsPanel;
+    Indicator: typeof OxTabsIndicator;
+};
+export { OxTabs };
+export type { OxTabsIndicatorProps, OxTabsListProps, OxTabsPanelProps, OxTabsProps, OxTabsTabProps, TabValue, } from './Tabs.types';

package/dist/components/Tabs/index.js

@@ -0,0 +1,10 @@
+import { OxTabsIndicator as e, OxTabsList as t, OxTabsPanel as n, OxTabsRoot as r, OxTabsTab as i } from "./Tabs.js";
+//#region src/components/Tabs/index.ts
+var a = Object.assign(r, {
+	List: t,
+	Tab: i,
+	Panel: n,
+	Indicator: e
+});
+//#endregion
+export { a as OxTabs };

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,5 @@
+import { OxTextareaAddonProps, OxTextareaGroupProps, OxTextareaProps } from './Textarea.types';
+declare function OxTextareaBase({ autoResize, className, defaultValue, disabled, maxRows, minRows, onChange, readOnly, resize, rows, value, ...props }: OxTextareaProps): import("react").JSX.Element;
+declare function OxTextareaGroup({ children, className, disabled, invalid, onMouseDown, readOnly, render, ...props }: OxTextareaGroupProps): import("react").JSX.Element;
+declare function OxTextareaAddon({ align, className, render, variant, ...props }: OxTextareaAddonProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export { OxTextareaAddon, OxTextareaBase, OxTextareaGroup };