@acronis-platform/ui-react 3.0.0 → 4.0.0

package/dist/components/ui/chart-state/chart-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-state.js","sources":["../../../../src/components/ui/chart-state/chart-state.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  CircleWarningIcon,\n  InboxIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Spinner } from '../spinner';\n\n// A shared loading / empty / error placeholder for the chart types. A chart can\n// only render once recharts' `ResponsiveContainer` has data and real dimensions,\n// so every type needs the same \"there's nothing to plot yet\" surface — this is\n// that surface, dropped in place of the chart inside the same sized slot.\n//\n// Ported from the Figma InputSelect dropdown states (the reference the task\n// points at) and kept visually in step with the shipped `InputSelectStatus`\n// sibling: the empty / error states use the same 24px glyph + `text-sm` label\n// and the same `--ui-glyph-on-status-*` icon tokens. (Loading uses the shared\n// `Spinner` — brand blue, larger — not the sibling's inline gray ring.) No\n// `--ui-chart-*` tier exists yet, so it themes from existing semantic tokens\n// directly:\n//   • label      -> text-foreground (--ui-text-on-surface-primary)\n//   • empty icon  -> --ui-glyph-on-status-info\n//   • error icon  -> --ui-glyph-on-status-warning\n//   • loading      -> the shared Spinner (brand action blue)\n// The generic full-page `Empty` component is the larger, page-level sibling;\n// this one is compact and fills a chart slot.\n\nconst DEFAULT_MESSAGE: Record<ChartStateProps['state'], string> = {\n  loading: 'Data is loading…',\n  empty: 'No data found',\n  error: 'Something went wrong',\n};\n\nexport interface ChartStateProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** Which placeholder to show. Drives the leading glyph and default label. */\n  state: 'loading' | 'empty' | 'error';\n  /** Overrides the default label for the current `state`. */\n  message?: string;\n  /** Trailing action (e.g. a \"Try again\" button) — shown for `error` only. */\n  action?: React.ReactNode;\n}\n\nconst ChartState = React.forwardRef<HTMLDivElement, ChartStateProps>(\n  ({ className, state, message, action, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex size-full min-h-32 flex-col items-center justify-center gap-2 text-center text-sm leading-6 text-foreground',\n        className\n      )}\n      {...props}\n      // The status/alert live-region contract is intrinsic to the state, so it\n      // wins over any consumer-passed a11y prop (spread above). No `aria-busy`\n      // here: this element IS the live region, and some AT defer announcing a\n      // busy region's content until busy clears — but this placeholder is\n      // unmounted (swapped for the chart) rather than un-busied, so a busy flag\n      // would risk swallowing the \"Data is loading…\" announcement. A consumer\n      // that wants a busy signal sets `aria-busy` on the chart-slot container.\n      role={state === 'error' ? 'alert' : 'status'}\n      aria-live={state === 'error' ? 'assertive' : 'polite'}\n    >\n      {/* aria-hidden: the root is already the loading live region (+ the label),\n          so the Spinner's own role=\"status\"/sr-only would double-announce. */}\n      {state === 'loading' && <Spinner size=\"lg\" aria-hidden />}\n      {state === 'empty' && (\n        <InboxIcon size={24} className=\"text-[var(--ui-glyph-on-status-info)]\" />\n      )}\n      {state === 'error' && (\n        <CircleWarningIcon\n          size={24}\n          className=\"text-[var(--ui-glyph-on-status-warning)]\"\n        />\n      )}\n      <p>{message ?? DEFAULT_MESSAGE[state]}</p>\n      {state === 'error' && action}\n    </div>\n  )\n);\nChartState.displayName = 'ChartState';\n\nexport { ChartState };\n"],"names":["DEFAULT_MESSAGE","ChartState","React","className","state","message","action","props","ref","jsxs","cn","jsx","Spinner","InboxIcon","CircleWarningIcon"],"mappings":";;;;;AA8BA,MAAMA,IAA4D;AAAA,EAChE,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT,GAYMC,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChD,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAP;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAQJ,MAAMH,MAAU,UAAU,UAAU;AAAA,MACpC,aAAWA,MAAU,UAAU,cAAc;AAAA,MAI5C,UAAA;AAAA,QAAAA,MAAU,aAAa,gBAAAO,EAACC,GAAA,EAAQ,MAAK,MAAK,eAAW,IAAC;AAAA,QACtDR,MAAU,WACT,gBAAAO,EAACE,KAAU,MAAM,IAAI,WAAU,yCAAwC;AAAA,QAExET,MAAU,WACT,gBAAAO;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,gBAAAH,EAAC,KAAA,EAAG,UAAAN,KAAWL,EAAgBI,CAAK,GAAE;AAAA,QACrCA,MAAU,WAAWE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5B;AACAL,EAAW,cAAc;"}
+{"version":3,"file":"chart-state.js","sources":["../../../../src/components/ui/chart-state/chart-state.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CircleWarningIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Spinner } from '../spinner';\nimport {\n  CHART_STATE_ILLUSTRATIONS,\n  type ChartStateVariant,\n} from './chart-state-illustrations';\n\n// A shared loading / empty / error placeholder for the chart types. A chart can\n// only render once recharts' `ResponsiveContainer` has data and real dimensions,\n// so every type needs the same \"there's nothing to plot yet\" surface — this is\n// that surface, dropped in place of the chart inside the same sized slot.\n//\n// Ported from the Figma InputSelect dropdown states (the reference the task\n// points at) and kept visually in step with the shipped `InputSelectStatus`\n// sibling: the empty / error states use the same 24px glyph + `text-sm` label\n// and the same `--ui-glyph-on-status-*` icon tokens. (Loading uses the shared\n// `Spinner` — brand blue, larger — not the sibling's inline gray ring.) No\n// `--ui-chart-*` tier exists yet, so it themes from existing semantic tokens\n// directly:\n//   • label      -> text-foreground (--ui-text-on-surface-primary)\n//   • empty icon  -> --ui-glyph-on-status-info\n//   • error icon  -> --ui-glyph-on-status-warning\n//   • loading      -> the shared Spinner (brand action blue)\n// The generic full-page `Empty` component is the larger, page-level sibling;\n// this one is compact and fills a chart slot.\n\nconst DEFAULT_MESSAGE: Record<ChartStateProps['state'], string> = {\n  loading: 'Data is loading…',\n  empty: 'No data found',\n  error: 'Something went wrong',\n};\n\nexport interface ChartStateProps extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'children'\n> {\n  /** Which placeholder to show. Drives the leading glyph and default label. */\n  state: 'loading' | 'empty' | 'error';\n  /**\n   * Which chart the slot holds. `empty` then draws that type's silhouette\n   * instead of the generic inbox glyph — the design defines one per chart type.\n   * Ignored by `loading` and `error`, which share one treatment.\n   */\n  variant?: ChartStateVariant;\n  /**\n   * Text shown below the illustration or glyph. Defaults to `\"Data is\n   * loading…\"` / `\"No data found\"` / `\"Something went wrong\"` based on\n   * `state`. Pass a value to override for any state.\n   */\n  description?: React.ReactNode;\n  /** Trailing action (e.g. a \"Try again\" button) — shown for `error` only. */\n  action?: React.ReactNode;\n}\n\nconst ChartState = React.forwardRef<HTMLDivElement, ChartStateProps>(\n  (\n    { className, state, variant, description, action, ...props },\n    ref\n  ) => {\n    const Illustration = variant\n      ? CHART_STATE_ILLUSTRATIONS[variant]\n      : undefined;\n    const caption = description ?? DEFAULT_MESSAGE[state];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex size-full min-h-32 flex-col items-center justify-center gap-2 text-center text-sm leading-6 text-foreground',\n          className\n        )}\n        {...props}\n        // The status/alert live-region contract is intrinsic to the state, so it\n        // wins over any consumer-passed a11y prop (spread above). No `aria-busy`\n        // here: this element IS the live region, and some AT defer announcing a\n        // busy region's content until busy clears — but this placeholder is\n        // unmounted (swapped for the chart) rather than un-busied, so a busy flag\n        // would risk swallowing the \"Data is loading…\" announcement. A consumer\n        // that wants a busy signal sets `aria-busy` on the chart-slot container.\n        role={state === 'error' ? 'alert' : 'status'}\n        aria-live={state === 'error' ? 'assertive' : 'polite'}\n      >\n        {/* aria-hidden: the root is already the loading live region (+ the label),\n          so the Spinner's own role=\"status\"/sr-only would double-announce. */}\n        {state === 'loading' && <Spinner size=\"lg\" aria-hidden />}\n        {state === 'empty' && Illustration && (\n          // The tone is set once here, and every path inside is `currentColor`,\n          // so brand and theme overrides follow. Figma binds the artwork to\n          // `components/Avatar/color/blue`; this is the semantic token with the\n          // identical light/dark pair, and \"status off\" is what an empty widget\n          // is — referencing Avatar's tier from a chart would be a coupling with\n          // no meaning behind it.\n          // Scales with the slot rather than sitting at the mockup's 147×92:\n          // the silhouette is the whole point of a per-type empty state, so it\n          // takes the room the card gives it, capped so it stays a thumbnail\n          // in a wide widget instead of a poster.\n          <Illustration className=\"max-h-full w-full max-w-[220px] shrink text-[var(--ui-background-status-off)]\" />\n        )}\n        {state === 'error' && (\n          <CircleWarningIcon\n            size={24}\n            className=\"text-[var(--ui-glyph-on-status-warning)]\"\n          />\n        )}\n        <p>{caption}</p>\n        {state === 'error' && action}\n      </div>\n    );\n  }\n);\nChartState.displayName = 'ChartState';\n\nexport { ChartState };\n"],"names":["DEFAULT_MESSAGE","ChartState","React","className","state","variant","description","action","props","ref","Illustration","CHART_STATE_ILLUSTRATIONS","caption","jsxs","cn","jsx","Spinner","CircleWarningIcon"],"mappings":";;;;;;AA+BA,MAAMA,IAA4D;AAAA,EAChE,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT,GAwBMC,IAAaC,EAAM;AAAA,EACvB,CACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,aAAAC,GAAa,QAAAC,GAAQ,GAAGC,EAAA,GACrDC,MACG;AACH,UAAMC,IAAeL,IACjBM,EAA0BN,CAAO,IACjC,QACEO,IAAUN,KAAeN,EAAgBI,CAAK;AAEpD,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,WAAWK;AAAA,UACT;AAAA,UACAX;AAAA,QAAA;AAAA,QAED,GAAGK;AAAA,QAQJ,MAAMJ,MAAU,UAAU,UAAU;AAAA,QACpC,aAAWA,MAAU,UAAU,cAAc;AAAA,QAI5C,UAAA;AAAA,UAAAA,MAAU,aAAa,gBAAAW,EAACC,GAAA,EAAQ,MAAK,MAAK,eAAW,IAAC;AAAA,UACtDZ,MAAU,WAAWM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAWpB,gBAAAK,EAACL,GAAA,EAAa,WAAU,gFAAA,CAAgF;AAAA,UAEzGN,MAAU,WACT,gBAAAW;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAGd,gBAAAF,EAAC,OAAG,UAAAH,EAAA,CAAQ;AAAA,UACXR,MAAU,WAAWG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG5B;AACF;AACAN,EAAW,cAAc;"}

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

@@ -0,0 +1,87 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import * as w from "react";
+import { cn as t } from "../../../lib/utils.js";
+import { Card as C, CardHeader as g, CardContent as u } from "../card/card.js";
+import { ChartState as N } from "../chart-state/chart-state.js";
+const _ = w.forwardRef(
+  ({
+    className: s,
+    variant: n,
+    header: e,
+    orientation: i = "vertical",
+    metric: o,
+    state: a,
+    stateDescription: c,
+    stateAction: m,
+    bodyClassName: f,
+    children: h,
+    ...p
+  }, x) => {
+    const l = i === "horizontal";
+    return /* @__PURE__ */ d(
+      C,
+      {
+        ref: x,
+        hasError: a === "error",
+        "data-slot": "chart-widget",
+        "data-orientation": i,
+        className: t("flex h-full w-full flex-col", s),
+        ...p,
+        children: [
+          e ? /* @__PURE__ */ r(g, { ...e }) : null,
+          /* @__PURE__ */ d(
+            u,
+            {
+              className: t(
+                "min-h-0 flex-1 gap-4 pt-4",
+                // In horizontal mode override the default flex-col with flex-row so
+                // the metric and the chart sit side by side, each taking half the body.
+                l && "flex-row items-stretch",
+                f
+              ),
+              children: [
+                o ? /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: t(
+                      // Vertical: takes natural height, full width.
+                      // Horizontal: flex-[1_0_0] matches Figma — equal half-width,
+                      // no shrink (flex: 1 0 0), min-w-0 allows text to truncate.
+                      l ? "min-w-0 flex-[1_0_0]" : "shrink-0"
+                    ),
+                    "data-slot": "chart-widget-metric",
+                    children: o
+                  }
+                ) : null,
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: t(
+                      "min-h-0",
+                      l ? "min-w-0 flex-[1_0_0]" : "flex-1"
+                    ),
+                    "data-slot": "chart-widget-body",
+                    children: a ? /* @__PURE__ */ r(
+                      N,
+                      {
+                        state: a,
+                        variant: n,
+                        description: c,
+                        action: m
+                      }
+                    ) : h
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+_.displayName = "ChartWidget";
+export {
+  _ as ChartWidget
+};
+//# sourceMappingURL=chart-widget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-widget.js","sources":["../../../../src/components/ui/chart-widget/chart-widget.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\nimport { Card, CardContent, CardHeader, type CardHeaderProps } from '../card';\nimport {\n  ChartState,\n  type ChartStateProps,\n  type ChartStateVariant,\n} from '../chart-state';\n\n// A dashboard chart widget: the Card every chart mockup is wrapped in, plus the\n// one thing a Card doesn't know about — what the body shows while there is no\n// plot to show.\n//\n// Deliberately thin. `CardHeader` already owns the whole header surface (title,\n// description, extras, actions, drag handle, switch, avatar, rename, collapse\n// trigger) and draws the divider under itself, so this re-declares none of it:\n// `header` is typed as `CardHeaderProps` and spread, which means a header\n// feature added to Card arrives here for free instead of drifting.\n//\n// It owns no size either. The Figma `size` axis (sm/md/lg) only changes the\n// WIDTH (288/592/896), and every set is `HUG` vertically. So the height comes\n// from the dashboard grid, and the widget just passes it down: the header takes\n// what it needs, and the plot fills whatever is left (`flex-1 min-h-0` all the\n// way down, so a chart given `size-full` occupies the rest of the card).\n//\n// Dropped into a parent with no definite height, `h-full` resolves to `auto` and\n// the card hugs its content instead — so a standalone widget still works, with\n// the chart bringing its own height.\n//\n// The per-type chart components stay card-less on purpose. They are the plot;\n// the card is composition. That keeps `<AreaChart>` usable inside a table cell,\n// a popover, or a `Metric`'s sparkline slot, where a card would be wrong.\n//\n// Figma: every chart set wraps the `Card` set (`10012:195993`) — ChartArea\n// `8174:22232`, ChartBar `8700:55606`, ChartDonut `8811:172438`, and so on.\n\nexport interface ChartWidgetProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition), forwarded to `Card`. This is how a dashboard gives each\n   * widget a landmark role — `render={<section aria-label=\"Sessions\" />}` — the\n   * one thing the widget can't infer for itself.\n   */\n  render?: useRender.RenderProp;\n  /**\n   * Which chart the widget holds. Only used while `state=\"empty\"`, to pick the\n   * silhouette the design draws for that chart type — the widget itself needs\n   * no size, so this carries nothing else.\n   */\n  variant?: ChartStateVariant;\n  /**\n   * The card header, forwarded verbatim to `CardHeader`. Everything that\n   * component takes works here — `title`, `actions` (the ⋯ menu), `extras` (a\n   * filter chip), `isDraggable`, `hasRename`, … Omit it for a header-less\n   * widget.\n   */\n  header?: CardHeaderProps;\n  /**\n   * The readout beside or above the plot — typically a `Metric`.\n   *\n   * - `'vertical'` (default) — metric above the plot, full width. The metric\n   *   takes its natural height; the plot fills the rest of the card body.\n   * - `'horizontal'` — metric and plot side by side, each `flex-1`. Use for\n   *   compact widgets (sm/288px) where vertical space is at a premium.\n   *\n   * Figma: vertical → `8174:22335`, horizontal → `8982:31681`.\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /**\n   * The readout beside or above the plot — typically a `Metric`. Layout is\n   * controlled by `orientation`.\n   */\n  metric?: React.ReactNode;\n  /**\n   * Show a placeholder instead of the plot, for a widget whose data isn't there\n   * yet. `error` also gives the card its error border.\n   */\n  state?: ChartStateProps['state'];\n  /**\n   * Text below the placeholder illustration or glyph — defaults to\n   * `\"Data is loading…\"` / `\"No data found\"` / `\"Something went wrong\"`.\n   */\n  stateDescription?: ChartStateProps['description'];\n  /** Trailing action on the `error` placeholder — e.g. a \"Try again\" button. */\n  stateAction?: ChartStateProps['action'];\n  /**\n   * Class for the card body. Rarely needed — the body already fills the card.\n   * Use it where nothing above gives a height and the content can't either, e.g.\n   * a placeholder-only widget outside a sized grid cell.\n   */\n  bodyClassName?: string;\n  /** The chart. Replaced by the placeholder while `state` is set. */\n  children?: React.ReactNode;\n}\n\nconst ChartWidget = React.forwardRef<HTMLDivElement, ChartWidgetProps>(\n  (\n    {\n      className,\n      variant,\n      header,\n      orientation = 'vertical',\n      metric,\n      state,\n      stateDescription,\n      stateAction,\n      bodyClassName,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isHorizontal = orientation === 'horizontal';\n    return (\n      <Card\n        ref={ref}\n        // The error border belongs to Card, so a caller sets `state=\"error\"` once\n        // rather than wiring the placeholder and the border separately.\n        hasError={state === 'error'}\n        data-slot=\"chart-widget\"\n        data-orientation={orientation}\n        // `h-full` + a flex column is what lets the plot fill the card: the grid\n        // sizes this, the header is `shrink-0`, and the body takes the rest.\n        className={cn('flex h-full w-full flex-col', className)}\n        {...props}\n      >\n        {header ? <CardHeader {...header} /> : null}\n        {/* `CardContent` brings `px-4 pb-4`; the design's body is padded on all\n            four sides with a 16px gap between the metric row and the plot. */}\n        <CardContent\n          className={cn(\n            'min-h-0 flex-1 gap-4 pt-4',\n            // In horizontal mode override the default flex-col with flex-row so\n            // the metric and the chart sit side by side, each taking half the body.\n            isHorizontal && 'flex-row items-stretch',\n            bodyClassName\n          )}\n        >\n          {metric ? (\n            <div\n              className={cn(\n                // Vertical: takes natural height, full width.\n                // Horizontal: flex-[1_0_0] matches Figma — equal half-width,\n                // no shrink (flex: 1 0 0), min-w-0 allows text to truncate.\n                isHorizontal ? 'min-w-0 flex-[1_0_0]' : 'shrink-0'\n              )}\n              data-slot=\"chart-widget-metric\"\n            >\n              {metric}\n            </div>\n          ) : null}\n          {/* `min-h-0` matters: without it a flex child refuses to shrink below\n              its content's height, so a chart would push the card past the height\n              the grid gave it instead of fitting inside. */}\n          <div\n            className={cn(\n              'min-h-0',\n              isHorizontal ? 'min-w-0 flex-[1_0_0]' : 'flex-1'\n            )}\n            data-slot=\"chart-widget-body\"\n          >\n            {state ? (\n              <ChartState\n                state={state}\n                variant={variant}\n                description={stateDescription}\n                action={stateAction}\n              />\n            ) : (\n              children\n            )}\n          </div>\n        </CardContent>\n      </Card>\n    );\n  }\n);\nChartWidget.displayName = 'ChartWidget';\n\nexport { ChartWidget };\n"],"names":["ChartWidget","React","className","variant","header","orientation","metric","state","stateDescription","stateAction","bodyClassName","children","props","ref","isHorizontal","jsxs","Card","cn","jsx","CardHeader","CardContent","ChartState"],"mappings":";;;;;AAsGA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAeT,MAAgB;AACrC,WACE,gBAAAU;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QAGA,UAAUN,MAAU;AAAA,QACpB,aAAU;AAAA,QACV,oBAAkBF;AAAA,QAGlB,WAAWY,EAAG,+BAA+Bf,CAAS;AAAA,QACrD,GAAGU;AAAA,QAEH,UAAA;AAAA,UAAAR,IAAS,gBAAAc,EAACC,GAAA,EAAY,GAAGf,EAAA,CAAQ,IAAK;AAAA,UAGvC,gBAAAW;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,WAAWH;AAAA,gBACT;AAAA;AAAA;AAAA,gBAGAH,KAAgB;AAAA,gBAChBJ;AAAA,cAAA;AAAA,cAGD,UAAA;AAAA,gBAAAJ,IACC,gBAAAY;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWD;AAAA;AAAA;AAAA;AAAA,sBAITH,IAAe,yBAAyB;AAAA,oBAAA;AAAA,oBAE1C,aAAU;AAAA,oBAET,UAAAR;AAAA,kBAAA;AAAA,gBAAA,IAED;AAAA,gBAIJ,gBAAAY;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWD;AAAA,sBACT;AAAA,sBACAH,IAAe,yBAAyB;AAAA,oBAAA;AAAA,oBAE1C,aAAU;AAAA,oBAET,UAAAP,IACC,gBAAAW;AAAA,sBAACG;AAAA,sBAAA;AAAA,wBACC,OAAAd;AAAA,wBACA,SAAAJ;AAAA,wBACA,aAAaK;AAAA,wBACb,QAAQC;AAAA,sBAAA;AAAA,oBAAA,IAGVE;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACAX,EAAY,cAAc;"}

package/dist/components/ui/composed-chart/composed-chart.js

@@ -1,11 +1,11 @@
 import { jsx as o, jsxs as T, Fragment as pe } from "react/jsx-runtime";
-import * as kt from "react";
-import { cva as gt } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { ComposedChart as At, CartesianGrid as Ct, Brush as bt, XAxis as B, YAxis as z, LabelList as Rt, Bar as Lt, Area as Dt, Line as It, ReferenceArea as xt, ReferenceLine as Et } from "recharts";
-import { cn as _t } from "../../../lib/utils.js";
-import { resolveAnimation as St, resolveCategoryRange as he, resolveChartReferenceValue as Nt, CHART_LABEL_MARGIN as Tt, resolveBrushProps as Bt, resolveRotatedTickAnchor as ve, resolveCartesianLabelPosition as zt, CHART_LABEL_FONT_SIZE as Ot, resolveLabelFillClass as wt, toLabelFormatter as Ft, resolveReferenceLineProps as Vt, resolveXAxisTitle as ue, resolveXAxisHeight as $t, resolveAxisDomain as me, resolveYAxisTitle as ke } from "../chart/chart-format.js";
-import { ChartLegendContent as ge, ChartContainer as Mt, ChartTooltip as Ht, ChartTooltipContent as Wt, ChartLegend as Kt } from "../chart/chart.js";
-const Xt = gt("", {
+import * as gt from "react";
+import { cva as At } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { ComposedChart as Ct, CartesianGrid as bt, Brush as Rt, XAxis as B, YAxis as z, LabelList as Lt, Bar as Dt, Area as It, Line as xt, ReferenceArea as Et, ReferenceLine as _t } from "recharts";
+import { cn as St } from "../../../lib/utils.js";
+import { resolveAnimation as Nt, resolveCategoryRange as he, resolveChartReferenceValue as Tt, CHART_LABEL_MARGIN as Bt, resolveBrushProps as zt, resolveRotatedTickAnchor as ve, resolveCartesianLabelPosition as Ot, CHART_LABEL_FONT_SIZE as wt, resolveLabelFillClass as Ft, toLabelFormatter as Vt, resolveReferenceLineProps as $t, resolveXAxisTitle as ue, resolveXAxisHeight as Mt, resolveAxisDomain as me, resolveYAxisTitle as ke } from "../chart/chart-format.js";
+import { ChartLegendContent as ge, ChartContainer as Ht, ChartTooltip as Wt, ChartTooltipContent as Kt, ChartLegend as Xt } from "../chart/chart.js";
+const Pt = At("", {
   variants: {
     orientation: {
       vertical: "",
@@ -15,10 +15,11 @@ const Xt = gt("", {
   defaultVariants: {
     orientation: "vertical"
   }
-}), Pt = 100, Gt = 50, O = "secondary", Zt = { top: 5, right: 5, bottom: 5, left: 5 }, jt = 0.85, Ut = { top: 16 }, qt = kt.forwardRef(
+}), Gt = 100, Zt = 50, O = "secondary", jt = { top: 5, right: 5, bottom: 5, left: 5 }, Ut = 0.85, qt = { top: 16 }, Jt = gt.forwardRef(
   ({
     className: Ae,
     config: Ce,
+    palette: be,
     data: y,
     series: c,
     xKey: d,
@@ -27,26 +28,26 @@ const Xt = gt("", {
     orientation: g = "vertical",
     xAxisLabel: w,
     yAxisLabel: A,
-    xUnit: be,
-    yUnit: Re,
+    xUnit: Re,
+    yUnit: Le,
     curve: F = "monotone",
-    barRadius: Le = 4,
-    barSize: De,
-    barGap: Ie,
-    barCategoryGap: xe,
-    showBackground: Ee = !1,
-    backgroundFill: _e = "var(--ui-background-surface-secondary)",
-    showActiveBar: Se = !1,
-    fillOpacity: Ne = 0.3,
+    barRadius: De = 4,
+    barSize: Ie,
+    barGap: xe,
+    barCategoryGap: Ee,
+    showBackground: _e = !1,
+    backgroundFill: Se = "var(--ui-background-surface-secondary)",
+    showActiveBar: Ne = !1,
+    fillOpacity: Te = 0.3,
     strokeWidth: V,
-    showDots: Te = !1,
-    showActiveDots: Be,
-    connectNulls: ze = !1,
+    showDots: Be = !1,
+    showActiveDots: ze,
+    connectNulls: Oe = !1,
     margin: C,
-    showGrid: Oe = !0,
-    showTooltip: we = !0,
-    tooltipCursor: Fe = !0,
-    showLegend: Ve = !0,
+    showGrid: we = !0,
+    showTooltip: Fe = !0,
+    tooltipCursor: Ve = !0,
+    showLegend: $e = !0,
     legendPosition: b = "bottom",
     showXAxis: $ = !0,
     showYAxis: M = !0,
@@ -55,67 +56,67 @@ const Xt = gt("", {
     xAxisAngle: f,
     xAxisInterval: H,
     yAxisTickCount: W,
-    yAxisDomain: $e,
+    yAxisDomain: Me,
     yAxisOrientation: D,
     showSecondaryYAxis: K = !0,
     secondaryYAxisLabel: I,
     secondaryYUnit: X,
     secondaryYTickFormatter: P,
     secondaryYAxisTickCount: G,
-    secondaryYAxisDomain: Me,
-    gridDashed: He,
-    gridHorizontal: We,
-    gridVertical: Ke,
-    tooltipContent: Xe,
-    animate: Pe,
-    animationDuration: Ge,
-    animationBegin: Ze,
-    animationEasing: je,
+    secondaryYAxisDomain: He,
+    gridDashed: We,
+    gridHorizontal: Ke,
+    gridVertical: Xe,
+    tooltipContent: Pe,
+    animate: Ge,
+    animationDuration: Ze,
+    animationBegin: je,
+    animationEasing: Ue,
     showLabels: Z = !1,
-    labelPosition: Ue,
-    labelFormatter: qe,
-    showBrush: Je = !1,
-    brushHeight: Qe,
-    brushAriaLabel: Ye,
-    ...et
-  }, tt) => {
-    const x = St({
-      animate: Pe,
-      animationDuration: Ge,
-      animationBegin: Ze,
-      animationEasing: je
-    }), r = g === "horizontal", j = ue(w), u = c.some((e) => e.yAxis === "secondary"), ot = c.some((e) => e.yAxis !== "secondary"), m = u && !ot, U = D ?? "left", q = U === "left" ? "right" : "left", J = ke(
+    labelPosition: qe,
+    labelFormatter: Je,
+    showBrush: Qe = !1,
+    brushHeight: Ye,
+    brushAriaLabel: et,
+    ...tt
+  }, ot) => {
+    const x = Nt({
+      animate: Ge,
+      animationDuration: Ze,
+      animationBegin: je,
+      animationEasing: Ue
+    }), r = g === "horizontal", j = ue(w), u = c.some((e) => e.yAxis === "secondary"), at = c.some((e) => e.yAxis !== "secondary"), m = u && !at, U = D ?? "left", q = U === "left" ? "right" : "left", J = ke(
       A,
       r ? "left" : U
-    ), at = ke(
+    ), rt = ke(
       I,
       q
-    ), rt = ue(
+    ), it = ue(
       I,
       "insideTop"
-    ), Q = me($e), Y = me(Me), E = (e) => {
+    ), Q = me(Me), Y = me(He), E = (e) => {
       const t = e === "secondary" ? O : void 0;
       return r ? { xAxisId: t } : { yAxisId: t };
-    }, ee = m ? E("secondary") : {}, te = $t(w, f), it = h ? Array.isArray(h) ? h : [h] : [], nt = (v ? Array.isArray(v) ? v : [v] : []).map((e) => ({ area: e, range: he(e, y, d) })).filter(
+    }, ee = m ? E("secondary") : {}, te = Mt(w, f), nt = h ? Array.isArray(h) ? h : [h] : [], st = (v ? Array.isArray(v) ? v : [v] : []).map((e) => ({ area: e, range: he(e, y, d) })).filter(
       (e) => e.range !== void 0
-    ), oe = m ? "secondary" : "primary", ae = (e) => e.yAxis ?? "primary", st = new Map(c.map((e) => [e.key, ae(e)])), lt = (e) => c.filter((t) => ae(t) === e).map((t) => t.key), re = new Set(
+    ), oe = m ? "secondary" : "primary", ae = (e) => e.yAxis ?? "primary", lt = new Map(c.map((e) => [e.key, ae(e)])), ct = (e) => c.filter((t) => ae(t) === e).map((t) => t.key), re = new Set(
       c.filter((e) => e.legendType === "none").map((e) => e.key)
     ), p = (e) => {
       var t;
       return ((t = y[e]) == null ? void 0 : t[d]) ?? void 0;
-    }, ie = it.map((e) => {
+    }, ie = nt.map((e) => {
       const t = e.category !== void 0 ? he(
         { from: e.category, to: e.category },
         y,
         d
-      ) : void 0, a = e.yAxis ?? (typeof e.average == "string" ? st.get(e.average) ?? oe : oe), i = Nt(e, y, lt(a)), n = t ? p(t[0]) : void 0;
+      ) : void 0, a = e.yAxis ?? (typeof e.average == "string" ? lt.get(e.average) ?? oe : oe), i = Tt(e, y, ct(a)), n = t ? p(t[0]) : void 0;
       return { line: e, lineAxis: a, position: i !== void 0 ? r ? { x: i } : { y: i } : n !== void 0 ? r ? { y: n } : { x: n } : void 0, isVerticalRule: i !== void 0 === r };
     }).filter(
       (e) => e.position !== void 0
-    ), ne = Z ? Tt : void 0, se = ie.some(
+    ), ne = Z ? Bt : void 0, se = ie.some(
       (e) => e.line.label && e.isVerticalRule
-    ) ? Ut : void 0, ct = C || ne || se ? {
-      ...C ? Zt : {},
+    ) ? qt : void 0, dt = C || ne || se ? {
+      ...C ? jt : {},
       ...se,
       ...ne,
       ...C
@@ -123,7 +124,7 @@ const Xt = gt("", {
     c.forEach((e, t) => {
       e.stackId && e.type !== "line" && le.set(`${e.type}-${e.stackId}`, t);
     });
-    const dt = () => /* @__PURE__ */ T(pe, { children: [
+    const yt = () => /* @__PURE__ */ T(pe, { children: [
       /* @__PURE__ */ o(
         B,
         {
@@ -131,7 +132,7 @@ const Xt = gt("", {
           hide: !$ || m,
           tickLine: !1,
           axisLine: !1,
-          unit: be,
+          unit: Re,
           tickFormatter: R,
           angle: f,
           interval: H,
@@ -168,10 +169,10 @@ const Xt = gt("", {
           tickFormatter: P,
           tickCount: G,
           domain: Y,
-          label: rt
+          label: it
         }
       )
-    ] }), yt = () => /* @__PURE__ */ T(pe, { children: [
+    ] }), ft = () => /* @__PURE__ */ T(pe, { children: [
       /* @__PURE__ */ o(
         B,
         {
@@ -197,7 +198,7 @@ const Xt = gt("", {
           ...D ? { orientation: D } : {},
           tickLine: !1,
           axisLine: !1,
-          unit: Re,
+          unit: Le,
           tickFormatter: L,
           tickCount: W,
           domain: Q,
@@ -219,10 +220,10 @@ const Xt = gt("", {
           tickCount: G,
           domain: Y,
           width: I ? 72 : void 0,
-          label: at
+          label: rt
         }
       )
-    ] }), ft = re.size > 0 ? (e) => {
+    ] }), pt = re.size > 0 ? (e) => {
       var t;
       return /* @__PURE__ */ o(
         ge,
@@ -233,27 +234,27 @@ const Xt = gt("", {
           )
         }
       );
-    } : /* @__PURE__ */ o(ge, { verticalAlign: b }), pt = (e, t) => {
-      const a = e.color ?? `var(--color-${e.key})`, i = Pt + t, n = E(e.yAxis), s = e.stackId && e.type !== "line" ? `${e.type}-${e.stackId}` : void 0, ce = e.fillOpacity ?? Ne, de = e.connectNulls ?? ze, ye = e.showDots ?? Te, k = e.showActiveDots ?? Be, _ = e.legendType ? { legendType: e.legendType } : {}, fe = zt({
-        labelPosition: Ue,
+    } : /* @__PURE__ */ o(ge, { verticalAlign: b }), ht = (e, t) => {
+      const a = e.color ?? `var(--color-${e.key})`, i = Gt + t, n = E(e.yAxis), s = e.stackId && e.type !== "line" ? `${e.type}-${e.stackId}` : void 0, ce = e.fillOpacity ?? Te, de = e.connectNulls ?? Oe, ye = e.showDots ?? Be, k = e.showActiveDots ?? ze, _ = e.legendType ? { legendType: e.legendType } : {}, fe = Ot({
+        labelPosition: qe,
         isStacked: s !== void 0,
         growingEnd: r ? "right" : "top"
       }), S = Z ? /* @__PURE__ */ o(
-        Rt,
+        Lt,
         {
           dataKey: e.key,
           position: fe,
-          formatter: Ft(qe),
-          className: wt(fe, {
+          formatter: Vt(Je),
+          className: Ft(fe, {
             translucentSeries: e.type === "area"
           }),
-          fontSize: Ot
+          fontSize: wt
         }
       ) : null;
       if (e.type === "bar") {
-        const l = e.barRadius ?? Le, N = s === void 0 || le.get(s) === t, ut = e.showBackground ?? Ee, mt = e.showActiveBar ?? Se;
+        const l = e.barRadius ?? De, N = s === void 0 || le.get(s) === t, mt = e.showBackground ?? _e, kt = e.showActiveBar ?? Ne;
         return /* @__PURE__ */ o(
-          Lt,
+          Dt,
           {
             dataKey: e.key,
             ...n,
@@ -268,8 +269,8 @@ const Xt = gt("", {
               strokeDasharray: e.strokeDasharray,
               ...e.strokeWidth !== void 0 ? { strokeWidth: e.strokeWidth } : {}
             } : {},
-            ...ut ? { background: { fill: _e } } : {},
-            ...mt ? { activeBar: { fillOpacity: jt } } : {},
+            ...mt ? { background: { fill: Se } } : {},
+            ...kt ? { activeBar: { fillOpacity: Ut } } : {},
             ..._,
             ...x,
             children: S
@@ -280,7 +281,7 @@ const Xt = gt("", {
       if (e.type === "area") {
         const l = e.strokeWidth ?? V, N = l !== void 0 ? { strokeWidth: l } : {};
         return /* @__PURE__ */ o(
-          Dt,
+          It,
           {
             type: e.curve ?? F,
             dataKey: e.key,
@@ -303,7 +304,7 @@ const Xt = gt("", {
         );
       }
       return /* @__PURE__ */ o(
-        It,
+        xt,
         {
           type: e.curve ?? F,
           dataKey: e.key,
@@ -321,16 +322,16 @@ const Xt = gt("", {
         },
         e.key
       );
-    }, ht = ({ area: e, range: t }, a) => {
+    }, vt = ({ area: e, range: t }, a) => {
       const [i, n] = t;
       return /* @__PURE__ */ o(
-        xt,
+        Et,
         {
           ...ee,
           ...r ? { y1: p(i), y2: p(n) } : { x1: p(i), x2: p(n) },
           fill: "var(--ui-background-surface-secondary)",
           fillOpacity: 0.6,
-          zIndex: Gt,
+          zIndex: Zt,
           ifOverflow: "extendDomain",
           label: e.label ? {
             value: e.label,
@@ -341,17 +342,17 @@ const Xt = gt("", {
         },
         `${e.label ?? "area"}-${a}`
       );
-    }, vt = ({
+    }, ut = ({
       line: e,
       lineAxis: t,
       position: a,
       isVerticalRule: i
     }, n) => /* @__PURE__ */ o(
-      Et,
+      _t,
       {
         ...t === "secondary" && u ? E("secondary") : {},
         ...a,
-        ...Vt(
+        ...$t(
           e.label,
           e.labelPosition ?? (i ? "top" : "insideTopRight")
         )
@@ -361,58 +362,59 @@ const Xt = gt("", {
     return /* @__PURE__ */ o(
       "div",
       {
-        ref: tt,
+        ref: ot,
         "data-orientation": g,
-        className: _t(Xt({ orientation: g }), Ae),
-        ...et,
+        className: St(Pt({ orientation: g }), Ae),
+        ...tt,
         children: /* @__PURE__ */ o(
-          Mt,
+          Ht,
           {
             config: Ce,
+            palette: be,
             className: "size-full [&_.recharts-label]:fill-foreground",
             children: /* @__PURE__ */ T(
-              At,
+              Ct,
               {
                 data: y,
                 layout: r ? "vertical" : "horizontal",
-                barSize: De,
-                barGap: Ie,
-                barCategoryGap: xe,
-                margin: ct,
+                barSize: Ie,
+                barGap: xe,
+                barCategoryGap: Ee,
+                margin: dt,
                 children: [
-                  Oe && /* @__PURE__ */ o(
-                    Ct,
+                  we && /* @__PURE__ */ o(
+                    bt,
                     {
                       ...ee,
-                      horizontal: We ?? !r,
-                      vertical: Ke ?? r,
-                      strokeDasharray: He ? "3 3" : void 0
+                      horizontal: Ke ?? !r,
+                      vertical: Xe ?? r,
+                      strokeDasharray: We ? "3 3" : void 0
                     }
                   ),
-                  r ? dt() : yt(),
-                  we && /* @__PURE__ */ o(
-                    Ht,
+                  r ? yt() : ft(),
+                  Fe && /* @__PURE__ */ o(
+                    Wt,
                     {
-                      ...Fe ? {} : { cursor: !1 },
-                      content: Xe ?? /* @__PURE__ */ o(Wt, {})
+                      ...Ve ? {} : { cursor: !1 },
+                      content: Pe ?? /* @__PURE__ */ o(Kt, {})
                     }
                   ),
-                  Ve && /* @__PURE__ */ o(
-                    Kt,
+                  $e && /* @__PURE__ */ o(
+                    Xt,
                     {
                       verticalAlign: b,
-                      content: ft
+                      content: pt
                     }
                   ),
-                  c.map(pt),
-                  nt.map(ht),
-                  ie.map(vt),
-                  Je && /* @__PURE__ */ o(
-                    bt,
+                  c.map(ht),
+                  st.map(vt),
+                  ie.map(ut),
+                  Qe && /* @__PURE__ */ o(
+                    Rt,
                     {
                       dataKey: d,
                       tickFormatter: r ? L : R,
-                      ...Bt({ brushHeight: Qe, brushAriaLabel: Ye })
+                      ...zt({ brushHeight: Ye, brushAriaLabel: et })
                     }
                   )
                 ]
@@ -424,9 +426,9 @@ const Xt = gt("", {
     );
   }
 );
-qt.displayName = "ComposedChart";
+Jt.displayName = "ComposedChart";
 export {
-  qt as ComposedChart,
-  Xt as composedChartVariants
+  Jt as ComposedChart,
+  Pt as composedChartVariants
 };
 //# sourceMappingURL=composed-chart.js.map