@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
139 lines (138 loc) • 6.35 kB
JavaScript
"use client";
import { jsxs as O, jsx as c } from "react/jsx-runtime";
import { c as p } from "./index.DL9mof6u.js";
import { forwardRef as T } from "react";
import { u as r } from "./useBreakpoint.1txsny17.js";
import { D as F } from "./Icon.CDLyB7Pv.js";
import { DSSpinner as L } from "../spinner.C9qCeq0R.js";
import { Tooltip as k } from "../tooltip.Cj3AvYgB.js";
import { g as a } from "./helpers.CexwVao7.js";
import "./index.D-sRdssb.js";
import '../assets/Button.CmeGVEAY.css';const C = "ds-button_root_146u3_1", A = "ds-button_root--highlight_146u3_75", E = "ds-button_root--dark-highlight_146u3_75", P = "ds-button_root--filled_146u3_151", x = "ds-button_root--outline_146u3_179", V = "ds-button_root--ghost_146u3_206", j = "ds-button_root--ghost-flush_146u3_231", R = "ds-button_root--small_146u3_237", U = "ds-button_root--navigation_146u3_317", M = "ds-button_root--navigation--stretched_146u3_393", Z = "ds-button_root--navigation--stretched--icon-left_146u3_396", q = "ds-button_root--dark-filled_146u3_399", J = "ds-button_root--dark-outline_146u3_456", K = "ds-button_root--dark-ghost_146u3_512", Q = "ds-button_root--dark-ghost-flush_146u3_566", W = "ds-button_root--stretched_146u3_641", X = "ds-button_root--icon-left_146u3_644", Y = "ds-button_root--icon-only_146u3_647", $ = "ds-button_root--icon-only-small_146u3_656", z = "ds-button_icon--navigation_146u3_672", oo = "ds-button_icon--hidden_146u3_679", to = "ds-button_label--hidden_146u3_683", no = "ds-button_label--loading_146u3_695", eo = "ds-button_loader_146u3_699", o = {
root: C,
rootHighlight: A,
rootDarkHighlight: E,
rootFilled: P,
rootOutline: x,
rootGhost: V,
rootGhostFlush: j,
rootSmall: R,
rootNavigation: U,
rootNavigationStretched: M,
rootNavigationStretchedIconLeft: Z,
rootDarkFilled: q,
rootDarkOutline: J,
rootDarkGhost: K,
rootDarkGhostFlush: Q,
rootStretched: W,
rootIconLeft: X,
rootIconOnly: Y,
rootIconOnlySmall: $,
iconNavigation: z,
iconHidden: oo,
labelHidden: to,
labelLoading: no,
loader: eo
}, bo = ["medium", "small"], po = ["highlight", "filled", "outline", "ghost", "navigation"], ro = ({
hideLabel: f,
iconName: m,
iconSource: b,
isFlush: d,
size: s,
stretched: l,
theme: u,
variant: e
}) => {
if (e === "navigation" && (s === "small" && console.warn(a("DSButton", 'A "size" prop should not be used in combination with variant="navigation". Please remove the "size" prop.')), u === "dark"))
throw new Error(a("DSButton", 'A DSButton with variant="navigation" does not support theme="dark". Please remove the "theme" prop.'));
e !== "ghost" && d ? console.warn(a("DSButton", 'The "isFlush" prop only has an effect when used with variant="ghost". Please remove the "isFlush" prop or set variant="ghost".')) : e === "ghost" && d && l && console.warn(a("DSButton", 'The "stretched" and "isFlush" props do not have an effect when used together. Please remove one of them.')), f && (!m && !b && console.warn(a("DSButton", 'The "hideLabel" prop is set to true but no icon is provided via "iconName" or "iconSource". Please provide an icon to ensure the button is not empty when the label is hidden.')), l && console.warn(a("DSButton", 'The "stretched" and "hideLabel" props do not have an effect when used together. Please remove one of them.')));
}, so = T(({
children: f,
aria: m,
className: b,
disabled: d = !1,
hideLabel: s = !1,
iconName: l,
iconPosition: u = "left",
iconSource: e,
isFlush: h = !1,
loading: i = !1,
size: _ = "medium",
stretched: g = !1,
theme: n = "light",
tooltip: D,
variant: t = "filled",
onClick: S,
...w
}, I) => {
process.env.NODE_ENV !== "production" && ro({
hideLabel: r(s),
iconName: l,
iconSource: e,
isFlush: h,
size: _,
stretched: g,
theme: n,
variant: t
});
const y = p(o.root, b, {
// variant
[]: t === "filled",
[]: t === "highlight",
[]: t === "outline",
[]: t === "ghost" && h !== !0,
[]: t === "navigation",
[]: t === "navigation" && r(g) && u === "right",
[]: t === "navigation" && r(g) && u === "left",
// isFlush
[]: t === "ghost" && h === !0,
// dark theme
[]: n === "dark" && t === "filled",
[]: n === "dark" && t === "highlight",
[]: n === "dark" && t === "outline",
[]: n === "dark" && t === "ghost" && h !== !0,
// dark isFlush
[]: n === "dark" && t === "ghost" && h === !0,
// size
[]: _ === "small" || t === "navigation",
// stretched
[]: r(g),
// icon position
[]: u === "left",
// icon only
[]: r(s) && _ === "medium" && t !== "navigation",
[]: r(s) && _ === "small" && t !== "navigation"
}), B = p(o.label, {
// hide label only visually to keep them available for assistive technologies
[]: r(s) && t !== "navigation",
// set label opacity to 0 when loading to prevent button size from changing
[]: i
}), G = p({
[]: t === "navigation",
// set icon opacity to 0 when loading to prevent button size from changing
[]: i
}), H = n === "light" && t === "filled" || n === "dark" && t === "outline" || n === "dark" && t === "ghost" ? "dark" : "light", v = /* @__PURE__ */ O("button", { className: y, type: "submit", onClick: (N) => {
if (d || i) {
N.preventDefault();
return;
}
S && S(N);
}, ...m, ...w, "aria-disabled": d || i, "aria-busy": i, ref: I, children: [
i && /* @__PURE__ */ c(L, { className: o.loader, aria: {
"aria-label": "Loading state"
} }),
/* @__PURE__ */ c("span", { className: B, children: f }),
(l || e) && /* @__PURE__ */ c(F, { name: l, theme: H, source: e, className: G, "aria-hidden": "true" })
] });
return D ? /* @__PURE__ */ O(k, { placement: "top", tooltipOffset: 6, children: [
/* @__PURE__ */ c(k.Anchor, { children: v }),
/* @__PURE__ */ c(k.Content, { children: D })
] }) : v;
});
so.displayName = "DSButton";
export {
bo as B,
so as D,
po as a,
ro as v
};