@algorithm-shift/design-system 1.2.32 → 1.2.33

package/dist/index.mjs

@@ -618,7 +618,6 @@ function Textarea({ className, ...props }) {
 import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var Textarea2 = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  const isRequired = props.isRequired ?? false;
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
@@ -647,8 +646,7 @@ var Textarea2 = ({ className, style, ...props }) => {
         placeholder,
         onChange: handleChange,
         disabled: isDisabled || !isEditable,
-        readOnly: isReadonly,
-        required: isRequired
+        readOnly: isReadonly
       }
     ),
     error && /* @__PURE__ */ jsx15("p", { className: "mt-1 text-xs text-red-500", children: error })
@@ -701,6 +699,9 @@ var UrlInput = ({ className, style, ...props }) => {
 };
 var UrlInput_default = UrlInput;
 
+// src/components/Inputs/Checkbox/Checkbox.tsx
+import { useEffect as useEffect7, useState as useState7 } from "react";
+
 // src/components/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { jsx as jsx17 } from "react/jsx-runtime";
@@ -750,16 +751,40 @@ function Label({
 }
 
 // src/components/Inputs/Checkbox/Checkbox.tsx
-import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 var CheckboxInput = ({ className, style, ...props }) => {
+  const isEditable = props.isEditable ?? true;
+  const isDisabled = props.isDisabled ?? false;
   const text = props.text ? props.text : "Subscribe";
-  return /* @__PURE__ */ jsx19("div", { className, style, children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ jsx19(Checkbox, { id: "newsletter" }),
-    /* @__PURE__ */ jsx19(Label, { htmlFor: "newsletter", children: text })
-  ] }) });
+  const [error, setError] = useState7(null);
+  useEffect7(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
+  const handleChange = (value) => {
+    props.onChange?.(value);
+  };
+  return /* @__PURE__ */ jsxs8(Fragment7, { children: [
+    /* @__PURE__ */ jsx19("div", { className, style, children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx19(
+        Checkbox,
+        {
+          id: props.name || "checkbox",
+          checked: !!props.value,
+          onCheckedChange: handleChange,
+          disabled: !isEditable || isDisabled
+        }
+      ),
+      /* @__PURE__ */ jsx19(Label, { htmlFor: props.name || "checkbox", children: text })
+    ] }) }),
+    error && /* @__PURE__ */ jsx19("p", { className: "mt-1 text-xs text-red-500", children: error })
+  ] });
 };
 var Checkbox_default = CheckboxInput;
 
+// src/components/Inputs/RadioInput/RadioInput.tsx
+import { useEffect as useEffect8, useState as useState8 } from "react";
+
 // src/components/ui/radio-group.tsx
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { jsx as jsx20 } from "react/jsx-runtime";
@@ -802,37 +827,106 @@ function RadioGroupItem({
 }
 
 // src/components/Inputs/RadioInput/RadioInput.tsx
-import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
-var RadioInput = ({ className, style, ...props }) => {
-  const text = Array.isArray(props.text) ? props.text : [props.text ?? "Subscribe"];
-  const formatList = text.filter((i) => i.value && i.label).map((item) => ({
-    label: item.label,
-    value: item.value
+import { Fragment as Fragment8, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+var RadioInput = ({
+  className,
+  style,
+  defaultValue,
+  onChange,
+  data = [],
+  dataKey,
+  dataLabel,
+  ...props
+}) => {
+  const [error, setError] = useState8(null);
+  useEffect8(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
+  const options = (data || []).map((item) => ({
+    value: item[dataKey || "value"],
+    label: item[dataLabel || "label"]
   }));
-  return /* @__PURE__ */ jsx21("div", { className, style, children: /* @__PURE__ */ jsx21(RadioGroup, { defaultValue: "option-1", children: formatList?.map((item, index) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ jsx21(RadioGroupItem, { value: item.value, id: `r${index}` }),
-    /* @__PURE__ */ jsx21(Label, { htmlFor: `r${index}`, children: item.label })
-  ] }, index)) }) });
+  const handleChange = (value) => {
+    onChange?.(value);
+  };
+  const resolvedDefaultValue = (typeof defaultValue === "string" ? defaultValue : void 0) ?? options[0]?.value;
+  return /* @__PURE__ */ jsxs9(Fragment8, { children: [
+    /* @__PURE__ */ jsx21("div", { className, style, children: /* @__PURE__ */ jsxs9(
+      RadioGroup,
+      {
+        defaultValue: resolvedDefaultValue,
+        onValueChange: handleChange,
+        children: [
+          options.length === 0 && /* @__PURE__ */ jsx21("div", { className: "text-sm text-gray-500", children: "No options available" }),
+          options.map((item) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsx21(RadioGroupItem, { value: item.value, id: `radio-${item.value}` }),
+            /* @__PURE__ */ jsx21(Label, { htmlFor: `radio-${item.value}`, children: item.label })
+          ] }, item.value))
+        ]
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx21("p", { className: "mt-1 text-xs text-red-500", children: error })
+  ] });
 };
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
+import { useCallback, useState as useState9 } from "react";
 import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
-var MultiCheckbox = ({ className, style, ...props }) => {
-  const text = Array.isArray(props.text) ? props.text : [props.text ?? "Subscribe"];
-  const formatList = text.filter((i) => i.value && i.label).map((item) => ({
-    label: item.label,
-    value: item.value
+var MultiCheckbox = ({
+  className,
+  style,
+  data = [],
+  dataKey = "value",
+  dataLabel = "label",
+  value: propValue = {},
+  onChange,
+  isEditable = true,
+  isDisabled = false
+}) => {
+  const [value, setValue] = useState9(propValue);
+  const options = (data || []).map((item) => ({
+    value: item[dataKey || "value"],
+    label: item[dataLabel || "label"]
   }));
-  return /* @__PURE__ */ jsx22("div", { className, style, children: /* @__PURE__ */ jsx22("div", { className: "flex gap-3 flex-col", children: formatList?.map((item, index) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ jsx22(Checkbox, { id: `newsletter-${index}` }),
-    /* @__PURE__ */ jsx22(Label, { htmlFor: `newsletter-${index}`, children: item.label })
-  ] }, index)) }) });
+  const handleChange = useCallback(
+    (key, checked) => {
+      setValue((prev) => {
+        const newValue = { ...prev, [key]: checked };
+        onChange?.(newValue);
+        return newValue;
+      });
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: cn("flex flex-col gap-3", className),
+      style,
+      children: [
+        options.length === 0 && /* @__PURE__ */ jsx22("p", { className: "text-sm text-gray-500", children: "No options available." }),
+        options.map((opt) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx22(
+            Checkbox,
+            {
+              id: opt.value,
+              checked: !!value[opt.value],
+              onCheckedChange: (checked) => handleChange(opt.value, checked === true),
+              disabled: !isEditable || isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx22(Label, { htmlFor: opt.value, children: opt.label })
+        ] }, opt.value))
+      ]
+    }
+  );
 };
 var MultiCheckbox_default = MultiCheckbox;
 
 // src/components/Inputs/RichText/RichText.tsx
-import { useEffect as useEffect7, useState as useState7 } from "react";
+import { useEffect as useEffect9, useState as useState10 } from "react";
 
 // src/components/Global/TinyMceEditor.tsx
 import { useMemo, useRef } from "react";
@@ -908,8 +1002,8 @@ function MyEditor({
 // src/components/Inputs/RichText/RichText.tsx
 import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 function RichText({ className, style, ...props }) {
-  const [error, setError] = useState7(null);
-  useEffect7(() => {
+  const [error, setError] = useState10(null);
+  useEffect9(() => {
     if (!props.validateOnMount) return;
     setError(props.errorMessage || null);
   }, [props.errorMessage, props.validateOnMount]);
@@ -1059,7 +1153,7 @@ function SelectScrollDownButton({
 }
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 var Dropdown = ({ className, style, ...props }) => {
   const list = props.data || [];
   const placeholder = props.placeholder ? props.placeholder : "Placeholder text";
@@ -1074,13 +1168,13 @@ var Dropdown = ({ className, style, ...props }) => {
   const handleChange = (value) => {
     props.onChange?.(value);
   };
-  const dataKey = props.dataKey || "key";
+  const dataKey = props.dataKey || "value";
   const dataLabel = props.dataLabel || "label";
   const options = list.map((item) => ({
-    key: item[dataKey],
+    value: item[dataKey],
     label: item[dataLabel]
   }));
-  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment9, { children: [
     /* @__PURE__ */ jsxs13(Select, { name: props.name, value: props.value, onValueChange: handleChange, disabled: isDisabled || !isEditable, children: [
       /* @__PURE__ */ jsx26(
         SelectTrigger,
@@ -1095,13 +1189,16 @@ var Dropdown = ({ className, style, ...props }) => {
           children: /* @__PURE__ */ jsx26(SelectValue, { placeholder })
         }
       ),
-      /* @__PURE__ */ jsx26(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx26(SelectItem, { value: opt.key, children: opt.label }, opt.key)) })
+      /* @__PURE__ */ jsx26(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx26(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
     ] }),
     error && /* @__PURE__ */ jsx26("p", { className: "mt-1 text-xs text-red-500", children: error })
   ] });
 };
 var Dropdown_default = Dropdown;
 
+// src/components/Inputs/SwitchToggle/SwitchToggle.tsx
+import { useEffect as useEffect11, useState as useState12 } from "react";
+
 // src/components/ui/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { jsx as jsx27 } from "react/jsx-runtime";
@@ -1132,13 +1229,33 @@ function Switch({
 }
 
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
 var SwitchToggle = ({ className, style, ...props }) => {
-  const text = Array.isArray(props.text) ? props.text : [props.text ?? "Subscribe"];
-  return /* @__PURE__ */ jsx28("div", { className, style, children: text?.map((item, index) => /* @__PURE__ */ jsxs14("div", { className: "flex items-center space-x-2 mb-2", children: [
-    /* @__PURE__ */ jsx28(Switch, { id: `switch-${index}` }),
-    /* @__PURE__ */ jsx28(Label, { htmlFor: `switch-${index}`, children: item })
-  ] }, index)) });
+  const isEditable = props.isEditable ?? true;
+  const isDisabled = props.isDisabled ?? false;
+  const [error, setError] = useState12(null);
+  useEffect11(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
+  const handleChange = (value) => {
+    props.onChange?.(value);
+  };
+  return /* @__PURE__ */ jsxs14(Fragment10, { children: [
+    /* @__PURE__ */ jsx28("div", { className, style, children: /* @__PURE__ */ jsxs14("div", { className: "flex items-center space-x-2 mb-2", children: [
+      /* @__PURE__ */ jsx28(
+        Switch,
+        {
+          id: props.name || "switch",
+          checked: !!props.value,
+          onCheckedChange: handleChange,
+          disabled: isDisabled || !isEditable
+        }
+      ),
+      /* @__PURE__ */ jsx28(Label, { htmlFor: props.name || "switch", children: props.text })
+    ] }) }),
+    error && /* @__PURE__ */ jsx28("p", { className: "mt-1 text-xs text-red-500", children: error })
+  ] });
 };
 var SwitchToggle_default = SwitchToggle;
 
@@ -1146,7 +1263,7 @@ var SwitchToggle_default = SwitchToggle;
 import * as React9 from "react";
 import { PhoneInput as PhoneInputField } from "react-international-phone";
 import "react-international-phone/style.css";
-import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
 var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
@@ -1159,7 +1276,7 @@ var PhoneInput = ({ className, style, ...props }) => {
   const handleChange = (val) => {
     props.onChange?.(val);
   };
-  return /* @__PURE__ */ jsxs15(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment11, { children: [
     /* @__PURE__ */ jsx29(
       PhoneInputField,
       {
@@ -1186,7 +1303,7 @@ var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
 import * as React10 from "react";
-import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
   const isEditable = props.isEditable ?? true;
@@ -1201,9 +1318,9 @@ var SearchInput = ({ className, style, ...props }) => {
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ jsxs16(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs16(Fragment12, { children: [
     /* @__PURE__ */ jsxs16("div", { className: "flex justify-start items-center relative", children: [
-      /* @__PURE__ */ jsx30(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
+      /* @__PURE__ */ jsx30(Search, { className: "left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
       /* @__PURE__ */ jsx30(
         Input,
         {
@@ -1230,12 +1347,12 @@ var SearchInput = ({ className, style, ...props }) => {
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
-import { useEffect as useEffect11, useState as useState11 } from "react";
+import { useEffect as useEffect14, useState as useState15 } from "react";
 import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var FileInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  const [error, setError] = useState11(null);
-  useEffect11(() => {
+  const [error, setError] = useState15(null);
+  useEffect14(() => {
     if (!props.validateOnMount) return;
     setError(props.errorMessage || null);
   }, [props.errorMessage, props.validateOnMount]);
@@ -1265,8 +1382,8 @@ var FileInput = ({ className, style, ...props }) => {
 var FileInput_default = FileInput;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-import React11, { useEffect as useEffect12 } from "react";
-import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import React11, { useEffect as useEffect15 } from "react";
+import { Fragment as Fragment13, jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 function DatePicker({ className, style, ...props }) {
   const placeholder = props.placeholder ?? "Placeholder text";
   const minimumDate = props.minimumDate ?? "none";
@@ -1292,14 +1409,14 @@ function DatePicker({ className, style, ...props }) {
   };
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
-  useEffect12(() => {
+  useEffect15(() => {
     if (!props.validateOnMount) return;
     setError(props.errorMessage || null);
   }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
-  return /* @__PURE__ */ jsxs18(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs18(Fragment13, { children: [
     /* @__PURE__ */ jsxs18("div", { className: "flex justify-start items-center relative", children: [
       /* @__PURE__ */ jsx32(Calendar, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
       /* @__PURE__ */ jsx32(
@@ -1312,7 +1429,11 @@ function DatePicker({ className, style, ...props }) {
           disabled: isDisabled || !isEditable,
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(
+            className,
+            error ? "border-red-500" : "",
+            "appearance-auto"
+          ),
           style: {
             ...style,
             borderColor: error ? "#f87171" : style?.borderColor
@@ -1548,41 +1669,58 @@ function PopoverContent({
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
-var DateRange = ({ className, style }) => {
-  const [date, setDate] = React13.useState({
-    from: /* @__PURE__ */ new Date(),
-    to: addDays(/* @__PURE__ */ new Date(), 7)
-  });
-  return /* @__PURE__ */ jsx35("div", { className, style, children: /* @__PURE__ */ jsxs19(Popover, { children: [
-    /* @__PURE__ */ jsx35(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(
-      Button,
-      {
-        id: "date",
-        variant: "outline",
-        className: cn(
-          "w-[300px] justify-start text-left font-normal text-[11px]",
-          !date && "text-muted-foreground"
-        ),
-        children: date?.from ? date.to ? /* @__PURE__ */ jsxs19(Fragment11, { children: [
-          format(date.from, "LLL dd, y"),
-          " -",
-          " ",
-          format(date.to, "LLL dd, y")
-        ] }) : format(date.from, "LLL dd, y") : /* @__PURE__ */ jsx35("span", { children: "Pick a date range" })
-      }
-    ) }),
-    /* @__PURE__ */ jsx35(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx35(
-      Calendar2,
-      {
-        mode: "range",
-        defaultMonth: date?.from,
-        selected: date,
-        onSelect: setDate,
-        numberOfMonths: 2
-      }
-    ) })
-  ] }) });
+import { Fragment as Fragment14, jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+var DateRange = ({ className, style, ...props }) => {
+  const [error, setError] = React13.useState(null);
+  const isDateRange = (val) => !!val && val.from instanceof Date;
+  const [date, setDate] = React13.useState(
+    isDateRange(props.value) ? props.value : {
+      from: /* @__PURE__ */ new Date(),
+      to: addDays(/* @__PURE__ */ new Date(), 7)
+    }
+  );
+  React13.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
+  const handleChange = (value) => {
+    setDate(value);
+    if (value) {
+      props.onChange?.(value);
+    }
+  };
+  return /* @__PURE__ */ jsxs19(Fragment14, { children: [
+    /* @__PURE__ */ jsx35("div", { className, style, children: /* @__PURE__ */ jsxs19(Popover, { children: [
+      /* @__PURE__ */ jsx35(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(
+        Button,
+        {
+          id: "date",
+          variant: "outline",
+          className: cn(
+            "w-[300px] justify-start text-left font-normal text-[11px]",
+            !date && "text-muted-foreground"
+          ),
+          children: date?.from ? date.to ? /* @__PURE__ */ jsxs19(Fragment14, { children: [
+            format(date.from, "LLL dd, y"),
+            " -",
+            " ",
+            format(date.to, "LLL dd, y")
+          ] }) : format(date.from, "LLL dd, y") : /* @__PURE__ */ jsx35("span", { children: "Pick a date range" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx35(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx35(
+        Calendar2,
+        {
+          mode: "range",
+          defaultMonth: date?.from,
+          selected: date,
+          onSelect: handleChange,
+          numberOfMonths: 2
+        }
+      ) })
+    ] }) }),
+    error && /* @__PURE__ */ jsx35("p", { className: "mt-1 text-xs text-red-500", children: error })
+  ] });
 };
 var DateRange_default = DateRange;
 
@@ -1679,7 +1817,7 @@ function TableCell({ className, ...props }) {
 }
 
 // src/components/ui/data-table.tsx
-import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
 function DataTable({
   columns,
   rowActions,
@@ -1711,7 +1849,7 @@ function DataTable({
         header.getContext()
       ) }, header.id);
     }) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsx37(TableBody, { children: loading ? /* @__PURE__ */ jsx37(TableRow, { children: /* @__PURE__ */ jsx37(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : /* @__PURE__ */ jsx37(Fragment12, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs20(
+    /* @__PURE__ */ jsx37(TableBody, { children: loading ? /* @__PURE__ */ jsx37(TableRow, { children: /* @__PURE__ */ jsx37(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : /* @__PURE__ */ jsx37(Fragment15, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs20(
       TableRow,
       {
         "data-state": row.getIsSelected() && "selected",
@@ -1924,13 +2062,13 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/Table/Table.tsx
-import { useState as useState13 } from "react";
+import { useState as useState17 } from "react";
 import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 var Table2 = ({ columns, data, rowActions, className, style, pagination = false, itemsPerPage = 10, onPageChange, loading = false }) => {
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
-  const [currentPage, setCurrentPage] = useState13(1);
+  const [currentPage, setCurrentPage] = useState17(1);
   const enablePagination = pagination && rawData.length > itemsPerPage;
   const handlePageChange = (page) => {
     setCurrentPage(page);
@@ -2226,7 +2364,7 @@ var AvatarFallback = React15.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/Navigation/Navbar/Navbar.tsx
-import { Fragment as Fragment13, jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
 function Navbar({
   style,
   badgeType,
@@ -2263,7 +2401,7 @@ function Navbar({
       /* @__PURE__ */ jsxs29(DropdownMenu, { children: [
         /* @__PURE__ */ jsx49(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center space-x-2", children: [
           !isMobileView && showName && /* @__PURE__ */ jsx49("h4", { className: "text-[#000000] text-[13px] font-[500] mb-0", children: "Akbar Sheriff" }),
-          !isMobileView ? /* @__PURE__ */ jsxs29(Fragment13, { children: [
+          !isMobileView ? /* @__PURE__ */ jsxs29(Fragment16, { children: [
             /* @__PURE__ */ jsx49(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ jsx49(
               AvatarImage,
               {
@@ -2341,7 +2479,7 @@ var BarChart_default = ChartComponent;
 
 // src/components/Chart/PieChart.tsx
 import { PieChart, Pie, Cell, ResponsiveContainer as ResponsiveContainer2, Tooltip as Tooltip2, LabelList } from "recharts";
-import { Fragment as Fragment14, jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
 var DonutChart = ({ className, style, ...props }) => {
   const data = Array.isArray(props?.data) ? props.data : [];
   const total = data.reduce((sum, d) => sum + d.value, 0);
@@ -2374,7 +2512,7 @@ var DonutChart = ({ className, style, ...props }) => {
   const wrapperClass = canvasMode ? forceDesktop ? "flex-row" : "flex-col" : "flex-col md:flex-row";
   const renderLegends = () => {
     if (!showLegends) return null;
-    return /* @__PURE__ */ jsx51(Fragment14, { children: data.map((d) => /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsx51(Fragment17, { children: data.map((d) => /* @__PURE__ */ jsxs31(
       "div",
       {
         className: "flex items-center space-x-2 rounded-md border border-gray-200 px-3 py-2 w-[48%] md:w-auto",