@urbicon-ui/blocks 6.1.4

package/README.md

@@ -0,0 +1,102 @@
+# @urbicon-ui/blocks
+
+Svelte 5 UI component library with Tailwind CSS 4 — zero runtime dependencies, part of the Urbicon UI monorepo.
+
+## Installation
+
+This package ships inside the Urbicon UI monorepo. Install from the repo root:
+
+```bash
+bun install
+```
+
+Peer dependencies: `svelte` (^5), `@sveltejs/kit`, `@urbicon-ui/i18n`.
+
+## Components
+
+### Primitives (35)
+
+Accordion, Alert, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Card, Checkbox, Collapsible, Combobox, ConfirmDialog, Dialog, Drawer, FormField, Input, Menu, Pagination, Popover, Progress, RadioGroup, SegmentGroup, Select, Separator, Sidebar, Skeleton, Slider, Spinner, Stepper, Tab, Textarea, Toast, Toggle, Toolbar, Tooltip
+
+### Components (10)
+
+Calendar, CommandPalette, CompositionBar, CurrencyInput, DatePicker, EmptyState, FileUpload, LocaleSwitcher, Sankey, ThemeSwitcher
+
+### System
+
+Portal, ClickOutside, ContextIsolation — low-level primitives used by overlay components.
+
+All primitives and components support `unstyled` + `slotClasses` + `preset` for full style control. See the [Component API Conventions](../../docs/COMPONENT-API-CONVENTIONS.md) for `intent`, `variant`, `size`, callbacks, and styling patterns.
+
+## Styling
+
+Components use a **custom `tv()` variant engine** (`src/lib/utils/variants.ts`, ~600 LoC, zero-dependency replacement for `tailwind-variants`). Design tokens live in `src/lib/style/` as a three-layer OKLCH system (foundation → semantic → interaction). See the [Architecture Overview](../../docs/ARCHITECTURE.md) for details.
+
+## Mint System (Micro-Interactions)
+
+Opt-in micro-interactions. Call `registerDefaultMints()` at app startup, then use via prop:
+
+```svelte
+<Button mint="scale">Hover me</Button>
+<Card mint={['scale', 'ripple']}>Interactive card</Card>
+```
+
+Available effects: `scale`, `ripple`, `translate`, `glow`, `bounce`, `pulse`, `shake`, `wiggle`. Respects `prefers-reduced-motion` automatically.
+
+## Presets & Defaults
+
+`BlocksProvider` registers project-wide defaults and named presets. Override hierarchy:
+
+```
+tv()-Defaults → BlocksProvider defaults → BlocksProvider presets → Instance slotClasses → Instance class
+```
+
+```svelte
+<BlocksProvider
+  presets={{
+    Button: { overlay: { slotClasses: { base: 'bg-black/20 hover:bg-black/30 text-white' } } }
+  }}
+>
+  <Button preset="overlay">Weiter</Button>
+</BlocksProvider>
+```
+
+## Icons
+
+156 hand-rolled SVG icons in `src/lib/icons/`, registered via `IconProvider`. Metadata (`ICON_METADATA`) enables search by name, keyword, or category. See the icon-design rules in [AGENTS.md → Icon Design Rules](../../AGENTS.md#icon-design-rules).
+
+## i18n
+
+Re-exports `@urbicon-ui/i18n`. Components with text content (Pagination, Menu, Combobox, Dialog) use internal package-scoped translation keys, resolved against the request-scoped locale from `<I18nProvider>` — or the base locale (`en`) when no provider is mounted. Mount one provider at your app root; switch with `<LocaleSwitcher>` (or `useI18n().setLocale`).
+
+```svelte
+<script>
+  import { I18nProvider } from '@urbicon-ui/i18n';
+  import { LocaleSwitcher } from '@urbicon-ui/blocks';
+
+  let { data, children } = $props();
+</script>
+
+<I18nProvider locale={data.locale}>
+  <LocaleSwitcher />
+  {@render children()}
+</I18nProvider>
+```
+
+For the provider/hook API, typed keys, SSR locale resolution, and opt-in lazy loading see the [@urbicon-ui/i18n](../i18n/) package.
+
+## Development
+
+```bash
+bun install
+bun --filter='@urbicon-ui/blocks' run dev    # Dev mode
+bun --filter='@urbicon-ui/blocks' run build  # Build
+bun run check                                 # Type check (from root)
+bun run test                                  # Run tests (from root)
+```
+
+## Related
+
+- [docs/ARCHITECTURE.md](../../docs/ARCHITECTURE.md) — Token system, Mint, Preset-System, i18n
+- [docs/COMPONENT-API-CONVENTIONS.md](../../docs/COMPONENT-API-CONVENTIONS.md) — Props, callbacks, styling patterns
+- [docs/ComponentStructureStandard.md](../../docs/ComponentStructureStandard.md) — File structure, index.ts, variants.ts

package/dist/components/AreaChart/AreaChart.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import type { AreaChartProps } from './index';
+  import type { ChartSeries } from '../../internal/charts/types';
+  import { chartSlotResolver } from '../../internal/charts/variants';
+  import {
+    linearScale,
+    niceScale,
+    linePath,
+    areaPath,
+    seriesColor,
+    numberFormatter,
+    extent
+  } from '../../internal/charts/utils';
+  import type { ChartPoint } from '../../internal/charts/utils';
+  import ChartFrame from '../ChartFrame/ChartFrame.svelte';
+
+  let {
+    data,
+    series: seriesProp,
+    stacked = false,
+    fillOpacity,
+    height = 240,
+    width,
+    margin,
+    formatValue,
+    locale,
+    showLegend = true,
+    showGrid = true,
+    ariaLabel,
+    class: className,
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...rest
+  }: AreaChartProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.AreaChart?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'AreaChart', preset),
+      slotClassesProp
+    )
+  );
+  const slot = $derived(chartSlotResolver(unstyled, slotClasses));
+
+  const seriesCount = $derived(
+    Math.max(1, seriesProp?.length ?? 0, ...data.map((d) => d.values.length))
+  );
+  const resolvedSeries = $derived<ChartSeries[]>(
+    seriesProp && seriesProp.length > 0
+      ? seriesProp
+      : Array.from({ length: seriesCount }, (_, i) => ({ label: `Series ${i + 1}` }))
+  );
+
+  const fmt = $derived(formatValue ?? numberFormatter(locale));
+  const opacity = $derived(fillOpacity ?? (stacked ? 0.85 : 0.2));
+
+  const domain = $derived.by<[number, number]>(() => {
+    if (stacked) {
+      let max = 0;
+      let min = 0;
+      for (const d of data) {
+        let sum = 0;
+        resolvedSeries.forEach((_s, si) => {
+          sum += d.values[si] ?? 0;
+        });
+        if (sum > max) max = sum;
+        if (sum < min) min = sum;
+      }
+      return [Math.min(0, min), max];
+    }
+    const all = data.flatMap((d) => resolvedSeries.map((_s, si) => d.values[si] ?? 0));
+    const [mn, mx] = extent(all);
+    return [Math.min(0, mn), mx];
+  });
+  const nice = $derived(niceScale(domain[0], domain[1], 5, true));
+
+  function xAt(index: number, innerWidth: number): number {
+    return data.length <= 1 ? innerWidth / 2 : (index / (data.length - 1)) * innerWidth;
+  }
+
+  interface SeriesArea {
+    color: string;
+    label: string;
+    areaD: string;
+    lineD: string;
+  }
+
+  function computeAreas(innerWidth: number, innerHeight: number): SeriesArea[] {
+    const y = linearScale([nice.min, nice.max], [innerHeight, 0]);
+
+    if (stacked) {
+      const cumulative = data.map(() => 0);
+      return resolvedSeries.map((s, si) => {
+        const lower: ChartPoint[] = data.map((_d, i) => [xAt(i, innerWidth), y(cumulative[i])]);
+        data.forEach((d, i) => {
+          cumulative[i] += d.values[si] ?? 0;
+        });
+        const upper: ChartPoint[] = data.map((_d, i) => [xAt(i, innerWidth), y(cumulative[i])]);
+        // Closed polygon: top edge forward, lower edge back. linePath() applies
+        // the shared coord() rounding so both edges format consistently.
+        const ring: ChartPoint[] = [...upper, ...lower.slice().reverse()];
+        return {
+          color: seriesColor(si, s.color),
+          label: s.label,
+          areaD: `${linePath(ring)}Z`,
+          lineD: linePath(upper)
+        };
+      });
+    }
+
+    const baselineY = y(0);
+    return resolvedSeries.map((s, si) => {
+      const points: ChartPoint[] = data.map((d, i) => [xAt(i, innerWidth), y(d.values[si] ?? 0)]);
+      return {
+        color: seriesColor(si, s.color),
+        label: s.label,
+        areaD: areaPath(points, baselineY),
+        lineD: linePath(points)
+      };
+    });
+  }
+
+  const resolvedAriaLabel = $derived(
+    ariaLabel ??
+      `Area chart: ${data.length} points` +
+        (resolvedSeries.length > 1 ? `, ${resolvedSeries.length} series` : '') +
+        (stacked ? ', stacked' : '')
+  );
+</script>
+
+<ChartFrame
+  {height}
+  {width}
+  {margin}
+  ariaLabel={resolvedAriaLabel}
+  {unstyled}
+  {slotClasses}
+  class={className}
+  {...rest}
+>
+  {#snippet children(plot)}
+    {@const yScale = linearScale([nice.min, nice.max], [plot.innerHeight, 0])}
+    {@const areas = computeAreas(plot.innerWidth, plot.innerHeight)}
+
+    {#if showGrid}
+      <g class={slot('grid')} aria-hidden="true">
+        {#each nice.ticks as tick (tick)}
+          <line x1="0" x2={plot.innerWidth} y1={yScale(tick)} y2={yScale(tick)} />
+        {/each}
+      </g>
+    {/if}
+
+    <!-- value axis -->
+    <g class={slot('axis')} aria-hidden="true">
+      {#each nice.ticks as tick (tick)}
+        <text x="-8" y={yScale(tick)} dy="0.32em" text-anchor="end" class={slot('axisLabel')}>
+          {fmt(tick)}
+        </text>
+      {/each}
+    </g>
+
+    <!-- category axis -->
+    <g class={slot('axis')} aria-hidden="true">
+      {#each data as datum, i (datum.label + ' ' + i)}
+        <text
+          x={xAt(i, plot.innerWidth)}
+          y={plot.innerHeight + 16}
+          text-anchor="middle"
+          class={slot('axisLabel')}
+        >
+          {datum.label}
+        </text>
+      {/each}
+    </g>
+
+    <!-- series areas -->
+    {#each areas as area, si (area.label + ' ' + si)}
+      <path
+        class={slot('mark')}
+        d={area.areaD}
+        fill={area.color}
+        fill-opacity={opacity}
+        stroke="none"
+      />
+      <path
+        class={slot('mark')}
+        d={area.lineD}
+        fill="none"
+        stroke={area.color}
+        stroke-width="1.5"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+      />
+    {/each}
+  {/snippet}
+
+  {#snippet legend()}
+    {#if showLegend && resolvedSeries.length > 1}
+      <ul class={slot('legend')}>
+        {#each resolvedSeries as s, i (s.label + ' ' + i)}
+          <li class={slot('legendItem')}>
+            <span class={slot('legendSwatch')} style="background-color: {seriesColor(i, s.color)}"
+            ></span>
+            {s.label}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  {/snippet}
+
+  {#snippet fallback()}
+    <table>
+      <caption>{resolvedAriaLabel}</caption>
+      <thead>
+        <tr>
+          <th scope="col">Category</th>
+          {#each resolvedSeries as s, i (s.label + ' ' + i)}
+            <th scope="col">{s.label || `Series ${i + 1}`}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each data as datum, di (datum.label + ' ' + di)}
+          {@const cells = resolvedSeries.map((_s, si) => datum.values[si] ?? 0)}
+          <tr>
+            <th scope="row">{datum.label}</th>
+            {#each cells as cell, ci (ci)}
+              <td>{fmt(cell)}</td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/snippet}
+</ChartFrame>

package/dist/components/AreaChart/AreaChart.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AreaChartProps } from './index';
+declare const AreaChart: import("svelte").Component<AreaChartProps, {}, "">;
+type AreaChart = ReturnType<typeof AreaChart>;
+export default AreaChart;

package/dist/components/AreaChart/index.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { CartesianDatum, ChartMargin, ChartSeries, ChartSlotClasses } from '../../internal/charts/types';
+/**
+ * @description Area chart for trends with volume emphasis — filled regions
+ * under each series, optionally stacked. Zero-dependency SVG on the design-
+ * token palette, responsive, dark-mode aware, with a screen-reader data-table
+ * fallback.
+ *
+ * @tag display
+ * @tag data
+ * @related LineChart
+ * @related BarChart
+ * @stability beta
+ *
+ * @example
+ * ```svelte
+ * <AreaChart
+ *   stacked
+ *   data={[
+ *     { label: 'Jan', values: [4, 6] },
+ *     { label: 'Feb', values: [7, 3] }
+ *   ]}
+ *   series={[{ label: 'New' }, { label: 'Returning' }]}
+ * />
+ * ```
+ */
+export interface AreaChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Ordered categories with per-series values. */
+    data: CartesianDatum[];
+    /** Series metadata (labels + colors); defaults to one per value column. */
+    series?: ChartSeries[];
+    /** Stack series cumulatively instead of overlaying them. @default false */
+    stacked?: boolean;
+    /** Opacity of the area fill (0–1). @default 0.2 (overlay) / 0.85 (stacked) */
+    fillOpacity?: number;
+    /** SVG height in px. @default 240 */
+    height?: number;
+    /** Fixed width in px; omit for responsive width. */
+    width?: number;
+    /** Plot margins; merged over the defaults. */
+    margin?: ChartMargin;
+    /** Format values for axis labels, tooltips, and the data table. */
+    formatValue?: (value: number) => string;
+    /** BCP-47 locale for the default number formatter. */
+    locale?: string;
+    /** Show the series legend (only renders with >1 series). @default true */
+    showLegend?: boolean;
+    /** Render horizontal gridlines. @default true */
+    showGrid?: boolean;
+    /** Accessible label; a summary is generated when omitted. */
+    ariaLabel?: string;
+    /** Extra classes merged onto the wrapper. */
+    class?: string;
+    /** Remove all default tv classes. */
+    unstyled?: boolean;
+    /** Per-slot class overrides. */
+    slotClasses?: ChartSlotClasses;
+    /** Apply a named preset registered on `<BlocksProvider>`. */
+    preset?: string;
+}
+export { default as AreaChart } from './AreaChart.svelte';

package/dist/components/AreaChart/index.js

@@ -0,0 +1 @@
+export { default as AreaChart } from './AreaChart.svelte';

package/dist/components/BarChart/BarChart.svelte

@@ -0,0 +1,265 @@
+<script lang="ts">
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import type { BarChartProps } from './index';
+  import type { ChartSeries } from '../../internal/charts/types';
+  import { chartSlotResolver } from '../../internal/charts/variants';
+  import {
+    bandScale,
+    linearScale,
+    niceScale,
+    seriesColor,
+    numberFormatter,
+    extent
+  } from '../../internal/charts/utils';
+  import ChartFrame from '../ChartFrame/ChartFrame.svelte';
+
+  let {
+    data,
+    series: seriesProp,
+    stacked = false,
+    height = 240,
+    width,
+    margin,
+    formatValue,
+    locale,
+    showLegend = true,
+    showGrid = true,
+    ariaLabel,
+    class: className,
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...rest
+  }: BarChartProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.BarChart?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'BarChart', preset),
+      slotClassesProp
+    )
+  );
+  const slot = $derived(chartSlotResolver(unstyled, slotClasses));
+
+  // Resolve series: explicit prop wins; otherwise derive one entry per value
+  // column found in the data (single bars when each datum has one value).
+  const seriesCount = $derived(
+    Math.max(1, seriesProp?.length ?? 0, ...data.map((d) => d.values.length))
+  );
+  const resolvedSeries = $derived<ChartSeries[]>(
+    seriesProp && seriesProp.length > 0
+      ? seriesProp
+      : Array.from({ length: seriesCount }, (_, i) => ({ label: `Series ${i + 1}` }))
+  );
+
+  const fmt = $derived(formatValue ?? numberFormatter(locale));
+
+  // Value-axis domain — pixel-independent, so it lives in the script.
+  const domain = $derived.by<[number, number]>(() => {
+    if (stacked) {
+      let max = 0;
+      let min = 0;
+      for (const d of data) {
+        let pos = 0;
+        let neg = 0;
+        resolvedSeries.forEach((_s, si) => {
+          const v = d.values[si] ?? 0;
+          if (v >= 0) pos += v;
+          else neg += v;
+        });
+        if (pos > max) max = pos;
+        if (neg < min) min = neg;
+      }
+      return [min, max];
+    }
+    const all = data.flatMap((d) => resolvedSeries.map((_s, si) => d.values[si] ?? 0));
+    return extent(all);
+  });
+
+  const nice = $derived(niceScale(domain[0], domain[1], 5, true));
+
+  interface BarRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    value: number;
+    datumIndex: number;
+    seriesIndex: number;
+    label: string;
+    seriesLabel: string;
+  }
+
+  // Pure layout — called inside the ChartFrame snippet where the measured plot
+  // dimensions are available.
+  function computeBars(innerWidth: number, innerHeight: number): BarRect[] {
+    const bands = bandScale(data.length, [0, innerWidth], 0.25);
+    const y = linearScale([nice.min, nice.max], [innerHeight, 0]);
+    const zeroY = y(0);
+    const rects: BarRect[] = [];
+
+    data.forEach((datum, di) => {
+      const bandX = bands.position(di);
+      if (stacked) {
+        let posAcc = 0;
+        let negAcc = 0;
+        resolvedSeries.forEach((s, si) => {
+          const v = datum.values[si] ?? 0;
+          const base = v >= 0 ? posAcc : negAcc;
+          const top = base + v;
+          const yTop = y(Math.max(base, top));
+          const yBottom = y(Math.min(base, top));
+          rects.push({
+            x: bandX,
+            y: yTop,
+            width: bands.bandwidth,
+            height: Math.max(0, yBottom - yTop),
+            color: seriesColor(si, s.color),
+            value: v,
+            datumIndex: di,
+            seriesIndex: si,
+            label: datum.label,
+            seriesLabel: s.label
+          });
+          if (v >= 0) posAcc = top;
+          else negAcc = top;
+        });
+      } else {
+        const inner = bandScale(resolvedSeries.length, [bandX, bandX + bands.bandwidth], 0.1);
+        resolvedSeries.forEach((s, si) => {
+          const v = datum.values[si] ?? 0;
+          const yv = y(v);
+          rects.push({
+            x: inner.position(si),
+            y: Math.min(zeroY, yv),
+            width: inner.bandwidth,
+            height: Math.abs(yv - zeroY),
+            color: seriesColor(si, s.color),
+            value: v,
+            datumIndex: di,
+            seriesIndex: si,
+            label: datum.label,
+            seriesLabel: s.label
+          });
+        });
+      }
+    });
+    return rects;
+  }
+
+  const resolvedAriaLabel = $derived(
+    ariaLabel ??
+      `Bar chart: ${data.length} ${data.length === 1 ? 'category' : 'categories'}` +
+        (resolvedSeries.length > 1 ? `, ${resolvedSeries.length} series` : '')
+  );
+</script>
+
+<ChartFrame
+  {height}
+  {width}
+  {margin}
+  ariaLabel={resolvedAriaLabel}
+  {unstyled}
+  {slotClasses}
+  class={className}
+  {...rest}
+>
+  {#snippet children(plot)}
+    {@const yScale = linearScale([nice.min, nice.max], [plot.innerHeight, 0])}
+    {@const bands = bandScale(data.length, [0, plot.innerWidth], 0.25)}
+    {@const bars = computeBars(plot.innerWidth, plot.innerHeight)}
+
+    {#if showGrid}
+      <g class={slot('grid')} aria-hidden="true">
+        {#each nice.ticks as tick (tick)}
+          <line x1="0" x2={plot.innerWidth} y1={yScale(tick)} y2={yScale(tick)} />
+        {/each}
+      </g>
+    {/if}
+
+    <!-- value axis -->
+    <g class={slot('axis')} aria-hidden="true">
+      {#each nice.ticks as tick (tick)}
+        <text x="-8" y={yScale(tick)} dy="0.32em" text-anchor="end" class={slot('axisLabel')}>
+          {fmt(tick)}
+        </text>
+      {/each}
+      <line class={slot('axisLine')} x1="0" x2={plot.innerWidth} y1={yScale(0)} y2={yScale(0)} />
+    </g>
+
+    <!-- category axis -->
+    <g class={slot('axis')} aria-hidden="true">
+      {#each data as datum, i (datum.label + ' ' + i)}
+        <text
+          x={bands.center(i)}
+          y={plot.innerHeight + 16}
+          text-anchor="middle"
+          class={slot('axisLabel')}
+        >
+          {datum.label}
+        </text>
+      {/each}
+    </g>
+
+    <!-- bars -->
+    <g>
+      {#each bars as bar (bar.datumIndex + ':' + bar.seriesIndex)}
+        <rect
+          class={slot('bar')}
+          x={bar.x}
+          y={bar.y}
+          width={bar.width}
+          height={bar.height}
+          rx="1"
+          fill={bar.color}
+        >
+          <title
+            >{bar.seriesLabel ? `${bar.seriesLabel} — ` : ''}{bar.label}: {fmt(bar.value)}</title
+          >
+        </rect>
+      {/each}
+    </g>
+  {/snippet}
+
+  {#snippet legend()}
+    {#if showLegend && resolvedSeries.length > 1}
+      <ul class={slot('legend')}>
+        {#each resolvedSeries as s, i (s.label + ' ' + i)}
+          <li class={slot('legendItem')}>
+            <span class={slot('legendSwatch')} style="background-color: {seriesColor(i, s.color)}"
+            ></span>
+            {s.label}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  {/snippet}
+
+  {#snippet fallback()}
+    <table>
+      <caption>{resolvedAriaLabel}</caption>
+      <thead>
+        <tr>
+          <th scope="col">Category</th>
+          {#each resolvedSeries as s, i (s.label + ' ' + i)}
+            <th scope="col">{s.label || `Series ${i + 1}`}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each data as datum, di (datum.label + ' ' + di)}
+          {@const cells = resolvedSeries.map((_s, si) => datum.values[si] ?? 0)}
+          <tr>
+            <th scope="row">{datum.label}</th>
+            {#each cells as cell, ci (ci)}
+              <td>{fmt(cell)}</td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/snippet}
+</ChartFrame>

package/dist/components/BarChart/BarChart.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BarChartProps } from './index';
+declare const BarChart: import("svelte").Component<BarChartProps, {}, "">;
+type BarChart = ReturnType<typeof BarChart>;
+export default BarChart;