@moto-nrw/design-system 0.2.2 → 0.3.0

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 (13) hide show
  1. package/README.md +17 -26
  2. package/dist/index.cjs +652 -303
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +4 -1
  5. package/dist/index.d.ts +4 -1
  6. package/dist/index.js +650 -302
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +2 -0
  9. package/dist/tailwind.css +363 -14
  10. package/dist/tokens.css +46 -0
  11. package/package.json +12 -3
  12. package/dist/index.css +0 -1550
  13. package/dist/index.css.map +0 -1
package/dist/index.js CHANGED
@@ -1,8 +1,12 @@
1
1
  // src/components/Accordion/Accordion.tsx
2
2
  import { useState } from "react";
3
3
 
4
- // src/components/Accordion/Accordion.module.css
5
- var Accordion_default = {};
4
+ // src/lib/cn.ts
5
+ import { clsx } from "clsx";
6
+ import { twMerge } from "tailwind-merge";
7
+ function cn(...inputs) {
8
+ return twMerge(clsx(inputs));
9
+ }
6
10
 
7
11
  // src/components/Accordion/Accordion.tsx
8
12
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -14,40 +18,57 @@ function Accordion({
14
18
  className
15
19
  }) {
16
20
  const [isOpen, setIsOpen] = useState(defaultOpen);
17
- return /* @__PURE__ */ jsxs("div", { className: [Accordion_default.accordion, className].filter(Boolean).join(" "), children: [
18
- /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setIsOpen((prev) => !prev), className: Accordion_default.trigger, children: [
19
- /* @__PURE__ */ jsxs("span", { className: Accordion_default.label, children: [
20
- label,
21
- badge && /* @__PURE__ */ jsx("span", { className: Accordion_default.badge, children: badge })
22
- ] }),
23
- /* @__PURE__ */ jsx(
24
- "svg",
25
- {
26
- className: [Accordion_default.chevron, isOpen && Accordion_default.chevronOpen].filter(Boolean).join(" "),
27
- width: "16",
28
- height: "16",
29
- fill: "none",
30
- viewBox: "0 0 24 24",
31
- stroke: "currentColor",
32
- children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
33
- }
34
- )
35
- ] }),
21
+ return /* @__PURE__ */ jsxs("div", { className: cn("border-t border-[var(--semantic-color-border-default)]", className), children: [
22
+ /* @__PURE__ */ jsxs(
23
+ "button",
24
+ {
25
+ type: "button",
26
+ onClick: () => setIsOpen((prev) => !prev),
27
+ className: "flex w-full items-center justify-between px-5 py-3 border-none bg-transparent font-sans text-sm font-medium text-[var(--semantic-color-text-secondary)] cursor-pointer transition-colors duration-[var(--duration-fast)] hover:text-[var(--semantic-color-text-default)]",
28
+ children: [
29
+ /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
30
+ label,
31
+ badge && /* @__PURE__ */ jsx("span", { className: "inline-flex", children: badge })
32
+ ] }),
33
+ /* @__PURE__ */ jsx(
34
+ "svg",
35
+ {
36
+ className: cn(
37
+ "shrink-0 text-[var(--semantic-color-text-muted)] transition-transform duration-[var(--duration-normal)]",
38
+ isOpen && "rotate-180"
39
+ ),
40
+ width: "16",
41
+ height: "16",
42
+ fill: "none",
43
+ viewBox: "0 0 24 24",
44
+ stroke: "currentColor",
45
+ children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
46
+ }
47
+ )
48
+ ]
49
+ }
50
+ ),
36
51
  /* @__PURE__ */ jsx(
37
52
  "div",
38
53
  {
39
- className: [Accordion_default.content, isOpen ? Accordion_default.contentOpen : Accordion_default.contentClosed].join(" "),
40
- children: /* @__PURE__ */ jsx("div", { className: Accordion_default.contentInner, children })
54
+ className: cn(
55
+ "grid transition-[grid-template-rows] duration-[var(--duration-normal)]",
56
+ isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
57
+ ),
58
+ children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children })
41
59
  }
42
60
  )
43
61
  ] });
44
62
  }
45
63
 
46
- // src/components/Alert/Alert.module.css
47
- var Alert_default = {};
48
-
49
64
  // src/components/Alert/Alert.tsx
50
65
  import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
66
+ var typeStyles = {
67
+ error: "bg-[var(--semantic-color-feedback-error-light)] text-[var(--semantic-color-feedback-error-text)] border-[var(--semantic-color-feedback-error-border)]",
68
+ success: "bg-[var(--semantic-color-feedback-success-light)] text-[var(--semantic-color-feedback-success-text)] border-[var(--semantic-color-feedback-success-border)]",
69
+ warning: "bg-[var(--semantic-color-feedback-warning-light)] text-[var(--semantic-color-feedback-warning-text)] border-[var(--semantic-color-feedback-warning-border)]",
70
+ info: "bg-[var(--semantic-color-feedback-info-light)] text-[var(--semantic-color-feedback-info-text)] border-[var(--semantic-color-feedback-info-border)]"
71
+ };
51
72
  var icons = {
52
73
  error: /* @__PURE__ */ jsx2("svg", { width: "20", height: "20", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx2(
53
74
  "path",
@@ -88,21 +109,27 @@ function Alert({ type, message, className, ...props }) {
88
109
  "div",
89
110
  {
90
111
  role: "alert",
91
- className: [Alert_default.alert, Alert_default[type], className].filter(Boolean).join(" "),
112
+ className: cn(
113
+ "flex items-center gap-2 px-4 py-3 rounded-md border font-sans text-sm shadow-sm",
114
+ typeStyles[type],
115
+ className
116
+ ),
92
117
  ...props,
93
118
  children: [
94
- /* @__PURE__ */ jsx2("span", { className: Alert_default.icon, children: icons[type] }),
119
+ /* @__PURE__ */ jsx2("span", { className: "shrink-0 flex", children: icons[type] }),
95
120
  /* @__PURE__ */ jsx2("span", { children: message })
96
121
  ]
97
122
  }
98
123
  );
99
124
  }
100
125
 
101
- // src/components/Avatar/Avatar.module.css
102
- var Avatar_default = {};
103
-
104
126
  // src/components/Avatar/Avatar.tsx
105
127
  import { jsx as jsx3 } from "react/jsx-runtime";
128
+ var sizeStyles = {
129
+ sm: "size-[var(--avatar-size-sm)] text-sm shadow-sm outline-2 outline-[var(--semantic-color-bg-default)] -outline-offset-2",
130
+ md: "size-[var(--avatar-size-md)] text-base shadow-md",
131
+ lg: "size-[var(--avatar-size-lg)] text-xl shadow-md"
132
+ };
106
133
  function getInitials(name) {
107
134
  const parts = name.split(" ").filter(Boolean);
108
135
  if (parts.length === 0) return "?";
@@ -114,19 +141,24 @@ function Avatar({ name, src, size = "sm", className, ...props }) {
114
141
  return /* @__PURE__ */ jsx3(
115
142
  "div",
116
143
  {
117
- className: [Avatar_default.avatar, Avatar_default[size], className].filter(Boolean).join(" "),
144
+ className: cn(
145
+ "relative flex shrink-0 items-center justify-center overflow-hidden rounded-[var(--avatar-radius)] bg-gradient-to-br from-[var(--semantic-color-text-strong)] to-[var(--semantic-color-text-muted)] text-[var(--semantic-color-text-inverse)] font-sans font-[number:var(--avatar-font-weight)]",
146
+ sizeStyles[size],
147
+ className
148
+ ),
118
149
  title: name,
119
150
  ...props,
120
- children: src ? /* @__PURE__ */ jsx3("img", { src, alt: name, className: Avatar_default.image }) : /* @__PURE__ */ jsx3("span", { className: Avatar_default.initials, children: initials })
151
+ children: src ? /* @__PURE__ */ jsx3("img", { src, alt: name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx3("span", { className: "select-none", children: initials })
121
152
  }
122
153
  );
123
154
  }
124
155
 
125
- // src/components/Badge/Badge.module.css
126
- var Badge_default = {};
127
-
128
156
  // src/components/Badge/Badge.tsx
129
157
  import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
158
+ var sizeStyles2 = {
159
+ sm: "px-2 py-1.5 gap-1.5",
160
+ md: "px-3 py-1.5 gap-2"
161
+ };
130
162
  function Badge({
131
163
  count,
132
164
  label,
@@ -136,11 +168,22 @@ function Badge({
136
168
  className,
137
169
  ...props
138
170
  }) {
139
- return /* @__PURE__ */ jsxs3("div", { className: [Badge_default.badge, Badge_default[size], className].filter(Boolean).join(" "), ...props, children: [
140
- icon && /* @__PURE__ */ jsx4("span", { className: Badge_default.icon, children: icon }),
141
- /* @__PURE__ */ jsx4("span", { className: Badge_default.count, children: count }),
142
- showLabel && label && /* @__PURE__ */ jsx4("span", { className: Badge_default.label, children: label })
143
- ] });
171
+ return /* @__PURE__ */ jsxs3(
172
+ "div",
173
+ {
174
+ className: cn(
175
+ "inline-flex items-center rounded-[var(--badge-radius)] border border-[var(--semantic-color-border-default)] bg-[var(--semantic-color-bg-subtle)] font-sans",
176
+ sizeStyles2[size],
177
+ className
178
+ ),
179
+ ...props,
180
+ children: [
181
+ icon && /* @__PURE__ */ jsx4("span", { className: "flex text-[var(--semantic-color-text-muted)]", children: icon }),
182
+ /* @__PURE__ */ jsx4("span", { className: "text-[length:var(--badge-font-size)] font-[number:var(--badge-font-weight)] text-[var(--semantic-color-text-default)]", children: count }),
183
+ showLabel && label && /* @__PURE__ */ jsx4("span", { className: "text-xs text-[var(--semantic-color-text-muted)]", children: label })
184
+ ]
185
+ }
186
+ );
144
187
  }
145
188
  function BadgeCompact({
146
189
  count,
@@ -148,17 +191,39 @@ function BadgeCompact({
148
191
  className,
149
192
  ...props
150
193
  }) {
151
- return /* @__PURE__ */ jsxs3("div", { className: [Badge_default.badge, Badge_default.sm, className].filter(Boolean).join(" "), ...props, children: [
152
- icon && /* @__PURE__ */ jsx4("span", { className: Badge_default.icon, children: icon }),
153
- /* @__PURE__ */ jsx4("span", { className: Badge_default.count, children: count })
154
- ] });
194
+ return /* @__PURE__ */ jsxs3(
195
+ "div",
196
+ {
197
+ className: cn(
198
+ "inline-flex items-center rounded-[var(--badge-radius)] border border-[var(--semantic-color-border-default)] bg-[var(--semantic-color-bg-subtle)] font-sans px-2 py-1.5 gap-1.5",
199
+ className
200
+ ),
201
+ ...props,
202
+ children: [
203
+ icon && /* @__PURE__ */ jsx4("span", { className: "flex text-[var(--semantic-color-text-muted)]", children: icon }),
204
+ /* @__PURE__ */ jsx4("span", { className: "text-[length:var(--badge-font-size)] font-[number:var(--badge-font-weight)] text-[var(--semantic-color-text-default)]", children: count })
205
+ ]
206
+ }
207
+ );
155
208
  }
156
209
 
157
- // src/components/Button/Button.module.css
158
- var Button_default = {};
159
-
160
210
  // src/components/Button/Button.tsx
161
211
  import { jsx as jsx5 } from "react/jsx-runtime";
212
+ var variantStyles = {
213
+ primary: "bg-[var(--semantic-color-bg-inverse)] text-[var(--semantic-color-text-inverse)] shadow-[var(--shadow-sm)] hover:enabled:bg-[var(--semantic-color-bg-inverse-hover)] hover:enabled:shadow-[var(--shadow-md)]",
214
+ secondary: "bg-[var(--semantic-color-bg-emphasis)] text-[var(--semantic-color-text-strong)] shadow-[var(--shadow-sm)] hover:enabled:bg-[var(--semantic-color-bg-emphasis-hover)] hover:enabled:shadow-[var(--shadow-md)]",
215
+ outline: "bg-transparent text-[var(--semantic-color-text-tertiary)] border-[var(--semantic-color-border-strong)] hover:enabled:bg-[var(--semantic-color-bg-subtle)] hover:enabled:border-[var(--semantic-color-border-muted)]",
216
+ outline_danger: "bg-[var(--semantic-color-feedback-error-light)] text-[var(--semantic-color-feedback-error-text)] border-[var(--semantic-color-feedback-error-border)] hover:enabled:bg-[var(--semantic-color-feedback-error-light)] hover:enabled:border-[var(--semantic-color-feedback-error)]",
217
+ danger: "bg-[var(--semantic-color-feedback-error-text)] text-[var(--semantic-color-text-inverse)] shadow-[var(--shadow-sm)] hover:enabled:bg-[var(--semantic-color-feedback-error)] hover:enabled:shadow-[var(--shadow-md)]",
218
+ success: "bg-[var(--semantic-color-brand-primary)] text-[var(--semantic-color-text-inverse)] shadow-[var(--shadow-sm)] hover:enabled:bg-[var(--semantic-color-brand-primary-hover)] hover:enabled:shadow-[var(--shadow-md)] active:enabled:scale-95",
219
+ ghost: "bg-transparent text-[var(--semantic-color-text-default)] hover:enabled:bg-[var(--semantic-color-bg-muted)]"
220
+ };
221
+ var sizeStyles3 = {
222
+ sm: "px-[var(--button-sm-padding-x)] py-[var(--button-sm-padding-y)] text-[length:var(--button-sm-font-size)] leading-normal",
223
+ md: "px-[var(--button-md-padding-x)] py-[var(--button-md-padding-y)] text-[length:var(--button-md-font-size)] leading-normal",
224
+ lg: "px-[var(--button-lg-padding-x)] py-[var(--button-lg-padding-y)] text-[length:var(--button-lg-font-size)] leading-normal",
225
+ xl: "px-[var(--button-xl-padding-x)] py-[var(--button-xl-padding-y)] text-[length:var(--button-xl-font-size)] leading-normal"
226
+ };
162
227
  function Button({
163
228
  variant = "primary",
164
229
  size = "md",
@@ -170,12 +235,16 @@ function Button({
170
235
  type = "submit",
171
236
  ...props
172
237
  }) {
173
- const classNames = [Button_default.button, Button_default[variant], Button_default[size], className].filter(Boolean).join(" ");
174
238
  return /* @__PURE__ */ jsx5(
175
239
  "button",
176
240
  {
177
241
  type,
178
- className: classNames,
242
+ className: cn(
243
+ "inline-flex items-center justify-center gap-2 border border-transparent rounded-[var(--button-radius)] font-sans font-[number:var(--button-font-weight)] cursor-pointer transition-all duration-[var(--button-transition-duration)] focus-visible:outline-none disabled:opacity-[var(--disabled-opacity)] disabled:cursor-not-allowed",
244
+ variantStyles[variant],
245
+ sizeStyles3[size],
246
+ className
247
+ ),
179
248
  disabled: disabled || isLoading,
180
249
  "aria-busy": isLoading || void 0,
181
250
  ...props,
@@ -184,11 +253,19 @@ function Button({
184
253
  );
185
254
  }
186
255
 
187
- // src/components/Card/Card.module.css
188
- var Card_default = {};
189
-
190
256
  // src/components/Card/Card.tsx
191
257
  import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
258
+ var variantStyles2 = {
259
+ default: "border border-[var(--semantic-color-border-default)]",
260
+ elevated: "border border-black/5 bg-[var(--semantic-color-bg-default)]/90 shadow-[var(--card-shadow)] backdrop-blur-[var(--card-backdrop-blur)]",
261
+ glass: "bg-[var(--semantic-color-bg-default)]/80 shadow-lg backdrop-blur-[var(--card-backdrop-blur)]"
262
+ };
263
+ var paddingStyles = {
264
+ none: "",
265
+ sm: "p-[var(--card-padding-sm)]",
266
+ md: "p-[var(--card-padding)]",
267
+ lg: "p-[var(--card-padding-lg)]"
268
+ };
192
269
  function Card({
193
270
  variant = "default",
194
271
  padding = "md",
@@ -197,55 +274,106 @@ function Card({
197
274
  children,
198
275
  ...props
199
276
  }) {
200
- const classNames = [
201
- Card_default.card,
202
- !hoverable && Card_default[variant],
203
- hoverable && Card_default.hoverable,
204
- className
205
- ].filter(Boolean).join(" ");
206
- const contentClass = [Card_default.cardContent, padding !== "none" && Card_default[`padding-${padding}`]].filter(Boolean).join(" ");
207
277
  if (hoverable) {
208
- return /* @__PURE__ */ jsxs4("div", { className: classNames, ...props, children: [
209
- /* @__PURE__ */ jsx6("div", { className: Card_default.gradientOverlay }),
210
- /* @__PURE__ */ jsx6("div", { className: Card_default.innerGlow }),
211
- /* @__PURE__ */ jsx6("div", { className: Card_default.ringHighlight }),
212
- /* @__PURE__ */ jsx6("div", { className: contentClass, children }),
213
- /* @__PURE__ */ jsx6("div", { className: Card_default.glowBorder })
214
- ] });
278
+ return /* @__PURE__ */ jsxs4(
279
+ "div",
280
+ {
281
+ className: cn(
282
+ "group relative overflow-hidden rounded-[var(--card-radius)] transition-all duration-[var(--card-transition-duration)]",
283
+ "cursor-pointer border border-black/5 bg-[var(--semantic-color-bg-default)]/90 shadow-[var(--card-shadow)] backdrop-blur-[var(--card-backdrop-blur)]",
284
+ "hover:translate-y-[var(--card-hover-lift)] hover:border-[var(--semantic-color-border-muted)]/50 hover:bg-[var(--semantic-color-bg-default)] hover:shadow-[var(--card-shadow-hover)]",
285
+ "active:scale-[var(--card-active-scale)]",
286
+ className
287
+ ),
288
+ ...props,
289
+ children: [
290
+ /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 rounded-[var(--card-radius)] bg-gradient-to-br from-[var(--semantic-color-bg-subtle)]/80 to-[var(--semantic-color-bg-muted)]/80 opacity-[0.03] pointer-events-none" }),
291
+ /* @__PURE__ */ jsx6("div", { className: "absolute inset-px rounded-[var(--card-radius)] bg-gradient-to-br from-[var(--semantic-color-bg-default)]/80 to-[var(--semantic-color-bg-default)]/20 pointer-events-none" }),
292
+ /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 rounded-[var(--card-radius)] shadow-[inset_0_0_0_1px_var(--card-glass-border)] transition-shadow duration-[var(--card-transition-duration)] pointer-events-none group-hover:shadow-[inset_0_0_0_1px_var(--card-glass-border-hover)]" }),
293
+ /* @__PURE__ */ jsx6("div", { className: cn("relative", paddingStyles[padding]), children }),
294
+ /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 rounded-[var(--card-radius)] bg-gradient-to-r from-transparent via-[var(--semantic-color-border-muted)]/20 to-transparent opacity-0 transition-opacity duration-[var(--card-transition-duration)] pointer-events-none group-hover:opacity-100" })
295
+ ]
296
+ }
297
+ );
215
298
  }
216
- return /* @__PURE__ */ jsx6("div", { className: classNames, ...props, children: /* @__PURE__ */ jsx6("div", { className: contentClass, children }) });
299
+ return /* @__PURE__ */ jsx6(
300
+ "div",
301
+ {
302
+ className: cn(
303
+ "relative overflow-hidden rounded-[var(--card-radius)] bg-[var(--semantic-color-bg-default)] transition-all duration-[var(--card-transition-duration)]",
304
+ variantStyles2[variant],
305
+ className
306
+ ),
307
+ ...props,
308
+ children: /* @__PURE__ */ jsx6("div", { className: cn("relative", paddingStyles[padding]), children })
309
+ }
310
+ );
217
311
  }
218
312
 
219
- // src/components/Checkbox/Checkbox.module.css
220
- var Checkbox_default = {};
221
-
222
313
  // src/components/Checkbox/Checkbox.tsx
223
314
  import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
224
315
  function Checkbox({ label, id, name, className, ...props }) {
225
316
  const inputId = id || name || label.toLowerCase().replace(/\s+/g, "-");
226
- return /* @__PURE__ */ jsxs5("label", { htmlFor: inputId, className: [Checkbox_default.wrapper, className].filter(Boolean).join(" "), children: [
227
- /* @__PURE__ */ jsx7("input", { type: "checkbox", id: inputId, name, className: Checkbox_default.input, ...props }),
228
- /* @__PURE__ */ jsx7("span", { className: Checkbox_default.label, children: label })
229
- ] });
317
+ return /* @__PURE__ */ jsxs5(
318
+ "label",
319
+ {
320
+ htmlFor: inputId,
321
+ className: cn(
322
+ "flex items-center gap-[var(--checkbox-gap)] px-2 py-1.5 rounded-md cursor-pointer transition-colors duration-[var(--duration-fast)] hover:bg-[var(--semantic-color-bg-subtle)]",
323
+ className
324
+ ),
325
+ children: [
326
+ /* @__PURE__ */ jsx7(
327
+ "input",
328
+ {
329
+ type: "checkbox",
330
+ id: inputId,
331
+ name,
332
+ className: "size-[var(--checkbox-size)] rounded-sm border border-[var(--semantic-color-border-strong)] accent-[var(--semantic-color-text-default)] cursor-pointer disabled:opacity-[var(--disabled-opacity)] disabled:cursor-not-allowed",
333
+ ...props
334
+ }
335
+ ),
336
+ /* @__PURE__ */ jsx7("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
337
+ ]
338
+ }
339
+ );
230
340
  }
231
341
 
232
- // src/components/Divider/Divider.module.css
233
- var Divider_default = {};
234
-
235
342
  // src/components/Divider/Divider.tsx
236
343
  import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
344
+ var spacingStyles = {
345
+ sm: "my-2",
346
+ md: "my-4",
347
+ lg: "my-8"
348
+ };
237
349
  function Divider({ spacing = "md", label, className, ...props }) {
238
350
  if (label) {
239
- return /* @__PURE__ */ jsxs6("div", { className: [Divider_default.labeled, Divider_default[spacing], className].filter(Boolean).join(" "), children: [
240
- /* @__PURE__ */ jsx8("hr", { className: Divider_default.line, ...props }),
241
- /* @__PURE__ */ jsx8("span", { className: Divider_default.label, children: label }),
242
- /* @__PURE__ */ jsx8("hr", { className: Divider_default.line, ...props })
351
+ return /* @__PURE__ */ jsxs6("div", { className: cn("flex items-center gap-4", spacingStyles[spacing], className), children: [
352
+ /* @__PURE__ */ jsx8(
353
+ "hr",
354
+ {
355
+ className: "flex-1 border-0 border-t border-[var(--semantic-color-border-default)]",
356
+ ...props
357
+ }
358
+ ),
359
+ /* @__PURE__ */ jsx8("span", { className: "font-sans text-xs font-medium text-[var(--semantic-color-text-muted)] whitespace-nowrap", children: label }),
360
+ /* @__PURE__ */ jsx8(
361
+ "hr",
362
+ {
363
+ className: "flex-1 border-0 border-t border-[var(--semantic-color-border-default)]",
364
+ ...props
365
+ }
366
+ )
243
367
  ] });
244
368
  }
245
369
  return /* @__PURE__ */ jsx8(
246
370
  "hr",
247
371
  {
248
- className: [Divider_default.divider, Divider_default[spacing], className].filter(Boolean).join(" "),
372
+ className: cn(
373
+ "border-0 border-t border-[var(--semantic-color-border-default)]",
374
+ spacingStyles[spacing],
375
+ className
376
+ ),
249
377
  ...props
250
378
  }
251
379
  );
@@ -254,11 +382,6 @@ function Divider({ spacing = "md", label, className, ...props }) {
254
382
  // src/components/DropdownMenu/DropdownMenu.tsx
255
383
  import { useCallback, useEffect, useRef, useState as useState2 } from "react";
256
384
  import { createPortal } from "react-dom";
257
-
258
- // src/components/DropdownMenu/DropdownMenu.module.css
259
- var DropdownMenu_default = {};
260
-
261
- // src/components/DropdownMenu/DropdownMenu.tsx
262
385
  import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
263
386
  function DropdownMenu({ items, trigger, className }) {
264
387
  const [isOpen, setIsOpen] = useState2(false);
@@ -303,7 +426,7 @@ function DropdownMenu({ items, trigger, className }) {
303
426
  "div",
304
427
  {
305
428
  ref: menuRef,
306
- className: DropdownMenu_default.menu,
429
+ className: "fixed z-[var(--dropdown-z-index)] w-[var(--dropdown-width)] p-[var(--dropdown-padding)] border border-[var(--semantic-color-border-default)] rounded-[var(--dropdown-radius)] bg-[var(--semantic-color-bg-default)] shadow-[var(--dropdown-shadow)]",
307
430
  style: { top: position.top, right: position.right },
308
431
  role: "menu",
309
432
  children: items.map((item) => /* @__PURE__ */ jsx9(
@@ -315,7 +438,10 @@ function DropdownMenu({ items, trigger, className }) {
315
438
  close();
316
439
  item.onClick();
317
440
  },
318
- className: [DropdownMenu_default.menuItem, item.variant === "danger" && DropdownMenu_default.menuItemDanger].filter(Boolean).join(" "),
441
+ className: cn(
442
+ "flex w-full items-center px-[var(--dropdown-item-padding-x)] py-[var(--dropdown-item-padding-y)] border-none rounded-[var(--dropdown-item-radius)] bg-transparent font-sans text-[length:var(--dropdown-item-font-size)] text-left cursor-pointer transition-colors duration-[var(--duration-fast)]",
443
+ item.variant === "danger" ? "text-[var(--semantic-color-feedback-error-text)] hover:bg-[var(--semantic-color-feedback-error-light)]" : "text-[var(--semantic-color-text-tertiary)] hover:bg-[var(--semantic-color-bg-muted)]"
444
+ ),
319
445
  children: item.label
320
446
  },
321
447
  item.id
@@ -329,69 +455,97 @@ function DropdownMenu({ items, trigger, className }) {
329
455
  ref: buttonRef,
330
456
  type: "button",
331
457
  onClick: handleToggle,
332
- className: [DropdownMenu_default.trigger, className].filter(Boolean).join(" "),
458
+ className: cn(
459
+ "flex items-center justify-center p-1 border-none rounded-md bg-transparent text-[var(--semantic-color-text-muted)] cursor-pointer transition-all duration-[var(--duration-fast)] hover:bg-[var(--semantic-color-bg-muted)] hover:text-[var(--semantic-color-text-secondary)]",
460
+ className
461
+ ),
333
462
  "aria-label": "Aktionen",
334
463
  "aria-expanded": isOpen,
335
464
  "aria-haspopup": "menu",
336
- children: trigger || /* @__PURE__ */ jsx9("svg", { className: DropdownMenu_default.dotsIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx9("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" }) })
465
+ children: trigger || /* @__PURE__ */ jsx9("svg", { className: "size-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx9("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" }) })
337
466
  }
338
467
  ),
339
468
  menu && createPortal(menu, document.body)
340
469
  ] });
341
470
  }
342
471
 
343
- // src/components/FilterChips/FilterChips.module.css
344
- var FilterChips_default = {};
345
-
346
472
  // src/components/FilterChips/FilterChips.tsx
347
473
  import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
348
474
  function FilterChips({ filters, onClearAll, className, ...props }) {
349
475
  if (filters.length === 0) return null;
350
- return /* @__PURE__ */ jsxs8("div", { className: [FilterChips_default.wrapper, className].filter(Boolean).join(" "), ...props, children: [
351
- /* @__PURE__ */ jsx10("div", { className: FilterChips_default.chips, children: filters.map((filter) => /* @__PURE__ */ jsxs8("span", { className: FilterChips_default.chip, children: [
352
- filter.label,
353
- /* @__PURE__ */ jsx10("button", { type: "button", onClick: filter.onRemove, className: FilterChips_default.removeButton, children: /* @__PURE__ */ jsx10("svg", { width: "12", height: "12", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx10(
354
- "path",
355
- {
356
- strokeLinecap: "round",
357
- strokeLinejoin: "round",
358
- strokeWidth: 2,
359
- d: "M6 18L18 6M6 6l12 12"
360
- }
361
- ) }) })
362
- ] }, filter.id)) }),
363
- onClearAll && filters.length > 1 && /* @__PURE__ */ jsx10("button", { type: "button", onClick: onClearAll, className: FilterChips_default.clearAll, children: "Alle l\xF6schen" })
476
+ return /* @__PURE__ */ jsxs8("div", { className: cn("flex items-center justify-between", className), ...props, children: [
477
+ /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-2", children: filters.map((filter) => /* @__PURE__ */ jsxs8(
478
+ "span",
479
+ {
480
+ className: "inline-flex items-center gap-1 px-3 py-1 rounded-full bg-[var(--semantic-color-brand-primary-light)] font-sans text-xs font-medium text-[var(--semantic-color-brand-primary-dark)]",
481
+ children: [
482
+ filter.label,
483
+ /* @__PURE__ */ jsx10(
484
+ "button",
485
+ {
486
+ type: "button",
487
+ onClick: filter.onRemove,
488
+ className: "flex p-0 border-none bg-transparent text-inherit cursor-pointer transition-colors duration-[var(--duration-fast)] hover:text-[var(--semantic-color-brand-primary-hover)]",
489
+ children: /* @__PURE__ */ jsx10("svg", { width: "12", height: "12", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx10(
490
+ "path",
491
+ {
492
+ strokeLinecap: "round",
493
+ strokeLinejoin: "round",
494
+ strokeWidth: 2,
495
+ d: "M6 18L18 6M6 6l12 12"
496
+ }
497
+ ) })
498
+ }
499
+ )
500
+ ]
501
+ },
502
+ filter.id
503
+ )) }),
504
+ onClearAll && filters.length > 1 && /* @__PURE__ */ jsx10(
505
+ "button",
506
+ {
507
+ type: "button",
508
+ onClick: onClearAll,
509
+ className: "p-0 border-none bg-transparent font-sans text-xs font-medium text-[var(--semantic-color-brand-primary)] cursor-pointer whitespace-nowrap transition-colors duration-[var(--duration-fast)] hover:text-[var(--semantic-color-brand-primary-hover)]",
510
+ children: "Alle l\xF6schen"
511
+ }
512
+ )
364
513
  ] });
365
514
  }
366
515
 
367
516
  // src/components/Input/Input.tsx
368
517
  import { useState as useState3 } from "react";
369
-
370
- // src/components/Input/Input.module.css
371
- var Input_default = {};
372
-
373
- // src/components/Input/Input.tsx
374
518
  import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
375
519
  function Input({ label, error, id, name, type = "text", className, ...props }) {
376
520
  const [showPassword, setShowPassword] = useState3(false);
377
521
  const inputId = id || name;
378
522
  const isPassword = type === "password";
379
523
  const resolvedType = isPassword && showPassword ? "text" : type;
380
- return /* @__PURE__ */ jsxs9("div", { className: Input_default.wrapper, children: [
381
- label && /* @__PURE__ */ jsx11("label", { htmlFor: inputId, className: Input_default.label, children: label }),
382
- /* @__PURE__ */ jsxs9("div", { className: Input_default.container, children: [
524
+ return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-2", children: [
525
+ label && /* @__PURE__ */ jsx11(
526
+ "label",
527
+ {
528
+ htmlFor: inputId,
529
+ className: "font-sans text-sm font-medium text-[var(--semantic-color-text-default)]",
530
+ children: label
531
+ }
532
+ ),
533
+ /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
383
534
  /* @__PURE__ */ jsx11(
384
535
  "input",
385
536
  {
386
537
  id: inputId,
387
538
  name,
388
539
  type: resolvedType,
389
- className: [
390
- Input_default.input,
391
- isPassword && Input_default.hasToggle,
392
- error && Input_default.error,
540
+ className: cn(
541
+ "block w-full border border-[var(--semantic-color-border-default)] rounded-[var(--input-radius)] bg-[var(--semantic-color-bg-default)] px-[var(--input-padding-x)] py-[var(--input-padding-y)] font-sans text-[length:var(--input-font-size)] text-[var(--semantic-color-text-default)] shadow-[var(--shadow-sm)] transition-[border-color,box-shadow] duration-[var(--duration-fast)]",
542
+ "placeholder:text-[var(--semantic-color-text-muted)]",
543
+ "focus:outline-none focus:border-[var(--semantic-color-border-strong)]",
544
+ "disabled:opacity-[var(--disabled-opacity)] disabled:cursor-not-allowed disabled:bg-[var(--semantic-color-bg-subtle)]",
545
+ isPassword && "pr-10",
546
+ error && "border-[var(--semantic-color-feedback-error)]",
393
547
  className
394
- ].filter(Boolean).join(" "),
548
+ ),
395
549
  "aria-invalid": error ? "true" : void 0,
396
550
  "aria-describedby": error ? `${inputId}-error` : void 0,
397
551
  ...props
@@ -402,7 +556,7 @@ function Input({ label, error, id, name, type = "text", className, ...props }) {
402
556
  {
403
557
  type: "button",
404
558
  onClick: () => setShowPassword((prev) => !prev),
405
- className: Input_default.toggle,
559
+ className: "absolute top-1/2 right-3 -translate-y-1/2 flex items-center justify-center p-0 border-none bg-transparent text-[var(--semantic-color-text-muted)] cursor-pointer transition-colors duration-[var(--duration-fast)] hover:text-[var(--semantic-color-text-default)]",
406
560
  "aria-label": showPassword ? "Passwort verbergen" : "Passwort anzeigen",
407
561
  tabIndex: -1,
408
562
  children: showPassword ? /* @__PURE__ */ jsx11("svg", { width: "20", height: "20", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx11(
@@ -436,7 +590,14 @@ function Input({ label, error, id, name, type = "text", className, ...props }) {
436
590
  }
437
591
  )
438
592
  ] }),
439
- error && /* @__PURE__ */ jsx11("p", { id: `${inputId}-error`, className: Input_default.errorText, children: error })
593
+ error && /* @__PURE__ */ jsx11(
594
+ "p",
595
+ {
596
+ id: `${inputId}-error`,
597
+ className: "font-sans text-xs text-[var(--semantic-color-feedback-error-text)] m-0",
598
+ children: error
599
+ }
600
+ )
440
601
  ] });
441
602
  }
442
603
 
@@ -489,11 +650,6 @@ function Logo({ size = 48, ...props }) {
489
650
  // src/components/Modal/Modal.tsx
490
651
  import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
491
652
  import { createPortal as createPortal2 } from "react-dom";
492
-
493
- // src/components/Modal/Modal.module.css
494
- var Modal_default = {};
495
-
496
- // src/components/Modal/Modal.tsx
497
653
  import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
498
654
  function Modal({ isOpen, onClose, title, children, footer }) {
499
655
  const [isAnimating, setIsAnimating] = useState4(false);
@@ -527,36 +683,45 @@ function Modal({ isOpen, onClose, title, children, footer }) {
527
683
  }, [isOpen, handleClose]);
528
684
  if (!isOpen) return null;
529
685
  const entering = isAnimating && !isExiting;
530
- const modalContent = /* @__PURE__ */ jsxs11("div", { className: Modal_default.overlay, children: [
686
+ const modalContent = /* @__PURE__ */ jsxs11("div", { className: "fixed inset-0 z-[var(--modal-z-index)] flex items-center justify-center", children: [
531
687
  /* @__PURE__ */ jsx13(
532
688
  "button",
533
689
  {
534
690
  type: "button",
535
691
  onClick: handleClose,
536
- className: [Modal_default.backdrop, entering && Modal_default.backdropVisible].filter(Boolean).join(" "),
692
+ className: cn(
693
+ "absolute inset-0 border-none p-0 cursor-default transition-colors duration-[var(--duration-fast)]",
694
+ entering ? "bg-black/40" : "bg-transparent"
695
+ ),
537
696
  "aria-label": "Hintergrund - Klicken zum Schlie\xDFen"
538
697
  }
539
698
  ),
540
699
  /* @__PURE__ */ jsxs11(
541
700
  "div",
542
701
  {
543
- className: [Modal_default.dialog, entering ? Modal_default.dialogEnter : Modal_default.dialogExit].join(" "),
702
+ className: cn(
703
+ "relative w-[calc(100%-2rem)] max-w-[var(--modal-max-width)] max-h-[calc(100vh-4rem)] mx-4 overflow-hidden rounded-[var(--modal-radius)] border border-[var(--semantic-color-border-default)] bg-[image:var(--modal-bg)] backdrop-blur-[var(--modal-backdrop-blur)] shadow-[var(--modal-shadow)]",
704
+ entering ? "animate-[modalEnter_250ms_ease-out_both]" : "animate-[modalExit_200ms_ease-in_both]"
705
+ ),
544
706
  role: "dialog",
545
707
  "aria-modal": "true",
546
708
  "aria-label": title || void 0,
547
709
  children: [
548
- title ? /* @__PURE__ */ jsxs11("div", { className: Modal_default.header, children: [
549
- /* @__PURE__ */ jsx13("h3", { className: Modal_default.title, children: title }),
710
+ title ? /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between px-[var(--modal-padding-x)] py-[var(--modal-padding-y)] border-b border-[var(--semantic-color-border-subtle)]", children: [
711
+ /* @__PURE__ */ jsx13("h3", { className: "font-sans text-lg font-semibold text-[var(--semantic-color-text-default)] m-0 pr-4", children: title }),
550
712
  /* @__PURE__ */ jsx13(CloseButton, { onClick: handleClose })
551
- ] }) : /* @__PURE__ */ jsx13("div", { className: Modal_default.closeAbsolute, children: /* @__PURE__ */ jsx13(CloseButton, { onClick: handleClose }) }),
713
+ ] }) : /* @__PURE__ */ jsx13("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsx13(CloseButton, { onClick: handleClose }) }),
552
714
  /* @__PURE__ */ jsx13(
553
715
  "div",
554
716
  {
555
- className: [Modal_default.content, entering && Modal_default.contentVisible].filter(Boolean).join(" "),
717
+ className: cn(
718
+ "px-[var(--modal-padding-x)] py-[var(--modal-padding-y)] overflow-y-auto max-h-[calc(100vh-8rem)] text-[var(--semantic-color-text-default)] font-sans leading-relaxed opacity-0",
719
+ entering && "animate-[contentReveal_300ms_ease-out_50ms_both]"
720
+ ),
556
721
  children
557
722
  }
558
723
  ),
559
- footer && /* @__PURE__ */ jsx13("div", { className: Modal_default.footer, children: footer })
724
+ footer && /* @__PURE__ */ jsx13("div", { className: "flex justify-end gap-3 px-[var(--modal-padding-x)] py-[var(--modal-padding-y)] border-t border-[var(--semantic-color-border-subtle)] bg-[var(--modal-footer-bg)]", children: footer })
560
725
  ]
561
726
  }
562
727
  )
@@ -578,28 +743,46 @@ function ConfirmationModal({
578
743
  isConfirmDisabled = false,
579
744
  variant = "primary"
580
745
  }) {
581
- const confirmClass = variant === "danger" ? Modal_default.confirmDanger : Modal_default.confirmPrimary;
582
746
  const footer = /* @__PURE__ */ jsxs11(Fragment2, { children: [
583
- /* @__PURE__ */ jsx13("button", { type: "button", onClick: onClose, className: Modal_default.cancelButton, children: cancelText }),
747
+ /* @__PURE__ */ jsx13(
748
+ "button",
749
+ {
750
+ type: "button",
751
+ onClick: onClose,
752
+ className: "flex-1 px-4 py-2 border border-[var(--semantic-color-border-strong)] rounded-md bg-transparent font-sans text-sm font-medium text-[var(--semantic-color-text-tertiary)] whitespace-nowrap cursor-pointer transition-all duration-[var(--duration-fast)] hover:bg-[var(--semantic-color-bg-subtle)] hover:border-[var(--semantic-color-border-muted)] hover:scale-105 hover:shadow-md active:scale-100",
753
+ children: cancelText
754
+ }
755
+ ),
584
756
  /* @__PURE__ */ jsx13(
585
757
  "button",
586
758
  {
587
759
  type: "button",
588
760
  onClick: onConfirm,
589
761
  disabled: isConfirmLoading || isConfirmDisabled,
590
- className: [Modal_default.confirmButton, confirmClass].join(" "),
591
- children: isConfirmLoading ? /* @__PURE__ */ jsxs11("span", { className: Modal_default.confirmLoading, children: [
592
- /* @__PURE__ */ jsxs11("svg", { className: Modal_default.confirmSpinner, fill: "none", viewBox: "0 0 24 24", children: [
593
- /* @__PURE__ */ jsx13("circle", { opacity: 0.25, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
594
- /* @__PURE__ */ jsx13(
595
- "path",
596
- {
597
- opacity: 0.75,
598
- fill: "currentColor",
599
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
600
- }
601
- )
602
- ] }),
762
+ className: cn(
763
+ "flex-1 px-4 py-2 border-none rounded-md font-sans text-sm font-medium text-[var(--semantic-color-text-inverse)] whitespace-nowrap cursor-pointer transition-all duration-[var(--duration-fast)] hover:enabled:scale-105 hover:enabled:shadow-lg active:enabled:scale-100 disabled:opacity-[var(--disabled-opacity)] disabled:cursor-not-allowed",
764
+ variant === "danger" ? "bg-[var(--semantic-color-feedback-error-text)]" : "bg-[var(--semantic-color-bg-inverse)]"
765
+ ),
766
+ children: isConfirmLoading ? /* @__PURE__ */ jsxs11("span", { className: "flex items-center justify-center gap-2", children: [
767
+ /* @__PURE__ */ jsxs11(
768
+ "svg",
769
+ {
770
+ className: "size-4 animate-[ds-spin_0.7s_linear_infinite]",
771
+ fill: "none",
772
+ viewBox: "0 0 24 24",
773
+ children: [
774
+ /* @__PURE__ */ jsx13("circle", { opacity: 0.25, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
775
+ /* @__PURE__ */ jsx13(
776
+ "path",
777
+ {
778
+ opacity: 0.75,
779
+ fill: "currentColor",
780
+ d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
781
+ }
782
+ )
783
+ ]
784
+ }
785
+ ),
603
786
  "Wird geladen..."
604
787
  ] }) : confirmText
605
788
  }
@@ -613,12 +796,12 @@ function CloseButton({ onClick }) {
613
796
  {
614
797
  type: "button",
615
798
  onClick,
616
- className: Modal_default.closeButton,
799
+ className: "group flex items-center justify-center shrink-0 size-[var(--modal-close-size)] p-0 border-none rounded-lg bg-transparent text-[var(--semantic-color-text-muted)] cursor-pointer transition-all duration-[var(--duration-fast)] hover:bg-[var(--semantic-color-bg-muted)] hover:text-[var(--semantic-color-text-default)] hover:scale-105 active:scale-95",
617
800
  "aria-label": "Modal schlie\xDFen",
618
801
  children: /* @__PURE__ */ jsx13(
619
802
  "svg",
620
803
  {
621
- className: Modal_default.closeIcon,
804
+ className: "transition-transform duration-[var(--duration-fast)] group-hover:rotate-90",
622
805
  width: "20",
623
806
  height: "20",
624
807
  fill: "none",
@@ -632,11 +815,34 @@ function CloseButton({ onClick }) {
632
815
  );
633
816
  }
634
817
 
635
- // src/components/Pill/Pill.module.css
636
- var Pill_default = {};
637
-
638
818
  // src/components/Pill/Pill.tsx
639
819
  import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
820
+ var solidStyles = {
821
+ red: "bg-[var(--semantic-color-feedback-error-strong)] text-[var(--semantic-color-text-inverse)]",
822
+ green: "bg-[var(--semantic-color-brand-primary)] text-[var(--semantic-color-text-inverse)]",
823
+ blue: "bg-[var(--semantic-color-feedback-info)] text-[var(--semantic-color-text-inverse)]",
824
+ orange: "bg-[var(--semantic-color-feedback-warning)] text-[var(--semantic-color-text-inverse)]",
825
+ purple: "bg-[var(--semantic-color-feedback-accent)] text-[var(--semantic-color-text-inverse)]",
826
+ gray: "bg-[var(--semantic-color-border-muted)] text-[var(--semantic-color-text-inverse)]"
827
+ };
828
+ var subtleStyles = {
829
+ red: "bg-[var(--semantic-color-feedback-error-light)] text-[var(--semantic-color-feedback-error-text)]",
830
+ green: "bg-[var(--semantic-color-feedback-success-light)] text-[var(--semantic-color-feedback-success-text)]",
831
+ blue: "bg-[var(--semantic-color-feedback-info-light)] text-[var(--semantic-color-feedback-info-text)]",
832
+ orange: "bg-[var(--semantic-color-brand-secondary-light)] text-[var(--semantic-color-feedback-warning-text)]",
833
+ purple: "bg-[var(--semantic-color-feedback-accent-light)] text-[var(--semantic-color-feedback-accent-text)]",
834
+ gray: "bg-[var(--semantic-color-bg-muted)] text-[var(--semantic-color-text-secondary)]"
835
+ };
836
+ var sizeStyles4 = {
837
+ sm: "px-2 py-0.5 text-xs",
838
+ md: "px-3 py-1.5 text-xs",
839
+ lg: "px-4 py-2 text-sm"
840
+ };
841
+ var dotSizes = {
842
+ sm: "size-1 mr-1.5",
843
+ md: "size-1.5 mr-2",
844
+ lg: "size-2 mr-2.5"
845
+ };
640
846
  function Pill({
641
847
  label,
642
848
  color = "gray",
@@ -649,34 +855,62 @@ function Pill({
649
855
  return /* @__PURE__ */ jsxs12(
650
856
  "span",
651
857
  {
652
- className: [Pill_default.pill, Pill_default[`${variant}-${color}`], Pill_default[size], className].filter(Boolean).join(" "),
858
+ className: cn(
859
+ "inline-flex items-center rounded-full font-sans font-bold whitespace-nowrap",
860
+ variant === "solid" ? solidStyles[color] : subtleStyles[color],
861
+ sizeStyles4[size],
862
+ className
863
+ ),
653
864
  ...props,
654
865
  children: [
655
- dot && /* @__PURE__ */ jsx14("span", { className: [Pill_default.dot, Pill_default[`dot-${size}`]].join(" ") }),
866
+ dot && /* @__PURE__ */ jsx14("span", { className: cn("rounded-full bg-current opacity-80", dotSizes[size]) }),
656
867
  label
657
868
  ]
658
869
  }
659
870
  );
660
871
  }
661
872
 
662
- // src/components/Radio/Radio.module.css
663
- var Radio_default = {};
664
-
665
873
  // src/components/Radio/Radio.tsx
666
874
  import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
667
875
  function Radio({ label, id, name, className, ...props }) {
668
876
  const inputId = id || `${name}-${label.toLowerCase().replace(/\s+/g, "-")}`;
669
- return /* @__PURE__ */ jsxs13("label", { htmlFor: inputId, className: [Radio_default.wrapper, className].filter(Boolean).join(" "), children: [
670
- /* @__PURE__ */ jsx15("input", { type: "radio", id: inputId, name, className: Radio_default.input, ...props }),
671
- /* @__PURE__ */ jsx15("span", { className: Radio_default.label, children: label })
672
- ] });
877
+ return /* @__PURE__ */ jsxs13(
878
+ "label",
879
+ {
880
+ htmlFor: inputId,
881
+ className: cn(
882
+ "flex items-center gap-[var(--radio-gap)] px-2 py-1.5 rounded-md cursor-pointer transition-colors duration-[var(--duration-fast)] hover:bg-[var(--semantic-color-bg-subtle)]",
883
+ className
884
+ ),
885
+ children: [
886
+ /* @__PURE__ */ jsx15(
887
+ "input",
888
+ {
889
+ type: "radio",
890
+ id: inputId,
891
+ name,
892
+ className: "size-[var(--radio-size)] rounded-full border border-[var(--semantic-color-border-strong)] accent-[var(--semantic-color-text-default)] cursor-pointer disabled:opacity-[var(--disabled-opacity)] disabled:cursor-not-allowed",
893
+ ...props
894
+ }
895
+ ),
896
+ /* @__PURE__ */ jsx15("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
897
+ ]
898
+ }
899
+ );
673
900
  }
674
901
 
675
- // src/components/SearchBar/SearchBar.module.css
676
- var SearchBar_default = {};
677
-
678
902
  // src/components/SearchBar/SearchBar.tsx
679
903
  import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
904
+ var sizeStyles5 = {
905
+ sm: "py-2 pl-9 pr-3 text-sm",
906
+ md: "py-2.5 pl-9 pr-10 text-sm",
907
+ lg: "py-3 px-10 text-base"
908
+ };
909
+ var iconSizes = {
910
+ sm: "size-4",
911
+ md: "size-4",
912
+ lg: "size-5"
913
+ };
680
914
  function SearchBar({
681
915
  value,
682
916
  onChange,
@@ -686,11 +920,14 @@ function SearchBar({
686
920
  className,
687
921
  ...props
688
922
  }) {
689
- return /* @__PURE__ */ jsxs14("div", { className: [SearchBar_default.wrapper, className].filter(Boolean).join(" "), children: [
923
+ return /* @__PURE__ */ jsxs14("div", { className: cn("relative", className), children: [
690
924
  /* @__PURE__ */ jsx16(
691
925
  "svg",
692
926
  {
693
- className: [SearchBar_default.searchIcon, SearchBar_default[`icon-${size}`]].join(" "),
927
+ className: cn(
928
+ "absolute top-1/2 left-3 -translate-y-1/2 text-[var(--semantic-color-text-muted)]",
929
+ iconSizes[size]
930
+ ),
694
931
  fill: "none",
695
932
  viewBox: "0 0 24 24",
696
933
  stroke: "currentColor",
@@ -712,7 +949,12 @@ function SearchBar({
712
949
  placeholder,
713
950
  value,
714
951
  onChange: (e) => onChange(e.target.value),
715
- className: [SearchBar_default.input, SearchBar_default[size]].join(" "),
952
+ className: cn(
953
+ "w-full border border-[var(--semantic-color-border-default)] rounded-[var(--input-radius)] bg-[var(--semantic-color-bg-default)] text-[var(--semantic-color-text-default)] font-sans transition-[border-color] duration-[var(--duration-fast)]",
954
+ "placeholder:text-[var(--semantic-color-text-muted)]",
955
+ "focus:outline-none focus:border-[var(--semantic-color-border-strong)]",
956
+ sizeStyles5[size]
957
+ ),
716
958
  ...props
717
959
  }
718
960
  ),
@@ -724,11 +966,11 @@ function SearchBar({
724
966
  onChange("");
725
967
  onClear?.();
726
968
  },
727
- className: SearchBar_default.clearButton,
969
+ className: "absolute top-1/2 right-2 -translate-y-1/2 flex items-center justify-center p-1 border-none rounded-full bg-transparent cursor-pointer transition-colors duration-[var(--duration-fast)] hover:bg-[var(--semantic-color-bg-muted)]",
728
970
  children: /* @__PURE__ */ jsx16(
729
971
  "svg",
730
972
  {
731
- className: [SearchBar_default.clearIcon, SearchBar_default[`icon-${size}`]].join(" "),
973
+ className: cn("text-[var(--semantic-color-text-muted)]", iconSizes[size]),
732
974
  fill: "none",
733
975
  viewBox: "0 0 24 24",
734
976
  stroke: "currentColor",
@@ -748,21 +990,30 @@ function SearchBar({
748
990
  ] });
749
991
  }
750
992
 
751
- // src/components/Select/Select.module.css
752
- var Select_default = {};
753
-
754
993
  // src/components/Select/Select.tsx
755
994
  import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
756
995
  function Select({ label, placeholder, options, id, className, ...props }) {
757
996
  const selectId = id || (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
758
- return /* @__PURE__ */ jsxs15("div", { className: Select_default.wrapper, children: [
759
- label && /* @__PURE__ */ jsx17("label", { htmlFor: selectId, className: Select_default.label, children: label }),
760
- /* @__PURE__ */ jsxs15("div", { className: Select_default.container, children: [
997
+ return /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
998
+ label && /* @__PURE__ */ jsx17(
999
+ "label",
1000
+ {
1001
+ htmlFor: selectId,
1002
+ className: "font-sans text-sm font-medium text-[var(--semantic-color-text-default)]",
1003
+ children: label
1004
+ }
1005
+ ),
1006
+ /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
761
1007
  /* @__PURE__ */ jsxs15(
762
1008
  "select",
763
1009
  {
764
1010
  id: selectId,
765
- className: [Select_default.select, className].filter(Boolean).join(" "),
1011
+ className: cn(
1012
+ "w-full appearance-none border border-[var(--semantic-color-border-default)] rounded-[var(--select-radius)] bg-[var(--semantic-color-bg-default)] py-[var(--select-padding-y)] pl-[var(--select-padding-left)] pr-10 font-sans text-[length:var(--select-font-size)] text-[var(--semantic-color-text-default)] cursor-pointer transition-[border-color,box-shadow] duration-[var(--duration-fast)]",
1013
+ "focus:outline-none focus:border-[var(--semantic-color-border-strong)]",
1014
+ "disabled:opacity-[var(--disabled-opacity)] disabled:cursor-not-allowed",
1015
+ className
1016
+ ),
766
1017
  ...props,
767
1018
  children: [
768
1019
  placeholder && /* @__PURE__ */ jsx17("option", { value: "", disabled: props.required, children: placeholder }),
@@ -770,16 +1021,21 @@ function Select({ label, placeholder, options, id, className, ...props }) {
770
1021
  ]
771
1022
  }
772
1023
  ),
773
- /* @__PURE__ */ jsx17("div", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
1024
+ /* @__PURE__ */ jsx17(
1025
+ "div",
1026
+ {
1027
+ className: "absolute top-0 right-0 bottom-0 flex items-center pr-3 text-[var(--semantic-color-text-muted)] pointer-events-none",
1028
+ "aria-hidden": "true",
1029
+ children: /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
1030
+ }
1031
+ )
774
1032
  ] })
775
1033
  ] });
776
1034
  }
777
1035
 
778
- // src/components/Skeleton/Skeleton.module.css
779
- var Skeleton_default = {};
780
-
781
1036
  // src/components/Skeleton/Skeleton.tsx
782
1037
  import { jsx as jsx18 } from "react/jsx-runtime";
1038
+ var skeletonClass = "animate-[wave_1.5s_ease-in-out_infinite] bg-[length:200%_100%] bg-[linear-gradient(90deg,var(--semantic-color-bg-muted)_25%,var(--semantic-color-bg-subtle)_50%,var(--semantic-color-bg-muted)_75%)]";
783
1039
  function Skeleton({
784
1040
  width,
785
1041
  height = 16,
@@ -791,7 +1047,7 @@ function Skeleton({
791
1047
  style,
792
1048
  ...props
793
1049
  }) {
794
- const resolvedRadius = circle ? "9999px" : borderRadius != null ? typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius : "var(--radius-md)";
1050
+ const resolvedRadius = circle ? "var(--radius-full)" : borderRadius != null ? typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius : "var(--radius-md)";
795
1051
  const itemStyle = {
796
1052
  width: circle ? height : width,
797
1053
  height,
@@ -802,26 +1058,16 @@ function Skeleton({
802
1058
  return /* @__PURE__ */ jsx18(
803
1059
  "div",
804
1060
  {
805
- className: [Skeleton_default.skeleton, className].filter(Boolean).join(" "),
1061
+ className: cn(skeletonClass, className),
806
1062
  style: itemStyle,
807
1063
  "aria-hidden": "true",
808
1064
  ...props
809
1065
  }
810
1066
  );
811
1067
  }
812
- return /* @__PURE__ */ jsx18("div", { className: Skeleton_default.group, style: { gap }, "aria-hidden": "true", ...props, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx18(
813
- "div",
814
- {
815
- className: [Skeleton_default.skeleton, className].filter(Boolean).join(" "),
816
- style: itemStyle
817
- },
818
- `skeleton-${i}`
819
- )) });
1068
+ return /* @__PURE__ */ jsx18("div", { className: "flex flex-col", style: { gap }, "aria-hidden": "true", ...props, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx18("div", { className: cn(skeletonClass, className), style: itemStyle }, `skeleton-${i}`)) });
820
1069
  }
821
1070
 
822
- // src/components/Spinner/Spinner.module.css
823
- var Spinner_default = {};
824
-
825
1071
  // src/components/Spinner/Spinner.tsx
826
1072
  import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
827
1073
  var sizes = { sm: 20, md: 32, lg: 48 };
@@ -831,43 +1077,59 @@ function Spinner({ size = "md", label, className, ...props }) {
831
1077
  const stroke = strokes[size];
832
1078
  const r = (s - stroke) / 2;
833
1079
  const circumference = 2 * Math.PI * r;
834
- return /* @__PURE__ */ jsxs16("div", { className: [Spinner_default.wrapper, className].filter(Boolean).join(" "), role: "status", ...props, children: [
835
- /* @__PURE__ */ jsxs16("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, className: Spinner_default.svg, children: [
836
- /* @__PURE__ */ jsx19(
837
- "circle",
838
- {
839
- cx: s / 2,
840
- cy: s / 2,
841
- r,
842
- fill: "none",
843
- stroke: "var(--semantic-color-border-default)",
844
- strokeWidth: stroke
845
- }
846
- ),
847
- /* @__PURE__ */ jsx19(
848
- "circle",
849
- {
850
- cx: s / 2,
851
- cy: s / 2,
852
- r,
853
- fill: "none",
854
- stroke: "var(--semantic-color-brand-primary)",
855
- strokeWidth: stroke,
856
- strokeLinecap: "round",
857
- strokeDasharray: `${circumference * 0.3} ${circumference * 0.7}`
858
- }
859
- )
860
- ] }),
861
- label && /* @__PURE__ */ jsx19("p", { className: Spinner_default.label, children: label }),
862
- /* @__PURE__ */ jsx19("span", { className: Spinner_default.srOnly, children: "Laden..." })
1080
+ return /* @__PURE__ */ jsxs16("div", { className: cn("flex flex-col items-center gap-3", className), role: "status", ...props, children: [
1081
+ /* @__PURE__ */ jsxs16(
1082
+ "svg",
1083
+ {
1084
+ width: s,
1085
+ height: s,
1086
+ viewBox: `0 0 ${s} ${s}`,
1087
+ className: "animate-[ds-spin_0.8s_cubic-bezier(0.4,0,0.2,1)_infinite]",
1088
+ children: [
1089
+ /* @__PURE__ */ jsx19(
1090
+ "circle",
1091
+ {
1092
+ cx: s / 2,
1093
+ cy: s / 2,
1094
+ r,
1095
+ fill: "none",
1096
+ stroke: "var(--semantic-color-border-default)",
1097
+ strokeWidth: stroke
1098
+ }
1099
+ ),
1100
+ /* @__PURE__ */ jsx19(
1101
+ "circle",
1102
+ {
1103
+ cx: s / 2,
1104
+ cy: s / 2,
1105
+ r,
1106
+ fill: "none",
1107
+ stroke: "var(--semantic-color-brand-primary)",
1108
+ strokeWidth: stroke,
1109
+ strokeLinecap: "round",
1110
+ strokeDasharray: `${circumference * 0.3} ${circumference * 0.7}`
1111
+ }
1112
+ )
1113
+ ]
1114
+ }
1115
+ ),
1116
+ label && /* @__PURE__ */ jsx19("p", { className: "m-0 font-sans text-sm text-[var(--semantic-color-text-muted)]", children: label }),
1117
+ /* @__PURE__ */ jsx19("span", { className: "sr-only", children: "Laden..." })
863
1118
  ] });
864
1119
  }
865
1120
 
866
- // src/components/StatusDot/StatusDot.module.css
867
- var StatusDot_default = {};
868
-
869
1121
  // src/components/StatusDot/StatusDot.tsx
870
1122
  import { jsx as jsx20 } from "react/jsx-runtime";
1123
+ var colorStyles = {
1124
+ green: "bg-[var(--semantic-color-feedback-success)]",
1125
+ yellow: "bg-[var(--semantic-color-feedback-warning)]",
1126
+ red: "bg-[var(--semantic-color-feedback-error)]",
1127
+ gray: "bg-[var(--semantic-color-border-muted)]"
1128
+ };
1129
+ var sizeStyles6 = {
1130
+ sm: "size-2.5",
1131
+ md: "size-3"
1132
+ };
871
1133
  function StatusDot({
872
1134
  color,
873
1135
  tooltip,
@@ -880,7 +1142,13 @@ function StatusDot({
880
1142
  return /* @__PURE__ */ jsx20(
881
1143
  "div",
882
1144
  {
883
- className: [StatusDot_default.dot, StatusDot_default[color], StatusDot_default[size], shouldPulse && StatusDot_default.pulse, className].filter(Boolean).join(" "),
1145
+ className: cn(
1146
+ "shrink-0 rounded-full",
1147
+ colorStyles[color],
1148
+ sizeStyles6[size],
1149
+ shouldPulse && "animate-pulse",
1150
+ className
1151
+ ),
884
1152
  title: tooltip,
885
1153
  ...props
886
1154
  }
@@ -889,11 +1157,6 @@ function StatusDot({
889
1157
 
890
1158
  // src/components/Tabs/Tabs.tsx
891
1159
  import { useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState5 } from "react";
892
-
893
- // src/components/Tabs/Tabs.module.css
894
- var Tabs_default = {};
895
-
896
- // src/components/Tabs/Tabs.tsx
897
1160
  import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
898
1161
  function Tabs({ items, activeTab, onTabChange, className }) {
899
1162
  const tabRefs = useRef3([]);
@@ -957,7 +1220,7 @@ function Tabs({ items, activeTab, onTabChange, className }) {
957
1220
  observer.disconnect();
958
1221
  };
959
1222
  }, [updateScrollState, updateIndicator]);
960
- return /* @__PURE__ */ jsxs17("div", { className: [Tabs_default.wrapper, className].filter(Boolean).join(" "), children: [
1223
+ return /* @__PURE__ */ jsxs17("div", { className: cn("relative", className), children: [
961
1224
  showMobileDropdown && /* @__PURE__ */ jsx21(
962
1225
  MobileTabDropdown,
963
1226
  {
@@ -967,13 +1230,14 @@ function Tabs({ items, activeTab, onTabChange, className }) {
967
1230
  onTabChange
968
1231
  }
969
1232
  ),
970
- /* @__PURE__ */ jsxs17(
971
- "div",
972
- {
973
- className: [Tabs_default.tabsContainer, showMobileDropdown && Tabs_default.hiddenMobile].filter(Boolean).join(" "),
974
- children: [
975
- canScrollLeft && /* @__PURE__ */ jsx21("div", { className: Tabs_default.fadeLeft }),
976
- /* @__PURE__ */ jsxs17("div", { ref: scrollRef, className: Tabs_default.scrollable, children: [
1233
+ /* @__PURE__ */ jsxs17("div", { className: cn("relative", showMobileDropdown && "hidden md:block"), children: [
1234
+ canScrollLeft && /* @__PURE__ */ jsx21("div", { className: "absolute top-0 bottom-0 left-0 z-10 w-6 bg-gradient-to-r from-[var(--semantic-color-bg-default)] to-transparent pointer-events-none" }),
1235
+ /* @__PURE__ */ jsxs17(
1236
+ "div",
1237
+ {
1238
+ ref: scrollRef,
1239
+ className: "relative flex gap-[var(--tabs-gap)] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
1240
+ children: [
977
1241
  items.map((tab, index) => /* @__PURE__ */ jsx21(
978
1242
  "button",
979
1243
  {
@@ -982,29 +1246,29 @@ function Tabs({ items, activeTab, onTabChange, className }) {
982
1246
  },
983
1247
  type: "button",
984
1248
  onClick: () => onTabChange(tab.id),
985
- className: [
986
- Tabs_default.tab,
987
- activeTab === tab.id ? Tabs_default.tabActive : Tabs_default.tabInactive
988
- ].join(" "),
989
- children: /* @__PURE__ */ jsx21("span", { className: Tabs_default.tabLabel, children: tab.label })
1249
+ className: cn(
1250
+ "relative pb-3 border-none bg-transparent font-sans text-sm font-medium cursor-pointer transition-colors duration-[var(--duration-fast)] whitespace-nowrap",
1251
+ activeTab === tab.id ? "text-[var(--semantic-color-text-default)] font-semibold" : "text-[var(--semantic-color-text-muted)] hover:text-[var(--semantic-color-text-tertiary)]"
1252
+ ),
1253
+ children: /* @__PURE__ */ jsx21("span", { className: "whitespace-nowrap", children: tab.label })
990
1254
  },
991
1255
  tab.id
992
1256
  )),
993
1257
  /* @__PURE__ */ jsx21(
994
1258
  "div",
995
1259
  {
996
- className: Tabs_default.indicator,
1260
+ className: "absolute bottom-0 h-[var(--tabs-indicator-height)] rounded-full bg-[var(--semantic-color-text-default)] transition-[left,width] duration-[var(--duration-slow)] ease-out",
997
1261
  style: {
998
1262
  left: `${indicatorStyle.left}px`,
999
1263
  width: `${indicatorStyle.width}px`
1000
1264
  }
1001
1265
  }
1002
1266
  )
1003
- ] }),
1004
- canScrollRight && /* @__PURE__ */ jsx21("div", { className: Tabs_default.fadeRight })
1005
- ]
1006
- }
1007
- )
1267
+ ]
1268
+ }
1269
+ ),
1270
+ canScrollRight && /* @__PURE__ */ jsx21("div", { className: "absolute top-0 right-0 bottom-0 z-10 w-6 bg-gradient-to-l from-[var(--semantic-color-bg-default)] to-transparent pointer-events-none" })
1271
+ ] })
1008
1272
  ] });
1009
1273
  }
1010
1274
  function MobileTabDropdown({
@@ -1024,19 +1288,25 @@ function MobileTabDropdown({
1024
1288
  document.addEventListener("mousedown", handleClickOutside);
1025
1289
  return () => document.removeEventListener("mousedown", handleClickOutside);
1026
1290
  }, []);
1027
- return /* @__PURE__ */ jsxs17("div", { className: Tabs_default.mobileDropdown, ref: dropdownRef, children: [
1291
+ return /* @__PURE__ */ jsxs17("div", { className: "relative md:hidden", ref: dropdownRef, children: [
1028
1292
  /* @__PURE__ */ jsxs17(
1029
1293
  "button",
1030
1294
  {
1031
1295
  type: "button",
1032
1296
  onClick: () => setIsOpen(!isOpen),
1033
- className: [Tabs_default.mobileToggle, isOpen && Tabs_default.mobileToggleOpen].filter(Boolean).join(" "),
1297
+ className: cn(
1298
+ "flex items-center gap-2 px-4 py-2.5 border-none rounded-lg bg-[var(--semantic-color-bg-default)] font-sans text-base font-semibold text-[var(--semantic-color-text-default)] shadow-sm cursor-pointer transition-colors duration-[var(--duration-fast)]",
1299
+ isOpen && "bg-[var(--semantic-color-bg-subtle)]"
1300
+ ),
1034
1301
  children: [
1035
1302
  /* @__PURE__ */ jsx21("span", { children: activeLabel }),
1036
1303
  /* @__PURE__ */ jsx21(
1037
1304
  "svg",
1038
1305
  {
1039
- className: [Tabs_default.mobileChevron, isOpen && Tabs_default.mobileChevronOpen].filter(Boolean).join(" "),
1306
+ className: cn(
1307
+ "shrink-0 text-[var(--semantic-color-text-muted)] transition-transform duration-[var(--duration-fast)]",
1308
+ isOpen && "rotate-180"
1309
+ ),
1040
1310
  width: "20",
1041
1311
  height: "20",
1042
1312
  fill: "none",
@@ -1048,7 +1318,7 @@ function MobileTabDropdown({
1048
1318
  ]
1049
1319
  }
1050
1320
  ),
1051
- isOpen && /* @__PURE__ */ jsx21("div", { className: Tabs_default.mobileMenu, children: items.map((item) => /* @__PURE__ */ jsx21(
1321
+ isOpen && /* @__PURE__ */ jsx21("div", { className: "absolute top-full left-0 z-[var(--tabs-mobile-z-index)] mt-1 min-w-48 border border-[var(--semantic-color-border-default)] rounded-lg bg-[var(--semantic-color-bg-default)] py-1 shadow-lg", children: items.map((item) => /* @__PURE__ */ jsx21(
1052
1322
  "button",
1053
1323
  {
1054
1324
  type: "button",
@@ -1056,10 +1326,10 @@ function MobileTabDropdown({
1056
1326
  onTabChange(item.id);
1057
1327
  setIsOpen(false);
1058
1328
  },
1059
- className: [
1060
- Tabs_default.mobileMenuItem,
1061
- item.id === activeTab && Tabs_default.mobileMenuItemActive
1062
- ].filter(Boolean).join(" "),
1329
+ className: cn(
1330
+ "block w-full text-left px-4 py-2.5 border-none bg-transparent font-sans text-base text-[var(--semantic-color-text-secondary)] cursor-pointer transition-colors duration-[var(--duration-fast)] hover:bg-[var(--semantic-color-bg-subtle)]",
1331
+ item.id === activeTab && "bg-[var(--semantic-color-bg-subtle)] font-semibold text-[var(--semantic-color-text-default)]"
1332
+ ),
1063
1333
  children: item.label
1064
1334
  },
1065
1335
  item.id
@@ -1067,40 +1337,65 @@ function MobileTabDropdown({
1067
1337
  ] });
1068
1338
  }
1069
1339
 
1070
- // src/components/Textarea/Textarea.module.css
1071
- var Textarea_default = {};
1072
-
1073
1340
  // src/components/Textarea/Textarea.tsx
1074
1341
  import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
1075
1342
  function Textarea({ label, error, id, name, rows = 4, className, ...props }) {
1076
1343
  const textareaId = id || name;
1077
- return /* @__PURE__ */ jsxs18("div", { className: Textarea_default.wrapper, children: [
1078
- label && /* @__PURE__ */ jsx22("label", { htmlFor: textareaId, className: Textarea_default.label, children: label }),
1344
+ return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2", children: [
1345
+ label && /* @__PURE__ */ jsx22(
1346
+ "label",
1347
+ {
1348
+ htmlFor: textareaId,
1349
+ className: "font-sans text-sm font-medium text-[var(--semantic-color-text-default)]",
1350
+ children: label
1351
+ }
1352
+ ),
1079
1353
  /* @__PURE__ */ jsx22(
1080
1354
  "textarea",
1081
1355
  {
1082
1356
  id: textareaId,
1083
1357
  name,
1084
1358
  rows,
1085
- className: [Textarea_default.textarea, error && Textarea_default.error, className].filter(Boolean).join(" "),
1359
+ className: cn(
1360
+ "block w-full resize-y border border-[var(--semantic-color-border-default)] rounded-[var(--textarea-radius)] bg-[var(--semantic-color-bg-default)] px-[var(--textarea-padding-x)] py-[var(--textarea-padding-y)] font-sans text-[length:var(--textarea-font-size)] text-[var(--semantic-color-text-default)] transition-[border-color] duration-[var(--duration-fast)]",
1361
+ "placeholder:text-[var(--semantic-color-text-muted)]",
1362
+ "focus:outline-none focus:border-[var(--semantic-color-border-strong)]",
1363
+ "disabled:opacity-[var(--disabled-opacity)] disabled:cursor-not-allowed disabled:bg-[var(--semantic-color-bg-subtle)]",
1364
+ error && "border-[var(--semantic-color-feedback-error)]",
1365
+ className
1366
+ ),
1086
1367
  "aria-invalid": error ? "true" : void 0,
1087
1368
  "aria-describedby": error ? `${textareaId}-error` : void 0,
1088
1369
  ...props
1089
1370
  }
1090
1371
  ),
1091
- error && /* @__PURE__ */ jsx22("p", { id: `${textareaId}-error`, className: Textarea_default.errorText, children: error })
1372
+ error && /* @__PURE__ */ jsx22(
1373
+ "p",
1374
+ {
1375
+ id: `${textareaId}-error`,
1376
+ className: "font-sans text-xs text-[var(--semantic-color-feedback-error-text)] m-0",
1377
+ children: error
1378
+ }
1379
+ )
1092
1380
  ] });
1093
1381
  }
1094
1382
 
1095
1383
  // src/components/Toast/Toast.tsx
1096
1384
  import { useCallback as useCallback4, useEffect as useEffect4, useState as useState6 } from "react";
1097
1385
  import { createPortal as createPortal3 } from "react-dom";
1098
-
1099
- // src/components/Toast/Toast.module.css
1100
- var Toast_default = {};
1101
-
1102
- // src/components/Toast/Toast.tsx
1103
1386
  import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
1387
+ var typeStyles2 = {
1388
+ success: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-success)]",
1389
+ error: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-error)]",
1390
+ warning: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-warning)]",
1391
+ info: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-info)]"
1392
+ };
1393
+ var iconColors = {
1394
+ success: "text-[var(--semantic-color-feedback-success)]",
1395
+ error: "text-[var(--semantic-color-feedback-error)]",
1396
+ warning: "text-[var(--semantic-color-feedback-warning)]",
1397
+ info: "text-[var(--semantic-color-feedback-info)]"
1398
+ };
1104
1399
  var icons2 = {
1105
1400
  success: /* @__PURE__ */ jsx23(
1106
1401
  "svg",
@@ -1180,29 +1475,38 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
1180
1475
  if (exitTimer) clearTimeout(exitTimer);
1181
1476
  };
1182
1477
  }, [duration, dismiss]);
1183
- const content = /* @__PURE__ */ jsx23("div", { className: Toast_default.container, children: /* @__PURE__ */ jsxs19(
1478
+ const content = /* @__PURE__ */ jsx23("div", { className: "fixed top-[var(--toast-position-top)] right-[var(--toast-position-right)] z-[var(--toast-z-index)] pointer-events-none", children: /* @__PURE__ */ jsxs19(
1184
1479
  "div",
1185
1480
  {
1186
- className: [
1187
- Toast_default.toast,
1188
- Toast_default[type],
1189
- isVisible && !isExiting ? Toast_default.enter : Toast_default.exit
1190
- ].filter(Boolean).join(" "),
1481
+ className: cn(
1482
+ "flex items-center gap-2.5 px-[var(--toast-padding-x)] py-[var(--toast-padding-y)] rounded-[var(--toast-radius)] bg-[var(--semantic-color-bg-default)] border border-[var(--semantic-color-border-default)] shadow-[var(--toast-shadow)] font-sans text-[length:var(--toast-font-size)] text-[var(--semantic-color-text-default)] pointer-events-auto max-w-[var(--toast-max-width)]",
1483
+ typeStyles2[type],
1484
+ isVisible && !isExiting ? "animate-[toastSlideIn_200ms_ease-out_both]" : "animate-[toastSlideOut_200ms_ease-in_both]"
1485
+ ),
1191
1486
  children: [
1192
- /* @__PURE__ */ jsx23("span", { className: Toast_default.icon, children: icons2[type] }),
1193
- /* @__PURE__ */ jsx23("span", { className: Toast_default.message, children: message }),
1194
- /* @__PURE__ */ jsx23("button", { type: "button", onClick: dismiss, className: Toast_default.close, "aria-label": "Schlie\xDFen", children: /* @__PURE__ */ jsx23(
1195
- "svg",
1487
+ /* @__PURE__ */ jsx23("span", { className: cn("flex shrink-0", iconColors[type]), children: icons2[type] }),
1488
+ /* @__PURE__ */ jsx23("span", { className: "flex-1 leading-[1.4]", children: message }),
1489
+ /* @__PURE__ */ jsx23(
1490
+ "button",
1196
1491
  {
1197
- width: "14",
1198
- height: "14",
1199
- fill: "none",
1200
- viewBox: "0 0 24 24",
1201
- stroke: "currentColor",
1202
- strokeWidth: 2,
1203
- children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
1492
+ type: "button",
1493
+ onClick: dismiss,
1494
+ className: "flex shrink-0 p-0.5 border-none rounded-sm bg-transparent text-[var(--semantic-color-text-muted)] cursor-pointer transition-colors duration-[var(--duration-fast)] hover:text-[var(--semantic-color-text-default)]",
1495
+ "aria-label": "Schlie\xDFen",
1496
+ children: /* @__PURE__ */ jsx23(
1497
+ "svg",
1498
+ {
1499
+ width: "14",
1500
+ height: "14",
1501
+ fill: "none",
1502
+ viewBox: "0 0 24 24",
1503
+ stroke: "currentColor",
1504
+ strokeWidth: 2,
1505
+ children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
1506
+ }
1507
+ )
1204
1508
  }
1205
- ) })
1509
+ )
1206
1510
  ]
1207
1511
  }
1208
1512
  ) });
@@ -1212,18 +1516,61 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
1212
1516
  return content;
1213
1517
  }
1214
1518
 
1215
- // src/components/Toggle/Toggle.module.css
1216
- var Toggle_default = {};
1217
-
1218
1519
  // src/components/Toggle/Toggle.tsx
1219
1520
  import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
1521
+ var trackSizes = {
1522
+ sm: "w-[var(--toggle-sm-track-width)] h-[var(--toggle-sm-track-height)]",
1523
+ md: "w-[var(--toggle-md-track-width)] h-[var(--toggle-md-track-height)]"
1524
+ };
1525
+ var thumbSizes = {
1526
+ sm: "size-[var(--toggle-sm-thumb-size)]",
1527
+ md: "size-[var(--toggle-md-thumb-size)]"
1528
+ };
1529
+ var thumbTranslate = {
1530
+ sm: "peer-checked:[&>div]:translate-x-[var(--toggle-sm-thumb-translate)]",
1531
+ md: "peer-checked:[&>div]:translate-x-[var(--toggle-md-thumb-translate)]"
1532
+ };
1220
1533
  function Toggle({ label, size = "md", id, name, className, ...props }) {
1221
1534
  const inputId = id || name || (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
1222
- return /* @__PURE__ */ jsxs20("label", { htmlFor: inputId, className: [Toggle_default.wrapper, className].filter(Boolean).join(" "), children: [
1223
- /* @__PURE__ */ jsx24("input", { type: "checkbox", id: inputId, name, className: Toggle_default.input, ...props }),
1224
- /* @__PURE__ */ jsx24("div", { className: [Toggle_default.track, Toggle_default[size]].join(" "), children: /* @__PURE__ */ jsx24("div", { className: Toggle_default.thumb }) }),
1225
- label && /* @__PURE__ */ jsx24("span", { className: Toggle_default.label, children: label })
1226
- ] });
1535
+ return /* @__PURE__ */ jsxs20(
1536
+ "label",
1537
+ {
1538
+ htmlFor: inputId,
1539
+ className: cn("inline-flex items-center gap-2.5 cursor-pointer", className),
1540
+ children: [
1541
+ /* @__PURE__ */ jsx24(
1542
+ "input",
1543
+ {
1544
+ type: "checkbox",
1545
+ id: inputId,
1546
+ name,
1547
+ className: "peer absolute size-px overflow-hidden [clip:rect(0,0,0,0)]",
1548
+ ...props
1549
+ }
1550
+ ),
1551
+ /* @__PURE__ */ jsx24(
1552
+ "div",
1553
+ {
1554
+ className: cn(
1555
+ "relative rounded-full bg-[var(--semantic-color-border-strong)] transition-colors duration-[var(--duration-fast)] peer-checked:bg-[var(--semantic-color-brand-primary)] peer-disabled:opacity-[var(--disabled-opacity)] peer-disabled:cursor-not-allowed",
1556
+ trackSizes[size],
1557
+ thumbTranslate[size]
1558
+ ),
1559
+ children: /* @__PURE__ */ jsx24(
1560
+ "div",
1561
+ {
1562
+ className: cn(
1563
+ "absolute top-0.5 left-0.5 rounded-full bg-[var(--semantic-color-bg-default)] shadow-sm transition-transform duration-[var(--duration-fast)]",
1564
+ thumbSizes[size]
1565
+ )
1566
+ }
1567
+ )
1568
+ }
1569
+ ),
1570
+ label && /* @__PURE__ */ jsx24("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
1571
+ ]
1572
+ }
1573
+ );
1227
1574
  }
1228
1575
  export {
1229
1576
  Accordion,
@@ -1251,6 +1598,7 @@ export {
1251
1598
  Tabs,
1252
1599
  Textarea,
1253
1600
  Toast,
1254
- Toggle
1601
+ Toggle,
1602
+ cn
1255
1603
  };
1256
1604
  //# sourceMappingURL=index.js.map