@demlanide/react-lucky-components 0.1.0

package/dist/ListCell/useSwitchAnimation.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import { TRAVEL } from './constants';
+export function useSwitchAnimation(value, { activeTrackColor, inactiveTrackColor }) {
+    const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
+    useEffect(() => {
+        Animated.spring(anim, {
+            toValue: value ? 1 : 0,
+            useNativeDriver: false, // required for backgroundColor interpolation
+            bounciness: 2,
+            speed: 15,
+        }).start();
+    }, [value, anim]);
+    const translateX = anim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, TRAVEL],
+    });
+    const trackBg = anim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [inactiveTrackColor, activeTrackColor],
+    });
+    const indicatorOpacity = anim.interpolate({
+        inputRange: [0, 0.5, 1],
+        outputRange: [0, 0, 1],
+    });
+    const circleOpacity = anim.interpolate({
+        inputRange: [0, 0.5, 1],
+        outputRange: [1, 0, 0],
+    });
+    return { translateX, trackBg, indicatorOpacity, circleOpacity };
+}

package/dist/ListCell/utilities.d.ts

@@ -0,0 +1,24 @@
+import type { AccessibilityState } from 'react-native';
+interface TogglePressParams {
+    disabled: boolean;
+    value: boolean;
+    onValueChange?: (value: boolean) => void;
+}
+interface ListCellPressParams extends TogglePressParams {
+    isSwitchTrailing: boolean;
+    isSelectorTrailing: boolean;
+    onPress?: () => void;
+    onSelectorPress?: () => void;
+}
+interface ListCellAccessibilityParams {
+    isSwitchTrailing: boolean;
+    isSelectionTrailing?: boolean;
+    selected?: boolean;
+    value: boolean;
+    disabled: boolean;
+}
+export declare function handleTogglePress({ disabled, value, onValueChange, }: TogglePressParams): void;
+export declare function createListCellPressHandler({ disabled, isSwitchTrailing: isSwitch, isSelectorTrailing: isSelector, value, onValueChange, onPress, onSelectorPress, }: ListCellPressParams): () => void;
+export declare function getListCellAccessibilityState({ isSwitchTrailing: isSwitch, isSelectionTrailing, selected, value, disabled, }: ListCellAccessibilityParams): AccessibilityState;
+export {};
+//# sourceMappingURL=utilities.d.ts.map

package/dist/ListCell/utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../src/ListCell/utilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,UAAU,2BAA2B;IACnC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,KAAK,EACL,aAAa,GACd,EAAE,iBAAiB,GAAG,IAAI,CAG1B;AAED,wBAAgB,0BAA0B,CAAC,EACzC,QAAQ,EACR,gBAAgB,EAAE,QAAQ,EAC1B,kBAAkB,EAAE,UAAU,EAC9B,KAAK,EACL,aAAa,EACb,OAAO,EACP,eAAe,GAChB,EAAE,mBAAmB,GAAG,MAAM,IAAI,CAalC;AAED,wBAAgB,6BAA6B,CAAC,EAC5C,gBAAgB,EAAE,QAAQ,EAC1B,mBAAmB,EACnB,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE,2BAA2B,GAAG,kBAAkB,CAQlD"}

package/dist/ListCell/utilities.js

@@ -0,0 +1,29 @@
+export function handleTogglePress({ disabled, value, onValueChange, }) {
+    if (disabled)
+        return;
+    onValueChange?.(!value);
+}
+export function createListCellPressHandler({ disabled, isSwitchTrailing: isSwitch, isSelectorTrailing: isSelector, value, onValueChange, onPress, onSelectorPress, }) {
+    return () => {
+        if (disabled)
+            return;
+        if (isSwitch) {
+            onValueChange?.(!value);
+            return;
+        }
+        if (isSelector) {
+            onSelectorPress?.();
+            return;
+        }
+        onPress?.();
+    };
+}
+export function getListCellAccessibilityState({ isSwitchTrailing: isSwitch, isSelectionTrailing, selected, value, disabled, }) {
+    if (isSwitch) {
+        return { checked: value, disabled };
+    }
+    if (isSelectionTrailing) {
+        return { checked: selected, disabled };
+    }
+    return { disabled };
+}

package/dist/Picker/Picker.d.ts

@@ -0,0 +1,3 @@
+import type { PickerProps } from './types';
+export declare function Picker({ items, selectedValue, onValueChange, searchable, searchPlaceholder, title, onBack, onSave, style, testID, grabber, fitContent, keyboardInset, }: PickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Picker.d.ts.map

package/dist/Picker/Picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../src/Picker/Picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAc,WAAW,EAAE,MAAM,SAAS,CAAC;AAwBvD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAa,EACb,aAAa,EACb,UAAiB,EACjB,iBAA4B,EAC5B,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAe,EACf,UAAkB,EAClB,aAAiB,GAClB,EAAE,WAAW,2CA0Jb"}

package/dist/Picker/Picker.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { FlatList, useWindowDimensions } from 'react-native';
+import { Button } from '../Button';
+import { CELL_PADDING_VERTICAL } from './constants';
+import { useFilteredItems } from './useFilteredItems';
+import { PickerRow } from './PickerRow';
+import { PickerHeader } from './PickerHeader';
+import { SearchField } from './SearchField';
+import { Container, TopOverlay, SearchContainer, EmptyContainer, EmptyText, Grabber, } from './styles';
+const SAVE_BUTTON_STYLE = {
+    borderRadius: 12,
+    minHeight: 50,
+    paddingVertical: 0,
+    marginHorizontal: 16,
+    marginBottom: 16,
+    alignSelf: 'stretch',
+};
+export function Picker({ items, selectedValue, onValueChange, searchable = true, searchPlaceholder = 'Search', title, onBack, onSave, style, testID, grabber = false, fitContent = false, keyboardInset = 0, }) {
+    const [query, setQuery] = useState('');
+    const hasHeader = title != null && onBack != null;
+    const [topOverlayHeight, setTopOverlayHeight] = useState(0);
+    const [listContentHeight, setListContentHeight] = useState(0);
+    const { height: windowHeight } = useWindowDimensions();
+    const filteredItems = useFilteredItems(items, query);
+    const handleSelect = useCallback((value) => onValueChange?.(value), [onValueChange]);
+    const renderItem = useCallback(({ item }) => (_jsx(PickerRow, { item: item, selected: item.value === selectedValue, onPress: handleSelect })), [selectedValue, handleSelect]);
+    const keyExtractor = useCallback((item) => item.value, []);
+    /* ── Search field (shared between header overlay & list header) ── */
+    const searchField = useMemo(() => {
+        if (!searchable)
+            return null;
+        return (_jsx(SearchField, { value: query, onChangeText: setQuery, placeholder: searchPlaceholder }));
+    }, [searchable, searchPlaceholder, query]);
+    const listHeader = useMemo(() => {
+        if (!searchable || hasHeader || searchField == null)
+            return null;
+        return _jsx(SearchContainer, { children: searchField });
+    }, [searchable, hasHeader, searchField]);
+    const listEmpty = useMemo(() => (_jsx(EmptyContainer, { children: _jsx(EmptyText, { children: "No results" }) })), []);
+    /* ── Top overlay layout tracking ─────────────────────────────── */
+    const handleTopOverlayLayout = useCallback((event) => {
+        const measuredHeight = Math.round(event.nativeEvent.layout.height);
+        setTopOverlayHeight((prev) => (prev === measuredHeight ? prev : measuredHeight));
+    }, []);
+    useEffect(() => {
+        if (!hasHeader)
+            setTopOverlayHeight(0);
+    }, [hasHeader]);
+    const listContentContainerStyle = useMemo(() => ({ paddingTop: hasHeader ? topOverlayHeight : 0 }), [hasHeader, topOverlayHeight]);
+    /* ── fitContent sizing ───────────────────────────────────────── */
+    const clampedKeyboardInset = useMemo(() => Math.max(0, Math.round(keyboardInset)), [keyboardInset]);
+    const maxListHeight = useMemo(() => Math.max(160, Math.round(windowHeight * 0.85) - (fitContent ? clampedKeyboardInset : 0)), [windowHeight, fitContent, clampedKeyboardInset]);
+    const handleListContentSizeChange = useCallback((_width, height) => {
+        const next = Math.round(height);
+        setListContentHeight((prev) => (prev === next ? prev : next));
+    }, []);
+    const listStyle = useMemo(() => {
+        if (!fitContent)
+            return { flex: 1 };
+        if (listContentHeight > 0)
+            return { height: Math.min(listContentHeight, maxListHeight), flexGrow: 0 };
+        return { maxHeight: maxListHeight, flexGrow: 0 };
+    }, [fitContent, listContentHeight, maxListHeight]);
+    const scrollEnabled = !fitContent || listContentHeight > maxListHeight;
+    const containerStyle = useMemo(() => [{ flex: fitContent ? 0 : 1 }, style], [fitContent, style]);
+    /* ── Save button ─────────────────────────────────────────────── */
+    const saveButton = useMemo(() => {
+        if (onSave == null)
+            return null;
+        const handleSave = () => onSave(selectedValue ?? '');
+        return (_jsx(Button, { onPress: handleSave, variant: "primary", accessibilityLabel: "Save", accessibilityRole: "button", testID: "picker-save-button", style: SAVE_BUTTON_STYLE, children: "Save" }));
+    }, [onSave, selectedValue]);
+    /* ── Render ──────────────────────────────────────────────────── */
+    return (_jsxs(Container, { style: containerStyle, testID: testID, accessibilityRole: "radiogroup", children: [hasHeader && (_jsxs(TopOverlay, { onLayout: handleTopOverlayLayout, pointerEvents: "box-none", children: [grabber && _jsx(Grabber, {}), _jsx(PickerHeader, { title: title, onBack: onBack }), searchField != null && (_jsx(SearchContainer, { style: { paddingTop: CELL_PADDING_VERTICAL }, children: searchField }))] })), _jsx(FlatList, { data: filteredItems, renderItem: renderItem, keyExtractor: keyExtractor, ListHeaderComponent: listHeader, ListEmptyComponent: listEmpty, keyboardShouldPersistTaps: "handled", contentContainerStyle: listContentContainerStyle, onContentSizeChange: fitContent ? handleListContentSizeChange : undefined, scrollEnabled: scrollEnabled, style: listStyle }), saveButton] }));
+}

package/dist/Picker/PickerHeader.d.ts

@@ -0,0 +1,7 @@
+interface PickerHeaderProps {
+    title: string;
+    onBack: () => void;
+}
+export declare function PickerHeader({ title, onBack }: PickerHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PickerHeader.d.ts.map

package/dist/Picker/PickerHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerHeader.d.ts","sourceRoot":"","sources":["../../src/Picker/PickerHeader.tsx"],"names":[],"mappings":"AAQA,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAchE"}

package/dist/Picker/PickerHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BackChevron } from './icons';
+import { HeaderRow, HeaderBackPressable, HeaderTitle, EmptyView, } from './styles';
+export function PickerHeader({ title, onBack }) {
+    return (_jsxs(HeaderRow, { children: [_jsx(HeaderBackPressable, { onPress: onBack, accessibilityLabel: "Go back", accessibilityRole: "button", children: _jsx(BackChevron, {}) }), _jsx(HeaderTitle, { children: title }), _jsx(EmptyView, {})] }));
+}

package/dist/Picker/PickerRow.d.ts

@@ -0,0 +1,9 @@
+import type { PickerItem } from './types';
+interface PickerRowProps {
+    item: PickerItem;
+    selected: boolean;
+    onPress: (value: string) => void;
+}
+export declare function PickerRow({ item, selected, onPress }: PickerRowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PickerRow.d.ts.map

package/dist/Picker/PickerRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerRow.d.ts","sourceRoot":"","sources":["../../src/Picker/PickerRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAW1C,UAAU,cAAc;IACtB,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,cAAc,2CAwBpE"}

package/dist/Picker/PickerRow.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { CellPressable, Leading, TitleGroup, TitleText, SubtitleText, RadioOuter, RadioCircle, } from './styles';
+export function PickerRow({ item, selected, onPress }) {
+    const handlePress = useCallback(() => {
+        onPress(item.value);
+    }, [item.value, onPress]);
+    return (_jsxs(CellPressable, { onPress: handlePress, accessibilityRole: "radio", accessibilityState: { selected }, children: [_jsx(Leading, { children: _jsxs(TitleGroup, { children: [_jsx(TitleText, { numberOfLines: 1, children: item.label }), item.subtitle != null && (_jsx(SubtitleText, { numberOfLines: 1, children: item.subtitle }))] }) }), _jsx(RadioOuter, { "$selected": selected, children: _jsx(RadioCircle, { "$selected": selected }) })] }));
+}

package/dist/Picker/SearchField.d.ts

@@ -0,0 +1,8 @@
+interface SearchFieldProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+}
+export declare function SearchField({ value, onChangeText, placeholder, }: SearchFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SearchField.d.ts.map

package/dist/Picker/SearchField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../src/Picker/SearchField.tsx"],"names":[],"mappings":"AAaA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,WAAsB,GACvB,EAAE,gBAAgB,2CA0BlB"}

package/dist/Picker/SearchField.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { BlurView } from 'expo-blur';
+import { SearchIcon } from './icons';
+import { SearchGlassShell, SearchBlurLayer, SearchGlassOverlay, SearchGlassEdge, SearchGlassHighlight, SearchFieldRow, SearchInput, } from './styles';
+export function SearchField({ value, onChangeText, placeholder = 'Search', }) {
+    return (_jsxs(SearchGlassShell, { children: [_jsx(SearchBlurLayer, { pointerEvents: "none", children: _jsx(BlurView, { intensity: 20, tint: Platform.OS === 'ios' ? 'systemChromeMaterialLight' : 'light', style: { flex: 1 } }) }), _jsx(SearchGlassOverlay, { pointerEvents: "none" }), _jsx(SearchGlassEdge, { pointerEvents: "none" }), _jsx(SearchGlassHighlight, { pointerEvents: "none" }), _jsxs(SearchFieldRow, { children: [_jsx(SearchIcon, {}), _jsx(SearchInput, { value: value, onChangeText: onChangeText, placeholder: placeholder, autoCapitalize: "none", autoCorrect: false, returnKeyType: "search" })] })] }));
+}

package/dist/Picker/constants.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Picker design tokens (from Figma node 92:1716).
+ * Reuses ListCell text tokens where the values overlap.
+ */
+export declare const TEXT_PRIMARY = "#2C2C2C";
+export declare const TEXT_SECONDARY = "#738295";
+export declare const SEARCH_BG = "rgba(120, 120, 128, 0.16)";
+export declare const SEARCH_PLACEHOLDER_COLOR = "#727272";
+export declare const SEARCH_ICON_COLOR = "#727272";
+export declare const SEARCH_BORDER_RADIUS = 100;
+export declare const SEARCH_PADDING = 11;
+export declare const SEARCH_GLASS_BLUR_INTENSITY = 52;
+export declare const RADIO_SIZE = 21;
+export declare const RADIO_DOT_SIZE = 12;
+export declare const RADIO_BORDER_WIDTH = 1.5;
+export declare const RADIO_BORDER_COLOR = "#C7C7CC";
+export declare const RADIO_ACTIVE_COLOR = "#94E80F";
+export declare const CELL_PADDING_HORIZONTAL = 16;
+export declare const CELL_PADDING_VERTICAL = 14;
+export declare const CELL_GAP = 8;
+export declare const CELL_HEIGHT = 44;
+export declare const HEADER_HEIGHT = 44;
+export declare const HEADER_CHEVRON_COLOR = "#2C2C2C";
+//# sourceMappingURL=constants.d.ts.map

package/dist/Picker/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/Picker/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,cAAc,YAAY,CAAC;AAGxC,eAAO,MAAM,SAAS,8BAA8B,CAAC;AACrD,eAAO,MAAM,wBAAwB,YAAY,CAAC;AAClD,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAC3C,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAI9C,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAC5C,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAG5C,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,WAAW,KAAK,CAAC;AAG9B,eAAO,MAAM,aAAa,KAAK,CAAC;AAChC,eAAO,MAAM,oBAAoB,YAAY,CAAC"}

package/dist/Picker/constants.js

@@ -0,0 +1,29 @@
+/**
+ * Picker design tokens (from Figma node 92:1716).
+ * Reuses ListCell text tokens where the values overlap.
+ */
+/* ── Text colours ─────────────────────────────────────────────────── */
+export const TEXT_PRIMARY = '#2C2C2C';
+export const TEXT_SECONDARY = '#738295';
+/* ── Search field ─────────────────────────────────────────────────── */
+export const SEARCH_BG = 'rgba(120, 120, 128, 0.16)';
+export const SEARCH_PLACEHOLDER_COLOR = '#727272';
+export const SEARCH_ICON_COLOR = '#727272';
+export const SEARCH_BORDER_RADIUS = 100;
+export const SEARCH_PADDING = 11;
+export const SEARCH_GLASS_BLUR_INTENSITY = 52;
+/* ── Radio button ─────────────────────────────────────────────────── */
+/* From Figma DS node 92:1721; outer ring + inner dot */
+export const RADIO_SIZE = 21;
+export const RADIO_DOT_SIZE = 12;
+export const RADIO_BORDER_WIDTH = 1.5;
+export const RADIO_BORDER_COLOR = '#C7C7CC';
+export const RADIO_ACTIVE_COLOR = '#94E80F';
+/* ── Cell layout ──────────────────────────────────────────────────── */
+export const CELL_PADDING_HORIZONTAL = 16;
+export const CELL_PADDING_VERTICAL = 14;
+export const CELL_GAP = 8;
+export const CELL_HEIGHT = 44;
+/* ── Header ───────────────────────────────────────────────────────── */
+export const HEADER_HEIGHT = 44;
+export const HEADER_CHEVRON_COLOR = '#2C2C2C';

package/dist/Picker/icons.d.ts

@@ -0,0 +1,3 @@
+export declare function BackChevron(): import("react/jsx-runtime").JSX.Element;
+export declare function SearchIcon(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/Picker/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/Picker/icons.tsx"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,4CAE1B;AAED,wBAAgB,UAAU,4CAEzB"}

package/dist/Picker/icons.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HEADER_CHEVRON_COLOR, SEARCH_ICON_COLOR } from './constants';
+import { Icon } from '../Icon';
+export function BackChevron() {
+    return _jsx(Icon, { name: "chevron-left", color: HEADER_CHEVRON_COLOR });
+}
+export function SearchIcon() {
+    return _jsx(Icon, { name: "search", color: SEARCH_ICON_COLOR });
+}

package/dist/Picker/index.d.ts

@@ -0,0 +1,3 @@
+export { Picker } from './Picker';
+export type { PickerProps, PickerItem } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/Picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/Picker/index.js

@@ -0,0 +1 @@
+export { Picker } from './Picker';

package/dist/Picker/styles.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare const Container: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const TopOverlay: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const Grabber: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const HeaderRow: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const HeaderBackPressable: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<Omit<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>, "ref"> & {
+    ref?: ((instance: import("react-native").View | null) => void) | import("react").RefObject<import("react-native").View> | null | undefined;
+}, never>>;
+export declare const HeaderTitle: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const EmptyView: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SearchContainer: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SearchGlassShell: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SearchBlurLayer: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SearchGlassOverlay: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SearchGlassEdge: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SearchGlassHighlight: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SearchFieldRow: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const SearchInput: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").Substitute<import("react-native").TextInputProps, import("react-native").TextInputProps & import("react").RefAttributes<import("react-native").TextInput>>, never>, never>>;
+export declare const CellPressable: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<Omit<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>, "ref"> & {
+    ref?: ((instance: import("react-native").View | null) => void) | import("react").RefObject<import("react-native").View> | null | undefined;
+}, never>>;
+export declare const Leading: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const TitleGroup: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const TitleText: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const SubtitleText: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const RadioOuter: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, {
+    $selected: boolean;
+}>>;
+export declare const RadioCircle: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, {
+    $selected: boolean;
+}>>;
+export declare const EmptyContainer: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const EmptyText: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/Picker/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Picker/styles.ts"],"names":[],"mappings":";AAuBA,eAAO,MAAM,SAAS,+KAErB,CAAC;AAEF,eAAO,MAAM,UAAU,+KAQtB,CAAC;AAIF,eAAO,MAAM,OAAO,+KAOnB,CAAC;AAEF,eAAO,MAAM,SAAS,+KAOrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;UAM/B,CAAC;AAEF,eAAO,MAAM,WAAW,+KAUvB,CAAC;AAEF,eAAO,MAAM,SAAS,+KAGrB,CAAC;AAIF,eAAO,MAAM,eAAe,+KAG3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,+KAgB1B,CAAC;AAEJ,eAAO,MAAM,eAAe,+KAM3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,+KAS9B,CAAC;AAEF,eAAO,MAAM,eAAe,+KAS3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,+KAOhC,CAAC;AAEF,eAAO,MAAM,cAAc,+KAO1B,CAAC;AAEF,eAAO,MAAM,WAAW,sZAUvB,CAAC;AAIF,eAAO,MAAM,aAAa;;UAKzB,CAAC;AAEF,eAAO,MAAM,OAAO,+KAKnB,CAAC;AAEF,eAAO,MAAM,UAAU,+KAItB,CAAC;AAEF,eAAO,MAAM,SAAS,+KAMrB,CAAC;AAEF,eAAO,MAAM,YAAY,+KAMxB,CAAC;AAIF,eAAO,MAAM,UAAU;eAA4B,OAAO;GAUzD,CAAC;AAEF,eAAO,MAAM,WAAW;eAA4B,OAAO;GAK1D,CAAC;AAIF,eAAO,MAAM,cAAc,+KAG1B,CAAC;AAEF,eAAO,MAAM,SAAS,+KAMrB,CAAC"}

package/dist/Picker/styles.js

@@ -0,0 +1,192 @@
+import { Platform, Pressable } from 'react-native';
+import styled from 'styled-components/native';
+import { TEXT_PRIMARY, TEXT_SECONDARY, SEARCH_BG, SEARCH_PLACEHOLDER_COLOR, SEARCH_BORDER_RADIUS, SEARCH_PADDING, CELL_GAP, CELL_HEIGHT, RADIO_SIZE, RADIO_DOT_SIZE, RADIO_BORDER_WIDTH, RADIO_BORDER_COLOR, RADIO_ACTIVE_COLOR, HEADER_HEIGHT, CELL_PADDING_HORIZONTAL, } from './constants';
+/* ── Outer wrapper ────────────────────────────────────────────────── */
+export const Container = styled.View `
+  background: transparent;
+`;
+export const TopOverlay = styled.View `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  gap: 10px;
+  align-items: center;
+`;
+/* ── Header ───────────────────────────────────────────────────────── */
+export const Grabber = styled.View `
+  width: 36px;
+  height: 5px;
+  flex-shrink: 0;
+  border-radius: 100px;
+  background-color: #CCCCCC;
+  margin-vertical: 5px;
+`;
+export const HeaderRow = styled.View `
+  flex-direction: row;
+  align-items: center;
+  height: ${HEADER_HEIGHT}px;
+  padding-horizontal: ${CELL_PADDING_HORIZONTAL}px;
+  padding-vertical: 8px;
+  width: 100%;
+`;
+export const HeaderBackPressable = styled(Pressable) `
+  width: ${HEADER_HEIGHT}px;
+  height: ${HEADER_HEIGHT}px;
+  align-items: center;
+  justify-content: center;
+  margin-left: -8px;
+`;
+export const HeaderTitle = styled.Text `
+  flex: 1;
+  color: ${TEXT_PRIMARY};
+  text-align: center;
+
+  font-family: "SB Sans Text";
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.32px;
+`;
+export const EmptyView = styled.View `
+  width: ${HEADER_HEIGHT}px;
+  height: ${HEADER_HEIGHT}px;
+`;
+/* ── Search field ─────────────────────────────────────────────────── */
+export const SearchContainer = styled.View `
+  background: transparent;
+  width: 90%;
+`;
+export const SearchGlassShell = styled.View(() => ({
+    position: 'relative',
+    overflow: 'hidden',
+    borderRadius: SEARCH_BORDER_RADIUS,
+    ...Platform.select({
+        ios: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 6 },
+            shadowOpacity: 0.08,
+            shadowRadius: 16,
+        },
+        android: {
+            elevation: 3,
+        },
+        default: {},
+    }),
+}));
+export const SearchBlurLayer = styled.View `
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+`;
+export const SearchGlassOverlay = styled.View `
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: ${Platform.OS === 'ios'
+    ? 'rgba(255, 255, 255, 0.06)'
+    : 'rgba(255, 255, 255, 0.35)'};
+`;
+export const SearchGlassEdge = styled.View `
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: ${SEARCH_BORDER_RADIUS}px;
+  border-width: 1px;
+  border-color: rgba(255, 255, 255, 0.5);
+`;
+export const SearchGlassHighlight = styled.View `
+  position: absolute;
+  top: 0;
+  left: 16px;
+  right: 16px;
+  height: 1px;
+  background-color: rgba(255, 255, 255, 0.72);
+`;
+export const SearchFieldRow = styled.View `
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  background-color: ${SEARCH_BG};
+  border-radius: ${SEARCH_BORDER_RADIUS}px;
+  padding: ${SEARCH_PADDING}px;
+`;
+export const SearchInput = styled.TextInput.attrs({
+    placeholderTextColor: SEARCH_PLACEHOLDER_COLOR,
+}) `
+  flex: 1;
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.08px;
+  color: ${TEXT_PRIMARY};
+  padding: 0;
+`;
+/* ── List cell row ────────────────────────────────────────────────── */
+export const CellPressable = styled(Pressable) `
+  flex-direction: row;
+  align-items: center;
+  padding: ${CELL_PADDING_HORIZONTAL}px;
+  gap: ${CELL_GAP}px;
+`;
+export const Leading = styled.View `
+  flex: 1;
+  height: ${CELL_HEIGHT}px;
+  flex-direction: row;
+  align-items: center;
+`;
+export const TitleGroup = styled.View `
+  flex-shrink: 1;
+  justify-content: center;
+  padding-bottom: 2px;
+`;
+export const TitleText = styled.Text `
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.43px;
+  color: ${TEXT_PRIMARY};
+`;
+export const SubtitleText = styled.Text `
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.08px;
+  color: ${TEXT_SECONDARY};
+`;
+/* ── Radio button ─────────────────────────────────────────────────── */
+export const RadioOuter = styled.View `
+  width: ${RADIO_SIZE}px;
+  height: ${RADIO_SIZE}px;
+  border-radius: ${RADIO_SIZE / 2}px;
+  border-width: ${RADIO_BORDER_WIDTH}px;
+  border-color: ${({ $selected }) => $selected ? RADIO_ACTIVE_COLOR : RADIO_BORDER_COLOR};
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+`;
+export const RadioCircle = styled.View `
+  width: ${({ $selected }) => ($selected ? RADIO_DOT_SIZE : 0)}px;
+  height: ${({ $selected }) => ($selected ? RADIO_DOT_SIZE : 0)}px;
+  border-radius: ${RADIO_DOT_SIZE / 2}px;
+  background-color: ${RADIO_ACTIVE_COLOR};
+`;
+/* ── Empty state ──────────────────────────────────────────────────── */
+export const EmptyContainer = styled.View `
+  padding: ${CELL_PADDING_HORIZONTAL * 2}px;
+  align-items: center;
+`;
+export const EmptyText = styled.Text `
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.43px;
+  color: ${TEXT_SECONDARY};
+`;

package/dist/Picker/types.d.ts

@@ -0,0 +1,40 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface PickerItem {
+    /** Primary label displayed in the row (e.g. "EUR · €") */
+    label: string;
+    /** Secondary label shown below the title (e.g. "Euro") */
+    subtitle?: string;
+    /** Unique value identifying this option */
+    value: string;
+    /** Additional properties */
+    [key: string]: unknown;
+}
+export interface PickerProps {
+    /** List of selectable options */
+    items: PickerItem[];
+    /** Currently selected value */
+    selectedValue?: string;
+    /** Called with the new value when the user taps an item */
+    onValueChange?: (value: string) => void;
+    /** Show the search field above the list. @default true */
+    searchable?: boolean;
+    /** Placeholder for the search field. @default 'Search' */
+    searchPlaceholder?: string;
+    /** Header title. When provided with onBack, shows header with back chevron */
+    title?: string;
+    /** Called when the back chevron is pressed */
+    onBack?: () => void;
+    /** When provided, shows Save button; called with current selected value when pressed */
+    onSave?: (value: string) => void;
+    /** Style applied to the outer container */
+    style?: StyleProp<ViewStyle>;
+    /** Forwarded to the root View */
+    testID?: string;
+    /** Show the grabber. @default false */
+    grabber?: boolean;
+    /** When true, picker grows only to content height (up to a max cap). @default false */
+    fitContent?: boolean;
+    /** Keyboard inset passed by the parent (used for fit-content sheets). @default 0 */
+    keyboardInset?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/Picker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Picker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,wFAAwF;IACxF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oFAAoF;IACpF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}

package/dist/Picker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Picker/useFilteredItems.d.ts

@@ -0,0 +1,3 @@
+import type { PickerItem } from './types';
+export declare function useFilteredItems(items: PickerItem[], query: string): PickerItem[];
+//# sourceMappingURL=useFilteredItems.d.ts.map

package/dist/Picker/useFilteredItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilteredItems.d.ts","sourceRoot":"","sources":["../../src/Picker/useFilteredItems.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,MAAM,gBAmBlE"}