@box-kite/react 1.0.0 → 2.0.0

package/components/accordion.d.ts

@@ -0,0 +1,114 @@
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+/**
+ * Why a panel opened or closed. One reason today — a press on the header, which is also what Enter and
+ * Space on it produce — and the shape every other component in the library reports through.
+ */
+export type DisclosureReason = 'trigger';
+/** Which heading the header sits in. It says where the section sits in the document outline, nothing more. */
+export type AccordionLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type AccordionBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'onChange'>;
+export interface AccordionProps<TKey extends keyof ComponentsAndVariants = 'accordion'> extends AccordionBoxProps<TKey> {
+    /** The sections: one `Accordion.Item` each, holding an `Accordion.Trigger` and an `Accordion.Panel`. */
+    children?: React.ReactNode;
+    /** Controlled: the values of every panel standing open. Leave it out and the widget owns them. */
+    value?: string[];
+    /** Which panels start open. Left out, all of them are closed. */
+    defaultValue?: string[];
+    /** Fires with the panels now open, in the order they were opened. */
+    onValueChange?: ChangeHandler<string[], DisclosureReason>;
+    /** Whether several panels may stand open at once. Default `false`, so opening one closes the last. */
+    multiple?: boolean;
+    /** Whether Down and Up wrap around at the ends. Default `true`. */
+    loop?: boolean;
+    /**
+     * Which heading each header sits in. Default `3`. It has to fit the page around it — a heading level
+     * is the document's outline, and a screen reader navigates by it.
+     */
+    level?: AccordionLevel;
+}
+export interface AccordionItemProps<TKey extends keyof ComponentsAndVariants = 'accordion.item'> extends BoxProps<'div', TKey> {
+    /** What this section stands for, and what the widget reports when it is open. */
+    value: string;
+    /** The header and the panel. */
+    children?: React.ReactNode;
+    /**
+     * Not openable, and stepped over by Down and Up. It is the `disabled` attribute, so the browser has
+     * already taken the header out of the tab sequence — arrows that still stopped there would be
+     * reaching what Tab cannot.
+     */
+    disabled?: boolean;
+}
+/** Every Box prop, on the `<button>` inside the heading. */
+export interface AccordionTriggerProps<TKey extends keyof ComponentsAndVariants = 'accordion.trigger'> extends Omit<BoxProps<'button', TKey>, 'disabled'> {
+    /** The header's label. */
+    children?: React.ReactNode;
+    /** This header's heading level, when it differs from the one the accordion sets. */
+    level?: AccordionLevel;
+    /** Whether to draw the chevron. Turn it off to supply an affordance of your own. Default `true`. */
+    arrow?: boolean;
+}
+export interface AccordionPanelProps<TKey extends keyof ComponentsAndVariants = 'accordion.panel'> extends BoxProps<'div', TKey> {
+    /** The section's content. */
+    children?: React.ReactNode;
+}
+interface AccordionType {
+    <TKey extends keyof ComponentsAndVariants = 'accordion'>(props: AccordionProps<TKey>): React.ReactNode;
+    Item: <TKey extends keyof ComponentsAndVariants = 'accordion.item'>(props: AccordionItemProps<TKey>) => React.ReactNode;
+    Trigger: <TKey extends keyof ComponentsAndVariants = 'accordion.trigger'>(props: AccordionTriggerProps<TKey>) => React.ReactNode;
+    Panel: <TKey extends keyof ComponentsAndVariants = 'accordion.panel'>(props: AccordionPanelProps<TKey>) => React.ReactNode;
+    displayName?: string;
+}
+/** The DOM attributes a collapsible's trigger has to carry. */
+export interface CollapsibleTriggerAttributes {
+    id: string;
+    type: 'button';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    onClick(event: React.MouseEvent): void;
+}
+/**
+ * What the trigger has to carry: spread it onto the control itself, not a wrapper.
+ *
+ * ```tsx
+ * {(trigger) => <Button {...trigger}>Details</Button>}
+ * {(trigger) => <button {...trigger.props}>Details</button>}
+ * ```
+ */
+export interface CollapsibleTrigger {
+    props: CollapsibleTriggerAttributes;
+}
+export interface CollapsibleProps<TKey extends keyof ComponentsAndVariants = 'collapsible'> extends Omit<BoxProps<'div', TKey>, 'open'> {
+    /** The content the trigger reveals. */
+    children?: React.ReactNode;
+    /** The control that opens it, handed the props that wire it to the panel. It has to be a button. */
+    trigger: (trigger: CollapsibleTrigger) => React.ReactNode;
+    /** Controlled open state. Leave it out and the widget owns it. */
+    open?: boolean;
+    /** Whether it starts open. Default `false`. */
+    defaultOpen?: boolean;
+    /** Fires with the new state and why it changed. */
+    onOpenChange?: ChangeHandler<boolean, DisclosureReason>;
+}
+/**
+ * One disclosure: a trigger, and the content it reveals.
+ *
+ * ```tsx
+ * <Collapsible trigger={(trigger) => <Button {...trigger}>What is in the box?</Button>}>
+ *   <P>A kite.</P>
+ * </Collapsible>
+ * ```
+ *
+ * The same one-row grid an `Accordion` panel opens in, with no heading, no group and no arrow keys — a
+ * lone button needs none of them. Reach for it for a "show more", a filter drawer or a sidebar section;
+ * reach for `Accordion` when several sections know about each other.
+ *
+ * @a11y The trigger carries `aria-expanded` and `aria-controls`; the content has no role of its own,
+ * because a region wants a name and a trigger is not a heading. Use an `Accordion` where the sections
+ * are document structure.
+ */
+declare function Collapsible<TKey extends keyof ComponentsAndVariants = 'collapsible'>(props: CollapsibleProps<TKey>): import("react").JSX.Element;
+export { Collapsible };
+declare const Accordion: AccordionType;
+export default Accordion;

package/components/accordion.mjs

@@ -0,0 +1,251 @@
+"use client";
+import e from "../box.mjs";
+import { a as t, i as n } from "../behavior.mjs";
+import { t as r } from "../identity.mjs";
+import { createContext as i, useContext as a, useMemo as o, useRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/utils/accordion/accordionUtils.ts
+var u;
+(function(e) {
+	e.ROOT_ATTRIBUTE = "data-accordion", e.TRIGGER_ATTRIBUTE = "data-accordion-trigger";
+	let t = e.ROOT_SELECTOR = "[data-accordion]", n = e.TRIGGER_SELECTOR = "[data-accordion-trigger]";
+	function r(e, n) {
+		return n instanceof Element && n.closest(t) === e;
+	}
+	e.owns = r;
+	function i(e) {
+		return e ? [...e.querySelectorAll(n)].filter((t) => r(e, t)) : [];
+	}
+	e.triggers = i;
+	function a(e) {
+		return e.hasAttribute("disabled") || e.getAttribute("aria-disabled") === "true";
+	}
+	e.isDisabled = a;
+	function o(e, t, n, r) {
+		let i = e.length;
+		if (i === 0) return;
+		let o = t < 0 || t >= i ? n > 0 ? -1 : i : t;
+		for (let t = 0; t < i; t++) {
+			if (o += n, o < 0 || o >= i) {
+				if (!r) return;
+				o = (o % i + i) % i;
+			}
+			if (!a(e[o])) return e[o];
+		}
+	}
+	e.step = o;
+	function s(e, t) {
+		return o(e, t === 1 ? -1 : e.length, t, !1);
+	}
+	e.edge = s;
+	function c(e, t) {
+		return t instanceof HTMLElement ? e.indexOf(t) : -1;
+	}
+	e.indexOf = c;
+	function l(e) {
+		if (e === "ArrowDown") return {
+			kind: "step",
+			delta: 1
+		};
+		if (e === "ArrowUp") return {
+			kind: "step",
+			delta: -1
+		};
+		if (e === "Home") return {
+			kind: "edge",
+			delta: 1
+		};
+		if (e === "End") return {
+			kind: "edge",
+			delta: -1
+		};
+	}
+	e.moveFor = l;
+	function u(e, t, n, r) {
+		return n.kind === "edge" ? s(e, n.delta) : o(e, t, n.delta, r);
+	}
+	e.target = u;
+	function d(e, t, n) {
+		return e.includes(t) ? e.filter((e) => e !== t) : n ? [...e, t] : [t];
+	}
+	e.toggle = d;
+})(u ||= {});
+var d = u, f = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+], p = i(null), m = i(null);
+function h(e) {
+	let t = a(p);
+	if (!t) throw Error(`<${e}> has to be rendered inside an <Accordion>.`);
+	return t;
+}
+function g(e) {
+	let t = a(m);
+	if (!t) throw Error(`<${e}> has to be rendered inside an <Accordion.Item>.`);
+	return t;
+}
+function _(r) {
+	let { children: i, value: a, defaultValue: l, onValueChange: u, multiple: f = !1, loop: m = !0, level: h = 3, props: g, ..._ } = r, v = s(null), [y, b] = n({
+		value: a,
+		defaultValue: l ?? [],
+		onChange: u
+	}), x = t((e, t) => {
+		b((t) => d.toggle(t, e, f), t);
+	}), S = t((e) => {
+		let t = v.current;
+		if (!t || e.defaultPrevented || !d.owns(t, e.target)) return;
+		let n = d.triggers(t), r = d.indexOf(n, e.target);
+		if (r === -1) return;
+		let i = d.moveFor(e.key);
+		if (!i) return;
+		let a = d.target(n, r, i, m);
+		a && (e.preventDefault(), a.focus());
+	}), C = o(() => ({
+		open: y,
+		level: h,
+		toggle: x
+	}), [
+		y,
+		h,
+		x
+	]);
+	return /* @__PURE__ */ c(p.Provider, {
+		value: C,
+		children: /* @__PURE__ */ c(e, {
+			ref: v,
+			component: "accordion",
+			..._,
+			props: {
+				[d.ROOT_ATTRIBUTE]: "",
+				...g,
+				onKeyDown: S
+			},
+			children: i
+		})
+	});
+}
+function v(t) {
+	let { value: n, children: i, disabled: a = !1, props: s, ...l } = t, { open: u } = h("Accordion.Item"), d = r("accordion"), f = u.includes(n), p = o(() => ({
+		value: n,
+		open: f,
+		disabled: a,
+		triggerId: `${d}-trigger`,
+		panelId: `${d}-panel`
+	}), [
+		n,
+		f,
+		a,
+		d
+	]);
+	return /* @__PURE__ */ c(m.Provider, {
+		value: p,
+		children: /* @__PURE__ */ c(e, {
+			component: "accordion.item",
+			...l,
+			props: s,
+			children: i
+		})
+	});
+}
+v.displayName = "Accordion.Item";
+function y(n) {
+	let { children: r, level: i, arrow: a = !0, props: o, ...s } = n, { level: u, toggle: p } = h("Accordion.Trigger"), { value: m, open: _, disabled: v, triggerId: y, panelId: b } = g("Accordion.Trigger"), x = t((e) => p(m, {
+		reason: "trigger",
+		event: e
+	}));
+	return /* @__PURE__ */ c(e, {
+		tag: f[(i ?? u) - 1],
+		component: "accordion.heading",
+		children: /* @__PURE__ */ l(e, {
+			tag: "button",
+			component: "accordion.trigger",
+			...s,
+			disabled: v,
+			id: y,
+			props: {
+				type: "button",
+				"aria-expanded": _,
+				"aria-controls": b,
+				[d.TRIGGER_ATTRIBUTE]: "",
+				...o,
+				onClick: x
+			},
+			children: [r, a && /* @__PURE__ */ c(e, {
+				tag: "span",
+				component: "accordion.arrow",
+				variant: { open: _ },
+				props: { "aria-hidden": !0 }
+			})]
+		})
+	});
+}
+y.displayName = "Accordion.Trigger";
+function b(t) {
+	let { children: n, props: r, ...i } = t, { open: a, triggerId: o, panelId: s } = g("Accordion.Panel");
+	return /* @__PURE__ */ c(e, {
+		component: "accordion.track",
+		variant: { closed: !a },
+		children: /* @__PURE__ */ c(e, {
+			component: "accordion.clip",
+			children: /* @__PURE__ */ c(e, {
+				component: "accordion.panel",
+				...i,
+				id: s,
+				props: {
+					role: "region",
+					"aria-labelledby": o,
+					...r
+				},
+				children: n
+			})
+		})
+	});
+}
+b.displayName = "Accordion.Panel";
+function x(i) {
+	let { children: a, trigger: s, open: u, defaultOpen: d = !1, onOpenChange: f, props: p, ...m } = i, h = r("collapsible"), g = `${h}-trigger`, _ = `${h}-panel`, [v, y] = n({
+		value: u,
+		defaultValue: d,
+		onChange: f
+	}), b = t((e) => y((e) => !e, {
+		reason: "trigger",
+		event: e
+	})), x = o(() => ({ props: {
+		id: g,
+		type: "button",
+		"aria-expanded": v,
+		"aria-controls": _,
+		onClick: b
+	} }), [
+		g,
+		_,
+		v,
+		b
+	]);
+	return /* @__PURE__ */ l(e, {
+		component: "collapsible",
+		...m,
+		props: p,
+		children: [s(x), /* @__PURE__ */ c(e, {
+			component: "collapsible.track",
+			variant: { closed: !v },
+			children: /* @__PURE__ */ c(e, {
+				component: "collapsible.clip",
+				children: /* @__PURE__ */ c(e, {
+					component: "collapsible.panel",
+					id: _,
+					children: a
+				})
+			})
+		})]
+	});
+}
+x.displayName = "Collapsible";
+var S = _;
+S.Item = v, S.Trigger = y, S.Panel = b, S.displayName = "Accordion";
+//#endregion
+export { x as Collapsible, S as default };

package/components/button.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@box-kite/react");i=e.t(i,1);var a=[`type`,`onClick`];function o(e,n){let o=t.t.buildProps(e,a);return(0,r.jsx)(i.default,{ref:n,tag:`button`,component:`button`,...o})}var s=(0,n.forwardRef)(o);s.displayName=`Button`,exports.default=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@box-kite/react");i=e.t(i,1);var a=[`type`,`onClick`];function o(e,n){let o=t.i.buildProps(e,a);return(0,r.jsx)(i.default,{ref:n,tag:`button`,component:`button`,...o})}var s=(0,n.forwardRef)(o);s.displayName=`Button`,exports.default=s;

package/components/button.d.ts

@@ -8,8 +8,11 @@ type ButtonProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'butt
 type ButtonTagProps = OmitTagProps<BoxTagProps<'button'>, TagPropsType>;
 type ButtonType = Required<React.ComponentProps<'button'>>['type'];
 interface Props<TKey extends keyof ComponentsAndVariants> extends ButtonProps<TKey> {
+    /** Attributes for the `<button>` itself — `disabled`, `aria-label`, `form`, `value`. */
     props?: ButtonTagProps;
+    /** `button` unless you say otherwise. Inside a form a `<button>` with no type submits it. */
     type?: ButtonType;
+    /** Fires on a click, and on Enter or Space, which the browser turns into one. */
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 declare const _default: <TKey extends keyof ComponentsAndVariants = "button">(props: Props<TKey> & RefAttributes<HTMLButtonElement>) => React.ReactNode;

package/components/button.mjs

@@ -1,4 +1,4 @@
-import { t as e } from "../react-shared.mjs";
+import { i as e } from "../react-shared.mjs";
 import { forwardRef as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
 import r from "@box-kite/react";

package/components/chart.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime.cjs"),t=require("./svg.cjs");let n=require("react"),r=require("@box-kite/core"),i=require("react/jsx-runtime"),a=require("@box-kite/react");a=e.t(a,1);var o;(function(e){let t=e.VIEW=100,n=e.CENTRE=t/2,r=e.FRACTION_STEP=.005;function i(e){return Math.round(e*100)/100}function a(e){return Math.round(Math.min(Math.max(e,0),1)/r)*r}e.fraction=a;function o(e,r={}){if(e.length===0)return[];let a=r.min??Math.min(...e),o=(r.max??Math.max(...e))-a,s=e=>i(o===0?n:t-(e-a)/o*t);if(e.length===1)return[{x:0,y:s(e[0])},{x:t,y:s(e[0])}];let c=t/(e.length-1);return e.map((e,t)=>({x:i(t*c),y:s(e)}))}e.points=o;function s(e){return e.length===0?``:e.map((e,t)=>`${t===0?`M`:`L`}${e.x} ${e.y}`).join(``)}e.linePath=s;function c(e){if(e.length===0)return``;let n=e[e.length-1];return`${s(e)}L${n.x} ${t}L${e[0].x} ${t}Z`}e.areaPath=c;function l(e,n={},r=.25){if(e.length===0)return``;let a=t/e.length,s=i(a*(1-r)),c=i((a-s)/2);return o(e,n).map((e,n)=>{let r=Math.min(e.y,t-1);return`M${i(n*a+c)} ${r}h${s}v${i(t-r)}h${-s}Z`}).join(``)}e.barsPath=l;function u(e){return i(n-e/2)}e.radius=u;function d(e){return i(2*Math.PI*e)}e.circumference=d;function f(e,t){return{strokeDasharray:i(e),strokeDashoffset:i(e*(1-a(t)))}}e.dash=f;function p(e,t){let r=(t-90)*Math.PI/180;return{x:i(n+e*Math.cos(r)),y:i(n+e*Math.sin(r))}}function m(e,t){return i(d(e)*(Math.min(Math.abs(t),360)/360))}e.arcLength=m;function h(e,t,n){if(Math.abs(n)>=360){let n=p(e,t),r=p(e,t+180);return`M${n.x} ${n.y}A${e} ${e} 0 0 1 ${r.x} ${r.y}A${e} ${e} 0 0 1 ${n.x} ${n.y}`}let r=p(e,t),i=p(e,t+n),a=+(Math.abs(n)>180),o=n<0?0:1;return`M${r.x} ${r.y}A${e} ${e} 0 ${a} ${o} ${i.x} ${i.y}`}e.arcPath=h;function g(e,t){let n=e.reduce((e,t)=>e+Math.max(t,0),0);if(n<=0)return[];let r=0;return e.map((e,o)=>{let s=a(Math.max(e,0)/n),c=i(t*s),l=i(r*360);return r+=s,{strokeDasharray:`${c} ${i(t-c)}`,rotate:l,value:e,index:o}})}e.donutSegments=g;let _=e.PALETTE=[`sky-500`,`emerald-500`,`amber-500`,`violet-500`,`rose-500`,`cyan-500`];e.DARK_PALETTE=[`sky-400`,`emerald-400`,`amber-400`,`violet-400`,`rose-400`,`cyan-400`];function v(e){return e.reduce((e,t,n)=>(e[`chart-${n+1}`]=t,e),{})}e.paletteVariables=v;function y(e,t=_.length){return(Array.isArray(e)?e.map((e,n)=>[e,`var(--chart-${n%t+1})`]):Object.entries(e)).reduce((e,[t,n])=>(e[`color-${t}`]=n,e),{})}e.seriesVariables=y})(o||={});var s=o,c=`0 0 ${s.VIEW} ${s.VIEW}`,l=s.PALETTE;function u(e,n){let{data:r,variant:a=`line`,min:o,max:l,children:u,...d}=e,f={min:o,max:l},p=s.points(r,f);return(0,i.jsxs)(t.Svg,{viewBox:c,preserveAspectRatio:`none`,vectorEffect:`non-scaling-stroke`,width:`100%`,height:`1.5rem`,overflow:`visible`,stroke:`currentColor`,fill:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`,strokeLinejoin:`round`,ref:n,...d,children:[a===`bar`?(0,i.jsx)(t.Path,{d:s.barsPath(r,f),stroke:`none`}):(0,i.jsxs)(i.Fragment,{children:[a===`area`&&(0,i.jsx)(t.Path,{d:s.areaPath(p),stroke:`none`,fillOpacity:.2}),(0,i.jsx)(t.Path,{d:s.linePath(p),fill:`none`})]}),u]})}var d=(0,n.forwardRef)(u);d.displayName=`Sparkline`;function f(e,n){let{value:r,thickness:a=10,trackOpacity:o=.2,children:l,...u}=e,d=s.radius(a),f=s.circumference(d);return(0,i.jsxs)(t.Svg,{viewBox:c,width:`3rem`,height:`3rem`,stroke:`currentColor`,fill:`none`,strokeWidth:a,strokeLinecap:`round`,ref:n,...u,children:[(0,i.jsx)(t.Circle,{cx:s.CENTRE,cy:s.CENTRE,r:d,strokeOpacity:o}),(0,i.jsx)(t.Circle,{cx:s.CENTRE,cy:s.CENTRE,r:d,transform:`rotate(-90 ${s.CENTRE} ${s.CENTRE})`,...s.dash(f,r)}),l]})}var p=(0,n.forwardRef)(f);p.displayName=`ProgressRing`;function m(e,n){let{value:r,thickness:a=10,trackOpacity:o=.2,sweep:l=270,start:u=225,children:d,...f}=e,p=s.radius(a),m=s.arcLength(p,l),h=s.arcPath(p,u,l);return(0,i.jsxs)(t.Svg,{viewBox:c,width:`4rem`,height:`4rem`,stroke:`currentColor`,fill:`none`,strokeWidth:a,strokeLinecap:`round`,ref:n,...f,children:[(0,i.jsx)(t.Path,{d:h,strokeOpacity:o}),(0,i.jsx)(t.Path,{d:h,...s.dash(m,r)}),d]})}var h=(0,n.forwardRef)(m);h.displayName=`Gauge`;function g(e,n){let{data:r,colors:a=l,thickness:o=20,children:u,...d}=e,f=s.radius(o),p=s.circumference(f);return(0,i.jsxs)(t.Svg,{viewBox:c,width:`3rem`,height:`3rem`,fill:`none`,strokeWidth:o,ref:n,...d,children:[s.donutSegments(r,p).map(e=>(0,i.jsx)(t.Circle,{cx:s.CENTRE,cy:s.CENTRE,r:f,stroke:a[e.index%a.length],strokeDasharray:e.strokeDasharray,transform:`rotate(${e.rotate-90} ${s.CENTRE} ${s.CENTRE})`},e.index)),u]})}var _=(0,n.forwardRef)(g);_.displayName=`MiniDonut`;function v(e,t){let{series:n,vars:o,theme:c,...l}=e,u={...s.paletteVariables(s.PALETTE),...n?s.seriesVariables(n):{},...o},d=(0,r.mergeDeep)({dark:{vars:s.paletteVariables(s.DARK_PALETTE)}},c??{});return(0,i.jsx)(a.default,{ref:t,vars:u,theme:d,...l})}var y=(0,n.forwardRef)(v);y.displayName=`ChartContainer`;var b=y;exports.ChartContainer=b,exports.Gauge=h,exports.MiniDonut=_,exports.ProgressRing=p,exports.Sparkline=d;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs"),n=require("./svg.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@box-kite/react");a=e.t(a,1);var o;(function(e){let n=e.VIEW=100,r=e.CENTRE=n/2,i=e.FRACTION_STEP=.005;function a(e){return Math.round(e*100)/100}function o(e){return Math.round(Math.min(Math.max(e,0),1)/i)*i}e.fraction=o;function s(e,t={}){if(e.length===0)return[];let i=t.min??Math.min(...e),o=(t.max??Math.max(...e))-i,s=e=>a(o===0?r:n-(e-i)/o*n);if(e.length===1)return[{x:0,y:s(e[0])},{x:n,y:s(e[0])}];let c=n/(e.length-1);return e.map((e,t)=>({x:a(t*c),y:s(e)}))}e.points=s;function c(e){return e.length===0?``:e.map((e,t)=>`${t===0?`M`:`L`}${e.x} ${e.y}`).join(``)}e.linePath=c;function l(e){if(e.length===0)return``;let t=e[e.length-1];return`${c(e)}L${t.x} ${n}L${e[0].x} ${n}Z`}e.areaPath=l;function u(e,t={},r=.25){if(e.length===0)return``;let i=n/e.length,o=a(i*(1-r)),c=a((i-o)/2);return s(e,t).map((e,t)=>{let r=Math.min(e.y,n-1);return`M${a(t*i+c)} ${r}h${o}v${a(n-r)}h${-o}Z`}).join(``)}e.barsPath=u;function d(e){return a(r-e/2)}e.radius=d;function f(e){return a(2*Math.PI*e)}e.circumference=f;function p(e,t){return{strokeDasharray:a(e),strokeDashoffset:a(e*(1-o(t)))}}e.dash=p;function m(e,t){let n=(t-90)*Math.PI/180;return{x:a(r+e*Math.cos(n)),y:a(r+e*Math.sin(n))}}function h(e,t){return a(f(e)*(Math.min(Math.abs(t),360)/360))}e.arcLength=h;function g(e,t,n){if(Math.abs(n)>=360){let n=m(e,t),r=m(e,t+180);return`M${n.x} ${n.y}A${e} ${e} 0 0 1 ${r.x} ${r.y}A${e} ${e} 0 0 1 ${n.x} ${n.y}`}let r=m(e,t),i=m(e,t+n),a=+(Math.abs(n)>180),o=n<0?0:1;return`M${r.x} ${r.y}A${e} ${e} 0 ${a} ${o} ${i.x} ${i.y}`}e.arcPath=g;function _(e,t){let n=e.reduce((e,t)=>e+Math.max(t,0),0);if(n<=0)return[];let r=0;return e.map((e,i)=>{let s=o(Math.max(e,0)/n),c=a(t*s),l=a(r*360);return r+=s,{strokeDasharray:`${c} ${a(t-c)}`,rotate:l,value:e,index:i}})}e.donutSegments=_;let v=e.PALETTE=t.n;e.DARK_PALETTE=t.t,e.paletteVariables=t.r;function y(e,t=v.length){return(Array.isArray(e)?e.map((e,n)=>[e,`var(--chart-${n%t+1})`]):Object.entries(e)).reduce((e,[t,n])=>(e[`color-${t}`]=n,e),{})}e.seriesVariables=y})(o||={});var s=o,c=`0 0 ${s.VIEW} ${s.VIEW}`,l=s.PALETTE;function u(e,t){let{data:r,variant:a=`line`,min:o,max:l,children:u,...d}=e,f={min:o,max:l},p=s.points(r,f);return(0,i.jsxs)(n.Svg,{viewBox:c,component:`sparkline`,preserveAspectRatio:`none`,width:`100%`,height:`1.5rem`,ref:t,...d,children:[a===`bar`?(0,i.jsx)(n.Path,{component:`sparkline.bar`,d:s.barsPath(r,f)}):(0,i.jsxs)(i.Fragment,{children:[a===`area`&&(0,i.jsx)(n.Path,{component:`sparkline.area`,d:s.areaPath(p)}),(0,i.jsx)(n.Path,{component:`sparkline.line`,d:s.linePath(p)})]}),u]})}var d=(0,r.forwardRef)(u);d.displayName=`Sparkline`;function f(e,t){let{value:r,thickness:a=10,trackOpacity:o,children:l,...u}=e,d=s.radius(a),f=s.circumference(d);return(0,i.jsxs)(n.Svg,{viewBox:c,component:`progressRing`,width:`3rem`,height:`3rem`,strokeWidth:a,ref:t,...u,children:[(0,i.jsx)(n.Circle,{component:`progressRing.track`,cx:s.CENTRE,cy:s.CENTRE,r:d,strokeOpacity:o}),(0,i.jsx)(n.Circle,{component:`progressRing.arc`,cx:s.CENTRE,cy:s.CENTRE,r:d,transform:`rotate(-90 ${s.CENTRE} ${s.CENTRE})`,...s.dash(f,r)}),l]})}var p=(0,r.forwardRef)(f);p.displayName=`ProgressRing`;function m(e,t){let{value:r,thickness:a=10,trackOpacity:o,sweep:l=270,start:u=225,children:d,...f}=e,p=s.radius(a),m=s.arcLength(p,l),h=s.arcPath(p,u,l);return(0,i.jsxs)(n.Svg,{viewBox:c,component:`gauge`,width:`4rem`,height:`4rem`,strokeWidth:a,ref:t,...f,children:[(0,i.jsx)(n.Path,{component:`gauge.track`,d:h,strokeOpacity:o}),(0,i.jsx)(n.Path,{component:`gauge.arc`,d:h,...s.dash(m,r)}),d]})}var h=(0,r.forwardRef)(m);h.displayName=`Gauge`;function g(e,t){let{data:r,colors:a=l,thickness:o=20,children:u,...d}=e,f=s.radius(o),p=s.circumference(f);return(0,i.jsxs)(n.Svg,{viewBox:c,component:`miniDonut`,width:`3rem`,height:`3rem`,strokeWidth:o,ref:t,...d,children:[s.donutSegments(r,p).map(e=>(0,i.jsx)(n.Circle,{component:`miniDonut.segment`,cx:s.CENTRE,cy:s.CENTRE,r:f,stroke:a[e.index%a.length],strokeDasharray:e.strokeDasharray,transform:`rotate(${e.rotate-90} ${s.CENTRE} ${s.CENTRE})`},e.index)),u]})}var _=(0,r.forwardRef)(g);_.displayName=`MiniDonut`;function v(e,t){let{series:n,vars:r,...o}=e,c={...n?s.seriesVariables(n):{},...r};return(0,i.jsx)(a.default,{ref:t,component:`chartContainer`,vars:c,...o})}var y=(0,r.forwardRef)(v);y.displayName=`ChartContainer`;var b=y;exports.ChartContainer=b,exports.Gauge=h,exports.MiniDonut=_,exports.ProgressRing=p,exports.Sparkline=d;

package/components/chart.d.ts

@@ -29,6 +29,7 @@ export interface SparklineProps extends ChartProps {
      * every row of a table is scaled to itself; with them a column of sparklines is comparable.
      */
     min?: number;
+    /** The top of the value axis — see `min`, which it is written beside. */
     max?: number;
 }
 /** A line, area or bar chart small enough to sit inside a line of text or a table cell. */
@@ -39,7 +40,7 @@ export interface ProgressRingProps extends ChartProps {
     value: number;
     /** The width of the ring in view units, out of the 100 the box is wide. */
     thickness?: number;
-    /** The unfilled part of the ring, as the same colour faded — so the track follows the theme too. */
+    /** The unfilled part of the ring, as the same colour faded — so the track follows the theme too. Default `0.2`, from the style node. */
     trackOpacity?: NonNullable<BoxStyleProps['strokeOpacity']>;
 }
 /** A full circle filled to `value`, starting at twelve o'clock — the percentage-complete ring. */