@mizen-labs/ui 0.0.0-stage → 0.1.0

package/dist/components/file-upload/file-upload-items.js

@@ -0,0 +1,5 @@
+import{props}from"@stylexjs/stylex";import{useCallback,useRef,useState}from"react";import{flushSync}from"react-dom";import{IconX}from"../../icons";import{assignRef}from"../../ref-utils";import{Progress}from"../progress/progress";import{fileUploadStyles}from"./file-upload.styles";import{FileUploadItemContext,stripForbidden,useFileUploadContext,useFileUploadItemContext}from"./file-upload-context";import{collapseItem,growItem,settleList}from"./file-upload-motion";import{formatFileSize}from"./file-upload-validation";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";export function FileUploadList({children,layout="rows",ref:forwardedRef,...rest}){const context=useFileUploadContext();const cleanProps=stripForbidden(rest);// Children attach before the list, so only later items animate in.
+const mergedRef=useCallback(node=>{settleList(node);return assignRef(forwardedRef,node);},[forwardedRef]);return/*#__PURE__*/_jsx("ul",{...cleanProps,"data-slot":"file-upload-list",ref:mergedRef,...props(fileUploadStyles.list,layout==="tiles"?fileUploadStyles.tiles:fileUploadStyles.rows),children:typeof children==="function"?context.files.map((file,index)=>children(file,index)):children??null});}export function FileUploadItem({children,file,index,layout="row",ref:forwardedRef,...rest}){const context=useFileUploadContext();const cleanProps=stripForbidden(rest);const mergedRef=useCallback(node=>{growItem(node);return assignRef(forwardedRef,node);},[forwardedRef]);return/*#__PURE__*/_jsx(FileUploadItemContext.Provider,{value:{file,index,layout},children:/*#__PURE__*/_jsx("li",{...cleanProps,"data-disabled":context.disabled?"":undefined,"data-layout":layout,"data-slot":"file-upload-item",ref:mergedRef,...props(fileUploadStyles.item,layout==="upload"&&fileUploadStyles.upload,layout==="tile"?fileUploadStyles.tile:fileUploadStyles.rowItem),children:/*#__PURE__*/_jsx("div",{"data-slot":"file-upload-item-content",...props(fileUploadStyles.itemContent,layout==="upload"&&fileUploadStyles.uploadContent,layout==="tile"&&fileUploadStyles.tileContent),children:children})})});}export function FileUploadItemName({children,ref:forwardedRef,...rest}){const itemContext=useFileUploadItemContext();const cleanProps=stripForbidden(rest);return/*#__PURE__*/_jsx("span",{...cleanProps,"data-slot":"file-upload-item-name",ref:forwardedRef,title:cleanProps.title??itemContext.file.name,...props(fileUploadStyles.name,itemContext.layout==="upload"&&fileUploadStyles.uploadName,itemContext.layout==="tile"&&fileUploadStyles.tileName),children:children??itemContext.file.name});}export function FileUploadItemSize({children,ref:forwardedRef,...rest}){const itemContext=useFileUploadItemContext();const cleanProps=stripForbidden(rest);return/*#__PURE__*/_jsx("span",{...cleanProps,"data-slot":"file-upload-item-size",ref:forwardedRef,...props(fileUploadStyles.size),children:children??formatFileSize(itemContext.file.size)});}// The check strokes on when an upload finishes, like the Checkbox mark. An
+// item that is already done when it renders shows the check drawn.
+function StatusCheck({status}){const[shown,setShown]=useState(status);const[drawing,setDrawing]=useState(false);const settle=useCallback(()=>setDrawing(false),[]);if(status!==shown){setShown(status);setDrawing(status==="success");}if(status!=="success"){return null;}return/*#__PURE__*/_jsx("svg",{"aria-hidden":"true",fill:"none",focusable:"false",viewBox:"0 0 16 16",...props(fileUploadStyles.statusCheck),children:/*#__PURE__*/_jsx("path",{d:"M3.5 8.5l3 3l6 -6.5",onAnimationEnd:settle,pathLength:1,stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",...props(fileUploadStyles.statusCheckMark,drawing&&fileUploadStyles.statusCheckDraw)})});}export function FileUploadItemStatus({children,ref:forwardedRef,status,...rest}){const cleanProps=stripForbidden(rest);return/*#__PURE__*/_jsxs("span",{...cleanProps,"aria-atomic":cleanProps["aria-atomic"]??true,"data-slot":"file-upload-item-status","data-status":status,ref:forwardedRef,role:cleanProps.role??"status",...props(fileUploadStyles.status),children:[/*#__PURE__*/_jsx(StatusCheck,{status:status}),children??status]});}export function FileUploadItemProgress({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,ref:forwardedRef,value,...rest}){const itemContext=useFileUploadItemContext();const cleanProps=stripForbidden(rest);const progressLabel=ariaLabel??(ariaLabelledBy?undefined:`${itemContext.file.name} progress`);return/*#__PURE__*/_jsx("div",{...cleanProps,"data-slot":"file-upload-item-progress",ref:forwardedRef,...props(fileUploadStyles.progress),children:/*#__PURE__*/_jsx(Progress,{"aria-label":progressLabel,"aria-labelledby":ariaLabelledBy,value:value??null})});}const defaultRemoveIcon=/*#__PURE__*/_jsx(IconX,{"aria-hidden":"true",focusable:"false",size:"1em"});function RemoveButtonContent({children,fileName,hasName}){const needsFallback=children!==null&&children!==undefined&&!hasName;return/*#__PURE__*/_jsxs(_Fragment,{children:[children??defaultRemoveIcon,needsFallback?/*#__PURE__*/_jsxs("span",{...props(fileUploadStyles.visuallyHidden),children:["Remove ",fileName]}):null]});}export function FileUploadItemRemove({"aria-label":ariaLabel,children,disabled=false,onClick,ref:forwardedRef,...rest}){const context=useFileUploadContext();const itemContext=useFileUploadItemContext();const isDisabled=context.disabled||disabled;// The row collapses before removal, so read the newest file list then.
+const removeRef=useRef(()=>undefined);const mergedRef=useCallback(node=>{removeRef.current=()=>context.removeFile(itemContext.index,itemContext.file);return assignRef(forwardedRef,node);},[context,forwardedRef,itemContext.file,itemContext.index]);const handleClick=useCallback(event=>{onClick?.(event);if(!(event.defaultPrevented||isDisabled)){collapseItem(event.currentTarget.closest("[data-slot='file-upload-item']"),()=>flushSync(()=>removeRef.current()));}},[isDisabled,onClick]);const cleanProps=stripForbidden(rest,["type"]);const hasCustomName=ariaLabel||cleanProps["aria-labelledby"];const defaultAriaLabel=(children===null||children===undefined)&&!hasCustomName?`Remove ${itemContext.file.name}`:undefined;return/*#__PURE__*/_jsx("button",{...cleanProps,"aria-label":ariaLabel??defaultAriaLabel,"data-slot":"file-upload-item-remove",disabled:isDisabled,onClick:handleClick,ref:mergedRef,type:"button",...props(fileUploadStyles.remove,itemContext.layout==="tile"&&fileUploadStyles.tileRemove),children:/*#__PURE__*/_jsx(RemoveButtonContent,{fileName:itemContext.file.name,hasName:Boolean(hasCustomName),children:children})});}

package/dist/components/file-upload/file-upload-motion.js

@@ -0,0 +1,6 @@
+// Rows grow open when a file arrives and collapse before it leaves, so the
+// list never jumps. Items already in the list on first render stay still.
+const OPTIONS={duration:240,easing:"cubic-bezier(0.16, 1, 0.3, 1)"};const settledLists=new WeakSet();const seenItems=new WeakSet();const leavingItems=new WeakSet();// Skips motion when the user asks for less, or the DOM can't animate (jsdom).
+function stillMotion(node){return typeof node.animate!=="function"||window.matchMedia?.("(prefers-reduced-motion: reduce)").matches!==false;}// The closed frame also takes back the list gap beside the item.
+function closedGap(node,isTile){const parent=node.parentElement;const gap=parent?getComputedStyle(parent)[isTile?"columnGap":"rowGap"]:"0px";const side=node.previousElementSibling?"Start":"End";const margin=isTile?`marginInline${side}`:`marginBlock${side}`;return gap==="normal"?{}:{[margin]:`-${gap}`};}function sizeFrames(node){const style=getComputedStyle(node);const isTile=node.dataset.layout==="tile";const open=isTile?{width:style.width}:{height:style.height,paddingBlockEnd:style.paddingBlockEnd,paddingBlockStart:style.paddingBlockStart};const closed=isTile?{width:"0px"}:{height:"0px",paddingBlockEnd:"0px",paddingBlockStart:"0px"};return[{...closed,...closedGap(node,isTile),opacity:0,overflow:"hidden"},{...open,opacity:1,overflow:"hidden"}];}export function settleList(node){if(node){settledLists.add(node);}}export function growItem(node){if(!node||seenItems.has(node)){return;}seenItems.add(node);const list=node.parentElement;if(list&&settledLists.has(list)&&!stillMotion(node)){node.animate(sizeFrames(node),OPTIONS);}}// Collapses the item, then removes it. A removal the app cancels opens it again.
+export function collapseItem(node,remove){if(!node||stillMotion(node)){remove();return;}if(leavingItems.has(node)){return;}leavingItems.add(node);const animation=node.animate(sizeFrames(node).reverse(),{...OPTIONS,fill:"forwards"});animation.onfinish=()=>{remove();leavingItems.delete(node);animation.cancel();};}

package/dist/components/file-upload/file-upload-validation.d.ts

@@ -0,0 +1,18 @@
+export type FileRejectionCode = "file-invalid-type" | "file-too-large" | "too-many-files";
+export interface FileRejection {
+    readonly code: FileRejectionCode;
+    readonly file: File;
+}
+export interface ValidationOptions {
+    accept?: string;
+    currentFiles?: readonly File[];
+    maxFiles?: number;
+    maxSize?: number;
+}
+export interface ValidationResult {
+    accepted: File[];
+    rejected: FileRejection[];
+}
+export declare function formatFileSize(bytes: number): string;
+export declare function validateFiles(files: readonly File[], options?: ValidationOptions): ValidationResult;
+export declare function cloneRejections(rejections: readonly FileRejection[]): FileRejection[];

package/dist/components/file-upload/file-upload-validation.js

@@ -0,0 +1 @@
+export function formatFileSize(bytes){if(bytes<1024){return`${bytes} B`;}const kb=1024;const mb=kb*1024;if(bytes<mb){return`${Number((bytes/kb).toFixed(1))} KB`;}return`${Number((bytes/mb).toFixed(1))} MB`;}function matchesPattern(name,type,pattern){if(pattern.startsWith(".")){return name.endsWith(pattern);}if(pattern.endsWith("/*")){return type.startsWith(pattern.slice(0,-1));}return type===pattern;}function matchesAccept(file,accept){const patterns=accept.split(",").map(pattern=>pattern.trim().toLowerCase()).filter(pattern=>pattern.length>0);if(patterns.length===0){return true;}const name=file.name.toLowerCase();const type=file.type.toLowerCase();return patterns.some(pattern=>matchesPattern(name,type,pattern));}function computeAvailableSlots(maxFiles,currentCount=0){if(maxFiles===undefined){return Number.POSITIVE_INFINITY;}if(!Number.isSafeInteger(maxFiles)||maxFiles<=0){return 0;}if(maxFiles===1){return 1;}return Math.max(0,maxFiles-currentCount);}function checkFileRejection(file,accept,maxSize={kind:"unlimited"},availableSlots=Number.POSITIVE_INFINITY){if(accept&&!matchesAccept(file,accept)){return"file-invalid-type";}if(maxSize.kind==="invalid"||maxSize.kind==="valid"&&file.size>maxSize.limit){return"file-too-large";}if(availableSlots<=0){return"too-many-files";}return null;}function computeEffectiveMaxSize(maxSize){if(maxSize===undefined){return{kind:"unlimited"};}if(!Number.isSafeInteger(maxSize)||maxSize<0){return{kind:"invalid"};}return{kind:"valid",limit:maxSize};}export function validateFiles(files,options={}){const{accept,currentFiles=[],maxFiles,maxSize}=options;const effectiveMaxSize=computeEffectiveMaxSize(maxSize);const accepted=[];const rejected=[];let availableSlots=computeAvailableSlots(maxFiles,currentFiles.length);for(const file of files){const rejection=checkFileRejection(file,accept,effectiveMaxSize,availableSlots);if(rejection){rejected.push({code:rejection,file});}else{accepted.push(file);availableSlots-=1;}}return{accepted,rejected};}export function cloneRejections(rejections){return rejections.map(r=>({code:r.code,file:r.file}));}

package/dist/components/file-upload/file-upload.d.ts

@@ -0,0 +1,19 @@
+import type { FileUploadProps } from "./file-upload.types";
+import { FileUploadDropzone as BaseDropzone, FileUploadInput as BaseInput, FileUploadTrigger as BaseTrigger } from "./file-upload-controls";
+import { FileUploadItemPreview as BaseItemPreview } from "./file-upload-item-preview";
+import { FileUploadItem as BaseItem, FileUploadItemName as BaseItemName, FileUploadItemProgress as BaseItemProgress, FileUploadItemRemove as BaseItemRemove, FileUploadItemSize as BaseItemSize, FileUploadItemStatus as BaseItemStatus, FileUploadList as BaseList } from "./file-upload-items";
+export declare function FileUpload({ accept, children, defaultValue, disabled, maxFiles, maxSize, name, onBlur, onFileReject, onValueChange, ref: forwardedRef, value, ...rest }: FileUploadProps): import("react").JSX.Element;
+export declare const FileUploadDropzone: typeof BaseDropzone;
+export declare const FileUploadTrigger: typeof BaseTrigger;
+export declare const FileUploadInput: typeof BaseInput;
+export declare const FileUploadList: typeof BaseList;
+export declare const FileUploadItem: typeof BaseItem;
+export type { FileUploadItemPreviewProps } from "./file-upload-item-preview";
+export declare const FileUploadItemPreview: typeof BaseItemPreview;
+export declare const FileUploadItemName: typeof BaseItemName;
+export declare const FileUploadItemSize: typeof BaseItemSize;
+export declare const FileUploadItemStatus: typeof BaseItemStatus;
+export declare const FileUploadItemProgress: typeof BaseItemProgress;
+export declare const FileUploadItemRemove: typeof BaseItemRemove;
+export type * from "./file-upload.types";
+export type { FileRejection, FileRejectionCode, } from "./file-upload-validation";

package/dist/components/file-upload/file-upload.js

@@ -0,0 +1,2 @@
+"use client";import{props as stylexProps}from"@stylexjs/stylex";import{useCallback,useRef,useState}from"react";import{assignRef}from"../../ref-utils";import{fileUploadStyles}from"./file-upload.styles";import{attachFormResetListener,computeNextFiles,createChangeDetails,FileUploadContext,restoreFocusAfterRemoval,stripForbidden,syncInputFiles}from"./file-upload-context";import{FileUploadDropzone as BaseDropzone,FileUploadInput as BaseInput,FileUploadTrigger as BaseTrigger}from"./file-upload-controls";import{FileUploadItemPreview as BaseItemPreview}from"./file-upload-item-preview";import{FileUploadItem as BaseItem,FileUploadItemName as BaseItemName,FileUploadItemProgress as BaseItemProgress,FileUploadItemRemove as BaseItemRemove,FileUploadItemSize as BaseItemSize,FileUploadItemStatus as BaseItemStatus,FileUploadList as BaseList}from"./file-upload-items";import{cloneRejections,validateFiles}from"./file-upload-validation";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const NO_FILES=[];export function FileUpload({accept,children,defaultValue,disabled=false,maxFiles=1,maxSize,name,onBlur,onFileReject,onValueChange,ref:forwardedRef,value,...rest}){// Controlled or not is fixed at mount, like a native input.
+const[isControlled]=useState(value!==undefined);const initialFiles=defaultValue?[...defaultValue]:[];const[uncontrolledFiles,setUncontrolledFiles]=useState(initialFiles);const[message,setMessage]=useState("");const[revision,setRevision]=useState(0);const announce=m=>{setMessage(m);setRevision(r=>r+1);};const currentFiles=isControlled?value??NO_FILES:uncontrolledFiles;const initialDefaultRef=useRef(initialFiles);const controlledSnapshotRef=useRef({files:isControlled?value??NO_FILES:NO_FILES,revision:0});const rootRef=useRef(null),inputRef=useRef(null),triggerRef=useRef(null);const setInputCallbackRef=useCallback(node=>{inputRef.current=node;if(!node){return;}if(isControlled){controlledSnapshotRef.current.files=currentFiles;controlledSnapshotRef.current.revision+=1;}syncInputFiles(node,currentFiles);const removeResetListener=attachFormResetListener(node,()=>{const target=isControlled?value??NO_FILES:initialDefaultRef.current;if(!isControlled){setUncontrolledFiles(target);}syncInputFiles(node,target);});return()=>{inputRef.current=null;removeResetListener?.();};},[currentFiles,isControlled,value]);const commitTransition=(nextFiles,details,action)=>{const snap=controlledSnapshotRef.current;const startRevision=snap.revision;const committed=isControlled?snap.files:currentFiles;syncInputFiles(inputRef.current,nextFiles);let succeeded=false;try{action?.();succeeded=!details.isCanceled;}finally{if(isControlled){syncInputFiles(inputRef.current,snap.revision>startRevision?snap.files:committed);}else if(succeeded){setUncontrolledFiles(nextFiles);}else{syncInputFiles(inputRef.current,committed);}}};const processIncomingFiles=(incoming,source)=>{const{accepted,rejected}=validateFiles(incoming,{accept,currentFiles,maxFiles,maxSize});const nextFiles=computeNextFiles(currentFiles,accepted,maxFiles);const details=createChangeDetails({accepted:[...accepted],reason:source,rejected:cloneRejections(rejected)});const msg=rejected.length?`Rejected ${rejected.map(r=>r.file.name).join(", ")}`:"";commitTransition(nextFiles,details,()=>{if(msg){onFileReject?.(cloneRejections(rejected));announce(msg);}onValueChange?.([...nextFiles],details);});};const handleInputChange=event=>{const files=Array.from(event.target.files??[]);if(files.length>0){processIncomingFiles(files,"picker");}};const removeFile=(removeIndex,expectedFile)=>{const file=currentFiles[removeIndex];if(!file||expectedFile&&file!==expectedFile){return;}const nextFiles=currentFiles.filter((_,index)=>index!==removeIndex);const details=createChangeDetails({file,index:removeIndex,reason:"remove"});commitTransition(nextFiles,details,()=>{onValueChange?.([...nextFiles],details);});if(!details.isCanceled){announce(`Removed ${file.name}`);queueMicrotask?.(()=>restoreFocusAfterRemoval(rootRef.current,removeIndex,triggerRef.current));}};const mergedRootRef=useCallback(node=>{rootRef.current=node;const consumerCleanup=assignRef(forwardedRef,node);return()=>{rootRef.current=null;consumerCleanup?.();};},[forwardedRef]);const handleBlur=useCallback(event=>{const target=event.relatedTarget;if(target instanceof Node&&rootRef.current?.contains(target)){return;}onBlur?.(event);},[onBlur]);const rootProps={...stripForbidden(rest),onBlur:handleBlur};return/*#__PURE__*/_jsx(FileUploadContext,{value:{accept,disabled,files:currentFiles,handleDropFiles:f=>processIncomingFiles(f,"drop"),handleInputChange,inputRef,maxFiles,name,onBlur,openPicker:()=>inputRef.current?.click(),removeFile,rootRef,setInputCallbackRef,triggerRef},children:/*#__PURE__*/_jsxs("div",{...rootProps,"data-disabled":disabled?"":undefined,"data-slot":"file-upload",ref:mergedRootRef,...stylexProps(fileUploadStyles.root),children:[children,/*#__PURE__*/_jsx("div",{"aria-atomic":"true","aria-live":"polite",...stylexProps(fileUploadStyles.liveRegion),children:message?/*#__PURE__*/_jsx("span",{children:message},revision):null})]})});}export const FileUploadDropzone=BaseDropzone;export const FileUploadTrigger=BaseTrigger;export const FileUploadInput=BaseInput;export const FileUploadList=BaseList;export const FileUploadItem=BaseItem;export const FileUploadItemPreview=BaseItemPreview;export const FileUploadItemName=BaseItemName;export const FileUploadItemSize=BaseItemSize;export const FileUploadItemStatus=BaseItemStatus;export const FileUploadItemProgress=BaseItemProgress;export const FileUploadItemRemove=BaseItemRemove;

package/dist/components/file-upload/file-upload.styles.js

@@ -0,0 +1,2 @@
+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/dimensions.stylex";import{controlSize}from"../../styles/dimensions.stylex";import"../../styles/interaction.stylex";import{borderWidth,focus,focusMotion,focusOutline,opacity}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";const draw="xatw9dd-B";// One dash period is 11px; two periods per loop keeps the march seamless.
+const march="xn80elx-B";export const fileUploadStyles={dropzone:{kGNEyG:"x6s0dn4",k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kWkggS:"x1uyda3a xwghqzh xjbqb8w",kVAM5u:"x3b2qip x1oraeyi x13szql6 x52v64k x7pd7o1",kaIpWk:"x1jw0md8",ksu8eU:"xbsl7fq",kMzoRj:"x1cdonsl",kB7OPa:"x9f619",kMwMTN:"x14tvo57",kkrTdU:"x57cc4 xt0e3qv",k1xSpc:"x78zum5",kXwgrk:"x1q0g3np",kwnvtZ:"x1a02dak",kOIVth:"xiw8qbs",kjj79g:"x1nhvcw1",kSiTet:"x1upygmc x1hc1fzr",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1w1ofmy",k3XXqK:"xzc55om",kMeerF:"x1vhx2qj",k8WAf4:"x58we3g",kg3NbH:"xaqi9fd",kVAEAm:"x1n2onr6",k9WMMc:"x1yc453h",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"xv5ivc1",kAMwcw:"xvhdtae",kzqmXN:"xh8yej3",$$css:true},dropzoneEdge:{k44tkh:"x1m9vv7p",ko0y90:"xa4qsjk",kKVMdj:"x1tzfbnl x1ptevtc",kyAemX:"x1esw782",kZKoxP:"x1332wxa",kDwRjp:"xbh8q5q",kzqmXN:"xqfe7b2",k87sOh:"x1em35hw",kLqNvP:"xu0g1v3",kSiTet:"xw5uauq xg01cxk",kfzvcC:"x47corl",kVAEAm:"x10l6tqk",kjVXCG:"x1tsy410",k5rJSQ:"x1h6d93d",kfJifR:"xt0szss",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x19991ni",$$css:true},hiddenInput:{k1xSpc:"x1s85apg",$$css:true},item:{kGNEyG:"x6s0dn4",kWkggS:"xxsa5ao x1snul95 xwn18cz",kVAM5u:"x1l2x7e3 x155xxfk",kaIpWk:"x1jw0md8",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"xr81nds",kB7OPa:"x9f619",k1xSpc:"x78zum5",kOIVth:"xp4ho6d",k8WAf4:"x58we3g",kg3NbH:"xy7odpl",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x11vqxbs",kzqmXN:"xh8yej3",$$css:true},itemContent:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kzQI83:"x1iyjqo2",kOIVth:"x13hh4mm",k7Eaqz:"xeuugli",$$css:true},list:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xp4ho6d",kB88ic:"xe8uvvx",kogj98:"xvemdqa",kmVPX3:"xkif0i3",kzqmXN:"xh8yej3",$$css:true},liveRegion:{kMcinP:"xeh89do",kZKoxP:"xjm9jq1",kogj98:"xkdpibf",kVQacm:"xb3r6kr",kmVPX3:"xkif0i3",kVAEAm:"x10l6tqk",khDVqt:"xuxw1ft",kzqmXN:"x1i1rx1s",$$css:true},name:{kMwMTN:"x14tvo57",kGuDYH:"xlh8hku",k63SB2:"xuku2lm",kLWn49:"x2xzzt7",k7Eaqz:"xeuugli",kVQacm:"xb3r6kr",kg5iWk:"xlyipyv",khDVqt:"xuxw1ft",$$css:true},preview:{kGNEyG:"x1cy8zhl",kaIpWk:"x1pjcqnp",kB7OPa:"x9f619",kMwMTN:"xdnyjpo",k1xSpc:"x78zum5",kZKoxP:"x181ylwm",kjj79g:"x1nhvcw1",kVQacm:"xb3r6kr",kmVPX3:"x1btfdvn",kzqmXN:"xh8yej3",$$css:true},previewFull:{kZKoxP:"x5yr21d",kmVPX3:"x1717udv",$$css:true},previewImage:{kZKoxP:"x5yr21d",kVIFPx:"xl1xv1r",kzqmXN:"xh8yej3",$$css:true},previewRow:{kGNEyG:"x6s0dn4",kWkggS:"x16d8uok",kaIpWk:"x2b34ud",kmuXW:"x2lah0s",kZKoxP:"xwaiz5r",kjj79g:"xl56j7k",kmVPX3:"x1717udv",kzqmXN:"xvm51jw",$$css:true},previewUpload:{kGNEyG:"x6s0dn4",kWkggS:"x16d8uok",kaIpWk:"x2b34ud",kmuXW:"x2lah0s",kZKoxP:"xwaiz5r",kjj79g:"xl56j7k",kmVPX3:"x1717udv",kzqmXN:"xvm51jw",$$css:true},progress:{kzqmXN:"xh8yej3",$$css:true},remove:{kGNEyG:"x6s0dn4",k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kWkggS:"x1j0xaqr x1oqui1x xxsa5ao xjbqb8w",kVAM5u:"x9r1u3d",kaIpWk:"x2b34ud",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kMwMTN:"x1wh1csg x17xg5fq xbb0na1",kkrTdU:"x1s07b3s x1ypdohk",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kZKoxP:"x126keg0 x15ja3qx",kjj79g:"xl56j7k",kLWn49:"x1wrb330",kSiTet:"x1pymsji x1hc1fzr",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1w1ofmy",k3XXqK:"xzc55om",kMeerF:"x1vhx2qj",kmVPX3:"xkif0i3",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"xce0r4z",kfSwDN:"x87ps6o",kzqmXN:"xsarbd5 xdr7e86",$$css:true},root:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xiw8qbs",kzqmXN:"xh8yej3",$$css:true},rowItem:{kWkggS:"xrhsbah",kt9PQ7:"x1t1lzn6 x13k63ub",kVAM5u:"x155xxfk",kaIpWk:"x2u8bby",kMzoRj:"xc342km",kGVxlE:"x1gnnqk1",$$css:true},rows:{kVAM5u:"x155xxfk",kaIpWk:"x1jw0md8",ksu8eU:"x1y0btm7",kMzoRj:"x68orb2 x1cdonsl",kOIVth:"xxhr3t",kVQacm:"xb3r6kr",$$css:true},size:{kMwMTN:"xbb0na1",kGuDYH:"x1ws78te",kcqcaj:"xss6m8b",k63SB2:"x1lo1l87",kLWn49:"x76y1r9",khDVqt:"xuxw1ft",$$css:true},status:{kGNEyG:"x6s0dn4",kMwMTN:"xjh2v56 x1dmhwm9 x64ed0u xbb0na1",k1xSpc:"x3nfvp2",kGuDYH:"x1ws78te",k63SB2:"xuku2lm",kOIVth:"x13hh4mm",kLWn49:"x76y1r9",khDVqt:"xuxw1ft",$$css:true},statusCheck:{kmuXW:"x2lah0s",kZKoxP:"x1derqce",kVQacm:"x1rea2x4",kzqmXN:"xnqnt2z",$$css:true},statusCheckDraw:{k44tkh:"xui4633 x1i47e9z",kWV6AL:"x1u6ievf",kKVMdj:"xg51wch",kyAemX:"x17ay8nm",$$css:true},statusCheckMark:{k5rJSQ:"xnq1ati",kfJifR:"xvlca1e",$$css:true},tile:{kaIpWk:"x1jw0md8",kGVxlE:"x1gnnqk1",kmuXW:"x2lah0s",kZKoxP:"x1q7yecz",k8WAf4:"xt970qd",kg3NbH:"xnjsko4",kVAEAm:"x1n2onr6",kzqmXN:"x1q22l7i",$$css:true},tileContent:{kaIpWk:"x1hvvpii",kOIVth:"xxhr3t",kZKoxP:"x5yr21d",kVAEAm:"x1n2onr6",$$css:true},tileName:{krVfgx:"x8snvin",kz4h6p:"xiciryn x1gj8qfm",kMwMTN:"xbb0na1",kGuDYH:"x1ws78te",kkqhue:"x1dxu21k",kVAEAm:"x10l6tqk",$$css:true},tileRemove:{kWkggS:"xr60ue3 x1ylkqan",kaIpWk:"x10hpsqq",kGVxlE:"x1gnnqk1",kGuDYH:"xlh8hku",k87sOh:"x1v5m63d",kt4wiu:"x1vld3ni",kVAEAm:"x10l6tqk",kY2c9j:"x1vjfegm",$$css:true},tiles:{kXwgrk:"x1q0g3np",kOIVth:"xp4ho6d",kXHlph:"xw2csxc",k8WAf4:"x1lmimt7",kg3NbH:"xdbhxi8",$$css:true},upload:{kWkggS:"x1snul95 xwn18cz",kaIpWk:"x1jw0md8",kGVxlE:"x1gnnqk1",kkrTdU:"x1j1ks5o x1sqbtui",k8WAf4:"x58we3g",kg3NbH:"xy7odpl",kVAEAm:"x1n2onr6",$$css:true},uploadContent:{kGNEyG:"x6s0dn4",kOIVth:"xiw8qbs",k9WMMc:"x1yc453h",$$css:true},uploadName:{ks0D6T:"x193iq5w",kHjlTd:"xj0a0fe",khDVqt:"xeaf4i8",$$css:true},visuallyHidden:{kz4h6p:"x1hyvwdk",kZKoxP:"xjm9jq1",kVQacm:"xb3r6kr",kVAEAm:"x10l6tqk",khDVqt:"xuxw1ft",kzqmXN:"x1i1rx1s",$$css:true}};

package/dist/components/file-upload/file-upload.types.d.ts

@@ -0,0 +1,87 @@
+import type { ComponentPropsWithRef, FocusEvent, ReactNode, Ref } from "react";
+import type { FileRejection } from "./file-upload-validation";
+export type FileUploadStatus = "error" | "pending" | "success" | "uploading";
+export type FileUploadChangeDetails = {
+    readonly accepted: readonly File[];
+    readonly cancel: () => void;
+    readonly isCanceled: boolean;
+    readonly reason: "picker";
+    readonly rejected: readonly FileRejection[];
+} | {
+    readonly accepted: readonly File[];
+    readonly cancel: () => void;
+    readonly isCanceled: boolean;
+    readonly reason: "drop";
+    readonly rejected: readonly FileRejection[];
+} | {
+    readonly cancel: () => void;
+    readonly file: File;
+    readonly index: number;
+    readonly isCanceled: boolean;
+    readonly reason: "remove";
+};
+declare abstract class BivariantWrapper<T extends (...args: never[]) => unknown> {
+    abstract bivariance(...args: Parameters<T>): ReturnType<T>;
+}
+type BivariantCallback<T extends (...args: never[]) => unknown> = BivariantWrapper<T>["bivariance"];
+export type FileUploadProps = Omit<ComponentPropsWithRef<"div">, "className" | "data-slot" | "defaultValue" | "multiple" | "required" | "style" | "value"> & {
+    accept?: string;
+    children?: ReactNode;
+    defaultValue?: readonly File[];
+    disabled?: boolean;
+    maxFiles?: number;
+    maxSize?: number;
+    name?: string;
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    onFileReject?: BivariantCallback<(rejections: readonly FileRejection[]) => void>;
+    onValueChange?: BivariantCallback<(files: readonly File[], details: FileUploadChangeDetails) => void>;
+    ref?: Ref<HTMLDivElement>;
+    value?: readonly File[];
+};
+export interface FileUploadDropzoneState {
+    /** Files under the pointer; 0 when the browser hides the count. */
+    dragCount: number;
+    isDragging: boolean;
+}
+export type FileUploadDropzoneProps = Omit<ComponentPropsWithRef<"div">, "children" | "className" | "data-slot" | "style"> & {
+    children?: ReactNode | ((state: FileUploadDropzoneState) => ReactNode);
+    disabled?: boolean;
+    ref?: Ref<HTMLDivElement>;
+};
+export type FileUploadTriggerProps = Omit<ComponentPropsWithRef<"button">, "className" | "data-slot" | "style" | "type"> & {
+    disabled?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+};
+export type FileUploadInputProps = Omit<ComponentPropsWithRef<"input">, "accept" | "children" | "className" | "data-slot" | "defaultValue" | "disabled" | "multiple" | "name" | "onChange" | "required" | "style" | "type" | "value"> & {
+    ref?: Ref<HTMLInputElement>;
+};
+export type FileUploadListProps = Omit<ComponentPropsWithRef<"ul">, "children" | "className" | "data-slot" | "style"> & {
+    children?: ReactNode | ((file: File, index: number) => ReactNode);
+    layout?: "rows" | "tiles";
+    ref?: Ref<HTMLUListElement>;
+};
+export type FileUploadItemProps = Omit<ComponentPropsWithRef<"li">, "className" | "data-slot" | "style"> & {
+    file: File;
+    index: number;
+    layout?: "row" | "tile" | "upload";
+    ref?: Ref<HTMLLIElement>;
+};
+export type FileUploadItemNameProps = Omit<ComponentPropsWithRef<"span">, "className" | "data-slot" | "style"> & {
+    ref?: Ref<HTMLSpanElement>;
+};
+export type FileUploadItemSizeProps = Omit<ComponentPropsWithRef<"span">, "className" | "data-slot" | "style"> & {
+    ref?: Ref<HTMLSpanElement>;
+};
+export type FileUploadItemStatusProps = Omit<ComponentPropsWithRef<"span">, "className" | "data-slot" | "style"> & {
+    ref?: Ref<HTMLSpanElement>;
+    status?: FileUploadStatus;
+};
+export type FileUploadItemProgressProps = Omit<ComponentPropsWithRef<"div">, "children" | "className" | "data-slot" | "style"> & {
+    ref?: Ref<HTMLDivElement>;
+    value?: number | null;
+};
+export type FileUploadItemRemoveProps = Omit<ComponentPropsWithRef<"button">, "className" | "data-slot" | "style" | "type"> & {
+    disabled?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+};
+export {};

package/dist/components/file-upload/file-upload.types.js

@@ -0,0 +1 @@
+class BivariantWrapper{}export{};

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

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithRef } from "react";
+export type FrameProps = Omit<ComponentPropsWithRef<"div">, "className" | "style">;
+export type FramePanelProps = Omit<ComponentPropsWithRef<"div">, "className" | "style">;
+export type FrameHeaderProps = Omit<ComponentPropsWithRef<"header">, "className" | "style">;
+export type FrameTitleProps = Omit<ComponentPropsWithRef<"div">, "className" | "style">;
+export type FrameDescriptionProps = Omit<ComponentPropsWithRef<"div">, "className" | "style">;
+export type FrameFooterProps = Omit<ComponentPropsWithRef<"footer">, "className" | "style">;
+export declare function Frame({ children, ref: forwardedRef, ...rest }: FrameProps): import("react").JSX.Element;
+export declare function FramePanel({ children, ref: forwardedRef, ...rest }: FramePanelProps): import("react").JSX.Element;
+export declare function FrameHeader({ children, ref: forwardedRef, ...rest }: FrameHeaderProps): import("react").JSX.Element;
+export declare function FrameTitle({ children, ref: forwardedRef, ...rest }: FrameTitleProps): import("react").JSX.Element;
+export declare function FrameDescription({ children, ref: forwardedRef, ...rest }: FrameDescriptionProps): import("react").JSX.Element;
+export declare function FrameFooter({ children, ref: forwardedRef, ...rest }: FrameFooterProps): import("react").JSX.Element;

package/dist/components/frame/frame.js

@@ -0,0 +1 @@
+import{props}from"@stylexjs/stylex";import{frameStyles}from"./frame.styles";import{jsx as _jsx}from"react/jsx-runtime";export function Frame({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"frame",ref:forwardedRef,...props(frameStyles.frame),children:children});}export function FramePanel({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"frame-panel",ref:forwardedRef,...props(frameStyles.panel),children:children});}export function FrameHeader({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("header",{...rest,"data-slot":"frame-panel-header",ref:forwardedRef,...props(frameStyles.header),children:children});}export function FrameTitle({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"frame-panel-title",ref:forwardedRef,...props(frameStyles.title),children:children});}export function FrameDescription({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"frame-panel-description",ref:forwardedRef,...props(frameStyles.description),children:children});}export function FrameFooter({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("footer",{...rest,"data-slot":"frame-panel-footer",ref:forwardedRef,...props(frameStyles.footer),children:children});}

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

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/interaction.stylex";import{borderWidth}from"../../styles/interaction.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 frameStyles={description:{kB7OPa:"x9f619",kMwMTN:"xbb0na1",kGuDYH:"xlh8hku",k63SB2:"x1lo1l87",kLWn49:"x2xzzt7",$$css:true},footer:{kB7OPa:"x9f619",k8WAf4:"x7bohs8",kg3NbH:"x1qv7r7n",$$css:true},frame:{kWkggS:"x1vs9wzj",kaIpWk:"xrpjxqk",kB7OPa:"x9f619",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",k7Eaqz:"xeuugli",kmVPX3:"xlxy37g",kVAEAm:"x1n2onr6",kzqmXN:"xh8yej3",$$css:true},header:{kB7OPa:"x9f619",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",k8WAf4:"x7bohs8",kg3NbH:"x1qv7r7n",$$css:true},panel:{kHypHr:"xx83zyx",kWkggS:"xwn18cz",kVAM5u:"x155xxfk",kaIpWk:"x4ig255",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"xr81nds",kB7OPa:"x9f619",k7Eaqz:"xeuugli",kmVPX3:"x11ant10",kVAEAm:"x1n2onr6",$$css:true},title:{kB7OPa:"x9f619",kMwMTN:"x14tvo57",kGuDYH:"xlh8hku",k63SB2:"xlw70nr",kLWn49:"x2xzzt7",$$css:true}};

package/dist/components/funnel/funnel-flow.js

@@ -0,0 +1,3 @@
+import{create,props}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{typeRoles}from"../../styles/typography.styles";import"../../styles/typography.stylex";import{fontWeight}from"../../styles/typography.stylex";import{chartColors}from"../chart-frame/chart-colors";import{ChartHoverTooltip,useChartHover}from"../chart-frame/chart-hover";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const HEIGHT=160;const STAGE=100;// Each stage holds its height for 60% of its width, then eases to the next.
+const HOLD=0.6;const HALO_OPACITY=0.16;const _temp={kWkggS:"xwn18cz",kaIpWk:"x1e6avla",kMwMTN:"x14tvo57",kcqcaj:"xss6m8b",k63SB2:"xuku2lm",k87sOh:"xwa60dl",k8WAf4:"x1dus959",kg3NbH:"xb5xqfq",kVAEAm:"x10l6tqk",k3aq6I:"x11lhmoz","$$css":true};const _temp2={kZKoxP:"x1qa65zt",kaIpWk:"x18zih8k",kmuXW:"x2lah0s",kzqmXN:"x1e7hgle","$$css":true};const _temp3={k1xSpc:"xrvj5dj",kOIVth:"xp4ho6d",kumcoG:"xqketvx",kB88ic:"xe8uvvx",kogj98:"x1ghz6dp",kmVPX3:"x1717udv","$$css":true};const styles={figure:{kZKoxP:"x1ymw6g",kVAEAm:"x1n2onr6",$$css:true},pill:left=>[_temp,{kLqNvP:left!=null?"x1lxsm33":left,$$css:true},{"--x-insetInlineStart":(val=>typeof val==="number"?val+"px":val!=null?val:undefined)(left)}],swatch:backgroundColor=>[_temp2,{kWkggS:backgroundColor!=null?"xl8spv7":backgroundColor,$$css:true},{"--x-backgroundColor":backgroundColor!=null?backgroundColor:undefined}],tile:{kWkggS:"xwn18cz",kaIpWk:"x2b34ud",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",k7Eaqz:"xeuugli",k8WAf4:"x391bbb",kg3NbH:"xy7odpl",$$css:true},tileLabel:{kMwMTN:"x125omll",$$css:true},tiles:count=>[_temp3,{"--x-gridTemplateColumns":`repeat(auto-fit, minmax(max(7rem, (100% - ${count-1} * ${space["2"]}) / ${count}), 1fr))`!=null?`repeat(auto-fit, minmax(max(7rem, (100% - ${count-1} * ${space["2"]}) / ${count}), 1fr))`:undefined}]};// One stage's shape: it holds its height, then eases to the next stage's.
+function stagePath(heights,index){const center=HEIGHT/2;const x0=index*STAGE;const x1=x0+STAGE;const hold=x0+STAGE*HOLD;const mid=(hold+x1)/2;const half=heights[index]/2;const next=(heights[index+1]??heights[index])/2;return[`M${x0},${center-half} L${hold},${center-half}`,`C${mid},${center-half} ${mid},${center-next} ${x1},${center-next}`,`L${x1},${center+next}`,`C${mid},${center+next} ${mid},${center+half} ${hold},${center+half}`,`L${x0},${center+half} Z`].join(" ");}export function FunnelFlow({"aria-label":ariaLabel,format,share,stages}){const{fade,hostRef,hostStyle,hover,linkProps,markProps}=useChartHover();const heights=stages.map(({share:stageShare})=>Math.max(4,stageShare*HEIGHT*0.78));const halo=heights.map(height=>Math.min(HEIGHT,height*1.12+10));return/*#__PURE__*/_jsxs("div",{"data-slot":"funnel-flow",...{className:"x78zum5 xdt5ytf xiw8qbs xeuugli"},children:[/*#__PURE__*/_jsxs("div",{ref:hostRef,...props(styles.figure,hostStyle),children:[/*#__PURE__*/_jsxs("svg",{"aria-hidden":"true",preserveAspectRatio:"none",viewBox:`0 0 ${stages.length*STAGE} ${HEIGHT}`,...{className:"x1ymw6g x1lliihq xh8yej3"},children:[stages.map(({id,label,share:stageShare,tone,value},index)=>/*#__PURE__*/_jsxs("g",{...markProps(id,{items:[{id,label,tone,value:`${format(value)} · ${share.format(stageShare)}`}]}),...props(...fade(id)),children:[/*#__PURE__*/_jsx("path",{d:stagePath(halo,index),fill:chartColors[tone],fillOpacity:HALO_OPACITY}),/*#__PURE__*/_jsx("path",{d:stagePath(heights,index),fill:chartColors[tone]})]},id)),stages.slice(1).map(({id},index)=>/*#__PURE__*/_jsx("line",{stroke:colors.surface,strokeWidth:2,vectorEffect:"non-scaling-stroke",x1:(index+1)*STAGE,x2:(index+1)*STAGE,y1:0,y2:HEIGHT},id))]}),stages.map(({id,share:stageShare},index)=>/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(styles.pill(`${(index+HOLD/2)/stages.length*100}%`),typeRoles.caption),children:share.format(stageShare)},id)),/*#__PURE__*/_jsx(ChartHoverTooltip,{hover:hover})]}),/*#__PURE__*/_jsx("ol",{"aria-label":ariaLabel,...props(styles.tiles(stages.length)),children:stages.map(({id,label,share:stageShare,tone,value})=>/*#__PURE__*/_jsxs("li",{"data-slot":"funnel-stage",...linkProps(id),...props(styles.tile,...fade(id)),children:[/*#__PURE__*/_jsxs("span",{...{className:"x6s0dn4 x78zum5 xp4ho6d x125omll"},children:[/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(styles.swatch(chartColors[tone]))}),label]}),/*#__PURE__*/_jsxs("span",{children:[/*#__PURE__*/_jsx("span",{...{className:"x14tvo57 xss6m8b xuku2lm"},children:format(value)}),/*#__PURE__*/_jsxs("span",{...props(styles.tileLabel,typeRoles.caption),children:[" ",share.format(stageShare)]})]})]},id))})]});}

package/dist/components/funnel/funnel.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { type ChartSeriesTone } from "../chart-frame/chart-colors";
+export interface FunnelStage {
+    /** A decorative glyph at the start of the stage's bar. */
+    icon?: ReactNode;
+    id: string;
+    label: string;
+    value: number;
+}
+export type FunnelProps = Omit<Closed<ComponentPropsWithRef<"div">>, "aria-label" | "children" | "data-slot" | "role"> & {
+    "aria-label": string;
+    formatValue?: (value: number) => string;
+    locale?: string;
+    /** bars lists stages on a shared track; flow draws one band that narrows. */
+    presentation?: FunnelPresentation;
+    /** Up to six stages, each in its palette color unless `tone` sets one hue. */
+    stages: readonly FunnelStage[];
+    tone?: ChartSeriesTone;
+};
+export type FunnelPresentation = "bars" | "flow";
+/** A stage with its palette tone and its share of the first stage. */
+export interface PlacedFunnelStage extends FunnelStage {
+    share: number;
+    tone: ChartSeriesTone;
+}
+/**
+ * Ordered stages, each with its value and its share of the first stage, as bars
+ * on a shared track or as one band that narrows.
+ */
+export declare function Funnel({ "aria-label": ariaLabel, formatValue, locale, presentation, ref: forwardedRef, stages, tone, ...rest }: FunnelProps): import("react").JSX.Element;

package/dist/components/funnel/funnel.js

@@ -0,0 +1,4 @@
+"use client";import{props}from"@stylexjs/stylex";import{typeRoles}from"../../styles/typography.styles";import{assertIdentity,assertNonNegative}from"../chart-frame/chart-assert";import{chartColors}from"../chart-frame/chart-colors";import{useChartHover}from"../chart-frame/chart-hover";import{funnelStyles}from"./funnel.styles";import{FunnelFlow}from"./funnel-flow";/** A stage with its palette tone and its share of the first stage. */import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const PALETTE=["series1","series2","series3","series4","series5","series6"];function assertStages(stages,tone){if(!Array.isArray(stages)){throw new TypeError("Funnel stages must be an array.");}if(tone===undefined&&stages.length>PALETTE.length){throw new RangeError("Funnel colors up to six stages; set tone for more stages in one hue.");}const ids=new Set();for(const stage of stages){assertIdentity("Funnel",stage,ids);assertNonNegative("Funnel",stage.value);}}function assertOptions(ariaLabel,tone){if(typeof ariaLabel!=="string"||!ariaLabel.trim()){throw new TypeError("Funnel requires a non-empty aria-label.");}if(tone!==undefined&&!Object.hasOwn(chartColors,tone)){throw new RangeError("Funnel tone is not a supported chart series tone.");}}function FunnelBars({"aria-label":ariaLabel,format,share,stages}){const{fade,linkProps}=useChartHover();return/*#__PURE__*/_jsx("ol",{"aria-label":ariaLabel,...props(funnelStyles.list),children:stages.map(({icon,id,label,share:stageShare,tone,value})=>/*#__PURE__*/_jsxs("li",{"data-slot":"funnel-stage",...linkProps(id),...props(funnelStyles.row),children:[/*#__PURE__*/_jsx("span",{"data-slot":"funnel-label",...props(funnelStyles.label),children:label}),/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(funnelStyles.track),children:/*#__PURE__*/_jsx("span",{"data-slot":"funnel-bar",...props(...fade(id),funnelStyles.fill(`${Math.min(stageShare,1)*100}%`,chartColors[tone])),children:icon?/*#__PURE__*/_jsx("span",{...props(funnelStyles.icon),children:icon}):null})}),/*#__PURE__*/_jsxs("span",{"data-slot":"funnel-value",...props(funnelStyles.value),children:[format(value),/*#__PURE__*/_jsx("span",{...props(funnelStyles.share,typeRoles.caption),children:share.format(stageShare)})]})]},id))});}/**
+ * Ordered stages, each with its value and its share of the first stage, as bars
+ * on a shared track or as one band that narrows.
+ */export function Funnel({"aria-label":ariaLabel,formatValue,locale="en-US",presentation="bars",ref:forwardedRef,stages,tone,...rest}){assertOptions(ariaLabel,tone);assertStages(stages,tone);for(const name of["children","className","data-slot","role","style"]){Reflect.deleteProperty(rest,name);}const format=formatValue??new Intl.NumberFormat(locale).format;const share=new Intl.NumberFormat(locale,{maximumFractionDigits:0,style:"percent"});const base=stages[0]?.value||1;const placed=stages.map((stage,index)=>({...stage,share:stage.value/base,tone:tone??PALETTE[index]}));const Presentation=presentation==="flow"?FunnelFlow:FunnelBars;return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"funnel",ref:forwardedRef,...props(funnelStyles.root,typeRoles.ui),children:/*#__PURE__*/_jsx(Presentation,{"aria-label":ariaLabel,format:format,share:share,stages:placed})});}

package/dist/components/funnel/funnel.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontWeight}from"../../styles/typography.stylex";const PILL="1.25rem";const _temp={kGNEyG:"x6s0dn4",kaIpWk:"x1e6avla",kMwMTN:"xa34c4n",k1xSpc:"x78zum5",kzqmXN:"x1uyokj7",k7Eaqz:"x199i5n0",kZCmMZ:"x19h85wv","$$css":true};export const funnelStyles={fill:(inlineSize,backgroundColor)=>[_temp,{kWkggS:backgroundColor!=null?"xl8spv7":backgroundColor,$$css:true},{"--x-backgroundColor":backgroundColor!=null?backgroundColor:undefined,"--x-inlineSize":(val=>typeof val==="number"?val+"px":val!=null?val:undefined)(inlineSize)}],icon:{k1xSpc:"x3nfvp2",kZKoxP:"x1h81to8 xt7dq6l",kzqmXN:"x1pqx829 x14atkfc",$$css:true},label:{kMwMTN:"x125omll",kVQacm:"xb3r6kr",k9WMMc:"xp4054r",kg5iWk:"xlyipyv",khDVqt:"xuxw1ft",$$css:true},list:{kGNEyG:"x6s0dn4",k1C7PZ:"xejpt2e",k1xSpc:"xrvj5dj",kumcoG:"x1ug8u0s",kB88ic:"xe8uvvx",kogj98:"x1ghz6dp",kmVPX3:"x1717udv",khm7nJ:"x1m3h4ob",$$css:true},root:{k7Eaqz:"xeuugli",$$css:true},row:{k1xSpc:"xrvj5dj",kWZpDQ:"xx1abn8",kEXP64:"xcrlgei",kumcoG:"x4w6khx",$$css:true},share:{kMwMTN:"x125omll",k1xSpc:"x1rg5ohu",kcqcaj:"xss6m8b",keTefX:"xdd4mtk",k7Eaqz:"xj9j1fp",k9WMMc:"xp4054r",$$css:true},track:{kWkggS:"x1o7hn9x",kZKoxP:"xmll18r",kaIpWk:"x1e6avla",k1xSpc:"x78zum5",kVQacm:"xb3r6kr",$$css:true},value:{kMwMTN:"x14tvo57",kcqcaj:"xss6m8b",k63SB2:"xuku2lm",k9WMMc:"xp4054r",$$css:true}};

package/dist/components/grid/grid.d.ts

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

package/dist/components/grid/grid.js

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

package/dist/components/grid/grid.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";export const gridStyles={base:{k1xSpc:"xrvj5dj",kOIVth:"xiw8qbs",kumcoG:"x1mkdm3x x1qgos7m",k7Eaqz:"xeuugli",$$css:true}};

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

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

package/dist/components/group/group.js

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

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

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";export const groupStyles={base:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kXwgrk:"x1q0g3np",kwnvtZ:"x1a02dak",kOIVth:"xp4ho6d",k7Eaqz:"xeuugli",$$css:true}};

package/dist/components/heading/heading.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithRef } from "react";
+type NativeHeadingProps = ComponentPropsWithRef<"h2">;
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingSize = "display" | "heading" | "subheading" | "title";
+export type HeadingProps = Omit<NativeHeadingProps, "className" | "style"> & {
+    level?: HeadingLevel;
+    size?: HeadingSize;
+};
+export declare function Heading({ children, level, ref: forwardedRef, size, ...rest }: HeadingProps): import("react").JSX.Element;
+export {};

package/dist/components/heading/heading.js

@@ -0,0 +1 @@
+import{props}from"@stylexjs/stylex";import{typeRoles}from"../../styles/typography.styles";import{headingStyles}from"./heading.styles";import{jsx as _jsx}from"react/jsx-runtime";const headingElements={1:"h1",2:"h2",3:"h3",4:"h4",5:"h5",6:"h6"};const sizeStyles={display:typeRoles.display,heading:typeRoles.heading,subheading:typeRoles.subheading,title:typeRoles.title};export function Heading({children,level=2,ref:forwardedRef,size="heading",...rest}){const Component=headingElements[level];return/*#__PURE__*/_jsx(Component,{...rest,"data-size":size,"data-slot":"heading",ref:forwardedRef,...props(headingStyles.base,sizeStyles[size]),children:children});}

package/dist/components/heading/heading.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";export const headingStyles={base:{kMwMTN:"x14tvo57",kqGvvJ:"x10im51j",kHjlTd:"xj0a0fe",$$css:true}};

package/dist/components/heatmap/heatmap-scale.js

@@ -0,0 +1,3 @@
+import{create,props}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import{typeRoles}from"../../styles/typography.styles";import{chartColors}from"../chart-frame/chart-colors";// Shared by Heatmap and CalendarHeatmap: six sequential buckets of one hue,
+// mixed from the workarea, plus a separate "missing" color.
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const BUCKETS=[0,1,2,3,4,5];export const COLOR_DOMAIN=["missing",...BUCKETS];const _temp={kZKoxP:"x18gu5k8",kaIpWk:"x18zih8k",kmuXW:"x2lah0s",kzqmXN:"xd466ng","$$css":true};const styles={label:{kMwMTN:"x125omll",$$css:true},swatch:backgroundColor=>[_temp,{kWkggS:backgroundColor!=null?"xl8spv7":backgroundColor,$$css:true},{"--x-backgroundColor":backgroundColor!=null?backgroundColor:undefined}]};export function getBucket(value,maximum){return Math.min(BUCKETS.length-1,Math.floor(value/(maximum||1)*BUCKETS.length));}export function colorRange(tone){return[colors.workarea,...BUCKETS.map(bucket=>`color-mix(in oklab, ${colors.workarea} ${100-(bucket+1)/BUCKETS.length*100}%, ${chartColors[tone]})`)];}export function HeatmapLegend({high,tone,valueLabel}){return/*#__PURE__*/_jsxs("div",{"aria-label":`${valueLabel} range; No data is shown separately`,"data-slot":"heatmap-legend",role:"img",...{className:"x6s0dn4 xejpt2e x78zum5 x1a02dak x13a6bvl x1fynrwi xjcy2k7"},children:[/*#__PURE__*/_jsxs("span",{...{className:"x6s0dn4 x78zum5 x1a02dak x13hh4mm xeuugli"},children:[/*#__PURE__*/_jsx("span",{...props(typeRoles.caption,styles.label),children:"Low 0"}),colorRange(tone).slice(1).map(color=>/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(styles.swatch(color))},color)),/*#__PURE__*/_jsxs("span",{...props(typeRoles.caption,styles.label),children:["High ",high]})]}),/*#__PURE__*/_jsxs("span",{...{className:"x6s0dn4 x78zum5 x1a02dak x13hh4mm xeuugli"},children:[/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(styles.swatch(colors.workarea))}),/*#__PURE__*/_jsx("span",{...props(typeRoles.caption,styles.label),children:"No data"})]})]});}

package/dist/components/heatmap/heatmap.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { type ChartSeriesTone } from "../chart-frame/chart-colors";
+export interface HeatmapRow {
+    label: string;
+    values: readonly (number | null)[];
+}
+export type HeatmapProps = Omit<Closed<ComponentPropsWithRef<"div">>, "aria-label" | "children" | "data-slot" | "role"> & {
+    "aria-label": string;
+    columns: readonly string[];
+    formatValue?: (value: number) => string;
+    max?: number;
+    rows: readonly HeatmapRow[];
+    tone?: ChartSeriesTone;
+    valueLabel?: string;
+};
+export declare function Heatmap({ "aria-label": ariaLabel, columns, formatValue: formatter, max, ref: forwardedRef, rows, tone, valueLabel, ...rest }: HeatmapProps): import("react").JSX.Element;

package/dist/components/heatmap/heatmap.js

@@ -0,0 +1,2 @@
+"use client";import{create,props}from"@stylexjs/stylex";import{cell,defineChart}from"@tanstack/charts";import{scaleBand}from"@tanstack/charts/scales/band";import{tooltip as tooltipFeature}from"@tanstack/charts/tooltip";import{useMemo}from"react";import{typeRoles}from"../../styles/typography.styles";import{chartColors}from"../chart-frame/chart-colors";import{ChartDataTable}from"../chart-frame/chart-data-table";import{ChartFrame}from"../chart-frame/chart-frame";import{ChartTooltip}from"../chart-tooltip/chart-tooltip";import{Table,TableBody,TableCaption,TableCell,TableContainer,TableHead,TableHeader,TableRow}from"../table/table";import{COLOR_DOMAIN,colorRange,getBucket,HeatmapLegend}from"./heatmap-scale";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const _temp={ks0D6T:"x13i5qev","$$css":true};const styles={plot:columnCount=>[_temp,{"--x-maxInlineSize":(val=>typeof val==="number"?val+"px":val!=null?val:undefined)(`calc(${columnCount} * 2.25rem + 6rem)`)}]};function requireLabel(label,name,seen){if(typeof label!=="string"||!label.trim()){throw new TypeError(`Heatmap ${name} labels must be non-empty strings.`);}if(seen.has(label)){throw new RangeError(`Heatmap ${name} labels must be unique.`);}seen.add(label);}function assertUniqueLabels(labels,name){const seen=new Set();for(const label of labels){requireLabel(label,name,seen);}}function isArray(value){return Array.isArray(value);}function assertRows(rows,columnCount){const seen=new Set();for(const row of rows){requireLabel(row?.label,"row",seen);if(!isArray(row.values)||row.values.length!==columnCount){throw new RangeError("Heatmap rows must match the column count.");}}}function assertValues(rows){let maximum=0;for(const row of rows){for(const value of row.values){if(value===null){continue;}if(typeof value!=="number"||!Number.isFinite(value)||value<0){throw new RangeError("Heatmap values must be finite non-negative numbers or null.");}maximum=Math.max(maximum,value);}}return maximum;}function assertMaximum(max){if(max!==undefined&&(typeof max!=="number"||!Number.isFinite(max)||max<0)){throw new RangeError("Heatmap max must be a finite non-negative number.");}}function prepareCells(columns,rows,max){if(!(isArray(columns)&&isArray(rows))){throw new TypeError("Heatmap columns and rows must be arrays.");}assertMaximum(max);assertUniqueLabels(columns,"column");assertRows(rows,columns.length);const observedMax=assertValues(rows);const maximum=max??observedMax;if(max===0&&observedMax>0){throw new RangeError("Heatmap max must be greater than zero when values are positive.");}return{cells:rows.flatMap(({label,values})=>values.map((value,index)=>{const colorKey=value===null?"missing":getBucket(value,maximum);return{colorKey,column:columns[index],row:label,value};})),maximum};}function formatValue(value,formatter){const formatted=formatter?formatter(value):String(value);if(typeof formatted!=="string"){throw new TypeError("Heatmap formatValue must return a string.");}return formatted;}function assertProps(ariaLabel,valueLabel,formatter,tone){if(typeof ariaLabel!=="string"||!ariaLabel.trim()||typeof valueLabel!=="string"||!valueLabel.trim()){throw new TypeError("Heatmap requires non-empty aria-label and valueLabel strings.");}if(formatter!==undefined&&typeof formatter!=="function"){throw new TypeError("Heatmap formatValue must be a function.");}if(!Object.hasOwn(chartColors,tone)){throw new RangeError("Heatmap tone is not supported.");}}function stripReservedProps(attributes){for(const name of["aria-label","children","className","data-slot","role","style"]){Reflect.deleteProperty(attributes,name);}}function renderTooltip(context,valueLabel,tone,formatter){const point=context.primaryPoint??context.points[0];if(!point){return null;}const{column,row,value}=point.datum;return/*#__PURE__*/_jsx(ChartTooltip,{items:[{id:"heatmap-value",label:valueLabel,tone,value:value===null?"No data":formatValue(value,formatter)}],label:`${row} · ${column}`});}function HeatmapTable({"aria-label":ariaLabel,columns,formatValue:formatter,rows}){return/*#__PURE__*/_jsx(ChartDataTable,{children:/*#__PURE__*/_jsx(TableContainer,{"aria-label":`${ariaLabel} data`,children:/*#__PURE__*/_jsxs(Table,{children:[/*#__PURE__*/_jsxs(TableCaption,{children:[ariaLabel," values"]}),/*#__PURE__*/_jsx(TableHeader,{sticky:false,children:/*#__PURE__*/_jsxs(TableRow,{children:[/*#__PURE__*/_jsx(TableHead,{scope:"col",children:"Row"}),columns.map(column=>/*#__PURE__*/_jsx(TableHead,{children:column},column))]})}),/*#__PURE__*/_jsx(TableBody,{children:rows.map(({label,values})=>/*#__PURE__*/_jsxs(TableRow,{children:[/*#__PURE__*/_jsx(TableHead,{scope:"row",children:label}),values.map((value,index)=>/*#__PURE__*/_jsx(TableCell,{numeric:true,children:value===null?"No data":/*#__PURE__*/_jsx("data",{value:value,children:formatValue(value,formatter)})},columns[index]))]},label))})]})})});}function HeatmapChart({"aria-label":ariaLabel,columns,cells,formatValue:formatter,maximum,rows,tone,valueLabel}){const definition=useMemo(()=>defineChart({color:{domain:COLOR_DOMAIN,range:colorRange(tone)},marks:[cell(cells,{color:"colorKey",id:"heatmap-cells",inset:1.5,key:({row,column})=>JSON.stringify([row,column]),radius:4,x:"column",y:"row"})],scales:{x:{scale:scaleBand().domain(columns).paddingInner(0.1).paddingOuter(0)},y:{scale:scaleBand().domain(rows.map(({label})=>label)).paddingInner(0.1).paddingOuter(0)}}},{tooltip:tooltipFeature}),[cells,columns,rows,tone]);const renderTooltipBody=useMemo(()=>context=>renderTooltip(context,valueLabel,tone,formatter),[formatter,tone,valueLabel]);return/*#__PURE__*/_jsxs("div",{...props(styles.plot(columns.length)),children:[/*#__PURE__*/_jsx(ChartFrame,{"aria-label":ariaLabel,definition:definition,height:rows.length*30+40,renderTooltipBody:renderTooltipBody,tabIndex:0}),/*#__PURE__*/_jsx(HeatmapLegend,{high:formatValue(maximum,formatter),tone:tone,valueLabel:valueLabel})]});}export function Heatmap({"aria-label":ariaLabel,columns,formatValue:formatter,max,ref:forwardedRef,rows,tone="series1",valueLabel="Value",...rest}){assertProps(ariaLabel,valueLabel,formatter,tone);const{cells,maximum}=useMemo(()=>prepareCells(columns,rows,max),[columns,max,rows]);stripReservedProps(rest);return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"heatmap",ref:forwardedRef,...{className:"xeuugli"},children:rows.length===0||columns.length===0?/*#__PURE__*/// biome-ignore lint/a11y/useSemanticElements: Names an empty chart, not a form group; the status keeps its own text.
+_jsx("div",{"aria-label":ariaLabel,role:"group",children:/*#__PURE__*/_jsx("p",{role:"status",...props(typeRoles.body),children:"No data available."})}):/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(HeatmapChart,{"aria-label":ariaLabel,cells:cells,columns:columns,formatValue:formatter,maximum:maximum,rows:rows,tone:tone,valueLabel:valueLabel}),/*#__PURE__*/_jsx(HeatmapTable,{"aria-label":ariaLabel,columns:columns,formatValue:formatter,rows:rows})]})});}

package/dist/components/inline/inline.d.ts

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

package/dist/components/inline/inline.js

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

package/dist/components/inline/inline.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";export const inlineStyles={base:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kXwgrk:"x1q0g3np",kwnvtZ:"x1a02dak",kOIVth:"xiw8qbs",k7Eaqz:"xeuugli",$$css:true}};

package/dist/components/inline-citation/citation-source.d.ts

@@ -0,0 +1,27 @@
+/**
+ * A cited source. With `href` it is a link labelled by its domain, and the
+ * title is optional. Without one, such as an uploaded document, it needs a
+ * title and shows as text.
+ */
+export type CitationSource = {
+    /** One line on what the source says, shown in its preview. */
+    description?: string;
+    /**
+     * A small square image. Defaults to the site's own `/favicon.ico`; a
+     * globe stands in when there is none.
+     */
+    icon?: string;
+} & ({
+    href: string;
+    title?: string;
+} | {
+    href?: undefined;
+    title: string;
+});
+/** What the chip shows: the domain of a link, or the title of a document. */
+export declare function sourceLabel(source: CitationSource): string;
+/** The fullest name available: the title, or the domain without one. */
+export declare function sourceName(source: CitationSource): string;
+export declare function SourceIcon({ source }: {
+    source: CitationSource;
+}): import("react").JSX.Element;

package/dist/components/inline-citation/citation-source.js

@@ -0,0 +1,13 @@
+"use client";import{props}from"@stylexjs/stylex";import{useCallback,useState}from"react";import{IconFile,IconWorld}from"../../icons";import{inlineCitationStyles as styles}from"./inline-citation.styles";/**
+ * A cited source. With `href` it is a link labelled by its domain, and the
+ * title is optional. Without one, such as an uploaded document, it needs a
+ * title and shows as text.
+ */import{jsx as _jsx}from"react/jsx-runtime";const LEADING_WWW=/^www\./u;// Reserved for examples and tests (RFC 2606); they never serve an icon.
+const RESERVED_HOST=/(?:^|\.)(?:example\.(?:com|net|org)|example|test|invalid|localhost)$/u;function sourceDomain(href){return URL.canParse(href)?new URL(href).hostname.replace(LEADING_WWW,""):href;}/** What the chip shows: the domain of a link, or the title of a document. */export function sourceLabel(source){return source.href===undefined?source.title:sourceDomain(source.href);}/** The fullest name available: the title, or the domain without one. */export function sourceName(source){return source.title??sourceLabel(source);}// The site's own icon, so no third-party service learns what was cited.
+function faviconOf(source){if(source.icon){return source.icon;}if(source.href===undefined||!URL.canParse(source.href)){return;}const url=new URL(source.href);const web=url.protocol==="https:"||url.protocol==="http:";return web&&!RESERVED_HOST.test(url.hostname)?`${url.origin}/favicon.ico`:undefined;}export function SourceIcon({source}){const src=faviconOf(source);const[failed,setFailed]=useState(null);const fail=useCallback(()=>setFailed(src??null),[src]);// A server-rendered icon can fail before hydration, when no handler is
+// attached yet; a finished image with no width has failed.
+const check=useCallback(image=>{if(image?.complete&&image.naturalWidth===0){fail();}},[fail]);if(source.href===undefined&&!source.icon){// A document, such as a file from the person's workspace.
+return/*#__PURE__*/_jsx(IconFile,{"aria-hidden":"true",size:12,...props(styles.faviconFallback)});}if(!src||failed===src){return/*#__PURE__*/_jsx(IconWorld,{"aria-hidden":"true",size:12,...props(styles.faviconFallback)});}return(/*#__PURE__*/// biome-ignore lint/performance/noImgElement: Mizen stays framework-neutral, so it uses a native image.
+// biome-ignore lint/correctness/useImageSize: the icon is a fixed 12px square set in styles.
+// biome-ignore lint/a11y/noNoninteractiveElementInteractions: onError swaps in the globe when a site has no icon; it is not an interaction.
+_jsx("img",{alt:"",onError:fail,ref:check,referrerPolicy:"no-referrer",src:src,...props(styles.favicon)}));}

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

@@ -0,0 +1,22 @@
+import { type StyleXStyles } from "@stylexjs/stylex";
+import { type CitationSource } from "./citation-source";
+/** A page or document the text cites. */
+export type InlineCitationSource = CitationSource;
+export interface InlineCitationProps {
+    /**
+     * The sources behind this point in the text. Several show as one chip,
+     * such as "web.dev +2", that opens a list of them.
+     */
+    sources: readonly InlineCitationSource[];
+}
+/** The chip, with an optional entrance for text that is still arriving. */
+export declare function CitationChip({ arrival, sources, }: {
+    arrival?: StyleXStyles;
+    sources: readonly CitationSource[];
+}): import("react").JSX.Element | null;
+/**
+ * A source in the sentence it supports: the site's favicon and name, opening
+ * the page. On hover or focus it previews the title and what the page says.
+ * Several sources at one point show as one chip that lists them.
+ */
+export declare function InlineCitation({ sources }: InlineCitationProps): import("react").JSX.Element;

package/dist/components/inline-citation/inline-citation.js

@@ -0,0 +1,10 @@
+"use client";import{props}from"@stylexjs/stylex";import{typeRoles}from"../../styles/typography.styles";import{Popover,PopoverPrimitive}from"../popover/popover";import{popoverStyles}from"../popover/popover.styles";import{PreviewCard,PreviewCardPrimitive}from"../preview-card/preview-card";import{previewCardStyles}from"../preview-card/preview-card.styles";import{SourceRow,uniqueSources}from"../sources/sources";import{sourcesStyles}from"../sources/sources.styles";import{VisuallyHidden}from"../visually-hidden/visually-hidden";import{SourceIcon,sourceLabel,sourceName}from"./citation-source";import{inlineCitationStyles as styles}from"./inline-citation.styles";/** A page or document the text cites. */import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";// Previews wait a moment, so passing over the text does not flash cards.
+const PREVIEW_DELAY=300;function SourceCard({source}){return/*#__PURE__*/_jsxs("div",{"data-slot":"inline-citation-card",...props(styles.card),children:[/*#__PURE__*/_jsxs("span",{...props(typeRoles.caption,styles.cardSite),children:[/*#__PURE__*/_jsx(SourceIcon,{source:source}),sourceLabel(source)]}),source.title?/*#__PURE__*/_jsx("p",{...props(typeRoles.label,styles.cardTitle),children:source.title}):null,source.description?/*#__PURE__*/_jsx("p",{...props(typeRoles.caption,styles.cardDescription),children:source.description}):null]});}// A link to the page, with a preview on hover or focus.
+function LinkChip({arrival,source}){const label=sourceLabel(source);const name=sourceName(source);return/*#__PURE__*/_jsxs(PreviewCard,{children:[/*#__PURE__*/_jsxs(PreviewCardPrimitive.Trigger,{delay:PREVIEW_DELAY,href:source.href,render:/*#__PURE__*/_jsx("a",{"data-slot":"inline-citation",rel:"noopener noreferrer",target:"_blank",...props(typeRoles.caption,styles.chip,arrival)}),children:[/*#__PURE__*/_jsx(SourceIcon,{source:source}),label,/*#__PURE__*/_jsxs(VisuallyHidden,{children:[name===label?"":`, ${name}`,", opens in a new tab"]})]}),/*#__PURE__*/_jsx(PreviewCardPrimitive.Portal,{children:/*#__PURE__*/_jsx(PreviewCardPrimitive.Positioner,{sideOffset:4,...props(previewCardStyles.positioner),children:/*#__PURE__*/_jsx(PreviewCardPrimitive.Popup,{...props(previewCardStyles.popup,styles.cardPopup),children:/*#__PURE__*/_jsx(SourceCard,{source:source})})})})]});}// Several sources at one point: the first site and a count, opening a list.
+function GroupChip({arrival,sources}){const[first]=sources;if(!first){return null;}const more=sources.length-1;return/*#__PURE__*/_jsxs(Popover,{children:[/*#__PURE__*/_jsxs(PopoverPrimitive.Trigger,{delay:PREVIEW_DELAY,openOnHover:true,render:/*#__PURE__*/_jsx("button",{"data-slot":"inline-citation",type:"button",...props(typeRoles.caption,styles.chip,arrival)}),children:[/*#__PURE__*/_jsx(SourceIcon,{source:first}),sourceLabel(first),/*#__PURE__*/_jsxs("span",{...props(styles.count),children:[" +",more]}),/*#__PURE__*/_jsxs(VisuallyHidden,{children:[", ",sources.length," sources"]})]}),/*#__PURE__*/_jsx(PopoverPrimitive.Portal,{children:/*#__PURE__*/_jsx(PopoverPrimitive.Positioner,{sideOffset:4,...props(popoverStyles.positioner),children:/*#__PURE__*/_jsx(PopoverPrimitive.Popup,{...props(popoverStyles.popup,styles.listPopup),children:/*#__PURE__*/_jsx("ul",{"aria-label":"Sources","data-slot":"inline-citation-sources",...props(sourcesStyles.list,styles.group),children:sources.map((source,index)=>/*#__PURE__*/// biome-ignore lint/suspicious/noArrayIndexKey: sources keep their order, and a document may share a title.
+_jsx("li",{children:/*#__PURE__*/_jsx(SourceRow,{source:source})},index))})})})})]});}/** The chip, with an optional entrance for text that is still arriving. */export function CitationChip({arrival,sources}){const unique=uniqueSources(sources);const[source]=unique;if(!source){return null;}if(unique.length>1){return/*#__PURE__*/_jsx(GroupChip,{arrival:arrival,sources:unique});}if(source.href===undefined){// A document has nothing to open; its title is the label.
+return/*#__PURE__*/_jsxs("span",{"data-slot":"inline-citation",...props(typeRoles.caption,styles.chip,styles.chipStatic,arrival),children:[/*#__PURE__*/_jsx(SourceIcon,{source:source}),sourceLabel(source)]});}return/*#__PURE__*/_jsx(LinkChip,{arrival:arrival,source:source});}/**
+ * A source in the sentence it supports: the site's favicon and name, opening
+ * the page. On hover or focus it previews the title and what the page says.
+ * Several sources at one point show as one chip that lists them.
+ */export function InlineCitation({sources}){return/*#__PURE__*/_jsx(CitationChip,{sources:sources});}

package/dist/components/inline-citation/inline-citation.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/shape.stylex";import{shape}from"../../styles/shape.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";export const inlineCitationStyles={card:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",kzqmXN:"x1qyi71f",ks0D6T:"x193iq5w",$$css:true},cardDescription:{kMwMTN:"x125omll",kogj98:"x1ghz6dp",$$css:true},cardPopup:{k8WAf4:"x58we3g",kg3NbH:"xaqi9fd",$$css:true},cardSite:{kGNEyG:"x6s0dn4",kMwMTN:"x125omll",k1xSpc:"x78zum5",kOIVth:"x13hh4mm",$$css:true},cardTitle:{kMwMTN:"x14tvo57",kogj98:"x1ghz6dp",$$css:true},chip:{kLkRvE:"x1uupfv5 xjf3280 x1xfgomm",kPB484:"x186vvcl",kgeoSG:"x1cpjm7i",kFcpXp:"x1fy2dh",kEoFBp:"x1hmns74",kxmVGU:"xy5mcqj",kGNEyG:"x6s0dn4",kysU6D:"xjyslct",kWkggS:"xjbqb8w",kaIpWk:"x1d39uln",kMzoRj:"xc342km",kMwMTN:"x11elz0g x125omll",kkrTdU:"x1ypdohk",k1xSpc:"x3nfvp2",kMv6JI:"xjb2p0i",kOIVth:"x13hh4mm",kHBbk8:"xc8icb0",kogj98:"x3sra5",keTefX:"x1lziwak",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x2ssjo2",k3XXqK:"x9v5kkp x1t137rt",kMeerF:"x1vhx2qj",kmVPX3:"xlxy37g",kg3NbH:"x1b05yfv",kVAEAm:"x1n2onr6",kybGjl:"x1hl2dhg",kXLuUW:"xdnv9to",khDVqt:"xuxw1ft",$$css:true},chipStatic:{kkrTdU:"xt0e3qv",$$css:true},count:{kcqcaj:"xss6m8b",$$css:true},favicon:{kZKoxP:"x1kpxq89",kaIpWk:"x18zih8k",k1xSpc:"x1lliihq",kmuXW:"x2lah0s",kzqmXN:"xsmyaan",kVIFPx:"xl1xv1r",$$css:true},faviconFallback:{kMwMTN:"x125omll",kmuXW:"x2lah0s",$$css:true},group:{kzqmXN:"x1nqqiwj",ks0D6T:"x193iq5w",$$css:true},listPopup:{kmVPX3:"x1btfdvn",$$css:true}};

package/dist/components/input/input.d.ts

@@ -0,0 +1,17 @@
+import { Input as BaseInput } from "@base-ui/react/input";
+import type { ComponentPropsWithRef, InputHTMLAttributes } from "react";
+type BaseInputProps = ComponentPropsWithRef<typeof BaseInput>;
+export type InputSize = "default" | "lg" | "sm";
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "onPointerEnter" | "onPointerLeave" | "size" | "style"> & {
+    disabled?: boolean;
+    invalid?: boolean;
+    onPointerEnter?: InputHTMLAttributes<HTMLInputElement>["onPointerEnter"];
+    onPointerLeave?: InputHTMLAttributes<HTMLInputElement>["onPointerLeave"];
+    ref?: BaseInputProps["ref"];
+    render?: BaseInputProps["render"];
+    size?: InputSize;
+    unstyled?: boolean;
+    onValueChange?: BaseInputProps["onValueChange"];
+};
+export declare function Input({ disabled, invalid, readOnly, ref: forwardedRef, size, unstyled, onPointerEnter, onPointerLeave, ...rest }: InputProps): import("react").JSX.Element;
+export {};

package/dist/components/input/input.js

@@ -0,0 +1,3 @@
+"use client";import{Input as BaseInput}from"@base-ui/react/input";import{props}from"@stylexjs/stylex";import{useCallback,useState}from"react";import{isBoundStringField,useBoundFieldContext}from"../field/field-context";import{inputStyles}from"./input.styles";import{jsx as _jsx}from"react/jsx-runtime";const sizeStyles={default:inputStyles.sizeDefault,lg:inputStyles.sizeLg,sm:inputStyles.sizeSm};const unstyledSizeStyles={default:inputStyles.unstyledDefault,lg:inputStyles.unstyledLg,sm:inputStyles.unstyledSm};function useInputBinding(control){const boundContext=useBoundFieldContext();const boundField=isBoundStringField(boundContext)?boundContext:null;const userOnBlur=control.onBlur;const userOnValueChange=control.onValueChange;const handleBoundBlur=useCallback(event=>{boundField?.handleBlur();userOnBlur?.(event);},[boundField,userOnBlur]);const handleBoundValueChange=useCallback((val,details)=>{userOnValueChange?.(val,details);if(!details.isCanceled){boundField?.handleChange(val);}},[boundField,userOnValueChange]);const isInvalid=boundField?boundField.state.meta.isTouched&&!boundField.state.meta.isValid:control.invalid;return{"aria-invalid":isInvalid||undefined,...(boundField?{name:boundField.name,onBlur:handleBoundBlur,onValueChange:handleBoundValueChange,value:boundField.state.value}:{})};}function inputAppearance(size,unstyled){return unstyled?props(inputStyles.unstyled,unstyledSizeStyles[size],inputStyles.nativeFeatures):props(inputStyles.input,sizeStyles[size],inputStyles.nativeFeatures);}export function Input({disabled=false,invalid=false,readOnly=false,ref:forwardedRef=undefined,size="default",unstyled=false,// biome-ignore lint/complexity/noUselessUndefined: Keep this optional in Babel's generated JS surface.
+onPointerEnter=undefined,// biome-ignore lint/complexity/noUselessUndefined: Keep this optional in Babel's generated JS surface.
+onPointerLeave=undefined,...rest}){const binding=useInputBinding({...rest,invalid});const[isHovered,setIsHovered]=useState(false);const handlePointerEnter=useCallback(event=>{if(!(disabled||readOnly)){setIsHovered(true);}onPointerEnter?.(event);},[disabled,onPointerEnter,readOnly]);const handlePointerLeave=useCallback(event=>{setIsHovered(false);onPointerLeave?.(event);},[onPointerLeave]);return/*#__PURE__*/_jsx(BaseInput,{...rest,...binding,"data-hovered":isHovered?"true":undefined,"data-size":size,disabled:disabled,onPointerEnter:handlePointerEnter,onPointerLeave:handlePointerLeave,readOnly:readOnly,ref:forwardedRef,...inputAppearance(size,unstyled)});}

package/dist/components/input/input.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../icon-masks.stylex";import{iconMasks}from"../../icon-masks.stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/dimensions.stylex";import{controlSize}from"../../styles/dimensions.stylex";import"../../styles/fonts.stylex";import{fonts}from"../../styles/fonts.stylex";import"../../styles/interaction.stylex";import{borderWidth}from"../../styles/interaction.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontSize,fontWeight,lineHeight}from"../../styles/typography.stylex";import{fieldStyles}from"../field/field.styles";const inputUnstyledStyles={nativeFeatures:{kONv6d:"x1ad04t7",k6bigS:"x5qecgm xythjdh",kZikHe:"x13s3p3m",kNMCen:"x1eukatj",kUKRLr:"x1gpaafl",k2O5kd:"xchrlfk",kCGpWS:"xeugw9r",kXLmdK:"x19awjbf",klxQux:"xy23zu1",kcqcaj:"x1ufjfkg x1wgrp8u",$$css:true},unstyled:{k8Qsv1:"x10l60j5",kH8XJS:"x7xwk5j",kysU6D:"xjyslct",kWkggS:"xjbqb8w",kVAM5u:"x9r1u3d",ksu8eU:"xng3xce",kMzoRj:"xc342km",kGVxlE:"x1gnnqk1",kB7OPa:"x9f619",kMwMTN:"xpfl6da x14tvo57",kkrTdU:"x1s07b3s x1ed109x",k1xSpc:"x1lliihq",kCS8Yb:"x1t1x2f9",kzQI83:"x1iyjqo2",kmuXW:"xs83m0k",kMv6JI:"xjb2p0i",kGuDYH:"x12ama9c",kC21eY:"x2vx8kg",k63SB2:"x1lo1l87",kLWn49:"x1rn0pvf",k7Eaqz:"xeuugli",kSiTet:"x1hc1fzr",kjBf7l:"x1uczgqu",k3XXqK:"x1t137rt",kMeerF:"x1k57tk5",k8WAf4:"x1a8o3s8",kwRFfy:"x9ln08h x18gr29s",kZCmMZ:"x1t24ow8 x14s0xwm",kzqmXN:"x14atkfc",$$css:true},unstyledDefault:{kZKoxP:"xx2mv8v",$$css:true},unstyledLg:{kGuDYH:"x12ama9c",kZKoxP:"x1vk83p6",$$css:true},unstyledSm:{kGuDYH:"xs18rgd x12ama9c",kZKoxP:"x97r3th",$$css:true}};export const inputStyles={...fieldStyles,nativeFeatures:inputUnstyledStyles.nativeFeatures,unstyled:inputUnstyledStyles.unstyled,unstyledDefault:inputUnstyledStyles.unstyledDefault,unstyledLg:inputUnstyledStyles.unstyledLg,unstyledSm:inputUnstyledStyles.unstyledSm};

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

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithRef, ReactElement } from "react";
+import type { Closed } from "../../closed";
+import type { InputProps } from "../input/input";
+import type { TextareaProps } from "../textarea/textarea";
+export type InputGroupProps = Closed<Omit<ComponentPropsWithRef<"div">, "data-slot">>;
+export type InputGroupAddonAlign = "block-end" | "block-start" | "inline-end" | "inline-start";
+export type InputGroupAddonProps = Closed<Omit<ComponentPropsWithRef<"div">, "data-slot"> & {
+    align?: InputGroupAddonAlign;
+}>;
+export type InputGroupTextProps = Closed<Omit<ComponentPropsWithRef<"span">, "data-slot">>;
+export type InputGroupInputProps = Closed<Omit<InputProps, "data-slot" | "unstyled">>;
+export type InputGroupTextareaProps = Closed<Omit<TextareaProps, "data-slot" | "unstyled">>;
+export declare function InputGroup({ role, children, ref: forwardedRef, ...rest }: InputGroupProps): ReactElement;
+export declare function InputGroupAddon({ align, children, onMouseDown, ref: forwardedRef, ...rest }: InputGroupAddonProps): ReactElement;
+export declare function InputGroupText({ children, ref: forwardedRef, ...rest }: InputGroupTextProps): ReactElement;
+export declare function InputGroupInput({ ref: forwardedRef, render, ...rest }: InputGroupInputProps): ReactElement;
+export declare function InputGroupTextarea({ ref: forwardedRef, ...rest }: InputGroupTextareaProps): ReactElement;