@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/TextField/index.js

@@ -1,13 +1,690 @@
+"use client";
 'use strict';
 
-var chunk4DU5JSXB_js = require('../../chunk-4DU5JSXB.js');
-require('../../chunk-3YOY2VJ6.js');
-require('../../chunk-Y3GT7ETK.js');
-require('../../chunk-B5Q4UPL6.js');
-require('../../chunk-VIREG536.js');
-var chunkT4COXKQ3_js = require('../../chunk-T4COXKQ3.js');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
 var zod = require('zod');
 
+// src/elements/TextField/TextField.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
+var HOVER_STYLES = "data-[hovered]:shadow-md";
+var HIGH_CONTRAST_HOVER = "hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground";
+var HIGH_CONTRAST_PRESSED = "hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";
+var DISABLED_STYLES = "disabled:pointer-events-none disabled:opacity-50";
+var ButtonGroupContext = react.createContext(null);
+ButtonGroupContext.displayName = "ButtonGroupContext";
+function useButtonGroupContext() {
+  return react.useContext(ButtonGroupContext);
+}
+var ButtonGroupItemContext = react.createContext(null);
+ButtonGroupItemContext.displayName = "ButtonGroupItemContext";
+function useButtonGroupItemContext() {
+  return react.useContext(ButtonGroupItemContext);
+}
+classVarianceAuthority.cva("inline-flex items-center gap-0", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col w-full"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var buttonGroupItemVariants = classVarianceAuthority.cva("", {
+  variants: {
+    orientation: {
+      // min-w-[44px] ensures visual layer fills touch target width (for icon buttons)
+      horizontal: "min-w-[44px]",
+      // flex (overrides inline-flex) + min-h-[44px] makes visual layer fill touch target,
+      // eliminating gaps between stacked buttons in vertical orientation
+      vertical: "flex min-h-[44px]"
+    },
+    position: {
+      first: "",
+      middle: "",
+      last: "",
+      only: ""
+      // Single button - no modifications needed
+    }
+  },
+  compoundVariants: [
+    // ==========================================================================
+    // Horizontal Orientation
+    // ==========================================================================
+    {
+      orientation: "horizontal",
+      position: "first",
+      className: "rounded-r-none border-r-0"
+    },
+    {
+      orientation: "horizontal",
+      position: "middle",
+      className: "rounded-none border-r-0"
+    },
+    {
+      orientation: "horizontal",
+      position: "last",
+      className: "rounded-l-none"
+    },
+    // ==========================================================================
+    // Vertical Orientation
+    // Note: w-full is handled by Button's effectiveFullWidth for both layers
+    // ==========================================================================
+    {
+      orientation: "vertical",
+      position: "first",
+      className: "rounded-b-none border-b-0"
+    },
+    {
+      orientation: "vertical",
+      position: "middle",
+      className: "rounded-none border-b-0"
+    },
+    {
+      orientation: "vertical",
+      position: "last",
+      className: "rounded-t-none"
+    }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    position: "only"
+  }
+});
+classVarianceAuthority.cva("bg-[var(--border)]", {
+  variants: {
+    orientation: {
+      horizontal: "w-px h-6 mx-1",
+      vertical: "h-px w-full my-1"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var buttonOuterVariants = classVarianceAuthority.cva(
+  "inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      inVerticalGroup: {
+        true: "items-stretch",
+        false: "items-center"
+      }
+    },
+    defaultVariants: {
+      fullWidth: false,
+      inVerticalGroup: false
+    }
+  }
+);
+var buttonVisualVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] data-[pressed]:bg-[var(--primary-action)]/80",
+        destructive: "bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80",
+        outline: "border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]",
+        secondary: "bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70",
+        ghost: "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]",
+        link: "text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      visualSize: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3 text-xs",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+        dot: "h-5 w-5 rounded-full p-0 min-h-0 min-w-0"
+      },
+      paywall: {
+        true: "!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      visualSize: "default",
+      paywall: false
+    }
+  }
+);
+var Button = react.memo(react.forwardRef(
+  ({
+    className,
+    buttonVisualClassName,
+    variant,
+    size,
+    visualSize,
+    fullWidth,
+    loading = false,
+    loadingText = "Loading...",
+    shortcut,
+    children,
+    isDisabled,
+    paywall = false,
+    paywallRedirect,
+    paywallDescription,
+    onPress,
+    ...props
+  }, ref) => {
+    const paywallDescriptionId = react.useId();
+    const groupContext = useButtonGroupContext();
+    const itemContext = useButtonGroupItemContext();
+    const effectiveVariant = variant ?? groupContext?.variant ?? "default";
+    const effectiveSize = size ?? groupContext?.size;
+    const effectiveIsDisabled = isDisabled ?? groupContext?.isDisabled ?? false;
+    const isInVerticalGroup = groupContext?.orientation === "vertical";
+    const effectiveFullWidth = fullWidth || isInVerticalGroup;
+    const positionClassName = itemContext ? buttonGroupItemVariants({
+      orientation: groupContext?.orientation ?? "horizontal",
+      position: itemContext.position
+    }) : "";
+    const effectiveVisualSize = visualSize ?? effectiveSize ?? "default";
+    if (process.env.NODE_ENV !== "production") {
+      if ((effectiveVisualSize === "dot" || effectiveVisualSize === "icon") && !props["aria-label"] && !children) {
+        console.warn(
+          '[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'
+        );
+      }
+    }
+    const handlePress = (e) => {
+      if (paywall) {
+        if (paywallRedirect) {
+          window.open(paywallRedirect, "_blank", "noopener,noreferrer");
+        }
+        return;
+      }
+      onPress?.(e);
+    };
+    const computedIsDisabled = effectiveIsDisabled || loading || void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Button,
+      {
+        ref,
+        isDisabled: computedIsDisabled,
+        "aria-disabled": paywall ? true : void 0,
+        "aria-describedby": paywall ? paywallDescriptionId : void 0,
+        onPress: handlePress,
+        className: cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className),
+        ...props,
+        children: (renderProps) => (
+          /* Layer 2: Visual Button */
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                buttonVisualVariants({
+                  variant: effectiveVariant,
+                  visualSize: effectiveVisualSize,
+                  paywall,
+                  fullWidth: effectiveFullWidth
+                }),
+                // Position styling from ButtonGroup context (border-radius adjustments)
+                positionClassName,
+                buttonVisualClassName,
+                // Layer 2 interaction styles (no focus - focus ring is on Layer 1)
+                PRESSED_STYLES,
+                HOVER_STYLES,
+                HIGH_CONTRAST_HOVER,
+                HIGH_CONTRAST_PRESSED
+              ),
+              "data-pressed": renderProps.isPressed || void 0,
+              children: [
+                loading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "motion-safe:animate-spin", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite", children: loadingText })
+                ] }),
+                !loading && children,
+                paywall && /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.Zap,
+                  {
+                    "data-testid": "zap-icon",
+                    "aria-hidden": "true",
+                    className: "ml-1"
+                  }
+                ),
+                paywall && /* @__PURE__ */ jsxRuntime.jsxs("span", { id: paywallDescriptionId, className: "sr-only", children: [
+                  "Premium feature: ",
+                  paywallDescription || "Upgrade required to access this feature"
+                ] }),
+                renderProps.isFocusVisible && shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "ml-auto hidden text-xs opacity-60 lg:inline", children: shortcut }),
+                renderProps.isPressed && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          )
+        )
+      }
+    );
+  }
+));
+Button.displayName = "Button";
+var inputVariants = classVarianceAuthority.cva(
+  // Base styles - FR-014: Proper input styling with focus states
+  "flex w-full rounded-md border bg-[var(--content-background)] shadow-xs px-3 py-2 text-sm ring-offset-[var(--content-background)] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--content-foreground)] placeholder:text-[var(--menu-muted)] transition-all duration-200",
+  {
+    variants: {
+      // Size variants (matching Button sizes)
+      size: {
+        sm: "h-9 text-xs px-2 py-1",
+        default: "h-10 px-3 py-2",
+        lg: "h-11 px-4 py-3 text-base"
+      },
+      // State variants
+      state: {
+        default: "border-[var(--input-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
+        error: "border-[var(--destructive-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive-background)] focus-visible:ring-offset-2",
+        success: "border-green-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2",
+        disabled: "cursor-not-allowed opacity-50",
+        readonly: "cursor-default bg-[var(--content-background)] opacity-70"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      state: "default"
+    }
+  }
+);
+var labelVariants = classVarianceAuthority.cva(
+  // Base styles - FR-009: WCAG 2.2 AAA compliance
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      state: {
+        default: "text-[var(--content-foreground)]",
+        error: "text-[var(--destructive-foreground)]",
+        disabled: "opacity-50 cursor-not-allowed"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+var descriptionVariants = classVarianceAuthority.cva(
+  "text-sm text-[var(--content-foreground)]"
+);
+var errorMessageVariants = classVarianceAuthority.cva(
+  "text-sm text-[var(--destructive-foreground)] font-medium mt-1.5"
+);
+var successMessageVariants = classVarianceAuthority.cva(
+  "text-sm text-green-600 dark:text-green-500 font-medium mt-1.5"
+);
+var TextFieldLabel = react.forwardRef(
+  ({ className, state = "default", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Label,
+      {
+        ref,
+        className: cn(labelVariants({ state }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TextFieldLabel.displayName = "TextFieldLabel";
+var TextFieldInput = react.forwardRef(
+  ({ className, size = "default", state = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Input,
+      {
+        ref,
+        className: cn(inputVariants({ size, state }), DISABLED_STYLES, className),
+        ...props
+      }
+    );
+  }
+);
+TextFieldInput.displayName = "TextFieldInput";
+var TextFieldDescription = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Text,
+      {
+        ref,
+        slot: "description",
+        className: cn(descriptionVariants(), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TextFieldDescription.displayName = "TextFieldDescription";
+var TextFieldError = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.FieldError,
+      {
+        ref,
+        ...props,
+        className: cn(errorMessageVariants(), className),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", role: "alert", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, { className: "h-4 w-4" }),
+          children
+        ] })
+      }
+    );
+  }
+);
+TextFieldError.displayName = "TextFieldError";
+var TextFieldSuccess = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Text,
+      {
+        ref,
+        slot: "description",
+        className: cn(successMessageVariants(), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TextFieldSuccess.displayName = "TextFieldSuccess";
+var TextField = react.forwardRef(
+  ({
+    className,
+    size = "default",
+    label,
+    description,
+    errorMessage,
+    successMessage,
+    type = "text",
+    isRequired = false,
+    isReadOnly = false,
+    isDisabled = false,
+    isInvalid = false,
+    isValid = false,
+    id,
+    autoComplete,
+    disableCopyPaste = false,
+    pattern,
+    patternDescription,
+    expandOnFocus = false,
+    collapsedWidth = "200px",
+    prefix,
+    suffix,
+    prefixSize = 16,
+    suffixSize = 16,
+    showPasswordToggle,
+    value,
+    defaultValue,
+    onFocus: userOnFocus,
+    onBlur: userOnBlur,
+    ...props
+  }, ref) => {
+    const errorId = react.useId();
+    const generatedId = react.useId();
+    const fieldId = id || generatedId;
+    const [isShaking, setIsShaking] = react.useState(false);
+    const [screenReaderMessage, setScreenReaderMessage] = react.useState("");
+    const [isFocused, setIsFocused] = react.useState(false);
+    const [showPassword, setShowPassword] = react.useState(false);
+    react.useEffect(() => {
+      if (disableCopyPaste && typeof process !== "undefined" && process.env.NODE_ENV === "development") {
+        console.warn(
+          "[TextField] Copy/paste prevention should only be used for security-critical fields like password confirmation. This feature can break assistive technology workflows and password managers."
+        );
+      }
+    }, [disableCopyPaste]);
+    const handlePaste = react.useCallback((e) => {
+      if (disableCopyPaste) {
+        e.preventDefault();
+        setIsShaking(true);
+        setScreenReaderMessage("Pasting is not allowed in this field. Please type your entry.");
+        setTimeout(() => {
+          setIsShaking(false);
+          setScreenReaderMessage("");
+        }, 400);
+      }
+    }, [disableCopyPaste]);
+    const handleFocus = react.useCallback((e) => {
+      if (expandOnFocus) {
+        setIsFocused(true);
+      }
+      userOnFocus?.(e);
+    }, [expandOnFocus, userOnFocus]);
+    const handleBlur = react.useCallback((e) => {
+      if (expandOnFocus) {
+        const isEmpty = e.target.value === "";
+        if (isEmpty) {
+          setIsFocused(false);
+        }
+      }
+      userOnBlur?.(e);
+    }, [expandOnFocus, userOnBlur]);
+    const inputWidth = react.useMemo(() => {
+      if (!expandOnFocus) return void 0;
+      const hasValue = value !== void 0 ? value !== "" : defaultValue !== void 0 && defaultValue !== "";
+      if (isFocused || hasValue) {
+        return "100%";
+      }
+      return collapsedWidth;
+    }, [expandOnFocus, isFocused, value, defaultValue, collapsedWidth]);
+    const inputState = react.useMemo(() => {
+      if (isDisabled) return "disabled";
+      if (isReadOnly) return "readonly";
+      if (isInvalid) return "error";
+      if (isValid) return "success";
+      return "default";
+    }, [isDisabled, isReadOnly, isInvalid, isValid]);
+    const labelState = react.useMemo(() => {
+      if (isDisabled) return "disabled";
+      if (isInvalid) return "error";
+      return "default";
+    }, [isDisabled, isInvalid]);
+    const combinedDescription = react.useMemo(() => {
+      if (description && patternDescription) {
+        return `${description} ${patternDescription}`;
+      }
+      return description || patternDescription;
+    }, [description, patternDescription]);
+    const inputPadding = react.useMemo(() => {
+      const basePadding = { left: 12, right: 12 };
+      if (prefix) {
+        const prefixWidth = typeof prefix === "string" ? prefix.length * 8 + 16 : prefixSize + 16;
+        basePadding.left = prefixWidth;
+      }
+      if (type === "password" && showPasswordToggle) {
+        basePadding.right = 16 + 16;
+      } else if (suffix) {
+        const suffixWidth = typeof suffix === "string" ? suffix.length * 8 + 16 : suffixSize + 16;
+        basePadding.right = suffixWidth;
+      }
+      return basePadding;
+    }, [prefix, suffix, prefixSize, suffixSize, type, showPasswordToggle]);
+    const actualType = react.useMemo(() => {
+      if (type === "password" && showPasswordToggle && showPassword) {
+        return "text";
+      }
+      return type;
+    }, [type, showPasswordToggle, showPassword]);
+    const handlePasswordToggle = react.useCallback(() => {
+      setShowPassword((prev) => !prev);
+    }, []);
+    const EyeIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        "data-testid": "password-toggle-icon-show",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 8s3-5 7-5 7 5 7 5-3 5-7 5-7-5-7-5z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "2" })
+        ]
+      }
+    );
+    const EyeOffIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        "data-testid": "password-toggle-icon-hide",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.5 5.5l-5 5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 8s3-5 7-5c1.5 0 2.8.6 4 1.5M15 8s-1.5 2.5-4 4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 13l2-2m7-7l2-2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "2" })
+        ]
+      }
+    );
+    const actualSuffix = react.useMemo(() => {
+      if (type === "password" && showPasswordToggle) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            visualSize: "icon",
+            onPress: handlePasswordToggle,
+            "aria-label": showPassword ? "Hide password" : "Show password",
+            className: "!min-h-0 !min-w-0 h-8 w-8",
+            children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {})
+          }
+        );
+      }
+      return suffix;
+    }, [type, showPasswordToggle, showPassword, suffix, handlePasswordToggle]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactAriaComponents.TextField,
+      {
+        ref,
+        className: cn("flex flex-col gap-1.5", className),
+        isRequired,
+        isReadOnly,
+        isDisabled,
+        isInvalid,
+        value,
+        defaultValue,
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Label, { className: cn(labelVariants({ state: labelState })), children: [
+            label,
+            isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[var(--destructive-background)]", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "*" }) })
+          ] }),
+          combinedDescription && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: cn(descriptionVariants()), children: combinedDescription }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "relative flex items-center transition-all duration-200",
+              style: {
+                width: inputWidth
+              },
+              children: [
+                prefix && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "data-testid": "textfield-prefix",
+                    className: "absolute left-3 flex items-center justify-center pointer-events-none text-[var(--content-foreground)]",
+                    "aria-hidden": "true",
+                    children: prefix
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactAriaComponents.Input,
+                  {
+                    type: actualType,
+                    id: fieldId,
+                    className: cn(
+                      inputVariants({ size, state: inputState }),
+                      DISABLED_STYLES,
+                      isShaking && "shake"
+                    ),
+                    style: {
+                      width: "100%",
+                      paddingLeft: `${inputPadding.left}px`,
+                      paddingRight: `${inputPadding.right}px`
+                    },
+                    autoComplete,
+                    pattern,
+                    onPaste: handlePaste,
+                    onFocus: handleFocus,
+                    onBlur: handleBlur,
+                    "aria-required": isRequired ? "true" : void 0,
+                    "aria-readonly": isReadOnly ? "true" : void 0,
+                    "aria-errormessage": isInvalid && errorMessage ? errorId : void 0
+                  }
+                ),
+                actualSuffix && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "data-testid": "textfield-suffix",
+                    className: cn(
+                      "absolute right-3 flex items-center justify-center text-[var(--content-foreground)]",
+                      // Password toggle is clickable, other suffixes are not
+                      type === "password" && showPasswordToggle ? "" : "pointer-events-none"
+                    ),
+                    "aria-hidden": type === "password" && showPasswordToggle ? void 0 : "true",
+                    children: actualSuffix
+                  }
+                )
+              ]
+            }
+          ),
+          isValid && successMessage && !isInvalid && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: cn(successMessageVariants()), children: successMessage }),
+          isInvalid && errorMessage && /* @__PURE__ */ jsxRuntime.jsx(TextFieldError, { id: errorId, children: errorMessage }),
+          screenReaderMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: screenReaderMessage })
+        ]
+      }
+    );
+  }
+);
+TextField.displayName = "TextField";
+var BaseComponentPropsSchema = zod.z.object({
+  // Styling
+  className: zod.z.string().optional(),
+  // React
+  children: zod.z.any().optional(),
+  // ReactNode not directly supported by Zod
+  id: zod.z.string().optional(),
+  // Accessibility (WCAG 2.2 AA requirements)
+  "aria-label": zod.z.string().optional(),
+  "aria-labelledby": zod.z.string().optional(),
+  "aria-describedby": zod.z.string().optional(),
+  "aria-live": zod.z.enum(["off", "polite", "assertive"]).optional(),
+  "aria-hidden": zod.z.boolean().optional(),
+  // Testing & Development
+  "data-testid": zod.z.string().optional()
+});
+
+// src/elements/TextField/TextField.types.ts
 var AutoCompleteValue = zod.z.enum([
   // Control tokens
   "off",
@@ -99,7 +776,7 @@ var validatePatternSafety = (pattern) => {
   }
   return true;
 };
-var TextFieldPropsSchema = chunkT4COXKQ3_js.BaseComponentPropsSchema.extend({
+var TextFieldPropsSchema = BaseComponentPropsSchema.extend({
   // Size variants (matching Button sizes: sm, default, lg)
   size: zod.z.enum(["sm", "default", "lg"]).optional().default("default"),
   // Text content
@@ -204,57 +881,24 @@ var TextFieldSuccessPropsSchema = zod.z.object({
   className: zod.z.string().optional()
 });
 
-Object.defineProperty(exports, "TextField", {
-  enumerable: true,
-  get: function () { return chunk4DU5JSXB_js.TextField; }
-});
-Object.defineProperty(exports, "TextFieldDescription", {
-  enumerable: true,
-  get: function () { return chunk4DU5JSXB_js.TextFieldDescription; }
-});
-Object.defineProperty(exports, "TextFieldError", {
-  enumerable: true,
-  get: function () { return chunk4DU5JSXB_js.TextFieldError; }
-});
-Object.defineProperty(exports, "TextFieldInput", {
-  enumerable: true,
-  get: function () { return chunk4DU5JSXB_js.TextFieldInput; }
-});
-Object.defineProperty(exports, "TextFieldLabel", {
-  enumerable: true,
-  get: function () { return chunk4DU5JSXB_js.TextFieldLabel; }
-});
-Object.defineProperty(exports, "TextFieldSuccess", {
-  enumerable: true,
-  get: function () { return chunk4DU5JSXB_js.TextFieldSuccess; }
-});
-Object.defineProperty(exports, "inputVariants", {
-  enumerable: true,
-  get: function () { return chunk4DU5JSXB_js.inputVariants; }
-});
-Object.defineProperty(exports, "labelVariants", {
-  enumerable: true,
-  get: function () { return chunk4DU5JSXB_js.labelVariants; }
-});
-Object.defineProperty(exports, "successMessageVariants", {
-  enumerable: true,
-  get: function () { return chunk4DU5JSXB_js.successMessageVariants; }
-});
-Object.defineProperty(exports, "textFieldInputVariants", {
-  enumerable: true,
-  get: function () { return chunk4DU5JSXB_js.inputVariants; }
-});
-Object.defineProperty(exports, "textFieldLabelVariants", {
-  enumerable: true,
-  get: function () { return chunk4DU5JSXB_js.labelVariants; }
-});
 exports.AutoCompleteValueSchema = AutoCompleteValue;
+exports.TextField = TextField;
+exports.TextFieldDescription = TextFieldDescription;
 exports.TextFieldDescriptionPropsSchema = TextFieldDescriptionPropsSchema;
+exports.TextFieldError = TextFieldError;
 exports.TextFieldErrorPropsSchema = TextFieldErrorPropsSchema;
+exports.TextFieldInput = TextFieldInput;
 exports.TextFieldInputPropsSchema = TextFieldInputPropsSchema;
+exports.TextFieldLabel = TextFieldLabel;
 exports.TextFieldLabelPropsSchema = TextFieldLabelPropsSchema;
 exports.TextFieldPropsSchema = TextFieldPropsSchema;
+exports.TextFieldSuccess = TextFieldSuccess;
 exports.TextFieldSuccessPropsSchema = TextFieldSuccessPropsSchema;
+exports.inputVariants = inputVariants;
+exports.labelVariants = labelVariants;
+exports.successMessageVariants = successMessageVariants;
+exports.textFieldInputVariants = inputVariants;
+exports.textFieldLabelVariants = labelVariants;
 exports.validatePatternSafety = validatePatternSafety;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map