@sincpro/mobile-ui 0.2.1 → 0.3.0

package/README.md

@@ -1,12 +1,12 @@
 # @sincpro/mobile-ui
 
-> 🤖 **Agentes de IA:** leé [`AGENTS.md`](AGENTS.md) (orientación del ecosistema, patrones) y [`docs/GOTCHAS.md`](docs/GOTCHAS.md) (trampas conocidas).
+Sincpro Mobile design system — generic, presentational React Native components (Expo SDK 56).
 
-Sincpro Mobile design system: generic, presentational React Native components.
+- **Presentational only** — driven by props/callbacks. No domain logic, services, or state stores.
+- **Standalone** — does not depend on `@sincpro/mobile` (the core depends on this package).
+- **Mobile-first** — built with NativeWind 4 + tailwind-variants, design tokens via CSS variables.
 
-- **Presentational only** — receives data via props/callbacks. No domain logic, no services, no state stores.
-- **Standalone** — does not depend on `@sincpro/mobile` (the core). The core depends on this package.
-- Built with NativeWind + tailwind-variants.
+> 🤖 **AI agents:** read [`AGENTS.md`](AGENTS.md) (ecosystem & patterns) and [`docs/GOTCHAS.md`](docs/GOTCHAS.md) (known traps) first.
 
 ## Install
 
@@ -14,11 +14,18 @@ Sincpro Mobile design system: generic, presentational React Native components.
 npx expo install @sincpro/mobile-ui
 ```
 
-Peer dependencies (provided by the host app): `react`, `react-native`, `nativewind`, `react-native-reanimated`, `react-native-svg`, `react-native-safe-area-context`, `react-native-keyboard-controller`, `react-native-worklets`, `react-hook-form`, `react-native-currency-input`, `@expo/vector-icons`, `@expo-google-fonts/montserrat`, and the expo modules listed in `package.json`.
+Peer dependencies are provided by the host app: `react`, `react-native`, `nativewind`,
+`react-native-reanimated`, `react-native-svg`, `react-native-safe-area-context`,
+`react-native-keyboard-controller`, `react-native-worklets`, `react-hook-form`,
+`react-native-currency-input`, `@expo/vector-icons`, `@expo-google-fonts/montserrat`, plus the
+expo modules listed in `package.json`. A few components need **optional** peers (install only if
+you use them): `@react-native-community/slider` (`Form/Slider`), `@react-native-community/datetimepicker`
+(`Form/DatePicker`), `@expo/ui` (future native primitives).
 
 ## Tailwind preset (required)
 
-The components use design tokens exposed as Tailwind classes (`bg-primary`, `text-text-secondary`, …) backed by CSS variables. The consumer app wires them via the shipped preset and content globs:
+Components use design tokens exposed as Tailwind classes (`bg-primary`, `text-text-secondary`, …)
+backed by CSS variables. Wire them via the shipped preset and content globs:
 
 ```js
 // tailwind.config.js
@@ -29,31 +36,79 @@ module.exports = {
 };
 ```
 
-The token values are CSS variables; override them (a custom theme) in your global CSS `:root`, or inject at runtime with `vars()`. The framework's `createAppShell({ theme })` does this automatically.
+Token values are CSS variables; override them (a custom theme) in your global CSS `:root`, or inject
+at runtime with `vars()`. The framework's `createAppShell({ theme })` does this automatically.
 
-## Usage
+## Usage & import patterns
+
+Import by **category subpath** (recommended — better tree-shaking) or from the root:
+
+```tsx
+import { Form } from "@sincpro/mobile-ui/Form"; // inputs + actions
+import { Display } from "@sincpro/mobile-ui/Display"; // data display
+import { Feedback } from "@sincpro/mobile-ui/Feedback"; // app state (Toast, Skeleton…)
+import { Navigation } from "@sincpro/mobile-ui/Navigation"; // AppBar, BottomNav, SearchBar…
+import { Dialog } from "@sincpro/mobile-ui/Dialog"; // overlays (Sheet, ActionSheet…)
+import { theme, useTheme } from "@sincpro/mobile-ui/theme";
+import { motion } from "@sincpro/mobile-ui/tokens";
+```
+
+Full component catalog by category: [`docs/CATALOG.md`](docs/CATALOG.md).
+
+### Dark mode
+
+Ships `DEFAULT_THEME` (light) and `DEFAULT_DARK_THEME`. Set the active theme with `setActiveTheme`
+(or `createAppShell({ theme })` in the core) and inject the CSS vars with `vars(themeToVars(tokens))`
+on the subtree. `useTheme()` is a reactive hook to read the theme in components.
+
+### Branding (logo by context)
+
+Configure the logo once; headers/login take it as a fallback:
 
 ```tsx
-import { Form } from "@sincpro/mobile-ui/Form";
-import { Display } from "@sincpro/mobile-ui/Display";
-import { theme } from "@sincpro/mobile-ui/theme";
+import { setBranding } from "@sincpro/mobile-ui";
+setBranding({ logo: require("../assets/logo.png") }); // Display.Logo uses it when no `source` is passed
 ```
 
+### Toast (queued feedback)
+
+```tsx
+import { ToastProvider, useToast } from "@sincpro/mobile-ui/Feedback";
+// wrap the app in <ToastProvider>; then:
+const toast = useToast();
+toast.promise(save(), { loading: "Saving…", success: "Done", error: "Failed" });
+```
+
+### Bottom sheet
+
+```tsx
+import Sheet from "@sincpro/mobile-ui/Dialog/Dialog.Sheet";
+// controlled by visible/onClose; closes via the top handle (swipe-down) or your own button.
+// Built on RN Modal — no provider or native deps required.
+```
+
+## Conventions
+
+- **Language:** code, comments, and JSDoc are in **English**. Docs in `docs/` are English.
+- **Styling:** NativeWind-first (`className` + tokens). Native/JS escape hatch only where `className`
+  can't reach (gradients, native props, Modal surfaces). See [`docs/PHILOSOPHY.md`](docs/PHILOSOPHY.md).
+- **Backwards compatible:** changes are additive by default; superseded components are kept and marked
+  `@deprecated` (see `Legacy/*` in Storybook). See [`docs/STRUCTURE.md`](docs/STRUCTURE.md).
+
 ## Storybook (on-device, Expo)
 
-Visualiza los componentes en simulador/dispositivo con Storybook React Native (dev-only, no se publica):
+Preview components on simulator/device with Storybook React Native (dev-only, not published):
 
 ```bash
 make storybook          # expo start (Expo Go / dev build)
 make storybook-android  # expo run:android
 ```
 
-Las stories viven en `.rnstorybook/stories/**/*.stories.tsx` e importan desde `@sincpro/mobile-ui/*`. El harness (`App.tsx`, `metro.config.js`, `.rnstorybook/`) está excluido del paquete publicado (`files: ["dist", ...]`).
+Stories live in `.rnstorybook/stories/**/*.stories.tsx`, grouped as **Foundations / Components /
+Patterns / Legacy**. The harness (`App.tsx`, `.rnstorybook/`) is excluded from the published package
+(`files: ["dist", …]`).
 
-## Structure
+## Build & release
 
-- `Form`, `Display`, `Dialog`, `Feedback`, `Typography`, `Navigation`, `primitives` — component categories
-- `views` — compound views (ListViewV2, FormViewV2, Wizard)
-- `widgets` — generic composed widgets (HomeHeader, MenuGrid, GeoPermissionCard, TimeZoneSelector)
-- `theme` — design tokens + tailwind-variants helpers (`defineTheme`, `extendTheme`, `themeToVars`)
-- `utils` — generic utilities (date, monetary, quantity, serializer, icon, timezone)
+`make build` compiles `tsc + tsc-alias → dist/` (JS + types). The `exports` map publishes category
+subpaths (`./Display`, `./Form`, …) plus a catch-all `./*`. See [`CHANGELOG.md`](CHANGELOG.md).

package/dist/Dialog/BottomSheet/BottomSheet.Root.d.ts

@@ -93,7 +93,11 @@ export interface RootProps {
  * </BottomSheet.Root>
  * ```
  */
-declare function Root({ visible, onClose, size, dismissible, children }: RootProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Custom PanResponder implementation (limited gestures/scroll). The modern
+ * replacement is `Dialog.Sheet` (on RN Modal, no provider). Kept for backwards compatibility.
+ */
+declare function Root({ visible, onClose, size, dismissible, children }: RootProps): import("react").JSX.Element;
 export interface HandleProps {
     children?: ReactNode;
 }
@@ -116,7 +120,7 @@ export interface HandleProps {
  * </BottomSheet.Root>
  * ```
  */
-declare function Handle({ children }: HandleProps): import("react/jsx-runtime").JSX.Element;
+declare function Handle({ children }: HandleProps): import("react").JSX.Element;
 export interface HeaderProps {
     children: ReactNode;
 }
@@ -149,7 +153,7 @@ export interface HeaderProps {
  * </BottomSheet.Header>
  * ```
  */
-declare function Header({ children }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function Header({ children }: HeaderProps): import("react").JSX.Element;
 export interface TitleProps {
     children: ReactNode;
     subtitle?: string;
@@ -173,7 +177,7 @@ export interface TitleProps {
  * </BottomSheet.Title>
  * ```
  */
-declare function Title({ children, subtitle }: TitleProps): import("react/jsx-runtime").JSX.Element;
+declare function Title({ children, subtitle }: TitleProps): import("react").JSX.Element;
 export interface ContentProps {
     children: ReactNode;
     scrollable?: boolean;
@@ -205,7 +209,7 @@ export interface ContentProps {
  * </BottomSheet.Content>
  * ```
  */
-declare function Content({ children, scrollable }: ContentProps): import("react/jsx-runtime").JSX.Element;
+declare function Content({ children, scrollable }: ContentProps): import("react").JSX.Element;
 export interface ActionsProps {
     children: ReactNode;
     layout?: "auto" | "horizontal" | "vertical";
@@ -234,7 +238,7 @@ export interface ActionsProps {
  * </BottomSheet.Actions>
  * ```
  */
-declare function Actions({ children, layout }: ActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function Actions({ children, layout }: ActionsProps): import("react").JSX.Element;
 export interface FooterProps {
     children: ReactNode;
 }
@@ -263,7 +267,7 @@ export interface FooterProps {
  * </BottomSheet.Footer>
  * ```
  */
-declare function Footer({ children }: FooterProps): import("react/jsx-runtime").JSX.Element;
+declare function Footer({ children }: FooterProps): import("react").JSX.Element;
 /**
  * BottomSheet Compound Components
  *

package/dist/Dialog/BottomSheet/BottomSheet.Root.js

@@ -90,6 +90,10 @@ const SIZE_MAP = {
  * </BottomSheet.Root>
  * ```
  */
+/**
+ * @deprecated Custom PanResponder implementation (limited gestures/scroll). The modern
+ * replacement is `Dialog.Sheet` (on RN Modal, no provider). Kept for backwards compatibility.
+ */
 function Root({ visible, onClose, size = "auto", dismissible = true, children }) {
     const insets = useSafeAreaInsets();
     const screenHeight = Dimensions.get("window").height;

package/dist/Dialog/Confirmation.context.d.ts

@@ -16,6 +16,6 @@ type ConfirmationContextValue = {
 };
 export declare function ConfirmationProvider({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function useConfirmationContext(): ConfirmationContextValue;
 export {};

package/dist/Dialog/Dialog.ActionSheet.d.ts

@@ -0,0 +1,17 @@
+export interface ActionSheetAction {
+    label: string;
+    icon?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+    onPress: () => void;
+}
+export interface ActionSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    actions: ActionSheetAction[];
+    title?: string;
+    message?: string;
+    cancelLabel?: string;
+}
+declare function ActionSheet({ visible, onClose, actions, title, message, cancelLabel, }: ActionSheetProps): import("react").JSX.Element;
+export default ActionSheet;

package/dist/Dialog/Dialog.ActionSheet.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { Modal, Pressable as RNPressable, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+function ActionSheet({ visible, onClose, actions, title, message, cancelLabel = "Cancelar", }) {
+    const insets = useSafeAreaInsets();
+    return (_jsx(Modal, { animationType: "slide", onRequestClose: onClose, transparent: true, visible: visible, children: _jsx(RNPressable, { className: "flex-1 justify-end bg-black/50", onPress: onClose, children: _jsxs(RNPressable, { style: { paddingHorizontal: 12, paddingBottom: insets.bottom + 12 }, children: [title || message ? (_jsxs(View, { className: "rounded-xl mb-2 px-4 py-3 items-center", style: { backgroundColor: theme.bg.card }, children: [title ? (_jsx(Typography.Text, { className: "text-text-primary", semibold: true, children: title })) : null, message ? (_jsx(Typography.Text, { className: "text-text-secondary text-sm", variant: "bodySmall", children: message })) : null] })) : null, _jsx(View, { className: "rounded-xl overflow-hidden mb-2", style: { backgroundColor: theme.bg.card }, children: actions.map((action, index) => (_jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: action.disabled }, className: cn("flex-row items-center justify-center gap-2 px-4 py-4", index < actions.length - 1 && "border-b border-border-light"), disabled: action.disabled, onPress: () => {
+                                onClose();
+                                action.onPress();
+                            }, children: [action.icon ? (_jsx(Icon, { color: action.destructive ? theme.danger : theme.icon.primary, name: action.icon, size: 20 })) : null, _jsx(Typography.Text, { className: cn(action.destructive ? "text-danger" : "text-text-primary"), semibold: true, children: action.label })] }, action.label))) }), _jsx(Pressable, { accessibilityRole: "button", className: "rounded-xl px-4 py-4 items-center", onPress: onClose, style: { backgroundColor: theme.bg.card }, children: _jsx(Typography.Text, { className: "text-primary", semibold: true, children: cancelLabel }) })] }) }) }));
+}
+export default ActionSheet;

package/dist/Dialog/Dialog.EditValue.d.ts

@@ -21,5 +21,5 @@ export interface EditableValueModalProps {
     autoFocus?: boolean;
     testID?: string;
 }
-declare function EditableValueModal({ visible, title, value, onChangeValue, onConfirm, onCancel, placeholder, helperText, chips, keyboardType, rightAdornment, confirmLabel, cancelLabel, autoFocus, testID, }: EditableValueModalProps): import("react/jsx-runtime").JSX.Element;
+declare function EditableValueModal({ visible, title, value, onChangeValue, onConfirm, onCancel, placeholder, helperText, chips, keyboardType, rightAdornment, confirmLabel, cancelLabel, autoFocus, testID, }: EditableValueModalProps): React.JSX.Element;
 export default EditableValueModal;

package/dist/Dialog/Dialog.Sheet.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+/**
+ * @deprecated A provider is no longer required. `SheetProvider` is a no-op passthrough
+ * kept to avoid breaking prior wiring. Remove it when you can.
+ */
+export declare function SheetProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface SheetProps {
+    visible: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    title?: string;
+    /** Max sheet height (fraction of the screen). Default 0.9. */
+    maxHeightRatio?: number;
+    /** Allow closing by tapping the dim backdrop. Default `false` (handle/button only). */
+    dismissOnBackdrop?: boolean;
+    testID?: string;
+}
+/**
+ * Bottom sheet on RN's native `Modal`: bottom-anchored, dim backdrop, handle with
+ * **swipe-down to close** (handle only). By default it does NOT close on backdrop tap
+ * (`dismissOnBackdrop`). No provider or native deps. Import via subpath `Dialog/Sheet`.
+ */
+declare function Sheet({ visible, onClose, children, title, maxHeightRatio, dismissOnBackdrop, testID, }: SheetProps): import("react").JSX.Element;
+export default Sheet;

package/dist/Dialog/Dialog.Sheet.js

@@ -0,0 +1,55 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+import { useEffect, useRef } from "react";
+import { Animated, Modal, PanResponder, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+/**
+ * @deprecated A provider is no longer required. `SheetProvider` is a no-op passthrough
+ * kept to avoid breaking prior wiring. Remove it when you can.
+ */
+export function SheetProvider({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+/**
+ * Bottom sheet on RN's native `Modal`: bottom-anchored, dim backdrop, handle with
+ * **swipe-down to close** (handle only). By default it does NOT close on backdrop tap
+ * (`dismissOnBackdrop`). No provider or native deps. Import via subpath `Dialog/Sheet`.
+ */
+function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismissOnBackdrop = false, testID, }) {
+    const insets = useSafeAreaInsets();
+    const translateY = useRef(new Animated.Value(0)).current;
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    useEffect(() => {
+        if (visible)
+            translateY.setValue(0);
+    }, [visible, translateY]);
+    const pan = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_, g) => g.dy > 2,
+        onPanResponderMove: (_, g) => {
+            if (g.dy > 0)
+                translateY.setValue(g.dy);
+        },
+        onPanResponderRelease: (_, g) => {
+            if (g.dy > 100 || g.vy > 0.5) {
+                Animated.timing(translateY, {
+                    toValue: 800,
+                    duration: 200,
+                    useNativeDriver: true,
+                }).start(() => onCloseRef.current());
+            }
+            else {
+                Animated.spring(translateY, { toValue: 0, useNativeDriver: true }).start();
+            }
+        },
+    })).current;
+    return (_jsx(Modal, { animationType: "slide", onRequestClose: onClose, transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-end", testID: testID, children: [_jsx(View, { className: "absolute inset-0 bg-black/50", onResponderRelease: dismissOnBackdrop ? onClose : undefined, onStartShouldSetResponder: () => dismissOnBackdrop }), _jsxs(Animated.View, { className: "rounded-t-3xl", style: {
+                        backgroundColor: theme.bg.card,
+                        paddingBottom: insets.bottom + 12,
+                        maxHeight: `${Math.round(maxHeightRatio * 100)}%`,
+                        transform: [{ translateY }],
+                    }, children: [_jsx(View, { className: "items-center pt-3 pb-2", ...pan.panHandlers, children: _jsx(View, { className: "w-12 h-1.5 rounded-full bg-border-strong" }) }), title ? (_jsx(Typography.Text, { className: "text-text-primary px-4 pb-1", semibold: true, variant: "subtitle", children: title })) : null, _jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingTop: 4 }, children: children })] })] }) }));
+}
+export default Sheet;

package/dist/Dialog/index.d.ts

@@ -1,19 +1,21 @@
 import { BottomSheet } from "../Dialog/BottomSheet";
 import { ConfirmationProvider, useConfirmationContext } from "../Dialog/Confirmation.context";
+import ActionSheet from "../Dialog/Dialog.ActionSheet";
 import EditValue, { type EditableValueModalChip, type EditableValueModalProps } from "../Dialog/Dialog.EditValue";
 export declare const Dialog: {
     Confirmation: import("react").FC<import("../Dialog/Dialog.Confirmation").Props>;
     BottomSheet: {
-        Root: ({ visible, onClose, size, dismissible, children }: import("./BottomSheet/BottomSheet.Root").RootProps) => import("react/jsx-runtime").JSX.Element;
-        Handle: ({ children }: import("./BottomSheet/BottomSheet.Root").HandleProps) => import("react/jsx-runtime").JSX.Element;
-        Header: ({ children }: import("./BottomSheet/BottomSheet.Root").HeaderProps) => import("react/jsx-runtime").JSX.Element;
-        Title: ({ children, subtitle }: import("./BottomSheet/BottomSheet.Root").TitleProps) => import("react/jsx-runtime").JSX.Element;
-        Content: ({ children, scrollable }: import("./BottomSheet/BottomSheet.Root").ContentProps) => import("react/jsx-runtime").JSX.Element;
-        Actions: ({ children, layout }: import("./BottomSheet/BottomSheet.Root").ActionsProps) => import("react/jsx-runtime").JSX.Element;
-        Footer: ({ children }: import("./BottomSheet/BottomSheet.Root").FooterProps) => import("react/jsx-runtime").JSX.Element;
+        Root: ({ visible, onClose, size, dismissible, children }: import("./BottomSheet/BottomSheet.Root").RootProps) => import("react").JSX.Element;
+        Handle: ({ children }: import("./BottomSheet/BottomSheet.Root").HandleProps) => import("react").JSX.Element;
+        Header: ({ children }: import("./BottomSheet/BottomSheet.Root").HeaderProps) => import("react").JSX.Element;
+        Title: ({ children, subtitle }: import("./BottomSheet/BottomSheet.Root").TitleProps) => import("react").JSX.Element;
+        Content: ({ children, scrollable }: import("./BottomSheet/BottomSheet.Root").ContentProps) => import("react").JSX.Element;
+        Actions: ({ children, layout }: import("./BottomSheet/BottomSheet.Root").ActionsProps) => import("react").JSX.Element;
+        Footer: ({ children }: import("./BottomSheet/BottomSheet.Root").FooterProps) => import("react").JSX.Element;
         useBottomSheet: () => import("./BottomSheet/BottomSheet.Root").BottomSheetContextValue;
     };
     EditValue: typeof EditValue;
+    ActionSheet: typeof ActionSheet;
 };
 export { BottomSheet, ConfirmationProvider, type EditableValueModalChip, type EditableValueModalProps, useConfirmationContext, };
 export default Dialog;

package/dist/Dialog/index.js

@@ -1,11 +1,13 @@
 import { BottomSheet } from "../Dialog/BottomSheet";
 import { ConfirmationProvider, useConfirmationContext, } from "../Dialog/Confirmation.context";
+import ActionSheet from "../Dialog/Dialog.ActionSheet";
 import Confirmation from "../Dialog/Dialog.Confirmation";
 import EditValue from "../Dialog/Dialog.EditValue";
 export const Dialog = {
     Confirmation,
     BottomSheet,
     EditValue,
+    ActionSheet,
 };
 export { BottomSheet, ConfirmationProvider, useConfirmationContext, };
 export default Dialog;

package/dist/Display/Display.Accordion.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface AccordionItemProps {
+    title: string;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+    testID?: string;
+}
+declare function AccordionItem({ title, children, defaultOpen, className, testID, }: AccordionItemProps): import("react").JSX.Element;
+declare function AccordionRoot({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+declare const Accordion: typeof AccordionRoot & {
+    Item: typeof AccordionItem;
+};
+export default Accordion;
+export { Accordion };

package/dist/Display/Display.Accordion.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { useState } from "react";
+import { LayoutAnimation, View } from "react-native";
+function AccordionItem({ title, children, defaultOpen = false, className, testID, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    const toggle = () => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        setOpen((prev) => !prev);
+    };
+    return (_jsxs(View, { className: cn("border-b border-border-default", className), testID: testID, children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityState: { expanded: open }, className: "flex-row items-center justify-between py-3", onPress: toggle, children: [_jsx(Typography.Text, { className: "flex-1 text-text-primary", semibold: true, children: title }), _jsx(View, { style: { transform: [{ rotate: open ? "180deg" : "0deg" }] }, children: _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 }) })] }), open ? _jsx(View, { className: "pb-3", children: children }) : null] }));
+}
+function AccordionRoot({ children, className }) {
+    return _jsx(View, { className: cn("bg-bg-card rounded-lg", className), children: children });
+}
+const Accordion = Object.assign(AccordionRoot, { Item: AccordionItem });
+export default Accordion;
+export { Accordion };

package/dist/Display/Display.AvatarGroup.d.ts

@@ -0,0 +1,12 @@
+export interface AvatarGroupItem {
+    initials: string;
+}
+export interface AvatarGroupProps {
+    items: AvatarGroupItem[];
+    max?: number;
+    size?: number;
+    className?: string;
+    testID?: string;
+}
+declare function AvatarGroup({ items, max, size, className, testID }: AvatarGroupProps): import("react").JSX.Element;
+export default AvatarGroup;

package/dist/Display/Display.AvatarGroup.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Avatar from "../Display/Display.Avatar";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+function AvatarGroup({ items, max = 4, size = 36, className, testID }) {
+    const visible = items.slice(0, max);
+    const overflow = items.length - visible.length;
+    const overlap = Math.round(size / 3);
+    return (_jsxs(View, { className: className, style: { flexDirection: "row" }, testID: testID, children: [visible.map((item, index) => (_jsx(View, { style: {
+                    marginLeft: index === 0 ? 0 : -overlap,
+                    borderRadius: size,
+                    borderWidth: 2,
+                    borderColor: theme.bg.card,
+                }, children: _jsx(Avatar, { initials: item.initials, size: size }) }, `${item.initials}-${index}`))), overflow > 0 ? (_jsx(View, { className: "items-center justify-center rounded-full bg-bg-muted", style: {
+                    width: size,
+                    height: size,
+                    marginLeft: -overlap,
+                    borderWidth: 2,
+                    borderColor: theme.bg.card,
+                }, children: _jsxs(Typography.Text, { className: "text-text-secondary font-semibold text-xs", children: ["+", overflow] }) })) : null] }));
+}
+export default AvatarGroup;

package/dist/Display/Display.Badge.d.ts

@@ -104,5 +104,5 @@ export type BadgeProps = {
     variant: BadgeVariants | BadgeVariant | string;
     className?: string;
 };
-declare function Badge({ label, variant, className }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ label, variant, className }: BadgeProps): import("react").JSX.Element;
 export default Badge;

package/dist/Display/Display.Card.d.ts

@@ -0,0 +1,46 @@
+import { type VariantProps } from "../theme/tw";
+import type { ReactNode } from "react";
+declare const card: import("tailwind-variants").TVReturnType<{
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "bg-bg-card rounded-lg border border-border-light", {
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "bg-bg-card rounded-lg border border-border-light", unknown, unknown, undefined>>;
+export interface CardProps extends VariantProps<typeof card> {
+    elevation?: "none" | "sm" | "md" | "lg";
+    onPress?: () => void;
+    className?: string;
+    children?: ReactNode;
+    testID?: string;
+}
+declare function Card({ padding, elevation, onPress, className, children, testID, }: CardProps): import("react").JSX.Element;
+declare function CardTitle({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+declare function CardFooter({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+declare const CardWithSlots: typeof Card & {
+    Title: typeof CardTitle;
+    Footer: typeof CardFooter;
+};
+export default CardWithSlots;
+export { CardWithSlots as Card };

package/dist/Display/Display.Card.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { cn, tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+const card = tv({
+    base: "bg-bg-card rounded-lg border border-border-light",
+    variants: {
+        padding: {
+            none: "p-0",
+            sm: "p-3",
+            md: "p-4",
+            lg: "p-6",
+        },
+    },
+    defaultVariants: {
+        padding: "md",
+    },
+});
+function Card({ padding = "md", elevation = "sm", onPress, className, children, testID, }) {
+    const shadow = elevation === "none" ? undefined : theme.shadow[elevation];
+    if (onPress) {
+        return (_jsx(Pressable, { className: card({ padding, className }), onPress: onPress, style: shadow, testID: testID, children: children }));
+    }
+    return (_jsx(View, { className: card({ padding, className }), style: shadow, testID: testID, children: children }));
+}
+function CardTitle({ children, className }) {
+    return (_jsx(Typography.Text, { className: cn("text-text-primary mb-1", className), semibold: true, variant: "h4", children: children }));
+}
+function CardFooter({ children, className }) {
+    return (_jsx(View, { className: cn("flex-row items-center justify-end gap-2 mt-3", className), children: children }));
+}
+const CardWithSlots = Object.assign(Card, { Title: CardTitle, Footer: CardFooter });
+export default CardWithSlots;
+export { CardWithSlots as Card };

package/dist/Display/Display.Carousel.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export interface CarouselProps<T> {
+    data: T[];
+    renderItem: (item: T, index: number) => ReactNode;
+    keyExtractor: (item: T, index: number) => string;
+    itemWidth: number;
+    gap?: number;
+    showDots?: boolean;
+    className?: string;
+    testID?: string;
+}
+declare function Carousel<T>({ data, renderItem, keyExtractor, itemWidth, gap, showDots, className, testID, }: CarouselProps<T>): import("react").JSX.Element;
+export default Carousel;

package/dist/Display/Display.Carousel.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { useState } from "react";
+import { ScrollView, View, } from "react-native";
+function Carousel({ data, renderItem, keyExtractor, itemWidth, gap = 12, showDots = true, className, testID, }) {
+    const [active, setActive] = useState(0);
+    const snap = itemWidth + gap;
+    const onScroll = (e) => {
+        const index = Math.round(e.nativeEvent.contentOffset.x / snap);
+        if (index !== active)
+            setActive(index);
+    };
+    return (_jsxs(View, { className: className, testID: testID, children: [_jsx(ScrollView, { decelerationRate: "fast", horizontal: true, onMomentumScrollEnd: onScroll, showsHorizontalScrollIndicator: false, snapToInterval: snap, children: data.map((item, index) => (_jsx(View, { style: { width: itemWidth, marginRight: index < data.length - 1 ? gap : 0 }, children: renderItem(item, index) }, keyExtractor(item, index)))) }), showDots && data.length > 1 ? (_jsx(View, { className: "flex-row justify-center gap-1.5 mt-3", children: data.map((item, index) => (_jsx(View, { className: cn("h-1.5 rounded-full"), style: {
+                        width: index === active ? 16 : 6,
+                        backgroundColor: index === active ? theme.primary : theme.border.strong,
+                    } }, keyExtractor(item, index)))) })) : null] }));
+}
+export default Carousel;