@castui/cast-ui 4.6.0 → 4.8.0

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Link — an inline or standalone text link.
+ *
+ * Maps 1:1 to the Figma <Link> component:
+ *   intent     → neutral | brand | danger   (link colour)
+ *   prominence is fixed to the subtle scheme (coloured text, no fill)
+ *   size       → small | default | large    (typography + icon size + gap)
+ *   underline  → none | hover | always
+ *
+ * Colours come from the intent system's subtle prominence fg
+ * (colors[intent].subtle.{state}.fg). Brand is the default, so a link reads
+ * blue by default and the darker blue on hover; disabled uses the shared
+ * disabled fg. The gap between an icon and the label is the one spacing token
+ * (link/{size}/gap), density-varying. Typography is the label scale matched to
+ * size; the icon size follows the named Icon scale 1:1 (small→16, default→20,
+ * large→24), like Button.
+ *
+ * Links navigate. On web, passing `href` renders a real anchor through
+ * react-native-web; on native it is informational and `onPress` drives
+ * navigation. Fonts are consumer-loaded (Inter).
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp, type GestureResponderEvent } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type LinkSize = 'small' | 'default' | 'large';
+export type LinkUnderline = 'none' | 'hover' | 'always';
+export type LinkProps = {
+    /** The link text. */
+    children: string;
+    /** Semantic intent — drives the link colour. Defaults to brand. */
+    intent?: IntentName;
+    /** Size variant — controls typography scale, icon size, and gap. */
+    size?: LinkSize;
+    /** When the underline shows. Defaults to "hover". */
+    underline?: LinkUnderline;
+    /** Disables interaction and applies muted styling. */
+    disabled?: boolean;
+    /** Icon before the label — Material Symbols name string or a ReactNode. */
+    leadingIcon?: string | React.ReactNode;
+    /** Icon after the label — Material Symbols name string or a ReactNode. */
+    trailingIcon?: string | React.ReactNode;
+    /** Destination URL. Renders a real anchor on web; informational on native. */
+    href?: string;
+    /** Press handler. */
+    onPress?: (e: GestureResponderEvent) => void;
+    /** Outer style — use for positioning (margin, flex, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the link text. */
+    accessibilityLabel?: string;
+};
+export declare function Link({ children, intent, size, underline, disabled, leadingIcon, trailingIcon, href, onPress, style, accessibilityLabel, }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Link/Link.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = Link;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Link — an inline or standalone text link.
+ *
+ * Maps 1:1 to the Figma <Link> component:
+ *   intent     → neutral | brand | danger   (link colour)
+ *   prominence is fixed to the subtle scheme (coloured text, no fill)
+ *   size       → small | default | large    (typography + icon size + gap)
+ *   underline  → none | hover | always
+ *
+ * Colours come from the intent system's subtle prominence fg
+ * (colors[intent].subtle.{state}.fg). Brand is the default, so a link reads
+ * blue by default and the darker blue on hover; disabled uses the shared
+ * disabled fg. The gap between an icon and the label is the one spacing token
+ * (link/{size}/gap), density-varying. Typography is the label scale matched to
+ * size; the icon size follows the named Icon scale 1:1 (small→16, default→20,
+ * large→24), like Button.
+ *
+ * Links navigate. On web, passing `href` renders a real anchor through
+ * react-native-web; on native it is informational and `onPress` drives
+ * navigation. Fonts are consumer-loaded (Inter).
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+const Icon_1 = require("../Icon");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Maps link size → label typography scale. */
+const LABEL_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Link({ children, intent = 'brand', size = 'default', underline = 'hover', disabled = false, leadingIcon, trailingIcon, href, onPress, style, accessibilityLabel, }) {
+    const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const { gap } = components.link[size];
+    const labelTokens = tokens_1.label[LABEL_SCALE[size]];
+    const subtle = colors[intent].subtle;
+    const fg = disabled
+        ? scheme.disabled.fg
+        : isHovered
+            ? subtle.hover.fg
+            : subtle.default.fg;
+    const showUnderline = underline === 'always' || (underline === 'hover' && isHovered && !disabled);
+    const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: size, color: fg })) : (leadingIcon);
+    const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: size, color: fg })) : (trailingIcon);
+    // react-native-web forwards `href` to render an <a>; native ignores it.
+    const hrefProps = href ? { href } : {};
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...hrefProps, onPress: disabled ? undefined : onPress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: "link", accessibilityLabel: accessibilityLabel || children, accessibilityState: { disabled }, style: style, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                alignSelf: 'flex-start',
+                gap,
+            }, children: [resolvedLeading, (0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: false, style: {
+                        fontFamily: tokens_1.fontFamily.sans,
+                        fontWeight: tokens_1.fontWeight.medium,
+                        fontSize: labelTokens.fontSize,
+                        lineHeight: labelTokens.lineHeight,
+                        letterSpacing: labelTokens.letterSpacing,
+                        color: fg,
+                        textDecorationLine: showUnderline ? 'underline' : 'none',
+                    }, children: children }), resolvedTrailing] }) }));
+}

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

@@ -0,0 +1 @@
+export { Link, type LinkProps, type LinkSize, type LinkUnderline } from './Link';

package/dist/components/Link/index.js

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

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Menu — a transient overlay of actions, anchored to a trigger.
+ *
+ * Compound component. <Menu> owns the open state and the anchored overlay;
+ * <MenuItem> is one action row; <MenuDivider> separates groups; <MenuLabel> is
+ * a section heading.
+ *
+ *   <Menu trigger={<Icon name="more_vert" />}>
+ *     <MenuItem leadingIcon="edit" onPress={edit}>Edit</MenuItem>
+ *     <MenuItem leadingIcon="content_copy" onPress={dupe}>Duplicate</MenuItem>
+ *     <MenuDivider />
+ *     <MenuItem leadingIcon="delete" intent="danger" onPress={remove}>Delete</MenuItem>
+ *   </Menu>
+ *
+ * Maps 1:1 to the Figma <Menu> component:
+ *   size  → small | default | large   (item typography + icon size)
+ *   item state → default | hover | selected | disabled
+ *
+ * A Menu is not a Select. It fires actions; it does not hold a form value. So it
+ * has its own dedicated tokens (menu/*) and its own colour slice
+ * (scheme.menu.item), mirroring the select shape but namespaced to menu, so the
+ * Figma <Menu> set binds to menu variables, not select ones. Item spacing varies
+ * by density; the size prop drives typography (like Select). Surface reuses the
+ * shared overlay tokens. Fonts are consumer-loaded.
+ *
+ * Exports:
+ *   Menu        — trigger + anchored overlay
+ *   MenuItem    — one action row
+ *   MenuDivider — a separator line
+ *   MenuLabel   — a section heading
+ *   MenuContent — the floating card, for custom overlay/anchoring
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp, type GestureResponderEvent } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type MenuSize = 'small' | 'default' | 'large';
+export type MenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+export type MenuProps = {
+    /** The element that opens the menu. Menu owns the press. */
+    trigger: React.ReactNode;
+    /** Menu rows (MenuItem / MenuDivider / MenuLabel). */
+    children: React.ReactNode;
+    /** Size variant — item typography and icon size. */
+    size?: MenuSize;
+    /** Where the overlay opens relative to the trigger. */
+    placement?: MenuPlacement;
+    /** Controlled open state. Omit for uncontrolled. */
+    open?: boolean;
+    /** Open-state change handler. */
+    onOpenChange?: (open: boolean) => void;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Close the menu when an item is pressed. Defaults to true. */
+    closeOnSelect?: boolean;
+    /** Outer style for the anchor wrapper. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the trigger. */
+    accessibilityLabel?: string;
+};
+export type MenuItemProps = {
+    /** The item label. */
+    children: string;
+    /** Press handler. */
+    onPress?: (e: GestureResponderEvent) => void;
+    /** Leading icon — Material Symbols name string or a ReactNode. */
+    leadingIcon?: string | React.ReactNode;
+    /** Trailing icon — Material Symbols name string or a ReactNode. */
+    trailingIcon?: string | React.ReactNode;
+    /** Keyboard shortcut hint shown at the end of the row. */
+    shortcut?: string;
+    /** Marks the item as active. Shows the selected colours and a check. */
+    selected?: boolean;
+    /** Intent — neutral (default) or danger for destructive actions. */
+    intent?: Extract<IntentName, 'neutral' | 'danger'>;
+    /** Disables the item. */
+    disabled?: boolean;
+    /** Accessibility label — falls back to the label text. */
+    accessibilityLabel?: string;
+};
+export type MenuLabelProps = {
+    children: string;
+};
+export declare function MenuItem({ children, onPress, leadingIcon, trailingIcon, shortcut, selected, intent, disabled, accessibilityLabel, }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuLabel({ children }: MenuLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuDivider(): import("react/jsx-runtime").JSX.Element;
+export type MenuContentProps = {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+export declare function MenuContent({ children, style }: MenuContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ trigger, children, size, placement, open: controlledOpen, onOpenChange, defaultOpen, closeOnSelect, style, accessibilityLabel, }: MenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/Menu.js

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = MenuItem;
+exports.MenuLabel = MenuLabel;
+exports.MenuDivider = MenuDivider;
+exports.MenuContent = MenuContent;
+exports.Menu = Menu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Menu — a transient overlay of actions, anchored to a trigger.
+ *
+ * Compound component. <Menu> owns the open state and the anchored overlay;
+ * <MenuItem> is one action row; <MenuDivider> separates groups; <MenuLabel> is
+ * a section heading.
+ *
+ *   <Menu trigger={<Icon name="more_vert" />}>
+ *     <MenuItem leadingIcon="edit" onPress={edit}>Edit</MenuItem>
+ *     <MenuItem leadingIcon="content_copy" onPress={dupe}>Duplicate</MenuItem>
+ *     <MenuDivider />
+ *     <MenuItem leadingIcon="delete" intent="danger" onPress={remove}>Delete</MenuItem>
+ *   </Menu>
+ *
+ * Maps 1:1 to the Figma <Menu> component:
+ *   size  → small | default | large   (item typography + icon size)
+ *   item state → default | hover | selected | disabled
+ *
+ * A Menu is not a Select. It fires actions; it does not hold a form value. So it
+ * has its own dedicated tokens (menu/*) and its own colour slice
+ * (scheme.menu.item), mirroring the select shape but namespaced to menu, so the
+ * Figma <Menu> set binds to menu variables, not select ones. Item spacing varies
+ * by density; the size prop drives typography (like Select). Surface reuses the
+ * shared overlay tokens. Fonts are consumer-loaded.
+ *
+ * Exports:
+ *   Menu        — trigger + anchored overlay
+ *   MenuItem    — one action row
+ *   MenuDivider — a separator line
+ *   MenuLabel   — a section heading
+ *   MenuContent — the floating card, for custom overlay/anchoring
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+const Text_1 = require("../Text");
+const Icon_1 = require("../Icon");
+const MenuCtx = (0, react_1.createContext)(null);
+function useMenuContext(component) {
+    const ctx = (0, react_1.useContext)(MenuCtx);
+    if (!ctx)
+        throw new Error(`<${component}> must be used within <Menu>`);
+    return ctx;
+}
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Maps menu size → label typography scale (Text component `type`). */
+const LABEL_TYPE = {
+    small: 'label-sm',
+    default: 'label-md',
+    large: 'label-lg',
+};
+/** Minimum width of the floating card. Layout default, not a token. */
+const MIN_WIDTH = 180;
+/** The card never grows past this height before it scrolls. */
+const CONTENT_MAX_HEIGHT = 320;
+const SHADOW_WEB = {
+    boxShadow: '0px 2px 4px -2px rgba(0,0,0,0.05), 0px 4px 6px -1px rgba(0,0,0,0.07)',
+};
+const SHADOW_NATIVE = {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.07,
+    shadowRadius: 6,
+    elevation: 4,
+};
+// ---------------------------------------------------------------------------
+// MenuItem
+// ---------------------------------------------------------------------------
+function MenuItem({ children, onPress, leadingIcon, trailingIcon, shortcut, selected = false, intent = 'neutral', disabled = false, accessibilityLabel, }) {
+    const { size, onClose, closeOnSelect } = useMenuContext('MenuItem');
+    const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const tokens = components.menu.item;
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    // Danger items use the intent system; neutral items use scheme.menu.item.
+    const danger = intent === 'danger';
+    const state = disabled
+        ? scheme.menu.item.disabled
+        : selected && isHovered
+            ? scheme.menu.item.selectedHover
+            : selected
+                ? scheme.menu.item.selected
+                : isHovered
+                    ? scheme.menu.item.hover
+                    : scheme.menu.item.default;
+    const fg = disabled
+        ? scheme.menu.item.disabled.fg
+        : danger
+            ? isHovered
+                ? colors.danger.subtle.hover.fg
+                : colors.danger.subtle.default.fg
+            : state.fg;
+    const bg = danger && isHovered && !disabled ? colors.danger.subtle.hover.bg : state.bg;
+    const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: size, color: fg })) : (leadingIcon);
+    const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: size, color: fg })) : (trailingIcon);
+    const handlePress = (e) => {
+        if (disabled)
+            return;
+        onPress?.(e);
+        if (closeOnSelect)
+            onClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: handlePress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: "menuitem", accessibilityLabel: accessibilityLabel || children, accessibilityState: { disabled, selected }, style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: tokens.gap,
+            paddingHorizontal: tokens.paddingX,
+            paddingVertical: tokens.paddingY,
+            borderRadius: tokens.borderRadius,
+            backgroundColor: bg,
+        }, children: [resolvedLeading, (0, jsx_runtime_1.jsx)(Text_1.Text, { type: LABEL_TYPE[size], color: fg, selectable: false, style: { flex: 1 }, children: children }), shortcut ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { type: "caption", color: scheme.text.description, selectable: false, children: shortcut })) : null, selected && !disabled ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: size, color: fg }) : resolvedTrailing] }));
+}
+// ---------------------------------------------------------------------------
+// MenuLabel + MenuDivider
+// ---------------------------------------------------------------------------
+function MenuLabel({ children }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const tokens = components.menu.group;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { paddingHorizontal: tokens.paddingX, paddingVertical: tokens.labelPaddingY }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { type: "caption", color: scheme.text.description, selectable: false, style: { textTransform: 'uppercase' }, children: children }) }));
+}
+function MenuDivider() {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const tokens = components.menu.separator;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { paddingVertical: tokens.marginY }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { height: 1, backgroundColor: scheme.menu.separator } }) }));
+}
+function MenuContent({ children, style }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const tokens = components.menu.content;
+    const surface = scheme.surface;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            {
+                minWidth: MIN_WIDTH,
+                backgroundColor: surface.overlay.bg,
+                borderWidth: tokens_1.controlTokens.borderWidth,
+                borderColor: surface.overlay.border,
+                borderRadius: surface.overlay.borderRadius,
+                paddingVertical: tokens.paddingY,
+                maxHeight: CONTENT_MAX_HEIGHT,
+                ...(react_native_1.Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
+            },
+            style,
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { nestedScrollEnabled: true, keyboardShouldPersistTaps: "handled", children: children }) }));
+}
+// ---------------------------------------------------------------------------
+// Menu — trigger + anchored overlay
+// ---------------------------------------------------------------------------
+/** Absolute-position styles for the four placements. */
+function placementStyle(placement) {
+    switch (placement) {
+        case 'bottom-end':
+            return { position: 'absolute', top: '100%', right: 0, paddingTop: 4 };
+        case 'top-start':
+            return { position: 'absolute', bottom: '100%', left: 0, paddingBottom: 4 };
+        case 'top-end':
+            return { position: 'absolute', bottom: '100%', right: 0, paddingBottom: 4 };
+        case 'bottom-start':
+        default:
+            return { position: 'absolute', top: '100%', left: 0, paddingTop: 4 };
+    }
+}
+function Menu({ trigger, children, size = 'default', placement = 'bottom-start', open: controlledOpen, onOpenChange, defaultOpen = false, closeOnSelect = true, style, accessibilityLabel, }) {
+    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : internalOpen;
+    const setOpen = (next) => {
+        if (!isControlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    };
+    // Escape closes the menu on web.
+    (0, react_1.useEffect)(() => {
+        if (!open || react_native_1.Platform.OS !== 'web')
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                setOpen(false);
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ alignSelf: 'flex-start', position: 'relative', zIndex: open ? 1000 : 0 }, style], children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setOpen(!open), accessibilityRole: "button", accessibilityLabel: accessibilityLabel || 'Open menu', accessibilityState: { expanded: open }, children: trigger }), open ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setOpen(false), accessibilityRole: "button", accessibilityLabel: "Close menu", style: react_native_1.Platform.select({
+                    web: {
+                        position: 'fixed',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 0,
+                    },
+                    default: {
+                        position: 'absolute',
+                        top: -9999,
+                        left: -9999,
+                        width: 99999,
+                        height: 99999,
+                    },
+                }) })) : null, open ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [placementStyle(placement), { zIndex: 1 }], children: (0, jsx_runtime_1.jsx)(MenuCtx.Provider, { value: { size, onClose: () => setOpen(false), closeOnSelect }, children: (0, jsx_runtime_1.jsx)(MenuContent, { children: children }) }) })) : null] }));
+}

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

@@ -0,0 +1 @@
+export { Menu, MenuItem, MenuDivider, MenuLabel, MenuContent, type MenuProps, type MenuItemProps, type MenuLabelProps, type MenuContentProps, type MenuSize, type MenuPlacement, } from './Menu';

package/dist/components/Menu/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuContent = exports.MenuLabel = exports.MenuDivider = exports.MenuItem = exports.Menu = void 0;
+var Menu_1 = require("./Menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return Menu_1.Menu; } });
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return Menu_1.MenuItem; } });
+Object.defineProperty(exports, "MenuDivider", { enumerable: true, get: function () { return Menu_1.MenuDivider; } });
+Object.defineProperty(exports, "MenuLabel", { enumerable: true, get: function () { return Menu_1.MenuLabel; } });
+Object.defineProperty(exports, "MenuContent", { enumerable: true, get: function () { return Menu_1.MenuContent; } });

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Slider — drag a thumb along a track to pick a number.
+ *
+ * Maps 1:1 to the Figma <Slider> component:
+ *   intent → neutral | brand | danger   (filled portion + thumb ring)
+ *   size   → small | default | large     (track thickness + thumb size)
+ *   value  → min..max                     (single value)
+ *
+ * Drag the thumb or tap the track to set the value. Built on PanResponder, so
+ * it works the same on web and native with zero dependencies. value is
+ * controlled with value/onValueChange, or uncontrolled with defaultValue.
+ *
+ * Tokens: slider/{size}/track-height and slider/{size}/thumb-size are keyed by
+ * the size prop and constant across density (like Progress's track-height);
+ * slider/border-radius is the pill radius. The track background is the dedicated
+ * control/slider/track/bg semantic (scheme.slider.track, cool-grey/200 light,
+ * cool-grey/700 dark); the filled portion reuses the intent system
+ * (colors[intent].bold.default.bg). No density-varying spacing.
+ */
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type SliderSize = 'small' | 'default' | 'large';
+export type SliderProps = {
+    /** Current value (controlled). */
+    value?: number;
+    /** Initial value (uncontrolled). */
+    defaultValue?: number;
+    /** Called with the new value while dragging or on tap. */
+    onValueChange?: (value: number) => void;
+    /** Minimum value. Defaults to 0. */
+    min?: number;
+    /** Maximum value. Defaults to 100. */
+    max?: number;
+    /** Step increment. Defaults to 1. */
+    step?: number;
+    /** Semantic intent — drives the fill and thumb-ring colour. */
+    intent?: IntentName;
+    /** Size variant — track thickness and thumb size. */
+    size?: SliderSize;
+    /** Disables interaction and applies muted styling. */
+    disabled?: boolean;
+    /** Outer style — use for positioning (margin, width, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — describes what the slider controls. */
+    accessibilityLabel?: string;
+};
+export declare function Slider({ value: controlledValue, defaultValue, onValueChange, min, max, step, intent, size, disabled, style, accessibilityLabel, }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = Slider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Slider — drag a thumb along a track to pick a number.
+ *
+ * Maps 1:1 to the Figma <Slider> component:
+ *   intent → neutral | brand | danger   (filled portion + thumb ring)
+ *   size   → small | default | large     (track thickness + thumb size)
+ *   value  → min..max                     (single value)
+ *
+ * Drag the thumb or tap the track to set the value. Built on PanResponder, so
+ * it works the same on web and native with zero dependencies. value is
+ * controlled with value/onValueChange, or uncontrolled with defaultValue.
+ *
+ * Tokens: slider/{size}/track-height and slider/{size}/thumb-size are keyed by
+ * the size prop and constant across density (like Progress's track-height);
+ * slider/border-radius is the pill radius. The track background is the dedicated
+ * control/slider/track/bg semantic (scheme.slider.track, cool-grey/200 light,
+ * cool-grey/700 dark); the filled portion reuses the intent system
+ * (colors[intent].bold.default.bg). No density-varying spacing.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Thumb ring width. A small visual constant, not a spacing token. */
+const THUMB_RING = 2;
+const SHADOW_WEB = { boxShadow: '0px 1px 3px rgba(0,0,0,0.2)' };
+const SHADOW_NATIVE = {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2,
+};
+const SHADOW = react_native_1.Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE;
+const clampFrac = (f) => Math.max(0, Math.min(1, f));
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Slider({ value: controlledValue, defaultValue = 0, onValueChange, min = 0, max = 100, step = 1, intent = 'brand', size = 'default', disabled = false, style, accessibilityLabel, }) {
+    const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const { trackHeight, thumbSize } = components.slider[size];
+    const borderRadius = components.slider.borderRadius;
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
+    const value = isControlled ? controlledValue : internalValue;
+    const [trackWidth, setTrackWidth] = (0, react_1.useState)(0);
+    // Live state for the PanResponder closures (created once).
+    const live = (0, react_1.useRef)({
+        trackWidth,
+        disabled,
+        min,
+        max,
+        step,
+        isControlled,
+        onValueChange,
+    });
+    live.current = { trackWidth, disabled, min, max, step, isControlled, onValueChange };
+    const startFrac = (0, react_1.useRef)(0);
+    const fracToValue = (f) => {
+        const { min: lo, max: hi, step: st } = live.current;
+        const raw = lo + clampFrac(f) * (hi - lo);
+        const snapped = Math.round((raw - lo) / st) * st + lo;
+        return Math.max(lo, Math.min(hi, snapped));
+    };
+    const commit = (v) => {
+        if (!live.current.isControlled)
+            setInternalValue(v);
+        live.current.onValueChange?.(v);
+    };
+    const pan = (0, react_1.useRef)(react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => !live.current.disabled,
+        onMoveShouldSetPanResponder: () => !live.current.disabled,
+        onPanResponderGrant: (evt) => {
+            const w = live.current.trackWidth;
+            if (live.current.disabled || w === 0)
+                return;
+            const f = clampFrac(evt.nativeEvent.locationX / w);
+            startFrac.current = f;
+            commit(fracToValue(f));
+        },
+        onPanResponderMove: (_evt, g) => {
+            const w = live.current.trackWidth;
+            if (live.current.disabled || w === 0)
+                return;
+            const f = clampFrac(startFrac.current + g.dx / w);
+            commit(fracToValue(f));
+        },
+    })).current;
+    const range = max - min;
+    const fraction = range > 0 ? clampFrac((value - min) / range) : 0;
+    const onLayout = (e) => setTrackWidth(e.nativeEvent.layout.width);
+    const trackBg = disabled ? scheme.disabled.bg : scheme.slider.track;
+    const fillColor = disabled ? scheme.disabled.fg : colors[intent].bold.default.bg;
+    const thumbBorder = disabled ? scheme.disabled.border : colors[intent].bold.default.bg;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "adjustable", accessibilityLabel: accessibilityLabel, accessibilityValue: { min, max, now: Math.round(value) }, accessibilityState: { disabled }, accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }], onAccessibilityAction: (e) => {
+            if (disabled)
+                return;
+            if (e.nativeEvent.actionName === 'increment')
+                commit(fracToValue((value - min + step) / (range || 1)));
+            if (e.nativeEvent.actionName === 'decrement')
+                commit(fracToValue((value - min - step) / (range || 1)));
+        }, style: [{ justifyContent: 'center', paddingHorizontal: thumbSize / 2 }, style], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { ...pan.panHandlers, onLayout: onLayout, style: { height: thumbSize, justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                        height: trackHeight,
+                        borderRadius,
+                        backgroundColor: trackBg,
+                        overflow: 'hidden',
+                    }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            position: 'absolute',
+                            left: 0,
+                            top: 0,
+                            bottom: 0,
+                            width: trackWidth * fraction,
+                            backgroundColor: fillColor,
+                            borderRadius,
+                        } }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: {
+                        position: 'absolute',
+                        left: fraction * trackWidth - thumbSize / 2,
+                        width: thumbSize,
+                        height: thumbSize,
+                        borderRadius: thumbSize / 2,
+                        backgroundColor: scheme.surface.overlay.bg,
+                        borderWidth: THUMB_RING,
+                        borderColor: thumbBorder,
+                        ...SHADOW,
+                    } })] }) }));
+}

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

@@ -0,0 +1 @@
+export { Slider, type SliderProps, type SliderSize } from './Slider';

package/dist/components/Slider/index.js

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