@tamagui/collapsible 1.0.1-beta.219 → 1.0.1-beta.221

package/dist/cjs/Collapsible.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,138 +15,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Collapsible_exports = {};
 __export(Collapsible_exports, {
-  Collapsible: () => Collapsible,
-  CollapsibleContent: () => CollapsibleContent,
-  CollapsibleTrigger: () => CollapsibleTrigger,
-  Content: () => Content,
-  Root: () => Root,
-  Trigger: () => Trigger,
-  createCollapsibleScope: () => createCollapsibleScope
+  Collapsible: () => Collapsible
 });
 module.exports = __toCommonJS(Collapsible_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_compose_refs = require("@tamagui/compose-refs");
-var import_core = require("@tamagui/core");
-var import_core2 = require("@tamagui/core");
-var import_create_context = require("@tamagui/create-context");
-var import_use_controllable_state = require("@tamagui/use-controllable-state");
-var React = __toESM(require("react"));
-const COLLAPSIBLE_NAME = "Collapsible";
-const [createCollapsibleContext, createCollapsibleScope] = (0, import_create_context.createContextScope)(COLLAPSIBLE_NAME);
-const [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
-const Collapsible = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeCollapsible,
-      open: openProp,
-      defaultOpen,
-      disabled,
-      onOpenChange,
-      ...collapsibleProps
-    } = props;
-    const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
-      prop: openProp,
-      defaultProp: defaultOpen || false,
-      onChange: onOpenChange
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleProvider, {
-      scope: __scopeCollapsible,
-      disabled,
-      contentId: (0, import_core2.useId)() || "",
-      open,
-      onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, {
-        "data-state": getState(open),
-        "data-disabled": disabled ? "" : void 0,
-        ...collapsibleProps,
-        ref: forwardedRef
-      })
-    });
-  }
-);
-Collapsible.displayName = COLLAPSIBLE_NAME;
-const TRIGGER_NAME = "CollapsibleTrigger";
-const CollapsibleTrigger = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeCollapsible, ...triggerProps } = props;
-    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, {
-      type: "button",
-      "aria-controls": context.contentId,
-      "aria-expanded": context.open || false,
-      "data-state": getState(context.open),
-      "data-disabled": context.disabled ? "" : void 0,
-      disabled: context.disabled,
-      ...triggerProps,
-      ref: forwardedRef,
-      onPress: (0, import_core.composeEventHandlers)(props.onPress, context.onOpenToggle)
-    });
-  }
-);
-CollapsibleTrigger.displayName = TRIGGER_NAME;
-const CONTENT_NAME = "CollapsibleContent";
-const CollapsibleContent = React.forwardRef(
-  (props, forwardedRef) => {
-    const { forceMount, ...contentProps } = props;
-    const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-      children: ({ present }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleContentImpl, {
-        ...contentProps,
-        ref: forwardedRef,
-        present
-      })
-    });
-  }
-);
-CollapsibleContent.displayName = CONTENT_NAME;
-const CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
-  const { __scopeCollapsible, present, children, ...contentProps } = props;
-  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
-  const [isPresent, setIsPresent] = React.useState(present);
-  const ref = React.useRef(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
-  const heightRef = React.useRef(0);
-  const height = heightRef.current;
-  const widthRef = React.useRef(0);
-  const width = widthRef.current;
-  const isOpen = context.open || isPresent;
-  const isMountAnimationPreventedRef = React.useRef(isOpen);
-  const originalStylesRef = React.useRef();
-  React.useEffect(() => {
-    const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
-    return () => cancelAnimationFrame(rAF);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, {
-    "data-state": getState(context.open),
-    "data-disabled": context.disabled ? "" : void 0,
-    id: context.contentId,
-    hidden: !isOpen,
-    ...contentProps,
-    ref: composedRefs,
-    children: isOpen && children
-  });
-});
-function getState(open) {
-  return open ? "open" : "closed";
-}
-const Root = Collapsible;
-const Trigger = CollapsibleTrigger;
-const Content = CollapsibleContent;
+const Collapsible = {};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Content,
-  Root,
-  Trigger,
-  createCollapsibleScope
+  Collapsible
 });
 //# sourceMappingURL=Collapsible.js.map

package/dist/cjs/Collapsible.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Collapsible.tsx"],
-  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  Stack,\n  StackProps,\n  TamaguiElement,\n  composeEventHandlers,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { useId } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport type { Scope } from '@tamagui/create-context'\n// import { Presence } from '@tamagui/react-presence'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible'\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope }\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)\n\ntype CollapsibleContextValue = {\n  contentId: string\n  disabled?: boolean\n  open: boolean\n  onOpenToggle(): void\n}\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n  createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME)\n\ntype CollapsibleElement = TamaguiElement\ninterface CollapsibleProps extends StackProps {\n  defaultOpen?: boolean\n  open?: boolean\n  disabled?: boolean\n  onOpenChange?(open: boolean): void\n}\n\nconst Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(\n  (props: ScopedProps<CollapsibleProps>, forwardedRef) => {\n    const {\n      __scopeCollapsible,\n      open: openProp,\n      defaultOpen,\n      disabled,\n      onOpenChange,\n      ...collapsibleProps\n    } = props\n\n    const [open, setOpen] = useControllableState({\n      prop: openProp,\n      defaultProp: defaultOpen || false,\n      onChange: onOpenChange,\n    })\n\n    return (\n      <CollapsibleProvider\n        scope={__scopeCollapsible}\n        disabled={disabled}\n        contentId={useId() || ''}\n        open={open}\n        onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n      >\n        <Stack\n          data-state={getState(open)}\n          data-disabled={disabled ? '' : undefined}\n          {...collapsibleProps}\n          // @ts-expect-error\n          ref={forwardedRef}\n        />\n      </CollapsibleProvider>\n    )\n  }\n)\n\nCollapsible.displayName = COLLAPSIBLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CollapsibleTrigger'\n\ntype CollapsibleTriggerElement = TamaguiElement\ninterface CollapsibleTriggerProps extends StackProps {}\n\nconst CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n  (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n    const { __scopeCollapsible, ...triggerProps } = props\n    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible)\n    return (\n      <Stack\n        type=\"button\"\n        aria-controls={context.contentId}\n        aria-expanded={context.open || false}\n        data-state={getState(context.open)}\n        data-disabled={context.disabled ? '' : undefined}\n        disabled={context.disabled}\n        {...triggerProps}\n        // @ts-expect-error\n        ref={forwardedRef}\n        onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n      />\n    )\n  }\n)\n\nCollapsibleTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'CollapsibleContent'\n\ntype CollapsibleContentElement = CollapsibleContentImplElement\ninterface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true\n}\n\nconst CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n  (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n    const { forceMount, ...contentProps } = props\n    const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible)\n    return (\n      // <Presence present={forceMount || context.open}>\n      <>\n        {({ present }) => (\n          <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n        )}\n      </>\n      // </Presence>\n    )\n  }\n)\n\nCollapsibleContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = TamaguiElement\ninterface CollapsibleContentImplProps extends StackProps {\n  present: boolean\n}\n\nconst CollapsibleContentImpl = React.forwardRef<\n  CollapsibleContentImplElement,\n  CollapsibleContentImplProps\n>((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {\n  const { __scopeCollapsible, present, children, ...contentProps } = props\n  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible)\n  const [isPresent, setIsPresent] = React.useState(present)\n  const ref = React.useRef<CollapsibleContentImplElement>(null)\n  const composedRefs = useComposedRefs(forwardedRef, ref)\n  const heightRef = React.useRef<number | undefined>(0)\n  const height = heightRef.current\n  const widthRef = React.useRef<number | undefined>(0)\n  const width = widthRef.current\n  // when opening we want it to immediately open to retrieve dimensions\n  // when closing we delay `present` to retrieve dimensions before closing\n  const isOpen = context.open || isPresent\n  const isMountAnimationPreventedRef = React.useRef(isOpen)\n  const originalStylesRef = React.useRef<Record<string, string>>()\n\n  React.useEffect(() => {\n    const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false))\n    return () => cancelAnimationFrame(rAF)\n  }, [])\n\n  // useIsomorphicLayoutEffect(() => {\n  //   const node = ref.current\n  //   if (node) {\n  //     originalStylesRef.current = originalStylesRef.current || {\n  //       transitionDuration: node.style.transitionDuration,\n  //       animationDuration: node.style.animationDuration,\n  //       animationFillMode: node.style.animationFillMode,\n  //     }\n  //     // block any animations/transitions so the element renders at its full dimensions\n  //     node.style.transitionDuration = '0s'\n  //     node.style.animationDuration = '0s'\n  //     node.style.animationFillMode = 'none'\n\n  //     // get width and height from full dimensions\n  //     const rect = node.getBoundingClientRect()\n  //     heightRef.current = rect.height\n  //     widthRef.current = rect.width\n\n  //     // kick off any animations/transitions that were originally set up if it isn't the initial mount\n  //     if (!isMountAnimationPreventedRef.current) {\n  //       node.style.transitionDuration = originalStylesRef.current.transitionDuration\n  //       node.style.animationDuration = originalStylesRef.current.animationDuration\n  //       node.style.animationFillMode = originalStylesRef.current.animationFillMode\n  //     }\n\n  //     setIsPresent(present)\n  //   }\n  //   /**\n  //    * depends on `context.open` because it will change to `false`\n  //    * when a close is triggered but `present` will be `false` on\n  //    * animation end (so when close finishes). This allows us to\n  //    * retrieve the dimensions *before* closing.\n  //    */\n  // }, [context.open, present])\n\n  return (\n    <Stack\n      data-state={getState(context.open)}\n      data-disabled={context.disabled ? '' : undefined}\n      id={context.contentId}\n      hidden={!isOpen}\n      {...contentProps}\n      // @ts-expect-error\n      ref={composedRefs}\n      // style={{\n      //   [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n      //   [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n      //   ...props.style,\n      // }}\n    >\n      {isOpen && children}\n    </Stack>\n  )\n})\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n  return open ? 'open' : 'closed'\n}\n\nconst Root = Collapsible\nconst Trigger = CollapsibleTrigger\nconst Content = CollapsibleContent\n\nexport {\n  createCollapsibleScope,\n  //\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  //\n  Root,\n  Trigger,\n  Content,\n}\nexport type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps }\n"],
-  "mappings": "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",
-  "names": ["import_core"]
+  "sourcesContent": ["export const Collapsible = {}\n\n// import { useComposedRefs } from '@tamagui/compose-refs'\n// import { Stack, StackProps, TamaguiElement, composeEventHandlers, useId } from '@tamagui/core'\n// import type { Scope } from '@tamagui/create-context'\n// import { createContextScope } from '@tamagui/create-context'\n// // import { Presence } from '@tamagui/react-presence'\n// import { useControllableState } from '@tamagui/use-controllable-state'\n// import * as React from 'react'\n\n// /* -------------------------------------------------------------------------------------------------\n//  * Collapsible\n//  * -----------------------------------------------------------------------------------------------*/\n\n// const COLLAPSIBLE_NAME = 'Collapsible'\n\n// type ScopedProps<P> = P & { __scopeCollapsible?: Scope }\n// const [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)\n\n// type CollapsibleContextValue = {\n//   contentId: string\n//   disabled?: boolean\n//   open: boolean\n//   onOpenToggle(): void\n// }\n\n// const [CollapsibleProvider, useCollapsibleContext] =\n//   createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME)\n\n// type CollapsibleElement = TamaguiElement\n// interface CollapsibleProps extends StackProps {\n//   defaultOpen?: boolean\n//   open?: boolean\n//   disabled?: boolean\n//   onOpenChange?(open: boolean): void\n// }\n\n// const Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(\n//   (props: ScopedProps<CollapsibleProps>, forwardedRef) => {\n//     const {\n//       __scopeCollapsible,\n//       open: openProp,\n//       defaultOpen,\n//       disabled,\n//       onOpenChange,\n//       ...collapsibleProps\n//     } = props\n\n//     const [open, setOpen] = useControllableState({\n//       prop: openProp,\n//       defaultProp: defaultOpen || false,\n//       onChange: onOpenChange,\n//     })\n\n//     return (\n//       <CollapsibleProvider\n//         scope={__scopeCollapsible}\n//         disabled={disabled}\n//         contentId={useId() || ''}\n//         open={open}\n//         onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n//       >\n//         <Stack\n//           data-state={getState(open)}\n//           data-disabled={disabled ? '' : undefined}\n//           {...collapsibleProps}\n//           ref={forwardedRef}\n//         />\n//       </CollapsibleProvider>\n//     )\n//   }\n// )\n\n// Collapsible.displayName = COLLAPSIBLE_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n//  * CollapsibleTrigger\n//  * -----------------------------------------------------------------------------------------------*/\n\n// const TRIGGER_NAME = 'CollapsibleTrigger'\n\n// type CollapsibleTriggerElement = TamaguiElement\n// interface CollapsibleTriggerProps extends StackProps {}\n\n// const CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n//   (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n//     const { __scopeCollapsible, ...triggerProps } = props\n//     const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible)\n//     return (\n//       <Stack\n//         type=\"button\"\n//         aria-controls={context.contentId}\n//         aria-expanded={context.open || false}\n//         data-state={getState(context.open)}\n//         data-disabled={context.disabled ? '' : undefined}\n//         disabled={context.disabled}\n//         {...triggerProps}\n//         ref={forwardedRef}\n//         //\n//         // onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n//       />\n//     )\n//   }\n// )\n\n// CollapsibleTrigger.displayName = TRIGGER_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n//  * CollapsibleContent\n//  * -----------------------------------------------------------------------------------------------*/\n\n// const CONTENT_NAME = 'CollapsibleContent'\n\n// type CollapsibleContentElement = CollapsibleContentImplElement\n// interface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n//   /**\n//    * Used to force mounting when more control is needed. Useful when\n//    * controlling animation with React animation libraries.\n//    */\n//   forceMount?: true\n// }\n\n// const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n//   (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n//     const { forceMount, ...contentProps } = props\n//     const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible)\n//     return (\n//       // <Presence present={forceMount || context.open}>\n//       <>\n//         {({ present }) => (\n//           <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n//         )}\n//       </>\n//       // </Presence>\n//     )\n//   }\n// )\n\n// CollapsibleContent.displayName = CONTENT_NAME\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// type CollapsibleContentImplElement = TamaguiElement\n// interface CollapsibleContentImplProps extends StackProps {\n//   present: boolean\n// }\n\n// const CollapsibleContentImpl = React.forwardRef<\n//   CollapsibleContentImplElement,\n//   CollapsibleContentImplProps\n// >((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {\n//   const { __scopeCollapsible, present, children, ...contentProps } = props\n//   const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible)\n//   const [isPresent, setIsPresent] = React.useState(present)\n//   const ref = React.useRef<CollapsibleContentImplElement>(null)\n//   const composedRefs = useComposedRefs(forwardedRef, ref)\n//   const heightRef = React.useRef<number | undefined>(0)\n//   const height = heightRef.current\n//   const widthRef = React.useRef<number | undefined>(0)\n//   const width = widthRef.current\n//   // when opening we want it to immediately open to retrieve dimensions\n//   // when closing we delay `present` to retrieve dimensions before closing\n//   const isOpen = context.open || isPresent\n//   const isMountAnimationPreventedRef = React.useRef(isOpen)\n//   const originalStylesRef = React.useRef<Record<string, string>>()\n\n//   React.useEffect(() => {\n//     const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false))\n//     return () => cancelAnimationFrame(rAF)\n//   }, [])\n\n//   // useIsomorphicLayoutEffect(() => {\n//   //   const node = ref.current\n//   //   if (node) {\n//   //     originalStylesRef.current = originalStylesRef.current || {\n//   //       transitionDuration: node.style.transitionDuration,\n//   //       animationDuration: node.style.animationDuration,\n//   //       animationFillMode: node.style.animationFillMode,\n//   //     }\n//   //     // block any animations/transitions so the element renders at its full dimensions\n//   //     node.style.transitionDuration = '0s'\n//   //     node.style.animationDuration = '0s'\n//   //     node.style.animationFillMode = 'none'\n\n//   //     // get width and height from full dimensions\n//   //     const rect = node.getBoundingClientRect()\n//   //     heightRef.current = rect.height\n//   //     widthRef.current = rect.width\n\n//   //     // kick off any animations/transitions that were originally set up if it isn't the initial mount\n//   //     if (!isMountAnimationPreventedRef.current) {\n//   //       node.style.transitionDuration = originalStylesRef.current.transitionDuration\n//   //       node.style.animationDuration = originalStylesRef.current.animationDuration\n//   //       node.style.animationFillMode = originalStylesRef.current.animationFillMode\n//   //     }\n\n//   //     setIsPresent(present)\n//   //   }\n//   //   /**\n//   //    * depends on `context.open` because it will change to `false`\n//   //    * when a close is triggered but `present` will be `false` on\n//   //    * animation end (so when close finishes). This allows us to\n//   //    * retrieve the dimensions *before* closing.\n//   //    */\n//   // }, [context.open, present])\n\n//   return (\n//     <Stack\n//       data-state={getState(context.open)}\n//       data-disabled={context.disabled ? '' : undefined}\n//       id={context.contentId}\n//       hidden={!isOpen}\n//       {...contentProps}\n//       // @ts-expect-error\n//       ref={composedRefs}\n//       // style={{\n//       //   [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n//       //   [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n//       //   ...props.style,\n//       // }}\n//     >\n//       {isOpen && children}\n//     </Stack>\n//   )\n// })\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// function getState(open?: boolean) {\n//   return open ? 'open' : 'closed'\n// }\n\n// const Root = Collapsible\n// const Trigger = CollapsibleTrigger\n// const Content = CollapsibleContent\n\n// export {\n//   createCollapsibleScope,\n//   //\n//   Collapsible,\n//   CollapsibleTrigger,\n//   CollapsibleContent,\n//   //\n//   Root,\n//   Trigger,\n//   Content,\n// }\n// export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,cAAc,CAAC;",
+  "names": []
 }

package/dist/esm/Collapsible.js

@@ -1,121 +1,5 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { useComposedRefs } from "@tamagui/compose-refs";
-import {
-  Stack,
-  composeEventHandlers
-} from "@tamagui/core";
-import { useId } from "@tamagui/core";
-import { createContextScope } from "@tamagui/create-context";
-import { useControllableState } from "@tamagui/use-controllable-state";
-import * as React from "react";
-const COLLAPSIBLE_NAME = "Collapsible";
-const [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
-const [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
-const Collapsible = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeCollapsible,
-      open: openProp,
-      defaultOpen,
-      disabled,
-      onOpenChange,
-      ...collapsibleProps
-    } = props;
-    const [open, setOpen] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen || false,
-      onChange: onOpenChange
-    });
-    return /* @__PURE__ */ jsx(CollapsibleProvider, {
-      scope: __scopeCollapsible,
-      disabled,
-      contentId: useId() || "",
-      open,
-      onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
-      children: /* @__PURE__ */ jsx(Stack, {
-        "data-state": getState(open),
-        "data-disabled": disabled ? "" : void 0,
-        ...collapsibleProps,
-        ref: forwardedRef
-      })
-    });
-  }
-);
-Collapsible.displayName = COLLAPSIBLE_NAME;
-const TRIGGER_NAME = "CollapsibleTrigger";
-const CollapsibleTrigger = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeCollapsible, ...triggerProps } = props;
-    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
-    return /* @__PURE__ */ jsx(Stack, {
-      type: "button",
-      "aria-controls": context.contentId,
-      "aria-expanded": context.open || false,
-      "data-state": getState(context.open),
-      "data-disabled": context.disabled ? "" : void 0,
-      disabled: context.disabled,
-      ...triggerProps,
-      ref: forwardedRef,
-      onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
-    });
-  }
-);
-CollapsibleTrigger.displayName = TRIGGER_NAME;
-const CONTENT_NAME = "CollapsibleContent";
-const CollapsibleContent = React.forwardRef(
-  (props, forwardedRef) => {
-    const { forceMount, ...contentProps } = props;
-    const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
-    return /* @__PURE__ */ jsx(Fragment, {
-      children: ({ present }) => /* @__PURE__ */ jsx(CollapsibleContentImpl, {
-        ...contentProps,
-        ref: forwardedRef,
-        present
-      })
-    });
-  }
-);
-CollapsibleContent.displayName = CONTENT_NAME;
-const CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
-  const { __scopeCollapsible, present, children, ...contentProps } = props;
-  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
-  const [isPresent, setIsPresent] = React.useState(present);
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  const heightRef = React.useRef(0);
-  const height = heightRef.current;
-  const widthRef = React.useRef(0);
-  const width = widthRef.current;
-  const isOpen = context.open || isPresent;
-  const isMountAnimationPreventedRef = React.useRef(isOpen);
-  const originalStylesRef = React.useRef();
-  React.useEffect(() => {
-    const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
-    return () => cancelAnimationFrame(rAF);
-  }, []);
-  return /* @__PURE__ */ jsx(Stack, {
-    "data-state": getState(context.open),
-    "data-disabled": context.disabled ? "" : void 0,
-    id: context.contentId,
-    hidden: !isOpen,
-    ...contentProps,
-    ref: composedRefs,
-    children: isOpen && children
-  });
-});
-function getState(open) {
-  return open ? "open" : "closed";
-}
-const Root = Collapsible;
-const Trigger = CollapsibleTrigger;
-const Content = CollapsibleContent;
+const Collapsible = {};
 export {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Content,
-  Root,
-  Trigger,
-  createCollapsibleScope
+  Collapsible
 };
 //# sourceMappingURL=Collapsible.js.map

package/dist/esm/Collapsible.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Collapsible.tsx"],
-  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  Stack,\n  StackProps,\n  TamaguiElement,\n  composeEventHandlers,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { useId } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport type { Scope } from '@tamagui/create-context'\n// import { Presence } from '@tamagui/react-presence'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible'\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope }\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)\n\ntype CollapsibleContextValue = {\n  contentId: string\n  disabled?: boolean\n  open: boolean\n  onOpenToggle(): void\n}\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n  createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME)\n\ntype CollapsibleElement = TamaguiElement\ninterface CollapsibleProps extends StackProps {\n  defaultOpen?: boolean\n  open?: boolean\n  disabled?: boolean\n  onOpenChange?(open: boolean): void\n}\n\nconst Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(\n  (props: ScopedProps<CollapsibleProps>, forwardedRef) => {\n    const {\n      __scopeCollapsible,\n      open: openProp,\n      defaultOpen,\n      disabled,\n      onOpenChange,\n      ...collapsibleProps\n    } = props\n\n    const [open, setOpen] = useControllableState({\n      prop: openProp,\n      defaultProp: defaultOpen || false,\n      onChange: onOpenChange,\n    })\n\n    return (\n      <CollapsibleProvider\n        scope={__scopeCollapsible}\n        disabled={disabled}\n        contentId={useId() || ''}\n        open={open}\n        onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n      >\n        <Stack\n          data-state={getState(open)}\n          data-disabled={disabled ? '' : undefined}\n          {...collapsibleProps}\n          // @ts-expect-error\n          ref={forwardedRef}\n        />\n      </CollapsibleProvider>\n    )\n  }\n)\n\nCollapsible.displayName = COLLAPSIBLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CollapsibleTrigger'\n\ntype CollapsibleTriggerElement = TamaguiElement\ninterface CollapsibleTriggerProps extends StackProps {}\n\nconst CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n  (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n    const { __scopeCollapsible, ...triggerProps } = props\n    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible)\n    return (\n      <Stack\n        type=\"button\"\n        aria-controls={context.contentId}\n        aria-expanded={context.open || false}\n        data-state={getState(context.open)}\n        data-disabled={context.disabled ? '' : undefined}\n        disabled={context.disabled}\n        {...triggerProps}\n        // @ts-expect-error\n        ref={forwardedRef}\n        onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n      />\n    )\n  }\n)\n\nCollapsibleTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'CollapsibleContent'\n\ntype CollapsibleContentElement = CollapsibleContentImplElement\ninterface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true\n}\n\nconst CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n  (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n    const { forceMount, ...contentProps } = props\n    const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible)\n    return (\n      // <Presence present={forceMount || context.open}>\n      <>\n        {({ present }) => (\n          <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n        )}\n      </>\n      // </Presence>\n    )\n  }\n)\n\nCollapsibleContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = TamaguiElement\ninterface CollapsibleContentImplProps extends StackProps {\n  present: boolean\n}\n\nconst CollapsibleContentImpl = React.forwardRef<\n  CollapsibleContentImplElement,\n  CollapsibleContentImplProps\n>((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {\n  const { __scopeCollapsible, present, children, ...contentProps } = props\n  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible)\n  const [isPresent, setIsPresent] = React.useState(present)\n  const ref = React.useRef<CollapsibleContentImplElement>(null)\n  const composedRefs = useComposedRefs(forwardedRef, ref)\n  const heightRef = React.useRef<number | undefined>(0)\n  const height = heightRef.current\n  const widthRef = React.useRef<number | undefined>(0)\n  const width = widthRef.current\n  // when opening we want it to immediately open to retrieve dimensions\n  // when closing we delay `present` to retrieve dimensions before closing\n  const isOpen = context.open || isPresent\n  const isMountAnimationPreventedRef = React.useRef(isOpen)\n  const originalStylesRef = React.useRef<Record<string, string>>()\n\n  React.useEffect(() => {\n    const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false))\n    return () => cancelAnimationFrame(rAF)\n  }, [])\n\n  // useIsomorphicLayoutEffect(() => {\n  //   const node = ref.current\n  //   if (node) {\n  //     originalStylesRef.current = originalStylesRef.current || {\n  //       transitionDuration: node.style.transitionDuration,\n  //       animationDuration: node.style.animationDuration,\n  //       animationFillMode: node.style.animationFillMode,\n  //     }\n  //     // block any animations/transitions so the element renders at its full dimensions\n  //     node.style.transitionDuration = '0s'\n  //     node.style.animationDuration = '0s'\n  //     node.style.animationFillMode = 'none'\n\n  //     // get width and height from full dimensions\n  //     const rect = node.getBoundingClientRect()\n  //     heightRef.current = rect.height\n  //     widthRef.current = rect.width\n\n  //     // kick off any animations/transitions that were originally set up if it isn't the initial mount\n  //     if (!isMountAnimationPreventedRef.current) {\n  //       node.style.transitionDuration = originalStylesRef.current.transitionDuration\n  //       node.style.animationDuration = originalStylesRef.current.animationDuration\n  //       node.style.animationFillMode = originalStylesRef.current.animationFillMode\n  //     }\n\n  //     setIsPresent(present)\n  //   }\n  //   /**\n  //    * depends on `context.open` because it will change to `false`\n  //    * when a close is triggered but `present` will be `false` on\n  //    * animation end (so when close finishes). This allows us to\n  //    * retrieve the dimensions *before* closing.\n  //    */\n  // }, [context.open, present])\n\n  return (\n    <Stack\n      data-state={getState(context.open)}\n      data-disabled={context.disabled ? '' : undefined}\n      id={context.contentId}\n      hidden={!isOpen}\n      {...contentProps}\n      // @ts-expect-error\n      ref={composedRefs}\n      // style={{\n      //   [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n      //   [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n      //   ...props.style,\n      // }}\n    >\n      {isOpen && children}\n    </Stack>\n  )\n})\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n  return open ? 'open' : 'closed'\n}\n\nconst Root = Collapsible\nconst Trigger = CollapsibleTrigger\nconst Content = CollapsibleContent\n\nexport {\n  createCollapsibleScope,\n  //\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  //\n  Root,\n  Trigger,\n  Content,\n}\nexport type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps }\n"],
-  "mappings": "AAmEQ,SAmEF,UAnEE;AAnER,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EAGA;AAAA,OAEK;AACP,SAAS,aAAa;AACtB,SAAS,0BAA0B;AAGnC,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAMvB,MAAM,mBAAmB;AAGzB,MAAM,CAAC,0BAA0B,sBAAsB,IAAI,mBAAmB,gBAAgB;AAS9F,MAAM,CAAC,qBAAqB,qBAAqB,IAC/C,yBAAkD,gBAAgB;AAUpE,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,SACG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,MAC3C,MAAM;AAAA,MACN,aAAa,eAAe;AAAA,MAC5B,UAAU;AAAA,IACZ,CAAC;AAED,WACE,oBAAC;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,WAAW,MAAM,KAAK;AAAA,MACtB;AAAA,MACA,cAAc,MAAM,YAAY,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC,OAAO,CAAC;AAAA,MAEjF,8BAAC;AAAA,QACC,cAAY,SAAS,IAAI;AAAA,QACzB,iBAAe,WAAW,KAAK;AAAA,QAC9B,GAAG;AAAA,QAEJ,KAAK;AAAA,OACP;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAM1B,MAAM,eAAe;AAKrB,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,OAA6C,iBAAiB;AAC7D,UAAM,EAAE,uBAAuB,aAAa,IAAI;AAChD,UAAM,UAAU,sBAAsB,cAAc,kBAAkB;AACtE,WACE,oBAAC;AAAA,MACC,MAAK;AAAA,MACL,iBAAe,QAAQ;AAAA,MACvB,iBAAe,QAAQ,QAAQ;AAAA,MAC/B,cAAY,SAAS,QAAQ,IAAI;AAAA,MACjC,iBAAe,QAAQ,WAAW,KAAK;AAAA,MACvC,UAAU,QAAQ;AAAA,MACjB,GAAG;AAAA,MAEJ,KAAK;AAAA,MACL,SAAS,qBAAqB,MAAM,SAAS,QAAQ,YAAY;AAAA,KACnE;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AAMjC,MAAM,eAAe;AAWrB,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,OAA6C,iBAAiB;AAC7D,UAAM,EAAE,eAAe,aAAa,IAAI;AACxC,UAAM,UAAU,sBAAsB,cAAc,MAAM,kBAAkB;AAC5E,WAEE;AAAA,MACG,WAAC,EAAE,QAAQ,MACV,oBAAC;AAAA,QAAwB,GAAG;AAAA,QAAc,KAAK;AAAA,QAAc;AAAA,OAAkB;AAAA,KAEnF;AAAA,EAGJ;AACF;AAEA,mBAAmB,cAAc;AASjC,MAAM,yBAAyB,MAAM,WAGnC,CAAC,OAAiD,iBAAiB;AACnE,QAAM,EAAE,oBAAoB,SAAS,aAAa,aAAa,IAAI;AACnE,QAAM,UAAU,sBAAsB,cAAc,kBAAkB;AACtE,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,OAAO;AACxD,QAAM,MAAM,MAAM,OAAsC,IAAI;AAC5D,QAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,QAAM,YAAY,MAAM,OAA2B,CAAC;AACpD,QAAM,SAAS,UAAU;AACzB,QAAM,WAAW,MAAM,OAA2B,CAAC;AACnD,QAAM,QAAQ,SAAS;AAGvB,QAAM,SAAS,QAAQ,QAAQ;AAC/B,QAAM,+BAA+B,MAAM,OAAO,MAAM;AACxD,QAAM,oBAAoB,MAAM,OAA+B;AAE/D,QAAM,UAAU,MAAM;AACpB,UAAM,MAAM,sBAAsB,MAAO,6BAA6B,UAAU,KAAM;AACtF,WAAO,MAAM,qBAAqB,GAAG;AAAA,EACvC,GAAG,CAAC,CAAC;AAqCL,SACE,oBAAC;AAAA,IACC,cAAY,SAAS,QAAQ,IAAI;AAAA,IACjC,iBAAe,QAAQ,WAAW,KAAK;AAAA,IACvC,IAAI,QAAQ;AAAA,IACZ,QAAQ,CAAC;AAAA,IACR,GAAG;AAAA,IAEJ,KAAK;AAAA,IAOJ,oBAAU;AAAA,GACb;AAEJ,CAAC;AAID,SAAS,SAAS,MAAgB;AAChC,SAAO,OAAO,SAAS;AACzB;AAEA,MAAM,OAAO;AACb,MAAM,UAAU;AAChB,MAAM,UAAU;",
+  "sourcesContent": ["export const Collapsible = {}\n\n// import { useComposedRefs } from '@tamagui/compose-refs'\n// import { Stack, StackProps, TamaguiElement, composeEventHandlers, useId } from '@tamagui/core'\n// import type { Scope } from '@tamagui/create-context'\n// import { createContextScope } from '@tamagui/create-context'\n// // import { Presence } from '@tamagui/react-presence'\n// import { useControllableState } from '@tamagui/use-controllable-state'\n// import * as React from 'react'\n\n// /* -------------------------------------------------------------------------------------------------\n//  * Collapsible\n//  * -----------------------------------------------------------------------------------------------*/\n\n// const COLLAPSIBLE_NAME = 'Collapsible'\n\n// type ScopedProps<P> = P & { __scopeCollapsible?: Scope }\n// const [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)\n\n// type CollapsibleContextValue = {\n//   contentId: string\n//   disabled?: boolean\n//   open: boolean\n//   onOpenToggle(): void\n// }\n\n// const [CollapsibleProvider, useCollapsibleContext] =\n//   createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME)\n\n// type CollapsibleElement = TamaguiElement\n// interface CollapsibleProps extends StackProps {\n//   defaultOpen?: boolean\n//   open?: boolean\n//   disabled?: boolean\n//   onOpenChange?(open: boolean): void\n// }\n\n// const Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(\n//   (props: ScopedProps<CollapsibleProps>, forwardedRef) => {\n//     const {\n//       __scopeCollapsible,\n//       open: openProp,\n//       defaultOpen,\n//       disabled,\n//       onOpenChange,\n//       ...collapsibleProps\n//     } = props\n\n//     const [open, setOpen] = useControllableState({\n//       prop: openProp,\n//       defaultProp: defaultOpen || false,\n//       onChange: onOpenChange,\n//     })\n\n//     return (\n//       <CollapsibleProvider\n//         scope={__scopeCollapsible}\n//         disabled={disabled}\n//         contentId={useId() || ''}\n//         open={open}\n//         onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n//       >\n//         <Stack\n//           data-state={getState(open)}\n//           data-disabled={disabled ? '' : undefined}\n//           {...collapsibleProps}\n//           ref={forwardedRef}\n//         />\n//       </CollapsibleProvider>\n//     )\n//   }\n// )\n\n// Collapsible.displayName = COLLAPSIBLE_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n//  * CollapsibleTrigger\n//  * -----------------------------------------------------------------------------------------------*/\n\n// const TRIGGER_NAME = 'CollapsibleTrigger'\n\n// type CollapsibleTriggerElement = TamaguiElement\n// interface CollapsibleTriggerProps extends StackProps {}\n\n// const CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n//   (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n//     const { __scopeCollapsible, ...triggerProps } = props\n//     const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible)\n//     return (\n//       <Stack\n//         type=\"button\"\n//         aria-controls={context.contentId}\n//         aria-expanded={context.open || false}\n//         data-state={getState(context.open)}\n//         data-disabled={context.disabled ? '' : undefined}\n//         disabled={context.disabled}\n//         {...triggerProps}\n//         ref={forwardedRef}\n//         //\n//         // onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n//       />\n//     )\n//   }\n// )\n\n// CollapsibleTrigger.displayName = TRIGGER_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n//  * CollapsibleContent\n//  * -----------------------------------------------------------------------------------------------*/\n\n// const CONTENT_NAME = 'CollapsibleContent'\n\n// type CollapsibleContentElement = CollapsibleContentImplElement\n// interface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n//   /**\n//    * Used to force mounting when more control is needed. Useful when\n//    * controlling animation with React animation libraries.\n//    */\n//   forceMount?: true\n// }\n\n// const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n//   (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n//     const { forceMount, ...contentProps } = props\n//     const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible)\n//     return (\n//       // <Presence present={forceMount || context.open}>\n//       <>\n//         {({ present }) => (\n//           <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n//         )}\n//       </>\n//       // </Presence>\n//     )\n//   }\n// )\n\n// CollapsibleContent.displayName = CONTENT_NAME\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// type CollapsibleContentImplElement = TamaguiElement\n// interface CollapsibleContentImplProps extends StackProps {\n//   present: boolean\n// }\n\n// const CollapsibleContentImpl = React.forwardRef<\n//   CollapsibleContentImplElement,\n//   CollapsibleContentImplProps\n// >((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {\n//   const { __scopeCollapsible, present, children, ...contentProps } = props\n//   const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible)\n//   const [isPresent, setIsPresent] = React.useState(present)\n//   const ref = React.useRef<CollapsibleContentImplElement>(null)\n//   const composedRefs = useComposedRefs(forwardedRef, ref)\n//   const heightRef = React.useRef<number | undefined>(0)\n//   const height = heightRef.current\n//   const widthRef = React.useRef<number | undefined>(0)\n//   const width = widthRef.current\n//   // when opening we want it to immediately open to retrieve dimensions\n//   // when closing we delay `present` to retrieve dimensions before closing\n//   const isOpen = context.open || isPresent\n//   const isMountAnimationPreventedRef = React.useRef(isOpen)\n//   const originalStylesRef = React.useRef<Record<string, string>>()\n\n//   React.useEffect(() => {\n//     const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false))\n//     return () => cancelAnimationFrame(rAF)\n//   }, [])\n\n//   // useIsomorphicLayoutEffect(() => {\n//   //   const node = ref.current\n//   //   if (node) {\n//   //     originalStylesRef.current = originalStylesRef.current || {\n//   //       transitionDuration: node.style.transitionDuration,\n//   //       animationDuration: node.style.animationDuration,\n//   //       animationFillMode: node.style.animationFillMode,\n//   //     }\n//   //     // block any animations/transitions so the element renders at its full dimensions\n//   //     node.style.transitionDuration = '0s'\n//   //     node.style.animationDuration = '0s'\n//   //     node.style.animationFillMode = 'none'\n\n//   //     // get width and height from full dimensions\n//   //     const rect = node.getBoundingClientRect()\n//   //     heightRef.current = rect.height\n//   //     widthRef.current = rect.width\n\n//   //     // kick off any animations/transitions that were originally set up if it isn't the initial mount\n//   //     if (!isMountAnimationPreventedRef.current) {\n//   //       node.style.transitionDuration = originalStylesRef.current.transitionDuration\n//   //       node.style.animationDuration = originalStylesRef.current.animationDuration\n//   //       node.style.animationFillMode = originalStylesRef.current.animationFillMode\n//   //     }\n\n//   //     setIsPresent(present)\n//   //   }\n//   //   /**\n//   //    * depends on `context.open` because it will change to `false`\n//   //    * when a close is triggered but `present` will be `false` on\n//   //    * animation end (so when close finishes). This allows us to\n//   //    * retrieve the dimensions *before* closing.\n//   //    */\n//   // }, [context.open, present])\n\n//   return (\n//     <Stack\n//       data-state={getState(context.open)}\n//       data-disabled={context.disabled ? '' : undefined}\n//       id={context.contentId}\n//       hidden={!isOpen}\n//       {...contentProps}\n//       // @ts-expect-error\n//       ref={composedRefs}\n//       // style={{\n//       //   [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n//       //   [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n//       //   ...props.style,\n//       // }}\n//     >\n//       {isOpen && children}\n//     </Stack>\n//   )\n// })\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// function getState(open?: boolean) {\n//   return open ? 'open' : 'closed'\n// }\n\n// const Root = Collapsible\n// const Trigger = CollapsibleTrigger\n// const Content = CollapsibleContent\n\n// export {\n//   createCollapsibleScope,\n//   //\n//   Collapsible,\n//   CollapsibleTrigger,\n//   CollapsibleContent,\n//   //\n//   Root,\n//   Trigger,\n//   Content,\n// }\n// export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps }\n"],
+  "mappings": "AAAO,MAAM,cAAc,CAAC;",
   "names": []
 }

package/dist/jsx/Collapsible.js

@@ -1,84 +1,5 @@
-import { useComposedRefs } from "@tamagui/compose-refs";
-import {
-  Stack,
-  composeEventHandlers
-} from "@tamagui/core";
-import { useId } from "@tamagui/core";
-import { createContextScope } from "@tamagui/create-context";
-import { useControllableState } from "@tamagui/use-controllable-state";
-import * as React from "react";
-const COLLAPSIBLE_NAME = "Collapsible";
-const [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
-const [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
-const Collapsible = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeCollapsible,
-      open: openProp,
-      defaultOpen,
-      disabled,
-      onOpenChange,
-      ...collapsibleProps
-    } = props;
-    const [open, setOpen] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen || false,
-      onChange: onOpenChange
-    });
-    return <CollapsibleProvider scope={__scopeCollapsible} disabled={disabled} contentId={useId() || ""} open={open} onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}><Stack data-state={getState(open)} data-disabled={disabled ? "" : void 0} {...collapsibleProps} ref={forwardedRef} /></CollapsibleProvider>;
-  }
-);
-Collapsible.displayName = COLLAPSIBLE_NAME;
-const TRIGGER_NAME = "CollapsibleTrigger";
-const CollapsibleTrigger = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeCollapsible, ...triggerProps } = props;
-    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
-    return <Stack type="button" aria-controls={context.contentId} aria-expanded={context.open || false} data-state={getState(context.open)} data-disabled={context.disabled ? "" : void 0} disabled={context.disabled} {...triggerProps} ref={forwardedRef} onPress={composeEventHandlers(props.onPress, context.onOpenToggle)} />;
-  }
-);
-CollapsibleTrigger.displayName = TRIGGER_NAME;
-const CONTENT_NAME = "CollapsibleContent";
-const CollapsibleContent = React.forwardRef(
-  (props, forwardedRef) => {
-    const { forceMount, ...contentProps } = props;
-    const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
-    return <>{({ present }) => <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />}</>;
-  }
-);
-CollapsibleContent.displayName = CONTENT_NAME;
-const CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
-  const { __scopeCollapsible, present, children, ...contentProps } = props;
-  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
-  const [isPresent, setIsPresent] = React.useState(present);
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  const heightRef = React.useRef(0);
-  const height = heightRef.current;
-  const widthRef = React.useRef(0);
-  const width = widthRef.current;
-  const isOpen = context.open || isPresent;
-  const isMountAnimationPreventedRef = React.useRef(isOpen);
-  const originalStylesRef = React.useRef();
-  React.useEffect(() => {
-    const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
-    return () => cancelAnimationFrame(rAF);
-  }, []);
-  return <Stack data-state={getState(context.open)} data-disabled={context.disabled ? "" : void 0} id={context.contentId} hidden={!isOpen} {...contentProps} ref={composedRefs}>{isOpen && children}</Stack>;
-});
-function getState(open) {
-  return open ? "open" : "closed";
-}
-const Root = Collapsible;
-const Trigger = CollapsibleTrigger;
-const Content = CollapsibleContent;
+const Collapsible = {};
 export {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Content,
-  Root,
-  Trigger,
-  createCollapsibleScope
+  Collapsible
 };
 //# sourceMappingURL=Collapsible.js.map

package/dist/jsx/Collapsible.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Collapsible.tsx"],
-  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  Stack,\n  StackProps,\n  TamaguiElement,\n  composeEventHandlers,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { useId } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport type { Scope } from '@tamagui/create-context'\n// import { Presence } from '@tamagui/react-presence'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible'\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope }\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)\n\ntype CollapsibleContextValue = {\n  contentId: string\n  disabled?: boolean\n  open: boolean\n  onOpenToggle(): void\n}\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n  createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME)\n\ntype CollapsibleElement = TamaguiElement\ninterface CollapsibleProps extends StackProps {\n  defaultOpen?: boolean\n  open?: boolean\n  disabled?: boolean\n  onOpenChange?(open: boolean): void\n}\n\nconst Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(\n  (props: ScopedProps<CollapsibleProps>, forwardedRef) => {\n    const {\n      __scopeCollapsible,\n      open: openProp,\n      defaultOpen,\n      disabled,\n      onOpenChange,\n      ...collapsibleProps\n    } = props\n\n    const [open, setOpen] = useControllableState({\n      prop: openProp,\n      defaultProp: defaultOpen || false,\n      onChange: onOpenChange,\n    })\n\n    return (\n      <CollapsibleProvider\n        scope={__scopeCollapsible}\n        disabled={disabled}\n        contentId={useId() || ''}\n        open={open}\n        onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n      >\n        <Stack\n          data-state={getState(open)}\n          data-disabled={disabled ? '' : undefined}\n          {...collapsibleProps}\n          // @ts-expect-error\n          ref={forwardedRef}\n        />\n      </CollapsibleProvider>\n    )\n  }\n)\n\nCollapsible.displayName = COLLAPSIBLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CollapsibleTrigger'\n\ntype CollapsibleTriggerElement = TamaguiElement\ninterface CollapsibleTriggerProps extends StackProps {}\n\nconst CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n  (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n    const { __scopeCollapsible, ...triggerProps } = props\n    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible)\n    return (\n      <Stack\n        type=\"button\"\n        aria-controls={context.contentId}\n        aria-expanded={context.open || false}\n        data-state={getState(context.open)}\n        data-disabled={context.disabled ? '' : undefined}\n        disabled={context.disabled}\n        {...triggerProps}\n        // @ts-expect-error\n        ref={forwardedRef}\n        onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n      />\n    )\n  }\n)\n\nCollapsibleTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'CollapsibleContent'\n\ntype CollapsibleContentElement = CollapsibleContentImplElement\ninterface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true\n}\n\nconst CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n  (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n    const { forceMount, ...contentProps } = props\n    const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible)\n    return (\n      // <Presence present={forceMount || context.open}>\n      <>\n        {({ present }) => (\n          <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n        )}\n      </>\n      // </Presence>\n    )\n  }\n)\n\nCollapsibleContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = TamaguiElement\ninterface CollapsibleContentImplProps extends StackProps {\n  present: boolean\n}\n\nconst CollapsibleContentImpl = React.forwardRef<\n  CollapsibleContentImplElement,\n  CollapsibleContentImplProps\n>((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {\n  const { __scopeCollapsible, present, children, ...contentProps } = props\n  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible)\n  const [isPresent, setIsPresent] = React.useState(present)\n  const ref = React.useRef<CollapsibleContentImplElement>(null)\n  const composedRefs = useComposedRefs(forwardedRef, ref)\n  const heightRef = React.useRef<number | undefined>(0)\n  const height = heightRef.current\n  const widthRef = React.useRef<number | undefined>(0)\n  const width = widthRef.current\n  // when opening we want it to immediately open to retrieve dimensions\n  // when closing we delay `present` to retrieve dimensions before closing\n  const isOpen = context.open || isPresent\n  const isMountAnimationPreventedRef = React.useRef(isOpen)\n  const originalStylesRef = React.useRef<Record<string, string>>()\n\n  React.useEffect(() => {\n    const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false))\n    return () => cancelAnimationFrame(rAF)\n  }, [])\n\n  // useIsomorphicLayoutEffect(() => {\n  //   const node = ref.current\n  //   if (node) {\n  //     originalStylesRef.current = originalStylesRef.current || {\n  //       transitionDuration: node.style.transitionDuration,\n  //       animationDuration: node.style.animationDuration,\n  //       animationFillMode: node.style.animationFillMode,\n  //     }\n  //     // block any animations/transitions so the element renders at its full dimensions\n  //     node.style.transitionDuration = '0s'\n  //     node.style.animationDuration = '0s'\n  //     node.style.animationFillMode = 'none'\n\n  //     // get width and height from full dimensions\n  //     const rect = node.getBoundingClientRect()\n  //     heightRef.current = rect.height\n  //     widthRef.current = rect.width\n\n  //     // kick off any animations/transitions that were originally set up if it isn't the initial mount\n  //     if (!isMountAnimationPreventedRef.current) {\n  //       node.style.transitionDuration = originalStylesRef.current.transitionDuration\n  //       node.style.animationDuration = originalStylesRef.current.animationDuration\n  //       node.style.animationFillMode = originalStylesRef.current.animationFillMode\n  //     }\n\n  //     setIsPresent(present)\n  //   }\n  //   /**\n  //    * depends on `context.open` because it will change to `false`\n  //    * when a close is triggered but `present` will be `false` on\n  //    * animation end (so when close finishes). This allows us to\n  //    * retrieve the dimensions *before* closing.\n  //    */\n  // }, [context.open, present])\n\n  return (\n    <Stack\n      data-state={getState(context.open)}\n      data-disabled={context.disabled ? '' : undefined}\n      id={context.contentId}\n      hidden={!isOpen}\n      {...contentProps}\n      // @ts-expect-error\n      ref={composedRefs}\n      // style={{\n      //   [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n      //   [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n      //   ...props.style,\n      // }}\n    >\n      {isOpen && children}\n    </Stack>\n  )\n})\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n  return open ? 'open' : 'closed'\n}\n\nconst Root = Collapsible\nconst Trigger = CollapsibleTrigger\nconst Content = CollapsibleContent\n\nexport {\n  createCollapsibleScope,\n  //\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  //\n  Root,\n  Trigger,\n  Content,\n}\nexport type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps }\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EAGA;AAAA,OAEK;AACP,SAAS,aAAa;AACtB,SAAS,0BAA0B;AAGnC,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAMvB,MAAM,mBAAmB;AAGzB,MAAM,CAAC,0BAA0B,sBAAsB,IAAI,mBAAmB,gBAAgB;AAS9F,MAAM,CAAC,qBAAqB,qBAAqB,IAC/C,yBAAkD,gBAAgB;AAUpE,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,SACG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,MAC3C,MAAM;AAAA,MACN,aAAa,eAAe;AAAA,MAC5B,UAAU;AAAA,IACZ,CAAC;AAED,WACE,CAAC,oBACC,OAAO,oBACP,UAAU,UACV,WAAW,MAAM,KAAK,IACtB,MAAM,MACN,cAAc,MAAM,YAAY,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC,OAAO,CAAC,GAEjF,CAAC,MACC,YAAY,SAAS,IAAI,GACzB,eAAe,WAAW,KAAK,YAC3B,kBAEJ,KAAK,cACP,EACF,EAdC;AAAA,EAgBL;AACF;AAEA,YAAY,cAAc;AAM1B,MAAM,eAAe;AAKrB,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,OAA6C,iBAAiB;AAC7D,UAAM,EAAE,uBAAuB,aAAa,IAAI;AAChD,UAAM,UAAU,sBAAsB,cAAc,kBAAkB;AACtE,WACE,CAAC,MACC,KAAK,SACL,eAAe,QAAQ,WACvB,eAAe,QAAQ,QAAQ,OAC/B,YAAY,SAAS,QAAQ,IAAI,GACjC,eAAe,QAAQ,WAAW,KAAK,QACvC,UAAU,QAAQ,cACd,cAEJ,KAAK,cACL,SAAS,qBAAqB,MAAM,SAAS,QAAQ,YAAY,GACnE;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AAMjC,MAAM,eAAe;AAWrB,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,OAA6C,iBAAiB;AAC7D,UAAM,EAAE,eAAe,aAAa,IAAI;AACxC,UAAM,UAAU,sBAAsB,cAAc,MAAM,kBAAkB;AAC5E,WAEE,GACG,CAAC,EAAE,QAAQ,MACV,CAAC,2BAA2B,cAAc,KAAK,cAAc,SAAS,SAAS,GAEnF;AAAA,EAGJ;AACF;AAEA,mBAAmB,cAAc;AASjC,MAAM,yBAAyB,MAAM,WAGnC,CAAC,OAAiD,iBAAiB;AACnE,QAAM,EAAE,oBAAoB,SAAS,aAAa,aAAa,IAAI;AACnE,QAAM,UAAU,sBAAsB,cAAc,kBAAkB;AACtE,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,OAAO;AACxD,QAAM,MAAM,MAAM,OAAsC,IAAI;AAC5D,QAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,QAAM,YAAY,MAAM,OAA2B,CAAC;AACpD,QAAM,SAAS,UAAU;AACzB,QAAM,WAAW,MAAM,OAA2B,CAAC;AACnD,QAAM,QAAQ,SAAS;AAGvB,QAAM,SAAS,QAAQ,QAAQ;AAC/B,QAAM,+BAA+B,MAAM,OAAO,MAAM;AACxD,QAAM,oBAAoB,MAAM,OAA+B;AAE/D,QAAM,UAAU,MAAM;AACpB,UAAM,MAAM,sBAAsB,MAAO,6BAA6B,UAAU,KAAM;AACtF,WAAO,MAAM,qBAAqB,GAAG;AAAA,EACvC,GAAG,CAAC,CAAC;AAqCL,SACE,CAAC,MACC,YAAY,SAAS,QAAQ,IAAI,GACjC,eAAe,QAAQ,WAAW,KAAK,QACvC,IAAI,QAAQ,WACZ,QAAQ,CAAC,YACL,cAEJ,KAAK,eAOJ,UAAU,SACb,EAfC;AAiBL,CAAC;AAID,SAAS,SAAS,MAAgB;AAChC,SAAO,OAAO,SAAS;AACzB;AAEA,MAAM,OAAO;AACb,MAAM,UAAU;AAChB,MAAM,UAAU;",
+  "sourcesContent": ["export const Collapsible = {}\n\n// import { useComposedRefs } from '@tamagui/compose-refs'\n// import { Stack, StackProps, TamaguiElement, composeEventHandlers, useId } from '@tamagui/core'\n// import type { Scope } from '@tamagui/create-context'\n// import { createContextScope } from '@tamagui/create-context'\n// // import { Presence } from '@tamagui/react-presence'\n// import { useControllableState } from '@tamagui/use-controllable-state'\n// import * as React from 'react'\n\n// /* -------------------------------------------------------------------------------------------------\n//  * Collapsible\n//  * -----------------------------------------------------------------------------------------------*/\n\n// const COLLAPSIBLE_NAME = 'Collapsible'\n\n// type ScopedProps<P> = P & { __scopeCollapsible?: Scope }\n// const [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)\n\n// type CollapsibleContextValue = {\n//   contentId: string\n//   disabled?: boolean\n//   open: boolean\n//   onOpenToggle(): void\n// }\n\n// const [CollapsibleProvider, useCollapsibleContext] =\n//   createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME)\n\n// type CollapsibleElement = TamaguiElement\n// interface CollapsibleProps extends StackProps {\n//   defaultOpen?: boolean\n//   open?: boolean\n//   disabled?: boolean\n//   onOpenChange?(open: boolean): void\n// }\n\n// const Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(\n//   (props: ScopedProps<CollapsibleProps>, forwardedRef) => {\n//     const {\n//       __scopeCollapsible,\n//       open: openProp,\n//       defaultOpen,\n//       disabled,\n//       onOpenChange,\n//       ...collapsibleProps\n//     } = props\n\n//     const [open, setOpen] = useControllableState({\n//       prop: openProp,\n//       defaultProp: defaultOpen || false,\n//       onChange: onOpenChange,\n//     })\n\n//     return (\n//       <CollapsibleProvider\n//         scope={__scopeCollapsible}\n//         disabled={disabled}\n//         contentId={useId() || ''}\n//         open={open}\n//         onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n//       >\n//         <Stack\n//           data-state={getState(open)}\n//           data-disabled={disabled ? '' : undefined}\n//           {...collapsibleProps}\n//           ref={forwardedRef}\n//         />\n//       </CollapsibleProvider>\n//     )\n//   }\n// )\n\n// Collapsible.displayName = COLLAPSIBLE_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n//  * CollapsibleTrigger\n//  * -----------------------------------------------------------------------------------------------*/\n\n// const TRIGGER_NAME = 'CollapsibleTrigger'\n\n// type CollapsibleTriggerElement = TamaguiElement\n// interface CollapsibleTriggerProps extends StackProps {}\n\n// const CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n//   (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n//     const { __scopeCollapsible, ...triggerProps } = props\n//     const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible)\n//     return (\n//       <Stack\n//         type=\"button\"\n//         aria-controls={context.contentId}\n//         aria-expanded={context.open || false}\n//         data-state={getState(context.open)}\n//         data-disabled={context.disabled ? '' : undefined}\n//         disabled={context.disabled}\n//         {...triggerProps}\n//         ref={forwardedRef}\n//         //\n//         // onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n//       />\n//     )\n//   }\n// )\n\n// CollapsibleTrigger.displayName = TRIGGER_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n//  * CollapsibleContent\n//  * -----------------------------------------------------------------------------------------------*/\n\n// const CONTENT_NAME = 'CollapsibleContent'\n\n// type CollapsibleContentElement = CollapsibleContentImplElement\n// interface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n//   /**\n//    * Used to force mounting when more control is needed. Useful when\n//    * controlling animation with React animation libraries.\n//    */\n//   forceMount?: true\n// }\n\n// const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n//   (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n//     const { forceMount, ...contentProps } = props\n//     const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible)\n//     return (\n//       // <Presence present={forceMount || context.open}>\n//       <>\n//         {({ present }) => (\n//           <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n//         )}\n//       </>\n//       // </Presence>\n//     )\n//   }\n// )\n\n// CollapsibleContent.displayName = CONTENT_NAME\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// type CollapsibleContentImplElement = TamaguiElement\n// interface CollapsibleContentImplProps extends StackProps {\n//   present: boolean\n// }\n\n// const CollapsibleContentImpl = React.forwardRef<\n//   CollapsibleContentImplElement,\n//   CollapsibleContentImplProps\n// >((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {\n//   const { __scopeCollapsible, present, children, ...contentProps } = props\n//   const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible)\n//   const [isPresent, setIsPresent] = React.useState(present)\n//   const ref = React.useRef<CollapsibleContentImplElement>(null)\n//   const composedRefs = useComposedRefs(forwardedRef, ref)\n//   const heightRef = React.useRef<number | undefined>(0)\n//   const height = heightRef.current\n//   const widthRef = React.useRef<number | undefined>(0)\n//   const width = widthRef.current\n//   // when opening we want it to immediately open to retrieve dimensions\n//   // when closing we delay `present` to retrieve dimensions before closing\n//   const isOpen = context.open || isPresent\n//   const isMountAnimationPreventedRef = React.useRef(isOpen)\n//   const originalStylesRef = React.useRef<Record<string, string>>()\n\n//   React.useEffect(() => {\n//     const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false))\n//     return () => cancelAnimationFrame(rAF)\n//   }, [])\n\n//   // useIsomorphicLayoutEffect(() => {\n//   //   const node = ref.current\n//   //   if (node) {\n//   //     originalStylesRef.current = originalStylesRef.current || {\n//   //       transitionDuration: node.style.transitionDuration,\n//   //       animationDuration: node.style.animationDuration,\n//   //       animationFillMode: node.style.animationFillMode,\n//   //     }\n//   //     // block any animations/transitions so the element renders at its full dimensions\n//   //     node.style.transitionDuration = '0s'\n//   //     node.style.animationDuration = '0s'\n//   //     node.style.animationFillMode = 'none'\n\n//   //     // get width and height from full dimensions\n//   //     const rect = node.getBoundingClientRect()\n//   //     heightRef.current = rect.height\n//   //     widthRef.current = rect.width\n\n//   //     // kick off any animations/transitions that were originally set up if it isn't the initial mount\n//   //     if (!isMountAnimationPreventedRef.current) {\n//   //       node.style.transitionDuration = originalStylesRef.current.transitionDuration\n//   //       node.style.animationDuration = originalStylesRef.current.animationDuration\n//   //       node.style.animationFillMode = originalStylesRef.current.animationFillMode\n//   //     }\n\n//   //     setIsPresent(present)\n//   //   }\n//   //   /**\n//   //    * depends on `context.open` because it will change to `false`\n//   //    * when a close is triggered but `present` will be `false` on\n//   //    * animation end (so when close finishes). This allows us to\n//   //    * retrieve the dimensions *before* closing.\n//   //    */\n//   // }, [context.open, present])\n\n//   return (\n//     <Stack\n//       data-state={getState(context.open)}\n//       data-disabled={context.disabled ? '' : undefined}\n//       id={context.contentId}\n//       hidden={!isOpen}\n//       {...contentProps}\n//       // @ts-expect-error\n//       ref={composedRefs}\n//       // style={{\n//       //   [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n//       //   [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n//       //   ...props.style,\n//       // }}\n//     >\n//       {isOpen && children}\n//     </Stack>\n//   )\n// })\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// function getState(open?: boolean) {\n//   return open ? 'open' : 'closed'\n// }\n\n// const Root = Collapsible\n// const Trigger = CollapsibleTrigger\n// const Content = CollapsibleContent\n\n// export {\n//   createCollapsibleScope,\n//   //\n//   Collapsible,\n//   CollapsibleTrigger,\n//   CollapsibleContent,\n//   //\n//   Root,\n//   Trigger,\n//   Content,\n// }\n// export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps }\n"],
+  "mappings": "AAAO,MAAM,cAAc,CAAC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/collapsible",
-  "version": "1.0.1-beta.219",
+  "version": "1.0.1-beta.221",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -17,19 +17,19 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "^1.0.1-beta.219",
-    "@tamagui/core": "^1.0.1-beta.219",
-    "@tamagui/create-context": "^1.0.1-beta.219",
-    "@tamagui/polyfill-dev": "^1.0.1-beta.219",
-    "@tamagui/stacks": "^1.0.1-beta.219",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.219"
+    "@tamagui/compose-refs": "^1.0.1-beta.221",
+    "@tamagui/core": "^1.0.1-beta.221",
+    "@tamagui/create-context": "^1.0.1-beta.221",
+    "@tamagui/polyfill-dev": "^1.0.1-beta.221",
+    "@tamagui/stacks": "^1.0.1-beta.221",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.221"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.219",
+    "@tamagui/build": "^1.0.1-beta.221",
     "react": ">=18",
     "react-dom": ">=18"
   },

package/src/Collapsible.tsx

@@ -1,254 +1,248 @@
-import { useComposedRefs } from '@tamagui/compose-refs'
-import {
-  Stack,
-  StackProps,
-  TamaguiElement,
-  composeEventHandlers,
-  useIsomorphicLayoutEffect,
-} from '@tamagui/core'
-import { useId } from '@tamagui/core'
-import { createContextScope } from '@tamagui/create-context'
-import type { Scope } from '@tamagui/create-context'
-// import { Presence } from '@tamagui/react-presence'
-import { useControllableState } from '@tamagui/use-controllable-state'
-import * as React from 'react'
-
-/* -------------------------------------------------------------------------------------------------
- * Collapsible
- * -----------------------------------------------------------------------------------------------*/
-
-const COLLAPSIBLE_NAME = 'Collapsible'
-
-type ScopedProps<P> = P & { __scopeCollapsible?: Scope }
-const [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)
-
-type CollapsibleContextValue = {
-  contentId: string
-  disabled?: boolean
-  open: boolean
-  onOpenToggle(): void
-}
-
-const [CollapsibleProvider, useCollapsibleContext] =
-  createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME)
-
-type CollapsibleElement = TamaguiElement
-interface CollapsibleProps extends StackProps {
-  defaultOpen?: boolean
-  open?: boolean
-  disabled?: boolean
-  onOpenChange?(open: boolean): void
-}
-
-const Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(
-  (props: ScopedProps<CollapsibleProps>, forwardedRef) => {
-    const {
-      __scopeCollapsible,
-      open: openProp,
-      defaultOpen,
-      disabled,
-      onOpenChange,
-      ...collapsibleProps
-    } = props
-
-    const [open, setOpen] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen || false,
-      onChange: onOpenChange,
-    })
-
-    return (
-      <CollapsibleProvider
-        scope={__scopeCollapsible}
-        disabled={disabled}
-        contentId={useId() || ''}
-        open={open}
-        onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}
-      >
-        <Stack
-          data-state={getState(open)}
-          data-disabled={disabled ? '' : undefined}
-          {...collapsibleProps}
-          // @ts-expect-error
-          ref={forwardedRef}
-        />
-      </CollapsibleProvider>
-    )
-  }
-)
-
-Collapsible.displayName = COLLAPSIBLE_NAME
-
-/* -------------------------------------------------------------------------------------------------
- * CollapsibleTrigger
- * -----------------------------------------------------------------------------------------------*/
-
-const TRIGGER_NAME = 'CollapsibleTrigger'
-
-type CollapsibleTriggerElement = TamaguiElement
-interface CollapsibleTriggerProps extends StackProps {}
-
-const CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(
-  (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {
-    const { __scopeCollapsible, ...triggerProps } = props
-    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible)
-    return (
-      <Stack
-        type="button"
-        aria-controls={context.contentId}
-        aria-expanded={context.open || false}
-        data-state={getState(context.open)}
-        data-disabled={context.disabled ? '' : undefined}
-        disabled={context.disabled}
-        {...triggerProps}
-        // @ts-expect-error
-        ref={forwardedRef}
-        onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}
-      />
-    )
-  }
-)
-
-CollapsibleTrigger.displayName = TRIGGER_NAME
-
-/* -------------------------------------------------------------------------------------------------
- * CollapsibleContent
- * -----------------------------------------------------------------------------------------------*/
-
-const CONTENT_NAME = 'CollapsibleContent'
-
-type CollapsibleContentElement = CollapsibleContentImplElement
-interface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {
-  /**
-   * Used to force mounting when more control is needed. Useful when
-   * controlling animation with React animation libraries.
-   */
-  forceMount?: true
-}
-
-const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(
-  (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {
-    const { forceMount, ...contentProps } = props
-    const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible)
-    return (
-      // <Presence present={forceMount || context.open}>
-      <>
-        {({ present }) => (
-          <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />
-        )}
-      </>
-      // </Presence>
-    )
-  }
-)
-
-CollapsibleContent.displayName = CONTENT_NAME
-
-/* -----------------------------------------------------------------------------------------------*/
-
-type CollapsibleContentImplElement = TamaguiElement
-interface CollapsibleContentImplProps extends StackProps {
-  present: boolean
-}
-
-const CollapsibleContentImpl = React.forwardRef<
-  CollapsibleContentImplElement,
-  CollapsibleContentImplProps
->((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {
-  const { __scopeCollapsible, present, children, ...contentProps } = props
-  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible)
-  const [isPresent, setIsPresent] = React.useState(present)
-  const ref = React.useRef<CollapsibleContentImplElement>(null)
-  const composedRefs = useComposedRefs(forwardedRef, ref)
-  const heightRef = React.useRef<number | undefined>(0)
-  const height = heightRef.current
-  const widthRef = React.useRef<number | undefined>(0)
-  const width = widthRef.current
-  // when opening we want it to immediately open to retrieve dimensions
-  // when closing we delay `present` to retrieve dimensions before closing
-  const isOpen = context.open || isPresent
-  const isMountAnimationPreventedRef = React.useRef(isOpen)
-  const originalStylesRef = React.useRef<Record<string, string>>()
-
-  React.useEffect(() => {
-    const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false))
-    return () => cancelAnimationFrame(rAF)
-  }, [])
-
-  // useIsomorphicLayoutEffect(() => {
-  //   const node = ref.current
-  //   if (node) {
-  //     originalStylesRef.current = originalStylesRef.current || {
-  //       transitionDuration: node.style.transitionDuration,
-  //       animationDuration: node.style.animationDuration,
-  //       animationFillMode: node.style.animationFillMode,
-  //     }
-  //     // block any animations/transitions so the element renders at its full dimensions
-  //     node.style.transitionDuration = '0s'
-  //     node.style.animationDuration = '0s'
-  //     node.style.animationFillMode = 'none'
-
-  //     // get width and height from full dimensions
-  //     const rect = node.getBoundingClientRect()
-  //     heightRef.current = rect.height
-  //     widthRef.current = rect.width
-
-  //     // kick off any animations/transitions that were originally set up if it isn't the initial mount
-  //     if (!isMountAnimationPreventedRef.current) {
-  //       node.style.transitionDuration = originalStylesRef.current.transitionDuration
-  //       node.style.animationDuration = originalStylesRef.current.animationDuration
-  //       node.style.animationFillMode = originalStylesRef.current.animationFillMode
-  //     }
-
-  //     setIsPresent(present)
-  //   }
-  //   /**
-  //    * depends on `context.open` because it will change to `false`
-  //    * when a close is triggered but `present` will be `false` on
-  //    * animation end (so when close finishes). This allows us to
-  //    * retrieve the dimensions *before* closing.
-  //    */
-  // }, [context.open, present])
-
-  return (
-    <Stack
-      data-state={getState(context.open)}
-      data-disabled={context.disabled ? '' : undefined}
-      id={context.contentId}
-      hidden={!isOpen}
-      {...contentProps}
-      // @ts-expect-error
-      ref={composedRefs}
-      // style={{
-      //   [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,
-      //   [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,
-      //   ...props.style,
-      // }}
-    >
-      {isOpen && children}
-    </Stack>
-  )
-})
-
-/* -----------------------------------------------------------------------------------------------*/
-
-function getState(open?: boolean) {
-  return open ? 'open' : 'closed'
-}
-
-const Root = Collapsible
-const Trigger = CollapsibleTrigger
-const Content = CollapsibleContent
-
-export {
-  createCollapsibleScope,
-  //
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-  //
-  Root,
-  Trigger,
-  Content,
-}
-export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps }
+export const Collapsible = {}
+
+// import { useComposedRefs } from '@tamagui/compose-refs'
+// import { Stack, StackProps, TamaguiElement, composeEventHandlers, useId } from '@tamagui/core'
+// import type { Scope } from '@tamagui/create-context'
+// import { createContextScope } from '@tamagui/create-context'
+// // import { Presence } from '@tamagui/react-presence'
+// import { useControllableState } from '@tamagui/use-controllable-state'
+// import * as React from 'react'
+
+// /* -------------------------------------------------------------------------------------------------
+//  * Collapsible
+//  * -----------------------------------------------------------------------------------------------*/
+
+// const COLLAPSIBLE_NAME = 'Collapsible'
+
+// type ScopedProps<P> = P & { __scopeCollapsible?: Scope }
+// const [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)
+
+// type CollapsibleContextValue = {
+//   contentId: string
+//   disabled?: boolean
+//   open: boolean
+//   onOpenToggle(): void
+// }
+
+// const [CollapsibleProvider, useCollapsibleContext] =
+//   createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME)
+
+// type CollapsibleElement = TamaguiElement
+// interface CollapsibleProps extends StackProps {
+//   defaultOpen?: boolean
+//   open?: boolean
+//   disabled?: boolean
+//   onOpenChange?(open: boolean): void
+// }
+
+// const Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(
+//   (props: ScopedProps<CollapsibleProps>, forwardedRef) => {
+//     const {
+//       __scopeCollapsible,
+//       open: openProp,
+//       defaultOpen,
+//       disabled,
+//       onOpenChange,
+//       ...collapsibleProps
+//     } = props
+
+//     const [open, setOpen] = useControllableState({
+//       prop: openProp,
+//       defaultProp: defaultOpen || false,
+//       onChange: onOpenChange,
+//     })
+
+//     return (
+//       <CollapsibleProvider
+//         scope={__scopeCollapsible}
+//         disabled={disabled}
+//         contentId={useId() || ''}
+//         open={open}
+//         onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}
+//       >
+//         <Stack
+//           data-state={getState(open)}
+//           data-disabled={disabled ? '' : undefined}
+//           {...collapsibleProps}
+//           ref={forwardedRef}
+//         />
+//       </CollapsibleProvider>
+//     )
+//   }
+// )
+
+// Collapsible.displayName = COLLAPSIBLE_NAME
+
+// /* -------------------------------------------------------------------------------------------------
+//  * CollapsibleTrigger
+//  * -----------------------------------------------------------------------------------------------*/
+
+// const TRIGGER_NAME = 'CollapsibleTrigger'
+
+// type CollapsibleTriggerElement = TamaguiElement
+// interface CollapsibleTriggerProps extends StackProps {}
+
+// const CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(
+//   (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {
+//     const { __scopeCollapsible, ...triggerProps } = props
+//     const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible)
+//     return (
+//       <Stack
+//         type="button"
+//         aria-controls={context.contentId}
+//         aria-expanded={context.open || false}
+//         data-state={getState(context.open)}
+//         data-disabled={context.disabled ? '' : undefined}
+//         disabled={context.disabled}
+//         {...triggerProps}
+//         ref={forwardedRef}
+//         //
+//         // onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}
+//       />
+//     )
+//   }
+// )
+
+// CollapsibleTrigger.displayName = TRIGGER_NAME
+
+// /* -------------------------------------------------------------------------------------------------
+//  * CollapsibleContent
+//  * -----------------------------------------------------------------------------------------------*/
+
+// const CONTENT_NAME = 'CollapsibleContent'
+
+// type CollapsibleContentElement = CollapsibleContentImplElement
+// interface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {
+//   /**
+//    * Used to force mounting when more control is needed. Useful when
+//    * controlling animation with React animation libraries.
+//    */
+//   forceMount?: true
+// }
+
+// const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(
+//   (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {
+//     const { forceMount, ...contentProps } = props
+//     const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible)
+//     return (
+//       // <Presence present={forceMount || context.open}>
+//       <>
+//         {({ present }) => (
+//           <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />
+//         )}
+//       </>
+//       // </Presence>
+//     )
+//   }
+// )
+
+// CollapsibleContent.displayName = CONTENT_NAME
+
+// /* -----------------------------------------------------------------------------------------------*/
+
+// type CollapsibleContentImplElement = TamaguiElement
+// interface CollapsibleContentImplProps extends StackProps {
+//   present: boolean
+// }
+
+// const CollapsibleContentImpl = React.forwardRef<
+//   CollapsibleContentImplElement,
+//   CollapsibleContentImplProps
+// >((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {
+//   const { __scopeCollapsible, present, children, ...contentProps } = props
+//   const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible)
+//   const [isPresent, setIsPresent] = React.useState(present)
+//   const ref = React.useRef<CollapsibleContentImplElement>(null)
+//   const composedRefs = useComposedRefs(forwardedRef, ref)
+//   const heightRef = React.useRef<number | undefined>(0)
+//   const height = heightRef.current
+//   const widthRef = React.useRef<number | undefined>(0)
+//   const width = widthRef.current
+//   // when opening we want it to immediately open to retrieve dimensions
+//   // when closing we delay `present` to retrieve dimensions before closing
+//   const isOpen = context.open || isPresent
+//   const isMountAnimationPreventedRef = React.useRef(isOpen)
+//   const originalStylesRef = React.useRef<Record<string, string>>()
+
+//   React.useEffect(() => {
+//     const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false))
+//     return () => cancelAnimationFrame(rAF)
+//   }, [])
+
+//   // useIsomorphicLayoutEffect(() => {
+//   //   const node = ref.current
+//   //   if (node) {
+//   //     originalStylesRef.current = originalStylesRef.current || {
+//   //       transitionDuration: node.style.transitionDuration,
+//   //       animationDuration: node.style.animationDuration,
+//   //       animationFillMode: node.style.animationFillMode,
+//   //     }
+//   //     // block any animations/transitions so the element renders at its full dimensions
+//   //     node.style.transitionDuration = '0s'
+//   //     node.style.animationDuration = '0s'
+//   //     node.style.animationFillMode = 'none'
+
+//   //     // get width and height from full dimensions
+//   //     const rect = node.getBoundingClientRect()
+//   //     heightRef.current = rect.height
+//   //     widthRef.current = rect.width
+
+//   //     // kick off any animations/transitions that were originally set up if it isn't the initial mount
+//   //     if (!isMountAnimationPreventedRef.current) {
+//   //       node.style.transitionDuration = originalStylesRef.current.transitionDuration
+//   //       node.style.animationDuration = originalStylesRef.current.animationDuration
+//   //       node.style.animationFillMode = originalStylesRef.current.animationFillMode
+//   //     }
+
+//   //     setIsPresent(present)
+//   //   }
+//   //   /**
+//   //    * depends on `context.open` because it will change to `false`
+//   //    * when a close is triggered but `present` will be `false` on
+//   //    * animation end (so when close finishes). This allows us to
+//   //    * retrieve the dimensions *before* closing.
+//   //    */
+//   // }, [context.open, present])
+
+//   return (
+//     <Stack
+//       data-state={getState(context.open)}
+//       data-disabled={context.disabled ? '' : undefined}
+//       id={context.contentId}
+//       hidden={!isOpen}
+//       {...contentProps}
+//       // @ts-expect-error
+//       ref={composedRefs}
+//       // style={{
+//       //   [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,
+//       //   [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,
+//       //   ...props.style,
+//       // }}
+//     >
+//       {isOpen && children}
+//     </Stack>
+//   )
+// })
+
+// /* -----------------------------------------------------------------------------------------------*/
+
+// function getState(open?: boolean) {
+//   return open ? 'open' : 'closed'
+// }
+
+// const Root = Collapsible
+// const Trigger = CollapsibleTrigger
+// const Content = CollapsibleContent
+
+// export {
+//   createCollapsibleScope,
+//   //
+//   Collapsible,
+//   CollapsibleTrigger,
+//   CollapsibleContent,
+//   //
+//   Root,
+//   Trigger,
+//   Content,
+// }
+// export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps }

package/types/Collapsible.d.ts

@@ -1,30 +1,2 @@
-import { StackProps, TamaguiElement } from '@tamagui/core';
-import * as React from 'react';
-declare const createCollapsibleScope: import("@tamagui/create-context").CreateScope;
-interface CollapsibleProps extends StackProps {
-    defaultOpen?: boolean;
-    open?: boolean;
-    disabled?: boolean;
-    onOpenChange?(open: boolean): void;
-}
-declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<TamaguiElement>>;
-interface CollapsibleTriggerProps extends StackProps {
-}
-declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<TamaguiElement>>;
-interface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {
-    /**
-     * Used to force mounting when more control is needed. Useful when
-     * controlling animation with React animation libraries.
-     */
-    forceMount?: true;
-}
-declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsibleContentProps & React.RefAttributes<TamaguiElement>>;
-interface CollapsibleContentImplProps extends StackProps {
-    present: boolean;
-}
-declare const Root: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<TamaguiElement>>;
-declare const Trigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<TamaguiElement>>;
-declare const Content: React.ForwardRefExoticComponent<CollapsibleContentProps & React.RefAttributes<TamaguiElement>>;
-export { createCollapsibleScope, Collapsible, CollapsibleTrigger, CollapsibleContent, Root, Trigger, Content, };
-export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps };
+export declare const Collapsible: {};
 //# sourceMappingURL=Collapsible.d.ts.map