@tamagui/demos 2.0.0-1768263773228 → 2.0.0-1768427228811

package/dist/esm/SwitchUnstyledDemo.js

@@ -41,7 +41,7 @@ const Frame = styled(Stack, {
 function SwitchUnstyledDemo() {
   return /* @__PURE__ */ jsx(YStack, { width: 200, items: "center", gap: "$3", children: /* @__PURE__ */ jsxs(XStack, { gap: "$3", items: "center", children: [
     /* @__PURE__ */ jsx(Label, { htmlFor: "unstyled-switch", children: "Unstyled" }),
-    /* @__PURE__ */ jsx(Switch, { defaultChecked: !0, id: "unstyled-switch", children: /* @__PURE__ */ jsx(Switch.Thumb, { transition: "quick" }) })
+    /* @__PURE__ */ jsx(Switch, { defaultChecked: !0, id: "unstyled-switch", children: /* @__PURE__ */ jsx(Switch.Thumb, { transition: "quickest" }) })
   ] }) });
 }
 export {

package/dist/esm/SwitchUnstyledDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SwitchUnstyledDemo.tsx"],
-  "mappings": "AAAA,SAAS,OAAO,cAAc;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,OAAO,QAAQ,cAAc;AA+ChC,SACE,KADF;AA7CN,MAAM,QAAQ,OAAO,OAAO;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC,GAEK,QAAQ,OAAO,OAAO;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,SAAS;AAAA,EAET,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC,GAEY,SAAS,aAAa;AAAA,EACjC;AAAA,EACA;AACF,CAAC;AAEM,SAAS,qBAAqB;AACnC,SACE,oBAAC,UAAO,OAAO,KAAK,OAAM,UAAS,KAAI,MACrC,+BAAC,UAAO,KAAI,MAAK,OAAM,UACrB;AAAA,wBAAC,SAAM,SAAQ,mBAAkB,sBAAQ;AAAA,IACzC,oBAAC,UAAO,gBAAc,IAAC,IAAG,mBACxB,8BAAC,OAAO,OAAP,EAAa,YAAW,SAAQ,GACnC;AAAA,KACF,GACF;AAEJ;",
+  "mappings": "AAAA,SAAS,OAAO,cAAc;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,OAAO,QAAQ,cAAc;AA+ChC,SACE,KADF;AA7CN,MAAM,QAAQ,OAAO,OAAO;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC,GAEK,QAAQ,OAAO,OAAO;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,SAAS;AAAA,EAET,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC,GAEY,SAAS,aAAa;AAAA,EACjC;AAAA,EACA;AACF,CAAC;AAEM,SAAS,qBAAqB;AACnC,SACE,oBAAC,UAAO,OAAO,KAAK,OAAM,UAAS,KAAI,MACrC,+BAAC,UAAO,KAAI,MAAK,OAAM,UACrB;AAAA,wBAAC,SAAM,SAAQ,mBAAkB,sBAAQ;AAAA,IACzC,oBAAC,UAAO,gBAAc,IAAC,IAAG,mBACxB,8BAAC,OAAO,OAAP,EAAa,YAAW,YAAW,GACtC;AAAA,KACF,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/SwitchUnstyledDemo.mjs

@@ -55,7 +55,7 @@ function SwitchUnstyledDemo() {
         defaultChecked: !0,
         id: "unstyled-switch",
         children: /* @__PURE__ */jsx(Switch.Thumb, {
-          transition: "quick"
+          transition: "quickest"
         })
       })]
     })

package/dist/esm/SwitchUnstyledDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Stack","styled","createSwitch","Label","XStack","YStack","jsx","jsxs","Frame","width","height","rounded","variants","checked","true","backgroundColor","false","defaultVariants","Thumb","bg","opacity","Switch","SwitchUnstyledDemo","items","gap","children","htmlFor","defaultChecked","id","transition"],"sources":["../../src/SwitchUnstyledDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,KAAA,EAAOC,MAAA,QAAc;AAC9B,SAASC,YAAA,QAAoB;AAC7B,SAASC,KAAA,EAAOC,MAAA,EAAQC,MAAA,QAAc;AA+ChC,SACEC,GAAA,EADFC,IAAA;AA7CN,MAAMC,KAAA,GAAQP,MAAA,CAAOD,KAAA,EAAO;IAC1BS,KAAA,EAAO;IACPC,MAAA,EAAQ;IACRC,OAAA,EAAS;IACTC,QAAA,EAAU;MACRC,OAAA,EAAS;QACPC,IAAA,EAAM;UACJC,eAAA,EAAiB;QACnB;QACAC,KAAA,EAAO;UACLD,eAAA,EAAiB;QACnB;MACF;IACF;IACAE,eAAA,EAAiB;MACfJ,OAAA,EAAS;IACX;EACF,CAAC;EAEKK,KAAA,GAAQjB,MAAA,CAAOD,KAAA,EAAO;IAC1BS,KAAA,EAAO;IACPC,MAAA,EAAQ;IACRS,EAAA,EAAI;IACJR,OAAA,EAAS;IAETC,QAAA,EAAU;MACRC,OAAA,EAAS;QACPC,IAAA,EAAM;UACJM,OAAA,EAAS;QACX;QACAJ,KAAA,EAAO;UACLI,OAAA,EAAS;QACX;MACF;IACF;EACF,CAAC;EAEYC,MAAA,GAASnB,YAAA,CAAa;IACjCM,KAAA;IACAU;EACF,CAAC;AAEM,SAASI,mBAAA,EAAqB;EACnC,OACE,eAAAhB,GAAA,CAACD,MAAA;IAAOI,KAAA,EAAO;IAAKc,KAAA,EAAM;IAASC,GAAA,EAAI;IACrCC,QAAA,iBAAAlB,IAAA,CAACH,MAAA;MAAOoB,GAAA,EAAI;MAAKD,KAAA,EAAM;MACrBE,QAAA,kBAAAnB,GAAA,CAACH,KAAA;QAAMuB,OAAA,EAAQ;QAAkBD,QAAA;MAAA,CAAQ,GACzC,eAAAnB,GAAA,CAACe,MAAA;QAAOM,cAAA,EAAc;QAACC,EAAA,EAAG;QACxBH,QAAA,iBAAAnB,GAAA,CAACe,MAAA,CAAOH,KAAA,EAAP;UAAaW,UAAA,EAAW;QAAA,CAAQ;MAAA,CACnC;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"names":["Stack","styled","createSwitch","Label","XStack","YStack","jsx","jsxs","Frame","width","height","rounded","variants","checked","true","backgroundColor","false","defaultVariants","Thumb","bg","opacity","Switch","SwitchUnstyledDemo","items","gap","children","htmlFor","defaultChecked","id","transition"],"sources":["../../src/SwitchUnstyledDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,KAAA,EAAOC,MAAA,QAAc;AAC9B,SAASC,YAAA,QAAoB;AAC7B,SAASC,KAAA,EAAOC,MAAA,EAAQC,MAAA,QAAc;AA+ChC,SACEC,GAAA,EADFC,IAAA;AA7CN,MAAMC,KAAA,GAAQP,MAAA,CAAOD,KAAA,EAAO;IAC1BS,KAAA,EAAO;IACPC,MAAA,EAAQ;IACRC,OAAA,EAAS;IACTC,QAAA,EAAU;MACRC,OAAA,EAAS;QACPC,IAAA,EAAM;UACJC,eAAA,EAAiB;QACnB;QACAC,KAAA,EAAO;UACLD,eAAA,EAAiB;QACnB;MACF;IACF;IACAE,eAAA,EAAiB;MACfJ,OAAA,EAAS;IACX;EACF,CAAC;EAEKK,KAAA,GAAQjB,MAAA,CAAOD,KAAA,EAAO;IAC1BS,KAAA,EAAO;IACPC,MAAA,EAAQ;IACRS,EAAA,EAAI;IACJR,OAAA,EAAS;IAETC,QAAA,EAAU;MACRC,OAAA,EAAS;QACPC,IAAA,EAAM;UACJM,OAAA,EAAS;QACX;QACAJ,KAAA,EAAO;UACLI,OAAA,EAAS;QACX;MACF;IACF;EACF,CAAC;EAEYC,MAAA,GAASnB,YAAA,CAAa;IACjCM,KAAA;IACAU;EACF,CAAC;AAEM,SAASI,mBAAA,EAAqB;EACnC,OACE,eAAAhB,GAAA,CAACD,MAAA;IAAOI,KAAA,EAAO;IAAKc,KAAA,EAAM;IAASC,GAAA,EAAI;IACrCC,QAAA,iBAAAlB,IAAA,CAACH,MAAA;MAAOoB,GAAA,EAAI;MAAKD,KAAA,EAAM;MACrBE,QAAA,kBAAAnB,GAAA,CAACH,KAAA;QAAMuB,OAAA,EAAQ;QAAkBD,QAAA;MAAA,CAAQ,GACzC,eAAAnB,GAAA,CAACe,MAAA;QAAOM,cAAA,EAAc;QAACC,EAAA,EAAG;QACxBH,QAAA,iBAAAnB,GAAA,CAACe,MAAA,CAAOH,KAAA,EAAP;UAAaW,UAAA,EAAW;QAAA,CAAW;MAAA,CACtC;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/SwitchUnstyledDemo.native.js

@@ -55,7 +55,7 @@ function SwitchUnstyledDemo() {
         defaultChecked: !0,
         id: "unstyled-switch",
         children: /* @__PURE__ */_jsx(Switch.Thumb, {
-          transition: "quick"
+          transition: "quickest"
         })
       })]
     })

package/dist/esm/ToastDemo.js

@@ -14,17 +14,22 @@ const ToastDemo = () => {
   return !currentToast || currentToast.isHandledNatively ? null : /* @__PURE__ */ jsx(
     Toast,
     {
-      transition: "200ms",
       duration: currentToast.duration,
-      enterStyle: { opacity: 0, transform: [{ translateY: 100 }] },
-      exitStyle: { opacity: 0, transform: [{ translateY: 100 }] },
-      transform: [{ translateY: 0 }],
+      viewportName: currentToast.viewportName,
+      enterStyle: { opacity: 0, scale: 0.95, y: 50 },
+      exitStyle: { opacity: 0, scale: 0.95, y: 50 },
       opacity: 1,
       scale: 1,
-      viewportName: currentToast.viewportName,
-      children: /* @__PURE__ */ jsxs(YStack, { children: [
-        /* @__PURE__ */ jsx(Toast.Title, { children: currentToast.title }),
-        !!currentToast.message && /* @__PURE__ */ jsx(Toast.Description, { children: currentToast.message })
+      y: 0,
+      transition: "quicker",
+      bg: "$color2",
+      boxShadow: "0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)",
+      children: /* @__PURE__ */ jsxs(XStack, { gap: "$5", items: "center", justify: "space-between", children: [
+        /* @__PURE__ */ jsxs(YStack, { gap: "$0.5", flex: 1, children: [
+          /* @__PURE__ */ jsx(Toast.Title, { children: currentToast.title }),
+          !!currentToast.message && /* @__PURE__ */ jsx(Toast.Description, { children: currentToast.message })
+        ] }),
+        /* @__PURE__ */ jsx(Toast.Action, { asChild: !0, altText: "Dismiss toast", children: /* @__PURE__ */ jsx(Button, { size: "$2", children: "Dismiss" }) })
       ] })
     },
     currentToast.id
@@ -73,7 +78,7 @@ const ToastDemo = () => {
         Switch.Thumb,
         {
           transition: [
-            "quick",
+            "quickest",
             {
               transform: {
                 overshootClamping: !0

package/dist/esm/ToastDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDemo.tsx"],
-  "mappings": "AAAA,SAAS,OAAO,oBAAoB,qBAAqB;AACzD,OAAO,WAAW;AAClB,SAAS,QAAe,OAAO,QAAQ,QAAQ,cAAc;AAWzD,SACE,KADF;AAJG,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAK;AAEhD,SACE,qBAAC,UAAO,KAAI,MAAK,OAAM,UACrB;AAAA,wBAAC,gBAAa,QAAgB;AAAA,IAC9B,oBAAC,gBAAa;AAAA,IAEd,oBAAC,iBAAc,QAAgB,WAAsB;AAAA,KACvD;AAEJ,GAEM,eAAe,MAAM;AACzB,QAAM,eAAe,cAAc;AAEnC,SAAI,CAAC,gBAAgB,aAAa,oBAA0B,OAG1D;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MAEX,UAAU,aAAa;AAAA,MACvB,YAAY,EAAE,SAAS,GAAG,WAAW,CAAC,EAAE,YAAY,IAAI,CAAC,EAAE;AAAA,MAC3D,WAAW,EAAE,SAAS,GAAG,WAAW,CAAC,EAAE,YAAY,IAAI,CAAC,EAAE;AAAA,MAC1D,WAAW,CAAC,EAAE,YAAY,EAAE,CAAC;AAAA,MAC7B,SAAS;AAAA,MACT,OAAO;AAAA,MACP,cAAc,aAAa;AAAA,MAE3B,+BAAC,UACC;AAAA,4BAAC,MAAM,OAAN,EAAa,uBAAa,OAAM;AAAA,QAChC,CAAC,CAAC,aAAa,WACd,oBAAC,MAAM,aAAN,EAAmB,uBAAa,SAAQ;AAAA,SAE7C;AAAA;AAAA,IAdK,aAAa;AAAA,EAepB;AAEJ,GAEM,eAAe,CAAC,EAAE,OAAO,MAA2B;AACxD,QAAM,QAAQ,mBAAmB;AAEjC,SACE,qBAAC,UAAO,KAAI,MAAK,SAAQ,UACvB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK,uBAAuB;AAAA,YAChC,SAAS;AAAA,YACT;AAAA,YACA,MAAM;AAAA,UACR,CAAC;AAAA,QACH;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ,GAEM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAKI,qBAAC,UAAO,KAAI,MACV;AAAA,sBAAC,SAAM,MAAK,MAAK,SAAS,MAAM,UAAU,EAAK,GAAG,oBAElD;AAAA,EACA;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,UAAS;AAAA,MACT,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAS,CAAC,CAAC;AAAA,MACX,iBAAiB,CAAC,QAAQ,UAAU,GAAG;AAAA,MAEvC;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,YAAY;AAAA,YACV;AAAA,YACA;AAAA,cACE,WAAW;AAAA,gBACT,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAAA,EAEA,oBAAC,SAAM,MAAK,MAAK,SAAS,MAAM,UAAU,EAAI,GAAG,oBAEjD;AAAA,GACF;",
+  "mappings": "AAAA,SAAS,OAAO,oBAAoB,qBAAqB;AACzD,OAAO,WAAW;AAClB,SAAS,QAAQ,OAAO,QAAQ,QAAQ,cAAc;AAWlD,SACE,KADF;AAJG,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAK;AAEhD,SACE,qBAAC,UAAO,KAAI,MAAK,OAAM,UACrB;AAAA,wBAAC,gBAAa,QAAgB;AAAA,IAC9B,oBAAC,gBAAa;AAAA,IAEd,oBAAC,iBAAc,QAAgB,WAAsB;AAAA,KACvD;AAEJ,GAEM,eAAe,MAAM;AACzB,QAAM,eAAe,cAAc;AAEnC,SAAI,CAAC,gBAAgB,aAAa,oBAA0B,OAG1D;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU,aAAa;AAAA,MACvB,cAAc,aAAa;AAAA,MAC3B,YAAY,EAAE,SAAS,GAAG,OAAO,MAAM,GAAG,GAAG;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,MAAM,GAAG,GAAG;AAAA,MAC5C,SAAS;AAAA,MACT,OAAO;AAAA,MACP,GAAG;AAAA,MACH,YAAW;AAAA,MACX,IAAG;AAAA,MACH,WAAU;AAAA,MAEV,+BAAC,UAAO,KAAI,MAAK,OAAM,UAAS,SAAQ,iBACtC;AAAA,6BAAC,UAAO,KAAI,QAAO,MAAM,GACvB;AAAA,8BAAC,MAAM,OAAN,EAAa,uBAAa,OAAM;AAAA,UAChC,CAAC,CAAC,aAAa,WACd,oBAAC,MAAM,aAAN,EAAmB,uBAAa,SAAQ;AAAA,WAE7C;AAAA,QACA,oBAAC,MAAM,QAAN,EAAa,SAAO,IAAC,SAAQ,iBAC5B,8BAAC,UAAO,MAAK,MAAK,qBAAO,GAC3B;AAAA,SACF;AAAA;AAAA,IAtBK,aAAa;AAAA,EAuBpB;AAEJ,GAEM,eAAe,CAAC,EAAE,OAAO,MAA2B;AACxD,QAAM,QAAQ,mBAAmB;AAEjC,SACE,qBAAC,UAAO,KAAI,MAAK,SAAQ,UACvB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK,uBAAuB;AAAA,YAChC,SAAS;AAAA,YACT;AAAA,YACA,MAAM;AAAA,UACR,CAAC;AAAA,QACH;AAAA,QACD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,gBAAM,KAAK;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ,GAEM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAKI,qBAAC,UAAO,KAAI,MACV;AAAA,sBAAC,SAAM,MAAK,MAAK,SAAS,MAAM,UAAU,EAAK,GAAG,oBAElD;AAAA,EACA;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,UAAS;AAAA,MACT,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAS,CAAC,CAAC;AAAA,MACX,iBAAiB,CAAC,QAAQ,UAAU,GAAG;AAAA,MAEvC;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,YAAY;AAAA,YACV;AAAA,YACA;AAAA,cACE,WAAW;AAAA,gBACT,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAAA,EAEA,oBAAC,SAAM,MAAK,MAAK,SAAS,MAAM,UAAU,EAAI,GAAG,oBAEjD;AAAA,GACF;",
   "names": []
 }

package/dist/esm/ToastDemo.mjs

@@ -18,31 +18,43 @@ const ToastDemo = () => {
   CurrentToast = () => {
     const currentToast = useToastState();
     return !currentToast || currentToast.isHandledNatively ? null : /* @__PURE__ */jsx(Toast, {
-      transition: "200ms",
       duration: currentToast.duration,
+      viewportName: currentToast.viewportName,
       enterStyle: {
         opacity: 0,
-        transform: [{
-          translateY: 100
-        }]
+        scale: 0.95,
+        y: 50
       },
       exitStyle: {
         opacity: 0,
-        transform: [{
-          translateY: 100
-        }]
+        scale: 0.95,
+        y: 50
       },
-      transform: [{
-        translateY: 0
-      }],
       opacity: 1,
       scale: 1,
-      viewportName: currentToast.viewportName,
-      children: /* @__PURE__ */jsxs(YStack, {
-        children: [/* @__PURE__ */jsx(Toast.Title, {
-          children: currentToast.title
-        }), !!currentToast.message && /* @__PURE__ */jsx(Toast.Description, {
-          children: currentToast.message
+      y: 0,
+      transition: "quicker",
+      bg: "$color2",
+      boxShadow: "0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)",
+      children: /* @__PURE__ */jsxs(XStack, {
+        gap: "$5",
+        items: "center",
+        justify: "space-between",
+        children: [/* @__PURE__ */jsxs(YStack, {
+          gap: "$0.5",
+          flex: 1,
+          children: [/* @__PURE__ */jsx(Toast.Title, {
+            children: currentToast.title
+          }), !!currentToast.message && /* @__PURE__ */jsx(Toast.Description, {
+            children: currentToast.message
+          })]
+        }), /* @__PURE__ */jsx(Toast.Action, {
+          asChild: !0,
+          altText: "Dismiss toast",
+          children: /* @__PURE__ */jsx(Button, {
+            size: "$2",
+            children: "Dismiss"
+          })
         })]
       })
     }, currentToast.id);
@@ -88,7 +100,7 @@ const ToastDemo = () => {
       checked: !!native,
       onCheckedChange: val => setNative(val),
       children: /* @__PURE__ */jsx(Switch.Thumb, {
-        transition: ["quick", {
+        transition: ["quickest", {
           transform: {
             overshootClamping: !0
           }

package/dist/esm/ToastDemo.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Toast","useToastController","useToastState","React","Button","Label","Switch","XStack","YStack","jsx","jsxs","ToastDemo","native","setNative","useState","gap","items","children","ToastControl","CurrentToast","NativeOptions","currentToast","isHandledNatively","transition","duration","enterStyle","opacity","transform","translateY","exitStyle","scale","viewportName","Title","title","message","Description","id","toast","justify","onPress","show","demo","hide","size","nativeID","theme","checked","onCheckedChange","val","Thumb","overshootClamping"],"sources":["../../src/ToastDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Toast","useToastController","useToastState","React","Button","Label","Switch","XStack","YStack","jsx","jsxs","ToastDemo","native","setNative","useState","gap","items","children","ToastControl","CurrentToast","NativeOptions","currentToast","isHandledNatively","duration","viewportName","enterStyle","opacity","scale","y","exitStyle","transition","bg","boxShadow","justify","flex","Title","title","message","Description","Action","asChild","altText","size","id","toast","onPress","show","demo","hide","nativeID","theme","checked","onCheckedChange","val","Thumb","transform","overshootClamping"],"sources":["../../src/ToastDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/ToastDemo.native.js

@@ -18,31 +18,43 @@ var ToastDemo = function () {
   CurrentToast = function () {
     var currentToast = useToastState();
     return !currentToast || currentToast.isHandledNatively ? null : /* @__PURE__ */_jsx(Toast, {
-      transition: "200ms",
       duration: currentToast.duration,
+      viewportName: currentToast.viewportName,
       enterStyle: {
         opacity: 0,
-        transform: [{
-          translateY: 100
-        }]
+        scale: 0.95,
+        y: 50
       },
       exitStyle: {
         opacity: 0,
-        transform: [{
-          translateY: 100
-        }]
+        scale: 0.95,
+        y: 50
       },
-      transform: [{
-        translateY: 0
-      }],
       opacity: 1,
       scale: 1,
-      viewportName: currentToast.viewportName,
-      children: /* @__PURE__ */_jsxs(YStack, {
-        children: [/* @__PURE__ */_jsx(Toast.Title, {
-          children: currentToast.title
-        }), !!currentToast.message && /* @__PURE__ */_jsx(Toast.Description, {
-          children: currentToast.message
+      y: 0,
+      transition: "quicker",
+      bg: "$color2",
+      boxShadow: "0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)",
+      children: /* @__PURE__ */_jsxs(XStack, {
+        gap: "$5",
+        items: "center",
+        justify: "space-between",
+        children: [/* @__PURE__ */_jsxs(YStack, {
+          gap: "$0.5",
+          flex: 1,
+          children: [/* @__PURE__ */_jsx(Toast.Title, {
+            children: currentToast.title
+          }), !!currentToast.message && /* @__PURE__ */_jsx(Toast.Description, {
+            children: currentToast.message
+          })]
+        }), /* @__PURE__ */_jsx(Toast.Action, {
+          asChild: !0,
+          altText: "Dismiss toast",
+          children: /* @__PURE__ */_jsx(Button, {
+            size: "$2",
+            children: "Dismiss"
+          })
         })]
       })
     }, currentToast.id);
@@ -95,7 +107,7 @@ var ToastDemo = function () {
           return setNative(val);
         },
         children: /* @__PURE__ */_jsx(Switch.Thumb, {
-          transition: ["quick", {
+          transition: ["quickest", {
             transform: {
               overshootClamping: !0
             }

package/dist/esm/ToastDemo.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Toast","useToastController","useToastState","React","Button","Label","Switch","XStack","YStack","ToastDemo","native","setNative","useState","gap","items","children","ToastControl","CurrentToast","NativeOptions","currentToast","isHandledNatively","transition","duration","enterStyle","opacity","transform","translateY","exitStyle","scale","viewportName","Title","title","message","Description","id","param","toast","justify","onPress","show","demo","hide"],"sources":["../../src/ToastDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAOC,IAAA,EAAAC,IAAA,IAAAC,KAAA,QAAoB,mBAAqB;AACzD,SAAOC,KAAA,EAAAC,kBAAW,EAAAC,aAAA;AAClB,OAAAC,KAAS,MAAe,OAAO;AAW3B,SACEC,MADF,EAAAC,KAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,MAAA;AAJG,IAAAC,SAAM,YAAAA,CAAA,EAAkB;IAC7B,KAAAC,MAAO,EAAAC,SAAQ,IAASR,KAAI,CAAAS,QAAM,GAAS;IAE3C,OACE,eAAAb,KAAC,CAAAS,MAAA;MACCK,GAAA;MACAC,KAAA;MAEAC,QAAA,GACF,eAAAlB,IAAA,CAAAmB,YAAA;QAIEN;MACJ,EAAM,EAEN,eAAKb,IAAgB,CAAAoB,YAAa,OAG/B,eAAApB,IAAA,CAAAqB,aAAA;QAAAR,MAAA;QACCC;MAEA;IAC2D;EACD;EAAAM,YAC1D,GAAY,SAAAA,CAAA,EAAE;IAAe,IAC7BE,YAAS,GAAAjB,aAAA;IAAA,OACT,CAAAiB,YAAO,IAAAA,YAAA,CAAAC,iBAAA,yBAAAvB,IAAA,CAAAG,KAAA;MAAAqB,UACP,SAAc;MAAaC,QAE3B,EAAAH,YAAA,CAAAG,QAAA;MACEC,UAAA;QAAiCC,OAC9B;QACwCC,SAE7C;UAdKC,UAAa;QAepB;MAKF;MAEAC,SACE;QACEH,OAAA;QAACC,SAAA;UACCC,UAAS;QACP;MACW;MACTD,SACA,GAAM;QAEVC,UAAA;MAAA,EACD;MAEDF,OAAA;MACAI,KAAA;MAAAC,YAAC,EAAAV,YAAA,CAAAU,YAAA;MAAAd,QAAA,iBAAAhB,KAAA,CAAAS,MAAA;QAAAO,QACC,GACE,eAAWlB,IAAA,CAAAG,KAAA,CAAA8B,KAAA;UACbf,QAAA,EAAAI,YAAA,CAAAY;QACD,MAAAZ,YAAA,CAAAa,OAAA,mBAAAnC,IAAA,CAAAG,KAAA,CAAAiC,WAAA;UAEDlB,QAAA,EAAAI,YAAA,CAAAa;QACF;MAKF;IACA,GAAAb,YAAA,CAAAe,EAAA;EACF;EAAAlB,YAKI,YAAAA,CAACmB,KAAA;IACC;QAAAzB;MAAA,IAAAyB,KAAC;MAAAC,KAAM,GAAAnC,kBAAmB;IAG1B,sBAAAF,KAAA,CAAAQ,MAAA;MAACM,GAAA;MAAAwB,OAAA;MAAAtB,QACI,GACH,eAASlB,IAAA,CAAAO,MAAA;QACTkC,OAAM,WAAAA,CAAA;UACNF,KAAK,CAAAG,IAAA;YACLP,OAAW;YACXtB,MAAA;YAEA8B,IAAA;UAAC;QAAA;QAAAzB,QACC;MAAY,IACV,eACAlB,IAAA,CAAAO,MAAA;QAAAkC,OACE,WAAAA,CAAA,EAAW;UAAAF,KAAA,CACTK,IAAA;QAAmB;QACrB1B,QACF;MAAA;IACF;EACF;EAAAG,aAAA,YAAAA,CAAAiB,KAAA;IACF;MAAAzB,MAAA;MAAAC;IAAA,IAAAwB,KAAA;IAEA,sBAACpC,KAAA,CAAMQ,MAAK;MAGdM,GAAA","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Toast","useToastController","useToastState","React","Button","Label","Switch","XStack","YStack","ToastDemo","native","setNative","useState","gap","items","children","ToastControl","CurrentToast","NativeOptions","currentToast","isHandledNatively","duration","viewportName","enterStyle","opacity","scale","y","exitStyle","transition","bg","boxShadow","justify","flex","Title","title","message","Description","Action","asChild","altText","size","id","param","toast","onPress","show","demo","hide"],"sources":["../../src/ToastDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAOC,IAAA,EAAAC,IAAA,IAAAC,KAAA,QAAoB,mBAAqB;AACzD,SAAOC,KAAA,EAAAC,kBAAW,EAAAC,aAAA;AAClB,OAAAC,KAAS,MAAQ,OAAO;AAWpB,SACEC,MADF,EAAAC,KAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,MAAA;AAJG,IAAAC,SAAM,YAAAA,CAAA,EAAkB;IAC7B,KAAAC,MAAO,EAAAC,SAAQ,IAASR,KAAI,CAAAS,QAAM,GAAS;IAE3C,OACE,eAAAb,KAAC,CAAAS,MAAA;MACCK,GAAA;MACAC,KAAA;MAEAC,QAAA,GACF,eAAAlB,IAAA,CAAAmB,YAAA;QAIEN;MACJ,EAAM,EAEN,eAAKb,IAAgB,CAAAoB,YAAa,OAG/B,eAAApB,IAAA,CAAAqB,aAAA;QAAAR,MAAA;QAECC;MACA;IAC6C;EACD;EAAAM,YACnC,YAAAA,CAAA;IAAA,IACTE,YAAO,GAAAjB,aAAA;IAAA,OACJ,CAAAiB,YAAA,IAAAA,YAAA,CAAAC,iBAAA,yBAAAvB,IAAA,CAAAG,KAAA;MAAAqB,QACH,EAAAF,YAAW,CAAAE,QAAA;MAAAC,YACR,EAAAH,YAAA,CAAAG,YAAA;MAAAC,UACH;QAEAC,OAAA;QACEC,KAAA;QACEC,CAAA;MAAiC;MAEUC,SAE7C;QAAAH,OACA;QAEAC,KACF;QAAAC,CAAA;MAtBK;MAuBPF,OAAA;MAIEC,KAAA;MACJC,CAAA,GAAM;MAENE,UACE;MACEC,EAAA;MAAAC,SAAC;MAAAf,QAAA,iBAAAhB,KAAA,CAAAQ,MAAA;QAAAM,GACC;QACEC,KAAA,UAAW;QAAuBiB,OAChC,iBAAS;QAAAhB,QACT,kBACMhB,KAAA,CAAAS,MAAA;UACRK,GAAC;UACHmB,IAAA;UACDjB,QAAA,kBAAAlB,IAAA,CAAAG,KAAA,CAAAiC,KAAA;YAEDlB,QAAA,EAAAI,YAAA,CAAAe;UACA,IAAC,EAAAf,YAAA,CAAAgB,OAAA,mBAAAtC,IAAA,CAAAG,KAAA,CAAAoC,WAAA;YAAArB,QAAA,EAAAI,YAAA,CAAAgB;UACC;QAEA,IACD,eAAAtC,IAAA,CAAAG,KAAA,CAAAqC,MAAA;UAAAC,OAAA;UAEDC,OAAA;UACFxB,QAAA,iBAAAlB,IAAA,CAAAO,MAAA;YAIEoC,IAAA,MAAiB;YACrBzB,QAAA;UACA;QAME;MAIE;IAAA,GAACI,YAAA,CAAAsB,EAAA;EAAA;EAAAzB,YAAA,YAAAA,CAAA0B,KAAA;IAAA,IACC;QAAAhC;MAAG,IAAAgC,KAAA;MAAAC,KAAA,GAAA1C,kBAAA;IAAA,OACH,eAASF,KAAA,CAAAQ,MAAA;MAAAM,GACT,MAAM;MAAAkB,OACN,EAAK;MAAAhB,QACL,GACA,eAAAlB,IAAkB,CAAAO,MAAQ;QAE1BwC,OAAA,WAAAA,CAAA;UAACD,KAAO,CAAAE,IAAA;YAAPV,OAAA;YACCzB,MAAA;YACEoC,IAAA;UAAA,EACA;QAAA;QACa/B,QACT;MAAmB,IACrB,eACFlB,IAAA,CAAAO,MAAA;QAAAwC,OACF,WAAAA,CAAA;UAAAD,KAAA,CAAAI,IAAA;QACF;QAAAhC,QAAA;MACF;IAIA,CACF","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "2.0.0-1768263773228",
+  "version": "2.0.0-1768427228811",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -50,45 +50,45 @@
     }
   },
   "dependencies": {
-    "@tamagui/animate-presence": "2.0.0-1768263773228",
-    "@tamagui/avatar": "2.0.0-1768263773228",
-    "@tamagui/button": "2.0.0-1768263773228",
-    "@tamagui/checkbox": "2.0.0-1768263773228",
-    "@tamagui/checkbox-headless": "2.0.0-1768263773228",
-    "@tamagui/config": "2.0.0-1768263773228",
-    "@tamagui/context-menu": "2.0.0-1768263773228",
-    "@tamagui/core": "2.0.0-1768263773228",
-    "@tamagui/get-button-sized": "2.0.0-1768263773228",
-    "@tamagui/image": "2.0.0-1768263773228",
-    "@tamagui/input": "2.0.0-1768263773228",
-    "@tamagui/linear-gradient": "2.0.0-1768263773228",
-    "@tamagui/list-item": "2.0.0-1768263773228",
-    "@tamagui/logo": "2.0.0-1768263773228",
-    "@tamagui/lucide-icons": "2.0.0-1768263773228",
-    "@tamagui/menu": "2.0.0-1768263773228",
-    "@tamagui/popover": "2.0.0-1768263773228",
-    "@tamagui/progress": "2.0.0-1768263773228",
-    "@tamagui/radio-group": "2.0.0-1768263773228",
-    "@tamagui/radio-headless": "2.0.0-1768263773228",
-    "@tamagui/roving-focus": "2.0.0-1768263773228",
-    "@tamagui/select": "2.0.0-1768263773228",
-    "@tamagui/sheet": "2.0.0-1768263773228",
-    "@tamagui/slider": "2.0.0-1768263773228",
-    "@tamagui/stacks": "2.0.0-1768263773228",
-    "@tamagui/switch": "2.0.0-1768263773228",
-    "@tamagui/switch-headless": "2.0.0-1768263773228",
-    "@tamagui/tabs": "2.0.0-1768263773228",
-    "@tamagui/tamagui-dev-config": "2.0.0-1768263773228",
-    "@tamagui/theme": "2.0.0-1768263773228",
-    "@tamagui/toast": "2.0.0-1768263773228",
-    "tamagui": "2.0.0-1768263773228"
+    "@tamagui/animate-presence": "2.0.0-1768427228811",
+    "@tamagui/avatar": "2.0.0-1768427228811",
+    "@tamagui/button": "2.0.0-1768427228811",
+    "@tamagui/checkbox": "2.0.0-1768427228811",
+    "@tamagui/checkbox-headless": "2.0.0-1768427228811",
+    "@tamagui/config": "2.0.0-1768427228811",
+    "@tamagui/context-menu": "2.0.0-1768427228811",
+    "@tamagui/core": "2.0.0-1768427228811",
+    "@tamagui/get-button-sized": "2.0.0-1768427228811",
+    "@tamagui/image": "2.0.0-1768427228811",
+    "@tamagui/input": "2.0.0-1768427228811",
+    "@tamagui/linear-gradient": "2.0.0-1768427228811",
+    "@tamagui/list-item": "2.0.0-1768427228811",
+    "@tamagui/logo": "2.0.0-1768427228811",
+    "@tamagui/lucide-icons": "2.0.0-1768427228811",
+    "@tamagui/menu": "2.0.0-1768427228811",
+    "@tamagui/popover": "2.0.0-1768427228811",
+    "@tamagui/progress": "2.0.0-1768427228811",
+    "@tamagui/radio-group": "2.0.0-1768427228811",
+    "@tamagui/radio-headless": "2.0.0-1768427228811",
+    "@tamagui/roving-focus": "2.0.0-1768427228811",
+    "@tamagui/select": "2.0.0-1768427228811",
+    "@tamagui/sheet": "2.0.0-1768427228811",
+    "@tamagui/slider": "2.0.0-1768427228811",
+    "@tamagui/stacks": "2.0.0-1768427228811",
+    "@tamagui/switch": "2.0.0-1768427228811",
+    "@tamagui/switch-headless": "2.0.0-1768427228811",
+    "@tamagui/tabs": "2.0.0-1768427228811",
+    "@tamagui/tamagui-dev-config": "2.0.0-1768427228811",
+    "@tamagui/theme": "2.0.0-1768427228811",
+    "@tamagui/toast": "2.0.0-1768427228811",
+    "tamagui": "2.0.0-1768427228811"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-1768263773228",
+    "@tamagui/build": "2.0.0-1768427228811",
     "react": "*",
     "react-native": "0.81.5"
   },

package/src/AccordionDemo.tsx

@@ -4,7 +4,8 @@ import { Accordion, Paragraph, Square } from 'tamagui'
 export function AccordionDemo() {
   return (
     <Accordion overflow="hidden" width="$20" type="multiple">
-      <Accordion.Item value="a1">
+      {/* negative margin prevents double border between items */}
+      <Accordion.Item value="a1" mb={-1}>
         <Accordion.Trigger flexDirection="row" justify="space-between">
           {({
             open,

package/src/LabelDemo.tsx

@@ -15,7 +15,7 @@ export function LabelDemo() {
           Notifications
         </Label>
         <Switch id="notify">
-          <Switch.Thumb transition="quick" />
+          <Switch.Thumb transition="quickest" />
         </Switch>
       </XStack>
     </YStack>

package/src/PopoverDemo.tsx

@@ -90,7 +90,7 @@ export function Demo({
         height={200}
         enterStyle={{ y: -10, opacity: 0 }}
         exitStyle={{ y: -10, opacity: 0 }}
-        elevate
+        boxShadow="0px 4px 8px rgba(0,0,0,0.1), 0px 12px 32px rgba(0,0,0,0.08)"
         transition={[
           'quick',
           {

package/src/ProgressDemo.tsx

@@ -1,29 +1,30 @@
 import React from 'react'
-import type { SizeTokens } from 'tamagui'
 import { Button, Paragraph, Progress, Slider, XStack, YStack } from 'tamagui'
 import { Play, RotateCcw } from '@tamagui/lucide-icons'
 
 export function ProgressDemo() {
   const [key, setKey] = React.useState(0)
-  const [size, setSize] = React.useState(4)
-  const [progress, setProgress] = React.useState(0)
-  const sizeProp = `$${size}` as SizeTokens
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => setProgress(60), 1000)
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [])
+  const [progress, setProgress] = React.useState(60)
+  const [slider, setSlider] = React.useState<number[]>([60])
 
   return (
     <>
       <YStack height={60} items="center" gap="$4">
         <Paragraph height={30} opacity={0.5}>
-          Size: {size}
+          Progress: {progress}
         </Paragraph>
-        <Progress key={key} size={sizeProp} value={progress} bg="$color5">
-          <Progress.Indicator bg="$background" />
+        <Progress key={key} value={progress} bg="$color5">
+          <Progress.Indicator
+            transition={[
+              'quicker',
+              {
+                transform: {
+                  overshootClamping: true,
+                },
+              },
+            ]}
+            bg="$background"
+          />
         </Progress>
       </YStack>
 
@@ -38,12 +39,13 @@ export function ProgressDemo() {
         <Slider
           size="$2"
           width={130}
-          defaultValue={[0]}
+          value={slider}
           min={0}
           max={100}
           step={1}
           onValueChange={([val]) => {
             setProgress(val)
+            setSlider([val])
           }}
         >
           <Slider.Track borderWidth={1} borderColor="$color5">
@@ -63,6 +65,7 @@ export function ProgressDemo() {
           onPress={() => {
             setKey(Math.random())
             setProgress(0)
+            setSlider([0])
           }}
         />
       </XStack>

package/src/SwitchDemo.tsx

@@ -29,7 +29,7 @@ export function SwitchWithLabel(props: { size: SizeTokens; defaultChecked?: bool
       </Label>
       <Separator minH={20} vertical />
       <Switch id={id} size={props.size} defaultChecked={props.defaultChecked}>
-        <Switch.Thumb transition="quicker" />
+        <Switch.Thumb transition="quickest" />
       </Switch>
     </XStack>
   )

package/src/SwitchUnstyledDemo.tsx

@@ -50,7 +50,7 @@ export function SwitchUnstyledDemo() {
       <XStack gap="$3" items="center">
         <Label htmlFor="unstyled-switch">Unstyled</Label>
         <Switch defaultChecked id="unstyled-switch">
-          <Switch.Thumb transition="quick" />
+          <Switch.Thumb transition="quickest" />
         </Switch>
       </XStack>
     </YStack>

package/src/ToastDemo.tsx

@@ -1,6 +1,6 @@
 import { Toast, useToastController, useToastState } from '@tamagui/toast'
 import React from 'react'
-import { Button, isWeb, Label, Switch, XStack, YStack } from 'tamagui'
+import { Button, Label, Switch, XStack, YStack } from 'tamagui'
 
 /**
  *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:
@@ -27,22 +27,29 @@ const CurrentToast = () => {
 
   return (
     <Toast
-      transition="200ms"
       key={currentToast.id}
       duration={currentToast.duration}
-      enterStyle={{ opacity: 0, transform: [{ translateY: 100 }] }}
-      exitStyle={{ opacity: 0, transform: [{ translateY: 100 }] }}
-      transform={[{ translateY: 0 }]}
+      viewportName={currentToast.viewportName}
+      enterStyle={{ opacity: 0, scale: 0.95, y: 50 }}
+      exitStyle={{ opacity: 0, scale: 0.95, y: 50 }}
       opacity={1}
       scale={1}
-      viewportName={currentToast.viewportName}
+      y={0}
+      transition="quicker"
+      bg="$color2"
+      boxShadow="0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)"
     >
-      <YStack>
-        <Toast.Title>{currentToast.title}</Toast.Title>
-        {!!currentToast.message && (
-          <Toast.Description>{currentToast.message}</Toast.Description>
-        )}
-      </YStack>
+      <XStack gap="$5" items="center" justify="space-between">
+        <YStack gap="$0.5" flex={1}>
+          <Toast.Title>{currentToast.title}</Toast.Title>
+          {!!currentToast.message && (
+            <Toast.Description>{currentToast.message}</Toast.Description>
+          )}
+        </YStack>
+        <Toast.Action asChild altText="Dismiss toast">
+          <Button size="$2">Dismiss</Button>
+        </Toast.Action>
+      </XStack>
     </Toast>
   )
 }
@@ -96,7 +103,7 @@ const NativeOptions = ({
       >
         <Switch.Thumb
           transition={[
-            'quick',
+            'quickest',
             {
               transform: {
                 overshootClamping: true,