@alexgorbatchev/shadcn 0.0.28 → 0.0.30

package/README.md

@@ -300,7 +300,7 @@ 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.
+`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.
 
 `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.
 

package/dist/{chunk-3z5gpbh0.js → chunk-987zth0a.js}

@@ -21,7 +21,7 @@ import {
   TableHead2,
   TableCell2,
   TableCaption2
-} from "./chunk-v0k5jnk5.js";
+} from "./chunk-zte6pw69.js";
 import {
   safeHref
 } from "./chunk-xhtsnwnb.js";

package/dist/{chunk-v0k5jnk5.js → chunk-zte6pw69.js}

@@ -103,10 +103,11 @@ function TableColumnGroup2(props) {
     ...props
   });
 }
-function TableColumn2({ className, visibleFrom, ...props }) {
+function TableColumn2({ className, style, visibleFrom, width, ...props }) {
   return /* @__PURE__ */ jsx("col", {
     "data-slot": "table-column",
     className: cn2(visibleFrom && columnVisibilityClasses[visibleFrom], className),
+    style: width === undefined ? style : { ...style, width },
     ...props
   });
 }

package/dist/components/Table.d.ts

@@ -25,9 +25,12 @@ type TableCellProps = ComponentProps<"td"> & IDensityProps & ITableCellOptions;
 declare function TableCell({ density, className, truncate, textAlign, visibleFrom, ...props }: TableCellProps): ReactElement;
 type TableColumnGroupProps = ComponentProps<"colgroup">;
 declare function TableColumnGroup(props: TableColumnGroupProps): ReactElement;
-type TableColumnProps = ComponentProps<"col"> & Pick<ITableCellOptions, "visibleFrom">;
-/** A sized column; give it the same `visibleFrom` as its header and cells. */
-declare function TableColumn({ className, visibleFrom, ...props }: TableColumnProps): ReactElement;
+type TableColumnProps = ComponentProps<"col"> & Pick<ITableCellOptions, "visibleFrom"> & {
+    /** Fixed column width; numbers are pixels. Columns without one share the remaining width. */
+    width?: number | string;
+};
+/** A column; give it the same `visibleFrom` as its header and cells. */
+declare function TableColumn({ className, style, visibleFrom, width, ...props }: TableColumnProps): ReactElement;
 type TableCaptionProps = ComponentProps<"caption"> & IDensityProps;
 declare function TableCaption({ density, className, ...props }: TableCaptionProps): ReactElement;
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableColumnGroup, TableColumn, };

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

@@ -1,8 +1,8 @@
 import {
   DataTable2
-} from "../../../chunk-3z5gpbh0.js";
+} from "../../../chunk-987zth0a.js";
 import"../../../chunk-1wz92wgg.js";
-import"../../../chunk-v0k5jnk5.js";
+import"../../../chunk-zte6pw69.js";
 import"../../../chunk-bygq5yqf.js";
 import"../../../chunk-wjx6zf94.js";
 import"../../../chunk-q7p28b89.js";

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

@@ -199,8 +199,8 @@ import"../../chunk-1wz92wgg.js";
 import"../../chunk-wjx6zf94.js";
 import {
   DataTable2
-} from "../../chunk-3z5gpbh0.js";
-import"../../chunk-v0k5jnk5.js";
+} from "../../chunk-987zth0a.js";
+import"../../chunk-zte6pw69.js";
 import {
   DaySeparator2
 } from "../../chunk-jhw9q2eq.js";

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

@@ -9,7 +9,7 @@ import {
   TableRow2,
   TableHead2,
   TableCell2
-} from "../../chunk-v0k5jnk5.js";
+} from "../../chunk-zte6pw69.js";
 import {
   NativeSelect2,
   NativeSelectOption2

package/dist/components/gantt/index.js

@@ -24,7 +24,7 @@ import {
   TableRow2,
   TableHead2,
   TableCell2
-} from "../../chunk-v0k5jnk5.js";
+} from "../../chunk-zte6pw69.js";
 
 // src/components/gantt/Gantt.tsx
 import { useId, useState } from "react";

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

@@ -11,7 +11,6 @@ interface IVirtualTableProps<T> {
     renderRow: (item: T, props: IVirtualTableRowProps) => ReactNode;
     header: ReactNode;
     columns?: ReactNode;
-    columnCount: number;
     label: string;
     maxHeight?: number | string;
     estimateRowHeight?: number;
@@ -19,5 +18,5 @@ interface IVirtualTableProps<T> {
     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 declare function VirtualTable<T>({ items, getItemKey, renderRow, header, columns, label, maxHeight, estimateRowHeight, overscan, retainedKeys, layout, }: IVirtualTableProps<T>): ReactElement;
 export {};

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

@@ -3,7 +3,7 @@ import {
   Table2,
   TableHeader2,
   TableBody2
-} from "../../chunk-v0k5jnk5.js";
+} from "../../chunk-zte6pw69.js";
 
 // src/components/virtual-table/VirtualTable.tsx
 import {
@@ -21,7 +21,6 @@ function VirtualTable({
   renderRow,
   header,
   columns,
-  columnCount,
   label,
   maxHeight = "65vh",
   estimateRowHeight = 80,
@@ -74,7 +73,6 @@ function VirtualTable({
                 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 }
                   })
                 }),
@@ -88,7 +86,6 @@ function VirtualTable({
             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 }
               })
             })

package/dist/index.js

@@ -198,7 +198,7 @@ import {
   TableColumnGroup2,
   TableColumn2,
   TableCaption2
-} from "./chunk-v0k5jnk5.js";
+} from "./chunk-zte6pw69.js";
 import {
   NativeSelect2,
   NativeSelectOption2,

package/llms/components/data-display/Table.md

@@ -266,7 +266,7 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
           <Table layout="fixed">
             <TableColumnGroup>
               <TableColumn />
-              <TableColumn visibleFrom="container-sm" style={{ width: 60 }}/>
+              <TableColumn visibleFrom="container-sm" width={60}/>
             </TableColumnGroup>
             <TableHeader>
               <TableRow>

package/llms/components/data-display/VirtualTable.md

@@ -9,7 +9,7 @@ Source: src/components/stories/data-display/VirtualTable.stories.tsx
 
 ```tsx
 import { VirtualTable } from "@alexgorbatchev/shadcn/virtual-table";
-import { TableCell, TableHead, TableRow, Button } from "@alexgorbatchev/shadcn";
+import { TableCell, TableColumn, TableColumnGroup, TableHead, TableRow, Button } from "@alexgorbatchev/shadcn";
 ```
 
 ## Default component
@@ -26,7 +26,6 @@ VirtualTable
     getItemKey: (item) => item,
     label: "Items",
     maxHeight: 300,
-    columnCount: 1,
     header: (<TableRow>
         <TableHead scope="col">Name</TableHead>
       </TableRow>),
@@ -55,3 +54,32 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
     args: { retainedKeys: ["Item 500"] }
 }
 ```
+
+### ResponsiveColumns
+
+```tsx
+{
+    args: {
+        columns: (<TableColumnGroup>
+        <TableColumn />
+        <TableColumn visibleFrom="container-sm" width={80}/>
+        <TableColumn width={60}/>
+      </TableColumnGroup>),
+        header: (<TableRow>
+        <TableHead scope="col">Name</TableHead>
+        <TableHead scope="col" visibleFrom="container-sm">
+          Kind
+        </TableHead>
+        <TableHead scope="col">Size</TableHead>
+      </TableRow>),
+        renderRow: (item, props) => (<TableRow {...props}>
+        <TableCell>{item}</TableCell>
+        <TableCell visibleFrom="container-sm">File</TableCell>
+        <TableCell>1 KB</TableCell>
+      </TableRow>),
+    },
+    render: (args) => (<div style={{ width: 350 }}>
+      <VirtualTable {...args}/>
+    </div>)
+}
+```

package/llms/setup.md

@@ -300,7 +300,7 @@ 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.
+`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.
 
 `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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {