@tribepad/themis 1.0.0

package/dist/chunk-3YOY2VJ6.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var chunkY3GT7ETK_js = require('./chunk-Y3GT7ETK.js');
+var chunkB5Q4UPL6_js = require('./chunk-B5Q4UPL6.js');
+var chunkVIREG536_js = require('./chunk-VIREG536.js');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 buttonVariants = buttonVisualVariants;
+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 = chunkY3GT7ETK_js.useButtonGroupContext();
+    const itemContext = chunkY3GT7ETK_js.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 ? chunkY3GT7ETK_js.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: chunkVIREG536_js.cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className),
+        ...props,
+        children: (renderProps) => (
+          /* Layer 2: Visual Button */
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: chunkVIREG536_js.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)
+                chunkB5Q4UPL6_js.PRESSED_STYLES,
+                chunkB5Q4UPL6_js.HOVER_STYLES,
+                chunkB5Q4UPL6_js.HIGH_CONTRAST_HOVER,
+                chunkB5Q4UPL6_js.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";
+
+exports.Button = Button;
+exports.buttonOuterVariants = buttonOuterVariants;
+exports.buttonVariants = buttonVariants;
+exports.buttonVisualVariants = buttonVisualVariants;
+//# sourceMappingURL=chunk-3YOY2VJ6.js.map
+//# sourceMappingURL=chunk-3YOY2VJ6.js.map

package/dist/chunk-3YOY2VJ6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Button/Button.tsx"],"names":["cva","memo","forwardRef","useId","useButtonGroupContext","useButtonGroupItemContext","buttonGroupItemVariants","jsx","AriaButton","cn","jsxs","PRESSED_STYLES","HOVER_STYLES","HIGH_CONTRAST_HOVER","HIGH_CONTRAST_PRESSED","Fragment","Loader2","Zap"],"mappings":"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","file":"chunk-3YOY2VJ6.js","sourcesContent":["\"use client\";\n\n/**\n * Button Component - 3-Layer Architecture\n * Accessible button with React Aria primitives and CVA styling\n *\n * Architecture:\n * - Layer 1: Touch Target (44x44px WCAG AAA compliant, transparent)\n * - Layer 2: Visual Button (configurable size, colors, borders)\n * - Layer 3: Content & Effects (text, icons, ripple, loading spinner)\n *\n * @see 3layer-plan.md for architecture details\n * @see spec.md FR-029 to FR-037 (Button Component Requirements)\n * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)\n * @see spec.md FR-014 (44x44px minimum touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo, useId, type ReactNode } from 'react';\nimport {\n  Button as AriaButton,\n  type ButtonProps as AriaButtonProps,\n} from 'react-aria-components';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Loader2, Zap } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { PRESSED_STYLES, HOVER_STYLES, HIGH_CONTRAST_HOVER, HIGH_CONTRAST_PRESSED } from '../../styles/interaction-states';\nimport {\n  useButtonGroupContext,\n  useButtonGroupItemContext,\n} from '../ButtonGroup/ButtonGroupContext';\nimport { buttonGroupItemVariants } from '../ButtonGroup/ButtonGroup.variants';\n\n/**\n * Layer 1: Transparent outer touch target (44x44px minimum)\n * Handles WCAG 2.2 AAA touch target requirement\n * Always transparent, centers the visual button inside\n * IMPORTANT: Focus ring stays on Layer 1 for AAA compliance (2.4.13)\n *\n * In vertical ButtonGroups, uses items-stretch so the visual layer (Layer 2)\n * can fill the full touch target height, eliminating gaps between buttons.\n */\nconst buttonOuterVariants = cva(\n  \"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\",\n  {\n    variants: {\n      fullWidth: {\n        true: \"w-full\",\n        false: \"\",\n      },\n      inVerticalGroup: {\n        true: \"items-stretch\",\n        false: \"items-center\",\n      },\n    },\n    defaultVariants: {\n      fullWidth: false,\n      inVerticalGroup: false,\n    },\n  }\n);\n\n/**\n * Layer 2: Visual button appearance (adjustable size)\n * Provides the visual appearance with configurable size\n * Can be smaller than touch target for use cases like carousel dots\n * NOTE: NO focus-visible styles here - focus ring is on Layer 1\n */\nconst buttonVisualVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] data-[pressed]:bg-[var(--primary-action)]/80\",\n        destructive:\n          \"bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80\",\n        outline:\n          \"border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]\",\n        secondary:\n          \"bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70\",\n        ghost:\n          \"hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]\",\n        link: \"text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]\",\n      },\n      fullWidth: {\n        true: \"w-full\",\n        false: \"\",\n      },\n      visualSize: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3 text-xs\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n        dot: \"h-5 w-5 rounded-full p-0 min-h-0 min-w-0\",\n      },\n      paywall: {\n        true: \"!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      visualSize: \"default\",\n      paywall: false,\n    },\n  }\n);\n\n/**\n * @deprecated Use buttonVisualVariants instead. This alias is kept for backward compatibility.\n */\nconst buttonVariants = buttonVisualVariants;\n\nexport interface ButtonProps\n  extends Omit<AriaButtonProps, 'className'>,\n    VariantProps<typeof buttonVisualVariants> {\n  as?: 'button' | 'a';\n  loading?: boolean;\n  loadingText?: string;\n  shortcut?: string;\n  className?: string;\n  buttonVisualClassName?: string;\n  children?: ReactNode;\n  /** Enables paywall state - overrides variant styling and prevents normal action */\n  paywall?: boolean;\n  /** URL to open in new tab when paywalled button is clicked */\n  paywallRedirect?: string;\n  /** Description of the premium feature for tooltips and screen readers (max 200 chars) */\n  paywallDescription?: string;\n  /** Full width button */\n  fullWidth?: boolean;\n  /**\n   * Visual size of the button (Layer 2)\n   * Defaults to `size` for backward compatibility\n   * Use independently for small visual buttons with large touch targets\n   * @example <Button size=\"default\" visualSize=\"dot\" /> // 44px touch, 12px visual\n   */\n  visualSize?: 'sm' | 'default' | 'lg' | 'icon' | 'dot';\n  /**\n   * Size of the button - controls both touch target awareness and visual size\n   * @deprecated For independent visual sizing, use visualSize prop instead\n   */\n  size?: 'sm' | 'default' | 'lg' | 'icon';\n}\n\n/**\n * Button Component - 3-Layer Architecture\n * Fully accessible button with React Aria and themed styling\n *\n * Layer 1: Touch Target (AriaButton) - 44x44px WCAG AAA compliant\n * Layer 2: Visual Button (span) - configurable appearance\n * Layer 3: Content (children) - text, icons, effects\n */\nconst Button = memo(forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      buttonVisualClassName,\n      variant,\n      size,\n      visualSize,\n      fullWidth,\n      loading = false,\n      loadingText = \"Loading...\",\n      shortcut,\n      children,\n      isDisabled,\n      paywall = false,\n      paywallRedirect,\n      paywallDescription,\n      onPress,\n      ...props\n    },\n    ref\n  ) => {\n    const paywallDescriptionId = useId();\n\n    // ==========================================================================\n    // ButtonGroup Context Integration\n    // ==========================================================================\n\n    // Consume group-level context (variant, size, isDisabled, orientation)\n    const groupContext = useButtonGroupContext();\n\n    // Consume item-level context (position for border-radius styling)\n    const itemContext = useButtonGroupItemContext();\n\n    // Merge context values with props (props take precedence)\n    const effectiveVariant = variant ?? groupContext?.variant ?? 'default';\n    const effectiveSize = size ?? groupContext?.size;\n    const effectiveIsDisabled = isDisabled ?? groupContext?.isDisabled ?? false;\n\n    // In vertical groups, buttons should be full width automatically\n    const isInVerticalGroup = groupContext?.orientation === 'vertical';\n    const effectiveFullWidth = fullWidth || isInVerticalGroup;\n\n    // Position styling for ButtonGroup (only applied when in a group)\n    const positionClassName = itemContext\n      ? buttonGroupItemVariants({\n          orientation: groupContext?.orientation ?? 'horizontal',\n          position: itemContext.position,\n        })\n      : '';\n\n    // Default visualSize to size for backward compatibility\n    const effectiveVisualSize = visualSize ?? effectiveSize ?? 'default';\n\n    // AAA Accessibility: Warn in dev/test if icon/dot variant lacks accessible name\n    if (process.env.NODE_ENV !== 'production') {\n      if (\n        (effectiveVisualSize === 'dot' || effectiveVisualSize === 'icon') &&\n        !props['aria-label'] &&\n        !children\n      ) {\n        console.warn(\n          '[Button] visualSize=\"dot\" or \"icon\" requires aria-label when no visible text is provided (WCAG 1.1.1)'\n        );\n      }\n    }\n\n    /**\n     * Handle button press - intercepts action when paywalled\n     * If paywalled with redirect URL, opens in new tab\n     * Otherwise, calls the normal onPress handler\n     */\n    const handlePress = (e: Parameters<NonNullable<AriaButtonProps['onPress']>>[0]): void => {\n      if (paywall) {\n        if (paywallRedirect) {\n          window.open(paywallRedirect, '_blank', 'noopener,noreferrer');\n        }\n        // Don't call onPress when paywalled\n        return;\n      }\n      onPress?.(e);\n    };\n\n    // Only set isDisabled when we have a reason to disable\n    // Otherwise, let slot system control disabled state (e.g., in NumberField)\n    const computedIsDisabled = effectiveIsDisabled || loading || undefined;\n\n    return (\n      <AriaButton\n        ref={ref}\n        isDisabled={computedIsDisabled}\n        aria-disabled={paywall ? true : undefined}\n        aria-describedby={paywall ? paywallDescriptionId : undefined}\n        onPress={handlePress}\n        className={cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className)}\n        {...props}\n      >\n        {(renderProps) => (\n          /* Layer 2: Visual Button */\n          <span\n            className={cn(\n              buttonVisualVariants({\n                variant: effectiveVariant,\n                visualSize: effectiveVisualSize,\n                paywall,\n                fullWidth: effectiveFullWidth,\n              }),\n              // Position styling from ButtonGroup context (border-radius adjustments)\n              positionClassName,\n              buttonVisualClassName,\n              // Layer 2 interaction styles (no focus - focus ring is on Layer 1)\n              PRESSED_STYLES,\n              HOVER_STYLES,\n              HIGH_CONTRAST_HOVER,\n              HIGH_CONTRAST_PRESSED\n            )}\n            data-pressed={renderProps.isPressed || undefined}\n          >\n            {/* Layer 3: Content & Effects */}\n\n            {/* FR-033: Loading spinner with screen reader announcement */}\n            {/* Uses motion-safe: for WCAG 2.3.3 AAA (Animation from Interactions) */}\n            {loading && (\n              <>\n                <Loader2 className=\"motion-safe:animate-spin\" aria-hidden=\"true\" />\n                <span className=\"sr-only\" aria-live=\"polite\">\n                  {loadingText}\n                </span>\n              </>\n            )}\n\n            {/* Hide children during loading */}\n            {!loading && children}\n\n            {/* Paywall: Lightning bolt icon */}\n            {paywall && (\n              <Zap\n                data-testid=\"zap-icon\"\n                aria-hidden=\"true\"\n                className=\"ml-1\"\n              />\n            )}\n\n            {/* Paywall: Screen reader description */}\n            {paywall && (\n              <span id={paywallDescriptionId} className=\"sr-only\">\n                Premium feature: {paywallDescription || \"Upgrade required to access this feature\"}\n              </span>\n            )}\n\n            {/* FR-034: Keyboard shortcut display on focus */}\n            {renderProps.isFocusVisible && shortcut && (\n              <kbd className=\"ml-auto hidden text-xs opacity-60 lg:inline\">\n                {shortcut}\n              </kbd>\n            )}\n\n            {/* Touch/press ripple effect - FR-031: Pressed state feedback */}\n            {/* Uses motion-safe: for WCAG 2.3.3 AAA (Animation from Interactions) */}\n            {renderProps.isPressed && (\n              <span\n                className=\"absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95\"\n                aria-hidden=\"true\"\n              />\n            )}\n          </span>\n        )}\n      </AriaButton>\n    );\n  }\n));\n\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants, buttonOuterVariants, buttonVisualVariants };\n"]}

package/dist/chunk-4DU5JSXB.js

@@ -0,0 +1,408 @@
+'use strict';
+
+var chunk3YOY2VJ6_js = require('./chunk-3YOY2VJ6.js');
+var chunkB5Q4UPL6_js = require('./chunk-B5Q4UPL6.js');
+var chunkVIREG536_js = require('./chunk-VIREG536.js');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+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: chunkVIREG536_js.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: chunkVIREG536_js.cn(inputVariants({ size, state }), chunkB5Q4UPL6_js.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: chunkVIREG536_js.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: chunkVIREG536_js.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: chunkVIREG536_js.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(
+          chunk3YOY2VJ6_js.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: chunkVIREG536_js.cn("flex flex-col gap-1.5", className),
+        isRequired,
+        isReadOnly,
+        isDisabled,
+        isInvalid,
+        value,
+        defaultValue,
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Label, { className: chunkVIREG536_js.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: chunkVIREG536_js.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: chunkVIREG536_js.cn(
+                      inputVariants({ size, state: inputState }),
+                      chunkB5Q4UPL6_js.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: chunkVIREG536_js.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: chunkVIREG536_js.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";
+
+exports.TextField = TextField;
+exports.TextFieldDescription = TextFieldDescription;
+exports.TextFieldError = TextFieldError;
+exports.TextFieldInput = TextFieldInput;
+exports.TextFieldLabel = TextFieldLabel;
+exports.TextFieldSuccess = TextFieldSuccess;
+exports.inputVariants = inputVariants;
+exports.labelVariants = labelVariants;
+exports.successMessageVariants = successMessageVariants;
+//# sourceMappingURL=chunk-4DU5JSXB.js.map
+//# sourceMappingURL=chunk-4DU5JSXB.js.map