@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
128 lines (127 loc) • 6.63 kB
JavaScript
"use client";
import { jsxs as co, jsx as so } from "react/jsx-runtime";
import { d as ho } from "./index.CgTHIF3K.js";
import { c as io } from "./index.CEyLAtio.js";
import { forwardRef as uo } from "react";
import { u as lo } from "./useBreakpoint.CMOR9ZOB.js";
import { D as _o } from "./Icon.DGTYCv63.js";
import { DSSpinner as go } from "../spinner.Dht6FspZ.js";
import { g as ro } from "./helpers.BbWkXTr3.js";
import '../assets/Button.Dw8H5nFS.css';const mo = "ds-button_root_94r67_1", fo = "ds-button_root--highlight_94r67_75", bo = "ds-button_root--dark-highlight_94r67_75", vo = "ds-button_root--filled_94r67_151", ko = "ds-button_root--outline_94r67_179", po = "ds-button_root--ghost_94r67_206", Do = "ds-button_root--ghost-flush_94r67_231", No = "ds-button_root--small_94r67_237", So = "ds-button_root--navigation_94r67_317", Oo = "ds-button_root--dark-filled_94r67_393", Fo = "ds-button_root--dark-outline_94r67_450", yo = "ds-button_root--dark-ghost_94r67_506", Go = "ds-button_root--dark-ghost-flush_94r67_560", Ho = "ds-button_root--icon-left_94r67_635", Io = "ds-button_root--icon-only_94r67_638", Bo = "ds-button_root--icon-only-small_94r67_647", Lo = "ds-button_icon--navigation_94r67_663", wo = "ds-button_icon--hidden_94r67_670", Co = "ds-button_label--hidden_94r67_674", To = "ds-button_label--loading_94r67_686", Eo = "ds-button_loader_94r67_690", t = {
root: mo,
rootHighlight: fo,
rootDarkHighlight: bo,
rootFilled: vo,
rootOutline: ko,
rootGhost: po,
rootGhostFlush: Do,
rootSmall: No,
rootNavigation: So,
rootDarkFilled: Oo,
rootDarkOutline: Fo,
rootDarkGhost: yo,
rootDarkGhostFlush: Go,
rootIconLeft: Ho,
rootIconOnly: Io,
rootIconOnlySmall: Bo,
iconNavigation: Lo,
iconHidden: wo,
labelHidden: Co,
labelLoading: To,
loader: Eo
}, $o = ["medium", "small"], qo = ["highlight", "filled", "outline", "ghost", "navigation"], Po = ({
variant: m,
size: f,
theme: o
}) => {
if (m === "navigation" && (f === "small" && console.warn(ro("DSButton", 'A "size" prop should not be used in combination with variant="navigation". Please remove the "size" prop.')), o === "dark"))
throw new Error(ro("DSButton", 'A DSButton with variant="navigation" does not support theme="dark". Please remove the "theme" prop.'));
}, xo = uo((m, f) => {
const o = ho.c(64);
let a, d, c, l, e, r, h, b, v, k, p, D, N, S, O;
o[0] !== m ? ({
children: d,
aria: a,
className: c,
disabled: b,
hideLabel: v,
iconName: l,
iconPosition: k,
iconSource: e,
isFlush: p,
loading: D,
size: N,
theme: S,
variant: O,
onClick: r,
...h
} = m, o[0] = m, o[1] = a, o[2] = d, o[3] = c, o[4] = l, o[5] = e, o[6] = r, o[7] = h, o[8] = b, o[9] = v, o[10] = k, o[11] = p, o[12] = D, o[13] = N, o[14] = S, o[15] = O) : (a = o[1], d = o[2], c = o[3], l = o[4], e = o[5], r = o[6], h = o[7], b = o[8], v = o[9], k = o[10], p = o[11], D = o[12], N = o[13], S = o[14], O = o[15]);
const F = b === void 0 ? !1 : b, C = v === void 0 ? !1 : v, ao = k === void 0 ? "left" : k, y = p === void 0 ? !1 : p, s = D === void 0 ? !1 : D, G = N === void 0 ? "medium" : N, i = S === void 0 ? "light" : S, n = O === void 0 ? "filled" : O;
process.env.NODE_ENV !== "production" && Po({
variant: n,
size: G,
theme: i
});
const T = n === "filled", E = n === "highlight", P = n === "outline", x = n === "ghost" && y !== !0, z = n === "navigation", A = n === "ghost" && y === !0, V = i === "dark" && n === "filled", j = i === "dark" && n === "highlight", R = i === "dark" && n === "outline", U = i === "dark" && n === "ghost" && y !== !0, M = i === "dark" && n === "ghost" && y === !0, Z = G === "small" || n === "navigation", $ = ao === "left", q = lo(C) && G === "medium" && n !== "navigation", J = lo(C) && G === "small" && n !== "navigation";
let H;
o[16] !== c || o[17] !== E || o[18] !== P || o[19] !== x || o[20] !== z || o[21] !== A || o[22] !== V || o[23] !== j || o[24] !== R || o[25] !== U || o[26] !== M || o[27] !== Z || o[28] !== $ || o[29] !== q || o[30] !== J || o[31] !== T ? (H = io(t.root, c, {
[]: T,
[]: E,
[]: P,
[]: x,
[]: z,
[]: A,
[]: V,
[]: j,
[]: R,
[]: U,
[]: M,
[]: Z,
[]: $,
[]: q,
[]: J
}), o[16] = c, o[17] = E, o[18] = P, o[19] = x, o[20] = z, o[21] = A, o[22] = V, o[23] = j, o[24] = R, o[25] = U, o[26] = M, o[27] = Z, o[28] = $, o[29] = q, o[30] = J, o[31] = T, o[32] = H) : H = o[32];
const K = H, Q = lo(C) && n !== "navigation";
let I;
o[33] !== s || o[34] !== Q ? (I = io(t.label, {
[]: Q,
[]: s
}), o[33] = s, o[34] = Q, o[35] = I) : I = o[35];
const W = I, X = n === "navigation";
let B;
o[36] !== s || o[37] !== X ? (B = io({
[]: X,
[]: s
}), o[36] = s, o[37] = X, o[38] = B) : B = o[38];
const Y = B, oo = i === "light" && n === "filled" || i === "dark" && n === "outline" || i === "dark" && n === "ghost" ? "dark" : "light";
let L;
o[39] !== F || o[40] !== s || o[41] !== r ? (L = (eo) => {
if (F || s) {
eo.preventDefault();
return;
}
r && r(eo);
}, o[39] = F, o[40] = s, o[41] = r, o[42] = L) : L = o[42];
const to = L, no = F || s;
let u;
o[43] !== s ? (u = s && /* @__PURE__ */ so(go, { className: t.loader, aria: {
"aria-label": "Loading state"
} }), o[43] = s, o[44] = u) : u = o[44];
let _;
o[45] !== d || o[46] !== W ? (_ = /* @__PURE__ */ so("span", { className: W, children: d }), o[45] = d, o[46] = W, o[47] = _) : _ = o[47];
let g;
o[48] !== Y || o[49] !== l || o[50] !== e || o[51] !== oo ? (g = (l || e) && /* @__PURE__ */ so(_o, { name: l, theme: oo, source: e, className: Y, "aria-hidden": "true" }), o[48] = Y, o[49] = l, o[50] = e, o[51] = oo, o[52] = g) : g = o[52];
let w;
return o[53] !== a || o[54] !== to || o[55] !== s || o[56] !== f || o[57] !== h || o[58] !== K || o[59] !== no || o[60] !== u || o[61] !== _ || o[62] !== g ? (w = /* @__PURE__ */ co("button", { className: K, type: "submit", onClick: to, ...a, ...h, "aria-disabled": no, "aria-busy": s, ref: f, children: [
u,
_,
g
] }), o[53] = a, o[54] = to, o[55] = s, o[56] = f, o[57] = h, o[58] = K, o[59] = no, o[60] = u, o[61] = _, o[62] = g, o[63] = w) : w = o[63], w;
});
xo.displayName = "DSButton";
export {
$o as B,
xo as D,
qo as a,
Po as v
};