@x1a0f3n9/dsh-client-ui-primitives 0.1.5-rc.3
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/LICENSE +21 -0
- package/README.i18n.yaml +6 -0
- package/README.md +164 -0
- package/README.zh.md +164 -0
- package/lib/Button.module.css +79 -0
- package/lib/ConnectionIndicator.module.css +107 -0
- package/lib/DiffBlock.module.css +101 -0
- package/lib/DisclosureRow.module.css +84 -0
- package/lib/FileTypeIcon.module.css +50 -0
- package/lib/HoverCard.module.css +54 -0
- package/lib/Input.module.css +38 -0
- package/lib/JsonTree.module.css +222 -0
- package/lib/Menu.module.css +248 -0
- package/lib/Modal.module.css +103 -0
- package/lib/OnboardingSurface.module.css +29 -0
- package/lib/Pill.module.css +27 -0
- package/lib/ReadBlock.module.css +111 -0
- package/lib/RiskConfirmation.module.css +73 -0
- package/lib/SearchBlock.module.css +112 -0
- package/lib/StateDot.module.css +73 -0
- package/lib/Switch.module.css +50 -0
- package/lib/Tag.module.css +57 -0
- package/lib/TerminalBlock.module.css +205 -0
- package/lib/Toast.module.css +72 -0
- package/lib/Tooltip.module.css +42 -0
- package/lib/WebBlock.module.css +141 -0
- package/lib/index.js +8030 -0
- package/lib/markdown/CodeBlock.module.css +130 -0
- package/lib/markdown/JsonBlock.module.css +32 -0
- package/lib/markdown/MarkdownText.module.css +321 -0
- package/lib/types/BrandWordmark.d.ts +15 -0
- package/lib/types/Button.d.ts +18 -0
- package/lib/types/CodeFileIcon.d.ts +12 -0
- package/lib/types/ConnectionIndicator.d.ts +25 -0
- package/lib/types/DiffBlock.d.ts +53 -0
- package/lib/types/DisclosureRow.d.ts +29 -0
- package/lib/types/FileTypeIcon.d.ts +43 -0
- package/lib/types/FishLogo.d.ts +16 -0
- package/lib/types/FoldToggle.d.ts +20 -0
- package/lib/types/HoverCard.d.ts +24 -0
- package/lib/types/Input.d.ts +11 -0
- package/lib/types/JsonTree.d.ts +48 -0
- package/lib/types/LinkIcon.d.ts +38 -0
- package/lib/types/Menu.d.ts +85 -0
- package/lib/types/Modal.d.ts +35 -0
- package/lib/types/OnboardingSurface.d.ts +11 -0
- package/lib/types/Pill.d.ts +13 -0
- package/lib/types/ReadBlock.d.ts +47 -0
- package/lib/types/ReferenceIcon.d.ts +16 -0
- package/lib/types/RiskConfirmation.d.ts +20 -0
- package/lib/types/SearchBlock.d.ts +72 -0
- package/lib/types/StateDot.d.ts +18 -0
- package/lib/types/Switch.d.ts +20 -0
- package/lib/types/Tag.d.ts +32 -0
- package/lib/types/TerminalBlock.d.ts +61 -0
- package/lib/types/Toast.d.ts +32 -0
- package/lib/types/Tooltip.d.ts +34 -0
- package/lib/types/WebBlock.d.ts +61 -0
- package/lib/types/ansi.d.ts +17 -0
- package/lib/types/clipboard.d.ts +9 -0
- package/lib/types/code-file-icon-artwork.d.ts +54 -0
- package/lib/types/code-file-types.d.ts +30 -0
- package/lib/types/file-size.d.ts +8 -0
- package/lib/types/head-tail-cap.d.ts +23 -0
- package/lib/types/icons/index.d.ts +194 -0
- package/lib/types/icons/props.d.ts +9 -0
- package/lib/types/index.d.ts +66 -0
- package/lib/types/markdown/CodeBlock.d.ts +28 -0
- package/lib/types/markdown/JsonBlock.d.ts +8 -0
- package/lib/types/markdown/MarkdownText.d.ts +42 -0
- package/lib/types/markdown/cjkFriendlyStrong.d.ts +9 -0
- package/lib/types/markdown/highlight.d.ts +142 -0
- package/lib/types/markdown/incremental.d.ts +80 -0
- package/lib/types/markdown/katex.d.ts +27 -0
- package/lib/types/markdown/mathCompatibility.d.ts +11 -0
- package/lib/types/markdown/parse.d.ts +25 -0
- package/lib/types/markdown/plain-text.d.ts +22 -0
- package/lib/types/markdown/render.d.ts +138 -0
- package/lib/types/markdown/useViewportHighlighting.d.ts +11 -0
- package/lib/types/pointer-grace.d.ts +22 -0
- package/lib/types/rank-by-name.d.ts +22 -0
- package/lib/types/relative-time.d.ts +23 -0
- package/lib/types/use-copy-feedback.d.ts +14 -0
- package/lib/types/useAnchoredMaxHeight.d.ts +11 -0
- package/lib/types/useAnchoredPosition.d.ts +34 -0
- package/lib/types/useDismissOnOutsidePointer.d.ts +11 -0
- package/lib/types/user-text.d.ts +39 -0
- package/lib/user-text.module.css +43 -0
- package/package.json +58 -0
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { IconProps } from './icons/props.ts';
|
|
2
|
+
/** Native viewBox of {@link FISH_LOGO_PATH} (width and height in user units). */
|
|
3
|
+
export declare const FISH_LOGO_VIEWBOX: {
|
|
4
|
+
width: number;
|
|
5
|
+
height: number;
|
|
6
|
+
};
|
|
7
|
+
/** The fish silhouette path data, exported for consumers that compose their own svg (entrance effects, masks) around the same geometry. */
|
|
8
|
+
export declare const FISH_LOGO_PATH = "M22.9168 1.43018C22.6713 1.31018 22.5658 1.53918 22.4223 1.65519C22.3733 1.69269 22.3318 1.74169 22.2903 1.78669C21.9317 2.1697 21.5127 2.42121 20.9657 2.39121C20.1657 2.34621 19.4827 2.59771 18.8787 3.20973C18.7502 2.45521 18.3236 2.0047 17.6746 1.71569C17.3351 1.56568 16.9916 1.41518 16.7536 1.08867C16.5876 0.856163 16.5421 0.597155 16.4591 0.341647C16.4061 0.187643 16.3536 0.0301382 16.1761 0.00363739C15.9836 -0.0263635 15.9081 0.135141 15.8326 0.270145C15.5306 0.822162 15.4136 1.43018 15.4251 2.0462C15.4516 3.43174 16.0366 4.53527 17.1991 5.3203C17.3311 5.4103 17.3651 5.5003 17.3236 5.63181C17.2441 5.90231 17.1501 6.16482 17.0671 6.43533C17.0141 6.60784 16.9351 6.64584 16.7501 6.57033C16.1121 6.30383 15.5611 5.90931 15.074 5.4328C14.2475 4.63328 13.5 3.75075 12.568 3.05973C12.349 2.89822 12.13 2.74822 11.9034 2.60522C10.9524 1.68169 12.028 0.923165 12.277 0.833162C12.5375 0.739159 12.3675 0.41615 11.5259 0.42015C10.6844 0.42365 9.91439 0.705658 8.93286 1.08117C8.78935 1.13767 8.63835 1.17867 8.48384 1.21267C7.59332 1.04367 6.66829 1.00617 5.70226 1.11517C3.88321 1.31768 2.43016 2.1777 1.36213 3.64575C0.0790928 5.4103 -0.222916 7.41536 0.146595 9.50642C0.535106 11.7105 1.66014 13.535 3.38869 14.9616C5.18125 16.4406 7.24581 17.1657 9.60138 17.0266C11.0319 16.9441 12.6245 16.7526 14.421 15.2321C14.874 15.4576 15.3496 15.5476 16.1381 15.6151C16.7456 15.6716 17.3306 15.5851 17.7836 15.4911C18.4931 15.3411 18.4441 14.6841 18.1876 14.5636C16.1081 13.595 16.5646 13.9891 16.1496 13.67C17.2061 12.42 18.8202 10.1979 19.3182 7.17235C19.3672 6.83834 19.4297 6.36783 19.4222 6.09732C19.4182 5.93231 19.4562 5.86831 19.6447 5.84931C20.1657 5.78931 20.6712 5.64681 21.1357 5.3913C22.4833 4.65528 23.0268 3.44624 23.1548 1.9972C23.1738 1.77569 23.1508 1.54668 22.9168 1.43018ZM11.1749 14.4736C9.15936 12.889 8.18184 12.3675 7.77832 12.39C7.40081 12.4125 7.46881 12.8445 7.55182 13.126C7.63882 13.404 7.75182 13.5955 7.91033 13.8396C8.01983 14.0011 8.09533 14.2411 7.80083 14.4216C7.15181 14.8231 6.02327 14.2866 5.97027 14.2601C4.65673 13.4865 3.5587 12.4655 2.78467 11.069C2.03715 9.72493 1.60314 8.28289 1.53164 6.74384C1.51264 6.37233 1.62214 6.24082 1.99215 6.17332C2.47916 6.08332 2.98118 6.06432 3.46769 6.13582C5.52476 6.43633 7.27581 7.35586 8.74385 8.8129C9.58188 9.64243 10.2159 10.634 10.8689 11.6025C11.5634 12.631 12.3105 13.611 13.262 14.4146C13.598 14.6961 13.866 14.9101 14.1225 15.0681C13.349 15.1546 12.058 15.1731 11.1749 14.4746L11.1749 14.4736ZM12.141 8.25988C12.141 8.09488 12.273 7.96338 12.439 7.96338C12.4765 7.96338 12.5105 7.97088 12.541 7.98188C12.5825 7.99688 12.6205 8.01938 12.6505 8.05338C12.7035 8.10588 12.7335 8.18088 12.7335 8.25988C12.7335 8.42489 12.6015 8.55639 12.4355 8.55639C12.2695 8.55639 12.141 8.42489 12.141 8.25988ZM15.1415 9.79893C14.949 9.87793 14.7565 9.94544 14.5715 9.95294C14.2845 9.96794 13.9715 9.85143 13.8015 9.70893C13.5375 9.48742 13.3485 9.36342 13.2695 8.97691C13.2355 8.8119 13.2545 8.55639 13.2845 8.40989C13.3525 8.09438 13.277 7.89187 13.0545 7.70787C12.8735 7.55786 12.643 7.51636 12.39 7.51636C12.2955 7.51636 12.209 7.47486 12.1445 7.44136C12.039 7.38886 11.9519 7.25735 12.035 7.09585C12.0615 7.04335 12.19 6.91584 12.22 6.89334C12.5635 6.69784 12.9595 6.76184 13.326 6.90834C13.6655 7.04735 13.9225 7.30236 14.292 7.66287C14.6695 8.09838 14.7375 8.21838 14.9525 8.54539C15.1225 8.8009 15.277 9.06341 15.3831 9.36392C15.4471 9.55142 15.3641 9.70493 15.1415 9.79893Z";
|
|
9
|
+
/**
|
|
10
|
+
* Render the fish logo.
|
|
11
|
+
* @param props.size - width in px (default 24; height keeps the 23.16:17.04 ratio).
|
|
12
|
+
* @param props.className - extra class for layout placement.
|
|
13
|
+
* @returns the logo svg (aria-hidden; pair with the wordmark for accessibility).
|
|
14
|
+
*/
|
|
15
|
+
export declare function FishLogo({ size, className }: IconProps): import("react").JSX.Element;
|
|
16
|
+
//# sourceMappingURL=FishLogo.d.ts.map
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
interface FoldToggleProps {
|
|
2
|
+
className: string | undefined;
|
|
3
|
+
expanded: boolean;
|
|
4
|
+
hidden: number;
|
|
5
|
+
labels: {
|
|
6
|
+
collapseAria: string;
|
|
7
|
+
expandAria: (hidden: number) => string;
|
|
8
|
+
collapse: string;
|
|
9
|
+
expand: (hidden: number) => string;
|
|
10
|
+
};
|
|
11
|
+
onToggle: () => void;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Render the shared head-tail fold control with caller-owned localized copy.
|
|
15
|
+
* @param props - Fold state, localized labels, and toggle callback.
|
|
16
|
+
* @returns The accessible expand or collapse button.
|
|
17
|
+
*/
|
|
18
|
+
export declare function FoldToggle({ className, expanded, hidden, labels, onToggle, }: FoldToggleProps): import("react").JSX.Element;
|
|
19
|
+
export {};
|
|
20
|
+
//# sourceMappingURL=FoldToggle.d.ts.map
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Render an anchor with a hover-triggered preview card.
|
|
4
|
+
* @param props.anchor - the hover target (rendered in place inside a wrapper span).
|
|
5
|
+
* @param props.content - card content; the pointer may rest on it, so it is
|
|
6
|
+
* readable and selectable, but it carries no dismissal affordance of its own.
|
|
7
|
+
* @param props.openDelayMs - hover dwell before the card shows (default 500).
|
|
8
|
+
* @param props.disabled - suppress opening; turning true closes an open card.
|
|
9
|
+
* @param props.copyText - optional primary value copied by activation and
|
|
10
|
+
* included in the card's accessible name.
|
|
11
|
+
* @param props.copyLabel - localized accessible activation-label prefix.
|
|
12
|
+
* @param props.copiedLabel - localized visible success label.
|
|
13
|
+
* @returns anchor wrapper with the conditional portaled card.
|
|
14
|
+
*/
|
|
15
|
+
export declare function HoverCard({ anchor, content, openDelayMs, disabled, copyText, copyLabel, copiedLabel, }: {
|
|
16
|
+
anchor: ReactNode;
|
|
17
|
+
content: ReactNode;
|
|
18
|
+
openDelayMs?: number;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
copyText?: string | undefined;
|
|
21
|
+
copyLabel: string;
|
|
22
|
+
copiedLabel: string;
|
|
23
|
+
}): import("react").JSX.Element;
|
|
24
|
+
//# sourceMappingURL=HoverCard.d.ts.map
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Render a text input with an optional leading icon.
|
|
4
|
+
* @param props.icon - optional 16px leading icon node.
|
|
5
|
+
* @returns wrapper span containing the native input; input attributes pass through.
|
|
6
|
+
*/
|
|
7
|
+
export declare function Input({ icon, className, ...rest }: {
|
|
8
|
+
icon?: ReactNode;
|
|
9
|
+
className?: string;
|
|
10
|
+
} & InputHTMLAttributes<HTMLInputElement>): import("react").JSX.Element;
|
|
11
|
+
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Display copy for the tree's copy affordance; the owner passes localized
|
|
3
|
+
* labels (this package is cordis-free, so copy arrives via props).
|
|
4
|
+
*/
|
|
5
|
+
export interface JsonTreeLabels {
|
|
6
|
+
/** Menu item: copy the raw primitive value. */
|
|
7
|
+
copyValue: string;
|
|
8
|
+
/** Menu item: copy the value as compact JSON (primitive rows). */
|
|
9
|
+
copyJson: string;
|
|
10
|
+
/** Menu item: copy the property path. */
|
|
11
|
+
copyPath: string;
|
|
12
|
+
/** Menu item: copy the value as pretty-printed JSON. */
|
|
13
|
+
copyPrettyJson: string;
|
|
14
|
+
/** Menu item: copy the value as compact JSON (object rows). */
|
|
15
|
+
copyCompactJson: string;
|
|
16
|
+
/** Copy-button state label after a successful copy. */
|
|
17
|
+
copied: string;
|
|
18
|
+
/** Copy-button state label after a failed copy. */
|
|
19
|
+
copyFailed: string;
|
|
20
|
+
/** Expander aria label while expanded. */
|
|
21
|
+
collapseNode: string;
|
|
22
|
+
/** Expander aria label while collapsed. */
|
|
23
|
+
expandNode: string;
|
|
24
|
+
/** Copy-button tooltip, given the current action label. */
|
|
25
|
+
copyButtonTitle: (action: string) => string;
|
|
26
|
+
}
|
|
27
|
+
/** Props for the read-only, token-themed JSON tree. */
|
|
28
|
+
export interface JsonTreeProps {
|
|
29
|
+
/** Parsed JSON object or array. */
|
|
30
|
+
data: object | unknown[];
|
|
31
|
+
/** Accessible label for the tree. */
|
|
32
|
+
label: string;
|
|
33
|
+
/** Optional positioning class owned by the caller. */
|
|
34
|
+
className?: string | undefined;
|
|
35
|
+
/** Whether JSON rows expose copy actions. */
|
|
36
|
+
copyable?: boolean;
|
|
37
|
+
/** Whether the top-level object or array is always expanded. */
|
|
38
|
+
expandTopLevel?: boolean;
|
|
39
|
+
/** Localized display copy supplied by the owning render site. */
|
|
40
|
+
labels: JsonTreeLabels;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Render parsed JSON as a compact, keyboard-accessible inspector tree.
|
|
44
|
+
* @param props - Parsed data, accessible label, and display options.
|
|
45
|
+
* @returns A read-only JSON tree with an optionally fixed-open top level.
|
|
46
|
+
*/
|
|
47
|
+
export declare function JsonTree({ data, label, className, copyable, expandTopLevel, labels, }: JsonTreeProps): import("react").JSX.Element;
|
|
48
|
+
//# sourceMappingURL=JsonTree.d.ts.map
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Leading category glyph for clickable artifact links (anchors, file
|
|
3
|
+
* mentions, produced-file chips). One component keyed by link category;
|
|
4
|
+
* every glyph renders fill="currentColor" and so rides the link's own
|
|
5
|
+
* color. Glyphs stay private to this module: the public surface is the
|
|
6
|
+
* category vocabulary, not the individual glyph components, so consumers
|
|
7
|
+
* cannot compose a glyph outside a link. Design sources:
|
|
8
|
+
* ic_globe_language_outline_20, ic_code_outline_20, ic_folder_outline_20,
|
|
9
|
+
* ic_photo_outline_20, ic_paper_doc_outline_20, ic_paper_outline_20.
|
|
10
|
+
*/
|
|
11
|
+
import type { ReactNode } from 'react';
|
|
12
|
+
import type { IconProps } from './icons/props.ts';
|
|
13
|
+
/**
|
|
14
|
+
* Link categories with distinct leading glyphs. `url` and `folder` are
|
|
15
|
+
* destination categories the consumer states directly; the rest are file
|
|
16
|
+
* categories `classifyLinkPath` derives from a path. Code, web, and data
|
|
17
|
+
* files share the `code` glyph by design.
|
|
18
|
+
*/
|
|
19
|
+
export type LinkIconKind = 'url' | 'folder' | 'code' | 'image' | 'document' | 'other';
|
|
20
|
+
/** Props for {@link LinkIcon}: the category plus the shared icon sizing seat. */
|
|
21
|
+
export interface LinkIconProps extends IconProps {
|
|
22
|
+
kind: LinkIconKind;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Derive a file path's link-icon category from its extension. Unknown and
|
|
26
|
+
* missing extensions fall to `other` (the plain-paper glyph).
|
|
27
|
+
* @param path - File path as the producing tool spelled it (either separator).
|
|
28
|
+
* @returns The file's glyph category; never `url` or `folder`.
|
|
29
|
+
*/
|
|
30
|
+
export declare function classifyLinkPath(path: string): LinkIconKind;
|
|
31
|
+
/**
|
|
32
|
+
* Render the leading glyph for one clickable artifact link.
|
|
33
|
+
* @param props - The link category, optional size (default 14px — the inline
|
|
34
|
+
* link text size these glyphs sit beside), and optional CSS class.
|
|
35
|
+
* @returns The category's SVG glyph, riding currentColor.
|
|
36
|
+
*/
|
|
37
|
+
export declare function LinkIcon({ kind, size, className }: LinkIconProps): ReactNode;
|
|
38
|
+
//# sourceMappingURL=LinkIcon.d.ts.map
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/** Selectable row (optionally with a nested submenu). */
|
|
3
|
+
export interface MenuItem {
|
|
4
|
+
id: string;
|
|
5
|
+
label: ReactNode;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
/** Leading icon (figma .Menu_cell gap 8). */
|
|
8
|
+
icon?: ReactNode;
|
|
9
|
+
/** Destructive row: error-colored text/icon and danger hover fill. */
|
|
10
|
+
danger?: boolean;
|
|
11
|
+
/** Nested card opened to the right on hover/focus. */
|
|
12
|
+
submenu?: readonly MenuItem[];
|
|
13
|
+
}
|
|
14
|
+
/** Hairline between item groups (not selectable). */
|
|
15
|
+
export interface MenuSeparator {
|
|
16
|
+
type: 'separator';
|
|
17
|
+
id: string;
|
|
18
|
+
}
|
|
19
|
+
/** Non-interactive heading row above a group of items. */
|
|
20
|
+
export interface MenuLabel {
|
|
21
|
+
type: 'label';
|
|
22
|
+
id: string;
|
|
23
|
+
text: string;
|
|
24
|
+
}
|
|
25
|
+
/** One primary-menu entry: a row, a separator, or a heading label. */
|
|
26
|
+
export type MenuEntry = MenuItem | MenuSeparator | MenuLabel;
|
|
27
|
+
/**
|
|
28
|
+
* Render an anchored dropdown menu.
|
|
29
|
+
* @param props.autoFocus - focus the first item on open and enable arrow-key navigation; Escape focuses the anchor's first button.
|
|
30
|
+
* @param props.open - whether the list is showing (owner-controlled).
|
|
31
|
+
* @param props.anchor - the trigger element (rendered in place).
|
|
32
|
+
* @param props.items - selectable rows and optional separators.
|
|
33
|
+
* @param props.selectedId - row shown as selected.
|
|
34
|
+
* @param props.selectedIds - rows shown as selected when a menu contains independent option groups.
|
|
35
|
+
* @param props.onSelect - row click callback (not called for disabled rows or submenu parents that only open children).
|
|
36
|
+
* @param props.onClose - invoked on outside click, Escape, or a window blur
|
|
37
|
+
* that moved focus into an iframe (the only signal a pointerdown inside a
|
|
38
|
+
* cross-origin iframe leaves).
|
|
39
|
+
* @param props.align - list alignment against the anchor (default 'start').
|
|
40
|
+
* @param props.side - open below (`bottom`, default) or above (`top`) the anchor.
|
|
41
|
+
* @param props.portal - render the list into document.body, fixed-positioned
|
|
42
|
+
* from the anchor rect (repositions on scroll/resize while open). Use when an
|
|
43
|
+
* ancestor's overflow clipping would crop the in-place list; default false
|
|
44
|
+
* keeps the pure-CSS in-place behavior.
|
|
45
|
+
* @param props.closeOnPointerLeave - close the list once the pointer has left
|
|
46
|
+
* both trigger and list for the pointer grace (default false keeps it open
|
|
47
|
+
* until outside click/Escape/selection). The grace makes the 4px trigger->list
|
|
48
|
+
* gap and a brief overshoot survivable; coming back cancels the close.
|
|
49
|
+
* @param props.dense - reduce vertical row spacing without changing the standard typography or card width.
|
|
50
|
+
* @param props.compact - use reduced menu typography and spacing.
|
|
51
|
+
* @param props.getAnchorRect - portal mode only: supply the anchor rect
|
|
52
|
+
* directly (e.g. from a host-owned trigger button) instead of measuring the
|
|
53
|
+
* Menu's own wrapper span. Required when the wrapper isn't itself laid out at
|
|
54
|
+
* the trigger (render-prop anchors, effect-positioned proxies — measuring the
|
|
55
|
+
* wrapper there races the host's layout effects). Called on open and on every
|
|
56
|
+
* scroll/resize; return null to skip placement for that frame.
|
|
57
|
+
* @param props.footer - rows pinned below the scrolling items area, separated
|
|
58
|
+
* by a hairline; they stay visible while the items above scroll.
|
|
59
|
+
* @param props.selection - how a selected row is marked: a trailing check
|
|
60
|
+
* (`'check'`, default — figma .Menu_cell) or the hover fill held on the row
|
|
61
|
+
* with no check (`'fill'`, for icon-labelled rows where a trailing glyph
|
|
62
|
+
* crowds the cell).
|
|
63
|
+
* @returns anchor wrapper with the conditional list.
|
|
64
|
+
*/
|
|
65
|
+
export declare function Menu({ open, anchor, items, selectedId, selectedIds, onSelect, onClose, align, side, portal, closeOnPointerLeave, dense, compact, autoFocus, selection, getAnchorRect, footer, className }: {
|
|
66
|
+
open: boolean;
|
|
67
|
+
autoFocus?: boolean;
|
|
68
|
+
anchor: ReactNode;
|
|
69
|
+
items: readonly MenuEntry[];
|
|
70
|
+
footer?: readonly MenuEntry[];
|
|
71
|
+
selectedId?: string | undefined;
|
|
72
|
+
selectedIds?: readonly string[] | undefined;
|
|
73
|
+
onSelect: (id: string) => void;
|
|
74
|
+
onClose: () => void;
|
|
75
|
+
align?: 'start' | 'end';
|
|
76
|
+
side?: 'bottom' | 'top' | 'right';
|
|
77
|
+
portal?: boolean;
|
|
78
|
+
closeOnPointerLeave?: boolean;
|
|
79
|
+
dense?: boolean;
|
|
80
|
+
compact?: boolean;
|
|
81
|
+
selection?: 'check' | 'fill';
|
|
82
|
+
getAnchorRect?: () => DOMRect | null;
|
|
83
|
+
className?: string | undefined;
|
|
84
|
+
}): import("react").JSX.Element;
|
|
85
|
+
//# sourceMappingURL=Menu.d.ts.map
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
interface ModalBaseProps {
|
|
3
|
+
open: boolean;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
title: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
footer?: ReactNode;
|
|
9
|
+
className?: string;
|
|
10
|
+
contentClassName?: string;
|
|
11
|
+
}
|
|
12
|
+
type ModalProps = ModalBaseProps & ({
|
|
13
|
+
headless: true;
|
|
14
|
+
closeLabel?: never;
|
|
15
|
+
} | {
|
|
16
|
+
headless?: false;
|
|
17
|
+
closeLabel: string;
|
|
18
|
+
});
|
|
19
|
+
/**
|
|
20
|
+
* Render a centered, body-portaled modal over a blurred page mask.
|
|
21
|
+
* @param props.open - whether the dialog is showing.
|
|
22
|
+
* @param props.onClose - Escape or mask click.
|
|
23
|
+
* @param props.title - dialog heading (aria-label in every mode).
|
|
24
|
+
* @param props.closeLabel - localized accessible close-button label.
|
|
25
|
+
* @param props.description - optional supporting sentence under the title.
|
|
26
|
+
* @param props.children - body (inputs, etc.).
|
|
27
|
+
* @param props.footer - action row (Cancel / Create).
|
|
28
|
+
* @param props.contentClassName - optional class for a scrollable content region.
|
|
29
|
+
* @param props.headless - render children directly in the card (no default
|
|
30
|
+
* header/close/body chrome); mask, card, Escape, and aria-label remain.
|
|
31
|
+
* @returns null when closed; otherwise the overlay tree.
|
|
32
|
+
*/
|
|
33
|
+
export declare function Modal({ open, onClose, title, closeLabel, description, children, footer, className, contentClassName, headless, }: ModalProps): import("react").ReactPortal | null;
|
|
34
|
+
export {};
|
|
35
|
+
//# sourceMappingURL=Modal.d.ts.map
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Render a body-portaled onboarding stage and keep the application root inert
|
|
4
|
+
* while mounted.
|
|
5
|
+
* @param props.children - the step's page content, centered on the stage.
|
|
6
|
+
* @returns the body-portaled overlay tree.
|
|
7
|
+
*/
|
|
8
|
+
export declare function OnboardingSurface({ children }: {
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
}): import("react").ReactPortal;
|
|
11
|
+
//# sourceMappingURL=OnboardingSurface.d.ts.map
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Render a pill chip. Interactive when onClick is supplied (renders a button);
|
|
4
|
+
* otherwise a static span.
|
|
5
|
+
* @param props.active - selected/active visual state.
|
|
6
|
+
* @returns pill element.
|
|
7
|
+
*/
|
|
8
|
+
export declare function Pill({ active, className, children, onClick, ...rest }: {
|
|
9
|
+
active?: boolean;
|
|
10
|
+
className?: string | undefined;
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
} & ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
|
|
13
|
+
//# sourceMappingURL=Pill.d.ts.map
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Content lines shown before the height cap collapses the middle. Matches
|
|
3
|
+
* TerminalBlock's default so a long read and a long command output cut at the
|
|
4
|
+
* same place in the same flow.
|
|
5
|
+
*/
|
|
6
|
+
export declare const DEFAULT_READ_MAX_LINES = 16;
|
|
7
|
+
/** One line of the read window: its file line number and its text (no trailing newline). */
|
|
8
|
+
export interface ReadBlockLine {
|
|
9
|
+
/** 1-based line number in the file (a window past an offset keeps the file's own numbering). */
|
|
10
|
+
number: number;
|
|
11
|
+
/** The line's text, already truncated to the read tool's per-line cap. */
|
|
12
|
+
text: string;
|
|
13
|
+
}
|
|
14
|
+
export interface ReadBlockProps {
|
|
15
|
+
/** Banner label (the file path, or a tool-supplied replacement title); omitted draws no label. */
|
|
16
|
+
label?: string | undefined;
|
|
17
|
+
/** The returned window's lines, in file order, each keeping its file line number. */
|
|
18
|
+
lines: readonly ReadBlockLine[];
|
|
19
|
+
/** Localized chrome supplied by the owning render site. */
|
|
20
|
+
labels: ReadBlockLabels;
|
|
21
|
+
/** Exact total line count in the file, for the "showing N of M" note when the read is a window. */
|
|
22
|
+
totalLines: number;
|
|
23
|
+
/** Grammar hint (a file-extension-derived language id); unknown or absent = plain monospace. */
|
|
24
|
+
lang?: string | undefined;
|
|
25
|
+
/** Height cap in content lines before the middle collapses (default {@link DEFAULT_READ_MAX_LINES}). */
|
|
26
|
+
maxLines?: number | undefined;
|
|
27
|
+
/** Extra class merged onto the wrapper (callers position; this component draws). */
|
|
28
|
+
className?: string | undefined;
|
|
29
|
+
}
|
|
30
|
+
/** Localized chrome for {@link ReadBlock}. */
|
|
31
|
+
export interface ReadBlockLabels {
|
|
32
|
+
window: (shown: number, total: number) => string;
|
|
33
|
+
copy: string;
|
|
34
|
+
copied: string;
|
|
35
|
+
collapseAria: string;
|
|
36
|
+
expandAria: (hidden: number) => string;
|
|
37
|
+
collapse: string;
|
|
38
|
+
expand: (hidden: number) => string;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Render a read tool result as a line-numbered, optionally syntax-highlighted
|
|
42
|
+
* file view.
|
|
43
|
+
* @param props - see {@link ReadBlockProps}.
|
|
44
|
+
* @returns the read block element.
|
|
45
|
+
*/
|
|
46
|
+
export declare function ReadBlock({ label, labels, lines, totalLines, lang, maxLines, className, }: ReadBlockProps): import("react").JSX.Element;
|
|
47
|
+
//# sourceMappingURL=ReadBlock.d.ts.map
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/** Reference domains with distinct composer and transcript glyphs. */
|
|
3
|
+
export type ReferenceIconKind = 'session' | 'file' | 'folder';
|
|
4
|
+
/** Props shared by inline reference glyphs. */
|
|
5
|
+
export interface ReferenceIconProps {
|
|
6
|
+
kind: ReferenceIconKind;
|
|
7
|
+
size?: number;
|
|
8
|
+
className?: string | undefined;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Render the icon that identifies one inline reference domain.
|
|
12
|
+
* @param props - Reference kind, optional size, and optional CSS class.
|
|
13
|
+
* @returns The corresponding current-color SVG glyph.
|
|
14
|
+
*/
|
|
15
|
+
export declare function ReferenceIcon({ kind, size, className }: ReferenceIconProps): ReactNode;
|
|
16
|
+
//# sourceMappingURL=ReferenceIcon.d.ts.map
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export interface RiskConfirmationProps {
|
|
2
|
+
open: boolean;
|
|
3
|
+
title: string;
|
|
4
|
+
description: string;
|
|
5
|
+
acknowledgeLabel: string;
|
|
6
|
+
cancelLabel: string;
|
|
7
|
+
closeLabel: string;
|
|
8
|
+
confirmLabel: string;
|
|
9
|
+
acknowledged: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
onAcknowledgedChange: (acknowledged: boolean) => void;
|
|
12
|
+
onCancel: () => void;
|
|
13
|
+
onConfirm: () => void;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Render one in-page confirmation whose primary action is unavailable until
|
|
17
|
+
* the caller-controlled acknowledgement is checked.
|
|
18
|
+
*/
|
|
19
|
+
export declare function RiskConfirmation({ open, title, description, acknowledgeLabel, cancelLabel, closeLabel, confirmLabel, acknowledged, disabled, onAcknowledgedChange, onCancel, onConfirm, }: RiskConfirmationProps): import("react").JSX.Element;
|
|
20
|
+
//# sourceMappingURL=RiskConfirmation.d.ts.map
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Result rows shown before the height cap collapses the middle. Matches
|
|
3
|
+
* {@link DEFAULT_TERMINAL_MAX_LINES} so a search card and a terminal card cut a
|
|
4
|
+
* long result at the same place.
|
|
5
|
+
*/
|
|
6
|
+
export declare const DEFAULT_SEARCH_MAX_LINES = 16;
|
|
7
|
+
/** One matched line inside a {@link SearchFileGroup}: its 1-based line number and text. */
|
|
8
|
+
export interface SearchBlockLineMatch {
|
|
9
|
+
/** 1-based line number of the match within its file. */
|
|
10
|
+
lineNumber: number;
|
|
11
|
+
/** The matched line text, as the tool surfaced it. */
|
|
12
|
+
line: string;
|
|
13
|
+
}
|
|
14
|
+
/** One file's grouped matches, in first-seen file order. */
|
|
15
|
+
export interface SearchFileGroup {
|
|
16
|
+
/** The file the matches belong to (the display path). */
|
|
17
|
+
path: string;
|
|
18
|
+
/** The file's matched lines, in output order. */
|
|
19
|
+
matches: SearchBlockLineMatch[];
|
|
20
|
+
}
|
|
21
|
+
/** Fields both search shapes carry (the render site positions; this component draws). */
|
|
22
|
+
interface SearchBlockCommon {
|
|
23
|
+
/** Localized chrome supplied by the owning render site. */
|
|
24
|
+
labels: SearchBlockLabels;
|
|
25
|
+
/**
|
|
26
|
+
* Whether the tool capped the inline result: the shape carries only the
|
|
27
|
+
* retained results, not every result the search found. The banner summary
|
|
28
|
+
* folds the pre-cap `total` in (`显示 X / 共 N …`) so the card never presents a
|
|
29
|
+
* capped result as complete.
|
|
30
|
+
*/
|
|
31
|
+
truncated: boolean;
|
|
32
|
+
/** Total results the search found before capping (equals the retained count when not `truncated`). */
|
|
33
|
+
total: number;
|
|
34
|
+
/** Height cap in rows before the middle collapses (default {@link DEFAULT_SEARCH_MAX_LINES}). */
|
|
35
|
+
maxLines?: number | undefined;
|
|
36
|
+
/** Extra class merged onto the wrapper. */
|
|
37
|
+
className?: string | undefined;
|
|
38
|
+
}
|
|
39
|
+
/** Localized chrome for {@link SearchBlock}. */
|
|
40
|
+
export interface SearchBlockLabels {
|
|
41
|
+
pathsSummary: (shown: number, total: number, truncated: boolean) => string;
|
|
42
|
+
matchesSummary: (shown: number, total: number, files: number, truncated: boolean) => string;
|
|
43
|
+
copy: string;
|
|
44
|
+
copied: string;
|
|
45
|
+
noResults: string;
|
|
46
|
+
collapseAria: string;
|
|
47
|
+
expandAria: (hidden: number) => string;
|
|
48
|
+
collapse: string;
|
|
49
|
+
expand: (hidden: number) => string;
|
|
50
|
+
}
|
|
51
|
+
/** Props for the grouped-matches (`grep`) shape. */
|
|
52
|
+
export interface SearchMatchesBlockProps extends SearchBlockCommon {
|
|
53
|
+
kind: 'matches';
|
|
54
|
+
/** Matched lines grouped by file, in first-seen file order. */
|
|
55
|
+
files: SearchFileGroup[];
|
|
56
|
+
}
|
|
57
|
+
/** Props for the flat-path (`glob`) shape. */
|
|
58
|
+
export interface SearchPathsBlockProps extends SearchBlockCommon {
|
|
59
|
+
kind: 'paths';
|
|
60
|
+
/** The discovered paths, in the tool's result order (the retained page when `truncated`). */
|
|
61
|
+
paths: string[];
|
|
62
|
+
}
|
|
63
|
+
/** {@link SearchBlock} props: one card, two `kind`-discriminated shapes. */
|
|
64
|
+
export type SearchBlockProps = SearchMatchesBlockProps | SearchPathsBlockProps;
|
|
65
|
+
/**
|
|
66
|
+
* Render a completed search as a grouped-matches or flat-path card.
|
|
67
|
+
* @param props - see {@link SearchBlockProps}.
|
|
68
|
+
* @returns the search block element.
|
|
69
|
+
*/
|
|
70
|
+
export declare function SearchBlock(props: SearchBlockProps): import("react").JSX.Element;
|
|
71
|
+
export {};
|
|
72
|
+
//# sourceMappingURL=SearchBlock.d.ts.map
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* State semantic: green done / amber user-attention / blue running ring /
|
|
3
|
+
* red error / grey idle for a tracked subject with nothing in progress.
|
|
4
|
+
*/
|
|
5
|
+
export type StateDotState = 'done' | 'warning' | 'ongoing' | 'error' | 'idle';
|
|
6
|
+
/**
|
|
7
|
+
* Render a state dot.
|
|
8
|
+
* @param props.state - which of `done`, `warning`, `ongoing`, `error`, or `idle` to show.
|
|
9
|
+
* @param props.size - outer diameter in px (default 10, the figma size).
|
|
10
|
+
* @param props.className - extra class for layout placement.
|
|
11
|
+
* @returns the dot element (aria-hidden; pair with text for accessibility).
|
|
12
|
+
*/
|
|
13
|
+
export declare function StateDot({ state, size, className }: {
|
|
14
|
+
state: StateDotState;
|
|
15
|
+
size?: number | undefined;
|
|
16
|
+
className?: string | undefined;
|
|
17
|
+
}): import("react").JSX.Element;
|
|
18
|
+
//# sourceMappingURL=StateDot.d.ts.map
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Render a toggle switch.
|
|
3
|
+
* @param props.checked - the current state; the control is fully controlled.
|
|
4
|
+
* @param props.onChange - called with the state the click asks for.
|
|
5
|
+
* @param props.label - localized accessible name, owned by the render site.
|
|
6
|
+
* @param props.disabled - whether the control refuses input; owners also set it
|
|
7
|
+
* while a write is in flight, not only when a deployment locks the toggle.
|
|
8
|
+
* @param props.title - localized hover text, typically why the toggle is locked.
|
|
9
|
+
* @param props.className - extra class for layout placement.
|
|
10
|
+
* @returns the switch element.
|
|
11
|
+
*/
|
|
12
|
+
export declare function Switch({ checked, onChange, label, disabled, title, className }: {
|
|
13
|
+
checked: boolean;
|
|
14
|
+
onChange: (next: boolean) => void;
|
|
15
|
+
label: string;
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
title?: string | undefined;
|
|
18
|
+
className?: string | undefined;
|
|
19
|
+
}): import("react").JSX.Element;
|
|
20
|
+
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/** Palette selector; each tone names one shipped appearance. */
|
|
3
|
+
export type TagTone =
|
|
4
|
+
/** Hairline outline on tertiary text: the read-only default. */
|
|
5
|
+
'outline'
|
|
6
|
+
/** Inverted fill: one tag per group that names the current selection. */
|
|
7
|
+
| 'solid'
|
|
8
|
+
/** Platform-gray fill: a neutral fact with no status meaning. */
|
|
9
|
+
| 'neutral'
|
|
10
|
+
/** Text only, no fill: a fact stated more quietly than `neutral`. */
|
|
11
|
+
| 'quiet'
|
|
12
|
+
/** Tinted green: a healthy or enabled state. */
|
|
13
|
+
| 'success'
|
|
14
|
+
/** Tinted blue: informational classification, not health. */
|
|
15
|
+
| 'info'
|
|
16
|
+
/** Tinted amber: attention needed, not yet a failure. */
|
|
17
|
+
| 'warning'
|
|
18
|
+
/** Tinted red: a failure. */
|
|
19
|
+
| 'danger';
|
|
20
|
+
/**
|
|
21
|
+
* Render a read-only tag.
|
|
22
|
+
* @param props.tone - which palette to use (default `outline`).
|
|
23
|
+
* @param props.className - extra class for layout placement.
|
|
24
|
+
* @param props.children - the localized label, owned by the render site.
|
|
25
|
+
* @returns the tag element.
|
|
26
|
+
*/
|
|
27
|
+
export declare function Tag({ tone, className, children }: {
|
|
28
|
+
tone?: TagTone;
|
|
29
|
+
className?: string | undefined;
|
|
30
|
+
children?: ReactNode;
|
|
31
|
+
}): import("react").JSX.Element;
|
|
32
|
+
//# sourceMappingURL=Tag.d.ts.map
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/** Output lines shown before the height cap collapses the middle. */
|
|
2
|
+
export declare const DEFAULT_TERMINAL_MAX_LINES = 16;
|
|
3
|
+
/**
|
|
4
|
+
* Display copy for the terminal surface; the owner passes localized labels
|
|
5
|
+
* (this package is cordis-free, so copy arrives via props).
|
|
6
|
+
*/
|
|
7
|
+
export interface TerminalBlockLabels {
|
|
8
|
+
/** Status pill text for a signal-terminated command. */
|
|
9
|
+
signal: (signal: string) => string;
|
|
10
|
+
/** Status pill text for a non-zero exit code. */
|
|
11
|
+
exitCode: (exitCode: number) => string;
|
|
12
|
+
/** Run-state text while the command is still running. */
|
|
13
|
+
running: string;
|
|
14
|
+
/** Run-state text for a signal or non-zero-exit settle. */
|
|
15
|
+
failed: string;
|
|
16
|
+
/** Run-state text for a clean settle. */
|
|
17
|
+
done: string;
|
|
18
|
+
/** Copy-button idle label. */
|
|
19
|
+
copy: string;
|
|
20
|
+
/** Copy-button label during the post-copy confirmation window. */
|
|
21
|
+
copied: string;
|
|
22
|
+
/** Placeholder when a settled command produced no visible output. */
|
|
23
|
+
noOutput: string;
|
|
24
|
+
/** Collapse-toggle aria label while expanded. */
|
|
25
|
+
collapseAria: string;
|
|
26
|
+
/** Collapse-toggle text while expanded. */
|
|
27
|
+
collapse: string;
|
|
28
|
+
/** Expand-toggle aria label while capped, given the hidden line count. */
|
|
29
|
+
expandAria: (hidden: number) => string;
|
|
30
|
+
/** Expand-toggle text while capped, given the hidden line count. */
|
|
31
|
+
expand: (hidden: number) => string;
|
|
32
|
+
}
|
|
33
|
+
export interface TerminalBlockProps {
|
|
34
|
+
/** The command line, rendered verbatim after the prompt label. */
|
|
35
|
+
command: string;
|
|
36
|
+
/** Working directory for the prompt label; absent renders a plain `$`. */
|
|
37
|
+
cwd?: string | undefined;
|
|
38
|
+
/** Absolute home directory, so a cwd equal to it collapses to `~`; absent disables that collapse. */
|
|
39
|
+
home?: string | undefined;
|
|
40
|
+
/** The command's output text; may contain ANSI escape sequences. */
|
|
41
|
+
output?: string | undefined;
|
|
42
|
+
/** Settled exit code; a non-zero value renders the status pill. */
|
|
43
|
+
exitCode?: number | undefined;
|
|
44
|
+
/** Settled terminating signal name; any value renders the status pill, taking precedence over the exit code. */
|
|
45
|
+
signal?: string | undefined;
|
|
46
|
+
/** The command is still running: the block shows the prompt line alone. */
|
|
47
|
+
running?: boolean | undefined;
|
|
48
|
+
/** Height cap in output lines before the middle collapses (default {@link DEFAULT_TERMINAL_MAX_LINES}); Infinity disables the cap. */
|
|
49
|
+
maxLines?: number | undefined;
|
|
50
|
+
/** Extra class merged onto the wrapper (callers position; this component draws). */
|
|
51
|
+
className?: string | undefined;
|
|
52
|
+
/** Localized display copy supplied by the owning render site. */
|
|
53
|
+
labels: TerminalBlockLabels;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Render a shell command as a terminal surface.
|
|
57
|
+
* @param props - see {@link TerminalBlockProps}.
|
|
58
|
+
* @returns the terminal block element.
|
|
59
|
+
*/
|
|
60
|
+
export declare function TerminalBlock({ command, cwd, home, output, exitCode, signal, running, maxLines, className, labels, }: TerminalBlockProps): import("react").JSX.Element;
|
|
61
|
+
//# sourceMappingURL=TerminalBlock.d.ts.map
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Transient top-center banner: slides in, holds at full opacity, fades out,
|
|
4
|
+
* then reports done so the owner can unmount it. Re-showing the same text
|
|
5
|
+
* restarts the cycle when the owner remounts the component (key it by a
|
|
6
|
+
* per-show sequence). Rendered through a body portal so an owner inside a
|
|
7
|
+
* transformed or filtered ancestor cannot trap the fixed banner in that
|
|
8
|
+
* ancestor's box.
|
|
9
|
+
*
|
|
10
|
+
* The hold is the owner's to set, because how long a banner has to stay
|
|
11
|
+
* depends on how much there is to read: a one-line limit lands in the default
|
|
12
|
+
* window, while a failure that names what broke does not. One value drives
|
|
13
|
+
* both the unmount timer and the stylesheet's fade delay — the stylesheet
|
|
14
|
+
* reads it as a custom property — so the two can no longer disagree and leave
|
|
15
|
+
* the banner unmounting mid-fade.
|
|
16
|
+
* @param props.text - resolved banner copy; the owner passes localized text.
|
|
17
|
+
* @param props.icon - optional leading glyph (e.g. a warning icon).
|
|
18
|
+
* @param props.holdMs - full-opacity hold before the fade; defaults to 3000.
|
|
19
|
+
* @param props.anchor - optional element whose horizontal center the banner
|
|
20
|
+
* follows (e.g. the composer card, so the banner centers over the chat column
|
|
21
|
+
* rather than the whole window); omitted, it centers on the viewport.
|
|
22
|
+
* @param props.onDone - called once the fade completes; unmount the toast here.
|
|
23
|
+
* @returns the floating banner.
|
|
24
|
+
*/
|
|
25
|
+
export declare function Toast({ text, icon, anchor, holdMs, onDone }: {
|
|
26
|
+
text: string;
|
|
27
|
+
icon?: ReactNode;
|
|
28
|
+
anchor?: HTMLElement | null;
|
|
29
|
+
holdMs?: number;
|
|
30
|
+
onDone: () => void;
|
|
31
|
+
}): import("react").ReactPortal;
|
|
32
|
+
//# sourceMappingURL=Toast.d.ts.map
|