lawgic-dev-kit 0.21.6 → 0.22.4

package/README.md

@@ -1,54 +1,54 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
-```
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

package/dist/_virtual/index2.js

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

package/dist/_virtual/index3.js

@@ -1,5 +1,5 @@
-import { __require as r } from "../node_modules/tiny-case/index.js";
-var a = r();
+import { __require as r } from "../node_modules/property-expr/index.js";
+var e = r();
 export {
-  a as t
+  e as p
 };

package/dist/_virtual/index4.js

@@ -1,7 +1,5 @@
-import { getDefaultExportFromCjs as o } from "./_commonjsHelpers.js";
-import { __require as r } from "../node_modules/toposort/index.js";
-var t = r();
-const s = /* @__PURE__ */ o(t);
+import { __require as r } from "../node_modules/tiny-case/index.js";
+var a = r();
 export {
-  s as default
+  a as t
 };

package/dist/_virtual/index5.js

@@ -1,4 +1,7 @@
-var p = { exports: {} };
+import { getDefaultExportFromCjs as o } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/toposort/index.js";
+var t = r();
+const s = /* @__PURE__ */ o(t);
 export {
-  p as __module
+  s as default
 };

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

@@ -3,10 +3,11 @@ type ColorVariant = "blue" | "aqua" | "red" | "gray";
 type Variant = "rounded" | "square";
 interface CheckboxProps extends React.ComponentPropsWithoutRef<"div"> {
     active?: boolean | string | number;
-    color?: ColorVariant;
     variant?: Variant;
-    className?: string;
+    color?: ColorVariant;
     size?: number;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 declare const Checkbox: React.FC<CheckboxProps>;
 export default Checkbox;

package/dist/components/atoms/Checkbox/Checkbox.js

@@ -1,42 +1,55 @@
-import { j as d } from "../../../_virtual/jsx-runtime.js";
-const c = ({
-  active: r,
+import { j as a } from "../../../_virtual/jsx-runtime.js";
+import { FontAwesomeIcon as h } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { faCheck as m } from "../../../node_modules/@fortawesome/pro-solid-svg-icons/index.js";
+const $ = ({
+  active: d = !1,
+  variant: b = "rounded",
   color: n = "blue",
-  variant: l = "rounded",
-  className: u,
-  size: o = 16,
-  ...i
+  size: e = 20,
+  disabled: o = !1,
+  onClick: t,
+  className: i = "",
+  ...l
 }) => {
-  const t = {
-    blue: "border-blue-500 bg-blue-500",
-    aqua: "border-aqua-500 bg-aqua-500",
-    red: "border-red-500 bg-red-500",
-    gray: "border-gray-500 bg-gray-500"
-  }[n], a = {
-    rounded: "rounded-full",
-    square: "rounded-md"
-  }[l], s = (e) => ({
-    width: `${e}px`,
-    height: `${e}px`,
-    minWidth: `${e}px`,
-    minHeight: `${e}px`
-  });
-  return /* @__PURE__ */ d.jsx(
+  const r = !!d, s = (y) => {
+    o || t && t(y);
+  }, g = {
+    blue: r ? "bg-blue-500 border-blue-500" : "bg-white border-gray-300 hover:border-blue-400",
+    aqua: r ? "bg-aqua-500 border-aqua-500" : "bg-white border-gray-300 hover:border-aqua-400",
+    red: r ? "bg-red-500 border-red-500" : "bg-white border-gray-300 hover:border-red-400",
+    gray: r ? "bg-gray-500 border-gray-500" : "bg-white border-gray-300 hover:border-gray-400"
+  }, c = r ? "bg-gray-400 border-gray-400 opacity-60" : "bg-gray-100 border-gray-300 opacity-60", u = b === "rounded" ? "rounded-full" : "rounded-md";
+  return /* @__PURE__ */ a.jsx(
     "div",
     {
-      className: `relative transition-colors ease-in-out duration-150 flex items-center justify-center ${a} border-[1.5px] bg-white ${r ? t : "border-gray-400"} ${u}`,
-      style: s(o),
-      ...i,
-      children: /* @__PURE__ */ d.jsx(
-        "div",
+      className: `
+        relative flex items-center justify-center border-[1.5px] transition-all duration-150
+        ${u} 
+        ${o ? "cursor-not-allowed" : "cursor-pointer"}
+        ${o ? c : g[n]}
+        ${i}
+      `,
+      style: {
+        width: `${e}px`,
+        height: `${e}px`,
+        minWidth: `${e}px`,
+        minHeight: `${e}px`
+      },
+      onClick: s,
+      ...l,
+      children: r && /* @__PURE__ */ a.jsx(
+        h,
         {
-          className: `absolute transition-colors ease-in-out duration-150 ${a} size-12 ${r ? t : ""}`,
-          style: s(o * 0.7)
+          icon: m,
+          className: "text-white",
+          style: {
+            fontSize: `${e * 0.6}px`
+          }
         }
       )
     }
   );
 };
 export {
-  c as default
+  $ as default
 };

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+interface ChipProps {
+    bgColor?: string;
+    textColor?: string;
+    label?: string | React.ReactNode;
+    labelClassName?: string;
+    className?: string;
+    size?: "sm" | "md";
+    showDot?: boolean;
+    style?: React.CSSProperties;
+}
+declare const Chip: React.FC<ChipProps>;
+export default Chip;

package/dist/components/atoms/Chip/Chip.js

@@ -0,0 +1,32 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { FontAwesomeIcon as o } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { faCircle as a } from "../../../node_modules/@fortawesome/pro-solid-svg-icons/index.js";
+const f = ({
+  bgColor: p = "bg-green-100",
+  textColor: r = "text-green-700",
+  label: s = "Completed",
+  labelClassName: n = "",
+  className: i = "",
+  size: t = "sm",
+  showDot: x = !1,
+  style: m = {}
+}) => /* @__PURE__ */ e.jsxs(
+  "div",
+  {
+    className: `flex items-center justify-center rounded-[6px] ${t === "md" ? "py-8 px-12" : "py-4 px-8"} text-center text-nowrap h-fit w-fit ${x ? "gap-[6px]" : ""} ${p} ${r} ${i}`,
+    style: m,
+    children: [
+      x && /* @__PURE__ */ e.jsx(o, { icon: a, className: "text-[6px]" }),
+      /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: `font-semibold ${t === "md" ? "text-[16px] leading-[22px]" : "text-[12px] leading-[16px]"} ${n}`,
+          children: s
+        }
+      )
+    ]
+  }
+);
+export {
+  f as default
+};

package/dist/components/atoms/Chip/index.d.ts

@@ -0,0 +1 @@
+export { default as Chip } from './Chip';

package/dist/components/atoms/InformationDisclaimer/InformationDisclaimer.js

@@ -1,35 +1,22 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { faCircleInfo as t } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
-import { FontAwesomeIcon as r } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
-import { resolveDisclaimerClasses as c, resolveIconColor as a } from "./InformationDisclaimer.styles.js";
+import { FontAwesomeIcon as a } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { resolveSizeStyles as m, resolveIconColor as d, resolveIcon as x } from "./InformationDisclaimer.styles.js";
 const j = ({
-  description: n,
-  title: i,
-  className: m,
-  icon: o,
-  type: s = "informative",
-  iconClassName: l = ""
-}) => /* @__PURE__ */ e.jsxs(
-  "div",
-  {
-    className: `flex items-center gap-12 p-12 w-full ${c(
-      s
-    )} rounded-lg ${m}`,
-    children: [
-      o ? /* @__PURE__ */ e.jsx(r, { icon: o, className: `min-h-20 h-20 ${l} ${a(s)}` }) : /* @__PURE__ */ e.jsx(
-        r,
-        {
-          icon: t,
-          className: `min-h-20 h-20 ${l} ${a(s)}`
-        }
-      ),
-      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ e.jsx("h4", { className: "text-body-s font-500 text-black leading-none", children: i }),
-        /* @__PURE__ */ e.jsx("p", { className: "text-gray-600 text-body-s leading-none", children: n })
-      ] })
-    ]
-  }
-);
+  description: o,
+  title: r,
+  showIcon: t = !0,
+  type: l = "informative",
+  size: n = "normal"
+}) => {
+  const s = m(n), i = x(l), c = d(l);
+  return /* @__PURE__ */ e.jsx("div", { className: `w-full rounded-xl bg-white border border-blue-100 ${s.containerStyles}`, children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-12", children: [
+      t && /* @__PURE__ */ e.jsx(a, { icon: i, className: `rounded-full ${s.iconStyles} ${c}` }),
+      /* @__PURE__ */ e.jsx("h5", { className: `font-semibold text-blue-900 self-center ${s.titleStyles}`, children: r })
+    ] }),
+    o && /* @__PURE__ */ e.jsx("p", { className: `text-gray-500 leading-[16px] ${s.descriptionStyles}`, children: o })
+  ] }) });
+};
 export {
   j as default
 };

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

@@ -1,3 +1,9 @@
 import { InformationDisclaimerType } from './InformationDisclaimer.types';
-export declare const resolveDisclaimerClasses: (type: InformationDisclaimerType) => "bg-yellow-50 border-2 border-yellow-500" | "bg-red-50 border-2 border-red-500" | "bg-blue-50 border-2 border-blue-500";
-export declare const resolveIconColor: (type: InformationDisclaimerType) => "text-blue-500" | "text-red-500" | "text-yellow-500";
+export declare const resolveSizeStyles: (size: "small" | "normal") => {
+    containerStyles: string;
+    titleStyles: string;
+    descriptionStyles: string;
+    iconStyles: string;
+};
+export declare const resolveIconColor: (type: InformationDisclaimerType) => "bg-green-100 text-green-500" | "bg-yellow-100 text-yellow-500" | "bg-red-100 text-red-500" | "bg-blue-100 text-blue-500";
+export declare const resolveIcon: (type: InformationDisclaimerType) => "info" | import('@fortawesome/fontawesome-common-types').IconDefinition;

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

@@ -1,23 +1,57 @@
-const e = (r) => {
-  switch (r) {
+import { faBell as t, faTriangleExclamation as r, faCircleInfo as s, faCircleCheck as n } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
+const c = (e) => {
+  switch (e) {
+    case "small":
+      return {
+        containerStyles: "p-12",
+        titleStyles: "text-sm",
+        descriptionStyles: "text-xs",
+        iconStyles: "p-4 text-xs"
+      };
+    case "normal":
+      return {
+        containerStyles: "p-16",
+        titleStyles: "text-14",
+        descriptionStyles: "text-sm",
+        iconStyles: "p-6 text-md"
+      };
+    default:
+      return {
+        containerStyles: "p-16",
+        titleStyles: "text-14",
+        descriptionStyles: "text-sm",
+        iconStyles: "p-6 text-md"
+      };
+  }
+}, o = (e) => {
+  switch (e) {
+    case "success":
+      return "bg-green-100 text-green-500";
     case "warning":
-      return "bg-yellow-50 border-2 border-yellow-500";
+      return "bg-yellow-100 text-yellow-500";
     case "error":
-      return "bg-red-50 border-2 border-red-500";
+      return "bg-red-100 text-red-500";
+    case "informative":
+      return "bg-blue-100 text-blue-500";
     default:
-      return "bg-blue-50 border-2 border-blue-500";
+      return "bg-blue-100 text-blue-500";
   }
-}, o = (r) => {
-  switch (r) {
+}, i = (e) => {
+  switch (e) {
+    case "success":
+      return n;
     case "warning":
-      return "text-yellow-500";
+      return s;
     case "error":
-      return "text-red-500";
+      return r;
+    case "informative":
+      return t;
     default:
-      return "text-blue-500";
+      return "info";
   }
 };
 export {
-  e as resolveDisclaimerClasses,
-  o as resolveIconColor
+  i as resolveIcon,
+  o as resolveIconColor,
+  c as resolveSizeStyles
 };

package/dist/components/atoms/InformationDisclaimer/InformationDisclaimer.types.d.ts

@@ -1,10 +1,10 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-export type InformationDisclaimerType = "informative" | "warning" | "error";
+export type InformationDisclaimerType = "success" | "informative" | "warning" | "error";
 export type InformationDisclaimerProps = {
     title: string;
     description: string;
     className?: string;
-    icon?: IconProp;
+    showIcon?: boolean;
     type?: InformationDisclaimerType;
     iconClassName?: string;
+    size?: "small" | "normal";
 };

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 export interface LoadingSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'circle' | 'cube';
     size?: number;
-    strokeWidth?: number;
     color?: string;
 }
 declare const LoadingSpinner: React.FC<LoadingSpinnerProps>;

package/dist/components/atoms/LoadingSpinner/LoadingSpinner.js

@@ -1,20 +1,64 @@
-import { j as e } from "../../../_virtual/jsx-runtime.js";
-const m = ({ size: s = 16, strokeWidth: t = 2, color: c = "#1DA696", ...n }) => {
-  const a = (s - t) / 2, r = 2 * Math.PI * a, { className: o = "", ...i } = n;
-  return /* @__PURE__ */ e.jsx("div", { ...i, className: `relative flex items-center justify-center ${o}`, children: /* @__PURE__ */ e.jsx("svg", { height: s, width: s, className: "animate-spin", children: /* @__PURE__ */ e.jsx(
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+const f = [
+  { rotate: "0deg", delay: "0s" },
+  { rotate: "90deg", delay: "0.3s" },
+  { rotate: "270deg", delay: "0.9s" },
+  { rotate: "180deg", delay: "0.6s" }
+], x = ({
+  variant: d = "circle",
+  size: e = 16,
+  color: s = "#1DA696",
+  ...h
+}) => {
+  const { className: r = "", ...o } = h;
+  if (d === "cube") {
+    const n = e / Math.SQRT2;
+    return /* @__PURE__ */ t.jsx(
+      "div",
+      {
+        ...o,
+        className: `relative flex items-center justify-center overflow-hidden ${r}`,
+        style: { width: e, height: e },
+        children: /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: "relative rotate-45",
+            style: { width: n, height: n },
+            children: f.map((c, m) => /* @__PURE__ */ t.jsx(
+              "div",
+              {
+                className: "float-left w-1/2 h-1/2 relative",
+                style: { transform: `scale(1.1) rotate(${c.rotate})` },
+                children: /* @__PURE__ */ t.jsx(
+                  "span",
+                  {
+                    className: "absolute inset-0 origin-bottom-right animate-sk-fold-cube",
+                    style: { backgroundColor: s, animationDelay: c.delay }
+                  }
+                )
+              },
+              m
+            ))
+          }
+        )
+      }
+    );
+  }
+  const l = Math.max(1, Math.round(e * 0.125)), i = (e - l) / 2, a = 2 * Math.PI * i;
+  return /* @__PURE__ */ t.jsx("div", { ...o, className: `relative flex items-center justify-center ${r}`, children: /* @__PURE__ */ t.jsx("svg", { height: e, width: e, className: "animate-spin", children: /* @__PURE__ */ t.jsx(
     "circle",
     {
-      stroke: c,
+      stroke: s,
       fill: "transparent",
-      strokeWidth: t,
-      strokeDasharray: r + " " + r,
-      strokeDashoffset: r / 4,
-      r: a,
-      cx: s / 2,
-      cy: s / 2
+      strokeWidth: l,
+      strokeDasharray: `${a} ${a}`,
+      strokeDashoffset: a / 4,
+      r: i,
+      cx: e / 2,
+      cy: e / 2
     }
   ) }) });
 };
 export {
-  m as default
+  x as default
 };

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 import { PasswordInputProps } from './PasswordInput.types';
 import { FieldValues } from 'react-hook-form';
-declare const PasswordInput: <T extends FieldValues>({ label, control, name, placeholder, className, disabled, leftSide, }: PasswordInputProps<T>) => React.ReactElement;
+declare const PasswordInput: <T extends FieldValues>({ label, control, name, placeholder, className, disabled, size, leftSide, }: PasswordInputProps<T>) => React.ReactElement;
 export default PasswordInput;