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

package/storybook-static/assets/Button.stories-DUfQIyn7.js

@@ -1,472 +0,0 @@
-import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{I as i,b as n,a as s}from"./Icons-CjNNbMNR.js";import{a as t}from"./Button-Cj99tk5U-Cn0Wrqkw.js";import"./Text-BAwif7rv-BYvLGGQV.js";import"./index-CzKwSnp0.js";import"./_rollupPluginBabelHelpers-DuYa1R0C-CyXpXONY.js";import"./index-DUCcPMOf.js";import"./index-DgnBCu_c.js";import"./index-D_kTjGoR.js";import"./Update-DflVXGGQ-qVV03FlC.js";const T={title:"Components/Writer/Button",component:t,parameters:{docs:{description:{component:"Button component provides interactive elements with various styles, sizes, and states. Supports icons, links, and different visual themes."}}},argTypes:{children:{description:"The content to display inside the button",control:"text"},kind:{description:"The visual style variant of the button",control:{type:"select"},options:["primary","secondary","tertiary"]},theme:{description:"The theme variant of the button",control:{type:"select"},options:["ghost"]},size:{description:"The size of the button",control:{type:"select"},options:["xs","sm","md","lg"]},className:{description:"Additional CSS class name",control:"text"},onClick:{description:"Click event handler",control:!1},disabled:{description:"Whether the button is disabled",control:"boolean"},icon:{description:"Icon to display in the button",control:!1},iconPosition:{description:"Position of the icon relative to the text",control:{type:"select"},options:["left","right"]},href:{description:"URL to navigate to (renders as anchor tag)",control:"text"}}},r={args:{children:"Button",kind:"primary",size:"md"},render:g=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(t,{...g})})},o={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{kind:"primary",children:"Primary"}),e.jsx(t,{kind:"secondary",children:"Secondary"}),e.jsx(t,{kind:"tertiary",children:"Tertiary"})]})})},a={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{size:"xs",children:"Extra Small"}),e.jsx(t,{size:"sm",children:"Small"}),e.jsx(t,{size:"md",children:"Medium"}),e.jsx(t,{size:"lg",children:"Large"})]})})},d={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{icon:e.jsx(i,{}),iconPosition:"left",children:"Play Video"}),e.jsx(t,{icon:e.jsx(n,{}),iconPosition:"right",children:"View Analytics"}),e.jsx(t,{icon:e.jsx(s,{}),iconPosition:"left",children:"Funnel Analysis"})]})})},l={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{icon:e.jsx(i,{})}),e.jsx(t,{icon:e.jsx(n,{})}),e.jsx(t,{icon:e.jsx(s,{})})]})})},c={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{theme:"ghost",icon:e.jsx(i,{})}),e.jsx(t,{theme:"ghost",icon:e.jsx(n,{})}),e.jsx(t,{theme:"ghost",icon:e.jsx(s,{})})]})})},p={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{disabled:!0,children:"Disabled Primary"}),e.jsx(t,{kind:"secondary",disabled:!0,children:"Disabled Secondary"}),e.jsx(t,{kind:"tertiary",disabled:!0,children:"Disabled Tertiary"}),e.jsx(t,{disabled:!0,icon:e.jsx(i,{}),children:"Disabled with Icon"})]})})},x={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{href:"/docs/getting-started",children:"Get Started"}),e.jsx(t,{href:"https://github.com",kind:"secondary",children:"View on GitHub"}),e.jsx(t,{href:"/api",kind:"tertiary",icon:e.jsx(n,{}),children:"API Reference"})]})})},m={args:{children:"Click Me!",kind:"primary",size:"md"},render:g=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsx(t,{...g,onClick:()=>alert("Button clicked!")}),e.jsx("p",{style:{marginTop:"10px",fontSize:"14px",color:"#666"},children:"Try clicking the button above to see the interactive behavior."})]}),parameters:{docs:{description:{story:"This button demonstrates interactive behavior. Click it to see the onClick handler in action."}}}},y={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Primary Buttons"}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{size:"xs",children:"XS Primary"}),e.jsx(t,{size:"sm",children:"Small Primary"}),e.jsx(t,{size:"md",children:"Medium Primary"}),e.jsx(t,{size:"lg",children:"Large Primary"})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Secondary Buttons"}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{kind:"secondary",size:"xs",children:"XS Secondary"}),e.jsx(t,{kind:"secondary",size:"sm",children:"Small Secondary"}),e.jsx(t,{kind:"secondary",size:"md",children:"Medium Secondary"}),e.jsx(t,{kind:"secondary",size:"lg",children:"Large Secondary"})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Tertiary Buttons"}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{kind:"tertiary",size:"xs",children:"XS Tertiary"}),e.jsx(t,{kind:"tertiary",size:"sm",children:"Small Tertiary"}),e.jsx(t,{kind:"tertiary",size:"md",children:"Medium Tertiary"}),e.jsx(t,{kind:"tertiary",size:"lg",children:"Large Tertiary"})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Buttons with Icons"}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{icon:e.jsx(i,{}),iconPosition:"left",children:"Left Icon"}),e.jsx(t,{icon:e.jsx(n,{}),iconPosition:"right",children:"Right Icon"}),e.jsx(t,{icon:e.jsx(s,{})})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Ghost Theme"}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{theme:"ghost",icon:e.jsx(i,{})}),e.jsx(t,{theme:"ghost",icon:e.jsx(n,{})}),e.jsx(t,{theme:"ghost",icon:e.jsx(s,{})})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Disabled Buttons"}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{disabled:!0,children:"Disabled Primary"}),e.jsx(t,{kind:"secondary",disabled:!0,children:"Disabled Secondary"}),e.jsx(t,{kind:"tertiary",disabled:!0,children:"Disabled Tertiary"})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Link Buttons"}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{href:"/docs",children:"Documentation"}),e.jsx(t,{href:"https://github.com",kind:"secondary",children:"GitHub"}),e.jsx(t,{href:"/api",kind:"tertiary",children:"API"})]})]})]})},h={render:()=>e.jsxs("div",{style:{padding:"20px",maxWidth:"800px"},children:[e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h2",{children:"Documentation Actions"}),e.jsx("p",{children:"Common button patterns used in documentation sites."}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center",marginTop:"16px"},children:[e.jsx(t,{href:"/docs/getting-started",icon:e.jsx(i,{}),children:"Get Started"}),e.jsx(t,{href:"https://github.com",kind:"secondary",children:"View on GitHub"}),e.jsx(t,{href:"/api",kind:"tertiary",children:"API Reference"})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h2",{children:"Form Actions"}),e.jsx("p",{children:"Buttons commonly used in forms and interactive elements."}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center",marginTop:"16px"},children:[e.jsx(t,{icon:e.jsx(n,{}),children:"Save Changes"}),e.jsx(t,{kind:"secondary",children:"Cancel"}),e.jsx(t,{kind:"tertiary",children:"Reset"})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h2",{children:"Navigation Actions"}),e.jsx("p",{children:"Buttons used for navigation and user actions."}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center",marginTop:"16px"},children:[e.jsx(t,{href:"/next-page",children:"Continue"}),e.jsx(t,{href:"/previous-page",kind:"secondary",children:"Back"}),e.jsx(t,{theme:"ghost",icon:e.jsx(s,{})})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h2",{children:"Status Actions"}),e.jsx("p",{children:"Buttons that reflect different states and actions."}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center",marginTop:"16px"},children:[e.jsx(t,{children:"Active Action"}),e.jsx(t,{disabled:!0,children:"Disabled Action"}),e.jsx(t,{kind:"secondary",icon:e.jsx(i,{}),children:"Loading..."})]})]})]}),parameters:{docs:{description:{story:"This example shows how buttons are typically used in real-world applications, demonstrating common patterns and use cases."}}}},u={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Primary Buttons"}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{size:"xs",children:"Extra Small"}),e.jsx(t,{size:"sm",children:"Small"}),e.jsx(t,{size:"md",children:"Medium"}),e.jsx(t,{size:"lg",children:"Large"})]})]}),e.jsxs("div",{style:{marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"With Icons"}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{size:"xs",icon:e.jsx(i,{}),children:"XS"}),e.jsx(t,{size:"sm",icon:e.jsx(i,{}),children:"Small"}),e.jsx(t,{size:"md",icon:e.jsx(i,{}),children:"Medium"}),e.jsx(t,{size:"lg",icon:e.jsx(i,{}),children:"Large"})]})]}),e.jsxs("div",{style:{marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Icon Only"}),e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t,{size:"xs",icon:e.jsx(i,{})}),e.jsx(t,{size:"sm",icon:e.jsx(i,{})}),e.jsx(t,{size:"md",icon:e.jsx(i,{})}),e.jsx(t,{size:"lg",icon:e.jsx(i,{})})]})]})]})};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Button',
-    kind: 'primary',
-    size: 'md'
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Button {...args} />
-        </div>
-}`,...r.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px'
-  }}>
-            <div style={{
-      display: 'flex',
-      gap: '12px',
-      flexWrap: 'wrap',
-      alignItems: 'center'
-    }}>
-                <Button kind="primary">Primary</Button>
-                <Button kind="secondary">Secondary</Button>
-                <Button kind="tertiary">Tertiary</Button>
-            </div>
-        </div>
-}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px'
-  }}>
-            <div style={{
-      display: 'flex',
-      gap: '12px',
-      flexWrap: 'wrap',
-      alignItems: 'center'
-    }}>
-                <Button size="xs">Extra Small</Button>
-                <Button size="sm">Small</Button>
-                <Button size="md">Medium</Button>
-                <Button size="lg">Large</Button>
-            </div>
-        </div>
-}`,...a.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px'
-  }}>
-            <div style={{
-      display: 'flex',
-      gap: '12px',
-      flexWrap: 'wrap',
-      alignItems: 'center'
-    }}>
-                <Button icon={<IconSessionReplay />} iconPosition="left">
-                    Play Video
-                </Button>
-                <Button icon={<IconMetrics />} iconPosition="right">
-                    View Analytics
-                </Button>
-                <Button icon={<IconFunnels />} iconPosition="left">
-                    Funnel Analysis
-                </Button>
-            </div>
-        </div>
-}`,...d.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px'
-  }}>
-            <div style={{
-      display: 'flex',
-      gap: '12px',
-      flexWrap: 'wrap',
-      alignItems: 'center'
-    }}>
-                <Button icon={<IconSessionReplay />} />
-                <Button icon={<IconMetrics />} />
-                <Button icon={<IconFunnels />} />
-            </div>
-        </div>
-}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px'
-  }}>
-            <div style={{
-      display: 'flex',
-      gap: '12px',
-      flexWrap: 'wrap',
-      alignItems: 'center'
-    }}>
-                <Button theme="ghost" icon={<IconSessionReplay />} />
-                <Button theme="ghost" icon={<IconMetrics />} />
-                <Button theme="ghost" icon={<IconFunnels />} />
-            </div>
-        </div>
-}`,...c.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px'
-  }}>
-            <div style={{
-      display: 'flex',
-      gap: '12px',
-      flexWrap: 'wrap',
-      alignItems: 'center'
-    }}>
-                <Button disabled>Disabled Primary</Button>
-                <Button kind="secondary" disabled>Disabled Secondary</Button>
-                <Button kind="tertiary" disabled>Disabled Tertiary</Button>
-                <Button disabled icon={<IconSessionReplay />}>
-                    Disabled with Icon
-                </Button>
-            </div>
-        </div>
-}`,...p.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px'
-  }}>
-            <div style={{
-      display: 'flex',
-      gap: '12px',
-      flexWrap: 'wrap',
-      alignItems: 'center'
-    }}>
-                <Button href="/docs/getting-started">
-                    Get Started
-                </Button>
-                <Button href="https://github.com" kind="secondary">
-                    View on GitHub
-                </Button>
-                <Button href="/api" kind="tertiary" icon={<IconMetrics />}>
-                    API Reference
-                </Button>
-            </div>
-        </div>
-}`,...x.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Click Me!',
-    kind: 'primary',
-    size: 'md'
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Button {...args} onClick={() => alert('Button clicked!')} />
-            <p style={{
-      marginTop: '10px',
-      fontSize: '14px',
-      color: '#666'
-    }}>
-                Try clicking the button above to see the interactive behavior.
-            </p>
-        </div>,
-  parameters: {
-    docs: {
-      description: {
-        story: 'This button demonstrates interactive behavior. Click it to see the onClick handler in action.'
-      }
-    }
-  }
-}`,...m.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px'
-  }}>
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Primary Buttons</h3>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      }}>
-                    <Button size="xs">XS Primary</Button>
-                    <Button size="sm">Small Primary</Button>
-                    <Button size="md">Medium Primary</Button>
-                    <Button size="lg">Large Primary</Button>
-                </div>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Secondary Buttons</h3>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      }}>
-                    <Button kind="secondary" size="xs">XS Secondary</Button>
-                    <Button kind="secondary" size="sm">Small Secondary</Button>
-                    <Button kind="secondary" size="md">Medium Secondary</Button>
-                    <Button kind="secondary" size="lg">Large Secondary</Button>
-                </div>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Tertiary Buttons</h3>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      }}>
-                    <Button kind="tertiary" size="xs">XS Tertiary</Button>
-                    <Button kind="tertiary" size="sm">Small Tertiary</Button>
-                    <Button kind="tertiary" size="md">Medium Tertiary</Button>
-                    <Button kind="tertiary" size="lg">Large Tertiary</Button>
-                </div>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Buttons with Icons</h3>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      }}>
-                    <Button icon={<IconSessionReplay />} iconPosition="left">
-                        Left Icon
-                    </Button>
-                    <Button icon={<IconMetrics />} iconPosition="right">
-                        Right Icon
-                    </Button>
-                    <Button icon={<IconFunnels />} />
-                </div>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Ghost Theme</h3>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      }}>
-                    <Button theme="ghost" icon={<IconSessionReplay />} />
-                    <Button theme="ghost" icon={<IconMetrics />} />
-                    <Button theme="ghost" icon={<IconFunnels />} />
-                </div>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Disabled Buttons</h3>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      }}>
-                    <Button disabled>Disabled Primary</Button>
-                    <Button kind="secondary" disabled>Disabled Secondary</Button>
-                    <Button kind="tertiary" disabled>Disabled Tertiary</Button>
-                </div>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Link Buttons</h3>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      }}>
-                    <Button href="/docs">Documentation</Button>
-                    <Button href="https://github.com" kind="secondary">GitHub</Button>
-                    <Button href="/api" kind="tertiary">API</Button>
-                </div>
-            </div>
-        </div>
-}`,...y.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px',
-    maxWidth: '800px'
-  }}>
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h2>Documentation Actions</h2>
-                <p>Common button patterns used in documentation sites.</p>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        marginTop: '16px'
-      }}>
-                    <Button href="/docs/getting-started" icon={<IconSessionReplay />}>
-                        Get Started
-                    </Button>
-                    <Button href="https://github.com" kind="secondary">
-                        View on GitHub
-                    </Button>
-                    <Button href="/api" kind="tertiary">
-                        API Reference
-                    </Button>
-                </div>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h2>Form Actions</h2>
-                <p>Buttons commonly used in forms and interactive elements.</p>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        marginTop: '16px'
-      }}>
-                    <Button icon={<IconMetrics />}>
-                        Save Changes
-                    </Button>
-                    <Button kind="secondary">
-                        Cancel
-                    </Button>
-                    <Button kind="tertiary">
-                        Reset
-                    </Button>
-                </div>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h2>Navigation Actions</h2>
-                <p>Buttons used for navigation and user actions.</p>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        marginTop: '16px'
-      }}>
-                    <Button href="/next-page">
-                        Continue
-                    </Button>
-                    <Button href="/previous-page" kind="secondary">
-                        Back
-                    </Button>
-                    <Button theme="ghost" icon={<IconFunnels />} />
-                </div>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h2>Status Actions</h2>
-                <p>Buttons that reflect different states and actions.</p>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        marginTop: '16px'
-      }}>
-                    <Button>
-                        Active Action
-                    </Button>
-                    <Button disabled>
-                        Disabled Action
-                    </Button>
-                    <Button kind="secondary" icon={<IconSessionReplay />}>
-                        Loading...
-                    </Button>
-                </div>
-            </div>
-        </div>,
-  parameters: {
-    docs: {
-      description: {
-        story: 'This example shows how buttons are typically used in real-world applications, demonstrating common patterns and use cases.'
-      }
-    }
-  }
-}`,...h.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px'
-  }}>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Primary Buttons</h3>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      }}>
-                    <Button size="xs">Extra Small</Button>
-                    <Button size="sm">Small</Button>
-                    <Button size="md">Medium</Button>
-                    <Button size="lg">Large</Button>
-                </div>
-            </div>
-
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>With Icons</h3>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      }}>
-                    <Button size="xs" icon={<IconSessionReplay />}>XS</Button>
-                    <Button size="sm" icon={<IconSessionReplay />}>Small</Button>
-                    <Button size="md" icon={<IconSessionReplay />}>Medium</Button>
-                    <Button size="lg" icon={<IconSessionReplay />}>Large</Button>
-                </div>
-            </div>
-
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Icon Only</h3>
-                <div style={{
-        display: 'flex',
-        gap: '12px',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      }}>
-                    <Button size="xs" icon={<IconSessionReplay />} />
-                    <Button size="sm" icon={<IconSessionReplay />} />
-                    <Button size="md" icon={<IconSessionReplay />} />
-                    <Button size="lg" icon={<IconSessionReplay />} />
-                </div>
-            </div>
-        </div>
-}`,...u.parameters?.docs?.source}}};const P=["Default","AllKinds","AllSizes","WithIcons","IconOnly","GhostTheme","Disabled","LinkButtons","Interactive","AllCombinations","RealWorldExamples","SizeComparison"];export{y as AllCombinations,o as AllKinds,a as AllSizes,r as Default,p as Disabled,c as GhostTheme,l as IconOnly,m as Interactive,x as LinkButtons,h as RealWorldExamples,u as SizeComparison,d as WithIcons,P as __namedExportsOrder,T as default};

package/storybook-static/assets/Callout.stories-CIQWommc.js

@@ -1,134 +0,0 @@
-import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{p as i}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 j={title:"Components/Writer/Callout",component:i,parameters:{docs:{description:{component:"Callout component is used to display important information, notices, or warnings in a visually distinct way."}}},argTypes:{children:{description:"The content to display inside the callout",control:"text"},kind:{description:"The visual style variant of the callout",control:{type:"select"},options:["note","tip","check","warning","danger"]},className:{description:"Additional CSS classes to apply",control:"text"}}},n={args:{children:"This is a default callout with informational content. It provides important context or notes to the user."},render:t=>e.jsx("div",{style:{width:700},children:e.jsx(i,{...t})})},r={args:{children:"This is a note callout. Use this for general information, context, or helpful details that users should be aware of.",kind:"note"},render:t=>e.jsx("div",{style:{width:700},children:e.jsx(i,{...t})})},s={args:{children:"This is a tip callout. Use this for helpful suggestions, best practices, or pro tips that can improve the user experience.",kind:"tip"},render:t=>e.jsx("div",{style:{width:700},children:e.jsx(i,{...t})})},o={args:{children:"This is a check callout. Use this for confirmation messages, successful actions, or positive feedback.",kind:"check"},render:t=>e.jsx("div",{style:{width:700},children:e.jsx(i,{...t})})},a={args:{children:"This is a warning callout. Use this for important notices, potential issues, or actions that require attention.",kind:"warning"},render:t=>e.jsx("div",{style:{width:700},children:e.jsx(i,{...t})})},l={args:{children:"This is a danger callout. Use this for critical errors, destructive actions, or situations that require immediate attention.",kind:"danger"},render:t=>e.jsx("div",{style:{width:700},children:e.jsx(i,{...t})})},c={render:()=>e.jsxs("div",{style:{width:700},children:[e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{children:"Default callout with informational content"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{kind:"note",children:"Note callout for general information and context"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{kind:"tip",children:"Tip callout for helpful suggestions and best practices"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{kind:"check",children:"Check callout for confirmation and success messages"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{kind:"warning",children:"Warning callout for important notices and potential issues"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{kind:"danger",children:"Danger callout for critical errors and destructive actions"})})]})},d={args:{children:"This is a callout with longer content that demonstrates how the component handles multi-line text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",kind:"note"},render:t=>e.jsx("div",{style:{width:700},children:e.jsx(i,{...t})})},u={args:{children:e.jsxs(e.Fragment,{children:["This callout contains ",e.jsx("strong",{children:"bold text"}),", ",e.jsx("em",{children:"italic text"}),", and a ",e.jsx("a",{href:"#",style:{color:"inherit",textDecoration:"underline"},children:"link"}),".",e.jsx("br",{}),"It also demonstrates how the component handles HTML elements and line breaks."]}),kind:"tip"},render:t=>e.jsx("div",{style:{width:700},children:e.jsx(i,{...t})})};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'This is a default callout with informational content. It provides important context or notes to the user.'
-  },
-  render: args => <div style={{
-    width: 700
-  }}>
-            <Callout {...args} />
-        </div>
-}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'This is a note callout. Use this for general information, context, or helpful details that users should be aware of.',
-    kind: 'note'
-  },
-  render: args => <div style={{
-    width: 700
-  }}>
-            <Callout {...args} />
-        </div>
-}`,...r.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'This is a tip callout. Use this for helpful suggestions, best practices, or pro tips that can improve the user experience.',
-    kind: 'tip'
-  },
-  render: args => <div style={{
-    width: 700
-  }}>
-            <Callout {...args} />
-        </div>
-}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'This is a check callout. Use this for confirmation messages, successful actions, or positive feedback.',
-    kind: 'check'
-  },
-  render: args => <div style={{
-    width: 700
-  }}>
-            <Callout {...args} />
-        </div>
-}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'This is a warning callout. Use this for important notices, potential issues, or actions that require attention.',
-    kind: 'warning'
-  },
-  render: args => <div style={{
-    width: 700
-  }}>
-            <Callout {...args} />
-        </div>
-}`,...a.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'This is a danger callout. Use this for critical errors, destructive actions, or situations that require immediate attention.',
-    kind: 'danger'
-  },
-  render: args => <div style={{
-    width: 700
-  }}>
-            <Callout {...args} />
-        </div>
-}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    width: 700
-  }}>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Callout>
-                    Default callout with informational content
-                </Callout>
-            </div>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Callout kind="note">
-                    Note callout for general information and context
-                </Callout>
-            </div>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Callout kind="tip">
-                    Tip callout for helpful suggestions and best practices
-                </Callout>
-            </div>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Callout kind="check">
-                    Check callout for confirmation and success messages
-                </Callout>
-            </div>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Callout kind="warning">
-                    Warning callout for important notices and potential issues
-                </Callout>
-            </div>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Callout kind="danger">
-                    Danger callout for critical errors and destructive actions
-                </Callout>
-            </div>
-        </div>
-}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'This is a callout with longer content that demonstrates how the component handles multi-line text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-    kind: 'note'
-  },
-  render: args => <div style={{
-    width: 700
-  }}>
-            <Callout {...args} />
-        </div>
-}`,...d.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: <>
-                This callout contains <strong>bold text</strong>, <em>italic text</em>, and a <a href="#" style={{
-        color: 'inherit',
-        textDecoration: 'underline'
-      }}>link</a>. 
-                <br />
-                It also demonstrates how the component handles HTML elements and line breaks.
-            </>,
-    kind: 'tip'
-  },
-  render: args => <div style={{
-    width: 700
-  }}>
-            <Callout {...args} />
-        </div>
-}`,...u.parameters?.docs?.source}}};const C=["Default","Note","Tip","Check","Warning","Danger","AllVariants","WithLongContent","WithHTMLContent"];export{c as AllVariants,o as Check,l as Danger,n as Default,r as Note,s as Tip,a as Warning,u as WithHTMLContent,d as WithLongContent,C as __namedExportsOrder,j as default};