@studio-piot/native-ui 0.2.5 → 0.16.0

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";

package/src/theme/resolveThemeSpacing.test.ts

@@ -0,0 +1,29 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  DEFAULT_THEME_SPACING,
+  resolveThemeSpacing,
+} from "./resolveThemeSpacing.ts";
+
+describe("resolveThemeSpacing", () => {
+  it("keeps the package defaults when nothing is set", () => {
+    assert.deepEqual(resolveThemeSpacing(undefined), {
+      screen: 16,
+      pageTop: 16,
+      pageBottom: 24,
+    });
+    assert.deepEqual(resolveThemeSpacing({}), DEFAULT_THEME_SPACING);
+  });
+
+  it("overrides only the keys the app sets", () => {
+    assert.deepEqual(resolveThemeSpacing({ screen: 20 }), {
+      screen: 20,
+      pageTop: 16,
+      pageBottom: 24,
+    });
+  });
+
+  it("allows zero", () => {
+    assert.equal(resolveThemeSpacing({ pageTop: 0 }).pageTop, 0);
+  });
+});

package/src/theme/resolveThemeSpacing.ts

@@ -0,0 +1,21 @@
+export type ThemeSpacing = {
+  /** Inset from the left and right screen edges. */
+  screen: number;
+  /** Gap between the header and the first item of a `Page`. */
+  pageTop: number;
+  /** Gap after the last item of a `Page`. */
+  pageBottom: number;
+};
+
+export const DEFAULT_THEME_SPACING: ThemeSpacing = {
+  screen: 16,
+  pageTop: 16,
+  pageBottom: 24,
+};
+
+/** App spacing over the package defaults. Pure so it can be unit-tested. */
+export function resolveThemeSpacing(
+  spacing: Partial<ThemeSpacing> | undefined,
+): ThemeSpacing {
+  return { ...DEFAULT_THEME_SPACING, ...spacing };
+}

package/src/theme/types.ts

@@ -1,5 +1,8 @@
+import type { ThemeSpacing } from "./resolveThemeSpacing";
+
 export type ThemeColors = Record<string, string>;
 
 export type ThemeContextValue = {
   colors: { light: ThemeColors; dark: ThemeColors };
+  spacing: ThemeSpacing;
 };

package/src/theme/useThemeSpacing.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { DEFAULT_THEME_SPACING, type ThemeSpacing } from "./resolveThemeSpacing";
+import { ThemeContext } from "./ThemeProvider";
+
+/** Spacing from `ThemeProvider`, or the package defaults outside one. */
+export function useThemeSpacing(): ThemeSpacing {
+  return useContext(ThemeContext)?.spacing ?? DEFAULT_THEME_SPACING;
+}

package/src/components/Form/withAlpha.test.ts

@@ -1,13 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { withAlpha } from "./withAlpha.ts";
-
-describe("withAlpha", () => {
-  it("converts a hex colour to rgba", () => {
-    assert.equal(withAlpha("#EDE7DE", 0.98), "rgba(237, 231, 222, 0.98)");
-  });
-
-  it("expands three-digit hex", () => {
-    assert.equal(withAlpha("#abc", 0.5), "rgba(170, 187, 204, 0.5)");
-  });
-});