@alexgorbatchev/shadcn 0.0.30 → 0.0.32

package/README.md

@@ -50,28 +50,30 @@ Package preparation and contributor commands are documented in [AGENTS.md](./AGE
 
 Import shared controls and providers from `@alexgorbatchev/shadcn`. Import the following features from their dedicated entry points and install only the peers you use. These features, their hooks, and their types are not exported from the package root.
 
-| Import path suffix  | Components                                               | Install alongside the package                                                                       |
-| ------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `/chart`            | Chart parts, AnalyticsChart, Sparkline, hooks and types  | `bun add recharts@3.8.0 cssesc@3.0.0 es-toolkit@1.52.0`                                             |
-| `/calendar`         | Calendar, CalendarDayButton, DatePicker, DateRangePicker | `bun add @daypicker/react@^10.0.2`                                                                  |
-| `/persian-calendar` | PersianCalendar                                          | `bun add @daypicker/persian@^10.0.2 @daypicker/react@^10.0.2`                                       |
-| `/carousel`         | Carousel components, useCarousel, and carousel types     | `bun add embla-carousel-react@^8.6.0`                                                               |
-| `/command`          | Command components, including CommandDialog              | `bun add cmdk@^1.1.1`                                                                               |
-| `/resizable`        | Resizable components and SplitView                       | `bun add react-resizable-panels@^4.14.3`                                                            |
-| `/fonts.css`        | JetBrains Mono font stylesheet                           | `bun add @fontsource-variable/jetbrains-mono@^5.3.0`                                                |
-| `/sonner`           | Sonner, SonnerToaster, Toaster, toast, useSonner         | No additional install; patched implementation is bundled                                            |
-| `/input-otp`        | InputOTP components                                      | No additional install; patched implementation is bundled                                            |
-| `/virtual-table`    | VirtualTable and row measurement props                   | `@tanstack/react-virtual@3.14.13`                                                                   |
-| `/message-scroller` | MessageScroller components, hooks, and types             | No additional install; patched implementation is bundled                                            |
-| `/questionnaire`    | Questionnaire components and types                       | No additional install; patched implementation is bundled                                            |
-| `/data-grid`        | DataGrid and native table helpers                        | `bun add @tanstack/react-table@9.2.8`                                                               |
-| `/file-upload`      | FileUpload selection and validation                      | `bun add react-dropzone@^20.1.4`                                                                    |
-| `/color-picker`     | ColorPicker                                              | `bun add react-colorful@^5.8.1`                                                                     |
-| `/image-crop`       | ImageCrop and native export helpers                      | `bun add react-image-crop@^11.1.2`                                                                  |
-| `/tree`             | Tree, native hooks and features                          | `bun add @headless-tree/core@^1.8.0 @headless-tree/react@^1.8.0`                                    |
-| `/editor`           | RichTextEditor, native Tiptap hooks and StarterKit       | `bun add @tiptap/core@^3.32.0 @tiptap/react@^3.32.0 @tiptap/pm@^3.32.0 @tiptap/starter-kit@^3.32.0` |
-| `/event-calendar`   | EventCalendar, EventForm and native calendar APIs        | `bun add date-fns@^4.4.0`; TypeScript: `bun add -d @types/react-big-calendar@^1.16.3`               |
-| `/gantt`            | Gantt and Roadmap                                        | `bun add date-fns@^4.4.0 @date-fns/tz@^1.5.0`                                                       |
+| Import path suffix   | Components                                               | Install alongside the package                                                                       |
+| -------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `/json-render`       | JSON Render component registry and catalog               | `bun add @json-render/core@0.21.1 @json-render/react@0.21.1 embla-carousel-react@^8.6.0`            |
+| `/chart`             | Chart parts, AnalyticsChart, Sparkline, hooks and types  | `bun add recharts@3.8.0 cssesc@3.0.0 es-toolkit@1.52.0`                                             |
+| `/calendar`          | Calendar, CalendarDayButton, DatePicker, DateRangePicker | `bun add @daypicker/react@^10.0.2`                                                                  |
+| `/persian-calendar`  | PersianCalendar                                          | `bun add @daypicker/persian@^10.0.2 @daypicker/react@^10.0.2`                                       |
+| `/carousel`          | Carousel components, useCarousel, and carousel types     | `bun add embla-carousel-react@^8.6.0`                                                               |
+| `/command`           | Command components, including CommandDialog              | `bun add cmdk@^1.1.1`                                                                               |
+| `/resizable`         | Resizable components and SplitView                       | `bun add react-resizable-panels@^4.14.3`                                                            |
+| `/fonts.css`         | JetBrains Mono font stylesheet                           | `bun add @fontsource-variable/jetbrains-mono@^5.3.0`                                                |
+| `/sonner`            | Sonner, SonnerToaster, Toaster, toast, useSonner         | No additional install; patched implementation is bundled                                            |
+| `/input-otp`         | InputOTP components                                      | No additional install; patched implementation is bundled                                            |
+| `/virtual-table`     | VirtualTable and row measurement props                   | `@tanstack/react-virtual@3.14.13`                                                                   |
+| `/message-scroller`  | MessageScroller components, hooks, and types             | No additional install; patched implementation is bundled                                            |
+| `/questionnaire`     | Questionnaire components and types                       | No additional install; patched implementation is bundled                                            |
+| `/data-grid`         | DataGrid, column picker, and native table helpers        | `bun add @tanstack/react-table@9.2.8`                                                               |
+| `/virtual-data-grid` | VirtualDataGrid and row measurement props                | `bun add @tanstack/react-table@9.2.8 @tanstack/react-virtual@3.14.13`                               |
+| `/file-upload`       | FileUpload selection and validation                      | `bun add react-dropzone@^20.1.4`                                                                    |
+| `/color-picker`      | ColorPicker                                              | `bun add react-colorful@^5.8.1`                                                                     |
+| `/image-crop`        | ImageCrop and native export helpers                      | `bun add react-image-crop@^11.1.2`                                                                  |
+| `/tree`              | Tree, native hooks and features                          | `bun add @headless-tree/core@^1.8.0 @headless-tree/react@^1.8.0`                                    |
+| `/editor`            | RichTextEditor, native Tiptap hooks and StarterKit       | `bun add @tiptap/core@^3.32.0 @tiptap/react@^3.32.0 @tiptap/pm@^3.32.0 @tiptap/starter-kit@^3.32.0` |
+| `/event-calendar`    | EventCalendar, EventForm and native calendar APIs        | `bun add date-fns@^4.4.0`; TypeScript: `bun add -d @types/react-big-calendar@^1.16.3`               |
+| `/gantt`             | Gantt and Roadmap                                        | `bun add date-fns@^4.4.0 @date-fns/tz@^1.5.0`                                                       |
 
 Import `@alexgorbatchev/shadcn/event-calendar.css` for EventCalendar, and `react-image-crop/dist/ReactCrop.css` for ImageCrop. The root also provides application shells, dashboard and billing layouts, authentication/settings forms, account/workspace controls, Kanban, facets, tags, number fields, toolbars, meters, stat cards and status displays. See the [component catalog reference](./docs/internal/component-catalog.md) for source groups, native APIs, dependency costs and consumer responsibilities.
 
@@ -302,6 +304,8 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 `VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a `TableColumnGroup`; responsive columns keep their widths aligned with cells that share their `visibleFrom`. `maxHeight` defaults to `65vh`, `estimateRowHeight` to 80 pixels, and `overscan` to five rows. `retainedKeys` keeps editing rows mounted; the focused row is retained automatically. Filtering and selection belong to the consumer.
 
+`VirtualDataGrid` renders a TanStack Table instance built with `dataGridFeatures` through `VirtualTable`: every filtered and sorted row, without pagination, in a fixed-layout table. Column `meta` sets `label`, `textAlign`, `truncate`, `visibleFrom`, and `fill`; a `fill` column takes the width the sized columns leave. Other resizable columns get a window-splitter handle that resizes by dragging, by the arrow keys, Home, and End, and resets on double-click. Widths change through CSS variables, so a `useTable` selector can omit `columnSizing` and `columnResizing` to keep resizing from rendering rows. `renderRow` receives each row and its measurement props; spread the props onto a `TableRow` and render `DataGridCells` inside it to wrap rows in menus or drag sources. `retainedRowIds` keeps rows mounted while they hold editors. `DataGridColumnOptions` shows, hides, and reorders the columns that allow hiding; its reset restores the table's initial visibility, order, and sizes.
+
 `StarRating` takes a controlled numeric `value` from 0 to 5, `onValueChange`, and an accessible `label`. Its native radio buttons support keyboard selection and an Unrated option to clear the rating. Set `disabled` while saving. `Avatar shape="square"` displays square artwork with matching image, fallback, and border corners.
 
 `DialogContent size="wide"` uses a desktop maximum width of 576px; `size="narrow"` uses 192px, and the default uses 384px. Dialogs remain bounded by the viewport. `FieldGroup columns={2}` arranges fields in two columns on desktop and one on mobile.

package/THIRD_PARTY_NOTICES.md

@@ -164,6 +164,12 @@ DataGrid, FilterBar, Stepper, FileUpload, Tree, Kanban and planning compositions
 
 Reviewed source: https://github.com/keenthemes/reui/tree/067aa0dc7f8bbfec1cd76fc5ad31f842be5f569a
 
+## TanStack Table examples
+
+VirtualDataGrid and DataGridColumnOptions follow the MIT-licensed TanStack Table React examples for virtualized rows, performant column resizing through CSS variables, column ordering, and column visibility. The package implementation, styling, keyboard resizing and behavioral tests are package-owned.
+
+Reviewed source: https://github.com/TanStack/table/tree/main/examples/react
+
 MIT License
 
 Copyright (c) 2025 Keenthemes Inc
@@ -219,3 +225,7 @@ The optional feature imports use external, separately installed react-dropzone 2
 ## React Big Calendar and uncontrollable
 
 The `/event-calendar` entry point bundles React Big Calendar 1.20.0 (https://github.com/bigcalendar/react-big-calendar), uncontrollable 7.2.1 (https://github.com/jquense/uncontrollable), and their runtime dependencies. The version-pinned patch replaces uncontrollable’s obsolete compiled JSX calls with React’s JSX runtime in its ESM and CommonJS builds. Native state ownership, callbacks and ref forwarding are retained. React and declared peers remain external. Complete bundled dependency notices are included in [licenses/event-calendar.txt](./licenses/event-calendar.txt).
+
+## JSON Render
+
+The optional `/json-render` catalog adapts component schemas and renderers from `@json-render/shadcn` 0.21.1, https://github.com/vercel-labs/json-render. Local modifications use this package’s Base UI components, native composition APIs, semantic variants, accessible labels, and explicit feature exports. JSON Render remains an external optional peer. The Apache License 2.0 is included in [licenses/json-render-APACHE-2.0.txt](./licenses/json-render-APACHE-2.0.txt).

package/dist/{chunk-0ewzb2ax.js → chunk-0kyfh857.js}

@@ -12,7 +12,7 @@ import {
   Chart3,
   ChartTooltipContent2,
   ChartTooltip2
-} from "./chunk-82e7fbmq.js";
+} from "./chunk-9vyg3854.js";
 import {
   take
 } from "./chunk-v8ks0cfq.js";

package/dist/chunk-1xncv9gb.js

@@ -0,0 +1,19 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/Spinner.tsx
+import { Loader2Icon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+function Spinner2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(Loader2Icon, {
+    "data-density": density,
+    "data-slot": "spinner",
+    role: "status",
+    "aria-label": "Loading",
+    className: cn2("size-4 animate-spin", className),
+    ...props
+  });
+}
+
+export { Spinner2 };

package/dist/chunk-2dxa9enk.js

@@ -0,0 +1,98 @@
+import {
+  Table2,
+  TableHeader2,
+  TableBody2
+} from "./chunk-zte6pw69.js";
+
+// src/components/virtual-table/VirtualTable.tsx
+import {
+  Fragment,
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import { jsx, jsxs } from "react/jsx-runtime";
+function VirtualTable2({
+  items,
+  getItemKey,
+  renderRow,
+  header,
+  columns,
+  label,
+  maxHeight = "65vh",
+  estimateRowHeight = 80,
+  overscan = 5,
+  retainedKeys,
+  layout = "fixed"
+}) {
+  const viewport = useRef(null);
+  const [focusedKey, setFocusedKey] = useState();
+  const retained = useMemo(() => items.flatMap((item, index) => retainedKeys?.includes(getItemKey(item)) || getItemKey(item) === focusedKey ? [index] : []), [items, retainedKeys, getItemKey, focusedKey]);
+  const rangeExtractor = useCallback((range) => [...new Set([...defaultRangeExtractor(range), ...retained])].sort((a, b) => a - b), [retained]);
+  const itemKey = useCallback((index) => getItemKey(items[index]), [items, getItemKey]);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => viewport.current,
+    getItemKey: itemKey,
+    estimateSize: () => estimateRowHeight,
+    overscan,
+    rangeExtractor
+  });
+  const rows = virtualizer.getVirtualItems();
+  const last = rows.at(-1);
+  return /* @__PURE__ */ jsx("div", {
+    ref: viewport,
+    "data-testid": "VirtualTable",
+    role: "region",
+    "aria-label": label,
+    tabIndex: 0,
+    className: "min-w-0 overflow-auto overscroll-contain",
+    style: { maxHeight },
+    onFocusCapture: (event) => {
+      const row = event.target.closest("tr[data-index]");
+      const item = items[Number(row?.dataset.index)];
+      if (row && item)
+        setFocusedKey(getItemKey(item));
+    },
+    children: /* @__PURE__ */ jsxs(Table2, {
+      layout,
+      "aria-label": label,
+      "aria-rowcount": items.length + 1,
+      children: [
+        columns,
+        /* @__PURE__ */ jsx(TableHeader2, {
+          children: header
+        }),
+        /* @__PURE__ */ jsxs(TableBody2, {
+          children: [
+            rows.map((row, index) => /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                row.start > (rows[index - 1]?.end ?? 0) && /* @__PURE__ */ jsx("tr", {
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("td", {
+                    style: { height: row.start - (rows[index - 1]?.end ?? 0), padding: 0, border: 0 }
+                  })
+                }),
+                renderRow(items[row.index], {
+                  ref: virtualizer.measureElement,
+                  "data-index": row.index,
+                  "aria-rowindex": row.index + 2
+                })
+              ]
+            }, row.key)),
+            last && virtualizer.getTotalSize() > last.end && /* @__PURE__ */ jsx("tr", {
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("td", {
+                style: { height: virtualizer.getTotalSize() - last.end, padding: 0, border: 0 }
+              })
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+
+export { VirtualTable2 };

package/dist/{chunk-8wfy03bp.js → chunk-6kwf9644.js}

@@ -8,7 +8,7 @@ import {
   Alert2,
   AlertTitle2,
   AlertDescription2
-} from "./chunk-53q730zs.js";
+} from "./chunk-zdt8xxzy.js";
 import {
   mono
 } from "./chunk-fgmcbtyt.js";

package/dist/{chunk-82e7fbmq.js → chunk-9vyg3854.js}

@@ -111,6 +111,7 @@ function ChartTooltipContent2({
   hideIndicator = false,
   label,
   labelFormatter,
+  valueFormatter,
   labelClassName,
   formatter,
   color,
@@ -202,7 +203,7 @@ function ChartTooltipContent2({
                     }),
                     item.value != null && /* @__PURE__ */ jsx2("span", {
                       className: "font-mono font-medium tabular-nums",
-                      children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
+                      children: typeof item.value === "number" ? valueFormatter?.(item.value) ?? item.value.toLocaleString() : String(item.value)
                     })
                   ]
                 })