Deploying to gh-pages from @ 4833dce 🚀

Author: fakundo

assets/BasicTransition-DanHjO8v.js assets/BasicTransition-wQ3uPMvp.jsassets/BasicTransition-DanHjO8v.js renamed to assets/BasicTransition-wQ3uPMvp.js

@@ -0,0 +1,21 @@
+import{j as t}from"./jsx-runtime-CLpGMVip.js";import{r as o}from"./index-B-SYruCi.js";import{T as g}from"./CSSTransition-C2y1aoT6.js";const w={tags:["!dev"]},e={render:()=>{const[n,l]=o.useState(!0),[s,u]=o.useState(!0),c=()=>l(!n),d=()=>u(!s);return t.jsxs(t.Fragment,{children:[t.jsx("button",{onClick:c,type:"button",children:"Toggle visibility"}),t.jsxs("label",{children:[t.jsx("input",{type:"checkbox",checked:s,onChange:d}),"Always mounted"]}),t.jsx("hr",{}),t.jsx(g,{in:n,alwaysMounted:s,children:y=>t.jsx("pre",{children:JSON.stringify(y,null,"  ")})})]})}};var i,a,r;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:`{
+  render: () => {
+    const [visible, setVisible] = useState(true);
+    const [alwaysMounted, setAlwaysMounted] = useState(true);
+    const toggleVisibility = () => setVisible(!visible);
+    const toggleAlwaysMounted = () => setAlwaysMounted(!alwaysMounted);
+    return <>
+        <button onClick={toggleVisibility} type="button">
+          Toggle visibility
+        </button>
+        <label>
+          <input type="checkbox" checked={alwaysMounted} onChange={toggleAlwaysMounted} />
+          Always mounted
+        </label>
+        <hr />
+        <Transition in={visible} alwaysMounted={alwaysMounted}>
+          {transitionState => <pre>{JSON.stringify(transitionState, null, '  ')}</pre>}
+        </Transition>
+      </>;
+  }
+}`,...(r=(a=e.parameters)==null?void 0:a.docs)==null?void 0:r.source}}};const x=["Default"];export{e as Default,x as __namedExportsOrder,w as default};

assets/BasicTransition.stories-BtHVkRmp.js

@@ -1,5 +1,5 @@
-import{j as n}from"./jsx-runtime-CLpGMVip.js";import{useMDXComponents as r}from"./index-3LwI-BAG.js";import{M as s,C as t}from"./index-83Co2hU-.js";import{Default as d}from"./ConditionalRender.stories-C51RkWQC.js";import"./index-B-SYruCi.js";import"./iframe-BBl4h44f.js";import"./index-u5h8o4a9.js";import"./index-C-aVi5AG.js";import"./index-NOh9rqHv.js";import"./CSSTransition-BcQV4rvK.js";import"./StyleFadeTransition-DuLar2jw.js";function o(i){const e={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...i.components};return n.jsxs(n.Fragment,{children:[n.jsx(s,{title:"Examples/Transition Group/Conditional Render"}),`
-`,n.jsx(e.h1,{id:"transition-group-example-conditional-render",children:"Transition Group Example: Conditional Render"}),`
+import{j as n}from"./jsx-runtime-CLpGMVip.js";import{useMDXComponents as r}from"./index-3LwI-BAG.js";import{M as s,C as t}from"./index-CuPu8Tmx.js";import{Default as d}from"./ConditionalRender.stories-B9V-V7q4.js";import"./index-B-SYruCi.js";import"./iframe-CH3oSKwU.js";import"./index-u5h8o4a9.js";import"./index-C-aVi5AG.js";import"./index-NOh9rqHv.js";import"./CSSTransition-C2y1aoT6.js";import"./StyleFadeTransition-M4YQNHeZ.js";function o(i){const e={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...i.components};return n.jsxs(n.Fragment,{children:[n.jsx(s,{title:"Examples/Transition Group/Conditional Render"}),`
+`,n.jsx(e.h1,{id:"transition-group--conditional-render-example",children:"Transition Group – Conditional Render Example"}),`
 `,n.jsxs(e.p,{children:["This example demonstrates how to use the ",n.jsx(e.code,{children:"TransitionGroup"})," component with conditionally rendered children. By leveraging ",n.jsx(e.code,{children:"TransitionGroup"}),", you can easily handle animations for elements that are dynamically added or removed based on conditions."]}),`
 `,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
 `,n.jsxs(e.p,{children:["To use the ",n.jsx(e.code,{children:"TransitionGroup"})," with conditionally rendered children in your project, follow the example below:"]}),`