1 line
13 KiB
JavaScript
1 line
13 KiB
JavaScript
import{j as e}from"./vendor-react-BHG7lGYR.js";import{f as l,B as a,s as t,I as i,P as c}from"./index-BWcMVITa.js";import{I as s}from"./input-BGBI2Wze.js";import"./vendor-IYr-MHu4.js";import"./vendor-router-D-s5vIeO.js";import"./vendor-tanstack-BzWBL1hV.js";import"./vendor-utils-CgOSfOkx.js";import"./vendor-icons-DaGlTw4_.js";function N(){return e.jsx("div",{className:"min-h-screen bg-kodo-void text-kodo-primary p-8",children:e.jsxs("div",{className:"max-w-6xl mx-auto space-y-12",children:[e.jsxs("header",{className:"text-center space-y-4",children:[e.jsx("h1",{className:"text-5xl font-display font-bold text-white",children:"Kōdō Design System"}),e.jsx("p",{className:"text-xl text-kodo-secondary",children:"Spectre Astral • Premium Components"})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsx("h2",{className:"text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2",children:"Buttons"}),e.jsxs("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",children:[e.jsx(l,{variant:"primary",children:"Primary"}),e.jsx(l,{variant:"secondary",children:"Secondary"}),e.jsx(l,{variant:"ghost",children:"Ghost"}),e.jsx(l,{variant:"gaming",children:"Premium"}),e.jsx(l,{variant:"terminal",children:"Terminal"}),e.jsx(l,{variant:"nature",children:"Success"}),e.jsx(l,{variant:"primary",size:"sm",children:"Small"}),e.jsx(l,{variant:"primary",size:"lg",children:"Large"})]})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsx("h2",{className:"text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2",children:"Design System Button Variants (Visual Test)"}),e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-white mb-4",children:"Variants"}),e.jsxs("div",{className:"flex flex-wrap gap-4",children:[e.jsx(a,{variant:"default",children:"Default"}),e.jsx(a,{variant:"destructive",children:"Destructive"}),e.jsx(a,{variant:"outline",children:"Outline"}),e.jsx(a,{variant:"secondary",children:"Secondary"}),e.jsx(a,{variant:"ghost",children:"Ghost"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-white mb-4",children:"Sizes"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[e.jsx(a,{variant:"default",size:"sm",children:"Small"}),e.jsx(a,{variant:"default",size:"default",children:"Default"}),e.jsx(a,{variant:"default",size:"lg",children:"Large"}),e.jsx(a,{variant:"default",size:"icon",children:e.jsx("svg",{className:"w-4 h-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 4v16m8-8H4"})})})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-white mb-4",children:"All Variants × All Sizes"}),e.jsx("div",{className:"space-y-4",children:["default","destructive","outline","secondary","ghost"].map(d=>e.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[e.jsxs("span",{className:"text-sm text-kodo-secondary w-24 capitalize",children:[d,":"]}),e.jsx(a,{variant:d,size:"sm",children:"sm"}),e.jsx(a,{variant:d,size:"default",children:"default"}),e.jsx(a,{variant:d,size:"lg",children:"lg"}),e.jsx(a,{variant:d,size:"icon",children:e.jsx("svg",{className:"w-4 h-4",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 4v16m8-8H4"})})})]},d))})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-white mb-4",children:"States"}),e.jsxs("div",{className:"flex flex-wrap gap-4",children:[e.jsx(a,{variant:"default",children:"Normal"}),e.jsx(a,{variant:"default",disabled:!0,children:"Disabled"}),e.jsx(a,{variant:"outline",children:"Normal"}),e.jsx(a,{variant:"outline",disabled:!0,children:"Disabled"})]})]})]})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsx("h2",{className:"text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2",children:"Cards"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8",children:[e.jsxs(t,{variant:"default",children:[e.jsx("h3",{className:"text-lg font-bold text-white mb-2",children:"Default Card"}),e.jsx("p",{className:"text-kodo-secondary text-sm",children:"Standard card with subtle borders"})]}),e.jsxs(t,{variant:"manga",children:[e.jsx("h3",{className:"text-lg font-bold text-white mb-2",children:"Creative Card"}),e.jsx("p",{className:"text-kodo-secondary text-sm",children:"Gradient background with magenta accent"})]}),e.jsxs(t,{variant:"gaming",children:[e.jsx("h3",{className:"text-lg font-bold text-white mb-2",children:"Tech Card"}),e.jsx("p",{className:"text-kodo-secondary text-sm",children:"Cyan accent for technical content"})]}),e.jsxs(t,{variant:"glass",children:[e.jsx("h3",{className:"text-lg font-bold text-white mb-2",children:"Glass Card"}),e.jsx("p",{className:"text-kodo-secondary text-sm",children:"Glassmorphism with backdrop blur"})]})]})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsx("h2",{className:"text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2",children:"Inputs"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8",children:[e.jsx(i,{label:"Username",placeholder:"Enter your username"}),e.jsx(i,{label:"Email",type:"email",placeholder:"your@email.com"})]})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsx("h2",{className:"text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2",children:"Design System Input Component (Visual Test)"}),e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-white mb-4",children:"Basic States"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Normal"}),e.jsx(s,{placeholder:"Enter text..."})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"With Value"}),e.jsx(s,{defaultValue:"Sample text value"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Disabled"}),e.jsx(s,{placeholder:"Disabled input",disabled:!0})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Disabled with Value"}),e.jsx(s,{defaultValue:"Disabled value",disabled:!0})]})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-white mb-4",children:"Input Types"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Text"}),e.jsx(s,{type:"text",placeholder:"Text input"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Email"}),e.jsx(s,{type:"email",placeholder:"email@example.com"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Password"}),e.jsx(s,{type:"password",placeholder:"Enter password"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Number"}),e.jsx(s,{type:"number",placeholder:"Enter number"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Search"}),e.jsx(s,{type:"search",placeholder:"Search..."})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"URL"}),e.jsx(s,{type:"url",placeholder:"https://example.com"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Tel"}),e.jsx(s,{type:"tel",placeholder:"+1 (555) 123-4567"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Date"}),e.jsx(s,{type:"date"})]})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-white mb-4",children:"Width Variations"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Full Width"}),e.jsx(s,{placeholder:"Full width input",className:"w-full"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Half Width"}),e.jsx(s,{placeholder:"Half width input",className:"w-1/2"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Fixed Width"}),e.jsx(s,{placeholder:"Fixed width",className:"w-64"})]})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-white mb-4",children:"Placeholder Variations"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"With Placeholder"}),e.jsx(s,{placeholder:"Enter your name..."})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"No Placeholder"}),e.jsx(s,{})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Long Placeholder"}),e.jsx(s,{placeholder:"This is a very long placeholder text that demonstrates how the input handles longer placeholder text"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm text-kodo-secondary",children:"Short Placeholder"}),e.jsx(s,{placeholder:"Name"})]})]})]})]})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsx("h2",{className:"text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2",children:"Progress Bars"}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(c,{value:75,color:"cyan",labelLeft:"Cyan",labelRight:"75%"}),e.jsx(c,{value:60,color:"magenta",labelLeft:"Magenta",labelRight:"60%"}),e.jsx(c,{value:90,color:"lime",labelLeft:"Lime",labelRight:"90%"}),e.jsx(c,{value:45,color:"gold",variant:"gaming",labelLeft:"XP Progress",labelRight:"Level 42"})]})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsx("h2",{className:"text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2",children:"Color Palette"}),e.jsxs("div",{className:"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-20 bg-kodo-void rounded-lg border border-kodo-steel"}),e.jsx("p",{className:"text-xs text-center",children:"Void"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-20 bg-kodo-ink rounded-lg border border-kodo-steel"}),e.jsx("p",{className:"text-xs text-center",children:"Ink"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-20 bg-kodo-graphite rounded-lg"}),e.jsx("p",{className:"text-xs text-center",children:"Graphite"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-20 bg-kodo-slate rounded-lg"}),e.jsx("p",{className:"text-xs text-center",children:"Slate"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-20 bg-kodo-cyan rounded-lg"}),e.jsx("p",{className:"text-xs text-center",children:"Cyan"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-20 bg-kodo-magenta rounded-lg"}),e.jsx("p",{className:"text-xs text-center",children:"Magenta"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-20 bg-kodo-lime rounded-lg"}),e.jsx("p",{className:"text-xs text-center",children:"Lime"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-20 bg-kodo-gold rounded-lg"}),e.jsx("p",{className:"text-xs text-center",children:"Gold"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"h-20 bg-kodo-red rounded-lg"}),e.jsx("p",{className:"text-xs text-center",children:"Red"})]})]})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsx("h2",{className:"text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2",children:"Animations"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-8",children:[e.jsx(t,{variant:"gaming",className:"animate-float",children:e.jsx("p",{className:"text-center text-white font-bold",children:"Float Animation"})}),e.jsx(t,{variant:"manga",className:"animate-fadeIn",children:e.jsx("p",{className:"text-center text-white font-bold",children:"Fade In"})}),e.jsx(t,{variant:"glass",className:"animate-pulse-glow",children:e.jsx("p",{className:"text-center text-white font-bold",children:"Pulse Glow"})})]})]})]})})}export{N as default};
|