@adapttable/shadcn 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,43 @@
1
1
  # @adapttable/shadcn
2
2
 
3
+ ## 0.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 6ab1391: docs: every package README now leads with a click-to-play demo — a poster (with
8
+ a play button) that links to an mp4 of the table in action — replacing the
9
+ autoplaying GIF. Republishing so the new READMEs land on npm.
10
+ - Updated dependencies [6ab1391]
11
+ - @adapttable/unstyled@0.3.1
12
+
13
+ ## 0.2.0
14
+
15
+ ### Minor Changes
16
+
17
+ - a90a2c2: Logical column pinning, so pinning stays correct under RTL.
18
+
19
+ **Breaking.** Pinned-side values are now `"start"` / `"end"` (were `"left"` /
20
+ `"right"`) — this is the public `pinned` layout value and the `colPin` URL token
21
+ (e.g. `colPin=name:start`); pre-existing `left`/`right` URLs no longer parse. The
22
+ label keys `pinLeft` / `pinRight` / `moveLeft` / `moveRight` are renamed to
23
+ `pinStart` / `pinEnd` / `moveStart` / `moveEnd`, with logical display strings
24
+ shipped for every locale. Pinning a data column is now a start-only toggle; the
25
+ injected actions column keeps its one-click end-pin.
26
+
27
+ To migrate: update any `defaultColumnLayout={{ pinned: { x: "left" } }}` to
28
+ `"start"` (and `"right"` → `"end"`), any persisted `colPin` URLs, and any custom
29
+ `labels` overriding the renamed keys.
30
+
31
+ - a90a2c2: Numbered page buttons in every adapter's pagination (with first/last and
32
+ ellipsis truncation), replacing the prev/next-only control — driven by a shared
33
+ `paginationItems` builder in `@adapttable/core`.
34
+
35
+ ### Patch Changes
36
+
37
+ - Updated dependencies [a90a2c2]
38
+ - Updated dependencies [a90a2c2]
39
+ - @adapttable/unstyled@0.3.0
40
+
3
41
  ## 0.1.0
4
42
 
5
43
  ### Minor Changes
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # @adapttable/shadcn
2
2
 
3
- ![@adapttable/shadcn — a shadcn/ui data table built on AdaptTable](https://raw.githubusercontent.com/orwa-mahmoud/adapttable/main/assets/hero-shadcn.png)
3
+ [![@adapttable/shadcn — a shadcn/ui data table built on AdaptTable](https://orwa-mahmoud.github.io/adapttable/media/demo-shadcn-poster.png)](https://orwa-mahmoud.github.io/adapttable/media/demo-shadcn.mp4)
4
+
5
+ ▶ **[Watch the demo](https://orwa-mahmoud.github.io/adapttable/media/demo-shadcn.mp4)**
4
6
 
5
7
  **[📖 Documentation](https://orwa-mahmoud.github.io/adapttable/)** · **[🚀 Live demo](https://orwa-mahmoud.github.io/adapttable/demo/)** · **[Get started](https://orwa-mahmoud.github.io/adapttable/getting-started/)**
6
8
 
@@ -17,6 +19,13 @@ pnpm add @adapttable/shadcn @adapttable/core react react-dom
17
19
  > Requires shadcn/ui set up in your app (its CSS variables + Tailwind config) —
18
20
  > this adapter only references shadcn's design tokens (`bg-card`,
19
21
  > `text-muted-foreground`, `border-border`, `bg-primary`, …).
22
+ >
23
+ > The preset ships utility classes in this package, so let Tailwind scan it or
24
+ > they won't compile. In Tailwind v4, add it as a source in your CSS:
25
+ >
26
+ > ```css
27
+ > @source "../node_modules/@adapttable/shadcn/dist/**/*.js";
28
+ > ```
20
29
 
21
30
  ## Quickstart
22
31
 
package/dist/index.cjs CHANGED
@@ -47,8 +47,10 @@ const shadcnClassNames = {
47
47
  row: "border-b border-border last:border-0 hover:bg-muted/50 data-[selected]:bg-accent",
48
48
  cell: "px-3 py-2.5 [&[data-pinned]]:bg-card",
49
49
  actionButton: "h-8 w-8 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50",
50
- footer: "flex items-center justify-between gap-2 border-t border-border p-3 text-sm text-muted-foreground",
51
- pageButton: "inline-grid h-8 min-w-8 place-items-center rounded-md border border-input bg-background px-2 text-foreground hover:bg-accent disabled:opacity-40",
50
+ footer: "flex flex-wrap items-center gap-2 border-t border-border p-3 text-sm text-muted-foreground",
51
+ pager: "ms-auto flex flex-wrap items-center gap-1",
52
+ pageButton: "inline-grid h-8 min-w-8 place-items-center rounded-md border border-input bg-background px-2 text-sm text-foreground hover:bg-accent disabled:opacity-40 aria-[current=page]:border-primary aria-[current=page]:bg-primary aria-[current=page]:text-primary-foreground",
53
+ pageEllipsis: "grid h-8 place-items-center px-1 text-muted-foreground",
52
54
  chips: "flex flex-wrap gap-2 px-3 pb-2",
53
55
  chip: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground",
54
56
  chipRemove: "rounded px-1 text-muted-foreground transition-colors hover:text-foreground",
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":["shadcnClassNames","root","toolbar","searchField","searchIcon","search","sortSelect","rowsPerPageSelect","filtersButton","filtersBackdrop","filtersPanel","filtersPopover","filtersCount","filtersHeader","filtersTitle","filtersClose","filtersBody","filterField","filterLabel","filterInput","filterSelect","filterCheckboxGroup","filterCheckbox","filtersFooter","filtersClear","filtersDone","table","headerCell","sortButton","row","cell","actionButton","footer","pageButton","chips","chip","chipRemove","empty","emptyClear","columnMenuButton","columnMenuPanel","columnMenuHeader","columnMenuTitle","columnMenuItem","columnMenuGrip","columnMenuLabel","columnMenuVisibility","columnMenuPin","columnMenuReset","resizeHandle","card","cardRow","cardLabel","cardValue","DataTable","UnstyledDataTable","shadcnClassNames","props","$","_c","classNames","rest","t0","t1"],"sources":["../src/classNames.ts","../src/DataTable.tsx"],"sourcesContent":["import type { DataTableClassNames } from \"@adapttable/unstyled\";\n\n/**\n * shadcn/ui class preset for AdaptTable. Maps every AdaptTable part to shadcn's\n * design-token utility classes (`bg-card`, `text-muted-foreground`,\n * `border-border`, `bg-primary`, `ring-ring`, …) — deliberately **monochrome\n * with ring focus**, the shadcn signature.\n *\n * It only *references* shadcn's tokens, so your app must have shadcn/ui set up\n * (its CSS variables + Tailwind config). Pass this to a `@adapttable/unstyled`\n * `<DataTable classNames={shadcnClassNames} />`, or just import the pre-wired\n * `DataTable` from `@adapttable/shadcn`. Override any part by merging your own\n * classes over it.\n */\nexport const shadcnClassNames: DataTableClassNames = {\n root: \"rounded-xl border border-border bg-card text-card-foreground shadow-sm\",\n toolbar: \"flex flex-wrap items-center gap-2 p-3 border-b border-border\",\n searchField:\n \"flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1 focus-within:ring-offset-background\",\n searchIcon: \"text-muted-foreground\",\n search:\n \"w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n sortSelect: \"h-9 rounded-md border border-input bg-background px-2 text-sm\",\n rowsPerPageSelect:\n \"h-8 rounded-md border border-input bg-background px-1.5 text-sm text-foreground\",\n filtersButton:\n \"shrink-0 whitespace-nowrap inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground\",\n filtersBackdrop: \"fixed inset-0 z-40 bg-black/40 backdrop-blur-[1px]\",\n filtersPanel:\n \"fixed inset-y-0 end-0 z-50 flex w-[340px] max-w-[88vw] flex-col border-s border-border bg-card text-card-foreground shadow-2xl\",\n filtersPopover:\n \"z-50 mt-2 w-80 max-w-[88vw] overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-xl\",\n filtersCount:\n \"inline-grid h-5 min-w-5 place-items-center rounded-full bg-primary px-1 text-xs font-bold leading-none text-primary-foreground\",\n filtersHeader:\n \"flex items-center justify-between border-b border-border px-4 py-3\",\n filtersTitle: \"text-base font-semibold\",\n filtersClose:\n \"flex h-8 w-8 items-center justify-center rounded-md text-lg leading-none text-muted-foreground hover:bg-accent\",\n filtersBody: \"flex flex-1 flex-col gap-4 overflow-auto p-4\",\n // ── Auto-built filter form (declarative `filters` definitions) ──\n filterField: \"m-0 flex min-w-0 flex-col gap-1.5 border-0 p-0\",\n filterLabel: \"p-0 text-xs font-medium text-muted-foreground\",\n filterInput:\n \"h-9 w-full rounded-md border border-input bg-background px-2.5 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring\",\n filterSelect:\n \"h-9 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring\",\n filterCheckboxGroup: \"flex flex-wrap gap-1.5\",\n filterCheckbox:\n \"inline-flex cursor-pointer select-none items-center rounded-full border border-input bg-background px-3 py-1 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground has-[:checked]:border-primary has-[:checked]:bg-primary has-[:checked]:text-primary-foreground [&>input]:sr-only\",\n filtersFooter:\n \"flex items-center justify-between gap-2 border-t border-border p-4\",\n filtersClear:\n \"h-9 rounded-md px-3 text-sm text-muted-foreground hover:bg-accent disabled:opacity-50\",\n filtersDone:\n \"h-9 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90\",\n table: \"w-full border-collapse text-sm\",\n headerCell:\n \"border-b border-border bg-card px-3 py-2.5 text-start font-medium text-muted-foreground\",\n sortButton:\n \"inline-flex items-center gap-1 font-medium hover:text-foreground\",\n row: \"border-b border-border last:border-0 hover:bg-muted/50 data-[selected]:bg-accent\",\n // Pinned cells must be opaque so scrolled content never shows through.\n cell: \"px-3 py-2.5 [&[data-pinned]]:bg-card\",\n actionButton:\n \"h-8 w-8 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50\",\n footer:\n \"flex items-center justify-between gap-2 border-t border-border p-3 text-sm text-muted-foreground\",\n pageButton:\n \"inline-grid h-8 min-w-8 place-items-center rounded-md border border-input bg-background px-2 text-foreground hover:bg-accent disabled:opacity-40\",\n chips: \"flex flex-wrap gap-2 px-3 pb-2\",\n chip: \"inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground\",\n chipRemove:\n \"rounded px-1 text-muted-foreground transition-colors hover:text-foreground\",\n empty:\n \"flex flex-wrap items-center justify-center gap-3 px-4 py-10 text-sm text-muted-foreground\",\n emptyClear:\n \"rounded-md border border-input px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted\",\n // ── Column popover ──────────────────────────────────────────────\n columnMenuButton:\n \"shrink-0 whitespace-nowrap inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-accent data-[active]:bg-accent\",\n columnMenuPanel:\n \"z-50 min-w-[264px] rounded-xl border border-border bg-card p-1.5 text-card-foreground shadow-xl\",\n columnMenuHeader: \"px-1.5 pb-1.5 pt-1\",\n columnMenuTitle:\n \"text-[11px] font-semibold uppercase tracking-wider text-muted-foreground\",\n columnMenuItem:\n \"flex cursor-grab items-center gap-2 rounded-md px-1.5 py-1.5 hover:bg-muted/60\",\n columnMenuGrip:\n \"inline-flex cursor-grab text-muted-foreground/50 hover:text-foreground\",\n columnMenuLabel:\n \"flex-1 truncate text-[13px] font-medium data-[hidden]:text-muted-foreground data-[hidden]:line-through\",\n columnMenuVisibility:\n \"inline-grid place-items-center rounded p-[3px] text-muted-foreground hover:bg-muted hover:text-foreground\",\n columnMenuPin:\n \"inline-grid place-items-center rounded p-[3px] text-muted-foreground hover:bg-muted data-[active]:text-primary\",\n columnMenuReset:\n \"mt-1.5 w-full border-t border-border px-2 pb-1 pt-2 text-start text-[13px] font-medium text-primary hover:opacity-80\",\n resizeHandle: \"hover:bg-border\",\n card: \"mb-2 rounded-lg border border-border p-3\",\n cardRow: \"flex justify-between gap-3 py-0.5 text-sm\",\n cardLabel: \"text-muted-foreground\",\n cardValue: \"font-medium\",\n};\n","import {\n DataTable as UnstyledDataTable,\n type DataTableProps,\n} from \"@adapttable/unstyled\";\n\nimport { shadcnClassNames } from \"./classNames\";\n\n/**\n * AdaptTable, pre-styled with **shadcn/ui** design tokens — a fully-styled data\n * table in a single import. A thin wrapper over `@adapttable/unstyled` that\n * applies the {@link shadcnClassNames} preset, so you don't hand-wire the\n * class map.\n *\n * Requires shadcn/ui set up in your app (its CSS variables + Tailwind config).\n * Restyle any part by passing your own `classNames` — they're merged **over**\n * the preset, per part, so `classNames={{ root: \"…\" }}` only replaces the root.\n *\n * @typeParam TRow - The row type.\n */\nexport function DataTable<TRow>(props: Readonly<DataTableProps<TRow>>) {\n const { classNames, ...rest } = props;\n return (\n <UnstyledDataTable\n {...rest}\n classNames={\n classNames ? { ...shadcnClassNames, ...classNames } : shadcnClassNames\n }\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAcA,MAAaA,mBAAwC;CACnDC,MAAM;CACNC,SAAS;CACTC,aACE;CACFC,YAAY;CACZC,QACE;CACFC,YAAY;CACZC,mBACE;CACFC,eACE;CACFC,iBAAiB;CACjBC,cACE;CACFC,gBACE;CACFC,cACE;CACFC,eACE;CACFC,cAAc;CACdC,cACE;CACFC,aAAa;CAEbC,aAAa;CACbC,aAAa;CACbC,aACE;CACFC,cACE;CACFC,qBAAqB;CACrBC,gBACE;CACFC,eACE;CACFC,cACE;CACFC,aACE;CACFC,OAAO;CACPC,YACE;CACFC,YACE;CACFC,KAAK;CAELC,MAAM;CACNC,cACE;CACFC,QACE;CACFC,YACE;CACFC,OAAO;CACPC,MAAM;CACNC,YACE;CACFC,OACE;CACFC,YACE;CAEFC,kBACE;CACFC,iBACE;CACFC,kBAAkB;CAClBC,iBACE;CACFC,gBACE;CACFC,gBACE;CACFC,iBACE;CACFC,sBACE;CACFC,eACE;CACFC,iBACE;CACFC,cAAc;CACdC,MAAM;CACNC,SAAS;CACTC,WAAW;CACXC,WAAW;AACb;;;;;;;;;;;;;;;ACpFA,SAAOC,UAAAG,OAAA;CAAA,MAAAC,KAAAA,GAAAA,uBAAAA,EAAAA,CAAA,CAAA;CAAA,IAAAE;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,OAAA;EACL,CAAA,CAAAG,eAAAC,QAAgCJ;EAAMC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAD,aAAAF,EAAA;EAAAG,OAAAH,EAAA;CAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAE,YAAA;EAKhCE,KAAAF,aAAA;GAAA,GAAkBJ;GAAgB,GAAKI;EAA8B,IAArEJ;EAAsEE,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,QAAAH,EAAA,OAAAI,IAAA;EAH1EC,KAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAA,WAAD;GAAkB,GACZF;GAEF,YAAAC;EAAsE,CAAA;EAExEJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OALFK;AAKE"}
1
+ {"version":3,"file":"index.cjs","names":["shadcnClassNames","root","toolbar","searchField","searchIcon","search","sortSelect","rowsPerPageSelect","filtersButton","filtersBackdrop","filtersPanel","filtersPopover","filtersCount","filtersHeader","filtersTitle","filtersClose","filtersBody","filterField","filterLabel","filterInput","filterSelect","filterCheckboxGroup","filterCheckbox","filtersFooter","filtersClear","filtersDone","table","headerCell","sortButton","row","cell","actionButton","footer","pager","pageButton","pageEllipsis","chips","chip","chipRemove","empty","emptyClear","columnMenuButton","columnMenuPanel","columnMenuHeader","columnMenuTitle","columnMenuItem","columnMenuGrip","columnMenuLabel","columnMenuVisibility","columnMenuPin","columnMenuReset","resizeHandle","card","cardRow","cardLabel","cardValue","DataTable","UnstyledDataTable","shadcnClassNames","props","$","_c","classNames","rest","t0","t1"],"sources":["../src/classNames.ts","../src/DataTable.tsx"],"sourcesContent":["import type { DataTableClassNames } from \"@adapttable/unstyled\";\n\n/**\n * shadcn/ui class preset for AdaptTable. Maps every AdaptTable part to shadcn's\n * design-token utility classes (`bg-card`, `text-muted-foreground`,\n * `border-border`, `bg-primary`, `ring-ring`, …) — deliberately **monochrome\n * with ring focus**, the shadcn signature.\n *\n * It only *references* shadcn's tokens, so your app must have shadcn/ui set up\n * (its CSS variables + Tailwind config). Pass this to a `@adapttable/unstyled`\n * `<DataTable classNames={shadcnClassNames} />`, or just import the pre-wired\n * `DataTable` from `@adapttable/shadcn`. Override any part by merging your own\n * classes over it.\n */\nexport const shadcnClassNames: DataTableClassNames = {\n root: \"rounded-xl border border-border bg-card text-card-foreground shadow-sm\",\n toolbar: \"flex flex-wrap items-center gap-2 p-3 border-b border-border\",\n searchField:\n \"flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1 focus-within:ring-offset-background\",\n searchIcon: \"text-muted-foreground\",\n search:\n \"w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n sortSelect: \"h-9 rounded-md border border-input bg-background px-2 text-sm\",\n rowsPerPageSelect:\n \"h-8 rounded-md border border-input bg-background px-1.5 text-sm text-foreground\",\n filtersButton:\n \"shrink-0 whitespace-nowrap inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground\",\n filtersBackdrop: \"fixed inset-0 z-40 bg-black/40 backdrop-blur-[1px]\",\n filtersPanel:\n \"fixed inset-y-0 end-0 z-50 flex w-[340px] max-w-[88vw] flex-col border-s border-border bg-card text-card-foreground shadow-2xl\",\n filtersPopover:\n \"z-50 mt-2 w-80 max-w-[88vw] overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-xl\",\n filtersCount:\n \"inline-grid h-5 min-w-5 place-items-center rounded-full bg-primary px-1 text-xs font-bold leading-none text-primary-foreground\",\n filtersHeader:\n \"flex items-center justify-between border-b border-border px-4 py-3\",\n filtersTitle: \"text-base font-semibold\",\n filtersClose:\n \"flex h-8 w-8 items-center justify-center rounded-md text-lg leading-none text-muted-foreground hover:bg-accent\",\n filtersBody: \"flex flex-1 flex-col gap-4 overflow-auto p-4\",\n // ── Auto-built filter form (declarative `filters` definitions) ──\n filterField: \"m-0 flex min-w-0 flex-col gap-1.5 border-0 p-0\",\n filterLabel: \"p-0 text-xs font-medium text-muted-foreground\",\n filterInput:\n \"h-9 w-full rounded-md border border-input bg-background px-2.5 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring\",\n filterSelect:\n \"h-9 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring\",\n filterCheckboxGroup: \"flex flex-wrap gap-1.5\",\n filterCheckbox:\n \"inline-flex cursor-pointer select-none items-center rounded-full border border-input bg-background px-3 py-1 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground has-[:checked]:border-primary has-[:checked]:bg-primary has-[:checked]:text-primary-foreground [&>input]:sr-only\",\n filtersFooter:\n \"flex items-center justify-between gap-2 border-t border-border p-4\",\n filtersClear:\n \"h-9 rounded-md px-3 text-sm text-muted-foreground hover:bg-accent disabled:opacity-50\",\n filtersDone:\n \"h-9 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90\",\n table: \"w-full border-collapse text-sm\",\n headerCell:\n \"border-b border-border bg-card px-3 py-2.5 text-start font-medium text-muted-foreground\",\n sortButton:\n \"inline-flex items-center gap-1 font-medium hover:text-foreground\",\n row: \"border-b border-border last:border-0 hover:bg-muted/50 data-[selected]:bg-accent\",\n // Pinned cells must be opaque so scrolled content never shows through.\n cell: \"px-3 py-2.5 [&[data-pinned]]:bg-card\",\n actionButton:\n \"h-8 w-8 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50\",\n footer:\n \"flex flex-wrap items-center gap-2 border-t border-border p-3 text-sm text-muted-foreground\",\n pager: \"ms-auto flex flex-wrap items-center gap-1\",\n pageButton:\n \"inline-grid h-8 min-w-8 place-items-center rounded-md border border-input bg-background px-2 text-sm text-foreground hover:bg-accent disabled:opacity-40 aria-[current=page]:border-primary aria-[current=page]:bg-primary aria-[current=page]:text-primary-foreground\",\n pageEllipsis: \"grid h-8 place-items-center px-1 text-muted-foreground\",\n chips: \"flex flex-wrap gap-2 px-3 pb-2\",\n chip: \"inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground\",\n chipRemove:\n \"rounded px-1 text-muted-foreground transition-colors hover:text-foreground\",\n empty:\n \"flex flex-wrap items-center justify-center gap-3 px-4 py-10 text-sm text-muted-foreground\",\n emptyClear:\n \"rounded-md border border-input px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted\",\n // ── Column popover ──────────────────────────────────────────────\n columnMenuButton:\n \"shrink-0 whitespace-nowrap inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-accent data-[active]:bg-accent\",\n columnMenuPanel:\n \"z-50 min-w-[264px] rounded-xl border border-border bg-card p-1.5 text-card-foreground shadow-xl\",\n columnMenuHeader: \"px-1.5 pb-1.5 pt-1\",\n columnMenuTitle:\n \"text-[11px] font-semibold uppercase tracking-wider text-muted-foreground\",\n columnMenuItem:\n \"flex cursor-grab items-center gap-2 rounded-md px-1.5 py-1.5 hover:bg-muted/60\",\n columnMenuGrip:\n \"inline-flex cursor-grab text-muted-foreground/50 hover:text-foreground\",\n columnMenuLabel:\n \"flex-1 truncate text-[13px] font-medium data-[hidden]:text-muted-foreground data-[hidden]:line-through\",\n columnMenuVisibility:\n \"inline-grid place-items-center rounded p-[3px] text-muted-foreground hover:bg-muted hover:text-foreground\",\n columnMenuPin:\n \"inline-grid place-items-center rounded p-[3px] text-muted-foreground hover:bg-muted data-[active]:text-primary\",\n columnMenuReset:\n \"mt-1.5 w-full border-t border-border px-2 pb-1 pt-2 text-start text-[13px] font-medium text-primary hover:opacity-80\",\n resizeHandle: \"hover:bg-border\",\n card: \"mb-2 rounded-lg border border-border p-3\",\n cardRow: \"flex justify-between gap-3 py-0.5 text-sm\",\n cardLabel: \"text-muted-foreground\",\n cardValue: \"font-medium\",\n};\n","import {\n DataTable as UnstyledDataTable,\n type DataTableProps,\n} from \"@adapttable/unstyled\";\n\nimport { shadcnClassNames } from \"./classNames\";\n\n/**\n * AdaptTable, pre-styled with **shadcn/ui** design tokens — a fully-styled data\n * table in a single import. A thin wrapper over `@adapttable/unstyled` that\n * applies the {@link shadcnClassNames} preset, so you don't hand-wire the\n * class map.\n *\n * Requires shadcn/ui set up in your app (its CSS variables + Tailwind config).\n * Restyle any part by passing your own `classNames` — they're merged **over**\n * the preset, per part, so `classNames={{ root: \"…\" }}` only replaces the root.\n *\n * @typeParam TRow - The row type.\n */\nexport function DataTable<TRow>(props: Readonly<DataTableProps<TRow>>) {\n const { classNames, ...rest } = props;\n return (\n <UnstyledDataTable\n {...rest}\n classNames={\n classNames ? { ...shadcnClassNames, ...classNames } : shadcnClassNames\n }\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAcA,MAAaA,mBAAwC;CACnDC,MAAM;CACNC,SAAS;CACTC,aACE;CACFC,YAAY;CACZC,QACE;CACFC,YAAY;CACZC,mBACE;CACFC,eACE;CACFC,iBAAiB;CACjBC,cACE;CACFC,gBACE;CACFC,cACE;CACFC,eACE;CACFC,cAAc;CACdC,cACE;CACFC,aAAa;CAEbC,aAAa;CACbC,aAAa;CACbC,aACE;CACFC,cACE;CACFC,qBAAqB;CACrBC,gBACE;CACFC,eACE;CACFC,cACE;CACFC,aACE;CACFC,OAAO;CACPC,YACE;CACFC,YACE;CACFC,KAAK;CAELC,MAAM;CACNC,cACE;CACFC,QACE;CACFC,OAAO;CACPC,YACE;CACFC,cAAc;CACdC,OAAO;CACPC,MAAM;CACNC,YACE;CACFC,OACE;CACFC,YACE;CAEFC,kBACE;CACFC,iBACE;CACFC,kBAAkB;CAClBC,iBACE;CACFC,gBACE;CACFC,gBACE;CACFC,iBACE;CACFC,sBACE;CACFC,eACE;CACFC,iBACE;CACFC,cAAc;CACdC,MAAM;CACNC,SAAS;CACTC,WAAW;CACXC,WAAW;AACb;;;;;;;;;;;;;;;ACtFA,SAAOC,UAAAG,OAAA;CAAA,MAAAC,KAAAA,GAAAA,uBAAAA,EAAAA,CAAA,CAAA;CAAA,IAAAE;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,OAAA;EACL,CAAA,CAAAG,eAAAC,QAAgCJ;EAAMC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAD,aAAAF,EAAA;EAAAG,OAAAH,EAAA;CAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAE,YAAA;EAKhCE,KAAAF,aAAA;GAAA,GAAkBJ;GAAgB,GAAKI;EAA8B,IAArEJ;EAAsEE,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,QAAAH,EAAA,OAAAI,IAAA;EAH1EC,KAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAA,WAAD;GAAkB,GACZF;GAEF,YAAAC;EAAsE,CAAA;EAExEJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OALFK;AAKE"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.cts","names":[],"sources":["../src/classNames.ts","../src/DataTable.tsx"],"mappings":";;;;;;;;AAcA;;;;AAyFC;;;;cAzFY,gBAAA,EAAkB,mBAyF9B;;;;;;;AAzFD;;;;AAyFC;;;;iBCpFe,SAAA,OAAgB,KAAA,EAAO,QAAA,CAAS,cAAA,CAAe,IAAA,qBAAM,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"index.d.cts","names":[],"sources":["../src/classNames.ts","../src/DataTable.tsx"],"mappings":";;;;;;;;AAcA;;;;AA2FC;;;;cA3FY,gBAAA,EAAkB,mBA2F9B;;;;;;;AA3FD;;;;AA2FC;;;;iBCtFe,SAAA,OAAgB,KAAA,EAAO,QAAA,CAAS,cAAA,CAAe,IAAA,qBAAM,GAAA,CAAA,OAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","names":[],"sources":["../src/classNames.ts","../src/DataTable.tsx"],"mappings":";;;;;;;;AAcA;;;;AAyFC;;;;cAzFY,gBAAA,EAAkB,mBAyF9B;;;;;;;AAzFD;;;;AAyFC;;;;iBCpFe,SAAA,OAAgB,KAAA,EAAO,QAAA,CAAS,cAAA,CAAe,IAAA,qBAAM,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"index.d.ts","names":[],"sources":["../src/classNames.ts","../src/DataTable.tsx"],"mappings":";;;;;;;;AAcA;;;;AA2FC;;;;cA3FY,gBAAA,EAAkB,mBA2F9B;;;;;;;AA3FD;;;;AA2FC;;;;iBCtFe,SAAA,OAAgB,KAAA,EAAO,QAAA,CAAS,cAAA,CAAe,IAAA,qBAAM,GAAA,CAAA,OAAA"}
package/dist/index.js CHANGED
@@ -47,8 +47,10 @@ const shadcnClassNames = {
47
47
  row: "border-b border-border last:border-0 hover:bg-muted/50 data-[selected]:bg-accent",
48
48
  cell: "px-3 py-2.5 [&[data-pinned]]:bg-card",
49
49
  actionButton: "h-8 w-8 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50",
50
- footer: "flex items-center justify-between gap-2 border-t border-border p-3 text-sm text-muted-foreground",
51
- pageButton: "inline-grid h-8 min-w-8 place-items-center rounded-md border border-input bg-background px-2 text-foreground hover:bg-accent disabled:opacity-40",
50
+ footer: "flex flex-wrap items-center gap-2 border-t border-border p-3 text-sm text-muted-foreground",
51
+ pager: "ms-auto flex flex-wrap items-center gap-1",
52
+ pageButton: "inline-grid h-8 min-w-8 place-items-center rounded-md border border-input bg-background px-2 text-sm text-foreground hover:bg-accent disabled:opacity-40 aria-[current=page]:border-primary aria-[current=page]:bg-primary aria-[current=page]:text-primary-foreground",
53
+ pageEllipsis: "grid h-8 place-items-center px-1 text-muted-foreground",
52
54
  chips: "flex flex-wrap gap-2 px-3 pb-2",
53
55
  chip: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground",
54
56
  chipRemove: "rounded px-1 text-muted-foreground transition-colors hover:text-foreground",
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["shadcnClassNames","root","toolbar","searchField","searchIcon","search","sortSelect","rowsPerPageSelect","filtersButton","filtersBackdrop","filtersPanel","filtersPopover","filtersCount","filtersHeader","filtersTitle","filtersClose","filtersBody","filterField","filterLabel","filterInput","filterSelect","filterCheckboxGroup","filterCheckbox","filtersFooter","filtersClear","filtersDone","table","headerCell","sortButton","row","cell","actionButton","footer","pageButton","chips","chip","chipRemove","empty","emptyClear","columnMenuButton","columnMenuPanel","columnMenuHeader","columnMenuTitle","columnMenuItem","columnMenuGrip","columnMenuLabel","columnMenuVisibility","columnMenuPin","columnMenuReset","resizeHandle","card","cardRow","cardLabel","cardValue","DataTable","UnstyledDataTable","shadcnClassNames","props","$","_c","classNames","rest","t0","t1"],"sources":["../src/classNames.ts","../src/DataTable.tsx"],"sourcesContent":["import type { DataTableClassNames } from \"@adapttable/unstyled\";\n\n/**\n * shadcn/ui class preset for AdaptTable. Maps every AdaptTable part to shadcn's\n * design-token utility classes (`bg-card`, `text-muted-foreground`,\n * `border-border`, `bg-primary`, `ring-ring`, …) — deliberately **monochrome\n * with ring focus**, the shadcn signature.\n *\n * It only *references* shadcn's tokens, so your app must have shadcn/ui set up\n * (its CSS variables + Tailwind config). Pass this to a `@adapttable/unstyled`\n * `<DataTable classNames={shadcnClassNames} />`, or just import the pre-wired\n * `DataTable` from `@adapttable/shadcn`. Override any part by merging your own\n * classes over it.\n */\nexport const shadcnClassNames: DataTableClassNames = {\n root: \"rounded-xl border border-border bg-card text-card-foreground shadow-sm\",\n toolbar: \"flex flex-wrap items-center gap-2 p-3 border-b border-border\",\n searchField:\n \"flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1 focus-within:ring-offset-background\",\n searchIcon: \"text-muted-foreground\",\n search:\n \"w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n sortSelect: \"h-9 rounded-md border border-input bg-background px-2 text-sm\",\n rowsPerPageSelect:\n \"h-8 rounded-md border border-input bg-background px-1.5 text-sm text-foreground\",\n filtersButton:\n \"shrink-0 whitespace-nowrap inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground\",\n filtersBackdrop: \"fixed inset-0 z-40 bg-black/40 backdrop-blur-[1px]\",\n filtersPanel:\n \"fixed inset-y-0 end-0 z-50 flex w-[340px] max-w-[88vw] flex-col border-s border-border bg-card text-card-foreground shadow-2xl\",\n filtersPopover:\n \"z-50 mt-2 w-80 max-w-[88vw] overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-xl\",\n filtersCount:\n \"inline-grid h-5 min-w-5 place-items-center rounded-full bg-primary px-1 text-xs font-bold leading-none text-primary-foreground\",\n filtersHeader:\n \"flex items-center justify-between border-b border-border px-4 py-3\",\n filtersTitle: \"text-base font-semibold\",\n filtersClose:\n \"flex h-8 w-8 items-center justify-center rounded-md text-lg leading-none text-muted-foreground hover:bg-accent\",\n filtersBody: \"flex flex-1 flex-col gap-4 overflow-auto p-4\",\n // ── Auto-built filter form (declarative `filters` definitions) ──\n filterField: \"m-0 flex min-w-0 flex-col gap-1.5 border-0 p-0\",\n filterLabel: \"p-0 text-xs font-medium text-muted-foreground\",\n filterInput:\n \"h-9 w-full rounded-md border border-input bg-background px-2.5 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring\",\n filterSelect:\n \"h-9 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring\",\n filterCheckboxGroup: \"flex flex-wrap gap-1.5\",\n filterCheckbox:\n \"inline-flex cursor-pointer select-none items-center rounded-full border border-input bg-background px-3 py-1 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground has-[:checked]:border-primary has-[:checked]:bg-primary has-[:checked]:text-primary-foreground [&>input]:sr-only\",\n filtersFooter:\n \"flex items-center justify-between gap-2 border-t border-border p-4\",\n filtersClear:\n \"h-9 rounded-md px-3 text-sm text-muted-foreground hover:bg-accent disabled:opacity-50\",\n filtersDone:\n \"h-9 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90\",\n table: \"w-full border-collapse text-sm\",\n headerCell:\n \"border-b border-border bg-card px-3 py-2.5 text-start font-medium text-muted-foreground\",\n sortButton:\n \"inline-flex items-center gap-1 font-medium hover:text-foreground\",\n row: \"border-b border-border last:border-0 hover:bg-muted/50 data-[selected]:bg-accent\",\n // Pinned cells must be opaque so scrolled content never shows through.\n cell: \"px-3 py-2.5 [&[data-pinned]]:bg-card\",\n actionButton:\n \"h-8 w-8 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50\",\n footer:\n \"flex items-center justify-between gap-2 border-t border-border p-3 text-sm text-muted-foreground\",\n pageButton:\n \"inline-grid h-8 min-w-8 place-items-center rounded-md border border-input bg-background px-2 text-foreground hover:bg-accent disabled:opacity-40\",\n chips: \"flex flex-wrap gap-2 px-3 pb-2\",\n chip: \"inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground\",\n chipRemove:\n \"rounded px-1 text-muted-foreground transition-colors hover:text-foreground\",\n empty:\n \"flex flex-wrap items-center justify-center gap-3 px-4 py-10 text-sm text-muted-foreground\",\n emptyClear:\n \"rounded-md border border-input px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted\",\n // ── Column popover ──────────────────────────────────────────────\n columnMenuButton:\n \"shrink-0 whitespace-nowrap inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-accent data-[active]:bg-accent\",\n columnMenuPanel:\n \"z-50 min-w-[264px] rounded-xl border border-border bg-card p-1.5 text-card-foreground shadow-xl\",\n columnMenuHeader: \"px-1.5 pb-1.5 pt-1\",\n columnMenuTitle:\n \"text-[11px] font-semibold uppercase tracking-wider text-muted-foreground\",\n columnMenuItem:\n \"flex cursor-grab items-center gap-2 rounded-md px-1.5 py-1.5 hover:bg-muted/60\",\n columnMenuGrip:\n \"inline-flex cursor-grab text-muted-foreground/50 hover:text-foreground\",\n columnMenuLabel:\n \"flex-1 truncate text-[13px] font-medium data-[hidden]:text-muted-foreground data-[hidden]:line-through\",\n columnMenuVisibility:\n \"inline-grid place-items-center rounded p-[3px] text-muted-foreground hover:bg-muted hover:text-foreground\",\n columnMenuPin:\n \"inline-grid place-items-center rounded p-[3px] text-muted-foreground hover:bg-muted data-[active]:text-primary\",\n columnMenuReset:\n \"mt-1.5 w-full border-t border-border px-2 pb-1 pt-2 text-start text-[13px] font-medium text-primary hover:opacity-80\",\n resizeHandle: \"hover:bg-border\",\n card: \"mb-2 rounded-lg border border-border p-3\",\n cardRow: \"flex justify-between gap-3 py-0.5 text-sm\",\n cardLabel: \"text-muted-foreground\",\n cardValue: \"font-medium\",\n};\n","import {\n DataTable as UnstyledDataTable,\n type DataTableProps,\n} from \"@adapttable/unstyled\";\n\nimport { shadcnClassNames } from \"./classNames\";\n\n/**\n * AdaptTable, pre-styled with **shadcn/ui** design tokens — a fully-styled data\n * table in a single import. A thin wrapper over `@adapttable/unstyled` that\n * applies the {@link shadcnClassNames} preset, so you don't hand-wire the\n * class map.\n *\n * Requires shadcn/ui set up in your app (its CSS variables + Tailwind config).\n * Restyle any part by passing your own `classNames` — they're merged **over**\n * the preset, per part, so `classNames={{ root: \"…\" }}` only replaces the root.\n *\n * @typeParam TRow - The row type.\n */\nexport function DataTable<TRow>(props: Readonly<DataTableProps<TRow>>) {\n const { classNames, ...rest } = props;\n return (\n <UnstyledDataTable\n {...rest}\n classNames={\n classNames ? { ...shadcnClassNames, ...classNames } : shadcnClassNames\n }\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAcA,MAAaA,mBAAwC;CACnDC,MAAM;CACNC,SAAS;CACTC,aACE;CACFC,YAAY;CACZC,QACE;CACFC,YAAY;CACZC,mBACE;CACFC,eACE;CACFC,iBAAiB;CACjBC,cACE;CACFC,gBACE;CACFC,cACE;CACFC,eACE;CACFC,cAAc;CACdC,cACE;CACFC,aAAa;CAEbC,aAAa;CACbC,aAAa;CACbC,aACE;CACFC,cACE;CACFC,qBAAqB;CACrBC,gBACE;CACFC,eACE;CACFC,cACE;CACFC,aACE;CACFC,OAAO;CACPC,YACE;CACFC,YACE;CACFC,KAAK;CAELC,MAAM;CACNC,cACE;CACFC,QACE;CACFC,YACE;CACFC,OAAO;CACPC,MAAM;CACNC,YACE;CACFC,OACE;CACFC,YACE;CAEFC,kBACE;CACFC,iBACE;CACFC,kBAAkB;CAClBC,iBACE;CACFC,gBACE;CACFC,gBACE;CACFC,iBACE;CACFC,sBACE;CACFC,eACE;CACFC,iBACE;CACFC,cAAc;CACdC,MAAM;CACNC,SAAS;CACTC,WAAW;CACXC,WAAW;AACb;;;;;;;;;;;;;;;ACpFA,SAAOC,UAAAG,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,OAAA;EACL,CAAA,CAAAG,eAAAC,QAAgCJ;EAAMC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAD,aAAAF,EAAA;EAAAG,OAAAH,EAAA;CAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAE,YAAA;EAKhCE,KAAAF,aAAA;GAAA,GAAkBJ;GAAgB,GAAKI;EAA8B,IAArEJ;EAAsEE,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,QAAAH,EAAA,OAAAI,IAAA;EAH1EC,KAAA,oBAAC,aAAD;GAAkB,GACZF;GAEF,YAAAC;EAAsE,CAAA;EAExEJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OALFK;AAKE"}
1
+ {"version":3,"file":"index.js","names":["shadcnClassNames","root","toolbar","searchField","searchIcon","search","sortSelect","rowsPerPageSelect","filtersButton","filtersBackdrop","filtersPanel","filtersPopover","filtersCount","filtersHeader","filtersTitle","filtersClose","filtersBody","filterField","filterLabel","filterInput","filterSelect","filterCheckboxGroup","filterCheckbox","filtersFooter","filtersClear","filtersDone","table","headerCell","sortButton","row","cell","actionButton","footer","pager","pageButton","pageEllipsis","chips","chip","chipRemove","empty","emptyClear","columnMenuButton","columnMenuPanel","columnMenuHeader","columnMenuTitle","columnMenuItem","columnMenuGrip","columnMenuLabel","columnMenuVisibility","columnMenuPin","columnMenuReset","resizeHandle","card","cardRow","cardLabel","cardValue","DataTable","UnstyledDataTable","shadcnClassNames","props","$","_c","classNames","rest","t0","t1"],"sources":["../src/classNames.ts","../src/DataTable.tsx"],"sourcesContent":["import type { DataTableClassNames } from \"@adapttable/unstyled\";\n\n/**\n * shadcn/ui class preset for AdaptTable. Maps every AdaptTable part to shadcn's\n * design-token utility classes (`bg-card`, `text-muted-foreground`,\n * `border-border`, `bg-primary`, `ring-ring`, …) — deliberately **monochrome\n * with ring focus**, the shadcn signature.\n *\n * It only *references* shadcn's tokens, so your app must have shadcn/ui set up\n * (its CSS variables + Tailwind config). Pass this to a `@adapttable/unstyled`\n * `<DataTable classNames={shadcnClassNames} />`, or just import the pre-wired\n * `DataTable` from `@adapttable/shadcn`. Override any part by merging your own\n * classes over it.\n */\nexport const shadcnClassNames: DataTableClassNames = {\n root: \"rounded-xl border border-border bg-card text-card-foreground shadow-sm\",\n toolbar: \"flex flex-wrap items-center gap-2 p-3 border-b border-border\",\n searchField:\n \"flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1 focus-within:ring-offset-background\",\n searchIcon: \"text-muted-foreground\",\n search:\n \"w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n sortSelect: \"h-9 rounded-md border border-input bg-background px-2 text-sm\",\n rowsPerPageSelect:\n \"h-8 rounded-md border border-input bg-background px-1.5 text-sm text-foreground\",\n filtersButton:\n \"shrink-0 whitespace-nowrap inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground\",\n filtersBackdrop: \"fixed inset-0 z-40 bg-black/40 backdrop-blur-[1px]\",\n filtersPanel:\n \"fixed inset-y-0 end-0 z-50 flex w-[340px] max-w-[88vw] flex-col border-s border-border bg-card text-card-foreground shadow-2xl\",\n filtersPopover:\n \"z-50 mt-2 w-80 max-w-[88vw] overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-xl\",\n filtersCount:\n \"inline-grid h-5 min-w-5 place-items-center rounded-full bg-primary px-1 text-xs font-bold leading-none text-primary-foreground\",\n filtersHeader:\n \"flex items-center justify-between border-b border-border px-4 py-3\",\n filtersTitle: \"text-base font-semibold\",\n filtersClose:\n \"flex h-8 w-8 items-center justify-center rounded-md text-lg leading-none text-muted-foreground hover:bg-accent\",\n filtersBody: \"flex flex-1 flex-col gap-4 overflow-auto p-4\",\n // ── Auto-built filter form (declarative `filters` definitions) ──\n filterField: \"m-0 flex min-w-0 flex-col gap-1.5 border-0 p-0\",\n filterLabel: \"p-0 text-xs font-medium text-muted-foreground\",\n filterInput:\n \"h-9 w-full rounded-md border border-input bg-background px-2.5 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring\",\n filterSelect:\n \"h-9 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring\",\n filterCheckboxGroup: \"flex flex-wrap gap-1.5\",\n filterCheckbox:\n \"inline-flex cursor-pointer select-none items-center rounded-full border border-input bg-background px-3 py-1 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground has-[:checked]:border-primary has-[:checked]:bg-primary has-[:checked]:text-primary-foreground [&>input]:sr-only\",\n filtersFooter:\n \"flex items-center justify-between gap-2 border-t border-border p-4\",\n filtersClear:\n \"h-9 rounded-md px-3 text-sm text-muted-foreground hover:bg-accent disabled:opacity-50\",\n filtersDone:\n \"h-9 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90\",\n table: \"w-full border-collapse text-sm\",\n headerCell:\n \"border-b border-border bg-card px-3 py-2.5 text-start font-medium text-muted-foreground\",\n sortButton:\n \"inline-flex items-center gap-1 font-medium hover:text-foreground\",\n row: \"border-b border-border last:border-0 hover:bg-muted/50 data-[selected]:bg-accent\",\n // Pinned cells must be opaque so scrolled content never shows through.\n cell: \"px-3 py-2.5 [&[data-pinned]]:bg-card\",\n actionButton:\n \"h-8 w-8 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50\",\n footer:\n \"flex flex-wrap items-center gap-2 border-t border-border p-3 text-sm text-muted-foreground\",\n pager: \"ms-auto flex flex-wrap items-center gap-1\",\n pageButton:\n \"inline-grid h-8 min-w-8 place-items-center rounded-md border border-input bg-background px-2 text-sm text-foreground hover:bg-accent disabled:opacity-40 aria-[current=page]:border-primary aria-[current=page]:bg-primary aria-[current=page]:text-primary-foreground\",\n pageEllipsis: \"grid h-8 place-items-center px-1 text-muted-foreground\",\n chips: \"flex flex-wrap gap-2 px-3 pb-2\",\n chip: \"inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground\",\n chipRemove:\n \"rounded px-1 text-muted-foreground transition-colors hover:text-foreground\",\n empty:\n \"flex flex-wrap items-center justify-center gap-3 px-4 py-10 text-sm text-muted-foreground\",\n emptyClear:\n \"rounded-md border border-input px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted\",\n // ── Column popover ──────────────────────────────────────────────\n columnMenuButton:\n \"shrink-0 whitespace-nowrap inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-accent data-[active]:bg-accent\",\n columnMenuPanel:\n \"z-50 min-w-[264px] rounded-xl border border-border bg-card p-1.5 text-card-foreground shadow-xl\",\n columnMenuHeader: \"px-1.5 pb-1.5 pt-1\",\n columnMenuTitle:\n \"text-[11px] font-semibold uppercase tracking-wider text-muted-foreground\",\n columnMenuItem:\n \"flex cursor-grab items-center gap-2 rounded-md px-1.5 py-1.5 hover:bg-muted/60\",\n columnMenuGrip:\n \"inline-flex cursor-grab text-muted-foreground/50 hover:text-foreground\",\n columnMenuLabel:\n \"flex-1 truncate text-[13px] font-medium data-[hidden]:text-muted-foreground data-[hidden]:line-through\",\n columnMenuVisibility:\n \"inline-grid place-items-center rounded p-[3px] text-muted-foreground hover:bg-muted hover:text-foreground\",\n columnMenuPin:\n \"inline-grid place-items-center rounded p-[3px] text-muted-foreground hover:bg-muted data-[active]:text-primary\",\n columnMenuReset:\n \"mt-1.5 w-full border-t border-border px-2 pb-1 pt-2 text-start text-[13px] font-medium text-primary hover:opacity-80\",\n resizeHandle: \"hover:bg-border\",\n card: \"mb-2 rounded-lg border border-border p-3\",\n cardRow: \"flex justify-between gap-3 py-0.5 text-sm\",\n cardLabel: \"text-muted-foreground\",\n cardValue: \"font-medium\",\n};\n","import {\n DataTable as UnstyledDataTable,\n type DataTableProps,\n} from \"@adapttable/unstyled\";\n\nimport { shadcnClassNames } from \"./classNames\";\n\n/**\n * AdaptTable, pre-styled with **shadcn/ui** design tokens — a fully-styled data\n * table in a single import. A thin wrapper over `@adapttable/unstyled` that\n * applies the {@link shadcnClassNames} preset, so you don't hand-wire the\n * class map.\n *\n * Requires shadcn/ui set up in your app (its CSS variables + Tailwind config).\n * Restyle any part by passing your own `classNames` — they're merged **over**\n * the preset, per part, so `classNames={{ root: \"…\" }}` only replaces the root.\n *\n * @typeParam TRow - The row type.\n */\nexport function DataTable<TRow>(props: Readonly<DataTableProps<TRow>>) {\n const { classNames, ...rest } = props;\n return (\n <UnstyledDataTable\n {...rest}\n classNames={\n classNames ? { ...shadcnClassNames, ...classNames } : shadcnClassNames\n }\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAcA,MAAaA,mBAAwC;CACnDC,MAAM;CACNC,SAAS;CACTC,aACE;CACFC,YAAY;CACZC,QACE;CACFC,YAAY;CACZC,mBACE;CACFC,eACE;CACFC,iBAAiB;CACjBC,cACE;CACFC,gBACE;CACFC,cACE;CACFC,eACE;CACFC,cAAc;CACdC,cACE;CACFC,aAAa;CAEbC,aAAa;CACbC,aAAa;CACbC,aACE;CACFC,cACE;CACFC,qBAAqB;CACrBC,gBACE;CACFC,eACE;CACFC,cACE;CACFC,aACE;CACFC,OAAO;CACPC,YACE;CACFC,YACE;CACFC,KAAK;CAELC,MAAM;CACNC,cACE;CACFC,QACE;CACFC,OAAO;CACPC,YACE;CACFC,cAAc;CACdC,OAAO;CACPC,MAAM;CACNC,YACE;CACFC,OACE;CACFC,YACE;CAEFC,kBACE;CACFC,iBACE;CACFC,kBAAkB;CAClBC,iBACE;CACFC,gBACE;CACFC,gBACE;CACFC,iBACE;CACFC,sBACE;CACFC,eACE;CACFC,iBACE;CACFC,cAAc;CACdC,MAAM;CACNC,SAAS;CACTC,WAAW;CACXC,WAAW;AACb;;;;;;;;;;;;;;;ACtFA,SAAOC,UAAAG,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,OAAA;EACL,CAAA,CAAAG,eAAAC,QAAgCJ;EAAMC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAD,aAAAF,EAAA;EAAAG,OAAAH,EAAA;CAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAE,YAAA;EAKhCE,KAAAF,aAAA;GAAA,GAAkBJ;GAAgB,GAAKI;EAA8B,IAArEJ;EAAsEE,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,QAAAH,EAAA,OAAAI,IAAA;EAH1EC,KAAA,oBAAC,aAAD;GAAkB,GACZF;GAEF,YAAAC;EAAsE,CAAA;EAExEJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OALFK;AAKE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adapttable/shadcn",
3
- "version": "0.1.0",
3
+ "version": "0.2.1",
4
4
  "description": "shadcn/ui adapter for AdaptTable — a fully-styled React data table in one import, built on the headless @adapttable/core engine and shadcn's design tokens.",
5
5
  "keywords": [
6
6
  "react",
@@ -48,7 +48,7 @@
48
48
  },
49
49
  "dependencies": {
50
50
  "react-compiler-runtime": "^1.0.0",
51
- "@adapttable/unstyled": "0.2.2"
51
+ "@adapttable/unstyled": "0.3.1"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "react": "^18.0.0 || ^19.0.0",
@@ -62,7 +62,7 @@
62
62
  "react": "^19.2.7",
63
63
  "react-dom": "^19.2.7",
64
64
  "vitest-axe": "^0.1.0",
65
- "@adapttable/core": "0.2.2"
65
+ "@adapttable/core": "0.3.1"
66
66
  },
67
67
  "publishConfig": {
68
68
  "access": "public"