@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/inputs/PinInput.js

@@ -1,210 +1,227 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { memo, useRef, useState, useEffect, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
-const PinInput = memo(function PinInput2({
-  length = 6,
-  type = "alphanumeric",
-  value,
-  onChange,
-  label,
-  helperText,
-  error,
-  disabled = false,
-  mask = false,
-  size = "medium",
-  autoFocus = false,
-  onComplete,
-  labelPlacement = "outlined",
-  required,
-  fullWidth = false
-}) {
-  const { tokens, theme } = useTheme();
-  const { isMobile } = useBreakpoint();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const refs = useRef([]);
-  const [focusedIndex, setFocusedIndex] = useState(null);
-  const chars = value.split("").concat(Array(length).fill("")).slice(0, length);
-  useEffect(() => {
-    if (autoFocus && refs.current[0]) {
-      refs.current[0].focus();
-    }
-  }, [autoFocus]);
-  const reducedHeight = size === "small" ? "26px" : size === "medium" ? "34px" : "42px";
-  const controlHeight = isMobile ? "44px" : reducedHeight;
-  const sizeConfig = {
-    small: { fontSize: tokens.typography.fontSize.xs },
-    medium: { fontSize: tokens.typography.fontSize.sm },
-    large: { fontSize: tokens.typography.fontSize.base }
-  };
-  const config = { ...sizeConfig[size], height: controlHeight };
-  const isValid = (char) => {
-    if (type === "numeric") return /^[0-9]$/.test(char);
-    return /^[a-zA-Z0-9]$/.test(char);
-  };
-  const handleChange = useCallback((index, inputValue) => {
-    var _a, _b;
-    if (inputValue.length > 1) {
-      const normalized = inputValue.replace(/\s/g, "");
-      const filtered = normalized.split("").filter(isValid).slice(0, length);
-      const newValue2 = filtered.join("");
-      onChange(newValue2);
-      const nextIndex = Math.min(filtered.length, length - 1);
-      (_a = refs.current[nextIndex]) == null ? void 0 : _a.focus();
-      if (filtered.length === length) onComplete == null ? void 0 : onComplete(newValue2);
-      return;
-    }
-    const char = inputValue;
-    if (char && !isValid(char)) return;
-    const newChars = [...chars];
-    newChars[index] = char.toUpperCase();
-    const newValue = newChars.join("").replace(/\s/g, "");
-    onChange(newValue);
-    if (char && index < length - 1) {
-      (_b = refs.current[index + 1]) == null ? void 0 : _b.focus();
-    }
-    if (newValue.length === length) {
-      onComplete == null ? void 0 : onComplete(newValue);
-    }
-  }, [chars, length, onChange, onComplete, type]);
-  const handleKeyDown = useCallback((index, e) => {
-    var _a, _b, _c;
-    if (e.key === "Backspace") {
-      if (!chars[index] && index > 0) {
-        (_a = refs.current[index - 1]) == null ? void 0 : _a.focus();
-        const newChars = [...chars];
-        newChars[index - 1] = "";
-        onChange(newChars.join(""));
-      }
-    } else if (e.key === "ArrowLeft" && index > 0) {
-      (_b = refs.current[index - 1]) == null ? void 0 : _b.focus();
-    } else if (e.key === "ArrowRight" && index < length - 1) {
-      (_c = refs.current[index + 1]) == null ? void 0 : _c.focus();
-    }
-  }, [chars, length, onChange]);
-  const hasError = !!error;
-  const errorMessage = typeof error === "string" ? error : void 0;
-  const inputBg = isTransparentTheme ? tokens.colors.interactive.transparentInputBg || "rgba(139, 92, 246, 0.08)" : tokens.colors.background.surface;
-  const isOutlined = labelPlacement === "outlined";
-  const isFocused = focusedIndex !== null;
-  const labelBg = isTransparentTheme ? tokens.colors.background.base : tokens.colors.background.surface;
-  const outlinedLabelSizeMap = { small: "0.625rem", medium: "0.6875rem", large: "0.75rem" };
-  const outlinedLabelLeftMap = { small: "2px", medium: "2px", large: "2px" };
-  const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    label,
-    required && /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.status.critical, marginLeft: "2px" }, children: "*" })
-  ] });
-  const cellsEl = /* @__PURE__ */ jsx("div", { style: {
-    display: "flex",
-    gap: tokens.spacing.xs,
-    width: fullWidth ? "100%" : void 0
-  }, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(
-    "input",
-    {
-      ref: (el) => {
-        refs.current[i] = el;
-      },
-      type: mask ? "password" : "text",
-      inputMode: type === "numeric" ? "numeric" : "text",
-      maxLength: 1,
-      value: chars[i] || "",
-      onChange: (e) => handleChange(i, e.target.value),
-      onKeyDown: (e) => handleKeyDown(i, e),
-      onFocus: () => setFocusedIndex(i),
-      onBlur: () => setFocusedIndex(null),
-      onPaste: (e) => {
-        e.preventDefault();
-        handleChange(i, e.clipboardData.getData("text"));
-      },
-      disabled,
-      "aria-label": `Character ${i + 1} of ${length}`,
-      "aria-invalid": hasError || void 0,
-      "aria-describedby": errorMessage ? "zendir-pin-error" : helperText ? "zendir-pin-helper" : void 0,
-      style: {
-        ...fullWidth ? { flex: 1, minWidth: 0 } : { width: controlHeight },
-        height: config.height,
-        textAlign: "center",
-        fontSize: config.fontSize,
-        fontWeight: tokens.typography.fontWeight.bold,
-        fontFamily: tokens.typography.fontFamily.mono,
-        fontVariantNumeric: "tabular-nums",
-        color: tokens.colors.text.primary,
-        backgroundColor: isOutlined ? "transparent" : inputBg,
-        border: isOutlined ? "none" : hasError ? `${tokens.borders.width.medium} solid ${tokens.colors.status.critical}` : focusedIndex === i ? `${tokens.borders.width.medium} solid ${tokens.colors.accent.primary}` : chars[i] ? `${tokens.borders.width.medium} solid ${tokens.colors.border.default}` : `${tokens.borders.width.medium} solid ${tokens.colors.border.muted}`,
-        borderRadius: isOutlined ? 0 : tokens.borderRadius.md,
-        outline: "none",
-        transition: tokens.animation.fast,
-        opacity: disabled ? 0.5 : 1,
-        cursor: disabled ? "not-allowed" : "text",
-        ...!isOutlined && focusedIndex === i ? {
-          boxShadow: tokens.borders.focusRing.subtle
-        } : {}
-      }
-    },
-    i
-  )) });
-  return /* @__PURE__ */ jsxs("div", { style: {
-    fontFamily: tokens.typography.fontFamily.primary,
-    width: fullWidth ? "100%" : void 0
-  }, children: [
-    label && !isOutlined && /* @__PURE__ */ jsx("div", { style: {
-      fontSize: tokens.typography.fontSize.xs,
-      fontWeight: tokens.typography.fontWeight.medium,
-      color: tokens.colors.text.secondary,
-      letterSpacing: tokens.typography.letterSpacing.wide,
-      marginBottom: tokens.spacing.xs
-    }, children: labelContent }),
-    isOutlined ? /* @__PURE__ */ jsxs("div", { style: {
-      position: "relative",
-      width: fullWidth ? "100%" : void 0,
-      minHeight: controlHeight,
-      border: hasError ? tokens.borders.input.error : isFocused ? tokens.borders.input.focus : tokens.borders.input.default,
-      borderRadius: tokens.borderRadius.md,
-      padding: `0 ${tokens.spacing.sm}`,
-      display: "flex",
-      alignItems: "center",
-      backgroundColor: inputBg,
-      transition: tokens.animation.fast,
-      boxSizing: "border-box",
-      ...isFocused ? {
-        boxShadow: tokens.borders.focusRing.subtle
-      } : {}
-    }, children: [
-      label && /* @__PURE__ */ jsx("div", { style: {
-        position: "absolute",
-        top: 0,
-        left: outlinedLabelLeftMap[size],
-        transform: "translateY(-50%)",
-        backgroundColor: labelBg,
-        padding: `0 ${tokens.spacing.xs}`,
-        fontSize: outlinedLabelSizeMap[size],
-        fontWeight: tokens.typography.fontWeight.medium,
-        color: isFocused ? hasError ? tokens.colors.status.critical : tokens.colors.accent.primary : hasError ? tokens.colors.status.critical : tokens.colors.text.secondary,
-        letterSpacing: tokens.typography.letterSpacing.wide,
-        zIndex: 1,
-        pointerEvents: "none",
-        transition: tokens.animation.fast,
-        lineHeight: 1.2,
-        whiteSpace: "nowrap"
-      }, children: labelContent }),
-      cellsEl
-    ] }) : cellsEl,
-    (helperText || errorMessage) && /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: errorMessage ? "zendir-pin-error" : "zendir-pin-helper",
-        role: errorMessage ? "alert" : void 0,
-        style: {
-          fontSize: tokens.typography.fontSize.xs,
-          color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary,
-          marginTop: tokens.spacing.xs
-        },
-        children: errorMessage || helperText
-      }
-    )
-  ] });
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/inputs/PinInput.tsx
+/**
+* @zendir/ui - PinInput Component
+*
+* Multi-character code entry for passwords, verification codes, and team IDs.
+* Auto-advances focus between cells. Supports numeric and alphanumeric modes.
+*
+* Astro UX Compliance:
+* - Consistent styling with Input component
+* - Focus ring for accessibility
+* - Monospace tabular numbers
+*
+* @example
+* ```tsx
+* <PinInput length={6} type="alphanumeric" value={password} onChange={setPassword} label="Team Password" />
+* <PinInput length={4} type="numeric" value={code} onChange={setCode} label="Verification Code" />
+* <PinInput length={8} value={token} onChange={setToken} label="API Token" />
+* ```
+*/
+var PinInput = memo(function PinInput({ length = 6, type = "alphanumeric", value, onChange, label, helperText, error, disabled = false, mask = false, size = "medium", autoFocus = false, onComplete, labelPlacement = "outlined", required, fullWidth = false }) {
+	const { tokens, theme } = useTheme();
+	const { isMobile } = useBreakpoint();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const refs = useRef([]);
+	const [focusedIndex, setFocusedIndex] = useState(null);
+	const chars = value.split("").concat(Array(length).fill("")).slice(0, length);
+	useEffect(() => {
+		if (autoFocus && refs.current[0]) refs.current[0].focus();
+	}, [autoFocus]);
+	const controlHeight = isMobile ? "44px" : size === "small" ? "26px" : size === "medium" ? "34px" : "42px";
+	const config = {
+		...{
+			small: { fontSize: tokens.typography.fontSize.xs },
+			medium: { fontSize: tokens.typography.fontSize.sm },
+			large: { fontSize: tokens.typography.fontSize.base }
+		}[size],
+		height: controlHeight
+	};
+	const isValid = (char) => {
+		if (type === "numeric") return /^[0-9]$/.test(char);
+		return /^[a-zA-Z0-9]$/.test(char);
+	};
+	const handleChange = useCallback((index, inputValue) => {
+		if (inputValue.length > 1) {
+			const filtered = inputValue.replace(/\s/g, "").split("").filter(isValid).slice(0, length);
+			const newValue = filtered.join("");
+			onChange(newValue);
+			const nextIndex = Math.min(filtered.length, length - 1);
+			refs.current[nextIndex]?.focus();
+			if (filtered.length === length) onComplete?.(newValue);
+			return;
+		}
+		const char = inputValue;
+		if (char && !isValid(char)) return;
+		const newChars = [...chars];
+		newChars[index] = char.toUpperCase();
+		const newValue = newChars.join("").replace(/\s/g, "");
+		onChange(newValue);
+		if (char && index < length - 1) refs.current[index + 1]?.focus();
+		if (newValue.length === length) onComplete?.(newValue);
+	}, [
+		chars,
+		length,
+		onChange,
+		onComplete,
+		type
+	]);
+	const handleKeyDown = useCallback((index, e) => {
+		if (e.key === "Backspace") {
+			if (!chars[index] && index > 0) {
+				refs.current[index - 1]?.focus();
+				const newChars = [...chars];
+				newChars[index - 1] = "";
+				onChange(newChars.join(""));
+			}
+		} else if (e.key === "ArrowLeft" && index > 0) refs.current[index - 1]?.focus();
+		else if (e.key === "ArrowRight" && index < length - 1) refs.current[index + 1]?.focus();
+	}, [
+		chars,
+		length,
+		onChange
+	]);
+	const hasError = !!error;
+	const errorMessage = typeof error === "string" ? error : void 0;
+	const inputBg = isTransparentTheme ? tokens.colors.interactive.transparentInputBg || "rgba(139, 92, 246, 0.08)" : tokens.colors.background.surface;
+	const isOutlined = labelPlacement === "outlined";
+	const isFocused = focusedIndex !== null;
+	const labelBg = isTransparentTheme ? tokens.colors.background.base : tokens.colors.background.surface;
+	const outlinedLabelSizeMap = {
+		small: "0.625rem",
+		medium: "0.6875rem",
+		large: "0.75rem"
+	};
+	const outlinedLabelLeftMap = {
+		small: "2px",
+		medium: "2px",
+		large: "2px"
+	};
+	const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [label, required && /* @__PURE__ */ jsx("span", {
+		style: {
+			color: tokens.colors.status.critical,
+			marginLeft: "2px"
+		},
+		children: "*"
+	})] });
+	const cellsEl = /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			gap: tokens.spacing.xs,
+			width: fullWidth ? "100%" : void 0
+		},
+		children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx("input", {
+			ref: (el) => {
+				refs.current[i] = el;
+			},
+			type: mask ? "password" : "text",
+			inputMode: type === "numeric" ? "numeric" : "text",
+			maxLength: 1,
+			value: chars[i] || "",
+			onChange: (e) => handleChange(i, e.target.value),
+			onKeyDown: (e) => handleKeyDown(i, e),
+			onFocus: () => setFocusedIndex(i),
+			onBlur: () => setFocusedIndex(null),
+			onPaste: (e) => {
+				e.preventDefault();
+				handleChange(i, e.clipboardData.getData("text"));
+			},
+			disabled,
+			"aria-label": `Character ${i + 1} of ${length}`,
+			"aria-invalid": hasError || void 0,
+			"aria-describedby": errorMessage ? "zendir-pin-error" : helperText ? "zendir-pin-helper" : void 0,
+			style: {
+				...fullWidth ? {
+					flex: 1,
+					minWidth: 0
+				} : { width: controlHeight },
+				height: config.height,
+				textAlign: "center",
+				fontSize: config.fontSize,
+				fontWeight: tokens.typography.fontWeight.bold,
+				fontFamily: tokens.typography.fontFamily.mono,
+				fontVariantNumeric: "tabular-nums",
+				color: tokens.colors.text.primary,
+				backgroundColor: isOutlined ? "transparent" : inputBg,
+				border: isOutlined ? "none" : hasError ? `${tokens.borders.width.medium} solid ${tokens.colors.status.critical}` : focusedIndex === i ? `${tokens.borders.width.medium} solid ${tokens.colors.accent.primary}` : chars[i] ? `${tokens.borders.width.medium} solid ${tokens.colors.border.default}` : `${tokens.borders.width.medium} solid ${tokens.colors.border.muted}`,
+				borderRadius: isOutlined ? 0 : tokens.borderRadius.md,
+				outline: "none",
+				transition: tokens.animation.fast,
+				opacity: disabled ? .5 : 1,
+				cursor: disabled ? "not-allowed" : "text",
+				...!isOutlined && focusedIndex === i ? { boxShadow: tokens.borders.focusRing.subtle } : {}
+			}
+		}, i))
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			fontFamily: tokens.typography.fontFamily.primary,
+			width: fullWidth ? "100%" : void 0
+		},
+		children: [
+			label && !isOutlined && /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					fontWeight: tokens.typography.fontWeight.medium,
+					color: tokens.colors.text.secondary,
+					letterSpacing: tokens.typography.letterSpacing.wide,
+					marginBottom: tokens.spacing.xs
+				},
+				children: labelContent
+			}),
+			isOutlined ? /* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "relative",
+					width: fullWidth ? "100%" : void 0,
+					minHeight: controlHeight,
+					border: hasError ? tokens.borders.input.error : isFocused ? tokens.borders.input.focus : tokens.borders.input.default,
+					borderRadius: tokens.borderRadius.md,
+					padding: `0 ${tokens.spacing.sm}`,
+					display: "flex",
+					alignItems: "center",
+					backgroundColor: inputBg,
+					transition: tokens.animation.fast,
+					boxSizing: "border-box",
+					...isFocused ? { boxShadow: tokens.borders.focusRing.subtle } : {}
+				},
+				children: [label && /* @__PURE__ */ jsx("div", {
+					style: {
+						position: "absolute",
+						top: 0,
+						left: outlinedLabelLeftMap[size],
+						transform: "translateY(-50%)",
+						backgroundColor: labelBg,
+						padding: `0 ${tokens.spacing.xs}`,
+						fontSize: outlinedLabelSizeMap[size],
+						fontWeight: tokens.typography.fontWeight.medium,
+						color: isFocused ? hasError ? tokens.colors.status.critical : tokens.colors.accent.primary : hasError ? tokens.colors.status.critical : tokens.colors.text.secondary,
+						letterSpacing: tokens.typography.letterSpacing.wide,
+						zIndex: 1,
+						pointerEvents: "none",
+						transition: tokens.animation.fast,
+						lineHeight: 1.2,
+						whiteSpace: "nowrap"
+					},
+					children: labelContent
+				}), cellsEl]
+			}) : cellsEl,
+			(helperText || errorMessage) && /* @__PURE__ */ jsx("div", {
+				id: errorMessage ? "zendir-pin-error" : "zendir-pin-helper",
+				role: errorMessage ? "alert" : void 0,
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary,
+					marginTop: tokens.spacing.xs
+				},
+				children: errorMessage || helperText
+			})
+		]
+	});
 });
-export {
-  PinInput
-};
-//# sourceMappingURL=PinInput.js.map
+//#endregion
+export { PinInput, PinInput as default };
+
+//# sourceMappingURL=PinInput.js.map

package/dist/react/core/inputs/PinInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.js","sources":["../../../../src/react/core/inputs/PinInput.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - PinInput Component\r\n * \r\n * Multi-character code entry for passwords, verification codes, and team IDs.\r\n * Auto-advances focus between cells. Supports numeric and alphanumeric modes.\r\n * \r\n * Astro UX Compliance:\r\n * - Consistent styling with Input component\r\n * - Focus ring for accessibility\r\n * - Monospace tabular numbers\r\n * \r\n * @example\r\n * ```tsx\r\n * <PinInput length={6} type=\"alphanumeric\" value={password} onChange={setPassword} label=\"Team Password\" />\r\n * <PinInput length={4} type=\"numeric\" value={code} onChange={setCode} label=\"Verification Code\" />\r\n * <PinInput length={8} value={token} onChange={setToken} label=\"API Token\" />\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, useRef, useCallback, useEffect } from 'react';\r\nimport { useTheme } from '../../theme';\r\nimport type { LabelPlacement } from './Input';\r\nimport { useBreakpoint } from '../layout/useBreakpoint';\r\n\r\nexport interface PinInputProps {\r\n  /** Number of character cells (default 6; any positive number, e.g. 4, 6, 8) */\r\n  length?: number;\r\n  /** Input type */\r\n  type?: 'numeric' | 'alphanumeric';\r\n  /** Current value */\r\n  value: string;\r\n  /** Change handler */\r\n  onChange: (value: string) => void;\r\n  /** Label text or ReactNode (supports rich content like tooltip icons) */\r\n  label?: React.ReactNode;\r\n  /** Helper text */\r\n  helperText?: string;\r\n  /** Error state */\r\n  error?: boolean | string;\r\n  /** Disabled */\r\n  disabled?: boolean;\r\n  /** Mask characters (password mode) */\r\n  mask?: boolean;\r\n  /** Size */\r\n  size?: 'small' | 'medium' | 'large';\r\n  /** Auto-focus first cell on mount */\r\n  autoFocus?: boolean;\r\n  /** Callback when all cells filled */\r\n  onComplete?: (value: string) => void;\r\n  /**\r\n   * Label placement style.\r\n   * - `'outlined'` — label sits on the border of a surrounding container. **Default.**\r\n   * - `'above'`    — label sits above the cells with a gap (classic stack).\r\n   */\r\n  labelPlacement?: LabelPlacement;\r\n  /** Required indicator */\r\n  required?: boolean;\r\n  /** Stretch to full width of container (cells share width equally, same as standard inputs) */\r\n  fullWidth?: boolean;\r\n}\r\n\r\nexport const PinInput = memo(function PinInput({\r\n  length = 6,\r\n  type = 'alphanumeric',\r\n  value,\r\n  onChange,\r\n  label,\r\n  helperText,\r\n  error,\r\n  disabled = false,\r\n  mask = false,\r\n  size = 'medium',\r\n  autoFocus = false,\r\n  onComplete,\r\n  labelPlacement = 'outlined',\r\n  required,\r\n  fullWidth = false,\r\n}: PinInputProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const { isMobile } = useBreakpoint();\r\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const refs = useRef<(HTMLInputElement | null)[]>([]);\r\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\r\n  \r\n  const chars = value.split('').concat(Array(length).fill('')).slice(0, length);\r\n  \r\n  useEffect(() => {\r\n    if (autoFocus && refs.current[0]) {\r\n      refs.current[0].focus();\r\n    }\r\n  }, [autoFocus]);\r\n  \r\n  // Between original tokens and the reduced set: slightly more height than 24/32/40, still less than 28/36/44\r\n  const reducedHeight = size === 'small' ? '26px' : size === 'medium' ? '34px' : '42px';\r\n  const controlHeight = isMobile ? '44px' : reducedHeight;\r\n  const sizeConfig = {\r\n    small: { fontSize: tokens.typography.fontSize.xs },\r\n    medium: { fontSize: tokens.typography.fontSize.sm },\r\n    large: { fontSize: tokens.typography.fontSize.base },\r\n  };\r\n  const config = { ...sizeConfig[size], height: controlHeight } as { height: string; fontSize: string };\r\n  \r\n  const isValid = (char: string): boolean => {\r\n    if (type === 'numeric') return /^[0-9]$/.test(char);\r\n    return /^[a-zA-Z0-9]$/.test(char);\r\n  };\r\n  \r\n  const handleChange = useCallback((index: number, inputValue: string) => {\r\n    // Handle paste (multiple characters). Strip spaces so pasted codes like \"12 34 56\" work.\r\n    if (inputValue.length > 1) {\r\n      const normalized = inputValue.replace(/\\s/g, '');\r\n      const filtered = normalized.split('').filter(isValid).slice(0, length);\r\n      const newValue = filtered.join('');\r\n      onChange(newValue);\r\n      const nextIndex = Math.min(filtered.length, length - 1);\r\n      refs.current[nextIndex]?.focus();\r\n      if (filtered.length === length) onComplete?.(newValue);\r\n      return;\r\n    }\r\n    \r\n    const char = inputValue;\r\n    if (char && !isValid(char)) return;\r\n    \r\n    const newChars = [...chars];\r\n    newChars[index] = char.toUpperCase();\r\n    const newValue = newChars.join('').replace(/\\s/g, '');\r\n    onChange(newValue);\r\n    \r\n    // Auto-advance\r\n    if (char && index < length - 1) {\r\n      refs.current[index + 1]?.focus();\r\n    }\r\n    \r\n    if (newValue.length === length) {\r\n      onComplete?.(newValue);\r\n    }\r\n  }, [chars, length, onChange, onComplete, type]);\r\n  \r\n  const handleKeyDown = useCallback((index: number, e: React.KeyboardEvent) => {\r\n    if (e.key === 'Backspace') {\r\n      if (!chars[index] && index > 0) {\r\n        refs.current[index - 1]?.focus();\r\n        const newChars = [...chars];\r\n        newChars[index - 1] = '';\r\n        onChange(newChars.join(''));\r\n      }\r\n    } else if (e.key === 'ArrowLeft' && index > 0) {\r\n      refs.current[index - 1]?.focus();\r\n    } else if (e.key === 'ArrowRight' && index < length - 1) {\r\n      refs.current[index + 1]?.focus();\r\n    }\r\n  }, [chars, length, onChange]);\r\n  \r\n  const hasError = !!error;\r\n  const errorMessage = typeof error === 'string' ? error : undefined;\r\n  \r\n  const inputBg = isTransparentTheme\r\n    ? (tokens.colors.interactive.transparentInputBg || 'rgba(139, 92, 246, 0.08)')\r\n    : tokens.colors.background.surface;\r\n  \r\n  const isOutlined = labelPlacement === 'outlined';\r\n  const isFocused = focusedIndex !== null;\r\n  \r\n  // Background for the outlined label \"notch\"\r\n  const labelBg = isTransparentTheme\r\n    ? tokens.colors.background.base\r\n    : tokens.colors.background.surface;\r\n  \r\n  // Outlined label font sizes\r\n  const outlinedLabelSizeMap = { small: '0.625rem', medium: '0.6875rem', large: '0.75rem' };\r\n  // Container always uses spacing.sm (8px) horizontal padding, so label left is always 8-6=2px\r\n  const outlinedLabelLeftMap = { small: '2px', medium: '2px', large: '2px' };\r\n  \r\n  // Shared label content\r\n  const labelContent = (\r\n    <>\r\n      {label}\r\n      {required && (\r\n        <span style={{ color: tokens.colors.status.critical, marginLeft: '2px' }}>*</span>\r\n      )}\r\n    </>\r\n  );\r\n  \r\n  // Cells renderer: fullWidth = cells share space (same total width as standard inputs); otherwise fixed square cells\r\n  const cellsEl = (\r\n    <div style={{\r\n      display: 'flex',\r\n      gap: tokens.spacing.xs,\r\n      width: fullWidth ? '100%' : undefined,\r\n    }}>\r\n      {Array.from({ length }, (_, i) => (\r\n        <input\r\n          key={i}\r\n          ref={el => { refs.current[i] = el; }}\r\n          type={mask ? 'password' : 'text'}\r\n          inputMode={type === 'numeric' ? 'numeric' : 'text'}\r\n          maxLength={1}\r\n          value={chars[i] || ''}\r\n          onChange={e => handleChange(i, e.target.value)}\r\n          onKeyDown={e => handleKeyDown(i, e)}\r\n          onFocus={() => setFocusedIndex(i)}\r\n          onBlur={() => setFocusedIndex(null)}\r\n          onPaste={e => {\r\n            e.preventDefault();\r\n            handleChange(i, e.clipboardData.getData('text'));\r\n          }}\r\n          disabled={disabled}\r\n          aria-label={`Character ${i + 1} of ${length}`}\r\n          aria-invalid={hasError || undefined}\r\n          aria-describedby={errorMessage ? 'zendir-pin-error' : helperText ? 'zendir-pin-helper' : undefined}\r\n          style={{\r\n            ...(fullWidth ? { flex: 1, minWidth: 0 } : { width: controlHeight }),\r\n            height: config.height,\r\n            textAlign: 'center',\r\n            fontSize: config.fontSize,\r\n            fontWeight: tokens.typography.fontWeight.bold,\r\n            fontFamily: tokens.typography.fontFamily.mono,\r\n            fontVariantNumeric: 'tabular-nums',\r\n            color: tokens.colors.text.primary,\r\n            backgroundColor: isOutlined ? 'transparent' : inputBg,\r\n            border: isOutlined ? 'none' : (\r\n              hasError\r\n                ? `${tokens.borders.width.medium} solid ${tokens.colors.status.critical}`\r\n                : focusedIndex === i\r\n                  ? `${tokens.borders.width.medium} solid ${tokens.colors.accent.primary}`\r\n                  : chars[i]\r\n                    ? `${tokens.borders.width.medium} solid ${tokens.colors.border.default}`\r\n                    : `${tokens.borders.width.medium} solid ${tokens.colors.border.muted}`\r\n            ),\r\n            borderRadius: isOutlined ? 0 : tokens.borderRadius.md,\r\n            outline: 'none',\r\n            transition: tokens.animation.fast,\r\n            opacity: disabled ? 0.5 : 1,\r\n            cursor: disabled ? 'not-allowed' : 'text',\r\n            ...(!isOutlined && focusedIndex === i ? {\r\n              boxShadow: tokens.borders.focusRing.subtle,\r\n            } : {}),\r\n          }}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n  \r\n  return (\r\n    <div style={{\r\n      fontFamily: tokens.typography.fontFamily.primary,\r\n      width: fullWidth ? '100%' : undefined,\r\n    }}>\r\n      {/* Label: 'above' variant */}\r\n      {label && !isOutlined && (\r\n        <div style={{\r\n          fontSize: tokens.typography.fontSize.xs,\r\n          fontWeight: tokens.typography.fontWeight.medium,\r\n          color: tokens.colors.text.secondary,\r\n          letterSpacing: tokens.typography.letterSpacing.wide,\r\n          marginBottom: tokens.spacing.xs,\r\n        }}>\r\n          {labelContent}\r\n        </div>\r\n      )}\r\n      \r\n      {/* Outlined variant: wrap cells in a bordered container with the label on the border */}\r\n      {isOutlined ? (\r\n        <div style={{\r\n          position: 'relative',\r\n          width: fullWidth ? '100%' : undefined,\r\n          minHeight: controlHeight,\r\n          border: hasError\r\n            ? tokens.borders.input.error\r\n            : isFocused\r\n              ? tokens.borders.input.focus\r\n              : tokens.borders.input.default,\r\n          borderRadius: tokens.borderRadius.md,\r\n          padding: `0 ${tokens.spacing.sm}`,\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          backgroundColor: inputBg,\r\n          transition: tokens.animation.fast,\r\n          boxSizing: 'border-box',\r\n          ...(isFocused ? {\r\n            boxShadow: tokens.borders.focusRing.subtle,\r\n          } : {}),\r\n        }}>\r\n          {label && (\r\n            <div style={{\r\n              position: 'absolute',\r\n              top: 0,\r\n              left: outlinedLabelLeftMap[size],\r\n              transform: 'translateY(-50%)',\r\n              backgroundColor: labelBg,\r\n              padding: `0 ${tokens.spacing.xs}`,\r\n              fontSize: outlinedLabelSizeMap[size],\r\n              fontWeight: tokens.typography.fontWeight.medium,\r\n              color: isFocused\r\n                ? (hasError ? tokens.colors.status.critical : tokens.colors.accent.primary)\r\n                : hasError\r\n                  ? tokens.colors.status.critical\r\n                  : tokens.colors.text.secondary,\r\n              letterSpacing: tokens.typography.letterSpacing.wide,\r\n              zIndex: 1,\r\n              pointerEvents: 'none',\r\n              transition: tokens.animation.fast,\r\n              lineHeight: 1.2,\r\n              whiteSpace: 'nowrap',\r\n            }}>\r\n              {labelContent}\r\n            </div>\r\n          )}\r\n          {cellsEl}\r\n        </div>\r\n      ) : (\r\n        cellsEl\r\n      )}\r\n      \r\n      {(helperText || errorMessage) && (\r\n        <div\r\n          id={errorMessage ? 'zendir-pin-error' : 'zendir-pin-helper'}\r\n          role={errorMessage ? 'alert' : undefined}\r\n          style={{\r\n            fontSize: tokens.typography.fontSize.xs,\r\n            color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary,\r\n            marginTop: tokens.spacing.xs,\r\n          }}\r\n        >\r\n          {errorMessage || helperText}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\nexport default PinInput;\r\n"],"names":["PinInput","newValue"],"mappings":"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"}
+{"version":3,"file":"PinInput.js","names":[],"sources":["../../../../src/react/core/inputs/PinInput.tsx"],"sourcesContent":["/**\n * @zendir/ui - PinInput Component\n *\n * Multi-character code entry for passwords, verification codes, and team IDs.\n * Auto-advances focus between cells. Supports numeric and alphanumeric modes.\n *\n * Astro UX Compliance:\n * - Consistent styling with Input component\n * - Focus ring for accessibility\n * - Monospace tabular numbers\n *\n * @example\n * ```tsx\n * <PinInput length={6} type=\"alphanumeric\" value={password} onChange={setPassword} label=\"Team Password\" />\n * <PinInput length={4} type=\"numeric\" value={code} onChange={setCode} label=\"Verification Code\" />\n * <PinInput length={8} value={token} onChange={setToken} label=\"API Token\" />\n * ```\n */\n\nimport React, { memo, useState, useRef, useCallback, useEffect } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport type { LabelPlacement } from \"./Input\";\nimport { useBreakpoint } from \"../layout/useBreakpoint\";\n\nexport interface PinInputProps {\n  /** Number of character cells (default 6; any positive number, e.g. 4, 6, 8) */\n  length?: number;\n  /** Input type */\n  type?: \"numeric\" | \"alphanumeric\";\n  /** Current value */\n  value: string;\n  /** Change handler */\n  onChange: (value: string) => void;\n  /** Label text or ReactNode (supports rich content like tooltip icons) */\n  label?: React.ReactNode;\n  /** Helper text */\n  helperText?: string;\n  /** Error state */\n  error?: boolean | string;\n  /** Disabled */\n  disabled?: boolean;\n  /** Mask characters (password mode) */\n  mask?: boolean;\n  /** Size */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Auto-focus first cell on mount */\n  autoFocus?: boolean;\n  /** Callback when all cells filled */\n  onComplete?: (value: string) => void;\n  /**\n   * Label placement style.\n   * - `'outlined'` — label sits on the border of a surrounding container. **Default.**\n   * - `'above'`    — label sits above the cells with a gap (classic stack).\n   */\n  labelPlacement?: LabelPlacement;\n  /** Required indicator */\n  required?: boolean;\n  /** Stretch to full width of container (cells share width equally, same as standard inputs) */\n  fullWidth?: boolean;\n}\n\nexport const PinInput = memo(function PinInput({\n  length = 6,\n  type = \"alphanumeric\",\n  value,\n  onChange,\n  label,\n  helperText,\n  error,\n  disabled = false,\n  mask = false,\n  size = \"medium\",\n  autoFocus = false,\n  onComplete,\n  labelPlacement = \"outlined\",\n  required,\n  fullWidth = false,\n}: PinInputProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const { isMobile } = useBreakpoint();\n  const isTransparentTheme =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    theme === \"transparent-minimal\";\n  const refs = useRef<(HTMLInputElement | null)[]>([]);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n  const chars = value.split(\"\").concat(Array(length).fill(\"\")).slice(0, length);\n\n  useEffect(() => {\n    if (autoFocus && refs.current[0]) {\n      refs.current[0].focus();\n    }\n  }, [autoFocus]);\n\n  // Between original tokens and the reduced set: slightly more height than 24/32/40, still less than 28/36/44\n  const reducedHeight =\n    size === \"small\" ? \"26px\" : size === \"medium\" ? \"34px\" : \"42px\";\n  const controlHeight = isMobile ? \"44px\" : reducedHeight;\n  const sizeConfig = {\n    small: { fontSize: tokens.typography.fontSize.xs },\n    medium: { fontSize: tokens.typography.fontSize.sm },\n    large: { fontSize: tokens.typography.fontSize.base },\n  };\n  const config = { ...sizeConfig[size], height: controlHeight } as {\n    height: string;\n    fontSize: string;\n  };\n\n  const isValid = (char: string): boolean => {\n    if (type === \"numeric\") return /^[0-9]$/.test(char);\n    return /^[a-zA-Z0-9]$/.test(char);\n  };\n\n  const handleChange = useCallback(\n    (index: number, inputValue: string) => {\n      // Handle paste (multiple characters). Strip spaces so pasted codes like \"12 34 56\" work.\n      if (inputValue.length > 1) {\n        const normalized = inputValue.replace(/\\s/g, \"\");\n        const filtered = normalized.split(\"\").filter(isValid).slice(0, length);\n        const newValue = filtered.join(\"\");\n        onChange(newValue);\n        const nextIndex = Math.min(filtered.length, length - 1);\n        refs.current[nextIndex]?.focus();\n        if (filtered.length === length) onComplete?.(newValue);\n        return;\n      }\n\n      const char = inputValue;\n      if (char && !isValid(char)) return;\n\n      const newChars = [...chars];\n      newChars[index] = char.toUpperCase();\n      const newValue = newChars.join(\"\").replace(/\\s/g, \"\");\n      onChange(newValue);\n\n      // Auto-advance\n      if (char && index < length - 1) {\n        refs.current[index + 1]?.focus();\n      }\n\n      if (newValue.length === length) {\n        onComplete?.(newValue);\n      }\n    },\n    [chars, length, onChange, onComplete, type],\n  );\n\n  const handleKeyDown = useCallback(\n    (index: number, e: React.KeyboardEvent) => {\n      if (e.key === \"Backspace\") {\n        if (!chars[index] && index > 0) {\n          refs.current[index - 1]?.focus();\n          const newChars = [...chars];\n          newChars[index - 1] = \"\";\n          onChange(newChars.join(\"\"));\n        }\n      } else if (e.key === \"ArrowLeft\" && index > 0) {\n        refs.current[index - 1]?.focus();\n      } else if (e.key === \"ArrowRight\" && index < length - 1) {\n        refs.current[index + 1]?.focus();\n      }\n    },\n    [chars, length, onChange],\n  );\n\n  const hasError = !!error;\n  const errorMessage = typeof error === \"string\" ? error : undefined;\n\n  const inputBg = isTransparentTheme\n    ? tokens.colors.interactive.transparentInputBg || \"rgba(139, 92, 246, 0.08)\"\n    : tokens.colors.background.surface;\n\n  const isOutlined = labelPlacement === \"outlined\";\n  const isFocused = focusedIndex !== null;\n\n  // Background for the outlined label \"notch\"\n  const labelBg = isTransparentTheme\n    ? tokens.colors.background.base\n    : tokens.colors.background.surface;\n\n  // Outlined label font sizes\n  const outlinedLabelSizeMap = {\n    small: \"0.625rem\",\n    medium: \"0.6875rem\",\n    large: \"0.75rem\",\n  };\n  // Container always uses spacing.sm (8px) horizontal padding, so label left is always 8-6=2px\n  const outlinedLabelLeftMap = { small: \"2px\", medium: \"2px\", large: \"2px\" };\n\n  // Shared label content\n  const labelContent = (\n    <>\n      {label}\n      {required && (\n        <span\n          style={{ color: tokens.colors.status.critical, marginLeft: \"2px\" }}\n        >\n          *\n        </span>\n      )}\n    </>\n  );\n\n  // Cells renderer: fullWidth = cells share space (same total width as standard inputs); otherwise fixed square cells\n  const cellsEl = (\n    <div\n      style={{\n        display: \"flex\",\n        gap: tokens.spacing.xs,\n        width: fullWidth ? \"100%\" : undefined,\n      }}\n    >\n      {Array.from({ length }, (_, i) => (\n        <input\n          key={i}\n          ref={(el) => {\n            refs.current[i] = el;\n          }}\n          type={mask ? \"password\" : \"text\"}\n          inputMode={type === \"numeric\" ? \"numeric\" : \"text\"}\n          maxLength={1}\n          value={chars[i] || \"\"}\n          onChange={(e) => handleChange(i, e.target.value)}\n          onKeyDown={(e) => handleKeyDown(i, e)}\n          onFocus={() => setFocusedIndex(i)}\n          onBlur={() => setFocusedIndex(null)}\n          onPaste={(e) => {\n            e.preventDefault();\n            handleChange(i, e.clipboardData.getData(\"text\"));\n          }}\n          disabled={disabled}\n          aria-label={`Character ${i + 1} of ${length}`}\n          aria-invalid={hasError || undefined}\n          aria-describedby={\n            errorMessage\n              ? \"zendir-pin-error\"\n              : helperText\n                ? \"zendir-pin-helper\"\n                : undefined\n          }\n          style={{\n            ...(fullWidth\n              ? { flex: 1, minWidth: 0 }\n              : { width: controlHeight }),\n            height: config.height,\n            textAlign: \"center\",\n            fontSize: config.fontSize,\n            fontWeight: tokens.typography.fontWeight.bold,\n            fontFamily: tokens.typography.fontFamily.mono,\n            fontVariantNumeric: \"tabular-nums\",\n            color: tokens.colors.text.primary,\n            backgroundColor: isOutlined ? \"transparent\" : inputBg,\n            border: isOutlined\n              ? \"none\"\n              : hasError\n                ? `${tokens.borders.width.medium} solid ${tokens.colors.status.critical}`\n                : focusedIndex === i\n                  ? `${tokens.borders.width.medium} solid ${tokens.colors.accent.primary}`\n                  : chars[i]\n                    ? `${tokens.borders.width.medium} solid ${tokens.colors.border.default}`\n                    : `${tokens.borders.width.medium} solid ${tokens.colors.border.muted}`,\n            borderRadius: isOutlined ? 0 : tokens.borderRadius.md,\n            outline: \"none\",\n            transition: tokens.animation.fast,\n            opacity: disabled ? 0.5 : 1,\n            cursor: disabled ? \"not-allowed\" : \"text\",\n            ...(!isOutlined && focusedIndex === i\n              ? {\n                  boxShadow: tokens.borders.focusRing.subtle,\n                }\n              : {}),\n          }}\n        />\n      ))}\n    </div>\n  );\n\n  return (\n    <div\n      style={{\n        fontFamily: tokens.typography.fontFamily.primary,\n        width: fullWidth ? \"100%\" : undefined,\n      }}\n    >\n      {/* Label: 'above' variant */}\n      {label && !isOutlined && (\n        <div\n          style={{\n            fontSize: tokens.typography.fontSize.xs,\n            fontWeight: tokens.typography.fontWeight.medium,\n            color: tokens.colors.text.secondary,\n            letterSpacing: tokens.typography.letterSpacing.wide,\n            marginBottom: tokens.spacing.xs,\n          }}\n        >\n          {labelContent}\n        </div>\n      )}\n\n      {/* Outlined variant: wrap cells in a bordered container with the label on the border */}\n      {isOutlined ? (\n        <div\n          style={{\n            position: \"relative\",\n            width: fullWidth ? \"100%\" : undefined,\n            minHeight: controlHeight,\n            border: hasError\n              ? tokens.borders.input.error\n              : isFocused\n                ? tokens.borders.input.focus\n                : tokens.borders.input.default,\n            borderRadius: tokens.borderRadius.md,\n            padding: `0 ${tokens.spacing.sm}`,\n            display: \"flex\",\n            alignItems: \"center\",\n            backgroundColor: inputBg,\n            transition: tokens.animation.fast,\n            boxSizing: \"border-box\",\n            ...(isFocused\n              ? {\n                  boxShadow: tokens.borders.focusRing.subtle,\n                }\n              : {}),\n          }}\n        >\n          {label && (\n            <div\n              style={{\n                position: \"absolute\",\n                top: 0,\n                left: outlinedLabelLeftMap[size],\n                transform: \"translateY(-50%)\",\n                backgroundColor: labelBg,\n                padding: `0 ${tokens.spacing.xs}`,\n                fontSize: outlinedLabelSizeMap[size],\n                fontWeight: tokens.typography.fontWeight.medium,\n                color: isFocused\n                  ? hasError\n                    ? tokens.colors.status.critical\n                    : tokens.colors.accent.primary\n                  : hasError\n                    ? tokens.colors.status.critical\n                    : tokens.colors.text.secondary,\n                letterSpacing: tokens.typography.letterSpacing.wide,\n                zIndex: 1,\n                pointerEvents: \"none\",\n                transition: tokens.animation.fast,\n                lineHeight: 1.2,\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {labelContent}\n            </div>\n          )}\n          {cellsEl}\n        </div>\n      ) : (\n        cellsEl\n      )}\n\n      {(helperText || errorMessage) && (\n        <div\n          id={errorMessage ? \"zendir-pin-error\" : \"zendir-pin-helper\"}\n          role={errorMessage ? \"alert\" : undefined}\n          style={{\n            fontSize: tokens.typography.fontSize.xs,\n            color: hasError\n              ? tokens.colors.status.critical\n              : tokens.colors.text.tertiary,\n            marginTop: tokens.spacing.xs,\n          }}\n        >\n          {errorMessage || helperText}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default PinInput;\n"],"mappings":"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"}

package/dist/react/core/inputs/Select.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { LabelPlacement } from './Input';
-
 export interface SelectOption {
     value: string;
     label: string;
@@ -26,7 +25,7 @@ export interface SelectProps {
     /** Full width */
     fullWidth?: boolean;
     /** Size variant */
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     /** Custom className */
     className?: string;
     /**