se-design 1.0.87-dev.1 → 1.0.87-dev.2

package/dist/index4.js

@@ -1,20 +1,20 @@
-import o, { forwardRef as F, useRef as G, useEffect as H } from "react";
-import { getA11yNameAttributes as J } from "./index81.js";
-import { useAccessiblePress as K } from "./index67.js";
+import o, { forwardRef as G, useRef as H, useEffect as J } from "react";
+import { getA11yNameAttributes as K } from "./index81.js";
+import { useAccessiblePress as L } from "./index67.js";
 import "./index72.js";
-import { announce as L } from "./index75.js";
-import { Icon as y } from "./index6.js";
+import { announce as M } from "./index75.js";
+import { Icon as w } from "./index6.js";
 /* empty css        */
-function u() {
-  return u = Object.assign ? Object.assign.bind() : function(n) {
+function p() {
+  return p = Object.assign ? Object.assign.bind() : function(n) {
     for (var s = 1; s < arguments.length; s++) {
       var r = arguments[s];
       for (var t in r) ({}).hasOwnProperty.call(r, t) && (n[t] = r[t]);
     }
     return n;
-  }, u.apply(null, arguments);
+  }, p.apply(null, arguments);
 }
-const a = "focus-outline", M = {
+const a = "focus-outline", Q = {
   primary: "primary-btn disabled-btn pointer-events-none cursor-not-allowed",
   secondary: "secondary-btn disabled-btn pointer-events-none cursor-not-allowed",
   ghost: "ghost-btn disabled-btn pointer-events-none cursor-not-allowed",
@@ -26,7 +26,7 @@ const a = "focus-outline", M = {
   // padding: 8px, 12px
   lg: "py-3 px-4 large"
   // padding: 12px, 16px
-}, h = {
+}, g = {
   primary: `primary-btn ${a}`,
   secondary: `secondary-btn ${a}`,
   ghost: `ghost-btn ${a}`,
@@ -38,83 +38,88 @@ const a = "focus-outline", M = {
   // padding: 8px, 12px
   lg: "py-3 px-4 large"
   // padding: 12px, 16px
-}, Q = {
+}, S = {
   blue: "theme-blue",
   red: "theme-red",
   yellow: "theme-yellow",
   green: "theme-green",
   ai: "theme-ai",
   white: "theme-white"
-}, S = /* @__PURE__ */ F(({
+}, V = /* @__PURE__ */ G(({
   type: n = "primary",
   theme: s = "blue",
   size: r = "md",
   label: t = "",
-  iconPosition: p = "left",
-  disabled: w = !1,
+  iconPosition: b = "left",
+  disabled: N = !1,
   loading: e = !1,
   loadingLabel: l,
-  className: g = "",
-  iconProps: m = {
+  className: x = "",
+  iconProps: c = {
     name: ""
   },
-  automationId: v = "",
-  autoFocus: N = !1,
-  ariaLabel: x,
-  ariaLabelledBy: k,
-  ariaDescribedBy: C,
-  isPressed: E,
-  onClick: $,
-  onKeyboardActivate: P,
-  onPointerDown: R,
-  onMouseDown: j,
-  onTouchStart: A,
-  ...B
-}, O) => {
-  const c = n === "unstyled", b = e && l ? l : t, f = G(e);
-  H(() => {
-    e && !f.current && L(l || (t ? `${t}, loading` : "Loading"), {
+  automationId: k = "",
+  autoFocus: C = !1,
+  ariaLabel: E,
+  ariaLabelledBy: $,
+  ariaDescribedBy: P,
+  isPressed: R,
+  onClick: j,
+  onKeyboardActivate: A,
+  onPointerDown: B,
+  onMouseDown: O,
+  onTouchStart: _,
+  tabIndex: f,
+  ...I
+}, z) => {
+  const d = n === "unstyled", y = f !== void 0, h = e && l ? l : t, v = H(e);
+  J(() => {
+    e && !v.current && M(l || (t ? `${t}, loading` : "Loading"), {
       delay: 300
-    }), f.current = e;
+    }), v.current = e;
   }, [e, t, l]);
   const {
-    pressProps: _,
-    isDisabled: d
-  } = K({
-    disabled: w,
+    pressProps: D,
+    isDisabled: i
+  } = L({
+    disabled: N,
     loading: e,
     isNative: !0,
     // native <button> => hook does NOT add Enter/Space onKeyDown
-    pressed: E,
-    onClick: $,
-    onKeyboardActivate: P,
-    onPointerDown: R,
-    onMouseDown: j,
-    onTouchStart: A
-  }), I = !c && n !== "link" ? h[r] : "", z = c ? "" : Q[s], D = d ? M[n] : h[n], i = m?.name ? {
-    ...m,
-    stroke: d ? "var(--color-gray-600)" : m.stroke
-  } : void 0, U = ["se-design-button", z, I, D, g, c ? "" : "rounded-[6px] inline-flex gap-1 items-center min-w-fit"].filter(Boolean).join(" "), q = J({
-    ariaLabel: x,
-    ariaLabelledBy: k,
-    ariaDescribedBy: C
+    pressed: R,
+    onClick: j,
+    onKeyboardActivate: A,
+    onPointerDown: B,
+    onMouseDown: O,
+    onTouchStart: _
+  }), T = !d && n !== "link" ? g[r] : "", U = d ? "" : S[s];
+  let u = i ? Q[n] : g[n];
+  i && y && (u = u.replace("pointer-events-none ", ""));
+  const m = c?.name ? {
+    ...c,
+    stroke: i ? "var(--color-gray-600)" : c.stroke
+  } : void 0, q = ["se-design-button", U, T, u, x, d ? "" : "rounded-[6px] inline-flex gap-1 items-center min-w-fit"].filter(Boolean).join(" "), F = K({
+    ariaLabel: E,
+    ariaLabelledBy: $,
+    ariaDescribedBy: P
   });
-  return /* @__PURE__ */ o.createElement("button", u({
-    ref: O,
+  return /* @__PURE__ */ o.createElement("button", p({
+    ref: z,
     type: "button",
-    className: U,
-    disabled: d,
-    autoFocus: N,
-    "data-automation-id": v
-  }, B, _, q), e && /* @__PURE__ */ o.createElement("div", {
+    className: q,
+    disabled: i && !y,
+    tabIndex: f,
+    autoFocus: C,
+    "data-automation-id": k
+  }, I, D, F), e && /* @__PURE__ */ o.createElement("div", {
     "aria-hidden": "true",
     className: "animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full"
-  }), !e && i?.name && p === "left" && /* @__PURE__ */ o.createElement(y, i), b && /* @__PURE__ */ o.createElement("span", {
+  }), !e && m?.name && b === "left" && /* @__PURE__ */ o.createElement(w, m), h && /* @__PURE__ */ o.createElement("span", {
     className: "button-label [font-weight:inherit]"
-  }, b), !e && i?.name && p === "right" && /* @__PURE__ */ o.createElement(y, i));
+  }, h), !e && m?.name && b === "right" && /* @__PURE__ */ o.createElement(w, m));
 });
-S.displayName = "Button";
+V.displayName = "Button";
 export {
-  S as Button
+  V as Button
 };
 //# sourceMappingURL=index4.js.map

package/dist/index4.js.map

@@ -1 +1 @@
-{"version":3,"file":"index4.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { announce } from '../../utils/a11y/liveAnnouncer';\nimport { Icon, IconProps } from '../Icon';\nimport './style.scss';\n\n/**\n * Allows native button attributes (aria-*, data-*, etc.) to be passed through,\n * but keeps our own onClick/disabled/type typing AND aria-label/aria-labelledby/aria-describedby.\n * Note: We omit 'type' because we use it for button variant, not HTML type attribute.\n * The HTML type is always set to 'button' internally.\n */\ntype NativeButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'disabled' | 'type' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-pressed'\n>;\n\nexport interface ButtonProps extends NativeButtonProps {\n  /**\n   * Type of the button. \n   */\n  type?: 'primary' | 'secondary' | 'ghost' | 'link' | 'unstyled';\n  /**\n   * Color pallet of the button\n   */\n  theme?: 'blue' | 'red' | 'yellow' | 'green' | 'ai' | 'white';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon props\n   */\n  iconProps?: IconProps;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Loading state - will disable button and show spinner\n   */\n  loading?: boolean;\n  /**\n   * Custom label shown (both visually and announced to screen readers) when loading is true.\n   * When omitted, the original label remains visible and SR announcement is \"${label}, loading\".\n   */\n  loadingLabel?: string;\n  /**\n   * Optional click handler (called for pointer/mouse activations)\n   */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Optional keyboard activation handler\n   * Called when button is activated via keyboard (Enter/Space) or assistive technology virtual activation.\n   * Use when you want to have different behavior for keyboard and pointer activations.\n   * If not provided, onClick will be called for all activations.\n   */\n  onKeyboardActivate?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n  /**\n   * If true, button will be focused on mount.\n   * For programmatic focus control, use ref with .focus() instead.\n   */\n  autoFocus?: boolean;\n  /**\n   * Accessible name for the button. Use when there's no visible label (e.g., icon-only buttons).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this button.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this button.\n   * Provides additional context announced after the accessible name.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * When true, sets aria-pressed for toggle/pressed state \n   */\n  isPressed?: boolean;\n}\n\nconst focusClass = 'focus-outline';\nconst disabledClassNames: Map = {\n  primary: 'primary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  secondary: 'secondary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  ghost: 'ghost-btn disabled-btn pointer-events-none cursor-not-allowed',\n  link: 'link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed',\n  unstyled: 'unstyled-btn disabled-btn pointer-events-none cursor-not-allowed',\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\nconst classNames: Map = {\n  primary: `primary-btn ${focusClass}`,\n  secondary: `secondary-btn ${focusClass}`,\n  ghost: `ghost-btn ${focusClass}`,\n  link: `link-btn w-fit ${focusClass}`,\n  unstyled: `unstyled-btn ${focusClass}`,\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\n\nconst colorPalletClassNames: Map = {\n  blue: 'theme-blue',\n  red: 'theme-red',\n  yellow: 'theme-yellow',\n  green: 'theme-green',\n  ai: 'theme-ai',\n  white: 'theme-white'\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      theme = 'blue',\n      size = 'md',\n      label = '',\n      iconPosition = 'left',\n      disabled = false,\n      loading = false,\n      loadingLabel,\n      className = '',\n      iconProps = { name: '' },\n      automationId = '',\n      autoFocus = false,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      isPressed,\n      onClick,\n      onKeyboardActivate,\n      onPointerDown,\n      onMouseDown,\n      onTouchStart,\n      ...props\n    },\n    ref\n  ) => {\n  const isUnstyled = type === 'unstyled';\n  const visibleLabel = loading && loadingLabel ? loadingLabel : label;\n  const prevLoadingRef = useRef(loading);\n\n  useEffect(() => {\n    if (loading && !prevLoadingRef.current) {\n      announce(loadingLabel || (label ? `${label}, loading` : 'Loading'), { delay: 300 });\n    }\n    prevLoadingRef.current = loading;\n  }, [loading, label, loadingLabel]);\n\n  // Use shared hook for activation handling (pointer vs keyboard/virtual click routing)\n  const { pressProps, isDisabled } = useAccessiblePress({\n    disabled,\n    loading,\n    isNative: true, // native <button> => hook does NOT add Enter/Space onKeyDown\n    pressed: isPressed,\n    onClick: onClick as (e: React.MouseEvent<HTMLElement>) => void,\n    onKeyboardActivate: onKeyboardActivate as (e: React.MouseEvent<HTMLElement>) => void,\n    onPointerDown: onPointerDown as (e: React.PointerEvent<HTMLElement>) => void,\n    onMouseDown: onMouseDown as (e: React.MouseEvent<HTMLElement>) => void,\n    onTouchStart: onTouchStart as (e: React.TouchEvent<HTMLElement>) => void\n  });\n\n  // Skip size/color classes for unstyled variant\n  const sizeClassName = !isUnstyled && type !== 'link' ? classNames[size] : '';\n  const colorPalletClassName = !isUnstyled ? colorPalletClassNames[theme] : '';\n  const typeClassName = isDisabled ? disabledClassNames[type] : classNames[type];\n\n  // Avoid mutating incoming iconProps\n  const computedIconProps: IconProps | undefined = iconProps?.name\n    ? {\n        ...iconProps,\n        stroke: isDisabled ? 'var(--color-gray-600)' : iconProps.stroke\n      }\n    : undefined;\n\n  const buttonClassName = [\n    'se-design-button',\n    colorPalletClassName,\n    sizeClassName,\n    typeClassName,\n    className,\n    !isUnstyled ? 'rounded-[6px] inline-flex gap-1 items-center min-w-fit' : ''\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Compute accessible name/description props with correct precedence\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  });\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={buttonClassName}\n      disabled={isDisabled}\n      autoFocus={autoFocus}\n      data-automation-id={automationId}\n      {...props}\n      {...(pressProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      {...accessibleNameProps}\n    >\n      {loading && (\n        <div\n          aria-hidden=\"true\"\n          className=\"animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full\"\n        />\n      )}\n      {!loading && computedIconProps?.name && iconPosition === 'left' && (\n        <Icon {...computedIconProps} />\n      )}\n      {visibleLabel && (\n        <span className=\"button-label [font-weight:inherit]\">{visibleLabel}</span>\n      )}\n      {!loading && computedIconProps?.name && iconPosition === 'right' && (\n        <Icon {...computedIconProps} />\n      )}\n    </button>\n  );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["focusClass","disabledClassNames","primary","secondary","ghost","link","unstyled","sm","md","lg","classNames","colorPalletClassNames","blue","red","yellow","green","ai","white","Button","type","theme","size","label","iconPosition","disabled","loading","loadingLabel","className","iconProps","name","automationId","autoFocus","ariaLabel","ariaLabelledBy","ariaDescribedBy","isPressed","onClick","onKeyboardActivate","onPointerDown","onMouseDown","onTouchStart","props","ref","isUnstyled","visibleLabel","prevLoadingRef","useRef","useEffect","current","announce","delay","pressProps","isDisabled","useAccessiblePress","isNative","pressed","sizeClassName","colorPalletClassName","typeClassName","computedIconProps","stroke","undefined","buttonClassName","filter","Boolean","join","accessibleNameProps","getA11yNameAttributes","React","createElement","_extends","Icon","displayName"],"mappings":"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"}
+{"version":3,"file":"index4.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { announce } from '../../utils/a11y/liveAnnouncer';\nimport { Icon, IconProps } from '../Icon';\nimport './style.scss';\n\n/**\n * Allows native button attributes (aria-*, data-*, etc.) to be passed through,\n * but keeps our own onClick/disabled/type typing AND aria-label/aria-labelledby/aria-describedby.\n * Note: We omit 'type' because we use it for button variant, not HTML type attribute.\n * The HTML type is always set to 'button' internally.\n */\ntype NativeButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'disabled' | 'type' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-pressed'\n>;\n\nexport interface ButtonProps extends NativeButtonProps {\n  /**\n   * Type of the button. \n   */\n  type?: 'primary' | 'secondary' | 'ghost' | 'link' | 'unstyled';\n  /**\n   * Color pallet of the button\n   */\n  theme?: 'blue' | 'red' | 'yellow' | 'green' | 'ai' | 'white';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon props\n   */\n  iconProps?: IconProps;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Loading state - will disable button and show spinner\n   */\n  loading?: boolean;\n  /**\n   * Custom label shown (both visually and announced to screen readers) when loading is true.\n   * When omitted, the original label remains visible and SR announcement is \"${label}, loading\".\n   */\n  loadingLabel?: string;\n  /**\n   * Optional click handler (called for pointer/mouse activations)\n   */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Optional keyboard activation handler\n   * Called when button is activated via keyboard (Enter/Space) or assistive technology virtual activation.\n   * Use when you want to have different behavior for keyboard and pointer activations.\n   * If not provided, onClick will be called for all activations.\n   */\n  onKeyboardActivate?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n  /**\n   * If true, button will be focused on mount.\n   * For programmatic focus control, use ref with .focus() instead.\n   */\n  autoFocus?: boolean;\n  /**\n   * Accessible name for the button. Use when there's no visible label (e.g., icon-only buttons).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this button.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this button.\n   * Provides additional context announced after the accessible name.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * When true, sets aria-pressed for toggle/pressed state \n   */\n  isPressed?: boolean;\n}\n\nconst focusClass = 'focus-outline';\nconst disabledClassNames: Map = {\n  primary: 'primary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  secondary: 'secondary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  ghost: 'ghost-btn disabled-btn pointer-events-none cursor-not-allowed',\n  link: 'link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed',\n  unstyled: 'unstyled-btn disabled-btn pointer-events-none cursor-not-allowed',\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\nconst classNames: Map = {\n  primary: `primary-btn ${focusClass}`,\n  secondary: `secondary-btn ${focusClass}`,\n  ghost: `ghost-btn ${focusClass}`,\n  link: `link-btn w-fit ${focusClass}`,\n  unstyled: `unstyled-btn ${focusClass}`,\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\n\nconst colorPalletClassNames: Map = {\n  blue: 'theme-blue',\n  red: 'theme-red',\n  yellow: 'theme-yellow',\n  green: 'theme-green',\n  ai: 'theme-ai',\n  white: 'theme-white'\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      theme = 'blue',\n      size = 'md',\n      label = '',\n      iconPosition = 'left',\n      disabled = false,\n      loading = false,\n      loadingLabel,\n      className = '',\n      iconProps = { name: '' },\n      automationId = '',\n      autoFocus = false,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      isPressed,\n      onClick,\n      onKeyboardActivate,\n      onPointerDown,\n      onMouseDown,\n      onTouchStart,\n      tabIndex,\n      ...props\n    },\n    ref\n  ) => {\n  const isUnstyled = type === 'unstyled';\n  const hasTabIndex = tabIndex !== undefined;\n  const visibleLabel = loading && loadingLabel ? loadingLabel : label;\n  const prevLoadingRef = useRef(loading);\n\n  useEffect(() => {\n    if (loading && !prevLoadingRef.current) {\n      announce(loadingLabel || (label ? `${label}, loading` : 'Loading'), { delay: 300 });\n    }\n    prevLoadingRef.current = loading;\n  }, [loading, label, loadingLabel]);\n\n  // Use shared hook for activation handling (pointer vs keyboard/virtual click routing)\n  const { pressProps, isDisabled } = useAccessiblePress({\n    disabled,\n    loading,\n    isNative: true, // native <button> => hook does NOT add Enter/Space onKeyDown\n    pressed: isPressed,\n    onClick: onClick as (e: React.MouseEvent<HTMLElement>) => void,\n    onKeyboardActivate: onKeyboardActivate as (e: React.MouseEvent<HTMLElement>) => void,\n    onPointerDown: onPointerDown as (e: React.PointerEvent<HTMLElement>) => void,\n    onMouseDown: onMouseDown as (e: React.MouseEvent<HTMLElement>) => void,\n    onTouchStart: onTouchStart as (e: React.TouchEvent<HTMLElement>) => void\n  });\n\n  // Skip size/color classes for unstyled variant\n  const sizeClassName = !isUnstyled && type !== 'link' ? classNames[size] : '';\n  const colorPalletClassName = !isUnstyled ? colorPalletClassNames[theme] : '';\n  let typeClassName = isDisabled ? disabledClassNames[type] : classNames[type];\n  if (isDisabled && hasTabIndex) {\n    typeClassName = typeClassName.replace('pointer-events-none ', '');\n  }\n\n  // Avoid mutating incoming iconProps\n  const computedIconProps: IconProps | undefined = iconProps?.name\n    ? {\n        ...iconProps,\n        stroke: isDisabled ? 'var(--color-gray-600)' : iconProps.stroke\n      }\n    : undefined;\n\n  const buttonClassName = [\n    'se-design-button',\n    colorPalletClassName,\n    sizeClassName,\n    typeClassName,\n    className,\n    !isUnstyled ? 'rounded-[6px] inline-flex gap-1 items-center min-w-fit' : ''\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Compute accessible name/description props with correct precedence\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  });\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={buttonClassName}\n      disabled={isDisabled && !hasTabIndex}\n      tabIndex={tabIndex}\n      autoFocus={autoFocus}\n      data-automation-id={automationId}\n      {...props}\n      {...(pressProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      {...accessibleNameProps}\n    >\n      {loading && (\n        <div\n          aria-hidden=\"true\"\n          className=\"animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full\"\n        />\n      )}\n      {!loading && computedIconProps?.name && iconPosition === 'left' && (\n        <Icon {...computedIconProps} />\n      )}\n      {visibleLabel && (\n        <span className=\"button-label [font-weight:inherit]\">{visibleLabel}</span>\n      )}\n      {!loading && computedIconProps?.name && iconPosition === 'right' && (\n        <Icon {...computedIconProps} />\n      )}\n    </button>\n  );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["focusClass","disabledClassNames","primary","secondary","ghost","link","unstyled","sm","md","lg","classNames","colorPalletClassNames","blue","red","yellow","green","ai","white","Button","type","theme","size","label","iconPosition","disabled","loading","loadingLabel","className","iconProps","name","automationId","autoFocus","ariaLabel","ariaLabelledBy","ariaDescribedBy","isPressed","onClick","onKeyboardActivate","onPointerDown","onMouseDown","onTouchStart","tabIndex","props","ref","isUnstyled","hasTabIndex","undefined","visibleLabel","prevLoadingRef","useRef","useEffect","current","announce","delay","pressProps","isDisabled","useAccessiblePress","isNative","pressed","sizeClassName","colorPalletClassName","typeClassName","replace","computedIconProps","stroke","buttonClassName","filter","Boolean","join","accessibleNameProps","getA11yNameAttributes","React","createElement","_extends","Icon","displayName"],"mappings":"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"}