@castui/cast-ui 4.7.0 → 4.8.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 (72) hide show
  1. package/README.md +6 -0
  2. package/dist/components/Accordion/Accordion.d.ts +80 -0
  3. package/dist/components/Accordion/Accordion.js +157 -0
  4. package/dist/components/Accordion/index.d.ts +1 -0
  5. package/dist/components/Accordion/index.js +6 -0
  6. package/dist/components/AppBar/AppBar.d.ts +47 -0
  7. package/dist/components/AppBar/AppBar.js +47 -0
  8. package/dist/components/AppBar/index.d.ts +1 -0
  9. package/dist/components/AppBar/index.js +5 -0
  10. package/dist/components/Autocomplete/Autocomplete.d.ts +70 -0
  11. package/dist/components/Autocomplete/Autocomplete.js +249 -0
  12. package/dist/components/Autocomplete/index.d.ts +1 -0
  13. package/dist/components/Autocomplete/index.js +5 -0
  14. package/dist/components/Backdrop/Backdrop.d.ts +32 -0
  15. package/dist/components/Backdrop/Backdrop.js +74 -0
  16. package/dist/components/Backdrop/index.d.ts +1 -0
  17. package/dist/components/Backdrop/index.js +5 -0
  18. package/dist/components/BottomSheet/BottomSheet.d.ts +50 -0
  19. package/dist/components/BottomSheet/BottomSheet.js +159 -0
  20. package/dist/components/BottomSheet/index.d.ts +1 -0
  21. package/dist/components/BottomSheet/index.js +6 -0
  22. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +63 -0
  23. package/dist/components/Breadcrumbs/Breadcrumbs.js +143 -0
  24. package/dist/components/Breadcrumbs/index.d.ts +1 -0
  25. package/dist/components/Breadcrumbs/index.js +6 -0
  26. package/dist/components/CodeBlock/CodeBlock.d.ts +42 -0
  27. package/dist/components/CodeBlock/CodeBlock.js +110 -0
  28. package/dist/components/CodeBlock/index.d.ts +1 -0
  29. package/dist/components/CodeBlock/index.js +5 -0
  30. package/dist/components/Drawer/Drawer.d.ts +51 -0
  31. package/dist/components/Drawer/Drawer.js +168 -0
  32. package/dist/components/Drawer/index.d.ts +1 -0
  33. package/dist/components/Drawer/index.js +6 -0
  34. package/dist/components/Link/Link.d.ts +51 -0
  35. package/dist/components/Link/Link.js +73 -0
  36. package/dist/components/Link/index.d.ts +1 -0
  37. package/dist/components/Link/index.js +5 -0
  38. package/dist/components/Menu/Menu.d.ts +91 -0
  39. package/dist/components/Menu/Menu.js +211 -0
  40. package/dist/components/Menu/index.d.ts +1 -0
  41. package/dist/components/Menu/index.js +9 -0
  42. package/dist/components/Slider/Slider.d.ts +47 -0
  43. package/dist/components/Slider/Slider.js +132 -0
  44. package/dist/components/Slider/index.d.ts +1 -0
  45. package/dist/components/Slider/index.js +5 -0
  46. package/dist/components/SpeedDial/SpeedDial.d.ts +72 -0
  47. package/dist/components/SpeedDial/SpeedDial.js +189 -0
  48. package/dist/components/SpeedDial/index.d.ts +1 -0
  49. package/dist/components/SpeedDial/index.js +6 -0
  50. package/dist/components/Table/Table.d.ts +74 -0
  51. package/dist/components/Table/Table.js +176 -0
  52. package/dist/components/Table/index.d.ts +1 -0
  53. package/dist/components/Table/index.js +9 -0
  54. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +69 -0
  55. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js +158 -0
  56. package/dist/components/ToggleButtonGroup/index.d.ts +1 -0
  57. package/dist/components/ToggleButtonGroup/index.js +6 -0
  58. package/dist/index.d.ts +16 -2
  59. package/dist/index.js +49 -2
  60. package/dist/theme/ThemeContext.d.ts +8 -1
  61. package/dist/theme/ThemeContext.js +7 -4
  62. package/dist/theme/applyCastTheme.d.ts +75 -0
  63. package/dist/theme/applyCastTheme.js +95 -0
  64. package/dist/theme/index.d.ts +2 -1
  65. package/dist/theme/index.js +3 -1
  66. package/dist/theme/themes.js +177 -0
  67. package/dist/theme/types.d.ts +177 -0
  68. package/dist/tokens/colors.d.ts +44 -0
  69. package/dist/tokens/colors.js +47 -1
  70. package/dist/tokens/index.d.ts +1 -1
  71. package/dist/tokens/index.js +4 -1
  72. package/package.json +2 -1
@@ -14,6 +14,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
14
14
  exports.themes = void 0;
15
15
  exports.themes = {
16
16
  compact: {
17
+ accordion: {
18
+ small: { gap: 6, paddingX: 8, paddingY: 6 },
19
+ default: { gap: 8, paddingX: 12, paddingY: 8 },
20
+ large: { gap: 8, paddingX: 16, paddingY: 12 },
21
+ },
17
22
  dialog: {
18
23
  small: { padding: 16, gap: 12, iconSize: 24 },
19
24
  default: { padding: 24, gap: 16, iconSize: 32 },
@@ -123,8 +128,67 @@ exports.themes = {
123
128
  default: { gap: 6, paddingX: 10, paddingY: 6, indicatorHeight: 2 },
124
129
  large: { gap: 8, paddingX: 12, paddingY: 8, indicatorHeight: 4 },
125
130
  },
131
+ bottomSheet: {
132
+ borderRadius: 16, handleWidth: 40, handleHeight: 4, handleGap: 8,
133
+ padding: 16, gap: 12,
134
+ },
135
+ link: {
136
+ small: { gap: 2 },
137
+ default: { gap: 4 },
138
+ large: { gap: 4 },
139
+ },
140
+ breadcrumbs: {
141
+ small: { gap: 4 },
142
+ default: { gap: 4 },
143
+ large: { gap: 8 },
144
+ },
145
+ codeBlock: {
146
+ borderRadius: 8,
147
+ small: { padding: 8, gap: 8 },
148
+ default: { padding: 12, gap: 8 },
149
+ large: { padding: 16, gap: 12 },
150
+ },
151
+ drawer: { padding: 16, gap: 12 },
152
+ menu: {
153
+ item: { gap: 8, paddingX: 8, paddingY: 4, borderRadius: 4 },
154
+ content: { paddingY: 2 },
155
+ group: { paddingX: 8, labelPaddingY: 6 },
156
+ separator: { marginY: 4 },
157
+ },
158
+ toggleButtonGroup: {
159
+ borderRadius: 8,
160
+ small: { paddingX: 6, paddingY: 2, gap: 4 },
161
+ default: { paddingX: 10, paddingY: 6, gap: 8 },
162
+ large: { paddingX: 20, paddingY: 14, gap: 16 },
163
+ },
164
+ appBar: {
165
+ small: { paddingX: 12, paddingY: 6, gap: 8 },
166
+ default: { paddingX: 16, paddingY: 8, gap: 8 },
167
+ large: { paddingX: 16, paddingY: 12, gap: 12 },
168
+ },
169
+ slider: {
170
+ borderRadius: 9999,
171
+ small: { trackHeight: 4, thumbSize: 12 },
172
+ default: { trackHeight: 6, thumbSize: 16 },
173
+ large: { trackHeight: 8, thumbSize: 20 },
174
+ },
175
+ speedDial: {
176
+ small: { fabSize: 40, actionSize: 32, gap: 6 },
177
+ default: { fabSize: 48, actionSize: 40, gap: 8 },
178
+ large: { fabSize: 64, actionSize: 48, gap: 12 },
179
+ },
180
+ table: {
181
+ small: { cellPaddingX: 8, cellPaddingY: 4 },
182
+ default: { cellPaddingX: 12, cellPaddingY: 8 },
183
+ large: { cellPaddingX: 16, cellPaddingY: 12 },
184
+ },
126
185
  },
127
186
  default: {
187
+ accordion: {
188
+ small: { gap: 8, paddingX: 12, paddingY: 8 },
189
+ default: { gap: 8, paddingX: 16, paddingY: 12 },
190
+ large: { gap: 12, paddingX: 20, paddingY: 16 },
191
+ },
128
192
  dialog: {
129
193
  small: { padding: 24, gap: 16, iconSize: 24 },
130
194
  default: { padding: 32, gap: 24, iconSize: 32 },
@@ -234,8 +298,67 @@ exports.themes = {
234
298
  default: { gap: 8, paddingX: 12, paddingY: 8, indicatorHeight: 2 },
235
299
  large: { gap: 8, paddingX: 16, paddingY: 10, indicatorHeight: 4 },
236
300
  },
301
+ bottomSheet: {
302
+ borderRadius: 16, handleWidth: 40, handleHeight: 4, handleGap: 8,
303
+ padding: 24, gap: 16,
304
+ },
305
+ link: {
306
+ small: { gap: 4 },
307
+ default: { gap: 4 },
308
+ large: { gap: 8 },
309
+ },
310
+ breadcrumbs: {
311
+ small: { gap: 4 },
312
+ default: { gap: 8 },
313
+ large: { gap: 8 },
314
+ },
315
+ codeBlock: {
316
+ borderRadius: 8,
317
+ small: { padding: 12, gap: 8 },
318
+ default: { padding: 16, gap: 12 },
319
+ large: { padding: 24, gap: 16 },
320
+ },
321
+ drawer: { padding: 24, gap: 16 },
322
+ menu: {
323
+ item: { gap: 12, paddingX: 12, paddingY: 6, borderRadius: 4 },
324
+ content: { paddingY: 4 },
325
+ group: { paddingX: 12, labelPaddingY: 6 },
326
+ separator: { marginY: 4 },
327
+ },
328
+ toggleButtonGroup: {
329
+ borderRadius: 8,
330
+ small: { paddingX: 10, paddingY: 6, gap: 8 },
331
+ default: { paddingX: 14, paddingY: 10, gap: 12 },
332
+ large: { paddingX: 24, paddingY: 16, gap: 20 },
333
+ },
334
+ appBar: {
335
+ small: { paddingX: 16, paddingY: 8, gap: 8 },
336
+ default: { paddingX: 16, paddingY: 12, gap: 12 },
337
+ large: { paddingX: 24, paddingY: 16, gap: 16 },
338
+ },
339
+ slider: {
340
+ borderRadius: 9999,
341
+ small: { trackHeight: 4, thumbSize: 12 },
342
+ default: { trackHeight: 6, thumbSize: 16 },
343
+ large: { trackHeight: 8, thumbSize: 20 },
344
+ },
345
+ speedDial: {
346
+ small: { fabSize: 40, actionSize: 32, gap: 8 },
347
+ default: { fabSize: 48, actionSize: 40, gap: 12 },
348
+ large: { fabSize: 64, actionSize: 48, gap: 16 },
349
+ },
350
+ table: {
351
+ small: { cellPaddingX: 12, cellPaddingY: 6 },
352
+ default: { cellPaddingX: 16, cellPaddingY: 12 },
353
+ large: { cellPaddingX: 24, cellPaddingY: 16 },
354
+ },
237
355
  },
238
356
  comfortable: {
357
+ accordion: {
358
+ small: { gap: 8, paddingX: 16, paddingY: 12 },
359
+ default: { gap: 12, paddingX: 20, paddingY: 16 },
360
+ large: { gap: 12, paddingX: 24, paddingY: 20 },
361
+ },
239
362
  dialog: {
240
363
  small: { padding: 40, gap: 24, iconSize: 24 },
241
364
  default: { padding: 40, gap: 32, iconSize: 32 },
@@ -345,5 +468,59 @@ exports.themes = {
345
468
  default: { gap: 8, paddingX: 16, paddingY: 10, indicatorHeight: 2 },
346
469
  large: { gap: 12, paddingX: 20, paddingY: 12, indicatorHeight: 4 },
347
470
  },
471
+ bottomSheet: {
472
+ borderRadius: 16, handleWidth: 40, handleHeight: 4, handleGap: 8,
473
+ padding: 32, gap: 24,
474
+ },
475
+ link: {
476
+ small: { gap: 4 },
477
+ default: { gap: 8 },
478
+ large: { gap: 8 },
479
+ },
480
+ breadcrumbs: {
481
+ small: { gap: 8 },
482
+ default: { gap: 8 },
483
+ large: { gap: 12 },
484
+ },
485
+ codeBlock: {
486
+ borderRadius: 8,
487
+ small: { padding: 16, gap: 12 },
488
+ default: { padding: 24, gap: 16 },
489
+ large: { padding: 32, gap: 24 },
490
+ },
491
+ drawer: { padding: 32, gap: 24 },
492
+ menu: {
493
+ item: { gap: 16, paddingX: 16, paddingY: 8, borderRadius: 4 },
494
+ content: { paddingY: 6 },
495
+ group: { paddingX: 16, labelPaddingY: 6 },
496
+ separator: { marginY: 4 },
497
+ },
498
+ toggleButtonGroup: {
499
+ borderRadius: 8,
500
+ small: { paddingX: 14, paddingY: 10, gap: 12 },
501
+ default: { paddingX: 20, paddingY: 14, gap: 16 },
502
+ large: { paddingX: 32, paddingY: 20, gap: 24 },
503
+ },
504
+ appBar: {
505
+ small: { paddingX: 16, paddingY: 12, gap: 12 },
506
+ default: { paddingX: 24, paddingY: 16, gap: 16 },
507
+ large: { paddingX: 32, paddingY: 20, gap: 20 },
508
+ },
509
+ slider: {
510
+ borderRadius: 9999,
511
+ small: { trackHeight: 4, thumbSize: 12 },
512
+ default: { trackHeight: 6, thumbSize: 16 },
513
+ large: { trackHeight: 8, thumbSize: 20 },
514
+ },
515
+ speedDial: {
516
+ small: { fabSize: 40, actionSize: 32, gap: 12 },
517
+ default: { fabSize: 48, actionSize: 40, gap: 16 },
518
+ large: { fabSize: 64, actionSize: 48, gap: 20 },
519
+ },
520
+ table: {
521
+ small: { cellPaddingX: 16, cellPaddingY: 8 },
522
+ default: { cellPaddingX: 20, cellPaddingY: 16 },
523
+ large: { cellPaddingX: 32, cellPaddingY: 24 },
524
+ },
348
525
  },
349
526
  };
@@ -288,10 +288,175 @@ export type SpinnerThemeTokens = {
288
288
  default: SpinnerSizeTokens;
289
289
  large: SpinnerSizeTokens;
290
290
  };
291
+ /**
292
+ * BottomSheet tokens. The sheet hugs its content up to a max height, so there
293
+ * are no size variants. `padding` and `gap` vary by density. The top corner
294
+ * radius and the drag handle dimensions are constant across density (handle
295
+ * width/height are keyed to primitive `size/*`, the radius to a primitive
296
+ * `radius/*`, the handle gap to `space/*`).
297
+ */
298
+ export type BottomSheetThemeTokens = {
299
+ /** Top-corner radius of the sheet. Constant. */
300
+ borderRadius: number;
301
+ /** Drag handle width. Constant. */
302
+ handleWidth: number;
303
+ /** Drag handle height. Constant. */
304
+ handleHeight: number;
305
+ /** Gap below the handle before the content. Constant. */
306
+ handleGap: number;
307
+ /** Content padding. Varies by density. */
308
+ padding: number;
309
+ /** Gap between stacked content sections. Varies by density. */
310
+ gap: number;
311
+ };
312
+ /** Spacing tokens for one accordion size variant. gap, paddingX, and paddingY
313
+ * all vary by density (bound to primitive space/*). The flush style has no
314
+ * border-radius, and the chevron / leading icon use the named Icon scale keyed
315
+ * by the `size` prop, so there are no constant dimension tokens. */
316
+ export type AccordionSizeTokens = {
317
+ gap: number;
318
+ paddingX: number;
319
+ paddingY: number;
320
+ };
321
+ /** Accordion tokens — three size variants, each density-varying. */
322
+ export type AccordionThemeTokens = {
323
+ small: AccordionSizeTokens;
324
+ default: AccordionSizeTokens;
325
+ large: AccordionSizeTokens;
326
+ };
291
327
  /**
292
328
  * Component-level tokens that vary by density theme.
293
329
  * Extended as new components are added to the library.
294
330
  */
331
+ /** Link spacing tokens for one size variant (icon/label gap, varies by density). */
332
+ export type LinkSizeTokens = {
333
+ gap: number;
334
+ };
335
+ /** Link tokens — gap varies by size and density. */
336
+ export type LinkThemeTokens = {
337
+ small: LinkSizeTokens;
338
+ default: LinkSizeTokens;
339
+ large: LinkSizeTokens;
340
+ };
341
+ /** Breadcrumbs spacing tokens for one size variant (row + icon gap, density). */
342
+ export type BreadcrumbsSizeTokens = {
343
+ gap: number;
344
+ };
345
+ /** Breadcrumbs tokens — gap varies by size and density. */
346
+ export type BreadcrumbsThemeTokens = {
347
+ small: BreadcrumbsSizeTokens;
348
+ default: BreadcrumbsSizeTokens;
349
+ large: BreadcrumbsSizeTokens;
350
+ };
351
+ /** CodeBlock spacing tokens for one size variant (padding + gap, density). */
352
+ export type CodeBlockSizeTokens = {
353
+ padding: number;
354
+ gap: number;
355
+ };
356
+ /** CodeBlock tokens — padding/gap vary by size and density; radius is constant. */
357
+ export type CodeBlockThemeTokens = {
358
+ borderRadius: number;
359
+ small: CodeBlockSizeTokens;
360
+ default: CodeBlockSizeTokens;
361
+ large: CodeBlockSizeTokens;
362
+ };
363
+ /**
364
+ * Drawer tokens. The panel hugs an edge with no size variants, like
365
+ * BottomSheet. padding and gap vary by density; the panel is square (no radius
366
+ * token), and the default width is a layout constant in code, not a token.
367
+ */
368
+ export type DrawerThemeTokens = {
369
+ padding: number;
370
+ gap: number;
371
+ };
372
+ /** Menu item spacing tokens (density-varying). */
373
+ export type MenuItemTokens = {
374
+ gap: number;
375
+ paddingX: number;
376
+ paddingY: number;
377
+ borderRadius: number;
378
+ };
379
+ /** Menu group (section label) tokens. */
380
+ export type MenuGroupTokens = {
381
+ paddingX: number;
382
+ labelPaddingY: number;
383
+ };
384
+ /** Menu tokens. Mirrors the select shape, namespaced to menu. Item spacing
385
+ * varies by density; the size prop drives typography. */
386
+ export type MenuThemeTokens = {
387
+ item: MenuItemTokens;
388
+ content: {
389
+ paddingY: number;
390
+ };
391
+ group: MenuGroupTokens;
392
+ separator: {
393
+ marginY: number;
394
+ };
395
+ };
396
+ /** Toggle button spacing tokens for one size variant (density-varying). */
397
+ export type ToggleButtonGroupSizeTokens = {
398
+ paddingX: number;
399
+ paddingY: number;
400
+ gap: number;
401
+ };
402
+ /** Toggle button group tokens — padding/gap vary by size and density; the group
403
+ * border-radius is constant. */
404
+ export type ToggleButtonGroupThemeTokens = {
405
+ borderRadius: number;
406
+ small: ToggleButtonGroupSizeTokens;
407
+ default: ToggleButtonGroupSizeTokens;
408
+ large: ToggleButtonGroupSizeTokens;
409
+ };
410
+ /** App bar spacing tokens for one size variant (density-varying). */
411
+ export type AppBarSizeTokens = {
412
+ paddingX: number;
413
+ paddingY: number;
414
+ gap: number;
415
+ };
416
+ /** App bar tokens — padding/gap vary by size and density. The bar height comes
417
+ * from the padding, so there is no height token. */
418
+ export type AppBarThemeTokens = {
419
+ small: AppBarSizeTokens;
420
+ default: AppBarSizeTokens;
421
+ large: AppBarSizeTokens;
422
+ };
423
+ /** Slider geometry for one size variant (constant across density). */
424
+ export type SliderSizeTokens = {
425
+ trackHeight: number;
426
+ thumbSize: number;
427
+ };
428
+ /** Slider tokens — track thickness + thumb size keyed by the size prop; pill
429
+ * radius constant. No density-varying spacing. */
430
+ export type SliderThemeTokens = {
431
+ borderRadius: number;
432
+ small: SliderSizeTokens;
433
+ default: SliderSizeTokens;
434
+ large: SliderSizeTokens;
435
+ };
436
+ /** Speed dial sizes for one size variant. fab/action sizes are constant per
437
+ * size; gap varies by density. */
438
+ export type SpeedDialSizeTokens = {
439
+ fabSize: number;
440
+ actionSize: number;
441
+ gap: number;
442
+ };
443
+ /** Speed dial tokens — three size variants. */
444
+ export type SpeedDialThemeTokens = {
445
+ small: SpeedDialSizeTokens;
446
+ default: SpeedDialSizeTokens;
447
+ large: SpeedDialSizeTokens;
448
+ };
449
+ /** Table cell padding for one size variant (density-varying). */
450
+ export type TableSizeTokens = {
451
+ cellPaddingX: number;
452
+ cellPaddingY: number;
453
+ };
454
+ /** Table tokens — three size variants. */
455
+ export type TableThemeTokens = {
456
+ small: TableSizeTokens;
457
+ default: TableSizeTokens;
458
+ large: TableSizeTokens;
459
+ };
295
460
  export type ComponentTokens = {
296
461
  button: ButtonThemeTokens;
297
462
  dialog: DialogThemeTokens;
@@ -311,7 +476,19 @@ export type ComponentTokens = {
311
476
  tooltip: TooltipThemeTokens;
312
477
  progress: ProgressThemeTokens;
313
478
  tabs: TabsThemeTokens;
479
+ accordion: AccordionThemeTokens;
314
480
  spinner: SpinnerThemeTokens;
481
+ bottomSheet: BottomSheetThemeTokens;
482
+ link: LinkThemeTokens;
483
+ breadcrumbs: BreadcrumbsThemeTokens;
484
+ codeBlock: CodeBlockThemeTokens;
485
+ drawer: DrawerThemeTokens;
486
+ menu: MenuThemeTokens;
487
+ toggleButtonGroup: ToggleButtonGroupThemeTokens;
488
+ appBar: AppBarThemeTokens;
489
+ slider: SliderThemeTokens;
490
+ speedDial: SpeedDialThemeTokens;
491
+ table: TableThemeTokens;
315
492
  };
316
493
  /** Utility type for partial overrides at any depth */
317
494
  export type DeepPartial<T> = {
@@ -95,6 +95,11 @@ export type ColorScheme = {
95
95
  /** Separator line colour */
96
96
  separator: string;
97
97
  };
98
+ /** Menu colours — item state colours (neutral) + separator. Mirrors select. */
99
+ menu: {
100
+ item: OptionStateColors;
101
+ separator: string;
102
+ };
98
103
  /** Tag tokens — multi-select pill styling (layout constant across modes) */
99
104
  tag: {
100
105
  bg: string;
@@ -204,6 +209,14 @@ export type ColorScheme = {
204
209
  spinner: {
205
210
  track: string;
206
211
  };
212
+ /**
213
+ * BottomSheet colours. The card surface reuses surface.overlay; the scrim
214
+ * reuses overlay.scrimOpacity. The drag handle is the one bespoke colour:
215
+ * control/bottom-sheet/handle/bg, a primitive grey that follows colour mode.
216
+ */
217
+ bottomSheet: {
218
+ handle: string;
219
+ };
207
220
  /** Avatar colours — initials/icon fallback surface + foreground */
208
221
  avatar: {
209
222
  bg: string;
@@ -222,6 +235,19 @@ export type ColorScheme = {
222
235
  separator: string;
223
236
  containerBg: string;
224
237
  };
238
+ /** Slider colours — track background (the fill uses the intent system). */
239
+ slider: {
240
+ track: string;
241
+ };
242
+ /** Table colours — header, borders, and row states (neutral/brand, reused). */
243
+ table: {
244
+ headerBg: string;
245
+ border: string;
246
+ rowHover: string;
247
+ stripe: string;
248
+ selectedBg: string;
249
+ selectedHoverBg: string;
250
+ };
225
251
  };
226
252
  export declare const lightColors: ColorScheme;
227
253
  export declare const darkColors: ColorScheme;
@@ -271,6 +297,11 @@ export declare const selectColors: {
271
297
  /** Separator line colour */
272
298
  separator: string;
273
299
  };
300
+ /** Menu colours — item state colours + separator (mirrors select). */
301
+ export declare const menuColors: {
302
+ item: OptionStateColors;
303
+ separator: string;
304
+ };
274
305
  /** Tag tokens — multi-select pill styling (constant across densities) */
275
306
  export declare const tagTokens: {
276
307
  bg: string;
@@ -382,6 +413,19 @@ export declare const skeletonColors: {
382
413
  bg: string;
383
414
  highlight: string;
384
415
  };
416
+ /** Slider colours — track background (fill comes from the intent system). */
417
+ export declare const sliderColors: {
418
+ track: string;
419
+ };
420
+ /** Table colours — header, borders, and row states. */
421
+ export declare const tableColors: {
422
+ headerBg: string;
423
+ border: string;
424
+ rowHover: string;
425
+ stripe: string;
426
+ selectedBg: string;
427
+ selectedHoverBg: string;
428
+ };
385
429
  /** List colours — used by List / ListItem / ListSubheader */
386
430
  export declare const listColors: {
387
431
  item: OptionStateColors;
@@ -15,7 +15,7 @@
15
15
  * the light-scheme values, kept for backwards compatibility.
16
16
  */
17
17
  Object.defineProperty(exports, "__esModule", { value: true });
18
- exports.listColors = exports.skeletonColors = exports.avatarColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.radioColors = exports.checkboxColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
18
+ exports.listColors = exports.tableColors = exports.sliderColors = exports.skeletonColors = exports.avatarColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.radioColors = exports.checkboxColors = exports.errorTokens = exports.tagTokens = exports.menuColors = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
19
19
  // ---------------------------------------------------------------------------
20
20
  // Light scheme — semantic-light mode
21
21
  // ---------------------------------------------------------------------------
@@ -96,6 +96,16 @@ exports.lightColors = {
96
96
  },
97
97
  separator: '#E5E7EB',
98
98
  },
99
+ menu: {
100
+ item: {
101
+ default: { bg: 'transparent', fg: '#374151' },
102
+ hover: { bg: '#F9FAFB', fg: '#111827' },
103
+ selected: { bg: '#EFF6FF', fg: '#1D4ED8' },
104
+ selectedHover: { bg: '#DBEAFE', fg: '#1D4ED8' },
105
+ disabled: { bg: 'transparent', fg: '#9CA3AF' },
106
+ },
107
+ separator: '#E5E7EB',
108
+ },
99
109
  tag: {
100
110
  bg: '#F3F4F6',
101
111
  fg: '#374151',
@@ -142,6 +152,7 @@ exports.lightColors = {
142
152
  progress: { track: '#E5E7EB' }, // control/progress/track/bg → cool-grey/200
143
153
  tabs: { track: '#E5E7EB' }, // control/tabs/track/bg → cool-grey/200
144
154
  spinner: { track: '#E5E7EB' }, // control/spinner/track/bg → cool-grey/200
155
+ bottomSheet: { handle: '#D1D5DB' }, // control/bottom-sheet/handle/bg → cool-grey/300
145
156
  avatar: { bg: '#F3F4F6', fg: '#374151' },
146
157
  skeleton: { bg: '#F3F4F6', highlight: '#E5E7EB' },
147
158
  list: {
@@ -157,6 +168,15 @@ exports.lightColors = {
157
168
  separator: '#E5E7EB',
158
169
  containerBg: '#FFFFFF',
159
170
  },
171
+ slider: { track: '#E5E7EB' }, // control/slider/track/bg -> cool-grey/200
172
+ table: {
173
+ headerBg: '#F3F4F6',
174
+ border: '#E5E7EB',
175
+ rowHover: '#F3F4F6',
176
+ stripe: '#F9FAFB',
177
+ selectedBg: '#EFF6FF',
178
+ selectedHoverBg: '#DBEAFE',
179
+ },
160
180
  };
161
181
  // ---------------------------------------------------------------------------
162
182
  // Dark scheme — semantic-dark mode
@@ -240,6 +260,16 @@ exports.darkColors = {
240
260
  },
241
261
  separator: '#374151',
242
262
  },
263
+ menu: {
264
+ item: {
265
+ default: { bg: 'transparent', fg: '#E5E7EB' },
266
+ hover: { bg: '#374151', fg: '#F9FAFB' },
267
+ selected: { bg: '#1E3A8A', fg: '#93C5FD' },
268
+ selectedHover: { bg: '#1E40AF', fg: '#93C5FD' },
269
+ disabled: { bg: 'transparent', fg: '#6B7280' },
270
+ },
271
+ separator: '#374151',
272
+ },
243
273
  tag: {
244
274
  bg: '#374151',
245
275
  fg: '#E5E7EB',
@@ -286,6 +316,7 @@ exports.darkColors = {
286
316
  progress: { track: '#374151' }, // control/progress/track/bg → cool-grey/700
287
317
  tabs: { track: '#374151' }, // control/tabs/track/bg → cool-grey/700
288
318
  spinner: { track: '#374151' }, // control/spinner/track/bg → cool-grey/700
319
+ bottomSheet: { handle: '#4B5563' }, // control/bottom-sheet/handle/bg → cool-grey/600
289
320
  avatar: { bg: '#374151', fg: '#E5E7EB' },
290
321
  skeleton: { bg: '#1F2937', highlight: '#374151' },
291
322
  list: {
@@ -301,6 +332,15 @@ exports.darkColors = {
301
332
  separator: '#374151',
302
333
  containerBg: '#1F2937',
303
334
  },
335
+ slider: { track: '#374151' }, // control/slider/track/bg -> cool-grey/700
336
+ table: {
337
+ headerBg: '#1F2937',
338
+ border: '#374151',
339
+ rowHover: '#374151',
340
+ stripe: '#111827',
341
+ selectedBg: '#1E3A8A',
342
+ selectedHoverBg: '#1E40AF',
343
+ },
304
344
  };
305
345
  /** Scheme lookup by colour mode */
306
346
  exports.colorSchemes = {
@@ -334,6 +374,8 @@ exports.overlayTokens = {
334
374
  };
335
375
  /** Option state colours — used by SelectOption (neutral intent) */
336
376
  exports.selectColors = exports.lightColors.select;
377
+ /** Menu colours — item state colours + separator (mirrors select). */
378
+ exports.menuColors = exports.lightColors.menu;
337
379
  /** Tag tokens — multi-select pill styling (constant across densities) */
338
380
  exports.tagTokens = exports.lightColors.tag;
339
381
  /** Error/danger colour for form field borders and helper text */
@@ -352,5 +394,9 @@ exports.tabsColors = exports.lightColors.tabs;
352
394
  exports.avatarColors = exports.lightColors.avatar;
353
395
  /** Skeleton colours — placeholder surface for loading states */
354
396
  exports.skeletonColors = exports.lightColors.skeleton;
397
+ /** Slider colours — track background (fill comes from the intent system). */
398
+ exports.sliderColors = exports.lightColors.slider;
399
+ /** Table colours — header, borders, and row states. */
400
+ exports.tableColors = exports.lightColors.table;
355
401
  /** List colours — used by List / ListItem / ListSubheader */
356
402
  exports.listColors = exports.lightColors.list;
@@ -1,3 +1,3 @@
1
- export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, } from './colors';
1
+ export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, menuColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, sliderColors, tableColors, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, } from './colors';
2
2
  export { fontFamily, fontWeight, label, title, body, heading, display, caption, type LabelSize, } from './typography';
3
3
  export { iconSize, type IconSize } from './icon';
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.iconSize = exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.checkboxColors = exports.listColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
3
+ exports.iconSize = exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.tableColors = exports.sliderColors = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.checkboxColors = exports.listColors = exports.errorTokens = exports.tagTokens = exports.menuColors = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
4
4
  var colors_1 = require("./colors");
5
5
  Object.defineProperty(exports, "lightColors", { enumerable: true, get: function () { return colors_1.lightColors; } });
6
6
  Object.defineProperty(exports, "darkColors", { enumerable: true, get: function () { return colors_1.darkColors; } });
@@ -12,6 +12,7 @@ Object.defineProperty(exports, "surfaceTokens", { enumerable: true, get: functio
12
12
  Object.defineProperty(exports, "textTokens", { enumerable: true, get: function () { return colors_1.textTokens; } });
13
13
  Object.defineProperty(exports, "overlayTokens", { enumerable: true, get: function () { return colors_1.overlayTokens; } });
14
14
  Object.defineProperty(exports, "selectColors", { enumerable: true, get: function () { return colors_1.selectColors; } });
15
+ Object.defineProperty(exports, "menuColors", { enumerable: true, get: function () { return colors_1.menuColors; } });
15
16
  Object.defineProperty(exports, "tagTokens", { enumerable: true, get: function () { return colors_1.tagTokens; } });
16
17
  Object.defineProperty(exports, "errorTokens", { enumerable: true, get: function () { return colors_1.errorTokens; } });
17
18
  Object.defineProperty(exports, "listColors", { enumerable: true, get: function () { return colors_1.listColors; } });
@@ -22,6 +23,8 @@ Object.defineProperty(exports, "tabsColors", { enumerable: true, get: function (
22
23
  Object.defineProperty(exports, "radioColors", { enumerable: true, get: function () { return colors_1.radioColors; } });
23
24
  Object.defineProperty(exports, "avatarColors", { enumerable: true, get: function () { return colors_1.avatarColors; } });
24
25
  Object.defineProperty(exports, "skeletonColors", { enumerable: true, get: function () { return colors_1.skeletonColors; } });
26
+ Object.defineProperty(exports, "sliderColors", { enumerable: true, get: function () { return colors_1.sliderColors; } });
27
+ Object.defineProperty(exports, "tableColors", { enumerable: true, get: function () { return colors_1.tableColors; } });
25
28
  var typography_1 = require("./typography");
26
29
  Object.defineProperty(exports, "fontFamily", { enumerable: true, get: function () { return typography_1.fontFamily; } });
27
30
  Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return typography_1.fontWeight; } });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@castui/cast-ui",
3
- "version": "4.7.0",
3
+ "version": "4.8.0",
4
4
  "description": "A cross-platform design system for React Native (iOS, Android, Web) with multi-theme support.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -14,6 +14,7 @@
14
14
  "sideEffects": false,
15
15
  "files": [
16
16
  "dist/",
17
+ "skills/",
17
18
  "README.md",
18
19
  "LICENSE"
19
20
  ],