qaema-ui 0.0.55 → 0.0.56

package/dist/_virtual/index7.js

@@ -1,4 +1,5 @@
-var e = { exports: {} };
+import { __require as r } from "../node_modules/recharts/node_modules/react-is/index.js";
+var a = r();
 export {
-  e as __module
+  a as r
 };

package/dist/_virtual/index8.js

@@ -1,5 +1,4 @@
-import { __require as r } from "../node_modules/recharts/node_modules/react-is/index.js";
-var a = r();
+var e = { exports: {} };
 export {
-  a as r
+  e as __module
 };

package/dist/components/Badge.d.ts

@@ -9,6 +9,7 @@ export type BadgeProps = {
     variant?: BadgeVariant;
     children?: ReactNode;
     onClose?: () => void;
+    image?: string;
 };
-declare const Badge: ({ bgColor, color, label, weight, variant, onClose, children }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Badge: ({ bgColor, color, label, weight, variant, onClose, children, image }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/dist/components/Badge.js

@@ -1,9 +1,9 @@
-import { j as t } from "../_virtual/jsx-runtime.js";
-import { IoClose as l } from "../node_modules/react-icons/io5/index.js";
+import { j as e } from "../_virtual/jsx-runtime.js";
+import { IoClose as p } from "../node_modules/react-icons/io5/index.js";
 import i from "styled-components";
-import p from "../hooks/useBadgeVariant.js";
-import m from "./Typography.js";
-const g = i.div`
+import m from "../hooks/useBadgeVariant.js";
+import g from "./Typography.js";
+const u = i.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -12,7 +12,7 @@ const g = i.div`
   background-color: ${({ bgColor: r, $variantStyles: o }) => r ?? o.backgroundColor};
   gap: ${({ theme: r }) => r.spacing.xs};
   height: 1.5rem;
-`, u = i.div`
+`, f = i.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,14 +23,21 @@ const g = i.div`
   &:hover {
     opacity: 0.8;
   }
-`, b = ({ bgColor: r, color: o, label: s, weight: n, variant: c, onClose: a, children: d }) => {
-  const e = p(c ?? "default");
-  return /* @__PURE__ */ t.jsxs(g, { bgColor: r, $variantStyles: e, children: [
-    s && /* @__PURE__ */ t.jsx(m, { variant: "span", color: o ?? e.color, weight: n, children: s }),
-    d,
-    a && /* @__PURE__ */ t.jsx(u, { onClick: a, $variantStyles: e, children: /* @__PURE__ */ t.jsx(l, { color: o ?? e.color, size: "0.75rem" }) })
+`, x = i.img`
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: ${({ theme: r }) => r.borderRadius.circle};
+  object-fit: cover;
+  flex-shrink: 0;
+`, v = ({ bgColor: r, color: o, label: s, weight: n, variant: d, onClose: a, children: l, image: c }) => {
+  const t = m(d ?? "default");
+  return /* @__PURE__ */ e.jsxs(u, { bgColor: r, $variantStyles: t, children: [
+    c && /* @__PURE__ */ e.jsx(x, { src: c, alt: "badge-image" }),
+    s && /* @__PURE__ */ e.jsx(g, { variant: "span", color: o ?? t.color, weight: n, children: s }),
+    l,
+    a && /* @__PURE__ */ e.jsx(f, { onClick: a, $variantStyles: t, children: /* @__PURE__ */ e.jsx(p, { color: o ?? t.color, size: "0.75rem" }) })
   ] });
 };
 export {
-  b as default
+  v as default
 };

package/dist/components/NavItem.d.ts

@@ -17,6 +17,13 @@ export type NavItemType = {
     onClick?: (value: unknown) => void;
     linkComponent?: React.ElementType;
     active?: boolean;
+    badge?: {
+        label?: string;
+        variant?: string;
+        color?: string;
+        bgColor?: string;
+        image?: string;
+    };
 };
 export type NavItemProps = {
     item: NavItemType;

package/dist/components/NavItem.js

@@ -1,9 +1,10 @@
 import { j as r } from "../_virtual/jsx-runtime.js";
-import s, { useTheme as g, css as c } from "styled-components";
-import { useNavItemVariant as u } from "../hooks/useNavItemVariant.js";
-import h from "./Link.js";
-import v from "./Typography.js";
-const b = {
+import a, { useTheme as h, css as c } from "styled-components";
+import { useNavItemVariant as v } from "../hooks/useNavItemVariant.js";
+import x from "./Badge.js";
+import u from "./Link.js";
+import $ from "./Typography.js";
+const f = {
   bullet: c`
     border-radius: ${({ theme: o }) => o.borderRadius.circle};
     background-color: ${({ theme: o }) => o.colors.secondary.pink.n450};
@@ -13,18 +14,16 @@ const b = {
     border-radius: ${({ theme: o }) => o.borderRadius.sm};
     background-color: ${({ theme: o }) => o.colors.primary.purple.n450};
   `
-}, x = s.div`
+}, y = a.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: ${({ theme: o }) => o.spacing.xs};
-  border: none;
 
-  background-color: transparent;
-  cursor: pointer;
   svg {
     width: 1.5rem;
     height: 1.5rem;
+    flex-shrink: 0;
   }
 
   p {
@@ -32,7 +31,11 @@ const b = {
     margin: 0;
     white-space: nowrap;
   }
-`, $ = s.div`
+`, p = a.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing.xs};
+`, C = a.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -53,48 +56,73 @@ const b = {
       border-radius: ${o.theme.borderRadius.sm};
       background-color: ${o.$activeBgColor};
     `}
-`, y = s.div`
+`, j = a.div`
   width: 1.5rem;
   height: 1.5rem;
   text-align: center;
   color: ${({ theme: o }) => o.colors.grey.n50};
   font-weight: ${({ theme: o }) => o.typography.weights.semiBold};
-  ${({ $variant: o }) => b[o]}
-`, B = ({ item: o }) => {
-  const e = o == null ? void 0 : o.icon, n = g(), { color: t, bgColor: p, activeBgColor: a, activeColor: l } = u(o == null ? void 0 : o.variant), d = /* @__PURE__ */ r.jsxs(x, { children: [
-    /* @__PURE__ */ r.jsxs("div", { style: { display: "flex", alignItems: "center", gap: n.spacing.xs }, children: [
-      e && /* @__PURE__ */ r.jsx(e, { color: o.active ? l : t, size: 20 }),
-      /* @__PURE__ */ r.jsx(v, { component: "p", variant: "smText", color: o.active ? l : t, children: o == null ? void 0 : o.title })
-    ] }),
-    (o == null ? void 0 : o.count) && /* @__PURE__ */ r.jsx(y, { $variant: (o == null ? void 0 : o.notificationVariant) ?? "badge", children: /* @__PURE__ */ r.jsx("span", { children: o.count }) })
-  ] }), i = {
+  ${({ $variant: o }) => f[o]}
+`, R = ({ item: o }) => {
+  const e = o == null ? void 0 : o.icon, n = h(), { color: l, bgColor: b, activeBgColor: s, activeColor: t } = v(o == null ? void 0 : o.variant), d = /* @__PURE__ */ r.jsxs(y, { children: [
+    e && /* @__PURE__ */ r.jsx(e, { color: o.active ? t : l, size: 20 }),
+    /* @__PURE__ */ r.jsx($, { component: "p", variant: "smText", color: o.active ? t : l, children: o == null ? void 0 : o.title })
+  ] }), i = o != null && o.badge ? /* @__PURE__ */ r.jsx(
+    x,
+    {
+      label: o.badge.label,
+      variant: o.badge.variant,
+      color: o.badge.color,
+      bgColor: o.badge.bgColor,
+      image: o.badge.image
+    }
+  ) : o != null && o.count ? /* @__PURE__ */ r.jsx(j, { $variant: (o == null ? void 0 : o.notificationVariant) ?? "badge", children: /* @__PURE__ */ r.jsx("span", { children: o.count }) }) : null, g = {
     padding: `${n.spacing.xs} ${n.spacing.sm}`,
     width: "100%",
-    hoverBgColor: a,
-    activeBgColor: a
+    hoverBgColor: s,
+    activeBgColor: s
   };
   return /* @__PURE__ */ r.jsx(
-    $,
+    C,
     {
       $variant: (o == null ? void 0 : o.variant) ?? "normal",
-      $bgColor: p,
-      $activeBgColor: a ?? "",
+      $bgColor: b,
+      $activeBgColor: s ?? "",
       $active: !!(o != null && o.active),
-      children: (o == null ? void 0 : o.component) === "link" && o.path ? /* @__PURE__ */ r.jsx(h, { to: o.path, state: o.state, component: o.linkComponent, ...i, children: d }) : /* @__PURE__ */ r.jsx(
+      children: (o == null ? void 0 : o.component) === "link" && o.path ? /* @__PURE__ */ r.jsx(u, { to: o.path, state: o.state, component: o.linkComponent, ...g, children: /* @__PURE__ */ r.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            width: "100%",
+            gap: n.spacing.sm
+          },
+          children: [
+            d,
+            /* @__PURE__ */ r.jsx(p, { children: i })
+          ]
+        }
+      ) }) : /* @__PURE__ */ r.jsxs(
         "button",
         {
           onClick: o.onClick,
           style: {
-            ...i,
+            ...g,
             border: "none",
             background: "transparent",
             cursor: "pointer",
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
-            width: "100%"
+            width: "100%",
+            gap: n.spacing.sm
           },
-          children: d
+          children: [
+            d,
+            /* @__PURE__ */ r.jsx(p, { children: i })
+          ]
         }
       )
     },
@@ -102,5 +130,5 @@ const b = {
   );
 };
 export {
-  B as default
+  R as default
 };

package/dist/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../_virtual/index7.js";
+import { __module as e } from "../../_virtual/index8.js";
 import { __require as o } from "./cjs/react-is.production.min.js";
 import { __require as t } from "./cjs/react-is.development.js";
 var r;

package/dist/node_modules/recharts/es6/util/ReactUtils.js

@@ -4,7 +4,7 @@ import P from "../../../../_virtual/isString.js";
 import D from "../../../../_virtual/isFunction.js";
 import j from "../../../../_virtual/isObject.js";
 import { Children as p, isValidElement as w } from "react";
-import { r as B } from "../../../../_virtual/index8.js";
+import { r as B } from "../../../../_virtual/index7.js";
 import { isNumber as b } from "./DataUtils.js";
 import { shallowEqual as d } from "./ShallowEqual.js";
 import { SVGElementPropKeys as G, EventKeys as F, FilteredElementKeyMap as s } from "./types.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qaema-ui",
   "private": false,
-  "version": "0.0.55",
+  "version": "0.0.56",
   "type": "module",
   "publishConfig": {
     "access": "public"