@hashicorp/mds-react 0.9.0

package/dist/components/visualizations/donut-chart/components/external-arc-label/index.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { useRef as a, useState as h, useEffect as m } from "react";
+import { animated as s } from "@react-spring/web";
+import n from "./styles.module.css.js";
+const l = 180, g = (e) => {
+  const i = a(null), [o, c] = h(0);
+  return m(() => {
+    i.current && c(i.current.offsetHeight);
+  }, []), /* @__PURE__ */ r(s.g, { opacity: e.style.opacity, children: [
+    /* @__PURE__ */ t(
+      s.path,
+      {
+        fill: "none",
+        d: e.style.path,
+        stroke: e.style.linkColor,
+        strokeWidth: e.style.thickness
+      }
+    ),
+    /* @__PURE__ */ t(
+      s.g,
+      {
+        transform: e.style.textPosition,
+        textAnchor: e.style.textAnchor,
+        className: n.containerWrapper,
+        children: /* @__PURE__ */ t(
+          "g",
+          {
+            className: n.container,
+            style: {
+              "--container-width": `${l}px`,
+              "--container-height": `${o}px`
+            },
+            children: /* @__PURE__ */ t(
+              "foreignObject",
+              {
+                dominantBaseline: "central",
+                width: l,
+                height: o,
+                children: /* @__PURE__ */ r("div", { ref: i, className: n.lockup, children: [
+                  /* @__PURE__ */ r("div", { className: n.value, children: [
+                    e.datum.value,
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ t("div", { className: n.label, children: e.datum.label })
+                ] })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  g as useRenderArcLinkLabelComponent
+};
+//# sourceMappingURL=index.js.map

package/dist/components/visualizations/donut-chart/components/external-arc-label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/visualizations/donut-chart/components/external-arc-label/index.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport { animated } from '@react-spring/web'\nimport type { ComputedDatum, DefaultRawDatum } from '@nivo/pie'\nimport type { ArcLinkLabelComponent } from '@nivo/arcs'\nimport s from './styles.module.css'\n\nconst FOREIGN_OBJECT_WIDTH = 180\n\nexport const useRenderArcLinkLabelComponent: typeof ArcLinkLabelComponent<\n\tComputedDatum<DefaultRawDatum>\n> = (d) => {\n\tconst lockupRef = useRef<HTMLDivElement>(null)\n\tconst [foreignObjectHeight, setForeignObjectHeight] = useState(0)\n\n\tuseEffect(() => {\n\t\tif (lockupRef.current) {\n\t\t\tsetForeignObjectHeight(lockupRef.current.offsetHeight)\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<animated.g opacity={d.style.opacity}>\n\t\t\t<animated.path\n\t\t\t\tfill=\"none\"\n\t\t\t\td={d.style.path}\n\t\t\t\tstroke={d.style.linkColor}\n\t\t\t\tstrokeWidth={d.style.thickness}\n\t\t\t/>\n\t\t\t<animated.g\n\t\t\t\ttransform={d.style.textPosition}\n\t\t\t\ttextAnchor={d.style.textAnchor}\n\t\t\t\tclassName={s.containerWrapper}\n\t\t\t>\n\t\t\t\t<g\n\t\t\t\t\tclassName={s.container}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t['--container-width' as string]: `${FOREIGN_OBJECT_WIDTH}px`,\n\t\t\t\t\t\t['--container-height' as string]: `${foreignObjectHeight}px`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<foreignObject\n\t\t\t\t\t\tdominantBaseline=\"central\"\n\t\t\t\t\t\twidth={FOREIGN_OBJECT_WIDTH}\n\t\t\t\t\t\theight={foreignObjectHeight}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div ref={lockupRef} className={s.lockup}>\n\t\t\t\t\t\t\t<div className={s.value}>{d.datum.value}%</div>\n\t\t\t\t\t\t\t<div className={s.label}>{d.datum.label}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</foreignObject>\n\t\t\t\t</g>\n\t\t\t</animated.g>\n\t\t</animated.g>\n\t)\n}\n"],"names":["FOREIGN_OBJECT_WIDTH","d","lockupRef","useRef","foreignObjectHeight","setForeignObjectHeight","useState","useEffect","jsxs","animated","jsx","s"],"mappings":";;;;;AAUO,MAAMA,IAAA,SAGiC,CAAAC,MAAA;AAC7C,QAAMC,IAACC,EAAA,IAAqB,GAE5B,CAAAC,GAAgBC,CAAA,IAAAC,EAAA,CAAA;AACf,SAAAC,EAAI,MAAU;AACb,iBACDF,EAAAH,EAAA,QAAA,YAAA;AAAA,EAGD,QAEE,gBAAAM,EAAAC,EAAA,GAAA,EAAA,SAAAR,EAAA,MAAA,SAAA,UAAA;AAAA,IAAU,gBAAAS;AAAA,MAATD,EAAA;AAAA,MAAA;AAAA,QAEA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,QAAAR,EAAA;QAAqB,aAAAA,EAAA,MAAA;AAAA,MACtB;AAAA,IAAA;AAAA,IACU,gBAAAS;AAAA,MAATD,EAAA;AAAA,MAAA;AAAA,QAEA,WAAAR,QAAc;AAAA,QACd,YAAWA,EAAE,MAAA;AAAA,QAEb;QAAA,UAAC,gBAAAS;AAAA,UAAA;AAAA,UAAA;AAAA,YAEA,WAAOC,EAAA;AAAA,YAAA;cAEL,qBAA8B,GAAGX,CAAsB;AAAA,cACzD,sBAAA,GAAAI,CAAA;AAAA,YAEA;AAAA,YAAA,UAAC,gBAAAM;AAAA,cAAA;AAAA,cAAA;AAAA,gBAEA,kBAAO;AAAA,gBACP;gBAEA;gBACC,UAAC,gBAAAF,EAAA,OAAI,EAAA,KAAaN,GAAQ,WAAAS,EAAA,QAAA,UAAA;AAAA,kBAAQ,gBAAAH,EAAA,OAAA,EAAA,WAAAG,EAAA,OAAA,UAAA;AAAA,oBAAMV,EAAA,MAAA;AAAA;kBAAC,EAAA,CAAA;AAAA,kBAE1C,gBAAAS,EAAA,OAAA,EAAA,WAAAC,EAAA,OAAA,UAAAV,EAAA,MAAA,MAAA,CAAA;AAAA,gBAAA,EAAA,CAAA;AAAA,cAAA;AAAA,YACD;AAAA,UAAA;AAAA,QACD;AAAA,MAAA;AAAA;EAIJ,EAAA,CAAA;;"}

package/dist/components/visualizations/donut-chart/components/external-arc-label/styles.module.css

@@ -0,0 +1,32 @@
+.containerWrapper[text-anchor='end'] {
+	& .container {
+		--transform-x: calc(var(--container-width) * -1);
+
+		direction: rtl;
+	}
+}
+
+.container {
+	--transform-y: calc(var(--container-height) / -2);
+	--transform-x: 0;
+
+	transform: translate(var(--transform-x), var(--transform-y));
+}
+
+.lockup {
+	display: flex;
+	flex-direction: column;
+	text-wrap: balance;
+	color: var(--mds-color-foreground-primary);
+}
+
+.value {
+	font-size: 2.75rem;
+	font-weight: 700;
+	line-height: 1em;
+}
+
+.label {
+	font-weight: 600;
+	line-height: 1.15em;
+}

package/dist/components/visualizations/donut-chart/components/external-arc-label/styles.module.css.js

@@ -0,0 +1,16 @@
+const a = "containerWrapper__L6jJb", n = "container__0ahUu", e = "lockup__7l75G", o = "value__AL9Ol", c = "label__oG0LT", l = {
+  containerWrapper: a,
+  container: n,
+  lockup: e,
+  value: o,
+  label: c
+};
+export {
+  n as container,
+  a as containerWrapper,
+  l as default,
+  c as label,
+  e as lockup,
+  o as value
+};
+//# sourceMappingURL=styles.module.css.js.map

package/dist/components/visualizations/donut-chart/components/external-arc-label/styles.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/visualizations/donut-chart/components/index.d.ts

@@ -0,0 +1,3 @@
+export { renderArcTooltip } from './arc-tooltip';
+export { useRenderArcLinkLabelComponent } from './external-arc-label';
+export { useRenderArcLabelComponent } from './internal-arc-label';

package/dist/components/visualizations/donut-chart/components/internal-arc-label/index.d.ts

@@ -0,0 +1,3 @@
+import { ComputedDatum, DefaultRawDatum } from '@nivo/pie';
+import { ArcLabelComponent } from '@nivo/arcs';
+export declare const useRenderArcLabelComponent: typeof ArcLabelComponent<ComputedDatum<DefaultRawDatum>>;

package/dist/components/visualizations/donut-chart/components/internal-arc-label/index.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs as s, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { useRef as g, useState as c, useEffect as d } from "react";
+import { animated as a } from "@react-spring/web";
+import p from "classnames";
+import o from "./styles.module.css.js";
+import { getContrastYIQ as u, hexToRgb as b } from "../../../../../utils/get-contrast-yiq.js";
+const C = (t) => {
+  const r = g(null), [i, l] = c(0), [n, m] = c(0);
+  d(() => {
+    r.current && (l(r.current.offsetWidth), m(r.current.offsetHeight));
+  }, []);
+  const f = u(b(t.datum.color));
+  return /* @__PURE__ */ s(h, { children: [
+    /* @__PURE__ */ e("path", {}),
+    /* @__PURE__ */ e(a.g, { transform: t.style.transform, opacity: t.style.progress, children: /* @__PURE__ */ e(
+      "g",
+      {
+        className: o.container,
+        style: {
+          "--container-width": `${i}px`,
+          "--container-height": `${n}px`
+        },
+        children: /* @__PURE__ */ e(
+          a.foreignObject,
+          {
+            width: i,
+            height: n,
+            children: /* @__PURE__ */ e("div", { className: p(o.label, o[f]), children: /* @__PURE__ */ s("div", { ref: r, children: [
+              t.datum.value,
+              "%"
+            ] }) })
+          }
+        )
+      }
+    ) })
+  ] });
+};
+export {
+  C as useRenderArcLabelComponent
+};
+//# sourceMappingURL=index.js.map

package/dist/components/visualizations/donut-chart/components/internal-arc-label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/visualizations/donut-chart/components/internal-arc-label/index.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport { animated } from '@react-spring/web'\nimport type { ComputedDatum, DefaultRawDatum } from '@nivo/pie'\nimport type { ArcLabelComponent } from '@nivo/arcs'\nimport classNames from 'classnames'\nimport s from './styles.module.css'\nimport { getContrastYIQ, hexToRgb } from '../../../../../utils/get-contrast-yiq'\n\nexport const useRenderArcLabelComponent: typeof ArcLabelComponent<\n\tComputedDatum<DefaultRawDatum>\n> = (d) => {\n\tconst labelRef = useRef<HTMLDivElement>(null)\n\tconst [foreignObjectWidth, setForeignObjectWidth] = useState(0)\n\tconst [foreignObjectHeight, setForeignObjectHeight] = useState(0)\n\n\tuseEffect(() => {\n\t\tif (labelRef.current) {\n\t\t\tsetForeignObjectWidth(labelRef.current.offsetWidth)\n\t\t\tsetForeignObjectHeight(labelRef.current.offsetHeight)\n\t\t}\n\t}, [])\n\n\tconst textColor = getContrastYIQ(hexToRgb(d.datum.color))\n\treturn (\n\t\t<>\n\t\t\t<path />\n\t\t\t<animated.g transform={d.style.transform} opacity={d.style.progress}>\n\t\t\t\t<g\n\t\t\t\t\tclassName={s.container}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t['--container-width' as string]: `${foreignObjectWidth}px`,\n\t\t\t\t\t\t['--container-height' as string]: `${foreignObjectHeight}px`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<animated.foreignObject\n\t\t\t\t\t\twidth={foreignObjectWidth}\n\t\t\t\t\t\theight={foreignObjectHeight}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={classNames(s.label, s[textColor])}>\n\t\t\t\t\t\t\t<div ref={labelRef}>{d.datum.value}%</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</animated.foreignObject>\n\t\t\t\t</g>\n\t\t\t</animated.g>\n\t\t</>\n\t)\n}\n"],"names":["d","labelRef","useRef","foreignObjectWidth","setForeignObjectWidth","useState","foreignObjectHeight","setForeignObjectHeight","useEffect","jsxs","Fragment","jsx","animated","s","classNames","textColor"],"mappings":";;;;;;;AAaC,UAA4C,CAAAA,MAAA;AAC5C,QAAMC,IAACC,EAAA,IAAoB,GACrB,CAACC,GAAAC,CAAqB,IAAsBC,EAAI,IAEtD,CAAAC,GAAgBC,CAAA,IAAAF,EAAA,CAAA;AACf,EAAAG,EAAI,MAAS;AACZ,kBACAJ,EAAAH,EAAuB,sBACxBM,EAAAN,EAAA,QAAA,YAAA;AAAA,EAGD,GAAA,CAAA,CAAA;AACA,wBAEE,KAAA,CAAA;AAAA,SAAC,gBAAAQ,EAAAC,GAAK,EAAA,UAAA;AAAA,IACN,gBAAAC,EAAC,QAAA,CAAS,CAAA;AAAA,IACR,gBAAAA,EAAAC,EAAA,GAAA,EAAA,WAAAZ,EAAA,MAAA,WAAA,SAAAA,EAAA,MAAA,UAAA,UAAA,gBAAAW;AAAA,MAAA;AAAA,MAAA;AAAA,QAEA,WAAOE,EAAA;AAAA,QAAA;UAEL,qBAA8B,GAAGV,CAAG;AAAA,UACtC,sBAAA,GAAAG,CAAA;AAAA,QAEA;AAAA,QAAA,UAAU,gBAAAK;AAAA,UAATC,EAAA;AAAA,UAAA;AAAA,YAEA;YAEA,QAAAN;AAAA,YACsB,UAAQ,gBAAAK,EAAA,OAAA,EAAA,WAAAG,EAAAD,EAAA,OAAAA,EAAAE,CAAA,CAAA,GAAA,UAAA,gBAAAN,EAAA,OAAA,EAAA,KAAAR,GAAA,UAAA;AAAA,cAAMD,EAAA,MAAA;AAAA,cAAA;AAAA,YACpC,EAAA,CAAA,EAAA,CAAA;AAAA,UAAA;AAAA,QACD;AAAA,MACD;AAAA,MAEF,CAAA;AAAA,EAEF,EAAA,CAAA;;"}

package/dist/components/visualizations/donut-chart/components/internal-arc-label/styles.module.css

@@ -0,0 +1,20 @@
+.container {
+	--transform-y: calc(var(--container-height) / -2);
+	--transform-x: calc(var(--container-width) / -2);
+
+	transform: translate(var(--transform-x), var(--transform-y));
+	pointer-events: none;
+}
+
+.label {
+	display: flex;
+	font-size: 1.15em;
+}
+
+.light {
+	color: #fff;
+}
+
+.dark {
+	color: #000;
+}

package/dist/components/visualizations/donut-chart/components/internal-arc-label/styles.module.css.js

@@ -0,0 +1,14 @@
+const t = "container__zNSm3", a = "label__lanZz", l = "light__cA0lL", n = "dark__tX3sL", c = {
+  container: t,
+  label: a,
+  light: l,
+  dark: n
+};
+export {
+  t as container,
+  n as dark,
+  c as default,
+  a as label,
+  l as light
+};
+//# sourceMappingURL=styles.module.css.js.map

package/dist/components/visualizations/donut-chart/components/internal-arc-label/styles.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/visualizations/donut-chart/index.d.ts

@@ -0,0 +1,10 @@
+import { DonutChartData, DonutChartProps } from './types';
+export declare const DonutChart: {
+    ({ data }: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface DonutChartPanelProps {
+    tabId?: string;
+    data: DonutChartData[];
+    groupIndex?: number;
+}

package/dist/components/visualizations/donut-chart/index.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { ResponsivePie as g } from "@nivo/pie";
+import f from "use-resize-observer";
+import m from "classnames";
+import { Tabs as c } from "../../tabs/index.js";
+import { useTabsContext as L } from "../../tabs/use-tabs-context.js";
+import o from "./styles.module.css.js";
+import { renderArcTooltip as h } from "./components/arc-tooltip/index.js";
+import { useRenderArcLinkLabelComponent as d } from "./components/external-arc-label/index.js";
+import { useRenderArcLabelComponent as k } from "./components/internal-arc-label/index.js";
+const C = (e) => e > 4 ? 24 : 16, A = (e) => e === "xsmall" ? { top: 10, right: 0, bottom: 10, left: 0 } : e === "small" ? { top: 10, right: 40, bottom: 20, left: 40 } : { top: 80, right: 210, bottom: 84, left: 210 }, N = ({ data: e }) => e.length > 1 ? /* @__PURE__ */ i(c.Provider, { size: "large", children: [
+  /* @__PURE__ */ t(c.TabList, { children: e.map((r, a) => /* @__PURE__ */ t(c.Tab, { className: o.tab, children: r.groupName }, a)) }),
+  /* @__PURE__ */ t(D, { data: e })
+] }) : /* @__PURE__ */ t(p, { data: e });
+N.displayName = "DonutChart";
+const D = ({ data: e }) => {
+  const { selectedTabIndex: r, tabIds: a } = L(), n = a[r];
+  return /* @__PURE__ */ t(p, { tabId: n, data: e, groupIndex: r });
+}, p = ({
+  tabId: e,
+  data: r,
+  groupIndex: a = 0
+}) => {
+  const [n, s] = b("regular"), { ref: u } = f({
+    onResize: ({ width: l }) => {
+      l && l < 360 ? s("xsmall") : l && l < 600 ? s("small") : s("regular");
+    }
+  });
+  return /* @__PURE__ */ i(
+    "figure",
+    {
+      className: m(
+        o["chart-container"],
+        r.length > 1 && o.multiple
+      ),
+      id: r[a].groupId,
+      role: "tabpanel",
+      tabIndex: 0,
+      "aria-label": e ? void 0 : r[a].groupName,
+      "aria-labelledby": e || void 0,
+      children: [
+        /* @__PURE__ */ i("div", { className: m(o.chart, o[n]), ref: u, children: [
+          /* @__PURE__ */ t(
+            g,
+            {
+              data: r[a].groupData,
+              margin: A(n),
+              enableArcLabels: n !== "regular",
+              enableArcLinkLabels: n === "regular",
+              arcLabelsComponent: k,
+              arcLinkLabelComponent: d,
+              arcLinkLabelsSkipAngle: C(
+                r[a].groupData.length
+              ),
+              tooltip: h,
+              "aria-hidden": "true",
+              colors: { datum: "data.color" },
+              innerRadius: 0.5,
+              padAngle: 1,
+              cornerRadius: 8,
+              activeOuterRadiusOffset: 4,
+              arcLinkLabelsThickness: 1,
+              arcLinkLabelsOffset: 4,
+              arcLinkLabelsDiagonalLength: 28,
+              arcLinkLabelsStraightLength: 24,
+              arcLabelsSkipAngle: 16
+            }
+          ),
+          r[a].groupCaption && /* @__PURE__ */ t("figcaption", { children: r[a].groupCaption })
+        ] }),
+        n !== "regular" && /* @__PURE__ */ t("ul", { className: o.legend, "aria-hidden": "true", children: r[a].groupData.map((l) => /* @__PURE__ */ i("li", { children: [
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: o["legend-dot"],
+              style: { background: l.color }
+            }
+          ),
+          l.label
+        ] }, l.id)) })
+      ]
+    }
+  );
+};
+export {
+  N as DonutChart
+};
+//# sourceMappingURL=index.js.map

package/dist/components/visualizations/donut-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/visualizations/donut-chart/index.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport { ResponsivePie } from '@nivo/pie'\nimport type { DonutChartData, DonutChartProps, DonutChartSize } from './types'\nimport useResizeObserver from 'use-resize-observer'\nimport classNames from 'classnames'\nimport { Tabs } from '../../tabs'\nimport {\n\trenderArcTooltip,\n\tuseRenderArcLabelComponent,\n\tuseRenderArcLinkLabelComponent,\n} from './components'\nimport { useTabsContext } from '../../tabs/use-tabs-context'\nimport s from './styles.module.css'\n\nconst getArcLinkLabelsSkipAngle = (count: number): number => {\n\tif (count > 4) {\n\t\treturn 24\n\t}\n\n\treturn 16\n}\n\nconst getMargins = (\n\tsize: DonutChartSize\n): {\n\ttop?: number\n\tright?: number\n\tbottom?: number\n\tleft?: number\n} => {\n\tif (size === 'xsmall') {\n\t\treturn { top: 10, right: 0, bottom: 10, left: 0 }\n\t} else if (size === 'small') {\n\t\treturn { top: 10, right: 40, bottom: 20, left: 40 }\n\t} else {\n\t\treturn { top: 80, right: 210, bottom: 84, left: 210 }\n\t}\n}\n\nexport const DonutChart = ({ data }: DonutChartProps) =>\n\tdata.length > 1 ? (\n\t\t<Tabs.Provider size=\"large\">\n\t\t\t<Tabs.TabList>\n\t\t\t\t{data.map((group, i) => (\n\t\t\t\t\t<Tabs.Tab key={i} className={s.tab}>\n\t\t\t\t\t\t{group.groupName}\n\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t))}\n\t\t\t</Tabs.TabList>\n\t\t\t<DonutChartPanelWithTabCtx data={data} />\n\t\t</Tabs.Provider>\n\t) : (\n\t\t<DonutChartPanel data={data} />\n\t)\n\nDonutChart.displayName = 'DonutChart'\n\nconst DonutChartPanelWithTabCtx = ({ data }: { data: DonutChartData[] }) => {\n\tconst { selectedTabIndex, tabIds } = useTabsContext()\n\n\tconst tabId = tabIds[selectedTabIndex]\n\n\treturn (\n\t\t<DonutChartPanel tabId={tabId} data={data} groupIndex={selectedTabIndex} />\n\t)\n}\n\nexport interface DonutChartPanelProps {\n\ttabId?: string\n\tdata: DonutChartData[]\n\tgroupIndex?: number\n}\n\nconst DonutChartPanel = ({\n\ttabId,\n\tdata,\n\tgroupIndex = 0,\n}: DonutChartPanelProps) => {\n\tconst [size, setSize] = useState<DonutChartSize>('regular')\n\tconst { ref } = useResizeObserver<HTMLDivElement>({\n\t\tonResize: ({ width }) => {\n\t\t\tif (width && width < 360) {\n\t\t\t\tsetSize('xsmall')\n\t\t\t} else if (width && width < 600) {\n\t\t\t\tsetSize('small')\n\t\t\t} else {\n\t\t\t\tsetSize('regular')\n\t\t\t}\n\t\t},\n\t})\n\n\treturn (\n\t\t<figure\n\t\t\tclassName={classNames(\n\t\t\t\ts['chart-container'],\n\t\t\t\tdata.length > 1 && s.multiple\n\t\t\t)}\n\t\t\tid={data[groupIndex].groupId}\n\t\t\trole=\"tabpanel\"\n\t\t\ttabIndex={0}\n\t\t\taria-label={tabId ? undefined : data[groupIndex].groupName}\n\t\t\taria-labelledby={tabId || undefined}\n\t\t>\n\t\t\t<div className={classNames(s.chart, s[size])} ref={ref}>\n\t\t\t\t<ResponsivePie\n\t\t\t\t\tdata={data[groupIndex].groupData}\n\t\t\t\t\tmargin={getMargins(size)}\n\t\t\t\t\tenableArcLabels={size !== 'regular'}\n\t\t\t\t\tenableArcLinkLabels={size === 'regular'}\n\t\t\t\t\tarcLabelsComponent={useRenderArcLabelComponent}\n\t\t\t\t\tarcLinkLabelComponent={useRenderArcLinkLabelComponent}\n\t\t\t\t\tarcLinkLabelsSkipAngle={getArcLinkLabelsSkipAngle(\n\t\t\t\t\t\tdata[groupIndex].groupData.length\n\t\t\t\t\t)}\n\t\t\t\t\ttooltip={renderArcTooltip}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tcolors={{ datum: 'data.color' }}\n\t\t\t\t\tinnerRadius={0.5}\n\t\t\t\t\tpadAngle={1}\n\t\t\t\t\tcornerRadius={8}\n\t\t\t\t\tactiveOuterRadiusOffset={4}\n\t\t\t\t\tarcLinkLabelsThickness={1}\n\t\t\t\t\tarcLinkLabelsOffset={4}\n\t\t\t\t\tarcLinkLabelsDiagonalLength={28}\n\t\t\t\t\tarcLinkLabelsStraightLength={24}\n\t\t\t\t\tarcLabelsSkipAngle={16}\n\t\t\t\t/>\n\t\t\t\t{data[groupIndex].groupCaption && (\n\t\t\t\t\t<figcaption>{data[groupIndex].groupCaption}</figcaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{size !== 'regular' && (\n\t\t\t\t<ul className={s.legend} aria-hidden=\"true\">\n\t\t\t\t\t{data[groupIndex].groupData.map((record) => (\n\t\t\t\t\t\t<li key={record.id}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclassName={s['legend-dot']}\n\t\t\t\t\t\t\t\tstyle={{ background: record.color }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{record.label}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</figure>\n\t)\n}\n"],"names":["getArcLinkLabelsSkipAngle","count","getMargins","size","DonutChart","data","jsxs","Tabs","jsx","group","i","s","DonutChartPanelWithTabCtx","DonutChartPanel","selectedTabIndex","useTabsContext","tabId","tabIds","groupIndex","setSize","useResizeObserver","width","classNames","ref","ResponsivePie","useRenderArcLabelComponent","renderArcTooltip","record"],"mappings":"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"}

package/dist/components/visualizations/donut-chart/styles.module.css

@@ -0,0 +1,73 @@
+.chart-container {
+	position: relative;
+	background: var(--mds-accent-border-color, var(--mds-color-border-primary));
+	border-radius: var(--mds-spacing-04);
+	margin: 0;
+	padding: 2rem;
+	isolation: isolate;
+	&.multiple {
+		margin-top: 2rem;
+	}
+	&::after {
+		content: '';
+		position: absolute;
+		z-index: -1;
+		inset: var(--mds-accent-border-width, 1px);
+		background-color: var(--mds-color-surface-primary);
+		border-radius: calc(
+			var(--mds-spacing-04) - var(--mds-accent-border-width, 1px)
+		);
+	}
+}
+
+.chart {
+	position: relative;
+	margin-inline: auto;
+	&.regular {
+		aspect-ratio: 7 / 4;
+		max-height: 540px;
+	}
+	&.small {
+		height: 360px;
+	}
+	&.xsmall {
+		height: 280px;
+	}
+	& > div {
+		position: absolute;
+	}
+	& svg {
+		display: block;
+	}
+	& figcaption {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+}
+
+.legend {
+	display: grid;
+	gap: 1rem 2rem;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	color: var(--mds-color-foreground-primary);
+	& li {
+		display: flex;
+		gap: 8px;
+		line-height: 1.25em;
+	}
+}
+
+.legend-dot {
+	flex-shrink: 0;
+	width: 20px;
+	height: 20px;
+}

package/dist/components/visualizations/donut-chart/styles.module.css.js

@@ -0,0 +1,20 @@
+const l = "multiple__wNVrv", e = "chart__e2uI3", t = "regular__ZEuW4", a = "small__mxvr9", r = "xsmall__XrerL", n = "legend__t7i7f", _ = {
+  "chart-container": "chart-container__uF6xN",
+  multiple: l,
+  chart: e,
+  regular: t,
+  small: a,
+  xsmall: r,
+  legend: n,
+  "legend-dot": "legend-dot__1ramU"
+};
+export {
+  e as chart,
+  _ as default,
+  n as legend,
+  l as multiple,
+  t as regular,
+  a as small,
+  r as xsmall
+};
+//# sourceMappingURL=styles.module.css.js.map

package/dist/components/visualizations/donut-chart/styles.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/visualizations/donut-chart/types.d.ts

@@ -0,0 +1,16 @@
+export interface DonutChartSlice {
+    id: string;
+    label: string;
+    value: number;
+    color: string;
+}
+export type DonutChartData = {
+    groupId: string;
+    groupName: string;
+    groupCaption?: string;
+    groupData: DonutChartSlice[];
+};
+export interface DonutChartProps {
+    data: DonutChartData[];
+}
+export type DonutChartSize = 'regular' | 'small' | 'xsmall';

package/dist/hooks/use-media-query/index.js

@@ -0,0 +1,16 @@
+import { useState as r, useEffect as i } from "react";
+function o(s) {
+  const [t, n] = r(!1);
+  return i(() => {
+    const e = window.matchMedia(s);
+    e.matches !== t && n(e.matches);
+    const a = (c) => {
+      n(c.matches);
+    };
+    return e.addEventListener("change", a), () => e.removeEventListener("change", a);
+  }, [t, s]), t;
+}
+export {
+  o as useMediaQuery
+};
+//# sourceMappingURL=index.js.map

package/dist/hooks/use-media-query/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../hooks/use-media-query/index.ts"],"sourcesContent":["import { useState, useEffect } from 'react'\n\nfunction useMediaQuery(query: string) {\n\tconst [matches, setMatches] = useState(false)\n\n\tuseEffect(() => {\n\t\tconst media = window.matchMedia(query)\n\t\tif (media.matches !== matches) {\n\t\t\tsetMatches(media.matches)\n\t\t}\n\n\t\tconst listener = (event: MediaQueryListEvent) => {\n\t\t\tsetMatches(event.matches)\n\t\t}\n\n\t\tmedia.addEventListener('change', listener)\n\t\treturn () => media.removeEventListener('change', listener)\n\t}, [matches, query])\n\n\treturn matches\n}\n\nexport { useMediaQuery }\n"],"names":["useMediaQuery","query","matches","setMatches","useState","useEffect","media","listener","event"],"mappings":";AAEA,SAASA,EAAcC,GAAe;AACrC,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK;AAE5C,SAAAC,EAAU,MAAM;AACf,UAAMC,IAAQ,OAAO,WAAWL,CAAK;AACrC,IAAIK,EAAM,YAAYJ,KACrBC,EAAWG,EAAM,OAAO;AAGzB,UAAMC,IAAW,CAACC,MAA+B;AAChD,MAAAL,EAAWK,EAAM,OAAO;AAAA,IACzB;AAEA,WAAAF,EAAM,iBAAiB,UAAUC,CAAQ,GAClC,MAAMD,EAAM,oBAAoB,UAAUC,CAAQ;AAAA,EAC1D,GAAG,CAACL,GAASD,CAAK,CAAC,GAEZC;AACR;"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './patterns';
+export * from './utils';

package/dist/index.js

@@ -0,0 +1,158 @@
+import { Accordion as e } from "./components/accordion/index.js";
+import { BADGE_COLORS as p, BADGE_SIZES as m, BADGE_TYPES as x, Badge as f } from "./components/badge/index.js";
+import { BadgeCount as a } from "./components/badge-count/index.js";
+import { Alert as n, AlertActions as l, AlertButton as T, AlertStandaloneLink as O } from "./components/alert/index.js";
+import { Breadcrumbs as C } from "./components/breadcrumbs/index.js";
+import { BUTTON_COLORS as A, BUTTON_ICON_POSITIONS as s, BUTTON_SIZES as L, Button as c } from "./components/button/index.js";
+import { Card as _ } from "./components/card/index.js";
+import { CodeBlock as g } from "./components/code-block/index.js";
+import { DisclosurePrimitive as N } from "./components/disclosure-primitive/index.js";
+import { useDisclosurePrimitive as E } from "./components/disclosure-primitive/use-disclosure-primitive.js";
+import { Dropdown as G } from "./components/dropdown/index.js";
+import { FLIGHT_ICON_SIZES as U, FlightIcon as b } from "./components/flight-icon/index.js";
+import { CheckboxBase as h, CheckboxField as M, CheckboxGroup as v } from "./components/form/checkbox/index.js";
+import { Error as y } from "./components/form/error/index.js";
+import { Field as K } from "./components/form/field/index.js";
+import { Fieldset as z } from "./components/form/fieldset/index.js";
+import { FileInputBase as X, FileInputField as V } from "./components/form/file-input/index.js";
+import { HelperText as j } from "./components/form/helper-text/index.js";
+import { Indicator as J } from "./components/form/indicator/index.js";
+import { Label as $ } from "./components/form/label/index.js";
+import { Legend as ro } from "./components/form/legend/index.js";
+import { RadioBase as to, RadioField as po, RadioGroup as mo } from "./components/form/radio/index.js";
+import { RadioCard as fo } from "./components/form/radio-card/index.js";
+import { SelectField as ao } from "./components/form/select/index.js";
+import { SuperSelectField as lo } from "./components/form/super-select/index.js";
+import { TextInput as Oo, TextInputBase as So } from "./components/form/text-input/index.js";
+import { TextAreaField as uo } from "./components/form/textarea/index.js";
+import { ToggleBase as so, ToggleField as Lo, ToggleGroup as co } from "./components/form/toggle/index.js";
+import { IconTile as _o } from "./components/icon-tile/index.js";
+import { InlineLink as go } from "./components/inline-link/index.js";
+import { MDSButton as No } from "./components/legacy-button/index.js";
+import { ModalProvider as Eo } from "./components/modal/index.js";
+import { Separator as Go } from "./components/separator/index.js";
+import { STANDALONE_LINK_COLORS as Uo, STANDALONE_LINK_ICON_POSITIONS as bo, STANDALONE_LINK_SIZES as ko, StandaloneLink as ho } from "./components/standalone-link/index.js";
+import { Table as vo } from "./components/table/index.js";
+import { getDensity as yo, getHorizontalAlignment as Ho, getScope as Ko, getVerticalAlignment as Yo } from "./components/table/utils.js";
+import { Tabs as wo } from "./components/tabs/index.js";
+import { useTabsContext as Vo } from "./components/tabs/use-tabs-context.js";
+import { TEXT_COLORS as jo, TEXT_WEIGHTS as qo, Text as Jo } from "./components/text/index.js";
+import { BarChart as $o } from "./components/visualizations/bar-chart/index.js";
+import { DonutChart as rr } from "./components/visualizations/donut-chart/index.js";
+import { PartnerCard as tr } from "./patterns/card/partner-card/index.js";
+import { CardPrimitives as mr } from "./patterns/card/primitives.js";
+import { CopyButton as fr } from "./patterns/copy-button/index.js";
+import { LAYOUT_APPEARANCES as ar, LAYOUT_BACKGROUNDS as dr, LAYOUT_PADDING as nr, Layout as lr, normalizeLayoutProps as Tr } from "./patterns/layout/index.js";
+import { ProductBadge as Sr } from "./patterns/product-badge/index.js";
+import { PRODUCT_LOGO_COLORS as ur, PRODUCT_LOGO_PRODUCTS as Ar, PRODUCT_LOGO_SIZES as sr, ProductLogo as Lr, normalizeProductLogoProps as cr } from "./patterns/product-logo/index.js";
+import { RelatedContent as _r } from "./patterns/related-content/index.js";
+import { useLarge as gr, useMedium as Br, useMediumUp as Nr, useSmall as Dr } from "./utils/hooks/use-screen-size.js";
+import { MDSProvider as Rr } from "./utils/mds-context/index.js";
+import { AccordionContent as Fr, AccordionItem as Ur, AccordionToggle as br } from "./components/accordion/item/index.js";
+import { RadioCardGroup as hr } from "./components/form/radio-card/group.js";
+import { useModal as vr } from "./components/modal/use-modal.js";
+import { NewsroomCard as yr } from "./patterns/card/newsroom-card/index.js";
+import { PersonCard as Kr } from "./patterns/card/person-card/index.js";
+import { PromoCard as zr } from "./patterns/card/promo-card/index.js";
+import { ResourceCard as Xr } from "./patterns/card/resource-card/index.js";
+import { UnifiedCard as Wr } from "./patterns/card/unified-card/index.js";
+export {
+  e as Accordion,
+  Fr as AccordionContent,
+  Ur as AccordionItem,
+  br as AccordionToggle,
+  n as Alert,
+  l as AlertActions,
+  T as AlertButton,
+  O as AlertStandaloneLink,
+  p as BADGE_COLORS,
+  m as BADGE_SIZES,
+  x as BADGE_TYPES,
+  A as BUTTON_COLORS,
+  s as BUTTON_ICON_POSITIONS,
+  L as BUTTON_SIZES,
+  f as Badge,
+  a as BadgeCount,
+  $o as BarChart,
+  C as Breadcrumbs,
+  c as Button,
+  _ as Card,
+  mr as CardPrimitives,
+  h as CheckboxBase,
+  M as CheckboxField,
+  v as CheckboxGroup,
+  g as CodeBlock,
+  fr as CopyButton,
+  N as DisclosurePrimitive,
+  rr as DonutChart,
+  G as Dropdown,
+  y as Error,
+  U as FLIGHT_ICON_SIZES,
+  K as Field,
+  z as Fieldset,
+  X as FileInputBase,
+  V as FileInputField,
+  b as FlightIcon,
+  j as HelperText,
+  _o as IconTile,
+  J as Indicator,
+  go as InlineLink,
+  ar as LAYOUT_APPEARANCES,
+  dr as LAYOUT_BACKGROUNDS,
+  nr as LAYOUT_PADDING,
+  $ as Label,
+  lr as Layout,
+  ro as Legend,
+  No as MDSButton,
+  Rr as MDSProvider,
+  Eo as ModalProvider,
+  yr as NewsroomCard,
+  ur as PRODUCT_LOGO_COLORS,
+  Ar as PRODUCT_LOGO_PRODUCTS,
+  sr as PRODUCT_LOGO_SIZES,
+  tr as PartnerCard,
+  Kr as PersonCard,
+  Sr as ProductBadge,
+  Lr as ProductLogo,
+  zr as PromoCard,
+  to as RadioBase,
+  fo as RadioCard,
+  hr as RadioCardGroup,
+  po as RadioField,
+  mo as RadioGroup,
+  _r as RelatedContent,
+  Xr as ResourceCard,
+  Uo as STANDALONE_LINK_COLORS,
+  bo as STANDALONE_LINK_ICON_POSITIONS,
+  ko as STANDALONE_LINK_SIZES,
+  ao as SelectField,
+  Go as Separator,
+  ho as StandaloneLink,
+  lo as SuperSelectField,
+  jo as TEXT_COLORS,
+  qo as TEXT_WEIGHTS,
+  vo as Table,
+  wo as Tabs,
+  Jo as Text,
+  uo as TextAreaField,
+  Oo as TextInput,
+  So as TextInputBase,
+  so as ToggleBase,
+  Lo as ToggleField,
+  co as ToggleGroup,
+  Wr as UnifiedCard,
+  yo as getDensity,
+  Ho as getHorizontalAlignment,
+  Ko as getScope,
+  Yo as getVerticalAlignment,
+  Tr as normalizeLayoutProps,
+  cr as normalizeProductLogoProps,
+  E as useDisclosurePrimitive,
+  gr as useLarge,
+  Br as useMedium,
+  Nr as useMediumUp,
+  vr as useModal,
+  Dr as useSmall,
+  Vo as useTabsContext
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/patterns/card/index.d.ts

@@ -0,0 +1,5 @@
+export { NewsroomCard, type NewsroomCardProps } from './newsroom-card';
+export { PersonCard, type PersonCardProps } from './person-card';
+export { ResourceCard, type ResourceCardProps } from './resource-card';
+export { UnifiedCard, type UnifiedCardProps } from './unified-card';
+export { PromoCard, type PromoCardProps } from './promo-card';