lawgic-dev-kit 0.23.8 → 0.25.0

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

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

package/dist/components/atoms/TextArea/TextArea.js

@@ -0,0 +1,92 @@
+import { j as l } from "../../../_virtual/jsx-runtime.js";
+import { useController as j } from "react-hook-form";
+import { useTheme as N } from "../../../hooks/useTheme.js";
+import "react";
+const T = ({
+  label: s,
+  control: u,
+  name: r,
+  placeholder: x,
+  className: c = "",
+  disabled: e = !1,
+  translateKey: d = "",
+  size: i = "md",
+  rows: p = 4,
+  ...g
+}) => {
+  const {
+    field: { value: n = "", onChange: m, ref: f, onBlur: h },
+    fieldState: { error: t }
+  } = j({ name: r, control: u }), { t: a } = N(), o = {
+    sm: {
+      container: "px-16 py-8",
+      text: "text-sm",
+      label: "text-sm",
+      error: "text-sm",
+      gap: "gap-8"
+    },
+    md: {
+      container: "p-16",
+      text: "text-14",
+      label: "text-14",
+      error: "text-sm",
+      gap: "gap-8"
+    }
+  }[i], b = a(r), $ = a(d);
+  return /* @__PURE__ */ l.jsxs(
+    "label",
+    {
+      className: `flex flex-col group select-none ${o.gap} ${e && "cursor-not-allowed"} ${c}`,
+      htmlFor: r,
+      children: [
+        s && /* @__PURE__ */ l.jsx(
+          "h6",
+          {
+            className: `text-gray-600 font-600 leading-none group ${t && "text-red-500!"} ${o.label} ${e && "text-gray-300"}`,
+            children: s
+          }
+        ),
+        /* @__PURE__ */ l.jsx(
+          "div",
+          {
+            className: `
+          ${o.container}
+
+          ${t && "border-red-500!"}
+
+          !bg-blue-50
+
+          rounded-2xl border
+
+          ${n && !e ? "border-blue-200" : "border-blue-100"}
+          ${!e && "group-hover:border-blue-300"}
+          ${e && "cursor-not-allowed"}
+
+          group-focus-within:border-blue-500 transition-colors duration-200 ease-in-out
+        `,
+            children: /* @__PURE__ */ l.jsx(
+              "textarea",
+              {
+                id: r,
+                name: r,
+                disabled: e,
+                placeholder: x,
+                value: n,
+                onChange: (y) => m(y.target.value),
+                onBlur: h,
+                ref: f,
+                rows: p,
+                className: `bg-transparent w-full font-600 placeholder:font-600 select-text ${o.text} disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed resize-none outline-hidden`,
+                ...g
+              }
+            )
+          }
+        ),
+        (t == null ? void 0 : t.message) && /* @__PURE__ */ l.jsx("h4", { className: `font-500 text-red-500 leading-none ${o.error}`, children: a(t.message, { x: $ || b }) })
+      ]
+    }
+  );
+};
+export {
+  T as default
+};

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

@@ -0,0 +1,12 @@
+import { Control, FieldValues, Path } from 'react-hook-form';
+export type TextAreaProps<T extends FieldValues = FieldValues> = {
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    translateKey?: string;
+    size?: 'sm' | 'md';
+    rows?: number;
+    control: Control<T>;
+    name: Path<T>;
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;

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

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

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

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

package/dist/components/atoms/TextInput/TextInput.js

@@ -1,24 +1,25 @@
 import { j as l } from "../../../_virtual/jsx-runtime.js";
-import { useController as w } from "react-hook-form";
+import { useController as N } from "react-hook-form";
 import { useTheme as v } from "../../../hooks/useTheme.js";
 import "react";
-const S = ({
+const T = ({
   label: a,
-  control: x,
+  control: d,
   name: e,
-  placeholder: d,
+  placeholder: p,
   className: i = "",
   disabled: t = !1,
   leftSide: n,
   rightSide: u,
-  translateKey: p = "",
-  size: g = "md",
-  ...m
+  translateKey: g = "",
+  size: m = "md",
+  required: c = !1,
+  ...f
 }) => {
   const {
-    field: { value: c = "", onChange: f, ref: b, onBlur: h },
+    field: { value: x = "", onChange: b, ref: h, onBlur: $ },
     fieldState: { error: r }
-  } = w({ name: e, control: x }), { t: s } = v(), o = {
+  } = N({ name: e, control: d }), { t: s } = v(), o = {
     sm: {
       container: "px-16 py-8",
       text: "text-sm",
@@ -33,18 +34,21 @@ const S = ({
       error: "text-sm",
       gap: "gap-8"
     }
-  }[g], $ = s(e), y = s(p);
+  }[m], y = s(e), j = s(g);
   return /* @__PURE__ */ l.jsxs(
     "label",
     {
       className: `flex flex-col group select-none ${o.gap} ${t && "cursor-not-allowed"} ${i}`,
       htmlFor: e,
       children: [
-        a && /* @__PURE__ */ l.jsx(
+        a && /* @__PURE__ */ l.jsxs(
           "h6",
           {
             className: `text-gray-600 font-600 leading-none group ${r && "text-red-500!"} ${o.label} ${t && "text-gray-300"}`,
-            children: a
+            children: [
+              a,
+              c && /* @__PURE__ */ l.jsx("span", { className: "text-red-500 ml-4", children: "*" })
+            ]
           }
         ),
         /* @__PURE__ */ l.jsxs(
@@ -60,7 +64,7 @@ const S = ({
 				
 				rounded-full border 
 				
-				${c && !t ? "border-blue-200" : "border-blue-100"} 
+				${x && !t ? "border-blue-200" : "border-blue-100"} 
 				${!t && "group-hover:border-blue-300"} 
 				${t && "cursor-not-allowed"}
 				
@@ -76,24 +80,25 @@ const S = ({
                   id: e,
                   name: e,
                   disabled: t,
-                  placeholder: d,
-                  value: c,
-                  onChange: (j) => f(j.target.value),
-                  onBlur: h,
-                  ref: b,
+                  required: c,
+                  placeholder: p,
+                  value: x,
+                  onChange: (w) => b(w.target.value),
+                  onBlur: $,
+                  ref: h,
                   className: `group bg-transparent w-full h-full font-600 placeholder:font-600 select-text ${o.text} disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-hidden`,
-                  ...m
+                  ...f
                 }
               ),
               u && u
             ]
           }
         ),
-        (r == null ? void 0 : r.message) && /* @__PURE__ */ l.jsx("h4", { className: `font-500 text-red-500 leading-none ${o.error}`, children: s(r.message, { x: y || $ }) })
+        (r == null ? void 0 : r.message) && /* @__PURE__ */ l.jsx("h4", { className: `font-500 text-red-500 leading-none ${o.error}`, children: s(r.message, { x: j || y }) })
       ]
     }
   );
 };
 export {
-  S as default
+  T as default
 };

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

@@ -4,6 +4,7 @@ export type TextInputProps<T extends FieldValues = FieldValues> = {
     placeholder?: string;
     className?: string;
     disabled?: boolean;
+    required?: boolean;
     translateKey?: string;
     size?: 'sm' | 'md';
     control: Control<T>;

package/dist/components/atoms/UncontrolledTextInput/UncontrolledTextInput.js

@@ -1,22 +1,23 @@
-import { j as o } from "../../../_virtual/jsx-runtime.js";
-import { useTheme as h } from "../../../hooks/useTheme.js";
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { useTheme as b } from "../../../hooks/useTheme.js";
 import "react";
-const w = ({
-  label: n,
-  onChange: p,
-  value: s,
-  name: t,
+const N = ({
+  label: s,
+  onChange: i,
+  value: n,
+  name: r,
   error: l,
-  placeholder: i,
-  className: g = "",
+  placeholder: g,
+  className: d = "",
   disabled: e = !1,
   disabledInput: a = !1,
-  size: d = "md",
-  leftSide: c,
-  rightSide: x,
-  ...b
+  required: c = !1,
+  size: m = "md",
+  leftSide: x,
+  rightSide: p,
+  ...f
 }) => {
-  const { t: u } = h(), r = {
+  const { t: u } = b(), o = {
     sm: {
       container: "px-16 py-8",
       text: "text-sm",
@@ -31,28 +32,31 @@ const w = ({
       error: "text-14",
       gap: "gap-8"
     }
-  }[d];
-  return /* @__PURE__ */ o.jsxs(
+  }[m];
+  return /* @__PURE__ */ t.jsxs(
     "label",
     {
-      className: `flex flex-col group select-none ${r.gap} ${e && "cursor-not-allowed"} ${g}`,
-      htmlFor: t,
+      className: `flex flex-col group select-none ${o.gap} ${e && "cursor-not-allowed"} ${d}`,
+      htmlFor: r,
       children: [
-        n && /* @__PURE__ */ o.jsx(
+        s && /* @__PURE__ */ t.jsxs(
           "h6",
           {
-            className: `text-gray-600 font-600 leading-none group ${l && "!text-red-500"} ${r.label} ${e && "text-gray-300"}`,
-            children: n
+            className: `text-gray-600 font-600 leading-none group ${l && "!text-red-500"} ${o.label} ${e && "text-gray-300"}`,
+            children: [
+              s,
+              c && /* @__PURE__ */ t.jsx("span", { className: "text-red-500 ml-4", children: "*" })
+            ]
           }
         ),
-        /* @__PURE__ */ o.jsxs(
+        /* @__PURE__ */ t.jsxs(
           "label",
           {
-            htmlFor: t,
+            htmlFor: r,
             className: `
           flex items-center justify-between gap-8 bg-light 
-          ${r.container} ${l && "!border-red-500"} rounded-full border 
-          ${s && !e ? "border-blue-200" : "border-blue-100"} 
+          ${o.container} ${l && "!border-red-500"} rounded-full border 
+          ${n && !e ? "border-blue-200" : "border-blue-100"} 
           ${!e && "group-hover:border-blue-300"} 
           ${e && "cursor-not-allowed"}
 				
@@ -61,31 +65,32 @@ const w = ({
 				group-disabled:bg-gray-500
 				`,
             children: [
-              c && c,
-              /* @__PURE__ */ o.jsx(
+              x && x,
+              /* @__PURE__ */ t.jsx(
                 "input",
                 {
-                  ...b,
-                  id: t,
-                  name: t,
+                  ...f,
+                  id: r,
+                  name: r,
                   disabled: e,
-                  placeholder: i,
-                  value: s,
-                  onChange: (f) => {
-                    p(f.target.value);
+                  required: c,
+                  placeholder: g,
+                  value: n,
+                  onChange: (h) => {
+                    i(h.target.value);
                   },
-                  className: `group bg-transparent w-full h-full font-600 placeholder:font-600 select-text ${r.text} disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none ${a && "pointer-events-none !select-none !caret-transparent"}`
+                  className: `group bg-transparent w-full h-full font-600 placeholder:font-600 select-text ${o.text} disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-none ${a && "pointer-events-none !select-none !caret-transparent"}`
                 }
               ),
-              x && x
+              p && p
             ]
           }
         ),
-        l && /* @__PURE__ */ o.jsx("h4", { className: `font-500 text-red-500 leading-none ${r.error}`, children: u(l, { x: u(t) }) })
+        l && /* @__PURE__ */ t.jsx("h4", { className: `font-500 text-red-500 leading-none ${o.error}`, children: u(l, { x: u(r) }) })
       ]
     }
   );
 };
 export {
-  w as default
+  N as default
 };

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

@@ -8,6 +8,7 @@ export type UncontrolledTextInputProps = {
     error?: string | undefined;
     disabled?: boolean;
     disabledInput?: boolean;
+    required?: boolean;
     size?: 'sm' | 'md';
     leftSide?: React.ReactNode;
     rightSide?: React.ReactNode;