@primer/react-brand/esm/Button/Button.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../node_modules/clsx/dist/clsx.js";
import { useAnimation as t } from "../animation/useAnimation.js";
import { Text as n } from "../Text/Text.js";
import { ExpandableArrow as r } from "../ExpandableArrow/ExpandableArrow.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-kII0kqk3.css';/* empty css                                                                                                    */
import i from "./Button.module.js";
import a, { forwardRef as o, useCallback as s } from "react";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
//#region src/Button/Button.tsx
var u = [
	"primary",
	"secondary",
	"subtle"
], d = [
	"small",
	"medium",
	"large"
], f = u[1], p = d[1], m = {
	root: "Button",
	get leadingVisual() {
		return `${this.root}-leading-visual`;
	},
	get trailingVisual() {
		return `${this.root}-trailing-visual`;
	},
	get expandableArrow() {
		return `${this.root}-expandable-arrow`;
	}
}, h = o(({ animate: o, as: u, variant: d = f, size: h = p, hasArrow: g, block: _ = !1, className: v, children: y, disabled: b, "aria-disabled": x, onMouseEnter: S, onMouseLeave: C, onFocus: w, onBlur: T, leadingVisual: E, trailingVisual: D, style: O, ...k }, A) => {
	let [j, M] = a.useState(!1), [N, P] = a.useState(!1), F = u || "button", I = b || x === "true" || typeof x == "boolean" && x === !0, { classes: L, styles: R } = t(o), z = !!g, B = s((e) => {
		if (a.isValidElement(e)) return e;
		if (typeof e == "function") return a.createElement(e);
	}, []), V = B(E), H = B(D), U = s((e) => {
		I || (M(!0), S?.(e));
	}, [I, S]), W = s((e) => {
		I || (M(!1), C?.(e));
	}, [I, C]), G = s((e) => {
		I || (P(!0), w?.(e));
	}, [I, w]), K = s((e) => {
		I || (P(!1), T?.(e));
	}, [I, T]);
	return /* @__PURE__ */ l(F, {
		ref: A,
		className: e(i.Button, i[`Button--${d}`], i[`Button--size-${h}`], _ && i["Button--block"], I && i["Button--disabled"], L, v),
		onMouseEnter: U,
		onMouseLeave: W,
		onFocus: G,
		onBlur: K,
		disabled: I && F === "button" || void 0,
		"aria-disabled": I && F !== "button" || void 0,
		style: {
			...R,
			...O
		},
		...k,
		children: [
			a.isValidElement(V) && /* @__PURE__ */ c("span", {
				className: i["Button__leading-visual"],
				"data-testid": m.leadingVisual,
				children: a.cloneElement(V, {
					className: e(i["Button__icon-visual"], I && i["Button__icon-visual--disabled"]),
					"aria-hidden": "true",
					focusable: "false"
				})
			}),
			/* @__PURE__ */ c("span", {
				className: i.Button__text,
				children: /* @__PURE__ */ c(n, {
					as: "span",
					size: h === "small" ? "100" : h === "medium" ? "200" : "400",
					weight: "medium",
					className: e(i["Button--label"], i[`Button--label-${h}`], i[`Button--label-${d}`], I && i["Button-label--disabled"]),
					children: y
				})
			}),
			!D && z && /* @__PURE__ */ c("span", {
				className: e(i["Button__trailing-visual"]),
				children: /* @__PURE__ */ c(r, {
					hidden: !0,
					className: e(i["Button-arrow"], I && i["Button-arrow--disabled"]),
					expanded: !I && (j || N),
					"data-testid": m.expandableArrow
				})
			}),
			a.isValidElement(H) && /* @__PURE__ */ c("span", {
				className: e(i["Button__trailing-visual"]),
				"data-testid": m.trailingVisual,
				children: a.cloneElement(H, {
					className: e(i["Button__icon-visual"], I && i["Button__icon-visual--disabled"]),
					"aria-hidden": "true",
					focusable: "false"
				})
			})
		]
	});
}), g = Object.assign(h, { testIds: m });
//#endregion
export { g as Button, d as ButtonSizes, u as ButtonVariants, h as _Button, p as defaultButtonSize, f as defaultButtonVariant };

//# sourceMappingURL=Button.js.map