@ds-mo/ui 3.0.0 → 3.1.0

package/src/wc/components/Card/Card.tsx

@@ -1,78 +0,0 @@
-import { Component, h, Host, Prop } from '@stencil/core';
-
-export type CardWidth = 'sm' | 'md' | 'lg';
-
-/** Visual chrome recipe — default app surface, or settings edit wash. */
-export type CardAppearance = 'default' | 'editing';
-
-const CARD_WIDTH_VARS: Record<CardWidth, string> = {
-  sm: 'var(--dimension-card-width-sm)',
-  md: 'var(--dimension-card-width-md)',
-  lg: 'var(--dimension-card-width-lg)',
-};
-
-const CARD_HEIGHT_VARS: Record<CardWidth, string> = {
-  sm: 'var(--dimension-card-height-sm)',
-  md: 'var(--dimension-card-height-md)',
-  lg: 'var(--dimension-card-height-lg)',
-};
-
-const FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';
-
-/**
- * Shared card chrome — width + matching min-height tokens, header (title + actions),
- * and a flex body that fills leftover space. Compose this from settings / data-viz cards.
- */
-@Component({
-  tag: 'ds-card',
-  styleUrl: 'Card.css',
-  scoped: true,
-})
-export class Card {
-  /** Section heading shown in the card header. */
-  @Prop() heading!: string;
-
-  /**
-   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the
-   * matching `--dimension-card-height-*` so empty bodies still fill the card.
-   */
-  @Prop() cardWidth: CardWidth = 'md';
-
-  /** Chrome recipe — `editing` applies the settings edit wash. */
-  @Prop() appearance: CardAppearance = 'default';
-
-  render() {
-    const editing = this.appearance === 'editing';
-
-    return (
-      <Host
-        class={{
-          card: true,
-          'card--editing': editing,
-        }}
-        style={{
-          '--_card-width': CARD_WIDTH_VARS[this.cardWidth],
-          '--_card-min-height': CARD_HEIGHT_VARS[this.cardWidth],
-        }}
-      >
-        <header class="card__header">
-          <ds-text
-            class="card__title-wrap card__title"
-            variant="text-title-small"
-            emphasis
-            color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}
-            as="h2"
-          >
-            {this.heading}
-          </ds-text>
-          <div class="card__actions">
-            <slot name="actions" />
-          </div>
-        </header>
-        <div class="card__body">
-          <slot />
-        </div>
-      </Host>
-    );
-  }
-}

package/src/wc/components/Card/index.ts

@@ -1 +0,0 @@
-export type { CardWidth, CardAppearance } from './Card';

package/src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx

@@ -1,108 +0,0 @@
-import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';
-import type { CardWidth } from '../Card/Card';
-
-export type CardDataVizDonutWidth = CardWidth;
-
-/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */
-type HoveredDatum = { label: string } | null;
-
-/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */
-type SyncableSlot = HTMLElement & { activeLabel?: string | null };
-
-/**
- * Donut data-viz card — shared `ds-card` chrome with a fill chart region and
- * content-sized legend. Hover sync between chart and legend stays here.
- */
-@Component({
-  tag: 'ds-card-data-viz-donut',
-  styleUrl: 'CardDataVizDonut.css',
-  scoped: true,
-})
-export class CardDataVizDonut {
-  @Element() el!: HTMLElement;
-
-  /** Widget heading shown in the card header. */
-  @Prop() heading!: string;
-
-  /** Card width token — also sets matching min-height. */
-  @Prop() cardWidth: CardDataVizDonutWidth = 'md';
-
-  /** Emits when the header filter control is activated. */
-  @Event() dsFilterClick!: EventEmitter<void>;
-
-  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —
-  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling
-  // padded box plus a body gap next to nothing.
-  @State() private hasChartSlot = false;
-  @State() private hasLegendSlot = false;
-
-  componentWillRender() {
-    // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into
-    // region wrappers (and here into nested `ds-card`), so they may not stay direct
-    // host children across renders.
-    this.hasChartSlot = !!this.el.querySelector('[slot="chart"]');
-    this.hasLegendSlot = !!this.el.querySelector('[slot="legend"]');
-  }
-
-  componentDidLoad() {
-    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any
-    // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to
-    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted
-    // elements) since Stencil events bubble and the slot content can be swapped at runtime.
-    this.el.addEventListener('dsSliceHover', this.handleChartHover);
-    this.el.addEventListener('dsItemHover', this.handleLegendHover);
-  }
-
-  disconnectedCallback() {
-    this.el.removeEventListener('dsSliceHover', this.handleChartHover);
-    this.el.removeEventListener('dsItemHover', this.handleLegendHover);
-  }
-
-  private handleChartHover = (e: Event) => {
-    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates
-    // slotted children into an inner region wrapper on render, so they're no longer direct
-    // children of the host by the time this fires.
-    const legend = this.el.querySelector('[slot="legend"]') as SyncableSlot | null;
-    if (!legend || !('activeLabel' in legend)) return;
-    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;
-  };
-
-  private handleLegendHover = (e: Event) => {
-    const chart = this.el.querySelector('[slot="chart"]') as SyncableSlot | null;
-    if (!chart || !('activeLabel' in chart)) return;
-    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;
-  };
-
-  private handleFilterClick = () => {
-    this.dsFilterClick.emit();
-  };
-
-  render() {
-    return (
-      <Host class="card-data-viz-donut">
-        <ds-card heading={this.heading} cardWidth={this.cardWidth}>
-          <ds-button-unfilled
-            slot="actions"
-            variant="icon"
-            type="button"
-            icon="Filters"
-            aria-label="Filter"
-            onDsClick={this.handleFilterClick}
-          />
-          <div class="card-data-viz-donut__layout">
-            {this.hasChartSlot && (
-              <div class="card-data-viz-donut__chart-region">
-                <slot name="chart" />
-              </div>
-            )}
-            {this.hasLegendSlot && (
-              <div class="card-data-viz-donut__legend-region">
-                <slot name="legend" />
-              </div>
-            )}
-          </div>
-        </ds-card>
-      </Host>
-    );
-  }
-}

package/src/wc/components/CardDataVizDonut/index.ts

@@ -1 +0,0 @@
-export type { CardDataVizDonutWidth } from './CardDataVizDonut';

package/src/wc/components/CardSetting/CardSetting.tsx

@@ -1,81 +0,0 @@
-import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
-import type { CardWidth } from '../Card/Card';
-
-export type CardSettingWidth = CardWidth;
-
-@Component({
-  tag: 'ds-card-setting',
-  styleUrl: 'CardSetting.css',
-  scoped: true,
-})
-export class CardSetting {
-  /** Section heading shown in the card header. */
-  @Prop() heading!: string;
-
-  /**
-   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the
-   * matching `--dimension-card-height-*` so the body fills available space
-   * even when the slot is empty.
-   */
-  @Prop() cardWidth: CardSettingWidth = 'md';
-
-  /** Controlled edit state — parent owns single-edit orchestration. */
-  @Prop() editing = false;
-
-  /** Emits when the user enters or exits edit mode. */
-  @Event() dsEditingChange!: EventEmitter<boolean>;
-
-  private enterEdit = () => {
-    this.dsEditingChange.emit(true);
-  };
-
-  private exitEdit = () => {
-    this.dsEditingChange.emit(false);
-  };
-
-  render() {
-    const editing = this.editing;
-
-    return (
-      <Host class="card-setting">
-        <ds-card
-          heading={this.heading}
-          cardWidth={this.cardWidth}
-          appearance={editing ? 'editing' : 'default'}
-        >
-          {!editing ? (
-            <ds-button-unfilled
-              slot="actions"
-              variant="icon"
-              type="button"
-              icon="Pencil"
-              aria-label="Edit"
-              onDsClick={this.enterEdit}
-            />
-          ) : (
-            <div slot="actions" class="card-setting__actions">
-              <ds-button-unfilled
-                variant="icon"
-                type="button"
-                icon="Cross"
-                backgroundContrast="bold"
-                aria-label="Cancel"
-                onDsClick={this.exitEdit}
-              />
-              <ds-button-filled
-                variant="icon"
-                type="button"
-                icon="Check"
-                intent="brand"
-                contrast="faint"
-                aria-label="Save"
-                onDsClick={this.exitEdit}
-              />
-            </div>
-          )}
-          <slot />
-        </ds-card>
-      </Host>
-    );
-  }
-}

package/src/wc/components/CardSetting/index.ts

@@ -1 +0,0 @@
-export type { CardSettingWidth } from './CardSetting';

package/src/wc/components/ChartBar/ChartBar.tsx

@@ -1,88 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-import { scaleBand, scaleLinear } from 'd3-scale';
-import { max } from 'd3-array';
-import { categoryColor } from '../../utils/chart-colors';
-import type { ChartDatum } from '../../utils/chart-types';
-
-const MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };
-
-@Component({
-  tag: 'ds-chart-bar',
-  styleUrl: 'ChartBar.css',
-  scoped: true,
-})
-export class ChartBar {
-  /** Bars to render. Set as a JS property (not an HTML attribute). */
-  @Prop() data: ChartDatum[] = [];
-  @Prop() width: number = 480;
-  @Prop() height: number = 240;
-
-  render() {
-    const innerWidth = this.width - MARGIN.left - MARGIN.right;
-    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;
-
-    const yMax = max(this.data, d => d.value) ?? 0;
-
-    const xScale = scaleBand()
-      .domain(this.data.map(d => d.label))
-      .range([0, innerWidth])
-      .padding(0.35);
-
-    const yScale = scaleLinear()
-      .domain([0, yMax || 1])
-      .range([innerHeight, 0])
-      .nice();
-
-    const yTicks = yScale.ticks(4);
-
-    return (
-      <Host class="chart-bar">
-        <svg
-          class="chart-bar__svg"
-          viewBox={`0 0 ${this.width} ${this.height}`}
-          width={this.width}
-          height={this.height}
-          role="img"
-          aria-label={this.data.map(d => `${d.label}: ${d.value}`).join(', ')}
-        >
-          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>
-            {yTicks.map(tick => (
-              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>
-                <line class="chart-bar__gridline" x1={0} x2={innerWidth} />
-                <text class="chart-bar__axis-label" x={-8} text-anchor="end" dominant-baseline="middle">
-                  {tick}
-                </text>
-              </g>
-            ))}
-
-            {this.data.map((d, i) => {
-              const barWidth = xScale.bandwidth();
-              const barX = xScale(d.label) ?? 0;
-              const barY = yScale(d.value);
-              return (
-                <g key={d.label}>
-                  <rect
-                    class="chart-bar__bar"
-                    x={barX}
-                    y={barY}
-                    width={barWidth}
-                    height={innerHeight - barY}
-                    fill={d.color ?? categoryColor(i)}
-                  />
-                  <text
-                    class="chart-bar__axis-label"
-                    x={barX + barWidth / 2}
-                    y={innerHeight + 16}
-                    text-anchor="middle"
-                  >
-                    {d.label}
-                  </text>
-                </g>
-              );
-            })}
-          </g>
-        </svg>
-      </Host>
-    );
-  }
-}

package/src/wc/components/ChartBar/index.ts

@@ -1 +0,0 @@
-export type { ChartDatum } from '../../utils/chart-types';

package/src/wc/components/ChartDonut/ChartDonut.tsx

@@ -1,289 +0,0 @@
-import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';
-import { arc, pie } from 'd3-shape';
-import { categoryColor } from '../../utils/chart-colors';
-import { formatCompactNumber, resolveCssLengthPx, truncateSvgTextToWidth, TOKEN_DEFAULTS } from '../../utils';
-import type { ChartDatum } from '../../utils/chart-types';
-
-const DIMMED_OPACITY = 0.25;
-/** Gap between the center value and caption line boxes. */
-const CENTER_GAP_PX = 0;
-/** Fraction of the inner-circle diameter center text is allowed to use before truncating. */
-const CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;
-/** Fallback when filling before the first ResizeObserver measurement (matches fill min). */
-const FILL_FALLBACK_PX = 128;
-
-@Component({
-  tag: 'ds-chart-donut',
-  styleUrl: 'ChartDonut.css',
-  scoped: true,
-})
-export class ChartDonut {
-  @Element() el!: HTMLElement;
-
-  /** Slices to render. Set as a JS property (not an HTML attribute). */
-  @Prop() data: ChartDatum[] = [];
-  /**
-   * Explicit diameter in px. When unset, the donut sizes to its container
-   * (ResizeObserver) clamped between `--dimension-size-base * 16` (128px) and
-   * `* 24` (192px), and stays centered in the leftover space. Prefer unset
-   * inside card layouts.
-   */
-  @Prop() size: number | undefined;
-  /** Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). */
-  @Prop() thickness: number | string = TOKEN_DEFAULTS.size200;
-  /** Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). */
-  @Prop() cornerRadius: number | string = TOKEN_DEFAULTS.radius025;
-  /** Gap between slices, in degrees. */
-  @Prop() gap: number = 1;
-  /** Primary center value; defaults to the sum of `data` values (e.g. "187", "40.9%"). */
-  @Prop() centerValue: string | undefined;
-  /** Secondary caption below the center value (e.g. "Total", "Normal"). Rendered uppercase. */
-  @Prop() centerCaption: string | undefined;
-  /**
-   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
-   * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.
-   * Falls back to this component's own pointer/focus hover when unset.
-   * Slice hover dims peer slices and emits `dsSliceHover` for legend sync — no data-viz
-   * tooltip (the legend already surfaces label/value).
-   */
-  @Prop() activeLabel: string | null = null;
-
-  @State() private hoveredLabel: string | null = null;
-  /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */
-  @State() private displayedValueText: string = '';
-  @State() private displayedCaptionText: string = '';
-  /** Measured fill diameter when `size` is unset. */
-  @State() private measuredSize: number = FILL_FALLBACK_PX;
-
-  /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */
-  @Event() dsSliceHover!: EventEmitter<ChartDatum | null>;
-
-  private valueTextEl?: SVGTextElement;
-  private captionTextEl?: SVGTextElement;
-  private resizeObserver: ResizeObserver | null = null;
-
-  private get isFillMode(): boolean {
-    return this.size == null || !Number.isFinite(this.size) || this.size <= 0;
-  }
-
-  private get fillMinPx(): number {
-    return resolveCssLengthPx(TOKEN_DEFAULTS.donutFillMin, FILL_FALLBACK_PX);
-  }
-
-  private get fillMaxPx(): number {
-    return resolveCssLengthPx(TOKEN_DEFAULTS.donutFillMax, 192);
-  }
-
-  /** Clamp available square side into the fill min/max band. */
-  private clampFillSize(availablePx: number): number {
-    const minPx = this.fillMinPx;
-    const maxPx = this.fillMaxPx;
-    if (!(availablePx > 0)) return minPx;
-    return Math.round(Math.min(maxPx, Math.max(minPx, availablePx)));
-  }
-
-  private get resolvedSize(): number {
-    if (!this.isFillMode) return this.size as number;
-    return this.clampFillSize(this.measuredSize);
-  }
-
-  componentDidLoad() {
-    this.syncResizeObserver();
-  }
-
-  @Watch('size')
-  onSizePropChange() {
-    this.syncResizeObserver();
-  }
-
-  disconnectedCallback() {
-    this.teardownResizeObserver();
-  }
-
-  private syncResizeObserver() {
-    this.teardownResizeObserver();
-    if (!this.isFillMode) return;
-    // Observe the host (which fills its parent), not the wrapper — the wrapper
-    // only wraps the SVG and would collapse to the clamped size, locking fill at min.
-    const target = this.el;
-    if (!target || typeof ResizeObserver === 'undefined') return;
-
-    this.resizeObserver = new ResizeObserver(entries => {
-      const entry = entries[0];
-      if (!entry) return;
-      this.applyAvailableSize(entry.contentRect.width, entry.contentRect.height);
-    });
-    this.resizeObserver.observe(target);
-    this.measureHost();
-  }
-
-  private measureHost() {
-    const rect = this.el.getBoundingClientRect();
-    this.applyAvailableSize(rect.width, rect.height);
-  }
-
-  private applyAvailableSize(width: number, height: number) {
-    const available = Math.floor(Math.min(width, height));
-    if (available > 0 && available !== this.measuredSize) {
-      this.measuredSize = available;
-    }
-  }
-
-  private teardownResizeObserver() {
-    this.resizeObserver?.disconnect();
-    this.resizeObserver = null;
-  }
-
-  private handleHover(datum: ChartDatum | null) {
-    this.hoveredLabel = datum?.label ?? null;
-    this.dsSliceHover.emit(datum);
-  }
-
-  componentDidRender() {
-    // Re-bind after HMR when DidLoad's observer was dropped.
-    if (this.isFillMode && !this.resizeObserver) {
-      this.syncResizeObserver();
-    }
-
-    const size = this.resolvedSize;
-    const radius = size / 2;
-    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);
-    const innerRadius = radius - thicknessPx;
-    const maxWidth = innerRadius * 2 * CENTER_TEXT_SAFE_WIDTH_RATIO;
-    const total = this.data.reduce((sum, d) => sum + d.value, 0);
-
-    const fullValueText = this.centerValue ?? formatCompactNumber(total);
-    if (this.valueTextEl) {
-      const truncated = truncateSvgTextToWidth(this.valueTextEl, fullValueText, maxWidth);
-      if (truncated !== this.displayedValueText) this.displayedValueText = truncated;
-      else this.valueTextEl.textContent = truncated;
-    }
-
-    const fullCaptionText = this.centerCaption ?? '';
-    if (this.captionTextEl && fullCaptionText) {
-      const truncated = truncateSvgTextToWidth(this.captionTextEl, fullCaptionText, maxWidth);
-      if (truncated !== this.displayedCaptionText) this.displayedCaptionText = truncated;
-      else this.captionTextEl.textContent = truncated;
-    }
-  }
-
-  render() {
-    const size = this.resolvedSize;
-    const radius = size / 2;
-    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);
-    const cornerRadiusPx = resolveCssLengthPx(this.cornerRadius, TOKEN_DEFAULTS.radius025);
-    const innerRadius = radius - thicknessPx;
-    const total = this.data.reduce((sum, d) => sum + d.value, 0);
-    // d3's pie() divides each value by the total to get an angle — with an all-zero total
-    // that's 0/0, producing NaN angles and broken paths. Render a flat neutral ring instead.
-    const isEmpty = total <= 0;
-    // Highlight/dim from either this component's own hover or an externally-synced label
-    // (e.g. a sibling ds-chart-legend row).
-    const highlightLabel = this.activeLabel ?? this.hoveredLabel;
-
-    const arcGenerator = arc<{ startAngle: number; endAngle: number }>()
-      .innerRadius(innerRadius)
-      .outerRadius(radius)
-      .cornerRadius(cornerRadiusPx)
-      .padAngle((this.gap * Math.PI) / 180);
-
-    const slices = isEmpty
-      ? []
-      : pie<ChartDatum>()
-          .value(d => d.value)
-          .sort(null)(this.data);
-
-    const emptyRingPath = isEmpty
-      ? arc<{ startAngle: number; endAngle: number }>()
-          .innerRadius(innerRadius)
-          .outerRadius(radius)({ startAngle: 0, endAngle: Math.PI * 2 })
-      : null;
-
-    // Precise vertical centering for the two-line center text, using the real line-height of
-    // text-title-large (value) and text-body-medium (caption) rather than eyeballed em offsets.
-    const valueLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightXl, 32);
-    const captionLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightMd, 20);
-    const centerValueY = this.centerCaption ? radius - (CENTER_GAP_PX + captionLineHeight) / 2 : radius;
-    const centerCaptionY = radius + (valueLineHeight + CENTER_GAP_PX) / 2;
-
-    // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).
-    const fullValueText = this.centerValue ?? formatCompactNumber(total);
-    const fullCaptionText = this.centerCaption ?? '';
-    const fill = this.isFillMode;
-
-    return (
-      <Host
-        class={{
-          'chart-donut': true,
-          'chart-donut--fill': fill,
-          'chart-donut--fixed': !fill,
-        }}
-        style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}
-      >
-        <div
-          class="chart-donut__wrapper"
-          style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}
-        >
-          <svg
-            class="chart-donut__svg"
-            viewBox={`0 0 ${size} ${size}`}
-            width={size}
-            height={size}
-          >
-            <g transform={`translate(${radius}, ${radius})`}>
-              {isEmpty ? (
-                <path d={emptyRingPath ?? undefined} fill="var(--color-background-faint-neutral)" aria-label="No data" />
-              ) : (
-                slices.map((slice, i) => {
-                  const datum = this.data[i];
-                  const isDimmed = highlightLabel != null && datum.label !== highlightLabel;
-                  return (
-                    <path
-                      key={datum.label}
-                      d={arcGenerator(slice) ?? undefined}
-                      fill={datum.color ?? categoryColor(i)}
-                      opacity={isDimmed ? DIMMED_OPACITY : 1}
-                      tabindex={0}
-                      role="img"
-                      aria-label={`${datum.label}: ${datum.value}`}
-                      onMouseEnter={() => this.handleHover(datum)}
-                      onMouseLeave={() => this.handleHover(null)}
-                      onFocus={() => this.handleHover(datum)}
-                      onBlur={() => this.handleHover(null)}
-                    />
-                  );
-                })
-              )}
-            </g>
-            <text
-              class="chart-donut__center-value"
-              x={radius}
-              y={centerValueY}
-              text-anchor="middle"
-              dominant-baseline="central"
-              ref={el => {
-                this.valueTextEl = (el as SVGTextElement) ?? undefined;
-              }}
-            >
-              {this.displayedValueText || fullValueText}
-            </text>
-            {fullCaptionText && (
-              <text
-                class="chart-donut__center-caption"
-                x={radius}
-                y={centerCaptionY}
-                text-anchor="middle"
-                dominant-baseline="central"
-                ref={el => {
-                  this.captionTextEl = (el as SVGTextElement) ?? undefined;
-                }}
-              >
-                {this.displayedCaptionText || fullCaptionText}
-              </text>
-            )}
-          </svg>
-        </div>
-      </Host>
-    );
-  }
-}

package/src/wc/components/ChartDonut/index.ts

@@ -1 +0,0 @@
-export type { ChartDatum } from '../../utils/chart-types';