@mizen-labs/ui 0.0.0-stage → 0.1.0

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,36 @@
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import type { ComponentPropsWithRef, Ref } from "react";
+type BaseAvatarRootProps = ComponentPropsWithRef<typeof BaseAvatar.Root>;
+type BaseAvatarImageProps = ComponentPropsWithRef<typeof BaseAvatar.Image>;
+type BaseAvatarFallbackProps = ComponentPropsWithRef<typeof BaseAvatar.Fallback>;
+type NativeDivProps = ComponentPropsWithRef<"div">;
+export type AvatarSize = "default" | "lg" | "sm";
+export type AvatarProps = Omit<BaseAvatarRootProps, "className" | "data-slot" | "style"> & {
+    ref?: BaseAvatarRootProps["ref"];
+    size?: AvatarSize;
+};
+export type AvatarImageProps = Omit<BaseAvatarImageProps, "alt" | "className" | "data-slot" | "style"> & {
+    alt: string;
+    ref?: BaseAvatarImageProps["ref"];
+};
+export type AvatarFallbackProps = Omit<BaseAvatarFallbackProps, "className" | "data-slot" | "style"> & {
+    color?: "neutral" | "blue" | "purple" | "green" | "orange";
+    ref?: BaseAvatarFallbackProps["ref"];
+};
+export type AvatarGroupProps = Omit<NativeDivProps, "className" | "data-slot" | "style"> & {
+    size?: AvatarSize;
+};
+export declare function Avatar({ ref: forwardedRef, render, size, ...rest }: AvatarProps): import("react").JSX.Element;
+export declare function AvatarGroup({ children, ref: forwardedRef, size, ...rest }: AvatarGroupProps): import("react").JSX.Element;
+export declare function AvatarImage({ alt, ref: forwardedRef, render, ...rest }: AvatarImageProps): import("react").JSX.Element;
+export declare function AvatarFallback({ children, color, ref: forwardedRef, render, ...rest }: AvatarFallbackProps): import("react").JSX.Element;
+export interface AvatarCharacterProps {
+    /** Accessible name. Omit when adjacent text already names the identity. */
+    label?: string;
+    ref?: Ref<SVGSVGElement>;
+    /** Stable identity key. Prefer an immutable ID over a display name. */
+    seed: string;
+    size?: AvatarSize;
+}
+export declare function AvatarCharacter({ seed, label, size, ref, }: AvatarCharacterProps): import("react").JSX.Element;
+export {};

package/dist/components/avatar/avatar.js

@@ -0,0 +1,4 @@
+"use client";import{Avatar as BaseAvatar}from"@base-ui/react/avatar";import{props}from"@stylexjs/stylex";import{createContext,useContext}from"react";import{controlLabel}from"../../control-label";import{protectRenderSlot}from"../../render-utils";import{avatarFallbackColors,avatarStyles}from"./avatar.styles";import{characterStyles}from"./avatar-character.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const AvatarGroupContext=createContext(null);const sizeStyles={default:avatarStyles.defaultSize,lg:avatarStyles.lg,sm:avatarStyles.sm};const groupOverlapStyles={default:avatarStyles.groupOverlapDefault,lg:avatarStyles.groupOverlapLg,sm:avatarStyles.groupOverlapSm};export function Avatar({ref:forwardedRef,render,size,...rest}){const group=useContext(AvatarGroupContext);const resolvedSize=size??group?.size??"default";const isGrouped=group!==null;return/*#__PURE__*/_jsx(BaseAvatar.Root,{...rest,"data-slot":"avatar",ref:forwardedRef,render:protectRenderSlot("avatar",render),...props(avatarStyles.root,sizeStyles[resolvedSize],isGrouped&&avatarStyles.groupRing,isGrouped&&groupOverlapStyles[resolvedSize])});}export function AvatarGroup({children,ref:forwardedRef,size="default",...rest}){return/*#__PURE__*/_jsx(AvatarGroupContext,{value:{size},children:/*#__PURE__*/_jsx("div",{...rest,"data-slot":"avatar-group",ref:forwardedRef,...props(avatarStyles.group),children:children})});}export function AvatarImage({alt,ref:forwardedRef,render,...rest}){return/*#__PURE__*/_jsx(BaseAvatar.Image,{alt:alt,...rest,"data-slot":"avatar-image",ref:forwardedRef,render:protectRenderSlot("avatar-image",render),...props(avatarStyles.image)});}export function AvatarFallback({children,color="neutral",ref:forwardedRef,render,...rest}){return/*#__PURE__*/_jsx(BaseAvatar.Fallback,{...rest,"data-slot":"avatar-fallback",ref:forwardedRef,render:protectRenderSlot("avatar-fallback",render),...props(avatarStyles.fallback,color!=="neutral"&&avatarFallbackColors[color]),children:controlLabel(children)});}const characterSizes={default:avatarStyles.defaultSize,lg:avatarStyles.lg,sm:avatarStyles.sm};const tones=[characterStyles.violet,characterStyles.blue,characterStyles.teal,characterStyles.green,characterStyles.amber,characterStyles.orange,characterStyles.rose,characterStyles.pink];// Bodies rise from the bottom edge. `face` is the eye line.
+const bodies=[{d:"M7 52V31a17 17 0 0 1 34 0v21Z",face:30},{d:"M7 52V31a17 17 0 0 1 34 0v21ZM13 10a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Zm22 0a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z",face:30},{d:"M8 52V35a16 16 0 0 1 32 0v17ZM14 24V9a3.5 3.5 0 0 1 7 0v15Zm13 0V9a3.5 3.5 0 0 1 7 0v15Z",face:34},{d:"M9 52V25c0-9 5-14 15-14s15 5 15 14v27Z",face:27},{d:"M7 52V31a17 17 0 0 1 34 0v21ZM24 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12Z",face:31},{d:"M3 52V37c0-10 9-15 21-15s21 5 21 15v15Z",face:35},{d:"M7 52V30c0-6 1-12 3-17 1-3 4-3 6-1l5 5h6l5-5c2-2 5-2 6 1 2 5 3 11 3 17v22Z",face:31},{d:"M12 52V22a12 12 0 0 1 24 0v30Z",face:25}];const eyeShapes=[(x,y)=>/*#__PURE__*/_jsx("circle",{cx:x,cy:y,r:"3"}),(x,y)=>/*#__PURE__*/_jsx("ellipse",{cx:x,cy:y,rx:"2.5",ry:"3.6"}),(x,y)=>/*#__PURE__*/_jsx("path",{d:`M${x-3} ${y+1}q3-4.5 6 0`,...props(characterStyles.stroke)})];// FNV-1a over UTF-16 plus the murmur3 finalizer is fixed for v1.
+// Changing either would change existing identities.
+/* biome-ignore-start lint/suspicious/noBitwiseOperators: Hashing needs 32-bit XOR, shifts, and multiplies. */function hashSeed(seed){let hash=2_166_136_261;for(let index=0;index<seed.length;index+=1){hash=Math.imul(hash^seed.charCodeAt(index),16_777_619);}hash=Math.imul(hash^hash>>>16,0x85_eb_ca_6b);hash=Math.imul(hash^hash>>>13,0xc2_b2_ae_35);return(hash^hash>>>16)>>>0;}/* biome-ignore-end lint/suspicious/noBitwiseOperators: Hashing needs 32-bit XOR, shifts, and multiplies. */export function AvatarCharacter({seed,label,size="default",ref}){const hash=hashSeed(seed);const body=bodies[Math.floor(hash/8)%bodies.length];const eye=eyeShapes[Math.floor(hash/64)%eyeShapes.length];const x=24+(Math.floor(hash/192)%3-1)*1.5;const spread=Math.floor(hash/576)%2?6.5:5;return/*#__PURE__*/_jsxs("svg",{"aria-hidden":label?undefined:true,"aria-label":label,"data-slot":"avatar-character",focusable:"false",ref:ref,role:label?"img":undefined,viewBox:"0 0 48 48",...props(characterStyles.root,characterSizes[size],tones[hash%tones.length]),children:[/*#__PURE__*/_jsx("path",{d:body.d,...props(characterStyles.body)}),/*#__PURE__*/_jsxs("g",{...props(characterStyles.face),children:[eye(x-spread,body.face),eye(x+spread,body.face)]})]});}

package/dist/components/avatar/avatar.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/dimensions.stylex";import{controlSize}from"../../styles/dimensions.stylex";import"../../styles/palette.stylex";import{palette}from"../../styles/palette.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 avatarStyles={defaultSize:{kGuDYH:"x1ws78te",kZKoxP:"x1sscbzi",kzqmXN:"x14pcf9u",$$css:true},fallback:{kGNEyG:"x6s0dn4",kWkggS:"x1vs9wzj",kB7OPa:"x9f619",kMwMTN:"xbb0na1",k1xSpc:"x78zum5",k63SB2:"xuku2lm",kZKoxP:"x5yr21d",kYYq5F:"x10no89f",kkqhue:"x17y0mx6",kjj79g:"xl56j7k",kLWn49:"x1wrb330",kVAEAm:"x10l6tqk",kzqmXN:"xh8yej3",$$css:true},group:{kGNEyG:"x6s0dn4",kB7OPa:"x9f619",k1xSpc:"x3nfvp2",kXwgrk:"x1q0g3np",$$css:true},groupOverlapDefault:{keTefX:"xozkbsz x1wan5pe",$$css:true},groupOverlapLg:{keTefX:"x1jlx4w8 x1wan5pe",$$css:true},groupOverlapSm:{keTefX:"x3c7snj x1wan5pe",$$css:true},groupRing:{kGVxlE:"xj9qs6x",$$css:true},image:{kB7OPa:"x9f619",k1xSpc:"x1b10x9z x1veu2zj x1lliihq",kZKoxP:"x5yr21d",kVIFPx:"xl1xv1r",kzqmXN:"xh8yej3",$$css:true},lg:{kGuDYH:"xlh8hku",kZKoxP:"x1nwj9bq",kzqmXN:"x1kmmwjt",$$css:true},root:{kGNEyG:"x6s0dn4",kWkggS:"x1vs9wzj",kaIpWk:"x10hpsqq",kB7OPa:"x9f619",kMwMTN:"xbb0na1",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",k63SB2:"xuku2lm",kjj79g:"xl56j7k",kLWn49:"x1wrb330",kVQacm:"xb3r6kr",kVAEAm:"x1n2onr6",kfSwDN:"x87ps6o",kXLuUW:"xxymvpz",$$css:true},sm:{kGuDYH:"x1ws78te",kZKoxP:"xud2w1",kzqmXN:"x1sxroq0",$$css:true}};export const avatarFallbackColors={blue:{kWkggS:"x1o93qni",kMwMTN:"x2z7umo",$$css:true},green:{kWkggS:"x1odci6f",kMwMTN:"x2221tf",$$css:true},orange:{kWkggS:"xgkf0yf",kMwMTN:"x1scrdw2",$$css:true},purple:{kWkggS:"x1mpowjk",kMwMTN:"x1g8gvkm",$$css:true}};

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,8 @@
+import { useRender } from "@base-ui/react/use-render";
+export type BadgeVariant = "default" | "destructive" | "info" | "outline" | "secondary" | "success" | "warning" | "brand";
+export type BadgeSize = "default" | "sm" | "lg";
+export type BadgeProps = Omit<useRender.ComponentProps<"span">, "className" | "data-slot" | "style"> & {
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+};
+export declare function Badge({ children, ref: forwardedRef, render, size, variant, ...rest }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/badge/badge.js

@@ -0,0 +1 @@
+"use client";import{useRender}from"@base-ui/react/use-render";import{props}from"@stylexjs/stylex";import{controlLabel}from"../../control-label";import{protectRenderSlot}from"../../render-utils";import{badgeStyles}from"./badge.styles";const variantStyles={brand:badgeStyles.brand,default:badgeStyles.default,destructive:badgeStyles.destructive,info:badgeStyles.info,outline:badgeStyles.outline,secondary:badgeStyles.secondary,success:badgeStyles.success,warning:badgeStyles.warning};const sizeStyles={default:badgeStyles.defaultSize,lg:badgeStyles.lg,sm:badgeStyles.sm};export function Badge({children,ref:forwardedRef,render,size="default",variant="default",...rest}){const normalizedRender=protectRenderSlot("badge",render);return useRender({defaultTagName:"span",props:{...rest,children:controlLabel(children),"data-slot":"badge",...props(badgeStyles.base,variantStyles[variant],sizeStyles[size])},ref:forwardedRef,render:normalizedRender});}

package/dist/components/badge/badge.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.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/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 badgeStyles={base:{kGNEyG:"x6s0dn4",k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kB7OPa:"x9f619",k1xSpc:"x3nfvp2",kmuXW:"xs83m0k",kMv6JI:"xjb2p0i",k63SB2:"xuku2lm",kOIVth:"x13hh4mm",kjj79g:"xl56j7k",ks0D6T:"x193iq5w",k7Eaqz:"xeuugli",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x7jjmpn x1w1ofmy",k3XXqK:"x9v5kkp xzc55om",kMeerF:"xm9seqh x1vhx2qj",kHjlTd:"xj0a0fe",khDVqt:"xeaf4i8",$$css:true},brand:{kWkggS:"x16d8uok",kVAM5u:"x9r1u3d",kMwMTN:"xdnyjpo",$$css:true},default:{kWkggS:"x1o7hn9x",kVAM5u:"x9r1u3d",kMwMTN:"xbb0na1",$$css:true},defaultSize:{kaIpWk:"x2b34ud",kGuDYH:"xlh8hku",kLWn49:"x2xzzt7",kAzted:"x15j2gbd",kg3NbH:"xb5xqfq",$$css:true},destructive:{kWkggS:"xyio8l9",kVAM5u:"x9r1u3d",kMwMTN:"x14tvo57",$$css:true},info:{kWkggS:"xou2r82",kVAM5u:"x9r1u3d",kMwMTN:"x1dpkydq",$$css:true},lg:{kaIpWk:"x1jw0md8",kGuDYH:"x12ama9c",kLWn49:"x1rn0pvf",kAzted:"x1vigsvi",kg3NbH:"xy7odpl",$$css:true},outline:{kWkggS:"xjbqb8w",kVAM5u:"x155xxfk",kMwMTN:"x14tvo57",$$css:true},secondary:{kWkggS:"x1vs9wzj",kVAM5u:"x9r1u3d",kMwMTN:"xbb0na1",$$css:true},sm:{kaIpWk:"x2b34ud",kGuDYH:"x1ws78te",kLWn49:"x76y1r9",kAzted:"xvfbv0m",kg3NbH:"xb5xqfq",$$css:true},success:{kWkggS:"x80umms",kVAM5u:"x9r1u3d",kMwMTN:"x19d0d4p",$$css:true},warning:{kWkggS:"xuooem1",kVAM5u:"x9r1u3d",kMwMTN:"x11ihctc",$$css:true}};

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

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { type ChartSeriesTone } from "../chart-frame/chart-colors";
+export interface BarListItem {
+    /** A decorative glyph before the label, such as a device icon. */
+    icon?: ReactNode;
+    id: string;
+    label: string;
+    value: number;
+}
+export type BarListProps = Omit<Closed<ComponentPropsWithRef<"div">>, "aria-label" | "children" | "data-slot" | "role"> & {
+    "aria-label": string;
+    formatValue?: (value: number) => string;
+    items: readonly BarListItem[];
+    locale?: string;
+    /** One hue for every bar. By default each item takes its palette color. */
+    tone?: ChartSeriesTone;
+    /** A column caption above the values, such as "Visitors". */
+    valueLabel?: string;
+};
+/** Ranked rows whose background bar shows each value against the largest. */
+export declare function BarList({ "aria-label": ariaLabel, formatValue, items, locale, ref: forwardedRef, tone, valueLabel, ...rest }: BarListProps): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+"use client";import{props}from"@stylexjs/stylex";import{typeRoles}from"../../styles/typography.styles";import{chartColors}from"../chart-frame/chart-colors";import{useChartHover}from"../chart-frame/chart-hover";import{barListStyles}from"./bar-list.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";// Tinted enough to read as a bar, light enough to keep the label legible on it.
+const TINT="20%";const PALETTE=["series1","series2","series3","series4","series5","series6"];// Items take palette colors in input order, so sorting never repaints one; past
+// six, they fold into the neutral reference tone instead of cycling.
+function toneAt(index,tone){return tone??PALETTE[index]??"muted";}function tintOf(tone){return`color-mix(in oklch, ${chartColors[tone]} ${TINT}, transparent)`;}function assertItems(items){if(!Array.isArray(items)){throw new TypeError("BarList items must be an array.");}const ids=new Set();for(const{id,label,value}of items){if(typeof id!=="string"||!id.trim()||typeof label!=="string"){throw new TypeError("BarList items require non-empty ids and labels.");}if(ids.has(id)){throw new RangeError("BarList item ids must be unique.");}if(typeof value!=="number"||!Number.isFinite(value)||value<0){throw new RangeError("BarList values must be finite and not negative.");}ids.add(id);}}function assertOptions(ariaLabel,tone){if(typeof ariaLabel!=="string"||!ariaLabel.trim()){throw new TypeError("BarList requires a non-empty aria-label.");}if(tone!==undefined&&!Object.hasOwn(chartColors,tone)){throw new RangeError("BarList tone is not a supported chart series tone.");}}/** Ranked rows whose background bar shows each value against the largest. */export function BarList({"aria-label":ariaLabel,formatValue,items,locale="en-US",ref:forwardedRef,tone,valueLabel,...rest}){assertOptions(ariaLabel,tone);assertItems(items);for(const name of["children","className","data-slot","role","style"]){Reflect.deleteProperty(rest,name);}const format=formatValue??new Intl.NumberFormat(locale).format;const{fade,linkProps}=useChartHover();const ranked=items.map((item,index)=>({...item,tone:toneAt(index,tone)})).sort((left,right)=>right.value-left.value);const max=ranked[0]?.value||1;return/*#__PURE__*/_jsxs("div",{...rest,"data-slot":"bar-list",ref:forwardedRef,...props(barListStyles.root,typeRoles.ui),children:[valueLabel?/*#__PURE__*/_jsxs("div",{"aria-hidden":"true","data-slot":"bar-list-header",...props(barListStyles.header,typeRoles.caption),children:[/*#__PURE__*/_jsx("span",{}),/*#__PURE__*/_jsx("span",{children:valueLabel})]}):null,/*#__PURE__*/_jsx("ul",{"aria-label":ariaLabel,...props(barListStyles.list),children:ranked.map(({icon,id,label,tone:itemTone,value})=>/*#__PURE__*/_jsxs("li",{"data-slot":"bar-list-item",...linkProps(id),...props(barListStyles.item),children:[/*#__PURE__*/_jsx("span",{"aria-hidden":"true","data-slot":"bar-list-bar",...props(...fade(id),barListStyles.bar(`${value/max*100}%`,tintOf(itemTone)))}),/*#__PURE__*/_jsxs("span",{"data-slot":"bar-list-label",...props(barListStyles.label),children:[icon?/*#__PURE__*/_jsx("span",{"aria-hidden":"true",...props(barListStyles.icon),children:icon}):null,label]}),/*#__PURE__*/_jsx("span",{"data-slot":"bar-list-value",...props(barListStyles.value),children:format(value)})]},id))})]});}

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

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/dimensions.stylex";import{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{fontWeight}from"../../styles/typography.stylex";const _temp={kaIpWk:"x2b34ud",kzqmXN:"x1uyokj7",kYYq5F:"x10no89f",kLqNvP:"x1o0tod",kVAEAm:"x10l6tqk","$$css":true};export const barListStyles={bar:(inlineSize,backgroundColor)=>[_temp,{kWkggS:backgroundColor!=null?"xl8spv7":backgroundColor,$$css:true},{"--x-backgroundColor":backgroundColor!=null?backgroundColor:undefined,"--x-inlineSize":(val=>typeof val==="number"?val+"px":val!=null?val:undefined)(inlineSize)}],header:{kMwMTN:"x125omll",k1xSpc:"x78zum5",kjj79g:"x1qughib",kg3NbH:"xy7odpl",$$css:true},icon:{kMwMTN:"x125omll",k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kZKoxP:"x38fy1k xt7dq6l",kzqmXN:"xw9ltxv x14atkfc",$$css:true},item:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kOIVth:"xiw8qbs",kjj79g:"x1qughib",kAzted:"x1in32aq",kg3NbH:"xy7odpl",kVAEAm:"x1n2onr6",$$css:true},label:{kGNEyG:"x6s0dn4",kMwMTN:"x14tvo57",k1xSpc:"x78zum5",kOIVth:"xp4ho6d",k7Eaqz:"xeuugli",kVQacm:"xb3r6kr",kVAEAm:"x1n2onr6",kg5iWk:"xlyipyv",khDVqt:"xuxw1ft",$$css:true},list:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",kB88ic:"xe8uvvx",kogj98:"x1ghz6dp",kmVPX3:"x1717udv",$$css:true},root:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xp4ho6d",k7Eaqz:"xeuugli",$$css:true},value:{kMwMTN:"x14tvo57",kmuXW:"x2lah0s",kcqcaj:"xss6m8b",k63SB2:"xuku2lm",kVAEAm:"x1n2onr6",$$css:true}};

package/dist/components/blockquote/blockquote.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+type Part<T> = Omit<Closed<T>, "children" | "data-slot" | "role"> & {
+    children: ReactNode;
+};
+export type BlockquoteProps = Part<ComponentPropsWithRef<"figure">>;
+export type BlockquoteContentProps = Part<ComponentPropsWithRef<"blockquote">>;
+export type BlockquoteAttributionProps = Part<ComponentPropsWithRef<"figcaption">>;
+export declare function Blockquote({ children, ref: forwardedRef, ...rest }: BlockquoteProps): import("react").JSX.Element;
+export declare function BlockquoteContent({ children, ref: forwardedRef, ...rest }: BlockquoteContentProps): import("react").JSX.Element;
+export declare function BlockquoteAttribution({ children, ref: forwardedRef, ...rest }: BlockquoteAttributionProps): import("react").JSX.Element;
+export {};

package/dist/components/blockquote/blockquote.js

@@ -0,0 +1 @@
+import{props}from"@stylexjs/stylex";import{typeRoles}from"../../styles/typography.styles";import{blockquoteStyles}from"./blockquote.styles";import{jsx as _jsx}from"react/jsx-runtime";function stripReservedProps(attributes){for(const prop of["className","data-slot","role","style"]){Reflect.deleteProperty(attributes,prop);}}export function Blockquote({children,ref:forwardedRef,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx("figure",{...rest,"data-slot":"blockquote",ref:forwardedRef,...props(blockquoteStyles.root,typeRoles.body),children:children});}export function BlockquoteContent({children,ref:forwardedRef,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx("blockquote",{...rest,"data-slot":"blockquote-content",ref:forwardedRef,...props(blockquoteStyles.content,typeRoles.body),children:children});}export function BlockquoteAttribution({children,ref:forwardedRef,...rest}){stripReservedProps(rest);return/*#__PURE__*/_jsx("figcaption",{...rest,"data-slot":"blockquote-attribution",ref:forwardedRef,...props(blockquoteStyles.attribution,typeRoles.body),children:children});}

package/dist/components/blockquote/blockquote.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";export const blockquoteStyles={attribution:{kMwMTN:"x125omll",k7Eaqz:"xeuugli",kHjlTd:"xj0a0fe",$$css:true},content:{kGJrpR:"x1uo4xkn",kVhnKS:"x1t7ytsu",k2ei4v:"xyumdvf",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",kHjlTd:"xj0a0fe",kZCmMZ:"x14s0xwm",$$css:true},root:{k1xSpc:"xrvj5dj",kOIVth:"xiw8qbs",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",$$css:true}};

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

@@ -0,0 +1,4 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { Closed } from "../../closed";
+export type BreadcrumbLinkProps = Closed<useRender.ComponentProps<"a">>;
+export declare function BreadcrumbLink({ children, ref: forwardedRef, render, ...rest }: BreadcrumbLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/breadcrumb/breadcrumb-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{breadcrumbStyles}from"./breadcrumb.styles";export function BreadcrumbLink({children,ref:forwardedRef,render,...rest}){return useRender({defaultTagName:"a",props:mergeProps(props(breadcrumbStyles.link,breadcrumbStyles.iconContent),rest,{children:controlLabel(children),"data-slot":"breadcrumb-link"}),ref:forwardedRef,render:protectRenderSlot("breadcrumb-link",render)});}

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+export type { BreadcrumbLinkProps } from "./breadcrumb-link";
+export { BreadcrumbLink } from "./breadcrumb-link";
+export type BreadcrumbProps = Closed<ComponentPropsWithRef<"nav">>;
+export type BreadcrumbListProps = Closed<ComponentPropsWithRef<"ol">>;
+export type BreadcrumbItemProps = Closed<ComponentPropsWithRef<"li">>;
+export type BreadcrumbPageProps = Closed<ComponentPropsWithRef<"span">>;
+export type BreadcrumbSeparatorProps = Closed<ComponentPropsWithRef<"li">>;
+export type BreadcrumbEllipsisProps = Closed<ComponentPropsWithRef<"span">>;
+export declare function Breadcrumb({ "aria-label": ariaLabel, children, ref: forwardedRef, ...rest }: BreadcrumbProps): import("react").JSX.Element;
+export declare function BreadcrumbList({ children, ref: forwardedRef, ...rest }: BreadcrumbListProps): import("react").JSX.Element;
+export declare function BreadcrumbItem({ children, ref: forwardedRef, ...rest }: BreadcrumbItemProps): import("react").JSX.Element;
+export declare function BreadcrumbPage({ children, ref: forwardedRef, ...rest }: BreadcrumbPageProps): import("react").JSX.Element;
+export declare function BreadcrumbSeparator({ children, ref: forwardedRef, ...rest }: BreadcrumbSeparatorProps): import("react").JSX.Element;
+export declare function BreadcrumbEllipsis({ children: _children, ref: forwardedRef, ...rest }: BreadcrumbEllipsisProps): import("react").JSX.Element;

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,2 @@
+import{props}from"@stylexjs/stylex";import{controlLabel}from"../../control-label";import{IconChevronRight,IconDots}from"../../icons";import{breadcrumbStyles}from"./breadcrumb.styles";import{jsx as _jsx}from"react/jsx-runtime";// biome-ignore lint/performance/noBarrelFile: Keep the link API beside the native breadcrumb anatomy.
+export{BreadcrumbLink}from"./breadcrumb-link";function ChevronIcon(){return/*#__PURE__*/_jsx(IconChevronRight,{"aria-hidden":"true",focusable:"false",...props(breadcrumbStyles.separatorIcon),size:"1em"});}export function Breadcrumb({"aria-label":ariaLabel="breadcrumb",children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("nav",{...rest,"aria-label":ariaLabel,"data-slot":"breadcrumb",ref:forwardedRef,...props(breadcrumbStyles.root),children:children});}export function BreadcrumbList({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("ol",{...rest,"data-slot":"breadcrumb-list",ref:forwardedRef,...props(breadcrumbStyles.list),children:children});}export function BreadcrumbItem({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("li",{...rest,"data-slot":"breadcrumb-item",ref:forwardedRef,...props(breadcrumbStyles.item,breadcrumbStyles.iconContent),children:children});}export function BreadcrumbPage({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("span",{"aria-current":"page",...rest,"data-slot":"breadcrumb-page",ref:forwardedRef,...props(breadcrumbStyles.page,breadcrumbStyles.iconContent),children:controlLabel(children)});}export function BreadcrumbSeparator({children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("li",{"aria-hidden":"true",role:"presentation",...rest,"data-slot":"breadcrumb-separator",ref:forwardedRef,...props(breadcrumbStyles.separator,breadcrumbStyles.iconContent),children:children??/*#__PURE__*/_jsx(ChevronIcon,{})});}export function BreadcrumbEllipsis({children:_children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx("span",{"aria-hidden":"true",role:"presentation",...rest,"data-slot":"breadcrumb-ellipsis",ref:forwardedRef,...props(breadcrumbStyles.ellipsis),children:/*#__PURE__*/_jsx(IconDots,{"aria-hidden":"true",focusable:"false",size:16})});}

package/dist/components/breadcrumb/breadcrumb.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/interaction.stylex";import{borderWidth,focus,focusMotion}from"../../styles/interaction.stylex";import"../../styles/motion.stylex";import{duration}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 breadcrumbStyles={ellipsis:{kGNEyG:"x6s0dn4",k1xSpc:"x3nfvp2",kGuDYH:"x1ws78te",kjj79g:"xl56j7k",kLWn49:"x1wrb330",kfSwDN:"x87ps6o",$$css:true},iconContent:{kmuXW:"xsnv01j",kZKoxP:"xgaasie",kzqmXN:"xwe2phr",$$css:true},item:{kGNEyG:"x6s0dn4",k1xSpc:"x3nfvp2",kOIVth:"x13hh4mm",k7Eaqz:"xeuugli",$$css:true},link:{kGNEyG:"x6s0dn4",k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kaIpWk:"xmfy946",kMwMTN:"xzr6qem x1heor9g",k1xSpc:"x3nfvp2",kOIVth:"x13hh4mm",k7Eaqz:"xeuugli",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1w1ofmy",k3XXqK:"xaatb59",kMeerF:"xm9seqh x1k57tk5",kHjlTd:"xj0a0fe",kybGjl:"x1hl2dhg",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"xt3l3uh",$$css:true},list:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"xp4ho6d",kB88ic:"xe8uvvx",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",kmVPX3:"x1717udv",$$css:true},page:{kGNEyG:"x6s0dn4",kMwMTN:"x14tvo57",k1xSpc:"x3nfvp2",k63SB2:"x1lo1l87",kOIVth:"x13hh4mm",k7Eaqz:"xeuugli",kHjlTd:"xj0a0fe",$$css:true},root:{kMwMTN:"x125omll",kGuDYH:"xlh8hku",kLWn49:"x2xzzt7",$$css:true},separator:{kGNEyG:"x6s0dn4",kMwMTN:"x125omll",k1xSpc:"x3nfvp2",kUk6DE:"x1okw0bk",kGuDYH:"xlh8hku",kjj79g:"xl56j7k",kfSwDN:"x87ps6o",$$css:true},separatorIcon:{kZKoxP:"x1l36t39",k3aq6I:"x19axjrm x23xq2a x1c071of",kzqmXN:"xcdlrvm",$$css:true}};

package/dist/components/button/button-colors.stylex.js

@@ -0,0 +1,3 @@
+import{defineVars}from"@stylexjs/stylex";// The brand fill darkens toward this shade on hover and press. Selected
+// states that map the fill to a system color override it to keep it solid.
+export const buttonColors={brandShade:"var(--xo385wq)",__varGroupHash__:"x1a7nltr"};

package/dist/components/button/button.css

@@ -0,0 +1,16 @@
+:is([data-slot="button"], [data-slot="toolbar-button"])
+	> svg:not([data-slot="button-loading-indicator"]) {
+	flex-shrink: 0;
+	width: 1em;
+	height: 1em;
+}
+
+:is([data-slot="button"], [data-slot="toolbar-button"])[data-loading]
+	> :not([data-slot="button-loading-indicator"]) {
+	opacity: 0;
+}
+
+/* A toolbar scrolls instead of squeezing its buttons onto two lines. */
+[data-slot="toolbar-button"] {
+	flex-shrink: 0;
+}

package/dist/components/button/button.d.ts

@@ -0,0 +1,27 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import "./button.css";
+type BaseButtonProps = ComponentPropsWithRef<typeof BaseButton>;
+type AccessibleIconName = {
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} | {
+    "aria-label"?: string;
+    "aria-labelledby": string;
+};
+export type ButtonVariant = "brand" | "default" | "destructive" | "destructive-outline" | "ghost" | "link" | "outline" | "secondary";
+export type ButtonSize = "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs";
+type SharedButtonProps = Omit<BaseButtonProps, "children" | "className" | "disabled" | "ref" | "style"> & {
+    children?: ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    ref?: BaseButtonProps["ref"];
+    variant?: ButtonVariant;
+};
+export type ButtonProps = SharedButtonProps & ({
+    size?: Exclude<ButtonSize, "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs">;
+} | ({
+    size: "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs";
+} & AccessibleIconName));
+export declare function Button(buttonProps: ButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/button/button.js

@@ -0,0 +1 @@
+"use client";import{Button as BaseButton}from"@base-ui/react/button";import{props}from"@stylexjs/stylex";import{controlLabel}from"../../control-label";import{LoadingIndicator}from"../../loading-indicator";import"./button.css";import{buttonStyles}from"./button.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeStyles={default:buttonStyles.defaultSize,icon:buttonStyles.icon,"icon-lg":buttonStyles["icon-lg"],"icon-sm":buttonStyles["icon-sm"],"icon-xl":buttonStyles["icon-xl"],"icon-xs":buttonStyles["icon-xs"],lg:buttonStyles.lg,sm:buttonStyles.sm,xl:buttonStyles.xl,xs:buttonStyles.xs};const loadingIndicatorStyles={brand:buttonStyles.loadingIndicatorBrand,default:buttonStyles.loadingIndicatorDefault,destructive:buttonStyles.loadingIndicatorDestructive,"destructive-outline":buttonStyles.loadingIndicatorDestructiveOutline,ghost:buttonStyles.loadingIndicatorContent,link:buttonStyles.loadingIndicatorContent,outline:buttonStyles.loadingIndicatorContent,secondary:buttonStyles.loadingIndicatorSecondary};const interactionStyles={brand:buttonStyles.interactionBrand,default:buttonStyles.interactionFilled,destructive:buttonStyles.interactionDestructive,"destructive-outline":buttonStyles.interactionDestructiveOutline,ghost:buttonStyles.interactionGhost,link:buttonStyles.interactionLink,outline:buttonStyles.interactionOutline,secondary:buttonStyles.interactionSecondary};function getButtonType(render,type){return render?type:type??"button";}function getLoadingIndicatorStyle(variant){return loadingIndicatorStyles[variant];}function getButtonInteractionStyles(isDisabled,variant){return isDisabled?[buttonStyles.disabled]:[buttonStyles.press,interactionStyles[variant]];}export function Button(buttonProps){const{children,disabled,loading=false,ref:forwardedRef,size="default",variant="default",...rest}=buttonProps;const isLoading=loading;const isDisabled=Boolean(disabled||isLoading);const sizeStyle=sizeStyles[size];const loadingIndicatorStyle=getLoadingIndicatorStyle(variant);const stateStyles=getButtonInteractionStyles(isDisabled,variant);const{render,type,...nativeProps}=rest;return/*#__PURE__*/_jsxs(BaseButton,{"data-slot":"button",...nativeProps,"aria-busy":isLoading||undefined,"data-loading":isLoading?"":undefined,disabled:isDisabled,focusableWhenDisabled:buttonProps.focusableWhenDisabled??isLoading,nativeButton:buttonProps.nativeButton,ref:forwardedRef,render:render,type:getButtonType(render,type),...props(buttonStyles.base,buttonStyles[variant],sizeStyle,buttonStyles.loading,isLoading&&buttonStyles.loadingContent,...stateStyles),children:[controlLabel(children),isLoading?/*#__PURE__*/_jsx(LoadingIndicator,{"aria-hidden":"true","data-slot":"button-loading-indicator",focusable:false,indicatorStyles:[buttonStyles.loadingIndicator,loadingIndicatorStyle]}):null]});}

package/dist/components/button/button.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/fonts.stylex";import{fonts}from"../../styles/fonts.stylex";import"../../styles/interaction.stylex";import{borderWidth,focus,focusMotion,focusOutline,opacity}from"../../styles/interaction.stylex";import"../../styles/motion.stylex";import{duration,easing,pressSurface}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";import"./button-colors.stylex";import{buttonColors}from"./button-colors.stylex";const HL="inset 0 1px 0 oklch(1 0 0 / 0.16)";const HLB="inset 0 1px 0 oklch(1 0 0 / 0.2)";// Labels trim to their cap box. A wrapped label needs the trimmed leading
+// back as padding; a single line keeps the size padding.
+const wrapLeading="calc((1lh - 1cap) / 2)";const ghostInset={hover:"2px",press:"-1px",rest:"4px"};export const buttonStyles={base:{kfXFYZ:"xhkbipy",kBjukC:"xjp5e1j",kKGWhT:"x10ojri0",kgXx4x:"x3glmed",kCyh2J:"xib5pzt",kj4x2v:"x1fo1fc9",k5Ohv7:"x3kfev1",kQmYQc:"xtql2tq",kgeoSG:"x1cpjm7i",kFcpXp:"x1h5trzc",km8f2m:"xkk1bqk",kEoFBp:"x1hmns74",kKXxxB:"x91iiuu",k7KCAZ:"x16nmtoe",kqUdNP:"x1vaxkjw",kxmVGU:"xy5mcqj",kGNEyG:"x6s0dn4",kSGwAc:"xamitd3",k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kWkggS:"xjbqb8w",kVAM5u:"x9r1u3d",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kB7OPa:"x9f619",kkrTdU:"x1s07b3s x1ypdohk",k1xSpc:"x3nfvp2",kwnvtZ:"x1a02dak",kMv6JI:"xjb2p0i",kGuDYH:"x12ama9c",kC21eY:"x2vx8kg",k63SB2:"x1lo1l87",kOIVth:"xp4ho6d",kHBbk8:"xc8icb0",kjj79g:"xl56j7k",kLWn49:"x1wrb330",ks0D6T:"x193iq5w",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x7jjmpn x1w1ofmy",k3XXqK:"x9v5kkp xzc55om",kMeerF:"xm9seqh x1vhx2qj",kHjlTd:"x1mzt3pk",kVAEAm:"x1n2onr6",kybGjl:"x1hl2dhg",kIyJzY:"x1e471i8 x1j5v3x2",k1ekBW:"x6ksxqd",kAMwcw:"xvhdtae",kfSwDN:"x87ps6o",$$css:true},brand:{kLkRvE:"x5f8fso",kfXFYZ:"x12s1v33",ktNmms:"x1nk83oa",kMwMTN:"xa34c4n",$$css:true},default:{kLkRvE:"x7flfcv",kfXFYZ:"xpf34ut",ktNmms:"xyo47r1",kMwMTN:"x1oiqaqn",kSiTet:"x1hc1fzr",$$css:true},defaultSize:{kT0f0o:"x14h6bio",kVL7Gh:"x1r18r8a",kfmiAY:"x3q61c4",krdFHd:"x1p0g4lk",kGuDYH:"x12ama9c",k63SB2:"x1lo1l87",kAzted:"x1atkrcx",k8WAf4:"xwvz0cp",kg3NbH:"x1mw7yl3",$$css:true},destructive:{kLkRvE:"x1iv8s4q",kfXFYZ:"x1fzqy7e",ktNmms:"xyo47r1",kMwMTN:"x192wzsp",kSiTet:"x1hc1fzr",$$css:true},"destructive-outline":{kLkRvE:"x1p58mzm",kfXFYZ:"x1fzqy7e",ktNmms:"xtf8gdx",kMwMTN:"x1rncs7t",kSiTet:"x1hc1fzr",$$css:true},disabled:{kkrTdU:"x1h6gzvc",kSiTet:"xd57v9i",$$css:true},ghost:{kLkRvE:"xtr8pbw",kFcpXp:"x1dxl39w",k5QlbN:"x124lp2h",kMwMTN:"x14tvo57",$$css:true},icon:{kT0f0o:"x14h6bio",kVL7Gh:"x1r18r8a",kfmiAY:"x3q61c4",krdFHd:"x1p0g4lk",kGuDYH:"x15hey71",kZKoxP:"x1wtl264",kAzted:"x2lwn1j",k7Eaqz:"xeuugli",kmVPX3:"x1717udv",kzqmXN:"xkpcdi8",$$css:true},"icon-lg":{kT0f0o:"x14h6bio",kVL7Gh:"x1r18r8a",kfmiAY:"x3q61c4",krdFHd:"x1p0g4lk",kGuDYH:"x15hey71",kZKoxP:"x1nwj9bq",kAzted:"x2lwn1j",k7Eaqz:"xeuugli",kmVPX3:"x1717udv",kzqmXN:"x1kmmwjt",$$css:true},"icon-sm":{kT0f0o:"x1hia2b7",kVL7Gh:"x1dz734k",kfmiAY:"x2dv6dr",krdFHd:"xn5rixj",kGuDYH:"xopw8l1",kZKoxP:"x1sscbzi",kAzted:"x2lwn1j",k7Eaqz:"xeuugli",kmVPX3:"x1717udv",kzqmXN:"x14pcf9u",$$css:true},"icon-xl":{kT0f0o:"x14h6bio",kVL7Gh:"x1r18r8a",kfmiAY:"x3q61c4",krdFHd:"x1p0g4lk",kGuDYH:"x1cpzgpn",kZKoxP:"x155ebd8",kAzted:"x2lwn1j",k7Eaqz:"xeuugli",kmVPX3:"x1717udv",kzqmXN:"x1idgsbn",$$css:true},"icon-xs":{kT0f0o:"x1hia2b7",kVL7Gh:"x1dz734k",kfmiAY:"x2dv6dr",krdFHd:"xn5rixj",kGuDYH:"x1eddukg",kZKoxP:"x15ja3qx",kAzted:"x2lwn1j",k7Eaqz:"xeuugli",kmVPX3:"x1717udv",kzqmXN:"xdr7e86",$$css:true},interactionBrand:{kLkRvE:"x1sattiy x1wmmqb1 x5f8fso",ktNmms:"xmzakdu xf6rpzq x1nk83oa",$$css:true},interactionDestructive:{kLkRvE:"xuc6v1o x1rguitc x1iv8s4q",ktNmms:"xmzakdu x11vu4nf xyo47r1",$$css:true},interactionDestructiveOutline:{kLkRvE:"xjhthu2 x12pxzgx x1p58mzm",ktNmms:"xmzakdu xqay70b xtf8gdx",$$css:true},interactionFilled:{kLkRvE:"x1id3q68 x1y8g2bh x7flfcv",ktNmms:"xmzakdu x11vu4nf xyo47r1",$$css:true},interactionGhost:{kFcpXp:"x1lci40m x1iylmqd x1dxl39w",k5QlbN:"x12vk50i x1ldp1s3 x124lp2h",kKXxxB:"x1htb302 x1wpd706 x91iiuu",kqUdNP:"x14e9nd4 x1vaxkjw",$$css:true},interactionLink:{kybGjl:"x1a2ycjq x1hl2dhg",$$css:true},interactionOutline:{kLkRvE:"xvhw8o9 x1xziqyu x1p58mzm",kfXFYZ:"x1b5ku4a x12gxl8w x15a8tab",ktNmms:"xmzakdu xqay70b xtf8gdx",$$css:true},interactionSecondary:{kLkRvE:"xvhw8o9 x1xziqyu x1wdhtdm",$$css:true},lg:{kT0f0o:"x14h6bio",kVL7Gh:"x1r18r8a",kfmiAY:"x3q61c4",krdFHd:"x1p0g4lk",kGuDYH:"x12ama9c",k63SB2:"x1lo1l87",kAzted:"x12eq223",k8WAf4:"x14okotz",kg3NbH:"x128qzdt",$$css:true},link:{kWkggS:"xjbqb8w",kVAM5u:"x9r1u3d",kMwMTN:"x14tvo57",kybGjl:"x1hl2dhg",kcSHmL:"xwsnend",$$css:true},loading:{kVAEAm:"x1n2onr6",$$css:true},loadingContent:{kMwMTN:"x19co3pv",$$css:true},loadingIndicator:{kZKoxP:"x1a05dn3",kpwlN0:"x10a8y8t",kogj98:"x1bpp3o7",kVAEAm:"x10l6tqk",kzqmXN:"xmpb2e4",$$css:true},loadingIndicatorBrand:{kMwMTN:"xa34c4n",$$css:true},loadingIndicatorContent:{kMwMTN:"x14tvo57",$$css:true},loadingIndicatorDefault:{kMwMTN:"x1oiqaqn",$$css:true},loadingIndicatorDestructive:{kMwMTN:"x192wzsp",$$css:true},loadingIndicatorDestructiveOutline:{kMwMTN:"x1rncs7t",$$css:true},loadingIndicatorSecondary:{kMwMTN:"xbb0na1",$$css:true},outline:{kLkRvE:"x1p58mzm",kfXFYZ:"x15a8tab",ktNmms:"xtf8gdx",kMwMTN:"x14tvo57",$$css:true},press:{kFcpXp:"xcrthc2 x1h5trzc",kKXxxB:"x1htb302 x1wpd706 x91iiuu",kqUdNP:"x14e9nd4 x1vaxkjw",$$css:true},secondary:{kLkRvE:"x1wdhtdm",kMwMTN:"xbb0na1",$$css:true},sm:{kT0f0o:"x1hia2b7",kVL7Gh:"x1dz734k",kfmiAY:"x2dv6dr",krdFHd:"xn5rixj",kGuDYH:"xlh8hku",k63SB2:"xuku2lm",kOIVth:"x13hh4mm",kLWn49:"x2xzzt7",kAzted:"x1vigsvi",k8WAf4:"x11k7c67",kg3NbH:"x1mw7yl3",$$css:true},xl:{kT0f0o:"x14h6bio",kVL7Gh:"x1r18r8a",kfmiAY:"x3q61c4",krdFHd:"x1p0g4lk",kGuDYH:"x12ama9c",k63SB2:"x1lo1l87",kAzted:"xe1x6jq",k8WAf4:"x1qm7hpq",kg3NbH:"x128qzdt",$$css:true},xs:{kT0f0o:"x1hia2b7",kVL7Gh:"x1dz734k",kfmiAY:"x2dv6dr",krdFHd:"xn5rixj",kGuDYH:"x1ws78te",k63SB2:"xuku2lm",kOIVth:"x13hh4mm",kb6lSQ:"xdee7k9",kLWn49:"x76y1r9",kAzted:"x15j2gbd",k8WAf4:"x1n27xti",kg3NbH:"xr83e9t",$$css:true}};

package/dist/components/button-group/button-group.css

@@ -0,0 +1,115 @@
+/* Triggers rendered as Buttons (Menu, Popover, Dialog) carry their own slot,
+   such as menu-trigger, so they join the group too. First and last are
+   counted among items only: an open popup inserts hidden focus guards. */
+[data-slot="button-group"]
+	> :is([data-slot="button"], [data-slot$="-trigger"]) {
+	flex-shrink: 0;
+	align-self: stretch !important;
+	white-space: nowrap;
+}
+
+[data-slot="button-group"]
+	> :is([data-slot="button"], [data-slot$="-trigger"]):focus-visible {
+	z-index: 1;
+}
+
+[data-slot="button-group"]
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"])::after {
+	position: absolute;
+	pointer-events: none;
+	content: "";
+	background-color: var(--mizen-joined-divider-color);
+}
+
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"])::after {
+	inset-block: var(--mizen-joined-divider-inset);
+	inset-inline-start: 0;
+	inline-size: 1px;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"])::after {
+	inset-block-start: 0;
+	inset-inline: var(--mizen-joined-divider-inset);
+	block-size: 1px;
+}
+
+/* System-owned attached geometry overrides StyleX's atomic radius priority. */
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"]) {
+	margin-inline-start: -1px;
+	border-inline-start-color: transparent !important;
+	border-start-start-radius: 0 !important;
+	border-end-start-radius: 0 !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):has(
+		~ :is([data-slot="button"], [data-slot$="-trigger"])
+	) {
+	border-inline-end-color: transparent !important;
+	border-start-end-radius: 0 !important;
+	border-end-end-radius: 0 !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"]) {
+	margin-block-start: -1px;
+	border-block-start-color: transparent !important;
+	border-start-start-radius: 0 !important;
+	border-start-end-radius: 0 !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):has(
+		~ :is([data-slot="button"], [data-slot$="-trigger"])
+	) {
+	border-block-end-color: transparent !important;
+	border-end-start-radius: 0 !important;
+	border-end-end-radius: 0 !important;
+}
+
+/* Joined edges also hide the surface layer's border. */
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"])::before {
+	border-inline-start-color: transparent !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):has(
+		~ :is([data-slot="button"], [data-slot$="-trigger"])
+	)::before {
+	border-inline-end-color: transparent !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"])
+	~ :is([data-slot="button"], [data-slot$="-trigger"])::before {
+	border-block-start-color: transparent !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):has(
+		~ :is([data-slot="button"], [data-slot$="-trigger"])
+	)::before {
+	border-block-end-color: transparent !important;
+}
+
+/* Pressing a joined button contracts only across the group, so the shared
+   outline stays continuous along it. */
+[data-slot="button-group"]:where([data-orientation="horizontal"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):active::before {
+	inset-inline: -1px !important;
+}
+
+[data-slot="button-group"]:where([data-orientation="vertical"])
+	> :is([data-slot="button"], [data-slot$="-trigger"]):active::before {
+	inset-block: -1px !important;
+}

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

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef, ReactElement } from "react";
+import "./button-group.css";
+import type { Closed } from "../../closed";
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export type ButtonGroupProps = Omit<Closed<ComponentPropsWithRef<"div">>, "data-orientation" | "data-slot" | "role"> & {
+    orientation?: ButtonGroupOrientation;
+};
+export declare function ButtonGroup({ children, orientation, ref: forwardedRef, ...rest }: ButtonGroupProps): ReactElement;

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

@@ -0,0 +1,3 @@
+/// <reference path="../button/button.css.d.ts" />
+import{props}from"@stylexjs/stylex";import"./button-group.css";import{buttonGroupStyles}from"./button-group.styles";import{jsx as _jsx}from"react/jsx-runtime";export function ButtonGroup({children,orientation="horizontal",ref:forwardedRef,...rest}){Reflect.deleteProperty(rest,"className");Reflect.deleteProperty(rest,"data-orientation");Reflect.deleteProperty(rest,"data-slot");Reflect.deleteProperty(rest,"role");Reflect.deleteProperty(rest,"style");return(/*#__PURE__*/// biome-ignore lint/a11y/useSemanticElements: This groups actions rather than form fields.
+_jsx("div",{...rest,"data-orientation":orientation,"data-slot":"button-group",ref:forwardedRef,role:"group",...props(buttonGroupStyles.base,orientation==="vertical"?buttonGroupStyles.vertical:buttonGroupStyles.horizontal),children:children}));}

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

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/interaction.stylex";import{borderWidth,focus}from"../../styles/interaction.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";export const buttonGroupStyles={base:{"--mizen-joined-divider-color":"x1iscvl","--mizen-joined-divider-inset":"x1h9cdsn",kGNEyG:"x1qjc9v5",k1xSpc:"x3nfvp2",ks0D6T:"x193iq5w",k7Eaqz:"xeuugli",kzqmXN:"xeq5yr9",$$css:true},horizontal:{kXwgrk:"x1q0g3np",kXHlph:"xw2csxc",k8WAf4:"xzvoi89",kg3NbH:"x1ya0gd1",katHQp:"x1g2bcle",$$css:true},vertical:{kXwgrk:"xdt5ytf",$$css:true}};

package/dist/components/calendar/calendar-components.js

@@ -0,0 +1,2 @@
+import{DayButton as DayPickerDayButton,MonthGrid as DayPickerMonthGrid,NextMonthButton as DayPickerNextMonthButton,PreviousMonthButton as DayPickerPreviousMonthButton}from"@daypicker/react";import{props}from"@stylexjs/stylex";import{controlLabel}from"../../control-label";import{IconChevronDown,IconChevronLeft,IconChevronRight,IconChevronUp}from"../../icons";import{buttonStyles}from"../button/button.styles";import{calendarStyles}from"./calendar.styles";import{useCalendarGridContext}from"./calendar-context";import{CalendarMonthsDropdown,CalendarYearsDropdown}from"./calendar-dropdowns";import{jsx as _jsx}from"react/jsx-runtime";const chevronIcons={down:IconChevronDown,left:IconChevronLeft,right:IconChevronRight,up:IconChevronUp};function CalendarChevron({disabled,orientation="right",size=16}){const Icon=chevronIcons[orientation];return/*#__PURE__*/_jsx(Icon,{"aria-hidden":"true","data-disabled":disabled?"":undefined,"data-orientation":orientation,"data-slot":"calendar-chevron",focusable:false,...props(calendarStyles.chevron),size:size});}function CalendarPreviousMonthButton(buttonProps){return/*#__PURE__*/_jsx(DayPickerPreviousMonthButton,{...buttonProps,"data-slot":"calendar-previous",...getNavigationStyles(Boolean(buttonProps.disabled||buttonProps["aria-disabled"]))});}function CalendarNextMonthButton(buttonProps){return/*#__PURE__*/_jsx(DayPickerNextMonthButton,{...buttonProps,"data-slot":"calendar-next",...getNavigationStyles(Boolean(buttonProps.disabled||buttonProps["aria-disabled"]))});}function CalendarMonthGrid(gridProps){const context=useCalendarGridContext();const baseAriaLabel=gridProps["aria-label"];let combinedAriaLabel=baseAriaLabel;if(context?.ariaLabel){combinedAriaLabel=baseAriaLabel?`${context.ariaLabel}, ${baseAriaLabel}`:context.ariaLabel;}return/*#__PURE__*/_jsx(DayPickerMonthGrid,{...gridProps,"aria-describedby":context?.ariaDescribedBy,"aria-invalid":context?.invalid?true:undefined,"aria-label":combinedAriaLabel,"aria-labelledby":context?.ariaLabelledBy,"aria-readonly":context?.readOnly?true:undefined});}export const calendarComponents={Chevron:CalendarChevron,DayButton:CalendarDayButton,MonthGrid:CalendarMonthGrid,MonthsDropdown:CalendarMonthsDropdown,NextMonthButton:CalendarNextMonthButton,PreviousMonthButton:CalendarPreviousMonthButton,YearsDropdown:CalendarYearsDropdown};function getNavigationStyles(disabled){return props(buttonStyles.base,buttonStyles.outline,buttonStyles["icon-sm"],buttonStyles.loading,calendarStyles.navigationButton,disabled?buttonStyles.disabled:buttonStyles.press,!disabled&&buttonStyles.interactionOutline);}// Ghost hides the press surface at rest; selected days show it filled.
+function getDaySurfaceStyle(selected){return selected?calendarStyles.selectedDay:buttonStyles.ghost;}function getDayInteractionStyles(interactive,selected,today){const quietInteraction=today?calendarStyles.todayInteraction:buttonStyles.interactionGhost;return interactive?[buttonStyles.press,selected?buttonStyles.interactionBrand:quietInteraction]:[];}function CalendarDayButton({children,modifiers,...buttonProps}){const readOnly=useCalendarGridContext()?.readOnly;const selected=modifiers.selected&&!modifiers.range_middle;const interactive=!(modifiers.disabled||readOnly);return/*#__PURE__*/_jsx(DayPickerDayButton,{...buttonProps,modifiers:modifiers,...props(buttonStyles.base,getDaySurfaceStyle(Boolean(selected)),buttonStyles.icon,calendarStyles.dayButton,modifiers.today&&calendarStyles.todayButton,selected&&buttonStyles.brand,...getDayInteractionStyles(interactive,Boolean(selected),Boolean(modifiers.today)),modifiers.today&&calendarStyles.todayIndicator,modifiers.today&&selected&&calendarStyles.todayIndicatorSelected,readOnly&&calendarStyles.readOnly),children:controlLabel(children)});}

package/dist/components/calendar/calendar-context.js

@@ -0,0 +1 @@
+import{createContext,useContext}from"react";export const CalendarGridContext=createContext(null);export function useCalendarGridContext(){return useContext(CalendarGridContext);}

package/dist/components/calendar/calendar-dropdowns.js

@@ -0,0 +1,2 @@
+import{Field as BaseField}from"@base-ui/react/field";import{useDayPicker}from"@daypicker/react";import{props}from"@stylexjs/stylex";import{useCallback}from"react";import{Select,SelectItem,SelectPopup,SelectTrigger,SelectValue}from"../select/select";import{calendarStyles}from"./calendar.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function CalendarDropdown({part,options=[],value,disabled,"aria-label":label}){const{months,goToMonth,dayPickerProps}=useDayPicker();const displayedMonth=months[0]?.date;const monthLabel=displayedMonth&&new Intl.DateTimeFormat(dayPickerProps.locale?.code??"en-US",{month:"short"}).format(displayedMonth);const items=options.map(option=>({label:option.label,value:option.value}));const changeMonth=useCallback(nextValue=>{if(nextValue===null||!displayedMonth){return;}const nextMonth=new Date(displayedMonth);nextMonth.setDate(1);if(part==="month"){nextMonth.setMonth(nextValue);}else{nextMonth.setFullYear(nextValue);}goToMonth(nextMonth);},[displayedMonth,goToMonth,part]);// Its own field root: an enclosing Field must not label or id this select.
+return/*#__PURE__*/_jsx(BaseField.Root,{...props(calendarStyles.dropdown),children:/*#__PURE__*/_jsxs(Select,{disabled:disabled,items:items,onValueChange:changeMonth,value:Number(value),children:[/*#__PURE__*/_jsx(SelectTrigger,{"aria-label":label,size:"sm",children:/*#__PURE__*/_jsx(SelectValue,{children:part==="month"?monthLabel:null})}),/*#__PURE__*/_jsx(SelectPopup,{alignItemWithTrigger:false,children:options.map(option=>/*#__PURE__*/_jsx(SelectItem,{disabled:option.disabled,value:option.value,children:option.label},option.value))})]})});}export function CalendarMonthsDropdown(dropdownProps){return/*#__PURE__*/_jsx(CalendarDropdown,{...dropdownProps,part:"month"});}export function CalendarYearsDropdown(dropdownProps){return/*#__PURE__*/_jsx(CalendarDropdown,{...dropdownProps,part:"year"});}

package/dist/components/calendar/calendar-utils.js

@@ -0,0 +1 @@
+import{props}from"@stylexjs/stylex";import{calendarStyles}from"./calendar.styles";export function normalizeCalendarRange(range){return range?.from?{from:range.from,to:range.to}:undefined;}export function buildDisabledMatchers(disabled,minValue,maxValue,isDateUnavailable){if(disabled){return[true];}const matchers=[];if(minValue){matchers.push({before:minValue});}if(maxValue){matchers.push({after:maxValue});}if(isDateUnavailable){matchers.push(isDateUnavailable);}return matchers;}export function getCalendarClassNames(mode,readOnly){return{caption_label:props(calendarStyles.captionLabel).className,day:props(calendarStyles.day).className,day_button:props(calendarStyles.dayButton,readOnly&&calendarStyles.dayButtonReadOnly).className,disabled:props(calendarStyles.dayDisabled).className,dropdowns:props(calendarStyles.dropdowns).className,focused:"",month:props(calendarStyles.month).className,month_caption:props(calendarStyles.monthCaption).className,month_grid:props(calendarStyles.monthGrid).className,months:props(calendarStyles.months).className,nav:props(calendarStyles.nav).className,outside:props(calendarStyles.outside).className,range_end:props(calendarStyles.rangeEnd).className,range_middle:props(calendarStyles.rangeMiddle).className,range_start:props(calendarStyles.rangeStart).className,root:props(calendarStyles.dayPickerRoot).className,selected:props(mode==="range"?calendarStyles.selectedRange:calendarStyles.selected).className,today:props(calendarStyles.today).className,week:props(calendarStyles.week).className,weekday:props(calendarStyles.weekday).className,weekdays:props(calendarStyles.weekdays).className,weeks:props(calendarStyles.weeks).className};}

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from "react";
+import type { CalendarProps } from "./calendar.types";
+export type { CalendarLocale, CalendarProps, CalendarRangeProps, CalendarRangeValue, CalendarSingleProps, CalendarVariant, } from "./calendar.types";
+export declare function Calendar(calendarProps: CalendarProps): ReactElement;

package/dist/components/calendar/calendar.js

@@ -0,0 +1 @@
+"use client";import{DayPicker}from"@daypicker/react";import{props}from"@stylexjs/stylex";import{useCallback,useMemo,useState}from"react";import{calendarStyles}from"./calendar.styles";import{calendarComponents}from"./calendar-components";import{CalendarGridContext}from"./calendar-context";import{buildDisabledMatchers,getCalendarClassNames,normalizeCalendarRange}from"./calendar-utils";import{jsx as _jsx}from"react/jsx-runtime";function SingleCalendarView(singleProps){const[isControlled]=useState(()=>Object.hasOwn(singleProps,"value"));const[uncontrolled,setUncontrolled]=useState(singleProps.defaultValue);const current=isControlled?singleProps.value:uncontrolled;const{autoFocus,defaultMonth=singleProps.defaultValue??singleProps.value,dir,disabled=false,isDateUnavailable,locale,maxValue,minValue,month,onMonthChange,onValueChange,readOnly=false,required,weekStartsOn}=singleProps;const disabledMatchers=useMemo(()=>buildDisabledMatchers(disabled,minValue,maxValue,isDateUnavailable),[disabled,minValue,maxValue,isDateUnavailable]);const handleSelect=useCallback(selected=>{if(readOnly||disabled){return;}if(!isControlled){setUncontrolled(selected);}onValueChange?.(selected);},[disabled,isControlled,onValueChange,readOnly]);const classNames=useMemo(()=>getCalendarClassNames("single",readOnly),[readOnly]);return/*#__PURE__*/_jsx(DayPicker,{autoFocus:autoFocus,captionLayout:singleProps.captionLayout,classNames:classNames,components:calendarComponents,defaultMonth:defaultMonth,dir:dir,disabled:disabledMatchers,disableNavigation:disabled,endMonth:singleProps.endMonth,fixedWeeks:true,locale:locale,mode:"single",month:month,onMonthChange:onMonthChange,onSelect:handleSelect,required:required,selected:current,showOutsideDays:true,startMonth:singleProps.startMonth,weekStartsOn:weekStartsOn});}function RangeCalendarView(rangeProps){const[isControlled]=useState(()=>Object.hasOwn(rangeProps,"value"));const[uncontrolled,setUncontrolled]=useState(rangeProps.defaultValue);const current=isControlled?rangeProps.value:uncontrolled;const{autoFocus,defaultMonth=rangeProps.defaultValue?.from??rangeProps.value?.from,dir,disabled=false,isDateUnavailable,locale,maxNights,maxValue,minNights,minValue,resetOnSelect,month,onMonthChange,onValueChange,readOnly=false,required,weekStartsOn}=rangeProps;const disabledMatchers=useMemo(()=>buildDisabledMatchers(disabled,minValue,maxValue,isDateUnavailable),[disabled,minValue,maxValue,isDateUnavailable]);const handleSelect=useCallback(range=>{if(readOnly||disabled){return;}const nextRange=normalizeCalendarRange(range);if(!isControlled){setUncontrolled(nextRange);}onValueChange?.(nextRange);},[disabled,isControlled,onValueChange,readOnly]);const classNames=useMemo(()=>getCalendarClassNames("range",readOnly),[readOnly]);return/*#__PURE__*/_jsx(DayPicker,{autoFocus:autoFocus,captionLayout:rangeProps.captionLayout,classNames:classNames,components:calendarComponents,defaultMonth:defaultMonth,dir:dir,disabled:disabledMatchers,disableNavigation:disabled,endMonth:rangeProps.endMonth,excludeDisabled:true,fixedWeeks:true,locale:locale,max:maxNights,min:minNights,mode:"range",month:month,onMonthChange:onMonthChange,onSelect:handleSelect,required:required,resetOnSelect:resetOnSelect,selected:current?{from:current.from,to:current.to}:undefined,showOutsideDays:true,startMonth:rangeProps.startMonth,weekStartsOn:weekStartsOn});}function getCalendarStyles(disabled,readOnly,invalid,variant){return props(calendarStyles.root,variant==="embedded"&&calendarStyles.rootEmbedded,disabled&&calendarStyles.disabled,readOnly&&calendarStyles.readOnly,invalid&&calendarStyles.invalid);}function getWrapperProps(calendarProps){const{disabled,invalid,readOnly,ref,variant}=calendarProps;const styleProps=getCalendarStyles(disabled,readOnly,invalid,variant);return{...styleProps,"data-disabled":disabled?"":undefined,"data-invalid":invalid?"":undefined,"data-readonly":readOnly?"":undefined,"data-slot":"calendar",ref};}export function Calendar(calendarProps){const wrapperProps=getWrapperProps(calendarProps);const content=calendarProps.mode==="single"?/*#__PURE__*/_jsx(SingleCalendarView,{...calendarProps}):/*#__PURE__*/_jsx(RangeCalendarView,{...calendarProps});const{"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,invalid,readOnly}=calendarProps;const gridContextValue=useMemo(()=>({ariaDescribedBy,ariaLabel,ariaLabelledBy,invalid,readOnly}),[ariaDescribedBy,ariaLabel,ariaLabelledBy,invalid,readOnly]);return/*#__PURE__*/_jsx(CalendarGridContext.Provider,{value:gridContextValue,children:/*#__PURE__*/_jsx("div",{...wrapperProps,children:content})});}

package/dist/components/calendar/calendar.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,forcedColorAdjust,opacity}from"../../styles/interaction.stylex";import"../../styles/shadows.stylex";import{shadows}from"../../styles/shadows.stylex";import"../../styles/shape.stylex";import{shape}from"../../styles/shape.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontSize,fontWeight,lineHeight}from"../../styles/typography.stylex";import"../button/button-colors.stylex";import{buttonColors}from"../button/button-colors.stylex";export const calendarStyles={captionLabel:{kMwMTN:"x14tvo57",kGuDYH:"x12ama9c",kcqcaj:"xss6m8b",k63SB2:"x1lo1l87",$$css:true},chevron:{k1xSpc:"x1rg5ohu",kmuXW:"x2lah0s",$$css:true},day:{kcqcaj:"xss6m8b",kZKoxP:"xk8t5le xgbny6f",kmVPX3:"x1717udv",k9WMMc:"x2b8uid",kzqmXN:"x1s4ejo4 x24rnby",$$css:true},dayButton:{kT0f0o:"x1hia2b7",kVL7Gh:"x1dz734k",kfmiAY:"x2dv6dr",krdFHd:"xn5rixj",kMwMTN:"x1heor9g",kGuDYH:"x12ama9c",k63SB2:"x1lo1l87",kZKoxP:"xk8t5le",kVAEAm:"x1n2onr6",kzqmXN:"x1s4ejo4",$$css:true},dayButtonReadOnly:{kWkggS:"x7hnrrc xjbqb8w",kkrTdU:"xt0e3qv",$$css:true},dayDisabled:{kkrTdU:"x1h6gzvc",kSiTet:"xd57v9i",$$css:true},dayPickerRoot:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xp4ho6d",kVAEAm:"x1n2onr6",$$css:true},disabled:{kSiTet:"xd57v9i",kfzvcC:"x47corl",$$css:true},dropdown:{kmuXW:"x2lah0s",kzqmXN:"xex909m",$$css:true},dropdowns:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kOIVth:"x13hh4mm",kg3NbH:"xw4edqq",$$css:true},invalid:{kVAM5u:"xpkwx3w",$$css:true},month:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xiw8qbs",$$css:true},monthCaption:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kZKoxP:"xk8t5le",kjj79g:"xl56j7k",kVAEAm:"x1n2onr6",$$css:true},monthGrid:{kLvRdT:"x1mwwwfo",kzqmXN:"xh8yej3",$$css:true},months:{k5JduY:"x1s928wv",krxQOp:"xj0ejgz",kJfJEs:"xbg1tna",k1xSpc:"x78zum5",kOIVth:"xiw8qbs",$$css:true},nav:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kkqhue:"x17y0mx6",kjj79g:"x1qughib",kfzvcC:"x47corl",kVAEAm:"x10l6tqk",kY2c9j:"x1vjfegm",$$css:true},navigationButton:{kfzvcC:"x67bb7w",$$css:true},outside:{kMwMTN:"x3e2zu4",$$css:true},rangeEnd:{kT0f0o:"x1hia2b7 x12i5mvm",kfmiAY:"x2dv6dr xfafljk",kMwMTN:"xdnyjpo",kAXs8y:"xg7vh0z",$$css:true},rangeMiddle:{kWkggS:"x16d8uok",kMwMTN:"x14tvo57",kAXs8y:"xg7vh0z",$$css:true},rangeStart:{kVL7Gh:"x1dz734k xmgm6ly",krdFHd:"xn5rixj x9koimc",kMwMTN:"xdnyjpo",kAXs8y:"xg7vh0z",$$css:true},readOnly:{kkrTdU:"xt0e3qv",$$css:true},root:{kWkggS:"xui3q9s",kVAM5u:"x155xxfk",kaIpWk:"x1yl01a3",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kGVxlE:"x10ilepr",kB7OPa:"x9f619",kMwMTN:"x14tvo57",k1xSpc:"x1rg5ohu",ks0D6T:"x193iq5w",kXHlph:"xw2csxc",k8WAf4:"x391bbb",kg3NbH:"x1ya0gd1 x7e4cbm",katHQp:"x1g2bcle",kfSwDN:"x87ps6o",$$css:true},rootEmbedded:{kWkggS:"xjbqb8w",kVAM5u:"x9r1u3d",kaIpWk:"x2u8bby",kMzoRj:"xc342km",$$css:true},selected:{kMwMTN:"xa34c4n",$$css:true},selectedDay:{"--x1ijwtyn":"x10u7h9a","--x1d0vy2r":"x1x29psc","--xo385wq":"xulyzvn",kAXs8y:"xg7vh0z",$$css:true},selectedRange:{kWkggS:"x1g77xhq x16d8uok",kMwMTN:"x12fxpw x14tvo57",k63SB2:"xuku2lm",kAXs8y:"xg7vh0z",$$css:true},today:{k63SB2:"x1citsaf",$$css:true},todayButton:{kWkggS:"x16d8uok",kMwMTN:"xdnyjpo",k63SB2:"xuku2lm",$$css:true},todayIndicator:{ks3ayO:"x14ag2g1",kUfP38:"x2coff9",k8Iv0R:"x1tm3xe0",k5JduY:"x1s928wv",k4zj60:"xzgp08k",kc1e00:"x19pgp2l",kloYau:"x2q1x1w",kwXMNM:"x1j6awrg",kkgrvl:"x11lu4s1",$$css:true},todayIndicatorSelected:{ks3ayO:"x3awtke",$$css:true},todayInteraction:{kWkggS:"x1a63spv xj8gswt x16d8uok",$$css:true},week:{k1xSpc:"xf5m44m",$$css:true},weekday:{kMwMTN:"x125omll",kGuDYH:"xlh8hku",k63SB2:"x1lo1l87",kZKoxP:"xettwda",kLWn49:"x2xzzt7",k9WMMc:"x2b8uid",kzqmXN:"x1s4ejo4 x24rnby",$$css:true},weekdays:{kL6WhQ:"x9rbyu3",kfdmCh:"x1q0q8m5",kt9PQ7:"x13k63ub",$$css:true},weeks:{kogj98:"x1ghz6dp",$$css:true}};

package/dist/components/calendar/calendar.types.d.ts

@@ -0,0 +1,48 @@
+import type { DayPickerLocale } from "@daypicker/react";
+import type { ComponentPropsWithRef } from "react";
+export type CalendarLocale = DayPickerLocale;
+export type CalendarVariant = "default" | "embedded";
+export interface CalendarRangeValue {
+    readonly from: Date;
+    readonly to?: Date | undefined;
+}
+export interface CalendarCommonProps {
+    readonly "aria-describedby"?: string | undefined;
+    readonly "aria-label"?: string | undefined;
+    readonly "aria-labelledby"?: string | undefined;
+    autoFocus?: boolean | undefined;
+    captionLayout?: "label" | "dropdown" | undefined;
+    defaultMonth?: Date | undefined;
+    dir?: "ltr" | "rtl" | undefined;
+    disabled?: boolean | undefined;
+    endMonth?: Date | undefined;
+    invalid?: boolean | undefined;
+    isDateUnavailable?: ((date: Date) => boolean) | undefined;
+    locale?: CalendarLocale | undefined;
+    maxValue?: Date | undefined;
+    minValue?: Date | undefined;
+    month?: Date | undefined;
+    onMonthChange?: ((month: Date) => void) | undefined;
+    readOnly?: boolean | undefined;
+    ref?: ComponentPropsWithRef<"div">["ref"] | undefined;
+    required?: boolean | undefined;
+    startMonth?: Date | undefined;
+    variant?: CalendarVariant | undefined;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+}
+export interface CalendarSingleProps extends CalendarCommonProps {
+    defaultValue?: Date | undefined;
+    mode: "single";
+    onValueChange?: ((value: Date | undefined) => void) | undefined;
+    value?: Date | undefined;
+}
+export interface CalendarRangeProps extends CalendarCommonProps {
+    defaultValue?: CalendarRangeValue | undefined;
+    maxNights?: number | undefined;
+    minNights?: number | undefined;
+    mode: "range";
+    onValueChange?: ((value: CalendarRangeValue | undefined) => void) | undefined;
+    resetOnSelect?: boolean | undefined;
+    value?: CalendarRangeValue | undefined;
+}
+export type CalendarProps = CalendarSingleProps | CalendarRangeProps;

package/dist/components/calendar/calendar.types.js

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

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

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import type { ChartSeriesTone } from "../chart-frame/chart-colors";
+export interface CalendarHeatmapDay {
+    /** A calendar date as YYYY-MM-DD, free of time zones. */
+    date: string;
+    value: number | null;
+}
+export type CalendarHeatmapProps = Omit<Closed<ComponentPropsWithRef<"div">>, "aria-label" | "children" | "data-slot" | "role"> & {
+    "aria-label": string;
+    days: readonly CalendarHeatmapDay[];
+    formatValue?: (value: number) => string;
+    locale?: string;
+    tone?: ChartSeriesTone;
+    valueLabel?: string;
+    /** 0 starts weeks on Sunday, 1 on Monday. */
+    weekStartsOn?: 0 | 1;
+};
+/** A grid of days, one column per week, shaded by each day's value. */
+export declare function CalendarHeatmap({ "aria-label": ariaLabel, days, formatValue, locale, ref: forwardedRef, tone, valueLabel, weekStartsOn, ...rest }: CalendarHeatmapProps): import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+"use client";import{create,props}from"@stylexjs/stylex";import{cell,defineChart}from"@tanstack/charts";import{scaleBand}from"@tanstack/charts/scales/band";import{tooltip as tooltipFeature}from"@tanstack/charts/tooltip";import{useMemo}from"react";import{typeRoles}from"../../styles/typography.styles";import{assertTone}from"../chart-frame/chart-assert";import{ChartDataTable}from"../chart-frame/chart-data-table";import{ChartFrame}from"../chart-frame/chart-frame";import{ChartTooltip}from"../chart-tooltip/chart-tooltip";import{COLOR_DOMAIN,colorRange,getBucket,HeatmapLegend}from"../heatmap/heatmap-scale";import{Table,TableBody,TableCaption,TableCell,TableContainer,TableHead,TableHeader,TableRow}from"../table/table";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const NAME="CalendarHeatmap";const DAY=86_400_000;// The grid fills its container with near-square days, laid out at a 16px
+// pitch; below a 12px pitch it scrolls instead of shrinking further. The
+// gutter holds weekday labels and the axis holds month labels.
+const PITCH=16;const MIN_PITCH=12;const GUTTER=40;const AXIS=24;const DATE_PATTERN=/^\d{4}-\d{2}-\d{2}$/u;const _temp={k7Eaqz:"x1d6dtaj","$$css":true};const styles={plot:minInlineSize=>[_temp,{"--x-minInlineSize":(val=>typeof val==="number"?val+"px":val!=null?val:undefined)(minInlineSize)}]};function parseDate(date){const[year,month,day]=date.split("-").map(Number);const time=Date.UTC(year,month-1,day);if(!DATE_PATTERN.test(date)||new Date(time).getUTCDate()!==day){throw new RangeError(`${NAME} dates must be valid YYYY-MM-DD strings.`);}return time;}function prepareDays(days){if(!Array.isArray(days)){throw new TypeError(`${NAME} days must be an array.`);}const values=new Map();for(const{date,value}of days){const time=parseDate(date);if(values.has(time)){throw new RangeError(`${NAME} dates must be unique.`);}if(value!==null&&!(Number.isFinite(value)&&value>=0)){throw new RangeError(`${NAME} values must be finite and not negative.`);}values.set(time,value);}return values;}function weekdayLabels(locale,weekStartsOn){const format=new Intl.DateTimeFormat(locale,{timeZone:"UTC",weekday:"short"});// 2023-01-01 was a Sunday.
+return Array.from({length:7},(_,index)=>format.format(Date.UTC(2023,0,1+(index+weekStartsOn)%7)));}function buildCells(values,weekdays,weekStartsOn){const times=[...values.keys()];const first=Math.min(...times);const last=Math.max(...times);const lead=(new Date(first).getUTCDay()-weekStartsOn+7)%7;const maximum=Math.max(0,...[...values.values()].map(value=>value??0));const cells=[];for(let time=first;time<=last;time+=DAY){const index=Math.round((time-first)/DAY)+lead;const value=values.get(time)??null;cells.push({colorKey:value===null?"missing":getBucket(value,maximum),date:new Date(time),id:String(time),value,week:String(Math.floor(index/7)),weekday:weekdays[index%7]});}return{cells,maximum,weeks:Math.floor((lead+cells.length-1)/7)+1};}// A week column shows its month's name when the month's first day falls in it.
+function monthLabels(cells,locale){const format=new Intl.DateTimeFormat(locale,{month:"short",timeZone:"UTC"});const labels=new Map();for(const{date,week}of cells){if(date.getUTCDate()===1||cells[0].date===date){labels.set(week,format.format(date));}}return labels;}function renderTooltip(context,dateFormat,valueLabel,tone,format){const point=context.primaryPoint??context.points[0];if(!point){return null;}const{date,value}=point.datum;return/*#__PURE__*/_jsx(ChartTooltip,{items:[{id:"calendar-heatmap-value",label:valueLabel,tone,value:value===null?"No data":format(value)}],label:dateFormat.format(date)});}/** A grid of days, one column per week, shaded by each day's value. */export function CalendarHeatmap({"aria-label":ariaLabel,days,formatValue,locale="en-US",ref:forwardedRef,tone="series1",valueLabel="Value",weekStartsOn=1,...rest}){if(typeof ariaLabel!=="string"||!ariaLabel.trim()){throw new TypeError(`${NAME} requires a non-empty aria-label.`);}assertTone(NAME,tone);for(const name of["aria-label","children","className","data-slot","role","style"]){Reflect.deleteProperty(rest,name);}const values=useMemo(()=>prepareDays(days),[days]);const format=formatValue??new Intl.NumberFormat(locale).format;return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"calendar-heatmap",ref:forwardedRef,...{className:"xeuugli"},children:values.size===0?/*#__PURE__*/// biome-ignore lint/a11y/useSemanticElements: Names an empty chart, not a form group; the status keeps its own text.
+_jsx("div",{"aria-label":ariaLabel,role:"group",children:/*#__PURE__*/_jsx("p",{role:"status",...props(typeRoles.body),children:"No data available."})}):/*#__PURE__*/_jsx(CalendarHeatmapPlot,{"aria-label":ariaLabel,format:format,locale:locale,tone:tone,valueLabel:valueLabel,values:values,weekStartsOn:weekStartsOn})});}function CalendarHeatmapPlot({"aria-label":ariaLabel,format,locale,tone,valueLabel,values,weekStartsOn}){const weekdays=useMemo(()=>weekdayLabels(locale,weekStartsOn),[locale,weekStartsOn]);const{cells,maximum,weeks}=useMemo(()=>buildCells(values,weekdays,weekStartsOn),[values,weekdays,weekStartsOn]);const definition=useMemo(()=>{const months=monthLabels(cells,locale);return defineChart({color:{domain:COLOR_DOMAIN,range:colorRange(tone)},marks:[cell(cells,{color:"colorKey",id:"calendar-heatmap-days",inset:1.5,key:({id})=>id,radius:3,x:"week",y:"weekday"})],scales:{x:{// Labels are already sparse (one per month), so none are thinned.
+axis:{tickLabels:{thin:false},ticks:{format:week=>months.get(week)??""}},scale:scaleBand().domain(Array.from({length:weeks},(_,index)=>String(index))).padding(0)},y:{// Alternate weekday labels keep the gutter readable.
+axis:{tickLabels:{thin:false},ticks:{format:day=>weekdays.indexOf(day)%2===0?day:""}},scale:scaleBand().domain(weekdays).padding(0)}}},{tooltip:tooltipFeature});},[cells,locale,tone,weekdays,weeks]);const dateFormat=useMemo(()=>new Intl.DateTimeFormat(locale,{day:"numeric",month:"short",timeZone:"UTC",weekday:"short",year:"numeric"}),[locale]);const renderTooltipBody=useMemo(()=>context=>renderTooltip(context,dateFormat,valueLabel,tone,format),[dateFormat,format,tone,valueLabel]);const inlineSize=weeks*PITCH+GUTTER;return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("div",{...{className:"xw2csxc"},children:/*#__PURE__*/_jsx("div",{...props(styles.plot(weeks*MIN_PITCH+GUTTER)),children:/*#__PURE__*/_jsx(ChartFrame,{"aria-label":ariaLabel,aspectRatio:inlineSize/(7*PITCH+AXIS),definition:definition,initialWidth:inlineSize,renderTooltipBody:renderTooltipBody,tabIndex:0})})}),/*#__PURE__*/_jsx(HeatmapLegend,{high:format(maximum),tone:tone,valueLabel:valueLabel}),/*#__PURE__*/_jsx(ChartDataTable,{children:/*#__PURE__*/_jsx(TableContainer,{"aria-label":`${ariaLabel} data`,children:/*#__PURE__*/_jsxs(Table,{children:[/*#__PURE__*/_jsxs(TableCaption,{children:[ariaLabel," values"]}),/*#__PURE__*/_jsx(TableHeader,{sticky:false,children:/*#__PURE__*/_jsxs(TableRow,{children:[/*#__PURE__*/_jsx(TableHead,{scope:"col",children:"Date"}),/*#__PURE__*/_jsx(TableHead,{scope:"col",children:valueLabel})]})}),/*#__PURE__*/_jsx(TableBody,{children:cells.filter(({value})=>value!==null).map(({date,id,value})=>/*#__PURE__*/_jsxs(TableRow,{children:[/*#__PURE__*/_jsx(TableHead,{scope:"row",children:dateFormat.format(date)}),/*#__PURE__*/_jsx(TableCell,{numeric:true,children:format(value??0)})]},id))})]})})})]});}