@moduix/react 2.1.0 → 2.2.4

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

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

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

@@ -0,0 +1,223 @@
+@layer moduix.components {
+  .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%);
+    max-width: var(--moduix-tags-input-max-width, 24rem);
+    color: var(--moduix-tags-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .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))));
+  }
+
+  .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)));
+    font-size: var(--moduix-tags-input-label-font-size, var(--moduix-field-label-font-size, var(--moduix-text-sm)));
+    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;
+  }
+
+  .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))));
+  }
+
+  .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;
+    gap: var(--moduix-tags-input-control-gap, var(--moduix-spacing-1));
+    border: var(--moduix-tags-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)))
+      var(--moduix-input-border-style, solid)
+      var(--moduix-tags-input-border-color, var(--moduix-input-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-tags-input-radius, var(--moduix-input-radius, var(--moduix-radius-md)));
+    width: 100%;
+    padding: var(--moduix-tags-input-padding-y, .3125rem)
+      var(--moduix-tags-input-padding-x, var(--moduix-spacing-2));
+    background-color: var(--moduix-tags-input-bg, var(--moduix-input-bg, var(--moduix-color-background)));
+    color: var(--moduix-tags-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    outline: var(--moduix-tags-input-focus-ring-width, var(--moduix-input-focus-ring-width, var(--moduix-tags-input-border-width, var(--moduix-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))))
+      solid transparent;
+    outline-offset: var(--moduix-tags-input-focus-ring-offset, var(--moduix-input-focus-ring-offset, calc(0px -
+            var(--moduix-tags-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm))))));
+    transition: border-color
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      outline-color
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      background-color
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      opacity
+        var(--moduix-tags-input-transition, var(--moduix-input-transition, var(--moduix-transition-default)));
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .control-aj7rxt[data-focus] {
+    outline-color: var(--moduix-tags-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
+  }
+
+  .control-aj7rxt[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][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-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-disabled] {
+    pointer-events: none;
+  }
+
+  .item-YnX6WJ {
+    display: contents;
+  }
+
+  .itemPreview-Jtpko5 {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--moduix-tags-input-item-gap, var(--moduix-spacing-1));
+    min-width: 0;
+    max-width: 100%;
+    min-height: var(--moduix-tags-input-item-height, var(--moduix-size-xs));
+    border: var(--moduix-tags-input-item-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-tags-input-item-border-color, transparent);
+    border-radius: var(--moduix-tags-input-item-radius, var(--moduix-radius-full));
+    padding-block: var(--moduix-tags-input-item-padding-y, var(--moduix-spacing-0-5));
+    padding-inline: var(--moduix-tags-input-item-padding-x, var(--moduix-spacing-2));
+    background-color: var(--moduix-tags-input-item-bg, var(--moduix-color-secondary));
+    color: var(--moduix-tags-input-item-color, var(--moduix-color-secondary-foreground));
+    font-size: var(--moduix-tags-input-item-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-tags-input-item-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-tags-input-item-line-height, var(--moduix-line-height-text-xs));
+    transition: border-color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-tags-input-transition, var(--moduix-transition-default));
+    display: inline-flex;
+  }
+
+  .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));
+  }
+
+  .itemPreview-Jtpko5[data-disabled] {
+    opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .itemText-LUwEuF {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .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);
+    height: var(--moduix-tags-input-input-height, var(--moduix-size-xs));
+    padding: 0 var(--moduix-tags-input-input-padding-x, var(--moduix-spacing-1));
+    color: inherit;
+    font: inherit;
+    font-size: var(--moduix-tags-input-input-font-size, var(--moduix-input-font-size, var(--moduix-text-sm)));
+    line-height: var(--moduix-tags-input-input-line-height, var(--moduix-input-line-height, var(--moduix-line-height-text-sm)));
+    background-color: #0000;
+    border: 0;
+    outline: 0;
+    margin: 0;
+  }
+
+  :is(.input-uYY2LW, .itemInput-fToxnH)::placeholder {
+    color: var(--moduix-tags-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
+  }
+
+  :is(.input-uYY2LW, .itemInput-fToxnH)[data-readonly], :is(.input-uYY2LW, .itemInput-fToxnH):read-only {
+    cursor: default;
+  }
+
+  .itemInput-fToxnH {
+    flex: 0 1 var(--moduix-tags-input-item-input-width, 7rem);
+  }
+
+  .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));
+    background-color: var(--moduix-tags-input-trigger-bg, transparent);
+    color: var(--moduix-tags-input-trigger-color, currentColor);
+    cursor: pointer;
+    transition: background-color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      color var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-tags-input-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-tags-input-transition, var(--moduix-transition-default));
+    border: 0;
+    outline: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .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;
+  }
+
+  .itemDeleteTrigger-Fx1XkC:hover {
+    background-color: var(--moduix-tags-input-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
+  }
+
+  .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));
+  }
+
+  .itemDeleteTrigger-Fx1XkC[data-disabled], .itemDeleteTrigger-Fx1XkC:disabled {
+    cursor: default;
+    opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
+    pointer-events: none;
+  }
+
+  .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));
+    --moduix-close-button-bg: var(--moduix-tags-input-clear-trigger-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-tags-input-clear-trigger-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-color: var(--moduix-tags-input-clear-trigger-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-tags-input-clear-trigger-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-focus-ring-color: var(--moduix-tags-input-trigger-focus-ring-color, var(--moduix-color-ring));
+    --moduix-close-button-focus-ring-width: var(--moduix-tags-input-trigger-focus-ring-width, var(--moduix-border-width-sm));
+    --moduix-close-button-focus-ring-offset: var(--moduix-tags-input-trigger-focus-ring-offset, var(--moduix-focus-ring-offset));
+    --moduix-close-button-transition: var(--moduix-tags-input-transition, var(--moduix-transition-default));
+    --moduix-close-button-disabled-opacity: var(--moduix-tags-input-disabled-opacity, var(--moduix-opacity-disabled));
+    flex: none;
+    align-self: center;
+    margin-inline-start: auto;
+  }
+
+  .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';