@oxyhq/bloom 0.1.32 → 0.1.34

package/lib/typescript/module/skeleton/index.d.ts

@@ -4,23 +4,38 @@ export declare function Text({ blend, style, }: {
     style?: TextStyle | TextStyle[];
     blend?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+export declare namespace Text {
+    var displayName: string;
+}
 export declare function Circle({ children, size, blend, style, }: {
     children?: React.ReactNode;
     size: number;
     blend?: boolean;
     style?: ViewStyle | ViewStyle[];
 }): import("react/jsx-runtime").JSX.Element;
+export declare namespace Circle {
+    var displayName: string;
+}
 export declare function Pill({ size, blend, style, }: {
     size: number;
     blend?: boolean;
     style?: ViewStyle | ViewStyle[];
 }): import("react/jsx-runtime").JSX.Element;
+export declare namespace Pill {
+    var displayName: string;
+}
 export declare function Col({ children, style, }: {
     children?: React.ReactNode;
     style?: ViewStyle | ViewStyle[];
 }): import("react/jsx-runtime").JSX.Element;
+export declare namespace Col {
+    var displayName: string;
+}
 export declare function Row({ children, style, }: {
     children?: React.ReactNode;
     style?: ViewStyle | ViewStyle[];
 }): import("react/jsx-runtime").JSX.Element;
+export declare namespace Row {
+    var displayName: string;
+}
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/skeleton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAkB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAc,MAAM,cAAc,CAAC;AAiC1F,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,2CA0BA;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAmBA;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAkBA;AAED,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAEA;AAED,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAEA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAkB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAc,MAAM,cAAc,CAAC;AAiC1F,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,2CA0BA;yBAhCe,IAAI;;;AAmCpB,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAmBA;yBA7Be,MAAM;;;AAgCtB,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAkBA;yBA1Be,IAAI;;;AA6BpB,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAEA;yBARe,GAAG;;;AAWnB,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAEA;yBARe,GAAG"}

package/lib/typescript/module/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAKvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA6G3C,eAAO,MAAM,MAAM,4FAAwB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAmH3C,eAAO,MAAM,MAAM,4FAAwB,CAAC"}

package/lib/typescript/module/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAe,MAAM,SAAS,CAAC;AA4L/E,eAAO,MAAM,OAAO,uCAAyB,CAAC;AAG9C,eAAO,MAAM,GAAG,sCAAqB,CAAC;AAGtC,eAAO,MAAM,QAAQ,2CAA0B,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAe,MAAM,SAAS,CAAC;AA4K/E,eAAO,MAAM,OAAO,uCAAyB,CAAC;AAG9C,eAAO,MAAM,GAAG,sCAAqB,CAAC;AAGtC,eAAO,MAAM,QAAQ,2CAA0B,CAAC"}

package/lib/typescript/module/typography/index.d.ts

@@ -1,15 +1,16 @@
+import React from 'react';
 import { type TextProps as RNTextProps } from 'react-native';
 export type TextProps = RNTextProps;
-/**
- * Base text component with theme-aware default color.
- */
-export declare function Text({ children, style, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare const Text: React.MemoExoticComponent<({ children, style, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element>;
 export { Text as Span };
-export declare const H1: ({ style, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element;
-export declare const H2: ({ style, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element;
-export declare const H3: ({ style, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element;
-export declare const H4: ({ style, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element;
-export declare const H5: ({ style, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element;
-export declare const H6: ({ style, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H1: React.FC<RNTextProps>;
+export declare const H2: React.FC<RNTextProps>;
+export declare const H3: React.FC<RNTextProps>;
+export declare const H4: React.FC<RNTextProps>;
+export declare const H5: React.FC<RNTextProps>;
+export declare const H6: React.FC<RNTextProps>;
 export declare function P({ style, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace P {
+    var displayName: string;
+}
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/typography/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,IAAI,WAAW,EAI9B,MAAM,cAAc,CAAC;AAItB,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC;AAEpC;;GAEG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,2CAU3D;AAED,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,CAAC;AAYxB,eAAO,MAAM,EAAE,uBATsC,SAAS,4CASV,CAAC;AACrD,eAAO,MAAM,EAAE,uBAVsC,SAAS,4CAUV,CAAC;AACrD,eAAO,MAAM,EAAE,uBAXsC,SAAS,4CAWV,CAAC;AACrD,eAAO,MAAM,EAAE,uBAZsC,SAAS,4CAYV,CAAC;AACrD,eAAO,MAAM,EAAE,uBAbsC,SAAS,4CAaV,CAAC;AACrD,eAAO,MAAM,EAAE,uBAdsC,SAAS,4CAcV,CAAC;AAErD,wBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,2CAU9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/typography/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAEL,KAAK,SAAS,IAAI,WAAW,EAI9B,MAAM,cAAc,CAAC;AAItB,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC;AAiBpC,eAAO,MAAM,IAAI,2DAZiD,SAAS,6CAYpC,CAAC;AAGxC,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,CAAC;AAYxB,eAAO,MAAM,EAAE,uBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,uBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,uBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,uBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,uBAAqC,CAAC;AAErD,eAAO,MAAM,EAAE,uBAAqC,CAAC;AAGrD,wBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,2CAU9C;yBAVe,CAAC"}

package/lib/typescript/module/utils/lazy-require.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Creates a lazy-loaded module getter that caches the result.
+ *
+ * Safely handles environments where `require` is not defined (e.g. Vite/browser ESM)
+ * and returns `null` when the module is not installed. The result is cached after the
+ * first call so subsequent calls are zero-cost.
+ *
+ * @example
+ * ```ts
+ * const getSvg = lazyRequire<typeof import('react-native-svg')>('react-native-svg');
+ * const svg = getSvg(); // SvgModuleType | null
+ * ```
+ */
+export declare function lazyRequire<T>(moduleName: string): () => T | null;
+//# sourceMappingURL=lazy-require.d.ts.map

package/lib/typescript/module/utils/lazy-require.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-require.d.ts","sourceRoot":"","sources":["../../../../src/utils/lazy-require.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAiBjE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/BloomThemeProvider.test.tsx

@@ -72,8 +72,8 @@ describe('BloomThemeProvider', () => {
         <ThemeDisplay />
       </BloomThemeProvider>,
     );
-    // Blue preset hex is #1d9bf0 (case may vary)
-    expect(getByTestId('primary').props.children.toLowerCase()).toBe('#1d9bf0');
+    // Blue preset primary is HSL(205, 87%, 53%) derived from --primary CSS var
+    expect(getByTestId('primary').props.children).toBe('hsl(205, 87%, 53%)');
   });
 
   it('generates different background colors for light and dark modes', () => {
@@ -135,7 +135,7 @@ describe('useThemeColor', () => {
         <ColorDisplay colorKey="primary" />
       </BloomThemeProvider>,
     );
-    expect(getByTestId('color').props.children).toBe('#005c67');
+    expect(getByTestId('color').props.children).toBe('hsl(185, 100%, 20%)');
   });
 });
 

package/src/admonition/index.tsx

@@ -44,6 +44,7 @@ export function Icon() {
 
   return <IconComponent fill={fillMap[type]} size="md" />;
 }
+Icon.displayName = 'Admonition.Icon';
 
 export function Content({
   children,
@@ -58,6 +59,7 @@ export function Content({
     </View>
   );
 }
+Content.displayName = 'Admonition.Content';
 
 export function Text({
   children,
@@ -72,6 +74,7 @@ export function Text({
     </BaseText>
   );
 }
+Text.displayName = 'Admonition.Text';
 
 export function Button({
   children,
@@ -83,6 +86,7 @@ export function Button({
     </BaseButton>
   );
 }
+Button.displayName = 'Admonition.Button';
 
 export function Row({
   children,
@@ -97,6 +101,7 @@ export function Row({
     </View>
   );
 }
+Row.displayName = 'Admonition.Row';
 
 export function Outer({
   children,
@@ -134,6 +139,7 @@ export function Outer({
     </AdmonitionContext.Provider>
   );
 }
+Outer.displayName = 'Admonition.Outer';
 
 /**
  * Simple all-in-one Admonition component for common use cases.
@@ -159,6 +165,7 @@ export function Admonition({
     </Outer>
   );
 }
+Admonition.displayName = 'Admonition';
 
 const styles = StyleSheet.create({
   outer: {

package/src/avatar/Avatar.tsx

@@ -3,6 +3,7 @@ import { View, Image, StyleSheet, TouchableOpacity } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { useImageResolver } from '../image-resolver/context';
+import { lazyRequire } from '../utils/lazy-require';
 import { useAvatarPlaceholder } from './placeholder-context';
 import type { AvatarProps } from './types';
 
@@ -22,25 +23,7 @@ let clipIdCounter = 0;
 // Lazy-loaded SVG components for squircle shape.
 // Returns null if react-native-svg is not installed.
 type SvgModuleType = typeof import('react-native-svg');
-let svgModule: SvgModuleType | null = null;
-let svgModuleResolved = false;
-
-function getSvgModule(): SvgModuleType | null {
-  if (!svgModuleResolved) {
-    svgModuleResolved = true;
-    try {
-      // Guard for ESM environments (Vite/browser) where require is not defined.
-      // In React Native (Metro), require is always available.
-      if (typeof require !== 'undefined') {
-        const moduleName = 'react-native-svg';
-        svgModule = require(moduleName);
-      }
-    } catch {
-      svgModule = null;
-    }
-  }
-  return svgModule;
-}
+const getSvgModule = lazyRequire<SvgModuleType>('react-native-svg');
 
 function SquircleImage({
   uri,

package/src/bottom-sheet/index.tsx

@@ -176,11 +176,14 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
         }
     }, []);
 
-    // Apply web scrollbar styles when colors change
+    // Apply web scrollbar styles when colors change; clean up on unmount
     useEffect(() => {
         if (Platform.OS === 'web') {
             createWebScrollbarStyle(colors.border);
         }
+        return () => {
+            removeWebScrollbarStyle();
+        };
     }, [colors.border]);
 
     const present = useCallback(() => {
@@ -448,18 +451,19 @@ const styles = StyleSheet.create({
 const createWebScrollbarStyle = (borderColor: string) => {
     if (Platform.OS !== 'web' || typeof document === 'undefined') return;
 
-    const styleId = 'bottom-sheet-scrollbar-style';
-    let styleElement = document.getElementById(styleId) as HTMLStyleElement;
+    let styleElement = document.getElementById(SCROLLBAR_STYLE_ID) as HTMLStyleElement | null;
 
     if (!styleElement) {
         styleElement = document.createElement('style');
-        styleElement.id = styleId;
+        styleElement.id = SCROLLBAR_STYLE_ID;
         document.head.appendChild(styleElement);
     }
 
-    // Use theme border color for scrollbar
+    // Derive a slightly darker scrollbar hover color from the border color
     const scrollbarColor = borderColor;
-    const scrollbarHoverColor = borderColor === '#E5E5EA' ? '#C7C7CC' : '#555';
+    const scrollbarHoverColor = borderColor.startsWith('hsl')
+        ? borderColor.replace(/\)$/, ' / 0.7)')  // add alpha for hover
+        : '#888';
 
     styleElement.textContent = `
         .bottom-sheet-scrollview::-webkit-scrollbar {
@@ -479,5 +483,13 @@ const createWebScrollbarStyle = (borderColor: string) => {
     `;
 };
 
+const SCROLLBAR_STYLE_ID = 'bottom-sheet-scrollbar-style';
+
+/** Remove the injected scrollbar <style> tag on unmount. */
+const removeWebScrollbarStyle = () => {
+    if (Platform.OS !== 'web' || typeof document === 'undefined') return;
+    document.getElementById(SCROLLBAR_STYLE_ID)?.remove();
+};
+
 export default BottomSheet;
 export { BottomSheet };

package/src/button/Button.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useMemo, useRef, memo } from 'react';
+import React, { useMemo, memo } from 'react';
 import { Pressable, Text, Platform, Animated, type ViewStyle, type TextStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
-import { animation } from '../styles/tokens';
+import { usePressAnimation } from '../hooks/usePressAnimation';
 import type { ButtonProps } from './types';
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from './types';
@@ -51,26 +51,10 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   className,
 }) => {
   const theme = useTheme();
-  const scaleAnim = useRef(new Animated.Value(1)).current;
   const hasScaleFeedback = SCALE_VARIANTS.has(variant);
-
-  const onPressIn = useCallback(() => {
-    if (!hasScaleFeedback) return;
-    Animated.spring(scaleAnim, {
-      toValue: PRESS_SCALE,
-      useNativeDriver: true,
-      ...animation.spring.snappy,
-    }).start();
-  }, [scaleAnim, hasScaleFeedback]);
-
-  const onPressOut = useCallback(() => {
-    if (!hasScaleFeedback) return;
-    Animated.spring(scaleAnim, {
-      toValue: 1,
-      useNativeDriver: true,
-      ...animation.spring.gentle,
-    }).start();
-  }, [scaleAnim, hasScaleFeedback]);
+  const { scaleAnim, onPressIn, onPressOut } = usePressAnimation(
+    hasScaleFeedback ? PRESS_SCALE : undefined,
+  );
 
   const baseStyles = useMemo((): ViewStyle => {
     const sizeConfig = SIZE_CONFIG[size];
@@ -155,7 +139,7 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   return (
     <Animated.View style={hasScaleFeedback ? { transform: [{ scale: scaleAnim }] } : undefined}>
       <Pressable
-        {...(resolvedClassName ? { className: resolvedClassName } as any : {})}
+        {...(resolvedClassName ? { className: resolvedClassName } as Record<string, string> : {})}
         style={({ pressed }) => [
           baseStyles,
           disabled && { opacity: 0.5 },

package/src/chip/Chip.tsx

@@ -1,8 +1,8 @@
-import React, { memo, useMemo, useRef, useCallback } from 'react';
+import React, { memo, useMemo } from 'react';
 import { View, Text, Pressable, Animated, type ViewStyle, type TextStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
-import { animation, borderRadius, space } from '../styles/tokens';
+import { usePressAnimation } from '../hooks/usePressAnimation';
 import type { ChipProps, ChipColor, ChipVariant } from './types';
 
 const SIZE_CONFIG = {
@@ -56,26 +56,10 @@ const ChipComponent: React.FC<ChipProps> = ({
   testID,
 }) => {
   const theme = useTheme();
-  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const { scaleAnim, onPressIn, onPressOut } = usePressAnimation(PRESS_SCALE);
   const colors = useChipColors(color, variant, selected, theme);
   const sizeConfig = SIZE_CONFIG[size];
 
-  const onPressIn = useCallback(() => {
-    Animated.spring(scaleAnim, {
-      toValue: PRESS_SCALE,
-      useNativeDriver: true,
-      ...animation.spring.snappy,
-    }).start();
-  }, [scaleAnim]);
-
-  const onPressOut = useCallback(() => {
-    Animated.spring(scaleAnim, {
-      toValue: 1,
-      useNativeDriver: true,
-      ...animation.spring.gentle,
-    }).start();
-  }, [scaleAnim]);
-
   const containerStyle = useMemo((): ViewStyle => ({
     height: sizeConfig.height,
     borderRadius: sizeConfig.height / 2,

package/src/collapsible/Collapsible.tsx

@@ -1,5 +1,5 @@
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { View, Text, TouchableOpacity, Animated, LayoutAnimation, Platform, UIManager } from 'react-native';
+import React, { memo, useCallback, useRef, useState } from 'react';
+import { View, Text, TouchableOpacity, Animated, LayoutAnimation, Platform, UIManager, StyleSheet } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { animation } from '../styles/tokens';
@@ -25,23 +25,25 @@ const CollapsibleComponent: React.FC<CollapsibleProps> = ({
   const theme = useTheme();
   const chevronAnim = useRef(new Animated.Value(defaultOpen ? 1 : 0)).current;
 
-  useEffect(() => {
+  const handleToggle = useCallback(() => {
+    const nextOpen = !isOpen;
+
+    // Animate chevron rotation in the event handler, not via useEffect
     Animated.spring(chevronAnim, {
-      toValue: isOpen ? 1 : 0,
+      toValue: nextOpen ? 1 : 0,
       useNativeDriver: true,
       ...animation.spring.gentle,
     }).start();
-  }, [isOpen, chevronAnim]);
 
-  const handleToggle = useCallback(() => {
     LayoutAnimation.configureNext({
       duration: animation.duration.normal,
       update: { type: LayoutAnimation.Types.easeInEaseOut },
       create: { type: LayoutAnimation.Types.easeInEaseOut, property: LayoutAnimation.Properties.opacity },
       delete: { type: LayoutAnimation.Types.easeInEaseOut, property: LayoutAnimation.Properties.opacity },
     });
-    setIsOpen((prev) => !prev);
-  }, []);
+
+    setIsOpen(nextOpen);
+  }, [isOpen, chevronAnim]);
 
   const chevronRotation = chevronAnim.interpolate({
     inputRange: [0, 1],
@@ -55,32 +57,22 @@ const CollapsibleComponent: React.FC<CollapsibleProps> = ({
         activeOpacity={0.7}
         accessibilityRole="button"
         accessibilityState={{ expanded: isOpen }}
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          paddingVertical: 12,
-          gap: 8,
-        }}
+        style={styles.trigger}
       >
         {chevronIcon ?? (
           <Animated.Text
-            style={{
-              fontSize: 16,
-              color: theme.colors.textSecondary,
-              transform: [{ rotate: chevronRotation }],
-            }}
+            style={[
+              styles.chevron,
+              { color: theme.colors.textSecondary, transform: [{ rotate: chevronRotation }] },
+            ]}
           >
             ›
           </Animated.Text>
         )}
         <Text
           style={[
-            {
-              fontSize: 16,
-              fontWeight: '600',
-              color: theme.colors.text,
-              flex: 1,
-            },
+            styles.title,
+            { color: theme.colors.text },
             titleStyle,
           ]}
         >
@@ -94,3 +86,20 @@ const CollapsibleComponent: React.FC<CollapsibleProps> = ({
 
 export const Collapsible = memo(CollapsibleComponent);
 Collapsible.displayName = 'Collapsible';
+
+const styles = StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    gap: 8,
+  },
+  chevron: {
+    fontSize: 16,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    flex: 1,
+  },
+});

package/src/dialog/Dialog.tsx

@@ -72,6 +72,8 @@ export function Outer({
     [],
   );
 
+  const renderHandle = useCallback(() => null, []);
+
   return (
     <BottomSheetModal
       ref={ref}
@@ -84,12 +86,7 @@ export function Outer({
         borderTopLeftRadius: 20,
         borderTopRightRadius: 20,
       }}
-      handleIndicatorStyle={{
-        backgroundColor: theme.colors.text,
-        width: 35,
-        height: 5,
-        opacity: 0.5,
-      }}
+      handleComponent={renderHandle}
       backdropComponent={renderBackdrop}
       onDismiss={handleDismiss}
       style={{ maxWidth: 500, margin: 'auto' }}

package/src/fill/index.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
 
-export function Fill({
+const FillComponent = function Fill({
   children,
   style,
 }: {
@@ -13,7 +13,10 @@ export function Fill({
       {children}
     </View>
   );
-}
+};
+
+export const Fill = memo(FillComponent);
+Fill.displayName = 'Fill';
 
 const fillStyles = StyleSheet.create({
   base: {

package/src/grid/index.tsx

@@ -1,10 +1,10 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, memo, useContext, useMemo } from 'react';
 import { View, type ViewStyle } from 'react-native';
 
 const GridContext = createContext({ gap: 0 });
 GridContext.displayName = 'GridContext';
 
-export function Row({
+const RowComponent = function Row({
   children,
   gap = 0,
   style,
@@ -29,9 +29,12 @@ export function Row({
       </View>
     </GridContext.Provider>
   );
-}
+};
 
-export function Col({
+export const Row = memo(RowComponent);
+Row.displayName = 'Row';
+
+const ColComponent = function Col({
   children,
   width = 1,
   style,
@@ -55,4 +58,7 @@ export function Col({
       {children}
     </View>
   );
-}
+};
+
+export const Col = memo(ColComponent);
+Col.displayName = 'Col';