@demlanide/react-lucky-components 0.1.0

package/dist/ListCell/CheckMark.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path, Rect } from 'react-native-svg';
+import { SELECTION_ICON_SIZE } from './constants';
+export function CheckMark({ selected = false, color = '#B2F549', inactiveColor = '#C7C7CC', size = SELECTION_ICON_SIZE, }) {
+    const inset = size * 0.0833;
+    const innerSize = size - inset * 2;
+    const borderRadius = 4;
+    if (selected) {
+        return (_jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [_jsx(Rect, { x: inset, y: inset, width: innerSize, height: innerSize, rx: borderRadius, fill: color }), _jsx(Path, { d: `M${size * 0.3} ${size * 0.5} L${size * 0.45} ${size * 0.65} L${size * 0.7} ${size * 0.35}`, stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] }));
+    }
+    return (_jsx(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: _jsx(Rect, { x: inset, y: inset, width: innerSize, height: innerSize, rx: borderRadius, stroke: inactiveColor, strokeWidth: 1.5, fill: "none" }) }));
+}

package/dist/ListCell/Chevron.d.ts

@@ -0,0 +1,14 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface ChevronProps {
+    /** Stroke colour. @default '#C7C7CC' */
+    color?: string;
+    /** Outer container size. @default 24 */
+    size?: number;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * A simple right-pointing chevron (">") built with View borders.
+ * Matches the 24 × 24 icon container from the Figma design.
+ */
+export declare function Chevron({ color, size, style, }: ChevronProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Chevron.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../src/ListCell/Chevron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzD,MAAM,WAAW,YAAY;IAC3B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAgBD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAqB,EACrB,IAA6B,EAC7B,KAAK,GACN,EAAE,YAAY,2CAMd"}

package/dist/ListCell/Chevron.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components/native';
+import { CHEVRON_COLOR, CHEVRON_CONTAINER_SIZE, CHEVRON_STROKE_WIDTH } from './constants';
+const ChevronContainer = styled.View `
+  width: ${({ $size }) => `${$size}px`};
+  height: ${({ $size }) => `${$size}px`};
+  align-items: center;
+  justify-content: center;
+`;
+const ChevronArrow = styled.View `
+  width: 8.5px;
+  height: 8.5px;
+  border-top-width: ${CHEVRON_STROKE_WIDTH}px;
+  border-right-width: ${CHEVRON_STROKE_WIDTH}px;
+`;
+/**
+ * A simple right-pointing chevron (">") built with View borders.
+ * Matches the 24 × 24 icon container from the Figma design.
+ */
+export function Chevron({ color = CHEVRON_COLOR, size = CHEVRON_CONTAINER_SIZE, style, }) {
+    return (_jsx(ChevronContainer, { "$size": size, style: style, children: _jsx(ChevronArrow, { style: { borderColor: color, transform: [{ rotate: '45deg' }] } }) }));
+}

package/dist/ListCell/ListCell.d.ts

@@ -0,0 +1,3 @@
+import type { ListCellProps } from './types';
+export declare function ListCell({ title, subtitle, leading, image, style, disabled, testID, trailing, value, onValueChange, activeTrackColor, inactiveTrackColor, thumbColor, detail, onPress, selected, items, selectedValue, onSelectValue, pickerTitle, pickerSearchPlaceholder, variant, }: ListCellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListCell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/ListCell/ListCell.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAA0B,MAAM,SAAS,CAAC;AAqCrE,wBAAgB,QAAQ,CAAC,EAEvB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,MAAM,EAEN,QAAqC,EAErC,KAAa,EACb,aAAa,EACb,gBAA6C,EAC7C,kBAAiD,EACjD,UAAgC,EAEhC,MAAM,EACN,OAAO,EAEP,QAAgB,EAEhB,KAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,EACX,uBAAkC,EAClC,OAAO,GACR,EAAE,aAAa,2CAyKf"}

package/dist/ListCell/ListCell.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { CheckMark } from './CheckMark';
+import { RadioButton } from './RadioButton';
+import { PickerModal } from './PickerModal';
+import { CellPressable, DetailText, ImageWrapper, Leading, LeadingImage, SubtitleText, TitleGroup, TitleText, TrailingNavigation, TrailingSelection, TrailingText, } from './styles';
+import { SwitchTrack } from './SwitchTrack';
+import { useSwitchAnimation } from './useSwitchAnimation';
+import { createListCellPressHandler, getListCellAccessibilityState, } from './utilities';
+import { DEFAULT_ACTIVE_TRACK_COLOR, DEFAULT_INACTIVE_TRACK_COLOR, DEFAULT_LIST_CELL_TRAILING, DEFAULT_THUMB_COLOR, } from './constants';
+import { colors } from '../theme';
+import { Icon } from '../Icon';
+const CLASSIC_VARIANT_STYLE = {
+    backgroundColor: colors.white,
+    borderRadius: 24,
+    padding: 16,
+    marginBottom: 8,
+    marginHorizontal: 16,
+};
+function isTrailingPreset(value) {
+    return (value === 'switch' ||
+        value === 'navigation' ||
+        value === 'selector' ||
+        value === 'text' ||
+        value === 'radio' ||
+        value === 'checkbox' ||
+        value === 'none');
+}
+/* ── Component ──────────────────────────────────────────────────────── */
+export function ListCell({ 
+// Common
+title, subtitle, leading, image, style, disabled = false, testID, 
+// Trailing
+trailing = DEFAULT_LIST_CELL_TRAILING, 
+// Switch
+value = false, onValueChange, activeTrackColor = DEFAULT_ACTIVE_TRACK_COLOR, inactiveTrackColor = DEFAULT_INACTIVE_TRACK_COLOR, thumbColor = DEFAULT_THUMB_COLOR, 
+// Navigation / Text
+detail, onPress, 
+// Radio / Checkbox
+selected = false, 
+// Selector
+items = [], selectedValue, onSelectValue, pickerTitle, pickerSearchPlaceholder = 'Search', variant, }) {
+    const { translateX, trackBg, indicatorOpacity, circleOpacity } = useSwitchAnimation(value, { activeTrackColor, inactiveTrackColor });
+    const switchToggle = (_jsx(SwitchTrack, { trackBg: trackBg, translateX: translateX, indicatorOpacity: indicatorOpacity, circleOpacity: circleOpacity, thumbColor: thumbColor, disabled: disabled }));
+    const cellStyle = variant === 'classic' ? [CLASSIC_VARIANT_STYLE, style] : style;
+    /* ── List cell ────────────────────────────────────────────────── */
+    const trailingPreset = isTrailingPreset(trailing) ? trailing : undefined;
+    const isSwitch = trailingPreset === 'switch';
+    const isSelector = trailingPreset === 'selector';
+    const isText = trailingPreset === 'text';
+    const isRadio = trailingPreset === 'radio';
+    const isCheckbox = trailingPreset === 'checkbox';
+    const [pickerVisible, setPickerVisible] = useState(false);
+    const [draftSelectedValue, setDraftSelectedValue] = useState(selectedValue);
+    const selectorDetail = useMemo(() => {
+        if (!isSelector || items.length === 0)
+            return undefined;
+        const found = items.find((i) => i.value === selectedValue);
+        return found?.label ?? 'Select…';
+    }, [isSelector, items, selectedValue]);
+    const displayDetail = isSelector ? detail ?? selectorDetail : detail;
+    const handleSelectorPress = useCallback(() => {
+        setDraftSelectedValue(selectedValue);
+        setPickerVisible(true);
+    }, [selectedValue]);
+    const handlePickerBack = useCallback(() => setPickerVisible(false), []);
+    const handlePickerValueChange = useCallback((v) => {
+        setDraftSelectedValue(v);
+        onSelectValue?.(v);
+    }, []);
+    const handlePickerSave = useCallback((v) => {
+        setPickerVisible(false);
+        onSelectValue?.(v);
+    }, [onSelectValue]);
+    const handlePress = createListCellPressHandler({
+        disabled,
+        isSwitchTrailing: isSwitch,
+        isSelectorTrailing: isSelector,
+        value,
+        onValueChange,
+        onPress,
+        onSelectorPress: handleSelectorPress,
+    });
+    const accessibilityState = getListCellAccessibilityState({
+        isSwitchTrailing: isSwitch,
+        isSelectionTrailing: isRadio || isCheckbox,
+        selected,
+        value,
+        disabled,
+    });
+    const hasTextSubtitle = typeof subtitle === 'string';
+    /* ── Trailing accessory ───────────────────────────────────────── */
+    const renderTrailing = () => {
+        if (trailing === 'none')
+            return null;
+        if (!trailingPreset)
+            return trailing;
+        if (isSwitch)
+            return switchToggle;
+        if (isText) {
+            return (_jsx(TrailingText, { children: displayDetail != null && (_jsx(DetailText, { numberOfLines: 1, children: displayDetail })) }));
+        }
+        if (isRadio) {
+            return (_jsx(TrailingSelection, { children: _jsx(RadioButton, { selected: selected }) }));
+        }
+        if (isCheckbox) {
+            return (_jsx(TrailingSelection, { children: _jsx(CheckMark, { selected: selected }) }));
+        }
+        return (_jsxs(TrailingNavigation, { children: [displayDetail != null && (_jsx(DetailText, { numberOfLines: 1, children: displayDetail })), _jsx(Icon, { name: "chevron-right", size: 24, color: colors.gray400 })] }));
+    };
+    const accessibilityRole = isSwitch
+        ? 'switch'
+        : isRadio
+            ? 'radio'
+            : isCheckbox
+                ? 'checkbox'
+                : 'button';
+    return (_jsxs(CellPressable, { onPress: handlePress, disabled: disabled, testID: testID, accessibilityRole: accessibilityRole, accessibilityState: accessibilityState, "$dimmed": !isSwitch && disabled, style: cellStyle, children: [_jsxs(Leading, { "$withLeading": !!leading || !!image, children: [image && (_jsx(ImageWrapper, { children: _jsx(LeadingImage, { source: image }) })), leading && leading, _jsxs(TitleGroup, { "$hasTextSubtitle": hasTextSubtitle, children: [_jsx(TitleText, { numberOfLines: 1, children: title }), subtitle != null &&
+                                (hasTextSubtitle ? (_jsx(SubtitleText, { numberOfLines: 2, children: subtitle })) : (subtitle))] })] }), renderTrailing(), isSelector && items.length > 0 && (_jsx(PickerModal, { visible: pickerVisible, items: items, selectedValue: draftSelectedValue, onValueChange: handlePickerValueChange, title: pickerTitle ?? title ?? 'Select', onBack: handlePickerBack, onSave: handlePickerSave, searchPlaceholder: pickerSearchPlaceholder }))] }));
+}

package/dist/ListCell/PickerModal.d.ts

@@ -0,0 +1,13 @@
+import type { PickerItem } from '../Picker/types';
+export interface PickerModalProps {
+    visible: boolean;
+    items: PickerItem[];
+    selectedValue?: string;
+    onValueChange: (value: string) => void;
+    title: string;
+    onBack: () => void;
+    onSave: (value: string) => void;
+    searchPlaceholder: string;
+}
+export declare function PickerModal({ visible, items, selectedValue, onValueChange, title, onBack, onSave, searchPlaceholder, }: PickerModalProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PickerModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PickerModal.d.ts","sourceRoot":"","sources":["../../src/ListCell/PickerModal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,aAAa,EACb,aAAa,EACb,KAAK,EACL,MAAM,EACN,MAAM,EACN,iBAAiB,GAClB,EAAE,gBAAgB,2CAuBlB"}

package/dist/ListCell/PickerModal.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Picker } from '../Picker';
+export function PickerModal({ visible, items, selectedValue, onValueChange, title, onBack, onSave, searchPlaceholder, }) {
+    const insets = useSafeAreaInsets();
+    return (_jsx(Modal, { visible: visible, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: onBack, children: _jsx(View, { style: { flex: 1, backgroundColor: '#FFF', paddingTop: insets.top }, children: _jsx(Picker, { items: items, selectedValue: selectedValue, onValueChange: onValueChange, title: title, onBack: onBack, onSave: onSave, searchPlaceholder: searchPlaceholder }) }) }));
+}

package/dist/ListCell/RadioButton.d.ts

@@ -0,0 +1,10 @@
+export interface RadioButtonProps {
+    selected?: boolean;
+    /** Stroke / fill colour when selected. @default '#B2F549' */
+    color?: string;
+    /** Stroke colour when unselected. @default '#C7C7CC' */
+    inactiveColor?: string;
+    size?: number;
+}
+export declare function RadioButton({ selected, color, inactiveColor, size, }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RadioButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../src/ListCell/RadioButton.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,KAAiB,EACjB,aAAyB,EACzB,IAA0B,GAC3B,EAAE,gBAAgB,2CAiClB"}

package/dist/ListCell/RadioButton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Circle } from 'react-native-svg';
+import { SELECTION_ICON_SIZE } from './constants';
+export function RadioButton({ selected = false, color = '#B2F549', inactiveColor = '#C7C7CC', size = SELECTION_ICON_SIZE, }) {
+    const strokeWidth = 1.5;
+    const outerRadius = size / 2 - strokeWidth;
+    const center = size / 2;
+    if (selected) {
+        return (_jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [_jsx(Circle, { cx: center, cy: center, r: outerRadius, stroke: color, strokeWidth: strokeWidth, fill: "none" }), _jsx(Circle, { cx: center, cy: center, r: size * 0.25, fill: color })] }));
+    }
+    return (_jsx(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: _jsx(Circle, { cx: center, cy: center, r: outerRadius, stroke: inactiveColor, strokeWidth: strokeWidth, fill: "none" }) }));
+}

package/dist/ListCell/SwitchTrack.d.ts

@@ -0,0 +1,19 @@
+import { Animated } from 'react-native';
+export interface SwitchTrackProps {
+    /** Animated track background (interpolated color) */
+    trackBg: Animated.AnimatedInterpolation<string | number>;
+    /** Animated knob translateX */
+    translateX: Animated.AnimatedInterpolation<number>;
+    /** Animated indicator opacity */
+    indicatorOpacity: Animated.AnimatedInterpolation<number>;
+    /** Animated circle opacity (off state) */
+    circleOpacity: Animated.AnimatedInterpolation<number>;
+    /** Knob and indicator colour */
+    thumbColor: string;
+    disabled?: boolean;
+}
+/**
+ * Presentational track + knob + indicator. No press handling or animation logic.
+ */
+export declare function SwitchTrack({ trackBg, translateX, indicatorOpacity, circleOpacity, thumbColor, disabled, }: SwitchTrackProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SwitchTrack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchTrack.d.ts","sourceRoot":"","sources":["../../src/ListCell/SwitchTrack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,OAAO,EAAE,QAAQ,CAAC,qBAAqB,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACzD,+BAA+B;IAC/B,UAAU,EAAE,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACnD,iCAAiC;IACjC,gBAAgB,EAAE,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACzD,0CAA0C;IAC1C,aAAa,EAAE,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACtD,gCAAgC;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,QAAgB,GACjB,EAAE,gBAAgB,2CAiBlB"}

package/dist/ListCell/SwitchTrack.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleOff, Indicator, Knob, Track } from './styles';
+/**
+ * Presentational track + knob + indicator. No press handling or animation logic.
+ */
+export function SwitchTrack({ trackBg, translateX, indicatorOpacity, circleOpacity, thumbColor, disabled = false, }) {
+    return (_jsxs(Track, { "$disabled": disabled, style: { backgroundColor: trackBg }, children: [_jsx(Indicator, { style: { opacity: indicatorOpacity, backgroundColor: thumbColor } }), _jsx(CircleOff, { style: { opacity: circleOpacity, borderColor: thumbColor } }), _jsx(Knob, { style: { backgroundColor: thumbColor, transform: [{ translateX }] } })] }));
+}

package/dist/ListCell/constants.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ListCell dimensions and design tokens (from Figma node 1:2991 / 27:776).
+ * List-cell typography uses Figma design variables.
+ */
+import type { ListCellTrailingPreset } from './types';
+export declare const TRACK_WIDTH = 64;
+export declare const TRACK_HEIGHT = 28;
+export declare const TRACK_PADDING = 2;
+export declare const KNOB_WIDTH = 39;
+export declare const KNOB_HEIGHT = 24;
+export declare const TRAVEL: number;
+export declare const INDICATOR_HEIGHT = 10;
+export declare const INDICATOR_LEFT: number;
+export declare const CIRCLE_SIZE = 10;
+export declare const CIRCLE_OFF_LEFT: number;
+export declare const TEXT_PRIMARY = "#2C2C2C";
+export declare const TEXT_SECONDARY = "#738295";
+export declare const IMG_SIZE = 44;
+export declare const CHEVRON_CONTAINER_SIZE = 24;
+export declare const CHEVRON_STROKE_WIDTH = 2;
+export declare const CHEVRON_COLOR = "#C7C7CC";
+export declare const SELECTION_ICON_SIZE = 24;
+export declare const RADIO_INNER_SIZE = 21;
+export declare const CHECKBOX_INNER_SIZE = 20;
+export declare const BRAND_GREEN = "#B2F549";
+export declare const DEFAULT_LIST_CELL_TRAILING: ListCellTrailingPreset;
+export declare const DEFAULT_ACTIVE_TRACK_COLOR = "#B2F549";
+export declare const DEFAULT_INACTIVE_TRACK_COLOR = "#738295";
+export declare const DEFAULT_THUMB_COLOR = "#FFFFFF";
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/ListCell/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,MAAM,QAA+C,CAAC;AAGnE,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,cAAc,QAAmC,CAAC;AAG/D,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,eAAe,QAC6B,CAAC;AAG1D,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,cAAc,YAAY,CAAC;AAGxC,eAAO,MAAM,QAAQ,KAAK,CAAC;AAG3B,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,aAAa,YAAY,CAAC;AAGvC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC,eAAO,MAAM,0BAA0B,EAAE,sBAAiC,CAAC;AAC3E,eAAO,MAAM,0BAA0B,YAAY,CAAC;AACpD,eAAO,MAAM,4BAA4B,YAAY,CAAC;AACtD,eAAO,MAAM,mBAAmB,YAAY,CAAC"}

package/dist/ListCell/constants.js

@@ -0,0 +1,35 @@
+/**
+ * ListCell dimensions and design tokens (from Figma node 1:2991 / 27:776).
+ * List-cell typography uses Figma design variables.
+ */
+/* ── Toggle dimensions ─────────────────────────────────────────────── */
+export const TRACK_WIDTH = 64;
+export const TRACK_HEIGHT = 28;
+export const TRACK_PADDING = 2;
+export const KNOB_WIDTH = 39;
+export const KNOB_HEIGHT = 24;
+export const TRAVEL = TRACK_WIDTH - TRACK_PADDING * 2 - KNOB_WIDTH; // 21 px
+/* "I" indicator — centred in the non-knob area when the switch is ON */
+export const INDICATOR_HEIGHT = 10;
+export const INDICATOR_LEFT = TRACK_PADDING + (TRAVEL - 1) / 2;
+/* Hollow circle — centred in the non-knob area when the switch is OFF */
+export const CIRCLE_SIZE = 10;
+export const CIRCLE_OFF_LEFT = TRACK_PADDING + KNOB_WIDTH + (TRAVEL - CIRCLE_SIZE) / 2;
+/* ── List-cell typography (Figma design variables) ────────────────── */
+export const TEXT_PRIMARY = '#2C2C2C'; // Text/Primary
+export const TEXT_SECONDARY = '#738295'; // Text/Secondary
+/* ── List-cell image ───────────────────────────────────────────────── */
+export const IMG_SIZE = 44;
+/* ── Chevron (navigation trailing) ─────────────────────────────────── */
+export const CHEVRON_CONTAINER_SIZE = 24;
+export const CHEVRON_STROKE_WIDTH = 2;
+export const CHEVRON_COLOR = '#C7C7CC';
+/* ── Radio / Checkbox (selection trailing) ─────────────────────────── */
+export const SELECTION_ICON_SIZE = 24;
+export const RADIO_INNER_SIZE = 21; // 87.5% of 24
+export const CHECKBOX_INNER_SIZE = 20; // ~83.3% of 24
+export const BRAND_GREEN = '#B2F549';
+export const DEFAULT_LIST_CELL_TRAILING = 'switch';
+export const DEFAULT_ACTIVE_TRACK_COLOR = '#B2F549';
+export const DEFAULT_INACTIVE_TRACK_COLOR = '#738295';
+export const DEFAULT_THUMB_COLOR = '#FFFFFF';

package/dist/ListCell/index.d.ts

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

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

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

package/dist/ListCell/index.js

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

package/dist/ListCell/styles.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { Animated } from 'react-native';
+export declare const Track: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>>, {
+    $disabled?: boolean | undefined;
+}>>;
+export declare const Knob: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>>, never>>;
+export declare const Indicator: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>>, never>>;
+export declare const CircleOff: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>>, never>>;
+export declare const CellPressable: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<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;
+}, {
+    $dimmed?: boolean | undefined;
+}>>;
+export declare const Leading: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, {
+    $withLeading?: boolean | undefined;
+}>>;
+export declare const ImageWrapper: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const LeadingImage: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ImageProps, never>>;
+export declare const TitleGroup: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, {
+    $hasTextSubtitle?: boolean | undefined;
+}>>;
+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 TrailingNavigation: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const DetailText: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const TrailingText: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const TrailingSelection: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ListCell/styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAa,MAAM,cAAc,CAAC;AAmBnD,eAAO,MAAM,KAAK;;GAMjB,CAAC;AAEF,eAAO,MAAM,IAAI,oQAOhB,CAAC;AAEF,eAAO,MAAM,SAAS,oQAOrB,CAAC;AAEF,eAAO,MAAM,SAAS,oQASrB,CAAC;AAIF,eAAO,MAAM,aAAa;;;;GAMzB,CAAC;AAEF,eAAO,MAAM,OAAO;;GAMnB,CAAC;AAEF,eAAO,MAAM,YAAY,+KASxB,CAAC;AAEF,eAAO,MAAM,YAAY,gLAKxB,CAAC;AAEF,eAAO,MAAM,UAAU;;GAItB,CAAC;AAEF,eAAO,MAAM,SAAS,+KAMrB,CAAC;AAEF,eAAO,MAAM,YAAY,+KAOxB,CAAC;AAIF,eAAO,MAAM,kBAAkB,+KAI9B,CAAC;AAEF,eAAO,MAAM,UAAU,+KAMtB,CAAC;AAIF,eAAO,MAAM,YAAY,+KAGxB,CAAC;AAIF,eAAO,MAAM,iBAAiB,+KAG7B,CAAC"}

package/dist/ListCell/styles.js

@@ -0,0 +1,111 @@
+import { Animated, Pressable } from 'react-native';
+import styled from 'styled-components/native';
+import { TRACK_HEIGHT, TRACK_WIDTH, TRACK_PADDING, KNOB_HEIGHT, KNOB_WIDTH, INDICATOR_HEIGHT, INDICATOR_LEFT, CIRCLE_SIZE, CIRCLE_OFF_LEFT, TEXT_PRIMARY, TEXT_SECONDARY, IMG_SIZE, } from './constants';
+/* ── Toggle ────────────────────────────────────────────────────────── */
+export const Track = styled(Animated.View) `
+  width: ${TRACK_WIDTH}px;
+  height: ${TRACK_HEIGHT}px;
+  border-radius: ${TRACK_HEIGHT / 2}px;
+  overflow: hidden;
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
+`;
+export const Knob = styled(Animated.View) `
+  position: absolute;
+  top: ${TRACK_PADDING}px;
+  left: ${TRACK_PADDING}px;
+  width: ${KNOB_WIDTH}px;
+  height: ${KNOB_HEIGHT}px;
+  border-radius: ${KNOB_HEIGHT / 2}px;
+`;
+export const Indicator = styled(Animated.View) `
+  position: absolute;
+  left: ${INDICATOR_LEFT}px;
+  top: ${(TRACK_HEIGHT - INDICATOR_HEIGHT) / 2}px;
+  width: 1px;
+  height: ${INDICATOR_HEIGHT}px;
+  border-radius: 0.5px;
+`;
+export const CircleOff = styled(Animated.View) `
+  position: absolute;
+  left: ${CIRCLE_OFF_LEFT}px;
+  top: ${(TRACK_HEIGHT - CIRCLE_SIZE) / 2}px;
+  width: ${CIRCLE_SIZE}px;
+  height: ${CIRCLE_SIZE}px;
+  border-radius: ${CIRCLE_SIZE / 2}px;
+  border-width: 1.5px;
+  background-color: transparent;
+`;
+/* ── List-cell layout ──────────────────────────────────────────────── */
+export const CellPressable = styled(Pressable) `
+  flex-direction: row;
+  align-items: center;
+  padding: 16px;
+  gap: 8px;
+  opacity: ${({ $dimmed }) => ($dimmed ? 0.5 : 1)};
+`;
+export const Leading = styled.View `
+  flex: 1;
+  height: ${IMG_SIZE}px;
+  flex-direction: row;
+  align-items: center;
+  gap: ${({ $withLeading }) => ($withLeading ? 8 : 0)}px;
+`;
+export const ImageWrapper = styled.View `
+  width: ${IMG_SIZE}px;
+  height: ${IMG_SIZE}px;
+  border-radius: 6px;
+  overflow: hidden;
+  border-width: 0.5px;
+  border-color: rgba(0, 0, 0, 0.06);
+  background-color: #F2F2F2;
+  padding: 4px;
+`;
+export const LeadingImage = styled.Image `
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  resize-mode: contain;
+`;
+export const TitleGroup = styled.View `
+  flex-shrink: 1;
+  justify-content: center;
+  padding-bottom: ${({ $hasTextSubtitle }) => ($hasTextSubtitle ? 2 : 0)}px;
+`;
+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};
+  margin-top: 4px;
+`;
+/* ── Navigation trailing (detail text + chevron) ─────────────────── */
+export const TrailingNavigation = styled.View `
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+`;
+export const DetailText = styled.Text `
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.43px;
+  color: ${TEXT_PRIMARY};
+`;
+/* ── Text-only trailing (detail text, no chevron) ────────────────── */
+export const TrailingText = styled.View `
+  flex-direction: row;
+  align-items: center;
+`;
+/* ── Selection trailing (radio / checkbox) ────────────────────────── */
+export const TrailingSelection = styled.View `
+  flex-direction: row;
+  align-items: center;
+`;

package/dist/ListCell/types.d.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type { PickerItem } from '../Picker/types';
+export type ListCellTrailingPreset = 'switch' | 'navigation' | 'selector' | 'text' | 'radio' | 'checkbox';
+export type ListCellTrailing = ListCellTrailingPreset | ReactNode;
+export interface ListCellProps {
+    /** Primary label. When provided the component renders as a full list-cell row. */
+    title?: string;
+    /** Secondary label shown below the title. Pass a string for text or a ReactNode (e.g. Badge). */
+    subtitle?: ReactNode;
+    /** Leading content. Can be a ReactNode or an ImageSourcePropType. */
+    leading?: ReactNode | ImageSourcePropType;
+    /** Leading image (44 x 44, rounded 6 px) */
+    image?: ImageSourcePropType;
+    /** Style applied to the outer container in list-cell mode */
+    style?: StyleProp<ViewStyle>;
+    /** Disables interaction and lowers opacity */
+    disabled?: boolean;
+    /** Forwarded to the root Pressable */
+    testID?: string;
+    /**
+     * Determines the trailing (right-side) accessory of the list cell.
+     *
+     * - `'switch'`     - animated toggle switch (default)
+     * - `'navigation'` - optional detail text + chevron arrow
+     * - `'selector'`   - selected item label + chevron; opens Picker in modal when pressed
+     * - `'text'`       - detail text only (no chevron)
+     * - `'radio'`      - radio button
+     * - `'checkbox'`   - checkbox
+     * - `ReactNode`    - custom trailing element rendered as-is
+     *
+     * When no `title` is provided the component always renders as a
+     * standalone toggle regardless of this prop.
+     *
+     * @default 'switch'
+     */
+    trailing?: ListCellTrailing;
+    /** Whether the switch is on */
+    value?: boolean;
+    /** Called with the new value when the switch is toggled */
+    onValueChange?: (value: boolean) => void;
+    /** Track colour when on. @default '#B2F549' (brand green) */
+    activeTrackColor?: string;
+    /** Track colour when off. @default colors.gray300 */
+    inactiveTrackColor?: string;
+    /** Knob colour. @default colors.white */
+    thumbColor?: string;
+    /** Detail text shown before the chevron (trailing='navigation' | 'text') */
+    detail?: string;
+    /** Called when the cell is pressed (all non-switch/non-selector trailing modes, including custom trailing nodes) */
+    onPress?: () => void;
+    /** Whether the radio/checkbox is selected (trailing='radio' | 'checkbox') */
+    selected?: boolean;
+    /** Options for the Picker (trailing='selector'); required when trailing is 'selector' */
+    items?: PickerItem[];
+    /** Currently selected value (trailing='selector') */
+    selectedValue?: string;
+    /** Called when the user selects and saves in the Picker (trailing='selector') */
+    onSelectValue?: (value: string) => void;
+    /** Header title for the Picker modal. @default title or 'Select' */
+    pickerTitle?: string;
+    /** Placeholder for the search field in the Picker modal. @default 'Search' */
+    pickerSearchPlaceholder?: string;
+    variant?: 'classic';
+}
+/** @deprecated Use `ListCellProps` instead. */
+export type SwitchProps = ListCellProps;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ListCell/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,sBAAsB,GAC9B,QAAQ,GACR,YAAY,GACZ,UAAU,GACV,MAAM,GACN,OAAO,GACP,UAAU,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG,SAAS,CAAC;AAElE,MAAM,WAAW,aAAa;IAC5B,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iGAAiG;IACjG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,mBAAmB,CAAC;IAC1C,4CAA4C;IAC5C,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAE5B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qDAAqD;IACrD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oHAAoH;IACpH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,yFAAyF;IACzF,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,+CAA+C;AAC/C,MAAM,MAAM,WAAW,GAAG,aAAa,CAAC"}

package/dist/ListCell/types.js

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

package/dist/ListCell/useSwitchAnimation.d.ts

@@ -0,0 +1,12 @@
+import { Animated } from 'react-native';
+export interface SwitchAnimationColors {
+    activeTrackColor: string;
+    inactiveTrackColor: string;
+}
+export declare function useSwitchAnimation(value: boolean, { activeTrackColor, inactiveTrackColor }: SwitchAnimationColors): {
+    translateX: Animated.AnimatedInterpolation<string | number>;
+    trackBg: Animated.AnimatedInterpolation<string | number>;
+    indicatorOpacity: Animated.AnimatedInterpolation<string | number>;
+    circleOpacity: Animated.AnimatedInterpolation<string | number>;
+};
+//# sourceMappingURL=useSwitchAnimation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSwitchAnimation.d.ts","sourceRoot":"","sources":["../../src/ListCell/useSwitchAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,OAAO,EACd,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,EAAE,qBAAqB;;;;;EAkChE"}