@moduix/react 1.1.0 → 2.0.0

package/dist/components/tag/Tag.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .RPJE8a_root {
+  .mVOnGG_root {
     box-sizing: border-box;
     align-items: center;
     gap: var(--tag-gap, .375rem);
@@ -60,13 +60,13 @@
     }
   }
 
-  .RPJE8a_label {
+  .mVOnGG_label {
     text-overflow: ellipsis;
     min-width: 0;
     overflow: hidden;
   }
 
-  .RPJE8a_startElement, .RPJE8a_endElement {
+  .mVOnGG_startElement, .mVOnGG_endElement {
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
@@ -81,48 +81,18 @@
     }
   }
 
-  .RPJE8a_closeTrigger {
-    width: var(--tag-close-trigger-size, 1rem);
-    height: var(--tag-close-trigger-size, 1rem);
-    border-radius: var(--tag-close-trigger-radius, var(--radius-full));
-    background-color: var(--tag-close-trigger-bg, transparent);
-    color: inherit;
-    cursor: pointer;
-    transition: color var(--tag-transition, var(--transition-default)),
-      background-color var(--tag-transition, var(--transition-default)),
-      box-shadow var(--tag-transition, var(--transition-default));
-    border: 0;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    display: inline-flex;
-
-    & > svg {
-      width: var(--tag-close-trigger-icon-size, .625rem);
-      height: var(--tag-close-trigger-icon-size, .625rem);
-      pointer-events: none;
-      flex-shrink: 0;
-    }
-
-    &:hover {
-      background-color: var(--tag-close-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
-    }
-
-    &:focus-visible {
-      box-shadow: 0 0 0 var(--tag-close-trigger-focus-ring-offset, 0)
-          var(--tag-close-trigger-focus-ring-offset-color, transparent),
-        0 0 0
-          calc(var(--tag-close-trigger-focus-ring-width, var(--border-width-sm)) +
-              var(--tag-close-trigger-focus-ring-offset, 0))
-          var(--tag-close-trigger-focus-ring-color, var(--color-ring));
-      outline: none;
-    }
-
-    &[disabled], &[data-disabled] {
-      cursor: default;
-      opacity: var(--tag-disabled-opacity, var(--opacity-disabled));
-      pointer-events: none;
-    }
+  .mVOnGG_closeTrigger {
+    --close-button-size: var(--tag-close-trigger-size, 1rem);
+    --close-button-radius: var(--tag-close-trigger-radius, var(--radius-full));
+    --close-button-icon-size: var(--tag-close-trigger-icon-size, .625rem);
+    --close-button-bg: var(--tag-close-trigger-bg, transparent);
+    --close-button-bg-hover: var(--tag-close-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
+    --close-button-color: inherit;
+    --close-button-color-hover: inherit;
+    --close-button-disabled-opacity: var(--tag-disabled-opacity, var(--opacity-disabled));
+    --close-button-focus-ring-width: var(--tag-close-trigger-focus-ring-width, var(--border-width-sm));
+    --close-button-focus-ring-color: var(--tag-close-trigger-focus-ring-color, var(--color-ring));
+    --close-button-focus-ring-offset: var(--tag-close-trigger-focus-ring-offset, 0);
+    --close-button-transition: var(--tag-transition, var(--transition-default));
   }
 }

package/dist/components/tag/Tag.js

@@ -1,10 +1,10 @@
-import { CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import Tag_module_default from "./Tag.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/tag/Tag.tsx
 const DEFAULT_CLOSE_LABEL = "Remove tag";
 const TagRoot = forwardRef(function TagRoot({ className, size = "md", variant = "default", ...props }, ref) {
@@ -49,31 +49,18 @@ const TagEndElement = forwardRef(function TagEndElement({ className, ...props },
 		className: clsx(Tag_module_default.endElement, normalizeClassName(className))
 	});
 });
-const TagCloseTrigger = forwardRef(function TagCloseTrigger({ asChild, className, children, disabled, onClick, type, "aria-disabled": ariaDisabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
-	const isDisabled = disabled || ariaDisabled === true || ariaDisabled === "true";
-	return /* @__PURE__ */ jsx(ark.button, {
+const TagCloseTrigger = forwardRef(function TagCloseTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	return /* @__PURE__ */ jsx(CloseButton.Root, {
 		ref,
 		asChild,
-		type: asChild ? type : type ?? "button",
-		disabled,
-		"aria-disabled": ariaDisabled,
-		"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLOSE_LABEL : void 0),
-		"aria-labelledby": ariaLabelledBy,
 		...props,
 		"data-scope": "tag",
 		"data-part": "close-trigger",
 		"data-slot": "tag-close-trigger",
-		"data-disabled": isDisabled ? "" : void 0,
+		"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLOSE_LABEL : void 0),
+		"aria-labelledby": ariaLabelledBy,
 		className: clsx(Tag_module_default.closeTrigger, normalizeClassName(className)),
-		onClick: (event) => {
-			if (isDisabled) {
-				event.preventDefault();
-				event.stopPropagation();
-				return;
-			}
-			onClick?.(event);
-		},
-		children: children ?? (!asChild ? /* @__PURE__ */ jsx(CloseIcon, {}) : void 0)
+		children
 	});
 });
 const Tag = Object.assign(TagRoot, {

package/dist/components/tag/Tag.module.js

@@ -1,11 +1,11 @@
 import './Tag.css';
 //#region src/components/tag/Tag.module.css
 var Tag_module_default = {
-	"closeTrigger": "RPJE8a_closeTrigger",
-	"endElement": "RPJE8a_endElement",
-	"label": "RPJE8a_label",
-	"root": "RPJE8a_root",
-	"startElement": "RPJE8a_startElement"
+	"closeTrigger": "mVOnGG_closeTrigger",
+	"endElement": "mVOnGG_endElement",
+	"label": "mVOnGG_label",
+	"root": "mVOnGG_root",
+	"startElement": "mVOnGG_startElement"
 };
 //#endregion
 export { Tag_module_default as default };

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .K9ROda_root {
+  ._0zrPYG_root {
     box-sizing: border-box;
     gap: var(--tags-input-gap, var(--field-gap, var(--spacing-1)));
     width: var(--tags-input-width, 100%);
@@ -13,7 +13,7 @@
     }
   }
 
-  .K9ROda_label {
+  ._0zrPYG_label {
     align-items: center;
     gap: var(--tags-input-label-gap, var(--field-label-gap, var(--spacing-1)));
     color: var(--tags-input-label-color, var(--field-label-color, var(--color-foreground)));
@@ -27,7 +27,7 @@
     }
   }
 
-  .K9ROda_control {
+  ._0zrPYG_control {
     box-sizing: border-box;
     min-height: var(--tags-input-min-height, var(--input-height, var(--size-lg)));
     align-items: center;
@@ -73,11 +73,11 @@
     }
   }
 
-  .K9ROda_item {
+  ._0zrPYG_item {
     display: contents;
   }
 
-  .K9ROda_itemPreview {
+  ._0zrPYG_itemPreview {
     box-sizing: border-box;
     align-items: center;
     gap: var(--tags-input-item-gap, var(--spacing-1));
@@ -110,14 +110,14 @@
     }
   }
 
-  .K9ROda_itemText {
+  ._0zrPYG_itemText {
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
     overflow: hidden;
   }
 
-  .K9ROda_input, .K9ROda_itemInput {
+  ._0zrPYG_input, ._0zrPYG_itemInput {
     box-sizing: border-box;
     flex: 1 1 var(--tags-input-input-min-width, 7rem);
     min-width: var(--tags-input-input-min-width, 7rem);
@@ -141,11 +141,11 @@
     }
   }
 
-  .K9ROda_itemInput {
+  ._0zrPYG_itemInput {
     flex: 0 1 var(--tags-input-item-input-width, 7rem);
   }
 
-  .K9ROda_itemDeleteTrigger {
+  ._0zrPYG_itemDeleteTrigger {
     width: var(--tags-input-trigger-size, 1rem);
     height: var(--tags-input-trigger-size, 1rem);
     border-radius: var(--tags-input-trigger-radius, var(--radius-full));
@@ -187,7 +187,7 @@
     }
   }
 
-  .K9ROda_clearTrigger {
+  ._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-radius: var(--tags-input-clear-trigger-radius, var(--radius-sm));
@@ -197,49 +197,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, 2px);
+    --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/TagsInput.module.js

@@ -1,16 +1,16 @@
 import './TagsInput.css';
 //#region src/components/tags-input/TagsInput.module.css
 var TagsInput_module_default = {
-	"clearTrigger": "K9ROda_clearTrigger",
-	"control": "K9ROda_control",
-	"input": "K9ROda_input",
-	"item": "K9ROda_item",
-	"itemDeleteTrigger": "K9ROda_itemDeleteTrigger",
-	"itemInput": "K9ROda_itemInput",
-	"itemPreview": "K9ROda_itemPreview",
-	"itemText": "K9ROda_itemText",
-	"label": "K9ROda_label",
-	"root": "K9ROda_root"
+	"clearTrigger": "_0zrPYG_clearTrigger",
+	"control": "_0zrPYG_control",
+	"input": "_0zrPYG_input",
+	"item": "_0zrPYG_item",
+	"itemDeleteTrigger": "_0zrPYG_itemDeleteTrigger",
+	"itemInput": "_0zrPYG_itemInput",
+	"itemPreview": "_0zrPYG_itemPreview",
+	"itemText": "_0zrPYG_itemText",
+	"label": "_0zrPYG_label",
+	"root": "_0zrPYG_root"
 };
 //#endregion
 export { TagsInput_module_default as default };

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.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .Yuawhq_root {
+  .j--K1a_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));

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/text/Text.module.js

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

package/dist/components/textarea/Textarea.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .k8UsZW_root {
+  .bkkMzW_root {
     box-sizing: border-box;
     width: var(--textarea-width, 100%);
     max-width: var(--textarea-max-width, none);
@@ -23,15 +23,15 @@
     margin: 0;
   }
 
-  .k8UsZW_root::placeholder {
+  .bkkMzW_root::placeholder {
     color: var(--textarea-placeholder-color, var(--color-muted-foreground));
   }
 
-  .k8UsZW_root:focus-visible {
+  .bkkMzW_root:focus-visible {
     outline-color: var(--textarea-focus-ring-color, var(--color-ring));
   }
 
-  .k8UsZW_root:is([data-invalid], [aria-invalid="true"]) {
+  .bkkMzW_root:is([data-invalid], [aria-invalid="true"]) {
     border-color: var(--textarea-border-color-invalid, var(--color-destructive));
 
     &:focus-visible {
@@ -39,17 +39,17 @@
     }
   }
 
-  .k8UsZW_root:is([disabled], [data-disabled]) {
+  .bkkMzW_root:is([disabled], [data-disabled]) {
     pointer-events: none;
     opacity: var(--textarea-disabled-opacity, var(--opacity-disabled));
   }
 
-  .k8UsZW_root:is(:read-only, [data-readonly]) {
+  .bkkMzW_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] {
+  .bkkMzW_root[data-autoresize] {
     overflow-y: hidden;
   }
 }

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/textarea/Textarea.module.js

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

package/dist/components/timer/Timer.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  ._3h2dHW_root {
+  .Z6b--a_root {
     box-sizing: border-box;
     place-items: center;
     gap: var(--timer-gap, var(--spacing-3));
@@ -8,7 +8,7 @@
     display: inline-grid;
   }
 
-  ._3h2dHW_area {
+  .Z6b--a_area {
     align-items: baseline;
     gap: var(--timer-area-gap, var(--spacing-1));
     font-size: var(--timer-area-font-size, var(--text-2xl));
@@ -19,24 +19,24 @@
     display: inline-flex;
   }
 
-  ._3h2dHW_item {
+  .Z6b--a_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 {
+  .Z6b--a_separator {
     color: var(--timer-separator-color, var(--color-muted-foreground));
   }
 
-  ._3h2dHW_control {
+  .Z6b--a_control {
     align-items: center;
     gap: var(--timer-control-gap, var(--spacing-2));
     flex-wrap: wrap;
     display: inline-flex;
   }
 
-  ._3h2dHW_actionTrigger {
+  .Z6b--a_actionTrigger {
     box-sizing: border-box;
     justify-content: center;
     align-items: center;

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 };