@studio-piot/native-ui 0.2.4 → 0.16.0

package/src/components/Select/Select.tsx

@@ -22,20 +22,19 @@ import {
   type BottomSheetHandleProps,
 } from "@gorhom/bottom-sheet";
 import { FullWindowOverlay } from "react-native-screens";
+import { SHEET_TOP_RADIUS } from "../../layout/sheet";
 import { buttonRadiusValue } from "../Button/buttonRadius";
 import {
   useErrorBannerDismiss,
   useErrorBannerField,
 } from "../ErrorBanner";
 import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
-import { useThemeColor } from "../../theme/useThemeColor";
 import { DEFAULT_SELECT_DETENTS } from "./resolveSelectDetentIndex";
 import { SelectCloseButton } from "./SelectCloseButton";
 import { SELECT_THEME_ROLES } from "./selectThemeRoles";
 import type { SelectOption, SelectProps } from "./types";
 
 const BACKDROP_OPACITY = 0.72;
-const SHEET_TOP_RADIUS = 20;
 
 /** Renders the sheet above React Navigation native modals (iOS). */
 function SheetContainer({ children }: { children?: ReactNode }) {
@@ -69,6 +68,8 @@ export function Select({
   borderColor: borderColorProp,
   errorColor: errorColorProp,
   selectedColor: selectedColorProp,
+  closeBackgroundColor: closeBackgroundColorProp,
+  closeIconColor: closeIconColorProp,
   style,
 }: SelectProps) {
   const modalRef = useRef<ElementRef<typeof BottomSheetModal>>(null);
@@ -107,8 +108,14 @@ export function Select({
     SELECT_THEME_ROLES.selectedColor,
   );
   // Resolved on the trigger tree (has ThemeProvider), then passed into the portal.
-  const closeDiscColor = useThemeColor("text");
-  const closeIconColor = useThemeColor("background");
+  const closeDiscColor = useResolvedFieldColor(
+    closeBackgroundColorProp,
+    SELECT_THEME_ROLES.closeBackgroundColor,
+  );
+  const closeIconColor = useResolvedFieldColor(
+    closeIconColorProp,
+    SELECT_THEME_ROLES.closeIconColor,
+  );
 
   const dismissBanner = useErrorBannerDismiss();
   const { viewRef, listed } = useErrorBannerField(name, () => {

package/src/components/Select/selectThemeRoles.test.ts

@@ -13,4 +13,9 @@ describe("SELECT_THEME_ROLES", () => {
     assert.equal(SELECT_THEME_ROLES.errorColor, "fieldError");
     assert.equal(SELECT_THEME_ROLES.selectedColor, "fieldSelectSelected");
   });
+
+  it("gives the sheet close button its own select-prefixed roles", () => {
+    assert.equal(SELECT_THEME_ROLES.closeBackgroundColor, "selectCloseBackground");
+    assert.equal(SELECT_THEME_ROLES.closeIconColor, "selectCloseIcon");
+  });
 });

package/src/components/Select/selectThemeRoles.ts

@@ -7,6 +7,8 @@ export const SELECT_THEME_ROLES = {
   borderColor: "fieldBorder",
   errorColor: "fieldError",
   selectedColor: "fieldSelectSelected",
+  closeBackgroundColor: "selectCloseBackground",
+  closeIconColor: "selectCloseIcon",
 } as const;
 
 export type SelectThemeColorProp = keyof typeof SELECT_THEME_ROLES;

package/src/components/Select/types.ts

@@ -39,5 +39,9 @@ export type SelectProps = {
   borderColor?: string;
   errorColor?: string;
   selectedColor?: string;
+  /** Sheet close disc. Defaults to theme role `selectCloseBackground`. */
+  closeBackgroundColor?: string;
+  /** Sheet close cross. Defaults to theme role `selectCloseIcon`. */
+  closeIconColor?: string;
   style?: StyleProp<ViewStyle>;
 };

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.4";
+export const version = "0.16.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);
+  });
+});