@alexgorbatchev/shadcn 0.0.16 → 0.0.18

package/README.md

@@ -52,6 +52,7 @@ Import shared controls and providers from `@alexgorbatchev/shadcn`. Import the f
 | `/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      |
 
@@ -268,6 +269,8 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 `InlineEdit` mounts an edit session with a controlled `value`, `onValueChange`, `onCommit`, and `onCancel`. Mount it in place of the displayed label. Its input focuses and selects its text by default; `shouldSelectOnMount={false}` preserves the initial caret. Enter or blur commits once, Escape cancels without committing, and asynchronous saves disable the input until completion. Rejected saves display an error and allow retry.
 
+`VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `columnCount`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a colgroup. `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.
+
 `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-5ntb7p4q.js → chunk-0qcknj5n.js}

@@ -157,7 +157,9 @@ var ThreadHistorySkeleton = () => /* @__PURE__ */ jsxs("div", {
 function Thread2({
   components = EMPTY_COMPONENTS,
   autoFocus = true,
-  emptyComposerPosition = "center"
+  emptyComposerPosition = "center",
+  viewportProps,
+  composerInputRef
 }) {
   const isEmpty = useAuiState(isNewChatView);
   return /* @__PURE__ */ jsx(ThreadComponentsContext.Provider, {
@@ -165,11 +167,19 @@ function Thread2({
     children: /* @__PURE__ */ jsx(ThreadRoot, {
       isEmpty,
       autoFocus,
-      emptyComposerPosition
+      emptyComposerPosition,
+      viewportProps,
+      composerInputRef
     })
   });
 }
-var ThreadRoot = ({ isEmpty, autoFocus, emptyComposerPosition }) => {
+var ThreadRoot = ({
+  isEmpty,
+  autoFocus,
+  emptyComposerPosition,
+  viewportProps,
+  composerInputRef
+}) => {
   const { Welcome = ThreadWelcome } = useContext(ThreadComponentsContext);
   const isCentered = isEmpty && emptyComposerPosition === "center";
   return /* @__PURE__ */ jsx(ThreadPrimitive.Root, {
@@ -178,6 +188,7 @@ var ThreadRoot = ({ isEmpty, autoFocus, emptyComposerPosition }) => {
     }),
     children: /* @__PURE__ */ jsx(ThreadPrimitive.Viewport, {
       turnAnchor: "top",
+      ...viewportProps,
       "data-slot": "aui_thread-viewport",
       render: /* @__PURE__ */ jsx("div", {
         className: "relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth"
@@ -201,15 +212,20 @@ var ThreadRoot = ({ isEmpty, autoFocus, emptyComposerPosition }) => {
               children: () => /* @__PURE__ */ jsx(ThreadMessage, {})
             })
           }),
+          /* @__PURE__ */ jsx("div", {
+            "aria-hidden": "true",
+            className: cn2(!isCentered && "flex-1")
+          }),
           /* @__PURE__ */ jsxs(ThreadPrimitive.ViewportFooter, {
             render: /* @__PURE__ */ jsx("div", {
-              className: cn2("aui-thread-viewport-footer bg-background sticky bottom-0 flex flex-col gap-4 overflow-visible pb-4 md:pb-6", !isCentered && "mt-auto rounded-t-(--composer-radius)")
+              className: cn2("aui-thread-viewport-footer bg-background sticky bottom-0 flex flex-col gap-4 overflow-visible pb-4 md:pb-6", !isCentered && "rounded-t-(--composer-radius)")
             }),
             children: [
               /* @__PURE__ */ jsx(ThreadScrollToBottom, {}),
               /* @__PURE__ */ jsx(ThreadFollowupSuggestions2, {}),
               /* @__PURE__ */ jsx(Composer, {
-                autoFocus
+                autoFocus,
+                inputRef: composerInputRef
               }),
               /* @__PURE__ */ jsx(AuiIf, {
                 condition: (s) => isNewChatView(s) && s.composer.isEmpty,
@@ -460,7 +476,7 @@ var ThreadSuggestionItem = () => {
     })
   });
 };
-var Composer = ({ autoFocus }) => {
+var Composer = ({ autoFocus, inputRef }) => {
   return /* @__PURE__ */ jsx(ComposerPrimitive.Root, {
     render: /* @__PURE__ */ jsx("form", {
       className: "aui-composer-root relative flex w-full flex-col"
@@ -473,6 +489,7 @@ var Composer = ({ autoFocus }) => {
       children: [
         /* @__PURE__ */ jsx(ComposerAttachments3, {}),
         /* @__PURE__ */ jsx(ComposerPrimitive.Input, {
+          ref: inputRef,
           placeholder: "Send a message...",
           rows: 1,
           autoFocus,
@@ -488,6 +505,7 @@ var Composer = ({ autoFocus }) => {
   });
 };
 var ComposerAction = () => {
+  const { ComposerActions } = useContext(ThreadComponentsContext);
   const isSending = useAuiState((s) => s.composer.submission !== undefined && !(s.thread.isRunning && s.thread.capabilities.cancel));
   return /* @__PURE__ */ jsxs("div", {
     className: "aui-composer-action-wrapper relative flex items-center justify-between",
@@ -496,6 +514,7 @@ var ComposerAction = () => {
       /* @__PURE__ */ jsxs("div", {
         className: "flex items-center gap-1.5",
         children: [
+          ComposerActions && /* @__PURE__ */ jsx(ComposerActions, {}),
           /* @__PURE__ */ jsxs(AuiIf, {
             condition: (s) => s.thread.capabilities.dictation,
             children: [
@@ -504,11 +523,11 @@ var ComposerAction = () => {
                 children: /* @__PURE__ */ jsx(ComposerPrimitive.Dictate, {
                   asChild: true,
                   children: /* @__PURE__ */ jsx(TooltipIconButton2, {
-                    tooltip: "Voice input",
+                    tooltip: "Voice Input",
                     side: "bottom",
                     type: "button",
                     variant: "ghost",
-                    "aria-label": "Start voice input",
+                    "aria-label": "Start Voice Input",
                     children: /* @__PURE__ */ jsx(MicIcon, {
                       "aria-hidden": "true",
                       className: "size-4 shrink-0"
@@ -521,11 +540,11 @@ var ComposerAction = () => {
                 children: /* @__PURE__ */ jsx(ComposerPrimitive.StopDictation, {
                   asChild: true,
                   children: /* @__PURE__ */ jsx(TooltipIconButton2, {
-                    tooltip: "Stop dictation",
+                    tooltip: "Stop Dictation",
                     side: "bottom",
                     type: "button",
                     variant: "ghost",
-                    "aria-label": "Stop voice input",
+                    "aria-label": "Stop Voice Input",
                     children: /* @__PURE__ */ jsx(SquareIcon, {
                       "aria-hidden": "true",
                       className: "size-3.5 shrink-0 animate-pulse motion-reduce:animate-none"
@@ -540,11 +559,11 @@ var ComposerAction = () => {
             children: /* @__PURE__ */ jsx(ComposerPrimitive.Send, {
               asChild: true,
               children: /* @__PURE__ */ jsx(TooltipIconButton2, {
-                tooltip: "Send message",
+                tooltip: "Send Message",
                 side: "bottom",
                 type: "button",
                 variant: "default",
-                "aria-label": "Send message",
+                "aria-label": "Send Message",
                 children: /* @__PURE__ */ jsx(ArrowUpIcon, {
                   "aria-hidden": "true",
                   className: "size-4 shrink-0"
@@ -557,11 +576,11 @@ var ComposerAction = () => {
             children: /* @__PURE__ */ jsx(ComposerPrimitive.Resume, {
               asChild: true,
               children: /* @__PURE__ */ jsx(TooltipIconButton2, {
-                tooltip: "Resume generating",
+                tooltip: "Resume Generating",
                 side: "bottom",
                 type: "button",
                 variant: "default",
-                "aria-label": "Resume generating",
+                "aria-label": "Resume Generating",
                 children: /* @__PURE__ */ jsx(PlayIcon, {
                   "aria-hidden": "true",
                   className: "size-4 shrink-0"
@@ -576,7 +595,7 @@ var ComposerAction = () => {
               children: /* @__PURE__ */ jsx(Button2, {
                 type: "button",
                 variant: "default",
-                "aria-label": isSending ? "Cancel sending" : "Stop generating",
+                "aria-label": isSending ? "Cancel Sending" : "Stop Generating",
                 children: /* @__PURE__ */ jsx(SquareIcon, {
                   "aria-hidden": "true",
                   className: "size-3.5 shrink-0"
@@ -874,6 +893,7 @@ var UserImagePart = (part) => /* @__PURE__ */ jsx("div", {
   })
 });
 var UserMessage = () => {
+  const { UserText } = useContext(ThreadComponentsContext);
   return /* @__PURE__ */ jsxs(MessagePrimitive.Root, {
     "data-slot": "aui_user-message-root",
     "data-role": "user",
@@ -888,7 +908,7 @@ var UserMessage = () => {
           /* @__PURE__ */ jsx("div", {
             className: "aui-user-message-content peer bg-muted text-foreground rounded-(--composer-radius) px-4 py-2 wrap-break-word empty:hidden",
             children: /* @__PURE__ */ jsx(MessagePrimitive.Parts, {
-              components: { File: UserFilePart, Image: UserImagePart }
+              components: { Text: UserText, File: UserFilePart, Image: UserImagePart }
             })
           }),
           /* @__PURE__ */ jsx("div", {

package/dist/{chunk-299wvwy8.js → chunk-6aqm34nb.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-q40gqpwh.js";
 import {
   Thread2
-} from "./chunk-5ntb7p4q.js";
+} from "./chunk-0qcknj5n.js";
 import {
   ThreadListSearch2,
   ThreadListRoot2,

package/dist/{chunk-r9mng3ws.js → chunk-c6nvc3ft.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-1x2ch0xc.js";
 import {
   Thread2
-} from "./chunk-5ntb7p4q.js";
+} from "./chunk-0qcknj5n.js";
 
 // src/components/assistant-ui/native/AssistantSidebar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/assistant-ui/native/AssistantModal.js

@@ -1,8 +1,8 @@
 import {
   AssistantModal2
-} from "../../../chunk-299wvwy8.js";
+} from "../../../chunk-6aqm34nb.js";
 import"../../../chunk-tsekdy3w.js";
-import"../../../chunk-5ntb7p4q.js";
+import"../../../chunk-0qcknj5n.js";
 import"../../../chunk-9msk1t9e.js";
 import"../../../chunk-c2vcrwjp.js";
 import"../../../chunk-sbrpnv8s.js";

package/dist/components/assistant-ui/native/AssistantSidebar.js

@@ -1,7 +1,7 @@
 import {
   AssistantSidebar2
-} from "../../../chunk-r9mng3ws.js";
-import"../../../chunk-5ntb7p4q.js";
+} from "../../../chunk-c6nvc3ft.js";
+import"../../../chunk-0qcknj5n.js";
 import"../../../chunk-9msk1t9e.js";
 import"../../../chunk-c2vcrwjp.js";
 import"../../../chunk-sbrpnv8s.js";

package/dist/components/assistant-ui/native/Thread.d.ts

@@ -1,5 +1,5 @@
-import type { ReactElement } from "react";
-import { MessagePrimitive, type ToolCallMessagePartComponent } from "@assistant-ui/react";
+import type { ComponentPropsWithRef, ReactElement, Ref } from "react";
+import { MessagePrimitive, ThreadPrimitive, type TextMessagePartComponent, type ToolCallMessagePartComponent } from "@assistant-ui/react";
 import { type ComponentType, type PropsWithChildren } from "react";
 export type ThreadGroupPart = MessagePrimitive.GroupedParts.GroupPart;
 /**
@@ -12,6 +12,8 @@ export type ThreadGroupPart = MessagePrimitive.GroupedParts.GroupPart;
  * tool group; without it they render like any other tool call.
  */
 export type ThreadComponents = {
+    UserText?: TextMessagePartComponent | undefined;
+    ComposerActions?: ComponentType | undefined;
     AssistantMessage?: ComponentType | undefined;
     Welcome?: ComponentType | undefined;
     ToolFallback?: ToolCallMessagePartComponent | undefined;
@@ -26,9 +28,13 @@ export type ThreadComponents = {
     }> | undefined;
 };
 export type ThreadProps = {
+    /** Native viewport behavior and ref, including scroll restoration. */
+    viewportProps?: Omit<ComponentPropsWithRef<typeof ThreadPrimitive.Viewport>, "children" | "render"> | undefined;
+    /** Ref to the thread composer's native input. */
+    composerInputRef?: Ref<HTMLTextAreaElement> | undefined;
     components?: ThreadComponents | undefined;
     autoFocus?: boolean | undefined;
     /** Place the composer at the bottom even before the first message. */
     emptyComposerPosition?: "center" | "bottom" | undefined;
 };
-export declare function Thread({ components, autoFocus, emptyComposerPosition, }: ThreadProps): ReactElement;
+export declare function Thread({ components, autoFocus, emptyComposerPosition, viewportProps, composerInputRef, }: ThreadProps): ReactElement;

package/dist/components/assistant-ui/native/Thread.js

@@ -1,6 +1,6 @@
 import {
   Thread2
-} from "../../../chunk-5ntb7p4q.js";
+} from "../../../chunk-0qcknj5n.js";
 import"../../../chunk-9msk1t9e.js";
 import"../../../chunk-c2vcrwjp.js";
 import"../../../chunk-sbrpnv8s.js";

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

@@ -64,7 +64,7 @@ import {
 import"../../../chunk-d70rcwk7.js";
 import {
   Thread2
-} from "../../../chunk-5ntb7p4q.js";
+} from "../../../chunk-0qcknj5n.js";
 import {
   useThreadListGroups2,
   ThreadList3,
@@ -77,11 +77,11 @@ import {
 import"../../../chunk-59p19t57.js";
 import {
   AssistantModal2
-} from "../../../chunk-299wvwy8.js";
+} from "../../../chunk-6aqm34nb.js";
 import"../../../chunk-1x2ch0xc.js";
 import {
   AssistantSidebar2
-} from "../../../chunk-r9mng3ws.js";
+} from "../../../chunk-c6nvc3ft.js";
 import {
   ComposerQuotePreviewRoot2,
   ComposerQuotePreviewIcon2,

package/dist/components/virtual-table/VirtualTable.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentProps, type Key, type ReactElement, type ReactNode } from "react";
+import { Table } from "../Table.js";
+export interface IVirtualTableRowProps {
+    ref: (element: HTMLTableRowElement | null) => void;
+    "data-index": number;
+    "aria-rowindex": number;
+}
+interface IVirtualTableProps<T> {
+    items: readonly T[];
+    getItemKey: (item: T) => Key;
+    renderRow: (item: T, props: IVirtualTableRowProps) => ReactNode;
+    header: ReactNode;
+    columns?: ReactNode;
+    columnCount: number;
+    label: string;
+    maxHeight?: number | string;
+    estimateRowHeight?: number;
+    overscan?: number;
+    retainedKeys?: readonly Key[];
+    layout?: ComponentProps<typeof Table>["layout"];
+}
+export declare function VirtualTable<T>({ items, getItemKey, renderRow, header, columns, columnCount, label, maxHeight, estimateRowHeight, overscan, retainedKeys, layout, }: IVirtualTableProps<T>): ReactElement;
+export {};

package/dist/components/virtual-table/index.d.ts

@@ -0,0 +1,2 @@
+export { VirtualTable } from "./VirtualTable.js";
+export type { IVirtualTableRowProps } from "./VirtualTable.js";

package/dist/components/virtual-table/index.js

@@ -0,0 +1,103 @@
+import"../../chunk-cp2m7y7v.js";
+import {
+  Table2,
+  TableHeader2,
+  TableBody2
+} from "../../chunk-0y0kqaqj.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 VirtualTable({
+  items,
+  getItemKey,
+  renderRow,
+  header,
+  columns,
+  columnCount,
+  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", {
+                    colSpan: columnCount,
+                    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", {
+                colSpan: columnCount,
+                style: { height: virtualizer.getTotalSize() - last.end, padding: 0, border: 0 }
+              })
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+export {
+  VirtualTable
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {
@@ -988,6 +988,10 @@
     "./assistant-ui/native/task-tray": {
       "types": "./dist/components/assistant-ui/native/TaskTray.d.ts",
       "import": "./dist/components/assistant-ui/native/TaskTray.js"
+    },
+    "./virtual-table": {
+      "types": "./dist/components/virtual-table/index.d.ts",
+      "import": "./dist/components/virtual-table/index.js"
     }
   },
   "publishConfig": {
@@ -1105,6 +1109,7 @@
     "@daypicker/persian": "^10.0.2",
     "@daypicker/react": "^10.0.2",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@tanstack/react-virtual": "^3.14.13",
     "anser": "2.3.5",
     "beautiful-mermaid": "^1.1.3",
     "cmdk": "^1.1.1",
@@ -1218,6 +1223,9 @@
     },
     "colorjs.io": {
       "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
     }
   },
   "packageManager": "bun@1.4.2"