@limonify/zest-ui 0.1.2 → 0.1.4

package/lib/accordion/index.d.ts

@@ -6,4 +6,5 @@ export type * from './trigger/AccordionTrigger';
 export type * from './panel/AccordionPanel';
 export { useAccordionRootContext } from './root/AccordionRootContext';
 export { useAccordionItemContext } from './item/AccordionItemContext';
+export { useCollapsiblePanelState as useAccordionPanelState } from '../collapsible/panel/CollapsiblePanelContext';
 //# sourceMappingURL=index.d.ts.map

package/lib/accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,0BAA0B,CAAC;AAC9C,mBAAmB,4BAA4B,CAAC;AAChD,mBAAmB,wBAAwB,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,0BAA0B,CAAC;AAC9C,mBAAmB,4BAA4B,CAAC;AAChD,mBAAmB,wBAAwB,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,wBAAwB,IAAI,sBAAsB,EAAE,MAAM,8CAA8C,CAAC"}

package/lib/accordion/index.js

@@ -33,10 +33,12 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAccordionItemContext = exports.useAccordionRootContext = exports.Accordion = void 0;
+exports.useAccordionPanelState = exports.useAccordionItemContext = exports.useAccordionRootContext = exports.Accordion = void 0;
 exports.Accordion = __importStar(require("./index.parts"));
 var AccordionRootContext_1 = require("./root/AccordionRootContext");
 Object.defineProperty(exports, "useAccordionRootContext", { enumerable: true, get: function () { return AccordionRootContext_1.useAccordionRootContext; } });
 var AccordionItemContext_1 = require("./item/AccordionItemContext");
 Object.defineProperty(exports, "useAccordionItemContext", { enumerable: true, get: function () { return AccordionItemContext_1.useAccordionItemContext; } });
+var CollapsiblePanelContext_1 = require("../collapsible/panel/CollapsiblePanelContext");
+Object.defineProperty(exports, "useAccordionPanelState", { enumerable: true, get: function () { return CollapsiblePanelContext_1.useCollapsiblePanelState; } });
 //# sourceMappingURL=index.js.map

package/lib/accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2DAA2C;AAO3C,oEAAsE;AAA7D,+HAAA,uBAAuB,OAAA;AAChC,oEAAsE;AAA7D,+HAAA,uBAAuB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2DAA2C;AAO3C,oEAAsE;AAA7D,+HAAA,uBAAuB,OAAA;AAChC,oEAAsE;AAA7D,+HAAA,uBAAuB,OAAA;AAChC,wFAAkH;AAAzG,iIAAA,wBAAwB,OAA0B"}

package/lib/accordion/panel/AccordionPanel.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { View } from 'react-native';
+import { type MeasurePadding } from '../../collapsible/panel/useCollapsiblePanel';
 import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import type { AccordionItemState } from '../item/AccordionItem';
 import type { ZestUIComponentProps } from '../../types';
@@ -9,8 +10,15 @@ import type { ZestUIComponentProps } from '../../types';
  *
  * Like `Collapsible.Panel`, it publishes the measured content size on the state
  * object so the consumer can drive an `Animated` value from it.
+ *
+ * ⚠️ **Padding footgun:** The measured `height`/`width` reflects the natural
+ * content size of the panel's **children**, not the panel element itself. If you
+ * apply `padding` on the Panel element via `style`, the clip height will not
+ * account for it and content at the bottom will be clipped. To pad the panel,
+ * put padding on a child View **inside** the Panel instead, or use a
+ * `measurePadding` prop.
  */
-export declare function AccordionPanel(componentProps: AccordionPanel.Props): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export declare function AccordionPanel(componentProps: AccordionPanel.Props): React.JSX.Element;
 export interface AccordionPanelState extends AccordionItemState {
     /**
      * The transition status of the component.
@@ -36,6 +44,16 @@ export interface AccordionPanelProps extends ZestUIComponentProps<typeof View, A
      * Defaults to the `keepMounted` prop on `Accordion.Root`.
      */
     keepMounted?: boolean | undefined;
+    /**
+     * Padding applied to the inner measurement wrapper so the reported
+     * `height`/`width` reflect the padded content size.
+     *
+     * Use this instead of `style.padding` on the panel element to avoid the
+     * padding footgun where the clip height does not account for padding.
+     * The padding is applied inside the clip, so the animation height
+     * naturally includes it.
+     */
+    measurePadding?: MeasurePadding | undefined;
 }
 export declare namespace AccordionPanel {
     type State = AccordionPanelState;

package/lib/accordion/panel/AccordionPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.d.ts","sourceRoot":"","sources":["../../../src/accordion/panel/AccordionPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,KAAK,iFA2ClE;AAED,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D;;OAEG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;IACnC;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,mBACf,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,mBAAmB,CAAC;IAC9D;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnC;AAED,yBAAiB,cAAc,CAAC;IAC9B,KAAY,KAAK,GAAG,mBAAmB,CAAC;IACxC,KAAY,KAAK,GAAG,mBAAmB,CAAC;CACzC"}
+{"version":3,"file":"AccordionPanel.d.ts","sourceRoot":"","sources":["../../../src/accordion/panel/AccordionPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAKvG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,KAAK,qBA4DlE;AAED,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D;;OAEG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;IACnC;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,mBACf,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,mBAAmB,CAAC;IAC9D;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;CAC7C;AAED,yBAAiB,cAAc,CAAC;IAC9B,KAAY,KAAK,GAAG,mBAAmB,CAAC;IACxC,KAAY,KAAK,GAAG,mBAAmB,CAAC;CACzC"}

package/lib/accordion/panel/AccordionPanel.js

@@ -35,11 +35,13 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionPanel = AccordionPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const useRenderElement_1 = require("../../use-render/useRenderElement");
 const CollapsibleRootContext_1 = require("../../collapsible/root/CollapsibleRootContext");
 const useCollapsiblePanel_1 = require("../../collapsible/panel/useCollapsiblePanel");
+const CollapsiblePanelContext_1 = require("../../collapsible/panel/CollapsiblePanelContext");
 const AccordionItemContext_1 = require("../item/AccordionItemContext");
 const AccordionRootContext_1 = require("../root/AccordionRootContext");
 /**
@@ -48,15 +50,23 @@ const AccordionRootContext_1 = require("../root/AccordionRootContext");
  *
  * Like `Collapsible.Panel`, it publishes the measured content size on the state
  * object so the consumer can drive an `Animated` value from it.
+ *
+ * ⚠️ **Padding footgun:** The measured `height`/`width` reflects the natural
+ * content size of the panel's **children**, not the panel element itself. If you
+ * apply `padding` on the Panel element via `style`, the clip height will not
+ * account for it and content at the bottom will be clipped. To pad the panel,
+ * put padding on a child View **inside** the Panel instead, or use a
+ * `measurePadding` prop.
  */
 function AccordionPanel(componentProps) {
-    const { className, keepMounted: keepMountedProp, render, style, ref, children, ...elementProps } = componentProps;
+    const { className, keepMounted: keepMountedProp, measurePadding, render, style, ref, children, ...elementProps } = componentProps;
     const { keepMounted: contextKeepMounted } = (0, AccordionRootContext_1.useAccordionRootContext)();
     const { transitionStatus } = (0, CollapsibleRootContext_1.useCollapsibleRootContext)();
     const { state: itemState, triggerId } = (0, AccordionItemContext_1.useAccordionItemContext)();
     const keepMounted = keepMountedProp !== null && keepMountedProp !== void 0 ? keepMountedProp : contextKeepMounted;
     const { dimensions, props, shouldRender, wrappedChildren } = (0, useCollapsiblePanel_1.useCollapsiblePanel)({
         keepMounted,
+        measurePadding,
         children,
     });
     const state = React.useMemo(() => ({
@@ -65,7 +75,12 @@ function AccordionPanel(componentProps) {
         height: dimensions.height,
         width: dimensions.width,
     }), [itemState, transitionStatus, dimensions.height, dimensions.width]);
-    return (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
+    const panelContext = React.useMemo(() => ({
+        height: dimensions.height,
+        width: dimensions.width,
+        transitionStatus,
+    }), [dimensions.height, dimensions.width, transitionStatus]);
+    const element = (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
         state,
         ref,
         enabled: shouldRender,
@@ -76,5 +91,6 @@ function AccordionPanel(componentProps) {
             { children: wrappedChildren },
         ],
     });
+    return ((0, jsx_runtime_1.jsx)(CollapsiblePanelContext_1.CollapsiblePanelContextContext.Provider, { value: panelContext, children: element }));
 }
 //# sourceMappingURL=AccordionPanel.js.map

package/lib/accordion/panel/AccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.js","sourceRoot":"","sources":["../../../src/accordion/panel/AccordionPanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBb,wCA2CC;AA7DD,6CAA+B;AAC/B,+CAAoC;AACpC,wEAAqE;AACrE,0FAA0F;AAC1F,qFAAkF;AAGlF,uEAAuE;AACvE,uEAAuE;AAGvE;;;;;;GAMG;AACH,SAAgB,cAAc,CAAC,cAAoC;IACjE,MAAM,EACJ,SAAS,EACT,WAAW,EAAE,eAAe,EAC5B,MAAM,EACN,KAAK,EACL,GAAG,EACH,QAAQ,EACR,GAAG,YAAY,EAChB,GAAG,cAAc,CAAC;IAEnB,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,IAAA,8CAAuB,GAAE,CAAC;IACtE,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IACzD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAA,8CAAuB,GAAE,CAAC;IAElE,MAAM,WAAW,GAAG,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,kBAAkB,CAAC;IAE1D,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAA,yCAAmB,EAAC;QAC/E,WAAW;QACX,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,KAAK,GAAwB,KAAK,CAAC,OAAO,CAC9C,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,SAAS;QACZ,gBAAgB;QAChB,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,KAAK,EAAE,UAAU,CAAC,KAAK;KACxB,CAAC,EACF,CAAC,SAAS,EAAE,gBAAgB,EAAE,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CACnE,CAAC;IAEF,OAAO,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QAC5C,KAAK;QACL,GAAG;QACH,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE;YACL,KAAK;YACL,EAAE,IAAI,EAAE,QAAiB,EAAE,uBAAuB,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE;YAC7F,YAAY;YACZ,EAAE,QAAQ,EAAE,eAAe,EAAE;SAC9B;KACF,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"AccordionPanel.js","sourceRoot":"","sources":["../../../src/accordion/panel/AccordionPanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Bb,wCA4DC;;AAzFD,6CAA+B;AAC/B,+CAAoC;AACpC,wEAAqE;AACrE,0FAA0F;AAC1F,qFAAuG;AACvG,6FAGyD;AAGzD,uEAAuE;AACvE,uEAAuE;AAGvE;;;;;;;;;;;;;GAaG;AACH,SAAgB,cAAc,CAAC,cAAoC;IACjE,MAAM,EACJ,SAAS,EACT,WAAW,EAAE,eAAe,EAC5B,cAAc,EACd,MAAM,EACN,KAAK,EACL,GAAG,EACH,QAAQ,EACR,GAAG,YAAY,EAChB,GAAG,cAAc,CAAC;IAEnB,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,IAAA,8CAAuB,GAAE,CAAC;IACtE,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IACzD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAA,8CAAuB,GAAE,CAAC;IAElE,MAAM,WAAW,GAAG,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,kBAAkB,CAAC;IAE1D,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAA,yCAAmB,EAAC;QAC/E,WAAW;QACX,cAAc;QACd,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,KAAK,GAAwB,KAAK,CAAC,OAAO,CAC9C,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,SAAS;QACZ,gBAAgB;QAChB,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,KAAK,EAAE,UAAU,CAAC,KAAK;KACxB,CAAC,EACF,CAAC,SAAS,EAAE,gBAAgB,EAAE,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CACnE,CAAC;IAEF,MAAM,YAAY,GAA4B,KAAK,CAAC,OAAO,CACzD,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,gBAAgB;KACjB,CAAC,EACF,CAAC,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,gBAAgB,CAAC,CACxD,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QACrD,KAAK;QACL,GAAG;QACH,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE;YACL,KAAK;YACL,EAAE,IAAI,EAAE,QAAiB,EAAE,uBAAuB,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE;YAC7F,YAAY;YACZ,EAAE,QAAQ,EAAE,eAAe,EAAE;SAC9B;KACF,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,wDAA8B,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACzD,OAAO,GACgC,CAC3C,CAAC;AACJ,CAAC"}

package/lib/collapsible/index.d.ts

@@ -3,4 +3,5 @@ export type * from './root/CollapsibleRoot';
 export type * from './trigger/CollapsibleTrigger';
 export type * from './panel/CollapsiblePanel';
 export { useCollapsibleRootContext } from './root/CollapsibleRootContext';
+export { useCollapsiblePanelState } from './panel/CollapsiblePanelContext';
 //# sourceMappingURL=index.d.ts.map

package/lib/collapsible/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/collapsible/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAE7C,mBAAmB,wBAAwB,CAAC;AAC5C,mBAAmB,8BAA8B,CAAC;AAClD,mBAAmB,0BAA0B,CAAC;AAC9C,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/collapsible/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAE7C,mBAAmB,wBAAwB,CAAC;AAC5C,mBAAmB,8BAA8B,CAAC;AAClD,mBAAmB,0BAA0B,CAAC;AAC9C,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC"}

package/lib/collapsible/index.js

@@ -33,8 +33,10 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCollapsibleRootContext = exports.Collapsible = void 0;
+exports.useCollapsiblePanelState = exports.useCollapsibleRootContext = exports.Collapsible = void 0;
 exports.Collapsible = __importStar(require("./index.parts"));
 var CollapsibleRootContext_1 = require("./root/CollapsibleRootContext");
 Object.defineProperty(exports, "useCollapsibleRootContext", { enumerable: true, get: function () { return CollapsibleRootContext_1.useCollapsibleRootContext; } });
+var CollapsiblePanelContext_1 = require("./panel/CollapsiblePanelContext");
+Object.defineProperty(exports, "useCollapsiblePanelState", { enumerable: true, get: function () { return CollapsiblePanelContext_1.useCollapsiblePanelState; } });
 //# sourceMappingURL=index.js.map

package/lib/collapsible/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/collapsible/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6DAA6C;AAK7C,wEAA0E;AAAjE,mIAAA,yBAAyB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/collapsible/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6DAA6C;AAK7C,wEAA0E;AAAjE,mIAAA,yBAAyB,OAAA;AAClC,2EAA2E;AAAlE,mIAAA,wBAAwB,OAAA"}

package/lib/collapsible/panel/CollapsiblePanel.d.ts

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import type { CollapsibleRootState } from '../root/CollapsibleRoot';
 import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import type { ZestUIComponentProps } from '../../types';
+import { type MeasurePadding } from './useCollapsiblePanel';
 /**
  * A panel with the collapsible contents.
  * Renders a `<View>`.
@@ -11,8 +12,15 @@ import type { ZestUIComponentProps } from '../../types';
  * object as `height`/`width` — the React Native counterpart of the web version's
  * `--collapsible-panel-height` CSS variable. Drive an `Animated` value from
  * `state.height` and `state.transitionStatus` to animate the panel.
+ *
+ * ⚠️ **Padding footgun:** The measured `height`/`width` reflects the natural
+ * content size of the panel's **children**, not the panel element itself. If you
+ * apply `padding` on the Panel element via `style`, the clip height will not
+ * account for it and content at the bottom will be clipped. To pad the panel,
+ * put padding on a child View **inside** the Panel instead, or use a
+ * `measurePadding` prop. See `Accordion.Panel` for the same caveat.
  */
-export declare function CollapsiblePanel(componentProps: CollapsiblePanel.Props): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export declare function CollapsiblePanel(componentProps: CollapsiblePanel.Props): React.JSX.Element;
 export interface CollapsiblePanelState extends CollapsibleRootState {
     /**
      * The transition status of the component.
@@ -38,6 +46,16 @@ export interface CollapsiblePanelProps extends ZestUIComponentProps<typeof View,
      * @default false
      */
     keepMounted?: boolean | undefined;
+    /**
+     * Padding applied to the inner measurement wrapper so the reported
+     * `height`/`width` reflect the padded content size.
+     *
+     * Use this instead of `style.padding` on the panel element to avoid the
+     * padding footgun where the clip height does not account for padding.
+     * The padding is applied inside the clip, so the animation height
+     * naturally includes it.
+     */
+    measurePadding?: MeasurePadding | undefined;
 }
 export declare namespace CollapsiblePanel {
     type State = CollapsiblePanelState;

package/lib/collapsible/panel/CollapsiblePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsiblePanel.d.ts","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGxD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,KAAK,iFAkCtE;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IACjE;;OAEG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;IACnC;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,qBACf,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,qBAAqB,CAAC;IAChE;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnC;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,KAAK,GAAG,qBAAqB,CAAC;IAC1C,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC3C"}
+{"version":3,"file":"CollapsiblePanel.d.ts","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAMjF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,KAAK,qBAmDtE;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IACjE;;OAEG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;IACnC;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,qBACf,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,qBAAqB,CAAC;IAChE;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;CAC7C;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,KAAK,GAAG,qBAAqB,CAAC;IAC1C,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC3C"}

package/lib/collapsible/panel/CollapsiblePanel.js

@@ -35,11 +35,13 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsiblePanel = CollapsiblePanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const useRenderElement_1 = require("../../use-render/useRenderElement");
 const CollapsibleRootContext_1 = require("../root/CollapsibleRootContext");
 const useCollapsiblePanel_1 = require("./useCollapsiblePanel");
+const CollapsiblePanelContext_1 = require("./CollapsiblePanelContext");
 /**
  * A panel with the collapsible contents.
  * Renders a `<View>`.
@@ -48,12 +50,20 @@ const useCollapsiblePanel_1 = require("./useCollapsiblePanel");
  * object as `height`/`width` — the React Native counterpart of the web version's
  * `--collapsible-panel-height` CSS variable. Drive an `Animated` value from
  * `state.height` and `state.transitionStatus` to animate the panel.
+ *
+ * ⚠️ **Padding footgun:** The measured `height`/`width` reflects the natural
+ * content size of the panel's **children**, not the panel element itself. If you
+ * apply `padding` on the Panel element via `style`, the clip height will not
+ * account for it and content at the bottom will be clipped. To pad the panel,
+ * put padding on a child View **inside** the Panel instead, or use a
+ * `measurePadding` prop. See `Accordion.Panel` for the same caveat.
  */
 function CollapsiblePanel(componentProps) {
-    const { className, keepMounted = false, render, style, ref, children, ...elementProps } = componentProps;
+    const { className, keepMounted = false, measurePadding, render, style, ref, children, ...elementProps } = componentProps;
     const { state: rootState, transitionStatus } = (0, CollapsibleRootContext_1.useCollapsibleRootContext)();
     const { dimensions, props, shouldRender, wrappedChildren } = (0, useCollapsiblePanel_1.useCollapsiblePanel)({
         keepMounted,
+        measurePadding,
         children,
     });
     const state = React.useMemo(() => ({
@@ -62,11 +72,17 @@ function CollapsiblePanel(componentProps) {
         height: dimensions.height,
         width: dimensions.width,
     }), [rootState, transitionStatus, dimensions.height, dimensions.width]);
-    return (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
+    const panelContext = React.useMemo(() => ({
+        height: dimensions.height,
+        width: dimensions.width,
+        transitionStatus,
+    }), [dimensions.height, dimensions.width, transitionStatus]);
+    const element = (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
         state,
         ref,
         enabled: shouldRender,
         props: [props, elementProps, { children: wrappedChildren }],
     });
+    return ((0, jsx_runtime_1.jsx)(CollapsiblePanelContext_1.CollapsiblePanelContextContext.Provider, { value: panelContext, children: element }));
 }
 //# sourceMappingURL=CollapsiblePanel.js.map

package/lib/collapsible/panel/CollapsiblePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsiblePanel.js","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBb,4CAkCC;AApDD,6CAA+B;AAC/B,+CAAoC;AACpC,wEAAqE;AACrE,2EAA2E;AAI3E,+DAA4D;AAE5D;;;;;;;;GAQG;AACH,SAAgB,gBAAgB,CAAC,cAAsC;IACrE,MAAM,EACJ,SAAS,EACT,WAAW,GAAG,KAAK,EACnB,MAAM,EACN,KAAK,EACL,GAAG,EACH,QAAQ,EACR,GAAG,YAAY,EAChB,GAAG,cAAc,CAAC;IAEnB,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IAE3E,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAA,yCAAmB,EAAC;QAC/E,WAAW;QACX,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,KAAK,GAA0B,KAAK,CAAC,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,SAAS;QACZ,gBAAgB;QAChB,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,KAAK,EAAE,UAAU,CAAC,KAAK;KACxB,CAAC,EACF,CAAC,SAAS,EAAE,gBAAgB,EAAE,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CACnE,CAAC;IAEF,OAAO,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QAC5C,KAAK;QACL,GAAG;QACH,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;KAC5D,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"CollapsiblePanel.js","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Bb,4CAmDC;;AAhFD,6CAA+B;AAC/B,+CAAoC;AACpC,wEAAqE;AACrE,2EAA2E;AAI3E,+DAAiF;AACjF,uEAGmC;AAEnC;;;;;;;;;;;;;;;GAeG;AACH,SAAgB,gBAAgB,CAAC,cAAsC;IACrE,MAAM,EACJ,SAAS,EACT,WAAW,GAAG,KAAK,EACnB,cAAc,EACd,MAAM,EACN,KAAK,EACL,GAAG,EACH,QAAQ,EACR,GAAG,YAAY,EAChB,GAAG,cAAc,CAAC;IAEnB,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IAE3E,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAA,yCAAmB,EAAC;QAC/E,WAAW;QACX,cAAc;QACd,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,KAAK,GAA0B,KAAK,CAAC,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,SAAS;QACZ,gBAAgB;QAChB,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,KAAK,EAAE,UAAU,CAAC,KAAK;KACxB,CAAC,EACF,CAAC,SAAS,EAAE,gBAAgB,EAAE,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CACnE,CAAC;IAEF,MAAM,YAAY,GAA4B,KAAK,CAAC,OAAO,CACzD,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,gBAAgB;KACjB,CAAC,EACF,CAAC,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,gBAAgB,CAAC,CACxD,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QACrD,KAAK;QACL,GAAG;QACH,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;KAC5D,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,wDAA8B,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACzD,OAAO,GACgC,CAC3C,CAAC;AACJ,CAAC"}

package/lib/collapsible/panel/CollapsiblePanelContext.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+export interface CollapsiblePanelContext {
+    /**
+     * The measured natural height of the panel contents, or `undefined` before
+     * the first measurement.
+     */
+    height: number | undefined;
+    /**
+     * The measured natural width of the panel contents, or `undefined` before
+     * the first measurement.
+     */
+    width: number | undefined;
+    /**
+     * The transition status of the panel, for driving enter/exit animations.
+     */
+    transitionStatus: TransitionStatus;
+}
+export declare const CollapsiblePanelContextContext: React.Context<CollapsiblePanelContext | undefined>;
+export declare function useCollapsiblePanelState(): CollapsiblePanelContext;
+//# sourceMappingURL=CollapsiblePanelContext.d.ts.map

package/lib/collapsible/panel/CollapsiblePanelContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsiblePanelContext.d.ts","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanelContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAE5E,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED,eAAO,MAAM,8BAA8B,oDAC0B,CAAC;AAEtE,wBAAgB,wBAAwB,4BASvC"}

package/lib/collapsible/panel/CollapsiblePanelContext.js

@@ -0,0 +1,48 @@
+"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.CollapsiblePanelContextContext = void 0;
+exports.useCollapsiblePanelState = useCollapsiblePanelState;
+const React = __importStar(require("react"));
+exports.CollapsiblePanelContextContext = React.createContext(undefined);
+function useCollapsiblePanelState() {
+    const context = React.useContext(exports.CollapsiblePanelContextContext);
+    if (context === undefined) {
+        throw new Error('Zest: CollapsiblePanelContext is missing. Panel state can only be accessed within <Collapsible.Panel> or <Accordion.Panel>.');
+    }
+    return context;
+}
+//# sourceMappingURL=CollapsiblePanelContext.js.map

package/lib/collapsible/panel/CollapsiblePanelContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsiblePanelContext.js","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanelContext.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBb,4DASC;AAhCD,6CAA+B;AAoBlB,QAAA,8BAA8B,GACzC,KAAK,CAAC,aAAa,CAAsC,SAAS,CAAC,CAAC;AAEtE,SAAgB,wBAAwB;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,sCAA8B,CAAC,CAAC;IACjE,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CACb,6HAA6H,CAC9H,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/lib/collapsible/panel/useCollapsiblePanel.d.ts

@@ -24,8 +24,25 @@ export declare function useCollapsiblePanel(parameters: UseCollapsiblePanelParam
     shouldRender: boolean;
     wrappedChildren: React.JSX.Element;
 };
+/**
+ * Padding insets that are applied to the inner measurement wrapper so the
+ * reported `height`/`width` on the panel state reflect the padded content size.
+ * Without this, padding on the panel element itself will cause clipped content.
+ */
+export interface MeasurePadding {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
 export interface UseCollapsiblePanelParameters {
     keepMounted: boolean;
+    /**
+     * Padding applied to the inner measurement wrapper.
+     * Use this instead of `style.padding` on the panel element to avoid the
+     * padding footgun where the clip height does not account for padding.
+     */
+    measurePadding?: MeasurePadding | undefined;
     children: React.ReactNode;
 }
 export {};

package/lib/collapsible/panel/useCollapsiblePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCollapsiblePanel.d.ts","sourceRoot":"","sources":["../../../src/collapsible/panel/useCollapsiblePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,UAAU;IAClB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAID;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,6BAA6B;;;;;;;;;;;;;EAgD5E;AAED,MAAM,WAAW,6BAA6B;IAC5C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
+{"version":3,"file":"useCollapsiblePanel.d.ts","sourceRoot":"","sources":["../../../src/collapsible/panel/useCollapsiblePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,UAAU;IAClB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAID;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,6BAA6B;;;;;;;;;;;;;EAsD5E;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,6BAA6B;IAC5C,WAAW,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/lib/collapsible/panel/useCollapsiblePanel.js

@@ -49,7 +49,7 @@ const EMPTY_DIMENSIONS = { height: undefined, width: undefined };
  * natural content size and managing the mount lifecycle; the consumer animates.
  */
 function useCollapsiblePanel(parameters) {
-    const { keepMounted, children } = parameters;
+    const { keepMounted, measurePadding, children } = parameters;
     const { mounted, open, panelId, setMounted } = (0, CollapsibleRootContext_1.useCollapsibleRootContext)();
     const [dimensions, setDimensions] = React.useState(EMPTY_DIMENSIONS);
     // Nothing can report when a closing animation finished, so a panel that isn't
@@ -74,7 +74,9 @@ function useCollapsiblePanel(parameters) {
     }), [panelId, open]);
     // The panel's own size is consumer-driven, so the natural content size has to
     // be measured on an inner element that is never height-constrained.
-    const wrappedChildren = React.useMemo(() => (0, jsx_runtime_1.jsx)(react_native_1.View, { onLayout: handleContentLayout, children: children }), [handleContentLayout, children]);
+    // When `measurePadding` is set, it is applied to the inner measurement
+    // wrapper so the reported `height`/`width` reflect the padded content size.
+    const wrappedChildren = React.useMemo(() => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: measurePadding, onLayout: handleContentLayout, children: children })), [handleContentLayout, measurePadding, children]);
     return {
         dimensions,
         props,

package/lib/collapsible/panel/useCollapsiblePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCollapsiblePanel.js","sourceRoot":"","sources":["../../../src/collapsible/panel/useCollapsiblePanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBb,kDAgDC;;AAnED,6CAA+B;AAC/B,+CAA4D;AAC5D,uEAAoE;AACpE,2EAA2E;AAO3E,MAAM,gBAAgB,GAAe,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAE7E;;;;;;GAMG;AACH,SAAgB,mBAAmB,CAAC,UAAyC;IAC3E,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC;IAE7C,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IAE3E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAa,gBAAgB,CAAC,CAAC;IAEjF,8EAA8E;IAC9E,kDAAkD;IAClD,IAAA,uCAAkB,EAAC,GAAG,EAAE;QACtB,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;YACrC,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAE7C,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAwB,EAAE,EAAE;QACzE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QACnD,aAAa,CAAC,CAAC,QAAQ,EAAE,EAAE,CACzB,QAAQ,CAAC,MAAM,KAAK,MAAM,IAAI,QAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CACtF,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,OAAO;QACjB,yEAAyE;QACzE,2DAA2D;QAC3D,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAiB,EAAE;QACtC,aAAa,EAAE,CAAC,IAAI,IAAI,SAAS;QACjC,2BAA2B,EAAE,CAAC,IAAI;QAClC,yBAAyB,EAAE,IAAI,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAE,qBAA+B;KACvF,CAAC,EACF,CAAC,OAAO,EAAE,IAAI,CAAC,CAChB,CAAC;IAEF,8EAA8E;IAC9E,oEAAoE;IACpE,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CACnC,GAAG,EAAE,CAAC,uBAAC,mBAAI,IAAC,QAAQ,EAAE,mBAAmB,YAAG,QAAQ,GAAQ,EAC5D,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAChC,CAAC;IAEF,OAAO;QACL,UAAU;QACV,KAAK;QACL,YAAY,EAAE,WAAW,IAAI,OAAO;QACpC,eAAe;KAChB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"useCollapsiblePanel.js","sourceRoot":"","sources":["../../../src/collapsible/panel/useCollapsiblePanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBb,kDAsDC;;AAzED,6CAA+B;AAC/B,+CAA4D;AAC5D,uEAAoE;AACpE,2EAA2E;AAO3E,MAAM,gBAAgB,GAAe,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAE7E;;;;;;GAMG;AACH,SAAgB,mBAAmB,CAAC,UAAyC;IAC3E,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC;IAE7D,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IAE3E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAa,gBAAgB,CAAC,CAAC;IAEjF,8EAA8E;IAC9E,kDAAkD;IAClD,IAAA,uCAAkB,EAAC,GAAG,EAAE;QACtB,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;YACrC,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAE7C,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAwB,EAAE,EAAE;QACzE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QACnD,aAAa,CAAC,CAAC,QAAQ,EAAE,EAAE,CACzB,QAAQ,CAAC,MAAM,KAAK,MAAM,IAAI,QAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CACtF,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,OAAO;QACjB,yEAAyE;QACzE,2DAA2D;QAC3D,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAiB,EAAE;QACtC,aAAa,EAAE,CAAC,IAAI,IAAI,SAAS;QACjC,2BAA2B,EAAE,CAAC,IAAI;QAClC,yBAAyB,EAAE,IAAI,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAE,qBAA+B;KACvF,CAAC,EACF,CAAC,OAAO,EAAE,IAAI,CAAC,CAChB,CAAC;IAEF,8EAA8E;IAC9E,oEAAoE;IACpE,uEAAuE;IACvE,4EAA4E;IAC5E,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CACnC,GAAG,EAAE,CAAC,CACJ,uBAAC,mBAAI,IAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,mBAAmB,YACvD,QAAQ,GACJ,CACR,EACD,CAAC,mBAAmB,EAAE,cAAc,EAAE,QAAQ,CAAC,CAChD,CAAC;IAEF,OAAO;QACL,UAAU;QACV,KAAK;QACL,YAAY,EAAE,WAAW,IAAI,OAAO;QACpC,eAAe;KAChB,CAAC;AACJ,CAAC"}

package/lib/internals/useTransitionStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTransitionStatus.d.ts","sourceRoot":"","sources":["../../src/internals/useTransitionStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1E;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,eAAe,GAAE,OAAe,EAChC,gBAAgB,GAAE,OAAe;;;;EAuElC"}
+{"version":3,"file":"useTransitionStatus.d.ts","sourceRoot":"","sources":["../../src/internals/useTransitionStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1E;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,eAAe,GAAE,OAAe,EAChC,gBAAgB,GAAE,OAAe;;;;EAqElC"}

package/lib/internals/useTransitionStatus.js

@@ -52,16 +52,18 @@ const useAnimationFrame_1 = require("../hooks/useAnimationFrame");
 function useTransitionStatus(open, enableIdleState = false, deferEndingState = false) {
     const [transitionStatus, setTransitionStatus] = React.useState(open && enableIdleState ? 'idle' : undefined);
     const [mounted, setMounted] = React.useState(open);
-    if (open && !mounted) {
-        setMounted(true);
-        setTransitionStatus('starting');
-    }
-    if (!open && mounted && transitionStatus !== 'ending' && !deferEndingState) {
-        setTransitionStatus('ending');
-    }
-    if (!open && !mounted && transitionStatus === 'ending') {
-        setTransitionStatus(undefined);
-    }
+    (0, useIsoLayoutEffect_1.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]);
     (0, useIsoLayoutEffect_1.useIsoLayoutEffect)(() => {
         if (!open && mounted && transitionStatus !== 'ending' && deferEndingState) {
             const frame = useAnimationFrame_1.AnimationFrame.request(() => {

package/lib/internals/useTransitionStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTransitionStatus.js","sourceRoot":"","sources":["../../src/internals/useTransitionStatus.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTransitionStatus.js","sourceRoot":"","sources":["../../src/internals/useTransitionStatus.ts"],"names":[],"mappings":"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"}

package/lib/switch/thumb/SwitchThumb.d.ts

@@ -1,14 +1,31 @@
 import { View } from 'react-native';
+import { type TransitionStatus } from '../../internals/useTransitionStatus';
 import type { SwitchRootState } from '../root/SwitchRoot';
 import type { ZestUIComponentProps } from '../../types';
 /**
  * The movable part of the switch that indicates whether the switch is on or off.
- * Renders a `<View>`.
+ * Renders a `<View>`, or nothing when the switch is unchecked.
+ *
+ * Follows the animation contract: with `keepMounted`, the thumb stays mounted
+ * while unchecked and publishes `transitionStatus` so the consumer can animate
+ * it out. Without it, the thumb unmounts the moment it unchecks — React Native
+ * cannot report when an exit animation finished.
  */
-export declare function SwitchThumb(componentProps: SwitchThumb.Props): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function SwitchThumb(componentProps: SwitchThumb.Props): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 export interface SwitchThumbState extends SwitchRootState {
+    /**
+     * The transition status of the thumb, for driving enter/exit animations.
+     */
+    transitionStatus: TransitionStatus;
 }
 export interface SwitchThumbProps extends ZestUIComponentProps<typeof View, SwitchThumbState> {
+    /**
+     * Whether to keep the element mounted when the switch is unchecked.
+     *
+     * Required to animate the thumb out; without it, it unmounts on uncheck.
+     * @default false
+     */
+    keepMounted?: boolean | undefined;
 }
 export declare namespace SwitchThumb {
     type State = SwitchThumbState;

package/lib/switch/thumb/SwitchThumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchThumb.d.ts","sourceRoot":"","sources":["../../../src/switch/thumb/SwitchThumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,cAAc,EAAE,WAAW,CAAC,KAAK,8FAU5D;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;CAAG;AAE5D,MAAM,WAAW,gBACf,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,gBAAgB,CAAC;CAAG;AAEhE,yBAAiB,WAAW,CAAC;IAC3B,KAAY,KAAK,GAAG,gBAAgB,CAAC;IACrC,KAAY,KAAK,GAAG,gBAAgB,CAAC;CACtC"}
+{"version":3,"file":"SwitchThumb.d.ts","sourceRoot":"","sources":["../../../src/switch/thumb/SwitchThumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,cAAc,EAAE,WAAW,CAAC,KAAK,qGAyB5D;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD;;OAEG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED,MAAM,WAAW,gBACf,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,gBAAgB,CAAC;IAC3D;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnC;AAED,yBAAiB,WAAW,CAAC;IAC3B,KAAY,KAAK,GAAG,gBAAgB,CAAC;IACrC,KAAY,KAAK,GAAG,gBAAgB,CAAC;CACtC"}

package/lib/switch/thumb/SwitchThumb.js

@@ -5,16 +5,34 @@ exports.SwitchThumb = SwitchThumb;
 const react_native_1 = require("react-native");
 const SwitchRootContext_1 = require("../root/SwitchRootContext");
 const useRenderElement_1 = require("../../use-render/useRenderElement");
+const useIsoLayoutEffect_1 = require("../../hooks/useIsoLayoutEffect");
+const useTransitionStatus_1 = require("../../internals/useTransitionStatus");
 /**
  * The movable part of the switch that indicates whether the switch is on or off.
- * Renders a `<View>`.
+ * Renders a `<View>`, or nothing when the switch is unchecked.
+ *
+ * Follows the animation contract: with `keepMounted`, the thumb stays mounted
+ * while unchecked and publishes `transitionStatus` so the consumer can animate
+ * it out. Without it, the thumb unmounts the moment it unchecks — React Native
+ * cannot report when an exit animation finished.
  */
 function SwitchThumb(componentProps) {
-    const { render, className, style, ref, ...elementProps } = componentProps;
-    const state = (0, SwitchRootContext_1.useSwitchRootContext)();
+    const { render, className, style, keepMounted = false, ref, ...elementProps } = componentProps;
+    const rootState = (0, SwitchRootContext_1.useSwitchRootContext)();
+    const { mounted, transitionStatus, setMounted } = (0, useTransitionStatus_1.useTransitionStatus)(rootState.checked);
+    // Nothing reports when an exit animation finished, so a thumb that isn't
+    // kept mounted is unmounted the moment it unchecks.
+    (0, useIsoLayoutEffect_1.useIsoLayoutEffect)(() => {
+        if (!rootState.checked && mounted && !keepMounted) {
+            setMounted(false);
+        }
+    }, [rootState.checked, mounted, keepMounted, setMounted]);
+    const state = { ...rootState, transitionStatus };
+    const shouldRender = keepMounted || mounted;
     return (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
         state,
         ref,
+        enabled: shouldRender,
         props: elementProps,
     });
 }

package/lib/switch/thumb/SwitchThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchThumb.js","sourceRoot":"","sources":["../../../src/switch/thumb/SwitchThumb.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAWb,kCAUC;AApBD,+CAAoC;AACpC,iEAAiE;AACjE,wEAAqE;AAIrE;;;GAGG;AACH,SAAgB,WAAW,CAAC,cAAiC;IAC3D,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,cAAc,CAAC;IAE1E,MAAM,KAAK,GAAG,IAAA,wCAAoB,GAAE,CAAC;IAErC,OAAO,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QAC5C,KAAK;QACL,GAAG;QACH,KAAK,EAAE,YAAY;KACpB,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"SwitchThumb.js","sourceRoot":"","sources":["../../../src/switch/thumb/SwitchThumb.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAkBb,kCAyBC;AA1CD,+CAAoC;AACpC,iEAAiE;AACjE,wEAAqE;AACrE,uEAAoE;AACpE,6EAAiG;AAIjG;;;;;;;;GAQG;AACH,SAAgB,WAAW,CAAC,cAAiC;IAC3D,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,cAAc,CAAC;IAE/F,MAAM,SAAS,GAAG,IAAA,wCAAoB,GAAE,CAAC;IAEzC,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAAG,IAAA,yCAAmB,EAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAEzF,yEAAyE;IACzE,oDAAoD;IACpD,IAAA,uCAAkB,EAAC,GAAG,EAAE;QACtB,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;YAClD,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAE1D,MAAM,KAAK,GAAqB,EAAE,GAAG,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAEnE,MAAM,YAAY,GAAG,WAAW,IAAI,OAAO,CAAC;IAE5C,OAAO,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QAC5C,KAAK;QACL,GAAG;QACH,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,YAAY;KACpB,CAAC,CAAC;AACL,CAAC"}