@noxickon/onyx 5.0.2 → 6.1.0

package/dist/components/Button/Button.styles.js

@@ -0,0 +1,55 @@
+import { tv as e } from "../../internal/tv.js";
+import { solidShadow as t } from "../../internal/styles/solidShadow.js";
+//#region src/components/Button/Button.styles.ts
+var n = ["h-auto rounded-sm px-0 tracking-normal shadow-none active:scale-100"], r = e({
+	slots: {
+		base: [
+			"group/button relative inline-flex items-center justify-center gap-2",
+			"cursor-pointer whitespace-nowrap font-medium tracking-[-0.01em]",
+			"h-control px-control text-control",
+			"rounded-control border border-transparent",
+			"[&_svg:not([class*=size-])]:size-icon",
+			"transition active:scale-98 will-change-transform",
+			"outline-primary-ink focus-visible:outline-2 focus-visible:outline-offset-2",
+			"ox-disabled:pointer-events-none ox-disabled:opacity-50 ox-disabled:active:scale-100",
+			"ox-loading:opacity-100"
+		],
+		content: ["inline-flex min-w-0 items-center gap-2 truncate", "group-data-[loading]/button:[&>svg:first-child]:hidden"],
+		spinner: "inline-flex shrink-0 items-center justify-center",
+		spinnerIcon: "size-icon animate-spin"
+	},
+	variants: {
+		variant: {
+			primary: { base: [
+				"bg-[var(--color-primary-700)] text-primary-fg",
+				t,
+				"ox-engaged:bg-[var(--color-primary-600)]"
+			] },
+			secondary: { base: ["bg-surface-raised text-fg-muted border-line", "ox-engaged:bg-surface-high ox-engaged:text-fg ox-engaged:border-line-strong"] },
+			outline: { base: ["text-fg-muted border-line", "ox-engaged:bg-surface-raised ox-engaged:text-fg ox-engaged:border-line-strong"] },
+			ghost: { base: ["text-fg-muted", "ox-engaged:bg-surface-raised ox-engaged:text-fg"] },
+			"soft-primary": { base: ["bg-primary-soft text-primary-soft-fg", "ox-engaged:bg-[color-mix(in_oklab,var(--primary-soft),var(--fg)_8%)]"] },
+			destructive: { base: [
+				"bg-danger-solid text-danger-solid-fg",
+				t,
+				"ox-engaged:bg-[color-mix(in_oklab,var(--danger-solid),var(--fg-on-solid)_12%)]"
+			] },
+			"soft-destructive": { base: ["bg-danger-soft text-danger-soft-fg", "ox-engaged:bg-[color-mix(in_oklab,var(--danger-soft),var(--fg)_8%)]"] },
+			link: { base: [...n, "text-primary-ink underline-offset-2 ox-engaged:underline"] },
+			"link-secondary": { base: [...n, "text-fg-muted underline-offset-2 ox-engaged:text-fg ox-engaged:underline"] },
+			"link-inline": {
+				base: [
+					"inline-block rounded-sm border-0 p-0 align-baseline shadow-none",
+					"h-auto font-normal whitespace-normal tracking-normal text-[length:inherit]",
+					"text-primary-ink underline underline-offset-2",
+					"ox-engaged:text-primary-soft-fg active:scale-100"
+				],
+				content: "inline gap-0 overflow-visible whitespace-normal"
+			}
+		},
+		isIconOnly: { true: { base: "aspect-square p-0" } }
+	},
+	defaultVariants: { variant: "primary" }
+});
+//#endregion
+export { r as buttonVariants };

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

@@ -0,0 +1,14 @@
+import { ButtonProps as BaseButtonProps } from '@base-ui/react/button';
+import { ButtonVariants } from './Button.styles';
+interface OxButtonProps extends Omit<BaseButtonProps, 'className'>, ButtonVariants {
+    className?: string;
+    isIconOnly?: boolean;
+    loading?: boolean;
+    /**
+     * @deprecated The size axis was removed in the v6 restyle — the button renders at
+     * the single control tier. This prop is accepted but ignored, kept only so
+     * not-yet-migrated consumers keep compiling. It will be removed once they are.
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+export type { OxButtonProps };

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

@@ -0,0 +1,2 @@
+export { OxButton } from './Button';
+export type { OxButtonProps } from './Button.types';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,9 @@
+import { OxCardContentProps, OxCardDescriptionProps, OxCardEyebrowProps, OxCardFooterProps, OxCardHeaderProps, OxCardProps, OxCardTitleProps } from './Card.types';
+declare function OxCardRoot({ children, className, interactive, render, selected, variant, ...props }: OxCardProps): import("react").JSX.Element;
+declare function OxCardHeader({ children, className, render, ...props }: OxCardHeaderProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCardEyebrow({ children, className, render, ...props }: OxCardEyebrowProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCardTitle({ children, className, id: idProperty, render, ...props }: OxCardTitleProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCardDescription({ children, className, id: idProperty, render, ...props }: OxCardDescriptionProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCardContent({ children, className, render, ...props }: OxCardContentProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCardFooter({ children, className, render, ...props }: OxCardFooterProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export { OxCardContent, OxCardDescription, OxCardEyebrow, OxCardFooter, OxCardHeader, OxCardRoot, OxCardTitle, };

package/dist/components/Card/Card.js

@@ -0,0 +1,180 @@
+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 { cardVariants as r } from "./Card.styles.js";
+import { useEffect as i, useId as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/Card/Card.tsx
+var c = e(), { Provider: l, useRequiredContext: u } = t("OxCard");
+function d(e) {
+	let t = (0, c.c)(51), i, a, u, d, f, p, m;
+	t[0] === e ? (i = t[1], a = t[2], u = t[3], d = t[4], f = t[5], p = t[6], m = t[7]) : ({children: i, className: a, interactive: u, render: f, selected: p, variant: m, ...d} = e, t[0] = e, t[1] = i, t[2] = a, t[3] = u, t[4] = d, t[5] = f, t[6] = p, t[7] = m);
+	let h = m === void 0 ? "outlined" : m, [g, _] = o(void 0), [v, y] = o(void 0), b, x, S, C, w, T, E, D;
+	if (t[8] !== a || t[9] !== v || t[10] !== u || t[11] !== d || t[12] !== f || t[13] !== p || t[14] !== g || t[15] !== h) {
+		let e = r({
+			variant: h,
+			interactive: u,
+			selected: p
+		});
+		D = n, t[24] === f ? E = t[25] : (E = f ?? /* @__PURE__ */ s("div", {}), t[24] = f, t[25] = E), b = d, t[26] === g ? x = t[27] : (x = g && {
+			role: "region",
+			"aria-labelledby": g
+		}, t[26] = g, t[27] = x), t[28] === v ? S = t[29] : (S = v && { "aria-describedby": v }, t[28] = v, t[29] = S), t[30] === u ? C = t[31] : (C = u && { tabIndex: 0 }, t[30] = u, t[31] = C), t[32] === p ? w = t[33] : (w = p && { "data-selected": "" }, t[32] = p, t[33] = w), T = e.root({ class: a }), t[8] = a, t[9] = v, t[10] = u, t[11] = d, t[12] = f, t[13] = p, t[14] = g, t[15] = h, t[16] = b, t[17] = x, t[18] = S, t[19] = C, t[20] = w, t[21] = T, t[22] = E, t[23] = D;
+	} else b = t[16], x = t[17], S = t[18], C = t[19], w = t[20], T = t[21], E = t[22], D = t[23];
+	let O;
+	t[34] !== i || t[35] !== b || t[36] !== x || t[37] !== S || t[38] !== C || t[39] !== w || t[40] !== T ? (O = {
+		...b,
+		...x,
+		...S,
+		...C,
+		...w,
+		className: T,
+		"data-ox-slot": "card",
+		children: i
+	}, t[34] = i, t[35] = b, t[36] = x, t[37] = S, t[38] = C, t[39] = w, t[40] = T, t[41] = O) : O = t[41];
+	let k;
+	t[42] !== O || t[43] !== E ? (k = {
+		render: E,
+		props: O
+	}, t[42] = O, t[43] = E, t[44] = k) : k = t[44];
+	let A = D(k), j;
+	t[45] !== v || t[46] !== g ? (j = {
+		titleId: g,
+		setTitleId: _,
+		descriptionId: v,
+		setDescriptionId: y
+	}, t[45] = v, t[46] = g, t[47] = j) : j = t[47];
+	let M;
+	return t[48] !== A || t[49] !== j ? (M = /* @__PURE__ */ s(l, {
+		value: j,
+		children: A
+	}), t[48] = A, t[49] = j, t[50] = M) : M = t[50], M;
+}
+function f(e) {
+	let t = (0, c.c)(16), i, a, o, l;
+	t[0] === e ? (i = t[1], a = t[2], o = t[3], l = t[4]) : ({children: i, className: a, render: l, ...o} = e, t[0] = e, t[1] = i, t[2] = a, t[3] = o, t[4] = l), u();
+	let d;
+	t[5] === l ? d = t[6] : (d = l ?? /* @__PURE__ */ s("div", {}), t[5] = l, t[6] = d);
+	let f;
+	t[7] === a ? f = t[8] : (f = r().header({ class: a }), t[7] = a, t[8] = f);
+	let p;
+	t[9] !== i || t[10] !== o || t[11] !== f ? (p = {
+		...o,
+		className: f,
+		"data-ox-slot": "card-header",
+		children: i
+	}, t[9] = i, t[10] = o, t[11] = f, t[12] = p) : p = t[12];
+	let m;
+	return t[13] !== d || t[14] !== p ? (m = {
+		render: d,
+		props: p
+	}, t[13] = d, t[14] = p, t[15] = m) : m = t[15], n(m);
+}
+function p(e) {
+	let t = (0, c.c)(16), i, a, o, l;
+	t[0] === e ? (i = t[1], a = t[2], o = t[3], l = t[4]) : ({children: i, className: a, render: l, ...o} = e, t[0] = e, t[1] = i, t[2] = a, t[3] = o, t[4] = l), u();
+	let d;
+	t[5] === l ? d = t[6] : (d = l ?? /* @__PURE__ */ s("span", {}), t[5] = l, t[6] = d);
+	let f;
+	t[7] === a ? f = t[8] : (f = r().eyebrow({ class: a }), t[7] = a, t[8] = f);
+	let p;
+	t[9] !== i || t[10] !== o || t[11] !== f ? (p = {
+		...o,
+		className: f,
+		"data-ox-slot": "card-eyebrow",
+		children: i
+	}, t[9] = i, t[10] = o, t[11] = f, t[12] = p) : p = t[12];
+	let m;
+	return t[13] !== d || t[14] !== p ? (m = {
+		render: d,
+		props: p
+	}, t[13] = d, t[14] = p, t[15] = m) : m = t[15], n(m);
+}
+function m(e) {
+	let t = (0, c.c)(22), o, l, d, f, p;
+	t[0] === e ? (o = t[1], l = t[2], d = t[3], f = t[4], p = t[5]) : ({children: o, className: l, id: d, render: p, ...f} = e, t[0] = e, t[1] = o, t[2] = l, t[3] = d, t[4] = f, t[5] = p);
+	let { setTitleId: m } = u(), h = a(), g = d ?? h, _, v;
+	t[6] !== g || t[7] !== m ? (_ = () => (m(g), () => m(void 0)), v = [g, m], t[6] = g, t[7] = m, t[8] = _, t[9] = v) : (_ = t[8], v = t[9]), i(_, v);
+	let y;
+	t[10] === p ? y = t[11] : (y = p ?? /* @__PURE__ */ s("h3", {}), t[10] = p, t[11] = y);
+	let b;
+	t[12] === l ? b = t[13] : (b = r().title({ class: l }), t[12] = l, t[13] = b);
+	let x;
+	t[14] !== o || t[15] !== g || t[16] !== f || t[17] !== b ? (x = {
+		...f,
+		id: g,
+		className: b,
+		"data-ox-slot": "card-title",
+		children: o
+	}, t[14] = o, t[15] = g, t[16] = f, t[17] = b, t[18] = x) : x = t[18];
+	let S;
+	return t[19] !== y || t[20] !== x ? (S = {
+		render: y,
+		props: x
+	}, t[19] = y, t[20] = x, t[21] = S) : S = t[21], n(S);
+}
+function h(e) {
+	let t = (0, c.c)(22), o, l, d, f, p;
+	t[0] === e ? (o = t[1], l = t[2], d = t[3], f = t[4], p = t[5]) : ({children: o, className: l, id: d, render: p, ...f} = e, t[0] = e, t[1] = o, t[2] = l, t[3] = d, t[4] = f, t[5] = p);
+	let { setDescriptionId: m } = u(), h = a(), g = d ?? h, _, v;
+	t[6] !== g || t[7] !== m ? (_ = () => (m(g), () => m(void 0)), v = [g, m], t[6] = g, t[7] = m, t[8] = _, t[9] = v) : (_ = t[8], v = t[9]), i(_, v);
+	let y;
+	t[10] === p ? y = t[11] : (y = p ?? /* @__PURE__ */ s("p", {}), t[10] = p, t[11] = y);
+	let b;
+	t[12] === l ? b = t[13] : (b = r().description({ class: l }), t[12] = l, t[13] = b);
+	let x;
+	t[14] !== o || t[15] !== g || t[16] !== f || t[17] !== b ? (x = {
+		...f,
+		id: g,
+		className: b,
+		"data-ox-slot": "card-description",
+		children: o
+	}, t[14] = o, t[15] = g, t[16] = f, t[17] = b, t[18] = x) : x = t[18];
+	let S;
+	return t[19] !== y || t[20] !== x ? (S = {
+		render: y,
+		props: x
+	}, t[19] = y, t[20] = x, t[21] = S) : S = t[21], n(S);
+}
+function g(e) {
+	let t = (0, c.c)(16), i, a, o, l;
+	t[0] === e ? (i = t[1], a = t[2], o = t[3], l = t[4]) : ({children: i, className: a, render: l, ...o} = e, t[0] = e, t[1] = i, t[2] = a, t[3] = o, t[4] = l), u();
+	let d;
+	t[5] === l ? d = t[6] : (d = l ?? /* @__PURE__ */ s("div", {}), t[5] = l, t[6] = d);
+	let f;
+	t[7] === a ? f = t[8] : (f = r().content({ class: a }), t[7] = a, t[8] = f);
+	let p;
+	t[9] !== i || t[10] !== o || t[11] !== f ? (p = {
+		...o,
+		className: f,
+		"data-ox-slot": "card-content",
+		children: i
+	}, t[9] = i, t[10] = o, t[11] = f, t[12] = p) : p = t[12];
+	let m;
+	return t[13] !== d || t[14] !== p ? (m = {
+		render: d,
+		props: p
+	}, t[13] = d, t[14] = p, t[15] = m) : m = t[15], n(m);
+}
+function _(e) {
+	let t = (0, c.c)(16), i, a, o, l;
+	t[0] === e ? (i = t[1], a = t[2], o = t[3], l = t[4]) : ({children: i, className: a, render: l, ...o} = e, t[0] = e, t[1] = i, t[2] = a, t[3] = o, t[4] = l), u();
+	let d;
+	t[5] === l ? d = t[6] : (d = l ?? /* @__PURE__ */ s("div", {}), t[5] = l, t[6] = d);
+	let f;
+	t[7] === a ? f = t[8] : (f = r().footer({ class: a }), t[7] = a, t[8] = f);
+	let p;
+	t[9] !== i || t[10] !== o || t[11] !== f ? (p = {
+		...o,
+		className: f,
+		"data-ox-slot": "card-footer",
+		children: i
+	}, t[9] = i, t[10] = o, t[11] = f, t[12] = p) : p = t[12];
+	let m;
+	return t[13] !== d || t[14] !== p ? (m = {
+		render: d,
+		props: p
+	}, t[13] = d, t[14] = p, t[15] = m) : m = t[15], n(m);
+}
+//#endregion
+export { g as OxCardContent, h as OxCardDescription, p as OxCardEyebrow, _ as OxCardFooter, f as OxCardHeader, d as OxCardRoot, m as OxCardTitle };

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

@@ -0,0 +1,102 @@
+import { VariantProps } from '../../internal/tv';
+export declare const cardVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        outlined: {
+            root: string;
+        };
+        elevated: {
+            root: string;
+        };
+        filled: {
+            root: string;
+        };
+        ghost: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string[];
+        };
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    eyebrow: string;
+    header: string;
+    title: string;
+    description: string;
+    content: string;
+    footer: string;
+}, undefined, {
+    variant: {
+        outlined: {
+            root: string;
+        };
+        elevated: {
+            root: string;
+        };
+        filled: {
+            root: string;
+        };
+        ghost: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string[];
+        };
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    eyebrow: string;
+    header: string;
+    title: string;
+    description: string;
+    content: string;
+    footer: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        outlined: {
+            root: string;
+        };
+        elevated: {
+            root: string;
+        };
+        filled: {
+            root: string;
+        };
+        ghost: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string[];
+        };
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    eyebrow: string;
+    header: string;
+    title: string;
+    description: string;
+    content: string;
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CardVariants = VariantProps<typeof cardVariants>;

package/dist/components/Card/Card.styles.js

@@ -0,0 +1,33 @@
+import { tv as e } from "../../internal/tv.js";
+//#region src/components/Card/Card.styles.ts
+var t = e({
+	slots: {
+		root: "flex flex-col rounded-card border border-line bg-card p-4",
+		eyebrow: "mb-1.5 text-3xs font-semibold uppercase tracking-[0.08em] text-fg-subtle",
+		header: "mb-3 flex flex-col",
+		title: "text-sm font-semibold tracking-[-0.01em] text-fg break-words",
+		description: "mt-0.5 text-2xs leading-normal text-fg-subtle",
+		content: "text-body leading-relaxed text-fg-muted",
+		footer: "mt-4 flex flex-wrap items-center justify-end gap-2"
+	},
+	variants: {
+		variant: {
+			outlined: { root: "shadow-[var(--shadow-card)]" },
+			elevated: { root: "shadow-[var(--shadow-2)]" },
+			filled: { root: "bg-card-raised shadow-[var(--shadow-card)]" },
+			ghost: { root: "border-transparent bg-transparent shadow-none p-0" }
+		},
+		interactive: { true: { root: [
+			"cursor-pointer transition ease-out-quint will-change-transform",
+			"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-ink",
+			"hover:-translate-y-0.75 hover:border-line-strong hover:shadow-[var(--shadow-2)]",
+			"focus-visible:-translate-y-0.75 focus-visible:border-line-strong focus-visible:shadow-[var(--shadow-2)]",
+			"ox-console:hover:translate-y-0 ox-console:hover:shadow-none ox-console:hover:bg-card-raised",
+			"ox-console:focus-visible:translate-y-0 ox-console:focus-visible:shadow-none ox-console:focus-visible:bg-card-raised"
+		] } },
+		selected: { true: { root: "border-primary-outline ring-1 ring-primary-outline" } }
+	},
+	defaultVariants: { variant: "outlined" }
+});
+//#endregion
+export { t as cardVariants };

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { CardVariants } from './Card.styles';
+interface OxCardProps extends Pick<CardVariants, 'variant' | 'interactive' | 'selected'>, Omit<useRender.ComponentProps<'div'>, 'role'> {
+    children: ReactNode;
+}
+interface OxCardHeaderProps extends useRender.ComponentProps<'div'> {
+    children: ReactNode;
+}
+interface OxCardEyebrowProps extends useRender.ComponentProps<'span'> {
+    children: ReactNode;
+}
+interface OxCardTitleProps extends useRender.ComponentProps<'h3'> {
+    children: ReactNode;
+}
+interface OxCardDescriptionProps extends useRender.ComponentProps<'p'> {
+    children: ReactNode;
+}
+interface OxCardContentProps extends useRender.ComponentProps<'div'> {
+    children: ReactNode;
+}
+interface OxCardFooterProps extends useRender.ComponentProps<'div'> {
+    children: ReactNode;
+}
+export type { OxCardContentProps, OxCardDescriptionProps, OxCardEyebrowProps, OxCardFooterProps, OxCardHeaderProps, OxCardProps, OxCardTitleProps, };

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

@@ -0,0 +1,11 @@
+import { OxCardContent, OxCardDescription, OxCardEyebrow, OxCardFooter, OxCardHeader, OxCardRoot, OxCardTitle } from './Card';
+declare const OxCard: typeof OxCardRoot & {
+    Header: typeof OxCardHeader;
+    Eyebrow: typeof OxCardEyebrow;
+    Title: typeof OxCardTitle;
+    Description: typeof OxCardDescription;
+    Content: typeof OxCardContent;
+    Footer: typeof OxCardFooter;
+};
+export { OxCard };
+export type { OxCardContentProps, OxCardDescriptionProps, OxCardEyebrowProps, OxCardFooterProps, OxCardHeaderProps, OxCardProps, OxCardTitleProps, } from './Card.types';

package/dist/components/Card/index.js

@@ -0,0 +1,12 @@
+import { OxCardContent as e, OxCardDescription as t, OxCardEyebrow as n, OxCardFooter as r, OxCardHeader as i, OxCardRoot as a, OxCardTitle as o } from "./Card.js";
+//#region src/components/Card/index.ts
+var s = Object.assign(a, {
+	Header: i,
+	Eyebrow: n,
+	Title: o,
+	Description: t,
+	Content: e,
+	Footer: r
+});
+//#endregion
+export { s as OxCard };

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import { OxCheckboxProps } from './Checkbox.types';
+declare function OxCheckbox({ className, invalid, size: _size, ...props }: OxCheckboxProps): import("react").JSX.Element;
+export { OxCheckbox };

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,48 @@
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { CheckboxRoot as t } from "../../node_modules/@base-ui/react/checkbox/root/CheckboxRoot.js";
+import { CheckboxIndicator as n } from "../../node_modules/@base-ui/react/checkbox/indicator/CheckboxIndicator.js";
+import { getFieldControlAttributes as r } from "../../internal/utils/getFieldControlAttributes/getFieldControlAttributes.js";
+import { checkboxVariants as i } from "./Checkbox.styles.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Check as s, Minus as c } from "lucide-react";
+//#region src/components/Checkbox/Checkbox.tsx
+var l = e();
+function u(e) {
+	let u = (0, l.c)(40), d, f, p;
+	if (u[0] !== e) {
+		let { className: t, invalid: n, size: r, ...i } = e;
+		d = t, f = n, p = i, u[0] = e, u[1] = d, u[2] = f, u[3] = p;
+	} else d = u[1], f = u[2], p = u[3];
+	let m, h, g, _, v, y, b, x, S, C, w, T, E;
+	if (u[4] !== d || u[5] !== f || u[6] !== p) {
+		let e = i();
+		g = t, w = p, T = e.root({ class: d }), E = "checkbox", u[20] === f ? v = u[21] : (v = r({ invalid: f }), u[20] = f, u[21] = v), h = n, b = e.indicator(), x = "checkbox-indicator", S = !0, C = /* @__PURE__ */ a(s, {
+			"aria-hidden": "true",
+			className: e.icon({ className: "group-data-indeterminate/checkbox:hidden" }),
+			strokeWidth: 3
+		}), m = c, _ = "true", y = e.icon({ className: "hidden group-data-indeterminate/checkbox:inline-block" }), u[4] = d, u[5] = f, u[6] = p, u[7] = m, u[8] = h, u[9] = g, u[10] = _, u[11] = v, u[12] = y, u[13] = b, u[14] = x, u[15] = S, u[16] = C, u[17] = w, u[18] = T, u[19] = E;
+	} else m = u[7], h = u[8], g = u[9], _ = u[10], v = u[11], y = u[12], b = u[13], x = u[14], S = u[15], C = u[16], w = u[17], T = u[18], E = u[19];
+	let D;
+	u[22] !== m || u[23] !== _ || u[24] !== y ? (D = /* @__PURE__ */ a(m, {
+		"aria-hidden": _,
+		className: y,
+		strokeWidth: 3
+	}), u[22] = m, u[23] = _, u[24] = y, u[25] = D) : D = u[25];
+	let O;
+	u[26] !== h || u[27] !== D || u[28] !== b || u[29] !== x || u[30] !== S || u[31] !== C ? (O = /* @__PURE__ */ o(h, {
+		className: b,
+		"data-ox-slot": x,
+		keepMounted: S,
+		children: [C, D]
+	}), u[26] = h, u[27] = D, u[28] = b, u[29] = x, u[30] = S, u[31] = C, u[32] = O) : O = u[32];
+	let k;
+	return u[33] !== g || u[34] !== v || u[35] !== O || u[36] !== w || u[37] !== T || u[38] !== E ? (k = /* @__PURE__ */ a(g, {
+		...w,
+		className: T,
+		"data-ox-slot": E,
+		...v,
+		children: O
+	}), u[33] = g, u[34] = v, u[35] = O, u[36] = w, u[37] = T, u[38] = E, u[39] = k) : k = u[39], k;
+}
+//#endregion
+export { u as OxCheckbox };

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

@@ -0,0 +1,37 @@
+export declare const checkboxVariants: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            icon?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            icon?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string[];
+    icon: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            icon?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string[];
+    indicator: string[];
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,22 @@
+import { tv as e } from "../../internal/tv.js";
+import { choiceBox as t, choiceControl as n } from "../../internal/styles/choiceControlStyles.js";
+//#region src/components/Checkbox/Checkbox.styles.ts
+var r = e({ slots: {
+	root: [
+		"group/checkbox",
+		...t,
+		...n,
+		"rounded-sm text-transparent",
+		"before:absolute before:inset-[calc(var(--ox-checkbox-hit-inset,_0.5rem)_*_-1)] before:content-['']",
+		"data-checked:border-primary data-checked:bg-primary data-checked:text-primary-fg",
+		"data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-fg"
+	],
+	indicator: [
+		"inline-flex items-center justify-center",
+		"transition-[opacity,scale] duration-150 ease-out-quint motion-reduce:transition-none",
+		"data-unchecked:opacity-0 data-unchecked:scale-75"
+	],
+	icon: "pointer-events-none size-3"
+} });
+//#endregion
+export { r as checkboxVariants };

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

@@ -0,0 +1,7 @@
+import { CheckboxRootProps as BaseCheckboxRootProps } from '@base-ui/react/checkbox';
+export interface OxCheckboxProps extends Omit<BaseCheckboxRootProps, 'className'> {
+    className?: string;
+    invalid?: boolean;
+    /** @deprecated No longer affects rendering — the checkbox is a single 16px size. Will be removed when DataTable is restyled. */
+    size?: 'sm' | 'md' | 'lg';
+}

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

@@ -0,0 +1,2 @@
+export { OxCheckbox } from './Checkbox';
+export type { OxCheckboxProps } from './Checkbox.types';

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,3 @@
+import { OxCheckboxGroupProps } from './CheckboxGroup.types';
+declare function OxCheckboxGroup({ className, orientation, ...props }: OxCheckboxGroupProps): import("react").JSX.Element;
+export { OxCheckboxGroup };

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,23 @@
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { CheckboxGroup as t } from "../../node_modules/@base-ui/react/checkbox-group/CheckboxGroup.js";
+import { checkboxGroupVariants as n } from "./CheckboxGroup.styles.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/CheckboxGroup/CheckboxGroup.tsx
+var i = e();
+function a(e) {
+	let a = (0, i.c)(10), o, s, c;
+	a[0] === e ? (o = a[1], s = a[2], c = a[3]) : ({className: o, orientation: s, ...c} = e, a[0] = e, a[1] = o, a[2] = s, a[3] = c);
+	let l;
+	a[4] !== o || a[5] !== s ? (l = n({
+		orientation: s,
+		class: o
+	}), a[4] = o, a[5] = s, a[6] = l) : l = a[6];
+	let u;
+	return a[7] !== c || a[8] !== l ? (u = /* @__PURE__ */ r(t, {
+		...c,
+		className: l,
+		"data-ox-slot": "checkbox-group"
+	}), a[7] = c, a[8] = l, a[9] = u) : u = a[9], u;
+}
+//#endregion
+export { a as OxCheckboxGroup };

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

@@ -0,0 +1,18 @@
+import { VariantProps } from '../../internal/tv';
+export declare const checkboxGroupVariants: import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, string[], {
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type CheckboxGroupVariants = VariantProps<typeof checkboxGroupVariants>;

package/dist/components/CheckboxGroup/CheckboxGroup.styles.js

@@ -0,0 +1,12 @@
+import { tv as e } from "../../internal/tv.js";
+//#region src/components/CheckboxGroup/CheckboxGroup.styles.ts
+var t = e({
+	base: ["flex", "ox-disabled:cursor-not-allowed"],
+	variants: { orientation: {
+		vertical: "flex-col gap-3",
+		horizontal: "flex-row flex-wrap items-center gap-4.5"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+//#endregion
+export { t as checkboxGroupVariants };

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

@@ -0,0 +1,5 @@
+import { CheckboxGroupProps as BaseCheckboxGroupProps } from '@base-ui/react/checkbox-group';
+import { CheckboxGroupVariants } from './CheckboxGroup.styles';
+export interface OxCheckboxGroupProps extends Omit<BaseCheckboxGroupProps, 'className'>, CheckboxGroupVariants {
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { OxCheckboxGroup } from './CheckboxGroup';
+export type { OxCheckboxGroupProps } from './CheckboxGroup.types';

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,3 @@
+import { OxChipProps } from './Chip.types';
+declare function OxChip({ children, className, disabled, dot, onRemove, removeLabel, render, tone, variant, ...props }: OxChipProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export { OxChip };