@noxickon/onyx 5.0.2 → 6.1.0

package/dist/components/BlurSwitch/BlurSwitch.js

@@ -0,0 +1,61 @@
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { createCompoundContext as t } from "../../internal/context/createCompoundContext/createCompoundContext.js";
+import { useRender as n } from "../../node_modules/@base-ui/react/use-render/useRender.js";
+import { OxButton as r } from "../Button/Button.js";
+import { blurSwitchVariants as i } from "./BlurSwitch.styles.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/BlurSwitch/BlurSwitch.tsx
+var o = e(), { Provider: s, useRequiredContext: c } = t("OxBlurSwitch");
+function l(e) {
+	let t = (0, o.c)(32), n, c, l, u;
+	t[0] === e ? (n = t[1], c = t[2], l = t[3], u = t[4]) : ({children: n, className: c, value: u, ...l} = e, t[0] = e, t[1] = n, t[2] = c, t[3] = l, t[4] = u);
+	let d, f, p, m, h, g, _, v;
+	if (t[5] !== c || t[6] !== l || t[7] !== u) {
+		let e = i();
+		f = s, t[16] === u ? v = t[17] : (v = { value: u }, t[16] = u, t[17] = v), d = r, m = "blur-switch", h = l, g = e.root({ class: c }), _ = u, p = e.stack(), t[5] = c, t[6] = l, t[7] = u, t[8] = d, t[9] = f, t[10] = p, t[11] = m, t[12] = h, t[13] = g, t[14] = _, t[15] = v;
+	} else d = t[8], f = t[9], p = t[10], m = t[11], h = t[12], g = t[13], _ = t[14], v = t[15];
+	let y;
+	t[18] !== n || t[19] !== p ? (y = /* @__PURE__ */ a("span", {
+		className: p,
+		"data-ox-slot": "blur-switch-stack",
+		children: n
+	}), t[18] = n, t[19] = p, t[20] = y) : y = t[20];
+	let b;
+	t[21] !== d || t[22] !== m || t[23] !== h || t[24] !== g || t[25] !== _ || t[26] !== y ? (b = /* @__PURE__ */ a(d, {
+		"data-ox-slot": m,
+		...h,
+		className: g,
+		"data-active-value": _,
+		children: y
+	}), t[21] = d, t[22] = m, t[23] = h, t[24] = g, t[25] = _, t[26] = y, t[27] = b) : b = t[27];
+	let x;
+	return t[28] !== f || t[29] !== v || t[30] !== b ? (x = /* @__PURE__ */ a(f, {
+		value: v,
+		children: b
+	}), t[28] = f, t[29] = v, t[30] = b, t[31] = x) : x = t[31], x;
+}
+function u(e) {
+	let t = (0, o.c)(26), r, s, l, u, d;
+	t[0] === e ? (r = t[1], s = t[2], l = t[3], u = t[4], d = t[5]) : ({children: r, className: s, render: u, value: d, ...l} = e, t[0] = e, t[1] = r, t[2] = s, t[3] = l, t[4] = u, t[5] = d);
+	let f = c("OxBlurSwitch.Item").value === d, p, m, h, g, _;
+	if (t[6] !== s || t[7] !== f || t[8] !== l || t[9] !== u) {
+		let e = i({ active: f });
+		_ = n, t[15] === u ? g = t[16] : (g = u ?? /* @__PURE__ */ a("span", {}), t[15] = u, t[16] = g), p = l, m = !f, h = e.item({ class: s }), t[6] = s, t[7] = f, t[8] = l, t[9] = u, t[10] = p, t[11] = m, t[12] = h, t[13] = g, t[14] = _;
+	} else p = t[10], m = t[11], h = t[12], g = t[13], _ = t[14];
+	let v = f ? "" : void 0, y;
+	t[17] !== r || t[18] !== p || t[19] !== m || t[20] !== h || t[21] !== v ? (y = {
+		...p,
+		"aria-hidden": m,
+		className: h,
+		"data-active": v,
+		"data-ox-slot": "blur-switch-item",
+		children: r
+	}, t[17] = r, t[18] = p, t[19] = m, t[20] = h, t[21] = v, t[22] = y) : y = t[22];
+	let b;
+	return t[23] !== g || t[24] !== y ? (b = {
+		render: g,
+		props: y
+	}, t[23] = g, t[24] = y, t[25] = b) : b = t[25], _(b);
+}
+//#endregion
+export { u as OxBlurSwitchItem, l as OxBlurSwitchRoot };

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

@@ -0,0 +1,42 @@
+import { VariantProps } from '../../internal/tv';
+export declare const blurSwitchVariants: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    stack: string[];
+    item: string[];
+}, undefined, {
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    stack: string[];
+    item: string[];
+}, import('tailwind-variants').TVReturnType<{
+    active: {
+        true: {
+            item: string;
+        };
+        false: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    stack: string[];
+    item: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type BlurSwitchVariants = VariantProps<typeof blurSwitchVariants>;

package/dist/components/BlurSwitch/BlurSwitch.styles.js

@@ -0,0 +1,19 @@
+import { tv as e } from "../../internal/tv.js";
+//#region src/components/BlurSwitch/BlurSwitch.styles.ts
+var t = e({
+	slots: {
+		root: "overflow-hidden",
+		stack: ["relative inline-grid", "[&>*]:[grid-area:1/1]"],
+		item: [
+			"inline-flex items-center justify-center gap-1.5",
+			"transition-[opacity,filter,scale] duration-180 ease-out-quint",
+			"motion-reduce:transition-[opacity]"
+		]
+	},
+	variants: { active: {
+		true: { item: "opacity-100 blur-0 scale-100" },
+		false: { item: "opacity-0 blur-xs scale-98 pointer-events-none" }
+	} }
+});
+//#endregion
+export { t as blurSwitchVariants };

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { OxButtonProps } from '../Button';
+interface OxBlurSwitchProps extends Omit<OxButtonProps, 'children' | 'value'> {
+    children: ReactNode;
+    value: string;
+}
+interface OxBlurSwitchItemProps extends Omit<useRender.ComponentProps<'span'>, 'children'> {
+    children: ReactNode;
+    value: string;
+}
+export type { OxBlurSwitchItemProps, OxBlurSwitchProps };

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

@@ -0,0 +1,6 @@
+import { OxBlurSwitchItem, OxBlurSwitchRoot } from './BlurSwitch';
+declare const OxBlurSwitch: typeof OxBlurSwitchRoot & {
+    Item: typeof OxBlurSwitchItem;
+};
+export { OxBlurSwitch };
+export type { OxBlurSwitchItemProps, OxBlurSwitchProps } from './BlurSwitch.types';

package/dist/components/BlurSwitch/index.js

@@ -0,0 +1,5 @@
+import { OxBlurSwitchItem as e, OxBlurSwitchRoot as t } from "./BlurSwitch.js";
+//#region src/components/BlurSwitch/index.ts
+var n = Object.assign(t, { Item: e });
+//#endregion
+export { n as OxBlurSwitch };

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,4 @@
+import { OxBreadcrumbItemProps, OxBreadcrumbProps } from './Breadcrumb.types';
+declare function OxBreadcrumbItem({ children, className, current, disabled, href, render, ...props }: OxBreadcrumbItemProps): import("react").JSX.Element;
+declare function OxBreadcrumbRoot({ 'aria-label': ariaLabel, children, className, ellipsisLabel, itemsAfterCollapse, itemsBeforeCollapse, maxItems, render, separator, ...props }: OxBreadcrumbProps): import("react").JSX.Element;
+export { OxBreadcrumbItem, OxBreadcrumbRoot };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,145 @@
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { createCompoundContext as t } from "../../internal/context/createCompoundContext/createCompoundContext.js";
+import { useRender as n } from "../../node_modules/@base-ui/react/use-render/useRender.js";
+import { OxDropdown as r } from "../Dropdown/index.js";
+import { breadcrumbVariants as i } from "./Breadcrumb.styles.js";
+import { Children as a, isValidElement as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ChevronRight as l, MoreHorizontal as u } from "lucide-react";
+//#region src/components/Breadcrumb/Breadcrumb.tsx
+var d = e(), { Provider: f, useRequiredContext: p } = t("OxBreadcrumb");
+function m(e) {
+	let t = (0, d.c)(46), r, i, a, o, c, l, u;
+	t[0] === e ? (r = t[1], i = t[2], a = t[3], o = t[4], c = t[5], l = t[6], u = t[7]) : ({children: r, className: i, current: l, disabled: u, href: a, render: c, ...o} = e, t[0] = e, t[1] = r, t[2] = i, t[3] = a, t[4] = o, t[5] = c, t[6] = l, t[7] = u);
+	let f = l === void 0 ? !1 : l, m = u === void 0 ? !1 : u, { slots: h } = p(), g = !f && !m && (a !== void 0 || c !== void 0), _ = !f && !m && !g, v;
+	t[8] !== i || t[9] !== h ? (v = h.link({ class: i }), t[8] = i, t[9] = h, t[10] = v) : v = t[10];
+	let y = v;
+	if (f) {
+		let e;
+		t[11] !== i || t[12] !== h ? (e = h.page({ class: i }), t[11] = i, t[12] = h, t[13] = e) : e = t[13], y = e;
+	} else if (_) {
+		let e;
+		t[14] !== i || t[15] !== h ? (e = h.staticCrumb({ class: i }), t[14] = i, t[15] = h, t[16] = e) : e = t[16], y = e;
+	}
+	let b;
+	t[17] === g ? b = t[18] : (b = s(g ? "a" : "span", {}), t[17] = g, t[18] = b);
+	let x = b, S;
+	t[19] !== x || t[20] !== m || t[21] !== c ? (S = m ? /* @__PURE__ */ s("span", {}) : c ?? x, t[19] = x, t[20] = m, t[21] = c, t[22] = S) : S = t[22];
+	let C = S, w;
+	t[23] !== a || t[24] !== g ? (w = g && a !== void 0 && { href: a }, t[23] = a, t[24] = g, t[25] = w) : w = t[25];
+	let T;
+	t[26] === f ? T = t[27] : (T = f && {
+		"aria-current": "page",
+		"data-current": ""
+	}, t[26] = f, t[27] = T);
+	let E;
+	t[28] === m ? E = t[29] : (E = m && {
+		"aria-disabled": !0,
+		"data-disabled": ""
+	}, t[28] = m, t[29] = E);
+	let D = f ? "breadcrumb-page" : "breadcrumb-link", O;
+	t[30] !== r || t[31] !== y || t[32] !== o || t[33] !== w || t[34] !== T || t[35] !== E || t[36] !== D ? (O = {
+		...o,
+		...w,
+		...T,
+		...E,
+		className: y,
+		"data-ox-slot": D,
+		children: r
+	}, t[30] = r, t[31] = y, t[32] = o, t[33] = w, t[34] = T, t[35] = E, t[36] = D, t[37] = O) : O = t[37];
+	let k;
+	t[38] !== C || t[39] !== O ? (k = {
+		render: C,
+		props: O
+	}, t[38] = C, t[39] = O, t[40] = k) : k = t[40];
+	let A = n(k), j;
+	t[41] === h ? j = t[42] : (j = h.item(), t[41] = h, t[42] = j);
+	let M;
+	return t[43] !== A || t[44] !== j ? (M = /* @__PURE__ */ s("li", {
+		className: j,
+		"data-ox-slot": "breadcrumb-item",
+		children: A
+	}), t[43] = A, t[44] = j, t[45] = M) : M = t[45], M;
+}
+function h(e) {
+	return o(e) && e.type === m;
+}
+function g() {
+	let e = (0, d.c)(5), { separator: t, slots: n } = p(), r;
+	e[0] === n ? r = e[1] : (r = n.separator(), e[0] = n, e[1] = r);
+	let i;
+	return e[2] !== t || e[3] !== r ? (i = /* @__PURE__ */ s("li", {
+		"aria-hidden": "true",
+		className: r,
+		"data-ox-slot": "breadcrumb-separator",
+		children: t
+	}), e[2] = t, e[3] = r, e[4] = i) : i = e[4], i;
+}
+function _(e) {
+	let t = (0, d.c)(18), { items: n } = e, { ellipsisLabel: i, slots: a } = p(), o;
+	t[0] === a ? o = t[1] : (o = a.item(), t[0] = a, t[1] = o);
+	let l;
+	t[2] === a ? l = t[3] : (l = a.ellipsis(), t[2] = a, t[3] = l);
+	let f;
+	t[4] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ s(u, {}), t[4] = f) : f = t[4];
+	let m;
+	t[5] !== i || t[6] !== l ? (m = /* @__PURE__ */ s(r.Trigger, { children: /* @__PURE__ */ s("button", {
+		"aria-label": i,
+		className: l,
+		"data-ox-slot": "breadcrumb-ellipsis",
+		type: "button",
+		children: f
+	}) }), t[5] = i, t[6] = l, t[7] = m) : m = t[7];
+	let h;
+	t[8] === n ? h = t[9] : (h = n.map(v), t[8] = n, t[9] = h);
+	let g;
+	t[10] === h ? g = t[11] : (g = /* @__PURE__ */ s(r.Content, { children: h }), t[10] = h, t[11] = g);
+	let _;
+	t[12] !== m || t[13] !== g ? (_ = /* @__PURE__ */ c(r, { children: [m, g] }), t[12] = m, t[13] = g, t[14] = _) : _ = t[14];
+	let y;
+	return t[15] !== o || t[16] !== _ ? (y = /* @__PURE__ */ s("li", {
+		className: o,
+		"data-ox-slot": "breadcrumb-item",
+		children: _
+	}), t[15] = o, t[16] = _, t[17] = y) : y = t[17], y;
+}
+function v(e) {
+	return e.props.href === void 0 ? /* @__PURE__ */ s(r.Item, { children: e.props.children }, e.key) : /* @__PURE__ */ s(r.Item, {
+		href: e.props.href,
+		children: e.props.children
+	}, e.key);
+}
+function y({ "aria-label": e = "Breadcrumb", children: t, className: r, ellipsisLabel: o = "Show hidden breadcrumbs", itemsAfterCollapse: c = 1, itemsBeforeCollapse: u = 1, maxItems: d, render: p, separator: m = /* @__PURE__ */ s(l, {}), ...v }) {
+	let y = i(), b = a.toArray(t).filter(h), x = b.length, S = Math.max(0, u), C = Math.max(0, c), w = d !== void 0 && x > d && x > S + C ? [
+		...b.slice(0, S),
+		/* @__PURE__ */ s(_, { items: b.slice(S, x - C) }, "ox-breadcrumb-ellipsis"),
+		...b.slice(x - C)
+	] : b, T = [];
+	w.forEach((e, t) => {
+		T.push(e), t < w.length - 1 && T.push(/* @__PURE__ */ s(g, {}, `ox-breadcrumb-sep-${e.key}`));
+	});
+	let E = n({
+		render: p ?? /* @__PURE__ */ s("nav", {}),
+		props: {
+			...v,
+			"aria-label": e,
+			className: y.root({ class: r }),
+			"data-ox-slot": "breadcrumb",
+			children: /* @__PURE__ */ s("ol", {
+				className: y.list(),
+				"data-ox-slot": "breadcrumb-list",
+				children: T
+			})
+		}
+	});
+	return /* @__PURE__ */ s(f, {
+		value: {
+			ellipsisLabel: o,
+			separator: m,
+			slots: y
+		},
+		children: E
+	});
+}
+//#endregion
+export { m as OxBreadcrumbItem, y as OxBreadcrumbRoot };

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

@@ -0,0 +1,69 @@
+import { VariantProps } from '../../internal/tv';
+export declare const breadcrumbVariants: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            link?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            item?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+            page?: import('tailwind-merge').ClassNameValue;
+            ellipsis?: import('tailwind-merge').ClassNameValue;
+            staticCrumb?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            link?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            item?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+            page?: import('tailwind-merge').ClassNameValue;
+            ellipsis?: import('tailwind-merge').ClassNameValue;
+            staticCrumb?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string[];
+    item: string;
+    link: string[];
+    staticCrumb: string[];
+    page: string[];
+    separator: string[];
+    ellipsis: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            link?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            item?: import('tailwind-merge').ClassNameValue;
+            list?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+            page?: import('tailwind-merge').ClassNameValue;
+            ellipsis?: import('tailwind-merge').ClassNameValue;
+            staticCrumb?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string[];
+    item: string;
+    link: string[];
+    staticCrumb: string[];
+    page: string[];
+    separator: string[];
+    ellipsis: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string;
+    list: string[];
+    item: string;
+    link: string[];
+    staticCrumb: string[];
+    page: string[];
+    separator: string[];
+    ellipsis: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type BreadcrumbVariants = VariantProps<typeof breadcrumbVariants>;

package/dist/components/Breadcrumb/Breadcrumb.styles.js

@@ -0,0 +1,32 @@
+import { tv as e } from "../../internal/tv.js";
+//#region src/components/Breadcrumb/Breadcrumb.styles.ts
+var t = [
+	"inline-block max-w-55 truncate rounded-sm px-2 py-1 no-underline",
+	"pointer-coarse:min-h-9 pointer-coarse:max-w-45 pointer-coarse:content-center",
+	"[&_svg]:me-1.5 [&_svg]:inline [&_svg]:size-3.5 [&_svg]:align-text-bottom [&_svg]:opacity-70"
+], n = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-ink", r = e({ slots: {
+	root: "",
+	list: [
+		"flex flex-wrap items-center gap-px text-body text-fg-subtle",
+		"pointer-coarse:flex-nowrap pointer-coarse:overflow-x-auto pointer-coarse:text-sm",
+		"pointer-coarse:[scrollbar-width:none] pointer-coarse:[&::-webkit-scrollbar]:hidden"
+	],
+	item: "flex min-w-0 items-center",
+	link: [
+		...t,
+		"text-fg-muted transition-colors ox-engaged:bg-surface-raised ox-engaged:text-fg",
+		n,
+		"ox-disabled:pointer-events-none ox-disabled:opacity-50"
+	],
+	staticCrumb: [...t, "text-fg-muted"],
+	page: [...t, "font-medium text-fg"],
+	separator: ["flex shrink-0 select-none items-center px-px text-fg-subtle", "[&_svg]:size-3.5 [&_svg]:shrink-0 rtl:[&_svg]:-scale-x-100"],
+	ellipsis: [
+		"inline-flex size-6 cursor-pointer items-center justify-center rounded-sm pointer-coarse:size-9",
+		"text-fg-muted transition-colors ox-engaged:bg-surface-raised ox-engaged:text-fg",
+		n,
+		"[&_svg]:size-4 [&_svg]:shrink-0"
+	]
+} });
+//#endregion
+export { r as breadcrumbVariants };

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+interface OxBreadcrumbProps extends Omit<useRender.ComponentProps<'nav'>, 'children'> {
+    children: ReactNode;
+    ellipsisLabel?: string;
+    itemsAfterCollapse?: number;
+    itemsBeforeCollapse?: number;
+    maxItems?: number;
+    separator?: ReactNode;
+}
+interface OxBreadcrumbItemProps extends Omit<useRender.ComponentProps<'a'>, 'children'> {
+    children: ReactNode;
+    current?: boolean;
+    disabled?: boolean;
+}
+export type { OxBreadcrumbItemProps, OxBreadcrumbProps };

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

@@ -0,0 +1,6 @@
+import { OxBreadcrumbItem, OxBreadcrumbRoot } from './Breadcrumb';
+declare const OxBreadcrumb: typeof OxBreadcrumbRoot & {
+    Item: typeof OxBreadcrumbItem;
+};
+export { OxBreadcrumb };
+export type { OxBreadcrumbItemProps, OxBreadcrumbProps } from './Breadcrumb.types';

package/dist/components/Breadcrumb/index.js

@@ -0,0 +1,5 @@
+import { OxBreadcrumbItem as e, OxBreadcrumbRoot as t } from "./Breadcrumb.js";
+//#region src/components/Breadcrumb/index.ts
+var n = Object.assign(t, { Item: e });
+//#endregion
+export { n as OxBreadcrumb };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import { OxButtonProps } from './Button.types';
+declare function OxButton({ children, className, disabled, isIconOnly, loading, size: _size, variant, ...props }: OxButtonProps): import("react").JSX.Element;
+export { OxButton };

package/dist/components/Button/Button.js

@@ -0,0 +1,48 @@
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { Button as t } from "../../node_modules/@base-ui/react/button/Button.js";
+import { buttonVariants as n } from "./Button.styles.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { LoaderCircle as a } from "lucide-react";
+//#region src/components/Button/Button.tsx
+var o = e();
+function s(e) {
+	let s = (0, o.c)(39), c, l, u, d, f, p, m;
+	if (s[0] !== e) {
+		let { children: t, className: n, disabled: r, isIconOnly: i, loading: a, size: o, variant: h, ...g } = e;
+		c = t, l = n, d = r, f = i, p = a, m = h, u = g, s[0] = e, s[1] = c, s[2] = l, s[3] = u, s[4] = d, s[5] = f, s[6] = p, s[7] = m;
+	} else c = s[1], l = s[2], u = s[3], d = s[4], f = s[5], p = s[6], m = s[7];
+	let h = d === void 0 ? !1 : d, g = f === void 0 ? !1 : f, _ = p === void 0 ? !1 : p, v = m === void 0 ? "primary" : m, y = h || _, b = v === "link-inline", x, S, C, w, T, E, D, O, k, A;
+	if (s[8] !== l || s[9] !== y || s[10] !== g || s[11] !== b || s[12] !== _ || s[13] !== u || s[14] !== v) {
+		let e = n({
+			variant: v,
+			isIconOnly: b ? !1 : g
+		});
+		x = t, D = "button", O = u, k = _ || void 0, A = e.base({ class: l }), S = _ || void 0, C = y, w = _, T = _ ? /* @__PURE__ */ r("span", {
+			className: e.spinner(),
+			"data-ox-slot": "button-spinner",
+			children: /* @__PURE__ */ r(a, {
+				"aria-hidden": "true",
+				className: e.spinnerIcon()
+			})
+		}) : null, E = e.content(), s[8] = l, s[9] = y, s[10] = g, s[11] = b, s[12] = _, s[13] = u, s[14] = v, s[15] = x, s[16] = S, s[17] = C, s[18] = w, s[19] = T, s[20] = E, s[21] = D, s[22] = O, s[23] = k, s[24] = A;
+	} else x = s[15], S = s[16], C = s[17], w = s[18], T = s[19], E = s[20], D = s[21], O = s[22], k = s[23], A = s[24];
+	let j;
+	s[25] !== c || s[26] !== E ? (j = /* @__PURE__ */ r("span", {
+		className: E,
+		"data-ox-slot": "button-content",
+		children: c
+	}), s[25] = c, s[26] = E, s[27] = j) : j = s[27];
+	let M;
+	return s[28] !== x || s[29] !== S || s[30] !== C || s[31] !== w || s[32] !== T || s[33] !== j || s[34] !== D || s[35] !== O || s[36] !== k || s[37] !== A ? (M = /* @__PURE__ */ i(x, {
+		"data-ox-slot": D,
+		...O,
+		"aria-busy": k,
+		className: A,
+		"data-loading": S,
+		disabled: C,
+		focusableWhenDisabled: w,
+		children: [T, j]
+	}), s[28] = x, s[29] = S, s[30] = C, s[31] = w, s[32] = T, s[33] = j, s[34] = D, s[35] = O, s[36] = k, s[37] = A, s[38] = M) : M = s[38], M;
+}
+//#endregion
+export { s as OxButton };

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

@@ -0,0 +1,135 @@
+import { VariantProps } from '../../internal/tv';
+export declare const buttonVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            base: string[];
+        };
+        secondary: {
+            base: string[];
+        };
+        outline: {
+            base: string[];
+        };
+        ghost: {
+            base: string[];
+        };
+        'soft-primary': {
+            base: string[];
+        };
+        destructive: {
+            base: string[];
+        };
+        'soft-destructive': {
+            base: string[];
+        };
+        link: {
+            base: string[];
+        };
+        'link-secondary': {
+            base: string[];
+        };
+        'link-inline': {
+            base: string[];
+            content: string;
+        };
+    };
+    isIconOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    content: string[];
+    spinner: string;
+    spinnerIcon: string;
+}, undefined, {
+    variant: {
+        primary: {
+            base: string[];
+        };
+        secondary: {
+            base: string[];
+        };
+        outline: {
+            base: string[];
+        };
+        ghost: {
+            base: string[];
+        };
+        'soft-primary': {
+            base: string[];
+        };
+        destructive: {
+            base: string[];
+        };
+        'soft-destructive': {
+            base: string[];
+        };
+        link: {
+            base: string[];
+        };
+        'link-secondary': {
+            base: string[];
+        };
+        'link-inline': {
+            base: string[];
+            content: string;
+        };
+    };
+    isIconOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    content: string[];
+    spinner: string;
+    spinnerIcon: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            base: string[];
+        };
+        secondary: {
+            base: string[];
+        };
+        outline: {
+            base: string[];
+        };
+        ghost: {
+            base: string[];
+        };
+        'soft-primary': {
+            base: string[];
+        };
+        destructive: {
+            base: string[];
+        };
+        'soft-destructive': {
+            base: string[];
+        };
+        link: {
+            base: string[];
+        };
+        'link-secondary': {
+            base: string[];
+        };
+        'link-inline': {
+            base: string[];
+            content: string;
+        };
+    };
+    isIconOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    content: string[];
+    spinner: string;
+    spinnerIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;