panelui-native 0.84.0 → 0.85.0

package/src/components/switch/index.tsx

@@ -8,7 +8,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { useDirectionSign } from '../../hooks/use-direction';
-import { getNativeUI } from '../../native';
+import { NativeHost, getNativeUI } from '../../native';
 import { selectionTick } from '../../utils/haptics';
 import { useFieldLabelledBy } from '../field';
 
@@ -79,6 +79,15 @@ export interface SwitchProps
  * Animated switch. Thumb position and active-track opacity are driven on the
  * UI thread; toggling never re-renders beyond the value change itself.
  */
+/**
+ * The box the platform toggle is given, in points.
+ *
+ * Taller than either platform's switch — 31 on iOS, 32 on Android — so the
+ * control is never clipped by the box it is centred in, and short enough that
+ * a row built around it is still a row.
+ */
+const NATIVE_TOGGLE_HEIGHT = 32;
+
 export const Switch = forwardRef<View, SwitchProps>(
   (
     {
@@ -124,18 +133,30 @@ export const Switch = forwardRef<View, SwitchProps>(
     if (nativeUI) {
       const { Host, Switch: NativeSwitch } = nativeUI;
       return (
-        // A platform toggle has a definite intrinsic size on both platforms,
-        // so the host is left to follow it. Pinning the host to a number
-        // instead is what leaves the control laid out against a box it never
-        // agreed to, and settling into it a frame later.
-        <Host matchContents ignoreSafeArea="keyboard">
+        /*
+         * The height is stated; only the width is matched.
+         *
+         * `matchContents` hands an axis to the platform for good — the host
+         * writes the measured size back into the layout every time the
+         * platform's geometry changes, not once on mount — and the vertical
+         * axis is the one that moves everything below it when it does. A
+         * toggle's height is the one number here that does not vary, so it is
+         * given rather than asked for; its width is the platform's and stays
+         * the platform's.
+         */
+        <NativeHost
+          host={Host}
+          matchContents={{ horizontal: true }}
+          ignoreSafeArea="keyboard"
+          style={{ height: NATIVE_TOGGLE_HEIGHT }}
+        >
           <NativeSwitch
             value={value}
             onValueChange={(next: boolean) => onValueChange?.(next)}
             label={label ?? accessibilityLabel}
             disabled={disabled}
           />
-        </Host>
+        </NativeHost>
       );
     }
 

package/src/index.ts

@@ -222,6 +222,15 @@ export {
   type FlowRect,
   type FlowPoint,
 } from './components/flow';
+export {
+  FlipCard,
+  useFlipCard,
+  type FlipCardProps,
+  type FlipCardFaceProps,
+  type FlipCardDirection,
+  type FlipCardRotation,
+  type FlipCardTrigger,
+} from './components/flip-card';
 export {
   FunnelChart,
   useFunnelChart,

package/src/native/index.ts

@@ -18,25 +18,40 @@
  * **Theme tokens do not apply in native mode.** The platform draws the control
  * with its own colours, metrics and typography — that is the entire point, and
  * it means `className` and the variant props are ignored on those components.
+ *
+ * The one exception is which appearance it draws: `colorScheme` is the single
+ * theme signal the toolkit accepts, and `NativeHost` is what passes it. Mount
+ * every host through that rather than reaching for `Host` directly, or the
+ * control resolves its own appearance from the system and stops tracking the
+ * app's theme.
  */
 import { Platform } from 'react-native';
 import type { ComponentType, ReactNode } from 'react';
 
+export { NativeHost, type NativeHostProps } from './native-host';
+
 interface NativeUIModule {
   Host: ComponentType<{
     children?: ReactNode;
     /**
-     * Whether the host resizes itself to the platform content.
+     * Which axes the platform is allowed to size.
      *
-     * This is on for every control here, and it is the whole answer to the
-     * jump. Sizing the *host* and leaving the control unsized inside it hands
-     * the platform a box it never agreed to: it lays out against its own
-     * intrinsic size, and settles into the box on the first thing that forces
-     * a second pass — which for a button is the first press.
+     * **It is not a one-off measurement.** An axis given to `matchContents` is
+     * given for good: the host writes the platform's measured size straight
+     * into the layout every time the platform's geometry changes, and dirties
+     * the layout when it does. So a control that lays itself out again under a
+     * press drags its box with it, and everything below it moves — which is
+     * the defect this spent three attempts on, twice reasoning about the first
+     * measurement when the problem was every one after it.
      *
-     * The per-axis form is for a control with no intrinsic width, like a
-     * slider or a picker: the width comes from ordinary layout and only the
-     * height is reported back.
+     * The rule that comes out of that: **never hand over an axis whose size
+     * you already know.** State it in `style` instead and match only what is
+     * genuinely the platform's — a labelled button's width, a toggle's width.
+     * An axis left out is never written to, so an explicit size on it is safe.
+     *
+     * Where nothing can be stated the axis has to stay matched. A picker is
+     * the honest example: a menu is a compact button and a wheel is a rotor,
+     * and only the platform knows which it drew.
      */
     matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
     /**
@@ -56,6 +71,14 @@ interface NativeUIModule {
      * platform's business and stay its business.
      */
     ignoreSafeArea?: 'all' | 'container' | 'keyboard';
+    /**
+     * The appearance the platform draws the hosted control in.
+     *
+     * Passed by `NativeHost` from the app's own theme, because the host would
+     * otherwise resolve it from the system — which is a different question,
+     * and one whose answer does not change when the theme does.
+     */
+    colorScheme?: 'light' | 'dark';
     style?: unknown;
     [key: string]: unknown;
   }>;
@@ -175,7 +198,9 @@ interface SwiftUIComponents {
   Host: ComponentType<{
     children?: ReactNode;
     matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
-    ignoreSafeArea?: unknown;
+    ignoreSafeArea?: 'all' | 'container' | 'keyboard';
+    /** As on the portable host above — see `NativeHost`. */
+    colorScheme?: 'light' | 'dark';
     style?: unknown;
   }>;
   RNHostView: ComponentType<{ children?: ReactNode; matchContents?: boolean }>;

package/src/native/native-host.tsx

@@ -0,0 +1,75 @@
+/**
+ * The host every native control is mounted in, told which appearance to draw.
+ *
+ * A hosting controller resolves its colour scheme from the trait environment
+ * it is placed in, which is the system appearance — not the theme the app is
+ * running. Those are the same thing only by coincidence: an app in a dark
+ * theme on a phone set to light gets a light platform control beside dark
+ * content, and a theme changed at runtime leaves the control where it was,
+ * because nothing in the trait environment moved.
+ *
+ * So the appearance is passed rather than inferred. `colorScheme` is the one
+ * theme signal the platform toolkit accepts, and this is the single place it
+ * is given.
+ *
+ * ```tsx
+ * const { Host, Switch: NativeSwitch } = nativeUI;
+ * <NativeHost host={Host} matchContents ignoreSafeArea="keyboard">
+ *   <NativeSwitch value={on} onValueChange={setOn} />
+ * </NativeHost>
+ * ```
+ *
+ * ## Why the host arrives as a prop
+ *
+ * There are two of them. The universal `Host` comes from `getNativeUI()` and
+ * the SwiftUI-only one from `getSwiftUI()`, and a caller has already resolved
+ * whichever it needs before it renders. Taking the component rather than
+ * resolving it again keeps this file free of the module bridge, which is what
+ * lets the bridge re-export it without the two importing each other.
+ *
+ * ## Why this is a component rather than a hook at each call site
+ *
+ * `useThemeMode` subscribes to theme changes, and a hook cannot be called
+ * conditionally — so reading it inside `Button` would put a subscription on
+ * every button in a list for a branch almost none of them take. Here the
+ * subscription exists only where a native host is actually mounted.
+ */
+import type { ComponentType, ReactNode } from 'react';
+import { useThemeMode } from '../theme/use-theme';
+
+/**
+ * What this renders the host with. A type alias rather than an interface, and
+ * that is load-bearing: only an alias gets an implicit index signature, which
+ * is what makes it assignable to the bridge's own `Host` prop type.
+ */
+type NativeHostRenderProps = {
+  children?: ReactNode;
+  colorScheme?: 'light' | 'dark';
+  matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
+  ignoreSafeArea?: 'all' | 'container' | 'keyboard';
+  style?: unknown;
+};
+
+export interface NativeHostProps {
+  /**
+   * The host component to render — `Host` from `getNativeUI()` for a portable
+   * control, or from `getSwiftUI()` for an iOS-only one.
+   */
+  host: ComponentType<NativeHostRenderProps>;
+  children?: ReactNode;
+  /** Whether the host resizes itself to the platform content. */
+  matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
+  /** Which safe areas the host lets the platform inset its content for. */
+  ignoreSafeArea?: 'all' | 'container' | 'keyboard';
+  style?: unknown;
+}
+
+export function NativeHost({ host: Host, children, ...props }: NativeHostProps) {
+  const { mode } = useThemeMode();
+
+  return (
+    <Host colorScheme={mode} {...props}>
+      {children}
+    </Host>
+  );
+}

package/src/primitives/glass.tsx

@@ -44,6 +44,7 @@
  */
 import type { ComponentType, ReactNode } from 'react';
 import { Platform, StyleSheet, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import { useThemeMode } from '../theme/use-theme';
 import { cn } from '../utils/cn';
 import { useReduceTransparency } from './scrim';
 
@@ -144,6 +145,16 @@ export function Glass({
   ...props
 }: GlassProps) {
   const reduceTransparency = useReduceTransparency();
+  /*
+   * Which appearance the material is drawn in, from the app's theme rather
+   * than the phone's.
+   *
+   * The material's own default follows the system, so an app running a dark
+   * theme on a phone set to light draws light glass over dark content — and a
+   * theme changed at runtime leaves it where it was, because the system
+   * appearance never moved.
+   */
+  const { mode } = useThemeMode();
   // Not knowing yet counts as "do not draw it": the material arriving a frame
   // late is invisible, and one flashing at somebody who opted out is not.
   const material = GlassView !== null && reduceTransparency === false;
@@ -159,6 +170,7 @@ export function Glass({
         <GlassView
           glassEffectStyle={variant}
           tintColor={tint}
+          colorScheme={mode}
           pointerEvents="none"
           style={[StyleSheet.absoluteFill, shape]}
         />