@pixpilot/shadcn-ui 0.1.0 → 0.4.1

package/dist/node_modules/.pnpm/@diceui_tags-input@0.7.2_@floating-ui_react@0.27.16_react-dom@19.2.0_react@19.2.0__reac_e193dc2ff0d426ed009417f8d89778fd/node_modules/@diceui/tags-input/dist/index.js

@@ -0,0 +1,565 @@
+'use client';
+
+
+import { __toESM } from "../../../../../../../_virtual/rolldown_runtime.js";
+import { require_dist } from "../../../../../@diceui_shared@0.12.0_@floating-ui_react@0.27.16_react-dom@19.2.0_react@19.2.0__react@1_2c51ffe880f01dd537d5b6a13313daf4/node_modules/@diceui/shared/dist/index.js";
+import * as React$1 from "react";
+
+//#region ../../node_modules/.pnpm/@diceui+tags-input@0.7.2_@floating-ui+react@0.27.16_react-dom@19.2.0_react@19.2.0__reac_e193dc2ff0d426ed009417f8d89778fd/node_modules/@diceui/tags-input/dist/index.js
+var import_dist = /* @__PURE__ */ __toESM(require_dist(), 1);
+var ROOT_NAME = "TagsInputRoot";
+var [TagsInputProvider, useTagsInput] = (0, import_dist.createContext)(ROOT_NAME);
+var TagsInputRoot = React$1.forwardRef((props, ref) => {
+	const { value: valueProp, defaultValue, onValueChange, onValidate, onInvalid, displayValue = (value2) => value2.toString(), addOnPaste = false, addOnTab = false, disabled = false, editable = false, loop = false, blurBehavior, delimiter = ",", max = Number.POSITIVE_INFINITY, readOnly = false, required = false, name, children, dir: dirProp, id: idProp,...rootProps } = props;
+	const [value = [], setValue] = (0, import_dist.useControllableState)({
+		prop: valueProp,
+		defaultProp: defaultValue,
+		onChange: onValueChange
+	});
+	const [highlightedIndex, setHighlightedIndex] = React$1.useState(null);
+	const [editingIndex, setEditingIndex] = React$1.useState(null);
+	const [isInvalidInput, setIsInvalidInput] = React$1.useState(false);
+	const collectionRef = React$1.useRef(null);
+	const inputRef = React$1.useRef(null);
+	const id = (0, import_dist.useId)();
+	const inputId = (0, import_dist.useId)();
+	const labelId = (0, import_dist.useId)();
+	const dir = (0, import_dist.useDirection)(dirProp);
+	const { getEnabledItems } = (0, import_dist.useItemCollection)({ ref: collectionRef });
+	const { isFormControl, onTriggerChange } = (0, import_dist.useFormControl)();
+	const composedRef = (0, import_dist.useComposedRefs)(ref, collectionRef, (node) => onTriggerChange(node));
+	const onItemAdd = React$1.useCallback((textValue, options) => {
+		if (disabled || readOnly) return false;
+		if (addOnPaste && options?.viaPaste) {
+			const splitValues = textValue.split(delimiter).map((v) => v.trim()).filter(Boolean);
+			if (value.length + splitValues.length > max && max > 0) {
+				onInvalid?.(textValue);
+				return false;
+			}
+			let newValues2 = [];
+			for (const v of splitValues) if (value.includes(v)) onInvalid?.(v);
+			newValues2 = [...new Set(splitValues.filter((v) => !value.includes(v)))];
+			const validValues = newValues2.filter((v) => !onValidate || onValidate(v));
+			if (validValues.length === 0) return false;
+			setValue([...value, ...validValues]);
+			return true;
+		}
+		if (value.length >= max && max > 0) {
+			onInvalid?.(textValue);
+			return false;
+		}
+		const trimmedValue = textValue.trim();
+		if (onValidate && !onValidate(trimmedValue)) {
+			setIsInvalidInput(true);
+			onInvalid?.(trimmedValue);
+			return false;
+		}
+		if (value.some((v) => {
+			return v === trimmedValue;
+		})) {
+			setIsInvalidInput(true);
+			onInvalid?.(trimmedValue);
+			return true;
+		}
+		const newValue = trimmedValue;
+		setValue([...value, newValue]);
+		setHighlightedIndex(null);
+		setEditingIndex(null);
+		setIsInvalidInput(false);
+		return true;
+	}, [
+		value,
+		max,
+		addOnPaste,
+		delimiter,
+		setValue,
+		onInvalid,
+		onValidate,
+		disabled,
+		readOnly
+	]);
+	const onItemUpdate = React$1.useCallback((index, newTextValue) => {
+		if (disabled || readOnly) return;
+		if (index !== -1) {
+			const trimmedValue = newTextValue.trim();
+			if (value.some((v, i) => {
+				if (i === index) return false;
+				return v === trimmedValue;
+			})) {
+				setIsInvalidInput(true);
+				onInvalid?.(trimmedValue);
+				return;
+			}
+			if (onValidate && !onValidate(trimmedValue)) {
+				setIsInvalidInput(true);
+				onInvalid?.(trimmedValue);
+				return;
+			}
+			const updatedValue = displayValue(trimmedValue);
+			const newValues = [...value];
+			newValues[index] = updatedValue;
+			setValue(newValues);
+			setHighlightedIndex(index);
+			setEditingIndex(null);
+			setIsInvalidInput(false);
+			requestAnimationFrame(() => inputRef.current?.focus());
+		}
+	}, [
+		value,
+		setValue,
+		displayValue,
+		onInvalid,
+		onValidate,
+		disabled,
+		readOnly
+	]);
+	const onItemRemove = React$1.useCallback((index) => {
+		if (disabled || readOnly) return;
+		if (index !== -1) {
+			const newValues = [...value];
+			newValues.splice(index, 1);
+			setValue(newValues);
+			setHighlightedIndex(null);
+			setEditingIndex(null);
+			inputRef.current?.focus();
+		}
+	}, [
+		value,
+		setValue,
+		disabled,
+		readOnly
+	]);
+	const onItemLeave = React$1.useCallback(() => {
+		setHighlightedIndex(null);
+		setEditingIndex(null);
+		inputRef.current?.focus();
+	}, []);
+	const onInputKeydown = React$1.useCallback((event) => {
+		const target = event.target;
+		if (!(target instanceof HTMLInputElement)) return;
+		const isArrowLeft = event.key === "ArrowLeft" && dir === "ltr" || event.key === "ArrowRight" && dir === "rtl";
+		const isArrowRight = event.key === "ArrowRight" && dir === "ltr" || event.key === "ArrowLeft" && dir === "rtl";
+		if (target.value && target.selectionStart !== 0) {
+			setHighlightedIndex(null);
+			setEditingIndex(null);
+			return;
+		}
+		function findNextEnabledIndex(currentIndex, direction) {
+			if (!collectionRef.current) return null;
+			const enabledIndices = getEnabledItems().map((_, index) => index);
+			if (enabledIndices.length === 0) return null;
+			if (currentIndex === null) return direction === "prev" ? enabledIndices[enabledIndices.length - 1] ?? null : enabledIndices[0] ?? null;
+			const currentEnabledIndex = enabledIndices.indexOf(currentIndex);
+			if (direction === "next") return currentEnabledIndex >= enabledIndices.length - 1 ? loop ? enabledIndices[0] ?? null : null : enabledIndices[currentEnabledIndex + 1] ?? null;
+			return currentEnabledIndex <= 0 ? loop ? enabledIndices[enabledIndices.length - 1] ?? null : null : enabledIndices[currentEnabledIndex - 1] ?? null;
+		}
+		switch (event.key) {
+			case "Delete":
+			case "Backspace":
+				if (target.selectionStart !== 0 || target.selectionEnd !== 0) break;
+				if (highlightedIndex !== null) {
+					const newIndex = findNextEnabledIndex(highlightedIndex, "prev");
+					onItemRemove(highlightedIndex);
+					setHighlightedIndex(newIndex);
+					event.preventDefault();
+				} else if (event.key === "Backspace" && value.length > 0) {
+					setHighlightedIndex(findNextEnabledIndex(null, "prev"));
+					event.preventDefault();
+				}
+				break;
+			case "Enter":
+				if (highlightedIndex !== null && editable && !disabled) {
+					setEditingIndex(highlightedIndex);
+					event.preventDefault();
+					return;
+				}
+				break;
+			case "ArrowLeft":
+			case "ArrowRight":
+				if (target.selectionStart === 0 && isArrowLeft && highlightedIndex === null && value.length > 0) {
+					setHighlightedIndex(findNextEnabledIndex(null, "prev"));
+					event.preventDefault();
+				} else if (highlightedIndex !== null) {
+					const nextIndex = findNextEnabledIndex(highlightedIndex, isArrowLeft ? "prev" : "next");
+					if (nextIndex !== null) {
+						setHighlightedIndex(nextIndex);
+						event.preventDefault();
+					} else if (isArrowRight) {
+						setHighlightedIndex(null);
+						requestAnimationFrame(() => target.setSelectionRange(0, 0));
+					}
+				}
+				break;
+			case "Home":
+				if (highlightedIndex !== null) {
+					setHighlightedIndex(findNextEnabledIndex(null, "next"));
+					event.preventDefault();
+				}
+				break;
+			case "End":
+				if (highlightedIndex !== null) {
+					setHighlightedIndex(findNextEnabledIndex(null, "prev"));
+					event.preventDefault();
+				}
+				break;
+			case "Escape":
+				if (highlightedIndex !== null) setHighlightedIndex(null);
+				if (editingIndex !== null) setEditingIndex(null);
+				requestAnimationFrame(() => target.setSelectionRange(0, 0));
+				break;
+		}
+	}, [
+		dir,
+		editingIndex,
+		highlightedIndex,
+		value,
+		onItemRemove,
+		getEnabledItems,
+		editable,
+		disabled,
+		loop
+	]);
+	const getIsClickedInEmptyRoot = React$1.useCallback((target) => {
+		return collectionRef.current?.contains(target) && !target.hasAttribute(import_dist.DATA_ITEM_ATTR) && target.tagName !== "INPUT";
+	}, []);
+	return /* @__PURE__ */ React$1.createElement(TagsInputProvider, {
+		value,
+		onValueChange: setValue,
+		onItemAdd,
+		onItemRemove,
+		onItemUpdate,
+		onInputKeydown,
+		highlightedIndex,
+		setHighlightedIndex,
+		editingIndex,
+		setEditingIndex,
+		displayValue,
+		onItemLeave,
+		inputRef,
+		isInvalidInput,
+		addOnPaste,
+		addOnTab,
+		disabled,
+		editable,
+		loop,
+		readOnly,
+		blurBehavior,
+		delimiter,
+		max,
+		dir,
+		id,
+		inputId,
+		labelId
+	}, /* @__PURE__ */ React$1.createElement(import_dist.Primitive.div, {
+		id,
+		"data-disabled": disabled ? "" : void 0,
+		"data-invalid": isInvalidInput ? "" : void 0,
+		"data-readonly": readOnly ? "" : void 0,
+		dir,
+		...rootProps,
+		ref: composedRef,
+		onClick: (0, import_dist.composeEventHandlers)(rootProps.onClick, (event) => {
+			const target = event.target;
+			if (!(target instanceof HTMLElement)) return;
+			if (getIsClickedInEmptyRoot(target) && document.activeElement !== inputRef.current) {
+				event.currentTarget.focus();
+				inputRef.current?.focus();
+			}
+		}),
+		onMouseDown: (0, import_dist.composeEventHandlers)(rootProps.onMouseDown, (event) => {
+			const target = event.target;
+			if (!(target instanceof HTMLElement)) return;
+			if (getIsClickedInEmptyRoot(target)) event.preventDefault();
+		}),
+		onBlur: (0, import_dist.composeEventHandlers)(rootProps.onBlur, (event) => {
+			if (event.relatedTarget !== inputRef.current && !collectionRef.current?.contains(event.relatedTarget)) requestAnimationFrame(() => setHighlightedIndex(null));
+		})
+	}, typeof children === "function" ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, children({ value })) : children, isFormControl && name && /* @__PURE__ */ React$1.createElement(import_dist.VisuallyHiddenInput, {
+		type: "hidden",
+		control: collectionRef.current,
+		name,
+		value,
+		disabled,
+		required
+	})));
+});
+TagsInputRoot.displayName = ROOT_NAME;
+var LABEL_NAME = "TagsInputLabel";
+var TagsInputLabel = React$1.forwardRef((props, ref) => {
+	const context = useTagsInput(LABEL_NAME);
+	return /* @__PURE__ */ React$1.createElement(import_dist.Primitive.label, {
+		id: context.labelId,
+		htmlFor: context.inputId,
+		...props,
+		ref
+	});
+});
+TagsInputLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "TagsInputItem";
+var [TagsInputItemProvider, useTagsInputItem] = (0, import_dist.createContext)(ITEM_NAME);
+var TagsInputItem = React$1.forwardRef((props, ref) => {
+	const { value, disabled,...itemProps } = props;
+	const pointerTypeRef = React$1.useRef("touch");
+	const context = useTagsInput(ITEM_NAME);
+	const id = (0, import_dist.useId)();
+	const textId = `${id}text`;
+	const index = context.value.indexOf(value);
+	const isHighlighted = index === context.highlightedIndex;
+	const isEditing = index === context.editingIndex;
+	const itemDisabled = disabled || context.disabled;
+	const displayValue = context.displayValue(value);
+	const onItemSelect = React$1.useCallback(() => {
+		context.setHighlightedIndex(index);
+		context.inputRef.current?.focus();
+	}, [
+		context.setHighlightedIndex,
+		context.inputRef,
+		index
+	]);
+	return /* @__PURE__ */ React$1.createElement(TagsInputItemProvider, {
+		id,
+		value,
+		index,
+		isHighlighted,
+		isEditing,
+		disabled: itemDisabled,
+		textId,
+		displayValue
+	}, /* @__PURE__ */ React$1.createElement(import_dist.Primitive.div, {
+		id,
+		"aria-labelledby": textId,
+		"aria-current": isHighlighted,
+		"aria-disabled": itemDisabled,
+		[import_dist.DATA_ITEM_ATTR]: "",
+		"data-state": isHighlighted ? "active" : "inactive",
+		"data-highlighted": isHighlighted ? "" : void 0,
+		"data-editing": isEditing ? "" : void 0,
+		"data-editable": context.editable ? "" : void 0,
+		"data-disabled": itemDisabled ? "" : void 0,
+		...itemProps,
+		ref,
+		onClick: (0, import_dist.composeEventHandlers)(itemProps.onClick, (event) => {
+			event.stopPropagation();
+			if (!isEditing && pointerTypeRef.current !== "mouse") onItemSelect();
+		}),
+		onDoubleClick: (0, import_dist.composeEventHandlers)(itemProps.onDoubleClick, () => {
+			if (context.editable && !itemDisabled) requestAnimationFrame(() => context.setEditingIndex(index));
+		}),
+		onPointerUp: (0, import_dist.composeEventHandlers)(itemProps.onPointerUp, () => {
+			if (pointerTypeRef.current === "mouse") onItemSelect();
+		}),
+		onPointerDown: (0, import_dist.composeEventHandlers)(itemProps.onPointerDown, (event) => pointerTypeRef.current = event.pointerType),
+		onPointerMove: (0, import_dist.composeEventHandlers)(itemProps.onPointerMove, (event) => {
+			pointerTypeRef.current = event.pointerType;
+			if (disabled) context.onItemLeave();
+			else if (pointerTypeRef.current === "mouse") event.currentTarget.focus({ preventScroll: true });
+		}),
+		onPointerLeave: (0, import_dist.composeEventHandlers)(itemProps.onPointerLeave, (event) => {
+			if (event.currentTarget === document.activeElement) context.onItemLeave();
+		})
+	}));
+});
+TagsInputItem.displayName = ITEM_NAME;
+var INPUT_NAME = "TagsInputInput";
+var TagsInputInput = React$1.forwardRef((props, ref) => {
+	const { autoFocus,...inputProps } = props;
+	const context = useTagsInput(INPUT_NAME);
+	const onTab = React$1.useCallback((event) => {
+		if (!context.addOnTab) return;
+		onCustomKeydown(event);
+	}, [context.addOnTab]);
+	const onCustomKeydown = React$1.useCallback((event) => {
+		if (event.defaultPrevented) return;
+		const value = event.currentTarget.value;
+		if (!value) return;
+		if (context.onItemAdd(value)) {
+			event.currentTarget.value = "";
+			context.setHighlightedIndex(null);
+		}
+		event.preventDefault();
+	}, [context.onItemAdd, context.setHighlightedIndex]);
+	React$1.useEffect(() => {
+		if (!autoFocus) return;
+		const animationFrameId = requestAnimationFrame(() => context.inputRef.current?.focus());
+		return () => cancelAnimationFrame(animationFrameId);
+	}, [autoFocus, context.inputRef]);
+	return /* @__PURE__ */ React$1.createElement(import_dist.Primitive.input, {
+		type: "text",
+		id: context.inputId,
+		autoCapitalize: "off",
+		autoComplete: "off",
+		autoCorrect: "off",
+		spellCheck: "false",
+		autoFocus,
+		"aria-labelledby": context.labelId,
+		"aria-readonly": context.readOnly,
+		"data-invalid": context.isInvalidInput ? "" : void 0,
+		dir: context.dir,
+		disabled: context.disabled,
+		readOnly: context.readOnly,
+		...inputProps,
+		ref: (0, import_dist.composeRefs)(context.inputRef, ref),
+		onBlur: (0, import_dist.composeEventHandlers)(inputProps.onBlur, (event) => {
+			if (context.readOnly) return;
+			if (context.blurBehavior === "add") {
+				const value = event.target.value;
+				if (value) {
+					if (context.onItemAdd(value)) event.target.value = "";
+				}
+			}
+			if (context.blurBehavior === "clear") event.target.value = "";
+		}),
+		onChange: (0, import_dist.composeEventHandlers)(inputProps.onChange, (event) => {
+			if (context.readOnly) return;
+			const target = event.target;
+			if (!(target instanceof HTMLInputElement)) return;
+			if (context.delimiter === target.value.slice(-1)) {
+				const value = target.value.slice(0, -1);
+				target.value = "";
+				if (value) {
+					context.onItemAdd(value);
+					context.setHighlightedIndex(null);
+				}
+			}
+		}),
+		onKeyDown: (0, import_dist.composeEventHandlers)(inputProps.onKeyDown, (event) => {
+			if (context.readOnly) return;
+			if (event.key === "Enter") onCustomKeydown(event);
+			if (event.key === "Tab") onTab(event);
+			context.onInputKeydown(event);
+			if (event.key.length === 1) context.setHighlightedIndex(null);
+		}),
+		onPaste: (0, import_dist.composeEventHandlers)(inputProps.onPaste, (event) => {
+			if (context.readOnly) return;
+			if (context.addOnPaste) {
+				event.preventDefault();
+				const value = event.clipboardData.getData("text");
+				context.onItemAdd(value, { viaPaste: true });
+				context.setHighlightedIndex(null);
+			}
+		})
+	});
+});
+TagsInputInput.displayName = INPUT_NAME;
+var ITEM_DELETE_NAME = "TagsInputItemDelete";
+var TagsInputItemDelete = React$1.forwardRef((props, ref) => {
+	const context = useTagsInput(ITEM_DELETE_NAME);
+	const itemContext = useTagsInputItem(ITEM_DELETE_NAME);
+	const disabled = itemContext.disabled || context.disabled;
+	if (itemContext.isEditing) return null;
+	return /* @__PURE__ */ React$1.createElement(import_dist.Primitive.button, {
+		type: "button",
+		tabIndex: disabled ? void 0 : -1,
+		"aria-labelledby": itemContext.textId,
+		"aria-controls": itemContext.id,
+		"aria-current": itemContext.isHighlighted,
+		"data-state": itemContext.isHighlighted ? "active" : "inactive",
+		"data-disabled": disabled ? "" : void 0,
+		...props,
+		ref,
+		onClick: (0, import_dist.composeEventHandlers)(props.onClick, () => {
+			if (disabled) return;
+			const index = context.value.findIndex((i) => i === itemContext.value);
+			context.onItemRemove(index);
+		})
+	});
+});
+TagsInputItemDelete.displayName = ITEM_DELETE_NAME;
+var ITEM_TEXT_NAME = "TagsInputItemText";
+var TagsInputItemText = React$1.forwardRef((props, ref) => {
+	const { children,...itemTextProps } = props;
+	const context = useTagsInput(ITEM_TEXT_NAME);
+	const itemContext = useTagsInputItem(ITEM_TEXT_NAME);
+	if (itemContext.isEditing && context.editable && !itemContext.disabled) return /* @__PURE__ */ React$1.createElement(TagsInputEditableItemText, null);
+	return /* @__PURE__ */ React$1.createElement(import_dist.Primitive.span, {
+		id: itemContext.textId,
+		...itemTextProps,
+		ref
+	}, children ?? itemContext.displayValue);
+});
+function TagsInputEditableItemText() {
+	const context = useTagsInput(ITEM_TEXT_NAME);
+	const itemContext = useTagsInputItem(ITEM_TEXT_NAME);
+	const [editValue, setEditValue] = React$1.useState(itemContext.displayValue);
+	const onBlur = React$1.useCallback(() => {
+		setEditValue(itemContext.displayValue);
+		context.setEditingIndex(null);
+	}, [context.setEditingIndex, itemContext.displayValue]);
+	const onChange = React$1.useCallback((event) => {
+		const target = event.target;
+		target.style.width = "0";
+		target.style.width = `${target.scrollWidth + 4}px`;
+		setEditValue(event.target.value);
+	}, []);
+	const onFocus = React$1.useCallback((event) => {
+		event.target.select();
+		event.target.style.width = "0";
+		event.target.style.width = `${event.target.scrollWidth + 4}px`;
+	}, []);
+	const onKeyDown = React$1.useCallback((event) => {
+		if (event.key === "Enter") {
+			const index = context.value.findIndex((v) => v === itemContext.value);
+			context.onItemUpdate(index, editValue);
+		} else if (event.key === "Escape") {
+			setEditValue(itemContext.displayValue);
+			context.setEditingIndex(null);
+			context.setHighlightedIndex(itemContext.index);
+			context.inputRef.current?.focus();
+		}
+		event.stopPropagation();
+	}, [
+		context.value,
+		context.onItemUpdate,
+		context.setEditingIndex,
+		itemContext.displayValue,
+		context.inputRef.current?.focus,
+		editValue,
+		itemContext.value,
+		context.setHighlightedIndex,
+		itemContext.index
+	]);
+	return /* @__PURE__ */ React$1.createElement(import_dist.Primitive.input, {
+		type: "text",
+		autoCapitalize: "off",
+		autoComplete: "off",
+		autoCorrect: "off",
+		spellCheck: "false",
+		autoFocus: true,
+		"aria-describedby": itemContext.textId,
+		value: editValue,
+		onChange,
+		onKeyDown,
+		onFocus,
+		onBlur,
+		style: {
+			outline: "none",
+			background: "inherit",
+			border: "none",
+			font: "inherit",
+			color: "inherit",
+			padding: 0,
+			minWidth: "1ch"
+		}
+	});
+}
+var CLEAR_NAME = "TagsInputClear";
+var TagsInputClear = React$1.forwardRef((props, ref) => {
+	const { forceMount,...clearProps } = props;
+	const context = useTagsInput(CLEAR_NAME);
+	return /* @__PURE__ */ React$1.createElement(import_dist.Presence, { present: forceMount || context.value.length > 0 }, /* @__PURE__ */ React$1.createElement(import_dist.Primitive.button, {
+		type: "button",
+		"aria-disabled": context.disabled,
+		"data-state": context.value.length > 0 ? "visible" : "invisible",
+		"data-disabled": context.disabled ? "" : void 0,
+		...clearProps,
+		ref,
+		onClick: (0, import_dist.composeEventHandlers)(props.onClick, () => {
+			if (context.disabled) return;
+			context.onValueChange([]);
+			context.inputRef.current?.focus();
+		})
+	}));
+});
+TagsInputClear.displayName = CLEAR_NAME;
+
+//#endregion