@avenue-ticketing/ui 0.11.0 → 0.12.0-beta.2

package/dist/react/button.d.ts

@@ -1,41 +1,116 @@
-import * as React from 'react';
+import { FC, ReactNode, ReactElement } from 'react';
+import { LinkProps as LinkProps$1, ButtonProps as ButtonProps$1 } from 'react-aria-components';
 
-declare const sizeClass: {
-    readonly xs: "h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3";
-    readonly default: "h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4";
-    readonly lg: "h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5";
+declare const styles: {
+    common: {
+        root: string;
+        icon: string;
+    };
+    sizes: {
+        xs: {
+            root: string;
+            linkRoot: string;
+        };
+        sm: {
+            root: string;
+            linkRoot: string;
+        };
+        md: {
+            root: string;
+            linkRoot: string;
+        };
+        lg: {
+            root: string;
+            linkRoot: string;
+        };
+        xl: {
+            root: string;
+            linkRoot: string;
+        };
+    };
+    colors: {
+        /** Figma Hierarchy=Primary — dark neutral solid; hover lightens to fg-tertiary_hover (#404040). */
+        primary: {
+            root: string;
+        };
+        /** Figma Hierarchy=Brand — purple solid; hover darkens to bg-brand-solid_hover (#6d28d9). */
+        brand: {
+            root: string;
+        };
+        /** Figma Hierarchy=Secondary — border-primary + shadow-xs + skeuomorphic inner rim overlay. */
+        secondary: {
+            root: string;
+        };
+        /** Figma Hierarchy=Tertiary */
+        tertiary: {
+            root: string;
+        };
+        /** Figma Hierarchy=Link color — text + icons share brand-secondary; hover underlines with fg-brand-secondary. */
+        "link-color": {
+            root: string;
+        };
+        /** Figma Hierarchy=Link gray — text + icons share tertiary; hover underlines with fg-quaternary. */
+        "link-gray": {
+            root: string;
+        };
+        "primary-destructive": {
+            root: string;
+        };
+        "secondary-destructive": {
+            root: string;
+        };
+        "tertiary-destructive": {
+            root: string;
+        };
+        /** Figma Hierarchy=Link (destructive) — text + icons share error-primary; hover underlines. */
+        "link-destructive": {
+            root: string;
+        };
+    };
 };
-declare const roundedClass: {
-    readonly full: "rounded-full";
-    readonly lg: "rounded-lg";
-    readonly md: "rounded-md";
+/**
+ * Common props shared between button and anchor variants
+ */
+interface CommonProps {
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** Shows a loading spinner and disables the button */
+    isLoading?: boolean;
+    /** The size variant of the button */
+    size?: keyof typeof styles.sizes;
+    /** The color variant of the button */
+    color?: keyof typeof styles.colors;
+    /** Icon component or element to show before the text */
+    iconLeading?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** Icon component or element to show after the text */
+    iconTrailing?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** Removes horizontal padding from the text content */
+    noTextPadding?: boolean;
+    /** When true, keeps the text visible during loading state */
+    showTextWhileLoading?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Props for the button variant (non-link)
+ */
+interface ButtonProps extends CommonProps, Omit<ButtonProps$1, "children" | "className"> {
+}
+/**
+ * Props for the link variant (anchor tag)
+ */
+interface LinkProps extends CommonProps, Omit<LinkProps$1, "children" | "className"> {
+    href: NonNullable<LinkProps$1["href"]>;
+}
+/** Union type of button and link props */
+type Props = ButtonProps | LinkProps;
+declare const Button: {
+    (props: LinkProps): ReactElement<LinkProps>;
+    (props: ButtonProps): ReactElement<ButtonProps>;
 };
-declare const variantClass: {
-    readonly primary: "bg-primary text-background border border-transparent hover:bg-primary/90 active:bg-primary/85";
-    readonly secondary: "bg-background text-primary border border-primary/10 hover:bg-primary/5";
-    readonly destructive: "bg-background text-red-500 border border-red-500/25 hover:bg-red-500/5";
-    readonly success: "bg-background text-green-500 border border-green-500/25 hover:bg-green-500/5";
-};
-type ButtonProps = React.ComponentProps<"button"> & {
-    /**
-     * Visual style: neutral (`secondary`, `primary`), or outline (`destructive`,
-     * `success`) using Tailwind `red-500` / `green-500` text and matching borders on
-     * `bg-background` (no solid fill).
-     */
-    variant?: keyof typeof variantClass;
-    /**
-     * Corner radius. Labeled buttons default to `full` (pill). `iconOnly` buttons
-     * default to `md` (square corners) unless you pass `rounded` explicitly.
-     */
-    rounded?: keyof typeof roundedClass;
-    /** Height and horizontal padding: `default` or `lg` only. */
-    size?: keyof typeof sizeClass;
-    /**
-     * Square icon-only control; same `size` presets (`default` | `lg`). Pair with
-     * `aria-label` (or `title`) when there is no visible text.
-     */
-    iconOnly?: boolean;
-};
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-export { Button, type ButtonProps };
+export { Button, type ButtonProps, type CommonProps, type Props };

package/dist/react/button.js

@@ -1,68 +1,283 @@
-import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
+import { Link, Button as Button$1 } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-// src/react/button.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+function sortCx(classes) {
+  return classes;
 }
-var sizeClass = {
-  xs: "h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3",
-  default: "h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4",
-  lg: "h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5"
+
+// ../../utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
 };
-var iconOnlySizeClass = {
-  xs: "size-8 min-h-8 min-w-8 gap-0 p-0 [&_svg:not([class*='size-'])]:size-3",
-  default: "size-10 min-h-10 min-w-10 gap-0 p-0 [&_svg:not([class*='size-'])]:size-4",
-  lg: "size-11 min-h-11 min-w-11 gap-0 p-0 [&_svg:not([class*='size-'])]:size-5"
+var isClassComponent = (component) => {
+  return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
 };
-var roundedClass = {
-  full: "rounded-full",
-  lg: "rounded-lg",
-  md: "rounded-md"
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
 };
-var variantClass = {
-  primary: "bg-primary text-background border border-transparent hover:bg-primary/90 active:bg-primary/85",
-  secondary: "bg-background text-primary border border-primary/10 hover:bg-primary/5",
-  destructive: "bg-background text-red-500 border border-red-500/25 hover:bg-red-500/5",
-  success: "bg-background text-green-500 border border-green-500/25 hover:bg-green-500/5"
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
 };
-var Button = React.forwardRef(
-  ({
-    className,
-    type = "button",
-    variant = "secondary",
-    rounded: roundedProp,
-    size = "default",
-    iconOnly = false,
-    disabled,
-    ...props
-  }, ref) => {
-    const rounded = roundedProp ?? (iconOnly ? "md" : "full");
-    return /* @__PURE__ */ jsx(
-      "button",
+var focusShadowPlain = "focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var focusShadowSkeuomorphic = "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-xs-skeuomorphic),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var skeuomorphicGradientBorderClass = [
+  "ring-1 ring-inset ring-transparent",
+  "before:pointer-events-none before:absolute before:inset-px before:rounded-[inherit] before:border before:border-[#ffffff1f] before:content-['']",
+  "before:[mask-image:linear-gradient(to_bottom,#000,transparent)]"
+].join(" ");
+var skeuomorphicShadowClass = ["shadow-xs-skeuomorphic", focusShadowSkeuomorphic, "overflow-hidden"].join(" ");
+var focusShadowSecondary = "focus-visible:outline-none focus-visible:[box-shadow:0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var secondaryInnerShadow = "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]";
+var secondaryShadowClass = ["relative overflow-hidden shadow-xs", secondaryInnerShadow, focusShadowSecondary].join(" ");
+var inputNumberButtonClass = [
+  "in-data-number-input:border-0 in-data-number-input:shadow-none in-data-number-input:!rounded-none in-data-number-input:!h-full in-data-number-input:!min-h-0 in-data-number-input:self-stretch in-data-number-input:overflow-hidden",
+  "in-data-number-input:before:hidden in-data-number-input:after:hidden",
+  "in-data-number-input:focus-visible:outline-none in-data-number-input:focus-visible:shadow-none in-data-number-input:focus-visible:ring-0 in-data-number-input:focus-visible:![box-shadow:none]"
+].join(" ");
+var inputAddonButtonClass = [
+  "in-data-input-wrapper:border-0 in-data-input-wrapper:shadow-none in-data-input-wrapper:!rounded-none in-data-input-wrapper:overflow-hidden",
+  "in-data-input-wrapper:in-data-trailing:border-l in-data-input-wrapper:in-data-trailing:border-solid in-data-input-wrapper:in-data-trailing:border-primary",
+  "in-data-input-wrapper:in-data-leading:border-r in-data-input-wrapper:in-data-leading:border-solid in-data-input-wrapper:in-data-leading:border-primary",
+  "in-data-input-wrapper:group-invalid:in-data-trailing:border-error_subtle in-data-input-wrapper:group-invalid:in-data-leading:border-error_subtle",
+  "in-data-input-wrapper:before:hidden in-data-input-wrapper:after:hidden",
+  "in-data-input-wrapper:focus-visible:outline-none in-data-input-wrapper:focus-visible:shadow-none in-data-input-wrapper:focus-visible:ring-0 in-data-input-wrapper:focus-visible:![box-shadow:none]"
+].join(" ");
+var styles = sortCx({
+  common: {
+    root: [
+      "group relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-full font-body outline-none before:absolute",
+      "font-semibold transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out",
+      "pressed:scale-[0.985] pressed:duration-100 pressed:ease-linear motion-reduce:pressed:scale-100",
+      "disabled:pointer-events-none disabled:cursor-not-allowed in-data-input-wrapper:disabled:opacity-100",
+      inputAddonButtonClass,
+      inputNumberButtonClass,
+      // Stretch to InputGroup row height; padding/typography follow `data-input-size` on the field (Figma 85:1269).
+      "in-data-input-wrapper:!h-full in-data-input-wrapper:!min-h-0 in-data-input-wrapper:self-stretch",
+      "in-data-input-wrapper:in-data-[input-size=sm]:gap-1 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=md]:gap-1 in-data-input-wrapper:in-data-[input-size=md]:px-3.5 in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=lg]:gap-1.5 in-data-input-wrapper:in-data-[input-size=lg]:px-4 in-data-input-wrapper:in-data-[input-size=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=lg]:text-md",
+      "*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+    ].join(" "),
+    icon: "pointer-events-none shrink-0 transition-inherit-all"
+  },
+  sizes: {
+    xs: {
+      root: [
+        "h-8 min-h-8 gap-1 px-[0.625rem] py-1.5 text-sm data-icon-only:size-8 data-icon-only:min-h-8 data-icon-only:min-w-8 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-4"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    sm: {
+      root: [
+        "h-9 min-h-9 gap-1 px-3 py-2 text-sm data-icon-only:size-9 data-icon-only:min-h-9 data-icon-only:min-w-9 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    md: {
+      root: [
+        "h-10 min-h-10 gap-1 px-3.5 py-2.5 text-sm data-icon-only:size-10 data-icon-only:min-h-10 data-icon-only:min-w-10 data-icon-only:p-2.5",
+        "in-data-input-wrapper:data-icon-only:p-3",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-4"
+    },
+    lg: {
+      root: "h-11 min-h-11 gap-1.5 px-4 py-2.5 text-md data-icon-only:size-11 data-icon-only:min-h-11 data-icon-only:min-w-11 data-icon-only:p-3 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    },
+    xl: {
+      root: "h-12 min-h-12 gap-1.5 px-[1.125rem] py-3 text-md data-icon-only:size-12 data-icon-only:min-h-12 data-icon-only:min-w-12 data-icon-only:p-3 data-icon-only:*:data-icon:size-6 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    }
+  },
+  colors: {
+    /** Figma Hierarchy=Primary — dark neutral solid; hover lightens to fg-tertiary_hover (#404040). */
+    primary: {
+      root: [
+        "bg-primary-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-fg-tertiary_hover dark:hover:bg-quaternary",
+        "disabled:opacity-30",
+        "data-loading:bg-fg-tertiary_hover dark:data-loading:bg-quaternary",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Brand — purple solid; hover darkens to bg-brand-solid_hover (#6d28d9). */
+    brand: {
+      root: [
+        "bg-brand-solid text-primary_on-brand",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-brand-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-brand-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-primary_on-brand"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Secondary — border-primary + shadow-xs + skeuomorphic inner rim overlay. */
+    secondary: {
+      root: [
+        "border border-solid border-primary bg-primary text-secondary",
+        secondaryShadowClass,
+        "hover:bg-primary_hover hover:text-secondary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-primary_hover",
+        "*:data-icon:text-fg-secondary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Tertiary */
+    tertiary: {
+      root: [
+        "border border-transparent bg-transparent text-tertiary",
+        focusShadowPlain,
+        "hover:bg-primary_hover hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-tertiary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link color — text + icons share brand-secondary; hover underlines with fg-brand-secondary. */
+    "link-color": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-brand-secondary shadow-none",
+        focusShadowPlain,
+        "hover:text-brand-secondary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-brand-secondary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link gray — text + icons share tertiary; hover underlines with fg-quaternary. */
+    "link-gray": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-tertiary shadow-none",
+        focusShadowPlain,
+        "hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-quaternary"
+      ].join(" ")
+    },
+    "primary-destructive": {
+      root: [
+        "bg-error-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-error-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    "secondary-destructive": {
+      root: [
+        "border border-solid border-primary bg-primary text-error-primary",
+        secondaryShadowClass,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-primary",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    "tertiary-destructive": {
+      root: [
+        "border border-transparent bg-transparent text-error-primary",
+        focusShadowPlain,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link (destructive) — text + icons share error-primary; hover underlines. */
+    "link-destructive": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-error-primary shadow-none",
+        focusShadowPlain,
+        "hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-current"
+      ].join(" ")
+    }
+  }
+});
+var Button = ({
+  size = "md",
+  color = "primary",
+  children,
+  className,
+  noTextPadding,
+  iconLeading: IconLeading,
+  iconTrailing: IconTrailing,
+  isDisabled: disabled,
+  isLoading: loading,
+  showTextWhileLoading,
+  ...props
+}) => {
+  const href = "href" in props ? props.href : void 0;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  const isLinkType = ["link-gray", "link-color", "link-destructive"].includes(color);
+  noTextPadding = isLinkType || noTextPadding;
+  const commonChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isValidElement(IconLeading) && IconLeading,
+    isReactComponent(IconLeading) && /* @__PURE__ */ jsx(IconLeading, { "data-icon": "leading", className: styles.common.icon }),
+    loading && /* @__PURE__ */ jsx(
+      "svg",
       {
-        type,
-        disabled,
-        "data-slot": "button",
-        "data-icon-only": iconOnly ? "" : void 0,
-        className: cn(
-          "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none scale-100 transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] active:duration-100 active:ease-linear [&_svg]:pointer-events-none [&_svg]:shrink-0",
-          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-          "focus-visible:border-ring font-medium lg:tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-          iconOnly ? iconOnlySizeClass[size] : sizeClass[size],
-          roundedClass[rounded],
-          variantClass[variant],
-          className
+        fill: "none",
+        "data-icon": "loading",
+        viewBox: "0 0 256 256",
+        "aria-hidden": true,
+        className: cx(
+          styles.common.icon,
+          "size-5 animate-spin",
+          !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
         ),
-        ref,
-        ...props
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60,61.46,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20-66.54-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"
+          }
+        )
       }
-    );
+    ),
+    children && /* @__PURE__ */ jsx("span", { "data-text": true, className: cx("transition-inherit-all", !noTextPadding && !isLinkType && "px-0.5"), children }),
+    isValidElement(IconTrailing) && IconTrailing,
+    isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, { "data-icon": "trailing", className: styles.common.icon })
+  ] });
+  const commonProps = {
+    "data-icon-only": isIcon ? true : void 0,
+    "data-loading": loading ? true : void 0,
+    ...props,
+    isDisabled: disabled || loading,
+    className: cx(
+      styles.common.root,
+      styles.sizes[size].root,
+      styles.colors[color].root,
+      isLinkType && styles.sizes[size].linkRoot,
+      (loading || href && (disabled || loading)) && "pointer-events-none",
+      loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+      className
+    ),
+    children: commonChildren
+  };
+  if ("href" in commonProps) {
+    return /* @__PURE__ */ jsx(Link, { ...commonProps, href: disabled || loading ? void 0 : href });
   }
-);
-Button.displayName = "Button";
+  return /* @__PURE__ */ jsx(Button$1, { ...commonProps, type: commonProps.type || "button", isPending: loading });
+};
 
 export { Button };
 //# sourceMappingURL=button.js.map

package/dist/react/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/button.tsx"],"names":[],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,IAAM,SAAA,GAAY;AAAA,EAChB,EAAA,EAAI,qFAAA;AAAA,EACJ,OAAA,EACE,uFAAA;AAAA,EACF,EAAA,EAAI;AACN,CAAA;AAGA,IAAM,iBAAA,GAAoB;AAAA,EACxB,EAAA,EAAI,uEAAA;AAAA,EACJ,OAAA,EACE,0EAAA;AAAA,EACF,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,cAAA;AAAA,EACN,EAAA,EAAI,YAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,YAAA,GAAe;AAAA,EACnB,OAAA,EACE,+FAAA;AAAA,EACF,SAAA,EACE,wEAAA;AAAA,EACF,WAAA,EACE,wEAAA;AAAA,EACF,OAAA,EACE;AACJ,CAAA;AAuBA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EACnB,CACE;AAAA,IACE,SAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,OAAA,GAAU,WAAA;AAAA,IACV,OAAA,EAAS,WAAA;AAAA,IACT,IAAA,GAAO,SAAA;AAAA,IACP,QAAA,GAAW,KAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,OAAA,GAAU,WAAA,KAAgB,QAAA,GAAW,IAAA,GAAO,MAAA,CAAA;AAElD,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA,EAAU,QAAA;AAAA,QACV,gBAAA,EAAgB,WAAW,EAAA,GAAK,MAAA;AAAA,QAChC,SAAA,EAAW,EAAA;AAAA,UACT,iSAAA;AAAA,UACA,8EAAA;AAAA,UACA,4GAAA;AAAA,UACA,QAAA,GAAW,iBAAA,CAAkB,IAAI,CAAA,GAAI,UAAU,IAAI,CAAA;AAAA,UACnD,aAAa,OAAO,CAAA;AAAA,UACpB,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"button.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst sizeClass = {\n  xs: \"h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3\",\n  default:\n    \"h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4\",\n  lg: \"h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5\",\n} as const;\n\n/** Square hit targets for `iconOnly` — same keys as `sizeClass` (`default` | `lg`). */\nconst iconOnlySizeClass = {\n  xs: \"size-8 min-h-8 min-w-8 gap-0 p-0 [&_svg:not([class*='size-'])]:size-3\",\n  default:\n    \"size-10 min-h-10 min-w-10 gap-0 p-0 [&_svg:not([class*='size-'])]:size-4\",\n  lg: \"size-11 min-h-11 min-w-11 gap-0 p-0 [&_svg:not([class*='size-'])]:size-5\",\n} as const;\n\nconst roundedClass = {\n  full: \"rounded-full\",\n  lg: \"rounded-lg\",\n  md: \"rounded-md\",\n} as const;\n\nconst variantClass = {\n  primary:\n    \"bg-primary text-background border border-transparent hover:bg-primary/90 active:bg-primary/85\",\n  secondary:\n    \"bg-background text-primary border border-primary/10 hover:bg-primary/5\",\n  destructive:\n    \"bg-background text-red-500 border border-red-500/25 hover:bg-red-500/5\",\n  success:\n    \"bg-background text-green-500 border border-green-500/25 hover:bg-green-500/5\",\n} as const;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> & {\n  /**\n   * Visual style: neutral (`secondary`, `primary`), or outline (`destructive`,\n   * `success`) using Tailwind `red-500` / `green-500` text and matching borders on\n   * `bg-background` (no solid fill).\n   */\n  variant?: keyof typeof variantClass;\n  /**\n   * Corner radius. Labeled buttons default to `full` (pill). `iconOnly` buttons\n   * default to `md` (square corners) unless you pass `rounded` explicitly.\n   */\n  rounded?: keyof typeof roundedClass;\n  /** Height and horizontal padding: `default` or `lg` only. */\n  size?: keyof typeof sizeClass;\n  /**\n   * Square icon-only control; same `size` presets (`default` | `lg`). Pair with\n   * `aria-label` (or `title`) when there is no visible text.\n   */\n  iconOnly?: boolean;\n};\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      type = \"button\",\n      variant = \"secondary\",\n      rounded: roundedProp,\n      size = \"default\",\n      iconOnly = false,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const rounded = roundedProp ?? (iconOnly ? \"md\" : \"full\");\n\n    return (\n      <button\n        type={type}\n        disabled={disabled}\n        data-slot=\"button\"\n        data-icon-only={iconOnly ? \"\" : undefined}\n        className={cn(\n          \"inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none scale-100 transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] active:duration-100 active:ease-linear [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n          \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n          \"focus-visible:border-ring font-medium lg:tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n          iconOnly ? iconOnlySizeClass[size] : sizeClass[size],\n          roundedClass[rounded],\n          variantClass[variant],\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button };\n"]}
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../utils/is-react-component.ts","../../../../components/base/buttons/button.tsx"],"names":["AriaLink","AriaButton"],"mappings":"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","file":"button.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","/* We cannot use type `unknown` instead of `any` here because it will break the type assertion `isReactComponent` function is providing. */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type React from \"react\";\n\ntype ReactComponent = React.FC<any> | React.ComponentClass<any, any>;\n\n/**\n * Checks if a given value is a function component.\n */\nexport const isFunctionComponent = (component: any): component is React.FC<any> => {\n    return typeof component === \"function\";\n};\n\n/**\n * Checks if a given value is a class component.\n */\nexport const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {\n    return typeof component === \"function\" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);\n};\n\n/**\n * Checks if a given value is a forward ref component.\n */\nexport const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {\n    return typeof component === \"object\" && component !== null && component.$$typeof.toString() === \"Symbol(react.forward_ref)\";\n};\n\n/**\n * Checks if a given value is a valid React component.\n */\nexport const isReactComponent = (component: any): component is ReactComponent => {\n    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);\n};\n","\"use client\";\n\nimport type { FC, ReactElement, ReactNode } from \"react\";\nimport React, { isValidElement } from \"react\";\nimport type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from \"react-aria-components\";\nimport { Button as AriaButton, Link as AriaLink } from \"react-aria-components\";\nimport { cx, sortCx } from \"@/utils/cx\";\nimport { isReactComponent } from \"@/utils/is-react-component\";\n\n/**\n * Figma: Buttons/Button (3287:427074), Buttons/Button destructive (6218:85578)\n *\n * Hierarchy mapping (Figma → Untitled `color` prop):\n * - Primary  → `primary`  (dark neutral solid — default CTA, black in light mode)\n * - Brand    → `brand`    (purple solid)\n * - Secondary / Tertiary / Link color / Link gray → same names\n *\n * Focus: Figma spread-shadow ring (2px surface gap + 4px focus-ring), not outline.\n * Skeuomorphic: shadow-xs-skeuomorphic + gradient top rim (#ffffff1f).\n */\n\n/** Plain focus — Tertiary, Link color, Link gray (Figma Focus rings/focus-ring). */\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\n/** Skeuomorphic focus — Primary, Brand, Secondary (Figma focus-ring-shadow-xs-skeuomorphic). */\nconst focusShadowSkeuomorphic =\n    \"focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-xs-skeuomorphic),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\n/** Figma Gradient/skeuemorphic-gradient-border — 1px inner rim, strongest at top. */\nconst skeuomorphicGradientBorderClass = [\n    \"ring-1 ring-inset ring-transparent\",\n    \"before:pointer-events-none before:absolute before:inset-px before:rounded-[inherit] before:border before:border-[#ffffff1f] before:content-['']\",\n    \"before:[mask-image:linear-gradient(to_bottom,#000,transparent)]\",\n].join(\" \");\n\nconst skeuomorphicShadowClass = [\"shadow-xs-skeuomorphic\", focusShadowSkeuomorphic, \"overflow-hidden\"].join(\" \");\n\n/** Secondary focus — shadow-xs + spread focus ring (Figma focus-ring-shadow-xs-skeuomorphic; keeps real border). */\nconst focusShadowSecondary =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\n/** Secondary depth — bottom inset only; outer edge is border-primary (inner 1px rim stacks visually with border). */\nconst secondaryInnerShadow =\n    \"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]\";\n\nconst secondaryShadowClass = [\"relative overflow-hidden shadow-xs\", secondaryInnerShadow, focusShadowSecondary].join(\" \");\n\n/** Number input stepper buttons — shell owns border/focus; match outer rounded-lg corners. */\nconst inputNumberButtonClass =\n    [\n        \"in-data-number-input:border-0 in-data-number-input:shadow-none in-data-number-input:!rounded-none in-data-number-input:!h-full in-data-number-input:!min-h-0 in-data-number-input:self-stretch in-data-number-input:overflow-hidden\",\n        \"in-data-number-input:before:hidden in-data-number-input:after:hidden\",\n        \"in-data-number-input:focus-visible:outline-none in-data-number-input:focus-visible:shadow-none in-data-number-input:focus-visible:ring-0 in-data-number-input:focus-visible:![box-shadow:none]\",\n    ].join(\" \");\n\n/** InputGroup addon buttons — shell owns outer border/corners; button is a flat inner segment (like NativeSelect). */\nconst inputAddonButtonClass =\n    [\n        \"in-data-input-wrapper:border-0 in-data-input-wrapper:shadow-none in-data-input-wrapper:!rounded-none in-data-input-wrapper:overflow-hidden\",\n        \"in-data-input-wrapper:in-data-trailing:border-l in-data-input-wrapper:in-data-trailing:border-solid in-data-input-wrapper:in-data-trailing:border-primary\",\n        \"in-data-input-wrapper:in-data-leading:border-r in-data-input-wrapper:in-data-leading:border-solid in-data-input-wrapper:in-data-leading:border-primary\",\n        \"in-data-input-wrapper:group-invalid:in-data-trailing:border-error_subtle in-data-input-wrapper:group-invalid:in-data-leading:border-error_subtle\",\n        \"in-data-input-wrapper:before:hidden in-data-input-wrapper:after:hidden\",\n        \"in-data-input-wrapper:focus-visible:outline-none in-data-input-wrapper:focus-visible:shadow-none in-data-input-wrapper:focus-visible:ring-0 in-data-input-wrapper:focus-visible:![box-shadow:none]\",\n    ].join(\" \");\n\nconst styles = sortCx({\n    common: {\n        root: [\n            \"group relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-full font-body outline-none before:absolute\",\n            \"font-semibold transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out\",\n            \"pressed:scale-[0.985] pressed:duration-100 pressed:ease-linear motion-reduce:pressed:scale-100\",\n            \"disabled:pointer-events-none disabled:cursor-not-allowed in-data-input-wrapper:disabled:opacity-100\",\n            inputAddonButtonClass,\n            inputNumberButtonClass,\n            // Stretch to InputGroup row height; padding/typography follow `data-input-size` on the field (Figma 85:1269).\n            \"in-data-input-wrapper:!h-full in-data-input-wrapper:!min-h-0 in-data-input-wrapper:self-stretch\",\n            \"in-data-input-wrapper:in-data-[input-size=sm]:gap-1 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:text-sm\",\n            \"in-data-input-wrapper:in-data-[input-size=md]:gap-1 in-data-input-wrapper:in-data-[input-size=md]:px-3.5 in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:text-sm\",\n            \"in-data-input-wrapper:in-data-[input-size=lg]:gap-1.5 in-data-input-wrapper:in-data-[input-size=lg]:px-4 in-data-input-wrapper:in-data-[input-size=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=lg]:text-md\",\n            \"*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:transition-inherit-all\",\n        ].join(\" \"),\n        icon: \"pointer-events-none shrink-0 transition-inherit-all\",\n    },\n    sizes: {\n        xs: {\n            root: [\n                \"h-8 min-h-8 gap-1 px-[0.625rem] py-1.5 text-sm data-icon-only:size-8 data-icon-only:min-h-8 data-icon-only:min-w-8 data-icon-only:p-2\",\n                \"in-data-input-wrapper:data-icon-only:p-2.5\",\n                \"*:data-icon:size-4\",\n            ].join(\" \"),\n            linkRoot: \"h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3\",\n        },\n        sm: {\n            root: [\n                \"h-9 min-h-9 gap-1 px-3 py-2 text-sm data-icon-only:size-9 data-icon-only:min-h-9 data-icon-only:min-w-9 data-icon-only:p-2\",\n                \"in-data-input-wrapper:data-icon-only:p-2.5\",\n                \"*:data-icon:size-5\",\n            ].join(\" \"),\n            linkRoot: \"h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3\",\n        },\n        md: {\n            root: [\n                \"h-10 min-h-10 gap-1 px-3.5 py-2.5 text-sm data-icon-only:size-10 data-icon-only:min-h-10 data-icon-only:min-w-10 data-icon-only:p-2.5\",\n                \"in-data-input-wrapper:data-icon-only:p-3\",\n                \"*:data-icon:size-5\",\n            ].join(\" \"),\n            linkRoot: \"h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-4\",\n        },\n        lg: {\n            root: \"h-11 min-h-11 gap-1.5 px-4 py-2.5 text-md data-icon-only:size-11 data-icon-only:min-h-11 data-icon-only:min-w-11 data-icon-only:p-3 *:data-icon:size-5\",\n            linkRoot: \"h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4\",\n        },\n        xl: {\n            root: \"h-12 min-h-12 gap-1.5 px-[1.125rem] py-3 text-md data-icon-only:size-12 data-icon-only:min-h-12 data-icon-only:min-w-12 data-icon-only:p-3 data-icon-only:*:data-icon:size-6 *:data-icon:size-5\",\n            linkRoot: \"h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4\",\n        },\n    },\n\n    colors: {\n        /** Figma Hierarchy=Primary — dark neutral solid; hover lightens to fg-tertiary_hover (#404040). */\n        primary: {\n            root: [\n                \"bg-primary-solid text-white\",\n                skeuomorphicShadowClass,\n                skeuomorphicGradientBorderClass,\n                \"hover:bg-fg-tertiary_hover dark:hover:bg-quaternary\",\n                \"disabled:opacity-30\",\n                \"data-loading:bg-fg-tertiary_hover dark:data-loading:bg-quaternary\",\n                \"*:data-icon:not([data-icon=loading]):text-white/70\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Brand — purple solid; hover darkens to bg-brand-solid_hover (#6d28d9). */\n        brand: {\n            root: [\n                \"bg-brand-solid text-primary_on-brand\",\n                skeuomorphicShadowClass,\n                skeuomorphicGradientBorderClass,\n                \"hover:bg-brand-solid_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-brand-solid_hover\",\n                \"*:data-icon:not([data-icon=loading]):text-primary_on-brand\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Secondary — border-primary + shadow-xs + skeuomorphic inner rim overlay. */\n        secondary: {\n            root: [\n                \"border border-solid border-primary bg-primary text-secondary\",\n                secondaryShadowClass,\n                \"hover:bg-primary_hover hover:text-secondary_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-primary_hover\",\n                \"*:data-icon:text-fg-secondary hover:*:data-icon:text-fg-quaternary_hover\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Tertiary */\n        tertiary: {\n            root: [\n                \"border border-transparent bg-transparent text-tertiary\",\n                focusShadowPlain,\n                \"hover:bg-primary_hover hover:text-tertiary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-icon:text-fg-tertiary hover:*:data-icon:text-fg-quaternary_hover\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Link color — text + icons share brand-secondary; hover underlines with fg-brand-secondary. */\n        \"link-color\": {\n            root: [\n                \"h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-brand-secondary shadow-none\",\n                focusShadowPlain,\n                \"hover:text-brand-secondary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-brand-secondary\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Link gray — text + icons share tertiary; hover underlines with fg-quaternary. */\n        \"link-gray\": {\n            root: [\n                \"h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-tertiary shadow-none\",\n                focusShadowPlain,\n                \"hover:text-tertiary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-quaternary\",\n            ].join(\" \"),\n        },\n        \"primary-destructive\": {\n            root: [\n                \"bg-error-solid text-white\",\n                skeuomorphicShadowClass,\n                skeuomorphicGradientBorderClass,\n                \"hover:bg-error-solid_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-error-solid_hover\",\n                \"*:data-icon:not([data-icon=loading]):text-white/70\",\n            ].join(\" \"),\n        },\n        \"secondary-destructive\": {\n            root: [\n                \"border border-solid border-primary bg-primary text-error-primary\",\n                secondaryShadowClass,\n                \"hover:bg-error-primary hover:text-error-primary_hover\",\n                \"disabled:opacity-50\",\n                \"data-loading:bg-error-primary\",\n                \"*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary\",\n            ].join(\" \"),\n        },\n        \"tertiary-destructive\": {\n            root: [\n                \"border border-transparent bg-transparent text-error-primary\",\n                focusShadowPlain,\n                \"hover:bg-error-primary hover:text-error-primary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary\",\n            ].join(\" \"),\n        },\n        /** Figma Hierarchy=Link (destructive) — text + icons share error-primary; hover underlines. */\n        \"link-destructive\": {\n            root: [\n                \"h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-error-primary shadow-none\",\n                focusShadowPlain,\n                \"hover:text-error-primary_hover\",\n                \"disabled:opacity-50\",\n                \"*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-current\",\n            ].join(\" \"),\n        },\n    },\n});\n\n/**\n * Common props shared between button and anchor variants\n */\nexport interface CommonProps {\n    /** Disables the button and shows a disabled state */\n    isDisabled?: boolean;\n    /** Shows a loading spinner and disables the button */\n    isLoading?: boolean;\n    /** The size variant of the button */\n    size?: keyof typeof styles.sizes;\n    /** The color variant of the button */\n    color?: keyof typeof styles.colors;\n    /** Icon component or element to show before the text */\n    iconLeading?: FC<{ className?: string }> | ReactNode;\n    /** Icon component or element to show after the text */\n    iconTrailing?: FC<{ className?: string }> | ReactNode;\n    /** Removes horizontal padding from the text content */\n    noTextPadding?: boolean;\n    /** When true, keeps the text visible during loading state */\n    showTextWhileLoading?: boolean;\n\n    children?: ReactNode;\n    className?: string;\n}\n\n/**\n * Props for the button variant (non-link)\n */\nexport interface ButtonProps extends CommonProps, Omit<AriaButtonProps, \"children\" | \"className\"> {}\n/**\n * Props for the link variant (anchor tag)\n */\ninterface LinkProps extends CommonProps, Omit<AriaLinkProps, \"children\" | \"className\"> {\n    href: NonNullable<AriaLinkProps[\"href\"]>;\n}\n\n/** Union type of button and link props */\nexport type Props = ButtonProps | LinkProps;\n\nexport const Button: {\n    (props: LinkProps): ReactElement<LinkProps>;\n    (props: ButtonProps): ReactElement<ButtonProps>;\n} = ({\n    size = \"md\",\n    color = \"primary\",\n    children,\n    className,\n    noTextPadding,\n    iconLeading: IconLeading,\n    iconTrailing: IconTrailing,\n    isDisabled: disabled,\n    isLoading: loading,\n    showTextWhileLoading,\n    ...props\n}) => {\n    const href = \"href\" in props ? props.href : undefined;\n\n    const isIcon = (IconLeading || IconTrailing) && !children;\n    const isLinkType = [\"link-gray\", \"link-color\", \"link-destructive\"].includes(color);\n\n    noTextPadding = isLinkType || noTextPadding;\n\n    const commonChildren = (\n        <>\n            {isValidElement(IconLeading) && IconLeading}\n            {isReactComponent(IconLeading) && <IconLeading data-icon=\"leading\" className={styles.common.icon} />}\n\n            {loading && (\n                <svg\n                    fill=\"none\"\n                    data-icon=\"loading\"\n                    viewBox=\"0 0 256 256\"\n                    aria-hidden\n                    className={cx(\n                        styles.common.icon,\n                        \"size-5 animate-spin\",\n                        !showTextWhileLoading && \"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\",\n                    )}\n                >\n                    <path\n                        fill=\"currentColor\"\n                        d=\"M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60,61.46,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20-66.54-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z\"\n                    />\n                </svg>\n            )}\n\n            {children && (\n                <span data-text className={cx(\"transition-inherit-all\", !noTextPadding && !isLinkType && \"px-0.5\")}>\n                    {children}\n                </span>\n            )}\n\n            {isValidElement(IconTrailing) && IconTrailing}\n            {isReactComponent(IconTrailing) && <IconTrailing data-icon=\"trailing\" className={styles.common.icon} />}\n        </>\n    );\n\n    const commonProps = {\n        \"data-icon-only\": isIcon ? true : undefined,\n        \"data-loading\": loading ? true : undefined,\n        ...props,\n        isDisabled: disabled || loading,\n        className: cx(\n            styles.common.root,\n            styles.sizes[size].root,\n            styles.colors[color].root,\n            isLinkType && styles.sizes[size].linkRoot,\n            (loading || (href && (disabled || loading))) && \"pointer-events-none\",\n            loading && (showTextWhileLoading ? \"[&>*:not([data-icon=loading]):not([data-text])]:hidden\" : \"[&>*:not([data-icon=loading])]:invisible\"),\n            className,\n        ),\n        children: commonChildren,\n    };\n\n    if (\"href\" in commonProps) {\n        return <AriaLink {...commonProps} href={disabled || loading ? undefined : href} />;\n    }\n\n    return <AriaButton {...commonProps} type={commonProps.type || \"button\"} isPending={loading} />;\n};\n"]}

package/dist/react/checkbox.d.ts

@@ -1,11 +1,28 @@
-import * as React from 'react';
+import * as react from 'react';
+import { Ref, ReactNode } from 'react';
+import { CheckboxProps as CheckboxProps$1 } from 'react-aria-components';
 
-type CheckboxProps = Omit<React.ComponentProps<"button">, "type" | "role" | "aria-checked" | "children"> & {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    onCheckedChange?: (next: boolean) => void;
-    indeterminate?: boolean;
+interface CheckboxBaseProps {
+    size?: "sm" | "md";
+    className?: string;
+    isFocusVisible?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    isIndeterminate?: boolean;
+}
+declare const CheckboxBase: {
+    ({ className, isSelected, isDisabled, isIndeterminate, size, isFocusVisible }: CheckboxBaseProps): react.JSX.Element;
+    displayName: string;
+};
+interface CheckboxProps extends CheckboxProps$1 {
+    ref?: Ref<HTMLLabelElement>;
+    size?: "sm" | "md";
+    label?: ReactNode;
+    hint?: ReactNode;
+}
+declare const Checkbox: {
+    ({ label, hint, size, className, ...ariaCheckboxProps }: CheckboxProps): react.JSX.Element;
+    displayName: string;
 };
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-export { Checkbox, type CheckboxProps };
+export { Checkbox, CheckboxBase, type CheckboxBaseProps };