@tristan2828/ui-foundation 4.61.1 → 4.63.0

package/dist/components/app/rich-text-table.d.ts

@@ -1,6 +1,7 @@
-import { type EditorState, type Transaction } from '@milkdown/kit/prose/state';
+import { Plugin, type EditorState, type Transaction } from '@milkdown/kit/prose/state';
+import { type HighlightColor } from '../../lib/markdown-highlight.js';
 type Dispatch = (tr: Transaction) => void;
-export type TableAction = 'rowAbove' | 'rowBelow' | 'columnLeft' | 'columnRight' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'deleteRow' | 'deleteColumn' | 'deleteTable';
+export type TableAction = 'rowAbove' | 'rowBelow' | 'columnLeft' | 'columnRight' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'deleteRow' | 'deleteColumn' | 'deleteTable' | 'moveRowUp' | 'moveRowDown' | 'moveColumnLeft' | 'moveColumnRight' | 'sortAscending' | 'sortDescending' | 'headerColumn';
 export type ColumnAlignment = 'left' | 'center' | 'right';
 /** The caret's column's alignment, as the header cell has it (GFM's default is left). */
 export declare function columnAlignment(state: EditorState): ColumnAlignment;
@@ -8,6 +9,22 @@ export declare function columnAlignment(state: EditorState): ColumnAlignment;
 export declare function tableActionEnabled(state: EditorState, action: TableAction): boolean;
 /** Runs an action where the caret is. False when it can't apply there. */
 export declare function runTableAction(state: EditorState, dispatch: Dispatch, action: TableAction): boolean;
+/** Whether the caret's table has a header column (its first cells bold). */
+export declare function headerColumnOn(state: EditorState): boolean;
+/** What a colour is put on: the caret's cell, its whole row, or its column's body cells. */
+export type TableColorScope = 'cell' | 'row' | 'column';
+/** Whether a colour can go on that scope where the caret is (never the header row's cells). */
+export declare function tableColorEnabled(state: EditorState, scope: TableColorScope): boolean;
+/** The cell colour where the caret is, or null (none, or the header row). */
+export declare function cellColorAt(state: EditorState): HighlightColor | null;
+/**
+ * Colours cells: each one's whole text put in that highlight (`null`
+ * takes the highlight off). An empty cell stays as it is: a highlight
+ * needs words.
+ */
+export declare function colorTableCells(state: EditorState, dispatch: Dispatch, scope: TableColorScope, color: HighlightColor | null): boolean;
+/** The plugin that draws cell colours and a header column (tableDecorations). */
+export declare function tableLook(): Plugin;
 /**
  * The editor's table keys, before Milkdown's own (which go to the next
  * cell on Tab, and out of the table on any Enter). True when it handled

package/dist/components/app/rich-text-table.js

@@ -1,4 +1,32 @@
-import { TextSelection } from '@milkdown/kit/prose/state';
+// What the rich-text editor can do to a table: rows and columns added,
+// deleted and moved, a column's alignment, the rows sorted by a column,
+// cells coloured, a header column, the whole table deleted, and its keys.
+// Plain ProseMirror commands over prosemirror-tables and Milkdown's gfm
+// schema, so each is one undo step.
+//
+// Sorting rewrites the rows' order: what the editor shows is what it
+// saves, so a sort is an edit like any other (Ctrl+Z puts them back).
+// Colours and the header column are stored as Markdown already writes
+// them (src/lib/markdown-table.ts): a coloured cell is its whole text in
+// one highlight, a header column is its first cells in bold. The table's
+// decorations (tableLook) draw them.
+//
+// What GFM can't store, the editor doesn't offer: a table always keeps its
+// header row and at least one row under it, and at least one column, so
+// those deletes are off where they'd break that (the header row can't be
+// deleted or have a row put above it). Alignment is per column, as the
+// Markdown writes it (`:---:`).
+//
+// Keys (handleTableKey), on top of Milkdown's Tab/Shift+Tab between cells:
+// Tab in the last cell adds a row; Enter goes to the cell below, and out
+// of the table from its last row; Shift+Enter does nothing (a line break
+// can't be stored inside a cell).
+import { closeHistory } from '@milkdown/kit/prose/history';
+import { Fragment } from '@milkdown/kit/prose/model';
+import { Plugin, PluginKey, TextSelection } from '@milkdown/kit/prose/state';
+import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
+import { isHighlightColor } from '../../lib/markdown-highlight.js';
+import { cellColor, compareCells, isHeaderColumn } from '../../lib/markdown-table.js';
 import { addColumnAfter, addColumnBefore, deleteColumn, deleteRow, deleteTable, isInTable, selectedRect, TableMap, } from '@milkdown/kit/prose/tables';
 const ALIGN = {
     alignLeft: 'left',
@@ -26,6 +54,19 @@ export function tableActionEnabled(state, action) {
             return top > 0 && bottom - top < map.height - 1;
         case 'deleteColumn':
             return right - left < map.width;
+        case 'moveRowUp':
+            return top > 1;
+        case 'moveRowDown':
+            return top > 0 && bottom < map.height;
+        case 'moveColumnLeft':
+            return left > 0;
+        case 'moveColumnRight':
+            return right < map.width;
+        case 'sortAscending':
+        case 'sortDescending':
+            return map.height > 2;
+        case 'headerColumn':
+            return map.height > 1;
         default:
             return true;
     }
@@ -52,10 +93,200 @@ export function runTableAction(state, dispatch, action) {
             return deleteColumn(state, dispatch);
         case 'deleteTable':
             return deleteTable(state, dispatch);
+        case 'moveRowUp':
+        case 'moveRowDown':
+            return moveRow(state, dispatch, action === 'moveRowUp' ? -1 : 1);
+        case 'moveColumnLeft':
+        case 'moveColumnRight':
+            return moveColumn(state, dispatch, action === 'moveColumnLeft' ? -1 : 1);
+        case 'sortAscending':
+        case 'sortDescending':
+            return sortRows(state, dispatch, action === 'sortAscending' ? 1 : -1);
+        case 'headerColumn':
+            return toggleHeaderColumn(state, dispatch);
         default:
             return false;
     }
 }
+// The table rebuilt from its rows, in place of the old one, and the caret
+// into the cell at `row`, `column` of the new one. Its own undo step,
+// never merged with the edit before it (two sorts in a row undo one at a time).
+function replaceRows(state, dispatch, rows, row, column) {
+    const { table, tableStart } = selectedRect(state);
+    const next = table.copy(Fragment.from(rows));
+    const tr = state.tr.replaceWith(tableStart - 1, tableStart - 1 + table.nodeSize, next);
+    const map = TableMap.get(next);
+    tr.setSelection(TextSelection.near(tr.doc.resolve(tableStart + map.map[row * map.width + column] + 1)));
+    dispatch(closeHistory(tr.scrollIntoView()));
+    return true;
+}
+const rowsOf = (table) => {
+    const rows = [];
+    table.forEach((row) => rows.push(row));
+    return rows;
+};
+// The caret's row swapped with the one above or below (never the header
+// row: GFM's first row is always the header).
+function moveRow(state, dispatch, by) {
+    const { table, top, left } = selectedRect(state);
+    const rows = rowsOf(table);
+    const to = top + by;
+    [rows[top], rows[to]] = [rows[to], rows[top]];
+    return replaceRows(state, dispatch, rows, to, left);
+}
+// The caret's column swapped with the one left or right of it, in every
+// row; each cell keeps its alignment, so the column's moves with it.
+function moveColumn(state, dispatch, by) {
+    const { table, top, left } = selectedRect(state);
+    const to = left + by;
+    const rows = rowsOf(table).map((row) => {
+        const cells = [];
+        row.forEach((cell) => cells.push(cell));
+        [cells[left], cells[to]] = [cells[to], cells[left]];
+        return row.copy(Fragment.from(cells));
+    });
+    return replaceRows(state, dispatch, rows, top, to);
+}
+// The body rows in the order of the caret's column (numbers by value,
+// then words, empty cells last), the header row kept first. Rows that
+// tie keep their order. The caret goes to the column's header.
+function sortRows(state, dispatch, direction) {
+    const { table, left } = selectedRect(state);
+    const [header, ...body] = rowsOf(table);
+    const text = (row) => row.child(left).textContent;
+    const sorted = body
+        .map((row, index) => ({ row, index }))
+        .sort((a, b) => compareCells(text(a.row), text(b.row)) * direction || a.index - b.index)
+        .map(({ row }) => row);
+    return replaceRows(state, dispatch, [header, ...sorted], 0, left);
+}
+// A cell's text as runs, with their highlight and bold (markdown-table.ts).
+function runsOf(cell) {
+    const runs = [];
+    cell.descendants((node) => {
+        if (!node.isText)
+            return true;
+        const highlight = node.marks.find((mark) => mark.type.name === 'highlight');
+        const color = highlight ? (isHighlightColor(highlight.attrs.color) ? highlight.attrs.color : 'amber') : null;
+        runs.push({ text: node.text ?? '', color, bold: node.marks.some((mark) => mark.type.name === 'strong') });
+        return false;
+    });
+    return runs;
+}
+// Each body row's first cell, and where it starts in the document.
+function firstCells(table, tableStart) {
+    const cells = [];
+    table.forEach((row, offset, index) => {
+        if (index > 0 && row.firstChild)
+            cells.push({ cell: row.firstChild, pos: tableStart + offset + 1 });
+    });
+    return cells;
+}
+/** Whether the caret's table has a header column (its first cells bold). */
+export function headerColumnOn(state) {
+    if (!isInTable(state))
+        return false;
+    const { table, tableStart } = selectedRect(state);
+    return isHeaderColumn(firstCells(table, tableStart).map(({ cell }) => runsOf(cell)));
+}
+// The header column on (each body row's first cell bolded) or off (unbolded).
+function toggleHeaderColumn(state, dispatch) {
+    const { table, tableStart } = selectedRect(state);
+    const strong = state.schema.marks.strong;
+    const on = headerColumnOn(state);
+    const tr = state.tr;
+    for (const { cell, pos } of firstCells(table, tableStart)) {
+        const from = pos + 1;
+        const to = pos + cell.nodeSize - 1;
+        if (on)
+            tr.removeMark(from, to, strong);
+        else if (cell.textContent.trim())
+            tr.addMark(from, to, strong.create());
+    }
+    if (tr.docChanged)
+        dispatch(closeHistory(tr));
+    return true;
+}
+/** Whether a colour can go on that scope where the caret is (never the header row's cells). */
+export function tableColorEnabled(state, scope) {
+    if (!isInTable(state))
+        return false;
+    const { map, top } = selectedRect(state);
+    return scope === 'column' ? map.height > 1 : top > 0;
+}
+/** The cell colour where the caret is, or null (none, or the header row). */
+export function cellColorAt(state) {
+    if (!isInTable(state))
+        return null;
+    const { table, map, left, top } = selectedRect(state);
+    const cell = table.nodeAt(map.map[top * map.width + left]);
+    return cell ? cellColor(runsOf(cell)) : null;
+}
+/**
+ * Colours cells: each one's whole text put in that highlight (`null`
+ * takes the highlight off). An empty cell stays as it is: a highlight
+ * needs words.
+ */
+export function colorTableCells(state, dispatch, scope, color) {
+    if (!tableColorEnabled(state, scope))
+        return false;
+    const { map, table, tableStart, top, bottom, left, right } = selectedRect(state);
+    const highlight = state.schema.marks.highlight;
+    const rows = scope === 'column' ? [1, map.height] : [top, bottom];
+    const columns = scope === 'row' ? [0, map.width] : [left, right];
+    const tr = state.tr;
+    for (let row = rows[0]; row < rows[1]; row++) {
+        for (let column = columns[0]; column < columns[1]; column++) {
+            const offset = map.map[row * map.width + column];
+            const cell = table.nodeAt(offset);
+            const from = tableStart + offset + 1;
+            const to = tableStart + offset + cell.nodeSize - 1;
+            tr.removeMark(from, to, highlight);
+            if (color && cell.textContent.trim())
+                tr.addMark(from, to, highlight.create({ color }));
+        }
+    }
+    if (tr.docChanged)
+        dispatch(closeHistory(tr));
+    return true;
+}
+// The decorations that draw what the Markdown keeps: a coloured cell's
+// wash (`data-color`) and a header column's first cells (`data-row-header`),
+// styled in styles/index.css ("Tables in written text").
+function tableDecorations(doc) {
+    const decorations = [];
+    doc.descendants((node, pos) => {
+        if (node.type.name !== 'table')
+            return node.isBlock && !node.isTextblock;
+        const tableStart = pos + 1;
+        node.forEach((row, rowOffset) => {
+            row.forEach((cell, cellOffset) => {
+                const color = cellColor(runsOf(cell));
+                const at = tableStart + rowOffset + 1 + cellOffset;
+                if (color)
+                    decorations.push(Decoration.node(at, at + cell.nodeSize, { 'data-color': color }));
+            });
+        });
+        const firsts = firstCells(node, tableStart);
+        if (isHeaderColumn(firsts.map(({ cell }) => runsOf(cell))))
+            for (const { cell, pos: at } of firsts)
+                decorations.push(Decoration.node(at, at + cell.nodeSize, { 'data-row-header': '' }));
+        return false;
+    });
+    return DecorationSet.create(doc, decorations);
+}
+const tableLookKey = new PluginKey('tableLook');
+/** The plugin that draws cell colours and a header column (tableDecorations). */
+export function tableLook() {
+    return new Plugin({
+        key: tableLookKey,
+        state: {
+            init: (_config, state) => tableDecorations(state.doc),
+            apply: (tr, previous) => (tr.docChanged ? tableDecorations(tr.doc) : previous),
+        },
+        props: { decorations: (state) => tableLookKey.getState(state) },
+    });
+}
 // A row of empty cells, each aligned as its column is, above or below the
 // caret's rows (or at the end: `'end'`), and the caret into it in the
 // same column (the first, at the end).

package/dist/components/app/rich-text-toolbar.d.ts

@@ -2,7 +2,6 @@ import { type Ref } from 'react';
 import type { EditorState } from '@milkdown/kit/prose/state';
 import { type FormatItem } from './rich-text-format-items.js';
 import { type FormatId } from './rich-text-formats.js';
-import type { TableAction } from './rich-text-table.js';
 declare const SETS: {
     all: FormatItem[][];
     tools: FormatItem[][];
@@ -16,18 +15,16 @@ export type FormatButtonsProps = {
     readOnly: boolean;
     /** A button pressed: run the format on the editor and give it focus back. */
     onFormat: (id: FormatId) => void;
-    /** A Table menu item picked (only the fixed toolbar has the menu). */
-    onTable?: (action: TableAction) => void;
     /** The Image button pressed: pick images to upload. No button without it. */
     onImage?: () => void;
     /** The Full screen button pressed. No button without it. */
     onFullScreen?: () => void;
     /** Whether the editor is full screen now (the button's state). */
     fullScreen?: boolean;
-    /** The editable element, for the Table menu to give focus back to. */
+    /** The editable element, for the Highlight menu to give focus back to. */
     text?: () => HTMLElement | null;
 };
-export declare function FormatButtons({ formats, state, readOnly, onFormat, onTable, onImage, onFullScreen, fullScreen, text }: FormatButtonsProps): import("react").JSX.Element;
+export declare function FormatButtons({ formats, state, readOnly, onFormat, onImage, onFullScreen, fullScreen, text }: FormatButtonsProps): import("react").JSX.Element;
 export interface RichTextToolbarProps {
     /** The editor's state now, to show which formats are on. Null until it's made. */
     state: EditorState | null;
@@ -36,18 +33,16 @@ export interface RichTextToolbarProps {
     controls?: string;
     /** A button pressed: run the format on the editor and give it focus back. */
     onFormat: (id: FormatId) => void;
-    /** A Table menu item picked: run it on the editor and give it focus back. */
-    onTable: (action: TableAction) => void;
     /** The Image button pressed (only when the editor uploads images). */
     onImage?: () => void;
     /** The Full screen button pressed. No button without it. */
     onFullScreen?: () => void;
     /** Whether the editor is full screen now. */
     fullScreen?: boolean;
-    /** The editable element, for the Table menu to give focus back to. */
+    /** The editable element, for the Highlight menu to give focus back to. */
     text: () => HTMLElement | null;
     /** The toolbar's element, for Alt+F10 to reach it from the text. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, onImage, onFullScreen, fullScreen, text, ref }: RichTextToolbarProps): import("react").JSX.Element;
+export declare function RichTextToolbar({ state, readOnly, controls, onFormat, onImage, onFullScreen, fullScreen, text, ref }: RichTextToolbarProps): import("react").JSX.Element;
 export {};

package/dist/components/app/rich-text-toolbar.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // The rich-text editor's fixed toolbar: one row of pressed/not-pressed
 // buttons above the text, each a format and its keyboard shortcut, a
-// Table menu (rich-text-table-menu.tsx), and, when the editor uploads
-// images, an Image button (a plain button: it opens the file picker).
+// Table button that inserts one (a table's own grips edit it:
+// rich-text-table-grips.tsx), and, when the editor uploads images, an
+// Image button (a plain button: it opens the file picker).
 //
 // - One tab stop (ARIA's toolbar pattern): Tab reaches the last button
 //   used, the arrow keys, Home and End move along the row.
@@ -24,7 +25,6 @@ import { FORMAT_GROUPS, FORMAT_ITEMS } from './rich-text-format-items.js';
 import { formatOn } from './rich-text-formats.js';
 import { ariaKeys, isApple, shownKeys } from './rich-text-shortcuts.js';
 import { RichTextHighlightMenu } from './rich-text-highlight-menu.js';
-import { RichTextTableMenu } from './rich-text-table-menu.js';
 // Which buttons a toolbar has: every format (the fixed one), or the ones
 // that apply to selected words (the floating one).
 const SELECTION = ['bold', 'italic', 'strike', 'code', 'highlight', 'link'];
@@ -51,7 +51,7 @@ function useCompact() {
 // A toolbar's row of buttons: one tab stop, the last one used (ARIA's
 // toolbar pattern); the arrow keys, Home and End move along the row. The
 // toolbar's element (`role="toolbar"`, its name) is the caller's.
-export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onImage, onFullScreen, fullScreen = false, text = () => null }) {
+export function FormatButtons({ formats, state, readOnly, onFormat, onImage, onFullScreen, fullScreen = false, text = () => null }) {
     const apple = isApple();
     const compact = useCompact();
     const groups = SETS[formats].map((group) => group.filter((item) => compact || !item.touch)).filter((group) => group.length > 0);
@@ -83,10 +83,6 @@ export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onI
     };
     return (_jsxs(TooltipProvider, { delay: 400, children: [groups.map((group, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && _jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), group.map((item) => {
                         const index = items.indexOf(item);
-                        if (item.id === 'table')
-                            return (_jsx(RichTextTableMenu, { ref: (element) => {
-                                    buttons.current[index] = element;
-                                }, state: state, readOnly: readOnly, tabIndex: index === current ? 0 : -1, onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onInsert: () => onFormat('table'), onAction: (action) => onTable?.(action), text: text }, item.id));
                         if (item.id === 'highlight')
                             return (_jsx(RichTextHighlightMenu, { ref: (element) => {
                                     buttons.current[index] = element;
@@ -102,7 +98,9 @@ export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onI
                         if (item.action)
                             return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { ref: (element) => {
                                                 buttons.current[index] = element;
-                                            }, variant: "ghost", size: "icon-sm", "aria-label": item.label, disabled: readOnly, tabIndex: index === current ? 0 : -1, onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onClick: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
+                                            }, variant: "ghost", size: "icon-sm", "aria-label": item.label, 
+                                            // A table goes in only outside one.
+                                            disabled: readOnly || (item.id === 'table' && state !== null && formatOn(state, 'table')), tabIndex: index === current ? 0 : -1, onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onClick: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
                         return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Toggle, { ref: (element) => {
                                             buttons.current[index] = element;
                                         }, size: "icon-sm", "aria-label": item.label, "aria-keyshortcuts": item.keys ? ariaKeys(item.keys, apple) : undefined, pressed: state ? formatOn(state, item.id) : false, disabled: readOnly, tabIndex: index === current ? 0 : -1, className: "aria-pressed:bg-muted aria-pressed:text-foreground", 
@@ -114,6 +112,6 @@ export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onI
                                         buttons.current[fullScreenIndex] = element;
                                     }, size: "icon-sm", "aria-label": "Full screen", pressed: fullScreen, tabIndex: fullScreenIndex === current ? 0 : -1, className: "aria-pressed:bg-muted aria-pressed:text-foreground", onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(fullScreenIndex), onKeyDown: onKeyDown, onPressedChange: onFullScreen }), children: fullScreen ? _jsx(Minimize2Icon, {}) : _jsx(Maximize2Icon, {}) }), _jsx(TooltipContent, { children: fullScreen ? 'Leave full screen · Esc' : 'Full screen' })] })] }))] }));
 }
-export function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, onImage, onFullScreen, fullScreen, text, ref }) {
-    return (_jsx("div", { ref: ref, role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", children: _jsx(FormatButtons, { formats: "all", state: state, readOnly: readOnly, onFormat: onFormat, onTable: onTable, onImage: onImage, onFullScreen: onFullScreen, fullScreen: fullScreen, text: text }) }));
+export function RichTextToolbar({ state, readOnly, controls, onFormat, onImage, onFullScreen, fullScreen, text, ref }) {
+    return (_jsx("div", { ref: ref, role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", children: _jsx(FormatButtons, { formats: "all", state: state, readOnly: readOnly, onFormat: onFormat, onImage: onImage, onFullScreen: onFullScreen, fullScreen: fullScreen, text: text }) }));
 }

package/dist/components/app/rich-text-widgets.js

@@ -8,8 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //   the tab order.
 // - A table's bars add a column at its right and a row at its end, shown
 //   while the pointer is over the table or the caret is in it. Mouse
-//   shortcuts as well: Tab in the last cell adds a row, and the toolbar's
-//   Table menu does both.
+//   shortcuts as well: Tab in the last cell adds a row, and a cell's menu
+//   (its grips, or Shift+F10: rich-text-table-grips.tsx) does both.
 //
 // Each gives focus back to the text when it's done.
 import { PlusIcon } from 'lucide-react';

package/dist/components/app/widget-card.js

@@ -90,7 +90,7 @@ export function WidgetCard({ id, title, icon: Icon, headingLevel = 2, link, isLo
             return;
         toggle();
     };
-    return (_jsx("section", { id: id, "aria-labelledby": headingId, "data-slot": "widget-card", "data-state": state, "data-collapsed": collapsed || undefined, className: cn('min-w-0 self-start', className), children: _jsxs(Card, { className: "density-compact:[--card-spacing:--spacing(3)]", children: [_jsxs(CardHeader, { onClick: onHeaderClick, className: cn('flex items-center justify-between gap-3', inAccordion && 'cursor-pointer select-none'), children: [_jsxs(Heading, { id: headingId, className: "flex min-w-0 items-center gap-2 type-section-title text-foreground", children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: title })] }), (link || foldable || summaryShown) && (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [summaryShown && (_jsx("span", { id: summaryId, "data-slot": "widget-card-summary", className: "mr-2 flex items-center", children: _jsx(WidgetCardSummary, { state: state, summary: summary, emptySummary: emptySummary }) })), link?.href !== undefined ? (_jsxs("a", { href: link.href, target: "_blank", rel: "noreferrer", "aria-describedby": headingId, className: cn(HEADER_LINK_CLASS, 'inline-flex items-center gap-1'), children: [link.label, _jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] })) : (link && (_jsx(Link, { to: link.to, "aria-describedby": headingId, className: HEADER_LINK_CLASS, children: link.label }))), foldable && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-labelledby": headingId, "aria-describedby": summaryShown ? summaryId : undefined, "aria-expanded": !collapsed, "aria-controls": contentId, onClick: toggle, 
+    return (_jsx("section", { id: id, "aria-labelledby": headingId, "data-slot": "widget-card", "data-state": state, "data-collapsed": collapsed || undefined, className: cn('min-w-0 self-start', className), children: _jsxs(Card, { className: "glow-edge density-compact:[--card-spacing:--spacing(3)]", children: [_jsxs(CardHeader, { onClick: onHeaderClick, className: cn('flex items-center justify-between gap-3', inAccordion && 'cursor-pointer select-none'), children: [_jsxs(Heading, { id: headingId, className: "flex min-w-0 items-center gap-2 type-section-title text-foreground", children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: title })] }), (link || foldable || summaryShown) && (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [summaryShown && (_jsx("span", { id: summaryId, "data-slot": "widget-card-summary", className: "mr-2 flex items-center", children: _jsx(WidgetCardSummary, { state: state, summary: summary, emptySummary: emptySummary }) })), link?.href !== undefined ? (_jsxs("a", { href: link.href, target: "_blank", rel: "noreferrer", "aria-describedby": headingId, className: cn(HEADER_LINK_CLASS, 'inline-flex items-center gap-1'), children: [link.label, _jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] })) : (link && (_jsx(Link, { to: link.to, "aria-describedby": headingId, className: HEADER_LINK_CLASS, children: link.label }))), foldable && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-labelledby": headingId, "aria-describedby": summaryShown ? summaryId : undefined, "aria-expanded": !collapsed, "aria-controls": contentId, onClick: toggle, 
                                     // The button's own open look (a filled background) would
                                     // read as pressed: the chevron says it.
                                     className: "-my-1 -mr-1.5 aria-expanded:not-hover:bg-transparent", children: _jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn('transition-transform', collapsed && '-rotate-90') }) }))] }))] }), _jsx(CardContent, { id: contentId, hidden: collapsed, "aria-busy": state === 'loading' || undefined, children: error ? (_jsx(ErrorState, { error: error, onRetry: onRetry, size: "compact" })) : state === 'loading' ? (_jsx(WidgetListSkeleton, { rows: skeletonRows })) : state === 'empty' ? (_jsx("p", { "data-state": "empty", className: "py-2 type-body text-muted-foreground", children: emptyMessage })) : (children) })] }) }));
@@ -127,7 +127,7 @@ const ROW_CLASS = 'flex min-h-9 items-center gap-3 py-2 density-compact:min-h-8
 // Varied widths, so the skeleton reads as a list of titles, not a grid.
 const SKELETON_WIDTHS = ['w-3/5', 'w-2/5', 'w-1/2', 'w-2/3', 'w-1/3', 'w-3/5'];
 function WidgetListSkeleton({ rows }) {
-    return (_jsxs("div", { "data-state": "loading", className: "flex flex-col divide-y divide-border", children: [_jsx("span", { className: "sr-only", children: "Loading" }), Array.from({ length: rows }, (_, row) => (_jsxs("div", { className: ROW_CLASS, children: [_jsx(Skeleton, { className: cn('h-4', SKELETON_WIDTHS[row % SKELETON_WIDTHS.length]) }), _jsx(Skeleton, { className: "ml-auto h-4 w-12" })] }, row)))] }));
+    return (_jsxs("div", { "data-state": "loading", className: "flex flex-col divide-y divide-border", children: [_jsx("span", { className: "sr-only", children: "Loading" }), Array.from({ length: rows }, (_, row) => (_jsxs("div", { className: cn(ROW_CLASS, 'type-body'), children: [_jsx("span", { "aria-hidden": "true", className: "-mr-3 w-0 overflow-hidden", children: "\u00A0" }), _jsx(Skeleton, { className: cn('h-4', SKELETON_WIDTHS[row % SKELETON_WIDTHS.length]) }), _jsx(Skeleton, { className: "ml-auto h-4 w-12" })] }, row)))] }));
 }
 /** The rows of a WidgetCard: a list with a divider between rows. */
 export function WidgetList({ children, className }) {

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import { useRender } from "@base-ui/react/use-render";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "success" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "warning" | "info" | "outline-success" | "outline-warning" | "outline-info" | "outline-destructive" | "tinted-success" | "tinted-warning" | "tinted-info" | "tinted-destructive" | null | undefined;
+    variant?: "link" | "success" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "solid" | "warning" | "info" | "outline-success" | "outline-warning" | "outline-info" | "outline-destructive" | "tinted-success" | "tinted-warning" | "tinted-info" | "tinted-destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -5,7 +5,10 @@ import { cn } from "cn";
 const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+            // The default is a soft tint of the accent (the shared style
+            // guide's badge); `solid` is the old filled look.
+            default: "bg-primary/12 text-foreground dark:bg-primary/20 dark:text-link [a]:hover:bg-primary/20",
+            solid: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
             secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
             destructive: "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/90",
             success: "bg-success text-success-foreground focus-visible:ring-success/20 dark:focus-visible:ring-success/40 [a]:hover:bg-success/90",
@@ -30,7 +33,7 @@ const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-cent
             "tinted-info": "bg-info/15 text-info-text dark:bg-info/20",
             "tinted-destructive": "bg-destructive/15 text-destructive-text dark:bg-destructive/20",
             ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-            link: "text-primary underline-offset-4 hover:underline",
+            link: "text-link underline-offset-4 hover:underline",
         },
     },
     defaultVariants: {

package/dist/components/ui/button.js

@@ -2,25 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 import { cn } from "cn";
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 motion-safe:active:not-aria-[haspopup]:scale-96 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground hover:bg-primary/80",
+            default: "bg-primary text-primary-foreground hover:bg-primary/80 palette:hover:shadow-(--primary-glow) palette:focus-visible:shadow-(--primary-glow) palette:active:shadow-(--primary-glow)",
             outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
             secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
             ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
             destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-            link: "text-primary underline-offset-4 hover:underline",
+            link: "text-link underline-offset-4 hover:underline",
         },
         size: {
-            default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            default: "h-9 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
             xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-(length:--control-text-sm) in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-            lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-            icon: "size-8",
+            sm: "h-8 gap-1 rounded-[min(var(--radius-md),12px)] px-3 text-(length:--control-text-sm) in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-10 gap-1.5 px-5 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+            icon: "size-9",
             "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-            "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-            "icon-lg": "size-9",
+            "icon-sm": "size-8 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+            "icon-lg": "size-10",
         },
     },
     defaultVariants: {
@@ -29,6 +29,6 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
     },
 });
 function Button({ className, variant = "default", size = "default", ...props }) {
-    return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", "data-variant": variant, className: cn(buttonVariants({ variant, size, className })), ...props }));
 }
 export { Button, buttonVariants };

package/dist/components/ui/card.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "cn";
 function Card({ className, size = "default", ...props }) {
-    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
+    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-gap) overflow-hidden rounded-lg bg-card py-(--card-spacing) text-sm text-card-foreground shadow-(--card-shadow) ring-1 ring-border [--card-gap:--spacing(3.5)] [--card-spacing:--spacing(4)] has-[>[data-slot=card-header]:first-child]:pt-0 has-[>[data-slot=card-header]:last-child]:pb-0 data-[size=sm]:[--card-gap:--spacing(3)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg", className), ...props }));
 }
 function CardHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing) first:border-b first:border-border first:bg-card-header first:py-[calc(var(--card-spacing)*0.75)] last:border-b-0", className), ...props }));
 }
 function CardTitle({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-title", className: cn("font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className), ...props }));
@@ -20,6 +20,6 @@ function CardContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing)", className), ...props }));
 }
 function CardFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center border-t bg-muted/50 p-(--card-spacing)", className), ...props }));
 }
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/ui/checkbox.js

@@ -3,6 +3,6 @@ import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { cn } from "cn";
 import { CheckIcon } from "lucide-react";
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4.5 shrink-0 items-center justify-center rounded-[5px] border border-input transition-[color,background-color,border-color,box-shadow,transform] outline-none motion-safe:active:scale-85 group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
 }
 export { Checkbox };

package/dist/components/ui/combobox.js

@@ -44,7 +44,7 @@ function ComboboxSeparator({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
 }
 function ComboboxChips({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
+    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-9 flex-wrap items-center gap-1 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
 }
 function ComboboxChip({ className, children, showRemove = true, ...props }) {
     return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove

package/dist/components/ui/dialog.js

@@ -17,7 +17,7 @@ function DialogClose({ ...props }) {
     return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
+    return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm dark:bg-black/40 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
 }
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
     return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));

package/dist/components/ui/input-group.js

@@ -6,7 +6,7 @@ import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
 function InputGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className), ...props }));
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className), ...props }));
 }
 const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
     variants: {

package/dist/components/ui/input.js

@@ -3,6 +3,6 @@ import * as React from "react";
 import { Input as InputPrimitive } from "@base-ui/react/input";
 import { cn } from "cn";
 function Input({ className, type, ...props }) {
-    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }
 export { Input };