@nanisoft/prism-ui 0.13.0 → 0.16.0

package/dist/components/ui/carousel.js

@@ -43,6 +43,13 @@ import { cn } from '../../lib/utils.js';
  * handler, which is the version a consumer cannot assemble for themselves because
  * every one of those keys is a chance to get one wrong.
  *
+ * **A slide that is holding the caret keeps the keys.** The handler is on the
+ * region, so it sees everything that bubbles out of a slide, and a slide is the
+ * caller's slot: it can hold a field, a `select` or an editable region, and in all
+ * three those four keys belong to the value. So a key is answered only when it did
+ * not land in one of them, which is the discipline `ResizableHandle` applies to the
+ * same keys on the other axis.
+ *
  * **The slide transition is a state change and not an entrance.** The track moves
  * with `duration-base ease-out`, which is the reader's own press being reported
  * back, and there is no fade on mount and no motion a reader did not ask for.
@@ -68,12 +75,23 @@ function Carousel({ slides, label, position, className, empty, previousLabel = '
     const atLast = at >= total - 1;
     // The reader's own arrow keys, which are the reason this is a Component rather
     // than a stack of divs with two buttons beside them.
+    //
+    // The handler is on the region, so it sees every key that bubbles up out of a
+    // slide, and a slide is a caller's slot: it can hold a text field, a number input,
+    // a code block that scrolls sideways or a `contenteditable`. Left and right are the
+    // caret keys in all four, and this Component was calling `preventDefault()` on
+    // them unconditionally, so a reader typing a value into a caption field moved the
+    // carousel instead. So the keys are answered only when nothing inside the carousel
+    // is using them, which is the discipline `ResizableHandle` follows for the same
+    // keys on the other axis: only what a Component owns is consumed.
     const onKeyDown = (event) => {
         const keys = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
         if (!keys.includes(event.key))
             return;
         if (total <= 1)
             return;
+        if (usesItsOwnArrows(event.target))
+            return;
         event.preventDefault();
         if (event.key === 'Home')
             set(0);
@@ -136,7 +154,23 @@ function Carousel({ slides, label, position, className, empty, previousLabel = '
                     className: "flex transition-transform duration-base ease-out", style: { width: `${100 * total}%` }, children: slides.map((slide, slideAt) => {
                         const current = slideAt === at;
                         return (_jsx("div", { "data-slot": "carousel-slide", "data-current": current ? 'true' : undefined, id: `${labelId}-slide-${slideAt}`, role: "group", "aria-label": slide.label, "aria-roledescription": "slide", "aria-hidden": current ? undefined : true, className: "w-full shrink-0", children: slide.children }, slide.id));
-                    }) }) }), total > 1 ? (_jsxs("div", { "data-slot": "carousel-controls", className: "flex items-center justify-between gap-3", children: [_jsx("button", { type: "button", ref: previous, "data-slot": "carousel-previous", "aria-label": previousLabel, disabled: atFirst, onClick: () => set(at - 1), className: cn('border-input bg-background text-foreground inline-flex size-9 items-center justify-center rounded-md border outline-none', 'transition-colors duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground', 'focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50'), children: _jsx(ChevronLeftIcon, { className: "size-4", "aria-hidden": "true" }) }), _jsx("p", { "data-slot": "carousel-position", "aria-live": "polite", className: "text-muted-foreground text-sm tabular-nums", children: position(at + 1, total) }), _jsx("button", { type: "button", ref: next, "data-slot": "carousel-next", "aria-label": nextLabel, disabled: atLast, onClick: () => set(at + 1), className: cn('border-input bg-background text-foreground inline-flex size-9 items-center justify-center rounded-md border outline-none', 'transition-colors duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground', 'focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50'), children: _jsx(ChevronRightIcon, { className: "size-4", "aria-hidden": "true" }) })] })) : (
+                    }) }) }), total > 1 ? (_jsxs("div", { "data-slot": "carousel-controls", className: "flex items-center justify-between gap-3", children: [_jsx("button", { type: "button", ref: previous, "data-slot": "carousel-previous", "aria-label": previousLabel, disabled: atFirst, onClick: () => set(at - 1), className: cn('border-input bg-background text-foreground inline-flex size-9 items-center justify-center rounded-md border outline-none', 
+                        // The coarse-pointer floor, as a step, because these are bordered icon
+                        // buttons at the two ends of a row with a text between them and nothing
+                        // adjacent to either. Growing them pushes the position readout inward by
+                        // ten pixels, which is the whole of the cost and is the right trade: a
+                        // band on a bordered box would reach four pixels past the box on each side
+                        // into an eight pixel gap and reach nothing at all on the ends of the row.
+                        // See DESIGN.md, The coarse-pointer floor.
+                        'pointer-coarse:size-11', 'transition-colors duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground', 'focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50'), children: _jsx(ChevronLeftIcon, { className: "size-4", "aria-hidden": "true" }) }), _jsx("p", { "data-slot": "carousel-position", "aria-live": "polite", className: "text-muted-foreground text-sm tabular-nums", children: position(at + 1, total) }), _jsx("button", { type: "button", ref: next, "data-slot": "carousel-next", "aria-label": nextLabel, disabled: atLast, onClick: () => set(at + 1), className: cn('border-input bg-background text-foreground inline-flex size-9 items-center justify-center rounded-md border outline-none', 
+                        // The coarse-pointer floor, as a step, because these are bordered icon
+                        // buttons at the two ends of a row with a text between them and nothing
+                        // adjacent to either. Growing them pushes the position readout inward by
+                        // ten pixels, which is the whole of the cost and is the right trade: a
+                        // band on a bordered box would reach four pixels past the box on each side
+                        // into an eight pixel gap and reach nothing at all on the ends of the row.
+                        // See DESIGN.md, The coarse-pointer floor.
+                        'pointer-coarse:size-11', 'transition-colors duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground', 'focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50'), children: _jsx(ChevronRightIcon, { className: "size-4", "aria-hidden": "true" }) })] })) : (
             // One slide is the whole content, and the position still says so rather
             // than the reader being left to infer that there is nothing to move to.
             _jsx("p", { "data-slot": "carousel-position", "aria-live": "polite", className: "text-muted-foreground text-sm tabular-nums", children: position(1, 1) }))] }));
@@ -149,4 +183,27 @@ function clamp(value, total) {
         return 0;
     return Math.min(Math.max(Math.trunc(value), 0), total - 1);
 }
+/**
+ * Whether the element a key landed in spends that key itself.
+ *
+ * Four answers and no more, because those four are the ways a slide can hold
+ * something that reads the arrow keys: a text field, a number field, a `select` and
+ * an editable region. Left and right move the caret in the first three and move the
+ * insertion point in the fourth, and `Home` and `End` move to the start and the end
+ * of the value. A scroll container answers them too, but a slide is a caller's slot
+ * and this Component cannot see whether the caller made one, so a caller who puts a
+ * horizontally scrolling element in a slide and wants the carousel to keep answering
+ * those keys stops the event at it. That is the cheaper of the two mistakes: a key
+ * that does nothing inside a text field is invisible, and a key that moves the
+ * carousel while a reader is typing is not.
+ */
+function usesItsOwnArrows(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    return (target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement);
+}
 export { Carousel };

package/dist/components/ui/chart.d.ts

@@ -0,0 +1,334 @@
+import type { ReactNode } from 'react';
+import type { ChartColor } from './chart-frame.js';
+/**
+ * The marks this Component draws.
+ *
+ * This is the one place in the package where the word is a prop rather than a
+ * catalogue unit, and the shape of the type is the reason that is allowed.
+ * DESIGN.md's export surface says a component takes `variant` and `size` props
+ * and that what it will not publish is a variant recipe: a raw map of class
+ * strings is a CSS recipe wearing a component's name, and a consumer who
+ * receives one has been handed a styling API to memorise. So the value is a
+ * closed set of four marks, each a machine value the drawing branches on, and
+ * the class strings stay here where the drawing is. A caller picks a mark; a
+ * caller does not pick a colour, a radius, a shadow and a border width to get
+ * one.
+ *
+ * `bar` and `line` are the pair `ChartFrame` already separates, and the
+ * separation is about what the reader compares rather than about taste. A line
+ * is for a value that moves continuously across the categories, where the shape
+ * between two points is the point. A bar is for a value read against a shared
+ * baseline, where the length is the measurement and the gap between two bars
+ * means nothing. `area` is the line with the region under it filled, which
+ * changes what the reader is asked to do: a line asks where it went and an area
+ * asks how much there was. `donut` is a part-to-whole, and it is the narrowest
+ * of the four; read `Chart` for why it is here at all.
+ *
+ * **The type is `ChartForm` and the prop is `variant`, and the two names
+ * differing is the gate working rather than a slip.** `check-surface.mjs` refuses
+ * to let a public entry export a name ending in `Variant`, because in this
+ * package that shape means a cva map: a recipe a consumer could read and compose
+ * with. This union is not a recipe, it is the closed set of marks a drawing
+ * branches on, and it is named for the marks rather than for the prop. The prop
+ * keeps the name `variant` because a Component is allowed to take one, which is
+ * the distinction `DESIGN.md`'s export surface draws: the prop is an input, a
+ * `*Variants` export is an API. `MeterTone`, `StatusTone` and `AnnouncementTone`
+ * are named the same way for the same reason.
+ */
+export type ChartForm = 'bar' | 'line' | 'area' | 'donut';
+/**
+ * One series: what it is called, its values, and the role it is drawn in.
+ *
+ * `tone` is `ChartColor`, imported from `chart-frame` rather than redeclared
+ * here, and that import is the whole contract. `chart-1` through `chart-5` is
+ * the only five-way colour set the token contract publishes, so a consumer who
+ * wants a particular series in a particular colour names the role and gets it
+ * in every pack and both modes. A Prism-specific alias spelled differently here
+ * would be a wider type, a wider type would be a wider palette, and a wider
+ * palette is a second source of truth for something the tokens already own.
+ * `chart-frame.tsx` states the same reasoning on its own type and this file
+ * takes the same answer rather than a parallel one, which is the only way two
+ * Components in one package end up agreeing about what `chart-3` is.
+ *
+ * **The name is `ChartData` and not `ChartSeries`, and the reason is a collision
+ * rather than a preference.** `chart-frame.tsx` already exports a `ChartSeries`,
+ * a time series with nullable points, and it shipped: it is in the catalogue at
+ * `0.13.0` and a consumer reaches it at
+ * `@nanisoft/prism-ui/components/chart-frame`. A published type cannot be
+ * renamed cheaply, so this file took the other name. `ChartData` says what an
+ * entry is, which is a measured column with a name and a tone, and the two types
+ * are close enough that a reader who meets both will assume they are the same
+ * one. They are not, and the honest place to say so is here.
+ */
+export type ChartData = {
+    /**
+     * The name of the series, in the caller's words.
+     *
+     * It appears in the legend and in the head of the table's column, and nowhere
+     * else. This is the string that makes a colour a name: a chart drawn in
+     * `chart-2` and `chart-5` is unreadable to anyone who cannot separate teal
+     * from red, and `chart-2` measures 2.49:1 against a light card, which is a
+     * second reason the legend is not decoration.
+     */
+    name: string;
+    /**
+     * One value per category, in the order the categories are given.
+     *
+     * `labels` on `Chart` is the array that says what a category is, and a value
+     * with no label is a value drawn against nothing. A series longer than the
+     * labels is drawn past the last category and clipped by its own field, and it
+     * does not widen the field either, because a value with no category has
+     * nowhere to be drawn.
+     */
+    values: number[];
+    /**
+     * The role this series is drawn in. Omitted, the series is drawn in the
+     * supporting ink rather than in a series role.
+     *
+     * The default is not `chart-1` and the reason is `chart-frame`'s: a series
+     * colour is a claim about what a thing is, and a Component that picked by
+     * position would be making that claim on the caller's behalf and getting it
+     * wrong on every chart after the first. Handing out the five roles in order
+     * would put five names on a chart whose caller never named any of them, and a
+     * reader who has learned that `chart-1` is revenue in one product would carry
+     * that into the next. So an unnamed series takes `muted-foreground`, which is
+     * the ink for a mark that supports a claim rather than making one, and a
+     * chart whose series all omit `tone` is visibly a shape rather than five
+     * things. Naming the tone is how a caller says the series are meant to be
+     * told apart, and the cost of that is stated on the prop: two of the five
+     * roles measure below 3:1 against a light card, so a name beside every mark is
+     * not optional once hue is doing work.
+     */
+    tone?: ChartColor;
+};
+/** The props the Chart accepts. */
+export interface ChartProps {
+    /** The series drawn, in the order their marks are drawn and their names are read. */
+    series: readonly ChartData[];
+    /**
+     * The mark the series are drawn with.
+     *
+     * Required, and defaulted by nothing, because the mark is the claim the chart
+     * makes about the data and a default would be this Component making it. A
+     * chart of weekly signups drawn as bars invites a comparison of lengths that
+     * only means something when the value starts at zero, and a caller who never
+     * thought about the mark is exactly the caller who gets that wrong.
+     */
+    variant: ChartForm;
+    /**
+     * The categories along the horizontal axis, in order. The caller's words.
+     *
+     * A month name, a release name, a region name, a build number. This is the
+     * array that makes a chart a claim about the caller's own domain rather than
+     * about a design system, which is why it is a prop and not a date range the
+     * Component generates: a chart that named its own months would be wrong in
+     * every product but the one it was written for. It is drawn for `bar` and
+     * `line` only, and read on the table for every variant.
+     */
+    labels?: readonly string[];
+    /**
+     * The accessible name of the figure, and the only name the marks carry.
+     *
+     * Required rather than defaulted, because two charts on a dashboard are two
+     * figures a reader cannot tell apart, and because the name is the only thing
+     * that states what is being plotted. A figure named "Chart" is a Component
+     * shipping a sentence about a product it knows nothing about.
+     */
+    label: string;
+    /**
+     * The height of the plot field, in pixels. @defaultValue 240
+     *
+     * The default is `h-60` on the authored scale, so the figure a caller gets by
+     * passing nothing lands on the spacing and type scale rather than beside it.
+     * A number rather than a `size` prop because the value is the plot box's
+     * proportion rather than a size of the component: the same component at three
+     * heights is one component, and a `size` that doubled the plot and the gutter
+     * together would be a different claim.
+     */
+    height?: number;
+    /**
+     * Whether the legend is drawn. @defaultValue true when there is more than one series
+     *
+     * The default is a function of the series count rather than a constant,
+     * because the legend has two jobs and only one of them is a key. With one
+     * series there is nothing to tell apart, so the legend would be a name beside
+     * a caption and it is left off. With two or more it is the only statement of
+     * the series-to-colour assignment anywhere on the figure, and that is not
+     * optional: `chart-2` measures 2.49:1 and `chart-3` 2.15:1 against a light
+     * card in the default pack, so a mark in either is found by its position and
+     * its shape rather than by its colour, and the name beside it is what makes it
+     * a series. Pass `false` to put the legend somewhere else: `ChartLegend` is
+     * its own export for exactly that, and a legend under a legend is a
+     * component's fixed layout costing a layout the caller wanted.
+     */
+    legend?: boolean;
+    /**
+     * The sentence the chart needs underneath it.
+     *
+     * The caller's words, because the sentence is a claim about the data and only
+     * the caller knows which one is true: a fall, a seasonal dip, a collection
+     * that changed, a filter that matched nothing. This Component ships none, and
+     * a chart whose meaning is in a sentence the Component wrote is a chart whose
+     * meaning is wrong in every product but one.
+     */
+    caption?: ReactNode;
+    /**
+     * The top of the vertical axis, for `bar`, `line` and `area`. Omitted, the
+     * axis is derived from the data.
+     *
+     * The opt-in exists because one case genuinely needs it: a line whose values
+     * sit between 900 and 1,000 is drawn almost flat when the floor is zero, and
+     * the reader wants the shape. What it costs is named in `Chart`, and it is not
+     * only the flatness it fixes. A caller who normalises a dataset to start the
+     * axis themselves has two chances to get the axis wrong rather than one, and
+     * a mislabelled axis is a lie with a typeface on it: the numbers come from the
+     * caller, the words on the axis are the ones a reader reads, and nothing joins
+     * them. So this is one number and not a pair, the floor stays at zero, and a
+     * value above the ceiling is drawn clamped to the top gridline and counted on
+     * the element as `data-clamped`, so a ceiling that is too low is a fact in the
+     * markup rather than a mark floating above its own axis.
+     */
+    yMax?: number;
+    /**
+     * The content at the centre of a `donut`, which is where the total goes.
+     *
+     * A `ReactNode` rather than a number because the number is usually not the
+     * total: it is the total in a currency, the total as a percentage of a target,
+     * or the total with a unit and a comparison beside it. Computing any of those
+     * here would be this Component shipping a sentence about a product it knows
+     * nothing about, so it takes the caller's rendering and positions it in the
+     * hole. It is drawn over the ring rather than inside the `<svg>`, so type in a
+     * scaled viewBox is not a thing anyone has to think about.
+     */
+    centreLabel?: ReactNode;
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+}
+/**
+ * A chart: the marks, the axes, and the numbers behind them.
+ *
+ * **The chart is never the only way to read the numbers.** That is the
+ * constraint worth making, and it is a constraint on the caller as much as on
+ * this Component. The argument is the one `carousel.tsx` makes about everything
+ * a carousel shows: everything this Component draws, a reader must be able to
+ * reach some other way, because a chart is a picture whose entire content is a
+ * position, and a position is the one thing a screen reader, a crawler and a
+ * print stylesheet cannot read. There is a concrete failure behind each of
+ * them. A screen reader given a `<figure>` full of rectangles is read a list of
+ * nothing. A crawler sees the labels and the marks and no values at all, so
+ * every figure a product site publishes is invisible to the thing that indexes
+ * it. A print stylesheet loses the channel the series were separated by, and
+ * two of the five roles measure below 3:1 on a light card and go to the same
+ * grey, so a printed chart is a chart where the legend is the only difference
+ * between two lines.
+ *
+ * So the marks and the cells are two renderings of one `series` array rather
+ * than a chart and a table a caller kept in step, and the table is in the
+ * document whether or not anybody can see it. A `<table>` with a `<caption>`,
+ * a row head for each category and a column head for each series, so a reader
+ * navigates it by row and by cell and hears the figures the marks are drawn
+ * from. The alternative was a `table` prop, and the reasoning against it is
+ * `chart-frame`'s: a chart whose accessible representation is a sibling prop is
+ * a chart whose table a consumer wrote once and updated when the data changed,
+ * which is to say a chart whose table says last quarter. There is no prop that
+ * turns it off, because a prop is a default and the default would be off and
+ * the failure would be invisible.
+ *
+ * **There is no hover tooltip, and that is the same argument from the other
+ * side.** A tooltip is the usual answer to the exact value, and it answers a
+ * question a pointer asked, which is a question a keyboard never asks and a
+ * print stylesheet cannot receive. A picture a reader cannot query is the
+ * failure the table exists to prevent, so the exact value is answered by the
+ * table rather than by a surface that appears under a pointer.
+ *
+ * **The geometry does not move.** There is no draw-in, no bar that grows, no
+ * transition on any of the marks, and the reason is that the motion law refuses
+ * entrance effects outright, so a chart would not need an argument to be
+ * refused: a bar arriving is decoration, and the reader was not waiting for it.
+ * There is also no reason for one. A bar's height is its value, and a value
+ * that changes is the caller rendering a different number, so a transition
+ * between two values is a transition between two facts, and a reader watching
+ * one arrive has learned nothing they could not have read from the second one.
+ * This is a server Component: no hook, no state, no effect, and the whole
+ * figure is arithmetic over props, which is why `check-client-budget` has no
+ * reason to know it exists.
+ *
+ * **The axis is derived and a caller's maximum is opt-in.** Prism does not take
+ * a vertical maximum by default, and the reason is specific: a caller who
+ * pre-normalises has two chances to get the axis wrong rather than one. They
+ * compute the maximum, and then they label the gridlines, and a mistake in
+ * either step is invisible in the rendered chart because the picture is drawn
+ * perfectly faithfully to the wrong number. A mislabelled axis is a lie with a
+ * typeface on it, and it is a worse lie than a flat line because a flat line
+ * looks like a flat line. `yMax` exists for the one case that genuinely needs
+ * it, a line in a narrow band high on the scale that the reader wants to see
+ * the shape of, and it costs what the prop says: the caller owns the top, a
+ * value above it is clamped to the top gridline and counted on the element as
+ * `data-clamped`, and a ceiling that is not a multiple of the step leaves a
+ * shorter band at the top. The floor stays at zero whatever is passed, because
+ * a bar measured from anywhere but the baseline is not a measurement.
+ *
+ * **The donut is here for one shape of data, and the shape is named.** A bar
+ * chart is the honest default: it is read as lengths against a common baseline,
+ * it is the mark that survives greyscale, and it holds up at eight parts where a
+ * ring does not. What it is bad at is a part-to-whole with two or three parts,
+ * because there the reader is not comparing lengths, they are reading a
+ * proportion, and two lengths that must be mentally added are the harder task.
+ * A ring answers "what share is this" in one glance where the bars answer it
+ * after a division, and the centre answers the total the reader then wants
+ * anyway. So the variant exists for that condition and refuses everything else:
+ * `donut` takes exactly two series with one value each, or one series with a
+ * single value, which is the same claim with nothing to divide. At three parts
+ * the ring stops being read as a proportion and starts being read as a puzzle,
+ * and a ring that a reader has to count the segments of is worse than three
+ * bars. Naming the condition is the point: an unmarked donut prop would let the
+ * choice be casual, and a casual donut is a pie with nine slices in a
+ * dashboard.
+ *
+ * **The five series roles are the token contract's, not this file's.** `tone` is
+ * `ChartColor` from `chart-frame`, for the reason that type's own documentation
+ * gives: `chart-1` through `chart-5` is the only five-way set the contract
+ * publishes, so a wider type here would be a wider palette and a second source
+ * of truth for something the tokens already own. Every stroke and every fill
+ * below is one of those roles, `muted-foreground`, `muted`, `foreground` or
+ * `border`, named as a utility so a scoped `data-pack` boundary above the
+ * figure restyles all of it through the cascade. The gridlines are `border`,
+ * which is the contract's own low emphasis, rather than a lighter value invented
+ * here, and there is no gradient: a gradient of contract stops would be allowed
+ * and there is no decision behind one.
+ *
+ * **What this is not.** There is no axis a caller can log, no second axis, no
+ * stacking, no curve interpolation, no zoom, no crosshair, and no per-point
+ * mark on a line. A distribution, a ranking, a correlation and a histogram are
+ * a charting library's work, and this Component is the frame and the table that
+ * library's marks should sit inside rather than the library.
+ */
+declare function Chart({ series, variant, labels, label, height, legend, caption, yMax, centreLabel, className, }: ChartProps): import("react").JSX.Element;
+/**
+ * A legend: a swatch and a name for each series, and nothing else.
+ *
+ * Its own export rather than a fixed position under the plot, because a legend
+ * is a layout decision the surrounding design usually has an opinion about. A
+ * chart in a dashboard card, in a full-width figure between two paragraphs, and
+ * beside a key in a table of figures are three different places, and a Component
+ * that fixed one of them made the other two a workaround. So `Chart` draws it
+ * where the figure puts it and a caller who needs it elsewhere passes
+ * `legend={false}` and renders this with the same `series` array, which is the
+ * only reason the swatch and the mark cannot disagree.
+ *
+ * It is a `<ul>` rather than a `<div>` of spans, so a reader moving by list
+ * item is told how many series there are, and each entry is a swatch and a name
+ * with the swatch hidden, because a screen reader has no use for a colour and
+ * announcing one would replace the name with the thing the name is there to
+ * avoid. The same warning applies to a printed legend: two of the five roles go
+ * to the same grey on paper, so the legend is what tells a printed chart's
+ * series apart rather than an addition to it.
+ */
+declare function ChartLegend({ series, className, }: {
+    /** The series to name, in the order their marks are drawn. */
+    series: readonly ChartData[];
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+}): import("react").JSX.Element;
+export { Chart, ChartLegend };
+//# sourceMappingURL=chart.d.ts.map

package/dist/components/ui/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/components/ui/chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAW/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AAEzD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;;;;OAQG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;OAQG;IACH,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB;;;;;;;;;;;;;;;;;OAiBG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAED,mCAAmC;AACnC,MAAM,WAAW,UAAU;IACzB,qFAAqF;IACrF,MAAM,EAAE,SAAS,SAAS,EAAE,CAAA;IAC5B;;;;;;;;OAQG;IACH,OAAO,EAAE,SAAS,CAAA;IAClB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAySD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGG;AACH,iBAAS,KAAK,CAAC,EACb,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,MAAY,EACZ,MAAM,EACN,OAAO,EACP,IAAI,EACJ,WAAW,EACX,SAAS,GACV,EAAE,UAAU,+BA6SZ;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iBAAS,WAAW,CAAC,EACnB,MAAM,EACN,SAAS,GACV,EAAE;IACD,8DAA8D;IAC9D,MAAM,EAAE,SAAS,SAAS,EAAE,CAAA;IAC5B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,+BAkBA;AAED,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,CAAA"}