@oneplatformdev/ui 0.0.1-beta.13 → 0.0.1-beta.130

package/Combobox/ComboboxOptionItem.mjs

@@ -0,0 +1,69 @@
+import "react/jsx-runtime";
+import "react";
+import "../Accordion/Accordion.mjs";
+import "../Alert/Alert.mjs";
+import "../AlertDialog/AlertDialogRoot.mjs";
+import "@oneplatformdev/utils";
+import "recharts";
+import "../Chart/Chart.mjs";
+import "../Sidebar/Sidebar.mjs";
+import "@radix-ui/react-aspect-ratio";
+import "../Avatar/Avatar.mjs";
+import "../Badge/badgeVariants.mjs";
+import "../Breadcrumb/Breadcrumb.mjs";
+import "../Button/Button.mjs";
+import "../Button/buttonVariants.mjs";
+import "../ButtonIcon/ButtonIcon.mjs";
+import "../ButtonIcon/buttonIconVariants.mjs";
+import "../Calendar/Calendar.mjs";
+import "../Card/Card.mjs";
+import "../Carousel/Carousel.mjs";
+import "../Checkbox/Checkbox.mjs";
+import "@radix-ui/react-collapsible";
+import { a as Co } from "../Combobox-CkGEIfTD.js";
+import "../Command/Command.mjs";
+import "../DropdownMenu/DropdownMenu.mjs";
+import "../Table/Table.mjs";
+import "@tanstack/react-table";
+import "lucide-react";
+import "../DatePicker/DatePicker.mjs";
+import "../Dialog/Dialog.mjs";
+import "../Dialog/DialogOverlayScope.mjs";
+import "../Drawer/Drawer.mjs";
+import "../Form/Form.mjs";
+import "../FormInput/FormInput.mjs";
+import "../Select/SelectRoot.mjs";
+import "../Textarea/Textarea.mjs";
+import "../Separator/Separator.mjs";
+import "../HoverCard/HoverCard.mjs";
+import "../Input/Input.mjs";
+import "../InputOTP/InputOTP.mjs";
+import "../Label/Label.mjs";
+import "../Label/labelVariants.mjs";
+import "../LoadingMask/RenderLoadingMask.mjs";
+import "../LoadedIcon/LoadedIcon.mjs";
+import "../LoadingProgress/loadingProgressVariants.mjs";
+import "../Menubar/Menubar.mjs";
+import "../NavigationMenu/NavigationMenu.mjs";
+import "../NavigationMenu/navigationMenuVariants.mjs";
+import "../Pagination/Pagination.mjs";
+import "../Popover/Popover.mjs";
+import "../Progress/Progress.mjs";
+import "../RadioGroup/RadioGroup.mjs";
+import "react-resizable-panels";
+import "../ScrollArea/ScrollArea.mjs";
+import "@oneplatformdev/hooks";
+import "../Sheet/Sheet.mjs";
+import "../Slider/Slider.mjs";
+import "next-themes";
+import "sonner";
+import "../Switch/Switch.mjs";
+import "../Tabs/TabsRoot.mjs";
+import "../Toast/Toast.mjs";
+import "../Toggle/Toggle.mjs";
+import "../ToggleGroup/ToggleGroup.mjs";
+import "../Tooltip/TooltipRoot.mjs";
+import "../Dropzone/Dropzone.mjs";
+export {
+  Co as ComboboxOptionItem
+};

package/Combobox/ComboboxOptions.d.ts

@@ -0,0 +1,4 @@
+import { IComboboxOptionsNodeProps, IComboboxOptionsProps } from './Combobox.types';
+
+export declare const ComboboxOptionsNode: import('react').ForwardRefExoticComponent<IComboboxOptionsNodeProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ComboboxOptions: import('react').ForwardRefExoticComponent<IComboboxOptionsProps & import('react').RefAttributes<HTMLDivElement>>;

package/Combobox/ComboboxOptions.mjs

@@ -0,0 +1,12 @@
+import "react/jsx-runtime";
+import "../Button/Button.mjs";
+import "../Button/buttonVariants.mjs";
+import "react";
+import "../Collapsible/Collapsible.mjs";
+import { c as a, b as e } from "../Combobox-CkGEIfTD.js";
+import "lucide-react";
+import "@oneplatformdev/utils";
+export {
+  a as ComboboxOptions,
+  e as ComboboxOptionsNode
+};

package/Combobox/index.mjs

@@ -1,4 +1,4 @@
-import { Combobox as m } from "./Combobox.mjs";
+import { C as m } from "../Combobox-CkGEIfTD.js";
 export {
   m as Combobox
 };

package/Combobox-CkGEIfTD.js

@@ -0,0 +1,325 @@
+import { jsxs as c, jsx as e, Fragment as G } from "react/jsx-runtime";
+import { forwardRef as S, useState as v, useRef as Y, useEffect as Z, useCallback as x, useMemo as I, useLayoutEffect as $ } from "react";
+import { LoadingMask as ee } from "./LoadingMask/LoadingMask.mjs";
+import "./LoadingMask/RenderLoadingMask.mjs";
+import { Popover as te, PopoverTrigger as oe, PopoverContent as re } from "./Popover/Popover.mjs";
+import { Button as _ } from "./Button/Button.mjs";
+import "./Button/buttonVariants.mjs";
+import { CommandItem as H, Command as ne, CommandInput as ie, CommandList as ae, CommandGroup as le, CommandEmpty as R } from "./Command/Command.mjs";
+import { cn as p } from "@oneplatformdev/utils";
+import { useDebounceCallback as se } from "@oneplatformdev/hooks";
+import { Check as ce, ChevronDownIcon as me, X as pe, ChevronsUpDown as de } from "lucide-react";
+import { Collapsible as ue, CollapsibleTrigger as he, CollapsibleContent as fe } from "./Collapsible/Collapsible.mjs";
+import "./Accordion/Accordion.mjs";
+import "./Alert/Alert.mjs";
+import "./AlertDialog/AlertDialogRoot.mjs";
+import "recharts";
+import "./Chart/Chart.mjs";
+import "./Sidebar/Sidebar.mjs";
+import "@radix-ui/react-aspect-ratio";
+import "./Avatar/Avatar.mjs";
+import "./Badge/badgeVariants.mjs";
+import "./Breadcrumb/Breadcrumb.mjs";
+import "./ButtonIcon/ButtonIcon.mjs";
+import "./ButtonIcon/buttonIconVariants.mjs";
+import "./Calendar/Calendar.mjs";
+import "./Card/Card.mjs";
+import "./Carousel/Carousel.mjs";
+import "./Checkbox/Checkbox.mjs";
+import "@radix-ui/react-collapsible";
+import "./DropdownMenu/DropdownMenu.mjs";
+import "./Table/Table.mjs";
+import "@tanstack/react-table";
+import "./DatePicker/DatePicker.mjs";
+import "./Dialog/Dialog.mjs";
+import "./Dialog/DialogOverlayScope.mjs";
+import "./Drawer/Drawer.mjs";
+import "./Form/Form.mjs";
+import "./FormInput/FormInput.mjs";
+import "./Select/SelectRoot.mjs";
+import "./Textarea/Textarea.mjs";
+import "./Separator/Separator.mjs";
+import "./HoverCard/HoverCard.mjs";
+import "./Input/Input.mjs";
+import "./InputOTP/InputOTP.mjs";
+import "./Label/Label.mjs";
+import "./Label/labelVariants.mjs";
+import "./LoadedIcon/LoadedIcon.mjs";
+import "./LoadingProgress/loadingProgressVariants.mjs";
+import "./Menubar/Menubar.mjs";
+import "./NavigationMenu/NavigationMenu.mjs";
+import "./NavigationMenu/navigationMenuVariants.mjs";
+import "./Pagination/Pagination.mjs";
+import "./Progress/Progress.mjs";
+import "./RadioGroup/RadioGroup.mjs";
+import "react-resizable-panels";
+import "./ScrollArea/ScrollArea.mjs";
+import "./Sheet/Sheet.mjs";
+import "./Slider/Slider.mjs";
+import "next-themes";
+import "sonner";
+import "./Switch/Switch.mjs";
+import "./Tabs/TabsRoot.mjs";
+import "./Toast/Toast.mjs";
+import "./Toggle/Toggle.mjs";
+import "./ToggleGroup/ToggleGroup.mjs";
+import "./Tooltip/TooltipRoot.mjs";
+import "./Dropzone/Dropzone.mjs";
+const ge = 8, U = S((a, m) => {
+  const { children: t, setOpen: d, option: o, onChangeOption: i, value: u = "", deep: n = 0 } = a;
+  return /* @__PURE__ */ c(
+    H,
+    {
+      ref: m,
+      value: o.value,
+      onSelect: () => {
+        u === o.value ? i == null || i({ value: "", label: "" }) : i == null || i(o), d(!1);
+      },
+      style: {
+        paddingLeft: (n + 1) * ge
+      },
+      children: [
+        t,
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: p(
+              "overflow-hidden whitespace-wrap text-ellipsis line-clamp-2"
+            ),
+            children: o.label
+          }
+        ),
+        /* @__PURE__ */ e(
+          ce,
+          {
+            className: p(
+              "ml-auto",
+              u === o.value ? "opacity-100" : "opacity-0"
+            )
+          }
+        )
+      ]
+    },
+    o.value
+  );
+}), V = S((a, m) => {
+  var u;
+  const { option: t, deep: d = 0 } = a, [o, i] = v(!0);
+  return (u = t == null ? void 0 : t.items) != null && u.length ? /* @__PURE__ */ c(
+    ue,
+    {
+      ref: m,
+      open: o,
+      onOpenChange: i,
+      "data-opened": o,
+      className: p("group/collapsible"),
+      children: [
+        /* @__PURE__ */ e(U, { ...a, children: /* @__PURE__ */ e(he, { asChild: !0, children: /* @__PURE__ */ c(
+          _,
+          {
+            onClick: (n) => {
+              n == null || n.preventDefault(), n == null || n.stopPropagation(), i((h) => !h);
+            },
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: p("aspect-square size-6", "transition-transform"),
+            children: [
+              /* @__PURE__ */ e(
+                me,
+                {
+                  className: p(
+                    "!size-5",
+                    "transition-transform",
+                    o && "rotate-180"
+                  )
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "sr-only", children: "Toggle" })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ e(fe, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: t == null ? void 0 : t.items.map((n) => /* @__PURE__ */ e(
+          V,
+          {
+            ...a,
+            deep: d + 1,
+            option: n
+          },
+          n.value
+        )) }) })
+      ]
+    }
+  ) : /* @__PURE__ */ e(U, { ...a, ref: m });
+}), be = S((a, m) => {
+  const { options: t = [], ...d } = a;
+  return /* @__PURE__ */ e("div", { ref: m, className: "flex flex-col gap-0", children: t.map((o) => /* @__PURE__ */ e(V, { ...d, option: o }, o.value)) });
+}), Tt = S(
+  (a, m) => {
+    var q;
+    const {
+      value: t,
+      onChange: d,
+      placeholder: o,
+      disabled: i,
+      searchLabel: u = "Type to search...",
+      fetchOptions: n,
+      options: h,
+      emptyLabel: M = "No options",
+      emptyAction: w,
+      commandInputAction: L,
+      listHeadAction: N,
+      onMount: O
+    } = a, E = Y(!1), [g, P] = v(!1), [f, k] = v(""), [l, D] = v([]), [C, T] = v(), [s, b] = v(!1);
+    Z(() => {
+      h != null && h.length && D(h);
+    }, [h]);
+    const W = async () => {
+      g || (j(), k(""));
+    }, j = x(async (r) => {
+      b(!0);
+      try {
+        const z = await n(r);
+        D(z);
+      } catch (z) {
+        console.error("Unexpected error while get option:", z);
+      } finally {
+        b(!1);
+      }
+    }, []), X = se(j, 1e3, {
+      leading: !1,
+      trailing: !0
+    }), J = x((r) => {
+      b(!0), k(r), X(r);
+    }, []), B = x((r) => {
+      d(r.value), T(r), b(!1);
+    }, []), K = x(() => {
+      B({ value: "", label: "" }), T(void 0), b(!1);
+    }, []), F = I(() => !!f && !l.length && !s, [s, l.length, f]), A = I(() => !l.length && !s, [s, l.length, f]), y = I(() => ({
+      options: l,
+      setOptions: D,
+      selectedOption: C,
+      setSelectedOption: T,
+      search: f || "",
+      setSearch: k,
+      open: g,
+      setOpen: P,
+      loading: s,
+      setLoading: b,
+      isEmptyList: A,
+      isSearchedEmptyList: F
+    }), [s, g, l, f, C, A, F]), Q = x(() => {
+      if (!O) {
+        E.current = !0;
+        return;
+      }
+      O(y).finally(() => {
+        E.current = !0;
+      });
+    }, [y, O]);
+    return $(() => (Q(), () => {
+      E.current = !1;
+    }), []), /* @__PURE__ */ e("div", { className: "w-full", ref: m, children: /* @__PURE__ */ c(
+      te,
+      {
+        open: g,
+        onOpenChange: (r) => {
+          P(r), r && W();
+        },
+        children: [
+          /* @__PURE__ */ e(oe, { asChild: !0, className: "border-input", children: /* @__PURE__ */ c(
+            _,
+            {
+              variant: "outline",
+              role: "combobox",
+              size: "lg",
+              "aria-expanded": g,
+              className: p(
+                "w-full justify-between font-normal text-sm bg-transparent relative p-3",
+                "border border-border",
+                g && "border-2 outline-none ring-1 ring-ring",
+                "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              ),
+              disabled: i,
+              children: [
+                /* @__PURE__ */ e("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: t ? ((q = l.find((r) => r.value === t)) == null ? void 0 : q.label) || (C == null ? void 0 : C.label) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: o }) }),
+                t ? /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: p(
+                      "absolute top-0 right-1",
+                      "flex items-center justify-center",
+                      "w-9 aspect-square [&_svg]:size-5",
+                      "opacity-50 cursor-pointer hover:opacity-100"
+                    ),
+                    onClick: (r) => {
+                      r.stopPropagation(), K();
+                    },
+                    children: /* @__PURE__ */ e(pe, {})
+                  }
+                ) : /* @__PURE__ */ e(de, { className: "opacity-50 w-4 h-4" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            re,
+            {
+              className: "w-[var(--radix-popper-anchor-width)] max-w-none p-0",
+              align: "start",
+              children: /* @__PURE__ */ c(ne, { shouldFilter: !1, children: [
+                /* @__PURE__ */ e(
+                  ie,
+                  {
+                    placeholder: u,
+                    value: f,
+                    onValueChange: J
+                  }
+                ),
+                typeof L == "function" ? L(y) : L,
+                /* @__PURE__ */ e(ae, { children: /* @__PURE__ */ c(
+                  le,
+                  {
+                    className: p(!l.length && "p-0 shadow-none"),
+                    children: [
+                      s && /* @__PURE__ */ e(ee, { fullWidth: !0 }),
+                      !s && !!f && /* @__PURE__ */ e(G, { children: w ? /* @__PURE__ */ c(R, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
+                        /* @__PURE__ */ e("span", { children: M }),
+                        typeof w == "function" ? w(y) : w
+                      ] }) : /* @__PURE__ */ e(R, { children: M }) }),
+                      !s && /* @__PURE__ */ c(G, { children: [
+                        !!l.length && N && /* @__PURE__ */ e(
+                          H,
+                          {
+                            asChild: !0,
+                            className: "w-full",
+                            children: typeof N == "function" ? N(y) : N
+                          },
+                          "combobox-list-head-action"
+                        ),
+                        /* @__PURE__ */ e(
+                          be,
+                          {
+                            value: t,
+                            options: l,
+                            onChangeOption: B,
+                            setOpen: P
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ) })
+              ] })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+export {
+  Tt as C,
+  U as a,
+  V as b,
+  be as c
+};

package/Command/Command.d.ts

@@ -1,5 +1,5 @@
 import { DialogProps } from '@radix-ui/react-dialog';
-import * as React from "react";
+import * as React from 'react';
 declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {

package/Command/Command.mjs

@@ -1,9 +1,10 @@
 import { jsx as t, jsxs as s } from "react/jsx-runtime";
 import * as m from "react";
 import { Command as o } from "cmdk";
-import { Search as p } from "lucide-react";
+import { SearchIcon as p } from "lucide-react";
 import { cn as r } from "@oneplatformdev/utils";
-import { Dialog as i, DialogContent as c } from "../Dialog/Dialog.mjs";
+import { Dialog as i, DialogContent as l } from "../Dialog/Dialog.mjs";
+import "../Dialog/DialogOverlayScope.mjs";
 const n = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ t(
   o,
   {
@@ -16,7 +17,7 @@ const n = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ t(
   }
 ));
 n.displayName = o.displayName;
-const C = ({ children: e, ...a }) => /* @__PURE__ */ t(i, { ...a, children: /* @__PURE__ */ t(c, { className: "overflow-hidden p-0", children: /* @__PURE__ */ t(n, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: e }) }) }), l = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ s("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+const b = ({ children: e, ...a }) => /* @__PURE__ */ t(i, { ...a, children: /* @__PURE__ */ t(l, { className: "overflow-hidden p-0", children: /* @__PURE__ */ t(n, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: e }) }) }), c = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ s("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ t(p, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ t(
     o.Input,
@@ -30,7 +31,7 @@ const C = ({ children: e, ...a }) => /* @__PURE__ */ t(i, { ...a, children: /* @
     }
   )
 ] }));
-l.displayName = o.Input.displayName;
+c.displayName = o.Input.displayName;
 const u = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ t(
   o.List,
   {
@@ -75,7 +76,14 @@ const h = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ t(
   {
     ref: d,
     className: r(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex gap-2 select-none items-center rounded-sm",
+      "min-h-8 px-2 py-1",
+      "[&>span]:py-1",
+      "text-sm text-[#666A78] font-medium leading-[1.12]",
+      "data-[selected=true]:bg-accent",
+      "data-[selected=true]:text-[#191F35] hover:text-[#191F35]",
+      "outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "cursor-pointer",
       e
     ),
     ...a
@@ -98,10 +106,10 @@ const y = ({
 y.displayName = "CommandShortcut";
 export {
   n as Command,
-  C as CommandDialog,
+  b as CommandDialog,
   f as CommandEmpty,
   g as CommandGroup,
-  l as CommandInput,
+  c as CommandInput,
   h as CommandItem,
   u as CommandList,
   x as CommandSeparator,

package/DataTable/DataTable.d.ts

@@ -1,4 +1,11 @@
-import { DataTableProps } from './DataTable.types';
-import { FC } from 'react';
+import { default as React, FC } from 'react';
+import { Table as ReactTable } from '@tanstack/react-table';
 
-export declare const DataTable: FC<DataTableProps>;
+interface IProps {
+    table: ReactTable<any>;
+    ToolBar?: React.ReactNode;
+    tColumns?: string;
+    tNoResults?: string;
+}
+export declare const DataTable: FC<IProps>;
+export {};

package/DataTable/DataTable.mjs

@@ -1,28 +1,28 @@
-import { jsxs as r, jsx as l } from "react/jsx-runtime";
-import { flexRender as d } from "@tanstack/react-table";
-import { ChevronDown as u } from "lucide-react";
-import { Button as p } from "../Button/Button.mjs";
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import { Button as h } from "../Button/Button.mjs";
 import "../Button/buttonVariants.mjs";
-import { DropdownMenu as g, DropdownMenuTrigger as b, DropdownMenuContent as C, DropdownMenuCheckboxItem as f } from "../DropdownMenu/DropdownMenu.mjs";
-import { Table as w, TableHeader as x, TableRow as o, TableHead as T, TableBody as D, TableCell as a } from "../Table/Table.mjs";
-const B = (s) => {
-  var i;
-  const {
-    table: t,
-    ToolBar: c,
-    columnsLabel: m = "Columns",
-    noResultLabel: h = "No results"
-  } = s;
-  return /* @__PURE__ */ r("div", { className: "w-full", children: [
-    /* @__PURE__ */ r("div", { className: "flex items-center py-4", children: [
-      c,
-      /* @__PURE__ */ r(g, { children: [
-        /* @__PURE__ */ l(b, { asChild: !0, children: /* @__PURE__ */ r(p, { variant: "outline", className: "ml-auto", children: [
-          m,
-          /* @__PURE__ */ l(u, { className: "ml-2 h-4 w-4" })
+import { DropdownMenu as p, DropdownMenuTrigger as g, DropdownMenuContent as u, DropdownMenuCheckboxItem as C } from "../DropdownMenu/DropdownMenu.mjs";
+import { Table as f, TableHeader as w, TableRow as t, TableHead as x, TableBody as b, TableCell as d } from "../Table/Table.mjs";
+import { flexRender as a } from "@tanstack/react-table";
+import { ChevronDown as D } from "lucide-react";
+const y = ({
+  table: r,
+  ToolBar: s,
+  tColumns: c = "Columns",
+  tNoResults: m = "No results"
+}) => {
+  var o;
+  return /* @__PURE__ */ i("div", { className: "w-full", children: [
+    /* @__PURE__ */ i("div", { className: "flex items-center py-4", children: [
+      s,
+      /* @__PURE__ */ i(p, { children: [
+        /* @__PURE__ */ l(g, { asChild: !0, children: /* @__PURE__ */ i(h, { variant: "outline", className: "ml-auto", children: [
+          c,
+          " ",
+          /* @__PURE__ */ l(D, { className: "ml-2 h-4 w-4" })
         ] }) }),
-        /* @__PURE__ */ l(C, { align: "end", children: t.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ l(
-          f,
+        /* @__PURE__ */ l(u, { align: "end", children: r.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ l(
+          C,
           {
             className: "capitalize",
             checked: e.getIsVisible(),
@@ -33,32 +33,32 @@ const B = (s) => {
         )) })
       ] })
     ] }),
-    /* @__PURE__ */ l("div", { className: "rounded-md border", children: /* @__PURE__ */ r(w, { children: [
-      /* @__PURE__ */ l(x, { children: t.getHeaderGroups().map((e) => /* @__PURE__ */ l(o, { children: e.headers.map((n) => /* @__PURE__ */ l(T, { children: n.isPlaceholder ? null : d(
+    /* @__PURE__ */ l("div", { className: "rounded-md border", children: /* @__PURE__ */ i(f, { children: [
+      /* @__PURE__ */ l(w, { children: r.getHeaderGroups().map((e) => /* @__PURE__ */ l(t, { children: e.headers.map((n) => /* @__PURE__ */ l(x, { children: n.isPlaceholder ? null : a(
         n.column.columnDef.header,
         n.getContext()
       ) }, n.id)) }, e.id)) }),
-      /* @__PURE__ */ l(D, { children: (i = t.getRowModel().rows) != null && i.length ? t.getRowModel().rows.map((e) => /* @__PURE__ */ l(
-        o,
+      /* @__PURE__ */ l(b, { children: (o = r.getRowModel().rows) != null && o.length ? r.getRowModel().rows.map((e) => /* @__PURE__ */ l(
+        t,
         {
           "data-state": e.getIsSelected() && "selected",
-          children: e.getVisibleCells().map((n) => /* @__PURE__ */ l(a, { children: d(
+          children: e.getVisibleCells().map((n) => /* @__PURE__ */ l(d, { children: a(
             n.column.columnDef.cell,
             n.getContext()
           ) }, n.id))
         },
         e.id
-      )) : /* @__PURE__ */ l(o, { children: /* @__PURE__ */ l(
-        a,
+      )) : /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(
+        d,
         {
-          colSpan: t.getAllColumns().length,
+          colSpan: r.getAllColumns().length,
           className: "h-24 text-center",
-          children: h
+          children: m
         }
       ) }) })
     ] }) })
   ] });
 };
 export {
-  B as DataTable
+  y as DataTable
 };

package/DataTable/DataTableColumnFilter.d.ts

@@ -0,0 +1,4 @@
+import { DataTableProps } from './DataTable.types';
+import { FC } from 'react';
+
+export declare const DataTableColumnFilter: FC<DataTableProps>;

package/DataTable/DataTableColumnFilter.mjs

@@ -0,0 +1,31 @@
+import { jsx as n, jsxs as t } from "react/jsx-runtime";
+import { ChevronDown as m } from "lucide-react";
+import { useMemo as s } from "react";
+import { Button as d } from "../Button/Button.mjs";
+import "../Button/buttonVariants.mjs";
+import { DropdownMenuCheckboxItem as c, DropdownMenu as u, DropdownMenuTrigger as h, DropdownMenuContent as p } from "../DropdownMenu/DropdownMenu.mjs";
+const x = (i) => {
+  const {
+    table: r,
+    columnsLabel: l = "Columns"
+  } = i, o = s(() => r.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ n(
+    c,
+    {
+      className: "capitalize",
+      checked: e.getIsVisible(),
+      onCheckedChange: (a) => e.toggleVisibility(!!a),
+      children: e.id
+    },
+    e.id
+  )), [r]);
+  return o.length ? /* @__PURE__ */ t(u, { children: [
+    /* @__PURE__ */ n(h, { asChild: !0, children: /* @__PURE__ */ t(d, { variant: "outline", className: "ml-auto", children: [
+      l,
+      /* @__PURE__ */ n(m, { className: "ml-2 h-4 w-4" })
+    ] }) }),
+    /* @__PURE__ */ n(p, { align: "end", children: o })
+  ] }) : null;
+};
+export {
+  x as DataTableColumnFilter
+};

package/DatePicker/DatePicker.mjs

@@ -669,7 +669,7 @@ const J = (t, e, n) => {
           disabled: i,
           variant: "outline",
           className: C(
-            "w-full justify-start text-left font-normal border-blue-300",
+            "w-full justify-start text-left font-normal border h-10",
             !n && "text-muted-foreground"
           ),
           children: [
@@ -678,7 +678,7 @@ const J = (t, e, n) => {
           ]
         }
       ) }),
-      /* @__PURE__ */ d(L, { align: "start", className: " w-auto p-0", children: /* @__PURE__ */ d(
+      /* @__PURE__ */ d(L, { align: "start", className: "w-auto p-0", children: /* @__PURE__ */ d(
         O,
         {
           mode: "single",