@setsquare/ui 0.9.1 → 0.10.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/CHANGELOG.md +49 -0
- package/README.md +3 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/lib/use-scroll-tab-stop.d.ts +9 -0
- package/dist/lib/use-scroll-tab-stop.d.ts.map +1 -0
- package/dist/lib/use-scroll-tab-stop.js +46 -0
- package/dist/lib/use-scroll-tab-stop.js.map +1 -0
- package/dist/shell/dashboard-shell.d.ts +1 -0
- package/dist/shell/dashboard-shell.d.ts.map +1 -1
- package/dist/shell/dashboard-shell.js +2 -34
- package/dist/shell/dashboard-shell.js.map +1 -1
- package/dist/shell/page-header.d.ts +7 -1
- package/dist/shell/page-header.d.ts.map +1 -1
- package/dist/shell/page-header.js +3 -2
- package/dist/shell/page-header.js.map +1 -1
- package/dist/shell/right-panel.d.ts +21 -1
- package/dist/shell/right-panel.d.ts.map +1 -1
- package/dist/shell/right-panel.js +12 -4
- package/dist/shell/right-panel.js.map +1 -1
- package/dist/styles/theme.css +14 -0
- package/dist/styles/tokens.css +18 -0
- package/dist/tokens.json +80 -0
- package/dist/ui/button.d.ts +2 -1
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +9 -3
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/dialog.d.ts +14 -2
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +19 -4
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/disabled-reason.d.ts +36 -0
- package/dist/ui/disabled-reason.d.ts.map +1 -0
- package/dist/ui/disabled-reason.js +27 -0
- package/dist/ui/disabled-reason.js.map +1 -0
- package/dist/ui/icon-button.d.ts.map +1 -1
- package/dist/ui/icon-button.js +10 -6
- package/dist/ui/icon-button.js.map +1 -1
- package/dist/ui/menu.d.ts +9 -3
- package/dist/ui/menu.d.ts.map +1 -1
- package/dist/ui/menu.js +22 -4
- package/dist/ui/menu.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,54 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.10.0 — 2026-10-15
|
|
4
|
+
|
|
5
|
+
What Storyboard, a dense desktop video editor and the first product on the Rail, still needed from the package.
|
|
6
|
+
|
|
7
|
+
- **Dialog: wider sizes, an icon in the title, a pinned footer.** `size` takes `xl` (60rem) and `2xl` (77.5rem,
|
|
8
|
+
1240px) as well as `sm`, `md` and `lg`, and `full`, the viewport but its margins; each comes from a new
|
|
9
|
+
`dialog-width-*` token, and the old three keep their widths. `icon` puts an icon before the title, hidden from
|
|
10
|
+
assistive technology, so the dialog is still named by the title's words; the title stays a string. **Changed:**
|
|
11
|
+
in a dialog taller than the window, only the body between the title and the footer scrolls, so the footer's
|
|
12
|
+
buttons never scroll away (the whole dialog used to scroll). The body is a tab stop only while it scrolls with
|
|
13
|
+
nothing focusable in it, the rule `ShellMain` already followed, now `useScrollTabStop` and shared by both.
|
|
14
|
+
`DialogSize` is exported.
|
|
15
|
+
- **RightPanel: wider, without its title bar, and not closable.** `width="wide"` is the new paired token
|
|
16
|
+
`--panel-width-wide` (512px; 560px at AAA), for a panel that is a working surface such as a chat; a number of px is
|
|
17
|
+
kept between `--panel-width` and the smaller of `--panel-width-max` (720px) and half the shell, so a product can let
|
|
18
|
+
people set it and keep their choice. `hideTitleBar` hides the bar while the panel stays named by `title`, or by
|
|
19
|
+
`aria-labelledby` pointing at the content's own heading. `isDismissable={false}` leaves no close button beside main
|
|
20
|
+
and keeps the panel open. Below 1024px it is still the Sheet, which opens and closes as before. **Not done:** a drag
|
|
21
|
+
handle. WCAG 2.5.7 asks that anything done by dragging can also be done with a single pointer without dragging,
|
|
22
|
+
and keyboard support alone doesn't meet it, so a handle needs pointer controls such as Narrower and Wider beside it.
|
|
23
|
+
The number `width` lets a product build that with its own controls.
|
|
24
|
+
- **PageHeader: an icon in the title.** `icon` goes before the words, hidden from assistive technology, so the h1 is
|
|
25
|
+
named by its words. From a server component, pass the element.
|
|
26
|
+
- **Compact density for tool surfaces.** `data-density="compact"` on a container makes the controls inside it
|
|
27
|
+
denser at AA: 28px controls (24px small, 36px large), 8px padding, 4px gaps, rows at least 28px, 12px between fields
|
|
28
|
+
and 13px interface text, from 36, 28, 44, 12, 8, 36, 20 and 14. No target goes under `--target-min` (24px) and no text
|
|
29
|
+
under 13px. Button, IconButton, SegmentedControl, Toolbar, Menu and the fields follow it, and a Slider's label;
|
|
30
|
+
a menu, select or combo box's popover takes its trigger's density with it, though it renders outside the
|
|
31
|
+
container. At AAA it changes nothing: targets are 44px there. The values are new `*-compact` tokens; the rule is in
|
|
32
|
+
the stylesheet (`theme.css`), so the design-system artifact has it too.
|
|
33
|
+
- **Disabled with a reason.** `Button` and `IconButton` take `disabledReason`: the button keeps focus and hover
|
|
34
|
+
(`aria-disabled`, not `disabled`), its words turn `muted-foreground`, the reason is its description and its tooltip
|
|
35
|
+
(an IconButton's tooltip shows its label over the reason), and pressing it does nothing and submits no form. It
|
|
36
|
+
wins over `isDisabled`. The Button README says when to use which. `DisabledReasonProps` is exported.
|
|
37
|
+
- **lucide-react is a range, `^1.48.0`**, not an exact pin, so an app on a newer 1.x shares one copy instead of
|
|
38
|
+
bundling two. This repository's lockfile still installs 1.48.0. `@setsquare/ui-flows` and `@setsquare/ui-blocks`
|
|
39
|
+
still pin it exactly; their next releases should do the same.
|
|
40
|
+
- **Docs.** ui.setsquare.dev: a Brand kits dialog (xl, an icon, a pinned footer), an icon in the page header, a button
|
|
41
|
+
and an icon button disabled with a reason, and Themes and levels' new Compact density section, with the same tools
|
|
42
|
+
default and compact. Design-system cards: DialogWide, RightPanelWide, ButtonDisabledReason and Density, and the
|
|
43
|
+
PageHeader card has its icon. The Dialog, RightPanel, PageHeader, Button and IconButton READMEs, and the
|
|
44
|
+
design-system README's Compact density.
|
|
45
|
+
- **Tests.** `test/browser/surfaces.mjs` (Dialog widths, the pinned header and footer, the icon's name, the body's tab
|
|
46
|
+
stop; RightPanel widths, the hidden title bar and its name, `aria-labelledby`, a panel that can't be closed and
|
|
47
|
+
its Sheet; PageHeader's h1 name) and `test/browser/density.mjs` (each control default and compact at AA and AAA,
|
|
48
|
+
no target under the floor or overlapping, a menu's rows, and `disabledReason`: in the tab order, described,
|
|
49
|
+
its tooltip on focus and hover, a press doing nothing, the cursor), at AA and AAA. Unit tests for the RightPanel
|
|
50
|
+
and PageHeader as the server renders them, `disabledReason`, the compact tokens' floors, and the lucide range.
|
|
51
|
+
|
|
3
52
|
## 0.9.1 — 2026-10-15
|
|
4
53
|
|
|
5
54
|
- **Fix: a Tree row's title or description no longer breaks between two letters without a hyphen.** They had
|
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ Controls are built in three layers, so the switch changes targets without changi
|
|
|
18
18
|
pnpm add @setsquare/ui react-aria-components @internationalized/date
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
It needs React 19.2 or later, React Aria Components 1.21 or later, and Tailwind CSS 4 in the app. A module is a client component (`'use client'`) only when it needs to be: React Aria, a hook, a context or an event handler. The rest — `StatusBadge`, `Avatar`, `ProductMark`, `Kbd`, `EmptyState`, `IconButton`, `PageHeader`, `PageContent`, the site shell's `SiteShell`, `SiteMain`, `SiteHeader`, `SiteNav`, `SiteFooter` and `SiteFooterGroup`, the content components `Section`, `SectionHeader`, `Container`, `Eyebrow`, `Hero`, `HeroHighlight`, `Card`, `CardGrid`, `Prose`, `Steps`, `Step`, `Split`, `Tag`, `StatList` and `Stat`, `CodeBlock`, `ThemeScript`, `buttonTargetStyles()` and `buttonVisualStyles()` — have no directive, so a server component uses them without shipping them to the browser. Server components can render either kind. A server component that gives a client component an icon (`Alert`, `MenuItem`, `SidebarItem`, `RailItem`, a search item) passes the element, `icon={<Folder />}`: a component can't cross into a client component.
|
|
21
|
+
It needs React 19.2 or later, React Aria Components 1.21 or later, and Tailwind CSS 4 in the app. It brings `lucide-react` as a dependency at `^1.48.0`, so an app on a newer 1.x shares one copy rather than bundling two. A module is a client component (`'use client'`) only when it needs to be: React Aria, a hook, a context or an event handler. The rest — `StatusBadge`, `Avatar`, `ProductMark`, `Kbd`, `EmptyState`, `IconButton`, `PageHeader`, `PageContent`, the site shell's `SiteShell`, `SiteMain`, `SiteHeader`, `SiteNav`, `SiteFooter` and `SiteFooterGroup`, the content components `Section`, `SectionHeader`, `Container`, `Eyebrow`, `Hero`, `HeroHighlight`, `Card`, `CardGrid`, `Prose`, `Steps`, `Step`, `Split`, `Tag`, `StatList` and `Stat`, `CodeBlock`, `ThemeScript`, `buttonTargetStyles()` and `buttonVisualStyles()` — have no directive, so a server component uses them without shipping them to the browser. Server components can render either kind. A server component that gives a client component an icon (`Alert`, `MenuItem`, `SidebarItem`, `RailItem`, a search item) passes the element, `icon={<Folder />}`: a component can't cross into a client component.
|
|
22
22
|
|
|
23
23
|
In the app's global stylesheet, after Tailwind:
|
|
24
24
|
|
|
@@ -349,6 +349,8 @@ The positioning, target, link, reflow, text-spacing and motion scans run in the
|
|
|
349
349
|
- **Contrast:** `scripts/check-contrast.mjs` computes every token pair the usage notes promise, in all four themes. It doesn't check colours a product adds.
|
|
350
350
|
- **Browser (Chromium only):** the design-system previews on React 19, loaded as the design-system artifact loads them:
|
|
351
351
|
- axe-core on every preview in all four themes;
|
|
352
|
+
- Dialog sizes from their tokens, a tall dialog's title and footer staying while only the body scrolls, and its body a tab stop only while it scrolls with nothing focusable; RightPanel's widths, hidden title bar, its name by `title` or `aria-labelledby`, a panel that can't be closed beside main and its Sheet below 1024px; PageHeader and Dialog icons leaving the name to the words;
|
|
353
|
+
- compact density: each control's paint, padding, gap and text at AA, unchanged at AAA, no target under `--target-min` or overlapping, a menu's rows following their trigger; and `disabledReason`: in the tab order, described by the reason, its tooltip on focus and hover, a press doing nothing;
|
|
352
354
|
- the search's ⌘K / Ctrl+K on a page of its own: left to text fields, text areas, editors and a handler that took the key; one search on a page holding it, showing it and setting `aria-keyshortcuts`, and the next taking over; `shortcut={false}`; the console error for an item id used twice; and `aria-keyshortcuts` reaching the element through `Button`, `IconButton`, `LinkButton` and `Tree`, which React Aria's own components drop, and the page builder's Undo, Redo and outline saying their keys;
|
|
353
355
|
- keyboard and focus behaviour for the dashboard shell (with its search finding by keyword, in ranked order), forms, feedback states, and the slider, date, file and selection controls (a narrow Tree's long words breaking only with a hyphen, and its rows named without soft hyphens; a narrow FileUpload's names breaking only where they divide themselves or at a ↩ mark, said and copied plain; a vertical Tabs rail's long names breaking only with a hyphen; each with and without text spacing);
|
|
354
356
|
- the site shell: the phone menu opening, pushing the page down and closing on Escape from the panel or the button; the current page's weight and marker; one order for the header, the phone menu and the footer; a sticky header covering no focused control; and the header fitting at seven widths from 320px to 1280px, either side of `lg` among them;
|
package/dist/index.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export type { SetsquareLocaleProps, SetsquareLabels } from './lib/locale.js';
|
|
|
11
11
|
export { useElementWidth } from './lib/use-element-width.js';
|
|
12
12
|
export { Button, LinkButton } from './ui/button.js';
|
|
13
13
|
export type { ButtonProps, LinkButtonProps } from './ui/button.js';
|
|
14
|
+
export type { DisabledReasonProps } from './ui/disabled-reason.js';
|
|
14
15
|
export type { KeyshortcutsProps } from './lib/keyshortcuts.js';
|
|
15
16
|
export { buttonTargetStyles, buttonVisualStyles } from './ui/button-styles.js';
|
|
16
17
|
export type { ButtonVariant, ButtonVisualSize } from './ui/button-styles.js';
|
|
@@ -130,7 +131,7 @@ export type { AlertProps, AlertTone, AlertLabels, OfflineAlertLabels } from './u
|
|
|
130
131
|
export { EmptyState } from './ui/empty-state.js';
|
|
131
132
|
export type { EmptyStateProps } from './ui/empty-state.js';
|
|
132
133
|
export { Dialog, ConfirmDialog } from './ui/dialog.js';
|
|
133
|
-
export type { DialogProps, ConfirmDialogProps, DialogLabels, ConfirmDialogLabels, } from './ui/dialog.js';
|
|
134
|
+
export type { DialogProps, DialogSize, ConfirmDialogProps, DialogLabels, ConfirmDialogLabels, } from './ui/dialog.js';
|
|
134
135
|
export { Toaster, toast, toastQueue } from './ui/toast.js';
|
|
135
136
|
export type { ToastContent, ToastTone, ToasterLabels } from './ui/toast.js';
|
|
136
137
|
export { ErrorState, ErrorBoundary } from './ui/error-state.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type RefObject } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Whether a vertical scroller should be a tab stop: while it scrolls and holds nothing a keyboard can reach (prose
|
|
4
|
+
* with no links, a changelog), so Tab reaches it and the arrow keys scroll it. That is what Chrome (132 and later)
|
|
5
|
+
* does for any scroller with no tabindex and no focusable children; an explicit tabindex opts out of it, so this
|
|
6
|
+
* puts it back, in every browser. Measured again when the scroller or its content resizes or changes.
|
|
7
|
+
*/
|
|
8
|
+
export declare function useScrollTabStop(ref: RefObject<HTMLElement | null>): boolean;
|
|
9
|
+
//# sourceMappingURL=use-scroll-tab-stop.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-scroll-tab-stop.d.ts","sourceRoot":"","sources":["../../src/lib/use-scroll-tab-stop.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5D;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,OAAO,CAmC5E"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, iframe, [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
|
|
4
|
+
/**
|
|
5
|
+
* Whether a vertical scroller should be a tab stop: while it scrolls and holds nothing a keyboard can reach (prose
|
|
6
|
+
* with no links, a changelog), so Tab reaches it and the arrow keys scroll it. That is what Chrome (132 and later)
|
|
7
|
+
* does for any scroller with no tabindex and no focusable children; an explicit tabindex opts out of it, so this
|
|
8
|
+
* puts it back, in every browser. Measured again when the scroller or its content resizes or changes.
|
|
9
|
+
*/
|
|
10
|
+
export function useScrollTabStop(ref) {
|
|
11
|
+
const [tabbable, setTabbable] = useState(false);
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
const el = ref.current;
|
|
14
|
+
if (!el)
|
|
15
|
+
return;
|
|
16
|
+
let frame = 0;
|
|
17
|
+
const resize = new ResizeObserver(() => measure());
|
|
18
|
+
const measure = () => {
|
|
19
|
+
cancelAnimationFrame(frame);
|
|
20
|
+
frame = requestAnimationFrame(() => {
|
|
21
|
+
// The content can grow without the scroller resizing, so watch what is in it too.
|
|
22
|
+
for (const child of el.children)
|
|
23
|
+
resize.observe(child);
|
|
24
|
+
const scrolls = el.scrollHeight > el.clientHeight + 1;
|
|
25
|
+
const reachable = [...el.querySelectorAll(FOCUSABLE)].some((child) => !child.closest('[inert]') && child.getClientRects().length > 0);
|
|
26
|
+
setTabbable(scrolls && !reachable);
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
measure();
|
|
30
|
+
resize.observe(el);
|
|
31
|
+
const mutation = new MutationObserver(measure);
|
|
32
|
+
mutation.observe(el, {
|
|
33
|
+
childList: true,
|
|
34
|
+
subtree: true,
|
|
35
|
+
attributes: true,
|
|
36
|
+
attributeFilter: ['href', 'disabled', 'tabindex', 'inert', 'hidden', 'contenteditable'],
|
|
37
|
+
});
|
|
38
|
+
return () => {
|
|
39
|
+
cancelAnimationFrame(frame);
|
|
40
|
+
resize.disconnect();
|
|
41
|
+
mutation.disconnect();
|
|
42
|
+
};
|
|
43
|
+
}, [ref]);
|
|
44
|
+
return tabbable;
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=use-scroll-tab-stop.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-scroll-tab-stop.js","sourceRoot":"","sources":["../../src/lib/use-scroll-tab-stop.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAE5D,MAAM,SAAS,GACb,mOAAmO,CAAC;AAEtO;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,GAAkC;IACjE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,MAAM,MAAM,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;QACnD,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC5B,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACjC,kFAAkF;gBAClF,KAAK,MAAM,KAAK,IAAI,EAAE,CAAC,QAAQ;oBAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACvD,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,GAAG,CAAC,CAAC;gBACtD,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CACxD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,GAAG,CAAC,CAC1E,CAAC;gBACF,WAAW,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;YACrC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QACF,OAAO,EAAE,CAAC;QACV,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACnB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC/C,QAAQ,CAAC,OAAO,CAAC,EAAE,EAAE;YACnB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,iBAAiB,CAAC;SACxF,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC5B,MAAM,CAAC,UAAU,EAAE,CAAC;YACpB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACV,OAAO,QAAQ,CAAC;AAClB,CAAC"}
|
|
@@ -64,6 +64,7 @@ export declare function ShellBody({ children, className }: {
|
|
|
64
64
|
children: ReactNode;
|
|
65
65
|
className?: string;
|
|
66
66
|
}): import("react").JSX.Element;
|
|
67
|
+
/** Content a keyboard can already reach inside a scroller, which then needs no tab stop of its own. */
|
|
67
68
|
/**
|
|
68
69
|
* The main landmark and scroll container; the skip link lands here. `relative` so anything absolutely positioned
|
|
69
70
|
* inside (sr-only text, React Aria's hidden inputs) scrolls with the page instead of being placed against the shell.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-shell.d.ts","sourceRoot":"","sources":["../../src/shell/dashboard-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EASL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"dashboard-shell.d.ts","sourceRoot":"","sources":["../../src/shell/dashboard-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EASL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE5D,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AACnE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,iFAAiF;AACjF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,SAAS,CAAC;IACrB,cAAc,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,UAAU,EAAE,eAAe,CAAC;IAC5B,4EAA4E;IAC5E,YAAY,EAAE,OAAO,CAAC;CACvB;AAID,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C;AACD,wFAAwF;AACxF,wBAAgB,gBAAgB,IAAI,iBAAiB,GAAG,IAAI,CAE3D;AAeD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,wFAAwF;IACxF,WAAW,EAAE,MAAM,CAAC;IACpB,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kFAAkF;IAClF,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,sEAAsE;IACtE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,oBAA4B,EAC5B,uBAAuB,EACvB,IAAI,EAAE,UAAU,EAChB,UAAsB,EACtB,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,+BA8FrB;AAED,sGAAsG;AACtG,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY9F;AAED,6DAA6D;AAC7D,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE7F;AAED,uGAAuG;AACvG;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,iBAAiB,EAAE,UAAU,GAC9B,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,+BAsBA"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
4
4
|
import { cn } from '../lib/cn.js';
|
|
5
|
+
import { useScrollTabStop } from '../lib/use-scroll-tab-stop.js';
|
|
5
6
|
import { SkipLink } from './landmarks.js';
|
|
6
7
|
const ShellContext = createContext(null);
|
|
7
8
|
export function useShell() {
|
|
@@ -113,7 +114,6 @@ export function ShellBody({ children, className }) {
|
|
|
113
114
|
return _jsx("div", { className: cn('flex min-h-0 flex-1', className), children: children });
|
|
114
115
|
}
|
|
115
116
|
/** Content a keyboard can already reach inside a scroller, which then needs no tab stop of its own. */
|
|
116
|
-
const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, iframe, [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
|
|
117
117
|
/**
|
|
118
118
|
* The main landmark and scroll container; the skip link lands here. `relative` so anything absolutely positioned
|
|
119
119
|
* inside (sr-only text, React Aria's hidden inputs) scrolls with the page instead of being placed against the shell.
|
|
@@ -125,39 +125,7 @@ const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([t
|
|
|
125
125
|
*/
|
|
126
126
|
export function ShellMain({ children, className, 'aria-labelledby': labelledBy, }) {
|
|
127
127
|
const ref = useRef(null);
|
|
128
|
-
const
|
|
129
|
-
useEffect(() => {
|
|
130
|
-
const main = ref.current;
|
|
131
|
-
if (!main)
|
|
132
|
-
return;
|
|
133
|
-
let frame = 0;
|
|
134
|
-
const resize = new ResizeObserver(() => measure());
|
|
135
|
-
const measure = () => {
|
|
136
|
-
cancelAnimationFrame(frame);
|
|
137
|
-
frame = requestAnimationFrame(() => {
|
|
138
|
-
// The content can grow without main resizing, so watch what is in it too.
|
|
139
|
-
for (const child of main.children)
|
|
140
|
-
resize.observe(child);
|
|
141
|
-
const scrolls = main.scrollHeight > main.clientHeight + 1;
|
|
142
|
-
const reachable = [...main.querySelectorAll(FOCUSABLE)].some((el) => !el.closest('[inert]') && el.getClientRects().length > 0);
|
|
143
|
-
setTabbable(scrolls && !reachable);
|
|
144
|
-
});
|
|
145
|
-
};
|
|
146
|
-
measure();
|
|
147
|
-
resize.observe(main);
|
|
148
|
-
const mutation = new MutationObserver(measure);
|
|
149
|
-
mutation.observe(main, {
|
|
150
|
-
childList: true,
|
|
151
|
-
subtree: true,
|
|
152
|
-
attributes: true,
|
|
153
|
-
attributeFilter: ['href', 'disabled', 'tabindex', 'inert', 'hidden', 'contenteditable'],
|
|
154
|
-
});
|
|
155
|
-
return () => {
|
|
156
|
-
cancelAnimationFrame(frame);
|
|
157
|
-
resize.disconnect();
|
|
158
|
-
mutation.disconnect();
|
|
159
|
-
};
|
|
160
|
-
}, []);
|
|
128
|
+
const tabbable = useScrollTabStop(ref);
|
|
161
129
|
return (_jsx("main", { ref: ref, id: "main",
|
|
162
130
|
// A scroller with nothing focusable in it has to take focus itself, or a keyboard can't scroll it.
|
|
163
131
|
// oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-shell.js","sourceRoot":"","sources":["../../src/shell/dashboard-shell.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"dashboard-shell.js","sourceRoot":"","sources":["../../src/shell/dashboard-shell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
+
import { type IconProp } from '../ui/icon.js';
|
|
2
3
|
export interface PageHeaderProps {
|
|
3
4
|
title: string;
|
|
5
|
+
/**
|
|
6
|
+
* An icon before the title, drawn in `muted-foreground` and hidden from assistive technology, so the h1 is named
|
|
7
|
+
* by its words alone. A component, or an element when a server component passes it.
|
|
8
|
+
*/
|
|
9
|
+
icon?: IconProp;
|
|
4
10
|
description?: string;
|
|
5
11
|
/** Page actions: at most one primary. Wraps below the title when it runs out of room. */
|
|
6
12
|
actions?: ReactNode;
|
|
@@ -10,7 +16,7 @@ export interface PageHeaderProps {
|
|
|
10
16
|
className?: string;
|
|
11
17
|
}
|
|
12
18
|
/** The page's h1, one-line description and actions. */
|
|
13
|
-
export declare function PageHeader({ title, description, actions, breadcrumbs, titleId, className, }: PageHeaderProps): import("react").JSX.Element;
|
|
19
|
+
export declare function PageHeader({ title, icon, description, actions, breadcrumbs, titleId, className, }: PageHeaderProps): import("react").JSX.Element;
|
|
14
20
|
/** Padding for everything below the page header. */
|
|
15
21
|
export declare function PageContent({ children, className }: {
|
|
16
22
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../src/shell/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../src/shell/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE1D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yFAAyF;IACzF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8FAA8F;IAC9F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,uDAAuD;AACvD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,OAAO,EACP,WAAW,EACX,OAAsB,EACtB,SAAS,GACV,EAAE,eAAe,+BAqBjB;AAED,oDAAoD;AACpD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAM/F"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from '../lib/cn.js';
|
|
3
|
+
import { renderIcon } from '../ui/icon.js';
|
|
3
4
|
/** The page's h1, one-line description and actions. */
|
|
4
|
-
export function PageHeader({ title, description, actions, breadcrumbs, titleId = 'page-title', className, }) {
|
|
5
|
-
return (_jsxs("div", { className: cn('flex flex-wrap items-end justify-between gap-4 px-(--gutter) pt-5 pb-4 @max-[40rem]/main:px-4', className), children: [_jsxs("div", { className: "min-w-0 flex-[1_1_20rem]", children: [breadcrumbs && _jsx("div", { className: "mb-1", children: breadcrumbs }),
|
|
5
|
+
export function PageHeader({ title, icon, description, actions, breadcrumbs, titleId = 'page-title', className, }) {
|
|
6
|
+
return (_jsxs("div", { className: cn('flex flex-wrap items-end justify-between gap-4 px-(--gutter) pt-5 pb-4 @max-[40rem]/main:px-4', className), children: [_jsxs("div", { className: "min-w-0 flex-[1_1_20rem]", children: [breadcrumbs && _jsx("div", { className: "mb-1", children: breadcrumbs }), _jsxs("h1", { id: titleId, className: cn('text-title', icon && 'flex items-center gap-3'), children: [icon && renderIcon(icon, 'size-7 shrink-0 text-muted-foreground'), icon ? _jsx("span", { className: "min-w-0", children: title }) : title] }), description && (_jsx("p", { className: "mt-1 max-w-(--measure) text-sm text-muted-foreground", children: description }))] }), actions && _jsx("div", { className: "flex flex-wrap items-center gap-(--control-gap)", children: actions })] }));
|
|
6
7
|
}
|
|
7
8
|
/** Padding for everything below the page header. */
|
|
8
9
|
export function PageContent({ children, className }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../src/shell/page-header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../src/shell/page-header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAiB,MAAM,eAAe,CAAC;AAkB1D,uDAAuD;AACvD,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,OAAO,EACP,WAAW,EACX,OAAO,GAAG,YAAY,EACtB,SAAS,GACO;IAChB,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,+FAA+F,EAC/F,SAAS,CACV,aAED,eAAK,SAAS,EAAC,0BAA0B,aACtC,WAAW,IAAI,cAAK,SAAS,EAAC,MAAM,YAAE,WAAW,GAAO,EACzD,cAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,IAAI,IAAI,yBAAyB,CAAC,aAC5E,IAAI,IAAI,UAAU,CAAC,IAAI,EAAE,uCAAuC,CAAC,EACjE,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,SAAS,YAAE,KAAK,GAAQ,CAAC,CAAC,CAAC,KAAK,IACrD,EACJ,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,sDAAsD,YAAE,WAAW,GAAK,CACtF,IACG,EACL,OAAO,IAAI,cAAK,SAAS,EAAC,iDAAiD,YAAE,OAAO,GAAO,IACxF,CACP,CAAC;AACJ,CAAC;AAED,oDAAoD;AACpD,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA+C;IAC9F,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,oDAAoD,EAAE,SAAS,CAAC,YAChF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -13,6 +13,26 @@ export interface RightPanelProps {
|
|
|
13
13
|
children: ReactNode;
|
|
14
14
|
/** Actions pinned to the bottom. */
|
|
15
15
|
footer?: ReactNode;
|
|
16
|
+
/**
|
|
17
|
+
* Its width beside main: `"default"`, `--panel-width` (320px; 360px at AAA); `"wide"`, `--panel-width-wide` (512px;
|
|
18
|
+
* 560px at AAA), for a panel that is a working surface such as a chat; or a number of px, kept between
|
|
19
|
+
* `--panel-width` and the smaller of `--panel-width-max` (720px) and half the shell, for a product that lets people
|
|
20
|
+
* set it. As a Sheet, below 1024px, it is the Sheet's width whatever this says.
|
|
21
|
+
*/
|
|
22
|
+
width?: 'default' | 'wide' | number;
|
|
23
|
+
/**
|
|
24
|
+
* Hides the title bar beside main, for content with a header of its own (a chat's tabs and the scene's name). The
|
|
25
|
+
* panel stays named: by `title`, or by `aria-labelledby` pointing at that header's heading. As a Sheet the title
|
|
26
|
+
* bar stays, since it holds the Sheet's close button.
|
|
27
|
+
*/
|
|
28
|
+
hideTitleBar?: boolean;
|
|
29
|
+
/** The id of the content's own heading, which then names the panel instead of `title`. */
|
|
30
|
+
'aria-labelledby'?: string;
|
|
31
|
+
/**
|
|
32
|
+
* `false` for a panel that is the page's main working surface: beside main it has no close button and stays
|
|
33
|
+
* open. As a Sheet, below 1024px, it still opens and closes as before.
|
|
34
|
+
*/
|
|
35
|
+
isDismissable?: boolean;
|
|
16
36
|
labels?: Partial<RightPanelLabels>;
|
|
17
37
|
className?: string;
|
|
18
38
|
}
|
|
@@ -20,7 +40,7 @@ export interface RightPanelProps {
|
|
|
20
40
|
* Extra information about the current selection. An <aside> beside main on wide shells,
|
|
21
41
|
* a Sheet (modal dialog) on narrow ones. Closing returns focus to the PanelToggle.
|
|
22
42
|
*/
|
|
23
|
-
export declare function RightPanel({ title, children, footer, labels: given, className }: RightPanelProps): import("react").JSX.Element | null;
|
|
43
|
+
export declare function RightPanel({ title, children, footer, width, hideTitleBar, 'aria-labelledby': labelledBy, isDismissable, labels: given, className, }: RightPanelProps): import("react").JSX.Element | null;
|
|
24
44
|
/** Shows and hides the right panel. Put it in the page actions. */
|
|
25
45
|
export declare function PanelToggle({ label, labels, }: {
|
|
26
46
|
/** @deprecated Use `labels.toggle`. Kept for one release. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"right-panel.d.ts","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAS9D,gDAAgD;AAChD,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAG9B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"right-panel.d.ts","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAS9D,gDAAgD;AAChD,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAG9B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACpC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0FAA0F;IAC1F,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAiB,EACjB,YAAY,EACZ,iBAAiB,EAAE,UAAU,EAC7B,aAAoB,EACpB,MAAM,EAAE,KAAK,EACb,SAAS,GACV,EAAE,eAAe,sCA0EjB;AAED,mEAAmE;AACnE,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,GACP,EAAE;IACD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACpC,+BAcA;AAED,uCAAuC;AACvC,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAOA"}
|
|
@@ -12,11 +12,12 @@ export const rightPanelLabels = {
|
|
|
12
12
|
close: 'Close {title}',
|
|
13
13
|
toggle: 'Details panel',
|
|
14
14
|
};
|
|
15
|
+
const panelWidths = { default: 'w-panel', wide: 'w-(--panel-width-wide)' };
|
|
15
16
|
/**
|
|
16
17
|
* Extra information about the current selection. An <aside> beside main on wide shells,
|
|
17
18
|
* a Sheet (modal dialog) on narrow ones. Closing returns focus to the PanelToggle.
|
|
18
19
|
*/
|
|
19
|
-
export function RightPanel({ title, children, footer, labels: given, className }) {
|
|
20
|
+
export function RightPanel({ title, children, footer, width = 'default', hideTitleBar, 'aria-labelledby': labelledBy, isDismissable = true, labels: given, className, }) {
|
|
20
21
|
const t = useLabels('rightPanel', rightPanelLabels, given);
|
|
21
22
|
const close = t('close', { title });
|
|
22
23
|
const { panelOpen, setPanelOpen, panelMode, panelToggleRef, isSizeForced } = useShell();
|
|
@@ -26,12 +27,19 @@ export function RightPanel({ title, children, footer, labels: given, className }
|
|
|
26
27
|
if (panelMode === 'sheet') {
|
|
27
28
|
return (_jsx(Sheet, { side: "right", title: title, labels: { close: literal(close) }, isOpen: panelOpen, onOpenChange: setPanelOpen, footer: foot, children: body }));
|
|
28
29
|
}
|
|
29
|
-
|
|
30
|
+
// A panel that can't be closed stays open beside main, whatever the toggle state says.
|
|
31
|
+
if (!panelOpen && isDismissable)
|
|
30
32
|
return null;
|
|
31
|
-
|
|
33
|
+
const named = labelledBy ?? (hideTitleBar ? undefined : headingId);
|
|
34
|
+
return (_jsxs("aside", { "aria-labelledby": named, "aria-label": named ? undefined : title, style: {
|
|
35
|
+
viewTransitionName: 'shell-panel',
|
|
36
|
+
...(typeof width === 'number' && {
|
|
37
|
+
width: `clamp(var(--panel-width), ${width}px, min(var(--panel-width-max), 50%))`,
|
|
38
|
+
}),
|
|
39
|
+
}, className: cn('flex shrink-0 flex-col border-l border-border bg-card text-card-foreground', typeof width === 'number' ? 'max-w-[50%]' : panelWidths[width], !isSizeForced && '@max-[64rem]/shell:hidden', className), children: [!hideTitleBar && (_jsxs("div", { className: "flex min-h-[calc(var(--control-height)+1rem)] items-center justify-between gap-2 border-b border-border py-2 pr-2 pl-4", children: [_jsx("h2", { id: headingId, className: "text-subheading", children: title }), isDismissable && (_jsx(IconButton, { label: close, icon: X, visualSize: "icon-sm", tooltip: false, className: "justify-end", onPress: () => {
|
|
32
40
|
setPanelOpen(false);
|
|
33
41
|
requestAnimationFrame(() => panelToggleRef.current?.focus());
|
|
34
|
-
} })] }), body, foot] }));
|
|
42
|
+
} }))] })), body, foot] }));
|
|
35
43
|
}
|
|
36
44
|
/** Shows and hides the right panel. Put it in the page actions. */
|
|
37
45
|
export function PanelToggle({ label, labels, }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"right-panel.js","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAkC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAUhD,MAAM,CAAC,MAAM,gBAAgB,GAAqB;IAChD,KAAK,EAAE,eAAe;IACtB,MAAM,EAAE,eAAe;CACxB,CAAC;
|
|
1
|
+
{"version":3,"file":"right-panel.js","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAkC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAUhD,MAAM,CAAC,MAAM,gBAAgB,GAAqB;IAChD,KAAK,EAAE,eAAe;IACtB,MAAM,EAAE,eAAe;CACxB,CAAC;AAgCF,MAAM,WAAW,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,wBAAwB,EAAE,CAAC;AAE3E;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,GAAG,SAAS,EACjB,YAAY,EACZ,iBAAiB,EAAE,UAAU,EAC7B,aAAa,GAAG,IAAI,EACpB,MAAM,EAAE,KAAK,EACb,SAAS,GACO;IAChB,MAAM,CAAC,GAAG,SAAS,CAAC,YAAY,EAAE,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACpC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxF,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CACpB,cAAK,SAAS,EAAC,oEAAoE,YAChF,MAAM,GACH,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;IACT,MAAM,IAAI,GAAG,CACX,cAAK,SAAS,EAAC,iEAAiE,YAC7E,QAAQ,GACL,CACP,CAAC;IAEF,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;QAC1B,OAAO,CACL,KAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,EACjC,MAAM,EAAE,SAAS,EACjB,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,IAAI,YAEX,IAAI,GACC,CACT,CAAC;IACJ,CAAC;IACD,uFAAuF;IACvF,IAAI,CAAC,SAAS,IAAI,aAAa;QAAE,OAAO,IAAI,CAAC;IAC7C,MAAM,KAAK,GAAG,UAAU,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACnE,OAAO,CACL,oCACmB,KAAK,gBACV,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACrC,KAAK,EAAE;YACL,kBAAkB,EAAE,aAAa;YACjC,GAAG,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI;gBAC/B,KAAK,EAAE,6BAA6B,KAAK,uCAAuC;aACjF,CAAC;SACH,EACD,SAAS,EAAE,EAAE,CACX,4EAA4E,EAC5E,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,EAC9D,CAAC,YAAY,IAAI,2BAA2B,EAC5C,SAAS,CACV,aAEA,CAAC,YAAY,IAAI,CAChB,eAAK,SAAS,EAAC,wHAAwH,aACrI,aAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAC,iBAAiB,YAC3C,KAAK,GACH,EACJ,aAAa,IAAI,CAChB,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,CAAC,EACP,UAAU,EAAC,SAAS,EACpB,OAAO,EAAE,KAAK,EACd,SAAS,EAAC,aAAa,EACvB,OAAO,EAAE,GAAG,EAAE;4BACZ,YAAY,CAAC,KAAK,CAAC,CAAC;4BACpB,qBAAqB,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;wBAC/D,CAAC,GACD,CACH,IACG,CACP,EACA,IAAI,EACJ,IAAI,IACC,CACT,CAAC;AACJ,CAAC;AAED,mEAAmE;AACnE,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,GAKP;IACC,MAAM,CAAC,GAAG,SAAS,CAAC,YAAY,EAAE,gBAAgB,EAAE,MAAM,CAAC,CAAC;IAC5D,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC1E,OAAO,CACL,KAAC,UAAU,IACT,GAAG,EAAE,cAA8C,EACnD,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC,QAAQ,CAAC,EAC3B,IAAI,EAAE,UAAU,EAChB,OAAO,EAAC,SAAS,mBACF,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBAC9C,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC3D,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,GACvC,CACH,CAAC;AACJ,CAAC;AAED,uCAAuC;AACvC,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,GAKV;IACC,OAAO,CACL,mBAAS,SAAS,EAAE,SAAS,aAC1B,KAAK,IAAI,aAAI,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAM,EAC5D,QAAQ,IACD,CACX,CAAC;AACJ,CAAC"}
|
package/dist/styles/theme.css
CHANGED
|
@@ -1322,3 +1322,17 @@
|
|
|
1322
1322
|
@slot;
|
|
1323
1323
|
}
|
|
1324
1324
|
}
|
|
1325
|
+
/* data-density="compact" on a container: denser controls for a tool UI (a timeline, a transport bar), at AA only.
|
|
1326
|
+
Paint, padding, gaps and text tighten; every target stays at least --target-min (24px), and text at least 13px.
|
|
1327
|
+
At AAA it changes nothing: targets are 44px there, so smaller paint would leave the layout as it was. */
|
|
1328
|
+
/* AAA as products mark it (data-conformance) and as the design-system artifact does (data-theme). */
|
|
1329
|
+
:root:not([data-conformance="aaa"], [data-theme$="-aaa"]) [data-density="compact"] {
|
|
1330
|
+
--control-height: var(--control-height-compact);
|
|
1331
|
+
--control-height-sm: var(--control-height-sm-compact);
|
|
1332
|
+
--control-height-lg: var(--control-height-lg-compact);
|
|
1333
|
+
--control-pad-x: var(--control-pad-x-compact);
|
|
1334
|
+
--control-gap: var(--control-gap-compact);
|
|
1335
|
+
--nav-item-height: var(--nav-item-height-compact);
|
|
1336
|
+
--field-gap: var(--field-gap-compact);
|
|
1337
|
+
--text-sm: var(--text-sm-compact);
|
|
1338
|
+
}
|
package/dist/styles/tokens.css
CHANGED
|
@@ -48,6 +48,14 @@
|
|
|
48
48
|
--measure-aaa: 64ch;
|
|
49
49
|
--motion-distance-aa: 8px;
|
|
50
50
|
--motion-distance-aaa: 0px;
|
|
51
|
+
--control-height-compact: 28px;
|
|
52
|
+
--control-height-sm-compact: 24px;
|
|
53
|
+
--control-height-lg-compact: 36px;
|
|
54
|
+
--control-pad-x-compact: 8px;
|
|
55
|
+
--control-gap-compact: 4px;
|
|
56
|
+
--nav-item-height-compact: 28px;
|
|
57
|
+
--field-gap-compact: 12px;
|
|
58
|
+
--text-sm-compact: 13px;
|
|
51
59
|
--header-height-aa: 56px;
|
|
52
60
|
--header-height-aaa: 56px;
|
|
53
61
|
--sidebar-width-aa: 256px;
|
|
@@ -61,6 +69,14 @@
|
|
|
61
69
|
--subnav-width-aaa: 240px;
|
|
62
70
|
--panel-width-aa: 320px;
|
|
63
71
|
--panel-width-aaa: 360px;
|
|
72
|
+
--panel-width-wide-aa: 512px;
|
|
73
|
+
--panel-width-wide-aaa: 560px;
|
|
74
|
+
--panel-width-max: 720px;
|
|
75
|
+
--dialog-width-sm: 26rem;
|
|
76
|
+
--dialog-width-md: 32rem;
|
|
77
|
+
--dialog-width-lg: 44rem;
|
|
78
|
+
--dialog-width-xl: 60rem;
|
|
79
|
+
--dialog-width-2xl: 77.5rem;
|
|
64
80
|
--gutter: 24px;
|
|
65
81
|
--content-max: 1440px;
|
|
66
82
|
--site-max: 1180px;
|
|
@@ -106,6 +122,7 @@
|
|
|
106
122
|
--rail-width: var(--rail-width-aa);
|
|
107
123
|
--subnav-width: var(--subnav-width-aa);
|
|
108
124
|
--panel-width: var(--panel-width-aa);
|
|
125
|
+
--panel-width-wide: var(--panel-width-wide-aa);
|
|
109
126
|
}
|
|
110
127
|
:root[data-conformance="aaa"] {
|
|
111
128
|
--target-min: var(--target-min-aaa);
|
|
@@ -129,6 +146,7 @@
|
|
|
129
146
|
--rail-width: var(--rail-width-aaa);
|
|
130
147
|
--subnav-width: var(--subnav-width-aaa);
|
|
131
148
|
--panel-width: var(--panel-width-aaa);
|
|
149
|
+
--panel-width-wide: var(--panel-width-wide-aaa);
|
|
132
150
|
}
|
|
133
151
|
@media (prefers-reduced-motion: reduce) { :root { --motion-distance: 0px; } }
|
|
134
152
|
|
package/dist/tokens.json
CHANGED
|
@@ -837,6 +837,46 @@
|
|
|
837
837
|
"name": "motion-distance-aaa",
|
|
838
838
|
"value": "0px",
|
|
839
839
|
"usage": "WCAG 2.3.3: at AAA transitions fade only — opacity is not motion — so no interaction moves content."
|
|
840
|
+
},
|
|
841
|
+
{
|
|
842
|
+
"name": "control-height-compact",
|
|
843
|
+
"value": "28px",
|
|
844
|
+
"usage": "data-density=\"compact\", at AA only: a control's painted height (resolved as --control-height). Its target stays at least --target-min."
|
|
845
|
+
},
|
|
846
|
+
{
|
|
847
|
+
"name": "control-height-sm-compact",
|
|
848
|
+
"value": "24px",
|
|
849
|
+
"usage": "Compact density's small controls: the AA target floor, so paint and target are one."
|
|
850
|
+
},
|
|
851
|
+
{
|
|
852
|
+
"name": "control-height-lg-compact",
|
|
853
|
+
"value": "36px",
|
|
854
|
+
"usage": "Compact density's large controls."
|
|
855
|
+
},
|
|
856
|
+
{
|
|
857
|
+
"name": "control-pad-x-compact",
|
|
858
|
+
"value": "8px",
|
|
859
|
+
"usage": "Compact density's padding either side of a control's content."
|
|
860
|
+
},
|
|
861
|
+
{
|
|
862
|
+
"name": "control-gap-compact",
|
|
863
|
+
"value": "4px",
|
|
864
|
+
"usage": "Compact density's gap between controls. Targets don't overlap: a control's target is its own box."
|
|
865
|
+
},
|
|
866
|
+
{
|
|
867
|
+
"name": "nav-item-height-compact",
|
|
868
|
+
"value": "28px",
|
|
869
|
+
"usage": "Compact density's menu and list rows."
|
|
870
|
+
},
|
|
871
|
+
{
|
|
872
|
+
"name": "field-gap-compact",
|
|
873
|
+
"value": "12px",
|
|
874
|
+
"usage": "Compact density's space between fields."
|
|
875
|
+
},
|
|
876
|
+
{
|
|
877
|
+
"name": "text-sm-compact",
|
|
878
|
+
"value": "13px",
|
|
879
|
+
"usage": "Compact density's interface text (Tailwind's text-sm): the system's 13px floor, never smaller."
|
|
840
880
|
}
|
|
841
881
|
]
|
|
842
882
|
},
|
|
@@ -908,6 +948,46 @@
|
|
|
908
948
|
"value": "360px",
|
|
909
949
|
"usage": "Right panel at AAA."
|
|
910
950
|
},
|
|
951
|
+
{
|
|
952
|
+
"name": "panel-width-wide-aa",
|
|
953
|
+
"value": "512px",
|
|
954
|
+
"usage": "RightPanel width=\"wide\": a panel that is a working surface, such as a chat (resolved as --panel-width-wide)."
|
|
955
|
+
},
|
|
956
|
+
{
|
|
957
|
+
"name": "panel-width-wide-aaa",
|
|
958
|
+
"value": "560px",
|
|
959
|
+
"usage": "RightPanel width=\"wide\" at AAA."
|
|
960
|
+
},
|
|
961
|
+
{
|
|
962
|
+
"name": "panel-width-max",
|
|
963
|
+
"value": "720px",
|
|
964
|
+
"usage": "The widest a resizable RightPanel can be dragged; never more than half the shell either."
|
|
965
|
+
},
|
|
966
|
+
{
|
|
967
|
+
"name": "dialog-width-sm",
|
|
968
|
+
"value": "26rem",
|
|
969
|
+
"usage": "Dialog size=\"sm\": a confirmation."
|
|
970
|
+
},
|
|
971
|
+
{
|
|
972
|
+
"name": "dialog-width-md",
|
|
973
|
+
"value": "32rem",
|
|
974
|
+
"usage": "Dialog size=\"md\", the default: a short form."
|
|
975
|
+
},
|
|
976
|
+
{
|
|
977
|
+
"name": "dialog-width-lg",
|
|
978
|
+
"value": "44rem",
|
|
979
|
+
"usage": "Dialog size=\"lg\": a longer form, two columns."
|
|
980
|
+
},
|
|
981
|
+
{
|
|
982
|
+
"name": "dialog-width-xl",
|
|
983
|
+
"value": "60rem",
|
|
984
|
+
"usage": "Dialog size=\"xl\": a gallery of cards, a picker with a preview."
|
|
985
|
+
},
|
|
986
|
+
{
|
|
987
|
+
"name": "dialog-width-2xl",
|
|
988
|
+
"value": "77.5rem",
|
|
989
|
+
"usage": "Dialog size=\"2xl\": a library or a board, 1240px. size=\"full\" fills the viewport but its margins."
|
|
990
|
+
},
|
|
911
991
|
{
|
|
912
992
|
"name": "gutter",
|
|
913
993
|
"value": "24px",
|
package/dist/ui/button.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { composeRenderProps, type ButtonProps as RACButtonProps, type LinkProps as RACLinkProps } from 'react-aria-components';
|
|
2
2
|
import { type ButtonVariant, type ButtonVisualSize } from './button-styles.js';
|
|
3
3
|
import { type KeyshortcutsProps } from '../lib/keyshortcuts.js';
|
|
4
|
+
import { type DisabledReasonProps } from './disabled-reason.js';
|
|
4
5
|
export type { ButtonVariant, ButtonVisualSize };
|
|
5
6
|
interface LayerProps {
|
|
6
7
|
variant?: ButtonVariant;
|
|
@@ -13,7 +14,7 @@ interface LayerProps {
|
|
|
13
14
|
/** Layer 2, the painted box. */
|
|
14
15
|
visualClassName?: string;
|
|
15
16
|
}
|
|
16
|
-
export interface ButtonProps extends Omit<RACButtonProps, 'className'>, LayerProps, KeyshortcutsProps {
|
|
17
|
+
export interface ButtonProps extends Omit<RACButtonProps, 'className'>, LayerProps, KeyshortcutsProps, DisabledReasonProps {
|
|
17
18
|
}
|
|
18
19
|
/**
|
|
19
20
|
* React Aria Button. One `primary` per view; `outline` is the default.
|
package/dist/ui/button.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,kBAAkB,EAClB,KAAK,WAAW,IAAI,cAAc,EAClC,KAAK,SAAS,IAAI,YAAY,EAC/B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACtB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEjF,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC;AAEhD,UAAU,UAAU;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mGAAmG;IACnG,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oGAAoG;IACpG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE,UAAU,EAAE,iBAAiB;CAAG;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,kBAAkB,EAClB,KAAK,WAAW,IAAI,cAAc,EAClC,KAAK,SAAS,IAAI,YAAY,EAC/B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACtB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEjF,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC;AAEhD,UAAU,UAAU;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mGAAmG;IACnG,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oGAAoG;IACpG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE,UAAU,EAAE,iBAAiB,EAAE,mBAAmB;CAAG;AAElG;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAuDjB,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,EAAE,UAAU,EAAE,iBAAiB;CAAG;AAE3E,wGAAwG;AACxG,eAAO,MAAM,UAAU,+GA8BrB,CAAC;AAEH,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
|
package/dist/ui/button.js
CHANGED
|
@@ -1,23 +1,29 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef } from 'react';
|
|
3
|
+
import { forwardRef, useId } from 'react';
|
|
4
4
|
import { Button as RACButton, Link as RACLink, composeRenderProps, } from 'react-aria-components';
|
|
5
5
|
import { buttonTargetStyles, buttonVisualStyles, } from './button-styles.js';
|
|
6
6
|
import { SpinnerIcon } from './spinner.js';
|
|
7
7
|
import { useKeyshortcuts } from '../lib/keyshortcuts.js';
|
|
8
|
+
import { Tooltip, TooltipTrigger } from './tooltip.js';
|
|
9
|
+
import { DisabledReasonText, disabledReasonProps, } from './disabled-reason.js';
|
|
8
10
|
/**
|
|
9
11
|
* React Aria Button. One `primary` per view; `outline` is the default.
|
|
10
12
|
* `isPending` keeps it focusable, announces the wait and swaps any leading icon for a spinner.
|
|
11
13
|
*/
|
|
12
|
-
export const Button = forwardRef(function Button({ variant = 'outline', visualSize = 'default', fullWidth, className, visualClassName, children, 'aria-keyshortcuts': keys, ...props }, ref) {
|
|
14
|
+
export const Button = forwardRef(function Button({ variant = 'outline', visualSize = 'default', fullWidth, className, visualClassName, children, 'aria-keyshortcuts': keys, disabledReason, ...props }, ref) {
|
|
13
15
|
const iconOnly = visualSize === 'icon' || visualSize === 'icon-sm';
|
|
14
16
|
const target = useKeyshortcuts(keys, ref);
|
|
15
|
-
|
|
17
|
+
const reasonId = useId();
|
|
18
|
+
const button = (_jsx(RACButton, { ref: target, ...props, ...disabledReasonProps(disabledReason, props['aria-describedby'], reasonId), className: buttonTargetStyles({ fullWidth, className }), children: composeRenderProps(children, (kids, { isPending }) => (_jsx("span", { className: buttonVisualStyles({
|
|
16
19
|
variant,
|
|
17
20
|
visualSize,
|
|
18
21
|
fullWidth,
|
|
19
22
|
className: visualClassName,
|
|
20
23
|
}), children: isPending && iconOnly ? (_jsx(SpinnerIcon, {})) : (_jsxs(_Fragment, { children: [isPending && _jsx(SpinnerIcon, {}), kids] })) }))) }));
|
|
24
|
+
if (!disabledReason)
|
|
25
|
+
return button;
|
|
26
|
+
return (_jsxs(_Fragment, { children: [_jsxs(TooltipTrigger, { delay: 500, children: [button, _jsx(Tooltip, { children: disabledReason })] }), _jsx(DisabledReasonText, { reason: disabledReason, id: reasonId })] }));
|
|
21
27
|
});
|
|
22
28
|
/** A link that looks like a button — for navigation, never for actions. Same three layers as Button. */
|
|
23
29
|
export const LinkButton = forwardRef(function LinkButton({ variant = 'outline', visualSize = 'default', fullWidth, className, visualClassName, children, 'aria-keyshortcuts': keys, ...props }, ref) {
|
package/dist/ui/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/dialog.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
+
import { type IconProp } from './icon.js';
|
|
2
3
|
/** A Dialog's words, for the `labels` prop. */
|
|
3
4
|
export interface DialogLabels {
|
|
4
5
|
close: string;
|
|
@@ -8,20 +9,31 @@ export interface DialogProps {
|
|
|
8
9
|
isOpen: boolean;
|
|
9
10
|
onOpenChange: (open: boolean) => void;
|
|
10
11
|
title: string;
|
|
12
|
+
/**
|
|
13
|
+
* An icon before the title, in `muted-foreground` and hidden from assistive technology, so the dialog is named by
|
|
14
|
+
* the title's words alone.
|
|
15
|
+
*/
|
|
16
|
+
icon?: IconProp;
|
|
11
17
|
/** One or two sentences under the title; read as the dialog's description. */
|
|
12
18
|
description?: ReactNode;
|
|
13
19
|
children?: ReactNode;
|
|
20
|
+
/** Pinned to the bottom: only the content between the title and the footer scrolls. */
|
|
14
21
|
footer?: ReactNode;
|
|
15
22
|
/** 'alertdialog' for confirmations that interrupt. */
|
|
16
23
|
role?: 'dialog' | 'alertdialog';
|
|
17
24
|
/** Backdrop click and the × close it. Default true; false for confirmations. Escape always closes. */
|
|
18
25
|
isDismissable?: boolean;
|
|
19
|
-
|
|
26
|
+
/**
|
|
27
|
+
* Its widest, from the `dialog-width-*` tokens: sm 26rem, md 32rem (the default), lg 44rem, xl 60rem, 2xl 77.5rem
|
|
28
|
+
* (1240px). `full` fills the viewport but its margins. Never wider than the viewport.
|
|
29
|
+
*/
|
|
30
|
+
size?: DialogSize;
|
|
20
31
|
labels?: Partial<DialogLabels>;
|
|
21
32
|
className?: string;
|
|
22
33
|
}
|
|
34
|
+
export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
23
35
|
/** A centred modal: focus moves in and is trapped, Escape closes, focus returns to what opened it. */
|
|
24
|
-
export declare function Dialog({ isOpen, onOpenChange, title, description, children, footer, role, isDismissable, size, labels, className, }: DialogProps): import("react").JSX.Element;
|
|
36
|
+
export declare function Dialog({ isOpen, onOpenChange, title, icon, description, children, footer, role, isDismissable, size, labels, className, }: DialogProps): import("react").JSX.Element;
|
|
25
37
|
/** A ConfirmDialog's words, for the `labels` prop. */
|
|
26
38
|
export interface ConfirmDialogLabels {
|
|
27
39
|
/** The button that closes it without acting. */
|
package/dist/ui/dialog.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQhE,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAItD,+CAA+C;AAC/C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,YAAY,EAAE,YAAiC,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uFAAuF;IACvF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,sGAAsG;IACtG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AAWpE,sGAAsG;AACtG,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAe,EACf,aAAoB,EACpB,IAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,WAAW,+BAoEb;AAED,sDAAsD;AACtD,MAAM,WAAW,mBAAmB;IAClC,gDAAgD;IAChD,MAAM,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,WAAW,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAMjC,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,qFAAqF;IACrF,YAAY,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,+FAA+F;IAC/F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qGAAqG;IACrG,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,IAAe,EACf,WAAW,EACX,SAAS,EACT,MAAM,EAAE,KAAK,GACd,EAAE,kBAAkB,+BAwFpB"}
|
package/dist/ui/dialog.js
CHANGED
|
@@ -1,21 +1,36 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useId, useState } from 'react';
|
|
3
|
+
import { useId, useRef, useState } from 'react';
|
|
4
4
|
import { Dialog as RACDialog, Heading, Modal, ModalOverlay } from 'react-aria-components';
|
|
5
5
|
import { X } from 'lucide-react';
|
|
6
6
|
import { cn } from '../lib/cn.js';
|
|
7
7
|
import { useLabels } from '../lib/locale.js';
|
|
8
|
+
import { useScrollTabStop } from '../lib/use-scroll-tab-stop.js';
|
|
8
9
|
import { Alert } from './alert.js';
|
|
9
10
|
import { Button } from './button.js';
|
|
11
|
+
import { renderIcon } from './icon.js';
|
|
10
12
|
import { IconButton } from './icon-button.js';
|
|
11
13
|
import { TextField } from './text-field.js';
|
|
12
14
|
export const dialogLabels = { close: 'Close' };
|
|
13
|
-
const widths = {
|
|
15
|
+
const widths = {
|
|
16
|
+
sm: 'max-w-(--dialog-width-sm)',
|
|
17
|
+
md: 'max-w-(--dialog-width-md)',
|
|
18
|
+
lg: 'max-w-(--dialog-width-lg)',
|
|
19
|
+
xl: 'max-w-(--dialog-width-xl)',
|
|
20
|
+
'2xl': 'max-w-(--dialog-width-2xl)',
|
|
21
|
+
full: 'max-w-none',
|
|
22
|
+
};
|
|
14
23
|
/** A centred modal: focus moves in and is trapped, Escape closes, focus returns to what opened it. */
|
|
15
|
-
export function Dialog({ isOpen, onOpenChange, title, description, children, footer, role = 'dialog', isDismissable = true, size = 'md', labels, className, }) {
|
|
24
|
+
export function Dialog({ isOpen, onOpenChange, title, icon, description, children, footer, role = 'dialog', isDismissable = true, size = 'md', labels, className, }) {
|
|
16
25
|
const t = useLabels('dialog', dialogLabels, labels);
|
|
17
26
|
const descId = useId();
|
|
18
|
-
|
|
27
|
+
const body = useRef(null);
|
|
28
|
+
const bodyTabbable = useScrollTabStop(body);
|
|
29
|
+
return (_jsx(ModalOverlay, { isOpen: isOpen, onOpenChange: onOpenChange, isDismissable: isDismissable, "data-overlay": true, className: "fixed inset-0 z-(--z-sheet) flex items-center justify-center bg-overlay p-4", children: _jsx(Modal, { "data-sheet": "top", className: cn(
|
|
30
|
+
// A column the viewport's height at most: the title and the footer stay, and only the body scrolls.
|
|
31
|
+
'relative flex max-h-[calc(100dvh-2rem)] w-full flex-col overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-(--shadow-lg) outline-none', widths[size], className), children: _jsxs(RACDialog, { role: role, "aria-describedby": description ? descId : undefined, className: "flex min-h-0 flex-1 flex-col outline-none", children: [_jsxs("div", { className: "flex shrink-0 items-start justify-between gap-3 px-5 pt-5", children: [_jsxs(Heading, { slot: "title", className: cn('text-heading', icon && 'flex items-center gap-2'), children: [icon && renderIcon(icon, 'size-5 shrink-0 text-muted-foreground'), icon ? _jsx("span", { className: "min-w-0", children: title }) : title] }), isDismissable && (_jsx(IconButton, { label: t('close'), icon: X, visualSize: "icon-sm", slot: "close", tooltip: false, className: "-mt-1 -mr-2 items-start justify-end" }))] }), _jsxs("div", { ref: body,
|
|
32
|
+
// oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
33
|
+
tabIndex: bodyTabbable ? 0 : undefined, "data-tabbable": bodyTabbable || undefined, className: "relative flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 pt-2 pb-5 text-sm leading-6 outline-none data-tabbable:focus-visible:focus-ring-inset", children: [description && (_jsx("div", { id: descId, className: "max-w-(--measure) text-muted-foreground", children: description })), children] }), footer && (_jsx("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-(--control-gap) border-t border-border px-5 py-4", children: footer }))] }) }) }));
|
|
19
34
|
}
|
|
20
35
|
export const confirmDialogLabels = {
|
|
21
36
|
cancel: 'Cancel',
|
package/dist/ui/dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* A button that can't act right now and says why: it keeps focus and hover (`aria-disabled`, not `disabled`), so the
|
|
4
|
+
* reason is reachable. The reason is its description, read when it's focused, and its tooltip. Pressing it does
|
|
5
|
+
* nothing, and it can't submit a form.
|
|
6
|
+
*/
|
|
7
|
+
export interface DisabledReasonProps {
|
|
8
|
+
/**
|
|
9
|
+
* Why it can't be used right now ("Claude is working on this scene"). Use it instead of `isDisabled` when the
|
|
10
|
+
* reason isn't obvious from the page: `isDisabled` takes the button out of reach, so it can't explain itself.
|
|
11
|
+
*/
|
|
12
|
+
disabledReason?: string;
|
|
13
|
+
}
|
|
14
|
+
/** What a button with a reason passes on: focusable but inert, described by the element `id` names. */
|
|
15
|
+
export interface DisabledReasonButtonProps {
|
|
16
|
+
isDisabled?: false;
|
|
17
|
+
type?: 'button';
|
|
18
|
+
'aria-disabled'?: true;
|
|
19
|
+
'aria-describedby'?: string;
|
|
20
|
+
onPress?: undefined;
|
|
21
|
+
onPressStart?: undefined;
|
|
22
|
+
onPressEnd?: undefined;
|
|
23
|
+
onPressUp?: undefined;
|
|
24
|
+
onPressChange?: undefined;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* The props for a button with `reason`, given the id of the element holding it (useId: no hook here, so a server
|
|
28
|
+
* component can call this, as IconButton does). None without a reason.
|
|
29
|
+
*/
|
|
30
|
+
export declare function disabledReasonProps(reason: string | undefined, describedBy: string | undefined, id: string): DisabledReasonButtonProps;
|
|
31
|
+
/** The hidden element holding the reason, for the button's description. Hidden content still describes. */
|
|
32
|
+
export declare function DisabledReasonText({ reason, id }: {
|
|
33
|
+
reason?: string;
|
|
34
|
+
id: string;
|
|
35
|
+
}): ReactNode;
|
|
36
|
+
//# sourceMappingURL=disabled-reason.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"disabled-reason.d.ts","sourceRoot":"","sources":["../../src/ui/disabled-reason.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,uGAAuG;AACvG,MAAM,WAAW,yBAAyB;IACxC,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,eAAe,CAAC,EAAE,IAAI,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,WAAW,EAAE,MAAM,GAAG,SAAS,EAC/B,EAAE,EAAE,MAAM,GACT,yBAAyB,CAa3B;AAED,2GAA2G;AAC3G,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAO7F"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* The props for a button with `reason`, given the id of the element holding it (useId: no hook here, so a server
|
|
4
|
+
* component can call this, as IconButton does). None without a reason.
|
|
5
|
+
*/
|
|
6
|
+
export function disabledReasonProps(reason, describedBy, id) {
|
|
7
|
+
if (!reason)
|
|
8
|
+
return {};
|
|
9
|
+
return {
|
|
10
|
+
isDisabled: false,
|
|
11
|
+
type: 'button',
|
|
12
|
+
'aria-disabled': true,
|
|
13
|
+
'aria-describedby': describedBy ? `${describedBy} ${id}` : id,
|
|
14
|
+
onPress: undefined,
|
|
15
|
+
onPressStart: undefined,
|
|
16
|
+
onPressEnd: undefined,
|
|
17
|
+
onPressUp: undefined,
|
|
18
|
+
onPressChange: undefined,
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
/** The hidden element holding the reason, for the button's description. Hidden content still describes. */
|
|
22
|
+
export function DisabledReasonText({ reason, id }) {
|
|
23
|
+
if (!reason)
|
|
24
|
+
return null;
|
|
25
|
+
return (_jsx("span", { id: id, hidden: true, children: reason }));
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=disabled-reason.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"disabled-reason.js","sourceRoot":"","sources":["../../src/ui/disabled-reason.tsx"],"names":[],"mappings":";AA4BA;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CACjC,MAA0B,EAC1B,WAA+B,EAC/B,EAAU;IAEV,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,CAAC;IACvB,OAAO;QACL,UAAU,EAAE,KAAK;QACjB,IAAI,EAAE,QAAQ;QACd,eAAe,EAAE,IAAI;QACrB,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;QAC7D,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,SAAS;QACrB,SAAS,EAAE,SAAS;QACpB,aAAa,EAAE,SAAS;KACzB,CAAC;AACJ,CAAC;AAED,2GAA2G;AAC3G,MAAM,UAAU,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAmC;IAChF,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IACzB,OAAO,CACL,eAAM,EAAE,EAAE,EAAE,EAAE,MAAM,kBACjB,MAAM,GACF,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/ui/icon-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/ui/icon-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAGtD,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAEzD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACnF,gGAAgG;IAChG,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,gGAAgG;IAChG,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;CACxD;AAED,6EAA6E;AAC7E,eAAO,MAAM,UAAU,+GAyDrB,CAAC"}
|
package/dist/ui/icon-button.js
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useId } from 'react';
|
|
3
3
|
import { Button } from './button.js';
|
|
4
|
+
import { DisabledReasonText, disabledReasonProps } from './disabled-reason.js';
|
|
4
5
|
import { renderIcon } from './icon.js';
|
|
5
6
|
import { Tooltip, TooltipTrigger } from './tooltip.js';
|
|
6
7
|
/** Icon-only button that always carries an accessible name and a tooltip. */
|
|
7
|
-
export const IconButton = forwardRef(function IconButton({ label, icon, visualSize = 'icon', variant = 'ghost', count, tooltip = true, tooltipPlacement = 'bottom', ...props }, ref) {
|
|
8
|
-
const
|
|
9
|
-
|
|
8
|
+
export const IconButton = forwardRef(function IconButton({ label, icon, visualSize = 'icon', variant = 'ghost', count, tooltip = true, tooltipPlacement = 'bottom', disabledReason, ...props }, ref) {
|
|
9
|
+
const reasonId = useId();
|
|
10
|
+
const button = (_jsxs(Button, { ref: ref, variant: variant, visualSize: visualSize, "aria-label": label, ...props, ...disabledReasonProps(disabledReason, props['aria-describedby'], reasonId), children: [renderIcon(icon), count ? (_jsx("span", { "aria-hidden": "true", className: "absolute top-0.5 right-0.5 min-w-[18px] rounded-full bg-destructive px-[5px] text-center text-[11px] leading-[18px] font-bold text-destructive-foreground ring-2 ring-background", children: count > 99 ? '99+' : count })) : null] }));
|
|
11
|
+
const tip = typeof tooltip === 'string' ? tooltip : label;
|
|
12
|
+
// With a reason, the tooltip shows even when `tooltip` is false: it's where a pointer finds out why.
|
|
13
|
+
if (!tooltip && !disabledReason)
|
|
10
14
|
return button;
|
|
11
|
-
return (_jsxs(TooltipTrigger, { delay: 500, children: [button, _jsx(Tooltip, { placement: tooltipPlacement, children:
|
|
15
|
+
return (_jsxs(_Fragment, { children: [_jsxs(TooltipTrigger, { delay: 500, children: [button, _jsx(Tooltip, { placement: tooltipPlacement, children: disabledReason ? (_jsxs("span", { className: "flex flex-col", children: [tooltip !== false && _jsx("span", { children: tip }), _jsx("span", { className: "font-normal", children: disabledReason })] })) : (tip) })] }), _jsx(DisabledReasonText, { reason: disabledReason, id: reasonId })] }));
|
|
12
16
|
});
|
|
13
17
|
//# sourceMappingURL=icon-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../src/ui/icon-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../src/ui/icon-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAiB,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAiBvD,6EAA6E;AAC7E,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAqC,SAAS,UAAU,CAC1F,EACE,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,MAAM,EACnB,OAAO,GAAG,OAAO,EACjB,KAAK,EACL,OAAO,GAAG,IAAI,EACd,gBAAgB,GAAG,QAAQ,EAC3B,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,CACb,MAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,gBACV,KAAK,KACb,KAAK,KACL,mBAAmB,CAAC,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,EAAE,QAAQ,CAAC,aAE3E,UAAU,CAAC,IAAI,CAAC,EAEhB,KAAK,CAAC,CAAC,CAAC,CACP,8BACc,MAAM,EAClB,SAAS,EAAC,kLAAkL,YAE3L,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GACtB,CACR,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAC;IACF,MAAM,GAAG,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;IAC1D,qGAAqG;IACrG,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc;QAAE,OAAO,MAAM,CAAC;IAC/C,OAAO,CACL,8BACE,MAAC,cAAc,IAAC,KAAK,EAAE,GAAG,aACvB,MAAM,EACP,KAAC,OAAO,IAAC,SAAS,EAAE,gBAAgB,YACjC,cAAc,CAAC,CAAC,CAAC,CAChB,gBAAM,SAAS,EAAC,eAAe,aAC5B,OAAO,KAAK,KAAK,IAAI,yBAAO,GAAG,GAAQ,EACxC,eAAM,SAAS,EAAC,aAAa,YAAE,cAAc,GAAQ,IAChD,CACR,CAAC,CAAC,CAAC,CACF,GAAG,CACJ,GACO,IACK,EACjB,KAAC,kBAAkB,IAAC,MAAM,EAAE,cAAc,EAAE,EAAE,EAAE,QAAQ,GAAI,IAC3D,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
package/dist/ui/menu.d.ts
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
1
|
+
import type { ReactNode, Ref } from 'react';
|
|
2
2
|
import { MenuTrigger, type MenuItemProps as RACMenuItemProps, type MenuProps as RACMenuProps, type PopoverProps as RACPopoverProps } from 'react-aria-components';
|
|
3
3
|
import { type IconProp } from './icon.js';
|
|
4
4
|
export interface PopoverProps extends Omit<RACPopoverProps, 'className'> {
|
|
5
5
|
className?: string;
|
|
6
6
|
}
|
|
7
|
-
/**
|
|
8
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Floating surface for menus and listboxes: popover ground, border and shadow-lg. It renders at the end of the
|
|
9
|
+
* page, outside its trigger's container, so it takes the trigger's `data-density` with it: a menu opened from a
|
|
10
|
+
* compact toolbar is compact too.
|
|
11
|
+
*/
|
|
12
|
+
export declare function Popover({ className, offset, ref, ...props }: PopoverProps & {
|
|
13
|
+
ref?: Ref<HTMLElement>;
|
|
14
|
+
}): import("react").JSX.Element;
|
|
9
15
|
export declare function Menu<T extends object>({ className, ...props }: Omit<RACMenuProps<T>, 'className'> & {
|
|
10
16
|
className?: string;
|
|
11
17
|
}): import("react").JSX.Element;
|
package/dist/ui/menu.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ui/menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ui/menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAKL,WAAW,EAKX,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,SAAS,IAAI,YAAY,EAC9B,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,MAAU,EACV,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;CAAE,+BAyB3C;AAED,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAW7D;AAOD,2FAA2F;AAC3F,eAAO,MAAM,SAAS,sKAC+I,CAAC;AACtK,+DAA+D;AAC/D,eAAO,MAAM,UAAU,kKAC0I,CAAC;AAElK,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,UAAU,CAAC;IACrF,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yGAAyG;AACzG,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAwB3F;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAC5C,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAgBA;AAED,wBAAgB,aAAa,gCAE5B;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
package/dist/ui/menu.js
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Header, Menu as RACMenu, MenuItem as RACMenuItem, MenuSection as RACMenuSection, MenuTrigger, Popover as RACPopover, Separator, } from 'react-aria-components';
|
|
3
|
+
import { Header, Menu as RACMenu, MenuItem as RACMenuItem, MenuSection as RACMenuSection, MenuTrigger, Popover as RACPopover, PopoverContext, Separator, useSlottedContext, } from 'react-aria-components';
|
|
4
4
|
import { Check } from 'lucide-react';
|
|
5
5
|
import { cn } from '../lib/cn.js';
|
|
6
6
|
import { renderIcon } from './icon.js';
|
|
7
|
-
/**
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Floating surface for menus and listboxes: popover ground, border and shadow-lg. It renders at the end of the
|
|
9
|
+
* page, outside its trigger's container, so it takes the trigger's `data-density` with it: a menu opened from a
|
|
10
|
+
* compact toolbar is compact too.
|
|
11
|
+
*/
|
|
12
|
+
export function Popover({ className, offset = 6, ref, ...props }) {
|
|
13
|
+
const context = useSlottedContext(PopoverContext);
|
|
14
|
+
const triggerRef = props.triggerRef ?? context?.triggerRef;
|
|
15
|
+
// Read when the surface mounts: the trigger is in the page by then.
|
|
16
|
+
const surface = (el) => {
|
|
17
|
+
if (el) {
|
|
18
|
+
const density = triggerRef?.current?.closest('[data-density]')?.getAttribute('data-density');
|
|
19
|
+
if (density)
|
|
20
|
+
el.setAttribute('data-density', density);
|
|
21
|
+
else
|
|
22
|
+
el.removeAttribute('data-density');
|
|
23
|
+
}
|
|
24
|
+
if (typeof ref === 'function')
|
|
25
|
+
return ref(el);
|
|
26
|
+
};
|
|
27
|
+
return (_jsx(RACPopover, { offset: offset, ref: typeof ref === 'function' || !ref ? surface : ref, ...props, className: cn(
|
|
10
28
|
// React Aria positions the popover inline (style="position: absolute"), which the lint rule can't see.
|
|
11
29
|
// oxlint-disable-next-line setsquare-ui/positioned-scroll-container
|
|
12
30
|
'z-(--z-popover) min-w-(--trigger-width) overflow-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-(--shadow-lg) outline-none', className) }));
|
package/dist/ui/menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/ui/menu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,MAAM,EACN,IAAI,IAAI,OAAO,EACf,QAAQ,IAAI,WAAW,EACvB,WAAW,IAAI,cAAc,EAC7B,WAAW,EACX,OAAO,IAAI,UAAU,EACrB,SAAS,
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/ui/menu.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@setsquare/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "React Aria components, design tokens, a dashboard shell and a site shell, with a switch between WCAG 2.2 AA and AAA sizing, spacing and contrast.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/Worktree-Amigos/setsquare-ui#readme",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"dependencies": {
|
|
74
74
|
"clsx": "2.1.1",
|
|
75
75
|
"intl-messageformat": "12.1.3",
|
|
76
|
-
"lucide-react": "1.48.0",
|
|
76
|
+
"lucide-react": "^1.48.0",
|
|
77
77
|
"tailwind-merge": "3.7.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|