npm - @acronis-platform/ui-react - Versions diffs - 3.0.0 → 4.1.0 - Mend

@acronis-platform/ui-react 3.0.0 → 4.1.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 (772) hide show

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

@@ -1,157 +1,96 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as l from "react";
-import { cva as d } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { TimesIcon as g } from "@acronis-platform/icons-react/stroke-mono";
-import { DiamondWarningRedIcon as f, CircleWarningOrangeIcon as b, TriangleWarningYellowIcon as p, CircleCheckGreenIcon as u, CircleInfoBlueIcon as v } from "@acronis-platform/icons-react/stroke-multi";
-import { cn as o } from "../../../lib/utils.js";
-import { ButtonIcon as x } from "../button-icon/button-icon.js";
-const m = d(
-  "relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid min-w-[var(--ui-alert-global-container-width-min)] gap-[var(--ui-alert-global-container-gap)] px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] rounded-[var(--ui-alert-global-container-border-radius)] border-[length:var(--ui-alert-global-container-border-width)] bg-[var(--ui-alert-global-container-background)] before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] before:w-[var(--ui-alert-global-container-status-width)]",
-  {
-    variants: {
-      variant: {
-        info: "border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]",
-        success: "border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]",
-        warning: "border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]",
-        critical: "border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]",
-        danger: "border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]"
-      }
-    },
-    defaultVariants: {
-      variant: "info"
-    }
-  }
-), w = {
-  info: v,
-  success: u,
-  warning: p,
-  critical: b,
-  danger: f
-}, i = l.createContext("info"), y = l.forwardRef(
-  ({ className: t, variant: r, ...a }, n) => /* @__PURE__ */ e(i.Provider, { value: r ?? "info", children: /* @__PURE__ */ e(
-    "div",
-    {
-      ref: n,
-      role: "alert",
-      "data-slot": "alert",
-      "data-variant": r ?? "info",
-      className: o(m({ variant: r }), t),
-      ...a
-    }
-  ) })
-);
-y.displayName = "Alert";
-const A = l.forwardRef(({ className: t, children: r, ...a }, n) => {
-  const c = l.useContext(i), s = w[c];
-  return (
-    // The icon box's padding (4/8) is what optically aligns the 16px glyph with
-    // the first line of the title: glyph centre 8 + 8 = 16, title centre
-    // (AlertText's 4px padding) 4 + 12 = 16.
-    /* @__PURE__ */ e(
-      "div",
-      {
-        ref: n,
-        "data-slot": "alert-icon",
-        className: o(
-          "flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0",
-          t
-        ),
-        ...a,
-        children: r ?? /* @__PURE__ */ e(s, { size: 16 })
-      }
-    )
-  );
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { ButtonIcon as n } from "../button-icon/button-icon.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { TimesIcon as a } from "@acronis-platform/icons-react/stroke-mono";
+import { CircleCheckGreenIcon as o, CircleInfoBlueIcon as s, CircleWarningOrangeIcon as c, DiamondWarningRedIcon as l, TriangleWarningYellowIcon as u } from "@acronis-platform/icons-react/stroke-multi";
+//#region src/components/ui/alert/alert.tsx
+var d = t("relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid min-w-[var(--ui-alert-global-container-width-min)] gap-[var(--ui-alert-global-container-gap)] px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] rounded-[var(--ui-alert-global-container-border-radius)] border-[length:var(--ui-alert-global-container-border-width)] bg-[var(--ui-alert-global-container-background)] before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] before:w-[var(--ui-alert-global-container-status-width)]", {
+	variants: { variant: {
+		info: "border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]",
+		success: "border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]",
+		warning: "border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]",
+		critical: "border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]",
+		danger: "border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]"
+	} },
+	defaultVariants: { variant: "info" }
+}), f = {
+	info: s,
+	success: o,
+	warning: u,
+	critical: c,
+	danger: l
+}, p = r.createContext("info"), m = r.forwardRef(({ className: t, variant: n, ...r }, a) => /* @__PURE__ */ i(p.Provider, {
+	value: n ?? "info",
+	children: /* @__PURE__ */ i("div", {
+		ref: a,
+		role: "alert",
+		"data-slot": "alert",
+		"data-variant": n ?? "info",
+		className: e(d({ variant: n }), t),
+		...r
+	})
+}));
+m.displayName = "Alert";
+var h = r.forwardRef(({ className: t, children: n, ...a }, o) => {
+	let s = f[r.useContext(p)];
+	return /* @__PURE__ */ i("div", {
+		ref: o,
+		"data-slot": "alert-icon",
+		className: e("flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0", t),
+		...a,
+		children: n ?? /* @__PURE__ */ i(s, { size: 16 })
+	});
 });
-A.displayName = "AlertIcon";
-const N = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: a,
-    "data-slot": "alert-content",
-    className: o(
-      "flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]",
-      t
-    ),
-    ...r
-  }
-));
-N.displayName = "AlertContent";
-const h = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: a,
-    "data-slot": "alert-text",
-    className: o(
-      "flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]",
-      t
-    ),
-    ...r
-  }
-));
-h.displayName = "AlertText";
-const C = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
-  "h5",
-  {
-    ref: a,
-    "data-slot": "alert-title",
-    className: o(
-      "ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]",
-      t
-    ),
-    ...r
-  }
-));
-C.displayName = "AlertTitle";
-const I = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
-  "p",
-  {
-    ref: a,
-    "data-slot": "alert-description",
-    className: o(
-      "ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]",
-      t
-    ),
-    ...r
-  }
-));
-I.displayName = "AlertDescription";
-const R = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: a,
-    "data-slot": "alert-actions",
-    className: o(
-      "flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]",
-      t
-    ),
-    ...r
-  }
-));
-R.displayName = "AlertActions";
-const k = l.forwardRef(
-  ({ className: t, ariaLabel: r = "Close", ...a }, n) => /* @__PURE__ */ e(
-    x,
-    {
-      ref: n,
-      "data-slot": "alert-close",
-      className: o("shrink-0", t),
-      ...a,
-      variant: "ghost",
-      "aria-label": r,
-      children: /* @__PURE__ */ e(g, {})
-    }
-  )
-);
-k.displayName = "AlertClose";
-export {
-  y as Alert,
-  R as AlertActions,
-  k as AlertClose,
-  N as AlertContent,
-  I as AlertDescription,
-  A as AlertIcon,
-  h as AlertText,
-  C as AlertTitle,
-  m as alertVariants
-};
-//# sourceMappingURL=alert.js.map
+h.displayName = "AlertIcon";
+var g = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("div", {
+	ref: r,
+	"data-slot": "alert-content",
+	className: e("flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]", t),
+	...n
+}));
+g.displayName = "AlertContent";
+var _ = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("div", {
+	ref: r,
+	"data-slot": "alert-text",
+	className: e("flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]", t),
+	...n
+}));
+_.displayName = "AlertText";
+var v = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("h5", {
+	ref: r,
+	"data-slot": "alert-title",
+	className: e("ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]", t),
+	...n
+}));
+v.displayName = "AlertTitle";
+var y = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("p", {
+	ref: r,
+	"data-slot": "alert-description",
+	className: e("ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]", t),
+	...n
+}));
+y.displayName = "AlertDescription";
+var b = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i("div", {
+	ref: r,
+	"data-slot": "alert-actions",
+	className: e("flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]", t),
+	...n
+}));
+b.displayName = "AlertActions";
+var x = r.forwardRef(({ className: t, ariaLabel: r = "Close", ...o }, s) => /* @__PURE__ */ i(n, {
+	ref: s,
+	"data-slot": "alert-close",
+	className: e("shrink-0", t),
+	...o,
+	variant: "ghost",
+	"aria-label": r,
+	children: /* @__PURE__ */ i(a, {})
+}));
+x.displayName = "AlertClose";
+//#endregion
+export { m as Alert, b as AlertActions, x as AlertClose, g as AlertContent, y as AlertDescription, h as AlertIcon, _ as AlertText, v as AlertTitle, d as alertVariants };
+//# sourceMappingURL=alert.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.js","sources":["../../../../src/components/ui/alert/alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n CircleCheckGreenIcon,\n CircleInfoBlueIcon,\n CircleWarningOrangeIcon,\n DiamondWarningRedIcon,\n TriangleWarningYellowIcon,\n type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIcon, type ButtonIconProps } from '../button-icon';\n\n// Mirrors the Figma \"Alert\" component set (node 7421:125155). The banner is a\n// neutral surface — not a status tint — with the severity carried by two\n// things: a 1px border in the status color and a 6px status line down the\n// leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-alert-` tier (imported in `src/styles/index.css`).\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the padding box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting inside the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the Alert tier's own emitted classes — the title (Inter\n// Regular 18 / 24) and the description (Inter Regular 14 / 24) — the same pair\n// Toast uses, since the two are the same card. The title previously borrowed the\n// semantic `ui-typography-headings-lead` because the tier emitted no title class;\n// it does now, and the two resolve identically today, so a brand that re-styles\n// only Alert's title is honored. Only the colors are separate token references.\n// Every other value is a `var(--ui-alert-)` reference, so a brand override is\n// honored without touching this file.\nconst alertVariants = cva(\n 'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n 'min-w-[var(--ui-alert-global-container-width-min)] ' +\n 'gap-[var(--ui-alert-global-container-gap)] ' +\n 'px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] ' +\n 'rounded-[var(--ui-alert-global-container-border-radius)] ' +\n 'border-[length:var(--ui-alert-global-container-border-width)] ' +\n 'bg-[var(--ui-alert-global-container-background)] ' +\n \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n 'before:w-[var(--ui-alert-global-container-status-width)]',\n {\n variants: {\n variant: {\n info: 'border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]',\n success:\n 'border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]',\n warning:\n 'border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]',\n critical:\n 'border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]',\n danger:\n 'border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]',\n },\n },\n defaultVariants: {\n variant: 'info',\n },\n }\n);\n\nexport type AlertVariant = NonNullable<\n VariantProps<typeof alertVariants>['variant']\n>;\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so unlike the previous\n// monocolor port, nothing here tints them.\nconst STATUS_ICON: Record<AlertVariant, React.ComponentType<IconProps>> = {\n info: CircleInfoBlueIcon,\n success: CircleCheckGreenIcon,\n warning: TriangleWarningYellowIcon,\n critical: CircleWarningOrangeIcon,\n danger: DiamondWarningRedIcon,\n};\n\nconst AlertVariantContext = React.createContext<AlertVariant>('info');\n\nexport interface AlertProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof alertVariants> {}\n\n/\n A status banner: neutral surface, a status-colored border, and a status line\n * down the leading edge. Compose it from `AlertIcon`, `AlertContent`\n * (`AlertText` + `AlertTitle` / `AlertDescription`, optionally `AlertActions`)\n * and `AlertClose`.\n /\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n ({ className, variant, ...props }, ref) => (\n <AlertVariantContext.Provider value={variant ?? 'info'}>\n <div\n ref={ref}\n role=\"alert\"\n data-slot=\"alert\"\n data-variant={variant ?? 'info'}\n className={cn(alertVariants({ variant }), className)}\n {...props}\n />\n </AlertVariantContext.Provider>\n )\n);\nAlert.displayName = 'Alert';\n\n/\n The leading status icon. Renders the variant's own icon when given no\n * `children`; pass children to substitute a different glyph.\n /\nconst AlertIcon = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n const variant = React.useContext(AlertVariantContext);\n const StatusIcon = STATUS_ICON[variant];\n return (\n // The icon box's padding (4/8) is what optically aligns the 16px glyph with\n // the first line of the title: glyph centre 8 + 8 = 16, title centre\n // (AlertText's 4px padding) 4 + 12 = 16.\n <div\n ref={ref}\n data-slot=\"alert-icon\"\n className={cn(\n 'flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0',\n className\n )}\n {...props}\n >\n {children ?? <StatusIcon size={16} />}\n </div>\n );\n});\nAlertIcon.displayName = 'AlertIcon';\n\nconst AlertContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"alert-content\"\n className={cn(\n 'flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]',\n className\n )}\n {...props}\n />\n));\nAlertContent.displayName = 'AlertContent';\n\n/\n The title + description block. Its own vertical padding is what keeps the\n * text aligned with the icon, so keep the title and description inside it\n * rather than directly under `AlertContent`.\n /\nconst AlertText = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"alert-text\"\n className={cn(\n 'flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]',\n className\n )}\n {...props}\n />\n));\nAlertText.displayName = 'AlertText';\n\nconst AlertTitle = React.forwardRef<\n HTMLHeadingElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h5\n ref={ref}\n data-slot=\"alert-title\"\n className={cn(\n 'ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]',\n className\n )}\n {...props}\n />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n data-slot=\"alert-description\"\n className={cn(\n 'ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]',\n className\n )}\n {...props}\n />\n));\nAlertDescription.displayName = 'AlertDescription';\n\n/\n Action buttons under the text. Place inside `AlertContent` (after\n * `AlertText`), as the Figma does — the row wraps when it runs out of width.\n /\nconst AlertActions = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"alert-actions\"\n className={cn(\n 'flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]',\n className\n )}\n {...props}\n />\n));\nAlertActions.displayName = 'AlertActions';\n\n// The spec pins this control to a ghost ButtonIcon with a times glyph, so the\n// props that would change that are omitted from the type instead of merely being\n// defaulted — `...props` spreads after them, so keeping them would let\n// `<AlertClose variant=\"secondary\" />` silently win over the documented behavior.\n//\n// `aria-label` needs the belt and* braces. Omitting it from the type is not\n// enough: TypeScript deliberately skips checking hyphenated JSX attributes (the\n// same rule that lets `data-` through), so `<AlertClose aria-label=\"X\" />` still\n// compiles. Pinning `aria-label` after the spread is what actually makes\n// `ariaLabel` authoritative.\nexport interface AlertCloseProps\n extends Omit<ButtonIconProps, 'children' \| 'variant' \| 'render' \| 'aria-label'> {\n /* Accessible name for the dismiss control. /\n ariaLabel?: string;\n}\n\n/\n The trailing dismiss control. Rendering it is what makes an alert\n * dismissable — wire `onClick` to remove the alert. Name it with `ariaLabel`.\n */\nconst AlertClose = React.forwardRef<HTMLButtonElement, AlertCloseProps>(\n ({ className, ariaLabel = 'Close', ...props }, ref) => (\n <ButtonIcon\n ref={ref}\n data-slot=\"alert-close\"\n className={cn('shrink-0', className)}\n {...props}\n variant=\"ghost\"\n aria-label={ariaLabel}\n >\n <TimesIcon />\n </ButtonIcon>\n )\n);\nAlertClose.displayName = 'AlertClose';\n\nexport {\n Alert,\n AlertIcon,\n AlertContent,\n AlertText,\n AlertTitle,\n AlertDescription,\n AlertActions,\n AlertClose,\n alertVariants,\n};\n"],"names":["alertVariants","cva","STATUS_ICON","CircleInfoBlueIcon","CircleCheckGreenIcon","TriangleWarningYellowIcon","CircleWarningOrangeIcon","DiamondWarningRedIcon","AlertVariantContext","React","Alert","className","variant","props","ref","jsx","cn","AlertIcon","children","StatusIcon","AlertContent","AlertText","AlertTitle","AlertDescription","AlertActions","AlertClose","ariaLabel","ButtonIcon","TimesIcon"],"mappings":"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"}
1	+ {"version":3,"file":"alert.js","names":[],"sources":["../../../../src/components/ui/alert/alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n CircleCheckGreenIcon,\n CircleInfoBlueIcon,\n CircleWarningOrangeIcon,\n DiamondWarningRedIcon,\n TriangleWarningYellowIcon,\n type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIcon, type ButtonIconProps } from '../button-icon';\n\n// Mirrors the Figma \"Alert\" component set (node 7421:125155). The banner is a\n// neutral surface — not a status tint — with the severity carried by two\n// things: a 1px border in the status color and a 6px status line down the\n// leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-alert-` tier (imported in `src/styles/index.css`).\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the padding box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting inside the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the Alert tier's own emitted classes — the title (Inter\n// Regular 18 / 24) and the description (Inter Regular 14 / 24) — the same pair\n// Toast uses, since the two are the same card. The title previously borrowed the\n// semantic `ui-typography-headings-lead` because the tier emitted no title class;\n// it does now, and the two resolve identically today, so a brand that re-styles\n// only Alert's title is honored. Only the colors are separate token references.\n// Every other value is a `var(--ui-alert-)` reference, so a brand override is\n// honored without touching this file.\nconst alertVariants = cva(\n 'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n 'min-w-[var(--ui-alert-global-container-width-min)] ' +\n 'gap-[var(--ui-alert-global-container-gap)] ' +\n 'px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] ' +\n 'rounded-[var(--ui-alert-global-container-border-radius)] ' +\n 'border-[length:var(--ui-alert-global-container-border-width)] ' +\n 'bg-[var(--ui-alert-global-container-background)] ' +\n \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n 'before:w-[var(--ui-alert-global-container-status-width)]',\n {\n variants: {\n variant: {\n info: 'border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]',\n success:\n 'border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]',\n warning:\n 'border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]',\n critical:\n 'border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]',\n danger:\n 'border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]',\n },\n },\n defaultVariants: {\n variant: 'info',\n },\n }\n);\n\nexport type AlertVariant = NonNullable<\n VariantProps<typeof alertVariants>['variant']\n>;\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so unlike the previous\n// monocolor port, nothing here tints them.\nconst STATUS_ICON: Record<AlertVariant, React.ComponentType<IconProps>> = {\n info: CircleInfoBlueIcon,\n success: CircleCheckGreenIcon,\n warning: TriangleWarningYellowIcon,\n critical: CircleWarningOrangeIcon,\n danger: DiamondWarningRedIcon,\n};\n\nconst AlertVariantContext = React.createContext<AlertVariant>('info');\n\nexport interface AlertProps\n extends\n React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof alertVariants> {}\n\n/\n A status banner: neutral surface, a status-colored border, and a status line\n * down the leading edge. Compose it from `AlertIcon`, `AlertContent`\n * (`AlertText` + `AlertTitle` / `AlertDescription`, optionally `AlertActions`)\n * and `AlertClose`.\n /\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n ({ className, variant, ...props }, ref) => (\n <AlertVariantContext.Provider value={variant ?? 'info'}>\n <div\n ref={ref}\n role=\"alert\"\n data-slot=\"alert\"\n data-variant={variant ?? 'info'}\n className={cn(alertVariants({ variant }), className)}\n {...props}\n />\n </AlertVariantContext.Provider>\n )\n);\nAlert.displayName = 'Alert';\n\n/\n The leading status icon. Renders the variant's own icon when given no\n * `children`; pass children to substitute a different glyph.\n /\nconst AlertIcon = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n const variant = React.useContext(AlertVariantContext);\n const StatusIcon = STATUS_ICON[variant];\n return (\n // The icon box's padding (4/8) is what optically aligns the 16px glyph with\n // the first line of the title: glyph centre 8 + 8 = 16, title centre\n // (AlertText's 4px padding) 4 + 12 = 16.\n <div\n ref={ref}\n data-slot=\"alert-icon\"\n className={cn(\n 'flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0',\n className\n )}\n {...props}\n >\n {children ?? <StatusIcon size={16} />}\n </div>\n );\n});\nAlertIcon.displayName = 'AlertIcon';\n\nconst AlertContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"alert-content\"\n className={cn(\n 'flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]',\n className\n )}\n {...props}\n />\n));\nAlertContent.displayName = 'AlertContent';\n\n/\n The title + description block. Its own vertical padding is what keeps the\n * text aligned with the icon, so keep the title and description inside it\n * rather than directly under `AlertContent`.\n /\nconst AlertText = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"alert-text\"\n className={cn(\n 'flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]',\n className\n )}\n {...props}\n />\n));\nAlertText.displayName = 'AlertText';\n\nconst AlertTitle = React.forwardRef<\n HTMLHeadingElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h5\n ref={ref}\n data-slot=\"alert-title\"\n className={cn(\n 'ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]',\n className\n )}\n {...props}\n />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n data-slot=\"alert-description\"\n className={cn(\n 'ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]',\n className\n )}\n {...props}\n />\n));\nAlertDescription.displayName = 'AlertDescription';\n\n/\n Action buttons under the text. Place inside `AlertContent` (after\n * `AlertText`), as the Figma does — the row wraps when it runs out of width.\n /\nconst AlertActions = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"alert-actions\"\n className={cn(\n 'flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]',\n className\n )}\n {...props}\n />\n));\nAlertActions.displayName = 'AlertActions';\n\n// The spec pins this control to a ghost ButtonIcon with a times glyph, so the\n// props that would change that are omitted from the type instead of merely being\n// defaulted — `...props` spreads after them, so keeping them would let\n// `<AlertClose variant=\"secondary\" />` silently win over the documented behavior.\n//\n// `aria-label` needs the belt and* braces. Omitting it from the type is not\n// enough: TypeScript deliberately skips checking hyphenated JSX attributes (the\n// same rule that lets `data-` through), so `<AlertClose aria-label=\"X\" />` still\n// compiles. Pinning `aria-label` after the spread is what actually makes\n// `ariaLabel` authoritative.\nexport interface AlertCloseProps\n extends Omit<ButtonIconProps, 'children' \| 'variant' \| 'render' \| 'aria-label'> {\n /* Accessible name for the dismiss control. /\n ariaLabel?: string;\n}\n\n/\n The trailing dismiss control. Rendering it is what makes an alert\n * dismissable — wire `onClick` to remove the alert. Name it with `ariaLabel`.\n */\nconst AlertClose = React.forwardRef<HTMLButtonElement, AlertCloseProps>(\n ({ className, ariaLabel = 'Close', ...props }, ref) => (\n <ButtonIcon\n ref={ref}\n data-slot=\"alert-close\"\n className={cn('shrink-0', className)}\n {...props}\n variant=\"ghost\"\n aria-label={ariaLabel}\n >\n <TimesIcon />\n </ButtonIcon>\n )\n);\nAlertClose.displayName = 'AlertClose';\n\nexport {\n Alert,\n AlertIcon,\n AlertContent,\n AlertText,\n AlertTitle,\n AlertDescription,\n AlertActions,\n AlertClose,\n alertVariants,\n};\n"],"mappings":";;;;;;;;;AA+CA,IAAM,IAAgB,EACpB,2kBASA;CACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SACE;EACF,SACE;EACF,UACE;EACF,QACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF,GASM,IAAoE;CACxE,MAAM;CACN,SAAS;CACT,SAAS;CACT,UAAU;CACV,QAAQ;AACV,GAEM,IAAsB,EAAM,cAA4B,MAAM,GAa9D,IAAQ,EAAM,YACjB,EAAE,cAAW,YAAS,GAAG,KAAS,MACjC,kBAAC,EAAoB,UAArB;CAA8B,OAAO,KAAW;CAC9C,UAAA,kBAAC,OAAD;EACO;EACL,MAAK;EACL,aAAU;EACV,gBAAc,KAAW;EACzB,WAAW,EAAG,EAAc,EAAE,WAAQ,CAAC,GAAG,CAAS;EACnD,GAAI;CACL,CAAA;AAC2B,CAAA,CAElC;AACA,EAAM,cAAc;AAMpB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,aAAU,GAAG,KAAS,MAAQ;CAE5C,IAAM,IAAa,EADH,EAAM,WAAW,CACF;CAC/B,OAIE,kBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,EACT,oLACA,CACF;EACA,GAAI;EAEH,UAAA,KAAY,kBAAC,GAAD,EAAY,MAAM,GAAK,CAAA;CACjC,CAAA;AAET,CAAC;AACD,EAAU,cAAc;AAExB,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,iLACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc;AAO3B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,uPACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAa,EAAM,YAGtB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,wIACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAW,cAAc;AAEzB,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,KAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,+IACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAiB,cAAc;AAM/B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,0TACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc;AAsB3B,IAAM,IAAa,EAAM,YACtB,EAAE,cAAW,eAAY,SAAS,GAAG,KAAS,MAC7C,kBAAC,GAAD;CACO;CACL,aAAU;CACV,WAAW,EAAG,YAAY,CAAS;CACnC,GAAI;CACJ,SAAQ;CACR,cAAY;CAEZ,UAAA,kBAAC,GAAD,CAAY,CAAA;AACF,CAAA,CAEhB;AACA,EAAW,cAAc"}