@godxjp/ui 18.5.0 → 18.6.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/components/charts/compact-bar-trend.d.ts +2 -1
- package/dist/components/charts/index.d.ts +4 -1
- package/dist/components/data-display/data-table.d.ts +25 -4
- package/dist/components/data-display/data-table.js +13 -2
- package/dist/components/data-display/empty-state.js +1 -1
- package/dist/components/data-display/index.d.ts +1 -1
- package/dist/components/data-display/list-row.d.ts +19 -0
- package/dist/components/data-display/list-row.js +2 -0
- package/dist/components/data-display/qr-code.d.ts +1 -1
- package/dist/components/data-display/table.d.ts +47 -2
- package/dist/components/data-display/table.js +29 -4
- package/dist/components/data-entry/command.d.ts +10 -10
- package/dist/components/data-entry/index.d.ts +1 -0
- package/dist/components/data-entry/input-otp.d.ts +1 -0
- package/dist/components/feedback/dialog.d.ts +14 -1
- package/dist/components/feedback/dialog.js +4 -0
- package/dist/components/feedback/index.d.ts +1 -1
- package/dist/components/feedback/index.js +2 -0
- package/dist/components/general/logo.d.ts +7 -1
- package/dist/components/general/logo.js +1 -1
- package/dist/components/layout/app-shell.d.ts +1 -1
- package/dist/components/layout/app-shell.js +55 -46
- package/dist/components/layout/auth-account-summary.d.ts +5 -0
- package/dist/components/layout/auth-account-summary.js +31 -0
- package/dist/components/layout/auth-shell.d.ts +3 -2
- package/dist/components/layout/centered-shell.d.ts +1 -1
- package/dist/components/layout/centered-shell.js +28 -19
- package/dist/components/layout/error-surface.d.ts +35 -0
- package/dist/components/layout/error-surface.js +155 -0
- package/dist/components/layout/flex.d.ts +1 -1
- package/dist/components/layout/flex.js +4 -0
- package/dist/components/layout/index.d.ts +5 -0
- package/dist/components/layout/index.js +4 -0
- package/dist/components/layout/page-container.d.ts +1 -1
- package/dist/components/layout/page-container.js +4 -0
- package/dist/components/navigation/steps.js +38 -19
- package/dist/components/navigation/tabs.js +12 -3
- package/dist/components/ui/avatar.d.ts +2 -1
- package/dist/components/ui/avatar.js +2 -1
- package/dist/components/ui/input-otp.d.ts +4 -1
- package/dist/components/ui/input-otp.js +2 -1
- package/dist/components/ui/toggle-group.d.ts +7 -4
- package/dist/components/ui/toggle-group.js +32 -21
- package/dist/email/brand-mark.d.ts +21 -5
- package/dist/email/brand-mark.js +5 -0
- package/dist/email/color.d.ts +2 -1
- package/dist/email/geometry.d.ts +9 -1
- package/dist/email/geometry.js +1 -0
- package/dist/email/index.d.ts +6 -1
- package/dist/email/index.js +6 -0
- package/dist/email/inline-style.d.ts +7 -5
- package/dist/email/inline-style.js +5 -0
- package/dist/email/tokens.generated.d.ts +40 -20
- package/dist/email/tokens.generated.js +40 -20
- package/dist/email/urgency.d.ts +22 -0
- package/dist/email/urgency.js +14 -0
- package/dist/i18n/messages/en.json +15 -1
- package/dist/i18n/messages/ja.json +15 -1
- package/dist/i18n/messages/vi.json +15 -1
- package/dist/props/components/data-display.prop.d.ts +63 -1
- package/dist/props/components/data-entry.prop.d.ts +6 -0
- package/dist/props/components/index.d.ts +1 -1
- package/dist/props/components/layout.prop.d.ts +191 -4
- package/dist/props/components/navigation.prop.d.ts +5 -1
- package/dist/props/registry.d.ts +145 -4
- package/dist/props/registry.js +189 -5
- package/dist/props/vocabulary/data.prop.d.ts +27 -0
- package/dist/props/vocabulary/index.d.ts +3 -3
- package/dist/props/vocabulary/interaction.prop.d.ts +9 -0
- package/dist/props/vocabulary/layout.prop.d.ts +38 -7
- package/dist/styles/control.css +28 -0
- package/dist/styles/data-display-layout.css +26 -0
- package/dist/styles/layout.css +99 -0
- package/dist/styles/logo-layout.css +42 -9
- package/dist/styles/navigation-layout.css +109 -0
- package/dist/styles/shell-layout.css +302 -0
- package/dist/styles/table-layout.css +164 -1
- package/dist/theme/dxs.canonical.css +5 -4
- package/dist/tokens/axes.css +4 -3
- package/dist/tokens/base.css +1 -0
- package/dist/tokens/components/data-display.css +13 -0
- package/dist/tokens/components/email.css +43 -16
- package/dist/tokens/components/error-surface.css +36 -0
- package/dist/tokens/components/list-row.css +20 -0
- package/dist/tokens/components/logo.css +52 -10
- package/dist/tokens/components/navigation.css +15 -0
- package/dist/tokens/components/shell.css +72 -0
- package/dist/tokens/components/table.css +45 -0
- package/dist/tokens/foundation.css +26 -0
- package/dist/tokens/semantic/layout.css +25 -0
- package/package.json +8 -2
|
@@ -24,6 +24,7 @@ export type { CompactBarTrendProp, CompactBarTrendProp as CompactBarTrendProps,
|
|
|
24
24
|
* - **i18n** — values are formatted with the active locale's `Intl.NumberFormat`;
|
|
25
25
|
* every generated string comes from `t()`.
|
|
26
26
|
*
|
|
27
|
-
* Import from
|
|
27
|
+
* Import from `@godxjp/ui/charts/compact-bar-trend`. The isolated public entry keeps
|
|
28
|
+
* consumers without the optional `recharts` peer away from the peer-backed charts barrel.
|
|
28
29
|
*/
|
|
29
30
|
export declare function CompactBarTrend({ data, categoryKey, valueKey, label, description, size, emphasizedIndex, showCategoryLabels, numberFormat, footer, emptyMessage, className, id, ref, }: CompactBarTrendProp): React.JSX.Element;
|
|
@@ -8,7 +8,10 @@ export { LineChart } from "./line-chart.js";
|
|
|
8
8
|
export type { LineChartProp, LineChartProps } from "./line-chart.js";
|
|
9
9
|
export { BarChart } from "./bar-chart.js";
|
|
10
10
|
export type { BarChartProp, BarChartProps } from "./bar-chart.js";
|
|
11
|
-
/**
|
|
11
|
+
/**
|
|
12
|
+
* Dependency-free compact trend. Consumers without recharts should use the isolated
|
|
13
|
+
* `@godxjp/ui/charts/compact-bar-trend` entry so this barrel does not link peer-backed charts.
|
|
14
|
+
*/
|
|
12
15
|
export { CompactBarTrend } from "./compact-bar-trend.js";
|
|
13
16
|
export type { CompactBarTrendProp, CompactBarTrendProps } from "./compact-bar-trend.js";
|
|
14
17
|
export { AreaChart } from "./area-chart.js";
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { flexRender, type OnChangeFn, type PaginationState, type RowData, type VisibilityState } from "@tanstack/react-table";
|
|
3
|
-
import type { ColumnDefProp, DensityProp, SortStateProp } from "../../props/vocabulary/index.js";
|
|
3
|
+
import type { BreakpointProp, ColumnDefProp, DensityProp, SortStateProp, TablePresetProp } from "../../props/vocabulary/index.js";
|
|
4
4
|
export type Density = DensityProp;
|
|
5
5
|
/**
|
|
6
6
|
* Lean column definition — the simple, common-case column API. `render` shapes
|
|
7
7
|
* a cell; `sortable` opts the column into the sort cycle; `align` / `width` /
|
|
8
|
-
* `pin` / `hiddenOnMobile` tune layout; `enableHiding` (default true)
|
|
9
|
-
* column in DataTable.ViewOptions. Adapted to a TanStack column internally.
|
|
8
|
+
* `pin` / `hiddenOnMobile` / `priority` tune layout; `enableHiding` (default true)
|
|
9
|
+
* lists the column in DataTable.ViewOptions. Adapted to a TanStack column internally.
|
|
10
10
|
*/
|
|
11
11
|
export type ColumnDef<T> = ColumnDefProp<T>;
|
|
12
12
|
declare module "@tanstack/react-table" {
|
|
@@ -73,6 +73,27 @@ interface DataTableProps<T> {
|
|
|
73
73
|
hoverable?: boolean;
|
|
74
74
|
/** Pin the header to the top while the body scrolls. Default true. */
|
|
75
75
|
stickyHeader?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Named collection contract (gh#253) — the SAME preset the `Table` primitive owns, forwarded to
|
|
78
|
+
* the table DataTable renders, so a TanStack-driven queue gets the identical responsive contract.
|
|
79
|
+
* `"default"` (the default) emits no attribute and matches no selector: an existing DataTable is
|
|
80
|
+
* byte-identical. `"action-collection"` is the canonical dense approval / action queue: below
|
|
81
|
+
* `collapseBelow` the desktop intrinsic column widths give way to the token-owned column-PRIORITY
|
|
82
|
+
* measures (`--table-action-collection-*`) under `table-layout: fixed`, cells wrap, and the
|
|
83
|
+
* bordered surface drops its `--table-surface-min-inline-size` floor — so requester · target ·
|
|
84
|
+
* reason · requested date · row actions all stay inside a 390px frame with no horizontal scroll.
|
|
85
|
+
* Mark each column with `priority` on its `ColumnDef`; DataTable stamps it on the `<th>` AND the
|
|
86
|
+
* `<td>` for you. The table stays a REAL table: no `display` change, no role rewriting, no card
|
|
87
|
+
* swap, so header association, `aria-sort` and screen-reader navigation are identical at 1440.
|
|
88
|
+
*/
|
|
89
|
+
preset?: TablePresetProp;
|
|
90
|
+
/**
|
|
91
|
+
* Step at which `preset="action-collection"` switches to the compact priority measures, measured
|
|
92
|
+
* against the TABLE's own container (a container query), not the viewport — a table inside a
|
|
93
|
+
* master rail collapses before the page does. Default `"sm"`. Ignored while `preset` is
|
|
94
|
+
* `"default"`.
|
|
95
|
+
*/
|
|
96
|
+
collapseBelow?: BreakpointProp;
|
|
76
97
|
/**
|
|
77
98
|
* Per-row className for state-based row tinting (e.g. flag an invalid or
|
|
78
99
|
* empty record). Returned classes are appended last, so they win over the
|
|
@@ -82,7 +103,7 @@ interface DataTableProps<T> {
|
|
|
82
103
|
className?: string;
|
|
83
104
|
children?: React.ReactNode;
|
|
84
105
|
}
|
|
85
|
-
export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: controlledPagination, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, rowClassName, className, children, }: DataTableProps<T>): React.JSX.Element;
|
|
106
|
+
export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: controlledPagination, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, className, children, }: DataTableProps<T>): React.JSX.Element;
|
|
86
107
|
export declare namespace DataTable {
|
|
87
108
|
var Toolbar: ({ children, className, }: {
|
|
88
109
|
children?: React.ReactNode;
|
|
@@ -122,6 +122,8 @@ function DataTable({
|
|
|
122
122
|
striped = false,
|
|
123
123
|
hoverable = false,
|
|
124
124
|
stickyHeader = true,
|
|
125
|
+
preset = "default",
|
|
126
|
+
collapseBelow = "sm",
|
|
125
127
|
rowClassName,
|
|
126
128
|
className,
|
|
127
129
|
children
|
|
@@ -219,6 +221,8 @@ function DataTable({
|
|
|
219
221
|
striped,
|
|
220
222
|
hoverable,
|
|
221
223
|
stickyHeader,
|
|
224
|
+
preset,
|
|
225
|
+
collapseBelow,
|
|
222
226
|
rowClassName
|
|
223
227
|
};
|
|
224
228
|
const hasContent = React.Children.toArray(children).some(
|
|
@@ -393,9 +397,12 @@ DataTable.Content = function DataTableContent() {
|
|
|
393
397
|
striped,
|
|
394
398
|
hoverable,
|
|
395
399
|
stickyHeader,
|
|
400
|
+
preset,
|
|
401
|
+
collapseBelow,
|
|
396
402
|
rowClassName
|
|
397
403
|
} = useDataTableContext();
|
|
398
404
|
const { t } = useTranslation();
|
|
405
|
+
const presetAttr = preset === "default" ? void 0 : preset;
|
|
399
406
|
const isDenied = denied != null && denied !== false;
|
|
400
407
|
const isError = !isDenied && error != null && error !== false;
|
|
401
408
|
const rowPadding = tableRowHeightClass;
|
|
@@ -439,10 +446,11 @@ DataTable.Content = function DataTableContent() {
|
|
|
439
446
|
children: /* @__PURE__ */ jsx(
|
|
440
447
|
"div",
|
|
441
448
|
{
|
|
442
|
-
className: "ui-data-table-surface
|
|
449
|
+
className: "ui-data-table-surface",
|
|
450
|
+
"data-preset": presetAttr,
|
|
443
451
|
"data-striped": striped ? "" : void 0,
|
|
444
452
|
"data-hoverable": hoverable ? "" : void 0,
|
|
445
|
-
children: /* @__PURE__ */ jsxs(Table, { scrollable: false, children: [
|
|
453
|
+
children: /* @__PURE__ */ jsxs(Table, { scrollable: false, preset, collapseBelow, children: [
|
|
446
454
|
/* @__PURE__ */ jsx(TableHeader, { className: cn("bg-secondary", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs(TableRow, { children: [
|
|
447
455
|
selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
|
|
448
456
|
visibleColumns.map((col) => {
|
|
@@ -458,6 +466,7 @@ DataTable.Content = function DataTableContent() {
|
|
|
458
466
|
return /* @__PURE__ */ jsx(
|
|
459
467
|
TableHead,
|
|
460
468
|
{
|
|
469
|
+
priority: col.priority,
|
|
461
470
|
"data-empty": headerEmpty || void 0,
|
|
462
471
|
"aria-sort": isSortable ? isActiveSort ? activeSort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
|
|
463
472
|
className: cn(
|
|
@@ -494,6 +503,7 @@ DataTable.Content = function DataTableContent() {
|
|
|
494
503
|
visibleColumns.map((col, j) => /* @__PURE__ */ jsx(
|
|
495
504
|
TableCell,
|
|
496
505
|
{
|
|
506
|
+
priority: col.priority,
|
|
497
507
|
className: cn(
|
|
498
508
|
cellPadding,
|
|
499
509
|
col.width,
|
|
@@ -615,6 +625,7 @@ DataTable.Content = function DataTableContent() {
|
|
|
615
625
|
visibleColumns.map((col) => /* @__PURE__ */ jsx(
|
|
616
626
|
TableCell,
|
|
617
627
|
{
|
|
628
|
+
priority: col.priority,
|
|
618
629
|
className: cn(
|
|
619
630
|
cellPadding,
|
|
620
631
|
col.width,
|
|
@@ -22,7 +22,7 @@ function EmptyState({
|
|
|
22
22
|
role: "status",
|
|
23
23
|
className: cn("ui-empty-state", className),
|
|
24
24
|
children: [
|
|
25
|
-
Icon && variant !== "compact" && /* @__PURE__ */ jsx("div", { className: "ui-empty-state-icon", children: /* @__PURE__ */ jsx(Icon, { className: "
|
|
25
|
+
Icon && variant !== "compact" && /* @__PURE__ */ jsx("div", { className: "ui-empty-state-icon", children: /* @__PURE__ */ jsx(Icon, { className: "size-6", "aria-hidden": "true" }) }),
|
|
26
26
|
createElement(TitleTag, { className: "ui-empty-state-title" }, title),
|
|
27
27
|
description && /* @__PURE__ */ jsx("p", { className: "ui-empty-state-description", children: description }),
|
|
28
28
|
action && /* @__PURE__ */ jsx("div", { children: action })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { Badge, StatusBadge } from "./badge.js";
|
|
2
2
|
export type { BadgeProps } from "./badge.js";
|
|
3
3
|
export { ListRow } from "./list-row.js";
|
|
4
|
-
export type { ListRowProps } from "./list-row.js";
|
|
4
|
+
export type { ListRowProps, ListRowDensity } from "./list-row.js";
|
|
5
5
|
export { CredentialReveal } from "./credential-reveal.js";
|
|
6
6
|
export type { CredentialRevealProp, CredentialRevealProps, CredentialRevealTone, } from "./credential-reveal.js";
|
|
7
7
|
export { QrCode } from "./qr-code.js";
|
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import type { ListRowDensityProp } from "../../props/components/data-display.prop.js";
|
|
3
|
+
/**
|
|
4
|
+
* ListRow vertical/inline geometry — `default` (the roomy entity row) or `compact` (the
|
|
5
|
+
* inline-actions row: avatar + title + small trailing Buttons on one line in a narrow card).
|
|
6
|
+
* A ListRow-local subset of the density vocabulary — it has no `comfortable` step.
|
|
7
|
+
*/
|
|
8
|
+
export type ListRowDensity = ListRowDensityProp;
|
|
2
9
|
/**
|
|
3
10
|
* ListRow — a single-line entity row (indicator · leading · title/description · trailing) for
|
|
4
11
|
* SHORT lists inside a Card: active sessions, API tokens, linked accounts, passkeys, MFA factors,
|
|
@@ -13,6 +20,11 @@ import * as React from "react";
|
|
|
13
20
|
* their own line at narrow container widths — a long title plus two Buttons never widens the page
|
|
14
21
|
* root. `overflow` picks how the long content resolves: `truncate` (default, one line + ellipsis)
|
|
15
22
|
* or `wrap` (multi-line, `overflow-wrap: anywhere`).
|
|
23
|
+
*
|
|
24
|
+
* Density (#246): `density="compact"` is the compact inline-actions geometry — tighter block
|
|
25
|
+
* padding/gap and a LOWER body threshold (`--list-row-compact-*`), so an avatar, the title and one
|
|
26
|
+
* or two small trailing Buttons stay on one line inside a ~326px card column at 390px. It only
|
|
27
|
+
* lowers thresholds, so the #224 wrap contract still holds.
|
|
16
28
|
*/
|
|
17
29
|
export interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
18
30
|
/** Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`. */
|
|
@@ -32,6 +44,13 @@ export interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
32
44
|
* with an ellipsis) or `wrap` (multi-line; long unbroken tokens break so the row never widens).
|
|
33
45
|
*/
|
|
34
46
|
overflow?: "truncate" | "wrap";
|
|
47
|
+
/**
|
|
48
|
+
* Row geometry — `default` (roomy entity row) or `compact` (#246): tighter block padding and
|
|
49
|
+
* column gap plus a lower body threshold, so a leading Avatar, the title/description and one or
|
|
50
|
+
* two small trailing Buttons stay INLINE inside a narrow card (≈326px content) at 390px, and a
|
|
51
|
+
* history Badge + date stays on the title's line. Retune per theme with `--list-row-compact-*`.
|
|
52
|
+
*/
|
|
53
|
+
density?: ListRowDensity;
|
|
35
54
|
/**
|
|
36
55
|
* Read/unread state — renders the indicator dot (with localized `sr-only` text, never colour
|
|
37
56
|
* alone) and the tokenized unread surface. OMIT the prop entirely for rows that have no read
|
|
@@ -13,6 +13,7 @@ const ListRow = React.forwardRef(
|
|
|
13
13
|
trailing,
|
|
14
14
|
align = "center",
|
|
15
15
|
overflow = "truncate",
|
|
16
|
+
density = "default",
|
|
16
17
|
unread,
|
|
17
18
|
className,
|
|
18
19
|
...props
|
|
@@ -27,6 +28,7 @@ const ListRow = React.forwardRef(
|
|
|
27
28
|
"data-slot": "list-row",
|
|
28
29
|
"data-align": align === "start" ? "start" : void 0,
|
|
29
30
|
"data-overflow": overflow === "wrap" ? "wrap" : void 0,
|
|
31
|
+
"data-density": density === "compact" ? "compact" : void 0,
|
|
30
32
|
"data-unread": unread === true ? "" : void 0,
|
|
31
33
|
className: cn("ui-list-row", className),
|
|
32
34
|
...props,
|
|
@@ -5,4 +5,4 @@ export type QrCodeProps = QrCodeProp & Omit<React.ComponentPropsWithoutRef<"svg"
|
|
|
5
5
|
* Renders a QR code entirely in-process. The encoded value is never sent to a network service,
|
|
6
6
|
* written to an element attribute, or included in accessible text.
|
|
7
7
|
*/
|
|
8
|
-
export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProp & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "style" | "
|
|
8
|
+
export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProp & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "style" | "role" | "children" | "type" | keyof QrCodeProp> & React.RefAttributes<SVGSVGElement>>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import type { BreakpointProp, TableColumnPriorityProp, TablePresetProp } from "../../props/vocabulary/index.js";
|
|
2
3
|
export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
|
|
3
4
|
/**
|
|
4
5
|
* Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a
|
|
@@ -8,6 +9,23 @@ export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
|
|
|
8
9
|
* avoids a redundant NESTED scroll container and a duplicate keyboard focus stop for one table.
|
|
9
10
|
*/
|
|
10
11
|
scrollable?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
|
|
14
|
+
* table exactly as it is. `"action-collection"` is the canonical dense approval / action queue
|
|
15
|
+
* (gh#253): below `collapseBelow`, the desktop intrinsic column widths — the thing that pushes
|
|
16
|
+
* the last columns outside a 390px viewport — are replaced by the token-owned column PRIORITY
|
|
17
|
+
* measures (`--table-action-collection-*`) under `table-layout: fixed`, and cells wrap instead
|
|
18
|
+
* of forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
|
|
19
|
+
* The table keeps its real semantics: no `display` change, no role rewriting, no card swap, so
|
|
20
|
+
* header association, `aria-sort` and screen-reader table navigation are identical at every width.
|
|
21
|
+
*/
|
|
22
|
+
preset?: TablePresetProp;
|
|
23
|
+
/**
|
|
24
|
+
* Step at which `preset="action-collection"` switches to the priority measures, measured against
|
|
25
|
+
* the TABLE's own container (not the viewport), so a table inside a rail collapses before the
|
|
26
|
+
* page does. Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`.
|
|
27
|
+
*/
|
|
28
|
+
collapseBelow?: BreakpointProp;
|
|
11
29
|
};
|
|
12
30
|
export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
|
|
13
31
|
/**
|
|
@@ -18,9 +36,36 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
|
|
|
18
36
|
* avoids a redundant NESTED scroll container and a duplicate keyboard focus stop for one table.
|
|
19
37
|
*/
|
|
20
38
|
scrollable?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Named collection contract. `"default"` (the default) emits no attribute and keeps the plain
|
|
41
|
+
* table exactly as it is. `"action-collection"` is the canonical dense approval / action queue
|
|
42
|
+
* (gh#253): below `collapseBelow`, the desktop intrinsic column widths — the thing that pushes
|
|
43
|
+
* the last columns outside a 390px viewport — are replaced by the token-owned column PRIORITY
|
|
44
|
+
* measures (`--table-action-collection-*`) under `table-layout: fixed`, and cells wrap instead
|
|
45
|
+
* of forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
|
|
46
|
+
* The table keeps its real semantics: no `display` change, no role rewriting, no card swap, so
|
|
47
|
+
* header association, `aria-sort` and screen-reader table navigation are identical at every width.
|
|
48
|
+
*/
|
|
49
|
+
preset?: TablePresetProp;
|
|
50
|
+
/**
|
|
51
|
+
* Step at which `preset="action-collection"` switches to the priority measures, measured against
|
|
52
|
+
* the TABLE's own container (not the viewport), so a table inside a rail collapses before the
|
|
53
|
+
* page does. Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`.
|
|
54
|
+
*/
|
|
55
|
+
collapseBelow?: BreakpointProp;
|
|
21
56
|
} & React.RefAttributes<HTMLTableElement>>;
|
|
22
57
|
export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
23
58
|
export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
24
59
|
export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
|
|
25
|
-
|
|
26
|
-
|
|
60
|
+
/**
|
|
61
|
+
* Column priority carried by BOTH the header cell and the body cells of a column. Read only by
|
|
62
|
+
* `Table preset="action-collection"` below its collapse step, where it selects the column's
|
|
63
|
+
* token-owned measure; unset columns take the remaining space. Emitted as `data-priority` only
|
|
64
|
+
* when supplied, so an ordinary table gains no attribute.
|
|
65
|
+
*/
|
|
66
|
+
type TableCellPriority = {
|
|
67
|
+
priority?: TableColumnPriorityProp;
|
|
68
|
+
};
|
|
69
|
+
export declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & TableCellPriority & React.RefAttributes<HTMLTableCellElement>>;
|
|
70
|
+
export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & TableCellPriority & React.RefAttributes<HTMLTableCellElement>>;
|
|
71
|
+
export {};
|
|
@@ -3,16 +3,23 @@ import * as React from "react";
|
|
|
3
3
|
import { tableHeadHeightClass } from "../../lib/control-styles.js";
|
|
4
4
|
import { cn } from "../../lib/utils.js";
|
|
5
5
|
const Table = React.forwardRef(
|
|
6
|
-
({ className, scrollable = true, ...props }, ref) => (
|
|
6
|
+
({ className, scrollable = true, preset = "default", collapseBelow = "sm", ...props }, ref) => (
|
|
7
7
|
// A table wider than its container scrolls horizontally in this wrapper; keep it
|
|
8
8
|
// keyboard-reachable so it can be scrolled without a pointer (WCAG 2.1.1 / axe
|
|
9
9
|
// scrollable-region-focusable). No landmark role — avoids landmark-unique collisions.
|
|
10
10
|
// When `scrollable` is false an ancestor owns the scroll region, so this is a bare
|
|
11
11
|
// positioning box (no `overflow`, no tab stop) to avoid a redundant nested scroller.
|
|
12
|
+
// The preset adds ONE class (the container the collapse step is measured against) and the
|
|
13
|
+
// step attribute; with `preset="default"` neither is emitted, so the box is byte-identical.
|
|
12
14
|
/* @__PURE__ */ jsx(
|
|
13
15
|
"div",
|
|
14
16
|
{
|
|
15
|
-
className:
|
|
17
|
+
className: cn(
|
|
18
|
+
scrollable ? "relative w-full overflow-auto" : "relative w-full",
|
|
19
|
+
preset !== "default" && "ui-table-collection"
|
|
20
|
+
),
|
|
21
|
+
"data-preset": preset === "default" ? void 0 : preset,
|
|
22
|
+
"data-collapse-below": preset === "default" ? void 0 : collapseBelow,
|
|
16
23
|
...scrollable ? { tabIndex: 0 } : {},
|
|
17
24
|
children: /* @__PURE__ */ jsx(
|
|
18
25
|
"table",
|
|
@@ -44,9 +51,27 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
|
|
|
44
51
|
}
|
|
45
52
|
));
|
|
46
53
|
TableRow.displayName = "TableRow";
|
|
47
|
-
const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
54
|
+
const TableHead = React.forwardRef(({ className, priority, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
55
|
+
"th",
|
|
56
|
+
{
|
|
57
|
+
ref,
|
|
58
|
+
"data-slot": "table-head",
|
|
59
|
+
"data-priority": priority,
|
|
60
|
+
className: cn(tableHeadHeightClass, className),
|
|
61
|
+
...props
|
|
62
|
+
}
|
|
63
|
+
));
|
|
48
64
|
TableHead.displayName = "TableHead";
|
|
49
|
-
const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
65
|
+
const TableCell = React.forwardRef(({ className, priority, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
66
|
+
"td",
|
|
67
|
+
{
|
|
68
|
+
ref,
|
|
69
|
+
"data-slot": "table-cell",
|
|
70
|
+
"data-priority": priority,
|
|
71
|
+
className: cn(className),
|
|
72
|
+
...props
|
|
73
|
+
}
|
|
74
|
+
));
|
|
50
75
|
TableCell.displayName = "TableCell";
|
|
51
76
|
export {
|
|
52
77
|
Table,
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
export declare const Command: React.ForwardRefExoticComponent<Omit<{
|
|
3
3
|
children?: React.ReactNode;
|
|
4
|
-
} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement
|
|
4
|
+
} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
5
5
|
ref?: React.Ref<HTMLDivElement>;
|
|
6
6
|
} & {
|
|
7
7
|
asChild?: boolean;
|
|
8
|
-
}, keyof React.HTMLAttributes<HTMLDivElement> | "
|
|
8
|
+
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
|
|
9
9
|
label?: string;
|
|
10
10
|
shouldFilter?: boolean;
|
|
11
11
|
filter?: (value: string, search: string, keywords?: string[]) => number;
|
|
@@ -26,38 +26,38 @@ export declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pic
|
|
|
26
26
|
} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
27
27
|
export declare const CommandList: React.ForwardRefExoticComponent<Omit<{
|
|
28
28
|
children?: React.ReactNode;
|
|
29
|
-
} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement
|
|
29
|
+
} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
30
30
|
ref?: React.Ref<HTMLDivElement>;
|
|
31
31
|
} & {
|
|
32
32
|
asChild?: boolean;
|
|
33
|
-
}, keyof React.HTMLAttributes<HTMLDivElement> | "
|
|
33
|
+
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
|
|
34
34
|
label?: string;
|
|
35
35
|
} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
36
36
|
export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
|
|
37
37
|
children?: React.ReactNode;
|
|
38
|
-
} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement
|
|
38
|
+
} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
39
39
|
ref?: React.Ref<HTMLDivElement>;
|
|
40
40
|
} & {
|
|
41
41
|
asChild?: boolean;
|
|
42
|
-
}, keyof React.HTMLAttributes<HTMLDivElement> | "
|
|
42
|
+
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
43
43
|
export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
|
|
44
44
|
children?: React.ReactNode;
|
|
45
|
-
} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement
|
|
45
|
+
} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
46
46
|
ref?: React.Ref<HTMLDivElement>;
|
|
47
47
|
} & {
|
|
48
48
|
asChild?: boolean;
|
|
49
|
-
}, keyof React.HTMLAttributes<HTMLDivElement> | "
|
|
49
|
+
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
|
|
50
50
|
heading?: React.ReactNode;
|
|
51
51
|
value?: string;
|
|
52
52
|
forceMount?: boolean;
|
|
53
53
|
} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
54
54
|
export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
|
|
55
55
|
children?: React.ReactNode;
|
|
56
|
-
} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement
|
|
56
|
+
} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
57
57
|
ref?: React.Ref<HTMLDivElement>;
|
|
58
58
|
} & {
|
|
59
59
|
asChild?: boolean;
|
|
60
|
-
}, keyof React.HTMLAttributes<HTMLDivElement> | "
|
|
60
|
+
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
|
|
61
61
|
disabled?: boolean;
|
|
62
62
|
onSelect?: (value: string) => void;
|
|
63
63
|
value?: string;
|
|
@@ -55,6 +55,7 @@ export type { PasswordInputProps } from "./password-input.js";
|
|
|
55
55
|
export { PasswordStrength, usePasswordStrength } from "./password-strength.js";
|
|
56
56
|
export type { PasswordRule, PasswordStrengthLabels, PasswordStrengthProps, PasswordStrengthReturn, } from "./password-strength.js";
|
|
57
57
|
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./input-otp.js";
|
|
58
|
+
export type { InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, } from "./input-otp.js";
|
|
58
59
|
export { Rating } from "./rating.js";
|
|
59
60
|
export type { RatingProps } from "./rating.js";
|
|
60
61
|
export { TagInput } from "./tag-input.js";
|
|
@@ -35,6 +35,19 @@ declare const DialogFooter: {
|
|
|
35
35
|
};
|
|
36
36
|
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
37
37
|
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
38
|
+
type AlertDialogRootProps = React.ComponentProps<typeof AlertDialogPrimitive.Root> & {};
|
|
39
|
+
/**
|
|
40
|
+
* Compound alert-dialog Root — the `role="alertdialog"` mirror of {@link DialogRoot}.
|
|
41
|
+
*
|
|
42
|
+
* The flat {@link AlertDialog} preset owns the confirm / challenge / step-up recipe and cannot be
|
|
43
|
+
* re-composed; this Root is what a consumer reaches for when the confirmation needs bespoke
|
|
44
|
+
* content. It supplies the Radix AlertDialog context that `AlertDialogTitle`,
|
|
45
|
+
* `AlertDialogDescription`, `AlertDialogAction` and `AlertDialogCancel` read, so the compound
|
|
46
|
+
* parts are assemblable from the public API alone (no direct `@radix-ui/react-alert-dialog`
|
|
47
|
+
* import). Focus trap, focus restoration and the modal `role="alertdialog"` semantics stay
|
|
48
|
+
* Radix-owned.
|
|
49
|
+
*/
|
|
50
|
+
declare function AlertDialogRoot(props: AlertDialogRootProps): React.JSX.Element;
|
|
38
51
|
declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
39
52
|
declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
|
|
40
53
|
declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -94,4 +107,4 @@ export declare const Dialog: typeof DialogRoot & {
|
|
|
94
107
|
Action: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
95
108
|
Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
96
109
|
};
|
|
97
|
-
export { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, DialogClose, DialogAction, DialogCancel, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialog, };
|
|
110
|
+
export { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, DialogClose, DialogAction, DialogCancel, AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialog, };
|
|
@@ -132,6 +132,9 @@ const DialogDescription = React.forwardRef(({ className, ...props }, ref) => {
|
|
|
132
132
|
);
|
|
133
133
|
});
|
|
134
134
|
DialogDescription.displayName = "DialogDescription";
|
|
135
|
+
function AlertDialogRoot(props) {
|
|
136
|
+
return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
137
|
+
}
|
|
135
138
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
|
136
139
|
const AlertDialogPortal = AlertDialogPrimitive.Portal;
|
|
137
140
|
const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
@@ -381,6 +384,7 @@ export {
|
|
|
381
384
|
AlertDialogHeader,
|
|
382
385
|
AlertDialogOverlay,
|
|
383
386
|
AlertDialogPortal,
|
|
387
|
+
AlertDialogRoot,
|
|
384
388
|
AlertDialogTitle,
|
|
385
389
|
AlertDialogTrigger,
|
|
386
390
|
Dialog,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogBody, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogAction, DialogCancel, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialog, } from "./dialog.js";
|
|
1
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogBody, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogAction, DialogCancel, AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialog, } from "./dialog.js";
|
|
2
2
|
export type { AlertDialogProp, AlertDialogProps } from "./dialog.js";
|
|
3
3
|
export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, useSheetResponsiveMode, } from "./sheet.js";
|
|
4
4
|
export type { SheetContentProps, SheetPresentation, SheetResponsiveProp } from "./sheet.js";
|
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
DialogTrigger,
|
|
13
13
|
DialogAction,
|
|
14
14
|
DialogCancel,
|
|
15
|
+
AlertDialogRoot,
|
|
15
16
|
AlertDialogTrigger,
|
|
16
17
|
AlertDialogPortal,
|
|
17
18
|
AlertDialogOverlay,
|
|
@@ -65,6 +66,7 @@ export {
|
|
|
65
66
|
AlertDialogHeader,
|
|
66
67
|
AlertDialogOverlay,
|
|
67
68
|
AlertDialogPortal,
|
|
69
|
+
AlertDialogRoot,
|
|
68
70
|
AlertDialogTitle,
|
|
69
71
|
AlertDialogTrigger,
|
|
70
72
|
AlertQueryError,
|
|
@@ -13,7 +13,13 @@ export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
|
|
|
13
13
|
* `"glyph"` preserves the configurable boxed-glyph treatment.
|
|
14
14
|
*/
|
|
15
15
|
mark?: LogoMark;
|
|
16
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* Box size tier (tokenised), applied to EVERY mark. The boxed glyph reads `--logo-size-*`
|
|
18
|
+
* (default `md` = 1.75rem); `mark="godx"` reads its own `--logo-godx-size-*` scale (default `md`
|
|
19
|
+
* = 2rem — the identity artwork is a capsule in a square viewBox and needs slightly more box to
|
|
20
|
+
* read at the same optical weight). On a `wordmark` lockup the tier scales the mark and the
|
|
21
|
+
* wordmark together. A theme pins the identity box at every tier with `--logo-godx-size`.
|
|
22
|
+
*/
|
|
17
23
|
size?: LogoSize;
|
|
18
24
|
/**
|
|
19
25
|
* Semantic fill role. `"success"` provides the canonical green identity mark without changing
|
|
@@ -49,7 +49,7 @@ const Logo = React.forwardRef(
|
|
|
49
49
|
...props,
|
|
50
50
|
children: [
|
|
51
51
|
/* @__PURE__ */ jsx("span", { "data-slot": "logo", ...identity, className: "ui-logo", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph }) }),
|
|
52
|
-
/* @__PURE__ */ jsx("span", { "data-slot": "logo-wordmark", className: "ui-logo-wordmark", children: wordmark })
|
|
52
|
+
/* @__PURE__ */ jsx("span", { "data-slot": "logo-wordmark", "data-logotype": true, className: "ui-logo-wordmark", children: wordmark })
|
|
53
53
|
]
|
|
54
54
|
}
|
|
55
55
|
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { AppShellProp } from "../../props/components/layout.prop.js";
|
|
3
3
|
export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
|
|
4
|
-
export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;
|
|
4
|
+
export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;
|