UNPKG

@stihl-design-system/components

Version:

Welcome to the STIHL Design System react component library.

107 lines (106 loc) 5.62 kB
"use client"; import { jsxs as et, jsx as ot } from "react/jsx-runtime"; import { d as it } from "./chunks/index.CgTHIF3K.js"; import { c as lt } from "./chunks/index.CEyLAtio.js"; import { forwardRef as at } from "react"; import { u as nt } from "./chunks/useBreakpoint.CMOR9ZOB.js"; import { D as dt } from "./chunks/Icon.CAXZUNWo.js"; import { DSSpinner as ct } from "./spinner.t5FHjIEK.js"; import './assets/button.H5AqLh2o.css';const ut = "ds-button_root_un7pr_1", ht = "ds-button_root--highlight_un7pr_75", _t = "ds-button_root--dark-highlight_un7pr_75", mt = "ds-button_root--filled_un7pr_151", gt = "ds-button_root--outline_un7pr_179", bt = "ds-button_root--ghost_un7pr_206", ft = "ds-button_root--ghost-flush_un7pr_231", pt = "ds-button_root--small_un7pr_237", kt = "ds-button_root--dark-filled_un7pr_317", Dt = "ds-button_root--dark-outline_un7pr_374", Ft = "ds-button_root--dark-ghost_un7pr_430", Ot = "ds-button_root--dark-ghost-flush_un7pr_484", yt = "ds-button_root--icon-left_un7pr_559", Gt = "ds-button_root--icon-only_un7pr_562", Ht = "ds-button_root--icon-only-small_un7pr_571", St = "ds-button_loader_un7pr_586", vt = "ds-button_icon--hidden_un7pr_598", It = "ds-button_label--hidden_un7pr_602", Lt = "ds-button_label--loading_un7pr_614", o = { root: ut, rootHighlight: ht, rootDarkHighlight: _t, rootFilled: mt, rootOutline: gt, rootGhost: bt, rootGhostFlush: ft, rootSmall: pt, rootDarkFilled: kt, rootDarkOutline: Dt, rootDarkGhost: Ft, rootDarkGhostFlush: Ot, rootIconLeft: yt, rootIconOnly: Gt, rootIconOnlySmall: Ht, loader: St, iconHidden: vt, labelHidden: It, labelLoading: Lt }, Nt = at((N, C) => { const t = it.c(62); let a, d, c, r, e, i, u, g, b, f, p, k, D, F, O; t[0] !== N ? ({ children: d, aria: a, className: c, disabled: g, hideLabel: b, iconName: r, iconPosition: f, iconSource: e, isFlush: p, loading: k, size: D, theme: F, variant: O, onClick: i, ...u } = N, t[0] = N, t[1] = a, t[2] = d, t[3] = c, t[4] = r, t[5] = e, t[6] = i, t[7] = u, t[8] = g, t[9] = b, t[10] = f, t[11] = p, t[12] = k, t[13] = D, t[14] = F, t[15] = O) : (a = t[1], d = t[2], c = t[3], r = t[4], e = t[5], i = t[6], u = t[7], g = t[8], b = t[9], f = t[10], p = t[11], k = t[12], D = t[13], F = t[14], O = t[15]); const y = g === void 0 ? !1 : g, x = b === void 0 ? !1 : b, rt = f === void 0 ? "left" : f, G = p === void 0 ? !1 : p, l = k === void 0 ? !1 : k, B = D === void 0 ? "medium" : D, s = F === void 0 ? "light" : F, n = O === void 0 ? "filled" : O, j = n === "filled", z = n === "highlight", P = n === "outline", w = n === "ghost" && G !== !0, E = n === "ghost" && G === !0, R = s === "dark" && n === "filled", T = s === "dark" && n === "highlight", V = s === "dark" && n === "outline", $ = s === "dark" && n === "ghost" && G !== !0, q = s === "dark" && n === "ghost" && G === !0, A = B === "small", J = rt === "left", K = nt(x) && B === "medium", M = nt(x) && B === "small"; let H; t[16] !== c || t[17] !== z || t[18] !== P || t[19] !== w || t[20] !== E || t[21] !== R || t[22] !== T || t[23] !== V || t[24] !== $ || t[25] !== q || t[26] !== A || t[27] !== J || t[28] !== K || t[29] !== M || t[30] !== j ? (H = lt(o.root, c, { [o.rootFilled]: j, [o.rootHighlight]: z, [o.rootOutline]: P, [o.rootGhost]: w, [o.rootGhostFlush]: E, [o.rootDarkFilled]: R, [o.rootDarkHighlight]: T, [o.rootDarkOutline]: V, [o.rootDarkGhost]: $, [o.rootDarkGhostFlush]: q, [o.rootSmall]: A, [o.rootIconLeft]: J, [o.rootIconOnly]: K, [o.rootIconOnlySmall]: M }), t[16] = c, t[17] = z, t[18] = P, t[19] = w, t[20] = E, t[21] = R, t[22] = T, t[23] = V, t[24] = $, t[25] = q, t[26] = A, t[27] = J, t[28] = K, t[29] = M, t[30] = j, t[31] = H) : H = t[31]; const Q = H, U = nt(x); let S; t[32] !== l || t[33] !== U ? (S = lt(o.label, { [o.labelHidden]: U, [o.labelLoading]: l }), t[32] = l, t[33] = U, t[34] = S) : S = t[34]; const W = S; let v; t[35] !== l ? (v = lt(o.icon, { [o.iconHidden]: l }), t[35] = l, t[36] = v) : v = t[36]; const X = v, Y = s === "light" && n === "filled" || s === "dark" && n === "outline" || s === "dark" && n === "ghost" ? "dark" : "light"; let I; t[37] !== y || t[38] !== l || t[39] !== i ? (I = (st) => { if (y || l) { st.preventDefault(); return; } i && i(st); }, t[37] = y, t[38] = l, t[39] = i, t[40] = I) : I = t[40]; const Z = I, tt = y || l; let h; t[41] !== l ? (h = l && /* @__PURE__ */ ot(ct, { className: o.loader, aria: { "aria-label": "Loading state" } }), t[41] = l, t[42] = h) : h = t[42]; let _; t[43] !== d || t[44] !== W ? (_ = /* @__PURE__ */ ot("span", { className: W, children: d }), t[43] = d, t[44] = W, t[45] = _) : _ = t[45]; let m; t[46] !== X || t[47] !== r || t[48] !== e || t[49] !== Y ? (m = (r || e) && /* @__PURE__ */ ot(dt, { name: r, theme: Y, source: e, className: X, "aria-hidden": "true" }), t[46] = X, t[47] = r, t[48] = e, t[49] = Y, t[50] = m) : m = t[50]; let L; return t[51] !== a || t[52] !== Z || t[53] !== l || t[54] !== C || t[55] !== u || t[56] !== Q || t[57] !== tt || t[58] !== h || t[59] !== _ || t[60] !== m ? (L = /* @__PURE__ */ et("button", { className: Q, type: "submit", onClick: Z, ...a, ...u, "aria-disabled": tt, "aria-busy": l, ref: C, children: [ h, _, m ] }), t[51] = a, t[52] = Z, t[53] = l, t[54] = C, t[55] = u, t[56] = Q, t[57] = tt, t[58] = h, t[59] = _, t[60] = m, t[61] = L) : L = t[61], L; }); Nt.displayName = "DSButton"; export { Nt as DSButton };