@moduix/react 1.1.0

package/dist/components/tags-input/index.d.ts

@@ -0,0 +1,2 @@
+import { TagsInput } from "./TagsInput.js";
+export { TagsInput };

package/dist/components/text/Text.css

@@ -0,0 +1,87 @@
+@layer ui.components {
+  .Yuawhq_root {
+    font-family: var(--text-font-family, inherit);
+    font-size: var(--text-font-size-md, var(--text-md));
+    font-weight: var(--text-font-weight-regular, var(--weight-regular));
+    line-height: var(--text-line-height-md, var(--line-height-text-md));
+    letter-spacing: var(--text-letter-spacing, 0);
+    color: var(--text-default-color, var(--color-foreground));
+    text-align: start;
+    overflow-wrap: break-word;
+    margin: 0;
+
+    &[data-size="xs"] {
+      font-size: var(--text-font-size-xs, var(--text-xs));
+      line-height: var(--text-line-height-xs, var(--line-height-text-xs));
+    }
+
+    &[data-size="sm"] {
+      font-size: var(--text-font-size-sm, var(--text-sm));
+      line-height: var(--text-line-height-sm, var(--line-height-text-sm));
+    }
+
+    &[data-size="lg"] {
+      font-size: var(--text-font-size-lg, var(--text-lg));
+      line-height: var(--text-line-height-lg, var(--line-height-text-lg));
+    }
+
+    &[data-size="xl"] {
+      font-size: var(--text-font-size-xl, var(--text-xl));
+      line-height: var(--text-line-height-xl, var(--line-height-text-xl));
+    }
+
+    &[data-weight="medium"] {
+      font-weight: var(--text-font-weight-medium, var(--weight-medium));
+    }
+
+    &[data-weight="semibold"] {
+      font-weight: var(--text-font-weight-semibold, var(--weight-semibold));
+    }
+
+    &[data-weight="bold"] {
+      font-weight: var(--text-font-weight-bold, var(--weight-bold));
+    }
+
+    &[data-tone="muted"] {
+      color: var(--text-muted-color, var(--color-muted-foreground));
+    }
+
+    &[data-tone="subtle"] {
+      color: var(--text-subtle-color, var(--color-secondary-foreground));
+    }
+
+    &[data-tone="primary"] {
+      color: var(--text-primary-color, var(--color-primary));
+    }
+
+    &[data-tone="destructive"] {
+      color: var(--text-destructive-color, var(--color-destructive));
+    }
+
+    &[data-align="left"] {
+      text-align: left;
+    }
+
+    &[data-align="center"] {
+      text-align: center;
+    }
+
+    &[data-align="right"] {
+      text-align: right;
+    }
+
+    &[data-truncate] {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    &[data-line-clamp] {
+      white-space: normal;
+      -webkit-line-clamp: var(--text-line-clamp);
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      overflow: hidden;
+    }
+  }
+}

package/dist/components/text/Text.d.ts

@@ -0,0 +1,27 @@
+//#region src/components/text/Text.d.ts
+type TextElement = 'p' | 'span' | 'small' | 'strong' | 'em' | 'div';
+type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+type TextTone = 'default' | 'muted' | 'subtle' | 'primary' | 'destructive';
+type TextAlign = 'left' | 'center' | 'right';
+declare const Text: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  as?: TextElement;
+  size?: TextSize;
+  weight?: TextWeight;
+  tone?: TextTone;
+  align?: TextAlign;
+  truncate?: boolean;
+  lineClamp?: number;
+} & import("react").RefAttributes<HTMLParagraphElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    as?: TextElement;
+    size?: TextSize;
+    weight?: TextWeight;
+    tone?: TextTone;
+    align?: TextAlign;
+    truncate?: boolean;
+    lineClamp?: number;
+  } & import("react").RefAttributes<HTMLParagraphElement>>;
+};
+//#endregion
+export { Text };

package/dist/components/text/Text.js

@@ -0,0 +1,43 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Text_module_default from "./Text.module.js";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+//#region src/components/text/Text.tsx
+const elements = {
+	div: ark.div,
+	em: ark.em,
+	p: ark.p,
+	small: ark.small,
+	span: ark.span,
+	strong: ark.strong
+};
+const TextRoot = forwardRef(function TextRoot({ as, asChild, size, weight, tone = "default", align, truncate, lineClamp, className, style, ...props }, ref) {
+	const Element = elements[as ?? "p"];
+	const defaultSize = as === "small" ? "sm" : "md";
+	const defaultWeight = as === "strong" ? "semibold" : "regular";
+	const lineClampStyle = lineClamp === void 0 ? style : {
+		...style,
+		"--text-line-clamp": lineClamp
+	};
+	return /* @__PURE__ */ jsx(Element, {
+		ref,
+		asChild,
+		...props,
+		"data-scope": "text",
+		"data-part": "root",
+		"data-slot": "text-root",
+		"data-size": size ?? defaultSize,
+		"data-weight": weight ?? defaultWeight,
+		"data-tone": tone,
+		"data-align": align,
+		"data-truncate": truncate ? "" : void 0,
+		"data-line-clamp": lineClamp === void 0 ? void 0 : "",
+		className: clsx(Text_module_default.root, normalizeClassName(className)),
+		style: lineClampStyle
+	});
+});
+const Text = Object.assign(TextRoot, { Root: TextRoot });
+//#endregion
+export { Text };

package/dist/components/text/Text.module.js

@@ -0,0 +1,5 @@
+import './Text.css';
+//#region src/components/text/Text.module.css
+var Text_module_default = { "root": "Yuawhq_root" };
+//#endregion
+export { Text_module_default as default };

package/dist/components/textarea/Textarea.css

@@ -0,0 +1,55 @@
+@layer ui.components {
+  .k8UsZW_root {
+    box-sizing: border-box;
+    width: var(--textarea-width, 100%);
+    max-width: var(--textarea-max-width, none);
+    min-height: var(--textarea-min-height, 6rem);
+    border: var(--textarea-border-width, var(--border-width-sm)) var(--textarea-border-style, solid)
+      var(--textarea-border-color, var(--color-border));
+    border-radius: var(--textarea-radius, var(--radius-md));
+    padding: var(--textarea-padding-y, .5rem) var(--textarea-padding-x, .875rem);
+    background-color: var(--textarea-bg, var(--color-background));
+    color: var(--textarea-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--textarea-font-size, var(--text-md));
+    line-height: var(--textarea-line-height, var(--line-height-text-md));
+    outline: var(--textarea-focus-ring-width, var(--textarea-border-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: var(--textarea-focus-ring-offset, -1px);
+    resize: var(--textarea-resize, vertical);
+    transition: border-color var(--textarea-transition, var(--transition-default)),
+      outline-color var(--textarea-transition, var(--transition-default)),
+      opacity var(--textarea-transition, var(--transition-default));
+    margin: 0;
+  }
+
+  .k8UsZW_root::placeholder {
+    color: var(--textarea-placeholder-color, var(--color-muted-foreground));
+  }
+
+  .k8UsZW_root:focus-visible {
+    outline-color: var(--textarea-focus-ring-color, var(--color-ring));
+  }
+
+  .k8UsZW_root:is([data-invalid], [aria-invalid="true"]) {
+    border-color: var(--textarea-border-color-invalid, var(--color-destructive));
+
+    &:focus-visible {
+      outline-color: var(--textarea-border-color-invalid, var(--color-destructive));
+    }
+  }
+
+  .k8UsZW_root:is([disabled], [data-disabled]) {
+    pointer-events: none;
+    opacity: var(--textarea-disabled-opacity, var(--opacity-disabled));
+  }
+
+  .k8UsZW_root:is(:read-only, [data-readonly]) {
+    background-color: var(--textarea-readonly-bg, var(--textarea-bg, var(--color-background)));
+    color: var(--textarea-readonly-color, var(--textarea-color, var(--color-foreground)));
+  }
+
+  .k8UsZW_root[data-autoresize] {
+    overflow-y: hidden;
+  }
+}

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

@@ -0,0 +1,6 @@
+import { Field } from "@ark-ui/react/field";
+
+//#region src/components/textarea/Textarea.d.ts
+declare const Textarea: import("react").ForwardRefExoticComponent<Omit<Field.TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+export { Textarea };

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,21 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Textarea_module_default from "./Textarea.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Field } from "@ark-ui/react/field";
+//#region src/components/textarea/Textarea.tsx
+const Textarea = forwardRef(function Textarea({ autoresize, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Field.Textarea, {
+		ref,
+		...props,
+		"data-scope": "field",
+		"data-part": "textarea",
+		"data-slot": "textarea-root",
+		"data-autoresize": autoresize ? "" : void 0,
+		className: clsx(Textarea_module_default.root, normalizeClassName(className)),
+		autoresize
+	});
+});
+//#endregion
+export { Textarea };

package/dist/components/textarea/Textarea.module.js

@@ -0,0 +1,5 @@
+import './Textarea.css';
+//#region src/components/textarea/Textarea.module.css
+var Textarea_module_default = { "root": "k8UsZW_root" };
+//#endregion
+export { Textarea_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Textarea } from "./Textarea.js";
+export { Textarea };

package/dist/components/timer/Timer.css

@@ -0,0 +1,95 @@
+@layer ui.components {
+  ._3h2dHW_root {
+    box-sizing: border-box;
+    place-items: center;
+    gap: var(--timer-gap, var(--spacing-3));
+    width: var(--timer-width, max-content);
+    color: var(--timer-color, var(--color-foreground));
+    display: inline-grid;
+  }
+
+  ._3h2dHW_area {
+    align-items: baseline;
+    gap: var(--timer-area-gap, var(--spacing-1));
+    font-size: var(--timer-area-font-size, var(--text-2xl));
+    font-weight: var(--timer-area-font-weight, var(--weight-semibold));
+    line-height: var(--timer-area-line-height, var(--line-height-text-sm));
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
+    display: inline-flex;
+  }
+
+  ._3h2dHW_item {
+    min-width: var(--timer-item-min-width, 2ch);
+    color: var(--timer-item-color, currentColor);
+    text-align: var(--timer-item-text-align, center);
+  }
+
+  ._3h2dHW_separator {
+    color: var(--timer-separator-color, var(--color-muted-foreground));
+  }
+
+  ._3h2dHW_control {
+    align-items: center;
+    gap: var(--timer-control-gap, var(--spacing-2));
+    flex-wrap: wrap;
+    display: inline-flex;
+  }
+
+  ._3h2dHW_actionTrigger {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--timer-action-trigger-gap, var(--spacing-2));
+    min-height: var(--timer-action-trigger-height, var(--size-md));
+    border: var(--timer-action-trigger-border-width, var(--border-width-sm)) solid
+      var(--timer-action-trigger-border-color, var(--color-border));
+    border-radius: var(--timer-action-trigger-radius, var(--radius-md));
+    padding-block: var(--timer-action-trigger-padding-y, .375rem);
+    padding-inline: var(--timer-action-trigger-padding-x, .75rem);
+    background-color: var(--timer-action-trigger-bg, var(--color-background));
+    color: var(--timer-action-trigger-color, var(--color-foreground));
+    appearance: none;
+    font: inherit;
+    font-size: var(--timer-action-trigger-font-size, var(--text-sm));
+    font-weight: var(--timer-action-trigger-font-weight, var(--weight-medium));
+    line-height: var(--timer-action-trigger-line-height, var(--line-height-text-sm));
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--timer-action-trigger-transition, var(--transition-default)),
+      border-color var(--timer-action-trigger-transition, var(--transition-default)),
+      color var(--timer-action-trigger-transition, var(--transition-default)),
+      opacity var(--timer-action-trigger-transition, var(--transition-default)),
+      box-shadow var(--timer-action-trigger-transition, var(--transition-default));
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--timer-action-trigger-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--timer-action-trigger-focus-ring-width, var(--border-width-md)) solid
+        var(--timer-action-trigger-focus-ring-color, var(--color-ring));
+      outline-offset: var(--timer-action-trigger-focus-ring-offset, -1px);
+    }
+
+    &:is(:disabled, [aria-disabled="true"]) {
+      opacity: var(--timer-action-trigger-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+      pointer-events: none;
+    }
+
+    &[hidden] {
+      display: none;
+    }
+
+    & :where(svg) {
+      width: var(--timer-action-trigger-icon-size, 1rem);
+      height: var(--timer-action-trigger-icon-size, 1rem);
+      flex-shrink: 0;
+    }
+  }
+}

package/dist/components/timer/Timer.d.ts

@@ -0,0 +1,14 @@
+import { Timer } from "@ark-ui/react/timer";
+
+//#region src/components/timer/Timer.d.ts
+declare const Timer$1: import("react").ForwardRefExoticComponent<Omit<Timer.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<Timer.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<Timer.RootProviderBaseProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Area: import("react").ForwardRefExoticComponent<Omit<Timer.AreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<Timer.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Separator: import("react").ForwardRefExoticComponent<Omit<Timer.SeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<Timer.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ActionTrigger: import("react").ForwardRefExoticComponent<Omit<Timer.ActionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { Timer$1 as Timer };

package/dist/components/timer/Timer.js

@@ -0,0 +1,74 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Timer_module_default from "./Timer.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Timer } from "@ark-ui/react/timer";
+//#region src/components/timer/Timer.tsx
+const TimerRoot = forwardRef(function TimerRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Timer.Root, {
+		ref,
+		"data-slot": "timer-root",
+		className: clsx(Timer_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const TimerRootProvider = forwardRef(function TimerRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Timer.RootProvider, {
+		ref,
+		"data-slot": "timer-root-provider",
+		className: clsx(Timer_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const TimerArea = forwardRef(function TimerArea({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Timer.Area, {
+		ref,
+		"data-slot": "timer-area",
+		className: clsx(Timer_module_default.area, normalizeClassName(className)),
+		...props
+	});
+});
+const TimerItem = forwardRef(function TimerItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Timer.Item, {
+		ref,
+		"data-slot": "timer-item",
+		className: clsx(Timer_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const TimerSeparator = forwardRef(function TimerSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Timer.Separator, {
+		ref,
+		"data-slot": "timer-separator",
+		className: clsx(Timer_module_default.separator, normalizeClassName(className)),
+		...props
+	});
+});
+const TimerControl = forwardRef(function TimerControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Timer.Control, {
+		ref,
+		"data-slot": "timer-control",
+		className: clsx(Timer_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const TimerActionTrigger = forwardRef(function TimerActionTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Timer.ActionTrigger, {
+		ref,
+		"data-slot": "timer-action-trigger",
+		className: clsx(Timer_module_default.actionTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const Timer$1 = Object.assign(TimerRoot, {
+	Root: TimerRoot,
+	RootProvider: TimerRootProvider,
+	Area: TimerArea,
+	Item: TimerItem,
+	Separator: TimerSeparator,
+	Control: TimerControl,
+	ActionTrigger: TimerActionTrigger
+});
+//#endregion
+export { Timer$1 as Timer };

package/dist/components/timer/Timer.module.js

@@ -0,0 +1,12 @@
+import './Timer.css';
+//#region src/components/timer/Timer.module.css
+var Timer_module_default = {
+	"actionTrigger": "_3h2dHW_actionTrigger",
+	"area": "_3h2dHW_area",
+	"control": "_3h2dHW_control",
+	"item": "_3h2dHW_item",
+	"root": "_3h2dHW_root",
+	"separator": "_3h2dHW_separator"
+};
+//#endregion
+export { Timer_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Timer } from "./Timer.js";
+export { Timer };

package/dist/components/toast/Toast.css

@@ -0,0 +1,154 @@
+@layer ui.components {
+  .h6KXRa_toaster {
+    z-index: var(--toast-z-index, var(--z-toast));
+  }
+
+  .h6KXRa_root {
+    --toast-trigger-bg-default: transparent;
+    --toast-trigger-bg-hover-default: var(--color-accent);
+    --toast-trigger-border-color-default: var(--color-border);
+    --toast-trigger-color-default: var(--color-foreground);
+    --toast-trigger-focus-ring-color-default: var(--color-ring);
+    box-sizing: border-box;
+    width: var(--toast-width, 20rem);
+    max-width: calc(100vw - (var(--toast-viewport-inset, 1rem) * 2));
+    min-height: var(--toast-min-height, 0);
+    align-items: start;
+    gap: var(--toast-content-gap, .25rem);
+    border: var(--toast-border-width, var(--border-width-sm)) solid
+      var(--toast-border-color, var(--toast-border-color-default, var(--color-border)));
+    border-radius: var(--toast-radius, var(--radius-lg));
+    background-color: var(--toast-bg, var(--toast-bg-default, var(--color-popover)));
+    color: var(--toast-color, var(--toast-color-default, var(--color-popover-foreground)));
+    box-shadow: var(--toast-shadow, var(--shadow-lg));
+    padding: var(--toast-padding, 1rem);
+    pointer-events: auto;
+    user-select: none;
+    translate: var(--x) var(--y);
+    scale: var(--scale);
+    z-index: var(--z-index);
+    height: var(--height);
+    opacity: var(--opacity);
+    will-change: translate, opacity, scale;
+    transition: translate var(--toast-transition, var(--duration-slow)),
+      scale var(--toast-transition, var(--duration-slow)),
+      opacity var(--toast-transition, var(--duration-slow)),
+      height var(--toast-transition, var(--duration-slow)),
+      box-shadow var(--transition-fast);
+    background-clip: padding-box;
+    padding-inline-end: calc(var(--toast-padding, 1rem) + var(--toast-close-size, 28px));
+    transition-timing-function: cubic-bezier(.21, 1.02, .73, 1);
+    display: grid;
+
+    &[data-state="closed"] {
+      transition: translate var(--toast-transition-out, var(--duration-slow)),
+        scale var(--toast-transition-out, var(--duration-slow)),
+        opacity var(--toast-opacity-transition-out, var(--duration-normal));
+      transition-timing-function: cubic-bezier(.06, .71, .55, 1);
+    }
+
+    &[data-type="success"] {
+      --toast-bg-default: color-mix(in oklab, var(--color-success) 10%, var(--color-background));
+      --toast-border-color-default: color-mix(in oklab, var(--color-success) 34%, transparent);
+      --toast-color-default: var(--color-foreground);
+      --toast-description-color-default: var(--color-muted-foreground);
+    }
+
+    &[data-type="warning"] {
+      --toast-bg-default: color-mix(in oklab, var(--color-warning) 13%, var(--color-background));
+      --toast-border-color-default: color-mix(in oklab, var(--color-warning) 38%, transparent);
+      --toast-color-default: var(--color-foreground);
+      --toast-description-color-default: var(--color-muted-foreground);
+    }
+
+    &[data-type="destructive"], &[data-type="error"] {
+      --toast-bg-default: color-mix(in oklab, var(--color-destructive) 9%, var(--color-background));
+      --toast-border-color-default: color-mix(in oklab, var(--color-destructive) 35%, transparent);
+      --toast-color-default: var(--color-foreground);
+      --toast-description-color-default: var(--color-muted-foreground);
+    }
+  }
+
+  .h6KXRa_title {
+    align-items: center;
+    gap: var(--toast-title-gap, .5rem);
+    color: inherit;
+    font-size: var(--toast-title-font-size, var(--text-sm));
+    font-weight: var(--toast-title-font-weight, var(--weight-semibold));
+    line-height: var(--toast-title-line-height, var(--line-height-text-sm));
+    margin: 0;
+    display: flex;
+  }
+
+  .h6KXRa_description {
+    color: var(--toast-description-color, var(--toast-description-color-default, var(--color-muted-foreground)));
+    font-size: var(--toast-description-font-size, var(--text-sm));
+    line-height: var(--toast-description-line-height, var(--line-height-text-sm));
+    margin: 0;
+  }
+
+  .h6KXRa_actionTrigger {
+    justify-content: center;
+    align-items: center;
+    gap: var(--toast-action-gap, var(--spacing-2));
+    width: max-content;
+    min-height: var(--toast-action-min-height, var(--size-xs));
+    margin-top: var(--toast-action-margin-top, .5rem);
+    border: var(--toast-action-border-width, var(--toast-border-width, var(--border-width-sm)))
+      solid var(--toast-action-border-color, var(--toast-trigger-border-color-default));
+    border-radius: var(--toast-action-radius, var(--radius-sm));
+    background: var(--toast-action-bg, var(--toast-trigger-bg-default));
+    color: var(--toast-action-color, var(--toast-trigger-color-default));
+    padding: var(--toast-action-padding-y, .25rem) var(--toast-action-padding-x, .5rem);
+    font: inherit;
+    font-size: var(--toast-action-font-size, var(--text-xs));
+    font-weight: var(--toast-action-font-weight, var(--weight-medium));
+    line-height: var(--toast-action-line-height, var(--line-height-text-xs));
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: background var(--transition-fast),
+      border-color var(--transition-fast),
+      color var(--transition-fast);
+    display: inline-flex;
+
+    &:hover {
+      background: var(--toast-action-bg-hover, var(--toast-trigger-bg-hover-default));
+    }
+
+    &:focus-visible {
+      outline: var(--toast-focus-ring-width, var(--border-width-sm)) solid
+        var(--toast-focus-ring-color, var(--toast-trigger-focus-ring-color-default));
+      outline-offset: var(--toast-focus-ring-offset, 0);
+    }
+  }
+
+  .h6KXRa_closeTrigger {
+    --close-button-size: var(--toast-close-size, 28px);
+    --close-button-icon-size: var(--toast-close-icon-size, 12px);
+    --close-button-radius: var(--toast-close-radius, var(--radius-sm));
+    --close-button-bg: var(--toast-close-bg, transparent);
+    --close-button-bg-hover: var(--toast-close-bg-hover, var(--color-muted));
+    --close-button-color: var(--toast-close-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--toast-close-color-hover, var(--color-foreground));
+    --close-button-focus-ring-color: var(--toast-focus-ring-color, var(--color-ring));
+    --close-button-focus-ring-offset: var(--toast-close-focus-ring-offset, 2px);
+    --close-button-focus-ring-width: var(--toast-close-focus-ring-width, var(--border-width-md));
+    --close-button-transition: var(--toast-close-transition, var(--transition-default));
+    position: absolute;
+    inset-block-start: var(--toast-close-offset-top, .5rem);
+    inset-inline-end: var(--toast-close-offset-right, .5rem);
+  }
+
+  @media (width <= 40rem) {
+    .h6KXRa_toaster {
+      width: 100%;
+    }
+
+    .h6KXRa_root {
+      width: calc(100% - (var(--gap) * 2));
+      max-width: none;
+      inset-inline: 0;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
+import { ComponentProps } from "react";
+import { Toast, Toaster, createToaster } from "@ark-ui/react/toast";
+
+//#region src/components/toast/Toast.d.ts
+type ToasterProps = ComponentProps<typeof Toaster> & OverlayPortalProps;
+declare const Toaster$1: import("react").ForwardRefExoticComponent<Omit<ToasterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Toast$1: import("react").ForwardRefExoticComponent<Omit<Toast.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<Toast.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<Toast.TitleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<Toast.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ActionTrigger: import("react").ForwardRefExoticComponent<Omit<Toast.ActionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<Toast.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Toaster: import("react").ForwardRefExoticComponent<Omit<ToasterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Toast$1 as Toast, Toaster$1 as Toaster, createToaster };