@tribepad/themis 1.0.0

package/dist/chunk-HSGBJPJO.mjs

@@ -0,0 +1,398 @@
+import { Button } from './chunk-BDXKKMBZ.mjs';
+import { DISABLED_STYLES } from './chunk-HK46BT5U.mjs';
+import { cn } from './chunk-E2KQFV3O.mjs';
+import { forwardRef, useId, useState, useEffect, useCallback, useMemo } from 'react';
+import { Label, Input, Text, FieldError, TextField as TextField$1 } from 'react-aria-components';
+import { cva } from 'class-variance-authority';
+import { CircleAlert } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var inputVariants = 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 = 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 = cva(
+  "text-sm text-[var(--content-foreground)]"
+);
+var errorMessageVariants = cva(
+  "text-sm text-[var(--destructive-foreground)] font-medium mt-1.5"
+);
+var successMessageVariants = cva(
+  "text-sm text-green-600 dark:text-green-500 font-medium mt-1.5"
+);
+var TextFieldLabel = forwardRef(
+  ({ className, state = "default", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Label,
+      {
+        ref,
+        className: cn(labelVariants({ state }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TextFieldLabel.displayName = "TextFieldLabel";
+var TextFieldInput = forwardRef(
+  ({ className, size = "default", state = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        className: cn(inputVariants({ size, state }), DISABLED_STYLES, className),
+        ...props
+      }
+    );
+  }
+);
+TextFieldInput.displayName = "TextFieldInput";
+var TextFieldDescription = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        ref,
+        slot: "description",
+        className: cn(descriptionVariants(), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TextFieldDescription.displayName = "TextFieldDescription";
+var TextFieldError = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      FieldError,
+      {
+        ref,
+        ...props,
+        className: cn(errorMessageVariants(), className),
+        children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", role: "alert", children: [
+          /* @__PURE__ */ jsx(CircleAlert, { className: "h-4 w-4" }),
+          children
+        ] })
+      }
+    );
+  }
+);
+TextFieldError.displayName = "TextFieldError";
+var TextFieldSuccess = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        ref,
+        slot: "description",
+        className: cn(successMessageVariants(), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TextFieldSuccess.displayName = "TextFieldSuccess";
+var TextField = 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 = useId();
+    const generatedId = useId();
+    const fieldId = id || generatedId;
+    const [isShaking, setIsShaking] = useState(false);
+    const [screenReaderMessage, setScreenReaderMessage] = useState("");
+    const [isFocused, setIsFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    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 = 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 = useCallback((e) => {
+      if (expandOnFocus) {
+        setIsFocused(true);
+      }
+      userOnFocus?.(e);
+    }, [expandOnFocus, userOnFocus]);
+    const handleBlur = useCallback((e) => {
+      if (expandOnFocus) {
+        const isEmpty = e.target.value === "";
+        if (isEmpty) {
+          setIsFocused(false);
+        }
+      }
+      userOnBlur?.(e);
+    }, [expandOnFocus, userOnBlur]);
+    const inputWidth = 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 = 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 = useMemo(() => {
+      if (isDisabled) return "disabled";
+      if (isInvalid) return "error";
+      return "default";
+    }, [isDisabled, isInvalid]);
+    const combinedDescription = useMemo(() => {
+      if (description && patternDescription) {
+        return `${description} ${patternDescription}`;
+      }
+      return description || patternDescription;
+    }, [description, patternDescription]);
+    const inputPadding = 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 = useMemo(() => {
+      if (type === "password" && showPasswordToggle && showPassword) {
+        return "text";
+      }
+      return type;
+    }, [type, showPasswordToggle, showPassword]);
+    const handlePasswordToggle = useCallback(() => {
+      setShowPassword((prev) => !prev);
+    }, []);
+    const EyeIcon = () => /* @__PURE__ */ 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__ */ jsx("path", { d: "M1 8s3-5 7-5 7 5 7 5-3 5-7 5-7-5-7-5z" }),
+          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "2" })
+        ]
+      }
+    );
+    const EyeOffIcon = () => /* @__PURE__ */ 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__ */ jsx("path", { d: "M10.5 5.5l-5 5" }),
+          /* @__PURE__ */ jsx("path", { d: "M1 8s3-5 7-5c1.5 0 2.8.6 4 1.5M15 8s-1.5 2.5-4 4" }),
+          /* @__PURE__ */ jsx("path", { d: "M3 13l2-2m7-7l2-2" }),
+          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "2" })
+        ]
+      }
+    );
+    const actualSuffix = useMemo(() => {
+      if (type === "password" && showPasswordToggle) {
+        return /* @__PURE__ */ 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__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+          }
+        );
+      }
+      return suffix;
+    }, [type, showPasswordToggle, showPassword, suffix, handlePasswordToggle]);
+    return /* @__PURE__ */ jsxs(
+      TextField$1,
+      {
+        ref,
+        className: cn("flex flex-col gap-1.5", className),
+        isRequired,
+        isReadOnly,
+        isDisabled,
+        isInvalid,
+        value,
+        defaultValue,
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsxs(Label, { className: cn(labelVariants({ state: labelState })), children: [
+            label,
+            isRequired && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--destructive-background)]", "aria-hidden": "true", children: /* @__PURE__ */ jsx("strong", { children: "*" }) })
+          ] }),
+          combinedDescription && /* @__PURE__ */ jsx(Text, { slot: "description", className: cn(descriptionVariants()), children: combinedDescription }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "relative flex items-center transition-all duration-200",
+              style: {
+                width: inputWidth
+              },
+              children: [
+                prefix && /* @__PURE__ */ 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__ */ jsx(
+                  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__ */ 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__ */ jsx(Text, { slot: "description", className: cn(successMessageVariants()), children: successMessage }),
+          isInvalid && errorMessage && /* @__PURE__ */ jsx(TextFieldError, { id: errorId, children: errorMessage }),
+          screenReaderMessage && /* @__PURE__ */ jsx("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: screenReaderMessage })
+        ]
+      }
+    );
+  }
+);
+TextField.displayName = "TextField";
+
+export { TextField, TextFieldDescription, TextFieldError, TextFieldInput, TextFieldLabel, TextFieldSuccess, inputVariants, labelVariants, successMessageVariants };
+//# sourceMappingURL=chunk-HSGBJPJO.mjs.map
+//# sourceMappingURL=chunk-HSGBJPJO.mjs.map

package/dist/chunk-HSGBJPJO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/TextField/TextField.tsx"],"names":["AriaLabel","AriaInput","AriaText","AriaFieldError","AriaTextField"],"mappings":"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","file":"chunk-HSGBJPJO.mjs","sourcesContent":["\"use client\";\n\n/**\n * TextField Component\n * Accessible text input with React Aria primitives and CVA styling\n *\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements - WCAG 2.2 AAA)\n * @see React Aria TextField: https://react-spectrum.adobe.com/react-aria/TextField.html\n * @see ShadCN Input: https://ui.shadcn.com/docs/components/input\n * @see ShadCN Label: https://ui.shadcn.com/docs/components/label\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport './TextField.css';\nimport { forwardRef, useId, useMemo, useState, useEffect, useCallback } from 'react';\nimport {\n  TextField as AriaTextField,\n  Label as AriaLabel,\n  Input as AriaInput,\n  Text as AriaText,\n  FieldError as AriaFieldError,\n} from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport {  DISABLED_STYLES } from '../../styles/interaction-states';\nimport type {\n  TextFieldProps,\n  TextFieldLabelProps,\n  TextFieldInputProps,\n  TextFieldDescriptionProps,\n  TextFieldErrorProps,\n} from './TextField.types';\nimport { CircleAlert } from 'lucide-react';\nimport { Button } from '../Button';\n\n/**\n * Input variant styles using CVA\n * Adapts ShadCN Input styling with Themis semantic tokens\n */\nexport const inputVariants = cva(\n  // Base styles - FR-014: Proper input styling with focus states\n  \"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\",\n  {\n    variants: {\n      // Size variants (matching Button sizes)\n      size: {\n        sm: \"h-9 text-xs px-2 py-1\",\n        default: \"h-10 px-3 py-2\",\n        lg: \"h-11 px-4 py-3 text-base\"\n      },\n      // State variants\n      state: {\n        default: \"border-[var(--input-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2\",\n        error: \"border-[var(--destructive-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive-background)] focus-visible:ring-offset-2\",\n        success: \"border-green-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2\",\n        disabled: \"cursor-not-allowed opacity-50\",\n        readonly: \"cursor-default bg-[var(--content-background)] opacity-70\"\n      }\n    },\n    defaultVariants: {\n      size: \"default\",\n      state: \"default\"\n    }\n  }\n);\n\n/**\n * Label variant styles using CVA\n * Adapts ShadCN Label styling with Themis semantic tokens\n */\nexport const labelVariants = cva(\n  // Base styles - FR-009: WCAG 2.2 AAA compliance\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n  {\n    variants: {\n      state: {\n        default: \"text-[var(--content-foreground)]\",\n        error: \"text-[var(--destructive-foreground)]\",\n        disabled: \"opacity-50 cursor-not-allowed\"\n      }\n    },\n    defaultVariants: {\n      state: \"default\"\n    }\n  }\n);\n\n/**\n * Description text variant styles\n */\nexport const descriptionVariants = cva(\n  \"text-sm text-[var(--content-foreground)]\"\n);\n\n/**\n * Error message variant styles\n */\nexport const errorMessageVariants = cva(\n  \"text-sm text-[var(--destructive-foreground)] font-medium mt-1.5\"\n);\n\n/**\n * Success message variant styles\n */\nexport const successMessageVariants = cva(\n  \"text-sm text-green-600 dark:text-green-500 font-medium mt-1.5\"\n);\n\n/**\n * TextFieldLabel Sub-component\n * Styled label with optional required indicator\n */\nexport const TextFieldLabel = forwardRef<HTMLLabelElement, TextFieldLabelProps>(\n  ({ className, state = 'default', children, ...props }, ref) => {\n    return (\n      <AriaLabel\n        ref={ref}\n        className={cn(labelVariants({ state }), className)}\n        {...props}\n      >\n        {children}\n      </AriaLabel>\n    );\n  }\n);\n\nTextFieldLabel.displayName = \"TextFieldLabel\";\n\n/**\n * TextFieldInput Sub-component\n * Styled input with size and state variants\n */\nexport const TextFieldInput = forwardRef<HTMLInputElement, TextFieldInputProps>(\n  ({ className, size = 'default', state = 'default', ...props }, ref) => {\n    return (\n      <AriaInput\n        ref={ref}\n        className={cn(inputVariants({ size, state }), DISABLED_STYLES, className)}\n        {...props}\n      />\n    );\n  }\n);\n\nTextFieldInput.displayName = \"TextFieldInput\";\n\n/**\n * TextFieldDescription Sub-component\n * Helper text displayed below the input\n */\nexport const TextFieldDescription = forwardRef<HTMLDivElement, TextFieldDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <AriaText\n        ref={ref}\n        slot=\"description\"\n        className={cn(descriptionVariants(), className)}\n        {...props}\n      >\n        {children}\n      </AriaText>\n    );\n  }\n);\n\nTextFieldDescription.displayName = \"TextFieldDescription\";\n\n/**\n * TextFieldError Sub-component\n * Error message displayed when field is invalid\n * Note: We use AriaFieldError with explicit role=\"alert\" for screen reader announcements\n */\nexport const TextFieldError = forwardRef<HTMLDivElement, TextFieldErrorProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <AriaFieldError\n        ref={ref}\n        {...props}\n        className={cn(errorMessageVariants(), className)}\n      >\n        <span className=\"flex items-center gap-2\" role=\"alert\"><CircleAlert className=\"h-4 w-4\" />{children}</span>\n      </AriaFieldError>\n    );\n  }\n);\n\nTextFieldError.displayName = \"TextFieldError\";\n\n/**\n * TextFieldSuccess Sub-component\n * Success message displayed when field is valid\n */\nexport const TextFieldSuccess = forwardRef<HTMLDivElement, TextFieldDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <AriaText\n        ref={ref}\n        slot=\"description\"\n        className={cn(successMessageVariants(), className)}\n        {...props}\n      >\n        {children}\n      </AriaText>\n    );\n  }\n);\n\nTextFieldSuccess.displayName = \"TextFieldSuccess\";\n\n/**\n * TextField Component\n * Fully accessible text input with React Aria and themed styling\n *\n * Composition:\n * - TextField (container with React Aria context)\n * - Label (optional, linked to input)\n * - Input (text input element)\n * - Description (optional helper text)\n * - ErrorMessage (optional, shown when invalid)\n *\n * @example\n * <TextField\n *   label=\"Email\"\n *   description=\"We'll never share your email\"\n *   isRequired\n *   type=\"email\"\n * />\n *\n * @example\n * <TextField\n *   label=\"Username\"\n *   errorMessage=\"Username is required\"\n *   isInvalid\n * />\n */\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps>(\n  (\n    {\n      className,\n      size = 'default',\n      label,\n      description,\n      errorMessage,\n      successMessage,\n      type = 'text',\n      isRequired = false,\n      isReadOnly = false,\n      isDisabled = false,\n      isInvalid = false,\n      isValid = false,\n      id,\n      autoComplete,\n      disableCopyPaste = false,\n      pattern,\n      patternDescription,\n      expandOnFocus = false,\n      collapsedWidth = '200px',\n      prefix,\n      suffix,\n      prefixSize = 16,\n      suffixSize = 16,\n      showPasswordToggle,\n      value,\n      defaultValue,\n      onFocus: userOnFocus,\n      onBlur: userOnBlur,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique IDs for error message linking\n    const errorId = useId();\n    const generatedId = useId();\n    const fieldId = id || generatedId;\n\n    // Shake animation state for paste prevention\n    const [isShaking, setIsShaking] = useState(false);\n    const [screenReaderMessage, setScreenReaderMessage] = useState('');\n\n    // Expand on focus state\n    const [isFocused, setIsFocused] = useState(false);\n\n    // Password visibility state\n    const [showPassword, setShowPassword] = useState(false);\n\n    // Development mode warning for disableCopyPaste\n    useEffect(() => {\n      if (disableCopyPaste && typeof process !== 'undefined' && process.env.NODE_ENV === 'development') {\n        console.warn(\n          '[TextField] Copy/paste prevention should only be used for security-critical fields like password confirmation. ' +\n          'This feature can break assistive technology workflows and password managers.'\n        );\n      }\n    }, [disableCopyPaste]);\n\n    // Handle paste prevention with shake animation\n    const handlePaste = useCallback((e: React.ClipboardEvent<HTMLInputElement>) => {\n      if (disableCopyPaste) {\n        e.preventDefault();\n\n        // Trigger shake animation\n        setIsShaking(true);\n\n        // Announce to screen readers\n        setScreenReaderMessage('Pasting is not allowed in this field. Please type your entry.');\n\n        // Remove shake animation and clear message after 400ms\n        setTimeout(() => {\n          setIsShaking(false);\n          setScreenReaderMessage('');\n        }, 400);\n      }\n    }, [disableCopyPaste]);\n\n    // Handle focus for expand on focus feature\n    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      if (expandOnFocus) {\n        setIsFocused(true);\n      }\n      // Call user's onFocus if provided\n      userOnFocus?.(e);\n    }, [expandOnFocus, userOnFocus]);\n\n    // Handle blur for expand on focus feature\n    const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      if (expandOnFocus) {\n        // Only collapse if input is empty\n        const isEmpty = e.target.value === '';\n        if (isEmpty) {\n          setIsFocused(false);\n        }\n      }\n      // Call user's onBlur if provided\n      userOnBlur?.(e);\n    }, [expandOnFocus, userOnBlur]);\n\n    // Calculate input width for expand on focus\n    const inputWidth = useMemo(() => {\n      if (!expandOnFocus) return undefined;\n\n      // Check if input has value (controlled or uncontrolled)\n      const hasValue = value !== undefined ? value !== '' : defaultValue !== undefined && defaultValue !== '';\n\n      // Expand if focused or has value\n      if (isFocused || hasValue) {\n        return '100%';\n      }\n\n      return collapsedWidth;\n    }, [expandOnFocus, isFocused, value, defaultValue, collapsedWidth]);\n\n    // Determine input state based on props\n    const inputState = useMemo(() => {\n      if (isDisabled) return 'disabled';\n      if (isReadOnly) return 'readonly';\n      if (isInvalid) return 'error';\n      if (isValid) return 'success';\n      return 'default';\n    }, [isDisabled, isReadOnly, isInvalid, isValid]);\n\n    // Determine label state\n    const labelState = useMemo(() => {\n      if (isDisabled) return 'disabled';\n      if (isInvalid) return 'error';\n      return 'default';\n    }, [isDisabled, isInvalid]);\n\n    // Combine description and patternDescription\n    const combinedDescription = useMemo(() => {\n      if (description && patternDescription) {\n        return `${description} ${patternDescription}`;\n      }\n      return description || patternDescription;\n    }, [description, patternDescription]);\n\n    // Calculate dynamic padding for prefix/suffix\n    const inputPadding = useMemo(() => {\n      const basePadding = { left: 12, right: 12 }; // Default px-3 = 12px\n\n      if (prefix) {\n        // If prefix is string, estimate width; if ReactNode, use prefixSize\n        const prefixWidth = typeof prefix === 'string'\n          ? prefix.length * 8 + 16  // Rough estimate: 8px per char + 16px margin\n          : prefixSize + 16;        // Icon size + margin\n        basePadding.left = prefixWidth;\n      }\n\n      // Password toggle takes precedence over custom suffix\n      if (type === 'password' && showPasswordToggle) {\n        // Password toggle is always a 16px icon\n        basePadding.right = 16 + 16; // Icon size + margin\n      } else if (suffix) {\n        // If suffix is string, estimate width; if ReactNode, use suffixSize\n        const suffixWidth = typeof suffix === 'string'\n          ? suffix.length * 8 + 16  // Rough estimate: 8px per char + 16px margin\n          : suffixSize + 16;        // Icon size + margin\n        basePadding.right = suffixWidth;\n      }\n\n      return basePadding;\n    }, [prefix, suffix, prefixSize, suffixSize, type, showPasswordToggle]);\n\n    // Determine actual input type (handle password toggle)\n    const actualType = useMemo(() => {\n      if (type === 'password' && showPasswordToggle && showPassword) {\n        return 'text';\n      }\n      return type;\n    }, [type, showPasswordToggle, showPassword]);\n\n    // Password toggle button\n    const handlePasswordToggle = useCallback(() => {\n      setShowPassword(prev => !prev);\n    }, []);\n\n    // Eye icons for password toggle\n    const EyeIcon = () => (\n      <svg\n        data-testid=\"password-toggle-icon-show\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"M1 8s3-5 7-5 7 5 7 5-3 5-7 5-7-5-7-5z\" />\n        <circle cx=\"8\" cy=\"8\" r=\"2\" />\n      </svg>\n    );\n\n    const EyeOffIcon = () => (\n      <svg\n        data-testid=\"password-toggle-icon-hide\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"M10.5 5.5l-5 5\" />\n        <path d=\"M1 8s3-5 7-5c1.5 0 2.8.6 4 1.5M15 8s-1.5 2.5-4 4\" />\n        <path d=\"M3 13l2-2m7-7l2-2\" />\n        <circle cx=\"8\" cy=\"8\" r=\"2\" />\n      </svg>\n    );\n\n    // Determine actual suffix (password toggle takes precedence for password fields)\n    const actualSuffix = useMemo(() => {\n      if (type === 'password' && showPasswordToggle) {\n        return (\n          <Button\n            variant=\"ghost\"\n            visualSize=\"icon\"\n            onPress={handlePasswordToggle}\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\n            className=\"!min-h-0 !min-w-0 h-8 w-8\"\n          >\n            {showPassword ? <EyeOffIcon /> : <EyeIcon />}\n          </Button>\n        );\n      }\n      return suffix;\n    }, [type, showPasswordToggle, showPassword, suffix, handlePasswordToggle]);\n\n    return (\n      <AriaTextField\n        ref={ref}\n        className={cn(\"flex flex-col gap-1.5\", className)}\n        isRequired={isRequired}\n        isReadOnly={isReadOnly}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        value={value}\n        defaultValue={defaultValue}\n        {...props}\n      >\n        {/* Label with required indicator */}\n        {label && (\n          <AriaLabel className={cn(labelVariants({ state: labelState }))}>\n            {label}\n            {isRequired && (\n              <span className=\"ml-1 text-[var(--destructive-background)]\" aria-hidden=\"true\">\n                <strong>*</strong>\n              </span>\n            )}\n          </AriaLabel>\n        )}\n\n        {/* Description text (helper text) */}\n        {combinedDescription && (\n          <AriaText slot=\"description\" className={cn(descriptionVariants())}>\n            {combinedDescription}\n          </AriaText>\n        )}\n\n        {/* Input field with prefix/suffix */}\n        <div\n          className=\"relative flex items-center transition-all duration-200\"\n          style={{\n            width: inputWidth,\n          }}\n        >\n          {/* Prefix */}\n          {prefix && (\n            <div\n              data-testid=\"textfield-prefix\"\n              className=\"absolute left-3 flex items-center justify-center pointer-events-none text-[var(--content-foreground)]\"\n              aria-hidden=\"true\"\n            >\n              {prefix}\n            </div>\n          )}\n\n          {/* Input */}\n          <AriaInput\n            type={actualType}\n            id={fieldId}\n            className={cn(\n              inputVariants({ size, state: inputState }),\n              DISABLED_STYLES,\n              isShaking && 'shake'\n            )}\n            style={{\n              width: '100%',\n              paddingLeft: `${inputPadding.left}px`,\n              paddingRight: `${inputPadding.right}px`,\n            }}\n            autoComplete={autoComplete}\n            pattern={pattern}\n            onPaste={handlePaste}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            aria-required={isRequired ? 'true' : undefined}\n            aria-readonly={isReadOnly ? 'true' : undefined}\n            aria-errormessage={isInvalid && errorMessage ? errorId : undefined}\n          />\n\n          {/* Suffix */}\n          {actualSuffix && (\n            <div\n              data-testid=\"textfield-suffix\"\n              className={cn(\n                \"absolute right-3 flex items-center justify-center text-[var(--content-foreground)]\",\n                // Password toggle is clickable, other suffixes are not\n                type === 'password' && showPasswordToggle ? \"\" : \"pointer-events-none\"\n              )}\n              aria-hidden={type === 'password' && showPasswordToggle ? undefined : \"true\"}\n            >\n              {actualSuffix}\n            </div>\n          )}\n        </div>\n\n        {/* Success message (shown when valid) */}\n        {isValid && successMessage && !isInvalid && (\n          <AriaText slot=\"description\" className={cn(successMessageVariants())}>\n            {successMessage}\n          </AriaText>\n        )}\n\n        {/* Error message (shown when invalid) - takes precedence over success */}\n        {isInvalid && errorMessage && (\n          <TextFieldError id={errorId}>\n            {errorMessage}\n          </TextFieldError>\n        )}\n\n        {/* Screen reader announcement for paste prevention */}\n        {screenReaderMessage && (\n          <div className=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n            {screenReaderMessage}\n          </div>\n        )}\n      </AriaTextField>\n    );\n  }\n);\n\nTextField.displayName = \"TextField\";\n\nexport { inputVariants as textFieldInputVariants, labelVariants as textFieldLabelVariants };\n"]}

package/dist/chunk-I3AUTOMZ.mjs

@@ -0,0 +1,125 @@
+import { ButtonGroupItemContext, ButtonGroupContext, buttonGroupVariants, useButtonGroupContext, buttonGroupSeparatorVariants } from './chunk-FPKEAJRZ.mjs';
+import { cn } from './chunk-E2KQFV3O.mjs';
+import { forwardRef, Children, isValidElement } from 'react';
+import { Toolbar } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { z } from 'zod';
+
+var isButtonElement = (child) => {
+  if (!isValidElement(child)) return false;
+  const componentType = child.type;
+  return componentType?.displayName === "Button";
+};
+var isSeparatorElement = (child) => {
+  if (!isValidElement(child)) return false;
+  const componentType = child.type;
+  return componentType?.displayName === "ButtonGroupSeparator";
+};
+var getPosition = (index, total) => {
+  if (total === 1) return "only";
+  if (index === 0) return "first";
+  if (index === total - 1) return "last";
+  return "middle";
+};
+var filterButtonChildren = (children) => {
+  return children.filter(isButtonElement);
+};
+var getButtonIndex = (child, buttonChildren) => {
+  return buttonChildren.indexOf(child);
+};
+var ButtonGroup = forwardRef(
+  ({
+    orientation = "horizontal",
+    variant,
+    size,
+    isDisabled,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const childArray = Children.toArray(children);
+    const buttonChildren = childArray.filter(isButtonElement);
+    const totalButtons = buttonChildren.length;
+    const groupContextValue = {
+      orientation,
+      variant,
+      size,
+      isDisabled
+    };
+    const wrappedChildren = childArray.map((child, index) => {
+      if (isButtonElement(child)) {
+        const buttonIndex = buttonChildren.indexOf(child);
+        const position = getPosition(buttonIndex, totalButtons);
+        return /* @__PURE__ */ jsx(
+          ButtonGroupItemContext.Provider,
+          {
+            value: { position },
+            children: child
+          },
+          index
+        );
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        ref,
+        orientation,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        className: cn(buttonGroupVariants({ orientation }), className),
+        children: /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: groupContextValue, children: wrappedChildren })
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+var ButtonGroupSeparator = forwardRef(
+  ({ className, ...props }, ref) => {
+    const groupContext = useButtonGroupContext();
+    const orientation = groupContext?.orientation ?? "horizontal";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-hidden": "true",
+        className: cn(
+          buttonGroupSeparatorVariants({ orientation }),
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+ButtonGroupSeparator.displayName = "ButtonGroupSeparator";
+var ButtonGroupPropsSchema = z.object({
+  /** Orientation of the button group layout */
+  orientation: z.enum(["horizontal", "vertical"]).optional().default("horizontal"),
+  /** Default variant for all child buttons (can be overridden per-button) */
+  variant: z.enum(["default", "destructive", "outline", "secondary", "ghost"]).optional(),
+  /** Default size for all child buttons (can be overridden per-button) */
+  size: z.enum(["sm", "default", "lg", "icon"]).optional(),
+  /** Disable all buttons in the group */
+  isDisabled: z.boolean().optional(),
+  /** Accessible label for the toolbar (recommended) */
+  "aria-label": z.string().optional(),
+  /** ID of element that labels the toolbar */
+  "aria-labelledby": z.string().optional(),
+  /** Additional CSS classes */
+  className: z.string().optional(),
+  /** Child elements (Buttons, Separators, etc.) */
+  children: z.custom()
+});
+var ButtonGroupSeparatorPropsSchema = z.object({
+  /** Additional CSS classes */
+  className: z.string().optional(),
+  /** Test ID for testing */
+  "data-testid": z.string().optional()
+});
+
+export { ButtonGroup, ButtonGroupPropsSchema, ButtonGroupSeparator, ButtonGroupSeparatorPropsSchema, filterButtonChildren, getButtonIndex, getPosition, isButtonElement, isSeparatorElement };
+//# sourceMappingURL=chunk-I3AUTOMZ.mjs.map
+//# sourceMappingURL=chunk-I3AUTOMZ.mjs.map

package/dist/chunk-I3AUTOMZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/ButtonGroup/ButtonGroup.utils.ts","../src/elements/ButtonGroup/ButtonGroup.tsx","../src/elements/ButtonGroup/ButtonGroup.types.ts"],"names":[],"mappings":"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","file":"chunk-I3AUTOMZ.mjs","sourcesContent":["import { isValidElement, type ReactNode, type ComponentType } from 'react';\nimport type { ButtonPosition } from './ButtonGroup.types';\n\n/**\n * ButtonGroup Utility Functions\n *\n * Provides helper functions for:\n * - Child element detection (Button vs Separator vs other)\n * - Position calculation for border-radius styling\n *\n * @see plan.md Decision 6: Non-Button Child Handling\n */\n\n// =============================================================================\n// Child Detection Functions\n// =============================================================================\n\n/**\n * Checks if a React child is a Themis Button component\n * Uses displayName for reliable detection across module boundaries\n *\n * @param child - React child element to check\n * @returns true if the child is a Button component\n */\nexport const isButtonElement = (child: ReactNode): boolean => {\n  if (!isValidElement(child)) return false;\n\n  const componentType = child.type as ComponentType;\n  return componentType?.displayName === 'Button';\n};\n\n/**\n * Checks if a React child is a ButtonGroupSeparator component\n * Uses displayName for reliable detection across module boundaries\n *\n * @param child - React child element to check\n * @returns true if the child is a ButtonGroupSeparator component\n */\nexport const isSeparatorElement = (child: ReactNode): boolean => {\n  if (!isValidElement(child)) return false;\n\n  const componentType = child.type as ComponentType;\n  return componentType?.displayName === 'ButtonGroupSeparator';\n};\n\n// =============================================================================\n// Position Calculation\n// =============================================================================\n\n/**\n * Calculates the position of a button within a group\n * Used for applying position-aware border-radius styling\n *\n * @param index - Zero-based index of the button\n * @param total - Total number of buttons in the group\n * @returns Position enum: 'only' | 'first' | 'last' | 'middle'\n *\n * @example\n * getPosition(0, 1) // 'only' - single button\n * getPosition(0, 3) // 'first'\n * getPosition(1, 3) // 'middle'\n * getPosition(2, 3) // 'last'\n */\nexport const getPosition = (index: number, total: number): ButtonPosition => {\n  if (total === 1) return 'only';\n  if (index === 0) return 'first';\n  if (index === total - 1) return 'last';\n  return 'middle';\n};\n\n/**\n * Filters an array of React children to only include Button elements\n * Non-Button children (Separators, custom elements) are excluded\n *\n * @param children - Array of React children\n * @returns Array containing only Button elements\n */\nexport const filterButtonChildren = (children: ReactNode[]): ReactNode[] => {\n  return children.filter(isButtonElement);\n};\n\n/**\n * Gets the index of a button within the filtered button array\n * Used when the child array contains non-Button elements (Separators, etc.)\n *\n * @param child - The button element to find\n * @param buttonChildren - Array of only Button elements\n * @returns Index of the button, or -1 if not found\n */\nexport const getButtonIndex = (\n  child: ReactNode,\n  buttonChildren: ReactNode[]\n): number => {\n  return buttonChildren.indexOf(child);\n};\n","\"use client\";\n\n/**\n * ButtonGroup Component\n *\n * A container that groups related Themis Button components with:\n * - Consistent styling (connected borders, position-aware radii)\n * - Accessible keyboard navigation (React Aria Toolbar)\n * - WCAG 2.2 AAA compliance\n *\n * @see plan.md for architecture details\n * @see buttongroup-prd.md for requirements\n */\n\nimport { forwardRef, Children, type ReactElement } from 'react';\nimport { Toolbar } from 'react-aria-components';\nimport { cn } from '../../utils/cn';\nimport {\n  ButtonGroupContext,\n  ButtonGroupItemContext,\n  useButtonGroupContext,\n} from './ButtonGroupContext';\nimport { buttonGroupVariants, buttonGroupSeparatorVariants } from './ButtonGroup.variants';\nimport { isButtonElement, getPosition } from './ButtonGroup.utils';\nimport type { ButtonGroupProps, ButtonGroupSeparatorProps } from './ButtonGroup.types';\n\n// =============================================================================\n// ButtonGroup Component\n// =============================================================================\n\n/**\n * ButtonGroup - Groups related buttons with connected styling and keyboard navigation\n *\n * Uses React Aria's Toolbar for:\n * - Roving tabindex (single tab stop)\n * - Arrow key navigation\n * - Home/End key support\n * - RTL support\n *\n * @example\n * ```tsx\n * <ButtonGroup aria-label=\"Text formatting\">\n *   <Button variant=\"outline\">Bold</Button>\n *   <Button variant=\"outline\">Italic</Button>\n *   <Button variant=\"outline\">Underline</Button>\n * </ButtonGroup>\n * ```\n */\nconst ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  (\n    {\n      orientation = 'horizontal',\n      variant,\n      size,\n      isDisabled,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ): ReactElement => {\n    // Convert children to array for enumeration\n    const childArray = Children.toArray(children);\n\n    // Filter to get only Button elements for position calculation\n    const buttonChildren = childArray.filter(isButtonElement);\n    const totalButtons = buttonChildren.length;\n\n    // Create context value for group-level props\n    const groupContextValue = {\n      orientation,\n      variant,\n      size,\n      isDisabled,\n    };\n\n    // Wrap each child with appropriate context\n    const wrappedChildren = childArray.map((child, index) => {\n      // If it's a Button, wrap with item context for position\n      if (isButtonElement(child)) {\n        const buttonIndex = buttonChildren.indexOf(child);\n        const position = getPosition(buttonIndex, totalButtons);\n\n        return (\n          <ButtonGroupItemContext.Provider\n            key={index}\n            value={{ position }}\n          >\n            {child}\n          </ButtonGroupItemContext.Provider>\n        );\n      }\n\n      // Non-Button children (Separators, etc.) pass through without item context\n      return child;\n    });\n\n    return (\n      <Toolbar\n        ref={ref}\n        orientation={orientation}\n        aria-label={props['aria-label']}\n        aria-labelledby={props['aria-labelledby']}\n        className={cn(buttonGroupVariants({ orientation }), className)}\n      >\n        <ButtonGroupContext.Provider value={groupContextValue}>\n          {wrappedChildren}\n        </ButtonGroupContext.Provider>\n      </Toolbar>\n    );\n  }\n);\n\nButtonGroup.displayName = 'ButtonGroup';\n\n// =============================================================================\n// ButtonGroupSeparator Component\n// =============================================================================\n\n/**\n * ButtonGroupSeparator - Visual divider between button groups\n *\n * Renders a decorative separator that:\n * - Adapts to orientation (vertical line for horizontal, horizontal for vertical)\n * - Is hidden from screen readers (aria-hidden)\n * - Is excluded from keyboard navigation\n *\n * @example\n * ```tsx\n * <ButtonGroup aria-label=\"Editor actions\">\n *   <Button>Undo</Button>\n *   <Button>Redo</Button>\n *   <ButtonGroupSeparator />\n *   <Button>Cut</Button>\n *   <Button>Copy</Button>\n * </ButtonGroup>\n * ```\n */\nconst ButtonGroupSeparator = forwardRef<HTMLDivElement, ButtonGroupSeparatorProps>(\n  ({ className, ...props }, ref): ReactElement => {\n    const groupContext = useButtonGroupContext();\n    const orientation = groupContext?.orientation ?? 'horizontal';\n\n    return (\n      <div\n        ref={ref}\n        role=\"separator\"\n        aria-hidden=\"true\"\n        className={cn(\n          buttonGroupSeparatorVariants({ orientation }),\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nButtonGroupSeparator.displayName = 'ButtonGroupSeparator';\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nexport { ButtonGroup, ButtonGroupSeparator };\n","import { z } from 'zod';\nimport type { ReactNode } from 'react';\n\n/**\n * ButtonGroup Component Types\n *\n * Defines Zod schemas and TypeScript types for the ButtonGroup component.\n * Uses a two-level context pattern:\n * - ButtonGroupContext: Group-level props (orientation, variant, size, isDisabled)\n * - ButtonGroupItemContext: Per-button position information\n *\n * @see plan.md for architecture details\n * @see constitution.md Principle II (Type Safety First)\n */\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/**\n * Orientation of the button group\n */\nexport type ButtonGroupOrientation = 'horizontal' | 'vertical';\n\n/**\n * Position of a button within the group\n * Used for position-aware border-radius styling\n */\nexport type ButtonPosition = 'first' | 'middle' | 'last' | 'only';\n\n/**\n * Button variants (matches Themis Button variants, excluding 'link')\n * Link variant is excluded as it doesn't make sense in a grouped context\n */\nexport type ButtonGroupVariant =\n  | 'default'\n  | 'destructive'\n  | 'outline'\n  | 'secondary'\n  | 'ghost';\n\n/**\n * Button sizes (matches Themis Button sizes)\n */\nexport type ButtonGroupSize = 'sm' | 'default' | 'lg' | 'icon';\n\n// =============================================================================\n// Zod Schemas\n// =============================================================================\n\n/**\n * ButtonGroup props schema\n * Validates all props for the ButtonGroup container component\n */\nexport const ButtonGroupPropsSchema = z.object({\n  /** Orientation of the button group layout */\n  orientation: z\n    .enum(['horizontal', 'vertical'])\n    .optional()\n    .default('horizontal'),\n\n  /** Default variant for all child buttons (can be overridden per-button) */\n  variant: z\n    .enum(['default', 'destructive', 'outline', 'secondary', 'ghost'])\n    .optional(),\n\n  /** Default size for all child buttons (can be overridden per-button) */\n  size: z.enum(['sm', 'default', 'lg', 'icon']).optional(),\n\n  /** Disable all buttons in the group */\n  isDisabled: z.boolean().optional(),\n\n  /** Accessible label for the toolbar (recommended) */\n  'aria-label': z.string().optional(),\n\n  /** ID of element that labels the toolbar */\n  'aria-labelledby': z.string().optional(),\n\n  /** Additional CSS classes */\n  className: z.string().optional(),\n\n  /** Child elements (Buttons, Separators, etc.) */\n  children: z.custom<ReactNode>(),\n});\n\n/**\n * ButtonGroupSeparator props schema\n * Validates props for the visual separator between button groups\n */\nexport const ButtonGroupSeparatorPropsSchema = z.object({\n  /** Additional CSS classes */\n  className: z.string().optional(),\n  /** Test ID for testing */\n  'data-testid': z.string().optional(),\n});\n\n// =============================================================================\n// TypeScript Types (inferred from schemas)\n// =============================================================================\n\n/**\n * Props for the ButtonGroup container component\n */\nexport type ButtonGroupProps = z.infer<typeof ButtonGroupPropsSchema>;\n\n/**\n * Props for the ButtonGroupSeparator component\n */\nexport type ButtonGroupSeparatorProps = z.infer<\n  typeof ButtonGroupSeparatorPropsSchema\n>;\n\n// =============================================================================\n// Context Types\n// =============================================================================\n\n/**\n * Group-level context value\n * Provides inherited props to all child buttons\n */\nexport interface ButtonGroupContextValue {\n  /** Orientation of the group (affects keyboard navigation and styling) */\n  orientation: ButtonGroupOrientation;\n  /** Default variant for buttons (can be overridden) */\n  variant?: ButtonGroupVariant;\n  /** Default size for buttons (can be overridden) */\n  size?: ButtonGroupSize;\n  /** Whether all buttons in the group are disabled */\n  isDisabled?: boolean;\n}\n\n/**\n * Item-level context value\n * Provides position information to each button for border-radius styling\n */\nexport interface ButtonGroupItemContextValue {\n  /** Position of this button in the group */\n  position: ButtonPosition;\n}\n"]}