jaci-ui 0.3.0 → 0.4.0

package/dist/components/select/select.js

@@ -2,18 +2,42 @@
 import { cx } from "../../styled-system/css/cx.js";
 import { withRecipeClassName } from "../base-ui.js";
 import { select } from "../../styled-system/recipes/select.js";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useContext, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select.tsx
 const SelectSizeContext = createContext("md");
+const SelectAuxContext = createContext(null);
 function useSelectStyles() {
 	return select({ size: useContext(SelectSizeContext) });
 }
-function SelectRoot$1({ size = "md", ...props }) {
+function SelectRoot$1({ defaultValue, disabled = false, loading: _loading, multiple, onValueChange, size = "md", value: controlledValue, ...props }) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? (multiple ? [] : null));
+	const value = controlledValue === void 0 ? uncontrolledValue : controlledValue;
+	const clear = () => {
+		const nextValue = multiple ? [] : null;
+		if (controlledValue === void 0) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue, void 0);
+	};
 	return /* @__PURE__ */ jsx(SelectSizeContext.Provider, {
 		value: size,
-		children: /* @__PURE__ */ jsx(Select.Root, { ...props })
+		children: /* @__PURE__ */ jsx(SelectAuxContext.Provider, {
+			value: {
+				clear,
+				disabled
+			},
+			children: /* @__PURE__ */ jsx(Select.Root, {
+				...props,
+				disabled,
+				defaultValue: void 0,
+				multiple,
+				onValueChange: (nextValue, details) => {
+					if (controlledValue === void 0) setUncontrolledValue(nextValue);
+					onValueChange?.(nextValue, details);
+				},
+				value
+			})
+		})
 	});
 }
 /** An accessible label that Base UI associates with the trigger automatically. */
@@ -133,6 +157,51 @@ const SelectSeparator = forwardRef(function SelectSeparator({ className, orienta
 		"data-slot": "select-separator"
 	});
 });
+const SelectClear = forwardRef(function SelectClear({ children = "×", className, ...props }, ref) {
+	const context = useContext(SelectAuxContext);
+	const styles = useSelectStyles();
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		"aria-label": props["aria-label"] ?? "Clear selection",
+		className: cx(styles.clear, className),
+		"data-slot": "select-clear",
+		disabled: props.disabled || context?.disabled,
+		onClick: (event) => {
+			context?.clear();
+			props.onClick?.(event);
+		},
+		ref,
+		type: "button",
+		children
+	});
+});
+const SelectEmpty = forwardRef(function SelectEmpty({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx(useSelectStyles().empty, className),
+		"data-slot": "select-empty",
+		ref
+	});
+});
+const SelectLoading = forwardRef(function SelectLoading({ children = "Loading…", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"aria-live": "polite",
+		className: cx(useSelectStyles().loading, className),
+		"data-slot": "select-loading",
+		ref,
+		children
+	});
+});
+const SelectStatus = forwardRef(function SelectStatus({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"aria-live": "polite",
+		className: cx(useSelectStyles().status, className),
+		"data-slot": "select-status",
+		ref
+	});
+});
 const Select$1 = {
 	Root: SelectRoot$1,
 	Label: SelectLabel,
@@ -148,9 +217,13 @@ const Select$1 = {
 	ItemIndicator: SelectItemIndicator,
 	Group: SelectGroup,
 	GroupLabel: SelectGroupLabel,
-	Separator: SelectSeparator
+	Separator: SelectSeparator,
+	Clear: SelectClear,
+	Empty: SelectEmpty,
+	Loading: SelectLoading,
+	Status: SelectStatus
 };
 //#endregion
-export { Select$1 as Select, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot$1 as SelectRoot, SelectSeparator, SelectTrigger, SelectValue };
+export { Select$1 as Select, SelectClear, SelectEmpty, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectLoading, SelectPopup, SelectPortal, SelectPositioner, SelectRoot$1 as SelectRoot, SelectSeparator, SelectStatus, SelectTrigger, SelectValue };
 
 //# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["SelectRoot","BaseSelect","Select"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { SelectRoot as BaseSelectRoot } from \"@base-ui/react/select\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { select } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nconst SelectSizeContext = createContext<SelectSize>(\"md\");\n\nfunction useSelectStyles() {\n  return select({ size: useContext(SelectSizeContext) });\n}\n\n/**\n * Groups an accessible listbox select. Use `value`/`onValueChange` for a\n * controlled selection, or `defaultValue` for an uncontrolled selection.\n *\n * `size` is shared by all visual parts so the trigger stays aligned with the\n * library's `Input` component.\n */\nexport interface SelectRootProps<Value, Multiple extends boolean | undefined = false>\n  extends BaseSelectRoot.Props<Value, Multiple> {\n  size?: SelectSize;\n}\n\nexport function SelectRoot<Value = unknown, Multiple extends boolean | undefined = false>({\n  size = \"md\",\n  ...props\n}: SelectRootProps<Value, Multiple>) {\n  return (\n    <SelectSizeContext.Provider value={size}>\n      <BaseSelect.Root {...props} />\n    </SelectSizeContext.Provider>\n  );\n}\n\nexport type SelectLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.Label>;\n\n/** An accessible label that Base UI associates with the trigger automatically. */\nexport const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(function SelectLabel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Label\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().label, className)}\n      data-slot=\"select-label\"\n    />\n  );\n});\n\nexport type SelectTriggerProps = ComponentPropsWithoutRef<typeof BaseSelect.Trigger>;\n\n/** The button-shaped control that opens the select popup. */\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().trigger, className)}\n        data-jaci-component=\"select\"\n        data-slot=\"select-trigger\"\n      />\n    );\n  },\n);\n\nexport type SelectValueProps = ComponentPropsWithoutRef<typeof BaseSelect.Value>;\n\n/** Renders the selected item's label, or its placeholder when empty. */\nexport const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(function SelectValue(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Value\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().value, className)}\n      data-slot=\"select-value\"\n    />\n  );\n});\n\nexport type SelectIconProps = ComponentPropsWithoutRef<typeof BaseSelect.Icon>;\n\n/** A small chevron that rotates while the popup is open. */\nexport const SelectIcon = forwardRef<HTMLSpanElement, SelectIconProps>(function SelectIcon(\n  { children = \"⌄\", className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Icon\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().icon, className)}\n      data-slot=\"select-icon\"\n    >\n      {children}\n    </BaseSelect.Icon>\n  );\n});\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport const SelectPortal = BaseSelect.Portal;\n\nexport type SelectPositionerProps = ComponentPropsWithoutRef<typeof BaseSelect.Positioner>;\n\nexport const SelectPositioner = forwardRef<HTMLDivElement, SelectPositionerProps>(\n  function SelectPositioner({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().positioner, className)}\n        data-slot=\"select-positioner\"\n      />\n    );\n  },\n);\n\nexport type SelectPopupProps = ComponentPropsWithoutRef<typeof BaseSelect.Popup>;\n\nexport const SelectPopup = forwardRef<HTMLDivElement, SelectPopupProps>(function SelectPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().popup, className)}\n      data-slot=\"select-popup\"\n    />\n  );\n});\n\nexport type SelectListProps = ComponentPropsWithoutRef<typeof BaseSelect.List>;\n\nexport const SelectList = forwardRef<HTMLDivElement, SelectListProps>(function SelectList(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.List\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().list, className)}\n      data-slot=\"select-list\"\n    />\n  );\n});\n\nexport type SelectItemProps = ComponentPropsWithoutRef<typeof BaseSelect.Item>;\n\nexport const SelectItem = forwardRef<HTMLElement, SelectItemProps>(function SelectItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Item\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().item, className)}\n      data-slot=\"select-item\"\n    />\n  );\n});\n\nexport type SelectItemTextProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemText>;\n\nexport const SelectItemText = forwardRef<HTMLDivElement, SelectItemTextProps>(\n  function SelectItemText({ className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemText\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemText, className)}\n        data-slot=\"select-item-text\"\n      />\n    );\n  },\n);\n\nexport type SelectItemIndicatorProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemIndicator>;\n\nexport const SelectItemIndicator = forwardRef<HTMLSpanElement, SelectItemIndicatorProps>(\n  function SelectItemIndicator({ children = \"✓\", className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemIndicator\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemIndicator, className)}\n        data-slot=\"select-item-indicator\"\n      >\n        {children}\n      </BaseSelect.ItemIndicator>\n    );\n  },\n);\n\nexport type SelectGroupProps = ComponentPropsWithoutRef<typeof BaseSelect.Group>;\n\nexport const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(function SelectGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Group\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().group, className)}\n      data-slot=\"select-group\"\n    />\n  );\n});\n\nexport type SelectGroupLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;\n\nexport const SelectGroupLabel = forwardRef<HTMLDivElement, SelectGroupLabelProps>(\n  function SelectGroupLabel({ className, ...props }, ref) {\n    return (\n      <BaseSelect.GroupLabel\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().groupLabel, className)}\n        data-slot=\"select-group-label\"\n      />\n    );\n  },\n);\n\n/**\n * A visual separator for groups in a listbox. It is intentionally hidden from\n * assistive technology because ARIA listboxes may only contain options or\n * option groups, not semantic separators.\n */\nexport interface SelectSeparatorProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  function SelectSeparator({ className, orientation = \"horizontal\", ...props }, ref) {\n    return (\n      <div\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(useSelectStyles().separator, className)}\n        data-orientation={orientation}\n        data-slot=\"select-separator\"\n      />\n    );\n  },\n);\n\nexport const Select = {\n  Root: SelectRoot,\n  Label: SelectLabel,\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Portal: SelectPortal,\n  Positioner: SelectPositioner,\n  Popup: SelectPopup,\n  List: SelectList,\n  Item: SelectItem,\n  ItemText: SelectItemText,\n  ItemIndicator: SelectItemIndicator,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n  Separator: SelectSeparator,\n};\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":["SelectRoot","BaseSelect","Select"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { createContext, forwardRef, useContext, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { SelectRoot as BaseSelectRoot } from \"@base-ui/react/select\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { select } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nconst SelectSizeContext = createContext<SelectSize>(\"md\");\nconst SelectAuxContext = createContext<{ clear: () => void; disabled: boolean } | null>(null);\n\nfunction useSelectStyles() {\n  return select({ size: useContext(SelectSizeContext) });\n}\n\n/**\n * Groups an accessible listbox select. Use `value`/`onValueChange` for a\n * controlled selection, or `defaultValue` for an uncontrolled selection.\n *\n * `size` is shared by all visual parts so the trigger stays aligned with the\n * library's `Input` component.\n */\nexport interface SelectRootProps<Value, Multiple extends boolean | undefined = false>\n  extends BaseSelectRoot.Props<Value, Multiple> {\n  size?: SelectSize;\n  loading?: boolean;\n}\n\nexport function SelectRoot<Value = unknown, Multiple extends boolean | undefined = false>({\n  defaultValue,\n  disabled = false,\n  loading: _loading,\n  multiple,\n  onValueChange,\n  size = \"md\",\n  value: controlledValue,\n  ...props\n}: SelectRootProps<Value, Multiple>) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<unknown>(\n    defaultValue ?? (multiple ? [] : null),\n  );\n  const value = controlledValue === undefined ? uncontrolledValue : controlledValue;\n  const clear = () => {\n    const nextValue = multiple ? [] : null;\n    if (controlledValue === undefined) setUncontrolledValue(nextValue);\n    onValueChange?.(nextValue as never, undefined as never);\n  };\n  return (\n    <SelectSizeContext.Provider value={size}>\n      <SelectAuxContext.Provider value={{ clear, disabled }}>\n        <BaseSelect.Root\n          {...props}\n          disabled={disabled}\n          defaultValue={undefined}\n          multiple={multiple}\n          onValueChange={(nextValue, details) => {\n            if (controlledValue === undefined) setUncontrolledValue(nextValue);\n            onValueChange?.(nextValue, details);\n          }}\n          value={value as SelectRootProps<Value, Multiple>[\"value\"]}\n        />\n      </SelectAuxContext.Provider>\n    </SelectSizeContext.Provider>\n  );\n}\n\nexport type SelectLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.Label>;\n\n/** An accessible label that Base UI associates with the trigger automatically. */\nexport const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(function SelectLabel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Label\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().label, className)}\n      data-slot=\"select-label\"\n    />\n  );\n});\n\nexport type SelectTriggerProps = ComponentPropsWithoutRef<typeof BaseSelect.Trigger>;\n\n/** The button-shaped control that opens the select popup. */\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().trigger, className)}\n        data-jaci-component=\"select\"\n        data-slot=\"select-trigger\"\n      />\n    );\n  },\n);\n\nexport type SelectValueProps = ComponentPropsWithoutRef<typeof BaseSelect.Value>;\n\n/** Renders the selected item's label, or its placeholder when empty. */\nexport const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(function SelectValue(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Value\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().value, className)}\n      data-slot=\"select-value\"\n    />\n  );\n});\n\nexport type SelectIconProps = ComponentPropsWithoutRef<typeof BaseSelect.Icon>;\n\n/** A small chevron that rotates while the popup is open. */\nexport const SelectIcon = forwardRef<HTMLSpanElement, SelectIconProps>(function SelectIcon(\n  { children = \"⌄\", className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Icon\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().icon, className)}\n      data-slot=\"select-icon\"\n    >\n      {children}\n    </BaseSelect.Icon>\n  );\n});\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport const SelectPortal = BaseSelect.Portal;\n\nexport type SelectPositionerProps = ComponentPropsWithoutRef<typeof BaseSelect.Positioner>;\n\nexport const SelectPositioner = forwardRef<HTMLDivElement, SelectPositionerProps>(\n  function SelectPositioner({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().positioner, className)}\n        data-slot=\"select-positioner\"\n      />\n    );\n  },\n);\n\nexport type SelectPopupProps = ComponentPropsWithoutRef<typeof BaseSelect.Popup>;\n\nexport const SelectPopup = forwardRef<HTMLDivElement, SelectPopupProps>(function SelectPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().popup, className)}\n      data-slot=\"select-popup\"\n    />\n  );\n});\n\nexport type SelectListProps = ComponentPropsWithoutRef<typeof BaseSelect.List>;\n\nexport const SelectList = forwardRef<HTMLDivElement, SelectListProps>(function SelectList(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.List\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().list, className)}\n      data-slot=\"select-list\"\n    />\n  );\n});\n\nexport type SelectItemProps = ComponentPropsWithoutRef<typeof BaseSelect.Item>;\n\nexport const SelectItem = forwardRef<HTMLElement, SelectItemProps>(function SelectItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Item\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().item, className)}\n      data-slot=\"select-item\"\n    />\n  );\n});\n\nexport type SelectItemTextProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemText>;\n\nexport const SelectItemText = forwardRef<HTMLDivElement, SelectItemTextProps>(\n  function SelectItemText({ className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemText\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemText, className)}\n        data-slot=\"select-item-text\"\n      />\n    );\n  },\n);\n\nexport type SelectItemIndicatorProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemIndicator>;\n\nexport const SelectItemIndicator = forwardRef<HTMLSpanElement, SelectItemIndicatorProps>(\n  function SelectItemIndicator({ children = \"✓\", className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemIndicator\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemIndicator, className)}\n        data-slot=\"select-item-indicator\"\n      >\n        {children}\n      </BaseSelect.ItemIndicator>\n    );\n  },\n);\n\nexport type SelectGroupProps = ComponentPropsWithoutRef<typeof BaseSelect.Group>;\n\nexport const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(function SelectGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Group\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().group, className)}\n      data-slot=\"select-group\"\n    />\n  );\n});\n\nexport type SelectGroupLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;\n\nexport const SelectGroupLabel = forwardRef<HTMLDivElement, SelectGroupLabelProps>(\n  function SelectGroupLabel({ className, ...props }, ref) {\n    return (\n      <BaseSelect.GroupLabel\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().groupLabel, className)}\n        data-slot=\"select-group-label\"\n      />\n    );\n  },\n);\n\n/**\n * A visual separator for groups in a listbox. It is intentionally hidden from\n * assistive technology because ARIA listboxes may only contain options or\n * option groups, not semantic separators.\n */\nexport interface SelectSeparatorProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  function SelectSeparator({ className, orientation = \"horizontal\", ...props }, ref) {\n    return (\n      <div\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(useSelectStyles().separator, className)}\n        data-orientation={orientation}\n        data-slot=\"select-separator\"\n      />\n    );\n  },\n);\n\nexport interface SelectClearProps extends ComponentPropsWithoutRef<\"button\"> {\n  children?: ReactNode;\n}\nexport const SelectClear = forwardRef<HTMLButtonElement, SelectClearProps>(function SelectClear(\n  { children = \"×\", className, ...props },\n  ref,\n) {\n  const context = useContext(SelectAuxContext);\n  const styles = useSelectStyles();\n  return (\n    <button\n      {...props}\n      aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n      className={cx(styles.clear, className)}\n      data-slot=\"select-clear\"\n      disabled={props.disabled || context?.disabled}\n      onClick={(event) => {\n        context?.clear();\n        props.onClick?.(event);\n      }}\n      ref={ref}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\n\nexport type SelectEmptyProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectEmpty = forwardRef<HTMLDivElement, SelectEmptyProps>(function SelectEmpty(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      className={cx(useSelectStyles().empty, className)}\n      data-slot=\"select-empty\"\n      ref={ref}\n    />\n  );\n});\nexport type SelectLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectLoading = forwardRef<HTMLDivElement, SelectLoadingProps>(function SelectLoading(\n  { children = \"Loading…\", className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().loading, className)}\n      data-slot=\"select-loading\"\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n});\nexport type SelectStatusProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectStatus = forwardRef<HTMLDivElement, SelectStatusProps>(function SelectStatus(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().status, className)}\n      data-slot=\"select-status\"\n      ref={ref}\n    />\n  );\n});\n\nexport const Select = {\n  Root: SelectRoot,\n  Label: SelectLabel,\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Portal: SelectPortal,\n  Positioner: SelectPositioner,\n  Popup: SelectPopup,\n  List: SelectList,\n  Item: SelectItem,\n  ItemText: SelectItemText,\n  ItemIndicator: SelectItemIndicator,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n  Separator: SelectSeparator,\n  Clear: SelectClear,\n  Empty: SelectEmpty,\n  Loading: SelectLoading,\n  Status: SelectStatus,\n};\n"],"mappings":"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"}

package/dist/components/tags-input/tags-input.cjs

@@ -18,12 +18,24 @@ function changedEvent(event, value) {
 		target: nextTarget
 	};
 }
-const TagsInput = (0, react.forwardRef)(function TagsInput({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, className, data = [], defaultTags = [], defaultValue = "", disabled = false, id: providedId, label, onBlur, onChange, onFocus, onInputValueChange, onTagsChange, placeholder, tags: controlledTags, value: controlledInputValue, ...props }, ref) {
+function tagKey(tag, index) {
+	return `${tag}-${index}`;
+}
+function hasDelimiter(value, delimiter) {
+	if (typeof delimiter === "string") return delimiter.length > 0 && value.includes(delimiter);
+	delimiter.lastIndex = 0;
+	const result = delimiter.test(value);
+	delimiter.lastIndex = 0;
+	return result;
+}
+const TagsInput = (0, react.forwardRef)(function TagsInput({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, allowDuplicates = false, className, data = [], defaultTags = [], defaultValue = "", disabled = false, delimiter = /[,\n]/u, editable = false, id: providedId, label, onBlur, onChange, onFocus, onInputValueChange, onTagsChange, placeholder, tags: controlledTags, value: controlledInputValue, ...props }, ref) {
 	const generatedId = (0, react.useId)();
 	const id = providedId ?? generatedId;
 	const [uncontrolledTags, setUncontrolledTags] = (0, react.useState)(() => [...defaultTags]);
 	const [uncontrolledInputValue, setUncontrolledInputValue] = (0, react.useState)(defaultValue);
 	const [focused, setFocused] = (0, react.useState)(false);
+	const [composing, setComposing] = (0, react.useState)(false);
+	const [editingTag, setEditingTag] = (0, react.useState)(null);
 	const rootRef = (0, react.useRef)(null);
 	const styles = require_tags_input.tagsInput();
 	const selectedTags = controlledTags === void 0 ? uncontrolledTags : [...controlledTags];
@@ -43,11 +55,38 @@ const TagsInput = (0, react.forwardRef)(function TagsInput({ "aria-describedby":
 	]);
 	const addTag = (0, react.useCallback)((rawTag, event) => {
 		const tag = rawTag.trim();
-		if (tag && !selectedTags.includes(tag) && data.includes(tag)) updateTags([...selectedTags, tag]);
+		const isAllowed = data.length === 0 || data.includes(tag);
+		const duplicate = selectedTags.includes(tag);
+		if (tag && isAllowed && (allowDuplicates || !duplicate)) if (editingTag) {
+			updateTags([
+				...selectedTags.slice(0, editingTag.index),
+				tag,
+				...selectedTags.slice(editingTag.index)
+			]);
+			setEditingTag(null);
+		} else updateTags([...selectedTags, tag]);
+		else if (editingTag) return;
+		clearInput(event);
+	}, [
+		allowDuplicates,
+		clearInput,
+		data,
+		editingTag,
+		selectedTags,
+		updateTags
+	]);
+	const addDelimited = (0, react.useCallback)((rawValue, event) => {
+		const separator = typeof delimiter === "string" && delimiter.length === 0 ? /\r?\n/u : delimiter;
+		const values = rawValue.split(separator).map((value) => value.trim()).filter(Boolean);
+		const nextTags = [...selectedTags];
+		for (const value of values) if ((data.length === 0 || data.includes(value)) && (allowDuplicates || !nextTags.includes(value))) nextTags.push(value);
+		if (nextTags.length !== selectedTags.length) updateTags(nextTags);
 		clearInput(event);
 	}, [
+		allowDuplicates,
 		clearInput,
 		data,
+		delimiter,
 		selectedTags,
 		updateTags
 	]);
@@ -66,8 +105,8 @@ const TagsInput = (0, react.forwardRef)(function TagsInput({ "aria-describedby":
 			onChange?.(event);
 			return;
 		}
-		if (nextValue.endsWith(",")) {
-			addTag(nextValue.slice(0, -1), event);
+		if (!composing && hasDelimiter(nextValue, delimiter)) {
+			addDelimited(nextValue, event);
 			return;
 		}
 		if (controlledInputValue === void 0) setUncontrolledInputValue(nextValue);
@@ -78,6 +117,41 @@ const TagsInput = (0, react.forwardRef)(function TagsInput({ "aria-describedby":
 		setFocused(false);
 		onBlur?.(event);
 	}
+	function handlePaste(event) {
+		const pasted = event.clipboardData.getData("text");
+		if (!pasted || !hasDelimiter(pasted, delimiter) && !pasted.includes("\n")) return;
+		event.preventDefault();
+		addDelimited(pasted);
+	}
+	function handleKeyDown(event) {
+		if (event.nativeEvent.isComposing || composing) return;
+		if (event.key === "Enter") {
+			event.preventDefault();
+			if (inputValue.trim()) addTag(inputValue);
+			else if (editingTag) setEditingTag(null);
+		} else if (event.key === "Escape" && editingTag) {
+			event.preventDefault();
+			updateTags([
+				...selectedTags.slice(0, editingTag.index),
+				editingTag.value,
+				...selectedTags.slice(editingTag.index)
+			]);
+			clearInput();
+			setEditingTag(null);
+		} else if (event.key === "Backspace" && !inputValue && editable && selectedTags.length > 0) {
+			const index = selectedTags.length - 1;
+			const tag = selectedTags[index];
+			if (tag === void 0) return;
+			setEditingTag({
+				index,
+				value: tag
+			});
+			updateTags(selectedTags.slice(0, -1));
+			if (controlledInputValue === void 0) setUncontrolledInputValue(tag);
+			onInputValueChange?.(tag);
+		}
+		props.onKeyDown?.(event);
+	}
 	function removeTag(index) {
 		updateTags(selectedTags.filter((_, currentIndex) => currentIndex !== index));
 	}
@@ -117,7 +191,7 @@ const TagsInput = (0, react.forwardRef)(function TagsInput({ "aria-describedby":
 							type: "button",
 							children: "×"
 						})]
-					}, tag))
+					}, tagKey(tag, index)))
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					...props,
 					...ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {},
@@ -129,10 +203,14 @@ const TagsInput = (0, react.forwardRef)(function TagsInput({ "aria-describedby":
 					id,
 					onBlur: handleBlur,
 					onChange: handleChange,
+					onCompositionEnd: () => setComposing(false),
+					onCompositionStart: () => setComposing(true),
 					onFocus: (event) => {
 						setFocused(true);
 						onFocus?.(event);
 					},
+					onKeyDown: handleKeyDown,
+					onPaste: handlePaste,
 					placeholder,
 					ref,
 					type: "text",

package/dist/components/tags-input/tags-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tags-input.cjs","names":["tagsInput","cx"],"sources":["../../../src/components/tags-input/tags-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  MouseEvent,\n  ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { tagsInput } from \"../../styled-system/recipes\";\n\nexport interface TagsInputProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"children\" | \"defaultValue\" | \"onChange\" | \"type\" | \"value\"\n  > {\n  /** Current tags. Omit this prop to use the uncontrolled API. */\n  tags?: readonly string[];\n  /** Initial tags for the uncontrolled API. */\n  defaultTags?: readonly string[];\n  /** Called whenever a tag is added or removed. */\n  onTagsChange?: (tags: string[]) => void;\n  /** Optional suggestions. A tag is accepted after a comma only when it is in this list. */\n  data?: readonly string[];\n  /** Visible label for the input. */\n  label?: ReactNode;\n  /** Current text query. This is the native input value, not the selected tags. */\n  value?: string;\n  /** Initial text query for an uncontrolled input. */\n  defaultValue?: string;\n  /** Native input change callback. */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /** Optional callback useful when a controlled query is cleared by selecting a tag. */\n  onInputValueChange?: (value: string) => void;\n}\n\nfunction changedEvent(event: ChangeEvent<HTMLInputElement>, value: string) {\n  const target = event.target;\n  const nextTarget = {\n    checked: target.checked,\n    id: target.id,\n    name: target.name,\n    value,\n  } as HTMLInputElement;\n\n  return {\n    ...event,\n    currentTarget: nextTarget,\n    target: nextTarget,\n  } as ChangeEvent<HTMLInputElement>;\n}\n\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-label\": ariaLabel,\n    className,\n    data = [],\n    defaultTags = [],\n    defaultValue = \"\",\n    disabled = false,\n    id: providedId,\n    label,\n    onBlur,\n    onChange,\n    onFocus,\n    onInputValueChange,\n    onTagsChange,\n    placeholder,\n    tags: controlledTags,\n    value: controlledInputValue,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = providedId ?? generatedId;\n  const [uncontrolledTags, setUncontrolledTags] = useState<string[]>(() => [...defaultTags]);\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState(defaultValue);\n  const [focused, setFocused] = useState(false);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const styles = tagsInput();\n  const selectedTags = controlledTags === undefined ? uncontrolledTags : [...controlledTags];\n  const inputValue =\n    controlledInputValue === undefined ? uncontrolledInputValue : controlledInputValue;\n\n  const updateTags = useCallback(\n    (nextTags: string[]) => {\n      if (controlledTags === undefined) setUncontrolledTags(nextTags);\n      onTagsChange?.(nextTags);\n    },\n    [controlledTags, onTagsChange],\n  );\n\n  const clearInput = useCallback(\n    (event?: ChangeEvent<HTMLInputElement>) => {\n      if (controlledInputValue === undefined) setUncontrolledInputValue(\"\");\n      onInputValueChange?.(\"\");\n      if (event) onChange?.(changedEvent(event, \"\"));\n    },\n    [controlledInputValue, onChange, onInputValueChange],\n  );\n\n  const addTag = useCallback(\n    (rawTag: string, event?: ChangeEvent<HTMLInputElement>) => {\n      const tag = rawTag.trim();\n      if (tag && !selectedTags.includes(tag) && data.includes(tag)) {\n        updateTags([...selectedTags, tag]);\n      }\n      clearInput(event);\n    },\n    [clearInput, data, selectedTags, updateTags],\n  );\n\n  const suggestions = useMemo(() => {\n    const query = inputValue.trim().toLocaleLowerCase();\n    return data.filter(\n      (item) =>\n        !selectedTags.includes(item) &&\n        (query.length === 0 || item.toLocaleLowerCase().includes(query)),\n    );\n  }, [data, inputValue, selectedTags]);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const nextValue = event.currentTarget.value;\n    if (nextValue.trim() === \"\") {\n      clearInput(event);\n      onChange?.(event);\n      return;\n    }\n\n    if (nextValue.endsWith(\",\")) {\n      addTag(nextValue.slice(0, -1), event);\n      return;\n    }\n\n    if (controlledInputValue === undefined) setUncontrolledInputValue(nextValue);\n    onInputValueChange?.(nextValue);\n    onChange?.(event);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    setFocused(false);\n    onBlur?.(event);\n  }\n\n  function removeTag(index: number) {\n    updateTags(selectedTags.filter((_, currentIndex) => currentIndex !== index));\n  }\n\n  return (\n    <div\n      className={styles.root}\n      data-jaci-component=\"tags-input\"\n      data-slot=\"tags-input\"\n      ref={rootRef}\n    >\n      {label ? (\n        <label className={styles.label} data-slot=\"tags-input-label\" htmlFor={id}>\n          {label}\n        </label>\n      ) : null}\n      <div\n        className={cx(styles.control, className)}\n        data-disabled={disabled || undefined}\n        data-focus={focused || undefined}\n        data-slot=\"tags-input-control\"\n      >\n        <div className={styles.tagList} data-slot=\"tags-input-tag-list\">\n          {selectedTags.map((tag, index) => (\n            <span className={styles.tag} data-slot=\"tags-input-tag\" key={tag}>\n              <span className={styles.tagLabel} data-slot=\"tags-input-tag-label\">\n                {tag}\n              </span>\n              <button\n                aria-label={`Remove ${tag}`}\n                className={styles.tagRemove}\n                data-slot=\"tags-input-tag-remove\"\n                disabled={disabled}\n                onClick={() => removeTag(index)}\n                type=\"button\"\n              >\n                ×\n              </button>\n            </span>\n          ))}\n        </div>\n        <input\n          {...props}\n          {...(ariaDescribedBy ? { \"aria-describedby\": ariaDescribedBy } : {})}\n          {...(ariaInvalid !== undefined ? { \"aria-invalid\": ariaInvalid } : {})}\n          {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n          autoComplete=\"off\"\n          className={styles.input}\n          disabled={disabled}\n          id={id}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={(event) => {\n            setFocused(true);\n            onFocus?.(event);\n          }}\n          placeholder={placeholder}\n          ref={ref}\n          type=\"text\"\n          value={inputValue}\n        />\n      </div>\n      {focused && data.length > 0 ? (\n        <div className={styles.positioner} data-slot=\"tags-input-positioner\">\n          <div\n            aria-label=\"Suggestions\"\n            className={styles.list}\n            data-slot=\"tags-input-list\"\n            role=\"listbox\"\n          >\n            {suggestions.length > 0 ? (\n              suggestions.map((item) => (\n                <button\n                  aria-selected={false}\n                  className={styles.item}\n                  data-slot=\"tags-input-item\"\n                  key={item}\n                  onClick={() => addTag(item)}\n                  onMouseDown={(event: MouseEvent<HTMLButtonElement>) => event.preventDefault()}\n                  role=\"option\"\n                  type=\"button\"\n                >\n                  {item}\n                </button>\n              ))\n            ) : (\n              <div className={styles.empty} data-slot=\"tags-input-empty\">\n                No options\n              </div>\n            )}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"tags-input.cjs","names":["tagsInput","cx"],"sources":["../../../src/components/tags-input/tags-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ClipboardEvent,\n  ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { tagsInput } from \"../../styled-system/recipes\";\n\nexport interface TagsInputProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"children\" | \"defaultValue\" | \"onChange\" | \"type\" | \"value\"\n  > {\n  /** Current tags. Omit this prop to use the uncontrolled API. */\n  tags?: readonly string[];\n  /** Initial tags for the uncontrolled API. */\n  defaultTags?: readonly string[];\n  /** Called whenever a tag is added or removed. */\n  onTagsChange?: (tags: string[]) => void;\n  /** Optional suggestions. A tag is accepted after a comma only when it is in this list. */\n  data?: readonly string[];\n  /** Visible label for the input. */\n  label?: ReactNode;\n  /** Current text query. This is the native input value, not the selected tags. */\n  value?: string;\n  /** Initial text query for an uncontrolled input. */\n  defaultValue?: string;\n  /** Native input change callback. */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /** Optional callback useful when a controlled query is cleared by selecting a tag. */\n  onInputValueChange?: (value: string) => void;\n  allowDuplicates?: boolean;\n  delimiter?: string | RegExp;\n  editable?: boolean;\n}\n\nfunction changedEvent(event: ChangeEvent<HTMLInputElement>, value: string) {\n  const target = event.target;\n  const nextTarget = {\n    checked: target.checked,\n    id: target.id,\n    name: target.name,\n    value,\n  } as HTMLInputElement;\n\n  return {\n    ...event,\n    currentTarget: nextTarget,\n    target: nextTarget,\n  } as ChangeEvent<HTMLInputElement>;\n}\n\nfunction tagKey(tag: string, index: number) {\n  return `${tag}-${index}`;\n}\n\nfunction hasDelimiter(value: string, delimiter: string | RegExp) {\n  if (typeof delimiter === \"string\") return delimiter.length > 0 && value.includes(delimiter);\n  delimiter.lastIndex = 0;\n  const result = delimiter.test(value);\n  delimiter.lastIndex = 0;\n  return result;\n}\n\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-label\": ariaLabel,\n    allowDuplicates = false,\n    className,\n    data = [],\n    defaultTags = [],\n    defaultValue = \"\",\n    disabled = false,\n    delimiter = /[,\\n]/u,\n    editable = false,\n    id: providedId,\n    label,\n    onBlur,\n    onChange,\n    onFocus,\n    onInputValueChange,\n    onTagsChange,\n    placeholder,\n    tags: controlledTags,\n    value: controlledInputValue,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = providedId ?? generatedId;\n  const [uncontrolledTags, setUncontrolledTags] = useState<string[]>(() => [...defaultTags]);\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState(defaultValue);\n  const [focused, setFocused] = useState(false);\n  const [composing, setComposing] = useState(false);\n  const [editingTag, setEditingTag] = useState<{ index: number; value: string } | null>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const styles = tagsInput();\n  const selectedTags = controlledTags === undefined ? uncontrolledTags : [...controlledTags];\n  const inputValue =\n    controlledInputValue === undefined ? uncontrolledInputValue : controlledInputValue;\n\n  const updateTags = useCallback(\n    (nextTags: string[]) => {\n      if (controlledTags === undefined) setUncontrolledTags(nextTags);\n      onTagsChange?.(nextTags);\n    },\n    [controlledTags, onTagsChange],\n  );\n\n  const clearInput = useCallback(\n    (event?: ChangeEvent<HTMLInputElement>) => {\n      if (controlledInputValue === undefined) setUncontrolledInputValue(\"\");\n      onInputValueChange?.(\"\");\n      if (event) onChange?.(changedEvent(event, \"\"));\n    },\n    [controlledInputValue, onChange, onInputValueChange],\n  );\n\n  const addTag = useCallback(\n    (rawTag: string, event?: ChangeEvent<HTMLInputElement>) => {\n      const tag = rawTag.trim();\n      const isAllowed = data.length === 0 || data.includes(tag);\n      const duplicate = selectedTags.includes(tag);\n      if (tag && isAllowed && (allowDuplicates || !duplicate)) {\n        if (editingTag) {\n          updateTags([\n            ...selectedTags.slice(0, editingTag.index),\n            tag,\n            ...selectedTags.slice(editingTag.index),\n          ]);\n          setEditingTag(null);\n        } else {\n          updateTags([...selectedTags, tag]);\n        }\n      } else if (editingTag) {\n        return;\n      }\n      clearInput(event);\n    },\n    [allowDuplicates, clearInput, data, editingTag, selectedTags, updateTags],\n  );\n\n  const addDelimited = useCallback(\n    (rawValue: string, event?: ChangeEvent<HTMLInputElement>) => {\n      const separator =\n        typeof delimiter === \"string\" && delimiter.length === 0 ? /\\r?\\n/u : delimiter;\n      const values = rawValue\n        .split(separator)\n        .map((value) => value.trim())\n        .filter(Boolean);\n      const nextTags = [...selectedTags];\n      for (const value of values) {\n        const isAllowed = data.length === 0 || data.includes(value);\n        if (isAllowed && (allowDuplicates || !nextTags.includes(value))) nextTags.push(value);\n      }\n      if (nextTags.length !== selectedTags.length) updateTags(nextTags);\n      clearInput(event);\n    },\n    [allowDuplicates, clearInput, data, delimiter, selectedTags, updateTags],\n  );\n\n  const suggestions = useMemo(() => {\n    const query = inputValue.trim().toLocaleLowerCase();\n    return data.filter(\n      (item) =>\n        !selectedTags.includes(item) &&\n        (query.length === 0 || item.toLocaleLowerCase().includes(query)),\n    );\n  }, [data, inputValue, selectedTags]);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const nextValue = event.currentTarget.value;\n    if (nextValue.trim() === \"\") {\n      clearInput(event);\n      onChange?.(event);\n      return;\n    }\n\n    if (!composing && hasDelimiter(nextValue, delimiter)) {\n      addDelimited(nextValue, event);\n      return;\n    }\n\n    if (controlledInputValue === undefined) setUncontrolledInputValue(nextValue);\n    onInputValueChange?.(nextValue);\n    onChange?.(event);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    setFocused(false);\n    onBlur?.(event);\n  }\n\n  function handlePaste(event: ClipboardEvent<HTMLInputElement>) {\n    const pasted = event.clipboardData.getData(\"text\");\n    if (!pasted || (!hasDelimiter(pasted, delimiter) && !pasted.includes(\"\\n\"))) return;\n    event.preventDefault();\n    addDelimited(pasted);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    if (event.nativeEvent.isComposing || composing) return;\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      if (inputValue.trim()) addTag(inputValue);\n      else if (editingTag) setEditingTag(null);\n    } else if (event.key === \"Escape\" && editingTag) {\n      event.preventDefault();\n      updateTags([\n        ...selectedTags.slice(0, editingTag.index),\n        editingTag.value,\n        ...selectedTags.slice(editingTag.index),\n      ]);\n      clearInput();\n      setEditingTag(null);\n    } else if (event.key === \"Backspace\" && !inputValue && editable && selectedTags.length > 0) {\n      const index = selectedTags.length - 1;\n      const tag = selectedTags[index];\n      if (tag === undefined) return;\n      setEditingTag({ index, value: tag });\n      updateTags(selectedTags.slice(0, -1));\n      if (controlledInputValue === undefined) setUncontrolledInputValue(tag);\n      onInputValueChange?.(tag);\n    }\n    props.onKeyDown?.(event);\n  }\n\n  function removeTag(index: number) {\n    updateTags(selectedTags.filter((_, currentIndex) => currentIndex !== index));\n  }\n\n  return (\n    <div\n      className={styles.root}\n      data-jaci-component=\"tags-input\"\n      data-slot=\"tags-input\"\n      ref={rootRef}\n    >\n      {label ? (\n        <label className={styles.label} data-slot=\"tags-input-label\" htmlFor={id}>\n          {label}\n        </label>\n      ) : null}\n      <div\n        className={cx(styles.control, className)}\n        data-disabled={disabled || undefined}\n        data-focus={focused || undefined}\n        data-slot=\"tags-input-control\"\n      >\n        <div className={styles.tagList} data-slot=\"tags-input-tag-list\">\n          {selectedTags.map((tag, index) => (\n            <span className={styles.tag} data-slot=\"tags-input-tag\" key={tagKey(tag, index)}>\n              <span className={styles.tagLabel} data-slot=\"tags-input-tag-label\">\n                {tag}\n              </span>\n              <button\n                aria-label={`Remove ${tag}`}\n                className={styles.tagRemove}\n                data-slot=\"tags-input-tag-remove\"\n                disabled={disabled}\n                onClick={() => removeTag(index)}\n                type=\"button\"\n              >\n                ×\n              </button>\n            </span>\n          ))}\n        </div>\n        <input\n          {...props}\n          {...(ariaDescribedBy ? { \"aria-describedby\": ariaDescribedBy } : {})}\n          {...(ariaInvalid !== undefined ? { \"aria-invalid\": ariaInvalid } : {})}\n          {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n          autoComplete=\"off\"\n          className={styles.input}\n          disabled={disabled}\n          id={id}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onCompositionEnd={() => setComposing(false)}\n          onCompositionStart={() => setComposing(true)}\n          onFocus={(event) => {\n            setFocused(true);\n            onFocus?.(event);\n          }}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n          placeholder={placeholder}\n          ref={ref}\n          type=\"text\"\n          value={inputValue}\n        />\n      </div>\n      {focused && data.length > 0 ? (\n        <div className={styles.positioner} data-slot=\"tags-input-positioner\">\n          <div\n            aria-label=\"Suggestions\"\n            className={styles.list}\n            data-slot=\"tags-input-list\"\n            role=\"listbox\"\n          >\n            {suggestions.length > 0 ? (\n              suggestions.map((item) => (\n                <button\n                  aria-selected={false}\n                  className={styles.item}\n                  data-slot=\"tags-input-item\"\n                  key={item}\n                  onClick={() => addTag(item)}\n                  onMouseDown={(event: MouseEvent<HTMLButtonElement>) => event.preventDefault()}\n                  role=\"option\"\n                  type=\"button\"\n                >\n                  {item}\n                </button>\n              ))\n            ) : (\n              <div className={styles.empty} data-slot=\"tags-input-empty\">\n                No options\n              </div>\n            )}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/tags-input/tags-input.d.cts

@@ -19,6 +19,9 @@ interface TagsInputProps extends Omit<ComponentPropsWithoutRef<"input">, "childr
   onChange?: ChangeEventHandler<HTMLInputElement>;
   /** Optional callback useful when a controlled query is cleared by selecting a tag. */
   onInputValueChange?: (value: string) => void;
+  allowDuplicates?: boolean;
+  delimiter?: string | RegExp;
+  editable?: boolean;
 }
 declare const TagsInput: import("react").ForwardRefExoticComponent<TagsInputProps & import("react").RefAttributes<HTMLInputElement>>;
 //#endregion

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

@@ -19,6 +19,9 @@ interface TagsInputProps extends Omit<ComponentPropsWithoutRef<"input">, "childr
   onChange?: ChangeEventHandler<HTMLInputElement>;
   /** Optional callback useful when a controlled query is cleared by selecting a tag. */
   onInputValueChange?: (value: string) => void;
+  allowDuplicates?: boolean;
+  delimiter?: string | RegExp;
+  editable?: boolean;
 }
 declare const TagsInput: import("react").ForwardRefExoticComponent<TagsInputProps & import("react").RefAttributes<HTMLInputElement>>;
 //#endregion

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

@@ -18,12 +18,24 @@ function changedEvent(event, value) {
 		target: nextTarget
 	};
 }
-const TagsInput = forwardRef(function TagsInput({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, className, data = [], defaultTags = [], defaultValue = "", disabled = false, id: providedId, label, onBlur, onChange, onFocus, onInputValueChange, onTagsChange, placeholder, tags: controlledTags, value: controlledInputValue, ...props }, ref) {
+function tagKey(tag, index) {
+	return `${tag}-${index}`;
+}
+function hasDelimiter(value, delimiter) {
+	if (typeof delimiter === "string") return delimiter.length > 0 && value.includes(delimiter);
+	delimiter.lastIndex = 0;
+	const result = delimiter.test(value);
+	delimiter.lastIndex = 0;
+	return result;
+}
+const TagsInput = forwardRef(function TagsInput({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, allowDuplicates = false, className, data = [], defaultTags = [], defaultValue = "", disabled = false, delimiter = /[,\n]/u, editable = false, id: providedId, label, onBlur, onChange, onFocus, onInputValueChange, onTagsChange, placeholder, tags: controlledTags, value: controlledInputValue, ...props }, ref) {
 	const generatedId = useId();
 	const id = providedId ?? generatedId;
 	const [uncontrolledTags, setUncontrolledTags] = useState(() => [...defaultTags]);
 	const [uncontrolledInputValue, setUncontrolledInputValue] = useState(defaultValue);
 	const [focused, setFocused] = useState(false);
+	const [composing, setComposing] = useState(false);
+	const [editingTag, setEditingTag] = useState(null);
 	const rootRef = useRef(null);
 	const styles = tagsInput();
 	const selectedTags = controlledTags === void 0 ? uncontrolledTags : [...controlledTags];
@@ -43,11 +55,38 @@ const TagsInput = forwardRef(function TagsInput({ "aria-describedby": ariaDescri
 	]);
 	const addTag = useCallback((rawTag, event) => {
 		const tag = rawTag.trim();
-		if (tag && !selectedTags.includes(tag) && data.includes(tag)) updateTags([...selectedTags, tag]);
+		const isAllowed = data.length === 0 || data.includes(tag);
+		const duplicate = selectedTags.includes(tag);
+		if (tag && isAllowed && (allowDuplicates || !duplicate)) if (editingTag) {
+			updateTags([
+				...selectedTags.slice(0, editingTag.index),
+				tag,
+				...selectedTags.slice(editingTag.index)
+			]);
+			setEditingTag(null);
+		} else updateTags([...selectedTags, tag]);
+		else if (editingTag) return;
+		clearInput(event);
+	}, [
+		allowDuplicates,
+		clearInput,
+		data,
+		editingTag,
+		selectedTags,
+		updateTags
+	]);
+	const addDelimited = useCallback((rawValue, event) => {
+		const separator = typeof delimiter === "string" && delimiter.length === 0 ? /\r?\n/u : delimiter;
+		const values = rawValue.split(separator).map((value) => value.trim()).filter(Boolean);
+		const nextTags = [...selectedTags];
+		for (const value of values) if ((data.length === 0 || data.includes(value)) && (allowDuplicates || !nextTags.includes(value))) nextTags.push(value);
+		if (nextTags.length !== selectedTags.length) updateTags(nextTags);
 		clearInput(event);
 	}, [
+		allowDuplicates,
 		clearInput,
 		data,
+		delimiter,
 		selectedTags,
 		updateTags
 	]);
@@ -66,8 +105,8 @@ const TagsInput = forwardRef(function TagsInput({ "aria-describedby": ariaDescri
 			onChange?.(event);
 			return;
 		}
-		if (nextValue.endsWith(",")) {
-			addTag(nextValue.slice(0, -1), event);
+		if (!composing && hasDelimiter(nextValue, delimiter)) {
+			addDelimited(nextValue, event);
 			return;
 		}
 		if (controlledInputValue === void 0) setUncontrolledInputValue(nextValue);
@@ -78,6 +117,41 @@ const TagsInput = forwardRef(function TagsInput({ "aria-describedby": ariaDescri
 		setFocused(false);
 		onBlur?.(event);
 	}
+	function handlePaste(event) {
+		const pasted = event.clipboardData.getData("text");
+		if (!pasted || !hasDelimiter(pasted, delimiter) && !pasted.includes("\n")) return;
+		event.preventDefault();
+		addDelimited(pasted);
+	}
+	function handleKeyDown(event) {
+		if (event.nativeEvent.isComposing || composing) return;
+		if (event.key === "Enter") {
+			event.preventDefault();
+			if (inputValue.trim()) addTag(inputValue);
+			else if (editingTag) setEditingTag(null);
+		} else if (event.key === "Escape" && editingTag) {
+			event.preventDefault();
+			updateTags([
+				...selectedTags.slice(0, editingTag.index),
+				editingTag.value,
+				...selectedTags.slice(editingTag.index)
+			]);
+			clearInput();
+			setEditingTag(null);
+		} else if (event.key === "Backspace" && !inputValue && editable && selectedTags.length > 0) {
+			const index = selectedTags.length - 1;
+			const tag = selectedTags[index];
+			if (tag === void 0) return;
+			setEditingTag({
+				index,
+				value: tag
+			});
+			updateTags(selectedTags.slice(0, -1));
+			if (controlledInputValue === void 0) setUncontrolledInputValue(tag);
+			onInputValueChange?.(tag);
+		}
+		props.onKeyDown?.(event);
+	}
 	function removeTag(index) {
 		updateTags(selectedTags.filter((_, currentIndex) => currentIndex !== index));
 	}
@@ -117,7 +191,7 @@ const TagsInput = forwardRef(function TagsInput({ "aria-describedby": ariaDescri
 							type: "button",
 							children: "×"
 						})]
-					}, tag))
+					}, tagKey(tag, index)))
 				}), /* @__PURE__ */ jsx("input", {
 					...props,
 					...ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {},
@@ -129,10 +203,14 @@ const TagsInput = forwardRef(function TagsInput({ "aria-describedby": ariaDescri
 					id,
 					onBlur: handleBlur,
 					onChange: handleChange,
+					onCompositionEnd: () => setComposing(false),
+					onCompositionStart: () => setComposing(true),
 					onFocus: (event) => {
 						setFocused(true);
 						onFocus?.(event);
 					},
+					onKeyDown: handleKeyDown,
+					onPaste: handlePaste,
 					placeholder,
 					ref,
 					type: "text",

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

@@ -1 +1 @@
-{"version":3,"file":"tags-input.js","names":[],"sources":["../../../src/components/tags-input/tags-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  MouseEvent,\n  ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { tagsInput } from \"../../styled-system/recipes\";\n\nexport interface TagsInputProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"children\" | \"defaultValue\" | \"onChange\" | \"type\" | \"value\"\n  > {\n  /** Current tags. Omit this prop to use the uncontrolled API. */\n  tags?: readonly string[];\n  /** Initial tags for the uncontrolled API. */\n  defaultTags?: readonly string[];\n  /** Called whenever a tag is added or removed. */\n  onTagsChange?: (tags: string[]) => void;\n  /** Optional suggestions. A tag is accepted after a comma only when it is in this list. */\n  data?: readonly string[];\n  /** Visible label for the input. */\n  label?: ReactNode;\n  /** Current text query. This is the native input value, not the selected tags. */\n  value?: string;\n  /** Initial text query for an uncontrolled input. */\n  defaultValue?: string;\n  /** Native input change callback. */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /** Optional callback useful when a controlled query is cleared by selecting a tag. */\n  onInputValueChange?: (value: string) => void;\n}\n\nfunction changedEvent(event: ChangeEvent<HTMLInputElement>, value: string) {\n  const target = event.target;\n  const nextTarget = {\n    checked: target.checked,\n    id: target.id,\n    name: target.name,\n    value,\n  } as HTMLInputElement;\n\n  return {\n    ...event,\n    currentTarget: nextTarget,\n    target: nextTarget,\n  } as ChangeEvent<HTMLInputElement>;\n}\n\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-label\": ariaLabel,\n    className,\n    data = [],\n    defaultTags = [],\n    defaultValue = \"\",\n    disabled = false,\n    id: providedId,\n    label,\n    onBlur,\n    onChange,\n    onFocus,\n    onInputValueChange,\n    onTagsChange,\n    placeholder,\n    tags: controlledTags,\n    value: controlledInputValue,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = providedId ?? generatedId;\n  const [uncontrolledTags, setUncontrolledTags] = useState<string[]>(() => [...defaultTags]);\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState(defaultValue);\n  const [focused, setFocused] = useState(false);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const styles = tagsInput();\n  const selectedTags = controlledTags === undefined ? uncontrolledTags : [...controlledTags];\n  const inputValue =\n    controlledInputValue === undefined ? uncontrolledInputValue : controlledInputValue;\n\n  const updateTags = useCallback(\n    (nextTags: string[]) => {\n      if (controlledTags === undefined) setUncontrolledTags(nextTags);\n      onTagsChange?.(nextTags);\n    },\n    [controlledTags, onTagsChange],\n  );\n\n  const clearInput = useCallback(\n    (event?: ChangeEvent<HTMLInputElement>) => {\n      if (controlledInputValue === undefined) setUncontrolledInputValue(\"\");\n      onInputValueChange?.(\"\");\n      if (event) onChange?.(changedEvent(event, \"\"));\n    },\n    [controlledInputValue, onChange, onInputValueChange],\n  );\n\n  const addTag = useCallback(\n    (rawTag: string, event?: ChangeEvent<HTMLInputElement>) => {\n      const tag = rawTag.trim();\n      if (tag && !selectedTags.includes(tag) && data.includes(tag)) {\n        updateTags([...selectedTags, tag]);\n      }\n      clearInput(event);\n    },\n    [clearInput, data, selectedTags, updateTags],\n  );\n\n  const suggestions = useMemo(() => {\n    const query = inputValue.trim().toLocaleLowerCase();\n    return data.filter(\n      (item) =>\n        !selectedTags.includes(item) &&\n        (query.length === 0 || item.toLocaleLowerCase().includes(query)),\n    );\n  }, [data, inputValue, selectedTags]);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const nextValue = event.currentTarget.value;\n    if (nextValue.trim() === \"\") {\n      clearInput(event);\n      onChange?.(event);\n      return;\n    }\n\n    if (nextValue.endsWith(\",\")) {\n      addTag(nextValue.slice(0, -1), event);\n      return;\n    }\n\n    if (controlledInputValue === undefined) setUncontrolledInputValue(nextValue);\n    onInputValueChange?.(nextValue);\n    onChange?.(event);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    setFocused(false);\n    onBlur?.(event);\n  }\n\n  function removeTag(index: number) {\n    updateTags(selectedTags.filter((_, currentIndex) => currentIndex !== index));\n  }\n\n  return (\n    <div\n      className={styles.root}\n      data-jaci-component=\"tags-input\"\n      data-slot=\"tags-input\"\n      ref={rootRef}\n    >\n      {label ? (\n        <label className={styles.label} data-slot=\"tags-input-label\" htmlFor={id}>\n          {label}\n        </label>\n      ) : null}\n      <div\n        className={cx(styles.control, className)}\n        data-disabled={disabled || undefined}\n        data-focus={focused || undefined}\n        data-slot=\"tags-input-control\"\n      >\n        <div className={styles.tagList} data-slot=\"tags-input-tag-list\">\n          {selectedTags.map((tag, index) => (\n            <span className={styles.tag} data-slot=\"tags-input-tag\" key={tag}>\n              <span className={styles.tagLabel} data-slot=\"tags-input-tag-label\">\n                {tag}\n              </span>\n              <button\n                aria-label={`Remove ${tag}`}\n                className={styles.tagRemove}\n                data-slot=\"tags-input-tag-remove\"\n                disabled={disabled}\n                onClick={() => removeTag(index)}\n                type=\"button\"\n              >\n                ×\n              </button>\n            </span>\n          ))}\n        </div>\n        <input\n          {...props}\n          {...(ariaDescribedBy ? { \"aria-describedby\": ariaDescribedBy } : {})}\n          {...(ariaInvalid !== undefined ? { \"aria-invalid\": ariaInvalid } : {})}\n          {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n          autoComplete=\"off\"\n          className={styles.input}\n          disabled={disabled}\n          id={id}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={(event) => {\n            setFocused(true);\n            onFocus?.(event);\n          }}\n          placeholder={placeholder}\n          ref={ref}\n          type=\"text\"\n          value={inputValue}\n        />\n      </div>\n      {focused && data.length > 0 ? (\n        <div className={styles.positioner} data-slot=\"tags-input-positioner\">\n          <div\n            aria-label=\"Suggestions\"\n            className={styles.list}\n            data-slot=\"tags-input-list\"\n            role=\"listbox\"\n          >\n            {suggestions.length > 0 ? (\n              suggestions.map((item) => (\n                <button\n                  aria-selected={false}\n                  className={styles.item}\n                  data-slot=\"tags-input-item\"\n                  key={item}\n                  onClick={() => addTag(item)}\n                  onMouseDown={(event: MouseEvent<HTMLButtonElement>) => event.preventDefault()}\n                  role=\"option\"\n                  type=\"button\"\n                >\n                  {item}\n                </button>\n              ))\n            ) : (\n              <div className={styles.empty} data-slot=\"tags-input-empty\">\n                No options\n              </div>\n            )}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":";;;;;;AAwCA,SAAS,aAAa,OAAsC,OAAe;CACzE,MAAM,SAAS,MAAM;CACrB,MAAM,aAAa;EACjB,SAAS,OAAO;EAChB,IAAI,OAAO;EACX,MAAM,OAAO;EACb;CACF;CAEA,OAAO;EACL,GAAG;EACH,eAAe;EACf,QAAQ;CACV;AACF;AAEA,MAAa,YAAY,WAA6C,SAAS,UAC7E,EACE,oBAAoB,iBACpB,gBAAgB,aAChB,cAAc,WACd,WACA,OAAO,CAAC,GACR,cAAc,CAAC,GACf,eAAe,IACf,WAAW,OACX,IAAI,YACJ,OACA,QACA,UACA,SACA,oBACA,cACA,aACA,MAAM,gBACN,OAAO,sBACP,GAAG,SAEL,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,cAAc;CACzB,MAAM,CAAC,kBAAkB,uBAAuB,eAAyB,CAAC,GAAG,WAAW,CAAC;CACzF,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,YAAY;CACjF,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,SAAS,UAAU;CACzB,MAAM,eAAe,mBAAmB,KAAA,IAAY,mBAAmB,CAAC,GAAG,cAAc;CACzF,MAAM,aACJ,yBAAyB,KAAA,IAAY,yBAAyB;CAEhE,MAAM,aAAa,aAChB,aAAuB;EACtB,IAAI,mBAAmB,KAAA,GAAW,oBAAoB,QAAQ;EAC9D,eAAe,QAAQ;CACzB,GACA,CAAC,gBAAgB,YAAY,CAC/B;CAEA,MAAM,aAAa,aAChB,UAA0C;EACzC,IAAI,yBAAyB,KAAA,GAAW,0BAA0B,EAAE;EACpE,qBAAqB,EAAE;EACvB,IAAI,OAAO,WAAW,aAAa,OAAO,EAAE,CAAC;CAC/C,GACA;EAAC;EAAsB;EAAU;CAAkB,CACrD;CAEA,MAAM,SAAS,aACZ,QAAgB,UAA0C;EACzD,MAAM,MAAM,OAAO,KAAK;EACxB,IAAI,OAAO,CAAC,aAAa,SAAS,GAAG,KAAK,KAAK,SAAS,GAAG,GACzD,WAAW,CAAC,GAAG,cAAc,GAAG,CAAC;EAEnC,WAAW,KAAK;CAClB,GACA;EAAC;EAAY;EAAM;EAAc;CAAU,CAC7C;CAEA,MAAM,cAAc,cAAc;EAChC,MAAM,QAAQ,WAAW,KAAK,CAAC,CAAC,kBAAkB;EAClD,OAAO,KAAK,QACT,SACC,CAAC,aAAa,SAAS,IAAI,MAC1B,MAAM,WAAW,KAAK,KAAK,kBAAkB,CAAC,CAAC,SAAS,KAAK,EAClE;CACF,GAAG;EAAC;EAAM;EAAY;CAAY,CAAC;CAEnC,SAAS,aAAa,OAAsC;EAC1D,MAAM,YAAY,MAAM,cAAc;EACtC,IAAI,UAAU,KAAK,MAAM,IAAI;GAC3B,WAAW,KAAK;GAChB,WAAW,KAAK;GAChB;EACF;EAEA,IAAI,UAAU,SAAS,GAAG,GAAG;GAC3B,OAAO,UAAU,MAAM,GAAG,EAAE,GAAG,KAAK;GACpC;EACF;EAEA,IAAI,yBAAyB,KAAA,GAAW,0BAA0B,SAAS;EAC3E,qBAAqB,SAAS;EAC9B,WAAW,KAAK;CAClB;CAEA,SAAS,WAAW,OAAqC;EACvD,WAAW,KAAK;EAChB,SAAS,KAAK;CAChB;CAEA,SAAS,UAAU,OAAe;EAChC,WAAW,aAAa,QAAQ,GAAG,iBAAiB,iBAAiB,KAAK,CAAC;CAC7E;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,OAAO;EAClB,uBAAoB;EACpB,aAAU;EACV,KAAK;YAJP;GAMG,QACC,oBAAC,SAAD;IAAO,WAAW,OAAO;IAAO,aAAU;IAAmB,SAAS;cACnE;GACI,CAAA,IACL;GACJ,qBAAC,OAAD;IACE,WAAW,GAAG,OAAO,SAAS,SAAS;IACvC,iBAAe,YAAY,KAAA;IAC3B,cAAY,WAAW,KAAA;IACvB,aAAU;cAJZ,CAME,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAS,aAAU;eACvC,aAAa,KAAK,KAAK,UACtB,qBAAC,QAAD;MAAM,WAAW,OAAO;MAAK,aAAU;gBAAvC,CACE,oBAAC,QAAD;OAAM,WAAW,OAAO;OAAU,aAAU;iBACzC;MACG,CAAA,GACN,oBAAC,UAAD;OACE,cAAY,UAAU;OACtB,WAAW,OAAO;OAClB,aAAU;OACA;OACV,eAAe,UAAU,KAAK;OAC9B,MAAK;iBACN;MAEO,CAAA,CACJ;QAduD,GAcvD,CACP;IACE,CAAA,GACL,oBAAC,SAAD;KACE,GAAI;KACJ,GAAK,kBAAkB,EAAE,oBAAoB,gBAAgB,IAAI,CAAC;KAClE,GAAK,gBAAgB,KAAA,IAAY,EAAE,gBAAgB,YAAY,IAAI,CAAC;KACpE,GAAK,YAAY,EAAE,cAAc,UAAU,IAAI,CAAC;KAChD,cAAa;KACb,WAAW,OAAO;KACR;KACN;KACJ,QAAQ;KACR,UAAU;KACV,UAAU,UAAU;MAClB,WAAW,IAAI;MACf,UAAU,KAAK;KACjB;KACa;KACR;KACL,MAAK;KACL,OAAO;IACR,CAAA,CACE;;GACJ,WAAW,KAAK,SAAS,IACxB,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAY,aAAU;cAC3C,oBAAC,OAAD;KACE,cAAW;KACX,WAAW,OAAO;KAClB,aAAU;KACV,MAAK;eAEJ,YAAY,SAAS,IACpB,YAAY,KAAK,SACf,oBAAC,UAAD;MACE,iBAAe;MACf,WAAW,OAAO;MAClB,aAAU;MAEV,eAAe,OAAO,IAAI;MAC1B,cAAc,UAAyC,MAAM,eAAe;MAC5E,MAAK;MACL,MAAK;gBAEJ;KACK,GAPD,IAOC,CACT,IAED,oBAAC,OAAD;MAAK,WAAW,OAAO;MAAO,aAAU;gBAAmB;KAEtD,CAAA;IAEJ,CAAA;GACF,CAAA,IACH;EACD;;AAET,CAAC"}
+{"version":3,"file":"tags-input.js","names":[],"sources":["../../../src/components/tags-input/tags-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ClipboardEvent,\n  ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { tagsInput } from \"../../styled-system/recipes\";\n\nexport interface TagsInputProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"children\" | \"defaultValue\" | \"onChange\" | \"type\" | \"value\"\n  > {\n  /** Current tags. Omit this prop to use the uncontrolled API. */\n  tags?: readonly string[];\n  /** Initial tags for the uncontrolled API. */\n  defaultTags?: readonly string[];\n  /** Called whenever a tag is added or removed. */\n  onTagsChange?: (tags: string[]) => void;\n  /** Optional suggestions. A tag is accepted after a comma only when it is in this list. */\n  data?: readonly string[];\n  /** Visible label for the input. */\n  label?: ReactNode;\n  /** Current text query. This is the native input value, not the selected tags. */\n  value?: string;\n  /** Initial text query for an uncontrolled input. */\n  defaultValue?: string;\n  /** Native input change callback. */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /** Optional callback useful when a controlled query is cleared by selecting a tag. */\n  onInputValueChange?: (value: string) => void;\n  allowDuplicates?: boolean;\n  delimiter?: string | RegExp;\n  editable?: boolean;\n}\n\nfunction changedEvent(event: ChangeEvent<HTMLInputElement>, value: string) {\n  const target = event.target;\n  const nextTarget = {\n    checked: target.checked,\n    id: target.id,\n    name: target.name,\n    value,\n  } as HTMLInputElement;\n\n  return {\n    ...event,\n    currentTarget: nextTarget,\n    target: nextTarget,\n  } as ChangeEvent<HTMLInputElement>;\n}\n\nfunction tagKey(tag: string, index: number) {\n  return `${tag}-${index}`;\n}\n\nfunction hasDelimiter(value: string, delimiter: string | RegExp) {\n  if (typeof delimiter === \"string\") return delimiter.length > 0 && value.includes(delimiter);\n  delimiter.lastIndex = 0;\n  const result = delimiter.test(value);\n  delimiter.lastIndex = 0;\n  return result;\n}\n\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-label\": ariaLabel,\n    allowDuplicates = false,\n    className,\n    data = [],\n    defaultTags = [],\n    defaultValue = \"\",\n    disabled = false,\n    delimiter = /[,\\n]/u,\n    editable = false,\n    id: providedId,\n    label,\n    onBlur,\n    onChange,\n    onFocus,\n    onInputValueChange,\n    onTagsChange,\n    placeholder,\n    tags: controlledTags,\n    value: controlledInputValue,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = providedId ?? generatedId;\n  const [uncontrolledTags, setUncontrolledTags] = useState<string[]>(() => [...defaultTags]);\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState(defaultValue);\n  const [focused, setFocused] = useState(false);\n  const [composing, setComposing] = useState(false);\n  const [editingTag, setEditingTag] = useState<{ index: number; value: string } | null>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const styles = tagsInput();\n  const selectedTags = controlledTags === undefined ? uncontrolledTags : [...controlledTags];\n  const inputValue =\n    controlledInputValue === undefined ? uncontrolledInputValue : controlledInputValue;\n\n  const updateTags = useCallback(\n    (nextTags: string[]) => {\n      if (controlledTags === undefined) setUncontrolledTags(nextTags);\n      onTagsChange?.(nextTags);\n    },\n    [controlledTags, onTagsChange],\n  );\n\n  const clearInput = useCallback(\n    (event?: ChangeEvent<HTMLInputElement>) => {\n      if (controlledInputValue === undefined) setUncontrolledInputValue(\"\");\n      onInputValueChange?.(\"\");\n      if (event) onChange?.(changedEvent(event, \"\"));\n    },\n    [controlledInputValue, onChange, onInputValueChange],\n  );\n\n  const addTag = useCallback(\n    (rawTag: string, event?: ChangeEvent<HTMLInputElement>) => {\n      const tag = rawTag.trim();\n      const isAllowed = data.length === 0 || data.includes(tag);\n      const duplicate = selectedTags.includes(tag);\n      if (tag && isAllowed && (allowDuplicates || !duplicate)) {\n        if (editingTag) {\n          updateTags([\n            ...selectedTags.slice(0, editingTag.index),\n            tag,\n            ...selectedTags.slice(editingTag.index),\n          ]);\n          setEditingTag(null);\n        } else {\n          updateTags([...selectedTags, tag]);\n        }\n      } else if (editingTag) {\n        return;\n      }\n      clearInput(event);\n    },\n    [allowDuplicates, clearInput, data, editingTag, selectedTags, updateTags],\n  );\n\n  const addDelimited = useCallback(\n    (rawValue: string, event?: ChangeEvent<HTMLInputElement>) => {\n      const separator =\n        typeof delimiter === \"string\" && delimiter.length === 0 ? /\\r?\\n/u : delimiter;\n      const values = rawValue\n        .split(separator)\n        .map((value) => value.trim())\n        .filter(Boolean);\n      const nextTags = [...selectedTags];\n      for (const value of values) {\n        const isAllowed = data.length === 0 || data.includes(value);\n        if (isAllowed && (allowDuplicates || !nextTags.includes(value))) nextTags.push(value);\n      }\n      if (nextTags.length !== selectedTags.length) updateTags(nextTags);\n      clearInput(event);\n    },\n    [allowDuplicates, clearInput, data, delimiter, selectedTags, updateTags],\n  );\n\n  const suggestions = useMemo(() => {\n    const query = inputValue.trim().toLocaleLowerCase();\n    return data.filter(\n      (item) =>\n        !selectedTags.includes(item) &&\n        (query.length === 0 || item.toLocaleLowerCase().includes(query)),\n    );\n  }, [data, inputValue, selectedTags]);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const nextValue = event.currentTarget.value;\n    if (nextValue.trim() === \"\") {\n      clearInput(event);\n      onChange?.(event);\n      return;\n    }\n\n    if (!composing && hasDelimiter(nextValue, delimiter)) {\n      addDelimited(nextValue, event);\n      return;\n    }\n\n    if (controlledInputValue === undefined) setUncontrolledInputValue(nextValue);\n    onInputValueChange?.(nextValue);\n    onChange?.(event);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    setFocused(false);\n    onBlur?.(event);\n  }\n\n  function handlePaste(event: ClipboardEvent<HTMLInputElement>) {\n    const pasted = event.clipboardData.getData(\"text\");\n    if (!pasted || (!hasDelimiter(pasted, delimiter) && !pasted.includes(\"\\n\"))) return;\n    event.preventDefault();\n    addDelimited(pasted);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    if (event.nativeEvent.isComposing || composing) return;\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      if (inputValue.trim()) addTag(inputValue);\n      else if (editingTag) setEditingTag(null);\n    } else if (event.key === \"Escape\" && editingTag) {\n      event.preventDefault();\n      updateTags([\n        ...selectedTags.slice(0, editingTag.index),\n        editingTag.value,\n        ...selectedTags.slice(editingTag.index),\n      ]);\n      clearInput();\n      setEditingTag(null);\n    } else if (event.key === \"Backspace\" && !inputValue && editable && selectedTags.length > 0) {\n      const index = selectedTags.length - 1;\n      const tag = selectedTags[index];\n      if (tag === undefined) return;\n      setEditingTag({ index, value: tag });\n      updateTags(selectedTags.slice(0, -1));\n      if (controlledInputValue === undefined) setUncontrolledInputValue(tag);\n      onInputValueChange?.(tag);\n    }\n    props.onKeyDown?.(event);\n  }\n\n  function removeTag(index: number) {\n    updateTags(selectedTags.filter((_, currentIndex) => currentIndex !== index));\n  }\n\n  return (\n    <div\n      className={styles.root}\n      data-jaci-component=\"tags-input\"\n      data-slot=\"tags-input\"\n      ref={rootRef}\n    >\n      {label ? (\n        <label className={styles.label} data-slot=\"tags-input-label\" htmlFor={id}>\n          {label}\n        </label>\n      ) : null}\n      <div\n        className={cx(styles.control, className)}\n        data-disabled={disabled || undefined}\n        data-focus={focused || undefined}\n        data-slot=\"tags-input-control\"\n      >\n        <div className={styles.tagList} data-slot=\"tags-input-tag-list\">\n          {selectedTags.map((tag, index) => (\n            <span className={styles.tag} data-slot=\"tags-input-tag\" key={tagKey(tag, index)}>\n              <span className={styles.tagLabel} data-slot=\"tags-input-tag-label\">\n                {tag}\n              </span>\n              <button\n                aria-label={`Remove ${tag}`}\n                className={styles.tagRemove}\n                data-slot=\"tags-input-tag-remove\"\n                disabled={disabled}\n                onClick={() => removeTag(index)}\n                type=\"button\"\n              >\n                ×\n              </button>\n            </span>\n          ))}\n        </div>\n        <input\n          {...props}\n          {...(ariaDescribedBy ? { \"aria-describedby\": ariaDescribedBy } : {})}\n          {...(ariaInvalid !== undefined ? { \"aria-invalid\": ariaInvalid } : {})}\n          {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n          autoComplete=\"off\"\n          className={styles.input}\n          disabled={disabled}\n          id={id}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onCompositionEnd={() => setComposing(false)}\n          onCompositionStart={() => setComposing(true)}\n          onFocus={(event) => {\n            setFocused(true);\n            onFocus?.(event);\n          }}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n          placeholder={placeholder}\n          ref={ref}\n          type=\"text\"\n          value={inputValue}\n        />\n      </div>\n      {focused && data.length > 0 ? (\n        <div className={styles.positioner} data-slot=\"tags-input-positioner\">\n          <div\n            aria-label=\"Suggestions\"\n            className={styles.list}\n            data-slot=\"tags-input-list\"\n            role=\"listbox\"\n          >\n            {suggestions.length > 0 ? (\n              suggestions.map((item) => (\n                <button\n                  aria-selected={false}\n                  className={styles.item}\n                  data-slot=\"tags-input-item\"\n                  key={item}\n                  onClick={() => addTag(item)}\n                  onMouseDown={(event: MouseEvent<HTMLButtonElement>) => event.preventDefault()}\n                  role=\"option\"\n                  type=\"button\"\n                >\n                  {item}\n                </button>\n              ))\n            ) : (\n              <div className={styles.empty} data-slot=\"tags-input-empty\">\n                No options\n              </div>\n            )}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}