@sovereignfs/ui 0.23.0 → 0.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/dist/Button.module.css +75 -8
  2. package/dist/Calendar.module.css +126 -0
  3. package/dist/Card.module.css +4 -2
  4. package/dist/Checkbox.module.css +14 -2
  5. package/dist/CodeTextarea.module.css +53 -0
  6. package/dist/ConfirmDialog.module.css +109 -0
  7. package/dist/DatePicker.module.css +57 -0
  8. package/dist/Dialog.module.css +73 -46
  9. package/dist/DragHandleRow.module.css +9 -3
  10. package/dist/Drawer.module.css +61 -0
  11. package/dist/Icon.module.css +5 -0
  12. package/dist/Menu.module.css +82 -0
  13. package/dist/NavTabs.module.css +4 -2
  14. package/dist/OverlayHeader.module.css +98 -0
  15. package/dist/Popover.module.css +31 -1
  16. package/dist/SegmentedControl.module.css +4 -2
  17. package/dist/Sheet.module.css +55 -0
  18. package/dist/SplitPane.module.css +85 -0
  19. package/dist/StatusBadge.module.css +59 -0
  20. package/dist/SystemBanner.module.css +4 -2
  21. package/dist/Tabs.module.css +4 -2
  22. package/dist/TagInput.module.css +141 -0
  23. package/dist/Toast.module.css +4 -2
  24. package/dist/Tooltip.module.css +6 -1
  25. package/dist/index.d.ts +493 -17
  26. package/dist/index.js +1390 -209
  27. package/dist/tokens/primitives.css +19 -0
  28. package/dist/tokens/semantic.css +13 -0
  29. package/package.json +1 -1
  30. package/src/__tests__/motion.test.tsx +105 -0
  31. package/src/components/Button/Button.module.css +75 -8
  32. package/src/components/Button/Button.stories.tsx +6 -0
  33. package/src/components/Button/Button.tsx +17 -1
  34. package/src/components/Button/__tests__/Button.test.tsx +19 -0
  35. package/src/components/Calendar/Calendar.module.css +126 -0
  36. package/src/components/Calendar/Calendar.tsx +213 -0
  37. package/src/components/Calendar/__tests__/Calendar.test.tsx +98 -0
  38. package/src/components/Calendar/dateUtils.ts +97 -0
  39. package/src/components/Card/Card.module.css +4 -2
  40. package/src/components/Checkbox/Checkbox.module.css +14 -2
  41. package/src/components/Checkbox/Checkbox.tsx +22 -12
  42. package/src/components/CodeTextarea/CodeTextarea.module.css +53 -0
  43. package/src/components/CodeTextarea/CodeTextarea.stories.tsx +77 -0
  44. package/src/components/CodeTextarea/CodeTextarea.tsx +36 -0
  45. package/src/components/ConfirmDialog/ConfirmDialog.module.css +109 -0
  46. package/src/components/ConfirmDialog/ConfirmDialog.tsx +124 -0
  47. package/src/components/ConfirmDialog/__tests__/ConfirmDialog.test.tsx +146 -0
  48. package/src/components/DatePicker/DatePicker.module.css +57 -0
  49. package/src/components/DatePicker/DatePicker.tsx +103 -0
  50. package/src/components/DatePicker/__tests__/DatePicker.test.tsx +89 -0
  51. package/src/components/Dialog/Dialog.module.css +73 -46
  52. package/src/components/Dialog/Dialog.stories.tsx +51 -1
  53. package/src/components/Dialog/Dialog.tsx +86 -22
  54. package/src/components/Dialog/__tests__/Dialog.test.tsx +67 -3
  55. package/src/components/DragHandleRow/DragHandleRow.module.css +9 -3
  56. package/src/components/Drawer/Drawer.module.css +61 -0
  57. package/src/components/Drawer/Drawer.tsx +117 -13
  58. package/src/components/Drawer/__tests__/Drawer.test.tsx +123 -2
  59. package/src/components/Icon/Icon.module.css +5 -0
  60. package/src/components/Icon/Icon.stories.tsx +4 -3
  61. package/src/components/Icon/Icon.tsx +1 -1
  62. package/src/components/Icon/icons/calendar.tsx +23 -0
  63. package/src/components/Icon/icons/ellipsis-vertical.tsx +22 -0
  64. package/src/components/Icon/icons/index.ts +8 -4
  65. package/src/components/Icon/icons/sliders-horizontal.tsx +9 -9
  66. package/src/components/Menu/Menu.module.css +82 -0
  67. package/src/components/Menu/Menu.tsx +137 -0
  68. package/src/components/Menu/__tests__/Menu.test.tsx +197 -0
  69. package/src/components/NavTabs/NavTabs.module.css +4 -2
  70. package/src/components/OverlayHeader/OverlayHeader.module.css +98 -0
  71. package/src/components/OverlayHeader/OverlayHeader.tsx +62 -0
  72. package/src/components/OverlayHeader/__tests__/OverlayHeader.test.tsx +51 -0
  73. package/src/components/Popover/Popover.module.css +31 -1
  74. package/src/components/Popover/Popover.stories.tsx +126 -1
  75. package/src/components/Popover/Popover.tsx +140 -7
  76. package/src/components/SegmentedControl/SegmentedControl.module.css +4 -2
  77. package/src/components/Sheet/Sheet.module.css +55 -0
  78. package/src/components/Sheet/Sheet.tsx +151 -0
  79. package/src/components/Sheet/__tests__/Sheet.test.tsx +99 -0
  80. package/src/components/SplitPane/SplitPane.module.css +85 -0
  81. package/src/components/SplitPane/SplitPane.stories.tsx +160 -0
  82. package/src/components/SplitPane/SplitPane.tsx +149 -0
  83. package/src/components/SplitPane/__tests__/SplitPane.test.tsx +51 -0
  84. package/src/components/StatusBadge/StatusBadge.module.css +59 -0
  85. package/src/components/StatusBadge/StatusBadge.stories.tsx +74 -0
  86. package/src/components/StatusBadge/StatusBadge.tsx +65 -0
  87. package/src/components/SystemBanner/SystemBanner.module.css +4 -2
  88. package/src/components/Tabs/Tabs.module.css +4 -2
  89. package/src/components/TagInput/TagInput.module.css +141 -0
  90. package/src/components/TagInput/TagInput.stories.tsx +109 -0
  91. package/src/components/TagInput/TagInput.tsx +174 -0
  92. package/src/components/TagInput/__tests__/TagInput.test.tsx +69 -0
  93. package/src/components/Toast/Toast.module.css +4 -2
  94. package/src/components/Tooltip/Tooltip.module.css +6 -1
  95. package/src/hooks/__tests__/useDoubleTap.test.tsx +117 -0
  96. package/src/hooks/__tests__/useIsMobile.test.tsx +80 -0
  97. package/src/hooks/__tests__/useLongPress.test.tsx +158 -0
  98. package/src/hooks/index.ts +4 -0
  99. package/src/hooks/useDoubleTap.ts +91 -0
  100. package/src/hooks/useIsMobile.ts +33 -0
  101. package/src/hooks/useLongPress.ts +185 -0
  102. package/src/index.ts +30 -1
  103. package/src/motion.ts +78 -0
  104. package/src/stories/DesignSystemOverview.stories.tsx +292 -4
  105. package/src/stories/InteractionHooks.stories.tsx +388 -0
  106. package/src/stories/TokenGallery.stories.tsx +85 -1
  107. package/src/tokens/primitives.css +19 -0
  108. package/src/tokens/semantic.css +13 -0
  109. package/src/components/Icon/icons/terminal.tsx +0 -19
package/dist/TagInput.module.css ADDED
@@ -0,0 +1,141 @@
1
+ .wrapper {
2
+ display: flex;
3
+ width: 100%;
4
+ flex-direction: column;
5
+ gap: var(--sv-space-1);
6
+ }
7
+
8
+ .control {
9
+ display: flex;
10
+ min-height: 40px;
11
+ width: 100%;
12
+ align-items: center;
13
+ gap: var(--sv-space-1);
14
+ flex-wrap: wrap;
15
+ padding: 5px var(--sv-space-2);
16
+ color: var(--sv-color-text-primary);
17
+ background: var(--sv-color-surface);
18
+ border: 1px solid var(--sv-color-border-strong);
19
+ border-radius: var(--sv-radius-md);
20
+ transition:
21
+ border-color 0.15s ease,
22
+ box-shadow 0.15s ease;
23
+ }
24
+
25
+ .control:focus-within {
26
+ border-color: var(--sv-color-accent);
27
+ box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
28
+ }
29
+
30
+ .invalid {
31
+ border-color: var(--sv-color-error-border);
32
+ }
33
+
34
+ .invalid:focus-within {
35
+ border-color: var(--sv-color-error-border);
36
+ box-shadow: 0 0 0 2px var(--sv-color-error-border);
37
+ }
38
+
39
+ .disabled {
40
+ opacity: 0.5;
41
+ cursor: not-allowed;
42
+ }
43
+
44
+ .tag {
45
+ display: inline-flex;
46
+ max-width: 100%;
47
+ min-height: 28px;
48
+ align-items: center;
49
+ gap: var(--sv-space-1);
50
+ padding-inline: var(--sv-space-2) 2px;
51
+ color: var(--sv-color-text-primary);
52
+ background: var(--sv-color-surface-sunken);
53
+ border: 1px solid var(--sv-color-border);
54
+ border-radius: var(--sv-radius-full);
55
+ font-family: var(--sv-font-family);
56
+ font-size: var(--sv-font-size-xs);
57
+ font-weight: var(--sv-font-weight-medium);
58
+ }
59
+
60
+ .tagLabel {
61
+ min-width: 0;
62
+ overflow: hidden;
63
+ text-overflow: ellipsis;
64
+ white-space: nowrap;
65
+ }
66
+
67
+ .removeButton {
68
+ display: inline-flex;
69
+ width: 22px;
70
+ height: 22px;
71
+ align-items: center;
72
+ justify-content: center;
73
+ padding: 0;
74
+ color: var(--sv-color-text-muted);
75
+ background: transparent;
76
+ border: 0;
77
+ border-radius: var(--sv-radius-full);
78
+ cursor: pointer;
79
+ font: inherit;
80
+ line-height: 1;
81
+ }
82
+
83
+ @media (hover: hover) {
84
+ .removeButton:hover:not(:disabled) {
85
+ color: var(--sv-color-text-primary);
86
+ background: var(--sv-color-surface);
87
+ }
88
+ }
89
+
90
+ .removeButton:focus-visible {
91
+ outline: 2px solid var(--sv-color-focus-ring);
92
+ outline-offset: 1px;
93
+ }
94
+
95
+ .removeButton:disabled {
96
+ cursor: not-allowed;
97
+ }
98
+
99
+ .input {
100
+ min-width: 120px;
101
+ flex: 1 1 140px;
102
+ height: 28px;
103
+ padding: 0 var(--sv-space-1);
104
+ color: var(--sv-color-text-primary);
105
+ background: transparent;
106
+ border: 0;
107
+ outline: 0;
108
+ font-family: var(--sv-font-family);
109
+ font-size: var(--sv-font-size-sm);
110
+ line-height: 1.5;
111
+ }
112
+
113
+ .input::placeholder {
114
+ color: var(--sv-color-text-muted);
115
+ }
116
+
117
+ .input:disabled {
118
+ cursor: not-allowed;
119
+ }
120
+
121
+ .hint,
122
+ .error {
123
+ margin: 0;
124
+ font-family: var(--sv-font-family);
125
+ font-size: var(--sv-font-size-caption);
126
+ line-height: 1.4;
127
+ }
128
+
129
+ .hint {
130
+ color: var(--sv-color-text-muted);
131
+ }
132
+
133
+ .error {
134
+ color: var(--sv-color-error-text);
135
+ }
136
+
137
+ @media (pointer: coarse) {
138
+ .input {
139
+ font-size: var(--sv-font-size-md);
140
+ }
141
+ }
package/dist/Toast.module.css CHANGED
@@ -96,8 +96,10 @@
96
96
  font-size: var(--sv-font-size-md);
97
97
  }
98
98
 
99
- .close:hover {
100
- color: var(--sv-color-text-primary);
99
+ @media (hover: hover) {
100
+ .close:hover {
101
+ color: var(--sv-color-text-primary);
102
+ }
101
103
  }
102
104
 
103
105
  @keyframes toastIn {
package/dist/Tooltip.module.css CHANGED
@@ -20,7 +20,12 @@
20
20
  transition: opacity 0.1s ease;
21
21
  }
22
22
 
23
- .wrapper:hover .tip,
23
+ @media (hover: hover) {
24
+ .wrapper:hover .tip {
25
+ opacity: 1;
26
+ }
27
+ }
28
+
24
29
  .wrapper:focus-within .tip {
25
30
  opacity: 1;
26
31
  }