@xyd-js/storybook 0.0.1-build.167

package/storybook-static/assets/ColorSchemeButton.stories-C1yuuA8O.js

@@ -0,0 +1,384 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{b as o}from"./Update-DflVXGGQ-qVV03FlC.js";import"./Text-BAwif7rv-BYvLGGQV.js";import"./index-CzKwSnp0.js";import"./Button-Cj99tk5U-Cn0Wrqkw.js";import"./_rollupPluginBabelHelpers-DuYa1R0C-CyXpXONY.js";import"./index-DUCcPMOf.js";import"./index-DgnBCu_c.js";import"./index-D_kTjGoR.js";const u={title:"Components/Writer/ColorSchemeButton",component:o,parameters:{docs:{description:{component:"ColorSchemeButton component provides a toggle button for switching between light and dark color schemes. It automatically detects the current scheme and updates the UI accordingly."}}},argTypes:{}},t={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(o,{})})},r={render:()=>e.jsx("div",{style:{padding:"20px",background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px"},children:e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"16px"},children:[e.jsx("div",{style:{fontWeight:"bold"},children:"Documentation"}),e.jsxs("div",{style:{display:"flex",gap:"12px",alignItems:"center"},children:[e.jsx("span",{style:{fontSize:"14px"},children:"Theme:"}),e.jsx(o,{})]})]})}),parameters:{docs:{description:{story:"This example shows how the ColorSchemeButton is typically used in navigation bars or headers."}}}},n={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Header Button"}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"12px",background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"4px"},children:[e.jsx("span",{children:"Site Header"}),e.jsx(o,{})]})]}),e.jsxs("div",{style:{marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Sidebar Button"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",padding:"12px",background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"4px",width:"200px"},children:[e.jsx("span",{children:"Navigation"}),e.jsx("span",{children:"Getting Started"}),e.jsx("span",{children:"API Reference"}),e.jsx("div",{style:{marginTop:"auto",display:"flex",justifyContent:"center"},children:e.jsx(o,{})})]})]}),e.jsxs("div",{style:{marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Footer Button"}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"12px",background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"4px"},children:[e.jsx("span",{children:"© 2024 Documentation"}),e.jsx(o,{})]})]})]}),parameters:{docs:{description:{story:"This example shows how ColorSchemeButton can be used in different contexts throughout an application."}}}},i={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px",marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"16px"},children:"Theme Toggle Demo"}),e.jsx("p",{style:{marginBottom:"16px",color:"var(--xyd-text-color)"},children:"Click the button below to toggle between light and dark themes. The button will automatically show the appropriate icon for the current theme."}),e.jsx("div",{style:{display:"flex",justifyContent:"center"},children:e.jsx(o,{})})]}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:[e.jsx("h4",{style:{marginBottom:"12px"},children:"Current Theme Information"}),e.jsxs("ul",{style:{color:"var(--xyd-text-color)"},children:[e.jsx("li",{children:"The button automatically detects the current color scheme"}),e.jsx("li",{children:"Shows a sun icon for light mode"}),e.jsx("li",{children:"Shows a moon icon for dark mode"}),e.jsx("li",{children:"Persists the selection in localStorage"}),e.jsx("li",{children:'Respects system preferences when set to "os"'})]})]})]}),parameters:{docs:{description:{story:"This interactive example demonstrates the ColorSchemeButton functionality and behavior."}}}},d={render:()=>e.jsxs("div",{style:{padding:"20px",maxWidth:"800px"},children:[e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Documentation Site Header"}),e.jsx("p",{children:"Typical usage in a documentation site header with navigation and theme toggle."}),e.jsx("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"16px"},children:e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"24px"},children:[e.jsx("span",{style:{fontWeight:"bold",fontSize:"18px"},children:"Docs"}),e.jsxs("nav",{style:{display:"flex",gap:"16px"},children:[e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)",textDecoration:"none"},children:"Guide"}),e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)",textDecoration:"none"},children:"API"}),e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)",textDecoration:"none"},children:"Examples"})]})]}),e.jsx(o,{})]})})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Application Settings"}),e.jsx("p",{children:"Theme toggle in an application settings panel."}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:[e.jsx("h3",{style:{marginBottom:"16px"},children:"Appearance"}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"12px",background:"var(--xyd-bgcolor-secondary)",borderRadius:"4px",marginBottom:"12px"},children:[e.jsxs("div",{children:[e.jsx("div",{style:{fontWeight:"bold",marginBottom:"4px"},children:"Theme"}),e.jsx("div",{style:{fontSize:"14px",color:"var(--xyd-text-color-secondary)"},children:"Choose your preferred color scheme"})]}),e.jsx(o,{})]})]})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Sidebar Navigation"}),e.jsx("p",{children:"Theme toggle in a sidebar navigation component."}),e.jsx("div",{style:{display:"flex",gap:"20px"},children:e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"16px",width:"250px",display:"flex",flexDirection:"column",gap:"12px"},children:[e.jsx("div",{style:{fontWeight:"bold",marginBottom:"8px"},children:"Navigation"}),e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)",textDecoration:"none"},children:"Dashboard"}),e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)",textDecoration:"none"},children:"Projects"}),e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)",textDecoration:"none"},children:"Settings"}),e.jsx("div",{style:{marginTop:"auto",display:"flex",justifyContent:"center"},children:e.jsx(o,{})})]})})]})]}),parameters:{docs:{description:{story:"This example shows practical use cases for the ColorSchemeButton in real applications."}}}},s={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px",marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"16px",color:"var(--xyd-text-color)"},children:"Theme Toggle"}),e.jsx("p",{style:{marginBottom:"16px",color:"var(--xyd-text-color)"},children:"This button automatically adapts to the current theme and provides a way to switch between light and dark modes."}),e.jsx("div",{style:{display:"flex",justifyContent:"center"},children:e.jsx(o,{})})]}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:[e.jsx("h4",{style:{marginBottom:"12px",color:"var(--xyd-text-color)"},children:"Features"}),e.jsxs("ul",{style:{color:"var(--xyd-text-color)"},children:[e.jsx("li",{children:"Automatic theme detection"}),e.jsx("li",{children:"System preference support"}),e.jsx("li",{children:"Local storage persistence"}),e.jsx("li",{children:"Accessible button design"}),e.jsx("li",{children:"Consistent with design system"})]})]})]}),parameters:{docs:{description:{story:"This example demonstrates the ColorSchemeButton features and capabilities."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <ColorSchemeButton />
+        </div>
+}`,...t.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px',
+    background: 'var(--xyd-bgcolor)',
+    border: '1px solid var(--xyd-border-color)',
+    borderRadius: '8px'
+  }}>
+            <div style={{
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: '16px'
+    }}>
+                <div style={{
+        fontWeight: 'bold'
+      }}>Documentation</div>
+                <div style={{
+        display: 'flex',
+        gap: '12px',
+        alignItems: 'center'
+      }}>
+                    <span style={{
+          fontSize: '14px'
+        }}>Theme:</span>
+                    <ColorSchemeButton />
+                </div>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows how the ColorSchemeButton is typically used in navigation bars or headers.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      marginBottom: '20px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Header Button</h3>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '12px',
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '4px'
+      }}>
+                    <span>Site Header</span>
+                    <ColorSchemeButton />
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '20px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Sidebar Button</h3>
+                <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        padding: '12px',
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '4px',
+        width: '200px'
+      }}>
+                    <span>Navigation</span>
+                    <span>Getting Started</span>
+                    <span>API Reference</span>
+                    <div style={{
+          marginTop: 'auto',
+          display: 'flex',
+          justifyContent: 'center'
+        }}>
+                        <ColorSchemeButton />
+                    </div>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '20px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Footer Button</h3>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '12px',
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '4px'
+      }}>
+                    <span>© 2024 Documentation</span>
+                    <ColorSchemeButton />
+                </div>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows how ColorSchemeButton can be used in different contexts throughout an application.'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      background: 'var(--xyd-bgcolor)',
+      border: '1px solid var(--xyd-border-color)',
+      borderRadius: '8px',
+      padding: '20px',
+      marginBottom: '20px'
+    }}>
+                <h3 style={{
+        marginBottom: '16px'
+      }}>Theme Toggle Demo</h3>
+                <p style={{
+        marginBottom: '16px',
+        color: 'var(--xyd-text-color)'
+      }}>
+                    Click the button below to toggle between light and dark themes. 
+                    The button will automatically show the appropriate icon for the current theme.
+                </p>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'center'
+      }}>
+                    <ColorSchemeButton />
+                </div>
+            </div>
+
+            <div style={{
+      background: 'var(--xyd-bgcolor)',
+      border: '1px solid var(--xyd-border-color)',
+      borderRadius: '8px',
+      padding: '20px'
+    }}>
+                <h4 style={{
+        marginBottom: '12px'
+      }}>Current Theme Information</h4>
+                <ul style={{
+        color: 'var(--xyd-text-color)'
+      }}>
+                    <li>The button automatically detects the current color scheme</li>
+                    <li>Shows a sun icon for light mode</li>
+                    <li>Shows a moon icon for dark mode</li>
+                    <li>Persists the selection in localStorage</li>
+                    <li>Respects system preferences when set to "os"</li>
+                </ul>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This interactive example demonstrates the ColorSchemeButton functionality and behavior.'
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px',
+    maxWidth: '800px'
+  }}>
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Documentation Site Header</h2>
+                <p>Typical usage in a documentation site header with navigation and theme toggle.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '16px'
+      }}>
+                    <div style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}>
+                        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '24px'
+          }}>
+                            <span style={{
+              fontWeight: 'bold',
+              fontSize: '18px'
+            }}>Docs</span>
+                            <nav style={{
+              display: 'flex',
+              gap: '16px'
+            }}>
+                                <a href="#" style={{
+                color: 'var(--xyd-text-color)',
+                textDecoration: 'none'
+              }}>Guide</a>
+                                <a href="#" style={{
+                color: 'var(--xyd-text-color)',
+                textDecoration: 'none'
+              }}>API</a>
+                                <a href="#" style={{
+                color: 'var(--xyd-text-color)',
+                textDecoration: 'none'
+              }}>Examples</a>
+                            </nav>
+                        </div>
+                        <ColorSchemeButton />
+                    </div>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Application Settings</h2>
+                <p>Theme toggle in an application settings panel.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <h3 style={{
+          marginBottom: '16px'
+        }}>Appearance</h3>
+                    <div style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: '12px',
+          background: 'var(--xyd-bgcolor-secondary)',
+          borderRadius: '4px',
+          marginBottom: '12px'
+        }}>
+                        <div>
+                            <div style={{
+              fontWeight: 'bold',
+              marginBottom: '4px'
+            }}>Theme</div>
+                            <div style={{
+              fontSize: '14px',
+              color: 'var(--xyd-text-color-secondary)'
+            }}>
+                                Choose your preferred color scheme
+                            </div>
+                        </div>
+                        <ColorSchemeButton />
+                    </div>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Sidebar Navigation</h2>
+                <p>Theme toggle in a sidebar navigation component.</p>
+                <div style={{
+        display: 'flex',
+        gap: '20px'
+      }}>
+                    <div style={{
+          background: 'var(--xyd-bgcolor)',
+          border: '1px solid var(--xyd-border-color)',
+          borderRadius: '8px',
+          padding: '16px',
+          width: '250px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px'
+        }}>
+                        <div style={{
+            fontWeight: 'bold',
+            marginBottom: '8px'
+          }}>Navigation</div>
+                        <a href="#" style={{
+            color: 'var(--xyd-text-color)',
+            textDecoration: 'none'
+          }}>Dashboard</a>
+                        <a href="#" style={{
+            color: 'var(--xyd-text-color)',
+            textDecoration: 'none'
+          }}>Projects</a>
+                        <a href="#" style={{
+            color: 'var(--xyd-text-color)',
+            textDecoration: 'none'
+          }}>Settings</a>
+                        <div style={{
+            marginTop: 'auto',
+            display: 'flex',
+            justifyContent: 'center'
+          }}>
+                            <ColorSchemeButton />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows practical use cases for the ColorSchemeButton in real applications.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      background: 'var(--xyd-bgcolor)',
+      border: '1px solid var(--xyd-border-color)',
+      borderRadius: '8px',
+      padding: '20px',
+      marginBottom: '20px'
+    }}>
+                <h3 style={{
+        marginBottom: '16px',
+        color: 'var(--xyd-text-color)'
+      }}>Theme Toggle</h3>
+                <p style={{
+        marginBottom: '16px',
+        color: 'var(--xyd-text-color)'
+      }}>
+                    This button automatically adapts to the current theme and provides a way to switch between light and dark modes.
+                </p>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'center'
+      }}>
+                    <ColorSchemeButton />
+                </div>
+            </div>
+
+            <div style={{
+      background: 'var(--xyd-bgcolor)',
+      border: '1px solid var(--xyd-border-color)',
+      borderRadius: '8px',
+      padding: '20px'
+    }}>
+                <h4 style={{
+        marginBottom: '12px',
+        color: 'var(--xyd-text-color)'
+      }}>Features</h4>
+                <ul style={{
+        color: 'var(--xyd-text-color)'
+      }}>
+                    <li>Automatic theme detection</li>
+                    <li>System preference support</li>
+                    <li>Local storage persistence</li>
+                    <li>Accessible button design</li>
+                    <li>Consistent with design system</li>
+                </ul>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example demonstrates the ColorSchemeButton features and capabilities.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};const b=["Default","InNavigation","MultipleButtons","Interactive","RealWorldExamples","ThemeDemonstration"];export{t as Default,r as InNavigation,i as Interactive,n as MultipleButtons,d as RealWorldExamples,s as ThemeDemonstration,b as __namedExportsOrder,u as default};