@zendir/ui 0.4.1 → 0.6.0

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

@@ -1,288 +1,280 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { memo, forwardRef, useState, useId } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-import { safeAccentText, classNames } from "../../utils/index.js";
+import { classNames, safeAccentText } from "../../utils/index.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
-const Input = memo(forwardRef(function Input2({
-  label,
-  helperText,
-  error,
-  size = "medium",
-  status,
-  icon,
-  iconEnd,
-  fullWidth = false,
-  required,
-  optional,
-  disabled,
-  className = "",
-  id: propId,
-  style,
-  onFocus,
-  onBlur,
-  labelPlacement = "outlined",
-  type = "text",
-  autoComplete,
-  inputMode,
-  onPaste: onPasteUser,
-  ...rest
-}, ref) {
-  const resolvedInputMode = inputMode ?? (type === "email" ? "email" : void 0);
-  const { tokens, theme } = useTheme();
-  const { isMobile } = useBreakpoint();
-  const [focused, setFocused] = useState(false);
-  const [hovered, setHovered] = useState(false);
-  const generatedId = useId();
-  const inputId = propId ?? generatedId;
-  const shouldTrimOnPaste = type === "password" || type === "email" || autoComplete === "email" || autoComplete === "username";
-  const handlePaste = (e) => {
-    var _a;
-    if (shouldTrimOnPaste) {
-      const pasted = e.clipboardData.getData("text");
-      const trimmed = pasted.trim();
-      if (trimmed !== pasted) {
-        e.preventDefault();
-        const input = e.currentTarget;
-        const start = input.selectionStart ?? 0;
-        const end = input.selectionEnd ?? 0;
-        const cur = rest.value ?? input.value ?? "";
-        const newValue = cur.slice(0, start) + trimmed + cur.slice(end);
-        (_a = rest.onChange) == null ? void 0 : _a.call(rest, { target: { ...input, value: newValue } });
-        requestAnimationFrame(() => {
-          input.setSelectionRange(start + trimmed.length, start + trimmed.length);
-        });
-      }
-    }
-    onPasteUser == null ? void 0 : onPasteUser(e);
-  };
-  const shouldTrimOnBlur = type === "email" || autoComplete === "email" || autoComplete === "username";
-  const handleBlur = (e) => {
-    if (shouldTrimOnBlur) {
-      const input = e.currentTarget;
-      const cur = input.value;
-      const trimmed = cur.trim();
-      if (trimmed !== cur && rest.onChange) {
-        rest.onChange({ target: { ...input, value: trimmed } });
-      }
-    }
-    setFocused(false);
-    onBlur == null ? void 0 : onBlur(e);
-  };
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  tokens.colors.interactive.transparentInputBg;
-  const hasError = !!error;
-  const isOutlined = labelPlacement === "outlined";
-  const getBorder = () => {
-    if (hasError) return tokens.borders.input.error;
-    if (status) return `${tokens.borders.width.thin} solid ${tokens.colors.status[status]}`;
-    if (focused) return tokens.borders.input.focus;
-    if (hovered && !disabled) return tokens.borders.input.hover;
-    return tokens.borders.input.default;
-  };
-  const sizeConfig = {
-    small: {
-      padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-      fontSize: tokens.typography.fontSize.xs,
-      height: tokens.elementSize.sm,
-      iconSize: 14,
-      labelSize: "0.6875rem",
-      outlinedLabelSize: "0.625rem",
-      inputPaddingLeft: 10
-    },
-    medium: {
-      padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
-      fontSize: tokens.typography.fontSize.sm,
-      height: tokens.elementSize.md,
-      iconSize: 18,
-      labelSize: "0.75rem",
-      outlinedLabelSize: "0.6875rem",
-      inputPaddingLeft: 12
-    },
-    large: {
-      padding: `${tokens.spacing.smd} ${tokens.spacing.md}`,
-      fontSize: tokens.typography.fontSize.base,
-      height: tokens.elementSize.lg,
-      iconSize: 20,
-      labelSize: "0.875rem",
-      outlinedLabelSize: "0.75rem",
-      inputPaddingLeft: 16
-    }
-  };
-  const config = sizeConfig[size];
-  const controlHeight = isMobile ? "44px" : config.height;
-  const focusGlow = focused && !hasError ? tokens.borders.focusRing.default : hasError && focused ? `0 0 0 3px ${tokens.colors.status.critical}20` : "none";
-  const labelBg = isTransparentTheme ? tokens.colors.background.base : tokens.colors.background.surface;
-  const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    label,
-    required && /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.status.critical, marginLeft: "2px" }, children: "*" }),
-    optional && /* @__PURE__ */ jsxs("span", { style: {
-      color: tokens.colors.text.tertiary,
-      fontWeight: 400,
-      fontStyle: "italic"
-    }, children: [
-      " ",
-      "(optional)"
-    ] })
-  ] });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("zendir-input-wrapper", className),
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: tokens.spacing.xs,
-        width: fullWidth ? "100%" : "auto",
-        minWidth: fullWidth ? void 0 : isMobile ? "100%" : "200px",
-        ...style
-      },
-      children: [
-        label && !isOutlined && /* @__PURE__ */ jsx(
-          "label",
-          {
-            htmlFor: inputId,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: tokens.spacing.xs,
-              fontSize: config.labelSize,
-              fontWeight: 500,
-              color: tokens.colors.text.secondary,
-              letterSpacing: "0.01em"
-            },
-            children: labelContent
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "relative",
-              display: "flex",
-              alignItems: "center"
-            },
-            onMouseEnter: () => setHovered(true),
-            onMouseLeave: () => setHovered(false),
-            children: [
-              label && isOutlined && /* @__PURE__ */ jsx(
-                "label",
-                {
-                  htmlFor: inputId,
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    left: icon ? "34px" : `${config.inputPaddingLeft - 6}px`,
-                    transform: "translateY(-50%)",
-                    backgroundColor: labelBg,
-                    padding: `0 ${tokens.spacing.xs}`,
-                    fontSize: config.outlinedLabelSize,
-                    fontWeight: 500,
-                    color: focused ? hasError ? tokens.colors.status.critical : tokens.colors.accent.primary : hasError ? tokens.colors.status.critical : tokens.colors.text.secondary,
-                    letterSpacing: "0.01em",
-                    zIndex: 1,
-                    pointerEvents: "none",
-                    transition: "color 200ms cubic-bezier(0.4, 0, 0.2, 1)",
-                    lineHeight: 1.2,
-                    whiteSpace: "nowrap"
-                  },
-                  children: labelContent
-                }
-              ),
-              icon && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    position: "absolute",
-                    left: tokens.spacing.smd,
-                    display: "flex",
-                    alignItems: "center",
-                    color: focused ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.tertiary,
-                    pointerEvents: "none",
-                    transition: tokens.animation.fast
-                  },
-                  children: icon
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref,
-                  id: inputId,
-                  disabled,
-                  required,
-                  "aria-invalid": hasError,
-                  "aria-describedby": helperText || error ? `${inputId}-helper` : void 0,
-                  onFocus: (e) => {
-                    setFocused(true);
-                    onFocus == null ? void 0 : onFocus(e);
-                  },
-                  onBlur: handleBlur,
-                  onPaste: handlePaste,
-                  type,
-                  autoComplete,
-                  inputMode: resolvedInputMode,
-                  style: {
-                    width: "100%",
-                    height: controlHeight,
-                    padding: config.padding,
-                    paddingLeft: icon ? "40px" : config.padding,
-                    paddingRight: iconEnd ? "40px" : config.padding,
-                    fontSize: config.fontSize,
-                    fontFamily: tokens.typography.fontFamily.primary,
-                    color: tokens.colors.text.primary,
-                    backgroundColor: isTransparentTheme ? "rgba(10, 15, 25, 0.4)" : tokens.colors.background.surface,
-                    border: getBorder(),
-                    borderRadius: tokens.borderRadius.md,
-                    outline: "none",
-                    transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
-                    cursor: disabled ? "not-allowed" : "text",
-                    opacity: disabled ? 0.5 : 1,
-                    boxShadow: focusGlow
-                  },
-                  ...rest
-                }
-              ),
-              iconEnd && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    position: "absolute",
-                    right: tokens.spacing.smd,
-                    display: "flex",
-                    alignItems: "center",
-                    color: tokens.colors.text.tertiary,
-                    cursor: "pointer"
-                  },
-                  children: iconEnd
-                }
-              )
-            ]
-          }
-        ),
-        (helperText || error) && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            id: `${inputId}-helper`,
-            role: hasError ? "alert" : void 0,
-            style: {
-              fontSize: "0.6875rem",
-              fontWeight: hasError ? 500 : 400,
-              color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary,
-              display: "flex",
-              alignItems: "center",
-              gap: tokens.spacing.xs
-            },
-            children: [
-              hasError && /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: tokens.colors.status.critical, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) }),
-              error || helperText
-            ]
-          }
-        )
-      ]
-    }
-  );
+import { forwardRef, memo, useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/inputs/Input.tsx
+/**
+* @zendir/ui - Input Component
+*
+* Text input field following Astro UX Design System with Zendir purple accents.
+*
+* Astro UX Compliance:
+* - Stacked inputs left-justified
+* - Consistent spacing
+* - Help text for validation (not placeholder)
+* - Required/optional indicators
+* - States: default, hover, focus, invalid, disabled
+*
+* Zendir Enhancements:
+* - Purple focus glow
+* - Smooth transitions
+* - Modern glassmorphism effects
+*
+* @example
+* ```tsx
+* <Input label="Spacecraft ID" placeholder="Enter ID..." />
+* <Input label="Password" type="password" />
+* <Input label="Search" icon={<Icon name="search" />} />
+* <Input label="Email" error="Invalid email format" />
+* ```
+*/
+var Input = memo(forwardRef(function Input({ label, helperText, error, size = "medium", status, icon, iconEnd, fullWidth = false, required, optional, disabled, className = "", id: propId, style, onFocus, onBlur, labelPlacement = "outlined", type = "text", autoComplete, inputMode, onPaste: onPasteUser, ...rest }, ref) {
+	const resolvedInputMode = inputMode ?? (type === "email" ? "email" : void 0);
+	const { tokens, theme } = useTheme();
+	const { isMobile } = useBreakpoint();
+	const [focused, setFocused] = useState(false);
+	const [hovered, setHovered] = useState(false);
+	const generatedId = useId();
+	const inputId = propId ?? generatedId;
+	const shouldTrimOnPaste = type === "password" || type === "email" || autoComplete === "email" || autoComplete === "username";
+	const handlePaste = (e) => {
+		if (shouldTrimOnPaste) {
+			const pasted = e.clipboardData.getData("text");
+			const trimmed = pasted.trim();
+			if (trimmed !== pasted) {
+				e.preventDefault();
+				const input = e.currentTarget;
+				const start = input.selectionStart ?? 0;
+				const end = input.selectionEnd ?? 0;
+				const cur = rest.value ?? input.value ?? "";
+				const newValue = cur.slice(0, start) + trimmed + cur.slice(end);
+				rest.onChange?.({ target: {
+					...input,
+					value: newValue
+				} });
+				requestAnimationFrame(() => {
+					input.setSelectionRange(start + trimmed.length, start + trimmed.length);
+				});
+			}
+		}
+		onPasteUser?.(e);
+	};
+	const shouldTrimOnBlur = type === "email" || autoComplete === "email" || autoComplete === "username";
+	const handleBlur = (e) => {
+		if (shouldTrimOnBlur) {
+			const input = e.currentTarget;
+			const cur = input.value;
+			const trimmed = cur.trim();
+			if (trimmed !== cur && rest.onChange) rest.onChange({ target: {
+				...input,
+				value: trimmed
+			} });
+		}
+		setFocused(false);
+		onBlur?.(e);
+	};
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	tokens.colors.interactive.transparentInputBg;
+	const hasError = !!error;
+	const isOutlined = labelPlacement === "outlined";
+	const getBorder = () => {
+		if (hasError) return tokens.borders.input.error;
+		if (status) return `${tokens.borders.width.thin} solid ${tokens.colors.status[status]}`;
+		if (focused) return tokens.borders.input.focus;
+		if (hovered && !disabled) return tokens.borders.input.hover;
+		return tokens.borders.input.default;
+	};
+	const config = {
+		small: {
+			padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+			fontSize: tokens.typography.fontSize.xs,
+			height: tokens.elementSize.sm,
+			iconSize: 14,
+			labelSize: "0.6875rem",
+			outlinedLabelSize: "0.625rem",
+			inputPaddingLeft: 10
+		},
+		medium: {
+			padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+			fontSize: tokens.typography.fontSize.sm,
+			height: tokens.elementSize.md,
+			iconSize: 18,
+			labelSize: "0.75rem",
+			outlinedLabelSize: "0.6875rem",
+			inputPaddingLeft: 12
+		},
+		large: {
+			padding: `${tokens.spacing.smd} ${tokens.spacing.md}`,
+			fontSize: tokens.typography.fontSize.base,
+			height: tokens.elementSize.lg,
+			iconSize: 20,
+			labelSize: "0.875rem",
+			outlinedLabelSize: "0.75rem",
+			inputPaddingLeft: 16
+		}
+	}[size];
+	const controlHeight = isMobile ? "44px" : config.height;
+	const focusGlow = focused && !hasError ? tokens.borders.focusRing.default : hasError && focused ? `0 0 0 3px ${tokens.colors.status.critical}20` : "none";
+	const labelBg = isTransparentTheme ? tokens.colors.background.base : tokens.colors.background.surface;
+	const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+		label,
+		required && /* @__PURE__ */ jsx("span", {
+			style: {
+				color: tokens.colors.status.critical,
+				marginLeft: "2px"
+			},
+			children: "*"
+		}),
+		optional && /* @__PURE__ */ jsxs("span", {
+			style: {
+				color: tokens.colors.text.tertiary,
+				fontWeight: 400,
+				fontStyle: "italic"
+			},
+			children: [" ", "(optional)"]
+		})
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-input-wrapper", className),
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: tokens.spacing.xs,
+			width: fullWidth ? "100%" : "auto",
+			minWidth: fullWidth ? void 0 : isMobile ? "100%" : "200px",
+			...style
+		},
+		children: [
+			label && !isOutlined && /* @__PURE__ */ jsx("label", {
+				htmlFor: inputId,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.xs,
+					fontSize: config.labelSize,
+					fontWeight: 500,
+					color: tokens.colors.text.secondary,
+					letterSpacing: "0.01em"
+				},
+				children: labelContent
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "relative",
+					display: "flex",
+					alignItems: "center"
+				},
+				onMouseEnter: () => setHovered(true),
+				onMouseLeave: () => setHovered(false),
+				children: [
+					label && isOutlined && /* @__PURE__ */ jsx("label", {
+						htmlFor: inputId,
+						style: {
+							position: "absolute",
+							top: 0,
+							left: icon ? "34px" : `${config.inputPaddingLeft - 6}px`,
+							transform: "translateY(-50%)",
+							backgroundColor: labelBg,
+							padding: `0 ${tokens.spacing.xs}`,
+							fontSize: config.outlinedLabelSize,
+							fontWeight: 500,
+							color: focused ? hasError ? tokens.colors.status.critical : tokens.colors.accent.primary : hasError ? tokens.colors.status.critical : tokens.colors.text.secondary,
+							letterSpacing: "0.01em",
+							zIndex: 1,
+							pointerEvents: "none",
+							transition: "color 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+							lineHeight: 1.2,
+							whiteSpace: "nowrap"
+						},
+						children: labelContent
+					}),
+					icon && /* @__PURE__ */ jsx("span", {
+						style: {
+							position: "absolute",
+							left: tokens.spacing.smd,
+							display: "flex",
+							alignItems: "center",
+							color: focused ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.tertiary,
+							pointerEvents: "none",
+							transition: tokens.animation.fast
+						},
+						children: icon
+					}),
+					/* @__PURE__ */ jsx("input", {
+						ref,
+						id: inputId,
+						disabled,
+						required,
+						"aria-invalid": hasError,
+						"aria-describedby": helperText || error ? `${inputId}-helper` : void 0,
+						onFocus: (e) => {
+							setFocused(true);
+							onFocus?.(e);
+						},
+						onBlur: handleBlur,
+						onPaste: handlePaste,
+						type,
+						autoComplete,
+						inputMode: resolvedInputMode,
+						style: {
+							width: "100%",
+							height: controlHeight,
+							padding: config.padding,
+							paddingLeft: icon ? "40px" : config.padding,
+							paddingRight: iconEnd ? "40px" : config.padding,
+							fontSize: config.fontSize,
+							fontFamily: tokens.typography.fontFamily.primary,
+							color: tokens.colors.text.primary,
+							backgroundColor: isTransparentTheme ? "rgba(10, 15, 25, 0.4)" : tokens.colors.background.surface,
+							border: getBorder(),
+							borderRadius: tokens.borderRadius.md,
+							outline: "none",
+							transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+							cursor: disabled ? "not-allowed" : "text",
+							opacity: disabled ? .5 : 1,
+							boxShadow: focusGlow
+						},
+						...rest
+					}),
+					iconEnd && /* @__PURE__ */ jsx("span", {
+						style: {
+							position: "absolute",
+							right: tokens.spacing.smd,
+							display: "flex",
+							alignItems: "center",
+							color: tokens.colors.text.tertiary,
+							cursor: "pointer"
+						},
+						children: iconEnd
+					})
+				]
+			}),
+			(helperText || error) && /* @__PURE__ */ jsxs("span", {
+				id: `${inputId}-helper`,
+				role: hasError ? "alert" : void 0,
+				style: {
+					fontSize: "0.6875rem",
+					fontWeight: hasError ? 500 : 400,
+					color: hasError ? tokens.colors.status.critical : tokens.colors.text.tertiary,
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.xs
+				},
+				children: [hasError && /* @__PURE__ */ jsx("svg", {
+					width: "12",
+					height: "12",
+					viewBox: "0 0 24 24",
+					fill: tokens.colors.status.critical,
+					"aria-hidden": "true",
+					focusable: "false",
+					children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
+				}), error || helperText]
+			})
+		]
+	});
 }));
-export {
-  Input
-};
-//# sourceMappingURL=Input.js.map
+//#endregion
+export { Input, Input as default };
+
+//# sourceMappingURL=Input.js.map