@esic-lab/data-core-ui 0.0.12 → 0.0.14

package/dist/index.css

@@ -24,14 +24,20 @@
       "Courier New",
       monospace;
     --color-red-100: #fac5c3;
+    --color-red-400: #f16965;
     --color-red-500: #ee443f;
+    --color-red-600: #d93e39;
+    --color-green-500: #43b75d;
     --color-blue-500: #0095ff;
     --color-gray-200: #e5e7ea;
     --color-gray-300: #d2d5db;
     --color-gray-400: #9ea2ae;
+    --color-gray-600: #4d5461;
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --font-weight-semibold: 600;
+    --radius-md: 0.375rem;
     --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -230,12 +236,24 @@
   }
 }
 @layer utilities {
+  .relative {
+    position: relative;
+  }
   .static {
     position: static;
   }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
   .mt-\[10px\] {
     margin-top: 10px;
   }
+  .mr-\[8px\] {
+    margin-right: 8px;
+  }
+  .mb-\[8px\] {
+    margin-bottom: 8px;
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -248,6 +266,9 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
@@ -269,9 +290,15 @@
   .h-\[24px\] {
     height: 24px;
   }
+  .h-\[28px\] {
+    height: 28px;
+  }
   .h-\[30px\] {
     height: 30px;
   }
+  .h-\[35px\] {
+    height: 35px;
+  }
   .h-\[40px\] {
     height: 40px;
   }
@@ -281,6 +308,9 @@
   .h-\[47px\] {
     height: 47px;
   }
+  .h-\[700px\] {
+    height: 700px;
+  }
   .h-full {
     height: 100%;
   }
@@ -305,12 +335,21 @@
   .w-\[40px\] {
     width: 40px;
   }
+  .w-\[80px\] {
+    width: 80px;
+  }
+  .w-\[100px\] {
+    width: 100px;
+  }
   .w-\[202px\] {
     width: 202px;
   }
   .w-\[242px\] {
     width: 242px;
   }
+  .w-\[1500px\] {
+    width: 1500px;
+  }
   .w-full {
     width: 100%;
   }
@@ -343,6 +382,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .\[grid-template-columns\:repeat\(var\(--cols\)\,minmax\(0\,1fr\)\)\] {
+    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -364,6 +406,17 @@
   .gap-\[20px\] {
     gap: 20px;
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-\[2px\] {
+    border-radius: 2px;
+  }
   .rounded-\[6px\] {
     border-radius: 6px;
   }
@@ -373,6 +426,9 @@
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -385,6 +441,14 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-l-\[10px\] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 10px;
+  }
   .border-solid {
     --tw-border-style: solid;
     border-style: solid;
@@ -392,6 +456,15 @@
   .border-black {
     border-color: var(--color-black);
   }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
+  .border-green-500 {
+    border-color: var(--color-green-500);
+  }
+  .border-red-600 {
+    border-color: var(--color-red-600);
+  }
   .border-t-transparent {
     border-top-color: transparent;
   }
@@ -413,6 +486,9 @@
   .bg-primary-500 {
     background-color: var(--color-primary-500);
   }
+  .bg-red-400 {
+    background-color: var(--color-red-400);
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -422,15 +498,37 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-\[4px\] {
+    padding: 4px;
+  }
   .p-\[10px\] {
     padding: 10px;
   }
+  .px-\[16px\] {
+    padding-inline: 16px;
+  }
+  .py-\[8px\] {
+    padding-block: 8px;
+  }
+  .text-left {
+    text-align: left;
+  }
   .text-\[20px\] {
     font-size: 20px;
   }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
   .text-black {
     color: var(--color-black);
   }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -449,6 +547,10 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -573,6 +675,9 @@
     border-color: var(--color-gray-200, currentcolor);
   }
 }
+::-ms-reveal {
+  display: none;
+}
 .headline-1 {
   font-family: "Kanit";
   font-size: 48px;
@@ -713,6 +818,52 @@
   font-weight: 600;
   line-height: 12px;
 }
+.fc-toolbar-title {
+  font-family: "Kanit";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 28px;
+}
+.fc-col-header-cell-cushion {
+  font-family: "Kanit";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+.fc-daygrid-day {
+  height: 100px;
+}
+.fc-daygrid-day-number {
+  font-family: "Kanit";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
+.fc-daygrid-day-top {
+  display: flex;
+  justify-content: center;
+}
+.fc-event {
+  border: none;
+  background: none;
+}
+.fc-daygrid-more-link {
+  font-family: "Kanit";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
+.fc-popover-title {
+  font-family: "Kanit";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@@ -725,6 +876,7 @@
 @property --tw-skew-x { syntax: "*"; inherits: false; }
 @property --tw-skew-y { syntax: "*"; inherits: false; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-font-weight { syntax: "*"; inherits: false; }
 @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-shadow-color { syntax: "*"; inherits: false; }
 @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@@ -739,6 +891,7 @@
 @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
 @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
 @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-duration { syntax: "*"; inherits: false; }
 @keyframes spin {
   to {
@@ -763,6 +916,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-border-style: solid;
+      --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -777,6 +931,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-duration: initial;
     }
   }

package/dist/index.d.mts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { EventSourceInput } from '@fullcalendar/core';
 
 type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
@@ -95,7 +97,35 @@ declare function MenuNavBar({ menus, onClick }: MenuNavBarProps): react_jsx_runt
 
 interface TopNavBarProps {
     onClickNoti: () => void;
+    logo?: React.ReactNode;
 }
-declare function TopNavBar({ onClickNoti }: TopNavBarProps): react_jsx_runtime.JSX.Element;
+declare function TopNavBar({ onClickNoti, logo }: TopNavBarProps): react_jsx_runtime.JSX.Element;
 
-export { Checkbox, CheckboxGroup, GhostButton, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, Radio, RadioGroup, SecondaryButton, Switch, TopNavBar };
+interface Column<T> {
+    header: string;
+    accessor: keyof T | ((row: T) => React$1.ReactNode);
+}
+interface DataTableProps<T> {
+    columns: Column<T>[];
+    data: T[];
+}
+declare function DataTable<T>({ columns, data }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CalendarProps {
+    events: EventSourceInput | undefined;
+}
+declare function Calendar({ events }: CalendarProps): react_jsx_runtime.JSX.Element;
+
+interface TextInputProps {
+    label: string;
+    placeholder?: string;
+    type?: "text" | "password";
+    maxLength?: number;
+    required?: boolean;
+    error?: string;
+    value?: string;
+    onChange: (value: string) => void;
+}
+declare function TextInput({ label, placeholder, type, maxLength, required, error, value, onChange, }: TextInputProps): react_jsx_runtime.JSX.Element;
+
+export { Calendar, Checkbox, CheckboxGroup, DataTable, GhostButton, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, Radio, RadioGroup, SecondaryButton, Switch, TextInput, TopNavBar };

package/dist/index.js

@@ -47,7 +47,7 @@ function PrimaryButton({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer ${bgColor} text-${textColor}`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer ${bgColor} text-${textColor} body-1`,
       onClick,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: iconLeft }),
@@ -64,7 +64,7 @@ function SecondaryButton({ title, onClick, iconLeft, iconRight }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] border-black cursor-pointer bg-white text-black`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] border-black cursor-pointer bg-white text-black body-1`,
       onClick,
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: iconLeft }),
@@ -81,7 +81,7 @@ function GhostButton({ title, onClick, iconLeft, iconRight }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer bg-[#E9E9E9]`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer bg-[#E9E9E9] body-1`,
       onClick,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: iconLeft }),
@@ -125,7 +125,7 @@ function Checkbox({ label, checked, onChange }) {
         )
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "body-1", children: label })
   ] });
 }
 
@@ -153,7 +153,7 @@ var import_jsx_runtime8 = require("react/jsx-runtime");
 function RadioGroup({ options, value, onChange, alignment = "horizontal" }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `flex gap-2 ${alignment === "vertical" ? "flex-col" : ""}`, children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Radio, { selected: value === opt.value, onChange: () => onChange(opt.value) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: opt.label })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "body-1", children: opt.label })
   ] }, opt.value)) });
 }
 
@@ -205,16 +205,15 @@ function MenuNavBar({ menus, onClick }) {
   ] }, `menu_${menu.title}`)) });
 }
 
-// src/assets/STO-logo.svg
-var STO_logo_default = "./STO-logo-ADYYAPS3.svg";
-
 // src/NavBar/TopNavBar/TopNavBar.tsx
 var import_icons_react2 = require("@tabler/icons-react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_meta = {};
+var STOLogo = new URL("../../assets/STO-logo.svg", import_meta.url).href;
 function TopNavBar({ onClickNoti }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-full h-full flex", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-[20px] p-[10px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { src: STO_logo_default }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { src: STOLogo }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "subtitle-1", children: "Project Management" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center ml-auto gap-[20px] p-[10px]", children: [

package/dist/index.mjs

@@ -11,7 +11,7 @@ function PrimaryButton({
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer ${bgColor} text-${textColor}`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer ${bgColor} text-${textColor} body-1`,
       onClick,
       children: /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ jsx("div", { children: iconLeft }),
@@ -28,7 +28,7 @@ function SecondaryButton({ title, onClick, iconLeft, iconRight }) {
   return /* @__PURE__ */ jsx2(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] border-black cursor-pointer bg-white text-black`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] border-black cursor-pointer bg-white text-black body-1`,
       onClick,
       children: /* @__PURE__ */ jsxs2("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ jsx2("div", { children: iconLeft }),
@@ -45,7 +45,7 @@ function GhostButton({ title, onClick, iconLeft, iconRight }) {
   return /* @__PURE__ */ jsx3(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer bg-[#E9E9E9]`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer bg-[#E9E9E9] body-1`,
       onClick,
       children: /* @__PURE__ */ jsxs3("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ jsx3("div", { children: iconLeft }),
@@ -89,7 +89,7 @@ function Checkbox({ label, checked, onChange }) {
         )
       }
     ),
-    label && /* @__PURE__ */ jsx5("p", { children: label })
+    label && /* @__PURE__ */ jsx5("p", { className: "body-1", children: label })
   ] });
 }
 
@@ -117,7 +117,7 @@ import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function RadioGroup({ options, value, onChange, alignment = "horizontal" }) {
   return /* @__PURE__ */ jsx8("div", { className: `flex gap-2 ${alignment === "vertical" ? "flex-col" : ""}`, children: options.map((opt) => /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-2 cursor-pointer", children: [
     /* @__PURE__ */ jsx8(Radio, { selected: value === opt.value, onChange: () => onChange(opt.value) }),
-    /* @__PURE__ */ jsx8("span", { children: opt.label })
+    /* @__PURE__ */ jsx8("span", { className: "body-1", children: opt.label })
   ] }, opt.value)) });
 }
 
@@ -169,16 +169,13 @@ function MenuNavBar({ menus, onClick }) {
   ] }, `menu_${menu.title}`)) });
 }
 
-// src/assets/STO-logo.svg
-var STO_logo_default = "./STO-logo-ADYYAPS3.svg";
-
 // src/NavBar/TopNavBar/TopNavBar.tsx
 import { IconBellRinging } from "@tabler/icons-react";
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-function TopNavBar({ onClickNoti }) {
+function TopNavBar({ onClickNoti, logo }) {
   return /* @__PURE__ */ jsxs8("div", { className: "w-full h-full flex", children: [
     /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-[20px] p-[10px]", children: [
-      /* @__PURE__ */ jsx11("img", { src: STO_logo_default }),
+      logo,
       /* @__PURE__ */ jsx11("p", { className: "subtitle-1", children: "Project Management" })
     ] }),
     /* @__PURE__ */ jsxs8("div", { className: "flex items-center ml-auto gap-[20px] p-[10px]", children: [
@@ -188,9 +185,205 @@ function TopNavBar({ onClickNoti }) {
     ] })
   ] });
 }
+
+// src/Table/DataTable/DataTable.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function DataTable({ columns, data }) {
+  const cols = Math.max(1, columns.length);
+  const gridClass = "grid [grid-template-columns:repeat(var(--cols),minmax(0,1fr))]";
+  return /* @__PURE__ */ jsxs9("div", { className: "border rounded-md", children: [
+    /* @__PURE__ */ jsx12("div", { className: `${gridClass} font-semibold border-b border-gray-200`, style: { ["--cols"]: cols }, children: columns.map((col, i) => /* @__PURE__ */ jsx12("div", { className: "py-[8px] px-[16px] body-4 truncate", children: col.header }, i)) }),
+    data.map((row, i) => /* @__PURE__ */ jsx12(
+      "div",
+      {
+        className: `${gridClass} border-b border-gray-200 items-center`,
+        style: { ["--cols"]: cols },
+        children: columns.map((col, c) => /* @__PURE__ */ jsx12("div", { className: "py-[8px] px-[16px] body-3 truncate", children: typeof col.accessor === "function" ? col.accessor(row) : String(row[col.accessor]) }, c))
+      },
+      i
+    ))
+  ] });
+}
+
+// src/Calendar/Calendar/Calendar.tsx
+import { useEffect, useRef, useState } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import enLocale from "@fullcalendar/core/locales/en-gb";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { Fragment, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function Calendar({ events }) {
+  const calendarRef = useRef(null);
+  const [monthTitle, setMonthTitle] = useState("");
+  const updateTitle = () => {
+    const calendarApi = calendarRef.current?.getApi();
+    if (calendarApi) {
+      setMonthTitle(calendarApi.view.title);
+    }
+  };
+  const changeView = (viewName) => {
+    const calendarApi = calendarRef.current?.getApi();
+    calendarApi?.changeView(viewName);
+  };
+  useEffect(() => {
+    updateTitle();
+  }, []);
+  return /* @__PURE__ */ jsxs10("div", { className: "fc w-full h-full", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex mb-[8px]", children: [
+      /* @__PURE__ */ jsx13("p", { className: "headline-5", children: monthTitle }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex gap-[10px] ml-auto", children: [
+        /* @__PURE__ */ jsx13(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              calendarRef.current.getApi().today();
+              updateTitle();
+            },
+            children: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              changeView("dayGridMonth");
+              updateTitle();
+            },
+            children: "Month"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              changeView("dayGridWeek");
+              updateTitle();
+            },
+            children: "Week"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              changeView("timeGridDay");
+              updateTitle();
+            },
+            children: "Day"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            className: "cursor-pointer",
+            onClick: () => {
+              calendarRef.current?.getApi().prev();
+              updateTitle();
+            },
+            children: /* @__PURE__ */ jsx13(IconChevronLeft, {})
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            className: "cursor-pointer",
+            onClick: () => {
+              calendarRef.current?.getApi().next();
+              updateTitle();
+            },
+            children: /* @__PURE__ */ jsx13(IconChevronRight, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx13(
+      FullCalendar,
+      {
+        ref: calendarRef,
+        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
+        events,
+        locale: enLocale,
+        slotLabelFormat: {
+          hour: "numeric",
+          minute: "2-digit"
+        },
+        firstDay: 0,
+        fixedWeekCount: false,
+        initialView: "dayGridMonth",
+        headerToolbar: false,
+        dayMaxEventRows: 4,
+        moreLinkText: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23",
+        editable: true,
+        eventDrop: (info) => {
+          console.log("Event \u0E02\u0E2D\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48:", info.event.startStr);
+        },
+        eventContent: (arg) => {
+          return /* @__PURE__ */ jsx13(Fragment, { children: /* @__PURE__ */ jsx13("div", { className: "relative top-4 flex items-center h-[28px] p-[4px] border-green-500 border-l-[10px] bg-red-400 rounded text-left text-white caption-1", children: arg.event.title }) });
+        }
+      }
+    )
+  ] });
+}
+
+// src/Input/TextInput/TextInput.tsx
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
+import { useState as useState2 } from "react";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function TextInput({
+  label,
+  placeholder,
+  type = "text",
+  maxLength,
+  required,
+  error,
+  value,
+  onChange
+}) {
+  const [showPassword, setShowPassword] = useState2(false);
+  const onShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+  const inputType = type === "password" ? showPassword ? "text" : "password" : "text";
+  return /* @__PURE__ */ jsxs11("div", { children: [
+    /* @__PURE__ */ jsxs11("p", { className: "body-1 mb-[8px]", children: [
+      label,
+      required && /* @__PURE__ */ jsx14("span", { className: "text-red-600", children: "\xA0*" })
+    ] }),
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: `border-[1px] rounded-[8px] w-full h-[40px] flex justify-center items-center ${error ? "border-red-600" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx14(
+            "input",
+            {
+              className: "w-full h-full px-[16px]",
+              style: { outline: "none" },
+              placeholder,
+              type: inputType,
+              maxLength,
+              value,
+              onChange: (e) => onChange(e.target.value)
+            }
+          ),
+          type === "password" && (showPassword ? /* @__PURE__ */ jsx14(IconEye, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }) : /* @__PURE__ */ jsx14(IconEyeOff, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx14("p", { className: "text-red-600 body-1", children: error })
+  ] });
+}
 export {
+  Calendar,
   Checkbox,
   CheckboxGroup,
+  DataTable,
   GhostButton,
   Loader,
   MenuNavBar,
@@ -199,5 +392,6 @@ export {
   RadioGroup,
   SecondaryButton,
   Switch,
+  TextInput,
   TopNavBar
 };