@crisp-ui-kit/crisp 0.31.3 → 0.31.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/accordion/accordion.js +1 -1
- package/dist/cjs/components/avatargroup/avatargroup.js +1 -1
- package/dist/cjs/components/barchart/barchart.js +1 -1
- package/dist/cjs/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/cjs/components/bulkbar/bulkbar.js +1 -1
- package/dist/cjs/components/callout/callout.js +1 -1
- package/dist/cjs/components/checkbox/checkbox.js +1 -1
- package/dist/cjs/components/columncalc/columncalc.js +2 -2
- package/dist/cjs/components/datatable/datatable.js +5 -5
- package/dist/cjs/components/datepickerfield/datepickerfield.js +1 -1
- package/dist/cjs/components/dialog/dialog.js +1 -1
- package/dist/cjs/components/donutchart/donutchart.js +1 -1
- package/dist/cjs/components/fileupload/fileupload.js +1 -1
- package/dist/cjs/components/formfield/formfield.js +1 -1
- package/dist/cjs/components/linechart/linechart.js +1 -1
- package/dist/cjs/components/menu/menu.js +1 -1
- package/dist/cjs/components/multiselect/multiselect.js +1 -1
- package/dist/cjs/components/radiogroup/radiogroup.js +1 -1
- package/dist/cjs/components/resizablepanel/resizablepanel.js +1 -1
- package/dist/cjs/components/segmented/segmented.js +1 -1
- package/dist/cjs/components/select/select.js +1 -1
- package/dist/cjs/components/stagebar/stagebar.js +1 -1
- package/dist/cjs/components/statcard/statcard.js +1 -1
- package/dist/cjs/components/switch/switch.js +1 -1
- package/dist/cjs/components/tabletoolbar/tabletoolbar.js +2 -2
- package/dist/cjs/components/tabs/tabs.js +2 -2
- package/dist/cjs/components/textarea/textarea.js +1 -1
- package/dist/cjs/components/tooltip/tooltip.js +1 -1
- package/dist/cjs/product/appshell/appshell.js +4 -4
- package/dist/cjs/product/authshell/authshell.js +1 -1
- package/dist/cjs/product/board/board.js +1 -1
- package/dist/cjs/product/command/command.js +1 -1
- package/dist/cjs/product/entitycard/entitycard.js +1 -1
- package/dist/cjs/product/flowcanvas/flowcanvas.js +1 -1
- package/dist/cjs/product/inbox/inbox.js +1 -1
- package/dist/cjs/product/listpage/listpage.js +1 -1
- package/dist/cjs/product/onboarding/onboarding.js +1 -1
- package/dist/cjs/product/recordpage/recordpage.js +7 -7
- package/dist/cjs/product/recordstable/recordstable.js +9 -9
- package/dist/cjs/product/richtext/richtext.js +1 -1
- package/dist/cjs/product/settingssection/settingssection.js +1 -1
- package/dist/cjs/product/settingsshell/settingsshell.js +1 -1
- package/dist/cjs/product/sidebar/sidebar.js +6 -6
- package/dist/cjs/product/tasklist/tasklist.js +1 -1
- package/dist/cjs/product/trialbanner/trialbanner.js +1 -1
- package/dist/cjs/product/viewtoggle/viewtoggle.js +1 -1
- package/dist/esm/components/accordion/accordion.js +1 -1
- package/dist/esm/components/avatargroup/avatargroup.js +1 -1
- package/dist/esm/components/barchart/barchart.js +1 -1
- package/dist/esm/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/esm/components/bulkbar/bulkbar.js +1 -1
- package/dist/esm/components/callout/callout.js +1 -1
- package/dist/esm/components/checkbox/checkbox.js +1 -1
- package/dist/esm/components/columncalc/columncalc.js +2 -2
- package/dist/esm/components/datatable/datatable.js +5 -5
- package/dist/esm/components/datepickerfield/datepickerfield.js +1 -1
- package/dist/esm/components/dialog/dialog.js +1 -1
- package/dist/esm/components/donutchart/donutchart.js +1 -1
- package/dist/esm/components/fileupload/fileupload.js +1 -1
- package/dist/esm/components/formfield/formfield.js +1 -1
- package/dist/esm/components/linechart/linechart.js +1 -1
- package/dist/esm/components/menu/menu.js +1 -1
- package/dist/esm/components/multiselect/multiselect.js +1 -1
- package/dist/esm/components/radiogroup/radiogroup.js +1 -1
- package/dist/esm/components/resizablepanel/resizablepanel.js +1 -1
- package/dist/esm/components/segmented/segmented.js +1 -1
- package/dist/esm/components/select/select.js +1 -1
- package/dist/esm/components/stagebar/stagebar.js +1 -1
- package/dist/esm/components/statcard/statcard.js +1 -1
- package/dist/esm/components/switch/switch.js +1 -1
- package/dist/esm/components/tabletoolbar/tabletoolbar.js +2 -2
- package/dist/esm/components/tabs/tabs.js +2 -2
- package/dist/esm/components/textarea/textarea.js +1 -1
- package/dist/esm/components/tooltip/tooltip.js +1 -1
- package/dist/esm/product/appshell/appshell.js +4 -4
- package/dist/esm/product/authshell/authshell.js +1 -1
- package/dist/esm/product/board/board.js +1 -1
- package/dist/esm/product/command/command.js +1 -1
- package/dist/esm/product/entitycard/entitycard.js +1 -1
- package/dist/esm/product/flowcanvas/flowcanvas.js +1 -1
- package/dist/esm/product/inbox/inbox.js +1 -1
- package/dist/esm/product/listpage/listpage.js +1 -1
- package/dist/esm/product/onboarding/onboarding.js +1 -1
- package/dist/esm/product/recordpage/recordpage.js +7 -7
- package/dist/esm/product/recordstable/recordstable.js +9 -9
- package/dist/esm/product/richtext/richtext.js +1 -1
- package/dist/esm/product/settingssection/settingssection.js +1 -1
- package/dist/esm/product/settingsshell/settingsshell.js +1 -1
- package/dist/esm/product/sidebar/sidebar.js +6 -6
- package/dist/esm/product/tasklist/tasklist.js +1 -1
- package/dist/esm/product/trialbanner/trialbanner.js +1 -1
- package/dist/esm/product/viewtoggle/viewtoggle.js +1 -1
- package/dist/types/components/avatargroup/avatargroup.d.ts +1 -1
- package/dist/types/components/barchart/barchart.d.ts +1 -1
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +1 -1
- package/dist/types/components/bulkbar/bulkbar.d.ts +1 -1
- package/dist/types/components/callout/callout.d.ts +1 -1
- package/dist/types/components/checkbox/checkbox.d.ts +1 -1
- package/dist/types/components/columncalc/columncalc.d.ts +5 -5
- package/dist/types/components/datatable/datatable.d.ts +5 -5
- package/dist/types/components/datepickerfield/datepickerfield.d.ts +1 -1
- package/dist/types/components/dialog/dialog.d.ts +1 -1
- package/dist/types/components/donutchart/donutchart.d.ts +1 -1
- package/dist/types/components/emptystate/emptystate.d.ts +1 -1
- package/dist/types/components/formfield/formfield.d.ts +1 -1
- package/dist/types/components/linechart/linechart.d.ts +1 -1
- package/dist/types/components/menu/menu.d.ts +1 -1
- package/dist/types/components/multiselect/multiselect.d.ts +1 -1
- package/dist/types/components/progress/progress.d.ts +1 -1
- package/dist/types/components/radiogroup/radiogroup.d.ts +1 -1
- package/dist/types/components/resizablepanel/resizablepanel.d.ts +4 -4
- package/dist/types/components/segmented/segmented.d.ts +1 -1
- package/dist/types/components/select/select.d.ts +2 -2
- package/dist/types/components/stagebar/stagebar.d.ts +1 -1
- package/dist/types/components/statcard/statcard.d.ts +1 -1
- package/dist/types/components/switch/switch.d.ts +1 -1
- package/dist/types/components/tabletoolbar/tabletoolbar.d.ts +1 -1
- package/dist/types/components/tabs/tabs.d.ts +2 -2
- package/dist/types/components/textarea/textarea.d.ts +1 -1
- package/dist/types/components/tooltip/tooltip.d.ts +1 -1
- package/dist/types/product/appshell/appshell.d.ts +2 -2
- package/dist/types/product/authshell/authshell.d.ts +1 -1
- package/dist/types/product/board/board.d.ts +1 -1
- package/dist/types/product/entitycard/entitycard.d.ts +1 -1
- package/dist/types/product/flowcanvas/flowcanvas.d.ts +1 -1
- package/dist/types/product/inbox/inbox.d.ts +1 -1
- package/dist/types/product/listpage/listpage.d.ts +1 -1
- package/dist/types/product/onboarding/onboarding.d.ts +1 -1
- package/dist/types/product/recordpage/recordpage.d.ts +2 -2
- package/dist/types/product/recordstable/recordstable.d.ts +10 -4
- package/dist/types/product/richtext/richtext.d.ts +1 -1
- package/dist/types/product/settingssection/settingssection.d.ts +1 -1
- package/dist/types/product/settingsshell/settingsshell.d.ts +1 -1
- package/dist/types/product/sidebar/sidebar.d.ts +10 -10
- package/dist/types/product/tasklist/tasklist.d.ts +1 -1
- package/dist/types/product/trialbanner/trialbanner.d.ts +1 -1
- package/dist/types/product/viewtoggle/viewtoggle.d.ts +1 -1
- package/package.json +1 -1
|
@@ -271,7 +271,7 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", label
|
|
|
271
271
|
}
|
|
272
272
|
// Always-interactive cell editors for the picker column types (status / date /
|
|
273
273
|
// reference). Each is a ghost crisp control that reads the cell value and
|
|
274
|
-
// commits the new one — matching
|
|
274
|
+
// commits the new one — matching measured inline field editors.
|
|
275
275
|
function StatusCell({ column, row, onChange, }) {
|
|
276
276
|
return (_jsx(Select, { variant: "ghost", "aria-label": column.label, placeholder: "\u2014", value: row[column.key] ?? undefined, onValueChange: onChange, options: column.options ?? [] }));
|
|
277
277
|
}
|
|
@@ -288,8 +288,8 @@ function TagsCell({ column, row, options, onChange, labels, }) {
|
|
|
288
288
|
/**
|
|
289
289
|
* A date-only cell is a CALENDAR DATE, not an instant. ECMA-262 parses the
|
|
290
290
|
* date-only ISO forms — `1998`, `1998-09`, `1998-09-04` — as UTC midnight, and
|
|
291
|
-
* the field then renders that instant in the reader's own timezone.
|
|
292
|
-
*
|
|
291
|
+
* the field then renders that instant in the reader's own timezone. A
|
|
292
|
+
* `founded: "1998"` field therefore read **Dec 31, 1997** for every reader west
|
|
293
293
|
* of UTC, at every hour of every day, and a date picked east of UTC
|
|
294
294
|
* round-tripped back a day short through `toISOString()` (#220).
|
|
295
295
|
*
|
|
@@ -318,7 +318,7 @@ function DateCell({ column, row, onChange, }) {
|
|
|
318
318
|
return (_jsx(DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, onChange: (d) => onChange(formatCellDate(d)) }));
|
|
319
319
|
}
|
|
320
320
|
/**
|
|
321
|
-
* The "New <object>" create modal — measured from
|
|
321
|
+
* The "New <object>" create modal — measured from a create-record dialog:
|
|
322
322
|
* a stacked label + "Set …" input per column, a "Create more" toggle, and a
|
|
323
323
|
* primary "Create record" action (⌘↵). Building the row mirrors the inline
|
|
324
324
|
* editor's per-type coercion so a created record reads back like an edited one.
|
|
@@ -378,7 +378,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
|
|
|
378
378
|
} })] }, col.key))) }), _jsxs(DialogFooter, { children: [_jsxs("span", { className: "dialog-more", children: [labels.createMore, _jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), _jsxs("button", { type: "button", className: "dialog-submit", onClick: submit, children: [labels.createRecord, _jsx("span", { className: "dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
|
|
379
379
|
}
|
|
380
380
|
/**
|
|
381
|
-
*
|
|
381
|
+
* A measured-style record grid — fully featured. Toolbar (search / sort status /
|
|
382
382
|
* count / New), sticky checkbox + entity columns, 36px rows, typed cells,
|
|
383
383
|
* click-to-sort headers, column resize by dragging a header edge, inline cell
|
|
384
384
|
* editing (double-click a text/number/url/date cell), add-row and add-column,
|
|
@@ -397,13 +397,13 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
|
|
|
397
397
|
// because a caller passing a stable array never triggers this.
|
|
398
398
|
React.useEffect(() => setCols(columnsProp), [columnsProp]);
|
|
399
399
|
React.useEffect(() => setData(rowsProp), [rowsProp]);
|
|
400
|
-
//
|
|
400
|
+
// Multi-criteria sort: an ordered list of {field, direction} rows.
|
|
401
401
|
const [sorts, setSorts] = React.useState([]);
|
|
402
402
|
const [dragSort, setDragSort] = React.useState(null);
|
|
403
403
|
const [editing, setEditing] = React.useState(null);
|
|
404
404
|
const [renamingCol, setRenamingCol] = React.useState(null);
|
|
405
405
|
const [creating, setCreating] = React.useState(false);
|
|
406
|
-
//
|
|
406
|
+
// A measured-style filter: an ordered list of conditions, each shown as a toolbar
|
|
407
407
|
// chip with an editable value (operator is "contains")
|
|
408
408
|
const [filterConds, setFilterConds] = React.useState([]);
|
|
409
409
|
const [filterQuery, setFilterQuery] = React.useState("");
|
|
@@ -694,7 +694,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
|
|
|
694
694
|
* `nearest` on both axes: a cell already in view is left exactly where it
|
|
695
695
|
* is, which is what makes this safe to run after a click too.
|
|
696
696
|
*
|
|
697
|
-
* No `behavior` of our own — the page's `scroll-behavior` decides, and
|
|
697
|
+
* No `behavior` of our own — the page's `scroll-behavior` decides, and it
|
|
698
698
|
* jumps rather than glides — except under reduced motion, where an explicit
|
|
699
699
|
* "auto" is the only thing that beats a host page that set
|
|
700
700
|
* `scroll-behavior: smooth` on the scroller (#208's rule: JS motion reads
|
|
@@ -983,7 +983,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
|
|
|
983
983
|
label: (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), t.descending] })),
|
|
984
984
|
keywords: t.descending,
|
|
985
985
|
},
|
|
986
|
-
], "aria-label": t.sortDirection }), _jsx("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "recordstable-sort-addrow", children: _jsxs("button", { type: "button", className: "recordstable-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), _jsx("div", { className: "recordstable-sort-foot", children: _jsxs("a", { className: "recordstable-sort-learn", href:
|
|
986
|
+
], "aria-label": t.sortDirection }), _jsx("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "recordstable-sort-addrow", children: _jsxs("button", { type: "button", className: "recordstable-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), _jsx("div", { className: "recordstable-sort-foot", children: t.learnSortingHref ? (_jsxs("a", { className: "recordstable-sort-learn", href: t.learnSortingHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) : (_jsxs("span", { className: "recordstable-sort-learn", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) })] }))] }), _jsxs("span", { className: "recordstable-toolgroup", children: [_jsxs("button", { type: "button", className: `recordstable-tool recordstable-tool--ghost${activeFilters ? " recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), t.filterCount(activeFilters)] }), openMenu === "filter" && (_jsxs("div", { className: "recordstable-menu", role: "dialog", "aria-label": t.addFilter, children: [_jsx("input", { className: "recordstable-menu-input", placeholder: t.filterByPlaceholder, "aria-label": t.filterByField,
|
|
987
987
|
// biome-ignore lint/a11y/noAutofocus: focus the picker on open
|
|
988
988
|
autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), cols
|
|
989
989
|
.filter((col) => col.label
|
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
import { richtextRecipe } from "./richtext.recipe.js";
|
|
5
5
|
const exec = (cmd, value) => document.execCommand(cmd, false, value);
|
|
6
6
|
/**
|
|
7
|
-
* A block rich-text editor — measured from
|
|
7
|
+
* A block rich-text editor — measured from a notes editor. A large title,
|
|
8
8
|
* a prose body (headings, lists, quote, marks, links), and a floating toolbar
|
|
9
9
|
* that appears over a text selection. Built on contentEditable, dependency-free.
|
|
10
10
|
* Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { settingssectionRecipe } from "./settingssection.recipe.js";
|
|
3
3
|
/**
|
|
4
|
-
* A settings section — measured from
|
|
4
|
+
* A settings section — measured from settings pages. A title + optional
|
|
5
5
|
* subtitle and trailing action, then a gapped stack of rows (pair with
|
|
6
6
|
* FormField). Compose several inside a settings content pane.
|
|
7
7
|
*/
|
|
@@ -3,7 +3,7 @@ import { ChevronLeft, Search } from "lucide-react";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { settingsshellRecipe } from "./settingsshell.recipe.js";
|
|
5
5
|
/**
|
|
6
|
-
* The Settings layout — measured
|
|
6
|
+
* The Settings layout — measured live. A left nav (back header,
|
|
7
7
|
* search, grouped items) beside a scrolling content pane. The search filters the
|
|
8
8
|
* nav by label. Fills the height its container gives it.
|
|
9
9
|
*/
|
|
@@ -28,13 +28,13 @@ const GlyphPeople = () => (_jsx(User, { size: 12, color: "white", strokeWidth: 1
|
|
|
28
28
|
const GlyphDeals = () => (_jsx(CircleDollarSign, { size: 12, color: "white", strokeWidth: 1.75, "aria-hidden": "true" }));
|
|
29
29
|
const GlyphUsers = () => (_jsx(Users, { size: 12, color: "white", strokeWidth: 1.75, "aria-hidden": "true" }));
|
|
30
30
|
const GlyphWorkspaces = () => (_jsx(LayoutGrid, { size: 12, color: "white", strokeWidth: 1.75, "aria-hidden": "true" }));
|
|
31
|
-
/** The measured
|
|
31
|
+
/** The measured workspace switcher — the default `workspace` prop. */
|
|
32
32
|
export const ATTIO_SIDEBAR_WORKSPACE = {
|
|
33
33
|
name: "techpartners",
|
|
34
34
|
avatarLabel: "T",
|
|
35
35
|
avatarTone: "cyan",
|
|
36
36
|
};
|
|
37
|
-
/** The measured
|
|
37
|
+
/** The measured main nav — the default `items` prop. */
|
|
38
38
|
export const ATTIO_SIDEBAR_ITEMS = [
|
|
39
39
|
{ label: "Home", icon: IconHome },
|
|
40
40
|
{
|
|
@@ -50,7 +50,7 @@ export const ATTIO_SIDEBAR_ITEMS = [
|
|
|
50
50
|
{ label: "Sequences", icon: IconSequences },
|
|
51
51
|
{ label: "Workflows", icon: IconWorkflows },
|
|
52
52
|
];
|
|
53
|
-
/** The measured
|
|
53
|
+
/** The measured Records section — the default `recordsSection` prop. */
|
|
54
54
|
export const ATTIO_SIDEBAR_RECORDS_SECTION = {
|
|
55
55
|
label: "Records",
|
|
56
56
|
items: [
|
|
@@ -61,17 +61,17 @@ export const ATTIO_SIDEBAR_RECORDS_SECTION = {
|
|
|
61
61
|
{ label: "Workspaces", tone: "purple", glyph: GlyphWorkspaces },
|
|
62
62
|
],
|
|
63
63
|
};
|
|
64
|
-
/** The measured
|
|
64
|
+
/** The measured Lists section — the default `listsSection` prop. */
|
|
65
65
|
export const ATTIO_SIDEBAR_LISTS_SECTION = {
|
|
66
66
|
label: "Lists",
|
|
67
67
|
newListLabel: "+ New list",
|
|
68
68
|
};
|
|
69
|
-
/** The measured
|
|
69
|
+
/** The measured Chats section — the default `chatsSection` prop. */
|
|
70
70
|
export const ATTIO_SIDEBAR_CHATS_SECTION = {
|
|
71
71
|
label: "Chats",
|
|
72
72
|
items: [{ label: "In-app notification for deal wins", icon: IconChat }],
|
|
73
73
|
};
|
|
74
|
-
/** The measured
|
|
74
|
+
/** The measured footer copy — the default `footer` prop. */
|
|
75
75
|
export const ATTIO_SIDEBAR_FOOTER = {
|
|
76
76
|
gettingStartedLabel: "Getting started 1/6",
|
|
77
77
|
inviteLabel: "Invite team members",
|
|
@@ -4,7 +4,7 @@ function Row({ task, onToggle, completeLabel, incompleteLabel, }) {
|
|
|
4
4
|
return (_jsxs("div", { className: "tasklist-row", "data-done": task.done ? "" : undefined, children: [_jsx("input", { type: "checkbox", className: "tasklist-check", checked: !!task.done, "aria-label": task.done ? incompleteLabel : completeLabel, onChange: () => onToggle?.(task.id, !task.done) }), _jsx("span", { className: "tasklist-title", children: task.title }), (task.due != null || task.meta != null) && (_jsxs("span", { className: "tasklist-meta", children: [task.due != null && (_jsx("span", { className: "tasklist-due", "data-overdue": task.overdue ? "" : undefined, children: task.due })), task.meta] }))] }));
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
|
-
* A task list — measured from
|
|
7
|
+
* A task list — measured from a tasks page. Optional group headers with a
|
|
8
8
|
* count, then rows of a round complete-checkbox + title + trailing meta.
|
|
9
9
|
* Completed rows strike through; overdue dates go red.
|
|
10
10
|
*/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { trialbannerRecipe } from "./trialbanner.recipe.js";
|
|
3
3
|
/**
|
|
4
|
-
* A compact trial / upgrade banner — measured from
|
|
4
|
+
* A compact trial / upgrade banner — measured from a sidebar footer.
|
|
5
5
|
* Icon + message + an optional small action pill (soft-glow outlined button).
|
|
6
6
|
*/
|
|
7
7
|
export function TrialBanner({ icon, children, action, onAction, tone = "neutral", className, ...rest }) {
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { viewtoggleRecipe } from "./viewtoggle.recipe.js";
|
|
4
4
|
/**
|
|
5
|
-
* A compact icon toggle — measured from
|
|
5
|
+
* A compact icon toggle — measured from a list/grid switch. A padded track
|
|
6
6
|
* of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
|
|
7
7
|
* grid) or any small mutually-exclusive icon choice.
|
|
8
8
|
*/
|
|
@@ -12,7 +12,7 @@ export type AvatarGroupProps = React.ComponentPropsWithoutRef<"div"> & {
|
|
|
12
12
|
};
|
|
13
13
|
/**
|
|
14
14
|
* A stack of overlapping avatars with an optional "+N" overflow chip — measured
|
|
15
|
-
* from
|
|
15
|
+
* from team / member rows. Pass `<Avatar>` children; each is ringed in
|
|
16
16
|
* the surface colour so it reads against its neighbour.
|
|
17
17
|
*/
|
|
18
18
|
export declare function AvatarGroup({ children, max, size, className, "aria-label": ariaLabel, ...rest }: AvatarGroupProps): React.JSX.Element;
|
|
@@ -23,7 +23,7 @@ export type BarChartProps = Omit<React.ComponentPropsWithoutRef<"div">, "color">
|
|
|
23
23
|
className?: string;
|
|
24
24
|
};
|
|
25
25
|
/**
|
|
26
|
-
* A responsive bar chart
|
|
26
|
+
* A responsive bar chart for dashboards. Pure CSS, so
|
|
27
27
|
* it scales with its container. Renders `role="img"` with an accessible summary.
|
|
28
28
|
*/
|
|
29
29
|
export declare function BarChart({ data, height, max, ticks, color, format, yAxisWidth, xAxisTitle, "aria-label": ariaLabel, className, ...rest }: BarChartProps): React.JSX.Element;
|
|
@@ -13,7 +13,7 @@ export type BreadcrumbProps = React.ComponentPropsWithoutRef<"nav"> & {
|
|
|
13
13
|
className?: string;
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
16
|
-
* A breadcrumb trail — measured from
|
|
16
|
+
* A breadcrumb trail — measured from a record-page nav. The last item is
|
|
17
17
|
* marked `aria-current="page"`; earlier items render as links or buttons.
|
|
18
18
|
*/
|
|
19
19
|
export declare function Breadcrumb({ items, separator, "aria-label": ariaLabel, className, ...rest }: BreadcrumbProps): React.JSX.Element;
|
|
@@ -23,7 +23,7 @@ export type BulkBarProps = Omit<React.ComponentPropsWithoutRef<"div">, "children
|
|
|
23
23
|
/**
|
|
24
24
|
* A floating bulk-action bar. Rises from the bottom-centre of its nearest
|
|
25
25
|
* positioned ancestor when a selection is active; render it conditionally
|
|
26
|
-
* (e.g. `count > 0 && <BulkBar …/>`). Measured from
|
|
26
|
+
* (e.g. `count > 0 && <BulkBar …/>`). Measured from a records table.
|
|
27
27
|
*/
|
|
28
28
|
export declare function BulkBar({ count, onClear, countLabel, countText, children, className, clearLabel, ...rest }: BulkBarProps): React.JSX.Element;
|
|
29
29
|
export declare namespace BulkBar {
|
|
@@ -11,7 +11,7 @@ export type CalloutProps = Omit<React.ComponentPropsWithoutRef<"div">, "title">
|
|
|
11
11
|
className?: string;
|
|
12
12
|
};
|
|
13
13
|
/**
|
|
14
|
-
* An inline callout / banner — measured from
|
|
14
|
+
* An inline callout / banner — measured from info notices. `tone` tints
|
|
15
15
|
* the background and icon; pass a `title` and/or body `children`.
|
|
16
16
|
*/
|
|
17
17
|
export declare function Callout({ tone, icon, title, children, action, className, ...rest }: CalloutProps): React.JSX.Element;
|
|
@@ -5,7 +5,7 @@ export type CheckboxProps = Omit<React.ComponentPropsWithoutRef<"input">, "type"
|
|
|
5
5
|
asChild?: boolean;
|
|
6
6
|
};
|
|
7
7
|
/**
|
|
8
|
-
* A native `<input type="checkbox">` styled to
|
|
8
|
+
* A native `<input type="checkbox">` styled to the measured grid checkbox (16px,
|
|
9
9
|
* r6, brand fill + white check). Native on purpose: keyboard, focus, and form
|
|
10
10
|
* semantics come for free. `indeterminate` is a DOM-only property, so it is
|
|
11
11
|
* applied via ref rather than an attribute.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
3
|
+
* A column footer calculation. Measured from the live app: clicking a
|
|
4
4
|
* summary cell opens an "Aggregations" menu — 180px wide — whose contents
|
|
5
5
|
* depend on the column's type.
|
|
6
6
|
*
|
|
@@ -14,9 +14,9 @@ import * as React from "react";
|
|
|
14
14
|
* Plugs into `DataTable`'s per-column `summary(rows)` slot.
|
|
15
15
|
*/
|
|
16
16
|
export type CalcOp = "none" | "countEmpty" | "countFilled" | "percentEmpty" | "percentFilled" | "sum" | "average" | "min" | "max";
|
|
17
|
-
/** The four
|
|
17
|
+
/** The four calcs offered on every column, in their order. */
|
|
18
18
|
export declare const UNIVERSAL_CALCS: CalcOp[];
|
|
19
|
-
/** The four
|
|
19
|
+
/** The four calcs added for numeric columns, in their order. */
|
|
20
20
|
export declare const NUMERIC_CALCS: CalcOp[];
|
|
21
21
|
export declare const CALC_LABEL: Record<CalcOp, string>;
|
|
22
22
|
/** A value counts as empty when it is null/undefined, "" or an empty array. */
|
|
@@ -31,7 +31,7 @@ export type ColumnCalcProps<T> = Omit<React.ComponentPropsWithoutRef<"span">, "v
|
|
|
31
31
|
rows: T[];
|
|
32
32
|
/** Reads this column's value out of a row. */
|
|
33
33
|
value: (row: T) => unknown;
|
|
34
|
-
/** Numeric columns get Sum/Average/Min/Max
|
|
34
|
+
/** Numeric columns get Sum/Average/Min/Max. */
|
|
35
35
|
numeric?: boolean;
|
|
36
36
|
defaultOp?: CalcOp;
|
|
37
37
|
/** Controlled operation. */
|
|
@@ -46,7 +46,7 @@ export type ColumnCalcProps<T> = Omit<React.ComponentPropsWithoutRef<"span">, "v
|
|
|
46
46
|
opLabels?: Partial<Record<CalcOp, string>>;
|
|
47
47
|
/** Format the result; defaults to a grouped number, percentages with a %. */
|
|
48
48
|
format?: (n: number, op: CalcOp) => string;
|
|
49
|
-
/** Match the column's alignment — numeric columns right-align
|
|
49
|
+
/** Match the column's alignment — numeric columns right-align. */
|
|
50
50
|
align?: "left" | "right";
|
|
51
51
|
className?: string;
|
|
52
52
|
};
|
|
@@ -10,7 +10,7 @@ export type EntityValue = {
|
|
|
10
10
|
export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "number" | "currency";
|
|
11
11
|
export type DataTableColumn<T> = {
|
|
12
12
|
key: string;
|
|
13
|
-
/** Truncates with an ellipsis
|
|
13
|
+
/** Truncates with an ellipsis when it's wider than the
|
|
14
14
|
* column. The full text stays in the DOM, so assistive tech and copy/paste
|
|
15
15
|
* get all of it; there is deliberately no `title` tooltip — see the recipe. */
|
|
16
16
|
header: React.ReactNode;
|
|
@@ -76,12 +76,12 @@ export type DataTableProps<T extends {
|
|
|
76
76
|
selectRowLabel?: (row: T) => string;
|
|
77
77
|
/** Controlled sort (omit for self-managed; seed with `defaultSort`). */
|
|
78
78
|
/**
|
|
79
|
-
* Active sort. Accepts a single sort or an ordered list —
|
|
79
|
+
* Active sort. Accepts a single sort or an ordered list — a table can sort by
|
|
80
80
|
* several columns at once ("Sorted by Last interaction +1"), applying each
|
|
81
81
|
* in turn and falling through to the next on a tie.
|
|
82
82
|
*/
|
|
83
83
|
/**
|
|
84
|
-
* Show
|
|
84
|
+
* Show the column header menu — Sort ascending/descending, Move
|
|
85
85
|
* left/right, Edit column label, Hide from view. Anything but sorting
|
|
86
86
|
* needs `onColumnsChange` (or leave it off and the table manages its own
|
|
87
87
|
* copy of the column list).
|
|
@@ -89,7 +89,7 @@ export type DataTableProps<T extends {
|
|
|
89
89
|
columnMenu?: boolean;
|
|
90
90
|
/** Called with the next column list after a move, rename or hide. */
|
|
91
91
|
onColumnsChange?: (columns: DataTableColumn<T>[]) => void;
|
|
92
|
-
/** Group rows under a heading row, the way
|
|
92
|
+
/** Group rows under a heading row, the way a grouped view does. */
|
|
93
93
|
groupBy?: (row: T) => string;
|
|
94
94
|
/**
|
|
95
95
|
* Enables drag-to-reorder rows (a leading grip column). Called with the
|
|
@@ -120,7 +120,7 @@ export type DataTableProps<T extends {
|
|
|
120
120
|
onEdit?: (id: string, key: string, value: string) => void;
|
|
121
121
|
/** Sticky the first column(s) with a horizontal scroll shadow (default true). */
|
|
122
122
|
stickyFirst?: boolean;
|
|
123
|
-
/** Tone for `entity`-type avatars: `"brand"` (uniform, matches
|
|
123
|
+
/** Tone for `entity`-type avatars: `"brand"` (uniform, matches the real
|
|
124
124
|
* records grid) or `"hashed"` (a stable colour per name — the tone `tags`/
|
|
125
125
|
* `status` pills already use, and entity's previous default). */
|
|
126
126
|
avatarTone?: "brand" | "hashed";
|
|
@@ -33,7 +33,7 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
|
|
|
33
33
|
className?: string;
|
|
34
34
|
};
|
|
35
35
|
/**
|
|
36
|
-
*
|
|
36
|
+
* A measured date field: a trigger showing the value, opening a calendar in a
|
|
37
37
|
* popover. This is what `DatePicker` used to be; `DatePicker` is now
|
|
38
38
|
* seed-design's bare calendar, and this composes it.
|
|
39
39
|
*/
|
|
@@ -26,7 +26,7 @@ export type DialogProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" |
|
|
|
26
26
|
};
|
|
27
27
|
/**
|
|
28
28
|
* A modal dialog — composes Zag's dialog machine (focus trap, scroll lock,
|
|
29
|
-
* Escape / outside-click dismissal) with the measured
|
|
29
|
+
* Escape / outside-click dismissal) with the measured modal surface.
|
|
30
30
|
* Compose the body with `DialogBody` and actions with `DialogFooter`.
|
|
31
31
|
*/
|
|
32
32
|
export declare function Dialog({ open, onOpenChange, title, icon, width, "aria-label": ariaLabel, closeLabel, children, className, style, "aria-describedby": describedBy, ...rest }: DialogProps): React.JSX.Element | null;
|
|
@@ -22,7 +22,7 @@ export type DonutChartProps = React.ComponentPropsWithoutRef<"div"> & {
|
|
|
22
22
|
className?: string;
|
|
23
23
|
};
|
|
24
24
|
/**
|
|
25
|
-
* A donut / ring chart — measured from
|
|
25
|
+
* A donut / ring chart — measured from a reports breakdown report. SVG
|
|
26
26
|
* ring using the r=15.915 (circumference 100) trick so slices are percentages;
|
|
27
27
|
* a centred total and an optional legend. `role="img"` with a summary.
|
|
28
28
|
*/
|
|
@@ -7,7 +7,7 @@ export type EmptyStateProps = Omit<React.ComponentPropsWithoutRef<"div">, "title
|
|
|
7
7
|
action?: React.ReactNode;
|
|
8
8
|
/**
|
|
9
9
|
* `illustrated` shows a large icon on a dotted-grid backdrop; `page` is
|
|
10
|
-
*
|
|
10
|
+
* the full-view empty state (ringed circle icon + 20px heading).
|
|
11
11
|
*/
|
|
12
12
|
variant?: "default" | "illustrated" | "page";
|
|
13
13
|
className?: string;
|
|
@@ -19,7 +19,7 @@ export type FormFieldProps = React.ComponentPropsWithoutRef<"div"> & {
|
|
|
19
19
|
className?: string;
|
|
20
20
|
};
|
|
21
21
|
/**
|
|
22
|
-
* A labelled form field — measured from
|
|
22
|
+
* A labelled form field — measured from settings forms. A muted label
|
|
23
23
|
* above any control, with an optional description or error line below. When
|
|
24
24
|
* `error` is set it replaces the description; the control is given
|
|
25
25
|
* `aria-describedby`, plus `aria-invalid` and `aria-required` as they apply.
|
|
@@ -27,7 +27,7 @@ export type LineChartProps = Omit<React.ComponentPropsWithoutRef<"div">, "color"
|
|
|
27
27
|
className?: string;
|
|
28
28
|
};
|
|
29
29
|
/**
|
|
30
|
-
* A responsive line chart — measured from
|
|
30
|
+
* A responsive line chart — measured from a reports historical chart.
|
|
31
31
|
* A stretched SVG line/area (non-scaling stroke keeps it crisp) over dashed
|
|
32
32
|
* gridlines; dots are HTML so they stay round. `role="img"` with a summary.
|
|
33
33
|
*/
|
|
@@ -16,7 +16,7 @@ export type MenuProps = {
|
|
|
16
16
|
"aria-label"?: string;
|
|
17
17
|
};
|
|
18
18
|
/**
|
|
19
|
-
* A dropdown menu — the ⋯ / sort / filter menu surface, on
|
|
19
|
+
* A dropdown menu — the ⋯ / sort / filter menu surface, on a measured
|
|
20
20
|
* popover. Give it a `trigger` element and Menu items as children. Opens on
|
|
21
21
|
* click / ↓ / Enter; roving-focus keyboard model (↑/↓ move, Home/End jump,
|
|
22
22
|
* typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
|
|
@@ -41,7 +41,7 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
|
|
|
41
41
|
"aria-label"?: string;
|
|
42
42
|
};
|
|
43
43
|
/**
|
|
44
|
-
* A multi-select / tag editor — measured from
|
|
44
|
+
* A multi-select / tag editor — measured from a cell tag picker. The
|
|
45
45
|
* outlined trigger shows the selected values as coloured chips; it opens a
|
|
46
46
|
* popover with a search field over rows of "[chip] … [checkbox]" that toggle on
|
|
47
47
|
* click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
|
|
@@ -3,7 +3,7 @@ export type ProgressProps = React.ComponentPropsWithoutRef<"div"> & {
|
|
|
3
3
|
value: number;
|
|
4
4
|
/** Maximum value (default 100). */
|
|
5
5
|
max?: number;
|
|
6
|
-
/** Render as N discrete segments (
|
|
6
|
+
/** Render as N discrete segments (a step bar) instead of a continuous fill. */
|
|
7
7
|
segments?: number;
|
|
8
8
|
"aria-label"?: string;
|
|
9
9
|
className?: string;
|
|
@@ -28,7 +28,7 @@ export type RadioGroupProps = Omit<React.ComponentPropsWithoutRef<"div">, "value
|
|
|
28
28
|
children: React.ReactNode;
|
|
29
29
|
};
|
|
30
30
|
/**
|
|
31
|
-
* A radio group — measured from
|
|
31
|
+
* A radio group — measured from a settings page. `default` renders rows (a ring
|
|
32
32
|
* that fills brand when selected + a label); `card` renders a row of bordered
|
|
33
33
|
* preview cards whose border turns brand when picked (the Theme picker). Arrow
|
|
34
34
|
* keys move between options (roving focus). Controlled or uncontrolled.
|
|
@@ -39,7 +39,7 @@ export type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "c
|
|
|
39
39
|
min?: number;
|
|
40
40
|
/**
|
|
41
41
|
* `max-width` — a px number, or a raw CSS expression for callers that need
|
|
42
|
-
*
|
|
42
|
+
* a real clamp, e.g. `max="min(60%, 100% - 350px)"`. Constraints are
|
|
43
43
|
* never re-applied in JS: the handler writes the unclamped drag width, and
|
|
44
44
|
* the browser's own `min-width`/`max-width` resolve the rendered size.
|
|
45
45
|
*/
|
|
@@ -53,8 +53,8 @@ export type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "c
|
|
|
53
53
|
/** Resize-handle geometry — "panel" (default) or "column" (table edges). */
|
|
54
54
|
handleVariant?: ResizablePanelHandleVariant;
|
|
55
55
|
/**
|
|
56
|
-
* Persist width as a percentage of the container under this key (
|
|
57
|
-
*
|
|
56
|
+
* Persist width as a percentage of the container under this key (a `%`,
|
|
57
|
+
* not px, so the panel keeps its proportion on resize).
|
|
58
58
|
* Only applies when `size` is uncontrolled.
|
|
59
59
|
*/
|
|
60
60
|
storageKey?: string;
|
|
@@ -62,7 +62,7 @@ export type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "c
|
|
|
62
62
|
children?: React.ReactNode;
|
|
63
63
|
};
|
|
64
64
|
/**
|
|
65
|
-
*
|
|
65
|
+
* An adjustable-panel primitive: a spacer that reserves layout width
|
|
66
66
|
* plus a panel that overlays it, so the panel can move between docked
|
|
67
67
|
* (in-flow) and floating (`position: fixed`, an overlay) without a reflow
|
|
68
68
|
* glitch. Drag the edge handle to resize; constraints are CSS `min-width`/
|
|
@@ -17,7 +17,7 @@ export type SegmentedProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaul
|
|
|
17
17
|
className?: string;
|
|
18
18
|
};
|
|
19
19
|
/**
|
|
20
|
-
* A segmented control (single-choice toggle) — measured from
|
|
20
|
+
* A segmented control (single-choice toggle) — measured from a view
|
|
21
21
|
* switcher. `role="radiogroup"` over `role="radio"` buttons with roving
|
|
22
22
|
* tabindex and ←/→ (Home/End) keyboard selection.
|
|
23
23
|
*/
|
|
@@ -4,7 +4,7 @@ export type SelectOption = {
|
|
|
4
4
|
label: React.ReactNode;
|
|
5
5
|
/** Text used for filtering when `searchable` (falls back to a string label). */
|
|
6
6
|
keywords?: string;
|
|
7
|
-
/** A status colour dot shown before the label (
|
|
7
|
+
/** A status colour dot shown before the label (status/select fields). */
|
|
8
8
|
color?: string;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
};
|
|
@@ -47,7 +47,7 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
|
|
|
47
47
|
id?: string;
|
|
48
48
|
};
|
|
49
49
|
/**
|
|
50
|
-
* A select / dropdown — the settings control, measured
|
|
50
|
+
* A select / dropdown — the settings control, measured live, with an
|
|
51
51
|
* optional Linear-style search. A `role="combobox"` trigger opens a
|
|
52
52
|
* `role="listbox"`; pass `searchable` to add a filter field at the top (with a
|
|
53
53
|
* "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
|
|
@@ -11,7 +11,7 @@ export type StageBarProps = React.ComponentPropsWithoutRef<"div"> & {
|
|
|
11
11
|
className?: string;
|
|
12
12
|
};
|
|
13
13
|
/**
|
|
14
|
-
* A pipeline stage bar — measured from
|
|
14
|
+
* A pipeline stage bar — measured from a deal-stage highlight. Each stage
|
|
15
15
|
* is a segment tinted with its colour; the current stage is at full strength.
|
|
16
16
|
*/
|
|
17
17
|
export declare function StageBar({ stages, current, "aria-label": ariaLabel, className, ...rest }: StageBarProps): import("react").JSX.Element;
|
|
@@ -20,7 +20,7 @@ export type StatCardProps = React.ComponentPropsWithoutRef<"div"> & {
|
|
|
20
20
|
className?: string;
|
|
21
21
|
};
|
|
22
22
|
/**
|
|
23
|
-
* A single-metric KPI tile — measured from
|
|
23
|
+
* A single-metric KPI tile — measured from a reports number/insight card.
|
|
24
24
|
* Label, a large value, and an optional up/down delta pill with a caption.
|
|
25
25
|
*/
|
|
26
26
|
export declare function StatCard({ label, icon, value, delta, deltaSuffix, caption, card, className, ...rest }: StatCardProps): React.JSX.Element;
|
|
@@ -25,7 +25,7 @@ export type SwitchProps = Omit<React.ComponentPropsWithoutRef<"button">, "onChan
|
|
|
25
25
|
required?: boolean;
|
|
26
26
|
};
|
|
27
27
|
/**
|
|
28
|
-
* An on/off toggle — the settings switch, measured
|
|
28
|
+
* An on/off toggle — the settings switch, measured live. Renders a
|
|
29
29
|
* `role="switch"` button (a native checkbox's semantics without its box), so
|
|
30
30
|
* label association and keyboard (Space/Enter) come for free. Controlled via
|
|
31
31
|
* `checked`/`onCheckedChange`, or uncontrolled from `defaultChecked`.
|
|
@@ -86,7 +86,7 @@ export declare function applyFilters<T>(rows: T[], filters: ToolbarFilter[], get
|
|
|
86
86
|
*/
|
|
87
87
|
export declare function applySorts<T>(rows: T[], sorts: ToolbarSort[], get?: (row: T, key: string) => unknown): T[];
|
|
88
88
|
/**
|
|
89
|
-
*
|
|
89
|
+
* The table toolbar as a standalone primitive: the Sort and Filter
|
|
90
90
|
* controls, their menus, the sort-condition rows and the filter chips.
|
|
91
91
|
*
|
|
92
92
|
* `RecordsTable` renders this same measured chrome internally; this is the
|
|
@@ -23,8 +23,8 @@ export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "d
|
|
|
23
23
|
};
|
|
24
24
|
/**
|
|
25
25
|
* A row of text tabs over a sliding ink underline — the record-view tab bar,
|
|
26
|
-
* measured
|
|
27
|
-
* Home/End jump); activation follows focus
|
|
26
|
+
* measured live. Roving-tabindex keyboard model (←/→ move + activate,
|
|
27
|
+
* Home/End jump); activation follows focus. Controlled via
|
|
28
28
|
* `value`/`onValueChange`, or uncontrolled from `defaultValue`.
|
|
29
29
|
*/
|
|
30
30
|
export declare function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, ...rest }: TabsProps): React.JSX.Element;
|
|
@@ -6,7 +6,7 @@ export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> & {
|
|
|
6
6
|
wrapperClassName?: string;
|
|
7
7
|
};
|
|
8
8
|
/**
|
|
9
|
-
* A multiline text field — measured from
|
|
9
|
+
* A multiline text field — measured from settings. Forwards every native
|
|
10
10
|
* `<textarea>` prop; pass `showCount` with `maxLength` to render a live
|
|
11
11
|
* character counter (which turns red if the value exceeds the limit).
|
|
12
12
|
*/
|
|
@@ -22,7 +22,7 @@ export type TooltipProps = {
|
|
|
22
22
|
onOpenChange?: (open: boolean) => void;
|
|
23
23
|
};
|
|
24
24
|
/**
|
|
25
|
-
* A hover/focus tooltip — a dark hint chip measured
|
|
25
|
+
* A hover/focus tooltip — a dark hint chip measured live. Wraps its
|
|
26
26
|
* trigger in an inline element, shows after `delay` on pointer-enter / focus,
|
|
27
27
|
* and hides on leave / blur / Escape. The bubble is portaled and positioned
|
|
28
28
|
* above the trigger (flipping below near the top edge).
|
|
@@ -27,8 +27,8 @@ export type AppShellProps = Omit<React.ComponentPropsWithoutRef<"div">, "childre
|
|
|
27
27
|
className?: string;
|
|
28
28
|
};
|
|
29
29
|
/**
|
|
30
|
-
* App-shell layout with a collapsible + resizable sidebar, mirroring
|
|
31
|
-
* window: drag the sidebar's right edge to resize, press the sidebar's
|
|
30
|
+
* App-shell layout with a collapsible + resizable sidebar, mirroring a live
|
|
31
|
+
* app's window: drag the sidebar's right edge to resize, press the sidebar's
|
|
32
32
|
* collapse button to slide it away (a floating button brings it back). The
|
|
33
33
|
* sidebar pane clips rather than squishing, so its content never reflows.
|
|
34
34
|
*/
|
|
@@ -15,7 +15,7 @@ export type AuthShellProps = Omit<React.ComponentPropsWithoutRef<"div">, "title"
|
|
|
15
15
|
className?: string;
|
|
16
16
|
};
|
|
17
17
|
/**
|
|
18
|
-
* The
|
|
18
|
+
* The welcome/auth layout — measured live.
|
|
19
19
|
* A centered page frame: an optional top progress bar, a logo, a two-pane
|
|
20
20
|
* card (the form + an optional product preview, hidden under 1200px), and
|
|
21
21
|
* a footer. Auth-surface Input/FormField/Button treatment (flatter fields,
|
|
@@ -32,7 +32,7 @@ export type BoardProps<T extends BoardCard> = Omit<React.ComponentPropsWithoutRe
|
|
|
32
32
|
* A kanban board with native drag-and-drop between columns. Cards are
|
|
33
33
|
* `draggable`; dropping one on a column reparents it via `onCardsChange`
|
|
34
34
|
* (the parent owns the cards, so the move is a controlled state update).
|
|
35
|
-
* Measured from
|
|
35
|
+
* Measured from a deals pipeline.
|
|
36
36
|
*/
|
|
37
37
|
export declare function Board<T extends BoardCard>({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel, getCardLabel, announceMove, className, ...rest }: BoardProps<T>): React.JSX.Element;
|
|
38
38
|
export declare namespace Board {
|
|
@@ -14,7 +14,7 @@ export type EntityCardProps = Omit<React.ComponentPropsWithoutRef<"button">, "ch
|
|
|
14
14
|
className?: string;
|
|
15
15
|
};
|
|
16
16
|
/**
|
|
17
|
-
* A note / entity card — measured from
|
|
17
|
+
* A note / entity card — measured from a notes grid. A bordered white
|
|
18
18
|
* card with an author row, a title, a clamped excerpt, and a footer row with a
|
|
19
19
|
* right-aligned date. Rendered as a button so the whole card is clickable.
|
|
20
20
|
*/
|