@photoroom/ui 0.1.118 → 0.1.119

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 (28) hide show
  1. package/README.md +12 -1
  2. package/animations.css +13 -0
  3. package/colors.css +445 -0
  4. package/components/index.d.ts +1 -0
  5. package/components/index.d.ts.map +1 -1
  6. package/components/input/OptionSelectionListItem/OptionSelectionListItem.d.ts +41 -0
  7. package/components/input/OptionSelectionListItem/OptionSelectionListItem.d.ts.map +1 -0
  8. package/components/input/OptionSelectionListItem/index.d.ts +2 -0
  9. package/components/input/OptionSelectionListItem/index.d.ts.map +1 -0
  10. package/index.css +1 -1
  11. package/index.mjs +12 -12
  12. package/package.json +5 -5
  13. package/theme.css +1420 -0
  14. package/plugins/backgrounds.js +0 -43
  15. package/plugins/colors.js +0 -435
  16. package/plugins/content-to-edge.js +0 -104
  17. package/plugins/forms.js +0 -21
  18. package/plugins/icon-offset.js +0 -29
  19. package/plugins/icon-size.js +0 -39
  20. package/plugins/icon-to-edge.js +0 -101
  21. package/plugins/misc.js +0 -112
  22. package/plugins/size.js +0 -154
  23. package/plugins/spacing.js +0 -84
  24. package/plugins/text-to-leading.js +0 -61
  25. package/plugins/transitions.js +0 -15
  26. package/plugins/typography.js +0 -523
  27. package/plugins/variants.js +0 -9
  28. package/tailwind.config.js +0 -490
package/README.md CHANGED
@@ -26,12 +26,23 @@ function App() {
26
26
  }
27
27
  ```
28
28
 
29
+ ### Extending the design system on Tailwind v4
30
+
31
+ If your app is on Tailwind v4 and you want to extend our tokens/utilities in your own CSS:
32
+
33
+ ```css
34
+ @import "tailwindcss";
35
+ @import "@photoroom/ui/theme.css";
36
+ ```
37
+
38
+ `theme.css` exposes every `@theme` token, `@utility`, and `@custom-variant` from the design system. `animations.css` is published separately for opt-in keyframes/animations.
39
+
29
40
  ## What's included
30
41
 
31
42
  - **~222 React components** — buttons, inputs, dialogs, dropdowns, navigation, cards, editor tools, and more
32
43
  - **Compiled CSS** — all Tailwind styles in a single `styles.css` import
33
44
  - **TypeScript declarations** — full type safety out of the box
34
- - **Tailwind config** — extend our theme with `import "@photoroom/ui/tailwind.config"`
45
+ - **Tailwind v4 source** — extend our tokens/utilities in your own CSS via `@import "@photoroom/ui/theme.css"`
35
46
 
36
47
  ## Links
37
48
 
package/animations.css ADDED
@@ -0,0 +1,13 @@
1
+ @keyframes progress-timer-shimmer {
2
+ 0%,
3
+ 100% {
4
+ opacity: 0.2;
5
+ }
6
+ 50% {
7
+ opacity: 1;
8
+ }
9
+ }
10
+
11
+ .progress-timer-shimmer {
12
+ animation: progress-timer-shimmer 2s linear infinite;
13
+ }
package/colors.css ADDED
@@ -0,0 +1,445 @@
1
+ /*
2
+ * Photoroom color tokens — light + dark mode values.
3
+ *
4
+ * This file defines the actual CSS variable values referenced by the
5
+ * @theme inline block in theme.css (which only registers utility names).
6
+ *
7
+ * Use hex color values directly from Figma:
8
+ * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=7217%3A13600
9
+ *
10
+ * Don't use color channels — we don't need Tailwind opacity modifier syntax.
11
+ * All codebase colors should be direct tokens, not derivatives (don't do
12
+ * `bg-gray/80`).
13
+ */
14
+
15
+ :root {
16
+ /*
17
+ * BASE
18
+ */
19
+
20
+ /* Static */
21
+ --color-black: #000000;
22
+ --color-black-alpha-1: rgba(0, 0, 0, 5%);
23
+ --color-black-alpha-2: rgba(0, 0, 0, 10%);
24
+ --color-black-alpha-3: rgba(0, 0, 0, 15%);
25
+ --color-black-alpha-4: rgba(0, 0, 0, 24%);
26
+ --color-black-alpha-5: rgba(0, 0, 0, 32%);
27
+ --color-black-alpha-6: rgba(0, 0, 0, 42%);
28
+ --color-black-alpha-7: rgba(0, 0, 0, 56%);
29
+ --color-black-alpha-8: rgba(0, 0, 0, 75%);
30
+ --color-black-alpha-9: rgba(0, 0, 0, 85%);
31
+ --color-white: #ffffff;
32
+ --color-white-1: #f2f3f7;
33
+ --color-white-2: #e6e7ed;
34
+ --color-white-alpha-1: rgba(255, 255, 255, 7%);
35
+ --color-white-alpha-2: rgba(255, 255, 255, 12%);
36
+ --color-white-alpha-3: rgba(255, 255, 255, 18%);
37
+ --color-white-alpha-4: rgba(255, 255, 255, 41%);
38
+ --color-white-alpha-5: rgba(255, 255, 255, 49%);
39
+ --color-white-alpha-6: rgba(255, 255, 255, 60%);
40
+ --color-white-alpha-7: rgba(255, 255, 255, 72%);
41
+ --color-white-alpha-8: rgba(255, 255, 255, 81%);
42
+ --color-white-alpha-9: rgba(255, 255, 255, 85%);
43
+
44
+ /* Neutral */
45
+ --color-neutral-0: #ffffff;
46
+ --color-neutral-0-80: rgba(255, 255, 255, 80%);
47
+ --color-neutral-50: #f9f9f9;
48
+ --color-neutral-100: #f2f2f2;
49
+ --color-neutral-200: #e5e5e5;
50
+ --color-neutral-300: #d9d9d9;
51
+ --color-neutral-400: #b5b5b5;
52
+ --color-neutral-500: #a1a1a1;
53
+ --color-neutral-600: #8a8a8a;
54
+ --color-neutral-700: #6b6b6b;
55
+ --color-neutral-800: #474747;
56
+ --color-neutral-900: #1a1a1a;
57
+ --color-neutral-alpha-100: rgba(0, 0, 0, 5%);
58
+ --color-neutral-alpha-200: rgba(0, 0, 0, 10%);
59
+ --color-neutral-alpha-300: rgba(0, 0, 0, 15%);
60
+ --color-neutral-alpha-400: rgba(0, 0, 0, 29%);
61
+ --color-neutral-alpha-500: rgba(0, 0, 0, 37%);
62
+
63
+ /* Sand */
64
+ --color-sand-50: #f5f4f0;
65
+
66
+ /* Accent */
67
+ --color-accent-300: #6161f2;
68
+ --color-accent-400: #4d3de3;
69
+ --color-accent-500: #410cd9;
70
+ --color-accent-600: #280197;
71
+ --color-accent-alpha-1: rgba(88, 38, 222, 6%);
72
+ --color-accent-alpha-2: rgba(64, 10, 219, 11%);
73
+ --color-accent-alpha-3: rgba(67, 14, 220, 17%);
74
+ --color-accent-alpha-4: rgba(62, 7, 218, 27%);
75
+ --color-accent-alpha-5: rgba(55, 1, 215, 35%);
76
+
77
+ /* Positive */
78
+ --color-positive-400: #3dba83;
79
+ --color-positive-500: #00a66f;
80
+ --color-positive-600: #018255;
81
+ --color-positive-alpha-1: rgba(15, 175, 125, 10%);
82
+ --color-positive-alpha-2: rgba(8, 166, 113, 19%);
83
+ --color-positive-alpha-3: rgba(3, 165, 114, 29%);
84
+
85
+ /* Negative */
86
+ --color-negative-400: #ff6b5e;
87
+ --color-negative-500: #ff3333;
88
+ --color-negative-600: #c92224;
89
+ --color-negative-alpha-1: rgba(255, 105, 105, 10%);
90
+ --color-negative-alpha-2: rgba(255, 24, 24, 13%);
91
+ --color-negative-alpha-3: rgba(255, 74, 74, 26%);
92
+
93
+ /* Magic accent */
94
+ --color-magic-accent-400: #ee65f5;
95
+ --color-magic-accent-500: #da45e5;
96
+ --color-magic-accent-600: #ad31b7;
97
+
98
+ /* Animation accent */
99
+ --color-animation-accent-500: #cfc5ff;
100
+
101
+ /* Camera accent */
102
+ --color-camera-accent-500: #f5b63d;
103
+
104
+ /* Branding */
105
+ --color-secondary-moon-grape: #626eff;
106
+ --color-secondary-electric-litchi: #ff86f6;
107
+ --color-secondary-sunny-mango: #ffa602;
108
+ --color-secondary-aqua-kiwi: #00cd9c;
109
+ --color-secondary-coral-cherry: #ff538c;
110
+ --color-secondary-navy: #000255;
111
+ --color-secondary-lilac: #e7e8ff;
112
+
113
+ /* Semantic */
114
+ --color-spotlight: rgba(255, 166, 2, 0.16);
115
+ --color-spotlight-down: rgba(255, 166, 2, 0.34);
116
+
117
+ /* Replaceable layer indicator in editor */
118
+ --color-replaceable: #00ffc2;
119
+
120
+ /*
121
+ * ALIASES
122
+ */
123
+
124
+ /* Surface */
125
+ --color-surface-default: var(--color-neutral-0);
126
+ --color-surface-alternate: var(--color-neutral-100);
127
+ --color-surface-low: var(--color-neutral-100);
128
+ --color-surface-high: var(--color-neutral-0);
129
+ --color-surface-higher: var(--color-neutral-0);
130
+
131
+ /* Background */
132
+ --color-background-default: var(--color-neutral-900);
133
+ --color-background-hover: var(--color-neutral-800);
134
+ --color-background-down: var(--color-neutral-900);
135
+ --color-background-subdued: var(--color-neutral-alpha-100);
136
+ --color-background-subdued-hover: var(--color-neutral-alpha-200);
137
+ --color-background-subdued-down: var(--color-neutral-alpha-300);
138
+ --color-background-accent: var(--color-accent-500);
139
+ --color-background-accent-hover: var(--color-accent-400);
140
+ --color-background-accent-down: var(--color-accent-600);
141
+ --color-background-accent-subdued: var(--color-accent-alpha-1);
142
+ --color-background-accent-subdued-hover: var(--color-accent-alpha-2);
143
+ --color-background-accent-subdued-down: var(--color-accent-alpha-3);
144
+ --color-background-positive: var(--color-positive-500);
145
+ --color-background-positive-hover: var(--color-positive-400);
146
+ --color-background-positive-down: var(--color-positive-600);
147
+ --color-background-positive-subdued: var(--color-positive-alpha-1);
148
+ --color-background-positive-subdued-hover: var(--color-positive-alpha-2);
149
+ --color-background-positive-subdued-down: var(--color-positive-alpha-3);
150
+ --color-background-negative: var(--color-negative-500);
151
+ --color-background-negative-hover: var(--color-negative-400);
152
+ --color-background-negative-down: var(--color-negative-600);
153
+ --color-background-negative-subdued: var(--color-negative-alpha-1);
154
+ --color-background-negative-subdued-hover: var(--color-negative-alpha-2);
155
+ --color-background-negative-subdued-down: var(--color-negative-alpha-3);
156
+ --color-background-tab: var(--color-neutral-0);
157
+ --color-background-bar: var(--color-neutral-0-80);
158
+ --color-background-white: var(--color-white);
159
+ --color-background-white-hover: var(--color-white-1);
160
+ --color-background-white-down: var(--color-white-2);
161
+ --color-background-white-subdued: var(--color-white-alpha-3);
162
+ --color-background-white-subdued-hover: var(--color-white-alpha-4);
163
+ --color-background-white-subdued-down: var(--color-white-alpha-5);
164
+ --color-background-spotlight: var(--color-spotlight);
165
+ --color-background-spotlight-down: var(--color-spotlight-down);
166
+ --color-background-inverted: var(--color-neutral-0);
167
+ --color-background-promotional: var(--color-secondary-lilac);
168
+ --color-background-overlay: var(--color-white-alpha-9);
169
+ --color-background-tooltip: var(--color-neutral-800);
170
+
171
+ /* Content */
172
+ --color-content-primary: var(--color-neutral-900);
173
+ --color-content-subdued-primary: var(--color-neutral-800);
174
+ --color-content-secondary: var(--color-neutral-700);
175
+ --color-content-tertiary: var(--color-neutral-600);
176
+ --color-content-accent: var(--color-accent-500);
177
+ --color-content-accent-hover: var(--color-accent-400);
178
+ --color-content-accent-down: var(--color-accent-600);
179
+ --color-content-positive: var(--color-positive-500);
180
+ --color-content-positive-hover: var(--color-positive-400);
181
+ --color-content-positive-down: var(--color-positive-600);
182
+ --color-content-negative: var(--color-negative-500);
183
+ --color-content-negative-hover: var(--color-negative-400);
184
+ --color-content-negative-down: var(--color-negative-600);
185
+ --color-content-camera-accent: var(--color-camera-accent-500);
186
+ --color-content-white-primary: var(--color-white);
187
+ --color-content-white-secondary: var(--color-white-alpha-8);
188
+ --color-content-black-primary: var(--color-black);
189
+ --color-content-white-primary-inverted: var(--color-white);
190
+ --color-content-white-subdued-primary-inverted: var(--color-white-alpha-8);
191
+
192
+ /* Structure */
193
+ --color-misc-divider: var(--color-neutral-alpha-200);
194
+ --color-misc-divider-ios: var(--color-neutral-alpha-300);
195
+ --color-misc-border: var(--color-neutral-alpha-300);
196
+ --color-misc-border-emphasized: var(--color-neutral-alpha-500);
197
+ --color-misc-border-box: var(--color-neutral-300);
198
+ --color-misc-border-box-hover: var(--color-neutral-400);
199
+ --color-misc-border-box-down: var(--color-neutral-500);
200
+ --color-misc-border-sidebar: var(--color-black-alpha-1);
201
+ --color-misc-border-default: var(--color-neutral-alpha-300);
202
+ --color-misc-stack-layer-1: var(--color-neutral-400);
203
+ --color-misc-stack-layer-2: var(--color-neutral-200);
204
+ --color-misc-focus-indicator: var(--color-accent-alpha-5);
205
+ --color-misc-focus-indicator-subdued: var(--color-accent-alpha-2);
206
+ --color-misc-white-focus-indicator: var(--color-white);
207
+ --color-misc-hairline: var(--color-neutral-alpha-300);
208
+
209
+ /* Overlay */
210
+ --color-misc-visual-hover: var(--color-black-alpha-2);
211
+ --color-misc-visual-down: var(--color-black-alpha-3);
212
+
213
+ /* Custom (light mode defaults) */
214
+ --font-thumbnail-filter: none;
215
+ --scroll-hint-from: var(--color-white);
216
+ --color-checker: var(--color-white-1);
217
+
218
+ /* Pricing */
219
+ --color-misc-ai-image: #5383ff;
220
+ --color-misc-ai-video: #00cd9c;
221
+ --color-misc-automated-exports: #aa4fff;
222
+ }
223
+
224
+ /*
225
+ * DARK MODE
226
+ */
227
+ .theme-dark {
228
+ /*
229
+ * BASE
230
+ */
231
+
232
+ /* Neutral */
233
+ --color-neutral-0: #0f1011;
234
+ --color-neutral-0-80: rgba(15, 16, 17, 80%);
235
+ --color-neutral-50: #181a1c; /* placeholder — dark mode values TBD in Figma */
236
+ --color-neutral-100: #202124;
237
+ --color-neutral-200: #2d2e33;
238
+ --color-neutral-300: #393a40;
239
+ --color-neutral-400: #616268;
240
+ --color-neutral-500: #76777d;
241
+ --color-neutral-600: #8f9096;
242
+ --color-neutral-700: #aeafb5;
243
+ --color-neutral-800: #d2d3d9;
244
+ --color-neutral-900: #ffffff;
245
+ --color-neutral-alpha-100: rgba(146, 147, 163, 13%);
246
+ --color-neutral-alpha-200: rgba(182, 183, 206, 18%);
247
+ --color-neutral-alpha-300: rgba(198, 199, 221, 23%);
248
+ --color-neutral-alpha-400: rgba(231, 232, 246, 38%);
249
+ --color-neutral-alpha-500: rgba(239, 240, 252, 46%);
250
+
251
+ /* Sand — dark-mode value TBD (falls back to :root light value) */
252
+
253
+ /* Accent */
254
+ --color-accent-300: #6161f2;
255
+ --color-accent-400: #5052cb;
256
+ --color-accent-500: #696eff;
257
+ --color-accent-600: #7f89ff;
258
+ --color-accent-alpha-1: rgba(76, 77, 247, 23%);
259
+ --color-accent-alpha-2: rgba(89, 93, 251, 35%);
260
+ --color-accent-alpha-3: rgba(95, 100, 255, 45%);
261
+ --color-accent-alpha-4: rgba(108, 113, 255, 76%);
262
+ --color-accent-alpha-5: rgba(113, 118, 255, 92%);
263
+
264
+ /* Positive */
265
+ --color-positive-400: #01a86f;
266
+ --color-positive-500: #00cc88;
267
+ --color-positive-600: #57e2a2;
268
+ --color-positive-alpha-1: rgba(0, 124, 65, 25%);
269
+ --color-positive-alpha-2: rgba(0, 142, 83, 35%);
270
+ --color-positive-alpha-3: rgba(0, 149, 93, 45%);
271
+
272
+ /* Negative */
273
+ --color-negative-400: #ce4545;
274
+ --color-negative-500: #ff5959;
275
+ --color-negative-600: #ff8480;
276
+ --color-negative-alpha-1: rgba(245, 51, 47, 23%);
277
+ --color-negative-alpha-2: rgba(250, 66, 64, 34%);
278
+ --color-negative-alpha-3: rgba(251, 75, 74, 44%);
279
+
280
+ /* Magic accent */
281
+ --color-magic-accent-400: #aa4acb;
282
+ --color-magic-accent-500: #d460fb;
283
+ --color-magic-accent-600: #e87fff;
284
+
285
+ /* Animation accent */
286
+ --color-animation-accent-500: #5f598a;
287
+
288
+ /* Camera accent */
289
+ --color-camera-accent-500: #f5b63d;
290
+
291
+ /*
292
+ * ALIASES
293
+ */
294
+
295
+ /* Surface */
296
+ --color-surface-default: var(--color-neutral-0);
297
+ --color-surface-alternate: var(--color-neutral-100);
298
+ --color-surface-low: var(--color-neutral-0);
299
+ --color-surface-high: var(--color-neutral-100);
300
+ --color-surface-higher: var(--color-neutral-200);
301
+
302
+ /* Background */
303
+ --color-background-default: var(--color-neutral-900);
304
+ --color-background-hover: var(--color-neutral-800);
305
+ --color-background-down: var(--color-neutral-900);
306
+ --color-background-subdued: var(--color-neutral-alpha-100);
307
+ --color-background-subdued-hover: var(--color-neutral-alpha-200);
308
+ --color-background-subdued-down: var(--color-neutral-alpha-300);
309
+ --color-background-accent: var(--color-accent-500);
310
+ --color-background-accent-hover: var(--color-accent-600);
311
+ --color-background-accent-down: var(--color-accent-400);
312
+ --color-background-accent-subdued: var(--color-accent-alpha-1);
313
+ --color-background-accent-subdued-hover: var(--color-accent-alpha-2);
314
+ --color-background-accent-subdued-down: var(--color-accent-alpha-3);
315
+ --color-background-positive: var(--color-positive-500);
316
+ --color-background-positive-hover: var(--color-positive-600);
317
+ --color-background-positive-down: var(--color-positive-400);
318
+ --color-background-positive-subdued: var(--color-positive-alpha-1);
319
+ --color-background-positive-subdued-hover: var(--color-positive-alpha-2);
320
+ --color-background-positive-subdued-down: var(--color-positive-alpha-3);
321
+ --color-background-negative: var(--color-negative-500);
322
+ --color-background-negative-hover: var(--color-negative-600);
323
+ --color-background-negative-down: var(--color-negative-400);
324
+ --color-background-negative-subdued: var(--color-negative-alpha-1);
325
+ --color-background-negative-subdued-hover: var(--color-negative-alpha-2);
326
+ --color-background-negative-subdued-down: var(--color-negative-alpha-3);
327
+ --color-background-tab: var(--color-neutral-400);
328
+ --color-background-white: var(--color-white);
329
+ --color-background-white-hover: var(--color-white-alpha-8);
330
+ --color-background-white-down: var(--color-white);
331
+ --color-background-white-subdued: var(--color-white-alpha-3);
332
+ --color-background-white-subdued-hover: var(--color-white-alpha-4);
333
+ --color-background-white-subdued-down: var(--color-white-alpha-5);
334
+ --color-background-spotlight: var(--color-spotlight);
335
+ --color-background-inverted: var(--color-neutral-0);
336
+ --color-background-promotional: var(--color-secondary-lilac);
337
+ --color-background-overlay: var(--color-black-alpha-9);
338
+ --color-background-tooltip: var(--color-neutral-100);
339
+
340
+ /* Content */
341
+ --color-content-primary: var(--color-neutral-900);
342
+ --color-content-subdued-primary: var(--color-neutral-800);
343
+ --color-content-secondary: var(--color-neutral-700);
344
+ --color-content-tertiary: var(--color-neutral-600);
345
+ --color-content-accent: var(--color-accent-500);
346
+ --color-content-accent-hover: var(--color-accent-400);
347
+ --color-content-accent-down: var(--color-accent-600);
348
+ --color-content-positive: var(--color-positive-500);
349
+ --color-content-positive-hover: var(--color-positive-600);
350
+ --color-content-positive-down: var(--color-positive-400);
351
+ --color-content-negative: var(--color-negative-500);
352
+ --color-content-negative-hover: var(--color-negative-600);
353
+ --color-content-negative-down: var(--color-negative-400);
354
+ --color-content-camera-accent: var(--color-camera-accent-500);
355
+ --color-content-white-primary: var(--color-white);
356
+ --color-content-white-secondary: var(--color-white-alpha-8);
357
+ --color-content-black-primary: var(--color-black);
358
+ --color-content-white-primary-inverted: var(--color-black);
359
+ --color-content-white-subdued-primary-inverted: var(--color-black-alpha-8);
360
+
361
+ /* Structure */
362
+ --color-misc-divider: var(--color-neutral-alpha-200);
363
+ --color-misc-divider-ios: var(--color-neutral-alpha-300);
364
+ --color-misc-border: var(--color-neutral-alpha-300);
365
+ --color-misc-border-emphasized: var(--color-neutral-alpha-500);
366
+ --color-misc-border-box: var(--color-neutral-300);
367
+ --color-misc-border-box-hover: var(--color-neutral-400);
368
+ --color-misc-border-box-down: var(--color-neutral-500);
369
+ --color-misc-border-sidebar: var(--color-neutral-alpha-200);
370
+ --color-misc-border-default: var(--color-neutral-alpha-300);
371
+ --color-misc-stack-layer-1: var(--color-neutral-400);
372
+ --color-misc-stack-layer-2: var(--color-neutral-200);
373
+ --color-misc-focus-indicator: var(--color-accent-alpha-5);
374
+ --color-misc-focus-indicator-subdued: var(--color-accent-alpha-2);
375
+ --color-misc-white-focus-indicator: var(--color-white);
376
+ --color-misc-hairline: var(--color-neutral-alpha-300);
377
+
378
+ /* Overlay */
379
+ --color-misc-visual-hover: var(--color-black-alpha-2);
380
+ --color-misc-visual-down: var(--color-black-alpha-3);
381
+
382
+ /* Custom (dark mode overrides) */
383
+ --font-thumbnail-filter: invert(1);
384
+ --scroll-hint-from: var(--color-surface-higher);
385
+ --color-checker: var(--color-neutral-300);
386
+
387
+ /* Pricing */
388
+ --color-misc-ai-image: #5383ff;
389
+ --color-misc-ai-video: #00cd9c;
390
+ --color-misc-automated-exports: #aa4fff;
391
+ }
392
+
393
+ /*
394
+ * Pro gradient backgrounds — light + dark mode.
395
+ *
396
+ * Light mode order: 500 (base), 400 (hover, lighter), 600 (down, darker).
397
+ * Dark mode swaps: hover and down use the opposite ends because the accent
398
+ * palette is inverted in dark mode (--color-accent-500 is darker than 400).
399
+ */
400
+ @utility bg-background-pro {
401
+ background-image: linear-gradient(
402
+ to right,
403
+ var(--color-accent-500),
404
+ var(--color-magic-accent-500)
405
+ );
406
+ }
407
+ @utility bg-background-pro-hover {
408
+ background-image: linear-gradient(
409
+ to right,
410
+ var(--color-accent-400),
411
+ var(--color-magic-accent-400)
412
+ );
413
+ }
414
+ @utility bg-background-pro-down {
415
+ background-image: linear-gradient(
416
+ to right,
417
+ var(--color-accent-600),
418
+ var(--color-magic-accent-600)
419
+ );
420
+ }
421
+ .theme-dark .bg-background-pro-hover {
422
+ background-image: linear-gradient(
423
+ to right,
424
+ var(--color-accent-600),
425
+ var(--color-magic-accent-600)
426
+ );
427
+ }
428
+ .theme-dark .bg-background-pro-down {
429
+ background-image: linear-gradient(
430
+ to right,
431
+ var(--color-accent-400),
432
+ var(--color-magic-accent-400)
433
+ );
434
+ }
435
+
436
+ /*
437
+ * Pro gradient on text/content elements (same in light + dark)
438
+ */
439
+ @utility bg-content-pro {
440
+ background-image: linear-gradient(
441
+ to right,
442
+ var(--color-accent-500),
443
+ var(--color-magic-accent-500)
444
+ );
445
+ }
package/components/index.d.ts CHANGED
@@ -130,6 +130,7 @@ export * from "./input/Label";
130
130
  export * from "./input/NumberField";
131
131
  export * from "./input/LargeOptionTile";
132
132
  export * from "./input/OptionGroup";
133
+ export * from "./input/OptionSelectionListItem";
133
134
  export * from "./input/OptionTile";
134
135
  export * from "./input/PanelStandardInput";
135
136
  export * from "./input/PhotoDropZone";
package/components/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
package/components/input/OptionSelectionListItem/OptionSelectionListItem.d.ts ADDED
@@ -0,0 +1,41 @@
1
+ import * as RadioGroup from "@radix-ui/react-radio-group";
2
+ export type OptionSelectionListItemProps = Omit<RadioGroup.RadioGroupItemProps, "children"> & Readonly<{
3
+ title: string;
4
+ /**
5
+ * Description rendered below the title. Accepts any React node so consumers
6
+ * can pass styled fragments (e.g. a `<Trans>` instance with inline spans).
7
+ */
8
+ description?: React.ReactNode;
9
+ imageSrc: string;
10
+ altLabel?: string;
11
+ /**
12
+ * Shows the DS damier pattern behind the thumbnail and switches the image
13
+ * to `object-contain` so transparent edges are visualised. Use for options
14
+ * that imply letterboxing (e.g. a "Fit" resize mode).
15
+ */
16
+ showCheckerboard?: boolean;
17
+ }>;
18
+ /**
19
+ * Radio-style list item with an inset square thumbnail on the left, a title +
20
+ * description in the middle, and a selection badge in the top-right corner.
21
+ *
22
+ * Must be used inside a `RadioGroup.Root` from `@radix-ui/react-radio-group`
23
+ * (the `RadioGroup` re-export from `@photoroom/ui`).
24
+ */
25
+ export declare const OptionSelectionListItem: import("react").ForwardRefExoticComponent<Omit<RadioGroup.RadioGroupItemProps, "children"> & Readonly<{
26
+ title: string;
27
+ /**
28
+ * Description rendered below the title. Accepts any React node so consumers
29
+ * can pass styled fragments (e.g. a `<Trans>` instance with inline spans).
30
+ */
31
+ description?: React.ReactNode;
32
+ imageSrc: string;
33
+ altLabel?: string;
34
+ /**
35
+ * Shows the DS damier pattern behind the thumbnail and switches the image
36
+ * to `object-contain` so transparent edges are visualised. Use for options
37
+ * that imply letterboxing (e.g. a "Fit" resize mode).
38
+ */
39
+ showCheckerboard?: boolean;
40
+ }> & import("react").RefAttributes<HTMLButtonElement>>;
41
+ //# sourceMappingURL=OptionSelectionListItem.d.ts.map
package/components/input/OptionSelectionListItem/OptionSelectionListItem.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OptionSelectionListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/input/OptionSelectionListItem/OptionSelectionListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAO1D,MAAM,MAAM,4BAA4B,GAAG,IAAI,CAAC,UAAU,CAAC,mBAAmB,EAAE,UAAU,CAAC,GACzF,QAAQ,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC,CAAC;AAEL;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB;WAvBzB,MAAM;IACb;;;OAGG;kBACW,KAAK,CAAC,SAAS;cACnB,MAAM;eACL,MAAM;IACjB;;;;OAIG;uBACgB,OAAO;sDAuD7B,CAAC"}
package/components/input/OptionSelectionListItem/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./OptionSelectionListItem";
2
+ //# sourceMappingURL=index.d.ts.map
package/components/input/OptionSelectionListItem/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/OptionSelectionListItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}