@vvedantb/native-ui 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar, AI chat parts and the family app marks.",
   "type": "module",

package/src/brand/AppIcons.tsx

@@ -1,5 +1,5 @@
-import { Platform, type StyleProp, type ViewStyle } from "react-native";
-import Svg, { G, Path } from "react-native-svg";
+import { Platform, type ViewProps } from "react-native";
+import Svg, { G, Path, type GProps } from "react-native-svg";
 import { svgA11yProps } from "../svgA11y";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
@@ -26,7 +26,7 @@ export type AppIconProps = {
   align?: "center" | "start";
   /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
-  style?: StyleProp<ViewStyle>;
+  style?: ViewProps["style"];
 };
 
 export type AppIconComponent = ((props: AppIconProps) => React.JSX.Element) & {
@@ -54,7 +54,7 @@ function createAppIcon(app: AppName, displayName: string): AppIconComponent {
       stroke === undefined
         ? markStrokeWidth(app)
         : stroke * (viewBoxSide(app) / size);
-    const glyphProps =
+    const glyphProps: GProps =
       kind === "fill"
         ? { fill }
         : {

package/src/brand/AppMark.tsx

@@ -1,5 +1,5 @@
-import { Platform, type StyleProp, type ViewStyle } from "react-native";
-import Svg, { G, Path, Rect } from "react-native-svg";
+import { Platform, type ViewProps } from "react-native";
+import Svg, { G, Path, Rect, type GProps } from "react-native-svg";
 import { svgA11yProps } from "../svgA11y";
 import { APP_ICONS } from "./AppIcons";
 import {
@@ -23,7 +23,7 @@ export type AppMarkProps = {
   title?: string;
   /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
-  style?: StyleProp<ViewStyle>;
+  style?: ViewProps["style"];
 };
 
 const TILE_TONES = {
@@ -50,7 +50,7 @@ export function AppMark({
   }
   const { kind, paths } = APP_MARKS[app];
   const tone = TILE_TONES[variant];
-  const glyphProps =
+  const glyphProps: GProps =
     kind === "fill"
       ? { fill: tone.fg }
       : {

package/src/brand/GoogleMark.tsx

@@ -1,4 +1,4 @@
-import { Platform, type StyleProp, type ViewStyle } from "react-native";
+import { Platform, type ViewProps } from "react-native";
 import Svg, { Path } from "react-native-svg";
 import { svgA11yProps } from "../svgA11y";
 
@@ -9,7 +9,7 @@ export type GoogleMarkProps = {
   title?: string;
   /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
-  style?: StyleProp<ViewStyle>;
+  style?: ViewProps["style"];
 };
 
 /** The four paths of the Google "G" on the 24 grid, each in its brand colour. */

package/src/floating.ts

@@ -1,4 +1,4 @@
-import { Platform, type ViewStyle } from "react-native";
+import { Platform } from "react-native";
 import { tokens } from "./tokens";
 
 export const FLOATING_INSET = tokens.spacing.unit;
@@ -14,7 +14,21 @@ export const FLOATING_PILL_RADIUS = tokens.radius.pill;
 
 const FLOATING_BOX_SHADOW = "0px 8px 24px rgba(10, 10, 10, 0.12)";
 
-export const floatingShadow: ViewStyle =
+/**
+ * Only the shadow keys, not `ViewStyle`: an Expo-widened `ViewStyle`
+ * (`position: "fixed"`, `backgroundImage`) is not assignable to a React
+ * Native 0.88 View `style`. A plain inferred type would be `{}` and lose
+ * `floatingShadow.shadowColor` and the rest for callers.
+ */
+type FloatingShadowStyle = {
+  shadowColor?: string;
+  shadowOffset?: { width: number; height: number };
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  boxShadow?: string;
+};
+
+export const floatingShadow: FloatingShadowStyle =
   Platform.select({
     ios: {
       shadowColor: "#0a0a0a",

package/src/primitives/switch.tsx

@@ -1,6 +1,6 @@
 import * as SwitchPrimitives from "@rn-primitives/switch";
 import * as React from "react";
-import { Platform, type ViewStyle } from "react-native";
+import { Platform, type ViewProps, type ViewStyle } from "react-native";
 import { cn } from "../cn";
 
 type SwitchProps = React.ComponentPropsWithoutRef<
@@ -13,7 +13,7 @@ type SwitchProps = React.ComponentPropsWithoutRef<
    * which spreads `style`, so these are the only styles applied there.
    */
   trackStyle?: ViewStyle;
-  thumbStyle?: ViewStyle;
+  thumbStyle?: ViewProps["style"];
 };
 
 const Switch = React.forwardRef<