@jakubmazanec/ui 0.3.2-unstable.f12d7dc8 → 0.4.0-next.54d1901e

package/README.md

@@ -21,7 +21,7 @@ It cannot be required from a CommonJS module.
 
 #### Prerequisites
 
-- Node.js 22 or later
+- Node.js 24 or later
 - TypeScript 5 or later
 <!-- prerequisites -->
 

package/build/components/Combobox.d.ts

@@ -19,9 +19,7 @@ export declare const useComboboxTheme: {
     root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
     options: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
 });
-declare const COMBOBOX_ELEMENT: import("react").ExoticComponent<{
-    children?: import("react").ReactNode | undefined;
-}>;
+declare const COMBOBOX_ELEMENT: import("react").ExoticComponent<import("react").FragmentProps>;
 export type ComboboxItem<V> = {
     value: V;
     label: string;

package/build/components/DialogTitle.d.ts

@@ -10,6 +10,6 @@ export type DialogTitleProps<T extends ElementType> = ComponentProps<typeof useD
     as?: T | undefined;
     className?: string;
 };
-export declare const DialogTitle: <T extends ElementType = "h2">({ as, className, ref, children, ...rest }: DialogTitleProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogTitle: <T extends ElementType = typeof DIALOG_TITLE_ELEMENT>({ as, className, ref, children, ...rest }: DialogTitleProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const dialogTitleTheme: ComponentTheme<typeof useDialogTitleTheme>;
 export {};

package/build/components/Listbox.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type ReactNode } from 'react';
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
 import { type ComponentRef } from './ComponentRef.js';
 export declare const useListboxTheme: {
@@ -20,9 +20,7 @@ export declare const useListboxTheme: {
     root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
     options: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
 });
-declare const LISTBOX_ELEMENT: import("react").ExoticComponent<{
-    children?: ReactNode | undefined;
-}>;
+declare const LISTBOX_ELEMENT: import("react").ExoticComponent<import("react").FragmentProps>;
 export type ListboxItem<V> = {
     value: V;
     label: string;

package/build/components/Menu.d.ts

@@ -5,9 +5,7 @@ export declare const useMenuTheme: {
     componentThemeName: "Menu";
     themeDefinition: undefined;
 } & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
-declare const MENU_ELEMENT: import("react").ExoticComponent<{
-    children?: import("react").ReactNode | undefined;
-}>;
+declare const MENU_ELEMENT: import("react").ExoticComponent<import("react").FragmentProps>;
 export type MenuProps<T extends ElementType> = ComponentProps<typeof useMenuTheme> & ComponentPropsWithoutRef<T> & ComponentRef<T> & PropsWithChildren & {
     as?: T | undefined;
     className?: string;

package/build/components/data-table/DataTable.js

@@ -228,7 +228,7 @@ export function DataTable({
             onSearch: onSearchChange
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "w-full overflow-y-visible overflow-x-scroll [scrollbar-width:thin]", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-scroll overflow-y-visible [scrollbar-width:thin]", children: /* @__PURE__ */ jsxs(
           Table,
           {
             style: {

package/build/components/data-table/DataTable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../source/components/data-table/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  type ColumnOrderState,\n  type ColumnPinningState,\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  type Updater,\n  useReactTable,\n  type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useId, useState} from 'react';\n\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';\nimport {type DataTableColumnOrder} from './DataTableColumnOrder.js';\nimport {type DataTableColumnPinning} from './DataTableColumnPinning.js';\nimport {type DataTableColumnVisibility} from './DataTableColumnVisibility.js';\nimport {type DataTableFaceting} from './DataTableFaceting.js';\nimport {type DataTableFilters} from './DataTableFilters.js';\nimport {type DataTablePagination} from './DataTablePagination.js';\nimport {type DataTableSearch} from './DataTableSearch.js';\nimport {type DataTableSorting} from './DataTableSorting.js';\nimport {\n  DataTableHeader,\n  DataTablePagination as DataTablePaginationComponent,\n  DataTableSearch as DataTableSearchComponent,\n  DEFAULT_PAGE_SIZE,\n  fromPinningState,\n  fuzzyFilter,\n  getCommonPinningClasses,\n  getCommonPinningStyles,\n} from './internals.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\nexport type DataTableProps<D, C> = {\n  data: D[];\n  columns: C;\n  clientPagination?: boolean | undefined;\n  hidePagination?: boolean | undefined;\n  pagination?: DataTablePagination | undefined;\n  onPaginationChange?:\n    | ((\n        pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n      ) => void)\n    | undefined;\n  columnVisibility?: DataTableColumnVisibility;\n  hideColumnVisibility?: boolean | undefined;\n  onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n  columnOrder?: DataTableColumnOrder;\n  hideColumnOrder?: boolean | undefined;\n  onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n  columnPinning?: DataTableColumnPinning;\n  hideColumnPinning?: boolean | undefined;\n  onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n  hideColumnResizing?: boolean | undefined;\n  clientSorting?: boolean | undefined;\n  sorting?: DataTableSorting | undefined;\n  hideSorting?: boolean | undefined;\n  onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n  clientFilters?: boolean | undefined;\n  hideFilters?: boolean | undefined;\n  filters?: DataTableFilters | undefined;\n  onFiltersChange?: ((filters: DataTableFilters) => void) | undefined;\n  clientFaceting?: boolean | undefined;\n  faceting?: DataTableFaceting | undefined;\n  clientSearch?: boolean | undefined;\n  hideSearch?: boolean | undefined;\n  search?: DataTableSearch | undefined;\n  onSearchChange?: ((search: DataTableSearch) => void) | undefined;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({\n  data,\n  columns,\n  clientPagination = false,\n  hidePagination = false,\n  pagination: controlledPagination,\n  onPaginationChange,\n  clientSorting = false,\n  sorting: controlledSorting,\n  hideSorting = false,\n  onSortingChange,\n  columnVisibility: controlledColumnVisibility,\n  hideColumnVisibility = false,\n  onColumnVisibilityChange,\n  columnOrder: controlledColumnOrder,\n  hideColumnOrder = false,\n  onColumnOrderChange,\n  columnPinning: controlledColumnPinning,\n  hideColumnPinning = false,\n  onColumnPinningChange,\n  hideColumnResizing = false,\n  clientFilters = false,\n  hideFilters = false,\n  filters: controlledFilters,\n  onFiltersChange,\n  clientFaceting = false,\n  faceting,\n  clientSearch = false,\n  hideSearch = false,\n  search: controlledSearch,\n  onSearchChange,\n}: DataTableProps<D, C>) {\n  let [pagination, setPagination] = useState<PaginationState>(\n    controlledPagination ?\n      {\n        pageIndex: Math.max(0, controlledPagination.page - 1),\n        pageSize: controlledPagination.pageSize,\n      }\n    : {\n        pageIndex: 0,\n        pageSize: DEFAULT_PAGE_SIZE,\n      },\n  );\n  let [columnVisibility, setColumnVisibility] = useState(controlledColumnVisibility ?? {});\n  let [columnOrder, setColumnOrder] = useState<string[]>(\n    controlledColumnOrder ?\n      [\n        ...controlledColumnOrder,\n        ...columns\n          .map((column, index) => {\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 String(index);\n          })\n          .filter((value) => !controlledColumnOrder.includes(value)),\n      ]\n    : columns.map((column, index) => {\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 String(index);\n      }),\n  );\n  let [columnPinning, setColumnPinning] = useState<ColumnPinningState>(\n    controlledColumnPinning ?\n      {\n        left: Object.entries(controlledColumnPinning)\n          .filter(([, pinning]) => pinning === 'left')\n          .map(([column]) => column),\n        right: Object.entries(controlledColumnPinning)\n          .filter(([, pinning]) => pinning === 'right')\n          .map(([column]) => column),\n      }\n    : {left: [], right: []},\n  );\n  let [sorting, setSorting] = useState<SortingState>([]);\n  let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  let [search, setSearch] = useState('');\n\n  let handleColumnVisibilityChange = useCallback(\n    (columnVisibilityState: Updater<VisibilityState>) => {\n      setColumnVisibility(columnVisibilityState);\n\n      if (typeof columnVisibilityState === 'function') {\n        onColumnVisibilityChange?.(columnVisibilityState(columnVisibility));\n      } else {\n        onColumnVisibilityChange?.(columnVisibilityState);\n      }\n    },\n    [columnVisibility, onColumnVisibilityChange],\n  );\n  let handleColumnOrderChange = useCallback(\n    (columnOrderState: Updater<ColumnOrderState>) => {\n      setColumnOrder(columnOrderState);\n\n      if (typeof columnOrderState === 'function') {\n        onColumnOrderChange?.(columnOrderState(columnOrder));\n      } else {\n        onColumnOrderChange?.(columnOrderState);\n      }\n    },\n    [columnOrder, onColumnOrderChange],\n  );\n  let handleColumnPinningChange = useCallback(\n    (columnPinningState: Updater<ColumnPinningState>) => {\n      setColumnPinning(columnPinningState);\n\n      if (typeof columnPinningState === 'function') {\n        onColumnPinningChange?.(fromPinningState(columnPinningState(columnPinning)));\n      } else {\n        onColumnPinningChange?.(fromPinningState(columnPinningState));\n      }\n    },\n    [columnPinning, onColumnPinningChange],\n  );\n\n  let table = useReactTable<D>({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: clientPagination ? getPaginationRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\n    getFacetedRowModel: clientFaceting ? getFacetedRowModel() : undefined,\n    getFacetedUniqueValues: clientFaceting ? getFacetedUniqueValues() : undefined,\n    getFacetedMinMaxValues: clientFaceting ? getFacetedMinMaxValues() : undefined,\n    state: {\n      pagination: clientPagination ? pagination : undefined,\n      columnVisibility,\n      columnOrder,\n      columnPinning,\n      sorting: clientSorting ? sorting : undefined,\n      columnFilters: clientFilters ? columnFilters : undefined,\n      globalFilter: clientSearch ? search : undefined,\n    },\n    onPaginationChange: clientPagination ? setPagination : undefined,\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    onColumnOrderChange: handleColumnOrderChange,\n    onColumnPinningChange: handleColumnPinningChange,\n    onSortingChange: clientSorting ? setSorting : undefined,\n    onColumnFiltersChange: clientFilters ? setColumnFilters : undefined,\n    onGlobalFilterChange: clientSearch ? setSearch : undefined,\n    columnResizeMode: 'onChange',\n    globalFilterFn: fuzzyFilter,\n  });\n\n  let handleDragEnd = useCallback(\n    ({active, over}: DragEndEvent) => {\n      if (over && active.id !== over.id) {\n        table.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    [table],\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 id = useId();\n\n  let page =\n    clientPagination ?\n      table.getState().pagination.pageIndex + 1\n    : (controlledPagination?.page ?? 1);\n  let pageSize =\n    clientPagination ?\n      table.getState().pagination.pageSize\n    : (controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE);\n  let pageCount = clientPagination ? table.getPageCount() : (controlledPagination?.pageCount ?? 1);\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={id}\n      modifiers={[restrictToHorizontalAxis]}\n      sensors={sensors}\n      onDragEnd={handleDragEnd}\n    >\n      {hideSearch ? null : (\n        <DataTableSearchComponent\n          clientSearch={clientSearch}\n          search={controlledSearch}\n          table={table}\n          onSearch={onSearchChange}\n        />\n      )}\n      <div className=\"w-full overflow-y-visible overflow-x-scroll [scrollbar-width:thin]\">\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                      clientFaceting={clientFaceting}\n                      clientFilters={clientFilters}\n                      clientSorting={clientSorting}\n                      faceting={faceting}\n                      filters={controlledFilters}\n                      header={header}\n                      hideColumnOrder={hideColumnOrder}\n                      hideColumnPinning={hideColumnPinning}\n                      hideColumnResizing={hideColumnResizing}\n                      hideColumnVisibility={hideColumnVisibility}\n                      hideFilters={hideFilters}\n                      hideSorting={hideSorting}\n                      sorting={controlledSorting}\n                      table={table}\n                      onFiltering={onFiltersChange}\n                      onSorting={onSortingChange}\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                  let value = cell.getValue();\n\n                  return (\n                    <TableCell\n                      key={cell.id}\n                      className={getCommonPinningClasses(cell.column)}\n                      style={{...getCommonPinningStyles(cell.column)}}\n                      title={value === null || value === undefined ? undefined : String(value)}\n                    >\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  );\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>\n      {hidePagination ? null : (\n        <DataTablePaginationComponent\n          clientPagination={clientPagination}\n          page={page}\n          pageCount={pageCount}\n          pageSize={pageSize}\n          table={table}\n          onPagination={onPaginationChange}\n        />\n      )}\n    </DndContext>\n  );\n}\n"],
+  "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  type ColumnOrderState,\n  type ColumnPinningState,\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  type Updater,\n  useReactTable,\n  type VisibilityState,\n} from '@tanstack/react-table';\nimport {useCallback, useId, useState} from 'react';\n\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';\nimport {type DataTableColumnOrder} from './DataTableColumnOrder.js';\nimport {type DataTableColumnPinning} from './DataTableColumnPinning.js';\nimport {type DataTableColumnVisibility} from './DataTableColumnVisibility.js';\nimport {type DataTableFaceting} from './DataTableFaceting.js';\nimport {type DataTableFilters} from './DataTableFilters.js';\nimport {type DataTablePagination} from './DataTablePagination.js';\nimport {type DataTableSearch} from './DataTableSearch.js';\nimport {type DataTableSorting} from './DataTableSorting.js';\nimport {\n  DataTableHeader,\n  DataTablePagination as DataTablePaginationComponent,\n  DataTableSearch as DataTableSearchComponent,\n  DEFAULT_PAGE_SIZE,\n  fromPinningState,\n  fuzzyFilter,\n  getCommonPinningClasses,\n  getCommonPinningStyles,\n} from './internals.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\nexport type DataTableProps<D, C> = {\n  data: D[];\n  columns: C;\n  clientPagination?: boolean | undefined;\n  hidePagination?: boolean | undefined;\n  pagination?: DataTablePagination | undefined;\n  onPaginationChange?:\n    | ((\n        pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>,\n      ) => void)\n    | undefined;\n  columnVisibility?: DataTableColumnVisibility;\n  hideColumnVisibility?: boolean | undefined;\n  onColumnVisibilityChange?: ((columnVisibility: DataTableColumnVisibility) => void) | undefined;\n  columnOrder?: DataTableColumnOrder;\n  hideColumnOrder?: boolean | undefined;\n  onColumnOrderChange?: ((columnOrder: DataTableColumnOrder) => void) | undefined;\n  columnPinning?: DataTableColumnPinning;\n  hideColumnPinning?: boolean | undefined;\n  onColumnPinningChange?: ((columnPinning: DataTableColumnPinning) => void) | undefined;\n  hideColumnResizing?: boolean | undefined;\n  clientSorting?: boolean | undefined;\n  sorting?: DataTableSorting | undefined;\n  hideSorting?: boolean | undefined;\n  onSortingChange?: ((sorting: DataTableSorting) => void) | undefined;\n  clientFilters?: boolean | undefined;\n  hideFilters?: boolean | undefined;\n  filters?: DataTableFilters | undefined;\n  onFiltersChange?: ((filters: DataTableFilters) => void) | undefined;\n  clientFaceting?: boolean | undefined;\n  faceting?: DataTableFaceting | undefined;\n  clientSearch?: boolean | undefined;\n  hideSearch?: boolean | undefined;\n  search?: DataTableSearch | undefined;\n  onSearchChange?: ((search: DataTableSearch) => void) | undefined;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful\nexport function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>({\n  data,\n  columns,\n  clientPagination = false,\n  hidePagination = false,\n  pagination: controlledPagination,\n  onPaginationChange,\n  clientSorting = false,\n  sorting: controlledSorting,\n  hideSorting = false,\n  onSortingChange,\n  columnVisibility: controlledColumnVisibility,\n  hideColumnVisibility = false,\n  onColumnVisibilityChange,\n  columnOrder: controlledColumnOrder,\n  hideColumnOrder = false,\n  onColumnOrderChange,\n  columnPinning: controlledColumnPinning,\n  hideColumnPinning = false,\n  onColumnPinningChange,\n  hideColumnResizing = false,\n  clientFilters = false,\n  hideFilters = false,\n  filters: controlledFilters,\n  onFiltersChange,\n  clientFaceting = false,\n  faceting,\n  clientSearch = false,\n  hideSearch = false,\n  search: controlledSearch,\n  onSearchChange,\n}: DataTableProps<D, C>) {\n  let [pagination, setPagination] = useState<PaginationState>(\n    controlledPagination ?\n      {\n        pageIndex: Math.max(0, controlledPagination.page - 1),\n        pageSize: controlledPagination.pageSize,\n      }\n    : {\n        pageIndex: 0,\n        pageSize: DEFAULT_PAGE_SIZE,\n      },\n  );\n  let [columnVisibility, setColumnVisibility] = useState(controlledColumnVisibility ?? {});\n  let [columnOrder, setColumnOrder] = useState<string[]>(\n    controlledColumnOrder ?\n      [\n        ...controlledColumnOrder,\n        ...columns\n          .map((column, index) => {\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 String(index);\n          })\n          .filter((value) => !controlledColumnOrder.includes(value)),\n      ]\n    : columns.map((column, index) => {\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 String(index);\n      }),\n  );\n  let [columnPinning, setColumnPinning] = useState<ColumnPinningState>(\n    controlledColumnPinning ?\n      {\n        left: Object.entries(controlledColumnPinning)\n          .filter(([, pinning]) => pinning === 'left')\n          .map(([column]) => column),\n        right: Object.entries(controlledColumnPinning)\n          .filter(([, pinning]) => pinning === 'right')\n          .map(([column]) => column),\n      }\n    : {left: [], right: []},\n  );\n  let [sorting, setSorting] = useState<SortingState>([]);\n  let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  let [search, setSearch] = useState('');\n\n  let handleColumnVisibilityChange = useCallback(\n    (columnVisibilityState: Updater<VisibilityState>) => {\n      setColumnVisibility(columnVisibilityState);\n\n      if (typeof columnVisibilityState === 'function') {\n        onColumnVisibilityChange?.(columnVisibilityState(columnVisibility));\n      } else {\n        onColumnVisibilityChange?.(columnVisibilityState);\n      }\n    },\n    [columnVisibility, onColumnVisibilityChange],\n  );\n  let handleColumnOrderChange = useCallback(\n    (columnOrderState: Updater<ColumnOrderState>) => {\n      setColumnOrder(columnOrderState);\n\n      if (typeof columnOrderState === 'function') {\n        onColumnOrderChange?.(columnOrderState(columnOrder));\n      } else {\n        onColumnOrderChange?.(columnOrderState);\n      }\n    },\n    [columnOrder, onColumnOrderChange],\n  );\n  let handleColumnPinningChange = useCallback(\n    (columnPinningState: Updater<ColumnPinningState>) => {\n      setColumnPinning(columnPinningState);\n\n      if (typeof columnPinningState === 'function') {\n        onColumnPinningChange?.(fromPinningState(columnPinningState(columnPinning)));\n      } else {\n        onColumnPinningChange?.(fromPinningState(columnPinningState));\n      }\n    },\n    [columnPinning, onColumnPinningChange],\n  );\n\n  let table = useReactTable<D>({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: clientPagination ? getPaginationRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\n    getFacetedRowModel: clientFaceting ? getFacetedRowModel() : undefined,\n    getFacetedUniqueValues: clientFaceting ? getFacetedUniqueValues() : undefined,\n    getFacetedMinMaxValues: clientFaceting ? getFacetedMinMaxValues() : undefined,\n    state: {\n      pagination: clientPagination ? pagination : undefined,\n      columnVisibility,\n      columnOrder,\n      columnPinning,\n      sorting: clientSorting ? sorting : undefined,\n      columnFilters: clientFilters ? columnFilters : undefined,\n      globalFilter: clientSearch ? search : undefined,\n    },\n    onPaginationChange: clientPagination ? setPagination : undefined,\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    onColumnOrderChange: handleColumnOrderChange,\n    onColumnPinningChange: handleColumnPinningChange,\n    onSortingChange: clientSorting ? setSorting : undefined,\n    onColumnFiltersChange: clientFilters ? setColumnFilters : undefined,\n    onGlobalFilterChange: clientSearch ? setSearch : undefined,\n    columnResizeMode: 'onChange',\n    globalFilterFn: fuzzyFilter,\n  });\n\n  let handleDragEnd = useCallback(\n    ({active, over}: DragEndEvent) => {\n      if (over && active.id !== over.id) {\n        table.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    [table],\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 id = useId();\n\n  let page =\n    clientPagination ?\n      table.getState().pagination.pageIndex + 1\n    : (controlledPagination?.page ?? 1);\n  let pageSize =\n    clientPagination ?\n      table.getState().pagination.pageSize\n    : (controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE);\n  let pageCount = clientPagination ? table.getPageCount() : (controlledPagination?.pageCount ?? 1);\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={id}\n      modifiers={[restrictToHorizontalAxis]}\n      sensors={sensors}\n      onDragEnd={handleDragEnd}\n    >\n      {hideSearch ? null : (\n        <DataTableSearchComponent\n          clientSearch={clientSearch}\n          search={controlledSearch}\n          table={table}\n          onSearch={onSearchChange}\n        />\n      )}\n      <div className=\"w-full overflow-x-scroll overflow-y-visible [scrollbar-width:thin]\">\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                      clientFaceting={clientFaceting}\n                      clientFilters={clientFilters}\n                      clientSorting={clientSorting}\n                      faceting={faceting}\n                      filters={controlledFilters}\n                      header={header}\n                      hideColumnOrder={hideColumnOrder}\n                      hideColumnPinning={hideColumnPinning}\n                      hideColumnResizing={hideColumnResizing}\n                      hideColumnVisibility={hideColumnVisibility}\n                      hideFilters={hideFilters}\n                      hideSorting={hideSorting}\n                      sorting={controlledSorting}\n                      table={table}\n                      onFiltering={onFiltersChange}\n                      onSorting={onSortingChange}\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                  let value = cell.getValue();\n\n                  return (\n                    <TableCell\n                      key={cell.id}\n                      className={getCommonPinningClasses(cell.column)}\n                      style={{...getCommonPinningStyles(cell.column)}}\n                      title={value === null || value === undefined ? undefined : String(value)}\n                    >\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  );\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>\n      {hidePagination ? null : (\n        <DataTablePaginationComponent\n          clientPagination={clientPagination}\n          page={page}\n          pageCount={pageCount}\n          pageSize={pageSize}\n          table={table}\n          onPagination={onPaginationChange}\n        />\n      )}\n    </DndContext>\n  );\n}\n"],
   "mappings": "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",
   "names": []
 }

package/build/components/data-table/internals/DataTableHeader.js

@@ -200,7 +200,7 @@ export function DataTableHeader({
           Button,
           {
             "aria-label": "Resize",
-            className: "absolute right-1 top-1/2 -mt-2.5 cursor-col-resize",
+            className: "absolute top-1/2 right-1 -mt-2.5 cursor-col-resize",
             size: "small",
             variant: "invisible",
             onDoubleClick: handleWidthReset,

package/build/components/data-table/internals/DataTableHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../source/components/data-table/internals/DataTableHeader.tsx"],
-  "sourcesContent": ["import {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {flexRender, type Header, type Table} from '@tanstack/react-table';\nimport {type CSSProperties, useCallback} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Container} from '../../Container.js';\nimport {Field} from '../../Field.js';\nimport {Icon} from '../../Icon.js';\nimport {Popover} from '../../Popover.js';\nimport {PopoverButton} from '../../PopoverButton.js';\nimport {PopoverPanel} from '../../PopoverPanel.js';\nimport {TableHeader} from '../../TableHeader.js';\nimport {Text} from '../../Text.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {DataTableHeaderColumnCheckbox} from './DataTableHeaderColumnCheckbox.js';\nimport {DataTableHeaderFilter} from './DataTableHeaderFilter.js';\nimport {getCommonPinningClasses} from './getCommonPinningClasses.js';\nimport {getCommonPinningStyles} from './getCommonPinningStyles.js';\nimport {normalizeSorting} from './normalizeSorting.js';\n\nexport type DataTableHeaderProps = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  table: Table<any>;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  header: Header<any, any>;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  clientSorting: DataTableProps<any, any>['clientSorting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideSorting: DataTableProps<any, any>['hideSorting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  sorting: DataTableProps<any, any>['sorting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  onSorting: DataTableProps<any, any>['onSortingChange'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  clientFilters: DataTableProps<any, any>['clientFilters'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideFilters: DataTableProps<any, any>['hideFilters'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  filters: DataTableProps<any, any>['filters'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  onFiltering: DataTableProps<any, any>['onFiltersChange'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  clientFaceting: DataTableProps<any, any>['clientFaceting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  faceting: DataTableProps<any, any>['faceting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideColumnResizing: DataTableProps<any, any>['hideColumnResizing'];\n};\n\nexport function DataTableHeader({\n  table,\n  header,\n  clientSorting,\n  hideSorting = false,\n  sorting: controlledSorting,\n  onSorting,\n  clientFilters,\n  hideFilters = false,\n  filters: controlledFilters,\n  onFiltering,\n  clientFaceting,\n  faceting,\n  hideColumnVisibility = false,\n  hideColumnOrder = false,\n  hideColumnPinning = false,\n  hideColumnResizing = false,\n}: DataTableHeaderProps) {\n  let {attributes, isDragging, listeners, setNodeRef, transform} = useSortable({\n    id: header.column.id,\n  });\n\n  let sorting =\n    clientSorting ? normalizeSorting(header) : normalizeSorting(header, controlledSorting);\n\n  let style: CSSProperties = {\n    transform: CSS.Translate.toString(transform),\n    transition: 'width transform 0.2s ease-in-out',\n    zIndex: isDragging ? 20 : undefined,\n    ...getCommonPinningStyles(header.column),\n  };\n\n  let contentElement = null;\n\n  if (!header.isPlaceholder) {\n    contentElement = flexRender(header.column.columnDef.header, header.getContext());\n  }\n\n  let sortElement;\n\n  if (!sorting) {\n    sortElement = <Icon name=\"ArrowsUpDown\" size=\"small\" variant=\"light\" />;\n  } else if (sorting.direction === 'ascending') {\n    sortElement = <Icon name=\"ArrowUp\" size=\"small\" />;\n  } else {\n    sortElement = <Icon name=\"ArrowDown\" size=\"small\" />;\n  }\n\n  let title: string | undefined;\n\n  if (!sorting) {\n    title = 'Sort ascending';\n  } else if (sorting.direction === 'ascending') {\n    title = 'Sort descending';\n  } else {\n    title = 'Clear sort';\n  }\n\n  let handleSortClick = useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let newSorting: DataTableProps<any, any>['sorting'];\n\n    if (!sorting) {\n      newSorting = {\n        column: header.column.id,\n        direction: 'ascending',\n      };\n    } else if (sorting.direction === 'ascending') {\n      newSorting = {\n        column: header.column.id,\n        direction: 'descending',\n      };\n    } else {\n      newSorting = null;\n    }\n\n    if (clientSorting) {\n      if (!sorting) {\n        header.column.toggleSorting(false);\n      } else if (sorting.direction === 'ascending') {\n        header.column.toggleSorting(true);\n      } else {\n        header.column.clearSorting();\n      }\n    }\n\n    if (onSorting) {\n      onSorting(newSorting);\n    }\n  }, [sorting, clientSorting, onSorting, header.column]);\n\n  let handleWidthReset = useCallback(() => {\n    header.column.resetSize();\n  }, [header.column]);\n\n  let handlePinLeftClick = useCallback(() => {\n    header.column.pin('left');\n  }, [header.column]);\n\n  let handlePinRightClick = useCallback(() => {\n    header.column.pin('right');\n  }, [header.column]);\n\n  let handleUnpinClick = useCallback(() => {\n    header.column.pin(false);\n  }, [header.column]);\n\n  let resolvedHideFilters = hideFilters || !header.column.getCanFilter();\n  let resolvedHideSorting = hideSorting || !header.column.getCanSort();\n  let resolvedHideColumnPinning = hideColumnPinning || !header.column.getCanPin();\n\n  return (\n    <TableHeader\n      ref={setNodeRef}\n      className={getCommonPinningClasses(header.column)}\n      colSpan={header.colSpan}\n      style={style}\n    >\n      <span\n        className={\n          hideColumnResizing ?\n            'relative block overflow-hidden'\n          : 'relative mr-6 block overflow-hidden'\n        }\n      >\n        <Container align=\"center\" justify=\"end\" spacing=\"extra-small\">\n          {resolvedHideSorting && hideColumnOrder ?\n            contentElement\n          : <Button\n              className={hideColumnOrder ? 'inline-flex' : 'inline-flex cursor-move'}\n              size=\"small\"\n              title={title}\n              variant=\"text\"\n              onClick={resolvedHideSorting ? undefined : handleSortClick}\n              {...(hideColumnOrder ? {} : attributes)}\n              {...(hideColumnOrder ? {} : listeners)}\n            >\n              {resolvedHideSorting ? null : sortElement}\n              {contentElement}\n            </Button>\n          }\n          {resolvedHideColumnPinning && resolvedHideFilters && hideColumnVisibility ? null : (\n            <Popover>\n              <PopoverButton>\n                <Button aria-label=\"Settings\" size=\"small\" variant=\"text\">\n                  <Icon name=\"Cog6Tooth\" size=\"small\" />\n                </Button>\n              </PopoverButton>\n              <PopoverPanel anchor=\"right start\">\n                <Container direction=\"column\" spacing=\"large\">\n                  {resolvedHideColumnPinning ? null : (\n                    <Container direction=\"row\" spacing=\"small\">\n                      <Text>Pin column</Text>\n\n                      <Field>\n                        <Container spacing=\"small\">\n                          {header.column.getIsPinned() === 'left' ? null : (\n                            <Button\n                              aria-label=\"Pin to left\"\n                              variant=\"outline\"\n                              onClick={handlePinLeftClick}\n                            >\n                              <Icon name=\"ArrowLeftEndOnRectangle\" size=\"large\" />\n                            </Button>\n                          )}\n                          {header.column.getIsPinned() ?\n                            <Button aria-label=\"Unpin\" variant=\"outline\" onClick={handleUnpinClick}>\n                              <Icon name=\"XMark\" size=\"large\" />\n                            </Button>\n                          : null}\n                          {header.column.getIsPinned() === 'right' ? null : (\n                            <Button\n                              aria-label=\"Pin to right\"\n                              variant=\"outline\"\n                              onClick={handlePinRightClick}\n                            >\n                              <Icon name=\"ArrowRightEndOnRectangle\" size=\"large\" />\n                            </Button>\n                          )}\n                        </Container>\n                      </Field>\n                    </Container>\n                  )}\n\n                  {resolvedHideFilters ? null : (\n                    <Container direction=\"column\" spacing=\"small\">\n                      <Text>Filter</Text>\n\n                      <Field>\n                        <DataTableHeaderFilter\n                          clientFaceting={clientFaceting}\n                          clientFilters={clientFilters}\n                          column={header.column}\n                          faceting={faceting}\n                          filters={controlledFilters}\n                          table={table}\n                          onFiltering={onFiltering}\n                        />\n                      </Field>\n                    </Container>\n                  )}\n\n                  {hideColumnVisibility ? null : (\n                    <Container direction=\"column\" spacing=\"small\">\n                      <Text>Visible columns</Text>\n\n                      {table.getAllLeafColumns().map((column) => (\n                        <DataTableHeaderColumnCheckbox\n                          key={column.id}\n                          column={column}\n                          table={table}\n                        />\n                      ))}\n                    </Container>\n                  )}\n                </Container>\n              </PopoverPanel>\n            </Popover>\n          )}\n        </Container>\n      </span>\n      {hideColumnResizing ? null : (\n        <Button\n          aria-label=\"Resize\"\n          // className=\"absolute right-1 top-2.5 cursor-col-resize\"\n          className=\"absolute right-1 top-1/2 -mt-2.5 cursor-col-resize\"\n          size=\"small\"\n          variant=\"invisible\"\n          onDoubleClick={handleWidthReset}\n          onMouseDown={header.getResizeHandler()}\n          onTouchStart={header.getResizeHandler()}\n        >\n          <Icon name=\"ArrowsRightLeft\" size=\"small\" />\n        </Button>\n      )}\n    </TableHeader>\n  );\n}\n"],
+  "sourcesContent": ["import {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {flexRender, type Header, type Table} from '@tanstack/react-table';\nimport {type CSSProperties, useCallback} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Container} from '../../Container.js';\nimport {Field} from '../../Field.js';\nimport {Icon} from '../../Icon.js';\nimport {Popover} from '../../Popover.js';\nimport {PopoverButton} from '../../PopoverButton.js';\nimport {PopoverPanel} from '../../PopoverPanel.js';\nimport {TableHeader} from '../../TableHeader.js';\nimport {Text} from '../../Text.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {DataTableHeaderColumnCheckbox} from './DataTableHeaderColumnCheckbox.js';\nimport {DataTableHeaderFilter} from './DataTableHeaderFilter.js';\nimport {getCommonPinningClasses} from './getCommonPinningClasses.js';\nimport {getCommonPinningStyles} from './getCommonPinningStyles.js';\nimport {normalizeSorting} from './normalizeSorting.js';\n\nexport type DataTableHeaderProps = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  table: Table<any>;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  header: Header<any, any>;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  clientSorting: DataTableProps<any, any>['clientSorting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideSorting: DataTableProps<any, any>['hideSorting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  sorting: DataTableProps<any, any>['sorting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  onSorting: DataTableProps<any, any>['onSortingChange'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  clientFilters: DataTableProps<any, any>['clientFilters'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideFilters: DataTableProps<any, any>['hideFilters'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  filters: DataTableProps<any, any>['filters'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  onFiltering: DataTableProps<any, any>['onFiltersChange'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  clientFaceting: DataTableProps<any, any>['clientFaceting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  faceting: DataTableProps<any, any>['faceting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  hideColumnResizing: DataTableProps<any, any>['hideColumnResizing'];\n};\n\nexport function DataTableHeader({\n  table,\n  header,\n  clientSorting,\n  hideSorting = false,\n  sorting: controlledSorting,\n  onSorting,\n  clientFilters,\n  hideFilters = false,\n  filters: controlledFilters,\n  onFiltering,\n  clientFaceting,\n  faceting,\n  hideColumnVisibility = false,\n  hideColumnOrder = false,\n  hideColumnPinning = false,\n  hideColumnResizing = false,\n}: DataTableHeaderProps) {\n  let {attributes, isDragging, listeners, setNodeRef, transform} = useSortable({\n    id: header.column.id,\n  });\n\n  let sorting =\n    clientSorting ? normalizeSorting(header) : normalizeSorting(header, controlledSorting);\n\n  let style: CSSProperties = {\n    transform: CSS.Translate.toString(transform),\n    transition: 'width transform 0.2s ease-in-out',\n    zIndex: isDragging ? 20 : undefined,\n    ...getCommonPinningStyles(header.column),\n  };\n\n  let contentElement = null;\n\n  if (!header.isPlaceholder) {\n    contentElement = flexRender(header.column.columnDef.header, header.getContext());\n  }\n\n  let sortElement;\n\n  if (!sorting) {\n    sortElement = <Icon name=\"ArrowsUpDown\" size=\"small\" variant=\"light\" />;\n  } else if (sorting.direction === 'ascending') {\n    sortElement = <Icon name=\"ArrowUp\" size=\"small\" />;\n  } else {\n    sortElement = <Icon name=\"ArrowDown\" size=\"small\" />;\n  }\n\n  let title: string | undefined;\n\n  if (!sorting) {\n    title = 'Sort ascending';\n  } else if (sorting.direction === 'ascending') {\n    title = 'Sort descending';\n  } else {\n    title = 'Clear sort';\n  }\n\n  let handleSortClick = useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let newSorting: DataTableProps<any, any>['sorting'];\n\n    if (!sorting) {\n      newSorting = {\n        column: header.column.id,\n        direction: 'ascending',\n      };\n    } else if (sorting.direction === 'ascending') {\n      newSorting = {\n        column: header.column.id,\n        direction: 'descending',\n      };\n    } else {\n      newSorting = null;\n    }\n\n    if (clientSorting) {\n      if (!sorting) {\n        header.column.toggleSorting(false);\n      } else if (sorting.direction === 'ascending') {\n        header.column.toggleSorting(true);\n      } else {\n        header.column.clearSorting();\n      }\n    }\n\n    if (onSorting) {\n      onSorting(newSorting);\n    }\n  }, [sorting, clientSorting, onSorting, header.column]);\n\n  let handleWidthReset = useCallback(() => {\n    header.column.resetSize();\n  }, [header.column]);\n\n  let handlePinLeftClick = useCallback(() => {\n    header.column.pin('left');\n  }, [header.column]);\n\n  let handlePinRightClick = useCallback(() => {\n    header.column.pin('right');\n  }, [header.column]);\n\n  let handleUnpinClick = useCallback(() => {\n    header.column.pin(false);\n  }, [header.column]);\n\n  let resolvedHideFilters = hideFilters || !header.column.getCanFilter();\n  let resolvedHideSorting = hideSorting || !header.column.getCanSort();\n  let resolvedHideColumnPinning = hideColumnPinning || !header.column.getCanPin();\n\n  return (\n    <TableHeader\n      ref={setNodeRef}\n      className={getCommonPinningClasses(header.column)}\n      colSpan={header.colSpan}\n      style={style}\n    >\n      <span\n        className={\n          hideColumnResizing ?\n            'relative block overflow-hidden'\n          : 'relative mr-6 block overflow-hidden'\n        }\n      >\n        <Container align=\"center\" justify=\"end\" spacing=\"extra-small\">\n          {resolvedHideSorting && hideColumnOrder ?\n            contentElement\n          : <Button\n              className={hideColumnOrder ? 'inline-flex' : 'inline-flex cursor-move'}\n              size=\"small\"\n              title={title}\n              variant=\"text\"\n              onClick={resolvedHideSorting ? undefined : handleSortClick}\n              {...(hideColumnOrder ? {} : attributes)}\n              {...(hideColumnOrder ? {} : listeners)}\n            >\n              {resolvedHideSorting ? null : sortElement}\n              {contentElement}\n            </Button>\n          }\n          {resolvedHideColumnPinning && resolvedHideFilters && hideColumnVisibility ? null : (\n            <Popover>\n              <PopoverButton>\n                <Button aria-label=\"Settings\" size=\"small\" variant=\"text\">\n                  <Icon name=\"Cog6Tooth\" size=\"small\" />\n                </Button>\n              </PopoverButton>\n              <PopoverPanel anchor=\"right start\">\n                <Container direction=\"column\" spacing=\"large\">\n                  {resolvedHideColumnPinning ? null : (\n                    <Container direction=\"row\" spacing=\"small\">\n                      <Text>Pin column</Text>\n\n                      <Field>\n                        <Container spacing=\"small\">\n                          {header.column.getIsPinned() === 'left' ? null : (\n                            <Button\n                              aria-label=\"Pin to left\"\n                              variant=\"outline\"\n                              onClick={handlePinLeftClick}\n                            >\n                              <Icon name=\"ArrowLeftEndOnRectangle\" size=\"large\" />\n                            </Button>\n                          )}\n                          {header.column.getIsPinned() ?\n                            <Button aria-label=\"Unpin\" variant=\"outline\" onClick={handleUnpinClick}>\n                              <Icon name=\"XMark\" size=\"large\" />\n                            </Button>\n                          : null}\n                          {header.column.getIsPinned() === 'right' ? null : (\n                            <Button\n                              aria-label=\"Pin to right\"\n                              variant=\"outline\"\n                              onClick={handlePinRightClick}\n                            >\n                              <Icon name=\"ArrowRightEndOnRectangle\" size=\"large\" />\n                            </Button>\n                          )}\n                        </Container>\n                      </Field>\n                    </Container>\n                  )}\n\n                  {resolvedHideFilters ? null : (\n                    <Container direction=\"column\" spacing=\"small\">\n                      <Text>Filter</Text>\n\n                      <Field>\n                        <DataTableHeaderFilter\n                          clientFaceting={clientFaceting}\n                          clientFilters={clientFilters}\n                          column={header.column}\n                          faceting={faceting}\n                          filters={controlledFilters}\n                          table={table}\n                          onFiltering={onFiltering}\n                        />\n                      </Field>\n                    </Container>\n                  )}\n\n                  {hideColumnVisibility ? null : (\n                    <Container direction=\"column\" spacing=\"small\">\n                      <Text>Visible columns</Text>\n\n                      {table.getAllLeafColumns().map((column) => (\n                        <DataTableHeaderColumnCheckbox\n                          key={column.id}\n                          column={column}\n                          table={table}\n                        />\n                      ))}\n                    </Container>\n                  )}\n                </Container>\n              </PopoverPanel>\n            </Popover>\n          )}\n        </Container>\n      </span>\n      {hideColumnResizing ? null : (\n        <Button\n          aria-label=\"Resize\"\n          // className=\"absolute right-1 top-2.5 cursor-col-resize\"\n          className=\"absolute top-1/2 right-1 -mt-2.5 cursor-col-resize\"\n          size=\"small\"\n          variant=\"invisible\"\n          onDoubleClick={handleWidthReset}\n          onMouseDown={header.getResizeHandler()}\n          onTouchStart={header.getResizeHandler()}\n        >\n          <Icon name=\"ArrowsRightLeft\" size=\"small\" />\n        </Button>\n      )}\n    </TableHeader>\n  );\n}\n"],
   "mappings": "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",
   "names": []
 }

package/build/development/createTailwindConfig.d.ts

@@ -1,4 +1,4 @@
-import { type Config as TailwindConfig } from 'tailwindcss';
+import { type Config as BaseTailwindConfig } from 'tailwindcss';
 import { type DEFAULT_STOPS } from './internals/constants.js';
 export type CreateTailwindConfigOptions = {
     content?: string[] | undefined;
@@ -15,4 +15,8 @@ export type CreateTailwindConfigOptions = {
         saturationShift?: number;
     } | string>;
 };
+export type TailwindConfig = {
+    theme: BaseTailwindConfig['theme'];
+    plugins: BaseTailwindConfig['plugins'];
+};
 export declare function createTailwindConfig({ content, colors, }?: CreateTailwindConfigOptions): TailwindConfig;

package/build/development/createTailwindConfig.js

@@ -1,9 +1,8 @@
 "use strict";
+import plugin from "tailwindcss/plugin";
 import { DEFAULT_STOP } from "./internals/constants.js";
 import { createPalette } from "./internals/createPalette.js";
-import { resolveModule } from "./internals/resolveModule.js";
 let defaultCreateTailwindConfigOptions = {
-  content: ["./{.storybook,app,source,stories,tests}/**/*.{js,jsx,ts,tsx,mdx}", "@jakubmazanec/ui"],
   colors: {
     gray: "#6c6e79",
     neutral: "#6c6e79",
@@ -104,69 +103,59 @@ export function createTailwindConfig({
       };
     }
   }
-  let resolvedContent = [];
-  for (let contentPath of content ?? []) {
-    try {
-      if (contentPath.startsWith(".") || contentPath.startsWith("/")) {
-        resolvedContent.push(contentPath);
-      } else {
-        resolvedContent.push(`${resolveModule(contentPath)}/**`);
+  let root = {
+    "--radius-none": "0",
+    "--radius-0_5": "0.125rem",
+    "--radius-1": "0.25rem",
+    "--radius-1_5": "0.375rem",
+    "--radius-2": "0.5rem",
+    "--radius-2_5": "0.625rem",
+    "--radius-3": "0.75rem",
+    "--radius-4": "1rem",
+    "--radius-full": "9999px",
+    "--font-sans": 'InterVariable, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
+  };
+  for (let [colorName, colorValue] of Object.entries(themeColors)) {
+    if (typeof colorValue === "string") {
+      let variableName = `--color-${colorName}`;
+      let variableValue = colorValue;
+      root[variableName] = variableValue;
+      themeColors[colorName] = `var(${variableName})`;
+    } else if (typeof colorValue === "object") {
+      for (let [shadeName, shadeValue] of Object.entries(colorValue)) {
+        let variableName = `--color-${colorName}-${shadeName}`;
+        let variableValue = shadeValue;
+        root[variableName] = variableValue;
+        themeColors[colorName][shadeName] = `var(${variableName})`;
       }
-    } catch {
     }
   }
   return {
-    content: resolvedContent,
     theme: {
       colors: themeColors,
-      borderRadius: {
-        none: "0",
-        DEFAULT: "0.25rem",
-        "0.5": "0.125rem",
-        "1": "0.25rem",
-        "1.5": "0.375rem",
-        "2": "0.5rem",
-        "2.5": "0.625rem",
-        "3": "0.75rem",
-        "4": "1rem",
-        full: "9999px"
+      radius: {
+        none: "var(--radius-none)",
+        "0.5": "var(--radius-0_5)",
+        "1": "var(--radius-1)",
+        "1.5": "var(--radius-1_5)",
+        "2": "var(--radius-2)",
+        "2.5": "var(--radius-2_5)",
+        "3": "var(--radius-3)",
+        "4": "var(--radius-4)",
+        full: "var(--radius-full)"
       },
-      extend: {
-        spacing: {
-          13: "3.25rem",
-          15: "3.75rem",
-          17: "4.25rem",
-          18: "4.5rem",
-          19: "4.75rem",
-          21: "5.25rem",
-          22: "5.5rem",
-          23: "5.75rem",
-          25: "6.25rem",
-          26: "6.5rem",
-          27: "6.75rem",
-          29: "6.25rem",
-          30: "7.5rem",
-          34: "8.5rem",
-          38: "9.5rem",
-          40: "10rem"
-        },
-        fontFamily: {
-          sans: [
-            "InterVariable",
-            "ui-sans-serif",
-            "system-ui",
-            "sans-serif",
-            '"Apple Color Emoji"',
-            '"Segoe UI Emoji"',
-            '"Segoe UI Symbol"',
-            '"Noto Color Emoji"'
-          ]
-        }
+      font: {
+        sans: "var(--font-sans)"
       }
     },
-    future: {
-      hoverOnlyWhenSupported: true
-    }
+    // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237
+    plugins: [
+      plugin(({ addBase }) => {
+        addBase({
+          ":root": root
+        });
+      })
+    ]
   };
 }
 //# sourceMappingURL=createTailwindConfig.js.map

package/build/development/createTailwindConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/development/createTailwindConfig.ts"],
-  "sourcesContent": ["import {type Config as TailwindConfig} from 'tailwindcss';\n\nimport {DEFAULT_STOP, type DEFAULT_STOPS} from './internals/constants.js';\nimport {createPalette} from './internals/createPalette.js';\nimport {resolveModule} from './internals/resolveModule.js';\n\nlet defaultCreateTailwindConfigOptions = {\n  content: ['./{.storybook,app,source,stories,tests}/**/*.{js,jsx,ts,tsx,mdx}', '@jakubmazanec/ui'],\n  colors: {\n    gray: '#6c6e79',\n    neutral: '#6c6e79', // copy of \"gray\"\n    red: '#d1002f',\n    danger: '#d1002f', // copy of \"red\"\n    orange: {\n      hex: '#c33909',\n      hueShift: 1,\n    },\n    warning: {\n      hex: '#c33909',\n      hueShift: 1,\n    }, // copy of \"orange\"\n    yellow: {\n      swatches: [\n        {hex: '#fffffa', stop: 10},\n        {hex: '#fffef0', stop: 25},\n        {hex: '#fffbdb', stop: 50},\n        {hex: '#fff3b8', stop: 100},\n        {hex: '#ffe06f', stop: 200},\n        {hex: '#ffc72d', stop: 300},\n        {hex: '#e69d00', stop: 400},\n        {hex: '#9e6300', stop: 500},\n        {hex: '#805701', stop: 600},\n        {hex: '#614700', stop: 700},\n        {hex: '#3d3000', stop: 800},\n        {hex: '#1f1a00', stop: 900},\n        {hex: '#0f0e00', stop: 950},\n        {hex: '#0a0a00', stop: 975},\n        {hex: '#050500', stop: 990},\n      ],\n      hex: '#9e6300',\n      hueShift: 3,\n    },\n    green: '#0a7e22',\n    teal: {\n      hex: '#007c65',\n      hueShift: 5,\n    },\n    blue: '#006dca',\n    primary: '#006dca', // copy of \"blue\"\n    violet: '#8649e1',\n    pink: {\n      hex: '#b229b9',\n      hueShift: 10,\n    },\n  },\n} satisfies CreateTailwindConfigOptions;\n\nexport type CreateTailwindConfigOptions = {\n  content?: string[] | undefined;\n  colors?: Record<\n    string,\n    | {hex: string; hueShift?: number; saturationShift?: number}\n    | {\n        swatches: Array<{hex: string; stop: (typeof DEFAULT_STOPS)[number]}>;\n        hueShift?: number;\n        saturationShift?: number;\n      }\n    | string\n  >;\n};\n\nexport function createTailwindConfig({\n  content,\n  colors,\n}: CreateTailwindConfigOptions = defaultCreateTailwindConfigOptions): TailwindConfig {\n  let themeColors = {\n    transparent: 'transparent',\n    current: 'currentColor',\n    white: '#fff',\n    black: '#000',\n  };\n\n  for (let [name, color] of Object.entries(colors ?? {})) {\n    if (typeof color === 'string') {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: [\n            {\n              hex: color,\n              stop: DEFAULT_STOP,\n            },\n          ],\n          hueShift: 0,\n          saturationShift: 0,\n        }),\n      };\n    } else if ('swatches' in color) {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: color.swatches,\n          hueShift: color.hueShift ?? 0,\n          saturationShift: color.saturationShift ?? 0,\n        }),\n      };\n    } else if ('hex' in color) {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: [{hex: color.hex, stop: DEFAULT_STOP}],\n          hueShift: color.hueShift ?? 0,\n          saturationShift: color.saturationShift ?? 0,\n        }),\n      };\n    }\n  }\n\n  let resolvedContent = [];\n\n  for (let contentPath of content ?? []) {\n    try {\n      if (contentPath.startsWith('.') || contentPath.startsWith('/')) {\n        resolvedContent.push(contentPath);\n      } else {\n        resolvedContent.push(`${resolveModule(contentPath)}/**`);\n      }\n    } catch {\n      // no-op, because we're catching error caused by `createRequire` not being a function in a browser environment\n    }\n  }\n\n  return {\n    content: resolvedContent,\n    theme: {\n      colors: themeColors,\n      borderRadius: {\n        none: '0',\n        DEFAULT: '0.25rem',\n        '0.5': '0.125rem',\n        '1': '0.25rem',\n        '1.5': '0.375rem',\n        '2': '0.5rem',\n        '2.5': '0.625rem',\n        '3': '0.75rem',\n        '4': '1rem',\n        full: '9999px',\n      },\n      extend: {\n        spacing: {\n          13: '3.25rem',\n          15: '3.75rem',\n          17: '4.25rem',\n          18: '4.5rem',\n          19: '4.75rem',\n          21: '5.25rem',\n          22: '5.5rem',\n          23: '5.75rem',\n          25: '6.25rem',\n          26: '6.5rem',\n          27: '6.75rem',\n          29: '6.25rem',\n          30: '7.5rem',\n          34: '8.5rem',\n          38: '9.5rem',\n          40: '10rem',\n        },\n        fontFamily: {\n          sans: [\n            'InterVariable',\n            'ui-sans-serif',\n            'system-ui',\n            'sans-serif',\n            '\"Apple Color Emoji\"',\n            '\"Segoe UI Emoji\"',\n            '\"Segoe UI Symbol\"',\n            '\"Noto Color Emoji\"',\n          ],\n        },\n      },\n    },\n    future: {\n      hoverOnlyWhenSupported: true,\n    },\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {type Config as BaseTailwindConfig} from 'tailwindcss';\nimport plugin from 'tailwindcss/plugin';\n\nimport {DEFAULT_STOP, type DEFAULT_STOPS} from './internals/constants.js';\nimport {createPalette} from './internals/createPalette.js';\n\nlet defaultCreateTailwindConfigOptions = {\n  colors: {\n    gray: '#6c6e79',\n    neutral: '#6c6e79', // copy of \"gray\"\n    red: '#d1002f',\n    danger: '#d1002f', // copy of \"red\"\n    orange: {\n      hex: '#c33909',\n      hueShift: 1,\n    },\n    warning: {\n      hex: '#c33909',\n      hueShift: 1,\n    }, // copy of \"orange\"\n    yellow: {\n      swatches: [\n        {hex: '#fffffa', stop: 10},\n        {hex: '#fffef0', stop: 25},\n        {hex: '#fffbdb', stop: 50},\n        {hex: '#fff3b8', stop: 100},\n        {hex: '#ffe06f', stop: 200},\n        {hex: '#ffc72d', stop: 300},\n        {hex: '#e69d00', stop: 400},\n        {hex: '#9e6300', stop: 500},\n        {hex: '#805701', stop: 600},\n        {hex: '#614700', stop: 700},\n        {hex: '#3d3000', stop: 800},\n        {hex: '#1f1a00', stop: 900},\n        {hex: '#0f0e00', stop: 950},\n        {hex: '#0a0a00', stop: 975},\n        {hex: '#050500', stop: 990},\n      ],\n      hex: '#9e6300',\n      hueShift: 3,\n    },\n    green: '#0a7e22',\n    teal: {\n      hex: '#007c65',\n      hueShift: 5,\n    },\n    blue: '#006dca',\n    primary: '#006dca', // copy of \"blue\"\n    violet: '#8649e1',\n    pink: {\n      hex: '#b229b9',\n      hueShift: 10,\n    },\n  },\n} satisfies CreateTailwindConfigOptions;\n\nexport type CreateTailwindConfigOptions = {\n  content?: string[] | undefined;\n  colors?: Record<\n    string,\n    | {hex: string; hueShift?: number; saturationShift?: number}\n    | {\n        swatches: Array<{hex: string; stop: (typeof DEFAULT_STOPS)[number]}>;\n        hueShift?: number;\n        saturationShift?: number;\n      }\n    | string\n  >;\n};\n\nexport type TailwindConfig = {\n  theme: BaseTailwindConfig['theme'];\n  // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237\n  plugins: BaseTailwindConfig['plugins'];\n};\n\nexport function createTailwindConfig({\n  content,\n  colors,\n}: CreateTailwindConfigOptions = defaultCreateTailwindConfigOptions): TailwindConfig {\n  let themeColors: Record<string, Record<string, string> | string> = {\n    transparent: 'transparent',\n    current: 'currentColor',\n    white: '#fff',\n    black: '#000',\n  };\n\n  for (let [name, color] of Object.entries(colors ?? {})) {\n    if (typeof color === 'string') {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: [\n            {\n              hex: color,\n              stop: DEFAULT_STOP,\n            },\n          ],\n          hueShift: 0,\n          saturationShift: 0,\n        }),\n      };\n    } else if ('swatches' in color) {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: color.swatches,\n          hueShift: color.hueShift ?? 0,\n          saturationShift: color.saturationShift ?? 0,\n        }),\n      };\n    } else if ('hex' in color) {\n      themeColors = {\n        ...themeColors,\n        ...createPalette({\n          name,\n          swatches: [{hex: color.hex, stop: DEFAULT_STOP}],\n          hueShift: color.hueShift ?? 0,\n          saturationShift: color.saturationShift ?? 0,\n        }),\n      };\n    }\n  }\n\n  // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237\n  let root: Record<string, Record<string, string> | string> = {\n    '--radius-none': '0',\n    '--radius-0_5': '0.125rem',\n    '--radius-1': '0.25rem',\n    '--radius-1_5': '0.375rem',\n    '--radius-2': '0.5rem',\n    '--radius-2_5': '0.625rem',\n    '--radius-3': '0.75rem',\n    '--radius-4': '1rem',\n    '--radius-full': '9999px',\n    '--font-sans':\n      'InterVariable, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n  };\n\n  for (let [colorName, colorValue] of Object.entries(themeColors)) {\n    if (typeof colorValue === 'string') {\n      let variableName = `--color-${colorName}`;\n      let variableValue = colorValue;\n\n      root[variableName] = variableValue;\n      themeColors[colorName] = `var(${variableName})`;\n    } else if (typeof colorValue === 'object') {\n      for (let [shadeName, shadeValue] of Object.entries(colorValue)) {\n        let variableName = `--color-${colorName}-${shadeName}`;\n        let variableValue = shadeValue;\n\n        root[variableName] = variableValue;\n        (themeColors[colorName] as Record<string, string>)[shadeName] = `var(${variableName})`; // type assertion is ok, we know the shape of `themeColors`\n      }\n    }\n  }\n\n  return {\n    theme: {\n      colors: themeColors,\n      radius: {\n        none: 'var(--radius-none)',\n        '0.5': 'var(--radius-0_5)',\n        '1': 'var(--radius-1)',\n        '1.5': 'var(--radius-1_5)',\n        '2': 'var(--radius-2)',\n        '2.5': 'var(--radius-2_5)',\n        '3': 'var(--radius-3)',\n        '4': 'var(--radius-4)',\n        full: 'var(--radius-full)',\n      },\n      font: {\n        sans: 'var(--font-sans)',\n      },\n    },\n    // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237\n    plugins: [\n      plugin(({addBase}) => {\n        addBase({\n          ':root': root,\n        });\n      }),\n    ],\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build/development/createTailwindMerge.js

@@ -1,31 +1,24 @@
 "use strict";
 import { extendTailwindMerge, twMerge } from "tailwind-merge";
 const THEME_SCALES = [
-  "colors",
+  "color",
+  "font",
+  "text",
+  "weight",
+  "tracking",
+  "leading",
+  "breakpoint",
+  "container",
   "spacing",
+  "radius",
+  "shadow",
+  "shadow",
+  "shadow",
   "blur",
-  "brightness",
-  "borderColor",
-  "borderRadius",
-  "borderSpacing",
-  "borderWidth",
-  "contrast",
-  "grayscale",
-  "hueRotate",
-  "invert",
-  "gap",
-  "gradientColorStops",
-  "gradientColorStopPositions",
-  "inset",
-  "margin",
-  "opacity",
-  "padding",
-  "saturate",
-  "scale",
-  "sepia",
-  "skew",
-  "space",
-  "translate"
+  "perspective",
+  "aspect",
+  "ease",
+  "animate"
 ];
 export function createTailwindMerge(tailwindConfig) {
   if (!tailwindConfig.theme) {
@@ -46,7 +39,7 @@ export function createTailwindMerge(tailwindConfig) {
       for (let key of keys) {
         if (tailwindConfigScale[key] !== void 0 && tailwindConfigScale[key] !== null && typeof tailwindConfigScale[key] === "object") {
           combinedKeys.push(
-            ...Object.keys(tailwindConfigScale[key]).filter((value) => value !== "DEFAULT").map((value) => `${key}-${value}`)
+            ...Object.keys(tailwindConfigScale[key]).map((value) => `${key}-${value}`)
           );
         } else {
           combinedKeys.push(key);
@@ -60,7 +53,7 @@ export function createTailwindMerge(tailwindConfig) {
       for (let key of keys) {
         if (tailwindConfigScale[key] !== void 0 && tailwindConfigScale[key] !== null && typeof tailwindConfigScale[key] === "object") {
           combinedKeys.push(
-            ...Object.keys(tailwindConfigScale[key]).filter((value) => value !== "DEFAULT").map((value) => `${key}-${value}`)
+            ...Object.keys(tailwindConfigScale[key]).map((value) => `${key}-${value}`)
           );
         } else {
           combinedKeys.push(key);

package/build/development/createTailwindMerge.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/development/createTailwindMerge.ts"],
-  "sourcesContent": ["import {extendTailwindMerge, twMerge} from 'tailwind-merge';\nimport {type Config as TailwindConfig} from 'tailwindcss';\n\nconst THEME_SCALES = [\n  'colors',\n  'spacing',\n  'blur',\n  'brightness',\n  'borderColor',\n  'borderRadius',\n  'borderSpacing',\n  'borderWidth',\n  'contrast',\n  'grayscale',\n  'hueRotate',\n  'invert',\n  'gap',\n  'gradientColorStops',\n  'gradientColorStopPositions',\n  'inset',\n  'margin',\n  'opacity',\n  'padding',\n  'saturate',\n  'scale',\n  'sepia',\n  'skew',\n  'space',\n  'translate',\n];\n\nexport function createTailwindMerge(tailwindConfig: TailwindConfig) {\n  if (!tailwindConfig.theme) {\n    return twMerge;\n  }\n\n  let tailwindMergeConfig: Parameters<typeof extendTailwindMerge>[0] = {\n    override: {theme: {}},\n    extend: {theme: {}},\n  };\n\n  for (let scale of THEME_SCALES) {\n    if (!tailwindMergeConfig.override?.theme || !tailwindMergeConfig.extend?.theme) {\n      throw new Error('Creating Tailwind merge failed!');\n    }\n\n    if (tailwindConfig.theme[scale]) {\n      let tailwindConfigScale = tailwindConfig.theme[scale] as Record<\n        string,\n        Record<string, string | unknown> | unknown\n      >;\n      let keys = Object.keys(tailwindConfigScale);\n      let combinedKeys = [];\n\n      for (let key of keys) {\n        if (\n          tailwindConfigScale[key] !== undefined &&\n          tailwindConfigScale[key] !== null &&\n          typeof tailwindConfigScale[key] === 'object'\n        ) {\n          combinedKeys.push(\n            ...Object.keys(tailwindConfigScale[key])\n              .filter((value) => value !== 'DEFAULT')\n              .map((value) => `${key}-${value}`),\n          );\n        } else {\n          combinedKeys.push(key);\n        }\n      }\n\n      tailwindMergeConfig.override.theme[scale] = combinedKeys;\n    } else if (tailwindConfig.theme.extend?.[scale]) {\n      let tailwindConfigScale = tailwindConfig.theme.extend[scale] as Record<\n        string,\n        Record<string, string | unknown> | unknown\n      >;\n      let keys = Object.keys(tailwindConfigScale);\n      let combinedKeys = [];\n\n      for (let key of keys) {\n        if (\n          tailwindConfigScale[key] !== undefined &&\n          tailwindConfigScale[key] !== null &&\n          typeof tailwindConfigScale[key] === 'object'\n        ) {\n          combinedKeys.push(\n            ...Object.keys(tailwindConfigScale[key])\n              .filter((value) => value !== 'DEFAULT')\n              .map((value) => `${key}-${value}`),\n          );\n        } else {\n          combinedKeys.push(key);\n        }\n      }\n\n      tailwindMergeConfig.extend.theme[scale] = combinedKeys;\n    }\n  }\n\n  return extendTailwindMerge(tailwindMergeConfig);\n}\n"],
-  "mappings": ";AAAA,SAAQ,qBAAqB,eAAc;AAG3C,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,gBAAS,oBAAoB,gBAAgC;AAClE,MAAI,CAAC,eAAe,OAAO;AACzB,WAAO;AAAA,EACT;AAEA,MAAI,sBAAiE;AAAA,IACnE,UAAU,EAAC,OAAO,CAAC,EAAC;AAAA,IACpB,QAAQ,EAAC,OAAO,CAAC,EAAC;AAAA,EACpB;AAEA,WAAS,SAAS,cAAc;AAC9B,QAAI,CAAC,oBAAoB,UAAU,SAAS,CAAC,oBAAoB,QAAQ,OAAO;AAC9E,YAAM,IAAI,MAAM,iCAAiC;AAAA,IACnD;AAEA,QAAI,eAAe,MAAM,KAAK,GAAG;AAC/B,UAAI,sBAAsB,eAAe,MAAM,KAAK;AAIpD,UAAI,OAAO,OAAO,KAAK,mBAAmB;AAC1C,UAAI,eAAe,CAAC;AAEpB,eAAS,OAAO,MAAM;AACpB,YACE,oBAAoB,GAAG,MAAM,UAC7B,oBAAoB,GAAG,MAAM,QAC7B,OAAO,oBAAoB,GAAG,MAAM,UACpC;AACA,uBAAa;AAAA,YACX,GAAG,OAAO,KAAK,oBAAoB,GAAG,CAAC,EACpC,OAAO,CAAC,UAAU,UAAU,SAAS,EACrC,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,KAAK,EAAE;AAAA,UACrC;AAAA,QACF,OAAO;AACL,uBAAa,KAAK,GAAG;AAAA,QACvB;AAAA,MACF;AAEA,0BAAoB,SAAS,MAAM,KAAK,IAAI;AAAA,IAC9C,WAAW,eAAe,MAAM,SAAS,KAAK,GAAG;AAC/C,UAAI,sBAAsB,eAAe,MAAM,OAAO,KAAK;AAI3D,UAAI,OAAO,OAAO,KAAK,mBAAmB;AAC1C,UAAI,eAAe,CAAC;AAEpB,eAAS,OAAO,MAAM;AACpB,YACE,oBAAoB,GAAG,MAAM,UAC7B,oBAAoB,GAAG,MAAM,QAC7B,OAAO,oBAAoB,GAAG,MAAM,UACpC;AACA,uBAAa;AAAA,YACX,GAAG,OAAO,KAAK,oBAAoB,GAAG,CAAC,EACpC,OAAO,CAAC,UAAU,UAAU,SAAS,EACrC,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,KAAK,EAAE;AAAA,UACrC;AAAA,QACF,OAAO;AACL,uBAAa,KAAK,GAAG;AAAA,QACvB;AAAA,MACF;AAEA,0BAAoB,OAAO,MAAM,KAAK,IAAI;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,oBAAoB,mBAAmB;AAChD;",
+  "sourcesContent": ["import {extendTailwindMerge, twMerge} from 'tailwind-merge';\nimport {type Config as TailwindConfig} from 'tailwindcss';\n\nconst THEME_SCALES = [\n  'color',\n  'font',\n  'text',\n  'weight',\n  'tracking',\n  'leading',\n  'breakpoint',\n  'container',\n  'spacing',\n  'radius',\n  'shadow',\n  'shadow',\n  'shadow',\n  'blur',\n  'perspective',\n  'aspect',\n  'ease',\n  'animate',\n];\n\nexport function createTailwindMerge(tailwindConfig: TailwindConfig) {\n  if (!tailwindConfig.theme) {\n    return twMerge;\n  }\n\n  let tailwindMergeConfig: Parameters<typeof extendTailwindMerge>[0] = {\n    override: {theme: {}},\n    extend: {theme: {}},\n  };\n\n  for (let scale of THEME_SCALES) {\n    if (!tailwindMergeConfig.override?.theme || !tailwindMergeConfig.extend?.theme) {\n      throw new Error('Creating Tailwind merge failed!');\n    }\n\n    if (tailwindConfig.theme[scale]) {\n      let tailwindConfigScale = tailwindConfig.theme[scale] as Record<\n        string,\n        Record<string, string | unknown> | unknown\n      >;\n      let keys = Object.keys(tailwindConfigScale);\n      let combinedKeys = [];\n\n      for (let key of keys) {\n        if (\n          tailwindConfigScale[key] !== undefined &&\n          tailwindConfigScale[key] !== null &&\n          typeof tailwindConfigScale[key] === 'object'\n        ) {\n          combinedKeys.push(\n            ...Object.keys(tailwindConfigScale[key]).map((value) => `${key}-${value}`),\n          );\n        } else {\n          combinedKeys.push(key);\n        }\n      }\n\n      tailwindMergeConfig.override.theme[scale] = combinedKeys;\n    } else if (tailwindConfig.theme.extend?.[scale]) {\n      let tailwindConfigScale = tailwindConfig.theme.extend[scale] as Record<\n        string,\n        Record<string, string | unknown> | unknown\n      >;\n      let keys = Object.keys(tailwindConfigScale);\n      let combinedKeys = [];\n\n      for (let key of keys) {\n        if (\n          tailwindConfigScale[key] !== undefined &&\n          tailwindConfigScale[key] !== null &&\n          typeof tailwindConfigScale[key] === 'object'\n        ) {\n          combinedKeys.push(\n            ...Object.keys(tailwindConfigScale[key]).map((value) => `${key}-${value}`),\n          );\n        } else {\n          combinedKeys.push(key);\n        }\n      }\n\n      tailwindMergeConfig.extend.theme[scale] = combinedKeys;\n    }\n  }\n\n  return extendTailwindMerge(tailwindMergeConfig);\n}\n"],
+  "mappings": ";AAAA,SAAQ,qBAAqB,eAAc;AAG3C,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,gBAAS,oBAAoB,gBAAgC;AAClE,MAAI,CAAC,eAAe,OAAO;AACzB,WAAO;AAAA,EACT;AAEA,MAAI,sBAAiE;AAAA,IACnE,UAAU,EAAC,OAAO,CAAC,EAAC;AAAA,IACpB,QAAQ,EAAC,OAAO,CAAC,EAAC;AAAA,EACpB;AAEA,WAAS,SAAS,cAAc;AAC9B,QAAI,CAAC,oBAAoB,UAAU,SAAS,CAAC,oBAAoB,QAAQ,OAAO;AAC9E,YAAM,IAAI,MAAM,iCAAiC;AAAA,IACnD;AAEA,QAAI,eAAe,MAAM,KAAK,GAAG;AAC/B,UAAI,sBAAsB,eAAe,MAAM,KAAK;AAIpD,UAAI,OAAO,OAAO,KAAK,mBAAmB;AAC1C,UAAI,eAAe,CAAC;AAEpB,eAAS,OAAO,MAAM;AACpB,YACE,oBAAoB,GAAG,MAAM,UAC7B,oBAAoB,GAAG,MAAM,QAC7B,OAAO,oBAAoB,GAAG,MAAM,UACpC;AACA,uBAAa;AAAA,YACX,GAAG,OAAO,KAAK,oBAAoB,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,KAAK,EAAE;AAAA,UAC3E;AAAA,QACF,OAAO;AACL,uBAAa,KAAK,GAAG;AAAA,QACvB;AAAA,MACF;AAEA,0BAAoB,SAAS,MAAM,KAAK,IAAI;AAAA,IAC9C,WAAW,eAAe,MAAM,SAAS,KAAK,GAAG;AAC/C,UAAI,sBAAsB,eAAe,MAAM,OAAO,KAAK;AAI3D,UAAI,OAAO,OAAO,KAAK,mBAAmB;AAC1C,UAAI,eAAe,CAAC;AAEpB,eAAS,OAAO,MAAM;AACpB,YACE,oBAAoB,GAAG,MAAM,UAC7B,oBAAoB,GAAG,MAAM,QAC7B,OAAO,oBAAoB,GAAG,MAAM,UACpC;AACA,uBAAa;AAAA,YACX,GAAG,OAAO,KAAK,oBAAoB,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,KAAK,EAAE;AAAA,UAC3E;AAAA,QACF,OAAO;AACL,uBAAa,KAAK,GAAG;AAAA,QACvB;AAAA,MACF;AAEA,0BAAoB,OAAO,MAAM,KAAK,IAAI;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,oBAAoB,mBAAmB;AAChD;",
   "names": []
 }

package/build/development/internals/createPalette.js

@@ -23,10 +23,10 @@ export function createPalette({
     let existingSwatch = swatches.find((swatch) => swatch.stop === newSwatch.stop);
     if (existingSwatch) {
       Object.assign(palette, {
-        [existingSwatch.stop]: createDisplayColor(existingSwatch.hex, true)
+        [existingSwatch.stop]: createDisplayColor(existingSwatch.hex, false)
       });
     } else {
-      Object.assign(palette, { [newSwatch.stop]: createDisplayColor(newSwatch.hex, true) });
+      Object.assign(palette, { [newSwatch.stop]: createDisplayColor(newSwatch.hex, false) });
     }
   });
   return {

package/build/development/internals/createPalette.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../source/development/internals/createPalette.ts"],
-  "sourcesContent": ["import {DEFAULT_STOP, type DEFAULT_STOPS} from './constants.js';\nimport {createDisplayColor} from './createDisplayColor.js';\nimport {createSwatches} from './createSwatches.js';\n\nexport type CreatePaletteOptions<N extends string> = {\n  name: N;\n  swatches: Array<{hex: string; stop: number}>;\n  hueShift: number;\n  saturationShift: number;\n};\n\nexport type CreatePaletteReturn<N extends string> = {\n  [K in N]: {[J in (typeof DEFAULT_STOPS)[number]]: string};\n};\n\nexport function createPalette<const N extends string>({\n  name,\n  swatches,\n  hueShift,\n  saturationShift,\n}: CreatePaletteOptions<N>): CreatePaletteReturn<N> {\n  let defaultSwatch = swatches.find((swatch) => swatch.stop === DEFAULT_STOP);\n\n  if (!defaultSwatch) {\n    throw new Error(`Swatches are missing color for stop \"${DEFAULT_STOP}\"!`);\n  }\n\n  let allSwatches = createSwatches({\n    value: defaultSwatch.hex,\n    valueStop: DEFAULT_STOP,\n    h: hueShift,\n    s: saturationShift,\n  });\n  let palette = {};\n\n  allSwatches\n    .filter((swatch) => ![0, 1000].includes(swatch.stop))\n    .forEach((newSwatch) => {\n      let existingSwatch = swatches.find((swatch) => swatch.stop === newSwatch.stop);\n\n      if (existingSwatch) {\n        Object.assign(palette, {\n          [existingSwatch.stop]: createDisplayColor(existingSwatch.hex, true),\n        });\n      } else {\n        Object.assign(palette, {[newSwatch.stop]: createDisplayColor(newSwatch.hex, true)});\n      }\n    });\n\n  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- false positive\n  return {\n    [name]: palette,\n  } as CreatePaletteReturn<N>;\n}\n"],
-  "mappings": ";AAAA,SAAQ,oBAAuC;AAC/C,SAAQ,0BAAyB;AACjC,SAAQ,sBAAqB;AAatB,gBAAS,cAAsC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoD;AAClD,MAAI,gBAAgB,SAAS,KAAK,CAAC,WAAW,OAAO,SAAS,YAAY;AAE1E,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM,wCAAwC,YAAY,IAAI;AAAA,EAC1E;AAEA,MAAI,cAAc,eAAe;AAAA,IAC/B,OAAO,cAAc;AAAA,IACrB,WAAW;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL,CAAC;AACD,MAAI,UAAU,CAAC;AAEf,cACG,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,GAAI,EAAE,SAAS,OAAO,IAAI,CAAC,EACnD,QAAQ,CAAC,cAAc;AACtB,QAAI,iBAAiB,SAAS,KAAK,CAAC,WAAW,OAAO,SAAS,UAAU,IAAI;AAE7E,QAAI,gBAAgB;AAClB,aAAO,OAAO,SAAS;AAAA,QACrB,CAAC,eAAe,IAAI,GAAG,mBAAmB,eAAe,KAAK,IAAI;AAAA,MACpE,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,SAAS,EAAC,CAAC,UAAU,IAAI,GAAG,mBAAmB,UAAU,KAAK,IAAI,EAAC,CAAC;AAAA,IACpF;AAAA,EACF,CAAC;AAGH,SAAO;AAAA,IACL,CAAC,IAAI,GAAG;AAAA,EACV;AACF;",
+  "sourcesContent": ["import {DEFAULT_STOP, type DEFAULT_STOPS} from './constants.js';\nimport {createDisplayColor} from './createDisplayColor.js';\nimport {createSwatches} from './createSwatches.js';\n\nexport type CreatePaletteOptions<N extends string> = {\n  name: N;\n  swatches: Array<{hex: string; stop: number}>;\n  hueShift: number;\n  saturationShift: number;\n};\n\nexport type CreatePaletteReturn<N extends string> = {\n  [K in N]: {[J in (typeof DEFAULT_STOPS)[number]]: string};\n};\n\nexport function createPalette<const N extends string>({\n  name,\n  swatches,\n  hueShift,\n  saturationShift,\n}: CreatePaletteOptions<N>): CreatePaletteReturn<N> {\n  let defaultSwatch = swatches.find((swatch) => swatch.stop === DEFAULT_STOP);\n\n  if (!defaultSwatch) {\n    throw new Error(`Swatches are missing color for stop \"${DEFAULT_STOP}\"!`);\n  }\n\n  let allSwatches = createSwatches({\n    value: defaultSwatch.hex,\n    valueStop: DEFAULT_STOP,\n    h: hueShift,\n    s: saturationShift,\n  });\n  let palette = {};\n\n  allSwatches\n    .filter((swatch) => ![0, 1000].includes(swatch.stop))\n    .forEach((newSwatch) => {\n      let existingSwatch = swatches.find((swatch) => swatch.stop === newSwatch.stop);\n\n      if (existingSwatch) {\n        Object.assign(palette, {\n          [existingSwatch.stop]: createDisplayColor(existingSwatch.hex, false),\n        });\n      } else {\n        Object.assign(palette, {[newSwatch.stop]: createDisplayColor(newSwatch.hex, false)});\n      }\n    });\n\n  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- false positive\n  return {\n    [name]: palette,\n  } as CreatePaletteReturn<N>;\n}\n"],
+  "mappings": ";AAAA,SAAQ,oBAAuC;AAC/C,SAAQ,0BAAyB;AACjC,SAAQ,sBAAqB;AAatB,gBAAS,cAAsC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoD;AAClD,MAAI,gBAAgB,SAAS,KAAK,CAAC,WAAW,OAAO,SAAS,YAAY;AAE1E,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM,wCAAwC,YAAY,IAAI;AAAA,EAC1E;AAEA,MAAI,cAAc,eAAe;AAAA,IAC/B,OAAO,cAAc;AAAA,IACrB,WAAW;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL,CAAC;AACD,MAAI,UAAU,CAAC;AAEf,cACG,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,GAAI,EAAE,SAAS,OAAO,IAAI,CAAC,EACnD,QAAQ,CAAC,cAAc;AACtB,QAAI,iBAAiB,SAAS,KAAK,CAAC,WAAW,OAAO,SAAS,UAAU,IAAI;AAE7E,QAAI,gBAAgB;AAClB,aAAO,OAAO,SAAS;AAAA,QACrB,CAAC,eAAe,IAAI,GAAG,mBAAmB,eAAe,KAAK,KAAK;AAAA,MACrE,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,SAAS,EAAC,CAAC,UAAU,IAAI,GAAG,mBAAmB,UAAU,KAAK,KAAK,EAAC,CAAC;AAAA,IACrF;AAAA,EACF,CAAC;AAGH,SAAO;AAAA,IACL,CAAC,IAAI,GAAG;AAAA,EACV;AACF;",
   "names": []
 }

package/build/development/internals.d.ts

@@ -12,7 +12,6 @@ export * from './internals/hslToHex.js';
 export * from './internals/hslToRgb.js';
 export * from './internals/isHex.js';
 export type * from './internals/PaletteConfig.js';
-export * from './internals/resolveModule.js';
 export * from './internals/round.js';
 export type * from './internals/SwatchValue.js';
 export * from './internals/unsignedModulo.js';

package/build/development/internals.js

@@ -12,7 +12,6 @@ export * from "./internals/hexToRgb.js";
 export * from "./internals/hslToHex.js";
 export * from "./internals/hslToRgb.js";
 export * from "./internals/isHex.js";
-export * from "./internals/resolveModule.js";
 export * from "./internals/round.js";
 export * from "./internals/unsignedModulo.js";
 //# sourceMappingURL=internals.js.map

package/build/development/internals.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/development/internals.ts"],
-  "sourcesContent": ["export * from './internals/clamp.js';\nexport * from './internals/constants.js';\nexport * from './internals/createDisplayColor.js';\nexport * from './internals/createDistributionValues.js';\nexport * from './internals/createHueScale.js';\nexport * from './internals/createPalette.js';\nexport * from './internals/createSaturationScale.js';\nexport * from './internals/createSwatches.js';\nexport * from './internals/hexToHsl.js';\nexport * from './internals/hexToRgb.js';\nexport * from './internals/hslToHex.js';\nexport * from './internals/hslToRgb.js';\nexport * from './internals/isHex.js';\nexport type * from './internals/PaletteConfig.js';\nexport * from './internals/resolveModule.js';\nexport * from './internals/round.js';\nexport type * from './internals/SwatchValue.js';\nexport * from './internals/unsignedModulo.js';\n"],
-  "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd,cAAc;",
+  "sourcesContent": ["export * from './internals/clamp.js';\nexport * from './internals/constants.js';\nexport * from './internals/createDisplayColor.js';\nexport * from './internals/createDistributionValues.js';\nexport * from './internals/createHueScale.js';\nexport * from './internals/createPalette.js';\nexport * from './internals/createSaturationScale.js';\nexport * from './internals/createSwatches.js';\nexport * from './internals/hexToHsl.js';\nexport * from './internals/hexToRgb.js';\nexport * from './internals/hslToHex.js';\nexport * from './internals/hslToRgb.js';\nexport * from './internals/isHex.js';\nexport type * from './internals/PaletteConfig.js';\nexport * from './internals/round.js';\nexport type * from './internals/SwatchValue.js';\nexport * from './internals/unsignedModulo.js';\n"],
+  "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;",
   "names": []
 }

package/build/styles.css

@@ -14,10 +14,13 @@
 }
 @layer base {
   html {
-    @apply font-sans text-neutral-950;
+    font-family: var(--font-sans);
+    color: var(--color-neutral-550);
   }
   * {
-    scrollbar-color: theme(colors.neutral.200) theme(colors.transparent);
+    scrollbar-color: var(--color-neutral-200) var(--color-transparent);
   }
 }
+@theme { --spacing: 4px; }
+@source "./";
 /*# sourceMappingURL=styles.css.map */

package/build/styles.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../source/styles.css"],
-  "sourcesContent": ["@font-face {\n  font-family: InterVariable;\n  font-style: normal;\n  font-weight: 100 900;\n  font-display: swap;\n  src: url('./inter-variable.woff2') format('woff2');\n}\n\n@font-face {\n  font-family: InterVariable;\n  font-style: italic;\n  font-weight: 100 900;\n  font-display: swap;\n  src: url('./inter-variable-italic.woff2') format('woff2');\n}\n\n@layer base {\n  html {\n    @apply font-sans text-neutral-950;\n  }\n\n  * {\n    scrollbar-color: theme(colors.neutral.200) theme(colors.transparent);\n  }\n}\n"],
-  "mappings": "AAAA;AACE,eAAa;AACb,cAAY;AACZ,eAAa,IAAI;AACjB,gBAAc;AACd,OAAK,4BAA8B,OAAO;AAC5C;AAEA;AACE,eAAa;AACb,cAAY;AACZ,eAAa,IAAI;AACjB,gBAAc;AACd,OAAK,mCAAqC,OAAO;AACnD;AAEA;AACE;AACE,WAAO,UAAU;AACnB;AAEA;AACE,qBAAiB,MAAM,MAAM,CAAC,OAAO,MAAM,MAAM,MAAM,CAAC;AAC1D;AACF;",
+  "sourcesContent": ["@font-face {\n  font-family: InterVariable;\n  font-style: normal;\n  font-weight: 100 900;\n  font-display: swap;\n  src: url('./inter-variable.woff2') format('woff2');\n}\n\n@font-face {\n  font-family: InterVariable;\n  font-style: italic;\n  font-weight: 100 900;\n  font-display: swap;\n  src: url('./inter-variable-italic.woff2') format('woff2');\n}\n\n@layer base {\n  html {\n    font-family: var(--font-sans);\n    color: var(--color-neutral-550);\n  }\n\n  * {\n    scrollbar-color: var(--color-neutral-200) var(--color-transparent);\n  }\n}\n\n@theme {\n  --spacing: 4px;\n}\n\n@source \"./\";\n"],
+  "mappings": "AAAA;AACE,eAAa;AACb,cAAY;AACZ,eAAa,IAAI;AACjB,gBAAc;AACd,OAAK,4BAA8B,OAAO;AAC5C;AAEA;AACE,eAAa;AACb,cAAY;AACZ,eAAa,IAAI;AACjB,gBAAc;AACd,OAAK,mCAAqC,OAAO;AACnD;AAEA;AACE;AACE,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA;AACE,qBAAiB,IAAI,qBAAqB,IAAI;AAChD;AACF;AAEA,OAAO,EACL,SAAS,EAAE,GAAG;AAGhB,QAAQ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jakubmazanec/ui",
-  "version": "0.3.2-unstable.f12d7dc8",
+  "version": "0.4.0-next.54d1901e",
   "description": "React component library.",
   "repository": {
     "type": "git",
@@ -22,9 +22,9 @@
     "source"
   ],
   "scripts": {
-    "build": "del-cli build tsconfig.tsbuildinfo && esbuild \"source/**/*\" --platform=node --target=node22.13 --outdir=build --sourcemap --loader:.woff2=copy && tsc && storybook build",
+    "build": "del-cli build tsconfig.tsbuildinfo && esbuild \"source/**/*\" --platform=node --target=node24.1 --outdir=build --sourcemap --loader:.woff2=copy && tsc && storybook build",
     "clean": "del-cli coverage build *.tsbuildinfo",
-    "develop": "concurrently \"esbuild \"source/**/*\" --platform=node --target=node22.13 --outdir=build --sourcemap --watch\" \"tsc --watch\" \"storybook dev -p 6006 --no-open\"",
+    "develop": "concurrently \"esbuild \"source/**/*\" --platform=node --target=node24.1 --outdir=build --sourcemap --loader:.woff2=copy --watch\" \"tsc --watch\" \"storybook dev -p 6006 --no-open\"",
     "document": "del-cli docs && typedoc --options typedoc.config.cjs",
     "format": "prettier . --write --ignore-unknown",
     "lint": "eslint .",
@@ -39,63 +39,58 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@headlessui/react": "^2.2.0",
+    "@headlessui/react": "^2.2.4",
     "@heroicons/react": "^2.2.0",
-    "@jakubmazanec/ts-utils": "3.0.13-unstable.f12d7dc8",
+    "@jakubmazanec/ts-utils": "3.0.13-next.54d1901e",
     "@tanstack/match-sorter-utils": "^8.19.4",
-    "@tanstack/react-table": "^8.20.6",
+    "@tanstack/react-table": "^8.21.3",
     "culori": "^4.0.1",
     "lodash": "^4.17.21",
-    "tailwind-merge": "^2.6.0",
-    "zod": "^3.24.1"
+    "tailwind-merge": "^3.3.1",
+    "zod": "^3.25.67"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.4",
-    "@jakubmazanec/eslint-config": "^4.1.0",
-    "@storybook/addon-controls": "^8.5.2",
-    "@storybook/addon-essentials": "^8.5.2",
-    "@storybook/addon-interactions": "^8.5.2",
-    "@storybook/addon-links": "^8.5.2",
-    "@storybook/blocks": "^8.5.2",
-    "@storybook/preview-api": "^8.5.2",
-    "@storybook/react": "^8.5.2",
-    "@storybook/react-vite": "^8.5.2",
-    "@storybook/test": "^8.5.2",
+    "@chromatic-com/storybook": "^4.0.1",
+    "@jakubmazanec/eslint-config": "4.1.6-next.54d1901e",
+    "@storybook/addon-docs": "^9.0.13",
+    "@storybook/addon-links": "^9.0.13",
+    "@storybook/react-vite": "^9.0.13",
+    "@tailwindcss/vite": "^4.1.10",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@types/culori": "^2.1.1",
-    "@types/lodash": "^4.17.15",
-    "@types/node": "^22.10.7",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "@vitest/coverage-v8": "^3.0.4",
+    "@testing-library/react": "^16.3.0",
+    "@types/culori": "^4.0.0",
+    "@types/lodash": "^4.17.18",
+    "@types/node": "^22.15.21",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.20",
-    "chromatic": "^11.25.2",
-    "concurrently": "^9.1.2",
+    "chromatic": "^13.0.1",
+    "concurrently": "^9.2.0",
     "del-cli": "^6.0.0",
-    "esbuild": "^0.24.2",
-    "eslint": "^9.19.0",
-    "happy-dom": "^16.7.3",
-    "prettier": "^3.4.2",
-    "prettier-plugin-packagejson": "^2.5.8",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "storybook": "^8.5.2",
-    "tailwindcss": "^3.4.17",
-    "tsx": "^4.19.2",
-    "typedoc": "^0.28.4",
-    "typedoc-plugin-markdown": "^4.6.3",
-    "typescript": "^5.7.3",
-    "vitest": "^3.0.4"
+    "esbuild": "^0.25.5",
+    "eslint": "^9.29.0",
+    "happy-dom": "^18.0.1",
+    "prettier": "^3.6.0",
+    "prettier-plugin-packagejson": "^2.5.15",
+    "prettier-plugin-tailwindcss": "^0.6.13",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "storybook": "^9.0.13",
+    "tailwindcss": "^4.1.10",
+    "tsx": "^4.20.3",
+    "typedoc": "^0.28.5",
+    "typedoc-plugin-markdown": "^4.7.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "react": "19.x",
     "react-dom": "19.x",
-    "tailwindcss": "3.x"
+    "tailwindcss": "4.x"
   },
-  "packageManager": "npm@10.9.0",
+  "packageManager": "npm@11.3.0",
   "engines": {
-    "node": "^22.13.0"
+    "node": "^24.1.0"
   }
 }

package/source/components/data-table/DataTable.tsx

@@ -324,7 +324,7 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>
           onSearch={onSearchChange}
         />
       )}
-      <div className="w-full overflow-y-visible overflow-x-scroll [scrollbar-width:thin]">
+      <div className="w-full overflow-x-scroll overflow-y-visible [scrollbar-width:thin]">
         <Table
           style={{
             width: table.getCenterTotalSize(),

package/source/components/data-table/internals/DataTableHeader.tsx

@@ -279,7 +279,7 @@ export function DataTableHeader({
         <Button
           aria-label="Resize"
           // className="absolute right-1 top-2.5 cursor-col-resize"
-          className="absolute right-1 top-1/2 -mt-2.5 cursor-col-resize"
+          className="absolute top-1/2 right-1 -mt-2.5 cursor-col-resize"
           size="small"
           variant="invisible"
           onDoubleClick={handleWidthReset}

package/source/development/createTailwindConfig.ts

@@ -1,11 +1,10 @@
-import {type Config as TailwindConfig} from 'tailwindcss';
+import {type Config as BaseTailwindConfig} from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
 
 import {DEFAULT_STOP, type DEFAULT_STOPS} from './internals/constants.js';
 import {createPalette} from './internals/createPalette.js';
-import {resolveModule} from './internals/resolveModule.js';
 
 let defaultCreateTailwindConfigOptions = {
-  content: ['./{.storybook,app,source,stories,tests}/**/*.{js,jsx,ts,tsx,mdx}', '@jakubmazanec/ui'],
   colors: {
     gray: '#6c6e79',
     neutral: '#6c6e79', // copy of "gray"
@@ -69,11 +68,17 @@ export type CreateTailwindConfigOptions = {
   >;
 };
 
+export type TailwindConfig = {
+  theme: BaseTailwindConfig['theme'];
+  // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237
+  plugins: BaseTailwindConfig['plugins'];
+};
+
 export function createTailwindConfig({
   content,
   colors,
 }: CreateTailwindConfigOptions = defaultCreateTailwindConfigOptions): TailwindConfig {
-  let themeColors = {
+  let themeColors: Record<string, Record<string, string> | string> = {
     transparent: 'transparent',
     current: 'currentColor',
     white: '#fff',
@@ -119,71 +124,64 @@ export function createTailwindConfig({
     }
   }
 
-  let resolvedContent = [];
+  // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237
+  let root: Record<string, Record<string, string> | string> = {
+    '--radius-none': '0',
+    '--radius-0_5': '0.125rem',
+    '--radius-1': '0.25rem',
+    '--radius-1_5': '0.375rem',
+    '--radius-2': '0.5rem',
+    '--radius-2_5': '0.625rem',
+    '--radius-3': '0.75rem',
+    '--radius-4': '1rem',
+    '--radius-full': '9999px',
+    '--font-sans':
+      'InterVariable, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+  };
+
+  for (let [colorName, colorValue] of Object.entries(themeColors)) {
+    if (typeof colorValue === 'string') {
+      let variableName = `--color-${colorName}`;
+      let variableValue = colorValue;
 
-  for (let contentPath of content ?? []) {
-    try {
-      if (contentPath.startsWith('.') || contentPath.startsWith('/')) {
-        resolvedContent.push(contentPath);
-      } else {
-        resolvedContent.push(`${resolveModule(contentPath)}/**`);
+      root[variableName] = variableValue;
+      themeColors[colorName] = `var(${variableName})`;
+    } else if (typeof colorValue === 'object') {
+      for (let [shadeName, shadeValue] of Object.entries(colorValue)) {
+        let variableName = `--color-${colorName}-${shadeName}`;
+        let variableValue = shadeValue;
+
+        root[variableName] = variableValue;
+        (themeColors[colorName] as Record<string, string>)[shadeName] = `var(${variableName})`; // type assertion is ok, we know the shape of `themeColors`
       }
-    } catch {
-      // no-op, because we're catching error caused by `createRequire` not being a function in a browser environment
     }
   }
 
   return {
-    content: resolvedContent,
     theme: {
       colors: themeColors,
-      borderRadius: {
-        none: '0',
-        DEFAULT: '0.25rem',
-        '0.5': '0.125rem',
-        '1': '0.25rem',
-        '1.5': '0.375rem',
-        '2': '0.5rem',
-        '2.5': '0.625rem',
-        '3': '0.75rem',
-        '4': '1rem',
-        full: '9999px',
+      radius: {
+        none: 'var(--radius-none)',
+        '0.5': 'var(--radius-0_5)',
+        '1': 'var(--radius-1)',
+        '1.5': 'var(--radius-1_5)',
+        '2': 'var(--radius-2)',
+        '2.5': 'var(--radius-2_5)',
+        '3': 'var(--radius-3)',
+        '4': 'var(--radius-4)',
+        full: 'var(--radius-full)',
       },
-      extend: {
-        spacing: {
-          13: '3.25rem',
-          15: '3.75rem',
-          17: '4.25rem',
-          18: '4.5rem',
-          19: '4.75rem',
-          21: '5.25rem',
-          22: '5.5rem',
-          23: '5.75rem',
-          25: '6.25rem',
-          26: '6.5rem',
-          27: '6.75rem',
-          29: '6.25rem',
-          30: '7.5rem',
-          34: '8.5rem',
-          38: '9.5rem',
-          40: '10rem',
-        },
-        fontFamily: {
-          sans: [
-            'InterVariable',
-            'ui-sans-serif',
-            'system-ui',
-            'sans-serif',
-            '"Apple Color Emoji"',
-            '"Segoe UI Emoji"',
-            '"Segoe UI Symbol"',
-            '"Noto Color Emoji"',
-          ],
-        },
+      font: {
+        sans: 'var(--font-sans)',
       },
     },
-    future: {
-      hoverOnlyWhenSupported: true,
-    },
+    // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237
+    plugins: [
+      plugin(({addBase}) => {
+        addBase({
+          ':root': root,
+        });
+      }),
+    ],
   };
 }

package/source/development/createTailwindMerge.ts

@@ -2,31 +2,24 @@ import {extendTailwindMerge, twMerge} from 'tailwind-merge';
 import {type Config as TailwindConfig} from 'tailwindcss';
 
 const THEME_SCALES = [
-  'colors',
+  'color',
+  'font',
+  'text',
+  'weight',
+  'tracking',
+  'leading',
+  'breakpoint',
+  'container',
   'spacing',
+  'radius',
+  'shadow',
+  'shadow',
+  'shadow',
   'blur',
-  'brightness',
-  'borderColor',
-  'borderRadius',
-  'borderSpacing',
-  'borderWidth',
-  'contrast',
-  'grayscale',
-  'hueRotate',
-  'invert',
-  'gap',
-  'gradientColorStops',
-  'gradientColorStopPositions',
-  'inset',
-  'margin',
-  'opacity',
-  'padding',
-  'saturate',
-  'scale',
-  'sepia',
-  'skew',
-  'space',
-  'translate',
+  'perspective',
+  'aspect',
+  'ease',
+  'animate',
 ];
 
 export function createTailwindMerge(tailwindConfig: TailwindConfig) {
@@ -59,9 +52,7 @@ export function createTailwindMerge(tailwindConfig: TailwindConfig) {
           typeof tailwindConfigScale[key] === 'object'
         ) {
           combinedKeys.push(
-            ...Object.keys(tailwindConfigScale[key])
-              .filter((value) => value !== 'DEFAULT')
-              .map((value) => `${key}-${value}`),
+            ...Object.keys(tailwindConfigScale[key]).map((value) => `${key}-${value}`),
           );
         } else {
           combinedKeys.push(key);
@@ -84,9 +75,7 @@ export function createTailwindMerge(tailwindConfig: TailwindConfig) {
           typeof tailwindConfigScale[key] === 'object'
         ) {
           combinedKeys.push(
-            ...Object.keys(tailwindConfigScale[key])
-              .filter((value) => value !== 'DEFAULT')
-              .map((value) => `${key}-${value}`),
+            ...Object.keys(tailwindConfigScale[key]).map((value) => `${key}-${value}`),
           );
         } else {
           combinedKeys.push(key);

package/source/development/internals/createPalette.ts

@@ -40,10 +40,10 @@ export function createPalette<const N extends string>({
 
       if (existingSwatch) {
         Object.assign(palette, {
-          [existingSwatch.stop]: createDisplayColor(existingSwatch.hex, true),
+          [existingSwatch.stop]: createDisplayColor(existingSwatch.hex, false),
         });
       } else {
-        Object.assign(palette, {[newSwatch.stop]: createDisplayColor(newSwatch.hex, true)});
+        Object.assign(palette, {[newSwatch.stop]: createDisplayColor(newSwatch.hex, false)});
       }
     });
 

package/source/development/internals.ts

@@ -12,7 +12,6 @@ export * from './internals/hslToHex.js';
 export * from './internals/hslToRgb.js';
 export * from './internals/isHex.js';
 export type * from './internals/PaletteConfig.js';
-export * from './internals/resolveModule.js';
 export * from './internals/round.js';
 export type * from './internals/SwatchValue.js';
 export * from './internals/unsignedModulo.js';

package/source/styles.css

@@ -16,10 +16,17 @@
 
 @layer base {
   html {
-    @apply font-sans text-neutral-950;
+    font-family: var(--font-sans);
+    color: var(--color-neutral-550);
   }
 
   * {
-    scrollbar-color: theme(colors.neutral.200) theme(colors.transparent);
+    scrollbar-color: var(--color-neutral-200) var(--color-transparent);
   }
 }
+
+@theme {
+  --spacing: 4px;
+}
+
+@source "./";

package/build/development/internals/resolveModule.d.ts

@@ -1 +0,0 @@
-export declare function resolveModule(moduleId: string): string;

package/build/development/internals/resolveModule.js

@@ -1,9 +0,0 @@
-"use strict";
-import module from "node:module";
-import path from "node:path";
-export function resolveModule(moduleId) {
-  let require = module.createRequire(import.meta.url);
-  let modulePath = path.dirname(require.resolve(`${moduleId}/package.json`));
-  return modulePath;
-}
-//# sourceMappingURL=resolveModule.js.map

package/build/development/internals/resolveModule.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../source/development/internals/resolveModule.ts"],
-  "sourcesContent": ["import module from 'node:module';\nimport path from 'node:path';\n\nexport function resolveModule(moduleId: string) {\n  let require = module.createRequire(import.meta.url);\n  let modulePath = path.dirname(require.resolve(`${moduleId}/package.json`));\n\n  return modulePath;\n}\n"],
-  "mappings": ";AAAA,OAAO,YAAY;AACnB,OAAO,UAAU;AAEV,gBAAS,cAAc,UAAkB;AAC9C,MAAI,UAAU,OAAO,cAAc,YAAY,GAAG;AAClD,MAAI,aAAa,KAAK,QAAQ,QAAQ,QAAQ,GAAG,QAAQ,eAAe,CAAC;AAEzE,SAAO;AACT;",
-  "names": []
-}

package/source/development/internals/resolveModule.ts

@@ -1,9 +0,0 @@
-import module from 'node:module';
-import path from 'node:path';
-
-export function resolveModule(moduleId: string) {
-  let require = module.createRequire(import.meta.url);
-  let modulePath = path.dirname(require.resolve(`${moduleId}/package.json`));
-
-  return modulePath;
-}