@bigbinary/neetoui-rn 3.0.3 → 3.1.0

package/src/components/RadioButton/RadioButton.tsx

@@ -1,8 +1,8 @@
-import { Radio, RadioInactive } from "@bigbinary/neeto-icons-rn";
-import { type StyleProp, type TextStyle } from "react-native";
+import RadioInactive from "@bigbinary/neeto-icons-rn/icons/RadioInactive";
+import { View, type StyleProp, type TextStyle } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 import { Touchable, type TouchableProps } from "../Touchable";
 import { Typography } from "../Typography";
 
@@ -13,8 +13,21 @@ export type RadioButtonProps = Omit<TouchableProps, "onPress"> & {
   label: string;
   labelStyle?: StyleProp<TextStyle>;
   iconSize?: number;
+  /**
+   * Diameter of the filled dot. Defaults to 37.5% of the icon box, which is
+   * half the ring's outer diameter — the Material proportion.
+   */
+  dotSize?: number;
 };
 
+/**
+ * The icon set's `Radio` glyph fills a 24 box with a ring of radius 8.4 and
+ * a dot of radius 3, so the dot reads as a pinprick at the sizes apps use.
+ * Drawing the dot here over the plain `RadioInactive` ring keeps both states
+ * on identical ring geometry and makes the fill sizeable.
+ */
+const DOT_RATIO = 0.375;
+
 export const RadioButton = ({
   selected = false,
   onSelect,
@@ -22,6 +35,7 @@ export const RadioButton = ({
   label,
   labelStyle,
   iconSize,
+  dotSize,
   style,
   ...rest
 }: RadioButtonProps) => {
@@ -29,7 +43,8 @@ export const RadioButton = ({
 
   styles.useVariants({ selected, disabled });
 
-  const Icon = selected ? Radio : RadioInactive;
+  const size = iconSize ?? moderateScale(22);
+  const dot = dotSize ?? size * DOT_RATIO;
 
   return (
     <Touchable
@@ -43,38 +58,64 @@ export const RadioButton = ({
       <Typography size="m" style={[styles.label, labelStyle]}>
         {label}
       </Typography>
-      <Icon
-        color={theme.colors.text.primary}
-        size={iconSize ?? moderateScale(22)}
-      />
+      <View style={styles.iconWrapper}>
+        <RadioInactive color={theme.colors.text.primary} size={size} />
+        {selected && (
+          <View
+            style={[
+              styles.dot,
+              {
+                backgroundColor: theme.colors.text.primary,
+                borderRadius: dot / 2,
+                height: dot,
+                width: dot,
+              },
+            ]}
+          />
+        )}
+      </View>
     </Touchable>
   );
 };
 
-const styles = StyleSheet.create(theme => ({
-  container: {
-    alignItems: "center",
-    flexDirection: "row",
-    paddingVertical: moderateScale(8),
-  },
-  label: {
-    flex: 1,
-    lineHeight: moderateScale(22),
-    variants: {
-      selected: {
-        true: {
-          color: theme.colors.text.primary,
-          fontFamily: theme.fonts.medium,
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    container: {
+      alignItems: "center",
+      flexDirection: "row",
+      paddingVertical: moderateScale(8),
+    },
+    iconWrapper: {
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    dot: {
+      position: "absolute",
+    },
+    label: {
+      flex: 1,
+      lineHeight: moderateScale(22),
+      variants: {
+        selected: {
+          true: {
+            color: theme.colors.text.primary,
+            fontFamily: theme.fonts.medium,
+          },
+          false: {
+            color: theme.colors.text.secondary,
+            fontFamily: theme.fonts.regular,
+          },
         },
-        false: {
-          color: theme.colors.text.secondary,
-          fontFamily: theme.fonts.regular,
+        disabled: {
+          true: { color: theme.colors.palette.grey400 },
+          false: {},
         },
       },
-      disabled: {
-        true: { color: theme.colors.palette.grey400 },
-        false: {},
-      },
     },
-  },
-}));
+  };
+});

package/src/components/SearchBar/SearchBar.tsx

@@ -6,11 +6,12 @@ import {
   type TextInputProps,
   type ViewStyle,
 } from "react-native";
-import { Close, Search } from "@bigbinary/neeto-icons-rn";
+import Close from "@bigbinary/neeto-icons-rn/icons/Close";
+import Search from "@bigbinary/neeto-icons-rn/icons/Search";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
 import { useDebounce } from "../../hooks";
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 import { Touchable } from "../Touchable";
 
 export type SearchBarProps = {
@@ -96,27 +97,34 @@ export const SearchBar = ({
   );
 };
 
-const styles = StyleSheet.create(theme => ({
-  container: {
-    alignItems: "center",
-    borderColor: theme.colors.palette.grey400,
-    borderRadius: moderateScale(8),
-    borderWidth: 1,
-    flexDirection: "row",
-    gap: moderateScale(8),
-    height: moderateScale(42),
-    paddingHorizontal: moderateScale(8),
-  },
-  input: {
-    color: theme.colors.text.primary,
-    flex: 1,
-    fontFamily: theme.fonts.regular,
-    fontSize: moderateScale(16),
-    padding: 0,
-  },
-  cancelButton: {
-    height: "100%",
-    justifyContent: "center",
-    paddingHorizontal: moderateScale(8),
-  },
-}));
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    container: {
+      alignItems: "center",
+      borderColor: theme.colors.palette.grey400,
+      borderRadius: moderateScale(8),
+      borderWidth: 1,
+      flexDirection: "row",
+      gap: moderateScale(8),
+      height: moderateScale(42),
+      paddingHorizontal: moderateScale(8),
+    },
+    input: {
+      color: theme.colors.text.primary,
+      flex: 1,
+      fontFamily: theme.fonts.regular,
+      fontSize: moderateScale(16),
+      padding: 0,
+    },
+    cancelButton: {
+      height: "100%",
+      justifyContent: "center",
+      paddingHorizontal: moderateScale(8),
+    },
+  };
+});

package/src/components/Skeleton/Skeleton.tsx

@@ -10,7 +10,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { StyleSheet, type UnistylesVariants } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 
 type SkeletonVariants = UnistylesVariants<typeof styles>;
 
@@ -107,15 +107,22 @@ const SkeletonGroup = ({
 
 Skeleton.Group = SkeletonGroup;
 
-const styles = StyleSheet.create(theme => ({
-  base: {
-    backgroundColor: theme.colors.palette.grey200,
-    variants: {
-      variant: {
-        rect: { borderRadius: moderateScale(6) },
-        line: { borderRadius: moderateScale(4) },
-        circle: { borderRadius: 9999 },
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    base: {
+      backgroundColor: theme.colors.palette.grey200,
+      variants: {
+        variant: {
+          rect: { borderRadius: moderateScale(6) },
+          line: { borderRadius: moderateScale(4) },
+          circle: { borderRadius: 9999 },
+        },
       },
     },
-  },
-}));
+  };
+});

package/src/components/Toast/Toast.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import { Pressable, View, useWindowDimensions } from "react-native";
-import { Close } from "@bigbinary/neeto-icons-rn";
+import Close from "@bigbinary/neeto-icons-rn/icons/Close";
 import ToastMessage, {
   type ToastConfig,
   type ToastConfigParams,
@@ -9,7 +9,7 @@ import ToastMessage, {
 } from "react-native-toast-message";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 import { Typography } from "../Typography";
 import { ToastGlyph } from "./ToastGlyph";
 
@@ -126,32 +126,39 @@ Toast.show = (params: ToastShowParams) =>
   ToastMessage.show({ autoHide: false, ...params });
 Toast.hide = () => ToastMessage.hide();
 
-const styles = StyleSheet.create(theme => ({
-  card: {
-    alignItems: "center",
-    backgroundColor: theme.colors.background.secondary,
-    borderRadius: moderateScale(16),
-    flexDirection: "row",
-    gap: moderateScale(10),
-    marginHorizontal: moderateScale(10),
-    minHeight: moderateScale(60),
-    paddingHorizontal: moderateScale(10),
-    paddingVertical: moderateScale(8),
-    ...theme.elevation.high,
-  },
-  iconSquare: {
-    alignItems: "center",
-    borderRadius: moderateScale(10),
-    height: moderateScale(42),
-    justifyContent: "center",
-    width: moderateScale(42),
-  },
-  textBlock: {
-    flex: 1,
-    gap: moderateScale(2),
-    paddingVertical: moderateScale(3),
-  },
-  description: {
-    color: theme.colors.text.secondary,
-  },
-}));
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    card: {
+      alignItems: "center",
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: moderateScale(16),
+      flexDirection: "row",
+      gap: moderateScale(10),
+      marginHorizontal: moderateScale(10),
+      minHeight: moderateScale(60),
+      paddingHorizontal: moderateScale(10),
+      paddingVertical: moderateScale(8),
+      ...theme.elevation.high,
+    },
+    iconSquare: {
+      alignItems: "center",
+      borderRadius: moderateScale(10),
+      height: moderateScale(42),
+      justifyContent: "center",
+      width: moderateScale(42),
+    },
+    textBlock: {
+      flex: 1,
+      gap: moderateScale(2),
+      paddingVertical: moderateScale(3),
+    },
+    description: {
+      color: theme.colors.text.secondary,
+    },
+  };
+});

package/src/components/Typography/Typography.tsx

@@ -1,8 +1,20 @@
-import { Text, type TextProps } from "react-native";
+import {
+  Platform,
+  StyleSheet as RNStyleSheet,
+  Text,
+  type TextProps,
+  type TextStyle,
+} from "react-native";
 import { StyleSheet, type UnistylesVariants } from "react-native-unistyles";
 
 type TypographyVariants = UnistylesVariants<typeof styles>;
 
+/**
+ * v2's Android guard multiplier, shared with InputFrame so the floating
+ * label and the text it stands in for never disagree on line metrics.
+ */
+export const LINE_HEIGHT_RATIO = 1.3;
+
 export type TypographyProps = TextProps &
   TypographyVariants & {
     color?: string;
@@ -19,8 +31,25 @@ export const Typography = ({
 }: TypographyProps) => {
   styles.useVariants({ variant, size, weight });
 
+  const mergedStyle = [styles.text, !!color && { color }, style];
+
+  // v2's Typography always rendered Android text with includeFontPadding
+  // off, vertical centering, and a 1.3x lineHeight computed from the
+  // resolved fontSize. Without that guard, SF Pro's tight metrics clip
+  // descenders (g/j/y) on Android 15+ (RN >= 0.78 text rendering).
+  let androidGuard: TextStyle | false = false;
+  if (Platform.OS === "android") {
+    const flat = (RNStyleSheet.flatten(mergedStyle) ?? {}) as TextStyle;
+    const fontSize = typeof flat.fontSize === "number" ? flat.fontSize : 14;
+    androidGuard = {
+      includeFontPadding: false,
+      textAlignVertical: "center",
+      lineHeight: flat.lineHeight ?? Math.floor(fontSize * LINE_HEIGHT_RATIO),
+    };
+  }
+
   return (
-    <Text {...rest} style={[styles.text, !!color && { color }, style]}>
+    <Text {...rest} style={[...mergedStyle, androidGuard]}>
       {children}
     </Text>
   );

package/src/components/Typography/index.ts

@@ -1 +1,5 @@
-export { Typography, type TypographyProps } from "./Typography";
+export {
+  LINE_HEIGHT_RATIO,
+  Typography,
+  type TypographyProps,
+} from "./Typography";

package/src/index.ts

@@ -39,7 +39,12 @@ export {
   type HeaderProps,
   type ScreenHeaderProps,
 } from "./components/Header";
-export { Input, type InputProps } from "./components/Input";
+export {
+  Input,
+  InputFrame,
+  type InputProps,
+  type InputFrameProps,
+} from "./components/Input";
 export { Loader, type LoaderProps } from "./components/Loader";
 export {
   NeetoUIProvider,
@@ -64,5 +69,5 @@ export {
   lightTheme,
   type NeetoTheme,
 } from "./theme/tokens";
-export { configureNeetoUI } from "./unistyles";
+export { configureNeetoUI, type ConfigureNeetoUIOptions } from "./unistyles";
 export { getShadowStyles, isValidEmail, moderateScale } from "./utils";

package/src/unistyles-init.ts

@@ -11,6 +11,10 @@
 //
 // This file (and only this file) is declared in package.json
 // "sideEffects" so bundlers never tree-shake the bare import away.
+//
+// Registering with the defaults (light theme, no OS following) is safe even
+// for an app that wants adaptive themes: its own configureNeetoUI({
+// adaptiveThemes: true }) call is honoured whenever it lands.
 import { configureNeetoUI } from "./unistyles";
 
 configureNeetoUI();

package/src/unistyles.ts

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native-unistyles";
+import { StyleSheet, UnistylesRuntime } from "react-native-unistyles";
 
 import { breakpoints, darkTheme, lightTheme } from "./theme/tokens";
 
@@ -14,6 +14,22 @@ declare module "react-native-unistyles" {
   export interface UnistylesBreakpoints extends AppBreakpoints {}
 }
 
+export type ConfigureNeetoUIOptions = {
+  /**
+   * Follow the device colour scheme, swapping to the dark theme whenever the
+   * OS is in dark mode. Off by default.
+   *
+   * An app that has not designed for dark only half-follows: the surfaces
+   * styled through theme tokens go dark while everything painted from a
+   * literal colour stays light, which reads as dark text on dark
+   * backgrounds, light cards adrift on black, and a dark status bar under a
+   * `dark-content` bar style. Following the OS is therefore something an app
+   * opts into once its own screens are ready, not something the library
+   * decides for it.
+   */
+  adaptiveThemes?: boolean;
+};
+
 let isConfigured = false;
 
 /**
@@ -21,14 +37,46 @@ let isConfigured = false;
  * library root is imported (src/unistyles-init.ts) because Unistyles
  * requires configure() before any module-scope StyleSheet.create;
  * NeetoUIProvider and tests may call it again safely.
+ *
+ * Apps should also call it from their entry point, through the
+ * "@bigbinary/neetoui-rn/unistyles" subpath. Metro's inlineRequires defers a
+ * named import until the expression that uses it, so importing
+ * NeetoUIProvider does not guarantee the library root — and this side
+ * effect — runs before the screen modules a default import pulls in eagerly.
+ *
+ * That ordering is also why an explicit `options` argument is honoured after
+ * the first call: the library root usually wins the race and registers the
+ * defaults, so an app asking for `adaptiveThemes` would otherwise be
+ * silently ignored. Argument-less calls never change an already-applied
+ * mode, which keeps NeetoUIProvider's fallback from clobbering that opt-in.
  */
-export const configureNeetoUI = () => {
-  if (isConfigured) return;
+export const configureNeetoUI = (options?: ConfigureNeetoUIOptions) => {
+  const adaptiveThemes = options?.adaptiveThemes ?? false;
+
+  if (isConfigured) {
+    if (options) applyThemeMode(adaptiveThemes);
+
+    return;
+  }
+
   isConfigured = true;
 
   StyleSheet.configure({
     themes: { light: lightTheme, dark: darkTheme },
     breakpoints,
-    settings: { adaptiveThemes: true },
+    // Unistyles requires exactly one of the two: adaptive themes, or a
+    // starting theme it can resolve on its own.
+    settings: adaptiveThemes
+      ? { adaptiveThemes: true }
+      : { initialTheme: "light" },
   });
 };
+
+const applyThemeMode = (adaptiveThemes: boolean) => {
+  if (UnistylesRuntime.hasAdaptiveThemes === adaptiveThemes) return;
+
+  UnistylesRuntime.setAdaptiveThemes(adaptiveThemes);
+  // Turning adaptive themes off leaves whichever theme the OS last selected
+  // in place, so a device already in dark mode would stay dark.
+  if (!adaptiveThemes) UnistylesRuntime.setTheme("light");
+};

package/src/utils/scale.ts

@@ -1,16 +1,43 @@
-import { Dimensions } from "react-native";
+import { UnistylesRuntime } from "react-native-unistyles";
 
 const GUIDELINE_BASE_WIDTH = 350;
 
-const getShortDimension = () => {
-  const { width, height } = Dimensions.get("window");
+/**
+ * The short screen edge, so a size scales the same in portrait and landscape.
+ * Falls back to the baseline before unistyles has measured (and under the jest
+ * mock, whose runtime reports 0x0), leaving sizes untouched.
+ */
+const shortDimension = ({ width, height }: { width: number; height: number }) =>
+  Math.min(width, height) || GUIDELINE_BASE_WIDTH;
 
-  return Math.min(width, height);
-};
+/** react-native-size-matters' formula, rounded exactly as v2's did. */
+const scale = (screenSize: number, size: number, factor: number) =>
+  Math.round(
+    size + ((screenSize / GUIDELINE_BASE_WIDTH) * size - size) * factor
+  );
 
-const scale = (size: number) =>
-  (getShortDimension() / GUIDELINE_BASE_WIDTH) * size;
+/**
+ * Scales bound to a given screen. Pass `rt.screen` from a unistyles
+ * StyleSheet: reading it is what registers the dependency, so the sheet is
+ * recomputed when the window resizes — rotation, split-screen, foldables,
+ * iPad Slide Over.
+ *
+ *   const styles = StyleSheet.create((theme, rt) => {
+ *     const moderateScale = scaleFor(rt.screen);
+ *
+ *     return { card: { padding: moderateScale(16) } };
+ *   });
+ */
+export const scaleFor =
+  (screen: { width: number; height: number }) =>
+  (size: number, factor = 0.5) =>
+    scale(shortDimension(screen), size, factor);
 
-// Same contract as v2's moderateScale (react-native-size-matters formula, rounded output).
+/**
+ * Screen-independent entry point, for sizes computed outside a stylesheet —
+ * icon props, measured layouts. Reads the runtime on every call, so it is
+ * current whenever the component re-renders, but it cannot subscribe a
+ * stylesheet to resizes: use scaleFor inside StyleSheet.create.
+ */
 export const moderateScale = (size: number, factor = 0.5) =>
-  Math.round(size + (scale(size) - size) * factor);
+  scale(shortDimension(UnistylesRuntime.screen), size, factor);

package/src/types/neeto-icons-rn.d.ts

@@ -1,33 +0,0 @@
-// @bigbinary/neeto-icons-rn ships no TypeScript types (and an exports map
-// whose "." entry is an extensionless directory only the metro resolver
-// accepts). Minimal ambient typing until the icons package ships its own.
-declare module "@bigbinary/neeto-icons-rn" {
-  import { type ComponentType } from "react";
-
-  export type NeetoIconProps = {
-    size?: number;
-    color?: string;
-    strokeWidth?: number;
-  };
-
-  export const Attachment: ComponentType<NeetoIconProps>;
-  export const BookOpen: ComponentType<NeetoIconProps>;
-  export const CannedResponses: ComponentType<NeetoIconProps>;
-  export const ChatBubble: ComponentType<NeetoIconProps>;
-  export const Check: ComponentType<NeetoIconProps>;
-  export const Delete: ComponentType<NeetoIconProps>;
-  export const Down: ComponentType<NeetoIconProps>;
-  export const Edit: ComponentType<NeetoIconProps>;
-  export const Expand: ComponentType<NeetoIconProps>;
-  export const Forward: ComponentType<NeetoIconProps>;
-  export const LeftArrow: ComponentType<NeetoIconProps>;
-  export const Minimize: ComponentType<NeetoIconProps>;
-  export const Notes: ComponentType<NeetoIconProps>;
-  export const Radio: ComponentType<NeetoIconProps>;
-  export const SendPlane: ComponentType<NeetoIconProps>;
-  export const RadioInactive: ComponentType<NeetoIconProps>;
-  export const Checkbox: ComponentType<NeetoIconProps>;
-  export const CheckboxInactive: ComponentType<NeetoIconProps>;
-  export const Search: ComponentType<NeetoIconProps>;
-  export const Close: ComponentType<NeetoIconProps>;
-}