@mizen-labs/ui 0.0.0-stage → 0.1.0

package/dist/components/message-scroller/message-scroller-store.js

@@ -0,0 +1,27 @@
+// The scroll engine behind MessageScroller. It attaches to the viewport, the
+// log, and the spacer through ref callbacks, so it needs no effects, and
+// React reads its state through useSyncExternalStore.
+/** Distance from the end, in px, that still counts as at the end. */const EDGE=16;/** How much of the previous turn stays in view above a new anchor. */const PEEK=64;const LABEL_LENGTH=80;const REPLY_LENGTH=160;const ITEM="[data-message-id]";// A turn boundary: marked so, or "auto" holding the reader's own Message.
+const ANCHOR="[data-scroll-anchor='true'], [data-scroll-anchor='auto']:has([data-slot='message'][data-from='user'][data-align='end'])";const BACK_KEYS=new Set(["ArrowUp","Home","PageUp"]);function reducedMotion(){return typeof matchMedia==="function"&&matchMedia("(prefers-reduced-motion: reduce)").matches;}// Where an element sits in the scrolled content, from layout alone, so a
+// row still rising into place measures where it will land.
+function layoutTop(element,viewport){let top=0;let node=element;while(node instanceof HTMLElement&&node!==viewport){top+=node.offsetTop;node=node.offsetParent;}if(node===viewport){return top;}return viewport.scrollTop+element.getBoundingClientRect().top-viewport.getBoundingClientRect().top;}const TEXT="[data-slot='message-text'], [data-slot='streaming-text']";function clip(text,length){const line=text.replace(/\s+/gu," ").trim();return line.length>length?`${line.slice(0,length-1)}…`:line;}function labelOf(item){const text=item.querySelector(TEXT)?.textContent??item.textContent;return clip(text??"",LABEL_LENGTH);}// The first message text among the rows after an anchor, up to the next one.
+function replyOf(item){let row=item.nextElementSibling;while(row&&!row.matches(ANCHOR)){const text=row.querySelector(TEXT)?.textContent;if(text){return clip(text,REPLY_LENGTH);}row=row.nextElementSibling;}return"";}function anchorsIn(log){return[...log.querySelectorAll(ANCHOR)].map(item=>({id:item.dataset.messageId??"",label:labelOf(item),reply:replyOf(item)}));}function sameAnchors(a,b){return a.length===b.length&&a.every((item,index)=>item.id===b[index]?.id&&item.label===b[index]?.label&&item.reply===b[index]?.reply);}export class MessageScrollerStore{viewport=null;log=null;spacer=null;/** following: growing content keeps the view at the end. started: the view has opened at the end. */mode={following:true,started:false};/** The last turn sent while watching; it settles near the top. */anchor=null;/** A scroll position the store set itself, until the view reaches it. */target=null;/** The first item in view and its offset, so the view can hold still. */reference=null;snapshot={anchors:[],atEnd:true,current:null};listeners=new Set();subscribe=listener=>{this.listeners.add(listener);return()=>{this.listeners.delete(listener);};};getSnapshot=()=>this.snapshot;/** True once the view is on screen: rows from now on are new arrivals. */isLive=()=>this.viewport!==null;attachLog=log=>{if(!log){return;}this.log=log;const resize=new ResizeObserver(()=>this.onLayout());const mutation=new MutationObserver(records=>this.onMutation(records));resize.observe(log);// aria-busy turning off means the reply ended.
+mutation.observe(log,{attributeFilter:["aria-busy"],attributes:true,childList:true});return()=>{resize.disconnect();mutation.disconnect();this.log=null;};};attachSpacer=spacer=>{this.spacer=spacer;};attachViewport=viewport=>{if(!viewport){return;}this.viewport=viewport;const resize=new ResizeObserver(()=>this.onLayout());resize.observe(viewport);viewport.addEventListener("scroll",this.onScroll,{passive:true});viewport.addEventListener("wheel",this.onIntent,{passive:true});viewport.addEventListener("touchstart",this.onIntent,{passive:true});viewport.addEventListener("keydown",this.onKey);this.start();return()=>{resize.disconnect();viewport.removeEventListener("scroll",this.onScroll);viewport.removeEventListener("wheel",this.onIntent);viewport.removeEventListener("touchstart",this.onIntent);viewport.removeEventListener("keydown",this.onKey);this.viewport=null;};};/** Scrolls to the newest content and follows it again. */scrollToEnd=(behavior="smooth")=>{this.mode.following=true;this.scrollTo(Number.POSITIVE_INFINITY,behavior);};/** Scrolls a message to the top of the view, the previous turn peeking. */scrollToMessage=(id,behavior="smooth")=>{const item=this.log?.querySelector(`[data-message-id="${CSS.escape(id)}"]`);if(!item){return false;}this.mode.following=false;this.scrollTo(this.offsetOf(item)-PEEK,behavior);return true;};// Opens at the end once there is something to show, without motion.
+start(){const{log,viewport}=this;if(this.mode.started||!(log&&viewport)||log.childElementCount===0){return;}this.mode.started=true;this.scrollTo(Number.POSITIVE_INFINITY,"instant");this.update();}offsetOf(item){const{viewport}=this;if(!viewport){return 0;}return layoutTop(item,viewport);}scrollTo(top,behavior){const{viewport}=this;if(!viewport){return;}const end=viewport.scrollHeight-viewport.clientHeight;this.target=Math.max(0,Math.min(top,end));viewport.scrollTo({behavior:reducedMotion()?"instant":behavior,top:this.target});}// Wheel, touch, and keys going back mean the reader is taking over.
+onIntent=()=>{this.target=null;};onKey=event=>{if(BACK_KEYS.has(event.key)){this.target=null;}};onScroll=()=>{const{viewport}=this;if(!viewport){return;}if(this.target===null){// The reader scrolled: follow again only from the end.
+this.mode.following=this.distance()<=EDGE;}else if(Math.abs(viewport.scrollTop-this.target)<1){this.target=null;}this.remember();this.update();};onLayout(){this.start();this.sizeSpacer();if(this.mode.following){this.scrollTo(Number.POSITIVE_INFINITY,"instant");}else{this.holdStill();}this.update();}onMutation(records){// Sending often marks the log busy and adds the turn in one update, so
+// both are handled.
+if(records.some(record=>record.type==="attributes")){this.onBusyChange();}if(!records.some(record=>record.type==="childList")){return;}const sent=this.mode.started?this.sentTurn(records):null;if(sent){this.settle(sent);}else{this.onLayout();}}// The newest anchor among rows just added at the end: a send often adds
+// the person's turn and the reply's first row in one go.
+sentTurn(records){const added=new Set(records.flatMap(record=>[...record.addedNodes]));let node=this.log?.lastElementChild??null;while(node&&added.has(node)){if(node instanceof HTMLElement&&node.matches(ANCHOR)){return node;}node=node.previousElementSibling;}return null;}// A turn the person just sent moves near the top; the reply grows under
+// it, and the view stays put until the reader scrolls.
+settle(item){this.anchor=item;this.mode.following=false;this.sizeSpacer();this.scrollTo(this.offsetOf(item)-PEEK,"smooth");this.update();}// Once the reply ends, the blank room under it eases away, so a short
+// reply comes to rest just above whatever sits below the transcript.
+onBusyChange(){const{anchor,log,spacer}=this;if(!(anchor&&log&&spacer)||log.hasAttribute("aria-busy")){return;}this.anchor=null;spacer.style.transition=reducedMotion()?"none":"height 280ms cubic-bezier(0.16, 1, 0.3, 1)";spacer.style.height="0px";}// Room under a short reply, so its turn can sit near the top.
+sizeSpacer(){const{anchor,log,spacer,viewport}=this;if(!(spacer&&log&&viewport)){return;}// Sizing for a new turn is instant; only the release eases.
+if(anchor){spacer.style.transition="none";}if(!anchor?.isConnected){spacer.style.height="0px";return;}const below=layoutTop(log,viewport)+log.offsetHeight-layoutTop(anchor,viewport);const padding=Number.parseFloat(getComputedStyle(viewport).paddingBottom);const room=viewport.clientHeight-PEEK-below-(padding||0);spacer.style.height=`${Math.max(0,room)}px`;}distance(){const{viewport}=this;if(!viewport){return 0;}return viewport.scrollHeight-viewport.scrollTop-viewport.clientHeight;}// How much of the transcript is still below the view. The spacer under a
+// settled turn is blank, so it does not count.
+unseen(){const{log,viewport}=this;if(!(log&&viewport)){return 0;}return log.getBoundingClientRect().bottom-viewport.getBoundingClientRect().bottom;}// The first item in view, so a change above it can be undone.
+remember(){const{log,viewport}=this;if(!(log&&viewport)){return;}const{top}=viewport.getBoundingClientRect();const item=[...log.querySelectorAll(ITEM)].find(node=>node.getBoundingClientRect().bottom>top);this.reference=item?{item,top:item.getBoundingClientRect().top-top}:null;}// Older messages loaded above, or a turn above grew: keep the reader's line.
+holdStill(){const{reference,viewport}=this;if(!(reference?.item.isConnected&&viewport)||this.target!==null){return;}const now=reference.item.getBoundingClientRect().top-viewport.getBoundingClientRect().top;const shift=now-reference.top;if(Math.abs(shift)>=1){viewport.scrollTop+=shift;}}currentAnchor(){const{log,viewport}=this;if(!(log&&viewport)){return null;}// The turn being read: the last one starting above the middle.
+const box=viewport.getBoundingClientRect();const line=box.top+box.height/2;let current=null;for(const item of log.querySelectorAll(ANCHOR)){if(item.getBoundingClientRect().top>line){break;}current=item.dataset.messageId??null;}return current??this.snapshot.anchors[0]?.id??null;}update(){const{log}=this;if(!log){return;}const anchors=anchorsIn(log);const next={anchors:sameAnchors(anchors,this.snapshot.anchors)?this.snapshot.anchors:anchors,atEnd:this.unseen()<=EDGE,current:this.currentAnchor()};const previous=this.snapshot;if(next.anchors===previous.anchors&&next.atEnd===previous.atEnd&&next.current===previous.current){return;}this.snapshot=next;for(const listener of this.listeners){listener();}}}

package/dist/components/message-scroller/message-scroller.d.ts

@@ -0,0 +1,76 @@
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { type MessageScrollerSnapshot } from "./message-scroller-store";
+export type { MessageScrollerAnchor, MessageScrollerSnapshot, } from "./message-scroller-store";
+/** The scroller's state: whether the view is at the end, and the turns. */
+export declare function useMessageScrollerState(): MessageScrollerSnapshot;
+/** Commands for custom controls: jump to the end, or to a message. */
+export declare function useMessageScroller(): {
+    scrollToEnd: (behavior?: ScrollBehavior) => void;
+    scrollToMessage: (id: string, behavior?: ScrollBehavior) => boolean;
+};
+type Part<Element extends "div" | "button"> = Omit<Closed<ComponentPropsWithRef<Element>>, "data-slot">;
+export type MessageScrollerProps = Part<"div"> & {
+    children: ReactNode;
+};
+/**
+ * A scrolling transcript. It opens at the end and follows new content while
+ * the reader is there; a turn the person sends settles near the top with the
+ * reply growing under it; and the reader's place holds when older messages
+ * load above. It fills a parent with a bounded height.
+ */
+export declare function MessageScroller({ children, ...rest }: MessageScrollerProps): import("react").JSX.Element;
+export type MessageScrollerViewportProps = Part<"div"> & {
+    /** Names the scrolling region. */
+    "aria-label"?: string;
+    children: ReactNode;
+};
+/**
+ * The scrolling region, a Scroll Area: a thin thumb shows on hover and
+ * while scrolling, and the edges fade where more waits. It is focusable,
+ * so the keyboard can scroll it.
+ */
+export declare function MessageScrollerViewport({ "aria-label": ariaLabel, children, ...rest }: MessageScrollerViewportProps): import("react").JSX.Element;
+export type MessageScrollerContentProps = Part<"div"> & {
+    /** True while a reply streams, so assistive tech waits for it. */
+    busy?: boolean;
+    children: ReactNode;
+};
+/**
+ * The transcript itself, a live log that announces new turns. Every direct
+ * child is a MessageScrollerItem.
+ */
+export declare function MessageScrollerContent({ busy, children, ...rest }: MessageScrollerContentProps): import("react").JSX.Element;
+export type MessageScrollerItemProps = Part<"div"> & {
+    children: ReactNode;
+    /** A stable id, for jumping to it and for holding the reader's place. */
+    messageId: string;
+    /**
+     * Marks a turn boundary, usually the person's message: once sent, it
+     * settles near the top, and a navigation rail lists it. `auto` anchors
+     * the item when it holds the reader's own Message (from the user,
+     * aligned to the end).
+     */
+    scrollAnchor?: boolean | "auto";
+};
+export declare function MessageScrollerItem({ children, messageId, scrollAnchor, ...rest }: MessageScrollerItemProps): import("react").JSX.Element;
+export type MessageScrollerButtonProps = Omit<Part<"button">, "children" | "onClick" | "type"> & {
+    /** Read by screen readers; the button shows an arrow. */
+    "aria-label"?: string;
+};
+/**
+ * A round arrow that jumps to the newest content. It fades in when there is
+ * something below the view and leaves the tab order when there is not.
+ */
+export declare function MessageScrollerButton({ "aria-label": ariaLabel, ...rest }: MessageScrollerButtonProps): import("react").JSX.Element;
+export interface MessageScrollerNavigationProps {
+    /** Names the rail for assistive tech. */
+    "aria-label"?: string;
+}
+/**
+ * A rail of ticks along the end edge, one per turn boundary. Hover or focus
+ * a tick to preview the turn and the start of its reply; press it to jump
+ * there. It shows from two turns, and floats over the nearest positioned
+ * box, so keep the thread's end edge clear of it.
+ */
+export declare function MessageScrollerNavigation({ "aria-label": ariaLabel, }: MessageScrollerNavigationProps): import("react").JSX.Element | null;

package/dist/components/message-scroller/message-scroller.js

@@ -0,0 +1,30 @@
+"use client";import{ScrollArea as BaseScrollArea}from"@base-ui/react/scroll-area";import{props}from"@stylexjs/stylex";import{domAnimation,LazyMotion,MotionConfig,m}from"motion/react";import{createContext,useCallback,useContext,useState,useSyncExternalStore}from"react";import{IconArrowDown}from"../../icons";import{buttonStyles}from"../button/button.styles";import{scrollAreaStyles}from"../scroll-area/scroll-area.styles";import{Tooltip,TooltipCreateHandle,TooltipPrimitive,TooltipTrigger}from"../tooltip/tooltip";import{tooltipStyles}from"../tooltip/tooltip.styles";import{messageScrollerStyles as styles}from"./message-scroller.styles";import{MessageScrollerStore}from"./message-scroller-store";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const StoreContext=createContext(null);function useStore(){const store=useContext(StoreContext);if(!store){throw new Error("MessageScroller parts must sit inside MessageScroller.");}return store;}/** The scroller's state: whether the view is at the end, and the turns. */export function useMessageScrollerState(){const store=useStore();return useSyncExternalStore(store.subscribe,store.getSnapshot,store.getSnapshot);}/** Commands for custom controls: jump to the end, or to a message. */export function useMessageScroller(){const store=useStore();return{scrollToEnd:store.scrollToEnd,scrollToMessage:store.scrollToMessage};}/**
+ * A scrolling transcript. It opens at the end and follows new content while
+ * the reader is there; a turn the person sends settles near the top with the
+ * reply growing under it; and the reader's place holds when older messages
+ * load above. It fills a parent with a bounded height.
+ */export function MessageScroller({children,...rest}){const[store]=useState(()=>new MessageScrollerStore());return/*#__PURE__*/_jsx(StoreContext.Provider,{value:store,children:/*#__PURE__*/_jsx(LazyMotion,{features:domAnimation,strict:true,children:/*#__PURE__*/_jsx(MotionConfig,{reducedMotion:"user",children:/*#__PURE__*/_jsx("div",{...rest,"data-slot":"message-scroller",...props(styles.root),children:children})})})});}// Base UI sizes the content to fit its widest row; a transcript wraps
+// instead, so its minimum width is cleared as Scroll Area does.
+const scrolled=props(scrollAreaStyles.content,styles.scrollContent);const contentProps={...scrolled,style:{...scrolled.style,minWidth:0}};/**
+ * The scrolling region, a Scroll Area: a thin thumb shows on hover and
+ * while scrolling, and the edges fade where more waits. It is focusable,
+ * so the keyboard can scroll it.
+ */export function MessageScrollerViewport({"aria-label":ariaLabel="Messages",children,...rest}){const{attachViewport}=useStore();return/*#__PURE__*/_jsxs(BaseScrollArea.Root,{...props(scrollAreaStyles.root,styles.area),children:[/*#__PURE__*/_jsx(BaseScrollArea.Viewport,{...rest,"aria-label":ariaLabel,"data-slot":"message-scroller-viewport",ref:attachViewport,role:"region",tabIndex:0,...props(scrollAreaStyles.viewport,scrollAreaStyles.viewportFade,styles.viewport),children:/*#__PURE__*/_jsx(BaseScrollArea.Content,{...contentProps,children:children})}),/*#__PURE__*/_jsx(BaseScrollArea.Scrollbar,{orientation:"vertical",...props(scrollAreaStyles.scrollbar,scrollAreaStyles.scrollbarVertical),children:/*#__PURE__*/_jsx(BaseScrollArea.Thumb,{...props(scrollAreaStyles.thumb)})})]});}/**
+ * The transcript itself, a live log that announces new turns. Every direct
+ * child is a MessageScrollerItem.
+ */export function MessageScrollerContent({busy=false,children,...rest}){const{attachLog,attachSpacer}=useStore();return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("div",{...rest,"aria-busy":busy||undefined,"aria-relevant":"additions","data-slot":"message-scroller-content",ref:attachLog,role:"log",...props(styles.content),children:children}),/*#__PURE__*/_jsx("div",{"aria-hidden":"true",ref:attachSpacer})]});}// A new row fades in and rises 8px: duration.overlayEnter with
+// easing.expoOut. Rows from the first load stay still.
+const ARRIVAL={animate:{opacity:1,y:0},initial:{opacity:0,y:8},transition:{duration:0.28,ease:[0.16,1,0.3,1]}};export function MessageScrollerItem({children,messageId,scrollAnchor=false,...rest}){const{isLive}=useStore();// Decided once, when the row first renders.
+const[arriving]=useState(isLive);return/*#__PURE__*/_jsx("div",{...rest,"data-message-id":messageId,"data-scroll-anchor":String(scrollAnchor),"data-slot":"message-scroller-item",children:/*#__PURE__*/_jsx(m.div,{animate:ARRIVAL.animate,initial:arriving?ARRIVAL.initial:false,transition:ARRIVAL.transition,children:children})});}/**
+ * A round arrow that jumps to the newest content. It fades in when there is
+ * something below the view and leaves the tab order when there is not.
+ */export function MessageScrollerButton({"aria-label":ariaLabel="Jump to latest",...rest}){const store=useStore();const{atEnd}=useMessageScrollerState();const jump=useCallback(()=>store.scrollToEnd(),[store]);return/*#__PURE__*/_jsx("button",{...rest,"aria-label":ariaLabel,"data-active":atEnd?undefined:"","data-slot":"message-scroller-button",inert:atEnd,onClick:jump,type:"button",...props(buttonStyles.base,buttonStyles["icon-sm"],buttonStyles.press,buttonStyles.interactionGhost,styles.button),children:/*#__PURE__*/_jsx(IconArrowDown,{"aria-hidden":"true",size:16})});}// How far a tick is from the one in focus, for its length: the focused
+// tick is full length and its neighbors step down, like a dock.
+function nearness(index,focus){return String(Math.min(Math.abs(index-focus),3));}function NavigationTick({anchor,current,handle,index,near,onFocusTick,onLeaveTick,total}){const{scrollToMessage}=useStore();const jump=useCallback(()=>scrollToMessage(anchor.id),[anchor.id,scrollToMessage]);const focusTick=useCallback(()=>onFocusTick(index),[index,onFocusTick]);return/*#__PURE__*/_jsx("li",{children:/*#__PURE__*/_jsx(TooltipTrigger,{delay:0,handle:handle,payload:anchor,render:/*#__PURE__*/_jsx("button",{"aria-current":current?"true":undefined,"aria-label":`Turn ${index+1} of ${total}: ${anchor.label}`,"data-near":near,onBlur:onLeaveTick,onClick:jump,onFocus:focusTick,onPointerEnter:focusTick,onPointerLeave:onLeaveTick,type:"button",...props(styles.tick)}),children:/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(styles.tickLine)})})});}// A tooltip surface that shows and moves at once: the rail's ticks carry
+// the motion, so the preview only follows them.
+function NavigationPreview({payload}){return/*#__PURE__*/_jsx(TooltipPrimitive.Portal,{children:/*#__PURE__*/_jsx(TooltipPrimitive.Positioner,{side:"left",sideOffset:8,...props(tooltipStyles.positioner,styles.still),children:/*#__PURE__*/_jsx(TooltipPrimitive.Popup,{"data-slot":"tooltip-popup",...props(tooltipStyles.popup,styles.still),children:payload?/*#__PURE__*/_jsxs("span",{...props(styles.preview),children:[/*#__PURE__*/_jsx("span",{...props(styles.previewTitle),children:payload.label}),payload.reply?/*#__PURE__*/_jsx("span",{...props(styles.previewReply),children:payload.reply}):null]}):null})})});}/**
+ * A rail of ticks along the end edge, one per turn boundary. Hover or focus
+ * a tick to preview the turn and the start of its reply; press it to jump
+ * there. It shows from two turns, and floats over the nearest positioned
+ * box, so keep the thread's end edge clear of it.
+ */export function MessageScrollerNavigation({"aria-label":ariaLabel="Turns"}){const{anchors,current}=useMessageScrollerState();const[handle]=useState(()=>TooltipCreateHandle());const[pointed,setPointed]=useState(null);const leave=useCallback(()=>setPointed(null),[]);if(anchors.length<2){return null;}const focus=pointed??Math.max(0,anchors.findIndex(anchor=>anchor.id===current));return/*#__PURE__*/_jsxs("nav",{"aria-label":ariaLabel,"data-slot":"message-scroller-navigation",...props(styles.navigation),children:[/*#__PURE__*/_jsx("ol",{...props(styles.ticks),children:anchors.map((anchor,index)=>/*#__PURE__*/_jsx(NavigationTick,{anchor:anchor,current:anchor.id===current,handle:handle,index:index,near:nearness(index,focus),onFocusTick:setPointed,onLeaveTick:leave,total:anchors.length},anchor.id))}),/*#__PURE__*/_jsx(Tooltip,{handle:handle,children:({payload})=>/*#__PURE__*/_jsx(NavigationPreview,{payload:payload})})]});}

package/dist/components/message-scroller/message-scroller.styles.js

@@ -0,0 +1,4 @@
+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/dimensions.stylex";import{controlSize}from"../../styles/dimensions.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{fontWeight}from"../../styles/typography.stylex";// Rail ticks: 12px apart, each a 1px line up to 16px long. The rows are
+// below the 24px control height on purpose: scrolling reaches every turn
+// too, which WCAG 2.5.8 accepts as an equivalent.
+const TICK_ROW=space["3"];export const messageScrollerStyles={area:{kzQI83:"x1iyjqo2",kAzted:"x2lwn1j",k7Eaqz:"xeuugli",$$css:true},button:{kWkggS:"xui3q9s",kVAM5u:"x155xxfk",kT0f0o:"x3hdh8v",kVL7Gh:"xr0m5pc",kfmiAY:"x9okykr",krdFHd:"x1142k65",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"x1mhlhek",krVfgx:"xnao3ae",kLqNvP:"xbudbmw",kSiTet:"xgq25al xg01cxk",kVAEAm:"x10l6tqk",k3aq6I:"x163x5zs xw26y1g",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x6o7n8i",kAMwcw:"xvhdtae",kY2c9j:"x1vjfegm",$$css:true},content:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xhg8sq8 xiw8qbs",$$css:true},navigation:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kYYq5F:"x1ixy539",kt4wiu:"x1etwluz",kjj79g:"xl56j7k",kVAEAm:"x10l6tqk",kY2c9j:"x1vjfegm",$$css:true},preview:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",kzqmXN:"x1e67fm3",ks0D6T:"x193iq5w",k8WAf4:"x391bbb",kg3NbH:"xy7odpl",$$css:true},previewReply:{kMwMTN:"x125omll",k1xSpc:"x104kibb",kVQacm:"xb3r6kr",kgKLqz:"x1ua5tub",kJFfOR:"x1h7i4cw",$$css:true},previewTitle:{kMwMTN:"x14tvo57",k63SB2:"xuku2lm",kVQacm:"xb3r6kr",kg5iWk:"xlyipyv",khDVqt:"xuxw1ft",$$css:true},root:{kZKoxP:"x5yr21d",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kAzted:"x2lwn1j",k7Eaqz:"xeuugli",kVAEAm:"x1n2onr6",$$css:true},scrollContent:{kAzted:"x1us19tq",$$css:true},still:{kIyJzY:"x1meeygq",$$css:true},tick:{kGNEyG:"x6s0dn4",kysU6D:"xjyslct",kWkggS:"xjbqb8w",kZKoxP:"x18gu5k8",kaIpWk:"xvozwe9",kMzoRj:"xc342km",kkrTdU:"x1ypdohk",k1xSpc:"x78zum5",kzqmXN:"xdr7e86",kjj79g:"x13a6bvl",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x11r2kya",k3XXqK:"x9v5kkp x1t137rt",kMeerF:"x1vhx2qj",kmVPX3:"x1717udv",kwRFfy:"x1a7jdvm",$$css:true},tickLine:{kWkggS:"x1jnmv27 x1gj4qyj x1cbth52 x1qcn63x",kZKoxP:"xjm9jq1",kzqmXN:"xneo5a6",k3aq6I:"xqbm92i x1me81ie x1izzkki x1bdb094",k3nNDw:"xee5nap",kIyJzY:"x1e471i8 x115jf8",k1ekBW:"x18dpk69",kAMwcw:"xvhdtae",$$css:true},ticks:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kB88ic:"xe8uvvx",kogj98:"x1ghz6dp",kskxy:"xmz0i5r",kORKVm:"x1odjw0f",kmVPX3:"x1717udv",k5wCbM:"x1rohswg",$$css:true},viewport:{kjBf7l:"x4dprnk x1uczgqu",kInvED:"x11r2kya",k3XXqK:"x9v5kkp x1t137rt",kMeerF:"x1vhx2qj",kSOgLn:"x1xzczws",kacamN:"x1e4zzel",$$css:true}};

package/dist/components/meter/meter.d.ts

@@ -0,0 +1,30 @@
+import { Meter as BaseMeter } from "@base-ui/react/meter";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+type RootProps = ComponentPropsWithRef<typeof BaseMeter.Root>;
+type TrackProps = ComponentPropsWithRef<typeof BaseMeter.Track>;
+type IndicatorProps = ComponentPropsWithRef<typeof BaseMeter.Indicator>;
+type LabelProps = ComponentPropsWithRef<typeof BaseMeter.Label>;
+type ValueProps = ComponentPropsWithRef<typeof BaseMeter.Value>;
+type Part<T> = Omit<Closed<T>, "data-slot" | "role">;
+export type MeterProps = Omit<Part<RootProps>, "aria-valuemax" | "aria-valuemin" | "aria-valuenow"> & {
+    ref?: RootProps["ref"];
+};
+export type MeterTrackProps = Part<TrackProps> & {
+    ref?: TrackProps["ref"];
+};
+export type MeterIndicatorProps = Part<IndicatorProps> & {
+    ref?: IndicatorProps["ref"];
+};
+export type MeterLabelProps = Part<LabelProps> & {
+    ref?: LabelProps["ref"];
+};
+export type MeterValueProps = Part<ValueProps> & {
+    ref?: ValueProps["ref"];
+};
+export declare function Meter({ children, locale, max, min, ref: forwardedRef, render, value, ...rest }: MeterProps): import("react").JSX.Element;
+export declare function MeterTrack({ children, ref: forwardedRef, render, ...rest }: MeterTrackProps): import("react").JSX.Element;
+export declare function MeterIndicator({ children, ref: forwardedRef, render, ...rest }: MeterIndicatorProps): import("react").JSX.Element;
+export declare function MeterLabel({ children, ref: forwardedRef, render, ...rest }: MeterLabelProps): import("react").JSX.Element;
+export declare function MeterValue({ children, ref: forwardedRef, render, ...rest }: MeterValueProps): import("react").JSX.Element;
+export {};

package/dist/components/meter/meter.js

@@ -0,0 +1,2 @@
+"use client";import{Meter as BaseMeter}from"@base-ui/react/meter";import{props}from"@stylexjs/stylex";import{protectRenderSlot}from"../../render-utils";import{typeRoles}from"../../styles/typography.styles";import{meterStyles}from"./meter.styles";import{jsx as _jsx}from"react/jsx-runtime";function stripReservedProps(rest){for(const name of["className","data-slot","role","style"]){Reflect.deleteProperty(rest,name);}}function stripRangeProps(rest){for(const name of["aria-valuemax","aria-valuemin","aria-valuenow"]){Reflect.deleteProperty(rest,name);}}function validateRange(value,min,max){if(!(Number.isFinite(value)&&Number.isFinite(min)&&Number.isFinite(max))){throw new TypeError("Meter value, min, and max must be finite numbers.");}if(min>=max){throw new RangeError("Meter min must be less than max.");}}// Without children there is no MeterLabel, so the root must carry the name.
+function validateName(rest,hasChildren){const name=rest["aria-label"]??rest["aria-labelledby"]??"";if(!(hasChildren||name.trim())){throw new TypeError("Meter requires a MeterLabel child, aria-label, or aria-labelledby.");}}export function Meter({children,locale="en",max=100,min=0,ref:forwardedRef,render,value,...rest}){stripReservedProps(rest);stripRangeProps(rest);validateRange(value,min,max);validateName(rest,children!==undefined);return/*#__PURE__*/_jsx(BaseMeter.Root,{...rest,"data-slot":"meter",locale:locale,max:max,min:min,ref:forwardedRef,render:protectRenderSlot("meter",render,{role:"meter"}),value:value,...props(meterStyles.root,typeRoles.body),children:children??/*#__PURE__*/_jsx(MeterTrack,{children:/*#__PURE__*/_jsx(MeterIndicator,{})})});}export function MeterTrack({children,ref:forwardedRef,render,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx(BaseMeter.Track,{...rest,"data-slot":"meter-track",ref:forwardedRef,render:protectRenderSlot("meter-track",render),...props(meterStyles.track),children:children});}export function MeterIndicator({children,ref:forwardedRef,render,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx(BaseMeter.Indicator,{...rest,"data-slot":"meter-indicator",ref:forwardedRef,render:protectRenderSlot("meter-indicator",render),...props(meterStyles.indicator),children:children});}export function MeterLabel({children,ref:forwardedRef,render,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx(BaseMeter.Label,{...rest,"data-slot":"meter-label",ref:forwardedRef,render:protectRenderSlot("meter-label",render),...props(meterStyles.label),children:children});}export function MeterValue({children,ref:forwardedRef,render,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx(BaseMeter.Value,{...rest,"data-slot":"meter-value",ref:forwardedRef,render:protectRenderSlot("meter-value",render),...props(meterStyles.value),children:children});}

package/dist/components/meter/meter.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/motion.stylex";import{duration,easing}from"../../styles/motion.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontWeight}from"../../styles/typography.stylex";export const meterStyles={indicator:{kWkggS:"x1bdoiv7",kaIpWk:"x10hpsqq",kB7OPa:"x9f619",k1xSpc:"x1lliihq",kZKoxP:"x3igimt",kIyJzY:"x1e471i8 x115jf8",k1ekBW:"xxrbq2n",kAMwcw:"xvhdtae",$$css:true},label:{kMwMTN:"x14tvo57",k63SB2:"xuku2lm",$$css:true},root:{kB7OPa:"x9f619",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",kzqmXN:"xh8yej3",$$css:true},track:{kWkggS:"xcmsz27",kaIpWk:"x10hpsqq",kB7OPa:"x9f619",k1xSpc:"x1lliihq",kZKoxP:"x164u9eo",kVQacm:"xb3r6kr",kVAEAm:"x1n2onr6",kzqmXN:"xh8yej3",$$css:true},value:{kMwMTN:"x14tvo57",kcqcaj:"xss6m8b",$$css:true}};

package/dist/components/metric/metric.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithRef } from "react";
+export type MetricProps = Omit<ComponentPropsWithRef<"div">, "className" | "data-slot" | "style">;
+export type MetricLabelProps = Omit<ComponentPropsWithRef<"div">, "className" | "data-slot" | "style">;
+export type MetricValueProps = Omit<ComponentPropsWithRef<"div">, "className" | "data-slot" | "style">;
+export type MetricDescriptionProps = Omit<ComponentPropsWithRef<"div">, "className" | "data-slot" | "style">;
+export declare function Metric({ children, ref: forwardedRef, ...rest }: MetricProps): import("react").JSX.Element;
+export declare function MetricLabel({ children, ref: forwardedRef, ...rest }: MetricLabelProps): import("react").JSX.Element;
+export declare function MetricValue({ children, ref: forwardedRef, ...rest }: MetricValueProps): import("react").JSX.Element;
+export declare function MetricDescription({ children, ref: forwardedRef, ...rest }: MetricDescriptionProps): import("react").JSX.Element;
+export type MetricDeltaProps = Omit<ComponentPropsWithRef<"span">, "children" | "className" | "data-slot" | "style"> & {
+    /** Which direction is good: "up" by default, "down" for costs or errors. */
+    good?: "down" | "up";
+    locale?: string;
+    /** Fractional change: 0.16 renders "+16%". */
+    value: number;
+};
+export declare function MetricDelta({ good, locale, value, ...rest }: MetricDeltaProps): import("react").JSX.Element;

package/dist/components/metric/metric.js

@@ -0,0 +1,4 @@
+import{props}from"@stylexjs/stylex";import{typeRoles}from"../../styles/typography.styles";import{metricStyles}from"./metric.styles";import{jsx as _jsx}from"react/jsx-runtime";export function Metric({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"metric",ref:forwardedRef,...props(metricStyles.root),children:children});}export function MetricLabel({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"metric-label",ref:forwardedRef,...props(metricStyles.label),children:children});}export function MetricValue({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"metric-value",ref:forwardedRef,...props(metricStyles.value,typeRoles.numeric),children:children});}export function MetricDescription({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"metric-description",ref:forwardedRef,...props(metricStyles.description),children:children});}// Keyed by direction relative to the good direction: worse, flat, better.
+const deltaTones={"-1":metricStyles.deltaWorse,"0":metricStyles.deltaFlat,"1":metricStyles.deltaBetter};// A compact change chip. The sign carries the direction; the tint says whether
+// that direction is good.
+export function MetricDelta({good="up",locale="en-US",value,...rest}){const direction=Math.sign(value);const tone=good==="up"?direction:-direction;for(const name of["className","data-slot","style"]){Reflect.deleteProperty(rest,name);}return/*#__PURE__*/_jsx("span",{...rest,"data-slot":"metric-delta",...props(typeRoles.label,metricStyles.delta,deltaTones[tone]),children:new Intl.NumberFormat(locale,{maximumFractionDigits:1,signDisplay:"exceptZero",style:"percent"}).format(value)});}

package/dist/components/metric/metric.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{fontSize,fontWeight,lineHeight}from"../../styles/typography.stylex";export const metricStyles={delta:{kaIpWk:"xvozwe9",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kcqcaj:"xss6m8b",k8WAf4:"x48vkq2",kg3NbH:"xwf2n6",khDVqt:"xuxw1ft",kzqmXN:"xeq5yr9",$$css:true},deltaBetter:{kWkggS:"x80umms",kMwMTN:"x19d0d4p",$$css:true},deltaFlat:{kWkggS:"x1vs9wzj",kMwMTN:"x125omll",$$css:true},deltaWorse:{kWkggS:"xyio8l9",kMwMTN:"x1ytrddi",$$css:true},description:{kMwMTN:"x125omll",kGuDYH:"xlh8hku",k63SB2:"x1lo1l87",kLWn49:"x2xzzt7",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",kHjlTd:"x1mzt3pk",$$css:true},label:{kMwMTN:"x125omll",kGuDYH:"xlh8hku",k63SB2:"xuku2lm",kLWn49:"x2xzzt7",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",kHjlTd:"x1mzt3pk",$$css:true},root:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",$$css:true},value:{kMwMTN:"x14tvo57",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",kHjlTd:"xj0a0fe",$$css:true}};

package/dist/components/metric-trend/metric-trend.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+export type MetricTrendProps = Omit<Closed<ComponentPropsWithRef<"div">>, "children" | "data-slot" | "role"> & {
+    /** Top-right controls such as a ChartLegend or a period switcher. */
+    actions?: ReactNode;
+    /** The chart, usually a TimeSeries or CategoryComparison. Omit for a stat card. */
+    children?: ReactNode;
+    /** A MetricDelta beside the value. */
+    delta?: ReactNode;
+    /**
+     * Where the change sits. "footer" moves the description and delta into an
+     * inset strip at the bottom of the card.
+     */
+    deltaPlacement?: "footer" | "value";
+    description?: ReactNode;
+    /** A glyph shown in a small brand tile before the label. */
+    icon?: ReactNode;
+    label: ReactNode;
+    /** The headline number. Omit it when the chart is the headline, such as rings. */
+    value?: ReactNode;
+    /** A currency sign or unit before the value, set smaller and muted: "$". */
+    valuePrefix?: string;
+    /** A unit after the value, set smaller and muted: "h", "ms", "%". */
+    valueSuffix?: string;
+};
+export declare function MetricTrend({ actions, children, delta, deltaPlacement, description, icon, label, ref: forwardedRef, value, valuePrefix, valueSuffix, ...rest }: MetricTrendProps): import("react").JSX.Element;

package/dist/components/metric-trend/metric-trend.js

@@ -0,0 +1,6 @@
+import{props}from"@stylexjs/stylex";import{Metric,MetricDescription,MetricLabel,MetricValue}from"../metric/metric";import{metricTrendStyles}from"./metric-trend.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";// The numeral leads; currency signs and units step back so the number reads
+// first.
+function HeadlineValue({value,valuePrefix,valueSuffix}){return/*#__PURE__*/_jsxs(MetricValue,{children:[valuePrefix?/*#__PURE__*/_jsx("span",{...props(metricTrendStyles.unit,metricTrendStyles.prefix),children:valuePrefix}):null,value,valueSuffix?/*#__PURE__*/_jsx("span",{...props(metricTrendStyles.unit,metricTrendStyles.suffix),children:valueSuffix}):null]});}function MetricTrendFooter({delta,description}){return/*#__PURE__*/_jsxs("div",{"data-slot":"metric-trend-footer",...props(metricTrendStyles.footer),children:[description===undefined||description===null?/*#__PURE__*/_jsx("span",{}):/*#__PURE__*/_jsx(MetricDescription,{children:description}),delta]});}// A metric card: label, value with an optional change chip, a comparison line,
+// optional actions, and an optional chart below. Without a chart it is a stat
+// card.
+function MetricTrendLead({delta,description,icon,label,value,valuePrefix,valueSuffix}){return/*#__PURE__*/_jsx("div",{...props(metricTrendStyles.lead),children:/*#__PURE__*/_jsxs(Metric,{children:[/*#__PURE__*/_jsx(MetricLabel,{children:icon?/*#__PURE__*/_jsxs("span",{...props(metricTrendStyles.labelRow),children:[/*#__PURE__*/_jsx("span",{"aria-hidden":"true","data-slot":"metric-trend-icon",...props(metricTrendStyles.icon),children:icon}),label]}):label}),value===undefined||value===null?null:/*#__PURE__*/_jsxs("div",{...props(metricTrendStyles.valueRow),children:[/*#__PURE__*/_jsx(HeadlineValue,{value:value,valuePrefix:valuePrefix,valueSuffix:valueSuffix}),delta]}),description===undefined||description===null?null:/*#__PURE__*/_jsx(MetricDescription,{children:description})]})});}export function MetricTrend({actions,children,delta,deltaPlacement="value",description,icon,label,ref:forwardedRef,value,valuePrefix,valueSuffix,...rest}){for(const name of["className","data-slot","role","style"]){Reflect.deleteProperty(rest,name);}const inFooter=deltaPlacement==="footer";return/*#__PURE__*/_jsxs("div",{...rest,"data-slot":"metric-trend",ref:forwardedRef,...props(metricTrendStyles.root),children:[/*#__PURE__*/_jsxs("div",{"data-slot":"metric-trend-header",...props(metricTrendStyles.header),children:[/*#__PURE__*/_jsx(MetricTrendLead,{delta:inFooter?undefined:delta,description:inFooter?undefined:description,icon:icon,label:label,value:value,valuePrefix:valuePrefix,valueSuffix:valueSuffix}),actions?/*#__PURE__*/_jsx("div",{"data-slot":"metric-trend-actions",...props(metricTrendStyles.actions),children:actions}):null]}),children,inFooter?/*#__PURE__*/_jsx(MetricTrendFooter,{delta:delta,description:description}):null]});}

package/dist/components/metric-trend/metric-trend.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/dimensions.stylex";import{controlSize,glyphSize}from"../../styles/dimensions.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 metricTrendStyles={actions:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kmuXW:"x2lah0s",kwnvtZ:"x1a02dak",kOIVth:"xp4ho6d",$$css:true},footer:{kGNEyG:"x6s0dn4",kWkggS:"xwn18cz",kaIpWk:"x42tf2m",k1xSpc:"x78zum5",kOIVth:"xiw8qbs",kjj79g:"x1qughib",k1K539:"x1p40rmo",keoZOQ:"xr1yuqi",kUOVxO:"x1tjh6xj",k7Eaqz:"xeuugli",k8WAf4:"x391bbb",kg3NbH:"xy7odpl",$$css:true},header:{kGNEyG:"x1cy8zhl",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"xiw8qbs",kjj79g:"x1qughib",k7Eaqz:"xeuugli",$$css:true},icon:{kGNEyG:"x6s0dn4",kWkggS:"x16d8uok",kaIpWk:"xvozwe9",kMwMTN:"xdnyjpo",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kZKoxP:"x11huzal xud2w1",kjj79g:"xl56j7k",kzqmXN:"x12etf84 x1sxroq0",$$css:true},labelRow:{kGNEyG:"x6s0dn4",k1xSpc:"x3nfvp2",kOIVth:"xp4ho6d",k7Eaqz:"xeuugli",$$css:true},lead:{kGNEyG:"x1cy8zhl",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xiw8qbs",k7Eaqz:"xeuugli",$$css:true},prefix:{k71WvV:"x1x32cvg",$$css:true},root:{kWkggS:"xu84zt7",kaIpWk:"x1jw0md8",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xfy154a",k7Eaqz:"xeuugli",k8WAf4:"x7bohs8",kg3NbH:"xaqi9fd",$$css:true},suffix:{keTefX:"xfu946g",$$css:true},unit:{kMwMTN:"x125omll",kGuDYH:"x2jk2ty x12ama9c",k63SB2:"xuku2lm",kLWn49:"xf8w09u x1rn0pvf",$$css:true},valueRow:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"xp4ho6d",k7Eaqz:"xeuugli",$$css:true}};

package/dist/components/navigation-menu/navigation-menu.d.ts

@@ -0,0 +1,40 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+type Part<T> = Omit<Closed<T>, "data-slot" | "render" | "role">;
+type BaseRootProps = ComponentPropsWithRef<typeof BaseNavigationMenu.Root>;
+type BaseListProps = ComponentPropsWithRef<typeof BaseNavigationMenu.List>;
+type BaseItemProps = ComponentPropsWithRef<typeof BaseNavigationMenu.Item>;
+type BaseTriggerProps = ComponentPropsWithRef<typeof BaseNavigationMenu.Trigger>;
+type BaseContentProps = ComponentPropsWithRef<typeof BaseNavigationMenu.Content>;
+type BaseLinkProps = ComponentPropsWithRef<typeof BaseNavigationMenu.Link>;
+type BasePortalProps = Closed<ComponentPropsWithRef<typeof BaseNavigationMenu.Portal>>;
+type BasePositionerProps = ComponentPropsWithRef<typeof BaseNavigationMenu.Positioner>;
+type BasePopupProps = ComponentPropsWithRef<typeof BaseNavigationMenu.Popup>;
+export type NavigationMenuProps = Omit<Part<BaseRootProps>, "aria-label" | "orientation"> & {
+    "aria-label"?: string;
+};
+export type NavigationMenuListProps = Part<BaseListProps>;
+export type NavigationMenuItemProps = Part<BaseItemProps>;
+export type NavigationMenuTriggerProps = Omit<Closed<BaseTriggerProps>, "data-slot" | "role">;
+export type NavigationMenuContentProps = Omit<Closed<BaseContentProps>, "data-slot" | "role">;
+export type NavigationMenuLinkProps = Omit<Closed<BaseLinkProps>, "data-slot" | "role"> & {
+    /** One line under the label, for links in a menu panel. */
+    description?: ReactNode;
+};
+export type NavigationMenuPopupProps = Omit<Part<BasePopupProps>, "children"> & {
+    align?: BasePositionerProps["align"];
+    alignOffset?: BasePositionerProps["alignOffset"];
+    collisionPadding?: BasePositionerProps["collisionPadding"];
+    portalProps?: Omit<Part<BasePortalProps>, "children">;
+    side?: BasePositionerProps["side"];
+    sideOffset?: BasePositionerProps["sideOffset"];
+};
+export declare function NavigationMenu({ "aria-label": ariaLabel, ref: forwardedRef, ...rest }: NavigationMenuProps): import("react").JSX.Element;
+export declare function NavigationMenuList({ ref: forwardedRef, ...rest }: NavigationMenuListProps): import("react").JSX.Element;
+export declare function NavigationMenuItem({ ref: forwardedRef, ...rest }: NavigationMenuItemProps): import("react").JSX.Element;
+export declare function NavigationMenuTrigger({ children, disabled, ref: forwardedRef, render, type, ...rest }: NavigationMenuTriggerProps): import("react").JSX.Element;
+export declare function NavigationMenuContent({ ref: forwardedRef, render, ...rest }: NavigationMenuContentProps): import("react").JSX.Element;
+export declare function NavigationMenuLink({ children, description, active, ref: forwardedRef, render, ...rest }: NavigationMenuLinkProps): import("react").JSX.Element;
+export declare function NavigationMenuPopup({ align, alignOffset, collisionPadding, portalProps, ref: forwardedRef, side, sideOffset, ...rest }: NavigationMenuPopupProps): import("react").JSX.Element;
+export {};

package/dist/components/navigation-menu/navigation-menu.js

@@ -0,0 +1 @@
+"use client";import{NavigationMenu as BaseNavigationMenu}from"@base-ui/react/navigation-menu";import{props}from"@stylexjs/stylex";import{controlLabel}from"../../control-label";import{IconChevronDown}from"../../icons";import{protectRenderSlot}from"../../render-utils";import{popoverStyles}from"../popover/popover.styles";import{navigationMenuStyles}from"./navigation-menu.styles";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";function stripProtectedProps(rest){for(const name of["className","data-slot","render","role","style"]){Reflect.deleteProperty(rest,name);}}function ChevronDown(){return/*#__PURE__*/_jsx(IconChevronDown,{"aria-hidden":"true",focusable:"false",size:"1rem"});}export function NavigationMenu({"aria-label":ariaLabel="Navigation",ref:forwardedRef,...rest}){stripProtectedProps(rest);Reflect.deleteProperty(rest,"orientation");return/*#__PURE__*/_jsx(BaseNavigationMenu.Root,{...rest,"aria-label":ariaLabel,"data-slot":"navigation-menu",orientation:"horizontal",ref:forwardedRef,...props(navigationMenuStyles.root)});}export function NavigationMenuList({ref:forwardedRef,...rest}){stripProtectedProps(rest);return/*#__PURE__*/_jsx(BaseNavigationMenu.List,{...rest,"data-slot":"navigation-menu-list",ref:forwardedRef,...props(navigationMenuStyles.list)});}export function NavigationMenuItem({ref:forwardedRef,...rest}){stripProtectedProps(rest);return/*#__PURE__*/_jsx(BaseNavigationMenu.Item,{...rest,"data-slot":"navigation-menu-item",ref:forwardedRef,...props(navigationMenuStyles.item)});}export function NavigationMenuTrigger({children,disabled,ref:forwardedRef,render,type,...rest}){stripProtectedProps(rest);const triggerStyles=props(navigationMenuStyles.link,navigationMenuStyles.trigger,!disabled&&navigationMenuStyles.interactive);return/*#__PURE__*/_jsxs(BaseNavigationMenu.Trigger,{...rest,"data-slot":"navigation-menu-trigger",disabled:disabled,ref:forwardedRef,render:protectRenderSlot("navigation-menu-trigger",render),type:render?type:type??"button",...triggerStyles,children:[controlLabel(children),/*#__PURE__*/_jsx(BaseNavigationMenu.Icon,{"data-slot":"navigation-menu-icon",...props(navigationMenuStyles.icon),children:/*#__PURE__*/_jsx(ChevronDown,{})})]});}export function NavigationMenuContent({ref:forwardedRef,render,...rest}){stripProtectedProps(rest);const contentStyles=props(navigationMenuStyles.content);return/*#__PURE__*/_jsx(BaseNavigationMenu.Content,{...rest,"data-slot":"navigation-menu-content",ref:forwardedRef,render:protectRenderSlot("navigation-menu-content",render),...contentStyles});}export function NavigationMenuLink({children,description,active,ref:forwardedRef,render,...rest}){stripProtectedProps(rest);const linkStyles=props(navigationMenuStyles.link,navigationMenuStyles.interactive,description!==undefined&&navigationMenuStyles.linkWithDescription,active&&navigationMenuStyles.active);return/*#__PURE__*/_jsx(BaseNavigationMenu.Link,{...rest,active:active,"aria-current":active?"page":undefined,"data-slot":"navigation-menu-link",ref:forwardedRef,render:protectRenderSlot("navigation-menu-link",render,{"aria-current":active?"page":undefined}),...linkStyles,children:description===undefined?controlLabel(children):/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("span",{...props(navigationMenuStyles.linkTitle),children:children}),/*#__PURE__*/_jsx("span",{...props(navigationMenuStyles.linkDescription),children:description})]})});}export function NavigationMenuPopup({align="start",alignOffset,collisionPadding=12,portalProps,ref:forwardedRef,side="bottom",sideOffset=8,...rest}){const{...safePortalProps}=portalProps??{};stripProtectedProps(rest);stripProtectedProps(safePortalProps);return/*#__PURE__*/_jsx(BaseNavigationMenu.Portal,{...safePortalProps,children:/*#__PURE__*/_jsx(BaseNavigationMenu.Positioner,{align:align,alignOffset:alignOffset,collisionPadding:collisionPadding,side:side,sideOffset:sideOffset,...props(popoverStyles.positioner,navigationMenuStyles.positioner),children:/*#__PURE__*/_jsx(BaseNavigationMenu.Popup,{...rest,"data-slot":"navigation-menu-popup",ref:forwardedRef,...props(popoverStyles.popup,navigationMenuStyles.popup),children:/*#__PURE__*/_jsx(BaseNavigationMenu.Viewport,{"data-slot":"navigation-menu-viewport",...props(navigationMenuStyles.viewport)})})})});}

package/dist/components/navigation-menu/navigation-menu.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/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/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 navigationMenuStyles={active:{kWkggS:"x16d8uok",kMwMTN:"xdnyjpo",$$css:true},content:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kskxy:"x1tv27ko",kSiTet:"xiyypsa x1hw7zpd x1hc1fzr",kORKVm:"x1odjw0f",k3aq6I:"x1wmy1sz xhlwy1x x1c071of",kIyJzY:"x1e471i8 x107nfut x18kz1lc",k1ekBW:"x6o7n8i",kAMwcw:"xvhdtae",$$css:true},icon:{kGNEyG:"x6s0dn4",kMwMTN:"x15rks2t",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kZKoxP:"x1l36t39",kjj79g:"xl56j7k",k3aq6I:"x1rc4jnv x1c071of",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x11xpdln",kAMwcw:"xvhdtae",kzqmXN:"xcdlrvm",$$css:true},interactive:{kWkggS:"x16f8uvd xnau8x9 xf3ijce xjbqb8w",$$css:true},item:{kB88ic:"xe8uvvx",k7Eaqz:"xeuugli",$$css:true},link:{kGNEyG:"x6s0dn4",k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kWkggS:"xjbqb8w",kaIpWk:"x2b34ud",kB7OPa:"x9f619",kMwMTN:"x14tvo57",kkrTdU:"x1j1ks5o x1ypdohk",k1xSpc:"x3nfvp2",kmuXW:"xsnv01j",kMv6JI:"xjb2p0i",kGuDYH:"xlh8hku",k63SB2:"x1lo1l87",kOIVth:"x13hh4mm",kZKoxP:"xgaasie",kjj79g:"x1nhvcw1",kLWn49:"x2xzzt7",ks0D6T:"x193iq5w",kAzted:"x1vigsvi",k7Eaqz:"xeuugli",kSiTet:"x1yporm9 x1hc1fzr",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1w1ofmy",k3XXqK:"x9v5kkp xzc55om",kMeerF:"x1vhx2qj",kHjlTd:"xj0a0fe",k8WAf4:"x1lmimt7",kg3NbH:"xy7odpl",kybGjl:"x1hl2dhg",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x1k8yt6i",kAMwcw:"xvhdtae",kzqmXN:"xwe2phr",$$css:true},linkDescription:{kMwMTN:"x125omll",kGuDYH:"xlh8hku",kLWn49:"x2xzzt7",$$css:true},linkTitle:{k63SB2:"xuku2lm",$$css:true},linkWithDescription:{kGNEyG:"x1cy8zhl",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xxhr3t",k8WAf4:"x391bbb",$$css:true},list:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"x13hh4mm",kB88ic:"xe8uvvx",kqGvvJ:"x10im51j",kUOVxO:"xrxpjvj",k7Eaqz:"xeuugli",k8WAf4:"xt970qd",kg3NbH:"xnjsko4",$$css:true},popup:{kskxy:"x1374xjt",k7Eaqz:"xeuugli",kVQacm:"xb3r6kr",kmVPX3:"xh23c4d",kzqmXN:"xh8yej3",$$css:true},positioner:{ks0D6T:"x1m44ap8",kzqmXN:"xnct8cm",kY2c9j:"xa9119d",$$css:true},root:{ks0D6T:"x193iq5w",k7Eaqz:"xeuugli",kVAEAm:"x1n2onr6",kzqmXN:"xeq5yr9",$$css:true},trigger:{kysU6D:"xjyslct",ksu8eU:"xng3xce",kMzoRj:"xc342km",$$css:true},viewport:{kskxy:"x1374xjt",kVQacm:"xb3r6kr",kzqmXN:"xh8yej3",$$css:true}};

package/dist/components/number-field/number-field-context.js

@@ -0,0 +1 @@
+import{createContext,useContext}from"react";import{IconArrowsHorizontal,IconArrowsVertical,IconMinus,IconPlus}from"../../icons";import{jsx as _jsx}from"react/jsx-runtime";export const NumberFieldContext=createContext({boundField:null,inputId:"",scrubLabelId:"",size:"default"});export function useNumberFieldContext(){return useContext(NumberFieldContext);}export function MinusIcon(){return/*#__PURE__*/_jsx(IconMinus,{"aria-hidden":"true",focusable:"false",size:"16"});}export function PlusIcon(){return/*#__PURE__*/_jsx(IconPlus,{"aria-hidden":"true",focusable:"false",size:"16"});}export function CursorHorizontalIcon(){return/*#__PURE__*/_jsx(IconArrowsHorizontal,{"aria-hidden":"true",focusable:"false",size:"16"});}export function CursorVerticalIcon(){return/*#__PURE__*/_jsx(IconArrowsVertical,{"aria-hidden":"true",focusable:"false",size:"16"});}

package/dist/components/number-field/number-field.d.ts

@@ -0,0 +1,11 @@
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import type { ReactElement } from "react";
+import type { NumberFieldDecrementProps, NumberFieldGroupProps, NumberFieldIncrementProps, NumberFieldInputProps, NumberFieldProps, NumberFieldScrubAreaProps } from "./number-field.types";
+export declare function NumberField({ children, id: idProp, onValueChange: userOnValueChange, ref: forwardedRef, render, size, ...rest }: NumberFieldProps): ReactElement;
+export declare function NumberFieldGroup({ children, ref: forwardedRef, render, ...rest }: NumberFieldGroupProps): ReactElement;
+export declare function NumberFieldInput({ onBlur: userOnBlur, ref: forwardedRef, render, ...rest }: NumberFieldInputProps): ReactElement;
+export declare function NumberFieldIncrement({ children, ref: forwardedRef, render, ...rest }: NumberFieldIncrementProps): ReactElement;
+export declare function NumberFieldDecrement({ children, ref: forwardedRef, render, ...rest }: NumberFieldDecrementProps): ReactElement;
+export declare function NumberFieldScrubArea({ children, label, direction, ref: forwardedRef, render, ...rest }: NumberFieldScrubAreaProps): ReactElement;
+export declare const NumberFieldPrimitive: typeof BaseNumberField;
+export type { NumberFieldDecrementProps, NumberFieldGroupProps, NumberFieldIncrementProps, NumberFieldInputProps, NumberFieldProps, NumberFieldScrubAreaProps, NumberFieldSize, } from "./number-field.types";

package/dist/components/number-field/number-field.js

@@ -0,0 +1 @@
+"use client";import{NumberField as BaseNumberField}from"@base-ui/react/number-field";import{props}from"@stylexjs/stylex";import{useCallback,useId}from"react";import{omitProps,protectRenderSlot}from"../../render-utils";import{isBoundNumberField,useBoundFieldContext}from"../field/field-context";import{numberFieldStyles}from"./number-field.styles";import{CursorHorizontalIcon,CursorVerticalIcon,MinusIcon,NumberFieldContext,PlusIcon,useNumberFieldContext}from"./number-field-context";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeStyles={default:numberFieldStyles.sizeDefault,lg:numberFieldStyles.sizeLg,sm:numberFieldStyles.sizeSm};const inputSizeStyles={default:numberFieldStyles.inputDefault,lg:numberFieldStyles.inputLg,sm:numberFieldStyles.inputSm};export function NumberField({children,id:idProp,onValueChange:userOnValueChange,ref:forwardedRef,render,size="default",...rest}){const boundContext=useBoundFieldContext();const boundField=isBoundNumberField(boundContext)?boundContext:null;const generatedId=useId();const inputId=idProp??`${generatedId}-input`;const scrubLabelId=`${generatedId}-label`;const handleBoundValueChange=useCallback((val,details)=>{userOnValueChange?.(val,details);if(!details.isCanceled){boundField?.handleChange(val);}},[boundField,userOnValueChange]);const nativeProps=omitProps(rest,["className","data-slot","style"]);return/*#__PURE__*/_jsx(NumberFieldContext.Provider,{value:{boundField,inputId,scrubLabelId,size},children:/*#__PURE__*/_jsx(BaseNumberField.Root,{...nativeProps,...(boundField?{name:boundField.name,onValueChange:handleBoundValueChange,value:boundField.state.value}:{onValueChange:userOnValueChange}),"data-slot":"number-field",id:inputId,ref:forwardedRef,render:protectRenderSlot("number-field",render),...props(numberFieldStyles.root),children:children})});}export function NumberFieldGroup({children,ref:forwardedRef,render,...rest}){const{size}=useNumberFieldContext();Reflect.deleteProperty(rest,"className");Reflect.deleteProperty(rest,"data-slot");Reflect.deleteProperty(rest,"style");return/*#__PURE__*/_jsx(BaseNumberField.Group,{...rest,"data-slot":"number-field-group",ref:forwardedRef,render:protectRenderSlot("number-field-group",render),...props(numberFieldStyles.group,sizeStyles[size]),children:children});}export function NumberFieldInput({onBlur:userOnBlur,ref:forwardedRef,render,...rest}){const{boundField,size}=useNumberFieldContext();const handleBlur=useCallback(event=>{boundField?.handleBlur();userOnBlur?.(event);},[boundField,userOnBlur]);const nativeProps=omitProps(rest,["className","data-slot","style"]);return/*#__PURE__*/_jsx(BaseNumberField.Input,{...nativeProps,"data-size":size,"data-slot":"number-field-input",onBlur:handleBlur,ref:forwardedRef,render:protectRenderSlot("number-field-input",render),...props(numberFieldStyles.input,inputSizeStyles[size])});}export function NumberFieldIncrement({children,ref:forwardedRef,render,...rest}){Reflect.deleteProperty(rest,"className");Reflect.deleteProperty(rest,"data-slot");Reflect.deleteProperty(rest,"style");Reflect.deleteProperty(rest,"tabIndex");return/*#__PURE__*/_jsx(BaseNumberField.Increment,{...rest,"data-slot":"number-field-increment",ref:forwardedRef,render:protectRenderSlot("number-field-increment",render,{tabIndex:-1}),tabIndex:-1,...props(numberFieldStyles.stepper),children:children??/*#__PURE__*/_jsx(PlusIcon,{})});}export function NumberFieldDecrement({children,ref:forwardedRef,render,...rest}){Reflect.deleteProperty(rest,"className");Reflect.deleteProperty(rest,"data-slot");Reflect.deleteProperty(rest,"style");Reflect.deleteProperty(rest,"tabIndex");return/*#__PURE__*/_jsx(BaseNumberField.Decrement,{...rest,"data-slot":"number-field-decrement",ref:forwardedRef,render:protectRenderSlot("number-field-decrement",render,{tabIndex:-1}),tabIndex:-1,...props(numberFieldStyles.stepper),children:children??/*#__PURE__*/_jsx(MinusIcon,{})});}export function NumberFieldScrubArea({children,label,direction="horizontal",ref:forwardedRef,render,...rest}){const{inputId,scrubLabelId}=useNumberFieldContext();Reflect.deleteProperty(rest,"className");Reflect.deleteProperty(rest,"data-direction");Reflect.deleteProperty(rest,"data-slot");Reflect.deleteProperty(rest,"style");return/*#__PURE__*/_jsxs(BaseNumberField.ScrubArea,{...rest,"data-direction":direction,"data-slot":"number-field-scrub-area",direction:direction,ref:forwardedRef,render:protectRenderSlot("number-field-scrub-area",render,{"data-direction":direction}),...props(numberFieldStyles.scrubArea,direction==="vertical"?numberFieldStyles.scrubAreaVertical:null),children:[/*#__PURE__*/_jsx("label",{"data-slot":"number-field-scrub-area-label",htmlFor:inputId,id:scrubLabelId,...props(numberFieldStyles.scrubLabel),children:label??children}),/*#__PURE__*/_jsx(BaseNumberField.ScrubAreaCursor,{"data-slot":"number-field-scrub-area-cursor",...props(numberFieldStyles.scrubAreaCursor),children:direction==="vertical"?/*#__PURE__*/_jsx(CursorVerticalIcon,{}):/*#__PURE__*/_jsx(CursorHorizontalIcon,{})})]});}export const NumberFieldPrimitive=BaseNumberField;

package/dist/components/number-field/number-field.styles.js

@@ -0,0 +1 @@
+import{create}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}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 numberFieldStyles={group:{kGNEyG:"x6s0dn4",k44tkh:"x5dp7bl",kKVMdj:"x1hkl6p9",kWkggS:"x1627ixx x19t41ab xvojraa",kVAM5u:"x10sk57q x1bdy5uv x9r1u3d",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"xiy1ocm x1xxjdaf",kB7OPa:"x9f619",kMwMTN:"xdgftgc x14tvo57",k1xSpc:"x78zum5",kjBf7l:"x15jlgto x1uczgqu",kInvED:"x1anx7ov x1w1ofmy",k3XXqK:"x1nmiukf xaatb59",kMeerF:"xogh5yg x1k57tk5",kVQacm:"xb3r6kr",kVAEAm:"x1n2onr6",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x1xpfdt",kAMwcw:"xvhdtae",kzqmXN:"xh8yej3",$$css:true},input:{k8Qsv1:"x10l60j5",kH8XJS:"x7xwk5j",kysU6D:"xjyslct",kWkggS:"xjbqb8w",kVAM5u:"x9r1u3d",ksu8eU:"xng3xce",kMzoRj:"xc342km",kGVxlE:"x1gnnqk1",kB7OPa:"x9f619",kMwMTN:"x1heor9g",kkrTdU:"x1s07b3s x1ed109x",k1xSpc:"x1lliihq",kCS8Yb:"x1t1x2f9",kzQI83:"x1iyjqo2",kmuXW:"xs83m0k",kMv6JI:"xjb2p0i",kGuDYH:"x12ama9c",kcqcaj:"xss6m8b",k63SB2:"x1lo1l87",kLWn49:"x1rn0pvf",k7Eaqz:"xeuugli",kSiTet:"x1hc1fzr",kjBf7l:"x1uczgqu",k3XXqK:"x1t137rt",kMeerF:"x1k57tk5",k8WAf4:"x1a8o3s8",kg3NbH:"xdbhxi8",k9WMMc:"x2b8uid",kzqmXN:"x14atkfc",$$css:true},inputDefault:{kGuDYH:"x12ama9c",$$css:true},inputLg:{kGuDYH:"x12ama9c",$$css:true},inputSm:{kGuDYH:"xs18rgd x12ama9c",$$css:true},root:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",kzqmXN:"xh8yej3",$$css:true},scrubArea:{kGNEyG:"x6s0dn4",kkrTdU:"x1fo6bql x7eptgl",k1xSpc:"x3nfvp2",kOIVth:"x13hh4mm",kFalU9:"x5ve5x3",kfSwDN:"x87ps6o",kzqmXN:"xeq5yr9",$$css:true},scrubAreaCursor:{kGNEyG:"x6s0dn4",kWkggS:"xwn18cz",kVAM5u:"x16kvs7",kaIpWk:"x1jw0md8",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"xxmju8b",kMwMTN:"x14tvo57",k1xSpc:"x3nfvp2",kZKoxP:"xam5rvr",kjj79g:"xl56j7k",k8WAf4:"x1a8o3s8",kg3NbH:"xdbhxi8",kfzvcC:"x47corl",kzqmXN:"xp8d6y2",kY2c9j:"xa9119d",$$css:true},scrubAreaVertical:{kkrTdU:"x1fo6bql x1e5i8e3",$$css:true},scrubLabel:{kMwMTN:"x14tvo57",kkrTdU:"xmper1u",kGuDYH:"x12ama9c",k63SB2:"x1lo1l87",kLWn49:"x1rn0pvf",kfSwDN:"x87ps6o",$$css:true},sizeDefault:{kaIpWk:"x1jw0md8",kAzted:"x1atkrcx",$$css:true},sizeLg:{kaIpWk:"x1jw0md8",kGuDYH:"x12ama9c",kAzted:"x12eq223",$$css:true},sizeSm:{kaIpWk:"x2b34ud",kGuDYH:"xlh8hku",kAzted:"x1vigsvi",$$css:true},stepper:{kGNEyG:"x6s0dn4",kSGwAc:"xkh2ocl",kysU6D:"xjyslct",kWkggS:"xzgpoov xyqy9un xjbqb8w",kVAM5u:"x9r1u3d",ksu8eU:"xng3xce",kMzoRj:"xc342km",kB7OPa:"x9f619",kMwMTN:"x1ez5psn x1heor9g",kkrTdU:"x1fo6bql x1ypdohk",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kjj79g:"xl56j7k",kAzted:"x1rqwxy8",k7Eaqz:"x1xclfui",kjBf7l:"x1uczgqu",k3XXqK:"x1t137rt",kMeerF:"x1k57tk5",k8WAf4:"x1a8o3s8",kg3NbH:"xdbhxi8",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"xs2xxs2",kAMwcw:"xvhdtae",kfSwDN:"x87ps6o",$$css:true}};

package/dist/components/number-field/number-field.types.d.ts

@@ -0,0 +1,30 @@
+import type { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+type Closed<T> = Omit<T, "className" | "data-slot" | "style">;
+export type NumberFieldSize = "default" | "sm" | "lg";
+export type NumberFieldProps = Closed<NumberFieldPrimitive.Root.Props> & {
+    children?: ReactNode;
+    ref?: ComponentPropsWithRef<"div">["ref"];
+    size?: NumberFieldSize;
+};
+export type NumberFieldGroupProps = Closed<NumberFieldPrimitive.Group.Props> & {
+    children?: ReactNode;
+    ref?: ComponentPropsWithRef<"div">["ref"];
+};
+export type NumberFieldInputProps = Closed<NumberFieldPrimitive.Input.Props> & {
+    ref?: ComponentPropsWithRef<"input">["ref"];
+};
+export type NumberFieldIncrementProps = Omit<Closed<NumberFieldPrimitive.Increment.Props>, "tabIndex"> & {
+    children?: ReactNode;
+    ref?: ComponentPropsWithRef<"button">["ref"];
+};
+export type NumberFieldDecrementProps = Omit<Closed<NumberFieldPrimitive.Decrement.Props>, "tabIndex"> & {
+    children?: ReactNode;
+    ref?: ComponentPropsWithRef<"button">["ref"];
+};
+export type NumberFieldScrubAreaProps = Omit<Closed<NumberFieldPrimitive.ScrubArea.Props>, "data-direction"> & {
+    children?: ReactNode;
+    label?: string;
+    ref?: ComponentPropsWithRef<"span">["ref"];
+};
+export {};

package/dist/components/number-field/number-field.types.js

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

package/dist/components/otp-field/otp-field.d.ts

@@ -0,0 +1,21 @@
+import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+export type Closed<T> = Omit<T, "className" | "data-slot" | "style">;
+export type OTPFieldSize = "default" | "sm" | "lg";
+export type OTPFieldProps = Closed<BaseOTPField.Root.Props> & {
+    children?: ReactNode;
+    length: number;
+    ref?: ComponentPropsWithRef<"div">["ref"];
+    size?: OTPFieldSize;
+};
+export type OTPFieldInputProps = Closed<BaseOTPField.Input.Props> & {
+    ref?: ComponentPropsWithRef<"input">["ref"];
+};
+export type OTPFieldSeparatorProps = Closed<BaseOTPField.Separator.Props> & {
+    children?: ReactNode;
+    ref?: ComponentPropsWithRef<"div">["ref"];
+};
+export declare function OTPField({ children, length, onBlur: userOnBlur, onValueChange: userOnValueChange, ref: forwardedRef, render, size, ...rest }: OTPFieldProps): ReactElement;
+export declare function OTPFieldInput({ ref: forwardedRef, render, ...rest }: OTPFieldInputProps): ReactElement;
+export declare function OTPFieldSeparator({ children, ref: forwardedRef, render, ...rest }: OTPFieldSeparatorProps): ReactElement;
+export declare const OTPFieldPrimitive: typeof BaseOTPField;

package/dist/components/otp-field/otp-field.js

@@ -0,0 +1 @@
+"use client";import{OTPField as BaseOTPField}from"@base-ui/react/otp-field";import{props}from"@stylexjs/stylex";import{createContext,useCallback,useContext}from"react";import{omitProps,protectRenderSlot}from"../../render-utils";import{isBoundStringField,useBoundFieldContext}from"../field/field-context";import{otpFieldStyles}from"./otp-field.styles";import{jsx as _jsx}from"react/jsx-runtime";const OTPFieldContext=createContext({size:"default"});function renderDefaultSlots(length){const slots=[];for(let index=0;index<length;index+=1){slots.push(/*#__PURE__*/_jsx(OTPFieldInput,{},`otp-field-input-${index}`));}return slots;}export function OTPField({children,length,onBlur:userOnBlur,onValueChange:userOnValueChange,ref:forwardedRef,render,size="default",...rest}){const boundContext=useBoundFieldContext();const boundField=isBoundStringField(boundContext)?boundContext:null;const handleBoundBlur=useCallback(event=>{userOnBlur?.(event);if(!(event.relatedTarget instanceof Node&&event.currentTarget.contains(event.relatedTarget))){boundField?.handleBlur();}},[boundField,userOnBlur]);const handleBoundValueChange=useCallback((val,details)=>{userOnValueChange?.(val,details);if(!details.isCanceled){boundField?.handleChange(val);}},[boundField,userOnValueChange]);const nativeProps=omitProps(rest,["className","data-slot","style"]);const content=children===undefined?renderDefaultSlots(length):children;return/*#__PURE__*/_jsx(OTPFieldContext.Provider,{value:{size},children:/*#__PURE__*/_jsx(BaseOTPField.Root,{...nativeProps,...(boundField?{name:boundField.name,onBlur:handleBoundBlur,onValueChange:handleBoundValueChange,value:boundField.state.value}:{onBlur:userOnBlur,onValueChange:userOnValueChange}),"data-size":size,"data-slot":"otp-field",length:length,ref:forwardedRef,render:protectRenderSlot("otp-field",render,{"data-size":size}),...props(otpFieldStyles.root),children:content})});}const inputSizeStyles={default:otpFieldStyles.inputDefault,lg:otpFieldStyles.inputLg,sm:otpFieldStyles.inputSm};export function OTPFieldInput({ref:forwardedRef,render,...rest}){const{size}=useContext(OTPFieldContext);Reflect.deleteProperty(rest,"className");Reflect.deleteProperty(rest,"data-slot");Reflect.deleteProperty(rest,"style");return/*#__PURE__*/_jsx(BaseOTPField.Input,{...rest,"data-size":size,"data-slot":"otp-field-input",ref:forwardedRef,render:protectRenderSlot("otp-field-input",render,{"data-size":size}),...props(otpFieldStyles.input,inputSizeStyles[size])});}export function OTPFieldSeparator({children,ref:forwardedRef,render,...rest}){Reflect.deleteProperty(rest,"className");Reflect.deleteProperty(rest,"data-slot");Reflect.deleteProperty(rest,"style");return/*#__PURE__*/_jsx(BaseOTPField.Separator,{...rest,"data-slot":"otp-field-separator",ref:forwardedRef,render:protectRenderSlot("otp-field-separator",render),...props(otpFieldStyles.separator),children:children});}export const OTPFieldPrimitive=BaseOTPField;

package/dist/components/otp-field/otp-field.styles.js

@@ -0,0 +1 @@
+import{create}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}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 otpFieldStyles={input:{k8Qsv1:"x10l60j5",kH8XJS:"x7xwk5j",k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kysU6D:"xjyslct",kOBAk4:"x1plog1",kWkggS:"xnkn13k x1uyda3a xxy274o x18irba8 x1ikxaq8 xvojraa",kVAM5u:"x1d6b12j xx0rnbg x9r1u3d",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"x1wzvpah x1xxjdaf",kB7OPa:"x9f619",kMwMTN:"x67n4mj x14tvo57",kkrTdU:"x57cc4 x1ed109x",k1xSpc:"x1lliihq",kMv6JI:"xjb2p0i",kGuDYH:"x12ama9c",kcqcaj:"xss6m8b",k63SB2:"x1lo1l87",kLWn49:"x1rn0pvf",k7Eaqz:"xzx07ka",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x7jjmpn x1w1ofmy",k3XXqK:"x9v5kkp xzc55om",kMeerF:"xm9seqh x1vhx2qj",k8WAf4:"x1a8o3s8",kg3NbH:"x19y3ds7",k9WMMc:"x2b8uid",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x1xpfdt",kAMwcw:"xvhdtae",$$css:true},inputDefault:{kaIpWk:"x1jw0md8",kGuDYH:"x12ama9c",kZKoxP:"xt7dq6l",kzqmXN:"xkpcdi8",$$css:true},inputLg:{kaIpWk:"x1jw0md8",kGuDYH:"x12ama9c",kZKoxP:"xt7dq6l",kzqmXN:"x1kmmwjt",$$css:true},inputSm:{kaIpWk:"x2b34ud",kGuDYH:"xs18rgd x12ama9c",kZKoxP:"xt7dq6l",kzqmXN:"x14pcf9u",$$css:true},root:{kGNEyG:"x6s0dn4",kB7OPa:"x9f619",k1xSpc:"x3nfvp2",kOIVth:"xp4ho6d",ks0D6T:"x193iq5w",k7Eaqz:"xeuugli",kXHlph:"xw2csxc",kmVPX3:"x17y9dx8",katHQp:"x1g2bcle",$$css:true},separator:{kGNEyG:"x6s0dn4",kMwMTN:"xbb0na1",k1xSpc:"x3nfvp2",kGuDYH:"x12ama9c",kjj79g:"xl56j7k",kLWn49:"x1wrb330",kfSwDN:"x87ps6o",$$css:true}};

package/dist/components/overflow-list/overflow-list.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithRef, type ReactElement } from "react";
+import type { Closed } from "../../closed";
+import type { ListItemProps } from "../list/list";
+export type OverflowListProps = Omit<Closed<ComponentPropsWithRef<"div">>, "aria-label" | "children" | "data-slot" | "role"> & {
+    "aria-label": string;
+    children?: ReactElement<ListItemProps> | readonly ReactElement<ListItemProps>[];
+    visibleCount?: number;
+    overflowLabel?: string;
+};
+export declare function OverflowList({ "aria-label": ariaLabel, children, overflowLabel, ref: forwardedRef, visibleCount, ...rest }: OverflowListProps): import("react").JSX.Element;

package/dist/components/overflow-list/overflow-list.js

@@ -0,0 +1,3 @@
+"use client";import{props}from"@stylexjs/stylex";import{Children}from"react";import{typeRoles}from"../../styles/typography.styles";import{Button}from"../button/button";import{Popover,PopoverPopup,PopoverTrigger}from"../popover/popover";import{overflowListStyles}from"./overflow-list.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function OverflowList({"aria-label":ariaLabel,children,overflowLabel="More items",ref:forwardedRef,visibleCount=3,...rest}){if(!ariaLabel?.trim()){throw new TypeError("OverflowList requires a non-empty aria-label.");}if(!Number.isSafeInteger(visibleCount)||visibleCount<0){throw new RangeError("visibleCount must be a non-negative safe integer");}for(const prop of["className","data-slot","role","style"]){Reflect.deleteProperty(rest,prop);}const items=Children.toArray(children);const visibleItems=items.slice(0,visibleCount);const overflowItems=items.slice(visibleItems.length);return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"overflow-list",ref:forwardedRef,children:/*#__PURE__*/_jsxs("ul",{"aria-label":ariaLabel,"data-slot":"overflow-list-items"// biome-ignore lint/a11y/noRedundantRoles: list markers are removed, which can hide list semantics in Safari.
+,role:"list",...props(overflowListStyles.items,typeRoles.body),children:[visibleItems,overflowItems.length>0?/*#__PURE__*/_jsx("li",{"data-slot":"overflow-list-trigger-item",...props(overflowListStyles.triggerItem),children:/*#__PURE__*/_jsxs(Popover,{children:[/*#__PURE__*/_jsxs(PopoverTrigger,{"aria-label":`${overflowLabel} (${overflowItems.length})`,render:/*#__PURE__*/_jsx(Button,{size:"sm",variant:"outline"}),children:[overflowLabel," (",overflowItems.length,")"]}),/*#__PURE__*/_jsx(PopoverPopup,{"aria-label":overflowLabel,children:/*#__PURE__*/_jsx("ul",{"aria-label":overflowLabel,"data-slot":"overflow-list-menu"// biome-ignore lint/a11y/noRedundantRoles: list markers are removed, which can hide list semantics in Safari.
+,role:"list",...props(overflowListStyles.menu,typeRoles.body),children:overflowItems})})]})}):null]})});}

package/dist/components/overflow-list/overflow-list.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";export const overflowListStyles={items:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"xp4ho6d",kH6xsr:"x3ct3a4",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",kZCmMZ:"x1c1uobl",$$css:true},menu:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",kH6xsr:"x3ct3a4",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",kZCmMZ:"x1c1uobl",$$css:true},triggerItem:{kcqcaj:"xss6m8b",$$css:true}};

package/dist/components/pagination/pagination-link.d.ts

@@ -0,0 +1,10 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { Closed } from "../../closed";
+type Part<T> = Omit<Closed<T>, "data-slot" | "role">;
+export type PaginationLinkProps = Part<useRender.ComponentProps<"a">> & {
+    disabled?: boolean;
+    active?: boolean;
+    size?: "default" | "icon";
+};
+export declare function PaginationLink({ children, disabled, active, ref: forwardedRef, render, size, ...rest }: PaginationLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/components/pagination/pagination-link.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{controlLabel}from"../../control-label";import{protectRenderSlot}from"../../render-utils";import{paginationStyles}from"./pagination.styles";function preventDisabledNavigation(event){event.preventDefault();}function preventDisabledActivation(event){if(event.key==="Enter"){event.preventDefault();}}function getLinkProps(linkProps,children,active,disabled,size){const{onAuxClick,onClick,onKeyDown,...nativeProps}=linkProps;const interactionProps=disabled?{href:undefined,onAuxClick:preventDisabledNavigation,onClick:preventDisabledNavigation,onKeyDown:preventDisabledActivation,tabIndex:-1}:{onAuxClick,onClick,onKeyDown};return mergeProps(nativeProps,{...props(paginationStyles.link,size==="default"?paginationStyles.labelled:paginationStyles.iconSize,!disabled&&paginationStyles.interactive,active?paginationStyles.active:null,disabled?paginationStyles.disabled:null),"aria-current":active?"page":undefined,"aria-disabled":disabled||undefined,children:controlLabel(children),"data-size":size,"data-slot":"pagination-link",...interactionProps});}export function PaginationLink({children,disabled=false,active=false,ref:forwardedRef,render,size="icon",...rest}){Reflect.deleteProperty(rest,"className");Reflect.deleteProperty(rest,"data-slot");Reflect.deleteProperty(rest,"role");Reflect.deleteProperty(rest,"style");return useRender({defaultTagName:"a",props:getLinkProps(rest,children,active,disabled,size),ref:forwardedRef,render:disabled?undefined:protectRenderSlot("pagination-link",render,{"aria-current":active?"page":undefined,"aria-disabled":undefined})});}

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { type PaginationLinkProps } from "./pagination-link";
+export type { PaginationLinkProps } from "./pagination-link";
+export { PaginationLink } from "./pagination-link";
+type Part<T> = Omit<Closed<T>, "data-slot" | "role">;
+export type PaginationProps = Omit<Part<ComponentPropsWithRef<"nav">>, "aria-label"> & {
+    "aria-label"?: string;
+};
+export type PaginationContentProps = Part<ComponentPropsWithRef<"ul">>;
+export type PaginationItemProps = Part<ComponentPropsWithRef<"li">>;
+export type PaginationPreviousProps = Omit<PaginationLinkProps, "children" | "active"> & {
+    children?: ReactNode;
+};
+export type PaginationNextProps = PaginationPreviousProps;
+export type PaginationEllipsisProps = Part<ComponentPropsWithRef<"span">>;
+export declare function Pagination({ "aria-label": ariaLabel, children, ref: forwardedRef, ...rest }: PaginationProps): import("react").JSX.Element;
+export declare function PaginationContent({ children, ref: forwardedRef, ...rest }: PaginationContentProps): import("react").JSX.Element;
+export declare function PaginationItem({ children, ref: forwardedRef, ...rest }: PaginationItemProps): import("react").JSX.Element;
+export declare function PaginationPrevious({ children, ...rest }: PaginationPreviousProps): import("react").JSX.Element;
+export declare function PaginationNext({ children, ...rest }: PaginationNextProps): import("react").JSX.Element;
+export declare function PaginationEllipsis({ ref: forwardedRef, ...rest }: PaginationEllipsisProps): import("react").JSX.Element;

package/dist/components/pagination/pagination.js

@@ -0,0 +1,2 @@
+import{props}from"@stylexjs/stylex";import{IconChevronLeft,IconChevronRight}from"../../icons";import{paginationStyles}from"./pagination.styles";import{PaginationLink}from"./pagination-link";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";// biome-ignore lint/performance/noBarrelFile: Keep the link API beside the native pagination anatomy.
+export{PaginationLink}from"./pagination-link";function stripClosedProps(target){Reflect.deleteProperty(target,"className");Reflect.deleteProperty(target,"data-slot");Reflect.deleteProperty(target,"role");Reflect.deleteProperty(target,"style");return target;}function Chevron({direction}){return direction==="left"?/*#__PURE__*/_jsx(IconChevronLeft,{"aria-hidden":"true",focusable:"false",...props(paginationStyles.icon),size:16}):/*#__PURE__*/_jsx(IconChevronRight,{"aria-hidden":"true",focusable:"false",...props(paginationStyles.icon),size:16});}export function Pagination({"aria-label":ariaLabel="Pagination",children,ref:forwardedRef,...rest}){stripClosedProps(rest);return/*#__PURE__*/_jsx("nav",{...rest,"aria-label":ariaLabel,"data-slot":"pagination",ref:forwardedRef,...props(paginationStyles.root),children:children});}export function PaginationContent({children,ref:forwardedRef,...rest}){stripClosedProps(rest);return/*#__PURE__*/_jsx("ul",{...rest,"data-slot":"pagination-content",ref:forwardedRef,...props(paginationStyles.content),children:children});}export function PaginationItem({children,ref:forwardedRef,...rest}){stripClosedProps(rest);return/*#__PURE__*/_jsx("li",{...rest,"data-slot":"pagination-item",ref:forwardedRef,...props(paginationStyles.item),children:children});}export function PaginationPrevious({children="Previous",...rest}){return/*#__PURE__*/_jsxs(PaginationLink,{"aria-label":"Go to previous page",size:"default",...rest,children:[/*#__PURE__*/_jsx(Chevron,{direction:"left"}),/*#__PURE__*/_jsx("span",{...props(paginationStyles.directionLabel),children:children})]});}export function PaginationNext({children="Next",...rest}){return/*#__PURE__*/_jsxs(PaginationLink,{"aria-label":"Go to next page",size:"default",...rest,children:[/*#__PURE__*/_jsx("span",{...props(paginationStyles.directionLabel),children:children}),/*#__PURE__*/_jsx(Chevron,{direction:"right"})]});}export function PaginationEllipsis({ref:forwardedRef,...rest}){stripClosedProps(rest);return/*#__PURE__*/_jsxs("span",{...rest,"data-slot":"pagination-ellipsis",ref:forwardedRef,...props(paginationStyles.ellipsis),children:[/*#__PURE__*/_jsx("span",{"aria-hidden":"true",children:"…"}),/*#__PURE__*/_jsx("span",{...props(paginationStyles.srOnly),children:"More pages"})]});}