@optimum-intelligence/opti-ui 0.2.0 → 0.4.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/README.md +105 -3
- package/dist/components/accordion/Accordion.d.ts +12 -0
- package/dist/components/accordion/Accordion.js +12 -0
- package/dist/components/accordion/Accordion.js.map +1 -1
- package/dist/components/alert/Alert.d.ts +4 -0
- package/dist/components/alert/Alert.js.map +1 -1
- package/dist/components/app-shell/AppShell.d.ts +22 -0
- package/dist/components/app-shell/AppShell.js +6 -0
- package/dist/components/app-shell/AppShell.js.map +1 -1
- package/dist/components/avatar/Avatar.d.ts +8 -0
- package/dist/components/avatar/Avatar.js +2 -0
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/badge/Badge.d.ts +9 -0
- package/dist/components/badge/Badge.js +6 -0
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/breadcrumbs/Breadcrumbs.d.ts +1 -0
- package/dist/components/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/components/button/Button.d.ts +8 -0
- package/dist/components/button/Button.js +6 -0
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/calendar/Calendar.d.ts +3 -0
- package/dist/components/calendar/Calendar.js.map +1 -1
- package/dist/components/card/Card.d.ts +14 -1
- package/dist/components/card/Card.js +13 -0
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/choice/Choice.d.ts +13 -0
- package/dist/components/choice/Choice.js +10 -0
- package/dist/components/choice/Choice.js.map +1 -1
- package/dist/components/combobox/Combobox.d.ts +12 -0
- package/dist/components/combobox/Combobox.js.map +1 -1
- package/dist/components/command-palette/CommandPalette.d.ts +10 -0
- package/dist/components/command-palette/CommandPalette.js.map +1 -1
- package/dist/components/data-table/DataTable.d.ts +62 -96
- package/dist/components/data-table/DataTable.js +452 -418
- package/dist/components/data-table/DataTable.js.map +1 -1
- package/dist/components/data-table/DataTableContent.d.ts +36 -0
- package/dist/components/data-table/DataTableContent.js +550 -0
- package/dist/components/data-table/DataTableContent.js.map +1 -0
- package/dist/components/data-table/DataTableFilters.d.ts +18 -0
- package/dist/components/data-table/DataTableFilters.js +284 -0
- package/dist/components/data-table/DataTableFilters.js.map +1 -0
- package/dist/components/data-table/DataTableRow.d.ts +33 -0
- package/dist/components/data-table/DataTableRow.js +552 -0
- package/dist/components/data-table/DataTableRow.js.map +1 -0
- package/dist/components/data-table/context.d.ts +5 -0
- package/dist/components/data-table/context.js +14 -0
- package/dist/components/data-table/context.js.map +1 -0
- package/dist/components/data-table/layout.d.ts +60 -0
- package/dist/components/data-table/layout.js +272 -0
- package/dist/components/data-table/layout.js.map +1 -0
- package/dist/components/data-table/types.d.ts +335 -0
- package/dist/components/data-table/useDataTable.d.ts +9 -0
- package/dist/components/data-table/useDataTable.js +666 -0
- package/dist/components/data-table/useDataTable.js.map +1 -0
- package/dist/components/date-picker/DateRangePicker.d.ts +1 -0
- package/dist/components/date-picker/DateRangePicker.js.map +1 -1
- package/dist/components/date-picker/PickerField.d.ts +13 -0
- package/dist/components/date-picker/PickerField.js.map +1 -1
- package/dist/components/dialog/Dialog.d.ts +5 -0
- package/dist/components/dialog/Dialog.js.map +1 -1
- package/dist/components/drawer/Drawer.d.ts +10 -0
- package/dist/components/drawer/Drawer.js.map +1 -1
- package/dist/components/empty-state/EmptyState.d.ts +5 -0
- package/dist/components/empty-state/EmptyState.js.map +1 -1
- package/dist/components/file-upload/FileUpload.d.ts +21 -0
- package/dist/components/file-upload/FileUpload.js.map +1 -1
- package/dist/components/input/Input.d.ts +7 -0
- package/dist/components/input/Input.js +3 -0
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/link/Link.d.ts +1 -0
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/menu/Menu.d.ts +6 -0
- package/dist/components/menu/Menu.js.map +1 -1
- package/dist/components/number-field/NumberField.d.ts +7 -0
- package/dist/components/number-field/NumberField.js.map +1 -1
- package/dist/components/pagination/Pagination.d.ts +4 -0
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/popover/Popover.d.ts +4 -0
- package/dist/components/popover/Popover.js.map +1 -1
- package/dist/components/preview-card/PreviewCard.d.ts +4 -0
- package/dist/components/preview-card/PreviewCard.js.map +1 -1
- package/dist/components/progress/Progress.d.ts +8 -0
- package/dist/components/progress/Progress.js.map +1 -1
- package/dist/components/scroll-area/ScrollArea.d.ts +1 -0
- package/dist/components/scroll-area/ScrollArea.js.map +1 -1
- package/dist/components/search-input/SearchInput.d.ts +2 -0
- package/dist/components/search-input/SearchInput.js.map +1 -1
- package/dist/components/select/Select.d.ts +11 -0
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/separator/Separator.d.ts +1 -0
- package/dist/components/separator/Separator.js +1 -0
- package/dist/components/separator/Separator.js.map +1 -1
- package/dist/components/skeleton/Skeleton.d.ts +7 -0
- package/dist/components/skeleton/Skeleton.js +1 -0
- package/dist/components/skeleton/Skeleton.js.map +1 -1
- package/dist/components/slider/Slider.d.ts +1 -0
- package/dist/components/slider/Slider.js.map +1 -1
- package/dist/components/spinner/Spinner.d.ts +2 -0
- package/dist/components/spinner/Spinner.js +1 -0
- package/dist/components/spinner/Spinner.js.map +1 -1
- package/dist/components/stat-card/StatCard.d.ts +5 -1
- package/dist/components/stat-card/StatCard.js.map +1 -1
- package/dist/components/stepper/Stepper.d.ts +4 -0
- package/dist/components/stepper/Stepper.js.map +1 -1
- package/dist/components/table/Table.d.ts +23 -0
- package/dist/components/table/Table.js +17 -0
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/tabs/Tabs.d.ts +1 -0
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tag/Tag.d.ts +3 -0
- package/dist/components/tag/Tag.js.map +1 -1
- package/dist/components/toast/Toast.d.ts +2 -0
- package/dist/components/toast/Toast.js.map +1 -1
- package/dist/components/toggle/Toggle.d.ts +7 -0
- package/dist/components/toggle/Toggle.js +1 -0
- package/dist/components/toggle/Toggle.js.map +1 -1
- package/dist/components/tooltip/Tooltip.d.ts +8 -0
- package/dist/components/tooltip/Tooltip.js.map +1 -1
- package/dist/components/typography/Typography.d.ts +5 -0
- package/dist/components/typography/Typography.js +2 -0
- package/dist/components/typography/Typography.js.map +1 -1
- package/dist/components.json +5375 -0
- package/dist/icons/index.d.ts +8 -0
- package/dist/icons/index.js +9 -1
- package/dist/icons/index.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +4 -2
- package/dist/llms-full.txt +2590 -0
- package/dist/llms.txt +175 -0
- package/dist/opti-ui.css +494 -167
- package/dist/theme/ThemeProvider.d.ts +1 -0
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/utils/portal.d.ts +4 -0
- package/dist/utils/portal.js +4 -0
- package/dist/utils/portal.js.map +1 -1
- package/package.json +7 -3
package/README.md
CHANGED
|
@@ -4,6 +4,25 @@ Optimum Intelligence's shared React component library. It is built on [Base UI](
|
|
|
4
4
|
behaviour and accessibility, with a Poppins/Montserrat look: deep purple `#271645`, accent `#63537d`,
|
|
5
5
|
soft tinted borders and rounded controls. Everything is themeable through CSS variables.
|
|
6
6
|
|
|
7
|
+
## API docs for humans and AI agents
|
|
8
|
+
|
|
9
|
+
The package ships its own API reference, generated from the source on every build, so it always matches
|
|
10
|
+
the installed version:
|
|
11
|
+
|
|
12
|
+
| File | Use |
|
|
13
|
+
| --- | --- |
|
|
14
|
+
| `llms.txt` | Short index: setup plus every component with a one-line description. Start here. |
|
|
15
|
+
| `llms-full.txt` | Full reference in markdown: every component and part, props with types, allowed values, defaults and descriptions, examples. |
|
|
16
|
+
| `components.json` | The same data as JSON (`import manifest from '@optimum-intelligence/opti-ui/components.json'`). |
|
|
17
|
+
| `dist/**/*.d.ts` | Exact prop types with JSDoc, shown by editors on hover. |
|
|
18
|
+
|
|
19
|
+
AI agents: read `node_modules/@optimum-intelligence/opti-ui/llms.txt` before using the library, then look
|
|
20
|
+
up a component in `llms-full.txt`. Do not guess prop names.
|
|
21
|
+
|
|
22
|
+
Docs come from JSDoc in `src/`. To improve them, document the component (`/** … */` with an optional
|
|
23
|
+
`@example`) and its props, then run `npm run build`; the build fails while an export or prop is
|
|
24
|
+
undocumented. Contributor and agent rules are in `AGENTS.md`.
|
|
25
|
+
|
|
7
26
|
## Showcase
|
|
8
27
|
|
|
9
28
|
```sh
|
|
@@ -72,9 +91,40 @@ Dates are displayed the same way in every locale, on a 24-hour clock: `2026-03-0
|
|
|
72
91
|
(`formatDate`) and `2026. March 9. 14:30` where they are written out (`formatDateLong`); the locale only
|
|
73
92
|
translates month and weekday names.
|
|
74
93
|
|
|
75
|
-
`DataTable` handles search, sorting, pagination
|
|
76
|
-
|
|
77
|
-
|
|
94
|
+
`DataTable` handles search, filters, sorting, pagination, selection, row actions and inline editing for
|
|
95
|
+
rows held in memory. Columns declare what they take part in:
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
const columns: DataTableColumn<Driver>[] = [
|
|
99
|
+
{ id: 'badge', header: 'Badge', mono: true, searchMode: 'exact' },
|
|
100
|
+
{ id: 'name', header: 'Name', edit: 'text' },
|
|
101
|
+
{ id: 'depot', header: 'Depot', filter: 'select', edit: { type: 'select', options: depots } },
|
|
102
|
+
{ id: 'active', header: 'Active', filter: 'toggle', edit: 'checkbox', cell: (row) => <StatusBadge on={row.active} /> },
|
|
103
|
+
{ id: 'hired', header: 'Hired', filter: 'dateRange' },
|
|
104
|
+
{ id: 'notes', header: 'Notes', hidden: true }, // searched, not shown
|
|
105
|
+
];
|
|
106
|
+
|
|
107
|
+
<DataTable
|
|
108
|
+
data={drivers}
|
|
109
|
+
columns={columns}
|
|
110
|
+
locale="hu"
|
|
111
|
+
filters={[{ id: 'new', type: 'toggle', label: 'New this month', match: isNew }]}
|
|
112
|
+
rowActions={(row) => [{ label: 'Locate', icon: <MapPin />, onClick: () => locate(row) }]}
|
|
113
|
+
rowTone={(row) => (row.suspended ? 'danger' : undefined)}
|
|
114
|
+
onRowSave={(row) => api.saveDriver(row)}
|
|
115
|
+
onRowDelete={(row) => confirmDelete(row)}
|
|
116
|
+
/>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
A `select` filter collects its options from the rows unless you pass `options`; a `toggle` keeps truthy
|
|
120
|
+
values, or the rows passing its `match`; a `dateRange` includes both of its days. `onRowSave` adds the
|
|
121
|
+
edit action and receives the edited row: return a promise to keep the row open while it saves, and reject
|
|
122
|
+
it to leave the row open for another try.
|
|
123
|
+
|
|
124
|
+
Every piece of state (`search`, `filterValues`, `sort`, `page`, `pageSize`, `selection`) works
|
|
125
|
+
uncontrolled, or controlled with its `on…Change` callback. With `mode="server"` the table renders the page
|
|
126
|
+
it is given and reports those changes, so the API does the work; typing in the search box is debounced
|
|
127
|
+
by 300 ms (`searchDebounce`). Pass `total`, `loading` and `error` alongside:
|
|
78
128
|
|
|
79
129
|
```tsx
|
|
80
130
|
<DataTable
|
|
@@ -89,9 +139,61 @@ does the work; pass `total`, `loading` and `error` alongside:
|
|
|
89
139
|
onPageChange={setPage}
|
|
90
140
|
onSortChange={setSort}
|
|
91
141
|
onSearchChange={setSearch}
|
|
142
|
+
onFilterValuesChange={setFilters}
|
|
143
|
+
/>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
The table measures its columns once, with the longest values of all rows, and then holds their widths:
|
|
147
|
+
paging, sorting, filtering and editing a row move nothing, and a short last page stays as tall as a full
|
|
148
|
+
one. The widths are measured again when the table is resized. A column's `width` is a starting point and
|
|
149
|
+
`minWidth` a floor; `truncate` cuts long text with an ellipsis instead of wrapping it. `layout="auto"`
|
|
150
|
+
hands the widths back to the browser.
|
|
151
|
+
|
|
152
|
+
For thousands of rows, `virtualized` renders only the ones in view inside `maxHeight` (default `32rem`)
|
|
153
|
+
and turns pagination off. Rows are then one line high and every column fits its longest value, so mark
|
|
154
|
+
long-text columns `truncate`. `onEndReached` loads more rows as the end is scrolled into view:
|
|
155
|
+
|
|
156
|
+
```tsx
|
|
157
|
+
<DataTable data={shipments} columns={columns} virtualized maxHeight={480} />
|
|
158
|
+
|
|
159
|
+
<DataTable
|
|
160
|
+
mode="server"
|
|
161
|
+
data={rows}
|
|
162
|
+
total={total}
|
|
163
|
+
columns={columns}
|
|
164
|
+
loading={isFetchingNextPage}
|
|
165
|
+
paginated={false}
|
|
166
|
+
maxHeight={480}
|
|
167
|
+
onEndReached={fetchNextPage}
|
|
92
168
|
/>
|
|
93
169
|
```
|
|
94
170
|
|
|
171
|
+
Rows of another height take `virtualized={{ rowHeight: 56 }}`. A row scrolled far out of view is
|
|
172
|
+
unmounted, so focus inside it is lost; an edit in progress is kept and shows again when the row returns.
|
|
173
|
+
|
|
174
|
+
For another layout, `useDataTable` takes the same options and returns the state and the processed rows,
|
|
175
|
+
and the parts render it wherever you place them inside `DataTable.Root`:
|
|
176
|
+
|
|
177
|
+
```tsx
|
|
178
|
+
const table = useDataTable({ data, columns });
|
|
179
|
+
|
|
180
|
+
<DataTable.Root table={table}>
|
|
181
|
+
<DataTable.Toolbar>
|
|
182
|
+
<DataTable.Search />
|
|
183
|
+
<DataTable.Filter id="depot" />
|
|
184
|
+
<DataTable.Actions>
|
|
185
|
+
<DataTable.Summary />
|
|
186
|
+
<Button onClick={() => exportCsv(table.rows.map(({ row }) => row))}>Export</Button>
|
|
187
|
+
</DataTable.Actions>
|
|
188
|
+
</DataTable.Toolbar>
|
|
189
|
+
<DataTable.Content density="compact" maxHeight={480} />
|
|
190
|
+
<DataTable.Pagination />
|
|
191
|
+
</DataTable.Root>
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
`DataTable.Filters` renders every filter with a clear button, and `useDataTableContext()` gives your own
|
|
195
|
+
components the same table.
|
|
196
|
+
|
|
95
197
|
`FileUpload` collects `File` objects and leaves the upload to you; report its progress per file through
|
|
96
198
|
`fileState`. Components with built-in text (`DataTable`, `Pagination`, `DatePicker`, `DateRangePicker`,
|
|
97
199
|
`Calendar`, `FileUpload`, `Stepper`) take a `labels` prop for translation, and the date components take a
|
|
@@ -8,6 +8,18 @@ declare function AccordionItem({ className, ref, ...props }: BaseAccordion.Item.
|
|
|
8
8
|
/** Header + trigger + chevron in one. */
|
|
9
9
|
declare function AccordionTrigger({ className, children, ref, ...props }: BaseAccordion.Trigger.Props): import("react").JSX.Element;
|
|
10
10
|
declare function AccordionPanel({ className, children, ref, ...props }: BaseAccordion.Panel.Props): import("react").JSX.Element;
|
|
11
|
+
/**
|
|
12
|
+
* Expandable sections. Compose `Accordion.Root` › `Accordion.Item` (give each a `value`) ›
|
|
13
|
+
* `Accordion.Trigger` + `Accordion.Panel`. Pass `multiple` to `Root` to allow several open at once.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* <Accordion.Root defaultValue={['a']}>
|
|
17
|
+
* <Accordion.Item value="a">
|
|
18
|
+
* <Accordion.Trigger>Billing</Accordion.Trigger>
|
|
19
|
+
* <Accordion.Panel>…</Accordion.Panel>
|
|
20
|
+
* </Accordion.Item>
|
|
21
|
+
* </Accordion.Root>
|
|
22
|
+
*/
|
|
11
23
|
export declare const Accordion: {
|
|
12
24
|
Root: typeof AccordionRoot;
|
|
13
25
|
Item: typeof AccordionItem;
|
|
@@ -192,6 +192,18 @@ function AccordionPanel(t0) {
|
|
|
192
192
|
} else t3 = $[13];
|
|
193
193
|
return t3;
|
|
194
194
|
}
|
|
195
|
+
/**
|
|
196
|
+
* Expandable sections. Compose `Accordion.Root` › `Accordion.Item` (give each a `value`) ›
|
|
197
|
+
* `Accordion.Trigger` + `Accordion.Panel`. Pass `multiple` to `Root` to allow several open at once.
|
|
198
|
+
*
|
|
199
|
+
* @example
|
|
200
|
+
* <Accordion.Root defaultValue={['a']}>
|
|
201
|
+
* <Accordion.Item value="a">
|
|
202
|
+
* <Accordion.Trigger>Billing</Accordion.Trigger>
|
|
203
|
+
* <Accordion.Panel>…</Accordion.Panel>
|
|
204
|
+
* </Accordion.Item>
|
|
205
|
+
* </Accordion.Root>
|
|
206
|
+
*/
|
|
195
207
|
var Accordion$1 = {
|
|
196
208
|
Root: AccordionRoot,
|
|
197
209
|
Item: AccordionItem,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","names":["Accordion","BaseAccordion","withClass","ChevronDownIcon","AccordionRootProps","Root","Props","variant","AccordionRoot","t0","$","_c","className","props","ref","t1","undefined","t2","t3","AccordionItem","AccordionTrigger","children","Symbol","for","t4","AccordionPanel","Item","Trigger","Panel","_c","BaseAccordion","Accordion"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Accordion as BaseAccordion } from '@base-ui/react/accordion';\nimport { withClass } from '../../utils/cx';\nimport { ChevronDownIcon } from '../../icons';\n\nexport interface AccordionRootProps extends BaseAccordion.Root.Props {\n /** `separated` renders each item as its own card; `plain` uses dividers. */\n variant?: 'separated' | 'plain';\n}\n\nfunction AccordionRoot({ variant = 'plain', className, ref, ...props }: AccordionRootProps) {\n return (\n <BaseAccordion.Root ref={ref} className={withClass('oui-accordion', className)} data-variant={variant} {...props} />\n );\n}\n\nfunction AccordionItem({ className, ref, ...props }: BaseAccordion.Item.Props) {\n return <BaseAccordion.Item ref={ref} className={withClass('oui-accordion__item', className)} {...props} />;\n}\n\n/** Header + trigger + chevron in one. */\nfunction AccordionTrigger({ className, children, ref, ...props }: BaseAccordion.Trigger.Props) {\n return (\n <BaseAccordion.Header className=\"oui-accordion__header\">\n <BaseAccordion.Trigger ref={ref} className={withClass('oui-accordion__trigger', className)} {...props}>\n <span className=\"oui-accordion__trigger-label\">{children}</span>\n <ChevronDownIcon className=\"oui-accordion__chevron\" />\n </BaseAccordion.Trigger>\n </BaseAccordion.Header>\n );\n}\n\nfunction AccordionPanel({ className, children, ref, ...props }: BaseAccordion.Panel.Props) {\n return (\n <BaseAccordion.Panel ref={ref} className={withClass('oui-accordion__panel', className)} {...props}>\n <div className=\"oui-accordion__content\">{children}</div>\n </BaseAccordion.Panel>\n );\n}\n\nexport const Accordion = {\n Root: AccordionRoot,\n Item: AccordionItem,\n Trigger: AccordionTrigger,\n Panel: AccordionPanel,\n};\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":["Accordion","BaseAccordion","withClass","ChevronDownIcon","AccordionRootProps","Root","Props","variant","AccordionRoot","t0","$","_c","className","props","ref","t1","undefined","t2","t3","AccordionItem","AccordionTrigger","children","Symbol","for","t4","AccordionPanel","Item","Trigger","Panel","_c","BaseAccordion","Accordion"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Accordion as BaseAccordion } from '@base-ui/react/accordion';\nimport { withClass } from '../../utils/cx';\nimport { ChevronDownIcon } from '../../icons';\n\nexport interface AccordionRootProps extends BaseAccordion.Root.Props {\n /** `separated` renders each item as its own card; `plain` uses dividers. */\n variant?: 'separated' | 'plain';\n}\n\nfunction AccordionRoot({ variant = 'plain', className, ref, ...props }: AccordionRootProps) {\n return (\n <BaseAccordion.Root ref={ref} className={withClass('oui-accordion', className)} data-variant={variant} {...props} />\n );\n}\n\nfunction AccordionItem({ className, ref, ...props }: BaseAccordion.Item.Props) {\n return <BaseAccordion.Item ref={ref} className={withClass('oui-accordion__item', className)} {...props} />;\n}\n\n/** Header + trigger + chevron in one. */\nfunction AccordionTrigger({ className, children, ref, ...props }: BaseAccordion.Trigger.Props) {\n return (\n <BaseAccordion.Header className=\"oui-accordion__header\">\n <BaseAccordion.Trigger ref={ref} className={withClass('oui-accordion__trigger', className)} {...props}>\n <span className=\"oui-accordion__trigger-label\">{children}</span>\n <ChevronDownIcon className=\"oui-accordion__chevron\" />\n </BaseAccordion.Trigger>\n </BaseAccordion.Header>\n );\n}\n\nfunction AccordionPanel({ className, children, ref, ...props }: BaseAccordion.Panel.Props) {\n return (\n <BaseAccordion.Panel ref={ref} className={withClass('oui-accordion__panel', className)} {...props}>\n <div className=\"oui-accordion__content\">{children}</div>\n </BaseAccordion.Panel>\n );\n}\n\n/**\n * Expandable sections. Compose `Accordion.Root` › `Accordion.Item` (give each a `value`) ›\n * `Accordion.Trigger` + `Accordion.Panel`. Pass `multiple` to `Root` to allow several open at once.\n *\n * @example\n * <Accordion.Root defaultValue={['a']}>\n * <Accordion.Item value=\"a\">\n * <Accordion.Trigger>Billing</Accordion.Trigger>\n * <Accordion.Panel>…</Accordion.Panel>\n * </Accordion.Item>\n * </Accordion.Root>\n */\nexport const Accordion = {\n Root: AccordionRoot,\n Item: AccordionItem,\n Trigger: AccordionTrigger,\n Panel: AccordionPanel,\n};\n"],"mappings":"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"}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
3
3
|
export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
4
|
+
/** Ref to the alert element. */
|
|
4
5
|
ref?: React.Ref<HTMLDivElement>;
|
|
6
|
+
/** Semantic color and default icon. `danger` and `warning` announce as an alert role. */
|
|
5
7
|
tone?: AlertTone;
|
|
6
8
|
/** `soft` (tinted, default) or `outline`. */
|
|
7
9
|
variant?: 'soft' | 'outline';
|
|
10
|
+
/** Bold first line above the message. */
|
|
8
11
|
title?: React.ReactNode;
|
|
9
12
|
/** Custom icon, or `false` to hide it. */
|
|
10
13
|
icon?: React.ReactNode | false;
|
|
@@ -12,6 +15,7 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
|
|
|
12
15
|
actions?: React.ReactNode;
|
|
13
16
|
/** Shows a dismiss button. */
|
|
14
17
|
onDismiss?: () => void;
|
|
18
|
+
/** Accessible name of the dismiss button. */
|
|
15
19
|
dismissLabel?: string;
|
|
16
20
|
}
|
|
17
21
|
/** Inline message for page- or section-level feedback. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","names":["React","cx","CircleCheckIcon","CircleXIcon","InfoIcon","TriangleAlertIcon","XIcon","IconButton","AlertTone","AlertProps","Omit","HTMLAttributes","HTMLDivElement","ref","Ref","tone","variant","title","ReactNode","icon","actions","onDismiss","dismissLabel","defaultIcons","Record","info","neutral","success","warning","danger","Alert","t0","$","_c","children","className","props","t1","t2","t3","undefined","urgent","iconNode","t4","t5","t6","t7","t8","t9","t10","t11","t12","_c"],"sources":["../../../src/components/alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\nimport { CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon, XIcon } from '../../icons';\nimport { IconButton } from '../button/Button';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n\nexport interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n ref?: React.Ref<HTMLDivElement>;\n tone?: AlertTone;\n /** `soft` (tinted, default) or `outline`. */\n variant?: 'soft' | 'outline';\n title?: React.ReactNode;\n /** Custom icon, or `false` to hide it. */\n icon?: React.ReactNode | false;\n /** Buttons rendered after the message. */\n actions?: React.ReactNode;\n /** Shows a dismiss button. */\n onDismiss?: () => void;\n dismissLabel?: string;\n}\n\nconst defaultIcons: Record<AlertTone, React.ReactNode> = {\n info: <InfoIcon />,\n neutral: <InfoIcon />,\n success: <CircleCheckIcon />,\n warning: <TriangleAlertIcon />,\n danger: <CircleXIcon />,\n};\n\n/** Inline message for page- or section-level feedback. */\nexport function Alert({\n tone = 'info',\n variant = 'soft',\n title,\n icon,\n actions,\n onDismiss,\n dismissLabel = 'Dismiss',\n className,\n children,\n ref,\n ...props\n}: AlertProps) {\n const urgent = tone === 'danger' || tone === 'warning';\n const iconNode = icon === false ? null : (icon ?? defaultIcons[tone]);\n return (\n <div\n ref={ref}\n role={urgent ? 'alert' : 'status'}\n className={cx('oui-alert', className)}\n data-tone={tone}\n data-variant={variant}\n {...props}\n >\n {iconNode && <span className=\"oui-alert__icon\">{iconNode}</span>}\n <div className=\"oui-alert__body\">\n {title && <p className=\"oui-alert__title\">{title}</p>}\n {children && <div className=\"oui-alert__message\">{children}</div>}\n {actions && <div className=\"oui-alert__actions\">{actions}</div>}\n </div>\n {onDismiss && (\n <IconButton className=\"oui-alert__dismiss\" size=\"sm\" aria-label={dismissLabel} onClick={onDismiss}>\n <XIcon />\n </IconButton>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"Alert.js","names":["React","cx","CircleCheckIcon","CircleXIcon","InfoIcon","TriangleAlertIcon","XIcon","IconButton","AlertTone","AlertProps","Omit","HTMLAttributes","HTMLDivElement","ref","Ref","tone","variant","title","ReactNode","icon","actions","onDismiss","dismissLabel","defaultIcons","Record","info","neutral","success","warning","danger","Alert","t0","$","_c","children","className","props","t1","t2","t3","undefined","urgent","iconNode","t4","t5","t6","t7","t8","t9","t10","t11","t12","_c"],"sources":["../../../src/components/alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\nimport { CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon, XIcon } from '../../icons';\nimport { IconButton } from '../button/Button';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n\nexport interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Ref to the alert element. */\n ref?: React.Ref<HTMLDivElement>;\n /** Semantic color and default icon. `danger` and `warning` announce as an alert role. */\n tone?: AlertTone;\n /** `soft` (tinted, default) or `outline`. */\n variant?: 'soft' | 'outline';\n /** Bold first line above the message. */\n title?: React.ReactNode;\n /** Custom icon, or `false` to hide it. */\n icon?: React.ReactNode | false;\n /** Buttons rendered after the message. */\n actions?: React.ReactNode;\n /** Shows a dismiss button. */\n onDismiss?: () => void;\n /** Accessible name of the dismiss button. */\n dismissLabel?: string;\n}\n\nconst defaultIcons: Record<AlertTone, React.ReactNode> = {\n info: <InfoIcon />,\n neutral: <InfoIcon />,\n success: <CircleCheckIcon />,\n warning: <TriangleAlertIcon />,\n danger: <CircleXIcon />,\n};\n\n/** Inline message for page- or section-level feedback. */\nexport function Alert({\n tone = 'info',\n variant = 'soft',\n title,\n icon,\n actions,\n onDismiss,\n dismissLabel = 'Dismiss',\n className,\n children,\n ref,\n ...props\n}: AlertProps) {\n const urgent = tone === 'danger' || tone === 'warning';\n const iconNode = icon === false ? null : (icon ?? defaultIcons[tone]);\n return (\n <div\n ref={ref}\n role={urgent ? 'alert' : 'status'}\n className={cx('oui-alert', className)}\n data-tone={tone}\n data-variant={variant}\n {...props}\n >\n {iconNode && <span className=\"oui-alert__icon\">{iconNode}</span>}\n <div className=\"oui-alert__body\">\n {title && <p className=\"oui-alert__title\">{title}</p>}\n {children && <div className=\"oui-alert__message\">{children}</div>}\n {actions && <div className=\"oui-alert__actions\">{actions}</div>}\n </div>\n {onDismiss && (\n <IconButton className=\"oui-alert__dismiss\" size=\"sm\" aria-label={dismissLabel} onClick={onDismiss}>\n <XIcon />\n </IconButton>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -13,14 +13,21 @@ export interface NavbarProps extends useRender.ComponentProps<'nav', NavbarState
|
|
|
13
13
|
collapsible?: boolean;
|
|
14
14
|
/** Controlled collapsed state. */
|
|
15
15
|
collapsed?: boolean;
|
|
16
|
+
/** Initial collapsed state when uncontrolled. */
|
|
16
17
|
defaultCollapsed?: boolean;
|
|
18
|
+
/** Called when the user collapses or expands the navbar. */
|
|
17
19
|
onCollapsedChange?: (collapsed: boolean) => void;
|
|
18
20
|
/** Temporarily opens a collapsed navbar while the mouse is over it. Defaults to `true`. */
|
|
19
21
|
expandOnHover?: boolean;
|
|
20
22
|
/** Accessible names for the icon-only toggle. */
|
|
21
23
|
collapseLabel?: string;
|
|
24
|
+
/** Accessible name of the toggle while collapsed. */
|
|
22
25
|
expandLabel?: string;
|
|
23
26
|
}
|
|
27
|
+
/**
|
|
28
|
+
* Collapsible side navigation. Use inside `AppShell`. Compose with `NavbarHeader` (`NavbarBrand`),
|
|
29
|
+
* `NavbarSection` (`NavbarSectionLabel`, `NavbarItem`) and `NavbarFooter`.
|
|
30
|
+
*/
|
|
24
31
|
export declare function Navbar({ variant, collapsible, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, expandOnHover, collapseLabel, expandLabel, render, children, ref, ...props }: NavbarProps): React.JSX.Element;
|
|
25
32
|
export declare const NavbarHeader: {
|
|
26
33
|
(props: import("../../utils/primitive").PrimitiveProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
@@ -39,15 +46,20 @@ export declare const NavbarSectionLabel: {
|
|
|
39
46
|
displayName: string;
|
|
40
47
|
};
|
|
41
48
|
export interface NavbarBrandProps extends Omit<useRender.ComponentProps<'div'>, 'title'> {
|
|
49
|
+
/** Logo or icon shown before the title; stays visible when the navbar is collapsed. */
|
|
42
50
|
logo?: React.ReactNode;
|
|
51
|
+
/** Product or organization name. */
|
|
43
52
|
title: React.ReactNode;
|
|
53
|
+
/** Smaller line under the title. */
|
|
44
54
|
subtitle?: React.ReactNode;
|
|
45
55
|
}
|
|
56
|
+
/** Logo, title and subtitle block for the top of a `Navbar`. */
|
|
46
57
|
export declare function NavbarBrand({ logo, title, subtitle, render, ref, ...props }: NavbarBrandProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
47
58
|
export type NavbarItemState = {
|
|
48
59
|
active: boolean;
|
|
49
60
|
};
|
|
50
61
|
export interface NavbarItemProps extends useRender.ComponentProps<'a', NavbarItemState> {
|
|
62
|
+
/** Icon shown before the label; it stays visible when the navbar is collapsed to a rail. */
|
|
51
63
|
icon?: React.ReactNode;
|
|
52
64
|
/** Marks the current page (sets aria-current). */
|
|
53
65
|
active?: boolean;
|
|
@@ -60,6 +72,7 @@ export interface NavbarItemProps extends useRender.ComponentProps<'a', NavbarIte
|
|
|
60
72
|
*/
|
|
61
73
|
export declare function NavbarItem({ icon, active, badge, render, children, ref, ...props }: NavbarItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
62
74
|
export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
75
|
+
/** Ref to the shell's root element. */
|
|
63
76
|
ref?: React.Ref<HTMLDivElement>;
|
|
64
77
|
/** Navbar content (usually a `<Navbar>`). Rendered in a drawer on small screens. */
|
|
65
78
|
navbar: React.ReactNode;
|
|
@@ -67,6 +80,7 @@ export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
67
80
|
mobileBrand?: React.ReactNode;
|
|
68
81
|
/** Extra content on the right of the mobile top bar. */
|
|
69
82
|
mobileActions?: React.ReactNode;
|
|
83
|
+
/** Accessible name of the button that opens the navigation drawer on small screens. */
|
|
70
84
|
menuLabel?: string;
|
|
71
85
|
/** Props for the scrolling `<main>` element. */
|
|
72
86
|
mainProps?: React.HTMLAttributes<HTMLElement>;
|
|
@@ -78,19 +92,27 @@ export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
78
92
|
*/
|
|
79
93
|
export declare function AppShell({ navbar, mobileBrand, mobileActions, menuLabel, mainProps, className, children, ref, ...props }: AppShellProps): React.JSX.Element;
|
|
80
94
|
export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
|
|
95
|
+
/** Ref to the `<header>` element. */
|
|
81
96
|
ref?: React.Ref<HTMLElement>;
|
|
82
97
|
/** Trail shown above the title, usually `<Breadcrumbs>`. */
|
|
83
98
|
breadcrumbs?: React.ReactNode;
|
|
99
|
+
/** Small label above the title. */
|
|
84
100
|
eyebrow?: React.ReactNode;
|
|
101
|
+
/** Page title, rendered as the page `<h1>`. */
|
|
85
102
|
title: React.ReactNode;
|
|
103
|
+
/** Supporting text under the title. */
|
|
86
104
|
description?: React.ReactNode;
|
|
105
|
+
/** Buttons or controls aligned to the right of the title. */
|
|
87
106
|
actions?: React.ReactNode;
|
|
88
107
|
}
|
|
108
|
+
/** Page title block with optional breadcrumbs, eyebrow, description and actions. */
|
|
89
109
|
export declare function PageHeader({ breadcrumbs, eyebrow, title, description, actions, className, ref, ...props }: PageHeaderProps): React.JSX.Element;
|
|
90
110
|
export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
111
|
+
/** Ref to the grid element. */
|
|
91
112
|
ref?: React.Ref<HTMLDivElement>;
|
|
92
113
|
/** Columns on wide screens; collapses to 2 below 1200px (for 4+) and 1 below 900px. */
|
|
93
114
|
columns?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
115
|
+
/** Space between grid cells. */
|
|
94
116
|
gap?: 'sm' | 'md' | 'lg';
|
|
95
117
|
}
|
|
96
118
|
/** Responsive dashboard grid. */
|
|
@@ -12,6 +12,10 @@ import { mergeProps } from "@base-ui/react/merge-props";
|
|
|
12
12
|
//#region src/components/app-shell/AppShell.tsx
|
|
13
13
|
var NavbarCollapsedContext = React.createContext(false);
|
|
14
14
|
var NavbarDrawerContext = React.createContext(false);
|
|
15
|
+
/**
|
|
16
|
+
* Collapsible side navigation. Use inside `AppShell`. Compose with `NavbarHeader` (`NavbarBrand`),
|
|
17
|
+
* `NavbarSection` (`NavbarSectionLabel`, `NavbarItem`) and `NavbarFooter`.
|
|
18
|
+
*/
|
|
15
19
|
function Navbar(t0) {
|
|
16
20
|
const $ = c(29);
|
|
17
21
|
const { variant: t1, collapsible: t2, collapsed: collapsedProp, defaultCollapsed: t3, onCollapsedChange, expandOnHover: t4, collapseLabel: t5, expandLabel: t6, render, children, ref, ...props } = t0;
|
|
@@ -154,6 +158,7 @@ var NavbarHeader = createPrimitive("div", "oui-navbar__header", "NavbarHeader");
|
|
|
154
158
|
var NavbarFooter = createPrimitive("div", "oui-navbar__footer", "NavbarFooter");
|
|
155
159
|
var NavbarSection = createPrimitive("div", "oui-navbar__section", "NavbarSection");
|
|
156
160
|
var NavbarSectionLabel = createPrimitive("div", "oui-navbar__section-label", "NavbarSectionLabel");
|
|
161
|
+
/** Logo, title and subtitle block for the top of a `Navbar`. */
|
|
157
162
|
function NavbarBrand(t0) {
|
|
158
163
|
const $ = c(23);
|
|
159
164
|
let t1;
|
|
@@ -518,6 +523,7 @@ function AppShell(t0) {
|
|
|
518
523
|
} else t17 = $[47];
|
|
519
524
|
return t17;
|
|
520
525
|
}
|
|
526
|
+
/** Page title block with optional breadcrumbs, eyebrow, description and actions. */
|
|
521
527
|
function PageHeader(t0) {
|
|
522
528
|
const $ = c(32);
|
|
523
529
|
let actions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.js","names":["React","Dialog","BaseDialog","useRender","mergeProps","cx","createPrimitive","usePortalContainer","ChevronLeftIcon","MenuIcon","XIcon","NavbarVariant","NavbarState","variant","collapsed","peek","NavbarProps","ComponentProps","collapsible","defaultCollapsed","onCollapsedChange","expandOnHover","collapseLabel","expandLabel","NavbarCollapsedContext","createContext","NavbarDrawerContext","Navbar","t0","$","_c","t1","t2","collapsedProp","t3","t4","t5","t6","render","children","ref","props","undefined","inDrawer","useContext","canCollapse","internal","setInternal","useState","label","pointerInside","setPointerInside","hovered","setHovered","t7","t8","timer","setTimeout","clearTimeout","useEffect","t9","Symbol","for","endHover","t10","toggle","t11","event","pointerType","onPointerEnter","t12","t13","state","t14","t15","t16","t17","className","onPointerLeave","t18","defaultTagName","element","t19","t20","NavbarHeader","NavbarFooter","NavbarSection","NavbarSectionLabel","NavbarBrandProps","Omit","logo","ReactNode","title","subtitle","NavbarBrand","NavbarItemState","active","NavbarItemProps","icon","badge","NavbarItem","AppShellProps","HTMLAttributes","HTMLDivElement","Ref","navbar","mobileBrand","mobileActions","menuLabel","mainProps","HTMLElement","AppShell","open","setOpen","container","target","closest","closeOnNavigate","PageHeaderProps","breadcrumbs","eyebrow","description","actions","PageHeader","GridProps","columns","gap","Grid","_c","_Fragment","BaseDialog"],"sources":["../../../src/components/app-shell/AppShell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { useRender } from '@base-ui/react/use-render';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from '../../utils/cx';\nimport { createPrimitive } from '../../utils/primitive';\nimport { usePortalContainer } from '../../utils/portal';\nimport { ChevronLeftIcon, MenuIcon, XIcon } from '../../icons';\n\n// ─── Navbar ─────────────────────────────────────────────────────────────────\n\nexport type NavbarVariant = 'inverse' | 'surface';\n\nexport type NavbarState = { variant: NavbarVariant; collapsed: boolean; peek: boolean };\n\nexport interface NavbarProps extends useRender.ComponentProps<'nav', NavbarState> {\n /** `inverse` (brand-colored, default) or `surface` (light panel). */\n variant?: NavbarVariant;\n /** Shows a toggle in the top right that shrinks the navbar to an icon rail. Defaults to `true`. */\n collapsible?: boolean;\n /** Controlled collapsed state. */\n collapsed?: boolean;\n defaultCollapsed?: boolean;\n onCollapsedChange?: (collapsed: boolean) => void;\n /** Temporarily opens a collapsed navbar while the mouse is over it. Defaults to `true`. */\n expandOnHover?: boolean;\n /** Accessible names for the icon-only toggle. */\n collapseLabel?: string;\n expandLabel?: string;\n}\n\nconst NavbarCollapsedContext = React.createContext(false);\n// True inside the AppShell drawer, where the navbar always shows in full.\nconst NavbarDrawerContext = React.createContext(false);\n\nexport function Navbar({\n variant = 'inverse',\n collapsible = true,\n collapsed: collapsedProp,\n defaultCollapsed = false,\n onCollapsedChange,\n expandOnHover = true,\n collapseLabel = 'Collapse',\n expandLabel = 'Expand',\n render,\n children,\n ref,\n ...props\n}: NavbarProps) {\n const inDrawer = React.useContext(NavbarDrawerContext);\n const canCollapse = collapsible && !inDrawer;\n const [internal, setInternal] = React.useState(defaultCollapsed);\n const collapsed = canCollapse && (collapsedProp ?? internal);\n const label = collapsed ? expandLabel : collapseLabel;\n\n // Hover peek: shown in full once the mouse has rested over a collapsed navbar.\n const [pointerInside, setPointerInside] = React.useState(false);\n const [hovered, setHovered] = React.useState(false);\n React.useEffect(() => {\n if (!pointerInside) return;\n const timer = setTimeout(() => setHovered(true), 120);\n return () => clearTimeout(timer);\n }, [pointerInside]);\n const peek = collapsed && expandOnHover && hovered;\n\n const endHover = () => {\n setPointerInside(false);\n setHovered(false);\n };\n\n const toggle = () => {\n // Collapsing with the mouse still inside must not peek straight back open.\n endHover();\n if (collapsedProp === undefined) setInternal(!collapsed);\n onCollapsedChange?.(!collapsed);\n };\n\n const onPointerEnter = (event: React.PointerEvent) => {\n if (event.pointerType === 'mouse') setPointerInside(true);\n };\n\n const state: NavbarState = { variant, collapsed: collapsed && !peek, peek };\n const element = useRender({\n defaultTagName: 'nav',\n render,\n ref,\n state,\n props: mergeProps<'nav'>(\n {\n className: 'oui-navbar',\n onPointerEnter: collapsed && expandOnHover ? onPointerEnter : undefined,\n onPointerLeave: collapsed && expandOnHover ? endHover : undefined,\n children: (\n <>\n {canCollapse && (\n <button\n type=\"button\"\n className=\"oui-navbar__toggle\"\n aria-label={label}\n aria-expanded={!collapsed}\n title={label}\n onClick={toggle}\n >\n <ChevronLeftIcon />\n </button>\n )}\n {children}\n </>\n ),\n },\n props,\n ),\n });\n return <NavbarCollapsedContext value={collapsed && !peek}>{element}</NavbarCollapsedContext>;\n}\n\nexport const NavbarHeader = createPrimitive('div', 'oui-navbar__header', 'NavbarHeader');\nexport const NavbarFooter = createPrimitive('div', 'oui-navbar__footer', 'NavbarFooter');\nexport const NavbarSection = createPrimitive('div', 'oui-navbar__section', 'NavbarSection');\nexport const NavbarSectionLabel = createPrimitive('div', 'oui-navbar__section-label', 'NavbarSectionLabel');\n\nexport interface NavbarBrandProps extends Omit<useRender.ComponentProps<'div'>, 'title'> {\n logo?: React.ReactNode;\n title: React.ReactNode;\n subtitle?: React.ReactNode;\n}\n\nexport function NavbarBrand({ logo, title, subtitle, render, ref, ...props }: NavbarBrandProps) {\n return useRender({\n defaultTagName: 'div',\n render,\n ref,\n props: mergeProps<'div'>(\n {\n className: 'oui-navbar__brand',\n children: (\n <>\n {logo && <span className=\"oui-navbar__logo\">{logo}</span>}\n <span className=\"oui-navbar__brand-text\">\n <span className=\"oui-navbar__brand-title\">{title}</span>\n {subtitle && <span className=\"oui-navbar__brand-subtitle\">{subtitle}</span>}\n </span>\n </>\n ),\n },\n props,\n ),\n });\n}\n\nexport type NavbarItemState = { active: boolean };\n\nexport interface NavbarItemProps extends useRender.ComponentProps<'a', NavbarItemState> {\n icon?: React.ReactNode;\n /** Marks the current page (sets aria-current). */\n active?: boolean;\n /** Trailing content such as a count badge. */\n badge?: React.ReactNode;\n}\n\n/**\n * Navigation link. Renders an `<a>`; use `render={<Link to=\"…\" />}` for a\n * router link or `render={<button />}` for an action.\n */\nexport function NavbarItem({ icon, active = false, badge, render, children, ref, ...props }: NavbarItemProps) {\n const collapsed = React.useContext(NavbarCollapsedContext);\n const state: NavbarItemState = { active };\n return useRender({\n defaultTagName: 'a',\n render,\n ref,\n state,\n props: mergeProps<'a'>(\n {\n className: 'oui-navbar__item',\n 'aria-current': active ? 'page' : undefined,\n title: collapsed && typeof children === 'string' ? children : undefined,\n children: (\n <>\n {icon && <span className=\"oui-navbar__item-icon\">{icon}</span>}\n <span className=\"oui-navbar__item-label\">{children}</span>\n {badge != null && <span className=\"oui-navbar__item-badge\">{badge}</span>}\n </>\n ),\n },\n props,\n ),\n });\n}\n\n// ─── App shell ───────────────────────────────────────────────────────────────\n\nexport interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {\n ref?: React.Ref<HTMLDivElement>;\n /** Navbar content (usually a `<Navbar>`). Rendered in a drawer on small screens. */\n navbar: React.ReactNode;\n /** Brand shown in the mobile top bar. */\n mobileBrand?: React.ReactNode;\n /** Extra content on the right of the mobile top bar. */\n mobileActions?: React.ReactNode;\n menuLabel?: string;\n /** Props for the scrolling `<main>` element. */\n mainProps?: React.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Full-height layout with a fixed navbar and an internally scrolling main\n * area. Below 900px the navbar moves into a slide-in drawer.\n * Customize width with `--oui-navbar-width` and `--oui-navbar-collapsed-width`.\n */\nexport function AppShell({\n navbar,\n mobileBrand,\n mobileActions,\n menuLabel = 'Open navigation',\n mainProps,\n className,\n children,\n ref,\n ...props\n}: AppShellProps) {\n const [open, setOpen] = React.useState(false);\n const container = usePortalContainer();\n\n const closeOnNavigate = (event: React.MouseEvent) => {\n if ((event.target as HTMLElement).closest('a, .oui-navbar__item')) setOpen(false);\n };\n\n return (\n <div ref={ref} className={cx('oui-app-shell', className)} {...props}>\n <div className=\"oui-app-shell__navbar\">{navbar}</div>\n\n <BaseDialog.Root open={open} onOpenChange={setOpen}>\n <header className=\"oui-app-shell__mobile-bar\">\n <BaseDialog.Trigger className=\"oui-app-shell__menu-button\" aria-label={menuLabel}>\n <MenuIcon />\n </BaseDialog.Trigger>\n <div className=\"oui-app-shell__mobile-brand\">{mobileBrand}</div>\n {mobileActions}\n </header>\n <BaseDialog.Portal container={container}>\n <BaseDialog.Backdrop className=\"oui-dialog__backdrop\" />\n <BaseDialog.Popup className=\"oui-app-shell__drawer\" aria-label=\"Navigation\" onClick={closeOnNavigate}>\n <BaseDialog.Close className=\"oui-app-shell__drawer-close\" aria-label=\"Close navigation\">\n <XIcon />\n </BaseDialog.Close>\n <NavbarDrawerContext value={true}>{navbar}</NavbarDrawerContext>\n </BaseDialog.Popup>\n </BaseDialog.Portal>\n </BaseDialog.Root>\n\n <main {...mainProps} className={cx('oui-app-shell__main', mainProps?.className)}>\n {children}\n </main>\n </div>\n );\n}\n\n// ─── Page layout helpers ─────────────────────────────────────────────────────\n\nexport interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {\n ref?: React.Ref<HTMLElement>;\n /** Trail shown above the title, usually `<Breadcrumbs>`. */\n breadcrumbs?: React.ReactNode;\n eyebrow?: React.ReactNode;\n title: React.ReactNode;\n description?: React.ReactNode;\n actions?: React.ReactNode;\n}\n\nexport function PageHeader({\n breadcrumbs,\n eyebrow,\n title,\n description,\n actions,\n className,\n ref,\n ...props\n}: PageHeaderProps) {\n return (\n <header ref={ref} className={cx('oui-page-header', className)} {...props}>\n <div className=\"oui-page-header__text\">\n {breadcrumbs && <div className=\"oui-page-header__breadcrumbs\">{breadcrumbs}</div>}\n {eyebrow && <span className=\"oui-eyebrow\">{eyebrow}</span>}\n <h1 className=\"oui-page-header__title\">{title}</h1>\n {description && <p className=\"oui-page-header__description\">{description}</p>}\n </div>\n {actions && <div className=\"oui-page-header__actions\">{actions}</div>}\n </header>\n );\n}\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n ref?: React.Ref<HTMLDivElement>;\n /** Columns on wide screens; collapses to 2 below 1200px (for 4+) and 1 below 900px. */\n columns?: 1 | 2 | 3 | 4 | 5 | 6;\n gap?: 'sm' | 'md' | 'lg';\n}\n\n/** Responsive dashboard grid. */\nexport function Grid({ columns = 3, gap = 'md', className, ref, ...props }: GridProps) {\n return <div ref={ref} className={cx('oui-grid', className)} data-columns={columns} data-gap={gap} {...props} />;\n}\n"],"mappings":";;;;;;;;;;;;AA+BA,IAAMwB,yBAAyBxB,MAAMyB,cAAc,KAAK;AAExD,IAAMC,sBAAsB1B,MAAMyB,cAAc,KAAK;AAErD,SAAOE,OAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAgB,MAAA,EAAAjB,SAAAkB,IAAAb,aAAAc,IAAAlB,WAAAmB,eAAAd,kBAAAe,IAAAd,mBAAAC,eAAAc,IAAAb,eAAAc,IAAAb,aAAAc,IAAAC,QAAAC,UAAAC,KAAA,GAAAC,UAAAb;CACrB,MAAAf,UAAAkB,OAAAW,KAAAA,IAAA,YAAAX;CACA,MAAAb,cAAAc,OAAAU,KAAAA,IAAA,OAAAV;CAEA,MAAAb,mBAAAe,OAAAQ,KAAAA,IAAA,QAAAR;CAEA,MAAAb,gBAAAc,OAAAO,KAAAA,IAAA,OAAAP;CACA,MAAAb,gBAAAc,OAAAM,KAAAA,IAAA,aAAAN;CACA,MAAAb,cAAAc,OAAAK,KAAAA,IAAA,WAAAL;CAMA,MAAAM,WAAiB3C,MAAK4C,WAAYlB,mBAAmB;CACrD,MAAAmB,cAAoB3B,eAAA,CAAgByB;CACpC,MAAA,CAAAG,UAAAC,eAAgC/C,MAAKgD,SAAU7B,gBAAgB;CAC/D,MAAAL,YAAkB+B,gBAAgBZ,iBAAAa;CAClC,MAAAG,QAAcnC,YAAAS,cAAAD;CAGd,MAAA,CAAA4B,eAAAC,oBAA0CnD,MAAKgD,SAAU,KAAK;CAC9D,MAAA,CAAAI,SAAAC,cAA8BrD,MAAKgD,SAAU,KAAK;CAAE,IAAAM;CAAA,IAAAC;CAAA,IAAA1B,EAAA,OAAAqB,eAAA;EACpCI,WAAA;GACd,IAAI,CAACJ,eAAa;GAClB,MAAAM,QAAcC,iBAAiBJ,WAAW,IAAI,GAAG,GAAG;GAAE,aACzCK,aAAaF,KAAK;EAAC;EAC/BD,KAAA,CAACL,aAAa;EAACrB,EAAA,KAAAqB;EAAArB,EAAA,KAAAyB;EAAAzB,EAAA,KAAA0B;CAAA,OAAA;EAAAD,KAAAzB,EAAA;EAAA0B,KAAA1B,EAAA;CAAA;CAJlB7B,MAAK2D,UAAWL,IAIbC,EAAe;CAClB,MAAAxC,OAAaD,aAAAO,iBAAA+B;CAAsC,IAAAQ;CAAA,IAAA/B,EAAA,OAAAgC,OAAAC,IAAA,2BAAA,GAAA;EAElCF,WAAA;GACfT,iBAAiB,KAAK;GACtBE,WAAW,KAAK;EAAC;EAClBxB,EAAA,KAAA+B;CAAA,OAAAA,KAAA/B,EAAA;CAHD,MAAAkC,WAAiBH;CAGf,IAAAI;CAAA,IAAAnC,EAAA,OAAAf,aAAAe,EAAA,OAAAI,iBAAAJ,EAAA,OAAAT,mBAAA;EAEa4C,YAAA;GAEbD,SAAS;GACT,IAAI9B,kBAAkBS,KAAAA,GAAWK,YAAY,CAACjC,SAAS;GACvDM,oBAAoB,CAACN,SAAS;EAAC;EAChCe,EAAA,KAAAf;EAAAe,EAAA,KAAAI;EAAAJ,EAAA,KAAAT;EAAAS,EAAA,KAAAmC;CAAA,OAAAA,MAAAnC,EAAA;CALD,MAAAoC,SAAeD;CAKb,IAAAE;CAAA,IAAArC,EAAA,OAAAgC,OAAAC,IAAA,2BAAA,GAAA;EAEqBI,OAAAC,UAAA;GACrB,IAAIA,MAAKC,gBAAiB,SAASjB,iBAAiB,IAAI;EAAE;EAC3DtB,EAAA,KAAAqC;CAAA,OAAAA,MAAArC,EAAA;CAFD,MAAAwC,iBAAuBH;CAI0B,MAAAI,MAAAxD,aAAA,CAAcC;CAAI,IAAAwD;CAAA,IAAA1C,EAAA,OAAAd,QAAAc,EAAA,QAAAyC,OAAAzC,EAAA,QAAAhB,SAAA;EAAxC0D,MAAA;GAAA1D;GAAAC,WAAsBwD;GAAkBvD;EAAO;EAACc,EAAA,KAAAd;EAAAc,EAAA,MAAAyC;EAAAzC,EAAA,MAAAhB;EAAAgB,EAAA,MAAA0C;CAAA,OAAAA,MAAA1C,EAAA;CAA3E,MAAA2C,QAA2BD;CAET,MAAAE,MAAA;CAAK,IAAAC;CAAA,IAAA7C,EAAA,QAAAgB,eAAAhB,EAAA,QAAAf,aAAAe,EAAA,QAAAoB,SAAApB,EAAA,QAAAoC,QAAA;EAWZS,MAAA7B,eACC,oBAAA,UAAA;GACO,MAAA;GACK,WAAA;GACEI,cAAAA;GACG,iBAAA,CAACnC;GACTmC,OAAAA;GACEgB,SAAAA;GAET,UAAA,oBAAC,iBAAD,CAAgB,CAAA;EACT,CAAA;EACVpC,EAAA,MAAAgB;EAAAhB,EAAA,MAAAf;EAAAe,EAAA,MAAAoB;EAAApB,EAAA,MAAAoC;EAAApC,EAAA,MAAA6C;CAAA,OAAAA,MAAA7C,EAAA;CAAA,IAAA8C;CAAA,IAAA9C,EAAA,QAAAU,YAAAV,EAAA,QAAA6C,KAAA;EAZHC,MAAA,qBAAAsD,UAAA,EAAA,UAAA,CACGvD,KAYAnC,QAAQ,EAAA,CAAA;EACRV,EAAA,MAAAU;EAAAV,EAAA,MAAA6C;EAAA7C,EAAA,MAAA8C;CAAA,OAAAA,MAAA9C,EAAA;CApBF,MAAA+C,MAAAxE,WACL;EAAAyE,WACa;EAAYR,gBACPvD,aAAAO,gBAAAgD,iBAAA3B,KAAAA;EAAuDoC,gBACvDhE,aAAAO,gBAAA0C,WAAArB,KAAAA;EAAiDH,UAE/DoC;CAgBJ,GACAlC,KACF;CAAC,IAAAsC;CAAA,IAAAlD,EAAA,QAAAW,OAAAX,EAAA,QAAAS,UAAAT,EAAA,QAAA2C,SAAA3C,EAAA,QAAA+C,KAAA;EA7BuBG,MAAA;GAAAC,gBACRP;GAAKnC;GAAAE;GAAAgC;GAAA/B,OAIdmC;EAyBT;EAAC/C,EAAA,MAAAW;EAAAX,EAAA,MAAAS;EAAAT,EAAA,MAAA2C;EAAA3C,EAAA,MAAA+C;EAAA/C,EAAA,MAAAkD;CAAA,OAAAA,MAAAlD,EAAA;CA9BD,MAAAoD,UAAgB9E,UAAU4E,GA8BzB;CACqC,MAAAG,MAAApE,aAAA,CAAcC;CAAI,IAAAoE;CAAA,IAAAtD,EAAA,QAAAoD,WAAApD,EAAA,QAAAqD,KAAA;EAAjDC,MAAA,oBAAC,wBAAD;GAA+B,OAAAD;GAAqBD,UAAAA;EAA7B,CAAA;EAA8DpD,EAAA,MAAAoD;EAAApD,EAAA,MAAAqD;EAAArD,EAAA,MAAAsD;CAAA,OAAAA,MAAAtD,EAAA;CAAA,OAArFsD;AAAqF;AAG9F,IAAaC,eAAe9E,gBAAgB,OAAO,sBAAsB,cAAc;AACvF,IAAa+E,eAAe/E,gBAAgB,OAAO,sBAAsB,cAAc;AACvF,IAAagF,gBAAgBhF,gBAAgB,OAAO,uBAAuB,eAAe;AAC1F,IAAaiF,qBAAqBjF,gBAAgB,OAAO,6BAA6B,oBAAoB;AAQ1G,SAAOwF,YAAAlE,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAE;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAqB,MAAA,EAAA8D,MAAAE,OAAAC,UAAAvD,QAAAE,KAAA,GAAAC,UAAAb;EACnBzB,KAAAA;EACW4B,KAAA;EAChBO,KAAAA;EACAE,KAAAA;EAAG,IAAAH;EAAA,IAAAR,EAAA,OAAA6D,MAAA;GAMMrD,KAAAqD,QAAQ,oBAAA,QAAA;IAAgB,WAAA;IAAoBA,UAAAA;GAAY,CAAA;GAAA7D,EAAA,KAAA6D;GAAA7D,EAAA,KAAAQ;EAAA,OAAAA,KAAAR,EAAA;EAAA,IAAAyB;EAAA,IAAAzB,EAAA,OAAA+D,OAAA;GAEvDtC,KAAA,oBAAA,QAAA;IAAgB,WAAA;IAA2BsC,UAAAA;GAAa,CAAA;GAAA/D,EAAA,KAAA+D;GAAA/D,EAAA,KAAAyB;EAAA,OAAAA,KAAAzB,EAAA;EAAA,IAAA0B;EAAA,IAAA1B,EAAA,QAAAgE,UAAA;GACvDtC,KAAAsC,YAAY,oBAAA,QAAA;IAAgB,WAAA;IAA8BA,UAAAA;GAAgB,CAAA;GAAAhE,EAAA,MAAAgE;GAAAhE,EAAA,MAAA0B;EAAA,OAAAA,KAAA1B,EAAA;EAAA,IAAA+B;EAAA,IAAA/B,EAAA,QAAAyB,MAAAzB,EAAA,QAAA0B,IAAA;GAF7EK,KAAA,qBAAA,QAAA;IAAgB,WAAA;IAAhB,UAAA,CACEN,IACCC,EACI;;GAAA1B,EAAA,MAAAyB;GAAAzB,EAAA,MAAA0B;GAAA1B,EAAA,MAAA+B;EAAA,OAAAA,KAAA/B,EAAA;EAAA,IAAAmC;EAAA,IAAAnC,EAAA,QAAAQ,MAAAR,EAAA,QAAA+B,IAAA;GALTI,MAAA,qBAAAiE,UAAA,EAAA,UAAA,CACG5F,IACDuB,EAGO,EAAA,CAAA;GACN/B,EAAA,MAAAQ;GAAAR,EAAA,MAAA+B;GAAA/B,EAAA,MAAAmC;EAAA,OAAAA,MAAAnC,EAAA;EAVFM,KAAA/B,WACL;GAAAyE,WACa;GAAmBtC,UAE5ByB;EAQJ,GACAvB,KACF;EAACZ,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAlBcE,KAAA;GAAA2C,gBACCjD;GAAKO,QACrBA;GAAME,KACNA;GAAGC,OACIN;EAeT;EAACN,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAnBM1B,GAAUkC,EAmBhB;AAAC;;;;;AAiBJ,SAAO+D,WAAAxE,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAoE,MAAAF,QAAAjE,IAAAoE,OAAA7D,QAAAC,UAAAC,KAAA,GAAAC,UAAAb;CAAQ,MAAAoE,SAAAjE,OAAAW,KAAAA,IAAA,QAAAX;CACjC,MAAAjB,YAAkBd,MAAK4C,WAAYpB,sBAAsB;CAAE,IAAAQ;CAAA,IAAAH,EAAA,OAAAmE,QAAA;EAC5BhE,KAAA,EAAAgE,OAAS;EAACnE,EAAA,KAAAmE;EAAAnE,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAzC,MAAA2C,QAA+BxC;CAEb,MAAAE,KAAA;CAAG,IAAAC;CAAA,IAAAN,EAAA,OAAAqE,MAAA;EAWV/D,KAAA+D,QAAQ,oBAAA,QAAA;GAAgB,WAAA;GAAyBA,UAAAA;EAAY,CAAA;EAAArE,EAAA,KAAAqE;EAAArE,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAU,UAAA;EAC9DH,KAAA,oBAAA,QAAA;GAAgB,WAAA;GAA0BG;EAAgB,CAAA;EAAAV,EAAA,KAAAU;EAAAV,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAsE,OAAA;EACzD9D,KAAA8D,SAAS,QAAQ,oBAAA,QAAA;GAAgB,WAAA;GAA0BA,UAAAA;EAAa,CAAA;EAAAtE,EAAA,KAAAsE;EAAAtE,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,OAAAM,MAAAN,EAAA,OAAAO,MAAAP,EAAA,QAAAQ,IAAA;EAH3EiB,KAAA,qBAAA2E,UAAA,EAAA,UAAA;GACG9F;GACDC;GACCC;EAAwE,EAAA,CAAA;EACxER,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAVF,MAAA0B,KAAAnD,WACL;EAAAyE,WACa;EAAkB,gBACbmB,SAAA,SAAAtD,KAAAA;EAA2BkD,OACpC9E,aAAa,OAAOyB,aAAa,WAAjCA,WAAAG,KAAAA;EAAgEH,UAErEe;CAMJ,GACAb,KACF;CAAC,IAAAmB;CAAA,IAAA/B,EAAA,QAAAW,OAAAX,EAAA,QAAAS,UAAAT,EAAA,QAAA2C,SAAA3C,EAAA,QAAA0B,IAAA;EAnBcK,KAAA;GAAAoB,gBACC9C;GAAGI;GAAAE;GAAAgC;GAAA/B,OAIZc;EAeT;EAAC1B,EAAA,MAAAW;EAAAX,EAAA,MAAAS;EAAAT,EAAA,MAAA2C;EAAA3C,EAAA,MAAA0B;EAAA1B,EAAA,MAAA+B;CAAA,OAAAA,KAAA/B,EAAA;CAAA,OApBM1B,UAAUyD,EAoBhB;AAAC;;;;;;AAuBJ,SAAOmD,SAAAnF,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAS;CAAA,IAAAsC;CAAA,IAAAgC;CAAA,IAAAF;CAAA,IAAAD;CAAA,IAAAD;CAAA,IAAAhE;CAAA,IAAAD;CAAA,IAAAT;CAAA,IAAAF,EAAA,OAAAD,IAAA;EAAkB,CAAA,CAAA6E,QAAAC,aAAAC,eAAAC,WAAA7E,IAAA8E,WAAAhC,WAAAtC,UAAAC,KAAA,GAAAC,SAAAb;EAUTC,EAAA,KAAAD;EAAAC,EAAA,KAAAU;EAAAV,EAAA,KAAAgD;EAAAhD,EAAA,KAAAgF;EAAAhF,EAAA,KAAA8E;EAAA9E,EAAA,KAAA6E;EAAA7E,EAAA,KAAA4E;EAAA5E,EAAA,KAAAY;EAAAZ,EAAA,KAAAW;EAAAX,EAAA,KAAAE;CAAA,OAAA;EAAAQ,WAAAV,EAAA;EAAAgD,YAAAhD,EAAA;EAAAgF,YAAAhF,EAAA;EAAA8E,gBAAA9E,EAAA;EAAA6E,cAAA7E,EAAA;EAAA4E,SAAA5E,EAAA;EAAAY,QAAAZ,EAAA;EAAAW,MAAAX,EAAA;EAAAE,KAAAF,EAAA;CAAA;CANd,MAAA+E,YAAA7E,OAAAW,KAAAA,IAAA,oBAAAX;CAOA,MAAA,CAAAiF,MAAAC,WAAwBjH,MAAKgD,SAAU,KAAK;CAC5C,MAAAkE,YAAkB3G,mBAAmB;CAAE,IAAAyB;CAAA,IAAAH,EAAA,QAAAgC,OAAAC,IAAA,2BAAA,GAAA;EAEf9B,MAAAmC,UAAA;GACtB,IAAKA,MAAKgD,OAAsBC,QAAU,sBAAsB,GAAGH,QAAQ,KAAK;EAAE;EACnFpF,EAAA,MAAAG;CAAA,OAAAA,KAAAH,EAAA;CAFD,MAAAwF,kBAAwBrF;CAEtB,IAAAE;CAAA,IAAAL,EAAA,QAAAgD,WAAA;EAG0B3C,KAAA7B,GAAG,iBAAiBwE,SAAS;EAAChD,EAAA,MAAAgD;EAAAhD,EAAA,MAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,QAAA4E,QAAA;EACtDtE,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAyBsE,UAAAA;EAAa,CAAA;EAAA5E,EAAA,MAAA4E;EAAA5E,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,QAAAgC,OAAAC,IAAA,2BAAA,GAAA;EAK/C1B,KAAA,oBAAC,UAAD,CAAS,CAAA;EAAGP,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAA+E,WAAA;EADdvE,KAAA,oBAAA6F,OAAA,SAAA;GAA8B,WAAA;GAAyCtB,cAAAA;GACrExE,UAAAA;EACF,CAAA;EAAqBP,EAAA,MAAA+E;EAAA/E,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,QAAA6E,aAAA;EACrBpD,KAAA,oBAAA,OAAA;GAAe,WAAA;GAA+BoD,UAAAA;EAAkB,CAAA;EAAA7E,EAAA,MAAA6E;EAAA7E,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAA8E,iBAAA9E,EAAA,QAAAQ,MAAAR,EAAA,QAAAyB,IAAA;EAJlEC,KAAA,qBAAA,UAAA;GAAkB,WAAA;GAAlB,UAAA;IACElB;IAGAiB;IACCqD;GACM;;EAAA9E,EAAA,MAAA8E;EAAA9E,EAAA,MAAAQ;EAAAR,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,IAAA+B;CAAA,IAAA/B,EAAA,QAAAgC,OAAAC,IAAA,2BAAA,GAAA;EAEPF,KAAA,oBAAAsE,OAAA,UAAA,EAA+B,WAAA,uBAAsB,CAAA;EAAGrG,EAAA,MAAA+B;CAAA,OAAAA,KAAA/B,EAAA;CAAA,IAAAmC;CAAA,IAAAnC,EAAA,QAAAgC,OAAAC,IAAA,2BAAA,GAAA;EAEtDE,MAAA,oBAAAkE,OAAA,OAAA;GAA4B,WAAA;GAAyC,cAAA;GACnE,UAAA,oBAAC,OAAD,CAAM,CAAA;EACR,CAAA;EAAmBrG,EAAA,MAAAmC;CAAA,OAAAA,MAAAnC,EAAA;CAAA,IAAAqC;CAAA,IAAArC,EAAA,QAAA4E,QAAA;EAHrBvC,MAAA,qBAAAgE,OAAA,OAAA;GAA4B,WAAA;GAAmC,cAAA;GAAsBb,SAAAA;GAArF,UAAA,CACErD,KAGA,oBAAC,qBAAD;IAA4B,OAAA;IAAOyC,UAAAA;GAAf,CAAA,CACtB;;EAAmB5E,EAAA,MAAA4E;EAAA5E,EAAA,MAAAqC;CAAA,OAAAA,MAAArC,EAAA;CAAA,IAAAyC;CAAA,IAAAzC,EAAA,QAAAqF,aAAArF,EAAA,QAAAqC,KAAA;EAPrBI,MAAA,qBAAA4D,OAAA,QAAA;GAA8BhB;GAA9B,UAAA,CACEtD,IACAM,GAMF;;EAAoBrC,EAAA,MAAAqF;EAAArF,EAAA,MAAAqC;EAAArC,EAAA,MAAAyC;CAAA,OAAAA,MAAAzC,EAAA;CAAA,IAAA0C;CAAA,IAAA1C,EAAA,QAAAmF,QAAAnF,EAAA,QAAAyC,OAAAzC,EAAA,QAAA0B,IAAA;EAhBtBgB,MAAA,qBAAA2D,OAAA,MAAA;GAAuBlB;GAAoBC,cAAAA;GAA3C,UAAA,CACE1D,IAOAe,GASF;;EAAkBzC,EAAA,MAAAmF;EAAAnF,EAAA,MAAAyC;EAAAzC,EAAA,MAAA0B;EAAA1B,EAAA,MAAA0C;CAAA,OAAAA,MAAA1C,EAAA;CAEwC,MAAA4C,MAAAoC,WAAShC;CAAW,IAAAH;CAAA,IAAA7C,EAAA,QAAA4C,KAAA;EAA9CC,MAAArE,GAAG,uBAAuBoE,GAAoB;EAAC5C,EAAA,MAAA4C;EAAA5C,EAAA,MAAA6C;CAAA,OAAAA,MAAA7C,EAAA;CAAA,IAAA8C;CAAA,IAAA9C,EAAA,QAAAU,YAAAV,EAAA,QAAAgF,aAAAhF,EAAA,QAAA6C,KAAA;EAA/EC,MAAA,oBAAA,QAAA;GAEO,GAFGkC;GAAsB,WAAAnC;GAC7BnC;EACI,CAAA;EAAAV,EAAA,MAAAU;EAAAV,EAAA,MAAAgF;EAAAhF,EAAA,MAAA6C;EAAA7C,EAAA,MAAA8C;CAAA,OAAAA,MAAA9C,EAAA;CAAA,IAAA+C;CAAA,IAAA/C,EAAA,QAAAY,SAAAZ,EAAA,QAAAW,OAAAX,EAAA,QAAA0C,OAAA1C,EAAA,QAAA8C,OAAA9C,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAxBTyC,MAAA,qBAAA,OAAA;GAAUpC;GAAgB,WAAAN;GAA8B,GAAMO;GAA9D,UAAA;IACEN;IAEAoC;IAmBAI;GAGI;;EAAA9C,EAAA,MAAAY;EAAAZ,EAAA,MAAAW;EAAAX,EAAA,MAAA0C;EAAA1C,EAAA,MAAA8C;EAAA9C,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAA+C;CAAA,OAAAA,MAAA/C,EAAA;CAAA,OAzBN+C;AAyBM;AAgBV,SAAO+C,WAAA/F,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAA4F;CAAA,IAAAH;CAAA,IAAA1C;CAAA,IAAA4C;CAAA,IAAAD;CAAA,IAAA/E;CAAA,IAAAD;CAAA,IAAAoD;CAAA,IAAA/D,EAAA,OAAAD,IAAA;EAAoB,CAAA,CAAA2F,aAAAC,SAAA5B,OAAA6B,aAAAC,SAAA7C,WAAArC,KAAA,GAAAC,SAAAb;EASTC,EAAA,KAAAD;EAAAC,EAAA,KAAA6F;EAAA7F,EAAA,KAAA0F;EAAA1F,EAAA,KAAAgD;EAAAhD,EAAA,KAAA4F;EAAA5F,EAAA,KAAA2F;EAAA3F,EAAA,KAAAY;EAAAZ,EAAA,KAAAW;EAAAX,EAAA,KAAA+D;CAAA,OAAA;EAAA8B,UAAA7F,EAAA;EAAA0F,cAAA1F,EAAA;EAAAgD,YAAAhD,EAAA;EAAA4F,cAAA5F,EAAA;EAAA2F,UAAA3F,EAAA;EAAAY,QAAAZ,EAAA;EAAAW,MAAAX,EAAA;EAAA+D,QAAA/D,EAAA;CAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAgD,WAAA;EAEe9C,KAAA1B,GAAG,mBAAmBwE,SAAS;EAAChD,EAAA,KAAAgD;EAAAhD,EAAA,MAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,QAAA0F,aAAA;EAExDvF,KAAAuF,eAAe,oBAAA,OAAA;GAAe,WAAA;GAAgCA,UAAAA;EAAkB,CAAA;EAAA1F,EAAA,MAAA0F;EAAA1F,EAAA,MAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,QAAA2F,SAAA;EAChFtF,KAAAsF,WAAW,oBAAA,QAAA;GAAgB,WAAA;GAAeA,UAAAA;EAAe,CAAA;EAAA3F,EAAA,MAAA2F;EAAA3F,EAAA,MAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,QAAA+D,OAAA;EAC1DzD,KAAA,oBAAA,MAAA;GAAc,WAAA;GAA0ByD,UAAAA;EAAW,CAAA;EAAA/D,EAAA,MAAA+D;EAAA/D,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,QAAA4F,aAAA;EAClDrF,KAAAqF,eAAe,oBAAA,KAAA;GAAa,WAAA;GAAgCA,UAAAA;EAAgB,CAAA;EAAA5F,EAAA,MAAA4F;EAAA5F,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAG,MAAAH,EAAA,QAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAO,IAAA;EAJ/EC,KAAA,qBAAA,OAAA;GAAe,WAAA;GAAf,UAAA;IACGL;IACAE;IACDC;IACCC;GACG;;EAAAP,EAAA,MAAAG;EAAAH,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,QAAA6F,SAAA;EACLpE,KAAAoE,WAAW,oBAAA,OAAA;GAAe,WAAA;GAA4BA,UAAAA;EAAc,CAAA;EAAA7F,EAAA,MAAA6F;EAAA7F,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAAY,SAAAZ,EAAA,QAAAW,OAAAX,EAAA,QAAAE,MAAAF,EAAA,QAAAQ,MAAAR,EAAA,QAAAyB,IAAA;EAPvEC,KAAA,qBAAA,UAAA;GAAaf;GAAgB,WAAAT;GAAgC,GAAMU;GAAnE,UAAA,CACEJ,IAMCiB,EACM;;EAAAzB,EAAA,MAAAY;EAAAZ,EAAA,MAAAW;EAAAX,EAAA,MAAAE;EAAAF,EAAA,MAAAQ;EAAAR,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,OART0B;AAQS;;AAYb,SAAOwE,KAAAnG,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAA+C;CAAA,IAAApC;CAAA,IAAAD;CAAA,IAAAT;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAc,CAAA,CAAAiG,SAAA9F,IAAA+F,KAAA9F,IAAA6C,WAAArC,KAAA,GAAAC,SAAAb;EAAgEC,EAAA,KAAAD;EAAAC,EAAA,KAAAgD;EAAAhD,EAAA,KAAAY;EAAAZ,EAAA,KAAAW;EAAAX,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAA6C,YAAAhD,EAAA;EAAAY,QAAAZ,EAAA;EAAAW,MAAAX,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAA9D,MAAAgG,UAAA9F,OAAAW,KAAAA,IAAA,IAAAX;CAAa,MAAA+F,MAAA9F,OAAAU,KAAAA,IAAA,OAAAV;CAAU,IAAAE;CAAA,IAAAL,EAAA,OAAAgD,WAAA;EACX3C,KAAA7B,GAAG,YAAYwE,SAAS;EAAChD,EAAA,KAAAgD;EAAAhD,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAgG,WAAAhG,EAAA,OAAAiG,OAAAjG,EAAA,QAAAY,SAAAZ,EAAA,QAAAW,OAAAX,EAAA,QAAAK,IAAA;EAAnDC,KAAA,oBAAA,OAAA;GAAUK;GAAgB,WAAAN;GAAyC2F,gBAAAA;GAAmBC,YAAAA;GAAG,GAAMrF;EAAK,CAAA;EAAIZ,EAAA,KAAAgG;EAAAhG,EAAA,KAAAiG;EAAAjG,EAAA,MAAAY;EAAAZ,EAAA,MAAAW;EAAAX,EAAA,MAAAK;EAAAL,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAAxGM;AAAwG"}
|
|
1
|
+
{"version":3,"file":"AppShell.js","names":["React","Dialog","BaseDialog","useRender","mergeProps","cx","createPrimitive","usePortalContainer","ChevronLeftIcon","MenuIcon","XIcon","NavbarVariant","NavbarState","variant","collapsed","peek","NavbarProps","ComponentProps","collapsible","defaultCollapsed","onCollapsedChange","expandOnHover","collapseLabel","expandLabel","NavbarCollapsedContext","createContext","NavbarDrawerContext","Navbar","t0","$","_c","t1","t2","collapsedProp","t3","t4","t5","t6","render","children","ref","props","undefined","inDrawer","useContext","canCollapse","internal","setInternal","useState","label","pointerInside","setPointerInside","hovered","setHovered","t7","t8","timer","setTimeout","clearTimeout","useEffect","t9","Symbol","for","endHover","t10","toggle","t11","event","pointerType","onPointerEnter","t12","t13","state","t14","t15","t16","t17","className","onPointerLeave","t18","defaultTagName","element","t19","t20","NavbarHeader","NavbarFooter","NavbarSection","NavbarSectionLabel","NavbarBrandProps","Omit","logo","ReactNode","title","subtitle","NavbarBrand","NavbarItemState","active","NavbarItemProps","icon","badge","NavbarItem","AppShellProps","HTMLAttributes","HTMLDivElement","Ref","navbar","mobileBrand","mobileActions","menuLabel","mainProps","HTMLElement","AppShell","open","setOpen","container","target","closest","closeOnNavigate","PageHeaderProps","breadcrumbs","eyebrow","description","actions","PageHeader","GridProps","columns","gap","Grid","_c","_Fragment","BaseDialog"],"sources":["../../../src/components/app-shell/AppShell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { useRender } from '@base-ui/react/use-render';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from '../../utils/cx';\nimport { createPrimitive } from '../../utils/primitive';\nimport { usePortalContainer } from '../../utils/portal';\nimport { ChevronLeftIcon, MenuIcon, XIcon } from '../../icons';\n\n// ─── Navbar ─────────────────────────────────────────────────────────────────\n\nexport type NavbarVariant = 'inverse' | 'surface';\n\nexport type NavbarState = { variant: NavbarVariant; collapsed: boolean; peek: boolean };\n\nexport interface NavbarProps extends useRender.ComponentProps<'nav', NavbarState> {\n /** `inverse` (brand-colored, default) or `surface` (light panel). */\n variant?: NavbarVariant;\n /** Shows a toggle in the top right that shrinks the navbar to an icon rail. Defaults to `true`. */\n collapsible?: boolean;\n /** Controlled collapsed state. */\n collapsed?: boolean;\n /** Initial collapsed state when uncontrolled. */\n defaultCollapsed?: boolean;\n /** Called when the user collapses or expands the navbar. */\n onCollapsedChange?: (collapsed: boolean) => void;\n /** Temporarily opens a collapsed navbar while the mouse is over it. Defaults to `true`. */\n expandOnHover?: boolean;\n /** Accessible names for the icon-only toggle. */\n collapseLabel?: string;\n /** Accessible name of the toggle while collapsed. */\n expandLabel?: string;\n}\n\nconst NavbarCollapsedContext = React.createContext(false);\n// True inside the AppShell drawer, where the navbar always shows in full.\nconst NavbarDrawerContext = React.createContext(false);\n\n/**\n * Collapsible side navigation. Use inside `AppShell`. Compose with `NavbarHeader` (`NavbarBrand`),\n * `NavbarSection` (`NavbarSectionLabel`, `NavbarItem`) and `NavbarFooter`.\n */\nexport function Navbar({\n variant = 'inverse',\n collapsible = true,\n collapsed: collapsedProp,\n defaultCollapsed = false,\n onCollapsedChange,\n expandOnHover = true,\n collapseLabel = 'Collapse',\n expandLabel = 'Expand',\n render,\n children,\n ref,\n ...props\n}: NavbarProps) {\n const inDrawer = React.useContext(NavbarDrawerContext);\n const canCollapse = collapsible && !inDrawer;\n const [internal, setInternal] = React.useState(defaultCollapsed);\n const collapsed = canCollapse && (collapsedProp ?? internal);\n const label = collapsed ? expandLabel : collapseLabel;\n\n // Hover peek: shown in full once the mouse has rested over a collapsed navbar.\n const [pointerInside, setPointerInside] = React.useState(false);\n const [hovered, setHovered] = React.useState(false);\n React.useEffect(() => {\n if (!pointerInside) return;\n const timer = setTimeout(() => setHovered(true), 120);\n return () => clearTimeout(timer);\n }, [pointerInside]);\n const peek = collapsed && expandOnHover && hovered;\n\n const endHover = () => {\n setPointerInside(false);\n setHovered(false);\n };\n\n const toggle = () => {\n // Collapsing with the mouse still inside must not peek straight back open.\n endHover();\n if (collapsedProp === undefined) setInternal(!collapsed);\n onCollapsedChange?.(!collapsed);\n };\n\n const onPointerEnter = (event: React.PointerEvent) => {\n if (event.pointerType === 'mouse') setPointerInside(true);\n };\n\n const state: NavbarState = { variant, collapsed: collapsed && !peek, peek };\n const element = useRender({\n defaultTagName: 'nav',\n render,\n ref,\n state,\n props: mergeProps<'nav'>(\n {\n className: 'oui-navbar',\n onPointerEnter: collapsed && expandOnHover ? onPointerEnter : undefined,\n onPointerLeave: collapsed && expandOnHover ? endHover : undefined,\n children: (\n <>\n {canCollapse && (\n <button\n type=\"button\"\n className=\"oui-navbar__toggle\"\n aria-label={label}\n aria-expanded={!collapsed}\n title={label}\n onClick={toggle}\n >\n <ChevronLeftIcon />\n </button>\n )}\n {children}\n </>\n ),\n },\n props,\n ),\n });\n return <NavbarCollapsedContext value={collapsed && !peek}>{element}</NavbarCollapsedContext>;\n}\n\nexport const NavbarHeader = createPrimitive('div', 'oui-navbar__header', 'NavbarHeader');\nexport const NavbarFooter = createPrimitive('div', 'oui-navbar__footer', 'NavbarFooter');\nexport const NavbarSection = createPrimitive('div', 'oui-navbar__section', 'NavbarSection');\nexport const NavbarSectionLabel = createPrimitive('div', 'oui-navbar__section-label', 'NavbarSectionLabel');\n\nexport interface NavbarBrandProps extends Omit<useRender.ComponentProps<'div'>, 'title'> {\n /** Logo or icon shown before the title; stays visible when the navbar is collapsed. */\n logo?: React.ReactNode;\n /** Product or organization name. */\n title: React.ReactNode;\n /** Smaller line under the title. */\n subtitle?: React.ReactNode;\n}\n\n/** Logo, title and subtitle block for the top of a `Navbar`. */\nexport function NavbarBrand({ logo, title, subtitle, render, ref, ...props }: NavbarBrandProps) {\n return useRender({\n defaultTagName: 'div',\n render,\n ref,\n props: mergeProps<'div'>(\n {\n className: 'oui-navbar__brand',\n children: (\n <>\n {logo && <span className=\"oui-navbar__logo\">{logo}</span>}\n <span className=\"oui-navbar__brand-text\">\n <span className=\"oui-navbar__brand-title\">{title}</span>\n {subtitle && <span className=\"oui-navbar__brand-subtitle\">{subtitle}</span>}\n </span>\n </>\n ),\n },\n props,\n ),\n });\n}\n\nexport type NavbarItemState = { active: boolean };\n\nexport interface NavbarItemProps extends useRender.ComponentProps<'a', NavbarItemState> {\n /** Icon shown before the label; it stays visible when the navbar is collapsed to a rail. */\n icon?: React.ReactNode;\n /** Marks the current page (sets aria-current). */\n active?: boolean;\n /** Trailing content such as a count badge. */\n badge?: React.ReactNode;\n}\n\n/**\n * Navigation link. Renders an `<a>`; use `render={<Link to=\"…\" />}` for a\n * router link or `render={<button />}` for an action.\n */\nexport function NavbarItem({ icon, active = false, badge, render, children, ref, ...props }: NavbarItemProps) {\n const collapsed = React.useContext(NavbarCollapsedContext);\n const state: NavbarItemState = { active };\n return useRender({\n defaultTagName: 'a',\n render,\n ref,\n state,\n props: mergeProps<'a'>(\n {\n className: 'oui-navbar__item',\n 'aria-current': active ? 'page' : undefined,\n title: collapsed && typeof children === 'string' ? children : undefined,\n children: (\n <>\n {icon && <span className=\"oui-navbar__item-icon\">{icon}</span>}\n <span className=\"oui-navbar__item-label\">{children}</span>\n {badge != null && <span className=\"oui-navbar__item-badge\">{badge}</span>}\n </>\n ),\n },\n props,\n ),\n });\n}\n\n// ─── App shell ───────────────────────────────────────────────────────────────\n\nexport interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Ref to the shell's root element. */\n ref?: React.Ref<HTMLDivElement>;\n /** Navbar content (usually a `<Navbar>`). Rendered in a drawer on small screens. */\n navbar: React.ReactNode;\n /** Brand shown in the mobile top bar. */\n mobileBrand?: React.ReactNode;\n /** Extra content on the right of the mobile top bar. */\n mobileActions?: React.ReactNode;\n /** Accessible name of the button that opens the navigation drawer on small screens. */\n menuLabel?: string;\n /** Props for the scrolling `<main>` element. */\n mainProps?: React.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Full-height layout with a fixed navbar and an internally scrolling main\n * area. Below 900px the navbar moves into a slide-in drawer.\n * Customize width with `--oui-navbar-width` and `--oui-navbar-collapsed-width`.\n */\nexport function AppShell({\n navbar,\n mobileBrand,\n mobileActions,\n menuLabel = 'Open navigation',\n mainProps,\n className,\n children,\n ref,\n ...props\n}: AppShellProps) {\n const [open, setOpen] = React.useState(false);\n const container = usePortalContainer();\n\n const closeOnNavigate = (event: React.MouseEvent) => {\n if ((event.target as HTMLElement).closest('a, .oui-navbar__item')) setOpen(false);\n };\n\n return (\n <div ref={ref} className={cx('oui-app-shell', className)} {...props}>\n <div className=\"oui-app-shell__navbar\">{navbar}</div>\n\n <BaseDialog.Root open={open} onOpenChange={setOpen}>\n <header className=\"oui-app-shell__mobile-bar\">\n <BaseDialog.Trigger className=\"oui-app-shell__menu-button\" aria-label={menuLabel}>\n <MenuIcon />\n </BaseDialog.Trigger>\n <div className=\"oui-app-shell__mobile-brand\">{mobileBrand}</div>\n {mobileActions}\n </header>\n <BaseDialog.Portal container={container}>\n <BaseDialog.Backdrop className=\"oui-dialog__backdrop\" />\n <BaseDialog.Popup className=\"oui-app-shell__drawer\" aria-label=\"Navigation\" onClick={closeOnNavigate}>\n <BaseDialog.Close className=\"oui-app-shell__drawer-close\" aria-label=\"Close navigation\">\n <XIcon />\n </BaseDialog.Close>\n <NavbarDrawerContext value={true}>{navbar}</NavbarDrawerContext>\n </BaseDialog.Popup>\n </BaseDialog.Portal>\n </BaseDialog.Root>\n\n <main {...mainProps} className={cx('oui-app-shell__main', mainProps?.className)}>\n {children}\n </main>\n </div>\n );\n}\n\n// ─── Page layout helpers ─────────────────────────────────────────────────────\n\nexport interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {\n /** Ref to the `<header>` element. */\n ref?: React.Ref<HTMLElement>;\n /** Trail shown above the title, usually `<Breadcrumbs>`. */\n breadcrumbs?: React.ReactNode;\n /** Small label above the title. */\n eyebrow?: React.ReactNode;\n /** Page title, rendered as the page `<h1>`. */\n title: React.ReactNode;\n /** Supporting text under the title. */\n description?: React.ReactNode;\n /** Buttons or controls aligned to the right of the title. */\n actions?: React.ReactNode;\n}\n\n/** Page title block with optional breadcrumbs, eyebrow, description and actions. */\nexport function PageHeader({\n breadcrumbs,\n eyebrow,\n title,\n description,\n actions,\n className,\n ref,\n ...props\n}: PageHeaderProps) {\n return (\n <header ref={ref} className={cx('oui-page-header', className)} {...props}>\n <div className=\"oui-page-header__text\">\n {breadcrumbs && <div className=\"oui-page-header__breadcrumbs\">{breadcrumbs}</div>}\n {eyebrow && <span className=\"oui-eyebrow\">{eyebrow}</span>}\n <h1 className=\"oui-page-header__title\">{title}</h1>\n {description && <p className=\"oui-page-header__description\">{description}</p>}\n </div>\n {actions && <div className=\"oui-page-header__actions\">{actions}</div>}\n </header>\n );\n}\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Ref to the grid element. */\n ref?: React.Ref<HTMLDivElement>;\n /** Columns on wide screens; collapses to 2 below 1200px (for 4+) and 1 below 900px. */\n columns?: 1 | 2 | 3 | 4 | 5 | 6;\n /** Space between grid cells. */\n gap?: 'sm' | 'md' | 'lg';\n}\n\n/** Responsive dashboard grid. */\nexport function Grid({ columns = 3, gap = 'md', className, ref, ...props }: GridProps) {\n return <div ref={ref} className={cx('oui-grid', className)} data-columns={columns} data-gap={gap} {...props} />;\n}\n"],"mappings":"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"}
|
|
@@ -2,20 +2,28 @@ import * as React from 'react';
|
|
|
2
2
|
import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
|
|
3
3
|
export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
4
4
|
export interface AvatarProps extends BaseAvatar.Root.Props {
|
|
5
|
+
/** Image URL. Falls back to initials or `fallback` while loading or on error. */
|
|
5
6
|
src?: string;
|
|
7
|
+
/** Image alt text. Defaults to `name`. */
|
|
6
8
|
alt?: string;
|
|
7
9
|
/** Name used for initials when the image is missing. */
|
|
8
10
|
name?: string;
|
|
9
11
|
/** Explicit fallback content (overrides initials). */
|
|
10
12
|
fallback?: React.ReactNode;
|
|
13
|
+
/** Diameter. */
|
|
11
14
|
size?: AvatarSize;
|
|
15
|
+
/** Outline shape. */
|
|
12
16
|
shape?: 'circle' | 'rounded';
|
|
13
17
|
}
|
|
18
|
+
/** User or entity picture with initials fallback. */
|
|
14
19
|
export declare function Avatar({ src, alt, name, fallback, size, shape, className, ref, ...props }: AvatarProps): React.JSX.Element;
|
|
15
20
|
export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
21
|
+
/** Ref to the group element. */
|
|
16
22
|
ref?: React.Ref<HTMLDivElement>;
|
|
17
23
|
/** Show at most this many avatars, then a "+N" counter. */
|
|
18
24
|
max?: number;
|
|
25
|
+
/** Size applied to every avatar in the group. */
|
|
19
26
|
size?: AvatarSize;
|
|
20
27
|
}
|
|
28
|
+
/** Overlapping row of `Avatar` children, with an optional "+N" overflow counter. */
|
|
21
29
|
export declare function AvatarGroup({ max, size, className, children, ref, ...props }: AvatarGroupProps): React.JSX.Element;
|
|
@@ -10,6 +10,7 @@ function initials(name) {
|
|
|
10
10
|
const parts = name.trim().split(/\s+/);
|
|
11
11
|
return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? parts[parts.length - 1]?.[0] ?? "" : "")).toUpperCase();
|
|
12
12
|
}
|
|
13
|
+
/** User or entity picture with initials fallback. */
|
|
13
14
|
function Avatar$1(t0) {
|
|
14
15
|
const $ = c(30);
|
|
15
16
|
let alt;
|
|
@@ -103,6 +104,7 @@ function Avatar$1(t0) {
|
|
|
103
104
|
} else t7 = $[29];
|
|
104
105
|
return t7;
|
|
105
106
|
}
|
|
107
|
+
/** Overlapping row of `Avatar` children, with an optional "+N" overflow counter. */
|
|
106
108
|
function AvatarGroup(t0) {
|
|
107
109
|
const $ = c(23);
|
|
108
110
|
let children;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","names":["React","Avatar","BaseAvatar","cx","withClass","AvatarSize","AvatarProps","Root","Props","src","alt","name","fallback","ReactNode","size","shape","initials","parts","trim","split","length","toUpperCase","t0","$","_c","className","props","ref","t1","t2","undefined","t3","t4","t5","t6","t7","AvatarGroupProps","HTMLAttributes","HTMLDivElement","Ref","max","AvatarGroup","children","items","Children","toArray","slice","visible","hidden","Avatar","_c","BaseAvatar"],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { cx, withClass } from '../../utils/cx';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface AvatarProps extends BaseAvatar.Root.Props {\n src?: string;\n alt?: string;\n /** Name used for initials when the image is missing. */\n name?: string;\n /** Explicit fallback content (overrides initials). */\n fallback?: React.ReactNode;\n size?: AvatarSize;\n shape?: 'circle' | 'rounded';\n}\n\nfunction initials(name?: string) {\n if (!name) return '';\n const parts = name.trim().split(/\\s+/);\n return ((parts[0]?.[0] ?? '') + (parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : '')).toUpperCase();\n}\n\nexport function Avatar({\n src,\n alt,\n name,\n fallback,\n size = 'md',\n shape = 'circle',\n className,\n ref,\n ...props\n}: AvatarProps) {\n return (\n <BaseAvatar.Root\n ref={ref}\n className={withClass('oui-avatar', className)}\n data-size={size}\n data-shape={shape}\n {...props}\n >\n {src && <BaseAvatar.Image className=\"oui-avatar__image\" src={src} alt={alt ?? name ?? ''} />}\n <BaseAvatar.Fallback className=\"oui-avatar__fallback\" aria-label={name}>\n {fallback ?? initials(name)}\n </BaseAvatar.Fallback>\n </BaseAvatar.Root>\n );\n}\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n ref?: React.Ref<HTMLDivElement>;\n /** Show at most this many avatars, then a \"+N\" counter. */\n max?: number;\n size?: AvatarSize;\n}\n\nexport function AvatarGroup({ max, size = 'md', className, children, ref, ...props }: AvatarGroupProps) {\n const items = React.Children.toArray(children);\n const visible = max != null ? items.slice(0, max) : items;\n const hidden = items.length - visible.length;\n return (\n <div ref={ref} className={cx('oui-avatar-group', className)} data-size={size} {...props}>\n {visible}\n {hidden > 0 && (\n <span className=\"oui-avatar oui-avatar--count\" data-size={size} data-shape=\"circle\">\n <span className=\"oui-avatar__fallback\">+{hidden}</span>\n </span>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Avatar.js","names":["React","Avatar","BaseAvatar","cx","withClass","AvatarSize","AvatarProps","Root","Props","src","alt","name","fallback","ReactNode","size","shape","initials","parts","trim","split","length","toUpperCase","t0","$","_c","className","props","ref","t1","t2","undefined","t3","t4","t5","t6","t7","AvatarGroupProps","HTMLAttributes","HTMLDivElement","Ref","max","AvatarGroup","children","items","Children","toArray","slice","visible","hidden","Avatar","_c","BaseAvatar"],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { cx, withClass } from '../../utils/cx';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface AvatarProps extends BaseAvatar.Root.Props {\n /** Image URL. Falls back to initials or `fallback` while loading or on error. */\n src?: string;\n /** Image alt text. Defaults to `name`. */\n alt?: string;\n /** Name used for initials when the image is missing. */\n name?: string;\n /** Explicit fallback content (overrides initials). */\n fallback?: React.ReactNode;\n /** Diameter. */\n size?: AvatarSize;\n /** Outline shape. */\n shape?: 'circle' | 'rounded';\n}\n\nfunction initials(name?: string) {\n if (!name) return '';\n const parts = name.trim().split(/\\s+/);\n return ((parts[0]?.[0] ?? '') + (parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : '')).toUpperCase();\n}\n\n/** User or entity picture with initials fallback. */\nexport function Avatar({\n src,\n alt,\n name,\n fallback,\n size = 'md',\n shape = 'circle',\n className,\n ref,\n ...props\n}: AvatarProps) {\n return (\n <BaseAvatar.Root\n ref={ref}\n className={withClass('oui-avatar', className)}\n data-size={size}\n data-shape={shape}\n {...props}\n >\n {src && <BaseAvatar.Image className=\"oui-avatar__image\" src={src} alt={alt ?? name ?? ''} />}\n <BaseAvatar.Fallback className=\"oui-avatar__fallback\" aria-label={name}>\n {fallback ?? initials(name)}\n </BaseAvatar.Fallback>\n </BaseAvatar.Root>\n );\n}\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Ref to the group element. */\n ref?: React.Ref<HTMLDivElement>;\n /** Show at most this many avatars, then a \"+N\" counter. */\n max?: number;\n /** Size applied to every avatar in the group. */\n size?: AvatarSize;\n}\n\n/** Overlapping row of `Avatar` children, with an optional \"+N\" overflow counter. */\nexport function AvatarGroup({ max, size = 'md', className, children, ref, ...props }: AvatarGroupProps) {\n const items = React.Children.toArray(children);\n const visible = max != null ? items.slice(0, max) : items;\n const hidden = items.length - visible.length;\n return (\n <div ref={ref} className={cx('oui-avatar-group', className)} data-size={size} {...props}>\n {visible}\n {hidden > 0 && (\n <span className=\"oui-avatar oui-avatar--count\" data-size={size} data-shape=\"circle\">\n <span className=\"oui-avatar__fallback\">+{hidden}</span>\n </span>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -7,10 +7,19 @@ export type BadgeState = {
|
|
|
7
7
|
size: 'sm' | 'md';
|
|
8
8
|
};
|
|
9
9
|
export interface BadgeProps extends useRender.ComponentProps<'span', BadgeState> {
|
|
10
|
+
/** Semantic color. */
|
|
10
11
|
tone?: BadgeTone;
|
|
12
|
+
/** `soft` tinted, `solid` filled, `outline` bordered. */
|
|
11
13
|
variant?: BadgeVariant;
|
|
14
|
+
/** Badge height and text size. */
|
|
12
15
|
size?: 'sm' | 'md';
|
|
13
16
|
/** Leading status dot. */
|
|
14
17
|
dot?: boolean;
|
|
15
18
|
}
|
|
19
|
+
/**
|
|
20
|
+
* Small status label.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* <Badge tone="success" dot>Online</Badge>
|
|
24
|
+
*/
|
|
16
25
|
export declare function Badge({ tone, variant, size, dot, render, children, ref, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|