@d4gger/design-system 2.7.0 → 3.0.0

package/dist/components/tag/tag.props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/tag/tag.props.ts"],
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\nimport { highContrastPropDef } from '../../_internal/props/highContrast.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst tagVariants = ['default', 'soft', 'outline'] as const\nconst tagSizes = ['sm', 'md'] as const\n\nconst tagPropDefs = {\n  ...asChildPropDef,\n  ...highContrastPropDef,\n  variant: {\n    type: 'enum',\n    values: tagVariants,\n    default: 'default',\n  },\n  size: {\n    type: 'enum',\n    values: tagSizes,\n    default: 'md',\n  },\n  color: {\n    type: 'enum | string',\n    values: [] as const,\n    default: undefined,\n  },\n  radius: {\n    type: 'enum',\n    values: ['none', 'sm', 'md', 'lg', 'full'] as const,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  highContrast: PropDef\n  size: PropDef<(typeof tagSizes)[number]>\n  variant: PropDef<(typeof tagVariants)[number]>\n  color: PropDef<string>\n  radius: PropDef<'none' | 'sm' | 'md' | 'lg' | 'full'>\n}\n\nexport { tagPropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAIpC,MAAM,cAAc,CAAC,WAAW,QAAQ,SAAS;AACjD,MAAM,WAAW,CAAC,MAAM,IAAI;AAE5B,MAAM,cAAc;AAAA,EAClB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ,CAAC;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAAA,IACzC,SAAS;AAAA,EACX;AACF;",
+  "names": []
+}

package/dist/components/tag.css

@@ -0,0 +1,106 @@
+.dsx-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dsx-space-xs);
+  border-radius: var(--dsx-rounded-full);
+  border: var(--dsx-border-width-sm) solid transparent;
+  padding-inline: var(--dsx-space-sm);
+  padding-block: var(--dsx-space-xs);
+  font-family: var(--dsx-typography-label-small-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-small-font-size);
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  line-height: var(--dsx-typography-label-small-line-height);
+  letter-spacing: var(--dsx-typography-label-small-letter-spacing);
+  text-transform: var(--dsx-typography-label-small-text-transform);
+  text-decoration: var(--dsx-typography-label-small-text-decoration);
+  background: color-mix(in srgb, var(--dsx-color-accent-indicator) 16%, var(--dsx-color-surface));
+  color: var(--dsx-color-accent-indicator);
+}
+
+.dsx-tag:where([data-variant='soft']) {
+  background: var(--dsx-color-accent-3);
+  color: var(--dsx-color-accent-indicator);
+}
+
+.dsx-tag:where([data-variant='outline']) {
+  background: transparent;
+  border-color: var(--dsx-color-outline);
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-tag:where([data-variant='outline'])[data-accent-color] {
+  border-color: var(--dsx-color-accent-indicator);
+  color: var(--dsx-color-accent-indicator);
+}
+
+.dsx-tag:where([data-high-contrast='true']) {
+  background: var(--dsx-color-high-contrast);
+  color: var(--dsx-color-on-high-contrast);
+  border-color: var(--dsx-color-high-contrast);
+}
+
+.dsx-tag:where([data-size='sm']) {
+  min-height: var(--dsx-size-sm);
+  padding-inline: var(--dsx-space-xs);
+  /* sm steps the type down one notch (kbd font-size-sm precedent): the type scale
+     floors at 12px, so same-size text in a smaller pill reads oversized. */
+  font-size: var(--dsx-tag-font-size-sm);
+  line-height: 1.4;
+}
+
+.dsx-tag:where([data-size='md']) {
+  min-height: var(--dsx-size-md);
+}
+
+.dsx-tag:where([data-radius='none']) {
+  border-radius: 0;
+}
+
+.dsx-tag:where([data-radius='sm']) {
+  border-radius: var(--dsx-rounded-sm);
+}
+
+.dsx-tag:where([data-radius='md']) {
+  border-radius: var(--dsx-rounded-md);
+}
+
+.dsx-tag:where([data-radius='lg']) {
+  border-radius: var(--dsx-rounded-lg);
+}
+
+.dsx-tag:where([data-radius='full']) {
+  border-radius: var(--dsx-rounded-full);
+}
+
+.dsx-tag__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+.dsx-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: var(--dsx-cursor-pointer, pointer);
+  border-radius: var(--dsx-rounded-full);
+  transition: background-color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
+}
+
+.dsx-tag__remove:hover {
+  background: var(--dsx-effect-hover-ghost);
+}
+
+.dsx-tag__remove:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-tag__remove {
+    transition: none;
+  }
+}

package/dist/components/tags-input.css

@@ -28,11 +28,12 @@
   font-size: var(--dsx-typography-body-large-font-size);
 }
 
-/* Variant — classic: elevated with distinct background */
+/* Variant — classic: raised fill + elevation over the default surface shell, so it
+   reads distinct from the default surface shell on both themes. */
 .dsx-tags-input[data-variant='classic'] {
-  background: var(--dsx-color-surface-overlay);
-  border-color: var(--dsx-color-outline-variant);
-  box-shadow: var(--dsx-effect-shadow-1), 0 1px 3px color-mix(in srgb, var(--dsx-color-on-surface) 8%, transparent);
+  background: var(--dsx-color-surface-raised);
+  border-color: var(--dsx-color-outline);
+  box-shadow: var(--dsx-shadow-elevation-2);
 }
 
 /* Variant — ghost: no border/background until focused */
@@ -59,10 +60,10 @@
   display: inline-flex;
   align-items: center;
   gap: var(--dsx-space-xs);
-  padding: var(--dsx-space-xs) var(--dsx-space-sm);
+  padding: var(--dsx-space-xs) var(--dsx-space-xs) var(--dsx-space-xs) var(--dsx-space-sm);
   border-radius: var(--dsx-rounded-full);
-  background: var(--dsx-color-accent-surface);
-  color: var(--dsx-color-on-surface);
+  background: var(--dsx-color-accent-3);
+  color: var(--dsx-color-accent-indicator);
   font-family: var(--dsx-typography-label-small-font-family), sans-serif;
   font-size: var(--dsx-typography-label-small-font-size);
   font-weight: var(--dsx-typography-label-small-font-weight);
@@ -74,8 +75,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--dsx-size-sm);
-  height: var(--dsx-size-sm);
+  width: 18px;
+  height: 18px;
   padding: 0;
   border: none;
   border-radius: var(--dsx-rounded-full);
@@ -108,3 +109,24 @@
 .dsx-tags-input__input::placeholder {
   color: var(--dsx-color-on-surface-variant);
 }
+
+.dsx-tags-input--disabled {
+  cursor: not-allowed;
+  background: var(--dsx-effect-disabled-layer);
+  border-color: var(--dsx-effect-disabled-layer);
+  color: var(--dsx-color-disabled-text);
+}
+
+.dsx-tags-input--disabled .dsx-tags-input__input:disabled {
+  cursor: not-allowed;
+  color: var(--dsx-color-disabled-text);
+}
+
+.dsx-tags-input--invalid {
+  border-color: var(--dsx-color-error);
+}
+
+.dsx-tags-input--invalid:focus-within {
+  border-color: var(--dsx-color-error);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsx-color-error) 30%, transparent);
+}

package/dist/components/tagsInput/TagsInput.cjs

@@ -51,6 +51,11 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
     onChange,
     placeholder = "Add tag...",
     maxTags,
+    delimiter = ",",
+    addOnPaste = false,
+    addOnBlur = false,
+    disabled = false,
+    invalid = false,
     ...restProps
   } = (0, import_extractProps.extractProps)(props, import_tagsInput.tagsInputPropDefs);
   const Comp = asChild ? import_react_slot.Slot : "div";
@@ -65,15 +70,17 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
     }
     onChange?.(nextTags);
   }, [isControlled, onChange]);
-  const addTag = React.useCallback(() => {
-    const trimmed = inputValue.trim();
-    if (!trimmed) return;
-    if (tags.includes(trimmed)) return;
-    if (maxTags !== void 0 && tags.length >= maxTags) return;
-    const nextTags = [...tags, trimmed];
+  const addTags = React.useCallback((rawValues) => {
+    const fresh = rawValues.map((raw) => raw.trim()).filter(Boolean).filter((raw) => !tags.includes(raw));
+    if (fresh.length === 0) return;
+    const room = maxTags === void 0 ? fresh.length : Math.max(0, maxTags - tags.length);
+    const nextTags = [...tags, ...fresh.slice(0, room)];
     setTags(nextTags);
     setInputValue("");
-  }, [inputValue, tags, maxTags, setTags]);
+  }, [maxTags, setTags, tags]);
+  const addTag = React.useCallback(() => {
+    addTags(inputValue.split(delimiter));
+  }, [addTags, delimiter, inputValue]);
   const removeTag = React.useCallback((index) => {
     const nextTags = tags.filter((_, i) => i !== index);
     setTags(nextTags);
@@ -84,13 +91,29 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
         e.preventDefault();
         addTag();
       }
+      if (e.key === delimiter && delimiter.length === 1) {
+        e.preventDefault();
+        addTag();
+      }
       if (e.key === "Backspace" && inputValue === "" && tags.length > 0) {
         e.preventDefault();
         removeTag(tags.length - 1);
       }
     },
-    [addTag, inputValue, tags.length, removeTag]
+    [addTag, delimiter, inputValue, tags.length, removeTag]
   );
+  const handlePaste = React.useCallback((e) => {
+    if (!addOnPaste) return;
+    const pasted = e.clipboardData.getData("text");
+    if (!pasted) return;
+    e.preventDefault();
+    addTags(pasted.split(delimiter));
+  }, [addOnPaste, addTags, delimiter]);
+  const handleBlur = React.useCallback(() => {
+    if (addOnBlur && inputValue.trim() !== "") {
+      addTag();
+    }
+  }, [addOnBlur, addTag, inputValue]);
   const handleContainerClick = React.useCallback(() => {
     inputRef.current?.focus();
   }, []);
@@ -99,8 +122,14 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
     {
       ...restProps,
       ref: forwardedRef,
-      className: (0, import_classnames.default)("dsx-tags-input", className),
+      className: (0, import_classnames.default)(
+        "dsx-tags-input",
+        disabled && "dsx-tags-input--disabled",
+        invalid && "dsx-tags-input--invalid",
+        className
+      ),
       onClick: handleContainerClick,
+      "data-disabled": disabled || void 0,
       "data-radius": radius,
       "data-size": size,
       "data-slot": "tags-input",
@@ -117,6 +146,7 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
                 e.stopPropagation();
                 removeTag(index);
               },
+              disabled,
               "aria-label": `Remove tag ${tag}`,
               "data-slot": "tags-input-tag-remove",
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { size: 12 })
@@ -131,9 +161,13 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
             value: inputValue,
             onChange: (e) => setInputValue(e.target.value),
             onKeyDown: handleKeyDown,
+            onPaste: handlePaste,
+            onBlur: handleBlur,
             placeholder: tags.length === 0 ? placeholder : void 0,
             className: "dsx-tags-input__input",
             "aria-label": "Add tag",
+            disabled,
+            "aria-invalid": invalid || void 0,
             "data-slot": "tags-input-input"
           }
         )

package/dist/components/tagsInput/TagsInput.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tagsInput/TagsInput.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { X } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { tagsInputPropDefs } from './tagsInput.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TagsInputOwnProps = GetPropDefTypes<typeof tagsInputPropDefs> & {\n  value?: string[]\n  defaultValue?: string[]\n  onChange?: (value: string[]) => void\n  placeholder?: string\n  maxTags?: number\n}\n\ninterface TagsInputProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'>, TagsInputOwnProps {}\n\nconst TagsInput = React.forwardRef<HTMLDivElement, TagsInputProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    radius,\n    size = 'md',\n    variant = 'surface',\n    value: controlledValue,\n    defaultValue = [],\n    onChange,\n    placeholder = 'Add tag...',\n    maxTags,\n    ...restProps\n  } = extractProps(props, tagsInputPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n  const [inputValue, setInputValue] = React.useState('')\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const isControlled = controlledValue !== undefined\n  const tags = isControlled ? controlledValue : uncontrolledValue\n\n  const setTags = React.useCallback((nextTags: string[]) => {\n    if (!isControlled) {\n      setUncontrolledValue(nextTags)\n    }\n    onChange?.(nextTags)\n  }, [isControlled, onChange])\n\n  const addTag = React.useCallback(() => {\n    const trimmed = inputValue.trim()\n    if (!trimmed) return\n    if (tags.includes(trimmed)) return\n    if (maxTags !== undefined && tags.length >= maxTags) return\n\n    const nextTags = [...tags, trimmed]\n    setTags(nextTags)\n    setInputValue('')\n  }, [inputValue, tags, maxTags, setTags])\n\n  const removeTag = React.useCallback((index: number) => {\n    const nextTags = tags.filter((_, i) => i !== index)\n    setTags(nextTags)\n  }, [tags, setTags])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        e.preventDefault()\n        addTag()\n      }\n      if (e.key === 'Backspace' && inputValue === '' && tags.length > 0) {\n        e.preventDefault()\n        removeTag(tags.length - 1)\n      }\n    },\n    [addTag, inputValue, tags.length, removeTag],\n  )\n\n  const handleContainerClick = React.useCallback(() => {\n    inputRef.current?.focus()\n  }, [])\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-tags-input', className)}\n      onClick={handleContainerClick}\n      data-radius={radius}\n      data-size={size}\n      data-slot=\"tags-input\"\n      data-variant={variant}\n    >\n      <div className=\"dsx-tags-input__tags\" data-slot=\"tags-input-tags\">\n        {tags.map((tag, index) => (\n          <span key={`${tag}-${index}`} className=\"dsx-tags-input__tag\" data-slot=\"tags-input-tag\">\n            {tag}\n            <button\n              type=\"button\"\n              className=\"dsx-tags-input__tag-remove\"\n              onClick={(e) => {\n                e.stopPropagation()\n                removeTag(index)\n              }}\n              aria-label={`Remove tag ${tag}`}\n              data-slot=\"tags-input-tag-remove\"\n            >\n              <X size={12} />\n            </button>\n          </span>\n        ))}\n      </div>\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={inputValue}\n        onChange={(e) => setInputValue(e.target.value)}\n        onKeyDown={handleKeyDown}\n        placeholder={tags.length === 0 ? placeholder : undefined}\n        className=\"dsx-tags-input__input\"\n        aria-label=\"Add tag\"\n        data-slot=\"tags-input-input\"\n      />\n    </Comp>\n  )\n})\nTagsInput.displayName = 'TagsInput'\n\nexport { TagsInput }\nexport type { TagsInputOwnProps, TagsInputProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { X } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { tagsInputPropDefs } from './tagsInput.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TagsInputOwnProps = GetPropDefTypes<typeof tagsInputPropDefs> & {\n  value?: string[]\n  defaultValue?: string[]\n  onChange?: (value: string[]) => void\n  placeholder?: string\n  maxTags?: number\n}\n\ninterface TagsInputProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'>, TagsInputOwnProps {}\n\nconst TagsInput = React.forwardRef<HTMLDivElement, TagsInputProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    radius,\n    size = 'md',\n    variant = 'surface',\n    value: controlledValue,\n    defaultValue = [],\n    onChange,\n    placeholder = 'Add tag...',\n    maxTags,\n    delimiter = ',',\n    addOnPaste = false,\n    addOnBlur = false,\n    disabled = false,\n    invalid = false,\n    ...restProps\n  } = extractProps(props, tagsInputPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n  const [inputValue, setInputValue] = React.useState('')\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const isControlled = controlledValue !== undefined\n  const tags = isControlled ? controlledValue : uncontrolledValue\n\n  const setTags = React.useCallback((nextTags: string[]) => {\n    if (!isControlled) {\n      setUncontrolledValue(nextTags)\n    }\n    onChange?.(nextTags)\n  }, [isControlled, onChange])\n\n  const addTags = React.useCallback((rawValues: string[]) => {\n    const fresh = rawValues.map((raw) => raw.trim()).filter(Boolean).filter((raw) => !tags.includes(raw))\n    if (fresh.length === 0) return\n    const room = maxTags === undefined ? fresh.length : Math.max(0, maxTags - tags.length)\n    const nextTags = [...tags, ...fresh.slice(0, room)]\n    setTags(nextTags)\n    setInputValue('')\n  }, [maxTags, setTags, tags])\n\n  const addTag = React.useCallback(() => {\n    addTags(inputValue.split(delimiter))\n  }, [addTags, delimiter, inputValue])\n\n  const removeTag = React.useCallback((index: number) => {\n    const nextTags = tags.filter((_, i) => i !== index)\n    setTags(nextTags)\n  }, [tags, setTags])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        e.preventDefault()\n        addTag()\n      }\n      if (e.key === delimiter && delimiter.length === 1) {\n        e.preventDefault()\n        addTag()\n      }\n      if (e.key === 'Backspace' && inputValue === '' && tags.length > 0) {\n        e.preventDefault()\n        removeTag(tags.length - 1)\n      }\n    },\n    [addTag, delimiter, inputValue, tags.length, removeTag],\n  )\n\n  const handlePaste = React.useCallback((e: React.ClipboardEvent<HTMLInputElement>) => {\n    if (!addOnPaste) return\n    const pasted = e.clipboardData.getData('text')\n    if (!pasted) return\n    e.preventDefault()\n    addTags(pasted.split(delimiter))\n  }, [addOnPaste, addTags, delimiter])\n\n  const handleBlur = React.useCallback(() => {\n    if (addOnBlur && inputValue.trim() !== '') {\n      addTag()\n    }\n  }, [addOnBlur, addTag, inputValue])\n\n  const handleContainerClick = React.useCallback(() => {\n    inputRef.current?.focus()\n  }, [])\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames(\n        'dsx-tags-input',\n        disabled && 'dsx-tags-input--disabled',\n        invalid && 'dsx-tags-input--invalid',\n        className,\n      )}\n      onClick={handleContainerClick}\n      data-disabled={disabled || undefined}\n      data-radius={radius}\n      data-size={size}\n      data-slot=\"tags-input\"\n      data-variant={variant}\n    >\n      <div className=\"dsx-tags-input__tags\" data-slot=\"tags-input-tags\">\n        {tags.map((tag, index) => (\n          <span key={`${tag}-${index}`} className=\"dsx-tags-input__tag\" data-slot=\"tags-input-tag\">\n            {tag}\n            <button\n              type=\"button\"\n              className=\"dsx-tags-input__tag-remove\"\n              onClick={(e) => {\n                e.stopPropagation()\n                removeTag(index)\n              }}\n              disabled={disabled}\n              aria-label={`Remove tag ${tag}`}\n              data-slot=\"tags-input-tag-remove\"\n            >\n              <X size={12} />\n            </button>\n          </span>\n        ))}\n      </div>\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={inputValue}\n        onChange={(e) => setInputValue(e.target.value)}\n        onKeyDown={handleKeyDown}\n        onPaste={handlePaste}\n        onBlur={handleBlur}\n        placeholder={tags.length === 0 ? placeholder : undefined}\n        className=\"dsx-tags-input__input\"\n        aria-label=\"Add tag\"\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        data-slot=\"tags-input-input\"\n      />\n    </Comp>\n  )\n})\nTagsInput.displayName = 'TagsInput'\n\nexport { TagsInput }\nexport type { TagsInputOwnProps, TagsInputProps }\n"],
+  "mappings": "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",
   "names": ["classNames"]
 }

package/dist/components/tagsInput/TagsInput.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.d.cts","sourceRoot":"","sources":["../../../src/components/tagsInput/TagsInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAAE,iBAAiB;CAAG;AAE/H,QAAA,MAAM,SAAS,uFA0Gb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"TagsInput.d.cts","sourceRoot":"","sources":["../../../src/components/tagsInput/TagsInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAAE,iBAAiB;CAAG;AAE/H,QAAA,MAAM,SAAS,uFA8Ib,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/tagsInput/TagsInput.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.d.mts","sourceRoot":"","sources":["../../../src/components/tagsInput/TagsInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAAE,iBAAiB;CAAG;AAE/H,QAAA,MAAM,SAAS,uFA0Gb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"TagsInput.d.mts","sourceRoot":"","sources":["../../../src/components/tagsInput/TagsInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAAE,iBAAiB;CAAG;AAE/H,QAAA,MAAM,SAAS,uFA8Ib,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/tagsInput/TagsInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../../src/components/tagsInput/TagsInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAAE,iBAAiB;CAAG;AAE/H,QAAA,MAAM,SAAS,uFA0Gb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../../src/components/tagsInput/TagsInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAAE,iBAAiB;CAAG;AAE/H,QAAA,MAAM,SAAS,uFA8Ib,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/tagsInput/TagsInput.js

@@ -18,6 +18,11 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
     onChange,
     placeholder = "Add tag...",
     maxTags,
+    delimiter = ",",
+    addOnPaste = false,
+    addOnBlur = false,
+    disabled = false,
+    invalid = false,
     ...restProps
   } = extractProps(props, tagsInputPropDefs);
   const Comp = asChild ? Slot : "div";
@@ -32,15 +37,17 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
     }
     onChange?.(nextTags);
   }, [isControlled, onChange]);
-  const addTag = React.useCallback(() => {
-    const trimmed = inputValue.trim();
-    if (!trimmed) return;
-    if (tags.includes(trimmed)) return;
-    if (maxTags !== void 0 && tags.length >= maxTags) return;
-    const nextTags = [...tags, trimmed];
+  const addTags = React.useCallback((rawValues) => {
+    const fresh = rawValues.map((raw) => raw.trim()).filter(Boolean).filter((raw) => !tags.includes(raw));
+    if (fresh.length === 0) return;
+    const room = maxTags === void 0 ? fresh.length : Math.max(0, maxTags - tags.length);
+    const nextTags = [...tags, ...fresh.slice(0, room)];
     setTags(nextTags);
     setInputValue("");
-  }, [inputValue, tags, maxTags, setTags]);
+  }, [maxTags, setTags, tags]);
+  const addTag = React.useCallback(() => {
+    addTags(inputValue.split(delimiter));
+  }, [addTags, delimiter, inputValue]);
   const removeTag = React.useCallback((index) => {
     const nextTags = tags.filter((_, i) => i !== index);
     setTags(nextTags);
@@ -51,13 +58,29 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
         e.preventDefault();
         addTag();
       }
+      if (e.key === delimiter && delimiter.length === 1) {
+        e.preventDefault();
+        addTag();
+      }
       if (e.key === "Backspace" && inputValue === "" && tags.length > 0) {
         e.preventDefault();
         removeTag(tags.length - 1);
       }
     },
-    [addTag, inputValue, tags.length, removeTag]
+    [addTag, delimiter, inputValue, tags.length, removeTag]
   );
+  const handlePaste = React.useCallback((e) => {
+    if (!addOnPaste) return;
+    const pasted = e.clipboardData.getData("text");
+    if (!pasted) return;
+    e.preventDefault();
+    addTags(pasted.split(delimiter));
+  }, [addOnPaste, addTags, delimiter]);
+  const handleBlur = React.useCallback(() => {
+    if (addOnBlur && inputValue.trim() !== "") {
+      addTag();
+    }
+  }, [addOnBlur, addTag, inputValue]);
   const handleContainerClick = React.useCallback(() => {
     inputRef.current?.focus();
   }, []);
@@ -66,8 +89,14 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
     {
       ...restProps,
       ref: forwardedRef,
-      className: classNames("dsx-tags-input", className),
+      className: classNames(
+        "dsx-tags-input",
+        disabled && "dsx-tags-input--disabled",
+        invalid && "dsx-tags-input--invalid",
+        className
+      ),
       onClick: handleContainerClick,
+      "data-disabled": disabled || void 0,
       "data-radius": radius,
       "data-size": size,
       "data-slot": "tags-input",
@@ -84,6 +113,7 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
                 e.stopPropagation();
                 removeTag(index);
               },
+              disabled,
               "aria-label": `Remove tag ${tag}`,
               "data-slot": "tags-input-tag-remove",
               children: /* @__PURE__ */ jsx(X, { size: 12 })
@@ -98,9 +128,13 @@ const TagsInput = React.forwardRef((props, forwardedRef) => {
             value: inputValue,
             onChange: (e) => setInputValue(e.target.value),
             onKeyDown: handleKeyDown,
+            onPaste: handlePaste,
+            onBlur: handleBlur,
             placeholder: tags.length === 0 ? placeholder : void 0,
             className: "dsx-tags-input__input",
             "aria-label": "Add tag",
+            disabled,
+            "aria-invalid": invalid || void 0,
             "data-slot": "tags-input-input"
           }
         )

package/dist/components/tagsInput/TagsInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tagsInput/TagsInput.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { X } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { tagsInputPropDefs } from './tagsInput.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TagsInputOwnProps = GetPropDefTypes<typeof tagsInputPropDefs> & {\n  value?: string[]\n  defaultValue?: string[]\n  onChange?: (value: string[]) => void\n  placeholder?: string\n  maxTags?: number\n}\n\ninterface TagsInputProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'>, TagsInputOwnProps {}\n\nconst TagsInput = React.forwardRef<HTMLDivElement, TagsInputProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    radius,\n    size = 'md',\n    variant = 'surface',\n    value: controlledValue,\n    defaultValue = [],\n    onChange,\n    placeholder = 'Add tag...',\n    maxTags,\n    ...restProps\n  } = extractProps(props, tagsInputPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n  const [inputValue, setInputValue] = React.useState('')\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const isControlled = controlledValue !== undefined\n  const tags = isControlled ? controlledValue : uncontrolledValue\n\n  const setTags = React.useCallback((nextTags: string[]) => {\n    if (!isControlled) {\n      setUncontrolledValue(nextTags)\n    }\n    onChange?.(nextTags)\n  }, [isControlled, onChange])\n\n  const addTag = React.useCallback(() => {\n    const trimmed = inputValue.trim()\n    if (!trimmed) return\n    if (tags.includes(trimmed)) return\n    if (maxTags !== undefined && tags.length >= maxTags) return\n\n    const nextTags = [...tags, trimmed]\n    setTags(nextTags)\n    setInputValue('')\n  }, [inputValue, tags, maxTags, setTags])\n\n  const removeTag = React.useCallback((index: number) => {\n    const nextTags = tags.filter((_, i) => i !== index)\n    setTags(nextTags)\n  }, [tags, setTags])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        e.preventDefault()\n        addTag()\n      }\n      if (e.key === 'Backspace' && inputValue === '' && tags.length > 0) {\n        e.preventDefault()\n        removeTag(tags.length - 1)\n      }\n    },\n    [addTag, inputValue, tags.length, removeTag],\n  )\n\n  const handleContainerClick = React.useCallback(() => {\n    inputRef.current?.focus()\n  }, [])\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-tags-input', className)}\n      onClick={handleContainerClick}\n      data-radius={radius}\n      data-size={size}\n      data-slot=\"tags-input\"\n      data-variant={variant}\n    >\n      <div className=\"dsx-tags-input__tags\" data-slot=\"tags-input-tags\">\n        {tags.map((tag, index) => (\n          <span key={`${tag}-${index}`} className=\"dsx-tags-input__tag\" data-slot=\"tags-input-tag\">\n            {tag}\n            <button\n              type=\"button\"\n              className=\"dsx-tags-input__tag-remove\"\n              onClick={(e) => {\n                e.stopPropagation()\n                removeTag(index)\n              }}\n              aria-label={`Remove tag ${tag}`}\n              data-slot=\"tags-input-tag-remove\"\n            >\n              <X size={12} />\n            </button>\n          </span>\n        ))}\n      </div>\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={inputValue}\n        onChange={(e) => setInputValue(e.target.value)}\n        onKeyDown={handleKeyDown}\n        placeholder={tags.length === 0 ? placeholder : undefined}\n        className=\"dsx-tags-input__input\"\n        aria-label=\"Add tag\"\n        data-slot=\"tags-input-input\"\n      />\n    </Comp>\n  )\n})\nTagsInput.displayName = 'TagsInput'\n\nexport { TagsInput }\nexport type { TagsInputOwnProps, TagsInputProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { X } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { tagsInputPropDefs } from './tagsInput.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype TagsInputOwnProps = GetPropDefTypes<typeof tagsInputPropDefs> & {\n  value?: string[]\n  defaultValue?: string[]\n  onChange?: (value: string[]) => void\n  placeholder?: string\n  maxTags?: number\n}\n\ninterface TagsInputProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'>, TagsInputOwnProps {}\n\nconst TagsInput = React.forwardRef<HTMLDivElement, TagsInputProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    radius,\n    size = 'md',\n    variant = 'surface',\n    value: controlledValue,\n    defaultValue = [],\n    onChange,\n    placeholder = 'Add tag...',\n    maxTags,\n    delimiter = ',',\n    addOnPaste = false,\n    addOnBlur = false,\n    disabled = false,\n    invalid = false,\n    ...restProps\n  } = extractProps(props, tagsInputPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n  const [inputValue, setInputValue] = React.useState('')\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const isControlled = controlledValue !== undefined\n  const tags = isControlled ? controlledValue : uncontrolledValue\n\n  const setTags = React.useCallback((nextTags: string[]) => {\n    if (!isControlled) {\n      setUncontrolledValue(nextTags)\n    }\n    onChange?.(nextTags)\n  }, [isControlled, onChange])\n\n  const addTags = React.useCallback((rawValues: string[]) => {\n    const fresh = rawValues.map((raw) => raw.trim()).filter(Boolean).filter((raw) => !tags.includes(raw))\n    if (fresh.length === 0) return\n    const room = maxTags === undefined ? fresh.length : Math.max(0, maxTags - tags.length)\n    const nextTags = [...tags, ...fresh.slice(0, room)]\n    setTags(nextTags)\n    setInputValue('')\n  }, [maxTags, setTags, tags])\n\n  const addTag = React.useCallback(() => {\n    addTags(inputValue.split(delimiter))\n  }, [addTags, delimiter, inputValue])\n\n  const removeTag = React.useCallback((index: number) => {\n    const nextTags = tags.filter((_, i) => i !== index)\n    setTags(nextTags)\n  }, [tags, setTags])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        e.preventDefault()\n        addTag()\n      }\n      if (e.key === delimiter && delimiter.length === 1) {\n        e.preventDefault()\n        addTag()\n      }\n      if (e.key === 'Backspace' && inputValue === '' && tags.length > 0) {\n        e.preventDefault()\n        removeTag(tags.length - 1)\n      }\n    },\n    [addTag, delimiter, inputValue, tags.length, removeTag],\n  )\n\n  const handlePaste = React.useCallback((e: React.ClipboardEvent<HTMLInputElement>) => {\n    if (!addOnPaste) return\n    const pasted = e.clipboardData.getData('text')\n    if (!pasted) return\n    e.preventDefault()\n    addTags(pasted.split(delimiter))\n  }, [addOnPaste, addTags, delimiter])\n\n  const handleBlur = React.useCallback(() => {\n    if (addOnBlur && inputValue.trim() !== '') {\n      addTag()\n    }\n  }, [addOnBlur, addTag, inputValue])\n\n  const handleContainerClick = React.useCallback(() => {\n    inputRef.current?.focus()\n  }, [])\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames(\n        'dsx-tags-input',\n        disabled && 'dsx-tags-input--disabled',\n        invalid && 'dsx-tags-input--invalid',\n        className,\n      )}\n      onClick={handleContainerClick}\n      data-disabled={disabled || undefined}\n      data-radius={radius}\n      data-size={size}\n      data-slot=\"tags-input\"\n      data-variant={variant}\n    >\n      <div className=\"dsx-tags-input__tags\" data-slot=\"tags-input-tags\">\n        {tags.map((tag, index) => (\n          <span key={`${tag}-${index}`} className=\"dsx-tags-input__tag\" data-slot=\"tags-input-tag\">\n            {tag}\n            <button\n              type=\"button\"\n              className=\"dsx-tags-input__tag-remove\"\n              onClick={(e) => {\n                e.stopPropagation()\n                removeTag(index)\n              }}\n              disabled={disabled}\n              aria-label={`Remove tag ${tag}`}\n              data-slot=\"tags-input-tag-remove\"\n            >\n              <X size={12} />\n            </button>\n          </span>\n        ))}\n      </div>\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={inputValue}\n        onChange={(e) => setInputValue(e.target.value)}\n        onKeyDown={handleKeyDown}\n        onPaste={handlePaste}\n        onBlur={handleBlur}\n        placeholder={tags.length === 0 ? placeholder : undefined}\n        className=\"dsx-tags-input__input\"\n        aria-label=\"Add tag\"\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        data-slot=\"tags-input-input\"\n      />\n    </Comp>\n  )\n})\nTagsInput.displayName = 'TagsInput'\n\nexport { TagsInput }\nexport type { TagsInputOwnProps, TagsInputProps }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/tagsInput/tagsInput.props.cjs

@@ -41,6 +41,26 @@ const tagsInputPropDefs = {
     type: "enum",
     values: tagsInputRadiusValues,
     default: void 0
+  },
+  delimiter: {
+    type: "string",
+    default: ","
+  },
+  addOnPaste: {
+    type: "boolean",
+    default: false
+  },
+  addOnBlur: {
+    type: "boolean",
+    default: false
+  },
+  disabled: {
+    type: "boolean",
+    default: false
+  },
+  invalid: {
+    type: "boolean",
+    default: false
   }
 };
 //# sourceMappingURL=tagsInput.props.cjs.map

package/dist/components/tagsInput/tagsInput.props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tagsInput/tagsInput.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst tagsInputVariants = ['surface', 'classic', 'ghost'] as const\nconst tagsInputSizes = ['sm', 'md', 'lg'] as const\nconst tagsInputRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst tagsInputPropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: tagsInputVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: tagsInputSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: tagsInputRadiusValues,\n    default: undefined,\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof tagsInputVariants)[number]>\n  size: PropDef<(typeof tagsInputSizes)[number]>\n  radius: PropDef<(typeof tagsInputRadiusValues)[number]>\n}\n\nexport { tagsInputPropDefs }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,oBAAoB,CAAC,WAAW,WAAW,OAAO;AACxD,MAAM,iBAAiB,CAAC,MAAM,MAAM,IAAI;AACxC,MAAM,wBAAwB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE/D,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst tagsInputVariants = ['surface', 'classic', 'ghost'] as const\nconst tagsInputSizes = ['sm', 'md', 'lg'] as const\nconst tagsInputRadiusValues = ['none', 'sm', 'md', 'lg', 'full'] as const\n\nconst tagsInputPropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: tagsInputVariants,\n    default: 'surface',\n  },\n  size: {\n    type: 'enum',\n    values: tagsInputSizes,\n    default: 'md',\n  },\n  radius: {\n    type: 'enum',\n    values: tagsInputRadiusValues,\n    default: undefined,\n  },\n  delimiter: {\n    type: 'string',\n    default: ',',\n  },\n  addOnPaste: {\n    type: 'boolean',\n    default: false,\n  },\n  addOnBlur: {\n    type: 'boolean',\n    default: false,\n  },\n  disabled: {\n    type: 'boolean',\n    default: false,\n  },\n  invalid: {\n    type: 'boolean',\n    default: false,\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof tagsInputVariants)[number]>\n  size: PropDef<(typeof tagsInputSizes)[number]>\n  radius: PropDef<(typeof tagsInputRadiusValues)[number]>\n  delimiter: PropDef\n  addOnPaste: PropDef\n  addOnBlur: PropDef\n  disabled: PropDef\n  invalid: PropDef\n}\n\nexport { tagsInputPropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,oBAAoB,CAAC,WAAW,WAAW,OAAO;AACxD,MAAM,iBAAiB,CAAC,MAAM,MAAM,IAAI;AACxC,MAAM,wBAAwB,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM;AAE/D,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

package/dist/components/tagsInput/tagsInput.props.d.cts

@@ -14,6 +14,26 @@ declare const tagsInputPropDefs: {
         values: readonly ["none", "sm", "md", "lg", "full"];
         default: undefined;
     };
+    delimiter: {
+        type: "string";
+        default: string;
+    };
+    addOnPaste: {
+        type: "boolean";
+        default: false;
+    };
+    addOnBlur: {
+        type: "boolean";
+        default: false;
+    };
+    disabled: {
+        type: "boolean";
+        default: false;
+    };
+    invalid: {
+        type: "boolean";
+        default: false;
+    };
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/tagsInput/tagsInput.props.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"tagsInput.props.d.cts","sourceRoot":"","sources":["../../../src/components/tagsInput/tagsInput.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;CAsBtB,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"tagsInput.props.d.cts","sourceRoot":"","sources":["../../../src/components/tagsInput/tagsInput.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CtB,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/tagsInput/tagsInput.props.d.mts

@@ -14,6 +14,26 @@ declare const tagsInputPropDefs: {
         values: readonly ["none", "sm", "md", "lg", "full"];
         default: undefined;
     };
+    delimiter: {
+        type: "string";
+        default: string;
+    };
+    addOnPaste: {
+        type: "boolean";
+        default: false;
+    };
+    addOnBlur: {
+        type: "boolean";
+        default: false;
+    };
+    disabled: {
+        type: "boolean";
+        default: false;
+    };
+    invalid: {
+        type: "boolean";
+        default: false;
+    };
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/tagsInput/tagsInput.props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"tagsInput.props.d.mts","sourceRoot":"","sources":["../../../src/components/tagsInput/tagsInput.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;CAsBtB,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"tagsInput.props.d.mts","sourceRoot":"","sources":["../../../src/components/tagsInput/tagsInput.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CtB,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/tagsInput/tagsInput.props.d.ts

@@ -14,6 +14,26 @@ declare const tagsInputPropDefs: {
         values: readonly ["none", "sm", "md", "lg", "full"];
         default: undefined;
     };
+    delimiter: {
+        type: "string";
+        default: string;
+    };
+    addOnPaste: {
+        type: "boolean";
+        default: false;
+    };
+    addOnBlur: {
+        type: "boolean";
+        default: false;
+    };
+    disabled: {
+        type: "boolean";
+        default: false;
+    };
+    invalid: {
+        type: "boolean";
+        default: false;
+    };
     asChild: {
         type: "boolean";
         default: false;