@abhir9/pd-design-system 0.1.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.
package/dist/index.js ADDED
@@ -0,0 +1,1331 @@
1
+ import React, { forwardRef, useMemo, createContext, useEffect, useContext } from 'react';
2
+ import { cva } from 'class-variance-authority';
3
+ import * as LucideIcons from 'lucide-react';
4
+ import { Loader2 } from 'lucide-react';
5
+ import { clsx } from 'clsx';
6
+ import { twMerge } from 'tailwind-merge';
7
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
8
+
9
+ // src/theme/types.ts
10
+ var THEME_MODES = ["light", "dark"];
11
+ var THEME_NAMES = ["base", "brand"];
12
+ var ADAPTER_TYPES = ["shadcn", "material"];
13
+
14
+ // src/theme/config.ts
15
+ var [DEFAULT_ADAPTER] = ADAPTER_TYPES;
16
+ var [DEFAULT_THEME] = THEME_NAMES;
17
+ var [DEFAULT_MODE] = THEME_MODES;
18
+ var globalConfig = {
19
+ adapter: DEFAULT_ADAPTER,
20
+ theme: DEFAULT_THEME,
21
+ mode: DEFAULT_MODE
22
+ };
23
+ function setDesignSystemConfig(config) {
24
+ globalConfig = { ...globalConfig, ...config };
25
+ }
26
+ function getDesignSystemConfig() {
27
+ return { ...globalConfig };
28
+ }
29
+ function getAdapter() {
30
+ return globalConfig.adapter;
31
+ }
32
+ function getThemeName() {
33
+ return globalConfig.theme;
34
+ }
35
+ function getThemeMode() {
36
+ return globalConfig.mode;
37
+ }
38
+ function cn(...inputs) {
39
+ return twMerge(clsx(inputs));
40
+ }
41
+ var ButtonPrimitive = forwardRef(
42
+ ({ asChild = false, type = "button", children, ...props }, ref) => {
43
+ if (asChild && React.isValidElement(children)) {
44
+ return React.cloneElement(children, {
45
+ ...props,
46
+ ref,
47
+ type
48
+ });
49
+ }
50
+ return /* @__PURE__ */ jsx(
51
+ "button",
52
+ {
53
+ ref,
54
+ type,
55
+ ...props,
56
+ children
57
+ }
58
+ );
59
+ }
60
+ );
61
+ ButtonPrimitive.displayName = "ButtonPrimitive";
62
+ var iconCache = /* @__PURE__ */ new Map();
63
+ var loggedIcons = /* @__PURE__ */ new Set();
64
+ function getIcon(iconName) {
65
+ if (!iconName || typeof iconName !== "string") {
66
+ return null;
67
+ }
68
+ if (iconCache.has(iconName)) {
69
+ return iconCache.get(iconName) || null;
70
+ }
71
+ let IconComponent = null;
72
+ if (iconName in LucideIcons) {
73
+ IconComponent = LucideIcons[iconName];
74
+ } else {
75
+ const pascalCaseName = iconName.charAt(0).toUpperCase() + iconName.slice(1);
76
+ if (pascalCaseName in LucideIcons) {
77
+ IconComponent = LucideIcons[pascalCaseName];
78
+ }
79
+ }
80
+ if (IconComponent) {
81
+ const isValidComponent = typeof IconComponent === "function" || typeof IconComponent === "object" && IconComponent !== null;
82
+ if (isValidComponent) {
83
+ iconCache.set(iconName, IconComponent);
84
+ if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
85
+ if (!loggedIcons.has(iconName)) {
86
+ console.debug(`[pd-design] Icon "${iconName}" found and cached`);
87
+ loggedIcons.add(iconName);
88
+ }
89
+ }
90
+ return IconComponent;
91
+ }
92
+ }
93
+ if (process.env.NODE_ENV !== "production") {
94
+ const availableIcons = Object.keys(LucideIcons).filter((k) => {
95
+ const icon = LucideIcons[k];
96
+ return !k.includes("Icon") && icon && (typeof icon === "function" || typeof icon === "object");
97
+ }).slice(0, 10);
98
+ console.warn(`[pd-design] Icon "${iconName}" not found in lucide-react. Available icons: ${availableIcons.join(", ")}...`);
99
+ }
100
+ return null;
101
+ }
102
+ function renderIcon(iconName, size = "h-4 w-4", className) {
103
+ const IconComponent = getIcon(iconName);
104
+ if (!IconComponent) {
105
+ return null;
106
+ }
107
+ return React.createElement(IconComponent, {
108
+ className: `${size} ${className || ""}`.trim()
109
+ });
110
+ }
111
+ function iconExists(iconName) {
112
+ return getIcon(iconName) !== null;
113
+ }
114
+ function getAvailableIconNames() {
115
+ return Object.keys(LucideIcons).filter(
116
+ (name) => {
117
+ const icon = LucideIcons[name];
118
+ return icon && (typeof icon === "function" || typeof icon === "object") && !name.includes("Icon");
119
+ }
120
+ );
121
+ }
122
+ var buttonVariants = cva(
123
+ "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--pd-border-blue)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
124
+ {
125
+ variants: {
126
+ variant: {
127
+ primary: "",
128
+ secondary: "",
129
+ ghost: "",
130
+ outline: "border"
131
+ },
132
+ intent: {
133
+ primary: "",
134
+ success: "",
135
+ warning: "",
136
+ danger: "",
137
+ neutral: ""
138
+ },
139
+ size: {
140
+ sm: "h-8 px-3 text-sm",
141
+ md: "h-10 px-4 text-base",
142
+ lg: "h-12 px-6 text-lg"
143
+ }
144
+ },
145
+ compoundVariants: [
146
+ // Primary variant - using new semantic tokens
147
+ {
148
+ variant: "primary",
149
+ intent: "primary",
150
+ class: "bg-[var(--pd-background-invert)] text-[var(--pd-content-onColor)] hover:bg-[var(--pd-background-invertLight)] active:bg-[var(--pd-background-invert)] disabled:bg-[var(--pd-background-secondary)] disabled:text-[var(--pd-content-subtle)]"
151
+ },
152
+ {
153
+ variant: "primary",
154
+ intent: "success",
155
+ class: "bg-[var(--pd-background-green)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-greenOnHover)] active:bg-[var(--pd-background-green)] border-[var(--pd-border-green)]"
156
+ },
157
+ {
158
+ variant: "primary",
159
+ intent: "warning",
160
+ class: "bg-[var(--pd-background-yellow)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-yellowOnHover)] active:bg-[var(--pd-background-yellow)] border-[var(--pd-border-yellow)]"
161
+ },
162
+ {
163
+ variant: "primary",
164
+ intent: "danger",
165
+ class: "bg-[var(--pd-background-red)] text-[var(--pd-content-red)] hover:bg-[var(--pd-background-redOnHover)] hover:text-[var(--pd-content-redOnHover)] active:bg-[var(--pd-background-red)] border-[var(--pd-border-red)] disabled:bg-[var(--pd-background-red)] disabled:text-[var(--pd-content-subtle)]"
166
+ },
167
+ {
168
+ variant: "primary",
169
+ intent: "neutral",
170
+ class: "bg-[var(--pd-background-secondary)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-lowOnHover)] active:bg-[var(--pd-background-tertiary)] border-[var(--pd-border-primary)]"
171
+ },
172
+ // Secondary variant - using new semantic tokens
173
+ {
174
+ variant: "secondary",
175
+ intent: "primary",
176
+ class: "bg-[var(--pd-background-secondary)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-lowOnHover)] active:bg-[var(--pd-background-secondary)] border border-[var(--pd-border-secondary)] disabled:bg-[var(--pd-background-tertiary)] disabled:text-[var(--pd-content-subtle)] disabled:border-[var(--pd-border-subtle)]"
177
+ },
178
+ {
179
+ variant: "secondary",
180
+ intent: "success",
181
+ class: "bg-[var(--pd-background-green)] text-[var(--pd-content-green)] hover:bg-[var(--pd-background-greenOnHover)] active:bg-[var(--pd-background-green)] border-[var(--pd-border-greenSubtle)]"
182
+ },
183
+ {
184
+ variant: "secondary",
185
+ intent: "warning",
186
+ class: "bg-[var(--pd-background-yellow)] text-[var(--pd-content-yellow)] hover:bg-[var(--pd-background-yellowOnHover)] active:bg-[var(--pd-background-yellow)] border-[var(--pd-border-yellowSubtle)]"
187
+ },
188
+ {
189
+ variant: "secondary",
190
+ intent: "danger",
191
+ class: "bg-[var(--pd-background-red)] text-[var(--pd-content-red)] hover:bg-[var(--pd-background-redOnHover)] hover:text-[var(--pd-content-redOnHover)] active:bg-[var(--pd-background-red)] border border-[var(--pd-border-red)]"
192
+ },
193
+ {
194
+ variant: "secondary",
195
+ intent: "neutral",
196
+ class: "bg-[var(--pd-background-low)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-lowOnHover)] active:bg-[var(--pd-background-tertiary)] border-[var(--pd-border-subtle)]"
197
+ },
198
+ // Ghost variant - using new semantic tokens
199
+ {
200
+ variant: "ghost",
201
+ intent: "primary",
202
+ class: "text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-low)] hover:text-[var(--pd-content-primary)] disabled:text-[var(--pd-content-subtle)]"
203
+ },
204
+ {
205
+ variant: "ghost",
206
+ intent: "success",
207
+ class: "hover:bg-[var(--pd-background-green)] text-[var(--pd-content-green)] hover:text-[var(--pd-content-greenOnHover)]"
208
+ },
209
+ {
210
+ variant: "ghost",
211
+ intent: "warning",
212
+ class: "hover:bg-[var(--pd-background-yellow)] text-[var(--pd-content-yellow)] hover:text-[var(--pd-content-yellowOnHover)]"
213
+ },
214
+ {
215
+ variant: "ghost",
216
+ intent: "danger",
217
+ class: "text-[var(--pd-content-red)] hover:bg-[var(--pd-background-red)] hover:text-[var(--pd-content-redOnHover)]"
218
+ },
219
+ {
220
+ variant: "ghost",
221
+ intent: "neutral",
222
+ class: "hover:bg-[var(--pd-background-low)] text-[var(--pd-content-secondary)] hover:text-[var(--pd-content-primary)]"
223
+ },
224
+ // Outline variant - using new semantic tokens
225
+ {
226
+ variant: "outline",
227
+ intent: "primary",
228
+ class: "border-[var(--pd-border-primary)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-low)] hover:border-[var(--pd-border-secondary)]"
229
+ },
230
+ {
231
+ variant: "outline",
232
+ intent: "success",
233
+ class: "border-[var(--pd-border-green)] text-[var(--pd-content-green)] hover:bg-[var(--pd-background-green)] hover:border-[var(--pd-border-greenOnHover)]"
234
+ },
235
+ {
236
+ variant: "outline",
237
+ intent: "warning",
238
+ class: "border-[var(--pd-border-yellow)] text-[var(--pd-content-yellow)] hover:bg-[var(--pd-background-yellow)] hover:border-[var(--pd-border-yellowOnHover)]"
239
+ },
240
+ {
241
+ variant: "outline",
242
+ intent: "danger",
243
+ class: "border border-[var(--pd-border-red)] text-[var(--pd-content-red)] hover:bg-[var(--pd-background-red)] hover:text-[var(--pd-content-redOnHover)] hover:border-[var(--pd-border-redOnHover)]"
244
+ },
245
+ {
246
+ variant: "outline",
247
+ intent: "neutral",
248
+ class: "border-[var(--pd-border-primary)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-low)] hover:border-[var(--pd-border-secondary)]"
249
+ }
250
+ ],
251
+ defaultVariants: {
252
+ variant: "primary",
253
+ intent: "primary",
254
+ size: "md"
255
+ }
256
+ }
257
+ );
258
+ var ShadcnButton = forwardRef(
259
+ ({
260
+ variant = "primary",
261
+ intent = "primary",
262
+ size = "md",
263
+ disabled,
264
+ loading,
265
+ fullWidth,
266
+ startIcon,
267
+ endIcon,
268
+ loadingText,
269
+ asChild,
270
+ href,
271
+ target,
272
+ children,
273
+ ...props
274
+ }, ref) => {
275
+ if (process.env.NODE_ENV !== "production" && !children && (startIcon || endIcon) && !props["aria-label"]) {
276
+ console.warn(
277
+ "[pd-design] Icon-only buttons should have an aria-label for accessibility. Add aria-label prop to describe the button action."
278
+ );
279
+ }
280
+ const buttonClasses = cn(
281
+ buttonVariants({ variant, intent, size }),
282
+ fullWidth && "w-full"
283
+ );
284
+ if (href) {
285
+ return /* @__PURE__ */ jsx(
286
+ ButtonPrimitive,
287
+ {
288
+ asChild: true,
289
+ ...props,
290
+ children: /* @__PURE__ */ jsx(
291
+ "a",
292
+ {
293
+ href,
294
+ target,
295
+ rel: target === "_blank" ? "noopener noreferrer" : void 0,
296
+ className: buttonClasses,
297
+ "aria-disabled": disabled || loading,
298
+ style: { pointerEvents: disabled || loading ? "none" : void 0 },
299
+ children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size })
300
+ }
301
+ )
302
+ }
303
+ );
304
+ }
305
+ return /* @__PURE__ */ jsx(
306
+ ButtonPrimitive,
307
+ {
308
+ ref,
309
+ disabled: disabled || loading,
310
+ className: buttonClasses,
311
+ asChild,
312
+ ...props,
313
+ children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size })
314
+ }
315
+ );
316
+ }
317
+ );
318
+ function renderButtonContent({
319
+ loading,
320
+ loadingText,
321
+ startIcon,
322
+ endIcon,
323
+ children,
324
+ size
325
+ }) {
326
+ const iconSizeClass = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
327
+ const spinnerSizeClass = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
328
+ const iconSpacing = size === "sm" ? "mr-1.5" : size === "lg" ? "mr-2.5" : "mr-2";
329
+ const iconSpacingEnd = size === "sm" ? "ml-1.5" : size === "lg" ? "ml-2.5" : "ml-2";
330
+ if (loading) {
331
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
332
+ /* @__PURE__ */ jsx(
333
+ Loader2,
334
+ {
335
+ "aria-hidden": "true",
336
+ className: `${spinnerSizeClass} ${iconSpacing} animate-spin text-[var(--pd-content-secondary)]`
337
+ }
338
+ ),
339
+ /* @__PURE__ */ jsx("span", { className: "text-[var(--pd-content-secondary)]", children: loadingText || children }),
340
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText ? `Loading: ${loadingText}` : "Loading" })
341
+ ] });
342
+ }
343
+ const StartIconComponent = startIcon ? getIcon(startIcon) : null;
344
+ const EndIconComponent = endIcon ? getIcon(endIcon) : null;
345
+ const hasChildren = Boolean(children);
346
+ const startIconSpacing = hasChildren ? iconSpacing : "";
347
+ const endIconSpacing = hasChildren ? iconSpacingEnd : "";
348
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
349
+ StartIconComponent && /* @__PURE__ */ jsx("span", { className: `${startIconSpacing} inline-flex items-center justify-center`, children: React.createElement(StartIconComponent, { className: iconSizeClass }) }),
350
+ children,
351
+ EndIconComponent && /* @__PURE__ */ jsx("span", { className: `${endIconSpacing} inline-flex items-center justify-center`, children: React.createElement(EndIconComponent, { className: iconSizeClass }) })
352
+ ] });
353
+ }
354
+ ShadcnButton.displayName = "ShadcnButton";
355
+ var buttonGroupVariants = cva(
356
+ "inline-flex",
357
+ {
358
+ variants: {
359
+ orientation: {
360
+ horizontal: "flex-row",
361
+ vertical: "flex-col"
362
+ },
363
+ gap: {
364
+ sm: "gap-1",
365
+ md: "gap-2",
366
+ lg: "gap-3"
367
+ },
368
+ fullWidth: {
369
+ true: "w-full",
370
+ false: ""
371
+ }
372
+ },
373
+ defaultVariants: {
374
+ orientation: "horizontal",
375
+ gap: "md",
376
+ fullWidth: false
377
+ }
378
+ }
379
+ );
380
+ var ShadcnButtonGroup = forwardRef(
381
+ ({
382
+ orientation = "horizontal",
383
+ gap = "md",
384
+ fullWidth = false,
385
+ children,
386
+ className,
387
+ ...props
388
+ }, ref) => {
389
+ const groupClasses = cn(
390
+ buttonGroupVariants({ orientation, gap, fullWidth }),
391
+ className
392
+ );
393
+ return /* @__PURE__ */ jsx(
394
+ "div",
395
+ {
396
+ ref,
397
+ className: groupClasses,
398
+ role: "group",
399
+ ...props,
400
+ children
401
+ }
402
+ );
403
+ }
404
+ );
405
+ ShadcnButtonGroup.displayName = "ShadcnButtonGroup";
406
+
407
+ // src/adapters/index.ts
408
+ var [SHADCN_ADAPTER, MATERIAL_ADAPTER] = ADAPTER_TYPES;
409
+ function getButtonAdapter() {
410
+ const adapter = getAdapter();
411
+ switch (adapter) {
412
+ case SHADCN_ADAPTER:
413
+ return ShadcnButton;
414
+ case MATERIAL_ADAPTER:
415
+ console.warn("Material adapter not yet enabled. Install @mui/material to use it.");
416
+ return ShadcnButton;
417
+ default:
418
+ return ShadcnButton;
419
+ }
420
+ }
421
+ function getButtonGroupAdapter() {
422
+ const adapter = getAdapter();
423
+ switch (adapter) {
424
+ case SHADCN_ADAPTER:
425
+ return ShadcnButtonGroup;
426
+ case MATERIAL_ADAPTER:
427
+ return ShadcnButtonGroup;
428
+ default:
429
+ return ShadcnButtonGroup;
430
+ }
431
+ }
432
+ var Button = forwardRef(
433
+ ({
434
+ variant = "primary",
435
+ intent = "primary",
436
+ size = "md",
437
+ loading,
438
+ disabled,
439
+ fullWidth,
440
+ startIcon,
441
+ endIcon,
442
+ loadingText,
443
+ href,
444
+ target,
445
+ children,
446
+ ...props
447
+ }, ref) => {
448
+ const AdapterButton = getButtonAdapter();
449
+ const { className, ...restProps } = props;
450
+ if (className) {
451
+ console.warn("Button component does not accept className prop. Use variant, intent, size, and other props for styling.");
452
+ }
453
+ const accessibilityProps = useMemo(() => {
454
+ const defaults = {};
455
+ if (disabled || loading) {
456
+ defaults["aria-disabled"] = true;
457
+ }
458
+ if (loading) {
459
+ defaults["aria-busy"] = true;
460
+ }
461
+ return defaults;
462
+ }, [disabled, loading]);
463
+ const mergedProps = {
464
+ ...restProps,
465
+ ...accessibilityProps
466
+ };
467
+ return /* @__PURE__ */ jsx(
468
+ AdapterButton,
469
+ {
470
+ ref,
471
+ variant,
472
+ intent,
473
+ size,
474
+ disabled,
475
+ loading,
476
+ fullWidth,
477
+ startIcon,
478
+ endIcon,
479
+ loadingText,
480
+ href,
481
+ target,
482
+ ...mergedProps,
483
+ children
484
+ }
485
+ );
486
+ }
487
+ );
488
+ Button.displayName = "Button";
489
+ var ButtonGroup = forwardRef(
490
+ ({
491
+ orientation = "horizontal",
492
+ gap = "md",
493
+ fullWidth = false,
494
+ children,
495
+ ...props
496
+ }, ref) => {
497
+ const AdapterButtonGroup = getButtonGroupAdapter();
498
+ const { className, ...restProps } = props;
499
+ if (className) {
500
+ console.warn("ButtonGroup component does not accept className prop. Use orientation, gap, fullWidth, and other props for styling.");
501
+ }
502
+ return /* @__PURE__ */ jsx(
503
+ AdapterButtonGroup,
504
+ {
505
+ ref,
506
+ orientation,
507
+ gap,
508
+ fullWidth,
509
+ ...restProps,
510
+ children
511
+ }
512
+ );
513
+ }
514
+ );
515
+ ButtonGroup.displayName = "ButtonGroup";
516
+
517
+ // src/tokens/base.ts
518
+ var neutral = {
519
+ 100: "#FFFFFF",
520
+ 200: "#EDEDED",
521
+ 300: "#DFDFE2",
522
+ 400: "#BEBEC1",
523
+ 500: "#7E7E8B",
524
+ 600: "#60606C",
525
+ 700: "#4E4E5A",
526
+ 800: "#2F2F37",
527
+ 900: "#17171C",
528
+ 950: "#09090B",
529
+ 1e3: "#FAFAFA"
530
+ };
531
+ var blue = {
532
+ 100: "#EBF1FF",
533
+ 200: "#C2D4FF",
534
+ 300: "#99B7FF",
535
+ 400: "#709AFF",
536
+ 500: "#3772FF",
537
+ 600: "#004BFF",
538
+ 700: "#003FD6",
539
+ 800: "#002680",
540
+ 900: "#001E66",
541
+ 950: "#00123D"
542
+ };
543
+ var orange = {
544
+ 100: "#FFF3EB",
545
+ 200: "#FFE1CC",
546
+ 300: "#FFC9A3",
547
+ 400: "#EC9C64",
548
+ 500: "#FF6800",
549
+ 600: "#D65700",
550
+ 700: "#AD4700",
551
+ 800: "#7A3200",
552
+ 900: "#5C2500",
553
+ 950: "#331500"
554
+ };
555
+ var red = {
556
+ 100: "#FDF2F4",
557
+ 200: "#FADBE1",
558
+ 300: "#F6C1CA",
559
+ 400: "#E15C5C",
560
+ 500: "#E12D4E",
561
+ 600: "#C41C3B",
562
+ 700: "#A11730",
563
+ 800: "#7D1225",
564
+ 900: "#4C0B17",
565
+ 950: "#2D060D"
566
+ };
567
+ var green = {
568
+ 100: "#E0FFEC",
569
+ 200: "#BDFFD5",
570
+ 300: "#8AFFB5",
571
+ 400: "#5CFF98",
572
+ 500: "#09FF63",
573
+ 600: "#00E052",
574
+ 700: "#00B241",
575
+ 800: "#008A32",
576
+ 900: "#006625",
577
+ 950: "#00471A"
578
+ };
579
+ var yellow = {
580
+ 100: "#FFF4E0",
581
+ 200: "#FFE8C2",
582
+ 300: "#FFD999",
583
+ 400: "#FFCA70",
584
+ 500: "#FFAD22",
585
+ 600: "#F09700",
586
+ 700: "#D68700",
587
+ 800: "#7A4D00",
588
+ 900: "#5C3A00",
589
+ 950: "#3D2600"
590
+ };
591
+ var colorPrimitives = {
592
+ neutral,
593
+ blue,
594
+ orange,
595
+ red,
596
+ green,
597
+ yellow
598
+ };
599
+ var colors = {
600
+ // Neutral palette (mapped from new scale)
601
+ white: neutral[100],
602
+ black: neutral[950],
603
+ gray50: neutral[200],
604
+ gray100: neutral[300],
605
+ gray200: neutral[400],
606
+ gray300: neutral[500],
607
+ gray400: neutral[500],
608
+ gray500: neutral[500],
609
+ gray600: neutral[600],
610
+ gray700: neutral[700],
611
+ gray800: neutral[800],
612
+ gray900: neutral[900],
613
+ // Primary palette (mapped from blue)
614
+ blue50: blue[100],
615
+ blue100: blue[100],
616
+ blue200: blue[200],
617
+ blue300: blue[300],
618
+ blue400: blue[400],
619
+ blue500: blue[500],
620
+ blue600: blue[600],
621
+ blue700: blue[700],
622
+ blue800: blue[800],
623
+ blue900: blue[900],
624
+ // Success palette (mapped from green)
625
+ green50: green[100],
626
+ green100: green[100],
627
+ green200: green[200],
628
+ green300: green[300],
629
+ green400: green[400],
630
+ green500: green[500],
631
+ green600: green[600],
632
+ green700: green[700],
633
+ green800: green[800],
634
+ green900: green[900],
635
+ // Warning palette (mapped from yellow)
636
+ yellow50: yellow[100],
637
+ yellow100: yellow[100],
638
+ yellow200: yellow[200],
639
+ yellow300: yellow[300],
640
+ yellow400: yellow[400],
641
+ yellow500: yellow[500],
642
+ yellow600: yellow[600],
643
+ yellow700: yellow[700],
644
+ yellow800: yellow[800],
645
+ yellow900: yellow[900],
646
+ // Danger palette (mapped from red)
647
+ red50: red[100],
648
+ red100: red[100],
649
+ red200: red[200],
650
+ red300: red[300],
651
+ red400: red[400],
652
+ red500: red[500],
653
+ red600: red[600],
654
+ red700: red[700],
655
+ red800: red[800],
656
+ red900: red[900]
657
+ };
658
+ var typography = {
659
+ fontFamily: {
660
+ sans: ["Gist", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "sans-serif"],
661
+ mono: ["Gist Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
662
+ },
663
+ fontSize: {
664
+ xs: "0.75rem",
665
+ // 12px
666
+ sm: "0.875rem",
667
+ // 14px
668
+ base: "1rem",
669
+ // 16px
670
+ lg: "1.125rem",
671
+ // 18px
672
+ xl: "1.25rem",
673
+ // 20px
674
+ "2xl": "1.5rem",
675
+ // 24px
676
+ "3xl": "1.875rem",
677
+ // 30px
678
+ "4xl": "2.25rem",
679
+ // 36px
680
+ "5xl": "3rem"
681
+ // 48px
682
+ },
683
+ fontWeight: {
684
+ normal: "400",
685
+ medium: "500",
686
+ semibold: "600",
687
+ bold: "700"
688
+ },
689
+ lineHeight: {
690
+ tight: "1.25",
691
+ normal: "1.5",
692
+ relaxed: "1.75"
693
+ }
694
+ };
695
+ var spacing = {
696
+ 0: "0",
697
+ 1: "0.25rem",
698
+ // 4px
699
+ 2: "0.5rem",
700
+ // 8px
701
+ 3: "0.75rem",
702
+ // 12px
703
+ 4: "1rem",
704
+ // 16px
705
+ 5: "1.25rem",
706
+ // 20px
707
+ 6: "1.5rem",
708
+ // 24px
709
+ 8: "2rem",
710
+ // 32px
711
+ 10: "2.5rem",
712
+ // 40px
713
+ 12: "3rem",
714
+ // 48px
715
+ 16: "4rem",
716
+ // 64px
717
+ 20: "5rem",
718
+ // 80px
719
+ 24: "6rem"
720
+ // 96px
721
+ };
722
+ var radius = {
723
+ none: "0",
724
+ sm: "0.125rem",
725
+ // 2px
726
+ base: "0.25rem",
727
+ // 4px
728
+ md: "0.375rem",
729
+ // 6px
730
+ lg: "0.5rem",
731
+ // 8px
732
+ xl: "0.75rem",
733
+ // 12px
734
+ "2xl": "1rem",
735
+ // 16px
736
+ "3xl": "1.5rem",
737
+ // 24px
738
+ full: "9999px"
739
+ };
740
+ var shadows = {
741
+ sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
742
+ base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
743
+ md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
744
+ lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
745
+ xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
746
+ "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
747
+ inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
748
+ none: "none"
749
+ };
750
+ var zIndex = {
751
+ base: 0,
752
+ dropdown: 1e3,
753
+ sticky: 1020,
754
+ fixed: 1030,
755
+ modalBackdrop: 1040,
756
+ modal: 1050,
757
+ popover: 1060,
758
+ tooltip: 1070
759
+ };
760
+ var COLOR_SCALES = [100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1e3];
761
+
762
+ // src/tokens/semantic.ts
763
+ var borderTokens = {
764
+ dark: {
765
+ primary: neutral[700],
766
+ secondary: neutral[800],
767
+ subtle: neutral[800],
768
+ invert: neutral[100],
769
+ onColor: neutral[950],
770
+ blue: blue[400],
771
+ blueSubtle: blue[800],
772
+ blueOnHover: blue[500],
773
+ red: red[400],
774
+ redSubtle: red[900],
775
+ redOnHover: red[500],
776
+ orange: orange[400],
777
+ orangeSubtle: orange[900],
778
+ orangeOnHover: orange[500],
779
+ yellow: yellow[400],
780
+ yellowSubtle: yellow[900],
781
+ yellowOnHover: yellow[500],
782
+ green: green[600],
783
+ greenSubtle: green[900],
784
+ greenOnHover: green[700]
785
+ },
786
+ light: {
787
+ primary: neutral[400],
788
+ secondary: neutral[300],
789
+ subtle: neutral[300],
790
+ invert: neutral[950],
791
+ onColor: neutral[100],
792
+ blue: blue[500],
793
+ blueSubtle: blue[300],
794
+ blueOnHover: blue[700],
795
+ red: red[600],
796
+ redSubtle: red[300],
797
+ redOnHover: red[700],
798
+ orange: orange[600],
799
+ orangeSubtle: orange[300],
800
+ orangeOnHover: orange[700],
801
+ yellow: yellow[600],
802
+ yellowSubtle: yellow[300],
803
+ yellowOnHover: yellow[700],
804
+ green: green[600],
805
+ greenSubtle: green[300],
806
+ greenOnHover: green[700]
807
+ }
808
+ };
809
+ var contentTokens = {
810
+ dark: {
811
+ primary: neutral[300],
812
+ secondary: neutral[500],
813
+ subtle: neutral[700],
814
+ onColor: neutral[950],
815
+ alwaysWhite: neutral[100],
816
+ alwaysBlack: neutral[950],
817
+ onColorInverse: neutral[200],
818
+ blue: blue[400],
819
+ blueDisabled: blue[800],
820
+ blueOnHover: blue[500],
821
+ green: green[600],
822
+ greenDisabled: green[800],
823
+ greenOnHover: green[500],
824
+ red: red[400],
825
+ redDisabled: red[800],
826
+ redOnHover: red[300],
827
+ orange: orange[400],
828
+ orangeDisabled: orange[800],
829
+ orangeOnHover: orange[300],
830
+ yellow: yellow[400],
831
+ yellowDisabled: yellow[800],
832
+ yellowOnHover: yellow[300]
833
+ },
834
+ light: {
835
+ primary: neutral[900],
836
+ secondary: neutral[600],
837
+ subtle: neutral[400],
838
+ onColor: neutral[100],
839
+ alwaysWhite: neutral[100],
840
+ alwaysBlack: neutral[950],
841
+ onColorInverse: neutral[950],
842
+ blue: blue[500],
843
+ blueDisabled: blue[400],
844
+ blueOnHover: blue[600],
845
+ green: green[700],
846
+ greenDisabled: green[400],
847
+ greenOnHover: green[600],
848
+ red: red[600],
849
+ redDisabled: red[400],
850
+ redOnHover: red[700],
851
+ orange: orange[600],
852
+ orangeDisabled: orange[400],
853
+ orangeOnHover: orange[700],
854
+ yellow: yellow[600],
855
+ yellowDisabled: yellow[400],
856
+ yellowOnHover: yellow[700]
857
+ }
858
+ };
859
+ var backgroundTokens = {
860
+ dark: {
861
+ base: neutral[950],
862
+ primary: blue[950],
863
+ primaryOnHover: blue[900],
864
+ secondary: neutral[900],
865
+ tertiary: neutral[800],
866
+ invert: neutral[100],
867
+ invertLight: neutral[300],
868
+ green: green[950],
869
+ greenOnHover: green[900],
870
+ red: red[950],
871
+ redOnHover: red[900],
872
+ orange: orange[950],
873
+ orangeOnHover: orange[900],
874
+ yellow: yellow[950],
875
+ yellowOnHover: yellow[900],
876
+ low: neutral[900],
877
+ lowOnHover: neutral[800],
878
+ info: blue[950],
879
+ infoOnHover: blue[900]
880
+ },
881
+ light: {
882
+ base: neutral[100],
883
+ primary: blue[100],
884
+ primaryOnHover: blue[300],
885
+ secondary: neutral[200],
886
+ tertiary: neutral[300],
887
+ invert: neutral[950],
888
+ invertLight: neutral[900],
889
+ green: green[100],
890
+ greenOnHover: green[200],
891
+ red: red[100],
892
+ redOnHover: red[200],
893
+ orange: orange[100],
894
+ orangeOnHover: orange[200],
895
+ yellow: orange[100],
896
+ yellowOnHover: orange[200],
897
+ low: neutral[200],
898
+ lowOnHover: neutral[300],
899
+ info: blue[100],
900
+ infoOnHover: blue[300]
901
+ }
902
+ };
903
+ var semanticTokens = {
904
+ border: borderTokens,
905
+ content: contentTokens,
906
+ background: backgroundTokens
907
+ };
908
+ var VARIANTS = ["primary", "secondary", "ghost", "outline"];
909
+ var INTENTS = ["primary", "success", "warning", "danger", "neutral"];
910
+ var SIZES = ["sm", "md", "lg"];
911
+ var BUTTON_TYPES = ["button", "submit", "reset"];
912
+ var INPUT_TYPES = ["text", "email", "password", "number", "tel", "url", "search"];
913
+ var ORIENTATIONS = ["horizontal", "vertical"];
914
+ var SURFACE_LEVELS = ["base", "elevated", "overlay"];
915
+ function createSemanticTokens(mode) {
916
+ const isLight = mode === "light";
917
+ const border = isLight ? borderTokens.light : borderTokens.dark;
918
+ const content = isLight ? contentTokens.light : contentTokens.dark;
919
+ const background = isLight ? backgroundTokens.light : backgroundTokens.dark;
920
+ return {
921
+ intent: {
922
+ primary: {
923
+ color: content.secondary,
924
+ colorHover: isLight ? neutral[700] : neutral[300],
925
+ colorActive: isLight ? neutral[800] : neutral[200],
926
+ background: background.secondary,
927
+ backgroundHover: background.lowOnHover,
928
+ backgroundActive: background.tertiary,
929
+ border: border.primary,
930
+ text: content.primary,
931
+ textMuted: content.subtle
932
+ },
933
+ success: {
934
+ color: isLight ? green[600] : green[600],
935
+ colorHover: isLight ? green[700] : green[500],
936
+ colorActive: isLight ? green[800] : green[700],
937
+ background: background.green,
938
+ backgroundHover: background.greenOnHover,
939
+ backgroundActive: isLight ? green[300] : green[800],
940
+ border: border.green,
941
+ text: content.green,
942
+ textMuted: isLight ? green[700] : green[300]
943
+ },
944
+ warning: {
945
+ color: isLight ? yellow[600] : yellow[400],
946
+ colorHover: isLight ? yellow[700] : yellow[300],
947
+ colorActive: isLight ? yellow[800] : yellow[500],
948
+ background: background.yellow,
949
+ backgroundHover: background.yellowOnHover,
950
+ backgroundActive: isLight ? yellow[200] : yellow[900],
951
+ border: border.yellow,
952
+ text: content.yellow,
953
+ textMuted: isLight ? yellow[700] : yellow[300]
954
+ },
955
+ danger: {
956
+ color: isLight ? red[600] : red[400],
957
+ colorHover: isLight ? red[700] : red[300],
958
+ colorActive: isLight ? red[800] : red[500],
959
+ background: background.red,
960
+ backgroundHover: background.redOnHover,
961
+ backgroundActive: isLight ? red[200] : red[900],
962
+ border: border.red,
963
+ text: content.red,
964
+ textMuted: isLight ? red[700] : red[300]
965
+ },
966
+ neutral: {
967
+ color: content.secondary,
968
+ colorHover: isLight ? neutral[700] : neutral[300],
969
+ colorActive: isLight ? neutral[800] : neutral[200],
970
+ background: background.secondary,
971
+ backgroundHover: background.lowOnHover,
972
+ backgroundActive: background.tertiary,
973
+ border: border.primary,
974
+ text: content.primary,
975
+ textMuted: content.subtle
976
+ }
977
+ },
978
+ surface: {
979
+ base: {
980
+ background: background.base,
981
+ border: border.primary
982
+ },
983
+ elevated: {
984
+ background: background.secondary,
985
+ border: border.secondary
986
+ },
987
+ overlay: {
988
+ background: isLight ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0.7)",
989
+ border: "transparent"
990
+ }
991
+ },
992
+ text: {
993
+ heading: content.primary,
994
+ body: content.primary,
995
+ muted: content.subtle,
996
+ disabled: isLight ? content.subtle : neutral[600]
997
+ }
998
+ };
999
+ }
1000
+
1001
+ // src/theme/theme.ts
1002
+ function createTheme(name, mode) {
1003
+ const semantic = createSemanticTokens(mode);
1004
+ const isLight = mode === "light";
1005
+ const border = isLight ? borderTokens.light : borderTokens.dark;
1006
+ const content = isLight ? contentTokens.light : contentTokens.dark;
1007
+ const background = isLight ? backgroundTokens.light : backgroundTokens.dark;
1008
+ const cssVariables = {
1009
+ // Base colors
1010
+ "--pd-color-white": colors.white,
1011
+ "--pd-color-black": colors.black,
1012
+ // Intent colors
1013
+ "--pd-intent-primary": semantic.intent.primary.color,
1014
+ "--pd-intent-primary-hover": semantic.intent.primary.colorHover,
1015
+ "--pd-intent-primary-active": semantic.intent.primary.colorActive,
1016
+ "--pd-intent-primary-bg": semantic.intent.primary.background,
1017
+ "--pd-intent-primary-bg-hover": semantic.intent.primary.backgroundHover,
1018
+ "--pd-intent-primary-bg-active": semantic.intent.primary.backgroundActive,
1019
+ "--pd-intent-primary-border": semantic.intent.primary.border,
1020
+ "--pd-intent-primary-text": semantic.intent.primary.text,
1021
+ "--pd-intent-success": semantic.intent.success.color,
1022
+ "--pd-intent-success-hover": semantic.intent.success.colorHover,
1023
+ "--pd-intent-success-active": semantic.intent.success.colorActive,
1024
+ "--pd-intent-success-bg": semantic.intent.success.background,
1025
+ "--pd-intent-success-bg-hover": semantic.intent.success.backgroundHover,
1026
+ "--pd-intent-success-bg-active": semantic.intent.success.backgroundActive,
1027
+ "--pd-intent-success-border": semantic.intent.success.border,
1028
+ "--pd-intent-success-text": semantic.intent.success.text,
1029
+ "--pd-intent-warning": semantic.intent.warning.color,
1030
+ "--pd-intent-warning-hover": semantic.intent.warning.colorHover,
1031
+ "--pd-intent-warning-active": semantic.intent.warning.colorActive,
1032
+ "--pd-intent-warning-bg": semantic.intent.warning.background,
1033
+ "--pd-intent-warning-bg-hover": semantic.intent.warning.backgroundHover,
1034
+ "--pd-intent-warning-bg-active": semantic.intent.warning.backgroundActive,
1035
+ "--pd-intent-warning-border": semantic.intent.warning.border,
1036
+ "--pd-intent-warning-text": semantic.intent.warning.text,
1037
+ "--pd-intent-danger": semantic.intent.danger.color,
1038
+ "--pd-intent-danger-hover": semantic.intent.danger.colorHover,
1039
+ "--pd-intent-danger-active": semantic.intent.danger.colorActive,
1040
+ "--pd-intent-danger-bg": semantic.intent.danger.background,
1041
+ "--pd-intent-danger-bg-hover": semantic.intent.danger.backgroundHover,
1042
+ "--pd-intent-danger-bg-active": semantic.intent.danger.backgroundActive,
1043
+ "--pd-intent-danger-border": semantic.intent.danger.border,
1044
+ "--pd-intent-danger-text": semantic.intent.danger.text,
1045
+ "--pd-intent-neutral": semantic.intent.neutral.color,
1046
+ "--pd-intent-neutral-hover": semantic.intent.neutral.colorHover,
1047
+ "--pd-intent-neutral-active": semantic.intent.neutral.colorActive,
1048
+ "--pd-intent-neutral-bg": semantic.intent.neutral.background,
1049
+ "--pd-intent-neutral-bg-hover": semantic.intent.neutral.backgroundHover,
1050
+ "--pd-intent-neutral-bg-active": semantic.intent.neutral.backgroundActive,
1051
+ "--pd-intent-neutral-border": semantic.intent.neutral.border,
1052
+ "--pd-intent-neutral-text": semantic.intent.neutral.text,
1053
+ // Surface
1054
+ "--pd-surface-base": semantic.surface.base.background,
1055
+ "--pd-surface-base-border": semantic.surface.base.border,
1056
+ "--pd-surface-elevated": semantic.surface.elevated.background,
1057
+ "--pd-surface-elevated-border": semantic.surface.elevated.border,
1058
+ "--pd-surface-overlay": semantic.surface.overlay.background,
1059
+ // Text
1060
+ "--pd-text-heading": semantic.text.heading,
1061
+ "--pd-text-body": semantic.text.body,
1062
+ "--pd-text-muted": semantic.text.muted,
1063
+ "--pd-text-disabled": semantic.text.disabled,
1064
+ // Spacing
1065
+ "--pd-spacing-0": spacing[0],
1066
+ "--pd-spacing-1": spacing[1],
1067
+ "--pd-spacing-2": spacing[2],
1068
+ "--pd-spacing-3": spacing[3],
1069
+ "--pd-spacing-4": spacing[4],
1070
+ "--pd-spacing-5": spacing[5],
1071
+ "--pd-spacing-6": spacing[6],
1072
+ "--pd-spacing-8": spacing[8],
1073
+ "--pd-spacing-10": spacing[10],
1074
+ "--pd-spacing-12": spacing[12],
1075
+ "--pd-spacing-16": spacing[16],
1076
+ "--pd-spacing-20": spacing[20],
1077
+ "--pd-spacing-24": spacing[24],
1078
+ // Radius
1079
+ "--pd-radius-none": radius.none,
1080
+ "--pd-radius-sm": radius.sm,
1081
+ "--pd-radius-base": radius.base,
1082
+ "--pd-radius-md": radius.md,
1083
+ "--pd-radius-lg": radius.lg,
1084
+ "--pd-radius-xl": radius.xl,
1085
+ "--pd-radius-2xl": radius["2xl"],
1086
+ "--pd-radius-3xl": radius["3xl"],
1087
+ "--pd-radius-full": radius.full,
1088
+ // Shadows
1089
+ "--pd-shadow-sm": shadows.sm,
1090
+ "--pd-shadow-base": shadows.base,
1091
+ "--pd-shadow-md": shadows.md,
1092
+ "--pd-shadow-lg": shadows.lg,
1093
+ "--pd-shadow-xl": shadows.xl,
1094
+ "--pd-shadow-2xl": shadows["2xl"],
1095
+ "--pd-shadow-inner": shadows.inner,
1096
+ "--pd-shadow-none": shadows.none,
1097
+ // Z-index
1098
+ "--pd-z-dropdown": String(zIndex.dropdown),
1099
+ "--pd-z-sticky": String(zIndex.sticky),
1100
+ "--pd-z-fixed": String(zIndex.fixed),
1101
+ "--pd-z-modal-backdrop": String(zIndex.modalBackdrop),
1102
+ "--pd-z-modal": String(zIndex.modal),
1103
+ "--pd-z-popover": String(zIndex.popover),
1104
+ "--pd-z-tooltip": String(zIndex.tooltip),
1105
+ // Typography
1106
+ "--pd-font-sans": typography.fontFamily.sans.join(", "),
1107
+ "--pd-font-mono": typography.fontFamily.mono.join(", "),
1108
+ "--pd-font-size-xs": typography.fontSize.xs,
1109
+ "--pd-font-size-sm": typography.fontSize.sm,
1110
+ "--pd-font-size-base": typography.fontSize.base,
1111
+ "--pd-font-size-lg": typography.fontSize.lg,
1112
+ "--pd-font-size-xl": typography.fontSize.xl,
1113
+ "--pd-font-size-2xl": typography.fontSize["2xl"],
1114
+ "--pd-font-size-3xl": typography.fontSize["3xl"],
1115
+ "--pd-font-size-4xl": typography.fontSize["4xl"],
1116
+ "--pd-font-size-5xl": typography.fontSize["5xl"],
1117
+ "--pd-font-weight-normal": typography.fontWeight.normal,
1118
+ "--pd-font-weight-medium": typography.fontWeight.medium,
1119
+ "--pd-font-weight-semibold": typography.fontWeight.semibold,
1120
+ "--pd-font-weight-bold": typography.fontWeight.bold,
1121
+ "--pd-line-height-tight": typography.lineHeight.tight,
1122
+ "--pd-line-height-normal": typography.lineHeight.normal,
1123
+ "--pd-line-height-relaxed": typography.lineHeight.relaxed,
1124
+ // shadcn/ui CSS variable mappings for compatibility
1125
+ "--background": semantic.surface.base.background,
1126
+ "--foreground": semantic.text.body,
1127
+ "--card": semantic.surface.elevated.background,
1128
+ "--card-foreground": semantic.text.body,
1129
+ "--popover": semantic.surface.elevated.background,
1130
+ "--popover-foreground": semantic.text.body,
1131
+ "--primary": semantic.intent.primary.color,
1132
+ "--primary-foreground": colors.white,
1133
+ "--secondary": semantic.intent.neutral.background,
1134
+ "--secondary-foreground": semantic.intent.neutral.text,
1135
+ "--muted": semantic.intent.neutral.background,
1136
+ "--muted-foreground": semantic.text.muted,
1137
+ "--accent": semantic.intent.primary.background,
1138
+ "--accent-foreground": semantic.intent.primary.text,
1139
+ "--destructive": semantic.intent.danger.color,
1140
+ "--destructive-foreground": colors.white,
1141
+ "--border": semantic.intent.neutral.border,
1142
+ "--input": semantic.intent.neutral.border,
1143
+ "--ring": semantic.intent.primary.color,
1144
+ "--radius": radius.md,
1145
+ // New semantic token CSS variables (border, content, background)
1146
+ // Border tokens
1147
+ "--pd-border-primary": border.primary,
1148
+ "--pd-border-secondary": border.secondary,
1149
+ "--pd-border-subtle": border.subtle,
1150
+ "--pd-border-invert": border.invert,
1151
+ "--pd-border-onColor": border.onColor,
1152
+ "--pd-border-blue": border.blue,
1153
+ "--pd-border-blueSubtle": border.blueSubtle,
1154
+ "--pd-border-blueOnHover": border.blueOnHover,
1155
+ "--pd-border-red": border.red,
1156
+ "--pd-border-redSubtle": border.redSubtle,
1157
+ "--pd-border-redOnHover": border.redOnHover,
1158
+ "--pd-border-orange": border.orange,
1159
+ "--pd-border-orangeSubtle": border.orangeSubtle,
1160
+ "--pd-border-orangeOnHover": border.orangeOnHover,
1161
+ "--pd-border-yellow": border.yellow,
1162
+ "--pd-border-yellowSubtle": border.yellowSubtle,
1163
+ "--pd-border-yellowOnHover": border.yellowOnHover,
1164
+ "--pd-border-green": border.green,
1165
+ "--pd-border-greenSubtle": border.greenSubtle,
1166
+ "--pd-border-greenOnHover": border.greenOnHover,
1167
+ // Content tokens
1168
+ "--pd-content-primary": content.primary,
1169
+ "--pd-content-secondary": content.secondary,
1170
+ "--pd-content-subtle": content.subtle,
1171
+ "--pd-content-onColor": content.onColor,
1172
+ "--pd-content-alwaysWhite": content.alwaysWhite,
1173
+ "--pd-content-alwaysBlack": content.alwaysBlack,
1174
+ "--pd-content-onColorInverse": content.onColorInverse,
1175
+ "--pd-content-blue": content.blue,
1176
+ "--pd-content-blueDisabled": content.blueDisabled,
1177
+ "--pd-content-blueOnHover": content.blueOnHover,
1178
+ "--pd-content-green": content.green,
1179
+ "--pd-content-greenDisabled": content.greenDisabled,
1180
+ "--pd-content-greenOnHover": content.greenOnHover,
1181
+ "--pd-content-red": content.red,
1182
+ "--pd-content-redDisabled": content.redDisabled,
1183
+ "--pd-content-redOnHover": content.redOnHover,
1184
+ "--pd-content-orange": content.orange,
1185
+ "--pd-content-orangeDisabled": content.orangeDisabled,
1186
+ "--pd-content-orangeOnHover": content.orangeOnHover,
1187
+ "--pd-content-yellow": content.yellow,
1188
+ "--pd-content-yellowDisabled": content.yellowDisabled,
1189
+ "--pd-content-yellowOnHover": content.yellowOnHover,
1190
+ // Background tokens
1191
+ "--pd-background-base": background.base,
1192
+ "--pd-background-primary": background.primary,
1193
+ "--pd-background-primaryOnHover": background.primaryOnHover,
1194
+ "--pd-background-secondary": background.secondary,
1195
+ "--pd-background-tertiary": background.tertiary,
1196
+ "--pd-background-invert": background.invert,
1197
+ "--pd-background-invertLight": background.invertLight,
1198
+ "--pd-background-green": background.green,
1199
+ "--pd-background-greenOnHover": background.greenOnHover,
1200
+ "--pd-background-red": background.red,
1201
+ "--pd-background-redOnHover": background.redOnHover,
1202
+ "--pd-background-orange": background.orange,
1203
+ "--pd-background-orangeOnHover": background.orangeOnHover,
1204
+ "--pd-background-yellow": background.yellow,
1205
+ "--pd-background-yellowOnHover": background.yellowOnHover,
1206
+ "--pd-background-low": background.low,
1207
+ "--pd-background-lowOnHover": background.lowOnHover,
1208
+ "--pd-background-info": background.info,
1209
+ "--pd-background-infoOnHover": background.infoOnHover
1210
+ };
1211
+ return {
1212
+ name,
1213
+ mode,
1214
+ cssVariables
1215
+ };
1216
+ }
1217
+ var [DEFAULT_ADAPTER2] = ADAPTER_TYPES;
1218
+ var [DEFAULT_THEME2] = THEME_NAMES;
1219
+ var [DEFAULT_MODE2] = THEME_MODES;
1220
+ var ThemeContext = createContext(null);
1221
+ function ThemeProvider({
1222
+ children,
1223
+ adapter = DEFAULT_ADAPTER2,
1224
+ theme: themeName = DEFAULT_THEME2,
1225
+ mode = DEFAULT_MODE2
1226
+ }) {
1227
+ const theme = useMemo(() => createTheme(themeName, mode), [themeName, mode]);
1228
+ useEffect(() => {
1229
+ setDesignSystemConfig({ adapter, theme: themeName, mode });
1230
+ }, [adapter, themeName, mode]);
1231
+ useEffect(() => {
1232
+ const root = document.documentElement;
1233
+ Object.entries(theme.cssVariables).forEach(([key, value]) => {
1234
+ root.style.setProperty(key, value);
1235
+ });
1236
+ return () => {
1237
+ Object.keys(theme.cssVariables).forEach((key) => {
1238
+ root.style.removeProperty(key);
1239
+ });
1240
+ };
1241
+ }, [theme]);
1242
+ const contextValue = useMemo(() => ({
1243
+ config: getDesignSystemConfig(),
1244
+ setConfig: setDesignSystemConfig
1245
+ }), []);
1246
+ return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
1247
+ }
1248
+ function useTheme() {
1249
+ const context = useContext(ThemeContext);
1250
+ if (!context) {
1251
+ throw new Error("useTheme must be used within ThemeProvider");
1252
+ }
1253
+ return context;
1254
+ }
1255
+
1256
+ // src/tokens/index.ts
1257
+ var tokens = {
1258
+ colors: {
1259
+ // Individual color scales
1260
+ neutral,
1261
+ blue,
1262
+ orange,
1263
+ red,
1264
+ green,
1265
+ yellow,
1266
+ // All colors grouped together
1267
+ all: colorPrimitives,
1268
+ // Legacy color names (for backward compatibility)
1269
+ legacy: colors
1270
+ },
1271
+ semantic: {
1272
+ border: borderTokens,
1273
+ content: contentTokens,
1274
+ background: backgroundTokens,
1275
+ // Full semantic tokens object
1276
+ all: semanticTokens
1277
+ },
1278
+ spacing,
1279
+ typography,
1280
+ radius,
1281
+ shadows,
1282
+ zIndex
1283
+ };
1284
+ function extractTextFromChildren(children) {
1285
+ if (typeof children === "string") {
1286
+ return children.trim();
1287
+ }
1288
+ if (typeof children === "number") {
1289
+ return String(children);
1290
+ }
1291
+ if (Array.isArray(children)) {
1292
+ return children.map(extractTextFromChildren).join(" ").trim();
1293
+ }
1294
+ if (React.isValidElement(children) && children.props) {
1295
+ if (children.props.children) {
1296
+ return extractTextFromChildren(children.props.children);
1297
+ }
1298
+ }
1299
+ return "";
1300
+ }
1301
+ function validateAccessibilityProps(props, componentType, options = {}) {
1302
+ if (process.env.NODE_ENV === "production") {
1303
+ return;
1304
+ }
1305
+ const warnings = [];
1306
+ if (componentType === "button" && options.iconOnly && !props["aria-label"] && !props["aria-labelledby"]) {
1307
+ warnings.push(
1308
+ `[pd-design] Icon-only button should have an aria-label or aria-labelledby for accessibility.`
1309
+ );
1310
+ }
1311
+ if ((componentType === "button" || componentType === "link") && !props["aria-label"] && !props["aria-labelledby"] && !extractTextFromChildren(options.children)) {
1312
+ warnings.push(
1313
+ `[pd-design] ${componentType} should have an accessible name (aria-label, aria-labelledby, or text content).`
1314
+ );
1315
+ }
1316
+ if ((componentType === "input" || componentType === "select" || componentType === "textarea") && !props["aria-label"] && !props["aria-labelledby"]) {
1317
+ warnings.push(
1318
+ `[pd-design] ${componentType} should have an accessible label (aria-label or aria-labelledby).`
1319
+ );
1320
+ }
1321
+ if (props.tabIndex !== void 0 && props.tabIndex > 0) {
1322
+ warnings.push(
1323
+ `[pd-design] tabIndex > 0 is not recommended. Use tabIndex={0} for focusable elements or tabIndex={-1} for programmatic focus only.`
1324
+ );
1325
+ }
1326
+ warnings.forEach((warning) => console.warn(warning));
1327
+ }
1328
+
1329
+ export { ADAPTER_TYPES, BUTTON_TYPES, Button, ButtonGroup, COLOR_SCALES, INPUT_TYPES, INTENTS, ORIENTATIONS, SIZES, SURFACE_LEVELS, THEME_MODES, THEME_NAMES, ThemeProvider, VARIANTS, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
1330
+ //# sourceMappingURL=index.js.map
1331
+ //# sourceMappingURL=index.js.map