@moduix/react 1.1.1 → 2.1.0

package/dist/components/tags-input/TagsInput.css

@@ -29,7 +29,7 @@
 
   ._0zrPYG_control {
     box-sizing: border-box;
-    min-height: var(--tags-input-min-height, var(--input-height, var(--size-lg)));
+    min-height: var(--tags-input-min-height, var(--input-height, var(--size-md)));
     align-items: center;
     gap: var(--tags-input-control-gap, var(--spacing-1));
     border: var(--tags-input-border-width, var(--input-border-width, var(--border-width-sm)))
@@ -37,10 +37,10 @@
       var(--tags-input-border-color, var(--input-border-color, var(--color-border)));
     border-radius: var(--tags-input-radius, var(--input-radius, var(--radius-md)));
     width: 100%;
-    padding: var(--tags-input-padding-y, .3125rem) var(--tags-input-padding-x, .5rem);
+    padding: var(--tags-input-padding-y, .3125rem) var(--tags-input-padding-x, var(--spacing-2));
     background-color: var(--tags-input-bg, var(--input-bg, var(--color-background)));
     color: var(--tags-input-color, var(--input-color, var(--color-foreground)));
-    outline: var(--tags-input-focus-ring-width, var(--input-focus-ring-width, var(--input-border-width, var(--border-width-sm))))
+    outline: var(--tags-input-focus-ring-width, var(--input-focus-ring-width, var(--tags-input-border-width, var(--input-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))))
       solid transparent;
     outline-offset: var(--tags-input-focus-ring-offset, var(--input-focus-ring-offset, calc(0px - var(--tags-input-border-width, var(--input-border-width, var(--border-width-sm))))));
     transition: border-color var(--tags-input-transition, var(--input-transition, var(--transition-default))),
@@ -83,12 +83,12 @@
     gap: var(--tags-input-item-gap, var(--spacing-1));
     min-width: 0;
     max-width: 100%;
-    min-height: var(--tags-input-item-height, 1.5rem);
+    min-height: var(--tags-input-item-height, var(--size-xs));
     border: var(--tags-input-item-border-width, var(--border-width-sm)) solid
       var(--tags-input-item-border-color, transparent);
     border-radius: var(--tags-input-item-radius, var(--radius-full));
-    padding-block: var(--tags-input-item-padding-y, .125rem);
-    padding-inline: var(--tags-input-item-padding-x, .5rem);
+    padding-block: var(--tags-input-item-padding-y, var(--spacing-0-5));
+    padding-inline: var(--tags-input-item-padding-x, var(--spacing-2));
     background-color: var(--tags-input-item-bg, var(--color-secondary));
     color: var(--tags-input-item-color, var(--color-secondary-foreground));
     font-size: var(--tags-input-item-font-size, var(--text-xs));
@@ -121,8 +121,8 @@
     box-sizing: border-box;
     flex: 1 1 var(--tags-input-input-min-width, 7rem);
     min-width: var(--tags-input-input-min-width, 7rem);
-    height: var(--tags-input-input-height, 1.5rem);
-    padding: 0 var(--tags-input-input-padding-x, .25rem);
+    height: var(--tags-input-input-height, var(--size-xs));
+    padding: 0 var(--tags-input-input-padding-x, var(--spacing-1));
     color: inherit;
     font: inherit;
     font-size: var(--tags-input-input-font-size, var(--input-font-size, var(--text-sm)));
@@ -146,8 +146,8 @@
   }
 
   ._0zrPYG_itemDeleteTrigger {
-    width: var(--tags-input-trigger-size, 1rem);
-    height: var(--tags-input-trigger-size, 1rem);
+    width: var(--tags-input-trigger-size, var(--spacing-4));
+    height: var(--tags-input-trigger-size, var(--spacing-4));
     border-radius: var(--tags-input-trigger-radius, var(--radius-full));
     background-color: var(--tags-input-trigger-bg, transparent);
     color: var(--tags-input-trigger-color, currentColor);
@@ -165,8 +165,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--tags-input-trigger-icon-size, .625rem);
-      height: var(--tags-input-trigger-icon-size, .625rem);
+      width: var(--tags-input-trigger-icon-size, var(--spacing-2-5));
+      height: var(--tags-input-trigger-icon-size, var(--spacing-2-5));
       pointer-events: none;
       flex: none;
     }
@@ -176,7 +176,8 @@
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 var(--tags-input-trigger-focus-ring-width, var(--border-width-sm))
+      box-shadow: 0 0 0
+        var(--tags-input-trigger-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
         var(--tags-input-trigger-focus-ring-color, var(--color-ring));
     }
 
@@ -188,8 +189,8 @@
   }
 
   ._0zrPYG_clearTrigger {
-    --close-button-size: var(--tags-input-clear-trigger-size, 1.5rem);
-    --close-button-icon-size: var(--tags-input-clear-trigger-icon-size, .75rem);
+    --close-button-size: var(--tags-input-clear-trigger-size, var(--size-xs));
+    --close-button-icon-size: var(--tags-input-clear-trigger-icon-size, var(--spacing-3));
     --close-button-radius: var(--tags-input-clear-trigger-radius, var(--radius-sm));
     --close-button-bg: var(--tags-input-clear-trigger-bg, transparent);
     --close-button-bg-hover: var(--tags-input-clear-trigger-bg-hover, var(--color-muted));
@@ -197,49 +198,12 @@
     --close-button-color-hover: var(--tags-input-clear-trigger-color-hover, var(--color-foreground));
     --close-button-focus-ring-color: var(--tags-input-trigger-focus-ring-color, var(--color-ring));
     --close-button-focus-ring-width: var(--tags-input-trigger-focus-ring-width, var(--border-width-sm));
-    width: var(--tags-input-clear-trigger-size, 1.5rem);
-    height: var(--tags-input-clear-trigger-size, 1.5rem);
-    border-radius: var(--tags-input-clear-trigger-radius, var(--radius-sm));
-    background-color: var(--tags-input-clear-trigger-bg, transparent);
-    color: var(--tags-input-clear-trigger-color, var(--color-muted-foreground));
-    cursor: pointer;
-    transition: background-color var(--tags-input-transition, var(--transition-default)),
-      color var(--tags-input-transition, var(--transition-default)),
-      opacity var(--tags-input-transition, var(--transition-default)),
-      outline-color var(--tags-input-transition, var(--transition-default));
-    border: 0;
-    outline: 0;
+    --close-button-focus-ring-offset: var(--tags-input-trigger-focus-ring-offset, var(--focus-ring-offset));
+    --close-button-transition: var(--tags-input-transition, var(--transition-default));
+    --close-button-disabled-opacity: var(--tags-input-disabled-opacity, var(--opacity-disabled));
     flex: none;
-    justify-content: center;
     align-self: center;
-    align-items: center;
     margin-inline-start: auto;
-    padding: 0;
-    display: inline-flex;
-
-    & > svg {
-      width: var(--tags-input-clear-trigger-icon-size, .75rem);
-      height: var(--tags-input-clear-trigger-icon-size, .75rem);
-      pointer-events: none;
-      flex: none;
-    }
-
-    &:hover {
-      background-color: var(--tags-input-clear-trigger-bg-hover, var(--color-muted));
-      color: var(--tags-input-clear-trigger-color-hover, var(--color-foreground));
-    }
-
-    &:focus-visible {
-      outline: var(--tags-input-trigger-focus-ring-width, var(--border-width-sm)) solid
-        var(--tags-input-trigger-focus-ring-color, var(--color-ring));
-      outline-offset: var(--tags-input-trigger-focus-ring-offset, 2px);
-    }
-
-    &[data-disabled], &:disabled {
-      cursor: default;
-      opacity: var(--tags-input-disabled-opacity, var(--opacity-disabled));
-      pointer-events: none;
-    }
 
     &[data-readonly] {
       display: none;

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

@@ -1,20 +1,23 @@
-import { TagsInput } from "@ark-ui/react/tags-input";
+import { ReactNode } from "react";
+import { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext } from "@ark-ui/react/tags-input";
 
 //#region src/components/tags-input/TagsInput.d.ts
+declare function TagsInputItems(): import("react").JSX.Element;
 declare const TagsInput$1: import("react").ForwardRefExoticComponent<Omit<TagsInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<TagsInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<TagsInput.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Label: import("react").ForwardRefExoticComponent<Omit<TagsInput.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<TagsInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Item: import("react").ForwardRefExoticComponent<Omit<TagsInput.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemContext: (props: TagsInput.ItemContextProps) => ReactNode;
   ItemPreview: import("react").ForwardRefExoticComponent<Omit<TagsInput.ItemPreviewProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemText: import("react").ForwardRefExoticComponent<Omit<TagsInput.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   ItemDeleteTrigger: import("react").ForwardRefExoticComponent<Omit<TagsInput.ItemDeleteTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   ItemInput: import("react").ForwardRefExoticComponent<Omit<TagsInput.ItemInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<TagsInput.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   ClearTrigger: import("react").ForwardRefExoticComponent<Omit<TagsInput.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<TagsInput.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-  Context: (props: TagsInput.ContextProps) => import("react").ReactNode;
+  Context: (props: TagsInput.ContextProps) => ReactNode;
+  Items: typeof TagsInputItems;
 };
 //#endregion
-export { TagsInput$1 as TagsInput };
+export { TagsInput$1 as TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext };

package/dist/components/tags-input/TagsInput.js

@@ -1,26 +1,30 @@
-import { CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import TagsInput_module_default from "./TagsInput.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { TagsInput } from "@ark-ui/react/tags-input";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext } from "@ark-ui/react/tags-input";
 //#region src/components/tags-input/TagsInput.tsx
-const TagsInputRoot = forwardRef(function TagsInputRoot({ className, ...props }, ref) {
+const TagsInputRoot = forwardRef(function TagsInputRoot({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(TagsInput.Root, {
 		ref,
+		asChild,
 		"data-slot": "tags-input-root",
 		className: clsx(TagsInput_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
-const TagsInputRootProvider = forwardRef(function TagsInputRootProvider({ className, ...props }, ref) {
+const TagsInputRootProvider = forwardRef(function TagsInputRootProvider({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(TagsInput.RootProvider, {
 		ref,
+		asChild,
 		"data-slot": "tags-input-root-provider",
 		className: clsx(TagsInput_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
 const TagsInputLabel = forwardRef(function TagsInputLabel({ className, ...props }, ref) {
@@ -90,9 +94,9 @@ const TagsInputInput = forwardRef(function TagsInputInput({ className, ...props
 });
 const TagsInputClearTrigger = forwardRef(function TagsInputClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
 	const triggerClassName = clsx(TagsInput_module_default.clearTrigger, normalizeClassName(className));
-	if (asChild || children != null) return /* @__PURE__ */ jsx(TagsInput.ClearTrigger, {
+	if (asChild) return /* @__PURE__ */ jsx(TagsInput.ClearTrigger, {
 		ref,
-		asChild,
+		asChild: true,
 		"data-slot": "tags-input-clear-trigger",
 		className: triggerClassName,
 		"aria-label": ariaLabel,
@@ -108,32 +112,40 @@ const TagsInputClearTrigger = forwardRef(function TagsInputClearTrigger({ asChil
 		...props,
 		children: /* @__PURE__ */ jsx(CloseButton.Root, {
 			"aria-label": ariaLabel ?? (ariaLabelledBy == null ? "Clear tags" : void 0),
-			"aria-labelledby": ariaLabelledBy
+			"aria-labelledby": ariaLabelledBy,
+			children
 		})
 	});
 });
-const TagsInputHiddenInput = forwardRef(function TagsInputHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(TagsInput.HiddenInput, {
-		ref,
-		"data-slot": "tags-input-hidden-input",
-		...props
-	});
-});
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(TagsInput.HiddenInput, { "data-slot": "tags-input-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
 const TagsInputContext = TagsInput.Context;
+function TagsInputItems() {
+	return /* @__PURE__ */ jsx(TagsInputContext, { children: (tagsInput) => tagsInput.value.map((value, index) => /* @__PURE__ */ jsxs(TagsInputItem, {
+		index,
+		value,
+		children: [/* @__PURE__ */ jsxs(TagsInputItemPreview, { children: [/* @__PURE__ */ jsx(TagsInputItemText, { children: value }), /* @__PURE__ */ jsx(TagsInputItemDeleteTrigger, { "aria-label": `Remove ${value}` })] }), /* @__PURE__ */ jsx(TagsInputItemInput, {})]
+	}, `${value}-${index}`)) });
+}
 const TagsInput$1 = Object.assign(TagsInputRoot, {
 	Root: TagsInputRoot,
 	RootProvider: TagsInputRootProvider,
 	Label: TagsInputLabel,
 	Control: TagsInputControl,
 	Item: TagsInputItem,
+	ItemContext: TagsInput.ItemContext,
 	ItemPreview: TagsInputItemPreview,
 	ItemText: TagsInputItemText,
 	ItemDeleteTrigger: TagsInputItemDeleteTrigger,
 	ItemInput: TagsInputItemInput,
 	Input: TagsInputInput,
 	ClearTrigger: TagsInputClearTrigger,
-	HiddenInput: TagsInputHiddenInput,
-	Context: TagsInputContext
+	Context: TagsInputContext,
+	Items: TagsInputItems
 });
 //#endregion
-export { TagsInput$1 as TagsInput };
+export { TagsInput$1 as TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext };

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

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

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

@@ -12,7 +12,7 @@ declare const Text: import("react").ForwardRefExoticComponent<Omit<import("react
   align?: TextAlign;
   truncate?: boolean;
   lineClamp?: number;
-} & import("react").RefAttributes<HTMLParagraphElement>> & {
+} & import("react").RefAttributes<HTMLElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
     as?: TextElement;
     size?: TextSize;
@@ -21,7 +21,7 @@ declare const Text: import("react").ForwardRefExoticComponent<Omit<import("react
     align?: TextAlign;
     truncate?: boolean;
     lineClamp?: number;
-  } & import("react").RefAttributes<HTMLParagraphElement>>;
+  } & import("react").RefAttributes<HTMLElement>>;
 };
 //#endregion
 export { Text };

package/dist/components/text/Text.js

@@ -1,9 +1,9 @@
 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";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/text/Text.tsx
 const elements = {
 	div: ark.div,

package/dist/components/textarea/Textarea.css

@@ -7,15 +7,16 @@
     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);
+    padding: var(--textarea-padding-y, var(--spacing-2))
+      var(--textarea-padding-x, var(--spacing-3-5));
     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)))
+    outline: var(--textarea-focus-ring-width, var(--textarea-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
       solid transparent;
-    outline-offset: var(--textarea-focus-ring-offset, -1px);
+    outline-offset: var(--textarea-focus-ring-offset, var(--focus-ring-inset-offset));
     resize: var(--textarea-resize, vertical);
     transition: border-color var(--textarea-transition, var(--transition-default)),
       outline-color var(--textarea-transition, var(--transition-default)),

package/dist/components/textarea/Textarea.js

@@ -1,8 +1,8 @@
 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 { jsx } from "react/jsx-runtime";
 import { Field } from "@ark-ui/react/field";
 //#region src/components/textarea/Textarea.tsx
 const Textarea = forwardRef(function Textarea({ autoresize, className, ...props }, ref) {

package/dist/components/timer/Timer.css

@@ -45,8 +45,8 @@
     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);
+    padding-block: var(--timer-action-trigger-padding-y, var(--spacing-1-5));
+    padding-inline: var(--timer-action-trigger-padding-x, var(--spacing-3));
     background-color: var(--timer-action-trigger-bg, var(--color-background));
     color: var(--timer-action-trigger-color, var(--color-foreground));
     appearance: none;
@@ -71,9 +71,9 @@
     }
 
     &: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);
+      outline: var(--timer-action-trigger-focus-ring-width, var(--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, var(--focus-ring-inset-offset));
     }
 
     &:is(:disabled, [aria-disabled="true"]) {
@@ -87,8 +87,8 @@
     }
 
     & :where(svg) {
-      width: var(--timer-action-trigger-icon-size, 1rem);
-      height: var(--timer-action-trigger-icon-size, 1rem);
+      width: var(--timer-action-trigger-icon-size, var(--spacing-4));
+      height: var(--timer-action-trigger-icon-size, var(--spacing-4));
       flex-shrink: 0;
     }
   }

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

@@ -1,6 +1,16 @@
-import { Timer } from "@ark-ui/react/timer";
+import { ComponentProps, ReactNode } from "react";
+import { Timer, useTimer, useTimerContext } from "@ark-ui/react/timer";
 
 //#region src/components/timer/Timer.d.ts
+declare function TimerSegments({
+  className,
+  separator,
+  types
+}: {
+  className?: string;
+  separator?: ReactNode;
+  types: ComponentProps<typeof Timer.Item>['type'][];
+}): import("react").JSX.Element;
 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>>;
@@ -9,6 +19,8 @@ declare const Timer$1: import("react").ForwardRefExoticComponent<Omit<Timer.Root
   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>>;
+  Context: (props: Timer.ContextProps) => ReactNode;
+  Segments: typeof TimerSegments;
 };
 //#endregion
-export { Timer$1 as Timer };
+export { Timer$1 as Timer, useTimer, useTimerContext };

package/dist/components/timer/Timer.js

@@ -1,9 +1,9 @@
 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";
+import { Fragment, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Timer, useTimer, useTimerContext } from "@ark-ui/react/timer";
 //#region src/components/timer/Timer.tsx
 const TimerRoot = forwardRef(function TimerRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Timer.Root, {
@@ -61,6 +61,12 @@ const TimerActionTrigger = forwardRef(function TimerActionTrigger({ className, .
 		...props
 	});
 });
+function TimerSegments({ className, separator = ":", types }) {
+	return /* @__PURE__ */ jsx(TimerArea, {
+		className,
+		children: types.map((type, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TimerItem, { type }), index < types.length - 1 && /* @__PURE__ */ jsx(TimerSeparator, { children: separator })] }, `${type}-${index}`))
+	});
+}
 const Timer$1 = Object.assign(TimerRoot, {
 	Root: TimerRoot,
 	RootProvider: TimerRootProvider,
@@ -68,7 +74,9 @@ const Timer$1 = Object.assign(TimerRoot, {
 	Item: TimerItem,
 	Separator: TimerSeparator,
 	Control: TimerControl,
-	ActionTrigger: TimerActionTrigger
+	ActionTrigger: TimerActionTrigger,
+	Context: Timer.Context,
+	Segments: TimerSegments
 });
 //#endregion
-export { Timer$1 as Timer };
+export { Timer$1 as Timer, useTimer, useTimerContext };

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

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

package/dist/components/toast/Toast.css

@@ -11,17 +11,17 @@
     --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));
+    max-width: calc(100vw - (var(--toast-viewport-inset, var(--spacing-4)) * 2));
     min-height: var(--toast-min-height, 0);
     align-items: start;
-    gap: var(--toast-content-gap, .25rem);
+    gap: var(--toast-content-gap, var(--spacing-1));
     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);
+    padding: var(--toast-padding, var(--spacing-4));
     pointer-events: auto;
     user-select: none;
     translate: var(--x) var(--y);
@@ -36,7 +36,7 @@
       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));
+    padding-inline-end: calc(var(--toast-padding, var(--spacing-4)) + var(--toast-close-size, var(--spacing-7)));
     transition-timing-function: cubic-bezier(.21, 1.02, .73, 1);
     display: grid;
 
@@ -71,7 +71,7 @@
 
   .o69bxG_title {
     align-items: center;
-    gap: var(--toast-title-gap, .5rem);
+    gap: var(--toast-title-gap, var(--spacing-2));
     color: inherit;
     font-size: var(--toast-title-font-size, var(--text-sm));
     font-weight: var(--toast-title-font-weight, var(--weight-semibold));
@@ -93,13 +93,14 @@
     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);
+    margin-top: var(--toast-action-margin-top, var(--spacing-2));
     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);
+    padding: var(--toast-action-padding-y, var(--spacing-1))
+      var(--toast-action-padding-x, var(--spacing-2));
     font: inherit;
     font-size: var(--toast-action-font-size, var(--text-xs));
     font-weight: var(--toast-action-font-weight, var(--weight-medium));
@@ -117,27 +118,27 @@
     }
 
     &: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: var(--toast-focus-ring-width, var(--toast-action-border-width, var(--focus-ring-inset-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);
     }
   }
 
   .o69bxG_closeTrigger {
-    --close-button-size: var(--toast-close-size, 28px);
-    --close-button-icon-size: var(--toast-close-icon-size, 12px);
+    --close-button-size: var(--toast-close-size, var(--spacing-7));
+    --close-button-icon-size: var(--toast-close-icon-size, var(--spacing-3));
     --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-focus-ring-offset: var(--toast-close-focus-ring-offset, var(--focus-ring-offset));
+    --close-button-focus-ring-width: var(--toast-close-focus-ring-width, var(--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);
+    inset-block-start: var(--toast-close-offset-top, var(--spacing-2));
+    inset-inline-end: var(--toast-close-offset-right, var(--spacing-2));
   }
 
   @media (width <= 40rem) {

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

@@ -3,7 +3,9 @@ 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;
+type ToasterProps = Omit<ComponentProps<typeof Toaster>, 'children'> & OverlayPortalProps & {
+  children?: ComponentProps<typeof Toaster>['children'];
+};
 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>>;

package/dist/components/toast/Toast.js

@@ -1,10 +1,10 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import Toast_module_default from "./Toast.module.js";
-import { jsx } from "react/jsx-runtime";
 import { Portal } from "@ark-ui/react/portal";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast, Toaster, createToaster, useToastContext } from "@ark-ui/react/toast";
 //#region src/components/toast/Toast.tsx
 const DEFAULT_CLOSE_TRIGGER_LABEL = "Close toast";
@@ -16,10 +16,19 @@ const Toaster$1 = forwardRef(function Toaster$2({ className, portalled = true, p
 			ref,
 			"data-slot": "toast-toaster",
 			className: clsx(Toast_module_default.toaster, normalizeClassName(className)),
-			...props
+			...props,
+			children: props.children ?? ((toast) => /* @__PURE__ */ jsx(DefaultToast, { toast }))
 		})
 	});
 });
+function DefaultToast({ toast }) {
+	return /* @__PURE__ */ jsxs(ToastRoot, { children: [
+		toast.title != null ? /* @__PURE__ */ jsx(ToastTitle, {}) : null,
+		toast.description != null ? /* @__PURE__ */ jsx(ToastDescription, {}) : null,
+		toast.action ? /* @__PURE__ */ jsx(ToastActionTrigger, { children: toast.action.label }) : null,
+		toast.closable !== false ? /* @__PURE__ */ jsx(ToastCloseTrigger, {}) : null
+	] }, toast.id);
+}
 const ToastRoot = forwardRef(function ToastRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Toast.Root, {
 		ref,