@castui/cast-ui 4.6.0 → 4.8.0

package/dist/components/SpeedDial/SpeedDial.d.ts

@@ -0,0 +1,72 @@
+/**
+ * SpeedDial — a floating action button that expands into a set of actions.
+ *
+ * Compound component. <SpeedDial> is the round FAB; <SpeedDialAction> is one
+ * action that fans out when the FAB is pressed.
+ *
+ *   <SpeedDial icon="add">
+ *     <SpeedDialAction icon="edit" label="Edit" onPress={edit} />
+ *     <SpeedDialAction icon="share" label="Share" onPress={share} />
+ *   </SpeedDial>
+ *
+ * Maps 1:1 to the Figma <Speed Dial> component:
+ *   intent    → neutral | brand | danger   (FAB fill)
+ *   size      → small | default | large     (FAB + action sizes)
+ *   direction → up | down | left | right     (which way actions fan out)
+ *
+ * The FAB fills with the intent bold colour; actions are neutral surface
+ * buttons with a tag-styled label. An optional scrim dims the background and
+ * closes on press. open is controlled with open/onOpenChange or uncontrolled.
+ *
+ * Tokens: speed-dial/{size}/fab-size and action-size are constant per size;
+ * speed-dial/{size}/gap is density-varying. The FAB icon and action icons use
+ * the named Icon scale. Place the SpeedDial in a positioned container (e.g.
+ * absolute bottom-right) so it floats. Fonts are consumer-loaded.
+ *
+ * Exports:
+ *   SpeedDial        — the FAB + expanding actions
+ *   SpeedDialAction  — one action button with a label
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type SpeedDialSize = 'small' | 'default' | 'large';
+export type SpeedDialDirection = 'up' | 'down' | 'left' | 'right';
+export type SpeedDialProps = {
+    /** `<SpeedDialAction>` children. */
+    children: React.ReactNode;
+    /** FAB icon when closed. Defaults to "add". */
+    icon?: string;
+    /** FAB icon when open. Defaults to "close". */
+    openIcon?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Open-state change handler. */
+    onOpenChange?: (open: boolean) => void;
+    /** Initial open state (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Which way actions fan out. Defaults to "up". */
+    direction?: SpeedDialDirection;
+    /** Semantic intent — drives the FAB fill. */
+    intent?: IntentName;
+    /** Size variant — FAB and action sizes. */
+    size?: SpeedDialSize;
+    /** Show a dimming scrim behind the open actions. Defaults to true. */
+    backdrop?: boolean;
+    /** Outer style for the FAB container (use for absolute positioning). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the FAB. */
+    accessibilityLabel?: string;
+};
+export type SpeedDialActionProps = {
+    /** Action icon — Material Symbols name. */
+    icon: string;
+    /** Action label, shown as a tag chip beside the button. */
+    label?: string;
+    /** Press handler. */
+    onPress?: () => void;
+    /** Disables this action. */
+    disabled?: boolean;
+};
+export declare function SpeedDialAction({ icon, label, onPress, disabled }: SpeedDialActionProps): import("react/jsx-runtime").JSX.Element;
+export declare function SpeedDial({ children, icon, openIcon, open: controlledOpen, onOpenChange, defaultOpen, direction, intent, size, backdrop, style, accessibilityLabel, }: SpeedDialProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SpeedDial/SpeedDial.js

@@ -0,0 +1,189 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpeedDialAction = SpeedDialAction;
+exports.SpeedDial = SpeedDial;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * SpeedDial — a floating action button that expands into a set of actions.
+ *
+ * Compound component. <SpeedDial> is the round FAB; <SpeedDialAction> is one
+ * action that fans out when the FAB is pressed.
+ *
+ *   <SpeedDial icon="add">
+ *     <SpeedDialAction icon="edit" label="Edit" onPress={edit} />
+ *     <SpeedDialAction icon="share" label="Share" onPress={share} />
+ *   </SpeedDial>
+ *
+ * Maps 1:1 to the Figma <Speed Dial> component:
+ *   intent    → neutral | brand | danger   (FAB fill)
+ *   size      → small | default | large     (FAB + action sizes)
+ *   direction → up | down | left | right     (which way actions fan out)
+ *
+ * The FAB fills with the intent bold colour; actions are neutral surface
+ * buttons with a tag-styled label. An optional scrim dims the background and
+ * closes on press. open is controlled with open/onOpenChange or uncontrolled.
+ *
+ * Tokens: speed-dial/{size}/fab-size and action-size are constant per size;
+ * speed-dial/{size}/gap is density-varying. The FAB icon and action icons use
+ * the named Icon scale. Place the SpeedDial in a positioned container (e.g.
+ * absolute bottom-right) so it floats. Fonts are consumer-loaded.
+ *
+ * Exports:
+ *   SpeedDial        — the FAB + expanding actions
+ *   SpeedDialAction  — one action button with a label
+ */
+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 SpeedDialCtx = (0, react_1.createContext)(null);
+function useSpeedDialContext() {
+    const ctx = (0, react_1.useContext)(SpeedDialCtx);
+    if (!ctx)
+        throw new Error('<SpeedDialAction> must be used within <SpeedDial>');
+    return ctx;
+}
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const FAB_ICON = {
+    small: 'default',
+    default: 'large',
+    large: 'large',
+};
+const ACTION_ICON = {
+    small: 'small',
+    default: 'default',
+    large: 'default',
+};
+const DURATION_IN = 160;
+const DURATION_OUT = 140;
+const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
+const SHADOW_WEB = {
+    boxShadow: '0px 4px 6px -1px rgba(0,0,0,0.12), 0px 2px 4px -2px rgba(0,0,0,0.1)',
+};
+const SHADOW_NATIVE = {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.18,
+    shadowRadius: 6,
+    elevation: 6,
+};
+const SHADOW = react_native_1.Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE;
+// ---------------------------------------------------------------------------
+// SpeedDialAction
+// ---------------------------------------------------------------------------
+function SpeedDialAction({ icon, label, onPress, disabled = false }) {
+    const { size, gap, orientation, onClose } = useSpeedDialContext();
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const actionSize = components.speedDial[size].actionSize;
+    const button = ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
+            if (disabled)
+                return;
+            onPress?.();
+            onClose();
+        }, disabled: disabled, accessibilityRole: "button", accessibilityLabel: label || icon, style: {
+            width: actionSize,
+            height: actionSize,
+            borderRadius: actionSize / 2,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: scheme.surface.overlay.bg,
+            borderWidth: tokens_1.controlTokens.borderWidth,
+            borderColor: scheme.surface.overlay.border,
+            ...SHADOW,
+        }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: ACTION_ICON[size], color: disabled ? scheme.disabled.fg : scheme.text.primary }) }));
+    const labelChip = label ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: {
+            backgroundColor: scheme.tag.bg,
+            borderRadius: scheme.tag.borderRadius,
+            paddingHorizontal: scheme.tag.paddingX,
+            paddingVertical: scheme.tag.paddingY,
+        }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { type: "label-sm", color: scheme.tag.fg, selectable: false, children: label }) })) : null;
+    if (orientation === 'vertical') {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row', alignItems: 'center', gap }, children: [labelChip, button] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { alignItems: 'center', gap }, children: [button, labelChip] }));
+}
+// ---------------------------------------------------------------------------
+// SpeedDial
+// ---------------------------------------------------------------------------
+function SpeedDial({ children, icon = 'add', openIcon = 'close', open: controlledOpen, onOpenChange, defaultOpen = false, direction = 'up', intent = 'brand', size = 'default', backdrop = true, style, accessibilityLabel, }) {
+    const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const { fabSize, actionSize, gap } = components.speedDial[size];
+    const fabColors = colors[intent].bold.default;
+    const isControlled = controlledOpen !== undefined;
+    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
+    const open = isControlled ? controlledOpen : internalOpen;
+    const setOpen = (next) => {
+        if (!isControlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    };
+    const orientation = direction === 'up' || direction === 'down' ? 'vertical' : 'horizontal';
+    // Mount + animate the actions group.
+    const anim = (0, react_1.useRef)(new react_native_1.Animated.Value(open ? 1 : 0)).current;
+    const [actionsMounted, setActionsMounted] = (0, react_1.useState)(open);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setActionsMounted(true);
+            react_native_1.Animated.timing(anim, { toValue: 1, duration: DURATION_IN, useNativeDriver: USE_NATIVE_DRIVER }).start();
+        }
+        else if (actionsMounted) {
+            react_native_1.Animated.timing(anim, { toValue: 0, duration: DURATION_OUT, useNativeDriver: USE_NATIVE_DRIVER }).start(({ finished }) => {
+                if (finished)
+                    setActionsMounted(false);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const inset = (fabSize - actionSize) / 2;
+    const groupBase = { position: 'absolute', gap };
+    const groupStyle = direction === 'up'
+        ? { ...groupBase, bottom: '100%', right: inset, marginBottom: gap, alignItems: 'flex-end' }
+        : direction === 'down'
+            ? { ...groupBase, top: '100%', right: inset, marginTop: gap, alignItems: 'flex-end' }
+            : direction === 'left'
+                ? { ...groupBase, right: '100%', top: inset, marginRight: gap, alignItems: 'center' }
+                : { ...groupBase, left: '100%', top: inset, marginLeft: gap, alignItems: 'center' };
+    const groupFlex = direction === 'up' ? 'column-reverse' : direction === 'down' ? 'column' : direction === 'left' ? 'row-reverse' : 'row';
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ alignSelf: 'flex-start', position: 'relative', zIndex: open ? 1000 : 0 }, style], children: [open && backdrop ? ((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,
+                        backgroundColor: '#000000',
+                        opacity: scheme.overlay.scrimOpacity,
+                        zIndex: 0,
+                    },
+                    default: {
+                        position: 'absolute',
+                        top: -9999,
+                        left: -9999,
+                        width: 99999,
+                        height: 99999,
+                        backgroundColor: '#000000',
+                        opacity: scheme.overlay.scrimOpacity,
+                    },
+                }) })) : null, actionsMounted ? ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
+                    groupStyle,
+                    {
+                        flexDirection: groupFlex,
+                        zIndex: 1,
+                        opacity: anim,
+                        transform: [{ scale: anim.interpolate({ inputRange: [0, 1], outputRange: [0.8, 1] }) }],
+                    },
+                ], children: (0, jsx_runtime_1.jsx)(SpeedDialCtx.Provider, { value: { size, gap, orientation, onClose: () => setOpen(false) }, children: children }) })) : null, (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setOpen(!open), accessibilityRole: "button", accessibilityLabel: accessibilityLabel || 'Actions', accessibilityState: { expanded: open }, style: {
+                    width: fabSize,
+                    height: fabSize,
+                    borderRadius: fabSize / 2,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: fabColors.bg,
+                    zIndex: 2,
+                    ...SHADOW,
+                }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: open ? openIcon : icon, size: FAB_ICON[size], color: fabColors.fg }) })] }));
+}

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

@@ -0,0 +1 @@
+export { SpeedDial, SpeedDialAction, type SpeedDialProps, type SpeedDialActionProps, type SpeedDialSize, type SpeedDialDirection, } from './SpeedDial';

package/dist/components/SpeedDial/index.js

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

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/Table/Table.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Table — rows and columns of data.
+ *
+ * Compound component:
+ *   <Table>
+ *     <TableHead><TableRow><TableCell>Name</TableCell>…</TableRow></TableHead>
+ *     <TableBody>
+ *       <TableRow><TableCell>Ada</TableCell>…</TableRow>
+ *     </TableBody>
+ *   </Table>
+ *
+ * Maps 1:1 to the Figma <Table> component:
+ *   size → small | default | large   (cell padding + typography)
+ *   row state → default | hover | selected | disabled
+ *
+ * React Native has no <table>, so the table is built from Views: each row is a
+ * flex row of cells. Keep the cell widths (flex or width) consistent across rows
+ * so columns line up. striped shades alternate body rows; hoverable highlights a
+ * row on hover; a row with onPress is pressable and can be selected.
+ *
+ * Colours come from the dedicated scheme.table slice (header, borders, row
+ * states), which reuses existing semantic values (surface, neutral, brand
+ * subtle), so no new semantic variables. Cell padding varies by density; the
+ * size prop drives typography. Fonts are consumer-loaded.
+ *
+ * Exports: Table, TableHead, TableBody, TableRow, TableCell.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle, type GestureResponderEvent } from 'react-native';
+export type TableSize = 'small' | 'default' | 'large';
+export type TableCellAlign = 'left' | 'center' | 'right';
+export type TableProps = {
+    children: React.ReactNode;
+    /** Size variant — cell padding and typography. */
+    size?: TableSize;
+    /** Shade alternate body rows. */
+    striped?: boolean;
+    /** Highlight a row on hover. */
+    hoverable?: boolean;
+    /** Outer style. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the table. */
+    accessibilityLabel?: string;
+};
+export type TableSectionProps = {
+    children: React.ReactNode;
+};
+export type TableRowProps = {
+    children: React.ReactNode;
+    /** Press handler — makes the row pressable. */
+    onPress?: (e: GestureResponderEvent) => void;
+    /** Selected (active) row styling. */
+    selected?: boolean;
+    /** Disabled row styling. */
+    disabled?: boolean;
+    /** Internal: row index, set by <TableBody> for striping. */
+    __index?: number;
+};
+export type TableCellProps = {
+    children?: React.ReactNode;
+    /** Text alignment. Defaults to left (right when numeric). */
+    align?: TableCellAlign;
+    /** Right-align for numbers. */
+    numeric?: boolean;
+    /** Flex grow factor. Defaults to 1. */
+    flex?: number;
+    /** Fixed width (overrides flex). */
+    width?: number;
+};
+export declare function TableCell({ children, align, numeric, flex, width }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableRow({ children, onPress, selected, disabled, __index, }: TableRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableHead({ children }: TableSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableBody({ children }: TableSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ children, size, striped, hoverable, style, accessibilityLabel, }: TableProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/Table.js

@@ -0,0 +1,176 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCell = TableCell;
+exports.TableRow = TableRow;
+exports.TableHead = TableHead;
+exports.TableBody = TableBody;
+exports.Table = Table;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Table — rows and columns of data.
+ *
+ * Compound component:
+ *   <Table>
+ *     <TableHead><TableRow><TableCell>Name</TableCell>…</TableRow></TableHead>
+ *     <TableBody>
+ *       <TableRow><TableCell>Ada</TableCell>…</TableRow>
+ *     </TableBody>
+ *   </Table>
+ *
+ * Maps 1:1 to the Figma <Table> component:
+ *   size → small | default | large   (cell padding + typography)
+ *   row state → default | hover | selected | disabled
+ *
+ * React Native has no <table>, so the table is built from Views: each row is a
+ * flex row of cells. Keep the cell widths (flex or width) consistent across rows
+ * so columns line up. striped shades alternate body rows; hoverable highlights a
+ * row on hover; a row with onPress is pressable and can be selected.
+ *
+ * Colours come from the dedicated scheme.table slice (header, borders, row
+ * states), which reuses existing semantic values (surface, neutral, brand
+ * subtle), so no new semantic variables. Cell padding varies by density; the
+ * size prop drives typography. Fonts are consumer-loaded.
+ *
+ * Exports: Table, TableHead, TableBody, TableRow, TableCell.
+ */
+const react_1 = __importStar(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 TableCtx = (0, react_1.createContext)(null);
+function useTableContext(c) {
+    const ctx = (0, react_1.useContext)(TableCtx);
+    if (!ctx)
+        throw new Error(`<${c}> must be used within <Table>`);
+    return ctx;
+}
+/** Set by TableHead / TableBody so cells know whether they are headers. */
+const SectionCtx = (0, react_1.createContext)({ isHeader: false });
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const HEADER_TYPE = {
+    small: 'label-sm',
+    default: 'label-md',
+    large: 'label-lg',
+};
+const BODY_TYPE = {
+    small: 'body-sm',
+    default: 'body-md',
+    large: 'body-lg',
+};
+// ---------------------------------------------------------------------------
+// TableCell
+// ---------------------------------------------------------------------------
+function TableCell({ children, align, numeric = false, flex = 1, width }) {
+    const { size } = useTableContext('TableCell');
+    const { isHeader } = (0, react_1.useContext)(SectionCtx);
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const tokens = components.table[size];
+    const effectiveAlign = align ?? (numeric ? 'right' : 'left');
+    const justify = effectiveAlign === 'right' ? 'flex-end' : effectiveAlign === 'center' ? 'center' : 'flex-start';
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+            ...(width != null ? { width } : { flex }),
+            paddingHorizontal: tokens.cellPaddingX,
+            paddingVertical: tokens.cellPaddingY,
+            justifyContent: 'center',
+            alignItems: justify,
+        }, children: typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { type: isHeader ? HEADER_TYPE[size] : BODY_TYPE[size], color: scheme.text.primary, numberOfLines: 1, style: { textAlign: effectiveAlign }, children: children })) : (children) }));
+}
+// ---------------------------------------------------------------------------
+// TableRow
+// ---------------------------------------------------------------------------
+function TableRow({ children, onPress, selected = false, disabled = false, __index = 0, }) {
+    const { striped, hoverable } = useTableContext('TableRow');
+    const { isHeader } = (0, react_1.useContext)(SectionCtx);
+    const { scheme } = (0, theme_1.useTheme)();
+    const table = scheme.table;
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const interactive = !isHeader && !disabled && (hoverable || Boolean(onPress));
+    const backgroundColor = isHeader
+        ? table.headerBg
+        : selected
+            ? isHovered
+                ? table.selectedHoverBg
+                : table.selectedBg
+            : isHovered
+                ? table.rowHover
+                : striped && __index % 2 === 1
+                    ? table.stripe
+                    : 'transparent';
+    const rowStyle = {
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        backgroundColor,
+        borderBottomWidth: tokens_1.controlTokens.borderWidth,
+        borderBottomColor: table.border,
+        opacity: disabled ? 0.5 : 1,
+    };
+    if (interactive) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onPress, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: onPress ? 'button' : undefined, accessibilityState: { selected, disabled }, style: rowStyle, children: children }));
+    }
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: rowStyle, children: children });
+}
+// ---------------------------------------------------------------------------
+// TableHead / TableBody
+// ---------------------------------------------------------------------------
+function TableHead({ children }) {
+    return (0, jsx_runtime_1.jsx)(SectionCtx.Provider, { value: { isHeader: true }, children: children });
+}
+function TableBody({ children }) {
+    const rows = react_1.default.Children.toArray(children).filter(Boolean);
+    return ((0, jsx_runtime_1.jsx)(SectionCtx.Provider, { value: { isHeader: false }, children: rows.map((child, i) => react_1.default.cloneElement(child, {
+            key: `row-${i}`,
+            __index: i,
+        })) }));
+}
+// ---------------------------------------------------------------------------
+// Table
+// ---------------------------------------------------------------------------
+function Table({ children, size = 'default', striped = false, hoverable = false, style, accessibilityLabel, }) {
+    const { scheme } = (0, theme_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(TableCtx.Provider, { value: { size, striped, hoverable }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityLabel: accessibilityLabel, style: [
+                {
+                    borderWidth: tokens_1.controlTokens.borderWidth,
+                    borderColor: scheme.table.border,
+                    borderRadius: scheme.surface.overlay.borderRadius,
+                    overflow: 'hidden',
+                    backgroundColor: scheme.surface.overlay.bg,
+                },
+                style,
+            ], children: children }) }));
+}

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

@@ -0,0 +1 @@
+export { Table, TableHead, TableBody, TableRow, TableCell, type TableProps, type TableSectionProps, type TableRowProps, type TableCellProps, type TableSize, type TableCellAlign, } from './Table';