@moduix/react 1.1.0

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

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

package/dist/components/tag/Tag.css

@@ -0,0 +1,128 @@
+@layer ui.components {
+  .RPJE8a_root {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--tag-gap, .375rem);
+    border: var(--tag-border-width, var(--border-width-sm)) solid
+      var(--tag-border-color, transparent);
+    border-radius: var(--tag-radius, var(--radius-full));
+    background-color: var(--tag-bg, var(--color-primary));
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    color: var(--tag-color, var(--color-primary-foreground));
+    font-size: var(--tag-font-size, var(--text-xs));
+    font-weight: var(--tag-font-weight, var(--weight-medium));
+    line-height: var(--tag-line-height, var(--line-height-text-xs));
+    min-height: var(--tag-height-md, 1.5rem);
+    padding-block: var(--tag-padding-y-md, .125rem);
+    padding-inline: var(--tag-padding-x-md, .5rem);
+    white-space: nowrap;
+    vertical-align: middle;
+    transition: color var(--tag-transition, var(--transition-default)),
+      background-color var(--tag-transition, var(--transition-default)),
+      border-color var(--tag-transition, var(--transition-default));
+    display: inline-flex;
+
+    & > svg {
+      width: var(--tag-icon-size, .75rem);
+      height: var(--tag-icon-size, .75rem);
+      pointer-events: none;
+      flex-shrink: 0;
+    }
+
+    &[data-size="sm"] {
+      gap: var(--tag-gap-sm, .25rem);
+      min-height: var(--tag-height-sm, 1.25rem);
+      padding-block: var(--tag-padding-y-sm, 0);
+      padding-inline: var(--tag-padding-x-sm, .375rem);
+    }
+
+    &[data-variant="secondary"] {
+      background-color: var(--tag-bg, var(--color-secondary));
+      border-color: var(--tag-border-color, transparent);
+      color: var(--tag-color, var(--color-secondary-foreground));
+    }
+
+    &[data-variant="outline"], &[data-variant="ghost"] {
+      background-color: var(--tag-bg, transparent);
+      color: var(--tag-color, var(--color-foreground));
+    }
+
+    &[data-variant="outline"] {
+      border-color: var(--tag-border-color, var(--color-border));
+    }
+
+    &[data-variant="destructive"] {
+      background-color: var(--tag-bg, var(--color-destructive));
+      border-color: var(--tag-border-color, transparent);
+      color: var(--tag-color, var(--color-primary-foreground));
+    }
+  }
+
+  .RPJE8a_label {
+    text-overflow: ellipsis;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .RPJE8a_startElement, .RPJE8a_endElement {
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    min-width: 0;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--tag-icon-size, .75rem);
+      height: var(--tag-icon-size, .75rem);
+      pointer-events: none;
+      flex-shrink: 0;
+    }
+  }
+
+  .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;
+    }
+  }
+}

package/dist/components/tag/Tag.d.ts

@@ -0,0 +1,18 @@
+//#region src/components/tag/Tag.d.ts
+type TagVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+type TagSize = 'sm' | 'md';
+declare const Tag: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  variant?: TagVariant;
+  size?: TagSize;
+} & import("react").RefAttributes<HTMLSpanElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    variant?: TagVariant;
+    size?: TagSize;
+  } & import("react").RefAttributes<HTMLSpanElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+  StartElement: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+  EndElement: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { Tag };

package/dist/components/tag/Tag.js

@@ -0,0 +1,87 @@
+import { CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.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";
+//#region src/components/tag/Tag.tsx
+const DEFAULT_CLOSE_LABEL = "Remove tag";
+const TagRoot = forwardRef(function TagRoot({ className, size = "md", variant = "default", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		...props,
+		"data-scope": "tag",
+		"data-part": "root",
+		"data-slot": "tag-root",
+		"data-size": size,
+		"data-variant": variant,
+		className: clsx(Tag_module_default.root, normalizeClassName(className))
+	});
+});
+const TagLabel = forwardRef(function TagLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		...props,
+		"data-scope": "tag",
+		"data-part": "label",
+		"data-slot": "tag-label",
+		className: clsx(Tag_module_default.label, normalizeClassName(className))
+	});
+});
+const TagStartElement = forwardRef(function TagStartElement({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		...props,
+		"data-scope": "tag",
+		"data-part": "start-element",
+		"data-slot": "tag-start-element",
+		className: clsx(Tag_module_default.startElement, normalizeClassName(className))
+	});
+});
+const TagEndElement = forwardRef(function TagEndElement({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		...props,
+		"data-scope": "tag",
+		"data-part": "end-element",
+		"data-slot": "tag-end-element",
+		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, {
+		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,
+		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)
+	});
+});
+const Tag = Object.assign(TagRoot, {
+	Root: TagRoot,
+	Label: TagLabel,
+	StartElement: TagStartElement,
+	EndElement: TagEndElement,
+	CloseTrigger: TagCloseTrigger
+});
+//#endregion
+export { Tag };

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

@@ -0,0 +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"
+};
+//#endregion
+export { Tag_module_default as default };

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

@@ -0,0 +1,248 @@
+@layer ui.components {
+  .K9ROda_root {
+    box-sizing: border-box;
+    gap: var(--tags-input-gap, var(--field-gap, var(--spacing-1)));
+    width: var(--tags-input-width, 100%);
+    max-width: var(--tags-input-max-width, 24rem);
+    color: var(--tags-input-color, var(--input-color, var(--color-foreground)));
+    flex-direction: column;
+    display: flex;
+
+    &[data-disabled] {
+      opacity: var(--tags-input-disabled-opacity, var(--field-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled))));
+    }
+  }
+
+  .K9ROda_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)));
+    font-size: var(--tags-input-label-font-size, var(--field-label-font-size, var(--text-sm)));
+    font-weight: var(--tags-input-label-font-weight, var(--field-label-font-weight, var(--weight-medium)));
+    line-height: var(--tags-input-label-line-height, var(--field-label-line-height, var(--line-height-text-sm)));
+    display: inline-flex;
+
+    &[data-disabled] {
+      opacity: var(--tags-input-disabled-opacity, var(--field-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled))));
+    }
+  }
+
+  .K9ROda_control {
+    box-sizing: border-box;
+    min-height: var(--tags-input-min-height, var(--input-height, var(--size-lg)));
+    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)))
+      var(--input-border-style, solid)
+      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);
+    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))))
+      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))),
+      outline-color var(--tags-input-transition, var(--input-transition, var(--transition-default))),
+      background-color
+        var(--tags-input-transition, var(--input-transition, var(--transition-default))),
+      opacity var(--tags-input-transition, var(--input-transition, var(--transition-default)));
+    flex-wrap: wrap;
+    display: flex;
+
+    &[data-focus] {
+      outline-color: var(--tags-input-focus-ring-color, var(--input-focus-ring-color, var(--color-ring)));
+    }
+
+    &[data-invalid] {
+      border-color: var(--tags-input-invalid-border-color, var(--input-border-color-invalid, var(--color-destructive)));
+
+      &[data-focus] {
+        outline-color: var(--tags-input-invalid-focus-ring-color, var(--input-border-color-invalid, var(--color-destructive)));
+      }
+    }
+
+    &[data-readonly] {
+      background-color: var(--tags-input-readonly-bg, var(--input-readonly-bg, var(--tags-input-bg, var(--color-background))));
+      color: var(--tags-input-readonly-color, var(--input-readonly-color, var(--tags-input-color, var(--color-foreground))));
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+
+  .K9ROda_item {
+    display: contents;
+  }
+
+  .K9ROda_itemPreview {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--tags-input-item-gap, var(--spacing-1));
+    min-width: 0;
+    max-width: 100%;
+    min-height: var(--tags-input-item-height, 1.5rem);
+    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);
+    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));
+    font-weight: var(--tags-input-item-font-weight, var(--weight-medium));
+    line-height: var(--tags-input-item-line-height, var(--line-height-text-xs));
+    transition: border-color var(--tags-input-transition, var(--transition-default)),
+      background-color var(--tags-input-transition, var(--transition-default)),
+      color var(--tags-input-transition, var(--transition-default)),
+      box-shadow var(--tags-input-transition, var(--transition-default));
+    display: inline-flex;
+
+    &[data-highlighted] {
+      box-shadow: 0 0 0 var(--tags-input-item-highlight-ring-width, var(--border-width-sm))
+        var(--tags-input-item-highlight-ring-color, var(--color-ring));
+    }
+
+    &[data-disabled] {
+      opacity: var(--tags-input-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .K9ROda_itemText {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .K9ROda_input, .K9ROda_itemInput {
+    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);
+    color: inherit;
+    font: inherit;
+    font-size: var(--tags-input-input-font-size, var(--input-font-size, var(--text-sm)));
+    line-height: var(--tags-input-input-line-height, var(--input-line-height, var(--line-height-text-sm)));
+    background-color: #0000;
+    border: 0;
+    outline: 0;
+    margin: 0;
+
+    &::placeholder {
+      color: var(--tags-input-placeholder-color, var(--input-placeholder-color, var(--color-muted-foreground)));
+    }
+
+    &[data-readonly], &:read-only {
+      cursor: default;
+    }
+  }
+
+  .K9ROda_itemInput {
+    flex: 0 1 var(--tags-input-item-input-width, 7rem);
+  }
+
+  .K9ROda_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));
+    background-color: var(--tags-input-trigger-bg, transparent);
+    color: var(--tags-input-trigger-color, currentColor);
+    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)),
+      box-shadow var(--tags-input-transition, var(--transition-default));
+    border: 0;
+    outline: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--tags-input-trigger-icon-size, .625rem);
+      height: var(--tags-input-trigger-icon-size, .625rem);
+      pointer-events: none;
+      flex: none;
+    }
+
+    &:hover {
+      background-color: var(--tags-input-trigger-bg-hover, color-mix(in oklab, currentColor 12%, transparent));
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 var(--tags-input-trigger-focus-ring-width, var(--border-width-sm))
+        var(--tags-input-trigger-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-disabled], &:disabled {
+      cursor: default;
+      opacity: var(--tags-input-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+  }
+
+  .K9ROda_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));
+    --close-button-bg: var(--tags-input-clear-trigger-bg, transparent);
+    --close-button-bg-hover: var(--tags-input-clear-trigger-bg-hover, var(--color-muted));
+    --close-button-color: var(--tags-input-clear-trigger-color, var(--color-muted-foreground));
+    --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;
+    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

@@ -0,0 +1,20 @@
+import { TagsInput } from "@ark-ui/react/tags-input";
+
+//#region src/components/tags-input/TagsInput.d.ts
+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>>;
+  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;
+};
+//#endregion
+export { TagsInput$1 as TagsInput };

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

@@ -0,0 +1,139 @@
+import { CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.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";
+//#region src/components/tags-input/TagsInput.tsx
+const TagsInputRoot = forwardRef(function TagsInputRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TagsInput.Root, {
+		ref,
+		"data-slot": "tags-input-root",
+		className: clsx(TagsInput_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const TagsInputRootProvider = forwardRef(function TagsInputRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TagsInput.RootProvider, {
+		ref,
+		"data-slot": "tags-input-root-provider",
+		className: clsx(TagsInput_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+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 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 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 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 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 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 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 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 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, {
+		ref,
+		asChild,
+		"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
+		})
+	});
+});
+const TagsInputHiddenInput = forwardRef(function TagsInputHiddenInput(props, ref) {
+	return /* @__PURE__ */ jsx(TagsInput.HiddenInput, {
+		ref,
+		"data-slot": "tags-input-hidden-input",
+		...props
+	});
+});
+const TagsInputContext = TagsInput.Context;
+const TagsInput$1 = Object.assign(TagsInputRoot, {
+	Root: TagsInputRoot,
+	RootProvider: TagsInputRootProvider,
+	Label: TagsInputLabel,
+	Control: TagsInputControl,
+	Item: TagsInputItem,
+	ItemPreview: TagsInputItemPreview,
+	ItemText: TagsInputItemText,
+	ItemDeleteTrigger: TagsInputItemDeleteTrigger,
+	ItemInput: TagsInputItemInput,
+	Input: TagsInputInput,
+	ClearTrigger: TagsInputClearTrigger,
+	HiddenInput: TagsInputHiddenInput,
+	Context: TagsInputContext
+});
+//#endregion
+export { TagsInput$1 as TagsInput };

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

@@ -0,0 +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"
+};
+//#endregion
+export { TagsInput_module_default as default };