@storybook/react-native-ui-lite 9.0.0-beta.15 → 9.0.0-rc.5

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as _storybook_react_native_theming from '@storybook/react-native-theming';
-import { useTheme, Theme } from '@storybook/react-native-theming';
+import { useTheme } from '@storybook/react-native-theming';
 import * as react_native from 'react-native';
 import { View } from 'react-native';
-import React, { FC, ComponentProps, ReactNode, ReactElement } from 'react';
-import { Item, ExpandAction, CombinedDataset, Selection, Storage } from '@storybook/react-native-ui-common';
+import React, { FC, ComponentProps, ReactNode } from 'react';
+import { Item, ExpandAction, CombinedDataset, Selection, SBUI } from '@storybook/react-native-ui-common';
 import { State, StoriesHash } from 'storybook/internal/manager-api';
 import { API_LoadedRefData, API_IndexHash } from 'storybook/internal/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -113,37 +113,44 @@ declare global {
 }
 
 interface SBBaseType {
-    required?: boolean;
-    raw?: string;
+  required?: boolean;
+  raw?: string;
 }
 type SBScalarType = SBBaseType & {
-    name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
+  name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
 };
 type SBArrayType = SBBaseType & {
-    name: 'array';
-    value: SBType;
+  name: 'array';
+  value: SBType;
 };
 type SBObjectType = SBBaseType & {
-    name: 'object';
-    value: Record<string, SBType>;
+  name: 'object';
+  value: Record<string, SBType>;
 };
 type SBEnumType = SBBaseType & {
-    name: 'enum';
-    value: (string | number)[];
+  name: 'enum';
+  value: (string | number)[];
 };
 type SBIntersectionType = SBBaseType & {
-    name: 'intersection';
-    value: SBType[];
+  name: 'intersection';
+  value: SBType[];
 };
 type SBUnionType = SBBaseType & {
-    name: 'union';
-    value: SBType[];
+  name: 'union';
+  value: SBType[];
 };
 type SBOtherType = SBBaseType & {
-    name: 'other';
-    value: string;
+  name: 'other';
+  value: string;
 };
-type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
+type SBType =
+  | SBScalarType
+  | SBEnumType
+  | SBArrayType
+  | SBObjectType
+  | SBIntersectionType
+  | SBUnionType
+  | SBOtherType;
 
 type StoryId = string;
 type ComponentId = string;
@@ -151,233 +158,274 @@ type ComponentTitle = string;
 type StoryName = string;
 type Tag = string;
 interface StoryIdentifier {
-    componentId: ComponentId;
-    title: ComponentTitle;
-    /** @deprecated */
-    kind: ComponentTitle;
-    id: StoryId;
-    name: StoryName;
-    /** @deprecated */
-    story: StoryName;
-    tags: Tag[];
+  componentId: ComponentId;
+  title: ComponentTitle;
+  /** @deprecated */
+  kind: ComponentTitle;
+  id: StoryId;
+  name: StoryName;
+  /** @deprecated */
+  story: StoryName;
+  tags: Tag[];
 }
 interface Parameters {
-    [name: string]: any;
+  [name: string]: any;
 }
-type ControlType = 'object' | 'boolean' | 'check' | 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select' | 'number' | 'range' | 'file' | 'color' | 'date' | 'text';
-type ConditionalTest = {
-    truthy?: boolean;
-} | {
-    exists: boolean;
-} | {
-    eq: any;
-} | {
-    neq: any;
-};
-type ConditionalValue = {
-    arg: string;
-} | {
-    global: string;
-};
+type ControlType =
+  | 'object'
+  | 'boolean'
+  | 'check'
+  | 'inline-check'
+  | 'radio'
+  | 'inline-radio'
+  | 'select'
+  | 'multi-select'
+  | 'number'
+  | 'range'
+  | 'file'
+  | 'color'
+  | 'date'
+  | 'text';
+type ConditionalTest =
+  | {
+      truthy?: boolean;
+    }
+  | {
+      exists: boolean;
+    }
+  | {
+      eq: any;
+    }
+  | {
+      neq: any;
+    };
+type ConditionalValue =
+  | {
+      arg: string;
+    }
+  | {
+      global: string;
+    };
 type Conditional = ConditionalValue & ConditionalTest;
 interface ControlBase {
-    [key: string]: any;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controltype
-     */
-    type?: ControlType;
-    disable?: boolean;
+  [key: string]: any;
+  /**
+   * @see https://storybook.js.org/docs/api/arg-types#controltype
+   */
+  type?: ControlType;
+  disable?: boolean;
 }
 interface Report {
-    type: string;
-    version?: number;
-    result: unknown;
-    status: 'failed' | 'passed' | 'warning';
+  type: string;
+  version?: number;
+  result: unknown;
+  status: 'failed' | 'passed' | 'warning';
 }
 interface ReportingAPI {
-    reports: Report[];
-    addReport: (report: Report) => void;
+  reports: Report[];
+  addReport: (report: Report) => void;
 }
-type Control = ControlType | false | (ControlBase & (ControlBase | {
-    type: 'color';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlpresetcolors
-     */
-    presetColors?: string[];
-} | {
-    type: 'file';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlaccept
-     */
-    accept?: string;
-} | {
-    type: 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controllabels
-     */
-    labels?: {
-        [options: string]: string;
-    };
-} | {
-    type: 'number' | 'range';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlmax
-     */
-    max?: number;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlmin
-     */
-    min?: number;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlstep
-     */
-    step?: number;
-}));
+type Control =
+  | ControlType
+  | false
+  | (ControlBase &
+      (
+        | ControlBase
+        | {
+            type: 'color';
+            /**
+             * @see https://storybook.js.org/docs/api/arg-types#controlpresetcolors
+             */
+            presetColors?: string[];
+          }
+        | {
+            type: 'file';
+            /**
+             * @see https://storybook.js.org/docs/api/arg-types#controlaccept
+             */
+            accept?: string;
+          }
+        | {
+            type: 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select';
+            /**
+             * @see https://storybook.js.org/docs/api/arg-types#controllabels
+             */
+            labels?: {
+              [options: string]: string;
+            };
+          }
+        | {
+            type: 'number' | 'range';
+            /**
+             * @see https://storybook.js.org/docs/api/arg-types#controlmax
+             */
+            max?: number;
+            /**
+             * @see https://storybook.js.org/docs/api/arg-types#controlmin
+             */
+            min?: number;
+            /**
+             * @see https://storybook.js.org/docs/api/arg-types#controlstep
+             */
+            step?: number;
+          }
+      ));
 interface InputType {
+  /**
+   * @see https://storybook.js.org/docs/api/arg-types#control
+   */
+  control?: Control;
+  /**
+   * @see https://storybook.js.org/docs/api/arg-types#description
+   */
+  description?: string;
+  /**
+   * @see https://storybook.js.org/docs/api/arg-types#if
+   */
+  if?: Conditional;
+  /**
+   * @see https://storybook.js.org/docs/api/arg-types#mapping
+   */
+  mapping?: {
+    [key: string]: any;
+  };
+  /**
+   * @see https://storybook.js.org/docs/api/arg-types#name
+   */
+  name?: string;
+  /**
+   * @see https://storybook.js.org/docs/api/arg-types#options
+   */
+  options?: readonly any[];
+  /**
+   * @see https://storybook.js.org/docs/api/arg-types#table
+   */
+  table?: {
+    [key: string]: unknown;
     /**
-     * @see https://storybook.js.org/docs/api/arg-types#control
-     */
-    control?: Control;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#description
-     */
-    description?: string;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#if
+     * @see https://storybook.js.org/docs/api/arg-types#tablecategory
      */
-    if?: Conditional;
+    category?: string;
     /**
-     * @see https://storybook.js.org/docs/api/arg-types#mapping
+     * @see https://storybook.js.org/docs/api/arg-types#tabledefaultvalue
      */
-    mapping?: {
-        [key: string]: any;
+    defaultValue?: {
+      summary?: string;
+      detail?: string;
     };
     /**
-     * @see https://storybook.js.org/docs/api/arg-types#name
+     * @see https://storybook.js.org/docs/api/arg-types#tabledisable
      */
-    name?: string;
+    disable?: boolean;
     /**
-     * @see https://storybook.js.org/docs/api/arg-types#options
+     * @see https://storybook.js.org/docs/api/arg-types#tablesubcategory
      */
-    options?: readonly any[];
+    subcategory?: string;
     /**
-     * @see https://storybook.js.org/docs/api/arg-types#table
+     * @see https://storybook.js.org/docs/api/arg-types#tabletype
      */
-    table?: {
-        [key: string]: unknown;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tablecategory
-         */
-        category?: string;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tabledefaultvalue
-         */
-        defaultValue?: {
-            summary?: string;
-            detail?: string;
-        };
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tabledisable
-         */
-        disable?: boolean;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tablesubcategory
-         */
-        subcategory?: string;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tabletype
-         */
-        type?: {
-            summary?: string;
-            detail?: string;
-        };
+    type?: {
+      summary?: string;
+      detail?: string;
     };
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#type
-     */
-    type?: SBType | SBScalarType['name'];
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#defaultvalue
-     *
-     * @deprecated Use `table.defaultValue.summary` instead.
-     */
-    defaultValue?: any;
-    [key: string]: any;
+  };
+  /**
+   * @see https://storybook.js.org/docs/api/arg-types#type
+   */
+  type?: SBType | SBScalarType['name'];
+  /**
+   * @see https://storybook.js.org/docs/api/arg-types#defaultvalue
+   *
+   * @deprecated Use `table.defaultValue.summary` instead.
+   */
+  defaultValue?: any;
+  [key: string]: any;
 }
 interface StrictInputType extends InputType {
-    name: string;
-    type?: SBType;
+  name: string;
+  type?: SBType;
 }
 interface Args {
-    [name: string]: any;
+  [name: string]: any;
 }
 type StrictArgTypes<TArgs = Args> = {
-    [name in keyof TArgs]: StrictInputType;
+  [name in keyof TArgs]: StrictInputType;
 };
 interface Globals {
-    [name: string]: any;
+  [name: string]: any;
 }
 interface Renderer {
-    /** What is the type of the `component` annotation in this renderer? */
-    component: unknown;
-    /** What does the story function return in this renderer? */
-    storyResult: unknown;
-    /** What type of element does this renderer render to? */
-    canvasElement: unknown;
-    mount(): Promise<Canvas>;
-    T?: unknown;
+  /** What is the type of the `component` annotation in this renderer? */
+  component: unknown;
+  /** What does the story function return in this renderer? */
+  storyResult: unknown;
+  /** What type of element does this renderer render to? */
+  canvasElement: unknown;
+  mount(): Promise<Canvas>;
+  T?: unknown;
 }
-interface StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryIdentifier {
-    component?: (TRenderer & {
-        T: any;
-    })['component'];
-    subcomponents?: Record<string, (TRenderer & {
-        T: any;
-    })['component']>;
-    parameters: Parameters;
-    initialArgs: TArgs;
-    argTypes: StrictArgTypes<TArgs>;
+interface StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Args>
+  extends StoryIdentifier {
+  component?: (TRenderer & {
+    T: any;
+  })['component'];
+  subcomponents?: Record<
+    string,
+    (TRenderer & {
+      T: any;
+    })['component']
+  >;
+  parameters: Parameters;
+  initialArgs: TArgs;
+  argTypes: StrictArgTypes<TArgs>;
 }
 interface StoryContextUpdate<TArgs = Args> {
-    args?: TArgs;
-    globals?: Globals;
-    [key: string]: any;
+  args?: TArgs;
+  globals?: Globals;
+  [key: string]: any;
 }
 type ViewMode = 'story' | 'docs';
-interface Canvas {
-}
-interface StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryContextForEnhancers<TRenderer, TArgs>, Required<StoryContextUpdate<TArgs>> {
-    loaded: Record<string, any>;
-    abortSignal: AbortSignal;
-    canvasElement: TRenderer['canvasElement'];
-    hooks: unknown;
-    originalStoryFn: StoryFn<TRenderer>;
-    viewMode: ViewMode;
-    step: StepFunction<TRenderer, TArgs>;
-    context: this;
-    canvas: Canvas;
-    mount: TRenderer['mount'];
-    reporting: ReportingAPI;
+interface Canvas {}
+interface StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args>
+  extends StoryContextForEnhancers<TRenderer, TArgs>,
+    Required<StoryContextUpdate<TArgs>> {
+  loaded: Record<string, any>;
+  abortSignal: AbortSignal;
+  canvasElement: TRenderer['canvasElement'];
+  hooks: unknown;
+  originalStoryFn: StoryFn<TRenderer>;
+  viewMode: ViewMode;
+  step: StepFunction<TRenderer, TArgs>;
+  context: this;
+  canvas: Canvas;
+  mount: TRenderer['mount'];
+  reporting: ReportingAPI;
 }
 /** @deprecated Use {@link StoryContext} instead. */
-interface PlayFunctionContext<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryContext<TRenderer, TArgs> {
-}
+interface PlayFunctionContext<TRenderer extends Renderer = Renderer, TArgs = Args>
+  extends StoryContext<TRenderer, TArgs> {}
 type StepLabel = string;
-type StepFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>) => Promise<void> | void;
-type PlayFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void> | void;
-type LegacyStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
-type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: TArgs, context: StoryContext<TRenderer, TArgs>) => (TRenderer & {
-    T: TArgs;
+type StepFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (
+  label: StepLabel,
+  play: PlayFunction<TRenderer, TArgs>
+) => Promise<void> | void;
+type PlayFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (
+  context: PlayFunctionContext<TRenderer, TArgs>
+) => Promise<void> | void;
+type LegacyStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (
+  context: StoryContext<TRenderer, TArgs>
+) => TRenderer['storyResult'];
+type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (
+  args: TArgs,
+  context: StoryContext<TRenderer, TArgs>
+) => (TRenderer & {
+  T: TArgs;
 })['storyResult'];
-type StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyStoryFn<TRenderer, TArgs> | ArgsStoryFn<TRenderer, TArgs>;
+type StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> =
+  | LegacyStoryFn<TRenderer, TArgs>
+  | ArgsStoryFn<TRenderer, TArgs>;
 
-declare const LiteUI: ({ storage, theme, storyHash, story, children, }: {
-    storage: Storage;
-    theme: Theme;
-    storyHash: API_IndexHash | undefined;
-    story?: StoryContext<ReactRenderer, Args>;
-    children: ReactNode | ReactNode[];
-}) => ReactElement;
+declare const LiteUI: SBUI;
 declare const Layout: ({ storyHash, story, children, }: {
     storyHash: API_IndexHash | undefined;
     story?: StoryContext<ReactRenderer, Args>;

package/dist/index.js

@@ -662,6 +662,7 @@ var Tree = import_react4.default.memo(function Tree2({ isMain, refId, data, stat
   }, [data]);
   const collapsedItems = (0, import_react4.useMemo)(
     () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [singleStoryComponentIds]
   );
@@ -1372,6 +1373,55 @@ var MobileAddonsPanel = (0, import_react12.forwardRef)(
   ({ storyId }, ref) => {
     const theme = (0, import_react_native_theming8.useTheme)();
     const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react12.useState)(false);
+    const { height } = (0, import_react_native6.useWindowDimensions)();
+    const panelHeight = (0, import_react_native6.useAnimatedValue)(height / 2);
+    const positionBottomAnimation = (0, import_react_native6.useAnimatedValue)(0);
+    (0, import_react12.useEffect)(() => {
+      const handleKeyboardShow = ({ endCoordinates, duration, easing }) => {
+        import_react_native6.Animated.parallel([
+          import_react_native6.Animated.timing(positionBottomAnimation, {
+            toValue: -endCoordinates.height,
+            // Negative to move up
+            duration,
+            useNativeDriver: false,
+            easing: import_react_native6.Easing[easing] || import_react_native6.Easing.out(import_react_native6.Easing.ease)
+          }),
+          import_react_native6.Animated.timing(panelHeight, {
+            toValue: (height - endCoordinates.height) / 2,
+            duration: duration + 250,
+            useNativeDriver: false,
+            easing: import_react_native6.Easing[easing] || import_react_native6.Easing.out(import_react_native6.Easing.ease)
+          })
+        ]).start();
+      };
+      const handleKeyboardHide = ({ duration, easing }) => {
+        import_react_native6.Animated.parallel([
+          import_react_native6.Animated.timing(positionBottomAnimation, {
+            toValue: 0,
+            // Back to original position
+            duration,
+            useNativeDriver: false,
+            easing: import_react_native6.Easing[easing] || import_react_native6.Easing.out(import_react_native6.Easing.ease)
+          }),
+          import_react_native6.Animated.timing(panelHeight, {
+            toValue: height / 2,
+            duration,
+            useNativeDriver: false,
+            easing: import_react_native6.Easing[easing] || import_react_native6.Easing.out(import_react_native6.Easing.ease)
+          })
+        ]).start();
+      };
+      const showSubscription = import_react_native6.Keyboard.addListener("keyboardDidShow", handleKeyboardShow);
+      const willShowSubscription = import_react_native6.Keyboard.addListener("keyboardWillShow", handleKeyboardShow);
+      const hideSubscription = import_react_native6.Keyboard.addListener("keyboardWillHide", handleKeyboardHide);
+      const didHideSubscription = import_react_native6.Keyboard.addListener("keyboardDidHide", handleKeyboardHide);
+      return () => {
+        showSubscription.remove();
+        willShowSubscription.remove();
+        hideSubscription.remove();
+        didHideSubscription.remove();
+      };
+    }, [height, panelHeight, positionBottomAnimation]);
     (0, import_react12.useImperativeHandle)(ref, () => ({
       setAddonsPanelOpen: (open) => {
         if (open) {
@@ -1381,34 +1431,50 @@ var MobileAddonsPanel = (0, import_react12.forwardRef)(
         }
       }
     }));
+    if (!mobileMenuOpen) {
+      return null;
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_native6.Modal,
+      import_react_native6.Animated.View,
       {
-        visible: mobileMenuOpen,
-        onRequestClose: () => setMobileMenuOpen(false),
-        transparent: true,
-        animationType: "slide",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native6.KeyboardAvoidingView, { behavior: "height", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native6.SafeAreaView, { style: { justifyContent: "flex-end", flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native6.View,
+        style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: panelHeight,
+          transform: [{ translateY: positionBottomAnimation }]
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_react_native6.SafeAreaView,
           {
             style: {
-              height: "50%",
-              backgroundColor: theme.background.content,
-              paddingTop: 10,
-              borderTopColor: theme.appBorderColor,
-              borderTopWidth: 1
+              justifyContent: "flex-end"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              AddonsTabs,
+              import_react_native6.View,
               {
-                onClose: () => {
-                  setMobileMenuOpen(false);
+                style: {
+                  height: "100%",
+                  backgroundColor: theme.background.content,
+                  paddingTop: 10,
+                  borderTopColor: theme.appBorderColor,
+                  borderTopWidth: 1,
+                  paddingBottom: import_react_native6.Platform.OS === "android" ? 16 : 0
                 },
-                storyId
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  AddonsTabs,
+                  {
+                    onClose: () => {
+                      setMobileMenuOpen(false);
+                    },
+                    storyId
+                  }
+                )
               }
             )
           }
-        ) }) })
+        )
       }
     );
   }
@@ -1524,10 +1590,36 @@ var MobileMenuDrawer = (0, import_react13.memo)(
   (0, import_react13.forwardRef)(({ children }, ref) => {
     const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react13.useState)(false);
     const { scrollToSelectedNode, scrollRef } = useSelectedNode();
-    const { height } = (0, import_react_native7.useWindowDimensions)();
+    const theme = (0, import_react_native_theming9.useTheme)();
+    const dragY = (0, import_react_native7.useAnimatedValue)(0);
+    const panResponder = (0, import_react13.useRef)(
+      import_react_native7.PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+          return gestureState.dy > 0;
+        },
+        onPanResponderMove: (_, gestureState) => {
+          if (gestureState.dy > 0) {
+            dragY.setValue(gestureState.dy);
+          }
+        },
+        onPanResponderRelease: (_, gestureState) => {
+          if (gestureState.dy > 50) {
+            import_react_native7.Keyboard.dismiss();
+            setMobileMenuOpen(false);
+          }
+          import_react_native7.Animated.timing(dragY, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: true
+          }).start();
+        }
+      })
+    ).current;
     (0, import_react13.useImperativeHandle)(ref, () => ({
       setMobileMenuOpen: (open) => {
         if (open) {
+          dragY.setValue(0);
           scrollToSelectedNode();
           setMobileMenuOpen(true);
         } else {
@@ -1536,48 +1628,73 @@ var MobileMenuDrawer = (0, import_react13.memo)(
         }
       }
     }));
-    const theme = (0, import_react_native_theming9.useTheme)();
-    const bgColorStyle = (0, import_react13.useMemo)(() => {
-      return {
-        marginTop: "auto",
-        backgroundColor: theme.background.content,
-        height,
-        width: "100%",
-        overflow: "hidden"
-      };
-    }, [height, theme.background.content]);
+    const handleStyle = (0, import_react13.useMemo)(
+      () => ({
+        width: 40,
+        height: 5,
+        backgroundColor: theme.color.mediumdark,
+        borderRadius: 2.5,
+        alignSelf: "center",
+        // TypeScript needs this to recognize 'center' as a valid FlexAlignType
+        marginVertical: 8
+      }),
+      [theme.color.mediumdark]
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_react_native7.Modal,
       {
         visible: mobileMenuOpen,
-        style: bgColorStyle,
         animationType: "slide",
         transparent: true,
+        statusBarTranslucent: true,
         onRequestClose: () => setMobileMenuOpen(false),
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native7.KeyboardAvoidingView, { behavior: "height", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native7.SafeAreaView, { style: { justifyContent: "flex-end", flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_react_native7.View,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native7.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native7.Pressable, { style: { flex: 1 }, onPress: () => setMobileMenuOpen(false) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            import_react_native7.Animated.View,
             {
-              style: { flex: 1, borderBottomColor: theme.appBorderColor, borderBottomWidth: 1 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native7.Pressable, { style: { flex: 1 }, onPress: () => setMobileMenuOpen(false) })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native7.View, { style: { height: "65%" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_react_native7.ScrollView,
-            {
-              ref: scrollRef,
-              keyboardShouldPersistTaps: "handled",
-              style: {
-                flex: 1,
-                paddingBottom: 150,
-                paddingTop: 24,
-                alignSelf: "flex-end",
-                width: "100%",
-                backgroundColor: theme.background.content
-              },
-              children
+              style: [
+                {
+                  height: "65%",
+                  borderTopColor: theme.appBorderColor,
+                  borderTopWidth: 1,
+                  borderStyle: "solid",
+                  backgroundColor: theme.background.content,
+                  elevation: 8
+                },
+                { transform: [{ translateY: dragY }] }
+              ],
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native7.View,
+                  {
+                    ...panResponder.panHandlers,
+                    style: {
+                      alignItems: "center",
+                      justifyContent: "center",
+                      backgroundColor: theme.background.content
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native7.View, { style: handleStyle })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native7.ScrollView,
+                  {
+                    ref: scrollRef,
+                    keyboardShouldPersistTaps: "handled",
+                    style: {
+                      flex: 1,
+                      paddingBottom: 150,
+                      alignSelf: "flex-end",
+                      width: "100%",
+                      backgroundColor: theme.background.content
+                    },
+                    children
+                  }
+                )
+              ]
             }
-          ) })
+          )
         ] }) })
       }
     );
@@ -1691,13 +1808,7 @@ var mobileMenuDrawerContentStyle = {
   paddingTop: 4,
   paddingBottom: 4
 };
-var LiteUI = ({
-  storage,
-  theme,
-  storyHash,
-  story,
-  children
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_theming10.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Layout, { storyHash, story, children }) }) }) }) });
+var LiteUI = ({ storage, theme, storyHash, story, children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_theming10.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Layout, { storyHash, story, children }) }) }) }) });
 var Layout = ({
   storyHash,
   story,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "9.0.0-beta.15",
+  "version": "9.0.0-rc.5",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,9 +58,9 @@
     "typescript": "~5.8.3"
   },
   "dependencies": {
-    "@storybook/react": "9.0.0-beta.10",
-    "@storybook/react-native-theming": "^9.0.0-beta.15",
-    "@storybook/react-native-ui-common": "^9.0.0-beta.15",
+    "@storybook/react": "^9",
+    "@storybook/react-native-theming": "^9.0.0-rc.5",
+    "@storybook/react-native-ui-common": "^9.0.0-rc.5",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -69,7 +69,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": ">=0.57.0",
-    "storybook": "9.0.0-beta.10"
+    "storybook": "^9"
   },
   "engines": {
     "node": ">=18.0.0"
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "905adcca4ea272933c7f0fa16f10dda201da9a5f"
+  "gitHead": "bed522706a1296d1550ff4446045b71d53e0902d"
 }

package/src/Layout.tsx

@@ -1,10 +1,10 @@
 import type { Args, StoryContext } from '@storybook/csf';
 import type { ReactRenderer } from '@storybook/react';
-import { styled, Theme, ThemeProvider, useTheme } from '@storybook/react-native-theming';
+import { styled, ThemeProvider, useTheme } from '@storybook/react-native-theming';
 import {
   IconButton,
   LayoutProvider,
-  Storage,
+  SBUI,
   StorageProvider,
   useLayout,
   useStoreBooleanState,
@@ -64,19 +64,7 @@ const mobileMenuDrawerContentStyle = {
   paddingBottom: 4,
 } satisfies ViewStyle;
 
-export const LiteUI = ({
-  storage,
-  theme,
-  storyHash,
-  story,
-  children,
-}: {
-  storage: Storage;
-  theme: Theme;
-  storyHash: API_IndexHash | undefined;
-  story?: StoryContext<ReactRenderer, Args>;
-  children: ReactNode | ReactNode[];
-}): ReactElement => (
+export const LiteUI: SBUI = ({ storage, theme, storyHash, story, children }): ReactElement => (
   <>
     <ThemeProvider theme={theme}>
       {/* @ts-ignore something weird with story type */}

package/src/MobileAddonsPanel.tsx

@@ -1,12 +1,16 @@
 import { styled, useTheme } from '@storybook/react-native-theming';
-import { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import {
-  KeyboardAvoidingView,
-  Modal,
+  Animated,
+  Easing,
+  Keyboard,
+  Platform,
   SafeAreaView,
   ScrollView,
   StyleProp,
   Text,
+  useAnimatedValue,
+  useWindowDimensions,
   View,
   ViewStyle,
 } from 'react-native';
@@ -23,6 +27,63 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
   ({ storyId }, ref) => {
     const theme = useTheme();
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+    const { height } = useWindowDimensions();
+    const panelHeight = useAnimatedValue(height / 2);
+    const positionBottomAnimation = useAnimatedValue(0);
+
+    useEffect(() => {
+      // Define keyboard show handler
+      const handleKeyboardShow = ({ endCoordinates, duration, easing }) => {
+        Animated.parallel([
+          Animated.timing(positionBottomAnimation, {
+            toValue: -endCoordinates.height, // Negative to move up
+            duration,
+            useNativeDriver: false,
+            easing: Easing[easing] || Easing.out(Easing.ease),
+          }),
+
+          Animated.timing(panelHeight, {
+            toValue: (height - endCoordinates.height) / 2,
+            duration: duration + 250,
+            useNativeDriver: false,
+            easing: Easing[easing] || Easing.out(Easing.ease),
+          }),
+        ]).start();
+      };
+
+      // Define keyboard hide handler
+      const handleKeyboardHide = ({ duration, easing }) => {
+        Animated.parallel([
+          Animated.timing(positionBottomAnimation, {
+            toValue: 0, // Back to original position
+            duration,
+            useNativeDriver: false,
+            easing: Easing[easing] || Easing.out(Easing.ease),
+          }),
+
+          Animated.timing(panelHeight, {
+            toValue: height / 2,
+            duration,
+            useNativeDriver: false,
+            easing: Easing[easing] || Easing.out(Easing.ease),
+          }),
+        ]).start();
+      };
+
+      // Add keyboard event listeners
+      const showSubscription = Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
+      const willShowSubscription = Keyboard.addListener('keyboardWillShow', handleKeyboardShow);
+      const hideSubscription = Keyboard.addListener('keyboardWillHide', handleKeyboardHide);
+      const didHideSubscription = Keyboard.addListener('keyboardDidHide', handleKeyboardHide);
+
+      // Clean up subscriptions on unmount
+      return () => {
+        showSubscription.remove();
+        willShowSubscription.remove();
+        hideSubscription.remove();
+        didHideSubscription.remove();
+      };
+    }, [height, panelHeight, positionBottomAnimation]);
 
     useImperativeHandle(ref, () => ({
       setAddonsPanelOpen: (open: boolean) => {
@@ -34,34 +95,45 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
       },
     }));
 
+    if (!mobileMenuOpen) {
+      return null;
+    }
+
     return (
-      <Modal
-        visible={mobileMenuOpen}
-        onRequestClose={() => setMobileMenuOpen(false)}
-        transparent
-        animationType="slide"
+      <Animated.View
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: panelHeight,
+          transform: [{ translateY: positionBottomAnimation }],
+        }}
       >
-        <KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
-          <SafeAreaView style={{ justifyContent: 'flex-end', flex: 1 }}>
-            <View
-              style={{
-                height: '50%',
-                backgroundColor: theme.background.content,
-                paddingTop: 10,
-                borderTopColor: theme.appBorderColor,
-                borderTopWidth: 1,
+        <SafeAreaView
+          style={{
+            justifyContent: 'flex-end',
+          }}
+        >
+          <View
+            style={{
+              height: '100%',
+              backgroundColor: theme.background.content,
+              paddingTop: 10,
+              borderTopColor: theme.appBorderColor,
+              borderTopWidth: 1,
+              paddingBottom: Platform.OS === 'android' ? 16 : 0,
+            }}
+          >
+            <AddonsTabs
+              onClose={() => {
+                setMobileMenuOpen(false);
               }}
-            >
-              <AddonsTabs
-                onClose={() => {
-                  setMobileMenuOpen(false);
-                }}
-                storyId={storyId}
-              />
-            </View>
-          </SafeAreaView>
-        </KeyboardAvoidingView>
-      </Modal>
+              storyId={storyId}
+            />
+          </View>
+        </SafeAreaView>
+      </Animated.View>
     );
   }
 );

package/src/MobileMenuDrawer.tsx

@@ -1,16 +1,17 @@
 import { useTheme } from '@storybook/react-native-theming';
-import { forwardRef, memo, ReactNode, useImperativeHandle, useMemo, useState } from 'react';
+import { forwardRef, memo, ReactNode, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import {
+  Animated,
   Keyboard,
   KeyboardAvoidingView,
   Modal,
+  PanResponder,
+  PanResponderInstance,
   Pressable,
   SafeAreaView,
   ScrollView,
-  StyleProp,
-  useWindowDimensions,
+  useAnimatedValue,
   View,
-  ViewStyle,
 } from 'react-native';
 
 import { useSelectedNode } from './SelectedNodeProvider';
@@ -27,10 +28,45 @@ export const MobileMenuDrawer = memo(
   forwardRef<MobileMenuDrawerRef, MobileMenuDrawerProps>(({ children }, ref) => {
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const { scrollToSelectedNode, scrollRef } = useSelectedNode();
-    const { height } = useWindowDimensions();
+    const theme = useTheme();
+
+    // Create a reference for the drag handle animation
+    const dragY = useAnimatedValue(0);
+
+    // Create the pan responder for handling drag gestures
+    const panResponder = useRef<PanResponderInstance>(
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+          // Only capture downward dragging motions
+          return gestureState.dy > 0;
+        },
+        onPanResponderMove: (_, gestureState) => {
+          // Update dragY based on the gesture
+          if (gestureState.dy > 0) {
+            dragY.setValue(gestureState.dy);
+          }
+        },
+        onPanResponderRelease: (_, gestureState) => {
+          // If dragged down enough, close the drawer
+          if (gestureState.dy > 50) {
+            Keyboard.dismiss();
+            setMobileMenuOpen(false);
+          }
+          // Reset the drag position
+          Animated.timing(dragY, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: true,
+          }).start();
+        },
+      })
+    ).current;
+
     useImperativeHandle(ref, () => ({
       setMobileMenuOpen: (open: boolean) => {
         if (open) {
+          dragY.setValue(0);
           scrollToSelectedNode();
           setMobileMenuOpen(true);
         } else {
@@ -39,41 +75,65 @@ export const MobileMenuDrawer = memo(
         }
       },
     }));
-    const theme = useTheme();
-    const bgColorStyle = useMemo(() => {
-      return {
-        marginTop: 'auto',
-        backgroundColor: theme.background.content,
-        height: height,
-        width: '100%',
-        overflow: 'hidden',
-      } satisfies StyleProp<ViewStyle>;
-    }, [height, theme.background.content]);
+
+    // Create the styles for the drag handle
+    const handleStyle = useMemo(
+      () => ({
+        width: 40,
+        height: 5,
+        backgroundColor: theme.color.mediumdark,
+        borderRadius: 2.5,
+        alignSelf: 'center' as const, // TypeScript needs this to recognize 'center' as a valid FlexAlignType
+        marginVertical: 8,
+      }),
+      [theme.color.mediumdark]
+    );
 
     return (
       <Modal
         visible={mobileMenuOpen}
-        style={bgColorStyle}
         animationType="slide"
         transparent
+        statusBarTranslucent
         onRequestClose={() => setMobileMenuOpen(false)}
       >
         <KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
           <SafeAreaView style={{ justifyContent: 'flex-end', flex: 1 }}>
-            <View
-              style={{ flex: 1, borderBottomColor: theme.appBorderColor, borderBottomWidth: 1 }}
-            >
+            <View style={{ flex: 1 }}>
               <Pressable style={{ flex: 1 }} onPress={() => setMobileMenuOpen(false)}></Pressable>
             </View>
 
-            <View style={{ height: '65%' }}>
+            <Animated.View
+              style={[
+                {
+                  height: '65%',
+                  borderTopColor: theme.appBorderColor,
+                  borderTopWidth: 1,
+                  borderStyle: 'solid',
+                  backgroundColor: theme.background.content,
+                  elevation: 8,
+                },
+                { transform: [{ translateY: dragY }] },
+              ]}
+            >
+              {/* Drag handle */}
+              <View
+                {...panResponder.panHandlers}
+                style={{
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backgroundColor: theme.background.content,
+                }}
+              >
+                <View style={handleStyle} />
+              </View>
+
               <ScrollView
                 ref={scrollRef}
                 keyboardShouldPersistTaps="handled"
                 style={{
                   flex: 1,
                   paddingBottom: 150,
-                  paddingTop: 24,
                   alignSelf: 'flex-end',
                   width: '100%',
                   backgroundColor: theme.background.content,
@@ -81,7 +141,7 @@ export const MobileMenuDrawer = memo(
               >
                 {children}
               </ScrollView>
-            </View>
+            </Animated.View>
           </SafeAreaView>
         </KeyboardAvoidingView>
       </Modal>

package/src/Tree.tsx

@@ -256,6 +256,7 @@ export const Tree = React.memo<{
   // Omit single-story components from the list of nodes.
   const collapsedItems = useMemo(
     () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [singleStoryComponentIds]
   );
@@ -281,6 +282,7 @@ export const Tree = React.memo<{
       },
       { ...data }
     );
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);