import{bf as S,bt as D,bu as P,r as M,c as d,a,b as s,n as m,e as o,t as r,af as v,aQ as f,aS as g,ae as h,aU as w,g as l}from"./index-BUdRbiwj.js";const j={class:"min-h-screen bg-gray-50 dark:bg-gray-900 py-8 transition-colors"},E={class:"max-w-6xl mx-auto px-4"},V={class:"bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 transition-colors"},F={class:"flex items-center justify-between mb-8"},U={class:"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"},z={class:"bg-blue-50 border border-blue-200 rounded-lg p-6"},A={class:"space-y-2 text-sm text-blue-700"},I={class:"flex justify-between"},L={class:"font-mono"},N={class:"flex justify-between"},O={class:"font-mono"},R={class:"flex justify-between"},W={class:"font-mono"},G={class:"flex justify-between"},Q={class:"font-mono"},q={class:"mb-8"},H={class:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"},J={class:"font-medium text-gray-700 dark:text-gray-300"},K={class:"grid grid-cols-5 gap-1"},X={class:"mb-8"},Y={class:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"},Z={class:"space-y-3"},$={class:"space-y-3"},ss={class:"bg-gray-50 rounded-lg p-6"},ts={class:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"},es={class:"bg-white p-4 rounded-md text-center"},rs={class:"text-2xl mb-2"},os={class:"text-xs text-gray-500"},ns={__name:"ThemeTest",setup(as){const{currentTheme:u,isDark:b,toggleTheme:x,getColor:C}=S();D();const{windowWidth:_,isMobile:c,isTablet:p,breakpoint:y}=P(),i=M({email:"",password:""}),T=d(()=>c.value?"Mobile":p.value?"Tablet":"Desktop"),k=d(()=>c.value?"📱":p.value?"💻":"🖥️"),B=d(()=>[{name:"Primary",shades:[{name:"100",bgClass:"bg-primary-100",textClass:"text-primary-900"},{name:"300",bgClass:"bg-primary-300",textClass:"text-primary-900"},{name:"500",bgClass:"bg-primary-500",textClass:"text-white"},{name:"700",bgClass:"bg-primary-700",textClass:"text-white"},{name:"900",bgClass:"bg-primary-900",textClass:"text-white"}]},{name:"Success",shades:[{name:"100",bgClass:"bg-success-100",textClass:"text-success-900"},{name:"300",bgClass:"bg-success-300",textClass:"text-success-900"},{name:"500",bgClass:"bg-success-500",textClass:"text-white"},{name:"700",bgClass:"bg-success-700",textClass:"text-white"},{name:"900",bgClass:"bg-success-900",textClass:"text-white"}]},{name:"Error",shades:[{name:"100",bgClass:"bg-error-100",textClass:"text-error-900"},{name:"300",bgClass:"bg-error-300",textClass:"text-error-900"},{name:"500",bgClass:"bg-error-500",textClass:"text-white"},{name:"700",bgClass:"bg-error-700",textClass:"text-white"},{name:"900",bgClass:"bg-error-900",textClass:"text-white"}]}]);return console.log("ThemeTest component loaded"),console.log("Theme system working:",{currentTheme:u.value,breakpoint:y.value}),(ls,t)=>(l(),a("div",j,[s("div",E,[s("div",V,[s("div",F,[t[3]||(t[3]=s("div",null,[s("h1",{class:"text-3xl font-bold text-gray-900 dark:text-white"},"Atlas CMMS Theme System"),s("p",{class:"text-gray-600 dark:text-gray-300 mt-2"},"Testing centralized theming with TailwindCSS")],-1)),s("button",{onClick:t[0]||(t[0]=(...e)=>o(x)&&o(x)(...e)),class:m(["px-4 py-2 rounded-md font-medium transition-colors border",o(b)?"bg-yellow-500 hover:bg-yellow-600 text-gray-900 border-yellow-500":"bg-gray-800 hover:bg-gray-900 text-white border-gray-800"])},r(o(b)?"☀️ Light Mode":"🌙 Dark Mode"),3)]),s("div",U,[t[9]||(t[9]=s("div",{class:"bg-green-50 border border-green-200 rounded-lg p-6"},[s("h2",{class:"text-lg font-semibold text-green-800 mb-3"},"✅ Working Components"),s("ul",{class:"space-y-1 text-sm text-green-700"},[s("li",null,"• Vue 3 + Composition API"),s("li",null,"• TailwindCSS Configuration"),s("li",null,"• Custom Color Palette"),s("li",null,"• Theme Composables"),s("li",null,"• Responsive Design")])],-1)),s("div",z,[t[8]||(t[8]=s("h2",{class:"text-lg font-semibold text-blue-800 mb-3"},"📊 Current Theme",-1)),s("div",A,[s("div",I,[t[4]||(t[4]=s("span",null,"Theme:",-1)),s("span",L,r(o(u)),1)]),s("div",N,[t[5]||(t[5]=s("span",null,"Primary:",-1)),s("span",O,r(o(C)("primary.700")),1)]),s("div",R,[t[6]||(t[6]=s("span",null,"Breakpoint:",-1)),s("span",W,r(o(y)),1)]),s("div",G,[t[7]||(t[7]=s("span",null,"Device:",-1)),s("span",Q,r(T.value),1)])])])]),s("div",q,[t[10]||(t[10]=s("h2",{class:"text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4"},"Color Palette",-1)),s("div",H,[(l(!0),a(v,null,f(B.value,e=>(l(),a("div",{key:e.name,class:"space-y-3"},[s("h3",J,r(e.name),1),s("div",K,[(l(!0),a(v,null,f(e.shades,n=>(l(),a("div",{key:n.name,class:m([n.bgClass,"h-12 rounded flex items-center justify-center text-xs font-mono border"])},[s("span",{class:m(n.textClass)},r(n.name),3)],2))),128))])]))),128))])]),s("div",X,[t[15]||(t[15]=s("h2",{class:"text-xl font-semibold text-gray-800 mb-4"},"Component Preview",-1)),s("div",Y,[t[13]||(t[13]=g('<div class="space-y-3"><h3 class="font-medium text-gray-700">Buttons</h3><div class="space-y-2"><button class="w-full px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-md font-medium transition-colors"> Primary Button </button><button class="w-full px-4 py-2 bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 rounded-md font-medium transition-colors"> Secondary Button </button><button class="w-full px-4 py-2 bg-transparent hover:bg-gray-100 text-gray-700 rounded-md font-medium transition-colors"> Ghost Button </button><button class="w-full px-4 py-2 bg-error-600 hover:bg-error-700 text-white rounded-md font-medium transition-colors"> Danger Button </button></div></div>',1)),s("div",Z,[t[12]||(t[12]=s("h3",{class:"font-medium text-gray-700"},"Form Elements",-1)),s("div",$,[h(s("input",{"onUpdate:modelValue":t[1]||(t[1]=e=>i.value.email=e),type:"email",placeholder:"Enter email",class:"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500"},null,512),[[w,i.value.email]]),h(s("input",{"onUpdate:modelValue":t[2]||(t[2]=e=>i.value.password=e),type:"password",placeholder:"Enter password",class:"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500"},null,512),[[w,i.value.password]]),t[11]||(t[11]=s("select",{class:"w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-primary-500"},[s("option",null,"Select an option"),s("option",null,"Option 1"),s("option",null,"Option 2")],-1))])]),t[14]||(t[14]=g('<div class="space-y-3"><h3 class="font-medium text-gray-700">Cards</h3><div class="space-y-3"><div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"><h4 class="font-medium text-gray-900 mb-2">Basic Card</h4><p class="text-sm text-gray-600">Simple card with border and shadow</p></div><div class="bg-primary-50 border border-primary-200 rounded-lg p-4"><h4 class="font-medium text-primary-900 mb-2">Primary Card</h4><p class="text-sm text-primary-700">Card with primary theme colors</p></div></div></div>',1))])]),s("div",ss,[t[18]||(t[18]=s("h2",{class:"text-xl font-semibold text-gray-800 mb-4"},"Responsive Test",-1)),s("div",ts,[t[17]||(t[17]=g('<div class="bg-white p-4 rounded-md text-center"><div class="text-2xl mb-2">📱</div><div class="text-sm font-medium">Mobile</div><div class="text-xs text-gray-500">&lt; 768px</div></div><div class="bg-white p-4 rounded-md text-center"><div class="text-2xl mb-2">💻</div><div class="text-sm font-medium">Tablet</div><div class="text-xs text-gray-500">768px - 1024px</div></div><div class="bg-white p-4 rounded-md text-center"><div class="text-2xl mb-2">🖥️</div><div class="text-sm font-medium">Desktop</div><div class="text-xs text-gray-500">&gt; 1024px</div></div>',3)),s("div",es,[s("div",rs,r(k.value),1),t[16]||(t[16]=s("div",{class:"text-sm font-medium"},"Current",-1)),s("div",os,r(o(_))+"px",1)])])])])])]))}};export{ns as default};