import{j as e}from"./ui-vendor-Dyu0xMC9.js";import{r as s}from"./react-vendor-BiKEbLqf.js";import{H as a,B as n}from"./button-F0c2zgfO.js";import{H as l,w as d,F as t,C as c}from"./Footer-BCdrvFQr.js";import{B as i}from"./badge-rRfUgTqY.js";import{C as r,d as o,a as x,b as m,c as h,e as p}from"./card-D8XUAx1y.js";import{T as j,a as g,b as u,c as v}from"./tabs-D_pSg_j8.js";import{L as b,I as N}from"./client-Ccea0ZZ8.js";import{c as f}from"./index-D2mkZfe8.js";import{C as y,R as w,P as C,T as k,a as B}from"./type-CwXo1rEK.js";import{P as S}from"./package-BqnsG66Z.js";import{A as D}from"./arrow-right-BJutILxB.js";import{C as L}from"./copy-Blvh5_7n.js";import"./chart-vendor-V3pFlbOw.js";import"./chevron-right-9d459eh4.js";const T=[{token:"xs",value:"8px (0.5rem)",classes:"space-xs, p-xs, gap-xs",use:"Tight spacing, badges, icon gaps"},{token:"sm",value:"12px (0.75rem)",classes:"space-sm, p-sm, gap-sm",use:"Small gaps, compact layouts"},{token:"md",value:"16px (1rem)",classes:"space-md, p-md, gap-md",use:"Default spacing, form fields"},{token:"lg",value:"24px (1.5rem)",classes:"space-lg, p-lg, gap-lg",use:"Comfortable spacing, card padding"},{token:"xl",value:"32px (2rem)",classes:"space-xl, p-xl, gap-xl",use:"Generous spacing, section gaps"},{token:"2xl",value:"48px (3rem)",classes:"space-2xl, p-2xl, gap-2xl",use:"Large spacing, between sections"},{token:"3xl",value:"64px (4rem)",classes:"space-3xl, p-3xl, gap-3xl",use:"Extra large, hero sections"},{token:"4xl",value:"96px (6rem)",classes:"space-4xl, p-4xl, gap-4xl",use:"Section padding vertical"}],I=[{name:"section-padding-y",value:"96px",use:"Vertical padding for major sections"},{name:"section-padding-x",value:"24px",use:"Horizontal padding for sections"},{name:"container-padding",value:"Responsive",use:"Container side padding (24-64px)"},{name:"card-padding",value:"24px",use:"Internal card spacing"},{name:"component-gap",value:"32px",use:"Space between related components"},{name:"element-gap",value:"16px",use:"Space between UI elements"}],z=[{name:"background",desc:"Page background",preview:"bg-background"},{name:"foreground",desc:"Text on background",preview:"bg-foreground"},{name:"primary",desc:"Main brand color",preview:"bg-primary"},{name:"primary-foreground",desc:"Text on primary",preview:"bg-primary-foreground"},{name:"secondary",desc:"Secondary UI surface",preview:"bg-secondary"},{name:"muted",desc:"Muted surfaces",preview:"bg-muted"},{name:"muted-foreground",desc:"Muted text",preview:"bg-muted-foreground"},{name:"accent",desc:"Accent color",preview:"bg-accent"},{name:"border",desc:"Border color",preview:"bg-border"},{name:"data-teal",desc:"Brand teal",preview:"bg-data-teal"},{name:"data-orange",desc:"Brand orange",preview:"bg-data-orange"},{name:"data-blue",desc:"Brand blue",preview:"bg-data-blue"}],P=({code:a,language:l="tsx"})=>{const[d,t]=s.useState(!1);return e.jsxs("div",{className:"relative",children:[e.jsx(n,{size:"icon",variant:"ghost",className:"absolute top-2 right-2 h-8 w-8",onClick:()=>{navigator.clipboard.writeText(a),t(!0),setTimeout(()=>t(!1),2e3)},children:d?e.jsx(c,{className:"h-4 w-4"}):e.jsx(L,{className:"h-4 w-4"})}),e.jsx("pre",{className:"bg-muted p-lg rounded-lg overflow-x-auto text-sm",children:e.jsx("code",{className:"text-foreground",children:a})})]})};function H(){return e.jsxs("div",{className:"min-h-screen bg-background",children:[e.jsxs(a,{children:[e.jsx("title",{children:"Component Library | Design System Documentation | Allerin"}),e.jsx("meta",{name:"description",content:"Comprehensive component library documentation with unified spacing system and interactive examples."}),e.jsx("link",{rel:"canonical",href:"https://www.allerin.com/component-library"})]}),e.jsx(l,{}),e.jsxs("main",{children:[e.jsx("section",{className:"py-section-y bg-gradient-hero border-b border-outline/20",children:e.jsx("div",{className:"container",children:e.jsxs("div",{className:"max-w-4xl",children:[e.jsxs(i,{className:"mb-lg",children:[e.jsx(y,{className:"mr-2 h-3 w-3"}),"Design System"]}),e.jsx("h1",{className:"text-5xl font-bold text-foreground mb-xl",children:"Component Library"}),e.jsx("p",{className:"text-xl text-muted-foreground mb-2xl",children:"Comprehensive documentation for our unified spacing system, components, and design tokens. Built for consistency, maintainability, and developer productivity."}),e.jsxs("div",{className:"flex flex-wrap gap-lg",children:[e.jsxs(n,{size:"lg",children:[e.jsx(S,{className:"mr-2 h-4 w-4"}),"View Components"]}),e.jsxs(n,{size:"lg",variant:"outline",children:[e.jsx(w,{className:"mr-2 h-4 w-4"}),"Spacing System"]})]})]})})}),e.jsx("section",{className:"py-4xl bg-background",children:e.jsx("div",{className:"container",children:e.jsxs(j,{defaultValue:"spacing",className:"w-full",children:[e.jsxs(g,{className:"grid w-full grid-cols-2 md:grid-cols-5 mb-2xl",children:[e.jsxs(u,{value:"spacing",children:[e.jsx(w,{className:"mr-2 h-4 w-4"}),"Spacing"]}),e.jsxs(u,{value:"colors",children:[e.jsx(C,{className:"mr-2 h-4 w-4"}),"Colors"]}),e.jsxs(u,{value:"typography",children:[e.jsx(k,{className:"mr-2 h-4 w-4"}),"Typography"]}),e.jsxs(u,{value:"components",children:[e.jsx(S,{className:"mr-2 h-4 w-4"}),"Components"]}),e.jsxs(u,{value:"layouts",children:[e.jsx(B,{className:"mr-2 h-4 w-4"}),"Layouts"]})]}),e.jsx(v,{value:"spacing",className:"space-y-3xl",children:e.jsxs("div",{children:[e.jsx("h2",{className:"text-3xl font-bold mb-lg",children:"Unified Spacing System"}),e.jsx("p",{className:"text-lg text-muted-foreground mb-2xl",children:"Built on a 4px base unit for consistent, semantic spacing across all components."}),e.jsxs("div",{className:"mb-3xl",children:[e.jsx("h3",{className:"text-2xl font-bold mb-xl",children:"Base Spacing Scale"}),e.jsx("div",{className:"grid gap-lg",children:T.map(s=>e.jsx(r,{children:e.jsxs(o,{className:"p-lg",children:[e.jsxs("div",{className:"grid md:grid-cols-4 gap-lg items-center",children:[e.jsxs("div",{children:[e.jsx("div",{className:"font-mono text-sm text-muted-foreground",children:"Token"}),e.jsx("div",{className:"font-bold text-data-teal",children:s.token})]}),e.jsxs("div",{children:[e.jsx("div",{className:"font-mono text-sm text-muted-foreground",children:"Value"}),e.jsx("div",{className:"font-semibold",children:s.value})]}),e.jsxs("div",{children:[e.jsx("div",{className:"font-mono text-sm text-muted-foreground",children:"Classes"}),e.jsx("code",{className:"text-xs bg-muted px-2 py-1 rounded",children:s.classes})]}),e.jsx("div",{children:e.jsx("div",{className:"h-8 rounded bg-gradient-to-r from-data-teal to-data-blue",style:{width:s.value.split("(")[0].trim()}})})]}),e.jsx("div",{className:"mt-lg pt-lg border-t",children:e.jsxs("div",{className:"text-sm text-muted-foreground",children:["Use case: ",s.use]})})]})},s.token))})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-2xl font-bold mb-xl",children:"Semantic Layout Tokens"}),e.jsx("div",{className:"grid md:grid-cols-2 gap-lg",children:I.map(s=>e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsxs(m,{className:"text-lg font-mono",children:["--",s.name]}),e.jsx(h,{children:s.use})]}),e.jsx(o,{children:e.jsx("div",{className:"text-sm font-semibold text-data-teal",children:s.value})})]},s.name))})]}),e.jsxs("div",{className:"mt-3xl",children:[e.jsx("h3",{className:"text-2xl font-bold mb-xl",children:"Usage Examples"}),e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsx(m,{children:"Section Pattern"}),e.jsx(h,{children:"Standard page section with semantic spacing"})]}),e.jsxs(o,{className:"space-y-lg",children:[e.jsx(P,{code:'<section className="py-section-y">\n  <div className="container">\n    <div className="max-w-4xl mx-auto space-y-xl">\n      {/* Content */}\n    </div>\n  </div>\n</section>'}),e.jsx("div",{className:"p-2xl bg-surface/30 rounded-lg",children:e.jsx("div",{className:"bg-data-teal/10 border-2 border-dashed border-data-teal rounded p-xl",children:e.jsx("p",{className:"text-center text-sm text-muted-foreground",children:"Live Preview: Section with py-section-y"})})})]})]})]})]})}),e.jsx(v,{value:"colors",className:"space-y-3xl",children:e.jsxs("div",{children:[e.jsx("h2",{className:"text-3xl font-bold mb-lg",children:"Color System"}),e.jsx("p",{className:"text-lg text-muted-foreground mb-2xl",children:"Semantic color tokens using HSL format for consistent theming."}),e.jsx("div",{className:"grid md:grid-cols-2 lg:grid-cols-3 gap-lg",children:z.map(s=>e.jsx(r,{children:e.jsxs(o,{className:"p-lg",children:[e.jsx("div",{className:f("h-24 rounded-lg mb-lg",s.preview)}),e.jsxs("div",{className:"space-y-xs",children:[e.jsx("div",{className:"font-mono text-sm font-bold",children:s.name}),e.jsx("div",{className:"text-sm text-muted-foreground",children:s.desc}),e.jsxs("code",{className:"text-xs bg-muted px-2 py-1 rounded block",children:['className="',s.preview,'"']})]})]})},s.name))}),e.jsx("div",{className:"mt-3xl",children:e.jsxs(r,{children:[e.jsx(x,{children:e.jsx(m,{children:"Best Practices"})}),e.jsxs(o,{className:"space-y-lg",children:[e.jsxs("div",{className:"space-y-sm",children:[e.jsx("h4",{className:"font-semibold text-sm",children:"✅ DO"}),e.jsx(P,{code:'// Use semantic tokens\n<div className="bg-background text-foreground">\n  <Button className="bg-primary text-primary-foreground">\n    Click me\n  </Button>\n</div>'})]}),e.jsxs("div",{className:"space-y-sm",children:[e.jsx("h4",{className:"font-semibold text-sm",children:"❌ DON'T"}),e.jsx(P,{code:'// Avoid hardcoded colors\n<div className="bg-white text-black">\n  <Button className="bg-blue-500 text-white">\n    Click me\n  </Button>\n</div>'})]})]})]})})]})}),e.jsx(v,{value:"typography",className:"space-y-3xl",children:e.jsxs("div",{children:[e.jsx("h2",{className:"text-3xl font-bold mb-lg",children:"Typography"}),e.jsx("p",{className:"text-lg text-muted-foreground mb-2xl",children:"Consistent type scale for hierarchy and readability."}),e.jsx(r,{children:e.jsxs(o,{className:"p-2xl space-y-2xl",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-5xl font-bold mb-sm",children:"Heading 1"}),e.jsx("code",{className:"text-xs bg-muted px-2 py-1 rounded",children:"text-5xl font-bold"})]}),e.jsx(d,{}),e.jsxs("div",{children:[e.jsx("h2",{className:"text-4xl font-bold mb-sm",children:"Heading 2"}),e.jsx("code",{className:"text-xs bg-muted px-2 py-1 rounded",children:"text-4xl font-bold"})]}),e.jsx(d,{}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-3xl font-bold mb-sm",children:"Heading 3"}),e.jsx("code",{className:"text-xs bg-muted px-2 py-1 rounded",children:"text-3xl font-bold"})]}),e.jsx(d,{}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-2xl font-bold mb-sm",children:"Heading 4"}),e.jsx("code",{className:"text-xs bg-muted px-2 py-1 rounded",children:"text-2xl font-bold"})]}),e.jsx(d,{}),e.jsxs("div",{children:[e.jsx("p",{className:"text-lg mb-sm",children:"Body Large - Used for hero subtitles and important text"}),e.jsx("code",{className:"text-xs bg-muted px-2 py-1 rounded",children:"text-lg"})]}),e.jsx(d,{}),e.jsxs("div",{children:[e.jsx("p",{className:"text-base mb-sm",children:"Body - Default text size for most content"}),e.jsx("code",{className:"text-xs bg-muted px-2 py-1 rounded",children:"text-base"})]}),e.jsx(d,{}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm mb-sm",children:"Small - Used for supporting text and captions"}),e.jsx("code",{className:"text-xs bg-muted px-2 py-1 rounded",children:"text-sm"})]}),e.jsx(d,{}),e.jsxs("div",{children:[e.jsx("p",{className:"text-xs mb-sm",children:"Extra Small - Used for labels and metadata"}),e.jsx("code",{className:"text-xs bg-muted px-2 py-1 rounded",children:"text-xs"})]})]})})]})}),e.jsx(v,{value:"components",className:"space-y-3xl",children:e.jsxs("div",{children:[e.jsx("h2",{className:"text-3xl font-bold mb-lg",children:"UI Components"}),e.jsx("p",{className:"text-lg text-muted-foreground mb-2xl",children:"Reusable components with consistent spacing and styling."}),e.jsxs("div",{className:"space-y-xl",children:[e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsx(m,{children:"Buttons"}),e.jsx(h,{children:"Various button variants and sizes"})]}),e.jsxs(o,{className:"space-y-2xl",children:[e.jsxs("div",{className:"space-y-lg",children:[e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold mb-lg",children:"Variants"}),e.jsxs("div",{className:"flex flex-wrap gap-lg",children:[e.jsx(n,{children:"Default"}),e.jsx(n,{variant:"secondary",children:"Secondary"}),e.jsx(n,{variant:"outline",children:"Outline"}),e.jsx(n,{variant:"ghost",children:"Ghost"}),e.jsx(n,{variant:"destructive",children:"Destructive"}),e.jsx(n,{variant:"link",children:"Link"})]})]}),e.jsx(d,{}),e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold mb-lg",children:"Sizes"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-lg",children:[e.jsx(n,{size:"sm",children:"Small"}),e.jsx(n,{size:"default",children:"Default"}),e.jsx(n,{size:"lg",children:"Large"})]})]}),e.jsx(d,{}),e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold mb-lg",children:"With Icons"}),e.jsxs("div",{className:"flex flex-wrap gap-lg",children:[e.jsxs(n,{children:[e.jsx(D,{className:"mr-2 h-4 w-4"}),"With Icon"]}),e.jsxs(n,{variant:"outline",children:["Learn More",e.jsx(D,{className:"ml-2 h-4 w-4"})]})]})]})]}),e.jsx(P,{code:'<Button>Default</Button>\n<Button variant="outline">Outline</Button>\n<Button size="lg">Large</Button>\n<Button>\n  <ArrowRight className="mr-2 h-4 w-4" />\n  With Icon\n</Button>'})]})]}),e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsx(m,{children:"Badges"}),e.jsx(h,{children:"Labels and tags for content"})]}),e.jsxs(o,{className:"space-y-2xl",children:[e.jsxs("div",{className:"flex flex-wrap gap-lg",children:[e.jsx(i,{children:"Default"}),e.jsx(i,{variant:"secondary",children:"Secondary"}),e.jsx(i,{variant:"outline",children:"Outline"}),e.jsx(i,{variant:"destructive",children:"Destructive"})]}),e.jsx(P,{code:'<Badge>Default</Badge>\n<Badge variant="secondary">Secondary</Badge>\n<Badge variant="outline">Outline</Badge>'})]})]}),e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsx(m,{children:"Cards"}),e.jsx(h,{children:"Container components with unified spacing"})]}),e.jsxs(o,{className:"space-y-2xl",children:[e.jsxs("div",{className:"grid md:grid-cols-2 gap-xl",children:[e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsx(m,{children:"Card Title"}),e.jsx(h,{children:"Card description goes here"})]}),e.jsx(o,{children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"This is the card content area. Notice the consistent spacing using p-lg."})}),e.jsx(p,{children:e.jsx(n,{className:"w-full",children:"Action"})})]}),e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsx(m,{children:"With Badge"}),e.jsxs(h,{children:[e.jsx(i,{className:"mr-2",children:"New"}),"Enhanced card"]})]}),e.jsx(o,{children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"Cards use semantic spacing tokens for consistent padding."})})]})]}),e.jsx(P,{code:"<Card>\n  <CardHeader>\n    <CardTitle>Card Title</CardTitle>\n    <CardDescription>Description</CardDescription>\n  </CardHeader>\n  <CardContent>\n    {/* Content uses p-lg by default */}\n  </CardContent>\n  <CardFooter>\n    <Button>Action</Button>\n  </CardFooter>\n</Card>"})]})]}),e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsx(m,{children:"Form Elements"}),e.jsx(h,{children:"Inputs and form controls"})]}),e.jsx(o,{className:"space-y-2xl",children:e.jsxs("div",{className:"grid md:grid-cols-2 gap-xl",children:[e.jsxs("div",{className:"space-y-lg",children:[e.jsxs("div",{children:[e.jsx(b,{htmlFor:"name",children:"Name"}),e.jsx(N,{id:"name",placeholder:"Enter your name",className:"mt-xs"})]}),e.jsxs("div",{children:[e.jsx(b,{htmlFor:"email",children:"Email"}),e.jsx(N,{id:"email",type:"email",placeholder:"you@example.com",className:"mt-xs"})]})]}),e.jsx("div",{children:e.jsx(P,{code:'<div className="space-y-lg">\n  <div>\n    <Label htmlFor="name">Name</Label>\n    <Input id="name" className="mt-xs" />\n  </div>\n</div>'})})]})})]})]})]})}),e.jsx(v,{value:"layouts",className:"space-y-3xl",children:e.jsxs("div",{children:[e.jsx("h2",{className:"text-3xl font-bold mb-lg",children:"Layout Patterns"}),e.jsx("p",{className:"text-lg text-muted-foreground mb-2xl",children:"Common layout patterns using the unified spacing system."}),e.jsxs("div",{className:"space-y-xl",children:[e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsx(m,{children:"Container Pattern"}),e.jsx(h,{children:"Responsive container with automatic padding"})]}),e.jsxs(o,{className:"space-y-lg",children:[e.jsx("div",{className:"bg-muted p-2xl rounded-lg",children:e.jsx("div",{className:"container bg-data-teal/10 border-2 border-dashed border-data-teal rounded p-xl",children:e.jsx("p",{className:"text-center text-sm",children:"Container with responsive padding"})})}),e.jsx(P,{code:'<div className="container">\n  {/* Automatically responsive padding */}\n  {/* 24px → 64px based on breakpoint */}\n</div>'})]})]}),e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsx(m,{children:"Section Pattern"}),e.jsx(h,{children:"Major page section with vertical padding"})]}),e.jsxs(o,{className:"space-y-lg",children:[e.jsx("div",{className:"bg-muted p-xl rounded-lg",children:e.jsx("div",{className:"bg-data-orange/10 border-2 border-dashed border-data-orange rounded",children:e.jsx("div",{className:"py-section-y px-lg",children:e.jsx("p",{className:"text-center text-sm",children:"Section with py-section-y (96px)"})})})}),e.jsx(P,{code:'<section className="py-section-y">\n  <div className="container">\n    <div className="max-w-4xl mx-auto space-y-xl">\n      {/* Content */}\n    </div>\n  </div>\n</section>'})]})]}),e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsx(m,{children:"Grid Pattern"}),e.jsx(h,{children:"Multi-column layouts with consistent gaps"})]}),e.jsxs(o,{className:"space-y-lg",children:[e.jsx("div",{className:"grid md:grid-cols-3 gap-xl",children:[1,2,3].map(s=>e.jsx("div",{className:"bg-data-blue/10 border-2 border-dashed border-data-blue rounded p-xl",children:e.jsxs("p",{className:"text-center text-sm",children:["Item ",s]})},s))}),e.jsx(P,{code:'<div className="grid md:grid-cols-3 gap-xl">\n  <div>Item 1</div>\n  <div>Item 2</div>\n  <div>Item 3</div>\n</div>'})]})]}),e.jsxs(r,{children:[e.jsxs(x,{children:[e.jsx(m,{children:"Stack Pattern"}),e.jsx(h,{children:"Vertical component spacing"})]}),e.jsxs(o,{className:"space-y-lg",children:[e.jsx("div",{className:"space-y-xl bg-muted p-xl rounded-lg",children:[1,2,3].map(s=>e.jsx("div",{className:"bg-data-teal/10 border-2 border-dashed border-data-teal rounded p-lg",children:e.jsxs("p",{className:"text-center text-sm",children:["Component ",s]})},s))}),e.jsx(P,{code:'<div className="space-y-xl">\n  <Component1 />\n  <Component2 />\n  <Component3 />\n</div>'})]})]})]})]})})]})})}),e.jsx("section",{className:"py-section-y bg-surface/30",children:e.jsxs("div",{className:"container max-w-3xl text-center",children:[e.jsx("h2",{className:"text-3xl md:text-4xl font-bold mb-xl",children:"Ready to build with our system?"}),e.jsx("p",{className:"text-lg text-muted-foreground mb-2xl",children:"All components and tokens are available in your codebase. Start building consistent, maintainable interfaces today."}),e.jsxs("div",{className:"flex flex-wrap gap-lg justify-center",children:[e.jsxs(n,{size:"lg",children:["View Source Code",e.jsx(y,{className:"ml-2 h-4 w-4"})]}),e.jsx(n,{size:"lg",variant:"outline",children:"Read Documentation"})]})]})})]}),e.jsx(t,{})]})}export{H as default};