@esic-lab/data-core-ui 0.0.70 → 0.0.72

package/dist/index.css

@@ -71,7 +71,6 @@
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-primary-800: #2b3587;
-    --color-primary-700: #3745af;
     --color-primary-500: #4e61f6;
     --color-primary-400: #7181f8;
     --color-primary-200: #aeb6fb;
@@ -978,8 +977,8 @@
   .border-b-gray-200 {
     border-bottom-color: var(--color-gray-200);
   }
-  .border-b-primary-700 {
-    border-bottom-color: var(--color-primary-700);
+  .border-b-primary-500 {
+    border-bottom-color: var(--color-primary-500);
   }
   .\!bg-gray-300 {
     background-color: var(--color-gray-300) !important;
@@ -1110,6 +1109,9 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-\[10px\] {
+    padding-bottom: 10px;
+  }
   .pb-\[16px\] {
     padding-bottom: 16px;
   }
@@ -1225,9 +1227,6 @@
   .text-primary-500 {
     color: var(--color-primary-500);
   }
-  .text-primary-700 {
-    color: var(--color-primary-700);
-  }
   .text-red-500 {
     color: var(--color-red-500);
   }

package/dist/index.d.mts

@@ -58,7 +58,7 @@ interface ParamTabSelection {
     now: string;
     onClickGoto: (path: string) => void;
 }
-declare const TabSelectionButton: ({ title, now, onClickGoto }: ParamTabSelection) => react_jsx_runtime.JSX.Element;
+declare const TabSelectionButton: ({ title, now, onClickGoto, }: ParamTabSelection) => react_jsx_runtime.JSX.Element;
 
 interface TertiaryButtonProps {
     title: string;
@@ -220,8 +220,9 @@ interface TextInputProps {
     value?: string;
     onChange: (value: string) => void;
     disabled?: boolean;
+    className?: string;
 }
-declare function TextInput({ label, placeholder, type, maxLength, required, error, value, onChange, disabled, }: TextInputProps): react_jsx_runtime.JSX.Element;
+declare function TextInput({ label, placeholder, type, maxLength, required, error, value, onChange, disabled, className, }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 interface TextAreaProps {
     label?: string;
@@ -258,6 +259,7 @@ declare function InputField({ value, onChange, placeholder, label, required, dis
 interface InputFieldNumberProps {
     value: number | string | null;
     onChange: (value: number | string | null) => void;
+    onBlur?: (e: HTMLInputElement) => void;
     placeholder?: string;
     label?: string;
     required?: boolean;
@@ -281,7 +283,7 @@ interface InputFieldNumberProps {
     decimalScale?: number;
     format?: "number" | "currency";
 }
-declare function InputFieldNumber({ value, onChange, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, max, min, controls, size, changeOnWheel, formatter, parser, decimal, decimalScale, format, }: InputFieldNumberProps): react_jsx_runtime.JSX.Element;
+declare function InputFieldNumber({ value, onChange, onBlur, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, max, min, controls, size, changeOnWheel, formatter, parser, decimal, decimalScale, format, }: InputFieldNumberProps): react_jsx_runtime.JSX.Element;
 
 interface DatePickerBasicProps {
     value: Date | null;

package/dist/index.d.ts

@@ -58,7 +58,7 @@ interface ParamTabSelection {
     now: string;
     onClickGoto: (path: string) => void;
 }
-declare const TabSelectionButton: ({ title, now, onClickGoto }: ParamTabSelection) => react_jsx_runtime.JSX.Element;
+declare const TabSelectionButton: ({ title, now, onClickGoto, }: ParamTabSelection) => react_jsx_runtime.JSX.Element;
 
 interface TertiaryButtonProps {
     title: string;
@@ -220,8 +220,9 @@ interface TextInputProps {
     value?: string;
     onChange: (value: string) => void;
     disabled?: boolean;
+    className?: string;
 }
-declare function TextInput({ label, placeholder, type, maxLength, required, error, value, onChange, disabled, }: TextInputProps): react_jsx_runtime.JSX.Element;
+declare function TextInput({ label, placeholder, type, maxLength, required, error, value, onChange, disabled, className, }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 interface TextAreaProps {
     label?: string;
@@ -258,6 +259,7 @@ declare function InputField({ value, onChange, placeholder, label, required, dis
 interface InputFieldNumberProps {
     value: number | string | null;
     onChange: (value: number | string | null) => void;
+    onBlur?: (e: HTMLInputElement) => void;
     placeholder?: string;
     label?: string;
     required?: boolean;
@@ -281,7 +283,7 @@ interface InputFieldNumberProps {
     decimalScale?: number;
     format?: "number" | "currency";
 }
-declare function InputFieldNumber({ value, onChange, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, max, min, controls, size, changeOnWheel, formatter, parser, decimal, decimalScale, format, }: InputFieldNumberProps): react_jsx_runtime.JSX.Element;
+declare function InputFieldNumber({ value, onChange, onBlur, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, max, min, controls, size, changeOnWheel, formatter, parser, decimal, decimalScale, format, }: InputFieldNumberProps): react_jsx_runtime.JSX.Element;
 
 interface DatePickerBasicProps {
     value: Date | null;

package/dist/index.js

@@ -529,13 +529,17 @@ function GhostButton({ title, onClick, iconLeft, iconRight, disabled }) {
 
 // src/Button/TabSelectionButton/TabSelectionButton.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var TabSelectionButton = ({ title, now, onClickGoto }) => {
+var TabSelectionButton = ({
+  title,
+  now,
+  onClickGoto
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex subtitle-2", children: [
     title.map((text) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "button",
       {
         onClick: () => onClickGoto(text.path),
-        className: `text-nowrap px-2 cursor-pointer  ${now === text.path ? "border-b-primary-700 text-primary-700 border-b-2" : "border-b-gray-200 border-b-2"}`,
+        className: `text-nowrap px-2 cursor-pointer pb-[10px]  ${now === text.path ? "border-b-primary-500 text-primary-500 border-b-2" : "border-b-gray-200 border-b-2"}`,
         children: text.name
       }
     )),
@@ -1187,15 +1191,16 @@ function TextInput({
   error,
   value,
   onChange,
-  disabled
+  disabled,
+  className
 }) {
   const [showPassword, setShowPassword] = (0, import_react7.useState)(false);
   const onShowPassword = () => {
     setShowPassword(!showPassword);
   };
   const inputType = type === "password" ? showPassword ? "text" : "password" : "text";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "body-1 mb-[8px]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-col flex gap-2", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "body-1", children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-red-500", children: "\xA0*" })
     ] }),
@@ -1203,7 +1208,7 @@ function TextInput({
       "div",
       {
         className: `border-[1px] rounded-[8px] w-full h-[40px] flex justify-center items-center 
-        ${disabled ? "bg-gray-100 text-gray-400" : error ? "border-red-500" : ""}`,
+        ${disabled ? "bg-gray-100 text-gray-400" : error ? "border-red-500" : ""} ${className ?? ""}`,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "input",
@@ -1218,11 +1223,23 @@ function TextInput({
               disabled
             }
           ),
-          type === "password" && (showPassword ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react7.IconEye, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react7.IconEyeOff, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }))
+          type === "password" && (showPassword ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_icons_react7.IconEye,
+            {
+              className: "text-gray-600 mr-[8px] cursor-pointer",
+              onClick: onShowPassword
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_icons_react7.IconEyeOff,
+            {
+              className: "text-gray-600 mr-[8px] cursor-pointer",
+              onClick: onShowPassword
+            }
+          ))
         ]
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-red-500 body-1", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-red-500 caption-1", children: error })
   ] });
 }
 
@@ -1343,6 +1360,7 @@ var import_jsx_runtime23 = require("react/jsx-runtime");
 function InputFieldNumber({
   value,
   onChange,
+  onBlur,
   placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
   label,
   required,
@@ -1401,6 +1419,7 @@ function InputFieldNumber({
           {
             value: value ?? void 0,
             onChange: (val) => onChange(val),
+            onBlur: (e) => onBlur?.(e.target),
             placeholder,
             disabled,
             className: `body-1 !w-full ${className ?? ""}`,
@@ -1417,16 +1436,7 @@ function InputFieldNumber({
             precision: decimal ? safeScale : 0,
             inputMode: decimal ? "decimal" : "numeric",
             onKeyDown: (e) => {
-              const allowed = [
-                "Backspace",
-                "Delete",
-                "ArrowLeft",
-                "ArrowRight",
-                "Tab",
-                "Enter",
-                "Home",
-                "End"
-              ];
+              const allowed = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Home", "End"];
               if (allowed.includes(e.key)) return;
               if (e.ctrlKey || e.metaKey) return;
               if (!decimal) {

package/dist/index.mjs

@@ -463,13 +463,17 @@ function GhostButton({ title, onClick, iconLeft, iconRight, disabled }) {
 
 // src/Button/TabSelectionButton/TabSelectionButton.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var TabSelectionButton = ({ title, now, onClickGoto }) => {
+var TabSelectionButton = ({
+  title,
+  now,
+  onClickGoto
+}) => {
   return /* @__PURE__ */ jsxs2("div", { className: "flex subtitle-2", children: [
     title.map((text) => /* @__PURE__ */ jsx4(
       "button",
       {
         onClick: () => onClickGoto(text.path),
-        className: `text-nowrap px-2 cursor-pointer  ${now === text.path ? "border-b-primary-700 text-primary-700 border-b-2" : "border-b-gray-200 border-b-2"}`,
+        className: `text-nowrap px-2 cursor-pointer pb-[10px]  ${now === text.path ? "border-b-primary-500 text-primary-500 border-b-2" : "border-b-gray-200 border-b-2"}`,
         children: text.name
       }
     )),
@@ -1121,15 +1125,16 @@ function TextInput({
   error,
   value,
   onChange,
-  disabled
+  disabled,
+  className
 }) {
   const [showPassword, setShowPassword] = useState5(false);
   const onShowPassword = () => {
     setShowPassword(!showPassword);
   };
   const inputType = type === "password" ? showPassword ? "text" : "password" : "text";
-  return /* @__PURE__ */ jsxs13("div", { children: [
-    label && /* @__PURE__ */ jsxs13("p", { className: "body-1 mb-[8px]", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "flex-col flex gap-2", children: [
+    label && /* @__PURE__ */ jsxs13("p", { className: "body-1", children: [
       label,
       required && /* @__PURE__ */ jsx20("span", { className: "text-red-500", children: "\xA0*" })
     ] }),
@@ -1137,7 +1142,7 @@ function TextInput({
       "div",
       {
         className: `border-[1px] rounded-[8px] w-full h-[40px] flex justify-center items-center 
-        ${disabled ? "bg-gray-100 text-gray-400" : error ? "border-red-500" : ""}`,
+        ${disabled ? "bg-gray-100 text-gray-400" : error ? "border-red-500" : ""} ${className ?? ""}`,
         children: [
           /* @__PURE__ */ jsx20(
             "input",
@@ -1152,11 +1157,23 @@ function TextInput({
               disabled
             }
           ),
-          type === "password" && (showPassword ? /* @__PURE__ */ jsx20(IconEye, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }) : /* @__PURE__ */ jsx20(IconEyeOff, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }))
+          type === "password" && (showPassword ? /* @__PURE__ */ jsx20(
+            IconEye,
+            {
+              className: "text-gray-600 mr-[8px] cursor-pointer",
+              onClick: onShowPassword
+            }
+          ) : /* @__PURE__ */ jsx20(
+            IconEyeOff,
+            {
+              className: "text-gray-600 mr-[8px] cursor-pointer",
+              onClick: onShowPassword
+            }
+          ))
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx20("p", { className: "text-red-500 body-1", children: error })
+    error && /* @__PURE__ */ jsx20("p", { className: "text-red-500 caption-1", children: error })
   ] });
 }
 
@@ -1277,6 +1294,7 @@ import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function InputFieldNumber({
   value,
   onChange,
+  onBlur,
   placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
   label,
   required,
@@ -1335,6 +1353,7 @@ function InputFieldNumber({
           {
             value: value ?? void 0,
             onChange: (val) => onChange(val),
+            onBlur: (e) => onBlur?.(e.target),
             placeholder,
             disabled,
             className: `body-1 !w-full ${className ?? ""}`,
@@ -1351,16 +1370,7 @@ function InputFieldNumber({
             precision: decimal ? safeScale : 0,
             inputMode: decimal ? "decimal" : "numeric",
             onKeyDown: (e) => {
-              const allowed = [
-                "Backspace",
-                "Delete",
-                "ArrowLeft",
-                "ArrowRight",
-                "Tab",
-                "Enter",
-                "Home",
-                "End"
-              ];
+              const allowed = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Home", "End"];
               if (allowed.includes(e.key)) return;
               if (e.ctrlKey || e.metaKey) return;
               if (!decimal) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",