@plexui/ui 0.2.0

package/dist/es/components/Slider/Slider.module.css

@@ -0,0 +1,170 @@
+@layer components {
+  @media (hover: hover) and (pointer: fine) {
+    .SliderWrap:hover .Reset[data-hide="false"] {
+      cursor: pointer;
+      opacity: 1;
+      transition:
+        visibility 0ms,
+        opacity 250ms ease;
+      visibility: visible;
+    }
+  }.Slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-bottom: 6px;
+  touch-action: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+  /* Dirty reach for radix internal to support animated changes */
+  .Slider span:nth-child(2) {
+    transition: left var(--slider-duration) var(--cubic-move);
+  }.Track {
+  position: relative;
+  flex-grow: 1;
+  width: 100%;
+  height: 4px;
+  border-radius: var(--radius-2xs);
+  background: var(--slider-track-color);
+}.Range {
+  position: absolute;
+  height: 100%;
+  border-radius: var(--radius-2xs);
+  background: var(--slider-range-color);
+  transition: right var(--slider-duration) var(--cubic-move);
+}.Thumb {
+  position: relative;
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--gray-0);
+  box-shadow: inset 0 0 0 2px var(--slider-range-color);
+  cursor: grab;
+  outline: none;
+}
+
+  .Thumb:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--green-600);
+    outline: none;
+  }
+
+  .Thumb:focus {
+    box-shadow: inset 0 0 0 2px var(--slider-range-color);
+  }
+
+  .Thumb:active {
+    cursor: grabbing;
+  }
+
+  .Thumb:disabled {
+    pointer-events: none;
+  }.SliderLabel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  margin-bottom: 8px;
+  color: var(--color-text);
+  font-size: 14px;
+}.Reset {
+  /* Ensures cursor switches back immediately after clicking reset button. */
+  cursor: default;
+  opacity: 0;
+  transition:
+    visibility 0ms ease 250ms,
+    opacity 250ms ease;
+  visibility: hidden;
+}
+
+  /* Custom overrides outside the design system. Using the data attribute to win the specificity war. */
+  .Reset[data-size="2xs"] {
+    width: 22px;
+    height: 22px;
+  }
+
+    .Reset[data-size="2xs"] svg {
+      width: 14px;
+      height: 14px;
+    }.SliderValue {
+  overflow: hidden;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 2px;
+  height: 26px;
+  padding: 0 4px;
+  border: 0.5px solid transparent;
+  border-radius: var(--radius-sm);
+  margin-right: -4px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  cursor: text;
+  outline: none;
+  text-align: center;
+  transition: border-color 250ms ease;
+}
+
+  @media (min-width: 768px) {
+    .SliderValue {
+    height: 22px;
+    }
+  }
+
+  .SliderWrap:hover .SliderValue:not(:focus-within) {
+    border-color: var(--gray-200);
+  }
+
+  .SliderValue:focus-within {
+    border-color: var(--gray-500);
+  }.ValueInput {
+  height: 100%;
+  padding: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 16px;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+  text-align: left;
+  transition: width 100ms ease;
+}
+
+  @media (min-width: 768px) {
+    .ValueInput {
+    font-size: 13px;
+    }
+  }.ValueUnit {
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}.SliderContainer {
+  position: relative;
+  width: 100%;
+}.MarksContainer {
+  position: relative;
+  width: 100%;
+  margin-top: 4px;
+}.Mark {
+  position: absolute;
+  color: var(--color-text);
+  font-size: 12px;
+  font-weight: normal;
+}.MarkLabel {
+  display: inline-block;
+  overflow-wrap: break-word;
+  text-align: center;
+  word-wrap: break-word;
+}
+}

package/dist/es/components/Slider/index.js

@@ -0,0 +1,2 @@
+export { Slider } from "./Slider";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA","sourcesContent":["export { Slider } from \"./Slider\"\nexport type { SliderMark, SliderProps } from \"./Slider\"\n"]}

package/dist/es/components/Switch/Switch.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Switch as RadixSwitch } from "radix-ui";
+import { useId } from "react";
+import s from "./Switch.module.css";
+export const Switch = ({ className, label, id: propsId, disabled, labelPosition = "end", ...restProps }) => {
+    const reactId = useId();
+    const id = propsId ?? reactId;
+    return (_jsxs("div", { className: clsx(s.Container, className), "data-disabled": disabled ? "" : undefined, "data-has-label": label ? "" : undefined, "data-label-position": labelPosition, children: [_jsx(RadixSwitch.Root, { id: id, className: s.Track, disabled: disabled, ...restProps, children: _jsx(RadixSwitch.Thumb, { className: s.Thumb }) }), label && (_jsx("label", { htmlFor: id, className: s.Label, children: label }))] }));
+};
+//# sourceMappingURL=Switch.js.map

package/dist/es/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAA0C,KAAK,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,CAAC,MAAM,qBAAqB,CAAA;AAkCnC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,KAAK,EACL,EAAE,EAAE,OAAO,EACX,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,GAAG,SAAS,EACA,EAAE,EAAE;IAChB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,OAAO,IAAI,OAAO,CAAA;IAE7B,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,mBACxB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,oBACxB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,yBACjB,aAAa,aAElC,KAAC,WAAW,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,KAAM,SAAS,YAC7E,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAE,CAAC,CAAC,KAAK,GAAI,GACxB,EAElB,KAAK,IAAI,CACR,gBAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,YACnC,KAAK,GACA,CACT,IACG,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Switch as RadixSwitch } from \"radix-ui\"\nimport { type FocusEventHandler, type ReactNode, useId } from \"react\"\nimport s from \"./Switch.module.css\"\n\nexport type SwitchProps = {\n  /** The `id` of the switch. */\n  id?: string\n  /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */\n  defaultChecked?: boolean\n  /** The controlled state of the switch. Must be used in conjunction with `onCheckedChange`. */\n  checked?: boolean\n  /** Optional accessible label rendered to the right of the checkbox. */\n  label?: ReactNode\n  /** Event handler called when the state of the switch changes. */\n  onCheckedChange?: (nextState: boolean) => void\n  /** Event handler called when the checkbox looses focus. */\n  onBlur?: FocusEventHandler<HTMLButtonElement>\n  /** Event handler called when the checkbox gains focus. */\n  onFocus?: FocusEventHandler<HTMLButtonElement>\n  /** When `true`, prevents the user from interacting with the switch. */\n  disabled?: boolean\n  /** When `true`, indicates that the user must check the switch before the owning form can be submitted. */\n  required?: boolean\n  /** The name of the switch. Submitted with its owning form as part of a name/value pair. */\n  name?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: string\n  /** CSS classes applied to wrapper node */\n  className?: string\n  /**\n   * The position of the label relative to the switch.\n   * @default end\n   */\n  labelPosition?: \"start\" | \"end\"\n}\n\nexport const Switch = ({\n  className,\n  label,\n  id: propsId,\n  disabled,\n  labelPosition = \"end\",\n  ...restProps\n}: SwitchProps) => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  return (\n    <div\n      className={clsx(s.Container, className)}\n      data-disabled={disabled ? \"\" : undefined}\n      data-has-label={label ? \"\" : undefined}\n      data-label-position={labelPosition}\n    >\n      <RadixSwitch.Root id={id} className={s.Track} disabled={disabled} {...restProps}>\n        <RadixSwitch.Thumb className={s.Thumb} />\n      </RadixSwitch.Root>\n\n      {label && (\n        <label htmlFor={id} className={s.Label}>\n          {label}\n        </label>\n      )}\n    </div>\n  )\n}\n"]}

package/dist/es/components/Switch/Switch.module.css

@@ -0,0 +1,94 @@
+@layer components {.Container {
+  display: flex;
+  font-size: var(--font-text-sm-size);
+  line-height: var(--font-text-sm-line-height);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+  .Container[data-has-label] {
+    align-items: flex-start;
+  }
+
+  .Container[data-label-position="start"] {
+    flex-direction: row-reverse;
+  }.Track {
+  position: relative;
+  flex-shrink: 0;
+  width: var(--switch-track-width);
+  max-width: var(--switch-track-width);
+  height: var(--switch-track-height);
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--switch-track-color);
+  cursor: pointer;
+  transition: background-color 250ms var(--cubic-move);
+}
+    @media (hover: hover) and (pointer: fine) {.Track:where(:not([data-disabled], [data-state="checked"])):hover {
+      background: var(--switch-track-color-hover);
+}
+}
+
+  [data-has-label] .Track {
+    /*
+     * Vertical alignment adjusting when necessary. Avoid using align-items: center; for long wrapping labels.
+     */
+    top: var(--switch-track-top-offset, 1px);
+  }
+
+  .Track:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  .Track[data-state="checked"] {
+    background: var(--switch-track-color-checked);
+  }
+
+  .Track[data-disabled] {
+    background: var(--switch-track-color-disabled);
+    cursor: not-allowed;
+  }
+
+    .Track[data-disabled][data-state="checked"] {
+      background: var(--switch-track-color-checked-disabled);
+    }.Thumb {
+  position: absolute;
+  top: var(--switch-thumb-offset);
+  left: var(--switch-thumb-offset);
+  display: block;
+  width: var(--switch-thumb-size);
+  height: var(--switch-thumb-size);
+  border-radius: var(--radius-full);
+  background: var(--switch-thumb-color);
+  box-shadow: var(--switch-thumb-shadow);
+  transition: transform 250ms var(--cubic-move);
+}
+
+  [data-state="checked"] .Thumb {
+    transform: translateX(
+      calc(var(--switch-track-width) - var(--switch-thumb-size) - var(--switch-thumb-offset) * 2)
+    );
+  }
+
+  .Thumb[data-disabled] {
+    background: var(--switch-thumb-color-disabled);
+    box-shadow: none;
+  }.Label {
+  cursor: pointer;
+}
+
+  /* Use padding so that the spacing is intrinsic to the label, remaining clickable. */
+  [data-label-position="end"] .Label {
+    padding-left: var(--switch-label-gap);
+  }
+
+  [data-label-position="start"] .Label {
+    padding-right: var(--switch-label-gap);
+  }
+
+  [data-disabled] .Label {
+    cursor: not-allowed;
+  }
+}

package/dist/es/components/Switch/index.js

@@ -0,0 +1,2 @@
+export { Switch } from "./Switch";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA","sourcesContent":["export { Switch, type SwitchProps } from \"./Switch\"\n"]}

package/dist/es/components/TagInput/TagInput.js

@@ -0,0 +1,286 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useOnClickOutside } from "usehooks-ts";
+import { useLatestValue } from "../../hooks/useLatestValue";
+import { toCssVariables } from "../../lib/helpers";
+import { X } from "../Icon";
+import s from "./TagInput.module.css";
+// How many pixels to reserve on the right of the input as a buffer before wrapping to the next line
+const INPUT_CURSOR_TOLERANCE_PX = 10;
+// The total space reserved on either side of the input for padding
+const CONTAINER_PADDING_PX = 24;
+const SHAKE_ANIMATION_DURATION_MS = 500;
+export const TagInput = (props) => {
+    const { defaultValue: defaultValueProp = [], value: controlledValue, size = "xl", onChange, validator, maxTags, placeholder = "", autoFocus = false, rows = 1, delimiters = [",", " "], disabled, id, } = props;
+    const [internalTags, setInternalTags] = useState(defaultValueProp);
+    const value = controlledValue ?? internalTags;
+    const isControlled = controlledValue !== undefined;
+    const tags = useMemo(() => new Map(value.map((tag) => [tag.value, tag])), [value]);
+    const [currentInput, setCurrentInput] = useState("");
+    const [focused, setFocused] = useState(autoFocus);
+    const [selectedTag, setSelectedTag] = useState(null);
+    const [duplicateTags, setDuplicateTags] = useState(new Set());
+    const [inputWidth, setInputWidth] = useState(0);
+    const validatorLatest = useLatestValue(validator);
+    const onChangeLatest = useLatestValue(onChange);
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const measureRef = useRef(null);
+    const showInput = !maxTags || tags.size < maxTags;
+    // Handle focusing the correct part of the tag input
+    useEffect(() => {
+        if (!focused || !containerRef.current) {
+            return;
+        }
+        const defaultFocusEl = inputRef.current ?? containerRef.current;
+        if (selectedTag === null) {
+            defaultFocusEl.focus();
+        }
+        else {
+            const selectedTagElement = containerRef.current.querySelector(`[data-tag="${selectedTag}"]`);
+            if (selectedTagElement) {
+                selectedTagElement.focus();
+            }
+            else {
+                defaultFocusEl.focus();
+            }
+        }
+    }, [focused, selectedTag, showInput]); // Include showInput so we focus the container when we hide the input
+    const placeholderText = tags.size === 0 ? placeholder : undefined;
+    // Handle positioning the real input inside of the container
+    // Use useLayoutEffect to avoid flashing during width calculation
+    useLayoutEffect(() => {
+        if (containerRef.current && measureRef.current) {
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const tagElements = Array.from(containerRef.current.querySelectorAll("[data-tag]"));
+            // Grab the right edge of the last tag if it exists, otherwise the left edge of the container
+            const leftBound = tagElements.length > 0
+                ? tagElements[tagElements.length - 1].getBoundingClientRect().right
+                : containerRect.left;
+            measureRef.current.textContent = currentInput || placeholderText || "";
+            // By padding the text width, we ensure the input wraps to the next line
+            // before we get to the point where we start to overflow
+            const textWidth = measureRef.current.getBoundingClientRect().width + INPUT_CURSOR_TOLERANCE_PX;
+            // Calculate the remaining space based on the last tag's right edge (or container's left if no tags)
+            const remainingSpace = containerRect.right - leftBound - CONTAINER_PADDING_PX;
+            if (textWidth <= remainingSpace) {
+                setInputWidth(remainingSpace);
+            }
+            else {
+                // We are going to flow to a new line, so recalculate remaining space based on the container size
+                const width = containerRect.right - containerRect.left - CONTAINER_PADDING_PX;
+                setInputWidth(width);
+            }
+        }
+    }, [currentInput, placeholderText, tags]); // Include tags so we reflow the container when we delete a tag
+    // ============================================
+    // Tag lifecycle functions
+    // ============================================
+    const addTag = (tagValue) => {
+        const trimmed = tagValue.trim();
+        if (!trimmed) {
+            return;
+        }
+        if (tags.has(trimmed)) {
+            setDuplicateTags((prevTags) => new Set(prevTags).add(trimmed));
+            setTimeout(() => setDuplicateTags((prevTags) => {
+                const newTags = new Set(prevTags);
+                newTags.delete(trimmed);
+                return newTags;
+            }), SHAKE_ANIMATION_DURATION_MS);
+            return;
+        }
+        const validTag = validatorLatest.current?.(trimmed) ?? true;
+        const newSet = new Map(tags);
+        newSet.set(trimmed, { value: trimmed, valid: validTag });
+        const newTags = Array.from(newSet.values());
+        onChangeLatest.current?.(newTags);
+        if (!isControlled) {
+            setInternalTags(newTags);
+        }
+    };
+    const removeTag = (tag) => {
+        const newSet = new Map(tags);
+        newSet.delete(tag);
+        const newTags = Array.from(newSet.values());
+        onChangeLatest.current?.(newTags);
+        if (!isControlled) {
+            setInternalTags(newTags);
+        }
+        if (selectedTag === tag) {
+            setSelectedTag(null);
+        }
+    };
+    const selectPreviousTag = () => {
+        if (tags.size === 0) {
+            return;
+        }
+        const tagList = Array.from(tags.keys());
+        if (selectedTag === null) {
+            setSelectedTag(tagList[tagList.length - 1]);
+        }
+        else {
+            const prevIndex = tagList.indexOf(selectedTag);
+            const index = Math.max(0, prevIndex - 1);
+            setSelectedTag(tagList[index]);
+        }
+    };
+    const selectNextTag = () => {
+        if (selectedTag === null) {
+            return;
+        }
+        const tagList = Array.from(tags.keys());
+        const prevIndex = tagList.indexOf(selectedTag);
+        const index = prevIndex + 1;
+        if (index < tagList.length) {
+            setSelectedTag(tagList[index]);
+        }
+        else {
+            setSelectedTag(null);
+        }
+    };
+    // ============================================
+    // Helper functions
+    // ============================================
+    const isEmptyStartingSelection = () => {
+        const input = inputRef.current;
+        if (!input) {
+            return true;
+        }
+        return input.selectionStart === 0 && input.selectionEnd === 0;
+    };
+    const handleContainerBlur = () => {
+        setFocused(false);
+        setSelectedTag(null);
+        if (currentInput) {
+            addTag(currentInput);
+            setCurrentInput("");
+        }
+    };
+    // ============================================
+    // Event handlers
+    // ============================================
+    const handleContainerKeyDown = (e) => {
+        if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            if (isEmptyStartingSelection()) {
+                e.preventDefault();
+                selectPreviousTag();
+            }
+        }
+        else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            if (selectedTag !== null) {
+                e.preventDefault();
+                selectNextTag();
+            }
+        }
+        else if (e.key === "Backspace") {
+            if (selectedTag !== null) {
+                removeTag(selectedTag);
+            }
+            else if (isEmptyStartingSelection()) {
+                selectPreviousTag();
+            }
+        }
+    };
+    const handleInputKeyDown = (e) => {
+        if (e.key === "Enter" || delimiters.includes(e.key)) {
+            e.preventDefault();
+            if (currentInput) {
+                addTag(currentInput);
+                setCurrentInput("");
+            }
+        }
+        else if (e.key === "Tab") {
+            if (currentInput) {
+                e.preventDefault();
+                addTag(currentInput);
+                setCurrentInput("");
+            }
+        }
+    };
+    const handlePaste = (e) => {
+        const text = e.clipboardData.getData("Text");
+        let parts = [text];
+        // Split by all delimiters
+        for (const delimiter of delimiters) {
+            const newParts = [];
+            for (const segment of parts) {
+                newParts.push(...segment.split(delimiter));
+            }
+            parts = newParts;
+        }
+        // Remove empty parts
+        parts = parts.filter(Boolean);
+        if (parts.length > 1) {
+            e.preventDefault();
+            parts.forEach((part) => addTag(part));
+        }
+    };
+    const handleContainerMouseDown = (e) => {
+        // All clicks in the container focus the container
+        setFocused(true);
+        // If the click is on a tag pill, we are done. The click handler
+        // for the specific tag will handle focusing it
+        if (e.target && e.target instanceof Element && e.target.closest("[data-tag]")) {
+            return;
+        }
+        // Since we know we didn't click a tag, clear any selected tag
+        setSelectedTag(null);
+        // If this click is outside of the input, prevent it from "stealing" focus from the input
+        if (e.target &&
+            e.target instanceof Element &&
+            inputRef.current &&
+            !inputRef.current.contains(e.target)) {
+            e.preventDefault();
+            const { left, right, top, bottom } = inputRef.current.getBoundingClientRect();
+            const { clientX, clientY } = e;
+            // If this is the first click, clear the selection. Otherwise, select the input contents
+            if (e.detail === 1) {
+                if (clientY < top || clientX < left) {
+                    // "Before" the input: top/left
+                    inputRef.current.setSelectionRange(0, 0);
+                }
+                else if (clientY > bottom || clientX > right) {
+                    // "After" the input: bottom/right
+                    const length = inputRef.current.value.length;
+                    inputRef.current.setSelectionRange(length, length);
+                }
+            }
+            else {
+                inputRef.current.select();
+            }
+        }
+    };
+    const handleFocus = (e) => {
+        // If the focus is on a tag pill, do not trigger input focus logic
+        // The click handler for the specific tag will handle it instead
+        if (e.target && e.target instanceof Element && e.target.closest("[data-tag]")) {
+            return;
+        }
+        setFocused(true);
+    };
+    const handleBlur = (e) => {
+        // If there is no related target, don't remove focus.
+        // This occurs on a click inside the container but not on any element.
+        // The handleClickOutside handler handles other cases
+        if (!e.relatedTarget || !(e.relatedTarget instanceof Node)) {
+            return;
+        }
+        // Don't clear focus if focus is only moved elsewhere within the container
+        if (containerRef.current && containerRef.current.contains(e.relatedTarget)) {
+            // If we just tabbed into the input, clear the selected tag
+            if (inputRef.current && inputRef.current.contains(e.relatedTarget)) {
+                setSelectedTag(null);
+            }
+            return;
+        }
+        handleContainerBlur();
+    };
+    // @ts-expect-error - Fix once usehooks-ts is updated https://github.com/juliencrn/usehooks-ts/pull/675
+    useOnClickOutside(containerRef, handleContainerBlur);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: s.Container, ref: containerRef, onKeyDown: handleContainerKeyDown, onMouseDown: handleContainerMouseDown, onFocus: handleFocus, onBlur: handleBlur, "data-size": size, "data-focused": focused ? "" : undefined, "data-empty": tags.size === 0 ? "" : undefined, tabIndex: -1, style: toCssVariables({ "min-rows": String(rows) }), "data-disabled": disabled ? "" : undefined, children: _jsxs("div", { className: s.TagInput, children: [Array.from(tags.values()).map((tag) => (_jsxs("div", { className: s.Tag, tabIndex: -1, onClick: () => setSelectedTag(tag.value), "data-tag": tag.value, "data-invalid": !tag.valid ? "" : undefined, "data-duplicate": duplicateTags.has(tag.value) ? "" : undefined, children: [_jsx("span", { className: "overflow-hidden text-ellipsis", title: tag.value, children: _jsx("span", { className: s.TagValue, children: tag.value }) }), _jsx("div", { className: s.TagRemove, onClick: () => removeTag(tag.value), role: "button", "aria-label": "Remove item", children: _jsx(X, { height: 14, width: 14 }) })] }, tag.value))), showInput && (_jsxs("div", { className: s.InputContainer, children: [_jsx("span", { ref: measureRef, className: s.InputMeasure }), _jsx("div", { className: s.InputWrapper, children: _jsx("input", { id: id, className: s.Input, ref: inputRef, value: currentInput, onChange: (e) => {
+                                            setCurrentInput(e.target.value);
+                                        }, onPaste: handlePaste, onKeyDown: handleInputKeyDown, placeholder: placeholderText, style: { width: inputWidth }, disabled: disabled }) })] }))] }) }), maxTags && (_jsxs("div", { className: s.Limit, children: [tags.size, _jsx("span", { className: "mx-px", children: "/" }), maxTags] }))] }));
+};
+//# sourceMappingURL=TagInput.js.map

package/dist/es/components/TagInput/TagInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.js","sourceRoot":"","sources":["../../../../src/components/TagInput/TagInput.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\"\nimport { useOnClickOutside } from \"usehooks-ts\"\nimport { useLatestValue } from \"../../hooks/useLatestValue\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport type { Sizes } from \"../../types\"\nimport { X } from \"../Icon\"\nimport s from \"./TagInput.module.css\"\n\nexport type Tag = {\n  value: string\n  valid: boolean\n}\n\nexport type TagInputProps = {\n  /**\n   * The state of the tag input when it is initially rendered, used when uncontrolled\n   */\n  defaultValue?: Tag[]\n  /**\n   * The value of the tag input, used to control the tag input\n   */\n  value?: Tag[]\n  /**\n   * Allows the tag input to be targeted with htmlFor\n   */\n  id?: string\n  /**\n   * Corresponds with Input height when rows=1\n   * @default xl\n   */\n  size?: Sizes<\"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\">\n  /**\n   * Callback function invoked when the tag list changes\n   */\n  onChange?: (tags: Tag[]) => void\n  /**\n   * Placeholder text for the input\n   */\n  placeholder?: string\n  /**\n   * A function that returns whether a given value is a valid tag.\n   * Invalid tags are highlighted in red.\n   * Tags are evaluated for validity only on creation; changing the validator function later has no effect\n   */\n  validator?: (value: string) => boolean\n  /**\n   * The maximum number of tags allowed before the input is disabled; displays a counter below the input\n   */\n  maxTags?: number\n  /**\n   * Whether to focus this input on mount\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * The minimum number of rows for the tag input\n   * @default 1\n   */\n  rows?: number\n  /**\n   * Controls what characters will count towards creating a new tag\n   * @default [\",\", \" \"]\n   */\n  delimiters?: string[]\n  /**\n   * Disables the tag input visually and from interactions\n   */\n  disabled?: boolean\n}\n\n// How many pixels to reserve on the right of the input as a buffer before wrapping to the next line\nconst INPUT_CURSOR_TOLERANCE_PX = 10\n// The total space reserved on either side of the input for padding\nconst CONTAINER_PADDING_PX = 24\nconst SHAKE_ANIMATION_DURATION_MS = 500\n\nexport const TagInput = (props: TagInputProps) => {\n  const {\n    defaultValue: defaultValueProp = [],\n    value: controlledValue,\n    size = \"xl\",\n    onChange,\n    validator,\n    maxTags,\n    placeholder = \"\",\n    autoFocus = false,\n    rows = 1,\n    delimiters = [\",\", \" \"],\n    disabled,\n    id,\n  } = props\n\n  const [internalTags, setInternalTags] = useState(defaultValueProp)\n\n  const value = controlledValue ?? internalTags\n  const isControlled = controlledValue !== undefined\n\n  const tags = useMemo(() => new Map(value.map((tag) => [tag.value, tag])), [value])\n\n  const [currentInput, setCurrentInput] = useState(\"\")\n  const [focused, setFocused] = useState(autoFocus)\n  const [selectedTag, setSelectedTag] = useState<string | null>(null)\n  const [duplicateTags, setDuplicateTags] = useState<Set<string>>(new Set())\n  const [inputWidth, setInputWidth] = useState<number>(0)\n  const validatorLatest = useLatestValue(validator)\n  const onChangeLatest = useLatestValue(onChange)\n\n  const inputRef = useRef<HTMLInputElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const measureRef = useRef<HTMLSpanElement>(null)\n\n  const showInput = !maxTags || tags.size < maxTags\n\n  // Handle focusing the correct part of the tag input\n  useEffect(() => {\n    if (!focused || !containerRef.current) {\n      return\n    }\n    const defaultFocusEl = inputRef.current ?? containerRef.current\n    if (selectedTag === null) {\n      defaultFocusEl.focus()\n    } else {\n      const selectedTagElement = containerRef.current.querySelector(\n        `[data-tag=\"${selectedTag}\"]`,\n      ) as HTMLElement | null\n      if (selectedTagElement) {\n        selectedTagElement.focus()\n      } else {\n        defaultFocusEl.focus()\n      }\n    }\n  }, [focused, selectedTag, showInput]) // Include showInput so we focus the container when we hide the input\n\n  const placeholderText = tags.size === 0 ? placeholder : undefined\n\n  // Handle positioning the real input inside of the container\n  // Use useLayoutEffect to avoid flashing during width calculation\n  useLayoutEffect(() => {\n    if (containerRef.current && measureRef.current) {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const tagElements = Array.from(\n        containerRef.current.querySelectorAll(\"[data-tag]\"),\n      ) as HTMLDivElement[]\n\n      // Grab the right edge of the last tag if it exists, otherwise the left edge of the container\n      const leftBound =\n        tagElements.length > 0\n          ? tagElements[tagElements.length - 1].getBoundingClientRect().right\n          : containerRect.left\n\n      measureRef.current.textContent = currentInput || placeholderText || \"\"\n\n      // By padding the text width, we ensure the input wraps to the next line\n      // before we get to the point where we start to overflow\n      const textWidth = measureRef.current.getBoundingClientRect().width + INPUT_CURSOR_TOLERANCE_PX\n\n      // Calculate the remaining space based on the last tag's right edge (or container's left if no tags)\n      const remainingSpace = containerRect.right - leftBound - CONTAINER_PADDING_PX\n\n      if (textWidth <= remainingSpace) {\n        setInputWidth(remainingSpace)\n      } else {\n        // We are going to flow to a new line, so recalculate remaining space based on the container size\n        const width = containerRect.right - containerRect.left - CONTAINER_PADDING_PX\n        setInputWidth(width)\n      }\n    }\n  }, [currentInput, placeholderText, tags]) // Include tags so we reflow the container when we delete a tag\n\n  // ============================================\n  // Tag lifecycle functions\n  // ============================================\n\n  const addTag = (tagValue: string) => {\n    const trimmed = tagValue.trim()\n    if (!trimmed) {\n      return\n    }\n    if (tags.has(trimmed)) {\n      setDuplicateTags((prevTags) => new Set(prevTags).add(trimmed))\n      setTimeout(\n        () =>\n          setDuplicateTags((prevTags) => {\n            const newTags = new Set(prevTags)\n            newTags.delete(trimmed)\n            return newTags\n          }),\n        SHAKE_ANIMATION_DURATION_MS,\n      )\n      return\n    }\n    const validTag = validatorLatest.current?.(trimmed) ?? true\n    const newSet = new Map(tags)\n    newSet.set(trimmed, { value: trimmed, valid: validTag })\n    const newTags = Array.from(newSet.values())\n    onChangeLatest.current?.(newTags)\n\n    if (!isControlled) {\n      setInternalTags(newTags)\n    }\n  }\n\n  const removeTag = (tag: string) => {\n    const newSet = new Map(tags)\n    newSet.delete(tag)\n    const newTags = Array.from(newSet.values())\n    onChangeLatest.current?.(newTags)\n    if (!isControlled) {\n      setInternalTags(newTags)\n    }\n    if (selectedTag === tag) {\n      setSelectedTag(null)\n    }\n  }\n\n  const selectPreviousTag = () => {\n    if (tags.size === 0) {\n      return\n    }\n    const tagList = Array.from(tags.keys())\n    if (selectedTag === null) {\n      setSelectedTag(tagList[tagList.length - 1])\n    } else {\n      const prevIndex = tagList.indexOf(selectedTag)\n      const index = Math.max(0, prevIndex - 1)\n      setSelectedTag(tagList[index])\n    }\n  }\n\n  const selectNextTag = () => {\n    if (selectedTag === null) {\n      return\n    }\n    const tagList = Array.from(tags.keys())\n    const prevIndex = tagList.indexOf(selectedTag)\n    const index = prevIndex + 1\n    if (index < tagList.length) {\n      setSelectedTag(tagList[index])\n    } else {\n      setSelectedTag(null)\n    }\n  }\n\n  // ============================================\n  // Helper functions\n  // ============================================\n\n  const isEmptyStartingSelection = () => {\n    const input = inputRef.current\n    if (!input) {\n      return true\n    }\n    return input.selectionStart === 0 && input.selectionEnd === 0\n  }\n\n  const handleContainerBlur = () => {\n    setFocused(false)\n    setSelectedTag(null)\n    if (currentInput) {\n      addTag(currentInput)\n      setCurrentInput(\"\")\n    }\n  }\n\n  // ============================================\n  // Event handlers\n  // ============================================\n\n  const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n      if (isEmptyStartingSelection()) {\n        e.preventDefault()\n        selectPreviousTag()\n      }\n    } else if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n      if (selectedTag !== null) {\n        e.preventDefault()\n        selectNextTag()\n      }\n    } else if (e.key === \"Backspace\") {\n      if (selectedTag !== null) {\n        removeTag(selectedTag)\n      } else if (isEmptyStartingSelection()) {\n        selectPreviousTag()\n      }\n    }\n  }\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\" || delimiters.includes(e.key)) {\n      e.preventDefault()\n      if (currentInput) {\n        addTag(currentInput)\n        setCurrentInput(\"\")\n      }\n    } else if (e.key === \"Tab\") {\n      if (currentInput) {\n        e.preventDefault()\n        addTag(currentInput)\n        setCurrentInput(\"\")\n      }\n    }\n  }\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    const text = e.clipboardData.getData(\"Text\")\n    let parts = [text]\n\n    // Split by all delimiters\n    for (const delimiter of delimiters) {\n      const newParts = []\n      for (const segment of parts) {\n        newParts.push(...segment.split(delimiter))\n      }\n      parts = newParts\n    }\n\n    // Remove empty parts\n    parts = parts.filter(Boolean)\n\n    if (parts.length > 1) {\n      e.preventDefault()\n      parts.forEach((part) => addTag(part))\n    }\n  }\n\n  const handleContainerMouseDown = (e: React.MouseEvent) => {\n    // All clicks in the container focus the container\n    setFocused(true)\n\n    // If the click is on a tag pill, we are done. The click handler\n    // for the specific tag will handle focusing it\n    if (e.target && e.target instanceof Element && e.target.closest(\"[data-tag]\")) {\n      return\n    }\n\n    // Since we know we didn't click a tag, clear any selected tag\n    setSelectedTag(null)\n\n    // If this click is outside of the input, prevent it from \"stealing\" focus from the input\n    if (\n      e.target &&\n      e.target instanceof Element &&\n      inputRef.current &&\n      !inputRef.current.contains(e.target)\n    ) {\n      e.preventDefault()\n\n      const { left, right, top, bottom } = inputRef.current.getBoundingClientRect()\n      const { clientX, clientY } = e\n\n      // If this is the first click, clear the selection. Otherwise, select the input contents\n      if (e.detail === 1) {\n        if (clientY < top || clientX < left) {\n          // \"Before\" the input: top/left\n          inputRef.current.setSelectionRange(0, 0)\n        } else if (clientY > bottom || clientX > right) {\n          // \"After\" the input: bottom/right\n          const length = inputRef.current.value.length\n          inputRef.current.setSelectionRange(length, length)\n        }\n      } else {\n        inputRef.current.select()\n      }\n    }\n  }\n\n  const handleFocus = (e: React.FocusEvent) => {\n    // If the focus is on a tag pill, do not trigger input focus logic\n    // The click handler for the specific tag will handle it instead\n    if (e.target && e.target instanceof Element && e.target.closest(\"[data-tag]\")) {\n      return\n    }\n    setFocused(true)\n  }\n\n  const handleBlur = (e: React.FocusEvent) => {\n    // If there is no related target, don't remove focus.\n    // This occurs on a click inside the container but not on any element.\n    // The handleClickOutside handler handles other cases\n    if (!e.relatedTarget || !(e.relatedTarget instanceof Node)) {\n      return\n    }\n    // Don't clear focus if focus is only moved elsewhere within the container\n    if (containerRef.current && containerRef.current.contains(e.relatedTarget)) {\n      // If we just tabbed into the input, clear the selected tag\n      if (inputRef.current && inputRef.current.contains(e.relatedTarget)) {\n        setSelectedTag(null)\n      }\n      return\n    }\n    handleContainerBlur()\n  }\n\n  // @ts-expect-error - Fix once usehooks-ts is updated https://github.com/juliencrn/usehooks-ts/pull/675\n  useOnClickOutside(containerRef, handleContainerBlur)\n\n  return (\n    <>\n      <div\n        className={s.Container}\n        ref={containerRef}\n        onKeyDown={handleContainerKeyDown}\n        onMouseDown={handleContainerMouseDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        data-size={size}\n        data-focused={focused ? \"\" : undefined}\n        data-empty={tags.size === 0 ? \"\" : undefined}\n        tabIndex={-1}\n        style={toCssVariables({ \"min-rows\": String(rows) })}\n        data-disabled={disabled ? \"\" : undefined}\n      >\n        <div className={s.TagInput}>\n          {Array.from(tags.values()).map((tag) => (\n            <div\n              key={tag.value}\n              className={s.Tag}\n              tabIndex={-1}\n              onClick={() => setSelectedTag(tag.value)}\n              data-tag={tag.value}\n              data-invalid={!tag.valid ? \"\" : undefined}\n              data-duplicate={duplicateTags.has(tag.value) ? \"\" : undefined}\n            >\n              <span className=\"overflow-hidden text-ellipsis\" title={tag.value}>\n                <span className={s.TagValue}>{tag.value}</span>\n              </span>\n              <div\n                className={s.TagRemove}\n                onClick={() => removeTag(tag.value)}\n                role=\"button\"\n                aria-label=\"Remove item\"\n              >\n                <X height={14} width={14} />\n              </div>\n            </div>\n          ))}\n          {showInput && (\n            <div className={s.InputContainer}>\n              {/* Hidden element to measure input width */}\n              <span ref={measureRef} className={s.InputMeasure} />\n              <div className={s.InputWrapper}>\n                <input\n                  id={id}\n                  className={s.Input}\n                  ref={inputRef}\n                  value={currentInput}\n                  onChange={(e) => {\n                    setCurrentInput(e.target.value)\n                  }}\n                  onPaste={handlePaste}\n                  onKeyDown={handleInputKeyDown}\n                  placeholder={placeholderText}\n                  style={{ width: inputWidth }}\n                  disabled={disabled}\n                />\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n      {maxTags && (\n        <div className={s.Limit}>\n          {tags.size}\n          <span className=\"mx-px\">/</span>\n          {maxTags}\n        </div>\n      )}\n    </>\n  )\n}\n"]}