@xyd-js/storybook 0.0.1-build.178 → 0.0.1-build.180

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

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