@stihl-design-system/components 1.0.0-RC.0 → 1.0.0-RC.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/README.md +10 -1
  2. package/assets/Asterisk.288a3f48.css +1 -0
  3. package/assets/Button.c09c516e.css +1 -0
  4. package/assets/ButtonRound.fd628e54.css +1 -0
  5. package/assets/Checkbox.cde01607.css +1 -0
  6. package/assets/CustomReactSelect.cdb5f164.css +1 -0
  7. package/assets/Fieldset.729910fe.css +1 -0
  8. package/assets/Heading.50f5e903.css +1 -0
  9. package/assets/Input.92913cfe.css +1 -0
  10. package/assets/InputPassword.d7b9c937.css +1 -0
  11. package/assets/InputSearch.888f630a.css +1 -0
  12. package/assets/InputStepper.969db0d2.css +1 -0
  13. package/assets/Link.75834750.css +1 -0
  14. package/assets/LinkStandalone.19bdab0d.css +1 -0
  15. package/assets/OptionCheckbox.c56568a3.css +1 -0
  16. package/assets/Radio.79d98dde.css +1 -0
  17. package/assets/Select.b9c135c2.css +1 -0
  18. package/assets/Switch.781e3de6.css +1 -0
  19. package/assets/SystemFeedback.c30264c0.css +1 -0
  20. package/assets/Text.ac70cc84.css +1 -0
  21. package/assets/Textarea.12046393.css +1 -0
  22. package/assets/Title.e9e5a7e6.css +1 -0
  23. package/asterisk.cb74ea72.js +8 -0
  24. package/button.87ad387c.js +135 -0
  25. package/buttonround.ecb24c29.js +118 -0
  26. package/checkbox.42617f46.js +112 -0
  27. package/{checkboxgroup.e9e25471.js → checkboxgroup.fa110fdf.js} +2 -2
  28. package/chunks/{CustomReactSelect.9d0a378a.js → CustomReactSelect.2e4e7ba0.js} +342 -338
  29. package/chunks/Link.module.15dedc23.js +37 -0
  30. package/{combobox.f98a4472.js → combobox.d93091e0.js} +1 -1
  31. package/{customreactselect.a53f9932.js → customreactselect.7c77375a.js} +4 -4
  32. package/fieldset.fdd84bda.js +98 -0
  33. package/heading.c02dcb70.js +44 -0
  34. package/index.es.js +19 -19
  35. package/input.064e0bbf.js +230 -0
  36. package/inputpassword.f76c2f62.js +139 -0
  37. package/inputsearch.6e913fc6.js +188 -0
  38. package/inputstepper.2047ec77.js +286 -0
  39. package/{link.cd3720d1.js → link.5eb13d6e.js} +1 -1
  40. package/linkstandalone.edfd6288.js +80 -0
  41. package/optioncheckbox.2369560b.js +43 -0
  42. package/package.json +10 -1
  43. package/radio.fd841ab0.js +79 -0
  44. package/{radiogroup.6a22fe96.js → radiogroup.e1c8ea3d.js} +2 -2
  45. package/select.88d40c51.js +188 -0
  46. package/styles/fonts/STIHLContrafaceDigitalDisplayTitling.woff +0 -0
  47. package/styles/fonts/STIHLContrafaceDigitalDisplayTitling.woff2 +0 -0
  48. package/styles/fonts/STIHLContrafaceDigitalText-Bold.woff +0 -0
  49. package/styles/fonts/STIHLContrafaceDigitalText-Bold.woff2 +0 -0
  50. package/styles/fonts/STIHLContrafaceDigitalText.woff +0 -0
  51. package/styles/fonts/STIHLContrafaceDigitalText.woff2 +0 -0
  52. package/styles/fonts/font-face.min.css +1 -1
  53. package/styles/scss/lib/_heading.scss +14 -6
  54. package/styles/scss/lib/_text.scss +12 -12
  55. package/switch.96fd1689.js +65 -0
  56. package/{systemfeedback.6bbd1505.js → systemfeedback.8515a4e0.js} +10 -10
  57. package/text.de8facb9.js +57 -0
  58. package/textarea.b8c40c8b.js +189 -0
  59. package/title.7be43d50.js +36 -0
  60. package/assets/Asterisk.582f2067.css +0 -1
  61. package/assets/Button.684e8bda.css +0 -1
  62. package/assets/ButtonRound.ca8748cf.css +0 -1
  63. package/assets/Checkbox.84cf6398.css +0 -1
  64. package/assets/CustomReactSelect.d89ccccb.css +0 -1
  65. package/assets/Fieldset.5297efb8.css +0 -1
  66. package/assets/Heading.32278621.css +0 -1
  67. package/assets/Input.2c508b2f.css +0 -1
  68. package/assets/InputPassword.a534f047.css +0 -1
  69. package/assets/InputSearch.8f986307.css +0 -1
  70. package/assets/InputStepper.52fb45ca.css +0 -1
  71. package/assets/Link.03deeca0.css +0 -1
  72. package/assets/LinkStandalone.7e23a8ac.css +0 -1
  73. package/assets/OptionCheckbox.9c20f6f1.css +0 -1
  74. package/assets/Radio.be8f06f5.css +0 -1
  75. package/assets/Select.b2423b5f.css +0 -1
  76. package/assets/Switch.f3ab20de.css +0 -1
  77. package/assets/SystemFeedback.f4421d60.css +0 -1
  78. package/assets/Text.4756effe.css +0 -1
  79. package/assets/Textarea.eecf04b3.css +0 -1
  80. package/assets/Title.60d50d3e.css +0 -1
  81. package/asterisk.91abccec.js +0 -8
  82. package/button.89b2675b.js +0 -135
  83. package/buttonround.c60c8034.js +0 -118
  84. package/checkbox.7d414047.js +0 -112
  85. package/chunks/Link.module.b8230547.js +0 -37
  86. package/fieldset.fb7b7e49.js +0 -98
  87. package/heading.cb7698f4.js +0 -44
  88. package/input.abb902e3.js +0 -228
  89. package/inputpassword.11c12c66.js +0 -139
  90. package/inputsearch.0c88e71a.js +0 -188
  91. package/inputstepper.b74dac4d.js +0 -284
  92. package/linkstandalone.26b52de0.js +0 -80
  93. package/optioncheckbox.7195f001.js +0 -43
  94. package/radio.1b205d64.js +0 -79
  95. package/select.2ff31eab.js +0 -188
  96. package/styles/fonts/STIHLContrafaceDisplayTitling.woff +0 -0
  97. package/styles/fonts/STIHLContrafaceDisplayTitling.woff2 +0 -0
  98. package/styles/fonts/STIHLContrafaceText-Bold.woff +0 -0
  99. package/styles/fonts/STIHLContrafaceText-Bold.woff2 +0 -0
  100. package/styles/fonts/STIHLContrafaceText.woff +0 -0
  101. package/styles/fonts/STIHLContrafaceText.woff2 +0 -0
  102. package/switch.2f011fcc.js +0 -65
  103. package/text.8d80704f.js +0 -57
  104. package/textarea.e156b0ce.js +0 -189
  105. package/title.d855a8e4.js +0 -36
@@ -1,65 +0,0 @@
1
- import "./assets/Switch.f3ab20de.css";
2
- import { j as t } from "./chunks/jsx-runtime.5c071667.js";
3
- import { c as b } from "./chunks/index.8021d3e0.js";
4
- import "react";
5
- import { DSIcon as f } from "./icon.b4211784.js";
6
- import { DSSpinner as x } from "./spinner.ee015469.js";
7
- const j = "_root_1u3dn_25", k = "_root--label-right_1u3dn_53", S = "_root--stretched_1u3dn_56", g = "_loader_1u3dn_66", w = "_thumb_1u3dn_119", C = "_root--checked_1u3dn_134", o = {
8
- root: j,
9
- "root--label-right": "_root--label-right_1u3dn_53",
10
- rootLabelRight: k,
11
- "root--stretched": "_root--stretched_1u3dn_56",
12
- rootStretched: S,
13
- switch: "_switch_1u3dn_61",
14
- loader: g,
15
- thumb: w,
16
- "root--checked": "_root--checked_1u3dn_134",
17
- rootChecked: C
18
- }, I = ({
19
- children: n,
20
- aria: h,
21
- alignLabel: i = "left",
22
- checked: e = !1,
23
- className: d,
24
- dataTrackingid: l,
25
- disabled: s = !1,
26
- loading: r = !1,
27
- stretched: _ = !1,
28
- onClick: a,
29
- ...u
30
- }) => {
31
- const m = b(o.root, d, {
32
- [o.rootChecked]: e === !0,
33
- [o.rootStretched]: _ === !0,
34
- [o.rootLabelRight]: i === "right"
35
- }), p = (c) => {
36
- if (s || r) {
37
- c.preventDefault();
38
- return;
39
- }
40
- a && a(c);
41
- };
42
- return /* @__PURE__ */ t.jsxs(
43
- "button",
44
- {
45
- className: m,
46
- "data-trackingid": l,
47
- onClick: p,
48
- ...h,
49
- ...u,
50
- type: "button",
51
- role: "switch",
52
- "aria-checked": e,
53
- "aria-disabled": s || r,
54
- "aria-busy": r,
55
- children: [
56
- /* @__PURE__ */ t.jsx("span", { children: n }),
57
- !r && /* @__PURE__ */ t.jsx("span", { className: o.switch, children: /* @__PURE__ */ t.jsx("span", { className: o.thumb, children: /* @__PURE__ */ t.jsx(f, { name: "check", "aria-hidden": "true" }) }) }),
58
- r && /* @__PURE__ */ t.jsx("span", { className: o.loader, children: /* @__PURE__ */ t.jsx(x, { aria: { "aria-label": "Loading state" } }) })
59
- ]
60
- }
61
- );
62
- };
63
- export {
64
- I as DSSwitch
65
- };
package/text.8d80704f.js DELETED
@@ -1,57 +0,0 @@
1
- import "./assets/Text.4756effe.css";
2
- import { j as x } from "./chunks/jsx-runtime.5c071667.js";
3
- import { c as y } from "./chunks/index.8021d3e0.js";
4
- const c = "_root_143yo_25", n = "_root--large_143yo_31", u = "_root--large-bold_143yo_41", b = "_root--medium_143yo_51", S = "_root--medium-bold_143yo_61", g = "_root--small_143yo_71", B = "_root--small-bold_143yo_81", i = "_root--x-small_143yo_91", X = "_root--x-small-bold_143yo_101", k = "_root--xx-small_143yo_111", p = "_root--theme-dark_143yo_121", o = {
5
- root: c,
6
- "root--large": "_root--large_143yo_31",
7
- rootLarge: n,
8
- "root--large-bold": "_root--large-bold_143yo_41",
9
- rootLargeBold: u,
10
- "root--medium": "_root--medium_143yo_51",
11
- rootMedium: b,
12
- "root--medium-bold": "_root--medium-bold_143yo_61",
13
- rootMediumBold: S,
14
- "root--small": "_root--small_143yo_71",
15
- rootSmall: g,
16
- "root--small-bold": "_root--small-bold_143yo_81",
17
- rootSmallBold: B,
18
- "root--x-small": "_root--x-small_143yo_91",
19
- rootXSmall: i,
20
- "root--x-small-bold": "_root--x-small-bold_143yo_101",
21
- rootXSmallBold: X,
22
- "root--xx-small": "_root--xx-small_143yo_111",
23
- rootXxSmall: k,
24
- "root--theme-dark": "_root--theme-dark_143yo_121",
25
- rootThemeDark: p
26
- }, h = ({
27
- children: t,
28
- className: m,
29
- size: l = "medium",
30
- tag: a = "p",
31
- theme: _ = "light",
32
- weight: r = "normal",
33
- ...d
34
- }) => {
35
- const s = a, e = y(o.root, m, {
36
- // large
37
- [o.rootLarge]: l === "large",
38
- [o.rootLargeBold]: l === "large" && r === "bold",
39
- // medium
40
- [o.rootMedium]: l == "medium",
41
- [o.rootMediumBold]: l === "medium" && r === "bold",
42
- // small
43
- [o.rootSmall]: l == "small",
44
- [o.rootSmallBold]: l == "small" && r === "bold",
45
- // x-small
46
- [o.rootXSmall]: l == "x-small",
47
- [o.rootXSmallBold]: l == "x-small" && r === "bold",
48
- // xx-small
49
- [o.rootXxSmall]: l == "xx-small",
50
- // dark theme
51
- [o.rootThemeDark]: _ === "dark"
52
- });
53
- return /* @__PURE__ */ x.jsx(s, { className: e, ...d, children: t });
54
- };
55
- export {
56
- h as DSText
57
- };
@@ -1,189 +0,0 @@
1
- import "./assets/Textarea.eecf04b3.css";
2
- import { j as o } from "./chunks/jsx-runtime.5c071667.js";
3
- import { c as S } from "./chunks/index.8021d3e0.js";
4
- import { useState as c, useRef as ie, useEffect as m } from "react";
5
- import { u as ne, h as re } from "./chunks/useBreakpoint.6c1b06c2.js";
6
- import { g as H, p as V } from "./chunks/helpers.ea3ca41a.js";
7
- import { Asterisk as se } from "./asterisk.91abccec.js";
8
- import { DSSystemFeedback as le } from "./systemfeedback.6bbd1505.js";
9
- const ce = "_textarea_1oki7_73", de = "_textarea--invalid_1oki7_183", ue = "_textarea--small_1oki7_190", _e = "_textarea--resize-auto_1oki7_202", fe = "_root_1oki7_212", xe = "_hint_1oki7_220", me = "_label_1oki7_220", he = "_affix_1oki7_224", be = "_affix--small_1oki7_242", ke = "_affix--disabled_1oki7_254", pe = "_prefix_1oki7_258", ve = "_suffix_1oki7_264", Se = "_leading-icon_1oki7_269", Ce = "_leading-icon--small_1oki7_274", Ie = "_action-button_1oki7_278", ge = "_label--hidden_1oki7_295", je = "_feedback_1oki7_322", we = "_char-count_1oki7_327", Ae = "_char-count-announcer_1oki7_342", t = {
10
- textarea: ce,
11
- "textarea--invalid": "_textarea--invalid_1oki7_183",
12
- textareaInvalid: de,
13
- "textarea--small": "_textarea--small_1oki7_190",
14
- textareaSmall: ue,
15
- "textarea--resize-auto": "_textarea--resize-auto_1oki7_202",
16
- textareaResizeAuto: _e,
17
- root: fe,
18
- hint: xe,
19
- label: me,
20
- affix: he,
21
- "affix--small": "_affix--small_1oki7_242",
22
- affixSmall: be,
23
- "affix--disabled": "_affix--disabled_1oki7_254",
24
- affixDisabled: ke,
25
- prefix: pe,
26
- suffix: ve,
27
- "leading-icon": "_leading-icon_1oki7_269",
28
- leadingIcon: Se,
29
- "leading-icon--small": "_leading-icon--small_1oki7_274",
30
- leadingIconSmall: Ce,
31
- "action-button": "_action-button_1oki7_278",
32
- actionButton: Ie,
33
- "label--hidden": "_label--hidden_1oki7_295",
34
- labelHidden: ge,
35
- feedback: je,
36
- "char-count": "_char-count_1oki7_327",
37
- charCount: we,
38
- "char-count-announcer": "_char-count-announcer_1oki7_342",
39
- charCountAnnouncer: Ae
40
- }, ye = ({ id: i, label: u }) => {
41
- if (!i)
42
- throw new Error(
43
- H(
44
- "DSTextarea",
45
- 'A unique "id" prop is required. Please add an unique "id" prop to the DSTextarea component.'
46
- )
47
- );
48
- if (!u)
49
- throw new Error(
50
- H(
51
- "DSTextarea",
52
- `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSTextarea component. If you don't want to display a label, set hideLabel={true}.`
53
- )
54
- );
55
- }, Ve = ({
56
- id: i,
57
- label: u,
58
- charsLimitText: z = "Character limit reached",
59
- charsRemainingText: P = "Characters remaining:",
60
- className: q,
61
- defaultValue: M,
62
- disabled: O = !1,
63
- hint: h,
64
- hideLabel: F = !1,
65
- invalid: n = !1,
66
- maxLength: e,
67
- readonly: C = !1,
68
- required: I = !1,
69
- resize: _ = "vertical",
70
- size: W = "medium",
71
- systemFeedback: s,
72
- value: b,
73
- wrapperClassName: G,
74
- onChange: g,
75
- onInput: j,
76
- ...J
77
- }) => {
78
- process.env.NODE_ENV !== "production" && ye({
79
- id: i,
80
- label: u
81
- });
82
- const [K, w] = c(M || ""), [l, A] = c(0), [Q, y] = c(0), [U, D] = c("off"), [N, k] = c(s), [p, v] = c(n), R = b !== void 0, f = R ? b : K, r = ie(null), X = ne(F);
83
- m(() => {
84
- if (!e || e <= 0)
85
- return;
86
- l >= e * 0.8 ? D("polite") : D("off");
87
- const a = setTimeout(() => {
88
- y(e - l || 0);
89
- }, 1e3);
90
- return () => clearTimeout(a);
91
- }, [l]), m(() => {
92
- w(f || ""), d(), e && e > 0 && (A(f.toString().length || 0), y(e - f.toString().length || 0));
93
- }, [b]), m(() => {
94
- n && s ? (k(s), v(n)) : !n && e && e >= 0 && l >= e ? (v(!0), k(z)) : (k(s), v(n));
95
- }, [n, p, s, l]), m(() => {
96
- if (re && _ === "auto")
97
- return d(), window.addEventListener("resize", d), () => window.removeEventListener("resize", d);
98
- }, [_, r.current]);
99
- const Y = S(t.root, G), Z = S(t.textarea, q, {
100
- // small textarea
101
- [t.textareaSmall]: W === "small",
102
- // invalid state
103
- [t.textareaInvalid]: p,
104
- // resize handling
105
- [t.textareaResizeAuto]: _ === "auto"
106
- }), L = S(t.label, {
107
- // hide label only visually to keep them available for assistive technologies
108
- [t.labelHidden]: X
109
- }), T = `${i}-label`, B = `${i}-feedback`, E = `${i}-hint`, $ = `${i}-char-count-announcer`, ee = h ? ` ${E}` : "", d = () => {
110
- if (r.current && _ === "auto") {
111
- r.current.style.height = "auto";
112
- const a = V(r.current.scrollHeight), x = V(2);
113
- r.current.style.height = `${// We need to add 2px (border-top & border-bottom) to the scrollHeight to prevent the textarea
114
- // from jumping as soon as the user starts typing.
115
- a + x}rem`;
116
- }
117
- }, ae = () => {
118
- const a = [];
119
- return e && e > 0 && a.push($), n && s && a.push(B), a.length > 0 ? a.join(" ") : void 0;
120
- }, te = (a) => {
121
- var x;
122
- j && j(a), e && e > 0 && A(((x = r.current) == null ? void 0 : x.value.length) || 0), d();
123
- }, oe = (a) => {
124
- g && g(a), R || w(a.target.value);
125
- };
126
- return /* @__PURE__ */ o.jsxs("div", { className: Y, children: [
127
- /* @__PURE__ */ o.jsxs("label", { className: L, id: T, htmlFor: i, children: [
128
- u,
129
- I && /* @__PURE__ */ o.jsx(se, {})
130
- ] }),
131
- h && /* @__PURE__ */ o.jsx("div", { className: t.hint, id: E, children: h }),
132
- p && N && /* @__PURE__ */ o.jsx(
133
- le,
134
- {
135
- className: t.feedback,
136
- message: N,
137
- type: "invalid",
138
- id: B
139
- }
140
- ),
141
- /* @__PURE__ */ o.jsx(
142
- "textarea",
143
- {
144
- className: Z,
145
- id: i,
146
- ref: r,
147
- ...J,
148
- "aria-labelledby": `${T}${ee}`,
149
- "aria-describedby": ae(),
150
- "aria-invalid": n,
151
- "aria-disabled": C,
152
- maxLength: e,
153
- readOnly: C,
154
- required: I,
155
- disabled: O,
156
- value: f,
157
- defaultValue: void 0,
158
- rows: void 0,
159
- cols: void 0,
160
- onChange: oe,
161
- onInput: te
162
- }
163
- ),
164
- e !== void 0 && e > 0 && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
165
- /* @__PURE__ */ o.jsxs("div", { className: t.charCount, "aria-hidden": "true", children: [
166
- l,
167
- "/",
168
- e
169
- ] }),
170
- /* @__PURE__ */ o.jsxs(
171
- "div",
172
- {
173
- className: t.charCountAnnouncer,
174
- id: $,
175
- "aria-live": U,
176
- "aria-atomic": "true",
177
- children: [
178
- P,
179
- " ",
180
- Q
181
- ]
182
- }
183
- )
184
- ] })
185
- ] });
186
- };
187
- export {
188
- Ve as DSTextarea
189
- };
package/title.d855a8e4.js DELETED
@@ -1,36 +0,0 @@
1
- import "./assets/Title.60d50d3e.css";
2
- import { j as t } from "./chunks/jsx-runtime.5c071667.js";
3
- import { c as n } from "./chunks/index.8021d3e0.js";
4
- const q = "_root_116qq_25", h = "_root--x-large_116qq_28", m = "_root--large_116qq_42", d = "_root--theme-dark_116qq_56", i = "_dash_116qq_59", o = {
5
- root: q,
6
- "root--x-large": "_root--x-large_116qq_28",
7
- rootXLarge: h,
8
- "root--large": "_root--large_116qq_42",
9
- rootLarge: m,
10
- "root--theme-dark": "_root--theme-dark_116qq_56",
11
- rootThemeDark: d,
12
- dash: i
13
- }, L = ({
14
- children: e,
15
- className: a,
16
- size: r = "x-large",
17
- tag: s = "h1",
18
- // Design suggested to set default tag to h1
19
- theme: _ = "light",
20
- ...l
21
- }) => {
22
- const g = s, c = n(o.root, a, {
23
- // sizes
24
- [o.rootXLarge]: r === "x-large",
25
- [o.rootLarge]: r === "large",
26
- // dark theme
27
- [o.rootThemeDark]: _ === "dark"
28
- });
29
- return /* @__PURE__ */ t.jsxs(g, { className: c, ...l, children: [
30
- e,
31
- /* @__PURE__ */ t.jsx("span", { className: o.dash, "aria-hidden": "true", children: "ƒ" })
32
- ] });
33
- };
34
- export {
35
- L as DSTitle
36
- };