@hashicorp/mds-react 0.9.3 → 0.9.4

package/components/visualizations/bar-chart/index.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
+import c from "./horizontal-chart/index.js";
+import { useTabsContext as m } from "../../tabs/use-tabs-context.js";
+import { Tabs as s } from "../../tabs/index.js";
+import h from "classnames";
+import i from "./style.module.css.js";
+const p = ({ data: e }) => /* @__PURE__ */ a("div", { className: i.root, children: e.length > 1 ? /* @__PURE__ */ n(s.Provider, { size: "large", children: [
+  /* @__PURE__ */ a(s.TabList, { children: e.map((r, t) => /* @__PURE__ */ a(s.Tab, { className: i.tab, children: r.name }, t)) }),
+  /* @__PURE__ */ a(b, { data: e })
+] }) : /* @__PURE__ */ a(l, { data: e }) });
+p.displayName = "BarChart";
+const b = ({ data: e }) => {
+  const { selectedTabIndex: r, tabIds: t } = m(), o = t[r];
+  return /* @__PURE__ */ a(l, { tabId: o, data: e, chartIndex: r });
+}, l = ({ tabId: e, data: r, chartIndex: t = 0 }) => {
+  const o = r[t].name;
+  return /* @__PURE__ */ n(
+    "figure",
+    {
+      className: h(i.chartContainer, r.length > 1 && i.multiple),
+      id: o.toLowerCase(),
+      role: "tabpanel",
+      tabIndex: 0,
+      "aria-label": e ? void 0 : o,
+      "aria-labelledby": e || void 0,
+      children: [
+        /* @__PURE__ */ a(c, { ...r[t] }),
+        /* @__PURE__ */ a("div", { className: i.chart, children: r[t].caption && /* @__PURE__ */ a("figcaption", { className: i.caption, children: r[t].caption }) })
+      ]
+    }
+  );
+};
+export {
+  p as BarChart
+};
+//# sourceMappingURL=index.js.map

package/components/visualizations/bar-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/visualizations/bar-chart/index.tsx"],"sourcesContent":["'use client'\n\nimport HorizontalBarChart, {\n\ttype HorizontalBarChartProps,\n} from './horizontal-chart'\nimport { useTabsContext } from '../../tabs/use-tabs-context'\nimport { Tabs } from '../../tabs'\nimport classNames from 'classnames'\nimport s from './style.module.css'\n\ninterface HorizontalBarChart extends HorizontalBarChartProps {\n\tname: string\n\tcaption: string\n}\n\nexport interface BarChartProps {\n\tdata: HorizontalBarChart[]\n}\n\nexport const BarChart = ({ data }: BarChartProps) => {\n\treturn (\n\t\t<div className={s.root}>\n\t\t\t{data.length > 1 ? (\n\t\t\t\t<Tabs.Provider size=\"large\">\n\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t{data.map((chart, i) => (\n\t\t\t\t\t\t\t<Tabs.Tab key={i} className={s.tab}>\n\t\t\t\t\t\t\t\t{chart.name}\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t<BarChartPanelWithTabCtx data={data} />\n\t\t\t\t</Tabs.Provider>\n\t\t\t) : (\n\t\t\t\t<BarChartPanel data={data} />\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nBarChart.displayName = 'BarChart'\n\nconst BarChartPanelWithTabCtx = ({ data }: { data: BarChartProps['data'] }) => {\n\tconst { selectedTabIndex, tabIds } = useTabsContext()\n\n\tconst tabId = tabIds[selectedTabIndex]\n\n\treturn (\n\t\t<BarChartPanel tabId={tabId} data={data} chartIndex={selectedTabIndex} />\n\t)\n}\n\ninterface BarChartPanelProps {\n\ttabId?: string\n\tdata: BarChartProps['data']\n\tchartIndex?: number\n}\n\nconst BarChartPanel = ({ tabId, data, chartIndex = 0 }: BarChartPanelProps) => {\n\tconst chartName = data[chartIndex].name\n\n\treturn (\n\t\t<figure\n\t\t\tclassName={classNames(s.chartContainer, data.length > 1 && s.multiple)}\n\t\t\tid={chartName.toLowerCase()}\n\t\t\trole=\"tabpanel\"\n\t\t\ttabIndex={0}\n\t\t\taria-label={tabId ? undefined : chartName}\n\t\t\taria-labelledby={tabId || undefined}\n\t\t>\n\t\t\t<HorizontalBarChart {...data[chartIndex]} />\n\t\t\t<div className={s.chart}>\n\t\t\t\t{data[chartIndex].caption && (\n\t\t\t\t\t<figcaption className={s.caption}>\n\t\t\t\t\t\t{data[chartIndex].caption}\n\t\t\t\t\t</figcaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</figure>\n\t)\n}\n"],"names":["BarChart","data","jsx","jsxs","Tabs","chart","i","s","BarChartPanelWithTabCtx","BarChartPanel","selectedTabIndex","useTabsContext","tabId","tabIds","chartIndex","classNames","chartName","HorizontalBarChart"],"mappings":";;;;;;;AAoBC,MAAAA,IAAA,CAAA,EAAA,MAAAC,EACC,MAGI,gBAAAC,EAAK,OAAA,EAAL,mBACM,UAAYD,EAAA,SAAA,IACX,gBAAAE,EAAYC,EAAA,UAAa,EAC7B,MAAA,mBACF;AAAA,EAGF,gBAAAF,EAACE,EAAA,SAAA,EAAA,YAAwB,IAAY,CAAAC,GAAAC,MAAA,gBAAAJ,EAAAE,EAAA,KAAA,EAAA,WAAAG,EAAA,KAAA,UAAAF,EAAA,KAAA,GAAAC,CAAA,CAAA,EAAA,CAAA;AAAA,EACtC,gBAAAJ,EAAAM,GAEe,EAAA,MAAAP,EAEjB,CAAA;AAEF,EAAA,CAAA,IAAA,gBAAAC,EAAAO,GAAA,EAAA,MAAAR,EAAA,CAAA,EAAA,CAAA;AAIAD;AACC,MAAAQ,OAA0B,MAAAP;AAE1B,QAAM,EAAA,kBAAAS,iBAA+BC,EAAA,GAErCC,IAAAC,EAAAH,CACE;AAEH,SAAA,gBAAAR,EAAAO,GAAA,EAAA,OAAAG,GAAA,MAAAX,GAAA,YAAAS,EAAA,CAAA;AAQA,GACCD,IAAkB,CAAA,EAAK,OAAAG,GAAA,MAAAX,GAAY,YAAAa,IAAA,EAAA,MAAA;AAEnC,cACCA,CAAA,EAAA;AAAA,SAAC,gBAAAX;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,WAAIY,oBAAsBd,EAAA,SAAA,KAAAM,EAAA,QAAA;AAAA,MAC1B,IAAAS,EAAK,YAAA;AAAA,MACL,MAAA;AAAA,MACA;MACA,cAAAJ,IAAiB,SAASI;AAAA,MAE1B,mBAAAJ,KAAA;AAAA,MAAA,UAAA;AAAA,0BACCK,GAAe,EAAE,GAAAhB,GAChB,EAAA,CAAA;AAAA,QAKF,gBAAAC,EAAA,OAAA,EAAA,WAAAK,EAAA,OAAA,UAAAN,EAAAa,CAAA,EAAA,WAAA,gBAAAZ,EAAA,cAAA,EAAA,WAAAK,EAAA,SAAA,UAAAN,EAAAa,CAAA,EAAA,QAAA,CAAA,EAAA,CAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAEF;;"}

package/components/visualizations/bar-chart/style.module.css.js

@@ -0,0 +1,12 @@
+const t = "chartContainer__6A5KV", n = "multiple__rU9qF", a = "caption__F3uLb", o = {
+  chartContainer: t,
+  multiple: n,
+  caption: a
+};
+export {
+  a as caption,
+  t as chartContainer,
+  o as default,
+  n as multiple
+};
+//# sourceMappingURL=style.module.css.js.map

package/components/visualizations/bar-chart/style.module.css.js.map

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

package/components/visualizations/donut-chart/components/arc-tooltip/index.js

@@ -0,0 +1,14 @@
+import { jsx as a, jsxs as e } from "react/jsx-runtime";
+import l from "./styles.module.css.js";
+const i = (r) => /* @__PURE__ */ a("div", { className: l.container, children: /* @__PURE__ */ e("div", { className: l.label, children: [
+  r.datum.label,
+  ": ",
+  /* @__PURE__ */ e("strong", { children: [
+    r.datum.value,
+    "%"
+  ] })
+] }) });
+export {
+  i as renderArcTooltip
+};
+//# sourceMappingURL=index.js.map

package/components/visualizations/donut-chart/components/arc-tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/visualizations/donut-chart/components/arc-tooltip/index.tsx"],"sourcesContent":["import type { FC } from 'react'\nimport type { DefaultRawDatum, PieTooltipProps } from '@nivo/pie'\nimport s from './styles.module.css'\n\nexport const renderArcTooltip: FC<PieTooltipProps<DefaultRawDatum>> = (d) => (\n\t<div className={s.container}>\n\t\t<div className={s.label}>\n\t\t\t{d.datum.label}: <strong>{d.datum.value}%</strong>\n\t\t</div>\n\t</div>\n)\n"],"names":["renderArcTooltip","d","jsx","s","jsxs"],"mappings":";;AAIO,MAAMA,IAAyD,CAACC,MACtE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAE,WACjB,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAE,OAChB,UAAA;AAAA,EAAAF,EAAE,MAAM;AAAA,EAAM;AAAA,oBAAG,UAAA,EAAQ,UAAA;AAAA,IAAAA,EAAE,MAAM;AAAA,IAAM;AAAA,EAAA,EAAA,CAAC;AAAA,EAAA,CAC1C,EAAA,CACD;"}

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

@@ -0,0 +1,10 @@
+const n = "container__BPIK5", a = "label__oFZK-", e = {
+  container: n,
+  label: a
+};
+export {
+  n as container,
+  e as default,
+  a as label
+};
+//# sourceMappingURL=styles.module.css.js.map

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

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

package/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/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/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/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/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/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/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/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/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/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/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/components/visualizations/donut-chart/styles.module.css.js.map

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

package/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/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;"}