@studio-piot/native-ui 0.2.5 → 0.17.0

package/src/components/TabAccessoryButton/TabAccessoryButton.tsx

@@ -0,0 +1,150 @@
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { useThemeSpacing } from "../../theme/useThemeSpacing";
+import { Button } from "../Button";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import { supportsLiquidGlass } from "../HeaderButton/headerButtonLayout";
+import {
+  TAB_ACCESSORY_FONT_SIZE,
+  TAB_ACCESSORY_ICON_SIZE,
+  tabAccessoryVisible,
+} from "./tabAccessoryLayout";
+import { tabAccessoryRoles } from "./tabAccessoryThemeRoles";
+import type { TabAccessoryButtonProps } from "./types";
+
+const GLASS = supportsLiquidGlass(Platform.OS, Platform.Version);
+
+/**
+ * Action above the bottom tabs. On iOS 26+ it is content for
+ * `NativeTabs.BottomAccessory`, which draws the glass. Elsewhere it floats
+ * a filled pill at the bottom of the screen.
+ */
+export function TabAccessoryButton(props: TabAccessoryButtonProps) {
+  if (!tabAccessoryVisible(props.placement, GLASS)) {
+    return null;
+  }
+  if (props.placement === "screen") {
+    return <FloatingPill {...props} />;
+  }
+  return props.variant === "filled" ? (
+    <FilledContent {...props} />
+  ) : (
+    <GlassContent {...props} />
+  );
+}
+
+function GlassContent({
+  label,
+  onPress,
+  icon,
+  disabled = false,
+  color: colorProp,
+}: TabAccessoryButtonProps) {
+  const color = useResolvedFieldColor(colorProp, tabAccessoryRoles("glass").content);
+
+  return (
+    <Pressable
+      accessibilityLabel={label}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.content,
+        { opacity: disabled ? 0.4 : pressed ? 0.5 : 1 },
+      ]}
+    >
+      {icon?.({ color, size: TAB_ACCESSORY_ICON_SIZE })}
+      <Text style={[styles.label, { color }]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+/** Covers the accessory glass edge to edge, so there is no shape inside the glass. */
+function FilledContent({
+  label,
+  onPress,
+  icon,
+  disabled = false,
+  backgroundColor: backgroundColorProp,
+  labelColor: labelColorProp,
+}: TabAccessoryButtonProps) {
+  const roles = tabAccessoryRoles("filled");
+  const fill = useResolvedFieldColor(backgroundColorProp, roles.fill as string);
+  const color = useResolvedFieldColor(labelColorProp, roles.content);
+
+  return (
+    <Pressable
+      accessibilityLabel={label}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.content,
+        styles.filled,
+        { backgroundColor: fill, opacity: disabled ? 0.4 : pressed ? 0.75 : 1 },
+      ]}
+    >
+      {icon?.({ color, size: TAB_ACCESSORY_ICON_SIZE })}
+      <Text style={[styles.label, { color }]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function FloatingPill({
+  label,
+  onPress,
+  icon,
+  disabled,
+  backgroundColor,
+  labelColor,
+}: TabAccessoryButtonProps) {
+  const { screen } = useThemeSpacing();
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[styles.floating, { left: screen, right: screen, bottom: screen }]}
+    >
+      <Button
+        backgroundColor={backgroundColor}
+        disabled={disabled}
+        icon={icon}
+        label={label}
+        labelColor={labelColor}
+        onPress={onPress}
+        radius="full"
+        style={styles.pillShadow}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    alignSelf: "stretch",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingHorizontal: 16,
+  },
+  filled: {
+    borderRadius: 999,
+  },
+  label: {
+    fontSize: TAB_ACCESSORY_FONT_SIZE,
+    fontWeight: "600",
+  },
+  floating: {
+    position: "absolute",
+  },
+  pillShadow: {
+    shadowColor: "#000000",
+    shadowOpacity: 0.18,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 6 },
+    elevation: 6,
+  },
+});

package/src/components/TabAccessoryButton/index.ts

@@ -0,0 +1,12 @@
+export { TabAccessoryButton } from "./TabAccessoryButton";
+export {
+  TAB_ACCESSORY_SCREEN_INSET,
+  tabAccessoryScreenInset,
+  type TabAccessoryPlacement,
+} from "./tabAccessoryLayout";
+export {
+  TAB_ACCESSORY_THEME_ROLES,
+  type TabAccessoryThemeColorProp,
+  type TabAccessoryVariant,
+} from "./tabAccessoryThemeRoles";
+export type { TabAccessoryButtonProps } from "./types";

package/src/components/TabAccessoryButton/tabAccessoryLayout.test.ts

@@ -0,0 +1,42 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  TAB_ACCESSORY_FALLBACK_HEIGHT,
+  TAB_ACCESSORY_SCREEN_INSET,
+  tabAccessoryScreenClearance,
+  tabAccessoryScreenInset,
+  tabAccessoryVisible,
+} from "./tabAccessoryLayout.ts";
+
+describe("tabAccessoryVisible", () => {
+  it("shows the accessory copy only where iOS draws glass", () => {
+    assert.equal(tabAccessoryVisible("accessory", true), true);
+    assert.equal(tabAccessoryVisible("accessory", false), false);
+  });
+
+  it("shows the in-screen copy only where there is no glass", () => {
+    assert.equal(tabAccessoryVisible("screen", false), true);
+    assert.equal(tabAccessoryVisible("screen", true), false);
+  });
+});
+
+describe("tabAccessoryScreenInset", () => {
+  it("leaves the pill height plus an even gap above and below it", () => {
+    assert.equal(tabAccessoryScreenInset(16), TAB_ACCESSORY_FALLBACK_HEIGHT + 32);
+    assert.equal(tabAccessoryScreenInset(20), TAB_ACCESSORY_FALLBACK_HEIGHT + 40);
+  });
+
+  it("matches TAB_ACCESSORY_SCREEN_INSET with the default 16 spacing", () => {
+    assert.equal(tabAccessoryScreenInset(16), TAB_ACCESSORY_SCREEN_INSET);
+  });
+});
+
+describe("tabAccessoryScreenClearance", () => {
+  it("clears the floating fallback pill where there is no glass", () => {
+    assert.equal(tabAccessoryScreenClearance(false, 20), tabAccessoryScreenInset(20));
+  });
+
+  it("adds nothing on iOS 26, where the accessory is in the native tab bar", () => {
+    assert.equal(tabAccessoryScreenClearance(true, 20), 0);
+  });
+});

package/src/components/TabAccessoryButton/tabAccessoryLayout.ts

@@ -0,0 +1,43 @@
+export type TabAccessoryPlacement = "accessory" | "screen";
+
+export const TAB_ACCESSORY_ICON_SIZE = 20;
+export const TAB_ACCESSORY_FONT_SIZE = 17;
+/** Same minimum height as `Button`. */
+export const TAB_ACCESSORY_FALLBACK_HEIGHT = 52;
+
+/**
+ * Bottom padding for a screen's scroll content so the fallback pill never
+ * hides the last item. The pill sits `screen` above the tabs (the same gap
+ * as its sides), so the content needs that gap below and above it.
+ * Pass `useThemeSpacing().screen`. Pure so it can be unit-tested.
+ */
+export function tabAccessoryScreenInset(screen: number): number {
+  return TAB_ACCESSORY_FALLBACK_HEIGHT + screen * 2;
+}
+
+/** `tabAccessoryScreenInset` with the default 16 spacing. */
+export const TAB_ACCESSORY_SCREEN_INSET = tabAccessoryScreenInset(16);
+
+/**
+ * Mount one copy in `NativeTabs.BottomAccessory` and one in the screen;
+ * each renders only where it belongs. iOS 26+ has the glass accessory,
+ * other platforms float a pill inside the screen. Pure so it can be unit-tested.
+ */
+export function tabAccessoryVisible(
+  placement: TabAccessoryPlacement,
+  glass: boolean,
+): boolean {
+  return placement === "accessory" ? glass : !glass;
+}
+
+/**
+ * Extra bottom room a scrolling screen needs for its in-screen copy.
+ * Only the fallback pill floats over the screen; on iOS 26+ the accessory
+ * is part of the native tab bar. Pure so it can be unit-tested.
+ */
+export function tabAccessoryScreenClearance(
+  glass: boolean,
+  screen: number,
+): number {
+  return glass ? 0 : tabAccessoryScreenInset(screen);
+}

package/src/components/TabAccessoryButton/tabAccessoryThemeRoles.test.ts

@@ -0,0 +1,28 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  TAB_ACCESSORY_THEME_ROLES,
+  tabAccessoryRoles,
+} from "./tabAccessoryThemeRoles.ts";
+
+describe("TAB_ACCESSORY_THEME_ROLES", () => {
+  it("maps the glass content colour to a dedicated role", () => {
+    assert.equal(TAB_ACCESSORY_THEME_ROLES.color, "tabAccessoryLabel");
+  });
+});
+
+describe("tabAccessoryRoles", () => {
+  it("draws glass content in the accessory label colour with no fill", () => {
+    assert.deepEqual(tabAccessoryRoles("glass"), {
+      fill: undefined,
+      content: "tabAccessoryLabel",
+    });
+  });
+
+  it("fills with the button colours so it matches the fallback pill", () => {
+    assert.deepEqual(tabAccessoryRoles("filled"), {
+      fill: "buttonBackground",
+      content: "buttonLabel",
+    });
+  });
+});

package/src/components/TabAccessoryButton/tabAccessoryThemeRoles.ts

@@ -0,0 +1,22 @@
+export const TAB_ACCESSORY_THEME_ROLES = {
+  color: "tabAccessoryLabel",
+} as const;
+
+export type TabAccessoryThemeColorProp = keyof typeof TAB_ACCESSORY_THEME_ROLES;
+
+export type TabAccessoryVariant = "glass" | "filled";
+
+/**
+ * Theme roles for the accessory content. Glass draws only an icon and label
+ * on the system glass; filled covers the glass with the button colours.
+ */
+export function tabAccessoryRoles(variant: TabAccessoryVariant): {
+  fill: string | undefined;
+  content: string;
+} {
+  if (variant === "filled") {
+    // Same roles as Button (BUTTON_THEME_ROLES), so it matches the fallback pill.
+    return { fill: "buttonBackground", content: "buttonLabel" };
+  }
+  return { fill: undefined, content: TAB_ACCESSORY_THEME_ROLES.color };
+}

package/src/components/TabAccessoryButton/types.ts

@@ -0,0 +1,27 @@
+import type { ButtonIcon } from "../Button";
+import type { TabAccessoryPlacement } from "./tabAccessoryLayout";
+import type { TabAccessoryVariant } from "./tabAccessoryThemeRoles";
+
+export type TabAccessoryButtonProps = {
+  /**
+   * `"accessory"` inside `NativeTabs.BottomAccessory` (renders on iOS 26+ only).
+   * `"screen"` inside the tab screen (renders on Android and iOS 18 and earlier only).
+   */
+  placement: TabAccessoryPlacement;
+  label: string;
+  onPress: () => void;
+  icon?: ButtonIcon;
+  disabled?: boolean;
+  /**
+   * iOS 26+ look. `"glass"` (default): icon and label on the system glass.
+   * `"filled"`: a pill in the button colours covers the glass. The fallback
+   * pill on other platforms is always filled.
+   */
+  variant?: TabAccessoryVariant;
+  /** Glass variant content colour. Defaults to theme role `tabAccessoryLabel`. */
+  color?: string;
+  /** Filled pill fill (filled variant and fallback). Defaults to theme role `buttonBackground`. */
+  backgroundColor?: string;
+  /** Filled pill label and icon (filled variant and fallback). Defaults to theme role `buttonLabel`. */
+  labelColor?: string;
+};

package/src/components/index.ts

@@ -1,9 +1,22 @@
 export {
   Button,
-  type ButtonProps,
+  BUTTON_ICON_SIZE,
+  BUTTON_THEME_ROLES,
   buttonRadiusValue,
+  type ButtonIcon,
+  type ButtonIconPosition,
+  type ButtonProps,
   type ButtonRadius,
+  type ButtonThemeColorProp,
+  type ButtonVariant,
 } from "./Button";
+export {
+  Choice,
+  CHOICE_ICON_SIZE,
+  CHOICE_THEME_ROLES,
+  type ChoiceProps,
+  type ChoiceThemeColorProp,
+} from "./Choice";
 export {
   LinkBlocks,
   filterLinkBlockGroups,
@@ -20,7 +33,23 @@ export {
   type FieldTextProps,
   type FieldTextareaProps,
 } from "./Field";
-export { Form, FormCloseButton, type FormProps } from "./Form";
+export {
+  Form,
+  FormCloseButton,
+  FORM_THEME_ROLES,
+  type FormProps,
+  type FormThemeColorProp,
+} from "./Form";
+export {
+  FormSheet,
+  FORM_SHEET_THEME_ROLES,
+  formSheetSnapPoints,
+  type FormSheetInset,
+  type FormSheetProps,
+  type FormSheetSnapIndex,
+  type FormSheetSnapInput,
+  type FormSheetThemeColorProp,
+} from "./FormSheet";
 export {
   ErrorBanner,
   ErrorBannerField,
@@ -32,6 +61,7 @@ export {
   useErrorBannerField,
   type ErrorBannerThemeColorProp,
   type ErrorBannerProps,
+  type ErrorBannerScrollTarget,
   type FieldError,
 } from "./ErrorBanner";
 export {
@@ -67,3 +97,35 @@ export {
   type SliderThemeColorProp,
   type SliderProps,
 } from "./Slider";
+export {
+  HeaderCapsule,
+  HeaderGroup,
+  HeaderIcon,
+  HEADER_BUTTON_THEME_ROLES,
+  supportsLiquidGlass,
+  type HeaderButtonThemeColorProp,
+  type HeaderButtonIcon,
+  type HeaderCapsuleProps,
+  type HeaderGroupProps,
+  type HeaderIconProps,
+} from "./HeaderButton";
+export { HeaderWash } from "./HeaderWash";
+export {
+  TabAccessoryButton,
+  TAB_ACCESSORY_SCREEN_INSET,
+  TAB_ACCESSORY_THEME_ROLES,
+  tabAccessoryScreenInset,
+  type TabAccessoryButtonProps,
+  type TabAccessoryPlacement,
+  type TabAccessoryThemeColorProp,
+  type TabAccessoryVariant,
+} from "./TabAccessoryButton";
+export {
+  Page,
+  PageBleed,
+  PAGE_THEME_ROLES,
+  type PageBleedProps,
+  type PageProps,
+  type PageTabAccessory,
+  type PageThemeColorProp,
+} from "./Page";

package/src/index.ts

@@ -1,12 +1,26 @@
-export const version = "0.2.5";
+export const version = "0.17.0";
 
 export * from "./theme";
+export { SHEET_TOP_RADIUS, screenPaddingHorizontal } from "./layout";
 export {
   Button,
-  type ButtonProps,
+  BUTTON_ICON_SIZE,
+  BUTTON_THEME_ROLES,
   buttonRadiusValue,
+  type ButtonIcon,
+  type ButtonIconPosition,
+  type ButtonProps,
   type ButtonRadius,
+  type ButtonThemeColorProp,
+  type ButtonVariant,
 } from "./components/Button";
+export {
+  Choice,
+  CHOICE_ICON_SIZE,
+  CHOICE_THEME_ROLES,
+  type ChoiceProps,
+  type ChoiceThemeColorProp,
+} from "./components/Choice";
 export {
   LinkBlocks,
   filterLinkBlockGroups,
@@ -26,8 +40,20 @@ export {
 export {
   Form,
   FormCloseButton,
+  FORM_THEME_ROLES,
+  type FormThemeColorProp,
   type FormProps,
 } from "./components/Form";
+export {
+  FormSheet,
+  FORM_SHEET_THEME_ROLES,
+  formSheetSnapPoints,
+  type FormSheetInset,
+  type FormSheetProps,
+  type FormSheetSnapIndex,
+  type FormSheetSnapInput,
+  type FormSheetThemeColorProp,
+} from "./components/FormSheet";
 export {
   ErrorBanner,
   ErrorBannerField,
@@ -39,6 +65,7 @@ export {
   useErrorBannerField,
   type ErrorBannerThemeColorProp,
   type ErrorBannerProps,
+  type ErrorBannerScrollTarget,
   type FieldError,
 } from "./components/ErrorBanner";
 export {
@@ -74,4 +101,36 @@ export {
   type SliderThemeColorProp,
   type SliderProps,
 } from "./components/Slider";
+export {
+  HeaderCapsule,
+  HeaderGroup,
+  HeaderIcon,
+  HEADER_BUTTON_THEME_ROLES,
+  supportsLiquidGlass,
+  type HeaderButtonThemeColorProp,
+  type HeaderButtonIcon,
+  type HeaderCapsuleProps,
+  type HeaderGroupProps,
+  type HeaderIconProps,
+} from "./components/HeaderButton";
+export { HeaderWash } from "./components/HeaderWash";
+export {
+  TabAccessoryButton,
+  TAB_ACCESSORY_SCREEN_INSET,
+  TAB_ACCESSORY_THEME_ROLES,
+  tabAccessoryScreenInset,
+  type TabAccessoryButtonProps,
+  type TabAccessoryPlacement,
+  type TabAccessoryThemeColorProp,
+  type TabAccessoryVariant,
+} from "./components/TabAccessoryButton";
+export {
+  Page,
+  PageBleed,
+  PAGE_THEME_ROLES,
+  type PageBleedProps,
+  type PageProps,
+  type PageTabAccessory,
+  type PageThemeColorProp,
+} from "./components/Page";
 export * as components from "./components";

package/src/layout/headerInset.test.ts

@@ -0,0 +1,60 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { estimateHeaderHeight, formFieldScrollY } from "./headerInset.ts";
+
+describe("formFieldScrollY", () => {
+  // iOS, transparent header ending at 100, banner in a window overlay.
+  const ios = { scrollTop: 0, visibleTop: 100, bannerBottom: 0, minScrollY: -100, gap: 12 };
+
+  it("puts the field just under the header when there is no banner", () => {
+    assert.equal(formFieldScrollY({ ...ios, fieldY: 400 }), 400 - 100 - 12);
+  });
+
+  it("puts the field under the banner when the banner reaches lower than the header", () => {
+    assert.equal(formFieldScrollY({ ...ios, fieldY: 400, bannerBottom: 180 }), 400 - 180 - 12);
+  });
+
+  it("never scrolls above the top of the content", () => {
+    assert.equal(formFieldScrollY({ ...ios, fieldY: 20, bannerBottom: 180 }), -100);
+  });
+
+  it("accounts for a scroll view that starts below an opaque header", () => {
+    // Scroll view starts at window y 100, no inset; overlay banner to 180.
+    assert.equal(
+      formFieldScrollY({
+        fieldY: 400,
+        scrollTop: 100,
+        visibleTop: 100,
+        bannerBottom: 180,
+        minScrollY: 0,
+        gap: 12,
+      }),
+      400 + 100 - 180 - 12,
+    );
+  });
+
+  it("clears a transparent Android header and the banner below it", () => {
+    // Content starts at window 0 under an 80pt header; banner from 80 to 200.
+    assert.equal(
+      formFieldScrollY({
+        fieldY: 500,
+        scrollTop: 0,
+        visibleTop: 80,
+        bannerBottom: 200,
+        minScrollY: 0,
+        gap: 12,
+      }),
+      500 - 200 - 12,
+    );
+  });
+});
+
+describe("estimateHeaderHeight", () => {
+  it("adds the standard iOS navigation bar to the status bar", () => {
+    assert.equal(estimateHeaderHeight("ios", 59), 59 + 44);
+  });
+
+  it("adds the standard Android toolbar to the status bar", () => {
+    assert.equal(estimateHeaderHeight("android", 24), 24 + 56);
+  });
+});

package/src/layout/headerInset.ts

@@ -0,0 +1,41 @@
+/** Material toolbar height, which the Android native stack header uses. */
+export const ANDROID_TOOLBAR_HEIGHT = 56;
+
+/** Standard iOS navigation bar height, below the status bar. */
+export const IOS_NAVIGATION_BAR_HEIGHT = 44;
+
+/**
+ * Header height when the app does not pass `useHeaderHeight()`: the status
+ * bar plus a standard bar. A large title or a custom header is taller.
+ * Pure so it can be unit-tested.
+ */
+export function estimateHeaderHeight(os: string, statusBar: number): number {
+  return statusBar + (os === "android" ? ANDROID_TOOLBAR_HEIGHT : IOS_NAVIGATION_BAR_HEIGHT);
+}
+
+/**
+ * Scroll offset that shows a field just below whichever ends lower: the
+ * native header or the error banner. `fieldY` is the field's content y;
+ * `scrollTop`, `visibleTop` and `bannerBottom` are window y values;
+ * `minScrollY` is the resting offset at the content top (negative when iOS
+ * insets the content). Pure so it can be unit-tested.
+ */
+export function formFieldScrollY({
+  fieldY,
+  scrollTop,
+  visibleTop,
+  bannerBottom,
+  minScrollY,
+  gap,
+}: {
+  fieldY: number;
+  scrollTop: number;
+  visibleTop: number;
+  bannerBottom: number;
+  minScrollY: number;
+  gap: number;
+}): number {
+  const clearOf = Math.max(visibleTop, bannerBottom);
+  return Math.max(minScrollY, fieldY + scrollTop - clearOf - gap);
+}
+

package/src/layout/index.ts

@@ -1 +1,2 @@
 export { screenPaddingHorizontal } from "./screenPadding";
+export { SHEET_TOP_RADIUS } from "./sheet";

package/src/layout/sheet.ts

@@ -0,0 +1,2 @@
+/** Top corner radius shared by the Select and FormSheet sheets. */
+export const SHEET_TOP_RADIUS = 20;

package/src/theme/ThemeProvider.tsx

@@ -4,17 +4,25 @@ import {
   useMemo,
   type ReactNode,
 } from "react";
+import { resolveThemeSpacing, type ThemeSpacing } from "./resolveThemeSpacing";
 import type { ThemeColors, ThemeContextValue } from "./types";
 
 export const ThemeContext = createContext<ThemeContextValue | null>(null);
 
 export function ThemeProvider({
   colors,
+  spacing,
   children,
 }: {
   colors: { light: ThemeColors; dark: ThemeColors };
+  /** Overrides the package spacing defaults. Omitted keys keep the default. */
+  spacing?: Partial<ThemeSpacing>;
   children: ReactNode;
 }) {
-  const value = useMemo(() => ({ colors }), [colors]);
+  const value = useMemo(
+    () => ({ colors, spacing: resolveThemeSpacing(spacing) }),
+    // Spacing is usually an inline literal; compare its values, not identity.
+    [colors, spacing?.screen, spacing?.pageTop, spacing?.pageBottom],
+  );
   return createElement(ThemeContext.Provider, { value }, children);
 }

package/src/theme/index.ts

@@ -2,4 +2,10 @@ export type { ThemeColors, ThemeContextValue } from "./types";
 export { ThemeProvider } from "./ThemeProvider";
 export { useColorScheme } from "./useColorScheme";
 export { useThemeColor } from "./useThemeColor";
+export { useThemeSpacing } from "./useThemeSpacing";
 export { resolveColorScheme } from "./resolveColorScheme";
+export {
+  DEFAULT_THEME_SPACING,
+  resolveThemeSpacing,
+  type ThemeSpacing,
+} from "./resolveThemeSpacing";