@platned/ui 0.6.1 → 0.7.0

package/dist/sidebar.d.cts

@@ -1,9 +1,54 @@
 import * as react from 'react';
 import { ReactNode, HTMLAttributes } from 'react';
+import { RowData } from '@tanstack/react-table';
 
 type NavItemSize = 'sm' | 'md';
 type NavItemVariant = 'card' | 'plain';
 
+/** How a column appears in card mode. */
+type ColumnMobileRole = 'title' | 'status' | 'actions' | 'field' | 'hidden';
+
+type DataTableColumnAlign = 'start' | 'center' | 'end';
+/**
+ * Per-column layout options, carried on TanStack's `meta`. Declared by augmenting TanStack's
+ * own `ColumnMeta`, so `meta` on your `ColumnDef` is typed with no extra import:
+ *
+ *     const columns: ColumnDef<Supplier>[] = [
+ *       { accessorKey: 'name', header: 'Supplier', meta: { width: '280px', grow: true, mobile: 'title' } },
+ *     ];
+ */
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * CSS width for the column's `<col>`, e.g. `"320px"` or `"10rem"`. A column is never
+         * narrower than its header text. With `grow`, this is the floor instead.
+         */
+        width?: string;
+        /** Absorbs the table's remaining width, with `width` as its floor. Usually one column. */
+        grow?: boolean;
+        /** Horizontal alignment of the header and cells. Default `start`. */
+        align?: DataTableColumnAlign;
+        /**
+         * The cell renders its own controls (a button, a toggle, a menu). Presses inside it stop
+         * before reaching the row's `onRowClick`, and the cell stops clipping its overflow, so
+         * focus rings are not cut off.
+         */
+        interactive?: boolean;
+        /** Keep the header for screen readers but hide it visually, e.g. an actions column. */
+        hideHeader?: boolean;
+        /** The column's part in card mode. See `ColumnMobileRole`. Default `field`. */
+        mobile?: ColumnMobileRole;
+        /** Pin the first (`start`) or last (`end`) visible column while the table scrolls sideways. */
+        sticky?: 'start' | 'end';
+        /** The column's name where its header cannot be shown as text: menus, card labels. */
+        label?: string;
+        /** Extra classes on the header cell. An escape hatch; prefer `align`. */
+        headerClassName?: string;
+        /** Extra classes on each body cell. An escape hatch; prefer `align`. */
+        cellClassName?: string;
+    }
+}
+
 interface NavTabItem {
     to: string;
     label: string;
@@ -24,6 +69,11 @@ interface NavTabsProps {
 declare function NavTabs({ items, className }: NavTabsProps): react.JSX.Element;
 
 interface SidebarNavItem {
+    /**
+     * The destination. May carry a hash (`/docs/floating#tooltip`) to link to a section of a
+     * page: that row is current only when the hash matches too, and the page's own plain row
+     * steps aside while it is. New in 0.7.0.
+     */
     to: string;
     label: string;
     /** Optional — a collapsed row without one falls back to a monogram of its label. */
@@ -32,6 +82,12 @@ interface SidebarNavItem {
     indicator?: boolean;
     /** Match the path exactly rather than as a prefix. Needed for an index route. */
     end?: boolean;
+    /**
+     * A destination that exists but cannot be opened right now (no permission, coming soon).
+     * The row is dimmed, announced with `aria-disabled`, out of the tab order, and refuses the
+     * press. New in 0.7.0.
+     */
+    disabled?: boolean;
 }
 interface SidebarNavGroup {
     /**

package/dist/sidebar.d.ts

@@ -1,9 +1,54 @@
 import * as react from 'react';
 import { ReactNode, HTMLAttributes } from 'react';
+import { RowData } from '@tanstack/react-table';
 
 type NavItemSize = 'sm' | 'md';
 type NavItemVariant = 'card' | 'plain';
 
+/** How a column appears in card mode. */
+type ColumnMobileRole = 'title' | 'status' | 'actions' | 'field' | 'hidden';
+
+type DataTableColumnAlign = 'start' | 'center' | 'end';
+/**
+ * Per-column layout options, carried on TanStack's `meta`. Declared by augmenting TanStack's
+ * own `ColumnMeta`, so `meta` on your `ColumnDef` is typed with no extra import:
+ *
+ *     const columns: ColumnDef<Supplier>[] = [
+ *       { accessorKey: 'name', header: 'Supplier', meta: { width: '280px', grow: true, mobile: 'title' } },
+ *     ];
+ */
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * CSS width for the column's `<col>`, e.g. `"320px"` or `"10rem"`. A column is never
+         * narrower than its header text. With `grow`, this is the floor instead.
+         */
+        width?: string;
+        /** Absorbs the table's remaining width, with `width` as its floor. Usually one column. */
+        grow?: boolean;
+        /** Horizontal alignment of the header and cells. Default `start`. */
+        align?: DataTableColumnAlign;
+        /**
+         * The cell renders its own controls (a button, a toggle, a menu). Presses inside it stop
+         * before reaching the row's `onRowClick`, and the cell stops clipping its overflow, so
+         * focus rings are not cut off.
+         */
+        interactive?: boolean;
+        /** Keep the header for screen readers but hide it visually, e.g. an actions column. */
+        hideHeader?: boolean;
+        /** The column's part in card mode. See `ColumnMobileRole`. Default `field`. */
+        mobile?: ColumnMobileRole;
+        /** Pin the first (`start`) or last (`end`) visible column while the table scrolls sideways. */
+        sticky?: 'start' | 'end';
+        /** The column's name where its header cannot be shown as text: menus, card labels. */
+        label?: string;
+        /** Extra classes on the header cell. An escape hatch; prefer `align`. */
+        headerClassName?: string;
+        /** Extra classes on each body cell. An escape hatch; prefer `align`. */
+        cellClassName?: string;
+    }
+}
+
 interface NavTabItem {
     to: string;
     label: string;
@@ -24,6 +69,11 @@ interface NavTabsProps {
 declare function NavTabs({ items, className }: NavTabsProps): react.JSX.Element;
 
 interface SidebarNavItem {
+    /**
+     * The destination. May carry a hash (`/docs/floating#tooltip`) to link to a section of a
+     * page: that row is current only when the hash matches too, and the page's own plain row
+     * steps aside while it is. New in 0.7.0.
+     */
     to: string;
     label: string;
     /** Optional — a collapsed row without one falls back to a monogram of its label. */
@@ -32,6 +82,12 @@ interface SidebarNavItem {
     indicator?: boolean;
     /** Match the path exactly rather than as a prefix. Needed for an index route. */
     end?: boolean;
+    /**
+     * A destination that exists but cannot be opened right now (no permission, coming soon).
+     * The row is dimmed, announced with `aria-disabled`, out of the tab order, and refuses the
+     * press. New in 0.7.0.
+     */
+    disabled?: boolean;
 }
 interface SidebarNavGroup {
     /**