@sincpro/mobile-ui 1.1.0 → 2.0.1

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/assets/fonts/FFL.txt

@@ -0,0 +1,57 @@
+Fontshare EULA
+
+---—---------------------------------—------------------------------
+Free Font - End User License Agreement (FF EULA)
+---—---------------------------------—------------------------------
+Notice to User
+Indian Type Foundry designs, produces and distributes font software as digital fonts to end users worldwide. In addition to commercial fonts that are available for a fee, ITF also offers several fonts which can be used free of charge. The free fonts are distributed through a dedicated platform called www.fontshare.com (“Fontshare”) to end users worldwide. These free fonts are subject to this legally binding EULA between the Indian Type Foundry (“Indian Type Foundry” or “Licensor”) and you (“Licensee”). 
+You acknowledge that the Font Software and designs embodied therein are protected by the copyright, other intellectual property rights and industrial property rights and by international treaties. They are and remain at all times the intellectual property of the Indian Type Foundry.
+In addition to direct download, Fontshare also offers these free fonts via Fonthsare API using a code. In this case, the Font Software is delivered directly from the servers used by Indian Type Foundry to the Licensee's website, without the Licensee having to download the Font Software.
+By downloading, accessing the API, installing, storing, copying or using one of any Font Software, you agree to the following terms. 
+
+Definitions
+“Font Software” refers to the set of computer files or programs released under this license that instructs your computer to display and/or print each letters, characters, typographic designs, ornament and so forth. Font Software includes all bitmap and vector representations of fonts and typographic representations and embellishments created by or derived from the Font Software. 
+“Original Version” refers to the Font Software as distributed by the Indian Type Foundry as the copyright holder. 
+“Derivative Work” refers to the pictorial representation of the font created by the Font Software, including typographic characters such as letters, numerals, ornaments, symbols, or punctuation and special characters.
+
+01. Grant of License
+You are hereby granted a non-exclusive, non-assignable, non-transferrable, terminable license to access, download and use the Font Software for your personal or commercial use for an unlimited period of time for free of charge. 
+You may use the font Software in any media (including Print, Web, Mobile, Digital, Apps, ePub, Broadcasting and OEM) at any scale, at any location worldwide. 
+You may use the Font Software to create logos and other graphic elements, images on any surface, vector files or other scalable drawings and static images. 
+You may use the Font Software on any number of devices (computer, tablet, phone). The number of output devices (Printers) is not restricted. 
+You may make only such reasonable number of back-up copies suitable to your permitted use. 
+You may but are not required to identify Indian Type Foundry Fonts in your work credits. 
+
+02. Limitations of usage
+You may not modify, edit, adapt, translate, reverse engineer, decompile or disassemble, alter or otherwise copy the Font Software or the designs embodied therein in whole or in part, without the prior written consent of the Licensor. 
+The Fonts may not - beyond the permitted copies and the uses defined herein - be distributed, duplicated, loaned, resold or licensed in any way, whether by lending, donating or give otherwise to a person or entity. This includes the distribution of the Fonts by e-mail, on USB sticks, CD-ROMs, or other media, uploading them in a public server or making the fonts available on peer-to-peer networks. A passing on to external designers or service providers (design agencies, repro studios, printers, etc.) is also not permitted. 
+You are not allowed to transmit the Font Software over the Internet in font serving or for font replacement by means of technologies such as but not limited to EOT, Cufon, sIFR or similar technologies that may be developed in the future without the prior written consent of the Licensor. 
+
+03. Embedding
+You may embed the Font Software in PDF and other digital documents provided that is done in a secured, read-only mode. It must be ensured beyond doubt that the recipient cannot use the Font Software to edit or to create new documents. The design data (PDFs) created in this way and under these created design data (PDFs) may be distributed in any number. 
+The extraction of the Font Software in whole or in part is prohibited. 
+
+04. Third party use, Commercial print service provider
+You may include the Font Software in a non-editable electronic document solely for printing and display purposes and provide that electronic document to the commercial print service provider for the purpose of printing. If the print service needs to install the fonts, they too need to download the Font Software from the Licensor's website.
+
+05. Derivative Work
+You are allowed to make derivative works as far as you use them for your personal or commercial use. However, you cannot modify, make changes or reverse engineer the original font software provided to you. Any derivative works are the exclusive property of the Licensor and shall be subject to the terms and conditions of this EULA. Derivative works may not be sub-licensed, sold, leased, rented, loaned, or given away without the express written permission of the Licensor. 
+
+06. Warranty and Liability
+BECAUSE THIS SOFTWARE IS LICENSED FREE OF CHARGE, INDIAN TYPE FOUNDRY MAKES NO WARRANTIES, EXPRESS OR IMPLIED AS TO THE MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR OTHERWISE. THE FONT SOFTWARE WAS NOT MANUFACTURED FOR USE IN MANUFACTURING CONTROL DEVICES OR NAVIGATION DEVICES OR IN CIRCUMSTANCES THAT COULD RESULT IN ENVIRONMENTAL DAMAGE OR PERSONAL INJURY. WITHOUT LIMITING THE FOREGOING, INDIAN TYPE FOUNDRY SHALL IN NO EVENT BE LIABLE TO THE LICENSED USER OR ANY OTHER THIRD PARTY FOR ANY DIRECT, CONSEQUENTIAL OR INCIDENTAL DAMAGES, INCLUDING DAMAGES FROM LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION NOR FOR LOST PROFITS OR SAVINGS ARISING OUT OF THE USE OR INABILITY TO USE THE PRODUCT EVEN IF NOTIFIED IN ADVANCE, UNDER NO CIRCUMSTANCES SHALL INDIAN TYPE FOUNDRY’S LIABILITY EXCEED THE REPLACEMENT COST OF THE SOFTWARE. 
+IF LICENSEE CHOOSES TO ACCESS THE FONT SOFTWARE THROUGH A CODE (API), IT MAY HAVE A DIRECT IMPACT ON LICENSEE'S WEBSITE OR APPLICATIONS. INDIAN TYPE FOUNDRY IS NOT RESPONSIBLE OR LIABLE FOR ANY INTERRUPTION, MALFUNCTION, DOWNTIME OR OTHER FAILURE OF THE WEBSITE OR ITS API.
+
+07. Updates, Maintenance and Support Services
+Licensor will not provide you with any support services for the Software under this Agreement.
+
+08. Termination 
+Any breach of the terms of this agreement shall be a cause for termination, provided that such breach is notified in writing to the Licensee by the Licensor and the Licensee failed to rectify the breach within 30 days of the receipt of such notification. 
+In the event of termination and without limitation of any remedies under law or equity, you must delete the Font Software and all copies thereof. Proof of this must be provided upon request of the Licensor.  
+We reserve the right to claim damages for the violation of the conditions. 
+
+09. Final Provisions
+If individual provisions of this agreement are or become invalid, the validity of the remaining provisions shall remain unaffected. Invalid provisions shall be replaced by mutual agreement by such provisions that are suitable to achieve the desired economic purpose, taking into account the interests of both parties. The same shall apply mutatis mutandis to the filling of any gaps which may arise in this agreement.
+This contract is subject to laws of the Republic of India. Place of performance and exclusive place of jurisdiction for all disputes between the parties arising out of or in connection with this contract is, as far as legally permissible, Ahmedabad, India.
+- 
+Last Updated on 22 March 2021
+Copyright 2021 Indian Type Foundry. All rights reserved. 

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;