prime-ui-kit 0.9.2 → 0.9.3

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 (96) hide show
  1. package/README.md +9 -5
  2. package/dist/chunks/{chunk-ZEFCDEEQ.js → chunk-6JTZOA5I.js} +878 -331
  3. package/dist/chunks/{chunk-LXGRKN34.js → chunk-OAE4IQX2.js} +769 -479
  4. package/dist/chunks/{chunk-IQELQNMR.js → chunk-U5SR2LZR.js} +17 -4
  5. package/dist/color-picker.js +2 -2
  6. package/dist/components/button/Button.d.ts +19 -2
  7. package/dist/components/card/Card.d.ts +1 -1
  8. package/dist/components/code-block/CodeBlock.d.ts +1 -1
  9. package/dist/components/color-picker/ColorPicker.d.ts +1 -1
  10. package/dist/components/data-table/Row.d.ts +3 -1
  11. package/dist/components/data-table/rows.d.ts +4 -0
  12. package/dist/components/digit-input/DigitInput.d.ts +6 -1
  13. package/dist/components/index.d.ts +4 -1
  14. package/dist/components/input/Input.d.ts +16 -1
  15. package/dist/components/input/passwordStrength.d.ts +9 -0
  16. package/dist/components/progress-bar/ProgressBar.d.ts +16 -1
  17. package/dist/components/sparkline/Sparkline.d.ts +26 -0
  18. package/dist/hooks/useEdgeOverflow.d.ts +4 -0
  19. package/dist/icons/registry.d.ts +2 -0
  20. package/dist/index.css +830 -267
  21. package/dist/index.d.ts +1 -0
  22. package/dist/index.js +9 -3
  23. package/dist/internal/CheckMark.d.ts +12 -0
  24. package/dist/internal/MorphText.d.ts +12 -0
  25. package/dist/internal/RollingNumber.d.ts +14 -0
  26. package/dist/internal/surfaceDepth.d.ts +25 -0
  27. package/dist/internal/swatch.d.ts +4 -1
  28. package/dist/layout/app-shell/AppShell.d.ts +2 -2
  29. package/dist/motion/celebrate.d.ts +18 -0
  30. package/dist/tokens/layers.d.ts +37 -0
  31. package/dist/tokens/naming.d.ts +1 -1
  32. package/dist/tokens/semantic.d.ts +66 -56
  33. package/dist/tokens/themes/dark.d.ts +6 -14
  34. package/package.json +1 -1
  35. package/src/components/accordion/COMPONENT.md +4 -4
  36. package/src/components/avatar/COMPONENT.md +1 -1
  37. package/src/components/button/COMPONENT.md +26 -5
  38. package/src/components/button/examples/download.tsx +45 -0
  39. package/src/components/button/examples/hold-to-confirm.tsx +23 -0
  40. package/src/components/button/examples/label-morph.tsx +33 -0
  41. package/src/components/card/COMPONENT.md +4 -2
  42. package/src/components/card/examples/narrow.tsx +2 -2
  43. package/src/components/card/examples/panel-chart.tsx +1 -1
  44. package/src/components/card/examples/variants.tsx +1 -1
  45. package/src/components/checkbox/examples/examples.module.css +1 -1
  46. package/src/components/code-block/COMPONENT.md +6 -6
  47. package/src/components/code-block/examples/overview.tsx +1 -1
  48. package/src/components/code-block/examples/variants.tsx +1 -1
  49. package/src/components/color-picker/COMPONENT.md +1 -1
  50. package/src/components/color-swatches/COMPONENT.md +5 -5
  51. package/src/components/command-menu/COMPONENT.md +1 -1
  52. package/src/components/crossfade/examples/overview.tsx +3 -3
  53. package/src/components/data-table/COMPONENT.md +5 -4
  54. package/src/components/digit-input/COMPONENT.md +5 -3
  55. package/src/components/digit-input/examples/on-complete.tsx +7 -6
  56. package/src/components/dnd/COMPONENT.md +1 -1
  57. package/src/components/dnd/examples/examples.module.css +4 -4
  58. package/src/components/dropdown/COMPONENT.md +1 -1
  59. package/src/components/dropdown/examples/examples.module.css +1 -1
  60. package/src/components/empty-page/examples/examples.module.css +1 -1
  61. package/src/components/example-frame/COMPONENT.md +1 -1
  62. package/src/components/input/COMPONENT.md +10 -1
  63. package/src/components/input/examples/password-strength.tsx +12 -0
  64. package/src/components/kanban/COMPONENT.md +4 -4
  65. package/src/components/login-form/COMPONENT.md +4 -4
  66. package/src/components/login-form/examples/register.tsx +2 -2
  67. package/src/components/login-form/examples/reset-password.tsx +2 -2
  68. package/src/components/modal/COMPONENT.md +2 -2
  69. package/src/components/modal/examples/examples.module.css +2 -2
  70. package/src/components/page-content/examples/examples.module.css +1 -1
  71. package/src/components/popover/COMPONENT.md +1 -1
  72. package/src/components/progress-bar/COMPONENT.md +5 -1
  73. package/src/components/progress-bar/examples/examples.module.css +7 -0
  74. package/src/components/progress-bar/examples/milestone.tsx +43 -0
  75. package/src/components/progress-bar/examples/steps.tsx +35 -0
  76. package/src/components/skeleton/examples/with-crossfade.tsx +3 -3
  77. package/src/components/sparkline/COMPONENT.md +98 -0
  78. package/src/components/sparkline/examples/examples.module.css +13 -0
  79. package/src/components/sparkline/examples/overview.tsx +27 -0
  80. package/src/components/sparkline/examples/period.tsx +46 -0
  81. package/src/components/tabs/COMPONENT.md +15 -16
  82. package/src/components/tabs/examples/examples.module.css +14 -0
  83. package/src/components/tabs/examples/orientation.tsx +87 -33
  84. package/src/components/tooltip/COMPONENT.md +8 -6
  85. package/src/components/tooltip/examples/examples.module.css +2 -2
  86. package/src/layout/app-header/COMPONENT.md +1 -1
  87. package/src/layout/app-header/examples/examples.module.css +4 -4
  88. package/src/layout/app-shell/COMPONENT.md +8 -8
  89. package/src/layout/app-shell/examples/examples.module.css +3 -3
  90. package/src/layout/bottom-nav/COMPONENT.md +1 -1
  91. package/src/layout/bottom-nav/examples/examples.module.css +1 -1
  92. package/src/layout/sidebar/COMPONENT.md +4 -4
  93. package/src/layout/sidebar/examples/examples.module.css +5 -5
  94. package/src/styles/globals.css +125 -2
  95. package/src/styles/theme-dark.css +36 -13
  96. package/src/styles/theme-light.css +60 -16
package/src/styles/theme-light.css CHANGED
@@ -57,28 +57,21 @@
57
57
  --prime-card-padding-m: var(--prime-ref-space-5);
58
58
  --prime-card-padding-s: var(--prime-ref-space-4);
59
59
  --prime-card-radius: var(--prime-ref-radius-12);
60
- --prime-card-shadow: var(--prime-shadow-raised);
61
60
  --prime-color-accent-default: var(--prime-ref-color-cobalt-700);
62
61
  --prime-color-accent-fg: var(--prime-ref-color-white);
63
62
  --prime-color-accent-hover: var(--prime-ref-color-cobalt-800);
64
63
  --prime-color-accent-soft: var(--prime-ref-color-cobalt-100);
65
64
  --prime-color-accent-soft-hover: var(--prime-ref-color-cobalt-200);
66
65
  --prime-color-accent-text: var(--prime-ref-color-cobalt-700);
67
- --prime-color-bg-canvas: var(--prime-ref-color-gray-50);
68
66
  --prime-color-bg-edge-shadow: rgba(17, 19, 24, 0.14);
69
67
  --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-0) 58%, transparent);
70
68
  --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.85);
71
69
  --prime-color-bg-inverse: var(--prime-ref-color-gray-925);
72
- --prime-color-bg-raised: var(--prime-ref-color-gray-0);
73
70
  --prime-color-bg-scrim: rgba(17, 19, 24, 0.44);
74
- --prime-color-bg-sunken: var(--prime-ref-color-gray-75);
75
- --prime-color-bg-surface: var(--prime-ref-color-gray-0);
76
71
  --prime-color-border-control: transparent;
77
72
  --prime-color-border-default: var(--prime-ref-color-gray-150);
78
73
  --prime-color-border-faint: var(--prime-ref-color-gray-75);
79
74
  --prime-color-border-subtle: var(--prime-ref-color-gray-100);
80
- --prime-color-card-bg: var(--prime-color-bg-surface);
81
- --prime-color-control-selected: var(--prime-ref-color-gray-0);
82
75
  --prime-color-control-thumb: var(--prime-ref-color-white);
83
76
  --prime-color-danger-border: var(--prime-ref-color-red-500);
84
77
  --prime-color-danger-default: var(--prime-ref-color-red-600);
@@ -86,14 +79,8 @@
86
79
  --prime-color-danger-hover: var(--prime-ref-color-red-700);
87
80
  --prime-color-danger-soft: var(--prime-ref-color-red-100);
88
81
  --prime-color-danger-text: var(--prime-ref-color-red-700);
89
- --prime-color-field-bg: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
90
82
  --prime-color-field-bg-disabled: color-mix(in srgb, var(--prime-ref-color-gray-925) 4%, transparent);
91
- --prime-color-field-bg-focus: var(--prime-ref-color-gray-0);
92
- --prime-color-field-bg-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 12%, transparent);
93
- --prime-color-field-bg-surface: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
94
83
  --prime-color-fill-faint: rgba(17, 19, 24, 0.04);
95
- --prime-color-fill-muted: color-mix(in srgb, var(--prime-ref-color-gray-925) 7%, transparent);
96
- --prime-color-fill-muted-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 10%, transparent);
97
84
  --prime-color-fill-strong: color-mix(in srgb, var(--prime-ref-color-gray-925) 15%, transparent);
98
85
  --prime-color-fill-strong-hover: color-mix(in srgb, var(--prime-ref-color-gray-925) 22%, transparent);
99
86
  --prime-color-fill-subtle: rgba(17, 19, 24, 0.04);
@@ -103,6 +90,38 @@
103
90
  --prime-color-info-fg: var(--prime-ref-color-white);
104
91
  --prime-color-info-soft: var(--prime-ref-color-sky-100);
105
92
  --prime-color-info-text: var(--prime-ref-color-sky-800);
93
+ --prime-color-layer-0-bg: #f3f4f6;
94
+ --prime-color-layer-0-fill: #e9eaec;
95
+ --prime-color-layer-0-fill-hover: #dfe0e2;
96
+ --prime-color-layer-0-selected: #ffffff;
97
+ --prime-color-layer-1-bg: #ffffff;
98
+ --prime-color-layer-1-fill: #f4f5f7;
99
+ --prime-color-layer-1-fill-hover: #eaebed;
100
+ --prime-color-layer-1-selected: #ffffff;
101
+ --prime-color-layer-2-bg: #f4f5f7;
102
+ --prime-color-layer-2-fill: #eaebed;
103
+ --prime-color-layer-2-fill-hover: #e0e1e3;
104
+ --prime-color-layer-2-selected: #ffffff;
105
+ --prime-color-layer-3-bg: #ffffff;
106
+ --prime-color-layer-3-fill: #f4f5f7;
107
+ --prime-color-layer-3-fill-hover: #eaebed;
108
+ --prime-color-layer-3-selected: #ffffff;
109
+ --prime-color-layer-4-bg: #f4f5f7;
110
+ --prime-color-layer-4-fill: #eaebed;
111
+ --prime-color-layer-4-fill-hover: #e0e1e3;
112
+ --prime-color-layer-4-selected: #ffffff;
113
+ --prime-color-layer-floating-bg: #ffffff;
114
+ --prime-color-layer-floating-fill: #f4f5f7;
115
+ --prime-color-layer-floating-fill-hover: #eaebed;
116
+ --prime-color-layer-floating-selected: #ffffff;
117
+ --prime-color-layer-floating1-bg: #f4f5f7;
118
+ --prime-color-layer-floating1-fill: #eaebed;
119
+ --prime-color-layer-floating1-fill-hover: #e0e1e3;
120
+ --prime-color-layer-floating1-selected: #ffffff;
121
+ --prime-color-layer-floating2-bg: #ffffff;
122
+ --prime-color-layer-floating2-fill: #f4f5f7;
123
+ --prime-color-layer-floating2-fill-hover: #eaebed;
124
+ --prime-color-layer-floating2-selected: #ffffff;
106
125
  --prime-color-palette-blue-soft: var(--prime-ref-color-cobalt-100);
107
126
  --prime-color-palette-blue-solid: var(--prime-ref-color-cobalt-700);
108
127
  --prime-color-palette-blue-solid-fg: var(--prime-ref-color-white);
@@ -154,6 +173,8 @@
154
173
  --prime-color-text-primary: var(--prime-ref-color-gray-925);
155
174
  --prime-color-text-secondary: var(--prime-ref-color-gray-700);
156
175
  --prime-color-tooltip-bg: var(--prime-ref-color-gray-925);
176
+ --prime-color-tooltip-fill: rgba(255, 255, 255, 0.14);
177
+ --prime-color-tooltip-muted: var(--prime-ref-color-gray-300);
157
178
  --prime-color-tooltip-text: var(--prime-ref-color-gray-0);
158
179
  --prime-color-warning-default: var(--prime-ref-color-orange-700);
159
180
  --prime-color-warning-fg: var(--prime-ref-color-white);
@@ -283,6 +304,7 @@
283
304
  --prime-modal-width-m: 35rem;
284
305
  --prime-modal-width-s: 27.5rem;
285
306
  --prime-modal-width-xl: 60rem;
307
+ --prime-motion-blur: 2px;
286
308
  --prime-motion-duration-base: var(--prime-ref-duration-380);
287
309
  --prime-motion-duration-fast: var(--prime-ref-duration-230);
288
310
  --prime-motion-duration-slow: var(--prime-ref-duration-570);
@@ -421,11 +443,33 @@
421
443
  --prime-thumbnail-xs-radius: var(--prime-ref-radius-4);
422
444
  --prime-tooltip-arrow-height: 0.3125rem;
423
445
  --prime-tooltip-arrow-width: 0.625rem;
446
+ --prime-tooltip-l-line-height: var(--prime-ref-font-line-height-20);
447
+ --prime-tooltip-l-padding-x: var(--prime-ref-space-3);
448
+ --prime-tooltip-l-padding-y: var(--prime-ref-space-2);
449
+ --prime-tooltip-l-radius: var(--prime-ref-radius-8);
450
+ --prime-tooltip-l-text-size: var(--prime-ref-font-size-14);
451
+ --prime-tooltip-m-line-height: var(--prime-ref-font-line-height-20);
452
+ --prime-tooltip-m-padding-x: 0.625rem;
453
+ --prime-tooltip-m-padding-y: 0.375rem;
454
+ --prime-tooltip-m-radius: var(--prime-ref-radius-6);
455
+ --prime-tooltip-m-text-size: var(--prime-ref-font-size-13);
424
456
  --prime-tooltip-max-width: 17.5rem;
425
457
  --prime-tooltip-offset: var(--prime-ref-space-2);
426
- --prime-tooltip-padding-x: var(--prime-ref-space-2);
427
- --prime-tooltip-padding-y: var(--prime-ref-space-1);
428
- --prime-tooltip-radius: var(--prime-ref-radius-6);
458
+ --prime-tooltip-s-line-height: var(--prime-ref-font-line-height-16);
459
+ --prime-tooltip-s-padding-x: var(--prime-ref-space-2);
460
+ --prime-tooltip-s-padding-y: 0.375rem;
461
+ --prime-tooltip-s-radius: var(--prime-ref-radius-6);
462
+ --prime-tooltip-s-text-size: var(--prime-ref-font-size-12);
463
+ --prime-tooltip-xl-line-height: var(--prime-ref-font-line-height-24);
464
+ --prime-tooltip-xl-padding-x: var(--prime-ref-space-4);
465
+ --prime-tooltip-xl-padding-y: var(--prime-ref-space-2);
466
+ --prime-tooltip-xl-radius: var(--prime-ref-radius-8);
467
+ --prime-tooltip-xl-text-size: var(--prime-ref-font-size-16);
468
+ --prime-tooltip-xs-line-height: var(--prime-ref-font-line-height-16);
469
+ --prime-tooltip-xs-padding-x: 0.375rem;
470
+ --prime-tooltip-xs-padding-y: var(--prime-ref-space-1);
471
+ --prime-tooltip-xs-radius: var(--prime-ref-radius-4);
472
+ --prime-tooltip-xs-text-size: var(--prime-ref-font-size-12);
429
473
  --prime-z-overlay: var(--prime-ref-z-index-overlay);
430
474
  --prime-z-sticky: var(--prime-ref-z-index-sticky);
431
475
  --prime-z-toast: var(--prime-ref-z-index-toast);