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

package/storybook-static/assets/Heading.stories-C9rBwnlZ.js

@@ -1,337 +0,0 @@
-import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{k as i}from"./Text-BAwif7rv-BYvLGGQV.js";import"./Update-DflVXGGQ-qVV03FlC.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 A={title:"Components/Writer/Heading",component:i,parameters:{docs:{description:{component:"Heading component renders headings with various sizes (h1-h6) and supports additional features like labels, subtitles, and anchor links."}}},argTypes:{children:{description:"The content to display inside the heading",control:"text"},size:{description:"The size of the heading (1-6, corresponding to h1-h6)",control:{type:"select"},options:[1,2,3,4,5,6]},as:{description:"Optional HTML element to render as (div or span)",control:{type:"select"},options:["div","span"]},id:{description:"Optional ID for the heading element",control:"text"},kind:{description:"Optional visual style variant",control:{type:"select"},options:["muted"]},onClick:{description:"Optional click handler",control:!1},className:{description:"Optional additional CSS class name",control:"text"},active:{description:"Optional active state",control:"boolean"},label:{description:"Optional label for the heading",control:"text"},subtitle:{description:"Optional subtitle for the heading",control:"text"},noanchor:{description:"Optional to hide the anchor icon",control:"boolean"}}},t={args:{children:"Heading 1",size:1},render:n=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...n})})},a={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{size:1,id:"heading-1",children:"Heading 1 - Main Title"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{size:2,id:"heading-2",children:"Heading 2 - Section Title"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{size:3,id:"heading-3",children:"Heading 3 - Subsection Title"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{size:4,id:"heading-4",children:"Heading 4 - Minor Section"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{size:5,id:"heading-5",children:"Heading 5 - Small Section"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(i,{size:6,id:"heading-6",children:"Heading 6 - Smallest Heading"})})]})},s={args:{children:"Muted Heading",size:3,kind:"muted"},render:n=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...n})})},d={args:{children:"Heading with Label",size:2,label:"NEW"},render:n=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...n})})},r={args:{children:"Main Heading",size:1,subtitle:"This is a subtitle that provides additional context for the main heading."},render:n=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...n})})},o={args:{children:"Complete Heading",size:2,label:"BETA",subtitle:"This heading demonstrates both a label and subtitle working together."},render:n=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...n})})},l={args:{children:"Heading without Anchor",size:3,noanchor:!0},render:n=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...n})})},c={args:{children:"Heading as Div",size:2,as:"div"},render:n=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...n})})},p={args:{children:"Heading as Span",size:3,as:"span"},render:n=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...n})})},g={args:{children:"Active Heading",size:2,id:"active-heading",active:!0},render:n=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...n})}),parameters:{docs:{description:{story:"This heading is in an active state, typically used when the heading corresponds to the current section in navigation."}}}},h={args:{children:"Clickable Heading",size:2,id:"interactive-heading"},render:n=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsx(i,{...n}),e.jsx("p",{style:{marginTop:"10px",fontSize:"14px",color:"#666"},children:"Try clicking on the heading above to see the anchor link behavior."})]}),parameters:{docs:{description:{story:"This heading has an ID and is clickable. Clicking it will update the URL hash and scroll to the heading."}}}},m={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Default Headings"}),e.jsx(i,{size:1,id:"default-h1",children:"Default H1"}),e.jsx(i,{size:2,id:"default-h2",children:"Default H2"}),e.jsx(i,{size:3,id:"default-h3",children:"Default H3"})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Muted Headings"}),e.jsx(i,{size:1,kind:"muted",id:"muted-h1",children:"Muted H1"}),e.jsx(i,{size:2,kind:"muted",id:"muted-h2",children:"Muted H2"}),e.jsx(i,{size:3,kind:"muted",id:"muted-h3",children:"Muted H3"})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Headings with Labels"}),e.jsx(i,{size:2,label:"NEW",id:"label-h2",children:"Heading with Label"}),e.jsx(i,{size:3,label:"BETA",id:"label-h3",children:"Another with Label"})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Headings with Subtitles"}),e.jsx(i,{size:1,subtitle:"This provides additional context",id:"subtitle-h1",children:"Main Heading"}),e.jsx(i,{size:2,subtitle:"Another subtitle example",id:"subtitle-h2",children:"Section Heading"})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Complete Examples"}),e.jsx(i,{size:2,label:"FEATURED",subtitle:"The most comprehensive example",id:"complete-h2",children:"Complete Heading"}),e.jsx(i,{size:3,label:"DEPRECATED",subtitle:"This will be removed soon",id:"complete-h3",children:"Another Complete Example"})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Without Anchors"}),e.jsx(i,{size:2,noanchor:!0,id:"noanchor-h2",children:"No Anchor H2"}),e.jsx(i,{size:3,noanchor:!0,id:"noanchor-h3",children:"No Anchor H3"})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"As Different Elements"}),e.jsx(i,{size:2,as:"div",id:"div-h2",children:"Heading as Div"}),e.jsx(i,{size:3,as:"span",id:"span-h3",children:"Heading as Span"})]})]})},u={render:()=>e.jsxs("div",{style:{padding:"20px",maxWidth:"800px"},children:[e.jsx(i,{size:1,id:"getting-started",children:"Getting Started"}),e.jsx("p",{style:{marginBottom:"20px"},children:"Welcome to our comprehensive guide. This section will help you understand the basics."}),e.jsx(i,{size:2,id:"installation",label:"REQUIRED",children:"Installation"}),e.jsx("p",{style:{marginBottom:"20px"},children:"Follow these steps to install the required dependencies."}),e.jsx(i,{size:3,id:"quick-start",children:"Quick Start"}),e.jsx("p",{style:{marginBottom:"20px"},children:"Get up and running in minutes with our quick start guide."}),e.jsx(i,{size:2,id:"configuration",subtitle:"Advanced setup options",children:"Configuration"}),e.jsx("p",{style:{marginBottom:"20px"},children:"Learn about advanced configuration options and customization."}),e.jsx(i,{size:3,id:"environment-variables",label:"OPTIONAL",children:"Environment Variables"}),e.jsx("p",{style:{marginBottom:"20px"},children:"Configure your environment for optimal performance."}),e.jsx(i,{size:2,id:"next-steps",kind:"muted",children:"Next Steps"}),e.jsx("p",{style:{marginBottom:"20px"},children:"Now that you're set up, explore our advanced features and tutorials."})]}),parameters:{docs:{description:{story:"This example shows how headings are typically used in documentation, with various combinations of labels, subtitles, and different sizes."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Heading 1',
-    size: 1
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Heading {...args} />
-        </div>
-}`,...t.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px'
-  }}>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Heading size={1} id="heading-1">
-                    Heading 1 - Main Title
-                </Heading>
-            </div>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Heading size={2} id="heading-2">
-                    Heading 2 - Section Title
-                </Heading>
-            </div>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Heading size={3} id="heading-3">
-                    Heading 3 - Subsection Title
-                </Heading>
-            </div>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Heading size={4} id="heading-4">
-                    Heading 4 - Minor Section
-                </Heading>
-            </div>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Heading size={5} id="heading-5">
-                    Heading 5 - Small Section
-                </Heading>
-            </div>
-            <div style={{
-      marginBottom: '20px'
-    }}>
-                <Heading size={6} id="heading-6">
-                    Heading 6 - Smallest Heading
-                </Heading>
-            </div>
-        </div>
-}`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Muted Heading',
-    size: 3,
-    kind: 'muted'
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Heading {...args} />
-        </div>
-}`,...s.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Heading with Label',
-    size: 2,
-    label: 'NEW'
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Heading {...args} />
-        </div>
-}`,...d.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Main Heading',
-    size: 1,
-    subtitle: 'This is a subtitle that provides additional context for the main heading.'
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Heading {...args} />
-        </div>
-}`,...r.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Complete Heading',
-    size: 2,
-    label: 'BETA',
-    subtitle: 'This heading demonstrates both a label and subtitle working together.'
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Heading {...args} />
-        </div>
-}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Heading without Anchor',
-    size: 3,
-    noanchor: true
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Heading {...args} />
-        </div>
-}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Heading as Div',
-    size: 2,
-    as: 'div'
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Heading {...args} />
-        </div>
-}`,...c.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Heading as Span',
-    size: 3,
-    as: 'span'
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Heading {...args} />
-        </div>
-}`,...p.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Active Heading',
-    size: 2,
-    id: 'active-heading',
-    active: true
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Heading {...args} />
-        </div>,
-  parameters: {
-    docs: {
-      description: {
-        story: 'This heading is in an active state, typically used when the heading corresponds to the current section in navigation.'
-      }
-    }
-  }
-}`,...g.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
-  args: {
-    children: 'Clickable Heading',
-    size: 2,
-    id: 'interactive-heading'
-  },
-  render: args => <div style={{
-    padding: '20px'
-  }}>
-            <Heading {...args} />
-            <p style={{
-      marginTop: '10px',
-      fontSize: '14px',
-      color: '#666'
-    }}>
-                Try clicking on the heading above to see the anchor link behavior.
-            </p>
-        </div>,
-  parameters: {
-    docs: {
-      description: {
-        story: 'This heading has an ID and is clickable. Clicking it will update the URL hash and scroll to the heading.'
-      }
-    }
-  }
-}`,...h.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px'
-  }}>
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Default Headings</h3>
-                <Heading size={1} id="default-h1">Default H1</Heading>
-                <Heading size={2} id="default-h2">Default H2</Heading>
-                <Heading size={3} id="default-h3">Default H3</Heading>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Muted Headings</h3>
-                <Heading size={1} kind="muted" id="muted-h1">Muted H1</Heading>
-                <Heading size={2} kind="muted" id="muted-h2">Muted H2</Heading>
-                <Heading size={3} kind="muted" id="muted-h3">Muted H3</Heading>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Headings with Labels</h3>
-                <Heading size={2} label="NEW" id="label-h2">Heading with Label</Heading>
-                <Heading size={3} label="BETA" id="label-h3">Another with Label</Heading>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Headings with Subtitles</h3>
-                <Heading size={1} subtitle="This provides additional context" id="subtitle-h1">
-                    Main Heading
-                </Heading>
-                <Heading size={2} subtitle="Another subtitle example" id="subtitle-h2">
-                    Section Heading
-                </Heading>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Complete Examples</h3>
-                <Heading size={2} label="FEATURED" subtitle="The most comprehensive example" id="complete-h2">
-                    Complete Heading
-                </Heading>
-                <Heading size={3} label="DEPRECATED" subtitle="This will be removed soon" id="complete-h3">
-                    Another Complete Example
-                </Heading>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>Without Anchors</h3>
-                <Heading size={2} noanchor id="noanchor-h2">No Anchor H2</Heading>
-                <Heading size={3} noanchor id="noanchor-h3">No Anchor H3</Heading>
-            </div>
-
-            <div style={{
-      marginBottom: '30px'
-    }}>
-                <h3 style={{
-        marginBottom: '10px',
-        color: '#666'
-      }}>As Different Elements</h3>
-                <Heading size={2} as="div" id="div-h2">Heading as Div</Heading>
-                <Heading size={3} as="span" id="span-h3">Heading as Span</Heading>
-            </div>
-        </div>
-}`,...m.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
-  render: () => <div style={{
-    padding: '20px',
-    maxWidth: '800px'
-  }}>
-            <Heading size={1} id="getting-started">
-                Getting Started
-            </Heading>
-            <p style={{
-      marginBottom: '20px'
-    }}>
-                Welcome to our comprehensive guide. This section will help you understand the basics.
-            </p>
-
-            <Heading size={2} id="installation" label="REQUIRED">
-                Installation
-            </Heading>
-            <p style={{
-      marginBottom: '20px'
-    }}>
-                Follow these steps to install the required dependencies.
-            </p>
-
-            <Heading size={3} id="quick-start">
-                Quick Start
-            </Heading>
-            <p style={{
-      marginBottom: '20px'
-    }}>
-                Get up and running in minutes with our quick start guide.
-            </p>
-
-            <Heading size={2} id="configuration" subtitle="Advanced setup options">
-                Configuration
-            </Heading>
-            <p style={{
-      marginBottom: '20px'
-    }}>
-                Learn about advanced configuration options and customization.
-            </p>
-
-            <Heading size={3} id="environment-variables" label="OPTIONAL">
-                Environment Variables
-            </Heading>
-            <p style={{
-      marginBottom: '20px'
-    }}>
-                Configure your environment for optimal performance.
-            </p>
-
-            <Heading size={2} id="next-steps" kind="muted">
-                Next Steps
-            </Heading>
-            <p style={{
-      marginBottom: '20px'
-    }}>
-                Now that you're set up, explore our advanced features and tutorials.
-            </p>
-        </div>,
-  parameters: {
-    docs: {
-      description: {
-        story: 'This example shows how headings are typically used in documentation, with various combinations of labels, subtitles, and different sizes.'
-      }
-    }
-  }
-}`,...u.parameters?.docs?.source}}};const T=["Default","AllSizes","Muted","WithLabel","WithSubtitle","WithLabelAndSubtitle","WithoutAnchor","AsDiv","AsSpan","Active","Interactive","AllVariants","RealWorldExample"];export{g as Active,a as AllSizes,m as AllVariants,c as AsDiv,p as AsSpan,t as Default,h as Interactive,s as Muted,u as RealWorldExample,d as WithLabel,o as WithLabelAndSubtitle,r as WithSubtitle,l as WithoutAnchor,T as __namedExportsOrder,A as default};