@tint-ui/data-table 0.3.5

package/index.js

@@ -0,0 +1,16 @@
+export * from "./classes.js";
+export * from "./filter-classes.js";
+export * from "./toolbar-classes.js";
+export * from "./pagination-classes.js";
+export * from "./context.js";
+export * from "./cell-adapter-type.js";
+export * from "./filter-adapter-type.js";
+export * from "./data-table-content.js";
+export * from "./data-table-pagination.js";
+export * from "./data-table-toolbar.js";
+export * from "./data-table-views-options.js";
+export * from "./data-table.js";
+export * from "./pagination-arrow.js";
+export * from "./pagination-number.js";
+export * from "./pagination-size-options.js";
+export * from "./types.js";

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@tint-ui/data-table",
+  "version": "0.3.5",
+  "author": "phragon@websoftlab.com",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.20.1",
+    "@tint-ui/button": "^0.3.0",
+    "@tint-ui/input": "^0.3.0",
+    "@tint-ui/input-checkbox": "^0.3.0",
+    "@tint-ui/slide-navigator": "^0.3.0",
+    "@tint-ui/svg-icon": "^0.3.0",
+    "@tint-ui/table": "^0.3.0",
+    "@tint-ui/theme": "^0.3.0",
+    "@tint-ui/tools": "^0.3.0",
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@tanstack/react-table": "^8.21.3",
+    "@types/react": "^18.0.12"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/websoftlab/tint-ui.git",
+    "directory": "packages/data-table"
+  },
+  "peerDependencies": {
+    "@tanstack/react-table": "^8.21.3",
+    "react": "^16.8.0 || ^17 || ^18 || ^19"
+  },
+  "exports": {
+    ".": {
+      "require": "./cjs/index.js",
+      "default": "./index.js"
+    },
+    "./styles.module.scss": {
+      "require": "./styles.module.scss",
+      "default": "./styles.module.scss"
+    },
+    "./styles.module.css": {
+      "require": "./styles.module.css",
+      "default": "./styles.module.css"
+    },
+    "./styles.css": {
+      "require": "./styles.css",
+      "default": "./styles.css"
+    },
+    "./styles-filter.module.scss": {
+      "require": "./styles-filter.module.scss",
+      "default": "./styles-filter.module.scss"
+    },
+    "./styles-filter.module.css": {
+      "require": "./styles-filter.module.css",
+      "default": "./styles-filter.module.css"
+    },
+    "./styles-filter.css": {
+      "require": "./styles-filter.css",
+      "default": "./styles-filter.css"
+    },
+    "./styles-pagination.module.scss": {
+      "require": "./styles-pagination.module.scss",
+      "default": "./styles-pagination.module.scss"
+    },
+    "./styles-pagination.module.css": {
+      "require": "./styles-pagination.module.css",
+      "default": "./styles-pagination.module.css"
+    },
+    "./styles-pagination.css": {
+      "require": "./styles-pagination.css",
+      "default": "./styles-pagination.css"
+    },
+    "./styles-toolbar.module.scss": {
+      "require": "./styles-toolbar.module.scss",
+      "default": "./styles-toolbar.module.scss"
+    },
+    "./styles-toolbar.module.css": {
+      "require": "./styles-toolbar.module.css",
+      "default": "./styles-toolbar.module.css"
+    },
+    "./styles-toolbar.css": {
+      "require": "./styles-toolbar.css",
+      "default": "./styles-toolbar.css"
+    },
+    "./styles.json": {
+      "require": "./styles.json",
+      "default": "./styles.json"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "default": "./package.json"
+    }
+  },
+  "main": "./cjs/index.js",
+  "type": "module",
+  "module": "./index.js",
+  "types": "./index.d.ts"
+}

package/pagination-arrow.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const PaginationArrow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type PaginationArrowProps = React.ComponentProps<typeof PaginationArrow>;
+export { PaginationArrow };
+export type { PaginationArrowProps };

package/pagination-arrow.js

@@ -0,0 +1,86 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import clsx from "clsx";
+import { Button } from "@tint-ui/button";
+import { SvgThemeIcon } from "@tint-ui/svg-icon";
+import { useDataTableContext } from "./context.js";
+import { useDataTablePaginationClasses } from "./pagination-classes.js";
+const PaginationArrow = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const classes = useDataTablePaginationClasses();
+  const {
+    loading,
+    table,
+    lexicon,
+    navbar: {
+      size
+    }
+  } = useDataTableContext();
+  const pageCount = table.getPageCount();
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: clsx(classes.group, className),
+    ref: ref
+  }), pageCount > 1 && /*#__PURE__*/React.createElement("span", null, lexicon.pageOf), /*#__PURE__*/React.createElement(Button, {
+    "aria-label": lexicon.pageFirst,
+    variant: "outline",
+    size: size,
+    className: classes.firstLast,
+    onClick: () => {
+      table.setPageIndex(0);
+    },
+    disabled: loading || !table.getCanPreviousPage(),
+    iconOnly: true,
+    iconLeft: /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: "pagination-first",
+      "aria-hidden": "true"
+    })
+  }), /*#__PURE__*/React.createElement(Button, {
+    "aria-label": lexicon.pagePrevious,
+    variant: "outline",
+    size: size,
+    className: classes.previousNext,
+    onClick: () => {
+      table.previousPage();
+    },
+    disabled: loading || !table.getCanPreviousPage(),
+    iconOnly: true,
+    iconLeft: /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: "pagination-previous",
+      "aria-hidden": "true"
+    })
+  }), /*#__PURE__*/React.createElement(Button, {
+    "aria-label": lexicon.pageNext,
+    variant: "outline",
+    size: size,
+    className: classes.previousNext,
+    onClick: () => {
+      table.nextPage();
+    },
+    disabled: loading || !table.getCanNextPage(),
+    iconOnly: true,
+    iconRight: /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: "pagination-next",
+      "aria-hidden": "true"
+    })
+  }), /*#__PURE__*/React.createElement(Button, {
+    "aria-label": lexicon.pageLast,
+    variant: "outline",
+    size: size,
+    className: classes.firstLast,
+    onClick: () => {
+      table.setPageIndex(table.getPageCount() - 1);
+    },
+    disabled: loading || !table.getCanNextPage(),
+    iconOnly: true,
+    iconRight: /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: "pagination-last",
+      "aria-hidden": "true"
+    })
+  }));
+});
+PaginationArrow.displayName = "PaginationArrow";
+export { PaginationArrow };

package/pagination-classes.d.ts

@@ -0,0 +1,20 @@
+declare const paginationClasses: {
+    pagination: string;
+    divider: string;
+    group: string;
+    separator: string;
+    firstLast: string;
+    previousNext: string;
+};
+declare const useDataTablePaginationClasses: () => {
+    pagination: string;
+    divider: string;
+    group: string;
+    separator: string;
+    firstLast: string;
+    previousNext: string;
+};
+type DataTablePaginationClassesType = keyof typeof paginationClasses;
+type DataTablePaginationClasses = Record<DataTablePaginationClassesType, string>;
+export { paginationClasses, useDataTablePaginationClasses };
+export type { DataTablePaginationClassesType, DataTablePaginationClasses };

package/pagination-classes.js

@@ -0,0 +1,16 @@
+import { classGroup } from "@tint-ui/tools/class-group";
+import { useClasses } from "@tint-ui/theme";
+const {
+  base,
+  b
+} = classGroup("data-table-pagination");
+const paginationClasses = {
+  pagination: base,
+  divider: b("divider"),
+  group: b("group"),
+  separator: b("separator"),
+  firstLast: b("first-last"),
+  previousNext: b("previous-next")
+};
+const useDataTablePaginationClasses = () => useClasses("data-table-pagination", paginationClasses);
+export { paginationClasses, useDataTablePaginationClasses };

package/pagination-number.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const PaginationNumber: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type PaginationNumberProps = React.ComponentProps<typeof PaginationNumber>;
+export { PaginationNumber };
+export type { PaginationNumberProps };

package/pagination-number.js

@@ -0,0 +1,59 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import clsx from "clsx";
+import { Button } from "@tint-ui/button";
+import { SvgThemeIcon } from "@tint-ui/svg-icon";
+import { useDataTableContext } from "./context.js";
+import { useDataTablePaginationClasses } from "./pagination-classes.js";
+import { getPaginationNumber } from "./utils.js";
+const PaginationNumber = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const classes = useDataTablePaginationClasses();
+  const {
+    loading,
+    loadingTarget,
+    table,
+    lexicon,
+    navbar: {
+      size,
+      numberSize
+    }
+  } = useDataTableContext();
+  const pageNumber = table.getState().pagination.pageIndex + 1;
+  const pageCount = table.getPageCount();
+  const pages = React.useMemo(() => getPaginationNumber(pageNumber, pageCount, numberSize), [pageNumber, pageCount, numberSize]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: clsx(classes.group, className),
+    ref: ref
+  }), pages.map((item, index) => {
+    if (item.divider) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: classes.separator,
+        key: index
+      }, /*#__PURE__*/React.createElement(SvgThemeIcon, {
+        icon: "dots"
+      }));
+    }
+    const {
+      page
+    } = item;
+    return /*#__PURE__*/React.createElement(Button, {
+      key: index,
+      "aria-label": item.page === 1 ? lexicon.pageFirst : page === pageCount ? lexicon.pageLast : String(page),
+      variant: item.selected ? "primary" : "outline",
+      size: size,
+      onClick: () => {
+        table.setPageIndex(page - 1);
+      },
+      disabled: loading || item.selected,
+      loading: loading && loadingTarget === `pagination:${page}`,
+      iconOnly: true
+    }, page);
+  }));
+});
+PaginationNumber.displayName = "PaginationNumber";
+export { PaginationNumber };

package/pagination-size-options.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const PaginationSizeOptions: () => React.JSX.Element | null;
+export { PaginationSizeOptions };

package/pagination-size-options.js

@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@tint-ui/button";
+import { DropdownMenu, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuPortal } from "@tint-ui/dropdown-menu";
+import { useDataTableContext } from "./context.js";
+import { SvgThemeIcon } from "@tint-ui/svg-icon";
+const PaginationSizeOptions = () => {
+  const {
+    loading,
+    loadingTarget,
+    navbar: {
+      pageSize,
+      pageSizeOptions,
+      size,
+      onPageSizeChange
+    }
+  } = useDataTableContext();
+  if (pageSizeOptions.length < 2) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownMenuTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "outline",
+    disabled: loading,
+    loading: loading && loadingTarget === "page-size",
+    size: size,
+    iconRight: /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: "selector"
+    })
+  }, pageSize)), /*#__PURE__*/React.createElement(DropdownMenuPortal, null, /*#__PURE__*/React.createElement(DropdownMenuContent, {
+    align: "end"
+  }, /*#__PURE__*/React.createElement(DropdownMenuRadioGroup, {
+    value: String(pageSize),
+    onValueChange: value => {
+      onPageSizeChange(parseInt(value));
+    }
+  }, pageSizeOptions.map(option => /*#__PURE__*/React.createElement(DropdownMenuRadioItem, {
+    key: option,
+    value: String(option)
+  }, option))))));
+};
+export { PaginationSizeOptions };

package/row-button-menu.d.ts

@@ -0,0 +1,5 @@
+import type { CellContext } from "@tanstack/react-table";
+import type { RowMenuOption } from "./types";
+import * as React from "react";
+declare const rowButtonMenu: <TData>(info: CellContext<TData, unknown>, menu: RowMenuOption<TData>[]) => React.JSX.Element;
+export { rowButtonMenu };

package/row-button-menu.js

@@ -0,0 +1,45 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@tint-ui/button";
+import { TooltipText } from "@tint-ui/tooltip";
+import { SvgThemeIcon } from "@tint-ui/svg-icon";
+import { useRowMenu } from "./use-row-menu.js";
+import { useDataTableClasses } from "./classes.js";
+import { useDataTableContext } from "./context.js";
+const rowButtonMenu = (info, menu) => {
+  const classes = useDataTableClasses();
+  const {
+    loading
+  } = useDataTableContext();
+  const rowHandler = useRowMenu(info);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.menuGroup
+  }, menu.map(item => {
+    const {
+      icon,
+      label,
+      id,
+      destructive
+    } = item;
+    const {
+      disabled,
+      onClick
+    } = rowHandler(item);
+    return /*#__PURE__*/React.createElement(TooltipText, {
+      key: id,
+      tooltip: label,
+      asChild: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      disabled: disabled || loading,
+      onClick: onClick,
+      iconOnly: true,
+      size: "xs",
+      variant: destructive ? "destructive" : "outline",
+      iconLeft: /*#__PURE__*/React.createElement(SvgThemeIcon, {
+        icon: icon || "data-table-row-menu"
+      })
+    }));
+  }));
+};
+export { rowButtonMenu };

package/row-popover-menu.d.ts

@@ -0,0 +1,5 @@
+import type { CellContext } from "@tanstack/react-table";
+import type { RowMenuOption } from "./types";
+import * as React from "react";
+declare const rowPopoverMenu: <TData>(info: CellContext<TData, unknown>, menu: RowMenuOption<TData>[]) => React.JSX.Element;
+export { rowPopoverMenu };

package/row-popover-menu.js

@@ -0,0 +1,48 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@tint-ui/button";
+import { SvgThemeIcon } from "@tint-ui/svg-icon";
+import { DropdownMenu, DropdownMenuItem, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuPortal } from "@tint-ui/dropdown-menu";
+import { useRowMenu } from "./use-row-menu.js";
+import { useDataTableContext } from "./context.js";
+import { useDataTableClasses } from "./classes.js";
+const rowPopoverMenu = (info, menu) => {
+  const classes = useDataTableClasses();
+  const {
+    loading
+  } = useDataTableContext();
+  const rowMenu = useRowMenu(info);
+  return /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownMenuTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    disabled: loading,
+    size: "xs",
+    iconOnly: true,
+    rounded: true,
+    iconRight: /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: "data-table-row-menu"
+    })
+  })), /*#__PURE__*/React.createElement(DropdownMenuPortal, null, /*#__PURE__*/React.createElement(DropdownMenuContent, null, menu.map(item => {
+    const {
+      icon,
+      label,
+      id,
+      destructive
+    } = item;
+    const {
+      disabled,
+      onClick
+    } = rowMenu(item);
+    return /*#__PURE__*/React.createElement(DropdownMenuItem, {
+      key: id,
+      className: destructive ? classes.menuItemDestructive : undefined,
+      disabled: disabled,
+      onSelect: onClick
+    }, icon != null && /*#__PURE__*/React.createElement(SvgThemeIcon, {
+      icon: icon
+    }), label);
+  }))));
+};
+export { rowPopoverMenu };

package/styles-filter.css

@@ -0,0 +1 @@
+.tui-data-table-filter_badges{align-items:center;gap:.5rem}.tui-data-table-filter_badges [data-size=sm]{gap:.25rem}.tui-data-table-filter_badge{border-radius:calc(var(--radius) - 4px);display:inline-block;font-weight:400;max-width:120px;overflow:hidden;padding-left:.25rem;padding-right:.25rem;text-overflow:ellipsis;white-space:nowrap}.tui-data-table-filter_popover{max-width:200px;padding:0}.tui-data-table-filter{border-style:dashed}.tui-data-table-filter>.tui-data-table-filter_badge,.tui-data-table-filter>.tui-data-table-filter_badges{margin-left:.25rem;margin-right:-.5rem}.tui-data-table-filter:hover .tui-data-table-filter_badge{background-color:hsl(var(--background))}.tui-data-table-filter_mobile{display:inline-flex}@media (min-width:1024px){.tui-data-table-filter_mobile{display:none}}.tui-data-table-filter_mobile.tui-data-table-filter_badge{display:flow-root}@media (min-width:1024px){.tui-data-table-filter_mobile.tui-data-table-filter_badge{display:none}}.tui-data-table-filter_desktop{display:none}@media (min-width:1024px){.tui-data-table-filter_desktop{display:inline-flex}}.tui-data-table-filter_checkbox{align-items:center;border:1px dashed #64748b80;border-radius:calc(var(--radius) - 4px);display:inline-flex;height:1rem;justify-content:center;opacity:.5;width:1rem}.tui-data-table-filter_checkbox svg{height:1rem;visibility:hidden;width:1rem}.tui-data-table-filter_checkbox.tui-data-table-filter_selected{border-color:#0000;opacity:1}.tui-data-table-filter_checkbox.tui-data-table-filter_selected svg{visibility:visible}.tui-data-table-filter_text{width:180px}@media (min-width:1024px){.tui-data-table-filter_text{width:220px}}.tui-data-table-filter_text.tui-data-table-filter_text--mobile{width:100%}.tui-data-table-filter_icon{color:hsl(var(--muted-foreground));height:1rem;margin-right:.5rem;width:1rem}.tui-data-table-filter_label{margin-right:auto}

package/styles-filter.module.css

@@ -0,0 +1,64 @@
+.badges {
+  @apply gap-2 items-center;
+}
+.badges [data-size=sm] {
+  @apply gap-1;
+}
+
+.badge {
+  @apply inline-block rounded-sm px-1 font-normal truncate max-w-[120px];
+}
+
+.popover {
+  @apply max-w-[200px] p-0;
+}
+
+.button {
+  @apply border-dashed;
+}
+.button > .badges,
+.button > .badge {
+  @apply ml-1 -mr-2;
+}
+.button:hover .badge {
+  @apply bg-background;
+}
+
+.mobile {
+  @apply inline-flex lg:hidden;
+}
+.mobile.badge {
+  @apply flow-root lg:hidden;
+}
+
+.desktop {
+  @apply hidden lg:inline-flex;
+}
+
+.checkbox {
+  @apply inline-flex size-4 items-center justify-center rounded-sm border border-dashed border-slate-500/50 opacity-50;
+}
+.checkbox svg {
+  @apply size-4 invisible;
+}
+.checkbox.selected {
+  @apply border-transparent opacity-100;
+}
+.checkbox.selected svg {
+  @apply visible;
+}
+
+.text {
+  @apply w-[180px] lg:w-[220px];
+}
+.text.textMobile {
+  @apply w-full;
+}
+
+.icon {
+  @apply mr-2 h-4 w-4 text-muted-foreground;
+}
+
+.label {
+  @apply mr-auto;
+}

package/styles-filter.module.scss

@@ -0,0 +1,65 @@
+.badges {
+	@apply gap-2 items-center;
+	[data-size="sm"] {
+		@apply gap-1;
+	}
+}
+
+.badge {
+	@apply inline-block rounded-sm px-1 font-normal truncate max-w-[120px];
+}
+
+.popover {
+	@apply max-w-[200px] p-0;
+}
+
+.button {
+	@apply border-dashed;
+	> .badges,
+	> .badge {
+		@apply ml-1 -mr-2;
+	}
+
+	&:hover .badge {
+		@apply bg-background;
+	}
+}
+
+.mobile {
+	@apply inline-flex lg:hidden;
+	&.badge {
+		@apply flow-root lg:hidden;
+	}
+}
+
+.desktop {
+	@apply hidden lg:inline-flex;
+}
+
+.checkbox {
+	@apply inline-flex size-4 items-center justify-center rounded-sm border border-dashed border-slate-500/50 opacity-50;
+	svg {
+		@apply size-4 invisible;
+	}
+	&.selected {
+		@apply border-transparent opacity-100;
+		svg {
+			@apply visible;
+		}
+	}
+}
+
+.text {
+	@apply w-[180px] lg:w-[220px];
+	&.textMobile {
+		@apply w-full;
+	}
+}
+
+.icon {
+	@apply mr-2 h-4 w-4 text-muted-foreground;
+}
+
+.label {
+	@apply mr-auto;
+}

package/styles-pagination.css

@@ -0,0 +1 @@
+.tui-data-table-pagination{align-items:center;display:flex;flex-direction:column;gap:1rem;justify-content:space-between;margin-top:.75rem;max-width:100%;width:100%}@media (min-width:640px){.tui-data-table-pagination{flex-direction:row;gap:.75rem}}.tui-data-table-pagination .tui-data-table-pagination_divider{margin-left:auto}.tui-data-table-pagination_divider{height:0;overflow:hidden;position:relative;width:0}.tui-data-table-pagination_group{align-items:center;display:flex;gap:.5rem}.tui-data-table-pagination_first-last{display:none}@media (min-width:1024px){.tui-data-table-pagination_first-last{display:inline-flex}}.tui-data-table-pagination_separator{align-items:center;color:#64748b80;display:inline-flex;height:1.25rem;justify-content:center;width:1.25rem}.tui-data-table-pagination_separator>svg{height:100%;vertical-align:top;width:100%}[data-navbar-size=sm] .tui-data-table-pagination_separator{height:1rem;width:1rem}

package/styles-pagination.module.css

@@ -0,0 +1,28 @@
+.pagination {
+  @apply flex max-w-full w-full flex-col items-center justify-between gap-4 sm:flex-row sm:gap-3 mt-3;
+}
+.pagination .divider {
+  @apply ml-auto;
+}
+
+.divider {
+  @apply relative size-0 overflow-hidden;
+}
+
+.group {
+  @apply flex items-center gap-2;
+}
+
+.firstLast {
+  @apply hidden lg:inline-flex;
+}
+
+.separator {
+  @apply inline-flex justify-center items-center size-5 text-slate-500/50;
+}
+.separator > svg {
+  @apply size-[100%] align-top;
+}
+[data-navbar-size=sm] .separator {
+  @apply size-4;
+}

package/styles-pagination.module.scss

@@ -0,0 +1,31 @@
+.pagination {
+	@apply flex max-w-full w-full flex-col items-center justify-between gap-4 sm:flex-row sm:gap-3 mt-3;
+	.divider {
+		@apply ml-auto;
+	}
+}
+
+.divider {
+	@apply relative size-0 overflow-hidden;
+}
+
+.group {
+	@apply flex items-center gap-2;
+}
+
+.firstLast {
+	@apply hidden lg:inline-flex;
+}
+
+.previousNext {
+}
+
+.separator {
+	@apply inline-flex justify-center items-center size-5 text-slate-500/50;
+	> svg {
+		@apply size-[100%] align-top;
+	}
+	[data-navbar-size="sm"] & {
+		@apply size-4;
+	}
+}

package/styles-toolbar.css

@@ -0,0 +1 @@
+.tui-data-table-toolbar{align-items:center;container-name:toolbar;container-type:inline-size;display:flex;gap:.75rem;justify-content:space-between;margin-bottom:.75rem;max-width:100%;width:100%}.tui-data-table-toolbar_heading{align-self:center;color:hsl(var(--muted-foreground));font-size:1rem;font-weight:500;line-height:1.5rem;line-height:1.25;margin-left:1.25rem}[data-size=sm] .tui-data-table-toolbar_heading{font-size:.875rem;line-height:1.25rem;line-height:1.25}.tui-data-table-toolbar--with-filter{display:grid;gap:0;grid-template-columns:min-content minmax(0,1fr) min-content min-content}.tui-data-table-toolbar--with-filter>.tui-data-table-toolbar_heading{margin-left:0;visibility:hidden;white-space:nowrap;width:0}.tui-data-table-toolbar--with-filter-group{flex-direction:column}.tui-data-table-toolbar_filters,.tui-data-table-toolbar_reset,.tui-data-table-toolbar_search{margin-right:.75rem}.tui-data-table-toolbar_filters:empty,.tui-data-table-toolbar_reset:empty,.tui-data-table-toolbar_search:empty{margin-right:0;min-width:0;width:0}.tui-data-table-toolbar_filters [data-type=slider-viewport]{margin:-.25rem}.tui-data-table-toolbar_mobile{max-width:100%;width:100%}.tui-data-table-toolbar_mobile:first-child{display:grid;grid-template-columns:minmax(0,1fr) min-content min-content}@container toolbar (max-width: 1023px){button[data-type=toolbar-button-options]{padding-left:0;padding-right:0}button[data-type=toolbar-button-options]>span{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}button[data-type=toolbar-button-options]>svg{margin-left:0!important;margin-right:0!important}}@container toolbar (max-width: 767px){button[data-type=toolbar-button-reset]{padding-left:0;padding-right:0}button[data-type=toolbar-button-reset]>span{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}button[data-type=toolbar-button-reset]>svg{margin-left:0!important;margin-right:0!important}}