@castui/cast-ui 4.7.0 → 4.9.0

package/dist/tokens/colors.js

@@ -15,7 +15,7 @@
  * the light-scheme values, kept for backwards compatibility.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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;
 // ---------------------------------------------------------------------------
 // Light scheme — semantic-light mode
 // ---------------------------------------------------------------------------
@@ -96,6 +96,16 @@ exports.lightColors = {
         },
         separator: '#E5E7EB',
     },
+    menu: {
+        item: {
+            default: { bg: 'transparent', fg: '#374151' },
+            hover: { bg: '#F9FAFB', fg: '#111827' },
+            selected: { bg: '#EFF6FF', fg: '#1D4ED8' },
+            selectedHover: { bg: '#DBEAFE', fg: '#1D4ED8' },
+            disabled: { bg: 'transparent', fg: '#9CA3AF' },
+        },
+        separator: '#E5E7EB',
+    },
     tag: {
         bg: '#F3F4F6',
         fg: '#374151',
@@ -142,6 +152,7 @@ exports.lightColors = {
     progress: { track: '#E5E7EB' }, // control/progress/track/bg → cool-grey/200
     tabs: { track: '#E5E7EB' }, // control/tabs/track/bg → cool-grey/200
     spinner: { track: '#E5E7EB' }, // control/spinner/track/bg → cool-grey/200
+    bottomSheet: { handle: '#D1D5DB' }, // control/bottom-sheet/handle/bg → cool-grey/300
     avatar: { bg: '#F3F4F6', fg: '#374151' },
     skeleton: { bg: '#F3F4F6', highlight: '#E5E7EB' },
     list: {
@@ -157,6 +168,15 @@ exports.lightColors = {
         separator: '#E5E7EB',
         containerBg: '#FFFFFF',
     },
+    slider: { track: '#E5E7EB' }, // control/slider/track/bg -> cool-grey/200
+    table: {
+        headerBg: '#F3F4F6',
+        border: '#E5E7EB',
+        rowHover: '#F3F4F6',
+        stripe: '#F9FAFB',
+        selectedBg: '#EFF6FF',
+        selectedHoverBg: '#DBEAFE',
+    },
 };
 // ---------------------------------------------------------------------------
 // Dark scheme — semantic-dark mode
@@ -240,6 +260,16 @@ exports.darkColors = {
         },
         separator: '#374151',
     },
+    menu: {
+        item: {
+            default: { bg: 'transparent', fg: '#E5E7EB' },
+            hover: { bg: '#374151', fg: '#F9FAFB' },
+            selected: { bg: '#1E3A8A', fg: '#93C5FD' },
+            selectedHover: { bg: '#1E40AF', fg: '#93C5FD' },
+            disabled: { bg: 'transparent', fg: '#6B7280' },
+        },
+        separator: '#374151',
+    },
     tag: {
         bg: '#374151',
         fg: '#E5E7EB',
@@ -286,6 +316,7 @@ exports.darkColors = {
     progress: { track: '#374151' }, // control/progress/track/bg → cool-grey/700
     tabs: { track: '#374151' }, // control/tabs/track/bg → cool-grey/700
     spinner: { track: '#374151' }, // control/spinner/track/bg → cool-grey/700
+    bottomSheet: { handle: '#4B5563' }, // control/bottom-sheet/handle/bg → cool-grey/600
     avatar: { bg: '#374151', fg: '#E5E7EB' },
     skeleton: { bg: '#1F2937', highlight: '#374151' },
     list: {
@@ -301,6 +332,15 @@ exports.darkColors = {
         separator: '#374151',
         containerBg: '#1F2937',
     },
+    slider: { track: '#374151' }, // control/slider/track/bg -> cool-grey/700
+    table: {
+        headerBg: '#1F2937',
+        border: '#374151',
+        rowHover: '#374151',
+        stripe: '#111827',
+        selectedBg: '#1E3A8A',
+        selectedHoverBg: '#1E40AF',
+    },
 };
 /** Scheme lookup by colour mode */
 exports.colorSchemes = {
@@ -334,6 +374,8 @@ exports.overlayTokens = {
 };
 /** Option state colours — used by SelectOption (neutral intent) */
 exports.selectColors = exports.lightColors.select;
+/** Menu colours — item state colours + separator (mirrors select). */
+exports.menuColors = exports.lightColors.menu;
 /** Tag tokens — multi-select pill styling (constant across densities) */
 exports.tagTokens = exports.lightColors.tag;
 /** Error/danger colour for form field borders and helper text */
@@ -352,5 +394,9 @@ exports.tabsColors = exports.lightColors.tabs;
 exports.avatarColors = exports.lightColors.avatar;
 /** Skeleton colours — placeholder surface for loading states */
 exports.skeletonColors = exports.lightColors.skeleton;
+/** Slider colours — track background (fill comes from the intent system). */
+exports.sliderColors = exports.lightColors.slider;
+/** Table colours — header, borders, and row states. */
+exports.tableColors = exports.lightColors.table;
 /** List colours — used by List / ListItem / ListSubheader */
 exports.listColors = exports.lightColors.list;

package/dist/tokens/index.d.ts

@@ -1,3 +1,4 @@
-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';
+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';
 export { fontFamily, fontWeight, label, title, body, heading, display, caption, type LabelSize, } from './typography';
 export { iconSize, type IconSize } from './icon';
+export { breakpoints, breakpointOrder, resolveBreakpoint, resolveResponsiveValue, type Breakpoint, type BreakpointKey, } from './breakpoints';

package/dist/tokens/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.resolveResponsiveValue = exports.resolveBreakpoint = exports.breakpointOrder = exports.breakpoints = 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;
 var colors_1 = require("./colors");
 Object.defineProperty(exports, "lightColors", { enumerable: true, get: function () { return colors_1.lightColors; } });
 Object.defineProperty(exports, "darkColors", { enumerable: true, get: function () { return colors_1.darkColors; } });
@@ -12,6 +12,7 @@ Object.defineProperty(exports, "surfaceTokens", { enumerable: true, get: functio
 Object.defineProperty(exports, "textTokens", { enumerable: true, get: function () { return colors_1.textTokens; } });
 Object.defineProperty(exports, "overlayTokens", { enumerable: true, get: function () { return colors_1.overlayTokens; } });
 Object.defineProperty(exports, "selectColors", { enumerable: true, get: function () { return colors_1.selectColors; } });
+Object.defineProperty(exports, "menuColors", { enumerable: true, get: function () { return colors_1.menuColors; } });
 Object.defineProperty(exports, "tagTokens", { enumerable: true, get: function () { return colors_1.tagTokens; } });
 Object.defineProperty(exports, "errorTokens", { enumerable: true, get: function () { return colors_1.errorTokens; } });
 Object.defineProperty(exports, "listColors", { enumerable: true, get: function () { return colors_1.listColors; } });
@@ -22,6 +23,8 @@ Object.defineProperty(exports, "tabsColors", { enumerable: true, get: function (
 Object.defineProperty(exports, "radioColors", { enumerable: true, get: function () { return colors_1.radioColors; } });
 Object.defineProperty(exports, "avatarColors", { enumerable: true, get: function () { return colors_1.avatarColors; } });
 Object.defineProperty(exports, "skeletonColors", { enumerable: true, get: function () { return colors_1.skeletonColors; } });
+Object.defineProperty(exports, "sliderColors", { enumerable: true, get: function () { return colors_1.sliderColors; } });
+Object.defineProperty(exports, "tableColors", { enumerable: true, get: function () { return colors_1.tableColors; } });
 var typography_1 = require("./typography");
 Object.defineProperty(exports, "fontFamily", { enumerable: true, get: function () { return typography_1.fontFamily; } });
 Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return typography_1.fontWeight; } });
@@ -33,3 +36,8 @@ Object.defineProperty(exports, "display", { enumerable: true, get: function () {
 Object.defineProperty(exports, "caption", { enumerable: true, get: function () { return typography_1.caption; } });
 var icon_1 = require("./icon");
 Object.defineProperty(exports, "iconSize", { enumerable: true, get: function () { return icon_1.iconSize; } });
+var breakpoints_1 = require("./breakpoints");
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return breakpoints_1.breakpoints; } });
+Object.defineProperty(exports, "breakpointOrder", { enumerable: true, get: function () { return breakpoints_1.breakpointOrder; } });
+Object.defineProperty(exports, "resolveBreakpoint", { enumerable: true, get: function () { return breakpoints_1.resolveBreakpoint; } });
+Object.defineProperty(exports, "resolveResponsiveValue", { enumerable: true, get: function () { return breakpoints_1.resolveResponsiveValue; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castui/cast-ui",
-  "version": "4.7.0",
+  "version": "4.9.0",
   "description": "A cross-platform design system for React Native (iOS, Android, Web) with multi-theme support.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,6 +14,7 @@
   "sideEffects": false,
   "files": [
     "dist/",
+    "skills/",
     "README.md",
     "LICENSE"
   ],