@sincpro/mobile-ui 1.1.0 → 2.0.0

package/README.md

@@ -11,7 +11,7 @@ This package is maintained by Sincpro as part of the mobile framework ecosystem.
 ## Quick Start
 
 ```bash
-npx expo install @sincpro/mobile-ui
+npx expo install @sincpro/mobile-ui expo-image
 ```
 
 Wire the Tailwind preset, then import by category:
@@ -36,11 +36,7 @@ export default function InvoiceScreen() {
     <Display.Card>
       <Display.KeyValue label="Invoice #" value="INV-0042" copyable />
       <Display.Monetary value={1500.0} variant="dataLarge" />
-      <Actions.Button
-        accessibleSizing
-        onPress={() => toast.success("Invoice sent")}
-        title="Send Invoice"
-      />
+      <Actions.Button onPress={() => toast.success("Invoice sent")} title="Send Invoice" />
     </Display.Card>
   );
 }
@@ -91,10 +87,23 @@ recoverable error. It uses fictional data and local state, not persistence or a
 
 ### Accessible interaction
 
-- `Actions.Button` (including `.Icon`), `Actions.IconButton`, `BaseButton`,
-  `Feedback.EmptyState`, `Feedback.Error` and `Form.Input` accept `accessibleSizing` to
-  opt into a minimum 48-point target. Buttons also allow enlarged, multiline labels in
-  this mode. Existing sizing remains the default for compatibility.
+- Loading feedback respects the live system Reduce Motion setting; `animated={false}`
+  keeps `Feedback.Skeleton`, `Progress`, `Spinner` and `Loading` static explicitly.
+  Spinners expose a named busy state; progress exposes a percentage only when known.
+  Track/indicator styling and native accessibility props remain customizable.
+  See the [feedback contract](docs/CATALOG.md#feedback-feedback) and the
+  [comparison and priorities](docs/DESIGN-SYSTEM-GAPS.md).
+- v2 requires `expo-image`: `Display.Image`, logos, story media and illustrations share
+  the Expo renderer, disk caching, automatic source recycling and Reduce Motion policy.
+  `Display.ExpoImage` exposes the direct renderer; `Display.Image` adds error/retry composition.
+  See the [breaking migration guide](docs/MIGRATION-V2.md).
+- `ListViewV2.Content` exposes `listProps` for virtualization, `getItemLayout`, viewability
+  and `extraData`, plus `listRef` and content styling. `Root hasMore={false}` stops
+  pagination; `loadingMore` and refresh pause it. See the
+  [mobile performance and usability plan](docs/MOBILE-QUALITY.md).
+- Buttons, icon actions, inputs, selection controls and navigation use their 48-point
+  accessible sizing by default. `accessibleSizing` was removed: there is no legacy
+  compact-target mode. Labels wrap and follow system scaling; presentation stays configurable.
 - Supply `accessibilityLabel` for icon-only actions. Loading buttons expose busy/disabled
   state and retain their accessible name.
 - `Display.CopyableText` uses a familiar copy icon: tap a short value to copy it.
@@ -113,7 +122,7 @@ recoverable error. It uses fictional data and local state, not persistence or a
   the keyboard. It preserves typography/tokens and backs the longer-text modes above.
   On iOS, `Text selectable` alone only exposes full-paragraph copying, not range handles.
 - Headings and section titles expose native header semantics.
-- Checkbox/Select announce control state; their `accessibleSizing` mode enlarges targets.
+- Checkbox/Select announce control state and use accessible targets without an opt-in.
 - Sheet supports accessible escape and `showCloseButton`; `SwipeableRow visibleActions`
   supplies a non-gesture alternative. Keep explicit labels for essential actions.
 - `Dialog/NativeSheet` is an optional Expo 58 native presentation (`@expo/ui` peer);
@@ -122,7 +131,7 @@ recoverable error. It uses fictional data and local state, not persistence or a
   summaries, cancelable selection, filters applied only on confirmation and archive/undo.
 - Form/List view refresh always clears the busy state on failure and accepts
   `onRefreshError` for application recovery without discarding content.
-- AppBar, BottomNav and SegmentedControl support accessible sizing; banners expose status
+- AppBar, BottomNav and SegmentedControl use accessible sizing; banners expose status
   semantics, and confirmation defaults use explicit verbs.
 
 The [audit and validation report](docs/UX-AUDIT.md) records scope, evidence and device limits.
@@ -219,8 +228,8 @@ Auto wraps above font scale 1.3, otherwise it scrolls horizontally. Quick chips
 immediately; the recipe's advanced sheet applies only on confirmation.
 
 `Actions.FilterButton variant="mobile"` adds readable wrapping labels and 48-point targets.
-`FilterButtonGroup layout="scroll|wrap"` and `Navigation.SearchBar accessibleSizing` are
-additive; legacy filter layout and search sizing remain unchanged.
+`FilterButtonGroup layout="scroll|wrap"` supports both layouts. `Navigation.SearchBar`
+uses accessible sizing by default in v2, with no legacy sizing flag.
 When placing these controls in a host ScrollView, use `keyboardShouldPersistTaps="handled"`
 so a filter can act on the first tap while the keyboard is open.
 Use virtualized lists for production-sized collections.
@@ -324,6 +333,15 @@ template layout without a toolbar.
 Multiline Return remains a newline; dismissing the keyboard does not submit the form.
 Story: `Patterns/Forms/Keyboard navigation`.
 
+`Form.ErrorSummary` presents ordered `{ id, label, message }` errors with
+`onSelectError(id)`: the host focuses the corresponding native input ref with `.focus()`.
+Use the same messages inline, keep controlled field drafts mounted, and place the summary
+inside `KeyboardForm`. The first appearance is announced; updates while errors remain do
+not repeatedly interrupt typing. Set `announce={false}` if the host already announces.
+`renderHeader` and `renderErrorContent` replace presentation, not the named selection
+action. Root/item/text props and styles remain customizable.
+Story: `Patterns/Forms/Validation` includes real input refs and custom content.
+
 `ListViewV2.Content` accepts native `keyboardShouldPersistTaps` and `keyboardDismissMode`
 across populated, empty and error states. Handled row/retry actions receive the first tap
 while search has focus (`"handled"` by default); pass `"never"` for the old dismiss-first
@@ -391,6 +409,31 @@ host-supplied autocomplete while focused. Choosing a suggestion calls `onSelect`
 silently rewriting the query. A host may complete a title or create a field-specific
 condition; it owns matching, request cancellation and stale responses.
 
+`Navigation.Search` composes that existing field with horizontally scrolling chips,
+advanced filters in a `Dialog/Sheet`, recent searches and suggestions:
+
+```tsx
+<Navigation.Search.Root>
+  <Navigation.Search.Field value={query} onChangeText={setQuery} />
+  <Navigation.Search.Filters>
+    <Actions.FilterButton active title="Todos" onPress={() => {}} variant="mobile" />
+  </Navigation.Search.Filters>
+  <Navigation.Search.FilterSheet
+    activeCount={activeFilterCount}
+    onApply={applyFilters}
+    onClear={clearDraftFilters}
+  >
+    <FilterFields />
+  </Navigation.Search.FilterSheet>
+  <Navigation.Search.History items={recent} onRemove={removeRecent} onSelect={setQuery} />
+</Navigation.Search.Root>
+```
+
+It composes presentation only; the host owns query/filter state, history persistence and
+results. Keep `ListViewV2.Header.Search` when its built-in debounced `onSearch` behavior is
+preferred. Use `Navigation.AppBar` for back/context and `Navigation.Steps` for sequential
+flows rather than adding breadcrumb trails to compact mobile headers.
+
 Story: `Patterns/Collections/Query configuration` exercises actual local filtering,
 multiple sorting priorities, grouping levels and saving/loading configurations.
 
@@ -461,7 +504,7 @@ const { control } = useForm<{ email: string; amount: number }>();
 Queued toast system with promise support — covers the full loading → success / error lifecycle:
 
 ```tsx
-import { ToastProvider, useToast } from "@sincpro/mobile-ui/Feedback";
+import { Toast, ToastProvider, useToast } from "@sincpro/mobile-ui/Feedback";
 
 // 1. Wrap the app once (createAppShell does this automatically)
 <ToastProvider position="top">{children}</ToastProvider>;
@@ -474,8 +517,62 @@ toast.promise(sendInvoice(), {
   success: "Invoice sent",
   error: "Failed to send",
 });
+
+// Compose custom content while keeping the shared toast surface and lifecycle
+toast.show({
+  render: ({ dismiss, update }) => (
+    <>
+      <Toast.Icon variant="loading" />
+      <Toast.Content>
+        <Toast.Title>Syncing catalog</Toast.Title>
+        <Toast.Description>Downloading product images…</Toast.Description>
+      </Toast.Content>
+      <Toast.Action label="Details" onPress={() => update({ message: "Still syncing…" })} />
+      <Toast.Close onPress={dismiss} />
+    </>
+  ),
+  variant: "loading",
+});
 ```
 
+Toast cards can also be dismissed with an upward or downward swipe. Custom render content keeps
+the shared card surface, safe-area placement, lifecycle, and swipe behavior.
+
+Temporary toasts now show a close action by default too; the `dismissible: false` option explicitly
+removes it. Escape dismisses the default surface. Enter/exit animation follows live
+Reduce Motion; loading uses the common accessible spinner. `Toast.Root` accepts native
+view props/styles; `Toast.Action` and `Toast.Close` accept native pressable props/styles.
+Custom renderers must include their own visible close alternative when appropriate.
+
+### Composable mobile navigation and loading
+
+`Display.Carousel` supports short, non-virtualized collections with named 48-point
+previous/next controls, localized page labels and optional controlled `index` /
+`onIndexChange`. Rejected controlled swipes restore the accepted page. Measured trailing
+space lets the last narrow card reach its snap position.
+`renderControls({ index, count, canPrevious, canNext, previous, next, goTo })` replaces the
+controls without replacing index validation or scrolling. Custom controls own their
+accessible labels/disabled state and must provide a non-swipe alternative.
+Use `itemWidth` / `gap` for snap geometry; `itemStyle`, root native props/styles,
+`contentContainerStyle`, dot styles and `paginationTextProps` customize presentation.
+Data keys must be unique, non-empty strings. Use a virtualized list for large datasets.
+Stories: `Components/Data display/Carousel` and `Carousel Customized`.
+
+`Feedback.DomainSplashScreen` waits for actual `isLoading={false}`, respecting
+`minDuration`, rather than fabricating progress or finishing after a timer.
+Children remain mounted, preserving drafts, but are inaccessible/non-interactive while
+loading. `onComplete` runs once per completed cycle; timers/animations are cleaned up.
+`renderLoading({ domainName, isLoading, reducedMotion })`, `containerStyle` and
+`overlayStyle` let developers/AI own the visuals without replacing that lifecycle.
+Do not use splash completion as a data-loading signal.
+Story: `Patterns/Feedback/Loading lifecycle`.
+
+The shared `useReducedMotion` hook makes one native preference query/subscription for
+all active consumers and cancels stale queries when they leave. RN sheets, menus,
+confirmation/edit dialogs, dropdowns, story viewer, accordion, dock and collection/promo
+overlays follow the live setting; drag interactions remain available.
+This does not certify arbitrary custom renderers or the optional native Sheet engine.
+
 ### Bottom Sheet and Dialogs
 
 ```tsx
@@ -525,8 +622,33 @@ import { Display } from "@sincpro/mobile-ui/Display";
 <Display.Badge     variant="success">Paid</Display.Badge>
 <Display.Monetary  amount={1500.00} variant="dataLarge" />
 <Display.DataTable columns={cols} rows={rows} />
+
+<Display.AmountSummary.Root currencySymbol="Bs">
+  <Display.AmountSummary.Row label="Subtotal" value={120} />
+  <Display.AmountSummary.Row label="Delivery" value={8.5} />
+  <Display.AmountSummary.Total label="Total" value={128.5} />
+</Display.AmountSummary.Root>
 ```
 
+`AmountSummary` formats and arranges amounts; the app supplies labels, calculations and
+business states. `KeyValue copyable` remains the reusable copy affordance for identifiers.
+`Actions.Dock` defaults to a fixed bottom action bar. Swipe up on its handle or press
+“Más opciones” to reveal additional content above it; the primary action remains fixed.
+The dedicated 48-point handle owns the touch from its start, so an ancestor scroll view
+cannot steal it. Swipe up opens a native modal; swipe down on the panel handle closes it.
+The expanded panel blocks and dims the underlying screen, while the primary action remains
+outside its scrolling content. Back, accessible escape, the collapse button and backdrop
+close it (`dismissOnBackdrop={false}` disables only backdrop dismissal).
+Use `expanded` / `onExpandedChange` for host-controlled state, or `defaultExpanded` for
+uncontrolled initial state. Wrap the app in `SafeAreaProvider`. Keep the collapsed fixed
+bar outside scroll views, within the screen's safe area, and reserve space below list content.
+Inside `FormViewV2.Footer`, set `placement="footer"` to reuse its sticky layout.
+The panel fits its content up to `maxExpandedHeightRatio` (default `0.6`) and available screen
+space; overflow scrolls and the modal avoids the keyboard.
+
+This changes the Dock's former inline expansion behavior. See
+[the migration guide](docs/MOBILE_UX_MIGRATION.md) before adopting it in core or host apps.
+
 ---
 
 ## Component Catalog
@@ -538,6 +660,7 @@ import { Display } from "@sincpro/mobile-ui/Display";
 | `Actions.Button`            | Primary action — gradient, outline, flat, link variants; optional confirm dialog |
 | `Actions.IconButton`        | Icon-only tap target — ghost, primary, secondary, tertiary variants              |
 | `Actions.FAB`               | Floating Action Button — fixed position, optional label                          |
+| `Actions.Dock`              | Fixed primary action with swipe-expandable content and persistent CTA            |
 | `Actions.FilterButton`      | Chip-style active/inactive toggle                                                |
 | `Actions.FilterButtonGroup` | Horizontal scroll container for filter chips                                     |
 
@@ -548,6 +671,7 @@ import { Display } from "@sincpro/mobile-ui/Display";
 | `Display.Badge`                               | Status badge — success, warning, danger, info, neutral |
 | `Display.Card`                                | Surface container with optional shadow and padding     |
 | `Display.KeyValue`                            | Label + value row, optional clipboard copy             |
+| `Display.AmountSummary`                       | Composable monetary rows and total                     |
 | `Display.Stat`                                | KPI cell — label, value, optional trend indicator      |
 | `Display.StatCard`                            | Card-wrapped KPI                                       |
 | `Display.Monetary`                            | Formatted monetary amount using mono typography        |
@@ -566,7 +690,7 @@ import { Display } from "@sincpro/mobile-ui/Display";
 | `Display.CopyableText`                        | Text with one-tap clipboard copy                       |
 | `Display.Logo`                                | Brand logo (falls back to `setBranding` value)         |
 | `Display.Accordion`                           | Collapsible content section                            |
-| `Display.Carousel`                            | Horizontal swipe carousel                              |
+| `Display.Carousel`                            | Controlled short carousel with non-swipe alternatives  |
 | `Display.Story` / `StoryTray` / `StoryViewer` | Stories UI pattern                                     |
 | `Display.MediaCard`                           | Card with image or video embed                         |
 | `Display.Pattern`                             | Decorative background pattern                          |
@@ -583,6 +707,7 @@ import { Display } from "@sincpro/mobile-ui/Display";
 | `Form.FractionalQuantityInput`          | Decimal quantity input                                              |
 | `Form.Select`                           | Dropdown select (modal-based)                                       |
 | `Form.Dropdown`                         | Inline dropdown menu                                                |
+| `Form.ErrorSummary`                     | Ordered validation errors linked to native field focus              |
 | `Form.RadioButton`                      | Single-select radio option                                          |
 | `Form.Checkbox`                         | Multi-select checkbox                                               |
 | `Form.Switch`                           | Toggle switch                                                       |
@@ -602,6 +727,7 @@ import { Display } from "@sincpro/mobile-ui/Display";
 | ------------------------------- | -------------------------------- |
 | `Feedback.Spinner`              | Animated loading spinner         |
 | `Feedback.Loading`              | Full-screen loading overlay      |
+| `Feedback.DomainSplashScreen`   | Customizable real-load lifecycle |
 | `Feedback.Skeleton`             | Content placeholder shimmer      |
 | `Feedback.Progress`             | Linear progress bar              |
 | `Feedback.ProgressCircle`       | Circular progress indicator      |
@@ -614,19 +740,20 @@ import { Display } from "@sincpro/mobile-ui/Display";
 
 ### Navigation
 
-| Component                         | Description                           |
-| --------------------------------- | ------------------------------------- |
-| `Navigation.AppBar`               | Top navigation bar with action slots  |
-| `Navigation.BottomNav`            | Bottom tab bar                        |
-| `Navigation.Header`               | Screen header                         |
-| `Navigation.HeaderToolbar`        | Header with left, center, right slots |
-| `Navigation.CollapsingHeader`     | Header that collapses on scroll       |
-| `Navigation.FloatingBar`          | Floating action bar                   |
-| `Navigation.SearchBar`            | Navigation-level search input         |
-| `Navigation.SegmentedControl`     | Segmented control switcher            |
-| `Navigation.Tabs`                 | Tab navigation container              |
-| `Navigation.Steps`                | Step indicator / breadcrumb           |
-| `Navigation.Menu` / `MenuSection` | Dropdown menu with sections           |
+| Component                         | Description                                       |
+| --------------------------------- | ------------------------------------------------- |
+| `Navigation.AppBar`               | Top navigation bar with action slots              |
+| `Navigation.BottomNav`            | Bottom tab bar                                    |
+| `Navigation.Header`               | Screen header                                     |
+| `Navigation.HeaderToolbar`        | Header with left, center, right slots             |
+| `Navigation.CollapsingHeader`     | Header that collapses on scroll                   |
+| `Navigation.FloatingBar`          | Floating action bar                               |
+| `Navigation.SearchBar`            | Navigation-level search input                     |
+| `Navigation.Search`               | Compound field, filters, history and filter sheet |
+| `Navigation.SegmentedControl`     | Segmented control switcher                        |
+| `Navigation.Tabs`                 | Tab navigation container                          |
+| `Navigation.Steps`                | Step indicator / breadcrumb                       |
+| `Navigation.Menu` / `MenuSection` | Dropdown menu with sections                       |
 
 ### Dialog
 

package/dist/Actions/Actions.Button.d.ts

@@ -11,18 +11,18 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
         true: "opacity-70";
     };
-}, undefined, "rounded-md items-center justify-center flex-row min-h-[44px]", {
+}, undefined, "rounded-md items-center justify-center flex-row min-h-[48px]", {
     variant: {
         primary: "bg-accent";
         accent: "bg-transparent";
@@ -32,12 +32,12 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
@@ -53,12 +53,12 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
@@ -138,7 +138,6 @@ export interface ButtonProps extends VariantProps<typeof button>, AccessibilityP
     className?: string;
     icon?: React.ReactNode;
     testID?: string;
-    accessibleSizing?: boolean;
 }
 export interface ButtonIconProps extends VariantProps<typeof buttonIcon>, AccessibilityProps {
     icon: string;
@@ -148,7 +147,6 @@ export interface ButtonIconProps extends VariantProps<typeof buttonIcon>, Access
     disabled?: boolean;
     className?: string;
     testID?: string;
-    accessibleSizing?: boolean;
 }
 declare const ButtonWithIcon: React.FC<ButtonProps> & {
     Icon: React.FC<ButtonIconProps>;

package/dist/Actions/Actions.Button.js

@@ -8,7 +8,7 @@ import { useCallback } from "react";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 // ─── Style variants ───────────────────────────────────────────────────────────
 const button = tv({
-    base: "rounded-md items-center justify-center flex-row min-h-[44px]",
+    base: "rounded-md items-center justify-center flex-row min-h-[48px]",
     variants: {
         variant: {
             primary: "bg-accent",
@@ -19,12 +19,12 @@ const button = tv({
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
             flat: "bg-text-primary/10",
-            link: "bg-transparent min-h-0",
+            link: "bg-transparent",
             transparent: "bg-transparent border border-border-light",
         },
         size: {
-            small: "py-1.5 px-3 min-h-[36px]",
-            medium: "py-2.5 px-4 min-h-[44px]",
+            small: "py-1.5 px-3 min-h-[48px]",
+            medium: "py-2.5 px-4 min-h-[48px]",
             large: "py-3 px-5 min-h-[48px]",
         },
         disabled: {
@@ -151,7 +151,7 @@ const textVariantMap = {
     medium: "button",
     large: "buttonLarge",
 };
-const Button = ({ title, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, testID, accessibleSizing = false, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
+const Button = ({ title, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, testID, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
     const { show, hide } = useConfirmationContext();
     const textColorClass = textColor({ variant: variant, disabled });
     const loadingColorValue = getLoadingColor(variant);
@@ -179,18 +179,16 @@ const Button = ({ title, onPress, confirm, variant = "primary", size = "medium",
                 ...accessibilityState,
                 disabled: disabled || loading,
                 busy: loading,
-            }, style: accessibleSizing
-                ? { minHeight: 48, minWidth: 48, justifyContent: "center" }
-                : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
+            }, style: { minHeight: 48, minWidth: 48, justifyContent: "center" }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { allowFontScaling: true, className: textColorClass, style: { flexShrink: 1 }, variant: textVariantValue, children: title })) }));
     }
     const emphasize = variant === "primary" || variant === "cta";
     return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
             ...accessibilityState,
             disabled: disabled || loading,
             busy: loading,
-        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: accessibleSizing, className: textColorClass, ellipsizeMode: "tail", numberOfLines: accessibleSizing ? undefined : 1, semibold: emphasize, variant: textVariantValue, children: title })] })) }));
+        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: true, className: textColorClass, semibold: emphasize, style: { flexShrink: 1 }, variant: textVariantValue, children: title })] })) }));
 };
-const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, testID, accessibleSizing = false, accessibilityState, ...accessibilityProps }) => {
+const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, testID, accessibilityState, ...accessibilityProps }) => {
     const { show, hide } = useConfirmationContext();
     const iconColorValue = getIconColor(variant, disabled);
     const iconSizeValue = iconSizeMap[size] ?? 20;
@@ -217,7 +215,7 @@ const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "mediu
             ...accessibilityState,
             disabled: disabled || loading,
             busy: loading,
-        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
+        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
 };
 const ButtonWithIcon = Object.assign(Button, { Icon: ButtonIcon });
 export default ButtonWithIcon;

package/dist/Actions/Actions.Dock.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+export interface DockProps {
+    primaryAction: ReactNode;
+    children: ReactNode;
+    summary?: ReactNode;
+    title?: string;
+    moreLabel?: string;
+    collapseLabel?: string;
+    backdropLabel?: string;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    dismissOnBackdrop?: boolean;
+    maxExpandedHeightRatio?: number;
+    placement?: "fixed" | "footer";
+    className?: string;
+    testID?: string;
+}
+declare function Dock({ primaryAction, children, summary, title, moreLabel, collapseLabel, backdropLabel, expanded: controlledExpanded, defaultExpanded, onExpandedChange, dismissOnBackdrop, maxExpandedHeightRatio, placement, className, testID, }: DockProps): import("react").JSX.Element;
+export default Dock;

package/dist/Actions/Actions.Dock.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+/* eslint-disable react-hooks/refs */
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { themeToVars, useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import { vars } from "nativewind";
+import { useEffect, useRef, useState } from "react";
+import { Animated, KeyboardAvoidingView, Modal, PanResponder, Platform, ScrollView, useWindowDimensions, View, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+function Dock({ primaryAction, children, summary, title = "Más opciones", moreLabel = "Más opciones", collapseLabel = "Ocultar opciones", backdropLabel = "Cerrar panel", expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, dismissOnBackdrop = true, maxExpandedHeightRatio = 0.6, placement = "fixed", className, testID, }) {
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    const expanded = controlledExpanded ?? internalExpanded;
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const insets = useSafeAreaInsets();
+    const { height } = useWindowDimensions();
+    const [barHeight, setBarHeight] = useState(0);
+    const translateY = useRef(new Animated.Value(0)).current;
+    const requestExpanded = (next) => {
+        if (next === expanded)
+            return;
+        if (controlledExpanded === undefined)
+            setInternalExpanded(next);
+        onExpandedChange?.(next);
+    };
+    const gestureRef = useRef({ expanded, requestExpanded, reducedMotion });
+    gestureRef.current = { expanded, requestExpanded, reducedMotion };
+    const resolvedRatio = Number.isFinite(maxExpandedHeightRatio)
+        ? Math.min(0.9, Math.max(0.1, maxExpandedHeightRatio))
+        : 0.6;
+    const maxPanelHeight = Math.max(0, Math.min(height * resolvedRatio, height - insets.top - insets.bottom - barHeight));
+    const resetDrag = () => {
+        translateY.stopAnimation();
+        if (gestureRef.current.reducedMotion) {
+            translateY.setValue(0);
+            return;
+        }
+        Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+            damping: 24,
+            stiffness: 260,
+        }).start();
+    };
+    useEffect(() => {
+        translateY.stopAnimation();
+        translateY.setValue(0);
+        return () => translateY.stopAnimation();
+    }, [expanded, reducedMotion, translateY]);
+    const [pan] = useState(() => PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onPanResponderGrant: () => translateY.stopAnimation(),
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderMove: (_, gesture) => {
+            if (gestureRef.current.expanded)
+                translateY.setValue(Math.max(0, gesture.dy));
+        },
+        onPanResponderRelease: (_, gesture) => {
+            const isVertical = Math.abs(gesture.dy) > Math.abs(gesture.dx);
+            const shouldChange = gestureRef.current.expanded
+                ? gesture.dy > 40 || gesture.vy > 0.5
+                : gesture.dy < -40 || gesture.vy < -0.5;
+            if (isVertical && shouldChange) {
+                gestureRef.current.requestExpanded(!gestureRef.current.expanded);
+            }
+            resetDrag();
+        },
+        onPanResponderTerminate: resetDrag,
+    }));
+    const handle = (_jsx(View, { className: "min-h-12 items-center justify-center", ...pan.panHandlers, testID: testID ? `${testID}-handle` : undefined, children: _jsx(View, { className: "h-1 w-10 rounded-full bg-border-strong" }) }));
+    const bar = (_jsxs(View, { className: cn("gap-3 border-t border-border-light bg-bg-card px-4 pb-2", className), onLayout: (event) => setBarHeight(event.nativeEvent.layout.height), testID: testID ? `${testID}-bar` : undefined, children: [!expanded ? handle : null, summary, _jsxs(View, { className: "flex-row items-center gap-3", children: [_jsxs(Pressable, { accessibilityLabel: expanded ? collapseLabel : moreLabel, accessibilityRole: "button", accessibilityState: { expanded }, className: "min-h-12 flex-1 flex-row items-center justify-center gap-1 rounded-lg bg-bg-muted px-3", onPress: () => requestExpanded(!expanded), testID: testID ? `${testID}-more` : undefined, children: [_jsx(Typography.Text, { className: "text-text-primary", variant: "buttonSmall", children: expanded ? collapseLabel : moreLabel }), _jsx(Icon, { color: theme.icon.secondary, name: expanded ? "chevron-down" : "chevron-up", size: 16 })] }), _jsx(View, { className: "flex-1", children: primaryAction })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(View, { className: cn(placement === "fixed" && "absolute bottom-0 left-0 right-0 z-20"), style: expanded ? { height: barHeight } : undefined, testID: testID, children: !expanded ? bar : null }), _jsx(Modal, { animationType: "none", onRequestClose: () => requestExpanded(false), presentationStyle: "overFullScreen", testID: testID ? `${testID}-modal` : undefined, transparent: true, visible: expanded, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : "height", style: { flex: 1 }, testID: testID ? `${testID}-keyboard` : undefined, children: _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1, justifyContent: "flex-end" }, children: [_jsx(Pressable, { accessibilityLabel: backdropLabel, accessibilityRole: "button", className: "absolute inset-0 bg-black/50", disabled: !dismissOnBackdrop, onPress: dismissOnBackdrop ? () => requestExpanded(false) : undefined, testID: testID ? `${testID}-backdrop` : undefined }), _jsxs(View, { onAccessibilityEscape: () => requestExpanded(false), style: [
+                                    vars(themeToVars(theme)),
+                                    {
+                                        paddingBottom: insets.bottom,
+                                        backgroundColor: theme.bg.card,
+                                        maxHeight: height - insets.top,
+                                        flexShrink: 1,
+                                    },
+                                ], children: [_jsx(View, { style: { overflow: "hidden", flexShrink: 1 }, children: _jsxs(Animated.View, { style: {
+                                                maxHeight: maxPanelHeight,
+                                                flexShrink: 1,
+                                                transform: [{ translateY }],
+                                            }, testID: testID ? `${testID}-expanded-content` : undefined, children: [handle, _jsxs(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingBottom: 16 }, keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, style: { flexShrink: 1 }, testID: testID ? `${testID}-scroll` : undefined, children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: "pb-2 text-text-primary", semibold: true, variant: "subtitle", children: title })) : null, children] })] }) }), bar] })] }) }) })] }));
+}
+export default Dock;

package/dist/Actions/Actions.FAB.d.ts

@@ -6,7 +6,6 @@ export interface FABProps {
     className?: string;
     testID?: string;
     accessibilityLabel?: string;
-    accessibleSizing?: boolean;
 }
-declare function FAB({ icon, onPress, label, position, className, testID, accessibilityLabel, accessibleSizing, }: FABProps): import("react").JSX.Element;
+declare function FAB({ icon, onPress, label, position, className, testID, accessibilityLabel, }: FABProps): import("react").JSX.Element;
 export default FAB;

package/dist/Actions/Actions.FAB.js

@@ -5,17 +5,15 @@ import { theme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-function FAB({ icon, onPress, label, position = "bottom-right", className, testID, accessibilityLabel, accessibleSizing = false, }) {
+function FAB({ icon, onPress, label, position = "bottom-right", className, testID, accessibilityLabel, }) {
     const insets = useSafeAreaInsets();
-    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? label ?? "Acción", accessibilityRole: "button", className: cn("absolute flex-row items-center justify-center rounded-full bg-primary", label
-            ? accessibleSizing
-                ? "min-h-14 px-5 py-3 gap-2"
-                : "h-14 px-5 gap-2"
-            : "w-14 h-14", className), onPress: onPress, style: {
+    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? label ?? "Acción", accessibilityRole: "button", className: cn("absolute flex-row items-center justify-center rounded-full bg-primary", label ? "min-h-14 px-5 py-3 gap-2" : "w-14 h-14", className), onPress: onPress, style: {
+            minHeight: 56,
+            minWidth: 56,
             bottom: insets.bottom + 16,
             right: position === "bottom-right" ? 16 : undefined,
             left: position === "bottom-left" ? 16 : undefined,
             ...theme.shadow.lg,
-        }, testID: testID, children: [_jsx(Icon, { color: theme.icon.inverse, name: icon, size: 24 }), label ? (_jsx(Typography.Text, { className: "text-text-on-primary font-semibold", style: accessibleSizing ? { flexShrink: 1 } : undefined, children: label })) : null] }));
+        }, testID: testID, children: [_jsx(Icon, { color: theme.icon.inverse, name: icon, size: 24 }), label ? (_jsx(Typography.Text, { className: "text-text-on-primary font-semibold", style: { flexShrink: 1 }, children: label })) : null] }));
 }
 export default FAB;

package/dist/Actions/Actions.IconButton.d.ts

@@ -64,7 +64,6 @@ export interface IconButtonProps extends VariantProps<typeof iconButton>, Access
     iconColor?: string;
     className?: string;
     testID?: string;
-    accessibleSizing?: boolean;
 }
-declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, testID, accessibleSizing, accessibilityState, ...accessibilityProps }: IconButtonProps): import("react").JSX.Element;
+declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, testID, accessibilityState, ...accessibilityProps }: IconButtonProps): import("react").JSX.Element;
 export default IconButton;

package/dist/Actions/Actions.IconButton.js

@@ -31,12 +31,12 @@ const iconButton = tv({
         disabled: false,
     },
 });
-function IconButton({ icon, type = "feather", onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, testID, accessibleSizing = false, accessibilityState, ...accessibilityProps }) {
+function IconButton({ icon, type = "feather", onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, testID, accessibilityState, ...accessibilityProps }) {
     const resolvedColor = iconColor ?? theme.text.accent;
     return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: iconButton({ variant, size, rounded, disabled, className }), disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityRole: "button", accessibilityState: {
             ...accessibilityState,
             disabled: disabled || loading,
             busy: loading,
-        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Icon, { color: resolvedColor, name: icon, size: 24, type: type })) }));
+        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Icon, { color: resolvedColor, name: icon, size: 24, type: type })) }));
 }
 export default IconButton;