@castui/cast-ui 4.7.0 → 4.8.0

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,249 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = Autocomplete;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+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
+// ---------------------------------------------------------------------------
+const CONTENT_MAX_HEIGHT = 240;
+const LABEL_SCALE = {
+    small: 'lg',
+    default: 'md',
+    large: 'lg',
+};
+const BODY_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+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,
+};
+const defaultFilter = (options, query) => options.filter((o) => o.label.toLowerCase().includes(query));
+// ---------------------------------------------------------------------------
+// Option row
+// ---------------------------------------------------------------------------
+function OptionRow({ option, size, selected, onSelect, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const tokens = components.select.option;
+    const opt = scheme.select.option;
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const disabled = Boolean(option.disabled);
+    const labelTokens = tokens_1.label[BODY_SCALE[size]];
+    const bodyTokens = tokens_1.body[BODY_SCALE[size]];
+    const colors = disabled
+        ? opt.disabled
+        : selected && isHovered
+            ? opt.selectedHover
+            : selected
+                ? opt.selected
+                : isHovered
+                    ? opt.hover
+                    : opt.default;
+    const resolvedIcon = typeof option.icon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: option.icon, size: size, color: colors.fg })) : (option.icon);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => {
+            if (!disabled)
+                onSelect(option.value);
+        }, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), disabled: disabled, accessibilityRole: "menuitem", accessibilityState: { selected, disabled }, style: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: tokens.gap,
+            paddingHorizontal: tokens.paddingX,
+            paddingVertical: tokens.paddingY,
+            borderRadius: tokens.borderRadius,
+            backgroundColor: colors.bg,
+        }, children: [resolvedIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens_1.iconSize[size], height: tokens_1.iconSize[size] }, children: resolvedIcon })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1 }, children: [(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: colors.fg,
+                        }, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, selectable: false, style: {
+                            fontFamily: tokens_1.fontFamily.sans,
+                            fontWeight: tokens_1.fontWeight.regular,
+                            fontSize: bodyTokens.fontSize,
+                            lineHeight: bodyTokens.lineHeight,
+                            letterSpacing: bodyTokens.letterSpacing,
+                            color: disabled ? colors.fg : scheme.text.description,
+                        }, children: option.description })) : null] }), selected && !disabled ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: size, color: colors.fg })) : null] }));
+}
+// ---------------------------------------------------------------------------
+// Autocomplete
+// ---------------------------------------------------------------------------
+function Autocomplete({ options, value: controlledValue, defaultValue = null, onValueChange, onInputChange, label: fieldLabel, helperText, placeholder = 'Search…', leadingIcon, size = 'default', disabled = false, error = false, clearable = true, noOptionsText = 'No options', filterOptions = defaultFilter, style, accessibilityLabel, }) {
+    const { components, scheme, colors } = (0, theme_1.useTheme)();
+    const inputTokens = components.input[size];
+    const neutral = colors.neutral.default;
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
+    const value = isControlled ? controlledValue : internalValue;
+    const selectedLabel = (0, react_1.useMemo)(() => options.find((o) => o.value === value)?.label ?? '', [options, value]);
+    const [search, setSearch] = (0, react_1.useState)(selectedLabel);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    // Keep the field text in sync when the selected value changes externally.
+    (0, react_1.useEffect)(() => {
+        setSearch(selectedLabel);
+    }, [selectedLabel]);
+    const query = search.trim().toLowerCase();
+    const showAll = query.length === 0 || (value != null && search === selectedLabel);
+    const filtered = showAll ? options : filterOptions(options, query);
+    const labelTypo = tokens_1.label[LABEL_SCALE[size]];
+    const bodyTypo = tokens_1.body[BODY_SCALE[size]];
+    const setValue = (next) => {
+        if (!isControlled)
+            setInternalValue(next);
+        onValueChange?.(next);
+    };
+    const handleSelect = (optionValue) => {
+        setValue(optionValue);
+        const lbl = options.find((o) => o.value === optionValue)?.label ?? '';
+        setSearch(lbl);
+        onInputChange?.(lbl);
+        setIsOpen(false);
+    };
+    const handleClear = () => {
+        setValue(null);
+        setSearch('');
+        onInputChange?.('');
+        setIsOpen(true);
+    };
+    // Escape closes the dropdown on web.
+    (0, react_1.useEffect)(() => {
+        if (!isOpen || react_native_1.Platform.OS !== 'web')
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [isOpen]);
+    const borderColor = disabled
+        ? scheme.disabled.border
+        : error
+            ? scheme.error.border
+            : isFocused
+                ? neutral.hover.border
+                : neutral.default.border;
+    const bgColor = disabled ? scheme.disabled.bg : neutral.default.bg;
+    const fgColor = disabled ? scheme.disabled.fg : neutral.default.fg;
+    const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: size, color: fgColor })) : (leadingIcon);
+    const hasContent = search.length > 0 || value != null;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ alignSelf: 'stretch', gap: components.input.fieldGap, zIndex: isOpen ? 1000 : 0 }, style], children: [fieldLabel ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: false, style: {
+                    fontFamily: tokens_1.fontFamily.sans,
+                    fontWeight: tokens_1.fontWeight.medium,
+                    fontSize: labelTypo.fontSize,
+                    lineHeight: labelTypo.lineHeight,
+                    letterSpacing: labelTypo.letterSpacing,
+                    color: fgColor,
+                }, children: fieldLabel })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: inputTokens.gap,
+                            paddingHorizontal: inputTokens.paddingX,
+                            paddingVertical: inputTokens.paddingY,
+                            borderRadius: inputTokens.borderRadius,
+                            borderWidth: tokens_1.controlTokens.borderWidth,
+                            borderColor,
+                            backgroundColor: bgColor,
+                        }, children: [resolvedLeading ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens_1.iconSize[size], height: tokens_1.iconSize[size] }, children: resolvedLeading })) : null, (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { value: search, onChangeText: (text) => {
+                                    setSearch(text);
+                                    onInputChange?.(text);
+                                    if (!isOpen)
+                                        setIsOpen(true);
+                                }, onFocus: () => {
+                                    setIsFocused(true);
+                                    setIsOpen(true);
+                                }, onBlur: () => setIsFocused(false), editable: !disabled, placeholder: placeholder, placeholderTextColor: scheme.text.description, accessibilityLabel: accessibilityLabel || fieldLabel || 'Search', style: {
+                                    flex: 1,
+                                    fontFamily: tokens_1.fontFamily.sans,
+                                    fontWeight: tokens_1.fontWeight.regular,
+                                    fontSize: bodyTypo.fontSize,
+                                    lineHeight: bodyTypo.lineHeight,
+                                    letterSpacing: bodyTypo.letterSpacing,
+                                    color: fgColor,
+                                    padding: 0,
+                                    ...(react_native_1.Platform.OS === 'web' ? { outlineWidth: 0 } : {}),
+                                } }), clearable && hasContent && !disabled ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: handleClear, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Clear", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: size, color: fgColor }) })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: isOpen ? { transform: [{ rotate: '180deg' }] } : undefined, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow_drop_down", size: size, color: fgColor }) }))] }), isOpen ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setIsOpen(false), accessibilityRole: "button", accessibilityLabel: "Close options", 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, isOpen ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            position: 'absolute',
+                            top: '100%',
+                            left: 0,
+                            right: 0,
+                            paddingTop: 4,
+                            zIndex: 1,
+                        }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                                backgroundColor: scheme.surface.overlay.bg,
+                                borderWidth: tokens_1.controlTokens.borderWidth,
+                                borderColor: scheme.surface.overlay.border,
+                                borderRadius: scheme.surface.overlay.borderRadius,
+                                paddingVertical: components.select.content.paddingY,
+                                maxHeight: CONTENT_MAX_HEIGHT,
+                                ...(react_native_1.Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
+                            }, children: filtered.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { nestedScrollEnabled: true, keyboardShouldPersistTaps: "handled", children: filtered.map((option) => ((0, jsx_runtime_1.jsx)(OptionRow, { option: option, size: size, selected: option.value === value, onSelect: handleSelect }, option.value))) })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: false, style: {
+                                    fontFamily: tokens_1.fontFamily.sans,
+                                    fontWeight: tokens_1.fontWeight.regular,
+                                    fontSize: bodyTypo.fontSize,
+                                    lineHeight: bodyTypo.lineHeight,
+                                    letterSpacing: bodyTypo.letterSpacing,
+                                    color: scheme.text.description,
+                                    paddingHorizontal: components.select.option.paddingX,
+                                    paddingVertical: components.select.option.paddingY,
+                                }, children: noOptionsText })) }) })) : null] }), helperText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: false, style: {
+                    fontFamily: tokens_1.fontFamily.sans,
+                    fontWeight: tokens_1.fontWeight.regular,
+                    fontSize: tokens_1.caption.fontSize,
+                    lineHeight: tokens_1.caption.lineHeight,
+                    letterSpacing: tokens_1.caption.letterSpacing,
+                    color: error ? scheme.error.fg : scheme.text.description,
+                }, children: helperText })) : null] }));
+}

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

@@ -0,0 +1 @@
+export { Autocomplete, type AutocompleteProps, type AutocompleteOption, type AutocompleteSize, } from './Autocomplete';

package/dist/components/Autocomplete/index.js

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

package/dist/components/Backdrop/Backdrop.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Backdrop — a full-screen scrim that dims everything behind it.
+ *
+ * Maps to the Figma <Backdrop> component. Use it on its own (a loading veil) or
+ * as the dimming layer behind a modal surface. It fills its parent, so place it
+ * inside a full-screen container or a Modal. It fades in and out with `open` and
+ * can centre a child (e.g. a Spinner).
+ *
+ * Colour: a black scrim at scheme.overlay.scrimOpacity, so it follows the active
+ * colour mode. With `invisible`, the scrim is transparent but still catches
+ * presses (matching a click-away layer). Backdrop introduces no new tokens — it
+ * reuses the shared overlay scrim opacity.
+ *
+ * Press the scrim to dismiss when `onPress` is supplied.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle, type GestureResponderEvent } from 'react-native';
+export type BackdropProps = {
+    /** Controls visibility. */
+    open: boolean;
+    /** Called when the scrim is pressed. */
+    onPress?: (e: GestureResponderEvent) => void;
+    /** Transparent scrim that still catches presses. Defaults to false. */
+    invisible?: boolean;
+    /** Centred content (e.g. a Spinner). */
+    children?: React.ReactNode;
+    /** Style override for the scrim layer. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the dismiss layer. */
+    accessibilityLabel?: string;
+};
+export declare function Backdrop({ open, onPress, invisible, children, style, accessibilityLabel, }: BackdropProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Backdrop/Backdrop.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Backdrop = Backdrop;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Backdrop — a full-screen scrim that dims everything behind it.
+ *
+ * Maps to the Figma <Backdrop> component. Use it on its own (a loading veil) or
+ * as the dimming layer behind a modal surface. It fills its parent, so place it
+ * inside a full-screen container or a Modal. It fades in and out with `open` and
+ * can centre a child (e.g. a Spinner).
+ *
+ * Colour: a black scrim at scheme.overlay.scrimOpacity, so it follows the active
+ * colour mode. With `invisible`, the scrim is transparent but still catches
+ * presses (matching a click-away layer). Backdrop introduces no new tokens — it
+ * reuses the shared overlay scrim opacity.
+ *
+ * Press the scrim to dismiss when `onPress` is supplied.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Fade timing. */
+const DURATION = 220;
+/** react-native-web does not support the native animation driver. */
+const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Backdrop({ open, onPress, invisible = false, children, style, accessibilityLabel, }) {
+    const { scheme } = (0, theme_1.useTheme)();
+    const targetOpacity = invisible ? 0 : scheme.overlay.scrimOpacity;
+    const fade = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const [mounted, setMounted] = (0, react_1.useState)(open);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setMounted(true);
+            react_native_1.Animated.timing(fade, {
+                toValue: 1,
+                duration: DURATION,
+                useNativeDriver: USE_NATIVE_DRIVER,
+            }).start();
+        }
+        else if (mounted) {
+            react_native_1.Animated.timing(fade, {
+                toValue: 0,
+                duration: DURATION,
+                useNativeDriver: USE_NATIVE_DRIVER,
+            }).start(({ finished }) => {
+                if (finished)
+                    setMounted(false);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    if (!mounted)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { pointerEvents: "box-none", style: [
+            react_native_1.StyleSheet.absoluteFillObject,
+            {
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: '#000000',
+                opacity: fade.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, targetOpacity],
+                }),
+            },
+            style,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: react_native_1.StyleSheet.absoluteFillObject, onPress: onPress, accessibilityRole: "button", accessibilityLabel: accessibilityLabel || 'Dismiss' }), children] }));
+}

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

@@ -0,0 +1 @@
+export { Backdrop, type BackdropProps } from './Backdrop';

package/dist/components/Backdrop/index.js

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

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,50 @@
+/**
+ * BottomSheet — modal surface that slides up from the bottom edge.
+ *
+ * Maps to the Figma <BottomSheet> component. The sheet hugs its content up to a
+ * max height (~90% of the screen), then the content scrolls. There are no size
+ * variants. Spacing (padding, gap) comes from the density theme. The top corner
+ * radius and the drag handle dimensions are constant across density.
+ *
+ * Interaction model: the sheet slides up on open and down on close, the scrim
+ * fades with it. There is no finger-dragging, so it behaves the same on web and
+ * native. Dismiss by pressing the scrim (when enabled) or by calling onClose.
+ *
+ * Structure: scrim backdrop -> sheet (drag handle + optional title + content).
+ * Surface styling reuses the shared overlay tokens (bg, border). The drag handle
+ * is the one bespoke colour, scheme.bottomSheet.handle.
+ *
+ * Fonts are consumer-loaded (Inter via the typography tokens).
+ *
+ * Exports:
+ *   BottomSheet         — full modal (scrim + animated sheet)
+ *   BottomSheetContent  — just the sheet card, for inline use or static stories
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type BottomSheetContentProps = {
+    /** Heading shown above the content. Optional. */
+    title?: string;
+    /** Show the drag handle pill at the top of the sheet. Defaults to true. */
+    showHandle?: boolean;
+    /** Sheet content. */
+    children?: React.ReactNode;
+    /** Style override for the sheet card. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label. Falls back to the title. */
+    accessibilityLabel?: string;
+};
+export type BottomSheetProps = BottomSheetContentProps & {
+    /** Controls visibility. */
+    open: boolean;
+    /** Called when the scrim is pressed or the sheet requests close. */
+    onClose?: () => void;
+    /** Dismiss when the scrim is pressed. Defaults to true. */
+    closeOnBackdropPress?: boolean;
+};
+/**
+ * The sheet card rendered inline. No modal, no scrim, no animation. Use this for
+ * static display (Storybook visual stories) or custom overlay implementations.
+ */
+export declare function BottomSheetContent({ title: titleText, showHandle, children, style, accessibilityLabel, }: BottomSheetContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function BottomSheet({ open, onClose, closeOnBackdropPress, ...contentProps }: BottomSheetProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheetContent = BottomSheetContent;
+exports.BottomSheet = BottomSheet;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * BottomSheet — modal surface that slides up from the bottom edge.
+ *
+ * Maps to the Figma <BottomSheet> component. The sheet hugs its content up to a
+ * max height (~90% of the screen), then the content scrolls. There are no size
+ * variants. Spacing (padding, gap) comes from the density theme. The top corner
+ * radius and the drag handle dimensions are constant across density.
+ *
+ * Interaction model: the sheet slides up on open and down on close, the scrim
+ * fades with it. There is no finger-dragging, so it behaves the same on web and
+ * native. Dismiss by pressing the scrim (when enabled) or by calling onClose.
+ *
+ * Structure: scrim backdrop -> sheet (drag handle + optional title + content).
+ * Surface styling reuses the shared overlay tokens (bg, border). The drag handle
+ * is the one bespoke colour, scheme.bottomSheet.handle.
+ *
+ * Fonts are consumer-loaded (Inter via the typography tokens).
+ *
+ * Exports:
+ *   BottomSheet         — full modal (scrim + animated sheet)
+ *   BottomSheetContent  — just the sheet card, for inline use or static stories
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** The sheet never grows past this share of the screen height. */
+const MAX_HEIGHT_RATIO = 0.9;
+/** Animation timing. */
+const DURATION = 220;
+/** react-native-web does not support the native animation driver. */
+const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
+/** Upward shadow for web (matches Figma shadow/lg, cast above the sheet). */
+const SHADOW_WEB = {
+    boxShadow: '0px -4px 6px rgba(0,0,0,0.04), 0px -10px 15px rgba(0,0,0,0.08)',
+};
+/** Upward shadow for native. */
+const SHADOW_NATIVE = {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: -8 },
+    shadowOpacity: 0.08,
+    shadowRadius: 15,
+    elevation: 16,
+};
+// ---------------------------------------------------------------------------
+// BottomSheetContent — the sheet card, without modal/scrim/animation
+// ---------------------------------------------------------------------------
+/**
+ * The sheet card rendered inline. No modal, no scrim, no animation. Use this for
+ * static display (Storybook visual stories) or custom overlay implementations.
+ */
+function BottomSheetContent({ title: titleText, showHandle = true, children, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const tokens = components.bottomSheet;
+    const surface = scheme.surface;
+    const textTokens = scheme.text;
+    const titleTokens = tokens_1.title.md;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityViewIsModal: true, accessibilityLabel: accessibilityLabel || titleText, style: [
+            {
+                width: '100%',
+                maxHeight: '100%',
+                backgroundColor: surface.overlay.bg,
+                borderTopLeftRadius: tokens.borderRadius,
+                borderTopRightRadius: tokens.borderRadius,
+                borderWidth: tokens_1.controlTokens.borderWidth,
+                borderColor: surface.overlay.border,
+                paddingHorizontal: tokens.padding,
+                paddingBottom: tokens.padding,
+                paddingTop: tokens.handleGap,
+                ...(react_native_1.Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
+            },
+            style,
+        ], children: [showHandle ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: { alignItems: 'center', marginBottom: tokens.handleGap }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                        width: tokens.handleWidth,
+                        height: tokens.handleHeight,
+                        borderRadius: tokens.handleHeight / 2,
+                        backgroundColor: scheme.bottomSheet.handle,
+                    } }) })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { bounces: false, showsVerticalScrollIndicator: false, contentContainerStyle: { gap: tokens.gap }, style: { flexGrow: 0, flexShrink: 1 }, children: [titleText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "header", style: {
+                            fontFamily: tokens_1.fontFamily.sans,
+                            fontWeight: tokens_1.fontWeight.medium,
+                            fontSize: titleTokens.fontSize,
+                            lineHeight: titleTokens.lineHeight,
+                            letterSpacing: titleTokens.letterSpacing,
+                            color: textTokens.primary,
+                        }, children: titleText })) : null, children] })] }));
+}
+// ---------------------------------------------------------------------------
+// BottomSheet — full modal with scrim and slide animation
+// ---------------------------------------------------------------------------
+function BottomSheet({ open, onClose, closeOnBackdropPress = true, ...contentProps }) {
+    const { scheme } = (0, theme_1.useTheme)();
+    const scrimOpacity = scheme.overlay.scrimOpacity;
+    const screenHeight = react_native_1.Dimensions.get('window').height;
+    const translateY = (0, react_1.useRef)(new react_native_1.Animated.Value(screenHeight)).current;
+    const backdrop = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const [mounted, setMounted] = (0, react_1.useState)(open);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setMounted(true);
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.timing(backdrop, {
+                    toValue: 1,
+                    duration: DURATION,
+                    useNativeDriver: USE_NATIVE_DRIVER,
+                }),
+                react_native_1.Animated.spring(translateY, {
+                    toValue: 0,
+                    damping: 22,
+                    stiffness: 220,
+                    mass: 0.9,
+                    useNativeDriver: USE_NATIVE_DRIVER,
+                }),
+            ]).start();
+        }
+        else if (mounted) {
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.timing(backdrop, {
+                    toValue: 0,
+                    duration: DURATION,
+                    useNativeDriver: USE_NATIVE_DRIVER,
+                }),
+                react_native_1.Animated.timing(translateY, {
+                    toValue: screenHeight,
+                    duration: DURATION,
+                    useNativeDriver: USE_NATIVE_DRIVER,
+                }),
+            ]).start(({ finished }) => {
+                if (finished)
+                    setMounted(false);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    if (!mounted)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: mounted, transparent: true, animationType: "none", onRequestClose: onClose, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, justifyContent: 'flex-end' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundColor: '#000000',
+                        opacity: backdrop.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [0, scrimOpacity],
+                        }),
+                    }, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: { flex: 1 }, disabled: !closeOnBackdropPress, onPress: closeOnBackdropPress ? onClose : undefined, accessibilityRole: "button", accessibilityLabel: "Close sheet" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
+                        maxHeight: `${MAX_HEIGHT_RATIO * 100}%`,
+                        transform: [{ translateY }],
+                    }, children: (0, jsx_runtime_1.jsx)(BottomSheetContent, { ...contentProps }) })] }) }));
+}

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

@@ -0,0 +1 @@
+export { BottomSheet, BottomSheetContent, type BottomSheetProps, type BottomSheetContentProps, } from './BottomSheet';

package/dist/components/BottomSheet/index.js

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