@acronis-platform/shadcn-uikit 0.21.0 → 0.22.0

package/dist/components/ui/widget-alert.d.ts

@@ -0,0 +1,40 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+/**
+ * WidgetAlert — Dashboard alert notification widget.
+ * Figma: Charts-anatomy / Alert-Widget (node 201:65481)
+ *
+ * Variants: info, success, warning, danger
+ * Sizes: compact (112px), default (176px), expanded (with description + actions)
+ * States: hover, active, focus
+ *
+ * Anatomy:
+ * - WidgetAlert (root)
+ *   - WidgetAlertIcon (left icon, 16x16)
+ *   - WidgetAlertContent
+ *     - WidgetAlertTitle (semibold, 14px)
+ *     - WidgetAlertDate (regular, 14px)
+ *     - WidgetAlertDescription (regular, 14px)
+ *   - WidgetAlertActions (right side, more icon)
+ *
+ * Spacing: 24px horizontal padding, 16px vertical padding, 8px gap between title and description
+ * Colors per variant:
+ *   info: bg=fixed-info-accent, border=fixed-info
+ *   success: bg=fixed-success-accent, border=fixed-success
+ *   warning: bg=fixed-warning-accent, border=fixed-warning
+ *   danger: bg=fixed-danger-accent, border=fixed-danger
+ */
+declare const widgetAlertVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "danger" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface WidgetAlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof widgetAlertVariants> {
+}
+declare const WidgetAlert: React.ForwardRefExoticComponent<WidgetAlertProps & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetAlertIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetAlertContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetAlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetAlertDate: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetAlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const WidgetAlertActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { WidgetAlert, WidgetAlertIcon, WidgetAlertContent, WidgetAlertTitle, WidgetAlertDate, WidgetAlertDescription, WidgetAlertActions, widgetAlertVariants, };

package/dist/components/ui/widget-alert.js

@@ -0,0 +1,111 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as i from "react";
+import { cva as l } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as s } from "../../lib/utils.js";
+const n = l(
+  "relative flex items-start rounded-lg border transition-colors",
+  {
+    variants: {
+      variant: {
+        info: "bg-[var(--av-fixed-info-accent)] border-[var(--av-fixed-info)]",
+        success: "bg-[var(--av-fixed-success-accent)] border-[var(--av-fixed-success)]",
+        warning: "bg-[var(--av-fixed-warning-accent)] border-[var(--av-fixed-warning)]",
+        danger: "bg-[var(--av-fixed-danger-accent)] border-[var(--av-fixed-danger)]"
+      },
+      interactive: {
+        true: "cursor-pointer hover:bg-[var(--av-el-secondary-hover)] active:bg-[var(--av-el-secondary-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--av-fixed-focus)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "info",
+      interactive: !1
+    }
+  }
+), v = i.forwardRef(
+  ({ className: a, variant: t, interactive: e, ...d }, o) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: o,
+      role: "alert",
+      tabIndex: e ? 0 : void 0,
+      className: s(n({ variant: t, interactive: e }), a),
+      ...d
+    }
+  )
+);
+v.displayName = "WidgetAlert";
+const f = i.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: e,
+    className: s(
+      "flex-shrink-0 flex items-start pl-6 pt-4 [&>svg]:h-4 [&>svg]:w-4",
+      a
+    ),
+    ...t
+  }
+));
+f.displayName = "WidgetAlertIcon";
+const c = i.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: e,
+    className: s(
+      "flex-1 flex flex-col gap-2 px-4 py-4 min-w-0 text-[var(--av-fixed-primary)]",
+      a
+    ),
+    ...t
+  }
+));
+c.displayName = "WidgetAlertContent";
+const g = i.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: e,
+    className: s("text-sm font-semibold leading-6 truncate", a),
+    ...t
+  }
+));
+g.displayName = "WidgetAlertTitle";
+const m = i.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: e,
+    className: s("text-sm leading-6 text-[var(--av-fixed-primary)]", a),
+    ...t
+  }
+));
+m.displayName = "WidgetAlertDate";
+const x = i.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+  "p",
+  {
+    ref: e,
+    className: s("text-sm leading-6 text-[var(--av-fixed-primary)]", a),
+    ...t
+  }
+));
+x.displayName = "WidgetAlertDescription";
+const p = i.forwardRef(({ className: a, ...t }, e) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: e,
+    className: s(
+      "flex-shrink-0 flex items-start pr-6 pt-4 text-[var(--av-brand-primary)] [&>svg]:h-4 [&>svg]:w-4",
+      a
+    ),
+    ...t
+  }
+));
+p.displayName = "WidgetAlertActions";
+export {
+  v as WidgetAlert,
+  p as WidgetAlertActions,
+  c as WidgetAlertContent,
+  m as WidgetAlertDate,
+  x as WidgetAlertDescription,
+  f as WidgetAlertIcon,
+  g as WidgetAlertTitle,
+  n as widgetAlertVariants
+};
+//# sourceMappingURL=widget-alert.js.map

package/dist/components/ui/widget-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-alert.js","sources":["../../../src/components/ui/widget-alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * WidgetAlert — Dashboard alert notification widget.\n * Figma: Charts-anatomy / Alert-Widget (node 201:65481)\n *\n * Variants: info, success, warning, danger\n * Sizes: compact (112px), default (176px), expanded (with description + actions)\n * States: hover, active, focus\n *\n * Anatomy:\n * - WidgetAlert (root)\n *   - WidgetAlertIcon (left icon, 16x16)\n *   - WidgetAlertContent\n *     - WidgetAlertTitle (semibold, 14px)\n *     - WidgetAlertDate (regular, 14px)\n *     - WidgetAlertDescription (regular, 14px)\n *   - WidgetAlertActions (right side, more icon)\n *\n * Spacing: 24px horizontal padding, 16px vertical padding, 8px gap between title and description\n * Colors per variant:\n *   info: bg=fixed-info-accent, border=fixed-info\n *   success: bg=fixed-success-accent, border=fixed-success\n *   warning: bg=fixed-warning-accent, border=fixed-warning\n *   danger: bg=fixed-danger-accent, border=fixed-danger\n */\n\nconst widgetAlertVariants = cva(\n  'relative flex items-start rounded-lg border transition-colors',\n  {\n    variants: {\n      variant: {\n        info: 'bg-[var(--av-fixed-info-accent)] border-[var(--av-fixed-info)]',\n        success: 'bg-[var(--av-fixed-success-accent)] border-[var(--av-fixed-success)]',\n        warning: 'bg-[var(--av-fixed-warning-accent)] border-[var(--av-fixed-warning)]',\n        danger: 'bg-[var(--av-fixed-danger-accent)] border-[var(--av-fixed-danger)]',\n      },\n      interactive: {\n        true: 'cursor-pointer hover:bg-[var(--av-el-secondary-hover)] active:bg-[var(--av-el-secondary-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--av-fixed-focus)]',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n      interactive: false,\n    },\n  }\n)\n\nexport interface WidgetAlertProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof widgetAlertVariants> {}\n\nconst WidgetAlert = React.forwardRef<HTMLDivElement, WidgetAlertProps>(\n  ({ className, variant, interactive, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"alert\"\n      tabIndex={interactive ? 0 : undefined}\n      className={cn(widgetAlertVariants({ variant, interactive }), className)}\n      {...props}\n    />\n  )\n)\nWidgetAlert.displayName = 'WidgetAlert'\n\nconst WidgetAlertIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex-shrink-0 flex items-start pl-6 pt-4 [&>svg]:h-4 [&>svg]:w-4',\n      className\n    )}\n    {...props}\n  />\n))\nWidgetAlertIcon.displayName = 'WidgetAlertIcon'\n\nconst WidgetAlertContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex-1 flex flex-col gap-2 px-4 py-4 min-w-0 text-[var(--av-fixed-primary)]',\n      className\n    )}\n    {...props}\n  />\n))\nWidgetAlertContent.displayName = 'WidgetAlertContent'\n\nconst WidgetAlertTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-sm font-semibold leading-6 truncate', className)}\n    {...props}\n  />\n))\nWidgetAlertTitle.displayName = 'WidgetAlertTitle'\n\nconst WidgetAlertDate = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-sm leading-6 text-[var(--av-fixed-primary)]', className)}\n    {...props}\n  />\n))\nWidgetAlertDate.displayName = 'WidgetAlertDate'\n\nconst WidgetAlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('text-sm leading-6 text-[var(--av-fixed-primary)]', className)}\n    {...props}\n  />\n))\nWidgetAlertDescription.displayName = 'WidgetAlertDescription'\n\nconst WidgetAlertActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex-shrink-0 flex items-start pr-6 pt-4 text-[var(--av-brand-primary)] [&>svg]:h-4 [&>svg]:w-4',\n      className\n    )}\n    {...props}\n  />\n))\nWidgetAlertActions.displayName = 'WidgetAlertActions'\n\nexport {\n  WidgetAlert,\n  WidgetAlertIcon,\n  WidgetAlertContent,\n  WidgetAlertTitle,\n  WidgetAlertDate,\n  WidgetAlertDescription,\n  WidgetAlertActions,\n  widgetAlertVariants,\n}\n"],"names":["widgetAlertVariants","cva","WidgetAlert","React","className","variant","interactive","props","ref","jsx","cn","WidgetAlertIcon","WidgetAlertContent","WidgetAlertTitle","WidgetAlertDate","WidgetAlertDescription","WidgetAlertActions"],"mappings":";;;;AA8BA,MAAMA,IAAsBC;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,MAAA;AAAA,MAEV,aAAa;AAAA,QACX,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAMMC,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,aAAAC,GAAa,GAAGC,EAAA,GAASC,MAC9C,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAK;AAAA,MACL,UAAUF,IAAc,IAAI;AAAA,MAC5B,WAAWI,EAAGV,EAAoB,EAAE,SAAAK,GAAS,aAAAC,EAAA,CAAa,GAAGF,CAAS;AAAA,MACrE,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV;AACAL,EAAY,cAAc;AAE1B,MAAMS,IAAkBR,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,EAAA;AACN,CACD;AACDI,EAAgB,cAAc;AAE9B,MAAMC,IAAqBT,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,EAAA;AACN,CACD;AACDK,EAAmB,cAAc;AAEjC,MAAMC,IAAmBV,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,4CAA4CN,CAAS;AAAA,IAClE,GAAGG;AAAA,EAAA;AACN,CACD;AACDM,EAAiB,cAAc;AAE/B,MAAMC,IAAkBX,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,oDAAoDN,CAAS;AAAA,IAC1E,GAAGG;AAAA,EAAA;AACN,CACD;AACDO,EAAgB,cAAc;AAE9B,MAAMC,IAAyBZ,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,oDAAoDN,CAAS;AAAA,IAC1E,GAAGG;AAAA,EAAA;AACN,CACD;AACDQ,EAAuB,cAAc;AAErC,MAAMC,IAAqBb,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,EAAA;AACN,CACD;AACDS,EAAmB,cAAc;"}

package/dist/components/ui/widget-placeholder.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+/**
+ * WidgetPlaceholder — Empty state / placeholder widget for dashboard.
+ * Figma: Charts-anatomy / Placeholders (node 229:73962)
+ *
+ * Shows a placeholder with icon, title, and optional description/action.
+ * Two sizes: default (with large icon) and compact (with small icon).
+ * Background: inversed-primary, Border: brand-light
+ * Icon: brand-light (placeholder icon), fixed-link (action icon)
+ *
+ * States: hover (el-secondary-hover), active (el-secondary-active), focus (fixed-focus)
+ */
+export interface WidgetPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {
+    interactive?: boolean;
+}
+declare const WidgetPlaceholder: React.ForwardRefExoticComponent<WidgetPlaceholderProps & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderImage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderText: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { WidgetPlaceholder, WidgetPlaceholderHeader, WidgetPlaceholderTitle, WidgetPlaceholderIcon, WidgetPlaceholderContent, WidgetPlaceholderImage, WidgetPlaceholderText, WidgetPlaceholderAction, WidgetPlaceholderFooter, };

package/dist/components/ui/widget-placeholder.js

@@ -0,0 +1,112 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as d } from "../../lib/utils.js";
+const i = l.forwardRef(
+  ({ className: a, interactive: e, ...r }, o) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: o,
+      tabIndex: e ? 0 : void 0,
+      className: d(
+        "relative flex flex-col rounded-lg border border-[var(--av-brand-light)] bg-[var(--av-inversed-primary)] text-[var(--av-fixed-primary)] transition-colors",
+        e && "cursor-pointer hover:bg-[var(--av-el-secondary-hover)] active:bg-[var(--av-el-secondary-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--av-fixed-focus)]",
+        a
+      ),
+      ...r
+    }
+  )
+);
+i.displayName = "WidgetPlaceholder";
+const s = l.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: r,
+    className: d("flex items-center gap-2 px-6 pt-4 pb-2", a),
+    ...e
+  }
+));
+s.displayName = "WidgetPlaceholderHeader";
+const c = l.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: r,
+    className: d("flex-1 truncate text-sm font-semibold leading-6", a),
+    ...e
+  }
+));
+c.displayName = "WidgetPlaceholderTitle";
+const n = l.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: r,
+    className: d("flex-shrink-0 text-[var(--av-fixed-link)] [&>svg]:h-4 [&>svg]:w-4", a),
+    ...e
+  }
+));
+n.displayName = "WidgetPlaceholderIcon";
+const f = l.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: r,
+    className: d(
+      "flex-1 flex flex-col items-center justify-center gap-2 px-6 py-4 text-center",
+      a
+    ),
+    ...e
+  }
+));
+f.displayName = "WidgetPlaceholderContent";
+const v = l.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: r,
+    className: d(
+      "flex items-center justify-center text-[var(--av-brand-light)] [&>svg]:h-[72px] [&>svg]:w-[72px]",
+      a
+    ),
+    ...e
+  }
+));
+v.displayName = "WidgetPlaceholderImage";
+const m = l.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: r,
+    className: d("text-sm leading-6 text-[var(--av-fixed-primary)]", a),
+    ...e
+  }
+));
+m.displayName = "WidgetPlaceholderText";
+const x = l.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: r,
+    className: d(
+      "text-sm font-semibold text-[var(--av-fixed-link)] cursor-pointer hover:underline",
+      a
+    ),
+    ...e
+  }
+));
+x.displayName = "WidgetPlaceholderAction";
+const g = l.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: r,
+    className: d("px-6 pb-4 pt-0 text-xs", a),
+    ...e
+  }
+));
+g.displayName = "WidgetPlaceholderFooter";
+export {
+  i as WidgetPlaceholder,
+  x as WidgetPlaceholderAction,
+  f as WidgetPlaceholderContent,
+  g as WidgetPlaceholderFooter,
+  s as WidgetPlaceholderHeader,
+  n as WidgetPlaceholderIcon,
+  v as WidgetPlaceholderImage,
+  m as WidgetPlaceholderText,
+  c as WidgetPlaceholderTitle
+};
+//# sourceMappingURL=widget-placeholder.js.map

package/dist/components/ui/widget-placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-placeholder.js","sources":["../../../src/components/ui/widget-placeholder.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * WidgetPlaceholder — Empty state / placeholder widget for dashboard.\n * Figma: Charts-anatomy / Placeholders (node 229:73962)\n *\n * Shows a placeholder with icon, title, and optional description/action.\n * Two sizes: default (with large icon) and compact (with small icon).\n * Background: inversed-primary, Border: brand-light\n * Icon: brand-light (placeholder icon), fixed-link (action icon)\n *\n * States: hover (el-secondary-hover), active (el-secondary-active), focus (fixed-focus)\n */\n\nexport interface WidgetPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {\n  interactive?: boolean\n}\n\nconst WidgetPlaceholder = React.forwardRef<HTMLDivElement, WidgetPlaceholderProps>(\n  ({ className, interactive, ...props }, ref) => (\n    <div\n      ref={ref}\n      tabIndex={interactive ? 0 : undefined}\n      className={cn(\n        'relative flex flex-col rounded-lg border border-[var(--av-brand-light)] bg-[var(--av-inversed-primary)] text-[var(--av-fixed-primary)] transition-colors',\n        interactive && 'cursor-pointer hover:bg-[var(--av-el-secondary-hover)] active:bg-[var(--av-el-secondary-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--av-fixed-focus)]',\n        className\n      )}\n      {...props}\n    />\n  )\n)\nWidgetPlaceholder.displayName = 'WidgetPlaceholder'\n\nconst WidgetPlaceholderHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center gap-2 px-6 pt-4 pb-2', className)}\n    {...props}\n  />\n))\nWidgetPlaceholderHeader.displayName = 'WidgetPlaceholderHeader'\n\nconst WidgetPlaceholderTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex-1 truncate text-sm font-semibold leading-6', className)}\n    {...props}\n  />\n))\nWidgetPlaceholderTitle.displayName = 'WidgetPlaceholderTitle'\n\nconst WidgetPlaceholderIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex-shrink-0 text-[var(--av-fixed-link)] [&>svg]:h-4 [&>svg]:w-4', className)}\n    {...props}\n  />\n))\nWidgetPlaceholderIcon.displayName = 'WidgetPlaceholderIcon'\n\nconst WidgetPlaceholderContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex-1 flex flex-col items-center justify-center gap-2 px-6 py-4 text-center',\n      className\n    )}\n    {...props}\n  />\n))\nWidgetPlaceholderContent.displayName = 'WidgetPlaceholderContent'\n\nconst WidgetPlaceholderImage = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-center text-[var(--av-brand-light)] [&>svg]:h-[72px] [&>svg]:w-[72px]',\n      className\n    )}\n    {...props}\n  />\n))\nWidgetPlaceholderImage.displayName = 'WidgetPlaceholderImage'\n\nconst WidgetPlaceholderText = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-sm leading-6 text-[var(--av-fixed-primary)]', className)}\n    {...props}\n  />\n))\nWidgetPlaceholderText.displayName = 'WidgetPlaceholderText'\n\nconst WidgetPlaceholderAction = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'text-sm font-semibold text-[var(--av-fixed-link)] cursor-pointer hover:underline',\n      className\n    )}\n    {...props}\n  />\n))\nWidgetPlaceholderAction.displayName = 'WidgetPlaceholderAction'\n\nconst WidgetPlaceholderFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('px-6 pb-4 pt-0 text-xs', className)}\n    {...props}\n  />\n))\nWidgetPlaceholderFooter.displayName = 'WidgetPlaceholderFooter'\n\nexport {\n  WidgetPlaceholder,\n  WidgetPlaceholderHeader,\n  WidgetPlaceholderTitle,\n  WidgetPlaceholderIcon,\n  WidgetPlaceholderContent,\n  WidgetPlaceholderImage,\n  WidgetPlaceholderText,\n  WidgetPlaceholderAction,\n  WidgetPlaceholderFooter,\n}\n"],"names":["WidgetPlaceholder","React","className","interactive","props","ref","jsx","cn","WidgetPlaceholderHeader","WidgetPlaceholderTitle","WidgetPlaceholderIcon","WidgetPlaceholderContent","WidgetPlaceholderImage","WidgetPlaceholderText","WidgetPlaceholderAction","WidgetPlaceholderFooter"],"mappings":";;;AAoBA,MAAMA,IAAoBC,EAAM;AAAA,EAC9B,CAAC,EAAE,WAAAC,GAAW,aAAAC,GAAa,GAAGC,EAAA,GAASC,MACrC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,UAAUF,IAAc,IAAI;AAAA,MAC5B,WAAWI;AAAA,QACT;AAAA,QACAJ,KAAe;AAAA,QACfD;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAkB,cAAc;AAEhC,MAAMQ,IAA0BP,EAAM,WAGpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,0CAA0CL,CAAS;AAAA,IAChE,GAAGE;AAAA,EAAA;AACN,CACD;AACDI,EAAwB,cAAc;AAEtC,MAAMC,IAAyBR,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,mDAAmDL,CAAS;AAAA,IACzE,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAuB,cAAc;AAErC,MAAMC,IAAwBT,EAAM,WAGlC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,qEAAqEL,CAAS;AAAA,IAC3F,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAsB,cAAc;AAEpC,MAAMC,IAA2BV,EAAM,WAGrC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDO,EAAyB,cAAc;AAEvC,MAAMC,IAAyBX,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDQ,EAAuB,cAAc;AAErC,MAAMC,IAAwBZ,EAAM,WAGlC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,oDAAoDL,CAAS;AAAA,IAC1E,GAAGE;AAAA,EAAA;AACN,CACD;AACDS,EAAsB,cAAc;AAEpC,MAAMC,IAA0Bb,EAAM,WAGpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDU,EAAwB,cAAc;AAEtC,MAAMC,IAA0Bd,EAAM,WAGpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,0BAA0BL,CAAS;AAAA,IAChD,GAAGE;AAAA,EAAA;AACN,CACD;AACDW,EAAwB,cAAc;"}

package/dist/components/ui/widget-progress-chunks.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+/**
+ * WidgetProgressChunks — Chunked progress visualization widget.
+ * Figma: Charts-anatomy / Progress-Chunks (node 237:74702)
+ *
+ * Shows progress as discrete colored chunks/segments with labels and values.
+ * Colors: chart-success, chart-warning, chart-critical, chart-danger
+ * Background: inversed-primary, Border: brand-light
+ * Divider: brand-accent
+ *
+ * Anatomy:
+ * - WidgetProgressChunks (root)
+ *   - Header: title + icon
+ *   - Chunks: rows of labeled progress segments
+ *   - Footer: optional summary
+ *
+ * States: hover, active, focus, focus-data
+ */
+export interface ProgressChunk {
+    label: string;
+    value: number;
+    total: number;
+    color: string;
+}
+export interface WidgetProgressChunksProps extends React.HTMLAttributes<HTMLDivElement> {
+    interactive?: boolean;
+}
+declare const WidgetProgressChunks: React.ForwardRefExoticComponent<WidgetProgressChunksProps & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetProgressChunksHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetProgressChunksTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetProgressChunksIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetProgressChunksBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface WidgetProgressChunkRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    value: number;
+    total: number;
+    color: string;
+    formatValue?: (value: number) => string;
+    formatTotal?: (total: number) => string;
+}
+declare const WidgetProgressChunkRow: React.ForwardRefExoticComponent<WidgetProgressChunkRowProps & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetProgressChunksFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { WidgetProgressChunks, WidgetProgressChunksHeader, WidgetProgressChunksTitle, WidgetProgressChunksIcon, WidgetProgressChunksBody, WidgetProgressChunkRow, WidgetProgressChunksFooter, };

package/dist/components/ui/widget-progress-chunks.js

@@ -0,0 +1,103 @@
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as o } from "../../lib/utils.js";
+const h = i.forwardRef(
+  ({ className: r, interactive: s, ...e }, d) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: d,
+      tabIndex: s ? 0 : void 0,
+      className: o(
+        "relative flex flex-col rounded-lg border border-[var(--av-brand-light)] bg-[var(--av-inversed-primary)] text-[var(--av-fixed-primary)] transition-colors",
+        s && "cursor-pointer hover:bg-[var(--av-el-secondary-hover)] active:bg-[var(--av-el-secondary-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--av-fixed-focus)]",
+        r
+      ),
+      ...e
+    }
+  )
+);
+h.displayName = "WidgetProgressChunks";
+const p = i.forwardRef(({ className: r, ...s }, e) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: e,
+    className: o("flex items-center gap-2 px-6 pt-4 pb-2", r),
+    ...s
+  }
+));
+p.displayName = "WidgetProgressChunksHeader";
+const x = i.forwardRef(({ className: r, ...s }, e) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: e,
+    className: o("flex-1 truncate text-sm font-semibold leading-6", r),
+    ...s
+  }
+));
+x.displayName = "WidgetProgressChunksTitle";
+const b = i.forwardRef(({ className: r, ...s }, e) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: e,
+    className: o("flex-shrink-0 text-[var(--av-fixed-link)] [&>svg]:h-4 [&>svg]:w-4", r),
+    ...s
+  }
+));
+b.displayName = "WidgetProgressChunksIcon";
+const y = i.forwardRef(({ className: r, ...s }, e) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: e,
+    className: o("flex flex-col gap-2 px-6 py-2", r),
+    ...s
+  }
+));
+y.displayName = "WidgetProgressChunksBody";
+const N = i.forwardRef(
+  ({ className: r, label: s, value: e, total: d, color: c, formatValue: n, formatTotal: l, ...g }, f) => {
+    const v = d > 0 ? e / d * 100 : 0, m = n ? n(e) : String(e), u = l ? l(d) : String(d);
+    return /* @__PURE__ */ t("div", { ref: f, className: o("flex flex-col gap-1", r), ...g, children: [
+      /* @__PURE__ */ t("div", { className: "flex items-center justify-between text-xs", children: [
+        /* @__PURE__ */ a("span", { className: "text-[var(--av-fixed-primary)]", children: s }),
+        /* @__PURE__ */ t("span", { className: "font-semibold tabular-nums", children: [
+          m,
+          " / ",
+          u
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "h-2 w-full overflow-hidden rounded bg-[var(--av-brand-light)]", children: /* @__PURE__ */ a(
+        "div",
+        {
+          className: "h-full rounded transition-all",
+          style: {
+            width: `${Math.min(v, 100)}%`,
+            backgroundColor: c
+          }
+        }
+      ) })
+    ] });
+  }
+);
+N.displayName = "WidgetProgressChunkRow";
+const k = i.forwardRef(({ className: r, ...s }, e) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: e,
+    className: o(
+      "border-t border-[var(--av-brand-accent)] px-6 py-2 text-xs",
+      r
+    ),
+    ...s
+  }
+));
+k.displayName = "WidgetProgressChunksFooter";
+export {
+  N as WidgetProgressChunkRow,
+  h as WidgetProgressChunks,
+  y as WidgetProgressChunksBody,
+  k as WidgetProgressChunksFooter,
+  p as WidgetProgressChunksHeader,
+  b as WidgetProgressChunksIcon,
+  x as WidgetProgressChunksTitle
+};
+//# sourceMappingURL=widget-progress-chunks.js.map

package/dist/components/ui/widget-progress-chunks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-progress-chunks.js","sources":["../../../src/components/ui/widget-progress-chunks.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * WidgetProgressChunks — Chunked progress visualization widget.\n * Figma: Charts-anatomy / Progress-Chunks (node 237:74702)\n *\n * Shows progress as discrete colored chunks/segments with labels and values.\n * Colors: chart-success, chart-warning, chart-critical, chart-danger\n * Background: inversed-primary, Border: brand-light\n * Divider: brand-accent\n *\n * Anatomy:\n * - WidgetProgressChunks (root)\n *   - Header: title + icon\n *   - Chunks: rows of labeled progress segments\n *   - Footer: optional summary\n *\n * States: hover, active, focus, focus-data\n */\n\nexport interface ProgressChunk {\n  label: string\n  value: number\n  total: number\n  color: string\n}\n\nexport interface WidgetProgressChunksProps extends React.HTMLAttributes<HTMLDivElement> {\n  interactive?: boolean\n}\n\nconst WidgetProgressChunks = React.forwardRef<HTMLDivElement, WidgetProgressChunksProps>(\n  ({ className, interactive, ...props }, ref) => (\n    <div\n      ref={ref}\n      tabIndex={interactive ? 0 : undefined}\n      className={cn(\n        'relative flex flex-col rounded-lg border border-[var(--av-brand-light)] bg-[var(--av-inversed-primary)] text-[var(--av-fixed-primary)] transition-colors',\n        interactive && 'cursor-pointer hover:bg-[var(--av-el-secondary-hover)] active:bg-[var(--av-el-secondary-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--av-fixed-focus)]',\n        className\n      )}\n      {...props}\n    />\n  )\n)\nWidgetProgressChunks.displayName = 'WidgetProgressChunks'\n\nconst WidgetProgressChunksHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center gap-2 px-6 pt-4 pb-2', className)}\n    {...props}\n  />\n))\nWidgetProgressChunksHeader.displayName = 'WidgetProgressChunksHeader'\n\nconst WidgetProgressChunksTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex-1 truncate text-sm font-semibold leading-6', className)}\n    {...props}\n  />\n))\nWidgetProgressChunksTitle.displayName = 'WidgetProgressChunksTitle'\n\nconst WidgetProgressChunksIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex-shrink-0 text-[var(--av-fixed-link)] [&>svg]:h-4 [&>svg]:w-4', className)}\n    {...props}\n  />\n))\nWidgetProgressChunksIcon.displayName = 'WidgetProgressChunksIcon'\n\nconst WidgetProgressChunksBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col gap-2 px-6 py-2', className)}\n    {...props}\n  />\n))\nWidgetProgressChunksBody.displayName = 'WidgetProgressChunksBody'\n\nexport interface WidgetProgressChunkRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string\n  value: number\n  total: number\n  color: string\n  formatValue?: (value: number) => string\n  formatTotal?: (total: number) => string\n}\n\nconst WidgetProgressChunkRow = React.forwardRef<HTMLDivElement, WidgetProgressChunkRowProps>(\n  ({ className, label, value, total, color, formatValue, formatTotal, ...props }, ref) => {\n    const pct = total > 0 ? (value / total) * 100 : 0\n    const displayValue = formatValue ? formatValue(value) : String(value)\n    const displayTotal = formatTotal ? formatTotal(total) : String(total)\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-1', className)} {...props}>\n        <div className=\"flex items-center justify-between text-xs\">\n          <span className=\"text-[var(--av-fixed-primary)]\">{label}</span>\n          <span className=\"font-semibold tabular-nums\">\n            {displayValue} / {displayTotal}\n          </span>\n        </div>\n        <div className=\"h-2 w-full overflow-hidden rounded bg-[var(--av-brand-light)]\">\n          <div\n            className=\"h-full rounded transition-all\"\n            style={{\n              width: `${Math.min(pct, 100)}%`,\n              backgroundColor: color,\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\nWidgetProgressChunkRow.displayName = 'WidgetProgressChunkRow'\n\nconst WidgetProgressChunksFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'border-t border-[var(--av-brand-accent)] px-6 py-2 text-xs',\n      className\n    )}\n    {...props}\n  />\n))\nWidgetProgressChunksFooter.displayName = 'WidgetProgressChunksFooter'\n\nexport {\n  WidgetProgressChunks,\n  WidgetProgressChunksHeader,\n  WidgetProgressChunksTitle,\n  WidgetProgressChunksIcon,\n  WidgetProgressChunksBody,\n  WidgetProgressChunkRow,\n  WidgetProgressChunksFooter,\n}\n"],"names":["WidgetProgressChunks","React","className","interactive","props","ref","jsx","cn","WidgetProgressChunksHeader","WidgetProgressChunksTitle","WidgetProgressChunksIcon","WidgetProgressChunksBody","WidgetProgressChunkRow","label","value","total","color","formatValue","formatTotal","pct","displayValue","displayTotal","jsxs","WidgetProgressChunksFooter"],"mappings":"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"}

package/dist/components/ui/widget-progress-tiers.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+/**
+ * WidgetProgressTiers — Tiered progress bar widget for dashboard.
+ * Figma: Charts-anatomy / Progress-Tiers (node 229:70578)
+ *
+ * Shows a horizontal stacked bar with colored tiers and labels.
+ * Colors: chart-success, chart-warning, chart-critical, chart-danger, chart-neutral
+ * Background: inversed-primary, Border: brand-light
+ * Divider: brand-accent
+ *
+ * Anatomy:
+ * - WidgetProgressTiers (root)
+ *   - Header: title + icon + dropdown
+ *   - Bar: stacked horizontal segments
+ *   - Legend: tier labels with values
+ *   - Footer: optional summary
+ *
+ * States: hover (el-secondary-hover), active (el-secondary-active), focus (fixed-focus), focus-data (fixed-focus on tier)
+ */
+export interface ProgressTier {
+    label: string;
+    value: number;
+    color: string;
+}
+export interface WidgetProgressTiersProps extends React.HTMLAttributes<HTMLDivElement> {
+    interactive?: boolean;
+}
+declare const WidgetProgressTiers: React.ForwardRefExoticComponent<WidgetProgressTiersProps & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetProgressTiersHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetProgressTiersTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetProgressTiersIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface WidgetProgressTiersBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    tiers: ProgressTier[];
+    total?: number;
+}
+declare const WidgetProgressTiersBar: React.ForwardRefExoticComponent<WidgetProgressTiersBarProps & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetProgressTiersLegend: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface WidgetProgressTiersLegendItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    color: string;
+    label: string;
+    value?: string | number;
+}
+declare const WidgetProgressTiersLegendItem: React.ForwardRefExoticComponent<WidgetProgressTiersLegendItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetProgressTiersFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { WidgetProgressTiers, WidgetProgressTiersHeader, WidgetProgressTiersTitle, WidgetProgressTiersIcon, WidgetProgressTiersBar, WidgetProgressTiersLegend, WidgetProgressTiersLegendItem, WidgetProgressTiersFooter, };