@mizen-labs/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+"use client";import{props}from"@stylexjs/stylex";import{useCallback}from"react";import{protectRenderSlot}from"../../render-utils";import{Input}from"../input/input";import{Textarea}from"../textarea/textarea";import{inputGroupStyles}from"./input-group.styles";import{jsx as _jsx}from"react/jsx-runtime";const alignStyles={"block-end":inputGroupStyles.alignBlockEnd,"block-start":inputGroupStyles.alignBlockStart,"inline-end":inputGroupStyles.alignInlineEnd,"inline-start":inputGroupStyles.alignInlineStart};const interactiveSelector="a[href], button, input, select, textarea, [contenteditable]:not([contenteditable='false']), [tabindex]:not([tabindex^='-']), [role='button'], [role='combobox'], [role='listbox'], [role='menuitem'], [role='checkbox'], [role='radio'], [role='switch'], [role='tab'], [data-slot='select-trigger']";function shouldRedirectFocus(event){const{currentTarget,target}=event;if(!(target instanceof Element)){return false;}if(!currentTarget.contains(target)){return false;}const interactive=target.closest(interactiveSelector);return interactive===null||!currentTarget.contains(interactive);}function findDirectControl(container){for(const child of container.children){if(child instanceof HTMLInputElement&&child.getAttribute("data-slot")==="input-group-input"){return child;}if(child instanceof HTMLTextAreaElement&&child.getAttribute("data-slot")==="input-group-textarea"){return child;}}return null;}function hasFocusedDirectControl(container){const active=document.activeElement;if(!active||active.parentElement!==container){return false;}const slot=active.getAttribute("data-slot");return slot==="input-group-input"||slot==="input-group-textarea";}function redirectFocusToSibling(container){if(!container||hasFocusedDirectControl(container)){return;}const control=findDirectControl(container);if(control&&!control.disabled){control.focus();}}export function InputGroup({role="group",children,ref:forwardedRef,...rest}){Reflect.deleteProperty(rest,"data-slot");return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"input-group",ref:forwardedRef,role:role,...props(inputGroupStyles.root),children:children});}export function InputGroupAddon({align="inline-start",children,onMouseDown,ref:forwardedRef,...rest}){Reflect.deleteProperty(rest,"data-slot");const handleMouseDown=useCallback(event=>{onMouseDown?.(event);if(event.defaultPrevented||!shouldRedirectFocus(event)){return;}event.preventDefault();redirectFocusToSibling(event.currentTarget.parentElement);},[onMouseDown]);const addonProps={...rest,onMouseDown:handleMouseDown};return/*#__PURE__*/_jsx("div",{...addonProps,"data-align":align,"data-slot":"input-group-addon",ref:forwardedRef,...props(inputGroupStyles.addon,alignStyles[align]),children:children});}export function InputGroupText({children,ref:forwardedRef,...rest}){Reflect.deleteProperty(rest,"data-slot");return/*#__PURE__*/_jsx("span",{...rest,"data-slot":"input-group-text",ref:forwardedRef,...props(inputGroupStyles.text),children:children});}export function InputGroupInput({ref:forwardedRef,render,...rest}){Reflect.deleteProperty(rest,"data-slot");return/*#__PURE__*/_jsx(Input,{...rest,"data-slot":"input-group-input",ref:forwardedRef,render:protectRenderSlot("input-group-input",render??/*#__PURE__*/_jsx("input",{})),unstyled:true});}export function InputGroupTextarea({ref:forwardedRef,...rest}){Reflect.deleteProperty(rest,"data-slot");return/*#__PURE__*/_jsx(Textarea,{...rest,"data-slot":"input-group-textarea",ref:forwardedRef,unstyled:true});}

package/dist/components/input-group/input-group.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,lineHeight}from"../../styles/typography.stylex";export const inputGroupStyles={addon:{kGNEyG:"x6s0dn4",kB7OPa:"x9f619",kMwMTN:"x1heor9g",k1xSpc:"x78zum5",kOIVth:"x13hh4mm",kVAEAm:"x1n2onr6",kY2c9j:"x1vjfegm",$$css:true},alignBlockEnd:{kLkRvE:"x1lg0vu7",kgzTxl:"x1pkgqyo",kgeoSG:"x1cpjm7i",k96MEf:"x1y3wzot",kpsdNU:"x1dtn3f9",km8f2m:"xkk1bqk",kEoFBp:"x1hmns74",kSGwAc:"xkh2ocl",kjj79g:"x1qughib",kayTVb:"x14yy4lh",k8WAf4:"x1lmimt7",kg3NbH:"xb5xqfq",kzqmXN:"xh8yej3",$$css:true},alignBlockStart:{kLkRvE:"x1lg0vu7",kgzTxl:"x1pkgqyo",kgeoSG:"x1cpjm7i",k5Ofw7:"xhq5o37",kpsdNU:"x1dtn3f9",km8f2m:"xkk1bqk",kEoFBp:"x1hmns74",kSGwAc:"xkh2ocl",kayTVb:"x1umeum8",k8WAf4:"x1lmimt7",kg3NbH:"xb5xqfq",kzqmXN:"xh8yej3",$$css:true},alignInlineEnd:{kayTVb:"x9ek82g",kwRFfy:"x1vzuc3q xuvjzps",kZCmMZ:"xqxnp8d",$$css:true},alignInlineStart:{kayTVb:"x1clqncf",kwRFfy:"xuvjzps",kZCmMZ:"xt0na8i",$$css:true},root:{kGNEyG:"x6s0dn4",k44tkh:"x1p0yhiq",kKVMdj:"xxqfapc",kWkggS:"xnqau77 x1u444w9 xvojraa",kVAM5u:"x6ht47x x107ir68 x9r1u3d",kaIpWk:"xbk7hgl x1jw0md8",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"xlp6bez x1xxjdaf",kB7OPa:"x9f619",kMwMTN:"x1p414lw x14tvo57",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kGuDYH:"xw0uglx x60ifsz x12ama9c",kLWn49:"x1m3nfmh xbv4icr x1rn0pvf",kAzted:"x18sycir x1t5r52q xx59pud x4m7hzi x1atkrcx",kjBf7l:"x1agre69 x1uczgqu",kInvED:"xyb3h8b x1w1ofmy",k3XXqK:"x1kpek1o xaatb59",kMeerF:"x6yma8a x1k57tk5",kVAEAm:"x1n2onr6",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x1xpfdt",kAMwcw:"xvhdtae",kzqmXN:"xh8yej3",$$css:true},text:{kGNEyG:"x6s0dn4",kMwMTN:"x125omll",k1xSpc:"x3nfvp2",kGuDYH:"x1qlqyl8",kOIVth:"x13hh4mm",kLWn49:"x15bjb6t",kVQacm:"xb3r6kr",kg5iWk:"xlyipyv",khDVqt:"xuxw1ft",$$css:true}};

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef } from "react";
+type NativeKbdProps = ComponentPropsWithRef<"kbd">;
+export type KbdProps = Omit<NativeKbdProps, "aria-label" | "aria-labelledby" | "className" | "data-slot" | "role" | "style">;
+export type KbdGroupProps = Omit<NativeKbdProps, "aria-label" | "aria-labelledby" | "className" | "data-slot" | "role" | "style">;
+export declare function Kbd({ children, ref: forwardedRef, ...rest }: KbdProps): import("react").JSX.Element;
+export declare function KbdGroup({ children, ref: forwardedRef, ...rest }: KbdGroupProps): import("react").JSX.Element;
+export {};

package/dist/components/kbd/kbd.js

@@ -0,0 +1 @@
+import{props}from"@stylexjs/stylex";import{controlLabel}from"../../control-label";import{kbdStyles}from"./kbd.styles";import{jsx as _jsx}from"react/jsx-runtime";export function Kbd({children,ref:forwardedRef,...rest}){Reflect.deleteProperty(rest,"aria-label");Reflect.deleteProperty(rest,"aria-labelledby");Reflect.deleteProperty(rest,"className");Reflect.deleteProperty(rest,"data-slot");Reflect.deleteProperty(rest,"role");Reflect.deleteProperty(rest,"style");return/*#__PURE__*/_jsx("kbd",{...rest,"data-slot":"kbd",ref:forwardedRef,...props(kbdStyles.root),children:controlLabel(children)});}export function KbdGroup({children,ref:forwardedRef,...rest}){Reflect.deleteProperty(rest,"aria-label");Reflect.deleteProperty(rest,"aria-labelledby");Reflect.deleteProperty(rest,"className");Reflect.deleteProperty(rest,"data-slot");Reflect.deleteProperty(rest,"role");Reflect.deleteProperty(rest,"style");return/*#__PURE__*/_jsx("kbd",{...rest,"data-slot":"kbd-group",ref:forwardedRef,...props(kbdStyles.group),children:children});}

package/dist/components/kbd/kbd.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/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 kbdStyles={group:{kGNEyG:"x6s0dn4",k1xSpc:"x3nfvp2",kMv6JI:"xjb2p0i",kOIVth:"x13hh4mm",$$css:true},root:{kGNEyG:"x6s0dn4",kWkggS:"x1vs9wzj",kVAM5u:"x155xxfk",kaIpWk:"x1wnslnq",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kB7OPa:"x9f619",kMwMTN:"xbb0na1",k1xSpc:"x3nfvp2",kMv6JI:"xjb2p0i",kGuDYH:"x1ws78te",k63SB2:"xuku2lm",kOIVth:"x13hh4mm",kZKoxP:"xmll18r",kjj79g:"xl56j7k",kLWn49:"x76y1r9",k7Eaqz:"x199i5n0",kg3NbH:"xdbhxi8",kfzvcC:"x47corl",kfSwDN:"x87ps6o",khDVqt:"xuxw1ft",$$css:true}};

package/dist/components/label/label.d.ts

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

package/dist/components/label/label.js

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

package/dist/components/label/label.styles.js

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

package/dist/components/lightbox/lightbox-gallery.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+export interface LightboxGalleryImage {
+    alt: string;
+    src: string;
+    /** A smaller file for the grid. Defaults to `src`. */
+    thumbnail?: string;
+}
+export type LightboxGalleryProps = Omit<Closed<ComponentPropsWithRef<"ul">>, "aria-label" | "children" | "data-slot"> & {
+    /** Names the grid and titles the open lightbox. */
+    "aria-label": string;
+    images: readonly LightboxGalleryImage[];
+};
+/** The open lightbox for a set of images; Message reuses it for sent files. */
+export declare function GalleryPopup({ images, index, onStep, title, }: {
+    images: readonly LightboxGalleryImage[];
+    index: number;
+    onStep: (delta: number) => void;
+    title: string;
+}): import("react").JSX.Element | null;
+/**
+ * A grid of thumbnails that opens one lightbox. Previous, Next, and the arrow
+ * keys page through the set, wrapping at either end.
+ */
+export declare function LightboxGallery({ "aria-label": label, images, ref: forwardedRef, ...rest }: LightboxGalleryProps): import("react").JSX.Element;

package/dist/components/lightbox/lightbox-gallery.js

@@ -0,0 +1,6 @@
+"use client";import{props}from"@stylexjs/stylex";import{useCallback,useState}from"react";import{IconChevronLeft,IconChevronRight}from"../../icons";import{typeRoles}from"../../styles/typography.styles";import{guardHostProps,Lightbox,LightboxImage,LightboxPopup,LightboxTitle}from"./lightbox";import{lightboxStyles}from"./lightbox.styles";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";function Chevron({next}){const Icon=next?IconChevronRight:IconChevronLeft;return/*#__PURE__*/_jsx(Icon,{"aria-hidden":"true",focusable:false,size:18,...props(lightboxStyles.chevron)});}function GalleryPill({count,index,onStep}){const previous=useCallback(()=>onStep(-1),[onStep]);const next=useCallback(()=>onStep(1),[onStep]);const button=props(lightboxStyles.control,lightboxStyles.pillButton);return/*#__PURE__*/_jsxs("div",{"data-slot":"lightbox-gallery-controls",...props(lightboxStyles.pill),children:[/*#__PURE__*/_jsx("button",{"aria-label":"Previous image",onClick:previous,type:"button",...button,children:/*#__PURE__*/_jsx(Chevron,{next:false})}),/*#__PURE__*/_jsxs("span",{"aria-live":"polite",...props(typeRoles.ui,lightboxStyles.counter),children:[index+1," of ",count]}),/*#__PURE__*/_jsx("button",{"aria-label":"Next image",onClick:next,type:"button",...button,children:/*#__PURE__*/_jsx(Chevron,{next:true})})]});}/** The open lightbox for a set of images; Message reuses it for sent files. */export function GalleryPopup({images,index,onStep,title}){const image=images[index];// Arrow keys follow reading direction, so Right is previous in RTL.
+const onKeyDown=useCallback(event=>{const rtl=getComputedStyle(event.currentTarget).direction==="rtl";const forward=rtl?"ArrowLeft":"ArrowRight";const back=rtl?"ArrowRight":"ArrowLeft";if(event.key===forward||event.key===back){event.preventDefault();onStep(event.key===forward?1:-1);}},[onStep]);if(!image){return null;}return/*#__PURE__*/_jsxs(LightboxPopup,{onKeyDown:onKeyDown,children:[/*#__PURE__*/_jsx(LightboxTitle,{children:title}),/*#__PURE__*/_jsx(LightboxImage,{alt:image.alt,src:image.src},image.src),images.length>1?/*#__PURE__*/_jsx(GalleryPill,{count:images.length,index:index,onStep:onStep}):null]});}function GalleryItem({image,onOpen,position}){const open=useCallback(()=>onOpen(position),[onOpen,position]);return/*#__PURE__*/_jsx("li",{...props(lightboxStyles.galleryCell),children:/*#__PURE__*/_jsx("button",{"data-slot":"lightbox-gallery-item",onClick:open,type:"button",...props(lightboxStyles.galleryItem),children:/*#__PURE__*/_jsx("img",{alt:image.alt,src:image.thumbnail??image.src,...props(lightboxStyles.galleryImage)})})});}/**
+ * A grid of thumbnails that opens one lightbox. Previous, Next, and the arrow
+ * keys page through the set, wrapping at either end.
+ */export function LightboxGallery({"aria-label":label,images,ref:forwardedRef,...rest}){const[open,setOpen]=useState(false);const[index,setIndex]=useState(0);const count=images.length;const step=useCallback(delta=>setIndex(current=>(current+delta+count)%count),[count]);// biome-ignore lint/correctness/useExhaustiveDependencies: the React Compiler keeps this memoization only with the setters listed.
+const openAt=useCallback(position=>{setIndex(position);setOpen(true);},[setIndex,setOpen]);if(!label?.trim()){throw new TypeError("LightboxGallery requires a non-empty aria-label.");}return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("ul",{...guardHostProps(rest),"aria-label":label,"data-slot":"lightbox-gallery",ref:forwardedRef,...props(lightboxStyles.gallery),children:images.map((image,position)=>/*#__PURE__*/_jsx(GalleryItem,{image:image,onOpen:openAt,position:position},image.src))}),/*#__PURE__*/_jsx(Lightbox,{onOpenChange:setOpen,open:open,children:/*#__PURE__*/_jsx(GalleryPopup,{images:images,index:index,onStep:step,title:label})})]});}

package/dist/components/lightbox/lightbox.d.ts

@@ -0,0 +1,30 @@
+import { type DialogDescriptionProps as BaseDialogDescriptionProps, type DialogPopupProps as BaseDialogPopupProps, type DialogTitleProps as BaseDialogTitleProps } from "@base-ui/react/dialog";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { Dialog, DialogClose, type DialogCloseProps, type DialogProps, DialogTrigger, type DialogTriggerProps } from "../dialog/dialog";
+export declare function guardHostProps(propsToGuard: object): {
+    [k: string]: any;
+};
+export type LightboxProps<Payload = unknown> = DialogProps<Payload>;
+export type LightboxTriggerProps<Payload = unknown> = DialogTriggerProps<Payload>;
+export type LightboxTitleProps = Closed<BaseDialogTitleProps>;
+export type LightboxDescriptionProps = Closed<BaseDialogDescriptionProps>;
+export type LightboxCloseProps = DialogCloseProps;
+export type LightboxPopupProps = Omit<Closed<BaseDialogPopupProps>, "data-slot" | "render" | "role">;
+export type LightboxImageProps = Omit<Closed<ComponentPropsWithRef<"img">>, "alt" | "data-slot" | "role" | "src"> & {
+    alt: string;
+    src: string;
+};
+export declare const Lightbox: typeof Dialog;
+export declare const LightboxTrigger: typeof DialogTrigger;
+export declare const LightboxClose: typeof DialogClose;
+/** Names the overlay for assistive technology; the image speaks for itself on screen. */
+export declare function LightboxTitle({ ref: forwardedRef, ...rest }: LightboxTitleProps): import("react").JSX.Element;
+/** Describes the image for assistive technology, without covering it. */
+export declare function LightboxDescription({ ref: forwardedRef, ...rest }: LightboxDescriptionProps): import("react").JSX.Element;
+/**
+ * A fullscreen overlay: the image sits frameless on a dark scrim, with Close
+ * in the corner. Escape, the close button, and a click on the scrim dismiss it.
+ */
+export declare function LightboxPopup({ children, ref: forwardedRef, ...rest }: LightboxPopupProps): import("react").JSX.Element;
+export declare function LightboxImage({ alt, ref: forwardedRef, src, ...rest }: LightboxImageProps): import("react").JSX.Element;

package/dist/components/lightbox/lightbox.js

@@ -0,0 +1,6 @@
+"use client";import{Dialog as BaseDialog}from"@base-ui/react/dialog";import{props}from"@stylexjs/stylex";import{IconX}from"../../icons";import{overlayLayerStyles}from"../../styles/overlay-layers.styles";import{Dialog,DialogClose,DialogTrigger}from"../dialog/dialog";import{visuallyHiddenStyles}from"../visually-hidden/visually-hidden.styles";import{lightboxStyles}from"./lightbox.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const blockedHostProps=new Set(["className","data-slot","role","style"]);export function guardHostProps(propsToGuard){return Object.fromEntries(Object.entries(propsToGuard).filter(([name])=>!blockedHostProps.has(name)));}export const Lightbox=Dialog;export const LightboxTrigger=DialogTrigger;export const LightboxClose=DialogClose;/** Names the overlay for assistive technology; the image speaks for itself on screen. */export function LightboxTitle({ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx(BaseDialog.Title,{...guardHostProps(rest),"data-slot":"lightbox-title",ref:forwardedRef,...props(visuallyHiddenStyles.root)});}/** Describes the image for assistive technology, without covering it. */export function LightboxDescription({ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx(BaseDialog.Description,{...guardHostProps(rest),"data-slot":"lightbox-description",ref:forwardedRef,...props(visuallyHiddenStyles.root)});}/**
+ * A fullscreen overlay: the image sits frameless on a dark scrim, with Close
+ * in the corner. Escape, the close button, and a click on the scrim dismiss it.
+ */export function LightboxPopup({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsxs(BaseDialog.Portal,{...props(overlayLayerStyles.modalPortal),children:[/*#__PURE__*/_jsx(BaseDialog.Backdrop,{"data-slot":"lightbox-backdrop",...props(lightboxStyles.backdrop)}),/*#__PURE__*/_jsxs(BaseDialog.Popup,{...guardHostProps(rest),"data-slot":"lightbox-popup",ref:forwardedRef,...props(lightboxStyles.popup),children:[/*#__PURE__*/_jsx(BaseDialog.Close,{"aria-label":"Close","data-slot":"lightbox-close",...props(lightboxStyles.control,lightboxStyles.close),children:/*#__PURE__*/_jsx(IconX,{"aria-hidden":"true",focusable:"false",size:18})}),children]})]});}export function LightboxImage({alt,ref:forwardedRef,src,...rest}){return(/*#__PURE__*/// biome-ignore lint/correctness/useImageSize: callers may omit source dimensions; the image keeps intrinsic ratio and viewport bounds.
+// biome-ignore lint/performance/noImgElement: Lightbox uses native images so this package stays framework-neutral.
+_jsx("img",{...guardHostProps(rest),alt:alt,"data-slot":"lightbox-image",ref:forwardedRef,src:src,...props(lightboxStyles.image)}));}

package/dist/components/lightbox/lightbox.styles.js

@@ -0,0 +1,3 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/interaction.stylex";import{borderWidth,focus}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";const ROUND="9999px";// Room for Close above the image and the paging pill below it: each sits
+// 16px from the edge and keeps 24px clear of the photo.
+const CHROME=`calc(${space["4"]} + ${space["10"]} + ${space["6"]})`;const enterExit={transitionDuration:{[conditions.reducedMotion]:duration.instant,"[data-ending-style]":duration.overlayExit,default:duration.overlayEnter},transitionTimingFunction:{"[data-ending-style]":easing.easeInOut,default:easing.expoOut}};export const lightboxStyles={backdrop:{kIyJzY:"x1e471i8 x107nfut x18kz1lc",kAMwcw:"xckl9o1 xvhdtae",k6WDB:"x15u0ou0 xpivpjv x11rvarm",kWkggS:"xp0ctg0",kpwlN0:"x10a8y8t",kSiTet:"xiyypsa x1hw7zpd x1hc1fzr",kVAEAm:"xixxii4",k1ekBW:"x19991ni",kY2c9j:"x1ja2u2z",$$css:true},chevron:{k3aq6I:"x19axjrm x1c071of",$$css:true},close:{kVAM5u:"x155xxfk",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"x1mhlhek",k87sOh:"x6cvwo6",kt4wiu:"x1l8zot0",kVAEAm:"x10l6tqk",$$css:true},control:{kGNEyG:"x6s0dn4",kysU6D:"xjyslct",kWkggS:"xxsa5ao xghku30 xui3q9s",kZKoxP:"x1iengcw",kaIpWk:"x10hpsqq",kMzoRj:"xc342km",kB7OPa:"x9f619",kMwMTN:"x14tvo57",kkrTdU:"x1ypdohk",k1xSpc:"x3nfvp2",kzqmXN:"x1rdvqfw",kjj79g:"xl56j7k",kogj98:"x1ghz6dp",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x7jjmpn x1wfwxd8",k3XXqK:"x9v5kkp x1t137rt",kMeerF:"x1vhx2qj",kmVPX3:"x1717udv",kfzvcC:"x67bb7w",$$css:true},counter:{kMwMTN:"x125omll",kcqcaj:"xss6m8b",k7Eaqz:"x1nl6vt0",k9WMMc:"x2b8uid",$$css:true},gallery:{k1xSpc:"xrvj5dj",kOIVth:"xp4ho6d",kumcoG:"x1cmj9de",kB88ic:"xe8uvvx",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",kmVPX3:"x1717udv",$$css:true},galleryCell:{k1xSpc:"xrvj5dj",k7Eaqz:"xeuugli",$$css:true},galleryImage:{kZKoxP:"x5yr21d",k1xSpc:"x1lliihq",kzqmXN:"xh8yej3",kVIFPx:"xl1xv1r",kSiTet:"x1jubhrz x1bd34r6 x1hc1fzr",$$css:true},galleryItem:{kysU6D:"xjyslct",kOBAk4:"x1plog1",kWkggS:"xu84zt7",kaIpWk:"x1jw0md8",kMzoRj:"xc342km",kkrTdU:"x1huxd7x",kogj98:"x1ghz6dp",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1hl8ikr",k3XXqK:"x9v5kkp x1t137rt",kMeerF:"x1vhx2qj",kVQacm:"xb3r6kr",kmVPX3:"x1717udv",$$css:true},image:{kZKoxP:"xt7dq6l",kaIpWk:"x2b34ud",k1xSpc:"x1lliihq",kzqmXN:"x14atkfc",kskxy:"xmz0i5r",ks0D6T:"x193iq5w",kAzted:"x2lwn1j",kVIFPx:"x19kjcj4",kfzvcC:"x67bb7w",$$css:true},pill:{kGNEyG:"x6s0dn4",kWkggS:"xui3q9s",kVAM5u:"x155xxfk",kaIpWk:"x10hpsqq",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"x1mhlhek",k1xSpc:"x78zum5",kOIVth:"x13hh4mm",krVfgx:"x1phf5hj",kkqhue:"x17y0mx6",kUOVxO:"xvueqy4",kmVPX3:"xlxy37g",kfzvcC:"x67bb7w",kVAEAm:"x10l6tqk",kzqmXN:"xeq5yr9",$$css:true},pillButton:{kZKoxP:"xz2k91q",kzqmXN:"xzrvisw",$$css:true},popup:{kIyJzY:"x1e471i8 x107nfut x18kz1lc",kAMwcw:"xckl9o1 xvhdtae",kGNEyG:"x6s0dn4",kB7OPa:"x9f619",k1xSpc:"xrvj5dj",kumcoG:"x1mkdm3x",k9llMU:"x5o4joa",kpwlN0:"x10a8y8t",kAPf3g:"x1o2pa38",kSiTet:"xiyypsa x1hw7zpd x1hc1fzr",kI3sdo:"x1a2a7pz",k8WAf4:"x13qk1rl",kg3NbH:"x5ljy3o xaqi9fd",kfzvcC:"x47corl",kVAEAm:"xixxii4",k3aq6I:"x2bnnpm xewfntf x1c071of",k1ekBW:"x6o7n8i",kY2c9j:"x1vjfegm",$$css:true}};

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

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ReactNode } from "react";
+import type { Closed } from "../../closed";
+type NativeLinkProps = Omit<Closed<useRender.ComponentProps<"a">>, "children" | "data-slot" | "href" | "render" | "role"> & {
+    children: ReactNode;
+};
+export type LinkProps = NativeLinkProps & ({
+    href: string;
+    render?: undefined;
+} | {
+    href?: string;
+    render: NonNullable<useRender.ComponentProps<"a">["render"]>;
+});
+export declare function Link({ children, href, ref: forwardedRef, render, ...rest }: LinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/components/link/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{protectRenderSlot}from"../../render-utils";import{linkStyles}from"./link.styles";export function Link({children,href,ref:forwardedRef,render,...rest}){if(!render&&typeof href!=="string"){throw new TypeError("Link requires an href string or a render target.");}for(const name of["className","data-slot","role","style"]){Reflect.deleteProperty(rest,name);}return useRender({defaultTagName:"a",props:mergeProps(rest,props(linkStyles.root),{children,"data-slot":"link",...(href===undefined?{}:{href})}),ref:forwardedRef,render:protectRenderSlot("link",render)});}

package/dist/components/link/link.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/interaction.stylex";import{borderWidth,focus,focusMotion,focusOutline}from"../../styles/interaction.stylex";import"../../styles/shape.stylex";import{shape}from"../../styles/shape.stylex";export const linkStyles={root:{k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kaIpWk:"xmfy946",kMwMTN:"xdnyjpo",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1w1ofmy",k3XXqK:"x9v5kkp xzc55om",kMeerF:"x1vhx2qj",kHjlTd:"xj0a0fe",kMnn75:"xujl8zx",kNySMw:"x8pz1bl x1maugks xzmx7tv",kcSHmL:"x1jdncgf",$$css:true}};

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

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+export type ListProps = Omit<Closed<ComponentPropsWithRef<"ul">>, "data-slot" | "role">;
+export type ListItemProps = Omit<Closed<ComponentPropsWithRef<"li">>, "data-slot" | "role">;
+export type ListContentProps = Omit<Closed<ComponentPropsWithRef<"div">>, "data-slot" | "role">;
+export type ListActionsProps = Omit<Closed<ComponentPropsWithRef<"div">>, "data-slot" | "role">;
+export declare function List({ children, ref: forwardedRef, ...rest }: ListProps): import("react").JSX.Element;
+export declare function ListItem({ children, ref: forwardedRef, ...rest }: ListItemProps): import("react").JSX.Element;
+export declare function ListContent({ children, ref: forwardedRef, ...rest }: ListContentProps): import("react").JSX.Element;
+export declare function ListActions({ children, ref: forwardedRef, ...rest }: ListActionsProps): import("react").JSX.Element;

package/dist/components/list/list.js

@@ -0,0 +1,2 @@
+import{props}from"@stylexjs/stylex";import{typeRoles}from"../../styles/typography.styles";import{listStyles}from"./list.styles";import{jsx as _jsx}from"react/jsx-runtime";function stripReservedProps(rest){for(const key of["className","data-slot","role","style"]){Reflect.deleteProperty(rest,key);}}export function List({children,ref:forwardedRef,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx("ul",{...rest,"data-slot":"list",ref:forwardedRef// biome-ignore lint/a11y/noRedundantRoles: list markers are removed, which can hide list semantics in Safari.
+,role:"list",...props(listStyles.root,typeRoles.body),children:children});}export function ListItem({children,ref:forwardedRef,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx("li",{...rest,"data-slot":"list-item",ref:forwardedRef,...props(listStyles.item),children:children});}export function ListContent({children,ref:forwardedRef,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"list-content",ref:forwardedRef,...props(listStyles.content),children:children});}export function ListActions({children,ref:forwardedRef,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"list-actions",ref:forwardedRef,...props(listStyles.actions),children:children});}

package/dist/components/list/list.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/spacing.stylex";import{space}from"../../styles/spacing.stylex";export const listStyles={actions:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"xp4ho6d",kjj79g:"x13a6bvl",k7Eaqz:"xeuugli",$$css:true},content:{kCS8Yb:"x1em7b6m",kzQI83:"x1iyjqo2",k7Eaqz:"xeuugli",kHjlTd:"xj0a0fe",$$css:true},item:{kGNEyG:"x6s0dn4",kL6WhQ:"x9rbyu3",kfdmCh:"x1q0q8m5",kt9PQ7:"x18d7gr7 x1t1lzn6 x13k63ub",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"xiw8qbs",k7Eaqz:"xeuugli",k8WAf4:"x1ev047n x58we3g",$$css:true},root:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xjbgufp",kH6xsr:"x3ct3a4",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",kZCmMZ:"x1c1uobl",$$css:true}};

package/dist/components/markdown/markdown.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentProps, type ComponentPropsWithRef, type JSX } from "react";
+import type { Closed } from "../../closed";
+type NativeProps = ComponentPropsWithRef<"div">;
+type ElementProps<Tag extends keyof JSX.IntrinsicElements> = ComponentProps<Tag> & {
+    node?: unknown;
+};
+export type MarkdownProps = Omit<Closed<NativeProps>, "data-slot" | "dangerouslySetInnerHTML" | "role">;
+export declare const markdownComponents: {
+    a: ({ children, href, node: _node, title, ...rest }: ElementProps<"a">) => JSX.Element;
+    blockquote: ({ children, node: _node, ...rest }: ElementProps<"blockquote">) => JSX.Element;
+    code: ({ children, className: _className, node: _node, ...rest }: ElementProps<"code">) => JSX.Element;
+    h1: ({ children, node: _node, ...rest }: ElementProps<"h1">) => JSX.Element;
+    h2: ({ children, node: _node, ...rest }: ElementProps<"h2">) => JSX.Element;
+    h3: ({ children, node: _node, ...rest }: ElementProps<"h3">) => JSX.Element;
+    h4: ({ children, node: _node, ...rest }: ElementProps<"h4">) => JSX.Element;
+    h5: ({ children, node: _node, ...rest }: ElementProps<"h5">) => JSX.Element;
+    h6: ({ children, node: _node, ...rest }: ElementProps<"h6">) => JSX.Element;
+    hr: ({ node: _node, ...rest }: ElementProps<"hr">) => JSX.Element;
+    img: ({ alt, height, node: _node, src, title, width, ...rest }: ElementProps<"img">) => JSX.Element;
+    input: ({ checked, node: _node, type, ...rest }: ElementProps<"input">) => JSX.Element;
+    li: ({ children, className: _className, node: _node, ...rest }: ElementProps<"li">) => JSX.Element;
+    ol: ({ children, node: _node, ...rest }: ElementProps<"ol">) => JSX.Element;
+    p: ({ children, node: _node, ...rest }: ElementProps<"p">) => JSX.Element;
+    pre: ({ children }: ElementProps<"pre">) => JSX.Element;
+    table: ({ children, node: _node }: ElementProps<"table">) => JSX.Element;
+    tbody: ({ children, node: _node, ...rest }: ElementProps<"tbody">) => JSX.Element;
+    td: ({ align, children, node: _node, ...rest }: ElementProps<"td">) => JSX.Element;
+    th: ({ align, children, node: _node, ...rest }: ElementProps<"th">) => JSX.Element;
+    thead: ({ children, node: _node, ...rest }: ElementProps<"thead">) => JSX.Element;
+    tr: ({ children, node: _node, ...rest }: ElementProps<"tr">) => JSX.Element;
+    ul: ({ children, className: _className, node: _node, ...rest }: ElementProps<"ul">) => JSX.Element;
+};
+export declare function Markdown({ children, ref: forwardedRef, ...rest }: MarkdownProps): JSX.Element;
+export {};

package/dist/components/markdown/markdown.js

@@ -0,0 +1,8 @@
+import{props}from"@stylexjs/stylex";import{isValidElement}from"react";import{typeRoles}from"../../styles/typography.styles";import{Code}from"../code/code";import{CodeBlockContent}from"../code-block/code-block";import{Table,TableBody,TableCell,TableContainer,TableHead,TableHeader,TableRow}from"../table/table";import{markdownStyles}from"./markdown.styles";import{jsx as _jsx}from"react/jsx-runtime";const tableAlignments={center:"center",left:"start",right:"end"};// Renderers pass their syntax-tree node as `node`; the map ignores it.
+function alignTableCell(align){if(align==="center"||align==="left"||align==="right"){return tableAlignments[align];}return"start";}// Code blocks arrive as rendered children; keep only their text.
+function textOf(node){if(typeof node==="string"||typeof node==="number"){return String(node);}if(Array.isArray(node)){return node.map(textOf).join("");}if(isValidElement(node)){return textOf(node.props.children);}return"";}// Element map for any renderer that accepts a components prop, such as
+// react-markdown or MDX. Parsing, plugins, and URL policy stay with the app.
+export const markdownComponents={a:({children,href,node:_node,title,...rest})=>/*#__PURE__*/_jsx("a",{...rest,"data-slot":"markdown-link",href:href||undefined,title:title,...props(markdownStyles.link),children:children}),blockquote:({children,node:_node,...rest})=>/*#__PURE__*/_jsx("blockquote",{...rest,"data-slot":"markdown-blockquote",...props(markdownStyles.blockquote),children:children}),code:({children,className:_className,node:_node,...rest})=>/*#__PURE__*/_jsx(Code,{...rest,children:children}),h1:({children,node:_node,...rest})=>/*#__PURE__*/_jsx("h1",{...rest,"data-slot":"markdown-heading",...props(markdownStyles.heading,typeRoles.title),children:children}),h2:({children,node:_node,...rest})=>/*#__PURE__*/_jsx("h2",{...rest,"data-slot":"markdown-heading",...props(markdownStyles.heading,typeRoles.heading),children:children}),h3:({children,node:_node,...rest})=>/*#__PURE__*/_jsx("h3",{...rest,"data-slot":"markdown-heading",...props(markdownStyles.heading,markdownStyles.headingThree),children:children}),h4:({children,node:_node,...rest})=>/*#__PURE__*/_jsx("h4",{...rest,"data-slot":"markdown-heading",...props(markdownStyles.heading,markdownStyles.headingFour),children:children}),h5:({children,node:_node,...rest})=>/*#__PURE__*/_jsx("h5",{...rest,"data-slot":"markdown-heading",...props(markdownStyles.heading,markdownStyles.headingFive),children:children}),h6:({children,node:_node,...rest})=>/*#__PURE__*/_jsx("h6",{...rest,"data-slot":"markdown-heading",...props(markdownStyles.heading,markdownStyles.headingSix),children:children}),hr:({node:_node,...rest})=>/*#__PURE__*/_jsx("hr",{...rest,"data-slot":"markdown-rule",...props(markdownStyles.rule)}),img:({alt,height,node:_node,src,title,width,...rest})=>/*#__PURE__*/// biome-ignore lint/performance/noImgElement: Markdown images accept arbitrary sources and must stay framework-neutral.
+_jsx("img",{...rest,alt:alt??"","data-slot":"markdown-image",height:height,src:src||undefined,title:title,width:width,...props(markdownStyles.image)}),input:({checked,node:_node,type,...rest})=>/*#__PURE__*/_jsx("input",{...rest,"aria-label":checked?"Task completed":"Task not completed",checked:checked,"data-slot":"markdown-task",disabled:true,type:type,...props(markdownStyles.checkbox)}),li:({children,className:_className,node:_node,...rest})=>/*#__PURE__*/_jsx("li",{...rest,"data-slot":"markdown-list-item",...props(markdownStyles.listItem),children:children}),ol:({children,node:_node,...rest})=>/*#__PURE__*/_jsx("ol",{...rest,"data-slot":"markdown-ordered-list",...props(markdownStyles.list,typeRoles.body),children:children}),p:({children,node:_node,...rest})=>/*#__PURE__*/_jsx("p",{...rest,"data-slot":"markdown-paragraph",...props(markdownStyles.paragraph,typeRoles.body),children:children}),pre:({children})=>/*#__PURE__*/_jsx(CodeBlockContent,{"aria-label":"Code block",children:textOf(children)}),table:({children,node:_node})=>/*#__PURE__*/_jsx(TableContainer,{"aria-label":"Markdown table",scroll:"horizontal",children:/*#__PURE__*/_jsx(Table,{children:children})}),tbody:({children,node:_node,...rest})=>/*#__PURE__*/_jsx(TableBody,{...rest,children:children}),td:({align,children,node:_node,...rest})=>/*#__PURE__*/_jsx(TableCell,{...rest,align:alignTableCell(align),children:children}),th:({align,children,node:_node,...rest})=>/*#__PURE__*/_jsx(TableHead,{...rest,align:alignTableCell(align),scope:"col",children:children}),thead:({children,node:_node,...rest})=>/*#__PURE__*/_jsx(TableHeader,{sticky:false,...rest,children:children}),tr:({children,node:_node,...rest})=>/*#__PURE__*/_jsx(TableRow,{...rest,children:children}),ul:({children,className:_className,node:_node,...rest})=>/*#__PURE__*/_jsx("ul",{...rest,"data-slot":"markdown-unordered-list",...props(markdownStyles.list,typeRoles.body),children:children})};function stripReservedProps(attributes){Reflect.deleteProperty(attributes,"className");Reflect.deleteProperty(attributes,"data-slot");Reflect.deleteProperty(attributes,"dangerouslySetInnerHTML");Reflect.deleteProperty(attributes,"role");Reflect.deleteProperty(attributes,"style");}// Reading layout for rendered Markdown. Render the document inside it with
+// `markdownComponents`.
+export function Markdown({children,ref:forwardedRef,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"markdown",ref:forwardedRef,...props(markdownStyles.root,typeRoles.body),children:children});}

package/dist/components/markdown/markdown.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,focus,focusMotion}from"../../styles/interaction.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontSize,fontWeight,letterSpacing,lineHeight}from"../../styles/typography.stylex";export const markdownStyles={blockquote:{kGJrpR:"x1uo4xkn",kVhnKS:"x1t7ytsu",k2ei4v:"xjba7c6",kqGvvJ:"x12jd5q2",kUOVxO:"xrxpjvj",kZCmMZ:"x14s0xwm",$$css:true},checkbox:{keaTxX:"xzd989a",k71WvV:"xo451o6",$$css:true},heading:{kMwMTN:"x14tvo57",k63SB2:"xlw70nr",k1K539:"x1hxt7dh",keoZOQ:"x14l7nz5 x16yphcf",$$css:true},headingFive:{kGuDYH:"xlh8hku",k63SB2:"xlw70nr",kb6lSQ:"x1pypwqs",kLWn49:"x2xzzt7",$$css:true},headingFour:{kGuDYH:"x12ama9c",k63SB2:"xlw70nr",kb6lSQ:"x15nokgc",kLWn49:"x1rn0pvf",$$css:true},headingSix:{kGuDYH:"xlh8hku",k63SB2:"xlw70nr",kb6lSQ:"x1pypwqs",kLWn49:"x2xzzt7",$$css:true},headingThree:{kGuDYH:"x1d88w5i",k63SB2:"xlw70nr",kb6lSQ:"x1urmmxc",kLWn49:"x1f0yedn",$$css:true},image:{kZKoxP:"xt7dq6l",ks0D6T:"x193iq5w",$$css:true},link:{k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kaIpWk:"x1cum3z5",kMwMTN:"xtvkl4p",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1w1ofmy",k3XXqK:"xaatb59",kMeerF:"xm9seqh x1k57tk5",kMnn75:"xujl8zx",kcSHmL:"xg830sg",$$css:true},list:{kqGvvJ:"x10im51j",k1K539:"xzboxd6 xgzphdn",kZCmMZ:"x1d9hf09",$$css:true},listItem:{kZCmMZ:"xqxnp8d",$$css:true},paragraph:{kqGvvJ:"x10im51j",k1K539:"xzboxd6 xgzphdn",$$css:true},root:{kMwMTN:"x14tvo57",k63SB2:"x1lo1l87",k7Eaqz:"xeuugli",kHjlTd:"x1mzt3pk",$$css:true},rule:{kLZC3w:"xcadu6e",kPef9Z:"x13fuv20",kEafiO:"x1vfp6xi",kqGvvJ:"x12jd5q2",$$css:true}};

package/dist/components/menu/menu-align-context.js

@@ -0,0 +1,3 @@
+import{createContext}from"react";// A menubar aligns its menus with the start of their triggers, like desktop
+// menubars; standalone menus keep Base UI's centered default.
+export const MenuAlignContext=createContext(undefined);

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

@@ -0,0 +1,75 @@
+import { Menu as BaseMenu, type MenuRootProps as BaseMenuRootProps, type MenuRadioGroupChangeEventDetails, type MenuSubmenuRootProps } from "@base-ui/react/menu";
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+import type { Closed } from "../../closed";
+type MenuPositionerProps = ComponentPropsWithRef<typeof BaseMenu.Positioner>;
+export type MenuPortalProps = Closed<ComponentPropsWithRef<typeof BaseMenu.Portal>>;
+export type MenuProps<Payload = unknown> = Closed<BaseMenuRootProps<Payload>>;
+export type MenuTriggerProps<Payload = unknown> = Closed<Omit<ComponentPropsWithRef<typeof BaseMenu.Trigger>, "handle" | "payload"> & {
+    handle?: BaseMenuRootProps<Payload>["handle"];
+    payload?: Payload;
+}>;
+export type MenuPopupProps = Closed<Omit<ComponentPropsWithRef<typeof BaseMenu.Popup>, "ref"> & {
+    align?: MenuPositionerProps["align"];
+    alignOffset?: MenuPositionerProps["alignOffset"];
+    portalProps?: MenuPortalProps;
+    anchor?: MenuPositionerProps["anchor"];
+    ref?: ComponentPropsWithRef<typeof BaseMenu.Popup>["ref"];
+    side?: MenuPositionerProps["side"];
+    sideOffset?: MenuPositionerProps["sideOffset"];
+}>;
+export type MenuItemVariant = "default" | "destructive";
+export type MenuItemProps = Closed<Omit<ComponentPropsWithRef<typeof BaseMenu.Item>, "ref"> & {
+    inset?: boolean;
+    ref?: ComponentPropsWithRef<typeof BaseMenu.Item>["ref"];
+    variant?: MenuItemVariant;
+}>;
+export type MenuLinkItemProps = Closed<ComponentPropsWithRef<typeof BaseMenu.LinkItem> & {
+    inset?: boolean;
+    variant?: MenuItemVariant;
+}>;
+export type MenuGroupProps = Closed<ComponentPropsWithRef<typeof BaseMenu.Group>>;
+export type MenuGroupLabelProps = Closed<ComponentPropsWithRef<typeof BaseMenu.GroupLabel> & {
+    inset?: boolean;
+}>;
+export type MenuSeparatorProps = Closed<ComponentPropsWithRef<typeof BaseMenu.Separator>>;
+export type MenuShortcutProps = Closed<ComponentPropsWithRef<"kbd">>;
+export type MenuCheckboxItemVariant = "default" | "switch";
+export type MenuCheckboxItemProps = Closed<Omit<ComponentPropsWithRef<typeof BaseMenu.CheckboxItem>, "ref"> & {
+    ref?: ComponentPropsWithRef<typeof BaseMenu.CheckboxItem>["ref"];
+    variant?: MenuCheckboxItemVariant;
+}>;
+type BaseMenuRadioGroupProps = ComponentPropsWithRef<typeof BaseMenu.RadioGroup>;
+export type MenuRadioGroupProps<Value = unknown> = Closed<Omit<BaseMenuRadioGroupProps, "defaultValue" | "onValueChange" | "value"> & {
+    defaultValue?: Value;
+    onValueChange?: (value: Value, eventDetails: MenuRadioGroupChangeEventDetails) => void;
+    value?: Value;
+}>;
+type BaseMenuRadioItemProps = ComponentPropsWithRef<typeof BaseMenu.RadioItem>;
+export type MenuRadioItemProps<Value = unknown> = Closed<Omit<BaseMenuRadioItemProps, "value"> & {
+    value: Value;
+}>;
+export type MenuSubProps = Closed<MenuSubmenuRootProps>;
+export type MenuSubTriggerProps = Closed<Omit<ComponentPropsWithRef<typeof BaseMenu.SubmenuTrigger>, "ref"> & {
+    inset?: boolean;
+    ref?: ComponentPropsWithRef<typeof BaseMenu.SubmenuTrigger>["ref"];
+}>;
+export type MenuSubPopupProps = Closed<MenuPopupProps>;
+export declare const MenuCreateHandle: typeof BaseMenu.createHandle;
+export declare const MenuPrimitive: typeof BaseMenu;
+export declare const MenuPortal: (props: MenuPortalProps) => ReactNode;
+export declare const Menu: typeof BaseMenu.Root;
+export declare const MenuSub: typeof BaseMenu.SubmenuRoot;
+export declare function MenuTrigger<Payload = unknown>({ ref: forwardedRef, render, type, ...rest }: MenuTriggerProps<Payload>): import("react").JSX.Element;
+export declare function MenuPopup({ align, alignOffset, side, sideOffset, ...rest }: MenuPopupProps): import("react").JSX.Element;
+export declare function MenuItem({ render, children, inset, ref: forwardedRef, variant, ...rest }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuLinkItem({ children, inset, ref: forwardedRef, render, variant, ...rest }: MenuLinkItemProps): import("react").JSX.Element;
+export declare function MenuGroup({ render, ref: forwardedRef, ...rest }: MenuGroupProps): import("react").JSX.Element;
+export declare function MenuGroupLabel({ render, inset, ref: forwardedRef, ...rest }: MenuGroupLabelProps): import("react").JSX.Element;
+export declare function MenuSeparator({ render, ref: forwardedRef, ...rest }: MenuSeparatorProps): import("react").JSX.Element;
+export declare function MenuShortcut({ children, ref: forwardedRef, ...rest }: MenuShortcutProps): import("react").JSX.Element;
+export declare function MenuCheckboxItem({ render, children, ref: forwardedRef, variant, ...rest }: MenuCheckboxItemProps): import("react").JSX.Element;
+export declare function MenuRadioGroup<Value = unknown>({ render, ...rest }: MenuRadioGroupProps<Value>): import("react").JSX.Element;
+export declare function MenuRadioItem<Value = unknown>({ render, children, ...rest }: MenuRadioItemProps<Value>): import("react").JSX.Element;
+export declare function MenuSubTrigger({ render, children, inset, ref: forwardedRef, ...rest }: MenuSubTriggerProps): import("react").JSX.Element;
+export declare function MenuSubPopup({ align, alignOffset, side, sideOffset, ...rest }: MenuSubPopupProps): import("react").JSX.Element;
+export {};

package/dist/components/menu/menu.js

@@ -0,0 +1,2 @@
+"use client";import{useDirection}from"@base-ui/react/direction-provider";import{Menu as BaseMenu}from"@base-ui/react/menu";import{mergeProps}from"@base-ui/react/merge-props";import{props}from"@stylexjs/stylex";import{useContext}from"react";import{controlLabel}from"../../control-label";import{IconCheck,IconChevronLeft,IconChevronRight}from"../../icons";import{protectRenderSlot}from"../../render-utils";import{kbdStyles}from"../kbd/kbd.styles";import{ScrollArea}from"../scroll-area/scroll-area";import{menuStyles}from"./menu.styles";import{MenuAlignContext}from"./menu-align-context";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const itemVariantStyles={default:menuStyles.itemDefault,destructive:menuStyles.itemDestructive};export const MenuCreateHandle=BaseMenu.createHandle;export const MenuPrimitive=BaseMenu;export const MenuPortal=BaseMenu.Portal;export const Menu=BaseMenu.Root;export const MenuSub=BaseMenu.SubmenuRoot;function CheckIcon(){return/*#__PURE__*/_jsx(IconCheck,{"aria-hidden":"true",focusable:"false",...props(menuStyles.checkIcon),size:"1em"});}function renderSwitchIndicator(indicatorProps,state){return/*#__PURE__*/_jsx("span",{...indicatorProps,...props(menuStyles.switchIndicator,state.checked&&menuStyles.switchIndicatorChecked),children:/*#__PURE__*/_jsx("span",{...props(menuStyles.switchThumb,state.checked&&menuStyles.switchThumbChecked)})});}function MenuPopupSurface({dataSlot="menu-popup",render,anchor,align,alignOffset,children,portalProps,ref:forwardedRef,side,sideOffset,...rest}){return/*#__PURE__*/_jsx(BaseMenu.Portal,{...portalProps,children:/*#__PURE__*/_jsx(BaseMenu.Positioner,{align:align,alignOffset:alignOffset,anchor:anchor,"data-slot":"menu-positioner",side:side,sideOffset:sideOffset,...props(menuStyles.positioner),children:/*#__PURE__*/_jsx(BaseMenu.Popup,{...rest,"data-slot":dataSlot,ref:forwardedRef,render:protectRenderSlot(dataSlot,render),...props(menuStyles.popup),children:/*#__PURE__*/_jsx(ScrollArea,{overscrollContain:true,scrollFade:true,children:/*#__PURE__*/_jsx("div",{...props(menuStyles.content),children:children})})})})});}export function MenuTrigger({ref:forwardedRef,render,type,...rest}){return/*#__PURE__*/_jsx(BaseMenu.Trigger,{...rest,"data-slot":"menu-trigger",ref:forwardedRef,render:protectRenderSlot("menu-trigger",render),type:render?type:type??"button"});}export function MenuPopup({align,alignOffset,side="bottom",sideOffset=4,...rest}){const contextAlign=useContext(MenuAlignContext);return/*#__PURE__*/_jsx(MenuPopupSurface,{align:align??contextAlign??"center",alignOffset:alignOffset,side:side,sideOffset:sideOffset,...rest});}export function MenuItem({render,children,inset=false,ref:forwardedRef,variant="default",...rest}){return/*#__PURE__*/_jsx(BaseMenu.Item,{...rest,"data-inset":inset||undefined,"data-slot":"menu-item","data-variant":variant,ref:forwardedRef,render:protectRenderSlot("menu-item",render),...props(menuStyles.item,itemVariantStyles[variant],inset&&menuStyles.inset),children:controlLabel(children)});}export function MenuLinkItem({children,inset=false,ref:forwardedRef,render,variant="default",...rest}){return/*#__PURE__*/_jsx(BaseMenu.LinkItem,{...rest,"data-inset":inset||undefined,"data-slot":"menu-link-item","data-variant":variant,ref:forwardedRef,render:protectRenderSlot("menu-link-item",render),...props(menuStyles.item,itemVariantStyles[variant],inset&&menuStyles.inset),children:controlLabel(children)});}export function MenuGroup({render,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx(BaseMenu.Group,{...rest,"data-slot":"menu-group",ref:forwardedRef,render:protectRenderSlot("menu-group",render),...props(menuStyles.group)});}export function MenuGroupLabel({render,inset=false,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx(BaseMenu.GroupLabel,{...rest,"data-inset":inset||undefined,"data-slot":"menu-label",ref:forwardedRef,render:protectRenderSlot("menu-label",render),...props(menuStyles.groupLabel,inset&&menuStyles.inset)});}export function MenuSeparator({render,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx(BaseMenu.Separator,{...rest,"data-slot":"menu-separator",ref:forwardedRef,render:protectRenderSlot("menu-separator",render),...props(menuStyles.separator)});}export function MenuShortcut({children,ref:forwardedRef,...rest}){return(/*#__PURE__*/// Key order reads left to right in every language.
+_jsx("kbd",{dir:"ltr",...rest,"data-slot":"menu-shortcut",ref:forwardedRef,...mergeProps(props(kbdStyles.group,menuStyles.shortcut),{}),children:controlLabel(children)}));}export function MenuCheckboxItem({render,children,ref:forwardedRef,variant="default",...rest}){const indicator=variant==="switch"?/*#__PURE__*/_jsx(BaseMenu.CheckboxItemIndicator,{keepMounted:true,render:renderSwitchIndicator}):/*#__PURE__*/_jsx(BaseMenu.CheckboxItemIndicator,{keepMounted:true,...props(menuStyles.indicator),children:/*#__PURE__*/_jsx(CheckIcon,{})});return/*#__PURE__*/_jsxs(BaseMenu.CheckboxItem,{...rest,"data-slot":"menu-checkbox-item",ref:forwardedRef,render:protectRenderSlot("menu-checkbox-item",render),...props(menuStyles.item,menuStyles.itemDefault),children:[variant==="default"&&indicator,controlLabel(children),variant==="switch"&&indicator]});}export function MenuRadioGroup({render,...rest}){return/*#__PURE__*/_jsx(BaseMenu.RadioGroup,{...rest,"data-slot":"menu-radio-group",render:protectRenderSlot("menu-radio-group",render)});}export function MenuRadioItem({render,children,...rest}){return/*#__PURE__*/_jsxs(BaseMenu.RadioItem,{...rest,"data-slot":"menu-radio-item",render:protectRenderSlot("menu-radio-item",render),...props(menuStyles.item,menuStyles.itemDefault),children:[/*#__PURE__*/_jsx(BaseMenu.RadioItemIndicator,{keepMounted:true,...props(menuStyles.indicator),children:/*#__PURE__*/_jsx("span",{...props(menuStyles.radioDot)})}),controlLabel(children)]});}function ChevronIcon(){const direction=useDirection();return direction==="rtl"?/*#__PURE__*/_jsx(IconChevronLeft,{"aria-hidden":"true",focusable:"false",...props(menuStyles.chevron),size:"1em"}):/*#__PURE__*/_jsx(IconChevronRight,{"aria-hidden":"true",focusable:"false",...props(menuStyles.chevron),size:"1em"});}export function MenuSubTrigger({render,children,inset=false,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsxs(BaseMenu.SubmenuTrigger,{...rest,"data-inset":inset||undefined,"data-slot":"menu-sub-trigger",ref:forwardedRef,render:protectRenderSlot("menu-sub-trigger",render),...props(menuStyles.item,menuStyles.itemDefault,menuStyles.subTrigger,inset&&menuStyles.inset),children:[controlLabel(children),/*#__PURE__*/_jsx(ChevronIcon,{})]});}export function MenuSubPopup({align="start",alignOffset,side="inline-end",sideOffset=0,...rest}){return/*#__PURE__*/_jsx(MenuPopupSurface,{align:align,alignOffset:alignOffset??(align==="center"?undefined:-5),dataSlot:"menu-sub-content",side:side,sideOffset:sideOffset,...rest});}

package/dist/components/menu/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/floating-item-colors.stylex";import{floatingItemColors}from"../../styles/floating-item-colors.stylex";import"../../styles/fonts.stylex";import{fonts}from"../../styles/fonts.stylex";import"../../styles/interaction.stylex";import{borderWidth,forcedColorAdjust,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,letterSpacing,lineHeight}from"../../styles/typography.stylex";export const menuStyles={checkIcon:{k1xSpc:"x1lliihq",kZKoxP:"x1l36t39",kzqmXN:"xcdlrvm",$$css:true},chevron:{kMwMTN:"x15rks2t",kmuXW:"x2lah0s",kZKoxP:"x1l36t39",keTefX:"xvc5jky",kzqmXN:"xcdlrvm",$$css:true},content:{kmVPX3:"x1btfdvn",$$css:true},group:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",$$css:true},groupLabel:{kMwMTN:"x125omll",kGuDYH:"x1ws78te",kC21eY:"x2vx8kg",k63SB2:"xuku2lm",kb6lSQ:"xdee7k9",kLWn49:"x76y1r9",kHjlTd:"xj0a0fe",kGO01o:"xvx3g1o",kLKAdn:"xvdlrvc",kg3NbH:"xb5xqfq",$$css:true},indicator:{kGNEyG:"x6s0dn4",kMwMTN:"x118fp1a",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kZKoxP:"x1l36t39",kjj79g:"xl56j7k",kSiTet:"xtsrun4 xg01cxk",k3aq6I:"x1398315 x1a33avv",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x6o7n8i",kAMwcw:"xvhdtae",kzqmXN:"xcdlrvm",$$css:true},inset:{kZCmMZ:"x7w76f6",$$css:true},item:{kGNEyG:"x6s0dn4",kT0f0o:"xe3sxwc",kVL7Gh:"x1xvnbp1",kfmiAY:"x1d1ei5k",krdFHd:"x10v8yj5",kB7OPa:"x9f619",kkrTdU:"x1j1ks5o xt0e3qv",k1xSpc:"x78zum5",kMv6JI:"xjb2p0i",kGuDYH:"xlh8hku",kC21eY:"x2vx8kg",k63SB2:"x1lo1l87",kAXs8y:"x1t9pinz",kOIVth:"xp4ho6d",kLWn49:"x2xzzt7",kAzted:"x1in32aq",k7Eaqz:"xeuugli",kSiTet:"x1yporm9 x1hc1fzr",kjBf7l:"xf5tgej x1uczgqu",kInvED:"x11r2kya",k3XXqK:"x159zbam x1t137rt",kMeerF:"x1vhx2qj",kHjlTd:"xj0a0fe",k8WAf4:"xz8rb64",kg3NbH:"xb5xqfq",kybGjl:"x1hl2dhg",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x7h6xqb",kAMwcw:"xvhdtae",kfSwDN:"x87ps6o",$$css:true},itemDefault:{kWkggS:"x1atuimu xjbqb8w",kMwMTN:"x1ovde1y x14tvo57",$$css:true},itemDestructive:{kWkggS:"x6i2cx9 xjbqb8w",kMwMTN:"x19t5qpb x1rncs7t",$$css:true},popup:{kWkggS:"xui3q9s",kVAM5u:"x1l55r2k x155xxfk",kaIpWk:"x1yl01a3",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"x1mhlhek",kB7OPa:"x9f619",kMwMTN:"x14tvo57",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kskxy:"x14ibmtv",ks0D6T:"xtuccea",k7Eaqz:"x12kinc7",kSiTet:"xiyypsa x1hw7zpd x1hc1fzr",kI3sdo:"x1a2a7pz",kVQacm:"xb3r6kr",k3aq6I:"xddaku3 xkr3uco x5q7jw0 x1w69v5t xub4z9z x1hl4pyw xeoiet0 xb8fv44 x19hlpk1 xbp8eot x1h69cw3 x109428r x1c071of",k3nNDw:"xctpfpq",kIyJzY:"x1e471i8 xmhz0v7 x1j5v3x2",k1ekBW:"x6o7n8i",kAMwcw:"xvhdtae",$$css:true},positioner:{ks0D6T:"x193lwwl",kY2c9j:"xa9119d",$$css:true},radioDot:{kWkggS:"xtwfq29",kT0f0o:"x1pahc9y",kVL7Gh:"x1ertn4p",kfmiAY:"xeusxvb",krdFHd:"x1c9tyrk",kZKoxP:"x4j2xbe",kzqmXN:"xrkia0p",$$css:true},separator:{kWkggS:"xcmsz27",kZKoxP:"x1pt7pui",kqGvvJ:"xaoelkr",kUOVxO:"x111xfez",$$css:true},shortcut:{kMwMTN:"x1kct7rm x125omll",kmuXW:"x2lah0s",kMv6JI:"xjb2p0i",kGuDYH:"x1ws78te",kC21eY:"x2vx8kg",kcqcaj:"xss6m8b",k63SB2:"x1lo1l87",kb6lSQ:"xdee7k9",keTefX:"xvc5jky",khDVqt:"xuxw1ft",$$css:true},subTrigger:{kWkggS:"xmflkt8",kMwMTN:"xo7s1uj",$$css:true},switchIndicator:{kGNEyG:"x6s0dn4",kWkggS:"x1ylkqan",kT0f0o:"x3hdh8v",kVL7Gh:"xr0m5pc",kfmiAY:"x9okykr",krdFHd:"x1142k65",kGVxlE:"x1xxjdaf",kB7OPa:"x9f619",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kZKoxP:"x1l36t39",keTefX:"xvc5jky",kmVPX3:"x1ngqb6p",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x15406qy",kAMwcw:"xvhdtae",kzqmXN:"xh29eag",$$css:true},switchIndicatorChecked:{kWkggS:"x11ovu81",$$css:true},switchThumb:{kWkggS:"x1dgvb5d",kT0f0o:"x1pahc9y",kVL7Gh:"x1ertn4p",kfmiAY:"xeusxvb",krdFHd:"x1c9tyrk",kGVxlE:"xxmju8b",kZKoxP:"xvle69y",keTefX:"x1lziwak",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x3a1nof",kAMwcw:"xvhdtae",kzqmXN:"x1jw3ynk",$$css:true},switchThumbChecked:{kWkggS:"x1dgvb5d",keTefX:"x4qatp2",$$css:true}};

package/dist/components/menubar/menubar.d.ts

@@ -0,0 +1,13 @@
+import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import type { MenuTriggerProps } from "../menu/menu";
+type BaseMenubarProps = ComponentPropsWithRef<typeof BaseMenubar>;
+type Part<T> = Omit<Closed<T>, "data-slot" | "role">;
+export type MenubarProps = Omit<Part<BaseMenubarProps>, "aria-orientation"> & {
+    ref?: BaseMenubarProps["ref"];
+};
+export type MenubarTriggerProps<Payload = unknown> = Omit<Closed<MenuTriggerProps<Payload>>, "data-slot" | "role">;
+export declare function Menubar({ children, orientation, ref: forwardedRef, render, ...rest }: MenubarProps): import("react").JSX.Element;
+export declare function MenubarTrigger<Payload = unknown>({ children, ref: forwardedRef, render, type, ...rest }: MenubarTriggerProps<Payload>): import("react").JSX.Element;
+export {};

package/dist/components/menubar/menubar.js

@@ -0,0 +1 @@
+"use client";import{Menu as BaseMenu}from"@base-ui/react/menu";import{Menubar as BaseMenubar}from"@base-ui/react/menubar";import{props}from"@stylexjs/stylex";import{controlLabel}from"../../control-label";import{protectRenderSlot}from"../../render-utils";import{typeRoles}from"../../styles/typography.styles";import{MenuAlignContext}from"../menu/menu-align-context";import{menubarStyles}from"./menubar.styles";import{jsx as _jsx}from"react/jsx-runtime";function stripReservedProps(rest){for(const name of["aria-orientation","className","data-slot","role","style"]){Reflect.deleteProperty(rest,name);}}export function Menubar({children,orientation="horizontal",ref:forwardedRef,render,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx(BaseMenubar,{...rest,"aria-orientation":orientation,"data-slot":"menubar",orientation:orientation,ref:forwardedRef,render:protectRenderSlot("menubar",render,{"aria-orientation":orientation,role:"menubar"}),...props(menubarStyles.root),children:/*#__PURE__*/_jsx(MenuAlignContext.Provider,{value:"start",children:children})});}export function MenubarTrigger({children,ref:forwardedRef,render,type,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx(BaseMenu.Trigger,{...rest,"data-slot":"menubar-trigger",ref:forwardedRef,render:protectRenderSlot("menubar-trigger",render,{role:"menuitem"}),type:render?type:type??"button",...props(menubarStyles.trigger,typeRoles.ui),children:controlLabel(children)});}

package/dist/components/menubar/menubar.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/interaction.stylex";import{borderWidth,focus,focusMotion,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";export const menubarStyles={root:{kWkggS:"xwn18cz",kVAM5u:"x155xxfk",kaIpWk:"x1jw0md8",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"x10ilepr",kB7OPa:"x9f619",k1xSpc:"x78zum5",kXwgrk:"x1ngl2aw x1q0g3np",kwnvtZ:"x17j74nd x1a02dak",kOIVth:"x13hh4mm",ks0D6T:"x193iq5w",k7Eaqz:"xeuugli",kmVPX3:"xlxy37g",$$css:true},trigger:{kGNEyG:"x6s0dn4",k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kWkggS:"x16f8uvd xnau8x9 xdbtqwr xf3ijce xjbqb8w",kT0f0o:"x1hia2b7",kVL7Gh:"x1dz734k",kfmiAY:"x2dv6dr",krdFHd:"xn5rixj",ksu8eU:"x1y0btm7",kMzoRj:"xc342km",kB7OPa:"x9f619",kMwMTN:"x14tvo57",kkrTdU:"x1j1ks5o xt0e3qv",k1xSpc:"x3nfvp2",kmuXW:"xsnv01j",kMv6JI:"xjb2p0i",kOIVth:"x13hh4mm",kZKoxP:"xgaasie",kjj79g:"x1nhvcw1",ks0D6T:"x193iq5w",kAzted:"x1in32aq",k7Eaqz:"xeuugli",kSiTet:"x1yporm9 x1hc1fzr",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1w1ofmy",k3XXqK:"x9v5kkp xzc55om",kMeerF:"x1vhx2qj",kHjlTd:"xj0a0fe",k8WAf4:"x1lmimt7",kg3NbH:"xb5xqfq",k9WMMc:"x1yc453h",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x1k8yt6i",kAMwcw:"xvhdtae",kzqmXN:"xwe2phr",$$css:true}};

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

@@ -0,0 +1,47 @@
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+import type { Closed } from "../../closed";
+type MessageBase = Omit<Closed<ComponentPropsWithRef<"div">>, "children" | "data-slot" | "role"> & {
+    /** The sender's name, shown above the message. Use it in group chats. */
+    author?: string;
+    /** The sender's picture, such as an Avatar. */
+    avatar?: ReactNode;
+};
+export interface MessageAttachment {
+    /** The file itself. Images open it in a lightbox; other files in a new tab. */
+    href?: string;
+    name: string;
+    /** An image URL; files without one show their type. */
+    preview?: string;
+}
+export type MessageUserProps = MessageBase & {
+    /** `end` for the person reading, `start` for others in a group chat. */
+    align?: "end" | "start";
+    /** Files the person sent, shown above as the composer showed them. */
+    attachments?: readonly MessageAttachment[];
+    /** What the person wrote. */
+    children: string;
+    /** The machine-readable send time for `time`, such as an ISO instant. */
+    dateTime?: string;
+    from: "user";
+    /** Shows Edit, which opens the text in place; called with the new text. */
+    onEdit?: (text: string) => void;
+    /** Shows Retry beside "Not sent" when the message failed to send. */
+    onRetry?: () => void;
+    /** `failed` when the message did not reach the agent. */
+    status?: "failed" | "sent";
+    /** When it was sent, formatted for the reader, such as "4:20 PM". */
+    time?: string;
+};
+export type MessageAgentProps = MessageBase & {
+    /** The agent's parts in order, such as AgentThinking, ToolCallGroup, and StreamingText. */
+    children: ReactNode;
+    from: "agent";
+};
+export type MessageProps = MessageAgentProps | MessageUserProps;
+/**
+ * One turn in a conversation. The person's message is a bubble with Copy,
+ * Edit, and the time under it; the agent's turn holds its parts in a column,
+ * without a bubble.
+ */
+export declare function Message(messageProps: MessageProps): import("react").JSX.Element;
+export {};

package/dist/components/message/message.js

@@ -0,0 +1,16 @@
+"use client";import{props}from"@stylexjs/stylex";import{useCallback,useRef,useState}from"react";import{CopyButton}from"../../copy-button";import{IconAlertCircle,IconPencil,IconRefresh}from"../../icons";import{Arrivals,MotionScope}from"../../motion";import{typeRoles}from"../../styles/typography.styles";import{Button}from"../button/button";import{ComposerAttachment}from"../composer/composer-parts";import{Lightbox}from"../lightbox/lightbox";import{GalleryPopup}from"../lightbox/lightbox-gallery";import{Textarea}from"../textarea/textarea";import{messageStyles as styles}from"./message.styles";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";function Author({name}){if(!name){return null;}return/*#__PURE__*/_jsx("span",{"data-slot":"message-author",...props(typeRoles.caption,styles.author),children:name});}function Frame({align,author,avatar,children,from,rest,status}){for(const prop of["className","data-slot","role","style"]){Reflect.deleteProperty(rest,prop);}const end=align==="end";return/*#__PURE__*/_jsxs("div",{...rest,"data-align":align,"data-from":from,"data-slot":"message","data-status":status,...props(styles.root,end&&styles.reverse),children:[avatar?/*#__PURE__*/_jsx("span",{"data-slot":"message-avatar",...props(styles.avatar),children:avatar}):null,/*#__PURE__*/_jsxs("div",{...props(styles.body,end?styles.end:styles.start,from==="agent"&&styles.agentBody),children:[/*#__PURE__*/_jsx(Author,{name:author}),children]})]});}// A file's place among the message's images, for the lightbox.
+function imagesBefore(files,index){return files.slice(0,index).filter(file=>file.preview).length;}function Tile({file,onOpen,position}){const open=useCallback(()=>onOpen(position),[onOpen,position]);return/*#__PURE__*/_jsx(ComposerAttachment,{href:file.preview?undefined:file.href,name:file.name,onOpen:file.preview?open:undefined,preview:file.preview});}// The same tiles the composer showed before the message was sent. Images
+// open together in a lightbox; other files open in a new tab.
+function Attachments({align,attachments}){const[index,setIndex]=useState(null);const images=(attachments??[]).flatMap(file=>file.preview?[{alt:file.name,src:file.href??file.preview}]:[]);const count=images.length;const step=useCallback(delta=>setIndex(current=>((current??0)+delta+count)%count),[count]);const close=useCallback(open=>{if(!open){setIndex(null);}},[]);if(!attachments?.length){return null;}return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("ul",{"aria-label":"Attachments","data-slot":"message-attachments",...props(styles.attachments,align==="end"&&styles.attachmentsEnd),children:attachments.map((file,key)=>/*#__PURE__*/_jsx(Tile,{file:file// biome-ignore lint/suspicious/noArrayIndexKey: a sent message's files never change, and two may share a name.
+,onOpen:setIndex,position:imagesBefore(attachments,key)},key))}),count>0?/*#__PURE__*/_jsx(Lightbox,{onOpenChange:close,open:index!==null,children:/*#__PURE__*/_jsx(GalleryPopup,{images:images,index:index??0,onStep:step,title:images[index??0]?.alt??"Attachment"})}):null]});}// Long text folds after eight lines; the last one fades out above Show more.
+// The button appears only once the text is measured to overflow.
+function watchLength(text){const bubble=text?.parentElement;if(!(text&&bubble)||typeof ResizeObserver==="undefined"){return;}const observer=new ResizeObserver(()=>{// While open, the text is whole, so keep the last answer.
+if(!bubble.hasAttribute("data-expanded")){bubble.toggleAttribute("data-long",text.scrollHeight>text.clientHeight+1);}});observer.observe(text);return()=>observer.disconnect();}function Bubble({text}){const[expanded,setExpanded]=useState(false);const toggle=useCallback(()=>setExpanded(open=>!open),[]);return/*#__PURE__*/_jsxs("div",{"data-expanded":expanded||undefined,"data-slot":"message-bubble",...props(typeRoles.body,styles.bubble),children:[/*#__PURE__*/_jsx("p",{"data-slot":"message-text",ref:watchLength,...props(styles.text,!expanded&&styles.folded),children:text}),/*#__PURE__*/_jsx("button",{"aria-expanded":expanded,onClick:toggle,type:"button",...props(typeRoles.ui,styles.more),children:expanded?"Show less":"Show more"})]});}// Stays in view with the bubble, so the person sees what did not go out.
+function Failure({onRetry}){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("span",{"data-slot":"message-error",role:"alert",...props(typeRoles.caption,styles.error),children:[/*#__PURE__*/_jsx(IconAlertCircle,{"aria-hidden":"true",size:14}),"Not sent"]}),onRetry?/*#__PURE__*/_jsxs(Button,{onClick:onRetry,size:"xs",variant:"ghost",children:[/*#__PURE__*/_jsx(IconRefresh,{"aria-hidden":"true",size:"1em"}),"Retry"]}):null]});}function Editor({onCancel,onSave,text}){const[draft,setDraft]=useState(text);const empty=draft.trim()==="";const change=useCallback(event=>setDraft(event.currentTarget.value),[]);const save=useCallback(event=>{event.preventDefault();if(!empty){onSave(draft.trim());}},[draft,empty,onSave]);// Enter sends and Shift+Enter starts a new line, as in the composer.
+const keys=useCallback(event=>{if(event.key==="Escape"){onCancel();}else if(event.key==="Enter"&&!event.shiftKey&&!event.nativeEvent.isComposing){save(event);}},[onCancel,save]);return/*#__PURE__*/_jsxs("form",{"data-slot":"message-editor",onSubmit:save,...props(styles.editor),children:[/*#__PURE__*/_jsx(Textarea,{"aria-label":"Edit message",onChange:change,onKeyDown:keys,ref:focusAtEnd,rows:Math.min(8,draft.split("\n").length+1),value:draft}),/*#__PURE__*/_jsxs("div",{...props(styles.editorActions),children:[/*#__PURE__*/_jsx(Button,{onClick:onCancel,size:"sm",variant:"ghost",children:"Cancel"}),/*#__PURE__*/_jsx(Button,{disabled:empty,size:"sm",type:"submit",children:"Send"})]})]});}// Opens the editor with the caret after the text.
+function focusAtEnd(node){if(node){node.focus();node.setSelectionRange(node.value.length,node.value.length);}}function Actions({align,dateTime,editRef,failed,onEdit,onRetry,text,time}){return/*#__PURE__*/_jsxs("div",{"data-slot":"message-actions",...props(styles.actions,align==="end"?styles.actionsEnd:styles.actionsStart,failed&&styles.actionsShown),children:[failed?/*#__PURE__*/_jsx(Failure,{onRetry:onRetry}):null,time&&!failed?/*#__PURE__*/_jsx("time",{dateTime:dateTime,...props(typeRoles.caption,styles.time),children:time}):null,/*#__PURE__*/_jsx(CopyButton,{label:"Copy message",text:text}),onEdit?/*#__PURE__*/_jsx(Button,{"aria-label":"Edit message",onClick:onEdit,ref:editRef,size:"icon-xs",variant:"ghost",children:/*#__PURE__*/_jsx(IconPencil,{"aria-hidden":"true",size:"1em"})}):null]});}function UserMessage({align="end",attachments,author,avatar,children,dateTime,from,onEdit,onRetry,status="sent",time,...rest}){const[editing,setEditing]=useState(false);// Focus returns to Edit when the editor closes.
+const closing=useRef(false);const editRef=useCallback(node=>{if(node&&closing.current){closing.current=false;node.focus();}},[]);const open=useCallback(()=>setEditing(true),[]);const cancel=useCallback(()=>{closing.current=true;setEditing(false);},[]);const save=useCallback(text=>{cancel();if(text!==children){onEdit?.(text);}},[cancel,children,onEdit]);return/*#__PURE__*/_jsxs(Frame,{align:align,author:author,avatar:avatar,from:from,rest:rest,status:status,children:[/*#__PURE__*/_jsx(Attachments,{align:align,attachments:attachments}),editing?/*#__PURE__*/_jsx(Editor,{onCancel:cancel,onSave:save,text:children}):/*#__PURE__*/_jsx(Bubble,{text:children}),editing?null:/*#__PURE__*/_jsx(Actions,{align:align,dateTime:dateTime,editRef:editRef,failed:status==="failed",onEdit:onEdit?open:undefined,onRetry:onRetry,text:children,time:time})]});}/**
+ * One turn in a conversation. The person's message is a bubble with Copy,
+ * Edit, and the time under it; the agent's turn holds its parts in a column,
+ * without a bubble.
+ */export function Message(messageProps){if(messageProps.from==="user"){return/*#__PURE__*/_jsx(UserMessage,{...messageProps});}const{author,avatar,children,from,...rest}=messageProps;return/*#__PURE__*/_jsx(Frame,{align:"start",author:author,avatar:avatar,from:from,rest:rest,children:/*#__PURE__*/_jsx(MotionScope,{children:/*#__PURE__*/_jsx(Arrivals,{children:children})})});}

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

@@ -0,0 +1,3 @@
+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/interaction.stylex";import{borderWidth}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{lineHeight}from"../../styles/typography.stylex";// Pulls a row of small icon buttons out by their padding, so the glyph at
+// the edge lines up with the bubble's edge.
+const BUTTON_INSET=`calc((${controlSize.xs} - ${glyphSize.xs}) / -2)`;export const messageStyles={actions:{kGNEyG:"x6s0dn4",kMwMTN:"x125omll",k1xSpc:"x78zum5",kOIVth:"x13hh4mm",kAzted:"x15j2gbd",kSiTet:"x1hc1fzr x5atdce x1obg4k5 x1s37bwl",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x19991ni",kAMwcw:"x1u30mss",$$css:true},actionsEnd:{k71WvV:"xrpp18u",$$css:true},actionsShown:{kSiTet:"x1hc1fzr",$$css:true},actionsStart:{kXwgrk:"x15zctf7",keTefX:"x1is7kxt",$$css:true},agentBody:{kOIVth:"xiw8qbs",$$css:true},attachments:{k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"xp4ho6d",kB88ic:"xe8uvvx",kogj98:"x1ghz6dp",ks0D6T:"x17na0u1",kmVPX3:"x1717udv",$$css:true},attachmentsEnd:{kjj79g:"x13a6bvl",$$css:true},author:{kMwMTN:"x125omll",kg3NbH:"xaqi9fd",$$css:true},avatar:{kmuXW:"x2lah0s",$$css:true},body:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kzQI83:"x1iyjqo2",kOIVth:"xp4ho6d",k7Eaqz:"xeuugli",$$css:true},bubble:{kWkggS:"xu84zt7",kaIpWk:"x1jw0md8",kMwMTN:"x14tvo57",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kogj98:"x1ghz6dp",ks0D6T:"x17na0u1",kHjlTd:"xj0a0fe",k8WAf4:"x391bbb",kg3NbH:"xaqi9fd",khDVqt:"x126k92a",$$css:true},editor:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xp4ho6d",kzqmXN:"xh8yej3",$$css:true},editorActions:{k1xSpc:"x78zum5",kOIVth:"xp4ho6d",kjj79g:"x13a6bvl",$$css:true},end:{kGNEyG:"xuk3077",$$css:true},error:{kGNEyG:"x6s0dn4",kMwMTN:"x1ytrddi",k1xSpc:"x3nfvp2",kOIVth:"x13hh4mm",kg3NbH:"xdbhxi8",$$css:true},folded:{kX1K2I:"x14n0q10 xw4ya9i",kskxy:"x1r5acun",kVQacm:"xb3r6kr",$$css:true},more:{kGNEyG:"x6s0dn4",kSGwAc:"xqcrz7y",kysU6D:"xjyslct",kWkggS:"xjbqb8w",kaIpWk:"xvozwe9",kMzoRj:"xc342km",kMwMTN:"xzr6qem x125omll",kkrTdU:"x1ypdohk",k1xSpc:"x1h6yokb x1s85apg",keoZOQ:"xhumjv5",kAzted:"xvfbv0m",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1hl8ikr",k3XXqK:"x9v5kkp x1t137rt",kMeerF:"x1vhx2qj",kmVPX3:"x1717udv",$$css:true},reverse:{kXwgrk:"x15zctf7",$$css:true},root:{kGNEyG:"x1cy8zhl",k1xSpc:"x78zum5",kOIVth:"xiw8qbs",k7Eaqz:"xeuugli",$$css:true},start:{kGNEyG:"x1cy8zhl",$$css:true},text:{kogj98:"x1ghz6dp",$$css:true},time:{kcqcaj:"xss6m8b",kg3NbH:"xdbhxi8",$$css:true}};

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

@@ -0,0 +1,58 @@
+export interface MessageScrollerAnchor {
+    id: string;
+    /** The anchor's own text, such as the question the person sent. */
+    label: string;
+    /** The start of the reply that follows it, empty until one arrives. */
+    reply: string;
+}
+export interface MessageScrollerSnapshot {
+    anchors: readonly MessageScrollerAnchor[];
+    /** True when there is nothing below the view to scroll toward. */
+    atEnd: boolean;
+    /** The turn being read, for a navigation rail. */
+    current: string | null;
+}
+export declare class MessageScrollerStore {
+    private viewport;
+    private log;
+    private spacer;
+    /** following: growing content keeps the view at the end. started: the view has opened at the end. */
+    private readonly mode;
+    /** The last turn sent while watching; it settles near the top. */
+    private anchor;
+    /** A scroll position the store set itself, until the view reaches it. */
+    private target;
+    /** The first item in view and its offset, so the view can hold still. */
+    private reference;
+    private snapshot;
+    private readonly listeners;
+    readonly subscribe: (listener: () => void) => () => void;
+    readonly getSnapshot: () => MessageScrollerSnapshot;
+    /** True once the view is on screen: rows from now on are new arrivals. */
+    readonly isLive: () => boolean;
+    readonly attachLog: (log: HTMLElement | null) => (() => void) | undefined;
+    readonly attachSpacer: (spacer: HTMLElement | null) => void;
+    readonly attachViewport: (viewport: HTMLElement | null) => (() => void) | undefined;
+    /** Scrolls to the newest content and follows it again. */
+    readonly scrollToEnd: (behavior?: ScrollBehavior) => void;
+    /** Scrolls a message to the top of the view, the previous turn peeking. */
+    readonly scrollToMessage: (id: string, behavior?: ScrollBehavior) => boolean;
+    private start;
+    private offsetOf;
+    private scrollTo;
+    private readonly onIntent;
+    private readonly onKey;
+    private readonly onScroll;
+    private onLayout;
+    private onMutation;
+    private sentTurn;
+    private settle;
+    private onBusyChange;
+    private sizeSpacer;
+    private distance;
+    private unseen;
+    private remember;
+    private holdStill;
+    private currentAnchor;
+    private update;
+}