@noxickon/onyx 6.2.0 → 6.3.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

@@ -22,6 +22,9 @@ export declare const buttonVariants: import('tailwind-variants').TVReturnType<{
         'soft-destructive': {
             base: string[];
         };
+        'ghost-destructive': {
+            base: string[];
+        };
         link: {
             base: string[];
         };
@@ -66,6 +69,9 @@ export declare const buttonVariants: import('tailwind-variants').TVReturnType<{
         'soft-destructive': {
             base: string[];
         };
+        'ghost-destructive': {
+            base: string[];
+        };
         link: {
             base: string[];
         };
@@ -110,6 +116,9 @@ export declare const buttonVariants: import('tailwind-variants').TVReturnType<{
         '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"],
@@ -35,6 +35,7 @@ var n = ["h-auto rounded-sm px-0 tracking-normal shadow-none active:scale-100"],
 				"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';

package/dist/components/Dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
 import { OxDialogCloseProps, OxDialogContentProps, OxDialogDescriptionProps, OxDialogProps, OxDialogTitleProps, OxDialogTriggerProps } from './Dialog.types';
-declare function OxDialogRoot({ modal, ...props }: OxDialogProps): import("react").JSX.Element;
-declare function OxDialogTrigger({ children, className, ...props }: OxDialogTriggerProps): import("react").JSX.Element;
+declare function OxDialogRoot<Payload = unknown>({ modal, ...props }: OxDialogProps<Payload>): import("react").JSX.Element;
+declare function OxDialogTrigger<Payload = unknown>({ children, className, ...props }: OxDialogTriggerProps<Payload>): import("react").JSX.Element;
 declare function OxDialogContent({ children, className, scroll, ...props }: OxDialogContentProps): import("react").JSX.Element;
 declare function OxDialogTitle({ children, className, ...props }: OxDialogTitleProps): import("react").JSX.Element;
 declare function OxDialogDescription({ children, className, ...props }: OxDialogDescriptionProps): import("react").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Dialog as BaseDialog, DialogCloseProps as BaseDialogCloseProps, DialogDescriptionProps as BaseDialogDescriptionProps, DialogPopupProps as BaseDialogPopupProps, DialogRootProps as BaseDialogRootProps, DialogTitleProps as BaseDialogTitleProps, DialogTriggerProps as BaseDialogTriggerProps } from '@base-ui/react/dialog';
 import { DialogVariants } from './Dialog.styles';
-type DialogHandle = ReturnType<typeof BaseDialog.createHandle>;
+type DialogHandle<Payload = unknown> = ReturnType<typeof BaseDialog.createHandle<Payload>>;
 type OxDialogProps<Payload = unknown> = BaseDialogRootProps<Payload>;
 interface OxDialogTriggerProps<Payload = unknown> extends Omit<BaseDialogTriggerProps<Payload>, 'className'> {
     className?: string;

package/dist/components/HoldToDelete/HoldToDelete.styles.js

@@ -8,7 +8,7 @@ var t = e({ slots: {
 		"[&_svg:not([class*=size-])]:size-icon",
 		"transition-transform active:scale-97 will-change-transform",
 		"outline-danger-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"
 	],
 	overlay: [
 		"pointer-events-none absolute inset-0",

package/dist/components/Pagination/Pagination.styles.js

@@ -38,7 +38,7 @@ var n = "h-control min-w-[var(--control-h-md)]", r = e({
 			false: {}
 		},
 		disabled: {
-			true: { link: "pointer-events-none cursor-not-allowed opacity-50" },
+			true: { link: "cursor-not-allowed opacity-50" },
 			false: {}
 		}
 	},

package/dist/components/ResponsiveOverlay/ResponsiveOverlay.d.ts

@@ -0,0 +1,9 @@
+import { OxResponsiveOverlayActionsProps, OxResponsiveOverlayBodyProps, OxResponsiveOverlayContentProps, OxResponsiveOverlayDescriptionProps, OxResponsiveOverlayProps, OxResponsiveOverlayTitleProps, OxResponsiveOverlayTriggerProps } from './ResponsiveOverlay.types';
+declare function OxResponsiveOverlayRoot({ below, children, defaultOpen, headerExtra, mobile, mobileSide, onOpenChange, open, tone, }: OxResponsiveOverlayProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayTrigger({ children, className }: OxResponsiveOverlayTriggerProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayContent({ children, className }: OxResponsiveOverlayContentProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayTitle({ children, className }: OxResponsiveOverlayTitleProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayDescription({ children, className, }: OxResponsiveOverlayDescriptionProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayBody({ children, className }: OxResponsiveOverlayBodyProps): import("react").JSX.Element;
+declare function OxResponsiveOverlayActions({ children, className }: OxResponsiveOverlayActionsProps): import("react").JSX.Element;
+export { OxResponsiveOverlayActions, OxResponsiveOverlayBody, OxResponsiveOverlayContent, OxResponsiveOverlayDescription, OxResponsiveOverlayRoot, OxResponsiveOverlayTitle, OxResponsiveOverlayTrigger, };

package/dist/components/ResponsiveOverlay/ResponsiveOverlay.js

@@ -0,0 +1,228 @@
+import { createCompoundContext as e } from "../../internal/context/createCompoundContext/createCompoundContext.js";
+import { OxAlertDialog as t } from "../AlertDialog/index.js";
+import { OxDialog as n } from "../Dialog/index.js";
+import { OxDrawer as r } from "../Drawer/index.js";
+import { useOxBreakpointUp as i } from "../../hooks/useBreakpoint/useBreakpoint.js";
+import { responsiveOverlayVariants as a } from "./ResponsiveOverlay.styles.js";
+import { c as o } from "react/compiler-runtime";
+import { useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/ResponsiveOverlay/ResponsiveOverlay.tsx
+var { Provider: u, useRequiredContext: d } = e("OxResponsiveOverlay"), f = /* @__PURE__ */ new Set([
+	"close-press",
+	"imperative-action",
+	"none"
+]);
+function p(e, t) {
+	return e ? "drawer" : t ? "alertDialog" : "dialog";
+}
+function m(e) {
+	let a = o(36), { below: l, children: d, defaultOpen: m, headerExtra: h, mobile: g, mobileSide: _, onOpenChange: v, open: y, tone: b } = e, x = l === void 0 ? "md" : l, S = g === void 0 ? "sheet" : g, C = _ === void 0 ? "bottom" : _, w = i(x), T = y !== void 0, [E, D] = s(m ?? !1), O = T ? y : E, k = !w && S === "sheet", A;
+	a[0] !== k || a[1] !== b ? (A = p(k, b), a[0] = k, a[1] = b, a[2] = A) : A = a[2];
+	let j = A, M = !w && S === "fullscreen", N = j === "drawer" && b !== void 0, P;
+	a[3] !== T || a[4] !== N || a[5] !== v ? (P = (e, t) => {
+		!e && N && !f.has(t.reason) || (T || D(e), v?.(e, t));
+	}, a[3] = T, a[4] = N, a[5] = v, a[6] = P) : P = a[6];
+	let F = P, I;
+	a[7] !== h || a[8] !== M || a[9] !== j || a[10] !== b ? (I = {
+		fullScreen: M,
+		headerExtra: h,
+		root: j,
+		tone: b
+	}, a[7] = h, a[8] = M, a[9] = j, a[10] = b, a[11] = I) : I = a[11];
+	let L = I, R;
+	a[12] !== d || a[13] !== L ? (R = /* @__PURE__ */ c(u, {
+		value: L,
+		children: d
+	}), a[12] = d, a[13] = L, a[14] = R) : R = a[14];
+	let z = R;
+	if (j === "drawer") {
+		let e;
+		a[15] === F ? e = a[16] : (e = (e, t) => F(e, { reason: t.reason }), a[15] = F, a[16] = e);
+		let t;
+		return a[17] !== O || a[18] !== z || a[19] !== N || a[20] !== C || a[21] !== e ? (t = /* @__PURE__ */ c(r, {
+			disablePointerDismissal: N,
+			open: O,
+			side: C,
+			onOpenChange: e,
+			children: z
+		}), a[17] = O, a[18] = z, a[19] = N, a[20] = C, a[21] = e, a[22] = t) : t = a[22], t;
+	}
+	if (j === "alertDialog") {
+		let e;
+		a[23] === F ? e = a[24] : (e = (e, t) => F(e, { reason: t.reason }), a[23] = F, a[24] = e);
+		let n;
+		return a[25] !== O || a[26] !== z || a[27] !== e || a[28] !== b ? (n = /* @__PURE__ */ c(t, {
+			open: O,
+			tone: b,
+			onOpenChange: e,
+			children: z
+		}), a[25] = O, a[26] = z, a[27] = e, a[28] = b, a[29] = n) : n = a[29], n;
+	}
+	let B;
+	a[30] === F ? B = a[31] : (B = (e, t) => F(e, { reason: t.reason }), a[30] = F, a[31] = B);
+	let V;
+	return a[32] !== O || a[33] !== z || a[34] !== B ? (V = /* @__PURE__ */ c(n, {
+		open: O,
+		onOpenChange: B,
+		children: z
+	}), a[32] = O, a[33] = z, a[34] = B, a[35] = V) : V = a[35], V;
+}
+function h(e) {
+	let i = o(9), { children: a, className: s } = e, { root: l } = d();
+	if (l === "drawer") {
+		let e;
+		return i[0] !== a || i[1] !== s ? (e = /* @__PURE__ */ c(r.Trigger, {
+			className: s,
+			children: a
+		}), i[0] = a, i[1] = s, i[2] = e) : e = i[2], e;
+	}
+	if (l === "alertDialog") {
+		let e;
+		return i[3] !== a || i[4] !== s ? (e = /* @__PURE__ */ c(t.Trigger, {
+			className: s,
+			children: a
+		}), i[3] = a, i[4] = s, i[5] = e) : e = i[5], e;
+	}
+	let u;
+	return i[6] !== a || i[7] !== s ? (u = /* @__PURE__ */ c(n.Trigger, {
+		className: s,
+		children: a
+	}), i[6] = a, i[7] = s, i[8] = u) : u = i[8], u;
+}
+function g(e) {
+	let i = o(14), { children: s, className: u } = e, { fullScreen: f, root: p, tone: m } = d(), h, g, _;
+	if (i[0] !== s || i[1] !== u || i[2] !== f || i[3] !== p || i[4] !== m) {
+		_ = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let e = a({
+				fullScreen: f,
+				root: p
+			});
+			if (p === "drawer") {
+				let t;
+				i[8] === m ? t = i[9] : (t = m === void 0 && /* @__PURE__ */ c(r.Handle, {}), i[8] = m, i[9] = t), _ = /* @__PURE__ */ l(r.Content, {
+					className: e.content({ class: u }),
+					children: [t, s]
+				});
+				break bb0;
+			}
+			if (p === "alertDialog") {
+				_ = /* @__PURE__ */ c(t.Content, {
+					className: e.content({ class: u }),
+					scroll: "inside",
+					children: s
+				});
+				break bb0;
+			}
+			h = n.Content, g = e.content({ class: u });
+		}
+		i[0] = s, i[1] = u, i[2] = f, i[3] = p, i[4] = m, i[5] = h, i[6] = g, i[7] = _;
+	} else h = i[5], g = i[6], _ = i[7];
+	if (_ !== Symbol.for("react.early_return_sentinel")) return _;
+	let v;
+	return i[10] !== h || i[11] !== s || i[12] !== g ? (v = /* @__PURE__ */ c(h, {
+		className: g,
+		scroll: "inside",
+		children: s
+	}), i[10] = h, i[11] = s, i[12] = g, i[13] = v) : v = i[13], v;
+}
+function _(e, i, a) {
+	return c(e === "drawer" ? r.Title : e === "alertDialog" ? t.Title : n.Title, {
+		className: i,
+		children: a
+	});
+}
+function v(e) {
+	let t = o(13), { children: n, className: r } = e, { headerExtra: i, root: s } = d(), u, f, p, m;
+	if (t[0] !== n || t[1] !== r || t[2] !== i || t[3] !== s) {
+		let e = a();
+		u = e.header(), f = "responsive-overlay-header", p = _(s, e.title({ class: r }), n), m = i ? /* @__PURE__ */ c("div", {
+			className: e.headerExtra(),
+			"data-ox-slot": "responsive-overlay-header-extra",
+			children: i
+		}) : null, t[0] = n, t[1] = r, t[2] = i, t[3] = s, t[4] = u, t[5] = f, t[6] = p, t[7] = m;
+	} else u = t[4], f = t[5], p = t[6], m = t[7];
+	let h;
+	return t[8] !== u || t[9] !== f || t[10] !== p || t[11] !== m ? (h = /* @__PURE__ */ l("div", {
+		className: u,
+		"data-ox-slot": f,
+		children: [p, m]
+	}), t[8] = u, t[9] = f, t[10] = p, t[11] = m, t[12] = h) : h = t[12], h;
+}
+function y(e) {
+	let i = o(10), { children: s, className: l } = e, { root: u } = d(), f, p, m;
+	if (i[0] !== s || i[1] !== l || i[2] !== u) {
+		m = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let e = a();
+			if (u === "drawer") {
+				m = /* @__PURE__ */ c(r.Description, {
+					className: e.description({ class: l }),
+					children: s
+				});
+				break bb0;
+			}
+			if (u === "alertDialog") {
+				m = /* @__PURE__ */ c(t.Description, {
+					className: e.description({ class: l }),
+					children: s
+				});
+				break bb0;
+			}
+			f = n.Description, p = e.description({ class: l });
+		}
+		i[0] = s, i[1] = l, i[2] = u, i[3] = f, i[4] = p, i[5] = m;
+	} else f = i[3], p = i[4], m = i[5];
+	if (m !== Symbol.for("react.early_return_sentinel")) return m;
+	let h;
+	return i[6] !== f || i[7] !== s || i[8] !== p ? (h = /* @__PURE__ */ c(f, {
+		className: p,
+		children: s
+	}), i[6] = f, i[7] = s, i[8] = p, i[9] = h) : h = i[9], h;
+}
+function b(e) {
+	let t = o(8), { children: n, className: i } = e, { root: s } = d();
+	if (s === "drawer") {
+		let e;
+		return t[0] !== n || t[1] !== i ? (e = /* @__PURE__ */ c(r.Body, {
+			className: i,
+			children: n
+		}), t[0] = n, t[1] = i, t[2] = e) : e = t[2], e;
+	}
+	let l;
+	t[3] === i ? l = t[4] : (l = a().body({ class: i }), t[3] = i, t[4] = l);
+	let u;
+	return t[5] !== n || t[6] !== l ? (u = /* @__PURE__ */ c("div", {
+		className: l,
+		"data-ox-slot": "responsive-overlay-body",
+		children: n
+	}), t[5] = n, t[6] = l, t[7] = u) : u = t[7], u;
+}
+function x(e) {
+	let t = o(8), { children: n, className: i } = e, { root: s } = d(), l, u;
+	if (t[0] !== n || t[1] !== i || t[2] !== s) {
+		u = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let e = a();
+			if (s === "drawer") {
+				u = /* @__PURE__ */ c(r.Footer, {
+					className: e.drawerFooter({ class: i }),
+					children: n
+				});
+				break bb0;
+			}
+			l = e.footer({ class: i });
+		}
+		t[0] = n, t[1] = i, t[2] = s, t[3] = l, t[4] = u;
+	} else l = t[3], u = t[4];
+	if (u !== Symbol.for("react.early_return_sentinel")) return u;
+	let f;
+	return t[5] !== n || t[6] !== l ? (f = /* @__PURE__ */ c("div", {
+		className: l,
+		"data-ox-slot": "responsive-overlay-actions",
+		children: n
+	}), t[5] = n, t[6] = l, t[7] = f) : f = t[7], f;
+}
+//#endregion
+export { x as OxResponsiveOverlayActions, b as OxResponsiveOverlayBody, g as OxResponsiveOverlayContent, y as OxResponsiveOverlayDescription, m as OxResponsiveOverlayRoot, v as OxResponsiveOverlayTitle, h as OxResponsiveOverlayTrigger };