next-ui-lib 0.1.27 → 0.1.29

package/dist/ui.es.js

@@ -59,7 +59,7 @@ const Mn = {
     }
   );
 };
-function Ri(e) {
+function Ti(e) {
   return e && e.__esModule ? e.default : e;
 }
 function H(e, i, n) {
@@ -70,7 +70,7 @@ function H(e, i, n) {
     writable: !0
   }) : e[i] = n, e;
 }
-var Me, b, Ti, te, Hi, ri, ye = {}, Wi = [], Bn = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+var Me, b, Ri, te, Hi, ri, ye = {}, Wi = [], Bn = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
 function V(e, i) {
   for (var n in i) e[n] = i[n];
   return e;
@@ -99,7 +99,7 @@ function be(e, i, n, a, s) {
     __c: null,
     __h: null,
     constructor: void 0,
-    __v: s ?? ++Ti
+    __v: s ?? ++Ri
   };
   return s == null && b.vnode != null && b.vnode(f), f;
 }
@@ -318,7 +318,7 @@ Me = Wi.slice, b = {
     }
     throw e;
   }
-}, Ti = 0, E.prototype.setState = function(e, i) {
+}, Ri = 0, E.prototype.setState = function(e, i) {
   var n;
   n = this.__s != null && this.__s !== this.state ? this.__s : this.__s = V({}, this.state), typeof e == "function" && (e = e(V({}, n), this.props)), e && V(n, e), e != null && this.__v && (i && this.__h.push(i), ti(this));
 }, E.prototype.forceUpdate = function(e) {
@@ -348,13 +348,13 @@ function u(e, i, n, a, s) {
   if (typeof e == "function" && (f = e.defaultProps)) for (o in f) d[o] === void 0 && (d[o] = f[o]);
   return b.vnode && b.vnode(r), r;
 }
-function Rn(e, i) {
+function Tn(e, i) {
   try {
     window.localStorage[`emoji-mart.${e}`] = JSON.stringify(i);
   } catch {
   }
 }
-function Tn(e) {
+function Rn(e) {
   try {
     const i = window.localStorage[`emoji-mart.${e}`];
     if (i) return JSON.parse(i);
@@ -362,8 +362,8 @@ function Tn(e) {
   }
 }
 var U = {
-  set: Rn,
-  get: Tn
+  set: Tn,
+  get: Rn
 };
 const je = /* @__PURE__ */ new Map(), Hn = [
   {
@@ -703,7 +703,7 @@ async function Nn(e) {
     }
     F.originalCategories = F.categories;
   }
-  if (q = (typeof e.i18n == "function" ? await e.i18n() : e.i18n) || (a == "en" ? /* @__PURE__ */ Ri(Ji) : await vi(`https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/i18n/${a}.json`)), e.custom) for (let r in e.custom) {
+  if (q = (typeof e.i18n == "function" ? await e.i18n() : e.i18n) || (a == "en" ? /* @__PURE__ */ Ti(Ji) : await vi(`https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/i18n/${a}.json`)), e.custom) for (let r in e.custom) {
     r = parseInt(r);
     const l = e.custom[r], t = e.custom[r - 1];
     if (!(!l.emojis || !l.emojis.length)) {
@@ -1260,7 +1260,7 @@ b.__e = function(e, i, n) {
   aa(e, i, n);
 };
 var xi = b.unmount;
-function Re() {
+function Te() {
   this.__u = 0, this.t = null, this.__b = null;
 }
 function fn(e) {
@@ -1273,7 +1273,7 @@ function ke() {
 b.unmount = function(e) {
   var i = e.__c;
   i && i.__R && i.__R(), i && e.__h === !0 && (e.type = null), xi && xi(e);
-}, (Re.prototype = new E()).__c = function(e, i) {
+}, (Te.prototype = new E()).__c = function(e, i) {
   var n = i.__c, a = this;
   a.t == null && (a.t = []), a.t.push(n);
   var s = fn(a.__v), f = !1, o = function() {
@@ -1299,9 +1299,9 @@ b.unmount = function(e) {
   a.__u++ || r || a.setState({
     __e: a.__b = a.__v.__k[0]
   }), e.then(o, o);
-}, Re.prototype.componentWillUnmount = function() {
+}, Te.prototype.componentWillUnmount = function() {
   this.t = [];
-}, Re.prototype.render = function(e, i) {
+}, Te.prototype.render = function(e, i) {
   if (this.__b) {
     if (this.__v.__k) {
       var n = document.createElement("div"), a = this.__v.__k[0].__c;
@@ -2281,7 +2281,7 @@ class Ke extends ea {
   }
   constructor(i) {
     super(i, {
-      styles: /* @__PURE__ */ Ri(sn)
+      styles: /* @__PURE__ */ Ti(sn)
     });
   }
 }
@@ -3319,7 +3319,7 @@ const Ye = "-", _a = (e) => {
   }
   return r;
 };
-function Ra() {
+function Ta() {
   let e = 0, i, n, a = "";
   for (; e < arguments.length; )
     (i = arguments[e++]) && (n = dn(i)) && (a && (a += " "), a += n);
@@ -3333,7 +3333,7 @@ const dn = (e) => {
     e[a] && (i = dn(e[a])) && (n && (n += " "), n += i);
   return n;
 };
-function Ta(e, ...i) {
+function Ra(e, ...i) {
   let n, a, s, f = o;
   function o(r) {
     const l = i.reduce((t, v) => v(t), e());
@@ -3347,13 +3347,13 @@ function Ta(e, ...i) {
     return s(r, t), t;
   }
   return function() {
-    return f(Ra.apply(null, arguments));
+    return f(Ta.apply(null, arguments));
   };
 }
 const M = (e) => {
   const i = (n) => n[e] || [];
   return i.isThemeGetter = !0, i;
-}, ln = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, un = /^\((?:(\w[\w-]*):)?(.+)\)$/i, Ha = /^\d+\/\d+$/, Wa = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, La = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Ea = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Aa = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Da = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, X = (e) => Ha.test(e), _ = (e) => !!e && !Number.isNaN(Number(e)), O = (e) => !!e && Number.isInteger(Number(e)), Te = (e) => e.endsWith("%") && _(e.slice(0, -1)), I = (e) => Wa.test(e), Na = () => !0, Ia = (e) => (
+}, ln = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, un = /^\((?:(\w[\w-]*):)?(.+)\)$/i, Ha = /^\d+\/\d+$/, Wa = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, La = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, Ea = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Aa = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Da = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, X = (e) => Ha.test(e), _ = (e) => !!e && !Number.isNaN(Number(e)), O = (e) => !!e && Number.isInteger(Number(e)), Re = (e) => e.endsWith("%") && _(e.slice(0, -1)), I = (e) => Wa.test(e), Na = () => !0, Ia = (e) => (
   // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
   // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
@@ -3391,7 +3391,7 @@ const M = (e) => {
     repeat: ["", "x", "y", "space", "round"]
   }], ni = () => ["auto", "cover", "contain", Ya, Ua, {
     size: [g, k]
-  }], Be = () => [Te, re, Y], R = () => [
+  }], Be = () => [Re, re, Y], T = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
@@ -3399,7 +3399,7 @@ const M = (e) => {
     l,
     g,
     k
-  ], T = () => ["", _, re, Y], ue = () => ["solid", "dashed", "dotted", "double"], ai = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], B = () => [_, Te, Pi, ji], fi = () => [
+  ], R = () => ["", _, re, Y], ue = () => ["solid", "dashed", "dotted", "double"], ai = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], B = () => [_, Re, Pi, ji], fi = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
@@ -4123,7 +4123,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/font-stretch
        */
       "font-stretch": [{
-        "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", Te, k]
+        "font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", Re, k]
       }],
       /**
        * Font Family
@@ -4444,175 +4444,175 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/border-radius
        */
       rounded: [{
-        rounded: R()
+        rounded: T()
       }],
       /**
        * Border Radius Start
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-s": [{
-        "rounded-s": R()
+        "rounded-s": T()
       }],
       /**
        * Border Radius End
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-e": [{
-        "rounded-e": R()
+        "rounded-e": T()
       }],
       /**
        * Border Radius Top
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-t": [{
-        "rounded-t": R()
+        "rounded-t": T()
       }],
       /**
        * Border Radius Right
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-r": [{
-        "rounded-r": R()
+        "rounded-r": T()
       }],
       /**
        * Border Radius Bottom
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-b": [{
-        "rounded-b": R()
+        "rounded-b": T()
       }],
       /**
        * Border Radius Left
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-l": [{
-        "rounded-l": R()
+        "rounded-l": T()
       }],
       /**
        * Border Radius Start Start
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-ss": [{
-        "rounded-ss": R()
+        "rounded-ss": T()
       }],
       /**
        * Border Radius Start End
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-se": [{
-        "rounded-se": R()
+        "rounded-se": T()
       }],
       /**
        * Border Radius End End
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-ee": [{
-        "rounded-ee": R()
+        "rounded-ee": T()
       }],
       /**
        * Border Radius End Start
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-es": [{
-        "rounded-es": R()
+        "rounded-es": T()
       }],
       /**
        * Border Radius Top Left
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-tl": [{
-        "rounded-tl": R()
+        "rounded-tl": T()
       }],
       /**
        * Border Radius Top Right
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-tr": [{
-        "rounded-tr": R()
+        "rounded-tr": T()
       }],
       /**
        * Border Radius Bottom Right
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-br": [{
-        "rounded-br": R()
+        "rounded-br": T()
       }],
       /**
        * Border Radius Bottom Left
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-bl": [{
-        "rounded-bl": R()
+        "rounded-bl": T()
       }],
       /**
        * Border Width
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w": [{
-        border: T()
+        border: R()
       }],
       /**
        * Border Width X
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-x": [{
-        "border-x": T()
+        "border-x": R()
       }],
       /**
        * Border Width Y
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-y": [{
-        "border-y": T()
+        "border-y": R()
       }],
       /**
        * Border Width Start
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-s": [{
-        "border-s": T()
+        "border-s": R()
       }],
       /**
        * Border Width End
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-e": [{
-        "border-e": T()
+        "border-e": R()
       }],
       /**
        * Border Width Top
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-t": [{
-        "border-t": T()
+        "border-t": R()
       }],
       /**
        * Border Width Right
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-r": [{
-        "border-r": T()
+        "border-r": R()
       }],
       /**
        * Border Width Bottom
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-b": [{
-        "border-b": T()
+        "border-b": R()
       }],
       /**
        * Border Width Left
        * @see https://tailwindcss.com/docs/border-width
        */
       "border-w-l": [{
-        "border-l": T()
+        "border-l": R()
       }],
       /**
        * Divide Width X
        * @see https://tailwindcss.com/docs/border-width#between-children
        */
       "divide-x": [{
-        "divide-x": T()
+        "divide-x": R()
       }],
       /**
        * Divide Width X Reverse
@@ -4624,7 +4624,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/border-width#between-children
        */
       "divide-y": [{
-        "divide-y": T()
+        "divide-y": R()
       }],
       /**
        * Divide Width Y Reverse
@@ -4786,7 +4786,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
        */
       "ring-w": [{
-        ring: T()
+        ring: R()
       }],
       /**
        * Ring Width Inset
@@ -4825,7 +4825,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
        */
       "inset-ring-w": [{
-        "inset-ring": T()
+        "inset-ring": R()
       }],
       /**
        * Inset Ring Color
@@ -5834,7 +5834,7 @@ const M = (e) => {
     },
     orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
   };
-}, nf = /* @__PURE__ */ Ta(ef);
+}, nf = /* @__PURE__ */ Ra(ef);
 function se(...e) {
   return nf(ya(e));
 }
@@ -5959,7 +5959,7 @@ const Cn = ({
   showPercentage: f = !1,
   loading: o = !1
 }) => {
-  const d = Ve[e], r = /* @__PURE__ */ P("div", { className: "flex w-full items-center pt-3", children: [
+  const d = Ve[e], r = /* @__PURE__ */ P("div", { className: "flex w-full items-center pt-1", children: [
     /* @__PURE__ */ w(
       Je,
       {
@@ -6140,7 +6140,7 @@ const Cn = ({
 ] }), df = ({
   profiles: e,
   loading: i = !1,
-  buttonColor: n = "amber",
+  buttonColor: n = "lightBlue",
   buttonLabel: a = "more"
 }) => /* @__PURE__ */ w(
   Cn,
@@ -6149,6 +6149,7 @@ const Cn = ({
     button: !0,
     buttonColor: n,
     buttonLabel: a,
+    buttonSize: "small",
     children: /* @__PURE__ */ w("section", { className: "flex flex-col space-y-3 h-full", children: i ? [...Array(10)].map((s, f) => /* @__PURE__ */ P(
       "article",
       {
@@ -6165,9 +6166,9 @@ const Cn = ({
     )) : e.map((s, f) => /* @__PURE__ */ P(
       "article",
       {
-        className: `flex items-center space-x-4 px-3 py-1 rounded-lg cursor-pointer ${s.username === "Brandon" ? "border-2 border-[#ffd700] bg-[#ffecb3] hover:border-[#FFC200] hover:bg-[#FFE08A]" : "hover:bg-gray-100 hover:cursor-pointer"}`,
+        className: `flex items-center px-3 py-1 rounded-lg cursor-pointer ${s.selected ? "border-2 border-[#ffd700] bg-[#ffecb3] hover:border-[#FFC200] hover:bg-[#FFE08A]" : "hover:bg-gray-100 hover:cursor-pointer"}`,
         children: [
-          /* @__PURE__ */ w("p", { className: "text-lg font-gabaritoBold text-[#374151] w-4", children: f + 1 }),
+          /* @__PURE__ */ w("p", { className: "text-lg font-bold text-sec w-4", children: f + 1 }),
           /* @__PURE__ */ w("div", { className: "w-10 h-10 bg-gray-300 rounded-full overflow-hidden", children: /* @__PURE__ */ w(
             "img",
             {
@@ -6176,8 +6177,8 @@ const Cn = ({
               className: "inline select-none pointer-events-none object-cover"
             }
           ) }),
-          /* @__PURE__ */ w("p", { className: "flex-grow text-lg font-gabaritoMedium text-sec", children: s.username }),
-          /* @__PURE__ */ P("p", { className: "text-sm font-gabaritoRegular text-[#374151]", children: [
+          /* @__PURE__ */ w("p", { className: "ml-2 flex-grow text-lg font-gabaritoMedium text-sec", children: s.username }),
+          /* @__PURE__ */ P("p", { className: "text-sm font-regular text-sec", children: [
             s.xp,
             " XP"
           ] })

package/dist/ui.umd.js

@@ -719,4 +719,4 @@ button {
         px-4 sm:px-6 py-4 sm:py-6 rounded-xl h-full
         flex flex-col relative
         ${s}
-      `,children:[(e||i||f&&d==="top-right")&&v.jsxs(un,{className:"mb-4 flex items-start justify-between",children:[v.jsxs("div",{className:"flex items-center gap-3",children:[a&&v.jsx(Ie,{color:r,iconSrc:a,onClick:()=>{}}),v.jsxs("div",{children:[e&&v.jsx(cn,{className:"text-main text-xl font-gabaritoBold font-medium leading-5 sm:text-lg md:text-xl",children:e}),i&&v.jsx(vn,{className:"text-sm sm:text-base text-gray-600",children:i})]})]}),f&&d==="top-right"&&v.jsx(je,{label:o,size:m,onClick:k,color:l,variant:t})]}),n&&v.jsx(mn,{className:"flex flex-col gap-4 font-regular",children:n}),f&&d==="bottom-right"&&v.jsx(kn,{className:"flex justify-end pt-2",children:v.jsx(je,{label:o,size:m,onClick:k,color:l,variant:t})})]})},Ua=({bgIconColor:e="amber",iconSrc:i="",label:n="",percentage:a=0,showCard:s=!1,showPercentage:f=!1,loading:o=!1})=>{const d=Be[e],r=v.jsxs("div",{className:"flex w-full items-center pt-3",children:[v.jsx(Ie,{color:e,iconSrc:i,loading:o,onClick:()=>{}}),v.jsxs("div",{className:"flex flex-col ml-3 flex-1",children:[v.jsxs("div",{className:"flex justify-between mb-1 items-end",children:[n&&(o?v.jsx("p",{className:"h-4 w-16 font-gabaritoMedium my-1 rounded-sm animate-pulse",style:{backgroundColor:"#F1F1F1",border:"1px solid #e9e9e9"}}):v.jsx("p",{className:"text-sec text-md",children:n})),f&&v.jsxs("span",{className:"text-base text-gray-500",children:[a,"%"]})]}),o?v.jsx("div",{className:"relative w-full h-4 rounded-2xl overflow-hidden animate-pulse",style:{backgroundColor:"#F1F1F1"}}):v.jsx("div",{className:"relative w-full h-4 rounded-2xl overflow-hidden",style:{backgroundColor:Sn.Gray.value},children:v.jsx("div",{className:"absolute top-0 left-0 h-full rounded-2xl transition-all duration-300",style:{width:`${a}%`,background:"linear-gradient(to right, #FFC801, #FFC801)",boxShadow:`0 1px 2px ${d.dark}`}})})]})]});return s?v.jsx(Ye,{children:r}):r},Ka=({color:e="lightBlue"})=>{const[i,n]=K.useState(!1),a={lightBlue:"bg-blue-500",amber:"bg-amber-500",cyan:"bg-cyan-500"},s=f=>{n(f.target.checked)};return v.jsxs("div",{className:"inline-block relative w-12 h-6",children:[v.jsx("input",{checked:i,onChange:s,className:"absolute opacity-0 w-0 h-0",id:`react-switch-${e}`,type:"checkbox"}),v.jsx("label",{className:"block overflow-hidden h-6 rounded-full cursor-pointer bg-gray-300",htmlFor:`react-switch-${e}`,children:v.jsx("span",{className:`block h-6 w-6 rounded-full shadow transform transition-transform duration-200 ${i?`translate-x-full ${a[e]}`:"bg-white"}`})})]})},Ja=({color:e="amber",completed:i,size:n=20,loading:a=!1})=>{const s=Be[e];return a?v.jsx("div",{className:"rounded-full animate-pulse",style:{width:n,height:n,backgroundColor:"#F1F1F1",border:"1px solid #e9e9e9"}}):i?v.jsx("div",{className:"flex items-center justify-center border-[1px] rounded-full",style:{width:n,height:n,backgroundColor:s?.value,borderColor:s?.dark},children:v.jsx("img",{src:"src/assets/icons/check.svg",alt:"Icon",width:n*.8,height:n*.8,className:"inline select-none pointer-events-none"})}):v.jsx("div",{className:"border-[1px] rounded-full",style:{width:n,height:n,backgroundColor:"#E5E5E5",borderColor:"#ccc"}})},Ya=({label:e="",color:i="amber",records:n={},emojiId:a="pancakes",loading:s=!1})=>v.jsxs("div",{className:"flex w-full rounded-lg pt-3",children:[v.jsx(Ie,{emojiId:a,color:i,loading:s,onClick:()=>{}}),v.jsxs("div",{className:"w-3/4 h-12 rounded-lg ml-2 flex flex-col justify-between",children:[s?v.jsx("p",{className:"h-4 w-16 mt-1 rounded-sm",style:{backgroundColor:"#F1F1F1",border:"1px solid #e9e9e9"}}):v.jsx("p",{className:"text-sec mb-1",children:e}),v.jsx("div",{className:"flex space-x-2",children:Object.entries(n).map(([f,o])=>v.jsx(Ja,{color:i,completed:o,loading:s}))})]})]}),Za=({profiles:e,loading:i=!1,buttonColor:n="amber",buttonLabel:a="more"})=>v.jsx(Ye,{title:"Leaderboard",button:!0,buttonColor:n,buttonLabel:a,children:v.jsx("section",{className:"flex flex-col space-y-3 h-full",children:i?[...Array(10)].map((s,f)=>v.jsxs("article",{className:"flex w-full rounded-md h-1/3 space-x-2 animate-pulse",children:[v.jsx("div",{className:"w-12 h-12 bg-[#F0F0F1] rounded-full"}),v.jsxs("div",{className:"flex flex-col w-3/4 space-y-2 justify-center",children:[v.jsx("span",{className:"h-4 bg-[#F0F0F1] rounded-sm w-1/2"}),v.jsx("span",{className:"h-4 bg-[#F0F0F1] rounded-sm w-4/5"})]})]},f)):e.map((s,f)=>v.jsxs("article",{className:`flex items-center space-x-4 px-3 py-1 rounded-lg cursor-pointer ${s.username==="Brandon"?"border-2 border-[#ffd700] bg-[#ffecb3] hover:border-[#FFC200] hover:bg-[#FFE08A]":"hover:bg-gray-100 hover:cursor-pointer"}`,children:[v.jsx("p",{className:"text-lg font-gabaritoBold text-[#374151] w-4",children:f+1}),v.jsx("div",{className:"w-10 h-10 bg-gray-300 rounded-full overflow-hidden",children:v.jsx("img",{src:s.avatarUrl,alt:`${s.username} avatar`,className:"inline select-none pointer-events-none object-cover"})}),v.jsx("p",{className:"flex-grow text-lg font-gabaritoMedium text-sec",children:s.username}),v.jsxs("p",{className:"text-sm font-gabaritoRegular text-[#374151]",children:[s.xp," XP"]})]},f))})});T.Button=je,T.Card=Ye,T.Leaderboard=Za,T.ProgressBar=Ua,T.Toggle=Ka,T.WeekStreak=Ya,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})}));
+      `,children:[(e||i||f&&d==="top-right")&&v.jsxs(un,{className:"mb-4 flex items-start justify-between",children:[v.jsxs("div",{className:"flex items-center gap-3",children:[a&&v.jsx(Ie,{color:r,iconSrc:a,onClick:()=>{}}),v.jsxs("div",{children:[e&&v.jsx(cn,{className:"text-main text-xl font-gabaritoBold font-medium leading-5 sm:text-lg md:text-xl",children:e}),i&&v.jsx(vn,{className:"text-sm sm:text-base text-gray-600",children:i})]})]}),f&&d==="top-right"&&v.jsx(je,{label:o,size:m,onClick:k,color:l,variant:t})]}),n&&v.jsx(mn,{className:"flex flex-col gap-4 font-regular",children:n}),f&&d==="bottom-right"&&v.jsx(kn,{className:"flex justify-end pt-2",children:v.jsx(je,{label:o,size:m,onClick:k,color:l,variant:t})})]})},Ua=({bgIconColor:e="amber",iconSrc:i="",label:n="",percentage:a=0,showCard:s=!1,showPercentage:f=!1,loading:o=!1})=>{const d=Be[e],r=v.jsxs("div",{className:"flex w-full items-center pt-1",children:[v.jsx(Ie,{color:e,iconSrc:i,loading:o,onClick:()=>{}}),v.jsxs("div",{className:"flex flex-col ml-3 flex-1",children:[v.jsxs("div",{className:"flex justify-between mb-1 items-end",children:[n&&(o?v.jsx("p",{className:"h-4 w-16 font-gabaritoMedium my-1 rounded-sm animate-pulse",style:{backgroundColor:"#F1F1F1",border:"1px solid #e9e9e9"}}):v.jsx("p",{className:"text-sec text-md",children:n})),f&&v.jsxs("span",{className:"text-base text-gray-500",children:[a,"%"]})]}),o?v.jsx("div",{className:"relative w-full h-4 rounded-2xl overflow-hidden animate-pulse",style:{backgroundColor:"#F1F1F1"}}):v.jsx("div",{className:"relative w-full h-4 rounded-2xl overflow-hidden",style:{backgroundColor:Sn.Gray.value},children:v.jsx("div",{className:"absolute top-0 left-0 h-full rounded-2xl transition-all duration-300",style:{width:`${a}%`,background:"linear-gradient(to right, #FFC801, #FFC801)",boxShadow:`0 1px 2px ${d.dark}`}})})]})]});return s?v.jsx(Ye,{children:r}):r},Ka=({color:e="lightBlue"})=>{const[i,n]=K.useState(!1),a={lightBlue:"bg-blue-500",amber:"bg-amber-500",cyan:"bg-cyan-500"},s=f=>{n(f.target.checked)};return v.jsxs("div",{className:"inline-block relative w-12 h-6",children:[v.jsx("input",{checked:i,onChange:s,className:"absolute opacity-0 w-0 h-0",id:`react-switch-${e}`,type:"checkbox"}),v.jsx("label",{className:"block overflow-hidden h-6 rounded-full cursor-pointer bg-gray-300",htmlFor:`react-switch-${e}`,children:v.jsx("span",{className:`block h-6 w-6 rounded-full shadow transform transition-transform duration-200 ${i?`translate-x-full ${a[e]}`:"bg-white"}`})})]})},Ja=({color:e="amber",completed:i,size:n=20,loading:a=!1})=>{const s=Be[e];return a?v.jsx("div",{className:"rounded-full animate-pulse",style:{width:n,height:n,backgroundColor:"#F1F1F1",border:"1px solid #e9e9e9"}}):i?v.jsx("div",{className:"flex items-center justify-center border-[1px] rounded-full",style:{width:n,height:n,backgroundColor:s?.value,borderColor:s?.dark},children:v.jsx("img",{src:"src/assets/icons/check.svg",alt:"Icon",width:n*.8,height:n*.8,className:"inline select-none pointer-events-none"})}):v.jsx("div",{className:"border-[1px] rounded-full",style:{width:n,height:n,backgroundColor:"#E5E5E5",borderColor:"#ccc"}})},Ya=({label:e="",color:i="amber",records:n={},emojiId:a="pancakes",loading:s=!1})=>v.jsxs("div",{className:"flex w-full rounded-lg pt-3",children:[v.jsx(Ie,{emojiId:a,color:i,loading:s,onClick:()=>{}}),v.jsxs("div",{className:"w-3/4 h-12 rounded-lg ml-2 flex flex-col justify-between",children:[s?v.jsx("p",{className:"h-4 w-16 mt-1 rounded-sm",style:{backgroundColor:"#F1F1F1",border:"1px solid #e9e9e9"}}):v.jsx("p",{className:"text-sec mb-1",children:e}),v.jsx("div",{className:"flex space-x-2",children:Object.entries(n).map(([f,o])=>v.jsx(Ja,{color:i,completed:o,loading:s}))})]})]}),Za=({profiles:e,loading:i=!1,buttonColor:n="lightBlue",buttonLabel:a="more"})=>v.jsx(Ye,{title:"Leaderboard",button:!0,buttonColor:n,buttonLabel:a,buttonSize:"small",children:v.jsx("section",{className:"flex flex-col space-y-3 h-full",children:i?[...Array(10)].map((s,f)=>v.jsxs("article",{className:"flex w-full rounded-md h-1/3 space-x-2 animate-pulse",children:[v.jsx("div",{className:"w-12 h-12 bg-[#F0F0F1] rounded-full"}),v.jsxs("div",{className:"flex flex-col w-3/4 space-y-2 justify-center",children:[v.jsx("span",{className:"h-4 bg-[#F0F0F1] rounded-sm w-1/2"}),v.jsx("span",{className:"h-4 bg-[#F0F0F1] rounded-sm w-4/5"})]})]},f)):e.map((s,f)=>v.jsxs("article",{className:`flex items-center px-3 py-1 rounded-lg cursor-pointer ${s.selected?"border-2 border-[#ffd700] bg-[#ffecb3] hover:border-[#FFC200] hover:bg-[#FFE08A]":"hover:bg-gray-100 hover:cursor-pointer"}`,children:[v.jsx("p",{className:"text-lg font-bold text-sec w-4",children:f+1}),v.jsx("div",{className:"w-10 h-10 bg-gray-300 rounded-full overflow-hidden",children:v.jsx("img",{src:s.avatarUrl,alt:`${s.username} avatar`,className:"inline select-none pointer-events-none object-cover"})}),v.jsx("p",{className:"ml-2 flex-grow text-lg font-gabaritoMedium text-sec",children:s.username}),v.jsxs("p",{className:"text-sm font-regular text-sec",children:[s.xp," XP"]})]},f))})});T.Button=je,T.Card=Ye,T.Leaderboard=Za,T.ProgressBar=Ua,T.Toggle=Ka,T.WeekStreak=Ya,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-ui-lib",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "type": "module",
   "types": "dist/index.d.ts",
   "exports": {