@acronis-platform/ui-react 5.1.0 → 5.1.1
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.
|
@@ -14,7 +14,7 @@ var s = {
|
|
|
14
14
|
let m = l ? n[l] : void 0, h = u ?? s[c];
|
|
15
15
|
return /* @__PURE__ */ a("div", {
|
|
16
16
|
ref: p,
|
|
17
|
-
className: e("flex size-full min-h-32 flex-col items-center
|
|
17
|
+
className: e("flex size-full min-h-32 flex-col items-center gap-2 text-center text-sm leading-6 text-foreground", c === "error" ? "overflow-y-auto overflow-x-hidden" : "justify-center", r),
|
|
18
18
|
...f,
|
|
19
19
|
role: c === "error" ? "alert" : "status",
|
|
20
20
|
"aria-live": c === "error" ? "assertive" : "polite",
|
|
@@ -24,12 +24,20 @@ var s = {
|
|
|
24
24
|
"aria-hidden": !0
|
|
25
25
|
}),
|
|
26
26
|
c === "empty" && m && /* @__PURE__ */ i(m, { className: "max-h-full w-full max-w-[220px] shrink text-[var(--ui-background-status-off)]" }),
|
|
27
|
-
c === "error"
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
27
|
+
c === "error" ? /* @__PURE__ */ a("div", {
|
|
28
|
+
className: "my-auto flex w-full flex-col items-center gap-2",
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ i(o, {
|
|
31
|
+
size: 24,
|
|
32
|
+
className: "shrink-0 text-[var(--ui-glyph-on-status-warning)]"
|
|
33
|
+
}),
|
|
34
|
+
/* @__PURE__ */ i("p", {
|
|
35
|
+
className: "max-w-full break-words",
|
|
36
|
+
children: h
|
|
37
|
+
}),
|
|
38
|
+
d
|
|
39
|
+
]
|
|
40
|
+
}) : /* @__PURE__ */ i("p", { children: h })
|
|
33
41
|
]
|
|
34
42
|
});
|
|
35
43
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-state.js","names":[],"sources":["../../../../src/components/ui/chart-state/chart-state.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CircleWarningIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Spinner } from '../spinner';\nimport {\n CHART_STATE_ILLUSTRATIONS,\n type ChartStateVariant,\n} from './chart-state-illustrations';\n\n// A shared loading / empty / error placeholder for the chart types. A chart can\n// only render once recharts' `ResponsiveContainer` has data and real dimensions,\n// so every type needs the same \"there's nothing to plot yet\" surface — this is\n// that surface, dropped in place of the chart inside the same sized slot.\n//\n// Ported from the Figma InputSelect dropdown states (the reference the task\n// points at) and kept visually in step with the shipped `InputSelectStatus`\n// sibling: the empty / error states use the same 24px glyph + `text-sm` label\n// and the same `--ui-glyph-on-status-*` icon tokens. (Loading uses the shared\n// `Spinner` — brand blue, larger — not the sibling's inline gray ring.) No\n// `--ui-chart-*` tier exists yet, so it themes from existing semantic tokens\n// directly:\n// • label -> text-foreground (--ui-text-on-surface-primary)\n// • empty icon -> --ui-glyph-on-status-info\n// • error icon -> --ui-glyph-on-status-warning\n// • loading -> the shared Spinner (brand action blue)\n// The generic full-page `Empty` component is the larger, page-level sibling;\n// this one is compact and fills a chart slot.\n\nconst DEFAULT_MESSAGE: Record<ChartStateProps['state'], string> = {\n loading: 'Data is loading…',\n empty: 'No data found',\n error: 'Something went wrong',\n};\n\nexport interface ChartStateProps extends Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'children'\n> {\n /** Which placeholder to show. Drives the leading glyph and default label. */\n state: 'loading' | 'empty' | 'error';\n /**\n * Which chart the slot holds. `empty` then draws that type's silhouette\n * instead of the generic inbox glyph — the design defines one per chart type.\n * Ignored by `loading` and `error`, which share one treatment.\n */\n variant?: ChartStateVariant;\n /**\n * Text shown below the illustration or glyph. Defaults to `\"Data is\n * loading…\"` / `\"No data found\"` / `\"Something went wrong\"` based on\n * `state`. Pass a value to override for any state.\n */\n description?: React.ReactNode;\n /** Trailing action (e.g. a \"Try again\" button) — shown for `error` only. */\n action?: React.ReactNode;\n}\n\nconst ChartState = React.forwardRef<HTMLDivElement, ChartStateProps>(\n (\n { className, state, variant, description, action, ...props },\n ref\n ) => {\n const Illustration = variant\n ? CHART_STATE_ILLUSTRATIONS[variant]\n : undefined;\n const caption = description ?? DEFAULT_MESSAGE[state];\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex size-full min-h-32 flex-col items-center
|
|
1
|
+
{"version":3,"file":"chart-state.js","names":[],"sources":["../../../../src/components/ui/chart-state/chart-state.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CircleWarningIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Spinner } from '../spinner';\nimport {\n CHART_STATE_ILLUSTRATIONS,\n type ChartStateVariant,\n} from './chart-state-illustrations';\n\n// A shared loading / empty / error placeholder for the chart types. A chart can\n// only render once recharts' `ResponsiveContainer` has data and real dimensions,\n// so every type needs the same \"there's nothing to plot yet\" surface — this is\n// that surface, dropped in place of the chart inside the same sized slot.\n//\n// Ported from the Figma InputSelect dropdown states (the reference the task\n// points at) and kept visually in step with the shipped `InputSelectStatus`\n// sibling: the empty / error states use the same 24px glyph + `text-sm` label\n// and the same `--ui-glyph-on-status-*` icon tokens. (Loading uses the shared\n// `Spinner` — brand blue, larger — not the sibling's inline gray ring.) No\n// `--ui-chart-*` tier exists yet, so it themes from existing semantic tokens\n// directly:\n// • label -> text-foreground (--ui-text-on-surface-primary)\n// • empty icon -> --ui-glyph-on-status-info\n// • error icon -> --ui-glyph-on-status-warning\n// • loading -> the shared Spinner (brand action blue)\n// The generic full-page `Empty` component is the larger, page-level sibling;\n// this one is compact and fills a chart slot.\n\nconst DEFAULT_MESSAGE: Record<ChartStateProps['state'], string> = {\n loading: 'Data is loading…',\n empty: 'No data found',\n error: 'Something went wrong',\n};\n\nexport interface ChartStateProps extends Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'children'\n> {\n /** Which placeholder to show. Drives the leading glyph and default label. */\n state: 'loading' | 'empty' | 'error';\n /**\n * Which chart the slot holds. `empty` then draws that type's silhouette\n * instead of the generic inbox glyph — the design defines one per chart type.\n * Ignored by `loading` and `error`, which share one treatment.\n */\n variant?: ChartStateVariant;\n /**\n * Text shown below the illustration or glyph. Defaults to `\"Data is\n * loading…\"` / `\"No data found\"` / `\"Something went wrong\"` based on\n * `state`. Pass a value to override for any state.\n */\n description?: React.ReactNode;\n /** Trailing action (e.g. a \"Try again\" button) — shown for `error` only. */\n action?: React.ReactNode;\n}\n\nconst ChartState = React.forwardRef<HTMLDivElement, ChartStateProps>(\n (\n { className, state, variant, description, action, ...props },\n ref\n ) => {\n const Illustration = variant\n ? CHART_STATE_ILLUSTRATIONS[variant]\n : undefined;\n const caption = description ?? DEFAULT_MESSAGE[state];\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex size-full min-h-32 flex-col items-center gap-2 text-center text-sm leading-6 text-foreground',\n // Error: scroll long diagnostic text instead of overflowing the card.\n // Loading/empty keep centered — their content is always compact.\n state === 'error'\n ? 'overflow-y-auto overflow-x-hidden'\n : 'justify-center',\n className\n )}\n {...props}\n // The status/alert live-region contract is intrinsic to the state, so it\n // wins over any consumer-passed a11y prop (spread above). No `aria-busy`\n // here: this element IS the live region, and some AT defer announcing a\n // busy region's content until busy clears — but this placeholder is\n // unmounted (swapped for the chart) rather than un-busied, so a busy flag\n // would risk swallowing the \"Data is loading…\" announcement. A consumer\n // that wants a busy signal sets `aria-busy` on the chart-slot container.\n role={state === 'error' ? 'alert' : 'status'}\n aria-live={state === 'error' ? 'assertive' : 'polite'}\n >\n {/* aria-hidden: the root is already the loading live region (+ the label),\n so the Spinner's own role=\"status\"/sr-only would double-announce. */}\n {state === 'loading' && <Spinner size=\"lg\" aria-hidden />}\n {state === 'empty' && Illustration && (\n // The tone is set once here, and every path inside is `currentColor`,\n // so brand and theme overrides follow. Figma binds the artwork to\n // `components/Avatar/color/blue`; this is the semantic token with the\n // identical light/dark pair, and \"status off\" is what an empty widget\n // is — referencing Avatar's tier from a chart would be a coupling with\n // no meaning behind it.\n // Scales with the slot rather than sitting at the mockup's 147×92:\n // the silhouette is the whole point of a per-type empty state, so it\n // takes the room the card gives it, capped so it stays a thumbnail\n // in a wide widget instead of a poster.\n <Illustration className=\"max-h-full w-full max-w-[220px] shrink text-[var(--ui-background-status-off)]\" />\n )}\n {/* Error content is wrapped so `my-auto` can center it when the card\n is tall (margins split the space) yet collapse to top-aligned when\n the text overflows (margins collapse to 0 → scrollable from the\n top). `justify-center` alone would push the icon above the visible\n area on overflow; `justify-start` alone would top-align even short\n messages. `shrink-0` on the icon prevents flex from compressing it\n when the description is long. */}\n {state === 'error' ? (\n <div className=\"my-auto flex w-full flex-col items-center gap-2\">\n <CircleWarningIcon\n size={24}\n className=\"shrink-0 text-[var(--ui-glyph-on-status-warning)]\"\n />\n <p className=\"max-w-full break-words\">{caption}</p>\n {action}\n </div>\n ) : (\n <p>{caption}</p>\n )}\n </div>\n );\n }\n);\nChartState.displayName = 'ChartState';\n\nexport { ChartState };\n"],"mappings":";;;;;;;;AA+BA,IAAM,IAA4D;CAChE,SAAS;CACT,OAAO;CACP,OAAO;AACT,GAwBM,IAAa,EAAM,YAErB,EAAE,cAAW,UAAO,YAAS,gBAAa,WAAQ,GAAG,KACrD,MACG;CACH,IAAM,IAAe,IACjB,EAA0B,KAC1B,KAAA,GACE,IAAU,KAAe,EAAgB;CAE/C,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,qGAGA,MAAU,UACN,sCACA,kBACJ,CACF;EACA,GAAI;EAQJ,MAAM,MAAU,UAAU,UAAU;EACpC,aAAW,MAAU,UAAU,cAAc;EApB/C,UAAA;GAwBG,MAAU,aAAa,kBAAC,GAAD;IAAS,MAAK;IAAK,eAAA;GAAa,CAAA;GACvD,MAAU,WAAW,KAWpB,kBAAC,GAAD,EAAc,WAAU,gFAAiF,CAAA;GAS1G,MAAU,UACT,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MACE,MAAM;MACN,WAAU;KACX,CAAA;KACD,kBAAC,KAAD;MAAG,WAAU;MAA0B,UAAA;KAAW,CAAA;KACjD;IACE;GAEL,CAAA,IAAA,kBAAC,KAAD,EAAA,UAAI,EAAW,CAAA;EAEd;;AAET,CACF;AACA,EAAW,cAAc"}
|
package/dist/llms/chart-state.md
CHANGED
|
@@ -72,8 +72,10 @@ function Sales({ status, data, config, refetch }) {
|
|
|
72
72
|
```
|
|
73
73
|
|
|
74
74
|
The three states share one compact layout: a leading glyph (spinner / inbox /
|
|
75
|
-
warning) over a centered label. Pass `
|
|
76
|
-
label, and `action` to add a retry affordance to the error state.
|
|
75
|
+
warning) over a centered label. Pass `description` to override a state's default
|
|
76
|
+
label, and `action` to add a retry affordance to the error state. Long unbroken
|
|
77
|
+
error descriptions (CTI paths, API URLs) wrap at word boundaries and scroll
|
|
78
|
+
vertically when they exceed the slot height.
|
|
77
79
|
|
|
78
80
|
## Props
|
|
79
81
|
|
|
@@ -112,8 +114,19 @@ label, and `action` to add a retry affordance to the error state.
|
|
|
112
114
|
### Layout
|
|
113
115
|
|
|
114
116
|
- **Given** any state, **when** placed in a sized slot (the same box a chart
|
|
115
|
-
would occupy), **then** the block fills it (`size-full`)
|
|
116
|
-
|
|
117
|
+
would occupy), **then** the block fills it (`size-full`) with a `min-h-32`
|
|
118
|
+
floor so it stays legible in an unsized parent.
|
|
119
|
+
- **Given** `state="loading"` or `state="empty"`, **when** rendered, **then**
|
|
120
|
+
the content is vertically centered in the slot (`justify-center`).
|
|
121
|
+
- **Given** `state="error"`, **when** the description is short enough to fit,
|
|
122
|
+
**then** the content is vertically centered via auto margins (`my-auto`).
|
|
123
|
+
- **Given** `state="error"` with a long unbroken `description` (e.g. CTI error
|
|
124
|
+
paths, API URLs), **when** the text overflows the slot height, **then** the
|
|
125
|
+
auto margins collapse and the icon stays anchored at the top, with vertical
|
|
126
|
+
scroll (`overflow-y: auto`) so the full diagnostic text is accessible. Long
|
|
127
|
+
unbroken strings wrap at word boundaries (`overflow-wrap: break-word`),
|
|
128
|
+
breaking mid-word only when a single token cannot fit on one line.
|
|
129
|
+
`overflow-x: hidden` prevents any horizontal scrollbar.
|
|
117
130
|
|
|
118
131
|
### Per-type empty states
|
|
119
132
|
|
package/dist/llms.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Acronis UI Kit for React — LLM Reference
|
|
2
2
|
|
|
3
|
-
> `@acronis-platform/ui-react` v5.1.
|
|
3
|
+
> `@acronis-platform/ui-react` v5.1.1
|
|
4
4
|
|
|
5
5
|
Machine-readable component reference compiled from framework-agnostic specs.
|
|
6
6
|
Each entry links to a self-contained markdown file with props, behavior,
|