@oneplatformdev/ui 0.0.1-beta.100

package/Combobox-Dfbnw0oF.js

@@ -0,0 +1,303 @@
+import { jsxs as s, jsx as e, Fragment as A } from "react/jsx-runtime";
+import f, { forwardRef as y, useState as V, useRef as W, useEffect as X, useCallback as g, useLayoutEffect as H } from "react";
+import { LoadingMask as J } from "./LoadingMask/LoadingMask.mjs";
+import "./LoadingMask/RenderLoadingMask.mjs";
+import { Popover as K, PopoverTrigger as Q, PopoverContent as Y } from "./Popover/Popover.mjs";
+import { Button as _ } from "./Button/Button.mjs";
+import "./Button/buttonVariants.mjs";
+import { CommandItem as Z, Command as $, CommandInput as ee, CommandList as te, CommandGroup as oe, CommandEmpty as F } from "./Command/Command.mjs";
+import { cn as p } from "@oneplatformdev/utils";
+import { useDebounceCallback as re } from "@oneplatformdev/hooks";
+import { Check as ae, ChevronDownIcon as ie, X as ne, ChevronsUpDown as le } from "lucide-react";
+import { Collapsible as se, CollapsibleTrigger as pe, CollapsibleContent as me } 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 "./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 "./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 ce = 8, I = y((n, l) => {
+  const { children: t, setOpen: m, option: o, onChangeOption: i, value: c = "", deep: a = 0 } = n;
+  return /* @__PURE__ */ s(
+    Z,
+    {
+      ref: l,
+      value: o.value,
+      onSelect: () => {
+        c === o.value ? i == null || i({ value: "", label: "" }) : i == null || i(o), m(!1);
+      },
+      style: {
+        paddingLeft: (a + 1) * ce
+      },
+      children: [
+        t,
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: p(
+              "overflow-hidden whitespace-wrap text-ellipsis line-clamp-2"
+            ),
+            children: o.label
+          }
+        ),
+        /* @__PURE__ */ e(
+          ae,
+          {
+            className: p(
+              "ml-auto",
+              c === o.value ? "opacity-100" : "opacity-0"
+            )
+          }
+        )
+      ]
+    },
+    o.value
+  );
+}), M = y((n, l) => {
+  var c;
+  const { option: t, deep: m = 0 } = n, [o, i] = V(!0);
+  return (c = t == null ? void 0 : t.items) != null && c.length ? /* @__PURE__ */ s(
+    se,
+    {
+      ref: l,
+      open: o,
+      onOpenChange: i,
+      "data-opened": o,
+      className: p("group/collapsible"),
+      children: [
+        /* @__PURE__ */ e(I, { ...n, children: /* @__PURE__ */ e(pe, { asChild: !0, children: /* @__PURE__ */ s(
+          _,
+          {
+            onClick: (a) => {
+              a == null || a.preventDefault(), a == null || a.stopPropagation(), i((d) => !d);
+            },
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: p("aspect-square size-6", "transition-transform"),
+            children: [
+              /* @__PURE__ */ e(
+                ie,
+                {
+                  className: p(
+                    "!size-5",
+                    "transition-transform",
+                    o && "rotate-180"
+                  )
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "sr-only", children: "Toggle" })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: t == null ? void 0 : t.items.map((a) => /* @__PURE__ */ e(
+          M,
+          {
+            ...n,
+            deep: m + 1,
+            option: a
+          },
+          a.value
+        )) }) })
+      ]
+    }
+  ) : /* @__PURE__ */ e(I, { ...n, ref: l });
+}), de = y((n, l) => {
+  const { options: t = [], ...m } = n;
+  return /* @__PURE__ */ e("div", { ref: l, className: "flex flex-col gap-0", children: t.map((o) => /* @__PURE__ */ e(M, { ...m, option: o }, o.value)) });
+}), St = y(
+  (n, l) => {
+    var j;
+    const {
+      value: t,
+      onChange: m,
+      placeholder: o,
+      disabled: i,
+      searchLabel: c = "Type to search...",
+      fetchOptions: a,
+      options: d,
+      emptyLabel: L = "No options",
+      emptyAction: b,
+      onMount: P
+    } = n, w = W(!1), [u, v] = f.useState(!1), [C, T] = f.useState(""), [N, x] = f.useState([]), [S, k] = f.useState(), [O, h] = f.useState(!1);
+    X(() => {
+      d != null && d.length && x(d);
+    }, [d]);
+    const R = async () => {
+      u || (E(), T(""));
+    }, E = g(async (r) => {
+      h(!0);
+      try {
+        const D = await a(r);
+        x(D);
+      } catch (D) {
+        console.error("Unexpected error while get option:", D);
+      } finally {
+        h(!1);
+      }
+    }, []), q = re(E, 1e3, {
+      leading: !1,
+      trailing: !0
+    }), B = g((r) => {
+      h(!0), T(r), q(r);
+    }, []), z = g((r) => {
+      m(r.value), k(r), h(!1);
+    }, []), G = g(() => {
+      z({ value: "", label: "" }), k(void 0), h(!1);
+    }, []), U = g(() => {
+      if (!P) {
+        w.current = !0;
+        return;
+      }
+      P({ setOptions: x, search: C || "", open: u, setOpen: v }).finally(
+        () => {
+          w.current = !0;
+        }
+      );
+    }, []);
+    return H(() => (U(), () => {
+      w.current = !1;
+    }), []), /* @__PURE__ */ e("div", { className: "w-full", ref: l, children: /* @__PURE__ */ s(
+      K,
+      {
+        open: u,
+        onOpenChange: (r) => {
+          v(r), r && R();
+        },
+        children: [
+          /* @__PURE__ */ e(Q, { asChild: !0, className: "border-input", children: /* @__PURE__ */ s(
+            _,
+            {
+              variant: "outline",
+              role: "combobox",
+              size: "lg",
+              "aria-expanded": u,
+              className: p(
+                "w-full justify-between font-normal text-sm bg-transparent relative p-3",
+                "border border-border",
+                u && "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 ? ((j = N.find((r) => r.value === t)) == null ? void 0 : j.label) || (S == null ? void 0 : S.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(), G();
+                    },
+                    children: /* @__PURE__ */ e(ne, {})
+                  }
+                ) : /* @__PURE__ */ e(le, { className: "opacity-50 w-4 h-4" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            Y,
+            {
+              className: "w-[var(--radix-popper-anchor-width)] max-w-none p-0",
+              align: "start",
+              children: /* @__PURE__ */ s($, { shouldFilter: !1, children: [
+                /* @__PURE__ */ e(
+                  ee,
+                  {
+                    placeholder: c,
+                    value: C,
+                    onValueChange: B
+                  }
+                ),
+                /* @__PURE__ */ e(te, { children: /* @__PURE__ */ s(
+                  oe,
+                  {
+                    className: p(!N.length && "p-0 shadow-none"),
+                    children: [
+                      O && /* @__PURE__ */ e(J, { fullWidth: !0 }),
+                      !O && !!C && /* @__PURE__ */ e(A, { children: b ? /* @__PURE__ */ s(F, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
+                        /* @__PURE__ */ e("span", { children: L }),
+                        typeof b == "function" ? b({
+                          setOptions: x,
+                          search: C || "",
+                          open: u,
+                          setOpen: v
+                        }) : b
+                      ] }) : /* @__PURE__ */ e(F, { children: L }) }),
+                      !O && /* @__PURE__ */ e(
+                        de,
+                        {
+                          value: t,
+                          options: N,
+                          onChangeOption: z,
+                          setOpen: v
+                        }
+                      )
+                    ]
+                  }
+                ) })
+              ] })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+export {
+  St as C,
+  I as a,
+  M as b,
+  de as c
+};

package/Command/Command.d.ts

@@ -0,0 +1,80 @@
+import { DialogProps } from '@radix-ui/react-dialog';
+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>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandDialog: ({ children, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/Command/Command.mjs

@@ -0,0 +1,116 @@
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import * as m from "react";
+import { Command as t } from "cmdk";
+import { Search as p } from "lucide-react";
+import { cn as r } from "@oneplatformdev/utils";
+import { Dialog as i, DialogContent as l } from "../Dialog/Dialog.mjs";
+const n = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ o(
+  t,
+  {
+    ref: d,
+    className: r(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      e
+    ),
+    ...a
+  }
+));
+n.displayName = t.displayName;
+const C = ({ children: e, ...a }) => /* @__PURE__ */ o(i, { ...a, children: /* @__PURE__ */ o(l, { className: "overflow-hidden p-0", children: /* @__PURE__ */ o(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__ */ o(p, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ o(
+    t.Input,
+    {
+      ref: d,
+      className: r(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        e
+      ),
+      ...a
+    }
+  )
+] }));
+c.displayName = t.Input.displayName;
+const u = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ o(
+  t.List,
+  {
+    ref: d,
+    className: r("max-h-[300px] overflow-y-auto overflow-x-hidden", e),
+    ...a
+  }
+));
+u.displayName = t.List.displayName;
+const f = m.forwardRef((e, a) => /* @__PURE__ */ o(
+  t.Empty,
+  {
+    ref: a,
+    className: "py-6 text-center text-sm",
+    ...e
+  }
+));
+f.displayName = t.Empty.displayName;
+const g = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ o(
+  t.Group,
+  {
+    ref: d,
+    className: r(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      e
+    ),
+    ...a
+  }
+));
+g.displayName = t.Group.displayName;
+const x = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ o(
+  t.Separator,
+  {
+    ref: d,
+    className: r("-mx-1 h-px bg-border", e),
+    ...a
+  }
+));
+x.displayName = t.Separator.displayName;
+const h = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ o(
+  t.Item,
+  {
+    ref: d,
+    className: r(
+      "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
+  }
+));
+h.displayName = t.Item.displayName;
+const y = ({
+  className: e,
+  ...a
+}) => /* @__PURE__ */ o(
+  "span",
+  {
+    className: r(
+      "ml-auto text-xs tracking-widest text-muted-foreground",
+      e
+    ),
+    ...a
+  }
+);
+y.displayName = "CommandShortcut";
+export {
+  n as Command,
+  C as CommandDialog,
+  f as CommandEmpty,
+  g as CommandGroup,
+  c as CommandInput,
+  h as CommandItem,
+  u as CommandList,
+  x as CommandSeparator,
+  y as CommandShortcut
+};

package/Command/index.d.ts

@@ -0,0 +1 @@
+export * from './Command';

package/Command/index.mjs

@@ -0,0 +1,12 @@
+import { Command as a, CommandDialog as n, CommandEmpty as d, CommandGroup as C, CommandInput as t, CommandItem as r, CommandList as p, CommandSeparator as e, CommandShortcut as u } from "./Command.mjs";
+export {
+  a as Command,
+  n as CommandDialog,
+  d as CommandEmpty,
+  C as CommandGroup,
+  t as CommandInput,
+  r as CommandItem,
+  p as CommandList,
+  e as CommandSeparator,
+  u as CommandShortcut
+};

package/Command/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/DataTable/DataTable.d.ts

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

package/DataTable/DataTable.mjs

@@ -0,0 +1,64 @@
+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 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(u, { align: "end", children: r.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ l(
+          C,
+          {
+            className: "capitalize",
+            checked: e.getIsVisible(),
+            onCheckedChange: (n) => e.toggleVisibility(!!n),
+            children: e.id
+          },
+          e.id
+        )) })
+      ] })
+    ] }),
+    /* @__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(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(d, { children: a(
+            n.column.columnDef.cell,
+            n.getContext()
+          ) }, n.id))
+        },
+        e.id
+      )) : /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(
+        d,
+        {
+          colSpan: r.getAllColumns().length,
+          className: "h-24 text-center",
+          children: m
+        }
+      ) }) })
+    ] }) })
+  ] });
+};
+export {
+  y as DataTable
+};

package/DataTable/DataTable.types.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Table as ReactTable } from '@tanstack/react-table';
+
+export interface DataTableProps {
+    table: ReactTable<any>;
+    ToolBar?: React.ReactNode;
+    /** Columns label*/
+    columnsLabel?: string;
+    /** No Result label*/
+    noResultLabel?: string;
+}

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/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataTable';
+export type * from './DataTable.types';

package/DataTable/index.mjs

@@ -0,0 +1,4 @@
+import { DataTable as o } from "./DataTable.mjs";
+export {
+  o as DataTable
+};

package/DataTable/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/DataTable/useDataTable.d.ts

@@ -0,0 +1,3 @@
+export declare const useDataTable: (data: any, columns: any) => {
+    table: import('@tanstack/react-table').Table<unknown>;
+};