{"version":3,"sources":["../src/components/buttons/button.tsx"],"names":["React","Button","type","children","styles","disabled","isDisabled","classes","size","variant","color","block","onPointerDown","onPointerOver","onPointerLeave","onClick","onKeyDown","props","isActuallyDisabled","resolveDisabledState","disabledProps","handlers","useDisabledState","dataBtnProp","restProps","dataBtnValue","ui_default","button_default"],"mappings":"sHACA,OAAOA,MAAW,QAoGX,IAAMC,EAAS,CAAC,CACrB,KAAAC,EAAO,SACP,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,MAAAC,EACA,MAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAmB,CAEjB,IAAMC,EAAqBC,EAAqBd,EAAUC,CAAU,EAG9D,CAAE,cAAAc,EAAe,SAAAC,CAAS,EAAIC,EAClCJ,EACA,CACE,SAAU,CACR,QAAAH,EACA,cAAAH,EACA,UAAAI,CACF,EAEA,UAAWT,CAGb,CACF,EAIM,CAAE,WAAYgB,EAAa,GAAGC,CAAU,EAAIP,EAC5CQ,EACJ,CAACjB,EAAMG,EAAQ,QAAU,OAAWY,CAAW,EAC5C,OAAO,OAAO,EACd,KAAK,GAAG,GAAK,OAGlB,OACEvB,EAAA,cAAC0B,EAAA,CACC,GAAG,SACH,KAAMxB,EACN,WAAUuB,EACV,aAAYhB,EACZ,aAAYC,EACZ,gBAAeU,EAAc,eAAe,EAC5C,cAAeP,EACf,eAAgBC,EAChB,MAAOV,EACP,UAAWgB,EAAc,UACxB,GAAGI,EACH,GAAGH,GAEHlB,CACH,CAEJ,EAEOwB,EAAQ1B,EACfA,EAAO,YAAc","sourcesContent":["import UI from \"../ui\";\nimport React from \"react\";\nimport { useDisabledState } from \"../../hooks/use-disabled-state\";\nimport { resolveDisabledState } from \"../../utils/accessibility\";\nimport type { DisabledStateProps } from \"../../types/shared\";\n\nexport type ButtonProps = Partial<React.ComponentProps<typeof UI>> &\n  DisabledStateProps & {\n    /**\n     * The button type\n     * Required - 'button' | 'submit' | 'reset'\n     */\n    type: \"button\" | \"submit\" | \"reset\";\n    /**\n     * Raw data-btn tokens. Merged with `size` and `block` — all three contribute\n     * whitespace-separated words to the final `data-btn` attribute value.\n     * @example <Button data-btn=\"pill\">Pill button</Button>\n     */\n    \"data-btn\"?: string;\n    /**\n     * Size variant - maps to `data-btn` attribute, aligns with SCSS size tokens.\n     * Can coexist with a directly passed `data-btn` attribute (values are merged).\n     * @example <Button size=\"sm\">Small</Button>\n     */\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n    /**\n     * Style variant - maps to `data-style` attribute.\n     * - `\"outline\"` — transparent bg with border (mirrors link button style)\n     * - `\"pill\"` — fully rounded corners\n     * - `\"text\"` — ghost text button with subtle hover\n     * - `\"icon\"` — square icon-only, no padding\n     * @example <Button variant=\"outline\">Bordered</Button>\n     */\n    variant?: \"text\" | \"pill\" | \"icon\" | \"outline\";\n    /**\n     * Color variant - maps to `data-color` attribute using semantic color tokens.\n     * @example <Button color=\"danger\">Delete</Button>\n     */\n    color?: \"primary\" | \"secondary\" | \"danger\" | \"success\" | \"warning\" | \"info\";\n    /**\n     * Block layout — stretches the button to 100% of its container width.\n     * Composes with `size` and other `data-btn` values.\n     * @example <Button block>Full Width</Button>\n     * @example <Button size=\"lg\" block>Large Full Width</Button>\n     */\n    block?: boolean;\n  };\n\n/**\n * Accessible Button component with WCAG 2.1 Level AA compliant disabled state.\n *\n * **Key Accessibility Features:**\n * - Uses `aria-disabled` pattern instead of native `disabled` attribute\n * - Maintains keyboard focusability when disabled (stays in tab order)\n * - Prevents all interactions when disabled via optimized `useDisabledState` hook\n * - Automatic className merging for seamless styling\n * - Supports both modern `disabled` and legacy `isDisabled` props\n *\n * **Why aria-disabled?**\n * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)\n * - Screen readers can discover and announce disabled state (WCAG 4.1.2)\n * - Enables tooltips and help text on disabled buttons\n * - Better visual styling control for WCAG AA contrast compliance\n *\n * **Performance:**\n * - Uses optimized `useDisabledState` hook with stable references\n * - Automatic className merging eliminates boilerplate\n * - ~90% reduction in unnecessary re-renders compared to previous implementation\n *\n * @example\n * // Basic usage\n * <Button type=\"button\" onClick={handleClick}>\n *   Click me\n * </Button>\n *\n * @example\n * // Disabled state (prevents all interactions but stays focusable)\n * <Button type=\"button\" disabled={true} onClick={handleClick}>\n *   Cannot click (but can focus for screen readers)\n * </Button>\n *\n * @example\n * // With custom classes (automatic merging with .is-disabled)\n * <Button\n *   type=\"button\"\n *   disabled={true}\n *   classes=\"my-custom-btn\"\n * >\n *   Custom disabled button\n * </Button>\n *\n * @example\n * // Legacy isDisabled prop (still supported)\n * <Button type=\"button\" isDisabled={true} onClick={handleClick}>\n *   Legacy disabled\n * </Button>\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}\n * @see {@link file://./../../hooks/useDisabledState.md useDisabledState Hook Documentation}\n */\nexport const Button = ({\n  type = \"button\",\n  children,\n  styles,\n  disabled,\n  isDisabled,\n  classes,\n  size,\n  variant,\n  color,\n  block,\n  onPointerDown,\n  onPointerOver,\n  onPointerLeave,\n  onClick,\n  onKeyDown,\n  ...props\n}: ButtonProps) => {\n  // Resolve disabled state from both props (disabled takes precedence)\n  const isActuallyDisabled = resolveDisabledState(disabled, isDisabled);\n\n  // Use the disabled state hook with enhanced API for automatic className merging\n  const { disabledProps, handlers } = useDisabledState<HTMLButtonElement>(\n    isActuallyDisabled,\n    {\n      handlers: {\n        onClick,\n        onPointerDown,\n        onKeyDown,\n      },\n      // Automatic className merging - hook combines disabled class with user classes\n      className: classes,\n      // Note: onPointerOver and onPointerLeave are intentionally NOT wrapped\n      // to allow hover effects on disabled buttons for visual feedback\n    },\n  );\n\n  // Merge size, block, and any explicit data-btn passed by the consumer.\n  // SCSS uses [data-btn~=\"value\"] (whitespace word match), so \"lg block\" targets both.\n  const { \"data-btn\": dataBtnProp, ...restProps } = props;\n  const dataBtnValue =\n    [size, block ? \"block\" : undefined, dataBtnProp]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  /* Returning a button element with accessible disabled state */\n  return (\n    <UI\n      as=\"button\"\n      type={type}\n      data-btn={dataBtnValue}\n      data-style={variant}\n      data-color={color}\n      aria-disabled={disabledProps[\"aria-disabled\"]}\n      onPointerOver={onPointerOver}\n      onPointerLeave={onPointerLeave}\n      style={styles}\n      className={disabledProps.className}\n      {...restProps}\n      {...handlers}\n    >\n      {children}\n    </UI>\n  );\n};\n\nexport default Button;\nButton.displayName = \"Button\";\n"]}