@tamagui/collapsible 1.0.1-beta.65

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Radix
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/Collapsible.js

@@ -0,0 +1,174 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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
+});
+module.exports = __toCommonJS(Collapsible_exports);
+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 _a = props, {
+    __scopeCollapsible,
+    open: openProp,
+    defaultOpen,
+    disabled,
+    onOpenChange
+  } = _a, collapsibleProps = __objRest(_a, [
+    "__scopeCollapsible",
+    "open",
+    "defaultOpen",
+    "disabled",
+    "onOpenChange"
+  ]);
+  const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
+    prop: openProp,
+    defaultProp: defaultOpen || false,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ React.createElement(CollapsibleProvider, {
+    scope: __scopeCollapsible,
+    disabled,
+    contentId: (0, import_core2.useId)() || "",
+    open,
+    onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])
+  }, /* @__PURE__ */ React.createElement(import_core.Stack, __spreadProps(__spreadValues({
+    "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 _a = props, { __scopeCollapsible } = _a, triggerProps = __objRest(_a, ["__scopeCollapsible"]);
+  const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
+  return /* @__PURE__ */ React.createElement(import_core.Stack, __spreadProps(__spreadValues({
+    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 _a = props, { forceMount } = _a, contentProps = __objRest(_a, ["forceMount"]);
+  const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, ({ present }) => /* @__PURE__ */ React.createElement(CollapsibleContentImpl, __spreadProps(__spreadValues({}, contentProps), {
+    ref: forwardedRef,
+    present
+  })));
+});
+CollapsibleContent.displayName = CONTENT_NAME;
+const CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
+  const _a = props, { __scopeCollapsible, present, children } = _a, contentProps = __objRest(_a, ["__scopeCollapsible", "present", "children"]);
+  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__ */ React.createElement(import_core.Stack, __spreadProps(__spreadValues({
+    "data-state": getState(context.open),
+    "data-disabled": context.disabled ? "" : void 0,
+    id: context.contentId,
+    hidden: !isOpen
+  }, contentProps), {
+    ref: composedRefs
+  }), isOpen && children);
+});
+function getState(open) {
+  return open ? "open" : "closed";
+}
+__name(getState, "getState");
+const Root = Collapsible;
+const Trigger = CollapsibleTrigger;
+const Content = CollapsibleContent;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Content,
+  Root,
+  Trigger,
+  createCollapsibleScope
+});
+//# sourceMappingURL=Collapsible.js.map

package/dist/cjs/Collapsible.js.map

@@ -0,0 +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": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./Collapsible"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Collapsible'\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,0BAAd;",
+  "names": []
+}

package/dist/esm/Collapsible.js

@@ -0,0 +1,113 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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__ */ React.createElement(CollapsibleProvider, {
+    scope: __scopeCollapsible,
+    disabled,
+    contentId: useId() || "",
+    open,
+    onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])
+  }, /* @__PURE__ */ React.createElement(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__ */ React.createElement(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__ */ React.createElement(React.Fragment, null, ({ present }) => /* @__PURE__ */ React.createElement(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__ */ React.createElement(Stack, {
+    "data-state": getState(context.open),
+    "data-disabled": context.disabled ? "" : void 0,
+    id: context.contentId,
+    hidden: !isOpen,
+    ...contentProps,
+    ref: composedRefs
+  }, isOpen && children);
+});
+function getState(open) {
+  return open ? "open" : "closed";
+}
+__name(getState, "getState");
+const Root = Collapsible;
+const Trigger = CollapsibleTrigger;
+const Content = CollapsibleContent;
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Content,
+  Root,
+  Trigger,
+  createCollapsibleScope
+};
+//# sourceMappingURL=Collapsible.js.map

package/dist/esm/Collapsible.js.map

@@ -0,0 +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": []
+}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./Collapsible";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Collapsible'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/jsx/Collapsible.js

@@ -0,0 +1,80 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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";
+}
+__name(getState, "getState");
+const Root = Collapsible;
+const Trigger = CollapsibleTrigger;
+const Content = CollapsibleContent;
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Content,
+  Root,
+  Trigger,
+  createCollapsibleScope
+};

package/dist/jsx/index.js

@@ -0,0 +1 @@
+export * from "./Collapsible";

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@tamagui/collapsible",
+  "version": "1.0.1-beta.65",
+  "sideEffects": true,
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch"
+  },
+  "dependencies": {
+    "@gorhom/bottom-sheet": "^4.3.1",
+    "@tamagui/compose-refs": "^1.0.1-beta.65",
+    "@tamagui/core": "^1.0.1-beta.65",
+    "@tamagui/create-context": "^1.0.1-beta.65",
+    "@tamagui/polyfill-dev": "^1.0.1-beta.65",
+    "@tamagui/stacks": "^1.0.1-beta.65",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.65",
+    "react-native-reanimated": "~2.8.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "react-native-gesture-handler": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.65",
+    "react": "*",
+    "react-dom": "*",
+    "react-native-gesture-handler": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
+}

package/src/Collapsible.tsx

@@ -0,0 +1,254 @@
+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 }

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Collapsible'