@moduix/react 2.2.0 → 2.2.4

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

@@ -1,151 +1,201 @@
-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 { clsx } from "clsx";
-import { Children, cloneElement, forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useFieldContext } from "@ark-ui/react/field";
 import { TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext } from "@ark-ui/react/tags-input";
-//#region src/components/tags-input/TagsInput.tsx
-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,
-		children: withHiddenInput(children, asChild)
-	});
+import { clsx } from "clsx";
+import { Children, cloneElement, forwardRef, useEffect, useRef } from "react";
+import { CloseIcon } from "../../internal/icons/ui/index.js";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { CloseButton } from "../close-button/index.js";
+import TagsInput_module from "./TagsInput.module.js";
+const TagsInput_TagsInputRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(TagsInput.Root, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "tags-input-root",
+        className: clsx(TagsInput_module.root, normalizeClassName(className)),
+        ...props,
+        children: withHiddenInput(children, asChild)
+    });
 });
-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,
-		children: withHiddenInput(children, asChild)
-	});
+const TagsInput_TagsInputRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(TagsInput.RootProvider, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "tags-input-root-provider",
+        className: clsx(TagsInput_module.root, normalizeClassName(className)),
+        ...props,
+        children: withHiddenInput(children, asChild)
+    });
 });
-const TagsInputLabel = forwardRef(function TagsInputLabel({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(TagsInput.Label, {
-		ref,
-		"data-slot": "tags-input-label",
-		className: clsx(TagsInput_module_default.label, normalizeClassName(className)),
-		...props
-	});
+const TagsInput_TagsInputLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(TagsInput.Label, {
+        ref: ref,
+        "data-slot": "tags-input-label",
+        className: clsx(TagsInput_module.label, normalizeClassName(className)),
+        ...props
+    });
 });
-const TagsInputControl = forwardRef(function TagsInputControl({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(TagsInput.Control, {
-		ref,
-		"data-slot": "tags-input-control",
-		className: clsx(TagsInput_module_default.control, normalizeClassName(className)),
-		...props
-	});
+const TagsInput_TagsInputControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(TagsInput.Control, {
+        ref: ref,
+        "data-slot": "tags-input-control",
+        className: clsx(TagsInput_module.control, normalizeClassName(className)),
+        ...props
+    });
 });
-const TagsInputItem = forwardRef(function TagsInputItem({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(TagsInput.Item, {
-		ref,
-		"data-slot": "tags-input-item",
-		className: clsx(TagsInput_module_default.item, normalizeClassName(className)),
-		...props
-	});
+const TagsInput_TagsInputItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(TagsInput.Item, {
+        ref: ref,
+        "data-slot": "tags-input-item",
+        className: clsx(TagsInput_module.item, normalizeClassName(className)),
+        ...props
+    });
 });
-const TagsInputItemPreview = forwardRef(function TagsInputItemPreview({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(TagsInput.ItemPreview, {
-		ref,
-		"data-slot": "tags-input-item-preview",
-		className: clsx(TagsInput_module_default.itemPreview, normalizeClassName(className)),
-		...props
-	});
+const TagsInput_TagsInputItemPreview = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(TagsInput.ItemPreview, {
+        ref: ref,
+        "data-slot": "tags-input-item-preview",
+        className: clsx(TagsInput_module.itemPreview, normalizeClassName(className)),
+        ...props
+    });
 });
-const TagsInputItemText = forwardRef(function TagsInputItemText({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(TagsInput.ItemText, {
-		ref,
-		"data-slot": "tags-input-item-text",
-		className: clsx(TagsInput_module_default.itemText, normalizeClassName(className)),
-		...props
-	});
+const TagsInput_TagsInputItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(TagsInput.ItemText, {
+        ref: ref,
+        "data-slot": "tags-input-item-text",
+        className: clsx(TagsInput_module.itemText, normalizeClassName(className)),
+        ...props
+    });
 });
-const TagsInputItemDeleteTrigger = forwardRef(function TagsInputItemDeleteTrigger({ className, children, ...props }, ref) {
-	return /* @__PURE__ */ jsx(TagsInput.ItemDeleteTrigger, {
-		ref,
-		"data-slot": "tags-input-item-delete-trigger",
-		className: clsx(TagsInput_module_default.itemDeleteTrigger, normalizeClassName(className)),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
-	});
+const TagsInput_TagsInputItemDeleteTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(TagsInput.ItemDeleteTrigger, {
+        ref: ref,
+        "data-slot": "tags-input-item-delete-trigger",
+        className: clsx(TagsInput_module.itemDeleteTrigger, normalizeClassName(className)),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(CloseIcon, {})
+    });
 });
-const TagsInputItemInput = forwardRef(function TagsInputItemInput({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(TagsInput.ItemInput, {
-		ref,
-		"data-slot": "tags-input-item-input",
-		className: clsx(TagsInput_module_default.itemInput, normalizeClassName(className)),
-		...props
-	});
+const TagsInput_TagsInputItemInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(TagsInput.ItemInput, {
+        ref: ref,
+        "data-slot": "tags-input-item-input",
+        className: clsx(TagsInput_module.itemInput, normalizeClassName(className)),
+        ...props
+    });
 });
-const TagsInputInput = forwardRef(function TagsInputInput({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(TagsInput.Input, {
-		ref,
-		"data-slot": "tags-input-input",
-		className: clsx(TagsInput_module_default.input, normalizeClassName(className)),
-		...props
-	});
+const TagsInput_TagsInputInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(TagsInput.Input, {
+        ref: ref,
+        "data-slot": "tags-input-input",
+        className: clsx(TagsInput_module.input, normalizeClassName(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) return /* @__PURE__ */ jsx(TagsInput.ClearTrigger, {
-		ref,
-		asChild: true,
-		"data-slot": "tags-input-clear-trigger",
-		className: triggerClassName,
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		...props,
-		children
-	});
-	return /* @__PURE__ */ jsx(TagsInput.ClearTrigger, {
-		ref,
-		asChild: true,
-		"data-slot": "tags-input-clear-trigger",
-		className: triggerClassName,
-		...props,
-		children: /* @__PURE__ */ jsx(CloseButton.Root, {
-			"aria-label": ariaLabel ?? (ariaLabelledBy == null ? "Clear tags" : void 0),
-			"aria-labelledby": ariaLabelledBy,
-			children
-		})
-	});
+const TagsInput_TagsInputClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
+    const triggerClassName = clsx(TagsInput_module.clearTrigger, normalizeClassName(className));
+    const clearTriggerLabel = useTagsInputContext().getClearTriggerProps()['aria-label'];
+    if (asChild) return /*#__PURE__*/ jsx(TagsInput.ClearTrigger, {
+        ref: ref,
+        asChild: true,
+        "data-slot": "tags-input-clear-trigger",
+        className: triggerClassName,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        ...props,
+        children: children
+    });
+    return /*#__PURE__*/ jsx(TagsInput.ClearTrigger, {
+        ref: ref,
+        asChild: true,
+        "data-slot": "tags-input-clear-trigger",
+        className: triggerClassName,
+        ...props,
+        children: /*#__PURE__*/ jsx(CloseButton.Root, {
+            "aria-label": ariaLabel ?? clearTriggerLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "data-part": "clear-trigger",
+            "data-scope": "tags-input",
+            "data-slot": "tags-input-clear-trigger",
+            children: children
+        })
+    });
 });
 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 hiddenInput = /*#__PURE__*/ jsx(TagsInputHiddenInput, {});
+    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            children,
+            hiddenInput
+        ]
+    });
+    const child = Children.only(children);
+    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
 }
 const TagsInputContext = TagsInput.Context;
+function TagsInputHiddenInput() {
+    const field = useFieldContext();
+    const tagsInput = useTagsInputContext();
+    const inputRef = useRef(null);
+    const initialValue = useRef(tagsInput.value);
+    const initialInputValue = useRef(tagsInput.inputValue);
+    const { defaultValue: _, ...hiddenInputProps } = tagsInput.getHiddenInputProps();
+    useEffect(()=>{
+        const form = inputRef.current?.form;
+        if (!form) return;
+        const handleReset = ()=>{
+            queueMicrotask(()=>{
+                tagsInput.setValue(initialValue.current);
+                tagsInput.setInputValue(initialInputValue.current);
+            });
+        };
+        form.addEventListener('reset', handleReset);
+        return ()=>form.removeEventListener('reset', handleReset);
+    }, [
+        tagsInput
+    ]);
+    return /*#__PURE__*/ jsx("input", {
+        ...hiddenInputProps,
+        ref: inputRef,
+        value: tagsInput.valueAsString,
+        readOnly: true,
+        "aria-describedby": field?.ariaDescribedby,
+        "data-slot": "tags-input-hidden-input"
+    });
+}
 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}`)) });
+    return /*#__PURE__*/ jsx(TagsInputContext, {
+        children: (tagsInput)=>tagsInput.value.map((value, index)=>/*#__PURE__*/ jsxs(TagsInput_TagsInputItem, {
+                    index: index,
+                    value: value,
+                    children: [
+                        /*#__PURE__*/ jsxs(TagsInput_TagsInputItemPreview, {
+                            children: [
+                                /*#__PURE__*/ jsx(TagsInput_TagsInputItemText, {
+                                    children: value
+                                }),
+                                /*#__PURE__*/ jsx(TagsInput_TagsInputItemDeleteTrigger, {})
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(TagsInput_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,
-	Context: TagsInputContext,
-	Items: TagsInputItems
+const TagsInput_TagsInput = Object.assign(TagsInput_TagsInputRoot, {
+    Root: TagsInput_TagsInputRoot,
+    RootProvider: TagsInput_TagsInputRootProvider,
+    Label: TagsInput_TagsInputLabel,
+    Control: TagsInput_TagsInputControl,
+    Item: TagsInput_TagsInputItem,
+    ItemContext: TagsInput.ItemContext,
+    ItemPreview: TagsInput_TagsInputItemPreview,
+    ItemText: TagsInput_TagsInputItemText,
+    ItemDeleteTrigger: TagsInput_TagsInputItemDeleteTrigger,
+    ItemInput: TagsInput_TagsInputItemInput,
+    Input: TagsInput_TagsInputInput,
+    ClearTrigger: TagsInput_TagsInputClearTrigger,
+    Context: TagsInputContext,
+    Items: TagsInputItems
 });
-//#endregion
-export { TagsInput$1 as TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext };
+export { TagsInput_TagsInput as TagsInput, useTagsInput, useTagsInputContext, useTagsInputItemContext };

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

@@ -1,16 +1,14 @@
-import './TagsInput.css';
-//#region src/components/tags-input/TagsInput.module.css
-var TagsInput_module_default = {
-	"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"
+import "./TagsInput_module.css";
+const TagsInput_module = {
+    root: "root-hoYMpF",
+    label: "label-EB302B",
+    control: "control-aj7rxt",
+    item: "item-YnX6WJ",
+    itemPreview: "itemPreview-Jtpko5",
+    itemText: "itemText-LUwEuF",
+    input: "input-uYY2LW",
+    itemInput: "itemInput-fToxnH",
+    itemDeleteTrigger: "itemDeleteTrigger-Fx1XkC",
+    clearTrigger: "clearTrigger-llMk8h"
 };
-//#endregion
-export { TagsInput_module_default as default };
+export default TagsInput_module;

package/dist/components/tags-input/{TagsInput.css → TagsInput_module.css}

@@ -1,5 +1,5 @@
 @layer moduix.components {
-  ._0zrPYG_root {
+  .root-hoYMpF {
     box-sizing: border-box;
     gap: var(--moduix-tags-input-gap, var(--moduix-field-gap, var(--moduix-spacing-1)));
     width: var(--moduix-tags-input-width, 100%);
@@ -7,13 +7,13 @@
     color: var(--moduix-tags-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
     flex-direction: column;
     display: flex;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
-    }
+  .root-hoYMpF[data-disabled] {
+    opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
   }
 
-  ._0zrPYG_label {
+  .label-EB302B {
     align-items: center;
     gap: var(--moduix-tags-input-label-gap, var(--moduix-field-label-gap, var(--moduix-spacing-1)));
     color: var(--moduix-tags-input-label-color, var(--moduix-field-label-color, var(--moduix-color-foreground)));
@@ -21,13 +21,13 @@
     font-weight: var(--moduix-tags-input-label-font-weight, var(--moduix-field-label-font-weight, var(--moduix-weight-medium)));
     line-height: var(--moduix-tags-input-label-line-height, var(--moduix-field-label-line-height, var(--moduix-line-height-text-sm)));
     display: inline-flex;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
-    }
+  .label-EB302B[data-disabled] {
+    opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-field-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled))));
   }
 
-  ._0zrPYG_control {
+  .control-aj7rxt {
     box-sizing: border-box;
     min-height: var(--moduix-tags-input-min-height, var(--moduix-input-height, var(--moduix-size-md)));
     align-items: center;
@@ -55,34 +55,34 @@
         var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default)));
     flex-wrap: wrap;
     display: flex;
+  }
 
-    &[data-focus] {
-      outline-color: var(--moduix-tags-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
-    }
+  .control-aj7rxt[data-focus] {
+    outline-color: var(--moduix-tags-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
+  }
 
-    &[data-invalid] {
-      border-color: var(--moduix-tags-input-invalid-border-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
+  .control-aj7rxt[data-invalid] {
+    border-color: var(--moduix-tags-input-invalid-border-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
+  }
 
-      &[data-focus] {
-        outline-color: var(--moduix-tags-input-invalid-focus-ring-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
-      }
-    }
+  .control-aj7rxt[data-invalid][data-focus] {
+    outline-color: var(--moduix-tags-input-invalid-focus-ring-color, var(--moduix-input-border-color-invalid, var(--moduix-color-destructive)));
+  }
 
-    &[data-readonly] {
-      background-color: var(--moduix-tags-input-readonly-bg, var(--moduix-input-readonly-bg, var(--moduix-tags-input-bg, var(--moduix-color-background))));
-      color: var(--moduix-tags-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-tags-input-color, var(--moduix-color-foreground))));
-    }
+  .control-aj7rxt[data-readonly] {
+    background-color: var(--moduix-tags-input-readonly-bg, var(--moduix-input-readonly-bg, var(--moduix-tags-input-bg, var(--moduix-color-background))));
+    color: var(--moduix-tags-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-tags-input-color, var(--moduix-color-foreground))));
+  }
 
-    &[data-disabled] {
-      pointer-events: none;
-    }
+  .control-aj7rxt[data-disabled] {
+    pointer-events: none;
   }
 
-  ._0zrPYG_item {
+  .item-YnX6WJ {
     display: contents;
   }
 
-  ._0zrPYG_itemPreview {
+  .itemPreview-Jtpko5 {
     box-sizing: border-box;
     align-items: center;
     gap: var(--moduix-tags-input-item-gap, var(--moduix-spacing-1));
@@ -104,26 +104,26 @@
       color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
       box-shadow var(--moduix-tags-input-transition, var(--moduix-transition-default));
     display: inline-flex;
+  }
 
-    &[data-highlighted] {
-      box-shadow: 0 0 0
+  .itemPreview-Jtpko5[data-highlighted] {
+    box-shadow: 0 0 0
         var(--moduix-tags-input-item-highlight-ring-width, var(--moduix-border-width-sm))
         var(--moduix-tags-input-item-highlight-ring-color, var(--moduix-color-ring));
-    }
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .itemPreview-Jtpko5[data-disabled] {
+    opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  ._0zrPYG_itemText {
+  .itemText-LUwEuF {
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
     overflow: hidden;
   }
 
-  ._0zrPYG_input, ._0zrPYG_itemInput {
+  .input-uYY2LW, .itemInput-fToxnH {
     box-sizing: border-box;
     flex: 1 1 var(--moduix-tags-input-input-min-width, 7rem);
     min-width: var(--moduix-tags-input-input-min-width, 7rem);
@@ -137,21 +137,25 @@
     border: 0;
     outline: 0;
     margin: 0;
+  }
 
-    &::placeholder {
-      color: var(--moduix-tags-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
-    }
+  :is(.input-uYY2LW, .itemInput-fToxnH)::placeholder {
+    color: var(--moduix-tags-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
+  }
 
-    &[data-readonly], &:read-only {
-      cursor: default;
-    }
+  :is(.input-uYY2LW, .itemInput-fToxnH)[data-readonly], :is(.input-uYY2LW, .itemInput-fToxnH):read-only {
+    cursor: default;
   }
 
-  ._0zrPYG_itemInput {
+  .itemInput-fToxnH {
     flex: 0 1 var(--moduix-tags-input-item-input-width, 7rem);
   }
 
-  ._0zrPYG_itemDeleteTrigger {
+  .input-uYY2LW[data-readonly] {
+    display: none;
+  }
+
+  .itemDeleteTrigger-Fx1XkC {
     width: var(--moduix-tags-input-trigger-size, var(--moduix-spacing-4));
     height: var(--moduix-tags-input-trigger-size, var(--moduix-spacing-4));
     border-radius: var(--moduix-tags-input-trigger-radius, var(--moduix-radius-full));
@@ -169,32 +173,32 @@
     align-items: center;
     padding: 0;
     display: inline-flex;
+  }
 
-    & > svg {
-      width: var(--moduix-tags-input-trigger-icon-size, var(--moduix-spacing-2-5));
-      height: var(--moduix-tags-input-trigger-icon-size, var(--moduix-spacing-2-5));
-      pointer-events: none;
-      flex: none;
-    }
+  .itemDeleteTrigger-Fx1XkC > svg {
+    width: var(--moduix-tags-input-trigger-icon-size, var(--moduix-spacing-2-5));
+    height: var(--moduix-tags-input-trigger-icon-size, var(--moduix-spacing-2-5));
+    pointer-events: none;
+    flex: none;
+  }
 
-    &:hover {
-      background-color: var(--moduix-tags-input-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
-    }
+  .itemDeleteTrigger-Fx1XkC:hover {
+    background-color: var(--moduix-tags-input-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
+  }
 
-    &:focus-visible {
-      box-shadow: 0 0 0
+  .itemDeleteTrigger-Fx1XkC:focus-visible {
+    box-shadow: 0 0 0
         var(--moduix-tags-input-trigger-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         var(--moduix-tags-input-trigger-focus-ring-color, var(--moduix-color-ring));
-    }
+  }
 
-    &[data-disabled], &:disabled {
-      cursor: default;
-      opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
-      pointer-events: none;
-    }
+  .itemDeleteTrigger-Fx1XkC[data-disabled], .itemDeleteTrigger-Fx1XkC:disabled {
+    cursor: default;
+    opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
+    pointer-events: none;
   }
 
-  ._0zrPYG_clearTrigger {
+  .clearTrigger-llMk8h {
     --moduix-close-button-size: var(--moduix-tags-input-clear-trigger-size, var(--moduix-size-xs));
     --moduix-close-button-icon-size: var(--moduix-tags-input-clear-trigger-icon-size, var(--moduix-spacing-3));
     --moduix-close-button-radius: var(--moduix-tags-input-clear-trigger-radius, var(--moduix-radius-sm));
@@ -210,9 +214,10 @@
     flex: none;
     align-self: center;
     margin-inline-start: auto;
+  }
 
-    &[data-readonly] {
-      display: none;
-    }
+  .clearTrigger-llMk8h[data-readonly] {
+    display: none;
   }
 }
+

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

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

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

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

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

@@ -1,19 +1,9 @@
-//#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';
+type TextAlign = 'start' | 'center' | 'end' | 'left' | 'right' | 'justify';
 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<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;
     weight?: TextWeight;
@@ -21,7 +11,15 @@ declare const Text: import("react").ForwardRefExoticComponent<Omit<import("react
     align?: TextAlign;
     truncate?: boolean;
     lineClamp?: number;
-  } & import("react").RefAttributes<HTMLElement>>;
+} & 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;
+        weight?: TextWeight;
+        tone?: TextTone;
+        align?: TextAlign;
+        truncate?: boolean;
+        lineClamp?: number;
+    } & import("react").RefAttributes<HTMLElement>>;
 };
-//#endregion
-export { Text };
+export { Text };