panelui-native 0.9.0 → 0.13.0

package/README.md

@@ -101,20 +101,22 @@ overlays, and the toast viewport.
 | `Dialog` | Modal dialog with backdrop, title, description and footer actions |
 | `EmptyState` | Placeholder for an empty list or screen, with a stacked-icon media slot |
 | `Frame` | Widget shell — header row with action, inset panel of rows, caption footer |
-| `InlineSelect` | Picker that expands its options in place |
 | `Input` | Text field with label, description and error message |
 | `InputGroup` | Input with leading and trailing decorators, auto-measured |
 | `Label` | Form field label with required, invalid and disabled states |
-| `Progress` | Determinate and indeterminate progress bar |
+| `Progress` | Determinate and indeterminate progress bar, optionally captioned |
 | `RadioGroup` | Single-select list of options |
 | `ScrollFade` | Fades the edges of a scroll container |
-| `Select` | Picker that opens in a bottom sheet |
+| `SectionRail` | Floating section navigator — bars that expand into a jump list |
+| `Select` | Picker shown in a bottom sheet, in place, or floating over the page |
 | `Shimmer` | Animated highlight sweeping across content |
 | `Skeleton` | Shimmer placeholder for loading content |
+| `Slider` | Pick a value by dragging a thumb along a track |
 | `Spinner` | Indeterminate loading indicator |
 | `Steps` | Stepper for multi-step flows, horizontal or vertical |
 | `Switch` | Animated on/off toggle |
 | `Tabs` | Segmented navigation with animated indicator |
+| `ToggleButton` | A button that stays down, on its own or in a group |
 | `Timeline` | Vertical sequence of events — dot, icon, numbered, card or compact, with per-item tones |
 | `Toast` | Transient notification queue with swipe-to-dismiss |
 | `Typography` | Semantic text presets — `h1`–`h6`, body sizes, inline code |

package/lib/module/components/bottom-sheet/index.js

@@ -26,6 +26,39 @@ function useBottomSheet(component) {
   }
   return context;
 }
+/**
+ * Roughly how tall the platform will make the sheet at a given detent, as a
+ * fraction of the screen. Approximate on purpose — it is used as a floor for
+ * the content, not as the sheet's real height, which the platform owns.
+ */
+const DETENT_FRACTION = {
+  half: 0.5,
+  full: 0.9
+};
+
+/**
+ * The height the content should at least fill for a given set of detents.
+ *
+ * Without this the hosted content sizes to itself and the platform centres
+ * that smaller box inside the taller sheet, which is why a short sheet shows
+ * its content floating in the middle. Filling the detent leaves nothing to
+ * centre, so the content sits where it was written: at the top.
+ */
+function detentFloor(snapPoints, screenHeight) {
+  if (!snapPoints?.length) return undefined;
+
+  // The sheet opens at its first detent, so that is the one to fill.
+  const first = snapPoints[0];
+  if (first === 'half' || first === 'full') {
+    return screenHeight * DETENT_FRACTION[first];
+  }
+  if (typeof first === 'object' && 'fraction' in first) {
+    return screenHeight * first.fraction;
+  }
+  if (typeof first === 'object' && 'height' in first) return first.height;
+  return undefined;
+}
+
 /**
  * Set by the root so Content knows the platform is drawing the sheet, and with
  * which detents. Null means the styled sheet renders.
@@ -147,14 +180,17 @@ function BottomSheetContent({
               ...props,
               className: cn(
               // The platform draws the container, but it hands us a bare
-              // box — padding and safe-area are still ours.
-              'gap-2 px-5 pb-2 pt-1', className),
+              // box — padding and safe-area are still ours. The top
+              // padding has to clear the platform's grabber, which sits
+              // inside the sheet rather than above the content.
+              'justify-start gap-2 px-5 pb-2 pt-5', className),
               style: {
                 // An explicit width, not `w-full`. Inside the native host
                 // there is no parent width for a percentage to resolve
                 // against, so `100%` measures against nothing and the
                 // content lays out wider than the sheet it sits in.
                 width: screenWidth,
+                minHeight: detentFloor(nativeSheet.snapPoints, screenHeight),
                 paddingBottom: Math.max(insets.bottom, 16)
               },
               children: children

package/lib/module/components/bottom-sheet/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["cloneElement","createContext","isValidElement","useCallback","useContext","useMemo","useState","Pressable","useWindowDimensions","View","useCSSVariable","Gesture","GestureDetector","Animated","FadeIn","FadeOut","SlideInDown","SlideOutDown","runOnJS","useAnimatedStyle","useSharedValue","withSpring","withTiming","useSafeAreaInsets","getNativeUI","XIcon","Portal","cn","jsx","_jsx","jsxs","_jsxs","SPRING","damping","stiffness","mass","DISMISS_DISTANCE","DISMISS_VELOCITY","BottomSheetContext","useBottomSheet","component","context","Error","NativeSheetContext","BottomSheetRoot","children","open","onOpenChange","defaultOpen","native","snapPoints","internalOpen","setInternalOpen","isControlled","undefined","resolvedOpen","setOpen","next","nativeUI","nativeSheet","Provider","value","BottomSheetTrigger","onPress","args","props","BottomSheetContent","className","dismissible","showClose","height","screenHeight","width","screenWidth","insets","translateY","closeTint","close","pan","Pan","onChange","event","changeY","onEnd","velocityY","duration","sheetStyle","transform","Host","BottomSheet","NativeBottomSheet","RNHostView","matchContents","style","position","isPresented","onDismiss","paddingBottom","Math","max","bottom","entering","exiting","accessibilityLabel","gesture","springify","accessibilityViewIsModal","accessibilityRole","hitSlop","size","color","Object","assign","Trigger","Content"],"sourceRoot":"../../../../src","sources":["components/bottom-sheet/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["cloneElement","createContext","isValidElement","useCallback","useContext","useMemo","useState","Pressable","useWindowDimensions","View","useCSSVariable","Gesture","GestureDetector","Animated","FadeIn","FadeOut","SlideInDown","SlideOutDown","runOnJS","useAnimatedStyle","useSharedValue","withSpring","withTiming","useSafeAreaInsets","getNativeUI","XIcon","Portal","cn","jsx","_jsx","jsxs","_jsxs","SPRING","damping","stiffness","mass","DISMISS_DISTANCE","DISMISS_VELOCITY","BottomSheetContext","useBottomSheet","component","context","Error","DETENT_FRACTION","half","full","detentFloor","snapPoints","screenHeight","length","undefined","first","fraction","height","NativeSheetContext","BottomSheetRoot","children","open","onOpenChange","defaultOpen","native","internalOpen","setInternalOpen","isControlled","resolvedOpen","setOpen","next","nativeUI","nativeSheet","Provider","value","BottomSheetTrigger","onPress","args","props","BottomSheetContent","className","dismissible","showClose","width","screenWidth","insets","translateY","closeTint","close","pan","Pan","onChange","event","changeY","onEnd","velocityY","duration","sheetStyle","transform","Host","BottomSheet","NativeBottomSheet","RNHostView","matchContents","style","position","isPresented","onDismiss","minHeight","paddingBottom","Math","max","bottom","entering","exiting","accessibilityLabel","gesture","springify","accessibilityViewIsModal","accessibilityRole","hitSlop","size","color","Object","assign","Trigger","Content"],"sourceRoot":"../../../../src","sources":["components/bottom-sheet/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/button/index.js

@@ -103,6 +103,22 @@ const CONTENT_COLOR_VAR = {
   ghost: '--color-foreground',
   social: '--color-foreground'
 };
+/**
+ * Height given to the native host, matching the styled scale above.
+ *
+ * The host is told its size rather than asked to work it out. `matchContents`
+ * measures the platform's own content a frame late and again when that content
+ * changes — so the button renders at nothing, collapses against whatever sits
+ * above it, and jolts into place on the first press. Width comes from ordinary
+ * layout instead, which is why a native button fills its container.
+ */
+const NATIVE_HEIGHT = {
+  sm: 36,
+  md: 44,
+  lg: 48,
+  icon: 44
+};
+
 /** PanelUI variants mapped onto the platform button styles. */
 const NATIVE_VARIANT = {
   primary: 'filled',
@@ -152,7 +168,9 @@ export const Button = /*#__PURE__*/forwardRef(({
     } = nativeUI;
     const isStringLabel = typeof children === 'string';
     return /*#__PURE__*/_jsx(Host, {
-      matchContents: true,
+      style: {
+        height: NATIVE_HEIGHT[size ?? 'md']
+      },
       children: /*#__PURE__*/_jsx(NativeButton, {
         label: isStringLabel ? children : undefined,
         variant: NATIVE_VARIANT[variant ?? 'primary'],

package/lib/module/components/button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","tv","useCSSVariable","AnimatedPressable","Text","IconColorProvider","getNativeUI","Spinner","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","buttonVariants","slots","root","label","spinner","variants","variant","primary","secondary","outline","ghost","destructive","social","size","sm","md","lg","icon","fullWidth","true","disabled","defaultVariants","SPINNER_SIZE","CONTENT_COLOR_VAR","NATIVE_VARIANT","Button","children","className","labelClassName","loading","startContent","endContent","native","props","ref","isDisabled","nativeUI","themedColor","contentColor","undefined","Host","NativeButton","RNHostView","isStringLabel","matchContents","onPress","color","accessibilityRole","accessibilityState","busy","displayName"],"sourceRoot":"../../../../src","sources":["components/button/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAwB,OAAO;AAElD,SAASC,EAAE,QAA2B,mBAAmB;AACzD,SAASC,cAAc,QAAQ,SAAS;AACxC,SACEC,iBAAiB,QAEZ,wCAAqC;AAC5C,SAASC,IAAI,QAAQ,0BAAuB;AAC5C,SAASC,iBAAiB,QAAQ,sBAAa;AAC/C,SAASC,WAAW,QAAQ,uBAAc;AAC1C,SAASC,OAAO,QAAQ,qBAAY;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAErC,MAAMC,cAAc,GAAGb,EAAE,CAAC;EACxBc,KAAK,EAAE;IACLC,IAAI,EAAE,iFAAiF;IACvFC,KAAK,EAAE,aAAa;IACpBC,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;QACPL,IAAI,EAAE,qCAAqC;QAC3CC,KAAK,EAAE,yBAAyB;QAChCC,OAAO,EAAE;MACX,CAAC;MACDI,SAAS,EAAE;QACTN,IAAI,EAAE,cAAc;QACpBC,KAAK,EAAE,2BAA2B;QAClCC,OAAO,EAAE;MACX,CAAC;MACDK,OAAO,EAAE;QACPP,IAAI,EAAE,mCAAmC;QACzCC,KAAK,EAAE,iBAAiB;QACxBC,OAAO,EAAE;MACX,CAAC;MACDM,KAAK,EAAE;QACLR,IAAI,EAAE,gBAAgB;QACtBC,KAAK,EAAE,iBAAiB;QACxBC,OAAO,EAAE;MACX,CAAC;MACDO,WAAW,EAAE;QACXT,IAAI,EAAE,6CAA6C;QACnDC,KAAK,EAAE,YAAY;QACnBC,OAAO,EAAE;MACX,CAAC;MACD;MACAQ,MAAM,EAAE;QACNV,IAAI,EAAE,gCAAgC;QACtCC,KAAK,EAAE,iBAAiB;QACxBC,OAAO,EAAE;MACX;IACF,CAAC;IACDS,IAAI,EAAE;MACJC,EAAE,EAAE;QAAEZ,IAAI,EAAE,oBAAoB;QAAEC,KAAK,EAAE;MAAU,CAAC;MACpDY,EAAE,EAAE;QAAEb,IAAI,EAAE,WAAW;QAAEC,KAAK,EAAE;MAAY,CAAC;MAC7Ca,EAAE,EAAE;QAAEd,IAAI,EAAE,WAAW;QAAEC,KAAK,EAAE;MAAU,CAAC;MAC3Cc,IAAI,EAAE;QAAEf,IAAI,EAAE;MAAiB;IACjC,CAAC;IACDgB,SAAS,EAAE;MACTC,IAAI,EAAE;QAAEjB,IAAI,EAAE;MAAS;IACzB,CAAC;IACDkB,QAAQ,EAAE;MACRD,IAAI,EAAE;QAAEjB,IAAI,EAAE;MAAiB;IACjC;EACF,CAAC;EACDmB,eAAe,EAAE;IACff,OAAO,EAAE,SAAS;IAClBO,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAIF,MAAMS,YAAY,GAAG;EAAER,EAAE,EAAE,IAAI;EAAEC,EAAE,EAAE,IAAI;EAAEC,EAAE,EAAE,IAAI;EAAEC,IAAI,EAAE;AAAK,CAAU;;AAE1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMM,iBAGL,GAAG;EACFhB,OAAO,EAAE,4BAA4B;EACrCC,SAAS,EAAE,8BAA8B;EACzCC,OAAO,EAAE,oBAAoB;EAC7BC,KAAK,EAAE,oBAAoB;EAC3BE,MAAM,EAAE;AACV,CAAC;AA4BD;AACA,MAAMY,cAGL,GAAG;EACFjB,OAAO,EAAE,QAAQ;EACjBI,WAAW,EAAE,QAAQ;EACrBH,SAAS,EAAE,QAAQ;EACnBC,OAAO,EAAE,UAAU;EACnBC,KAAK,EAAE,MAAM;EACbE,MAAM,EAAE;AACV,CAAC;AAED,OAAO,MAAMa,MAAM,gBAAGvC,UAAU,CAC9B,CACE;EACEwC,QAAQ;EACRC,SAAS;EACTC,cAAc;EACdtB,OAAO;EACPO,IAAI;EACJK,SAAS;EACTE,QAAQ;EACRS,OAAO,GAAG,KAAK;EACfC,YAAY;EACZC,UAAU;EACVC,MAAM;EACN,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,UAAU,GAAGf,QAAQ,IAAIS,OAAO;EACtC,MAAMO,QAAQ,GAAGJ,MAAM,GAAGxC,WAAW,CAAC,CAAC,GAAG,IAAI;EAC9C,MAAM;IAAEU,IAAI;IAAEC,KAAK;IAAEC;EAAQ,CAAC,GAAGJ,cAAc,CAAC;IAC9CM,OAAO;IACPO,IAAI;IACJK,SAAS;IACTE,QAAQ,EAAEe;EACZ,CAAC,CAAC;;EAEF;EACA;EACA;EACA,MAAME,WAAW,GAAGjD,cAAc,CAChCmC,iBAAiB,CACfjB,OAAO,KAAK,aAAa,GAAG,SAAS,GAAIA,OAAO,IAAI,SAAU,CAElE,CAAC;EACD,MAAMgC,YAAY,GAChBhC,OAAO,KAAK,aAAa,GACrB,SAAS,GACT,OAAO+B,WAAW,KAAK,QAAQ,GAC7BA,WAAW,GACXE,SAAS;EAEjB,IAAIH,QAAQ,EAAE;IACZ,MAAM;MAAEI,IAAI;MAAEf,MAAM,EAAEgB,YAAY;MAAEC;IAAW,CAAC,GAAGN,QAAQ;IAC3D,MAAMO,aAAa,GAAG,OAAOjB,QAAQ,KAAK,QAAQ;IAElD,oBACE7B,IAAA,CAAC2C,IAAI;MAACI,aAAa;MAAAlB,QAAA,eACjB7B,IAAA,CAAC4C,YAAY;QACXtC,KAAK,EAAEwC,aAAa,GAAGjB,QAAQ,GAAGa,SAAU;QAC5CjC,OAAO,EAAEkB,cAAc,CAAClB,OAAO,IAAI,SAAS,CAAE;QAC9Cc,QAAQ,EAAEe,UAAW;QACrBU,OAAO,EAAEZ,KAAK,CAACY,OAAQ;QAAAnB,QAAA,EAKtBiB,aAAa,GAAGJ,SAAS,gBACxB1C,IAAA,CAAC6C,UAAU;UAACE,aAAa;UAAAlB,QAAA,eACvB7B,IAAA,CAAAF,SAAA;YAAA+B,QAAA,EAAGA;UAAQ,CAAG;QAAC,CACL;MACb,CACW;IAAC,CACX,CAAC;EAEX;EAEA,oBACE7B,IAAA,CAACN,iBAAiB;IAACuD,KAAK,EAAER,YAAa;IAAAZ,QAAA,eACrC3B,KAAA,CAACV,iBAAiB;MAChB6C,GAAG,EAAEA,GAAI;MACTa,iBAAiB,EAAC,QAAQ;MAC1BC,kBAAkB,EAAE;QAAE5B,QAAQ,EAAEe,UAAU;QAAEc,IAAI,EAAEpB;MAAQ,CAAE;MAC5DT,QAAQ,EAAEe,UAAW;MACrBR,SAAS,EAAEzB,IAAI,CAAC;QAAEyB;MAAU,CAAC,CAAE;MAAA,GAC3BM,KAAK;MAAAP,QAAA,GAERG,OAAO,gBACNhC,IAAA,CAACJ,OAAO;QAACoB,IAAI,EAAES,YAAY,CAACT,IAAI,IAAI,IAAI,CAAE;QAACc,SAAS,EAAEvB,OAAO,CAAC;MAAE,CAAE,CAAC,GAEnE0B,YACD,EACA,OAAOJ,QAAQ,KAAK,QAAQ,gBAC3B7B,IAAA,CAACP,IAAI;QAACqC,SAAS,EAAExB,KAAK,CAAC;UAAEwB,SAAS,EAAEC;QAAe,CAAC,CAAE;QAAAF,QAAA,EAAEA;MAAQ,CAAO,CAAC,GAExEA,QACD,EACAK,UAAU;IAAA,CACM;EAAC,CACH,CAAC;AAExB,CACF,CAAC;AAEDN,MAAM,CAACyB,WAAW,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"names":["forwardRef","tv","useCSSVariable","AnimatedPressable","Text","IconColorProvider","getNativeUI","Spinner","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","buttonVariants","slots","root","label","spinner","variants","variant","primary","secondary","outline","ghost","destructive","social","size","sm","md","lg","icon","fullWidth","true","disabled","defaultVariants","SPINNER_SIZE","CONTENT_COLOR_VAR","NATIVE_HEIGHT","NATIVE_VARIANT","Button","children","className","labelClassName","loading","startContent","endContent","native","props","ref","isDisabled","nativeUI","themedColor","contentColor","undefined","Host","NativeButton","RNHostView","isStringLabel","style","height","onPress","matchContents","color","accessibilityRole","accessibilityState","busy","displayName"],"sourceRoot":"../../../../src","sources":["components/button/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/frame/index.js

@@ -17,23 +17,57 @@
  *   </Frame.Header>
  *   <Frame.Panel>
  *     <Frame.Row>…</Frame.Row>
- *     <Frame.Row divided>…</Frame.Row>
+ *     <Frame.Row>…</Frame.Row>
  *   </Frame.Panel>
  *   <Frame.Footer>Updated 2 minutes ago</Frame.Footer>
  * </Frame>
  * ```
+ *
+ * The panel draws the hairlines between its own rows. React Native has no
+ * `:first-child`, so the alternative is every caller writing
+ * `divided={index > 0}` on every row and getting it wrong once.
  */
-import { forwardRef } from 'react';
-import { View } from 'react-native';
+import { Children, cloneElement, forwardRef, isValidElement } from 'react';
+import { Pressable, View } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { ChevronRightIcon } from "../../icons/index.js";
 import { Text } from "../../primitives/text.js";
 import { cn } from "../../utils/cn.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const frameVariants = tv({
+  slots: {
+    root: '',
+    panel: 'overflow-hidden rounded-xl border border-border bg-card'
+  },
+  variants: {
+    variant: {
+      default: {
+        root: 'rounded-2xl border border-border bg-surface p-1.5'
+      },
+      // No shell: the panel is the whole widget. For a Frame nested inside a
+      // card that already draws a border, where the shell's own edge sitting
+      // just inside it reads as a double line.
+      plain: {
+        root: '',
+        panel: 'rounded-2xl'
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
+});
 const FrameRoot = /*#__PURE__*/forwardRef(({
   className,
+  variant,
   ...props
 }, ref) => /*#__PURE__*/_jsx(View, {
   ref: ref,
-  className: cn('rounded-2xl border border-border bg-surface p-1.5', className),
+  className: frameVariants({
+    variant
+  }).root({
+    className
+  }),
   ...props
 }));
 FrameRoot.displayName = 'Frame';
@@ -94,35 +128,113 @@ const FrameDescription = /*#__PURE__*/forwardRef(({
 }));
 FrameDescription.displayName = 'Frame.Description';
 
+/**
+ * Marks the parts that take part in the panel's own divider bookkeeping —
+ * a Row draws a line above itself, a Section draws one above its heading.
+ * Anything else the panel is given is left alone.
+ */
+
+/**
+ * Draws the hairline above every child but the first. An explicit `divided`
+ * on a child wins, so a row can still opt out or force one.
+ */
+function divideChildren(children) {
+  let seen = 0;
+  return Children.map(children, child => {
+    if (! /*#__PURE__*/isValidElement(child)) return child;
+    if (!DIVIDABLE.has(child.type)) return child;
+    const index = seen++;
+    if (child.props.divided !== undefined) return child;
+    return /*#__PURE__*/cloneElement(child, {
+      divided: index > 0
+    });
+  });
+}
 /**
  * The inset card holding the frame's content — the raised surface sitting in
  * from the shell's edges, with its own smaller radius.
  */
 const FramePanel = /*#__PURE__*/forwardRef(({
   className,
+  dividers = true,
+  children,
   ...props
 }, ref) => /*#__PURE__*/_jsx(View, {
   ref: ref,
-  className: cn('overflow-hidden rounded-xl border border-border bg-card', className),
-  ...props
+  className: frameVariants().panel({
+    className
+  }),
+  ...props,
+  children: dividers ? divideChildren(children) : children
 }));
 FramePanel.displayName = 'Frame.Panel';
-
 /**
- * A row inside a Frame.Panel. Pass `divided` on every row after the first to
- * draw a hairline separator above it (React Native has no :first-child).
+ * A row inside a Frame.Panel. Give it an `onPress` and it becomes a real
+ * pressable — press feedback, a button role — rather than a View with a
+ * handler bolted on.
  */
-
 const FrameRow = /*#__PURE__*/forwardRef(({
   className,
   divided,
+  chevron,
+  children,
+  onPress,
   ...props
-}, ref) => /*#__PURE__*/_jsx(View, {
-  ref: ref,
-  className: cn('flex-row items-center gap-3 px-4 py-3.5', divided && 'border-t border-border', className),
+}, ref) => {
+  const classes = cn('flex-row items-center gap-3 px-4 py-3.5', divided && 'border-t border-border', onPress && 'active:bg-muted', className);
+  const body = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [children, chevron ? /*#__PURE__*/_jsx(ChevronRightIcon, {
+      size: 16
+    }) : null]
+  });
+  if (!onPress) {
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      className: classes,
+      ...props,
+      children: body
+    });
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    accessibilityRole: "button",
+    onPress: onPress,
+    className: classes,
+    ...props,
+    children: body
+  });
+});
+FrameRow.displayName = 'Frame.Row';
+/**
+ * A labelled cluster of rows inside a Panel, for a widget holding more than
+ * one group. It divides its own rows the way the panel does, so the two nest
+ * without either having to know about the other.
+ */
+const FrameSection = /*#__PURE__*/forwardRef(({
+  className,
+  title,
+  divided,
+  children,
   ...props
+}, ref) => /*#__PURE__*/_jsxs(View, {
+  ref: ref,
+  className: cn(divided && 'border-t border-border', className),
+  ...props,
+  children: [title ? /*#__PURE__*/_jsx(View, {
+    className: "bg-muted/40 px-4 pb-1.5 pt-2.5",
+    children: typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      weight: "medium",
+      muted: true,
+      className: "uppercase tracking-wider",
+      children: title
+    }) : title
+  }) : null, divideChildren(children)]
 }));
-FrameRow.displayName = 'Frame.Row';
+FrameSection.displayName = 'Frame.Section';
+
+/** Parts the panel divides. Declared after them, since it holds references. */
+const DIVIDABLE = new Set([FrameRow, FrameSection]);
 /** Muted caption under the panel. Strings are wrapped for you. */
 const FrameFooter = /*#__PURE__*/forwardRef(({
   className,
@@ -145,6 +257,7 @@ export const Frame = Object.assign(FrameRoot, {
   Action: FrameAction,
   Description: FrameDescription,
   Panel: FramePanel,
+  Section: FrameSection,
   Row: FrameRow,
   Footer: FrameFooter
 });

package/lib/module/components/frame/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","View","Text","cn","jsx","_jsx","FrameRoot","className","props","ref","displayName","FrameHeader","FrameTitle","size","weight","FrameAction","children","muted","FrameDescription","FramePanel","FrameRow","divided","FrameFooter","Frame","Object","assign","Header","Title","Action","Description","Panel","Row","Footer"],"sourceRoot":"../../../../src","sources":["components/frame/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Children","cloneElement","forwardRef","isValidElement","Pressable","View","tv","ChevronRightIcon","Text","cn","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","frameVariants","slots","root","panel","variants","variant","default","plain","defaultVariants","FrameRoot","className","props","ref","displayName","FrameHeader","FrameTitle","size","weight","FrameAction","children","muted","FrameDescription","divideChildren","seen","map","child","DIVIDABLE","has","type","index","divided","undefined","FramePanel","dividers","FrameRow","chevron","onPress","classes","body","accessibilityRole","FrameSection","title","Set","FrameFooter","Frame","Object","assign","Header","Title","Action","Description","Panel","Section","Row","Footer"],"sourceRoot":"../../../../src","sources":["components/frame/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/input/index.js

@@ -1,29 +1,72 @@
 "use strict";
 
-import { forwardRef, useCallback, useState } from 'react';
+/**
+ * Input — a text field with a label, a description and an error line.
+ *
+ * The field's focus state is animated rather than switched. A border that
+ * snaps between two colours reads as a redraw; one that crosses over in
+ * 150ms reads as the field responding to you. The interpolation runs on the
+ * UI thread, so it costs nothing and keeps up with a fast tab through a form.
+ *
+ * Two backgrounds, because a field's job changes with what surrounds it:
+ * `outline` sits on the page and draws its own edge; `filled` sits inside a
+ * card or a sheet, where a second border next to the container's own reads as
+ * a seam.
+ *
+ * ```tsx
+ * <Input label="Email" placeholder="you@example.com" />
+ * <Input variant="filled" size="lg" label="Name" isRequired />
+ * ```
+ *
+ * For a field with an icon or a button attached, reach for `InputGroup` — it
+ * measures its decorators and pads this field around them.
+ */
+import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { TextInput, View } from 'react-native';
+import Animated, { interpolateColor, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { KeyboardAvoider } from "../../primitives/keyboard-avoider.js";
 import { Text } from "../../primitives/text.js";
+import { Label } from "../label/index.js";
+
+/** Long enough to read as a transition, short enough not to lag a fast tab. */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const FOCUS_DURATION = 150;
 const inputVariants = tv({
   slots: {
     container: 'w-full gap-1.5',
-    field: 'h-11 w-full rounded-lg border border-input bg-background px-3 text-base text-foreground',
-    label: 'text-sm font-medium text-foreground',
+    field: 'w-full rounded-lg border text-foreground',
     description: 'text-sm text-muted-foreground',
     error: 'text-sm text-destructive'
   },
   variants: {
-    focused: {
-      true: {
-        field: 'border-ring'
+    variant: {
+      // The border colour is animated, so it is deliberately not set here —
+      // only the background and the resting border width belong to the class.
+      outline: {
+        field: 'bg-background'
+      },
+      filled: {
+        field: 'bg-muted'
+      }
+    },
+    size: {
+      sm: {
+        field: 'h-10 px-3 text-sm'
+      },
+      md: {
+        field: 'h-12 px-3.5 text-base'
+      },
+      lg: {
+        field: 'h-14 px-4 text-base'
       }
     },
-    invalid: {
+    multiline: {
+      // A multiline field grows, so a fixed height would crop it. Text starts
+      // at the top rather than floating in the middle of an empty box.
       true: {
-        field: 'border-destructive/40'
+        field: 'h-auto min-h-24 py-3'
       }
     },
     disabled: {
@@ -31,28 +74,63 @@ const inputVariants = tv({
         field: 'opacity-[0.64]'
       }
     }
+  },
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md'
   }
 });
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 export const Input = /*#__PURE__*/forwardRef(({
   className,
   containerClassName,
   label,
   description,
   errorMessage,
+  isRequired,
   disabled,
+  variant,
+  size,
   avoidKeyboard = false,
   keyboardOffset = 16,
   onFocus,
   onBlur,
+  style,
   ...props
 }, ref) => {
   const [focused, setFocused] = useState(false);
+  const invalid = !!errorMessage;
   const placeholderColor = useCSSVariable('--color-muted-foreground');
+  const restColor = useCSSVariable('--color-input');
+  const focusColor = useCSSVariable('--color-ring');
+  const errorColor = useCSSVariable('--color-destructive');
   const slots = inputVariants({
-    focused,
-    invalid: !!errorMessage,
+    variant,
+    size,
+    multiline: !!props.multiline,
     disabled: !!disabled
   });
+
+  /*
+   * Border colour is driven by one 0..1 value rather than by a class per
+   * state. Uniwind can only swap a class wholesale, which is the snap this
+   * is here to avoid, and a shared value crosses between the two colours on
+   * the UI thread without a re-render.
+   */
+  const focus = useSharedValue(0);
+  useEffect(() => {
+    focus.value = withTiming(focused ? 1 : 0, {
+      duration: FOCUS_DURATION
+    });
+  }, [focused, focus]);
+  const resting = typeof restColor === 'string' ? restColor : '#e5e5e5';
+  const active = invalid ? typeof errorColor === 'string' ? errorColor : '#ef4444' : typeof focusColor === 'string' ? focusColor : '#a3a3a3';
+  // An invalid field is tinted even at rest — the error is a fact about the
+  // value, not about whether the field happens to be focused.
+  const idle = invalid ? active : resting;
+  const borderStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(focus.value, [0, 1], [idle, active])
+  }));
   const handleFocus = useCallback(event => {
     setFocused(true);
     onFocus?.(event);
@@ -62,10 +140,12 @@ export const Input = /*#__PURE__*/forwardRef(({
     onBlur?.(event);
   }, [onBlur]);
   const body = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [label ? /*#__PURE__*/_jsx(Text, {
-      className: slots.label(),
+    children: [label ? /*#__PURE__*/_jsx(Label, {
+      isRequired: isRequired,
+      isInvalid: invalid,
+      isDisabled: !!disabled,
       children: label
-    }) : null, /*#__PURE__*/_jsx(TextInput, {
+    }) : null, /*#__PURE__*/_jsx(AnimatedTextInput, {
       ref: ref,
       editable: !disabled,
       onFocus: handleFocus,
@@ -74,9 +154,15 @@ export const Input = /*#__PURE__*/forwardRef(({
       accessibilityState: {
         disabled: !!disabled
       },
+      "aria-required": isRequired,
+      "aria-invalid": invalid,
       className: slots.field({
         className
-      }),
+      })
+      // Caller styles come last so InputGroup can pad the field around its
+      // decorators, but never last enough to drop the animated border.
+      ,
+      style: [borderStyle, style],
       placeholderTextColor: typeof placeholderColor === 'string' ? placeholderColor : undefined,
       ...props
     }), errorMessage ? /*#__PURE__*/_jsx(Text, {
@@ -100,7 +186,13 @@ export const Input = /*#__PURE__*/forwardRef(({
    * that to every other screen.
    */
   if (avoidKeyboard) {
-    return /*#__PURE__*/_jsx(KeyboardAvoider, {
+    return /*#__PURE__*/_jsx(KeyboardAvoider
+    // Only while *this* field is the one being typed into. Without it
+    // every avoiding field on the screen lifts the moment any field
+    // anywhere is tapped, and since they all aim at the same gap above
+    // the keyboard, they arrive stacked on top of one another.
+    , {
+      active: focused,
       offset: keyboardOffset,
       className: containerClasses,
       children: body