@mci-ui/mci-ui 0.0.87 → 0.0.88

package/dist/shared/ui/mciAccordion/MciAccordion.js

@@ -1,74 +1,107 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { AltArrowDown as h } from "@solar-icons/react";
-import m, { useState as y, useRef as w, useId as x } from "react";
-import { cn as n } from "../../lib/utils.js";
-const A = (e) => e.type.displayName, f = (e, t, i) => m.Children.toArray(e).find(
-  (o) => m.isValidElement(o) && (A(o) === t || o.type === i)
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { AltArrowDown as A } from "@solar-icons/react";
+import l, { useState as _, useRef as C, useId as E } from "react";
+import { cn as r } from "../../lib/utils.js";
+const T = (t) => t.type.displayName, p = (t, o, n) => l.Children.toArray(t).find(
+  (e) => l.isValidElement(e) && (T(e) === o || e.type === n)
 ) ?? null;
-function d({
-  children: e,
-  className: t
+function b({
+  children: t,
+  className: o,
+  darkMode: n = !1
 }) {
-  return /* @__PURE__ */ r("div", { className: n("text-base font-medium text-black", t), children: e });
+  return /* @__PURE__ */ a("div", { className: r("text-base font-medium", n ? "text-neutral-50" : "text-black", o), children: t });
 }
-d.displayName = "AccordionTitle";
-function c({
-  children: e,
-  className: t
+b.displayName = "AccordionTitle";
+function m({
+  children: t,
+  className: o,
+  darkMode: n = !1
 }) {
-  return /* @__PURE__ */ r("div", { className: n("p-5 text-base", t), children: e });
+  return /* @__PURE__ */ a("div", { className: r("p-5 text-base", n ? "text-neutral-100" : "text-black", o), children: t });
 }
-c.displayName = "AccordionContent";
-function u({ children: e, defaultValue: t = !1, icon: i, className: o }) {
-  const [a, p] = y(t), b = w(null), s = x(), N = () => p((g) => !g);
-  return /* @__PURE__ */ l("div", { className: n("overflow-hidden rounded-xl border border-slate-200", o), children: [
-    /* @__PURE__ */ l(
-      "button",
-      {
-        type: "button",
-        onClick: N,
-        "aria-expanded": a,
-        "aria-controls": s,
-        className: n(
-          "flex w-full items-center justify-between gap-2 p-5 transition-all duration-300 hover:cursor-pointer",
-          a ? "border-b border-slate-200" : "border-b border-transparent"
-        ),
-        children: [
-          /* @__PURE__ */ l("div", { className: "flex w-full items-center gap-2", children: [
-            i && /* @__PURE__ */ r("span", { className: "shrink-0", children: i }),
-            f(e, "AccordionTitle", d)
-          ] }),
-          /* @__PURE__ */ r(
-            h,
-            {
-              weight: "Linear",
-              size: 20,
-              className: n(
-                "shrink-0 text-slate-400 transition-transform duration-300",
-                a && "rotate-180"
+m.displayName = "AccordionContent";
+function f({ children: t, defaultValue: o = !1, icon: n, darkMode: e = !1, className: g }) {
+  const [i, x] = _(o), h = C(null), s = E(), w = () => x((y) => !y), c = p(t, "AccordionTitle", b), d = p(t, "AccordionContent", m), N = l.isValidElement(c) ? l.cloneElement(c, {
+    darkMode: e
+  }) : c, v = l.isValidElement(d) ? l.cloneElement(d, {
+    darkMode: e
+  }) : d;
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: r(
+        "overflow-hidden rounded-xl border",
+        e ? "border-neutral-200 bg-neutral-300 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]" : "border-slate-200 bg-white",
+        g
+      ),
+      children: [
+        /* @__PURE__ */ u(
+          "button",
+          {
+            type: "button",
+            onClick: w,
+            "aria-expanded": i,
+            "aria-controls": s,
+            className: r(
+              "group flex w-full items-center justify-between gap-2 p-5 transition-all duration-300 hover:cursor-pointer",
+              e ? [
+                "bg-neutral-300/70 hover:bg-neutral-200/80",
+                i ? "border-b border-neutral-200 shadow-[inset_0_-1px_0_rgba(255,255,255,0.02)]" : "border-b border-transparent"
+              ] : [
+                "hover:bg-slate-50",
+                i ? "border-b border-slate-200" : "border-b border-transparent"
+              ]
+            ),
+            children: [
+              /* @__PURE__ */ u("div", { className: "flex w-full items-center gap-2", children: [
+                n && /* @__PURE__ */ a("span", { className: r("shrink-0", e ? "text-neutral-100" : "text-slate-500"), children: n }),
+                N
+              ] }),
+              /* @__PURE__ */ a(
+                A,
+                {
+                  weight: "Linear",
+                  size: 20,
+                  className: r(
+                    "shrink-0 transition-all duration-300",
+                    e ? "text-neutral-100 group-hover:text-neutral-50" : "text-slate-400",
+                    i && "rotate-180"
+                  )
+                }
               )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ r(
-      "div",
-      {
-        id: s,
-        role: "region",
-        "aria-labelledby": s,
-        className: n(
-          "grid transition-[grid-template-rows] duration-300 ease-out",
-          a ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+            ]
+          }
         ),
-        children: /* @__PURE__ */ r("div", { ref: b, className: "min-h-0 overflow-hidden", children: f(e, "AccordionContent", c) })
-      }
-    )
-  ] });
+        /* @__PURE__ */ a(
+          "div",
+          {
+            id: s,
+            role: "region",
+            "aria-labelledby": s,
+            className: r(
+              "grid transition-[grid-template-rows] duration-300 ease-out",
+              i ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+            ),
+            children: /* @__PURE__ */ a(
+              "div",
+              {
+                ref: h,
+                className: r(
+                  "min-h-0 overflow-hidden",
+                  e ? "bg-[#22242A]" : "bg-white"
+                ),
+                children: v
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
-u.Title = d;
-u.Content = c;
+f.Title = b;
+f.Content = m;
 export {
-  u as default
+  f as default
 };

package/dist/shared/ui/mciDrawer/MciDrawer.js

@@ -1,8 +1,8 @@
-import { jsxs as n, Fragment as j, jsx as t } from "react/jsx-runtime";
-import { useRef as h, useCallback as E, useEffect as x, useMemo as C } from "react";
+import { jsxs as n, Fragment as E, jsx as t } from "react/jsx-runtime";
+import { useRef as h, useCallback as C, useEffect as x, useMemo as X } from "react";
 import { cn as i } from "../../lib/utils.js";
-import X from "../../../assets/icons/close.svg.js";
-function D({
+import z from "../../../assets/icons/close.svg.js";
+function F({
   isOpen: e,
   onClose: c,
   position: o = "right",
@@ -13,25 +13,26 @@ function D({
   showCloseButton: d = !0,
   drawerClassName: v,
   contentClassName: y,
-  closeOnOverlayClick: g = !0,
-  closeOnEscape: z = !0,
+  footerClassName: g,
+  closeOnOverlayClick: w = !0,
+  closeOnEscape: P = !0,
   width: l = 572,
   darkMode: r = !1
 }) {
-  const u = h(null), b = h(null), f = E(() => c(), [c]);
+  const u = h(null), b = h(null), f = C(() => c(), [c]);
   x(() => {
     e ? (b.current = document.activeElement, u.current?.focus()) : b.current?.focus();
   }, [e]), x(() => (e && (document.body.style.overflow = "hidden"), () => {
     document.body.style.overflow = "unset";
   }), [e]);
-  const w = C(
+  const N = X(
     () => ({
       "--drawer-w": typeof l == "number" ? `${l}px` : l,
       transform: e ? "translateX(0)" : o === "right" ? "translateX(calc(100% + 48px))" : "translateX(calc(-100% - 48px))"
     }),
     [e, l, o]
-  ), N = !!(a || s || d), k = o === "right" ? "top-0 bottom-0 right-0 left-3 rounded-l-3xl rounded-r-none" : "top-0 bottom-0 left-0 right-3 rounded-r-3xl rounded-l-none", $ = o === "right" ? "sm:top-6 sm:bottom-6 sm:right-6 sm:left-auto" : "sm:top-6 sm:bottom-6 sm:left-6 sm:right-auto";
-  return /* @__PURE__ */ n(j, { children: [
+  ), k = !!(a || s || d), $ = o === "right" ? "top-0 bottom-0 right-0 left-3 rounded-l-3xl rounded-r-none" : "top-0 bottom-0 left-0 right-3 rounded-r-3xl rounded-l-none", j = o === "right" ? "sm:top-6 sm:bottom-6 sm:right-6 sm:left-auto" : "sm:top-6 sm:bottom-6 sm:left-6 sm:right-auto";
+  return /* @__PURE__ */ n(E, { children: [
     /* @__PURE__ */ t(
       "div",
       {
@@ -39,7 +40,7 @@ function D({
           "fixed inset-0 z-50 bg-black/40 transition-opacity duration-300",
           e ? "opacity-100 visible cursor-pointer" : "opacity-0 invisible pointer-events-none"
         ),
-        onClick: g ? f : void 0,
+        onClick: w ? f : void 0,
         "aria-hidden": "true"
       }
     ),
@@ -48,15 +49,15 @@ function D({
       {
         ref: u,
         tabIndex: -1,
-        style: w,
+        style: N,
         className: i(
           `fixed z-50 flex flex-col ${r ? "bg-black" : "bg-white"}  outline-none min-h-0`,
           "transition-[transform,opacity,visibility] duration-300 ease-in-out",
           e ? "opacity-100 visible pointer-events-auto shadow-2xl" : "opacity-0 invisible pointer-events-none shadow-none",
-          k,
+          $,
           "h-[100dvh]",
           "pb-[env(safe-area-inset-bottom)]",
-          $,
+          j,
           "sm:h-auto sm:rounded-2xl sm:pb-0",
           "sm:w-[var(--drawer-w)]",
           v
@@ -66,7 +67,7 @@ function D({
         "aria-hidden": !e,
         "aria-labelledby": a ? "drawer-title" : void 0,
         children: [
-          N && /* @__PURE__ */ n(
+          k && /* @__PURE__ */ n(
             "div",
             {
               className: `flex items-start justify-between border-b ${r ? "border-neutral-200" : "border-slate-200"}  shrink-0 px-4 py-4 sm:p-6`,
@@ -89,7 +90,7 @@ function D({
                     onClick: f,
                     className: `${r ? "bg-neutral-300 text-slate-50" : "bg-slate-100 text-black"} rounded-xl w-11 h-11 sm:w-12 sm:h-12 hover:cursor-pointer transition flex items-center justify-center group active:scale-95`,
                     children: /* @__PURE__ */ t(
-                      X,
+                      z,
                       {
                         className: "h-5 w-5 sm:h-6 sm:w-6 transition-transform duration-300 group-hover:rotate-180"
                       }
@@ -112,7 +113,11 @@ function D({
           m && /* @__PURE__ */ t(
             "div",
             {
-              className: `shrink-0 flex items-center justify-end border-t ${r ? "border-neutral-200" : "border-slate-200"} px-4 py-4 sm:p-6 gap-3 [&>*]:w-fit [&>*]:shrink-0 [&>*]:whitespace-nowrap`,
+              className: i(
+                "shrink-0 flex items-center justify-end border-t px-4 py-4 sm:p-6 gap-3 [&>*]:w-fit [&>*]:shrink-0 [&>*]:whitespace-nowrap",
+                r ? "border-neutral-200" : "border-slate-200",
+                g
+              ),
               children: m
             }
           )
@@ -122,5 +127,5 @@ function D({
   ] });
 }
 export {
-  D as default
+  F as default
 };

package/dist/shared/ui/mciTabs/MciTabs.js

@@ -1,112 +1,123 @@
-import { jsxs as u, jsx as l } from "react/jsx-runtime";
-import { useState as w, useRef as C, useCallback as I, useEffect as h } from "react";
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { useState as v, useRef as p, useCallback as R, useEffect as x } from "react";
 import { cn as t } from "../../lib/utils.js";
-const L = {
+const I = {
   top: "flex-col",
   bottom: "flex-col-reverse",
   left: "flex-row",
   right: "flex-row-reverse"
-}, j = {
+}, O = {
   top: "flex-row",
   bottom: "flex-row",
   left: "flex-col",
   right: "flex-col"
-}, z = {
+}, j = {
   top: "mt-4",
   bottom: "mb-4",
   left: "ml-4",
   right: "mr-4"
 };
-function k({
-  tabs: i,
-  defaultTab: p,
-  position: r = "top",
-  darkMode: a = !1,
-  className: v,
-  tabListClassName: N,
-  contentClassName: g,
-  extra: x,
-  onChange: S
+function q({
+  tabs: l,
+  defaultTab: N,
+  position: c = "top",
+  darkMode: d = !1,
+  className: b,
+  tabListClassName: g,
+  contentClassName: S,
+  extra: w,
+  onChange: y
 }) {
-  const [s, b] = w(p || i[0]?.id), [y, E] = w({}), f = C([]), c = I(() => {
+  const [a, E] = v(N || l[0]?.id), [A, T] = v({}), f = p([]), h = p(null), n = R(() => {
     requestAnimationFrame(() => {
-      const e = i.findIndex((o) => o?.id === s), d = f.current[e];
-      if (d) {
-        const { offsetLeft: o, offsetTop: m, offsetWidth: T, offsetHeight: A } = d;
-        E({
+      requestAnimationFrame(() => {
+        const e = l.findIndex((L) => L?.id === a), r = f.current[e];
+        if (!r) return;
+        const { offsetLeft: o, offsetTop: m, offsetWidth: z, offsetHeight: C } = r;
+        T({
           left: `${o}px`,
           top: `${m}px`,
-          width: `${T}px`,
-          height: `${A}px`,
+          width: `${z}px`,
+          height: `${C}px`,
           transition: "all 0.35s cubic-bezier(0.25, 1, 0.5, 1)"
         });
-      }
+      });
+    });
+  }, [a, l]);
+  x(() => (n(), window.addEventListener("resize", n), "fonts" in document && document.fonts.ready.then(n), () => window.removeEventListener("resize", n)), [c, n]), x(() => {
+    const e = h.current;
+    if (!e || typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver(() => {
+      n();
     });
-  }, [s, i]);
-  h(() => (c(), window.addEventListener("resize", c), "fonts" in document && document.fonts.ready.then(c), () => window.removeEventListener("resize", c)), [r, c]), h(() => {
-    f.current = f.current.slice(0, i.length);
-  }, [i]);
-  const n = r === "left" || r === "right";
-  return /* @__PURE__ */ u("div", { className: t("flex w-full", L[r], v), children: [
+    return r.observe(e), f.current.forEach((o) => {
+      o && r.observe(o);
+    }), () => r.disconnect();
+  }, [l, n]), x(() => {
+    f.current = f.current.slice(0, l.length);
+  }, [l]);
+  const s = c === "left" || c === "right";
+  return /* @__PURE__ */ u("div", { className: t("flex w-full", I[c], b), children: [
     /* @__PURE__ */ u(
       "div",
       {
         className: t(
           "flex w-full gap-4",
-          n ? "flex-col items-start" : "flex-row flex-wrap items-center"
+          s ? "flex-col items-start" : "flex-row flex-wrap items-center"
         ),
         children: [
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ i(
             "div",
             {
               className: t(
                 "flex-1",
-                n ? "w-full" : "min-w-[520px]"
+                s ? "w-full" : "min-w-[520px]"
               ),
               children: /* @__PURE__ */ u(
                 "div",
                 {
+                  ref: h,
                   className: t(
                     "relative flex rounded-xl p-1",
-                    a ? "bg-neutral-300" : "bg-slate-100",
-                    j[r],
-                    !n && "w-full overflow-hidden",
-                    n ? "min-w-48" : "",
-                    N
+                    d ? "bg-neutral-300" : "bg-slate-100",
+                    O[c],
+                    !s && "w-full overflow-hidden",
+                    s ? "min-w-48" : "",
+                    g
                   ),
                   children: [
-                    /* @__PURE__ */ l(
+                    /* @__PURE__ */ i(
                       "div",
                       {
                         className: t(
                           "absolute rounded-lg",
-                          a ? "bg-black" : "bg-white",
-                          n ? "w-full" : "h-full"
+                          d ? "bg-black" : "bg-white",
+                          s ? "w-full" : "h-full"
                         ),
-                        style: y
+                        style: A
                       }
                     ),
-                    i?.map((e, d) => {
-                      const o = s === e.id;
+                    l?.map((e, r) => {
+                      const o = a === e.id;
                       return /* @__PURE__ */ u(
                         "button",
                         {
                           ref: (m) => {
-                            f.current[d] = m;
+                            f.current[r] = m;
                           },
                           onClick: () => {
-                            e?.disabled || (b(e?.id), S?.(e?.id));
+                            e?.disabled || (E(e?.id), y?.(e?.id));
                           },
                           disabled: e?.disabled,
                           className: t(
                             "relative z-10 flex items-center justify-center whitespace-nowrap px-3 py-2 text-base font-normal transition-colors duration-300 hover:cursor-pointer",
-                            a ? "text-white" : "text-black",
-                            e?.disabled && (a ? "cursor-not-allowed text-neutral-100/50 opacity-60" : "cursor-not-allowed opacity-50"),
-                            n ? "w-full justify-start" : "flex-1 min-w-0"
+                            d ? "text-white" : "text-black",
+                            e?.disabled && (d ? "cursor-not-allowed text-neutral-100/50 opacity-60" : "cursor-not-allowed opacity-50"),
+                            s ? "w-full justify-start" : "flex-1 min-w-0"
                           ),
                           children: [
-                            e?.icon && /* @__PURE__ */ l("span", { className: t("shrink-0 transition-transform duration-200", o && "scale-110"), children: e?.icon }),
-                            /* @__PURE__ */ l("span", { className: "relative z-10 truncate", title: e?.label, children: e?.label })
+                            e?.icon && /* @__PURE__ */ i("span", { className: t("shrink-0 transition-transform duration-200", o && "scale-110"), children: e?.icon }),
+                            /* @__PURE__ */ i("span", { className: "relative z-10 truncate", title: e?.label, children: e?.label })
                           ]
                         },
                         e?.id
@@ -117,22 +128,22 @@ function k({
               )
             }
           ),
-          x && /* @__PURE__ */ l(
+          w && /* @__PURE__ */ i(
             "div",
             {
               className: t(
                 "shrink-0 ml-auto",
-                n ? "w-full" : "max-w-full"
+                s ? "w-full" : "max-w-full"
               ),
-              children: /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center justify-end gap-2", children: x })
+              children: /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center justify-end gap-2", children: w })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ l("div", { className: t("w-full flex-1 overflow-hidden", z[r], g), children: /* @__PURE__ */ l("div", { className: "animate-fade-in w-full", style: { animationDuration: "0.35s" }, children: i?.find((e) => e.id === s)?.content }, s) })
+    /* @__PURE__ */ i("div", { className: t("w-full flex-1 overflow-hidden", j[c], S), children: /* @__PURE__ */ i("div", { className: "animate-fade-in w-full", style: { animationDuration: "0.35s" }, children: l?.find((e) => e.id === a)?.content }, a) })
   ] });
 }
 export {
-  k as default
+  q as default
 };

package/dist/types/shared/types/ui/accordion.types.d.ts

@@ -3,5 +3,6 @@ export type AccordionProps = {
     children: ReactNode;
     defaultValue?: boolean;
     icon?: ReactNode;
+    darkMode?: boolean;
     className?: string;
 };

package/dist/types/shared/types/ui/drawer.types.d.ts

@@ -10,6 +10,7 @@ export interface DrawerProps {
     showCloseButton?: boolean;
     drawerClassName?: string;
     contentClassName?: string;
+    footerClassName?: string;
     closeOnOverlayClick?: boolean;
     closeOnEscape?: boolean;
     width?: string | number;

package/dist/types/shared/ui/mciAccordion/MciAccordion.d.ts

@@ -1,20 +1,22 @@
 import { default as React } from 'react';
 import { AccordionProps } from '../../types/ui/accordion.types';
-declare function AccordionTitle({ children, className, }: {
+declare function AccordionTitle({ children, className, darkMode, }: {
     children: React.ReactNode;
     className?: string;
+    darkMode?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionTitle {
     var displayName: string;
 }
-declare function AccordionContent({ children, className, }: {
+declare function AccordionContent({ children, className, darkMode, }: {
     children: React.ReactNode;
     className?: string;
+    darkMode?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionContent {
     var displayName: string;
 }
-declare function MciAccordion({ children, defaultValue, icon, className }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+declare function MciAccordion({ children, defaultValue, icon, darkMode, className }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace MciAccordion {
     var Title: typeof AccordionTitle;
     var Content: typeof AccordionContent;

package/dist/types/shared/ui/mciDrawer/MciDrawer.d.ts

@@ -1,2 +1,2 @@
 import { DrawerProps } from '../../types/ui/drawer.types';
-export default function MciDrawer({ isOpen, onClose, position, children, footer, title, description, showCloseButton, drawerClassName, contentClassName, closeOnOverlayClick, closeOnEscape, width, darkMode, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export default function MciDrawer({ isOpen, onClose, position, children, footer, title, description, showCloseButton, drawerClassName, contentClassName, footerClassName, closeOnOverlayClick, closeOnEscape, width, darkMode, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mci-ui/mci-ui",
   "private": false,
-  "version": "0.0.87",
+  "version": "0.0.88",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",