prime-ui-kit 0.9.1 → 0.9.2

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 (107) hide show
  1. package/README.md +22 -8
  2. package/dist/chunks/{chunk-KCQFOORX.js → chunk-IQELQNMR.js} +1 -1
  3. package/dist/chunks/{chunk-DB2Y3XXA.js → chunk-LXGRKN34.js} +2323 -1500
  4. package/dist/chunks/{chunk-NHOWNIAR.js → chunk-ZEFCDEEQ.js} +790 -536
  5. package/dist/color-picker.js +2 -2
  6. package/dist/components/data-table/DataTable.d.ts +6 -1
  7. package/dist/components/data-table/types.d.ts +5 -0
  8. package/dist/components/dnd/Dnd.d.ts +1 -1
  9. package/dist/components/dnd/dragSession.d.ts +9 -0
  10. package/dist/components/dnd/useDropTarget.d.ts +5 -0
  11. package/dist/components/dnd/useFlipList.d.ts +3 -3
  12. package/dist/components/drawer/Drawer.d.ts +8 -5
  13. package/dist/components/dropdown/Dropdown.d.ts +17 -0
  14. package/dist/components/index.d.ts +5 -1
  15. package/dist/components/kanban/Kanban.d.ts +129 -0
  16. package/dist/components/modal/Modal.d.ts +5 -2
  17. package/dist/components/page-toolbar/PageToolbar.d.ts +53 -0
  18. package/dist/components/segmented-control/SegmentedControl.d.ts +5 -2
  19. package/dist/components/tabs/Tabs.d.ts +5 -2
  20. package/dist/hooks/useEdgeOverflow.d.ts +12 -0
  21. package/dist/hooks/useMediaQuery.d.ts +7 -0
  22. package/dist/hooks/useSwipeDismiss.d.ts +34 -0
  23. package/dist/index.css +2271 -1163
  24. package/dist/index.js +10 -2
  25. package/dist/internal/overlay/FloatingPanel.d.ts +3 -1
  26. package/dist/internal/overlay/useFloatingLayer.d.ts +11 -1
  27. package/dist/internal/touchTarget.d.ts +4 -0
  28. package/dist/layout/app-header/AppHeader.d.ts +110 -0
  29. package/dist/layout/app-shell/AppShell.d.ts +14 -9
  30. package/dist/layout/bottom-nav/BottomNav.d.ts +80 -0
  31. package/dist/layout/index.d.ts +5 -1
  32. package/dist/tokens/primitives.d.ts +4 -0
  33. package/dist/tokens/semantic.d.ts +56 -0
  34. package/dist/tokens/themes/dark.d.ts +4 -0
  35. package/package.json +3 -2
  36. package/src/components/accordion/COMPONENT.md +1 -1
  37. package/src/components/badge/COMPONENT.md +2 -2
  38. package/src/components/banner/COMPONENT.md +1 -1
  39. package/src/components/checkbox/examples/examples.module.css +4 -2
  40. package/src/components/crossfade/COMPONENT.md +1 -1
  41. package/src/components/data-table/COMPONENT.md +19 -6
  42. package/src/components/data-table/examples/columns-visibility.tsx +167 -0
  43. package/src/components/digit-input/COMPONENT.md +10 -10
  44. package/src/components/digit-input/examples/examples.module.css +8 -0
  45. package/src/components/digit-input/examples/in-form.tsx +2 -5
  46. package/src/components/digit-input/examples/sizes.tsx +1 -1
  47. package/src/components/divider/COMPONENT.md +1 -1
  48. package/src/components/dnd/COMPONENT.md +3 -3
  49. package/src/components/drawer/COMPONENT.md +17 -9
  50. package/src/components/drawer/examples/date-sheet.tsx +41 -0
  51. package/src/components/drawer/examples/examples.module.css +5 -0
  52. package/src/components/drawer/examples/placement.tsx +4 -2
  53. package/src/components/dropdown/COMPONENT.md +19 -5
  54. package/src/components/dropdown/examples/checkbox-items.tsx +48 -0
  55. package/src/components/empty-page/COMPONENT.md +1 -1
  56. package/src/components/kanban/COMPONENT.md +181 -0
  57. package/src/components/kanban/examples/controlled.tsx +78 -0
  58. package/src/components/kanban/examples/examples.module.css +31 -0
  59. package/src/components/kanban/examples/limits.tsx +58 -0
  60. package/src/components/kanban/examples/narrow.tsx +76 -0
  61. package/src/components/kanban/examples/overview.tsx +130 -0
  62. package/src/components/kanban/examples/states.tsx +75 -0
  63. package/src/components/kanban/examples/structure.tsx +76 -0
  64. package/src/components/login-form/COMPONENT.md +1 -1
  65. package/src/components/modal/COMPONENT.md +9 -6
  66. package/src/components/notification/COMPONENT.md +2 -2
  67. package/src/components/page-content/COMPONENT.md +1 -1
  68. package/src/components/page-toolbar/COMPONENT.md +142 -0
  69. package/src/components/page-toolbar/examples/examples.module.css +16 -0
  70. package/src/components/page-toolbar/examples/narrow.tsx +103 -0
  71. package/src/components/page-toolbar/examples/overview.tsx +113 -0
  72. package/src/components/page-toolbar/examples/save-changes.tsx +40 -0
  73. package/src/components/page-toolbar/examples/without-search.tsx +60 -0
  74. package/src/components/popover/COMPONENT.md +4 -3
  75. package/src/components/progress-bar/COMPONENT.md +1 -1
  76. package/src/components/progress-circle/COMPONENT.md +1 -1
  77. package/src/components/scroll-container/COMPONENT.md +1 -1
  78. package/src/components/segmented-control/COMPONENT.md +8 -8
  79. package/src/components/segmented-control/examples/full-width.tsx +1 -1
  80. package/src/components/select/COMPONENT.md +2 -1
  81. package/src/components/skeleton/COMPONENT.md +1 -1
  82. package/src/components/smart-filter/COMPONENT.md +2 -0
  83. package/src/components/spinner/COMPONENT.md +1 -1
  84. package/src/components/tabs/COMPONENT.md +11 -8
  85. package/src/components/tabs/examples/closable.tsx +1 -1
  86. package/src/layout/app-header/COMPONENT.md +178 -0
  87. package/src/layout/app-header/examples/breadcrumbs.tsx +36 -0
  88. package/src/layout/app-header/examples/examples.module.css +47 -0
  89. package/src/layout/app-header/examples/in-app-shell.tsx +70 -0
  90. package/src/layout/app-header/examples/narrow.tsx +29 -0
  91. package/src/layout/app-header/examples/overview.tsx +36 -0
  92. package/src/layout/app-shell/COMPONENT.md +27 -21
  93. package/src/layout/app-shell/examples/examples.module.css +15 -0
  94. package/src/layout/app-shell/examples/footer.tsx +59 -0
  95. package/src/layout/app-shell/examples/overview.tsx +19 -8
  96. package/src/layout/bottom-nav/COMPONENT.md +153 -0
  97. package/src/layout/bottom-nav/examples/examples.module.css +39 -0
  98. package/src/layout/bottom-nav/examples/floating.tsx +89 -0
  99. package/src/layout/bottom-nav/examples/icon-only.tsx +41 -0
  100. package/src/layout/bottom-nav/examples/in-app-shell.tsx +64 -0
  101. package/src/layout/bottom-nav/examples/overview.tsx +44 -0
  102. package/src/layout/bottom-nav/examples/router.tsx +31 -0
  103. package/src/layout/bottom-nav/examples/structure.tsx +47 -0
  104. package/src/layout/sidebar/COMPONENT.md +11 -10
  105. package/src/styles/theme-dark.css +3 -0
  106. package/src/styles/theme-light.css +24 -0
  107. package/src/styles/tokens.css +2 -0
package/src/styles/theme-light.css CHANGED
@@ -39,6 +39,19 @@
39
39
  --prime-badge-xs-radius: var(--prime-ref-radius-4);
40
40
  --prime-badge-xs-text-size: var(--prime-ref-font-size-12);
41
41
  --prime-border-width: 1px;
42
+ --prime-bottom-nav-blur: 0.5rem;
43
+ --prime-bottom-nav-floating-inset: var(--prime-ref-space-3);
44
+ --prime-bottom-nav-floating-item-size: 2.75rem;
45
+ --prime-bottom-nav-floating-padding: var(--prime-ref-space-1);
46
+ --prime-bottom-nav-height: 3.25rem;
47
+ --prime-bottom-nav-icon-only-height: var(--prime-ref-space-12);
48
+ --prime-bottom-nav-icon-size: var(--prime-ref-icon-20);
49
+ --prime-bottom-nav-indicator-height: var(--prime-ref-space-5);
50
+ --prime-bottom-nav-indicator-width: var(--prime-ref-space-7);
51
+ --prime-bottom-nav-item-gap: var(--prime-ref-space-1);
52
+ --prime-bottom-nav-label-line-height: var(--prime-ref-font-line-height-12);
53
+ --prime-bottom-nav-label-size: var(--prime-ref-font-size-10);
54
+ --prime-bottom-nav-padding-x: var(--prime-ref-space-2);
42
55
  --prime-card-gap: var(--prime-ref-space-4);
43
56
  --prime-card-padding-l: var(--prime-ref-space-6);
44
57
  --prime-card-padding-m: var(--prime-ref-space-5);
@@ -52,6 +65,9 @@
52
65
  --prime-color-accent-soft-hover: var(--prime-ref-color-cobalt-200);
53
66
  --prime-color-accent-text: var(--prime-ref-color-cobalt-700);
54
67
  --prime-color-bg-canvas: var(--prime-ref-color-gray-50);
68
+ --prime-color-bg-edge-shadow: rgba(17, 19, 24, 0.14);
69
+ --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-0) 58%, transparent);
70
+ --prime-color-bg-glass-edge: rgba(255, 255, 255, 0.85);
55
71
  --prime-color-bg-inverse: var(--prime-ref-color-gray-925);
56
72
  --prime-color-bg-raised: var(--prime-ref-color-gray-0);
57
73
  --prime-color-bg-scrim: rgba(17, 19, 24, 0.44);
@@ -194,6 +210,8 @@
194
210
  --prime-control-s-radius: var(--prime-ref-radius-8);
195
211
  --prime-control-s-text-size: var(--prime-ref-font-size-13);
196
212
  --prime-control-s-track: 0.3125rem;
213
+ --prime-control-touch-target: 2.75rem;
214
+ --prime-control-touch-text-size: var(--prime-ref-font-size-16);
197
215
  --prime-control-xl-choice: var(--prime-ref-icon-24);
198
216
  --prime-control-xl-field-padding-x: var(--prime-ref-space-4);
199
217
  --prime-control-xl-gap: var(--prime-ref-space-3);
@@ -295,6 +313,12 @@
295
313
  --prime-shadow-overlay: 0 0 0 1px rgba(17, 19, 24, 0.04), 0 12px 32px -8px rgba(17, 19, 24, 0.18);
296
314
  --prime-shadow-raised: 0 1px 2px rgba(17, 19, 24, 0.04);
297
315
  --prime-shadow-thumb: 0 0 0 1px rgba(17, 19, 24, 0.08), 0 1px 3px rgba(17, 19, 24, 0.16);
316
+ --prime-sheet-handle-area: var(--prime-ref-space-5);
317
+ --prime-sheet-handle-height: var(--prime-ref-space-1);
318
+ --prime-sheet-handle-width: 2.25rem;
319
+ --prime-sheet-min-width: 35rem;
320
+ --prime-sheet-radius: var(--prime-ref-radius-16);
321
+ --prime-sheet-top-gap: var(--prime-ref-space-10);
298
322
  --prime-space-0: var(--prime-ref-space-0);
299
323
  --prime-space-1: var(--prime-ref-space-1);
300
324
  --prime-space-10: var(--prime-ref-space-10);
package/src/styles/tokens.css CHANGED
@@ -82,6 +82,7 @@
82
82
  --prime-ref-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
83
83
  --prime-ref-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
84
84
  --prime-ref-font-family-sans: "Golos Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
85
+ --prime-ref-font-line-height-12: 0.75rem;
85
86
  --prime-ref-font-line-height-16: 1rem;
86
87
  --prime-ref-font-line-height-20: 1.25rem;
87
88
  --prime-ref-font-line-height-24: 1.5rem;
@@ -91,6 +92,7 @@
91
92
  --prime-ref-font-line-height-44: 2.75rem;
92
93
  --prime-ref-font-line-height-56: 3.5rem;
93
94
  --prime-ref-font-line-height-68: 4.25rem;
95
+ --prime-ref-font-size-10: 0.625rem;
94
96
  --prime-ref-font-size-12: 0.75rem;
95
97
  --prime-ref-font-size-13: 0.8125rem;
96
98
  --prime-ref-font-size-14: 0.875rem;