@fibery/ui-kit 1.40.4 → 1.42.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 (143) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/eslint.config.mjs +16 -0
  3. package/package.json +10 -9
  4. package/src/a11y-color.test.ts +5 -24
  5. package/src/actions-menu/actions-menu-item.tsx +6 -9
  6. package/src/actions-menu/context-actions-menu.tsx +8 -3
  7. package/src/ai/model.tsx +0 -1
  8. package/src/ai/temperature.tsx +0 -1
  9. package/src/animated-height-container.tsx +3 -3
  10. package/src/antd/index.tsx +3 -0
  11. package/src/antd/input.tsx +0 -1
  12. package/src/antd/styles.ts +9 -9
  13. package/src/app-icon-with-fallback.tsx +5 -5
  14. package/src/app-icon-wrapper.tsx +2 -3
  15. package/src/app-icon.tsx +3 -3
  16. package/src/avatar.tsx +3 -3
  17. package/src/button/base-button.tsx +0 -1
  18. package/src/button/make-button-colors.ts +2 -2
  19. package/src/checkbox.tsx +1 -1
  20. package/src/collapsible-section.tsx +11 -1
  21. package/src/color-utils.test.ts +15 -25
  22. package/src/color-utils.ts +43 -8
  23. package/src/command-menu/index.tsx +1 -0
  24. package/src/context-menu/index.tsx +5 -5
  25. package/src/date-picker/contexts.ts +2 -2
  26. package/src/date-picker/date-range-picker-popup-content.tsx +1 -2
  27. package/src/date-picker/date-range-picker.tsx +29 -31
  28. package/src/date-picker/single-date-picker-popup-content.tsx +1 -2
  29. package/src/date-picker/single-date-picker.tsx +149 -124
  30. package/src/date-picker/types.ts +4 -4
  31. package/src/day-select/iso-week-day-select.tsx +2 -2
  32. package/src/day-select/week-day-select.tsx +2 -2
  33. package/src/delayed.tsx +0 -1
  34. package/src/design-system/alpha.test.ts +59 -0
  35. package/src/design-system/alpha.ts +41 -0
  36. package/src/design-system/animation.ts +10 -0
  37. package/src/design-system/colors-css.test.ts +39 -0
  38. package/src/design-system/colors-css.ts +25 -0
  39. package/src/design-system/colors-js.test.ts +232 -0
  40. package/src/design-system/colors-js.ts +107 -0
  41. package/src/design-system/colors.test.ts +74 -0
  42. package/src/{design-system.colors.ts → design-system/colors.ts} +133 -134
  43. package/src/design-system/date.ts +3 -0
  44. package/src/design-system/layout.ts +106 -0
  45. package/src/design-system/theme.test.ts +94 -0
  46. package/src/design-system/theme.ts +93 -0
  47. package/src/design-system/typography.ts +179 -0
  48. package/src/design-system/vars.test.ts +1679 -0
  49. package/src/design-system/vars.ts +52 -0
  50. package/src/design-system.test.ts +46 -303
  51. package/src/design-system.ts +25 -545
  52. package/src/dropdown-menu/index.tsx +5 -5
  53. package/src/emoji-picker/icon-emoji-picker.tsx +1 -1
  54. package/src/fibermoji-placeholder.tsx +3 -3
  55. package/src/field-container.tsx +11 -2
  56. package/src/file-item/file-icon.tsx +3 -3
  57. package/src/file-item-2.tsx +4 -10
  58. package/src/file-item.tsx +0 -1
  59. package/src/icons/ast/ChatBubble.ts +8 -0
  60. package/src/icons/ast/ChatFloat.ts +8 -0
  61. package/src/icons/ast/ChatSidebar.ts +8 -0
  62. package/src/icons/ast/FileOther.ts +8 -0
  63. package/src/icons/ast/NoBorder.ts +8 -0
  64. package/src/icons/ast/NoFill.ts +8 -0
  65. package/src/icons/ast/index.tsx +6 -0
  66. package/src/icons/react/ChatBubble.tsx +13 -0
  67. package/src/icons/react/ChatFloat.tsx +13 -0
  68. package/src/icons/react/ChatSidebar.tsx +13 -0
  69. package/src/icons/react/FileOther.tsx +13 -0
  70. package/src/icons/react/NoBorder.tsx +13 -0
  71. package/src/icons/react/NoFill.tsx +13 -0
  72. package/src/icons/react/index.tsx +6 -0
  73. package/src/icons/svg/chat-bubble.svg +4 -0
  74. package/src/icons/svg/chat-float.svg +4 -0
  75. package/src/icons/svg/chat-sidebar.svg +4 -0
  76. package/src/icons/svg/file-other.svg +3 -0
  77. package/src/icons/svg/no-border.svg +17 -0
  78. package/src/icons/svg/no-fill.svg +4 -0
  79. package/src/images-gallery/images-gallery.tsx +8 -6
  80. package/src/images-gallery/slide-buttons.tsx +2 -2
  81. package/src/is-iOS.ts +0 -1
  82. package/src/is-in-popup.ts +2 -1
  83. package/src/lists/actions-menu-row-surface.tsx +4 -4
  84. package/src/loading-sausage.tsx +2 -2
  85. package/src/media-query-utils.ts +1 -2
  86. package/src/mobile-keyboard-aware-popup.tsx +2 -2
  87. package/src/modal-menu/modal-menu-content.tsx +2 -2
  88. package/src/number-input/decimal.js +9 -7
  89. package/src/number-input/{number-inline-input-with-autosize.tsx → number-input-inline-with-autosize.tsx} +20 -41
  90. package/src/number-input/number-input-inline.tsx +118 -0
  91. package/src/number-input/{index.test.js → number-input.test.tsx} +38 -43
  92. package/src/number-input/number-input.tsx +63 -121
  93. package/src/number-input/types.ts +19 -0
  94. package/src/number-input/utils.ts +61 -0
  95. package/src/online-users.tsx +2 -2
  96. package/src/palette-generator.test.ts +24 -281
  97. package/src/palette-generator.ts +39 -45
  98. package/src/palettes/_.ts +72 -0
  99. package/src/palettes/slate-arch.colors-snapshot.test.ts +1689 -0
  100. package/src/palettes/slate-arch.ts +188 -0
  101. package/src/palettes/slate-user.colors-snapshot.test.ts +1689 -0
  102. package/src/palettes/slate-user.ts +187 -0
  103. package/src/palettes/warm-arch.colors-snapshot.test.ts +1689 -0
  104. package/src/palettes/warm-arch.ts +222 -0
  105. package/src/palettes/warm-user.colors-snapshot.test.ts +1689 -0
  106. package/src/palettes/warm-user.ts +222 -0
  107. package/src/popover/get-element-ref.ts +28 -0
  108. package/src/popover/index.tsx +232 -333
  109. package/src/popover/{mobile-popup-context.tsx → mobile-popover-context.tsx} +7 -7
  110. package/src/popover/mobile-popover.tsx +169 -0
  111. package/src/popover/modifiers.tsx +2 -2
  112. package/src/popover/popup-stack-context.tsx +8 -9
  113. package/src/root-theme-provider.test.tsx +114 -19
  114. package/src/scale-generator.ts +31 -22
  115. package/src/select/components/menu-list-virtualized.tsx +5 -3
  116. package/src/select/index.tsx +6 -5
  117. package/src/select/select.tsx +36 -38
  118. package/src/select/util.ts +1 -1
  119. package/src/static-palettes.ts +221 -11
  120. package/src/thematic-controls.tsx +6 -6
  121. package/src/thematic-scales.tsx +15 -15
  122. package/src/thematic-state.ts +57 -20
  123. package/src/thematic.tsx +36 -32
  124. package/src/theme-provider.test.tsx +31 -19
  125. package/src/theme-provider.tsx +41 -38
  126. package/src/theme-settings.ts +66 -11
  127. package/src/theme-styles.ts +53 -8
  128. package/src/toast/toast.tsx +1 -2
  129. package/src/toggle.tsx +2 -2
  130. package/src/tooltip.tsx +4 -3
  131. package/src/type-badge.tsx +4 -11
  132. package/src/unit/styles.ts +0 -23
  133. package/src/use-is-phone.tsx +7 -2
  134. package/src/use-on-screen-keyboard-data.tsx +2 -2
  135. package/src/with-data.tsx +4 -3
  136. package/src/workflow-progress-icon.tsx +2 -2
  137. package/.eslintignore +0 -3
  138. package/.eslintrc +0 -14
  139. package/src/__mocks__/createInlineTheme.js +0 -3
  140. package/src/__snapshots__/design-system.test.ts.snap +0 -7265
  141. package/src/create-inline-theme.ts +0 -67
  142. package/src/number-input/index.js +0 -191
  143. package/src/palette.ts +0 -253
package/src/palettes/warm-user.ts ADDED
@@ -0,0 +1,222 @@
1
+ import {ThemePalette} from "../palette-generator";
2
+
3
+ export const warmUserPalette: ThemePalette = {
4
+ key: "warm-user",
5
+ white: "rgb(255,253,250)",
6
+ whiteA: [
7
+ null,
8
+ "rgba(255,255,254,0)",
9
+ "rgba(255,255,254,0.01)",
10
+ "rgba(255,255,254,0.03)",
11
+ "rgba(255,255,254,0.06)",
12
+ "rgba(255,255,254,0.09)",
13
+ "rgba(255,255,254,0.12)",
14
+ "rgba(255,255,254,0.18)",
15
+ "rgba(255,255,254,0.25)",
16
+ "rgba(255,255,254,0.39)",
17
+ "rgba(255,255,254,0.45)",
18
+ "rgba(255,255,254,0.59)",
19
+ "rgba(255,255,254,0.92)",
20
+ ],
21
+ black: "rgb(31,26,24)",
22
+ blackA: [
23
+ null,
24
+ "rgba(0,0,0,0.01)",
25
+ "rgba(0,0,0,0.03)",
26
+ "rgba(0,0,0,0.05)",
27
+ "rgba(0,0,0,0.07)",
28
+ "rgba(0,0,0,0.09)",
29
+ "rgba(0,0,0,0.11)",
30
+ "rgba(0,0,0,0.14)",
31
+ "rgba(0,0,0,0.22)",
32
+ "rgba(0,0,0,0.44)",
33
+ "rgba(0,0,0,0.48)",
34
+ "rgba(0,0,0,0.57)",
35
+ "rgba(0,0,0,0.91)",
36
+ ],
37
+ base: [
38
+ null,
39
+ "rgb(255,251,244)",
40
+ "rgb(253,246,239)",
41
+ "rgb(250,244,236)",
42
+ "rgb(243,236,229)",
43
+ "rgb(237,231,224)",
44
+ "rgb(232,226,219)",
45
+ "rgb(225,218,211)",
46
+ "rgb(204,198,191)",
47
+ "rgb(163,157,150)",
48
+ "rgb(125,119,112)",
49
+ "rgb(99,94,87)",
50
+ "rgb(27,22,17)",
51
+ ],
52
+ accent: [
53
+ null,
54
+ "rgb(250,252,253)",
55
+ "rgb(249,252,253)",
56
+ "rgb(238,247,249)",
57
+ "rgb(228,241,246)",
58
+ "rgb(213,233,240)",
59
+ "rgb(194,222,232)",
60
+ "rgb(166,206,219)",
61
+ "rgb(132,188,206)",
62
+ "rgb(0,138,169)",
63
+ "rgb(0,126,159)",
64
+ "rgb(0,111,139)",
65
+ "rgb(0,42,54)",
66
+ ],
67
+ red: [
68
+ null,
69
+ "rgb(254,251,251)",
70
+ "rgb(255,250,250)",
71
+ "rgb(255,241,240)",
72
+ "rgb(255,232,231)",
73
+ "rgb(253,220,219)",
74
+ "rgb(250,203,202)",
75
+ "rgb(244,179,178)",
76
+ "rgb(237,150,150)",
77
+ "rgb(211,62,75)",
78
+ "rgb(200,35,59)",
79
+ "rgb(175,36,54)",
80
+ "rgb(69,11,17)",
81
+ ],
82
+ teal: [
83
+ null,
84
+ "rgb(251,252,252)",
85
+ "rgb(250,252,252)",
86
+ "rgb(239,247,245)",
87
+ "rgb(229,242,239)",
88
+ "rgb(214,234,230)",
89
+ "rgb(196,224,217)",
90
+ "rgb(169,208,200)",
91
+ "rgb(135,191,179)",
92
+ "rgb(0,144,126)",
93
+ "rgb(0,132,114)",
94
+ "rgb(0,116,101)",
95
+ "rgb(0,44,37)",
96
+ ],
97
+ yellow: [
98
+ null,
99
+ "rgb(253,252,247)",
100
+ "rgb(255,252,228)",
101
+ "rgb(255,250,207)",
102
+ "rgb(255,247,185)",
103
+ "rgb(255,242,160)",
104
+ "rgb(248,231,135)",
105
+ "rgb(233,213,104)",
106
+ "rgb(222,194,0)",
107
+ "rgb(247,217,0)",
108
+ "rgb(237,208,0)",
109
+ "rgb(130,113,0)",
110
+ "rgb(47,42,14)",
111
+ ],
112
+ // warm-light-user ⬆
113
+ // FIXME drop or apply conditionally
114
+ // ⬇ warm-dark-user
115
+ // "white": "rgb(255,252,247)",
116
+ // "whiteA": [
117
+ // null,
118
+ // "rgba(255,255,254,0)",
119
+ // "rgba(255,255,254,0.01)",
120
+ // "rgba(255,255,254,0.03)",
121
+ // "rgba(255,255,254,0.06)",
122
+ // "rgba(255,255,254,0.09)",
123
+ // "rgba(255,255,254,0.12)",
124
+ // "rgba(255,255,254,0.18)",
125
+ // "rgba(255,255,254,0.25)",
126
+ // "rgba(255,255,254,0.39)",
127
+ // "rgba(255,255,254,0.45)",
128
+ // "rgba(255,255,254,0.59)",
129
+ // "rgba(255,255,254,0.92)"
130
+ // ],
131
+ // "black": "rgb(5,4,4)",
132
+ // "blackA": [
133
+ // null,
134
+ // "rgba(0,0,0,0.01)",
135
+ // "rgba(0,0,0,0.03)",
136
+ // "rgba(0,0,0,0.05)",
137
+ // "rgba(0,0,0,0.07)",
138
+ // "rgba(0,0,0,0.09)",
139
+ // "rgba(0,0,0,0.11)",
140
+ // "rgba(0,0,0,0.14)",
141
+ // "rgba(0,0,0,0.22)",
142
+ // "rgba(0,0,0,0.44)",
143
+ // "rgba(0,0,0,0.48)",
144
+ // "rgba(0,0,0,0.57)",
145
+ // "rgba(0,0,0,0.91)"
146
+ // ],
147
+ baseDark: [
148
+ null,
149
+ "rgb(26,22,20)",
150
+ "rgb(32,27,25)",
151
+ "rgb(39,35,33)",
152
+ "rgb(45,40,38)",
153
+ "rgb(50,45,43)",
154
+ "rgb(55,50,48)",
155
+ "rgb(65,60,58)",
156
+ "rgb(86,80,78)",
157
+ "rgb(117,111,109)",
158
+ "rgb(132,126,124)",
159
+ "rgb(166,159,157)",
160
+ "rgb(224,212,206)",
161
+ ],
162
+ accentDark: [
163
+ null,
164
+ "rgb(16,25,28)",
165
+ "rgb(13,32,38)",
166
+ "rgb(8,44,54)",
167
+ "rgb(1,51,63)",
168
+ "rgb(4,58,72)",
169
+ "rgb(7,68,83)",
170
+ "rgb(0,85,107)",
171
+ "rgb(0,106,135)",
172
+ "rgb(0,136,170)",
173
+ "rgb(22,152,183)",
174
+ "rgb(124,189,210)",
175
+ "rgb(232,244,248)",
176
+ ],
177
+ redDark: [
178
+ null,
179
+ "rgb(33,19,19)",
180
+ "rgb(47,19,20)",
181
+ "rgb(67,22,25)",
182
+ "rgb(80,21,27)",
183
+ "rgb(91,26,32)",
184
+ "rgb(104,33,39)",
185
+ "rgb(136,27,42)",
186
+ "rgb(175,9,47)",
187
+ "rgb(213,50,71)",
188
+ "rgb(225,78,91)",
189
+ "rgb(244,146,147)",
190
+ "rgb(255,236,235)",
191
+ ],
192
+ tealDark: [
193
+ null,
194
+ "rgb(16,25,23)",
195
+ "rgb(14,33,29)",
196
+ "rgb(11,46,40)",
197
+ "rgb(5,53,46)",
198
+ "rgb(8,61,53)",
199
+ "rgb(14,71,63)",
200
+ "rgb(0,89,77)",
201
+ "rgb(0,112,97)",
202
+ "rgb(0,143,125)",
203
+ "rgb(37,157,140)",
204
+ "rgb(128,192,180)",
205
+ "rgb(233,244,242)",
206
+ ],
207
+ yellowDark: [
208
+ null,
209
+ "rgb(24,20,0)",
210
+ "rgb(34,28,0)",
211
+ "rgb(43,36,0)",
212
+ "rgb(47,40,0)",
213
+ "rgb(58,50,0)",
214
+ "rgb(69,59,0)",
215
+ "rgb(85,73,0)",
216
+ "rgb(110,95,0)",
217
+ "rgb(248,216,0)",
218
+ "rgb(255,236,78)",
219
+ "rgb(227,198,0)",
220
+ "rgb(255,249,207)",
221
+ ],
222
+ };
package/src/popover/get-element-ref.ts ADDED
@@ -0,0 +1,28 @@
1
+ /* eslint-disable @typescript-eslint/no-explicit-any */
2
+
3
+ // Inspired by radix slot
4
+ // https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/slot.tsx
5
+ //
6
+ // Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
7
+ // After React 19 accessing `element.ref` does the opposite.
8
+ // https://github.com/facebook/react/pull/28348
9
+ //
10
+ // Access the ref using the method that doesn't yield a warning.
11
+ export function getElementRef(element: React.ReactElement) {
12
+ // React <=18 in DEV
13
+ let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
14
+ let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
15
+ if (mayWarn) {
16
+ return (element as any).ref;
17
+ }
18
+
19
+ // React 19 in DEV
20
+ getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
21
+ mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
22
+ if (mayWarn) {
23
+ return (element.props as {ref?: React.Ref<unknown>}).ref;
24
+ }
25
+
26
+ // Not DEV
27
+ return (element.props as {ref?: React.Ref<unknown>}).ref || (element as any).ref;
28
+ }