@douglasneuroinformatics/libui 2.0.0-beta.8 → 2.0.0

package/dist/components/index.js

@@ -1737,7 +1737,7 @@ var NumberRecordField = ({
   }
   return /* @__PURE__ */ jsxs25("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx89(Heading, { variant: "h5", children: label }),
-    /* @__PURE__ */ jsx89("div", { className: "space-y-8", children: Object.keys(items).map((name) => {
+    /* @__PURE__ */ jsx89("div", { className: "space-y-6", children: Object.keys(items).map((name) => {
       const item = items[name];
       return /* @__PURE__ */ jsx89(
         NumberField,
@@ -2306,7 +2306,7 @@ var RecordArrayField = memo(function RecordArrayField2({
   setValue: setArrayValue,
   value: arrayValue
 }) {
-  const { t } = useTranslation4();
+  const { t } = useTranslation4("libui");
   const createNewRecord = () => Object.fromEntries(Object.keys(fieldset).map((fieldName) => [fieldName, void 0]));
   useEffect6(() => {
     setArrayValue([createNewRecord()]);
@@ -2324,7 +2324,7 @@ var RecordArrayField = memo(function RecordArrayField2({
   };
   return /* @__PURE__ */ jsxs38("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx113(Heading, { variant: "h5", children: label }),
-    /* @__PURE__ */ jsx113("div", { className: "space-y-8", children: arrayValue.map((fields, i) => /* @__PURE__ */ jsxs38("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx113("div", { className: "space-y-6", children: arrayValue.map((fields, i) => /* @__PURE__ */ jsxs38("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx113(Label3, { className: "font-semibold italic", children: label + " " + (i + 1) }),
       Object.keys(fields).map((name) => {
         const field = fieldset[name];
@@ -2493,7 +2493,7 @@ var Form = ({
   validationSchema,
   ...props
 }) => {
-  const { t } = useTranslation5();
+  const { t } = useTranslation5("libui");
   const [rootError, setRootError] = useState5(null);
   const [errors, setErrors] = useState5({});
   const [values, setValues] = useState5(
@@ -2536,16 +2536,16 @@ var Form = ({
     "form",
     {
       autoComplete: "off",
-      className: twMerge("my-8 w-full", isGrouped ? "space-y-8 divide-y" : "space-y-8", className),
+      className: twMerge("w-full", isGrouped ? "space-y-8 divide-y" : "space-y-6", className),
       id,
       onSubmit: handleSubmit,
       ...props,
       children: [
         isGrouped ? content.map((fieldGroup, i) => {
-          return /* @__PURE__ */ jsxs39("div", { className: "space-y-8 [&:not(:first-child)]:pt-8", children: [
-            /* @__PURE__ */ jsxs39("div", { children: [
+          return /* @__PURE__ */ jsxs39("div", { className: "space-y-6 [&:not(:first-child)]:pt-8", children: [
+            /* @__PURE__ */ jsxs39("div", { className: "space-y-1", children: [
               /* @__PURE__ */ jsx116(Heading, { variant: "h4", children: fieldGroup.title }),
-              fieldGroup.description && /* @__PURE__ */ jsx116("small", { className: "text-sm italic text-muted-foreground", children: fieldGroup.description })
+              fieldGroup.description && /* @__PURE__ */ jsx116("p", { className: "text-sm italic leading-tight text-muted-foreground", children: fieldGroup.description })
             ] }),
             /* @__PURE__ */ jsx116(
               FieldsComponent,
@@ -2612,10 +2612,15 @@ var HoverCard = Object.assign(Root14, {
 import { LanguagesIcon } from "lucide-react";
 import { useTranslation as useTranslation6 } from "react-i18next";
 import { jsx as jsx118, jsxs as jsxs40 } from "react/jsx-runtime";
-var LanguageToggle = ({ align, options } = { align: "start", options: {} }) => {
-  const { i18n } = useTranslation6();
+var LanguageToggle = ({
+  align = "start",
+  options = {},
+  triggerClassName,
+  variant = "outline"
+}) => {
+  const { i18n } = useTranslation6("libui");
   return /* @__PURE__ */ jsxs40(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx118(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx118(Button, { size: "icon", variant: "outline", children: /* @__PURE__ */ jsx118(LanguagesIcon, {}) }) }),
+    /* @__PURE__ */ jsx118(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx118(Button, { className: triggerClassName, size: "icon", variant, children: /* @__PURE__ */ jsx118(LanguagesIcon, {}) }) }),
     /* @__PURE__ */ jsx118(DropdownMenu.Content, { align, children: Object.keys(options).map((option) => /* @__PURE__ */ jsx118(DropdownMenu.Item, { onClick: () => void i18n.changeLanguage(option), children: options[option] }, option)) })
   ] });
 };
@@ -2915,10 +2920,187 @@ var LegacyStepper = ({ className, steps }) => {
   ] }) });
 };
 
-// src/components/LineGraph/LineGraph.tsx
-import React85 from "react";
-import { toBasicISOString as toBasicISOString2 } from "@douglasneuroinformatics/libjs";
+// src/components/LegacyTable/LegacyClientTable.tsx
+import { useState as useState7 } from "react";
 import { useTranslation as useTranslation7 } from "react-i18next";
+
+// src/components/LegacyTable/LegacyTable.tsx
+import { range as range3, toBasicISOString as toBasicISOString2 } from "@douglasneuroinformatics/libjs";
+import { clsx as clsx5 } from "clsx";
+import { twMerge as twMerge3 } from "tailwind-merge";
+
+// src/components/LegacyTable/LegacyTableColumnHeader.tsx
+import React85 from "react";
+import { Menu as Menu2, Transition as Transition5 } from "@headlessui/react";
+import { ChevronDownIcon as ChevronDownIcon4 } from "@heroicons/react/24/solid";
+import { clsx as clsx4 } from "clsx";
+import { jsx as jsx124, jsxs as jsxs46 } from "react/jsx-runtime";
+var LegacyTableColumnHeader = ({
+  column,
+  dropdownOptions
+}) => {
+  return /* @__PURE__ */ jsxs46(Menu2, { as: "div", className: "relative", children: [
+    /* @__PURE__ */ jsxs46(
+      Menu2.Button,
+      {
+        className: clsx4(
+          "flex min-w-[10rem] flex-shrink-0 items-center justify-between px-6 py-3 text-sm font-semibold text-slate-800 dark:text-slate-200",
+          { "cursor-default": !dropdownOptions }
+        ),
+        children: [
+          column.label,
+          dropdownOptions && /* @__PURE__ */ jsx124(ChevronDownIcon4, { className: "ml-3", height: 16, width: 16 })
+        ]
+      }
+    ),
+    dropdownOptions && /* @__PURE__ */ jsx124(
+      Transition5,
+      {
+        as: React85.Fragment,
+        enter: "transition ease-out duration-100",
+        enterFrom: "transform opacity-0 scale-95",
+        enterTo: "transform opacity-100 scale-100",
+        leave: "transition ease-in duration-75",
+        leaveFrom: "transform opacity-100 scale-100",
+        leaveTo: "transform opacity-0 scale-95",
+        children: /* @__PURE__ */ jsx124(Menu2.Items, { className: "absolute right-4 z-50 mt-2 w-32 origin-top-right overflow-hidden rounded-md bg-slate-50 shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-700", children: dropdownOptions.map((option) => {
+          const Icon = option.icon;
+          return /* @__PURE__ */ jsxs46(
+            Menu2.Item,
+            {
+              as: "button",
+              className: "flex w-full items-center text-ellipsis whitespace-nowrap px-3 py-2 hover:backdrop-brightness-95 dark:hover:backdrop-brightness-150",
+              type: "button",
+              onClick: () => {
+                option.onSelection(column);
+              },
+              children: [
+                Icon && /* @__PURE__ */ jsx124(Icon, { className: "mr-2", height: 16, width: 16 }),
+                option.label
+              ]
+            },
+            option.label
+          );
+        }) })
+      }
+    )
+  ] });
+};
+
+// src/components/LegacyTable/LegacyTable.tsx
+import { jsx as jsx125, jsxs as jsxs47 } from "react/jsx-runtime";
+function defaultFormatter(value) {
+  if (typeof value === "string") {
+    return value;
+  } else if (typeof value === "number") {
+    return value.toFixed(2).toString();
+  } else if (typeof value === "undefined") {
+    return "NA";
+  }
+  if (value instanceof Date) {
+    return toBasicISOString2(value);
+  }
+  return JSON.stringify(value);
+}
+var LegacyTable = ({
+  className,
+  columnDropdownOptions,
+  columns,
+  data,
+  minRows,
+  onEntryClick
+}) => {
+  const nRows = Math.max(data.length, minRows ?? -1);
+  return /* @__PURE__ */ jsx125("div", { className: twMerge3("min-w-full overflow-hidden rounded-md bg-slate-50 shadow dark:bg-slate-800", className), children: /* @__PURE__ */ jsx125("div", { className: "w-full overflow-x-scroll", children: /* @__PURE__ */ jsxs47("table", { className: "w-full table-auto", children: [
+    /* @__PURE__ */ jsx125("thead", { className: "border-b border-slate-300 bg-slate-50 dark:border-0 dark:bg-slate-700", children: /* @__PURE__ */ jsx125("tr", { children: columns.map((column, i) => /* @__PURE__ */ jsx125(
+      "th",
+      {
+        className: "whitespace-nowrap text-left  text-sm font-semibold text-slate-800 dark:text-slate-200",
+        children: /* @__PURE__ */ jsx125(LegacyTableColumnHeader, { column, dropdownOptions: columnDropdownOptions })
+      },
+      i
+    )) }) }),
+    /* @__PURE__ */ jsx125("tbody", { className: "divide-y dark:divide-slate-600", children: nRows > 0 && range3(nRows).map((i) => {
+      const entry = data[i];
+      return /* @__PURE__ */ jsx125(
+        "tr",
+        {
+          className: clsx5("whitespace-nowrap p-4 text-sm text-muted-foreground", {
+            "cursor-pointer hover:backdrop-brightness-95": entry && typeof onEntryClick === "function"
+          }),
+          "data-cy": "table-row",
+          onClick: () => {
+            entry && onEntryClick && onEntryClick(entry);
+          },
+          children: columns.map(({ field, formatter }, j) => {
+            let value;
+            if (!entry) {
+              value = "";
+            } else if (typeof field === "function") {
+              value = field(entry);
+            } else {
+              value = entry[field];
+            }
+            const formattedValue = entry && formatter ? formatter(value) : defaultFormatter(value);
+            return /* @__PURE__ */ jsx125("td", { className: "whitespace-nowrap px-6", "data-cy": "table-data-item", style: { height: 42 }, children: /* @__PURE__ */ jsx125("span", { className: "block text-ellipsis leading-none", children: formattedValue }) }, j);
+          })
+        },
+        i
+      );
+    }) })
+  ] }) }) });
+};
+
+// src/components/LegacyTable/LegacyClientTable.tsx
+import { jsx as jsx126, jsxs as jsxs48 } from "react/jsx-runtime";
+var LegacyClientTable = ({ data, ...props }) => {
+  const [currentPage, setCurrentPage] = useState7(1);
+  const [entriesPerPage] = useState7(10);
+  const { t } = useTranslation7("libui");
+  const pageCount = Math.ceil(data.length / entriesPerPage);
+  const firstEntry = data.length === 0 ? 0 : (currentPage - 1) * entriesPerPage + 1;
+  const lastEntry = Math.min(firstEntry + entriesPerPage - 1, data.length);
+  const currentEntries = data.slice(firstEntry - 1, lastEntry);
+  return /* @__PURE__ */ jsxs48("div", { children: [
+    /* @__PURE__ */ jsx126(LegacyTable, { data: currentEntries, ...props }),
+    /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between px-1 py-3", children: [
+      /* @__PURE__ */ jsx126("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx126("p", { className: "text-sm font-medium text-muted-foreground", children: t("pagination.info", {
+        first: firstEntry,
+        last: lastEntry,
+        total: data.length
+      }) }) }),
+      /* @__PURE__ */ jsxs48("div", { className: "flex flex-1 justify-between sm:justify-end", children: [
+        /* @__PURE__ */ jsx126(
+          "button",
+          {
+            className: "relative inline-flex items-center rounded-md border border-slate-300 bg-slate-50 px-4 py-2 text-sm font-medium text-muted-foreground disabled:opacity-75 dark:border-slate-600 dark:bg-slate-800",
+            disabled: currentPage === 1,
+            onClick: () => {
+              setCurrentPage(currentPage - 1);
+            },
+            children: t("pagination.previous")
+          }
+        ),
+        /* @__PURE__ */ jsx126(
+          "button",
+          {
+            className: "relative ml-3 inline-flex items-center rounded-md border border-slate-300 bg-slate-50 px-4 py-2 text-sm font-medium text-muted-foreground disabled:opacity-75 dark:border-slate-600 dark:bg-slate-800",
+            disabled: currentPage === pageCount,
+            onClick: () => {
+              setCurrentPage(currentPage + 1);
+            },
+            children: t("pagination.next")
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/LineGraph/LineGraph.tsx
+import React86 from "react";
+import { toBasicISOString as toBasicISOString3 } from "@douglasneuroinformatics/libjs";
+import { useTranslation as useTranslation8 } from "react-i18next";
 import {
   CartesianGrid,
   ErrorBar,
@@ -2931,7 +3113,7 @@ import {
   XAxis,
   YAxis
 } from "recharts";
-import { jsx as jsx124, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs49 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var strokeColors = {
   dark: "#cbd5e1",
@@ -2958,11 +3140,11 @@ function LineGraphComponent({
   lines,
   xAxis
 }) {
-  const { i18n } = useTranslation7();
+  const { i18n } = useTranslation8("libui");
   const [theme] = useTheme();
-  return /* @__PURE__ */ jsx124(ResponsiveContainer, { height: 400, width: "100%", children: /* @__PURE__ */ jsxs46(LineChart, { data: [...data], margin: { bottom: 5, left: 15, right: 15, top: 5 }, children: [
-    /* @__PURE__ */ jsx124(CartesianGrid, { stroke: "#64748b", strokeDasharray: "5 5" }),
-    /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx127(ResponsiveContainer, { height: 400, width: "100%", children: /* @__PURE__ */ jsxs49(LineChart, { data: [...data], margin: { bottom: 5, left: 15, right: 15, top: 5 }, children: [
+    /* @__PURE__ */ jsx127(CartesianGrid, { stroke: "#64748b", strokeDasharray: "5 5" }),
+    /* @__PURE__ */ jsx127(
       XAxis,
       {
         axisLine: { stroke: "#64748b" },
@@ -2972,15 +3154,15 @@ function LineGraphComponent({
         interval: "preserveStartEnd",
         padding: { left: 20, right: 20 },
         stroke: strokeColors[theme],
-        tickFormatter: (time) => toBasicISOString2(new Date(time)),
+        tickFormatter: (time) => toBasicISOString3(new Date(time)),
         tickLine: { stroke: "#64748b" },
         tickMargin: 8,
         tickSize: 8,
         type: "number",
-        children: /* @__PURE__ */ jsx124(Label6, { fill: strokeColors[theme], offset: 0, position: "insideBottom", value: xAxis?.label })
+        children: /* @__PURE__ */ jsx127(Label6, { fill: strokeColors[theme], offset: 0, position: "insideBottom", value: xAxis?.label })
       }
     ),
-    /* @__PURE__ */ jsx124(
+    /* @__PURE__ */ jsx127(
       YAxis,
       {
         axisLine: { stroke: "#64748b" },
@@ -2991,7 +3173,7 @@ function LineGraphComponent({
         width: 40
       }
     ),
-    /* @__PURE__ */ jsx124(
+    /* @__PURE__ */ jsx127(
       Tooltip,
       {
         contentStyle: tooltipStyles[theme],
@@ -3015,23 +3197,23 @@ function LineGraphComponent({
         stroke: stroke ?? strokeColors[theme],
         type: type ?? "linear"
       },
-      err && /* @__PURE__ */ jsx124(ErrorBar, { dataKey: err, stroke: "#64748b" })
+      err && /* @__PURE__ */ jsx127(ErrorBar, { dataKey: err, stroke: "#64748b" })
     )),
-    /* @__PURE__ */ jsx124(Legend, { wrapperStyle: { paddingLeft: 40, paddingTop: 10 } })
+    /* @__PURE__ */ jsx127(Legend, { wrapperStyle: { paddingLeft: 40, paddingTop: 10 } })
   ] }) });
 }
-var LineGraph = React85.memo(LineGraphComponent);
+var LineGraph = React86.memo(LineGraphComponent);
 
 // src/components/MenuBar/MenuBar.tsx
-import { Group as Group4, Menu as Menu2, Portal as Portal10, RadioGroup as RadioGroup5, Sub as Sub3 } from "@radix-ui/react-menubar";
+import { Group as Group4, Menu as Menu3, Portal as Portal10, RadioGroup as RadioGroup5, Sub as Sub3 } from "@radix-ui/react-menubar";
 
 // src/components/MenuBar/MenuBarCheckboxItem.tsx
-import React86 from "react";
+import React87 from "react";
 import { CheckboxItem as CheckboxItem3, ItemIndicator as ItemIndicator6 } from "@radix-ui/react-menubar";
 import { CheckIcon as CheckIcon6 } from "lucide-react";
-import { jsx as jsx125, jsxs as jsxs47 } from "react/jsx-runtime";
-var MenuBarCheckboxItem = React86.forwardRef(function MenuBarCheckboxItem2({ checked, children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs47(
+import { jsx as jsx128, jsxs as jsxs50 } from "react/jsx-runtime";
+var MenuBarCheckboxItem = React87.forwardRef(function MenuBarCheckboxItem2({ checked, children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs50(
     CheckboxItem3,
     {
       checked,
@@ -3042,7 +3224,7 @@ var MenuBarCheckboxItem = React86.forwardRef(function MenuBarCheckboxItem2({ che
       ref,
       ...props,
       children: [
-        /* @__PURE__ */ jsx125("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx125(ItemIndicator6, { children: /* @__PURE__ */ jsx125(CheckIcon6, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx128("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx128(ItemIndicator6, { children: /* @__PURE__ */ jsx128(CheckIcon6, { className: "h-4 w-4" }) }) }),
         children
       ]
     }
@@ -3050,11 +3232,11 @@ var MenuBarCheckboxItem = React86.forwardRef(function MenuBarCheckboxItem2({ che
 });
 
 // src/components/MenuBar/MenuBarContent.tsx
-import React87 from "react";
+import React88 from "react";
 import { Content as Content10, Portal as Portal9 } from "@radix-ui/react-menubar";
-import { jsx as jsx126 } from "react/jsx-runtime";
-var MenuBarContent = React87.forwardRef(function MenuBarContent2({ align = "start", alignOffset = -4, className, sideOffset = 8, ...props }, ref) {
-  return /* @__PURE__ */ jsx126(Portal9, { children: /* @__PURE__ */ jsx126(
+import { jsx as jsx129 } from "react/jsx-runtime";
+var MenuBarContent = React88.forwardRef(function MenuBarContent2({ align = "start", alignOffset = -4, className, sideOffset = 8, ...props }, ref) {
+  return /* @__PURE__ */ jsx129(Portal9, { children: /* @__PURE__ */ jsx129(
     Content10,
     {
       align,
@@ -3071,11 +3253,11 @@ var MenuBarContent = React87.forwardRef(function MenuBarContent2({ align = "star
 });
 
 // src/components/MenuBar/MenuBarItem.tsx
-import React88 from "react";
+import React89 from "react";
 import { Item as Item6 } from "@radix-ui/react-menubar";
-import { jsx as jsx127 } from "react/jsx-runtime";
-var MenuBarItem = React88.forwardRef(function MenuBarItem2({ className, inset, ...props }, ref) {
-  return /* @__PURE__ */ jsx127(
+import { jsx as jsx130 } from "react/jsx-runtime";
+var MenuBarItem = React89.forwardRef(function MenuBarItem2({ className, inset, ...props }, ref) {
+  return /* @__PURE__ */ jsx130(
     Item6,
     {
       className: cn(
@@ -3090,20 +3272,20 @@ var MenuBarItem = React88.forwardRef(function MenuBarItem2({ className, inset, .
 });
 
 // src/components/MenuBar/MenuBarLabel.tsx
-import React89 from "react";
+import React90 from "react";
 import { Label as Label7 } from "@radix-ui/react-menubar";
-import { jsx as jsx128 } from "react/jsx-runtime";
-var MenuBarLabel = React89.forwardRef(function MenuBarLabel2({ className, inset, ...props }, ref) {
-  return /* @__PURE__ */ jsx128(Label7, { className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ref, ...props });
+import { jsx as jsx131 } from "react/jsx-runtime";
+var MenuBarLabel = React90.forwardRef(function MenuBarLabel2({ className, inset, ...props }, ref) {
+  return /* @__PURE__ */ jsx131(Label7, { className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ref, ...props });
 });
 
 // src/components/MenuBar/MenuBarRadioItem.tsx
-import React90 from "react";
+import React91 from "react";
 import { ItemIndicator as ItemIndicator7, RadioItem as RadioItem3 } from "@radix-ui/react-menubar";
 import { CircleIcon as CircleIcon4 } from "lucide-react";
-import { jsx as jsx129, jsxs as jsxs48 } from "react/jsx-runtime";
-var MenuBarRadioItem = React90.forwardRef(function MenuBarRadioItem2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs48(
+import { jsx as jsx132, jsxs as jsxs51 } from "react/jsx-runtime";
+var MenuBarRadioItem = React91.forwardRef(function MenuBarRadioItem2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs51(
     RadioItem3,
     {
       className: cn(
@@ -3113,7 +3295,7 @@ var MenuBarRadioItem = React90.forwardRef(function MenuBarRadioItem2({ children,
       ref,
       ...props,
       children: [
-        /* @__PURE__ */ jsx129("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx129(ItemIndicator7, { children: /* @__PURE__ */ jsx129(CircleIcon4, { className: "fill-current", style: { height: 8, width: 8 } }) }) }),
+        /* @__PURE__ */ jsx132("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx132(ItemIndicator7, { children: /* @__PURE__ */ jsx132(CircleIcon4, { className: "fill-current", style: { height: 8, width: 8 } }) }) }),
         children
       ]
     }
@@ -3121,12 +3303,12 @@ var MenuBarRadioItem = React90.forwardRef(function MenuBarRadioItem2({ children,
 });
 
 // src/components/MenuBar/MenuBarRoot.tsx
-import React91 from "react";
+import React92 from "react";
 import { Root as Root15 } from "@radix-ui/react-menubar";
-import { jsx as jsx130 } from "react/jsx-runtime";
-var MenuBarRoot = React91.forwardRef(
+import { jsx as jsx133 } from "react/jsx-runtime";
+var MenuBarRoot = React92.forwardRef(
   function MenuBarRoot2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx130(
+    return /* @__PURE__ */ jsx133(
       Root15,
       {
         className: cn("flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm", className),
@@ -3138,26 +3320,26 @@ var MenuBarRoot = React91.forwardRef(
 );
 
 // src/components/MenuBar/MenuBarSeparator.tsx
-import React92 from "react";
+import React93 from "react";
 import { Separator as Separator4 } from "@radix-ui/react-menubar";
-import { jsx as jsx131 } from "react/jsx-runtime";
-var MenuBarSeparator = React92.forwardRef(function MenuBarSeparator2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx131(Separator4, { className: cn("-mx-1 my-1 h-px bg-muted", className), ref, ...props });
+import { jsx as jsx134 } from "react/jsx-runtime";
+var MenuBarSeparator = React93.forwardRef(function MenuBarSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx134(Separator4, { className: cn("-mx-1 my-1 h-px bg-muted", className), ref, ...props });
 });
 
 // src/components/MenuBar/MenuBarShortcut.tsx
 import "react";
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx135 } from "react/jsx-runtime";
 var MenuBarShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx132("span", { className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx135("span", { className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props });
 };
 
 // src/components/MenuBar/MenuBarSubContent.tsx
-import React94 from "react";
+import React95 from "react";
 import { SubContent as SubContent3 } from "@radix-ui/react-menubar";
-import { jsx as jsx133 } from "react/jsx-runtime";
-var MenuBarSubContent = React94.forwardRef(function MenuBarSubContent2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx133(
+import { jsx as jsx136 } from "react/jsx-runtime";
+var MenuBarSubContent = React95.forwardRef(function MenuBarSubContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx136(
     SubContent3,
     {
       className: cn(
@@ -3171,12 +3353,12 @@ var MenuBarSubContent = React94.forwardRef(function MenuBarSubContent2({ classNa
 });
 
 // src/components/MenuBar/MenuBarSubTrigger.tsx
-import React95 from "react";
+import React96 from "react";
 import { SubTrigger as SubTrigger3 } from "@radix-ui/react-menubar";
 import { ChevronRightIcon as ChevronRightIcon4 } from "lucide-react";
-import { jsx as jsx134, jsxs as jsxs49 } from "react/jsx-runtime";
-var MenuBarSubTrigger = React95.forwardRef(function MenuBarSubTrigger2({ children, className, inset, ...props }, ref) {
-  return /* @__PURE__ */ jsxs49(
+import { jsx as jsx137, jsxs as jsxs52 } from "react/jsx-runtime";
+var MenuBarSubTrigger = React96.forwardRef(function MenuBarSubTrigger2({ children, className, inset, ...props }, ref) {
+  return /* @__PURE__ */ jsxs52(
     SubTrigger3,
     {
       className: cn(
@@ -3188,18 +3370,18 @@ var MenuBarSubTrigger = React95.forwardRef(function MenuBarSubTrigger2({ childre
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx134(ChevronRightIcon4, { className: "ml-auto h-4 w-4" })
+        /* @__PURE__ */ jsx137(ChevronRightIcon4, { className: "ml-auto h-4 w-4" })
       ]
     }
   );
 });
 
 // src/components/MenuBar/MenuBarTrigger.tsx
-import React96 from "react";
+import React97 from "react";
 import { Trigger as Trigger9 } from "@radix-ui/react-menubar";
-import { jsx as jsx135 } from "react/jsx-runtime";
-var MenuBarTrigger = React96.forwardRef(function MenuBarTrigger2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx135(
+import { jsx as jsx138 } from "react/jsx-runtime";
+var MenuBarTrigger = React97.forwardRef(function MenuBarTrigger2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx138(
     Trigger9,
     {
       className: cn(
@@ -3219,7 +3401,7 @@ var MenuBar = Object.assign(MenuBarRoot, {
   Group: Group4,
   Item: MenuBarItem,
   Label: MenuBarLabel,
-  Menu: Menu2,
+  Menu: Menu3,
   Portal: Portal10,
   RadioGroup: RadioGroup5,
   RadioItem: MenuBarRadioItem,
@@ -3234,30 +3416,30 @@ var MenuBar = Object.assign(MenuBarRoot, {
 // src/components/NotificationHub/NotificationHub.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
 import { XIcon as XIcon2 } from "lucide-react";
-import { useTranslation as useTranslation8 } from "react-i18next";
+import { useTranslation as useTranslation9 } from "react-i18next";
 
 // src/components/NotificationHub/NotificationIcon.tsx
 import { CheckCircleIcon, ExclamationCircleIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
-import { jsx as jsx136 } from "react/jsx-runtime";
+import { jsx as jsx139 } from "react/jsx-runtime";
 var NotificationIcon = ({ type }) => {
   switch (type) {
     case "info":
-      return /* @__PURE__ */ jsx136(InformationCircleIcon, { "aria-hidden": "true", className: "h-6 w-6 text-blue-500" });
+      return /* @__PURE__ */ jsx139(InformationCircleIcon, { "aria-hidden": "true", className: "h-6 w-6 text-blue-500" });
     case "success":
-      return /* @__PURE__ */ jsx136(CheckCircleIcon, { "aria-hidden": "true", className: "h-6 w-6 text-green-500" });
+      return /* @__PURE__ */ jsx139(CheckCircleIcon, { "aria-hidden": "true", className: "h-6 w-6 text-green-500" });
     case "warning":
-      return /* @__PURE__ */ jsx136(ExclamationCircleIcon, { "aria-hidden": "true", className: "h-6 w-6 text-yellow-500" });
+      return /* @__PURE__ */ jsx139(ExclamationCircleIcon, { "aria-hidden": "true", className: "h-6 w-6 text-yellow-500" });
     case "error":
-      return /* @__PURE__ */ jsx136(XCircleIcon, { "aria-hidden": "true", className: "h-6 w-6 text-red-500" });
+      return /* @__PURE__ */ jsx139(XCircleIcon, { "aria-hidden": "true", className: "h-6 w-6 text-red-500" });
   }
 };
 
 // src/components/NotificationHub/NotificationHub.tsx
-import { jsx as jsx137, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx140, jsxs as jsxs53 } from "react/jsx-runtime";
 var NotificationHub = ({ timeout = 5e3 }) => {
-  const { t } = useTranslation8();
+  const { t } = useTranslation9("libui");
   const { dismissNotification, notifications } = useNotificationsStore();
-  return /* @__PURE__ */ jsx137("div", { className: "fixed bottom-0 z-50 w-full print:hidden", children: /* @__PURE__ */ jsx137(AnimatePresence3, { children: notifications.map((item) => /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsx140("div", { className: "fixed bottom-0 z-50 w-full print:hidden", children: /* @__PURE__ */ jsx140(AnimatePresence3, { children: notifications.map((item) => /* @__PURE__ */ jsx140(
     motion3.div,
     {
       animate: { height: "auto", opacity: 1 },
@@ -3265,12 +3447,12 @@ var NotificationHub = ({ timeout = 5e3 }) => {
       exit: { height: 0, opacity: 0 },
       initial: { height: 0, opacity: 0 },
       transition: { bounce: 0.1, type: "spring" },
-      children: /* @__PURE__ */ jsx137("div", { className: "w-full p-2", children: /* @__PURE__ */ jsxs50(Card, { className: "w-full rounded-lg p-0", children: [
-        /* @__PURE__ */ jsxs50("div", { className: "p-4", children: [
-          /* @__PURE__ */ jsxs50("div", { className: "mb-2 flex items-center", children: [
-            /* @__PURE__ */ jsx137(NotificationIcon, { type: item.type }),
-            /* @__PURE__ */ jsx137("h5", { className: "ml-3 flex-grow font-medium text-slate-900 dark:text-slate-100", children: item.title ?? t(`notifications.types.${item.type}`) }),
-            /* @__PURE__ */ jsx137(
+      children: /* @__PURE__ */ jsx140("div", { className: "w-full p-2", children: /* @__PURE__ */ jsxs53(Card, { className: "w-full rounded-lg p-0", children: [
+        /* @__PURE__ */ jsxs53("div", { className: "p-4", children: [
+          /* @__PURE__ */ jsxs53("div", { className: "mb-2 flex items-center", children: [
+            /* @__PURE__ */ jsx140(NotificationIcon, { type: item.type }),
+            /* @__PURE__ */ jsx140("h5", { className: "ml-3 flex-grow font-medium text-slate-900 dark:text-slate-100", children: item.title ?? t(`notifications.types.${item.type}`) }),
+            /* @__PURE__ */ jsx140(
               "button",
               {
                 className: "inline-flex rounded-md text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:focus:ring-sky-600",
@@ -3278,13 +3460,13 @@ var NotificationHub = ({ timeout = 5e3 }) => {
                 onClick: () => {
                   dismissNotification(item.id);
                 },
-                children: /* @__PURE__ */ jsx137(XIcon2, { "aria-hidden": "true", className: "h-5 w-5" })
+                children: /* @__PURE__ */ jsx140(XIcon2, { "aria-hidden": "true", className: "h-5 w-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx137("p", { className: "my-2 text-muted-foreground", children: item.message })
+          /* @__PURE__ */ jsx140("p", { className: "my-2 text-muted-foreground", children: item.message })
         ] }),
-        /* @__PURE__ */ jsx137(
+        /* @__PURE__ */ jsx140(
           motion3.div,
           {
             animate: { width: "100%" },
@@ -3304,26 +3486,26 @@ var NotificationHub = ({ timeout = 5e3 }) => {
 
 // src/components/Pagination/PaginationContent.tsx
 import "react";
-import { jsx as jsx138 } from "react/jsx-runtime";
-var PaginationContent = ({ className, ...props }) => /* @__PURE__ */ jsx138("ul", { className: cn("flex flex-row items-center gap-1", className), ...props });
+import { jsx as jsx141 } from "react/jsx-runtime";
+var PaginationContent = ({ className, ...props }) => /* @__PURE__ */ jsx141("ul", { className: cn("flex flex-row items-center gap-1", className), ...props });
 
 // src/components/Pagination/PaginationEllipsis.tsx
 import "react";
 import { MoreHorizontalIcon as MoreHorizontalIcon2 } from "lucide-react";
-import { jsx as jsx139, jsxs as jsxs51 } from "react/jsx-runtime";
-var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs51("span", { "aria-hidden": true, className: cn("flex h-9 w-9 items-center justify-center", className), ...props, children: [
-  /* @__PURE__ */ jsx139(MoreHorizontalIcon2, { className: "h-4 w-4" }),
-  /* @__PURE__ */ jsx139("span", { className: "sr-only", children: "More pages" })
+import { jsx as jsx142, jsxs as jsxs54 } from "react/jsx-runtime";
+var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs54("span", { "aria-hidden": true, className: cn("flex h-9 w-9 items-center justify-center", className), ...props, children: [
+  /* @__PURE__ */ jsx142(MoreHorizontalIcon2, { className: "h-4 w-4" }),
+  /* @__PURE__ */ jsx142("span", { className: "sr-only", children: "More pages" })
 ] });
 
 // src/components/Pagination/PaginationItem.tsx
-import { jsx as jsx140 } from "react/jsx-runtime";
-var PaginationItem = ({ className, ...props }) => /* @__PURE__ */ jsx140("li", { className, ...props });
+import { jsx as jsx143 } from "react/jsx-runtime";
+var PaginationItem = ({ className, ...props }) => /* @__PURE__ */ jsx143("li", { className, ...props });
 
 // src/components/Pagination/PaginationLink.tsx
 import "react";
-import { jsx as jsx141 } from "react/jsx-runtime";
-var PaginationLink = ({ children, className, isActive, size = "icon", ...props }) => /* @__PURE__ */ jsx141(
+import { jsx as jsx144 } from "react/jsx-runtime";
+var PaginationLink = ({ children, className, isActive, size = "icon", ...props }) => /* @__PURE__ */ jsx144(
   "a",
   {
     "aria-current": isActive ? "page" : void 0,
@@ -3342,32 +3524,32 @@ var PaginationLink = ({ children, className, isActive, size = "icon", ...props }
 // src/components/Pagination/PaginationNext.tsx
 import "react";
 import { ChevronRightIcon as ChevronRightIcon5 } from "lucide-react";
-import { useTranslation as useTranslation9 } from "react-i18next";
-import { jsx as jsx142, jsxs as jsxs52 } from "react/jsx-runtime";
+import { useTranslation as useTranslation10 } from "react-i18next";
+import { jsx as jsx145, jsxs as jsxs55 } from "react/jsx-runtime";
 var PaginationNext = ({ className, ...props }) => {
-  const { t } = useTranslation9("libui");
-  return /* @__PURE__ */ jsxs52(PaginationLink, { "aria-label": "Go to next page", className: cn("gap-1 pr-2.5", className), size: "md", ...props, children: [
-    /* @__PURE__ */ jsx142("span", { children: t("pagination.next") }),
-    /* @__PURE__ */ jsx142(ChevronRightIcon5, { className: "h-4 w-4" })
+  const { t } = useTranslation10("libui");
+  return /* @__PURE__ */ jsxs55(PaginationLink, { "aria-label": "Go to next page", className: cn("gap-1 pr-2.5", className), size: "md", ...props, children: [
+    /* @__PURE__ */ jsx145("span", { children: t("pagination.next") }),
+    /* @__PURE__ */ jsx145(ChevronRightIcon5, { className: "h-4 w-4" })
   ] });
 };
 
 // src/components/Pagination/PaginationPrevious.tsx
 import { ChevronLeftIcon } from "lucide-react";
-import { useTranslation as useTranslation10 } from "react-i18next";
-import { jsx as jsx143, jsxs as jsxs53 } from "react/jsx-runtime";
+import { useTranslation as useTranslation11 } from "react-i18next";
+import { jsx as jsx146, jsxs as jsxs56 } from "react/jsx-runtime";
 var PaginationPrevious = ({ className, ...props }) => {
-  const { t } = useTranslation10("libui");
-  return /* @__PURE__ */ jsxs53(PaginationLink, { "aria-label": "Go to previous page", className: cn("gap-1 pl-2.5", className), size: "md", ...props, children: [
-    /* @__PURE__ */ jsx143(ChevronLeftIcon, { className: "h-4 w-4" }),
-    /* @__PURE__ */ jsx143("span", { children: t("pagination.previous") })
+  const { t } = useTranslation11("libui");
+  return /* @__PURE__ */ jsxs56(PaginationLink, { "aria-label": "Go to previous page", className: cn("gap-1 pl-2.5", className), size: "md", ...props, children: [
+    /* @__PURE__ */ jsx146(ChevronLeftIcon, { className: "h-4 w-4" }),
+    /* @__PURE__ */ jsx146("span", { children: t("pagination.previous") })
   ] });
 };
 
 // src/components/Pagination/PaginationRoot.tsx
 import "react";
-import { jsx as jsx144 } from "react/jsx-runtime";
-var PaginationRoot = ({ className, ...props }) => /* @__PURE__ */ jsx144(
+import { jsx as jsx147 } from "react/jsx-runtime";
+var PaginationRoot = ({ className, ...props }) => /* @__PURE__ */ jsx147(
   "nav",
   {
     "aria-label": "pagination",
@@ -3388,17 +3570,17 @@ var Pagination = Object.assign(PaginationRoot, {
 });
 
 // src/components/Progress/Progress.tsx
-import React102 from "react";
+import React103 from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { jsx as jsx145 } from "react/jsx-runtime";
-var Progress = React102.forwardRef(function Progress2({ className, value, ...props }, ref) {
-  return /* @__PURE__ */ jsx145(
+import { jsx as jsx148 } from "react/jsx-runtime";
+var Progress = React103.forwardRef(function Progress2({ className, value, ...props }, ref) {
+  return /* @__PURE__ */ jsx148(
     ProgressPrimitive.Root,
     {
       className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
       ref,
       ...props,
-      children: /* @__PURE__ */ jsx145(
+      children: /* @__PURE__ */ jsx148(
         ProgressPrimitive.Indicator,
         {
           className: "h-full w-full flex-1 bg-primary transition-all",
@@ -3416,8 +3598,8 @@ import { Panel } from "react-resizable-panels";
 // src/components/Resizable/ResizableHandle.tsx
 import { GripVertical } from "lucide-react";
 import { PanelResizeHandle } from "react-resizable-panels";
-import { jsx as jsx146 } from "react/jsx-runtime";
-var ResizableHandle = ({ className, withHandle, ...props }) => /* @__PURE__ */ jsx146(
+import { jsx as jsx149 } from "react/jsx-runtime";
+var ResizableHandle = ({ className, withHandle, ...props }) => /* @__PURE__ */ jsx149(
   PanelResizeHandle,
   {
     className: cn(
@@ -3425,14 +3607,14 @@ var ResizableHandle = ({ className, withHandle, ...props }) => /* @__PURE__ */ j
       className
     ),
     ...props,
-    children: withHandle && /* @__PURE__ */ jsx146("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx146(GripVertical, { className: "h-2.5 w-2.5" }) })
+    children: withHandle && /* @__PURE__ */ jsx149("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx149(GripVertical, { className: "h-2.5 w-2.5" }) })
   }
 );
 
 // src/components/Resizable/ResizablePanelGroup.tsx
 import { PanelGroup } from "react-resizable-panels";
-import { jsx as jsx147 } from "react/jsx-runtime";
-var ResizablePanelGroup = ({ className, ...props }) => /* @__PURE__ */ jsx147(
+import { jsx as jsx150 } from "react/jsx-runtime";
+var ResizablePanelGroup = ({ className, ...props }) => /* @__PURE__ */ jsx150(
   PanelGroup,
   {
     className: cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className),
@@ -3441,8 +3623,8 @@ var ResizablePanelGroup = ({ className, ...props }) => /* @__PURE__ */ jsx147(
 );
 
 // src/components/Resizable/Resizable.tsx
-import { Fragment, jsx as jsx148 } from "react/jsx-runtime";
-var ResizableRoot = ({ children }) => /* @__PURE__ */ jsx148(Fragment, { children });
+import { Fragment, jsx as jsx151 } from "react/jsx-runtime";
+var ResizableRoot = ({ children }) => /* @__PURE__ */ jsx151(Fragment, { children });
 var Resizable = Object.assign(ResizableRoot, {
   Handle: ResizableHandle,
   Panel,
@@ -3451,13 +3633,13 @@ var Resizable = Object.assign(ResizableRoot, {
 
 // src/components/SearchBar/SearchBar.tsx
 import { SearchIcon as SearchIcon2 } from "lucide-react";
-import { useTranslation as useTranslation11 } from "react-i18next";
-import { jsx as jsx149, jsxs as jsxs54 } from "react/jsx-runtime";
-var SearchBar = ({ className, onValueChange, placeholder, value }) => {
-  const { t } = useTranslation11();
-  return /* @__PURE__ */ jsxs54("form", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx149(SearchIcon2, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
-    /* @__PURE__ */ jsx149(
+import { useTranslation as useTranslation12 } from "react-i18next";
+import { jsx as jsx152, jsxs as jsxs57 } from "react/jsx-runtime";
+var SearchBar = ({ className, onClick, onValueChange, placeholder, value }) => {
+  const { t } = useTranslation12("libui");
+  return /* @__PURE__ */ jsxs57("form", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx152(SearchIcon2, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+    /* @__PURE__ */ jsx152(
       Input,
       {
         className: "pl-8",
@@ -3466,18 +3648,19 @@ var SearchBar = ({ className, onValueChange, placeholder, value }) => {
         value,
         onChange: (event) => {
           onValueChange?.(event.target.value);
-        }
+        },
+        onClick: () => onClick?.()
       }
     )
   ] });
 };
 
 // src/components/Separator/Separator.tsx
-import React104 from "react";
+import React105 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx150 } from "react/jsx-runtime";
-var Separator5 = React104.forwardRef(function Separator6({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
-  return /* @__PURE__ */ jsx150(
+import { jsx as jsx153 } from "react/jsx-runtime";
+var Separator5 = React105.forwardRef(function Separator6({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
+  return /* @__PURE__ */ jsx153(
     SeparatorPrimitive.Root,
     {
       className: cn(
@@ -3498,11 +3681,11 @@ var Separator5 = React104.forwardRef(function Separator6({ className, decorative
 import { Close as Close3, Portal as Portal12, Root as Root18, Trigger as Trigger10 } from "@radix-ui/react-dialog";
 
 // src/components/Sheet/SheetContent.tsx
-import React105 from "react";
+import React106 from "react";
 import { Close as Close2, Content as Content11, Overlay as Overlay3, Portal as Portal11 } from "@radix-ui/react-dialog";
 import { cva as cva5 } from "class-variance-authority";
 import { XIcon as XIcon3 } from "lucide-react";
-import { jsx as jsx151, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx154, jsxs as jsxs58 } from "react/jsx-runtime";
 var sheetVariants = cva5(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
@@ -3519,43 +3702,43 @@ var sheetVariants = cva5(
     }
   }
 );
-var SheetContent = React105.forwardRef(function SheetContent2({ children, className, side = "right", ...props }, ref) {
-  return /* @__PURE__ */ jsxs55(Portal11, { children: [
-    /* @__PURE__ */ jsx151(Overlay3, {}),
-    /* @__PURE__ */ jsxs55(Content11, { className: cn(sheetVariants({ side }), className), ref, ...props, children: [
+var SheetContent = React106.forwardRef(function SheetContent2({ children, className, side = "right", ...props }, ref) {
+  return /* @__PURE__ */ jsxs58(Portal11, { children: [
+    /* @__PURE__ */ jsx154(Overlay3, {}),
+    /* @__PURE__ */ jsxs58(Content11, { className: cn(sheetVariants({ side }), className), ref, ...props, children: [
       children,
-      /* @__PURE__ */ jsxs55(Close2, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-        /* @__PURE__ */ jsx151(XIcon3, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx151("span", { className: "sr-only", children: "Close" })
+      /* @__PURE__ */ jsxs58(Close2, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+        /* @__PURE__ */ jsx154(XIcon3, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx154("span", { className: "sr-only", children: "Close" })
       ] })
     ] })
   ] });
 });
 
 // src/components/Sheet/SheetDescription.tsx
-import React106 from "react";
+import React107 from "react";
 import { Description as Description3 } from "@radix-ui/react-dialog";
-import { jsx as jsx152 } from "react/jsx-runtime";
-var SheetDescription = React106.forwardRef(function SheetDescription2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx152(Description3, { className: cn("text-sm text-muted-foreground", className), ref, ...props });
+import { jsx as jsx155 } from "react/jsx-runtime";
+var SheetDescription = React107.forwardRef(function SheetDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx155(Description3, { className: cn("text-sm text-muted-foreground", className), ref, ...props });
 });
 
 // src/components/Sheet/SheetFooter.tsx
 import "react";
-import { jsx as jsx153 } from "react/jsx-runtime";
-var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx153("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+import { jsx as jsx156 } from "react/jsx-runtime";
+var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx156("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
 
 // src/components/Sheet/SheetHeader.tsx
 import "react";
-import { jsx as jsx154 } from "react/jsx-runtime";
-var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx154("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+import { jsx as jsx157 } from "react/jsx-runtime";
+var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx157("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
 
 // src/components/Sheet/SheetOverlay.tsx
-import React109 from "react";
+import React110 from "react";
 import { Overlay as Overlay4 } from "@radix-ui/react-dialog";
-import { jsx as jsx155 } from "react/jsx-runtime";
-var SheetOverlay = React109.forwardRef(function SheetOverlay2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx155(
+import { jsx as jsx158 } from "react/jsx-runtime";
+var SheetOverlay = React110.forwardRef(function SheetOverlay2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx158(
     Overlay4,
     {
       className: cn(
@@ -3569,11 +3752,11 @@ var SheetOverlay = React109.forwardRef(function SheetOverlay2({ className, ...pr
 });
 
 // src/components/Sheet/SheetTitle.tsx
-import React110 from "react";
+import React111 from "react";
 import { Title as Title3 } from "@radix-ui/react-dialog";
-import { jsx as jsx156 } from "react/jsx-runtime";
-var SheetTitle = React110.forwardRef(function SheetTitle2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx156(Title3, { className: cn("text-lg font-semibold text-foreground", className), ref, ...props });
+import { jsx as jsx159 } from "react/jsx-runtime";
+var SheetTitle = React111.forwardRef(function SheetTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx159(Title3, { className: cn("text-lg font-semibold text-foreground", className), ref, ...props });
 });
 
 // src/components/Sheet/Sheet.tsx
@@ -3590,9 +3773,9 @@ var Sheet = Object.assign(Root18, {
 });
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx157 } from "react/jsx-runtime";
+import { jsx as jsx160 } from "react/jsx-runtime";
 var Spinner = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx157("div", { className: cn("flex h-full w-full items-center justify-center", className), ...props, children: /* @__PURE__ */ jsx157(
+  return /* @__PURE__ */ jsx160("div", { className: cn("flex h-full w-full items-center justify-center", className), ...props, children: /* @__PURE__ */ jsx160(
     "span",
     {
       className: "relative animate-spinner overflow-hidden text-slate-900 dark:text-slate-100",
@@ -3609,8 +3792,8 @@ var Spinner = ({ className, ...props }) => {
 };
 
 // src/components/SpinnerIcon/SpinnerIcon.tsx
-import { jsx as jsx158 } from "react/jsx-runtime";
-var SpinnerIcon = ({ className, ...props }) => /* @__PURE__ */ jsx158(
+import { jsx as jsx161 } from "react/jsx-runtime";
+var SpinnerIcon = ({ className, ...props }) => /* @__PURE__ */ jsx161(
   "svg",
   {
     className: cn("animate-spin", className),
@@ -3624,16 +3807,16 @@ var SpinnerIcon = ({ className, ...props }) => /* @__PURE__ */ jsx158(
     width: "24",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ jsx158("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    children: /* @__PURE__ */ jsx161("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
   }
 );
 
 // src/components/Switch/Switch.tsx
-import React111 from "react";
+import React112 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { jsx as jsx159 } from "react/jsx-runtime";
-var Switch = React111.forwardRef(function Switch2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx159(
+import { jsx as jsx162 } from "react/jsx-runtime";
+var Switch = React112.forwardRef(function Switch2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx162(
     SwitchPrimitives.Root,
     {
       className: cn(
@@ -3642,7 +3825,7 @@ var Switch = React111.forwardRef(function Switch2({ className, ...props }, ref)
       ),
       ...props,
       ref,
-      children: /* @__PURE__ */ jsx159(
+      children: /* @__PURE__ */ jsx162(
         SwitchPrimitives.Thumb,
         {
           className: cn(
@@ -3655,38 +3838,38 @@ var Switch = React111.forwardRef(function Switch2({ className, ...props }, ref)
 });
 
 // src/components/Table/TableBody.tsx
-import React112 from "react";
-import { jsx as jsx160 } from "react/jsx-runtime";
-var TableBody = React112.forwardRef(
+import React113 from "react";
+import { jsx as jsx163 } from "react/jsx-runtime";
+var TableBody = React113.forwardRef(
   function TableBody2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx160("tbody", { className: cn("[&_tr:last-child]:border-0", className), ref, ...props });
+    return /* @__PURE__ */ jsx163("tbody", { className: cn("[&_tr:last-child]:border-0", className), ref, ...props });
   }
 );
 
 // src/components/Table/TableCaption.tsx
-import React113 from "react";
-import { jsx as jsx161 } from "react/jsx-runtime";
-var TableCaption = React113.forwardRef(
+import React114 from "react";
+import { jsx as jsx164 } from "react/jsx-runtime";
+var TableCaption = React114.forwardRef(
   function TableCaption2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx161("caption", { className: cn("mt-4 text-sm text-muted-foreground", className), ref, ...props });
+    return /* @__PURE__ */ jsx164("caption", { className: cn("mt-4 text-sm text-muted-foreground", className), ref, ...props });
   }
 );
 
 // src/components/Table/TableCell.tsx
-import React114 from "react";
-import { jsx as jsx162 } from "react/jsx-runtime";
-var TableCell = React114.forwardRef(
+import React115 from "react";
+import { jsx as jsx165 } from "react/jsx-runtime";
+var TableCell = React115.forwardRef(
   function TableCell2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx162("td", { className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ref, ...props });
+    return /* @__PURE__ */ jsx165("td", { className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ref, ...props });
   }
 );
 
 // src/components/Table/TableFooter.tsx
-import React115 from "react";
-import { jsx as jsx163 } from "react/jsx-runtime";
-var TableFooter = React115.forwardRef(
+import React116 from "react";
+import { jsx as jsx166 } from "react/jsx-runtime";
+var TableFooter = React116.forwardRef(
   function TableFooter2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx163(
+    return /* @__PURE__ */ jsx166(
       "tfoot",
       {
         className: cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className),
@@ -3698,11 +3881,11 @@ var TableFooter = React115.forwardRef(
 );
 
 // src/components/Table/TableHead.tsx
-import React116 from "react";
-import { jsx as jsx164 } from "react/jsx-runtime";
-var TableHead = React116.forwardRef(
+import React117 from "react";
+import { jsx as jsx167 } from "react/jsx-runtime";
+var TableHead = React117.forwardRef(
   function TableHead2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx164(
+    return /* @__PURE__ */ jsx167(
       "th",
       {
         className: cn(
@@ -3717,27 +3900,27 @@ var TableHead = React116.forwardRef(
 );
 
 // src/components/Table/TableHeader.tsx
-import React117 from "react";
-import { jsx as jsx165 } from "react/jsx-runtime";
-var TableHeader = React117.forwardRef(
+import React118 from "react";
+import { jsx as jsx168 } from "react/jsx-runtime";
+var TableHeader = React118.forwardRef(
   function TableHeader2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx165("thead", { className: cn("[&_tr]:border-b", className), ref, ...props });
+    return /* @__PURE__ */ jsx168("thead", { className: cn("[&_tr]:border-b", className), ref, ...props });
   }
 );
 
 // src/components/Table/TableRoot.tsx
-import React118 from "react";
-import { jsx as jsx166 } from "react/jsx-runtime";
-var TableRoot = React118.forwardRef(function TableRoot2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx166("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx166("table", { className: cn("w-full caption-bottom text-sm", className), ref, ...props }) });
+import React119 from "react";
+import { jsx as jsx169 } from "react/jsx-runtime";
+var TableRoot = React119.forwardRef(function TableRoot2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx169("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx169("table", { className: cn("w-full caption-bottom text-sm", className), ref, ...props }) });
 });
 
 // src/components/Table/TableRow.tsx
-import React119 from "react";
-import { jsx as jsx167 } from "react/jsx-runtime";
-var TableRow = React119.forwardRef(
+import React120 from "react";
+import { jsx as jsx170 } from "react/jsx-runtime";
+var TableRow = React120.forwardRef(
   function TableRow2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx167(
+    return /* @__PURE__ */ jsx170(
       "tr",
       {
         className: cn("hover:bg-muted/50 border-b transition-colors data-[state=selected]:bg-muted", className),
@@ -3763,11 +3946,11 @@ var Table = Object.assign(TableRoot, {
 import * as TabsPrimitive4 from "@radix-ui/react-tabs";
 
 // src/components/Tabs/TabsContent.tsx
-import React120 from "react";
+import React121 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx168 } from "react/jsx-runtime";
-var TabsContent = React120.forwardRef(function TabsContent2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx168(
+import { jsx as jsx171 } from "react/jsx-runtime";
+var TabsContent = React121.forwardRef(function TabsContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx171(
     TabsPrimitive.Content,
     {
       className: cn(
@@ -3781,11 +3964,11 @@ var TabsContent = React120.forwardRef(function TabsContent2({ className, ...prop
 });
 
 // src/components/Tabs/TabsList.tsx
-import React121 from "react";
+import React122 from "react";
 import * as TabsPrimitive2 from "@radix-ui/react-tabs";
-import { jsx as jsx169 } from "react/jsx-runtime";
-var TabsList = React121.forwardRef(function TabsList2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx169(
+import { jsx as jsx172 } from "react/jsx-runtime";
+var TabsList = React122.forwardRef(function TabsList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx172(
     TabsPrimitive2.List,
     {
       className: cn(
@@ -3799,11 +3982,11 @@ var TabsList = React121.forwardRef(function TabsList2({ className, ...props }, r
 });
 
 // src/components/Tabs/TabsTrigger.tsx
-import React122 from "react";
+import React123 from "react";
 import * as TabsPrimitive3 from "@radix-ui/react-tabs";
-import { jsx as jsx170 } from "react/jsx-runtime";
-var TabsTrigger = React122.forwardRef(function TabsTrigger2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx170(
+import { jsx as jsx173 } from "react/jsx-runtime";
+var TabsTrigger = React123.forwardRef(function TabsTrigger2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx173(
     TabsPrimitive3.Trigger,
     {
       className: cn(
@@ -3825,25 +4008,37 @@ var Tabs = Object.assign(TabsPrimitive4.Root, {
 
 // src/components/ThemeToggle/ThemeToggle.tsx
 import { MoonIcon, SunIcon } from "lucide-react";
-import { jsx as jsx171, jsxs as jsxs56 } from "react/jsx-runtime";
-var ThemeToggle = () => {
+import { jsx as jsx174, jsxs as jsxs59 } from "react/jsx-runtime";
+var ThemeToggle = ({ onClick, variant = "outline", ...props }) => {
   const [theme, setTheme] = useTheme();
   const toggleTheme = () => {
     setTheme(theme === "dark" ? "light" : "dark");
   };
-  return /* @__PURE__ */ jsxs56(Button, { size: "icon", variant: "outline", onClick: toggleTheme, children: [
-    /* @__PURE__ */ jsx171(SunIcon, { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
-    /* @__PURE__ */ jsx171(MoonIcon, { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" })
-  ] });
+  return /* @__PURE__ */ jsxs59(
+    Button,
+    {
+      size: "icon",
+      variant,
+      onClick: (event) => {
+        toggleTheme();
+        onClick?.(event);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx174(SunIcon, { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+        /* @__PURE__ */ jsx174(MoonIcon, { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" })
+      ]
+    }
+  );
 };
 
 // src/components/Tooltip/TooltipContent.tsx
-import React123 from "react";
+import React124 from "react";
 import { Content as Content13 } from "@radix-ui/react-tooltip";
-import { jsx as jsx172 } from "react/jsx-runtime";
-var TooltipContent = React123.forwardRef(
+import { jsx as jsx175 } from "react/jsx-runtime";
+var TooltipContent = React124.forwardRef(
   function TooltipContent2({ className, collisionPadding = 0, sideOffset = 4, ...props }, ref) {
-    return /* @__PURE__ */ jsx172(
+    return /* @__PURE__ */ jsx175(
       Content13,
       {
         className: cn(
@@ -3862,18 +4057,18 @@ var TooltipContent = React123.forwardRef(
 // src/components/Tooltip/TooltipRoot.tsx
 import "react";
 import { Provider, Root as Root21 } from "@radix-ui/react-tooltip";
-import { jsx as jsx173 } from "react/jsx-runtime";
+import { jsx as jsx176 } from "react/jsx-runtime";
 var TooltipRoot = ({ children, delayDuration = 0, skipDelayDuration = 300 }) => {
-  return /* @__PURE__ */ jsx173(Provider, { delayDuration, skipDelayDuration, children: /* @__PURE__ */ jsx173(Root21, { children }) });
+  return /* @__PURE__ */ jsx176(Provider, { delayDuration, skipDelayDuration, children: /* @__PURE__ */ jsx176(Root21, { children }) });
 };
 
 // src/components/Tooltip/TooltipTrigger.tsx
-import React125 from "react";
+import React126 from "react";
 import { Trigger as Trigger12 } from "@radix-ui/react-tooltip";
-import { jsx as jsx174 } from "react/jsx-runtime";
-var TooltipTrigger = React125.forwardRef(
+import { jsx as jsx177 } from "react/jsx-runtime";
+var TooltipTrigger = React126.forwardRef(
   function TooltipTrigger2({ variant = "outline", ...props }, ref) {
-    return /* @__PURE__ */ jsx174(Trigger12, { asChild: true, ref, children: /* @__PURE__ */ jsx174(Button, { variant, ...props }) });
+    return /* @__PURE__ */ jsx177(Trigger12, { asChild: true, ref, children: /* @__PURE__ */ jsx177(Button, { variant, ...props }) });
   }
 );
 
@@ -3909,11 +4104,13 @@ export {
   Input,
   Label3 as Label,
   LanguageToggle,
+  LegacyClientTable,
   LegacyDropdown,
   LegacyModal,
   LegacySelectDropdown,
   LegacySlider,
   LegacyStepper,
+  LegacyTable,
   LineGraph,
   MenuBar,
   NotificationHub,