cortena-ui 0.1.0 → 1.0.0
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/index.d.ts +2004 -4
- package/dist/index.js +5949 -2
- package/dist/index.js.map +1 -1
- package/package.json +41 -5
- package/src/components/accordion.tsx +86 -0
- package/src/components/alert.tsx +81 -0
- package/src/components/avatar.tsx +53 -0
- package/src/components/badge.tsx +51 -0
- package/src/components/calendar.tsx +193 -0
- package/src/components/card.tsx +85 -0
- package/src/components/chart/chart.tsx +193 -0
- package/src/components/chart/container.tsx +324 -0
- package/src/components/chart/data.ts +101 -0
- package/src/components/chart/index.tsx +84 -0
- package/src/components/chart/nivo-charts.tsx +227 -0
- package/src/components/chart/nivo-theme.ts +136 -0
- package/src/components/chart/recharts-charts.tsx +232 -0
- package/src/components/chart/tokens.ts +210 -0
- package/src/components/chart/types.ts +142 -0
- package/src/components/checkbox.tsx +49 -0
- package/src/components/chip.tsx +49 -0
- package/src/components/combobox.tsx +405 -0
- package/src/components/command.tsx +225 -0
- package/src/components/data-table/data-table.tsx +731 -0
- package/src/components/data-table/export.ts +121 -0
- package/src/components/data-table/features.ts +123 -0
- package/src/components/data-table/index.tsx +45 -0
- package/src/components/data-table/parts.tsx +568 -0
- package/src/components/data-table/system-columns.tsx +91 -0
- package/src/components/data-table/types.ts +182 -0
- package/src/components/data-table/use-data-table.ts +224 -0
- package/src/components/data-table/use-server-source.ts +232 -0
- package/src/components/date-field.tsx +327 -0
- package/src/components/date-picker.tsx +230 -0
- package/src/components/dialog.tsx +146 -0
- package/src/components/dropdown-menu.tsx +314 -0
- package/src/components/dropzone.tsx +260 -0
- package/src/components/empty-state.tsx +91 -0
- package/src/components/error-banner.tsx +65 -0
- package/src/components/field.tsx +250 -0
- package/src/components/form.tsx +212 -0
- package/src/components/input.tsx +32 -0
- package/src/components/kbd.tsx +26 -0
- package/src/components/label.tsx +26 -0
- package/src/components/loading-skeleton.tsx +153 -0
- package/src/components/markdown.tsx +377 -0
- package/src/components/page-header.tsx +99 -0
- package/src/components/popover.tsx +133 -0
- package/src/components/progress.tsx +83 -0
- package/src/components/radio-group.tsx +48 -0
- package/src/components/scroll-area.tsx +74 -0
- package/src/components/section-card.tsx +75 -0
- package/src/components/segmented.tsx +81 -0
- package/src/components/select.tsx +222 -0
- package/src/components/separator.tsx +41 -0
- package/src/components/sheet.tsx +161 -0
- package/src/components/skeleton.tsx +22 -0
- package/src/components/sortable-list.tsx +275 -0
- package/src/components/spinner.tsx +32 -0
- package/src/components/status-dot.tsx +78 -0
- package/src/components/switch.tsx +48 -0
- package/src/components/tabs.tsx +109 -0
- package/src/components/textarea.tsx +75 -0
- package/src/components/toast.tsx +150 -0
- package/src/components/toolbar.tsx +63 -0
- package/src/components/tooltip.tsx +103 -0
- package/src/hooks/use-cortena-theme.ts +268 -0
- package/src/index.ts +91 -3
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,39 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { ClassValue } from "clsx";
|
|
3
|
+
import * as React$1 from "react";
|
|
4
|
+
import { ReactNode } from "react";
|
|
5
|
+
import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ComposedChart, Funnel, FunnelChart, LabelList, Legend as RechartsLegend, LegendPayload, LegendProps, Line, LineChart, Pie, PieChart, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, ReferenceLine, ResponsiveContainer, Scatter, ScatterChart, Tooltip as RechartsTooltip, TooltipContentProps as TooltipContentProps$1, TooltipProps, XAxis, YAxis } from "recharts";
|
|
3
6
|
import { Button as Button$1 } from "@base-ui/react/button";
|
|
4
7
|
import { VariantProps } from "class-variance-authority";
|
|
5
|
-
import
|
|
8
|
+
import { Menu } from "@base-ui/react/menu";
|
|
9
|
+
import { Select as Select$1 } from "@base-ui/react/select";
|
|
10
|
+
import { Cell as Cell$2, Column, ColumnDef, ColumnHelper, ReactTable, Row, RowData, TableState } from "@tanstack/react-table";
|
|
11
|
+
import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
|
|
12
|
+
import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
|
|
13
|
+
import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
|
|
14
|
+
import { DateRange, DayButtonProps, DayPickerProps } from "react-day-picker";
|
|
15
|
+
import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
|
|
16
|
+
import { Command as Command$1 } from "cmdk";
|
|
17
|
+
import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
|
|
18
|
+
import { Popover as Popover$1 } from "@base-ui/react/popover";
|
|
19
|
+
import { Accept, DropzoneState, FileRejection } from "react-dropzone";
|
|
20
|
+
import { Field as Field$1 } from "@base-ui/react/field";
|
|
21
|
+
import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
|
|
22
|
+
import { ControllerProps, FieldError as FieldError$1, FieldPath, FieldValues, SubmitHandler, UseFormReturn, useForm } from "react-hook-form";
|
|
23
|
+
import { zodResolver } from "@hookform/resolvers/zod";
|
|
24
|
+
import { Components, Options } from "react-markdown";
|
|
25
|
+
import { Options as Options$1 } from "rehype-sanitize";
|
|
26
|
+
import { Progress as Progress$1 } from "@base-ui/react/progress";
|
|
27
|
+
import { Radio } from "@base-ui/react/radio";
|
|
28
|
+
import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
|
|
29
|
+
import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
|
|
30
|
+
import { Separator as Separator$1 } from "@base-ui/react/separator";
|
|
31
|
+
import { DraggableAttributes, UniqueIdentifier } from "@dnd-kit/core";
|
|
32
|
+
import { arrayMove } from "@dnd-kit/sortable";
|
|
33
|
+
import { Switch as Switch$1 } from "@base-ui/react/switch";
|
|
34
|
+
import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
|
|
35
|
+
import { Toast as Toast$1 } from "@base-ui/react/toast";
|
|
36
|
+
import { Tooltip as Tooltip$2 } from "@base-ui/react/tooltip";
|
|
6
37
|
//#region src/lib/cn.d.ts
|
|
7
38
|
/**
|
|
8
39
|
* Merge class names the shadcn way: clsx for conditionals, tailwind-merge so a
|
|
@@ -10,6 +41,865 @@ import * as React from "react";
|
|
|
10
41
|
*/
|
|
11
42
|
export declare function cn(...inputs: ClassValue[]): string;
|
|
12
43
|
//#endregion
|
|
44
|
+
//#region src/components/chart/types.d.ts
|
|
45
|
+
/**
|
|
46
|
+
* Chart types and the data shape each one expects.
|
|
47
|
+
*
|
|
48
|
+
* Engine per type (see cortena-docs/cortenaUI&Design/03-charting.md):
|
|
49
|
+
*
|
|
50
|
+
* | type | engine |
|
|
51
|
+
* | -------------------------------------------------------- | ------------------------- |
|
|
52
|
+
* | bar, line, area, pie, donut, scatter, radar, funnel | Recharts (static import) |
|
|
53
|
+
* | heatmap, calendar, treemap, sunburst | Nivo (lazy, per package) |
|
|
54
|
+
*
|
|
55
|
+
* Data shapes (the webchat renderer's legacy shapes are all accepted):
|
|
56
|
+
*
|
|
57
|
+
* - **bar**, **radar**: `ChartRow[]` — one object per category with a string
|
|
58
|
+
* category key (`indexBy`, inferred as the first string field) and one
|
|
59
|
+
* numeric field per series (`keys`, inferred as every numeric field).
|
|
60
|
+
* `[{ month: "Jan", revenue: 12, cost: 8 }, …]`. The series shape below is
|
|
61
|
+
* also accepted and pivoted.
|
|
62
|
+
* - **line**, **area**: `ChartSeries[]` — `[{ id: "revenue", data: [{ x, y }] }]`
|
|
63
|
+
* (the Nivo line shape the webchat emits). `ChartRow[]` is also accepted.
|
|
64
|
+
* - **pie**, **donut**, **funnel**: `ChartSlice[]` — `[{ id, label?, value }]`.
|
|
65
|
+
* - **scatter** (alias `scatterplot`): `ChartSeries[]` — one series per group.
|
|
66
|
+
* - **heatmap**: `ChartSeries[]` — Nivo heatmap shape, `[{ id: row, data: [{ x: column, y: value }] }]`.
|
|
67
|
+
* - **calendar**: `ChartDay[]` — `[{ day: "2026-01-31", value }]`; `from`/`to`
|
|
68
|
+
* default to the data's range.
|
|
69
|
+
* - **treemap**, **sunburst**: `ChartTree` — Nivo tree, `{ id, children?: [...], value? }`
|
|
70
|
+
* (`name` is accepted in place of `id`).
|
|
71
|
+
*/
|
|
72
|
+
type ChartType = "bar" | "line" | "area" | "pie" | "donut" | "scatter" | "scatterplot" | "radar" | "funnel" | "heatmap" | "calendar" | "treemap" | "sunburst";
|
|
73
|
+
/** The engine that draws a given type. */
|
|
74
|
+
type ChartEngine = "recharts" | "nivo";
|
|
75
|
+
/** Nivo renderer; only the Nivo types honour it (Recharts is SVG only). */
|
|
76
|
+
type ChartRenderer = "svg" | "canvas";
|
|
77
|
+
/** One category with a numeric value per series. */
|
|
78
|
+
type ChartRow = Record<string, string | number | null | undefined>;
|
|
79
|
+
/** One series of points; x may be a category or a number, y a number. */
|
|
80
|
+
interface ChartPoint {
|
|
81
|
+
x: string | number;
|
|
82
|
+
y: number | null;
|
|
83
|
+
}
|
|
84
|
+
interface ChartSeries {
|
|
85
|
+
id: string | number;
|
|
86
|
+
data: ChartPoint[];
|
|
87
|
+
}
|
|
88
|
+
/** One slice of a pie, donut or funnel. */
|
|
89
|
+
interface ChartSlice {
|
|
90
|
+
id: string | number;
|
|
91
|
+
label?: string;
|
|
92
|
+
value: number;
|
|
93
|
+
}
|
|
94
|
+
/** One day of a calendar heatmap. */
|
|
95
|
+
interface ChartDay {
|
|
96
|
+
day: string;
|
|
97
|
+
value: number;
|
|
98
|
+
}
|
|
99
|
+
/** A Nivo tree node for treemap and sunburst. */
|
|
100
|
+
interface ChartTree {
|
|
101
|
+
id?: string | number;
|
|
102
|
+
name?: string;
|
|
103
|
+
value?: number;
|
|
104
|
+
children?: ChartTree[];
|
|
105
|
+
[key: string]: unknown;
|
|
106
|
+
}
|
|
107
|
+
/** The data type accepted for each chart type. */
|
|
108
|
+
type ChartDataFor<T extends ChartType> = T extends "bar" | "radar" ? ChartRow[] | ChartSeries[] : T extends "line" | "area" ? ChartSeries[] | ChartRow[] : T extends "pie" | "donut" | "funnel" ? ChartSlice[] : T extends "scatter" | "scatterplot" | "heatmap" ? ChartSeries[] : T extends "calendar" ? ChartDay[] : T extends "treemap" | "sunburst" ? ChartTree : never;
|
|
109
|
+
/**
|
|
110
|
+
* Per-series presentation, keyed by series id (the `keys` of a row chart, the
|
|
111
|
+
* `id` of a series or slice). Colours default to `var(--ds-viz-1..n)` in key
|
|
112
|
+
* order, so the same category index gets the same colour in every app; set
|
|
113
|
+
* `color` only to pin a category to a semantic colour, and then only to a
|
|
114
|
+
* token (`var(--ds-success)`), never a literal.
|
|
115
|
+
*/
|
|
116
|
+
type ChartConfig = Record<string, {
|
|
117
|
+
label?: React$1.ReactNode;
|
|
118
|
+
icon?: React$1.ComponentType;
|
|
119
|
+
color?: string;
|
|
120
|
+
}>;
|
|
121
|
+
/** Which continuous scale a heatmap or calendar uses. */
|
|
122
|
+
type ChartScale = "sequential" | "diverging";
|
|
123
|
+
export declare const RECHARTS_TYPES: ReadonlySet<ChartType>;
|
|
124
|
+
export declare const NIVO_TYPES: ReadonlySet<ChartType>;
|
|
125
|
+
/** The engine the package uses for a chart type. */
|
|
126
|
+
export declare function chartEngine(type: ChartType): ChartEngine;
|
|
127
|
+
//#endregion
|
|
128
|
+
//#region src/components/chart/container.d.ts
|
|
129
|
+
interface ChartContextValue {
|
|
130
|
+
config: ChartConfig;
|
|
131
|
+
/** The container element, so token resolution can honour a nested theme scope. */
|
|
132
|
+
element: HTMLDivElement | null;
|
|
133
|
+
}
|
|
134
|
+
/** The nearest ChartContainer's config and element; null outside one. */
|
|
135
|
+
export declare function useChart(): ChartContextValue | null;
|
|
136
|
+
/**
|
|
137
|
+
* Resolve the colour a series key paints with: `config[key].color` when set,
|
|
138
|
+
* otherwise `var(--ds-viz-N)` by the key's position in the config (or the
|
|
139
|
+
* `index` given). Recharts consumers reference it as `var(--color-<key>)`,
|
|
140
|
+
* which ChartContainer defines on its element.
|
|
141
|
+
*/
|
|
142
|
+
export declare function seriesColor(config: ChartConfig | undefined, key: string, index?: number): string;
|
|
143
|
+
interface ChartContainerProps extends Omit<React$1.ComponentProps<"div">, "children"> {
|
|
144
|
+
/** Series presentation; colours default to `--ds-viz-1..n` in key order. */
|
|
145
|
+
config?: ChartConfig;
|
|
146
|
+
/** Height of the drawing area; width is always 100% of the parent. Default 300. */
|
|
147
|
+
height?: number | string;
|
|
148
|
+
/**
|
|
149
|
+
* Wrap children in Recharts' ResponsiveContainer (default). Nivo's
|
|
150
|
+
* `Responsive*` components size themselves, so the Nivo renderers pass
|
|
151
|
+
* `responsive={false}`.
|
|
152
|
+
*/
|
|
153
|
+
responsive?: boolean;
|
|
154
|
+
children: React$1.ReactNode;
|
|
155
|
+
}
|
|
156
|
+
/**
|
|
157
|
+
* ChartContainer — the sized, token-styled surface every chart draws in.
|
|
158
|
+
*
|
|
159
|
+
* It defines `--color-<key>` for each config key (so Recharts parts can say
|
|
160
|
+
* `fill="var(--color-revenue)"`) and styles Recharts' axis, grid, tick and
|
|
161
|
+
* cursor classes from tokens with a caption-sm floor for text, so a custom
|
|
162
|
+
* chart composed inside it needs no local colours or fonts.
|
|
163
|
+
*/
|
|
164
|
+
declare function ChartContainer({ config, height, responsive, className, style, children, ...props }: ChartContainerProps): React$1.JSX.Element;
|
|
165
|
+
/** "No data" placeholder; rendered by Chart when the data is empty. */
|
|
166
|
+
declare function ChartEmpty({ children, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
167
|
+
/** Error placeholder; rendered by Chart for an `error` prop or a failed Nivo chunk. */
|
|
168
|
+
declare function ChartError({ className, children, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
169
|
+
/** Loading placeholder: a skeleton the size of the drawing area, shown while a Nivo chunk loads. */
|
|
170
|
+
declare function ChartLoading({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
171
|
+
interface ChartTooltipContentProps extends Partial<Pick<TooltipContentProps$1, "active" | "payload" | "label">> {
|
|
172
|
+
className?: string;
|
|
173
|
+
/** Hide the series label column. */
|
|
174
|
+
hideLabel?: boolean;
|
|
175
|
+
/** Hide the colour swatch. */
|
|
176
|
+
hideIndicator?: boolean;
|
|
177
|
+
/** Format a value; defaults to `toLocaleString`. */
|
|
178
|
+
formatter?: (value: number | string, name: string) => React$1.ReactNode;
|
|
179
|
+
/** Format the header (the category). */
|
|
180
|
+
labelFormatter?: (label: React$1.ReactNode) => React$1.ReactNode;
|
|
181
|
+
}
|
|
182
|
+
/**
|
|
183
|
+
* ChartTooltipContent — the popover body for Recharts' Tooltip, styled like
|
|
184
|
+
* the package Tooltip on the popover tokens. Pass as `content` to
|
|
185
|
+
* ChartTooltip; reads series labels and colours from the ChartContainer config.
|
|
186
|
+
*/
|
|
187
|
+
declare function ChartTooltipContent({ active, payload, label, className, hideLabel, hideIndicator, formatter, labelFormatter }: ChartTooltipContentProps): React$1.JSX.Element | null;
|
|
188
|
+
/** Recharts' Tooltip with the token-styled content and a subtle cursor. */
|
|
189
|
+
declare function ChartTooltip(props: TooltipProps): React$1.JSX.Element;
|
|
190
|
+
interface ChartLegendContentProps {
|
|
191
|
+
payload?: readonly LegendPayload[];
|
|
192
|
+
verticalAlign?: "top" | "bottom" | "middle";
|
|
193
|
+
className?: string;
|
|
194
|
+
hideIcon?: boolean;
|
|
195
|
+
}
|
|
196
|
+
/** ChartLegendContent — Recharts' legend on tokens; reads labels from the config. */
|
|
197
|
+
declare function ChartLegendContent({ payload, verticalAlign, className, hideIcon }: ChartLegendContentProps): React$1.JSX.Element | null;
|
|
198
|
+
/** Recharts' Legend with the token-styled content. */
|
|
199
|
+
declare function ChartLegend(props: LegendProps): React$1.JSX.Element;
|
|
200
|
+
//#endregion
|
|
201
|
+
//#region src/components/chart/chart.d.ts
|
|
202
|
+
interface ChartProps<T extends ChartType = ChartType> extends Omit<ChartContainerProps, "children" | "config" | "responsive"> {
|
|
203
|
+
/** Which chart to draw; the package picks the engine. See {@link ChartType} for the data shape per type. */
|
|
204
|
+
type: T;
|
|
205
|
+
/** The data, in the shape documented on {@link ChartType}. */
|
|
206
|
+
data: ChartDataFor<T>;
|
|
207
|
+
/** Series presentation keyed by series id; colours default to `--ds-viz-1..n` in order. */
|
|
208
|
+
config?: ChartConfig;
|
|
209
|
+
/** Nivo renderer; `canvas` for large series. Ignored by the Recharts types and by sunburst. */
|
|
210
|
+
renderer?: ChartRenderer;
|
|
211
|
+
/** Category key for row data (bar, line, area, radar); inferred as the first string field. */
|
|
212
|
+
indexBy?: string;
|
|
213
|
+
/** Series keys for row data; inferred as every numeric field. */
|
|
214
|
+
keys?: string[];
|
|
215
|
+
/** Stack bars and areas instead of grouping them. */
|
|
216
|
+
stacked?: boolean;
|
|
217
|
+
/** Continuous scale for heatmap and calendar. Default sequential. */
|
|
218
|
+
scale?: ChartScale;
|
|
219
|
+
/** Show a legend. Default: when there is more than one series. */
|
|
220
|
+
legend?: boolean;
|
|
221
|
+
/** Draw grid lines (cartesian and radar types). Default true. */
|
|
222
|
+
grid?: boolean;
|
|
223
|
+
/** Show a tooltip on hover. Default true. */
|
|
224
|
+
tooltip?: boolean;
|
|
225
|
+
/** Format values in axes, tooltips and labels. */
|
|
226
|
+
valueFormatter?: (value: number) => string;
|
|
227
|
+
/** Calendar range (ISO dates); defaults to the data's extent. */
|
|
228
|
+
from?: string;
|
|
229
|
+
to?: string;
|
|
230
|
+
/** Render the loading skeleton instead of the data. */
|
|
231
|
+
loading?: boolean;
|
|
232
|
+
/** Render the error state with this message instead of the data. */
|
|
233
|
+
error?: React$1.ReactNode | Error | null;
|
|
234
|
+
/** Content of the empty state. Default "No data". */
|
|
235
|
+
emptyMessage?: React$1.ReactNode;
|
|
236
|
+
}
|
|
237
|
+
/**
|
|
238
|
+
* Chart — one component for every chart type the fleet draws.
|
|
239
|
+
*
|
|
240
|
+
* `type` picks the engine: Recharts (bundled) for bar, line, area, pie, donut,
|
|
241
|
+
* scatter, radar and funnel; Nivo, lazy-loaded per package, for heatmap,
|
|
242
|
+
* calendar, treemap and sunburst, with `renderer="canvas"` for large series.
|
|
243
|
+
* Colours, fonts, axes, grid, tooltip, legend and the empty, loading and
|
|
244
|
+
* error states all come from cortena-design tokens; a consumer passes data
|
|
245
|
+
* and, optionally, a `config` of labels.
|
|
246
|
+
*/
|
|
247
|
+
declare function Chart<T extends ChartType>({ type, data, config, renderer, indexBy, keys, stacked, scale, legend, grid, tooltip, valueFormatter, from, to, loading, error, emptyMessage, className, height, ...props }: ChartProps<T>): React$1.JSX.Element;
|
|
248
|
+
//#endregion
|
|
249
|
+
//#region src/components/chart/nivo-theme.d.ts
|
|
250
|
+
/**
|
|
251
|
+
* The Nivo theme object, typed structurally so no `@nivo/*` package is a
|
|
252
|
+
* static import of this module (the Nivo packages are lazy-loaded). It is a
|
|
253
|
+
* subset of `PartialTheme` from `@nivo/theming` and assignable to every
|
|
254
|
+
* chart's `theme` prop.
|
|
255
|
+
*/
|
|
256
|
+
interface NivoTheme {
|
|
257
|
+
background: string;
|
|
258
|
+
text: {
|
|
259
|
+
fontFamily: string;
|
|
260
|
+
fontSize: number;
|
|
261
|
+
fill: string;
|
|
262
|
+
};
|
|
263
|
+
axis: {
|
|
264
|
+
domain: {
|
|
265
|
+
line: {
|
|
266
|
+
stroke: string;
|
|
267
|
+
strokeWidth: number;
|
|
268
|
+
};
|
|
269
|
+
};
|
|
270
|
+
ticks: {
|
|
271
|
+
line: {
|
|
272
|
+
stroke: string;
|
|
273
|
+
strokeWidth: number;
|
|
274
|
+
};
|
|
275
|
+
text: {
|
|
276
|
+
fill: string;
|
|
277
|
+
fontSize: number;
|
|
278
|
+
};
|
|
279
|
+
};
|
|
280
|
+
legend: {
|
|
281
|
+
text: {
|
|
282
|
+
fill: string;
|
|
283
|
+
fontSize: number;
|
|
284
|
+
fontWeight: number;
|
|
285
|
+
};
|
|
286
|
+
};
|
|
287
|
+
};
|
|
288
|
+
grid: {
|
|
289
|
+
line: {
|
|
290
|
+
stroke: string;
|
|
291
|
+
strokeWidth: number;
|
|
292
|
+
};
|
|
293
|
+
};
|
|
294
|
+
crosshair: {
|
|
295
|
+
line: {
|
|
296
|
+
stroke: string;
|
|
297
|
+
strokeWidth: number;
|
|
298
|
+
strokeOpacity: number;
|
|
299
|
+
strokeDasharray: string;
|
|
300
|
+
};
|
|
301
|
+
};
|
|
302
|
+
legends: {
|
|
303
|
+
text: {
|
|
304
|
+
fill: string;
|
|
305
|
+
fontSize: number;
|
|
306
|
+
};
|
|
307
|
+
title: {
|
|
308
|
+
text: {
|
|
309
|
+
fill: string;
|
|
310
|
+
fontSize: number;
|
|
311
|
+
};
|
|
312
|
+
};
|
|
313
|
+
ticks: {
|
|
314
|
+
line: {
|
|
315
|
+
stroke: string;
|
|
316
|
+
strokeWidth: number;
|
|
317
|
+
};
|
|
318
|
+
text: {
|
|
319
|
+
fill: string;
|
|
320
|
+
fontSize: number;
|
|
321
|
+
};
|
|
322
|
+
};
|
|
323
|
+
};
|
|
324
|
+
labels: {
|
|
325
|
+
text: {
|
|
326
|
+
fill: string;
|
|
327
|
+
fontSize: number;
|
|
328
|
+
fontWeight: number;
|
|
329
|
+
};
|
|
330
|
+
};
|
|
331
|
+
dots: {
|
|
332
|
+
text: {
|
|
333
|
+
fill: string;
|
|
334
|
+
fontSize: number;
|
|
335
|
+
};
|
|
336
|
+
};
|
|
337
|
+
markers: {
|
|
338
|
+
lineColor: string;
|
|
339
|
+
lineStrokeWidth: number;
|
|
340
|
+
text: {
|
|
341
|
+
fill: string;
|
|
342
|
+
fontSize: number;
|
|
343
|
+
};
|
|
344
|
+
};
|
|
345
|
+
annotations: {
|
|
346
|
+
text: {
|
|
347
|
+
fill: string;
|
|
348
|
+
fontSize: number;
|
|
349
|
+
outlineWidth: number;
|
|
350
|
+
outlineColor: string;
|
|
351
|
+
};
|
|
352
|
+
link: {
|
|
353
|
+
stroke: string;
|
|
354
|
+
strokeWidth: number;
|
|
355
|
+
outlineWidth: number;
|
|
356
|
+
outlineColor: string;
|
|
357
|
+
};
|
|
358
|
+
outline: {
|
|
359
|
+
stroke: string;
|
|
360
|
+
strokeWidth: number;
|
|
361
|
+
outlineWidth: number;
|
|
362
|
+
outlineColor: string;
|
|
363
|
+
};
|
|
364
|
+
symbol: {
|
|
365
|
+
fill: string;
|
|
366
|
+
outlineWidth: number;
|
|
367
|
+
outlineColor: string;
|
|
368
|
+
};
|
|
369
|
+
};
|
|
370
|
+
tooltip: {
|
|
371
|
+
container: {
|
|
372
|
+
background: string;
|
|
373
|
+
color: string;
|
|
374
|
+
fontSize: number;
|
|
375
|
+
fontFamily: string;
|
|
376
|
+
borderRadius: number;
|
|
377
|
+
boxShadow: string;
|
|
378
|
+
border: string;
|
|
379
|
+
padding: string;
|
|
380
|
+
};
|
|
381
|
+
chip: {
|
|
382
|
+
borderRadius: number;
|
|
383
|
+
};
|
|
384
|
+
};
|
|
385
|
+
}
|
|
386
|
+
/**
|
|
387
|
+
* Build the Nivo theme from the tokens, resolved on `el` (default `<html>`).
|
|
388
|
+
* Every colour is read from a `--ds-*` custom property and converted to hex,
|
|
389
|
+
* because Nivo's canvas renderer and its colour derivation cannot read
|
|
390
|
+
* `var()`. Sizes come from the type scale with `--ds-text-caption-sm` (11px)
|
|
391
|
+
* as the floor for ticks and labels.
|
|
392
|
+
*
|
|
393
|
+
* Moved here from cortenaweb's webchat renderer; nothing is hard-coded.
|
|
394
|
+
*/
|
|
395
|
+
export declare function nivoTheme(el?: Element | null): NivoTheme;
|
|
396
|
+
/**
|
|
397
|
+
* The Nivo theme for the current theme, re-resolved when `data-theme` or the
|
|
398
|
+
* OS scheme flips. Inside a ChartContainer the tokens are read on its element,
|
|
399
|
+
* so a nested theme scope is honoured.
|
|
400
|
+
*/
|
|
401
|
+
export declare function useNivoTheme(): NivoTheme;
|
|
402
|
+
//#endregion
|
|
403
|
+
//#region src/components/chart/tokens.d.ts
|
|
404
|
+
/**
|
|
405
|
+
* Token plumbing for the chart engines.
|
|
406
|
+
*
|
|
407
|
+
* Recharts draws SVG, so it can take `var(--ds-viz-1)` verbatim and the
|
|
408
|
+
* browser resolves it. Nivo cannot: its canvas renderer hands colours to a
|
|
409
|
+
* 2D context, and its SVG renderer runs colours through d3-color for label and
|
|
410
|
+
* border derivation, and neither understands `var()`. So every Nivo value is
|
|
411
|
+
* read from the `--ds-*` custom property at runtime and handed over as a
|
|
412
|
+
* concrete hex. Nothing in this file is a literal; on the server (no DOM) the
|
|
413
|
+
* `var()` form is returned so SSR markup still resolves in the browser.
|
|
414
|
+
*/
|
|
415
|
+
/** Number of categorical series colours the design system defines (`--ds-viz-1..n`). */
|
|
416
|
+
export declare const VIZ_SERIES_COUNT: number;
|
|
417
|
+
/** `var(--ds-viz-N)` for a zero-based series index, wrapping past the palette. */
|
|
418
|
+
export declare function vizVar(index: number): string;
|
|
419
|
+
/** The categorical palette as `var()` references, in series order. */
|
|
420
|
+
export declare const vizSeriesVars: readonly string[];
|
|
421
|
+
/**
|
|
422
|
+
* Convert any CSS colour the browser understands (oklch, color-mix, rgba…) to
|
|
423
|
+
* `#rrggbb`, by painting it into an offscreen 2D context. Alpha is composited
|
|
424
|
+
* against transparent, so translucent tokens come back opaque; chart fills
|
|
425
|
+
* never use those.
|
|
426
|
+
*/
|
|
427
|
+
export declare function toHex(css: string): string | undefined;
|
|
428
|
+
/**
|
|
429
|
+
* A token as a concrete colour. Returns hex in the browser; on the server the
|
|
430
|
+
* `var()` form, which is fine for SVG markup and irrelevant for canvas.
|
|
431
|
+
*/
|
|
432
|
+
export declare function resolveColor(token: string, el?: Element | null): string;
|
|
433
|
+
/** The categorical palette resolved to concrete colours, in series order. */
|
|
434
|
+
export declare function resolveVizSeries(el?: Element | null): string[];
|
|
435
|
+
interface ChartScales {
|
|
436
|
+
/** Low → high, as concrete hex stops. */
|
|
437
|
+
sequential: string[];
|
|
438
|
+
/** Negative → neutral → positive, as concrete hex stops. */
|
|
439
|
+
diverging: string[];
|
|
440
|
+
/** Interpolators over the stops, `t` in [0, 1], for Nivo's `interpolator` configs. */
|
|
441
|
+
sequentialInterpolator: (t: number) => string;
|
|
442
|
+
divergingInterpolator: (t: number) => string;
|
|
443
|
+
/** `n` evenly spaced sequential swatches, for quantised fills like the calendar. */
|
|
444
|
+
sequentialSteps: (n: number) => string[];
|
|
445
|
+
/** Fill for cells with no value. */
|
|
446
|
+
empty: string;
|
|
447
|
+
/** The chart's surface (`--ds-background`), for the gaps between cells and arcs. */
|
|
448
|
+
surface: string;
|
|
449
|
+
}
|
|
450
|
+
/**
|
|
451
|
+
* Sequential and diverging scales from the tokens.
|
|
452
|
+
*
|
|
453
|
+
* The token set has only the eight categorical `--ds-viz-*` colours and no
|
|
454
|
+
* sequential ramp, so the sequential scale is derived from the
|
|
455
|
+
* `--ds-primary-100..900` ladder: light surfaces run 100 → 700 (pale to deep),
|
|
456
|
+
* dark surfaces run 900 → 400 (deep to bright), so low values sit near the
|
|
457
|
+
* background in both themes. The diverging scale runs `--ds-viz-5` (rose)
|
|
458
|
+
* through the theme's neutral (`--ds-neutral-200` light, `--ds-neutral-700`
|
|
459
|
+
* dark) to `--ds-viz-1` (blue).
|
|
460
|
+
*/
|
|
461
|
+
export declare function chartScales(el?: Element | null): ChartScales;
|
|
462
|
+
//#endregion
|
|
463
|
+
//#region src/components/data-table/features.d.ts
|
|
464
|
+
declare const baseFeatures: {
|
|
465
|
+
columnFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
466
|
+
globalFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
467
|
+
columnFacetingFeature: import("@tanstack/react-table").TableFeature;
|
|
468
|
+
rowSortingFeature: import("@tanstack/react-table").TableFeature;
|
|
469
|
+
rowPaginationFeature: import("@tanstack/react-table").TableFeature;
|
|
470
|
+
rowSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
471
|
+
rowExpandingFeature: import("@tanstack/react-table").TableFeature;
|
|
472
|
+
columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
|
|
473
|
+
columnPinningFeature: import("@tanstack/react-table").TableFeature;
|
|
474
|
+
columnSizingFeature: import("@tanstack/react-table").TableFeature;
|
|
475
|
+
columnResizingFeature: import("@tanstack/react-table").TableFeature;
|
|
476
|
+
filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
477
|
+
sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
478
|
+
paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
479
|
+
expandedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
480
|
+
facetedRowModel: (table: import("@tanstack/react-table").Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
481
|
+
facetedUniqueValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
|
|
482
|
+
filterFns: {
|
|
483
|
+
includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
|
|
484
|
+
equals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
|
|
485
|
+
equalsString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
|
|
486
|
+
inNumberRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
|
|
487
|
+
arrIncludes: import("@tanstack/react-table").CreatedFilterFn<any, any>;
|
|
488
|
+
arrIncludesSome: import("@tanstack/react-table").CreatedFilterFn<any, any>;
|
|
489
|
+
inDateRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
|
|
490
|
+
weakEquals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
|
|
491
|
+
oneOf: import("@tanstack/react-table").CreatedFilterFn<any, any>;
|
|
492
|
+
};
|
|
493
|
+
sortFns: {
|
|
494
|
+
alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
495
|
+
basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
496
|
+
datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
497
|
+
text: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
498
|
+
};
|
|
499
|
+
columnMeta: DataTableColumnMeta<any>;
|
|
500
|
+
};
|
|
501
|
+
/**
|
|
502
|
+
* The registry type, re-keyed to the consumer's row type so `meta.onCommit`
|
|
503
|
+
* receives a typed row. The runtime object is the same for every table.
|
|
504
|
+
*/
|
|
505
|
+
type DataTableFeatures<Row extends RowData> = Omit<typeof baseFeatures, "columnMeta"> & {
|
|
506
|
+
columnMeta: DataTableColumnMeta<Row>;
|
|
507
|
+
};
|
|
508
|
+
export declare function dataTableFeatures<Row extends RowData>(): DataTableFeatures<Row>;
|
|
509
|
+
/**
|
|
510
|
+
* `createColumnHelper` bound to the DataTable feature set. v9's helper takes
|
|
511
|
+
* the features as its first type argument; this saves consumers from
|
|
512
|
+
* importing the registry.
|
|
513
|
+
*
|
|
514
|
+
* @example
|
|
515
|
+
* const helper = createColumnHelper<Contact>();
|
|
516
|
+
* const columns = helper.columns([
|
|
517
|
+
* helper.accessor("name", { header: "Name" }),
|
|
518
|
+
* helper.accessor("status", { header: "Status", meta: { filter: "faceted" } }),
|
|
519
|
+
* ]);
|
|
520
|
+
*/
|
|
521
|
+
export declare function createColumnHelper<Row extends RowData>(): ColumnHelper<DataTableFeatures<Row>, Row>;
|
|
522
|
+
//#endregion
|
|
523
|
+
//#region src/components/data-table/types.d.ts
|
|
524
|
+
/**
|
|
525
|
+
* Data sources (the contract in cortenaUI&Design/04-data-tables.md).
|
|
526
|
+
*
|
|
527
|
+
* A client source hands the table every row and lets it filter, sort and page
|
|
528
|
+
* in memory. A server source hands the table one page at a time: the table
|
|
529
|
+
* owns the search box, filter, sort and page state, turns it into a
|
|
530
|
+
* `TableQuery`, and the app answers with the already filtered, sorted page and
|
|
531
|
+
* the total. `TableQuery` / `TableResult` are also the backend contract every
|
|
532
|
+
* extension's list endpoint is expected to speak.
|
|
533
|
+
*/
|
|
534
|
+
type ClientSource<Row> = {
|
|
535
|
+
kind: "client";
|
|
536
|
+
rows: Row[];
|
|
537
|
+
};
|
|
538
|
+
type ServerSource<Row> = {
|
|
539
|
+
kind: "server";
|
|
540
|
+
/**
|
|
541
|
+
* Fetch one page. The optional `signal` is aborted when the query changes
|
|
542
|
+
* before the request settles, so a fetch that forwards it to `fetch()` is
|
|
543
|
+
* cancelled rather than raced.
|
|
544
|
+
*/
|
|
545
|
+
fetch: (query: TableQuery, signal?: AbortSignal) => Promise<TableResult<Row>>;
|
|
546
|
+
/**
|
|
547
|
+
* TanStack Query cache scope. Two tables that share a key share pages;
|
|
548
|
+
* defaults to a key private to the component instance.
|
|
549
|
+
*/
|
|
550
|
+
queryKey?: readonly unknown[];
|
|
551
|
+
};
|
|
552
|
+
type DataSource<Row> = ClientSource<Row> | ServerSource<Row>;
|
|
553
|
+
type TableQuery = {
|
|
554
|
+
q?: string;
|
|
555
|
+
filters?: Array<{
|
|
556
|
+
id: string;
|
|
557
|
+
value: unknown;
|
|
558
|
+
}>;
|
|
559
|
+
sort?: Array<{
|
|
560
|
+
id: string;
|
|
561
|
+
desc: boolean;
|
|
562
|
+
}>;
|
|
563
|
+
page: number;
|
|
564
|
+
pageSize: number;
|
|
565
|
+
};
|
|
566
|
+
type TableResult<Row> = {
|
|
567
|
+
rows: Row[];
|
|
568
|
+
total: number;
|
|
569
|
+
};
|
|
570
|
+
/** Inline-editing options for a column (`meta.editable`). */
|
|
571
|
+
interface DataTableEditable {
|
|
572
|
+
/** Input type; `number` parses the draft with `Number()` before commit. */
|
|
573
|
+
type?: "text" | "number";
|
|
574
|
+
/** Turn the raw input string into the committed value. */
|
|
575
|
+
parse?: (raw: string) => unknown;
|
|
576
|
+
}
|
|
577
|
+
/**
|
|
578
|
+
* Per-column `meta`. Typed through the v9 `columnMeta` feature slot, so
|
|
579
|
+
* `helper.accessor("x", { meta: { ... } })` is checked without declaration
|
|
580
|
+
* merging.
|
|
581
|
+
*/
|
|
582
|
+
interface DataTableColumnMeta<Row = unknown> {
|
|
583
|
+
/**
|
|
584
|
+
* Toolbar filter for this column. `faceted` renders a checkbox list of the
|
|
585
|
+
* column's distinct values (or `filterOptions`) and filters with `oneOf`.
|
|
586
|
+
*/
|
|
587
|
+
filter?: "faceted" | "text";
|
|
588
|
+
/** Fixed facet options; required for a server source, where only one page is loaded. */
|
|
589
|
+
filterOptions?: Array<{
|
|
590
|
+
value: string | number | boolean;
|
|
591
|
+
label?: string;
|
|
592
|
+
icon?: React.ComponentType<{
|
|
593
|
+
className?: string;
|
|
594
|
+
}>;
|
|
595
|
+
}>;
|
|
596
|
+
/** Text alignment of the header and cells. Numbers usually want `end`. */
|
|
597
|
+
align?: "start" | "center" | "end";
|
|
598
|
+
/** Enter or double-click opens an editor; Enter commits, Escape cancels. */
|
|
599
|
+
editable?: boolean | DataTableEditable;
|
|
600
|
+
/** Receives the committed value. Falls back to the table's `onCellCommit`. */
|
|
601
|
+
onCommit?: (row: Row, columnId: string, value: unknown) => void | Promise<void>;
|
|
602
|
+
/** Column label for the view menu and exports when `header` is not a string. */
|
|
603
|
+
label?: string;
|
|
604
|
+
/** Set `false` to leave the column out of CSV / Excel exports. */
|
|
605
|
+
exportable?: boolean;
|
|
606
|
+
/** Value written to exports instead of the accessor value. */
|
|
607
|
+
exportValue?: (row: Row) => string | number | boolean | Date | null | undefined;
|
|
608
|
+
/** Extra classes for every cell in this column. */
|
|
609
|
+
cellClassName?: string;
|
|
610
|
+
/** Extra classes for the header cell. */
|
|
611
|
+
headerClassName?: string;
|
|
612
|
+
}
|
|
613
|
+
type DataTableColumnDef<Row extends RowData, Value = unknown> = ColumnDef<DataTableFeatures<Row>, Row, Value>;
|
|
614
|
+
type DataTableColumn<Row extends RowData, Value = unknown> = Column<DataTableFeatures<Row>, Row, Value>;
|
|
615
|
+
type DataTableRow<Row$1 extends RowData> = Row<DataTableFeatures<Row$1>, Row$1>;
|
|
616
|
+
type DataTableCell<Row extends RowData, Value = unknown> = Cell$2<DataTableFeatures<Row>, Row, Value>;
|
|
617
|
+
type DataTableState<Row extends RowData> = TableState<DataTableFeatures<Row>>;
|
|
618
|
+
/** The TanStack table instance every part takes as `table`. */
|
|
619
|
+
type DataTableTable<Row extends RowData> = ReactTable<DataTableFeatures<Row>, Row>;
|
|
620
|
+
type DataTablePaginationMode = "pages" | "infinite" | "none";
|
|
621
|
+
interface UseDataTableOptions<Row extends RowData> {
|
|
622
|
+
columns: ReadonlyArray<DataTableColumnDef<Row, any>>;
|
|
623
|
+
dataSource: DataSource<Row>;
|
|
624
|
+
/** Stable row identity; defaults to the row index. Needed for selection and editing to survive re-sorts. */
|
|
625
|
+
getRowId?: (row: Row, index: number) => string;
|
|
626
|
+
/** Tree data: return a row's children. */
|
|
627
|
+
getSubRows?: (row: Row, index: number) => Row[] | undefined;
|
|
628
|
+
/** `pages` (default) renders a pager; `infinite` appends pages on scroll; `none` shows every row. */
|
|
629
|
+
pagination?: DataTablePaginationMode;
|
|
630
|
+
/** @default 25 */
|
|
631
|
+
pageSize?: number;
|
|
632
|
+
/** Adds a checkbox column and enables `bulkActions`. */
|
|
633
|
+
enableRowSelection?: boolean | ((row: DataTableRow<Row>) => boolean);
|
|
634
|
+
/** Adds an expander column; set automatically by `renderSubComponent`. */
|
|
635
|
+
enableExpanding?: boolean;
|
|
636
|
+
getRowCanExpand?: (row: DataTableRow<Row>) => boolean;
|
|
637
|
+
/** @default true */
|
|
638
|
+
enableSorting?: boolean;
|
|
639
|
+
/** @default false */
|
|
640
|
+
enableMultiSort?: boolean;
|
|
641
|
+
/** @default true */
|
|
642
|
+
enableGlobalFilter?: boolean;
|
|
643
|
+
/** @default true */
|
|
644
|
+
enableColumnFilters?: boolean;
|
|
645
|
+
/** @default true */
|
|
646
|
+
enableHiding?: boolean;
|
|
647
|
+
/** @default true */
|
|
648
|
+
enableColumnPinning?: boolean;
|
|
649
|
+
/** @default false */
|
|
650
|
+
enableColumnResizing?: boolean;
|
|
651
|
+
/** Starting sort, filters, visibility, pinning, sizing. */
|
|
652
|
+
initialState?: Partial<DataTableState<Row>>;
|
|
653
|
+
/** Table-wide commit handler for editable cells without their own `meta.onCommit`. */
|
|
654
|
+
onCellCommit?: (row: Row, columnId: string, value: unknown) => void | Promise<void>;
|
|
655
|
+
/** Fires with the selected original rows whenever selection changes. */
|
|
656
|
+
onRowSelectionChange?: (rows: Row[]) => void;
|
|
657
|
+
/** Debounce applied to the search box before it reaches a server source. @default 250 */
|
|
658
|
+
searchDebounceMs?: number;
|
|
659
|
+
}
|
|
660
|
+
interface DataTableEditingCell {
|
|
661
|
+
rowId: string;
|
|
662
|
+
columnId: string;
|
|
663
|
+
}
|
|
664
|
+
interface DataTableInstance<Row extends RowData> {
|
|
665
|
+
table: DataTableTable<Row>;
|
|
666
|
+
dataSource: DataSource<Row>;
|
|
667
|
+
paginationMode: DataTablePaginationMode;
|
|
668
|
+
/** Rows currently in the table (the page, for a server source). */
|
|
669
|
+
rows: Row[];
|
|
670
|
+
/** Total matching rows (server `total`, or the filtered count for a client source). */
|
|
671
|
+
total: number;
|
|
672
|
+
/** True until the first server page arrives; never true for a client source. */
|
|
673
|
+
isLoading: boolean;
|
|
674
|
+
/** True while any server request is in flight, including background refetches. */
|
|
675
|
+
isFetching: boolean;
|
|
676
|
+
error: Error | null;
|
|
677
|
+
refetch: () => void;
|
|
678
|
+
/** Infinite mode: load the next page. No-op elsewhere. */
|
|
679
|
+
fetchNextPage: () => void;
|
|
680
|
+
hasNextPage: boolean;
|
|
681
|
+
/** Search text the server last received (debounced), for consumers rendering their own toolbar. */
|
|
682
|
+
searchQuery: string;
|
|
683
|
+
editing: {
|
|
684
|
+
cell: DataTableEditingCell | null;
|
|
685
|
+
start: (cell: DataTableEditingCell) => void;
|
|
686
|
+
stop: () => void;
|
|
687
|
+
commit: (row: DataTableRow<Row>, columnId: string, value: unknown) => Promise<void>;
|
|
688
|
+
};
|
|
689
|
+
}
|
|
690
|
+
//#endregion
|
|
691
|
+
//#region src/components/data-table/data-table.d.ts
|
|
692
|
+
interface DataTableViewProps<Row extends RowData> {
|
|
693
|
+
className?: string;
|
|
694
|
+
/** Height of the scrolling body. Required for virtualisation to mean anything; defaults to 600px when virtualised. */
|
|
695
|
+
maxHeight?: number | string;
|
|
696
|
+
/** Force virtualisation on or off; undefined virtualises above 100 rows. */
|
|
697
|
+
virtualize?: boolean;
|
|
698
|
+
/** Estimated row height in px for the virtualizer. @default 40 */
|
|
699
|
+
rowHeight?: number;
|
|
700
|
+
/** @default true */
|
|
701
|
+
stickyHeader?: boolean;
|
|
702
|
+
/** @default "default" */
|
|
703
|
+
density?: "default" | "compact";
|
|
704
|
+
/** Detail panel under an expanded row; enables the expander column. */
|
|
705
|
+
renderSubComponent?: (row: DataTableRow<Row>) => React$1.ReactNode;
|
|
706
|
+
/** `false` hides the toolbar; a function replaces it. */
|
|
707
|
+
toolbar?: boolean | ((ctx: {
|
|
708
|
+
instance: DataTableInstance<Row>;
|
|
709
|
+
}) => React$1.ReactNode);
|
|
710
|
+
/** Rendered in the toolbar while rows are selected. */
|
|
711
|
+
bulkActions?: (ctx: {
|
|
712
|
+
rows: Row[];
|
|
713
|
+
table: DataTableTable<Row>;
|
|
714
|
+
}) => React$1.ReactNode;
|
|
715
|
+
/** Extra toolbar controls (right side). */
|
|
716
|
+
toolbarActions?: React$1.ReactNode;
|
|
717
|
+
searchPlaceholder?: string;
|
|
718
|
+
emptyState?: React$1.ReactNode;
|
|
719
|
+
/** @default "No results" */
|
|
720
|
+
emptyMessage?: string;
|
|
721
|
+
pageSizeOptions?: number[];
|
|
722
|
+
/** @default true */
|
|
723
|
+
enableExport?: boolean;
|
|
724
|
+
/** @default "export" */
|
|
725
|
+
exportFileName?: string;
|
|
726
|
+
/** Show the loading skeleton regardless of the source's own state. */
|
|
727
|
+
loading?: boolean;
|
|
728
|
+
/** Error to show above the table, in addition to the server source's. */
|
|
729
|
+
error?: string | Error | null;
|
|
730
|
+
onRowClick?: (row: Row, event: React$1.MouseEvent<HTMLTableRowElement>) => void;
|
|
731
|
+
}
|
|
732
|
+
type DataTableProps<Row extends RowData> = DataTableViewProps<Row> & ({
|
|
733
|
+
instance: DataTableInstance<Row>;
|
|
734
|
+
} | UseDataTableOptions<Row>);
|
|
735
|
+
declare function DataTable<Row extends RowData>(props: DataTableProps<Row>): React$1.JSX.Element;
|
|
736
|
+
declare function DataTableView<Row extends RowData>({ instance, className, maxHeight, virtualize, rowHeight, stickyHeader, density, renderSubComponent, toolbar, bulkActions, toolbarActions, searchPlaceholder, emptyState, emptyMessage, pageSizeOptions, enableExport, exportFileName, loading, error, onRowClick }: DataTableViewProps<Row> & {
|
|
737
|
+
instance: DataTableInstance<Row>;
|
|
738
|
+
}): React$1.JSX.Element;
|
|
739
|
+
//#endregion
|
|
740
|
+
//#region src/components/data-table/parts.d.ts
|
|
741
|
+
interface DataTableColumnHeaderProps<Row extends RowData> extends Omit<React$1.ComponentProps<"div">, "title"> {
|
|
742
|
+
column: DataTableColumn<Row, any>;
|
|
743
|
+
title: React$1.ReactNode;
|
|
744
|
+
}
|
|
745
|
+
/**
|
|
746
|
+
* Header content for one column: the title as a sort toggle when the column
|
|
747
|
+
* sorts, and a menu with sort, pin and hide when any of those apply. The
|
|
748
|
+
* table renders it for every string `header` automatically; use it inside a
|
|
749
|
+
* custom header function to keep the same affordances.
|
|
750
|
+
*/
|
|
751
|
+
declare function DataTableColumnHeader<Row extends RowData>({ column, title, className, ...props }: DataTableColumnHeaderProps<Row>): React$1.JSX.Element;
|
|
752
|
+
interface DataTableFacetedFilterOption {
|
|
753
|
+
value: string | number | boolean;
|
|
754
|
+
label?: string;
|
|
755
|
+
icon?: React$1.ComponentType<{
|
|
756
|
+
className?: string;
|
|
757
|
+
}>;
|
|
758
|
+
}
|
|
759
|
+
interface DataTableFacetedFilterProps<Row extends RowData> {
|
|
760
|
+
column: DataTableColumn<Row, any>;
|
|
761
|
+
title?: React$1.ReactNode;
|
|
762
|
+
/** Fixed options; defaults to the column's distinct values with counts (client source only). */
|
|
763
|
+
options?: DataTableFacetedFilterOption[];
|
|
764
|
+
className?: string;
|
|
765
|
+
}
|
|
766
|
+
/**
|
|
767
|
+
* A checkbox list of a column's values. The filter value is the array of
|
|
768
|
+
* picked values; the column's `filterFn` (`oneOf` by default for
|
|
769
|
+
* `meta.filter: "faceted"`) decides what that means, and a server source
|
|
770
|
+
* receives it verbatim in `TableQuery.filters`.
|
|
771
|
+
*/
|
|
772
|
+
declare function DataTableFacetedFilter<Row extends RowData>({ column, title, options, className }: DataTableFacetedFilterProps<Row>): React$1.JSX.Element;
|
|
773
|
+
interface DataTableViewOptionsProps<Row extends RowData> {
|
|
774
|
+
table: DataTableTable<Row>;
|
|
775
|
+
className?: string;
|
|
776
|
+
}
|
|
777
|
+
/** Column visibility menu. */
|
|
778
|
+
declare function DataTableViewOptions<Row extends RowData>({ table, className }: DataTableViewOptionsProps<Row>): React$1.JSX.Element | null;
|
|
779
|
+
interface DataTableExportMenuProps<Row extends RowData> {
|
|
780
|
+
table: DataTableTable<Row>;
|
|
781
|
+
fileName?: string;
|
|
782
|
+
className?: string;
|
|
783
|
+
}
|
|
784
|
+
declare function DataTableExportMenu<Row extends RowData>({ table, fileName, className }: DataTableExportMenuProps<Row>): React$1.JSX.Element;
|
|
785
|
+
interface DataTableToolbarProps<Row extends RowData> extends Omit<React$1.ComponentProps<"div">, "children"> {
|
|
786
|
+
table: DataTableTable<Row>;
|
|
787
|
+
/** Placeholder for the search box. @default "Search…" */
|
|
788
|
+
searchPlaceholder?: string;
|
|
789
|
+
/** Rendered while rows are selected, in place of the filters. */
|
|
790
|
+
bulkActions?: (ctx: {
|
|
791
|
+
rows: Row[];
|
|
792
|
+
table: DataTableTable<Row>;
|
|
793
|
+
}) => React$1.ReactNode;
|
|
794
|
+
/** Extra controls on the right, before the view and export menus. */
|
|
795
|
+
children?: React$1.ReactNode;
|
|
796
|
+
/** @default true */
|
|
797
|
+
enableExport?: boolean;
|
|
798
|
+
exportFileName?: string;
|
|
799
|
+
}
|
|
800
|
+
/**
|
|
801
|
+
* Search box, one faceted filter per `meta.filter: "faceted"` column, a reset
|
|
802
|
+
* when anything is filtered, and the view / export menus. While rows are
|
|
803
|
+
* selected the left side becomes the selection summary and `bulkActions`.
|
|
804
|
+
*/
|
|
805
|
+
declare function DataTableToolbar<Row extends RowData>({ table, searchPlaceholder, bulkActions, children, enableExport, exportFileName, className, ...props }: DataTableToolbarProps<Row>): React$1.JSX.Element;
|
|
806
|
+
interface DataTablePaginationProps<Row extends RowData> extends React$1.ComponentProps<"div"> {
|
|
807
|
+
table: DataTableTable<Row>;
|
|
808
|
+
/** @default [10, 25, 50, 100] */
|
|
809
|
+
pageSizeOptions?: number[];
|
|
810
|
+
}
|
|
811
|
+
declare function DataTablePagination<Row extends RowData>({ table, pageSizeOptions, className, ...props }: DataTablePaginationProps<Row>): React$1.JSX.Element;
|
|
812
|
+
//#endregion
|
|
813
|
+
//#region src/components/data-table/use-data-table.d.ts
|
|
814
|
+
/**
|
|
815
|
+
* Builds the table for a `dataSource`. This is where the design decision's
|
|
816
|
+
* "the component sets the manual flags itself" lives: a server source flips
|
|
817
|
+
* `manualFiltering`, `manualSorting` and `manualPagination` and feeds the
|
|
818
|
+
* table's own filter / sort / page state back out as a `TableQuery`; a client
|
|
819
|
+
* source leaves every row model in memory. Everything else (selection,
|
|
820
|
+
* expansion, visibility, pinning, sizing) is owned by the table.
|
|
821
|
+
*
|
|
822
|
+
* Use it directly when the default layout is not enough: pass the returned
|
|
823
|
+
* `table` to `DataTableToolbar`, `DataTablePagination` and friends, or the
|
|
824
|
+
* whole instance to `<DataTable instance={...} />`.
|
|
825
|
+
*/
|
|
826
|
+
export declare function useDataTable<Row extends RowData>(options: UseDataTableOptions<Row>): DataTableInstance<Row>;
|
|
827
|
+
//#endregion
|
|
828
|
+
//#region src/components/data-table/export.d.ts
|
|
829
|
+
type ExportCell = string | number | boolean | Date | null;
|
|
830
|
+
interface ExportSheet {
|
|
831
|
+
headers: string[];
|
|
832
|
+
records: ExportCell[][];
|
|
833
|
+
}
|
|
834
|
+
export declare function toSheet<Row extends RowData>(table: DataTableTable<Row>, rows?: DataTableRow<Row>[]): ExportSheet;
|
|
835
|
+
/** RFC 4180 text: comma separated, CRLF lines, quotes doubled. */
|
|
836
|
+
export declare function toCsv<Row extends RowData>(table: DataTableTable<Row>, rows?: DataTableRow<Row>[]): string;
|
|
837
|
+
export declare function downloadCsv<Row extends RowData>(table: DataTableTable<Row>, fileName?: string, rows?: DataTableRow<Row>[]): void;
|
|
838
|
+
/**
|
|
839
|
+
* Excel through exceljs, loaded on first use so the workbook code (about
|
|
840
|
+
* 300 KB) never sits in a bundle that only ever exports CSV.
|
|
841
|
+
*/
|
|
842
|
+
export declare function downloadExcel<Row extends RowData>(table: DataTableTable<Row>, fileName?: string, rows?: DataTableRow<Row>[]): Promise<void>;
|
|
843
|
+
//#endregion
|
|
844
|
+
//#region src/components/accordion.d.ts
|
|
845
|
+
/**
|
|
846
|
+
* Accordion.
|
|
847
|
+
*
|
|
848
|
+
* Base UI's Accordion is a list of Collapsibles: `Root > Item > Header > Trigger`
|
|
849
|
+
* plus `Panel`. The panel animates on height through Base UI's
|
|
850
|
+
* `--accordion-panel-height`, and marks its first/last frame with
|
|
851
|
+
* `data-starting-style` / `data-ending-style`, which is where it collapses to 0.
|
|
852
|
+
*
|
|
853
|
+
* Radix users: `type="single" | "multiple"` is now the boolean `multiple`, and
|
|
854
|
+
* `value` is always an array. `collapsible` is the default. `data-state="open"`
|
|
855
|
+
* is `data-open` on the item and panel, `data-panel-open` on the trigger.
|
|
856
|
+
*/
|
|
857
|
+
declare function Accordion({ className, ...props }: Accordion$1.Root.Props): import("react").JSX.Element;
|
|
858
|
+
declare function AccordionItem({ className, ...props }: Accordion$1.Item.Props): import("react").JSX.Element;
|
|
859
|
+
declare function AccordionTrigger({ className, children, ...props }: Accordion$1.Trigger.Props): import("react").JSX.Element;
|
|
860
|
+
declare function AccordionContent({ className, children, ...props }: Accordion$1.Panel.Props): import("react").JSX.Element;
|
|
861
|
+
//#endregion
|
|
862
|
+
//#region src/components/alert.d.ts
|
|
863
|
+
/**
|
|
864
|
+
* Alert — an inline callout. Tinted variants use the `-soft` fill for the
|
|
865
|
+
* background and the tone colour for the border and icon; the body text stays
|
|
866
|
+
* on the foreground token so it reads in both themes.
|
|
867
|
+
*/
|
|
868
|
+
declare const alertVariants: (props?: ({
|
|
869
|
+
variant?: "default" | "success" | "warn" | "danger" | "info" | null | undefined;
|
|
870
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
871
|
+
interface AlertProps extends React$1.ComponentProps<"div">, VariantProps<typeof alertVariants> {}
|
|
872
|
+
declare function Alert({ className, variant, ...props }: AlertProps): React$1.JSX.Element;
|
|
873
|
+
declare function AlertIcon({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
874
|
+
declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
875
|
+
declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
876
|
+
//#endregion
|
|
877
|
+
//#region src/components/avatar.d.ts
|
|
878
|
+
/**
|
|
879
|
+
* Avatar.
|
|
880
|
+
*
|
|
881
|
+
* Base UI preloads the image and only mounts `<img>` once it has loaded, so
|
|
882
|
+
* the fallback is what paints while loading and after an error. Initials sit
|
|
883
|
+
* on the primary fill in inverse text.
|
|
884
|
+
*
|
|
885
|
+
* Radix users: `delayMs` on the fallback is now `delay`.
|
|
886
|
+
*/
|
|
887
|
+
declare function Avatar({ className, ...props }: Avatar$1.Root.Props): import("react").JSX.Element;
|
|
888
|
+
declare function AvatarImage({ className, ...props }: Avatar$1.Image.Props): import("react").JSX.Element;
|
|
889
|
+
declare function AvatarFallback({ className, ...props }: Avatar$1.Fallback.Props): import("react").JSX.Element;
|
|
890
|
+
//#endregion
|
|
891
|
+
//#region src/components/badge.d.ts
|
|
892
|
+
/**
|
|
893
|
+
* Badge — the mono, uppercase status label. Each tone pairs a `-soft` fill
|
|
894
|
+
* with its foreground token; `warn`, `danger` and `secondary` are aliases kept
|
|
895
|
+
* for cortenaweb call sites.
|
|
896
|
+
*/
|
|
897
|
+
declare const badgeVariants: (props?: ({
|
|
898
|
+
variant?: "secondary" | "outline" | "destructive" | "default" | "success" | "warn" | "danger" | "info" | "warning" | "neutral" | null | undefined;
|
|
899
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
900
|
+
interface BadgeProps extends React$1.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
|
|
901
|
+
declare function Badge({ className, variant, ...props }: BadgeProps): React$1.JSX.Element;
|
|
902
|
+
//#endregion
|
|
13
903
|
//#region src/components/button.d.ts
|
|
14
904
|
/**
|
|
15
905
|
* Button.
|
|
@@ -25,8 +915,1118 @@ declare const buttonVariants: (props?: ({
|
|
|
25
915
|
variant?: "primary" | "secondary" | "outline" | "ghost" | "soft" | "destructive" | "link" | null | undefined;
|
|
26
916
|
size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
|
|
27
917
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
28
|
-
interface ButtonProps extends React.ComponentProps<typeof Button$1>, VariantProps<typeof buttonVariants> {}
|
|
29
|
-
declare function Button({ className, variant, size, ...props }: ButtonProps): React.JSX.Element;
|
|
918
|
+
interface ButtonProps extends React$1.ComponentProps<typeof Button$1>, VariantProps<typeof buttonVariants> {}
|
|
919
|
+
declare function Button({ className, variant, size, ...props }: ButtonProps): React$1.JSX.Element;
|
|
920
|
+
//#endregion
|
|
921
|
+
//#region src/components/calendar.d.ts
|
|
922
|
+
/**
|
|
923
|
+
* Calendar.
|
|
924
|
+
*
|
|
925
|
+
* The shadcn Calendar shape over react-day-picker 10. The library's stylesheet
|
|
926
|
+
* is not imported; every class comes from the `classNames` map below and every
|
|
927
|
+
* visual value in it is a cortena-design token. Structure (nav, caption, grid,
|
|
928
|
+
* dropdown caption) is DayPicker's; the day cells, nav buttons and chevrons are
|
|
929
|
+
* swapped for our Button and lucide icons through `components`.
|
|
930
|
+
*
|
|
931
|
+
* `showOutsideDays` defaults to true and `captionLayout` to `"label"`; pass
|
|
932
|
+
* `captionLayout="dropdown"` for native month/year selects in the caption.
|
|
933
|
+
*/
|
|
934
|
+
type CalendarProps = DayPickerProps;
|
|
935
|
+
/**
|
|
936
|
+
* One day cell's button. Selection and range state are exposed as data
|
|
937
|
+
* attributes so the classes below (and a consumer's) can paint them; the
|
|
938
|
+
* `today` attribute is only set when the day is not selected, so the soft
|
|
939
|
+
* fill never competes with the selected fill.
|
|
940
|
+
*/
|
|
941
|
+
declare function CalendarDayButton({ className, day, modifiers, ...props }: DayButtonProps): React$1.JSX.Element;
|
|
942
|
+
declare function Calendar({ className, classNames, components, showOutsideDays, captionLayout, formatters, ...props }: CalendarProps): React$1.JSX.Element;
|
|
943
|
+
//#endregion
|
|
944
|
+
//#region src/components/card.d.ts
|
|
945
|
+
interface CardProps extends React$1.ComponentProps<"div"> {
|
|
946
|
+
/** Lift the border and surface on hover, for clickable cards. */
|
|
947
|
+
hover?: boolean;
|
|
948
|
+
/** Draw the border in the ring colour, for a selected or highlighted card. */
|
|
949
|
+
accent?: boolean;
|
|
950
|
+
}
|
|
951
|
+
declare function Card({ className, hover, accent, ...props }: CardProps): React$1.JSX.Element;
|
|
952
|
+
declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
953
|
+
declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
954
|
+
declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
955
|
+
declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
956
|
+
declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
957
|
+
//#endregion
|
|
958
|
+
//#region src/components/checkbox.d.ts
|
|
959
|
+
/**
|
|
960
|
+
* Checkbox.
|
|
961
|
+
*
|
|
962
|
+
* Base UI renders a `<span role="checkbox">` with a hidden `<input>` beside
|
|
963
|
+
* it, so it submits with forms and takes `checked`/`defaultChecked`. The
|
|
964
|
+
* indicator only mounts while checked or indeterminate; the icon inside it is
|
|
965
|
+
* a lucide Check, or a Minus when `indeterminate` is set.
|
|
966
|
+
*
|
|
967
|
+
* The 16px box takes half the small radius: the 8px ladder step would round
|
|
968
|
+
* it into a circle.
|
|
969
|
+
*/
|
|
970
|
+
interface CheckboxProps extends React$1.ComponentProps<typeof Checkbox$1.Root> {}
|
|
971
|
+
declare function Checkbox({ className, indeterminate, ...props }: CheckboxProps): React$1.JSX.Element;
|
|
972
|
+
//#endregion
|
|
973
|
+
//#region src/components/chip.d.ts
|
|
974
|
+
/**
|
|
975
|
+
* Chip — a pill for filters, tags and selected values. Unlike Badge it keeps
|
|
976
|
+
* sentence case and the body font.
|
|
977
|
+
*/
|
|
978
|
+
declare const chipVariants: (props?: ({
|
|
979
|
+
variant?: "outline" | "default" | "accent" | null | undefined;
|
|
980
|
+
size?: "sm" | "default" | null | undefined;
|
|
981
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
982
|
+
interface ChipProps extends React$1.ComponentProps<"span">, VariantProps<typeof chipVariants> {}
|
|
983
|
+
declare function Chip({ className, variant, size, ...props }: ChipProps): React$1.JSX.Element;
|
|
984
|
+
//#endregion
|
|
985
|
+
//#region src/components/combobox.d.ts
|
|
986
|
+
/**
|
|
987
|
+
* Combobox: a filterable text input with a listbox popup, on Base UI.
|
|
988
|
+
*
|
|
989
|
+
* Give the Root `items` (an array, or `[{ value, label }]`) and render the
|
|
990
|
+
* list with `<ComboboxList>{(item) => <ComboboxItem value={item} />}</ComboboxList>`;
|
|
991
|
+
* Base UI filters `items` against the input as the user types. Without
|
|
992
|
+
* `items` nothing is filtered and `ComboboxEmpty` never shows.
|
|
993
|
+
*
|
|
994
|
+
* - `ComboboxInput` is our `Input` with a trailing open/close trigger and,
|
|
995
|
+
* with `clearable`, an X button that clears the value.
|
|
996
|
+
* - `ComboboxContent` composes Portal + Positioner + Popup + List so
|
|
997
|
+
* consumers write one element; positioning props go to the Positioner.
|
|
998
|
+
* - Multiple selection: set `multiple` on the Root and wrap `ComboboxValue`
|
|
999
|
+
* (rendering a `ComboboxChip` per value) plus `ComboboxInput` in
|
|
1000
|
+
* `ComboboxChips`. Inside `ComboboxChips` the input drops its own frame;
|
|
1001
|
+
* the chips container carries the field look and anchors the popup.
|
|
1002
|
+
* - `useComboboxFilter` is Base UI's `useFilter` for external filtering via
|
|
1003
|
+
* `filteredItems`.
|
|
1004
|
+
*
|
|
1005
|
+
* `onValueChange` receives `(value, eventDetails)`; `onInputValueChange`
|
|
1006
|
+
* reports the typed text.
|
|
1007
|
+
*/
|
|
1008
|
+
declare function Combobox<Value, Multiple extends boolean | undefined = false, Item = Value>(props: Combobox$1.Root.Props<Value, Multiple, Item>): import("react").JSX.Element;
|
|
1009
|
+
declare function ComboboxTrigger({ className, children, ...props }: Combobox$1.Trigger.Props): import("react").JSX.Element;
|
|
1010
|
+
declare function ComboboxClear({ className, children, ...props }: Combobox$1.Clear.Props): import("react").JSX.Element;
|
|
1011
|
+
interface ComboboxInputProps extends Combobox$1.Input.Props {
|
|
1012
|
+
/** Show an X button that clears the selection while there is one. */
|
|
1013
|
+
clearable?: boolean;
|
|
1014
|
+
/** Class for the wrapper that holds the input and its buttons. */
|
|
1015
|
+
wrapperClassName?: string;
|
|
1016
|
+
}
|
|
1017
|
+
declare function ComboboxInput({ className, clearable, wrapperClassName, ...props }: ComboboxInputProps): import("react").JSX.Element;
|
|
1018
|
+
declare function ComboboxValue(props: Combobox$1.Value.Props): import("react").JSX.Element;
|
|
1019
|
+
interface ComboboxChipsProps extends Combobox$1.Chips.Props {
|
|
1020
|
+
/** Class for the inner chip row; `className` styles the field frame. */
|
|
1021
|
+
chipsClassName?: string;
|
|
1022
|
+
}
|
|
1023
|
+
declare function ComboboxChips({ className, chipsClassName, children, ...props }: ComboboxChipsProps): import("react").JSX.Element;
|
|
1024
|
+
interface ComboboxChipProps extends Combobox$1.Chip.Props {
|
|
1025
|
+
/** Hide the remove button. */
|
|
1026
|
+
removable?: boolean;
|
|
1027
|
+
}
|
|
1028
|
+
declare function ComboboxChip({ className, children, removable, ...props }: ComboboxChipProps): import("react").JSX.Element;
|
|
1029
|
+
type PositionerProps$4 = Pick<Combobox$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
|
|
1030
|
+
interface ComboboxContentProps extends Omit<Combobox$1.Popup.Props, "children">, PositionerProps$4 {
|
|
1031
|
+
/** Items, or a render function called per filtered item (needs `items` on the Root). */
|
|
1032
|
+
children?: Combobox$1.List.Props["children"];
|
|
1033
|
+
/**
|
|
1034
|
+
* Shown (via `ComboboxEmpty`, above the list) when nothing matches the query.
|
|
1035
|
+
* Needs `items` on the Root.
|
|
1036
|
+
*/
|
|
1037
|
+
empty?: ReactNode;
|
|
1038
|
+
/** Class for the inner List element. */
|
|
1039
|
+
listClassName?: string;
|
|
1040
|
+
/** Keep the popup mounted in the DOM while hidden. */
|
|
1041
|
+
keepMounted?: boolean;
|
|
1042
|
+
/** Where to portal the popup; defaults to `<body>`. */
|
|
1043
|
+
container?: Combobox$1.Portal.Props["container"];
|
|
1044
|
+
}
|
|
1045
|
+
declare function ComboboxContent({ className, children, empty, listClassName, side, align, sideOffset, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }: ComboboxContentProps): import("react").JSX.Element;
|
|
1046
|
+
declare function ComboboxItem({ className, children, ...props }: Combobox$1.Item.Props): import("react").JSX.Element;
|
|
1047
|
+
/** Renders per filtered item; use inside a `ComboboxGroup` given `items`, or for a flat list pass a function as `ComboboxContent` children instead. */
|
|
1048
|
+
declare function ComboboxCollection(props: Combobox$1.Collection.Props): import("react").JSX.Element;
|
|
1049
|
+
declare function ComboboxEmpty({ className, ...props }: Combobox$1.Empty.Props): import("react").JSX.Element;
|
|
1050
|
+
declare function ComboboxStatus({ className, ...props }: Combobox$1.Status.Props): import("react").JSX.Element;
|
|
1051
|
+
declare function ComboboxGroup({ className, ...props }: Combobox$1.Group.Props): import("react").JSX.Element;
|
|
1052
|
+
declare function ComboboxGroupLabel({ className, ...props }: Combobox$1.GroupLabel.Props): import("react").JSX.Element;
|
|
1053
|
+
declare function ComboboxSeparator({ className, ...props }: Combobox$1.Separator.Props): import("react").JSX.Element;
|
|
1054
|
+
declare const useComboboxFilter: typeof Combobox$1.useFilter;
|
|
1055
|
+
//#endregion
|
|
1056
|
+
//#region src/components/dialog.d.ts
|
|
1057
|
+
/**
|
|
1058
|
+
* Dialog.
|
|
1059
|
+
*
|
|
1060
|
+
* `DialogContent` composes Base UI's Portal + Backdrop + Popup so consumers
|
|
1061
|
+
* keep writing `<DialogContent>…</DialogContent>`. The Radix `Overlay` part is
|
|
1062
|
+
* exported as `DialogOverlay` (a styled Backdrop) for anyone composing by hand.
|
|
1063
|
+
*
|
|
1064
|
+
* Radix users: `asChild` becomes `render={...}`; `onOpenChange` receives
|
|
1065
|
+
* `(open, eventDetails)` rather than just `open`; the popup is only
|
|
1066
|
+
* dismissable via pointer when `modal` is true (the default), and
|
|
1067
|
+
* `disablePointerDismissal` replaces `onPointerDownOutside` preventDefault.
|
|
1068
|
+
*/
|
|
1069
|
+
declare function Dialog(props: Dialog$1.Root.Props): React$1.JSX.Element;
|
|
1070
|
+
declare function DialogTrigger(props: Dialog$1.Trigger.Props): React$1.JSX.Element;
|
|
1071
|
+
declare function DialogPortal(props: Dialog$1.Portal.Props): React$1.JSX.Element;
|
|
1072
|
+
declare function DialogClose(props: Dialog$1.Close.Props): React$1.JSX.Element;
|
|
1073
|
+
declare function DialogOverlay({ className, ...props }: Dialog$1.Backdrop.Props): React$1.JSX.Element;
|
|
1074
|
+
interface DialogContentProps extends Dialog$1.Popup.Props {
|
|
1075
|
+
/** Keep the dialog mounted in the DOM while hidden. */
|
|
1076
|
+
keepMounted?: boolean;
|
|
1077
|
+
/** Where to portal the dialog; defaults to `<body>`. */
|
|
1078
|
+
container?: Dialog$1.Portal.Props["container"];
|
|
1079
|
+
}
|
|
1080
|
+
declare function DialogContent({ className, children, keepMounted, container, ...props }: DialogContentProps): React$1.JSX.Element;
|
|
1081
|
+
declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
1082
|
+
declare function DialogBody({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
1083
|
+
declare function DialogFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
1084
|
+
declare function DialogTitle({ className, ...props }: Dialog$1.Title.Props): React$1.JSX.Element;
|
|
1085
|
+
declare function DialogDescription({ className, ...props }: Dialog$1.Description.Props): React$1.JSX.Element;
|
|
1086
|
+
//#endregion
|
|
1087
|
+
//#region src/components/command.d.ts
|
|
1088
|
+
/**
|
|
1089
|
+
* Command palette on cmdk, styled like DropdownMenu.
|
|
1090
|
+
*
|
|
1091
|
+
* cmdk filters and ranks items itself from each item's text (or `value` /
|
|
1092
|
+
* `keywords`); `CommandEmpty` renders when nothing matches. The selected
|
|
1093
|
+
* (keyboard-highlighted) item carries `data-selected="true"`; `onSelect` on
|
|
1094
|
+
* `CommandItem` fires on click and on Enter.
|
|
1095
|
+
*
|
|
1096
|
+
* `CommandDialog` puts a palette inside our Dialog with no header padding;
|
|
1097
|
+
* it needs a `title` (visually hidden) so the dialog is labelled. Wire
|
|
1098
|
+
* `open` / `onOpenChange` to a global shortcut (⌘K) for the usual pattern.
|
|
1099
|
+
*/
|
|
1100
|
+
declare function Command({ className, ...props }: React$1.ComponentProps<typeof Command$1>): React$1.JSX.Element;
|
|
1101
|
+
interface CommandDialogProps extends React$1.ComponentProps<typeof Dialog> {
|
|
1102
|
+
/** Accessible name for the dialog; visually hidden. */
|
|
1103
|
+
title?: string;
|
|
1104
|
+
/** Accessible description for the dialog; visually hidden. */
|
|
1105
|
+
description?: string;
|
|
1106
|
+
/** Class for the dialog popup. */
|
|
1107
|
+
className?: string;
|
|
1108
|
+
/** Class for the inner Command root. */
|
|
1109
|
+
commandClassName?: string;
|
|
1110
|
+
/** Where to portal the dialog; defaults to `<body>`. */
|
|
1111
|
+
container?: DialogContentProps["container"];
|
|
1112
|
+
/** Keep the dialog mounted in the DOM while hidden. */
|
|
1113
|
+
keepMounted?: boolean;
|
|
1114
|
+
/** Props for the inner cmdk root (`filter`, `shouldFilter`, `loop`, `value`, ...). */
|
|
1115
|
+
commandProps?: Omit<React$1.ComponentProps<typeof Command$1>, "children" | "className">;
|
|
1116
|
+
children?: React$1.ReactNode;
|
|
1117
|
+
}
|
|
1118
|
+
declare function CommandDialog({ title, description, className, commandClassName, container, keepMounted, commandProps, children, ...props }: CommandDialogProps): React$1.JSX.Element;
|
|
1119
|
+
declare function CommandInput({ className, ...props }: React$1.ComponentProps<typeof Command$1.Input>): React$1.JSX.Element;
|
|
1120
|
+
declare function CommandList({ className, ...props }: React$1.ComponentProps<typeof Command$1.List>): React$1.JSX.Element;
|
|
1121
|
+
declare function CommandEmpty({ className, ...props }: React$1.ComponentProps<typeof Command$1.Empty>): React$1.JSX.Element;
|
|
1122
|
+
declare function CommandGroup({ className, ...props }: React$1.ComponentProps<typeof Command$1.Group>): React$1.JSX.Element;
|
|
1123
|
+
declare function CommandSeparator({ className, ...props }: React$1.ComponentProps<typeof Command$1.Separator>): React$1.JSX.Element;
|
|
1124
|
+
interface CommandItemProps extends React$1.ComponentProps<typeof Command$1.Item> {
|
|
1125
|
+
variant?: "default" | "destructive";
|
|
1126
|
+
}
|
|
1127
|
+
declare function CommandItem({ className, variant, ...props }: CommandItemProps): React$1.JSX.Element;
|
|
1128
|
+
declare function CommandShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
|
|
1129
|
+
declare function CommandLoading(props: React$1.ComponentProps<typeof Command$1.Loading>): React$1.JSX.Element;
|
|
1130
|
+
//#endregion
|
|
1131
|
+
//#region src/components/date-field.d.ts
|
|
1132
|
+
/** `2026-01-05`. */
|
|
1133
|
+
declare function formatDateISO(date: Date): string;
|
|
1134
|
+
/** `5 Jan 2026` for en-GB; other locales via `Intl.DateTimeFormat`. */
|
|
1135
|
+
declare function formatDateShort(date: Date, locale?: string): string;
|
|
1136
|
+
/** `5 January 2026` for en-GB; other locales via `Intl.DateTimeFormat`. */
|
|
1137
|
+
declare function formatDateLong(date: Date, locale?: string): string;
|
|
1138
|
+
/**
|
|
1139
|
+
* Calendar-day distance in words: `today`, `yesterday`, `tomorrow`, `3 days
|
|
1140
|
+
* ago`, `in 2 weeks`, `4 months ago`, `in 2 years`. Compares local calendar
|
|
1141
|
+
* days, so 23:59 to 00:01 is `tomorrow`. Other locales use
|
|
1142
|
+
* `Intl.RelativeTimeFormat`.
|
|
1143
|
+
*/
|
|
1144
|
+
declare function formatRelative(date: Date, options?: {
|
|
1145
|
+
now?: Date;
|
|
1146
|
+
locale?: string;
|
|
1147
|
+
}): string;
|
|
1148
|
+
/** Strict `yyyy-mm-dd`; rejects impossible days such as `2026-02-30`. */
|
|
1149
|
+
declare function parseDateISO(text: string): Date | undefined;
|
|
1150
|
+
/** ISO first, then the English `5 Jan 2026` / `5 January 2026` shapes. */
|
|
1151
|
+
declare function parseDateDefault(text: string): Date | undefined;
|
|
1152
|
+
type CalendarPassthrough$1 = Omit<CalendarProps, "mode" | "selected" | "onSelect" | "required" | "disabled">;
|
|
1153
|
+
interface DateFieldProps extends Omit<React$1.ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "min" | "max" | "type"> {
|
|
1154
|
+
/** The date (controlled). */
|
|
1155
|
+
value?: Date | undefined;
|
|
1156
|
+
/** The initial date (uncontrolled). */
|
|
1157
|
+
defaultValue?: Date | undefined;
|
|
1158
|
+
/** Called with the parsed or picked date, or `undefined` when the text is cleared or invalid. */
|
|
1159
|
+
onValueChange?: (date: Date | undefined) => void;
|
|
1160
|
+
/** Input placeholder; defaults to the ISO shape. */
|
|
1161
|
+
placeholder?: string;
|
|
1162
|
+
/** Formats the date into the input; defaults to ISO `yyyy-mm-dd`. */
|
|
1163
|
+
formatDate?: (date: Date) => string;
|
|
1164
|
+
/** Parses typed text; defaults to ISO plus the English day-month-year shapes. */
|
|
1165
|
+
parseDate?: (text: string) => Date | undefined;
|
|
1166
|
+
/** Earliest selectable day. */
|
|
1167
|
+
min?: Date;
|
|
1168
|
+
/** Latest selectable day. */
|
|
1169
|
+
max?: Date;
|
|
1170
|
+
disabled?: boolean;
|
|
1171
|
+
/** Force the invalid look (e.g. from a form validator). */
|
|
1172
|
+
invalid?: boolean;
|
|
1173
|
+
/** Extra props for the Calendar (e.g. `captionLayout`, `today`). */
|
|
1174
|
+
calendarProps?: CalendarPassthrough$1;
|
|
1175
|
+
/** Class name for the wrapper; use `className` for the input itself. */
|
|
1176
|
+
wrapperClassName?: string;
|
|
1177
|
+
}
|
|
1178
|
+
declare function DateField(props: DateFieldProps): React$1.JSX.Element;
|
|
1179
|
+
//#endregion
|
|
1180
|
+
//#region src/components/date-picker.d.ts
|
|
1181
|
+
/** en-GB order, no library: `15 January 2026`. */
|
|
1182
|
+
declare function formatDateDefault(date: Date): string;
|
|
1183
|
+
type CalendarPassthrough = Omit<CalendarProps, "mode" | "selected" | "onSelect" | "required" | "disabled">;
|
|
1184
|
+
interface DatePickerProps {
|
|
1185
|
+
/** The selected date (controlled). */
|
|
1186
|
+
value?: Date | undefined;
|
|
1187
|
+
/** The initial date (uncontrolled). */
|
|
1188
|
+
defaultValue?: Date | undefined;
|
|
1189
|
+
/** Called with the picked date, or `undefined` when the selected day is clicked again. */
|
|
1190
|
+
onValueChange?: (date: Date | undefined) => void;
|
|
1191
|
+
/** Trigger text while nothing is selected. */
|
|
1192
|
+
placeholder?: string;
|
|
1193
|
+
/** Formats the trigger text; defaults to `15 January 2026`. */
|
|
1194
|
+
formatDate?: (date: Date) => string;
|
|
1195
|
+
/** Disables the trigger. */
|
|
1196
|
+
disabled?: boolean;
|
|
1197
|
+
/** Class name for the trigger button. */
|
|
1198
|
+
className?: string;
|
|
1199
|
+
/** Extra props for the Calendar (e.g. `startMonth`, `captionLayout`, `disabled` matchers via `calendarProps.hidden`). */
|
|
1200
|
+
calendarProps?: CalendarPassthrough & {
|
|
1201
|
+
disabled?: CalendarProps["disabled"];
|
|
1202
|
+
};
|
|
1203
|
+
/** Accessible name for the trigger. */
|
|
1204
|
+
"aria-label"?: string;
|
|
1205
|
+
}
|
|
1206
|
+
declare function DatePicker(props: DatePickerProps): React$1.JSX.Element;
|
|
1207
|
+
interface DateRangePickerProps extends Omit<DatePickerProps, "value" | "defaultValue" | "onValueChange"> {
|
|
1208
|
+
value?: DateRange | undefined;
|
|
1209
|
+
defaultValue?: DateRange | undefined;
|
|
1210
|
+
onValueChange?: (range: DateRange | undefined) => void;
|
|
1211
|
+
/** Separator between the two ends; defaults to an en dash. */
|
|
1212
|
+
separator?: string;
|
|
1213
|
+
}
|
|
1214
|
+
declare function DateRangePicker(props: DateRangePickerProps): React$1.JSX.Element;
|
|
1215
|
+
//#endregion
|
|
1216
|
+
//#region src/components/dropdown-menu.d.ts
|
|
1217
|
+
/**
|
|
1218
|
+
* DropdownMenu over Base UI's Menu.
|
|
1219
|
+
*
|
|
1220
|
+
* `DropdownMenuContent` and `DropdownMenuSubContent` compose Portal +
|
|
1221
|
+
* Positioner + Popup, so consumers keep writing one element; `side`, `align`
|
|
1222
|
+
* and `sideOffset` are forwarded to the Positioner where Base UI reads them.
|
|
1223
|
+
*
|
|
1224
|
+
* Radix users: `asChild` on the trigger becomes `render={<Button />}`;
|
|
1225
|
+
* `onSelect` on items is `onClick`; `DropdownMenuLabel` is Base UI's
|
|
1226
|
+
* `Menu.GroupLabel` (place it inside a `DropdownMenuGroup` for the
|
|
1227
|
+
* `aria-labelledby` wiring); `DropdownMenuCheckboxItem` reports through
|
|
1228
|
+
* `onCheckedChange(checked, eventDetails)`; `DropdownMenuRadioGroup` through
|
|
1229
|
+
* `onValueChange(value, eventDetails)`. Highlight state is `data-highlighted`,
|
|
1230
|
+
* not `:focus`.
|
|
1231
|
+
*/
|
|
1232
|
+
declare function DropdownMenu(props: Menu.Root.Props): React$1.JSX.Element;
|
|
1233
|
+
declare function DropdownMenuTrigger(props: Menu.Trigger.Props): React$1.JSX.Element;
|
|
1234
|
+
declare function DropdownMenuPortal(props: Menu.Portal.Props): React$1.JSX.Element;
|
|
1235
|
+
declare function DropdownMenuGroup(props: Menu.Group.Props): React$1.JSX.Element;
|
|
1236
|
+
declare function DropdownMenuSub(props: Menu.SubmenuRoot.Props): React$1.JSX.Element;
|
|
1237
|
+
declare function DropdownMenuRadioGroup(props: Menu.RadioGroup.Props): React$1.JSX.Element;
|
|
1238
|
+
type PositionerProps$3 = Pick<Menu.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
|
|
1239
|
+
interface DropdownMenuContentProps extends Menu.Popup.Props, PositionerProps$3 {
|
|
1240
|
+
/** Keep the menu mounted in the DOM while hidden. */
|
|
1241
|
+
keepMounted?: boolean;
|
|
1242
|
+
/** Where to portal the menu; defaults to `<body>`. */
|
|
1243
|
+
container?: Menu.Portal.Props["container"];
|
|
1244
|
+
}
|
|
1245
|
+
declare function DropdownMenuContent({ className, side, align, sideOffset, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }: DropdownMenuContentProps): React$1.JSX.Element;
|
|
1246
|
+
declare function DropdownMenuSubContent({ className, side, align, sideOffset, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }: DropdownMenuContentProps): React$1.JSX.Element;
|
|
1247
|
+
interface DropdownMenuItemProps extends Menu.Item.Props {
|
|
1248
|
+
inset?: boolean;
|
|
1249
|
+
variant?: "default" | "destructive";
|
|
1250
|
+
}
|
|
1251
|
+
declare function DropdownMenuItem({ className, inset, variant, ...props }: DropdownMenuItemProps): React$1.JSX.Element;
|
|
1252
|
+
declare function DropdownMenuCheckboxItem({ className, children, ...props }: Menu.CheckboxItem.Props): React$1.JSX.Element;
|
|
1253
|
+
declare function DropdownMenuRadioItem({ className, children, ...props }: Menu.RadioItem.Props): React$1.JSX.Element;
|
|
1254
|
+
interface DropdownMenuLabelProps extends Menu.GroupLabel.Props {
|
|
1255
|
+
inset?: boolean;
|
|
1256
|
+
}
|
|
1257
|
+
declare function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps): React$1.JSX.Element;
|
|
1258
|
+
declare function DropdownMenuSeparator({ className, ...props }: Menu.Separator.Props): React$1.JSX.Element;
|
|
1259
|
+
interface DropdownMenuSubTriggerProps extends Menu.SubmenuTrigger.Props {
|
|
1260
|
+
inset?: boolean;
|
|
1261
|
+
}
|
|
1262
|
+
declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: DropdownMenuSubTriggerProps): React$1.JSX.Element;
|
|
1263
|
+
declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
|
|
1264
|
+
//#endregion
|
|
1265
|
+
//#region src/components/dropzone.d.ts
|
|
1266
|
+
/** `1536` → `1.5 KB`, `0` → `0 B`; base 1024, one decimal above bytes. */
|
|
1267
|
+
declare function formatFileSize(bytes: number): string;
|
|
1268
|
+
interface DropzoneProps extends Omit<React$1.ComponentProps<"div">, "children" | "onDrop" | "onDragEnter" | "onDragOver" | "onDragLeave"> {
|
|
1269
|
+
/** Called with the accepted files after a drop, a paste or the file dialog. */
|
|
1270
|
+
onFiles: (files: File[]) => void;
|
|
1271
|
+
/** Called with the rejected files and their reasons. */
|
|
1272
|
+
onReject?: (rejections: FileRejection[]) => void;
|
|
1273
|
+
/** MIME type to extension map, e.g. `{ "image/png": [".png"] }`. */
|
|
1274
|
+
accept?: Accept;
|
|
1275
|
+
/** Allow more than one file; defaults to true. */
|
|
1276
|
+
multiple?: boolean;
|
|
1277
|
+
/** Largest accepted file in bytes. */
|
|
1278
|
+
maxSize?: number;
|
|
1279
|
+
/** Most files accepted per drop; `0` means unlimited. */
|
|
1280
|
+
maxFiles?: number;
|
|
1281
|
+
disabled?: boolean;
|
|
1282
|
+
/** Primary line of the default body. */
|
|
1283
|
+
label?: React$1.ReactNode;
|
|
1284
|
+
/** Muted second line of the default body; derived from `accept` and `maxSize` when omitted. */
|
|
1285
|
+
hint?: React$1.ReactNode;
|
|
1286
|
+
/** Replace the default body. A function receives react-dropzone's state. */
|
|
1287
|
+
children?: React$1.ReactNode | ((state: DropzoneState) => React$1.ReactNode);
|
|
1288
|
+
}
|
|
1289
|
+
declare function Dropzone({ onFiles, onReject, accept, multiple, maxSize, maxFiles, disabled, label, hint, children, className, ref, ...props }: DropzoneProps): React$1.JSX.Element;
|
|
1290
|
+
interface FileListProps extends Omit<React$1.ComponentProps<"ul">, "children"> {
|
|
1291
|
+
files: readonly File[];
|
|
1292
|
+
/** Called with the file and its index when its remove button is pressed; the button is hidden when omitted. */
|
|
1293
|
+
onRemove?: (file: File, index: number) => void;
|
|
1294
|
+
/** Formats the size column; defaults to `formatFileSize`. */
|
|
1295
|
+
formatSize?: (bytes: number) => string;
|
|
1296
|
+
}
|
|
1297
|
+
/**
|
|
1298
|
+
* The files a Dropzone picked: name, size and a remove button per row. Rows
|
|
1299
|
+
* are keyed by name, size and last-modified time so re-picking the same file
|
|
1300
|
+
* keeps its row stable.
|
|
1301
|
+
*/
|
|
1302
|
+
declare function FileList({ files, onRemove, formatSize, className, ...props }: FileListProps): React$1.JSX.Element | null;
|
|
1303
|
+
//#endregion
|
|
1304
|
+
//#region src/components/empty-state.d.ts
|
|
1305
|
+
interface EmptyStateProps extends Omit<React$1.ComponentProps<"div">, "title"> {
|
|
1306
|
+
/** A lucide icon; sized and coloured by the state. */
|
|
1307
|
+
icon?: React$1.ReactNode;
|
|
1308
|
+
title: React$1.ReactNode;
|
|
1309
|
+
description?: React$1.ReactNode;
|
|
1310
|
+
/** One or two buttons offering the next step. */
|
|
1311
|
+
action?: React$1.ReactNode;
|
|
1312
|
+
/** `compact` for an empty panel inside a card; `default` for an empty page. */
|
|
1313
|
+
size?: "default" | "compact";
|
|
1314
|
+
}
|
|
1315
|
+
/**
|
|
1316
|
+
* EmptyState — the centred, muted "nothing here yet" surface. The icon sits
|
|
1317
|
+
* in a soft disc on the muted token; the title stays in the foreground so the
|
|
1318
|
+
* eye lands on it, and everything else recedes.
|
|
1319
|
+
*/
|
|
1320
|
+
declare function EmptyState({ className, icon, title, description, action, size, children, ...props }: EmptyStateProps): React$1.JSX.Element;
|
|
1321
|
+
//#endregion
|
|
1322
|
+
//#region src/components/error-banner.d.ts
|
|
1323
|
+
interface ErrorBannerProps extends Omit<React$1.ComponentProps<"div">, "children"> {
|
|
1324
|
+
message: string;
|
|
1325
|
+
onDismiss?: () => void;
|
|
1326
|
+
onRetry?: () => void;
|
|
1327
|
+
}
|
|
1328
|
+
/**
|
|
1329
|
+
* ErrorBanner — the one error surface every screen uses: a warning icon, the
|
|
1330
|
+
* message, and optional Retry / Dismiss actions. Renders nothing for an empty
|
|
1331
|
+
* message so callers can pass their error state straight through.
|
|
1332
|
+
*/
|
|
1333
|
+
declare function ErrorBanner({ message, onDismiss, onRetry, className, ...props }: ErrorBannerProps): React$1.JSX.Element | null;
|
|
1334
|
+
//#endregion
|
|
1335
|
+
//#region src/components/field.d.ts
|
|
1336
|
+
/**
|
|
1337
|
+
* Field.
|
|
1338
|
+
*
|
|
1339
|
+
* The shadcn Field shape over Base UI's Field and Fieldset. `Field` is
|
|
1340
|
+
* `Field.Root`: it owns the label/control/description/error association, so a
|
|
1341
|
+
* `FieldLabel` focuses its `FieldControl` (or any Base UI control such as
|
|
1342
|
+
* Checkbox, Select, Switch) without an explicit `htmlFor`, and every message
|
|
1343
|
+
* ends up in the control's `aria-describedby`.
|
|
1344
|
+
*
|
|
1345
|
+
* Validity: Base UI puts `data-invalid` on every part once the control fails
|
|
1346
|
+
* native constraints or a `validate` callback, and adds `aria-invalid` to the
|
|
1347
|
+
* control. Pass `invalid` on `Field` when an external library owns the state
|
|
1348
|
+
* (the Form component does this from react-hook-form).
|
|
1349
|
+
*
|
|
1350
|
+
* `FieldError` follows the field's validity: static children show once the
|
|
1351
|
+
* control is invalid or the Field is marked `invalid`; `match="valueMissing"`
|
|
1352
|
+
* narrows that to one constraint. Given `errors` (a react-hook-form error
|
|
1353
|
+
* list) it renders whenever the list has a message.
|
|
1354
|
+
*/
|
|
1355
|
+
declare const fieldVariants: (props?: ({
|
|
1356
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
1357
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
1358
|
+
interface FieldProps extends React$1.ComponentProps<typeof Field$1.Root>, VariantProps<typeof fieldVariants> {}
|
|
1359
|
+
declare function Field({ className, orientation, invalid, ...props }: FieldProps): React$1.JSX.Element;
|
|
1360
|
+
/** Stacks a label and description beside a control in a horizontal Field. */
|
|
1361
|
+
declare function FieldContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
1362
|
+
interface FieldLabelProps extends React$1.ComponentProps<typeof Field$1.Label> {}
|
|
1363
|
+
declare function FieldLabel({ className, ...props }: FieldLabelProps): React$1.JSX.Element;
|
|
1364
|
+
interface FieldControlProps extends React$1.ComponentProps<typeof Field$1.Control> {}
|
|
1365
|
+
/**
|
|
1366
|
+
* The field's `<input>`, styled like Input. Swap the element with `render`
|
|
1367
|
+
* (`render={<Textarea />}`); the input styling still applies unless the
|
|
1368
|
+
* rendered element's own className wins in tailwind-merge.
|
|
1369
|
+
*/
|
|
1370
|
+
declare function FieldControl({ className, ...props }: FieldControlProps): React$1.JSX.Element;
|
|
1371
|
+
interface FieldDescriptionProps extends React$1.ComponentProps<typeof Field$1.Description> {}
|
|
1372
|
+
declare function FieldDescription({ className, ...props }: FieldDescriptionProps): React$1.JSX.Element;
|
|
1373
|
+
/** The shape react-hook-form gives for a field error; only `message` is read. */
|
|
1374
|
+
interface FieldErrorItem {
|
|
1375
|
+
message?: string | undefined;
|
|
1376
|
+
}
|
|
1377
|
+
interface FieldErrorProps extends React$1.ComponentProps<typeof Field$1.Error> {
|
|
1378
|
+
/**
|
|
1379
|
+
* Errors from an external validator. Duplicate messages collapse; one message
|
|
1380
|
+
* renders as text, several as a list.
|
|
1381
|
+
*/
|
|
1382
|
+
errors?: ReadonlyArray<FieldErrorItem | undefined> | undefined;
|
|
1383
|
+
}
|
|
1384
|
+
declare function FieldError({ className, children, errors, match, ...props }: FieldErrorProps): React$1.JSX.Element | null;
|
|
1385
|
+
interface FieldsetProps extends React$1.ComponentProps<typeof Fieldset$1.Root> {}
|
|
1386
|
+
declare function Fieldset({ className, ...props }: FieldsetProps): React$1.JSX.Element;
|
|
1387
|
+
interface FieldsetLegendProps extends React$1.ComponentProps<typeof Fieldset$1.Legend> {}
|
|
1388
|
+
declare function FieldsetLegend({ className, ...props }: FieldsetLegendProps): React$1.JSX.Element;
|
|
1389
|
+
/** A vertical stack of Fields with the spacing a form uses between rows. */
|
|
1390
|
+
declare function FieldGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
1391
|
+
//#endregion
|
|
1392
|
+
//#region src/components/form.d.ts
|
|
1393
|
+
declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
|
|
1394
|
+
declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues>(props: ControllerProps<TFieldValues, TName, TTransformedValues>): React$1.JSX.Element;
|
|
1395
|
+
interface UseFormFieldReturn {
|
|
1396
|
+
id: string;
|
|
1397
|
+
name: string;
|
|
1398
|
+
formItemId: string;
|
|
1399
|
+
formDescriptionId: string;
|
|
1400
|
+
formMessageId: string;
|
|
1401
|
+
invalid: boolean;
|
|
1402
|
+
isDirty: boolean;
|
|
1403
|
+
isTouched: boolean;
|
|
1404
|
+
isValidating: boolean;
|
|
1405
|
+
error?: FieldError$1 | undefined;
|
|
1406
|
+
}
|
|
1407
|
+
declare function useFormField(): UseFormFieldReturn;
|
|
1408
|
+
interface FormItemProps extends Omit<FieldProps, "invalid" | "name"> {}
|
|
1409
|
+
declare function FormItem({ className, ...props }: FormItemProps): React$1.JSX.Element;
|
|
1410
|
+
interface FormLabelProps extends FieldLabelProps {}
|
|
1411
|
+
declare function FormLabel({ className, ...props }: FormLabelProps): React$1.JSX.Element;
|
|
1412
|
+
interface FormControlProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
1413
|
+
/** The single control element; it receives `id`, `aria-describedby` and `aria-invalid`. */
|
|
1414
|
+
children: React$1.ReactElement;
|
|
1415
|
+
}
|
|
1416
|
+
declare function FormControl({ children, ...props }: FormControlProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
|
|
1417
|
+
interface FormDescriptionProps extends FieldDescriptionProps {}
|
|
1418
|
+
declare function FormDescription({ className, ...props }: FormDescriptionProps): React$1.JSX.Element;
|
|
1419
|
+
interface FormMessageProps extends Omit<FieldErrorProps, "errors" | "match"> {}
|
|
1420
|
+
declare function FormMessage({ className, children, ...props }: FormMessageProps): React$1.JSX.Element | null;
|
|
1421
|
+
//#endregion
|
|
1422
|
+
//#region src/components/input.d.ts
|
|
1423
|
+
/**
|
|
1424
|
+
* Input.
|
|
1425
|
+
*
|
|
1426
|
+
* A plain `<input>`; Base UI has no primitive for it and none is needed. The
|
|
1427
|
+
* look is cortenaweb's: sunken surface, subtle border that strengthens on hover
|
|
1428
|
+
* and takes the ring colour on focus. `aria-invalid` swaps the border and ring
|
|
1429
|
+
* for the destructive pair so a Field can mark errors without extra classes.
|
|
1430
|
+
*/
|
|
1431
|
+
declare const inputClassName: string;
|
|
1432
|
+
interface InputProps extends React$1.ComponentProps<"input"> {}
|
|
1433
|
+
declare function Input({ className, type, ...props }: InputProps): React$1.JSX.Element;
|
|
1434
|
+
//#endregion
|
|
1435
|
+
//#region src/components/kbd.d.ts
|
|
1436
|
+
/**
|
|
1437
|
+
* Kbd — an inline keyboard-key cap. Mono caption-sm text on the sunken
|
|
1438
|
+
* surface, with a heavier bottom border for the key-cap read.
|
|
1439
|
+
*/
|
|
1440
|
+
declare function Kbd({ className, ...props }: React$1.ComponentProps<"kbd">): React$1.JSX.Element;
|
|
1441
|
+
//#endregion
|
|
1442
|
+
//#region src/components/label.d.ts
|
|
1443
|
+
/**
|
|
1444
|
+
* Label — a plain `<label>`. Base UI's Label lives inside Field, so this is
|
|
1445
|
+
* the standalone form caption for anything that is not a Field.
|
|
1446
|
+
*/
|
|
1447
|
+
declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
1448
|
+
interface LabelProps extends React$1.ComponentProps<"label">, VariantProps<typeof labelVariants> {}
|
|
1449
|
+
declare function Label({ className, ...props }: LabelProps): React$1.JSX.Element;
|
|
1450
|
+
//#endregion
|
|
1451
|
+
//#region src/components/loading-skeleton.d.ts
|
|
1452
|
+
type LoadingSkeletonPreset = "list" | "table" | "card" | "form";
|
|
1453
|
+
interface LoadingSkeletonProps extends React$1.ComponentProps<"div"> {
|
|
1454
|
+
/** Which shape of content is loading. */
|
|
1455
|
+
preset?: LoadingSkeletonPreset;
|
|
1456
|
+
/** Rows (list, table, form) or cards. Each preset has a sensible default. */
|
|
1457
|
+
rows?: number;
|
|
1458
|
+
/** Columns for `table` and `card`. */
|
|
1459
|
+
columns?: number;
|
|
1460
|
+
}
|
|
1461
|
+
/**
|
|
1462
|
+
* LoadingSkeleton — page-level placeholders assembled from Skeleton, one per
|
|
1463
|
+
* shape of content: a list of rows with an avatar, a table with a header row,
|
|
1464
|
+
* a grid of cards, or a stacked form. Announces itself as busy so assistive
|
|
1465
|
+
* technology knows the region is loading; the blocks themselves are hidden.
|
|
1466
|
+
*/
|
|
1467
|
+
declare function LoadingSkeleton({ className, preset, rows, columns, ...props }: LoadingSkeletonProps): React$1.JSX.Element;
|
|
1468
|
+
//#endregion
|
|
1469
|
+
//#region src/components/markdown.d.ts
|
|
1470
|
+
/** The GitHub schema, plus `class="language-*"` on code and `checked` on task boxes. */
|
|
1471
|
+
declare const markdownSanitizeSchema: Options$1;
|
|
1472
|
+
interface CodeRendererProps {
|
|
1473
|
+
/** The fenced block's text, without a trailing newline. */
|
|
1474
|
+
code: string;
|
|
1475
|
+
/** From the fence's info string, e.g. `ts` for ```ts. */
|
|
1476
|
+
language: string | undefined;
|
|
1477
|
+
}
|
|
1478
|
+
interface MarkdownProps extends Omit<React$1.ComponentProps<"div">, "children"> {
|
|
1479
|
+
/** The markdown source. */
|
|
1480
|
+
children: string | null | undefined;
|
|
1481
|
+
/** Tighter rhythm and smaller headings, for chat bubbles. */
|
|
1482
|
+
compact?: boolean;
|
|
1483
|
+
/** Renders fenced code blocks; the copy button is still added. Use for syntax highlighting. */
|
|
1484
|
+
codeRenderer?: (props: CodeRendererProps) => React$1.ReactNode;
|
|
1485
|
+
/** Override or extend the element map. */
|
|
1486
|
+
components?: Components;
|
|
1487
|
+
/** Extra remark plugins, appended after GFM. */
|
|
1488
|
+
remarkPlugins?: NonNullable<Options["remarkPlugins"]>;
|
|
1489
|
+
/** Extra rehype plugins, appended after sanitize. */
|
|
1490
|
+
rehypePlugins?: NonNullable<Options["rehypePlugins"]>;
|
|
1491
|
+
/** Replace the sanitize schema; defaults to `markdownSanitizeSchema`. */
|
|
1492
|
+
sanitizeSchema?: Options$1;
|
|
1493
|
+
/** Rewrite URLs; defaults to react-markdown's, which drops non-http(s)/mailto/tel schemes. */
|
|
1494
|
+
urlTransform?: Options["urlTransform"];
|
|
1495
|
+
}
|
|
1496
|
+
declare function Markdown({ children, compact, codeRenderer, components, remarkPlugins, rehypePlugins, sanitizeSchema, urlTransform, className, ...props }: MarkdownProps): React$1.JSX.Element;
|
|
1497
|
+
//#endregion
|
|
1498
|
+
//#region src/components/page-header.d.ts
|
|
1499
|
+
interface PageHeaderProps extends Omit<React$1.ComponentProps<"header">, "title"> {
|
|
1500
|
+
/** The page title. Rendered as the h1; use `titleAs` to demote it. */
|
|
1501
|
+
title: React$1.ReactNode;
|
|
1502
|
+
description?: React$1.ReactNode;
|
|
1503
|
+
/** Buttons for the page, right-aligned on wide viewports. */
|
|
1504
|
+
actions?: React$1.ReactNode;
|
|
1505
|
+
/** Short uppercase label above the title, e.g. a section or product name. */
|
|
1506
|
+
eyebrow?: React$1.ReactNode;
|
|
1507
|
+
/** A Breadcrumb or any navigation rendered above the eyebrow. */
|
|
1508
|
+
breadcrumb?: React$1.ReactNode;
|
|
1509
|
+
/** Heading level when the page already has an h1. */
|
|
1510
|
+
titleAs?: "h1" | "h2" | "h3";
|
|
1511
|
+
}
|
|
1512
|
+
/**
|
|
1513
|
+
* PageHeader — the top of every screen: breadcrumb, eyebrow, title,
|
|
1514
|
+
* description, and an actions slot. The title is an h1 on the h2 step of the
|
|
1515
|
+
* type scale in the display face, so screens read as one product rather than
|
|
1516
|
+
* as a stack of card titles.
|
|
1517
|
+
*/
|
|
1518
|
+
declare function PageHeader({ className, title, description, actions, eyebrow, breadcrumb, titleAs: Title, children, ...props }: PageHeaderProps): React$1.JSX.Element;
|
|
1519
|
+
//#endregion
|
|
1520
|
+
//#region src/components/popover.d.ts
|
|
1521
|
+
/**
|
|
1522
|
+
* Popover.
|
|
1523
|
+
*
|
|
1524
|
+
* `PopoverContent` composes Base UI's Portal + Positioner + Popup so consumers
|
|
1525
|
+
* keep writing `<PopoverContent side="bottom" align="start">`; the positioning
|
|
1526
|
+
* props are forwarded to the Positioner, which is where Base UI reads them.
|
|
1527
|
+
*
|
|
1528
|
+
* Radix users: `asChild` on the trigger becomes `render={<Button />}`;
|
|
1529
|
+
* `PopoverAnchor` is gone — pass `anchor={ref}` to `PopoverContent` instead.
|
|
1530
|
+
*/
|
|
1531
|
+
declare function Popover(props: Popover$1.Root.Props): import("react").JSX.Element;
|
|
1532
|
+
declare function PopoverTrigger(props: Popover$1.Trigger.Props): import("react").JSX.Element;
|
|
1533
|
+
declare function PopoverClose(props: Popover$1.Close.Props): import("react").JSX.Element;
|
|
1534
|
+
declare function PopoverTitle({ className, ...props }: Popover$1.Title.Props): import("react").JSX.Element;
|
|
1535
|
+
declare function PopoverDescription({ className, ...props }: Popover$1.Description.Props): import("react").JSX.Element;
|
|
1536
|
+
type PositionerProps$2 = Pick<Popover$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
|
|
1537
|
+
interface PopoverContentProps extends Popover$1.Popup.Props, PositionerProps$2 {
|
|
1538
|
+
/** Keep the popup mounted in the DOM while hidden. */
|
|
1539
|
+
keepMounted?: boolean;
|
|
1540
|
+
/** Where to portal the popup; defaults to `<body>`. */
|
|
1541
|
+
container?: Popover$1.Portal.Props["container"];
|
|
1542
|
+
}
|
|
1543
|
+
declare function PopoverContent({ className, side, align, sideOffset, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }: PopoverContentProps): import("react").JSX.Element;
|
|
1544
|
+
//#endregion
|
|
1545
|
+
//#region src/components/progress.d.ts
|
|
1546
|
+
/**
|
|
1547
|
+
* Progress.
|
|
1548
|
+
*
|
|
1549
|
+
* `Progress` renders the Base UI root (a `<div role="progressbar">` carrying
|
|
1550
|
+
* `aria-valuenow`) with the track and indicator already inside; Base UI sizes
|
|
1551
|
+
* the indicator to `value` as a percentage of `min`..`max`. Put a
|
|
1552
|
+
* `ProgressLabel` and `ProgressValue` in `children` for a captioned bar; they
|
|
1553
|
+
* render in a row above the track. `value={null}` gives an indeterminate bar.
|
|
1554
|
+
*/
|
|
1555
|
+
interface ProgressProps extends React$1.ComponentProps<typeof Progress$1.Root> {}
|
|
1556
|
+
declare function Progress({ className, children, ...props }: ProgressProps): React$1.JSX.Element;
|
|
1557
|
+
declare function ProgressTrack({ className, ...props }: React$1.ComponentProps<typeof Progress$1.Track>): React$1.JSX.Element;
|
|
1558
|
+
declare function ProgressIndicator({ className, ...props }: React$1.ComponentProps<typeof Progress$1.Indicator>): React$1.JSX.Element;
|
|
1559
|
+
declare function ProgressLabel({ className, ...props }: React$1.ComponentProps<typeof Progress$1.Label>): React$1.JSX.Element;
|
|
1560
|
+
declare function ProgressValue({ className, ...props }: React$1.ComponentProps<typeof Progress$1.Value>): React$1.JSX.Element;
|
|
1561
|
+
//#endregion
|
|
1562
|
+
//#region src/components/radio-group.d.ts
|
|
1563
|
+
/**
|
|
1564
|
+
* Radio group.
|
|
1565
|
+
*
|
|
1566
|
+
* `RadioGroup` owns the value (`value` / `defaultValue` / `onValueChange`) and
|
|
1567
|
+
* renders a `<div role="radiogroup">`; each `RadioGroupItem` is a Base UI
|
|
1568
|
+
* `Radio.Root` (`<span role="radio">`) with a dot indicator that only mounts
|
|
1569
|
+
* while checked. Arrow keys move the selection, as the ARIA pattern requires.
|
|
1570
|
+
*/
|
|
1571
|
+
interface RadioGroupProps extends React$1.ComponentProps<typeof RadioGroup$1> {}
|
|
1572
|
+
declare function RadioGroup({ className, ...props }: RadioGroupProps): React$1.JSX.Element;
|
|
1573
|
+
interface RadioGroupItemProps extends React$1.ComponentProps<typeof Radio.Root> {}
|
|
1574
|
+
declare function RadioGroupItem({ className, ...props }: RadioGroupItemProps): React$1.JSX.Element;
|
|
1575
|
+
//#endregion
|
|
1576
|
+
//#region src/components/scroll-area.d.ts
|
|
1577
|
+
/**
|
|
1578
|
+
* ScrollArea.
|
|
1579
|
+
*
|
|
1580
|
+
* Base UI positions the scrollbar and thumb itself (absolute inside the root,
|
|
1581
|
+
* thumb size in `--scroll-area-thumb-*`); this file only sets the track width,
|
|
1582
|
+
* the thumb colour and the hover/scroll reveal. Base UI also unmounts the
|
|
1583
|
+
* scrollbar when there is nothing to scroll, so an empty list shows no track.
|
|
1584
|
+
*
|
|
1585
|
+
* Radix users: the `display: table` wrapper is gone, so `truncate` works
|
|
1586
|
+
* inside the viewport without the `[&>div]:!block` override cortenaweb needed.
|
|
1587
|
+
* `type="always" | "hover"` is gone too; the scrollbar shows on hover and while
|
|
1588
|
+
* scrolling, and `keepMounted` on `ScrollBar` keeps it in the DOM otherwise.
|
|
1589
|
+
*/
|
|
1590
|
+
interface ScrollAreaProps extends ScrollArea$1.Root.Props {
|
|
1591
|
+
/** Which scrollbars to render. Defaults to vertical only. */
|
|
1592
|
+
orientation?: "vertical" | "horizontal" | "both";
|
|
1593
|
+
}
|
|
1594
|
+
declare function ScrollArea({ className, children, orientation, ...props }: ScrollAreaProps): import("react").JSX.Element;
|
|
1595
|
+
declare function ScrollBar({ className, orientation, ...props }: ScrollArea$1.Scrollbar.Props): import("react").JSX.Element;
|
|
1596
|
+
//#endregion
|
|
1597
|
+
//#region src/components/section-card.d.ts
|
|
1598
|
+
interface SectionCardProps extends Omit<CardProps, "title"> {
|
|
1599
|
+
title: React$1.ReactNode;
|
|
1600
|
+
description?: React$1.ReactNode;
|
|
1601
|
+
/** Controls for the section, right-aligned in the header row. */
|
|
1602
|
+
actions?: React$1.ReactNode;
|
|
1603
|
+
/** Rendered in a CardFooter under the body. */
|
|
1604
|
+
footer?: React$1.ReactNode;
|
|
1605
|
+
/** Remove the body padding, for a table or list that fills the card. */
|
|
1606
|
+
flush?: boolean;
|
|
1607
|
+
/** Class on the body wrapper. */
|
|
1608
|
+
bodyClassName?: string;
|
|
1609
|
+
}
|
|
1610
|
+
/**
|
|
1611
|
+
* SectionCard — a Card with a header row (title, description, actions), a
|
|
1612
|
+
* body and an optional footer. It composes the Card parts rather than
|
|
1613
|
+
* restyling them, so a SectionCard and a hand-built Card look identical.
|
|
1614
|
+
*/
|
|
1615
|
+
declare function SectionCard({ title, description, actions, footer, flush, bodyClassName, children, ...props }: SectionCardProps): React$1.JSX.Element;
|
|
1616
|
+
//#endregion
|
|
1617
|
+
//#region src/components/segmented.d.ts
|
|
1618
|
+
/**
|
|
1619
|
+
* Segmented control.
|
|
1620
|
+
*
|
|
1621
|
+
* A single-select row of options exposed as a radiogroup: the same semantics
|
|
1622
|
+
* cortenaweb shipped, which screen readers announce as "1 of 3, selected".
|
|
1623
|
+
* The active segment lifts onto the raised surface with the small shadow; the
|
|
1624
|
+
* others read as muted text until hovered.
|
|
1625
|
+
*/
|
|
1626
|
+
interface SegmentedOption<T extends string = string> {
|
|
1627
|
+
value: T;
|
|
1628
|
+
label: React$1.ReactNode;
|
|
1629
|
+
icon?: React$1.ReactNode;
|
|
1630
|
+
disabled?: boolean;
|
|
1631
|
+
}
|
|
1632
|
+
interface SegmentedProps<T extends string = string> extends Omit<React$1.ComponentProps<"div">, "onChange"> {
|
|
1633
|
+
value: T;
|
|
1634
|
+
onValueChange: (value: T) => void;
|
|
1635
|
+
options: readonly SegmentedOption<T>[];
|
|
1636
|
+
"aria-label"?: string;
|
|
1637
|
+
}
|
|
1638
|
+
declare function Segmented<T extends string = string>({ className, value, onValueChange, options, "aria-label": ariaLabel, ...props }: SegmentedProps<T>): React$1.JSX.Element;
|
|
1639
|
+
//#endregion
|
|
1640
|
+
//#region src/components/select.d.ts
|
|
1641
|
+
/**
|
|
1642
|
+
* Select.
|
|
1643
|
+
*
|
|
1644
|
+
* `SelectContent` composes Base UI's Portal + Positioner + Popup so consumers
|
|
1645
|
+
* keep writing `<SelectContent side="bottom" align="start">`; positioning
|
|
1646
|
+
* props are forwarded to the Positioner, which is where Base UI reads them.
|
|
1647
|
+
*
|
|
1648
|
+
* Radix users:
|
|
1649
|
+
* - `SelectValue` shows the raw value unless the Root is given `items`
|
|
1650
|
+
* (`{ [value]: label }` or `[{ value, label }]`) or `itemToStringLabel`;
|
|
1651
|
+
* Base UI does not read the label out of an unmounted `SelectItem`.
|
|
1652
|
+
* - `onValueChange` receives `(value, eventDetails)`.
|
|
1653
|
+
* - `SelectContent` defaults to the dropdown layout; pass
|
|
1654
|
+
* `alignItemWithTrigger` for Base UI's native-like overlay of the selected item.
|
|
1655
|
+
*/
|
|
1656
|
+
declare function Select<Value, Multiple extends boolean | undefined = false>(props: Select$1.Root.Props<Value, Multiple>): import("react").JSX.Element;
|
|
1657
|
+
declare function SelectGroup({ className, ...props }: Select$1.Group.Props): import("react").JSX.Element;
|
|
1658
|
+
declare function SelectValue({ className, ...props }: Select$1.Value.Props): import("react").JSX.Element;
|
|
1659
|
+
interface SelectTriggerProps extends Select$1.Trigger.Props {
|
|
1660
|
+
size?: "sm" | "md";
|
|
1661
|
+
}
|
|
1662
|
+
declare function SelectTrigger({ className, size, children, ...props }: SelectTriggerProps): import("react").JSX.Element;
|
|
1663
|
+
type PositionerProps$1 = Pick<Select$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod" | "alignItemWithTrigger">;
|
|
1664
|
+
interface SelectContentProps extends Select$1.Popup.Props, PositionerProps$1 {
|
|
1665
|
+
/** Where to portal the popup; defaults to `<body>`. */
|
|
1666
|
+
container?: Select$1.Portal.Props["container"];
|
|
1667
|
+
}
|
|
1668
|
+
declare function SelectContent({ className, children, side, align, sideOffset, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, alignItemWithTrigger, container, ...props }: SelectContentProps): import("react").JSX.Element;
|
|
1669
|
+
declare function SelectLabel({ className, ...props }: Select$1.GroupLabel.Props): import("react").JSX.Element;
|
|
1670
|
+
declare function SelectItem({ className, children, ...props }: Select$1.Item.Props): import("react").JSX.Element;
|
|
1671
|
+
declare function SelectSeparator({ className, ...props }: Select$1.Separator.Props): import("react").JSX.Element;
|
|
1672
|
+
//#endregion
|
|
1673
|
+
//#region src/components/separator.d.ts
|
|
1674
|
+
interface SeparatorProps extends React$1.ComponentProps<typeof Separator$1> {
|
|
1675
|
+
/**
|
|
1676
|
+
* Purely visual: renders with `role="none"` so screen readers skip it.
|
|
1677
|
+
* Defaults to true, matching the Radix component this replaces.
|
|
1678
|
+
*/
|
|
1679
|
+
decorative?: boolean;
|
|
1680
|
+
}
|
|
1681
|
+
/**
|
|
1682
|
+
* Separator — a one-pixel rule on the border token. Base UI supplies the
|
|
1683
|
+
* `role="separator"` and `aria-orientation` semantics when not decorative.
|
|
1684
|
+
*/
|
|
1685
|
+
declare function Separator({ className, orientation, decorative, ...props }: SeparatorProps): React$1.JSX.Element;
|
|
1686
|
+
//#endregion
|
|
1687
|
+
//#region src/components/sheet.d.ts
|
|
1688
|
+
/**
|
|
1689
|
+
* Sheet: a Dialog whose Popup is anchored to one edge of the viewport.
|
|
1690
|
+
*
|
|
1691
|
+
* Same Base UI parts as Dialog (Root, Trigger, Portal, Backdrop, Popup, Title,
|
|
1692
|
+
* Description, Close); only the Popup's placement differs, chosen by `side`.
|
|
1693
|
+
* `SheetContent` composes Portal + Backdrop + Popup so consumers keep writing
|
|
1694
|
+
* `<SheetContent side="right">…</SheetContent>`.
|
|
1695
|
+
*/
|
|
1696
|
+
declare function Sheet(props: Dialog$1.Root.Props): React$1.JSX.Element;
|
|
1697
|
+
declare function SheetTrigger(props: Dialog$1.Trigger.Props): React$1.JSX.Element;
|
|
1698
|
+
declare function SheetClose(props: Dialog$1.Close.Props): React$1.JSX.Element;
|
|
1699
|
+
declare function SheetPortal(props: Dialog$1.Portal.Props): React$1.JSX.Element;
|
|
1700
|
+
declare function SheetOverlay({ className, ...props }: Dialog$1.Backdrop.Props): React$1.JSX.Element;
|
|
1701
|
+
declare const sheetVariants: (props?: ({
|
|
1702
|
+
side?: "top" | "bottom" | "left" | "right" | null | undefined;
|
|
1703
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
1704
|
+
interface SheetContentProps extends Dialog$1.Popup.Props, VariantProps<typeof sheetVariants> {
|
|
1705
|
+
/** Keep the sheet mounted in the DOM while hidden. */
|
|
1706
|
+
keepMounted?: boolean;
|
|
1707
|
+
/** Where to portal the sheet; defaults to `<body>`. */
|
|
1708
|
+
container?: Dialog$1.Portal.Props["container"];
|
|
1709
|
+
}
|
|
1710
|
+
declare function SheetContent({ side, className, children, keepMounted, container, ...props }: SheetContentProps): React$1.JSX.Element;
|
|
1711
|
+
declare function SheetHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
1712
|
+
declare function SheetFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
1713
|
+
declare function SheetTitle({ className, ...props }: Dialog$1.Title.Props): React$1.JSX.Element;
|
|
1714
|
+
declare function SheetDescription({ className, ...props }: Dialog$1.Description.Props): React$1.JSX.Element;
|
|
1715
|
+
//#endregion
|
|
1716
|
+
//#region src/components/skeleton.d.ts
|
|
1717
|
+
/**
|
|
1718
|
+
* Skeleton — a pulsing placeholder block. Sized by the consumer (`h-4 w-40`);
|
|
1719
|
+
* the fill is the border token, which reads on the canvas, a card and a
|
|
1720
|
+
* popover in both themes.
|
|
1721
|
+
*/
|
|
1722
|
+
declare function Skeleton({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
1723
|
+
//#endregion
|
|
1724
|
+
//#region src/components/sortable-list.d.ts
|
|
1725
|
+
/**
|
|
1726
|
+
* SortableList.
|
|
1727
|
+
*
|
|
1728
|
+
* A reorderable list over dnd-kit: `DndContext` + `SortableContext` around one
|
|
1729
|
+
* `useSortable` item per entry. The list owns nothing — it calls `onReorder`
|
|
1730
|
+
* with the next array and the consumer stores it. Pointer and keyboard sensors
|
|
1731
|
+
* are wired (Space picks up, arrows move, Space drops, Escape cancels) and a
|
|
1732
|
+
* `DragOverlay` paints the lifted copy with `--ds-shadow-lg` while the item
|
|
1733
|
+
* left behind dims and takes the ring colour.
|
|
1734
|
+
*
|
|
1735
|
+
* By default the whole row is the drag activator. Pass `handle` to restrict
|
|
1736
|
+
* dragging to a `<SortableHandle>` (or any element given `handleProps`) so
|
|
1737
|
+
* buttons and inputs inside a row stay clickable.
|
|
1738
|
+
*/
|
|
1739
|
+
/** Spread onto the element that should start a drag. */
|
|
1740
|
+
interface SortableHandleProps extends Partial<DraggableAttributes> {
|
|
1741
|
+
ref: (element: HTMLElement | null) => void;
|
|
1742
|
+
onKeyDown?: React$1.KeyboardEventHandler<HTMLElement>;
|
|
1743
|
+
onPointerDown?: React$1.PointerEventHandler<HTMLElement>;
|
|
1744
|
+
onMouseDown?: React$1.MouseEventHandler<HTMLElement>;
|
|
1745
|
+
onTouchStart?: React$1.TouchEventHandler<HTMLElement>;
|
|
1746
|
+
}
|
|
1747
|
+
interface SortableRenderState {
|
|
1748
|
+
/** Attributes, listeners and ref for a custom drag handle. */
|
|
1749
|
+
handleProps: SortableHandleProps;
|
|
1750
|
+
/** True for the item being dragged (and for the overlay copy). */
|
|
1751
|
+
isDragging: boolean;
|
|
1752
|
+
}
|
|
1753
|
+
interface SortableListProps<T> extends Omit<React$1.ComponentProps<"ul">, "children"> {
|
|
1754
|
+
items: readonly T[];
|
|
1755
|
+
/** Stable id per item; must be unique within the list. */
|
|
1756
|
+
getId: (item: T) => UniqueIdentifier;
|
|
1757
|
+
/** Called with the reordered array after a successful drop. */
|
|
1758
|
+
onReorder: (next: T[]) => void;
|
|
1759
|
+
renderItem: (item: T, state: SortableRenderState) => React$1.ReactNode;
|
|
1760
|
+
/** Layout axis; also selects the sorting strategy. */
|
|
1761
|
+
orientation?: "vertical" | "horizontal";
|
|
1762
|
+
/** Only a `<SortableHandle>` (or an element given `handleProps`) starts a drag. */
|
|
1763
|
+
handle?: boolean;
|
|
1764
|
+
/** Disables every sensor and hides the handles. */
|
|
1765
|
+
disabled?: boolean;
|
|
1766
|
+
/** Class name for each item wrapper. */
|
|
1767
|
+
itemClassName?: string;
|
|
1768
|
+
}
|
|
1769
|
+
/**
|
|
1770
|
+
* A grip button that starts the drag for its row. Reads the row's activator
|
|
1771
|
+
* props from context, so it needs no wiring beyond being rendered inside
|
|
1772
|
+
* `renderItem`. Hidden (kept in layout) when the list is disabled.
|
|
1773
|
+
*/
|
|
1774
|
+
declare function SortableHandle({ className, children, ...props }: React$1.ComponentProps<"button">): React$1.JSX.Element;
|
|
1775
|
+
declare function SortableList<T>({ items, getId, onReorder, renderItem, orientation, handle, disabled, itemClassName: itemClass, className, ...props }: SortableListProps<T>): React$1.JSX.Element;
|
|
1776
|
+
//#endregion
|
|
1777
|
+
//#region src/components/spinner.d.ts
|
|
1778
|
+
interface SpinnerProps extends React$1.ComponentProps<"span"> {
|
|
1779
|
+
/** Diameter in px. Defaults to 16. */
|
|
1780
|
+
size?: number;
|
|
1781
|
+
}
|
|
1782
|
+
/**
|
|
1783
|
+
* Spinner — a ring with a primary-coloured leading edge. Announces itself as
|
|
1784
|
+
* `role="status"` with a "Loading" label; pass `aria-label` to override.
|
|
1785
|
+
*/
|
|
1786
|
+
declare function Spinner({ className, size, style, ...props }: SpinnerProps): React$1.JSX.Element;
|
|
1787
|
+
//#endregion
|
|
1788
|
+
//#region src/components/status-dot.d.ts
|
|
1789
|
+
type StatusDotTone = "accent" | "success" | "warning" | "danger" | "info" | "neutral";
|
|
1790
|
+
interface StatusDotProps extends Omit<React$1.ComponentProps<"span">, "children"> {
|
|
1791
|
+
tone?: StatusDotTone;
|
|
1792
|
+
/** Adds a pinging halo behind the dot for "currently active" states. */
|
|
1793
|
+
live?: boolean;
|
|
1794
|
+
label?: React$1.ReactNode;
|
|
1795
|
+
/** Dot diameter in px. Defaults to 7. */
|
|
1796
|
+
size?: number;
|
|
1797
|
+
}
|
|
1798
|
+
/**
|
|
1799
|
+
* StatusDot — a coloured dot with an optional caption. `live` layers a ping
|
|
1800
|
+
* ring in the same tone behind the dot.
|
|
1801
|
+
*/
|
|
1802
|
+
declare function StatusDot({ className, tone, live, label, size, style, ...props }: StatusDotProps): React$1.JSX.Element;
|
|
1803
|
+
//#endregion
|
|
1804
|
+
//#region src/components/switch.d.ts
|
|
1805
|
+
/**
|
|
1806
|
+
* Switch.
|
|
1807
|
+
*
|
|
1808
|
+
* Base UI renders a `<span role="switch">` with a hidden `<input>` beside it,
|
|
1809
|
+
* so the control submits with forms and takes `checked`/`defaultChecked`
|
|
1810
|
+
* exactly like a checkbox. State is exposed as `data-checked` /
|
|
1811
|
+
* `data-unchecked` / `data-disabled`, which is what the classes key on.
|
|
1812
|
+
*
|
|
1813
|
+
* cortenaweb users: `checked` and `onCheckedChange` keep their names, but the
|
|
1814
|
+
* control is now uncontrolled by default; pass `defaultChecked` if you do not
|
|
1815
|
+
* hold the state yourself.
|
|
1816
|
+
*/
|
|
1817
|
+
interface SwitchProps extends React$1.ComponentProps<typeof Switch$1.Root> {}
|
|
1818
|
+
declare function Switch({ className, ...props }: SwitchProps): React$1.JSX.Element;
|
|
1819
|
+
//#endregion
|
|
1820
|
+
//#region src/components/tabs.d.ts
|
|
1821
|
+
/**
|
|
1822
|
+
* Tabs — the underlined pattern (primary-coloured underline under the active
|
|
1823
|
+
* tab). For the inset segmented style use Segmented.
|
|
1824
|
+
*
|
|
1825
|
+
* The underline is a Base UI `Tabs.Indicator` rendered inside `TabsList`, so it
|
|
1826
|
+
* slides between tabs instead of snapping. Base UI exposes the active tab's
|
|
1827
|
+
* box as `--active-tab-left` / `--active-tab-width` on the indicator.
|
|
1828
|
+
*
|
|
1829
|
+
* Radix users: `data-state="active"` is now `data-active`; `TabsTrigger` and
|
|
1830
|
+
* `TabsContent` are Base UI's `Tab` and `Panel` under the shadcn names. Arrow
|
|
1831
|
+
* keys activate as they move (Radix's `activationMode="automatic"`); pass
|
|
1832
|
+
* `activateOnFocus={false}` on `TabsList` for manual activation.
|
|
1833
|
+
*/
|
|
1834
|
+
declare function Tabs({ className, ...props }: Tabs$1.Root.Props): import("react").JSX.Element;
|
|
1835
|
+
declare function TabsList({ className, children, activateOnFocus, ...props }: Tabs$1.List.Props): import("react").JSX.Element;
|
|
1836
|
+
declare function TabsIndicator({ className, ...props }: Tabs$1.Indicator.Props): import("react").JSX.Element;
|
|
1837
|
+
declare function TabsTrigger({ className, ...props }: Tabs$1.Tab.Props): import("react").JSX.Element;
|
|
1838
|
+
declare function TabsContent({ className, ...props }: Tabs$1.Panel.Props): import("react").JSX.Element;
|
|
1839
|
+
//#endregion
|
|
1840
|
+
//#region src/components/textarea.d.ts
|
|
1841
|
+
/**
|
|
1842
|
+
* Textarea.
|
|
1843
|
+
*
|
|
1844
|
+
* Same surface, border, focus ring and invalid state as Input so the two sit
|
|
1845
|
+
* together in a form. `autoGrow` resizes the element to its content on every
|
|
1846
|
+
* change (and on mount), which is how chat composers and note fields use it.
|
|
1847
|
+
*/
|
|
1848
|
+
declare const textareaClassName: string;
|
|
1849
|
+
interface TextareaProps extends React$1.ComponentProps<"textarea"> {
|
|
1850
|
+
/** When true the textarea grows to fit its content instead of scrolling. */
|
|
1851
|
+
autoGrow?: boolean;
|
|
1852
|
+
}
|
|
1853
|
+
declare function Textarea({ className, autoGrow, onChange, ref, ...props }: TextareaProps): React$1.JSX.Element;
|
|
1854
|
+
//#endregion
|
|
1855
|
+
//#region src/components/toast.d.ts
|
|
1856
|
+
/**
|
|
1857
|
+
* Toast.
|
|
1858
|
+
*
|
|
1859
|
+
* Base UI toasts are imperative: `useToast().add({ title, description, type })`
|
|
1860
|
+
* from anywhere under the provider. `Toaster` mounts `Toast.Provider` and the
|
|
1861
|
+
* `Toast.Viewport`, and renders every toast the manager holds, so it must wrap
|
|
1862
|
+
* the part of the tree that calls `useToast` (usually the whole app).
|
|
1863
|
+
*
|
|
1864
|
+
* The `type` field on a toast picks the variant: `default`, `success`,
|
|
1865
|
+
* `warning` or `destructive`, painted from the semantic soft tokens. Anything
|
|
1866
|
+
* else falls back to `default`.
|
|
1867
|
+
*
|
|
1868
|
+
* sonner / Radix users: there is no `toast()` module singleton. Get the manager
|
|
1869
|
+
* from `useToast()` inside a component, or build one with
|
|
1870
|
+
* `createToastManager()` from `@base-ui/react/toast` and pass it as
|
|
1871
|
+
* `toastManager` to `Toaster` when you need to fire toasts outside React.
|
|
1872
|
+
*/
|
|
1873
|
+
declare const toastVariants: (props?: ({
|
|
1874
|
+
variant?: "destructive" | "default" | "success" | "warning" | null | undefined;
|
|
1875
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
1876
|
+
/** The Base UI toast manager: `{ toasts, add, close, update, promise }`. */
|
|
1877
|
+
declare const useToast: typeof Toast$1.useToastManager;
|
|
1878
|
+
interface ToastProps extends Omit<Toast$1.Root.Props, "toast">, VariantProps<typeof toastVariants> {
|
|
1879
|
+
toast: Toast$1.Root.ToastObject;
|
|
1880
|
+
}
|
|
1881
|
+
/** One toast. Rendered by `Toaster`; exported for custom viewports. */
|
|
1882
|
+
declare function Toast({ className, variant, toast, ...props }: ToastProps): React$1.JSX.Element;
|
|
1883
|
+
interface ToasterProps extends Toast$1.Provider.Props {
|
|
1884
|
+
/** Corner of the screen the stack grows from. */
|
|
1885
|
+
position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
|
|
1886
|
+
/** Extra classes on the viewport. */
|
|
1887
|
+
className?: string;
|
|
1888
|
+
children?: React$1.ReactNode;
|
|
1889
|
+
}
|
|
1890
|
+
/**
|
|
1891
|
+
* Provider + viewport. Wrap the app in it once; `useToast()` works anywhere
|
|
1892
|
+
* beneath. Toasts render in a fixed corner as a flat stack (newest last).
|
|
1893
|
+
*/
|
|
1894
|
+
declare function Toaster({ position, className, children, ...props }: ToasterProps): React$1.JSX.Element;
|
|
1895
|
+
//#endregion
|
|
1896
|
+
//#region src/components/toolbar.d.ts
|
|
1897
|
+
interface ToolbarProps extends React$1.ComponentProps<"div"> {
|
|
1898
|
+
/** Draw a rule under the row, for a toolbar that sits above a table or list. */
|
|
1899
|
+
bordered?: boolean;
|
|
1900
|
+
}
|
|
1901
|
+
/**
|
|
1902
|
+
* Toolbar — a single flex row of controls above content. `ToolbarStart` and
|
|
1903
|
+
* `ToolbarEnd` group the two ends; `ToolbarSeparator` is a short vertical rule
|
|
1904
|
+
* between clusters of controls in the same group.
|
|
1905
|
+
*/
|
|
1906
|
+
declare function Toolbar({ className, bordered, ...props }: ToolbarProps): React$1.JSX.Element;
|
|
1907
|
+
declare function ToolbarStart({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
1908
|
+
declare function ToolbarEnd({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
1909
|
+
declare function ToolbarSeparator({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
|
|
1910
|
+
//#endregion
|
|
1911
|
+
//#region src/components/tooltip.d.ts
|
|
1912
|
+
/**
|
|
1913
|
+
* Tooltip.
|
|
1914
|
+
*
|
|
1915
|
+
* Base UI's Tooltip opens on hover and focus (never on click). Radix users:
|
|
1916
|
+
* `asChild` on the trigger becomes `render={<Button />}`, and the delay moves
|
|
1917
|
+
* from `delayDuration` on the Provider to `delay` on the Provider or Trigger.
|
|
1918
|
+
* `TooltipContent` composes Portal + Positioner + Popup so the consumer still
|
|
1919
|
+
* writes one element; `side`, `align` and `sideOffset` are forwarded to the
|
|
1920
|
+
* Positioner where Base UI expects them. Base UI sets no ARIA role on the
|
|
1921
|
+
* popup; `role="tooltip"` is added here so it reads like the Radix version.
|
|
1922
|
+
*/
|
|
1923
|
+
declare function TooltipProvider(props: Tooltip$2.Provider.Props): import("react").JSX.Element;
|
|
1924
|
+
declare function Tooltip(props: Tooltip$2.Root.Props): import("react").JSX.Element;
|
|
1925
|
+
declare function TooltipTrigger(props: Tooltip$2.Trigger.Props): import("react").JSX.Element;
|
|
1926
|
+
type PositionerProps = Pick<Tooltip$2.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
|
|
1927
|
+
interface TooltipContentProps extends Tooltip$2.Popup.Props, PositionerProps {
|
|
1928
|
+
/** Keep the popup mounted in the DOM while hidden. */
|
|
1929
|
+
keepMounted?: boolean;
|
|
1930
|
+
/** Where to portal the popup; defaults to `<body>`. */
|
|
1931
|
+
container?: Tooltip$2.Portal.Props["container"];
|
|
1932
|
+
}
|
|
1933
|
+
declare function TooltipContent({ className, side, align, sideOffset, alignOffset, anchor, collisionBoundary, collisionPadding, collisionAvoidance, sticky, positionMethod, keepMounted, container, ...props }: TooltipContentProps): import("react").JSX.Element;
|
|
1934
|
+
//#endregion
|
|
1935
|
+
//#region src/hooks/use-cortena-theme.d.ts
|
|
1936
|
+
/**
|
|
1937
|
+
* useCortenaTheme — the one theme bridge for every Cortena surface.
|
|
1938
|
+
*
|
|
1939
|
+
* cortena-design drives dark mode off `data-theme="light" | "dark"` on <html>
|
|
1940
|
+
* and falls back to `prefers-color-scheme` when the attribute is absent. So the
|
|
1941
|
+
* hook has exactly three jobs, consolidated from the flux and engram copies:
|
|
1942
|
+
*
|
|
1943
|
+
* 1. Remember the last choice in localStorage and put it back before the
|
|
1944
|
+
* first paint (`applyStoredTheme`, or `themeInitScript` as a blocking
|
|
1945
|
+
* <script> for apps that cannot run a module that early).
|
|
1946
|
+
* 2. Listen for the message cortenaweb posts into an extension iframe on load
|
|
1947
|
+
* and on every theme change:
|
|
1948
|
+
*
|
|
1949
|
+
* iframe.contentWindow.postMessage({ type: "cortena-theme", colors }, "*")
|
|
1950
|
+
*
|
|
1951
|
+
* and apply the *mode* it implies. The host may say `mode` or `theme`
|
|
1952
|
+
* explicitly; otherwise the background colour's luminance decides.
|
|
1953
|
+
* 3. Expose `{ theme, resolvedTheme, setTheme }` so a settings toggle can
|
|
1954
|
+
* drive the same state.
|
|
1955
|
+
*
|
|
1956
|
+
* What it deliberately does NOT do is apply the individual colours in the
|
|
1957
|
+
* host's message. The palette comes from cortena-design tokens, the single
|
|
1958
|
+
* source of truth; writing the host's raw values onto `--ds-*` or `--color-*`
|
|
1959
|
+
* would silently override every token the design system publishes. The
|
|
1960
|
+
* `colors` object is read for its luminance only, never written to the DOM.
|
|
1961
|
+
*/
|
|
1962
|
+
type CortenaTheme = "light" | "dark" | "system";
|
|
1963
|
+
type ResolvedCortenaTheme = "light" | "dark";
|
|
1964
|
+
/** The message cortenaweb posts into an embedded iframe. */
|
|
1965
|
+
interface CortenaThemeMessage {
|
|
1966
|
+
type: "cortena-theme";
|
|
1967
|
+
/** Explicit mode. Preferred when present. */
|
|
1968
|
+
theme?: CortenaTheme;
|
|
1969
|
+
/** Older name for `theme`, sent by some hosts. */
|
|
1970
|
+
mode?: CortenaTheme;
|
|
1971
|
+
/** Raw palette. Only `background` is read, and only to infer the mode. */
|
|
1972
|
+
colors?: Record<string, unknown>;
|
|
1973
|
+
}
|
|
1974
|
+
interface UseCortenaThemeOptions {
|
|
1975
|
+
/** localStorage key the choice persists under. Defaults to `"cortena.theme"`. */
|
|
1976
|
+
storageKey?: string;
|
|
1977
|
+
/**
|
|
1978
|
+
* Origins allowed to push a theme via postMessage. When omitted or empty,
|
|
1979
|
+
* every origin is accepted — matching cortenaweb, which posts with `"*"`
|
|
1980
|
+
* to cross-origin extensions. A same-origin embed should pass
|
|
1981
|
+
* `[window.location.origin]`.
|
|
1982
|
+
*/
|
|
1983
|
+
allowedOrigins?: readonly string[];
|
|
1984
|
+
/** Set false to keep the state and DOM sync but ignore host messages. */
|
|
1985
|
+
listen?: boolean;
|
|
1986
|
+
}
|
|
1987
|
+
interface UseCortenaThemeResult {
|
|
1988
|
+
/** The stored choice; `"system"` when nothing has been chosen. */
|
|
1989
|
+
theme: CortenaTheme;
|
|
1990
|
+
/** What is actually painted: `theme`, or the OS scheme when `theme` is `"system"`. */
|
|
1991
|
+
resolvedTheme: ResolvedCortenaTheme;
|
|
1992
|
+
setTheme: (theme: CortenaTheme) => void;
|
|
1993
|
+
}
|
|
1994
|
+
export declare const DEFAULT_THEME_STORAGE_KEY = "cortena.theme";
|
|
1995
|
+
export declare const THEME_MESSAGE_TYPE = "cortena-theme";
|
|
1996
|
+
/**
|
|
1997
|
+
* Write the mode onto <html>. `"system"` removes the attribute so
|
|
1998
|
+
* cortena-design's `:root:not([data-theme])` fallback follows the OS.
|
|
1999
|
+
*/
|
|
2000
|
+
export declare function applyTheme(theme: CortenaTheme, root?: HTMLElement): void;
|
|
2001
|
+
export declare function readStoredTheme(storageKey?: string): CortenaTheme;
|
|
2002
|
+
/**
|
|
2003
|
+
* Put the remembered mode back on <html>. Tiny and synchronous on purpose:
|
|
2004
|
+
* call it at the top of the app entry, before `createRoot`, so a reload does
|
|
2005
|
+
* not flash the light palette at somebody reading in the dark. Returns what
|
|
2006
|
+
* it applied.
|
|
2007
|
+
*/
|
|
2008
|
+
export declare function applyStoredTheme(storageKey?: string): CortenaTheme;
|
|
2009
|
+
/**
|
|
2010
|
+
* The same logic as `applyStoredTheme` as a self-contained IIFE string, for
|
|
2011
|
+
* consumers that inject a blocking `<script>` into <head> (Next.js
|
|
2012
|
+
* `dangerouslySetInnerHTML`, or a Vite index.html). It cannot import anything,
|
|
2013
|
+
* which is why it is duplicated rather than derived.
|
|
2014
|
+
*/
|
|
2015
|
+
export declare function getThemeInitScript(storageKey?: string): string;
|
|
2016
|
+
/** `getThemeInitScript()` for the default storage key. */
|
|
2017
|
+
export declare const themeInitScript: string;
|
|
2018
|
+
/**
|
|
2019
|
+
* Infer the mode from a hex background colour by relative luminance. Any
|
|
2020
|
+
* other colour syntax is ignored, since the host only ever sends hex and a
|
|
2021
|
+
* wrong guess is worse than no change.
|
|
2022
|
+
*/
|
|
2023
|
+
export declare function themeFromBackground(background: unknown): ResolvedCortenaTheme | null;
|
|
2024
|
+
/**
|
|
2025
|
+
* The mode a host message asks for, or null when it does not carry one.
|
|
2026
|
+
* Explicit `theme` / `mode` win; otherwise the background luminance decides.
|
|
2027
|
+
*/
|
|
2028
|
+
export declare function themeFromMessage(data: unknown): CortenaTheme | null;
|
|
2029
|
+
export declare function useCortenaTheme(options?: UseCortenaThemeOptions): UseCortenaThemeResult;
|
|
30
2030
|
//#endregion
|
|
31
|
-
export { Button, type ButtonProps, buttonVariants };
|
|
2031
|
+
export { type Accept, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertIcon, type AlertProps, AlertTitle, Area, AreaChart, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Bar, BarChart, Button, type ButtonProps, Calendar, CalendarDayButton, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, CartesianGrid, Cell, Chart, type ChartConfig, ChartContainer, type ChartContainerProps, type ChartDataFor, type ChartDay, ChartEmpty, type ChartEngine, ChartError, ChartLegend, ChartLegendContent, type ChartLegendContentProps, ChartLoading, type ChartPoint, type ChartProps, type ChartRenderer, type ChartRow, type ChartScale, type ChartScales, type ChartSeries, type ChartSlice, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, type ChartTree, type ChartType, Checkbox, type CheckboxProps, Chip, type ChipProps, type ClientSource, type CodeRendererProps, Combobox, ComboboxChip, type ComboboxChipProps, ComboboxChips, type ComboboxChipsProps, ComboboxClear, ComboboxCollection, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, type ComboboxInputProps, ComboboxItem, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, type CommandItemProps, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposedChart, type CortenaTheme, type CortenaThemeMessage, type DataSource, DataTable, type DataTableCell, type DataTableColumn, type DataTableColumnDef, DataTableColumnHeader, type DataTableColumnHeaderProps, type DataTableColumnMeta, type DataTableEditable, type DataTableEditingCell, DataTableExportMenu, type DataTableExportMenuProps, DataTableFacetedFilter, type DataTableFacetedFilterOption, type DataTableFacetedFilterProps, type DataTableFeatures, type DataTableInstance, DataTablePagination, type DataTablePaginationMode, type DataTablePaginationProps, type DataTableProps, type DataTableRow, type DataTableState, type DataTableTable, DataTableToolbar, type DataTableToolbarProps, DataTableView, DataTableViewOptions, type DataTableViewOptionsProps, type DataTableViewProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, Dropzone, type DropzoneProps, type DropzoneState, EmptyState, type EmptyStateProps, ErrorBanner, type ErrorBannerProps, type ExportCell, type ExportSheet, Field, FieldContent, FieldControl, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorItem, type FieldErrorProps, FieldGroup, FieldLabel, type FieldLabelProps, type FieldProps, Fieldset, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps, FileList, type FileListProps, type FileRejection, Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, FormItem, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, Funnel, FunnelChart, Input, type InputProps, Kbd, Label, LabelList, type LabelProps, Line, LineChart, LoadingSkeleton, type LoadingSkeletonPreset, type LoadingSkeletonProps, Markdown, type Components as MarkdownComponents, type MarkdownProps, type NivoTheme, PageHeader, type PageHeaderProps, Pie, PieChart, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Popover, PopoverClose, PopoverContent, type PopoverContentProps, PopoverDescription, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, type ProgressProps, ProgressTrack, ProgressValue, Radar, RadarChart, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, RechartsLegend, RechartsTooltip, ReferenceLine, type ResolvedCortenaTheme, ResponsiveContainer, Scatter, ScatterChart, ScrollArea, type ScrollAreaProps, ScrollBar, SectionCard, type SectionCardProps, Segmented, type SegmentedOption, type SegmentedProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, type SeparatorProps, type ServerSource, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHandle, type SortableHandleProps, SortableList, type SortableListProps, type SortableRenderState, Spinner, type SpinnerProps, StatusDot, type StatusDotProps, type StatusDotTone, type SubmitHandler, Switch, type SwitchProps, type TableQuery, type TableResult, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast, type ToastProps, Toaster, type ToasterProps, Toolbar, ToolbarEnd, type ToolbarProps, ToolbarSeparator, ToolbarStart, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type UseCortenaThemeOptions, type UseCortenaThemeResult, type UseDataTableOptions, type UseFormFieldReturn, type UseFormReturn, XAxis, YAxis, alertVariants, arrayMove, badgeVariants, buttonVariants, chipVariants, fieldVariants, formatDateDefault, formatDateISO, formatDateLong, formatDateShort, formatFileSize, formatRelative, inputClassName, labelVariants, markdownSanitizeSchema, parseDateDefault, parseDateISO, sheetVariants, textareaClassName, toastVariants, useComboboxFilter, useForm, useFormField, useToast, zodResolver };
|
|
32
2032
|
//# sourceMappingURL=index.d.ts.map
|