npm - @acronis-platform/ui-react - Versions diffs - 5.5.9 → 6.0.0 - Mend

@acronis-platform/ui-react 5.5.9 → 6.0.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.

Files changed (29) hide show

package/dist/components/ui/chart/chart.js +14 -11
package/dist/components/ui/chart/chart.js.map +1 -1
package/dist/components/ui/chart-state/chart-state.js +47 -37
package/dist/components/ui/chart-state/chart-state.js.map +1 -1
package/dist/components/ui/chart-widget/chart-widget.js +21 -23
package/dist/components/ui/chart-widget/chart-widget.js.map +1 -1
package/dist/components/ui/dialog/dialog.js +45 -32
package/dist/components/ui/dialog/dialog.js.map +1 -1
package/dist/components/ui/pie-chart/pie-chart.js +88 -84
package/dist/components/ui/pie-chart/pie-chart.js.map +1 -1
package/dist/index.js +86 -87
package/dist/llms/chart-state.md +81 -164
package/dist/llms/chart-widget.md +27 -25
package/dist/llms/dialog-root.md +40 -13
package/dist/llms/dialog.md +26 -1
package/dist/llms.txt +3 -3
package/dist/react.js +86 -87
package/dist/src/components/ui/chart/chart.d.ts +3 -3
package/dist/src/components/ui/chart-state/chart-state.d.ts +5 -14
package/dist/src/components/ui/chart-state/index.d.ts +0 -1
package/dist/src/components/ui/chart-widget/chart-widget.d.ts +10 -15
package/dist/src/components/ui/dialog/dialog.d.ts +9 -0
package/dist/src/components/ui/dialog/dialog.docs.d.ts +5 -1
package/dist/src/components/ui/pie-chart/pie-chart.d.ts +1 -1
package/dist/ui-react.css +1 -1
package/package.json +13 -13
package/dist/components/ui/chart-state/chart-state-illustrations.js +0 -412
package/dist/components/ui/chart-state/chart-state-illustrations.js.map +0 -1
package/dist/src/components/ui/chart-state/chart-state-illustrations.d.ts +0 -6

package/dist/components/ui/dialog/dialog.js CHANGED Viewed

@@ -11,12 +11,21 @@ import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 import { TimesIcon as f } from "@acronis-platform/icons-react/stroke-mono";
 import { Dialog as p } from "@base-ui/react/dialog";
 //#region src/components/ui/dialog/dialog.tsx
-var m = n("fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-96px)] w-full min-w-[var(--ui-dialog-container-width-min)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[var(--ui-dialog-container-border-radius)] bg-[var(--ui-dialog-container-color)] text-foreground shadow-lg duration-200 transition-[scale] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[color-mix(in_oklab,var(--ui-background-backdrop-screen)_36%,transparent)] dark:after:bg-[color-mix(in_oklab,var(--ui-background-backdrop-screen)_80%,transparent)] after:opacity-0 after:transition-opacity after:duration-200 after:content-[\"\"] data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[nested-dialog-open]:scale-[0.96] data-[nested-dialog-open]:after:opacity-100 dark:data-[nested]:border dark:data-[nested]:border-[var(--ui-dialog-header-border-color)]", {
-	variants: { size: {
-		sm: "max-w-[min(var(--ui-dialog-container-size-sm),calc(100dvw-96px))]",
-		large: "max-w-[min(832px,calc(100dvw-96px))]"
-	} },
-	defaultVariants: { size: "sm" }
+var m = n("fixed left-1/2 z-50 flex max-h-[calc(100dvh-96px)] w-full min-w-[var(--ui-dialog-container-width-min)] -translate-x-1/2 flex-col overflow-hidden rounded-[var(--ui-dialog-container-border-radius)] bg-[var(--ui-dialog-container-color)] text-foreground shadow-lg duration-200 transition-[scale] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[color-mix(in_oklab,var(--ui-background-backdrop-screen)_36%,transparent)] dark:after:bg-[color-mix(in_oklab,var(--ui-background-backdrop-screen)_80%,transparent)] after:opacity-0 after:transition-opacity after:duration-200 after:content-[\"\"] data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[nested-dialog-open]:scale-[0.96] data-[nested-dialog-open]:after:opacity-100 dark:data-[nested]:border dark:data-[nested]:border-[var(--ui-dialog-header-border-color)]", {
+	variants: {
+		size: {
+			sm: "max-w-[min(var(--ui-dialog-container-size-sm),calc(100dvw-96px))]",
+			large: "max-w-[min(832px,calc(100dvw-96px))]"
+		},
+		verticalAlign: {
+			center: "top-1/2 -translate-y-1/2",
+			top: "top-[48px]"
+		}
+	},
+	defaultVariants: {
+		size: "sm",
+		verticalAlign: "center"
+	}
 }), h = p.Root;
 p.Trigger, p.Portal;
 var g = p.Close, _ = c.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ u(p.Backdrop, {
@@ -25,18 +34,21 @@ var g = p.Close, _ = c.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */
 	...n
 }));
 _.displayName = "DialogOverlay";
-var v = c.forwardRef(({ className: n, children: r, size: i, portal: a = !0, portalContainer: o, keepMounted: s, ...c }, f) => {
-	let h = t(), g = o ?? h, v = /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(_, {}), /* @__PURE__ */ u(p.Popup, {
-		ref: f,
-		className: e(m({ size: i }), n),
-		...c,
+var v = c.forwardRef(({ className: n, children: r, size: i, verticalAlign: a, portal: o = !0, portalContainer: s, keepMounted: c, ...f }, h) => {
+	let g = t(), v = s ?? g, y = /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(_, {}), /* @__PURE__ */ u(p.Popup, {
+		ref: h,
+		className: e(m({
+			size: i,
+			verticalAlign: a ?? "center"
+		}), n),
+		...f,
 		children: r
 	})] });
-	return a ? /* @__PURE__ */ u(p.Portal, {
-		container: g,
-		keepMounted: s,
-		children: v
-	}) : v;
+	return o ? /* @__PURE__ */ u(p.Portal, {
+		container: v,
+		keepMounted: c,
+		children: y
+	}) : y;
 });
 v.displayName = "DialogContent";
 var y = c.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ u("div", {
@@ -183,37 +195,38 @@ var O = {
 		primaryLabel: "Confirm",
 		primaryVariant: "default"
 	}
-}, k = c.forwardRef(({ variant: t = "default", hasLoading: n = !1, loadingLabel: r, hasHeader: i = !0, hasFooter: o = !0, children: c, title: l, objectName: f, objectNameLabel: p, secondaryLabel: m, primaryLabel: g, onPrimaryAction: _, footer: y, closeLabel: b, size: x, portal: C, portalContainer: w, keepMounted: k, className: A, ...j }, M) => {
-	let N = O[t], P = typeof N.title == "function" ? N.title(f) : N.title, F = typeof N.body == "function" ? N.body(f, p) : N.body, I = c ?? F, L = l ?? P, R = m ?? N.secondaryLabel, z = g ?? N.primaryLabel, B = x ?? (t === "wide" ? "large" : "sm");
+}, k = c.forwardRef(({ variant: t = "default", hasLoading: n = !1, loadingLabel: r, hasHeader: i = !0, hasFooter: o = !0, children: c, title: l, objectName: f, objectNameLabel: p, secondaryLabel: m, primaryLabel: g, onPrimaryAction: _, footer: y, closeLabel: b, size: x, verticalAlign: C, portal: w, portalContainer: k, keepMounted: A, className: j, ...M }, N) => {
+	let P = O[t], F = typeof P.title == "function" ? P.title(f) : P.title, I = typeof P.body == "function" ? P.body(f, p) : P.body, L = c ?? I, R = l ?? F, z = m ?? P.secondaryLabel, B = g ?? P.primaryLabel, V = x ?? (t === "wide" ? "large" : "sm");
 	return /* @__PURE__ */ u(h, {
-		...j,
+		...M,
 		children: /* @__PURE__ */ d(v, {
-			ref: M,
-			size: B,
-			portal: C,
-			portalContainer: w,
-			keepMounted: k,
-			className: A,
+			ref: N,
+			size: V,
+			verticalAlign: C,
+			portal: w,
+			portalContainer: k,
+			keepMounted: A,
+			className: j,
 			"aria-busy": n || void 0,
 			children: [
 				i ? /* @__PURE__ */ u(T, {
-					title: L,
+					title: R,
 					closeLabel: b
 				}) : /* @__PURE__ */ u(S, {
 					className: "sr-only",
-					children: L
+					children: R
 				}),
 				/* @__PURE__ */ u(E, {
 					inert: n,
-					children: I
+					children: L
 				}),
 				o && /* @__PURE__ */ u(a, {
 					inert: n,
 					children: y ?? /* @__PURE__ */ u(D, {
-						secondaryLabel: R,
-						primaryLabel: z,
-						primaryVariant: N.primaryVariant,
-						primaryCloses: N.primaryCloses,
+						secondaryLabel: z,
+						primaryLabel: B,
+						primaryVariant: P.primaryVariant,
+						primaryCloses: P.primaryCloses,
 						onPrimaryAction: _
 					})
 				}),

package/dist/components/ui/dialog/dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog.js","names":[],"sources":["../../../../src/components/ui/dialog/dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { DialogFooterDefault } from '../dialog-footer-default';\nimport { InputText } from '../input-text';\nimport { Loading } from '../loading';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `dialog`\n// (packages/ui-legacy/src/components/ui/dialog.tsx). A modal overlay built on\n// the Base UI Dialog primitive (keyboard, focus trap, scroll lock, ARIA come\n// from Base UI). A `--ui-dialog-` / `--ui-button-icon-` token tier covers the\n// container + close button (reconciled against the Figma \"DialogDefault\" node,\n// 6343:58898); the composable DialogRoot / DialogHeaderRoot / DialogFooterRoot\n// / DialogBodyRoot parts below are internal-only (no public export, no Figma\n// node of their own) and keep the prior semantic-token approach — not to be\n// confused with the recipe-local `DialogHeader`/`DialogBody` further down,\n// which back the public `Dialog` and are reconciled against Figma:\n// • overlay -> var(--ui-background-backdrop-screen) (legacy `bg-black/80`)\n// • popup -> var(--ui-dialog-container-color) / var(--ui-dialog-container-border-radius)\n// • header / footer -> bg-background = --ui-background-surface-primary (white\n// bars over the muted body), divided by border-border\n// • title -> text-foreground / description -> text-muted-foreground\n// • close -> var(--ui-button-icon-global-icon-color-) (idle/hover/active\n// share one blue in the default brand), bg via\n// var(--ui-button-icon-global-container-color-), focus ring var(--ui-focus-primary)\n// Enter/exit animations use `tw-animate-css` (imported in styles/index.css),\n// keyed to Base UI's data-[open] / data-[closed] state attributes — overlay\n// fades, popup fades + zooms. Those keyframes only animate `transform`/\n// `opacity`, so the nested-dialog recede below can safely live on the CSS\n// `scale` property + an `::after` scrim without fighting them.\n//\n// Nested dialogs: Base UI flags a dialog as nested purely by React-tree\n// position (`Boolean(parentDialogRootContext)` in DialogRoot) and then\n// deliberately skips rendering that dialog's own backdrop, so stacked\n// dialogs don't darken progressively. To compensate, Base UI sets\n// `data-nested-dialog-open` (plus a `--nested-dialogs` count) on the PARENT\n// popup while a nested dialog is open, expecting the consuming library to\n// give the parent a \"recede\" treatment for a visible depth cue. That's what\n// the data-[nested-dialog-open] rules below do: the parent popup scales\n// down slightly and gets a token-tinted scrim (a reduced-opacity mix of the\n// same --ui-background-backdrop-screen the overlay uses, not a hardcoded\n// color) while the child — which keeps its own backdrop suppressed — sits\n// on top. Stacked-modal depth reads through relative layer contrast, so the\n// scrim is theme-split in approach, not just strength: in light the parent\n// dims (36% of the backdrop token reads clearly over the white container).\n// In dark the container and the backdrop token are the same near-black, so\n// no scrim percentage can separate the layers — and repainting the nested\n// container with a lighter tier token would flatten its header/footer\n// chrome, whose surfaces share those very values. There the separation\n// comes from the Dialog tier's hairline border on the nested popup (an\n// edge stroke that follows each brand's dialog chrome), while the parent\n// keeps the stronger 80% scrim mainly to fade its content.\n// `size` has two values: `sm` (512px, the Figma\n// default, backed by `--ui-dialog-container-size-sm`) and `large` (832px) — the\n// latter predates the Figma node and has no token; it's kept as a plain\n// arbitrary value solely for backward compatibility with existing call sites\n// that need a wider popup (see the `Large` story).\n//\n// Dialog's composable primitive parts (this file) are internal-only — not\n// re-exported from the package root — except `DialogClose`, which stays\n// public: it's required by the `wide` variant's documented custom-`footer`\n// escape hatch (see the `footer` prop and dialog.mdx). The public `Dialog`\n// component below is the sole sanctioned entry point; it's built on these\n// parts internally. (In Figma the matching component set is named\n// \"DialogDefault\"; the code-facing name stays `Dialog` — see dialog.figma.tsx.)\n\n// Figma's \"DialogWelcome\" frame (variant=carousel, node 6353:6164) wraps its\n// popup preview in a `p-[48px]` ancestor — the minimum margin the popup must\n// keep from the viewport edge on any screen size. `max-w`/`max-h` (not\n// padding, since the popup itself is centered via `fixed` + transform)\n// enforce it here so every consumer keeps that margin, not just the frame\n// that surfaced it.\nconst dialogContentVariants = cva(\n 'fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-96px)] w-full min-w-[var(--ui-dialog-container-width-min)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[var(--ui-dialog-container-border-radius)] bg-[var(--ui-dialog-container-color)] text-foreground shadow-lg duration-200 transition-[scale] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[color-mix(in_oklab,var(--ui-background-backdrop-screen)_36%,transparent)] dark:after:bg-[color-mix(in_oklab,var(--ui-background-backdrop-screen)_80%,transparent)] after:opacity-0 after:transition-opacity after:duration-200 after:content-[\"\"] data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[nested-dialog-open]:scale-[0.96] data-[nested-dialog-open]:after:opacity-100 dark:data-[nested]:border dark:data-[nested]:border-[var(--ui-dialog-header-border-color)]',\n {\n variants: {\n size: {\n sm: 'max-w-[min(var(--ui-dialog-container-size-sm),calc(100dvw-96px))]',\n large: 'max-w-[min(832px,calc(100dvw-96px))]',\n },\n },\n defaultVariants: {\n size: 'sm',\n },\n }\n);\n\nconst DialogRoot = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Backdrop>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Backdrop>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Backdrop\n ref={ref}\n className={cn(\n 'fixed inset-0 z-50 bg-[var(--ui-background-backdrop-screen)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n className\n )}\n {...props}\n />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\nexport interface DialogContentProps\n extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>,\n VariantProps<typeof dialogContentVariants> {\n /*\n Popup max-width. `sm` (512px, default) is the Figma-defined size; `large`\n * (832px) is a backward-compatibility size with no design token (see the\n * `Large` story).\n /\n size?: VariantProps<typeof dialogContentVariants>['size'];\n /\n Render the content inside a portal (default `true`). Base UI requires the\n * Popup to sit in a Portal for correct stacking; set `false` for inline usage\n * (e.g. when the caller supplies its own `DialogPortal`, or in tests).\n /\n portal?: boolean;\n /\n Portal container. Pass a shadow-root mount for isolated-style previews\n * (the docs demos do this via `useShadowMount`).\n /\n portalContainer?: DialogPrimitive.Portal.Props['container'];\n /* Keep the content mounted while closed (Base UI `Portal` prop). /\n keepMounted?: DialogPrimitive.Portal.Props['keepMounted'];\n}\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Popup>,\n DialogContentProps\n>(\n (\n {\n className,\n children,\n size,\n portal = true,\n portalContainer,\n keepMounted,\n ...props\n },\n ref\n ) => {\n const ctxContainer = usePortalContainer();\n const resolvedContainer = portalContainer ?? ctxContainer;\n\n const popup = (\n <>\n <DialogOverlay />\n <DialogPrimitive.Popup\n ref={ref}\n className={cn(dialogContentVariants({ size }), className)}\n {...props}\n >\n {children}\n </DialogPrimitive.Popup>\n </>\n );\n\n return portal ? (\n <DialogPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n {popup}\n </DialogPrimitive.Portal>\n ) : (\n popup\n );\n }\n);\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeaderRoot = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4',\n className\n )}\n {...props}\n />\n));\nDialogHeaderRoot.displayName = 'DialogHeaderRoot';\n\nconst DialogFooterRoot = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4',\n className\n )}\n {...props}\n />\n));\nDialogFooterRoot.displayName = 'DialogFooterRoot';\n\nconst DialogBodyRoot = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn('flex-1 overflow-auto p-6', className)} {...props} />\n));\nDialogBodyRoot.displayName = 'DialogBodyRoot';\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn(\n 'flex-1 text-2xl font-normal leading-8 text-foreground',\n className\n )}\n {...props}\n />\n));\nDialogTitle.displayName = 'DialogTitle';\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-sm text-muted-foreground', className)}\n {...props}\n />\n));\nDialogDescription.displayName = 'DialogDescription';\n\nexport interface DialogCloseButtonProps\n extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> {\n /* Accessible name for screen readers. Defaults to `'Close'`. /\n closeLabel?: string;\n}\n\nconst DialogCloseButton = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Close>,\n DialogCloseButtonProps\n>(({ className, closeLabel = 'Close', ...props }, ref) => (\n <DialogPrimitive.Close\n ref={ref}\n render={<ButtonIcon variant=\"ghost\" />}\n className={className}\n {...props}\n >\n <TimesIcon />\n <span className=\"sr-only\">{closeLabel}</span>\n </DialogPrimitive.Close>\n));\nDialogCloseButton.displayName = 'DialogCloseButton';\n\n// The recipe-specific header: title + close button, reconciled against the\n// Figma \"DialogHeader\" node (4220:3516) via the `--ui-dialog-header-` tier.\n// Local to this file (not exported) — distinct from the generic, unstyled\n// `DialogHeaderRoot` composable primitive above.\ninterface DialogHeaderProps {\n title: string;\n closeLabel?: string;\n}\n\nfunction DialogHeader({ title, closeLabel }: DialogHeaderProps) {\n return (\n <div className=\"flex h-[var(--ui-dialog-header-height)] shrink-0 items-center gap-[var(--ui-dialog-header-gap)] border-b-[length:var(--ui-dialog-header-border-width)] border-[var(--ui-dialog-header-border-color)] bg-[var(--ui-dialog-header-color)] px-[var(--ui-dialog-header-padding-x)]\">\n <DialogTitle>{title}</DialogTitle>\n <DialogCloseButton closeLabel={closeLabel} />\n </div>\n );\n}\n\n// The recipe-specific body: the variant's canned copy (or the `children`\n// override), reconciled against the Figma DialogDefault node via the\n// `--ui-dialog-body-` tier. Local to this file — distinct from the generic\n// `DialogBodyRoot` composable primitive above.\ninterface DialogBodyProps {\n children: React.ReactNode;\n /* Makes the body unfocusable/unclickable while the loading overlay is shown. /\n inert?: boolean;\n}\n\nfunction DialogBody({ children, inert }: DialogBodyProps) {\n return (\n <div\n inert={inert}\n className=\"flex min-h-[var(--ui-dialog-body-height-min)] flex-col justify-center-safe gap-[var(--ui-dialog-body-gap)] overflow-y-auto px-4 py-[var(--ui-dialog-body-padding-y)]\"\n >\n {typeof children === 'string' ? (\n <p className=\"text-sm leading-6 text-foreground\">{children}</p>\n ) : (\n children\n )}\n </div>\n );\n}\n\n// The recipe-specific footer actions: a secondary (dismiss) button plus a\n// primary action, the latter either closing the dialog itself (`read-only`'s\n// \"Done\") or firing `onPrimaryAction` and leaving the close to the caller.\n// Local to this file — distinct from the generic `DialogFooterRoot`.\ninterface DialogFooterActionsProps {\n secondaryLabel?: string;\n primaryLabel: string;\n primaryVariant: 'default' \| 'destructive';\n primaryCloses?: boolean;\n onPrimaryAction?: () => void;\n}\n\nfunction DialogFooterActions({\n secondaryLabel,\n primaryLabel,\n primaryVariant,\n primaryCloses,\n onPrimaryAction,\n}: DialogFooterActionsProps) {\n return (\n <>\n {secondaryLabel && (\n <DialogClose render={<Button variant=\"secondary\">{secondaryLabel}</Button>} />\n )}\n {primaryCloses ? (\n <DialogClose\n onClick={onPrimaryAction}\n render={<Button variant={primaryVariant}>{primaryLabel}</Button>}\n />\n ) : (\n <Button variant={primaryVariant} onClick={onPrimaryAction}>\n {primaryLabel}\n </Button>\n )}\n </>\n );\n}\n\n// A higher-level \"recipe\" built on top of the Dialog primitive parts above\n// (DialogRoot + DialogContent give the portal, backdrop, focus trap, scroll\n// lock and open state; DialogTitle wires the accessible name; DialogCloseButton\n// / DialogClose give the dismiss controls). It bakes in the seven Figma\n// \"DialogDefault\" use-cases (node 6343:58898) plus one legacy `wide` escape\n// hatch kept for backward compatibility: each `variant` picks a canned title,\n// body copy and footer buttons; `children` overrides only the body slot;\n// `title` overrides only the title; `footer` overrides only the footer's\n// action content (the free-form escape hatch `wide` relies on); `hasLoading`\n// drops a spinner overlay over the body + footer. `hasHeader`/`hasFooter`\n// (both default `true`) hide the header/footer chrome entirely — a\n// ui-react-only extension beyond the Figma DialogDefault contract, which\n// always shows both; the title stays rendered off-screen when the header is\n// hidden so the dialog keeps an accessible name.\n//\n// Colors resolve to shipped semantic tokens via the bridged Tailwind names the\n// Dialog family already uses (text-foreground, the backdrop + focus tokens\n// inside DialogContent / DialogCloseButton) and the Button / InputText token\n// tiers — nothing is hand-authored. The loading scrim renders `Loading`'s\n// `onSurfaceSecondary` variant (`--ui-loading-element-container-color-secondary`),\n// matching the design's translucent surface fill.\n//\n// Header + footer geometry/color resolve to the `--ui-dialog-header-` /\n// `--ui-footer-` tiers, reconciled against the DialogDefault Figma node.\n\nexport type DialogVariant =\n \| 'default'\n \| 'rename'\n \| 'save changes'\n \| 'reset password'\n \| 'discard changes'\n \| 'accept'\n \| 'read-only'\n \| 'wide';\n\ninterface DialogVariantContent {\n /\n The variant's canned title. A function receives `objectName` (falls back\n * to its own placeholder default when omitted) for variants whose title\n * embeds the acted-on object's name.\n /\n title: string \| ((objectName?: string) => string);\n /\n Same `objectName` interpolation as `title`, for body copy/fields that\n * embed it. The `rename` variant's field also receives `objectNameLabel`\n * for its accessible name.\n /\n body:\n \| React.ReactNode\n \| ((objectName?: string, objectNameLabel?: string) => React.ReactNode);\n /* Secondary (dismiss) button label. Omitted when the variant has none. /\n secondaryLabel?: string;\n primaryLabel: string;\n primaryVariant: 'default' \| 'destructive';\n /* Whether the primary button dismisses the dialog (e.g. read-only \"Done\"). /\n primaryCloses?: boolean;\n}\n\nconst DIALOG_VARIANT_CONTENT: Record<DialogVariant, DialogVariantContent> = {\n default: {\n title: 'Dialog title',\n body: 'Drop any content into this slot.',\n secondaryLabel: 'Cancel',\n primaryLabel: 'Label',\n primaryVariant: 'default',\n },\n rename: {\n title: (objectName = 'object name') => `Rename ${objectName}`,\n // `objectName` prefills the field with the real current name; the field's\n // accessible name (`objectNameLabel`) is separate — it's the label, not the value.\n body: (objectName = 'Current name', objectNameLabel = 'Object name') => (\n <InputText aria-label={objectNameLabel} defaultValue={objectName} />\n ),\n secondaryLabel: 'Cancel',\n primaryLabel: 'Rename',\n primaryVariant: 'default',\n },\n 'save changes': {\n title: 'Save changes',\n body: 'You have unsaved changes. Do you want to save them before leaving?',\n secondaryLabel: 'Go back',\n primaryLabel: 'Save',\n primaryVariant: 'default',\n },\n 'reset password': {\n title: 'Reset password',\n body: 'Further instructions will be sent to your email address.',\n secondaryLabel: 'Cancel',\n primaryLabel: 'Reset',\n primaryVariant: 'default',\n },\n 'discard changes': {\n title: 'Discard changes',\n body: (objectName = 'Object name') => (\n <p className=\"text-sm leading-6 text-foreground\">\n Are you sure you want to discard the unsaved changes to{' '}\n <strong className=\"font-semibold\">{objectName}</strong>?\n </p>\n ),\n secondaryLabel: 'Go back',\n primaryLabel: 'Confirm',\n primaryVariant: 'destructive',\n },\n accept: {\n title: (objectName = 'object name') => `Accept ${objectName}`,\n body: 'Click Accept to confirm that you have read, understood, and agree to the terms and conditions below.',\n secondaryLabel: 'Cancel',\n primaryLabel: 'Accept',\n primaryVariant: 'default',\n },\n 'read-only': {\n title: 'License agreement',\n body: 'This is a read-only dialog used to view legal documents such as the License Agreement, EULA updates, Terms of Service, and other legal documents.',\n primaryLabel: 'Done',\n primaryVariant: 'default',\n primaryCloses: true,\n },\n // No Figma preset — a legacy, free-form escape hatch (see the `footer` prop\n // and the `Large` story). This fallback title/body/footer only renders if\n // the caller supplies neither `footer` nor `title`/`children` — every real\n // `wide` call site overrides them.\n wide: {\n title: 'Dialog title',\n body: 'Drop any content into this slot.',\n secondaryLabel: 'Cancel',\n primaryLabel: 'Confirm',\n primaryVariant: 'default',\n },\n};\n\ntype DialogRootProps = React.ComponentPropsWithoutRef<typeof DialogRoot>;\n\nexport interface DialogProps extends Omit<DialogRootProps, 'children'> {\n /\n Selects the canned title / body / footer preset. Defaults to `'default'`.\n * `'wide'` is a legacy escape hatch (no canned preset) kept for backward\n * compatibility — pair it with `size=\"large\"` and the `footer` prop.\n /\n variant?: DialogVariant;\n /\n Show a spinner overlay across the body + footer, and make both `inert`\n * (unfocusable, unclickable, hidden from assistive tech) so a keyboard user\n * can't activate the visually obscured footer buttons while busy.\n /\n hasLoading?: boolean;\n /\n Overrides the loading overlay's accessible label. Defaults to `Loading`'s\n * own default (`'Data is loading…'`). Ignored when `hasLoading` is `false`.\n /\n loadingLabel?: string;\n /\n Show the header (title + close button). Defaults to `true`. When `false`,\n * the title is still rendered off-screen so the dialog keeps an accessible\n * name — only the visible bar and close button are omitted. Beyond the\n * strict Figma contract (all seven `DialogDefault` variants always show the\n * header); a ui-react-only extension, like `wide`/`size=\"large\"`.\n /\n hasHeader?: boolean;\n /\n Show the footer (action buttons). Defaults to `true`. Beyond the strict\n * Figma contract (all seven `DialogDefault` variants always show the\n * footer); a ui-react-only extension, like `wide`/`size=\"large\"`. When\n * `false`, `footer` (and the canned footer it would otherwise replace) is\n * not rendered either.\n /\n hasFooter?: boolean;\n /* Overrides the variant's default body content. /\n children?: React.ReactNode;\n /* Overrides the variant's default title. /\n title?: string;\n /\n The real name of the object being acted on (e.g. a file or resource\n * name). Interpolated into the `rename`/`discard changes`/`accept`\n * variants' canned title/body in place of the generic placeholder text;\n * ignored by variants that don't reference an object name.\n /\n objectName?: string;\n /\n Overrides the accessible name of the `rename` variant's text field\n * (default `'Object name'`). Ignored by every other variant.\n /\n objectNameLabel?: string;\n /\n Overrides the variant's default secondary (dismiss) button label. Passing\n * this for a variant with no secondary button by default (e.g. `read-only`)\n * also makes the button appear. Ignored when `footer` is provided.\n /\n secondaryLabel?: string;\n /* Overrides the variant's default primary button label. Ignored when `footer` is provided. /\n primaryLabel?: string;\n /\n Fires when the primary footer button is clicked. The dialog does not\n * close automatically afterwards — pair this with `open`/`onOpenChange` to\n * close it once the action completes. Ignored when `footer` is provided\n * (wire behavior onto your own buttons there instead).\n /\n onPrimaryAction?: () => void;\n /\n Replaces the footer's action content entirely with free-form buttons —\n * the escape hatch the `wide` variant is meant to be paired with, for\n * legacy call sites that don't fit one of the seven canned presets. Ignored\n * (along with the canned footer) when `hasFooter` is `false`.\n /\n footer?: React.ReactNode;\n /* Overrides the close button's accessible name. Defaults to `'Close'`. /\n closeLabel?: string;\n /\n Popup max-width (forwarded to `DialogContent`). Defaults to `'sm'`, or to\n * `'large'` when `variant` is `'wide'`.\n /\n size?: DialogContentProps['size'];\n /* Render inside a portal (forwarded to `DialogContent`). Defaults to `true`. /\n portal?: boolean;\n /* Portal container (forwarded to `DialogContent`). /\n portalContainer?: DialogContentProps['portalContainer'];\n /* Keep the content mounted while closed (forwarded to `DialogContent`). /\n keepMounted?: DialogContentProps['keepMounted'];\n /* Extra classes merged onto the popup container. */\n className?: string;\n}\n\nconst Dialog = React.forwardRef<HTMLDivElement, DialogProps>(\n (\n {\n variant = 'default',\n hasLoading = false,\n loadingLabel,\n hasHeader = true,\n hasFooter = true,\n children,\n title,\n objectName,\n objectNameLabel,\n secondaryLabel,\n primaryLabel,\n onPrimaryAction,\n footer,\n closeLabel,\n size,\n portal,\n portalContainer,\n keepMounted,\n className,\n ...rootProps\n },\n ref\n ) => {\n const content = DIALOG_VARIANT_CONTENT[variant];\n const resolvedTitle =\n typeof content.title === 'function' ? content.title(objectName) : content.title;\n const resolvedBody =\n typeof content.body === 'function'\n ? content.body(objectName, objectNameLabel)\n : content.body;\n const bodyContent = children ?? resolvedBody;\n const titleText = title ?? resolvedTitle;\n const secondaryLabelText = secondaryLabel ?? content.secondaryLabel;\n const primaryLabelText = primaryLabel ?? content.primaryLabel;\n const resolvedSize = size ?? (variant === 'wide' ? 'large' : 'sm');\n\n return (\n <DialogRoot {...rootProps}>\n <DialogContent\n ref={ref}\n size={resolvedSize}\n portal={portal}\n portalContainer={portalContainer}\n keepMounted={keepMounted}\n className={className}\n aria-busy={hasLoading \|\| undefined}\n >\n {hasHeader ? (\n <DialogHeader title={titleText} closeLabel={closeLabel} />\n ) : (\n // Header hidden, but the dialog still needs an accessible name.\n <DialogTitle className=\"sr-only\">{titleText}</DialogTitle>\n )}\n\n <DialogBody inert={hasLoading}>{bodyContent}</DialogBody>\n\n {hasFooter && (\n <DialogFooterDefault inert={hasLoading}>\n {footer ?? (\n <DialogFooterActions\n secondaryLabel={secondaryLabelText}\n primaryLabel={primaryLabelText}\n primaryVariant={content.primaryVariant}\n primaryCloses={content.primaryCloses}\n onPrimaryAction={onPrimaryAction}\n />\n )}\n </DialogFooterDefault>\n )}\n\n {hasLoading && (\n <Loading\n variant=\"onSurfaceSecondary\"\n hasLabel={false}\n label={loadingLabel}\n className={cn(\n 'absolute inset-x-0 bottom-0 rounded-none',\n hasHeader ? 'top-[var(--ui-dialog-header-height)]' : 'top-0'\n )}\n />\n )}\n </DialogContent>\n </DialogRoot>\n );\n }\n);\nDialog.displayName = 'Dialog';\n\nexport {\n DialogRoot,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogCloseButton,\n DialogTrigger,\n DialogContent,\n DialogHeaderRoot,\n DialogFooterRoot,\n DialogTitle,\n DialogBodyRoot,\n DialogDescription,\n dialogContentVariants,\n Dialog,\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"dialog.js","names":[],"sources":["../../../../src/components/ui/dialog/dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { DialogFooterDefault } from '../dialog-footer-default';\nimport { InputText } from '../input-text';\nimport { Loading } from '../loading';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `dialog`\n// (packages/ui-legacy/src/components/ui/dialog.tsx). A modal overlay built on\n// the Base UI Dialog primitive (keyboard, focus trap, scroll lock, ARIA come\n// from Base UI). A `--ui-dialog-` / `--ui-button-icon-` token tier covers the\n// container + close button (reconciled against the Figma \"DialogDefault\" node,\n// 6343:58898); the composable DialogRoot / DialogHeaderRoot / DialogFooterRoot\n// / DialogBodyRoot parts below are internal-only (no public export, no Figma\n// node of their own) and keep the prior semantic-token approach — not to be\n// confused with the recipe-local `DialogHeader`/`DialogBody` further down,\n// which back the public `Dialog` and are reconciled against Figma:\n// • overlay -> var(--ui-background-backdrop-screen) (legacy `bg-black/80`)\n// • popup -> var(--ui-dialog-container-color) / var(--ui-dialog-container-border-radius)\n// • header / footer -> bg-background = --ui-background-surface-primary (white\n// bars over the muted body), divided by border-border\n// • title -> text-foreground / description -> text-muted-foreground\n// • close -> var(--ui-button-icon-global-icon-color-) (idle/hover/active\n// share one blue in the default brand), bg via\n// var(--ui-button-icon-global-container-color-), focus ring var(--ui-focus-primary)\n// Enter/exit animations use `tw-animate-css` (imported in styles/index.css),\n// keyed to Base UI's data-[open] / data-[closed] state attributes — overlay\n// fades, popup fades + zooms. Those keyframes only animate `transform`/\n// `opacity`, so the nested-dialog recede below can safely live on the CSS\n// `scale` property + an `::after` scrim without fighting them.\n//\n// Nested dialogs: Base UI flags a dialog as nested purely by React-tree\n// position (`Boolean(parentDialogRootContext)` in DialogRoot) and then\n// deliberately skips rendering that dialog's own backdrop, so stacked\n// dialogs don't darken progressively. To compensate, Base UI sets\n// `data-nested-dialog-open` (plus a `--nested-dialogs` count) on the PARENT\n// popup while a nested dialog is open, expecting the consuming library to\n// give the parent a \"recede\" treatment for a visible depth cue. That's what\n// the data-[nested-dialog-open] rules below do: the parent popup scales\n// down slightly and gets a token-tinted scrim (a reduced-opacity mix of the\n// same --ui-background-backdrop-screen the overlay uses, not a hardcoded\n// color) while the child — which keeps its own backdrop suppressed — sits\n// on top. Stacked-modal depth reads through relative layer contrast, so the\n// scrim is theme-split in approach, not just strength: in light the parent\n// dims (36% of the backdrop token reads clearly over the white container).\n// In dark the container and the backdrop token are the same near-black, so\n// no scrim percentage can separate the layers — and repainting the nested\n// container with a lighter tier token would flatten its header/footer\n// chrome, whose surfaces share those very values. There the separation\n// comes from the Dialog tier's hairline border on the nested popup (an\n// edge stroke that follows each brand's dialog chrome), while the parent\n// keeps the stronger 80% scrim mainly to fade its content.\n// `size` has two values: `sm` (512px, the Figma\n// default, backed by `--ui-dialog-container-size-sm`) and `large` (832px) — the\n// latter predates the Figma node and has no token; it's kept as a plain\n// arbitrary value solely for backward compatibility with existing call sites\n// that need a wider popup (see the `Large` story).\n//\n// Dialog's composable primitive parts (this file) are internal-only — not\n// re-exported from the package root — except `DialogClose`, which stays\n// public: it's required by the `wide` variant's documented custom-`footer`\n// escape hatch (see the `footer` prop and dialog.mdx). The public `Dialog`\n// component below is the sole sanctioned entry point; it's built on these\n// parts internally. (In Figma the matching component set is named\n// \"DialogDefault\"; the code-facing name stays `Dialog` — see dialog.figma.tsx.)\n\n// Figma's \"DialogWelcome\" frame (variant=carousel, node 6353:6164) wraps its\n// popup preview in a `p-[48px]` ancestor — the minimum margin the popup must\n// keep from the viewport edge on any screen size. `max-w`/`max-h` (not\n// padding, since the popup itself is centered via `fixed` + transform)\n// enforce it here so every consumer keeps that margin, not just the frame\n// that surfaced it.\nconst dialogContentVariants = cva(\n 'fixed left-1/2 z-50 flex max-h-[calc(100dvh-96px)] w-full min-w-[var(--ui-dialog-container-width-min)] -translate-x-1/2 flex-col overflow-hidden rounded-[var(--ui-dialog-container-border-radius)] bg-[var(--ui-dialog-container-color)] text-foreground shadow-lg duration-200 transition-[scale] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[color-mix(in_oklab,var(--ui-background-backdrop-screen)_36%,transparent)] dark:after:bg-[color-mix(in_oklab,var(--ui-background-backdrop-screen)_80%,transparent)] after:opacity-0 after:transition-opacity after:duration-200 after:content-[\"\"] data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[nested-dialog-open]:scale-[0.96] data-[nested-dialog-open]:after:opacity-100 dark:data-[nested]:border dark:data-[nested]:border-[var(--ui-dialog-header-border-color)]',\n {\n variants: {\n size: {\n sm: 'max-w-[min(var(--ui-dialog-container-size-sm),calc(100dvw-96px))]',\n large: 'max-w-[min(832px,calc(100dvw-96px))]',\n },\n verticalAlign: {\n center: 'top-1/2 -translate-y-1/2',\n top: 'top-[48px]',\n },\n },\n defaultVariants: {\n size: 'sm',\n verticalAlign: 'center',\n },\n }\n);\n\nconst DialogRoot = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Backdrop>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Backdrop>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Backdrop\n ref={ref}\n className={cn(\n 'fixed inset-0 z-50 bg-[var(--ui-background-backdrop-screen)] duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n className\n )}\n {...props}\n />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\nexport interface DialogContentProps\n extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>,\n VariantProps<typeof dialogContentVariants> {\n /*\n Popup max-width. `sm` (512px, default) is the Figma-defined size; `large`\n * (832px) is a backward-compatibility size with no design token (see the\n * `Large` story).\n /\n size?: VariantProps<typeof dialogContentVariants>['size'];\n /\n Vertical placement of the popup. `center` (default) centers it in the\n * viewport; `top` pins it 48px from the top edge, leaving the rest of the\n * viewport below it.\n /\n verticalAlign?: 'center' \| 'top';\n /\n Render the content inside a portal (default `true`). Base UI requires the\n * Popup to sit in a Portal for correct stacking; set `false` for inline usage\n * (e.g. when the caller supplies its own `DialogPortal`, or in tests).\n /\n portal?: boolean;\n /\n Portal container. Pass a shadow-root mount for isolated-style previews\n * (the docs demos do this via `useShadowMount`).\n /\n portalContainer?: DialogPrimitive.Portal.Props['container'];\n /* Keep the content mounted while closed (Base UI `Portal` prop). /\n keepMounted?: DialogPrimitive.Portal.Props['keepMounted'];\n}\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Popup>,\n DialogContentProps\n>(\n (\n {\n className,\n children,\n size,\n verticalAlign,\n portal = true,\n portalContainer,\n keepMounted,\n ...props\n },\n ref\n ) => {\n const ctxContainer = usePortalContainer();\n const resolvedContainer = portalContainer ?? ctxContainer;\n\n const popup = (\n <>\n <DialogOverlay />\n <DialogPrimitive.Popup\n ref={ref}\n className={cn(\n dialogContentVariants({ size, verticalAlign: verticalAlign ?? 'center' }),\n className\n )}\n {...props}\n >\n {children}\n </DialogPrimitive.Popup>\n </>\n );\n\n return portal ? (\n <DialogPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n {popup}\n </DialogPrimitive.Portal>\n ) : (\n popup\n );\n }\n);\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeaderRoot = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex h-16 items-center gap-4 border-b border-border bg-background px-5 py-4',\n className\n )}\n {...props}\n />\n));\nDialogHeaderRoot.displayName = 'DialogHeaderRoot';\n\nconst DialogFooterRoot = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex h-16 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4',\n className\n )}\n {...props}\n />\n));\nDialogFooterRoot.displayName = 'DialogFooterRoot';\n\nconst DialogBodyRoot = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn('flex-1 overflow-auto p-6', className)} {...props} />\n));\nDialogBodyRoot.displayName = 'DialogBodyRoot';\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn(\n 'flex-1 text-2xl font-normal leading-8 text-foreground',\n className\n )}\n {...props}\n />\n));\nDialogTitle.displayName = 'DialogTitle';\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-sm text-muted-foreground', className)}\n {...props}\n />\n));\nDialogDescription.displayName = 'DialogDescription';\n\nexport interface DialogCloseButtonProps\n extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> {\n /* Accessible name for screen readers. Defaults to `'Close'`. /\n closeLabel?: string;\n}\n\nconst DialogCloseButton = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Close>,\n DialogCloseButtonProps\n>(({ className, closeLabel = 'Close', ...props }, ref) => (\n <DialogPrimitive.Close\n ref={ref}\n render={<ButtonIcon variant=\"ghost\" />}\n className={className}\n {...props}\n >\n <TimesIcon />\n <span className=\"sr-only\">{closeLabel}</span>\n </DialogPrimitive.Close>\n));\nDialogCloseButton.displayName = 'DialogCloseButton';\n\n// The recipe-specific header: title + close button, reconciled against the\n// Figma \"DialogHeader\" node (4220:3516) via the `--ui-dialog-header-` tier.\n// Local to this file (not exported) — distinct from the generic, unstyled\n// `DialogHeaderRoot` composable primitive above.\ninterface DialogHeaderProps {\n title: string;\n closeLabel?: string;\n}\n\nfunction DialogHeader({ title, closeLabel }: DialogHeaderProps) {\n return (\n <div className=\"flex h-[var(--ui-dialog-header-height)] shrink-0 items-center gap-[var(--ui-dialog-header-gap)] border-b-[length:var(--ui-dialog-header-border-width)] border-[var(--ui-dialog-header-border-color)] bg-[var(--ui-dialog-header-color)] px-[var(--ui-dialog-header-padding-x)]\">\n <DialogTitle>{title}</DialogTitle>\n <DialogCloseButton closeLabel={closeLabel} />\n </div>\n );\n}\n\n// The recipe-specific body: the variant's canned copy (or the `children`\n// override), reconciled against the Figma DialogDefault node via the\n// `--ui-dialog-body-` tier. Local to this file — distinct from the generic\n// `DialogBodyRoot` composable primitive above.\ninterface DialogBodyProps {\n children: React.ReactNode;\n /* Makes the body unfocusable/unclickable while the loading overlay is shown. /\n inert?: boolean;\n}\n\nfunction DialogBody({ children, inert }: DialogBodyProps) {\n return (\n <div\n inert={inert}\n className=\"flex min-h-[var(--ui-dialog-body-height-min)] flex-col justify-center-safe gap-[var(--ui-dialog-body-gap)] overflow-y-auto px-4 py-[var(--ui-dialog-body-padding-y)]\"\n >\n {typeof children === 'string' ? (\n <p className=\"text-sm leading-6 text-foreground\">{children}</p>\n ) : (\n children\n )}\n </div>\n );\n}\n\n// The recipe-specific footer actions: a secondary (dismiss) button plus a\n// primary action, the latter either closing the dialog itself (`read-only`'s\n// \"Done\") or firing `onPrimaryAction` and leaving the close to the caller.\n// Local to this file — distinct from the generic `DialogFooterRoot`.\ninterface DialogFooterActionsProps {\n secondaryLabel?: string;\n primaryLabel: string;\n primaryVariant: 'default' \| 'destructive';\n primaryCloses?: boolean;\n onPrimaryAction?: () => void;\n}\n\nfunction DialogFooterActions({\n secondaryLabel,\n primaryLabel,\n primaryVariant,\n primaryCloses,\n onPrimaryAction,\n}: DialogFooterActionsProps) {\n return (\n <>\n {secondaryLabel && (\n <DialogClose render={<Button variant=\"secondary\">{secondaryLabel}</Button>} />\n )}\n {primaryCloses ? (\n <DialogClose\n onClick={onPrimaryAction}\n render={<Button variant={primaryVariant}>{primaryLabel}</Button>}\n />\n ) : (\n <Button variant={primaryVariant} onClick={onPrimaryAction}>\n {primaryLabel}\n </Button>\n )}\n </>\n );\n}\n\n// A higher-level \"recipe\" built on top of the Dialog primitive parts above\n// (DialogRoot + DialogContent give the portal, backdrop, focus trap, scroll\n// lock and open state; DialogTitle wires the accessible name; DialogCloseButton\n// / DialogClose give the dismiss controls). It bakes in the seven Figma\n// \"DialogDefault\" use-cases (node 6343:58898) plus one legacy `wide` escape\n// hatch kept for backward compatibility: each `variant` picks a canned title,\n// body copy and footer buttons; `children` overrides only the body slot;\n// `title` overrides only the title; `footer` overrides only the footer's\n// action content (the free-form escape hatch `wide` relies on); `hasLoading`\n// drops a spinner overlay over the body + footer. `hasHeader`/`hasFooter`\n// (both default `true`) hide the header/footer chrome entirely — a\n// ui-react-only extension beyond the Figma DialogDefault contract, which\n// always shows both; the title stays rendered off-screen when the header is\n// hidden so the dialog keeps an accessible name.\n//\n// Colors resolve to shipped semantic tokens via the bridged Tailwind names the\n// Dialog family already uses (text-foreground, the backdrop + focus tokens\n// inside DialogContent / DialogCloseButton) and the Button / InputText token\n// tiers — nothing is hand-authored. The loading scrim renders `Loading`'s\n// `onSurfaceSecondary` variant (`--ui-loading-element-container-color-secondary`),\n// matching the design's translucent surface fill.\n//\n// Header + footer geometry/color resolve to the `--ui-dialog-header-` /\n// `--ui-footer-` tiers, reconciled against the DialogDefault Figma node.\n\nexport type DialogVariant =\n \| 'default'\n \| 'rename'\n \| 'save changes'\n \| 'reset password'\n \| 'discard changes'\n \| 'accept'\n \| 'read-only'\n \| 'wide';\n\ninterface DialogVariantContent {\n /\n The variant's canned title. A function receives `objectName` (falls back\n * to its own placeholder default when omitted) for variants whose title\n * embeds the acted-on object's name.\n /\n title: string \| ((objectName?: string) => string);\n /\n Same `objectName` interpolation as `title`, for body copy/fields that\n * embed it. The `rename` variant's field also receives `objectNameLabel`\n * for its accessible name.\n /\n body:\n \| React.ReactNode\n \| ((objectName?: string, objectNameLabel?: string) => React.ReactNode);\n /* Secondary (dismiss) button label. Omitted when the variant has none. /\n secondaryLabel?: string;\n primaryLabel: string;\n primaryVariant: 'default' \| 'destructive';\n /* Whether the primary button dismisses the dialog (e.g. read-only \"Done\"). /\n primaryCloses?: boolean;\n}\n\nconst DIALOG_VARIANT_CONTENT: Record<DialogVariant, DialogVariantContent> = {\n default: {\n title: 'Dialog title',\n body: 'Drop any content into this slot.',\n secondaryLabel: 'Cancel',\n primaryLabel: 'Label',\n primaryVariant: 'default',\n },\n rename: {\n title: (objectName = 'object name') => `Rename ${objectName}`,\n // `objectName` prefills the field with the real current name; the field's\n // accessible name (`objectNameLabel`) is separate — it's the label, not the value.\n body: (objectName = 'Current name', objectNameLabel = 'Object name') => (\n <InputText aria-label={objectNameLabel} defaultValue={objectName} />\n ),\n secondaryLabel: 'Cancel',\n primaryLabel: 'Rename',\n primaryVariant: 'default',\n },\n 'save changes': {\n title: 'Save changes',\n body: 'You have unsaved changes. Do you want to save them before leaving?',\n secondaryLabel: 'Go back',\n primaryLabel: 'Save',\n primaryVariant: 'default',\n },\n 'reset password': {\n title: 'Reset password',\n body: 'Further instructions will be sent to your email address.',\n secondaryLabel: 'Cancel',\n primaryLabel: 'Reset',\n primaryVariant: 'default',\n },\n 'discard changes': {\n title: 'Discard changes',\n body: (objectName = 'Object name') => (\n <p className=\"text-sm leading-6 text-foreground\">\n Are you sure you want to discard the unsaved changes to{' '}\n <strong className=\"font-semibold\">{objectName}</strong>?\n </p>\n ),\n secondaryLabel: 'Go back',\n primaryLabel: 'Confirm',\n primaryVariant: 'destructive',\n },\n accept: {\n title: (objectName = 'object name') => `Accept ${objectName}`,\n body: 'Click Accept to confirm that you have read, understood, and agree to the terms and conditions below.',\n secondaryLabel: 'Cancel',\n primaryLabel: 'Accept',\n primaryVariant: 'default',\n },\n 'read-only': {\n title: 'License agreement',\n body: 'This is a read-only dialog used to view legal documents such as the License Agreement, EULA updates, Terms of Service, and other legal documents.',\n primaryLabel: 'Done',\n primaryVariant: 'default',\n primaryCloses: true,\n },\n // No Figma preset — a legacy, free-form escape hatch (see the `footer` prop\n // and the `Large` story). This fallback title/body/footer only renders if\n // the caller supplies neither `footer` nor `title`/`children` — every real\n // `wide` call site overrides them.\n wide: {\n title: 'Dialog title',\n body: 'Drop any content into this slot.',\n secondaryLabel: 'Cancel',\n primaryLabel: 'Confirm',\n primaryVariant: 'default',\n },\n};\n\ntype DialogRootProps = React.ComponentPropsWithoutRef<typeof DialogRoot>;\n\nexport interface DialogProps extends Omit<DialogRootProps, 'children'> {\n /\n Selects the canned title / body / footer preset. Defaults to `'default'`.\n * `'wide'` is a legacy escape hatch (no canned preset) kept for backward\n * compatibility — pair it with `size=\"large\"` and the `footer` prop.\n /\n variant?: DialogVariant;\n /\n Show a spinner overlay across the body + footer, and make both `inert`\n * (unfocusable, unclickable, hidden from assistive tech) so a keyboard user\n * can't activate the visually obscured footer buttons while busy.\n /\n hasLoading?: boolean;\n /\n Overrides the loading overlay's accessible label. Defaults to `Loading`'s\n * own default (`'Data is loading…'`). Ignored when `hasLoading` is `false`.\n /\n loadingLabel?: string;\n /\n Show the header (title + close button). Defaults to `true`. When `false`,\n * the title is still rendered off-screen so the dialog keeps an accessible\n * name — only the visible bar and close button are omitted. Beyond the\n * strict Figma contract (all seven `DialogDefault` variants always show the\n * header); a ui-react-only extension, like `wide`/`size=\"large\"`.\n /\n hasHeader?: boolean;\n /\n Show the footer (action buttons). Defaults to `true`. Beyond the strict\n * Figma contract (all seven `DialogDefault` variants always show the\n * footer); a ui-react-only extension, like `wide`/`size=\"large\"`. When\n * `false`, `footer` (and the canned footer it would otherwise replace) is\n * not rendered either.\n /\n hasFooter?: boolean;\n /* Overrides the variant's default body content. /\n children?: React.ReactNode;\n /* Overrides the variant's default title. /\n title?: string;\n /\n The real name of the object being acted on (e.g. a file or resource\n * name). Interpolated into the `rename`/`discard changes`/`accept`\n * variants' canned title/body in place of the generic placeholder text;\n * ignored by variants that don't reference an object name.\n /\n objectName?: string;\n /\n Overrides the accessible name of the `rename` variant's text field\n * (default `'Object name'`). Ignored by every other variant.\n /\n objectNameLabel?: string;\n /\n Overrides the variant's default secondary (dismiss) button label. Passing\n * this for a variant with no secondary button by default (e.g. `read-only`)\n * also makes the button appear. Ignored when `footer` is provided.\n /\n secondaryLabel?: string;\n /* Overrides the variant's default primary button label. Ignored when `footer` is provided. /\n primaryLabel?: string;\n /\n Fires when the primary footer button is clicked. The dialog does not\n * close automatically afterwards — pair this with `open`/`onOpenChange` to\n * close it once the action completes. Ignored when `footer` is provided\n * (wire behavior onto your own buttons there instead).\n /\n onPrimaryAction?: () => void;\n /\n Replaces the footer's action content entirely with free-form buttons —\n * the escape hatch the `wide` variant is meant to be paired with, for\n * legacy call sites that don't fit one of the seven canned presets. Ignored\n * (along with the canned footer) when `hasFooter` is `false`.\n /\n footer?: React.ReactNode;\n /* Overrides the close button's accessible name. Defaults to `'Close'`. /\n closeLabel?: string;\n /\n Popup max-width (forwarded to `DialogContent`). Defaults to `'sm'`, or to\n * `'large'` when `variant` is `'wide'`.\n /\n size?: DialogContentProps['size'];\n /* Vertical placement: `'center'` (default) or `'top'` (forwarded to `DialogContent`). /\n verticalAlign?: DialogContentProps['verticalAlign'];\n /* Render inside a portal (forwarded to `DialogContent`). Defaults to `true`. /\n portal?: boolean;\n /* Portal container (forwarded to `DialogContent`). /\n portalContainer?: DialogContentProps['portalContainer'];\n /* Keep the content mounted while closed (forwarded to `DialogContent`). /\n keepMounted?: DialogContentProps['keepMounted'];\n /* Extra classes merged onto the popup container. */\n className?: string;\n}\n\nconst Dialog = React.forwardRef<HTMLDivElement, DialogProps>(\n (\n {\n variant = 'default',\n hasLoading = false,\n loadingLabel,\n hasHeader = true,\n hasFooter = true,\n children,\n title,\n objectName,\n objectNameLabel,\n secondaryLabel,\n primaryLabel,\n onPrimaryAction,\n footer,\n closeLabel,\n size,\n verticalAlign,\n portal,\n portalContainer,\n keepMounted,\n className,\n ...rootProps\n },\n ref\n ) => {\n const content = DIALOG_VARIANT_CONTENT[variant];\n const resolvedTitle =\n typeof content.title === 'function' ? content.title(objectName) : content.title;\n const resolvedBody =\n typeof content.body === 'function'\n ? content.body(objectName, objectNameLabel)\n : content.body;\n const bodyContent = children ?? resolvedBody;\n const titleText = title ?? resolvedTitle;\n const secondaryLabelText = secondaryLabel ?? content.secondaryLabel;\n const primaryLabelText = primaryLabel ?? content.primaryLabel;\n const resolvedSize = size ?? (variant === 'wide' ? 'large' : 'sm');\n\n return (\n <DialogRoot {...rootProps}>\n <DialogContent\n ref={ref}\n size={resolvedSize}\n verticalAlign={verticalAlign}\n portal={portal}\n portalContainer={portalContainer}\n keepMounted={keepMounted}\n className={className}\n aria-busy={hasLoading \|\| undefined}\n >\n {hasHeader ? (\n <DialogHeader title={titleText} closeLabel={closeLabel} />\n ) : (\n // Header hidden, but the dialog still needs an accessible name.\n <DialogTitle className=\"sr-only\">{titleText}</DialogTitle>\n )}\n\n <DialogBody inert={hasLoading}>{bodyContent}</DialogBody>\n\n {hasFooter && (\n <DialogFooterDefault inert={hasLoading}>\n {footer ?? (\n <DialogFooterActions\n secondaryLabel={secondaryLabelText}\n primaryLabel={primaryLabelText}\n primaryVariant={content.primaryVariant}\n primaryCloses={content.primaryCloses}\n onPrimaryAction={onPrimaryAction}\n />\n )}\n </DialogFooterDefault>\n )}\n\n {hasLoading && (\n <Loading\n variant=\"onSurfaceSecondary\"\n hasLabel={false}\n label={loadingLabel}\n className={cn(\n 'absolute inset-x-0 bottom-0 rounded-none',\n hasHeader ? 'top-[var(--ui-dialog-header-height)]' : 'top-0'\n )}\n />\n )}\n </DialogContent>\n </DialogRoot>\n );\n }\n);\nDialog.displayName = 'Dialog';\n\nexport {\n DialogRoot,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogCloseButton,\n DialogTrigger,\n DialogContent,\n DialogHeaderRoot,\n DialogFooterRoot,\n DialogTitle,\n DialogBodyRoot,\n DialogDescription,\n dialogContentVariants,\n Dialog,\n};\n"],"mappings":"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"}

package/dist/components/ui/pie-chart/pie-chart.js CHANGED Viewed

@@ -6,20 +6,20 @@ import { ChartContainer as r, ChartLegendContent as i, ChartTooltip as a, ChartT
 import { CHART_LABEL_FILL_CLASS as l, resolveAnimation as u, resolveLabelFillClass as d } from "../chart/chart-format.js";
 import * as f from "react";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-import { Cell as g, Curve as ee, Label as te, LabelList as ne, Pie as re, PieChart as ie } from "recharts";
+import { Cell as ee, Curve as te, Label as ne, LabelList as re, Pie as g, PieChart as _ } from "recharts";
 //#region src/components/ui/pie-chart/pie-chart.tsx
-var _ = t("", {
+var v = t("", {
 	variants: { shape: {
 		pie: "",
 		donut: ""
 	} },
 	defaultVariants: { shape: "pie" }
-}), v = (e) => typeof e == "number" && Number.isFinite(e) ? e : void 0, y = (e, t) => {
-	let n = v(e);
+}), y = (e) => typeof e == "number" && Number.isFinite(e) ? e : void 0, b = (e, t) => {
+	let n = y(e);
 	if (!(n === void 0 || t <= 0)) return `${(n / t * 100).toFixed(1)}%`;
 };
-function b(e) {
-	let { format: t, name: n, value: r, total: i, formatter: a } = e, o = r == null ? "" : a ? a(r) : String(r), s = y(r, i);
+function x(e) {
+	let { format: t, name: n, value: r, total: i, formatter: a } = e, o = r == null ? "" : a ? a(r) : String(r), s = b(r, i);
 	switch (t) {
 		case "name-value": return o ? `${n}: ${o}` : `${n}`;
 		case "name-percent": return s ? `${n}: ${s}` : `${n}`;
@@ -27,10 +27,10 @@ function b(e) {
 		default: return o;
 	}
 }
-function x(e) {
+function S(e) {
 	let { config: t, total: n } = e;
 	return function(e, r, i) {
-		let a = t[String(r)], o = y(e, n), s = e?.toLocaleString() ?? "";
+		let a = t[String(r)], o = b(e, n), s = e?.toLocaleString() ?? "";
 		return /* @__PURE__ */ h(p, { children: [a?.icon ? /* @__PURE__ */ m(a.icon, {}) : /* @__PURE__ */ m("div", {
 			className: "h-2.5 w-2.5 shrink-0 rounded-full",
 			style: { backgroundColor: i.payload?.fill ?? i.color }
@@ -46,18 +46,18 @@ function x(e) {
 		})] });
 	};
 }
-function S(e) {
+function C(e) {
 	let { nameKey: t, config: n, total: r } = e;
 	return /* @__PURE__ */ m(o, {
 		nameKey: t,
 		hideLabel: !0,
-		formatter: x({
+		formatter: S({
 			config: n,
 			total: r
 		})
 	});
 }
-function ae({ centerLabel: e }) {
+function ie({ centerLabel: e }) {
 	return function({ viewBox: t }) {
 		if (!t || !("cx" in t)) return null;
 		let { cx: n = 0, cy: r = 0 } = t, i = e.value != null, a = e.label != null, o = i && a;
@@ -78,63 +78,63 @@ function ae({ centerLabel: e }) {
 		})] });
 	};
 }
-var C = f.forwardRef(({ className: t, config: p, palette: y, data: x, dataKey: C, nameKey: w, shape: T = "donut", centerLabel: E, innerRadius: D = 48, outerRadius: O, paddingAngle: k = 2, cornerRadius: A, startAngle: j = 90, endAngle: M = -270, minAngle: N, sliceSettings: P, showTooltip: F = !0, showLegend: I = !0, legendFontSize: L, legendAriaLabel: R, legendValueFormatter: z, margin: B, tooltipContent: V, tooltipFormat: oe = "value", animate: H, animationDuration: U, animationBegin: W, animationEasing: G, showLabels: K = !1, labelPosition: q, labelFormat: se = "value", labelFormatter: ce, labelLine: le = !1, ...ue }, de) => {
-	let J = u({
-		animate: H,
-		animationDuration: U,
-		animationBegin: W,
-		animationEasing: G
-	}), Y = q ?? "outside", fe = T === "donut" ? D : 0, X = f.useMemo(() => I ? s(p, y ?? n) : null, [
-		I,
+var w = f.forwardRef(({ className: t, config: p, palette: b, data: S, dataKey: w, nameKey: T, shape: E = "donut", centerLabel: D, innerRadius: ae = 48, outerRadius: oe, paddingAngle: se = 2, cornerRadius: O, startAngle: k = 90, endAngle: A = -270, minAngle: j, sliceSettings: M, showTooltip: N = !0, showLegend: P = !0, legendFontSize: F, legendAriaLabel: I, legendValueFormatter: L, margin: R, tooltipContent: z, tooltipFormat: B = "value", animate: V, animationDuration: H, animationBegin: ce, animationEasing: U, showLabels: W = !1, labelPosition: G, labelFormat: le = "value", labelFormatter: ue, labelLine: de = !1, ...fe }, pe) => {
+	let me = u({
+		animate: V,
+		animationDuration: H,
+		animationBegin: ce,
+		animationEasing: U
+	}), K = G ?? "outside", he = E === "donut" ? ae : 0, q = f.useMemo(() => P ? s(p, b ?? n) : null, [
+		P,
 		p,
-		y
-	]), pe = f.useMemo(() => X ? x.map((e) => ({
-		value: String(e[w]),
-		dataKey: w,
-		color: X[String(e[w])]?.color ?? `var(--color-${c(String(e[w]))})`,
+		b
+	]), J = f.useMemo(() => q ? S.map((e) => ({
+		value: String(e[T]),
+		dataKey: T,
+		color: q[String(e[T])]?.color ?? `var(--color-${c(String(e[T]))})`,
 		type: "rect",
 		payload: e
 	})) : [], [
-		X,
-		x,
-		w
-	]), Z = x.reduce((e, t) => e + (v(t[C]) ?? 0), 0), Q = (e) => {
+		q,
+		S,
+		T
+	]), Y = !!(P && J.length), X = S.reduce((e, t) => e + (y(t[w]) ?? 0), 0), Z = (e) => {
 		if (!e) return null;
-		let t = P?.[String(e[w])];
-		return t?.hideLabel ? null : b({
-			format: t?.labelFormat ?? se,
-			name: e[w],
-			value: e[C],
-			total: Z,
-			formatter: ce
+		let t = M?.[String(e[T])];
+		return t?.hideLabel ? null : x({
+			format: t?.labelFormat ?? le,
+			name: e[T],
+			value: e[w],
+			total: X,
+			formatter: ue
 		}) || null;
-	}, $ = K && le, me = /* @__PURE__ */ h(ie, {
-		margin: B ?? {
+	}, Q = W && de, ge = /* @__PURE__ */ h(_, {
+		margin: R ?? {
 			top: 0,
 			right: 0,
 			bottom: 0,
 			left: 0
 		},
-		children: [F && /* @__PURE__ */ m(a, { content: V ?? (oe === "value-percent" ? S({
-			nameKey: w,
+		children: [N && /* @__PURE__ */ m(a, { content: z ?? (B === "value-percent" ? C({
+			nameKey: T,
 			config: p,
-			total: Z
+			total: X
 		}) : /* @__PURE__ */ m(o, {
-			nameKey: w,
+			nameKey: T,
 			hideLabel: !0
-		})) }), /* @__PURE__ */ h(re, {
-			data: x,
-			dataKey: C,
-			nameKey: w,
-			innerRadius: fe,
-			outerRadius: O ?? 60,
-			paddingAngle: k,
-			cornerRadius: A,
-			startAngle: j,
-			endAngle: M,
-			minAngle: N,
-			label: $ ? (e) => {
-				let t = Q(e.payload);
+		})) }), /* @__PURE__ */ h(g, {
+			data: S,
+			dataKey: w,
+			nameKey: T,
+			innerRadius: he,
+			outerRadius: oe ?? 60,
+			paddingAngle: se,
+			cornerRadius: O,
+			startAngle: k,
+			endAngle: A,
+			minAngle: j,
+			label: Q ? (e) => {
+				let t = Z(e.payload);
 				return t ? /* @__PURE__ */ m("text", {
 					x: e.x,
 					y: e.y,
@@ -145,52 +145,56 @@ var C = f.forwardRef(({ className: t, config: p, palette: y, data: x, dataKey: C
 					children: t
 				}) : /* @__PURE__ */ m("g", {});
 			} : !1,
-			labelLine: $ ? ({ key: e, payload: t, ...n }) => Q(t) ? /* @__PURE__ */ m(ee, {
+			labelLine: Q ? ({ key: e, payload: t, ...n }) => Z(t) ? /* @__PURE__ */ m(te, {
 				...n,
 				type: "linear",
 				className: "recharts-pie-label-line"
 			}) : /* @__PURE__ */ m("g", {}) : !1,
-			...J,
+			...me,
 			children: [
-				x.map((e, t) => /* @__PURE__ */ m(g, { fill: P?.[String(e[w])]?.color ?? `var(--color-${c(String(e[w]))})` }, t)),
-				T === "donut" && E && /* @__PURE__ */ m(te, { content: ae({ centerLabel: E }) }),
-				K && !$ && /* @__PURE__ */ m(ne, {
-					valueAccessor: (e) => Q(e.payload),
-					position: Y,
-					className: d(Y),
+				S.map((e, t) => /* @__PURE__ */ m(ee, { fill: M?.[String(e[T])]?.color ?? `var(--color-${c(String(e[T]))})` }, t)),
+				E === "donut" && D && /* @__PURE__ */ m(ne, { content: ie({ centerLabel: D }) }),
+				W && !Q && /* @__PURE__ */ m(re, {
+					valueAccessor: (e) => Z(e.payload),
+					position: K,
+					className: d(K),
 					fontSize: 12
 				})
 			]
 		})]
-	}), he = K ? $ ? "size-[320px]" : Y === "outside" || Y === "end" ? "size-[200px]" : "size-[120px]" : "size-[120px]";
+	}), $ = W && (Q || K === "outside" || K === "end") ? 320 : 120, _e = $ === 320 ? "aspect-square w-full max-w-[320px]" : "size-[120px]", ve = $ === 320 ? "max-w-[320px] flex-[1_1_320px]" : "flex-1 basis-[120px]";
 	return /* @__PURE__ */ h("div", {
-		ref: de,
-		"data-shape": T,
-		className: e("flex flex-row items-center gap-4", !I && "justify-center", _({ shape: T }), t),
-		...ue,
+		ref: pe,
+		"data-shape": E,
+		className: e("flex w-full min-w-0 gap-4", Y ? "flex-wrap items-stretch" : "items-center justify-center", v({ shape: E }), t),
+		...fe,
 		children: [/* @__PURE__ */ m("div", {
-			className: e(he, "shrink-0"),
-			children: /* @__PURE__ */ m(r, {
-				config: p,
-				palette: y,
-				className: "size-full",
-				children: me
+			className: e("flex min-w-0 items-center justify-center", Y ? ve : "w-full"),
+			children: /* @__PURE__ */ m("div", {
+				className: _e,
+				children: /* @__PURE__ */ m(r, {
+					config: p,
+					palette: b,
+					className: "size-full",
+					children: ge
+				})
 			})
-		}), I && X && /* @__PURE__ */ m(i, {
+		}), Y && q && /* @__PURE__ */ m(i, {
 			variant: "list",
-			payload: pe,
-			config: X,
-			nameKey: w,
-			fontSize: L,
-			ariaLabel: R,
-			valueKey: C,
-			valueFormatter: z,
-			className: "min-w-0 flex-1"
+			payload: J,
+			config: q,
+			nameKey: T,
+			fontSize: F,
+			ariaLabel: I,
+			valueKey: w,
+			valueFormatter: L,
+			valueClassName: "text-[var(--ui-text-on-surface-primary)]",
+			className: "min-w-0 flex-1 basis-[120px] self-center"
 		})]
 	});
 });
-C.displayName = "PieChart";
+w.displayName = "PieChart";
 //#endregion
-export { C as PieChart, b as pieChartLabelText, x as pieChartValuePercentRow, S as pieChartValuePercentTooltip, _ as pieChartVariants };
+export { w as PieChart, x as pieChartLabelText, S as pieChartValuePercentRow, C as pieChartValuePercentTooltip, v as pieChartVariants };
 //# sourceMappingURL=pie-chart.js.map