lawgic-dev-kit 0.11.2 → 0.11.6

package/dist/_virtual/index2.js

@@ -1,4 +1,4 @@
-var e = { exports: {} };
+var p = { exports: {} };
 export {
-  e as __module
+  p as __module
 };

package/dist/_virtual/index6.js

@@ -1,4 +1,4 @@
-var p = { exports: {} };
+var e = { exports: {} };
 export {
-  p as __module
+  e as __module
 };

package/dist/_virtual/index7.js

@@ -1,4 +1,4 @@
-var o = { exports: {} };
+var e = { exports: {} };
 export {
-  o as __module
+  e as __module
 };

package/dist/_virtual/index8.js

@@ -1,4 +1,4 @@
-var e = { exports: {} };
+var o = { exports: {} };
 export {
-  e as __module
+  o as __module
 };

package/dist/components/atoms/SidebarButton/SidebarButton.d.ts

@@ -1,10 +1,13 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-declare const SidebarButton: ({ active, icon, label, onClick, expanded, disabled, }: {
+import { Color } from '../../../types/styleValues';
+interface SidebarButtonProps {
     active: boolean;
     icon: IconProp;
     label: string;
     onClick: () => void;
     expanded: boolean;
     disabled?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+    color?: Color;
+}
+declare const SidebarButton: React.FC<SidebarButtonProps>;
 export default SidebarButton;

package/dist/components/atoms/SidebarButton/SidebarButton.js

@@ -1,49 +1,62 @@
-import { j as o } from "../../../_virtual/jsx-runtime.js";
-import { FontAwesomeIcon as i } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
-const p = ({
-  active: t,
-  icon: r,
-  label: l,
-  onClick: a,
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { FontAwesomeIcon as f } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { resolveSidebarButtonColors as d } from "./SidebarButton.styles.js";
+import { useTheme as h } from "../../../hooks/useTheme.js";
+const y = ({
+  active: o,
+  icon: l,
+  label: n,
+  onClick: s,
   expanded: e,
-  disabled: n = !1
-}) => /* @__PURE__ */ o.jsxs(
-  "div",
-  {
-    onClick: () => a(),
-    className: `
+  disabled: r = !1,
+  color: i
+}) => {
+  const { defaultColorScheme: c } = h(), m = i || c, {
+    activeTextColor: a,
+    activeBgColor: p,
+    hoverBgColor: u,
+    activeIconColor: x
+  } = d(m);
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      onClick: () => !r && s(),
+      className: `
       flex items-center rounded-full text-gray transition-all duration-150 h-[40px] w-full px-[12.3px]
-      ${!e && "w-fit"} hover:bg-[#ECF1FD] ${n ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${t ? "text-[#4570EB] bg-[#ECF1FD]" : "bg-transparent"}`,
-    children: [
-      /* @__PURE__ */ o.jsx(
-        i,
-        {
-          icon: r,
-          color: t ? "#4570EB" : "#00000",
-          style: {
-            height: "16px"
+      ${!e && "w-fit"} 
+      ${r ? "cursor-not-allowed opacity-50" : `cursor-pointer ${u}`}
+      ${o ? `${a} ${p}` : "bg-transparent"}`,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          f,
+          {
+            icon: l,
+            className: o ? x : "text-gray-900",
+            style: {
+              height: "16px"
+            }
           }
-        }
-      ),
-      /* @__PURE__ */ o.jsx(
-        "h4",
-        {
-          className: ` 
+        ),
+        /* @__PURE__ */ t.jsx(
+          "h4",
+          {
+            className: ` 
           text-md
           leading-none
-            font-600
-            w-[0px]
-            text-nowrap 
-            transition-all duration-100 ease-in-out
-            opacity-0 capitalize 
-            ${e && "translate-x-0 opacity-100 !w-full !h-auto ml-8"} 
-            ${t && "text-lightblue"} `,
-          children: l
-        }
-      )
-    ]
-  }
-);
+          font-600
+          w-[0px]
+          text-nowrap 
+          transition-all duration-100 ease-in-out
+          opacity-0 capitalize 
+          ${e && "translate-x-0 opacity-100 !w-full !h-auto ml-8"} 
+          ${o && a}`,
+            children: n
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  p as default
+  y as default
 };

package/dist/components/atoms/SidebarButton/SidebarButton.styles.d.ts

@@ -0,0 +1,9 @@
+import { Color } from '../../../types/styleValues';
+interface SidebarButtonColorConfig {
+    activeTextColor: string;
+    activeBgColor: string;
+    hoverBgColor: string;
+    activeIconColor: string;
+}
+export declare const resolveSidebarButtonColors: (color: Color) => SidebarButtonColorConfig;
+export {};

package/dist/components/atoms/SidebarButton/SidebarButton.styles.js

@@ -0,0 +1,22 @@
+const e = {
+  activeTextColor: "text-blue-500",
+  activeBgColor: "bg-blue-100",
+  hoverBgColor: "hover:bg-blue-100",
+  activeIconColor: "text-blue-500"
+}, t = {
+  activeTextColor: "text-aqua-500",
+  activeBgColor: "bg-aqua-100",
+  hoverBgColor: "hover:bg-aqua-100",
+  activeIconColor: "text-aqua-500"
+}, a = (o) => {
+  switch (o) {
+    case "aqua":
+      return t;
+    case "blue":
+    default:
+      return e;
+  }
+};
+export {
+  a as resolveSidebarButtonColors
+};

package/dist/components/molecules/Stepper/Stepper.js

@@ -1,43 +1,50 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { faCheck as h, faClockSix as g } from "../../../node_modules/@fortawesome/pro-light-svg-icons/index.js";
-import { FontAwesomeIcon as p } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
-import { useState as u, useEffect as F } from "react";
-import { useTheme as y } from "../../../hooks/useTheme.js";
-import { motion as c } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
-import { AnimatePresence as v } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
-const k = ({
+import { faCheck as S, faClockSix as k } from "../../../node_modules/@fortawesome/pro-light-svg-icons/index.js";
+import { FontAwesomeIcon as h } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { useState as y, useEffect as W } from "react";
+import { useTheme as v } from "../../../hooks/useTheme.js";
+import { resolveStepperColors as C } from "./Stepper.styles.js";
+import { motion as d } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
+import { AnimatePresence as I } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
+const D = ({
   status: n,
-  label: m,
-  shouldAnimate: t
+  label: u,
+  shouldAnimate: t,
+  color: b
 }) => {
-  const { t: d } = y(), i = n === "done", a = n === "focus";
+  const { t: m } = v(), o = n === "done", r = n === "focus", {
+    completedBgColor: p,
+    focusBorderColor: c,
+    pendingBorderColor: s,
+    iconActiveColor: f
+  } = C(b);
   return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-8 h-fit", children: [
     /* @__PURE__ */ e.jsx(
-      c.div,
+      d.div,
       {
         initial: t ? !1 : {
-          backgroundColor: i ? "#DDF6F5" : "white",
-          borderWidth: a ? "1px" : "0px",
-          borderColor: a ? "#4570EB" : "#ABACAF70"
+          backgroundColor: o ? p : "white",
+          borderWidth: r ? "1px" : "0px",
+          borderColor: r ? c : s
         },
         animate: {
-          backgroundColor: i ? "#DDF6F5" : "white",
-          borderWidth: a || !i ? "1px" : "0px",
-          borderColor: a ? "#4570EB" : "#ABACAF70"
+          backgroundColor: o ? p : "white",
+          borderWidth: r || !o ? "1px" : "0px",
+          borderColor: r ? c : s
         },
         transition: { duration: t ? 0.3 : 0, ease: "easeOut" },
         className: "min-w-28 min-h-28 rounded-full flex items-center justify-center text-xl font-bold border-[1px]",
         children: /* @__PURE__ */ e.jsx(
-          c.div,
+          d.div,
           {
-            initial: t ? !1 : { color: i ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)" },
+            initial: t ? !1 : { color: o ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)" },
             animate: {
-              color: i || a ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)"
+              color: o || r ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)"
             },
             transition: { duration: t ? 0.2 : 0 },
             className: "flex items-center justify-center",
-            children: /* @__PURE__ */ e.jsx(v, { mode: "wait", children: i || a ? /* @__PURE__ */ e.jsx(
-              c.div,
+            children: /* @__PURE__ */ e.jsx(I, { mode: "wait", children: o || r ? /* @__PURE__ */ e.jsx(
+              d.div,
               {
                 initial: t ? { opacity: 0, scale: 0.8, rotate: -180 } : { opacity: 1, scale: 1, rotate: 0 },
                 animate: { opacity: 1, scale: 1, rotate: 0 },
@@ -45,16 +52,16 @@ const k = ({
                 transition: { duration: t ? 0.3 : 0 },
                 className: "flex items-center justify-center",
                 children: /* @__PURE__ */ e.jsx(
-                  p,
+                  h,
                   {
-                    icon: h,
-                    className: "w-14 h-14 min-w-14 min-h-14 text-blue-500"
+                    icon: S,
+                    className: `w-14 h-14 min-w-14 min-h-14 ${f}`
                   }
                 )
               },
               "check"
             ) : /* @__PURE__ */ e.jsx(
-              c.div,
+              d.div,
               {
                 initial: t ? { opacity: 0, scale: 0.8, rotate: -180 } : { opacity: 1, scale: 1, rotate: 0 },
                 animate: { opacity: 1, scale: 1, rotate: 0 },
@@ -62,9 +69,9 @@ const k = ({
                 transition: { duration: t ? 0.3 : 0 },
                 className: "flex items-center justify-center",
                 children: /* @__PURE__ */ e.jsx(
-                  p,
+                  h,
                   {
-                    icon: g,
+                    icon: k,
                     className: "w-14 h-14 min-w-14 min-h-14"
                   }
                 )
@@ -78,46 +85,52 @@ const k = ({
     /* @__PURE__ */ e.jsx(
       "span",
       {
-        className: `text-body-s font-medium transition-all duration-300 text-center w-full ${i ? "text-black" : "text-gray-400"}`,
-        children: d(m)
+        className: `text-body-s font-medium transition-all duration-300 text-center w-full ${o ? "text-black" : "text-gray-400"}`,
+        children: m(u)
       }
     )
   ] });
-}, B = ({
+}, E = ({
   status: n,
-  label: m,
-  shouldAnimate: t
+  label: u,
+  shouldAnimate: t,
+  color: b
 }) => {
-  const { t: d } = y(), i = n === "done", a = n === "focus";
+  const { t: m } = v(), o = n === "done", r = n === "focus", {
+    completedBgColor: p,
+    focusBorderColor: c,
+    pendingBorderColor: s,
+    iconActiveColor: f
+  } = C(b);
   return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-8 h-fit", children: [
     /* @__PURE__ */ e.jsx(
-      c.div,
+      d.div,
       {
         initial: t ? !1 : {
-          backgroundColor: i ? "#DDF6F5" : "white",
-          borderWidth: a || !i ? "1px" : "0px",
-          borderColor: a ? "#4570EB" : "#ABACAF70"
+          backgroundColor: o ? p : "white",
+          borderWidth: r || !o ? "1px" : "0px",
+          borderColor: r ? c : s
         },
         animate: {
-          backgroundColor: i ? "#C7D8FF" : "white",
-          borderWidth: a || !i ? "1px" : "0px",
-          borderColor: a ? "#4570EB" : "#ABACAF70"
+          backgroundColor: o ? p : "white",
+          borderWidth: r || !o ? "1px" : "0px",
+          borderColor: r ? c : s
         },
         transition: { duration: t ? 0.3 : 0, ease: "easeOut" },
         className: "min-w-24 min-h-24 rounded-full flex items-center justify-center text-xs font-bold z-10",
         children: /* @__PURE__ */ e.jsx(
-          c.div,
+          d.div,
           {
             initial: t ? !1 : {
-              color: a || i ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)"
+              color: r || o ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)"
             },
             animate: {
-              color: a || i ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)"
+              color: r || o ? "rgb(34, 197, 94)" : "rgb(209, 213, 219)"
             },
             transition: { duration: t ? 0.2 : 0 },
             className: "flex items-center justify-center",
-            children: /* @__PURE__ */ e.jsx(v, { mode: "wait", children: i || a ? /* @__PURE__ */ e.jsx(
-              c.div,
+            children: /* @__PURE__ */ e.jsx(I, { mode: "wait", children: o || r ? /* @__PURE__ */ e.jsx(
+              d.div,
               {
                 initial: t ? { opacity: 0, scale: 0.8, rotate: -180 } : { opacity: 1, scale: 1, rotate: 0 },
                 animate: { opacity: 1, scale: 1, rotate: 0 },
@@ -125,16 +138,16 @@ const k = ({
                 transition: { duration: t ? 0.3 : 0 },
                 className: "flex items-center justify-center",
                 children: /* @__PURE__ */ e.jsx(
-                  p,
+                  h,
                   {
-                    icon: h,
-                    className: "w-14 h-14 min-w-14 min-h-14 text-blue-500"
+                    icon: S,
+                    className: `w-14 h-14 min-w-14 min-h-14 ${f}`
                   }
                 )
               },
               "check"
             ) : /* @__PURE__ */ e.jsx(
-              c.div,
+              d.div,
               {
                 initial: t ? { opacity: 0, scale: 0.8, rotate: -180 } : { opacity: 1, scale: 1, rotate: 0 },
                 animate: { opacity: 1, scale: 1, rotate: 0 },
@@ -142,9 +155,9 @@ const k = ({
                 transition: { duration: t ? 0.3 : 0 },
                 className: "flex items-center justify-center",
                 children: /* @__PURE__ */ e.jsx(
-                  p,
+                  h,
                   {
-                    icon: g,
+                    icon: k,
                     className: "w-14 h-14 min-w-14 min-h-14"
                   }
                 )
@@ -158,68 +171,71 @@ const k = ({
     /* @__PURE__ */ e.jsx(
       "span",
       {
-        className: `text-body-s font-medium transition-all duration-300 text-center w-full ${i || a ? "text-black" : "text-gray-400"}`,
-        children: d(m)
+        className: `text-body-s font-medium transition-all duration-300 text-center w-full ${o || r ? "text-black" : "text-gray-400"}`,
+        children: m(u)
       }
     )
   ] });
-}, H = ({
+}, J = ({
   steps: n,
-  direction: m = "horizontal"
+  direction: u = "horizontal",
+  color: t
 }) => {
-  const [t, d] = u([]), [i, a] = u(null), [f, w] = u(!1), b = n.findIndex((r) => !r.completed), x = (r) => b === r;
-  F(() => {
-    const r = n.map(
-      (o, s) => x(s) ? "focus" : o.completed ? "done" : "pending"
+  const { defaultColorScheme: b } = v(), m = t || b, { lineActiveColor: o, lineGradientFrom: r } = C(m), [p, c] = y([]), [s, f] = y(null), [g, z] = y(!1), w = n.findIndex((a) => !a.completed), j = (a) => w === a;
+  W(() => {
+    const a = n.map(
+      (i, l) => j(l) ? "focus" : i.completed ? "done" : "pending"
     );
-    if (!f)
-      d(r), w(!0), a(null);
+    if (!g)
+      c(a), z(!0), f(null);
     else {
-      const o = r.findIndex(
-        (s, l) => s !== t[l]
+      const i = a.findIndex(
+        (l, x) => l !== p[x]
       );
-      a(o !== -1 ? o : null), d(r);
+      f(i !== -1 ? i : null), c(a);
     }
-  }, [n, b]);
-  const N = () => /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-16 relative", children: n.map((r, o) => {
-    var j;
-    const s = x(o - 1) ? "focus" : (j = n[o - 1]) != null && j.completed ? "done" : "pending", l = x(o) ? "focus" : r.completed ? "done" : "pending", C = f && i === o;
+  }, [n, w]);
+  const B = () => /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-16 relative", children: n.map((a, i) => {
+    var N;
+    const l = j(i - 1) ? "focus" : (N = n[i - 1]) != null && N.completed ? "done" : "pending", x = j(i) ? "focus" : a.completed ? "done" : "pending", F = g && s === i;
     return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-10 relative", children: [
-      o !== 0 && /* @__PURE__ */ e.jsx(
+      i !== 0 && /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: `absolute left-[13px] bottom-[28px] w-[1.5px] h-16 ${l === "done" || l === "focus" ? "bg-blue-500" : s === "done" || s === "focus" ? "bg-gradient-to-b from-blue-500 to-[rgb(243,244,246)]" : "bg-[rgb(243,244,246)]"}`
+          className: `absolute left-[13px] bottom-[28px] w-[1.5px] h-16 ${x === "done" || x === "focus" ? o : l === "done" || l === "focus" ? `bg-gradient-to-b ${r} to-[rgb(243,244,246)]` : "bg-[rgb(243,244,246)]"}`
         }
       ),
       /* @__PURE__ */ e.jsx(
-        k,
+        D,
         {
-          status: l,
-          shouldAnimate: C,
-          label: r.label
+          status: x,
+          shouldAnimate: F,
+          label: a.label,
+          color: m
         }
       )
-    ] }, o);
-  }) }), S = () => /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center gap-12", children: n.map((r, o) => {
-    const s = x(o) ? "focus" : r.completed ? "done" : "pending", l = f && i === o;
+    ] }, i);
+  }) }), $ = () => /* @__PURE__ */ e.jsx("div", { className: "w-full flex items-center gap-12", children: n.map((a, i) => {
+    const l = j(i) ? "focus" : a.completed ? "done" : "pending", x = g && s === i;
     return /* @__PURE__ */ e.jsx(
       "div",
       {
         className: "flex flex-col items-center justify-evenly w-full gap-2 relative col-span-1",
         children: /* @__PURE__ */ e.jsx(
-          B,
+          E,
           {
-            status: s,
-            shouldAnimate: l,
-            label: r.label
+            status: l,
+            shouldAnimate: x,
+            label: a.label,
+            color: m
           }
         )
       },
-      o
+      i
     );
   }) });
-  return m === "horizontal" ? /* @__PURE__ */ e.jsx(S, {}) : /* @__PURE__ */ e.jsx(N, {});
+  return u === "horizontal" ? /* @__PURE__ */ e.jsx($, {}) : /* @__PURE__ */ e.jsx(B, {});
 };
 export {
-  H as default
+  J as default
 };

package/dist/components/molecules/Stepper/Stepper.styles.d.ts

@@ -0,0 +1,11 @@
+import { Color } from '../../../types/styleValues';
+interface StepperColorConfig {
+    completedBgColor: string;
+    focusBorderColor: string;
+    pendingBorderColor: string;
+    iconActiveColor: string;
+    lineActiveColor: string;
+    lineGradientFrom: string;
+}
+export declare const resolveStepperColors: (color: Color) => StepperColorConfig;
+export {};

package/dist/components/molecules/Stepper/Stepper.styles.js

@@ -0,0 +1,26 @@
+const e = {
+  completedBgColor: "#dae2fb",
+  focusBorderColor: "#4570EB",
+  pendingBorderColor: "#ABACAF70",
+  iconActiveColor: "text-blue-500",
+  lineActiveColor: "bg-blue-500",
+  lineGradientFrom: "from-blue-500"
+}, r = {
+  completedBgColor: "#C7F9F5",
+  focusBorderColor: "#1DA696",
+  pendingBorderColor: "#ABACAF70",
+  iconActiveColor: "text-aqua-500",
+  lineActiveColor: "bg-aqua-500",
+  lineGradientFrom: "from-aqua-500"
+}, l = (o) => {
+  switch (o) {
+    case "aqua":
+      return r;
+    case "blue":
+    default:
+      return e;
+  }
+};
+export {
+  l as resolveStepperColors
+};

package/dist/components/molecules/Stepper/Stepper.types.d.ts

@@ -1,7 +1,9 @@
+import { Color } from '../../../types/styleValues';
 export interface StepperProps {
     steps: {
         label: string;
         completed: boolean;
     }[];
     direction?: "horizontal" | "vertical";
+    color?: Color;
 }