@demokit-ui/demokit 0.1.0

package/dist/kit/components/data-display/badge/badge.js

@@ -0,0 +1,203 @@
+import { jsx as n } from "react/jsx-runtime";
+import { cn as i } from "../../../../lib/utils.js";
+import { cva as o } from "class-variance-authority";
+import { Slot as c } from "radix-ui";
+const u = o(
+  "inline-flex items-center justify-center border border-transparent font-medium focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 [&_svg]:-ms-px [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground",
+        secondary: "bg-secondary text-secondary-foreground",
+        success: "bg-success text-success-foreground",
+        warning: "bg-warning text-warning-foreground",
+        info: "bg-info text-info-foreground",
+        outline: "bg-transparent border border-border text-secondary-foreground",
+        destructive: "bg-destructive text-destructive-foreground"
+      },
+      appearance: {
+        default: "",
+        light: "",
+        outline: "",
+        ghost: "border-transparent bg-transparent"
+      },
+      disabled: {
+        true: "opacity-50 pointer-events-none"
+      },
+      size: {
+        lg: "rounded-md px-[0.5rem] h-7 min-w-7 gap-1.5 text-xs [&_svg]:size-3.5",
+        md: "rounded-md px-[0.45rem] h-6 min-w-6 gap-1.5 text-xs [&_svg]:size-3.5 ",
+        sm: "rounded-sm px-[0.325rem] h-5 min-w-5 gap-1 text-[0.6875rem] leading-[0.75rem] [&_svg]:size-3",
+        xs: "rounded-sm px-[0.25rem] h-4 min-w-4 gap-1 text-[0.625rem] leading-[0.5rem] [&_svg]:size-3"
+      },
+      shape: {
+        default: "",
+        circle: "rounded-full"
+      }
+    },
+    compoundVariants: [
+      /* Light */
+      {
+        variant: "primary",
+        appearance: "light",
+        className: "bg-primary-light text-primary"
+      },
+      {
+        variant: "secondary",
+        appearance: "light",
+        className: "bg-secondary text-secondary-foreground"
+      },
+      {
+        variant: "success",
+        appearance: "light",
+        className: "bg-success-light text-success"
+      },
+      {
+        variant: "warning",
+        appearance: "light",
+        className: "bg-warning-light text-warning"
+      },
+      {
+        variant: "info",
+        appearance: "light",
+        className: "bg-info-light text-info"
+      },
+      {
+        variant: "destructive",
+        appearance: "light",
+        className: "bg-destructive-light text-destructive"
+      },
+      /* Outline */
+      {
+        variant: "primary",
+        appearance: "outline",
+        className: "border-primary/20 bg-primary-light text-primary"
+      },
+      {
+        variant: "success",
+        appearance: "outline",
+        className: "border-success/20 bg-success-light text-success"
+      },
+      {
+        variant: "warning",
+        appearance: "outline",
+        className: "border-warning/20 bg-warning-light text-warning"
+      },
+      {
+        variant: "info",
+        appearance: "outline",
+        className: "border-info/20 bg-info-light text-info"
+      },
+      {
+        variant: "destructive",
+        appearance: "outline",
+        className: "border-destructive/20 bg-destructive-light text-destructive"
+      },
+      /* Ghost */
+      {
+        variant: "primary",
+        appearance: "ghost",
+        className: "text-primary"
+      },
+      {
+        variant: "secondary",
+        appearance: "ghost",
+        className: "text-secondary-foreground"
+      },
+      {
+        variant: "success",
+        appearance: "ghost",
+        className: "text-success"
+      },
+      {
+        variant: "warning",
+        appearance: "ghost",
+        className: "text-warning"
+      },
+      {
+        variant: "info",
+        appearance: "ghost",
+        className: "text-info"
+      },
+      {
+        variant: "destructive",
+        appearance: "ghost",
+        className: "text-destructive"
+      },
+      { size: "lg", appearance: "ghost", className: "px-0" },
+      { size: "md", appearance: "ghost", className: "px-0" },
+      { size: "sm", appearance: "ghost", className: "px-0" },
+      { size: "xs", appearance: "ghost", className: "px-0" }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      appearance: "default",
+      size: "md"
+    }
+  }
+), m = o(
+  "cursor-pointer transition-all inline-flex items-center justify-center leading-none size-3.5 [&>svg]:opacity-100! [&>svg]:size-3.5 p-0 rounded-md -me-0.5 opacity-60 hover:opacity-100",
+  {
+    variants: {
+      variant: {
+        default: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function h({
+  className: a,
+  variant: e,
+  size: t,
+  appearance: r,
+  shape: s,
+  asChild: g = !1,
+  disabled: p,
+  ...d
+}) {
+  const l = g ? c.Slot : "span";
+  return /* @__PURE__ */ n(
+    l,
+    {
+      "data-slot": "badge",
+      className: i(u({ variant: e, size: t, appearance: r, shape: s, disabled: p }), a),
+      ...d
+    }
+  );
+}
+function y({
+  className: a,
+  variant: e,
+  asChild: t = !1,
+  ...r
+}) {
+  const s = t ? c.Slot : "span";
+  return /* @__PURE__ */ n(
+    s,
+    {
+      "data-slot": "badge-button",
+      className: i(m({ variant: e, className: a })),
+      role: "button",
+      ...r
+    }
+  );
+}
+function N({ className: a, ...e }) {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      "data-slot": "badge-dot",
+      className: i("size-1.5 rounded-full bg-[currentColor] opacity-75", a),
+      ...e
+    }
+  );
+}
+export {
+  h as Badge,
+  y as BadgeButton,
+  N as BadgeDot,
+  u as badgeVariants
+};

package/dist/kit/components/data-display/card/card.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const cardVariants: (props?: ({
+    variant?: "default" | "accent" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Card({ className, variant, ...props }: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function CardTable({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function CardHeading({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function CardToolbar({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardTable, CardTitle, CardToolbar };

package/dist/kit/components/data-display/card/card.js

@@ -0,0 +1,119 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as c from "react";
+import { cn as e } from "../../../../lib/utils.js";
+import { cva as n } from "class-variance-authority";
+const i = c.createContext({
+  variant: "default"
+  // Default value
+}), o = () => {
+  const a = c.useContext(i);
+  if (!a)
+    throw new Error("useCardContext must be used within a Card component");
+  return a;
+}, s = n("flex flex-col items-stretch rounded-[var(--dk-radius-card)] text-card-foreground", {
+  variants: {
+    variant: {
+      default: "bg-card border border-border shadow-xs black/5",
+      accent: "bg-muted shadow-xs p-1"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), l = n(
+  "flex min-h-[var(--dk-card-header-height)] flex-wrap items-center justify-between gap-[var(--dk-control-gap)] px-[var(--dk-card-padding-x)]",
+  {
+    variants: {
+      variant: {
+        default: "border-b border-border",
+        accent: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), u = n("grow p-[var(--dk-card-padding)]", {
+  variants: {
+    variant: {
+      default: "",
+      accent: "rounded-t-[var(--dk-radius-card)] bg-card [&:last-child]:rounded-b-[var(--dk-radius-card)]"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), f = n("grid grow", {
+  variants: {
+    variant: {
+      default: "",
+      accent: "rounded-[var(--dk-radius-card)] bg-card"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), v = n("flex min-h-[var(--dk-card-header-height)] items-center px-[var(--dk-card-padding-x)]", {
+  variants: {
+    variant: {
+      default: "border-t border-border",
+      accent: "mt-[2px] rounded-b-[var(--dk-radius-card)] bg-card"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function g({
+  className: a,
+  variant: r = "default",
+  ...d
+}) {
+  return /* @__PURE__ */ t(i.Provider, { value: { variant: r || "default" }, children: /* @__PURE__ */ t("div", { "data-slot": "card", className: e(s({ variant: r }), a), ...d }) });
+}
+function p({ className: a, ...r }) {
+  const { variant: d } = o();
+  return /* @__PURE__ */ t("div", { "data-slot": "card-header", className: e(l({ variant: d }), a), ...r });
+}
+function C({ className: a, ...r }) {
+  const { variant: d } = o();
+  return /* @__PURE__ */ t("div", { "data-slot": "card-content", className: e(u({ variant: d }), a), ...r });
+}
+function h({ className: a, ...r }) {
+  const { variant: d } = o();
+  return /* @__PURE__ */ t("div", { "data-slot": "card-table", className: e(f({ variant: d }), a), ...r });
+}
+function k({ className: a, ...r }) {
+  const { variant: d } = o();
+  return /* @__PURE__ */ t("div", { "data-slot": "card-footer", className: e(v({ variant: d }), a), ...r });
+}
+function V({ className: a, ...r }) {
+  return /* @__PURE__ */ t("div", { "data-slot": "card-heading", className: e("space-y-1", a), ...r });
+}
+function w({ className: a, ...r }) {
+  return /* @__PURE__ */ t("div", { "data-slot": "card-toolbar", className: e("flex items-center gap-[var(--dk-control-gap)]", a), ...r });
+}
+function N({ className: a, ...r }) {
+  return /* @__PURE__ */ t(
+    "h3",
+    {
+      "data-slot": "card-title",
+      className: e("text-base font-semibold leading-none tracking-tight", a),
+      ...r
+    }
+  );
+}
+function T({ className: a, ...r }) {
+  return /* @__PURE__ */ t("div", { "data-slot": "card-description", className: e("text-sm text-muted-foreground", a), ...r });
+}
+export {
+  g as Card,
+  C as CardContent,
+  T as CardDescription,
+  k as CardFooter,
+  p as CardHeader,
+  V as CardHeading,
+  h as CardTable,
+  N as CardTitle,
+  w as CardToolbar
+};

package/dist/kit/components/data-display/data-grid/data-grid-column-filter.d.ts

@@ -0,0 +1,15 @@
+import { Column } from '@tanstack/react-table';
+import * as React from 'react';
+interface DataGridColumnFilterProps<TData, TValue> {
+    column?: Column<TData, TValue>;
+    title?: string;
+    options: {
+        label: string;
+        value: string;
+        icon?: React.ComponentType<{
+            className?: string;
+        }>;
+    }[];
+}
+declare function DataGridColumnFilter<TData, TValue>({ column, title, options }: DataGridColumnFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export { DataGridColumnFilter, type DataGridColumnFilterProps };

package/dist/kit/components/data-display/data-grid/data-grid-column-filter.js

@@ -0,0 +1,74 @@
+import { jsxs as l, jsx as e, Fragment as o } from "react/jsx-runtime";
+import { cn as u } from "../../../../lib/utils.js";
+import { Badge as s } from "../badge/badge.js";
+import { Button as p } from "../../form/button/button.js";
+import { Command as v, CommandInput as x, CommandList as g, CommandEmpty as C, CommandGroup as h, CommandItem as f, CommandSeparator as N } from "../../form/command/command.js";
+import { Popover as y, PopoverTrigger as z, PopoverContent as b } from "../../feedback/popover/popover.js";
+import { Separator as w } from "../../layout/separator/separator.js";
+import { CirclePlus as F, Check as S } from "lucide-react";
+function A({ column: t, title: n, options: i }) {
+  const m = t?.getFacetedUniqueValues(), a = new Set(t?.getFilterValue());
+  return /* @__PURE__ */ l(y, { children: [
+    /* @__PURE__ */ e(z, { asChild: !0, children: /* @__PURE__ */ l(p, { variant: "outline", size: "sm", children: [
+      /* @__PURE__ */ e(F, { className: "size-4" }),
+      n,
+      a?.size > 0 && /* @__PURE__ */ l(o, { children: [
+        /* @__PURE__ */ e(w, { orientation: "vertical", className: "mx-2 h-4" }),
+        /* @__PURE__ */ e(s, { variant: "secondary", className: "rounded-sm px-1 font-normal lg:hidden", children: a.size }),
+        /* @__PURE__ */ e("div", { className: "hidden space-x-1 lg:flex", children: a.size > 2 ? /* @__PURE__ */ l(s, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: [
+          a.size,
+          " selected"
+        ] }) : i.filter((r) => a.has(r.value)).map((r) => /* @__PURE__ */ e(s, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: r.label }, r.value)) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e(b, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ l(v, { children: [
+      /* @__PURE__ */ e(x, { placeholder: n }),
+      /* @__PURE__ */ l(g, { children: [
+        /* @__PURE__ */ e(C, { children: "No results found." }),
+        /* @__PURE__ */ e(h, { children: i.map((r) => {
+          const d = a.has(r.value);
+          return /* @__PURE__ */ l(
+            f,
+            {
+              onSelect: () => {
+                d ? a.delete(r.value) : a.add(r.value);
+                const c = Array.from(a);
+                t?.setFilterValue(c.length ? c : void 0);
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: u(
+                      "me-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                      d ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    ),
+                    children: /* @__PURE__ */ e(S, { className: u("h-4 w-4") })
+                  }
+                ),
+                r.icon && /* @__PURE__ */ e(r.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ e("span", { children: r.label }),
+                m?.get(r.value) && /* @__PURE__ */ e("span", { className: "ms-auto flex h-4 w-4 items-center justify-center font-mono text-xs", children: m.get(r.value) })
+              ]
+            },
+            r.value
+          );
+        }) }),
+        a.size > 0 && /* @__PURE__ */ l(o, { children: [
+          /* @__PURE__ */ e(N, {}),
+          /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(
+            f,
+            {
+              onSelect: () => t?.setFilterValue(void 0),
+              className: "justify-center text-center",
+              children: "Clear filters"
+            }
+          ) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  A as DataGridColumnFilter
+};

package/dist/kit/components/data-display/data-grid/data-grid-column-header.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { Column } from '@tanstack/react-table';
+interface DataGridColumnHeaderProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {
+    column: Column<TData, TValue>;
+    title?: string;
+    icon?: ReactNode;
+    pinnable?: boolean;
+    filter?: ReactNode;
+    visibility?: boolean;
+}
+declare function DataGridColumnHeader<TData, TValue>({ column, title, icon, className, filter, visibility, }: DataGridColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export { DataGridColumnHeader, type DataGridColumnHeaderProps };

package/dist/kit/components/data-display/data-grid/data-grid-column-header.js

@@ -0,0 +1,171 @@
+import { jsx as t, jsxs as n, Fragment as C } from "react/jsx-runtime";
+import { cn as x } from "../../../../lib/utils.js";
+import { Button as y } from "../../form/button/button.js";
+import { useDataGrid as k } from "./data-grid.js";
+import { DropdownMenu as O, DropdownMenuTrigger as A, DropdownMenuContent as R, DropdownMenuLabel as T, DropdownMenuSeparator as f, DropdownMenuItem as l, DropdownMenuSub as V, DropdownMenuSubTrigger as U, DropdownMenuPortal as j, DropdownMenuSubContent as B, DropdownMenuCheckboxItem as F } from "../../feedback/dropdown-menu/dropdown-menu.js";
+import { ArrowUp as z, Check as m, ArrowDown as P, ArrowLeftToLine as G, ArrowRightToLine as H, ArrowLeft as _, ArrowRight as $, Settings2 as q, ChevronsUpDown as E, PinOff as J } from "lucide-react";
+function ee({
+  column: e,
+  title: h = "",
+  icon: p,
+  className: b,
+  filter: d,
+  visibility: c = !1
+}) {
+  const { isLoading: I, table: g, props: s, recordCount: D } = k(), S = (r) => {
+    const a = [...g.getState().columnOrder], i = a.indexOf(e.id);
+    if (r === "left" && i > 0) {
+      const o = [...a], [u] = o.splice(i, 1);
+      o.splice(i - 1, 0, u), g.setColumnOrder(o);
+    }
+    if (r === "right" && i < a.length - 1) {
+      const o = [...a], [u] = o.splice(i, 1);
+      o.splice(i + 1, 0, u), g.setColumnOrder(o);
+    }
+  }, w = (r) => {
+    const a = g.getState().columnOrder, i = a.indexOf(e.id);
+    return r === "left" ? i > 0 : i < a.length - 1;
+  }, L = () => /* @__PURE__ */ n(
+    "div",
+    {
+      className: x(
+        "text-accent-foreground font-normal inline-flex h-full items-center gap-1.5 text-[0.8125rem] leading-[calc(1.125/0.8125)] [&_svg]:size-3.5 [&_svg]:opacity-60",
+        b
+      ),
+      children: [
+        p && p,
+        h
+      ]
+    }
+  ), N = () => /* @__PURE__ */ n(
+    y,
+    {
+      variant: "ghost",
+      className: x(
+        "text-secondary-foreground rounded-md font-normal -ms-2 px-2 h-7 hover:bg-secondary data-[state=open]:bg-secondary hover:text-foreground data-[state=open]:text-foreground",
+        b
+      ),
+      disabled: I || D === 0,
+      onClick: () => {
+        const r = e.getIsSorted();
+        r === "asc" ? e.toggleSorting(!0) : r === "desc" ? e.clearSorting() : e.toggleSorting(!1);
+      },
+      children: [
+        p && p,
+        h,
+        e.getCanSort() && (e.getIsSorted() === "desc" ? /* @__PURE__ */ t(P, { className: "size-[0.7rem]! mt-px" }) : e.getIsSorted() === "asc" ? /* @__PURE__ */ t(z, { className: "size-[0.7rem]! mt-px" }) : /* @__PURE__ */ t(E, { className: "size-[0.7rem]! mt-px" }))
+      ]
+    }
+  ), M = () => /* @__PURE__ */ t(
+    y,
+    {
+      mode: "icon",
+      size: "sm",
+      variant: "ghost",
+      className: "-me-1 size-7 rounded-md",
+      onClick: () => e.pin(!1),
+      "aria-label": `Unpin ${h} column`,
+      title: `Unpin ${h} column`,
+      children: /* @__PURE__ */ t(J, { className: "size-3.5! opacity-50!", "aria-hidden": "true" })
+    }
+  ), v = () => /* @__PURE__ */ n("div", { className: "flex items-center h-full gap-1.5 justify-between", children: [
+    /* @__PURE__ */ n(O, { children: [
+      /* @__PURE__ */ t(A, { asChild: !0, children: N() }),
+      /* @__PURE__ */ n(R, { className: "w-40", align: "start", children: [
+        d && /* @__PURE__ */ t(T, { children: d }),
+        d && (e.getCanSort() || e.getCanPin() || c) && /* @__PURE__ */ t(f, {}),
+        e.getCanSort() && /* @__PURE__ */ n(C, { children: [
+          /* @__PURE__ */ n(
+            l,
+            {
+              onClick: () => {
+                e.getIsSorted() === "asc" ? e.clearSorting() : e.toggleSorting(!1);
+              },
+              disabled: !e.getCanSort(),
+              children: [
+                /* @__PURE__ */ t(z, { className: "size-3.5!" }),
+                /* @__PURE__ */ t("span", { className: "grow", children: "Asc" }),
+                e.getIsSorted() === "asc" && /* @__PURE__ */ t(m, { className: "size-4 opacity-100! text-primary" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ n(
+            l,
+            {
+              onClick: () => {
+                e.getIsSorted() === "desc" ? e.clearSorting() : e.toggleSorting(!0);
+              },
+              disabled: !e.getCanSort(),
+              children: [
+                /* @__PURE__ */ t(P, { className: "size-3.5!" }),
+                /* @__PURE__ */ t("span", { className: "grow", children: "Desc" }),
+                e.getIsSorted() === "desc" && /* @__PURE__ */ t(m, { className: "size-4 opacity-100! text-primary" })
+              ]
+            }
+          )
+        ] }),
+        (d || e.getCanSort()) && (e.getCanSort() || e.getCanPin() || c) && /* @__PURE__ */ t(f, {}),
+        s.tableLayout?.columnsPinnable && e.getCanPin() && /* @__PURE__ */ n(C, { children: [
+          /* @__PURE__ */ n(l, { onClick: () => e.pin(e.getIsPinned() === "left" ? !1 : "left"), children: [
+            /* @__PURE__ */ t(G, { className: "size-3.5!", "aria-hidden": "true" }),
+            /* @__PURE__ */ t("span", { className: "grow", children: "Pin to left" }),
+            e.getIsPinned() === "left" && /* @__PURE__ */ t(m, { className: "size-4 opacity-100! text-primary" })
+          ] }),
+          /* @__PURE__ */ n(l, { onClick: () => e.pin(e.getIsPinned() === "right" ? !1 : "right"), children: [
+            /* @__PURE__ */ t(H, { className: "size-3.5!", "aria-hidden": "true" }),
+            /* @__PURE__ */ t("span", { className: "grow", children: "Pin to right" }),
+            e.getIsPinned() === "right" && /* @__PURE__ */ t(m, { className: "size-4 opacity-100! text-primary" })
+          ] })
+        ] }),
+        s.tableLayout?.columnsMovable && /* @__PURE__ */ n(C, { children: [
+          /* @__PURE__ */ t(f, {}),
+          /* @__PURE__ */ n(
+            l,
+            {
+              onClick: () => S("left"),
+              disabled: !w("left") || e.getIsPinned() !== !1,
+              children: [
+                /* @__PURE__ */ t(_, { className: "size-3.5!", "aria-hidden": "true" }),
+                /* @__PURE__ */ t("span", { children: "Move to Left" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ n(
+            l,
+            {
+              onClick: () => S("right"),
+              disabled: !w("right") || e.getIsPinned() !== !1,
+              children: [
+                /* @__PURE__ */ t($, { className: "size-3.5!", "aria-hidden": "true" }),
+                /* @__PURE__ */ t("span", { children: "Move to Right" })
+              ]
+            }
+          )
+        ] }),
+        s.tableLayout?.columnsVisibility && c && (e.getCanSort() || e.getCanPin() || d) && /* @__PURE__ */ t(f, {}),
+        s.tableLayout?.columnsVisibility && c && /* @__PURE__ */ n(V, { children: [
+          /* @__PURE__ */ n(U, { children: [
+            /* @__PURE__ */ t(q, { className: "size-3.5!" }),
+            /* @__PURE__ */ t("span", { children: "Columns" })
+          ] }),
+          /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(B, { children: g.getAllColumns().filter((r) => typeof r.accessorFn < "u" && r.getCanHide()).map((r) => /* @__PURE__ */ t(
+            F,
+            {
+              checked: r.getIsVisible(),
+              onSelect: (a) => a.preventDefault(),
+              onCheckedChange: (a) => r.toggleVisibility(!!a),
+              className: "capitalize",
+              children: r.columnDef.meta?.headerTitle || r.id
+            },
+            r.id
+          )) }) })
+        ] })
+      ] })
+    ] }),
+    s.tableLayout?.columnsPinnable && e.getCanPin() && e.getIsPinned() && M()
+  ] });
+  return s.tableLayout?.columnsMovable || s.tableLayout?.columnsVisibility && c || s.tableLayout?.columnsPinnable && e.getCanPin() || d ? v() : e.getCanSort() || s.tableLayout?.columnsResizable && e.getCanResize() ? /* @__PURE__ */ t("div", { className: "flex items-center h-full", children: N() }) : L();
+}
+export {
+  ee as DataGridColumnHeader
+};

package/dist/kit/components/data-display/data-grid/data-grid-column-visibility.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { Table } from '@tanstack/react-table';
+declare function DataGridColumnVisibility<TData>({ table, trigger }: {
+    table: Table<TData>;
+    trigger: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { DataGridColumnVisibility };

package/dist/kit/components/data-display/data-grid/data-grid-column-visibility.js

@@ -0,0 +1,24 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { DropdownMenu as d, DropdownMenuTrigger as l, DropdownMenuContent as a, DropdownMenuLabel as s, DropdownMenuCheckboxItem as c } from "../../feedback/dropdown-menu/dropdown-menu.js";
+function g({ table: t, trigger: o }) {
+  return /* @__PURE__ */ r(d, { children: [
+    /* @__PURE__ */ n(l, { asChild: !0, children: o }),
+    /* @__PURE__ */ r(a, { align: "end", className: "min-w-[150px]", children: [
+      /* @__PURE__ */ n(s, { className: "font-medium", children: "Toggle Columns" }),
+      t.getAllColumns().filter((e) => typeof e.accessorFn < "u" && e.getCanHide()).map((e) => /* @__PURE__ */ n(
+        c,
+        {
+          className: "capitalize",
+          checked: e.getIsVisible(),
+          onSelect: (i) => i.preventDefault(),
+          onCheckedChange: (i) => e.toggleVisibility(!!i),
+          children: e.columnDef.meta?.headerTitle || e.id
+        },
+        e.id
+      ))
+    ] })
+  ] });
+}
+export {
+  g as DataGridColumnVisibility
+};

package/dist/kit/components/data-display/data-grid/data-grid-pagination.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+interface DataGridPaginationProps {
+    sizes?: number[];
+    sizesInfo?: string;
+    sizesLabel?: string;
+    sizesDescription?: string;
+    sizesSkeleton?: ReactNode;
+    more?: boolean;
+    moreLimit?: number;
+    info?: string;
+    infoSkeleton?: ReactNode;
+    className?: string;
+}
+declare function DataGridPagination(props: DataGridPaginationProps): import("react/jsx-runtime").JSX.Element;
+export { DataGridPagination, type DataGridPaginationProps };