@dcrackel/meyersquaredui 1.0.37 → 1.0.38

package/dist/meyersquaredui.umd.js

@@ -1 +1 @@
-(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.MeyerSquaredUI={},l.Vue))})(this,function(l,e){"use strict";const i=(t,r)=>{const o=t.__vccOpts||t;for(const[d,a]of r)o[d]=a;return o},f={name:"BaseButton",props:{label:{type:String,required:!0},altText:{type:String,default:null},color:{type:String,default:"primary",validator:t=>["primary","secondary","accent"].includes(t)},backgroundColor:{type:String,default:"primary",validator:t=>["primary","secondary","accent"].includes(t)},border:{type:String,default:"none",validator:t=>["none","primary","secondary","accent","gradient1","gradient2"].includes(t)}},computed:{textColorClass(){return{primary:"text-primary",secondary:"text-secondary",accent:"text-accent"}[this.color]||"text-primary"},backgroundClass(){return{primary:"bg-primary hover:bg-accent",secondary:"bg-secondary hover:bg-accent",accent:"bg-accent hover:bg-accent"}[this.backgroundColor]||"bg-primary"},borderClass(){return{none:"",primary:"border border-primary",secondary:"border border-secondary",accent:"border border-accent",gradient1:"border-gradient-rounded-1",gradient2:"border-gradient-rounded-2"}[this.border]||""}}},h=["title","aria-label"];function u(t,r,o,d,a,n){return e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["px-4 py-2 rounded-md transition duration-300 ease-in-out",n.textColorClass,n.backgroundClass,n.borderClass]),title:o.altText||o.label,"aria-label":o.altText||o.label,onClick:r[0]||(r[0]=s=>t.$emit("click"))},e.toDisplayString(o.label),11,h)}const m=i(f,[["render",u],["__scopeId","data-v-34e83e90"]]),V={name:"BaseText",props:{tag:{type:String,default:"p",validator:t=>["h1","h2","h3","h4","h5","h6","p","span","div"].includes(t)},size:{type:String,default:"md",validator:t=>["xs","sm","md","lg","xl","2xl","3xl","4xl","5xl"].includes(t)},color:{type:String,default:"primary"},weight:{type:String,default:"normal",validator:t=>["light","normal","semibold","bold"].includes(t)}},computed:{textClasses(){const t={xs:"text-xs",sm:"text-sm",md:"lg:text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl","5xl":"text-5xl"},r={light:"font-light",normal:"font-normal",semibold:"font-semibold",bold:"font-bold"};return`${t[this.size]} ${r[this.weight]} text-${this.color}`}}};function C(t,r,o,d,a,n){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:e.normalizeClass(n.textClasses)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"])}const p=i(V,[["render",C]]),N={name:"Icon",props:{icon:{type:String,required:!0},color:{type:String,default:"primary",validator:t=>["primary","secondary","accent"].includes(t)},size:{type:String,default:"md",validator:t=>["xs","sm","md","lg","xl","2xl","3xl"].includes(t)}},computed:{colorClasses(){return{primary:"text-primary",secondary:"text-secondary",accent:"text-accent"}[this.color]||"text-primary"},sizeClasses(){return{xs:"text-xs",sm:"text-sm",md:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl"}[this.size]||"text-base"}}};function w(t,r,o,d,a,n){return e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["fas",o.icon,n.colorClasses,n.sizeClasses]),onClick:r[0]||(r[0]=s=>t.$emit("click"))},null,2)}const b=i(N,[["render",w]]),B={name:"InputField",props:{type:{type:String,default:"text"},placeholder:{type:String,default:"Search"},modelValue:{type:String,default:""}}},A=["type","placeholder"];function S(t,r,o,d,a,n){return e.openBlock(),e.createElementBlock("input",e.mergeProps({type:o.type,placeholder:o.placeholder},t.$attrs,{class:"bg-black text-secondary border-b-2 border-secondary focus:outline-none focus:border-accent w-full placeholder-secondary px-2 hover:border-accent duration-300 ease-in-out",onInput:r[0]||(r[0]=s=>t.$emit("update:modelValue",s.target.value))}),null,16,A)}const g=i(B,[["render",S]]),k={name:"SearchBox",components:{InputField:g,Icon:b},data(){return{searchQuery:""}},methods:{onSearch(){console.log("Search Query:",this.searchQuery)}}},E={class:"relative flex items-center w-full max-w-md"};function j(t,r,o,d,a,n){const s=e.resolveComponent("InputField"),c=e.resolveComponent("Icon");return e.openBlock(),e.createElementBlock("div",E,[e.createVNode(s,{modelValue:a.searchQuery,"onUpdate:modelValue":r[0]||(r[0]=x=>a.searchQuery=x),placeholder:"Search"},null,8,["modelValue"]),e.createVNode(c,{icon:"fa-search",color:"secondary",size:"sm",class:"absolute right-2",onClick:n.onSearch},null,8,["onClick"])])}const y=i(k,[["render",j]]),_="data:image/png;base64,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",z={name:"Header",components:{SearchBox:y,BaseText:p,BaseButton:m,Icon:b},data(){return{logo:_}}},T={class:"border-b border-lineGrey w-full bg-primary m-0"},G={class:"w-full hidden md:flex"},I={class:"flex items-center justify-center w-36 h-36"},X=["src"],Z={class:"flex w-full items-center border-r border-l border-lineGrey"},q={class:"hidden lg:flex w-1/3 pl-20"},W={class:"ml-8 w-2/3 flex justify-around"},M={class:"flex items-center justify-center w-36 h-36"},Y={class:"w-full flex md:hidden"},F={class:"m-4 flex justify-between"},J=["src"];function O(t,r,o,d,a,n){const s=e.resolveComponent("SearchBox"),c=e.resolveComponent("BaseText"),x=e.resolveComponent("BaseButton"),te=e.resolveComponent("Icon");return e.openBlock(),e.createElementBlock("header",T,[e.createElementVNode("section",G,[e.createElementVNode("div",I,[e.createElementVNode("img",{src:a.logo,alt:"Logo",class:"h-14 w-18 bg-accent"},null,8,X)]),e.createElementVNode("section",Z,[e.createElementVNode("div",q,[e.createVNode(s,{class:"w-24 md:w-32 lg:w-52 xl:w-64 bg-primary"})]),e.createElementVNode("nav",W,[e.createVNode(c,{color:"secondary",size:"md",tag:"p",weight:"normal",class:"border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out"},{default:e.withCtx(()=>r[0]||(r[0]=[e.createTextVNode("Tournaments")])),_:1}),e.createVNode(c,{color:"secondary",size:"md",tag:"p",weight:"normal",class:"border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out"},{default:e.withCtx(()=>r[1]||(r[1]=[e.createTextVNode("Clubs")])),_:1}),e.createVNode(c,{color:"secondary",size:"md",tag:"p",weight:"normal",class:"border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out"},{default:e.withCtx(()=>r[2]||(r[2]=[e.createTextVNode("Leaderboard")])),_:1}),e.createVNode(c,{color:"secondary",size:"md",tag:"p",weight:"normal",class:"border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out"},{default:e.withCtx(()=>r[3]||(r[3]=[e.createTextVNode("Contact")])),_:1})])]),e.createElementVNode("div",M,[e.createVNode(x,{backgroundColor:"primary",border:"secondary",color:"secondary",label:"Login",size:"xs"})])]),e.createElementVNode("section",Y,[e.createElementVNode("div",F,[e.createElementVNode("img",{src:a.logo,alt:"Logo",class:"h-10 w-14"},null,8,J),e.createVNode(te,{icon:"fa-bars",color:"secondary",size:"xl",class:"absolute right-2",onClick:t.onSearch},null,8,["onClick"])])])])}const D=i(z,[["render",O]]),H={name:"HeroBanner",components:{BaseText:p,BaseButton:m},props:{imageSrc:{type:String,required:!0},title:{type:String,required:!0},description:{type:String,required:!0},buttonLabel:{type:String,required:!0}},methods:{onClick(){this.$emit("button-click")}}},K={class:"relative w-full h-3/4 flex justify-center bg-primary m-0"},L={class:"relative w-full border-b border-l border-r border-lineGrey"},U=["src"],R={class:"hidden md:flex absolute inset-0 items-center justify-start px-8"},Q={class:"text-left text-white max-w-lg"},P={class:"flex justify-center md:hidden text-left bg-primary w-full"},$={class:"w-full px-6 py-8 text-center"};function v(t,r,o,d,a,n){const s=e.resolveComponent("BaseText"),c=e.resolveComponent("BaseButton");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("section",K,[r[0]||(r[0]=e.createElementVNode("div",{class:"hidden md:block w-36 bg-primary"},null,-1)),e.createElementVNode("div",L,[e.createElementVNode("img",{src:o.imageSrc,alt:"Hero Image",class:"w-full h-full object-cover"},null,8,U),e.createElementVNode("section",R,[e.createElementVNode("div",Q,[e.createVNode(s,{color:"secondary",tag:"h1",size:"4xl",weight:"bold",class:"mb-4"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.title),1)]),_:1}),e.createVNode(s,{color:"secondary",tag:"p",size:"lg",weight:"normal",class:"mb-6"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.description),1)]),_:1}),e.createVNode(c,{label:o.buttonLabel,color:"secondary",border:"gradient1",onClick:n.onClick},null,8,["label","onClick"])])])]),r[1]||(r[1]=e.createElementVNode("div",{class:"hidden md:block w-36 bg-primary"},null,-1))]),r[2]||(r[2]=e.createElementVNode("section",{class:"hidden md:flex border-t border-lineGrey w-full bg-primary"},[e.createElementVNode("div",{class:"hidden md:block w-36 bg-primary"}),e.createElementVNode("div",{class:"relative w-full border-b border-l border-r border-lineGrey h-36"}),e.createElementVNode("div",{class:"hidden md:block w-36 bg-primary"})],-1)),e.createElementVNode("section",P,[e.createElementVNode("div",$,[e.createVNode(s,{color:"secondary",tag:"h1",size:"2xl",weight:"bold",class:"mb-2"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.title),1)]),_:1}),e.createVNode(s,{color:"secondary",tag:"p",size:"sm",weight:"normal",class:"mb-6"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.description),1)]),_:1}),e.createVNode(c,{label:o.buttonLabel,color:"secondary",border:"gradient1",class:"w-1/2 m-auto",onClick:n.onClick},null,8,["label","onClick"])])])],64)}const ee=i(H,[["render",v]]);l.BaseIcon=m,l.BaseText=p,l.Header=D,l.HeroBanner=ee,l.Icon=b,l.InputField=g,l.Searchbox=y,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.MeyerSquaredUI={},s.Vue))})(this,function(s,e){"use strict";const d=(t,o)=>{const r=t.__vccOpts||t;for(const[i,l]of o)r[i]=l;return r},y={name:"BaseText",props:{tag:{type:String,default:"p",validator:t=>["h1","h2","h3","h4","h5","h6","p","span","div"].includes(t)},size:{type:String,default:"md"},color:{type:String,default:"primary"},hoverColor:{type:String,default:""},weight:{type:String,default:"normal",validator:t=>["thin","light","normal","semibold","bold"].includes(t)}},computed:{textClasses(){const t={xs:"text-xs",sm:"text-sm",md:"lg:text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl","5xl":"text-5xl"},o={thin:"font-thin font-[100]",light:"font-light font-[300]",normal:"font-normal font-[400]",semibold:"font-semibold font-[600]",bold:"font-bold font-[700]"},r=this.hoverColor?`hover:text-${this.hoverColor}`:"";return`${this.size.split(" ").map(l=>{const[n,a]=l.includes(":")?l.split(":"):[null,l];return n?`${n}:${t[a]}`:t[a]}).filter(Boolean).join(" ")} ${o[this.weight]} text-${this.color} ${r} font-raleway`}}};function h(t,o,r,i,l,n){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.tag),{class:e.normalizeClass(n.textClasses)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"])}const m=d(y,[["render",h]]),u={name:"Icon",props:{icon:{type:String,required:!0},color:{type:String,default:"primary",validator:t=>["primary","secondary","accent"].includes(t)},size:{type:String,default:"md",validator:t=>["xs","sm","md","lg","xl","2xl","3xl"].includes(t)},type:{type:String,default:"fa-solid",validator:t=>["fa-thin","fa-sharp"].includes(t)}},computed:{colorClasses(){return{primary:"text-primary",secondary:"text-secondary",accent:"text-accent"}[this.color]||"text-primary"},sizeClasses(){return{xs:"text-xs",sm:"text-sm",md:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl"}[this.size]||"text-base"}}};function C(t,o,r,i,l,n){return e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass([r.type,r.icon,n.colorClasses,n.sizeClasses]),onClick:o[0]||(o[0]=a=>t.$emit("click"))},null,2)}const p=d(u,[["render",C]]),w={name:"BaseButton",components:{BaseText:m,Icon:p},props:{label:{type:String,required:!0},altText:{type:String,default:null},size:{type:String,default:"md"},weight:{type:String,default:"normal"},color:{type:String,default:"primary",validator:t=>["primary","secondary","accent"].includes(t)},hoverColor:{type:String,default:"",validator:t=>["primary","secondary","accent"].includes(t)},backgroundColor:{type:String,default:"primary",validator:t=>["primary","secondary","accent"].includes(t)},border:{type:String,default:"none",validator:t=>["none","primary","secondary","accent","gradient1","gradient2"].includes(t)},padding:{type:String,default:"px-4 py-2"},iconName:{type:String,default:""},iconColor:{type:String,default:"primary",validator:t=>["primary","secondary","accent"].includes(t)},iconSize:{control:{type:"select",options:["xs","sm","md","lg","xl","2xl","3xl"]},description:"Icon size"},iconType:{type:String,default:"fa-solid",validator:t=>["fa-thin","fa-sharp"].includes(t)},align:{type:String,default:"center",validator:t=>["left","center","right","between"].includes(t)}},computed:{paddingClass(){return this.padding},textColorClass(){return{primary:"text-primary",secondary:"text-secondary",accent:"text-accent"}[this.color]||"text-primary"},backgroundClass(){return{primary:"bg-primary hover:bg-accent",secondary:"bg-secondary hover:bg-primary",accent:"bg-accent hover:bg-accent"}[this.backgroundColor]||"bg-primary"},borderClass(){return{none:"",primary:"border border-primary",secondary:"border border-secondary",accent:"border border-accent",gradient1:"border-gradient-rounded-1",gradient2:"border-gradient-rounded-2"}[this.border]||""},alignmentClass(){return{left:"justify-start",center:"justify-center",right:"justify-end",between:"justify-between"}[this.align]||"justify-center"}}},V=["title","aria-label"];function S(t,o,r,i,l,n){const a=e.resolveComponent("BaseText"),c=e.resolveComponent("Icon");return e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["rounded-md transition duration-300 ease-in-out",n.paddingClass,n.textColorClass,n.backgroundClass,n.borderClass]),title:r.altText||r.label,"aria-label":r.altText||r.label,onClick:o[0]||(o[0]=b=>t.$emit("click"))},[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center",n.alignmentClass,"space-x-2"])},[e.createVNode(a,{color:r.color,hoverColor:r.hoverColor,size:r.size,weight:r.weight},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.label),1)]),_:1},8,["color","hoverColor","size","weight"]),e.createVNode(c,{icon:r.iconName,color:r.iconColor,size:r.iconSize,type:r.iconType},null,8,["icon","color","size","type"])],2)],10,V)}const g=d(w,[["render",S],["__scopeId","data-v-e983c5cf"]]),N={name:"InputField",props:{type:{type:String,default:"text"},placeholder:{type:String,default:"Search"},modelValue:{type:String,default:""}}},k=["type","placeholder"];function B(t,o,r,i,l,n){return e.openBlock(),e.createElementBlock("input",e.mergeProps({type:r.type,placeholder:r.placeholder},t.$attrs,{class:"bg-black text-secondary border-b-2 border-secondary focus:outline-none focus:border-accent w-full placeholder-secondary px-2 hover:border-accent duration-300 ease-in-out",onInput:o[0]||(o[0]=a=>t.$emit("update:modelValue",a.target.value))}),null,16,k)}const f=d(N,[["render",B]]),z={name:"SearchBox",components:{InputField:f,Icon:p},data(){return{searchQuery:""}},methods:{onSearch(){console.log("Search Query:",this.searchQuery)}}},A={class:"relative flex items-center w-full max-w-md"};function E(t,o,r,i,l,n){const a=e.resolveComponent("InputField"),c=e.resolveComponent("Icon");return e.openBlock(),e.createElementBlock("div",A,[e.createVNode(a,{modelValue:l.searchQuery,"onUpdate:modelValue":o[0]||(o[0]=b=>l.searchQuery=b),placeholder:"Search"},null,8,["modelValue"]),e.createVNode(c,{icon:"fa-search",color:"secondary",size:"sm",class:"absolute right-2",onClick:n.onSearch},null,8,["onClick"])])}const x=d(z,[["render",E]]),j="data:image/png;base64,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",_={name:"Header",components:{SearchBox:x,BaseText:m,BaseButton:g,Icon:p},data(){return{logo:j}}},T={class:"border-b border-lineGrey w-full bg-primary m-0"},G={class:"w-full hidden md:flex"},I={class:"w-[150px] h-[150px] bg-primary flex-shrink-0 flex items-center justify-center"},M=["src"],X={class:"flex w-full items-center border-r border-l border-lineGrey"},Z={class:"hidden lg:flex w-1/3 pl-20"},q={class:"ml-8 w-2/3 flex justify-around"},W={class:"w-[150px] h-[150px] bg-primary flex-shrink-0 flex items-center justify-center"},Y={class:"w-full flex md:hidden"},F={class:"m-2 flex justify-between w-full"},J=["src"];function L(t,o,r,i,l,n){const a=e.resolveComponent("SearchBox"),c=e.resolveComponent("BaseText"),b=e.resolveComponent("BaseButton"),ee=e.resolveComponent("Icon");return e.openBlock(),e.createElementBlock("header",T,[e.createElementVNode("section",G,[e.createElementVNode("div",I,[e.createElementVNode("img",{src:l.logo,alt:"Logo",class:"h-14 w-18 bg-accent"},null,8,M)]),e.createElementVNode("section",X,[e.createElementVNode("div",Z,[e.createVNode(a,{class:"w-24 md:w-32 lg:w-52 xl:w-64 bg-primary"})]),e.createElementVNode("nav",q,[e.createVNode(c,{color:"secondary",size:"md",tag:"p",weight:"normal",class:"border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out"},{default:e.withCtx(()=>o[0]||(o[0]=[e.createTextVNode("Tournaments")])),_:1}),e.createVNode(c,{color:"secondary",size:"md",tag:"p",weight:"normal",class:"border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out"},{default:e.withCtx(()=>o[1]||(o[1]=[e.createTextVNode("Clubs")])),_:1}),e.createVNode(c,{color:"secondary",size:"md",tag:"p",weight:"normal",class:"border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out"},{default:e.withCtx(()=>o[2]||(o[2]=[e.createTextVNode("Leaderboard")])),_:1}),e.createVNode(c,{color:"secondary",size:"md",tag:"p",weight:"normal",class:"border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out"},{default:e.withCtx(()=>o[3]||(o[3]=[e.createTextVNode("Contact")])),_:1})])]),e.createElementVNode("div",W,[e.createVNode(b,{backgroundColor:"primary",border:"secondary",color:"secondary",label:"Login",size:"xs"})])]),e.createElementVNode("section",Y,[e.createElementVNode("div",F,[e.createElementVNode("img",{src:l.logo,alt:"Logo",class:"h-6 w-9"},null,8,J),e.createVNode(ee,{icon:"fa-bars",color:"secondary",size:"xl",class:"",onClick:t.onSearch},null,8,["onClick"])])])])}const D=d(_,[["render",L]]),O={name:"HeroBanner",components:{BaseText:m,BaseButton:g},props:{imageSrc:{type:String,required:!0},title:{type:String,required:!0},description:{type:String,required:!0},buttonLabel:{type:String,required:!0}},data(){return{isMobile:!1}},computed:{backgroundStyle(){return{backgroundImage:`url(${this.imageSrc})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat"}}},mounted(){this.checkScreenSize(),window.addEventListener("resize",this.checkScreenSize)},beforeDestroy(){window.removeEventListener("resize",this.checkScreenSize)},methods:{checkScreenSize(){this.isMobile=window.innerWidth<768},onClick(){this.$emit("button-click")}}},H={class:"relative w-full md:border-b md:border-l md:border-r border-lineGrey"},K=["src"],U={class:"hidden md:flex absolute inset-0 items-center justify-start px-8"},R={class:"text-left text-white max-w-lg"},Q={key:1,class:"flex justify-center text-left w-full px-6 py-8"},P={class:"w-full"};function v(t,o,r,i,l,n){const a=e.resolveComponent("BaseText"),c=e.resolveComponent("BaseButton");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("section",{class:"relative w-full h-3/4 flex justify-center bg-primary m-0",style:e.normalizeStyle(n.backgroundStyle)},[o[0]||(o[0]=e.createElementVNode("div",{class:"hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"},null,-1)),e.createElementVNode("div",H,[l.isMobile?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("img",{key:0,src:r.imageSrc,alt:"Hero Image",class:"w-full h-full object-cover"},null,8,K)),e.createElementVNode("section",U,[e.createElementVNode("div",R,[e.createVNode(a,{color:"secondary",tag:"h1",size:"4xl",weight:"bold",class:"mb-4"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.title),1)]),_:1}),e.createVNode(a,{color:"secondary",tag:"p",size:"lg",weight:"normal",class:"mb-6"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.description),1)]),_:1}),e.createVNode(c,{label:r.buttonLabel,color:"secondary",border:"gradient1",onClick:n.onClick},null,8,["label","onClick"])])]),l.isMobile?(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",P,[e.createVNode(a,{color:"secondary",tag:"h1",size:"xl",weight:"bold",class:"mb-2 w-48"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.title),1)]),_:1}),e.createVNode(a,{color:"secondary",tag:"p",size:"xs",weight:"normal",class:"mb-6 w-48"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.description),1)]),_:1}),e.createVNode(c,{label:r.buttonLabel,size:"xs",color:"secondary",border:"gradient1",class:"w-1/2 m-auto",onClick:n.onClick},null,8,["label","onClick"])])])):e.createCommentVNode("",!0)]),o[1]||(o[1]=e.createElementVNode("div",{class:"hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"},null,-1))],4),o[2]||(o[2]=e.createElementVNode("section",{class:"hidden md:flex border-t border-lineGrey w-full bg-primary"},[e.createElementVNode("div",{class:"w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"}),e.createElementVNode("div",{class:"relative w-full border-b border-l border-r border-lineGrey h-36"}),e.createElementVNode("div",{class:"w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"})],-1))],64)}const $=d(O,[["render",v]]);s.BaseIcon=g,s.BaseText=m,s.Header=D,s.HeroBanner=$,s.Icon=p,s.InputField=f,s.Searchbox=x,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-.border-gradient-rounded-1[data-v-34e83e90]{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#ff7a00,#a3412a);background-clip:padding-box,border-box;background-origin:padding-box,border-box;transition:background-size .5s ease-in-out,color .5s ease-in-out}.border-gradient-rounded-1[data-v-34e83e90]:hover{background:linear-gradient(to right,#ff7a00,#ffa238);color:#fff}.border-gradient-rounded-2[data-v-34e83e90]{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#009dff,#25e07c);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.border-gradient-rounded-2[data-v-34e83e90]:hover{background:linear-gradient(to right,#009dff,#25e07c);color:#fff}
+.border-gradient-rounded-1[data-v-e983c5cf]{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#ff7a00,#a3412a);background-clip:padding-box,border-box;background-origin:padding-box,border-box;transition:background-size .5s ease-in-out,color .5s ease-in-out}.border-gradient-rounded-1[data-v-e983c5cf]:hover{background:linear-gradient(to right,#ff7a00,#ffa238);color:#fff}.border-gradient-rounded-2[data-v-e983c5cf]{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#009dff,#25e07c);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.border-gradient-rounded-2[data-v-e983c5cf]:hover{background:linear-gradient(to right,#009dff,#25e07c);color:#fff}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/meyersquaredui",
   "private": false,
-  "version": "1.0.37",
+  "version": "1.0.38",
   "type": "module",
   "main": "dist/meyersquaredui.cjs.js",
   "module": "dist/meyersquaredui.esm.js",
@@ -25,7 +25,7 @@
     "storybook": "concurrently \"npm run watch:tailwind\" \"npm run watch:storybook\"",
     "watch:storybook": "storybook dev -p 6006",
     "watch:tailwind": "tailwindcss build ./tailwind/tailwind.css -o ./tailwind/output.css --watch",
-    "copy:css": "copy .\\dist\\ui-tailwind.css ..\\HemaTournamentPublic\\public\\ui-tailwind.css",
+    "copy:css": "copy .\\dist\\ui-tailwind.css ..\\HemaTournamentPublic\\src\\ui-tailwind.css",
     "lint": "eslint --ext .ts,.vue .",
     "test": "vitest",
     "coverage": "vitest run --coverage"

package/src/mocks/getArticles.js

@@ -0,0 +1,19 @@
+const mockArticles = [
+    {
+        image: 'https://fencing.net/wp-content/uploads/2011/10/Catania2011-Medals.jpg',
+        articleTitle: 'How the Ranking System Works',
+        description: 'Explore the mechanics behind the HEMA ranking system. Understand how points are awarded, the impact of tournament participation, and what it takes to rise in the rankings.',
+    },
+    {
+        image: 'https://faitsdarmes.com/img/cms/articles/cover-amhe.png',
+        articleTitle: 'How Does the Number of Bouts Affect Your Event?',
+        description: 'Discover how the number of bouts can influence the flow and outcome of your HEMA event. Learn strategies to optimize bout numbers for better participant experience and accurate rankings.',
+    },
+    {
+        image: 'https://londonhistoricalfencing.club/wp-content/uploads/2023/06/DSF6991-e1678732197277.jpg',
+        articleTitle: 'Rules That Make Things Easy',
+        description: 'Simplify your HEMA event management with a clear understanding of essential rules. From scoring systems to conduct guidelines, this article covers the key rules that ensure smooth competitions.',
+    },
+];
+
+export default mockArticles;

package/src/mocks/getTopFencers.js

@@ -0,0 +1,157 @@
+const mockTopFencers = [
+    {
+        "PersonId": 1,
+        "DisplayName": "Dwain Crackel",
+        "ClubId": 10,
+        "HEMARatings": [
+            {
+                "Rank": 926,
+                "Rating": 1370,
+                "WeaponId": 1
+            }
+        ],
+        "M2Ratings": [
+            {
+                "WeaponId": 1,
+                "FormattedRating": "E24"
+            }
+        ],
+        "Club": {
+            "ClubId": 10,
+            "Name": "Columbus United Fencing Club"
+        },
+        "ProfileImage": {
+            "URL": "https://randomuser.me/api/portraits/men/22.jpg",
+            "AltText": null
+        }
+    },
+    {
+        "PersonId": 2,
+        "DisplayName": "Kyle Edwards",
+        "ClubId": 6,
+        "HEMARatings": [],
+        "M2Ratings": [
+            {
+                "WeaponId": 1,
+                "FormattedRating": "D24"
+            }
+        ],
+        "Club": {
+            "ClubId": 6,
+            "Name": "SwordPlay Society"
+        },
+        "ProfileImage": null
+    },
+    {
+        "PersonId": 3,
+        "DisplayName": "Dave Larabee",
+        "ClubId": 3,
+        "HEMARatings": [],
+        "M2Ratings": [
+            {
+                "WeaponId": 1,
+                "FormattedRating": "C24"
+            }
+        ],
+        "Club": {
+            "ClubId": 3,
+            "Name": "Sword & Blade of Callie"
+        },
+        "ProfileImage": null
+    },
+    {
+        "PersonId": 4,
+        "DisplayName": "Kim Bullock",
+        "ClubId": 1,
+        "HEMARatings": [],
+        "M2Ratings": [],
+        "Club": {
+            "ClubId": 1,
+            "Name": "Acme Fencing Club"
+        },
+        "ProfileImage": {
+            "URL": "https://randomuser.me/api/portraits/women/45.jpg",
+            "AltText": null
+        }
+    },
+    {
+        "PersonId": 5,
+        "DisplayName": "Darlene Acevedo",
+        "ClubId": 9,
+        "HEMARatings": [],
+        "M2Ratings": [],
+        "Club": {
+            "ClubId": 9,
+            "Name": "Cats Cutlass Club of Canton"
+        },
+        "ProfileImage": {
+            "URL": "https://randomuser.me/api/portraits/women/30.jpg",
+            "AltText": null
+        }
+    },
+    {
+        "PersonId": 6,
+        "DisplayName": "Courtney Medina",
+        "ClubId": 3,
+        "HEMARatings": [],
+        "M2Ratings": [],
+        "Club": {
+            "ClubId": 3,
+            "Name": "Sword & Blade of Callie"
+        },
+        "ProfileImage": null
+    },
+    {
+        "PersonId": 7,
+        "DisplayName": "Emily Carlson",
+        "ClubId": 4,
+        "HEMARatings": [],
+        "M2Ratings": [],
+        "Club": {
+            "ClubId": 4,
+            "Name": "Guardians of the Guard"
+        },
+        "ProfileImage": null
+    },
+    {
+        "PersonId": 8,
+        "DisplayName": "Jamie Bittle",
+        "ClubId": 2,
+        "HEMARatings": [],
+        "M2Ratings": [],
+        "Club": {
+            "ClubId": 2,
+            "Name": "Historical Fencing Of Anywhere"
+        },
+        "ProfileImage": {
+            "URL": "https://randomuser.me/api/portraits/women/41.jpg",
+            "AltText": null
+        }
+    },
+    {
+        "PersonId": 9,
+        "DisplayName": "Sean McCoy",
+        "ClubId": 7,
+        "HEMARatings": [],
+        "M2Ratings": [],
+        "Club": {
+            "ClubId": 7,
+            "Name": "Hilt & Heart"
+        },
+        "ProfileImage": null
+    },
+    {
+        "PersonId": 10,
+        "DisplayName": "Jamie Doe",
+        "ClubId": 7,
+        "HEMARatings": [],
+        "M2Ratings": [],
+        "Club": {
+            "ClubId": 7,
+            "Name": "Hilt & Heart"
+        },
+        "ProfileImage": null
+    }
+];
+
+export default mockTopFencers;

package/src/mocks/getTournamentsMock.js

@@ -0,0 +1,185 @@
+const mockTournaments =
+    [
+        {
+            "TournamentId": 63,
+            "Name": "Claw and Order",
+            "StartDate": "2024-11-10",
+            "EndDate": "2024-11-10",
+            "Description": "Join us for a purr-fect day of sword fighting where justice is served with a scratch!",
+            "HostedOnM2": false,
+            "ImagesURLs": "https://meyer-squared-95db07154bdc.herokuapp.com/uploads/t-69b4aae4.png",
+            "ImagesAltTexts": "Catnip Fencing image",
+            "Club": {
+                "Name": "Acme Fencing Club"
+            },
+            "Address": {
+                "Name": "Test Location",
+                "City": "Delaware",
+                "State": "OH"
+            }
+        },
+        {
+            "TournamentId": 64,
+            "Name": "Fencing Fur-midable",
+            "StartDate": "2024-11-24",
+            "EndDate": "2024-11-24",
+            "Description": "Compete in a fur-ocious HEMA tournament where only the most fur-midable fighters will prevail.",
+            "HostedOnM2": false,
+            "ImagesURLs": "https://meyersquared.com/uploads/t-90dc6fe8.png",
+            "ImagesAltTexts": "Catnip Paradise  image",
+            "Club": {
+                "Name": "Acme Fencing Club"
+            },
+            "Address": {
+                "Name": "Test Location",
+                "City": "Delaware",
+                "State": "OH"
+            }
+        },
+        {
+            "TournamentId": 65,
+            "Name": "Cat-astrophic Combat",
+            "StartDate": "2024-12-08",
+            "EndDate": "2024-12-08",
+            "Description": "Prepare for a cat-astrophic clash of claws and blades in this intense one-day tournament!",
+            "HostedOnM2": false,
+            "ImagesURLs": "https://i.ytimg.com/vi/ieQglgIMfao/maxresdefault.jpg",
+            "ImagesAltTexts": "This is alt text",
+            "Club": {
+                "Name": "Acme Fencing Club"
+            },
+            "Address": {
+                "Name": "Test Location",
+                "City": "Delaware",
+                "State": "OH"
+            }
+        },
+        {
+            "TournamentId": 66,
+            "Name": "Paws and Blades",
+            "StartDate": "2024-12-15",
+            "EndDate": "2024-12-15",
+            "Description": "A one-day event where warriors paw-se to engage in intense bouts of skill and strategy.",
+            "HostedOnM2": false,
+            "ImagesURLs": "https://meyer-squared-95db07154bdc.herokuapp.com/uploads/t-4.png",
+            "ImagesAltTexts": "alt text",
+            "Club": {
+                "Name": "Acme Fencing Club"
+            },
+            "Address": {
+                "Name": "Test Location",
+                "City": "Delaware",
+                "State": "OH"
+            }
+        },
+        {
+            "TournamentId": 67,
+            "Name": "Mew-tilate the Opposition",
+            "StartDate": "2024-12-22",
+            "EndDate": "2024-12-23",
+            "Description": "A two-day tournament where fighters claw their way to the top to mew-tilate the competition.",
+            "HostedOnM2": false,
+            "ImagesURLs": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtxO6k-C-9LYcukGvSD-3rZlsuDIu9mXfNoS4MuxHeyA&s",
+            "ImagesAltTexts": "more alt text",
+            "Club": {
+                "Name": "Acme Fencing Club"
+            },
+            "Address": {
+                "Name": "Test Location",
+                "City": "Delaware",
+                "State": "OH"
+            }
+        },
+        {
+            "TournamentId": 68,
+            "Name": "Feline Frenzy",
+            "StartDate": "2025-01-05",
+            "EndDate": "2025-01-05",
+            "Description": "Kick off the new year with a fierce feline frenzy of swords and skills in this action-packed tournament!",
+            "HostedOnM2": false,
+            "ImagesURLs": "https://ih1.redbubble.net/image.4657842394.6345/flat,750x,075,f-pad,750x1000,f8f8f8.u3.jpg",
+            "ImagesAltTexts": "alt text",
+            "Club": {
+                "Name": "Acme Fencing Club"
+            },
+            "Address": {
+                "Name": "Test Location",
+                "City": "Delaware",
+                "State": "OH"
+            }
+        },
+        {
+            "TournamentId": 69,
+            "Name": "Catfight Championship",
+            "StartDate": "2025-01-12",
+            "EndDate": "2025-01-13",
+            "Description": "Who will be crowned the top cat in this two-day championship of claws and steel?",
+            "HostedOnM2": false,
+            "ImagesURLs": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRG8z6ZGh7NP46JgZAY1uRXR6znJizLhBIa-w&s",
+            "ImagesAltTexts": "text",
+            "Club": {
+                "Name": "Acme Fencing Club"
+            },
+            "Address": {
+                "Name": "Test Location",
+                "City": "Delaware",
+                "State": "OH"
+            }
+        },
+        {
+            "TournamentId": 70,
+            "Name": "Fur-tissimo Fencing",
+            "StartDate": "2025-01-20",
+            "EndDate": "2025-01-20",
+            "Description": "Test your speed and strength in this fur-tissimo fencing competition where quick paws win the day.",
+            "HostedOnM2": false,
+            "ImagesURLs": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7Rgb6Yjgcr8M-kfPWaNnuQiyj3LscU6M8fQ&s",
+            "ImagesAltTexts": "text",
+            "Club": {
+                "Name": "Acme Fencing Club"
+            },
+            "Address": {
+                "Name": "Test Location",
+                "City": "Delaware",
+                "State": "OH"
+            }
+        },
+        {
+            "TournamentId": 71,
+            "Name": "Mittens of Mayhem",
+            "StartDate": "2025-02-02",
+            "EndDate": "2025-02-02",
+            "Description": "Step into the ring of mayhem and show your prowess with mittens on in this one-day spectacle.",
+            "HostedOnM2": false,
+            "ImagesURLs": null,
+            "ImagesAltTexts": null,
+            "Club": {
+                "Name": "Acme Fencing Club"
+            },
+            "Address": {
+                "Name": "Test Location",
+                "City": "Delaware",
+                "State": "OH"
+            }
+        },
+        {
+            "TournamentId": 72,
+            "Name": "Kitty Cutlass Clash",
+            "StartDate": "2025-02-09",
+            "EndDate": "2025-02-11",
+            "Description": "A three-day extravaganza of cutlass duels and catty rivalries to determine the ultimate kitty warrior!",
+            "HostedOnM2": false,
+            "ImagesURLs": null,
+            "ImagesAltTexts": null,
+            "Club": {
+                "Name": "Acme Fencing Club"
+            },
+            "Address": {
+                "Name": "Test Location",
+                "City": "Delaware",
+                "State": "OH"
+            }
+        }
+    ];
+
+export default mockTournaments;

package/src/stories/Atoms/BaseButton/BaseButton.stories.js

@@ -1,4 +1,5 @@
 import BaseButton from './BaseButton.vue';
+import Icon from '../../Atoms/Icon/Icon.vue';
 
 export default {
     title: 'Atoms/BaseButton',
@@ -7,6 +8,8 @@ export default {
         label: 'Click Me',
         color: 'primary',
         border: 'none',
+        padding: 'px-4 py-2',
+        icon: null, // Default: no icon
     },
     argTypes: {
         label: {
@@ -18,12 +21,12 @@ export default {
                 type: 'select',
                 options: ['primary', 'secondary', 'accent'],
             },
-            description: 'The background color of the button',
+            description: 'The text color of the button',
         },
         border: {
             control: {
                 type: 'select',
-                options: ['none', 'primary', 'secondary', 'gradient', 'gradient2'],
+                options: ['none', 'primary', 'secondary', 'accent', 'gradient1', 'gradient2'],
             },
             description: 'The border style of the button',
         },
@@ -31,12 +34,29 @@ export default {
             control: 'text',
             description: 'Optional alt text for accessibility (aria-label)',
         },
+        padding: {
+            control: 'text',
+            description: 'Custom padding classes for the button (e.g., "px-6 py-3")',
+        },
+        icon: {
+            control: 'none', // We will pass the actual component with props
+            description: 'Optional icon component to render inside the button',
+        },
+        hoverColor: {
+            control: {
+                type: 'select',
+                options: ['primary', 'secondary', 'accent', ''],
+            },
+            description: 'Optional hover color for the text inside the button',
+        },
     },
 };
 
 const Template = (args) => ({
-    components: { BaseButton },
+    components: { BaseButton, Icon },
     setup() {
+        // Attach icon component to args
+        args.icon = Icon;
         return { args };
     },
     template: '<BaseButton v-bind="args" />',
@@ -48,36 +68,19 @@ Default.args = {
     color: 'secondary',
     backgroundColor: 'primary',
     border: 'none',
+    padding: 'px-4 py-2',
+    icon: null,
 };
 
-export const PrimaryWithGradientBorder = Template.bind({});
-PrimaryWithGradientBorder.args = {
-    label: 'Primary Button',
-    color: 'secondary',
-    backgroundColor: 'primary',
-    border: 'gradient1',
-};
-
-export const PrimaryWithGradientBorderTwo = Template.bind({});
-PrimaryWithGradientBorderTwo.args = {
-    label: 'Primary Button',
-    color: 'secondary',
-    backgroundColor: 'primary',
-    border: 'gradient2',
-};
-
-export const SecondaryWithAccentBorder = Template.bind({});
-SecondaryWithAccentBorder.args = {
-    label: 'Secondary Button',
-    color: 'secondary',
-    backgroundColor: 'primary',
-    border: 'accent',
-};
-
-export const BlackBorderWithWhiteBackground = Template.bind({});
-BlackBorderWithWhiteBackground.args = {
-    label: 'Secondary Button',
+export const ButtonWithIcon = Template.bind({});
+ButtonWithIcon.args = {
+    label: 'Icon Button',
     color: 'primary',
     backgroundColor: 'secondary',
-    border: 'primary',
-};
+    hoverColor: 'accent',
+    border: 'accent',
+    padding: 'px-4 py-2',
+    iconName: 'fa-thin fa-arrow-right',
+    iconColor: 'primary',
+    iconSize: 'lg'
+};