@noxickon/onyx 6.2.0 → 6.4.0

package/dist/components/Accordion/Accordion.styles.js

@@ -12,7 +12,7 @@ var r = n({
 			"transition-colors",
 			"ox-interactive:hover:text-primary-ink",
 			"focus-visible:rounded-sm focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-ink",
-			"ox-disabled:pointer-events-none ox-disabled:opacity-50"
+			"ox-disabled:cursor-not-allowed ox-disabled:opacity-50"
 		],
 		triggerIcon: [
 			"size-4 shrink-0 text-fg-subtle",

package/dist/components/Alert/Alert.styles.js

@@ -26,9 +26,9 @@ var t = e({
 			"shrink-0 inline-grid place-items-center cursor-pointer",
 			"size-5.5 rounded-sm bg-transparent text-fg-subtle",
 			"transition-colors ease-out-quint",
-			"hover:text-fg hover:bg-[color-mix(in_oklab,var(--fg)_8%,transparent)]",
+			"ox-interactive:hover:text-fg ox-interactive:hover:bg-[color-mix(in_oklab,var(--fg)_8%,transparent)]",
 			"focus-visible:outline-none focus-visible:shadow-[var(--focus-ring)]",
-			"ox-disabled:pointer-events-none ox-disabled:opacity-50",
+			"ox-disabled:cursor-not-allowed ox-disabled:opacity-50",
 			"pointer-coarse:size-8",
 			"pointer-coarse:group-has-[[data-ox-slot=alert-action]]/alert:absolute",
 			"pointer-coarse:group-has-[[data-ox-slot=alert-action]]/alert:top-3",

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { OxAlertDialogActionsProps, OxAlertDialogCloseProps, OxAlertDialogContentProps, OxAlertDialogDescriptionProps, OxAlertDialogProps, OxAlertDialogTitleProps, OxAlertDialogTriggerProps } from './AlertDialog.types';
-declare function OxAlertDialogRoot({ children, tone, ...props }: OxAlertDialogProps): import("react").JSX.Element;
-declare function OxAlertDialogTrigger({ children, className, ...props }: OxAlertDialogTriggerProps): import("react").JSX.Element;
+declare function OxAlertDialogRoot<Payload = unknown>({ children, tone, ...props }: OxAlertDialogProps<Payload>): import("react").JSX.Element;
+declare function OxAlertDialogTrigger<Payload = unknown>({ children, className, ...props }: OxAlertDialogTriggerProps<Payload>): import("react").JSX.Element;
 declare function OxAlertDialogContent({ children, className, scroll, ...props }: OxAlertDialogContentProps): import("react").JSX.Element;
 declare function OxAlertDialogTitle({ children, className, ...props }: OxAlertDialogTitleProps): import("react").JSX.Element;
 declare function OxAlertDialogDescription({ children, className, ...props }: OxAlertDialogDescriptionProps): import("react").JSX.Element;

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { AlertDialog as BaseAlertDialog, AlertDialogCloseProps as BaseAlertDialogCloseProps, AlertDialogDescriptionProps as BaseAlertDialogDescriptionProps, AlertDialogPopupProps as BaseAlertDialogPopupProps, AlertDialogRootProps as BaseAlertDialogRootProps, AlertDialogTitleProps as BaseAlertDialogTitleProps, AlertDialogTriggerProps as BaseAlertDialogTriggerProps } from '@base-ui/react/alert-dialog';
 import { useRender } from '@base-ui/react/use-render';
 import { AlertDialogVariants } from './AlertDialog.styles';
-type AlertDialogHandle = ReturnType<typeof BaseAlertDialog.createHandle>;
+type AlertDialogHandle<Payload = unknown> = ReturnType<typeof BaseAlertDialog.createHandle<Payload>>;
 interface OxAlertDialogProps<Payload = unknown> extends BaseAlertDialogRootProps<Payload>, Pick<AlertDialogVariants, 'tone'> {
 }
 interface OxAlertDialogTriggerProps<Payload = unknown> extends Omit<BaseAlertDialogTriggerProps<Payload>, 'className'> {

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

@@ -16,7 +16,7 @@ var t = [
 		...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"
+		"ox-disabled:cursor-not-allowed ox-disabled:opacity-50"
 	],
 	staticCrumb: [...t, "text-fg-muted"],
 	page: [...t, "font-medium text-fg"],

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

@@ -16,12 +16,18 @@ export declare const buttonVariants: import('tailwind-variants').TVReturnType<{
         'soft-primary': {
             base: string[];
         };
+        'ghost-primary': {
+            base: string[];
+        };
         destructive: {
             base: string[];
         };
         'soft-destructive': {
             base: string[];
         };
+        'ghost-destructive': {
+            base: string[];
+        };
         link: {
             base: string[];
         };
@@ -60,12 +66,18 @@ export declare const buttonVariants: import('tailwind-variants').TVReturnType<{
         'soft-primary': {
             base: string[];
         };
+        'ghost-primary': {
+            base: string[];
+        };
         destructive: {
             base: string[];
         };
         'soft-destructive': {
             base: string[];
         };
+        'ghost-destructive': {
+            base: string[];
+        };
         link: {
             base: string[];
         };
@@ -104,12 +116,18 @@ export declare const buttonVariants: import('tailwind-variants').TVReturnType<{
         'soft-primary': {
             base: string[];
         };
+        'ghost-primary': {
+            base: string[];
+        };
         destructive: {
             base: string[];
         };
         'soft-destructive': {
             base: string[];
         };
+        'ghost-destructive': {
+            base: string[];
+        };
         link: {
             base: string[];
         };

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

@@ -11,7 +11,7 @@ var n = ["h-auto rounded-sm px-0 tracking-normal shadow-none active:scale-100"],
 			"[&_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-disabled:cursor-not-allowed 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"],
@@ -29,12 +29,14 @@ var n = ["h-auto rounded-sm px-0 tracking-normal shadow-none active:scale-100"],
 			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%)]"] },
+			"ghost-primary": { base: ["text-primary-ink", "ox-engaged:bg-primary-soft"] },
 			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%)]"] },
+			"ghost-destructive": { base: ["text-danger-ink", "ox-engaged:bg-danger-soft"] },
 			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": {

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

@@ -1,5 +1,5 @@
 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 OxCardRoot({ children, className, interactive, render, selected, tone, 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>>;

package/dist/components/Card/Card.js

@@ -7,48 +7,49 @@ import { useRender as s } from "@base-ui/react/use-render";
 //#region src/components/Card/Card.tsx
 var { Provider: c, useRequiredContext: l } = e("OxCard");
 function u(e) {
-	let r = n(51), i, l, u, d, f, p, m;
-	r[0] === e ? (i = r[1], l = r[2], u = r[3], d = r[4], f = r[5], p = r[6], m = r[7]) : ({children: i, className: l, interactive: u, render: f, selected: p, variant: m, ...d} = e, r[0] = e, r[1] = i, r[2] = l, r[3] = u, r[4] = d, r[5] = f, r[6] = p, r[7] = m);
-	let h = m === void 0 ? "outlined" : m, [g, _] = a(void 0), [v, y] = a(void 0), b, x, S, C, w, T, E, D;
-	if (r[8] !== l || r[9] !== v || r[10] !== u || r[11] !== d || r[12] !== f || r[13] !== p || r[14] !== g || r[15] !== h) {
+	let r = n(55), i, l, u, d, f, p, m, h;
+	r[0] === e ? (i = r[1], l = r[2], u = r[3], d = r[4], f = r[5], p = r[6], m = r[7], h = r[8]) : ({children: i, className: l, interactive: u, render: f, selected: p, tone: m, variant: h, ...d} = e, r[0] = e, r[1] = i, r[2] = l, r[3] = u, r[4] = d, r[5] = f, r[6] = p, r[7] = m, r[8] = h);
+	let g = m === void 0 ? "neutral" : m, _ = h === void 0 ? "outlined" : h, [v, y] = a(void 0), [b, x] = a(void 0), S, C, w, T, E, D, O, k, A;
+	if (r[9] !== l || r[10] !== b || r[11] !== u || r[12] !== d || r[13] !== f || r[14] !== p || r[15] !== v || r[16] !== g || r[17] !== _) {
 		let e = t({
-			variant: h,
+			variant: _,
 			interactive: u,
 			selected: p
 		});
-		D = s, r[24] === f ? E = r[25] : (E = f ?? /* @__PURE__ */ o("div", {}), r[24] = f, r[25] = E), b = d, r[26] === g ? x = r[27] : (x = g && {
+		C = s, r[27] === f ? S = r[28] : (S = f ?? /* @__PURE__ */ o("div", {}), r[27] = f, r[28] = S), w = d, r[29] === v ? T = r[30] : (T = v && {
 			role: "region",
-			"aria-labelledby": g
-		}, r[26] = g, r[27] = x), r[28] === v ? S = r[29] : (S = v && { "aria-describedby": v }, r[28] = v, r[29] = S), r[30] === u ? C = r[31] : (C = u && { tabIndex: 0 }, r[30] = u, r[31] = C), r[32] === p ? w = r[33] : (w = p && { "data-selected": "" }, r[32] = p, r[33] = w), T = e.root({ class: l }), r[8] = l, r[9] = v, r[10] = u, r[11] = d, r[12] = f, r[13] = p, r[14] = g, r[15] = h, r[16] = b, r[17] = x, r[18] = S, r[19] = C, r[20] = w, r[21] = T, r[22] = E, r[23] = D;
-	} else b = r[16], x = r[17], S = r[18], C = r[19], w = r[20], T = r[21], E = r[22], D = r[23];
-	let O;
-	r[34] !== i || r[35] !== b || r[36] !== x || r[37] !== S || r[38] !== C || r[39] !== w || r[40] !== T ? (O = {
-		...b,
-		...x,
-		...S,
-		...C,
+			"aria-labelledby": v
+		}, r[29] = v, r[30] = T), r[31] === b ? E = r[32] : (E = b && { "aria-describedby": b }, r[31] = b, r[32] = E), r[33] === u ? D = r[34] : (D = u && { tabIndex: 0 }, r[33] = u, r[34] = D), r[35] === p ? O = r[36] : (O = p && { "data-selected": "" }, r[35] = p, r[36] = O), k = g, A = e.root({ class: l }), r[9] = l, r[10] = b, r[11] = u, r[12] = d, r[13] = f, r[14] = p, r[15] = v, r[16] = g, r[17] = _, r[18] = S, r[19] = C, r[20] = w, r[21] = T, r[22] = E, r[23] = D, r[24] = O, r[25] = k, r[26] = A;
+	} else S = r[18], C = r[19], w = r[20], T = r[21], E = r[22], D = r[23], O = r[24], k = r[25], A = r[26];
+	let j;
+	r[37] !== i || r[38] !== w || r[39] !== T || r[40] !== E || r[41] !== D || r[42] !== O || r[43] !== k || r[44] !== A ? (j = {
 		...w,
-		className: T,
+		...T,
+		...E,
+		...D,
+		...O,
+		"data-ox-tone": k,
+		className: A,
 		"data-ox-slot": "card",
 		children: i
-	}, r[34] = i, r[35] = b, r[36] = x, r[37] = S, r[38] = C, r[39] = w, r[40] = T, r[41] = O) : O = r[41];
-	let k;
-	r[42] !== O || r[43] !== E ? (k = {
-		render: E,
-		props: O
-	}, r[42] = O, r[43] = E, r[44] = k) : k = r[44];
-	let A = D(k), j;
-	r[45] !== v || r[46] !== g ? (j = {
-		titleId: g,
-		setTitleId: _,
-		descriptionId: v,
-		setDescriptionId: y
-	}, r[45] = v, r[46] = g, r[47] = j) : j = r[47];
+	}, r[37] = i, r[38] = w, r[39] = T, r[40] = E, r[41] = D, r[42] = O, r[43] = k, r[44] = A, r[45] = j) : j = r[45];
 	let M;
-	return r[48] !== A || r[49] !== j ? (M = /* @__PURE__ */ o(c, {
-		value: j,
-		children: A
-	}), r[48] = A, r[49] = j, r[50] = M) : M = r[50], M;
+	r[46] !== S || r[47] !== j ? (M = {
+		render: S,
+		props: j
+	}, r[46] = S, r[47] = j, r[48] = M) : M = r[48];
+	let N = C(M), P;
+	r[49] !== b || r[50] !== v ? (P = {
+		titleId: v,
+		setTitleId: y,
+		descriptionId: b,
+		setDescriptionId: x
+	}, r[49] = b, r[50] = v, r[51] = P) : P = r[51];
+	let F;
+	return r[52] !== N || r[53] !== P ? (F = /* @__PURE__ */ o(c, {
+		value: P,
+		children: N
+	}), r[52] = N, r[53] = P, r[54] = F) : F = r[54], F;
 }
 function d(e) {
 	let r = n(16), i, a, c, u;

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

@@ -2,10 +2,10 @@ 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",
+		root: "group flex flex-col rounded-card border border-line bg-card p-4 not-data-[ox-tone=neutral]:border-tone-outline",
+		eyebrow: "mb-1.5 text-3xs font-semibold uppercase tracking-[0.08em] text-tone-ink group-data-[ox-tone=neutral]:text-fg-subtle",
 		header: "mb-3 flex flex-col",
-		title: "text-sm font-semibold tracking-[-0.01em] text-fg break-words",
+		title: "text-sm font-semibold tracking-[-0.01em] break-words text-tone-ink group-data-[ox-tone=neutral]:text-fg",
 		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"

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

@@ -1,8 +1,11 @@
 import { ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import { OxTone } from '../../internal/types/tone';
 import { CardVariants } from './Card.styles';
+type OxCardTone = OxTone;
 interface OxCardProps extends Pick<CardVariants, 'variant' | 'interactive' | 'selected'>, Omit<useRender.ComponentProps<'div'>, 'role'> {
     children: ReactNode;
+    tone?: OxCardTone;
 }
 interface OxCardHeaderProps extends useRender.ComponentProps<'div'> {
     children: ReactNode;
@@ -22,4 +25,4 @@ interface OxCardContentProps extends useRender.ComponentProps<'div'> {
 interface OxCardFooterProps extends useRender.ComponentProps<'div'> {
     children: ReactNode;
 }
-export type { OxCardContentProps, OxCardDescriptionProps, OxCardEyebrowProps, OxCardFooterProps, OxCardHeaderProps, OxCardProps, OxCardTitleProps, };
+export type { OxCardContentProps, OxCardDescriptionProps, OxCardEyebrowProps, OxCardFooterProps, OxCardHeaderProps, OxCardProps, OxCardTitleProps, OxCardTone, };

package/dist/components/Command/Command.styles.js

@@ -22,7 +22,7 @@ var r = e({
 			"data-[destructive]:text-danger-ink",
 			"data-[destructive]:data-[highlighted]:bg-[var(--err-fill)]",
 			"data-[destructive]:data-[highlighted]:text-[var(--err-strong)]",
-			"ox-disabled:pointer-events-none ox-disabled:opacity-50",
+			"ox-disabled:cursor-not-allowed ox-disabled:opacity-50",
 			"[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-80",
 			"data-[highlighted]:[&>svg]:opacity-100"
 		],

package/dist/components/CopyInput/CopyInput.d.ts

@@ -0,0 +1,3 @@
+import { OxCopyInputProps } from './CopyInput.types';
+declare function OxCopyInput({ className, copiedLabel, copyLabel, disabled, mono, onCopyResult, timeout, value, }: OxCopyInputProps): import("react").JSX.Element;
+export { OxCopyInput };

package/dist/components/CopyInput/CopyInput.js

@@ -0,0 +1,46 @@
+import { OxCopyButton as e } from "../CopyButton/CopyButton.js";
+import { OxInput as t } from "../Input/index.js";
+import { copyInputVariants as n } from "./CopyInput.styles.js";
+import { c as r } from "react/compiler-runtime";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/CopyInput/CopyInput.tsx
+function o(o) {
+	let c = r(27), { className: l, copiedLabel: u, copyLabel: d, disabled: f, mono: p, onCopyResult: m, timeout: h, value: g } = o, _ = d === void 0 ? "Copy" : d, v = f === void 0 ? !1 : f, y = p === void 0 ? !1 : p, b, x, S, C, w, T;
+	if (c[0] !== l || c[1] !== v || c[2] !== y) {
+		let e = n({ mono: y });
+		x = t.Group, C = l, w = v, T = !0, b = t, S = e.value(), c[0] = l, c[1] = v, c[2] = y, c[3] = b, c[4] = x, c[5] = S, c[6] = C, c[7] = w, c[8] = T;
+	} else b = c[3], x = c[4], S = c[5], C = c[6], w = c[7], T = c[8];
+	let E;
+	c[9] !== b || c[10] !== S || c[11] !== g ? (E = /* @__PURE__ */ i(b, {
+		className: S,
+		readOnly: !0,
+		value: g,
+		onFocus: s
+	}), c[9] = b, c[10] = S, c[11] = g, c[12] = E) : E = c[12];
+	let D;
+	c[13] !== u || c[14] !== _ || c[15] !== v || c[16] !== m || c[17] !== h || c[18] !== g ? (D = /* @__PURE__ */ i(t.Addon, {
+		align: "inline-end",
+		children: /* @__PURE__ */ i(e, {
+			"aria-label": _,
+			copiedLabel: u,
+			disabled: v,
+			isIconOnly: !0,
+			text: g,
+			timeout: h,
+			variant: "ghost",
+			onCopyResult: m
+		})
+	}), c[13] = u, c[14] = _, c[15] = v, c[16] = m, c[17] = h, c[18] = g, c[19] = D) : D = c[19];
+	let O;
+	return c[20] !== x || c[21] !== C || c[22] !== w || c[23] !== T || c[24] !== E || c[25] !== D ? (O = /* @__PURE__ */ a(x, {
+		className: C,
+		disabled: w,
+		readOnly: T,
+		children: [E, D]
+	}), c[20] = x, c[21] = C, c[22] = w, c[23] = T, c[24] = E, c[25] = D, c[26] = O) : O = c[26], O;
+}
+function s(e) {
+	return e.currentTarget.select();
+}
+//#endregion
+export { o as OxCopyInput };

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

@@ -0,0 +1,25 @@
+export declare const copyInputVariants: import('tailwind-variants').TVReturnType<{
+    mono: {
+        true: {
+            value: string;
+        };
+    };
+}, {
+    value: string;
+}, undefined, {
+    mono: {
+        true: {
+            value: string;
+        };
+    };
+}, {
+    value: string;
+}, import('tailwind-variants').TVReturnType<{
+    mono: {
+        true: {
+            value: string;
+        };
+    };
+}, {
+    value: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/CopyInput/CopyInput.styles.js

@@ -0,0 +1,8 @@
+import { tv as e } from "../../internal/tv.js";
+//#region src/components/CopyInput/CopyInput.styles.ts
+var t = e({
+	slots: { value: "" },
+	variants: { mono: { true: { value: "font-mono" } } }
+});
+//#endregion
+export { t as copyInputVariants };

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

@@ -0,0 +1,9 @@
+import { OxCopyButtonProps } from '../CopyButton';
+interface OxCopyInputProps extends Pick<OxCopyButtonProps, 'copiedLabel' | 'onCopyResult' | 'timeout'> {
+    className?: string;
+    copyLabel?: string;
+    disabled?: boolean;
+    mono?: boolean;
+    value: string;
+}
+export type { OxCopyInputProps };

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

@@ -0,0 +1,2 @@
+export { OxCopyInput } from './CopyInput';
+export type { OxCopyInputProps } from './CopyInput.types';