@box-kite/react 0.0.1 → 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/baseSvg.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./svg.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(t,r){let{viewBox:i=`0 0 24 24`,width:a=`1.5rem`,props:o,...s}=t;return(0,n.jsx)(e.Svg,{ref:r,viewBox:i,width:a,props:{...o,fill:`none`},...s})}var i=(0,t.forwardRef)(r);i.displayName=`BaseSvg`,exports.default=i;

package/components/baseSvg.d.ts

@@ -0,0 +1,5 @@
+import { SvgProps } from './svg';
+type Props = Omit<SvgProps, 'ref'>;
+declare const BaseSvg: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<SVGSVGElement>>;
+export default BaseSvg;
+export type BaseSvgProps = React.ComponentProps<typeof BaseSvg>;

package/components/baseSvg.mjs

@@ -0,0 +1,21 @@
+import { Svg as e } from "./svg.mjs";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/baseSvg.tsx
+function r(t, r) {
+	let { viewBox: i = "0 0 24 24", width: a = "1.5rem", props: o, ...s } = t;
+	return /* @__PURE__ */ n(e, {
+		ref: r,
+		viewBox: i,
+		width: a,
+		props: {
+			...o,
+			fill: "none"
+		},
+		...s
+	});
+}
+var i = t(r);
+i.displayName = "BaseSvg";
+//#endregion
+export { i as default };

package/components/button.cjs

@@ -0,0 +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.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

@@ -0,0 +1,19 @@
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { OmitTagProps } from '../react/boxProps';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+declare const tagProps: readonly ["type", "onClick"];
+type TagPropsType = (typeof tagProps)[number];
+type ButtonProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'button', TKey>, 'tag' | 'props'>;
+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;
+export default _default;

package/components/button.mjs

@@ -0,0 +1,19 @@
+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";
+//#region src/components/button.tsx
+var i = ["type", "onClick"];
+function a(t, a) {
+	let o = e.buildProps(t, i);
+	return /* @__PURE__ */ n(r, {
+		ref: a,
+		tag: "button",
+		component: "button",
+		...o
+	});
+}
+var o = t(a);
+o.displayName = "Button";
+//#endregion
+export { o as default };

package/components/chart.cjs

@@ -0,0 +1 @@
+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

@@ -0,0 +1,83 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ExtractElementFromTag } from '../react/reactTypes';
+import { BoxStyleProps, ComponentsAndVariants } from '@box-kite/core/types';
+import { SvgProps } from './svg';
+/**
+ * The chart micro-primitives: the small drawings a dashboard is made of, as Boxes. Deliberately not a chart
+ * *library* — no axes, no legends, no data transformations; what you get instead is that every prop,
+ * breakpoint and theme works. Two rules run through all four: **shape is an attribute, paint is a class**
+ * (so ten thousand rows share one rule), and a ring's fill is a **rounded fraction**, because a dash length
+ * lands in a class name and still has to transition. Naming is `Svg`'s: no `label` means `aria-hidden`.
+ */
+/**
+ * The props every primitive shares: an `Svg`'s, minus the `viewBox` and `variant` they own and with
+ * `children` narrowed to SVG content — a chart's children are a label in a ring, never a render prop.
+ */
+type ChartProps = Omit<SvgProps, 'viewBox' | 'variant' | 'children'> & {
+    children?: React.ReactNode;
+};
+/** A paint value: a colour token, or the `url(#…)`/`var(--…)` a gradient or a theme provides. */
+type Paint = NonNullable<BoxStyleProps['fill']>;
+export interface SparklineProps extends ChartProps {
+    /** The numbers to draw, oldest first. */
+    data: readonly number[];
+    /** `line` (default), `area` — the line with the space beneath it filled — or `bar`. */
+    variant?: 'line' | 'area' | 'bar';
+    /**
+     * Fix the ends of the value axis. Without them the line uses its own lowest and highest value, so
+     * 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. */
+export declare const Sparkline: import('react').ForwardRefExoticComponent<Omit<SparklineProps, "ref"> & RefAttributes<SVGSVGElement>>;
+/** What a ring and a dial have in common: one value, and how thick the arc drawing it is. */
+export interface ProgressRingProps extends ChartProps {
+    /** How full the arc is, from 0 to 1. Rounded to half a percent — see `ChartUtils.FRACTION_STEP`. */
+    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. 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. */
+export declare const ProgressRing: import('react').ForwardRefExoticComponent<Omit<ProgressRingProps, "ref"> & RefAttributes<SVGSVGElement>>;
+export interface GaugeProps extends ProgressRingProps {
+    /** How far round the dial goes, in degrees. Three quarters of a turn by default. */
+    sweep?: number;
+    /** Where it starts, in degrees clockwise from twelve o'clock. Bottom left by default. */
+    start?: number;
+}
+/** A dial: an arc of `sweep` degrees filled to `value`. A gauge with `sweep={360}` is a ring. */
+export declare const Gauge: import('react').ForwardRefExoticComponent<Omit<GaugeProps, "ref"> & RefAttributes<SVGSVGElement>>;
+export interface MiniDonutProps extends ChartProps {
+    /** One value per segment. Each is drawn as its share of the whole, so they need no total. */
+    data: readonly number[];
+    /** One colour per segment, cycled if there are fewer than there are values. */
+    colors?: readonly Paint[];
+    /** The width of the ring in view units, out of the 100 the box is wide. */
+    thickness?: number;
+}
+/** A ring divided into one segment per value — a pie chart with its middle left for a number. */
+export declare const MiniDonut: import('react').ForwardRefExoticComponent<Omit<MiniDonutProps, "ref"> & RefAttributes<SVGSVGElement>>;
+/**
+ * The series a `<ChartContainer>` draws: `series={['revenue', 'cost']}` takes the palette in order,
+ * `series={{ revenue: 'emerald-600' }}` names its own paint. A name becomes part of a custom-property
+ * name, so it has to be a CSS identifier — a dot-path `dataKey` is skipped rather than taking the rest.
+ */
+export type ChartSeries = readonly string[] | Readonly<Record<string, Paint>>;
+export interface ChartContainerProps<TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never> extends BoxProps<TTag, TKey> {
+    /** The series drawn inside, and what colour each of them is. */
+    series?: ChartSeries;
+}
+/**
+ * The theming bridge: a Box that declares the variables a chart reads, so the chart itself names no
+ * colour. `vars` is an ordinary prop, so the palette is themed and responsive like everything else and
+ * lands in a *class* — two containers with the same series share one rule, and it renders on a server.
+ * The names are the ecosystem's, so a chart copied from shadcn works unchanged. It adds no ARIA.
+ */
+export declare const ChartContainer: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: ChartContainerProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+export {};