@alexgorbatchev/shadcn 0.0.45 → 0.0.47

package/README.md

@@ -71,7 +71,7 @@ Import shared controls and providers from `@alexgorbatchev/shadcn`. Import the f
 | `/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`                                    |
+| `/tree`              | Tree, native hooks and features                                      | `bun add @headless-tree/core@^1.8.0 @headless-tree/react@^1.8.0`; patched runtimes are bundled      |
 | `/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`                                                       |
@@ -86,7 +86,7 @@ import { ChartContainer, type ChartConfig } from "@alexgorbatchev/shadcn/chart";
 import { Carousel, CarouselContent, CarouselItem } from "@alexgorbatchev/shadcn/carousel";
 ```
 
-A production install of this package adds no third-party packages: every library is an optional peer that consumers install themselves, or is bundled into the package. Core peers are listed under Installation; feature peers are listed per entry point above. The patched `sonner`, `input-otp`, and `@shadcn/react` runtimes, and the calendar with its patched `uncontrollable` wrapper, are bundled so consumers receive the fixes even when their package manager does not apply Bun patches; consumers of those three entry points still install the upstream packages for the types the declarations reference; the calendar runtime stays isolated behind `/event-calendar`. Install `@base-ui/utils` at the exact version `@base-ui/react` requires, so the portal components share Base UI's own ref merging without a second copy. Shared providers work across entry points.
+A production install of this package adds no third-party packages: every library is an optional peer that consumers install themselves, or is bundled into the package. Core peers are listed under Installation; feature peers are listed per entry point above. The patched `sonner`, `input-otp`, `@shadcn/react`, and Headless Tree runtimes, and the calendar with its patched `uncontrollable` wrapper, are bundled so consumers receive the fixes even when their package manager does not apply Bun patches. Install their upstream peers for the types the declarations reference; the tree runtime stays behind `/tree` and the calendar runtime behind `/event-calendar`. Import tree hooks and features from this package's `/tree` entry point so they use the bundled native implementation. Install `@base-ui/utils` at the exact version `@base-ui/react` requires, so the portal components share Base UI's own ref merging without a second copy. Shared providers work across entry points.
 
 The optional assistant-ui catalog provides presentational families under `/assistant-ui/<family>` and runtime adapters under `/assistant-ui/native/<family>`. For example, import `ApprovalCard` from `@alexgorbatchev/shadcn/assistant-ui/approval-card`. Add `@alexgorbatchev/shadcn/assistant-ui.css` to your stylesheet. Native threads require an actual assistant-ui runtime and the selected family's optional peers. See the [assistant-ui reference](./docs/internal/assistant-ui.md) for imports, dependency-bearing styles, source inventory, and the SelectionToolbar isolation limitation.
 
@@ -368,6 +368,14 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 Column `meta.filter` offers a column in `DataGridFilters`, hidden columns included. A `range` filter edits `[min, max]` bounds, `null` for an open end, for `filterFn: "inNumberRange"`; its inputs suggest the range of the rows the other filters leave, formatted through the filter's `Intl.NumberFormatOptions`. An `options` filter chooses among labelled string values, one or several, listed in its `options` or, when they depend on runtime data, in the `options` prop of `DataGridFilters` and `DataGridFilterSummary` keyed by column ID, for `filterFn: "arrHas"` (one value per row), `"arrIncludesSome"` (an array per row), or a custom `filterFn`; each option counts the rows the other filters leave with that value, so a column whose rows hold several values or values in another form supplies them through `getUniqueValues`. Column filters combine with each other and with the global filter. `DataGridFilterSummary` lists the active filters with buttons that remove them, and both controls clear every column filter at once.
 
+Import `DataGridSelectHeader` and `DataGridSelectCell` from `@alexgorbatchev/shadcn/data-grid`. Pass the current `useTable` result as `table` to both controls, and pass `row` and an accessible `label` to each cell. The header selects selectable filtered rows across all pages and preserves selections hidden by filters. It shows a mixed state when some of those rows are selected and disables itself when none are selectable. Its default label is "Select all filtered rows"; provide `label` to name the scope in your application. Cells follow native row selection rules, including disabled rows and partially selected parents. The controls observe selection changes without requiring the parent table selector to include selection state.
+
+`TreeItem linkProps` places the registered tree item, roving focus, and native drag handlers on an anchor. Pass `href` and anchor events directly, or compose a router link through `linkProps.render`. The outer `render` and `ref` remain available for row overlays; disclosure and `endEnhancer` controls remain siblings of the link. Enter and modified clicks retain native link behavior, while tree arrows retain navigation and expansion behavior. Optional `dropHint={{ content, open, side }}` displays caller-controlled drag feedback without adding a focus target.
+
+Embedded actions, links, menus, editable fields, and media controls retain their own keyboard behavior. Registered anchor and button rows still participate in tree navigation; rename and search inputs retain their completion and cancellation shortcuts.
+
+`PageHeader` accepts an optional `eyebrow` above its single page title. It accepts any React content without introducing another heading. Breadcrumbs, description, actions, and density remain independent slots; long action content wraps within narrow layouts.
+
 `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/dist/{chunk-pp0qdx0f.js → chunk-0qgd06td.js}

@@ -3140,7 +3140,7 @@ function AppShell2({
 }
 // src/components/PageHeader.tsx
 import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
-function PageHeader2({ title, description, breadcrumbs, actions, density }) {
+function PageHeader2({ title, eyebrow, description, breadcrumbs, actions, density }) {
   return /* @__PURE__ */ jsxs19("header", {
     "data-density": density,
     "data-slot": "page-header",
@@ -3154,6 +3154,10 @@ function PageHeader2({ title, description, breadcrumbs, actions, density }) {
           /* @__PURE__ */ jsxs19("div", {
             className: "min-w-0",
             children: [
+              eyebrow != null && /* @__PURE__ */ jsx32("div", {
+                className: "mb-2 text-xs font-medium tracking-widest text-muted-foreground",
+                children: eyebrow
+              }),
               /* @__PURE__ */ jsx32("h1", {
                 className: "text-xl font-semibold text-foreground",
                 children: title
@@ -3165,7 +3169,7 @@ function PageHeader2({ title, description, breadcrumbs, actions, density }) {
             ]
           }),
           actions && /* @__PURE__ */ jsx32("div", {
-            className: "flex shrink-0 flex-wrap items-center gap-control-gap",
+            className: "flex min-w-0 max-w-full flex-wrap items-center gap-control-gap wrap-anywhere",
             children: actions
           })
         ]

package/dist/{chunk-9w9berq8.js → chunk-caz81rnv.js}

@@ -7,7 +7,7 @@ import {
 
 // src/components/Checkbox.tsx
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 function Checkbox2({ analytics, density, className, ...props }) {
   const trackedOnCheckedChange = useAnalyticsCallback("Checkbox", analytics, { name: "ui.change-request" }, props.onCheckedChange);
@@ -20,7 +20,14 @@ function Checkbox2({ analytics, density, className, ...props }) {
     children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
       "data-slot": "checkbox-indicator",
       className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
-      children: /* @__PURE__ */ jsx(CheckIcon, {})
+      render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {
+        ...indicatorProps,
+        children: state.indeterminate ? /* @__PURE__ */ jsx(MinusIcon, {
+          "data-slot": "checkbox-mixed-indicator"
+        }) : /* @__PURE__ */ jsx(CheckIcon, {
+          "data-slot": "checkbox-checked-indicator"
+        })
+      })
     })
   });
 }

package/dist/{chunk-k455qwx2.js → chunk-dy4ghe9p.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-1xncv9gb.js";
 import {
   Checkbox2
-} from "./chunk-9w9berq8.js";
+} from "./chunk-caz81rnv.js";
 import {
   useReceiptFocus
 } from "./chunk-vxvaaptq.js";

package/dist/{chunk-55s7v2mw.js → chunk-mqea74ex.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-vxvaaptq.js";
 import {
   OptionList2
-} from "./chunk-k455qwx2.js";
+} from "./chunk-dy4ghe9p.js";
 
 // src/components/assistant-ui/elements/QuestionFlow.tsx
 import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";

package/dist/components/PageHeader.d.ts

@@ -2,10 +2,12 @@ import type { ReactElement, ReactNode } from "react";
 import type { IDensityProps } from "../density/types.js";
 type PageHeaderProps = IDensityProps & {
     title: string;
+    /** Context above the page title without introducing another heading. */
+    eyebrow?: ReactNode;
     description?: ReactNode;
     breadcrumbs?: ReactNode;
     actions?: ReactNode;
 };
-declare function PageHeader({ title, description, breadcrumbs, actions, density }: PageHeaderProps): ReactElement;
+declare function PageHeader({ title, eyebrow, description, breadcrumbs, actions, density }: PageHeaderProps): ReactElement;
 export { PageHeader };
 export type { PageHeaderProps };

package/dist/components/assistant-ui/elements/OptionList.js

@@ -1,10 +1,10 @@
 import {
   OptionList2
-} from "../../../chunk-k455qwx2.js";
+} from "../../../chunk-dy4ghe9p.js";
 import"../../../chunk-71efbr5n.js";
 import"../../../chunk-vxvaaptq.js";
 import"../../../chunk-1xncv9gb.js";
-import"../../../chunk-9w9berq8.js";
+import"../../../chunk-caz81rnv.js";
 import"../../../chunk-38301e40.js";
 import"../../../chunk-x90xmrba.js";
 import"../../../chunk-jpvw9xqy.js";

package/dist/components/assistant-ui/elements/QuestionFlow.js

@@ -1,11 +1,11 @@
 import {
   QuestionFlow2
-} from "../../../chunk-55s7v2mw.js";
-import"../../../chunk-k455qwx2.js";
+} from "../../../chunk-mqea74ex.js";
+import"../../../chunk-dy4ghe9p.js";
 import"../../../chunk-71efbr5n.js";
 import"../../../chunk-vxvaaptq.js";
 import"../../../chunk-1xncv9gb.js";
-import"../../../chunk-9w9berq8.js";
+import"../../../chunk-caz81rnv.js";
 import"../../../chunk-38301e40.js";
 import"../../../chunk-x90xmrba.js";
 import"../../../chunk-jpvw9xqy.js";

package/dist/components/assistant-ui/index.js

@@ -427,13 +427,13 @@ import {
   OpenAILogo2
 } from "../../chunk-pa07b92f.js";
 import"../../chunk-1xncv9gb.js";
-import"../../chunk-9w9berq8.js";
+import"../../chunk-caz81rnv.js";
 import {
   OptionText2
 } from "../../chunk-71efbr5n.js";
 import {
   OptionList2
-} from "../../chunk-k455qwx2.js";
+} from "../../chunk-dy4ghe9p.js";
 import {
   PermissionGrant2
 } from "../../chunk-8jnfvgvk.js";
@@ -442,7 +442,7 @@ import {
 } from "../../chunk-10t1w38s.js";
 import {
   QuestionFlow2
-} from "../../chunk-55s7v2mw.js";
+} from "../../chunk-mqea74ex.js";
 import {
   QuotaBanner2
 } from "../../chunk-zp3wrbve.js";

package/dist/components/data-grid/DataGridSelectCell.d.ts

@@ -0,0 +1,12 @@
+import { type RowData } from "@tanstack/react-table";
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+import type { DataGridRow, IDataGridControlProps } from "./DataGrid.js";
+interface DataGridSelectCellProps<T extends RowData> extends IDensityProps, IDataGridControlProps<T> {
+    row: DataGridRow<T>;
+    /** Names this row's selection control, such as "Select project Atlas". */
+    label: string;
+}
+/** Uses the row's native selection rules, including disabled and partially selected parent rows. */
+export declare function DataGridSelectCell<T extends RowData>({ row, table, label, density, }: DataGridSelectCellProps<T>): ReactElement;
+export type { DataGridSelectCellProps };

package/dist/components/data-grid/DataGridSelectHeader.d.ts

@@ -0,0 +1,8 @@
+import { type RowData } from "@tanstack/react-table";
+import type { ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+import type { IDataGridControlProps } from "./DataGrid.js";
+type DataGridSelectHeaderProps<T extends RowData> = IDataGridControlProps<T> & IDensityProps;
+/** Selects the selectable filtered rows across every page, preserving selections hidden by filters. */
+export declare function DataGridSelectHeader<T extends RowData>({ table, label, density, }: DataGridSelectHeaderProps<T>): ReactElement;
+export type { DataGridSelectHeaderProps };

package/dist/components/data-grid/index.d.ts

@@ -3,3 +3,7 @@ export type { DataGridColumn, DataGridColumnFilter, DataGridFeatures, DataGridPr
 export { DataGridColumnOptions } from "./DataGridColumnOptions.js";
 export { DataGridFilters } from "./DataGridFilters.js";
 export { DataGridFilterSummary } from "./DataGridFilterSummary.js";
+export { DataGridSelectHeader } from "./DataGridSelectHeader.js";
+export type { DataGridSelectHeaderProps } from "./DataGridSelectHeader.js";
+export { DataGridSelectCell } from "./DataGridSelectCell.js";
+export type { DataGridSelectCellProps } from "./DataGridSelectCell.js";

package/dist/components/data-grid/index.js

@@ -22,7 +22,7 @@ import {
 } from "../../chunk-77xfccfq.js";
 import {
   Checkbox2
-} from "../../chunk-9w9berq8.js";
+} from "../../chunk-caz81rnv.js";
 import {
   Label2
 } from "../../chunk-jcxxjkqx.js";
@@ -514,6 +514,56 @@ function DataGridFilterSummary({
     }
   });
 }
+// src/components/data-grid/DataGridSelectHeader.tsx
+import { Subscribe as Subscribe4 } from "@tanstack/react-table";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function DataGridSelectHeader({
+  table,
+  label = "Select all filtered rows",
+  density
+}) {
+  return /* @__PURE__ */ jsx4(Subscribe4, {
+    source: table.store,
+    selector: (state) => ({
+      selection: state.rowSelection,
+      filters: state.columnFilters,
+      filter: state.globalFilter
+    }),
+    children: () => {
+      const rows = table.getFilteredRowModel().flatRows.filter((row) => row.getCanSelect() && row.getParentRows().every((parent) => parent.getCanSelectSubRows()));
+      const selected = rows.filter((row) => row.getIsSelected()).length;
+      return /* @__PURE__ */ jsx4(Checkbox2, {
+        "aria-label": label,
+        density,
+        disabled: rows.length === 0,
+        checked: rows.length > 0 && selected === rows.length,
+        indeterminate: selected > 0 && selected < rows.length,
+        onCheckedChange: (checked) => table.toggleAllRowsSelected(checked)
+      });
+    }
+  });
+}
+// src/components/data-grid/DataGridSelectCell.tsx
+import { Subscribe as Subscribe5 } from "@tanstack/react-table";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function DataGridSelectCell({
+  row,
+  table,
+  label,
+  density
+}) {
+  return /* @__PURE__ */ jsx5(Subscribe5, {
+    source: table.atoms.rowSelection,
+    children: () => /* @__PURE__ */ jsx5(Checkbox2, {
+      "aria-label": label,
+      density,
+      checked: row.getIsSelected(),
+      indeterminate: row.getIsSomeSelected(),
+      disabled: !row.getCanSelect(),
+      onCheckedChange: (checked) => row.toggleSelected(checked)
+    })
+  });
+}
 export {
   DataGrid2 as DataGrid,
   DataGridCells2 as DataGridCells,
@@ -523,5 +573,7 @@ export {
   DataGridFilterSummary,
   DataGridFilters,
   DataGridPagination2 as DataGridPagination,
+  DataGridSelectCell,
+  DataGridSelectHeader,
   dataGridFeatures2 as dataGridFeatures
 };

package/dist/components/event-calendar/index.js

@@ -22,7 +22,7 @@ import {
 } from "../../chunk-0fmrwsgp.js";
 import {
   Checkbox2
-} from "../../chunk-9w9berq8.js";
+} from "../../chunk-caz81rnv.js";
 import {
   Spinner2
 } from "../../chunk-1xncv9gb.js";

package/dist/components/json-render/index.js

@@ -36,7 +36,7 @@ import {
   DrawerHeader2,
   DrawerTitle2,
   DrawerDescription2
-} from "../../chunk-pp0qdx0f.js";
+} from "../../chunk-0qgd06td.js";
 import {
   DropdownMenu2,
   DropdownMenuTrigger2,
@@ -105,7 +105,7 @@ import {
 import"../../chunk-9de1htr5.js";
 import {
   Checkbox2
-} from "../../chunk-9w9berq8.js";
+} from "../../chunk-caz81rnv.js";
 import"../../chunk-1j2hz3w9.js";
 import"../../chunk-k99h6evz.js";
 import {

package/dist/components/tree/TreeItem.d.ts

@@ -17,7 +17,15 @@ type TreeItemProps<T> = useRender.ComponentProps<"div", TreeItemState> & IDensit
     expandOn?: "click" | "doubleClick" | "disclosure";
     isEditing?: boolean;
     isDropTarget?: boolean;
+    /** The registered native link owns row focus; disclosure and actions remain siblings. */
+    linkProps?: useRender.ComponentProps<"a", TreeItemState>;
+    /** Domain-controlled drag feedback; omitted rows have no tooltip wrapper. */
+    dropHint?: {
+        content: ReactNode;
+        open: boolean;
+        side?: "top" | "right" | "bottom" | "left";
+    };
 };
 /** Registered tree row; compose menus with render and place counts/actions in endEnhancer. */
-export declare function TreeItem<T>({ analytics, item, children, startEnhancer, endEnhancer, expandOn, isEditing, isDropTarget, density, render, ref, ...props }: TreeItemProps<T>): ReactElement;
+export declare function TreeItem<T>({ analytics, item, children, startEnhancer, endEnhancer, expandOn, isEditing, isDropTarget, linkProps, dropHint, density, render, ref, ...props }: TreeItemProps<T>): ReactElement;
 export type { TreeItemProps };