@mizen-labs/ui 0.0.0-stage → 0.1.0

package/dist/components/card/card.d.ts

@@ -0,0 +1,17 @@
+import { useRender } from "@base-ui/react/use-render";
+export type CardProps = Omit<useRender.ComponentProps<"div">, "className" | "data-slot" | "style">;
+export type CardHeaderProps = Omit<useRender.ComponentProps<"div">, "className" | "data-slot" | "style">;
+export type CardTitleProps = Omit<useRender.ComponentProps<"div">, "className" | "data-slot" | "style">;
+export type CardDescriptionProps = Omit<useRender.ComponentProps<"div">, "className" | "data-slot" | "style">;
+export type CardActionProps = Omit<useRender.ComponentProps<"div">, "className" | "data-slot" | "style">;
+export type CardPanelProps = Omit<useRender.ComponentProps<"div">, "className" | "data-slot" | "style">;
+export type CardFooterProps = Omit<useRender.ComponentProps<"div">, "className" | "data-slot" | "style">;
+export type CardContentProps = CardPanelProps;
+export declare function Card({ ref: forwardedRef, render, ...rest }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function CardHeader({ ref: forwardedRef, render, ...rest }: CardHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function CardTitle({ ref: forwardedRef, render, ...rest }: CardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function CardDescription({ ref: forwardedRef, render, ...rest }: CardDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function CardAction({ ref: forwardedRef, render, ...rest }: CardActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function CardPanel({ ref: forwardedRef, render, ...rest }: CardPanelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function CardFooter({ ref: forwardedRef, render, ...rest }: CardFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { CardPanel as CardContent };

package/dist/components/card/card.js

@@ -0,0 +1 @@
+"use client";import{mergeProps}from"@base-ui/react/merge-props";import{useRender}from"@base-ui/react/use-render";import{props}from"@stylexjs/stylex";import{protectRenderSlot}from"../../render-utils";import{cardStyles}from"./card.styles";export function Card({ref:forwardedRef,render,...rest}){return useRender({defaultTagName:"div",props:mergeProps(rest,{...props(cardStyles.root),"data-slot":"card"}),ref:forwardedRef,render:protectRenderSlot("card",render)});}export function CardHeader({ref:forwardedRef,render,...rest}){return useRender({defaultTagName:"div",props:mergeProps(rest,{...props(cardStyles.header),"data-slot":"card-header"}),ref:forwardedRef,render:protectRenderSlot("card-header",render)});}export function CardTitle({ref:forwardedRef,render,...rest}){return useRender({defaultTagName:"div",props:mergeProps(rest,{...props(cardStyles.title),"data-slot":"card-title"}),ref:forwardedRef,render:protectRenderSlot("card-title",render)});}export function CardDescription({ref:forwardedRef,render,...rest}){return useRender({defaultTagName:"div",props:mergeProps(rest,{...props(cardStyles.description),"data-slot":"card-description"}),ref:forwardedRef,render:protectRenderSlot("card-description",render)});}export function CardAction({ref:forwardedRef,render,...rest}){return useRender({defaultTagName:"div",props:mergeProps(rest,{...props(cardStyles.action),"data-slot":"card-action"}),ref:forwardedRef,render:protectRenderSlot("card-action",render)});}export function CardPanel({ref:forwardedRef,render,...rest}){return useRender({defaultTagName:"div",props:mergeProps(rest,{...props(cardStyles.panel),"data-slot":"card-panel"}),ref:forwardedRef,render:protectRenderSlot("card-panel",render)});}export function CardFooter({ref:forwardedRef,render,...rest}){return useRender({defaultTagName:"div",props:mergeProps(rest,{...props(cardStyles.footer),"data-slot":"card-footer"}),ref:forwardedRef,render:protectRenderSlot("card-footer",render)});}export{CardPanel as CardContent};

package/dist/components/card/card.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/interaction.stylex";import{borderWidth,focus,focusMotion}from"../../styles/interaction.stylex";import"../../styles/motion.stylex";import{duration,easing}from"../../styles/motion.stylex";import"../../styles/shape.stylex";import{shape}from"../../styles/shape.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontSize,fontWeight,letterSpacing,lineHeight}from"../../styles/typography.stylex";export const cardStyles={action:{kSGwAc:"xamitd3",kB7OPa:"x9f619",kBCFzs:"x1npkx4u",kpJH7q:"xf9r7lm",k1lYIM:"x1agbcgv",kFhvOy:"x1qab1bc",$$css:true},description:{kB7OPa:"x9f619",kMwMTN:"x125omll",kGuDYH:"xlh8hku",k63SB2:"x1lo1l87",kBCFzs:"xgkxs2y",kLWn49:"x2xzzt7",kqGvvJ:"x10im51j",$$css:true},footer:{kGNEyG:"x6s0dn4",kB7OPa:"x9f619",k1xSpc:"x78zum5",kOIVth:"xiw8qbs",kGO01o:"x1i17mcb",kLKAdn:"x1o5c4g5 xrm89jq",kg3NbH:"x9qdlnn",$$css:true},header:{kGNEyG:"x6s0dn4",kB7OPa:"x9f619",k1C7PZ:"xejpt2e",k1xSpc:"xrvj5dj",kOIVth:"x13hh4mm",kumcoG:"xju1xpo",k8WAf4:"x16z3cw9",kg3NbH:"x9qdlnn",$$css:true},panel:{kB7OPa:"x9f619",kMwMTN:"x14tvo57",kzQI83:"x1iyjqo2",k7Eaqz:"xeuugli",kGO01o:"x1i17mcb",kLKAdn:"x1o5c4g5 xrm89jq",kg3NbH:"x9qdlnn",$$css:true},root:{k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kWkggS:"xu84zt7",kaIpWk:"x4ig255",kB7OPa:"x9f619",kMwMTN:"x14tvo57",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x7jjmpn x1wfwxd8",k3XXqK:"x9v5kkp x1t137rt",kMeerF:"xm9seqh x1k57tk5",kVAEAm:"x1n2onr6",kybGjl:"x1hl2dhg",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x6ksxqd",kAMwcw:"xvhdtae",kzqmXN:"xh8yej3",$$css:true},title:{kB7OPa:"x9f619",kMwMTN:"x14tvo57",kGuDYH:"x12ama9c",k63SB2:"xlw70nr",kBCFzs:"xgkxs2y",kb6lSQ:"x15nokgc",kLWn49:"x1rn0pvf",kqGvvJ:"x10im51j",k7Eaqz:"xeuugli",kHjlTd:"xj0a0fe",$$css:true}};

package/dist/components/carousel/carousel.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+import type { Closed } from "../../closed";
+type AccessibleName = {
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    "aria-label"?: never;
+    "aria-labelledby": string;
+};
+export type CarouselProps = Omit<Closed<ComponentPropsWithRef<"section">>, "aria-label" | "aria-labelledby" | "aria-roledescription" | "children" | "data-slot" | "role"> & AccessibleName & {
+    children: ReactNode;
+};
+export type CarouselContentProps = Omit<Closed<ComponentPropsWithRef<"div">>, "aria-label" | "aria-labelledby" | "aria-roledescription" | "children" | "data-slot" | "role" | "tabIndex"> & {
+    children: ReactNode;
+};
+export type CarouselItemProps = Omit<Closed<ComponentPropsWithRef<"div">>, "aria-roledescription" | "children" | "data-slot" | "role" | "tabIndex"> & {
+    children: ReactNode;
+};
+export type CarouselIndicatorsProps = Omit<Closed<ComponentPropsWithRef<"div">>, "aria-label" | "children" | "data-slot" | "role"> & {
+    /** Names the group of slide buttons. Defaults to "Slides". */
+    "aria-label"?: string;
+};
+export type CarouselControlProps = Omit<Closed<ComponentPropsWithRef<"button">>, "aria-label" | "children" | "data-slot" | "disabled" | "onClick" | "role" | "type"> & {
+    "aria-label"?: string;
+};
+export declare function Carousel(carouselProps: CarouselProps): import("react").JSX.Element;
+export declare function CarouselContent(contentProps: CarouselContentProps): import("react").JSX.Element;
+export declare function CarouselItem(itemProps: CarouselItemProps): import("react").JSX.Element;
+/** One button per slide; the current one stretches into a short pill. */
+export declare function CarouselIndicators(indicatorProps: CarouselIndicatorsProps): import("react").JSX.Element;
+export declare function CarouselPrevious(controlProps: CarouselControlProps): import("react").JSX.Element;
+export declare function CarouselNext(controlProps: CarouselControlProps): import("react").JSX.Element;
+export {};

package/dist/components/carousel/carousel.js

@@ -0,0 +1,21 @@
+"use client";import{props}from"@stylexjs/stylex";import{createContext,useCallback,useContext,useRef,useState}from"react";import{IconChevronLeft,IconChevronRight}from"../../icons";import{assignRef}from"../../ref-utils";import{typeRoles}from"../../styles/typography.styles";import{Button}from"../button/button";import{carouselStyles}from"./carousel.styles";import{jsx as _jsx}from"react/jsx-runtime";const CarouselContext=createContext(null);function useCarouselContext(){const context=useContext(CarouselContext);if(!context){throw new Error("Carousel controls and content must be inside Carousel.");}return context;}function stripReservedProps(value,names){for(const name of names){Reflect.deleteProperty(value,name);}}const EMPTY_STATE={canNext:false,canPrevious:false,count:0,index:0};function sameState(left,right){return left.canNext===right.canNext&&left.canPrevious===right.canPrevious&&left.count===right.count&&left.index===right.index;}function getScrollState(viewport){const track=viewport.firstElementChild;if(!(track?.firstElementChild&&track.lastElementChild)){return EMPTY_STATE;}const{direction}=getComputedStyle(viewport);const viewportBounds=viewport.getBoundingClientRect();const firstBounds=track.firstElementChild.getBoundingClientRect();const lastBounds=track.lastElementChild.getBoundingClientRect();const tolerance=1;const canPrevious=direction==="rtl"?firstBounds.right>viewportBounds.right+tolerance:firstBounds.left<viewportBounds.left-tolerance;const canNext=direction==="rtl"?lastBounds.left<viewportBounds.left-tolerance:lastBounds.right>viewportBounds.right+tolerance;const items=Array.from(track.children);// At the far end the last slide may never reach the start edge, so it counts
+// as current once nothing is left to scroll.
+const index=canNext?getClosestSlideIndex(items,viewportBounds,direction==="rtl"):items.length-1;return{canNext,canPrevious,count:items.length,index};}function scrollToItem(viewport,target){const viewportBounds=viewport.getBoundingClientRect();const targetBounds=target.getBoundingClientRect();const delta=getComputedStyle(viewport).direction==="rtl"?targetBounds.right-viewportBounds.right:targetBounds.left-viewportBounds.left;const reducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches;viewport.scrollBy({behavior:reducedMotion?"auto":"smooth",left:delta});}// Mouse drag: browsers scroll on touch and trackpads natively, but not when a
+// mouse drags, so the viewport follows the pointer itself.
+const DRAG_THRESHOLD=5;// Pixels per millisecond: a release faster than this moves one slide.
+const FLICK_VELOCITY=0.3;// A pointer held still this long before release has stopped flicking.
+const FLICK_WINDOW=80;function getSlides(viewport){return Array.from(viewport.firstElementChild?.children??[]);}function isRtl(element){return getComputedStyle(element).direction==="rtl";}function nearestSlide(viewport){return getClosestSlideIndex(getSlides(viewport),viewport.getBoundingClientRect(),isRtl(viewport));}function settleIndex(viewport,drag){const count=getSlides(viewport).length;const nearest=nearestSlide(viewport);if(Math.abs(drag.velocity)<FLICK_VELOCITY){return nearest;}// Pulling content toward the start reveals the next slide.
+const forward=isRtl(viewport)?drag.velocity>0:drag.velocity<0;const target=forward?Math.max(nearest,drag.startIndex+1):Math.min(nearest,drag.startIndex-1);return Math.max(0,Math.min(count-1,target));}// The scroll position that puts a slide on its snap point, clamped to the
+// scroll range (right-to-left positions run negative).
+function snapLeft(viewport,target){const rtl=isRtl(viewport);const viewportBounds=viewport.getBoundingClientRect();const targetBounds=target.getBoundingClientRect();const delta=rtl?targetBounds.right-viewportBounds.right:targetBounds.left-viewportBounds.left;const max=viewport.scrollWidth-viewport.clientWidth;const left=viewport.scrollLeft+delta;return rtl?Math.min(0,Math.max(-max,left)):Math.max(0,Math.min(max,left));}// Eases out from the release, fast first like a throw, and lands exactly on
+// the snap point so restoring snap moves nothing.
+function glide(viewport,to,onDone){const from=viewport.scrollLeft;const distance=to-from;const reduced=window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(reduced||Math.abs(distance)<1){viewport.scrollLeft=to;onDone();return()=>undefined;}const duration=Math.min(420,180+Math.abs(distance)*0.35);let startTime=null;let frame=0;const step=now=>{startTime??=now;const progress=Math.min(1,(now-startTime)/duration);viewport.scrollLeft=from+distance*(1-(1-progress)**3);if(progress<1){frame=requestAnimationFrame(step);}else{onDone();}};frame=requestAnimationFrame(step);return()=>cancelAnimationFrame(frame);}// A drag ends with a click on whatever sits under the pointer; swallow it.
+function suppressNextClick(viewport){const swallow=event=>{event.preventDefault();event.stopPropagation();};viewport.addEventListener("click",swallow,{capture:true,once:true});setTimeout(()=>viewport.removeEventListener("click",swallow,true),0);}function trackVelocity(drag,event){const elapsed=event.timeStamp-drag.lastTime;if(elapsed>0){// Averages recent moves so one uneven event cannot decide a flick.
+const sample=(event.clientX-drag.lastX)/elapsed;drag.velocity=drag.velocity*0.4+sample*0.6;}drag.lastTime=event.timeStamp;drag.lastX=event.clientX;}function attachMouseDrag(viewport){let drag=null;let cancelGlide=()=>undefined;const stopGlide=()=>{cancelGlide();viewport.removeAttribute("data-settling");};const onPointerDown=event=>{stopGlide();if(event.pointerType!=="mouse"||event.button!==0){return;}drag={dragging:false,lastTime:event.timeStamp,lastX:event.clientX,startIndex:nearestSlide(viewport),startLeft:viewport.scrollLeft,startX:event.clientX,velocity:0};};const startDragging=(state,event)=>{state.dragging=true;// Counts from here, so content does not jump by the threshold.
+state.startX=event.clientX;viewport.setPointerCapture(event.pointerId);viewport.setAttribute("data-dragging","");window.getSelection()?.removeAllRanges();};const onPointerMove=event=>{const offset=drag?event.clientX-drag.startX:0;if(!drag||!drag.dragging&&Math.abs(offset)<DRAG_THRESHOLD){return;}if(!drag.dragging){startDragging(drag,event);}viewport.scrollLeft=drag.startLeft-(event.clientX-drag.startX);trackVelocity(drag,event);};const onPointerUp=event=>{const state=drag;drag=null;if(!state?.dragging){return;}if(viewport.hasPointerCapture(event.pointerId)){viewport.releasePointerCapture(event.pointerId);}if(event.timeStamp-state.lastTime>FLICK_WINDOW){state.velocity=0;}const target=getSlides(viewport)[settleIndex(viewport,state)];// Snap stays off until the glide lands, so the browser never snaps back.
+viewport.setAttribute("data-settling","");viewport.removeAttribute("data-dragging");suppressNextClick(viewport);cancelGlide=target?glide(viewport,snapLeft(viewport,target),stopGlide):()=>undefined;if(!target){stopGlide();}};// Native image and link dragging would steal the gesture.
+const onDragStart=event=>event.preventDefault();const listeners=[["pointerdown",onPointerDown],["pointermove",onPointerMove],["pointerup",onPointerUp],["pointercancel",onPointerUp],["dragstart",onDragStart],["wheel",stopGlide],["touchstart",stopGlide]];for(const[type,listener]of listeners){viewport.addEventListener(type,listener,{passive:type==="wheel"||type==="touchstart"});}return()=>{stopGlide();for(const[type,listener]of listeners){viewport.removeEventListener(type,listener);}};}function getInlineStartDistance(item,viewportBounds,directionIsRtl){const bounds=item.getBoundingClientRect();return Math.abs(directionIsRtl?viewportBounds.right-bounds.right:bounds.left-viewportBounds.left);}function getClosestSlideIndex(items,viewportBounds,directionIsRtl){let currentIndex=0;let closestDistance=Number.POSITIVE_INFINITY;for(const[index,item]of items.entries()){const distance=getInlineStartDistance(item,viewportBounds,directionIsRtl);if(distance<closestDistance){currentIndex=index;closestDistance=distance;}}return currentIndex;}export function Carousel(carouselProps){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,children,ref:forwardedRef,...rest}=carouselProps;const accessibleName=ariaLabel??ariaLabelledBy;if(!accessibleName?.trim()){throw new TypeError("Carousel requires a non-empty accessible name.");}const[scrollState,setScrollState]=useState(EMPTY_STATE);const viewportElement=useRef(null);const pendingTargetIndex=useRef(null);const registerViewport=useCallback(viewport=>{viewportElement.current=viewport;if(!viewport){return;}const update=()=>{const nextState=getScrollState(viewport);setScrollState(current=>sameState(current,nextState)?current:nextState);};const clearPendingTarget=()=>{pendingTargetIndex.current=null;};const handleKeyDown=event=>{if(event.target===viewport&&["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","End","Home","PageDown","PageUp"," "].includes(event.key)){clearPendingTarget();}};const resizeObserver=typeof ResizeObserver==="undefined"?undefined:new ResizeObserver(()=>{clearPendingTarget();update();});const mutationObserver=typeof MutationObserver==="undefined"?undefined:new MutationObserver(()=>{clearPendingTarget();update();});const track=viewport.firstElementChild;resizeObserver?.observe(viewport);if(track){resizeObserver?.observe(track);mutationObserver?.observe(track,{childList:true});}viewport.addEventListener("scroll",update,{passive:true});viewport.addEventListener("scrollend",clearPendingTarget);viewport.addEventListener("wheel",clearPendingTarget,{passive:true});viewport.addEventListener("pointerdown",clearPendingTarget);viewport.addEventListener("touchstart",clearPendingTarget,{passive:true});viewport.addEventListener("keydown",handleKeyDown);const detachMouseDrag=attachMouseDrag(viewport);update();return()=>{detachMouseDrag();resizeObserver?.disconnect();mutationObserver?.disconnect();viewport.removeEventListener("scroll",update);viewport.removeEventListener("scrollend",clearPendingTarget);viewport.removeEventListener("wheel",clearPendingTarget);viewport.removeEventListener("pointerdown",clearPendingTarget);viewport.removeEventListener("touchstart",clearPendingTarget);viewport.removeEventListener("keydown",handleKeyDown);if(viewportElement.current===viewport){viewportElement.current=null;}};},[]);const move=useCallback(direction=>{const viewport=viewportElement.current;const track=viewport?.firstElementChild;if(!(viewport&&track)||track.children.length<2){return;}const viewportBounds=viewport.getBoundingClientRect();const directionIsRtl=getComputedStyle(viewport).direction==="rtl";const items=Array.from(track.children);const currentIndex=pendingTargetIndex.current??getClosestSlideIndex(items,viewportBounds,directionIsRtl);const nextIndex=Math.max(0,Math.min(items.length-1,currentIndex+(direction==="next"?1:-1)));const target=items[nextIndex];if(!target){return;}pendingTargetIndex.current=nextIndex;scrollToItem(viewport,target);},[]);const goTo=useCallback(index=>{const viewport=viewportElement.current;const target=viewport?.firstElementChild?.children[index];if(viewport&&target){pendingTargetIndex.current=index;scrollToItem(viewport,target);}},[]);const onNext=useCallback(()=>move("next"),[move]);const onPrevious=useCallback(()=>move("previous"),[move]);stripReservedProps(rest,["aria-roledescription","className","data-slot","role","style"]);return/*#__PURE__*/_jsx(CarouselContext.Provider,{value:{canNext:scrollState.canNext,canPrevious:scrollState.canPrevious,count:scrollState.count,goTo,index:scrollState.index,onNext,onPrevious,registerViewport},children:/*#__PURE__*/_jsx("section",{...rest,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-roledescription":"carousel","data-slot":"carousel",ref:forwardedRef,...props(carouselStyles.root,typeRoles.body),children:children})});}export function CarouselContent(contentProps){const{children,ref:forwardedRef,...rest}=contentProps;const{registerViewport}=useCarouselContext();const viewportRef=useCallback(viewport=>{const cleanupViewport=registerViewport(viewport);const cleanupConsumerRef=assignRef(forwardedRef,viewport);if(typeof cleanupViewport!=="function"){return cleanupConsumerRef;}return()=>{cleanupViewport();cleanupConsumerRef?.();};},[forwardedRef,registerViewport]);stripReservedProps(rest,["aria-label","aria-labelledby","aria-roledescription","className","data-slot","role","style","tabIndex"]);return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"carousel-viewport",ref:viewportRef// biome-ignore lint/a11y/noNoninteractiveTabindex: A focusable scroll viewport lets keyboard users scroll the native track.
+,tabIndex:0,...props(carouselStyles.viewport),children:/*#__PURE__*/_jsx("div",{"aria-live":"polite","data-slot":"carousel-track",...props(carouselStyles.track),children:children})});}export function CarouselItem(itemProps){const{children,ref:forwardedRef,...rest}=itemProps;stripReservedProps(rest,["aria-roledescription","className","data-slot","role","style","tabIndex"]);return(/*#__PURE__*/// biome-ignore lint/a11y/useSemanticElements: Each slide is a named group; a fieldset would misrepresent non-form content.
+_jsx("div",{...rest,"aria-roledescription":"slide","data-slot":"carousel-item",ref:forwardedRef,role:"group",...props(carouselStyles.item),children:/*#__PURE__*/_jsx("div",{"data-slot":"carousel-item-surface",...props(carouselStyles.surface),children:children})}));}function CarouselIndicator({count,current,onSelect,slide}){const select=useCallback(()=>onSelect(slide),[onSelect,slide]);return/*#__PURE__*/_jsx("button",{"aria-current":current||undefined,"aria-label":`Slide ${slide+1} of ${count}`,"data-slot":"carousel-indicator",onClick:select,type:"button",...props(carouselStyles.indicator),children:/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(carouselStyles.dot)})});}/** One button per slide; the current one stretches into a short pill. */export function CarouselIndicators(indicatorProps){const{"aria-label":ariaLabel="Slides",ref:forwardedRef,...rest}=indicatorProps;const{count,goTo,index}=useCarouselContext();stripReservedProps(rest,["className","data-slot","role","style"]);return(/*#__PURE__*/// biome-ignore lint/a11y/useSemanticElements: a set of slide buttons is a named group, not a form fieldset.
+_jsx("div",{...rest,"aria-label":ariaLabel,"data-slot":"carousel-indicators",ref:forwardedRef,role:"group",...props(carouselStyles.indicators),children:Array.from({length:count},(_,slide)=>/*#__PURE__*/_jsx(CarouselIndicator,{count:count,current:slide===index// biome-ignore lint/suspicious/noArrayIndexKey: a slide's position is its identity here.
+,onSelect:goTo,slide:slide},slide))}));}export function CarouselPrevious(controlProps){const{"aria-label":ariaLabel="Previous slide",ref:forwardedRef,...rest}=controlProps;const{canPrevious,onPrevious}=useCarouselContext();stripReservedProps(rest,["className","data-slot","disabled","onClick","role","style","type"]);return/*#__PURE__*/_jsx(Button,{...rest,"aria-label":ariaLabel,"data-slot":"carousel-previous",disabled:!canPrevious,onClick:onPrevious,ref:forwardedRef,size:"icon",type:"button",variant:"outline",children:/*#__PURE__*/_jsx(Chevron,{direction:"previous"})});}export function CarouselNext(controlProps){const{"aria-label":ariaLabel="Next slide",ref:forwardedRef,...rest}=controlProps;const{canNext,onNext}=useCarouselContext();stripReservedProps(rest,["className","data-slot","disabled","onClick","role","style","type"]);return/*#__PURE__*/_jsx(Button,{...rest,"aria-label":ariaLabel,"data-slot":"carousel-next",disabled:!canNext,onClick:onNext,ref:forwardedRef,size:"icon",type:"button",variant:"outline",children:/*#__PURE__*/_jsx(Chevron,{direction:"next"})});}function Chevron({direction}){const Icon=direction==="next"?IconChevronRight:IconChevronLeft;return/*#__PURE__*/_jsx(Icon,{"aria-hidden":"true",focusable:false,size:16,...props(carouselStyles.icon)});}

package/dist/components/carousel/carousel.styles.js

@@ -0,0 +1,4 @@
+import{create,keyframes}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/interaction.stylex";import{borderWidth,focus,focusMotion,focusOutline}from"../../styles/interaction.stylex";import"../../styles/motion.stylex";import{duration,easing}from"../../styles/motion.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";// A slide is full size when snapped and recedes as it scrolls in or out.
+const recede="x1x8sguw-B";// Without scroll timelines the animation would run once and stay shrunk, so it
+// applies only where the browser drives it from scrolling.
+const SCROLL_TIMELINE="@supports (animation-timeline: view())";export const carouselStyles={dot:{kWkggS:"xskty3w x1a1gqr2 x1v0f6ea",kZKoxP:"xols6we",kaIpWk:"x18zih8k",k1xSpc:"x1lliihq",kzqmXN:"xchdy1f x1v4s8kt",kIyJzY:"x1e471i8 x115jf8",k1ekBW:"xjdoy98",kAMwcw:"xvhdtae",$$css:true},icon:{k3aq6I:"x19axjrm x1c071of",$$css:true},indicator:{kGNEyG:"x6s0dn4",kysU6D:"xjyslct",kWkggS:"xjbqb8w",kZKoxP:"xxk0z11",kMzoRj:"xc342km",kkrTdU:"x1ypdohk",k1xSpc:"x3nfvp2",kjj79g:"xl56j7k",kogj98:"x1ghz6dp",k7Eaqz:"x15kz4h8",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x2ssjo2",k3XXqK:"x9v5kkp x1t137rt",kMeerF:"x1vhx2qj",kmVPX3:"x1717udv",kg3NbH:"xdbhxi8",$$css:true},indicators:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kOIVth:"xxhr3t",k7Eaqz:"xeuugli",$$css:true},item:{kB7OPa:"x9f619",kCS8Yb:"x1l7klhg",kzQI83:"x1c4vz4f",kmuXW:"x2lah0s",k7Eaqz:"xeuugli",k5xd4v:"x1bhewko",$$css:true},root:{k7Eaqz:"xeuugli",kzqmXN:"xh8yej3",$$css:true},surface:{k44tkh:"x1cv21op",kWV6AL:"x11r8nx4",kKVMdj:"x1tzfbnl xpqv5wo x1a5igra",kjjejL:"x18nx4y3",kyAemX:"xf4zoo",kZKoxP:"x5yr21d",$$css:true},track:{k1xSpc:"x78zum5",kOIVth:"xiw8qbs",k7Eaqz:"xeuugli",$$css:true},viewport:{k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kaIpWk:"x1pjcqnp",kB7OPa:"x9f619",kkrTdU:"xdctgko x1jm3nie",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x7jjmpn x1w1ofmy",k3XXqK:"x9v5kkp xzc55om",kMeerF:"xm9seqh x1vhx2qj",kXHlph:"xw2csxc",kvh3hx:"x7p5m3t",k5wCbM:"x1rohswg",kc424l:"x1qg0tg xhfbhpw",kFalU9:"x1o5wbz4",kfSwDN:"xaspwu4",kzqmXN:"xh8yej3",$$css:true}};

package/dist/components/category-comparison/category-comparison.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { type ChartSeriesTone } from "../chart-frame/chart-colors";
+export interface CategoryComparisonDatum {
+    /** A reference value, such as last year, drawn as a muted bar beside value. */
+    comparison?: number;
+    id: string;
+    label: string;
+    value: number;
+}
+export type CategoryComparisonOrientation = "horizontal" | "vertical";
+export type CategoryComparisonProps = Omit<Closed<ComponentPropsWithRef<"div">>, "aria-label" | "children" | "data-slot" | "role"> & {
+    "aria-description"?: string;
+    "aria-label": string;
+    categories: readonly CategoryComparisonDatum[];
+    /** Names the comparison values; required when any category has one. */
+    comparisonLabel?: string;
+    formatAxisValue?: (value: number) => string;
+    formatValue?: (value: number) => string;
+    /** Shows the legend below the chart. Turn it off when a card header shows it. */
+    legend?: boolean;
+    locale?: string;
+    /** vertical suits ordered categories such as months. */
+    orientation?: CategoryComparisonOrientation;
+    seriesLabel: string;
+    tone?: ChartSeriesTone;
+    /** Draws a track behind each bar showing the full scale. */
+    track?: boolean;
+};
+export declare function CategoryComparison({ "aria-description": ariaDescription, "aria-label": ariaLabel, categories: inputCategories, comparisonLabel, formatAxisValue, formatValue, legend, locale, orientation, ref: forwardedRef, seriesLabel, tone, track, ...rest }: CategoryComparisonProps): import("react").JSX.Element;

package/dist/components/category-comparison/category-comparison.js

@@ -0,0 +1,9 @@
+"use client";import{props}from"@stylexjs/stylex";import{barX,barY,defineChart,group}from"@tanstack/charts";import{decorative}from"@tanstack/charts/mark/decorative";import{scaleBand}from"@tanstack/charts/scales/band";import{scaleLinear}from"@tanstack/charts/scales/linear";import{tooltip as tooltipFeature}from"@tanstack/charts/tooltip";import{useMemo}from"react";import{colors}from"../../styles/colors.stylex";import{typeRoles}from"../../styles/typography.styles";import{chartColors}from"../chart-frame/chart-colors";import{bandCrosshair}from"../chart-frame/chart-crosshair";import{ChartFrame}from"../chart-frame/chart-frame";import{ChartLegend}from"../chart-legend/chart-legend";import{ChartTooltip}from"../chart-tooltip/chart-tooltip";import{categoryComparisonStyles}from"./category-comparison.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function assertCategory(category,ids){if(typeof category.id!=="string"||!category.id.trim()||typeof category.label!=="string"||!category.label.trim()){throw new TypeError("CategoryComparison categories require non-empty ids and labels.");}if(ids.has(category.id)){throw new RangeError("CategoryComparison category ids must be unique.");}for(const value of[category.value,category.comparison??0]){if(typeof value!=="number"||!Number.isFinite(value)){throw new RangeError("CategoryComparison values must be finite numbers.");}}ids.add(category.id);}function prepareCategories(categories){if(!Array.isArray(categories)){throw new TypeError("CategoryComparison categories must be an array.");}const ids=new Set();let min=0;let max=0;for(const category of categories){assertCategory(category,ids);const comparison=category.comparison??category.value;min=Math.min(min,category.value,comparison);max=Math.max(max,category.value,comparison);}if(!Number.isFinite(max-min)){throw new RangeError("CategoryComparison values exceed a finite chart range.");}return{categories:[...categories],domain:[min,max===min?1:max]};}function assertLabels(ariaLabel,seriesLabel){if(typeof ariaLabel!=="string"||typeof seriesLabel!=="string"||!ariaLabel.trim()||!seriesLabel.trim()){throw new TypeError("CategoryComparison requires non-empty aria-label and seriesLabel values.");}}function assertFormatters(formatValue,formatAxisValue){for(const[name,formatter]of Object.entries({formatAxisValue,formatValue})){if(formatter!==undefined&&typeof formatter!=="function"){throw new TypeError(`CategoryComparison ${name} must be a function.`);}}}function formatNumber(value,formatter,numberFormat,formatterName="formatValue"){const formatted=formatter?formatter(value):numberFormat.format(value);if(typeof formatted!=="string"){throw new TypeError(`CategoryComparison ${formatterName} must return a string.`);}return formatted;}function toRows(categories){return categories.flatMap(({comparison,id,label,value})=>[...(comparison===undefined?[]:[{category:id,id:`${id}:comparison`,label,series:"comparison",value:comparison}]),{category:id,id,label,series:"value",value}]);}function renderTooltip(context,labels,tone,format){const point=context.primaryPoint??context.points[0];if(!point){return null;}const rows=context.points.map(({datum})=>datum).filter(({category})=>category===point.datum.category).sort(left=>left.series==="value"?-1:1);return/*#__PURE__*/_jsx(ChartTooltip,{items:rows.map(row=>({id:row.id,label:row.series==="value"?labels.value:labels.comparison,tone:row.series==="value"?tone:"muted",value:format(row.value)})),label:point.datum.label});}// The focused category keeps full color while the rest recede.
+const RECEDE=[{style:{opacity:0.35},transition:{duration:150,type:"tween"},when:{focus:"unmatched"}}];function barFill(tone){return row=>row.series==="value"?chartColors[tone]:chartColors.muted;}// Bar widths follow BoardUI's proportions: slim, fully rounded pairs when two
+// bars share a slot, wider bars with softer corners when one stands alone.
+function barSize(orientation,grouped){if(grouped){return{radius:5,thickness:10};}return orientation==="vertical"?{radius:8,thickness:28}:{radius:6,thickness:20};}// A full-scale track behind each category, as in a progress bar.
+function getTrack(categories,orientation,{domain,grouped}){const{radius,thickness}=barSize(orientation,grouped);const common={fill:colors.controlSurface,id:"category-comparison-track",key:({id})=>id,maxThickness:grouped?thickness*2+6:thickness,radius:{end:radius}};return decorative(orientation==="vertical"?barY(categories,{...common,x:"id",y1:domain[0],y2:domain[1]}):barX(categories,{...common,x1:domain[0],x2:domain[1],y:"id"}));}function getBars(rows,orientation,{grouped,tone}){const{radius,thickness}=barSize(orientation,grouped);const common={fill:barFill(tone),id:"category-comparison-bars",key:row=>row.id,layout:grouped?group({padding:0.2}):undefined,maxThickness:thickness,radius:{end:radius},states:RECEDE,z:"series"};return orientation==="vertical"?barY(rows,{...common,x:"category",y:"value",y1:0}):barX(rows,{...common,x:"value",x1:0,y:"category"});}function getLegendItems(seriesLabel,tone,comparisonLabel){const items=[{id:"category-comparison-series",label:seriesLabel,tone}];return comparisonLabel===undefined?items:[...items,{id:"category-comparison-comparison",label:comparisonLabel,tone:"muted"}];}function getHeight(orientation,count,grouped){if(orientation==="vertical"){return 200;}return Math.max(240,count*(grouped?64:48)+72);}function CategoryComparisonChart({"aria-description":ariaDescription,"aria-label":ariaLabel,categories,comparisonLabel,domain,formatAxisValue,formatValue,legend,locale,orientation,seriesLabel,tone,track}){const numberFormat=useMemo(()=>new Intl.NumberFormat(locale),[locale]);// Axis ticks default to compact numbers ("13.5K"); tooltips stay exact.
+const axisNumberFormat=useMemo(()=>new Intl.NumberFormat(locale,{maximumFractionDigits:1,notation:"compact"}),[locale]);const format=useMemo(()=>value=>formatNumber(value,formatValue,numberFormat),[formatValue,numberFormat]);const rows=useMemo(()=>toRows(categories),[categories]);const grouped=rows.length>categories.length;const definition=useMemo(()=>{const labels=new Map(categories.map(({id,label})=>[id,label]));// Tracks and the axis share one niced domain, so tracks reach the top tick.
+const tickCount=orientation==="vertical"?4:5;const scale=scaleLinear().domain(domain).nice(tickCount);const[start,end]=scale.domain();const options={domain:[start,end],grouped,tone};const valueScale={axis:{ticks:{count:tickCount,format:value=>formatNumber(value,formatAxisValue??formatValue,axisNumberFormat,formatAxisValue?"formatAxisValue":"formatValue")}},grid:true,scale};const categoryScale={axis:{ticks:{format:id=>labels.get(id)??id}},scale:scaleBand().domain(categories.map(({id})=>id)).paddingInner(0.2).paddingOuter(0.08)};const vertical=orientation==="vertical";return defineChart({marks:[bandCrosshair(vertical?"x":"y"),...(track?[getTrack(categories,orientation,options)]:[]),getBars(rows,orientation,options)],scales:vertical?{x:categoryScale,y:valueScale}:{x:valueScale,y:categoryScale}},{focus:vertical?"group-x":"group-y",// The brand band marks the focused category, so no point ring.
+focusRing:false,tooltip:tooltipFeature});},[categories,domain,formatAxisValue,axisNumberFormat,formatValue,grouped,orientation,rows,tone,track]);const renderTooltipBody=useMemo(()=>context=>renderTooltip(context,{comparison:comparisonLabel,value:seriesLabel},tone,format),[comparisonLabel,format,seriesLabel,tone]);return/*#__PURE__*/_jsxs("div",{"data-slot":"category-comparison-chart",children:[/*#__PURE__*/_jsx(ChartFrame,{"aria-description":ariaDescription,"aria-label":ariaLabel,definition:definition,height:getHeight(orientation,categories.length,grouped),renderTooltipBody:renderTooltipBody,tabIndex:0}),legend?/*#__PURE__*/_jsx("div",{"data-slot":"category-comparison-legend",...props(categoryComparisonStyles.legend),children:/*#__PURE__*/_jsx(ChartLegend,{"aria-label":`${seriesLabel} series`,items:getLegendItems(seriesLabel,tone,grouped?comparisonLabel:undefined)})}):null]});}function assertLocaleAndTone(locale,tone){if(typeof locale!=="string"||!locale.trim()){throw new TypeError("CategoryComparison locale must be a non-empty string.");}if(!Object.hasOwn(chartColors,tone)){throw new RangeError("CategoryComparison tone is not supported.");}// Throws a RangeError for an unknown locale.
+new Intl.NumberFormat(locale).format(0);}function assertComparisonOptions(categories,comparisonLabel,orientation){if(orientation!=="horizontal"&&orientation!=="vertical"){throw new RangeError("CategoryComparison orientation must be 'horizontal' or 'vertical'.");}const hasComparison=Array.isArray(categories)&&categories.some(({comparison})=>comparison!==undefined);if(hasComparison&&(typeof comparisonLabel!=="string"||!comparisonLabel.trim())){throw new TypeError("CategoryComparison requires a comparisonLabel when categories have comparison values.");}}export function CategoryComparison({"aria-description":ariaDescription,"aria-label":ariaLabel,categories:inputCategories,comparisonLabel,formatAxisValue,formatValue,legend=true,locale="en-US",orientation="horizontal",ref:forwardedRef,seriesLabel,tone="series1",track=false,...rest}){assertLabels(ariaLabel,seriesLabel);assertFormatters(formatValue,formatAxisValue);assertComparisonOptions(inputCategories,comparisonLabel,orientation);assertLocaleAndTone(locale,tone);const{categories,domain}=useMemo(()=>prepareCategories(inputCategories),[inputCategories]);for(const name of["aria-label","children","className","data-slot","role","style"]){Reflect.deleteProperty(rest,name);}return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"category-comparison",ref:forwardedRef,...props(categoryComparisonStyles.root),children:categories.length===0?/*#__PURE__*/_jsx("p",{"aria-label":ariaLabel,role:"status",...props(typeRoles.body,categoryComparisonStyles.empty),children:"No categories available."}):/*#__PURE__*/_jsx(CategoryComparisonChart,{"aria-description":ariaDescription,"aria-label":ariaLabel,categories:categories,comparisonLabel:comparisonLabel,domain:domain,formatAxisValue:formatAxisValue,formatValue:formatValue,legend:legend,locale:locale,orientation:orientation,seriesLabel:seriesLabel,tone:tone,track:track})});}

package/dist/components/category-comparison/category-comparison.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";export const categoryComparisonStyles={empty:{kqGvvJ:"x10im51j",$$css:true},legend:{keoZOQ:"x1fynrwi",$$css:true},root:{k7Eaqz:"xeuugli",$$css:true}};

package/dist/components/chart-frame/arc-path.js

@@ -0,0 +1,7 @@
+// SVG arc paths for ring charts. Angles are in turns: 0 is twelve o'clock and
+// values grow clockwise, so 0.25 is three o'clock.
+// Server and browser math can differ in the last digit; thousandths keep the
+// path identical on both sides, far below a pixel.
+const round=value=>Math.round(value*1000)/1000;function point(cx,cy,radius,turn){const angle=turn*2*Math.PI;return[round(cx+radius*Math.sin(angle)),round(cy-radius*Math.cos(angle))];}export function arcPath(cx,cy,radius,start,end){// A full turn needs two half arcs; one arc cannot start and end on a point.
+// They share one subpath, so a dash runs on across the seam.
+if(end-start>=1){const[x,y]=point(cx,cy,radius,start);return`${arcPath(cx,cy,radius,start,start+0.5)} A${radius},${radius} 0 0 1 ${x},${y}`;}const[x1,y1]=point(cx,cy,radius,start);const[x2,y2]=point(cx,cy,radius,end);const large=end-start>0.5?1:0;return`M${x1},${y1} A${radius},${radius} 0 ${large} 1 ${x2},${y2}`;}

package/dist/components/chart-frame/chart-assert.js

@@ -0,0 +1,2 @@
+import{chartColors}from"./chart-colors";// Shared input checks for chart components; messages name the component.
+export function assertAriaLabel(component,ariaLabel){if(typeof ariaLabel!=="string"||!ariaLabel.trim()){throw new TypeError(`${component} requires a non-empty aria-label.`);}}/** Checks a non-empty id and label, and that the id is new to `ids`. */export function assertIdentity(component,item,ids){const{id,label}=item;if(typeof id!=="string"||!id.trim()||typeof label!=="string"||!label.trim()){throw new TypeError(`${component} items need non-empty ids and labels.`);}if(ids.has(id)){throw new RangeError(`${component} ids must be unique.`);}ids.add(id);}export function assertNonNegative(component,value){if(typeof value!=="number"||!Number.isFinite(value)||value<0){throw new RangeError(`${component} values must be finite and not negative.`);}}export function assertTone(component,tone){if(tone!==undefined&&!Object.hasOwn(chartColors,tone)){throw new RangeError(`${component} tone is not a supported chart tone.`);}}

package/dist/components/chart-frame/chart-colors.d.ts

@@ -0,0 +1,10 @@
+export declare const chartColors: {
+    readonly muted: import("@stylexjs/stylex").StyleXVar<string>;
+    readonly series1: import("@stylexjs/stylex").StyleXVar<string>;
+    readonly series2: import("@stylexjs/stylex").StyleXVar<string>;
+    readonly series3: import("@stylexjs/stylex").StyleXVar<string>;
+    readonly series4: import("@stylexjs/stylex").StyleXVar<string>;
+    readonly series5: import("@stylexjs/stylex").StyleXVar<string>;
+    readonly series6: import("@stylexjs/stylex").StyleXVar<string>;
+};
+export type ChartSeriesTone = keyof typeof chartColors;

package/dist/components/chart-frame/chart-colors.js

@@ -0,0 +1,2 @@
+import{colors}from"../../styles/colors.stylex";export const chartColors={// Reference series such as last year: a dashed line or quieter bars.
+muted:colors.chartReference,series1:colors.chartSeries1,series2:colors.chartSeries2,series3:colors.chartSeries3,series4:colors.chartSeries4,series5:colors.chartSeries5,series6:colors.chartSeries6};

package/dist/components/chart-frame/chart-crosshair.js

@@ -0,0 +1,6 @@
+import{crosshair}from"@tanstack/charts";import{resolveCrosshairGuide}from"@tanstack/charts/crosshair";import{colors}from"../../styles/colors.stylex";import{mizenAxisLabels,mizenTickGap}from"./chart-frame";// Mizen's focus guides wear the brand: a wine rule whose time label sits in a
+// wine pill on the axis, and a lavender band behind the focused category.
+const PILL_PADDING_X=8;const PILL_HEIGHT=18;// Tabular digits and short month names average a bit over half an em.
+const CHARACTER_WIDTH=0.58;function isAxisLabel(node){return node.kind==="label"&&(node.className??"").includes("crosshair-label--x");}/** Puts a rounded wine pill behind the focused time label. */function withPill(node){if(node?.kind!=="group"){return node;}const children=node.children.flatMap(child=>{if(!isAxisLabel(child)){return[withPill(child)??child];}const fontSize=child.fontSize??mizenAxisLabels.fontSize;const width=child.text.length*fontSize*CHARACTER_WIDTH+PILL_PADDING_X*2;const center=child.y-fontSize*0.35;return[{height:PILL_HEIGHT,key:`${child.key}:pill`,kind:"rect",radius:PILL_HEIGHT/2,style:{fill:colors.brandForeground},width,x:child.x-width/2,y:center-PILL_HEIGHT/2},{...child,style:{...child.style,fill:colors.surface}}];});return{...node,children};}function pillCrosshair(mark){return{...mark,initialize:context=>{const initialized=mark.initialize(context);return{...initialized,render:renderContext=>{const scene=initialized.render(renderContext);return{...scene,focusGuides:scene.focusGuides?.map(guide=>({...guide,resolve:resolveContext=>withPill(resolveCrosshairGuide(resolveContext))}))};}};}};}// A tick closer than this to the focused time would show through the pill.
+const PILL_CLEARANCE=40;/** Tick label options that hide the ticks under the focus pill while it shows. */export const pillTickLabels={opacity:({focus,position})=>focus&&Math.abs(position-focus.primary.x)<PILL_CLEARANCE?0:undefined};/** A vertical rule at the focused time, labeled in a pill on the x axis. */export function timeCrosshair(format){return pillCrosshair(crosshair({x:{// The pill covers the gray tick under it, so the label reads alone.
+label:{fill:colors.surface,fillOpacity:1,fontSize:mizenAxisLabels.fontSize,fontWeight:mizenAxisLabels.fontWeight,format,offset:mizenTickGap,strokeWidth:0},stroke:colors.brandForeground,strokeOpacity:0.4,strokeWidth:1},y:false}));}/** A soft band behind the focused category, drawn under the bars. */export function bandCrosshair(axis){const band={band:{fill:colors.brandBackground,fillOpacity:1,inset:-4,radius:8},label:false};return crosshair(axis==="x"?{x:band,y:false}:{x:false,y:band});}

package/dist/components/chart-frame/chart-data-table.js

@@ -0,0 +1,4 @@
+import{props}from"@stylexjs/stylex";import{visuallyHiddenStyles}from"../visually-hidden/visually-hidden.styles";/**
+ * A chart's exact values as a table for assistive technology. It stays out of
+ * sight: sighted readers get the same values from tooltips and keyboard focus.
+ */import{jsx as _jsx}from"react/jsx-runtime";export function ChartDataTable({children}){return/*#__PURE__*/_jsx("div",{"data-slot":"chart-data",...props(visuallyHiddenStyles.root),children:children});}

package/dist/components/chart-frame/chart-frame.d.ts

@@ -0,0 +1,24 @@
+import type { ChartValue } from "@tanstack/charts";
+import { type ChartProps } from "@tanstack/charts/react/tooltip";
+import type { Closed } from "../../closed";
+type ChartSizing = {
+    aspectRatio?: never;
+    height?: number;
+} | {
+    aspectRatio: number;
+    height?: never;
+};
+export declare const mizenAxisLabels: {
+    fontSize: number;
+    fontWeight: number;
+    opacity: number;
+};
+export declare const mizenTickGap = 4;
+export type ChartFrameProps<TDatum = unknown, TXValue extends ChartValue = ChartValue, TYValue extends ChartValue = ChartValue> = Omit<Closed<ChartProps<TDatum, TXValue, TYValue>>, "ariaDescription" | "ariaLabel" | "aspectRatio" | "height" | "initialWidth" | "measureText" | "onRender" | "renderSvg" | "width"> & ChartSizing & {
+    /** Extra context for assistive tech, after the name. */
+    "aria-description"?: string;
+    "aria-label": string;
+    initialWidth?: number;
+};
+export declare function ChartFrame<TDatum = unknown, TXValue extends ChartValue = ChartValue, TYValue extends ChartValue = ChartValue>({ "aria-description": ariaDescription, "aria-label": ariaLabel, aspectRatio, definition, height, initialWidth, idPrefix, onFocusChange, onFocusGroupChange, onSelect, renderTooltipBody, tabIndex, }: ChartFrameProps<TDatum, TXValue, TYValue>): import("react").JSX.Element;
+export {};

package/dist/components/chart-frame/chart-frame.js

@@ -0,0 +1,7 @@
+"use client";import{props}from"@stylexjs/stylex";import{Chart as TanStackChart}from"@tanstack/charts/react/tooltip";import{useMemo}from"react";import{colors}from"../../styles/colors.stylex";import{chartFrameStyles}from"./chart-frame.styles";import{jsx as _jsx}from"react/jsx-runtime";const mizenTheme={foreground:colors.content,grid:colors.border,muted:colors.mutedContent};// TanStack chart option in px, matching the caption role.
+// eslint-disable-next-line no-restricted-syntax -- a charts API value, not CSS.
+export const mizenAxisLabels={fontSize:12,fontWeight:400,opacity:1};// Gap between the plot and x tick labels, in px; overlays on a tick reuse it.
+export const mizenTickGap=4;const mizenGrid={stroke:colors.controlSurface,strokeDasharray:"4 4",// The engine fades grids to 0.11 by default; the track color is quiet enough.
+strokeOpacity:1,strokeWidth:1};function withMizenAxisLabel(label){if(typeof label==="string"){return{...mizenAxisLabels,text:label};}return label===undefined?undefined:{...mizenAxisLabels,...label};}function requireChartLabel(ariaLabel){if(typeof ariaLabel!=="string"||!ariaLabel.trim()){throw new TypeError("ChartFrame requires a non-empty aria-label.");}}function requirePositiveFinite(value,name){if(!Number.isFinite(value)||value<=0){throw new RangeError(`${name} must be a finite number greater than zero.`);}}function withMizenAxisDefaults(scale){if(scale===null){return null;}const{axis,...scaleProps}=scale;if(axis===false){return scale;}const{label,ticks,tickLabels,line,...axisProps}=axis??{};return{...scaleProps,axis:{...axisProps,label:withMizenAxisLabel(label),line:line??false,tickLabels:tickLabels===false?false:{...mizenAxisLabels,...tickLabels},ticks:ticks===false?false:{padding:mizenTickGap,size:0,...ticks}},// Grid lines are quiet dashes, so they guide the eye without boxing data.
+grid:scaleProps.grid===true?mizenGrid:scaleProps.grid};}function withMizenSpec(spec){// Object.fromEntries widens keys; this transform keeps every original scale key.
+const scales=Object.fromEntries(Object.entries(spec.scales).map(([name,scale])=>[name,withMizenAxisDefaults(scale)]));return{...spec,scales,theme:{...mizenTheme,...spec.theme}};}function withMizenTheme(definition){if("chart"in definition){return{...definition,chart:context=>withMizenSpec(definition.chart(context))};}return withMizenSpec(definition);}function styleChartPlot({svg}){const{className}=props(chartFrameStyles.plot);if(className){svg.classList.add(...className.split(" "));}}export function ChartFrame({"aria-description":ariaDescription,"aria-label":ariaLabel,aspectRatio,definition,height,initialWidth=896,idPrefix,onFocusChange,onFocusGroupChange,onSelect,renderTooltipBody,tabIndex}){requireChartLabel(ariaLabel);requirePositiveFinite(initialWidth,"initialWidth");if(aspectRatio!==undefined&&height!==undefined){throw new TypeError("ChartFrame accepts either height or aspectRatio, not both.");}if(aspectRatio!==undefined){requirePositiveFinite(aspectRatio,"aspectRatio");}if(height!==undefined){requirePositiveFinite(height,"height");}const themedDefinition=useMemo(()=>withMizenTheme(definition),[definition]);return/*#__PURE__*/_jsx("div",{"data-slot":"chart-frame",...props(chartFrameStyles.frame,renderTooltipBody&&chartFrameStyles.customTooltip),children:/*#__PURE__*/_jsx(TanStackChart,{ariaDescription:ariaDescription,ariaLabel:ariaLabel,aspectRatio:aspectRatio,definition:themedDefinition,height:aspectRatio===undefined?height??320:undefined,idPrefix:idPrefix,initialWidth:initialWidth,onFocusChange:onFocusChange,onFocusGroupChange:onFocusGroupChange,onRender:styleChartPlot,onSelect:onSelect,renderTooltipBody:renderTooltipBody,tabIndex:tabIndex})});}

package/dist/components/chart-frame/chart-frame.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/interaction.stylex";import{borderWidth,focus,focusMotion}from"../../styles/interaction.stylex";export const chartFrameStyles={customTooltip:{"--ts-chart-tooltip-background":"xqkcryx","--ts-chart-tooltip-border":"xcbs2gc","--ts-chart-tooltip-padding":"xahq67p","--ts-chart-tooltip-shadow":"xioejq8",$$css:true},frame:{"--ts-chart-1":"x1gv1gpe","--ts-chart-2":"xm3pms3","--ts-chart-3":"x1omnh8i","--ts-chart-4":"x9w93sn","--ts-chart-5":"x1jyfi9a","--ts-chart-6":"xsrw3im","--ts-chart-crosshair-label-halo":"x1sguto8","--ts-chart-tooltip-background":"xete8um","--ts-chart-tooltip-border":"x1dptq7k","--ts-chart-tooltip-color":"x194wv71",kWkggS:"xjbqb8w",kMwMTN:"x14tvo57",kMv6JI:"xjb2p0i",kcqcaj:"xss6m8b",k7Eaqz:"xeuugli",kzqmXN:"xh8yej3",$$css:true},plot:{k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kjBf7l:"x12acm8b x1egkn3r",kInvED:"x1w1ofmy",k3XXqK:"x9v5kkp x1t137rt",kMeerF:"x1vhx2qj",$$css:true}};

package/dist/components/chart-frame/chart-hover.js

@@ -0,0 +1,3 @@
+"use client";import{create,props}from"@stylexjs/stylex";import{useCallback,useRef,useState}from"react";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/motion.stylex";import{duration}from"../../styles/motion.stylex";import{space}from"../../styles/spacing.stylex";import{ChartTooltip}from"../chart-tooltip/chart-tooltip";// Hover for charts drawn without the chart engine: the hovered item stays at
+// full strength while the rest recede, and a tooltip follows the pointer.
+import{jsx as _jsx}from"react/jsx-runtime";const _temp={k87sOh:"x5mnzd7",kfzvcC:"x47corl",kVAEAm:"x10l6tqk",k3aq6I:"xsqj5wx",kzqmXN:"xezivpi",kY2c9j:"x1vjfegm","$$css":true};const styles={dim:{kSiTet:"xuzhngd",$$css:true},host:{kVAEAm:"x1n2onr6",$$css:true},mark:{kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x19991ni",$$css:true},tip:(x,y,flip)=>[_temp,{kLqNvP:x!=null?"x1lxsm33":x,$$css:true},{"--x-insetBlockStart":(val=>typeof val==="number"?val+"px":val!=null?val:undefined)(y),"--x-insetInlineStart":(val=>typeof val==="number"?val+"px":val!=null?val:undefined)(x),"--x-transform":(flip?`translate(calc(-100% - ${space["3"]}), -50%)`:`translate(${space["3"]}, -50%)`)!=null?flip?`translate(calc(-100% - ${space["3"]}), -50%)`:`translate(${space["3"]}, -50%)`:undefined}]};export function useChartHover(){const hostRef=useRef(null);const[hover,setHover]=useState(null);const[linked,setLinked]=useState(null);/** Pointer handlers for a mark: hovering shows its tooltip. */const markProps=useCallback((id,tip)=>({onPointerLeave:()=>setHover(null),onPointerMove:event=>{const box=hostRef.current?.getBoundingClientRect();if(!box){return;}const x=event.clientX-box.left;setHover({flip:x>box.width/2,id,tip,x,y:event.clientY-box.top});}}),[]);/** Pointer handlers for a legend tile or row: hovering highlights its mark. */const linkProps=useCallback(id=>({onPointerEnter:()=>setLinked(id),onPointerLeave:()=>setLinked(null)}),[]);const active=hover?.id??linked;/** StyleX styles for a mark or tile: it recedes while another item is active. */const fade=useCallback(id=>[styles.mark,active!==null&&active!==id&&styles.dim],[active]);return{active,fade,hostRef,hostStyle:styles.host,hover,linkProps,markProps};}export function ChartHoverTooltip({hover}){if(!hover?.tip){return null;}return/*#__PURE__*/_jsx("div",{"aria-hidden":"true",...props(styles.tip(hover.x,hover.y,hover.flip)),children:/*#__PURE__*/_jsx(ChartTooltip,{items:hover.tip.items,label:hover.tip.label})});}

package/dist/components/chart-frame/chart-loading.d.ts

@@ -0,0 +1,22 @@
+/** Whether a chart's data is still on its way. */
+export type ChartStatus = "loading" | "ready";
+/** The plot of a chart whose data replaced its loading state wipes in. */
+export declare const chartRevealStyles: Readonly<{
+    readonly reveal: Readonly<{
+        readonly animationDuration: import("@stylexjs/stylex").StyleXClassNameFor<"animationDuration", string>;
+        readonly animationFillMode: import("@stylexjs/stylex").StyleXClassNameFor<"animationFillMode", "both">;
+        readonly animationName: import("@stylexjs/stylex").StyleXClassNameFor<"animationName", string>;
+        readonly animationTimingFunction: import("@stylexjs/stylex").StyleXClassNameFor<"animationTimingFunction", string>;
+    }>;
+}>;
+/**
+ * True once data arrives after a loading state, so the plot can reveal. A
+ * chart that starts ready shows at once. State updates during render, so no
+ * effect is needed.
+ */
+export declare function useLoadingReveal(status: ChartStatus): boolean;
+/** A placeholder at the chart's own height while its data loads. */
+export declare function ChartLoading({ grid, height, }: {
+    grid?: boolean;
+    height: number;
+}): import("react").JSX.Element;

package/dist/components/chart-frame/chart-loading.js

@@ -0,0 +1,6 @@
+"use client";import{create,keyframes,props}from"@stylexjs/stylex";import{useState}from"react";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/motion.stylex";import{duration,easing}from"../../styles/motion.stylex";import{visuallyHiddenStyles}from"../visually-hidden/visually-hidden.styles";/** Whether a chart's data is still on its way. */import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const pulse="x1fmqiw-B";const wipe="xstdwuj-B";const wipeRtl="x1q2us3n-B";const fade="x18re5ia-B";const _temp={kZKoxP:"xyq6l7l",kVAEAm:"x1n2onr6","$$css":true};const styles={frame:height=>[_temp,{"--x-blockSize":(val=>typeof val==="number"?val+"px":val!=null?val:undefined)(height)}]};/** The plot of a chart whose data replaced its loading state wipes in. */export const chartRevealStyles={reveal:{k44tkh:"x1dselbi xof6966",kWV6AL:"x1u6ievf",kKVMdj:"x1ewgin x1j6fro6 xhnadnh",kyAemX:"xc8zlda",$$css:true}};/**
+ * True once data arrives after a loading state, so the plot can reveal. A
+ * chart that starts ready shows at once. State updates during render, so no
+ * effect is needed.
+ */export function useLoadingReveal(status){const[sawLoading,setSawLoading]=useState(status==="loading");if(status==="loading"&&!sawLoading){setSawLoading(true);}return sawLoading&&status==="ready";}// A gentle rise across the plot reads as a chart without implying values.
+const LINE="M0 30 C15 26 25 20 40 22 S65 12 80 14 S95 8 100 9";const AREA=`${LINE} L100 40 L0 40 Z`;const GRID_ROWS=[4,16,28,40];/** A placeholder at the chart's own height while its data loads. */export function ChartLoading({grid=true,height}){return/*#__PURE__*/_jsxs("div",{"data-slot":"chart-loading",role:"status",...props(styles.frame(height)),children:[/*#__PURE__*/_jsxs("svg",{"aria-hidden":"true",focusable:"false",preserveAspectRatio:"none",viewBox:"0 0 100 40",...{className:"x5yr21d x1lliihq xh8yej3"},children:[grid?GRID_ROWS.map(y=>/*#__PURE__*/_jsx("line",{strokeDasharray:"3 3",vectorEffect:"non-scaling-stroke",x1:"0",x2:"100",y1:y,y2:y,...{className:"x1uw5a2j xdb72bg"}},y)):null,/*#__PURE__*/_jsxs("g",{...{className:"x18hd8ej xa4qsjk x1tzfbnl x1qorlz2 x16mm3sk"},children:[/*#__PURE__*/_jsx("path",{d:AREA,...{className:"x1457vic x1azhm0p"}}),/*#__PURE__*/_jsx("path",{d:LINE,strokeWidth:2,vectorEffect:"non-scaling-stroke",...{className:"xbh8q5q x1uw5a2j x1bsw5e1"}})]})]}),/*#__PURE__*/_jsx("span",{...props(visuallyHiddenStyles.root),children:"Loading chart"})]});}

package/dist/components/chart-frame/ring-graphic.js

@@ -0,0 +1,5 @@
+import{create,props}from"@stylexjs/stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/motion.stylex";import{duration,easing}from"../../styles/motion.stylex";import{arcPath}from"./arc-path";import{chartColors}from"./chart-colors";/** Optional hover wiring from `useChartHover`. */import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";// The track is the ring's own hue, quiet enough that the fill reads first.
+const TRACK_OPACITY=0.18;/**
+ * Concentric rounded arcs, outermost first, each over a track of the same
+ * hue. `sweep` is how much of the circle a full track covers, in turns.
+ */export function RingGraphic({diameter,gap,hover,rings,stroke,sweep=1}){const center=diameter/2;return/*#__PURE__*/_jsx("svg",{"aria-hidden":"true",height:diameter,viewBox:`0 0 ${diameter} ${diameter}`,width:diameter,...{className:"x1lliihq x2lah0s x1rea2x4"},children:rings.map(({fraction,id,tone},index)=>{const radius=center-stroke/2-index*(stroke+gap);const color=chartColors[tone];const fill=Math.min(Math.max(fraction,0),1)*sweep;return/*#__PURE__*/_jsxs("g",{fill:"none",strokeLinecap:"round",strokeWidth:stroke,...hover?.markProps(id),...(hover?props(...hover.fade(id)):null),children:[/*#__PURE__*/_jsx("path",{d:arcPath(center,center,radius,0,sweep),stroke:color,strokeOpacity:TRACK_OPACITY}),/*#__PURE__*/_jsx("path",{d:arcPath(center,center,radius,0,sweep),opacity:fill>0?1:0,pathLength:sweep,stroke:color,strokeDasharray:`${fill} ${sweep+1}`,...{className:"x1e471i8 x115jf8 xvfbvx2 xvhdtae"}})]},id);})});}

package/dist/components/chart-legend/chart-legend.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import type { ChartSeriesTone } from "../chart-frame/chart-colors";
+export interface ChartLegendItem {
+    id: string;
+    label: ReactNode;
+    tone: ChartSeriesTone;
+    /** A total or current value shown after the label, such as "50,500". */
+    value?: ReactNode;
+}
+export type ChartLegendProps = Omit<Closed<ComponentPropsWithRef<"ul">>, "aria-label" | "children" | "data-slot" | "role"> & {
+    "aria-label": string;
+    items: readonly ChartLegendItem[];
+    /** tiles shows each item as a tile with its value below the label. */
+    variant?: ChartLegendVariant;
+};
+export type ChartLegendVariant = "inline" | "tiles";
+export declare function ChartLegend({ "aria-label": ariaLabel, items, ref: forwardedRef, variant, ...rest }: ChartLegendProps): import("react").JSX.Element;

package/dist/components/chart-legend/chart-legend.js

@@ -0,0 +1 @@
+import{props}from"@stylexjs/stylex";import{controlLabel}from"../../control-label";import{typeRoles}from"../../styles/typography.styles";import{chartLegendStyles,chartLegendSwatches}from"./chart-legend.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function protectProps(attributes){for(const name of["aria-label","children","className","data-slot","role","style"]){Reflect.deleteProperty(attributes,name);}}function assertUniqueIds(items){if(new Set(items.map(({id})=>id)).size!==items.length){throw new TypeError("ChartLegend item ids must be unique.");}}export function ChartLegend({"aria-label":ariaLabel,items,ref:forwardedRef,variant="inline",...rest}){if(typeof ariaLabel!=="string"||!ariaLabel.trim()){throw new TypeError("ChartLegend requires a non-empty aria-label.");}protectProps(rest);assertUniqueIds(items);const tiles=variant==="tiles";return/*#__PURE__*/_jsx("ul",{...rest,"aria-label":ariaLabel,"data-slot":"chart-legend",ref:forwardedRef,...props(chartLegendStyles.root,tiles?chartLegendStyles.tiles:chartLegendStyles.list,typeRoles.ui),children:items.map(({id,label,tone,value})=>/*#__PURE__*/_jsxs("li",{"data-slot":"chart-legend-item",...props(tiles?chartLegendStyles.tile:chartLegendStyles.item),children:[/*#__PURE__*/_jsxs("span",{...props(chartLegendStyles.name),children:[/*#__PURE__*/_jsx("span",{"aria-hidden":"true","data-slot":"chart-legend-swatch",...props(chartLegendStyles.swatch,tiles&&chartLegendStyles.tileSwatch,chartLegendSwatches[tone])}),controlLabel(label)]}),value===undefined?null:/*#__PURE__*/_jsx("span",{"data-slot":"chart-legend-value",...props(chartLegendStyles.value,tiles&&chartLegendStyles.tileValue),children:value})]},id))});}

package/dist/components/chart-legend/chart-legend.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/shape.stylex";import{shape}from"../../styles/shape.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontWeight}from"../../styles/typography.stylex";export const chartLegendSwatches={muted:{kWkggS:"x7txf9a",$$css:true},series1:{kWkggS:"xweh944",$$css:true},series2:{kWkggS:"x1tq06y8",$$css:true},series3:{kWkggS:"xmol5ik",$$css:true},series4:{kWkggS:"x1va1726",$$css:true},series5:{kWkggS:"x1pk9x1i",$$css:true},series6:{kWkggS:"x1mqk7k3",$$css:true}};export const chartLegendStyles={item:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kOIVth:"xp4ho6d",ks0D6T:"x193iq5w",k7Eaqz:"xeuugli",$$css:true},list:{k1C7PZ:"xejpt2e",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kB88ic:"xe8uvvx",kogj98:"x1ghz6dp",kmVPX3:"x1717udv",khm7nJ:"xfk3ji1",$$css:true},name:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kOIVth:"xp4ho6d",k7Eaqz:"xeuugli",$$css:true},root:{kMwMTN:"x125omll",k63SB2:"xuku2lm",k7Eaqz:"xeuugli",$$css:true},swatch:{kZKoxP:"xols6we",kaIpWk:"x1e6avla",kmuXW:"x2lah0s",kzqmXN:"x1v4s8kt",$$css:true},tile:{kWkggS:"xwn18cz",kaIpWk:"x42tf2m",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",k7Eaqz:"xeuugli",k8WAf4:"x391bbb",kg3NbH:"xy7odpl",$$css:true},tileSwatch:{kZKoxP:"x1kpxq89",kaIpWk:"x12oqio5",kzqmXN:"xsmyaan",$$css:true},tiles:{k1xSpc:"xrvj5dj",kOIVth:"xp4ho6d",kumcoG:"x1cmj9de",kB88ic:"xe8uvvx",kogj98:"x1ghz6dp",kmVPX3:"x1717udv",$$css:true},tileValue:{keTefX:"x1lziwak",$$css:true},value:{kMwMTN:"x14tvo57",kcqcaj:"xss6m8b",k63SB2:"xuku2lm",keTefX:"xi4je3c",$$css:true}};

package/dist/components/chart-tooltip/chart-tooltip.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import type { ChartSeriesTone } from "../chart-frame/chart-colors";
+export interface ChartTooltipItem {
+    id: string;
+    label: ReactNode;
+    tone: ChartSeriesTone;
+    value: ReactNode;
+}
+export type ChartTooltipProps = Omit<Closed<ComponentPropsWithRef<"div">>, "children" | "data-slot" | "role"> & {
+    items: readonly ChartTooltipItem[];
+    label?: ReactNode;
+};
+export declare function ChartTooltip({ items, label, ref: forwardedRef, ...rest }: ChartTooltipProps): import("react").JSX.Element | null;

package/dist/components/chart-tooltip/chart-tooltip.js

@@ -0,0 +1 @@
+import{props}from"@stylexjs/stylex";import{typeRoles}from"../../styles/typography.styles";import{chartTooltipStyles,chartTooltipSwatches}from"./chart-tooltip.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function protectProps(attributes){for(const name of["children","className","data-slot","role","style"]){Reflect.deleteProperty(attributes,name);}}function assertUniqueIds(items){if(new Set(items.map(({id})=>id)).size!==items.length){throw new TypeError("ChartTooltip item ids must be unique.");}}export function ChartTooltip({items,label,ref:forwardedRef,...rest}){protectProps(rest);if(items.length===0){return null;}assertUniqueIds(items);return/*#__PURE__*/_jsxs("div",{...rest,"data-slot":"chart-tooltip",ref:forwardedRef,...props(chartTooltipStyles.root,typeRoles.ui),children:[label===null||label===undefined?null:/*#__PURE__*/_jsx("p",{"data-slot":"chart-tooltip-label",...props(chartTooltipStyles.label),children:label}),/*#__PURE__*/_jsx("dl",{"data-slot":"chart-tooltip-rows",...props(chartTooltipStyles.rows),children:items.map(({id,label:itemLabel,tone,value})=>/*#__PURE__*/_jsxs("div",{"data-slot":"chart-tooltip-row",...props(chartTooltipStyles.row),children:[/*#__PURE__*/_jsxs("dt",{"data-slot":"chart-tooltip-term",...props(chartTooltipStyles.term),children:[/*#__PURE__*/_jsx("span",{"aria-hidden":"true","data-slot":"chart-tooltip-swatch",...props(chartTooltipStyles.swatch,chartTooltipSwatches[tone])}),itemLabel]}),/*#__PURE__*/_jsx("dd",{"data-slot":"chart-tooltip-value",...props(chartTooltipStyles.value),children:value})]},id))})]});}

package/dist/components/chart-tooltip/chart-tooltip.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/shadows.stylex";import{shadows}from"../../styles/shadows.stylex";import"../../styles/shape.stylex";import{shape}from"../../styles/shape.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontWeight}from"../../styles/typography.stylex";export const chartTooltipSwatches={muted:{kWkggS:"x7txf9a",$$css:true},series1:{kWkggS:"xweh944",$$css:true},series2:{kWkggS:"x1tq06y8",$$css:true},series3:{kWkggS:"xmol5ik",$$css:true},series4:{kWkggS:"x1va1726",$$css:true},series5:{kWkggS:"x1pk9x1i",$$css:true},series6:{kWkggS:"x1mqk7k3",$$css:true}};export const chartTooltipStyles={label:{k63SB2:"xlw70nr",kogj98:"x1ghz6dp",$$css:true},root:{kWkggS:"xui3q9s",kVAM5u:"x1l55r2k x155xxfk",kaIpWk:"x2b34ud",ksu8eU:"x1y0btm7",kMzoRj:"xmkeg23",kGVxlE:"x1mhlhek",kMwMTN:"x14tvo57",k1xSpc:"xrvj5dj",kOIVth:"xp4ho6d",k7Eaqz:"xeuugli",k8WAf4:"x391bbb",kg3NbH:"xy7odpl",$$css:true},row:{kGNEyG:"x1pha0wt",k1xSpc:"xrvj5dj",kOIVth:"xiw8qbs",kumcoG:"xju1xpo",$$css:true},rows:{k1xSpc:"xrvj5dj",kOIVth:"x13hh4mm",kogj98:"x1ghz6dp",$$css:true},swatch:{kZKoxP:"xols6we",kaIpWk:"x16rqkct",kmuXW:"x2lah0s",kzqmXN:"x1v4s8kt",$$css:true},term:{kGNEyG:"x6s0dn4",kMwMTN:"xbb0na1",k1xSpc:"x78zum5",kOIVth:"x13hh4mm",k7Eaqz:"xeuugli",$$css:true},value:{kcqcaj:"xss6m8b",k63SB2:"xuku2lm",kogj98:"x1ghz6dp",k9WMMc:"xp4054r",$$css:true}};

package/dist/components/checkbox/checkbox-card.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import { type CheckboxProps } from "./checkbox";
+type CheckboxCardControlProps = Pick<CheckboxProps, "aria-describedby" | "checked" | "defaultChecked" | "form" | "id" | "indeterminate" | "inputRef" | "onCheckedChange" | "readOnly" | "required" | "value" | "uncheckedValue"> & {
+    disabled?: boolean;
+    invalid?: boolean;
+    name?: CheckboxProps["name"];
+    ref?: CheckboxProps["ref"];
+    size?: CheckboxProps["size"];
+};
+export type CheckboxCardProps = CheckboxCardControlProps & {
+    description?: ReactNode;
+    error?: ReactNode;
+    label: ReactNode;
+};
+export declare function CheckboxCard({ description, disabled, error, invalid, label, name, ...checkboxProps }: CheckboxCardProps): import("react").JSX.Element;
+export {};

package/dist/components/checkbox/checkbox-card.js

@@ -0,0 +1 @@
+"use client";import{Field as BaseField}from"@base-ui/react/field";import{props}from"@stylexjs/stylex";import{useId}from"react";import{Field,FieldDescription,FieldError}from"../field/field";import{Checkbox}from"./checkbox";import{checkboxCardStyles}from"./checkbox-card.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function CheckboxCard({description,disabled=false,error,invalid=false,label,name,...checkboxProps}){const labelId=useId();return/*#__PURE__*/_jsxs(Field,{disabled:disabled,invalid:invalid,name:name,children:[/*#__PURE__*/_jsxs(BaseField.Label,{...props(checkboxCardStyles.label),children:[/*#__PURE__*/_jsx(Checkbox,{...checkboxProps,"aria-labelledby":labelId,disabled:disabled,invalid:invalid,name:name}),/*#__PURE__*/_jsxs("span",{...props(checkboxCardStyles.content),children:[/*#__PURE__*/_jsx("span",{id:labelId,children:label}),description!==undefined&&description!==null?/*#__PURE__*/_jsx(FieldDescription,{render:/*#__PURE__*/_jsx("span",{}),children:description}):null]})]}),error!==undefined&&error!==null?/*#__PURE__*/_jsx(FieldError,{match:true,children:error}):null]});}

package/dist/components/checkbox/checkbox-card.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/interaction.stylex";import{borderWidth}from"../../styles/interaction.stylex";import"../../styles/motion.stylex";import{duration,easing}from"../../styles/motion.stylex";import"../../styles/shadows.stylex";import{shadows}from"../../styles/shadows.stylex";import"../../styles/shape.stylex";import{shape}from"../../styles/shape.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontSize,fontWeight,lineHeight}from"../../styles/typography.stylex";export const checkboxCardStyles={content:{k1xSpc:"x78zum5",kCS8Yb:"x1t1x2f9",kXwgrk:"xdt5ytf",kzQI83:"x1iyjqo2",kmuXW:"xs83m0k",kOIVth:"x13hh4mm",k7Eaqz:"xeuugli",$$css:true},label:{kGNEyG:"x1cy8zhl",kWkggS:"x16ab64p x1cj2ltm x12cs2gl xq0dpb xxsa5ao x1o7hn9x",kVAM5u:"x8u5kam x1yc2vkv x11q7dsn x155xxfk",kaIpWk:"x1jw0md8",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"x1c0hry5 x1dh1zk2 xr81nds",kB7OPa:"x9f619",kMwMTN:"x14tvo57",kkrTdU:"x1r4mgf1 x1e9g8pd x1ypdohk",k1xSpc:"x78zum5",kGuDYH:"x12ama9c",k63SB2:"xuku2lm",kOIVth:"xp4ho6d",kLWn49:"x1rn0pvf",k8WAf4:"x58we3g",kg3NbH:"xy7odpl",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x11vqxbs",kAMwcw:"xvhdtae",kzqmXN:"xh8yej3",$$css:true}};

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,13 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { type ComponentPropsWithRef } from "react";
+type BaseCheckboxProps = ComponentPropsWithRef<typeof BaseCheckbox.Root>;
+export type CheckboxSize = "default" | "lg" | "sm";
+export type CheckboxProps = Omit<BaseCheckboxProps, "className" | "children" | "disabled" | "nativeButton" | "parent" | "ref" | "render" | "style"> & {
+    disabled?: boolean;
+    invalid?: boolean;
+    parent?: boolean;
+    ref?: BaseCheckboxProps["ref"];
+    size?: CheckboxSize;
+};
+export declare function Checkbox({ disabled, indeterminate, invalid, parent, readOnly, ref: forwardedRef, size, ...rest }: CheckboxProps): import("react").JSX.Element;
+export {};

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,5 @@
+"use client";import{Checkbox as BaseCheckbox}from"@base-ui/react/checkbox";import{props}from"@stylexjs/stylex";import{useCallback,useState}from"react";import{checkboxStyles}from"./checkbox.styles";import{jsx as _jsx}from"react/jsx-runtime";const sizeStyles={default:checkboxStyles.sizeDefault,lg:checkboxStyles.sizeLg,sm:checkboxStyles.sizeSm};// The marks are drawn here rather than taken from the icon pack: they are
+// part of the control, and pathLength="1" lets the stroke draw on exactly.
+// The stroke draws only when a check makes the mark appear, and once: a
+// mark that mounts checked, or shows again after being hidden, stays still.
+function CheckboxMark({state}){const[drawing,setDrawing]=useState(state.transitionStatus==="starting");const settle=useCallback(()=>setDrawing(false),[]);return/*#__PURE__*/_jsx("svg",{"aria-hidden":"true",fill:"none",focusable:"false",viewBox:"0 0 16 16",...props(checkboxStyles.icon),children:/*#__PURE__*/_jsx("path",{d:state.indeterminate?"M4 8h8":"M3.5 8.5l3 3l6 -6.5",onAnimationEnd:settle,pathLength:1,stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",...props(checkboxStyles.mark,drawing&&checkboxStyles.draw)})});}function renderIndicator(indicatorProps,state){return/*#__PURE__*/_jsx("span",{...indicatorProps,...props(checkboxStyles.indicator),children:/*#__PURE__*/_jsx(CheckboxMark,{state:state})});}export function Checkbox({disabled=false,indeterminate,invalid=false,parent=false,readOnly=false,ref:forwardedRef=undefined,size="default",...rest}){return/*#__PURE__*/_jsx(BaseCheckbox.Root,{...rest,"aria-invalid":invalid||undefined,disabled:disabled,indeterminate:indeterminate,parent:parent,readOnly:readOnly,ref:forwardedRef,...props(checkboxStyles.base,checkboxStyles.forcedColorsSelected,sizeStyles[size]),children:/*#__PURE__*/_jsx(BaseCheckbox.Indicator,{render:renderIndicator})});}

package/dist/components/checkbox/checkbox.styles.js

@@ -0,0 +1,3 @@
+import{create,keyframes}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors,fieldColors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/interaction.stylex";import{borderWidth,focus,focusMotion,focusOutline,opacity,scale}from"../../styles/interaction.stylex";import"../../styles/motion.stylex";import{duration,easing}from"../../styles/motion.stylex";import"../../styles/shape.stylex";import{shape}from"../../styles/shape.stylex";// The mark draws on along its stroke; pathLength="1" makes one unit the
+// whole path.
+const draw="xatw9dd-B";export const checkboxStyles={base:{kGNEyG:"x6s0dn4",k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kysU6D:"xjyslct",kWkggS:"x8g7iud x18f6qdl x1snul95 xfxevdu x1d32vvj x1p0w3uw x1ce2t89 xwn18cz",kVAM5u:"x3y5f5n xdgidc1 x19twv4c x4a1vbl x1m207df x73yop7 x1yn71q5 x1na5hby xiqzebz x2f8rew",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"xg3a7mk x1gnnqk1",kB7OPa:"x9f619",kMwMTN:"xa34c4n",kkrTdU:"x1j1ks5o xktmlxf x1ypdohk",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kjj79g:"xl56j7k",kLWn49:"x14ju556",kSiTet:"x1yporm9 x1hc1fzr",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x7jjmpn x1w1ofmy",k3XXqK:"x9v5kkp xzc55om",kMeerF:"xm9seqh x1vhx2qj",kVAEAm:"x1n2onr6",k3aq6I:"x17zh1uw xdxpzd0 xbca3r6 x1uqg51p",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x15jt4lr",kAMwcw:"xvhdtae",kfSwDN:"x87ps6o",kXLuUW:"xxymvpz",$$css:true},draw:{k44tkh:"xui4633 x5hsz1j",kWV6AL:"x1u6ievf",kKVMdj:"xg51wch",kyAemX:"x17ay8nm",$$css:true},forcedColorsSelected:{kpNTys:"x74uwrl",kZ8EXX:"x1gyuuhj",kCiEXB:"x16tai58",kgoQ3:"xi5nuuf",ktokS7:"x1irqi1z",kROSvg:"x1fr76g0",$$css:true},icon:{k1xSpc:"x1lliihq",kZKoxP:"x5yr21d",kVQacm:"x1rea2x4",kzqmXN:"xh8yej3",$$css:true},indicator:{kGNEyG:"x6s0dn4",k1xSpc:"x3nfvp2",kZKoxP:"x5yr21d",kjj79g:"xl56j7k",kLWn49:"x14ju556",kSiTet:"xiyypsa x1hw7zpd x1hc1fzr",kfzvcC:"x47corl",k3aq6I:"x1y6pqz4 x1m3318d x19uwh5a",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x6o7n8i",kAMwcw:"x1bsmr72",kzqmXN:"xh8yej3",$$css:true},mark:{k5rJSQ:"xnq1ati",kfJifR:"xvlca1e",$$css:true},sizeDefault:{kT0f0o:"x1f1r4uc",kVL7Gh:"x15mj9rk",kfmiAY:"xk2zld1",krdFHd:"xnkaj69",kZKoxP:"xaylbqo",kzqmXN:"xsk17dz",$$css:true},sizeLg:{kT0f0o:"x1f1r4uc",kVL7Gh:"x15mj9rk",kfmiAY:"xk2zld1",krdFHd:"xnkaj69",kZKoxP:"xmll18r",kzqmXN:"xwqq7k2",$$css:true},sizeSm:{kT0f0o:"x1f1r4uc",kVL7Gh:"x15mj9rk",kfmiAY:"xk2zld1",krdFHd:"xnkaj69",kZKoxP:"x1l36t39",kzqmXN:"xcdlrvm",$$css:true}};

package/dist/components/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,6 @@
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import type { ComponentPropsWithRef } from "react";
+type BaseCheckboxGroupProps = ComponentPropsWithRef<typeof BaseCheckboxGroup>;
+export type CheckboxGroupProps = Omit<BaseCheckboxGroupProps, "className" | "render" | "style">;
+export declare function CheckboxGroup({ children, ref: forwardedRef, ...rest }: CheckboxGroupProps): import("react").JSX.Element;
+export {};

package/dist/components/checkbox-group/checkbox-group.js

@@ -0,0 +1 @@
+"use client";import{CheckboxGroup as BaseCheckboxGroup}from"@base-ui/react/checkbox-group";import{props}from"@stylexjs/stylex";import{checkboxGroupStyles}from"./checkbox-group.styles";import{jsx as _jsx}from"react/jsx-runtime";export function CheckboxGroup({children,ref:forwardedRef=undefined,...rest}){return/*#__PURE__*/_jsx(BaseCheckboxGroup,{...rest,ref:forwardedRef,...props(checkboxGroupStyles.root),children:children});}

package/dist/components/checkbox-group/checkbox-group.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";export const checkboxGroupStyles={root:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xp4ho6d",kzqmXN:"xh8yej3",$$css:true}};

package/dist/components/citation/citation.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+export type CitationProps = Omit<Closed<ComponentPropsWithRef<"cite">>, "children" | "data-slot" | "role"> & {
+    children: ReactNode;
+};
+export declare function Citation({ children, ref: forwardedRef, ...rest }: CitationProps): import("react").JSX.Element;

package/dist/components/citation/citation.js

@@ -0,0 +1 @@
+import{props}from"@stylexjs/stylex";import{citationStyles}from"./citation.styles";import{jsx as _jsx}from"react/jsx-runtime";export function Citation({children,ref:forwardedRef,...rest}){for(const prop of["className","data-slot","role","style"]){Reflect.deleteProperty(rest,prop);}return/*#__PURE__*/_jsx("cite",{...rest,"data-slot":"citation",ref:forwardedRef,...props(citationStyles.root),children:children});}

package/dist/components/citation/citation.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";export const citationStyles={root:{kKX8nH:"x1k4tb9n",$$css:true}};

package/dist/components/code/code.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithRef } from "react";
+type NativeCodeProps = ComponentPropsWithRef<"code">;
+export type CodeProps = Omit<NativeCodeProps, "className" | "role" | "style">;
+export declare function Code({ children, ref: forwardedRef, ...rest }: CodeProps): import("react").JSX.Element;
+export {};

package/dist/components/code/code.js

@@ -0,0 +1 @@
+import{props}from"@stylexjs/stylex";import{codeStyles}from"./code.styles";import{jsx as _jsx}from"react/jsx-runtime";export function Code({children,ref:forwardedRef,...rest}){Reflect.deleteProperty(rest,"role");return/*#__PURE__*/_jsx("code",{...rest,"data-slot":"code",ref:forwardedRef,...props(codeStyles.base),children:children});}

package/dist/components/code/code.styles.js

@@ -0,0 +1,3 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/fonts.stylex";import{fonts}from"../../styles/fonts.stylex";import"../../styles/shape.stylex";import{shape}from"../../styles/shape.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";// Inline code follows the surrounding text: em size with matched x-height,
+// and the parent's line height so it never stretches the line box.
+export const codeStyles={base:{kWkggS:"x1o7hn9x",kaIpWk:"xvozwe9",kMwMTN:"x14tvo57",kMv6JI:"x18brtc5",kGuDYH:"xeb7xqv",kC21eY:"x2vx8kg",kLWn49:"x15bjb6t",kHjlTd:"xj0a0fe",kg3NbH:"xdbhxi8",$$css:true}};

package/dist/components/code-block/code-block-copy.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonProps } from "../button/button";
+export interface CodeBlockCopyProps {
+    code: string;
+    ref?: ButtonProps["ref"];
+}
+export declare function CodeBlockCopy({ code, ref: forwardedRef }: CodeBlockCopyProps): import("react").JSX.Element;

package/dist/components/code-block/code-block-copy.js

@@ -0,0 +1 @@
+"use client";import{props}from"@stylexjs/stylex";import{useCallback}from"react";import{IconCheck,IconCopy}from"../../icons";import{typeRoles}from"../../styles/typography.styles";import{useCopyToClipboard}from"../../use-copy-to-clipboard";import{Button}from"../button/button";import{visuallyHiddenStyles}from"../visually-hidden/visually-hidden.styles";import{codeBlockStyles}from"./code-block.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const statusMessages={copied:"Copied",failed:"Could not copy. Select the code to copy it.",idle:null};export function CodeBlockCopy({code,ref:forwardedRef}){const{copy,status}=useCopyToClipboard();const copyCode=useCallback(()=>copy(code),[code,copy]);return/*#__PURE__*/_jsxs("span",{"data-slot":"code-block-copy",...props(codeBlockStyles.copyControl),children:[/*#__PURE__*/_jsx(Button,{"aria-label":"Copy code",onClick:copyCode,ref:forwardedRef,size:"icon-xs",title:"Copy code",type:"button",variant:"ghost",children:status==="copied"?/*#__PURE__*/_jsx(IconCheck,{"aria-hidden":"true",size:"1em"}):/*#__PURE__*/_jsx(IconCopy,{"aria-hidden":"true",size:"1em"})}),/*#__PURE__*/_jsx("span",{"aria-live":"polite","data-slot":"code-block-copy-status",role:"status",...props(codeBlockStyles.copyStatus,typeRoles.ui,status!=="failed"&&visuallyHiddenStyles.root),children:statusMessages[status]})]});}