@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
143 lines (142 loc) • 7.21 kB
JavaScript
"use client";
import { jsxs as ut, jsx as H } from "react/jsx-runtime";
import { d as mt } from "./index.CgTHIF3K.js";
import { c as dt } from "./index.CEyLAtio.js";
import { forwardRef as ft } from "react";
import { u as ct } from "./useBreakpoint.CMOR9ZOB.js";
import { D as bt } from "./Icon.NSsVrYeq.js";
import { DSSpinner as vt } from "../spinner.BUjhjAvw.js";
import { Tooltip as ht } from "../tooltip.CUCSRXd3.js";
import { g as _t } from "./helpers.BbWkXTr3.js";
import '../assets/Button.Dw8H5nFS.css';const kt = "ds-button_root_94r67_1", pt = "ds-button_root--highlight_94r67_75", Dt = "ds-button_root--dark-highlight_94r67_75", Nt = "ds-button_root--filled_94r67_151", Ot = "ds-button_root--outline_94r67_179", St = "ds-button_root--ghost_94r67_206", Ft = "ds-button_root--ghost-flush_94r67_231", yt = "ds-button_root--small_94r67_237", Gt = "ds-button_root--navigation_94r67_317", Ht = "ds-button_root--dark-filled_94r67_393", It = "ds-button_root--dark-outline_94r67_450", Bt = "ds-button_root--dark-ghost_94r67_506", Lt = "ds-button_root--dark-ghost-flush_94r67_560", Ct = "ds-button_root--icon-left_94r67_635", Tt = "ds-button_root--icon-only_94r67_638", wt = "ds-button_root--icon-only-small_94r67_647", Et = "ds-button_icon--navigation_94r67_663", At = "ds-button_icon--hidden_94r67_670", Pt = "ds-button_label--hidden_94r67_674", xt = "ds-button_label--loading_94r67_686", zt = "ds-button_loader_94r67_690", o = {
root: kt,
rootHighlight: pt,
rootDarkHighlight: Dt,
rootFilled: Nt,
rootOutline: Ot,
rootGhost: St,
rootGhostFlush: Ft,
rootSmall: yt,
rootNavigation: Gt,
rootDarkFilled: Ht,
rootDarkOutline: It,
rootDarkGhost: Bt,
rootDarkGhostFlush: Lt,
rootIconLeft: Ct,
rootIconOnly: Tt,
rootIconOnlySmall: wt,
iconNavigation: Et,
iconHidden: At,
labelHidden: Pt,
labelLoading: xt,
loader: zt
}, Wt = ["medium", "small"], Xt = ["highlight", "filled", "outline", "ghost", "navigation"], Vt = ({
variant: v,
size: k,
theme: t
}) => {
if (v === "navigation" && (k === "small" && console.warn(_t("DSButton", 'A "size" prop should not be used in combination with variant="navigation". Please remove the "size" prop.')), t === "dark"))
throw new Error(_t("DSButton", 'A DSButton with variant="navigation" does not support theme="dark". Please remove the "theme" prop.'));
}, jt = ft((v, k) => {
const t = mt.c(72);
let c, h, u, e, r, a, _, p, D, N, O, S, F, y, G, d;
t[0] !== v ? ({
children: h,
aria: c,
className: u,
disabled: p,
hideLabel: D,
iconName: e,
iconPosition: N,
iconSource: r,
isFlush: O,
loading: S,
size: F,
theme: y,
tooltip: d,
variant: G,
onClick: a,
..._
} = v, t[0] = v, t[1] = c, t[2] = h, t[3] = u, t[4] = e, t[5] = r, t[6] = a, t[7] = _, t[8] = p, t[9] = D, t[10] = N, t[11] = O, t[12] = S, t[13] = F, t[14] = y, t[15] = G, t[16] = d) : (c = t[1], h = t[2], u = t[3], e = t[4], r = t[5], a = t[6], _ = t[7], p = t[8], D = t[9], N = t[10], O = t[11], S = t[12], F = t[13], y = t[14], G = t[15], d = t[16]);
const I = p === void 0 ? !1 : p, z = D === void 0 ? !1 : D, gt = N === void 0 ? "left" : N, B = O === void 0 ? !1 : O, i = S === void 0 ? !1 : S, L = F === void 0 ? "medium" : F, l = y === void 0 ? "light" : y, n = G === void 0 ? "filled" : G;
process.env.NODE_ENV !== "production" && Vt({
variant: n,
size: L,
theme: l
});
const V = n === "filled", j = n === "highlight", R = n === "outline", U = n === "ghost" && B !== !0, M = n === "navigation", Z = n === "ghost" && B === !0, $ = l === "dark" && n === "filled", q = l === "dark" && n === "highlight", J = l === "dark" && n === "outline", K = l === "dark" && n === "ghost" && B !== !0, Q = l === "dark" && n === "ghost" && B === !0, W = L === "small" || n === "navigation", X = gt === "left", Y = ct(z) && L === "medium" && n !== "navigation", tt = ct(z) && L === "small" && n !== "navigation";
let C;
t[17] !== u || t[18] !== j || t[19] !== R || t[20] !== U || t[21] !== M || t[22] !== Z || t[23] !== $ || t[24] !== q || t[25] !== J || t[26] !== K || t[27] !== Q || t[28] !== W || t[29] !== X || t[30] !== Y || t[31] !== tt || t[32] !== V ? (C = dt(o.root, u, {
[]: V,
[]: j,
[]: R,
[]: U,
[]: M,
[]: Z,
[]: $,
[]: q,
[]: J,
[]: K,
[]: Q,
[]: W,
[]: X,
[]: Y,
[]: tt
}), t[17] = u, t[18] = j, t[19] = R, t[20] = U, t[21] = M, t[22] = Z, t[23] = $, t[24] = q, t[25] = J, t[26] = K, t[27] = Q, t[28] = W, t[29] = X, t[30] = Y, t[31] = tt, t[32] = V, t[33] = C) : C = t[33];
const ot = C, nt = ct(z) && n !== "navigation";
let T;
t[34] !== i || t[35] !== nt ? (T = dt(o.label, {
[]: nt,
[]: i
}), t[34] = i, t[35] = nt, t[36] = T) : T = t[36];
const it = T, lt = n === "navigation";
let w;
t[37] !== i || t[38] !== lt ? (w = dt({
[]: lt,
[]: i
}), t[37] = i, t[38] = lt, t[39] = w) : w = t[39];
const st = w, et = l === "light" && n === "filled" || l === "dark" && n === "outline" || l === "dark" && n === "ghost" ? "dark" : "light";
let E;
t[40] !== I || t[41] !== i || t[42] !== a ? (E = (s) => {
if (I || i) {
s.preventDefault();
return;
}
a && a(s);
}, t[40] = I, t[41] = i, t[42] = a, t[43] = E) : E = t[43];
const rt = E, at = I || i;
let g;
t[44] !== i ? (g = i && /* @__PURE__ */ H(vt, { className: o.loader, aria: {
"aria-label": "Loading state"
} }), t[44] = i, t[45] = g) : g = t[45];
let m;
t[46] !== h || t[47] !== it ? (m = /* @__PURE__ */ H("span", { className: it, children: h }), t[46] = h, t[47] = it, t[48] = m) : m = t[48];
let f;
t[49] !== st || t[50] !== e || t[51] !== r || t[52] !== et ? (f = (e || r) && /* @__PURE__ */ H(bt, { name: e, theme: et, source: r, className: st, "aria-hidden": "true" }), t[49] = st, t[50] = e, t[51] = r, t[52] = et, t[53] = f) : f = t[53];
let A;
t[54] !== c || t[55] !== rt || t[56] !== i || t[57] !== k || t[58] !== _ || t[59] !== ot || t[60] !== at || t[61] !== g || t[62] !== m || t[63] !== f ? (A = /* @__PURE__ */ ut("button", { className: ot, type: "submit", onClick: rt, ...c, ..._, "aria-disabled": at, "aria-busy": i, ref: k, children: [
g,
m,
f
] }), t[54] = c, t[55] = rt, t[56] = i, t[57] = k, t[58] = _, t[59] = ot, t[60] = at, t[61] = g, t[62] = m, t[63] = f, t[64] = A) : A = t[64];
const P = A;
if (d) {
let s;
t[65] !== P ? (s = /* @__PURE__ */ H(ht.Anchor, { children: P }), t[65] = P, t[66] = s) : s = t[66];
let b;
t[67] !== d ? (b = /* @__PURE__ */ H(ht.Content, { children: d }), t[67] = d, t[68] = b) : b = t[68];
let x;
return t[69] !== s || t[70] !== b ? (x = /* @__PURE__ */ ut(ht, { placement: "top", tooltipOffset: 6, children: [
s,
b
] }), t[69] = s, t[70] = b, t[71] = x) : x = t[71], x;
}
return P;
});
jt.displayName = "DSButton";
export {
Wt as B,
jt as D,
Xt as a,
Vt as v
};