@jakubmazanec/ui 0.1.0-unstable.081bdf1

package/build/components/DataTable.js

@@ -0,0 +1,383 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import { arrayMove, horizontalListSortingStrategy, SortableContext } from "@dnd-kit/sortable";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useCallback, useId, useState } from "react";
+import { z } from "zod";
+import { Button } from "./Button.js";
+import { DataTableHeader } from "./data-table/DataTableHeader.js";
+import { DataTablePageButton } from "./data-table/DataTablePageButton.js";
+import {
+  DEFAULT_PAGE_SIZE,
+  MAX_PAGE_BUTTONS_COUNT,
+  PAGE_SIZES
+} from "./data-table/internals/constants.js";
+import { getCommonPinningClasses } from "./data-table/internals/getCommonPinningClasses.js";
+import { getCommonPinningStyles } from "./data-table/internals/getCommonPinningStyles.js";
+import { Icon } from "./Icon.js";
+import { Input } from "./Input.js";
+import { Listbox } from "./Listbox.js";
+import { ListboxOption } from "./ListboxOption.js";
+import { Table } from "./Table.js";
+import { TableBody } from "./TableBody.js";
+import { TableCell } from "./TableCell.js";
+import { TableFoot } from "./TableFoot.js";
+import { TableHead } from "./TableHead.js";
+import { TableHeader } from "./TableHeader.js";
+import { TableRow } from "./TableRow.js";
+export const dataTablePaginationSchema = z.object({
+  /** Page number, starts with 1. */
+  page: z.number(),
+  pageSize: z.union([
+    z.literal(PAGE_SIZES[0]),
+    z.literal(PAGE_SIZES[1]),
+    z.literal(PAGE_SIZES[2]),
+    z.literal(PAGE_SIZES[3]),
+    z.literal(PAGE_SIZES[4])
+  ]),
+  pageCount: z.number()
+});
+export const dataTableSortingSchema = z.union([
+  z.literal(false),
+  z.object({
+    column: z.string(),
+    direction: z.enum(["ascending", "descending"])
+  })
+]);
+export const dataTableFiltersSchema = z.union([
+  z.literal(false),
+  z.object({
+    column: z.string(),
+    filter: z.union([
+      z.string(),
+      z.number(),
+      z.boolean(),
+      z.tuple([z.number().nullable().optional(), z.number().nullable().optional()])
+    ])
+  }).array()
+]);
+export const dataTableFacetingSchema = z.record(
+  z.string(),
+  z.object({
+    values: z.unknown().array().optional(),
+    min: z.unknown().optional(),
+    max: z.unknown().optional()
+  })
+);
+export function DataTable({
+  data,
+  columns,
+  pagination: controlledPagination,
+  onPagination,
+  sorting: controlledSorting,
+  onSorting,
+  filters: controlledFilters,
+  onFiltering,
+  faceting
+}) {
+  let [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: DEFAULT_PAGE_SIZE
+  });
+  let [columnVisibility, setColumnVisibility] = useState({});
+  let [columnOrder, setColumnOrder] = useState(
+    columns.map((column) => {
+      if (column.id) {
+        return column.id;
+      }
+      if ("accessorKey" in column) {
+        return String(column.accessorKey);
+      }
+      if (typeof column.header === "string") {
+        return String(column.header);
+      }
+      return "";
+    })
+  );
+  let [columnPinning, setColumnPinning] = useState({});
+  let [sorting, setSorting] = useState([]);
+  let [columnFilters, setColumnFilters] = useState([]);
+  let table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: onPagination ? void 0 : getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    // getFacetedRowModel: onPagination ? undefined : getFacetedRowModel(),
+    // getFacetedUniqueValues: onPagination ? undefined : getFacetedUniqueValues(),
+    // getFacetedMinMaxValues: onPagination ? undefined : getFacetedMinMaxValues(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getFacetedMinMaxValues: getFacetedMinMaxValues(),
+    state: {
+      pagination: onPagination ? void 0 : pagination,
+      columnVisibility,
+      columnOrder,
+      columnPinning,
+      sorting: onSorting ? void 0 : sorting,
+      columnFilters: onFiltering ? void 0 : columnFilters
+    },
+    onPaginationChange: onPagination ? void 0 : setPagination,
+    onColumnVisibilityChange: setColumnVisibility,
+    onColumnOrderChange: setColumnOrder,
+    onColumnPinningChange: setColumnPinning,
+    onSortingChange: onSorting ? void 0 : setSorting,
+    onColumnFiltersChange: onFiltering ? void 0 : setColumnFilters,
+    columnResizeMode: "onChange"
+  });
+  let handleDragEnd = useCallback(({ active, over }) => {
+    if (over && active.id !== over.id) {
+      setColumnOrder((previousColumnOrder) => {
+        let oldIndex = previousColumnOrder.indexOf(active.id);
+        let newIndex = previousColumnOrder.indexOf(over.id);
+        return arrayMove(previousColumnOrder, oldIndex, newIndex);
+      });
+    }
+  }, []);
+  let sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    useSensor(KeyboardSensor, {})
+  );
+  let page = onPagination && controlledPagination ? controlledPagination.page : table.getState().pagination.pageIndex + 1;
+  let pageSize = onPagination && controlledPagination ? controlledPagination.pageSize : table.getState().pagination.pageSize;
+  let pageCount = onPagination && controlledPagination ? controlledPagination.pageCount : table.getPageCount();
+  let isFirstPage = page === 1;
+  let isLastPage = page >= pageCount;
+  let handlePageClick = useCallback(
+    (page2) => {
+      if (onPagination && controlledPagination) {
+        onPagination({
+          page: Math.max(1, Math.min(page2, pageCount))
+        });
+      } else {
+        table.setPageIndex(Math.max(0, Math.min(page2 - 1, pageCount)));
+      }
+    },
+    [controlledPagination, onPagination, pageCount, table]
+  );
+  let handleFirstPageClick = useCallback(() => {
+    if (onPagination && controlledPagination) {
+      onPagination({
+        page: 1
+      });
+    } else {
+      table.firstPage();
+    }
+  }, [controlledPagination, onPagination, table]);
+  let handleLastPageClick = useCallback(() => {
+    if (onPagination && controlledPagination) {
+      onPagination({
+        page: pageCount
+      });
+    } else {
+      table.lastPage();
+    }
+  }, [controlledPagination, onPagination, pageCount, table]);
+  let handlePreviousPageClick = useCallback(() => {
+    if (onPagination && controlledPagination) {
+      onPagination({
+        page: Math.max(1, Math.min(page - 1, pageCount))
+      });
+    } else {
+      table.previousPage();
+    }
+  }, [controlledPagination, onPagination, page, pageCount, table]);
+  let handleNextPageClick = useCallback(() => {
+    if (onPagination && controlledPagination) {
+      onPagination({
+        page: Math.max(1, Math.min(page + 1, pageCount))
+      });
+    } else {
+      table.nextPage();
+    }
+  }, [controlledPagination, onPagination, page, pageCount, table]);
+  let handlePageChange = useCallback(
+    (event) => {
+      let pageIndex = event.target.value ? Number(event.target.value) - 1 : 0;
+      if (onPagination && controlledPagination) {
+        onPagination({
+          page: Math.max(1, Math.min(pageIndex + 1, pageCount))
+        });
+      } else {
+        table.setPageIndex(pageIndex);
+      }
+    },
+    [controlledPagination, onPagination, pageCount, table]
+  );
+  let handlePageSizeChange = useCallback(
+    (pageSize2) => {
+      if (onPagination && controlledPagination) {
+        onPagination({
+          pageSize: Number(pageSize2)
+        });
+      } else {
+        table.setPageSize(Number(pageSize2));
+      }
+    },
+    [controlledPagination, onPagination, table]
+  );
+  let id = useId();
+  console.log("DataTable...", "controlledFilters", controlledFilters);
+  console.log("faceting", faceting);
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      id,
+      collisionDetection: closestCenter,
+      modifiers: [restrictToHorizontalAxis],
+      sensors,
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Table,
+          {
+            style: {
+              width: table.getCenterTotalSize(),
+              tableLayout: "fixed"
+            },
+            children: [
+              /* @__PURE__ */ jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+                DataTableHeader,
+                {
+                  header,
+                  table,
+                  sorting: controlledSorting,
+                  onSorting,
+                  filters: controlledFilters,
+                  onFiltering,
+                  faceting
+                },
+                header.id
+              )) }) }, headerGroup.id)) }),
+              /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  className: getCommonPinningClasses(cell.column),
+                  style: { ...getCommonPinningStyles(cell.column) },
+                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                },
+                cell.id
+              )) }, row.id)) }),
+              /* @__PURE__ */ jsx(TableFoot, { children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx(TableRow, { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHeader, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext()) }, header.id)) }, footerGroup.id)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-4 text-sm justify-center", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                "aria-label": "First page",
+                disabled: isFirstPage,
+                onClick: handleFirstPageClick,
+                children: /* @__PURE__ */ jsx(Icon, { name: "ChevronDoubleLeft" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                "aria-label": "Previous page",
+                disabled: isFirstPage,
+                onClick: handlePreviousPageClick,
+                children: /* @__PURE__ */ jsx(Icon, { name: "ChevronLeft" })
+              }
+            ),
+            pageCount <= MAX_PAGE_BUTTONS_COUNT ? Array.from({ length: pageCount }).map((_, index) => /* @__PURE__ */ jsx(
+              DataTablePageButton,
+              {
+                page: index + 1,
+                isSelected: page === index + 1,
+                onClick: handlePageClick
+              },
+              index
+            )) : null,
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                "aria-label": "Next page",
+                disabled: isLastPage,
+                onClick: handleNextPageClick,
+                children: /* @__PURE__ */ jsx(Icon, { name: "ChevronRight" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                "aria-label": "Last page",
+                disabled: isLastPage,
+                onClick: handleLastPageClick,
+                children: /* @__PURE__ */ jsx(Icon, { name: "ChevronDoubleRight" })
+              }
+            )
+          ] }),
+          pageCount > MAX_PAGE_BUTTONS_COUNT ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+            "Page ",
+            page,
+            " of ",
+            pageCount
+          ] }) : null,
+          pageCount > MAX_PAGE_BUTTONS_COUNT ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+            "Go to page:",
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "text",
+                pattern: "[0-9]*",
+                defaultValue: page,
+                className: "w-12",
+                onChange: handlePageChange
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            Listbox,
+            {
+              value: String(pageSize),
+              className: "w-auto min-w-min",
+              onChange: handlePageSizeChange,
+              children: PAGE_SIZES.map((pageSize2) => /* @__PURE__ */ jsxs(ListboxOption, { value: String(pageSize2), children: [
+                "Show ",
+                pageSize2
+              ] }, pageSize2))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+//# sourceMappingURL=DataTable.js.map

package/build/components/DataTable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/DataTable.tsx"],
+  "sourcesContent": ["import {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {restrictToHorizontalAxis} from '@dnd-kit/modifiers';\nimport {arrayMove, horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type RowData,\n  type SortingState,\n  useReactTable,\n} from '@tanstack/react-table';\nimport {type ChangeEvent, useCallback, useId, useState} from 'react';\nimport {z} from 'zod';\n\nimport {Button} from './Button.js';\nimport {DataTableHeader} from './data-table/DataTableHeader.js';\nimport {DataTablePageButton} from './data-table/DataTablePageButton.js';\nimport {\n  DEFAULT_PAGE_SIZE,\n  MAX_PAGE_BUTTONS_COUNT,\n  PAGE_SIZES,\n} from './data-table/internals/constants.js';\nimport {getCommonPinningClasses} from './data-table/internals/getCommonPinningClasses.js';\nimport {getCommonPinningStyles} from './data-table/internals/getCommonPinningStyles.js';\nimport {Icon} from './Icon.js';\nimport {Input} from './Input.js';\nimport {Listbox} from './Listbox.js';\nimport {ListboxOption} from './ListboxOption.js';\nimport {Table} from './Table.js';\nimport {TableBody} from './TableBody.js';\nimport {TableCell} from './TableCell.js';\nimport {TableFoot} from './TableFoot.js';\nimport {TableHead} from './TableHead.js';\nimport {TableHeader} from './TableHeader.js';\nimport {TableRow} from './TableRow.js';\n\ndeclare module '@tanstack/react-table' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- false positive\n  interface ColumnMeta<TData extends RowData, TValue> {\n    filterVariant?: 'range' | 'select' | 'text';\n  }\n}\n\ntype PageSize = (typeof PAGE_SIZES)[number];\n\nexport const dataTablePaginationSchema = z.object({\n  /** Page number, starts with 1. */\n  page: z.number(),\n  pageSize: z.union([\n    z.literal(PAGE_SIZES[0]),\n    z.literal(PAGE_SIZES[1]),\n    z.literal(PAGE_SIZES[2]),\n    z.literal(PAGE_SIZES[3]),\n    z.literal(PAGE_SIZES[4]),\n  ]),\n  pageCount: z.number(),\n});\n\nexport type DataTablePagination = z.infer<typeof dataTablePaginationSchema>;\n\nexport const dataTableSortingSchema = z.union([\n  z.literal(false),\n  z.object({\n    column: z.string(),\n    direction: z.enum(['ascending', 'descending']),\n  }),\n]);\n\nexport type DataTableSorting = z.infer<typeof dataTableSortingSchema>;\n\nexport const dataTableFiltersSchema = z.union([\n  z.literal(false),\n  z\n    .object({\n      column: z.string(),\n      filter: z.union([\n        z.string(),\n        z.number(),\n        z.boolean(),\n        z.tuple([z.number().nullable().optional(), z.number().nullable().optional()]),\n      ]),\n    })\n    .array(),\n]);\n\nexport type DataTableFilters = z.infer<typeof dataTableFiltersSchema>;\n\nexport const dataTableFacetingSchema = z.record(\n  z.string(),\n  z.object({\n    values: z.unknown().array().optional(),\n    min: z.unknown().optional(),\n    max: z.unknown().optional(),\n  }),\n);\n\nexport type DataTableFaceting = z.infer<typeof dataTableFacetingSchema>;\n\nexport type DataTableProps<D, C> = {\n  data: D[];\n  columns: C;\n  pagination?: DataTablePagination | undefined;\n  onPagination?:\n    | ((\n        pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n      ) => void)\n    | undefined;\n  sorting?: DataTableSorting | undefined;\n  onSorting?: ((sorting: DataTableSorting) => void) | undefined;\n  filters?: DataTableFilters | undefined;\n  onFiltering?: ((filters: DataTableFilters) => void) | undefined;\n  faceting?: DataTableFaceting | undefined;\n};\n\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D>>>({\n  data,\n  columns,\n  pagination: controlledPagination,\n  onPagination,\n  sorting: controlledSorting,\n  onSorting,\n  filters: controlledFilters,\n  onFiltering,\n  faceting,\n}: DataTableProps<D, C>) {\n  let [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: DEFAULT_PAGE_SIZE,\n  });\n  let [columnVisibility, setColumnVisibility] = useState({});\n  let [columnOrder, setColumnOrder] = useState<string[]>(\n    columns.map((column) => {\n      if (column.id) {\n        return column.id;\n      }\n\n      if ('accessorKey' in column) {\n        return String(column.accessorKey);\n      }\n\n      if (typeof column.header === 'string') {\n        return String(column.header);\n      }\n\n      return '';\n    }),\n  );\n  let [columnPinning, setColumnPinning] = useState({});\n  let [sorting, setSorting] = useState<SortingState>([]);\n  let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n\n  let table = useReactTable<D>({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: onPagination ? undefined : getPaginationRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    // getFacetedRowModel: onPagination ? undefined : getFacetedRowModel(),\n    // getFacetedUniqueValues: onPagination ? undefined : getFacetedUniqueValues(),\n    // getFacetedMinMaxValues: onPagination ? undefined : getFacetedMinMaxValues(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    getFacetedMinMaxValues: getFacetedMinMaxValues(),\n    state: {\n      pagination: onPagination ? undefined : pagination,\n      columnVisibility,\n      columnOrder,\n      columnPinning,\n      sorting: onSorting ? undefined : sorting,\n      columnFilters: onFiltering ? undefined : columnFilters,\n    },\n    onPaginationChange: onPagination ? undefined : setPagination,\n    onColumnVisibilityChange: setColumnVisibility,\n    onColumnOrderChange: setColumnOrder,\n    onColumnPinningChange: setColumnPinning,\n    onSortingChange: onSorting ? undefined : setSorting,\n    onColumnFiltersChange: onFiltering ? undefined : setColumnFilters,\n    columnResizeMode: 'onChange',\n  });\n  let handleDragEnd = useCallback(({active, over}: DragEndEvent) => {\n    if (over && active.id !== over.id) {\n      setColumnOrder((previousColumnOrder) => {\n        let oldIndex = previousColumnOrder.indexOf(active.id as string);\n        let newIndex = previousColumnOrder.indexOf(over.id as string);\n\n        return arrayMove(previousColumnOrder, oldIndex, newIndex);\n      });\n    }\n  }, []);\n\n  let sensors = useSensors(\n    useSensor(MouseSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(TouchSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  let page =\n    onPagination && controlledPagination ?\n      controlledPagination.page\n    : table.getState().pagination.pageIndex + 1;\n  let pageSize =\n    onPagination && controlledPagination ?\n      controlledPagination.pageSize\n    : table.getState().pagination.pageSize;\n  let pageCount =\n    onPagination && controlledPagination ? controlledPagination.pageCount : table.getPageCount();\n  let isFirstPage = page === 1;\n  let isLastPage = page >= pageCount;\n\n  let handlePageClick = useCallback(\n    (page: number) => {\n      if (onPagination && controlledPagination) {\n        onPagination({\n          page: Math.max(1, Math.min(page, pageCount)),\n        });\n      } else {\n        table.setPageIndex(Math.max(0, Math.min(page - 1, pageCount)));\n      }\n    },\n    [controlledPagination, onPagination, pageCount, table],\n  );\n\n  let handleFirstPageClick = useCallback(() => {\n    if (onPagination && controlledPagination) {\n      onPagination({\n        page: 1,\n      });\n    } else {\n      table.firstPage();\n    }\n  }, [controlledPagination, onPagination, table]);\n\n  let handleLastPageClick = useCallback(() => {\n    if (onPagination && controlledPagination) {\n      onPagination({\n        page: pageCount,\n      });\n    } else {\n      table.lastPage();\n    }\n  }, [controlledPagination, onPagination, pageCount, table]);\n\n  let handlePreviousPageClick = useCallback(() => {\n    if (onPagination && controlledPagination) {\n      onPagination({\n        page: Math.max(1, Math.min(page - 1, pageCount)),\n      });\n    } else {\n      table.previousPage();\n    }\n  }, [controlledPagination, onPagination, page, pageCount, table]);\n\n  let handleNextPageClick = useCallback(() => {\n    if (onPagination && controlledPagination) {\n      onPagination({\n        page: Math.max(1, Math.min(page + 1, pageCount)),\n      });\n    } else {\n      table.nextPage();\n    }\n  }, [controlledPagination, onPagination, page, pageCount, table]);\n\n  let handlePageChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      let pageIndex = event.target.value ? Number(event.target.value) - 1 : 0;\n\n      if (onPagination && controlledPagination) {\n        onPagination({\n          page: Math.max(1, Math.min(pageIndex + 1, pageCount)),\n        });\n      } else {\n        table.setPageIndex(pageIndex);\n      }\n    },\n    [controlledPagination, onPagination, pageCount, table],\n  );\n\n  let handlePageSizeChange = useCallback(\n    (pageSize: string) => {\n      if (onPagination && controlledPagination) {\n        onPagination({\n          pageSize: Number(pageSize) as PageSize,\n        });\n      } else {\n        table.setPageSize(Number(pageSize));\n      }\n    },\n    [controlledPagination, onPagination, table],\n  );\n\n  let id = useId();\n\n  console.log('DataTable...', 'controlledFilters', controlledFilters);\n  console.log('faceting', faceting);\n\n  return (\n    <DndContext\n      id={id}\n      collisionDetection={closestCenter}\n      modifiers={[restrictToHorizontalAxis]}\n      sensors={sensors}\n      onDragEnd={handleDragEnd}\n    >\n      <Table\n        style={{\n          width: table.getCenterTotalSize(),\n          tableLayout: 'fixed',\n        }}\n      >\n        <TableHead>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>\n                {headerGroup.headers.map((header) => (\n                  <DataTableHeader\n                    key={header.id}\n                    header={header}\n                    table={table}\n                    sorting={controlledSorting}\n                    onSorting={onSorting}\n                    filters={controlledFilters}\n                    onFiltering={onFiltering}\n                    faceting={faceting}\n                  />\n                ))}\n              </SortableContext>\n            </TableRow>\n          ))}\n        </TableHead>\n        <TableBody>\n          {table.getRowModel().rows.map((row) => (\n            <TableRow key={row.id}>\n              {row.getVisibleCells().map((cell) => (\n                <TableCell\n                  key={cell.id}\n                  className={getCommonPinningClasses(cell.column)}\n                  style={{...getCommonPinningStyles(cell.column)}}\n                >\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFoot>\n          {table.getFooterGroups().map((footerGroup) => (\n            <TableRow key={footerGroup.id}>\n              {footerGroup.headers.map((header) => (\n                <TableHeader key={header.id}>\n                  {header.isPlaceholder ? null : (\n                    flexRender(header.column.columnDef.footer, header.getContext())\n                  )}\n                </TableHeader>\n              ))}\n            </TableRow>\n          ))}\n        </TableFoot>\n      </Table>\n      <div className=\"flex items-center gap-x-4 text-sm justify-center\">\n        <span className=\"flex items-center gap-x-2\">\n          <Button\n            variant=\"outline\"\n            aria-label=\"First page\"\n            disabled={isFirstPage}\n            onClick={handleFirstPageClick}\n          >\n            <Icon name=\"ChevronDoubleLeft\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            aria-label=\"Previous page\"\n            disabled={isFirstPage}\n            onClick={handlePreviousPageClick}\n          >\n            <Icon name=\"ChevronLeft\" />\n          </Button>\n\n          {pageCount <= MAX_PAGE_BUTTONS_COUNT ?\n            Array.from({length: pageCount}).map((_, index) => (\n              <DataTablePageButton\n                // eslint-disable-next-line react/no-array-index-key -- needed, there is no other value\n                key={index}\n                page={index + 1}\n                isSelected={page === index + 1}\n                onClick={handlePageClick}\n              />\n            ))\n          : null}\n\n          <Button\n            variant=\"outline\"\n            aria-label=\"Next page\"\n            disabled={isLastPage}\n            onClick={handleNextPageClick}\n          >\n            <Icon name=\"ChevronRight\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            aria-label=\"Last page\"\n            disabled={isLastPage}\n            onClick={handleLastPageClick}\n          >\n            <Icon name=\"ChevronDoubleRight\" />\n          </Button>\n        </span>\n        {pageCount > MAX_PAGE_BUTTONS_COUNT ?\n          <span className=\"flex items-center gap-1\">\n            Page {page} of {pageCount}\n          </span>\n        : null}\n        {pageCount > MAX_PAGE_BUTTONS_COUNT ?\n          <span className=\"flex items-center gap-1\">\n            Go to page:\n            <Input\n              type=\"text\"\n              pattern=\"[0-9]*\"\n              defaultValue={page}\n              className=\"w-12\"\n              onChange={handlePageChange}\n            />\n          </span>\n        : null}\n        <Listbox\n          value={String(pageSize)}\n          className=\"w-auto min-w-min\"\n          onChange={handlePageSizeChange}\n        >\n          {PAGE_SIZES.map((pageSize) => (\n            <ListboxOption key={pageSize} value={String(pageSize)}>\n              Show {pageSize}\n            </ListboxOption>\n          ))}\n        </Listbox>\n      </div>\n    </DndContext>\n  );\n}\n"],
+  "mappings": ";AAyUM,SAWY,KAXZ;AAzUN;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAQ,gCAA+B;AACvC,SAAQ,WAAW,+BAA+B,uBAAsB;AACxE;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;AACP,SAA0B,aAAa,OAAO,gBAAe;AAC7D,SAAQ,SAAQ;AAEhB,SAAQ,cAAa;AACrB,SAAQ,uBAAsB;AAC9B,SAAQ,2BAA0B;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAQ,+BAA8B;AACtC,SAAQ,8BAA6B;AACrC,SAAQ,YAAW;AACnB,SAAQ,aAAY;AACpB,SAAQ,eAAc;AACtB,SAAQ,qBAAoB;AAC5B,SAAQ,aAAY;AACpB,SAAQ,iBAAgB;AACxB,SAAQ,iBAAgB;AACxB,SAAQ,iBAAgB;AACxB,SAAQ,iBAAgB;AACxB,SAAQ,mBAAkB;AAC1B,SAAQ,gBAAe;AAWhB,aAAM,4BAA4B,EAAE,OAAO;AAAA;AAAA,EAEhD,MAAM,EAAE,OAAO;AAAA,EACf,UAAU,EAAE,MAAM;AAAA,IAChB,EAAE,QAAQ,WAAW,CAAC,CAAC;AAAA,IACvB,EAAE,QAAQ,WAAW,CAAC,CAAC;AAAA,IACvB,EAAE,QAAQ,WAAW,CAAC,CAAC;AAAA,IACvB,EAAE,QAAQ,WAAW,CAAC,CAAC;AAAA,IACvB,EAAE,QAAQ,WAAW,CAAC,CAAC;AAAA,EACzB,CAAC;AAAA,EACD,WAAW,EAAE,OAAO;AACtB,CAAC;AAIM,aAAM,yBAAyB,EAAE,MAAM;AAAA,EAC5C,EAAE,QAAQ,KAAK;AAAA,EACf,EAAE,OAAO;AAAA,IACP,QAAQ,EAAE,OAAO;AAAA,IACjB,WAAW,EAAE,KAAK,CAAC,aAAa,YAAY,CAAC;AAAA,EAC/C,CAAC;AACH,CAAC;AAIM,aAAM,yBAAyB,EAAE,MAAM;AAAA,EAC5C,EAAE,QAAQ,KAAK;AAAA,EACf,EACG,OAAO;AAAA,IACN,QAAQ,EAAE,OAAO;AAAA,IACjB,QAAQ,EAAE,MAAM;AAAA,MACd,EAAE,OAAO;AAAA,MACT,EAAE,OAAO;AAAA,MACT,EAAE,QAAQ;AAAA,MACV,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAAA,IAC9E,CAAC;AAAA,EACH,CAAC,EACA,MAAM;AACX,CAAC;AAIM,aAAM,0BAA0B,EAAE;AAAA,EACvC,EAAE,OAAO;AAAA,EACT,EAAE,OAAO;AAAA,IACP,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS;AAAA,IACrC,KAAK,EAAE,QAAQ,EAAE,SAAS;AAAA,IAC1B,KAAK,EAAE,QAAQ,EAAE,SAAS;AAAA,EAC5B,CAAC;AACH;AAoBO,gBAAS,UAA4D;AAAA,EAC1E;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAyB;AACvB,MAAI,CAAC,YAAY,aAAa,IAAI,SAA0B;AAAA,IAC1D,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC;AACD,MAAI,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,CAAC,CAAC;AACzD,MAAI,CAAC,aAAa,cAAc,IAAI;AAAA,IAClC,QAAQ,IAAI,CAAC,WAAW;AACtB,UAAI,OAAO,IAAI;AACb,eAAO,OAAO;AAAA,MAChB;AAEA,UAAI,iBAAiB,QAAQ;AAC3B,eAAO,OAAO,OAAO,WAAW;AAAA,MAClC;AAEA,UAAI,OAAO,OAAO,WAAW,UAAU;AACrC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AACA,MAAI,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC,CAAC;AACnD,MAAI,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAC,CAAC;AACrD,MAAI,CAAC,eAAe,gBAAgB,IAAI,SAA6B,CAAC,CAAC;AAEvE,MAAI,QAAQ,cAAiB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA,iBAAiB,gBAAgB;AAAA,IACjC,mBAAmB,kBAAkB;AAAA,IACrC,uBAAuB,eAAe,SAAY,sBAAsB;AAAA,IACxE,qBAAqB,oBAAoB;AAAA;AAAA;AAAA;AAAA,IAIzC,oBAAoB,mBAAmB;AAAA,IACvC,wBAAwB,uBAAuB;AAAA,IAC/C,wBAAwB,uBAAuB;AAAA,IAC/C,OAAO;AAAA,MACL,YAAY,eAAe,SAAY;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,YAAY,SAAY;AAAA,MACjC,eAAe,cAAc,SAAY;AAAA,IAC3C;AAAA,IACA,oBAAoB,eAAe,SAAY;AAAA,IAC/C,0BAA0B;AAAA,IAC1B,qBAAqB;AAAA,IACrB,uBAAuB;AAAA,IACvB,iBAAiB,YAAY,SAAY;AAAA,IACzC,uBAAuB,cAAc,SAAY;AAAA,IACjD,kBAAkB;AAAA,EACpB,CAAC;AACD,MAAI,gBAAgB,YAAY,CAAC,EAAC,QAAQ,KAAI,MAAoB;AAChE,QAAI,QAAQ,OAAO,OAAO,KAAK,IAAI;AACjC,qBAAe,CAAC,wBAAwB;AACtC,YAAI,WAAW,oBAAoB,QAAQ,OAAO,EAAY;AAC9D,YAAI,WAAW,oBAAoB,QAAQ,KAAK,EAAY;AAE5D,eAAO,UAAU,qBAAqB,UAAU,QAAQ;AAAA,MAC1D,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,UAAU;AAAA,IACZ,UAAU,aAAa;AAAA,MACrB,sBAAsB;AAAA,QACpB,UAAU;AAAA,MACZ;AAAA,IACF,CAAC;AAAA,IACD,UAAU,aAAa;AAAA,MACrB,sBAAsB;AAAA,QACpB,UAAU;AAAA,MACZ;AAAA,IACF,CAAC;AAAA,IACD,UAAU,gBAAgB,CAAC,CAAC;AAAA,EAC9B;AAEA,MAAI,OACF,gBAAgB,uBACd,qBAAqB,OACrB,MAAM,SAAS,EAAE,WAAW,YAAY;AAC5C,MAAI,WACF,gBAAgB,uBACd,qBAAqB,WACrB,MAAM,SAAS,EAAE,WAAW;AAChC,MAAI,YACF,gBAAgB,uBAAuB,qBAAqB,YAAY,MAAM,aAAa;AAC7F,MAAI,cAAc,SAAS;AAC3B,MAAI,aAAa,QAAQ;AAEzB,MAAI,kBAAkB;AAAA,IACpB,CAACA,UAAiB;AAChB,UAAI,gBAAgB,sBAAsB;AACxC,qBAAa;AAAA,UACX,MAAM,KAAK,IAAI,GAAG,KAAK,IAAIA,OAAM,SAAS,CAAC;AAAA,QAC7C,CAAC;AAAA,MACH,OAAO;AACL,cAAM,aAAa,KAAK,IAAI,GAAG,KAAK,IAAIA,QAAO,GAAG,SAAS,CAAC,CAAC;AAAA,MAC/D;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,cAAc,WAAW,KAAK;AAAA,EACvD;AAEA,MAAI,uBAAuB,YAAY,MAAM;AAC3C,QAAI,gBAAgB,sBAAsB;AACxC,mBAAa;AAAA,QACX,MAAM;AAAA,MACR,CAAC;AAAA,IACH,OAAO;AACL,YAAM,UAAU;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,sBAAsB,cAAc,KAAK,CAAC;AAE9C,MAAI,sBAAsB,YAAY,MAAM;AAC1C,QAAI,gBAAgB,sBAAsB;AACxC,mBAAa;AAAA,QACX,MAAM;AAAA,MACR,CAAC;AAAA,IACH,OAAO;AACL,YAAM,SAAS;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,sBAAsB,cAAc,WAAW,KAAK,CAAC;AAEzD,MAAI,0BAA0B,YAAY,MAAM;AAC9C,QAAI,gBAAgB,sBAAsB;AACxC,mBAAa;AAAA,QACX,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,GAAG,SAAS,CAAC;AAAA,MACjD,CAAC;AAAA,IACH,OAAO;AACL,YAAM,aAAa;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,sBAAsB,cAAc,MAAM,WAAW,KAAK,CAAC;AAE/D,MAAI,sBAAsB,YAAY,MAAM;AAC1C,QAAI,gBAAgB,sBAAsB;AACxC,mBAAa;AAAA,QACX,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,GAAG,SAAS,CAAC;AAAA,MACjD,CAAC;AAAA,IACH,OAAO;AACL,YAAM,SAAS;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,sBAAsB,cAAc,MAAM,WAAW,KAAK,CAAC;AAE/D,MAAI,mBAAmB;AAAA,IACrB,CAAC,UAAyC;AACxC,UAAI,YAAY,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,KAAK,IAAI,IAAI;AAEtE,UAAI,gBAAgB,sBAAsB;AACxC,qBAAa;AAAA,UACX,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,YAAY,GAAG,SAAS,CAAC;AAAA,QACtD,CAAC;AAAA,MACH,OAAO;AACL,cAAM,aAAa,SAAS;AAAA,MAC9B;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,cAAc,WAAW,KAAK;AAAA,EACvD;AAEA,MAAI,uBAAuB;AAAA,IACzB,CAACC,cAAqB;AACpB,UAAI,gBAAgB,sBAAsB;AACxC,qBAAa;AAAA,UACX,UAAU,OAAOA,SAAQ;AAAA,QAC3B,CAAC;AAAA,MACH,OAAO;AACL,cAAM,YAAY,OAAOA,SAAQ,CAAC;AAAA,MACpC;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,cAAc,KAAK;AAAA,EAC5C;AAEA,MAAI,KAAK,MAAM;AAEf,UAAQ,IAAI,gBAAgB,qBAAqB,iBAAiB;AAClE,UAAQ,IAAI,YAAY,QAAQ;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAoB;AAAA,MACpB,WAAW,CAAC,wBAAwB;AAAA,MACpC;AAAA,MACA,WAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,OAAO,MAAM,mBAAmB;AAAA,cAChC,aAAa;AAAA,YACf;AAAA,YAEA;AAAA,kCAAC,aACE,gBAAM,gBAAgB,EAAE,IAAI,CAAC,gBAC5B,oBAAC,YACC,8BAAC,mBAAgB,OAAO,aAAa,UAAU,+BAC5C,sBAAY,QAAQ,IAAI,CAAC,WACxB;AAAA,gBAAC;AAAA;AAAA,kBAEC;AAAA,kBACA;AAAA,kBACA,SAAS;AAAA,kBACT;AAAA,kBACA,SAAS;AAAA,kBACT;AAAA,kBACA;AAAA;AAAA,gBAPK,OAAO;AAAA,cAQd,CACD,GACH,KAda,YAAY,EAe3B,CACD,GACH;AAAA,cACA,oBAAC,aACE,gBAAM,YAAY,EAAE,KAAK,IAAI,CAAC,QAC7B,oBAAC,YACE,cAAI,gBAAgB,EAAE,IAAI,CAAC,SAC1B;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAW,wBAAwB,KAAK,MAAM;AAAA,kBAC9C,OAAO,EAAC,GAAG,uBAAuB,KAAK,MAAM,EAAC;AAAA,kBAE7C,qBAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC;AAAA;AAAA,gBAJpD,KAAK;AAAA,cAKZ,CACD,KATY,IAAI,EAUnB,CACD,GACH;AAAA,cACA,oBAAC,aACE,gBAAM,gBAAgB,EAAE,IAAI,CAAC,gBAC5B,oBAAC,YACE,sBAAY,QAAQ,IAAI,CAAC,WACxB,oBAAC,eACE,iBAAO,gBAAgB,OACtB,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC,KAFhD,OAAO,EAIzB,CACD,KAPY,YAAY,EAQ3B,CACD,GACH;AAAA;AAAA;AAAA,QACF;AAAA,QACA,qBAAC,SAAI,WAAU,oDACb;AAAA,+BAAC,UAAK,WAAU,6BACd;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,cAAW;AAAA,gBACX,UAAU;AAAA,gBACV,SAAS;AAAA,gBAET,8BAAC,QAAK,MAAK,qBAAoB;AAAA;AAAA,YACjC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,cAAW;AAAA,gBACX,UAAU;AAAA,gBACV,SAAS;AAAA,gBAET,8BAAC,QAAK,MAAK,eAAc;AAAA;AAAA,YAC3B;AAAA,YAEC,aAAa,yBACZ,MAAM,KAAK,EAAC,QAAQ,UAAS,CAAC,EAAE,IAAI,CAAC,GAAG,UACtC;AAAA,cAAC;AAAA;AAAA,gBAGC,MAAM,QAAQ;AAAA,gBACd,YAAY,SAAS,QAAQ;AAAA,gBAC7B,SAAS;AAAA;AAAA,cAHJ;AAAA,YAIP,CACD,IACD;AAAA,YAEF;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,cAAW;AAAA,gBACX,UAAU;AAAA,gBACV,SAAS;AAAA,gBAET,8BAAC,QAAK,MAAK,gBAAe;AAAA;AAAA,YAC5B;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,cAAW;AAAA,gBACX,UAAU;AAAA,gBACV,SAAS;AAAA,gBAET,8BAAC,QAAK,MAAK,sBAAqB;AAAA;AAAA,YAClC;AAAA,aACF;AAAA,UACC,YAAY,yBACX,qBAAC,UAAK,WAAU,2BAA0B;AAAA;AAAA,YAClC;AAAA,YAAK;AAAA,YAAK;AAAA,aAClB,IACA;AAAA,UACD,YAAY,yBACX,qBAAC,UAAK,WAAU,2BAA0B;AAAA;AAAA,YAExC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,WAAU;AAAA,gBACV,UAAU;AAAA;AAAA,YACZ;AAAA,aACF,IACA;AAAA,UACF;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,OAAO,QAAQ;AAAA,cACtB,WAAU;AAAA,cACV,UAAU;AAAA,cAET,qBAAW,IAAI,CAACA,cACf,qBAAC,iBAA6B,OAAO,OAAOA,SAAQ,GAAG;AAAA;AAAA,gBAC/CA;AAAA,mBADYA,SAEpB,CACD;AAAA;AAAA,UACH;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["page", "pageSize"]
+}

package/build/components/Description.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+export declare const useDescriptionTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "Description";
+    themeDefinition: undefined;
+};
+export type DescriptionProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDescriptionTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    className?: string | undefined;
+}>;
+export declare const Description: <T extends ElementType = "p">(props: import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+    as?: T | undefined;
+    className?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    ref?: Ref<HTMLElement> | undefined;
+}) => import("react").ReactNode;
+export declare const descriptionTheme: ComponentTheme<typeof useDescriptionTheme>;

package/build/components/Description.js

@@ -0,0 +1,28 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import {
+  Description as HeadlessDescription
+} from "@headlessui/react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { filterProps, forwardRef } from "./internals.js";
+export const useDescriptionTheme = createComponentTheme("Description");
+const DESCRIPTION_ELEMENT = "p";
+export const Description = forwardRef(
+  ({ as = DESCRIPTION_ELEMENT, className, children, ...rest }, ref) => {
+    let theme = useDescriptionTheme();
+    let props = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      "data-component": "description",
+      ...rest
+    });
+    return /* @__PURE__ */ jsx(HeadlessDescription, { ...props, children });
+  }
+);
+export const descriptionTheme = {
+  className: "font-sans text-sm"
+};
+//# sourceMappingURL=Description.js.map

package/build/components/Description.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Description.tsx"],
+  "sourcesContent": ["import {\n  Description as HeadlessDescription,\n  type DescriptionProps as HeadlessDescriptionProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {filterProps, forwardRef} from './internals.js';\n\nexport const useDescriptionTheme = createComponentTheme('Description');\n\nconst DESCRIPTION_ELEMENT = 'p';\n\nexport type DescriptionProps<T extends ElementType> = PropsWithChildren<\n  ComponentProps<typeof useDescriptionTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      className?: string | undefined;\n    }\n>;\n\nexport const Description = forwardRef(\n  <T extends ElementType = typeof DESCRIPTION_ELEMENT>(\n    {as = DESCRIPTION_ELEMENT as T, className, children, ...rest}: DescriptionProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useDescriptionTheme();\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessDescriptionProps<any> = filterProps({\n      as,\n      ref,\n      className: theme(null, className),\n      'data-component': 'description',\n      ...rest,\n    });\n\n    return <HeadlessDescription {...props}>{children}</HeadlessDescription>;\n  },\n);\n\nexport const descriptionTheme: ComponentTheme<typeof useDescriptionTheme> = {\n  className: 'font-sans text-sm',\n};\n"],
+  "mappings": ";AA6CW;AA7CX;AAAA,EACE,eAAe;AAAA,OAEV;AAQP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,aAAa,kBAAiB;AAE/B,aAAM,sBAAsB,qBAAqB,aAAa;AAErE,MAAM,sBAAsB;AAUrB,aAAM,cAAc;AAAA,EACzB,CACE,EAAC,KAAK,qBAA0B,WAAW,UAAU,GAAG,KAAI,GAC5D,QACG;AACH,QAAI,QAAQ,oBAAoB;AAEhC,QAAI,QAAuC,YAAY;AAAA,MACrD;AAAA,MACA;AAAA,MACA,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL,CAAC;AAED,WAAO,oBAAC,uBAAqB,GAAG,OAAQ,UAAS;AAAA,EACnD;AACF;AAEO,aAAM,mBAA+D;AAAA,EAC1E,WAAW;AACb;",
+  "names": []
+}

package/build/components/Dialog.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+export declare const useDialogTheme: (() => {
+    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    backdrop: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+}) & {
+    componentThemeName: "Dialog";
+    themeDefinition: {
+        readonly elements: ["root", "backdrop"];
+    };
+};
+export type DialogProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDialogTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    open: boolean;
+    static?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string;
+    onClose?: () => void;
+}>;
+export declare const Dialog: <T extends ElementType = "div">(props: import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+    as?: T | undefined;
+    open: boolean;
+    static?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    onClose?: (() => void) | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    ref?: Ref<HTMLElement> | undefined;
+}) => import("react").ReactNode;
+export declare const dialogTheme: ComponentTheme<typeof useDialogTheme>;

package/build/components/Dialog.js

@@ -0,0 +1,55 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog as HeadlessDialog,
+  DialogBackdrop as HeadlessDialogBackdrop
+} from "@headlessui/react";
+import {
+  useCallback
+} from "react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { filterProps, forwardRef } from "./internals.js";
+export const useDialogTheme = createComponentTheme("Dialog", {
+  elements: ["root", "backdrop"]
+});
+const DIALOG_ELEMENT = "div";
+export const Dialog = forwardRef(
+  ({
+    as = DIALOG_ELEMENT,
+    open,
+    static: isStatic,
+    autoFocus,
+    className,
+    onClose,
+    children,
+    ...rest
+  }, ref) => {
+    let theme = useDialogTheme();
+    let handleClose = useCallback(() => {
+      onClose?.();
+    }, [onClose]);
+    let props = filterProps({
+      as,
+      ref,
+      open,
+      static: isStatic,
+      transition: true,
+      onClose: handleClose,
+      "data-component": "dialog",
+      ...rest
+    });
+    return /* @__PURE__ */ jsxs(HeadlessDialog, { ...props, children: [
+      /* @__PURE__ */ jsx(HeadlessDialogBackdrop, { transition: true, className: theme.backdrop("fixed inset-0") }),
+      /* @__PURE__ */ jsx("div", { className: theme.root("fixed inset-0", className), children })
+    ] });
+  }
+);
+export const dialogTheme = {
+  classNames: {
+    root: "flex w-screen items-center justify-center p-4 z-30",
+    backdrop: "bg-black/30 z-30"
+  }
+};
+//# sourceMappingURL=Dialog.js.map

package/build/components/Dialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Dialog.tsx"],
+  "sourcesContent": ["import {\n  Dialog as HeadlessDialog,\n  DialogBackdrop as HeadlessDialogBackdrop,\n  type DialogProps as HeadlessDialogProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n  useCallback,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {filterProps, forwardRef} from './internals.js';\n\nexport const useDialogTheme = createComponentTheme('Dialog', {\n  elements: ['root', 'backdrop'],\n});\n\nconst DIALOG_ELEMENT = 'div';\n\nexport type DialogProps<T extends ElementType> = PropsWithChildren<\n  ComponentProps<typeof useDialogTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      open: boolean;\n      static?: boolean | undefined;\n      autoFocus?: boolean | undefined;\n      className?: string;\n      onClose?: () => void;\n    }\n>;\n\nexport const Dialog = forwardRef(\n  <T extends ElementType = typeof DIALOG_ELEMENT>(\n    {\n      as = DIALOG_ELEMENT as T,\n      open,\n      static: isStatic,\n      autoFocus,\n      className,\n      onClose,\n      children,\n      ...rest\n    }: DialogProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useDialogTheme();\n\n    let handleClose = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessDialogProps<any> = filterProps({\n      as,\n      ref,\n      open,\n      static: isStatic,\n      transition: true,\n      onClose: handleClose,\n      'data-component': 'dialog',\n      ...rest,\n    });\n\n    return (\n      <HeadlessDialog {...props}>\n        <HeadlessDialogBackdrop transition className={theme.backdrop('fixed inset-0')} />\n        <div className={theme.root('fixed inset-0', className)}>{children}</div>\n      </HeadlessDialog>\n    );\n  },\n);\n\nexport const dialogTheme: ComponentTheme<typeof useDialogTheme> = {\n  classNames: {\n    root: 'flex w-screen items-center justify-center p-4 z-30',\n    backdrop: 'bg-black/30 z-30',\n  },\n};\n"],
+  "mappings": ";AAuEM,SACE,KADF;AAvEN;AAAA,EACE,UAAU;AAAA,EACV,kBAAkB;AAAA,OAEb;AACP;AAAA,EAKE;AAAA,OACK;AAEP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,aAAa,kBAAiB;AAE/B,aAAM,iBAAiB,qBAAqB,UAAU;AAAA,EAC3D,UAAU,CAAC,QAAQ,UAAU;AAC/B,CAAC;AAED,MAAM,iBAAiB;AAchB,aAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,eAAe;AAE3B,QAAI,cAAc,YAAY,MAAM;AAClC,gBAAU;AAAA,IACZ,GAAG,CAAC,OAAO,CAAC;AAGZ,QAAI,QAAkC,YAAY;AAAA,MAChD;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL,CAAC;AAED,WACE,qBAAC,kBAAgB,GAAG,OAClB;AAAA,0BAAC,0BAAuB,YAAU,MAAC,WAAW,MAAM,SAAS,eAAe,GAAG;AAAA,MAC/E,oBAAC,SAAI,WAAW,MAAM,KAAK,iBAAiB,SAAS,GAAI,UAAS;AAAA,OACpE;AAAA,EAEJ;AACF;AAEO,aAAM,cAAqD;AAAA,EAChE,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;",
+  "names": []
+}

package/build/components/DialogPanel.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+export declare const useDialogPanelTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "DialogPanel";
+    themeDefinition: undefined;
+};
+export type DialogPanelProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDialogPanelTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    className?: string;
+}>;
+export declare const DialogPanel: <T extends ElementType = "div">(props: import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+    as?: T | undefined;
+    className?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    ref?: Ref<HTMLElement> | undefined;
+}) => import("react").ReactNode;
+export declare const dialogPanelTheme: ComponentTheme<typeof useDialogPanelTheme>;

package/build/components/DialogPanel.js

@@ -0,0 +1,29 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import {
+  DialogPanel as HeadlessDialogPanel
+} from "@headlessui/react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { filterProps, forwardRef } from "./internals.js";
+export const useDialogPanelTheme = createComponentTheme("DialogPanel");
+const DIALOG_PANEL_ELEMENT = "div";
+export const DialogPanel = forwardRef(
+  ({ as = DIALOG_PANEL_ELEMENT, className, children, ...rest }, ref) => {
+    let theme = useDialogPanelTheme();
+    let props = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      transition: true,
+      "data-component": "dialog-panel",
+      ...rest
+    });
+    return /* @__PURE__ */ jsx(HeadlessDialogPanel, { ...props, children });
+  }
+);
+export const dialogPanelTheme = {
+  className: "shadow-1 relative flex w-full min-w-[300px] max-w-[900px] flex-col gap-y-6 rounded-4 bg-white p-6 max-h-[calc(100vh-3rem)] overflow-hidden overflow-y-auto"
+};
+//# sourceMappingURL=DialogPanel.js.map

package/build/components/DialogPanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/DialogPanel.tsx"],
+  "sourcesContent": ["import {\n  DialogPanel as HeadlessDialogPanel,\n  type DialogPanelProps as HeadlessDialogPanelProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {filterProps, forwardRef} from './internals.js';\n\nexport const useDialogPanelTheme = createComponentTheme('DialogPanel');\n\nconst DIALOG_PANEL_ELEMENT = 'div';\n\nexport type DialogPanelProps<T extends ElementType> = PropsWithChildren<\n  ComponentProps<typeof useDialogPanelTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      className?: string;\n    }\n>;\n\nexport const DialogPanel = forwardRef(\n  <T extends ElementType = typeof DIALOG_PANEL_ELEMENT>(\n    {as = DIALOG_PANEL_ELEMENT as T, className, children, ...rest}: DialogPanelProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useDialogPanelTheme();\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessDialogPanelProps<any> = filterProps({\n      as,\n      ref,\n      className: theme(null, className),\n      transition: true,\n      'data-component': 'dialog-panel',\n      ...rest,\n    });\n\n    return <HeadlessDialogPanel {...props}>{children}</HeadlessDialogPanel>;\n  },\n);\n\nexport const dialogPanelTheme: ComponentTheme<typeof useDialogPanelTheme> = {\n  className:\n    'shadow-1 relative flex w-full min-w-[300px] max-w-[900px] flex-col gap-y-6 rounded-4 bg-white p-6 max-h-[calc(100vh-3rem)] overflow-hidden overflow-y-auto',\n};\n"],
+  "mappings": ";AA8CW;AA9CX;AAAA,EACE,eAAe;AAAA,OAEV;AAQP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,aAAa,kBAAiB;AAE/B,aAAM,sBAAsB,qBAAqB,aAAa;AAErE,MAAM,uBAAuB;AAUtB,aAAM,cAAc;AAAA,EACzB,CACE,EAAC,KAAK,sBAA2B,WAAW,UAAU,GAAG,KAAI,GAC7D,QACG;AACH,QAAI,QAAQ,oBAAoB;AAEhC,QAAI,QAAuC,YAAY;AAAA,MACrD;AAAA,MACA;AAAA,MACA,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL,CAAC;AAED,WAAO,oBAAC,uBAAqB,GAAG,OAAQ,UAAS;AAAA,EACnD;AACF;AAEO,aAAM,mBAA+D;AAAA,EAC1E,WACE;AACJ;",
+  "names": []
+}