@lfrprazeres/ui 0.1.0 → 0.3.0

package/README.md

@@ -24,6 +24,13 @@ pnpm add @lfrprazeres/ui
 
 `react`, `react-dom` and `tailwindcss` are peer dependencies.
 
+`recharts` is an **optional** peer. Install it only if you import from
+`@lfrprazeres/ui/charts`:
+
+```bash
+pnpm add recharts
+```
+
 ## Setup
 
 Import the stylesheet once, at your CSS entry point:
@@ -61,15 +68,43 @@ import { Button } from "@lfrprazeres/ui/elements";
 import { StatTile } from "@lfrprazeres/ui/components";
 ```
 
-Both resolve to the same bytes. `Button` measures 9.59 kB either way.
+Charts are the exception: they ship only from their own entry point, never from
+the root barrel.
+
+```tsx
+import { DonutChart } from "@lfrprazeres/ui/charts"; // needs recharts
+```
+
+Both resolve to the same bytes. `Button` measures 9.58 kB either way, and the
+whole surface is 98 kB.
 
 ## What ships
 
-**Elements** (16): Avatar, Badge, Button, Card, Checkbox, Dialog, DropdownMenu,
-Input, Label, Popover, Select, Separator, Skeleton, Switch, Textarea, Toaster.
+**Elements** (19): Avatar, Badge, Button, Card, Checkbox, Dialog, DropdownMenu,
+Input, Label, Popover, Select, Separator, Skeleton, Switch, Table, Textarea,
+Toaster, Toggle, ToggleGroup.
+
+**Components** (9): Chip, FileDropzone, LanguageSwitcher, Marquee, MessageBubble,
+SearchCombobox, StatTile, StreamingDots, ThemeToggle.
+
+**Charts**, from `@lfrprazeres/ui/charts`: `Chart` (the recharts primitives),
+`DonutChart`, `LineChart`, plus `ChartFrame`, `ChartDataTable` and
+`ChartLegendList` for building your own. More chart types are coming; the rest
+of the recharts catalogue is a later release.
+
+### Why charts have their own entry point
 
-**Components** (7): Chip, LanguageSwitcher, Marquee, MessageBubble, StatTile,
-StreamingDots, ThemeToggle.
+`recharts` is far heavier than everything else here combined, so charts ship
+from `@lfrprazeres/ui/charts` and nowhere else.
+
+Tree-shaking alone was not enough. Bundlers did drop recharts from the output,
+which is why `Button` never grew, but importing the root barrel in a runtime
+that does not bundle — plain Node, an un-bundled SSR path, a script — loaded 246
+recharts modules to get a `Button`. Now it loads none, and `pnpm check:charts`
+walks the built module graph on every release to assert recharts is unreachable
+from `.`, `/elements` and `/components`, and reachable from `/charts`.
+
+Because it is an optional peer, nothing installs it unless you ask for it.
 
 ## Tiers
 
@@ -82,6 +117,10 @@ StreamingDots, ThemeToggle.
 The library never ships features. If two projects need the same one, extract the
 reusable mechanism as a component and keep a thin feature on top of it in each.
 
+`charts` is not a fourth tier. It is a packaging boundary: `Chart` is an element
+and the charts built on it are components, grouped behind one entry point
+because they share a dependency heavy enough to be worth opting into.
+
 ## Palettes
 
 A palette is a preset that redefines the semantic tier. Components never know
@@ -137,12 +176,13 @@ the import comes back and needs re-inverting.
 | `pnpm build` | Builds the package with tsdown |
 | `pnpm check:rsc` | Fails if a `"use client"` directive was lost in the build |
 | `pnpm check:package` | publint plus are-the-types-wrong |
+| `pnpm check:charts` | Fails if recharts is reachable from a non-chart entry point |
 | `pnpm check:size` | size-limit budgets |
 
 ## Notes on the build
 
 Built unbundled, preserving module structure. That is load-bearing rather than a
-preference: bundling hoists or strips the `"use client"` directives thirteen
+preference: bundling hoists or strips the `"use client"` directives twenty-two
 modules depend on, and React Server Components then break with no error at all.
 `pnpm check:rsc` compares source against the build and fails if any went
 missing.

package/dist/charts/chart-data-table.d.ts

@@ -0,0 +1,30 @@
+//#region src/charts/chart-data-table.d.ts
+interface ChartDataTableRow {
+  /** One cell per column after the first. */
+  cells: string[];
+  /** Row header, typically the series or slice name. */
+  header: string;
+}
+interface ChartDataTableProps {
+  /** Describes the chart. Reuse the chart's accessible name. */
+  caption: string;
+  /** Column headers, including the leading row-header column. */
+  columns: string[];
+  rows: ChartDataTableRow[];
+}
+/**
+ * The text alternative every chart renders.
+ *
+ * An SVG chart is an image to assistive technology no matter how much ARIA it
+ * carries, so the numbers have to exist somewhere reachable. This is that
+ * somewhere: a real table, visually hidden, carrying exactly the data the chart
+ * plots.
+ *
+ * It must be a sibling of the element carrying `role="img"`, never a child.
+ * `role="img"` removes its descendants from the accessibility tree, so a table
+ * nested inside one is invisible to the readers it exists for.
+ */
+declare function ChartDataTable({ caption, columns, rows }: ChartDataTableProps): import("react").JSX.Element;
+//#endregion
+export { ChartDataTable, ChartDataTableProps, ChartDataTableRow };
+//# sourceMappingURL=chart-data-table.d.ts.map

package/dist/charts/chart-data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-data-table.d.ts","names":[],"sources":["../../src/charts/chart-data-table.tsx"],"mappings":";UAAiB;;EAEf;;EAEA;;UAGe;;EAEf;;EAEA;EACA,MAAM;;;;;;;;;;;;;;iBAeQ,iBACd,SACA,SACA,QACC,sCAAmB,IAAA"}

package/dist/charts/chart-data-table.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/charts/chart-data-table.tsx
+/**
+* The text alternative every chart renders.
+*
+* An SVG chart is an image to assistive technology no matter how much ARIA it
+* carries, so the numbers have to exist somewhere reachable. This is that
+* somewhere: a real table, visually hidden, carrying exactly the data the chart
+* plots.
+*
+* It must be a sibling of the element carrying `role="img"`, never a child.
+* `role="img"` removes its descendants from the accessibility tree, so a table
+* nested inside one is invisible to the readers it exists for.
+*/
+function ChartDataTable({ caption, columns, rows }) {
+	return /* @__PURE__ */ jsxs("table", {
+		className: "sr-only",
+		children: [
+			/* @__PURE__ */ jsx("caption", { children: caption }),
+			/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+				scope: "col",
+				children: column
+			}, column)) }) }),
+			/* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+				scope: "row",
+				children: row.header
+			}), row.cells.map((cell, index) => /* @__PURE__ */ jsx("td", { children: cell }, columns[index + 1] ?? String(index)))] }, row.header)) })
+		]
+	});
+}
+//#endregion
+export { ChartDataTable };
+
+//# sourceMappingURL=chart-data-table.js.map

package/dist/charts/chart-data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-data-table.js","names":[],"sources":["../../src/charts/chart-data-table.tsx"],"sourcesContent":["export interface ChartDataTableRow {\n  /** One cell per column after the first. */\n  cells: string[];\n  /** Row header, typically the series or slice name. */\n  header: string;\n}\n\nexport interface ChartDataTableProps {\n  /** Describes the chart. Reuse the chart's accessible name. */\n  caption: string;\n  /** Column headers, including the leading row-header column. */\n  columns: string[];\n  rows: ChartDataTableRow[];\n}\n\n/**\n * The text alternative every chart renders.\n *\n * An SVG chart is an image to assistive technology no matter how much ARIA it\n * carries, so the numbers have to exist somewhere reachable. This is that\n * somewhere: a real table, visually hidden, carrying exactly the data the chart\n * plots.\n *\n * It must be a sibling of the element carrying `role=\"img\"`, never a child.\n * `role=\"img\"` removes its descendants from the accessibility tree, so a table\n * nested inside one is invisible to the readers it exists for.\n */\nexport function ChartDataTable({\n  caption,\n  columns,\n  rows,\n}: ChartDataTableProps) {\n  return (\n    <table className=\"sr-only\">\n      <caption>{caption}</caption>\n      <thead>\n        <tr>\n          {columns.map((column) => (\n            <th key={column} scope=\"col\">\n              {column}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row) => (\n          <tr key={row.header}>\n            <th scope=\"row\">{row.header}</th>\n            {row.cells.map((cell, index) => (\n              <td key={columns[index + 1] ?? String(index)}>{cell}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA2BA,SAAgB,eAAe,EAC7B,SACA,SACA,QACsB;CACtB,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,oBAAC,WAAD,EAAA,UAAU,QAAiB,CAAA;GAC3B,oBAAC,SAAD,EAAA,UACE,oBAAC,MAAD,EAAA,UACG,QAAQ,KAAK,WACZ,oBAAC,MAAD;IAAiB,OAAM;IACpB,UAAA;GACC,GAFK,MAEL,CACL,EACC,CAAA,EACC,CAAA;GACP,oBAAC,SAAD,EAAA,UACG,KAAK,KAAK,QACT,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,MAAD;IAAI,OAAM;IAAO,UAAA,IAAI;GAAW,CAAA,GAC/B,IAAI,MAAM,KAAK,MAAM,UACpB,oBAAC,MAAD,EAAA,UAA+C,KAAS,GAA/C,QAAQ,QAAQ,MAAM,OAAO,KAAK,CAAa,CACzD,CACC,EAAA,GALK,IAAI,MAKT,CACL,EACI,CAAA;EACF;;AAEX"}

package/dist/charts/chart-frame.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+//#region src/charts/chart-frame.d.ts
+interface ChartFrameProps {
+  /** The chart itself. Rendered inside the image role. */
+  children: ReactNode;
+  className?: string;
+  /** Rendered outside the image role so assistive tech can reach it. */
+  dataTable?: ReactNode;
+  emptyLabel?: string;
+  /**
+   * True when the chart itself is keyboard operable. recharts gives cartesian
+   * charts a tab stop and `role="application"`, and wrapping a focusable,
+   * interactive thing in `role="img"` both hides it from assistive tech and
+   * lies about what it is.
+   */
+  interactive?: boolean;
+  isEmpty?: boolean;
+  label: string;
+  legend?: ReactNode;
+}
+/**
+ * The shell every chart composes: accessible name, text alternative, legend
+ * and a consistent empty state.
+ *
+ * The nesting is load-bearing. `role="img"` collapses everything beneath it
+ * into a single node for assistive technology, which is the right treatment for
+ * the SVG and the wrong treatment for the data table. So the table sits beside
+ * the image, not inside it.
+ */
+declare function ChartFrame({ children, className, dataTable, emptyLabel, interactive, isEmpty, label, legend }: ChartFrameProps): import("react").JSX.Element;
+//#endregion
+export { ChartFrame, ChartFrameProps };
+//# sourceMappingURL=chart-frame.d.ts.map

package/dist/charts/chart-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-frame.d.ts","names":[],"sources":["../../src/charts/chart-frame.tsx"],"mappings":";;UAGiB;;EAEf,UAAU;EACV;;EAEA,YAAY;EACZ;;;;;;;EAOA;EACA;EACA;EACA,SAAS;;;;;;;;;;;iBAYK,aACd,UACA,WACA,WACA,YACA,aACA,SACA,OACA,UACC,kCAAe,IAAA"}

package/dist/charts/chart-frame.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/charts/chart-frame.tsx
+/**
+* The shell every chart composes: accessible name, text alternative, legend
+* and a consistent empty state.
+*
+* The nesting is load-bearing. `role="img"` collapses everything beneath it
+* into a single node for assistive technology, which is the right treatment for
+* the SVG and the wrong treatment for the data table. So the table sits beside
+* the image, not inside it.
+*/
+function ChartFrame({ children, className, dataTable, emptyLabel = "No data to display", interactive = false, isEmpty = false, label, legend }) {
+	if (isEmpty) return /* @__PURE__ */ jsx("p", {
+		className: cn("text-muted-foreground text-sm", className),
+		children: emptyLabel
+	});
+	return /* @__PURE__ */ jsxs("figure", {
+		"aria-label": label,
+		className: cn("space-y-3", className),
+		children: [
+			interactive ? children : /* @__PURE__ */ jsx("div", {
+				"aria-label": label,
+				role: "img",
+				children
+			}),
+			dataTable,
+			legend
+		]
+	});
+}
+//#endregion
+export { ChartFrame };
+
+//# sourceMappingURL=chart-frame.js.map

package/dist/charts/chart-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-frame.js","names":[],"sources":["../../src/charts/chart-frame.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface ChartFrameProps {\n  /** The chart itself. Rendered inside the image role. */\n  children: ReactNode;\n  className?: string;\n  /** Rendered outside the image role so assistive tech can reach it. */\n  dataTable?: ReactNode;\n  emptyLabel?: string;\n  /**\n   * True when the chart itself is keyboard operable. recharts gives cartesian\n   * charts a tab stop and `role=\"application\"`, and wrapping a focusable,\n   * interactive thing in `role=\"img\"` both hides it from assistive tech and\n   * lies about what it is.\n   */\n  interactive?: boolean;\n  isEmpty?: boolean;\n  label: string;\n  legend?: ReactNode;\n}\n\n/**\n * The shell every chart composes: accessible name, text alternative, legend\n * and a consistent empty state.\n *\n * The nesting is load-bearing. `role=\"img\"` collapses everything beneath it\n * into a single node for assistive technology, which is the right treatment for\n * the SVG and the wrong treatment for the data table. So the table sits beside\n * the image, not inside it.\n */\nexport function ChartFrame({\n  children,\n  className,\n  dataTable,\n  emptyLabel = \"No data to display\",\n  interactive = false,\n  isEmpty = false,\n  label,\n  legend,\n}: ChartFrameProps) {\n  if (isEmpty) {\n    return (\n      <p className={cn(\"text-muted-foreground text-sm\", className)}>\n        {emptyLabel}\n      </p>\n    );\n  }\n\n  return (\n    <figure aria-label={label} className={cn(\"space-y-3\", className)}>\n      {interactive ? (\n        children\n      ) : (\n        <div aria-label={label} role=\"img\">\n          {children}\n        </div>\n      )}\n      {dataTable}\n      {legend}\n    </figure>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA+BA,SAAgB,WAAW,EACzB,UACA,WACA,WACA,aAAa,sBACb,cAAc,OACd,UAAU,OACV,OACA,UACkB;CAClB,IAAI,SACF,OACE,oBAAC,KAAD;EAAG,WAAW,GAAG,iCAAiC,SAAS;EACxD,UAAA;CACA,CAAA;CAIP,OACE,qBAAC,UAAD;EAAQ,cAAY;EAAO,WAAW,GAAG,aAAa,SAAS;EAA/D,UAAA;GACG,cACC,WAEA,oBAAC,OAAD;IAAK,cAAY;IAAO,MAAK;IAC1B;GACE,CAAA;GAEN;GACA;EACK;;AAEZ"}

package/dist/charts/chart-legend-list.d.ts

@@ -0,0 +1,20 @@
+//#region src/charts/chart-legend-list.d.ts
+interface ChartLegendItem {
+  color: string;
+  label: string;
+  /** Percentage or other secondary figure, right-aligned. */
+  share?: string;
+  value?: string;
+}
+interface ChartLegendListProps {
+  className?: string;
+  items: ChartLegendItem[];
+}
+/**
+ * The shared legend. Every entry names its series in text, so colour is never
+ * the only thing carrying the meaning.
+ */
+declare function ChartLegendList({ className, items }: ChartLegendListProps): import("react").JSX.Element;
+//#endregion
+export { ChartLegendItem, ChartLegendList, ChartLegendListProps };
+//# sourceMappingURL=chart-legend-list.d.ts.map

package/dist/charts/chart-legend-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-legend-list.d.ts","names":[],"sources":["../../src/charts/chart-legend-list.tsx"],"mappings":";UAEiB;EACf;EACA;;EAEA;EACA;;UAGe;EACf;EACA,OAAO;;;;;;iBAOO,kBAAkB,WAAW,SAAS,uCAAoB,IAAA"}

package/dist/charts/chart-legend-list.js

@@ -0,0 +1,38 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/charts/chart-legend-list.tsx
+/**
+* The shared legend. Every entry names its series in text, so colour is never
+* the only thing carrying the meaning.
+*/
+function ChartLegendList({ className, items }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn("space-y-1.5", className),
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-2 text-sm",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "size-2.5 shrink-0 rounded-[2px]",
+					style: { backgroundColor: item.color }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 truncate text-foreground",
+					children: item.label
+				}),
+				item.value ? /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground tabular-nums",
+					children: item.value
+				}) : null,
+				item.share ? /* @__PURE__ */ jsx("span", {
+					className: "w-12 text-right text-muted-foreground tabular-nums",
+					children: item.share
+				}) : null
+			]
+		}, item.label))
+	});
+}
+//#endregion
+export { ChartLegendList };
+
+//# sourceMappingURL=chart-legend-list.js.map

package/dist/charts/chart-legend-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-legend-list.js","names":[],"sources":["../../src/charts/chart-legend-list.tsx"],"sourcesContent":["import { cn } from \"@/lib/cn\";\n\nexport interface ChartLegendItem {\n  color: string;\n  label: string;\n  /** Percentage or other secondary figure, right-aligned. */\n  share?: string;\n  value?: string;\n}\n\nexport interface ChartLegendListProps {\n  className?: string;\n  items: ChartLegendItem[];\n}\n\n/**\n * The shared legend. Every entry names its series in text, so colour is never\n * the only thing carrying the meaning.\n */\nexport function ChartLegendList({ className, items }: ChartLegendListProps) {\n  return (\n    <ul className={cn(\"space-y-1.5\", className)}>\n      {items.map((item) => (\n        <li className=\"flex items-center gap-2 text-sm\" key={item.label}>\n          <span\n            aria-hidden=\"true\"\n            className=\"size-2.5 shrink-0 rounded-[2px]\"\n            style={{ backgroundColor: item.color }}\n          />\n          <span className=\"flex-1 truncate text-foreground\">{item.label}</span>\n          {item.value ? (\n            <span className=\"text-muted-foreground tabular-nums\">\n              {item.value}\n            </span>\n          ) : null}\n          {item.share ? (\n            <span className=\"w-12 text-right text-muted-foreground tabular-nums\">\n              {item.share}\n            </span>\n          ) : null}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,gBAAgB,EAAE,WAAW,SAA+B;CAC1E,OACE,oBAAC,MAAD;EAAI,WAAW,GAAG,eAAe,SAAS;EACvC,UAAA,MAAM,KAAK,SACV,qBAAC,MAAD;GAAI,WAAU;GAAd,UAAA;IACE,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,MAAM;IACtC,CAAA;IACD,oBAAC,QAAD;KAAM,WAAU;KAAmC,UAAA,KAAK;IAAY,CAAA;IACnE,KAAK,QACJ,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA,KAAK;IACF,CAAA,IACJ;IACH,KAAK,QACJ,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA,KAAK;IACF,CAAA,IACJ;GACF;EAjBiD,GAAA,KAAK,KAiBtD,CACL;CACC,CAAA;AAER"}

package/dist/charts/chart-ramp.d.ts

@@ -0,0 +1,7 @@
+//#region src/charts/chart-ramp.d.ts
+declare const CHART_RAMP: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)", "var(--color-chart-5)"];
+/** Picks a ramp colour by position, or honours an explicit override. */
+declare function rampColor(index: number, override?: string): string;
+//#endregion
+export { CHART_RAMP, rampColor };
+//# sourceMappingURL=chart-ramp.d.ts.map

package/dist/charts/chart-ramp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-ramp.d.ts","names":[],"sources":["../../src/charts/chart-ramp.ts"],"mappings":";cAIa;;iBASG,UAAU,eAAe"}

package/dist/charts/chart-ramp.js

@@ -0,0 +1,16 @@
+//#region src/charts/chart-ramp.ts
+const CHART_RAMP = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)",
+	"var(--color-chart-4)",
+	"var(--color-chart-5)"
+];
+/** Picks a ramp colour by position, or honours an explicit override. */
+function rampColor(index, override) {
+	return override ?? CHART_RAMP[index % CHART_RAMP.length] ?? CHART_RAMP[0];
+}
+//#endregion
+export { CHART_RAMP, rampColor };
+
+//# sourceMappingURL=chart-ramp.js.map

package/dist/charts/chart-ramp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-ramp.js","names":[],"sources":["../../src/charts/chart-ramp.ts"],"sourcesContent":["/*\n * The five chart roles are part of the semantic tier, so a palette retunes the\n * whole ramp and no chart ever learns a literal colour.\n */\nexport const CHART_RAMP = [\n  \"var(--color-chart-1)\",\n  \"var(--color-chart-2)\",\n  \"var(--color-chart-3)\",\n  \"var(--color-chart-4)\",\n  \"var(--color-chart-5)\",\n] as const;\n\n/** Picks a ramp colour by position, or honours an explicit override. */\nexport function rampColor(index: number, override?: string): string {\n  // The modulo keeps this in range; the literal only satisfies the checker.\n  return override ?? CHART_RAMP[index % CHART_RAMP.length] ?? CHART_RAMP[0];\n}\n"],"mappings":";AAIA,MAAa,aAAa;CACxB;CACA;CACA;CACA;CACA;AACF;;AAGA,SAAgB,UAAU,OAAe,UAA2B;CAElE,OAAO,YAAY,WAAW,QAAQ,WAAW,WAAW,WAAW;AACzE"}

package/dist/charts/donut-chart.d.ts

@@ -0,0 +1,16 @@
+import { ChartBaseProps, ChartSlice } from "./types.js";
+//#region src/charts/donut-chart.d.ts
+interface DonutChartProps extends ChartBaseProps {
+  data: ChartSlice[];
+}
+/**
+ * A proportional breakdown.
+ *
+ * Pie charts get no accessibility layer from recharts, so the data table that
+ * `ChartFrame` renders is the only text alternative. That is why it is not
+ * optional here.
+ */
+declare function DonutChart({ className, data, emptyLabel, formatValue, label, legend }: DonutChartProps): import("react").JSX.Element;
+//#endregion
+export { DonutChart, DonutChartProps };
+//# sourceMappingURL=donut-chart.d.ts.map

package/dist/charts/donut-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut-chart.d.ts","names":[],"sources":["../../src/charts/donut-chart.tsx"],"mappings":";;UAgBiB,wBAAwB;EACvC,MAAM;;;;;;;;;iBAiBQ,aACd,WACA,MACA,YACA,aACA,OACA,UACC,kCAAe,IAAA"}

package/dist/charts/donut-chart.js

@@ -0,0 +1,78 @@
+"use client";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../elements/chart.js";
+import { ChartDataTable } from "./chart-data-table.js";
+import { ChartFrame } from "./chart-frame.js";
+import { ChartLegendList } from "./chart-legend-list.js";
+import { rampColor } from "./chart-ramp.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Cell, Pie, PieChart } from "recharts";
+//#region src/charts/donut-chart.tsx
+function share(value, total) {
+	if (total === 0) return "0%";
+	return `${(value / total * 100).toFixed(1)}%`;
+}
+/**
+* A proportional breakdown.
+*
+* Pie charts get no accessibility layer from recharts, so the data table that
+* `ChartFrame` renders is the only text alternative. That is why it is not
+* optional here.
+*/
+function DonutChart({ className, data, emptyLabel, formatValue, label, legend = true }) {
+	const total = useMemo(() => data.reduce((sum, slice) => sum + slice.value, 0), [data]);
+	const config = useMemo(() => Object.fromEntries(data.map((slice, index) => [slice.name, {
+		color: rampColor(index, slice.color),
+		label: slice.label ?? slice.name
+	}])), [data]);
+	const format = formatValue ?? ((value) => value.toLocaleString());
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		className,
+		dataTable: /* @__PURE__ */ jsx(ChartDataTable, {
+			caption: label,
+			columns: [
+				"Category",
+				"Value",
+				"Share"
+			],
+			rows: data.map((slice) => ({
+				cells: [format(slice.value), share(slice.value, total)],
+				header: slice.label ?? slice.name
+			}))
+		}),
+		emptyLabel,
+		isEmpty: data.length === 0,
+		label,
+		legend: legend ? /* @__PURE__ */ jsx(ChartLegendList, { items: data.map((slice, index) => ({
+			color: rampColor(index, slice.color),
+			label: slice.label ?? slice.name,
+			share: share(slice.value, total),
+			value: format(slice.value)
+		})) }) : null,
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			className: "mx-auto aspect-square max-h-56",
+			config,
+			initialDimension: {
+				height: 224,
+				width: 224
+			},
+			children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+				hideLabel: true,
+				nameKey: "name"
+			}) }), /* @__PURE__ */ jsx(Pie, {
+				data,
+				dataKey: "value",
+				innerRadius: "55%",
+				nameKey: "name",
+				outerRadius: "85%",
+				paddingAngle: 2,
+				strokeWidth: 0,
+				children: data.map((slice, index) => /* @__PURE__ */ jsx(Cell, { fill: rampColor(index, slice.color) }, slice.name))
+			})] })
+		})
+	});
+}
+//#endregion
+export { DonutChart };
+
+//# sourceMappingURL=donut-chart.js.map

package/dist/charts/donut-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut-chart.js","names":[],"sources":["../../src/charts/donut-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport { Cell, Pie, PieChart } from \"recharts\";\nimport { ChartDataTable } from \"@/charts/chart-data-table\";\nimport { ChartFrame } from \"@/charts/chart-frame\";\nimport { ChartLegendList } from \"@/charts/chart-legend-list\";\nimport { rampColor } from \"@/charts/chart-ramp\";\nimport type { ChartBaseProps, ChartSlice } from \"@/charts/types\";\nimport {\n  type ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/elements/chart\";\n\nexport interface DonutChartProps extends ChartBaseProps {\n  data: ChartSlice[];\n}\n\nfunction share(value: number, total: number): string {\n  if (total === 0) {\n    return \"0%\";\n  }\n  return `${((value / total) * 100).toFixed(1)}%`;\n}\n\n/**\n * A proportional breakdown.\n *\n * Pie charts get no accessibility layer from recharts, so the data table that\n * `ChartFrame` renders is the only text alternative. That is why it is not\n * optional here.\n */\nexport function DonutChart({\n  className,\n  data,\n  emptyLabel,\n  formatValue,\n  label,\n  legend = true,\n}: DonutChartProps) {\n  const total = useMemo(\n    () => data.reduce((sum, slice) => sum + slice.value, 0),\n    [data]\n  );\n\n  const config = useMemo<ChartConfig>(\n    () =>\n      Object.fromEntries(\n        data.map((slice, index) => [\n          slice.name,\n          {\n            color: rampColor(index, slice.color),\n            label: slice.label ?? slice.name,\n          },\n        ])\n      ),\n    [data]\n  );\n\n  const format = formatValue ?? ((value: number) => value.toLocaleString());\n\n  return (\n    <ChartFrame\n      className={className}\n      dataTable={\n        <ChartDataTable\n          caption={label}\n          columns={[\"Category\", \"Value\", \"Share\"]}\n          rows={data.map((slice) => ({\n            cells: [format(slice.value), share(slice.value, total)],\n            header: slice.label ?? slice.name,\n          }))}\n        />\n      }\n      emptyLabel={emptyLabel}\n      isEmpty={data.length === 0}\n      label={label}\n      legend={\n        legend ? (\n          <ChartLegendList\n            items={data.map((slice, index) => ({\n              color: rampColor(index, slice.color),\n              label: slice.label ?? slice.name,\n              share: share(slice.value, total),\n              value: format(slice.value),\n            }))}\n          />\n        ) : null\n      }\n    >\n      <ChartContainer\n        className=\"mx-auto aspect-square max-h-56\"\n        config={config}\n        initialDimension={{ height: 224, width: 224 }}\n      >\n        <PieChart>\n          <ChartTooltip\n            content={<ChartTooltipContent hideLabel nameKey=\"name\" />}\n          />\n          <Pie\n            data={data}\n            dataKey=\"value\"\n            innerRadius=\"55%\"\n            nameKey=\"name\"\n            outerRadius=\"85%\"\n            paddingAngle={2}\n            strokeWidth={0}\n          >\n            {data.map((slice, index) => (\n              <Cell fill={rampColor(index, slice.color)} key={slice.name} />\n            ))}\n          </Pie>\n        </PieChart>\n      </ChartContainer>\n    </ChartFrame>\n  );\n}\n"],"mappings":";;;;;;;;;;AAoBA,SAAS,MAAM,OAAe,OAAuB;CACnD,IAAI,UAAU,GACZ,OAAO;CAET,OAAO,IAAK,QAAQ,QAAS,IAAA,CAAK,QAAQ,CAAC,EAAE;AAC/C;;;;;;;;AASA,SAAgB,WAAW,EACzB,WACA,MACA,YACA,aACA,OACA,SAAS,QACS;CAClB,MAAM,QAAQ,cACN,KAAK,QAAQ,KAAK,UAAU,MAAM,MAAM,OAAO,CAAC,GACtD,CAAC,IAAI,CACP;CAEA,MAAM,SAAS,cAEX,OAAO,YACL,KAAK,KAAK,OAAO,UAAU,CACzB,MAAM,MACN;EACE,OAAO,UAAU,OAAO,MAAM,KAAK;EACnC,OAAO,MAAM,SAAS,MAAM;CAC9B,CACF,CAAC,CACH,GACF,CAAC,IAAI,CACP;CAEA,MAAM,SAAS,iBAAiB,UAAkB,MAAM,eAAe;CAEvE,OACE,oBAAC,YAAD;EACa;EACX,WACE,oBAAC,gBAAD;GACE,SAAS;GACT,SAAS;IAAC;IAAY;IAAS;GAAO;GACtC,MAAM,KAAK,KAAK,WAAW;IACzB,OAAO,CAAC,OAAO,MAAM,KAAK,GAAG,MAAM,MAAM,OAAO,KAAK,CAAC;IACtD,QAAQ,MAAM,SAAS,MAAM;GAC/B,EAAE;EACH,CAAA;EAES;EACZ,SAAS,KAAK,WAAW;EAClB;EACP,QACE,SACE,oBAAC,iBAAD,EACE,OAAO,KAAK,KAAK,OAAO,WAAW;GACjC,OAAO,UAAU,OAAO,MAAM,KAAK;GACnC,OAAO,MAAM,SAAS,MAAM;GAC5B,OAAO,MAAM,MAAM,OAAO,KAAK;GAC/B,OAAO,OAAO,MAAM,KAAK;EAC3B,EAAE,EACH,CAAA,IACC;EAGN,UAAA,oBAAC,gBAAD;GACE,WAAU;GACF;GACR,kBAAkB;IAAE,QAAQ;IAAK,OAAO;GAAI;GAE5C,UAAA,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EACE,SAAS,oBAAC,qBAAD;IAAqB,WAAA;IAAU,SAAQ;GAAQ,CAAA,EACzD,CAAA,GACD,oBAAC,KAAD;IACQ;IACN,SAAQ;IACR,aAAY;IACZ,SAAQ;IACR,aAAY;IACZ,cAAc;IACd,aAAa;IAEZ,UAAA,KAAK,KAAK,OAAO,UAChB,oBAAC,MAAD,EAAM,MAAM,UAAU,OAAO,MAAM,KAAK,EAAqB,GAAb,MAAM,IAAO,CAC9D;GACE,CAAA,CACG,EAAA,CAAA;EACI,CAAA;CACN,CAAA;AAEhB"}

package/dist/charts/index.d.ts

@@ -0,0 +1,10 @@
+import { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "../elements/chart.js";
+import { ChartDataTable, ChartDataTableProps, ChartDataTableRow } from "./chart-data-table.js";
+import { ChartFrame, ChartFrameProps } from "./chart-frame.js";
+import { ChartLegendItem, ChartLegendList, ChartLegendListProps } from "./chart-legend-list.js";
+import { CHART_RAMP, rampColor } from "./chart-ramp.js";
+import { ChartBaseProps, ChartRow, ChartSeries, ChartSlice } from "./types.js";
+import { DonutChart, DonutChartProps } from "./donut-chart.js";
+import { LineChart, LineChartProps, LineChartValueAxis } from "./line-chart.js";
+import { CartesianChartInput, useCartesianChart } from "./use-cartesian-chart.js";
+export { CHART_RAMP, CartesianChartInput, ChartBaseProps, ChartConfig, ChartContainer, ChartDataTable, ChartDataTableProps, ChartDataTableRow, ChartFrame, ChartFrameProps, ChartLegend, ChartLegendContent, ChartLegendItem, ChartLegendList, ChartLegendListProps, ChartRow, ChartSeries, ChartSlice, ChartStyle, ChartTooltip, ChartTooltipContent, DonutChart, DonutChartProps, LineChart, LineChartProps, LineChartValueAxis, rampColor, useCartesianChart };

package/dist/charts/index.js

@@ -0,0 +1,9 @@
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "../elements/chart.js";
+import { ChartDataTable } from "./chart-data-table.js";
+import { ChartFrame } from "./chart-frame.js";
+import { ChartLegendList } from "./chart-legend-list.js";
+import { CHART_RAMP, rampColor } from "./chart-ramp.js";
+import { DonutChart } from "./donut-chart.js";
+import { useCartesianChart } from "./use-cartesian-chart.js";
+import { LineChart } from "./line-chart.js";
+export { CHART_RAMP, ChartContainer, ChartDataTable, ChartFrame, ChartLegend, ChartLegendContent, ChartLegendList, ChartStyle, ChartTooltip, ChartTooltipContent, DonutChart, LineChart, rampColor, useCartesianChart };

package/dist/charts/line-chart.d.ts

@@ -0,0 +1,38 @@
+import { ChartTooltip } from "../elements/chart.js";
+import { ChartBaseProps, ChartRow, ChartSeries } from "./types.js";
+import { ComponentProps } from "react";
+//#region src/charts/line-chart.d.ts
+interface LineChartValueAxis {
+  /** Scale to the data range instead of anchoring at zero. */
+  fit?: boolean;
+  orientation?: "left" | "right";
+  width?: number;
+}
+interface LineChartProps extends ChartBaseProps {
+  data: ChartRow[];
+  /** Draws points as well as the line. */
+  dots?: boolean;
+  /** Formats the category axis ticks, e.g. a timestamp into a date. */
+  formatX?: (value: string | number) => string;
+  /** Draw the background grid. */
+  grid?: boolean;
+  series: ChartSeries[];
+  /** Replaces the default tooltip content entirely. */
+  tooltip?: ComponentProps<typeof ChartTooltip>["content"];
+  /** Value-axis options, or false to hide it. */
+  valueAxis?: false | LineChartValueAxis;
+  /** Key on each row holding the category or time value. */
+  xKey: string;
+}
+/**
+ * A trend over an ordered axis.
+ *
+ * recharts turns its accessibility layer on by default from v3, so the chart is
+ * a single tab stop and arrow keys move between points. Do not add per-point
+ * tab stops: that forces keyboard users through every value to get past the
+ * chart.
+ */
+declare function LineChart({ className, data, dots, emptyLabel, formatValue, formatX, grid, label, legend, series, tooltip, valueAxis, xKey }: LineChartProps): import("react").JSX.Element;
+//#endregion
+export { LineChart, LineChartProps, LineChartValueAxis };
+//# sourceMappingURL=line-chart.d.ts.map

package/dist/charts/line-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.d.ts","names":[],"sources":["../../src/charts/line-chart.tsx"],"mappings":";;;;UAqBiB;;EAEf;EACA;EACA;;UAGe,uBAAuB;EACtC,MAAM;;EAEN;;EAEA,WAAW;;EAEX;EACA,QAAQ;;EAER,UAAU,sBAAsB;;EAEhC,oBAAoB;;EAEpB;;;;;;;;;;iBAWc,YACd,WACA,MACA,MACA,YACA,aACA,SACA,MACA,OACA,QACA,QACA,SACA,WACA,QACC,iCAAc,IAAA"}

package/dist/charts/line-chart.js

@@ -0,0 +1,89 @@
+"use client";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../elements/chart.js";
+import { ChartDataTable } from "./chart-data-table.js";
+import { ChartFrame } from "./chart-frame.js";
+import { ChartLegendList } from "./chart-legend-list.js";
+import { useCartesianChart } from "./use-cartesian-chart.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+//#region src/charts/line-chart.tsx
+/**
+* A trend over an ordered axis.
+*
+* recharts turns its accessibility layer on by default from v3, so the chart is
+* a single tab stop and arrow keys move between points. Do not add per-point
+* tab stops: that forces keyboard users through every value to get past the
+* chart.
+*/
+function LineChart$1({ className, data, dots = false, emptyLabel, formatValue, formatX, grid = true, label, legend = true, series, tooltip, valueAxis, xKey }) {
+	const axis = valueAxis === false ? null : valueAxis ?? {};
+	const { colors, columns, config, legendItems, rows } = useCartesianChart({
+		data,
+		formatValue,
+		series,
+		xKey
+	});
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		className,
+		dataTable: /* @__PURE__ */ jsx(ChartDataTable, {
+			caption: label,
+			columns,
+			rows
+		}),
+		emptyLabel,
+		interactive: true,
+		isEmpty: data.length === 0 || series.length === 0,
+		label,
+		legend: legend ? /* @__PURE__ */ jsx(ChartLegendList, { items: legendItems }) : null,
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			className: "aspect-video w-full",
+			config,
+			initialDimension: {
+				height: 240,
+				width: 420
+			},
+			children: /* @__PURE__ */ jsxs(LineChart, {
+				data,
+				margin: {
+					left: 4,
+					right: 8,
+					top: 8
+				},
+				children: [
+					grid ? /* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray: "3 3",
+						vertical: false
+					}) : null,
+					/* @__PURE__ */ jsx(XAxis, {
+						axisLine: false,
+						dataKey: xKey,
+						tickFormatter: formatX,
+						tickLine: false,
+						tickMargin: 8
+					}),
+					axis ? /* @__PURE__ */ jsx(YAxis, {
+						axisLine: false,
+						domain: axis.fit ? ["dataMin", "dataMax"] : void 0,
+						orientation: axis.orientation ?? "left",
+						tickFormatter: formatValue,
+						tickLine: false,
+						tickMargin: 8,
+						width: axis.width ?? 48
+					}) : null,
+					/* @__PURE__ */ jsx(ChartTooltip, { content: tooltip ?? /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+					series.map((entry, index) => /* @__PURE__ */ jsx(Line, {
+						dataKey: entry.key,
+						dot: dots,
+						stroke: colors[index],
+						strokeWidth: 2,
+						type: "monotone"
+					}, entry.key))
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { LineChart$1 as LineChart };
+
+//# sourceMappingURL=line-chart.js.map

package/dist/charts/line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.js","names":["LineChart","RechartsLine"],"sources":["../../src/charts/line-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport {\n  CartesianGrid,\n  Line,\n  LineChart as RechartsLine,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { ChartDataTable } from \"@/charts/chart-data-table\";\nimport { ChartFrame } from \"@/charts/chart-frame\";\nimport { ChartLegendList } from \"@/charts/chart-legend-list\";\nimport type { ChartBaseProps, ChartRow, ChartSeries } from \"@/charts/types\";\nimport { useCartesianChart } from \"@/charts/use-cartesian-chart\";\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/elements/chart\";\n\nexport interface LineChartValueAxis {\n  /** Scale to the data range instead of anchoring at zero. */\n  fit?: boolean;\n  orientation?: \"left\" | \"right\";\n  width?: number;\n}\n\nexport interface LineChartProps extends ChartBaseProps {\n  data: ChartRow[];\n  /** Draws points as well as the line. */\n  dots?: boolean;\n  /** Formats the category axis ticks, e.g. a timestamp into a date. */\n  formatX?: (value: string | number) => string;\n  /** Draw the background grid. */\n  grid?: boolean;\n  series: ChartSeries[];\n  /** Replaces the default tooltip content entirely. */\n  tooltip?: ComponentProps<typeof ChartTooltip>[\"content\"];\n  /** Value-axis options, or false to hide it. */\n  valueAxis?: false | LineChartValueAxis;\n  /** Key on each row holding the category or time value. */\n  xKey: string;\n}\n\n/**\n * A trend over an ordered axis.\n *\n * recharts turns its accessibility layer on by default from v3, so the chart is\n * a single tab stop and arrow keys move between points. Do not add per-point\n * tab stops: that forces keyboard users through every value to get past the\n * chart.\n */\nexport function LineChart({\n  className,\n  data,\n  dots = false,\n  emptyLabel,\n  formatValue,\n  formatX,\n  grid = true,\n  label,\n  legend = true,\n  series,\n  tooltip,\n  valueAxis,\n  xKey,\n}: LineChartProps) {\n  const axis = valueAxis === false ? null : (valueAxis ?? {});\n  const { colors, columns, config, legendItems, rows } = useCartesianChart({\n    data,\n    formatValue,\n    series,\n    xKey,\n  });\n\n  return (\n    <ChartFrame\n      className={className}\n      dataTable={\n        <ChartDataTable caption={label} columns={columns} rows={rows} />\n      }\n      emptyLabel={emptyLabel}\n      interactive\n      isEmpty={data.length === 0 || series.length === 0}\n      label={label}\n      legend={legend ? <ChartLegendList items={legendItems} /> : null}\n    >\n      <ChartContainer\n        className=\"aspect-video w-full\"\n        config={config}\n        initialDimension={{ height: 240, width: 420 }}\n      >\n        <RechartsLine data={data} margin={{ left: 4, right: 8, top: 8 }}>\n          {grid ? (\n            <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />\n          ) : null}\n          <XAxis\n            axisLine={false}\n            dataKey={xKey}\n            tickFormatter={formatX}\n            tickLine={false}\n            tickMargin={8}\n          />\n          {axis ? (\n            <YAxis\n              axisLine={false}\n              domain={axis.fit ? [\"dataMin\", \"dataMax\"] : undefined}\n              orientation={axis.orientation ?? \"left\"}\n              tickFormatter={formatValue}\n              tickLine={false}\n              tickMargin={8}\n              width={axis.width ?? 48}\n            />\n          ) : null}\n          <ChartTooltip content={tooltip ?? <ChartTooltipContent />} />\n          {series.map((entry, index) => (\n            <Line\n              dataKey={entry.key}\n              dot={dots}\n              key={entry.key}\n              stroke={colors[index]}\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n          ))}\n        </RechartsLine>\n      </ChartContainer>\n    </ChartFrame>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,SAAgBA,YAAU,EACxB,WACA,MACA,OAAO,OACP,YACA,aACA,SACA,OAAO,MACP,OACA,SAAS,MACT,QACA,SACA,WACA,QACiB;CACjB,MAAM,OAAO,cAAc,QAAQ,OAAQ,aAAa,CAAC;CACzD,MAAM,EAAE,QAAQ,SAAS,QAAQ,aAAa,SAAS,kBAAkB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,YAAD;EACa;EACX,WACE,oBAAC,gBAAD;GAAgB,SAAS;GAAgB;GAAe;EAAO,CAAA;EAErD;EACZ,aAAA;EACA,SAAS,KAAK,WAAW,KAAK,OAAO,WAAW;EACzC;EACP,QAAQ,SAAS,oBAAC,iBAAD,EAAiB,OAAO,YAAc,CAAA,IAAI;EAE3D,UAAA,oBAAC,gBAAD;GACE,WAAU;GACF;GACR,kBAAkB;IAAE,QAAQ;IAAK,OAAO;GAAI;GAE5C,UAAA,qBAACC,WAAD;IAAoB;IAAM,QAAQ;KAAE,MAAM;KAAG,OAAO;KAAG,KAAK;IAAE;IAA9D,UAAA;KACG,OACC,oBAAC,eAAD;MAAe,iBAAgB;MAAM,UAAU;KAAQ,CAAA,IACrD;KACJ,oBAAC,OAAD;MACE,UAAU;MACV,SAAS;MACT,eAAe;MACf,UAAU;MACV,YAAY;KACb,CAAA;KACA,OACC,oBAAC,OAAD;MACE,UAAU;MACV,QAAQ,KAAK,MAAM,CAAC,WAAW,SAAS,IAAI,KAAA;MAC5C,aAAa,KAAK,eAAe;MACjC,eAAe;MACf,UAAU;MACV,YAAY;MACZ,OAAO,KAAK,SAAS;KACtB,CAAA,IACC;KACJ,oBAAC,cAAD,EAAc,SAAS,WAAW,oBAAC,qBAAD,CAAsB,CAAA,EAAI,CAAA;KAC3D,OAAO,KAAK,OAAO,UAClB,oBAAC,MAAD;MACE,SAAS,MAAM;MACf,KAAK;MAEL,QAAQ,OAAO;MACf,aAAa;MACb,MAAK;KACN,GAJM,MAAM,GAIZ,CACF;IACW;;EACA,CAAA;CACN,CAAA;AAEhB"}