@shopify/shop-minis-react/dist/components/atoms/button.js

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import { jsx as s } from "react/jsx-runtime";
import * as b from "react";
import { cva as l } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
import { cn as u } from "../../lib/utils.js";
import { Touchable as c } from "./touchable.js";
import { Root as g } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
const h = l(
  "flex w-full items-center justify-center gap-3 whitespace-nowrap rounded-xl text-base font-semibold disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 shrink-0 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        primary: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
        secondary: "bg-slate-900 text-white shadow-xs hover:bg-slate-800",
        tertiary: "bg-slate-100 text-slate-900 shadow-xs hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700",
        blurred: "bg-black/20 text-white shadow-xs hover:bg-black/30 backdrop-blur-md border border-white/20",
        text: "bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
        borderless: "bg-transparent text-primary hover:text-primary/80",
        borderlessUnbranded: "bg-transparent text-foreground hover:text-foreground/80",
        outlined: "border border-border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground",
        dangerous: "bg-destructive text-white shadow-xs hover:bg-destructive/90",
        "outlined-dangerous": "border border-destructive bg-transparent text-destructive shadow-xs hover:bg-destructive/10"
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
        icon: "size-9"
      }
    },
    defaultVariants: {
      variant: "primary",
      size: "default"
    }
  }
);
function x({
  className: r,
  variant: o,
  size: e,
  asChild: t = !1,
  ...a
}) {
  return /* @__PURE__ */ s(
    t ? g : "button",
    {
      "data-slot": "button",
      className: u(h({ variant: o, size: e, className: r })),
      ...a
    }
  );
}
function y({
  className: r,
  variant: o,
  size: e,
  onClick: t,
  stopPropagation: a = !1,
  ...n
}) {
  const d = b.useCallback(
    (i) => {
      t?.(i);
    },
    [t]
  );
  return /* @__PURE__ */ s(
    c,
    {
      onClick: d,
      stopPropagation: a,
      className: e === "icon" ? "flex w-auto" : "flex w-full",
      children: /* @__PURE__ */ s(
        x,
        {
          className: r,
          variant: o,
          size: e,
          ...n
        }
      )
    }
  );
}
export {
  y as Button,
  h as buttonVariants
};
//# sourceMappingURL=button.js.map