@alexgorbatchev/shadcn 0.0.19 → 0.0.21

package/dist/components/calendar/index.js

@@ -1,10 +1,183 @@
 import"../../chunk-cp2m7y7v.js";
-import"../../chunk-73rkr9ct.js";
+import {
+  Button2
+} from "../../chunk-73rkr9ct.js";
 import {
   Calendar2,
   CalendarDayButton2
 } from "../../chunk-ttyqqw3y.js";
+import"../../chunk-e6hk39ev.js";
+import"../../chunk-j89xg1ak.js";
+import"../../chunk-aa7m22zj.js";
+import {
+  Popover2,
+  PopoverTrigger2,
+  PopoverContent2,
+  PopoverTitle2
+} from "../../chunk-4djw71cv.js";
+// src/components/calendar/DatePicker.tsx
+import { useState } from "react";
+import { CalendarIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function dateInputValue(date) {
+  return date ? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}` : "";
+}
+function DatePicker(props) {
+  const {
+    label,
+    value,
+    defaultValue,
+    onValueChange,
+    disabled,
+    name,
+    placeholder = "Choose date",
+    locale,
+    density,
+    calendarProps
+  } = props;
+  const [draft, setDraft] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const selected = Object.hasOwn(props, "value") ? value : draft;
+  const format = new Intl.DateTimeFormat(locale?.code ?? "en-US", { dateStyle: "medium" });
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs(Popover2, {
+        open,
+        onOpenChange: setOpen,
+        children: [
+          /* @__PURE__ */ jsxs(PopoverTrigger2, {
+            render: /* @__PURE__ */ jsx(Button2, {
+              variant: "outline",
+              density,
+              disabled
+            }),
+            "aria-label": label,
+            children: [
+              /* @__PURE__ */ jsx(CalendarIcon, {
+                "data-icon": "inline-start"
+              }),
+              selected ? format.format(selected) : placeholder
+            ]
+          }),
+          /* @__PURE__ */ jsxs(PopoverContent2, {
+            density,
+            align: "start",
+            children: [
+              /* @__PURE__ */ jsx(PopoverTitle2, {
+                className: "sr-only",
+                children: label
+              }),
+              /* @__PURE__ */ jsx(Calendar2, {
+                ...calendarProps,
+                density,
+                locale,
+                defaultMonth: selected ?? calendarProps?.defaultMonth,
+                mode: "single",
+                selected,
+                onSelect: (next) => {
+                  if (!Object.hasOwn(props, "value"))
+                    setDraft(next);
+                  onValueChange?.(next);
+                  setOpen(false);
+                },
+                autoFocus: true
+              })
+            ]
+          })
+        ]
+      }),
+      name && /* @__PURE__ */ jsx("input", {
+        type: "hidden",
+        disabled,
+        name,
+        value: dateInputValue(selected)
+      })
+    ]
+  });
+}
+function DateRangePicker(props) {
+  const {
+    label,
+    value,
+    defaultValue,
+    onValueChange,
+    disabled,
+    startName,
+    endName,
+    placeholder = "Choose dates",
+    locale,
+    density,
+    calendarProps
+  } = props;
+  const [draft, setDraft] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const selected = Object.hasOwn(props, "value") ? value : draft;
+  const format = new Intl.DateTimeFormat(locale?.code ?? "en-US", { dateStyle: "medium" });
+  const text = selected?.from ? selected.to ? format.formatRange(selected.from, selected.to) : format.format(selected.from) : placeholder;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs(Popover2, {
+        open,
+        onOpenChange: setOpen,
+        children: [
+          /* @__PURE__ */ jsxs(PopoverTrigger2, {
+            render: /* @__PURE__ */ jsx(Button2, {
+              variant: "outline",
+              density,
+              disabled
+            }),
+            "aria-label": label,
+            children: [
+              /* @__PURE__ */ jsx(CalendarIcon, {
+                "data-icon": "inline-start"
+              }),
+              text
+            ]
+          }),
+          /* @__PURE__ */ jsxs(PopoverContent2, {
+            density,
+            align: "start",
+            children: [
+              /* @__PURE__ */ jsx(PopoverTitle2, {
+                className: "sr-only",
+                children: label
+              }),
+              /* @__PURE__ */ jsx(Calendar2, {
+                ...calendarProps,
+                density,
+                locale,
+                defaultMonth: selected?.from ?? calendarProps?.defaultMonth,
+                mode: "range",
+                selected,
+                onSelect: (next) => {
+                  if (!Object.hasOwn(props, "value"))
+                    setDraft(next);
+                  onValueChange?.(next);
+                },
+                autoFocus: true
+              })
+            ]
+          })
+        ]
+      }),
+      startName && /* @__PURE__ */ jsx("input", {
+        type: "hidden",
+        disabled,
+        name: startName,
+        value: dateInputValue(selected?.from)
+      }),
+      endName && /* @__PURE__ */ jsx("input", {
+        type: "hidden",
+        disabled,
+        name: endName,
+        value: dateInputValue(selected?.to)
+      })
+    ]
+  });
+}
 export {
   Calendar2 as Calendar,
-  CalendarDayButton2 as CalendarDayButton
+  CalendarDayButton2 as CalendarDayButton,
+  DatePicker,
+  DateRangePicker
 };

package/dist/components/chart/AnalyticsChart.d.ts

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+type AnalyticsSeries = {
+    key: string;
+    label: string;
+    type?: "line" | "area" | "bar";
+    stackId?: string;
+};
+type AnalyticsChartProps = IDensityProps & {
+    label: string;
+    data: Record<string, string | number>[];
+    index: string;
+    series: readonly AnalyticsSeries[];
+    valueFormatter?: (value: number) => string;
+};
+declare function AnalyticsChart({ label, data, index, series, valueFormatter, density }: AnalyticsChartProps): ReactElement;
+type SparklineProps = IDensityProps & {
+    label: string;
+    values: readonly number[];
+    type?: "line" | "area" | "bar";
+};
+declare function Sparkline({ label, values, type, density }: SparklineProps): ReactElement;
+export { AnalyticsChart, Sparkline };
+export type { AnalyticsChartProps, AnalyticsSeries, SparklineProps };

package/dist/components/chart/index.d.ts

@@ -1,3 +1,5 @@
 export { Chart, ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, } from "./Chart.js";
 export type { ChartConfig, ChartProps, ChartTooltipContentProps, ChartLegendContentProps } from "./types.js";
 export { useChart } from "./hooks/useChart.js";
+export { AnalyticsChart, Sparkline } from "./AnalyticsChart.js";
+export type { AnalyticsChartProps, AnalyticsSeries, SparklineProps } from "./AnalyticsChart.js";

package/dist/components/chart/index.js

@@ -10,7 +10,94 @@ import {
 import"../../chunk-e6hk39ev.js";
 import"../../chunk-cp2m7y7v.js";
 import"../../chunk-jpvw9xqy.js";
+// src/components/chart/AnalyticsChart.tsx
+import { Area, Bar, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AnalyticsChart({ label, data, index, series, valueFormatter, density }) {
+  const config = Object.fromEntries(series.map((item, i) => [item.key, { label: item.label, color: `var(--chart-${i % 5 + 1})` }]));
+  return /* @__PURE__ */ jsx(Chart3, {
+    "aria-label": label,
+    density,
+    config,
+    className: "h-72 w-full aspect-auto",
+    children: /* @__PURE__ */ jsxs(ComposedChart, {
+      data,
+      accessibilityLayer: true,
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, {
+          vertical: false
+        }),
+        /* @__PURE__ */ jsx(XAxis, {
+          dataKey: index,
+          tickLine: false,
+          axisLine: false
+        }),
+        /* @__PURE__ */ jsx(YAxis, {
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: valueFormatter
+        }),
+        /* @__PURE__ */ jsx(ChartTooltip2, {
+          content: /* @__PURE__ */ jsx(ChartTooltipContent2, {})
+        }),
+        /* @__PURE__ */ jsx(ChartLegend2, {
+          content: /* @__PURE__ */ jsx(ChartLegendContent2, {})
+        }),
+        series.map((item) => item.type === "bar" ? /* @__PURE__ */ jsx(Bar, {
+          dataKey: item.key,
+          fill: config[item.key]?.color,
+          stackId: item.stackId,
+          isAnimationActive: false
+        }, item.key) : item.type === "area" ? /* @__PURE__ */ jsx(Area, {
+          dataKey: item.key,
+          stroke: config[item.key]?.color,
+          fill: config[item.key]?.color,
+          fillOpacity: 0.15,
+          stackId: item.stackId,
+          isAnimationActive: false
+        }, item.key) : /* @__PURE__ */ jsx(Line, {
+          dataKey: item.key,
+          stroke: config[item.key]?.color,
+          dot: false,
+          isAnimationActive: false
+        }, item.key))
+      ]
+    })
+  });
+}
+function Sparkline({ label, values, type = "line", density }) {
+  const data = values.map((value) => ({ value }));
+  const config = { value: { label, color: "var(--chart-1)" } };
+  return /* @__PURE__ */ jsx(Chart3, {
+    role: "img",
+    "aria-label": `${label}: ${values.join(", ")}`,
+    density,
+    config,
+    className: "h-12 w-32 aspect-auto",
+    children: /* @__PURE__ */ jsx(ComposedChart, {
+      data,
+      accessibilityLayer: false,
+      children: type === "bar" ? /* @__PURE__ */ jsx(Bar, {
+        dataKey: "value",
+        fill: "var(--chart-1)",
+        isAnimationActive: false
+      }) : type === "area" ? /* @__PURE__ */ jsx(Area, {
+        dataKey: "value",
+        stroke: "var(--chart-1)",
+        fill: "var(--chart-1)",
+        fillOpacity: 0.15,
+        isAnimationActive: false
+      }) : /* @__PURE__ */ jsx(Line, {
+        dataKey: "value",
+        stroke: "var(--chart-1)",
+        dot: false,
+        isAnimationActive: false
+      })
+    })
+  });
+}
 export {
+  AnalyticsChart,
   Chart3 as Chart,
   Chart3 as ChartContainer,
   ChartLegend2 as ChartLegend,
@@ -18,5 +105,6 @@ export {
   ChartStyle2 as ChartStyle,
   ChartTooltip2 as ChartTooltip,
   ChartTooltipContent2 as ChartTooltipContent,
+  Sparkline,
   useChart2 as useChart
 };

package/dist/components/color-picker/ColorPicker.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+type ColorPickerProps = IDensityProps & {
+    label: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (color: string) => void;
+    alpha?: boolean;
+    disabled?: boolean;
+    name?: string;
+};
+declare function ColorPicker(props: ColorPickerProps): ReactElement;
+export { ColorPicker };
+export type { ColorPickerProps };

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { ColorPicker } from "./ColorPicker.js";
+export type { ColorPickerProps } from "./ColorPicker.js";

package/dist/components/color-picker/index.js

@@ -0,0 +1,52 @@
+import {
+  cn2
+} from "../../chunk-cp2m7y7v.js";
+
+// src/components/color-picker/ColorPicker.tsx
+import { useState } from "react";
+import { HexAlphaColorPicker, HexColorInput, HexColorPicker } from "react-colorful";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ColorPicker(props) {
+  const { label, defaultValue = "#000000", onValueChange, alpha = false, disabled, name, density } = props;
+  const [local, setLocal] = useState(defaultValue);
+  const color = props.value ?? local;
+  const change = (next) => {
+    if (!Object.hasOwn(props, "value"))
+      setLocal(next);
+    onValueChange?.(next);
+  };
+  const Picker = alpha ? HexAlphaColorPicker : HexColorPicker;
+  return /* @__PURE__ */ jsxs("fieldset", {
+    "data-density": density,
+    disabled,
+    className: cn2("grid w-56 gap-3", disabled && "pointer-events-none opacity-50"),
+    children: [
+      /* @__PURE__ */ jsx("legend", {
+        className: "mb-2 text-sm font-medium",
+        children: label
+      }),
+      /* @__PURE__ */ jsx("div", {
+        inert: disabled,
+        children: /* @__PURE__ */ jsx(Picker, {
+          color,
+          onChange: change,
+          "aria-label": label,
+          className: "!h-48 !w-full [&_.react-colorful__saturation]:!rounded-t-sm [&_.react-colorful__last-control]:!rounded-b-sm"
+        })
+      }),
+      /* @__PURE__ */ jsx(HexColorInput, {
+        color,
+        onChange: change,
+        alpha,
+        prefixed: true,
+        "aria-label": `${label} hex`,
+        name,
+        disabled,
+        className: "h-control w-full rounded-sm border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      })
+    ]
+  });
+}
+export {
+  ColorPicker
+};

package/dist/components/command/index.js

@@ -1,8 +1,9 @@
 import"../../chunk-cp2m7y7v.js";
 import"../../chunk-e6hk39ev.js";
 import"../../chunk-j89xg1ak.js";
+import"../../chunk-aa7m22zj.js";
 import"../../chunk-73rkr9ct.js";
-import"../../chunk-717ggspf.js";
+import"../../chunk-70vndezn.js";
 import"../../chunk-59p19t57.js";
 import"../../chunk-hz9azhzx.js";
 import"../../chunk-1jeg5z55.js";
@@ -16,7 +17,7 @@ import {
   CommandSeparator2,
   CommandItem2,
   CommandShortcut2
-} from "../../chunk-waat2ksf.js";
+} from "../../chunk-ghmkxqn5.js";
 export {
   Command2 as Command,
   CommandDialog2 as CommandDialog,

package/dist/components/data-grid/DataGrid.d.ts

@@ -0,0 +1,44 @@
+import { type ReactTable, type RowData, type Column, type CellData } from "@tanstack/react-table";
+import type { ReactElement, ReactNode } from "react";
+import type { IDensityProps } from "../../density/types.js";
+declare const dataGridFeatures: {
+    columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    filterFns: {
+        includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    };
+    sortFns: {
+        alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    };
+};
+type DataGridTable<T extends RowData> = ReactTable<typeof dataGridFeatures, T>;
+type DataGridProps<T extends RowData> = IDensityProps & {
+    table: DataGridTable<T>;
+    label: string;
+    toolbar?: ReactNode;
+    empty?: ReactNode;
+    loading?: boolean;
+    pagination?: boolean;
+};
+declare function DataGrid<T extends RowData>({ table, label, toolbar, empty, loading, pagination, density, }: DataGridProps<T>): ReactElement;
+declare function DataGridColumnHeader<T extends RowData, V extends CellData>({ column, children, }: {
+    column: Column<typeof dataGridFeatures, T, V>;
+    children: ReactNode;
+}): ReactElement;
+declare function DataGridFilter<T extends RowData>({ table, columnId, label, }: {
+    table: DataGridTable<T>;
+    columnId: string;
+    label: string;
+}): ReactElement;
+declare function DataGridPagination<T extends RowData>({ table }: {
+    table: DataGridTable<T>;
+}): ReactElement;
+export { DataGrid, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures };
+export type { DataGridProps, DataGridTable };

package/dist/components/data-grid/index.d.ts

@@ -0,0 +1,2 @@
+export { DataGrid, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures } from "./DataGrid.js";
+export type { DataGridProps, DataGridTable } from "./DataGrid.js";

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

@@ -0,0 +1,228 @@
+import"../../chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "../../chunk-73rkr9ct.js";
+import {
+  Table2,
+  TableHeader2,
+  TableBody2,
+  TableRow2,
+  TableHead2,
+  TableCell2
+} from "../../chunk-0y0kqaqj.js";
+import {
+  NativeSelect2,
+  NativeSelectOption2
+} from "../../chunk-r9qrb6b6.js";
+import {
+  Input2
+} from "../../chunk-59p19t57.js";
+
+// src/components/data-grid/DataGrid.tsx
+import {
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  tableFeatures
+} from "@tanstack/react-table";
+import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var dataGridFeatures = tableFeatures({
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic }
+});
+function DataGrid({
+  table,
+  label,
+  toolbar,
+  empty = "No results.",
+  loading = false,
+  pagination = true,
+  density
+}) {
+  const rows = table.getRowModel().rows;
+  return /* @__PURE__ */ jsxs("div", {
+    "data-density": density,
+    "data-scroll": "none",
+    className: "grid min-w-0 gap-3",
+    "aria-busy": loading,
+    children: [
+      toolbar,
+      /* @__PURE__ */ jsx("div", {
+        className: "min-w-0 rounded-sm border border-border",
+        children: /* @__PURE__ */ jsxs(Table2, {
+          "aria-label": label,
+          children: [
+            /* @__PURE__ */ jsx(TableHeader2, {
+              children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx(TableRow2, {
+                children: group.headers.map((header) => /* @__PURE__ */ jsx(TableHead2, {
+                  colSpan: header.colSpan,
+                  "aria-sort": header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : undefined,
+                  children: header.isPlaceholder ? null : /* @__PURE__ */ jsx(table.FlexRender, {
+                    header
+                  })
+                }, header.id))
+              }, group.id))
+            }),
+            /* @__PURE__ */ jsx(TableBody2, {
+              children: loading ? /* @__PURE__ */ jsx(TableRow2, {
+                children: /* @__PURE__ */ jsx(TableCell2, {
+                  colSpan: table.getVisibleLeafColumns().length,
+                  children: /* @__PURE__ */ jsxs("p", {
+                    role: "status",
+                    children: [
+                      "Loading ",
+                      label,
+                      "…"
+                    ]
+                  })
+                })
+              }) : rows.length ? rows.map((row) => /* @__PURE__ */ jsx(TableRow2, {
+                "data-state": row.getIsSelected() ? "selected" : undefined,
+                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell2, {
+                  children: /* @__PURE__ */ jsx(table.FlexRender, {
+                    cell
+                  })
+                }, cell.id))
+              }, row.id)) : /* @__PURE__ */ jsx(TableRow2, {
+                children: /* @__PURE__ */ jsx(TableCell2, {
+                  colSpan: table.getVisibleLeafColumns().length,
+                  children: /* @__PURE__ */ jsx("p", {
+                    role: "status",
+                    children: empty
+                  })
+                })
+              })
+            })
+          ]
+        })
+      }),
+      pagination && /* @__PURE__ */ jsx(DataGridPagination, {
+        table
+      })
+    ]
+  });
+}
+function DataGridColumnHeader({
+  column,
+  children
+}) {
+  const sorted = column.getIsSorted();
+  return column.getCanSort() ? /* @__PURE__ */ jsxs(Button2, {
+    type: "button",
+    variant: "ghost",
+    size: "sm",
+    onClick: column.getToggleSortingHandler(),
+    children: [
+      children,
+      sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {
+        "aria-hidden": "true"
+      }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, {
+        "aria-hidden": "true"
+      }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, {
+        "aria-hidden": "true"
+      })
+    ]
+  }) : /* @__PURE__ */ jsx("span", {
+    children
+  });
+}
+function DataGridFilter({
+  table,
+  columnId,
+  label
+}) {
+  const column = table.getColumn(columnId);
+  if (!column)
+    throw new Error(`Unknown filter column: ${columnId}`);
+  const value = column.getFilterValue();
+  return /* @__PURE__ */ jsx(Input2, {
+    "aria-label": label,
+    placeholder: label,
+    value: typeof value === "string" ? value : "",
+    onChange: (event) => column.setFilterValue(event.target.value)
+  });
+}
+function DataGridPagination({ table }) {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex flex-wrap items-center justify-between gap-3 text-sm",
+    children: [
+      /* @__PURE__ */ jsxs("span", {
+        role: "status",
+        children: [
+          table.getSelectedRowModel().rows.length,
+          " selected · Page ",
+          table.state.pagination.pageIndex + 1,
+          " of",
+          " ",
+          Math.max(1, table.getPageCount())
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxs(NativeSelect2, {
+            "aria-label": "Rows per page",
+            value: table.state.pagination.pageSize,
+            onChange: (event) => table.setPageSize(Number(event.target.value)),
+            children: [
+              [10, 20, 50, 100].map((size) => /* @__PURE__ */ jsxs(NativeSelectOption2, {
+                value: size,
+                children: [
+                  size,
+                  " rows"
+                ]
+              }, size)),
+              ![10, 20, 50, 100].includes(table.state.pagination.pageSize) && /* @__PURE__ */ jsxs(NativeSelectOption2, {
+                value: table.state.pagination.pageSize,
+                children: [
+                  table.state.pagination.pageSize,
+                  " rows"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx(Button2, {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            disabled: !table.getCanPreviousPage(),
+            onClick: () => table.previousPage(),
+            children: "Previous"
+          }),
+          /* @__PURE__ */ jsx(Button2, {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            disabled: !table.getCanNextPage(),
+            onClick: () => table.nextPage(),
+            children: "Next"
+          })
+        ]
+      })
+    ]
+  });
+}
+export {
+  DataGrid,
+  DataGridColumnHeader,
+  DataGridFilter,
+  DataGridPagination,
+  dataGridFeatures
+};