@castui/cast-ui 4.7.0 → 4.8.0

package/README.md

@@ -2,6 +2,12 @@
   <img src="https://raw.githubusercontent.com/Connagh/cast-ui/main/logo.png" alt="Cast UI" width="300" />
 </p>
 
+<p align="center">
+  <a href="https://www.npmjs.com/package/@castui/cast-ui"><img src="https://img.shields.io/npm/v/@castui/cast-ui.svg" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@castui/cast-ui"><img src="https://img.shields.io/npm/dm/@castui/cast-ui.svg" alt="npm downloads" /></a>
+  <a href="https://github.com/Connagh/cast-ui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@castui/cast-ui.svg" alt="license" /></a>
+</p>
+
 A cross-platform component library for React Native. One set of components
 that works on iOS, Android, and the web.
 

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Accordion — a stack of expandable sections, flush/divided style.
+ *
+ * Compound component. `<Accordion>` owns which items are open and how they
+ * coordinate; `<AccordionItem>` is one section with a header and collapsible
+ * content. They communicate through context, so a consumer writes:
+ *
+ *   <Accordion type="single" defaultValue="shipping">
+ *     <AccordionItem value="shipping" title="Shipping">
+ *       Free delivery on orders over £50.
+ *     </AccordionItem>
+ *     <AccordionItem value="returns" title="Returns" leadingIcon="undo">
+ *       Return any item within 30 days.
+ *     </AccordionItem>
+ *     <AccordionItem value="legacy" title="Archived" disabled>
+ *       Hidden content.
+ *     </AccordionItem>
+ *   </Accordion>
+ *
+ * Maps 1:1 to the Figma <Accordion> component:
+ *   type  → single | multiple   (single opens one section at a time)
+ *   size  → small | default | large   (header padding, gap, typography)
+ *   AccordionItem state=open → expanded; state=disabled → disabled;
+ *   state=hover → runtime onHoverIn (not a prop)
+ *
+ * Accordion is neutral only. The header label uses scheme.text.primary (disabled
+ * uses scheme.disabled.fg). The chevron (chevron_right, rotated 90deg when open)
+ * and the optional leadingIcon render through <Icon> at the named size keyed by
+ * the `size` prop and take the same colour as the label. The header hover and
+ * press backgrounds reuse the neutral subtle intent. The divider between items is
+ * the overlay border colour (like <Divider>) at the control border width.
+ *
+ * Tokens: `gap` / `paddingX` / `paddingY` are density spacing from
+ * `components.accordion[size]`. No new colour tokens.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type AccordionSize = 'small' | 'default' | 'large';
+export type AccordionType = 'single' | 'multiple';
+export type AccordionProps = {
+    /** 'single' opens one section at a time; 'multiple' opens any number. */
+    type?: AccordionType;
+    /**
+     * Controlled open value(s). A string for `type="single"`, a string array for
+     * `type="multiple"`. Provide with `onValueChange` for a controlled accordion.
+     */
+    value?: string | string[];
+    /** Uncontrolled initial open value(s). Same shape rules as `value`. */
+    defaultValue?: string | string[];
+    /** Called with the next open value(s) when a section toggles. */
+    onValueChange?: (value: string | string[]) => void;
+    /** Size variant — header padding, gap, and typography. */
+    size?: AccordionSize;
+    /** For `type="single"`, allow closing the open section. Defaults to true. */
+    collapsible?: boolean;
+    /** `<AccordionItem>` children. */
+    children: React.ReactNode;
+    /** Outer style — use for positioning (margin, width, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the group. */
+    accessibilityLabel?: string;
+};
+export type AccordionItemProps = {
+    /** Unique value identifying this section. */
+    value: string;
+    /** The header label text. */
+    title: string;
+    /** Icon before the title — Material Symbols name string or a ReactNode. */
+    leadingIcon?: string | React.ReactNode;
+    /** Disables interaction and applies muted styling. */
+    disabled?: boolean;
+    /** The collapsible content. A string is wrapped in <Text> automatically. */
+    children: React.ReactNode;
+    /** Outer style — applied to the item container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the title text. */
+    accessibilityLabel?: string;
+};
+export declare function AccordionItem({ value, title, leadingIcon, disabled, children, style, accessibilityLabel, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function Accordion({ type, value, defaultValue, onValueChange, size, collapsible, children, style, accessibilityLabel, }: AccordionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItem = AccordionItem;
+exports.Accordion = Accordion;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Accordion — a stack of expandable sections, flush/divided style.
+ *
+ * Compound component. `<Accordion>` owns which items are open and how they
+ * coordinate; `<AccordionItem>` is one section with a header and collapsible
+ * content. They communicate through context, so a consumer writes:
+ *
+ *   <Accordion type="single" defaultValue="shipping">
+ *     <AccordionItem value="shipping" title="Shipping">
+ *       Free delivery on orders over £50.
+ *     </AccordionItem>
+ *     <AccordionItem value="returns" title="Returns" leadingIcon="undo">
+ *       Return any item within 30 days.
+ *     </AccordionItem>
+ *     <AccordionItem value="legacy" title="Archived" disabled>
+ *       Hidden content.
+ *     </AccordionItem>
+ *   </Accordion>
+ *
+ * Maps 1:1 to the Figma <Accordion> component:
+ *   type  → single | multiple   (single opens one section at a time)
+ *   size  → small | default | large   (header padding, gap, typography)
+ *   AccordionItem state=open → expanded; state=disabled → disabled;
+ *   state=hover → runtime onHoverIn (not a prop)
+ *
+ * Accordion is neutral only. The header label uses scheme.text.primary (disabled
+ * uses scheme.disabled.fg). The chevron (chevron_right, rotated 90deg when open)
+ * and the optional leadingIcon render through <Icon> at the named size keyed by
+ * the `size` prop and take the same colour as the label. The header hover and
+ * press backgrounds reuse the neutral subtle intent. The divider between items is
+ * the overlay border colour (like <Divider>) at the control border width.
+ *
+ * Tokens: `gap` / `paddingX` / `paddingY` are density spacing from
+ * `components.accordion[size]`. No new colour tokens.
+ */
+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 AccordionCtx = (0, react_1.createContext)(null);
+function useAccordionContext(component) {
+    const ctx = (0, react_1.useContext)(AccordionCtx);
+    if (!ctx) {
+        throw new Error(`<${component}> must be used within <Accordion>`);
+    }
+    return ctx;
+}
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Header label typography scale (medium weight title). */
+const HEADER_TYPE = {
+    small: 'title-sm',
+    default: 'title-md',
+    large: 'title-lg',
+};
+/** Content body typography scale. */
+const CONTENT_TYPE = {
+    small: 'body-sm',
+    default: 'body-md',
+    large: 'body-lg',
+};
+/** Normalise a value/defaultValue prop into an array of open values. */
+function toOpenArray(v, type) {
+    if (v === undefined || v === null)
+        return [];
+    const arr = Array.isArray(v) ? v : [v];
+    const cleaned = arr.filter((x) => x !== '');
+    return type === 'single' ? cleaned.slice(0, 1) : cleaned;
+}
+// ---------------------------------------------------------------------------
+// AccordionItem
+// ---------------------------------------------------------------------------
+function AccordionItem({ value, title, leadingIcon, disabled = false, children, style, accessibilityLabel, }) {
+    const { openValues, toggle, size } = useAccordionContext('AccordionItem');
+    const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const sizeTokens = components.accordion[size];
+    const isOpen = openValues.includes(value);
+    // Chevron rotation: chevron_right (0deg) rotates to point down (90deg) when open.
+    const spin = (0, react_1.useRef)(new react_native_1.Animated.Value(isOpen ? 1 : 0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(spin, {
+            toValue: isOpen ? 1 : 0,
+            duration: 160,
+            easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+            useNativeDriver: true,
+        }).start();
+    }, [isOpen, spin]);
+    const rotate = spin.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '90deg'],
+    });
+    const labelFg = disabled ? scheme.disabled.fg : scheme.text.primary;
+    const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: size, color: labelFg })) : (leadingIcon ?? null);
+    const content = typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { type: CONTENT_TYPE[size], color: scheme.text.description, children: children })) : (children);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            {
+                borderBottomWidth: tokens_1.controlTokens.borderWidth,
+                borderBottomColor: scheme.surface.overlay.border,
+            },
+            style,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
+                    if (!disabled)
+                        toggle(value);
+                }, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: "button", accessibilityLabel: accessibilityLabel || title, accessibilityState: { expanded: isOpen, disabled }, children: ({ pressed }) => {
+                    const headerBg = disabled
+                        ? 'transparent'
+                        : pressed
+                            ? colors.neutral.subtle.active.bg
+                            : isHovered
+                                ? colors.neutral.subtle.hover.bg
+                                : 'transparent';
+                    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: sizeTokens.gap,
+                            paddingHorizontal: sizeTokens.paddingX,
+                            paddingVertical: sizeTokens.paddingY,
+                            backgroundColor: headerBg,
+                        }, children: [resolvedLeading, (0, jsx_runtime_1.jsx)(Text_1.Text, { type: HEADER_TYPE[size], color: labelFg, selectable: false, style: { flex: 1 }, children: title }), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: { transform: [{ rotate }] }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron_right", size: size, color: labelFg }) })] }));
+                } }), isOpen ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                    paddingHorizontal: sizeTokens.paddingX,
+                    paddingBottom: sizeTokens.paddingY,
+                }, children: content })) : null] }));
+}
+// ---------------------------------------------------------------------------
+// Accordion
+// ---------------------------------------------------------------------------
+function Accordion({ type = 'single', value, defaultValue, onValueChange, size = 'default', collapsible = true, children, style, accessibilityLabel, }) {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = (0, react_1.useState)(() => toOpenArray(defaultValue, type));
+    const openValues = toOpenArray(isControlled ? value : internal, type);
+    const toggle = (item) => {
+        let next;
+        if (type === 'multiple') {
+            next = openValues.includes(item)
+                ? openValues.filter((x) => x !== item)
+                : [...openValues, item];
+        }
+        else {
+            const isOpen = openValues.includes(item);
+            next = isOpen ? (collapsible ? [] : openValues) : [item];
+        }
+        if (!isControlled)
+            setInternal(next);
+        onValueChange?.(type === 'multiple' ? next : (next[0] ?? ''));
+    };
+    return ((0, jsx_runtime_1.jsx)(AccordionCtx.Provider, { value: { openValues, toggle, size }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "none", accessibilityLabel: accessibilityLabel, style: [{ alignSelf: 'stretch' }, style], children: children }) }));
+}

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

@@ -0,0 +1 @@
+export { Accordion, AccordionItem, type AccordionProps, type AccordionItemProps, type AccordionSize, type AccordionType, } from './Accordion';

package/dist/components/Accordion/index.js

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

package/dist/components/AppBar/AppBar.d.ts

@@ -0,0 +1,47 @@
+/**
+ * AppBar — a top bar with a leading control, a title, and trailing actions.
+ *
+ * Maps 1:1 to the Figma <App Bar> component:
+ *   intent     → neutral | brand | danger
+ *   prominence → default | bold | subtle
+ *   size       → small | default | large    (padding, gap, title scale)
+ *   align      → start | center             (title alignment)
+ *
+ * Colour comes from the intent system, like Button. prominence picks the
+ * surface: bold is a filled bar (intent bg, white text), default is a plain bar
+ * with a bottom divider, subtle is transparent. The title and the leadingIcon
+ * inherit the bar foreground; trailing actions are a free slot, so colour them
+ * to match on a bold bar. The bar hugs its content height from the padding, so
+ * there is no fixed height token. Spacing varies by density; the title scale by
+ * size. Fonts are consumer-loaded.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle, type GestureResponderEvent } from 'react-native';
+import type { IntentName, ProminenceName } from '../../tokens';
+export type AppBarSize = 'small' | 'default' | 'large';
+export type AppBarAlign = 'start' | 'center';
+export type AppBarProps = {
+    /** The bar title. */
+    title: string;
+    /** Standard leading control icon (menu / back). Auto-coloured + pressable. */
+    leadingIcon?: string;
+    /** Press handler for the leading icon. */
+    onLeadingPress?: (e: GestureResponderEvent) => void;
+    /** Custom leading slot. Wins over leadingIcon. */
+    leading?: React.ReactNode;
+    /** Trailing actions slot. */
+    trailing?: React.ReactNode;
+    /** Semantic intent. */
+    intent?: IntentName;
+    /** Visual weight — bold (filled), default (divider), subtle (transparent). */
+    prominence?: ProminenceName;
+    /** Size variant — padding, gap, and title scale. */
+    size?: AppBarSize;
+    /** Title alignment. Defaults to start. */
+    align?: AppBarAlign;
+    /** Outer style. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the title. */
+    accessibilityLabel?: string;
+};
+export declare function AppBar({ title, leadingIcon, onLeadingPress, leading, trailing, intent, prominence, size, align, style, accessibilityLabel, }: AppBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AppBar/AppBar.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppBar = AppBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Maps size → title typography scale (Text component `type`). */
+const TITLE_TYPE = {
+    small: 'title-sm',
+    default: 'title-md',
+    large: 'title-lg',
+};
+/** Maps size → named Icon scale for the leading control. */
+const ICON_SIZE = {
+    small: 'default',
+    default: 'large',
+    large: 'large',
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function AppBar({ title, leadingIcon, onLeadingPress, leading, trailing, intent = 'neutral', prominence = 'default', size = 'default', align = 'start', style, accessibilityLabel, }) {
+    const { components, colors } = (0, theme_1.useTheme)();
+    const tokens = components.appBar[size];
+    const barColors = colors[intent][prominence].default;
+    const resolvedLeading = leading ??
+        (leadingIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onLeadingPress, accessibilityRole: "button", accessibilityLabel: "Navigation", hitSlop: 8, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE[size], color: barColors.fg }) })) : null);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityRole: "header", accessibilityLabel: accessibilityLabel || title, style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: tokens.gap,
+                paddingHorizontal: tokens.paddingX,
+                paddingVertical: tokens.paddingY,
+                backgroundColor: barColors.bg,
+                borderBottomWidth: tokens_1.controlTokens.borderWidth,
+                borderBottomColor: barColors.border,
+            },
+            style,
+        ], children: [resolvedLeading, (0, jsx_runtime_1.jsx)(Text_1.Text, { type: TITLE_TYPE[size], color: barColors.fg, numberOfLines: 1, selectable: false, style: { flex: 1, textAlign: align === 'center' ? 'center' : 'left' }, children: title }), trailing ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexDirection: 'row', alignItems: 'center', gap: tokens.gap }, children: trailing })) : null] }));
+}

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

@@ -0,0 +1 @@
+export { AppBar, type AppBarProps, type AppBarSize, type AppBarAlign } from './AppBar';

package/dist/components/AppBar/index.js

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

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Autocomplete — a text field that filters a list of options as you type.
+ *
+ * Maps 1:1 to the Figma <Autocomplete> component:
+ *   size  → small | default | large
+ *   state → default | hover | focus | error | disabled
+ *   option state → default | hover | selected | disabled
+ *
+ * Autocomplete is the Select combobox specialised for client-side filtering. Its
+ * field is an Input, so it reuses the input tokens; its options are
+ * value-selection rows, so it reuses the select tokens and the
+ * scheme.select.option colours. It introduces no new tokens. Type to filter the
+ * options by label, press one to select it, or clear the field.
+ *
+ * value is controlled with value/onValueChange (null = nothing selected) or
+ * uncontrolled with defaultValue. Pass a filterOptions function to change how
+ * matching works. Fonts are consumer-loaded.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type AutocompleteSize = 'small' | 'default' | 'large';
+export type AutocompleteOption = {
+    /** Unique value. */
+    value: string;
+    /** Display label — also what the filter matches against. */
+    label: string;
+    /** Supporting text below the label. */
+    description?: string;
+    /** Leading icon — Material Symbols name or a ReactNode. */
+    icon?: string | React.ReactNode;
+    /** Disables this option. */
+    disabled?: boolean;
+};
+export type AutocompleteProps = {
+    /** The options to choose from. */
+    options: AutocompleteOption[];
+    /** Selected value (controlled). null = nothing selected. */
+    value?: string | null;
+    /** Initial value (uncontrolled). */
+    defaultValue?: string | null;
+    /** Selection change handler. */
+    onValueChange?: (value: string | null) => void;
+    /** Called with the input text as it changes. */
+    onInputChange?: (text: string) => void;
+    /** Field label above the input. */
+    label?: string;
+    /** Helper or error text below the input. */
+    helperText?: string;
+    /** Placeholder when empty. */
+    placeholder?: string;
+    /** Leading icon in the field. */
+    leadingIcon?: string | React.ReactNode;
+    /** Size variant. */
+    size?: AutocompleteSize;
+    /** Disables the field. */
+    disabled?: boolean;
+    /** Error state — danger border + red helper text. */
+    error?: boolean;
+    /** Show a clear button when there is input. Defaults to true. */
+    clearable?: boolean;
+    /** Text shown when no option matches. Defaults to "No options". */
+    noOptionsText?: string;
+    /** Override the default case-insensitive label filter. */
+    filterOptions?: (options: AutocompleteOption[], query: string) => AutocompleteOption[];
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the label prop. */
+    accessibilityLabel?: string;
+};
+export declare function Autocomplete({ options, value: controlledValue, defaultValue, onValueChange, onInputChange, label: fieldLabel, helperText, placeholder, leadingIcon, size, disabled, error, clearable, noOptionsText, filterOptions, style, accessibilityLabel, }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;