https://eznity.ai/assets/DesignSystem-D2W6IEAj.js

1import{r as t,j as e,S as i}from"./index-CtzJrn0d.js";import{S as d}from"./meta-details-_XPuxHqK.js";const n=["Colors","Typography","Components","Usage Examples"],b=()=>{const[l,r]=t.useState("Colors");return e.jsxs(e.Fragment,{children:[e.jsx(i,{...d.designSystem}),e.jsxs("div",{style:{backgroundColor:"var(--color-bg-dark)",color:"var(--color-text-main)",minHeight:"100vh",fontFamily:"var(--font-main)",position:"relative"},children:[e.jsx("div",{style:{position:"sticky",top:0,zIndex:100,backgroundColor:"var(--color-navbar-bg)",borderBottom:"1px solid var(--color-navbar-border)",backdropFilter:"blur(10px)",padding:"20px 24px 0 24px"},children:e.jsxs("div",{style:{maxWidth:"var(--container-width)",margin:"0 auto"},children:[e.jsx("h1",{style:{fontSize:"24px",fontWeight:"700",marginBottom:"20px",letterSpacing:"-0.02em"},children:"Design System"}),e.jsx("div",{style:{display:"flex",gap:"32px"},children:n.map(o=>e.jsx("button",{onClick:()=>r(o),style:{background:"none",border:"none",padding:"0 0 16px 0",fontSize:"14px",fontWeight:"500",color:l===o?"var(--color-primary)":"var(--color-text-muted)",borderBottom:l===o?"2px solid var(--color-primary)":"2px solid transparent",cursor:"pointer",transition:"all 0.2s ease"},children:o},o))})]})}),e.jsxs("div",{style:{maxWidth:"var(--container-width)",margin:"0 auto",padding:"48px 24px 120px"},children:[l==="Colors"&&e.jsx(s,{}),l==="Typography"&&e.jsx(c,{}),l==="Components"&&e.jsx(x,{}),l==="Usage Examples"&&e.jsx(p,{})]})]})]})},s=()=>{const l=[{title:"Backgrounds",tokens:[{name:"--color-bg-dark",label:"Page Background"},{name:"--color-bg-card",label:"Card Background"},{name:"--color-bg-card-hover",label:"Card Hover"}

1,{name:"--color-navbar-bg",label:"Navbar Background"}]},{title:"Brand & Accents",tokens:[{name:"--color-primary",label:"Primary Brand"},{name:"--color-primary-glow",label:"Primary Glow (Alpha)"},{name:"--color-accent",label:"Accent / Live"},{name:"--color-accent-glow",label:"Accent Glow (Alpha)"}]},{title:"Text",tokens:[{name:"--color-text-main",label:"Primary Text (Headings)"},{name:"--color-text-muted",label:"Muted Text (Body)"},{name:"--color-text-on-dark",label:"Text on Dark"},{name:"--color-text-inverse",label:"Text Inverse"}]},{title:"Borders & Overlays",tokens:[{name:"--color-border",label:"Default Border"},{name:"--color-border-hover",label:"Hover Border"},{name:"--color-bg-overlay",label:"Overlay"},{name:"--color-navbar-border",label:"Navbar Border"}]},{title:"Lighting Effects",tokens:[{name:"--glow-stage-blue",label:"Stage Blue"},{name:"--glow-stage-purple",label:"Stage Purple"}]}];return e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"48px"},children:l.map(r=>e.jsxs("div",{children:[e.jsx("h2",{style:{fontSize:"18px",marginBottom:"24px",color:"var(--color-text-main)"},children:r.title}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(240px, 1fr))",gap:"24px"},children:r.tokens.map(o=>e.jsxs("div",{style:{backgroundColor:"var(--color-bg-card)",border:"1px solid var(--color-border)",borderRadius:"12px",overflow:"hidden"},children:[e.jsx("div",{style:{height:"120px",backgroundColor:`var(${o.name})`,position:"relative",borderBottom:"1px solid var(--color-border)"},children:e.jsx("div",{style:{position:"absolute",inset:0,zIndex:-1,backgroundImage:"linear-gradient(45deg, #1a1a1a 25%, transparent 25%), linear-gradient(-45deg, #1a1a1a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a1a1a 75%), linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)",backgroundSize:"20px 20px",backgroundPosition:"0 0, 0 10px, 10px -10px, -10px 0px",opacity:.2}})}),e.jsxs("div",{style:{padding:"16px"},children:[e.jsx("p",{style:{fontWeight:"600",marginBottom:"4px",color:"var(--color-text-main)"},children:o.label}),e.jsx("code",{style:{display:"block",fontSize:"12px",color:"var(--color-text-muted)",fontFamily:"monospace",marginBottom:"12px"},children:o.name}),e.jsxs("div",{style:{fontSize:"12px",color:"var(--color-text-muted)",display:"flex",alignItems:"center",gap:"8px"},children:[e.jsx("span",{children:"Usage:"}),e.jsxs("code",{style:{background:"rgba(255,255,255,0.05)",padding:"2px 6px",borderRadius:"4px"},children:["var(",o.name,")"]})]})]})]},o.name))})]},r.title))})},c=()=>{const l=[{el:"h1",size:"2em",weight:"700",label:"Heading 1"},{el:"h2",size:"1.5em",weight:"700",label:"Heading 2"},{el:"h3",size:"1.17em",weight:"700",label:"Heading 3"},{el:"h4",size:"1em",weight:"700",label:"Heading 4"},{el:"p",size:"1em",weight:"400",label:"Body Paragraph"},{el:"small",size:"0.875em",weight:"400",label:"Small / Caption",color:"var(--color-text-muted)"}];return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"48px"},children:[e.jsxs("div",{children:[e.jsx("h2",{style:{fontSize:"18px",marginBottom:"24px"},children:"Type Scale (Inter)"}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"32px",backgroundColor:"var(--color-bg-card)",padding:"40px",borderRadius:"16px",border:"1px solid var(--color-border)"},children:l.map(r=>e.jsxs("div",{style:{borderBottom:"1px solid var(--color-border)",paddingBottom:"24px",display:"grid",gridTemplateColumns:"200px 1fr"},children:[e.jsxs("div",{style:{fontSize:"12px",color:"var(--color-text-muted)"},children:[e.jsx("p",{style:{fontWeight:"600",color:"var(--color-text-main)",marginBottom:"4px"},children:r.label}),e.jsx("p",{children:"Font: Inter"}),e.jsxs("p",{children:["Weight: ",r.weight]}),e.jsxs("p",{children:["Size: ",r.size]})]}),e.jsx("div",{style:{display:"flex",alignItems:"center"},children:e.jsx(r.el,{style:{margin:0,fontSize:r.size,fontWeight:r.weight,color:r.color||"var(--color-text-main)"},children:"The quick brown fox jumps over the lazy dog."})})]},r.label))})]}),e.jsxs("div",{children:[e.jsx("h2",{style:{fontSize:"18px",marginBottom:"24px"},children:"Font Stacks"}),e.jsxs("div",{style:{backgroundColor:"var(--color-bg-card)",padding:"24px",borderRadius:"12px",border:"1px solid var(--color-border)"},children:[e.jsx("code",{style:{color:"var(--color-primary)"},children:"--font-main"}),e.jsx("p",{style:{marginTop:"8px",color:"var(--color-text-muted)",fontFamily:"monospace"},children:"'Inter', system-ui, -apple-system, sans-serif"})]})]})]})},x=()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"48px"},children:[e.jsxs(a,{title:"Buttons",description:"Standard interaction elements.",children:[e.jsxs("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e.jsx("button",{style:{backgroundColor:"var(--color-primary)",color:"var(--color-text-main)",border:"none",padding:"12px 24px",borderRadius:"8px",fontWeight:"600",fontSize:"16px"},children:"Primary Action"}),e.jsx("button",{style:{backgroundColor:"var(--color-bg-overlay)",color:"var(--color-text-main)",border:"1px solid var(--color-border)",padding:"12px 24px",borderRadius:"8px",fontWeight:"600",fontSize:"16px"},children:"Secondary Action"}),e.jsx("button",{disabled:!0,style:{backgroundColor:"var(--color-bg-card)",color:"var(--color-text-muted)",border:"1px solid var(--color-border)",padding:"12px 24px",borderRadius:"8px",fontWeight:"600",fontSize:"16px",cursor:"not-allowed",opacity:.6},children:"Disabled"})]}),e.jsxs("div",{style:{marginTop:"16px",fontSize:"12px",color:"var(--color-text-muted)"},children:["Uses: ",e.jsx("code",{children:"--color-primary"}),", ",e.jsx("code",{children:"--color-bg-overlay"}),", ",e.jsx("code",{children:"--color-border"})]})]}),e.jsxs(a,{title:"Status Indicators",description:"Used for real-time status updates.",children:[e.jsxs("div",{className:"live-badge",children:[e.jsx("div",{className:"live-dot"}),e.jsx("span",{children:"Live Now"})]}),e.jsxs("div",{style:{marginTop:"16px",fontSize:"12px",color:"var(--color-text-muted)"},children:["Uses: ",e.jsx("code",{children:".live-badge"})," class from index.css (relies on ",e.jsx("code",{children:"--color-accent"}),")"]})]}),e.jsx(a,{title:"Form Inputs",description:"Standard input fields for user data.",children:e.jsx("div",{style:{maxWidth:"400px",display:"flex",flexDirection:"column",gap:"16px"},children:e.jsxs("div",{children:[e.jsx("label",{style:{display:"block",marginBottom:"8px",fontSize:"14px",color:"var(--color-text-muted)"},children:"Email Address"}),e.jsx("input",{type:"text",placeholder:"[email protected]",style:{width:"100%",backgroundColor:"var(--color-bg-card)",border:"1px solid var(--color-border)",padding:"12px",borderRadius:"8px",color:"var(--color-text-main)",outline:"none"}})]})})}

1),e.jsx(a,{title:"Cards",description:"Containers for content grouping.",children:e.jsxs("div",{style:{backgroundColor:"var(--color-bg-card)",border:"1px solid var(--color-border)",borderRadius:"16px",padding:"24px",maxWidth:"400px"},children:[e.jsx("h3",{style:{marginBottom:"8px"},children:"Feature Card"}),e.jsx("p",{style:{color:"var(--color-text-muted)",fontSize:"14px",lineHeight:"1.5"},children:"This card serves as a container for concise content. It uses the standard card background token."})]})})]}),p=()=>e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"48px"},children:e.jsxs("div",{style:{border:"1px dashed var(--color-border)",padding:"24px",borderRadius:"16px"},children:[e.jsx("p",{style:{color:"var(--color-text-muted)",marginBottom:"24px",fontStyle:"italic"},children:"Example: User Dashboard Composition"}),e.jsxs("div",{style:{backgroundColor:"var(--color-bg-dark)",border:"1px solid var(--color-border)",borderRadius:"12px",overflow:"hidden",maxWidth:"800px",margin:"0 auto"},children:[e.jsxs("div",{style:{backgroundColor:"var(--color-navbar-bg)",borderBottom:"1px solid var(--color-navbar-border)",padding:"16px 24px",display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx("span",{style:{fontWeight:"900",letterSpacing:"-0.05em"},children:"EZN!TY"}),e.jsxs("div",{style:{display:"flex",gap:"12px"},children:[e.jsxs("div",{className:"live-badge",style:{transform:"scale(0.8)"},children:[e.jsx("div",{className:"live-dot"}),e.jsx("span",{children:"Live"})]}),e.jsx("div",{style:{width:"32px",height:"32px",borderRadius:"50%",backgroundColor:"var(--color-primary)"}})]})]}),e.jsxs("div",{style:{padding:"32px"},children:[e.jsx("h2",{style:{marginBottom:"8px"},children:"Overview"}),e.jsx("p",{style:{color:"var(--color-text-muted)",marginBottom:"32px"},children:"Welcome back to your dashboard."}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"24px"},children:[e.jsxs("div",{style:{backgroundColor:"var(--color-bg-card)",padding:"24px",borderRadius:"12px",border:"1px solid var(--color-border)"},children:[e.jsx("p",{style:{color:"var(--color-text-muted)",fontSize:"14px"},children:"Total Views"}),e.jsx("p",{style:{fontSize:"24px",fontWeight:"700",marginTop:"4px"},children:"124,592"})]}),e.jsxs("div",{style:{backgroundColor:"var(--color-bg-card)",padding:"24px",borderRadius:"12px",border:"1px solid var(--color-border)"},children:[e.jsx("p",{style:{color:"var(--color-text-muted)",fontSize:"14px"},children:"Active Sessions"}),e.jsx("p",{style:{fontSize:"24px",fontWeight:"700",marginTop:"4px",color:"var(--color-accent)"},children:"1,204"})]})]})]})]})]})}),a=({title:l,description:r,children:o})=>e.jsxs("div",{children:[e.jsxs("div",{style:{marginBottom:"24px"},children:[e.jsx("h3",{style:{fontSize:"16px",fontWeight:"600",marginBottom:"4px"},children:l}),e.jsx("p",{style:{fontSize:"14px",color:"var(--color-text-muted)"},children:r})]}),e.jsx("div",{style:{padding:"40px",border:"1px solid var(--color-border)",borderRadius:"16px",backgroundColor:"rgba(255,255,255,0.02)"},children:o})]});export{b as default};