@esic-lab/data-core-ui 0.0.69 → 0.0.71

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;
@@ -642,9 +643,10 @@ type Props = {
     };
     yLabel?: string;
     xLabel?: string;
+    modeLabel?: "line" | "45";
     colorPalette?: string[];
 };
-declare const BarChart: ({ data, height, margin, yLabel, xLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
+declare const BarChart: ({ data, height, margin, yLabel, xLabel, modeLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
 
 interface PieChartProps {
     title?: string;

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;
@@ -642,9 +643,10 @@ type Props = {
     };
     yLabel?: string;
     xLabel?: string;
+    modeLabel?: "line" | "45";
     colorPalette?: string[];
 };
-declare const BarChart: ({ data, height, margin, yLabel, xLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
+declare const BarChart: ({ data, height, margin, yLabel, xLabel, modeLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
 
 interface PieChartProps {
     title?: string;

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 })
   ] });
 }
 
@@ -4691,6 +4708,7 @@ var BarChart = ({
   margin = defaultMargin,
   yLabel,
   xLabel,
+  modeLabel,
   colorPalette = defaultColorPalette
 }) => {
   const svgRef = (0, import_react21.useRef)(null);
@@ -4737,6 +4755,14 @@ var BarChart = ({
     );
     svg.select(".grid").lower();
     xAxisG.attr("transform", `translate(${margin.left},${height - margin.bottom})`).call(xAxis).selectAll("text").style("text-anchor", "middle").attr("dy", "1.5em").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
+    const labels = xAxisG.selectAll("text").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
+    if (modeLabel === "45") {
+      labels.attr("transform", "rotate(-45)").style("overflow", "visible").style("text-anchor", "end").attr("dx", "-0.8em").attr("dy", "0.15em");
+    } else if (modeLabel === "line") {
+      labels.attr("transform", "rotate(0)").style("text-anchor", "middle").attr("dx", "0").attr("dy", "1.5em");
+    } else {
+      labels.style("text-anchor", "middle").attr("dy", "1.5em");
+    }
     yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
       (enter) => enter.append("text").attr("class", "y-axis-label").attr("fill", "currentColor").attr("x", -margin.left + 8).attr("y", -margin.top + 20).attr("text-anchor", "start").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
       (update) => update.text((d) => d)
@@ -4776,14 +4802,14 @@ var BarChart = ({
       (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
     );
     g.selectAll("text.bar-label").data(data).join(
-      (enter) => enter.append("text").attr("class", "bar-label").attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).attr("text-anchor", "middle").style("font-size", "50px").style("font-weight", "bold").style("font-family", "Arial, sans-serif").style("fill", (d, i) => colorPalette[i % colorPalette.length]).text((d) => d.y),
+      (enter) => enter.append("text").attr("class", "bar-label").attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).attr("text-anchor", "middle").style("font-size", "50px").style("font-weight", "bold").style("font-family", "Arial, sans-serif").style("fill", (d, i) => colorPalette[i % colorPalette.length]).style("overflow", "visible").text((d) => d.y),
       (update) => update.transition(t).attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).text((d) => d.y),
       (exit) => exit.remove()
     );
   };
   (0, import_react21.useEffect)(() => {
     render();
-  }, [data, height, margin, xDomain.toString(), yDomain.toString()]);
+  }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("svg", { ref: svgRef, role: "img", "aria-label": "Bar chart", style: { display: "block", width: "100%", height }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: xAxisRef }),

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 })
   ] });
 }
 
@@ -4625,6 +4642,7 @@ var BarChart = ({
   margin = defaultMargin,
   yLabel,
   xLabel,
+  modeLabel,
   colorPalette = defaultColorPalette
 }) => {
   const svgRef = useRef8(null);
@@ -4671,6 +4689,14 @@ var BarChart = ({
     );
     svg.select(".grid").lower();
     xAxisG.attr("transform", `translate(${margin.left},${height - margin.bottom})`).call(xAxis).selectAll("text").style("text-anchor", "middle").attr("dy", "1.5em").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
+    const labels = xAxisG.selectAll("text").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
+    if (modeLabel === "45") {
+      labels.attr("transform", "rotate(-45)").style("overflow", "visible").style("text-anchor", "end").attr("dx", "-0.8em").attr("dy", "0.15em");
+    } else if (modeLabel === "line") {
+      labels.attr("transform", "rotate(0)").style("text-anchor", "middle").attr("dx", "0").attr("dy", "1.5em");
+    } else {
+      labels.style("text-anchor", "middle").attr("dy", "1.5em");
+    }
     yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
       (enter) => enter.append("text").attr("class", "y-axis-label").attr("fill", "currentColor").attr("x", -margin.left + 8).attr("y", -margin.top + 20).attr("text-anchor", "start").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
       (update) => update.text((d) => d)
@@ -4710,14 +4736,14 @@ var BarChart = ({
       (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
     );
     g.selectAll("text.bar-label").data(data).join(
-      (enter) => enter.append("text").attr("class", "bar-label").attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).attr("text-anchor", "middle").style("font-size", "50px").style("font-weight", "bold").style("font-family", "Arial, sans-serif").style("fill", (d, i) => colorPalette[i % colorPalette.length]).text((d) => d.y),
+      (enter) => enter.append("text").attr("class", "bar-label").attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).attr("text-anchor", "middle").style("font-size", "50px").style("font-weight", "bold").style("font-family", "Arial, sans-serif").style("fill", (d, i) => colorPalette[i % colorPalette.length]).style("overflow", "visible").text((d) => d.y),
       (update) => update.transition(t).attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).text((d) => d.y),
       (exit) => exit.remove()
     );
   };
   useEffect9(() => {
     render();
-  }, [data, height, margin, xDomain.toString(), yDomain.toString()]);
+  }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
   return /* @__PURE__ */ jsx46("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ jsxs37("svg", { ref: svgRef, role: "img", "aria-label": "Bar chart", style: { display: "block", width: "100%", height }, children: [
     /* @__PURE__ */ jsx46("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
     /* @__PURE__ */ jsx46("g", { ref: xAxisRef }),

package/package.json

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