@tamagui/collapsible 1.40.0 → 1.41.0

package/dist/cjs/Collapsible.js

@@ -1,7 +1,9 @@
 "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)
@@ -15,15 +17,124 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  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
+  Collapsible: () => Collapsible,
+  CollapsibleContent: () => CollapsibleContent,
+  CollapsibleContentFrame: () => CollapsibleContentFrame,
+  CollapsibleTrigger: () => CollapsibleTrigger,
+  CollapsibleTriggerFrame: () => CollapsibleTriggerFrame,
+  createCollapsibleScope: () => createCollapsibleScope
 });
 module.exports = __toCommonJS(Collapsible_exports);
-const Collapsible = {};
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_create_context = require("@tamagui/create-context");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_web = require("@tamagui/web");
+var React = __toESM(require("react"));
+var import_tamagui = require("tamagui");
+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 = false, setOpen] = (0, import_use_controllable_state.useControllableState)({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CollapsibleProvider,
+      {
+        scope: __scopeCollapsible,
+        disabled,
+        contentId: React.useId(),
+        open,
+        onOpenToggle: React.useCallback(
+          () => setOpen((prevOpen) => !prevOpen),
+          [setOpen]
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_web.Stack,
+          {
+            "data-state": getState(open),
+            "data-disabled": disabled ? "" : void 0,
+            ...collapsibleProps,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+_Collapsible.displayName = COLLAPSIBLE_NAME;
+const TRIGGER_NAME = "CollapsibleTrigger";
+const CollapsibleTriggerFrame = (0, import_web.styled)(import_web.Stack, {
+  name: TRIGGER_NAME,
+  tag: "button"
+});
+const CollapsibleTrigger = CollapsibleTriggerFrame.styleable(
+  (props, forwardedRef) => {
+    const { __scopeCollapsible, children, ...triggerProps } = props;
+    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CollapsibleTriggerFrame,
+      {
+        "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_web.composeEventHandlers)(props.onPress, context.onOpenToggle),
+        children: typeof children === "function" ? children({ open: context.open }) : children
+      }
+    );
+  }
+);
+CollapsibleTrigger.displayName = TRIGGER_NAME;
+const CONTENT_NAME = "CollapsibleContent";
+const CollapsibleContentFrame = (0, import_web.styled)(import_web.Stack, {
+  name: CONTENT_NAME
+});
+const CollapsibleContent = CollapsibleContentFrame.styleable((props, forwardedRef) => {
+  const { forceMount, children, __scopeCollapsible, ...contentProps } = props;
+  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, { ...contentProps, children: forceMount || context.open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleContentFrame, { ref: forwardedRef, ...contentProps, children }) : null });
+});
+CollapsibleContent.displayName = CONTENT_NAME;
+function getState(open) {
+  return open ? "open" : "closed";
+}
+const Collapsible = (0, import_web.withStaticProperties)(_Collapsible, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Collapsible
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleContentFrame,
+  CollapsibleTrigger,
+  CollapsibleTriggerFrame,
+  createCollapsibleScope
 });
 //# sourceMappingURL=Collapsible.js.map

package/dist/cjs/Collapsible.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Collapsible.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,cAAc,CAAC;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuEQ;AArER,4BAAmC;AAEnC,oCAAqC;AACrC,iBAOO;AACP,YAAuB;AACvB,qBAAgC;AAMhC,MAAM,mBAAmB;AAGzB,MAAM,CAAC,0BAA0B,sBAAsB,QACrD,0CAAmB,gBAAgB;AASrC,MAAM,CAAC,qBAAqB,qBAAqB,IAC/C,yBAAkD,gBAAgB;AASpE,MAAM,eAAe,MAAM;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,OAAO,OAAO,OAAO,QAAI,oDAAqB;AAAA,MACnD,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACZ,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA,WAAW,MAAM,MAAM;AAAA,QACvB;AAAA,QACA,cAAc,MAAM;AAAA,UAClB,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ;AAAA,UACrC,CAAC,OAAO;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,cAAY,SAAS,IAAI;AAAA,YACzB,iBAAe,WAAW,KAAK;AAAA,YAC9B,GAAG;AAAA,YACJ,KAAK;AAAA;AAAA,QACP;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAM3B,MAAM,eAAe;AAIrB,MAAM,8BAA0B,mBAAO,kBAAO;AAAA,EAC5C,MAAM;AAAA,EACN,KAAK;AACP,CAAC;AAED,MAAM,qBAAqB,wBAAwB;AAAA,EACjD,CAAC,OAA6C,iBAAiB;AAC7D,UAAM,EAAE,oBAAoB,UAAU,GAAG,aAAa,IAAI;AAC1D,UAAM,UAAU,sBAAsB,cAAc,kBAAkB;AAEtE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe,QAAQ;AAAA,QACvB,iBAAe,QAAQ,QAAQ;AAAA,QAC/B,cAAY,SAAS,QAAQ,IAAI;AAAA,QACjC,iBAAe,QAAQ,WAAW,KAAK;AAAA,QACvC,UAAU,QAAQ;AAAA,QACjB,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,aAAS,iCAAqB,MAAM,SAAgB,QAAQ,YAAY;AAAA,QAEvE,iBAAO,aAAa,aAAa,SAAS,EAAE,MAAM,QAAQ,KAAK,CAAC,IAAI;AAAA;AAAA,IACvE;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AAcjC,MAAM,eAAe;AAErB,MAAM,8BAA0B,mBAAO,kBAAO;AAAA,EAC5C,MAAM;AACR,CAAC;AAED,MAAM,qBAAqB,wBAAwB,UAEjD,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,YAAY,UAAU,oBAAoB,GAAG,aAAa,IAAI;AACtE,QAAM,UAAU,sBAAsB,cAAc,kBAAkB;AAEtE,SACE,4CAAC,kCAAiB,GAAG,cAClB,wBAAc,QAAQ,OACrB,4CAAC,2BAAwB,KAAK,cAAe,GAAG,cAC7C,UACH,IACE,MACN;AAEJ,CAAC;AAED,mBAAmB,cAAc;AAGjC,SAAS,SAAS,MAAgB;AAChC,SAAO,OAAO,SAAS;AACzB;AAEA,MAAM,kBAAc,iCAAqB,cAAc;AAAA,EACrD,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
   "names": []
 }

package/dist/esm/Collapsible.js

@@ -1,5 +1,106 @@
-const Collapsible = {};
+import { jsx } from "react/jsx-runtime";
+import { createContextScope } from "@tamagui/create-context";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import {
+  Stack,
+  composeEventHandlers,
+  styled,
+  withStaticProperties
+} from "@tamagui/web";
+import * as React from "react";
+import { AnimatePresence } from "tamagui";
+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 = false, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    return /* @__PURE__ */ jsx(
+      CollapsibleProvider,
+      {
+        scope: __scopeCollapsible,
+        disabled,
+        contentId: React.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 CollapsibleTriggerFrame = styled(Stack, {
+  name: TRIGGER_NAME,
+  tag: "button"
+});
+const CollapsibleTrigger = CollapsibleTriggerFrame.styleable(
+  (props, forwardedRef) => {
+    const { __scopeCollapsible, children, ...triggerProps } = props;
+    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
+    return /* @__PURE__ */ jsx(
+      CollapsibleTriggerFrame,
+      {
+        "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),
+        children: typeof children === "function" ? children({ open: context.open }) : children
+      }
+    );
+  }
+);
+CollapsibleTrigger.displayName = TRIGGER_NAME;
+const CONTENT_NAME = "CollapsibleContent";
+const CollapsibleContentFrame = styled(Stack, {
+  name: CONTENT_NAME
+});
+const CollapsibleContent = CollapsibleContentFrame.styleable((props, forwardedRef) => {
+  const { forceMount, children, __scopeCollapsible, ...contentProps } = props;
+  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
+  return /* @__PURE__ */ jsx(AnimatePresence, { ...contentProps, children: forceMount || context.open ? /* @__PURE__ */ jsx(CollapsibleContentFrame, { ref: forwardedRef, ...contentProps, children }) : null });
+});
+CollapsibleContent.displayName = CONTENT_NAME;
+function getState(open) {
+  return open ? "open" : "closed";
+}
+const Collapsible = withStaticProperties(_Collapsible, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
 export {
-  Collapsible
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleContentFrame,
+  CollapsibleTrigger,
+  CollapsibleTriggerFrame,
+  createCollapsibleScope
 };
 //# sourceMappingURL=Collapsible.js.map

package/dist/esm/Collapsible.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Collapsible.tsx"],
-  "mappings": "AAAO,MAAM,cAAc,CAAC;",
+  "mappings": "AAuEQ;AArER,SAAS,0BAA0B;AAEnC,SAAS,4BAA4B;AACrC;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAMhC,MAAM,mBAAmB;AAGzB,MAAM,CAAC,0BAA0B,sBAAsB,IACrD,mBAAmB,gBAAgB;AASrC,MAAM,CAAC,qBAAqB,qBAAqB,IAC/C,yBAAkD,gBAAgB;AASpE,MAAM,eAAe,MAAM;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,OAAO,OAAO,OAAO,IAAI,qBAAqB;AAAA,MACnD,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACZ,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA,WAAW,MAAM,MAAM;AAAA,QACvB;AAAA,QACA,cAAc,MAAM;AAAA,UAClB,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ;AAAA,UACrC,CAAC,OAAO;AAAA,QACV;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,cAAY,SAAS,IAAI;AAAA,YACzB,iBAAe,WAAW,KAAK;AAAA,YAC9B,GAAG;AAAA,YACJ,KAAK;AAAA;AAAA,QACP;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAM3B,MAAM,eAAe;AAIrB,MAAM,0BAA0B,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,KAAK;AACP,CAAC;AAED,MAAM,qBAAqB,wBAAwB;AAAA,EACjD,CAAC,OAA6C,iBAAiB;AAC7D,UAAM,EAAE,oBAAoB,UAAU,GAAG,aAAa,IAAI;AAC1D,UAAM,UAAU,sBAAsB,cAAc,kBAAkB;AAEtE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe,QAAQ;AAAA,QACvB,iBAAe,QAAQ,QAAQ;AAAA,QAC/B,cAAY,SAAS,QAAQ,IAAI;AAAA,QACjC,iBAAe,QAAQ,WAAW,KAAK;AAAA,QACvC,UAAU,QAAQ;AAAA,QACjB,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,SAAS,qBAAqB,MAAM,SAAgB,QAAQ,YAAY;AAAA,QAEvE,iBAAO,aAAa,aAAa,SAAS,EAAE,MAAM,QAAQ,KAAK,CAAC,IAAI;AAAA;AAAA,IACvE;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AAcjC,MAAM,eAAe;AAErB,MAAM,0BAA0B,OAAO,OAAO;AAAA,EAC5C,MAAM;AACR,CAAC;AAED,MAAM,qBAAqB,wBAAwB,UAEjD,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,YAAY,UAAU,oBAAoB,GAAG,aAAa,IAAI;AACtE,QAAM,UAAU,sBAAsB,cAAc,kBAAkB;AAEtE,SACE,oBAAC,mBAAiB,GAAG,cAClB,wBAAc,QAAQ,OACrB,oBAAC,2BAAwB,KAAK,cAAe,GAAG,cAC7C,UACH,IACE,MACN;AAEJ,CAAC;AAED,mBAAmB,cAAc;AAGjC,SAAS,SAAS,MAAgB;AAChC,SAAO,OAAO,SAAS;AACzB;AAEA,MAAM,cAAc,qBAAqB,cAAc;AAAA,EACrD,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
   "names": []
 }

package/dist/jsx/Collapsible.js

@@ -1,5 +1,94 @@
-const Collapsible = {};
+import { createContextScope } from "@tamagui/create-context";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import {
+  Stack,
+  composeEventHandlers,
+  styled,
+  withStaticProperties
+} from "@tamagui/web";
+import * as React from "react";
+import { AnimatePresence } from "tamagui";
+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 = false, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    return <CollapsibleProvider
+      scope={__scopeCollapsible}
+      disabled={disabled}
+      contentId={React.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 CollapsibleTriggerFrame = styled(Stack, {
+  name: TRIGGER_NAME,
+  tag: "button"
+});
+const CollapsibleTrigger = CollapsibleTriggerFrame.styleable(
+  (props, forwardedRef) => {
+    const { __scopeCollapsible, children, ...triggerProps } = props;
+    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
+    return <CollapsibleTriggerFrame
+      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)}
+    >{typeof children === "function" ? children({ open: context.open }) : children}</CollapsibleTriggerFrame>;
+  }
+);
+CollapsibleTrigger.displayName = TRIGGER_NAME;
+const CONTENT_NAME = "CollapsibleContent";
+const CollapsibleContentFrame = styled(Stack, {
+  name: CONTENT_NAME
+});
+const CollapsibleContent = CollapsibleContentFrame.styleable((props, forwardedRef) => {
+  const { forceMount, children, __scopeCollapsible, ...contentProps } = props;
+  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
+  return <AnimatePresence {...contentProps}>{forceMount || context.open ? <CollapsibleContentFrame ref={forwardedRef} {...contentProps}>{children}</CollapsibleContentFrame> : null}</AnimatePresence>;
+});
+CollapsibleContent.displayName = CONTENT_NAME;
+function getState(open) {
+  return open ? "open" : "closed";
+}
+const Collapsible = withStaticProperties(_Collapsible, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
 export {
-  Collapsible
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleContentFrame,
+  CollapsibleTrigger,
+  CollapsibleTriggerFrame,
+  createCollapsibleScope
 };
 //# sourceMappingURL=Collapsible.js.map

package/dist/jsx/Collapsible.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Collapsible.tsx"],
-  "mappings": "AAAO,MAAM,cAAc,CAAC;",
+  "mappings": "AAEA,SAAS,0BAA0B;AAEnC,SAAS,4BAA4B;AACrC;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAMhC,MAAM,mBAAmB;AAGzB,MAAM,CAAC,0BAA0B,sBAAsB,IACrD,mBAAmB,gBAAgB;AASrC,MAAM,CAAC,qBAAqB,qBAAqB,IAC/C,yBAAkD,gBAAgB;AASpE,MAAM,eAAe,MAAM;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,OAAO,OAAO,OAAO,IAAI,qBAAqB;AAAA,MACnD,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACZ,CAAC;AAED,WACE,CAAC;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,MAAM,MAAM;AAAA,MACvB,MAAM;AAAA,MACN,cAAc,MAAM;AAAA,QAClB,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ;AAAA,QACrC,CAAC,OAAO;AAAA,MACV;AAAA,KAEA,CAAC;AAAA,MACC,YAAY,SAAS,IAAI;AAAA,MACzB,eAAe,WAAW,KAAK;AAAA,UAC3B;AAAA,MACJ,KAAK;AAAA,IACP,EACF,EAhBC;AAAA,EAkBL;AACF;AAEA,aAAa,cAAc;AAM3B,MAAM,eAAe;AAIrB,MAAM,0BAA0B,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,KAAK;AACP,CAAC;AAED,MAAM,qBAAqB,wBAAwB;AAAA,EACjD,CAAC,OAA6C,iBAAiB;AAC7D,UAAM,EAAE,oBAAoB,UAAU,GAAG,aAAa,IAAI;AAC1D,UAAM,UAAU,sBAAsB,cAAc,kBAAkB;AAEtE,WACE,CAAC;AAAA,MACC,eAAe,QAAQ;AAAA,MACvB,eAAe,QAAQ,QAAQ;AAAA,MAC/B,YAAY,SAAS,QAAQ,IAAI;AAAA,MACjC,eAAe,QAAQ,WAAW,KAAK;AAAA,MACvC,UAAU,QAAQ;AAAA,UACd;AAAA,MACJ,KAAK;AAAA,MACL,SAAS,qBAAqB,MAAM,SAAgB,QAAQ,YAAY;AAAA,MAEvE,OAAO,aAAa,aAAa,SAAS,EAAE,MAAM,QAAQ,KAAK,CAAC,IAAI,SACvE,EAXC;AAAA,EAaL;AACF;AAEA,mBAAmB,cAAc;AAcjC,MAAM,eAAe;AAErB,MAAM,0BAA0B,OAAO,OAAO;AAAA,EAC5C,MAAM;AACR,CAAC;AAED,MAAM,qBAAqB,wBAAwB,UAEjD,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,YAAY,UAAU,oBAAoB,GAAG,aAAa,IAAI;AACtE,QAAM,UAAU,sBAAsB,cAAc,kBAAkB;AAEtE,SACE,CAAC,oBAAoB,eAClB,cAAc,QAAQ,OACrB,CAAC,wBAAwB,KAAK,kBAAkB,eAC7C,SACH,EAFC,2BAGC,KACN,EANC;AAQL,CAAC;AAED,mBAAmB,cAAc;AAGjC,SAAS,SAAS,MAAgB;AAChC,SAAO,OAAO,SAAS;AACzB;AAEA,MAAM,cAAc,qBAAqB,cAAc;AAAA,EACrD,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
   "names": []
 }

package/dist/jsx/Collapsible.mjs

@@ -1,5 +1,94 @@
-const Collapsible = {};
+import { createContextScope } from "@tamagui/create-context";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import {
+  Stack,
+  composeEventHandlers,
+  styled,
+  withStaticProperties
+} from "@tamagui/web";
+import * as React from "react";
+import { AnimatePresence } from "tamagui";
+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 = false, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    return <CollapsibleProvider
+      scope={__scopeCollapsible}
+      disabled={disabled}
+      contentId={React.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 CollapsibleTriggerFrame = styled(Stack, {
+  name: TRIGGER_NAME,
+  tag: "button"
+});
+const CollapsibleTrigger = CollapsibleTriggerFrame.styleable(
+  (props, forwardedRef) => {
+    const { __scopeCollapsible, children, ...triggerProps } = props;
+    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
+    return <CollapsibleTriggerFrame
+      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)}
+    >{typeof children === "function" ? children({ open: context.open }) : children}</CollapsibleTriggerFrame>;
+  }
+);
+CollapsibleTrigger.displayName = TRIGGER_NAME;
+const CONTENT_NAME = "CollapsibleContent";
+const CollapsibleContentFrame = styled(Stack, {
+  name: CONTENT_NAME
+});
+const CollapsibleContent = CollapsibleContentFrame.styleable((props, forwardedRef) => {
+  const { forceMount, children, __scopeCollapsible, ...contentProps } = props;
+  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
+  return <AnimatePresence {...contentProps}>{forceMount || context.open ? <CollapsibleContentFrame ref={forwardedRef} {...contentProps}>{children}</CollapsibleContentFrame> : null}</AnimatePresence>;
+});
+CollapsibleContent.displayName = CONTENT_NAME;
+function getState(open) {
+  return open ? "open" : "closed";
+}
+const Collapsible = withStaticProperties(_Collapsible, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
 export {
-  Collapsible
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleContentFrame,
+  CollapsibleTrigger,
+  CollapsibleTriggerFrame,
+  createCollapsibleScope
 };
 //# sourceMappingURL=Collapsible.mjs.map

package/dist/jsx/Collapsible.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Collapsible.tsx"],
-  "mappings": "AAAO,MAAM,cAAc,CAAC;",
+  "mappings": "AAEA,SAAS,0BAA0B;AAEnC,SAAS,4BAA4B;AACrC;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAMhC,MAAM,mBAAmB;AAGzB,MAAM,CAAC,0BAA0B,sBAAsB,IACrD,mBAAmB,gBAAgB;AASrC,MAAM,CAAC,qBAAqB,qBAAqB,IAC/C,yBAAkD,gBAAgB;AASpE,MAAM,eAAe,MAAM;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,OAAO,OAAO,OAAO,IAAI,qBAAqB;AAAA,MACnD,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACZ,CAAC;AAED,WACE,CAAC;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,MAAM,MAAM;AAAA,MACvB,MAAM;AAAA,MACN,cAAc,MAAM;AAAA,QAClB,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ;AAAA,QACrC,CAAC,OAAO;AAAA,MACV;AAAA,KAEA,CAAC;AAAA,MACC,YAAY,SAAS,IAAI;AAAA,MACzB,eAAe,WAAW,KAAK;AAAA,UAC3B;AAAA,MACJ,KAAK;AAAA,IACP,EACF,EAhBC;AAAA,EAkBL;AACF;AAEA,aAAa,cAAc;AAM3B,MAAM,eAAe;AAIrB,MAAM,0BAA0B,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,KAAK;AACP,CAAC;AAED,MAAM,qBAAqB,wBAAwB;AAAA,EACjD,CAAC,OAA6C,iBAAiB;AAC7D,UAAM,EAAE,oBAAoB,UAAU,GAAG,aAAa,IAAI;AAC1D,UAAM,UAAU,sBAAsB,cAAc,kBAAkB;AAEtE,WACE,CAAC;AAAA,MACC,eAAe,QAAQ;AAAA,MACvB,eAAe,QAAQ,QAAQ;AAAA,MAC/B,YAAY,SAAS,QAAQ,IAAI;AAAA,MACjC,eAAe,QAAQ,WAAW,KAAK;AAAA,MACvC,UAAU,QAAQ;AAAA,UACd;AAAA,MACJ,KAAK;AAAA,MACL,SAAS,qBAAqB,MAAM,SAAgB,QAAQ,YAAY;AAAA,MAEvE,OAAO,aAAa,aAAa,SAAS,EAAE,MAAM,QAAQ,KAAK,CAAC,IAAI,SACvE,EAXC;AAAA,EAaL;AACF;AAEA,mBAAmB,cAAc;AAcjC,MAAM,eAAe;AAErB,MAAM,0BAA0B,OAAO,OAAO;AAAA,EAC5C,MAAM;AACR,CAAC;AAED,MAAM,qBAAqB,wBAAwB,UAEjD,CAAC,OAAO,iBAAiB;AACzB,QAAM,EAAE,YAAY,UAAU,oBAAoB,GAAG,aAAa,IAAI;AACtE,QAAM,UAAU,sBAAsB,cAAc,kBAAkB;AAEtE,SACE,CAAC,oBAAoB,eAClB,cAAc,QAAQ,OACrB,CAAC,wBAAwB,KAAK,kBAAkB,eAC7C,SACH,EAFC,2BAGC,KACN,EANC;AAQL,CAAC;AAED,mBAAmB,cAAc;AAGjC,SAAS,SAAS,MAAgB;AAChC,SAAO,OAAO,SAAS;AACzB;AAEA,MAAM,cAAc,qBAAqB,cAAc;AAAA,EACrD,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/collapsible",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -17,18 +17,18 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "1.40.0",
-    "@tamagui/core": "1.40.0",
-    "@tamagui/create-context": "1.40.0",
-    "@tamagui/polyfill-dev": "1.40.0",
-    "@tamagui/stacks": "1.40.0",
-    "@tamagui/use-controllable-state": "1.40.0"
+    "@tamagui/compose-refs": "1.41.0",
+    "@tamagui/core": "1.41.0",
+    "@tamagui/create-context": "1.41.0",
+    "@tamagui/polyfill-dev": "1.41.0",
+    "@tamagui/stacks": "1.41.0",
+    "@tamagui/use-controllable-state": "1.41.0"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.40.0",
+    "@tamagui/build": "1.41.0",
     "react": "^18.2.0"
   },
   "publishConfig": {

package/src/Collapsible.tsx

@@ -1,248 +1,177 @@
-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 }
+import { AnimatePresenceProps } from '@tamagui/animate-presence/types/types'
+import type { Scope } from '@tamagui/create-context'
+import { createContextScope } from '@tamagui/create-context'
+import { ThemeableStackProps } from '@tamagui/stacks'
+import { useControllableState } from '@tamagui/use-controllable-state'
+import {
+  GetProps,
+  Stack,
+  StackProps,
+  composeEventHandlers,
+  styled,
+  withStaticProperties,
+} from '@tamagui/web'
+import * as React from 'react'
+import { AnimatePresence } from 'tamagui'
+
+/* -------------------------------------------------------------------------------------------------
+ * 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)
+
+interface CollapsibleProps extends StackProps {
+  defaultOpen?: boolean
+  open?: boolean
+  disabled?: boolean
+  onOpenChange?(open: boolean): void
+}
+
+const _Collapsible = React.forwardRef<Stack, ScopedProps<CollapsibleProps>>(
+  (props, forwardedRef) => {
+    const {
+      __scopeCollapsible,
+      open: openProp,
+      defaultOpen,
+      disabled,
+      onOpenChange,
+      ...collapsibleProps
+    } = props
+
+    const [open = false, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen!,
+      onChange: onOpenChange,
+    })
+
+    return (
+      <CollapsibleProvider
+        scope={__scopeCollapsible}
+        disabled={disabled}
+        contentId={React.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 CollapsibleTriggerProps = GetProps<typeof Stack>
+
+const CollapsibleTriggerFrame = styled(Stack, {
+  name: TRIGGER_NAME,
+  tag: 'button',
+})
+
+const CollapsibleTrigger = CollapsibleTriggerFrame.styleable<CollapsibleTriggerProps>(
+  (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {
+    const { __scopeCollapsible, children, ...triggerProps } = props
+    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible)
+
+    return (
+      <CollapsibleTriggerFrame
+        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 as any, context.onOpenToggle)}
+      >
+        {typeof children === 'function' ? children({ open: context.open }) : children}
+      </CollapsibleTriggerFrame>
+    )
+  }
+)
+
+CollapsibleTrigger.displayName = TRIGGER_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * CollapsibleContent
+ * -----------------------------------------------------------------------------------------------*/
+
+interface CollapsibleContentProps extends AnimatePresenceProps, ThemeableStackProps {
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with React animation libraries.
+   */
+  forceMount?: true
+}
+
+const CONTENT_NAME = 'CollapsibleContent'
+
+const CollapsibleContentFrame = styled(Stack, {
+  name: CONTENT_NAME,
+})
+
+const CollapsibleContent = CollapsibleContentFrame.styleable<
+  ScopedProps<CollapsibleContentProps>
+>((props, forwardedRef) => {
+  const { forceMount, children, __scopeCollapsible, ...contentProps } = props
+  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible)
+
+  return (
+    <AnimatePresence {...contentProps}>
+      {forceMount || context.open ? (
+        <CollapsibleContentFrame ref={forwardedRef} {...contentProps}>
+          {children}
+        </CollapsibleContentFrame>
+      ) : null}
+    </AnimatePresence>
+  )
+})
+
+CollapsibleContent.displayName = CONTENT_NAME
+
+/* -----------------------------------------------------------------------------------------------*/
+function getState(open?: boolean) {
+  return open ? 'open' : 'closed'
+}
+
+const Collapsible = withStaticProperties(_Collapsible, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent,
+})
+
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleContentFrame,
+  CollapsibleTrigger,
+  CollapsibleTriggerFrame,
+  createCollapsibleScope,
+}
+export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps }

package/types/Collapsible.d.ts

@@ -1,2 +1,221 @@
-export declare const Collapsible: {};
+import { AnimatePresenceProps } from '@tamagui/animate-presence/types/types';
+import type { Scope } from '@tamagui/create-context';
+import { ThemeableStackProps } from '@tamagui/stacks';
+import { GetProps, Stack, StackProps } from '@tamagui/web';
+import * as React from 'react';
+declare const createCollapsibleScope: import("tamagui").CreateScope;
+interface CollapsibleProps extends StackProps {
+    defaultOpen?: boolean;
+    open?: boolean;
+    disabled?: boolean;
+    onOpenChange?(open: boolean): void;
+}
+type CollapsibleTriggerProps = GetProps<typeof Stack>;
+declare const CollapsibleTriggerFrame: import("tamagui").TamaguiComponent<StackProps | (Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+} & import("@tamagui/web").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+}>> & import("@tamagui/web").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+}>>), import("tamagui").TamaguiElement, import("tamagui").StackPropsBase, {} | {
+    [x: string]: undefined;
+}, {
+    displayName: string | undefined;
+    __baseProps: import("tamagui").StackPropsBase;
+    __variantProps: {};
+}>;
+declare const CollapsibleTrigger: import("@tamagui/web").ReactComponentWithRef<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & import("@tamagui/web").PseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>>> & import("@tamagui/web").MediaProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & import("@tamagui/web").PseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>>>> & Omit<StackProps | (Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+} & import("@tamagui/web").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+}>> & import("@tamagui/web").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+}>>), "style" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-labelledby" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-live" | "aria-modal" | "accessibilityLiveRegion" | "accessibilityLabelledBy" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | `$${string}` | `$${number}` | keyof {
+    columnGap?: import("@tamagui/web").SpaceValue | undefined;
+    contain?: import("csstype").Property.Contain | undefined;
+    cursor?: import("csstype").Property.Cursor | undefined;
+    display?: "flex" | "none" | "inherit" | "inline" | "block" | "contents" | "inline-flex" | undefined;
+    gap?: import("@tamagui/web").SpaceValue | undefined;
+    outlineColor?: import("csstype").Property.OutlineColor | undefined;
+    outlineOffset?: import("@tamagui/web").SpaceValue | undefined;
+    outlineStyle?: import("csstype").Property.OutlineStyle | undefined;
+    outlineWidth?: import("@tamagui/web").SpaceValue | undefined;
+    pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
+    rowGap?: import("@tamagui/web").SpaceValue | undefined;
+    space?: import("@tamagui/web").SpaceValue | undefined;
+    spaceDirection?: import("@tamagui/web").SpaceDirection | undefined;
+    separator?: React.ReactNode;
+    animation?: import("@tamagui/web").AnimationProp | null | undefined;
+    animateOnly?: string[] | undefined;
+    userSelect?: import("csstype").Property.UserSelect | undefined;
+} | "backgroundColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockStartColor" | "borderBottomColor" | "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderColor" | "borderCurve" | "borderEndColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderLeftColor" | "borderRadius" | "borderRightColor" | "borderStartColor" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTopColor" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "aspectRatio" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth" | "bottom" | "end" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "left" | "margin" | "marginBottom" | "marginEnd" | "marginHorizontal" | "marginLeft" | "marginRight" | "marginStart" | "marginTop" | "marginVertical" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "overflow" | "padding" | "paddingBottom" | "paddingEnd" | "paddingHorizontal" | "paddingLeft" | "paddingRight" | "paddingStart" | "paddingTop" | "paddingVertical" | "position" | "right" | "start" | "top" | "width" | "zIndex" | "direction" | "shadowColor" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "transform" | "transformMatrix" | "rotation" | "translateX" | "translateY" | keyof import("tamagui").TransformStyleProps | keyof import("tamagui").TamaguiComponentPropsBase | keyof import("@tamagui/web").PseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>>>>, import("tamagui").TamaguiElement> & {
+    staticConfig: import("tamagui").StaticConfigParsed;
+    styleable: import("tamagui").Styleable<StackProps | (Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    } & import("@tamagui/web").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    }>> & import("@tamagui/web").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    }>>), import("tamagui").TamaguiElement>;
+};
+interface CollapsibleContentProps extends AnimatePresenceProps, ThemeableStackProps {
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
+}
+declare const CollapsibleContentFrame: import("tamagui").TamaguiComponent<StackProps | (Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+} & import("@tamagui/web").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+}>> & import("@tamagui/web").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+}>>), import("tamagui").TamaguiElement, import("tamagui").StackPropsBase, {} | {
+    [x: string]: undefined;
+}, {
+    displayName: string | undefined;
+    __baseProps: import("tamagui").StackPropsBase;
+    __variantProps: {};
+}>;
+declare const CollapsibleContent: import("@tamagui/web").ReactComponentWithRef<CollapsibleContentProps & {
+    __scopeCollapsible?: Scope;
+} & Omit<StackProps | (Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+} & import("@tamagui/web").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+}>> & import("@tamagui/web").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+    [x: string]: undefined;
+}>>), "__scopeCollapsible" | keyof CollapsibleContentProps>, import("tamagui").TamaguiElement> & {
+    staticConfig: import("tamagui").StaticConfigParsed;
+    styleable: import("tamagui").Styleable<StackProps | (Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    } & import("@tamagui/web").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    }>> & import("@tamagui/web").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    }>>), import("tamagui").TamaguiElement>;
+};
+declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & {
+    __scopeCollapsible?: Scope;
+} & React.RefAttributes<import("tamagui").TamaguiElement>> & {
+    Trigger: import("@tamagui/web").ReactComponentWithRef<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & import("@tamagui/web").PseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>>> & import("@tamagui/web").MediaProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & import("@tamagui/web").PseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>>>> & Omit<StackProps | (Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    } & import("@tamagui/web").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    }>> & import("@tamagui/web").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    }>>), "style" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-labelledby" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-live" | "aria-modal" | "accessibilityLiveRegion" | "accessibilityLabelledBy" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | `$${string}` | `$${number}` | keyof {
+        columnGap?: import("@tamagui/web").SpaceValue | undefined;
+        contain?: import("csstype").Property.Contain | undefined;
+        cursor?: import("csstype").Property.Cursor | undefined;
+        display?: "flex" | "none" | "inherit" | "inline" | "block" | "contents" | "inline-flex" | undefined;
+        gap?: import("@tamagui/web").SpaceValue | undefined;
+        outlineColor?: import("csstype").Property.OutlineColor | undefined;
+        outlineOffset?: import("@tamagui/web").SpaceValue | undefined;
+        outlineStyle?: import("csstype").Property.OutlineStyle | undefined;
+        outlineWidth?: import("@tamagui/web").SpaceValue | undefined;
+        pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined;
+        rowGap?: import("@tamagui/web").SpaceValue | undefined;
+        space?: import("@tamagui/web").SpaceValue | undefined;
+        spaceDirection?: import("@tamagui/web").SpaceDirection | undefined;
+        separator?: React.ReactNode;
+        animation?: import("@tamagui/web").AnimationProp | null | undefined;
+        animateOnly?: string[] | undefined;
+        userSelect?: import("csstype").Property.UserSelect | undefined;
+    } | "backgroundColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockStartColor" | "borderBottomColor" | "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderColor" | "borderCurve" | "borderEndColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderLeftColor" | "borderRadius" | "borderRightColor" | "borderStartColor" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTopColor" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "aspectRatio" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth" | "bottom" | "end" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "left" | "margin" | "marginBottom" | "marginEnd" | "marginHorizontal" | "marginLeft" | "marginRight" | "marginStart" | "marginTop" | "marginVertical" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "overflow" | "padding" | "paddingBottom" | "paddingEnd" | "paddingHorizontal" | "paddingLeft" | "paddingRight" | "paddingStart" | "paddingTop" | "paddingVertical" | "position" | "right" | "start" | "top" | "width" | "zIndex" | "direction" | "shadowColor" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "transform" | "transformMatrix" | "rotation" | "translateX" | "translateY" | keyof import("tamagui").TransformStyleProps | keyof import("tamagui").TamaguiComponentPropsBase | keyof import("@tamagui/web").PseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>>>>, import("tamagui").TamaguiElement> & {
+        staticConfig: import("tamagui").StaticConfigParsed;
+        styleable: import("tamagui").Styleable<StackProps | (Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+            style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+        } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+            [x: string]: undefined;
+        } & import("@tamagui/web").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+            style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+        } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+            [x: string]: undefined;
+        }>> & import("@tamagui/web").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+            style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+        } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+            [x: string]: undefined;
+        }>>), import("tamagui").TamaguiElement>;
+    };
+    Content: import("@tamagui/web").ReactComponentWithRef<CollapsibleContentProps & {
+        __scopeCollapsible?: Scope;
+    } & Omit<StackProps | (Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    } & import("@tamagui/web").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    }>> & import("@tamagui/web").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+        style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+    } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+        [x: string]: undefined;
+    }>>), "__scopeCollapsible" | keyof CollapsibleContentProps>, import("tamagui").TamaguiElement> & {
+        staticConfig: import("tamagui").StaticConfigParsed;
+        styleable: import("tamagui").Styleable<StackProps | (Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+            style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+        } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+            [x: string]: undefined;
+        } & import("@tamagui/web").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+            style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+        } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+            [x: string]: undefined;
+        }>> & import("@tamagui/web").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers) | "style"> & import("@tamagui/web").ExtendBaseStackProps & import("tamagui").TamaguiComponentPropsBase & {
+            style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
+        } & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & Omit<{}, string | number> & {
+            [x: string]: undefined;
+        }>>), import("tamagui").TamaguiElement>;
+    };
+};
+export { Collapsible, CollapsibleContent, CollapsibleContentFrame, CollapsibleTrigger, CollapsibleTriggerFrame, createCollapsibleScope, };
+export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps };
 //# sourceMappingURL=Collapsible.d.ts.map

package/types/Collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../src/Collapsible.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,IAAK,CAAA"}
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../src/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAC5E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EAIX,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,QAAA,MAAiC,sBAAsB,+BACjB,CAAA;AAYtC,UAAU,gBAAiB,SAAQ,UAAU;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CACnC;AAiDD,KAAK,uBAAuB,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAErD,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;EAG3B,CAAA;AAEF,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBvB,CAAA;AAQD,UAAU,uBAAwB,SAAQ,oBAAoB,EAAE,mBAAmB;IACjF;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAA;CAClB;AAID,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;EAE3B,CAAA;AAEF,QAAA,MAAM,kBAAkB;yBArHyB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIpD,CAAA;AASF,QAAA,MAAM,WAAW;yBA7IgC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAAL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJpD,CAAA;AAEF,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,GACvB,CAAA;AACD,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}