e5cd3a154c
- Created new JavaScript files for map pin, search, and user icons. - Added index.html with basic structure and linked assets. - Included vite.svg for the favicon.
2 lines
24 KiB
JavaScript
2 lines
24 KiB
JavaScript
import{c as y,j as e,r as g,P as M,O as h,N as I,S,a as k,D as C,C as w,G as T,X as A,b as L}from"./index-mUEXKEer.js";import{S as P}from"./search-wZFAvndP.js";const O=[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]],$=y("check",O);const W=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 16v-4",key:"1dtifu"}],["path",{d:"M12 8h.01",key:"e9boi3"}]],D=y("info",W);const B=[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"M12 5v14",key:"s699le"}]],U=y("plus",B),c=({children:n,variant:s="primary",size:t="md",icon:i,loading:l,fullWidth:r,className:d="",disabled:x,...o})=>{const m="inline-flex items-center justify-center gap-2 rounded-lg font-[weight:var(--font-weight-medium)] transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed",f={primary:"bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",outline:"border-2 border-border bg-transparent hover:bg-accent",ghost:"bg-transparent hover:bg-accent",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90"},j={sm:"px-3 py-1.5 text-[length:var(--text-sm)]",md:"px-4 py-2 text-[length:var(--text-md)]",lg:"px-6 py-3 text-[length:var(--text-lg)]"};return e.jsxs("button",{className:`${m} ${f[s]} ${j[t]} ${r?"w-full":""} ${d}`,disabled:x||l,...o,children:[l&&e.jsx("div",{className:"animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent"}),!l&&i&&e.jsx("span",{children:i}),n]})},b=({label:n,error:s,helperText:t,icon:i,fullWidth:l,className:r="",...d})=>e.jsxs("div",{className:`${l?"w-full":""}`,children:[n&&e.jsx("label",{className:"block text-[length:var(--text-sm)] font-[weight:var(--font-weight-medium)] text-foreground mb-2",children:n}),e.jsxs("div",{className:"relative",children:[i&&e.jsx("div",{className:"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground",children:i}),e.jsx("input",{className:`w-full px-4 py-2 ${i?"pl-10":""} bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all ${s?"border-destructive focus:ring-destructive":""} ${r}`,...d})]}),s&&e.jsxs("p",{className:"mt-1.5 text-[length:var(--text-sm)] text-destructive flex items-center gap-1",children:[e.jsx(w,{size:14}),s]}),!s&&t&&e.jsx("p",{className:"mt-1.5 text-[length:var(--text-sm)] text-muted-foreground",children:t})]}),v=({title:n,description:s,children:t,footer:i,symbol:l,hover:r=!1,className:d=""})=>e.jsxs("div",{className:`bg-card border border-border rounded-xl shadow-sm ${r?"transition-all hover:shadow-md hover:border-primary/50":""} ${d}`,children:[(n||s||l)&&e.jsx("div",{className:"p-6 border-b border-border",children:e.jsxs("div",{className:"flex items-start gap-4",children:[l&&e.jsx("div",{className:"shrink-0",children:l}),e.jsxs("div",{className:"flex-1 min-w-0",children:[n&&e.jsx("h3",{className:"mb-1",children:n}),s&&e.jsx("p",{className:"text-muted-foreground text-[length:var(--text-sm)]",children:s})]})]})}),t&&e.jsx("div",{className:"p-6",children:t}),i&&e.jsx("div",{className:"px-6 py-4 bg-muted/30 border-t border-border rounded-b-xl",children:i})]}),V=({isOpen:n,onClose:s,title:t,children:i,footer:l,size:r="md"})=>{if(!n)return null;const d={sm:"max-w-md",md:"max-w-lg",lg:"max-w-2xl"};return e.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center p-4",children:[e.jsx("div",{className:"absolute inset-0 bg-black/50 backdrop-blur-sm",onClick:s}),e.jsxs("div",{className:`relative w-full ${d[r]} bg-card border border-border rounded-xl shadow-xl`,children:[e.jsxs("div",{className:"flex items-center justify-between p-6 border-b border-border",children:[e.jsx("h3",{children:t}),e.jsx("button",{onClick:s,className:"p-1 rounded-lg hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",children:e.jsx(A,{size:20})})]}),e.jsx("div",{className:"p-6",children:i}),l&&e.jsx("div",{className:"flex items-center justify-end gap-3 px-6 py-4 bg-muted/30 border-t border-border rounded-b-xl",children:l})]})]})},G=({tabs:n,defaultTab:s})=>{const[t,i]=g.useState(s||n[0]?.id),l=n.find(r=>r.id===t)?.content;return e.jsxs("div",{children:[e.jsx("div",{className:"border-b border-border",children:e.jsx("div",{className:"flex gap-1",children:n.map(r=>e.jsxs("button",{onClick:()=>i(r.id),className:`flex items-center gap-2 px-4 py-3 text-[length:var(--text-sm)] font-[weight:var(--font-weight-medium)] transition-all relative ${t===r.id?"text-primary":"text-muted-foreground hover:text-foreground"}`,children:[r.icon&&e.jsx("span",{children:r.icon}),r.label,t===r.id&&e.jsx("div",{className:"absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-full"})]},r.id))})}),e.jsx("div",{className:"py-6",children:l})]})},N=({label:n,options:s,value:t,onChange:i,placeholder:l="Select an option",error:r})=>{const[d,x]=g.useState(!1),o=s.find(m=>m.value===t);return e.jsxs("div",{className:"relative",children:[n&&e.jsx("label",{className:"block text-[length:var(--text-sm)] font-[weight:var(--font-weight-medium)] text-foreground mb-2",children:n}),e.jsxs("button",{type:"button",onClick:()=>x(!d),className:`w-full px-4 py-2 bg-background border rounded-lg text-left flex items-center justify-between transition-all focus:outline-none focus:ring-2 focus:ring-primary ${r?"border-destructive":"border-border"}`,children:[e.jsx("span",{className:o?"text-foreground":"text-muted-foreground",children:o?o.label:l}),e.jsx(L,{size:16,className:`transition-transform ${d?"rotate-180":""}`})]}),d&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"fixed inset-0 z-10",onClick:()=>x(!1)}),e.jsx("div",{className:"absolute z-20 w-full mt-2 bg-card border border-border rounded-lg shadow-lg max-h-60 overflow-auto",children:s.map(m=>e.jsx("button",{type:"button",onClick:()=>{i(m.value),x(!1)},className:`w-full px-4 py-2.5 text-left text-[length:var(--text-sm)] transition-colors ${m.value===t?"bg-primary text-primary-foreground":"hover:bg-accent"}`,children:m.label},m.value))})]}),r&&e.jsxs("p",{className:"mt-1.5 text-[length:var(--text-sm)] text-destructive flex items-center gap-1",children:[e.jsx(w,{size:14}),r]})]})},a=({children:n,variant:s="default",size:t="md",icon:i,className:l=""})=>{const r={default:"bg-muted text-foreground",primary:"bg-primary text-primary-foreground",success:"bg-success text-success-foreground",warning:"bg-warning text-warning-foreground",destructive:"bg-destructive text-destructive-foreground",outline:"border border-border bg-transparent text-foreground"},d={sm:"px-2 py-0.5 text-[length:var(--text-xs)]",md:"px-2.5 py-1 text-[length:var(--text-sm)]",lg:"px-3 py-1.5 text-[length:var(--text-md)]"};return e.jsxs("span",{className:`inline-flex items-center gap-1 rounded-full font-[weight:var(--font-weight-medium)] ${r[s]} ${d[t]} ${l}`,children:[i&&e.jsx("span",{children:i}),n]})},u=({value:n,max:s=100,label:t,showPercentage:i=!0,variant:l="default",size:r="md"})=>{const d=Math.min(Math.max(n/s*100,0),100),x={default:"bg-primary",success:"bg-success",warning:"bg-warning",destructive:"bg-destructive"},o={sm:"h-1",md:"h-2",lg:"h-3"};return e.jsxs("div",{children:[(t||i)&&e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[t&&e.jsx("span",{className:"text-[length:var(--text-sm)] font-[weight:var(--font-weight-medium)]",children:t}),i&&e.jsxs("span",{className:"text-[length:var(--text-sm)] text-muted-foreground",children:[Math.round(d),"%"]})]}),e.jsx("div",{className:`w-full bg-muted rounded-full overflow-hidden ${o[r]}`,children:e.jsx("div",{className:`${x[l]} ${o[r]} rounded-full transition-all duration-300`,style:{width:`${d}%`}})})]})},p=({size:n="md",variant:s="default"})=>{const t={sm:"h-4 w-4 border-2",md:"h-8 w-8 border-3",lg:"h-12 w-12 border-4"},i={default:"border-border border-t-foreground",primary:"border-primary/20 border-t-primary"};return e.jsx("div",{className:`animate-spin rounded-full ${t[n]} ${i[s]}`})},_=()=>{const[n,s]=g.useState(!1),[t,i]=g.useState(""),[l,r]=g.useState(""),[d,x]=g.useState(!1),[o,m]=g.useState(35),f=()=>{x(!0),m(0);const j=setInterval(()=>{m(z=>z>=100?(clearInterval(j),x(!1),100):z+10)},300)};return e.jsxs("div",{className:"min-h-screen bg-background",children:[e.jsx(M,{title:"Common Components",description:"Essential UI components including buttons, inputs, cards, modals, tabs, and more built with the LUPMIS 2.0 design system."}),e.jsxs("section",{className:"relative bg-gradient-to-br from-brand-navy to-brand-blue-strong text-white py-16 px-8",children:[e.jsx("div",{className:"absolute top-10 right-10 opacity-10",children:e.jsx(h,{size:150,color:"white"})}),e.jsxs("div",{className:"max-w-7xl mx-auto relative z-10",children:[e.jsxs("div",{className:"flex items-center gap-4 mb-4",children:[e.jsx(h,{size:64,color:"var(--brand-orange-warm)"}),e.jsx("h1",{children:"Components"})]}),e.jsx("p",{className:"text-[length:var(--text-md)] opacity-90 max-w-3xl",children:"Essential UI components built with our design guidelines featuring Adinkra symbolism, proportional typography scaling, and Nielsen's usability principles."})]})]}),e.jsxs("div",{className:"max-w-7xl mx-auto p-8 space-y-16",children:[e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"1. Buttons"}),e.jsx("p",{className:"text-muted-foreground",children:"Interactive elements for user actions with multiple variants and states"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"Variants"}),e.jsxs("div",{className:"flex flex-wrap gap-3",children:[e.jsx(c,{variant:"primary",children:"Primary"}),e.jsx(c,{variant:"secondary",children:"Secondary"}),e.jsx(c,{variant:"outline",children:"Outline"}),e.jsx(c,{variant:"ghost",children:"Ghost"}),e.jsx(c,{variant:"destructive",children:"Destructive"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"Sizes"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(c,{size:"sm",children:"Small"}),e.jsx(c,{size:"md",children:"Medium"}),e.jsx(c,{size:"lg",children:"Large"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"With Icons & States"}),e.jsxs("div",{className:"flex flex-wrap gap-3",children:[e.jsx(c,{icon:e.jsx(U,{size:16}),children:"New Item"}),e.jsx(c,{icon:e.jsx(P,{size:16}),variant:"outline",children:"Search"}),e.jsx(c,{loading:!0,children:"Processing..."}),e.jsx(c,{disabled:!0,children:"Disabled"})]})]})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"2. Input Fields"}),e.jsx("p",{className:"text-muted-foreground",children:"Text input components with validation, icons, and helper text"})]}),e.jsxs("div",{className:"max-w-2xl space-y-6",children:[e.jsx(b,{label:"Username",placeholder:"Enter your username",helperText:"Choose a unique username",fullWidth:!0}),e.jsx(b,{label:"Search",placeholder:"Search items...",icon:e.jsx(P,{size:18}),fullWidth:!0}),e.jsx(b,{label:"Email",type:"email",placeholder:"you@example.com",value:t,onChange:j=>i(j.target.value),error:t&&!t.includes("@")?"Please enter a valid email":"",fullWidth:!0})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"3. Cards"}),e.jsx("p",{className:"text-muted-foreground",children:"Flexible containers for grouping related content"})]}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-6",children:[e.jsx(v,{title:"Basic Card",description:"A simple card with title and description",children:e.jsx("p",{className:"text-muted-foreground",children:"Cards can contain any content you need. They're perfect for organizing information into digestible sections."})}),e.jsx(v,{title:"Development Progress",description:"Building sustainable systems",symbol:e.jsx(h,{size:40,color:"var(--brand-blue-strong)"}),hover:!0,footer:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-sm text-muted-foreground",children:"Last updated: Today"}),e.jsx(c,{size:"sm",variant:"ghost",children:"View Details"})]}),children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(u,{label:"Phase 1",value:100,variant:"success"}),e.jsx(u,{label:"Phase 2",value:75,variant:"default"}),e.jsx(u,{label:"Phase 3",value:30,variant:"warning"})]})}),e.jsx(v,{title:"Team Collaboration",symbol:e.jsx(I,{size:40,color:"var(--brand-green-bright)"}),hover:!0,children:e.jsxs("div",{className:"flex items-center gap-2 flex-wrap",children:[e.jsx(a,{variant:"primary",children:"Active"}),e.jsx(a,{variant:"success",icon:e.jsx($,{size:14}),children:"Verified"}),e.jsx(a,{variant:"outline",children:"12 Members"})]})}),e.jsxs(v,{title:"Wisdom Resources",symbol:e.jsx(k,{size:40,color:"var(--brand-orange-warm)"}),hover:!0,children:[e.jsx("p",{className:"text-muted-foreground mb-4",children:"Access knowledge base and educational materials."}),e.jsx(c,{variant:"outline",fullWidth:!0,icon:e.jsx(S,{size:16,color:"currentColor"}),children:"Browse Library"})]})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"4. Modals"}),e.jsx("p",{className:"text-muted-foreground",children:"Dialog boxes for focused interactions and important information"})]}),e.jsxs("div",{children:[e.jsx(c,{onClick:()=>s(!0),children:"Open Modal"}),e.jsx(V,{isOpen:n,onClose:()=>s(!1),title:"Welcome to LUSPA",footer:e.jsxs(e.Fragment,{children:[e.jsx(c,{variant:"ghost",onClick:()=>s(!1),children:"Cancel"}),e.jsx(c,{onClick:()=>s(!1),children:"Get Started"})]}),children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(h,{size:48,color:"var(--brand-blue-strong)"}),e.jsx("p",{className:"text-muted-foreground",children:"This modal demonstrates how dialogs can be used to focus user attention on specific tasks or information without leaving the current page."})]}),e.jsx("div",{className:"bg-muted/50 p-4 rounded-lg",children:e.jsx("p",{className:"text-sm",children:"Modals should be used sparingly and only for important interactions that require immediate user attention or input."})})]})})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"5. Tabs"}),e.jsx("p",{className:"text-muted-foreground",children:"Organize content into separate views within the same context"})]}),e.jsx(v,{children:e.jsx(G,{tabs:[{id:"overview",label:"Overview",icon:e.jsx(D,{size:16}),content:e.jsxs("div",{className:"space-y-4",children:[e.jsx("p",{className:"text-muted-foreground",children:"The design guidelines integrates Adinkra symbolism with modern UI patterns to create culturally meaningful interfaces."}),e.jsxs("div",{className:"grid grid-cols-3 gap-4",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(h,{size:48,color:"var(--brand-blue-strong)",className:"mx-auto mb-2"}),e.jsx("p",{className:"text-sm font-medium",children:"Osiadan"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"The Builder"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx(S,{size:48,color:"var(--brand-green-bright)",className:"mx-auto mb-2"}),e.jsx("p",{className:"text-sm font-medium",children:"Sankofa"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Learn from Past"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx(C,{size:48,color:"var(--brand-orange-warm)",className:"mx-auto mb-2"}),e.jsx("p",{className:"text-sm font-medium",children:"Dwennimmen"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Strength & Humility"})]})]})]})},{id:"statistics",label:"Statistics",content:e.jsx("div",{className:"space-y-6",children:e.jsxs("div",{className:"grid grid-cols-3 gap-4",children:[e.jsxs("div",{className:"text-center p-4 bg-muted/30 rounded-lg",children:[e.jsx("div",{className:"text-2xl font-bold text-primary mb-1",children:"48"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Components"})]}),e.jsxs("div",{className:"text-center p-4 bg-muted/30 rounded-lg",children:[e.jsx("div",{className:"text-2xl font-bold text-success mb-1",children:"11"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Adinkra Symbols"})]}),e.jsxs("div",{className:"text-center p-4 bg-muted/30 rounded-lg",children:[e.jsx("div",{className:"text-2xl font-bold text-warning mb-1",children:"5"}),e.jsx("div",{className:"text-sm text-muted-foreground",children:"Applications"})]})]})})},{id:"settings",label:"Settings",content:e.jsxs("div",{className:"space-y-4 max-w-md",children:[e.jsx(b,{label:"Display Name",placeholder:"Your name",fullWidth:!0}),e.jsx(N,{label:"Theme Preference",options:[{value:"light",label:"Light Mode"},{value:"dark",label:"Dark Mode"},{value:"auto",label:"Auto (System)"}],value:l,onChange:r}),e.jsx(c,{fullWidth:!0,children:"Save Changes"})]})}]})})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"6. Select Dropdowns"}),e.jsx("p",{className:"text-muted-foreground",children:"Choose from predefined options with searchable dropdowns"})]}),e.jsxs("div",{className:"max-w-2xl space-y-6",children:[e.jsx(N,{label:"Choose a Symbol",options:[{value:"osiadan",label:"Osiadan - The Builder"},{value:"sankofa",label:"Sankofa - Learn from the Past"},{value:"dwennimmen",label:"Dwennimmen - Strength and Humility"},{value:"nkonsonkonson",label:"Nkonsonkonson - Unity"},{value:"gyenyame",label:"Gye Nyame - Supremacy of God"}],value:l,onChange:r}),e.jsx(N,{label:"Project Phase",options:[{value:"planning",label:"Planning"},{value:"development",label:"Development"},{value:"testing",label:"Testing"},{value:"deployment",label:"Deployment"}],value:"",onChange:()=>{},placeholder:"Select project phase"})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"7. Badges"}),e.jsx("p",{className:"text-muted-foreground",children:"Small labels for statuses, categories, and metadata"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"Variants"}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(a,{variant:"default",children:"Default"}),e.jsx(a,{variant:"primary",children:"Primary"}),e.jsx(a,{variant:"success",children:"Success"}),e.jsx(a,{variant:"warning",children:"Warning"}),e.jsx(a,{variant:"destructive",children:"Destructive"}),e.jsx(a,{variant:"outline",children:"Outline"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"Sizes"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx(a,{size:"sm",children:"Small"}),e.jsx(a,{size:"md",children:"Medium"}),e.jsx(a,{size:"lg",children:"Large"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"With Icons"}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(a,{variant:"success",icon:e.jsx($,{size:14}),children:"Approved"}),e.jsx(a,{variant:"warning",icon:e.jsx(w,{size:14}),children:"Pending"}),e.jsx(a,{variant:"primary",icon:e.jsx(D,{size:14}),children:"New"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-3 text-muted-foreground",children:"Practical Usage"}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"text-sm",children:"Application Status:"}),e.jsx(a,{variant:"success",children:"Approved"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"text-sm",children:"User Role:"}),e.jsx(a,{variant:"primary",children:"Administrator"})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"text-sm",children:"Tags:"}),e.jsx(a,{variant:"outline",children:"Planning"}),e.jsx(a,{variant:"outline",children:"Development"}),e.jsx(a,{variant:"outline",children:"GIS"})]})]})]})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsxs("section",{children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h2",{className:"mb-2",children:"8. Progress Indicators"}),e.jsx("p",{className:"text-muted-foreground",children:"Visual feedback for loading states and task completion"})]}),e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h6",{className:"mb-4 text-muted-foreground",children:"Progress Bars"}),e.jsxs("div",{className:"max-w-2xl space-y-4",children:[e.jsx(u,{label:"Development",value:85,variant:"success"}),e.jsx(u,{label:"Testing",value:60,variant:"default"}),e.jsx(u,{label:"Documentation",value:40,variant:"warning"}),e.jsx(u,{label:"Deployment",value:15,variant:"destructive"}),e.jsx(u,{value:o,size:"lg"})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-4 text-muted-foreground",children:"Loading Spinners"}),e.jsxs("div",{className:"flex items-center gap-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(p,{size:"sm"}),e.jsx("p",{className:"text-sm text-muted-foreground mt-2",children:"Small"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx(p,{size:"md"}),e.jsx("p",{className:"text-sm text-muted-foreground mt-2",children:"Medium"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx(p,{size:"lg"}),e.jsx("p",{className:"text-sm text-muted-foreground mt-2",children:"Large"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx(p,{size:"md",variant:"primary"}),e.jsx("p",{className:"text-sm text-muted-foreground mt-2",children:"Primary"})]})]})]}),e.jsxs("div",{children:[e.jsx("h6",{className:"mb-4 text-muted-foreground",children:"Interactive Demo"}),e.jsxs("div",{className:"max-w-md space-y-4",children:[e.jsx(c,{onClick:f,disabled:d,fullWidth:!0,loading:d,children:d?"Processing...":"Start Process"}),d&&e.jsx(u,{value:o,label:"Processing application",variant:"default",size:"lg"})]})]})]})]}),e.jsx("div",{className:"border-t border-border"}),e.jsx("section",{className:"bg-gradient-to-br from-muted/50 to-accent/30 p-12 rounded-2xl border-2 border-dashed border-border",children:e.jsxs("div",{className:"max-w-3xl mx-auto text-center space-y-6",children:[e.jsxs("div",{className:"flex justify-center gap-4 mb-6",children:[e.jsx(T,{size:56,color:"var(--brand-blue-strong)",className:"opacity-50"}),e.jsx(C,{size:56,color:"var(--brand-green-bright)",className:"opacity-50"}),e.jsx(k,{size:56,color:"var(--brand-orange-warm)",className:"opacity-50"})]}),e.jsx("h2",{className:"text-foreground",children:"More Components Coming Soon"}),e.jsx("p",{className:"text-muted-foreground text-[length:var(--text-md)] max-w-2xl mx-auto",children:"We're continuously expanding our component library with new patterns and implementations. Future additions will include data tables, date pickers, file uploads, notifications, breadcrumbs, pagination, and more."}),e.jsxs("div",{className:"flex flex-wrap justify-center gap-3 pt-4",children:[e.jsx(a,{variant:"outline",size:"lg",children:"Data Tables"}),e.jsx(a,{variant:"outline",size:"lg",children:"Date Pickers"}),e.jsx(a,{variant:"outline",size:"lg",children:"File Uploads"}),e.jsx(a,{variant:"outline",size:"lg",children:"Notifications"}),e.jsx(a,{variant:"outline",size:"lg",children:"Breadcrumbs"}),e.jsx(a,{variant:"outline",size:"lg",children:"Pagination"}),e.jsx(a,{variant:"outline",size:"lg",children:"Accordions"}),e.jsx(a,{variant:"outline",size:"lg",children:"Tooltips"})]}),e.jsxs("div",{className:"pt-6",children:[e.jsx("p",{className:"text-sm text-muted-foreground italic",children:'"The builder continues to develop and sustain"'}),e.jsx("div",{className:"flex justify-center mt-3",children:e.jsx(h,{size:40,color:"var(--brand-orange-warm)"})})]})]})}),e.jsxs("footer",{className:"text-center pt-8 border-t border-border",children:[e.jsx(h,{size:48,color:"var(--brand-blue-strong)",className:"mx-auto mb-4"}),e.jsx("p",{className:"text-muted-foreground text-sm",children:"LUPMIS 2.0 Design Guidelines"})]})]})]})};export{a as Badge,c as Button,v as Card,_ as CommonComponentsShowcase,b as InputField,V as Modal,u as ProgressBar,N as Select,p as Spinner,G as Tabs};
|