@moto-nrw/design-system 0.2.3 → 0.3.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 (13) hide show
  1. package/README.md +10 -2
  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 +393 -14
  10. package/dist/tokens.css +46 -0
  11. package/package.json +11 -3
  12. package/dist/index.css +0 -1550
  13. package/dist/index.css.map +0 -1
package/dist/index.cjs CHANGED
@@ -45,15 +45,20 @@ __export(index_exports, {
45
45
  Tabs: () => Tabs,
46
46
  Textarea: () => Textarea,
47
47
  Toast: () => Toast,
48
- Toggle: () => Toggle
48
+ Toggle: () => Toggle,
49
+ cn: () => cn
49
50
  });
50
51
  module.exports = __toCommonJS(index_exports);
51
52
 
52
53
  // src/components/Accordion/Accordion.tsx
53
54
  var import_react = require("react");
54
55
 
55
- // src/components/Accordion/Accordion.module.css
56
- var Accordion_default = {};
56
+ // src/lib/cn.ts
57
+ var import_clsx = require("clsx");
58
+ var import_tailwind_merge = require("tailwind-merge");
59
+ function cn(...inputs) {
60
+ return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
61
+ }
57
62
 
58
63
  // src/components/Accordion/Accordion.tsx
59
64
  var import_jsx_runtime = require("react/jsx-runtime");
@@ -65,40 +70,57 @@ function Accordion({
65
70
  className
66
71
  }) {
67
72
  const [isOpen, setIsOpen] = (0, import_react.useState)(defaultOpen);
68
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: [Accordion_default.accordion, className].filter(Boolean).join(" "), children: [
69
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", onClick: () => setIsOpen((prev) => !prev), className: Accordion_default.trigger, children: [
70
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: Accordion_default.label, children: [
71
- label,
72
- badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: Accordion_default.badge, children: badge })
73
- ] }),
74
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
75
- "svg",
76
- {
77
- className: [Accordion_default.chevron, isOpen && Accordion_default.chevronOpen].filter(Boolean).join(" "),
78
- width: "16",
79
- height: "16",
80
- fill: "none",
81
- viewBox: "0 0 24 24",
82
- stroke: "currentColor",
83
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
84
- }
85
- )
86
- ] }),
73
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("border-t border-[var(--semantic-color-border-default)]", className), children: [
74
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
75
+ "button",
76
+ {
77
+ type: "button",
78
+ onClick: () => setIsOpen((prev) => !prev),
79
+ 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)]",
80
+ children: [
81
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-2", children: [
82
+ label,
83
+ badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex", children: badge })
84
+ ] }),
85
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
86
+ "svg",
87
+ {
88
+ className: cn(
89
+ "shrink-0 text-[var(--semantic-color-text-muted)] transition-transform duration-[var(--duration-normal)]",
90
+ isOpen && "rotate-180"
91
+ ),
92
+ width: "16",
93
+ height: "16",
94
+ fill: "none",
95
+ viewBox: "0 0 24 24",
96
+ stroke: "currentColor",
97
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
98
+ }
99
+ )
100
+ ]
101
+ }
102
+ ),
87
103
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
88
104
  "div",
89
105
  {
90
- className: [Accordion_default.content, isOpen ? Accordion_default.contentOpen : Accordion_default.contentClosed].join(" "),
91
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: Accordion_default.contentInner, children })
106
+ className: cn(
107
+ "grid transition-[grid-template-rows] duration-[var(--duration-normal)]",
108
+ isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
109
+ ),
110
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden", children })
92
111
  }
93
112
  )
94
113
  ] });
95
114
  }
96
115
 
97
- // src/components/Alert/Alert.module.css
98
- var Alert_default = {};
99
-
100
116
  // src/components/Alert/Alert.tsx
101
117
  var import_jsx_runtime2 = require("react/jsx-runtime");
118
+ var typeStyles = {
119
+ error: "bg-[var(--semantic-color-feedback-error-light)] text-[var(--semantic-color-feedback-error-text)] border-[var(--semantic-color-feedback-error-border)]",
120
+ success: "bg-[var(--semantic-color-feedback-success-light)] text-[var(--semantic-color-feedback-success-text)] border-[var(--semantic-color-feedback-success-border)]",
121
+ warning: "bg-[var(--semantic-color-feedback-warning-light)] text-[var(--semantic-color-feedback-warning-text)] border-[var(--semantic-color-feedback-warning-border)]",
122
+ info: "bg-[var(--semantic-color-feedback-info-light)] text-[var(--semantic-color-feedback-info-text)] border-[var(--semantic-color-feedback-info-border)]"
123
+ };
102
124
  var icons = {
103
125
  error: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "20", height: "20", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
104
126
  "path",
@@ -139,21 +161,27 @@ function Alert({ type, message, className, ...props }) {
139
161
  "div",
140
162
  {
141
163
  role: "alert",
142
- className: [Alert_default.alert, Alert_default[type], className].filter(Boolean).join(" "),
164
+ className: cn(
165
+ "flex items-center gap-2 px-4 py-3 rounded-md border font-sans text-sm shadow-sm",
166
+ typeStyles[type],
167
+ className
168
+ ),
143
169
  ...props,
144
170
  children: [
145
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: Alert_default.icon, children: icons[type] }),
171
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "shrink-0 flex", children: icons[type] }),
146
172
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: message })
147
173
  ]
148
174
  }
149
175
  );
150
176
  }
151
177
 
152
- // src/components/Avatar/Avatar.module.css
153
- var Avatar_default = {};
154
-
155
178
  // src/components/Avatar/Avatar.tsx
156
179
  var import_jsx_runtime3 = require("react/jsx-runtime");
180
+ var sizeStyles = {
181
+ sm: "size-[var(--avatar-size-sm)] text-sm shadow-sm outline-2 outline-[var(--semantic-color-bg-default)] -outline-offset-2",
182
+ md: "size-[var(--avatar-size-md)] text-base shadow-md",
183
+ lg: "size-[var(--avatar-size-lg)] text-xl shadow-md"
184
+ };
157
185
  function getInitials(name) {
158
186
  const parts = name.split(" ").filter(Boolean);
159
187
  if (parts.length === 0) return "?";
@@ -165,19 +193,24 @@ function Avatar({ name, src, size = "sm", className, ...props }) {
165
193
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
166
194
  "div",
167
195
  {
168
- className: [Avatar_default.avatar, Avatar_default[size], className].filter(Boolean).join(" "),
196
+ className: cn(
197
+ "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)]",
198
+ sizeStyles[size],
199
+ className
200
+ ),
169
201
  title: name,
170
202
  ...props,
171
- children: src ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src, alt: name, className: Avatar_default.image }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: Avatar_default.initials, children: initials })
203
+ children: src ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src, alt: name, className: "size-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "select-none", children: initials })
172
204
  }
173
205
  );
174
206
  }
175
207
 
176
- // src/components/Badge/Badge.module.css
177
- var Badge_default = {};
178
-
179
208
  // src/components/Badge/Badge.tsx
180
209
  var import_jsx_runtime4 = require("react/jsx-runtime");
210
+ var sizeStyles2 = {
211
+ sm: "px-2 py-1.5 gap-1.5",
212
+ md: "px-3 py-1.5 gap-2"
213
+ };
181
214
  function Badge({
182
215
  count,
183
216
  label,
@@ -187,11 +220,22 @@ function Badge({
187
220
  className,
188
221
  ...props
189
222
  }) {
190
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: [Badge_default.badge, Badge_default[size], className].filter(Boolean).join(" "), ...props, children: [
191
- icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Badge_default.icon, children: icon }),
192
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Badge_default.count, children: count }),
193
- showLabel && label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Badge_default.label, children: label })
194
- ] });
223
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
224
+ "div",
225
+ {
226
+ className: cn(
227
+ "inline-flex items-center rounded-[var(--badge-radius)] border border-[var(--semantic-color-border-default)] bg-[var(--semantic-color-bg-subtle)] font-sans",
228
+ sizeStyles2[size],
229
+ className
230
+ ),
231
+ ...props,
232
+ children: [
233
+ icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex text-[var(--semantic-color-text-muted)]", children: icon }),
234
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[length:var(--badge-font-size)] font-[number:var(--badge-font-weight)] text-[var(--semantic-color-text-default)]", children: count }),
235
+ showLabel && label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs text-[var(--semantic-color-text-muted)]", children: label })
236
+ ]
237
+ }
238
+ );
195
239
  }
196
240
  function BadgeCompact({
197
241
  count,
@@ -199,17 +243,39 @@ function BadgeCompact({
199
243
  className,
200
244
  ...props
201
245
  }) {
202
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: [Badge_default.badge, Badge_default.sm, className].filter(Boolean).join(" "), ...props, children: [
203
- icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Badge_default.icon, children: icon }),
204
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: Badge_default.count, children: count })
205
- ] });
246
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
247
+ "div",
248
+ {
249
+ className: cn(
250
+ "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",
251
+ className
252
+ ),
253
+ ...props,
254
+ children: [
255
+ icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex text-[var(--semantic-color-text-muted)]", children: icon }),
256
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[length:var(--badge-font-size)] font-[number:var(--badge-font-weight)] text-[var(--semantic-color-text-default)]", children: count })
257
+ ]
258
+ }
259
+ );
206
260
  }
207
261
 
208
- // src/components/Button/Button.module.css
209
- var Button_default = {};
210
-
211
262
  // src/components/Button/Button.tsx
212
263
  var import_jsx_runtime5 = require("react/jsx-runtime");
264
+ var variantStyles = {
265
+ 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)]",
266
+ 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)]",
267
+ 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)]",
268
+ 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)]",
269
+ 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)]",
270
+ 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",
271
+ ghost: "bg-transparent text-[var(--semantic-color-text-default)] hover:enabled:bg-[var(--semantic-color-bg-muted)]"
272
+ };
273
+ var sizeStyles3 = {
274
+ sm: "px-[var(--button-sm-padding-x)] py-[var(--button-sm-padding-y)] text-[length:var(--button-sm-font-size)] leading-normal",
275
+ md: "px-[var(--button-md-padding-x)] py-[var(--button-md-padding-y)] text-[length:var(--button-md-font-size)] leading-normal",
276
+ lg: "px-[var(--button-lg-padding-x)] py-[var(--button-lg-padding-y)] text-[length:var(--button-lg-font-size)] leading-normal",
277
+ xl: "px-[var(--button-xl-padding-x)] py-[var(--button-xl-padding-y)] text-[length:var(--button-xl-font-size)] leading-normal"
278
+ };
213
279
  function Button({
214
280
  variant = "primary",
215
281
  size = "md",
@@ -221,12 +287,16 @@ function Button({
221
287
  type = "submit",
222
288
  ...props
223
289
  }) {
224
- const classNames = [Button_default.button, Button_default[variant], Button_default[size], className].filter(Boolean).join(" ");
225
290
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
226
291
  "button",
227
292
  {
228
293
  type,
229
- className: classNames,
294
+ className: cn(
295
+ "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",
296
+ variantStyles[variant],
297
+ sizeStyles3[size],
298
+ className
299
+ ),
230
300
  disabled: disabled || isLoading,
231
301
  "aria-busy": isLoading || void 0,
232
302
  ...props,
@@ -235,11 +305,19 @@ function Button({
235
305
  );
236
306
  }
237
307
 
238
- // src/components/Card/Card.module.css
239
- var Card_default = {};
240
-
241
308
  // src/components/Card/Card.tsx
242
309
  var import_jsx_runtime6 = require("react/jsx-runtime");
310
+ var variantStyles2 = {
311
+ default: "border border-[var(--semantic-color-border-default)]",
312
+ elevated: "border border-black/5 bg-[var(--semantic-color-bg-default)]/90 shadow-[var(--card-shadow)] backdrop-blur-[var(--card-backdrop-blur)]",
313
+ glass: "bg-[var(--semantic-color-bg-default)]/80 shadow-lg backdrop-blur-[var(--card-backdrop-blur)]"
314
+ };
315
+ var paddingStyles = {
316
+ none: "",
317
+ sm: "p-[var(--card-padding-sm)]",
318
+ md: "p-[var(--card-padding)]",
319
+ lg: "p-[var(--card-padding-lg)]"
320
+ };
243
321
  function Card({
244
322
  variant = "default",
245
323
  padding = "md",
@@ -248,55 +326,106 @@ function Card({
248
326
  children,
249
327
  ...props
250
328
  }) {
251
- const classNames = [
252
- Card_default.card,
253
- !hoverable && Card_default[variant],
254
- hoverable && Card_default.hoverable,
255
- className
256
- ].filter(Boolean).join(" ");
257
- const contentClass = [Card_default.cardContent, padding !== "none" && Card_default[`padding-${padding}`]].filter(Boolean).join(" ");
258
329
  if (hoverable) {
259
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: classNames, ...props, children: [
260
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: Card_default.gradientOverlay }),
261
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: Card_default.innerGlow }),
262
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: Card_default.ringHighlight }),
263
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: contentClass, children }),
264
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: Card_default.glowBorder })
265
- ] });
330
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
331
+ "div",
332
+ {
333
+ className: cn(
334
+ "group relative overflow-hidden rounded-[var(--card-radius)] transition-all duration-[var(--card-transition-duration)]",
335
+ "cursor-pointer border border-black/5 bg-[var(--semantic-color-bg-default)]/90 shadow-[var(--card-shadow)] backdrop-blur-[var(--card-backdrop-blur)]",
336
+ "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)]",
337
+ "active:scale-[var(--card-active-scale)]",
338
+ className
339
+ ),
340
+ ...props,
341
+ children: [
342
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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" }),
343
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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" }),
344
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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)]" }),
345
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("relative", paddingStyles[padding]), children }),
346
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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" })
347
+ ]
348
+ }
349
+ );
266
350
  }
267
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: classNames, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: contentClass, children }) });
351
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
352
+ "div",
353
+ {
354
+ className: cn(
355
+ "relative overflow-hidden rounded-[var(--card-radius)] bg-[var(--semantic-color-bg-default)] transition-all duration-[var(--card-transition-duration)]",
356
+ variantStyles2[variant],
357
+ className
358
+ ),
359
+ ...props,
360
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("relative", paddingStyles[padding]), children })
361
+ }
362
+ );
268
363
  }
269
364
 
270
- // src/components/Checkbox/Checkbox.module.css
271
- var Checkbox_default = {};
272
-
273
365
  // src/components/Checkbox/Checkbox.tsx
274
366
  var import_jsx_runtime7 = require("react/jsx-runtime");
275
367
  function Checkbox({ label, id, name, className, ...props }) {
276
368
  const inputId = id || name || label.toLowerCase().replace(/\s+/g, "-");
277
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor: inputId, className: [Checkbox_default.wrapper, className].filter(Boolean).join(" "), children: [
278
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", id: inputId, name, className: Checkbox_default.input, ...props }),
279
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: Checkbox_default.label, children: label })
280
- ] });
369
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
370
+ "label",
371
+ {
372
+ htmlFor: inputId,
373
+ className: cn(
374
+ "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)]",
375
+ className
376
+ ),
377
+ children: [
378
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
379
+ "input",
380
+ {
381
+ type: "checkbox",
382
+ id: inputId,
383
+ name,
384
+ 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",
385
+ ...props
386
+ }
387
+ ),
388
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
389
+ ]
390
+ }
391
+ );
281
392
  }
282
393
 
283
- // src/components/Divider/Divider.module.css
284
- var Divider_default = {};
285
-
286
394
  // src/components/Divider/Divider.tsx
287
395
  var import_jsx_runtime8 = require("react/jsx-runtime");
396
+ var spacingStyles = {
397
+ sm: "my-2",
398
+ md: "my-4",
399
+ lg: "my-8"
400
+ };
288
401
  function Divider({ spacing = "md", label, className, ...props }) {
289
402
  if (label) {
290
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: [Divider_default.labeled, Divider_default[spacing], className].filter(Boolean).join(" "), children: [
291
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: Divider_default.line, ...props }),
292
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: Divider_default.label, children: label }),
293
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: Divider_default.line, ...props })
403
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("flex items-center gap-4", spacingStyles[spacing], className), children: [
404
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
405
+ "hr",
406
+ {
407
+ className: "flex-1 border-0 border-t border-[var(--semantic-color-border-default)]",
408
+ ...props
409
+ }
410
+ ),
411
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-sans text-xs font-medium text-[var(--semantic-color-text-muted)] whitespace-nowrap", children: label }),
412
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
413
+ "hr",
414
+ {
415
+ className: "flex-1 border-0 border-t border-[var(--semantic-color-border-default)]",
416
+ ...props
417
+ }
418
+ )
294
419
  ] });
295
420
  }
296
421
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
297
422
  "hr",
298
423
  {
299
- className: [Divider_default.divider, Divider_default[spacing], className].filter(Boolean).join(" "),
424
+ className: cn(
425
+ "border-0 border-t border-[var(--semantic-color-border-default)]",
426
+ spacingStyles[spacing],
427
+ className
428
+ ),
300
429
  ...props
301
430
  }
302
431
  );
@@ -305,11 +434,6 @@ function Divider({ spacing = "md", label, className, ...props }) {
305
434
  // src/components/DropdownMenu/DropdownMenu.tsx
306
435
  var import_react2 = require("react");
307
436
  var import_react_dom = require("react-dom");
308
-
309
- // src/components/DropdownMenu/DropdownMenu.module.css
310
- var DropdownMenu_default = {};
311
-
312
- // src/components/DropdownMenu/DropdownMenu.tsx
313
437
  var import_jsx_runtime9 = require("react/jsx-runtime");
314
438
  function DropdownMenu({ items, trigger, className }) {
315
439
  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
@@ -354,7 +478,7 @@ function DropdownMenu({ items, trigger, className }) {
354
478
  "div",
355
479
  {
356
480
  ref: menuRef,
357
- className: DropdownMenu_default.menu,
481
+ 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)]",
358
482
  style: { top: position.top, right: position.right },
359
483
  role: "menu",
360
484
  children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -366,7 +490,10 @@ function DropdownMenu({ items, trigger, className }) {
366
490
  close();
367
491
  item.onClick();
368
492
  },
369
- className: [DropdownMenu_default.menuItem, item.variant === "danger" && DropdownMenu_default.menuItemDanger].filter(Boolean).join(" "),
493
+ className: cn(
494
+ "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)]",
495
+ 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)]"
496
+ ),
370
497
  children: item.label
371
498
  },
372
499
  item.id
@@ -380,69 +507,97 @@ function DropdownMenu({ items, trigger, className }) {
380
507
  ref: buttonRef,
381
508
  type: "button",
382
509
  onClick: handleToggle,
383
- className: [DropdownMenu_default.trigger, className].filter(Boolean).join(" "),
510
+ className: cn(
511
+ "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)]",
512
+ className
513
+ ),
384
514
  "aria-label": "Aktionen",
385
515
  "aria-expanded": isOpen,
386
516
  "aria-haspopup": "menu",
387
- children: trigger || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: DropdownMenu_default.dotsIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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" }) })
517
+ children: trigger || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "size-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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" }) })
388
518
  }
389
519
  ),
390
520
  menu && (0, import_react_dom.createPortal)(menu, document.body)
391
521
  ] });
392
522
  }
393
523
 
394
- // src/components/FilterChips/FilterChips.module.css
395
- var FilterChips_default = {};
396
-
397
524
  // src/components/FilterChips/FilterChips.tsx
398
525
  var import_jsx_runtime10 = require("react/jsx-runtime");
399
526
  function FilterChips({ filters, onClearAll, className, ...props }) {
400
527
  if (filters.length === 0) return null;
401
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: [FilterChips_default.wrapper, className].filter(Boolean).join(" "), ...props, children: [
402
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: FilterChips_default.chips, children: filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: FilterChips_default.chip, children: [
403
- filter.label,
404
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: filter.onRemove, className: FilterChips_default.removeButton, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "12", height: "12", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
405
- "path",
406
- {
407
- strokeLinecap: "round",
408
- strokeLinejoin: "round",
409
- strokeWidth: 2,
410
- d: "M6 18L18 6M6 6l12 12"
411
- }
412
- ) }) })
413
- ] }, filter.id)) }),
414
- onClearAll && filters.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: onClearAll, className: FilterChips_default.clearAll, children: "Alle l\xF6schen" })
528
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex items-center justify-between", className), ...props, children: [
529
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-2", children: filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
530
+ "span",
531
+ {
532
+ 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)]",
533
+ children: [
534
+ filter.label,
535
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
536
+ "button",
537
+ {
538
+ type: "button",
539
+ onClick: filter.onRemove,
540
+ 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)]",
541
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "12", height: "12", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
542
+ "path",
543
+ {
544
+ strokeLinecap: "round",
545
+ strokeLinejoin: "round",
546
+ strokeWidth: 2,
547
+ d: "M6 18L18 6M6 6l12 12"
548
+ }
549
+ ) })
550
+ }
551
+ )
552
+ ]
553
+ },
554
+ filter.id
555
+ )) }),
556
+ onClearAll && filters.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
557
+ "button",
558
+ {
559
+ type: "button",
560
+ onClick: onClearAll,
561
+ 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)]",
562
+ children: "Alle l\xF6schen"
563
+ }
564
+ )
415
565
  ] });
416
566
  }
417
567
 
418
568
  // src/components/Input/Input.tsx
419
569
  var import_react3 = require("react");
420
-
421
- // src/components/Input/Input.module.css
422
- var Input_default = {};
423
-
424
- // src/components/Input/Input.tsx
425
570
  var import_jsx_runtime11 = require("react/jsx-runtime");
426
571
  function Input({ label, error, id, name, type = "text", className, ...props }) {
427
572
  const [showPassword, setShowPassword] = (0, import_react3.useState)(false);
428
573
  const inputId = id || name;
429
574
  const isPassword = type === "password";
430
575
  const resolvedType = isPassword && showPassword ? "text" : type;
431
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: Input_default.wrapper, children: [
432
- label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { htmlFor: inputId, className: Input_default.label, children: label }),
433
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: Input_default.container, children: [
576
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
577
+ label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
578
+ "label",
579
+ {
580
+ htmlFor: inputId,
581
+ className: "font-sans text-sm font-medium text-[var(--semantic-color-text-default)]",
582
+ children: label
583
+ }
584
+ ),
585
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", children: [
434
586
  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
435
587
  "input",
436
588
  {
437
589
  id: inputId,
438
590
  name,
439
591
  type: resolvedType,
440
- className: [
441
- Input_default.input,
442
- isPassword && Input_default.hasToggle,
443
- error && Input_default.error,
592
+ className: cn(
593
+ "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)]",
594
+ "placeholder:text-[var(--semantic-color-text-muted)]",
595
+ "focus:outline-none focus:border-[var(--semantic-color-border-strong)]",
596
+ "disabled:opacity-[var(--disabled-opacity)] disabled:cursor-not-allowed disabled:bg-[var(--semantic-color-bg-subtle)]",
597
+ isPassword && "pr-10",
598
+ error && "border-[var(--semantic-color-feedback-error)]",
444
599
  className
445
- ].filter(Boolean).join(" "),
600
+ ),
446
601
  "aria-invalid": error ? "true" : void 0,
447
602
  "aria-describedby": error ? `${inputId}-error` : void 0,
448
603
  ...props
@@ -453,7 +608,7 @@ function Input({ label, error, id, name, type = "text", className, ...props }) {
453
608
  {
454
609
  type: "button",
455
610
  onClick: () => setShowPassword((prev) => !prev),
456
- className: Input_default.toggle,
611
+ 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)]",
457
612
  "aria-label": showPassword ? "Passwort verbergen" : "Passwort anzeigen",
458
613
  tabIndex: -1,
459
614
  children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "20", height: "20", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -487,7 +642,14 @@ function Input({ label, error, id, name, type = "text", className, ...props }) {
487
642
  }
488
643
  )
489
644
  ] }),
490
- error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { id: `${inputId}-error`, className: Input_default.errorText, children: error })
645
+ error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
646
+ "p",
647
+ {
648
+ id: `${inputId}-error`,
649
+ className: "font-sans text-xs text-[var(--semantic-color-feedback-error-text)] m-0",
650
+ children: error
651
+ }
652
+ )
491
653
  ] });
492
654
  }
493
655
 
@@ -540,11 +702,6 @@ function Logo({ size = 48, ...props }) {
540
702
  // src/components/Modal/Modal.tsx
541
703
  var import_react4 = require("react");
542
704
  var import_react_dom2 = require("react-dom");
543
-
544
- // src/components/Modal/Modal.module.css
545
- var Modal_default = {};
546
-
547
- // src/components/Modal/Modal.tsx
548
705
  var import_jsx_runtime13 = require("react/jsx-runtime");
549
706
  function Modal({ isOpen, onClose, title, children, footer }) {
550
707
  const [isAnimating, setIsAnimating] = (0, import_react4.useState)(false);
@@ -578,36 +735,45 @@ function Modal({ isOpen, onClose, title, children, footer }) {
578
735
  }, [isOpen, handleClose]);
579
736
  if (!isOpen) return null;
580
737
  const entering = isAnimating && !isExiting;
581
- const modalContent = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: Modal_default.overlay, children: [
738
+ const modalContent = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fixed inset-0 z-[var(--modal-z-index)] flex items-center justify-center", children: [
582
739
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
583
740
  "button",
584
741
  {
585
742
  type: "button",
586
743
  onClick: handleClose,
587
- className: [Modal_default.backdrop, entering && Modal_default.backdropVisible].filter(Boolean).join(" "),
744
+ className: cn(
745
+ "absolute inset-0 border-none p-0 cursor-default transition-colors duration-[var(--duration-fast)]",
746
+ entering ? "bg-black/40" : "bg-transparent"
747
+ ),
588
748
  "aria-label": "Hintergrund - Klicken zum Schlie\xDFen"
589
749
  }
590
750
  ),
591
751
  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
592
752
  "div",
593
753
  {
594
- className: [Modal_default.dialog, entering ? Modal_default.dialogEnter : Modal_default.dialogExit].join(" "),
754
+ className: cn(
755
+ "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)]",
756
+ entering ? "animate-[modalEnter_250ms_ease-out_both]" : "animate-[modalExit_200ms_ease-in_both]"
757
+ ),
595
758
  role: "dialog",
596
759
  "aria-modal": "true",
597
760
  "aria-label": title || void 0,
598
761
  children: [
599
- title ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: Modal_default.header, children: [
600
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: Modal_default.title, children: title }),
762
+ title ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("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: [
763
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "font-sans text-lg font-semibold text-[var(--semantic-color-text-default)] m-0 pr-4", children: title }),
601
764
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, { onClick: handleClose })
602
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Modal_default.closeAbsolute, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, { onClick: handleClose }) }),
765
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, { onClick: handleClose }) }),
603
766
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
604
767
  "div",
605
768
  {
606
- className: [Modal_default.content, entering && Modal_default.contentVisible].filter(Boolean).join(" "),
769
+ className: cn(
770
+ "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",
771
+ entering && "animate-[contentReveal_300ms_ease-out_50ms_both]"
772
+ ),
607
773
  children
608
774
  }
609
775
  ),
610
- footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Modal_default.footer, children: footer })
776
+ footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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 })
611
777
  ]
612
778
  }
613
779
  )
@@ -629,28 +795,46 @@ function ConfirmationModal({
629
795
  isConfirmDisabled = false,
630
796
  variant = "primary"
631
797
  }) {
632
- const confirmClass = variant === "danger" ? Modal_default.confirmDanger : Modal_default.confirmPrimary;
633
798
  const footer = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
634
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: onClose, className: Modal_default.cancelButton, children: cancelText }),
799
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
800
+ "button",
801
+ {
802
+ type: "button",
803
+ onClick: onClose,
804
+ 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",
805
+ children: cancelText
806
+ }
807
+ ),
635
808
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
636
809
  "button",
637
810
  {
638
811
  type: "button",
639
812
  onClick: onConfirm,
640
813
  disabled: isConfirmLoading || isConfirmDisabled,
641
- className: [Modal_default.confirmButton, confirmClass].join(" "),
642
- children: isConfirmLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: Modal_default.confirmLoading, children: [
643
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { className: Modal_default.confirmSpinner, fill: "none", viewBox: "0 0 24 24", children: [
644
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("circle", { opacity: 0.25, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
645
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
646
- "path",
647
- {
648
- opacity: 0.75,
649
- fill: "currentColor",
650
- 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"
651
- }
652
- )
653
- ] }),
814
+ className: cn(
815
+ "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",
816
+ variant === "danger" ? "bg-[var(--semantic-color-feedback-error-text)]" : "bg-[var(--semantic-color-bg-inverse)]"
817
+ ),
818
+ children: isConfirmLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [
819
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
820
+ "svg",
821
+ {
822
+ className: "size-4 animate-[ds-spin_0.7s_linear_infinite]",
823
+ fill: "none",
824
+ viewBox: "0 0 24 24",
825
+ children: [
826
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("circle", { opacity: 0.25, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
827
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
828
+ "path",
829
+ {
830
+ opacity: 0.75,
831
+ fill: "currentColor",
832
+ 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"
833
+ }
834
+ )
835
+ ]
836
+ }
837
+ ),
654
838
  "Wird geladen..."
655
839
  ] }) : confirmText
656
840
  }
@@ -664,12 +848,12 @@ function CloseButton({ onClick }) {
664
848
  {
665
849
  type: "button",
666
850
  onClick,
667
- className: Modal_default.closeButton,
851
+ 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",
668
852
  "aria-label": "Modal schlie\xDFen",
669
853
  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
670
854
  "svg",
671
855
  {
672
- className: Modal_default.closeIcon,
856
+ className: "transition-transform duration-[var(--duration-fast)] group-hover:rotate-90",
673
857
  width: "20",
674
858
  height: "20",
675
859
  fill: "none",
@@ -683,11 +867,34 @@ function CloseButton({ onClick }) {
683
867
  );
684
868
  }
685
869
 
686
- // src/components/Pill/Pill.module.css
687
- var Pill_default = {};
688
-
689
870
  // src/components/Pill/Pill.tsx
690
871
  var import_jsx_runtime14 = require("react/jsx-runtime");
872
+ var solidStyles = {
873
+ red: "bg-[var(--semantic-color-feedback-error-strong)] text-[var(--semantic-color-text-inverse)]",
874
+ green: "bg-[var(--semantic-color-brand-primary)] text-[var(--semantic-color-text-inverse)]",
875
+ blue: "bg-[var(--semantic-color-feedback-info)] text-[var(--semantic-color-text-inverse)]",
876
+ orange: "bg-[var(--semantic-color-feedback-warning)] text-[var(--semantic-color-text-inverse)]",
877
+ purple: "bg-[var(--semantic-color-feedback-accent)] text-[var(--semantic-color-text-inverse)]",
878
+ gray: "bg-[var(--semantic-color-border-muted)] text-[var(--semantic-color-text-inverse)]"
879
+ };
880
+ var subtleStyles = {
881
+ red: "bg-[var(--semantic-color-feedback-error-light)] text-[var(--semantic-color-feedback-error-text)]",
882
+ green: "bg-[var(--semantic-color-feedback-success-light)] text-[var(--semantic-color-feedback-success-text)]",
883
+ blue: "bg-[var(--semantic-color-feedback-info-light)] text-[var(--semantic-color-feedback-info-text)]",
884
+ orange: "bg-[var(--semantic-color-brand-secondary-light)] text-[var(--semantic-color-feedback-warning-text)]",
885
+ purple: "bg-[var(--semantic-color-feedback-accent-light)] text-[var(--semantic-color-feedback-accent-text)]",
886
+ gray: "bg-[var(--semantic-color-bg-muted)] text-[var(--semantic-color-text-secondary)]"
887
+ };
888
+ var sizeStyles4 = {
889
+ sm: "px-2 py-0.5 text-xs",
890
+ md: "px-3 py-1.5 text-xs",
891
+ lg: "px-4 py-2 text-sm"
892
+ };
893
+ var dotSizes = {
894
+ sm: "size-1 mr-1.5",
895
+ md: "size-1.5 mr-2",
896
+ lg: "size-2 mr-2.5"
897
+ };
691
898
  function Pill({
692
899
  label,
693
900
  color = "gray",
@@ -700,34 +907,62 @@ function Pill({
700
907
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
701
908
  "span",
702
909
  {
703
- className: [Pill_default.pill, Pill_default[`${variant}-${color}`], Pill_default[size], className].filter(Boolean).join(" "),
910
+ className: cn(
911
+ "inline-flex items-center rounded-full font-sans font-bold whitespace-nowrap",
912
+ variant === "solid" ? solidStyles[color] : subtleStyles[color],
913
+ sizeStyles4[size],
914
+ className
915
+ ),
704
916
  ...props,
705
917
  children: [
706
- dot && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: [Pill_default.dot, Pill_default[`dot-${size}`]].join(" ") }),
918
+ dot && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("rounded-full bg-current opacity-80", dotSizes[size]) }),
707
919
  label
708
920
  ]
709
921
  }
710
922
  );
711
923
  }
712
924
 
713
- // src/components/Radio/Radio.module.css
714
- var Radio_default = {};
715
-
716
925
  // src/components/Radio/Radio.tsx
717
926
  var import_jsx_runtime15 = require("react/jsx-runtime");
718
927
  function Radio({ label, id, name, className, ...props }) {
719
928
  const inputId = id || `${name}-${label.toLowerCase().replace(/\s+/g, "-")}`;
720
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { htmlFor: inputId, className: [Radio_default.wrapper, className].filter(Boolean).join(" "), children: [
721
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "radio", id: inputId, name, className: Radio_default.input, ...props }),
722
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: Radio_default.label, children: label })
723
- ] });
929
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
930
+ "label",
931
+ {
932
+ htmlFor: inputId,
933
+ className: cn(
934
+ "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)]",
935
+ className
936
+ ),
937
+ children: [
938
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
939
+ "input",
940
+ {
941
+ type: "radio",
942
+ id: inputId,
943
+ name,
944
+ 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",
945
+ ...props
946
+ }
947
+ ),
948
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
949
+ ]
950
+ }
951
+ );
724
952
  }
725
953
 
726
- // src/components/SearchBar/SearchBar.module.css
727
- var SearchBar_default = {};
728
-
729
954
  // src/components/SearchBar/SearchBar.tsx
730
955
  var import_jsx_runtime16 = require("react/jsx-runtime");
956
+ var sizeStyles5 = {
957
+ sm: "py-2 pl-9 pr-3 text-sm",
958
+ md: "py-2.5 pl-9 pr-10 text-sm",
959
+ lg: "py-3 px-10 text-base"
960
+ };
961
+ var iconSizes = {
962
+ sm: "size-4",
963
+ md: "size-4",
964
+ lg: "size-5"
965
+ };
731
966
  function SearchBar({
732
967
  value,
733
968
  onChange,
@@ -737,11 +972,14 @@ function SearchBar({
737
972
  className,
738
973
  ...props
739
974
  }) {
740
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: [SearchBar_default.wrapper, className].filter(Boolean).join(" "), children: [
975
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("relative", className), children: [
741
976
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
742
977
  "svg",
743
978
  {
744
- className: [SearchBar_default.searchIcon, SearchBar_default[`icon-${size}`]].join(" "),
979
+ className: cn(
980
+ "absolute top-1/2 left-3 -translate-y-1/2 text-[var(--semantic-color-text-muted)]",
981
+ iconSizes[size]
982
+ ),
745
983
  fill: "none",
746
984
  viewBox: "0 0 24 24",
747
985
  stroke: "currentColor",
@@ -763,7 +1001,12 @@ function SearchBar({
763
1001
  placeholder,
764
1002
  value,
765
1003
  onChange: (e) => onChange(e.target.value),
766
- className: [SearchBar_default.input, SearchBar_default[size]].join(" "),
1004
+ className: cn(
1005
+ "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)]",
1006
+ "placeholder:text-[var(--semantic-color-text-muted)]",
1007
+ "focus:outline-none focus:border-[var(--semantic-color-border-strong)]",
1008
+ sizeStyles5[size]
1009
+ ),
767
1010
  ...props
768
1011
  }
769
1012
  ),
@@ -775,11 +1018,11 @@ function SearchBar({
775
1018
  onChange("");
776
1019
  onClear?.();
777
1020
  },
778
- className: SearchBar_default.clearButton,
1021
+ 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)]",
779
1022
  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
780
1023
  "svg",
781
1024
  {
782
- className: [SearchBar_default.clearIcon, SearchBar_default[`icon-${size}`]].join(" "),
1025
+ className: cn("text-[var(--semantic-color-text-muted)]", iconSizes[size]),
783
1026
  fill: "none",
784
1027
  viewBox: "0 0 24 24",
785
1028
  stroke: "currentColor",
@@ -799,21 +1042,30 @@ function SearchBar({
799
1042
  ] });
800
1043
  }
801
1044
 
802
- // src/components/Select/Select.module.css
803
- var Select_default = {};
804
-
805
1045
  // src/components/Select/Select.tsx
806
1046
  var import_jsx_runtime17 = require("react/jsx-runtime");
807
1047
  function Select({ label, placeholder, options, id, className, ...props }) {
808
1048
  const selectId = id || (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
809
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: Select_default.wrapper, children: [
810
- label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: selectId, className: Select_default.label, children: label }),
811
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: Select_default.container, children: [
1049
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-1", children: [
1050
+ label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1051
+ "label",
1052
+ {
1053
+ htmlFor: selectId,
1054
+ className: "font-sans text-sm font-medium text-[var(--semantic-color-text-default)]",
1055
+ children: label
1056
+ }
1057
+ ),
1058
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
812
1059
  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
813
1060
  "select",
814
1061
  {
815
1062
  id: selectId,
816
- className: [Select_default.select, className].filter(Boolean).join(" "),
1063
+ className: cn(
1064
+ "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)]",
1065
+ "focus:outline-none focus:border-[var(--semantic-color-border-strong)]",
1066
+ "disabled:opacity-[var(--disabled-opacity)] disabled:cursor-not-allowed",
1067
+ className
1068
+ ),
817
1069
  ...props,
818
1070
  children: [
819
1071
  placeholder && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: "", disabled: props.required, children: placeholder }),
@@ -821,16 +1073,21 @@ function Select({ label, placeholder, options, id, className, ...props }) {
821
1073
  ]
822
1074
  }
823
1075
  ),
824
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })
1076
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1077
+ "div",
1078
+ {
1079
+ className: "absolute top-0 right-0 bottom-0 flex items-center pr-3 text-[var(--semantic-color-text-muted)] pointer-events-none",
1080
+ "aria-hidden": "true",
1081
+ children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
1082
+ }
1083
+ )
825
1084
  ] })
826
1085
  ] });
827
1086
  }
828
1087
 
829
- // src/components/Skeleton/Skeleton.module.css
830
- var Skeleton_default = {};
831
-
832
1088
  // src/components/Skeleton/Skeleton.tsx
833
1089
  var import_jsx_runtime18 = require("react/jsx-runtime");
1090
+ 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%)]";
834
1091
  function Skeleton({
835
1092
  width,
836
1093
  height = 16,
@@ -842,7 +1099,7 @@ function Skeleton({
842
1099
  style,
843
1100
  ...props
844
1101
  }) {
845
- const resolvedRadius = circle ? "9999px" : borderRadius != null ? typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius : "var(--radius-md)";
1102
+ const resolvedRadius = circle ? "var(--radius-full)" : borderRadius != null ? typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius : "var(--radius-md)";
846
1103
  const itemStyle = {
847
1104
  width: circle ? height : width,
848
1105
  height,
@@ -853,26 +1110,16 @@ function Skeleton({
853
1110
  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
854
1111
  "div",
855
1112
  {
856
- className: [Skeleton_default.skeleton, className].filter(Boolean).join(" "),
1113
+ className: cn(skeletonClass, className),
857
1114
  style: itemStyle,
858
1115
  "aria-hidden": "true",
859
1116
  ...props
860
1117
  }
861
1118
  );
862
1119
  }
863
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: Skeleton_default.group, style: { gap }, "aria-hidden": "true", ...props, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
864
- "div",
865
- {
866
- className: [Skeleton_default.skeleton, className].filter(Boolean).join(" "),
867
- style: itemStyle
868
- },
869
- `skeleton-${i}`
870
- )) });
1120
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col", style: { gap }, "aria-hidden": "true", ...props, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn(skeletonClass, className), style: itemStyle }, `skeleton-${i}`)) });
871
1121
  }
872
1122
 
873
- // src/components/Spinner/Spinner.module.css
874
- var Spinner_default = {};
875
-
876
1123
  // src/components/Spinner/Spinner.tsx
877
1124
  var import_jsx_runtime19 = require("react/jsx-runtime");
878
1125
  var sizes = { sm: 20, md: 32, lg: 48 };
@@ -882,43 +1129,59 @@ function Spinner({ size = "md", label, className, ...props }) {
882
1129
  const stroke = strokes[size];
883
1130
  const r = (s - stroke) / 2;
884
1131
  const circumference = 2 * Math.PI * r;
885
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: [Spinner_default.wrapper, className].filter(Boolean).join(" "), role: "status", ...props, children: [
886
- /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, className: Spinner_default.svg, children: [
887
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
888
- "circle",
889
- {
890
- cx: s / 2,
891
- cy: s / 2,
892
- r,
893
- fill: "none",
894
- stroke: "var(--semantic-color-border-default)",
895
- strokeWidth: stroke
896
- }
897
- ),
898
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
899
- "circle",
900
- {
901
- cx: s / 2,
902
- cy: s / 2,
903
- r,
904
- fill: "none",
905
- stroke: "var(--semantic-color-brand-primary)",
906
- strokeWidth: stroke,
907
- strokeLinecap: "round",
908
- strokeDasharray: `${circumference * 0.3} ${circumference * 0.7}`
909
- }
910
- )
911
- ] }),
912
- label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: Spinner_default.label, children: label }),
913
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: Spinner_default.srOnly, children: "Laden..." })
1132
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("flex flex-col items-center gap-3", className), role: "status", ...props, children: [
1133
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
1134
+ "svg",
1135
+ {
1136
+ width: s,
1137
+ height: s,
1138
+ viewBox: `0 0 ${s} ${s}`,
1139
+ className: "animate-[ds-spin_0.8s_cubic-bezier(0.4,0,0.2,1)_infinite]",
1140
+ children: [
1141
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1142
+ "circle",
1143
+ {
1144
+ cx: s / 2,
1145
+ cy: s / 2,
1146
+ r,
1147
+ fill: "none",
1148
+ stroke: "var(--semantic-color-border-default)",
1149
+ strokeWidth: stroke
1150
+ }
1151
+ ),
1152
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1153
+ "circle",
1154
+ {
1155
+ cx: s / 2,
1156
+ cy: s / 2,
1157
+ r,
1158
+ fill: "none",
1159
+ stroke: "var(--semantic-color-brand-primary)",
1160
+ strokeWidth: stroke,
1161
+ strokeLinecap: "round",
1162
+ strokeDasharray: `${circumference * 0.3} ${circumference * 0.7}`
1163
+ }
1164
+ )
1165
+ ]
1166
+ }
1167
+ ),
1168
+ label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "m-0 font-sans text-sm text-[var(--semantic-color-text-muted)]", children: label }),
1169
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sr-only", children: "Laden..." })
914
1170
  ] });
915
1171
  }
916
1172
 
917
- // src/components/StatusDot/StatusDot.module.css
918
- var StatusDot_default = {};
919
-
920
1173
  // src/components/StatusDot/StatusDot.tsx
921
1174
  var import_jsx_runtime20 = require("react/jsx-runtime");
1175
+ var colorStyles = {
1176
+ green: "bg-[var(--semantic-color-feedback-success)]",
1177
+ yellow: "bg-[var(--semantic-color-feedback-warning)]",
1178
+ red: "bg-[var(--semantic-color-feedback-error)]",
1179
+ gray: "bg-[var(--semantic-color-border-muted)]"
1180
+ };
1181
+ var sizeStyles6 = {
1182
+ sm: "size-2.5",
1183
+ md: "size-3"
1184
+ };
922
1185
  function StatusDot({
923
1186
  color,
924
1187
  tooltip,
@@ -931,7 +1194,13 @@ function StatusDot({
931
1194
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
932
1195
  "div",
933
1196
  {
934
- className: [StatusDot_default.dot, StatusDot_default[color], StatusDot_default[size], shouldPulse && StatusDot_default.pulse, className].filter(Boolean).join(" "),
1197
+ className: cn(
1198
+ "shrink-0 rounded-full",
1199
+ colorStyles[color],
1200
+ sizeStyles6[size],
1201
+ shouldPulse && "animate-pulse",
1202
+ className
1203
+ ),
935
1204
  title: tooltip,
936
1205
  ...props
937
1206
  }
@@ -940,11 +1209,6 @@ function StatusDot({
940
1209
 
941
1210
  // src/components/Tabs/Tabs.tsx
942
1211
  var import_react5 = require("react");
943
-
944
- // src/components/Tabs/Tabs.module.css
945
- var Tabs_default = {};
946
-
947
- // src/components/Tabs/Tabs.tsx
948
1212
  var import_jsx_runtime21 = require("react/jsx-runtime");
949
1213
  function Tabs({ items, activeTab, onTabChange, className }) {
950
1214
  const tabRefs = (0, import_react5.useRef)([]);
@@ -1008,7 +1272,7 @@ function Tabs({ items, activeTab, onTabChange, className }) {
1008
1272
  observer.disconnect();
1009
1273
  };
1010
1274
  }, [updateScrollState, updateIndicator]);
1011
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: [Tabs_default.wrapper, className].filter(Boolean).join(" "), children: [
1275
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("relative", className), children: [
1012
1276
  showMobileDropdown && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1013
1277
  MobileTabDropdown,
1014
1278
  {
@@ -1018,13 +1282,14 @@ function Tabs({ items, activeTab, onTabChange, className }) {
1018
1282
  onTabChange
1019
1283
  }
1020
1284
  ),
1021
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1022
- "div",
1023
- {
1024
- className: [Tabs_default.tabsContainer, showMobileDropdown && Tabs_default.hiddenMobile].filter(Boolean).join(" "),
1025
- children: [
1026
- canScrollLeft && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: Tabs_default.fadeLeft }),
1027
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: scrollRef, className: Tabs_default.scrollable, children: [
1285
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("relative", showMobileDropdown && "hidden md:block"), children: [
1286
+ canScrollLeft && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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" }),
1287
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1288
+ "div",
1289
+ {
1290
+ ref: scrollRef,
1291
+ className: "relative flex gap-[var(--tabs-gap)] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
1292
+ children: [
1028
1293
  items.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1029
1294
  "button",
1030
1295
  {
@@ -1033,29 +1298,29 @@ function Tabs({ items, activeTab, onTabChange, className }) {
1033
1298
  },
1034
1299
  type: "button",
1035
1300
  onClick: () => onTabChange(tab.id),
1036
- className: [
1037
- Tabs_default.tab,
1038
- activeTab === tab.id ? Tabs_default.tabActive : Tabs_default.tabInactive
1039
- ].join(" "),
1040
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: Tabs_default.tabLabel, children: tab.label })
1301
+ className: cn(
1302
+ "relative pb-3 border-none bg-transparent font-sans text-sm font-medium cursor-pointer transition-colors duration-[var(--duration-fast)] whitespace-nowrap",
1303
+ activeTab === tab.id ? "text-[var(--semantic-color-text-default)] font-semibold" : "text-[var(--semantic-color-text-muted)] hover:text-[var(--semantic-color-text-tertiary)]"
1304
+ ),
1305
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "whitespace-nowrap", children: tab.label })
1041
1306
  },
1042
1307
  tab.id
1043
1308
  )),
1044
1309
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1045
1310
  "div",
1046
1311
  {
1047
- className: Tabs_default.indicator,
1312
+ 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",
1048
1313
  style: {
1049
1314
  left: `${indicatorStyle.left}px`,
1050
1315
  width: `${indicatorStyle.width}px`
1051
1316
  }
1052
1317
  }
1053
1318
  )
1054
- ] }),
1055
- canScrollRight && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: Tabs_default.fadeRight })
1056
- ]
1057
- }
1058
- )
1319
+ ]
1320
+ }
1321
+ ),
1322
+ canScrollRight && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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" })
1323
+ ] })
1059
1324
  ] });
1060
1325
  }
1061
1326
  function MobileTabDropdown({
@@ -1075,19 +1340,25 @@ function MobileTabDropdown({
1075
1340
  document.addEventListener("mousedown", handleClickOutside);
1076
1341
  return () => document.removeEventListener("mousedown", handleClickOutside);
1077
1342
  }, []);
1078
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: Tabs_default.mobileDropdown, ref: dropdownRef, children: [
1343
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative md:hidden", ref: dropdownRef, children: [
1079
1344
  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1080
1345
  "button",
1081
1346
  {
1082
1347
  type: "button",
1083
1348
  onClick: () => setIsOpen(!isOpen),
1084
- className: [Tabs_default.mobileToggle, isOpen && Tabs_default.mobileToggleOpen].filter(Boolean).join(" "),
1349
+ className: cn(
1350
+ "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)]",
1351
+ isOpen && "bg-[var(--semantic-color-bg-subtle)]"
1352
+ ),
1085
1353
  children: [
1086
1354
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: activeLabel }),
1087
1355
  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1088
1356
  "svg",
1089
1357
  {
1090
- className: [Tabs_default.mobileChevron, isOpen && Tabs_default.mobileChevronOpen].filter(Boolean).join(" "),
1358
+ className: cn(
1359
+ "shrink-0 text-[var(--semantic-color-text-muted)] transition-transform duration-[var(--duration-fast)]",
1360
+ isOpen && "rotate-180"
1361
+ ),
1091
1362
  width: "20",
1092
1363
  height: "20",
1093
1364
  fill: "none",
@@ -1099,7 +1370,7 @@ function MobileTabDropdown({
1099
1370
  ]
1100
1371
  }
1101
1372
  ),
1102
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: Tabs_default.mobileMenu, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1373
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime21.jsx)(
1103
1374
  "button",
1104
1375
  {
1105
1376
  type: "button",
@@ -1107,10 +1378,10 @@ function MobileTabDropdown({
1107
1378
  onTabChange(item.id);
1108
1379
  setIsOpen(false);
1109
1380
  },
1110
- className: [
1111
- Tabs_default.mobileMenuItem,
1112
- item.id === activeTab && Tabs_default.mobileMenuItemActive
1113
- ].filter(Boolean).join(" "),
1381
+ className: cn(
1382
+ "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)]",
1383
+ item.id === activeTab && "bg-[var(--semantic-color-bg-subtle)] font-semibold text-[var(--semantic-color-text-default)]"
1384
+ ),
1114
1385
  children: item.label
1115
1386
  },
1116
1387
  item.id
@@ -1118,40 +1389,65 @@ function MobileTabDropdown({
1118
1389
  ] });
1119
1390
  }
1120
1391
 
1121
- // src/components/Textarea/Textarea.module.css
1122
- var Textarea_default = {};
1123
-
1124
1392
  // src/components/Textarea/Textarea.tsx
1125
1393
  var import_jsx_runtime22 = require("react/jsx-runtime");
1126
1394
  function Textarea({ label, error, id, name, rows = 4, className, ...props }) {
1127
1395
  const textareaId = id || name;
1128
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: Textarea_default.wrapper, children: [
1129
- label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { htmlFor: textareaId, className: Textarea_default.label, children: label }),
1396
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-2", children: [
1397
+ label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1398
+ "label",
1399
+ {
1400
+ htmlFor: textareaId,
1401
+ className: "font-sans text-sm font-medium text-[var(--semantic-color-text-default)]",
1402
+ children: label
1403
+ }
1404
+ ),
1130
1405
  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1131
1406
  "textarea",
1132
1407
  {
1133
1408
  id: textareaId,
1134
1409
  name,
1135
1410
  rows,
1136
- className: [Textarea_default.textarea, error && Textarea_default.error, className].filter(Boolean).join(" "),
1411
+ className: cn(
1412
+ "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)]",
1413
+ "placeholder:text-[var(--semantic-color-text-muted)]",
1414
+ "focus:outline-none focus:border-[var(--semantic-color-border-strong)]",
1415
+ "disabled:opacity-[var(--disabled-opacity)] disabled:cursor-not-allowed disabled:bg-[var(--semantic-color-bg-subtle)]",
1416
+ error && "border-[var(--semantic-color-feedback-error)]",
1417
+ className
1418
+ ),
1137
1419
  "aria-invalid": error ? "true" : void 0,
1138
1420
  "aria-describedby": error ? `${textareaId}-error` : void 0,
1139
1421
  ...props
1140
1422
  }
1141
1423
  ),
1142
- error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { id: `${textareaId}-error`, className: Textarea_default.errorText, children: error })
1424
+ error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1425
+ "p",
1426
+ {
1427
+ id: `${textareaId}-error`,
1428
+ className: "font-sans text-xs text-[var(--semantic-color-feedback-error-text)] m-0",
1429
+ children: error
1430
+ }
1431
+ )
1143
1432
  ] });
1144
1433
  }
1145
1434
 
1146
1435
  // src/components/Toast/Toast.tsx
1147
1436
  var import_react6 = require("react");
1148
1437
  var import_react_dom3 = require("react-dom");
1149
-
1150
- // src/components/Toast/Toast.module.css
1151
- var Toast_default = {};
1152
-
1153
- // src/components/Toast/Toast.tsx
1154
1438
  var import_jsx_runtime23 = require("react/jsx-runtime");
1439
+ var typeStyles2 = {
1440
+ success: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-success)]",
1441
+ error: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-error)]",
1442
+ warning: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-warning)]",
1443
+ info: "border-l-[length:var(--toast-border-width)] border-l-[var(--semantic-color-feedback-info)]"
1444
+ };
1445
+ var iconColors = {
1446
+ success: "text-[var(--semantic-color-feedback-success)]",
1447
+ error: "text-[var(--semantic-color-feedback-error)]",
1448
+ warning: "text-[var(--semantic-color-feedback-warning)]",
1449
+ info: "text-[var(--semantic-color-feedback-info)]"
1450
+ };
1155
1451
  var icons2 = {
1156
1452
  success: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1157
1453
  "svg",
@@ -1231,29 +1527,38 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
1231
1527
  if (exitTimer) clearTimeout(exitTimer);
1232
1528
  };
1233
1529
  }, [duration, dismiss]);
1234
- const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: Toast_default.container, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
1530
+ const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fixed top-[var(--toast-position-top)] right-[var(--toast-position-right)] z-[var(--toast-z-index)] pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
1235
1531
  "div",
1236
1532
  {
1237
- className: [
1238
- Toast_default.toast,
1239
- Toast_default[type],
1240
- isVisible && !isExiting ? Toast_default.enter : Toast_default.exit
1241
- ].filter(Boolean).join(" "),
1533
+ className: cn(
1534
+ "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)]",
1535
+ typeStyles2[type],
1536
+ isVisible && !isExiting ? "animate-[toastSlideIn_200ms_ease-out_both]" : "animate-[toastSlideOut_200ms_ease-in_both]"
1537
+ ),
1242
1538
  children: [
1243
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Toast_default.icon, children: icons2[type] }),
1244
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: Toast_default.message, children: message }),
1245
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", onClick: dismiss, className: Toast_default.close, "aria-label": "Schlie\xDFen", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1246
- "svg",
1539
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cn("flex shrink-0", iconColors[type]), children: icons2[type] }),
1540
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex-1 leading-[1.4]", children: message }),
1541
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1542
+ "button",
1247
1543
  {
1248
- width: "14",
1249
- height: "14",
1250
- fill: "none",
1251
- viewBox: "0 0 24 24",
1252
- stroke: "currentColor",
1253
- strokeWidth: 2,
1254
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
1544
+ type: "button",
1545
+ onClick: dismiss,
1546
+ 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)]",
1547
+ "aria-label": "Schlie\xDFen",
1548
+ children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1549
+ "svg",
1550
+ {
1551
+ width: "14",
1552
+ height: "14",
1553
+ fill: "none",
1554
+ viewBox: "0 0 24 24",
1555
+ stroke: "currentColor",
1556
+ strokeWidth: 2,
1557
+ children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
1558
+ }
1559
+ )
1255
1560
  }
1256
- ) })
1561
+ )
1257
1562
  ]
1258
1563
  }
1259
1564
  ) });
@@ -1263,18 +1568,61 @@ function Toast({ type = "info", message, duration = 4e3, onClose }) {
1263
1568
  return content;
1264
1569
  }
1265
1570
 
1266
- // src/components/Toggle/Toggle.module.css
1267
- var Toggle_default = {};
1268
-
1269
1571
  // src/components/Toggle/Toggle.tsx
1270
1572
  var import_jsx_runtime24 = require("react/jsx-runtime");
1573
+ var trackSizes = {
1574
+ sm: "w-[var(--toggle-sm-track-width)] h-[var(--toggle-sm-track-height)]",
1575
+ md: "w-[var(--toggle-md-track-width)] h-[var(--toggle-md-track-height)]"
1576
+ };
1577
+ var thumbSizes = {
1578
+ sm: "size-[var(--toggle-sm-thumb-size)]",
1579
+ md: "size-[var(--toggle-md-thumb-size)]"
1580
+ };
1581
+ var thumbTranslate = {
1582
+ sm: "peer-checked:[&>div]:translate-x-[var(--toggle-sm-thumb-translate)]",
1583
+ md: "peer-checked:[&>div]:translate-x-[var(--toggle-md-thumb-translate)]"
1584
+ };
1271
1585
  function Toggle({ label, size = "md", id, name, className, ...props }) {
1272
1586
  const inputId = id || name || (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
1273
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { htmlFor: inputId, className: [Toggle_default.wrapper, className].filter(Boolean).join(" "), children: [
1274
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { type: "checkbox", id: inputId, name, className: Toggle_default.input, ...props }),
1275
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: [Toggle_default.track, Toggle_default[size]].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: Toggle_default.thumb }) }),
1276
- label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: Toggle_default.label, children: label })
1277
- ] });
1587
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
1588
+ "label",
1589
+ {
1590
+ htmlFor: inputId,
1591
+ className: cn("inline-flex items-center gap-2.5 cursor-pointer", className),
1592
+ children: [
1593
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1594
+ "input",
1595
+ {
1596
+ type: "checkbox",
1597
+ id: inputId,
1598
+ name,
1599
+ className: "peer absolute size-px overflow-hidden [clip:rect(0,0,0,0)]",
1600
+ ...props
1601
+ }
1602
+ ),
1603
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1604
+ "div",
1605
+ {
1606
+ className: cn(
1607
+ "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",
1608
+ trackSizes[size],
1609
+ thumbTranslate[size]
1610
+ ),
1611
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1612
+ "div",
1613
+ {
1614
+ className: cn(
1615
+ "absolute top-0.5 left-0.5 rounded-full bg-[var(--semantic-color-bg-default)] shadow-sm transition-transform duration-[var(--duration-fast)]",
1616
+ thumbSizes[size]
1617
+ )
1618
+ }
1619
+ )
1620
+ }
1621
+ ),
1622
+ label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-sans text-sm text-[var(--semantic-color-text-default)] select-none", children: label })
1623
+ ]
1624
+ }
1625
+ );
1278
1626
  }
1279
1627
  // Annotate the CommonJS export names for ESM import in node:
1280
1628
  0 && (module.exports = {
@@ -1303,6 +1651,7 @@ function Toggle({ label, size = "md", id, name, className, ...props }) {
1303
1651
  Tabs,
1304
1652
  Textarea,
1305
1653
  Toast,
1306
- Toggle
1654
+ Toggle,
1655
+ cn
1307
1656
  });
1308
1657
  //# sourceMappingURL=index.cjs.map