@cloudgrid-io/ui 0.40.0 → 0.42.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/blocks/action-link.d.ts +31 -0
- package/dist/blocks/action-link.d.ts.map +1 -0
- package/dist/blocks/action-link.js +40 -0
- package/dist/blocks/action-link.js.map +1 -0
- package/dist/blocks/activity-row.d.ts +42 -0
- package/dist/blocks/activity-row.d.ts.map +1 -0
- package/dist/blocks/activity-row.js +37 -0
- package/dist/blocks/activity-row.js.map +1 -0
- package/dist/blocks/add-tile.d.ts +31 -0
- package/dist/blocks/add-tile.d.ts.map +1 -0
- package/dist/blocks/add-tile.js +29 -0
- package/dist/blocks/add-tile.js.map +1 -0
- package/dist/blocks/avatar-stack.d.ts +40 -0
- package/dist/blocks/avatar-stack.d.ts.map +1 -0
- package/dist/blocks/avatar-stack.js +41 -0
- package/dist/blocks/avatar-stack.js.map +1 -0
- package/dist/blocks/avatar.d.ts +31 -5
- package/dist/blocks/avatar.d.ts.map +1 -1
- package/dist/blocks/avatar.js +57 -9
- package/dist/blocks/avatar.js.map +1 -1
- package/dist/blocks/confirm-delete-dialog.d.ts.map +1 -1
- package/dist/blocks/confirm-delete-dialog.js +5 -1
- package/dist/blocks/confirm-delete-dialog.js.map +1 -1
- package/dist/blocks/copy-button.d.ts +59 -0
- package/dist/blocks/copy-button.d.ts.map +1 -0
- package/dist/blocks/copy-button.js +76 -0
- package/dist/blocks/copy-button.js.map +1 -0
- package/dist/blocks/dashed-banner.d.ts +36 -0
- package/dist/blocks/dashed-banner.d.ts.map +1 -0
- package/dist/blocks/dashed-banner.js +31 -0
- package/dist/blocks/dashed-banner.js.map +1 -0
- package/dist/blocks/dashed-line.d.ts +44 -0
- package/dist/blocks/dashed-line.d.ts.map +1 -0
- package/dist/blocks/dashed-line.js +46 -0
- package/dist/blocks/dashed-line.js.map +1 -0
- package/dist/blocks/empty-creations.d.ts +18 -1
- package/dist/blocks/empty-creations.d.ts.map +1 -1
- package/dist/blocks/empty-creations.js +25 -9
- package/dist/blocks/empty-creations.js.map +1 -1
- package/dist/blocks/entity-card.d.ts +37 -2
- package/dist/blocks/entity-card.d.ts.map +1 -1
- package/dist/blocks/entity-card.js +70 -7
- package/dist/blocks/entity-card.js.map +1 -1
- package/dist/blocks/filter-tabs.d.ts +45 -0
- package/dist/blocks/filter-tabs.d.ts.map +1 -0
- package/dist/blocks/filter-tabs.js +48 -0
- package/dist/blocks/filter-tabs.js.map +1 -0
- package/dist/blocks/header-menu.d.ts +54 -0
- package/dist/blocks/header-menu.d.ts.map +1 -0
- package/dist/blocks/header-menu.js +63 -0
- package/dist/blocks/header-menu.js.map +1 -0
- package/dist/blocks/header-pill.d.ts +41 -0
- package/dist/blocks/header-pill.d.ts.map +1 -0
- package/dist/blocks/header-pill.js +67 -0
- package/dist/blocks/header-pill.js.map +1 -0
- package/dist/blocks/icons.d.ts +19 -2
- package/dist/blocks/icons.d.ts.map +1 -1
- package/dist/blocks/icons.js +22 -2
- package/dist/blocks/icons.js.map +1 -1
- package/dist/blocks/locked-section.d.ts +36 -9
- package/dist/blocks/locked-section.d.ts.map +1 -1
- package/dist/blocks/locked-section.js +31 -6
- package/dist/blocks/locked-section.js.map +1 -1
- package/dist/blocks/menu-trigger.d.ts +35 -0
- package/dist/blocks/menu-trigger.d.ts.map +1 -0
- package/dist/blocks/menu-trigger.js +24 -0
- package/dist/blocks/menu-trigger.js.map +1 -0
- package/dist/blocks/meter.d.ts +9 -1
- package/dist/blocks/meter.d.ts.map +1 -1
- package/dist/blocks/meter.js +6 -2
- package/dist/blocks/meter.js.map +1 -1
- package/dist/blocks/phosphor-marks.d.ts +8 -2
- package/dist/blocks/phosphor-marks.d.ts.map +1 -1
- package/dist/blocks/phosphor-marks.js +12 -3
- package/dist/blocks/phosphor-marks.js.map +1 -1
- package/dist/blocks/ranked-list.d.ts +15 -1
- package/dist/blocks/ranked-list.d.ts.map +1 -1
- package/dist/blocks/ranked-list.js +18 -5
- package/dist/blocks/ranked-list.js.map +1 -1
- package/dist/blocks/scroll-rail.d.ts +15 -0
- package/dist/blocks/scroll-rail.d.ts.map +1 -0
- package/dist/blocks/scroll-rail.js +134 -0
- package/dist/blocks/scroll-rail.js.map +1 -0
- package/dist/blocks/section-heading.d.ts +21 -0
- package/dist/blocks/section-heading.d.ts.map +1 -0
- package/dist/blocks/section-heading.js +18 -0
- package/dist/blocks/section-heading.js.map +1 -0
- package/dist/blocks/shelf.d.ts +24 -9
- package/dist/blocks/shelf.d.ts.map +1 -1
- package/dist/blocks/shelf.js +52 -15
- package/dist/blocks/shelf.js.map +1 -1
- package/dist/blocks/stat-tile.d.ts +21 -1
- package/dist/blocks/stat-tile.d.ts.map +1 -1
- package/dist/blocks/stat-tile.js +11 -6
- package/dist/blocks/stat-tile.js.map +1 -1
- package/dist/index.d.ts +13 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +13 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/cloudgrid-cn.d.ts +14 -0
- package/dist/lib/cloudgrid-cn.d.ts.map +1 -1
- package/dist/lib/cloudgrid-cn.js +17 -0
- package/dist/lib/cloudgrid-cn.js.map +1 -1
- package/dist/theme.css +2 -0
- package/dist/tokens/base.json +42 -2
- package/dist/tokens.css +18 -2
- package/dist/tokens.json +6 -2
- package/dist/ui/badge.d.ts +1 -1
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/badge.js +19 -0
- package/dist/ui/badge.js.map +1 -1
- package/dist/ui/button.d.ts +5 -3
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +107 -43
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/dialog.d.ts +52 -0
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +57 -5
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/drawer.d.ts +1 -1
- package/dist/ui/table.d.ts +27 -0
- package/dist/ui/table.d.ts.map +1 -1
- package/dist/ui/table.js +39 -6
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/tabs.d.ts +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
3
|
+
/**
|
|
4
|
+
* Copy a value, and say so (#382, spec §4.10).
|
|
5
|
+
*
|
|
6
|
+
* Home copies one command from two places: the onboard bar under the page, and
|
|
7
|
+
* "or onboard an agent" in the empty state. Each says what happened in its own
|
|
8
|
+
* words: "Copied" for two seconds, or "Couldn't copy" when the clipboard
|
|
9
|
+
* refuses (an insecure origin, a denied permission, a browser without the
|
|
10
|
+
* API). The words are also put in a polite live region, because a label that
|
|
11
|
+
* changes under a screen reader that has already read the button is not heard.
|
|
12
|
+
*
|
|
13
|
+
* ## The pieces
|
|
14
|
+
*
|
|
15
|
+
* `copyText(value, clipboard)` is the one clipboard call: it resolves `copied`
|
|
16
|
+
* or `blocked` and never throws. `useCopy()` holds the state and the timer: each
|
|
17
|
+
* copy restarts the two seconds, and the timer is cleared on unmount, so a
|
|
18
|
+
* component that goes away mid-cycle does not set state afterwards.
|
|
19
|
+
* `CopyButton` is a button (or whatever `render` gives it) wired to both.
|
|
20
|
+
*
|
|
21
|
+
* ## No look of its own
|
|
22
|
+
*
|
|
23
|
+
* The block adds no visual class: the caller styles it, or renders it as
|
|
24
|
+
* something styled. "onboard an agent" passes `ACTION_LINK_CLASS`; the onboard
|
|
25
|
+
* bar passes `render` and a function child, so its tool marks stay while its
|
|
26
|
+
* line switches.
|
|
27
|
+
*
|
|
28
|
+
* `CodeBlock`, `CommandField`, `AgentPrompt`, `PromptBlock` and `InvitePopup`
|
|
29
|
+
* each carry their own copy of this cycle; they can move onto `useCopy` later.
|
|
30
|
+
*/
|
|
31
|
+
export type CopyState = "idle" | "copied" | "blocked";
|
|
32
|
+
/** Writes `value` to `clipboard`. Resolves `copied` or `blocked`; never throws. */
|
|
33
|
+
declare function copyText(value: string, clipboard: Pick<Clipboard, "writeText"> | undefined): Promise<"copied" | "blocked">;
|
|
34
|
+
declare function useCopy({ resetAfter }?: {
|
|
35
|
+
resetAfter?: number;
|
|
36
|
+
}): {
|
|
37
|
+
state: CopyState;
|
|
38
|
+
copy: (value: string) => Promise<CopyState>;
|
|
39
|
+
};
|
|
40
|
+
declare function CopyButton({ value, children, copiedLabel, blockedLabel, announceCopied, announceBlocked, resetAfter, onStateChange, render, onClick, ...props }: Omit<useRender.ComponentProps<"button">, "children" | "value"> & {
|
|
41
|
+
/** What is copied, exactly. */
|
|
42
|
+
value: string;
|
|
43
|
+
/** The idle content, or a function of the state for content that keeps parts of itself. */
|
|
44
|
+
children: React.ReactNode | ((state: CopyState) => React.ReactNode);
|
|
45
|
+
/** Replaces node children while copied. */
|
|
46
|
+
copiedLabel?: React.ReactNode;
|
|
47
|
+
/** Replaces node children while blocked. */
|
|
48
|
+
blockedLabel?: React.ReactNode;
|
|
49
|
+
/** What the live region says on a copy. */
|
|
50
|
+
announceCopied?: string;
|
|
51
|
+
/** What the live region says on a refusal. */
|
|
52
|
+
announceBlocked?: string;
|
|
53
|
+
/** How long the result shows, in ms. Default 2000. */
|
|
54
|
+
resetAfter?: number;
|
|
55
|
+
/** Called with each new state, e.g. to show the command in a tip when blocked. */
|
|
56
|
+
onStateChange?: (state: CopyState) => void;
|
|
57
|
+
}): React.JSX.Element;
|
|
58
|
+
export { CopyButton, copyText, useCopy };
|
|
59
|
+
//# sourceMappingURL=copy-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../src/blocks/copy-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;AAErD,mFAAmF;AACnF,iBAAe,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,GAAG,SAAS,GAAG,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC,CAQzH;AAED,iBAAS,OAAO,CAAC,EAAE,UAAiB,EAAE,GAAE;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAO;;kBAclD,MAAM,KAAG,OAAO,CAAC,SAAS,CAAC;EAe5C;AAED,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,WAAsB,EACtB,YAA8B,EAC9B,cAA0C,EAC1C,eAAqE,EACrE,UAAiB,EACjB,aAAa,EACb,MAAM,EACN,OAAO,EACP,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IAClE,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,2FAA2F;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACnE,2CAA2C;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;CAC3C,qBA0CA;AAED,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAA"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
5
|
+
/** Writes `value` to `clipboard`. Resolves `copied` or `blocked`; never throws. */
|
|
6
|
+
async function copyText(value, clipboard) {
|
|
7
|
+
if (!clipboard || typeof clipboard.writeText !== "function")
|
|
8
|
+
return "blocked";
|
|
9
|
+
try {
|
|
10
|
+
await clipboard.writeText(value);
|
|
11
|
+
return "copied";
|
|
12
|
+
}
|
|
13
|
+
catch {
|
|
14
|
+
return "blocked";
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
function useCopy({ resetAfter = 2000 } = {}) {
|
|
18
|
+
const [state, setState] = React.useState("idle");
|
|
19
|
+
const timer = React.useRef(undefined);
|
|
20
|
+
const mounted = React.useRef(true);
|
|
21
|
+
React.useEffect(() => {
|
|
22
|
+
mounted.current = true;
|
|
23
|
+
return () => {
|
|
24
|
+
mounted.current = false;
|
|
25
|
+
clearTimeout(timer.current);
|
|
26
|
+
};
|
|
27
|
+
}, []);
|
|
28
|
+
const copy = React.useCallback(async (value) => {
|
|
29
|
+
const clipboard = typeof navigator === "undefined" ? undefined : navigator.clipboard;
|
|
30
|
+
const result = await copyText(value, clipboard);
|
|
31
|
+
if (!mounted.current)
|
|
32
|
+
return result;
|
|
33
|
+
clearTimeout(timer.current);
|
|
34
|
+
setState(result);
|
|
35
|
+
timer.current = setTimeout(() => {
|
|
36
|
+
if (mounted.current)
|
|
37
|
+
setState("idle");
|
|
38
|
+
}, resetAfter);
|
|
39
|
+
return result;
|
|
40
|
+
}, [resetAfter]);
|
|
41
|
+
return { state, copy };
|
|
42
|
+
}
|
|
43
|
+
function CopyButton({ value, children, copiedLabel = "Copied", blockedLabel = "Couldn't copy", announceCopied = "Copied to the clipboard", announceBlocked = "Couldn't copy. The browser blocked the clipboard.", resetAfter = 2000, onStateChange, render, onClick, ...props }) {
|
|
44
|
+
const { state, copy } = useCopy({ resetAfter });
|
|
45
|
+
const onStateChangeRef = React.useRef(onStateChange);
|
|
46
|
+
onStateChangeRef.current = onStateChange;
|
|
47
|
+
React.useEffect(() => {
|
|
48
|
+
onStateChangeRef.current?.(state);
|
|
49
|
+
}, [state]);
|
|
50
|
+
const content = typeof children === "function"
|
|
51
|
+
? children(state)
|
|
52
|
+
: state === "copied"
|
|
53
|
+
? copiedLabel
|
|
54
|
+
: state === "blocked"
|
|
55
|
+
? blockedLabel
|
|
56
|
+
: children;
|
|
57
|
+
const element = useRender({
|
|
58
|
+
render,
|
|
59
|
+
defaultTagName: "button",
|
|
60
|
+
props: {
|
|
61
|
+
"data-slot": "copy-button",
|
|
62
|
+
"data-state": state,
|
|
63
|
+
...(render ? {} : { type: "button" }),
|
|
64
|
+
...props,
|
|
65
|
+
onClick: (event) => {
|
|
66
|
+
onClick?.(event);
|
|
67
|
+
if (!event.defaultPrevented)
|
|
68
|
+
void copy(value);
|
|
69
|
+
},
|
|
70
|
+
children: content,
|
|
71
|
+
},
|
|
72
|
+
});
|
|
73
|
+
return (_jsxs(_Fragment, { children: [element, _jsx("span", { "aria-live": "polite", className: "sr-only", children: state === "copied" ? announceCopied : state === "blocked" ? announceBlocked : "" })] }));
|
|
74
|
+
}
|
|
75
|
+
export { CopyButton, copyText, useCopy };
|
|
76
|
+
//# sourceMappingURL=copy-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"copy-button.js","sourceRoot":"","sources":["../../src/blocks/copy-button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* A dashed banner with one call and a Dismiss: Home's invite banner (#382,
|
|
4
|
+
* spec §4.3, Figma `11351:6110`).
|
|
5
|
+
*
|
|
6
|
+
* 72 tall (at least), radius 20, the library's dashed line, its content centred
|
|
7
|
+
* 32 apart: an optional leading node (`InviteFaces`), one line (Body), an
|
|
8
|
+
* optional action (the `cta` Invite, `Button size="xl"`) and, with `onDismiss`,
|
|
9
|
+
* a teal Body Bold "Dismiss" button. Under 48rem of its own width the line sits
|
|
10
|
+
* over the controls (spec §4.12).
|
|
11
|
+
*
|
|
12
|
+
* ## A block, not a `Notice` variant
|
|
13
|
+
*
|
|
14
|
+
* `Notice` is an amber status message with a heading, a `role="status"` and an
|
|
15
|
+
* outline action. This shares none of that: no heading, no status to announce,
|
|
16
|
+
* a dashed outline instead of a ground. A variant would have been a second
|
|
17
|
+
* component behind one name.
|
|
18
|
+
*
|
|
19
|
+
* Whether it shows (dismissed for this grid and person, nobody else here yet)
|
|
20
|
+
* is the Console's decision and the Console's storage; the banner only reports
|
|
21
|
+
* the press.
|
|
22
|
+
*/
|
|
23
|
+
declare function DashedBanner({ leading, action, onDismiss, dismissLabel, className, children, ...props }: Omit<React.ComponentProps<"section">, "children"> & {
|
|
24
|
+
/** Before the line: `<InviteFaces />`. */
|
|
25
|
+
leading?: React.ReactNode;
|
|
26
|
+
/** The line. */
|
|
27
|
+
children: React.ReactNode;
|
|
28
|
+
/** After the line: the call, e.g. the `cta` Invite at size `xl`. */
|
|
29
|
+
action?: React.ReactNode;
|
|
30
|
+
/** Renders the Dismiss button and is called when it is pressed. */
|
|
31
|
+
onDismiss?: () => void;
|
|
32
|
+
/** Dismiss's words. */
|
|
33
|
+
dismissLabel?: string;
|
|
34
|
+
}): React.JSX.Element;
|
|
35
|
+
export { DashedBanner };
|
|
36
|
+
//# sourceMappingURL=dashed-banner.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dashed-banner.d.ts","sourceRoot":"","sources":["../../src/blocks/dashed-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAwB,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,GAAG;IACrD,0CAA0C;IAC1C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gBAAgB;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,oEAAoE;IACpE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,qBAyCA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { cn } from "../lib/cloudgrid-cn.js";
|
|
4
|
+
import { ACTION_LINK_CLASS } from "./action-link.js";
|
|
5
|
+
import { DASHED_LINE_CLASS } from "./dashed-line.js";
|
|
6
|
+
/**
|
|
7
|
+
* A dashed banner with one call and a Dismiss: Home's invite banner (#382,
|
|
8
|
+
* spec §4.3, Figma `11351:6110`).
|
|
9
|
+
*
|
|
10
|
+
* 72 tall (at least), radius 20, the library's dashed line, its content centred
|
|
11
|
+
* 32 apart: an optional leading node (`InviteFaces`), one line (Body), an
|
|
12
|
+
* optional action (the `cta` Invite, `Button size="xl"`) and, with `onDismiss`,
|
|
13
|
+
* a teal Body Bold "Dismiss" button. Under 48rem of its own width the line sits
|
|
14
|
+
* over the controls (spec §4.12).
|
|
15
|
+
*
|
|
16
|
+
* ## A block, not a `Notice` variant
|
|
17
|
+
*
|
|
18
|
+
* `Notice` is an amber status message with a heading, a `role="status"` and an
|
|
19
|
+
* outline action. This shares none of that: no heading, no status to announce,
|
|
20
|
+
* a dashed outline instead of a ground. A variant would have been a second
|
|
21
|
+
* component behind one name.
|
|
22
|
+
*
|
|
23
|
+
* Whether it shows (dismissed for this grid and person, nobody else here yet)
|
|
24
|
+
* is the Console's decision and the Console's storage; the banner only reports
|
|
25
|
+
* the press.
|
|
26
|
+
*/
|
|
27
|
+
function DashedBanner({ leading, action, onDismiss, dismissLabel = "Dismiss", className, children, ...props }) {
|
|
28
|
+
return (_jsx("section", { "data-slot": "dashed-banner", className: cn("@container/dashed-banner flex min-h-18 items-center justify-center rounded-container px-6 py-[15px] text-ink", DASHED_LINE_CLASS, className), ...props, children: _jsxs("div", { "data-slot": "dashed-banner-content", className: "flex flex-wrap items-center justify-center gap-8 @max-[48rem]/dashed-banner:flex-col @max-[48rem]/dashed-banner:gap-4", children: [leading ? (_jsx("div", { "data-slot": "dashed-banner-leading", className: "flex shrink-0 items-center", children: leading })) : null, _jsx("p", { "data-slot": "dashed-banner-text", className: "m-0 text-center text-body-sm text-pretty", children: children }), action || onDismiss ? (_jsxs("div", { className: "flex shrink-0 items-center gap-8", children: [action ? (_jsx("div", { "data-slot": "dashed-banner-action", className: "flex items-center", children: action })) : null, onDismiss ? (_jsx("button", { type: "button", "data-slot": "dashed-banner-dismiss", onClick: onDismiss, className: cn(ACTION_LINK_CLASS, "font-bold"), children: dismissLabel })) : null] })) : null] }) }));
|
|
29
|
+
}
|
|
30
|
+
export { DashedBanner };
|
|
31
|
+
//# sourceMappingURL=dashed-banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dashed-banner.js","sourceRoot":"","sources":["../../src/blocks/dashed-banner.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE7D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,YAAY,CAAC,EACpB,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,GAAG,SAAS,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAYT;IACC,OAAO,CACL,+BACY,eAAe,EACzB,SAAS,EAAE,EAAE,CACX,8GAA8G,EAC9G,iBAAiB,EACjB,SAAS,CACV,KACG,KAAK,YAGT,4BACY,uBAAuB,EACjC,SAAS,EAAC,uHAAuH,aAEhI,OAAO,CAAC,CAAC,CAAC,CACT,2BAAe,uBAAuB,EAAC,SAAS,EAAC,4BAA4B,YAC1E,OAAO,GACJ,CACP,CAAC,CAAC,CAAC,IAAI,EACR,yBAAa,oBAAoB,EAAC,SAAS,EAAC,0CAA0C,YACnF,QAAQ,GACP,EACH,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,CACrB,eAAK,SAAS,EAAC,kCAAkC,aAC9C,MAAM,CAAC,CAAC,CAAC,CACR,2BAAe,sBAAsB,EAAC,SAAS,EAAC,mBAAmB,YAChE,MAAM,GACH,CACP,CAAC,CAAC,CAAC,IAAI,EACP,SAAS,CAAC,CAAC,CAAC,CACX,iBAAQ,IAAI,EAAC,QAAQ,eAAW,uBAAuB,EAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,WAAW,CAAC,YACtH,YAAY,GACN,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,GACE,CACX,CAAA;AACH,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* THE DASHED LINE, named once (#382, spec §6.4).
|
|
4
|
+
*
|
|
5
|
+
* The 2026 Home draws one dashed hairline in four places: the empty state
|
|
6
|
+
* (`EmptyCreations`), the Add tile (`AddTile`), the invite banner
|
|
7
|
+
* (`DashedBanner`) and the invite circle (`InviteFaces`, and through it the
|
|
8
|
+
* header's "Invite" when nobody else is on the grid). A recipe each would drift
|
|
9
|
+
* the first time one of them was retuned, so this is the one spelling.
|
|
10
|
+
*
|
|
11
|
+
* The frame's slate (`--cg-slate-500`) on the default ground. That rung is
|
|
12
|
+
* declared at `:root` only and measures 1.71:1 on the purple panel, so inside
|
|
13
|
+
* `[data-cg-surface]` the line moves to `--cg-border-control`, which flips.
|
|
14
|
+
* This is the recipe `EmptyCreations` already had (#276), moved here.
|
|
15
|
+
*
|
|
16
|
+
* The dash itself is the browser's `border-dashed`, not Figma's `[3, 5]`: CSS
|
|
17
|
+
* cannot set a dash pattern on a border, and a rounded box's corners are where a
|
|
18
|
+
* repeating-gradient imitation breaks. An exact `[3, 5]` would need an SVG
|
|
19
|
+
* outline in every box; that is a call for the designer, not a default.
|
|
20
|
+
*/
|
|
21
|
+
declare const DASHED_LINE_CLASS = "border border-dashed border-steel in-data-[cg-surface=panel]:border-line in-data-[cg-surface=ink]:border-line";
|
|
22
|
+
/**
|
|
23
|
+
* A row of empty faces ending in a dashed "+" circle: "people could be here".
|
|
24
|
+
*
|
|
25
|
+
* The invite banner draws three empty faces and the dashed one (Figma
|
|
26
|
+
* `11351:6119`); the header's Invite control, when nobody else is on the grid,
|
|
27
|
+
* draws the dashed one alone (spec §3.3). Faces overlap by 12px, as
|
|
28
|
+
* `AvatarStack` does, and every later face paints over the one before it.
|
|
29
|
+
*
|
|
30
|
+
* Decoration: the whole row is `aria-hidden`. The Invite button or link beside
|
|
31
|
+
* it is what a reader hears.
|
|
32
|
+
*
|
|
33
|
+
* The empty faces are white with a 1px slate line. Figma strokes them OUTSIDE
|
|
34
|
+
* the 32px; drawn inside here, as every other bordered part in this library is,
|
|
35
|
+
* so a face is 32 and not 34.
|
|
36
|
+
*/
|
|
37
|
+
declare function InviteFaces({ placeholders, size, className, style, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
|
|
38
|
+
/** Empty faces before the dashed one. 0 draws the dashed circle alone. */
|
|
39
|
+
placeholders?: number;
|
|
40
|
+
/** The face diameter. */
|
|
41
|
+
size?: 24 | 32;
|
|
42
|
+
}): React.JSX.Element;
|
|
43
|
+
export { DASHED_LINE_CLASS, InviteFaces };
|
|
44
|
+
//# sourceMappingURL=dashed-line.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dashed-line.d.ts","sourceRoot":"","sources":["../../src/blocks/dashed-line.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,iBAAiB,kHAC0F,CAAA;AAEjH;;;;;;;;;;;;;;GAcG;AACH,iBAAS,WAAW,CAAC,EACnB,YAAgB,EAChB,IAAS,EACT,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,CAAA;CACf,qBA6BA;AAED,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { cn } from "../lib/cloudgrid-cn.js";
|
|
4
|
+
import { PlusIcon } from "./icons.js";
|
|
5
|
+
/**
|
|
6
|
+
* THE DASHED LINE, named once (#382, spec §6.4).
|
|
7
|
+
*
|
|
8
|
+
* The 2026 Home draws one dashed hairline in four places: the empty state
|
|
9
|
+
* (`EmptyCreations`), the Add tile (`AddTile`), the invite banner
|
|
10
|
+
* (`DashedBanner`) and the invite circle (`InviteFaces`, and through it the
|
|
11
|
+
* header's "Invite" when nobody else is on the grid). A recipe each would drift
|
|
12
|
+
* the first time one of them was retuned, so this is the one spelling.
|
|
13
|
+
*
|
|
14
|
+
* The frame's slate (`--cg-slate-500`) on the default ground. That rung is
|
|
15
|
+
* declared at `:root` only and measures 1.71:1 on the purple panel, so inside
|
|
16
|
+
* `[data-cg-surface]` the line moves to `--cg-border-control`, which flips.
|
|
17
|
+
* This is the recipe `EmptyCreations` already had (#276), moved here.
|
|
18
|
+
*
|
|
19
|
+
* The dash itself is the browser's `border-dashed`, not Figma's `[3, 5]`: CSS
|
|
20
|
+
* cannot set a dash pattern on a border, and a rounded box's corners are where a
|
|
21
|
+
* repeating-gradient imitation breaks. An exact `[3, 5]` would need an SVG
|
|
22
|
+
* outline in every box; that is a call for the designer, not a default.
|
|
23
|
+
*/
|
|
24
|
+
const DASHED_LINE_CLASS = "border border-dashed border-steel in-data-[cg-surface=panel]:border-line in-data-[cg-surface=ink]:border-line";
|
|
25
|
+
/**
|
|
26
|
+
* A row of empty faces ending in a dashed "+" circle: "people could be here".
|
|
27
|
+
*
|
|
28
|
+
* The invite banner draws three empty faces and the dashed one (Figma
|
|
29
|
+
* `11351:6119`); the header's Invite control, when nobody else is on the grid,
|
|
30
|
+
* draws the dashed one alone (spec §3.3). Faces overlap by 12px, as
|
|
31
|
+
* `AvatarStack` does, and every later face paints over the one before it.
|
|
32
|
+
*
|
|
33
|
+
* Decoration: the whole row is `aria-hidden`. The Invite button or link beside
|
|
34
|
+
* it is what a reader hears.
|
|
35
|
+
*
|
|
36
|
+
* The empty faces are white with a 1px slate line. Figma strokes them OUTSIDE
|
|
37
|
+
* the 32px; drawn inside here, as every other bordered part in this library is,
|
|
38
|
+
* so a face is 32 and not 34.
|
|
39
|
+
*/
|
|
40
|
+
function InviteFaces({ placeholders = 3, size = 32, className, style, ...props }) {
|
|
41
|
+
const box = { width: size, height: size };
|
|
42
|
+
const count = Math.max(0, Math.floor(placeholders));
|
|
43
|
+
return (_jsxs("span", { "data-slot": "invite-faces", "aria-hidden": "true", className: cn("inline-flex shrink-0 items-center", className), style: style, ...props, children: [Array.from({ length: count }, (_, i) => (_jsx("span", { "data-slot": "invite-faces-empty", className: cn("block shrink-0 rounded-pill border border-steel bg-card", i > 0 && "-ml-3"), style: box }, i))), _jsx("span", { "data-slot": "invite-faces-add", className: cn("flex shrink-0 items-center justify-center rounded-pill", DASHED_LINE_CLASS, count > 0 && "-ml-3"), style: box, children: _jsx(PlusIcon, { className: "size-4 text-steel" }) })] }));
|
|
44
|
+
}
|
|
45
|
+
export { DASHED_LINE_CLASS, InviteFaces };
|
|
46
|
+
//# sourceMappingURL=dashed-line.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dashed-line.js","sourceRoot":"","sources":["../../src/blocks/dashed-line.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE9C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,iBAAiB,GACrB,+GAA+G,CAAA;AAEjH;;;;;;;;;;;;;;GAcG;AACH,SAAS,WAAW,CAAC,EACnB,YAAY,GAAG,CAAC,EAChB,IAAI,GAAG,EAAE,EACT,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EAMT;IACC,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;IACzC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAA;IAEnD,OAAO,CACL,6BACY,cAAc,iBACZ,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,mCAAmC,EAAE,SAAS,CAAC,EAC7D,KAAK,EAAE,KAAK,KACR,KAAK,aAER,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACvC,4BAEY,oBAAoB,EAC9B,SAAS,EAAE,EAAE,CAAC,yDAAyD,EAAE,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,EAC1F,KAAK,EAAE,GAAG,IAHL,CAAC,CAIN,CACH,CAAC,EACF,4BACY,kBAAkB,EAC5B,SAAS,EAAE,EAAE,CAAC,wDAAwD,EAAE,iBAAiB,EAAE,KAAK,GAAG,CAAC,IAAI,OAAO,CAAC,EAChH,KAAK,EAAE,GAAG,YAEV,KAAC,QAAQ,IAAC,SAAS,EAAC,mBAAmB,GAAG,GACrC,IACF,CACR,CAAA;AACH,CAAC;AAED,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -57,6 +57,19 @@ import { EMPTY_CREATIONS_PREVIEWS } from "./empty-creations-previews.js";
|
|
|
57
57
|
* bytes ship as files under `@cloudgrid-io/ui/brand/creations/1.webp` to `4.webp`.
|
|
58
58
|
* The component inlines them as data URIs because a package has no public path:
|
|
59
59
|
* see `scripts/generate-creation-previews.mjs`.
|
|
60
|
+
*
|
|
61
|
+
* ## The plain look (#382)
|
|
62
|
+
*
|
|
63
|
+
* The 2026 Home's "I have no creations" frame (F1, `11323:8952`) drops the fan:
|
|
64
|
+
* a dashed box 320 tall at radius 20, one centred column 16 apart, the title at
|
|
65
|
+
* Tanker 32 (`text-title-32`, leading 1), the same line, and the 48px `cta` Add
|
|
66
|
+
* (`Button size="2xl"`) with its plus after the label. `look="plain"` asks for
|
|
67
|
+
* it; the fan stays the default so a consumer who does not ask sees no change.
|
|
68
|
+
*
|
|
69
|
+
* `secondaryAction` is a node under Add, in either look: the frame's "or
|
|
70
|
+
* onboard an agent". Its wrapper is Body in the muted rung, so a bare "or" reads
|
|
71
|
+
* muted and a link inside it brings its own colour (`ActionLink`, or a
|
|
72
|
+
* `CopyButton` styled with `ACTION_LINK_CLASS`).
|
|
60
73
|
*/
|
|
61
74
|
/** The heading and the line, as the frame writes them. */
|
|
62
75
|
declare const EMPTY_CREATIONS_TITLE = "No creations yet";
|
|
@@ -77,8 +90,12 @@ type EmptyCreationsProps = Omit<React.ComponentProps<"section">, "children"> & {
|
|
|
77
90
|
previews?: readonly string[];
|
|
78
91
|
/** The heading level. Default 2; pass 3 when the block sits under a section's h2. */
|
|
79
92
|
level?: 2 | 3 | 4;
|
|
93
|
+
/** `fan` (default): the 2025 box with the picture fan. `plain`: the 2026 Home's box. */
|
|
94
|
+
look?: "fan" | "plain";
|
|
95
|
+
/** Rendered under Add: the frame's "or onboard an agent". */
|
|
96
|
+
secondaryAction?: React.ReactNode;
|
|
80
97
|
};
|
|
81
|
-
declare function EmptyCreations({ onAdd, href, linkComponent, addLabel, previews, level, className, ...props }: EmptyCreationsProps): React.JSX.Element;
|
|
98
|
+
declare function EmptyCreations({ onAdd, href, linkComponent, addLabel, previews, level, look, secondaryAction, className, ...props }: EmptyCreationsProps): React.JSX.Element;
|
|
82
99
|
export { EmptyCreations, EMPTY_CREATIONS_DESCRIPTION, EMPTY_CREATIONS_PREVIEWS, EMPTY_CREATIONS_TITLE };
|
|
83
100
|
export type { EmptyCreationsProps };
|
|
84
101
|
//# sourceMappingURL=empty-creations.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"empty-creations.d.ts","sourceRoot":"","sources":["../../src/blocks/empty-creations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"empty-creations.d.ts","sourceRoot":"","sources":["../../src/blocks/empty-creations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAA;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AAEH,0DAA0D;AAC1D,QAAA,MAAM,qBAAqB,qBAAqB,CAAA;AAChD,QAAA,MAAM,2BAA2B,uDAAuD,CAAA;AAaxF,KAAK,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,kFAAkF;IAClF,KAAK,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAC5C,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mFAAmF;IACnF,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACjC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,qFAAqF;IACrF,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACjB,wFAAwF;IACxF,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAA;IACtB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AAED,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,aAAa,EACb,QAAgB,EAChB,QAAQ,EACR,KAAS,EACT,IAAY,EACZ,eAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAkKrB;AAED,OAAO,EAAE,cAAc,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,CAAA;AACvG,YAAY,EAAE,mBAAmB,EAAE,CAAA"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { Button } from "../ui/button.js";
|
|
4
4
|
import { PlusIcon } from "./icons.js";
|
|
5
5
|
import { cn } from "../lib/cloudgrid-cn.js";
|
|
6
|
+
import { DASHED_LINE_CLASS } from "./dashed-line.js";
|
|
6
7
|
import { EMPTY_CREATIONS_PREVIEWS } from "./empty-creations-previews.js";
|
|
7
8
|
/**
|
|
8
9
|
* The new-user empty state for "My creations" (#276): a dashed box holding a fan
|
|
@@ -61,15 +62,23 @@ import { EMPTY_CREATIONS_PREVIEWS } from "./empty-creations-previews.js";
|
|
|
61
62
|
* bytes ship as files under `@cloudgrid-io/ui/brand/creations/1.webp` to `4.webp`.
|
|
62
63
|
* The component inlines them as data URIs because a package has no public path:
|
|
63
64
|
* see `scripts/generate-creation-previews.mjs`.
|
|
65
|
+
*
|
|
66
|
+
* ## The plain look (#382)
|
|
67
|
+
*
|
|
68
|
+
* The 2026 Home's "I have no creations" frame (F1, `11323:8952`) drops the fan:
|
|
69
|
+
* a dashed box 320 tall at radius 20, one centred column 16 apart, the title at
|
|
70
|
+
* Tanker 32 (`text-title-32`, leading 1), the same line, and the 48px `cta` Add
|
|
71
|
+
* (`Button size="2xl"`) with its plus after the label. `look="plain"` asks for
|
|
72
|
+
* it; the fan stays the default so a consumer who does not ask sees no change.
|
|
73
|
+
*
|
|
74
|
+
* `secondaryAction` is a node under Add, in either look: the frame's "or
|
|
75
|
+
* onboard an agent". Its wrapper is Body in the muted rung, so a bare "or" reads
|
|
76
|
+
* muted and a link inside it brings its own colour (`ActionLink`, or a
|
|
77
|
+
* `CopyButton` styled with `ACTION_LINK_CLASS`).
|
|
64
78
|
*/
|
|
65
79
|
/** The heading and the line, as the frame writes them. */
|
|
66
80
|
const EMPTY_CREATIONS_TITLE = "No creations yet";
|
|
67
81
|
const EMPTY_CREATIONS_DESCRIPTION = "Your creations will show up here, along with stats";
|
|
68
|
-
/**
|
|
69
|
-
* The dashed hairline: the frame's slate on the default ground, a flipping
|
|
70
|
-
* border token on either surface.
|
|
71
|
-
*/
|
|
72
|
-
const DASHED_LINE = "border border-dashed border-steel in-data-[cg-surface=panel]:border-line in-data-[cg-surface=ink]:border-line";
|
|
73
82
|
/**
|
|
74
83
|
* The four picture slots, left to right, outside the "+" tile. `outer` slots
|
|
75
84
|
* are the ones that drop at narrow widths. The z-order rises towards the middle.
|
|
@@ -80,7 +89,7 @@ const PICTURE_SLOTS = [
|
|
|
80
89
|
{ side: "right", outer: false, className: "z-20 h-11.75 w-20.5 -ml-5" },
|
|
81
90
|
{ side: "right", outer: true, className: "z-10 h-9.5 w-16.5 -ml-5" },
|
|
82
91
|
];
|
|
83
|
-
function EmptyCreations({ onAdd, href, linkComponent, addLabel = "Add", previews, level = 2, className, ...props }) {
|
|
92
|
+
function EmptyCreations({ onAdd, href, linkComponent, addLabel = "Add", previews, level = 2, look = "fan", secondaryAction, className, ...props }) {
|
|
84
93
|
const sources = previews && previews.length > 0 ? previews : EMPTY_CREATIONS_PREVIEWS;
|
|
85
94
|
const Heading = `h${level}`;
|
|
86
95
|
const Link = linkComponent ?? "a";
|
|
@@ -93,14 +102,21 @@ function EmptyCreations({ onAdd, href, linkComponent, addLabel = "Add", previews
|
|
|
93
102
|
// rounded 16, which is `h-10 px-5 rounded-xl`; the label is the UI face, bold,
|
|
94
103
|
// at the 15px body-sm rung.
|
|
95
104
|
const buttonClass = "h-10 rounded-xl px-5 font-ui text-body-sm font-bold";
|
|
96
|
-
|
|
105
|
+
const secondary = secondaryAction !== undefined && secondaryAction !== null ? (_jsx("div", { "data-slot": "empty-creations-secondary", className: "m-0 font-body text-body-sm text-faint-strong", children: secondaryAction })) : null;
|
|
106
|
+
if (look === "plain") {
|
|
107
|
+
// The 2026 Add: the `2xl` rung (48 tall, 32 aside, radius 16), its plus
|
|
108
|
+
// after the label, 12 apart (the rung's gap).
|
|
109
|
+
const plainLabel = (_jsxs(_Fragment, { children: [addLabel, _jsx(PlusIcon, {})] }));
|
|
110
|
+
return (_jsx("section", { "data-slot": "empty-creations", "data-look": "plain", className: cn("flex min-h-80 w-full items-center justify-center rounded-container px-8 py-12 text-center", DASHED_LINE_CLASS, className), ...props, children: _jsxs("div", { "data-slot": "empty-creations-stack", className: "flex w-full flex-col items-center gap-4", children: [_jsx(Heading, { "data-slot": "empty-creations-title", className: "m-0 font-display font-heavy uppercase text-balance text-title-32 leading-none text-(--cg-text-accent)", children: EMPTY_CREATIONS_TITLE }), _jsx("p", { "data-slot": "empty-creations-description", className: "m-0 font-body text-body-sm text-pretty text-ink", children: EMPTY_CREATIONS_DESCRIPTION }), href !== undefined ? (_jsx(Button, { "data-slot": "empty-creations-add", variant: "cta", size: "2xl", render: _jsx(Link, { href: href }), nativeButton: false, role: "link", onClick: onAdd, children: plainLabel })) : (_jsx(Button, { "data-slot": "empty-creations-add", variant: "cta", size: "2xl", type: "button", onClick: onAdd, children: plainLabel })), secondary] }) }));
|
|
111
|
+
}
|
|
112
|
+
return (_jsx("section", { "data-slot": "empty-creations", className: cn("@container/empty-creations w-full rounded-md", DASHED_LINE_CLASS, className), ...props, children: _jsxs("div", { className: "flex flex-col items-center gap-6 px-8 py-20 text-center @max-sm/empty-creations:px-4 @max-sm/empty-creations:py-12", children: [_jsxs("div", { "data-slot": "empty-creations-fan", "aria-hidden": "true", className: "flex items-center justify-center", children: [picture(0), picture(1), _jsx("span", { "data-slot": "empty-creations-add-tile", className: cn("relative z-30 flex h-14 w-24.25 shrink-0 items-center justify-center rounded-md shadow-card", "bg-page in-data-[cg-surface=panel]:bg-panel in-data-[cg-surface=ink]:bg-code", DASHED_LINE_CLASS), children: _jsx(PlusIcon, { className: "size-5 text-steel in-data-[cg-surface=panel]:text-faint in-data-[cg-surface=ink]:text-faint" }) }), picture(2), picture(3)] }), _jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [_jsx(Heading, { "data-slot": "empty-creations-title", className: "m-0 font-display font-heavy uppercase text-balance text-display-md leading-display tracking-display text-(--cg-text-accent) @max-sm/empty-creations:text-display-sm", children: EMPTY_CREATIONS_TITLE }), _jsx("p", { "data-slot": "empty-creations-description", className: "m-0 font-body text-body-sm text-pretty text-ink", children: EMPTY_CREATIONS_DESCRIPTION })] }), href !== undefined ? (
|
|
97
113
|
/*
|
|
98
114
|
A real link rather than a click handler. Base UI's Button warns when
|
|
99
115
|
the rendered element is not a <button>, hence `nativeButton={false}`,
|
|
100
116
|
and it stamps role="button" on a non-native target, put back to
|
|
101
117
|
`link` because this one navigates. Same shape as SignInOptions.
|
|
102
118
|
*/
|
|
103
|
-
_jsx(Button, { "data-slot": "empty-creations-add", variant: "cta", className: buttonClass, render: _jsx(Link, { href: href }), nativeButton: false, role: "link", onClick: onAdd, children: addLabel })) : (_jsx(Button, { "data-slot": "empty-creations-add", variant: "cta", className: buttonClass, type: "button", onClick: onAdd, children: addLabel }))] }) }));
|
|
119
|
+
_jsx(Button, { "data-slot": "empty-creations-add", variant: "cta", className: buttonClass, render: _jsx(Link, { href: href }), nativeButton: false, role: "link", onClick: onAdd, children: addLabel })) : (_jsx(Button, { "data-slot": "empty-creations-add", variant: "cta", className: buttonClass, type: "button", onClick: onAdd, children: addLabel })), secondary] }) }));
|
|
104
120
|
}
|
|
105
121
|
export { EmptyCreations, EMPTY_CREATIONS_DESCRIPTION, EMPTY_CREATIONS_PREVIEWS, EMPTY_CREATIONS_TITLE };
|
|
106
122
|
//# sourceMappingURL=empty-creations.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"empty-creations.js","sourceRoot":"","sources":["../../src/blocks/empty-creations.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"empty-creations.js","sourceRoot":"","sources":["../../src/blocks/empty-creations.tsx"],"names":[],"mappings":"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"}
|
|
@@ -435,6 +435,32 @@ export declare const ENTITY_KIND_TINT: Record<EntityKind, string>;
|
|
|
435
435
|
*/
|
|
436
436
|
export declare const ENTITY_CARD_SIZE_ORDER: readonly ["default", "compact", "row"];
|
|
437
437
|
export type EntityCardSize = (typeof ENTITY_CARD_SIZE_ORDER)[number];
|
|
438
|
+
/**
|
|
439
|
+
* The rail tiles (#382), larger first. A type of their own rather than two
|
|
440
|
+
* more entries in `EntityCardSize`: a consumer that keeps a
|
|
441
|
+
* `Record<EntityCardSize, …>` of grid tracks (the Console's `entityCardTrack`)
|
|
442
|
+
* would otherwise stop compiling on upgrade, and a tile has no grid track.
|
|
443
|
+
*/
|
|
444
|
+
export declare const ENTITY_CARD_TILE_SIZE_ORDER: readonly ["tile-lg", "tile"];
|
|
445
|
+
export type EntityCardTileSize = (typeof ENTITY_CARD_TILE_SIZE_ORDER)[number];
|
|
446
|
+
/**
|
|
447
|
+
* THE TWO TILES (#382, spec §4.4 and §4.8, Figma "Tile" `4122:250`).
|
|
448
|
+
*
|
|
449
|
+
* The 2026 Home lays cards in horizontal rails, and a rail needs a card whose
|
|
450
|
+
* box is fixed rather than one that stretches to a grid track: 329 x 242 under
|
|
451
|
+
* My Creations (`tile-lg`), 250 x 184 under On the Grid (`tile`). Both are the
|
|
452
|
+
* media card unchanged inside: the 159/92 picture at an 11px corner, the 20px
|
|
453
|
+
* kind badge, the name and the dot at rest, the panel on hover and focus.
|
|
454
|
+
*
|
|
455
|
+
* What differs: the box is fixed and does not shrink; `tile-lg` puts 16 rather
|
|
456
|
+
* than 12 under the picture and centres its name row in the height left over,
|
|
457
|
+
* as the frame does; neither draws a stat rule or a footer, because at a fixed
|
|
458
|
+
* height those would push the name out of the box. The count a tile does show
|
|
459
|
+
* is `restStat`, on the name row.
|
|
460
|
+
*
|
|
461
|
+
* `AddTile` reads this table, so the dashed Add tile is the same box.
|
|
462
|
+
*/
|
|
463
|
+
export declare const ENTITY_CARD_TILE_BOX: Record<EntityCardTileSize, string>;
|
|
438
464
|
/**
|
|
439
465
|
* The kind badge on its own, exported because a listing header, a detail page or
|
|
440
466
|
* a row may want the same mark without a card around it.
|
|
@@ -470,7 +496,7 @@ declare function EntityKindBadge({ kind, size, className, ...props }: Omit<React
|
|
|
470
496
|
kind: EntityKind;
|
|
471
497
|
size?: "sm" | "md";
|
|
472
498
|
}): React.JSX.Element;
|
|
473
|
-
declare function EntityCard({ title, slug, description, size, titleLines, descriptionLines, status, statusDot, headerActions, stats, seed, previewUrl, kind, reveal, openDisabledReason, dashboardHref, settingsHref, primaryAction, linkComponent, creator, panelMeta, href, ariaLabel, meta, footer, className, children, ...props }: Omit<React.ComponentProps<"div">, "ref" | "title"> & {
|
|
499
|
+
declare function EntityCard({ title, slug, description, size, titleLines, descriptionLines, status, statusDot, headerActions, stats, restStat, seed, previewUrl, kind, reveal, openDisabledReason, dashboardHref, settingsHref, primaryAction, linkComponent, creator, panelMeta, href, ariaLabel, meta, footer, className, children, ...props }: Omit<React.ComponentProps<"div">, "ref" | "title"> & {
|
|
474
500
|
title: string;
|
|
475
501
|
/** The entity's address, in the mono utility face. */
|
|
476
502
|
slug?: string;
|
|
@@ -481,7 +507,7 @@ declare function EntityCard({ title, slug, description, size, titleLines, descri
|
|
|
481
507
|
* list form. See the note at the top of this file for the grid track each one
|
|
482
508
|
* is meant for, and for what `row` deliberately does differently.
|
|
483
509
|
*/
|
|
484
|
-
size?: EntityCardSize;
|
|
510
|
+
size?: EntityCardSize | EntityCardTileSize;
|
|
485
511
|
titleLines?: 1 | 2;
|
|
486
512
|
/**
|
|
487
513
|
* Ignored on `compact` and on `row`, both of which always clamp to one line.
|
|
@@ -531,6 +557,15 @@ declare function EntityCard({ title, slug, description, size, titleLines, descri
|
|
|
531
557
|
*/
|
|
532
558
|
headerActions?: React.ReactNode;
|
|
533
559
|
stats?: EntityCardStat[];
|
|
560
|
+
/**
|
|
561
|
+
* One count shown AT REST, on the name row after the dot (#382): Home's
|
|
562
|
+
* views, a 14px glyph and the number at 13px, so the number explains itself.
|
|
563
|
+
* The glyph is decoration and `label` is announced, as for `stats`. The rest
|
|
564
|
+
* name row is the revealed media card's (`reveal`; a tile always has it), so
|
|
565
|
+
* that is where it is drawn, at every media size; a card without a panel
|
|
566
|
+
* keeps `stats`, and a row ignores it.
|
|
567
|
+
*/
|
|
568
|
+
restStat?: EntityCardStat;
|
|
534
569
|
/**
|
|
535
570
|
* The entity's stable id. Its presence is what turns the preview region on,
|
|
536
571
|
* and its value is what picks the identity look. Pass the id, not the title.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"entity-card.d.ts","sourceRoot":"","sources":["../../src/blocks/entity-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgXG;AAEH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,0CAA2C,CAAA;AAEzE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAI5F,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAIxD,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAIvD,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB,wCAAyC,CAAA;AAE5E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"entity-card.d.ts","sourceRoot":"","sources":["../../src/blocks/entity-card.tsx"],"names":[],"mappings":"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"}
|