@noxickon/onyx 5.0.2 → 6.0.0

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,144 @@
+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 { addonEdge as r } from "../../internal/styles/addonStyles.js";
+import { getFieldControlAttributes as i } from "../../internal/utils/getFieldControlAttributes/getFieldControlAttributes.js";
+import { useIsomorphicLayoutEffect as a } from "../../internal/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { Input as o } from "../../node_modules/@base-ui/react/input/Input.js";
+import { textareaAddonVariants as s, textareaGroupVariants as c, textareaVariants as l } from "./Textarea.styles.js";
+import { useRef as u } from "react";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/components/Textarea/Textarea.tsx
+var f = e(), p = "button, a, input, textarea, select, [contenteditable=\"true\"], [role=\"button\"], [role=\"link\"]", { Provider: m, useOptionalContext: h, useRequiredContext: g } = t("OxTextarea.Group"), _ = (e) => Number.parseFloat(e) || 0;
+function v(e, t, n, r, i) {
+	let o = (0, f.c)(11), s;
+	o[0] !== i || o[1] !== r || o[2] !== n || o[3] !== e ? (s = () => {
+		if (!i) return;
+		let t = e.current, a = t.clientWidth, o = () => {
+			let e = globalThis.getComputedStyle(t), i = _(e.lineHeight) || 20, a = _(e.paddingTop) + _(e.paddingBottom), o = _(e.borderTopWidth) + _(e.borderBottomWidth), s = a + o;
+			t.style.height = "auto";
+			let c = t.scrollHeight + o, l = r * i + s;
+			t.style.height = `${Math.min(Math.max(c, n * i + s), l)}px`, t.style.overflowY = c > l ? "auto" : "hidden";
+		};
+		if (o(), t.addEventListener("input", o), typeof ResizeObserver > "u") return () => t.removeEventListener("input", o);
+		let s = new ResizeObserver((e) => {
+			let t = e[0]?.contentRect.width;
+			t !== void 0 && t !== a && (a = t, o());
+		});
+		return s.observe(t), () => {
+			t.removeEventListener("input", o), s.disconnect();
+		};
+	}, o[0] = i, o[1] = r, o[2] = n, o[3] = e, o[4] = s) : s = o[4];
+	let c;
+	o[5] !== i || o[6] !== r || o[7] !== n || o[8] !== e || o[9] !== t ? (c = [
+		e,
+		t,
+		n,
+		r,
+		i
+	], o[5] = i, o[6] = r, o[7] = n, o[8] = e, o[9] = t, o[10] = c) : c = o[10], a(s, c);
+}
+function y(e) {
+	let t = (0, f.c)(18), { autoResize: n, className: r, defaultValue: a, disabled: s, maxRows: c, minRows: p, onChange: m, readOnly: g, resize: _, rows: y, value: b, ...x } = e, S = n === void 0 ? !0 : n, C = c === void 0 ? 8 : c, w = p === void 0 ? 3 : p, T = u(null), E = h(), D = _ ?? (S ? "none" : "vertical"), O = y ?? w, k = s ?? E?.disabled, A = g ?? E?.readOnly, j = E?.invalid;
+	v(T, b ?? a, w, C, S);
+	let M = o, N;
+	t[0] !== r || t[1] !== D ? (N = l({
+		resize: D,
+		class: r
+	}), t[0] = r, t[1] = D, t[2] = N) : N = t[2];
+	let P;
+	t[3] === O ? P = t[4] : (P = /* @__PURE__ */ d("textarea", {
+		ref: T,
+		rows: O
+	}), t[3] = O, t[4] = P);
+	let F;
+	t[5] === m ? F = t[6] : (F = m ? (e, t) => m(e, t.event) : void 0, t[5] = m, t[6] = F);
+	let I = i({
+		invalid: j,
+		required: x.required
+	}), L;
+	return t[7] !== M || t[8] !== a || t[9] !== k || t[10] !== A || t[11] !== x || t[12] !== N || t[13] !== P || t[14] !== F || t[15] !== I || t[16] !== b ? (L = /* @__PURE__ */ d(M, {
+		...x,
+		className: N,
+		"data-ox-slot": "textarea",
+		defaultValue: a,
+		disabled: k,
+		readOnly: A,
+		render: P,
+		value: b,
+		onValueChange: F,
+		...I
+	}), t[7] = M, t[8] = a, t[9] = k, t[10] = A, t[11] = x, t[12] = N, t[13] = P, t[14] = F, t[15] = I, t[16] = b, t[17] = L) : L = t[17], L;
+}
+function b(e) {
+	let t = (0, f.c)(36), r, i, a, o, s, l, h, g;
+	t[0] === e ? (r = t[1], i = t[2], a = t[3], o = t[4], s = t[5], l = t[6], h = t[7], g = t[8]) : ({children: r, className: i, disabled: l, invalid: h, onMouseDown: a, readOnly: g, render: s, ...o} = e, t[0] = e, t[1] = r, t[2] = i, t[3] = a, t[4] = o, t[5] = s, t[6] = l, t[7] = h, t[8] = g);
+	let _ = l === void 0 ? !1 : l, v = h === void 0 ? !1 : h, y = g === void 0 ? !1 : g, b = c(), x = u(null), S;
+	t[9] === _ ? S = t[10] : (S = (e) => {
+		_ || e.target.closest(p) || (e.preventDefault(), x.current?.querySelector(":scope [data-ox-slot=\"textarea\"]")?.focus());
+	}, t[9] = _, t[10] = S);
+	let C = S, w;
+	t[11] === s ? w = t[12] : (w = s ?? /* @__PURE__ */ d("div", {}), t[11] = s, t[12] = w);
+	let T = b.base({ class: i }), E = _ || void 0, D = v || void 0, O = y || void 0, k;
+	t[13] !== C || t[14] !== a ? (k = (e) => {
+		C(e), a?.(e);
+	}, t[13] = C, t[14] = a, t[15] = k) : k = t[15];
+	let A;
+	t[16] !== r || t[17] !== o || t[18] !== k || t[19] !== T || t[20] !== E || t[21] !== D || t[22] !== O ? (A = {
+		...o,
+		className: T,
+		"data-disabled": E,
+		"data-invalid": D,
+		"data-ox-slot": "textarea-group",
+		"data-readonly": O,
+		role: "group",
+		onMouseDown: k,
+		children: r
+	}, t[16] = r, t[17] = o, t[18] = k, t[19] = T, t[20] = E, t[21] = D, t[22] = O, t[23] = A) : A = t[23];
+	let j;
+	t[24] !== A || t[25] !== w ? (j = {
+		render: w,
+		ref: x,
+		props: A
+	}, t[24] = A, t[25] = w, t[26] = j) : j = t[26];
+	let M = n(j), N;
+	t[27] !== _ || t[28] !== C || t[29] !== v || t[30] !== y || t[31] !== b ? (N = {
+		disabled: _,
+		focusTextarea: C,
+		invalid: v,
+		readOnly: y,
+		slots: b
+	}, t[27] = _, t[28] = C, t[29] = v, t[30] = y, t[31] = b, t[32] = N) : N = t[32];
+	let P;
+	return t[33] !== M || t[34] !== N ? (P = /* @__PURE__ */ d(m, {
+		value: N,
+		children: M
+	}), t[33] = M, t[34] = N, t[35] = P) : P = t[35], P;
+}
+function x(e) {
+	let t = (0, f.c)(23), i, a, o, c, l;
+	t[0] === e ? (i = t[1], a = t[2], o = t[3], c = t[4], l = t[5]) : ({align: c, className: i, render: o, variant: l, ...a} = e, t[0] = e, t[1] = i, t[2] = a, t[3] = o, t[4] = c, t[5] = l);
+	let u = c === void 0 ? "block-start" : c, { slots: p } = g("OxTextarea.Addon"), m = l ?? "inline", h;
+	t[6] === o ? h = t[7] : (h = o ?? /* @__PURE__ */ d("div", {}), t[6] = o, t[7] = h);
+	let _;
+	t[8] !== u || t[9] !== i || t[10] !== m || t[11] !== p ? (_ = p.addon({ class: [s({
+		variant: m,
+		align: u
+	}), i] }), t[8] = u, t[9] = i, t[10] = m, t[11] = p, t[12] = _) : _ = t[12];
+	let v;
+	t[13] === u ? v = t[14] : (v = r(u), t[13] = u, t[14] = v);
+	let y = `textarea-group-${v}`, b;
+	t[15] !== m || t[16] !== a || t[17] !== _ || t[18] !== y ? (b = {
+		...a,
+		className: _,
+		"data-ox-addon": m,
+		"data-ox-slot": y
+	}, t[15] = m, t[16] = a, t[17] = _, t[18] = y, t[19] = b) : b = t[19];
+	let x;
+	return t[20] !== h || t[21] !== b ? (x = {
+		render: h,
+		props: b
+	}, t[20] = h, t[21] = b, t[22] = x) : x = t[22], n(x);
+}
+//#endregion
+export { x as OxTextareaAddon, y as OxTextareaBase, b as OxTextareaGroup };

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

@@ -0,0 +1,84 @@
+import { VariantProps } from '../../internal/tv';
+export declare const textareaVariants: import('tailwind-variants').TVReturnType<{
+    resize: {
+        none: string;
+        vertical: string;
+        horizontal: string;
+        both: string;
+    };
+}, undefined, string[], {
+    resize: {
+        none: string;
+        vertical: string;
+        horizontal: string;
+        both: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    resize: {
+        none: string;
+        vertical: string;
+        horizontal: string;
+        both: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type TextareaVariants = VariantProps<typeof textareaVariants>;
+export declare const textareaGroupVariants: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            addon?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            addon?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    addon: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            addon?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    addon: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    addon: string[];
+}, undefined, unknown, unknown, undefined>>;
+export declare const textareaAddonVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        separated: string;
+        inline: string;
+    };
+    align: {
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, undefined, {
+    variant: {
+        separated: string;
+        inline: string;
+    };
+    align: {
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        separated: string;
+        inline: string;
+    };
+    align: {
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;
+export type TextareaGroupVariants = VariantProps<typeof textareaGroupVariants>;

package/dist/components/Textarea/Textarea.styles.js

@@ -0,0 +1,49 @@
+import { tv as e } from "../../internal/tv.js";
+import { addonLinkCursors as t, createBlockAddonVariants as n } from "../../internal/styles/addonStyles.js";
+import { controlDisabled as r, controlFocusVisible as i, controlFocusWithin as a, controlReadonly as o, controlSurface as s } from "../../internal/styles/controlStyles.js";
+//#region src/components/Textarea/Textarea.styles.ts
+var c = e({
+	base: [
+		"block w-full min-h-[calc(var(--control-h-md)*2.2)] py-2.25 px-control",
+		"font-sans leading-[1.6]",
+		...s,
+		"placeholder:text-fg-subtle",
+		...i,
+		o,
+		"ox-readonly:cursor-default",
+		"ox-disabled:cursor-not-allowed ox-disabled:opacity-50 ox-disabled:bg-surface-raised"
+	],
+	variants: { resize: {
+		none: "resize-none",
+		vertical: "resize-y",
+		horizontal: "resize-x",
+		both: "resize"
+	} }
+}), l = [
+	"[&_[data-ox-slot=textarea]]:min-h-23 [&_[data-ox-slot=textarea]]:flex-1 [&_[data-ox-slot=textarea]]:min-w-0",
+	"[&_[data-ox-slot=textarea]]:resize-none",
+	"[&_[data-ox-slot=textarea]]:rounded-none [&_[data-ox-slot=textarea]]:border-0 [&_[data-ox-slot=textarea]]:bg-transparent",
+	"[&_[data-ox-slot=textarea]]:shadow-none [&_[data-ox-slot=textarea]]:outline-none",
+	"[&_[data-ox-slot=textarea]]:focus-visible:border-transparent [&_[data-ox-slot=textarea]]:focus-visible:shadow-none",
+	"[&_[data-ox-slot=textarea]]:ox-readonly:bg-transparent [&_[data-ox-slot=textarea]]:ox-readonly:text-fg"
+], u = [
+	"flex items-center gap-1.5 w-full",
+	"py-2 px-2.5",
+	"text-fg-subtle text-control whitespace-nowrap cursor-text",
+	t
+], d = e({ slots: {
+	base: [
+		"group/textarea-group",
+		"flex w-full flex-col overflow-hidden",
+		...s,
+		...a,
+		r,
+		...l
+	],
+	addon: [...u]
+} }), f = n({
+	surface: "bg-surface-raised",
+	inlineBorder: !0
+});
+//#endregion
+export { f as textareaAddonVariants, d as textareaGroupVariants, c as textareaVariants };

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

@@ -0,0 +1,28 @@
+import { InputProps as BaseInputProps } from '@base-ui/react/input';
+import { useRender } from '@base-ui/react/use-render';
+import { AddonVariant, BlockAddonAlign } from '../../internal/styles/addonStyles';
+import { TextareaGroupVariants, TextareaVariants } from './Textarea.styles';
+interface OxTextareaProps extends Omit<BaseInputProps, 'className' | 'onChange' | 'onValueChange' | 'defaultValue' | 'value'>, TextareaVariants {
+    autoResize?: boolean;
+    className?: string;
+    cols?: number;
+    defaultValue?: string;
+    maxRows?: number;
+    minRows?: number;
+    onChange?: (value: string, event: Event) => void;
+    rows?: number;
+    value?: string;
+    wrap?: 'soft' | 'hard';
+}
+interface OxTextareaGroupProps extends Omit<useRender.ComponentProps<'div'>, 'className'>, TextareaGroupVariants {
+    className?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    readOnly?: boolean;
+}
+interface OxTextareaAddonProps extends Omit<useRender.ComponentProps<'div'>, 'className'> {
+    align?: BlockAddonAlign;
+    className?: string;
+    variant?: AddonVariant;
+}
+export type { OxTextareaAddonProps, OxTextareaGroupProps, OxTextareaProps };

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

@@ -0,0 +1,6 @@
+import { OxTextareaAddon, OxTextareaBase, OxTextareaGroup } from './Textarea';
+export declare const OxTextarea: typeof OxTextareaBase & {
+    Addon: typeof OxTextareaAddon;
+    Group: typeof OxTextareaGroup;
+};
+export type { OxTextareaAddonProps, OxTextareaGroupProps, OxTextareaProps } from './Textarea.types';

package/dist/components/Textarea/index.js

@@ -0,0 +1,8 @@
+import { OxTextareaAddon as e, OxTextareaBase as t, OxTextareaGroup as n } from "./Textarea.js";
+//#region src/components/Textarea/index.ts
+var r = Object.assign(t, {
+	Addon: e,
+	Group: n
+});
+//#endregion
+export { r as OxTextarea };

package/dist/components/Toast/Toast.css

@@ -0,0 +1 @@
+[data-ox-slot=toast-viewport]{--ox-toast-width:22rem}[data-ox-slot=toast]{--ox-gap:14px;--ox-peek:14px;--ox-scale:calc(max(0, 1 - (var(--toast-index) * .05)));--ox-shrink:calc(1 - var(--ox-scale));--ox-height:var(--toast-frontmost-height,var(--toast-height));--ox-exit:0px;--ox-ease:ease;box-sizing:border-box;height:var(--ox-height);z-index:calc(1000 - var(--toast-index));contain:layout style;will-change:transform;transition:transform .4s var(--ox-ease), opacity .4s var(--ox-ease), height .4s var(--ox-ease)}[data-ox-slot=toast][data-expanded],[data-ox-slot=toast-viewport][data-ox-expanded] [data-ox-slot=toast]{height:var(--toast-height)}[data-ox-slot=toast]:after{content:"";width:100%;height:calc(var(--ox-gap) + 1px);position:absolute;left:0}[data-ox-slot=toast-viewport][data-placement^=bottom] [data-ox-slot=toast]{--ox-offset-y:calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--ox-gap) * -1) + var(--toast-swipe-movement-y));transform-origin:bottom;transform:translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--ox-peek)) - (var(--ox-shrink) * var(--ox-height)) + var(--ox-exit,0px))) scale(var(--ox-scale));bottom:0}[data-ox-slot=toast-viewport][data-placement^=bottom] [data-ox-slot=toast]:after{top:100%}[data-ox-slot=toast-viewport][data-placement^=bottom] [data-ox-slot=toast][data-starting-style]{opacity:0;transform:translateY(100%)}[data-ox-slot=toast-viewport][data-placement^=bottom] [data-ox-slot=toast][data-ending-style]:not([data-swipe-direction]){opacity:0;transform:translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--ox-offset-y) + 100%)) scale(var(--ox-scale))}[data-ox-slot=toast-viewport][data-placement^=top] [data-ox-slot=toast]{--ox-offset-y:calc(var(--toast-offset-y) + (var(--toast-index) * var(--ox-gap)) + var(--toast-swipe-movement-y));transform-origin:top;transform:translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--ox-peek)) + (var(--ox-shrink) * var(--ox-height)) + var(--ox-exit,0px))) scale(var(--ox-scale));top:0}[data-ox-slot=toast-viewport][data-placement^=top] [data-ox-slot=toast]:after{bottom:100%}[data-ox-slot=toast-viewport][data-placement^=top] [data-ox-slot=toast][data-starting-style]{opacity:0;transform:translateY(-100%)}[data-ox-slot=toast-viewport][data-placement^=top] [data-ox-slot=toast][data-ending-style]:not([data-swipe-direction]){opacity:0;transform:translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--ox-offset-y) - 100%)) scale(var(--ox-scale))}[data-ox-slot=toast-viewport] [data-ox-slot=toast][data-expanded],[data-ox-slot=toast-viewport][data-ox-expanded] [data-ox-slot=toast]{transform:translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--ox-offset-y) + var(--ox-exit,0px)))}[data-ox-slot=toast][data-limited]{opacity:0}[data-ox-slot=toast][data-ending-style]{opacity:0;transition:transform .4s var(--ox-ease), opacity .25s linear .15s}[data-ox-slot=toast][data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 150%))}[data-ox-slot=toast][data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 150%))}[data-ox-slot=toast][data-ending-style][data-swipe-direction=left]{transform:translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--ox-offset-y))}[data-ox-slot=toast][data-ending-style][data-swipe-direction=right]{transform:translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--ox-offset-y))}[data-ox-slot=toast-content]{transition:opacity .3s var(--ox-ease);overflow:hidden}[data-ox-slot=toast-content][data-behind]{opacity:0}[data-ox-slot=toast-content][data-expanded],[data-ox-slot=toast-viewport][data-ox-expanded] [data-ox-slot=toast-content]{opacity:1}@keyframes ox-toast-timer{0%{transform:scaleX(1)}to{transform:scaleX(0)}}[data-ox-slot=toast-timer]{animation:ox-toast-timer var(--ox-toast-timer-duration,5s) linear forwards}[data-ox-slot=toast-viewport][data-ox-timers-paused] [data-ox-slot=toast-timer]{animation-play-state:paused}@media (prefers-reduced-motion:reduce){[data-ox-slot=toast]{transition:opacity .25s var(--ox-ease)}[data-ox-slot=toast-timer]{opacity:0;animation-duration:var(--ox-toast-timer-duration,5s)!important}[data-ox-slot=toast-viewport] [data-ox-slot=toast],[data-ox-slot=toast-viewport] [data-ox-slot=toast][data-expanded],[data-ox-slot=toast-viewport] [data-ox-slot=toast][data-starting-style],[data-ox-slot=toast-viewport] [data-ox-slot=toast][data-ending-style]{transform:none!important}}@media (width<=600px){[data-ox-slot=toast-viewport][data-placement]{width:auto;max-width:none;inset-inline:0;transform:none}[data-ox-slot=toast-viewport][data-placement^=bottom]{margin-bottom:calc(1rem + env(safe-area-inset-bottom))}[data-ox-slot=toast-viewport][data-placement^=top]{margin-top:calc(1rem + env(safe-area-inset-top))}}

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,13 @@
+import { OxToastActionProps, OxToastCloseProps, OxToastContentProps, OxToastDescriptionProps, OxToasterProps, OxToastIconProps, OxToastPortalProps, OxToastProviderProps, OxToastRootProps, OxToastTitleProps, OxToastViewportProps } from './Toast.types';
+declare function OxToastProvider({ children, manager, ...props }: OxToastProviderProps): import("react").JSX.Element;
+declare function OxToastPortal(props: OxToastPortalProps): import("react").JSX.Element;
+declare function OxToastViewport({ className, placement, ...props }: OxToastViewportProps): import("react").JSX.Element;
+declare function OxToastRoot({ className, toast, variant, ...props }: OxToastRootProps): import("react").JSX.Element;
+declare function OxToastContent({ className, ...props }: OxToastContentProps): import("react").JSX.Element;
+declare function OxToastIcon({ children, className, loading, render, type, ...props }: OxToastIconProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxToastTitle({ className, ...props }: OxToastTitleProps): import("react").JSX.Element;
+declare function OxToastDescription({ className, ...props }: OxToastDescriptionProps): import("react").JSX.Element;
+declare function OxToastAction({ className, ...props }: OxToastActionProps): import("react").JSX.Element;
+declare function OxToastClose({ className, label, ...props }: OxToastCloseProps): import("react").JSX.Element;
+declare function OxToaster({ className, placement, portalClassName, ...props }: OxToasterProps): import("react").JSX.Element;
+export { OxToastAction, OxToastClose, OxToastContent, OxToastDescription, OxToaster, OxToastIcon, OxToastPortal, OxToastProvider, OxToastRoot, OxToastTitle, OxToastViewport, };

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

@@ -0,0 +1,120 @@
+import { VariantProps } from '../../internal/tv';
+export declare const toastVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {};
+        critical: {
+            root: string;
+            description: string;
+        };
+    };
+    placement: {
+        'top-left': {
+            viewport: string;
+        };
+        'top-center': {
+            viewport: string;
+        };
+        'top-right': {
+            viewport: string;
+        };
+        'bottom-left': {
+            viewport: string;
+        };
+        'bottom-center': {
+            viewport: string;
+        };
+        'bottom-right': {
+            viewport: string;
+        };
+    };
+}, {
+    viewport: string[];
+    root: string[];
+    timer: string[];
+    content: string[];
+    icon: string[];
+    body: string[];
+    title: string[];
+    description: string[];
+    action: string[];
+    close: string[];
+}, undefined, {
+    variant: {
+        default: {};
+        critical: {
+            root: string;
+            description: string;
+        };
+    };
+    placement: {
+        'top-left': {
+            viewport: string;
+        };
+        'top-center': {
+            viewport: string;
+        };
+        'top-right': {
+            viewport: string;
+        };
+        'bottom-left': {
+            viewport: string;
+        };
+        'bottom-center': {
+            viewport: string;
+        };
+        'bottom-right': {
+            viewport: string;
+        };
+    };
+}, {
+    viewport: string[];
+    root: string[];
+    timer: string[];
+    content: string[];
+    icon: string[];
+    body: string[];
+    title: string[];
+    description: string[];
+    action: string[];
+    close: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {};
+        critical: {
+            root: string;
+            description: string;
+        };
+    };
+    placement: {
+        'top-left': {
+            viewport: string;
+        };
+        'top-center': {
+            viewport: string;
+        };
+        'top-right': {
+            viewport: string;
+        };
+        'bottom-left': {
+            viewport: string;
+        };
+        'bottom-center': {
+            viewport: string;
+        };
+        'bottom-right': {
+            viewport: string;
+        };
+    };
+}, {
+    viewport: string[];
+    root: string[];
+    timer: string[];
+    content: string[];
+    icon: string[];
+    body: string[];
+    title: string[];
+    description: string[];
+    action: string[];
+    close: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type ToastVariants = VariantProps<typeof toastVariants>;

package/dist/components/Toast/Toast.styles.js

@@ -0,0 +1,59 @@
+import { tv as e } from "../../internal/tv.js";
+//#region src/components/Toast/Toast.styles.ts
+var t = e({
+	slots: {
+		viewport: ["fixed z-[1000] m-4 flex w-[var(--ox-toast-width)] max-w-[calc(100vw-2rem)] flex-col", "outline-none"],
+		root: [
+			"group absolute inset-x-0 select-none overflow-hidden",
+			"rounded-control border bg-popover shadow-[var(--shadow-pop)]",
+			"border-tone-outline data-[ox-tone=neutral]:border-line",
+			"focus-visible:outline-none focus-visible:shadow-[var(--focus-ring)]"
+		],
+		timer: ["pointer-events-none absolute inset-x-0 bottom-0 h-0.5 w-full origin-left", "bg-tone-ink opacity-70"],
+		content: ["flex items-start gap-3 overflow-hidden p-3"],
+		icon: [
+			"shrink-0 mt-0.5",
+			"text-tone-ink group-data-[ox-tone=neutral]:text-fg-muted",
+			"[&>svg]:size-5"
+		],
+		body: ["flex min-w-0 flex-1 flex-col break-words"],
+		title: ["text-body font-semibold tracking-tight break-words", "text-tone-ink group-data-[ox-tone=neutral]:text-fg"],
+		description: ["mt-0.5 text-body leading-snug text-fg-muted break-words"],
+		action: [
+			"mt-1.5 inline-flex w-fit cursor-pointer bg-transparent p-0",
+			"text-body font-medium text-tone-ink underline underline-offset-2",
+			"transition-opacity ease-out-quint hover:opacity-80",
+			"focus-visible:outline-none focus-visible:shadow-[var(--focus-ring)]"
+		],
+		close: [
+			"shrink-0 self-start inline-grid place-items-center cursor-pointer",
+			"size-5 rounded-sm bg-transparent text-fg-subtle pointer-coarse:size-8",
+			"transition-colors ease-out-quint hover:text-fg",
+			"focus-visible:outline-none focus-visible:shadow-[var(--focus-ring)]",
+			"[&>svg]:size-3.25"
+		]
+	},
+	variants: {
+		variant: {
+			default: {},
+			critical: {
+				root: "bg-[color-mix(in_oklab,var(--tone)_16%,var(--canvas))] border-[var(--tone-ink)]",
+				description: "text-fg"
+			}
+		},
+		placement: {
+			"top-left": { viewport: "left-0 top-0 items-start" },
+			"top-center": { viewport: "left-1/2 top-0 -translate-x-1/2 items-center" },
+			"top-right": { viewport: "right-0 top-0 items-end" },
+			"bottom-left": { viewport: "bottom-0 left-0 items-start" },
+			"bottom-center": { viewport: "bottom-0 left-1/2 -translate-x-1/2 items-center" },
+			"bottom-right": { viewport: "bottom-0 right-0 items-end" }
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		placement: "bottom-right"
+	}
+});
+//#endregion
+export { t as toastVariants };

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

@@ -0,0 +1,99 @@
+import { ReactNode } from 'react';
+import { ToastActionProps as BaseToastActionProps, ToastCloseProps as BaseToastCloseProps, ToastContentProps as BaseToastContentProps, ToastDescriptionProps as BaseToastDescriptionProps, ToastPortalProps as BaseToastPortalProps, ToastProviderProps as BaseToastProviderProps, ToastRootProps as BaseToastRootProps, ToastTitleProps as BaseToastTitleProps, ToastViewportProps as BaseToastViewportProps, ToastObject, ToastManager } from '@base-ui/react/toast';
+import { useRender } from '@base-ui/react/use-render';
+import { ToastVariants } from './Toast.styles';
+type OxToastType = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+type OxToastVariant = NonNullable<ToastVariants['variant']>;
+type OxToastPlacement = NonNullable<ToastVariants['placement']>;
+interface OxToastData {
+    actionLabel?: ReactNode;
+    custom?: ReactNode;
+    loading?: boolean;
+    timerBar?: boolean;
+    timerBarDuration?: number;
+    variant?: OxToastVariant;
+}
+interface OxToastActionOptions {
+    altText?: string;
+    label: ReactNode;
+    onClick: () => void;
+}
+interface OxToastOptions {
+    action?: OxToastActionOptions;
+    description?: ReactNode;
+    duration?: number;
+    id?: string;
+    onClose?: () => void;
+    onRemove?: () => void;
+    priority?: 'low' | 'high';
+    timerBar?: boolean;
+    title?: ReactNode;
+    type?: OxToastType;
+    variant?: OxToastVariant;
+}
+type OxToastCustomOptions = Omit<OxToastOptions, 'title' | 'description'>;
+type OxToastUpdateOptions = Partial<Omit<OxToastOptions, 'timerBar'>>;
+type OxToastPromiseState<Argument> = string | OxToastOptions | ((argument: Argument) => string | OxToastOptions);
+interface OxToastPromiseOptions<Value> {
+    error: OxToastPromiseState<unknown>;
+    loading: string | OxToastOptions;
+    success: OxToastPromiseState<Value>;
+}
+interface OxToastApi {
+    (options: OxToastOptions): string;
+    custom: (content: ReactNode, options?: OxToastCustomOptions) => string;
+    dismiss: (id?: string) => void;
+    error: (options: OxToastOptions) => string;
+    info: (options: OxToastOptions) => string;
+    loading: (options: OxToastOptions) => string;
+    promise: <Value>(promise: Promise<Value>, options: OxToastPromiseOptions<Value>) => Promise<Value>;
+    success: (options: OxToastOptions) => string;
+    update: (id: string, options: OxToastUpdateOptions) => void;
+    warning: (options: OxToastOptions) => string;
+}
+interface OxToastManager {
+    manager: ToastManager<OxToastData>;
+    toast: OxToastApi;
+}
+type UseOxToastReturn = OxToastApi & {
+    toasts: ToastObject<OxToastData>[];
+};
+interface OxToastProviderProps extends Omit<BaseToastProviderProps, 'toastManager'> {
+    manager?: ToastManager<OxToastData>;
+}
+interface OxToasterProps extends Omit<BaseToastViewportProps, 'className'> {
+    className?: string;
+    placement?: OxToastPlacement;
+    portalClassName?: string;
+}
+interface OxToastRootProps extends Omit<BaseToastRootProps, 'className'> {
+    className?: string;
+    variant?: OxToastVariant;
+}
+interface OxToastContentProps extends Omit<BaseToastContentProps, 'className'> {
+    className?: string;
+}
+interface OxToastTitleProps extends Omit<BaseToastTitleProps, 'className'> {
+    className?: string;
+}
+interface OxToastDescriptionProps extends Omit<BaseToastDescriptionProps, 'className'> {
+    className?: string;
+}
+interface OxToastIconProps extends Omit<useRender.ComponentProps<'div'>, 'children'> {
+    children?: ReactNode;
+    loading?: boolean;
+    type?: OxToastType;
+}
+interface OxToastActionProps extends Omit<BaseToastActionProps, 'className'> {
+    className?: string;
+}
+interface OxToastCloseProps extends Omit<BaseToastCloseProps, 'className' | 'children'> {
+    className?: string;
+    label?: string;
+}
+type OxToastPortalProps = BaseToastPortalProps;
+interface OxToastViewportProps extends Omit<BaseToastViewportProps, 'className'> {
+    className?: string;
+    placement?: OxToastPlacement;
+}
+export type { OxToastActionOptions, OxToastActionProps, OxToastApi, OxToastCloseProps, OxToastContentProps, OxToastCustomOptions, OxToastData, OxToastDescriptionProps, OxToasterProps, OxToastIconProps, OxToastManager, OxToastOptions, OxToastPlacement, OxToastPortalProps, OxToastPromiseOptions, OxToastPromiseState, OxToastProviderProps, OxToastRootProps, OxToastTitleProps, OxToastType, OxToastUpdateOptions, OxToastVariant, OxToastViewportProps, UseOxToastReturn, };