alinea/dist/ui/Button.js

Headless git-based CMS

import {
  dist_default
} from "../chunks/chunk-A5O3N2GS.js";
import "../chunks/chunk-NZLE2WMY.js";

// src/ui/Button.module.scss
var Button_module_default = {
  "root": "alinea-Button",
  "is-medium": "alinea-Button-is-medium",
  "isMedium": "alinea-Button-is-medium",
  "is-large": "alinea-Button-is-large",
  "isLarge": "alinea-Button-is-large",
  "is-outline": "alinea-Button-is-outline",
  "isOutline": "alinea-Button-is-outline",
  "is-disabled": "alinea-Button-is-disabled",
  "isDisabled": "alinea-Button-is-disabled"
};

// src/ui/Button.tsx
import { Icon } from "./Icon.js";
import { HStack } from "./Stack.js";
import { jsx, jsxs } from "react/jsx-runtime";
var styles = dist_default(Button_module_default);
function Button({
  as = "button",
  children,
  size = "medium",
  icon,
  iconRight,
  outline,
  disabled,
  variant,
  ...props
}) {
  const Tag = as;
  return /* @__PURE__ */ jsx(
    Tag,
    {
      ...props,
      disabled,
      className: styles.root(
        size,
        variant,
        { outline, disabled },
        dist_default.merge(props)
      ),
      children: /* @__PURE__ */ jsxs(HStack, { center: true, gap: 8, children: [
        /* @__PURE__ */ jsx(Icon, { icon, size: 18 }),
        /* @__PURE__ */ jsx("span", { children }),
        /* @__PURE__ */ jsx(Icon, { icon: iconRight })
      ] })
    }
  );
}
export {
  Button
};