@ciridae/ui 1.0.2 → 1.0.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/dist/app/auth.d.ts +10 -0
- package/dist/app/auth.js +60 -0
- package/dist/app/error-boundary.d.ts +18 -0
- package/dist/app/error-boundary.js +45 -0
- package/dist/app/feedback.d.ts +12 -0
- package/dist/app/feedback.js +128 -0
- package/dist/app/index.d.ts +8 -0
- package/dist/app/index.js +8 -0
- package/dist/app/request-errors.d.ts +63 -0
- package/dist/app/request-errors.js +172 -0
- package/dist/app/sentry.d.ts +18 -0
- package/dist/app/sentry.js +52 -0
- package/dist/app/telemetry.d.ts +7 -0
- package/dist/app/telemetry.js +28 -0
- package/dist/app/trail.d.ts +9 -0
- package/dist/app/trail.js +18 -0
- package/dist/chat/chat-query-keys.d.ts +3 -3
- package/dist/chat/contract.d.ts +15 -15
- package/dist/chat/conversation-items-query-options.d.ts +114 -114
- package/dist/chat/conversation-source.d.ts +75 -0
- package/dist/chat/conversation-source.js +1 -0
- package/dist/chat/message-text.d.ts +1 -1
- package/dist/chat/message-text.js +114 -46
- package/dist/chat/use-conversation-list.d.ts +6 -6
- package/dist/components/activity-feed.d.ts +2 -2
- package/dist/components/agent-work.d.ts +3 -3
- package/dist/components/app-frame.d.ts +79 -0
- package/dist/components/app-frame.js +92 -0
- package/dist/components/app-navigation.d.ts +3 -3
- package/dist/components/badge.d.ts +1 -1
- package/dist/components/brand-icons.d.ts +3 -3
- package/dist/components/bulk-action-bar.d.ts +1 -1
- package/dist/components/button.d.ts +4 -4
- package/dist/components/calendar.d.ts +1 -1
- package/dist/components/centered-page.d.ts +1 -1
- package/dist/components/chart.d.ts +22 -2
- package/dist/components/chart.js +239 -44
- package/dist/components/chat-client-source.d.ts +16 -0
- package/dist/components/chat-client-source.js +256 -0
- package/dist/components/chat-page.d.ts +9 -8
- package/dist/components/chat-page.js +7 -11
- package/dist/components/chat-sheet-controller.d.ts +10 -14
- package/dist/components/chat-sheet-controller.js +2 -3
- package/dist/components/chat-sheet.d.ts +10 -11
- package/dist/components/chat-sheet.js +135 -273
- package/dist/components/chat.d.ts +22 -8
- package/dist/components/chat.js +128 -33
- package/dist/components/checkbox-item.d.ts +1 -1
- package/dist/components/checkbox-list.d.ts +1 -1
- package/dist/components/chip.d.ts +1 -1
- package/dist/components/collapsible.d.ts +1 -1
- package/dist/components/color-theme.d.ts +1 -1
- package/dist/components/column-settings.d.ts +1 -1
- package/dist/components/command-menu.d.ts +1 -1
- package/dist/components/command-palette.d.ts +3 -3
- package/dist/components/command-palette.js +1 -2
- package/dist/components/copyable-id.d.ts +22 -5
- package/dist/components/copyable-id.js +46 -6
- package/dist/components/data-display.d.ts +4 -4
- package/dist/components/data-grid.d.ts +10 -10
- package/dist/components/date-range-picker.d.ts +1 -1
- package/dist/components/date-time.d.ts +1 -1
- package/dist/components/dialog-height-context.d.ts +1 -1
- package/dist/components/document-viewer.d.ts +2 -2
- package/dist/components/drawer.d.ts +6 -6
- package/dist/components/dropzone.d.ts +4 -4
- package/dist/components/editable-field.d.ts +2 -2
- package/dist/components/email-input.d.ts +1 -1
- package/dist/components/environment-frame.d.ts +1 -1
- package/dist/components/expandable-text.d.ts +1 -1
- package/dist/components/feedback-screenshot.d.ts +1 -1
- package/dist/components/feedback-sheet.d.ts +18 -3
- package/dist/components/feedback-sheet.js +216 -55
- package/dist/components/field-context.d.ts +1 -1
- package/dist/components/filter-bar.d.ts +3 -3
- package/dist/components/filter-bar.js +4 -1
- package/dist/components/form-controls.d.ts +3 -3
- package/dist/components/form-layout.d.ts +7 -7
- package/dist/components/hotkeys.d.ts +2 -2
- package/dist/components/icon.d.ts +1 -1
- package/dist/components/input.d.ts +4 -4
- package/dist/components/input.js +3 -2
- package/dist/components/keyboard-shortcuts.d.ts +2 -2
- package/dist/components/keycap.d.ts +2 -2
- package/dist/components/layout.d.ts +13 -13
- package/dist/components/lightbox.d.ts +9 -3
- package/dist/components/lightbox.js +11 -8
- package/dist/components/link.d.ts +1 -1
- package/dist/components/locale.d.ts +32 -2
- package/dist/components/locale.js +25 -1
- package/dist/components/log-list.d.ts +3 -3
- package/dist/components/mention-input.d.ts +2 -2
- package/dist/components/menu.d.ts +2 -2
- package/dist/components/meter.d.ts +1 -1
- package/dist/components/navigation.d.ts +2 -2
- package/dist/components/notification-tray.d.ts +1 -1
- package/dist/components/overlays.d.ts +4 -4
- package/dist/components/page-frame.d.ts +4 -4
- package/dist/components/panel.d.ts +3 -3
- package/dist/components/profile-header.d.ts +1 -1
- package/dist/components/progress.d.ts +1 -1
- package/dist/components/project-avatar.d.ts +1 -1
- package/dist/components/radio-card.d.ts +2 -2
- package/dist/components/record.d.ts +4 -4
- package/dist/components/resolved-file-url.d.ts +19 -0
- package/dist/components/resolved-file-url.js +49 -0
- package/dist/components/scroll-area.d.ts +1 -1
- package/dist/components/secret-dialog.d.ts +1 -1
- package/dist/components/segmented-bar.d.ts +1 -1
- package/dist/components/select.d.ts +4 -4
- package/dist/components/settings.d.ts +4 -4
- package/dist/components/shell-skeleton.d.ts +1 -1
- package/dist/components/shell.d.ts +19 -19
- package/dist/components/shell.js +3 -1
- package/dist/components/side-panel.d.ts +3 -3
- package/dist/components/sidebar.d.ts +6 -6
- package/dist/components/site-banner.d.ts +1 -1
- package/dist/components/skeleton.d.ts +1 -1
- package/dist/components/skeletons.d.ts +5 -5
- package/dist/components/stages.d.ts +5 -5
- package/dist/components/stat-card.d.ts +3 -3
- package/dist/components/status-banner.d.ts +1 -1
- package/dist/components/status.d.ts +2 -2
- package/dist/components/steps.d.ts +1 -1
- package/dist/components/switch.d.ts +1 -1
- package/dist/components/tabs.d.ts +8 -8
- package/dist/components/theme-customizer.d.ts +2 -2
- package/dist/components/toast.d.ts +1 -1
- package/dist/components/use-new-version-available.d.ts +6 -0
- package/dist/components/use-new-version-available.js +29 -0
- package/dist/components/user-chip.d.ts +3 -3
- package/dist/components/wizard.d.ts +2 -2
- package/dist/feedback/contract.d.ts +136 -136
- package/dist/feedback/feedback-controller.d.ts +6 -6
- package/dist/feedback/generated/zod.gen.d.ts +28 -28
- package/dist/feedback/operator-contract.d.ts +11 -11
- package/dist/feedback/operator-controller.d.ts +32 -13
- package/dist/feedback/operator-controller.js +44 -11
- package/dist/styled-system/styles.css +203 -59
- package/package.json +32 -3
|
@@ -7,7 +7,7 @@ export declare const PAGE_HOTKEY_SCOPE = "page";
|
|
|
7
7
|
/** Gives the hotkeys registered inside it to the page, paused while an overlay is open. */
|
|
8
8
|
export declare function PageHotkeys({ children }: {
|
|
9
9
|
children: ReactNode;
|
|
10
|
-
}): import("
|
|
10
|
+
}): import("react").JSX.Element;
|
|
11
11
|
/**
|
|
12
12
|
* An overlay's keyboard: while mounted (and `enabled`), only the hotkeys registered inside it and
|
|
13
13
|
* the global ones fire, so the top overlay owns the keyboard and the page under it pauses.
|
|
@@ -15,7 +15,7 @@ export declare function PageHotkeys({ children }: {
|
|
|
15
15
|
export declare function HotkeyLayer({ enabled, children }: {
|
|
16
16
|
enabled?: boolean;
|
|
17
17
|
children: ReactNode;
|
|
18
|
-
}): import("
|
|
18
|
+
}): import("react").JSX.Element;
|
|
19
19
|
/**
|
|
20
20
|
* The person's rebound hotkeys, kept in `localStorage` as JSON under `storageKey`, as the root
|
|
21
21
|
* `HotkeysProvider`'s `customHotkeys` and `onCustomHotkeysChange`. Entries that are no hotkey are
|
|
@@ -55,4 +55,4 @@ export type SpinnerProps = Omit<IconProps, "size"> & {
|
|
|
55
55
|
label?: string;
|
|
56
56
|
};
|
|
57
57
|
/** The one in-progress glyph: every pending state spins this, never a refresh or notch icon. */
|
|
58
|
-
export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("
|
|
58
|
+
export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("react").JSX.Element;
|
|
@@ -3,9 +3,9 @@ import type { Hotkey } from "./hotkeys.js";
|
|
|
3
3
|
export type InputProps = Omit<ComponentProps<"input">, "size"> & {
|
|
4
4
|
size?: "small" | "medium" | "large";
|
|
5
5
|
};
|
|
6
|
-
export declare function Input({ className, size, ...props }: InputProps): import("
|
|
6
|
+
export declare function Input({ className, size, ...props }: InputProps): import("react").JSX.Element;
|
|
7
7
|
export type SearchInputProps = Omit<ComponentProps<"input">, "size" | "value" | "defaultValue"> & {
|
|
8
|
-
variant?: "regular" | "flat" | "sidebar" | "
|
|
8
|
+
variant?: "regular" | "flat" | "sidebar" | "ghost";
|
|
9
9
|
/** Defaults to `compact` in a `Toolbar`, `regular` elsewhere. */
|
|
10
10
|
size?: "regular" | "compact";
|
|
11
11
|
/** `fill` takes the row's width; `field` grows from a name's width to a search field's. */
|
|
@@ -23,7 +23,7 @@ export type SearchInputProps = Omit<ComponentProps<"input">, "size" | "value" |
|
|
|
23
23
|
shortcut?: Hotkey;
|
|
24
24
|
wrapperClassName?: string;
|
|
25
25
|
};
|
|
26
|
-
export declare function SearchInput({ variant, size: ownSize, width, value, defaultValue, onValueCommit, debounceMs, shortcut, wrapperClassName, className, onChange, onKeyDown, ...props }: SearchInputProps): import("
|
|
26
|
+
export declare function SearchInput({ variant, size: ownSize, width, value, defaultValue, onValueCommit, debounceMs, shortcut, wrapperClassName, className, onChange, onKeyDown, ...props }: SearchInputProps): import("react").JSX.Element;
|
|
27
27
|
export type SearchFieldProps = Omit<ComponentProps<"input">, "size" | "type"> & {
|
|
28
28
|
/** Defaults to `compact` in a `Toolbar`, `regular` elsewhere. */
|
|
29
29
|
size?: "regular" | "compact";
|
|
@@ -33,4 +33,4 @@ export type SearchFieldProps = Omit<ComponentProps<"input">, "size" | "type"> &
|
|
|
33
33
|
shortcut?: Hotkey;
|
|
34
34
|
wrapperClassName?: string;
|
|
35
35
|
};
|
|
36
|
-
export declare function SearchField({ size: ownSize, onClear, shortcut, wrapperClassName, className, disabled, ...props }: SearchFieldProps): import("
|
|
36
|
+
export declare function SearchField({ size: ownSize, onClear, shortcut, wrapperClassName, className, disabled, ...props }: SearchFieldProps): import("react").JSX.Element;
|
package/dist/components/input.js
CHANGED
|
@@ -89,7 +89,8 @@ const search = cva({
|
|
|
89
89
|
border: "1px solid token(colors.border.control)",
|
|
90
90
|
background: "bg.field",
|
|
91
91
|
},
|
|
92
|
-
|
|
92
|
+
// No face: the field reads as text until focused, beside ghost buttons in a toolbar.
|
|
93
|
+
ghost: {
|
|
93
94
|
borderRadius: "action",
|
|
94
95
|
paddingInline: "control.compactInline",
|
|
95
96
|
border: "0",
|
|
@@ -142,7 +143,7 @@ const searchText = cva({
|
|
|
142
143
|
regular: {},
|
|
143
144
|
sidebar: {},
|
|
144
145
|
flat: {},
|
|
145
|
-
|
|
146
|
+
ghost: { fontSize: "caption", fontWeight: "regular" },
|
|
146
147
|
},
|
|
147
148
|
size: { regular: {}, compact: { fontSize: "caption", fontWeight: "regular" } },
|
|
148
149
|
},
|
|
@@ -5,6 +5,6 @@ export type KeyboardShortcutsProps = {
|
|
|
5
5
|
open?: boolean;
|
|
6
6
|
onOpenChange?: (open: boolean) => void;
|
|
7
7
|
};
|
|
8
|
-
export declare function KeyboardShortcuts({ hotkey, open: ownOpen, onOpenChange, }: KeyboardShortcutsProps): import("
|
|
8
|
+
export declare function KeyboardShortcuts({ hotkey, open: ownOpen, onOpenChange, }: KeyboardShortcutsProps): import("react").JSX.Element;
|
|
9
9
|
/** The app's rebindable hotkeys under their groups, each with Change and, once changed, Reset. */
|
|
10
|
-
export declare function KeyboardShortcutSettings(): import("
|
|
10
|
+
export declare function KeyboardShortcutSettings(): import("react").JSX.Element[];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type Hotkey } from "./hotkeys.js";
|
|
2
2
|
import type { ComponentProps } from "react";
|
|
3
3
|
/** One key as a 24px cap, such as the `K` after a search field. */
|
|
4
|
-
export declare function Keycap({ className, ...props }: ComponentProps<"kbd">): import("
|
|
4
|
+
export declare function Keycap({ className, ...props }: ComponentProps<"kbd">): import("react").JSX.Element;
|
|
5
5
|
/**
|
|
6
6
|
* A hotkey as one quiet line, as the hotkeys layer writes it: `Mod` is "⌘" on a Mac and "Ctrl"
|
|
7
7
|
* elsewhere, and a sequence's steps are spaced ("G I"). `Keycap` is the boxed key for a place
|
|
@@ -9,4 +9,4 @@ export declare function Keycap({ className, ...props }: ComponentProps<"kbd">):
|
|
|
9
9
|
*/
|
|
10
10
|
export declare function ShortcutHint({ hotkey, className, ...props }: ComponentProps<"kbd"> & {
|
|
11
11
|
hotkey: Hotkey;
|
|
12
|
-
}): import("
|
|
12
|
+
}): import("react").JSX.Element;
|
|
@@ -9,14 +9,14 @@ export type StackProps = useRender.ComponentProps<"div"> & {
|
|
|
9
9
|
justify?: "start" | "center" | "end" | "between";
|
|
10
10
|
};
|
|
11
11
|
/** Children in a column. It never forces its parent wider than the parent's own box. */
|
|
12
|
-
export declare function Stack({ gap, align, justify, render, className, ...props }: StackProps): import("
|
|
12
|
+
export declare function Stack({ gap, align, justify, render, className, ...props }: StackProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
13
13
|
export type ClusterProps = useRender.ComponentProps<"div"> & {
|
|
14
14
|
gap?: Gap;
|
|
15
15
|
/** Wraps onto more lines when narrow; `false` keeps one line. Defaults to true. */
|
|
16
16
|
wrap?: boolean;
|
|
17
17
|
};
|
|
18
18
|
/** Children in a row, centered on one line. */
|
|
19
|
-
export declare function Cluster({ gap, wrap, render, className, ...props }: ClusterProps): import("
|
|
19
|
+
export declare function Cluster({ gap, wrap, render, className, ...props }: ClusterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
20
20
|
/**
|
|
21
21
|
* The kit's text colors and sizes, for a run of text in a layout. `tone` and `size` inherit when
|
|
22
22
|
* left out; `code` is the 12px label size, set compact. `MutedText` and `Eyebrow` are its two
|
|
@@ -76,11 +76,11 @@ export type TextProps = useRender.ComponentProps<"span"> & {
|
|
|
76
76
|
/** The element to render; `render` takes any element instead. Defaults to `span`. */
|
|
77
77
|
as?: "span" | "p" | "div" | "strong" | "small" | "label" | "time";
|
|
78
78
|
};
|
|
79
|
-
export declare function Text({ tone, size, weight, truncate, as, render, className, ...props }: TextProps): import("
|
|
79
|
+
export declare function Text({ tone, size, weight, truncate, as, render, className, ...props }: TextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
80
80
|
/** Muted caption text: a value's secondary line, or an empty value such as "Never". */
|
|
81
|
-
export declare function MutedText(props: Omit<TextProps, "tone" | "size">): import("
|
|
81
|
+
export declare function MutedText(props: Omit<TextProps, "tone" | "size">): import("react").JSX.Element;
|
|
82
82
|
/** The small muted label over a title or a field, such as a drawer's eyebrow or a group's name. */
|
|
83
|
-
export declare function Eyebrow({ className, ...props }: Omit<TextProps, "size" | "weight">): import("
|
|
83
|
+
export declare function Eyebrow({ className, ...props }: Omit<TextProps, "size" | "weight">): import("react").JSX.Element;
|
|
84
84
|
/**
|
|
85
85
|
* The one heading style: `page` for the title a page's heading opens with; `large` for a title in
|
|
86
86
|
* content, such as a standalone page's; `medium` for a section of a page or a dialog; `small` for
|
|
@@ -109,10 +109,10 @@ export type HeadingProps = ComponentProps<"h1"> & {
|
|
|
109
109
|
level: 1 | 2 | 3 | 4;
|
|
110
110
|
size?: "page" | "large" | "medium" | "small";
|
|
111
111
|
};
|
|
112
|
-
export declare function Heading({ level, size, className, ...props }: HeadingProps): import("
|
|
112
|
+
export declare function Heading({ level, size, className, ...props }: HeadingProps): import("react").JSX.Element;
|
|
113
113
|
/** A bordered list whose items are divided by hairlines, such as a checklist of sources. */
|
|
114
|
-
export declare function ListGroup({ className, ...props }: ComponentProps<"ul">): import("
|
|
115
|
-
export declare function ListGroupItem({ className, ...props }: ComponentProps<"li">): import("
|
|
114
|
+
export declare function ListGroup({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
|
|
115
|
+
export declare function ListGroupItem({ className, ...props }: ComponentProps<"li">): import("react").JSX.Element;
|
|
116
116
|
/** Whether a control sits in a `Toolbar`, which sets the height of the controls in it. */
|
|
117
117
|
export declare function useInToolbar(): boolean;
|
|
118
118
|
export type ToolbarProps = useRender.ComponentProps<"div"> & {
|
|
@@ -127,7 +127,7 @@ export type ToolbarProps = useRender.ComponentProps<"div"> & {
|
|
|
127
127
|
* actions, wrapping onto more lines when narrow. Its controls share the small button's height: a
|
|
128
128
|
* `SearchInput` or `SegmentedControl` in it is compact unless it sets its own size.
|
|
129
129
|
*/
|
|
130
|
-
export declare function Toolbar({ gap, justify, stackOnPhone, render, className, ...props }: ToolbarProps): import("
|
|
130
|
+
export declare function Toolbar({ gap, justify, stackOnPhone, render, className, ...props }: ToolbarProps): import("react").JSX.Element;
|
|
131
131
|
/**
|
|
132
132
|
* A row's label with its muted detail line under it, or after it on the same line when `inline`.
|
|
133
133
|
* `ListRow` draws one; use it alone where the label sits inside another control, such as a
|
|
@@ -137,7 +137,7 @@ export declare function ListRowText({ label, detail, inline, }: {
|
|
|
137
137
|
label: ReactNode;
|
|
138
138
|
detail?: ReactNode;
|
|
139
139
|
inline?: boolean;
|
|
140
|
-
}): import("
|
|
140
|
+
}): import("react").JSX.Element;
|
|
141
141
|
/**
|
|
142
142
|
* One row of a list: a leading mark or control, a label with an optional muted detail, and
|
|
143
143
|
* trailing controls. `flush` drops the row's own height and inset for a table cell, keeping it to
|
|
@@ -159,9 +159,9 @@ export type ListRowProps = Omit<useRender.ComponentProps<"div">, "children"> & {
|
|
|
159
159
|
*/
|
|
160
160
|
href?: string;
|
|
161
161
|
};
|
|
162
|
-
export declare function ListRow({ leading, label, detail, trailing, checkbox, flush, loading, href, render, className, ...props }: ListRowProps): import("
|
|
162
|
+
export declare function ListRow({ leading, label, detail, trailing, checkbox, flush, loading, href, render, className, ...props }: ListRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
163
163
|
/** A responsive grid of ChoiceCards, shared by provider, role, and client pickers. */
|
|
164
|
-
export declare function ChoiceGrid({ className, ...props }: ComponentProps<"div">): import("
|
|
164
|
+
export declare function ChoiceGrid({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
|
|
165
165
|
/**
|
|
166
166
|
* A card to pick one option from a grid, such as a provider or a role, laid out as a `ListRow`. Pass
|
|
167
167
|
* `pressed` when it is one of several that stay chosen; leave it out for a card that acts as soon as
|
|
@@ -170,5 +170,5 @@ export declare function ChoiceGrid({ className, ...props }: ComponentProps<"div"
|
|
|
170
170
|
export declare function ChoiceCard({ icon: leading, pressed, children, className, ...props }: Omit<ComponentProps<"button">, "type"> & {
|
|
171
171
|
icon?: ReactNode;
|
|
172
172
|
pressed?: boolean;
|
|
173
|
-
}): import("
|
|
173
|
+
}): import("react").JSX.Element;
|
|
174
174
|
export {};
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
import { type ResolveFileUrl } from "./resolved-file-url.js";
|
|
2
|
+
/**
|
|
3
|
+
* A file the lightbox shows: an image, a PDF, text or HTML by its `mediaType` or name. Without a
|
|
4
|
+
* `url` it loads through the lightbox's `resolveUrl`.
|
|
5
|
+
*/
|
|
2
6
|
export type LightboxItem = {
|
|
3
7
|
id: string;
|
|
4
8
|
name: string;
|
|
5
|
-
url
|
|
9
|
+
url?: string | null;
|
|
6
10
|
mediaType?: string;
|
|
7
11
|
};
|
|
8
12
|
export type LightboxProps = {
|
|
@@ -10,5 +14,7 @@ export type LightboxProps = {
|
|
|
10
14
|
/** The file showing; null closes the lightbox. */
|
|
11
15
|
index: number | null;
|
|
12
16
|
onIndexChange: (index: number | null) => void;
|
|
17
|
+
/** Loads the link of a file with no `url`; see `ResolveFileUrl`. */
|
|
18
|
+
resolveUrl?: ResolveFileUrl<LightboxItem>;
|
|
13
19
|
};
|
|
14
|
-
export declare function Lightbox({ items, index, onIndexChange }: LightboxProps): import("
|
|
20
|
+
export declare function Lightbox({ items, index, onIndexChange, resolveUrl }: LightboxProps): import("react").JSX.Element;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/*
|
|
3
3
|
* A full-window viewer for files, such as a message's attachments: an image fits the window, a
|
|
4
4
|
* PDF, text or HTML file shows in a frame, and anything else offers its download. With several
|
|
5
|
-
* files it steps between them by its arrows or the arrow keys.
|
|
5
|
+
* files it steps between them by its arrows or the arrow keys. A file with no `url`, such as one
|
|
6
|
+
* served behind a bearer token, loads through `resolveUrl` when it shows.
|
|
6
7
|
*/
|
|
7
8
|
import { Dialog as BaseDialog } from "@base-ui/react/dialog";
|
|
8
9
|
import { ArrowSquareOutIcon, CaretLeftIcon, CaretRightIcon, DownloadSimpleIcon, XIcon, } from "@phosphor-icons/react";
|
|
@@ -10,8 +11,9 @@ import { css, cx } from "#primitives/css";
|
|
|
10
11
|
import { Button, IconButton } from "./button.js";
|
|
11
12
|
import { fileTypeIcon } from "./dropzone.js";
|
|
12
13
|
import { HotkeyLayer } from "./hotkeys.js";
|
|
13
|
-
import { directional, icon } from "./icon.js";
|
|
14
|
+
import { directional, icon, Spinner } from "./icon.js";
|
|
14
15
|
import { useCiridaeLocale } from "./locale.js";
|
|
16
|
+
import { useResolvedFileUrl } from "./resolved-file-url.js";
|
|
15
17
|
const popup = css({
|
|
16
18
|
position: "fixed",
|
|
17
19
|
inset: "none",
|
|
@@ -86,7 +88,7 @@ function kindOf({ name, mediaType = "" }) {
|
|
|
86
88
|
function isHtml({ name, mediaType }) {
|
|
87
89
|
return mediaType === "text/html" || /\.html?$/i.test(name);
|
|
88
90
|
}
|
|
89
|
-
export function Lightbox({ items, index, onIndexChange }) {
|
|
91
|
+
export function Lightbox({ items, index, onIndexChange, resolveUrl }) {
|
|
90
92
|
const item = index === null ? undefined : items[index];
|
|
91
93
|
return (_jsx(BaseDialog.Root, { open: item !== undefined, onOpenChange: (open) => {
|
|
92
94
|
if (!open)
|
|
@@ -103,15 +105,16 @@ export function Lightbox({ items, index, onIndexChange }) {
|
|
|
103
105
|
event.preventDefault();
|
|
104
106
|
const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
|
|
105
107
|
onIndexChange((index + (rtl ? -offset : offset) + items.length) % items.length);
|
|
106
|
-
}, children: item && index !== null && (_jsx(HotkeyLayer, { children: _jsx(LightboxView, { items: items, index: index, item: item, onIndexChange: onIndexChange }) })) }) }) }));
|
|
108
|
+
}, children: item && index !== null && (_jsx(HotkeyLayer, { children: _jsx(LightboxView, { items: items, index: index, item: item, onIndexChange: onIndexChange, resolveUrl: resolveUrl }) })) }) }) }));
|
|
107
109
|
}
|
|
108
|
-
function LightboxView({ items, index, item, onIndexChange, }) {
|
|
110
|
+
function LightboxView({ items, index, item, onIndexChange, resolveUrl, }) {
|
|
109
111
|
const { labels } = useCiridaeLocale();
|
|
110
112
|
const several = items.length > 1;
|
|
111
113
|
const go = (offset) => onIndexChange((index + offset + items.length) % items.length);
|
|
112
114
|
const kind = kindOf(item);
|
|
113
|
-
|
|
115
|
+
const { url, state } = useResolvedFileUrl(item, resolveUrl);
|
|
116
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: bar, children: [_jsx(BaseDialog.Title, { className: title, children: item.name }), several && (_jsx("span", { className: position, children: labels.lightbox.position(index + 1, items.length) })), url && (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": labels.lightbox.openInNewTab, variant: "ghost", nativeButton: false, render: _jsx("a", { href: url, target: "_blank", rel: "noreferrer" }), children: _jsx(ArrowSquareOutIcon, { className: icon({ size: "small" }) }) }), _jsx(IconButton, { "aria-label": labels.lightbox.download, variant: "ghost", nativeButton: false, render: _jsx("a", { href: url, download: item.name }), children: _jsx(DownloadSimpleIcon, { className: icon({ size: "small" }) }) })] })), _jsx(BaseDialog.Close, { render: _jsx(IconButton, { "aria-label": labels.common.close, variant: "ghost" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] }), _jsxs("div", { className: stage, children: [!url ? (state === "pending" ? (_jsx(Spinner, { label: labels.common.loading })) : (_jsx("div", { className: fallback, children: fileTypeIcon({ name: item.name, type: item.mediaType ?? "" }) }))) : kind === "image" ? (_jsx("img", { src: url, alt: item.name }, item.id)) : kind === "frame" ? (_jsx("iframe", { src: url, title: item.name,
|
|
114
117
|
// A sent HTML file only draws: no scripts, no reach into the page. A PDF keeps the
|
|
115
118
|
// browser's own viewer, which a sandbox would block.
|
|
116
|
-
sandbox: isHtml(item) ? "" : undefined }, item.id)) : (_jsxs("div", { className: fallback, children: [fileTypeIcon({ name: item.name, type: item.mediaType ?? "" }), _jsx(Button, { nativeButton: false, render: _jsx("a", { href:
|
|
119
|
+
sandbox: isHtml(item) ? "" : undefined }, item.id)) : (_jsxs("div", { className: fallback, children: [fileTypeIcon({ name: item.name, type: item.mediaType ?? "" }), _jsx(Button, { nativeButton: false, render: _jsx("a", { href: url, download: item.name }), children: labels.lightbox.download })] })), several && (_jsxs(_Fragment, { children: [_jsx("span", { className: step, "data-step": "previous", children: _jsx(IconButton, { "aria-label": labels.lightbox.previous, onClick: () => go(-1), children: _jsx(CaretLeftIcon, { className: cx(icon({ size: "small" }), directional) }) }) }), _jsx("span", { className: step, "data-step": "next", children: _jsx(IconButton, { "aria-label": labels.lightbox.next, onClick: () => go(1), children: _jsx(CaretRightIcon, { className: cx(icon({ size: "small" }), directional) }) }) })] }))] })] }));
|
|
117
120
|
}
|
|
@@ -10,4 +10,4 @@ export type LinkProps = ComponentProps<"a"> & {
|
|
|
10
10
|
* One anchor style for the whole app. `external` carries the new-tab wiring so callers never
|
|
11
11
|
* repeat `target`/`rel`, and a router link passes through `render`.
|
|
12
12
|
*/
|
|
13
|
-
export declare function Link({ tone, external, render, className, children, ...props }: LinkProps): import("
|
|
13
|
+
export declare function Link({ tone, external, render, className, children, ...props }: LinkProps): import("react").JSX.Element;
|
|
@@ -49,6 +49,10 @@ export declare const englishLabels: {
|
|
|
49
49
|
/** Between the items of a list, such as the actions one update line joins. */
|
|
50
50
|
listSeparator: string;
|
|
51
51
|
};
|
|
52
|
+
clipboard: {
|
|
53
|
+
copyFailed: string;
|
|
54
|
+
copyByHand: string;
|
|
55
|
+
};
|
|
52
56
|
shell: {
|
|
53
57
|
menu: string;
|
|
54
58
|
breadcrumb: string;
|
|
@@ -153,7 +157,7 @@ export declare const englishLabels: {
|
|
|
153
157
|
sendTitle: string;
|
|
154
158
|
sentTitle: string;
|
|
155
159
|
newTab: string;
|
|
156
|
-
|
|
160
|
+
ticketsTab: string;
|
|
157
161
|
type: string;
|
|
158
162
|
where: string;
|
|
159
163
|
whatHappened: string;
|
|
@@ -201,6 +205,18 @@ export declare const englishLabels: {
|
|
|
201
205
|
pointerNote: (index: number) => string;
|
|
202
206
|
removePointer: (index: number) => string;
|
|
203
207
|
};
|
|
208
|
+
/** The feedback sheet's Tickets tab, for the people who answer feedback. */
|
|
209
|
+
feedbackOperator: {
|
|
210
|
+
allTitle: string;
|
|
211
|
+
mine: string;
|
|
212
|
+
search: string;
|
|
213
|
+
status: string;
|
|
214
|
+
type: string;
|
|
215
|
+
reporter: string;
|
|
216
|
+
noneReceived: string;
|
|
217
|
+
noMatches: string;
|
|
218
|
+
statusFailed: string;
|
|
219
|
+
};
|
|
204
220
|
lightbox: {
|
|
205
221
|
previous: string;
|
|
206
222
|
next: string;
|
|
@@ -226,6 +242,8 @@ export declare const englishLabels: {
|
|
|
226
242
|
answered: (answers: string) => string;
|
|
227
243
|
allow: string;
|
|
228
244
|
deny: string;
|
|
245
|
+
allowed: string;
|
|
246
|
+
denied: string;
|
|
229
247
|
conversations: string;
|
|
230
248
|
searchConversations: string;
|
|
231
249
|
newChat: string;
|
|
@@ -233,6 +251,9 @@ export declare const englishLabels: {
|
|
|
233
251
|
previousWeek: string;
|
|
234
252
|
approve: string;
|
|
235
253
|
waitingOnYou: string;
|
|
254
|
+
sending: string;
|
|
255
|
+
reading: string;
|
|
256
|
+
scrollToLatest: string;
|
|
236
257
|
};
|
|
237
258
|
projectCard: {
|
|
238
259
|
default: string;
|
|
@@ -379,6 +400,15 @@ export declare const englishLabels: {
|
|
|
379
400
|
fullScreen: string;
|
|
380
401
|
exitFullScreen: string;
|
|
381
402
|
};
|
|
403
|
+
appFrame: {
|
|
404
|
+
status: string;
|
|
405
|
+
localBuild: string;
|
|
406
|
+
updateAvailable: string;
|
|
407
|
+
};
|
|
408
|
+
accountMenu: {
|
|
409
|
+
menu: string;
|
|
410
|
+
signOut: string;
|
|
411
|
+
};
|
|
382
412
|
themeCustomizer: {
|
|
383
413
|
palette: string;
|
|
384
414
|
paletteName: (name: string) => string;
|
|
@@ -458,6 +488,6 @@ export type CiridaeLocaleProviderProps = {
|
|
|
458
488
|
dir?: "ltr" | "rtl";
|
|
459
489
|
children: ReactNode;
|
|
460
490
|
};
|
|
461
|
-
export declare function CiridaeLocaleProvider({ locale, labels, dir, children, }: CiridaeLocaleProviderProps): import("
|
|
491
|
+
export declare function CiridaeLocaleProvider({ locale, labels, dir, children, }: CiridaeLocaleProviderProps): import("react").JSX.Element;
|
|
462
492
|
/** The locale's labels and formatters; English for the browser's language outside a provider. */
|
|
463
493
|
export declare function useCiridaeLocale(): CiridaeLocale;
|
|
@@ -43,6 +43,7 @@ export const englishLabels = {
|
|
|
43
43
|
/** Between the items of a list, such as the actions one update line joins. */
|
|
44
44
|
listSeparator: ", ",
|
|
45
45
|
},
|
|
46
|
+
clipboard: { copyFailed: "Couldn't copy", copyByHand: "Select it and copy it by hand." },
|
|
46
47
|
shell: {
|
|
47
48
|
menu: "Menu",
|
|
48
49
|
breadcrumb: "Breadcrumb",
|
|
@@ -132,7 +133,7 @@ export const englishLabels = {
|
|
|
132
133
|
sendTitle: "Send feedback",
|
|
133
134
|
sentTitle: "Sent feedback",
|
|
134
135
|
newTab: "New",
|
|
135
|
-
|
|
136
|
+
ticketsTab: "Tickets",
|
|
136
137
|
type: "Type",
|
|
137
138
|
where: "Where",
|
|
138
139
|
whatHappened: "What happened?",
|
|
@@ -180,6 +181,18 @@ export const englishLabels = {
|
|
|
180
181
|
pointerNote: (index) => `Pointer ${index} note`,
|
|
181
182
|
removePointer: (index) => `Remove pointer ${index}`,
|
|
182
183
|
},
|
|
184
|
+
/** The feedback sheet's Tickets tab, for the people who answer feedback. */
|
|
185
|
+
feedbackOperator: {
|
|
186
|
+
allTitle: "All feedback",
|
|
187
|
+
mine: "Mine",
|
|
188
|
+
search: "Search feedback",
|
|
189
|
+
status: "Status",
|
|
190
|
+
type: "Type",
|
|
191
|
+
reporter: "Reporter",
|
|
192
|
+
noneReceived: "No feedback yet",
|
|
193
|
+
noMatches: "No feedback matches",
|
|
194
|
+
statusFailed: "Couldn't change the status",
|
|
195
|
+
},
|
|
183
196
|
lightbox: {
|
|
184
197
|
previous: "Previous file",
|
|
185
198
|
next: "Next file",
|
|
@@ -205,6 +218,8 @@ export const englishLabels = {
|
|
|
205
218
|
answered: (answers) => `Answered ${answers}`,
|
|
206
219
|
allow: "Allow",
|
|
207
220
|
deny: "Deny",
|
|
221
|
+
allowed: "Allowed",
|
|
222
|
+
denied: "Denied",
|
|
208
223
|
conversations: "Conversations",
|
|
209
224
|
searchConversations: "Search conversations",
|
|
210
225
|
newChat: "New chat",
|
|
@@ -212,6 +227,9 @@ export const englishLabels = {
|
|
|
212
227
|
previousWeek: "Previous 7 days",
|
|
213
228
|
approve: "Approve",
|
|
214
229
|
waitingOnYou: "Waiting on you",
|
|
230
|
+
sending: "Sending",
|
|
231
|
+
reading: "Reading",
|
|
232
|
+
scrollToLatest: "Scroll to latest",
|
|
215
233
|
},
|
|
216
234
|
projectCard: {
|
|
217
235
|
default: "Default",
|
|
@@ -346,6 +364,8 @@ export const englishLabels = {
|
|
|
346
364
|
fullScreen: "Full screen",
|
|
347
365
|
exitFullScreen: "Exit full screen",
|
|
348
366
|
},
|
|
367
|
+
appFrame: { status: "Status", localBuild: "local", updateAvailable: "Update available" },
|
|
368
|
+
accountMenu: { menu: "Account menu", signOut: "Sign out" },
|
|
349
369
|
themeCustomizer: {
|
|
350
370
|
palette: "Palette",
|
|
351
371
|
paletteName: (name) => name.charAt(0).toUpperCase() + name.slice(1),
|
|
@@ -431,6 +451,10 @@ function mergeLabels(overrides) {
|
|
|
431
451
|
documentViewer: { ...englishLabels.documentViewer, ...overrides.documentViewer },
|
|
432
452
|
themeCustomizer: { ...englishLabels.themeCustomizer, ...overrides.themeCustomizer },
|
|
433
453
|
profileHeader: { ...englishLabels.profileHeader, ...overrides.profileHeader },
|
|
454
|
+
feedbackOperator: { ...englishLabels.feedbackOperator, ...overrides.feedbackOperator },
|
|
455
|
+
clipboard: { ...englishLabels.clipboard, ...overrides.clipboard },
|
|
456
|
+
accountMenu: { ...englishLabels.accountMenu, ...overrides.accountMenu },
|
|
457
|
+
appFrame: { ...englishLabels.appFrame, ...overrides.appFrame },
|
|
434
458
|
};
|
|
435
459
|
}
|
|
436
460
|
/** The locale value `useCiridaeLocale` returns, for use outside React or in tests. */
|
|
@@ -6,7 +6,7 @@ import type { ComponentProps, Ref } from "react";
|
|
|
6
6
|
export declare function LogList({ fill, className, ref, ...props }: ComponentProps<"div"> & {
|
|
7
7
|
fill?: boolean;
|
|
8
8
|
ref?: Ref<HTMLDivElement>;
|
|
9
|
-
}): import("
|
|
9
|
+
}): import("react").JSX.Element;
|
|
10
10
|
/**
|
|
11
11
|
* Monospace block of raw log text. `framed` gives it the log list's own scroll frame, for output
|
|
12
12
|
* that is the whole list rather than one entry's detail.
|
|
@@ -15,6 +15,6 @@ export declare function LogOutput({ tone, framed, className, ref, ...props }: Co
|
|
|
15
15
|
tone?: "error";
|
|
16
16
|
framed?: boolean;
|
|
17
17
|
ref?: Ref<HTMLPreElement>;
|
|
18
|
-
}): import("
|
|
18
|
+
}): import("react").JSX.Element;
|
|
19
19
|
/** Placeholder for plain monospace output such as Docker Compose logs. */
|
|
20
|
-
export declare function LogOutputSkeleton(): import("
|
|
20
|
+
export declare function LogOutputSkeleton(): import("react").JSX.Element;
|
|
@@ -29,7 +29,7 @@ export declare function MentionChip({ mention, mark, href, }: {
|
|
|
29
29
|
mention: Mention;
|
|
30
30
|
mark?: ReactNode;
|
|
31
31
|
href?: string;
|
|
32
|
-
}): import("
|
|
32
|
+
}): import("react").JSX.Element;
|
|
33
33
|
export type MentionInputProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSubmit" | "placeholder"> & {
|
|
34
34
|
/** The text, each mention in it as `[@label](mention://kind/id)`. */
|
|
35
35
|
value: string;
|
|
@@ -47,4 +47,4 @@ export type MentionInputProps = Omit<ComponentProps<"div">, "children" | "defaul
|
|
|
47
47
|
/** Names the picker's list; the locale's "Mentions" by default. */
|
|
48
48
|
listLabel?: string;
|
|
49
49
|
};
|
|
50
|
-
export declare function MentionInput({ value, onValueChange, triggers, mentionMark, placeholder, submitOn, onSubmit, disabled, autoFocus, listLabel, ref, className, onKeyDown, onFocus, onBlur, onPointerDown, ...props }: MentionInputProps): import("
|
|
50
|
+
export declare function MentionInput({ value, onValueChange, triggers, mentionMark, placeholder, submitOn, onSubmit, disabled, autoFocus, listLabel, ref, className, onKeyDown, onFocus, onBlur, onPointerDown, ...props }: MentionInputProps): import("react").JSX.Element;
|
|
@@ -60,7 +60,7 @@ export type MenuProps = Omit<ComponentProps<typeof BaseMenu.Root>, "children"> &
|
|
|
60
60
|
/** Which edge of the trigger the menu lines up with; `end` keeps a right-hand menu inside its container. */
|
|
61
61
|
align?: "start" | "end";
|
|
62
62
|
};
|
|
63
|
-
export declare function Menu({ trigger, items, align, ...rootProps }: MenuProps): import("
|
|
63
|
+
export declare function Menu({ trigger, items, align, ...rootProps }: MenuProps): import("react").JSX.Element;
|
|
64
64
|
export type OverflowMenuProps = Omit<MenuProps, "trigger" | "align"> & {
|
|
65
65
|
/** The button's accessible name, such as "Record actions" or "More for INV-4821". */
|
|
66
66
|
label: string;
|
|
@@ -73,4 +73,4 @@ export type OverflowMenuProps = Omit<MenuProps, "trigger" | "align"> & {
|
|
|
73
73
|
ref?: Ref<HTMLButtonElement>;
|
|
74
74
|
};
|
|
75
75
|
/** The "more" button: an `IconButton` with three dots that opens a `Menu` of `items`. */
|
|
76
|
-
export declare function OverflowMenu({ label, size, variant, align, disabled, ref, ...props }: OverflowMenuProps): import("
|
|
76
|
+
export declare function OverflowMenu({ label, size, variant, align, disabled, ref, ...props }: OverflowMenuProps): import("react").JSX.Element;
|
|
@@ -11,4 +11,4 @@ export type MeterProps = Omit<ComponentProps<"span">, "children"> & {
|
|
|
11
11
|
/** The figure shown above the track, such as "92%"; nothing is shown without it. */
|
|
12
12
|
valueLabel?: ReactNode;
|
|
13
13
|
};
|
|
14
|
-
export declare function Meter({ value, max, tone, label, valueLabel, className, ...props }: MeterProps): import("
|
|
14
|
+
export declare function Meter({ value, max, tone, label, valueLabel, className, ...props }: MeterProps): import("react").JSX.Element;
|
|
@@ -6,7 +6,7 @@ export type PaginationProps = Omit<ComponentProps<"nav">, "children"> & {
|
|
|
6
6
|
onPageChange: (page: number) => void;
|
|
7
7
|
labels?: Partial<CiridaeLabels["pagination"]>;
|
|
8
8
|
};
|
|
9
|
-
export declare function Pagination({ page, pages, onPageChange, labels: ownLabels, className, ...props }: PaginationProps): import("
|
|
9
|
+
export declare function Pagination({ page, pages, onPageChange, labels: ownLabels, className, ...props }: PaginationProps): import("react").JSX.Element;
|
|
10
10
|
export type EmptyStateProps = Omit<ComponentProps<"section">, "title"> & {
|
|
11
11
|
icon?: ReactNode;
|
|
12
12
|
title: ReactNode;
|
|
@@ -18,4 +18,4 @@ export type EmptyStateProps = Omit<ComponentProps<"section">, "title"> & {
|
|
|
18
18
|
*/
|
|
19
19
|
variant?: "block" | "bare" | "inline";
|
|
20
20
|
};
|
|
21
|
-
export declare function EmptyState({ icon, title, description, action, variant, className, ...props }: EmptyStateProps): import("
|
|
21
|
+
export declare function EmptyState({ icon, title, description, action, variant, className, ...props }: EmptyStateProps): import("react").JSX.Element;
|
|
@@ -44,4 +44,4 @@ export type NotificationTrayProps = {
|
|
|
44
44
|
onOpenChange?: (open: boolean) => void;
|
|
45
45
|
};
|
|
46
46
|
export type NotificationLabels = CiridaeLabels["notifications"];
|
|
47
|
-
export declare function NotificationTray({ trigger, notifications, onOpen, onMarkAllRead, footerAction, placement, now, labels: ownLabels, open: ownOpen, onOpenChange, }: NotificationTrayProps): import("
|
|
47
|
+
export declare function NotificationTray({ trigger, notifications, onOpen, onMarkAllRead, footerAction, placement, now, labels: ownLabels, open: ownOpen, onOpenChange, }: NotificationTrayProps): import("react").JSX.Element;
|
|
@@ -53,7 +53,7 @@ export type DialogProps = Omit<ComponentProps<typeof BaseDialog.Root>, "children
|
|
|
53
53
|
content: ReactNode;
|
|
54
54
|
};
|
|
55
55
|
};
|
|
56
|
-
export declare function Dialog({ trigger, finalFocus, title, titleVisibility, icon: titleIcon, description, children, actions, leadingActions, kind, dismiss, closable, pending, dirty, closeLabel: ownCloseLabel, size, holdHeight, aside, onOpenChange, ...rootProps }: DialogProps): import("
|
|
56
|
+
export declare function Dialog({ trigger, finalFocus, title, titleVisibility, icon: titleIcon, description, children, actions, leadingActions, kind, dismiss, closable, pending, dirty, closeLabel: ownCloseLabel, size, holdHeight, aside, onOpenChange, ...rootProps }: DialogProps): import("react").JSX.Element;
|
|
57
57
|
export type AlertDialogProps = Omit<ComponentProps<typeof BaseAlertDialog.Root>, "children" | "actionsRef"> & {
|
|
58
58
|
/** Omit for a dialog opened only through controlled `open`. */
|
|
59
59
|
trigger?: ReactElement;
|
|
@@ -77,7 +77,7 @@ export type AlertDialogProps = Omit<ComponentProps<typeof BaseAlertDialog.Root>,
|
|
|
77
77
|
* closes it, which Base UI keeps as the cancelling path, except while an
|
|
78
78
|
* async confirmation is pending.
|
|
79
79
|
*/
|
|
80
|
-
export declare function AlertDialog({ trigger, title, children, confirmLabel, cancelLabel, onConfirm, variant, onOpenChange, ...rootProps }: AlertDialogProps): import("
|
|
80
|
+
export declare function AlertDialog({ trigger, title, children, confirmLabel, cancelLabel, onConfirm, variant, onOpenChange, ...rootProps }: AlertDialogProps): import("react").JSX.Element;
|
|
81
81
|
export type PopoverProps = Omit<ComponentProps<typeof BasePopover.Root>, "children"> & {
|
|
82
82
|
/** The button that opens it. Leave it out and pass `anchor` to open it from elsewhere, such as a menu item. */
|
|
83
83
|
trigger?: ReactElement;
|
|
@@ -99,9 +99,9 @@ export type PopoverProps = Omit<ComponentProps<typeof BasePopover.Root>, "childr
|
|
|
99
99
|
*/
|
|
100
100
|
openOnHover?: boolean;
|
|
101
101
|
};
|
|
102
|
-
export declare function Popover({ trigger, anchor, children, density, width, align, openOnHover, ...rootProps }: PopoverProps): import("
|
|
102
|
+
export declare function Popover({ trigger, anchor, children, density, width, align, openOnHover, ...rootProps }: PopoverProps): import("react").JSX.Element;
|
|
103
103
|
export type TooltipProps = Omit<ComponentProps<typeof BaseTooltip.Root>, "children"> & {
|
|
104
104
|
children: ReactElement;
|
|
105
105
|
content: ReactNode;
|
|
106
106
|
};
|
|
107
|
-
export declare function Tooltip({ children, content, ...rootProps }: TooltipProps): import("
|
|
107
|
+
export declare function Tooltip({ children, content, ...rootProps }: TooltipProps): import("react").JSX.Element;
|
|
@@ -20,7 +20,7 @@ export type BreadcrumbsProps = ComponentProps<"nav"> & {
|
|
|
20
20
|
current?: ReactNode;
|
|
21
21
|
};
|
|
22
22
|
/** The page's trail: its parents, then the page itself as the trail's heading. */
|
|
23
|
-
export declare function Breadcrumbs({ crumbs, current: ownCurrent, ...props }: BreadcrumbsProps): import("
|
|
23
|
+
export declare function Breadcrumbs({ crumbs, current: ownCurrent, ...props }: BreadcrumbsProps): import("react").JSX.Element;
|
|
24
24
|
export type PageFrameProps = Omit<ComponentProps<"main">, "children"> & {
|
|
25
25
|
crumbs: readonly Crumb[];
|
|
26
26
|
/** The header's controls at its far edge, such as filters and the account menu. */
|
|
@@ -28,7 +28,7 @@ export type PageFrameProps = Omit<ComponentProps<"main">, "children"> & {
|
|
|
28
28
|
children: ReactNode;
|
|
29
29
|
};
|
|
30
30
|
/** The main panel of a page: a header with its trail and actions, then the content. */
|
|
31
|
-
export declare function PageFrame({ crumbs, headerActions, children, ...props }: PageFrameProps): import("
|
|
31
|
+
export declare function PageFrame({ crumbs, headerActions, children, ...props }: PageFrameProps): import("react").JSX.Element;
|
|
32
32
|
export type PageHeadingProps = Omit<ComponentProps<"div">, "title"> & {
|
|
33
33
|
title: ReactNode;
|
|
34
34
|
/** Before the title, such as a record's avatar or a project's mark. */
|
|
@@ -52,7 +52,7 @@ export type PageHeadingProps = Omit<ComponentProps<"div">, "title"> & {
|
|
|
52
52
|
* The title a page or a record opens with, the line under it, and its own actions: a node, or menu
|
|
53
53
|
* items behind an `OverflowMenu`.
|
|
54
54
|
*/
|
|
55
|
-
export declare function PageHeading({ title, leading, badge, meta, actions, actionsOpen, onActionsOpenChange, level, labels: ownLabels, className, ...props }: PageHeadingProps): import("
|
|
55
|
+
export declare function PageHeading({ title, leading, badge, meta, actions, actionsOpen, onActionsOpenChange, level, labels: ownLabels, className, ...props }: PageHeadingProps): import("react").JSX.Element;
|
|
56
56
|
/** One count: the value that reads, and its muted label, as an object or a `[value, label]` pair. */
|
|
57
57
|
export type Stat = {
|
|
58
58
|
value: ReactNode;
|
|
@@ -62,4 +62,4 @@ export type Stat = {
|
|
|
62
62
|
/** A row of `value label` stats split by dots: the value reads, the label stays muted. */
|
|
63
63
|
export declare function StatLine({ stats, className, ...props }: ComponentProps<"span"> & {
|
|
64
64
|
stats: readonly Stat[];
|
|
65
|
-
}): import("
|
|
65
|
+
}): import("react").JSX.Element;
|
|
@@ -3,14 +3,14 @@ import type { ReactNode } from "react";
|
|
|
3
3
|
/** The card's surface as a style object, to merge into a `css()` call that adds layout. */
|
|
4
4
|
export declare const cardSurface: import("../styled-system/types/index.js").SystemStyleObject;
|
|
5
5
|
export type CardProps = useRender.ComponentProps<"div">;
|
|
6
|
-
export declare function Card({ render, className, ...props }: CardProps): import("
|
|
6
|
+
export declare function Card({ render, className, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
7
7
|
export type PanelProps = useRender.ComponentProps<"section"> & {
|
|
8
8
|
/** `default` pads a group of rows; `compact` insets cards by a hairline; `none` runs flush. */
|
|
9
9
|
padding?: "none" | "compact" | "default";
|
|
10
10
|
/** `panel` is the translucent lift off the page; `outline` is the edge alone. */
|
|
11
11
|
tone?: "panel" | "outline";
|
|
12
12
|
};
|
|
13
|
-
export declare function Panel({ padding, tone, render, className, ...props }: PanelProps): import("
|
|
13
|
+
export declare function Panel({ padding, tone, render, className, ...props }: PanelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
14
14
|
export type PanelHeaderProps = Omit<useRender.ComponentProps<"div">, "title"> & {
|
|
15
15
|
title: ReactNode;
|
|
16
16
|
/** Muted beside the title, such as a count or the period it covers. */
|
|
@@ -21,4 +21,4 @@ export type PanelHeaderProps = Omit<useRender.ComponentProps<"div">, "title"> &
|
|
|
21
21
|
level?: 2 | 3 | 4;
|
|
22
22
|
};
|
|
23
23
|
/** A panel's top row: its title and meta, and its actions at the far edge. */
|
|
24
|
-
export declare function PanelHeader({ title, meta, actions, level, render, className, ...props }: PanelHeaderProps): import("
|
|
24
|
+
export declare function PanelHeader({ title, meta, actions, level, render, className, ...props }: PanelHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -12,4 +12,4 @@ export type ProfileHeaderProps = Omit<ComponentProps<"header">, "children" | "ti
|
|
|
12
12
|
description?: ReactNode;
|
|
13
13
|
actions?: ReactNode;
|
|
14
14
|
};
|
|
15
|
-
export declare function ProfileHeader({ name, kind, src, title, team, email, description, actions, className, ...props }: ProfileHeaderProps): import("
|
|
15
|
+
export declare function ProfileHeader({ name, kind, src, title, team, email, description, actions, className, ...props }: ProfileHeaderProps): import("react").JSX.Element;
|