@xyd-js/storybook 0.0.1-build.167

package/storybook-static/assets/Tabs.stories-A3NcBab_.js

@@ -0,0 +1,873 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{U as t}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 g={title:"Components/Writer/Tabs",component:t,parameters:{docs:{description:{component:"Tabs component provides a tabbed interface for organizing content into multiple sections. It supports both primary and secondary variants with different styling and behavior."}}},argTypes:{children:{description:"The tab items and content sections",control:!1},value:{description:"The currently selected tab value",control:"text"},onChange:{description:"Callback function triggered when a tab is selected",control:!1},slide:{description:"Whether to enable sliding animation between tabs",control:"boolean"},className:{description:"Optional CSS class name for custom styling",control:"text"},kind:{description:"The variant of the tabs component",control:{type:"select"},options:["default","secondary"]}}},i={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs(t,{value:"tab1",children:[e.jsx(t.Item,{value:"tab1",children:"User Behavior"}),e.jsx(t.Item,{value:"tab2",children:"Feature Adoption"}),e.jsx(t.Item,{value:"tab3",children:"Churn Analysis"}),e.jsx(t.Content,{value:"tab1",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"User Behavior Analysis"}),e.jsx("p",{children:"Gain insights into user behavior by replaying sessions and analyzing click patterns. This helps uncover friction points in your app's user experience."}),e.jsxs("ul",{children:[e.jsx("li",{children:"Session replay functionality"}),e.jsx("li",{children:"Click pattern analysis"}),e.jsx("li",{children:"User journey mapping"}),e.jsx("li",{children:"Friction point identification"})]})]})}),e.jsx(t.Content,{value:"tab2",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Feature Adoption Tracking"}),e.jsx("p",{children:"Understand how users engage with new features. Track metrics like time to adoption and overall usage to measure feature success."}),e.jsxs("ul",{children:[e.jsx("li",{children:"Adoption rate tracking"}),e.jsx("li",{children:"Time-to-adoption metrics"}),e.jsx("li",{children:"Feature usage analytics"}),e.jsx("li",{children:"Success measurement"})]})]})}),e.jsx(t.Content,{value:"tab3",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Churn Analysis"}),e.jsx("p",{children:"Use session data to identify behavioral patterns of users who are at risk of churning and implement targeted retention strategies."}),e.jsxs("ul",{children:[e.jsx("li",{children:"Churn prediction models"}),e.jsx("li",{children:"Behavioral pattern analysis"}),e.jsx("li",{children:"Retention strategy implementation"}),e.jsx("li",{children:"Risk assessment"})]})]})})]})})},s={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs(t,{value:"overview",kind:"secondary",children:[e.jsx(t.Item,{value:"overview",children:"Overview"}),e.jsx(t.Item,{value:"details",children:"Details"}),e.jsx(t.Item,{value:"settings",children:"Settings"}),e.jsx(t.Content,{value:"overview",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"System Overview"}),e.jsx("p",{children:"This is the overview tab with general information about the system."}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor-secondary)",padding:"16px",borderRadius:"8px",marginTop:"16px"},children:[e.jsx("h4",{children:"Key Metrics"}),e.jsx("p",{children:"Display important system metrics and status information."})]})]})}),e.jsx(t.Content,{value:"details",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Detailed Information"}),e.jsx("p",{children:"This tab shows detailed information about the selected item."}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor-secondary)",padding:"16px",borderRadius:"8px",marginTop:"16px"},children:[e.jsx("h4",{children:"Active Tab Content"}),e.jsx("p",{children:"This content is visible because the Details tab is currently active."})]})]})}),e.jsx(t.Content,{value:"settings",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Configuration Settings"}),e.jsx("p",{children:"Configure your preferences and system settings in this tab."}),e.jsxs("ul",{children:[e.jsx("li",{children:"User preferences"}),e.jsx("li",{children:"System configuration"}),e.jsx("li",{children:"Security settings"}),e.jsx("li",{children:"Notification options"})]})]})})]})}),parameters:{docs:{description:{story:"Secondary Tabs variant with different styling and behavior."}}}},n={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs(t,{value:"users",children:[e.jsx(t.Item,{value:"users",children:"User Behavior"}),e.jsx(t.Item,{value:"features",children:"Feature Adoption"}),e.jsx(t.Item,{value:"churn",children:"Churn Analysis"}),e.jsx(t.Item,{value:"revenue",children:"Revenue Analytics"}),e.jsx(t.Item,{value:"performance",children:"Performance Metrics"}),e.jsx(t.Item,{value:"security",children:"Security Monitoring"}),e.jsx(t.Item,{value:"api",children:"API Usage"}),e.jsx(t.Item,{value:"database",children:"Database Health"}),e.jsx(t.Content,{value:"users",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"User Behavior Analysis"}),e.jsx("p",{children:"Track and analyze user interactions to understand behavior patterns."})]})}),e.jsx(t.Content,{value:"features",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Feature Adoption"}),e.jsx("p",{children:"Monitor how users adopt and use new features in your application."})]})}),e.jsx(t.Content,{value:"churn",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Churn Analysis"}),e.jsx("p",{children:"Identify users at risk of leaving and implement retention strategies."})]})}),e.jsx(t.Content,{value:"revenue",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Revenue Analytics"}),e.jsx("p",{children:"Track revenue metrics and analyze business performance."})]})}),e.jsx(t.Content,{value:"performance",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Performance Metrics"}),e.jsx("p",{children:"Monitor application performance and system health."})]})}),e.jsx(t.Content,{value:"security",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Security Monitoring"}),e.jsx("p",{children:"Track security events and monitor for potential threats."})]})}),e.jsx(t.Content,{value:"api",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"API Usage"}),e.jsx("p",{children:"Monitor API calls, rate limits, and usage patterns."})]})}),e.jsx(t.Content,{value:"database",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Database Health"}),e.jsx("p",{children:"Track database performance, connections, and query optimization."})]})})]})}),parameters:{docs:{description:{story:"This example shows how the Tabs component handles many tabs with horizontal scrolling."}}}},a={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs(t,{value:"tab1",children:[e.jsx(t.Item,{value:"tab1",href:"#tab1",children:"Documentation"}),e.jsx(t.Item,{value:"tab2",href:"#tab2",children:"Examples"}),e.jsx(t.Item,{value:"tab3",href:"#tab3",children:"API Reference"}),e.jsx(t.Content,{value:"tab1",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Component Documentation"}),e.jsx("p",{children:"The Tabs component provides a clean and accessible way to organize content into multiple sections. It supports horizontal scrolling when there are many tabs and includes arrow navigation for better user experience."}),e.jsx("h4",{children:"Key Features"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"Accessible:"})," Built with proper ARIA attributes and keyboard navigation"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Responsive:"})," Adapts to different screen sizes"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Scrollable:"})," Handles many tabs with horizontal scrolling"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Customizable:"})," Supports custom styling via className prop"]})]})]})}),e.jsx(t.Content,{value:"tab2",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"Usage Examples"}),e.jsxs("div",{style:{marginBottom:"24px"},children:[e.jsx("h4",{children:"Basic Tabs"}),e.jsx("p",{children:"Simple tab interface with a few sections:"}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor-secondary)",padding:"16px",borderRadius:"8px"},children:[e.jsx("strong",{children:"Example:"})," Settings, Profile, Notifications"]})]}),e.jsxs("div",{style:{marginBottom:"24px"},children:[e.jsx("h4",{children:"Many Tabs"}),e.jsx("p",{children:"When you have many tabs, the component automatically adds scrolling:"}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor-secondary)",padding:"16px",borderRadius:"8px"},children:[e.jsx("strong",{children:"Example:"})," Analytics, Users, Reports, Settings, Help, etc."]})]})]})}),e.jsx(t.Content,{value:"tab3",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h3",{children:"API Reference"}),e.jsx("h4",{children:"Props"}),e.jsxs("table",{style:{width:"100%",borderCollapse:"collapse"},children:[e.jsx("thead",{children:e.jsxs("tr",{style:{borderBottom:"1px solid var(--xyd-border-color)"},children:[e.jsx("th",{style:{textAlign:"left",padding:"8px"},children:"Prop"}),e.jsx("th",{style:{textAlign:"left",padding:"8px"},children:"Type"}),e.jsx("th",{style:{textAlign:"left",padding:"8px"},children:"Description"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{style:{borderBottom:"1px solid var(--xyd-border-color)"},children:[e.jsx("td",{style:{padding:"8px"},children:e.jsx("code",{children:"children"})}),e.jsx("td",{style:{padding:"8px"},children:"React.ReactNode"}),e.jsx("td",{style:{padding:"8px"},children:"Tab items and content sections"})]}),e.jsxs("tr",{style:{borderBottom:"1px solid var(--xyd-border-color)"},children:[e.jsx("td",{style:{padding:"8px"},children:e.jsx("code",{children:"value"})}),e.jsx("td",{style:{padding:"8px"},children:"string"}),e.jsx("td",{style:{padding:"8px"},children:"Currently selected tab value"})]}),e.jsxs("tr",{style:{borderBottom:"1px solid var(--xyd-border-color)"},children:[e.jsx("td",{style:{padding:"8px"},children:e.jsx("code",{children:"onChange"})}),e.jsx("td",{style:{padding:"8px"},children:"function"}),e.jsx("td",{style:{padding:"8px"},children:"Callback when tab is selected"})]}),e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"8px"},children:e.jsx("code",{children:"kind"})}),e.jsx("td",{style:{padding:"8px"},children:"string"}),e.jsx("td",{style:{padding:"8px"},children:"Tab variant (default/secondary)"})]})]})]})]})})]})}),parameters:{docs:{description:{story:"This example shows tabs with href links for navigation."}}}},r={render:()=>e.jsxs("div",{style:{padding:"20px",maxWidth:"1000px"},children:[e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Dashboard Analytics"}),e.jsx("p",{children:"Tabs are commonly used in dashboards to organize different types of analytics and data."}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:[e.jsx("h3",{style:{marginBottom:"16px"},children:"Analytics Dashboard"}),e.jsxs(t,{value:"overview",children:[e.jsx(t.Item,{value:"overview",children:"Overview"}),e.jsx(t.Item,{value:"users",children:"Users"}),e.jsx(t.Item,{value:"revenue",children:"Revenue"}),e.jsx(t.Item,{value:"performance",children:"Performance"}),e.jsx(t.Item,{value:"settings",children:"Settings"}),e.jsx(t.Content,{value:"overview",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Dashboard Overview"}),e.jsx("p",{children:"Key metrics and summary information for your application."}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(200px, 1fr))",gap:"16px",marginTop:"16px"},children:[e.jsxs("div",{style:{background:"var(--xyd-bgcolor-secondary)",padding:"16px",borderRadius:"8px",textAlign:"center"},children:[e.jsx("h5",{children:"Total Users"}),e.jsx("p",{style:{fontSize:"24px",fontWeight:"bold",margin:0},children:"12,345"})]}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor-secondary)",padding:"16px",borderRadius:"8px",textAlign:"center"},children:[e.jsx("h5",{children:"Active Sessions"}),e.jsx("p",{style:{fontSize:"24px",fontWeight:"bold",margin:0},children:"1,234"})]}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor-secondary)",padding:"16px",borderRadius:"8px",textAlign:"center"},children:[e.jsx("h5",{children:"Revenue"}),e.jsx("p",{style:{fontSize:"24px",fontWeight:"bold",margin:0},children:"$45,678"})]})]})]})}),e.jsx(t.Content,{value:"users",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"User Analytics"}),e.jsx("p",{children:"Detailed user behavior and engagement metrics."}),e.jsxs("ul",{children:[e.jsx("li",{children:"User acquisition trends"}),e.jsx("li",{children:"Engagement metrics"}),e.jsx("li",{children:"Retention analysis"}),e.jsx("li",{children:"User segmentation"})]})]})}),e.jsx(t.Content,{value:"revenue",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Revenue Analytics"}),e.jsx("p",{children:"Financial metrics and revenue tracking."}),e.jsxs("ul",{children:[e.jsx("li",{children:"Monthly recurring revenue"}),e.jsx("li",{children:"Customer lifetime value"}),e.jsx("li",{children:"Churn rate analysis"}),e.jsx("li",{children:"Pricing optimization"})]})]})}),e.jsx(t.Content,{value:"performance",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"System Performance"}),e.jsx("p",{children:"Application performance and system health metrics."}),e.jsxs("ul",{children:[e.jsx("li",{children:"Response time monitoring"}),e.jsx("li",{children:"Error rate tracking"}),e.jsx("li",{children:"Resource utilization"}),e.jsx("li",{children:"Uptime statistics"})]})]})}),e.jsx(t.Content,{value:"settings",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Dashboard Settings"}),e.jsx("p",{children:"Configure your dashboard preferences and display options."}),e.jsxs("ul",{children:[e.jsx("li",{children:"Widget customization"}),e.jsx("li",{children:"Theme selection"}),e.jsx("li",{children:"Notification preferences"}),e.jsx("li",{children:"Data refresh intervals"})]})]})})]})]})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Product Documentation"}),e.jsx("p",{children:"Tabs are perfect for organizing product documentation and user guides."}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:[e.jsx("h3",{style:{marginBottom:"16px"},children:"API Documentation"}),e.jsxs(t,{value:"getting-started",children:[e.jsx(t.Item,{value:"getting-started",children:"Getting Started"}),e.jsx(t.Item,{value:"authentication",children:"Authentication"}),e.jsx(t.Item,{value:"endpoints",children:"Endpoints"}),e.jsx(t.Item,{value:"examples",children:"Examples"}),e.jsx(t.Item,{value:"sdks",children:"SDKs"}),e.jsx(t.Content,{value:"getting-started",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Quick Start Guide"}),e.jsx("p",{children:"Get up and running with our API in minutes."}),e.jsxs("ol",{children:[e.jsx("li",{children:"Sign up for an API key"}),e.jsx("li",{children:"Install the SDK"}),e.jsx("li",{children:"Make your first request"}),e.jsx("li",{children:"Explore the documentation"})]})]})}),e.jsx(t.Content,{value:"authentication",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"API Authentication"}),e.jsx("p",{children:"Learn how to authenticate your API requests."}),e.jsx("pre",{style:{background:"var(--xyd-bgcolor-secondary)",padding:"12px",borderRadius:"4px",fontSize:"14px"},children:e.jsx("code",{children:`curl -H "Authorization: Bearer YOUR_API_KEY" \\
+  https://api.example.com/v1/data`})})]})}),e.jsx(t.Content,{value:"endpoints",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"API Endpoints"}),e.jsx("p",{children:"Complete reference of all available API endpoints."}),e.jsxs("ul",{children:[e.jsx("li",{children:"GET /users - List users"}),e.jsx("li",{children:"POST /users - Create user"}),e.jsxs("li",{children:["PUT /users/","{id}"," - Update user"]}),e.jsxs("li",{children:["DELETE /users/","{id}"," - Delete user"]})]})]})}),e.jsx(t.Content,{value:"examples",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Code Examples"}),e.jsx("p",{children:"Real-world examples in multiple programming languages."}),e.jsxs("ul",{children:[e.jsx("li",{children:"JavaScript/Node.js examples"}),e.jsx("li",{children:"Python examples"}),e.jsx("li",{children:"PHP examples"}),e.jsx("li",{children:"cURL examples"})]})]})}),e.jsx(t.Content,{value:"sdks",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Software Development Kits"}),e.jsx("p",{children:"Official SDKs for popular programming languages."}),e.jsxs("ul",{children:[e.jsx("li",{children:"JavaScript SDK"}),e.jsx("li",{children:"Python SDK"}),e.jsx("li",{children:"PHP SDK"}),e.jsx("li",{children:"Ruby SDK"})]})]})})]})]})]})]}),parameters:{docs:{description:{story:"This example shows how Tabs components are typically used in real applications."}}}},l={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:"Tabs Component Demo"}),e.jsx("p",{style:{marginBottom:"16px",color:"var(--xyd-text-color)"},children:"This example demonstrates the Tabs component with various content types and interactive features."}),e.jsxs(t,{value:"features",children:[e.jsx(t.Item,{value:"features",children:"Features"}),e.jsx(t.Item,{value:"implementation",children:"Implementation"}),e.jsx(t.Item,{value:"customization",children:"Customization"}),e.jsx(t.Content,{value:"features",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Key Features"}),e.jsxs("ul",{style:{color:"var(--xyd-text-color)"},children:[e.jsx("li",{children:"Horizontal scrolling for many tabs"}),e.jsx("li",{children:"Arrow navigation when tabs overflow"}),e.jsx("li",{children:"Accessible keyboard navigation"}),e.jsx("li",{children:"Customizable styling"}),e.jsx("li",{children:"Rich content support"}),e.jsx("li",{children:"Responsive design"})]})]})}),e.jsx(t.Content,{value:"implementation",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Implementation Details"}),e.jsx("p",{style:{color:"var(--xyd-text-color)"},children:"The Tabs component is built using Radix UI primitives for accessibility and includes custom scrolling behavior for handling many tabs efficiently."}),e.jsx("pre",{style:{background:"var(--xyd-bgcolor-secondary)",padding:"12px",borderRadius:"4px",fontSize:"14px",marginTop:"16px"},children:e.jsx("code",{children:`// Basic usage
+<Tabs value="tab1">
+  <Tabs.Item value="tab1">Tab 1</Tabs.Item>
+  <Tabs.Item value="tab2">Tab 2</Tabs.Item>
+  <Tabs.Content value="tab1">Content 1</Tabs.Content>
+  <Tabs.Content value="tab2">Content 2</Tabs.Content>
+</Tabs>`})})]})}),e.jsx(t.Content,{value:"customization",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Customization Options"}),e.jsx("p",{style:{color:"var(--xyd-text-color)"},children:"The component supports various customization options through props and CSS classes."}),e.jsxs("ul",{style:{color:"var(--xyd-text-color)"},children:[e.jsxs("li",{children:[e.jsx("code",{children:"value"})," - Set active tab"]}),e.jsxs("li",{children:[e.jsx("code",{children:"onChange"})," - Handle tab changes"]}),e.jsxs("li",{children:[e.jsx("code",{children:"className"})," - Add custom CSS classes"]}),e.jsxs("li",{children:[e.jsx("code",{children:"kind"})," - Choose variant (default/secondary)"]}),e.jsx("li",{children:"CSS custom properties for theming"})]})]})})]})]}),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:"Usage Guidelines"}),e.jsxs("ul",{style:{color:"var(--xyd-text-color)"},children:[e.jsx("li",{children:"Use for organizing related content into sections"}),e.jsx("li",{children:"Keep tab labels short and descriptive"}),e.jsx("li",{children:"Ensure each tab has meaningful content"}),e.jsx("li",{children:"Consider mobile responsiveness"}),e.jsx("li",{children:"Test with many tabs for scrolling behavior"}),e.jsx("li",{children:"Use href prop for navigation when needed"})]})]})]}),parameters:{docs:{description:{story:"This interactive example demonstrates the Tabs component functionality and customization options."}}}},d={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h3",{style:{marginBottom:"16px",color:"#666"},children:"Primary Tabs (Default)"}),e.jsxs(t,{value:"tab1",children:[e.jsx(t.Item,{value:"tab1",children:"First Tab"}),e.jsx(t.Item,{value:"tab2",children:"Second Tab"}),e.jsx(t.Item,{value:"tab3",children:"Third Tab"}),e.jsx(t.Content,{value:"tab1",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Primary Tab Content"}),e.jsx("p",{children:"This is the primary variant with default styling."})]})}),e.jsx(t.Content,{value:"tab2",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Second Tab"}),e.jsx("p",{children:"Content for the second tab."})]})}),e.jsx(t.Content,{value:"tab3",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Third Tab"}),e.jsx("p",{children:"Content for the third tab."})]})})]})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h3",{style:{marginBottom:"16px",color:"#666"},children:"Secondary Tabs"}),e.jsxs(t,{value:"tab1",kind:"secondary",children:[e.jsx(t.Item,{value:"tab1",children:"First Tab"}),e.jsx(t.Item,{value:"tab2",children:"Second Tab"}),e.jsx(t.Item,{value:"tab3",children:"Third Tab"}),e.jsx(t.Content,{value:"tab1",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Secondary Tab Content"}),e.jsx("p",{children:"This is the secondary variant with different styling."})]})}),e.jsx(t.Content,{value:"tab2",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Second Tab"}),e.jsx("p",{children:"Content for the second tab."})]})}),e.jsx(t.Content,{value:"tab3",children:e.jsxs("div",{style:{padding:"20px"},children:[e.jsx("h4",{children:"Third Tab"}),e.jsx("p",{children:"Content for the third tab."})]})})]})]}),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:"Key Differences"}),e.jsxs("ul",{style:{color:"var(--xyd-text-color)"},children:[e.jsxs("li",{children:[e.jsx("strong",{children:"Primary:"})," Default styling with underline indicator"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Secondary:"})," Different visual styling and behavior"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Use Primary:"})," For general content organization"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Use Secondary:"})," For specific use cases requiring different styling"]})]})]})]}),parameters:{docs:{description:{story:"This example compares the primary and secondary variants of the Tabs component."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <Tabs value="tab1">
+                <Tabs.Item value="tab1">
+                    User Behavior
+                </Tabs.Item>
+                <Tabs.Item value="tab2">
+                    Feature Adoption
+                </Tabs.Item>
+                <Tabs.Item value="tab3">
+                    Churn Analysis
+                </Tabs.Item>
+
+                <Tabs.Content value="tab1">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>User Behavior Analysis</h3>
+                        <p>
+                            Gain insights into user behavior by replaying sessions and analyzing click patterns. 
+                            This helps uncover friction points in your app's user experience.
+                        </p>
+                        <ul>
+                            <li>Session replay functionality</li>
+                            <li>Click pattern analysis</li>
+                            <li>User journey mapping</li>
+                            <li>Friction point identification</li>
+                        </ul>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="tab2">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Feature Adoption Tracking</h3>
+                        <p>
+                            Understand how users engage with new features. Track metrics like time to adoption 
+                            and overall usage to measure feature success.
+                        </p>
+                        <ul>
+                            <li>Adoption rate tracking</li>
+                            <li>Time-to-adoption metrics</li>
+                            <li>Feature usage analytics</li>
+                            <li>Success measurement</li>
+                        </ul>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="tab3">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Churn Analysis</h3>
+                        <p>
+                            Use session data to identify behavioral patterns of users who are at risk of churning 
+                            and implement targeted retention strategies.
+                        </p>
+                        <ul>
+                            <li>Churn prediction models</li>
+                            <li>Behavioral pattern analysis</li>
+                            <li>Retention strategy implementation</li>
+                            <li>Risk assessment</li>
+                        </ul>
+                    </div>
+                </Tabs.Content>
+            </Tabs>
+        </div>
+}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <Tabs value="overview" kind="secondary">
+                <Tabs.Item value="overview">
+                    Overview
+                </Tabs.Item>
+                <Tabs.Item value="details">
+                    Details
+                </Tabs.Item>
+                <Tabs.Item value="settings">
+                    Settings
+                </Tabs.Item>
+
+                <Tabs.Content value="overview">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>System Overview</h3>
+                        <p>This is the overview tab with general information about the system.</p>
+                        <div style={{
+            background: 'var(--xyd-bgcolor-secondary)',
+            padding: '16px',
+            borderRadius: '8px',
+            marginTop: '16px'
+          }}>
+                            <h4>Key Metrics</h4>
+                            <p>Display important system metrics and status information.</p>
+                        </div>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="details">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Detailed Information</h3>
+                        <p>This tab shows detailed information about the selected item.</p>
+                        <div style={{
+            background: 'var(--xyd-bgcolor-secondary)',
+            padding: '16px',
+            borderRadius: '8px',
+            marginTop: '16px'
+          }}>
+                            <h4>Active Tab Content</h4>
+                            <p>This content is visible because the Details tab is currently active.</p>
+                        </div>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="settings">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Configuration Settings</h3>
+                        <p>Configure your preferences and system settings in this tab.</p>
+                        <ul>
+                            <li>User preferences</li>
+                            <li>System configuration</li>
+                            <li>Security settings</li>
+                            <li>Notification options</li>
+                        </ul>
+                    </div>
+                </Tabs.Content>
+            </Tabs>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Secondary Tabs variant with different styling and behavior.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <Tabs value="users">
+                <Tabs.Item value="users">User Behavior</Tabs.Item>
+                <Tabs.Item value="features">Feature Adoption</Tabs.Item>
+                <Tabs.Item value="churn">Churn Analysis</Tabs.Item>
+                <Tabs.Item value="revenue">Revenue Analytics</Tabs.Item>
+                <Tabs.Item value="performance">Performance Metrics</Tabs.Item>
+                <Tabs.Item value="security">Security Monitoring</Tabs.Item>
+                <Tabs.Item value="api">API Usage</Tabs.Item>
+                <Tabs.Item value="database">Database Health</Tabs.Item>
+
+                <Tabs.Content value="users">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>User Behavior Analysis</h3>
+                        <p>Track and analyze user interactions to understand behavior patterns.</p>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="features">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Feature Adoption</h3>
+                        <p>Monitor how users adopt and use new features in your application.</p>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="churn">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Churn Analysis</h3>
+                        <p>Identify users at risk of leaving and implement retention strategies.</p>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="revenue">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Revenue Analytics</h3>
+                        <p>Track revenue metrics and analyze business performance.</p>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="performance">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Performance Metrics</h3>
+                        <p>Monitor application performance and system health.</p>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="security">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Security Monitoring</h3>
+                        <p>Track security events and monitor for potential threats.</p>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="api">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>API Usage</h3>
+                        <p>Monitor API calls, rate limits, and usage patterns.</p>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="database">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Database Health</h3>
+                        <p>Track database performance, connections, and query optimization.</p>
+                    </div>
+                </Tabs.Content>
+            </Tabs>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows how the Tabs component handles many tabs with horizontal scrolling.'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <Tabs value="tab1">
+                <Tabs.Item value="tab1" href="#tab1">
+                    Documentation
+                </Tabs.Item>
+                <Tabs.Item value="tab2" href="#tab2">
+                    Examples
+                </Tabs.Item>
+                <Tabs.Item value="tab3" href="#tab3">
+                    API Reference
+                </Tabs.Item>
+
+                <Tabs.Content value="tab1">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Component Documentation</h3>
+                        <p>
+                            The Tabs component provides a clean and accessible way to organize content into 
+                            multiple sections. It supports horizontal scrolling when there are many tabs and 
+                            includes arrow navigation for better user experience.
+                        </p>
+                        
+                        <h4>Key Features</h4>
+                        <ul>
+                            <li><strong>Accessible:</strong> Built with proper ARIA attributes and keyboard navigation</li>
+                            <li><strong>Responsive:</strong> Adapts to different screen sizes</li>
+                            <li><strong>Scrollable:</strong> Handles many tabs with horizontal scrolling</li>
+                            <li><strong>Customizable:</strong> Supports custom styling via className prop</li>
+                        </ul>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="tab2">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>Usage Examples</h3>
+                        
+                        <div style={{
+            marginBottom: '24px'
+          }}>
+                            <h4>Basic Tabs</h4>
+                            <p>Simple tab interface with a few sections:</p>
+                            <div style={{
+              background: 'var(--xyd-bgcolor-secondary)',
+              padding: '16px',
+              borderRadius: '8px'
+            }}>
+                                <strong>Example:</strong> Settings, Profile, Notifications
+                            </div>
+                        </div>
+
+                        <div style={{
+            marginBottom: '24px'
+          }}>
+                            <h4>Many Tabs</h4>
+                            <p>When you have many tabs, the component automatically adds scrolling:</p>
+                            <div style={{
+              background: 'var(--xyd-bgcolor-secondary)',
+              padding: '16px',
+              borderRadius: '8px'
+            }}>
+                                <strong>Example:</strong> Analytics, Users, Reports, Settings, Help, etc.
+                            </div>
+                        </div>
+                    </div>
+                </Tabs.Content>
+                <Tabs.Content value="tab3">
+                    <div style={{
+          padding: '20px'
+        }}>
+                        <h3>API Reference</h3>
+                        
+                        <h4>Props</h4>
+                        <table style={{
+            width: '100%',
+            borderCollapse: 'collapse'
+          }}>
+                            <thead>
+                                <tr style={{
+                borderBottom: '1px solid var(--xyd-border-color)'
+              }}>
+                                    <th style={{
+                  textAlign: 'left',
+                  padding: '8px'
+                }}>Prop</th>
+                                    <th style={{
+                  textAlign: 'left',
+                  padding: '8px'
+                }}>Type</th>
+                                    <th style={{
+                  textAlign: 'left',
+                  padding: '8px'
+                }}>Description</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr style={{
+                borderBottom: '1px solid var(--xyd-border-color)'
+              }}>
+                                    <td style={{
+                  padding: '8px'
+                }}><code>children</code></td>
+                                    <td style={{
+                  padding: '8px'
+                }}>React.ReactNode</td>
+                                    <td style={{
+                  padding: '8px'
+                }}>Tab items and content sections</td>
+                                </tr>
+                                <tr style={{
+                borderBottom: '1px solid var(--xyd-border-color)'
+              }}>
+                                    <td style={{
+                  padding: '8px'
+                }}><code>value</code></td>
+                                    <td style={{
+                  padding: '8px'
+                }}>string</td>
+                                    <td style={{
+                  padding: '8px'
+                }}>Currently selected tab value</td>
+                                </tr>
+                                <tr style={{
+                borderBottom: '1px solid var(--xyd-border-color)'
+              }}>
+                                    <td style={{
+                  padding: '8px'
+                }}><code>onChange</code></td>
+                                    <td style={{
+                  padding: '8px'
+                }}>function</td>
+                                    <td style={{
+                  padding: '8px'
+                }}>Callback when tab is selected</td>
+                                </tr>
+                                <tr>
+                                    <td style={{
+                  padding: '8px'
+                }}><code>kind</code></td>
+                                    <td style={{
+                  padding: '8px'
+                }}>string</td>
+                                    <td style={{
+                  padding: '8px'
+                }}>Tab variant (default/secondary)</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </Tabs.Content>
+            </Tabs>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows tabs with href links for navigation.'
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px',
+    maxWidth: '1000px'
+  }}>
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Dashboard Analytics</h2>
+                <p>Tabs are commonly used in dashboards to organize different types of analytics and data.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <h3 style={{
+          marginBottom: '16px'
+        }}>Analytics Dashboard</h3>
+                    <Tabs value="overview">
+                        <Tabs.Item value="overview">Overview</Tabs.Item>
+                        <Tabs.Item value="users">Users</Tabs.Item>
+                        <Tabs.Item value="revenue">Revenue</Tabs.Item>
+                        <Tabs.Item value="performance">Performance</Tabs.Item>
+                        <Tabs.Item value="settings">Settings</Tabs.Item>
+
+                        <Tabs.Content value="overview">
+                            <div style={{
+              padding: '20px'
+            }}>
+                                <h4>Dashboard Overview</h4>
+                                <p>Key metrics and summary information for your application.</p>
+                                <div style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+                gap: '16px',
+                marginTop: '16px'
+              }}>
+                                    <div style={{
+                  background: 'var(--xyd-bgcolor-secondary)',
+                  padding: '16px',
+                  borderRadius: '8px',
+                  textAlign: 'center'
+                }}>
+                                        <h5>Total Users</h5>
+                                        <p style={{
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    margin: 0
+                  }}>12,345</p>
+                                    </div>
+                                    <div style={{
+                  background: 'var(--xyd-bgcolor-secondary)',
+                  padding: '16px',
+                  borderRadius: '8px',
+                  textAlign: 'center'
+                }}>
+                                        <h5>Active Sessions</h5>
+                                        <p style={{
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    margin: 0
+                  }}>1,234</p>
+                                    </div>
+                                    <div style={{
+                  background: 'var(--xyd-bgcolor-secondary)',
+                  padding: '16px',
+                  borderRadius: '8px',
+                  textAlign: 'center'
+                }}>
+                                        <h5>Revenue</h5>
+                                        <p style={{
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    margin: 0
+                  }}>$45,678</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </Tabs.Content>
+                        <Tabs.Content value="users">
+                            <div style={{
+              padding: '20px'
+            }}>
+                                <h4>User Analytics</h4>
+                                <p>Detailed user behavior and engagement metrics.</p>
+                                <ul>
+                                    <li>User acquisition trends</li>
+                                    <li>Engagement metrics</li>
+                                    <li>Retention analysis</li>
+                                    <li>User segmentation</li>
+                                </ul>
+                            </div>
+                        </Tabs.Content>
+                        <Tabs.Content value="revenue">
+                            <div style={{
+              padding: '20px'
+            }}>
+                                <h4>Revenue Analytics</h4>
+                                <p>Financial metrics and revenue tracking.</p>
+                                <ul>
+                                    <li>Monthly recurring revenue</li>
+                                    <li>Customer lifetime value</li>
+                                    <li>Churn rate analysis</li>
+                                    <li>Pricing optimization</li>
+                                </ul>
+                            </div>
+                        </Tabs.Content>
+                        <Tabs.Content value="performance">
+                            <div style={{
+              padding: '20px'
+            }}>
+                                <h4>System Performance</h4>
+                                <p>Application performance and system health metrics.</p>
+                                <ul>
+                                    <li>Response time monitoring</li>
+                                    <li>Error rate tracking</li>
+                                    <li>Resource utilization</li>
+                                    <li>Uptime statistics</li>
+                                </ul>
+                            </div>
+                        </Tabs.Content>
+                        <Tabs.Content value="settings">
+                            <div style={{
+              padding: '20px'
+            }}>
+                                <h4>Dashboard Settings</h4>
+                                <p>Configure your dashboard preferences and display options.</p>
+                                <ul>
+                                    <li>Widget customization</li>
+                                    <li>Theme selection</li>
+                                    <li>Notification preferences</li>
+                                    <li>Data refresh intervals</li>
+                                </ul>
+                            </div>
+                        </Tabs.Content>
+                    </Tabs>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Product Documentation</h2>
+                <p>Tabs are perfect for organizing product documentation and user guides.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <h3 style={{
+          marginBottom: '16px'
+        }}>API Documentation</h3>
+                    <Tabs value="getting-started">
+                        <Tabs.Item value="getting-started">Getting Started</Tabs.Item>
+                        <Tabs.Item value="authentication">Authentication</Tabs.Item>
+                        <Tabs.Item value="endpoints">Endpoints</Tabs.Item>
+                        <Tabs.Item value="examples">Examples</Tabs.Item>
+                        <Tabs.Item value="sdks">SDKs</Tabs.Item>
+
+                        <Tabs.Content value="getting-started">
+                            <div style={{
+              padding: '20px'
+            }}>
+                                <h4>Quick Start Guide</h4>
+                                <p>Get up and running with our API in minutes.</p>
+                                <ol>
+                                    <li>Sign up for an API key</li>
+                                    <li>Install the SDK</li>
+                                    <li>Make your first request</li>
+                                    <li>Explore the documentation</li>
+                                </ol>
+                            </div>
+                        </Tabs.Content>
+                        <Tabs.Content value="authentication">
+                            <div style={{
+              padding: '20px'
+            }}>
+                                <h4>API Authentication</h4>
+                                <p>Learn how to authenticate your API requests.</p>
+                                <pre style={{
+                background: 'var(--xyd-bgcolor-secondary)',
+                padding: '12px',
+                borderRadius: '4px',
+                fontSize: '14px'
+              }}>
+                                    <code>{\`curl -H "Authorization: Bearer YOUR_API_KEY" \\\\
+  https://api.example.com/v1/data\`}</code>
+                                </pre>
+                            </div>
+                        </Tabs.Content>
+                        <Tabs.Content value="endpoints">
+                            <div style={{
+              padding: '20px'
+            }}>
+                                <h4>API Endpoints</h4>
+                                <p>Complete reference of all available API endpoints.</p>
+                                <ul>
+                                    <li>GET /users - List users</li>
+                                    <li>POST /users - Create user</li>
+                                    <li>PUT /users/{'{id}'} - Update user</li>
+                                    <li>DELETE /users/{'{id}'} - Delete user</li>
+                                </ul>
+                            </div>
+                        </Tabs.Content>
+                        <Tabs.Content value="examples">
+                            <div style={{
+              padding: '20px'
+            }}>
+                                <h4>Code Examples</h4>
+                                <p>Real-world examples in multiple programming languages.</p>
+                                <ul>
+                                    <li>JavaScript/Node.js examples</li>
+                                    <li>Python examples</li>
+                                    <li>PHP examples</li>
+                                    <li>cURL examples</li>
+                                </ul>
+                            </div>
+                        </Tabs.Content>
+                        <Tabs.Content value="sdks">
+                            <div style={{
+              padding: '20px'
+            }}>
+                                <h4>Software Development Kits</h4>
+                                <p>Official SDKs for popular programming languages.</p>
+                                <ul>
+                                    <li>JavaScript SDK</li>
+                                    <li>Python SDK</li>
+                                    <li>PHP SDK</li>
+                                    <li>Ruby SDK</li>
+                                </ul>
+                            </div>
+                        </Tabs.Content>
+                    </Tabs>
+                </div>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows how Tabs components are typically used in real applications.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.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'
+      }}>Tabs Component Demo</h3>
+                <p style={{
+        marginBottom: '16px',
+        color: 'var(--xyd-text-color)'
+      }}>
+                    This example demonstrates the Tabs component with various content types and interactive features.
+                </p>
+                <Tabs value="features">
+                    <Tabs.Item value="features">Features</Tabs.Item>
+                    <Tabs.Item value="implementation">Implementation</Tabs.Item>
+                    <Tabs.Item value="customization">Customization</Tabs.Item>
+
+                    <Tabs.Content value="features">
+                        <div style={{
+            padding: '20px'
+          }}>
+                            <h4>Key Features</h4>
+                            <ul style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                <li>Horizontal scrolling for many tabs</li>
+                                <li>Arrow navigation when tabs overflow</li>
+                                <li>Accessible keyboard navigation</li>
+                                <li>Customizable styling</li>
+                                <li>Rich content support</li>
+                                <li>Responsive design</li>
+                            </ul>
+                        </div>
+                    </Tabs.Content>
+                    <Tabs.Content value="implementation">
+                        <div style={{
+            padding: '20px'
+          }}>
+                            <h4>Implementation Details</h4>
+                            <p style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                The Tabs component is built using Radix UI primitives for accessibility and 
+                                includes custom scrolling behavior for handling many tabs efficiently.
+                            </p>
+                            <pre style={{
+              background: 'var(--xyd-bgcolor-secondary)',
+              padding: '12px',
+              borderRadius: '4px',
+              fontSize: '14px',
+              marginTop: '16px'
+            }}>
+                                <code>{\`// Basic usage
+<Tabs value="tab1">
+  <Tabs.Item value="tab1">Tab 1</Tabs.Item>
+  <Tabs.Item value="tab2">Tab 2</Tabs.Item>
+  <Tabs.Content value="tab1">Content 1</Tabs.Content>
+  <Tabs.Content value="tab2">Content 2</Tabs.Content>
+</Tabs>\`}</code>
+                            </pre>
+                        </div>
+                    </Tabs.Content>
+                    <Tabs.Content value="customization">
+                        <div style={{
+            padding: '20px'
+          }}>
+                            <h4>Customization Options</h4>
+                            <p style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                The component supports various customization options through props and CSS classes.
+                            </p>
+                            <ul style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                <li><code>value</code> - Set active tab</li>
+                                <li><code>onChange</code> - Handle tab changes</li>
+                                <li><code>className</code> - Add custom CSS classes</li>
+                                <li><code>kind</code> - Choose variant (default/secondary)</li>
+                                <li>CSS custom properties for theming</li>
+                            </ul>
+                        </div>
+                    </Tabs.Content>
+                </Tabs>
+            </div>
+
+            <div style={{
+      background: 'var(--xyd-bgcolor)',
+      border: '1px solid var(--xyd-border-color)',
+      borderRadius: '8px',
+      padding: '20px'
+    }}>
+                <h4 style={{
+        marginBottom: '12px'
+      }}>Usage Guidelines</h4>
+                <ul style={{
+        color: 'var(--xyd-text-color)'
+      }}>
+                    <li>Use for organizing related content into sections</li>
+                    <li>Keep tab labels short and descriptive</li>
+                    <li>Ensure each tab has meaningful content</li>
+                    <li>Consider mobile responsiveness</li>
+                    <li>Test with many tabs for scrolling behavior</li>
+                    <li>Use href prop for navigation when needed</li>
+                </ul>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This interactive example demonstrates the Tabs component functionality and customization options.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h3 style={{
+        marginBottom: '16px',
+        color: '#666'
+      }}>Primary Tabs (Default)</h3>
+                <Tabs value="tab1">
+                    <Tabs.Item value="tab1">First Tab</Tabs.Item>
+                    <Tabs.Item value="tab2">Second Tab</Tabs.Item>
+                    <Tabs.Item value="tab3">Third Tab</Tabs.Item>
+
+                    <Tabs.Content value="tab1">
+                        <div style={{
+            padding: '20px'
+          }}>
+                            <h4>Primary Tab Content</h4>
+                            <p>This is the primary variant with default styling.</p>
+                        </div>
+                    </Tabs.Content>
+                    <Tabs.Content value="tab2">
+                        <div style={{
+            padding: '20px'
+          }}>
+                            <h4>Second Tab</h4>
+                            <p>Content for the second tab.</p>
+                        </div>
+                    </Tabs.Content>
+                    <Tabs.Content value="tab3">
+                        <div style={{
+            padding: '20px'
+          }}>
+                            <h4>Third Tab</h4>
+                            <p>Content for the third tab.</p>
+                        </div>
+                    </Tabs.Content>
+                </Tabs>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h3 style={{
+        marginBottom: '16px',
+        color: '#666'
+      }}>Secondary Tabs</h3>
+                <Tabs value="tab1" kind="secondary">
+                    <Tabs.Item value="tab1">First Tab</Tabs.Item>
+                    <Tabs.Item value="tab2">Second Tab</Tabs.Item>
+                    <Tabs.Item value="tab3">Third Tab</Tabs.Item>
+
+                    <Tabs.Content value="tab1">
+                        <div style={{
+            padding: '20px'
+          }}>
+                            <h4>Secondary Tab Content</h4>
+                            <p>This is the secondary variant with different styling.</p>
+                        </div>
+                    </Tabs.Content>
+                    <Tabs.Content value="tab2">
+                        <div style={{
+            padding: '20px'
+          }}>
+                            <h4>Second Tab</h4>
+                            <p>Content for the second tab.</p>
+                        </div>
+                    </Tabs.Content>
+                    <Tabs.Content value="tab3">
+                        <div style={{
+            padding: '20px'
+          }}>
+                            <h4>Third Tab</h4>
+                            <p>Content for the third tab.</p>
+                        </div>
+                    </Tabs.Content>
+                </Tabs>
+            </div>
+
+            <div style={{
+      background: 'var(--xyd-bgcolor)',
+      border: '1px solid var(--xyd-border-color)',
+      borderRadius: '8px',
+      padding: '20px'
+    }}>
+                <h4 style={{
+        marginBottom: '12px'
+      }}>Key Differences</h4>
+                <ul style={{
+        color: 'var(--xyd-text-color)'
+      }}>
+                    <li><strong>Primary:</strong> Default styling with underline indicator</li>
+                    <li><strong>Secondary:</strong> Different visual styling and behavior</li>
+                    <li><strong>Use Primary:</strong> For general content organization</li>
+                    <li><strong>Use Secondary:</strong> For specific use cases requiring different styling</li>
+                </ul>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example compares the primary and secondary variants of the Tabs component.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};const j=["Default","Secondary","ManyTabs","WithLinks","RealWorldExamples","Interactive","PrimaryVsSecondary"];export{i as Default,l as Interactive,n as ManyTabs,d as PrimaryVsSecondary,r as RealWorldExamples,s as Secondary,a as WithLinks,j as __namedExportsOrder,g as default};