@castui/cast-ui 4.6.0 → 4.7.0

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Spinner — indeterminate circular loading indicator.
+ *
+ * Maps 1:1 to the Figma <Spinner> component:
+ *   intent → neutral | brand | danger   (arc colour)
+ *   size   → small | default | large    (diameter + ring stroke)
+ *
+ * A Spinner is always indeterminate: it shows that work is happening, not how
+ * much is left. For a known percentage use <Progress> instead.
+ *
+ * Geometry. The diameter and ring stroke are the two tokens this component
+ * introduces (`spinner/{size}/diameter`, `spinner/{size}/stroke`). Both are
+ * keyed by the `size` prop and constant across the three densities, like
+ * <Progress> track-height. So Spinner reads no density-varying spacing. The
+ * ring radius is half the diameter, computed here.
+ *
+ * The ring is drawn with borders: all four sides take the faint track colour,
+ * then the top border takes the intent colour to form one visible arc. The
+ * whole ring rotates, so the arc sweeps around. This needs no SVG and keeps the
+ * zero-dependency contract.
+ *
+ * Colours. The arc binds to the intent system
+ * (`colors[intent].bold.default.bg`) so it tracks the host intent and any
+ * ThemeProvider colour overrides. The track ring is the dedicated
+ * `control/spinner/track/bg` semantic (cool-grey/200 light, cool-grey/700
+ * dark, matching the <Progress> track), mirrored as `scheme.spinner.track`, so
+ * it follows light/dark colour mode.
+ */
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type SpinnerSize = 'small' | 'default' | 'large';
+export type SpinnerProps = {
+    /** Semantic intent — drives the arc colour. */
+    intent?: IntentName;
+    /** Size variant — controls diameter and ring stroke. */
+    size?: SpinnerSize;
+    /** Outer style — use for positioning (margin, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — describes what is loading. */
+    accessibilityLabel?: string;
+};
+export declare function Spinner({ intent, size, style, accessibilityLabel, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = Spinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Spinner — indeterminate circular loading indicator.
+ *
+ * Maps 1:1 to the Figma <Spinner> component:
+ *   intent → neutral | brand | danger   (arc colour)
+ *   size   → small | default | large    (diameter + ring stroke)
+ *
+ * A Spinner is always indeterminate: it shows that work is happening, not how
+ * much is left. For a known percentage use <Progress> instead.
+ *
+ * Geometry. The diameter and ring stroke are the two tokens this component
+ * introduces (`spinner/{size}/diameter`, `spinner/{size}/stroke`). Both are
+ * keyed by the `size` prop and constant across the three densities, like
+ * <Progress> track-height. So Spinner reads no density-varying spacing. The
+ * ring radius is half the diameter, computed here.
+ *
+ * The ring is drawn with borders: all four sides take the faint track colour,
+ * then the top border takes the intent colour to form one visible arc. The
+ * whole ring rotates, so the arc sweeps around. This needs no SVG and keeps the
+ * zero-dependency contract.
+ *
+ * Colours. The arc binds to the intent system
+ * (`colors[intent].bold.default.bg`) so it tracks the host intent and any
+ * ThemeProvider colour overrides. The track ring is the dedicated
+ * `control/spinner/track/bg` semantic (cool-grey/200 light, cool-grey/700
+ * dark, matching the <Progress> track), mirrored as `scheme.spinner.track`, so
+ * it follows light/dark colour mode.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** One full rotation, in milliseconds. */
+const ROTATION_DURATION = 800;
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Spinner({ intent = 'brand', size = 'default', style, accessibilityLabel = 'Loading', }) {
+    const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const { diameter, stroke } = components.spinner[size];
+    const arc = colors[intent].bold.default.bg;
+    const trackColor = scheme.spinner.track;
+    const spin = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        spin.setValue(0);
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.timing(spin, {
+            toValue: 1,
+            duration: ROTATION_DURATION,
+            easing: react_native_1.Easing.linear,
+            useNativeDriver: true,
+        }));
+        loop.start();
+        return () => loop.stop();
+    }, [spin]);
+    const rotate = spin.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { accessibilityRole: "progressbar", accessibilityLabel: accessibilityLabel, accessibilityState: { busy: true }, style: [
+            {
+                width: diameter,
+                height: diameter,
+                borderRadius: diameter / 2,
+                borderWidth: stroke,
+                borderColor: trackColor,
+                borderTopColor: arc,
+                transform: [{ rotate }],
+            },
+            style,
+        ] }));
+}

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps, type SpinnerSize } from './Spinner';

package/dist/components/Spinner/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+var Spinner_1 = require("./Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });

package/dist/components/Tabs/Tabs.d.ts

@@ -26,7 +26,7 @@
  * `components.tabs`; `indicatorHeight` is keyed by `size` and constant across
  * density (like Progress's track-height); `indicatorRadius` is the pill radius.
  * Colours: the selected indicator and selected label bind to the intent system
- * (`colors[intent].bold.default.bg`); unselected labels use
+ * (`colors[intent].default.default.fg`); unselected labels use
  * `scheme.text.description`, hovered use `scheme.text.primary`, disabled use
  * `scheme.disabled.fg`; the baseline divider is the dedicated
  * `scheme.tabs.track` semantic (cool-grey/200 light, cool-grey/700 dark).

package/dist/components/Tabs/Tabs.js

@@ -31,7 +31,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * `components.tabs`; `indicatorHeight` is keyed by `size` and constant across
  * density (like Progress's track-height); `indicatorRadius` is the pill radius.
  * Colours: the selected indicator and selected label bind to the intent system
- * (`colors[intent].bold.default.bg`); unselected labels use
+ * (`colors[intent].default.default.fg`); unselected labels use
  * `scheme.text.description`, hovered use `scheme.text.primary`, disabled use
  * `scheme.disabled.fg`; the baseline divider is the dedicated
  * `scheme.tabs.track` semantic (cool-grey/200 light, cool-grey/700 dark).
@@ -69,7 +69,10 @@ function Tab({ value, children, leadingIcon, disabled = false, style, accessibil
     const sizeTokens = components.tabs[size];
     const { indicatorRadius } = components.tabs;
     const isSelected = selectedValue === value;
-    const accent = colors[intent].bold.default.bg;
+    // Selected label + indicator track the intent *fg* (text/line colour), mirroring
+    // the Figma binding intent/{intent}/default/default/fg — same hex as bold/bg in
+    // light, but correctly the text colour (not the solid fill) in dark mode.
+    const accent = colors[intent].default.default.fg;
     // Resolve the label/icon colour from interaction + selection state.
     const fg = disabled
         ? scheme.disabled.fg

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, fontFamily, fontWeight, label, title, body, heading, display, caption, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, type LabelSize, iconSize, type IconSize, } from './tokens';
-export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, type InputSizeTokens, type InputThemeTokens, type SelectContentTokens, type SelectOptionTokens, type SelectGroupTokens, type SelectSeparatorTokens, type SelectThemeTokens, type ListItemTokens, type ListSubheaderTokens, type ListThemeTokens, type CheckboxSizeTokens, type CheckboxThemeTokens, type AlertSizeTokens, type AlertThemeTokens, type ToggleSizeTokens, type ToggleThemeTokens, type CardSizeTokens, type CardThemeTokens, type BadgeSizeTokens, type BadgeThemeTokens, type RadioSizeTokens, type RadioThemeTokens, type ToastSizeTokens, type ToastThemeTokens, type ChipSizeTokens, type ChipThemeTokens, type AvatarSizeTokens, type AvatarThemeTokens, type PopoverSizeTokens, type PopoverThemeTokens, type TooltipSizeTokens, type TooltipThemeTokens, type ProgressSizeTokens, type ProgressThemeTokens, type TabsSizeTokens, type TabsThemeTokens, type DeepPartial, } from './theme';
+export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, type InputSizeTokens, type InputThemeTokens, type SelectContentTokens, type SelectOptionTokens, type SelectGroupTokens, type SelectSeparatorTokens, type SelectThemeTokens, type ListItemTokens, type ListSubheaderTokens, type ListThemeTokens, type CheckboxSizeTokens, type CheckboxThemeTokens, type AlertSizeTokens, type AlertThemeTokens, type ToggleSizeTokens, type ToggleThemeTokens, type CardSizeTokens, type CardThemeTokens, type BadgeSizeTokens, type BadgeThemeTokens, type RadioSizeTokens, type RadioThemeTokens, type ToastSizeTokens, type ToastThemeTokens, type ChipSizeTokens, type ChipThemeTokens, type AvatarSizeTokens, type AvatarThemeTokens, type PopoverSizeTokens, type PopoverThemeTokens, type TooltipSizeTokens, type TooltipThemeTokens, type ProgressSizeTokens, type ProgressThemeTokens, type TabsSizeTokens, type TabsThemeTokens, type SpinnerSizeTokens, type SpinnerThemeTokens, type DeepPartial, } from './theme';
 export { Button, type ButtonProps, type ButtonSize } from './components/Button';
 export { Icon, type IconProps } from './components/Icon';
 export { Dialog, DialogContent, type DialogProps, type DialogContentProps, type DialogAction, type DialogSize, } from './components/Dialog';
@@ -21,4 +21,5 @@ export { Skeleton, type SkeletonProps, type SkeletonShape, } from './components/
 export { Tooltip, type TooltipProps, type TooltipSize, type TooltipDirection, } from './components/Tooltip';
 export { Text, type TextProps, type TextType } from './components/Text';
 export { Progress, type ProgressProps, type ProgressSize } from './components/Progress';
+export { Spinner, type SpinnerProps, type SpinnerSize } from './components/Spinner';
 export { Tabs, Tab, type TabsProps, type TabProps, type TabsSize, } from './components/Tabs';

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = exports.Toggle = exports.Alert = exports.Checkbox = exports.ListDivider = exports.ListSubheader = exports.ListItem = exports.List = exports.SelectDropdown = exports.SelectTag = exports.SelectSeparator = exports.SelectGroup = exports.SelectOption = exports.Select = exports.DialogContent = exports.Dialog = exports.Icon = exports.Button = exports.themes = exports.useTheme = exports.ThemeProvider = 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.Tab = exports.Tabs = exports.Progress = exports.Text = exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = exports.Toast = exports.RadioGroup = exports.Radio = exports.Input = exports.Badge = void 0;
+exports.Tab = exports.Tabs = exports.Spinner = exports.Progress = exports.Text = exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = exports.Toast = exports.RadioGroup = exports.Radio = exports.Input = exports.Badge = void 0;
 // Cast UI — Cross-platform design system component library
 //
 // Tokens
@@ -93,6 +93,8 @@ var Text_1 = require("./components/Text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
 var Progress_1 = require("./components/Progress");
 Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return Progress_1.Progress; } });
+var Spinner_1 = require("./components/Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
 var Tabs_1 = require("./components/Tabs");
 Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
 Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tabs_1.Tab; } });

package/dist/theme/index.d.ts

@@ -1,3 +1,3 @@
 export { ThemeProvider, useTheme, type ThemeProviderProps, type Theme } from './ThemeContext';
 export { themes } from './themes';
-export type { DensityTheme, ComponentTokens, ButtonSizeTokens, ButtonThemeTokens, DialogSizeTokens, DialogThemeTokens, InputSizeTokens, InputThemeTokens, SelectContentTokens, SelectOptionTokens, SelectGroupTokens, SelectSeparatorTokens, SelectThemeTokens, ListItemTokens, ListSubheaderTokens, ListThemeTokens, CheckboxSizeTokens, CheckboxThemeTokens, AlertSizeTokens, AlertThemeTokens, ToggleSizeTokens, ToggleThemeTokens, CardSizeTokens, CardThemeTokens, BadgeSizeTokens, BadgeThemeTokens, RadioSizeTokens, RadioThemeTokens, ToastSizeTokens, ToastThemeTokens, ChipSizeTokens, ChipThemeTokens, AvatarSizeTokens, AvatarThemeTokens, PopoverSizeTokens, PopoverThemeTokens, TooltipSizeTokens, TooltipThemeTokens, ProgressSizeTokens, ProgressThemeTokens, TabsSizeTokens, TabsThemeTokens, DeepPartial, } from './types';
+export type { DensityTheme, ComponentTokens, ButtonSizeTokens, ButtonThemeTokens, DialogSizeTokens, DialogThemeTokens, InputSizeTokens, InputThemeTokens, SelectContentTokens, SelectOptionTokens, SelectGroupTokens, SelectSeparatorTokens, SelectThemeTokens, ListItemTokens, ListSubheaderTokens, ListThemeTokens, CheckboxSizeTokens, CheckboxThemeTokens, AlertSizeTokens, AlertThemeTokens, ToggleSizeTokens, ToggleThemeTokens, CardSizeTokens, CardThemeTokens, BadgeSizeTokens, BadgeThemeTokens, RadioSizeTokens, RadioThemeTokens, ToastSizeTokens, ToastThemeTokens, ChipSizeTokens, ChipThemeTokens, AvatarSizeTokens, AvatarThemeTokens, PopoverSizeTokens, PopoverThemeTokens, TooltipSizeTokens, TooltipThemeTokens, ProgressSizeTokens, ProgressThemeTokens, TabsSizeTokens, TabsThemeTokens, SpinnerSizeTokens, SpinnerThemeTokens, DeepPartial, } from './types';

package/dist/theme/themes.js

@@ -112,6 +112,11 @@ exports.themes = {
             default: { trackHeight: 8 },
             large: { trackHeight: 12 },
         },
+        spinner: {
+            small: { diameter: 16, stroke: 2 },
+            default: { diameter: 24, stroke: 2 },
+            large: { diameter: 32, stroke: 4 },
+        },
         tabs: {
             listGap: 8, indicatorRadius: 9999,
             small: { gap: 4, paddingX: 8, paddingY: 4, indicatorHeight: 2 },
@@ -218,6 +223,11 @@ exports.themes = {
             default: { trackHeight: 8 },
             large: { trackHeight: 12 },
         },
+        spinner: {
+            small: { diameter: 16, stroke: 2 },
+            default: { diameter: 24, stroke: 2 },
+            large: { diameter: 32, stroke: 4 },
+        },
         tabs: {
             listGap: 16, indicatorRadius: 9999,
             small: { gap: 6, paddingX: 10, paddingY: 6, indicatorHeight: 2 },
@@ -324,6 +334,11 @@ exports.themes = {
             default: { trackHeight: 8 },
             large: { trackHeight: 12 },
         },
+        spinner: {
+            small: { diameter: 16, stroke: 2 },
+            default: { diameter: 24, stroke: 2 },
+            large: { diameter: 32, stroke: 4 },
+        },
         tabs: {
             listGap: 24, indicatorRadius: 9999,
             small: { gap: 8, paddingX: 12, paddingY: 8, indicatorHeight: 2 },

package/dist/theme/types.d.ts

@@ -274,6 +274,20 @@ export type TabsThemeTokens = {
     default: TabsSizeTokens;
     large: TabsSizeTokens;
 };
+/** Spinner geometry for one size variant. Both values are keyed by the `size`
+ * prop and constant across density (like Progress track-height / Tabs
+ * indicator-height — bound to a primitive `size/*`). */
+export type SpinnerSizeTokens = {
+    diameter: number;
+    stroke: number;
+};
+/** Spinner tokens — diameter + ring stroke vary by the `size` prop and are
+ * constant across density. No density-varying spacing. */
+export type SpinnerThemeTokens = {
+    small: SpinnerSizeTokens;
+    default: SpinnerSizeTokens;
+    large: SpinnerSizeTokens;
+};
 /**
  * Component-level tokens that vary by density theme.
  * Extended as new components are added to the library.
@@ -297,6 +311,7 @@ export type ComponentTokens = {
     tooltip: TooltipThemeTokens;
     progress: ProgressThemeTokens;
     tabs: TabsThemeTokens;
+    spinner: SpinnerThemeTokens;
 };
 /** Utility type for partial overrides at any depth */
 export type DeepPartial<T> = {

package/dist/tokens/colors.d.ts

@@ -200,6 +200,10 @@ export type ColorScheme = {
     tabs: {
         track: string;
     };
+    /** Spinner colours — track ring background (the arc uses the intent system) */
+    spinner: {
+        track: string;
+    };
     /** Avatar colours — initials/icon fallback surface + foreground */
     avatar: {
         bg: string;

package/dist/tokens/colors.js

@@ -141,6 +141,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
     avatar: { bg: '#F3F4F6', fg: '#374151' },
     skeleton: { bg: '#F3F4F6', highlight: '#E5E7EB' },
     list: {
@@ -284,6 +285,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
     avatar: { bg: '#374151', fg: '#E5E7EB' },
     skeleton: { bg: '#1F2937', highlight: '#374151' },
     list: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castui/cast-ui",
-  "version": "4.6.0",
+  "version": "4.7.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",