@mesob/ui 0.2.0 → 0.2.2

package/dist/components/data-table/index.js

@@ -250,18 +250,18 @@ import { IconChevronRight } from "@tabler/icons-react";
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -283,6 +283,9 @@ function Button({
   variant,
   size,
   asChild = false,
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
@@ -291,19 +294,24 @@ function Button({
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        leftIcon,
+        children,
+        rightIcon
+      ] })
     }
   );
 }
 
 // src/components/data-table/data-table-action.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function DataTableAction({
   onClick,
   disabled,
   "aria-label": ariaLabel = "Open menu"
 }) {
-  return /* @__PURE__ */ jsx4("div", { className: "flex justify-end align-center", children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx4("div", { className: "flex justify-end align-center", children: /* @__PURE__ */ jsxs3(
     Button,
     {
       variant: "ghost",
@@ -337,7 +345,7 @@ import { useMemo as useMemo3 } from "react";
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 
 // src/components/mesob-context.tsx
 import {
@@ -356,8 +364,9 @@ function useTranslation(namespace) {
   const mesob = useMesob();
   const nextIntlT = useTranslations(namespace);
   return useMemo3(() => {
-    if (mesob?.t) {
-      return (key, params) => mesob.t(namespace ? `${namespace}.${key}` : key, params);
+    const t = mesob?.t;
+    if (t) {
+      return (key, params) => t(namespace ? `${namespace}.${key}` : key, params);
     }
     return nextIntlT;
   }, [mesob?.t, namespace, nextIntlT]);
@@ -374,7 +383,7 @@ import {
 // src/components/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
@@ -391,7 +400,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -415,12 +424,12 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        "bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -449,7 +458,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -501,7 +510,7 @@ function SelectScrollDownButton({
 }
 
 // src/components/data-table/data-table-pagination.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function addRange(pages, start, end) {
   for (let i = start; i <= end; i++) {
     pages.push(i);
@@ -555,16 +564,16 @@ function DataTablePagination({
   const hasSelection = selectedRows > 0;
   const rowText = hasSelection ? `${selectedRows} ${t("of")} ${totalRows} ${rowLabel} ${t("selected")}` : `${totalRows} ${rowLabel} ${t("total")}`;
   const pageText = `${t("page")} ${pageIndex + 1} ${t("of")} ${pageCount || 1}`;
-  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between", children: [
-    /* @__PURE__ */ jsx9("div", { className: "text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs5("span", { children: [
-      rowText,
-      /* @__PURE__ */ jsx9("span", { className: "mx-2", children: "\xB7" }),
-      pageText
-    ] }) }),
-    /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-4 sm:gap-6 lg:gap-8", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-4 px-2 sm:flex-row sm:items-center sm:justify-between", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-center gap-4 sm:justify-start", children: [
+      /* @__PURE__ */ jsx9("div", { className: "text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs6("span", { children: [
+        rowText,
+        /* @__PURE__ */ jsx9("span", { className: "mx-2", children: "\xB7" }),
+        pageText
+      ] }) }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium whitespace-nowrap", children: t("rowsPerPage") }),
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           Select,
           {
             value: `${pageSize}`,
@@ -575,100 +584,100 @@ function DataTablePagination({
             ]
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxs5("nav", { "aria-label": "Pagination", className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxs5(
-          Button,
-          {
-            variant: "outline",
-            size: "icon",
-            className: "hidden h-8 w-8 lg:flex",
-            onClick: () => onPageChange(0),
-            disabled: !canPreviousPage,
-            "aria-label": t("firstPage"),
-            children: [
-              /* @__PURE__ */ jsx9(IconChevronsLeft, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("firstPage") })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs5(
-          Button,
-          {
-            variant: "outline",
-            size: "icon",
-            className: "h-8 w-8",
-            onClick: () => onPageChange(pageIndex - 1),
-            disabled: !canPreviousPage,
-            "aria-label": t("previousPage"),
-            children: [
-              /* @__PURE__ */ jsx9(IconChevronLeft, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("previousPage") })
-            ]
-          }
-        ),
-        pageNumbers.map((page, idx) => {
-          if (page === "ellipsis") {
-            const prevPage = idx > 0 ? pageNumbers[idx - 1] : null;
-            const nextPage = idx < pageNumbers.length - 1 ? pageNumbers[idx + 1] : null;
-            return /* @__PURE__ */ jsx9(
-              "span",
-              {
-                className: "flex h-8 w-8 items-center justify-center text-muted-foreground",
-                "aria-hidden": "true",
-                children: "..."
-              },
-              `ellipsis-${prevPage}-${nextPage}`
-            );
-          }
-          const pageNum = page;
-          const isActive = pageNum === pageIndex + 1;
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "flex justify-center sm:justify-end", children: /* @__PURE__ */ jsxs6("nav", { "aria-label": "Pagination", className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs6(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "hidden h-8 w-8 lg:flex",
+          onClick: () => onPageChange(0),
+          disabled: !canPreviousPage,
+          "aria-label": t("firstPage"),
+          children: [
+            /* @__PURE__ */ jsx9(IconChevronsLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("firstPage") })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs6(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: () => onPageChange(pageIndex - 1),
+          disabled: !canPreviousPage,
+          "aria-label": t("previousPage"),
+          children: [
+            /* @__PURE__ */ jsx9(IconChevronLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("previousPage") })
+          ]
+        }
+      ),
+      pageNumbers.map((page, idx) => {
+        if (page === "ellipsis") {
+          const prevPage = idx > 0 ? pageNumbers[idx - 1] : null;
+          const nextPage = idx < pageNumbers.length - 1 ? pageNumbers[idx + 1] : null;
           return /* @__PURE__ */ jsx9(
-            Button,
+            "span",
             {
-              variant: isActive ? "default" : "outline",
-              size: "icon",
-              className: "h-8 w-8",
-              onClick: () => onPageChange(pageNum - 1),
-              "aria-label": `${t("goToPage")} ${pageNum}`,
-              "aria-current": isActive ? "page" : void 0,
-              children: pageNum
+              className: "flex h-8 w-8 items-center justify-center text-muted-foreground",
+              "aria-hidden": "true",
+              children: "..."
             },
-            pageNum
+            `ellipsis-${prevPage}-${nextPage}`
           );
-        }),
-        /* @__PURE__ */ jsxs5(
+        }
+        const pageNum = page;
+        const isActive = pageNum === pageIndex + 1;
+        return /* @__PURE__ */ jsx9(
           Button,
           {
-            variant: "outline",
+            variant: isActive ? "default" : "outline",
             size: "icon",
             className: "h-8 w-8",
-            onClick: () => onPageChange(pageIndex + 1),
-            disabled: !canNextPage,
-            "aria-label": t("nextPage"),
-            children: [
-              /* @__PURE__ */ jsx9(IconChevronRight2, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("nextPage") })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs5(
-          Button,
-          {
-            variant: "outline",
-            size: "icon",
-            className: "hidden h-8 w-8 lg:flex",
-            onClick: () => onPageChange(pageCount - 1),
-            disabled: !canNextPage,
-            "aria-label": t("lastPage"),
-            children: [
-              /* @__PURE__ */ jsx9(IconChevronsRight, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("lastPage") })
-            ]
-          }
-        )
-      ] })
-    ] })
+            onClick: () => onPageChange(pageNum - 1),
+            "aria-label": `${t("goToPage")} ${pageNum}`,
+            "aria-current": isActive ? "page" : void 0,
+            children: pageNum
+          },
+          pageNum
+        );
+      }),
+      /* @__PURE__ */ jsxs6(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "h-8 w-8",
+          onClick: () => onPageChange(pageIndex + 1),
+          disabled: !canNextPage,
+          "aria-label": t("nextPage"),
+          children: [
+            /* @__PURE__ */ jsx9(IconChevronRight2, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("nextPage") })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs6(
+        Button,
+        {
+          variant: "outline",
+          size: "icon",
+          className: "hidden h-8 w-8 lg:flex",
+          onClick: () => onPageChange(pageCount - 1),
+          disabled: !canNextPage,
+          "aria-label": t("lastPage"),
+          children: [
+            /* @__PURE__ */ jsx9(IconChevronsRight, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("lastPage") })
+          ]
+        }
+      )
+    ] }) })
   ] });
 }
 
@@ -678,7 +687,7 @@ import { IconSettings } from "@tabler/icons-react";
 // src/components/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { IconCheck as IconCheck2, IconChevronRight as IconChevronRight3, IconCircle } from "@tabler/icons-react";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
@@ -706,7 +715,7 @@ function DropdownMenuContent({
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        "bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
         className
       ),
       ...props
@@ -719,7 +728,7 @@ function DropdownMenuCheckboxItem({
   checked,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     DropdownMenuPrimitive.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
@@ -769,12 +778,12 @@ function DropdownMenuSeparator({
 }
 
 // src/components/data-table/data-table-view-options.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function DataTableViewOptions({
   table
 }) {
-  return /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx11(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx11(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
       Button,
       {
         variant: "outline",
@@ -786,7 +795,7 @@ function DataTableViewOptions({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs7(DropdownMenuContent, { align: "end", className: "w-[150px]", children: [
+    /* @__PURE__ */ jsxs8(DropdownMenuContent, { align: "end", className: "w-[150px]", children: [
       /* @__PURE__ */ jsx11(DropdownMenuLabel, { children: "Toggle columns" }),
       /* @__PURE__ */ jsx11(DropdownMenuSeparator, {}),
       table.getAllColumns().filter(