@limonify/zest-ui 0.1.4 → 0.2.0

package/lib/tooltip/root/TooltipRoot.js

@@ -1,11 +1,47 @@
 "use strict";
 'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooltipRoot = TooltipRoot;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
 const useRefWithInit_1 = require("../../hooks/useRefWithInit");
+const useTransitionStatus_1 = require("../../internals/useTransitionStatus");
 const TooltipStore_1 = require("../store/TooltipStore");
 const TooltipRootContext_1 = require("./TooltipRootContext");
+const TooltipTransitionContext_1 = require("./TooltipTransitionContext");
 /**
  * Groups all parts of the tooltip.
  * Doesn't render its own element.
@@ -21,6 +57,9 @@ function TooltipRoot(props) {
     const store = (0, useRefWithInit_1.useRefWithInit)(() => new TooltipStore_1.TooltipStore({ open: defaultOpen, openProp: open })).current;
     store.useControlledProp('openProp', open);
     store.useContextCallback('onOpenChange', onOpenChange);
-    return (0, jsx_runtime_1.jsx)(TooltipRootContext_1.TooltipRootContext.Provider, { value: store, children: children });
+    const resolvedOpen = store.useState('open');
+    const { transitionStatus } = (0, useTransitionStatus_1.useTransitionStatus)(resolvedOpen, false, true);
+    const transitionContextValue = React.useMemo(() => ({ transitionStatus }), [transitionStatus]);
+    return ((0, jsx_runtime_1.jsx)(TooltipRootContext_1.TooltipRootContext.Provider, { value: store, children: (0, jsx_runtime_1.jsx)(TooltipTransitionContext_1.TooltipTransitionContext.Provider, { value: transitionContextValue, children: children }) }));
 }
 //# sourceMappingURL=TooltipRoot.js.map

package/lib/tooltip/root/TooltipRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipRoot.js","sourceRoot":"","sources":["../../../src/tooltip/root/TooltipRoot.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAkBb,kCAWC;;AA3BD,+DAA4D;AAG5D,wDAAqD;AACrD,6DAA0D;AAE1D;;;;;;;;;GASG;AACH,SAAgB,WAAW,CAAC,KAAwB;IAClD,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEpE,MAAM,KAAK,GAAG,IAAA,+BAAc,EAC1B,GAAG,EAAE,CAAC,IAAI,2BAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC9D,CAAC,OAAO,CAAC;IAEV,KAAK,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAC1C,KAAK,CAAC,kBAAkB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IAEvD,OAAO,uBAAC,uCAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA+B,CAAC;AAC7F,CAAC"}
+{"version":3,"file":"TooltipRoot.js","sourceRoot":"","sources":["../../../src/tooltip/root/TooltipRoot.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBb,kCAyBC;;AA5CD,6CAA+B;AAC/B,+DAA4D;AAC5D,6EAA0E;AAG1E,wDAAqD;AACrD,6DAA0D;AAC1D,yEAAsE;AAEtE;;;;;;;;;GASG;AACH,SAAgB,WAAW,CAAC,KAAwB;IAClD,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEpE,MAAM,KAAK,GAAG,IAAA,+BAAc,EAC1B,GAAG,EAAE,CAAC,IAAI,2BAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC9D,CAAC,OAAO,CAAC;IAEV,KAAK,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAC1C,KAAK,CAAC,kBAAkB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IAEvD,MAAM,YAAY,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC5C,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,yCAAmB,EAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;IAE5E,MAAM,sBAAsB,GAAG,KAAK,CAAC,OAAO,CAC1C,GAAG,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,CAAC,EAC5B,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,OAAO,CACL,uBAAC,uCAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACvC,uBAAC,mDAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,sBAAsB,YAC7D,QAAQ,GACyB,GACR,CAC/B,CAAC;AACJ,CAAC"}

package/lib/tooltip/root/TooltipTransitionContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+export interface TooltipTransitionContext {
+    transitionStatus: TransitionStatus;
+}
+export declare const TooltipTransitionContext: React.Context<TooltipTransitionContext | undefined>;
+export declare function useTooltipTransitionContext(): TooltipTransitionContext | undefined;
+//# sourceMappingURL=TooltipTransitionContext.d.ts.map

package/lib/tooltip/root/TooltipTransitionContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTransitionContext.d.ts","sourceRoot":"","sources":["../../../src/tooltip/root/TooltipTransitionContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAE5E,MAAM,WAAW,wBAAwB;IACvC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED,eAAO,MAAM,wBAAwB,qDAEpC,CAAC;AAEF,wBAAgB,2BAA2B,yCAE1C"}

package/lib/tooltip/root/TooltipTransitionContext.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipTransitionContext = void 0;
+exports.useTooltipTransitionContext = useTooltipTransitionContext;
+const React = __importStar(require("react"));
+exports.TooltipTransitionContext = React.createContext(undefined);
+function useTooltipTransitionContext() {
+    return React.useContext(exports.TooltipTransitionContext);
+}
+//# sourceMappingURL=TooltipTransitionContext.js.map

package/lib/tooltip/root/TooltipTransitionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTransitionContext.js","sourceRoot":"","sources":["../../../src/tooltip/root/TooltipTransitionContext.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYb,kEAEC;AAbD,6CAA+B;AAOlB,QAAA,wBAAwB,GAAG,KAAK,CAAC,aAAa,CACzD,SAAS,CACV,CAAC;AAEF,SAAgB,2BAA2B;IACzC,OAAO,KAAK,CAAC,UAAU,CAAC,gCAAwB,CAAC,CAAC;AACpD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limonify/zest-ui",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Base UI for React Native — headless, unstyled, accessible primitive components.",
   "license": "MIT",
   "repository": {
@@ -21,6 +21,176 @@
       "types": "./lib/index.d.ts",
       "react-native": "./src/index.ts",
       "default": "./lib/index.js"
+    },
+    "./accordion": {
+      "types": "./lib/accordion/index.d.ts",
+      "react-native": "./src/accordion/index.ts",
+      "default": "./lib/accordion/index.js"
+    },
+    "./alert-dialog": {
+      "types": "./lib/alert-dialog/index.d.ts",
+      "react-native": "./src/alert-dialog/index.ts",
+      "default": "./lib/alert-dialog/index.js"
+    },
+    "./autocomplete": {
+      "types": "./lib/autocomplete/index.d.ts",
+      "react-native": "./src/autocomplete/index.ts",
+      "default": "./lib/autocomplete/index.js"
+    },
+    "./avatar": {
+      "types": "./lib/avatar/index.d.ts",
+      "react-native": "./src/avatar/index.ts",
+      "default": "./lib/avatar/index.js"
+    },
+    "./button": {
+      "types": "./lib/button/index.d.ts",
+      "react-native": "./src/button/index.ts",
+      "default": "./lib/button/index.js"
+    },
+    "./checkbox": {
+      "types": "./lib/checkbox/index.d.ts",
+      "react-native": "./src/checkbox/index.ts",
+      "default": "./lib/checkbox/index.js"
+    },
+    "./checkbox-group": {
+      "types": "./lib/checkbox-group/index.d.ts",
+      "react-native": "./src/checkbox-group/index.ts",
+      "default": "./lib/checkbox-group/index.js"
+    },
+    "./collapsible": {
+      "types": "./lib/collapsible/index.d.ts",
+      "react-native": "./src/collapsible/index.ts",
+      "default": "./lib/collapsible/index.js"
+    },
+    "./combobox": {
+      "types": "./lib/combobox/index.d.ts",
+      "react-native": "./src/combobox/index.ts",
+      "default": "./lib/combobox/index.js"
+    },
+    "./context-menu": {
+      "types": "./lib/context-menu/index.d.ts",
+      "react-native": "./src/context-menu/index.ts",
+      "default": "./lib/context-menu/index.js"
+    },
+    "./dialog": {
+      "types": "./lib/dialog/index.d.ts",
+      "react-native": "./src/dialog/index.ts",
+      "default": "./lib/dialog/index.js"
+    },
+    "./drawer": {
+      "types": "./lib/drawer/index.d.ts",
+      "react-native": "./src/drawer/index.ts",
+      "default": "./lib/drawer/index.js"
+    },
+    "./field": {
+      "types": "./lib/field/index.d.ts",
+      "react-native": "./src/field/index.ts",
+      "default": "./lib/field/index.js"
+    },
+    "./fieldset": {
+      "types": "./lib/fieldset/index.d.ts",
+      "react-native": "./src/fieldset/index.ts",
+      "default": "./lib/fieldset/index.js"
+    },
+    "./input": {
+      "types": "./lib/input/index.d.ts",
+      "react-native": "./src/input/index.ts",
+      "default": "./lib/input/index.js"
+    },
+    "./menu": {
+      "types": "./lib/menu/index.d.ts",
+      "react-native": "./src/menu/index.ts",
+      "default": "./lib/menu/index.js"
+    },
+    "./meter": {
+      "types": "./lib/meter/index.d.ts",
+      "react-native": "./src/meter/index.ts",
+      "default": "./lib/meter/index.js"
+    },
+    "./number-field": {
+      "types": "./lib/number-field/index.d.ts",
+      "react-native": "./src/number-field/index.ts",
+      "default": "./lib/number-field/index.js"
+    },
+    "./otp-field": {
+      "types": "./lib/otp-field/index.d.ts",
+      "react-native": "./src/otp-field/index.ts",
+      "default": "./lib/otp-field/index.js"
+    },
+    "./popover": {
+      "types": "./lib/popover/index.d.ts",
+      "react-native": "./src/popover/index.ts",
+      "default": "./lib/popover/index.js"
+    },
+    "./progress": {
+      "types": "./lib/progress/index.d.ts",
+      "react-native": "./src/progress/index.ts",
+      "default": "./lib/progress/index.js"
+    },
+    "./radio": {
+      "types": "./lib/radio/index.d.ts",
+      "react-native": "./src/radio/index.ts",
+      "default": "./lib/radio/index.js"
+    },
+    "./radio-group": {
+      "types": "./lib/radio-group/index.d.ts",
+      "react-native": "./src/radio-group/index.ts",
+      "default": "./lib/radio-group/index.js"
+    },
+    "./select": {
+      "types": "./lib/select/index.d.ts",
+      "react-native": "./src/select/index.ts",
+      "default": "./lib/select/index.js"
+    },
+    "./separator": {
+      "types": "./lib/separator/index.d.ts",
+      "react-native": "./src/separator/index.ts",
+      "default": "./lib/separator/index.js"
+    },
+    "./slider": {
+      "types": "./lib/slider/index.d.ts",
+      "react-native": "./src/slider/index.ts",
+      "default": "./lib/slider/index.js"
+    },
+    "./switch": {
+      "types": "./lib/switch/index.d.ts",
+      "react-native": "./src/switch/index.ts",
+      "default": "./lib/switch/index.js"
+    },
+    "./tabs": {
+      "types": "./lib/tabs/index.d.ts",
+      "react-native": "./src/tabs/index.ts",
+      "default": "./lib/tabs/index.js"
+    },
+    "./toast": {
+      "types": "./lib/toast/index.d.ts",
+      "react-native": "./src/toast/index.ts",
+      "default": "./lib/toast/index.js"
+    },
+    "./toggle": {
+      "types": "./lib/toggle/index.d.ts",
+      "react-native": "./src/toggle/index.ts",
+      "default": "./lib/toggle/index.js"
+    },
+    "./toggle-group": {
+      "types": "./lib/toggle-group/index.d.ts",
+      "react-native": "./src/toggle-group/index.ts",
+      "default": "./lib/toggle-group/index.js"
+    },
+    "./tooltip": {
+      "types": "./lib/tooltip/index.d.ts",
+      "react-native": "./src/tooltip/index.ts",
+      "default": "./lib/tooltip/index.js"
+    },
+    "./hooks": {
+      "types": "./lib/hooks/index.d.ts",
+      "react-native": "./src/hooks/index.ts",
+      "default": "./lib/hooks/index.js"
+    },
+    "./store": {
+      "types": "./lib/store/index.d.ts",
+      "react-native": "./src/store/index.ts",
+      "default": "./lib/store/index.js"
     }
   },
   "files": [
@@ -34,6 +204,7 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest",
+    "test:coverage": "jest --coverage",
     "lint": "eslint src",
     "build": "tsc -p tsconfig.build.json",
     "clean": "rm -rf lib",
@@ -46,6 +217,7 @@
   },
   "devDependencies": {
     "@babel/runtime": "^8.0.0",
+    "@size-limit/preset-small-lib": "^12.1.0",
     "@testing-library/react-native": "^14.0.1",
     "@types/jest": "^29.5.14",
     "@types/react": "~19.2.2",
@@ -55,6 +227,7 @@
     "react": "19.2.3",
     "react-native": "0.86.0",
     "react-native-gesture-handler": "~3.1.0",
+    "size-limit": "^12.1.0",
     "typescript": "~6.0.3"
   },
   "dependencies": {
@@ -64,5 +237,12 @@
     "react-native-gesture-handler": {
       "optional": true
     }
-  }
+  },
+  "size-limit": [
+    {
+      "name": "full",
+      "path": "lib/index.js",
+      "limit": "500 KB"
+    }
+  ]
 }

package/src/accordion/root/AccordionRoot.tsx

@@ -32,18 +32,33 @@ export function AccordionRoot<Value = any>(componentProps: AccordionRoot.Props<V
     ...elementProps
   } = componentProps;
 
+  const normalizeValue = React.useCallback((val: any) => {
+    if (val === undefined || val === null) return undefined;
+    if (Array.isArray(val)) return val;
+    return [val];
+  }, []);
+
+  const normalizedValueProp = React.useMemo(
+    () => normalizeValue(valueProp),
+    [valueProp, normalizeValue],
+  );
+  const normalizedDefaultValueProp = React.useMemo(
+    () => normalizeValue(defaultValueProp),
+    [defaultValueProp, normalizeValue],
+  );
+
   // Memoized to allow omitting both defaultValue and value, which would
   // otherwise trigger a warning in useControlled.
   const defaultValue = React.useMemo(() => {
     if (valueProp === undefined) {
-      return defaultValueProp ?? [];
+      return normalizedDefaultValueProp ?? [];
     }
 
     return undefined;
-  }, [valueProp, defaultValueProp]);
+  }, [valueProp, normalizedDefaultValueProp]);
 
   const [value, setValue] = useControlled<AccordionValue<Value>>({
-    controlled: valueProp,
+    controlled: normalizedValueProp,
     default: defaultValue,
     name: 'Accordion',
     state: 'value',
@@ -115,16 +130,18 @@ export interface AccordionRootProps<Value = any>
   extends Omit<ZestUIComponentProps<typeof View, AccordionRootState<Value>>, 'value'> {
   /**
    * The controlled value of the item(s) that should be expanded.
+   * Accepts a single value or an array of values.
    *
    * To render an uncontrolled accordion, use the `defaultValue` prop instead.
    */
-  value?: AccordionValue<Value> | undefined;
+  value?: Value | AccordionValue<Value> | undefined;
   /**
    * The uncontrolled value of the item(s) that should be initially expanded.
+   * Accepts a single value or an array of values.
    *
    * To render a controlled accordion, use the `value` prop instead.
    */
-  defaultValue?: AccordionValue<Value> | undefined;
+  defaultValue?: Value | AccordionValue<Value> | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false

package/src/avatar/root/AvatarRoot.tsx

@@ -14,7 +14,10 @@ export function AvatarRoot(componentProps: AvatarRoot.Props) {
 
   const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');
 
-  const state: AvatarRootState = { imageLoadingStatus };
+  const state: AvatarRootState = React.useMemo(
+    () => ({ imageLoadingStatus }),
+    [imageLoadingStatus],
+  );
 
   const contextValue: AvatarRootContext = React.useMemo(
     () => ({ imageLoadingStatus, setImageLoadingStatus }),

package/src/button/Button.tsx

@@ -19,7 +19,10 @@ export function Button(componentProps: Button.Props) {
 
   const { getButtonProps } = useButton({ disabled });
 
-  const state: ButtonState = { disabled, pressed };
+  const state: ButtonState = React.useMemo(
+    () => ({ disabled, pressed }),
+    [disabled, pressed],
+  );
 
   return useRenderElement(Pressable, componentProps, {
     state,

package/src/checkbox-group/CheckboxGroup.tsx

@@ -52,7 +52,10 @@ export function CheckboxGroup(componentProps: CheckboxGroup.Props) {
 
   const parent = useCheckboxGroupParent({ allValues, value, onValueChange: setValue });
 
-  const state: CheckboxGroupState = { disabled };
+  const state: CheckboxGroupState = React.useMemo(
+    () => ({ disabled }),
+    [disabled],
+  );
 
   const contextValue: CheckboxGroupContext = React.useMemo(
     () => ({

package/src/collapsible/panel/useCollapsiblePanel.tsx

@@ -35,6 +35,7 @@ export function useCollapsiblePanel(parameters: UseCollapsiblePanelParameters) {
 
   const handleContentLayout = React.useCallback((event: LayoutChangeEvent) => {
     const { height, width } = event.nativeEvent.layout;
+    if (height <= 0) return;
     setDimensions((previous) =>
       previous.height === height && previous.width === width ? previous : { height, width },
     );

package/src/dialog/popup/DialogPopup.tsx

@@ -2,6 +2,7 @@
 import { View } from 'react-native';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import type { ZestUIComponentProps } from '../../types';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import { useDialogPopupProps } from './useDialogPopupProps';
 
 /**
@@ -11,9 +12,9 @@ import { useDialogPopupProps } from './useDialogPopupProps';
 export function DialogPopup(componentProps: DialogPopup.Props) {
   const { render, className, style, ref, ...elementProps } = componentProps;
 
-  const { open, props } = useDialogPopupProps();
+  const { open, transitionStatus, props } = useDialogPopupProps();
 
-  const state: DialogPopupState = { open };
+  const state: DialogPopupState = { open, transitionStatus };
 
   return useRenderElement(View, componentProps, {
     state,
@@ -27,6 +28,11 @@ export interface DialogPopupState {
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the dialog: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
 }
 
 export interface DialogPopupProps extends ZestUIComponentProps<typeof View, DialogPopupState> {}

package/src/dialog/popup/useDialogPopupProps.ts

@@ -1,6 +1,7 @@
 'use client';
 import { useDialogRootContext } from '../root/DialogRootContext';
 import { useDialogPortalContext } from '../portal/DialogPortalContext';
+import { useDialogTransitionContext } from '../root/DialogTransitionContext';
 
 /**
  * The state and element props shared by every popup built on the dialog store —
@@ -9,6 +10,7 @@ import { useDialogPortalContext } from '../portal/DialogPortalContext';
 export function useDialogPopupProps() {
   useDialogPortalContext();
   const store = useDialogRootContext();
+  const transitionContext = useDialogTransitionContext();
 
   const open = store.useState('open');
   const titleElementId = store.useState('titleElementId');
@@ -18,6 +20,7 @@ export function useDialogPopupProps() {
   return {
     store,
     open,
+    transitionStatus: transitionContext?.transitionStatus,
     props: {
       role,
       accessibilityViewIsModal: true,

package/src/dialog/root/DialogTransitionContext.ts

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+
+export interface DialogTransitionContext {
+  transitionStatus: TransitionStatus;
+}
+
+export const DialogTransitionContext = React.createContext<DialogTransitionContext | undefined>(
+  undefined,
+);
+
+export function useDialogTransitionContext() {
+  return React.useContext(DialogTransitionContext);
+}

package/src/dialog/root/useRenderDialogRoot.tsx

@@ -1,10 +1,12 @@
 'use client';
 import * as React from 'react';
 import { useRefWithInit } from '../../hooks/useRefWithInit';
+import { useTransitionStatus } from '../../internals/useTransitionStatus';
 import { usePopupRootHandle } from '../../utils/popups/usePopupRootHandle';
 import { DialogStore } from '../store/DialogStore';
 import type { DialogRootProps } from './DialogRoot';
 import { DialogRootContext } from './DialogRootContext';
+import { DialogTransitionContext } from './DialogTransitionContext';
 
 export type DialogRootMode = 'dialog' | 'alert-dialog';
 
@@ -53,11 +55,21 @@ export function useRenderDialogRoot<Payload = unknown>(
 
   usePopupRootHandle({ store, handle, actionsRef });
 
+  const resolvedOpen = store.useState('open');
+  const { transitionStatus } = useTransitionStatus(resolvedOpen, false, true);
+
   const payload = store.useState('payload') as Payload;
 
+  const transitionContextValue = React.useMemo(
+    () => ({ transitionStatus }),
+    [transitionStatus],
+  );
+
   return (
     <DialogRootContext.Provider value={store}>
-      {typeof children === 'function' ? children(payload) : children}
+      <DialogTransitionContext.Provider value={transitionContextValue}>
+        {typeof children === 'function' ? children(payload) : children}
+      </DialogTransitionContext.Provider>
     </DialogRootContext.Provider>
   );
 }

package/src/drawer/popup/DrawerPopup.tsx

@@ -6,6 +6,7 @@ import { useDialogPopupProps } from '../../dialog/popup/useDialogPopupProps';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import type { ZestUIComponentProps } from '../../types';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
 import { REASONS } from '../../utils/reasons';
 import { useDrawerRootContext, type DrawerSnapPoint, type DrawerSwipeDirection } from '../root/DrawerRootContext';
@@ -59,7 +60,7 @@ export function DrawerPopup(componentProps: DrawerPopup.Props) {
     setActiveSnapPoint,
     snapToSequentialPoints,
   } = useDrawerSnapPoints();
-  const { store, open, props } = useDialogPopupProps();
+  const { store, open, transitionStatus, props } = useDialogPopupProps();
 
   const [swiping, setSwiping] = React.useState(false);
   const [swipeMovement, setSwipeMovement] = React.useState(0);
@@ -157,6 +158,7 @@ export function DrawerPopup(componentProps: DrawerPopup.Props) {
 
   const state: DrawerPopupState = {
     open,
+    transitionStatus,
     swiping,
     swipeMovement,
     swipeDirection,
@@ -192,6 +194,11 @@ export interface DrawerPopupState {
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the drawer: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
   /**
    * Whether a swipe is currently in progress.
    */

package/src/input/Input.tsx

@@ -1,4 +1,5 @@
 'use client';
+import * as React from 'react';
 import { TextInput } from 'react-native';
 import { useRenderElement } from '../use-render/useRenderElement';
 import { useFieldControl } from '../field/control/useFieldControl';
@@ -32,7 +33,10 @@ export function Input(componentProps: Input.Props) {
     requireField: false,
   });
 
-  const state: Input.State = { disabled: field?.disabled ?? false };
+  const state: Input.State = React.useMemo(
+    () => ({ disabled: field?.disabled ?? false }),
+    [field?.disabled],
+  );
 
   return useRenderElement(TextInput, componentProps, {
     state,

package/src/internals/useTransitionStatus.ts

@@ -26,16 +26,18 @@ export function useTransitionStatus(
   );
   const [mounted, setMounted] = React.useState(open);
 
-  useIsoLayoutEffect(() => {
-    if (open && !mounted) {
-      setMounted(true);
-      setTransitionStatus('starting');
-    } else if (!open && mounted && transitionStatus !== 'ending' && !deferEndingState) {
-      setTransitionStatus('ending');
-    } else if (!open && !mounted && transitionStatus === 'ending') {
-      setTransitionStatus(undefined);
-    }
-  }, [open, mounted, transitionStatus, deferEndingState]);
+  if (open && !mounted) {
+    setMounted(true);
+    setTransitionStatus('starting');
+  }
+
+  if (!open && mounted && transitionStatus !== 'ending' && !deferEndingState) {
+    setTransitionStatus('ending');
+  }
+
+  if (!open && !mounted && transitionStatus === 'ending') {
+    setTransitionStatus(undefined);
+  }
 
   useIsoLayoutEffect(() => {
     if (!open && mounted && transitionStatus !== 'ending' && deferEndingState) {
@@ -63,7 +65,7 @@ export function useTransitionStatus(
     return () => {
       AnimationFrame.cancel(frame);
     };
-  }, [enableIdleState, open]);
+  }, [enableIdleState, open, transitionStatus]);
 
   useIsoLayoutEffect(() => {
     if (!open || !enableIdleState) {