@xyd-js/storybook 0.0.1-build.167

package/storybook-static/assets/SubNav.stories-CL_Th3oO.js

@@ -0,0 +1,19 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{u as a}from"./index-D6tQpKjq.js";import"./index-CzKwSnp0.js";import"./chunk-EF7DTUVF-DPkwZaUR.js";import"./index-DUCcPMOf.js";import"./index-DgnBCu_c.js";import"./index-D_kTjGoR.js";const o={title:"UI/SubNav"},n=()=>e.jsx("div",{style:{padding:"100px",paddingTop:"0px",margin:"0 auto"},children:e.jsxs(a,{title:"Apps",value:"build",children:[e.jsx(a.Item,{value:"build",href:"/build",children:"Build"}),e.jsx(a.Item,{value:"design",href:"/design",children:"Design"}),e.jsx(a.Item,{value:"launch",href:"/launch",children:"Launch"})]})});n.__docgenInfo={description:"",methods:[],displayName:"Default"};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`() => {
+  return <div style={{
+    padding: "100px",
+    paddingTop: "0px",
+    margin: "0 auto"
+  }}>
+        <SubNav title="Apps" value="build">
+            <SubNav.Item value="build" href="/build">
+                Build
+            </SubNav.Item>
+            <SubNav.Item value="design" href="/design">
+                Design
+            </SubNav.Item>
+            <SubNav.Item value="launch" href="/launch">
+                Launch
+            </SubNav.Item>
+        </SubNav>
+    </div>;
+}`,...n.parameters?.docs?.source}}};const p=["Default"];export{n as Default,p as __namedExportsOrder,o as default};

package/storybook-static/assets/Table.stories-BdNM7k9y.js

@@ -0,0 +1,581 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{D as l}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 j={title:"Components/Writer/Table",component:l,parameters:{docs:{description:{component:"Table component provides structured data display with support for headers, body content, and various cell types including numeric and muted variants."}}},argTypes:{children:{description:"The table content including Head and Body components",control:!1}}},n={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs(l,{children:[e.jsx(l.Head,{children:e.jsxs(l.Tr,{children:[e.jsx(l.Th,{children:"Model"}),e.jsx(l.Th,{numeric:!0,children:"Training"}),e.jsx(l.Th,{numeric:!0,children:"Input"}),e.jsx(l.Th,{numeric:!0,children:"Cached input"}),e.jsx(l.Th,{numeric:!0,children:"Output"})]})}),e.jsx(l.Body,{children:e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"gpt-4o-2024-08-06"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$25.00"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$3.75"})}),e.jsx(l.Td,{numeric:!0,muted:!0,children:e.jsx(l.Cell,{children:"$1.875"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$15.00"})})]})})]})})},T={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs(l,{children:[e.jsx(l.Head,{children:e.jsxs(l.Tr,{children:[e.jsx(l.Th,{children:"Model"}),e.jsx(l.Th,{numeric:!0,children:"Training"}),e.jsx(l.Th,{numeric:!0,children:"Input"}),e.jsx(l.Th,{numeric:!0,children:"Cached input"}),e.jsx(l.Th,{numeric:!0,children:"Output"})]})}),e.jsxs(l.Body,{children:[e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"gpt-4o-2024-08-06"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$25.00"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$3.75"})}),e.jsx(l.Td,{numeric:!0,muted:!0,children:e.jsx(l.Cell,{children:"$1.875"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$15.00"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"gpt-4o-mini"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$15.00"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$0.15"})}),e.jsx(l.Td,{numeric:!0,muted:!0,children:e.jsx(l.Cell,{children:"$0.075"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$0.60"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"gpt-3.5-turbo"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$3.00"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$0.0015"})}),e.jsx(l.Td,{numeric:!0,muted:!0,children:e.jsx(l.Cell,{children:"$0.002"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$0.002"})})]})]})]})})},r={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs(l,{children:[e.jsx(l.Head,{children:e.jsxs(l.Tr,{children:[e.jsx(l.Th,{children:"Feature"}),e.jsx(l.Th,{children:"Status"}),e.jsx(l.Th,{numeric:!0,children:"Usage"}),e.jsx(l.Th,{children:"Last Updated"}),e.jsx(l.Th,{numeric:!0,children:"Performance"})]})}),e.jsxs(l.Body,{children:[e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"API Authentication"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"✅ Active"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"1,234"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"2024-01-15"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"99.9%"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Data Processing"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"⚠️ Limited"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"567"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"2024-01-10"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"95.2%"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Analytics Dashboard"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"❌ Disabled"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"0"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"2024-01-05"})}),e.jsx(l.Td,{numeric:!0,muted:!0,children:e.jsx(l.Cell,{children:"N/A"})})]})]})]})})},a={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs(l,{children:[e.jsx(l.Head,{children:e.jsxs(l.Tr,{children:[e.jsx(l.Th,{children:"Description"}),e.jsx(l.Th,{children:"Category"}),e.jsx(l.Th,{numeric:!0,children:"Priority"}),e.jsx(l.Th,{children:"Notes"})]})}),e.jsxs(l.Body,{children:[e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Implement comprehensive user authentication system with support for multiple authentication providers including OAuth, SAML, and custom token-based authentication."})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Security"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"High"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"This feature is critical for enterprise customers and requires thorough testing across different environments."})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Create advanced analytics dashboard with real-time data visualization, customizable charts, and export functionality for business intelligence."})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Analytics"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"Medium"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Should integrate with existing data pipeline and support multiple chart types including line, bar, and pie charts."})})]})]})]})})},d={render:()=>e.jsxs("div",{style:{padding:"20px",maxWidth:"1000px"},children:[e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"API Pricing Table"}),e.jsx("p",{children:"Tables are commonly used to display pricing information and feature comparisons."}),e.jsx("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:e.jsxs(l,{children:[e.jsx(l.Head,{children:e.jsxs(l.Tr,{children:[e.jsx(l.Th,{children:"Plan"}),e.jsx(l.Th,{numeric:!0,children:"Price"}),e.jsx(l.Th,{numeric:!0,children:"API Calls"}),e.jsx(l.Th,{numeric:!0,children:"Storage"}),e.jsx(l.Th,{children:"Support"})]})}),e.jsxs(l.Body,{children:[e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Starter"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$29/month"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"10,000"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"5GB"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Email"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Professional"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"$99/month"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"100,000"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"50GB"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Priority"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Enterprise"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"Custom"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"Unlimited"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"Unlimited"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"24/7 Phone"})})]})]})]})})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"System Status"}),e.jsx("p",{children:"Tables can display system status and monitoring information."}),e.jsx("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:e.jsxs(l,{children:[e.jsx(l.Head,{children:e.jsxs(l.Tr,{children:[e.jsx(l.Th,{children:"Service"}),e.jsx(l.Th,{children:"Status"}),e.jsx(l.Th,{numeric:!0,children:"Uptime"}),e.jsx(l.Th,{numeric:!0,children:"Response Time"}),e.jsx(l.Th,{children:"Last Incident"})]})}),e.jsxs(l.Body,{children:[e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"API Gateway"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"🟢 Operational"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"99.99%"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"45ms"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"2024-01-10"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Database"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"🟡 Degraded"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"99.85%"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"120ms"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"2024-01-15"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"CDN"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"🟢 Operational"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"99.98%"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"25ms"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"2024-01-08"})})]})]})]})})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"User Management"}),e.jsx("p",{children:"Tables are perfect for displaying user lists and management interfaces."}),e.jsx("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:e.jsxs(l,{children:[e.jsx(l.Head,{children:e.jsxs(l.Tr,{children:[e.jsx(l.Th,{children:"User"}),e.jsx(l.Th,{children:"Role"}),e.jsx(l.Th,{children:"Status"}),e.jsx(l.Th,{numeric:!0,children:"Last Login"}),e.jsx(l.Th,{numeric:!0,children:"Actions"})]})}),e.jsxs(l.Body,{children:[e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"john.doe@company.com"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Admin"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"🟢 Active"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"2 hours ago"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"Edit | Delete"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"jane.smith@company.com"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"User"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"🟡 Pending"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"Never"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"Edit | Delete"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"bob.wilson@company.com"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Manager"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"🟢 Active"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"1 day ago"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"Edit | Delete"})})]})]})]})})]})]}),parameters:{docs:{description:{story:"This example shows how tables are typically used in real applications for data display."}}}},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:"Table Component Demo"}),e.jsx("p",{style:{marginBottom:"16px",color:"var(--xyd-text-color)"},children:"This example demonstrates the Table component with various cell types and data formats."}),e.jsxs(l,{children:[e.jsx(l.Head,{children:e.jsxs(l.Tr,{children:[e.jsx(l.Th,{children:"Component"}),e.jsx(l.Th,{children:"Type"}),e.jsx(l.Th,{numeric:!0,children:"Complexity"}),e.jsx(l.Th,{children:"Status"})]})}),e.jsxs(l.Body,{children:[e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Button"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Interactive"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"Low"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"✅ Complete"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Table"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Data Display"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"Medium"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"🔄 In Progress"})})]}),e.jsxs(l.Tr,{children:[e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Steps"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"Navigation"})}),e.jsx(l.Td,{numeric:!0,children:e.jsx(l.Cell,{children:"Low"})}),e.jsx(l.Td,{children:e.jsx(l.Cell,{children:"✅ Complete"})})]})]})]})]}),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:"Features"}),e.jsxs("ul",{style:{color:"var(--xyd-text-color)"},children:[e.jsx("li",{children:"Structured data display"}),e.jsx("li",{children:"Numeric cell alignment"}),e.jsx("li",{children:"Muted cell styling"}),e.jsx("li",{children:"Responsive design"}),e.jsx("li",{children:"Accessible markup"})]})]})]}),parameters:{docs:{description:{story:"This interactive example demonstrates the Table component functionality and styling."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <Table>
+                <Table.Head>
+                    <Table.Tr>
+                        <Table.Th>Model</Table.Th>
+                        <Table.Th numeric>Training</Table.Th>
+                        <Table.Th numeric>Input</Table.Th>
+                        <Table.Th numeric>Cached input</Table.Th>
+                        <Table.Th numeric>Output</Table.Th>
+                    </Table.Tr>
+                </Table.Head>
+                <Table.Body>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Table.Cell>gpt-4o-2024-08-06</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$25.00</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$3.75</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric muted>
+                            <Table.Cell>$1.875</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$15.00</Table.Cell>
+                        </Table.Td>
+                    </Table.Tr>
+                </Table.Body>
+            </Table>
+        </div>
+}`,...n.parameters?.docs?.source}}};T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <Table>
+                <Table.Head>
+                    <Table.Tr>
+                        <Table.Th>Model</Table.Th>
+                        <Table.Th numeric>Training</Table.Th>
+                        <Table.Th numeric>Input</Table.Th>
+                        <Table.Th numeric>Cached input</Table.Th>
+                        <Table.Th numeric>Output</Table.Th>
+                    </Table.Tr>
+                </Table.Head>
+                <Table.Body>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Table.Cell>gpt-4o-2024-08-06</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$25.00</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$3.75</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric muted>
+                            <Table.Cell>$1.875</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$15.00</Table.Cell>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Table.Cell>gpt-4o-mini</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$15.00</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$0.15</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric muted>
+                            <Table.Cell>$0.075</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$0.60</Table.Cell>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Table.Cell>gpt-3.5-turbo</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$3.00</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$0.0015</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric muted>
+                            <Table.Cell>$0.002</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>$0.002</Table.Cell>
+                        </Table.Td>
+                    </Table.Tr>
+                </Table.Body>
+            </Table>
+        </div>
+}`,...T.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <Table>
+                <Table.Head>
+                    <Table.Tr>
+                        <Table.Th>Feature</Table.Th>
+                        <Table.Th>Status</Table.Th>
+                        <Table.Th numeric>Usage</Table.Th>
+                        <Table.Th>Last Updated</Table.Th>
+                        <Table.Th numeric>Performance</Table.Th>
+                    </Table.Tr>
+                </Table.Head>
+                <Table.Body>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Table.Cell>API Authentication</Table.Cell>
+                        </Table.Td>
+                        <Table.Td>
+                            <Table.Cell>✅ Active</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>1,234</Table.Cell>
+                        </Table.Td>
+                        <Table.Td>
+                            <Table.Cell>2024-01-15</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>99.9%</Table.Cell>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Table.Cell>Data Processing</Table.Cell>
+                        </Table.Td>
+                        <Table.Td>
+                            <Table.Cell>⚠️ Limited</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>567</Table.Cell>
+                        </Table.Td>
+                        <Table.Td>
+                            <Table.Cell>2024-01-10</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>95.2%</Table.Cell>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Table.Cell>Analytics Dashboard</Table.Cell>
+                        </Table.Td>
+                        <Table.Td>
+                            <Table.Cell>❌ Disabled</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>0</Table.Cell>
+                        </Table.Td>
+                        <Table.Td>
+                            <Table.Cell>2024-01-05</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric muted>
+                            <Table.Cell>N/A</Table.Cell>
+                        </Table.Td>
+                    </Table.Tr>
+                </Table.Body>
+            </Table>
+        </div>
+}`,...r.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <Table>
+                <Table.Head>
+                    <Table.Tr>
+                        <Table.Th>Description</Table.Th>
+                        <Table.Th>Category</Table.Th>
+                        <Table.Th numeric>Priority</Table.Th>
+                        <Table.Th>Notes</Table.Th>
+                    </Table.Tr>
+                </Table.Head>
+                <Table.Body>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Table.Cell>
+                                Implement comprehensive user authentication system with support for 
+                                multiple authentication providers including OAuth, SAML, and custom 
+                                token-based authentication.
+                            </Table.Cell>
+                        </Table.Td>
+                        <Table.Td>
+                            <Table.Cell>Security</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>High</Table.Cell>
+                        </Table.Td>
+                        <Table.Td>
+                            <Table.Cell>
+                                This feature is critical for enterprise customers and requires 
+                                thorough testing across different environments.
+                            </Table.Cell>
+                        </Table.Td>
+                    </Table.Tr>
+                    <Table.Tr>
+                        <Table.Td>
+                            <Table.Cell>
+                                Create advanced analytics dashboard with real-time data visualization, 
+                                customizable charts, and export functionality for business intelligence.
+                            </Table.Cell>
+                        </Table.Td>
+                        <Table.Td>
+                            <Table.Cell>Analytics</Table.Cell>
+                        </Table.Td>
+                        <Table.Td numeric>
+                            <Table.Cell>Medium</Table.Cell>
+                        </Table.Td>
+                        <Table.Td>
+                            <Table.Cell>
+                                Should integrate with existing data pipeline and support multiple 
+                                chart types including line, bar, and pie charts.
+                            </Table.Cell>
+                        </Table.Td>
+                    </Table.Tr>
+                </Table.Body>
+            </Table>
+        </div>
+}`,...a.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px',
+    maxWidth: '1000px'
+  }}>
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>API Pricing Table</h2>
+                <p>Tables are commonly used to display pricing information and feature comparisons.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <Table>
+                        <Table.Head>
+                            <Table.Tr>
+                                <Table.Th>Plan</Table.Th>
+                                <Table.Th numeric>Price</Table.Th>
+                                <Table.Th numeric>API Calls</Table.Th>
+                                <Table.Th numeric>Storage</Table.Th>
+                                <Table.Th>Support</Table.Th>
+                            </Table.Tr>
+                        </Table.Head>
+                        <Table.Body>
+                            <Table.Tr>
+                                <Table.Td>
+                                    <Table.Cell>Starter</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>$29/month</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>10,000</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>5GB</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>Email</Table.Cell>
+                                </Table.Td>
+                            </Table.Tr>
+                            <Table.Tr>
+                                <Table.Td>
+                                    <Table.Cell>Professional</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>$99/month</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>100,000</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>50GB</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>Priority</Table.Cell>
+                                </Table.Td>
+                            </Table.Tr>
+                            <Table.Tr>
+                                <Table.Td>
+                                    <Table.Cell>Enterprise</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>Custom</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>Unlimited</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>Unlimited</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>24/7 Phone</Table.Cell>
+                                </Table.Td>
+                            </Table.Tr>
+                        </Table.Body>
+                    </Table>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>System Status</h2>
+                <p>Tables can display system status and monitoring information.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <Table>
+                        <Table.Head>
+                            <Table.Tr>
+                                <Table.Th>Service</Table.Th>
+                                <Table.Th>Status</Table.Th>
+                                <Table.Th numeric>Uptime</Table.Th>
+                                <Table.Th numeric>Response Time</Table.Th>
+                                <Table.Th>Last Incident</Table.Th>
+                            </Table.Tr>
+                        </Table.Head>
+                        <Table.Body>
+                            <Table.Tr>
+                                <Table.Td>
+                                    <Table.Cell>API Gateway</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>🟢 Operational</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>99.99%</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>45ms</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>2024-01-10</Table.Cell>
+                                </Table.Td>
+                            </Table.Tr>
+                            <Table.Tr>
+                                <Table.Td>
+                                    <Table.Cell>Database</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>🟡 Degraded</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>99.85%</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>120ms</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>2024-01-15</Table.Cell>
+                                </Table.Td>
+                            </Table.Tr>
+                            <Table.Tr>
+                                <Table.Td>
+                                    <Table.Cell>CDN</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>🟢 Operational</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>99.98%</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>25ms</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>2024-01-08</Table.Cell>
+                                </Table.Td>
+                            </Table.Tr>
+                        </Table.Body>
+                    </Table>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>User Management</h2>
+                <p>Tables are perfect for displaying user lists and management interfaces.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <Table>
+                        <Table.Head>
+                            <Table.Tr>
+                                <Table.Th>User</Table.Th>
+                                <Table.Th>Role</Table.Th>
+                                <Table.Th>Status</Table.Th>
+                                <Table.Th numeric>Last Login</Table.Th>
+                                <Table.Th numeric>Actions</Table.Th>
+                            </Table.Tr>
+                        </Table.Head>
+                        <Table.Body>
+                            <Table.Tr>
+                                <Table.Td>
+                                    <Table.Cell>john.doe@company.com</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>Admin</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>🟢 Active</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>2 hours ago</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>Edit | Delete</Table.Cell>
+                                </Table.Td>
+                            </Table.Tr>
+                            <Table.Tr>
+                                <Table.Td>
+                                    <Table.Cell>jane.smith@company.com</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>User</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>🟡 Pending</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>Never</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>Edit | Delete</Table.Cell>
+                                </Table.Td>
+                            </Table.Tr>
+                            <Table.Tr>
+                                <Table.Td>
+                                    <Table.Cell>bob.wilson@company.com</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>Manager</Table.Cell>
+                                </Table.Td>
+                                <Table.Td>
+                                    <Table.Cell>🟢 Active</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>1 day ago</Table.Cell>
+                                </Table.Td>
+                                <Table.Td numeric>
+                                    <Table.Cell>Edit | Delete</Table.Cell>
+                                </Table.Td>
+                            </Table.Tr>
+                        </Table.Body>
+                    </Table>
+                </div>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows how tables are typically used in real applications for data display.'
+      }
+    }
+  }
+}`,...d.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'
+      }}>Table Component Demo</h3>
+                <p style={{
+        marginBottom: '16px',
+        color: 'var(--xyd-text-color)'
+      }}>
+                    This example demonstrates the Table component with various cell types and data formats.
+                </p>
+                <Table>
+                    <Table.Head>
+                        <Table.Tr>
+                            <Table.Th>Component</Table.Th>
+                            <Table.Th>Type</Table.Th>
+                            <Table.Th numeric>Complexity</Table.Th>
+                            <Table.Th>Status</Table.Th>
+                        </Table.Tr>
+                    </Table.Head>
+                    <Table.Body>
+                        <Table.Tr>
+                            <Table.Td>
+                                <Table.Cell>Button</Table.Cell>
+                            </Table.Td>
+                            <Table.Td>
+                                <Table.Cell>Interactive</Table.Cell>
+                            </Table.Td>
+                            <Table.Td numeric>
+                                <Table.Cell>Low</Table.Cell>
+                            </Table.Td>
+                            <Table.Td>
+                                <Table.Cell>✅ Complete</Table.Cell>
+                            </Table.Td>
+                        </Table.Tr>
+                        <Table.Tr>
+                            <Table.Td>
+                                <Table.Cell>Table</Table.Cell>
+                            </Table.Td>
+                            <Table.Td>
+                                <Table.Cell>Data Display</Table.Cell>
+                            </Table.Td>
+                            <Table.Td numeric>
+                                <Table.Cell>Medium</Table.Cell>
+                            </Table.Td>
+                            <Table.Td>
+                                <Table.Cell>🔄 In Progress</Table.Cell>
+                            </Table.Td>
+                        </Table.Tr>
+                        <Table.Tr>
+                            <Table.Td>
+                                <Table.Cell>Steps</Table.Cell>
+                            </Table.Td>
+                            <Table.Td>
+                                <Table.Cell>Navigation</Table.Cell>
+                            </Table.Td>
+                            <Table.Td numeric>
+                                <Table.Cell>Low</Table.Cell>
+                            </Table.Td>
+                            <Table.Td>
+                                <Table.Cell>✅ Complete</Table.Cell>
+                            </Table.Td>
+                        </Table.Tr>
+                    </Table.Body>
+                </Table>
+            </div>
+
+            <div style={{
+      background: 'var(--xyd-bgcolor)',
+      border: '1px solid var(--xyd-border-color)',
+      borderRadius: '8px',
+      padding: '20px'
+    }}>
+                <h4 style={{
+        marginBottom: '12px'
+      }}>Features</h4>
+                <ul style={{
+        color: 'var(--xyd-text-color)'
+      }}>
+                    <li>Structured data display</li>
+                    <li>Numeric cell alignment</li>
+                    <li>Muted cell styling</li>
+                    <li>Responsive design</li>
+                    <li>Accessible markup</li>
+                </ul>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This interactive example demonstrates the Table component functionality and styling.'
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};const p=["Default","MultipleRows","DifferentDataTypes","LongContent","RealWorldExamples","Interactive"];export{n as Default,r as DifferentDataTypes,i as Interactive,a as LongContent,T as MultipleRows,d as RealWorldExamples,p as __namedExportsOrder,j as default};