e60e24ab23
IconButton adds: - xs size (36px) for compact chrome - ghost variant (transparent → brand-wash on hover) - shadow prop so callers opt into elevation per-instance Callsites collapsed: - Navbar desktop + mobile cart buttons now share one IconButton (accent variant; mobile uses shadow='md'). CART_CLASS constant deleted — the variant owns that coloring now. - DesignLayout mobile sheet close uses IconButton ghost xs. Tone-coupled pills left inline by design: - Navbar desktop search trigger — visual tone bound to navbar variants - Search overlay input-row close — tone bound to Search's internal tones - Hero secondary CTA — tone bound to Hero's internal tones - Navbar overlay menu cart row — compound pill + inline count chip, one-off pattern
1 line
2.1 KiB
JavaScript
1 line
2.1 KiB
JavaScript
import{$ as e,l as t,m as n,o as r,tt as i,u as a,w as o,x as s}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as c}from"./Icon-BaDkTwYL.js";var l=[`type`,`aria-label`],u={key:0,class:`absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-danger text-white text-[10px] font-bold flex items-center justify-center`},d={__name:`IconButton`,props:{icon:{type:String,required:!0},iconSize:{type:Number,default:null},iconStrokeWidth:{type:[Number,String],default:null},variant:{type:String,default:`float`,validator:e=>[`float`,`accent`,`cream-wash`,`brand-wash`,`ghost`].includes(e)},size:{type:String,default:`lg`,validator:e=>[`xs`,`sm`,`md`,`lg`].includes(e)},shadow:{type:String,default:null,validator:e=>e===null||[`none`,`sm`,`md`,`lg`].includes(e)},count:{type:Number,default:null},ariaLabel:{type:String,default:``},type:{type:String,default:`button`}},emits:[`click`],setup(d){let f=d,p=new Set([`float`,`accent`]),m={float:`bg-brand-float text-accent`,accent:`bg-accent text-brand hover:bg-accent-soft`,"cream-wash":`bg-cream-wash text-cream hover:bg-cream-wash-strong`,"brand-wash":`bg-brand-wash text-brand`,ghost:`bg-transparent text-muted hover:bg-brand-wash hover:text-brand`},h={float:`shadow-lg`,accent:``,"cream-wash":``,"brand-wash":``,ghost:``},g={none:``,sm:`shadow-sm`,md:`shadow-md`,lg:`shadow-lg`},_={xs:{box:`w-9 h-9`,icon:18},sm:{box:`w-10 h-10`,icon:20},md:{box:`w-11 h-11`,icon:20},lg:{box:`w-14 h-14`,icon:22}},v=r(()=>p.has(f.variant)),y=r(()=>v.value?`transition-transform duration-base ease-out hover:-translate-y-0.5 active:translate-y-0`:`transition-colors`),b=r(()=>f.shadow===null?h[f.variant]:g[f.shadow]),x=r(()=>[`relative inline-flex items-center justify-center rounded-full`,_[f.size].box,m[f.variant],b.value,y.value]),S=r(()=>f.iconSize??_[f.size].icon);return(r,f)=>(s(),a(`button`,{type:d.type,class:e(x.value),"aria-label":d.ariaLabel||void 0,onClick:f[0]||=e=>r.$emit(`click`,e)},[n(c,{name:d.icon,size:S.value,"stroke-width":d.iconStrokeWidth??void 0},null,8,[`name`,`size`,`stroke-width`]),d.count!==null&&d.count>0?(s(),a(`span`,u,i(d.count),1)):t(``,!0),o(r.$slots,`default`)],10,l))}};export{d as t}; |