@mizen-labs/ui 0.0.0-stage → 0.1.0

package/dist/components/context-menu/context-menu-items.d.ts

@@ -0,0 +1,10 @@
+import type { ContextMenuCheckboxItemProps, ContextMenuGroupLabelProps, ContextMenuGroupProps, ContextMenuItemProps, ContextMenuLinkItemProps, ContextMenuRadioGroupProps, ContextMenuRadioItemProps, ContextMenuSeparatorProps, ContextMenuShortcutProps } from "./context-menu.types";
+export declare function ContextMenuItem({ render, children, inset, ref: forwardedRef, variant, ...rest }: ContextMenuItemProps): import("react").JSX.Element;
+export declare function ContextMenuLinkItem({ children, closeOnClick, inset, ref: forwardedRef, render, variant, ...rest }: ContextMenuLinkItemProps): import("react").JSX.Element;
+export declare function ContextMenuGroup({ render, children, ref: forwardedRef, ...rest }: ContextMenuGroupProps): import("react").JSX.Element;
+export declare function ContextMenuGroupLabel({ render, children, inset, ref: forwardedRef, ...rest }: ContextMenuGroupLabelProps): import("react").JSX.Element;
+export declare function ContextMenuSeparator({ render, ref: forwardedRef, ...rest }: ContextMenuSeparatorProps): import("react").JSX.Element;
+export declare function ContextMenuShortcut({ children, ref: forwardedRef, ...rest }: ContextMenuShortcutProps): import("react").JSX.Element;
+export declare function ContextMenuCheckboxItem({ render, children, ref: forwardedRef, variant, ...rest }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
+export declare function ContextMenuRadioGroup<Value = unknown>({ render, ...rest }: ContextMenuRadioGroupProps<Value>): import("react").JSX.Element;
+export declare function ContextMenuRadioItem<Value = unknown>({ render, children, ref: forwardedRef, ...rest }: ContextMenuRadioItemProps<Value>): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+"use client";import{ContextMenu as BaseContextMenu}from"@base-ui/react/context-menu";import{mergeProps}from"@base-ui/react/merge-props";import{props}from"@stylexjs/stylex";import{controlLabel}from"../../control-label";import{protectRenderSlot as protectSlot}from"../../render-utils";import{kbdStyles}from"../kbd/kbd.styles";import{menuStyles}from"../menu/menu.styles";import{CheckIcon,itemVariantStyles,renderSwitchIndicator}from"./context-menu-utils";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function ContextMenuItem({render,children,inset=false,ref:forwardedRef,variant="default",...rest}){return/*#__PURE__*/_jsx(BaseContextMenu.Item,{...rest,"data-inset":inset||undefined,"data-slot":"context-menu-item","data-variant":variant,ref:forwardedRef,render:protectSlot("context-menu-item",render),...props(menuStyles.item,itemVariantStyles[variant],inset&&menuStyles.inset),children:controlLabel(children)});}export function ContextMenuLinkItem({children,closeOnClick=true,inset=false,ref:forwardedRef,render,variant="default",...rest}){return/*#__PURE__*/_jsx(BaseContextMenu.LinkItem,{closeOnClick:closeOnClick,...rest,"data-inset":inset||undefined,"data-slot":"context-menu-link-item","data-variant":variant,ref:forwardedRef,render:protectSlot("context-menu-link-item",render),...props(menuStyles.item,itemVariantStyles[variant],inset&&menuStyles.inset),children:controlLabel(children)});}export function ContextMenuGroup({render,children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx(BaseContextMenu.Group,{...rest,"data-slot":"context-menu-group",ref:forwardedRef,render:protectSlot("context-menu-group",render),...props(menuStyles.group),children:children});}export function ContextMenuGroupLabel({render,children,inset=false,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx(BaseContextMenu.GroupLabel,{...rest,"data-inset":inset||undefined,"data-slot":"context-menu-label",ref:forwardedRef,render:protectSlot("context-menu-label",render),...props(menuStyles.groupLabel,inset&&menuStyles.inset),children:children});}export function ContextMenuSeparator({render,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsx(BaseContextMenu.Separator,{...rest,"data-slot":"context-menu-separator",ref:forwardedRef,render:protectSlot("context-menu-separator",render),...props(menuStyles.separator)});}export function ContextMenuShortcut({children,ref:forwardedRef,...rest}){return(/*#__PURE__*/// Key order reads left to right in every language.
+_jsx("kbd",{dir:"ltr",...rest,"data-slot":"context-menu-shortcut",ref:forwardedRef,...mergeProps(props(kbdStyles.group,menuStyles.shortcut),{}),children:controlLabel(children)}));}export function ContextMenuCheckboxItem({render,children,ref:forwardedRef,variant="default",...rest}){const indicator=variant==="switch"?/*#__PURE__*/_jsx(BaseContextMenu.CheckboxItemIndicator,{keepMounted:true,render:renderSwitchIndicator}):/*#__PURE__*/_jsx(BaseContextMenu.CheckboxItemIndicator,{keepMounted:true,...props(menuStyles.indicator),children:/*#__PURE__*/_jsx(CheckIcon,{})});return/*#__PURE__*/_jsxs(BaseContextMenu.CheckboxItem,{...rest,"data-slot":"context-menu-checkbox-item",ref:forwardedRef,render:protectSlot("context-menu-checkbox-item",render),...props(menuStyles.item,menuStyles.itemDefault),children:[variant==="default"&&indicator,controlLabel(children),variant==="switch"&&indicator]});}export function ContextMenuRadioGroup({render,...rest}){return/*#__PURE__*/_jsx(BaseContextMenu.RadioGroup,{...rest,"data-slot":"context-menu-radio-group",render:protectSlot("context-menu-radio-group",render)});}export function ContextMenuRadioItem({render,children,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsxs(BaseContextMenu.RadioItem,{...rest,"data-slot":"context-menu-radio-item",ref:forwardedRef,render:protectSlot("context-menu-radio-item",render),...props(menuStyles.item,menuStyles.itemDefault),children:[/*#__PURE__*/_jsx(BaseContextMenu.RadioItemIndicator,{keepMounted:true,...props(menuStyles.indicator),children:/*#__PURE__*/_jsx("span",{...props(menuStyles.radioDot)})}),controlLabel(children)]});}

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

@@ -0,0 +1 @@
+"use client";import{useDirection}from"@base-ui/react/direction-provider";import{props}from"@stylexjs/stylex";import{IconCheck,IconChevronLeft,IconChevronRight}from"../../icons";import{menuStyles}from"../menu/menu.styles";import{jsx as _jsx}from"react/jsx-runtime";export const itemVariantStyles={default:menuStyles.itemDefault,destructive:menuStyles.itemDestructive};export function CheckIcon(){return/*#__PURE__*/_jsx(IconCheck,{"aria-hidden":"true",focusable:"false",...props(menuStyles.checkIcon),size:"1em"});}export 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 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)})});}

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

@@ -0,0 +1,22 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type { ReactNode } from "react";
+import type { ContextMenuPopupProps, ContextMenuPortalProps, ContextMenuSubPopupProps, ContextMenuSubTriggerProps, ContextMenuTriggerProps } from "./context-menu.types";
+import { ContextMenuCheckboxItem as ContextMenuCheckboxItemImpl, ContextMenuGroup as ContextMenuGroupImpl, ContextMenuGroupLabel as ContextMenuGroupLabelImpl, ContextMenuItem as ContextMenuItemImpl, ContextMenuLinkItem as ContextMenuLinkItemImpl, ContextMenuRadioGroup as ContextMenuRadioGroupImpl, ContextMenuRadioItem as ContextMenuRadioItemImpl, ContextMenuSeparator as ContextMenuSeparatorImpl, ContextMenuShortcut as ContextMenuShortcutImpl } from "./context-menu-items";
+export type * from "./context-menu.types";
+export declare const ContextMenuItem: typeof ContextMenuItemImpl;
+export declare const ContextMenuLinkItem: typeof ContextMenuLinkItemImpl;
+export declare const ContextMenuGroup: typeof ContextMenuGroupImpl;
+export declare const ContextMenuGroupLabel: typeof ContextMenuGroupLabelImpl;
+export declare const ContextMenuSeparator: typeof ContextMenuSeparatorImpl;
+export declare const ContextMenuShortcut: typeof ContextMenuShortcutImpl;
+export declare const ContextMenuCheckboxItem: typeof ContextMenuCheckboxItemImpl;
+export declare const ContextMenuRadioGroup: typeof ContextMenuRadioGroupImpl;
+export declare const ContextMenuRadioItem: typeof ContextMenuRadioItemImpl;
+export declare const ContextMenu: typeof BaseContextMenu.Root;
+export declare const ContextMenuPortal: (props: ContextMenuPortalProps) => ReactNode;
+export declare const ContextMenuPrimitive: typeof BaseContextMenu;
+export declare function ContextMenuTrigger({ ref: forwardedRef, render, ...rest }: ContextMenuTriggerProps): import("react").JSX.Element;
+export declare function ContextMenuPopup({ align, alignOffset, anchor, side, sideOffset, ...rest }: ContextMenuPopupProps): import("react").JSX.Element;
+export declare const ContextMenuSub: typeof BaseContextMenu.SubmenuRoot;
+export declare function ContextMenuSubTrigger({ render, children, inset, ref: forwardedRef, ...rest }: ContextMenuSubTriggerProps): import("react").JSX.Element;
+export declare function ContextMenuSubPopup({ align, alignOffset, anchor, side, sideOffset, ...rest }: ContextMenuSubPopupProps): import("react").JSX.Element;

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

@@ -0,0 +1 @@
+"use client";import{ContextMenu as BaseContextMenu}from"@base-ui/react/context-menu";import{mergeProps}from"@base-ui/react/merge-props";import{props}from"@stylexjs/stylex";import{controlLabel}from"../../control-label";import{protectRenderSlot as protectSlot}from"../../render-utils";import{menuStyles}from"../menu/menu.styles";import{ScrollArea}from"../scroll-area/scroll-area";import{ContextMenuCheckboxItem as ContextMenuCheckboxItemImpl,ContextMenuGroup as ContextMenuGroupImpl,ContextMenuGroupLabel as ContextMenuGroupLabelImpl,ContextMenuItem as ContextMenuItemImpl,ContextMenuLinkItem as ContextMenuLinkItemImpl,ContextMenuRadioGroup as ContextMenuRadioGroupImpl,ContextMenuRadioItem as ContextMenuRadioItemImpl,ContextMenuSeparator as ContextMenuSeparatorImpl,ContextMenuShortcut as ContextMenuShortcutImpl}from"./context-menu-items";import{ChevronIcon,itemVariantStyles}from"./context-menu-utils";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const ContextMenuItem=ContextMenuItemImpl;export const ContextMenuLinkItem=ContextMenuLinkItemImpl;export const ContextMenuGroup=ContextMenuGroupImpl;export const ContextMenuGroupLabel=ContextMenuGroupLabelImpl;export const ContextMenuSeparator=ContextMenuSeparatorImpl;export const ContextMenuShortcut=ContextMenuShortcutImpl;export const ContextMenuCheckboxItem=ContextMenuCheckboxItemImpl;export const ContextMenuRadioGroup=ContextMenuRadioGroupImpl;export const ContextMenuRadioItem=ContextMenuRadioItemImpl;export const ContextMenu=BaseContextMenu.Root;export const ContextMenuPortal=BaseContextMenu.Portal;export const ContextMenuPrimitive=BaseContextMenu;function ContextMenuPopupSurface({render,align,alignOffset,anchor,children,dataSlot,portalProps,ref:forwardedRef,side,sideOffset,...rest}){return/*#__PURE__*/_jsx(BaseContextMenu.Portal,{...portalProps,children:/*#__PURE__*/_jsx(BaseContextMenu.Positioner,{align:align,alignOffset:alignOffset,anchor:anchor,"data-slot":"context-menu-positioner",side:side,sideOffset:sideOffset,...props(menuStyles.positioner),children:/*#__PURE__*/_jsx(BaseContextMenu.Popup,{...rest,"data-slot":dataSlot,ref:forwardedRef,render:protectSlot(dataSlot,render),...props(menuStyles.popup),children:/*#__PURE__*/_jsx(ScrollArea,{overscrollContain:true,scrollFade:true,children:/*#__PURE__*/_jsx("div",{...props(menuStyles.content),children:children})})})})});}function handleContextMenuKeyDown(event){if(event.defaultPrevented||event.altKey||event.ctrlKey||event.metaKey||!(event.key==="ContextMenu"||event.key==="F10"&&event.shiftKey)){return;}event.preventDefault();const rect=event.currentTarget.getBoundingClientRect();event.currentTarget.dispatchEvent(new MouseEvent("contextmenu",{bubbles:true,button:2,cancelable:true,clientX:rect.left+rect.width/2,clientY:rect.top+rect.height/2,composed:true}));}export function ContextMenuTrigger({ref:forwardedRef,render,...rest}){return/*#__PURE__*/_jsx(BaseContextMenu.Trigger,{...mergeProps({onKeyDown:handleContextMenuKeyDown},rest),"data-slot":"context-menu-trigger",ref:forwardedRef,render:protectSlot("context-menu-trigger",render)});}export function ContextMenuPopup({align="center",alignOffset,anchor,side="bottom",sideOffset=4,...rest}){return/*#__PURE__*/_jsx(ContextMenuPopupSurface,{align:align,alignOffset:alignOffset,anchor:anchor,dataSlot:"context-menu-popup",side:side,sideOffset:sideOffset,...rest});}export const ContextMenuSub=BaseContextMenu.SubmenuRoot;export function ContextMenuSubTrigger({render,children,inset=false,ref:forwardedRef,...rest}){return/*#__PURE__*/_jsxs(BaseContextMenu.SubmenuTrigger,{...rest,"data-inset":inset||undefined,"data-slot":"context-menu-sub-trigger",ref:forwardedRef,render:protectSlot("context-menu-sub-trigger",render),...props(menuStyles.item,itemVariantStyles.default,menuStyles.subTrigger,inset&&menuStyles.inset),children:[controlLabel(children),/*#__PURE__*/_jsx(ChevronIcon,{})]});}export function ContextMenuSubPopup({align="start",alignOffset,anchor,side="inline-end",sideOffset=0,...rest}){const defaultAlignOffset=align==="center"?undefined:-5;return/*#__PURE__*/_jsx(ContextMenuPopupSurface,{align:align,alignOffset:alignOffset??defaultAlignOffset,anchor:anchor,dataSlot:"context-menu-sub-content",side:side,sideOffset:sideOffset,...rest});}

package/dist/components/context-menu/context-menu.types.d.ts

@@ -0,0 +1,57 @@
+import type { ContextMenu as BaseContextMenu, ContextMenuRootProps as BaseContextMenuRootProps, ContextMenuSubmenuRootProps } from "@base-ui/react/context-menu";
+import type { MenuRadioGroupChangeEventDetails as ContextMenuRadioGroupChangeEventDetails } from "@base-ui/react/menu";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+type ContextMenuPositionerProps = ComponentPropsWithRef<typeof BaseContextMenu.Positioner>;
+type ContextMenuBasePopupProps = ComponentPropsWithRef<typeof BaseContextMenu.Popup>;
+export type ContextMenuProps<_Payload = unknown> = Closed<BaseContextMenuRootProps>;
+export type ContextMenuPortalProps = Closed<ComponentPropsWithRef<typeof BaseContextMenu.Portal>>;
+export type ContextMenuTriggerProps = Closed<ComponentPropsWithRef<typeof BaseContextMenu.Trigger>>;
+export type ContextMenuPopupProps = Closed<Omit<ContextMenuBasePopupProps, "ref"> & {
+    align?: ContextMenuPositionerProps["align"];
+    alignOffset?: ContextMenuPositionerProps["alignOffset"];
+    anchor?: ContextMenuPositionerProps["anchor"];
+    portalProps?: Omit<ContextMenuPortalProps, "children" | "ref">;
+    ref?: ContextMenuBasePopupProps["ref"];
+    side?: ContextMenuPositionerProps["side"];
+    sideOffset?: ContextMenuPositionerProps["sideOffset"];
+}>;
+export type ContextMenuItemVariant = "default" | "destructive";
+export type ContextMenuItemProps = Closed<Omit<ComponentPropsWithRef<typeof BaseContextMenu.Item>, "ref"> & {
+    closeOnClick?: boolean;
+    inset?: boolean;
+    ref?: ComponentPropsWithRef<typeof BaseContextMenu.Item>["ref"];
+    variant?: ContextMenuItemVariant;
+}>;
+export type ContextMenuLinkItemProps = Closed<ComponentPropsWithRef<typeof BaseContextMenu.LinkItem> & {
+    inset?: boolean;
+    variant?: ContextMenuItemVariant;
+}>;
+export type ContextMenuGroupProps = Closed<ComponentPropsWithRef<typeof BaseContextMenu.Group>>;
+export type ContextMenuGroupLabelProps = Closed<ComponentPropsWithRef<typeof BaseContextMenu.GroupLabel> & {
+    inset?: boolean;
+}>;
+export type ContextMenuSeparatorProps = Closed<ComponentPropsWithRef<typeof BaseContextMenu.Separator>>;
+export type ContextMenuShortcutProps = Closed<ComponentPropsWithRef<"kbd">>;
+export type ContextMenuCheckboxItemVariant = "default" | "switch";
+export type ContextMenuCheckboxItemProps = Closed<Omit<ComponentPropsWithRef<typeof BaseContextMenu.CheckboxItem>, "ref"> & {
+    ref?: ComponentPropsWithRef<typeof BaseContextMenu.CheckboxItem>["ref"];
+    variant?: ContextMenuCheckboxItemVariant;
+}>;
+type BaseContextMenuRadioGroupProps = ComponentPropsWithRef<typeof BaseContextMenu.RadioGroup>;
+export type ContextMenuRadioGroupProps<Value = unknown> = Closed<Omit<BaseContextMenuRadioGroupProps, "defaultValue" | "onValueChange" | "value"> & {
+    defaultValue?: Value;
+    onValueChange?: (value: Value, eventDetails: ContextMenuRadioGroupChangeEventDetails) => void;
+    value?: Value;
+}>;
+type BaseContextMenuRadioItemProps = ComponentPropsWithRef<typeof BaseContextMenu.RadioItem>;
+export type ContextMenuRadioItemProps<Value = unknown> = Closed<Omit<BaseContextMenuRadioItemProps, "value"> & {
+    value: Value;
+}>;
+export type ContextMenuSubProps = Closed<ContextMenuSubmenuRootProps>;
+export type ContextMenuSubTriggerProps = Closed<Omit<ComponentPropsWithRef<typeof BaseContextMenu.SubmenuTrigger>, "ref"> & {
+    inset?: boolean;
+    ref?: ComponentPropsWithRef<typeof BaseContextMenu.SubmenuTrigger>["ref"];
+}>;
+export type ContextMenuSubPopupProps = Closed<ContextMenuPopupProps>;
+export {};

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

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

package/dist/components/conversation/conversation.d.ts

@@ -0,0 +1,41 @@
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+import type { Closed } from "../../closed";
+type Part = Omit<Closed<ComponentPropsWithRef<"div">>, "data-slot">;
+export type ConversationProps = Part & {
+    children: ReactNode;
+};
+/**
+ * The thread with the agent: turns that scroll, an empty state before the
+ * first one, and the composer docked under them. It fills a parent with a
+ * bounded height.
+ */
+export declare function Conversation({ children, ...rest }: ConversationProps): import("react").JSX.Element;
+export interface ConversationEmptyStateProps {
+    /** Starters, such as Suggestions, under the words. */
+    children?: ReactNode;
+    description?: ReactNode;
+    title: ReactNode;
+}
+/** The start screen, shown in place of the thread before the first turn. */
+export declare function ConversationEmptyState({ children, description, title, }: ConversationEmptyStateProps): import("react").JSX.Element;
+export interface ConversationContentProps {
+    "aria-label"?: string;
+    /** True while a reply streams, so assistive tech waits for it. */
+    busy?: boolean;
+    /**
+     * The turns, each with a key that is its id, and an optional
+     * ConversationEmptyState. A turn holding the person's own Message
+     * settles near the top when sent, and the rail lists it.
+     */
+    children: ReactNode;
+    /** Adds a MessageScrollerNavigation rail, one tick per turn the person sent. */
+    navigation?: boolean;
+}
+/** The scrolling thread, with the jump button floating over its end. */
+export declare function ConversationContent({ "aria-label": ariaLabel, busy, children, navigation, }: ConversationContentProps): import("react").JSX.Element;
+export type ConversationFooterProps = Part & {
+    children: ReactNode;
+};
+/** Holds the composer under the thread, in the thread's column. */
+export declare function ConversationFooter({ children, ...rest }: ConversationFooterProps): import("react").JSX.Element;
+export {};

package/dist/components/conversation/conversation.js

@@ -0,0 +1,6 @@
+"use client";import{props}from"@stylexjs/stylex";import{Children,isValidElement}from"react";import{typeRoles}from"../../styles/typography.styles";import{MessageScroller,MessageScrollerButton,MessageScrollerContent,MessageScrollerItem,MessageScrollerNavigation,MessageScrollerViewport}from"../message-scroller/message-scroller";import{conversationStyles as styles}from"./conversation.styles";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";/**
+ * The thread with the agent: turns that scroll, an empty state before the
+ * first one, and the composer docked under them. It fills a parent with a
+ * bounded height.
+ */export function Conversation({children,...rest}){return/*#__PURE__*/_jsx(MessageScroller,{...rest,children:children});}/** The start screen, shown in place of the thread before the first turn. */export function ConversationEmptyState({children,description,title}){return/*#__PURE__*/_jsxs("div",{"data-slot":"conversation-empty-state",...props(styles.emptyState),children:[/*#__PURE__*/_jsxs("div",{...props(styles.emptyText),children:[/*#__PURE__*/_jsx("h2",{...props(typeRoles.subheading,styles.emptyTitle),children:title}),description?/*#__PURE__*/_jsx("p",{...props(typeRoles.body,styles.emptyDescription),children:description}):null]}),children]});}// React prefixes keys from Children.toArray; the id is the key as written.
+const KEY_PREFIX=/^\.\$/u;function idOf(turn){return String(turn.key).replace(KEY_PREFIX,"");}function split(children){const empty=[];const turns=[];for(const child of Children.toArray(children)){if(isValidElement(child)&&child.type===ConversationEmptyState){empty.push(child);}else if(isValidElement(child)){turns.push(child);}}return{empty,turns};}/** The scrolling thread, with the jump button floating over its end. */export function ConversationContent({"aria-label":ariaLabel="Conversation",busy=false,children,navigation=false}){const{empty,turns}=split(children);return/*#__PURE__*/_jsxs("div",{"data-slot":"conversation-content",...props(styles.body),children:[/*#__PURE__*/_jsx(MessageScrollerViewport,{"aria-label":ariaLabel,children:/*#__PURE__*/_jsxs("div",{...props(styles.column,navigation&&styles.columnWithRail),children:[turns.length===0?empty:null,/*#__PURE__*/_jsx(MessageScrollerContent,{busy:busy,children:turns.map(turn=>/*#__PURE__*/_jsx(MessageScrollerItem,{messageId:idOf(turn),scrollAnchor:"auto",children:turn},turn.key))})]})}),navigation?/*#__PURE__*/_jsx(MessageScrollerNavigation,{}):null,/*#__PURE__*/_jsx(MessageScrollerButton,{})]});}/** Holds the composer under the thread, in the thread's column. */export function ConversationFooter({children,...rest}){return/*#__PURE__*/_jsx("div",{...rest,"data-slot":"conversation-footer",...props(styles.footer),children:children});}

package/dist/components/conversation/conversation.styles.js

@@ -0,0 +1,2 @@
+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";// A readable measure for the thread and the composer under it.
+const MEASURE="48rem";export const conversationStyles={body:{k1xSpc:"x78zum5",kzQI83:"x1iyjqo2",kAzted:"x2lwn1j",kVAEAm:"x1n2onr6",$$css:true},column:{kB7OPa:"x9f619",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kUOVxO:"xvueqy4",ks0D6T:"x1vpbbxe",kAzted:"x1us19tq",k8WAf4:"x16z3cw9",kg3NbH:"xaqi9fd",$$css:true},columnWithRail:{kwRFfy:"x1d8qtu6",$$css:true},emptyDescription:{kMwMTN:"x125omll",kogj98:"x1ghz6dp",$$css:true},emptyState:{kGNEyG:"x1qjc9v5",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kzQI83:"x1iyjqo2",kOIVth:"x1q60jeg",kjj79g:"xl56j7k",k9WMMc:"x2b8uid",$$css:true},emptyText:{k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"x13hh4mm",$$css:true},emptyTitle:{kMwMTN:"x14tvo57",kogj98:"x1ghz6dp",$$css:true},footer:{kB7OPa:"x9f619",kzqmXN:"xh8yej3",kUOVxO:"xvueqy4",ks0D6T:"x1vpbbxe",kGO01o:"xvdpcou",kg3NbH:"xaqi9fd",$$css:true}};

package/dist/components/data-table/data-table.d.ts

@@ -0,0 +1,30 @@
+import type { columnSizingFeature, columnVisibilityFeature, ReactTable, RowData, rowPaginationFeature, rowSortingFeature, Table_RowPagination, Table_RowSorting, TableFeatures } from "@tanstack/react-table";
+export interface DataTableColumnMeta {
+    numeric?: boolean;
+    rowHeader?: boolean;
+    sticky?: boolean;
+}
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TFeatures extends TableFeatures, TData extends RowData, TValue> {
+        mizen?: DataTableColumnMeta;
+    }
+}
+type DataTableFeatureMap = TableFeatures & {
+    columnSizingFeature: typeof columnSizingFeature;
+    columnVisibilityFeature: typeof columnVisibilityFeature;
+    rowPaginationFeature: typeof rowPaginationFeature;
+    rowSortingFeature: typeof rowSortingFeature;
+};
+type SortableTable<TFeatures extends DataTableFeatureMap, TData extends RowData> = ReactTable<TFeatures, TData> & Table_RowSorting<TFeatures, TData>;
+type PaginatedTable<TFeatures extends DataTableFeatureMap, TData extends RowData> = ReactTable<TFeatures, TData> & Table_RowPagination<TFeatures, TData>;
+export interface DataTableProps<TFeatures extends DataTableFeatureMap, TData extends RowData> {
+    caption: string;
+    table: SortableTable<TFeatures, TData>;
+    virtualized?: boolean;
+}
+export declare function DataTable<TFeatures extends DataTableFeatureMap, TData extends RowData>({ caption, table: source, virtualized, }: DataTableProps<TFeatures, TData>): import("react").JSX.Element;
+export interface DataTablePaginationProps<TFeatures extends DataTableFeatureMap, TData extends RowData> {
+    table: PaginatedTable<TFeatures, TData>;
+}
+export declare function DataTablePagination<TFeatures extends DataTableFeatureMap, TData extends RowData>({ table: source }: DataTablePaginationProps<TFeatures, TData>): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+"use client";import{props}from"@stylexjs/stylex";import{useVirtualizer}from"@tanstack/react-virtual";import{useCallback,useRef}from"react";import{IconArrowDown,IconArrowUp}from"../../icons";import{typographyStyles}from"../../styles/typography.styles";import{Button}from"../button/button";import{Table,TableBody,TableCaption,TableCell,TableContainer,TableHead,TableHeader,TableRow}from"../table/table";import{Text}from"../text/text";import{dataTableStyles}from"./data-table.styles";import{useGridNavigation}from"./grid-navigation";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";// Compact grid rows: a 20px line, 8px padding above and below, and a 1px rule.
+const ESTIMATED_ROW_HEIGHT=37;const selectState=state=>state;const RESIZE_STEP=16;const MIN_COLUMN_WIDTH=48;// Column resizing is opt-in: it exists when the table includes TanStack's
+// columnResizingFeature.
+function canResize(header){const column=header.column;return typeof header.getResizeHandler==="function"&&column.getCanResize?.()!==false;}function resizeBy(source,column,delta){const{maxSize,minSize}=column.columnDef;const size=Math.min(Math.max(column.getSize()+delta,minSize??MIN_COLUMN_WIDTH),maxSize??Number.POSITIVE_INFINITY);source.setColumnSizing?.(sizing=>({...sizing,[column.id]:size}));}function hasColumnSizing(source){const{columnSizing}=source.state;return Object.keys(columnSizing??{}).length>0;}// Columns start at their natural widths. The first resize records every
+// rendered width, so from then on the table is exactly the sum of its columns.
+function seedColumnSizing(source,from){const cells=from.closest("table")?.tHead?.rows;const headers=cells?.[cells.length-1]?.cells;if(hasColumnSizing(source)||!headers){return;}const columns=source.getAllLeafColumns();const sizing=Object.fromEntries(columns.filter(column=>column.getIsVisible()).map((column,index)=>[column.id,Math.round(headers[index]?.getBoundingClientRect().width??0)]));source.setColumnSizing?.(()=>sizing);}const sortIcons={asc:IconArrowUp,desc:IconArrowDown};export function DataTable({caption,table:source,virtualized=false}){return/*#__PURE__*/_jsx(source.Subscribe,{selector:selectState,children:()=>/*#__PURE__*/_jsx(DataTableView,{caption:caption,table:source,virtualized:virtualized})});}function DataTableView({caption,table:source,virtualized}){const viewportRef=useRef(null);const gridNavigation=useGridNavigation();const{rows}=source.getRowModel();const columns=source.getAllLeafColumns().filter(column=>column.getIsVisible());const headerGroups=source.getHeaderGroups();const resizable=headerGroups.some(group=>group.headers.some(header=>canResize(header)));const getItemKey=useCallback(index=>rows[index]?.id??index,[rows]);// eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual returns a mutable instance by design; this component stays uncompiled.
+const virtualizer=useVirtualizer({anchorTo:"end",count:rows.length,enabled:virtualized,estimateSize:()=>ESTIMATED_ROW_HEIGHT,getItemKey,getScrollElement:()=>viewportRef.current,initialRect:{height:448,width:1024},overscan:5});const virtualRows=virtualizer.getVirtualItems();const topPadding=virtualRows[0]?.start??0;const bottomPadding=virtualizer.getTotalSize()-(virtualRows.at(-1)?.end??0);return/*#__PURE__*/_jsx(TableContainer,{"aria-label":caption,focusable:false,ref:viewportRef,scroll:"both",children:/*#__PURE__*/_jsxs(Table,{"aria-rowcount":virtualized?rows.length+headerGroups.length:undefined,grid:"interactive",onFocus:gridNavigation.onFocus,onKeyDown:gridNavigation.onKeyDown,ref:gridNavigation.ref,width:resizable&&hasColumnSizing(source)?source.getTotalSize?.():undefined,children:[/*#__PURE__*/_jsx(TableCaption,{children:caption}),/*#__PURE__*/_jsx("colgroup",{children:columns.map(column=>/*#__PURE__*/_jsx("col",{...props(dataTableStyles.column(column.getSize()))},column.id))}),/*#__PURE__*/_jsx(TableHeader,{children:headerGroups.map((group,rowIndex)=>/*#__PURE__*/_jsx(DataTableHeaderGroup,{group:group,primarySortId:source.state.sorting?.[0]?.id,rowIndex:rowIndex,table:source,virtualized:Boolean(virtualized)},group.id))}),/*#__PURE__*/_jsx(TableBody,{children:rows.length===0?/*#__PURE__*/_jsx(TableRow,{children:/*#__PURE__*/_jsx(TableCell,{colSpan:columns.length,children:"No results found."})}):/*#__PURE__*/_jsx(DataTableRows,{bottomPadding:bottomPadding,columnsCount:columns.length,headerCount:headerGroups.length,rows:rows,table:source,topPadding:topPadding,virtualized:Boolean(virtualized),virtualizer:virtualizer,virtualRows:virtualRows})})]})});}function VirtualSpacer({height,columnCount}){return/*#__PURE__*/_jsx(TableRow,{"aria-hidden":"true",children:/*#__PURE__*/_jsx("td",{colSpan:columnCount,...props(dataTableStyles.spacerCell,dataTableStyles.spacerHeight(height))})});}function DataTableRows({columnsCount,headerCount,rows,table:source,virtualized,virtualRows,virtualizer,topPadding,bottomPadding}){const renderedRows=virtualized?virtualRows.map(({index})=>({index,row:rows[index]})):rows.map((row,index)=>({index,row}));return/*#__PURE__*/_jsxs(_Fragment,{children:[virtualized&&topPadding>0?/*#__PURE__*/_jsx(VirtualSpacer,{columnCount:columnsCount,height:topPadding}):null,renderedRows.map(({index,row})=>/*#__PURE__*/_jsx(DataTableBodyRow,{headerCount:headerCount,index:index,measureElement:virtualized?virtualizer.measureElement:undefined,row:row,table:source,virtualized:virtualized},row.id)),virtualized&&bottomPadding>0?/*#__PURE__*/_jsx(VirtualSpacer,{columnCount:columnsCount,height:bottomPadding}):null]});}function DataTableHeaderGroup({group,primarySortId,rowIndex,table:source,virtualized}){return/*#__PURE__*/_jsx(TableRow,{"aria-rowindex":virtualized?rowIndex+1:undefined,children:group.headers.map(header=>/*#__PURE__*/_jsx(DataTableHeaderCell,{header:header,primarySortId:primarySortId,table:source},header.id))});}function DataTableHeaderCell({header,primarySortId,table:source}){const column=header.column;const sorted=column.getIsSorted();const meta=column.columnDef.meta?.mizen;const sortValues={asc:"ascending",desc:"descending"};const ariaSort=column.id===primarySortId&&!header.isPlaceholder&&sorted?sortValues[sorted]:undefined;const resizable=canResize(header);return/*#__PURE__*/_jsxs(TableHead,{"aria-sort":ariaSort,colSpan:header.colSpan,numeric:meta?.numeric,onKeyDown:getResizeKeyHandler(resizable,source,column),sticky:meta?.sticky??meta?.rowHeader,children:[/*#__PURE__*/_jsx(HeaderContent,{column:column,header:header,table:source}),resizable?/*#__PURE__*/_jsx(ColumnResizeHandle,{header:header,table:source}):null]});}function getResizeKeyHandler(resizable,source,column){if(!resizable){return;}return event=>handleResizeKey(event,source,column);}// Shift+Left and Shift+Right resize the focused column; plain arrows still move
+// between cells.
+function handleResizeKey(event,source,column){const direction={ArrowLeft:-1,ArrowRight:1}[event.key];if(!(event.shiftKey&&direction)){return;}event.preventDefault();event.stopPropagation();seedColumnSizing(source,event.currentTarget);resizeBy(source,column,direction*RESIZE_STEP);}// Pointer affordance on the column's trailing edge. Double-click restores the
+// default width.
+function ColumnResizeHandle({header,table:source}){const column=header.column;const onResize=useCallback(event=>{seedColumnSizing(source,event.currentTarget);header.getResizeHandler?.()(event);},[header,source]);const onReset=useCallback(()=>column.resetSize?.(),[column]);return(/*#__PURE__*/// biome-ignore lint/a11y/noStaticElementInteractions: A pointer-only affordance hidden from assistive tech; keyboard users resize with Shift+Left/Right on the header.
+// biome-ignore lint/a11y/noNoninteractiveElementInteractions: Same pointer-only affordance as above.
+_jsx("span",{"aria-hidden":"true","data-resizing":column.getIsResizing?.()||undefined,"data-slot":"data-table-resize-handle",onDoubleClick:onReset,onMouseDown:onResize,onTouchStart:onResize,...props(dataTableStyles.resizeHandle)}));}function HeaderContent({column,header,table:source}){if(header.isPlaceholder){return null;}const label=/*#__PURE__*/_jsx(source.FlexRender,{header:header});const sorted=column.getIsSorted();const SortIcon=sorted?sortIcons[sorted]:null;return column.getCanSort()?/*#__PURE__*/_jsx("span",{...props(dataTableStyles.sortButton),children:/*#__PURE__*/_jsxs(Button,{onClick:column.getToggleSortingHandler(),size:"sm",variant:"ghost",children:[/*#__PURE__*/_jsx("span",{...props(typographyStyles.controlLabel),children:label}),SortIcon?/*#__PURE__*/_jsx(SortIcon,{"aria-hidden":"true",focusable:"false",size:"1em"}):null]})}):label;}function DataTableBodyRow({headerCount,index,measureElement,row,table:source,virtualized}){return/*#__PURE__*/_jsx(TableRow,{"aria-rowindex":virtualized?index+headerCount+1:undefined,"data-index":virtualized?index:undefined,ref:measureElement,children:row.getVisibleCells().map(cell=>/*#__PURE__*/_jsx(DataTableBodyCell,{cell:cell,table:source},cell.id))});}function DataTableBodyCell({cell,table:source}){const meta=cell.column.columnDef.meta?.mizen;return meta?.rowHeader?/*#__PURE__*/_jsx(TableHead,{numeric:meta.numeric,scope:"row",sticky:meta.sticky??true,children:/*#__PURE__*/_jsx(source.FlexRender,{cell:cell})}):/*#__PURE__*/_jsx(TableCell,{numeric:meta?.numeric,sticky:meta?.sticky,children:/*#__PURE__*/_jsx(source.FlexRender,{cell:cell})});}export function DataTablePagination({table:source}){return/*#__PURE__*/_jsx(source.Subscribe,{selector:selectState,children:state=>/*#__PURE__*/_jsx(PaginationControls,{pagination:state.pagination,table:source})});}function PaginationControls({table:source,pagination}){const rowCount=source.getRowCount();const pageCount=source.getPageCount();const start=rowCount===0?0:pagination.pageIndex*pagination.pageSize+1;const end=Math.min((pagination.pageIndex+1)*pagination.pageSize,rowCount);return/*#__PURE__*/_jsxs("div",{"data-slot":"data-table-pagination",...props(dataTableStyles.footer),children:[/*#__PURE__*/_jsx(Text,{"aria-live":"polite",size:"ui",tone:"muted",children:pageCount<0?`Rows on this page: ${source.getRowModel().rows.length}`:`${start}–${end} of ${rowCount} rows`}),/*#__PURE__*/_jsxs("div",{...props(dataTableStyles.controls),children:[/*#__PURE__*/_jsx(Button,{"aria-label":"First page",disabled:!source.getCanPreviousPage(),onClick:source.firstPage,variant:"outline",children:"First"}),/*#__PURE__*/_jsx(Button,{"aria-label":"Previous page",disabled:!source.getCanPreviousPage(),onClick:source.previousPage,variant:"outline",children:"Previous"}),/*#__PURE__*/_jsxs(Text,{"aria-live":"polite",size:"ui",tone:"muted",children:["Page ",pagination.pageIndex+1,pageCount<0?"":` of ${Math.max(1,pageCount)}`]}),/*#__PURE__*/_jsx(Button,{"aria-label":"Next page",disabled:!source.getCanNextPage(),onClick:source.nextPage,variant:"outline",children:"Next"}),/*#__PURE__*/_jsx(Button,{"aria-label":"Last page",disabled:pageCount<0||!source.getCanNextPage(),onClick:source.lastPage,variant:"outline",children:"Last"})]})]});}

package/dist/components/data-table/data-table.styles.js

@@ -0,0 +1 @@
+import{create}from"@stylexjs/stylex";import"../../styles/colors.stylex";import{colors}from"../../styles/colors.stylex";import"../../styles/conditions.stylex";import{conditions}from"../../styles/conditions.stylex";import"../../styles/dimensions.stylex";import{controlSize}from"../../styles/dimensions.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{lineHeight}from"../../styles/typography.stylex";export const dataTableStyles={column:width=>[{kzqmXN:width!=null?"x5lhr3w":width,$$css:true},{"--x-width":(val=>typeof val==="number"?val+"px":val!=null?val:undefined)(width)}],controls:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"x13hh4mm",$$css:true},footer:{kGNEyG:"x6s0dn4",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kcqcaj:"xss6m8b",kOIVth:"xp4ho6d",kjj79g:"x1qughib",$$css:true},resizeHandle:{ks3ayO:"x2g32wa xwxf2ow xyhc2n1",k5JduY:"x1s928wv",kSy8m5:"xd54j2p",kH8aOt:"x1unh1gc",kwXMNM:"x1j6awrg",kkgrvl:"x13694x8",kkrTdU:"xicojor",kYYq5F:"x10no89f",kt4wiu:"xtijo5x",kVAEAm:"x10l6tqk",kFalU9:"x5ve5x3",kfSwDN:"x87ps6o",kzqmXN:"x1xc55vz",kY2c9j:"x1vjfegm",$$css:true},sortButton:{k1xSpc:"x3nfvp2",kqGvvJ:"x4284qm",kUOVxO:"x1sg5gjk",kXLuUW:"x16dsc37",$$css:true},spacerCell:{kMzoRj:"xc342km",kZKoxP:"xqtp20y",k8WAf4:"xt970qd",kg3NbH:"xnjsko4",$$css:true},spacerHeight:height=>[{kZKoxP:height!=null?"x16ye13r":height,kAzted:height!=null?"x82snj4":height,$$css:true},{"--x-height":(val=>typeof val==="number"?val+"px":val!=null?val:undefined)(height),"--x-minHeight":(val=>typeof val==="number"?val+"px":val!=null?val:undefined)(height)}]};

package/dist/components/data-table/grid-navigation.js

@@ -0,0 +1,10 @@
+import{useCallback,useRef}from"react";// WAI-ARIA data grid keyboard model: one tab stop, arrows move between cells,
+// and a cell holding exactly one control hands focus to that control.
+// Widget roles cover Base UI controls rendered on spans; their hidden form
+// inputs are aria-hidden and must never take focus.
+const CONTROLS=["a[href]","button","input","select","textarea",'[role="checkbox"]','[role="switch"]','[role="combobox"]'].map(selector=>`${selector}:not([aria-hidden="true"])`).join(", ");const PAGE_ROWS=10;const TEXT_ENTRY=new Set(["email","number","password","search","tel","text","url"]);function getGridRows(table){return[...table.rows].filter(row=>row.getAttribute("aria-hidden")!=="true");}function getCell(table,{column,row}){const cells=getGridRows(table)[row]?.cells;return cells?.[Math.min(column,(cells?.length??1)-1)];}function getFocusTarget(cell){const controls=cell.querySelectorAll(CONTROLS);return controls.length===1?controls[0]:cell;}function getPosition(table,cell){const row=getGridRows(table).indexOf(cell.parentElement);return{column:cell.cellIndex,row:Math.max(row,0)};}// Text fields and selects keep their own arrow and Home/End keys.
+function ownsArrowKeys(target){if(target instanceof HTMLInputElement){return TEXT_ENTRY.has(target.type);}return target instanceof HTMLTextAreaElement||target instanceof HTMLSelectElement;}function getStep(event){const steps={ArrowDown:{column:0,row:1},ArrowLeft:{column:-1,row:0},ArrowRight:{column:1,row:0},ArrowUp:{column:0,row:-1},PageDown:{column:0,row:PAGE_ROWS},PageUp:{column:0,row:-PAGE_ROWS}};if(event.key==="Home"||event.key==="End"){const edge=event.key==="Home"?"start":"end";return event.ctrlKey||event.metaKey?edge:{column:edge==="start"?Number.NEGATIVE_INFINITY:Number.POSITIVE_INFINITY,row:0};}return steps[event.key]??null;}function resolveTarget(table,from,step){const rows=getGridRows(table);if(step==="start"){return{column:0,row:0};}if(step==="end"){const last=rows.length-1;return{column:(rows[last]?.cells.length??1)-1,row:last};}const row=Math.min(Math.max(from.row+step.row,0),rows.length-1);const width=rows[row]?.cells.length??1;const column=Math.min(Math.max(from.column+step.column,0),width-1);return{column,row};}// Only the active cell (or its single control) is tabbable.
+function syncTabStops(table,active){for(const row of getGridRows(table)){for(const cell of row.cells){cell.tabIndex=-1;for(const control of cell.querySelectorAll(CONTROLS)){control.tabIndex=-1;}}}const cell=getCell(table,active);if(cell){getFocusTarget(cell).tabIndex=0;}}export function useGridNavigation(){const tableRef=useRef(null);const active=useRef({column:0,row:0});// Keep one tab stop as rows, cells, and controls change, including a
+// control that resets its own tabindex on re-render. Our own writes are
+// dropped from the queue so they never retrigger the sync.
+const ref=useCallback(table=>{tableRef.current=table;const sync=()=>{syncTabStops(table,active.current);observer.takeRecords();};const observer=new MutationObserver(sync);observer.observe(table,{attributeFilter:["tabindex"],childList:true,subtree:true});sync();return()=>{observer.disconnect();tableRef.current=null;};},[]);const onFocus=useCallback(event=>{const table=tableRef.current;const cell=event.target.closest?.("td, th");if(!(table&&cell instanceof HTMLTableCellElement)){return;}active.current=getPosition(table,cell);syncTabStops(table,active.current);},[]);const onKeyDown=useCallback(event=>{const table=tableRef.current;const step=getStep(event);if(!(table&&step)||ownsArrowKeys(event.target)){return;}const cell=getCell(table,resolveTarget(table,active.current,step));if(!cell){return;}event.preventDefault();getFocusTarget(cell).focus();cell.scrollIntoView({block:"nearest",inline:"nearest"});},[]);return{onFocus,onKeyDown,ref};}

package/dist/components/date-picker/date-picker-date.js

@@ -0,0 +1 @@
+export function formatIsoDate(date){if(!date){return"";}const year=date.getFullYear();const month=String(date.getMonth()+1).padStart(2,"0");const day=String(date.getDate()).padStart(2,"0");return`${year}-${month}-${day}`;}const ISO_DATE_PATTERN=/^\d{4}-\d{2}-\d{2}$/u;export function parseIsoDate(text){const trimmed=text.trim();if(!ISO_DATE_PATTERN.test(trimmed)){return undefined;}const parts=trimmed.split("-");const year=Number(parts[0]);const month=Number(parts[1]);const day=Number(parts[2]);if(month<1||month>12||day<1||day>31){return undefined;}const date=new Date(year,month-1,day);if(date.getFullYear()!==year||date.getMonth()!==month-1||date.getDate()!==day){return undefined;}date.setHours(0,0,0,0);return date;}export function areDatesEqual(a,b){if(a===undefined&&b===undefined){return true;}if(a===undefined||b===undefined){return false;}return a.getFullYear()===b.getFullYear()&&a.getMonth()===b.getMonth()&&a.getDate()===b.getDate();}export function startOfDay(date){const result=new Date(date);result.setHours(0,0,0,0);return result;}export function isDateConstraintSatisfied(date,constraints){const target=startOfDay(date);if(constraints.minValue){const min=startOfDay(constraints.minValue);if(target.getTime()<min.getTime()){return false;}}if(constraints.maxValue){const max=startOfDay(constraints.maxValue);if(target.getTime()>max.getTime()){return false;}}return!constraints.isDateUnavailable?.(date);}export function validateDateInput(text,constraints){const trimmed=text.trim();if(trimmed===""){return{date:undefined,status:constraints.required?"invalid":"valid"};}const parsed=parseIsoDate(trimmed);if(!parsed){return{date:undefined,status:"invalid"};}if(!isDateConstraintSatisfied(parsed,constraints)){return{date:undefined,status:"invalid"};}return{date:parsed,status:"valid"};}export function getDateInputValidationMessage(text,constraints){return text!==""&&validateDateInput(text,constraints).status==="invalid"?"Enter a valid date within the allowed range.":"";}

package/dist/components/date-picker/date-picker-icon.js

@@ -0,0 +1 @@
+import{IconCalendar}from"../../icons";import{jsx as _jsx}from"react/jsx-runtime";export function CalendarIcon(){return/*#__PURE__*/_jsx(IconCalendar,{"aria-hidden":"true",focusable:"false",size:"16"});}

package/dist/components/date-picker/date-picker-state.js

@@ -0,0 +1 @@
+import{useCallback,useState}from"react";import{areDatesEqual,getDateInputValidationMessage,isDateConstraintSatisfied,validateDateInput}from"./date-picker-date";export function useDatePickerDraft({committedText,committedValue,constraints,disabled,isControlled,onValueChange,readOnly,setIsOpen,setUncontrolledValue}){const[isFocused,setIsFocused]=useState(false);const[focusedDraft,setFocusedDraft]=useState(null);const[invalidState,setInvalidState]=useState(null);const isInvalidActive=invalidState!==null&&invalidState.baseKey===committedText;let displayText=committedText;if(isFocused){displayText=focusedDraft??(isInvalidActive?invalidState.text:committedText);}else if(isInvalidActive){displayText=invalidState.text;}const commitCandidate=useCallback(nextDate=>{if(!isControlled){setUncontrolledValue(nextDate);}setInvalidState(null);setFocusedDraft(null);onValueChange?.(nextDate);},[isControlled,onValueChange,setUncontrolledValue]);const handleDraftReset=useCallback(()=>{setIsFocused(false);setFocusedDraft(null);setInvalidState(null);},[]);const handleInputChange=useCallback(event=>{if(readOnly||disabled){return;}event.currentTarget.setCustomValidity(getDateInputValidationMessage(event.currentTarget.value,constraints));setInvalidState(null);setFocusedDraft(event.target.value);},[constraints,disabled,readOnly]);const handleInputFocus=useCallback(()=>{if(disabled){return;}setIsFocused(true);},[disabled]);const handleInputBlur=useCallback(event=>{setIsFocused(false);if(readOnly||disabled){return;}const currentDraft=focusedDraft??event.target.value;setFocusedDraft(null);const result=validateDateInput(currentDraft,constraints);event.currentTarget.setCustomValidity(getDateInputValidationMessage(currentDraft,constraints));if(result.status==="valid"){setInvalidState(null);if(!areDatesEqual(committedValue,result.date)){commitCandidate(result.date);}}else{setInvalidState({baseKey:committedText,text:currentDraft});}},[commitCandidate,committedText,committedValue,constraints,disabled,focusedDraft,readOnly]);const handleInputKeyDown=useCallback(event=>{if(disabled||readOnly){return;}if(event.key==="Enter"){const currentDraft=focusedDraft??event.currentTarget.value;const result=validateDateInput(currentDraft,constraints);event.currentTarget.setCustomValidity(getDateInputValidationMessage(currentDraft,constraints));if(result.status==="valid"){commitCandidate(result.date);}else{setInvalidState({baseKey:committedText,text:currentDraft});event.preventDefault();}}else if(event.key==="Escape"){event.currentTarget.setCustomValidity(getDateInputValidationMessage(committedText,constraints));setFocusedDraft(null);setInvalidState(null);}},[commitCandidate,committedText,constraints,disabled,focusedDraft,readOnly]);const handleCalendarSelect=useCallback(selectedDate=>{if(readOnly||disabled){return;}if(selectedDate&&!isDateConstraintSatisfied(selectedDate,constraints)){return;}commitCandidate(selectedDate);setIsOpen(false);},[commitCandidate,constraints,disabled,readOnly,setIsOpen]);const isLocalInvalid=isInvalidActive;return{displayText,handleCalendarSelect,handleDraftReset,handleInputBlur,handleInputChange,handleInputFocus,handleInputKeyDown,isLocalInvalid};}

package/dist/components/date-picker/date-picker.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from "react";
+import type { DatePickerProps } from "./date-picker.types";
+export type { DatePickerProps } from "./date-picker.types";
+export declare function DatePicker(datePickerProps: DatePickerProps): ReactElement;

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1 @@
+"use client";import{props}from"@stylexjs/stylex";import{useCallback,useId,useMemo,useRef,useState}from"react";import{assignRef}from"../../ref-utils";import{Calendar}from"../calendar/calendar";import{BoundFieldProvider}from"../field/field-context";import{InputGroup,InputGroupAddon,InputGroupInput}from"../input-group/input-group";import{Popover,PopoverPopup,PopoverTrigger}from"../popover/popover";import{datePickerStyles}from"./date-picker.styles";import{formatIsoDate,getDateInputValidationMessage}from"./date-picker-date";import{CalendarIcon}from"./date-picker-icon";import{useDatePickerDraft}from"./date-picker-state";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function DatePicker(datePickerProps){const[isControlled]=useState(()=>Object.hasOwn(datePickerProps,"value"));const[uncontrolledValue,setUncontrolledValue]=useState(datePickerProps.defaultValue);const initialValue=useRef(datePickerProps.defaultValue);const committedValue=isControlled?datePickerProps.value:uncontrolledValue;const{"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,autoFocus,captionLayout,dir,disabled=false,endMonth,id:providedId,invalid:externalInvalid,isDateUnavailable,locale,maxValue,minValue,name,onValueChange,readOnly=false,ref:forwardedInputRef,required,size="default",startMonth,weekStartsOn}=datePickerProps;const generatedId=useId();const inputId=providedId??generatedId;const committedText=useMemo(()=>formatIsoDate(committedValue),[committedValue]);const groupRef=useRef(null);const[isOpen,setIsOpen]=useState(false);const constraints=useMemo(()=>({isDateUnavailable,maxValue,minValue,required}),[isDateUnavailable,maxValue,minValue,required]);const{displayText,handleCalendarSelect,handleDraftReset,handleInputBlur,handleInputChange,handleInputFocus,handleInputKeyDown,isLocalInvalid}=useDatePickerDraft({committedText,committedValue,constraints,disabled,isControlled,onValueChange,readOnly,setIsOpen,setUncontrolledValue});const isEffectivelyInvalid=Boolean(externalInvalid||isLocalInvalid);const setInputRef=useCallback(node=>{if(!node){return assignRef(forwardedInputRef,node);}node.setCustomValidity(disabled||readOnly?"":getDateInputValidationMessage(displayText,constraints));const{form}=node;const handleFormReset=event=>{queueMicrotask(()=>{if(event.defaultPrevented||isControlled){return;}setUncontrolledValue(initialValue.current);setIsOpen(false);handleDraftReset();});};if(!isControlled){form?.addEventListener("reset",handleFormReset);}const cleanupRef=assignRef(forwardedInputRef,node);return()=>{form?.removeEventListener("reset",handleFormReset);cleanupRef?.();};},[constraints,disabled,displayText,forwardedInputRef,handleDraftReset,isControlled,readOnly]);return/*#__PURE__*/_jsxs(Popover,{onOpenChange:setIsOpen,open:isOpen,children:[/*#__PURE__*/_jsx(BoundFieldProvider,{value:null,children:/*#__PURE__*/_jsxs(InputGroup,{ref:groupRef,children:[/*#__PURE__*/_jsx(InputGroupInput,{"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,autoFocus:autoFocus,disabled:disabled,id:inputId,invalid:isEffectivelyInvalid,name:name,onBlur:handleInputBlur,onChange:handleInputChange,onFocus:handleInputFocus,onKeyDown:handleInputKeyDown,placeholder:"YYYY-MM-DD",readOnly:readOnly,ref:setInputRef,required:required,size:size,value:displayText}),/*#__PURE__*/_jsx(InputGroupAddon,{align:"inline-end",children:/*#__PURE__*/_jsx(PopoverTrigger,{"aria-label":"Open calendar",disabled:disabled,...props(datePickerStyles.triggerButton,disabled&&datePickerStyles.triggerButtonDisabled),children:/*#__PURE__*/_jsx("span",{...props(datePickerStyles.triggerIcon),children:/*#__PURE__*/_jsx(CalendarIcon,{})})})})]})}),/*#__PURE__*/_jsx(PopoverPopup,{align:"start",anchor:groupRef,"aria-label":ariaLabel??"Date picker calendar dialog",variant:"bare",children:/*#__PURE__*/_jsx(Calendar,{"aria-label":ariaLabel??"Date picker calendar",autoFocus:true,captionLayout:captionLayout,defaultMonth:committedValue,dir:dir,disabled:disabled,endMonth:endMonth,isDateUnavailable:isDateUnavailable,locale:locale,maxValue:maxValue,minValue:minValue,mode:"single",onValueChange:handleCalendarSelect,readOnly:readOnly,required:required,startMonth:startMonth,value:committedValue,weekStartsOn:weekStartsOn})})]});}

package/dist/components/date-picker/date-picker.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";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";export const datePickerStyles={triggerButton:{kGNEyG:"x6s0dn4",k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kWkggS:"xkz2hrh xjbqb8w",kVAM5u:"x9r1u3d",kaIpWk:"x2b34ud",ksu8eU:"xng3xce",kMwMTN:"x14tvo57",kkrTdU:"x1ypdohk",k1xSpc:"x3nfvp2",kZKoxP:"x5yr21d",kjj79g:"xl56j7k",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1w1ofmy",k3XXqK:"xzc55om",kMeerF:"x1vhx2qj",kmVPX3:"xlxy37g",$$css:true},triggerButtonDisabled:{kkrTdU:"x1h6gzvc",$$css:true},triggerIcon:{k1xSpc:"x3nfvp2",kmuXW:"x2lah0s",kLWn49:"x14ju556",$$css:true}};

package/dist/components/date-picker/date-picker.types.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentPropsWithRef } from "react";
+import type { CalendarCommonProps, CalendarLocale } from "../calendar/calendar.types";
+export interface DatePickerProps {
+    readonly "aria-describedby"?: string | undefined;
+    readonly "aria-label"?: string | undefined;
+    readonly "aria-labelledby"?: string | undefined;
+    autoFocus?: boolean | undefined;
+    captionLayout?: CalendarCommonProps["captionLayout"];
+    defaultValue?: Date | undefined;
+    dir?: "ltr" | "rtl" | undefined;
+    disabled?: boolean | undefined;
+    endMonth?: Date | undefined;
+    id?: string | undefined;
+    invalid?: boolean | undefined;
+    isDateUnavailable?: ((date: Date) => boolean) | undefined;
+    locale?: CalendarLocale | undefined;
+    maxValue?: Date | undefined;
+    minValue?: Date | undefined;
+    name?: string | undefined;
+    onValueChange?: ((value: Date | undefined) => void) | undefined;
+    readOnly?: boolean | undefined;
+    ref?: ComponentPropsWithRef<"input">["ref"] | undefined;
+    required?: boolean | undefined;
+    size?: "default" | "lg" | "sm" | undefined;
+    startMonth?: Date | undefined;
+    value?: Date | undefined;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+}

package/dist/components/date-picker/date-picker.types.js

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

package/dist/components/date-range-picker/date-range-picker-date.js

@@ -0,0 +1 @@
+import{areDatesEqual,formatIsoDate,isDateConstraintSatisfied,parseIsoDate,startOfDay}from"../date-picker/date-picker-date";export function formatIsoRange(range){if(!range?.from){return"";}const fromText=formatIsoDate(range.from);if(!range.to){return fromText;}return`${fromText} – ${formatIsoDate(range.to)}`;}export function countNights(from,to){const utcFrom=Date.UTC(from.getFullYear(),from.getMonth(),from.getDate());const utcTo=Date.UTC(to.getFullYear(),to.getMonth(),to.getDate());const diffDays=Math.round((utcTo-utcFrom)/(1000*60*60*24));return Math.max(0,diffDays);}const RANGE_SEPARATOR_REGEX=/\s+[–—-]\s+|[–—]|\/|\s+(?:to)\s+/iu;export function parseIsoRange(text){const trimmed=text.trim();if(trimmed===""){return undefined;}const separatorMatch=RANGE_SEPARATOR_REGEX.exec(trimmed);if(!separatorMatch){const single=parseIsoDate(trimmed);return single?{from:single}:undefined;}const[separator]=separatorMatch;const{index}=separatorMatch;const firstPart=trimmed.slice(0,index).trim();const secondPart=trimmed.slice(index+separator.length).trim();if(firstPart===""||secondPart===""){return undefined;}const from=parseIsoDate(firstPart);const to=parseIsoDate(secondPart);if(!(from&&to)){return undefined;}if(startOfDay(to).getTime()<startOfDay(from).getTime()){return undefined;}return{from,to};}export function areRangesEqual(a,b){if(a===undefined&&b===undefined){return true;}if(a===undefined||b===undefined){return false;}return areDatesEqual(a.from,b.from)&&areDatesEqual(a.to,b.to);}function areRangeDaysAvailable(from,to,isUnavailable){const current=startOfDay(from);const end=startOfDay(to);while(current.getTime()<=end.getTime()){if(isUnavailable(current)){return false;}current.setDate(current.getDate()+1);}return true;}function areNightsWithinLimits(nights,minNights,maxNights){if(minNights!==undefined&&nights<minNights){return false;}return!(maxNights!==undefined&&nights>maxNights);}export function isRangeConstraintSatisfied(range,constraints){if(!isDateConstraintSatisfied(range.from,constraints)){return false;}if(!range.to){return true;}if(startOfDay(range.to).getTime()<startOfDay(range.from).getTime()){return false;}if(!isDateConstraintSatisfied(range.to,constraints)){return false;}const nights=countNights(range.from,range.to);if(!areNightsWithinLimits(nights,constraints.minNights,constraints.maxNights)){return false;}if(constraints.isDateUnavailable){return areRangeDaysAvailable(range.from,range.to,constraints.isDateUnavailable);}return true;}export function validateRangeInput(text,constraints){const trimmed=text.trim();if(trimmed===""){return{range:undefined,status:constraints.required?"invalid":"valid"};}const parsed=parseIsoRange(trimmed);if(!parsed){return{range:undefined,status:"invalid"};}if(!(parsed.to&&isRangeConstraintSatisfied(parsed,constraints))){return{range:undefined,status:"invalid"};}return{range:parsed,status:"valid"};}export function getRangeInputValidationMessage(text,constraints){return text!==""&&validateRangeInput(text,constraints).status==="invalid"?"Enter a valid date range within the allowed limits.":"";}

package/dist/components/date-range-picker/date-range-picker-state.js

@@ -0,0 +1 @@
+import{useCallback,useState}from"react";import{areRangesEqual,formatIsoRange,getRangeInputValidationMessage,isRangeConstraintSatisfied,validateRangeInput}from"./date-range-picker-date";function getNextCalendarCommit(selectedRange){if(!selectedRange){return{isComplete:false,nextVal:undefined};}const isComplete=selectedRange.to!==undefined;return{isComplete,nextVal:isComplete?selectedRange:{from:selectedRange.from}};}export function useDateRangePickerDraft({committedText,committedValue,constraints,disabled,isControlled,onValueChange,readOnly,setIsOpen,setUncontrolledValue}){const[isFocused,setIsFocused]=useState(false);const[focusedDraft,setFocusedDraft]=useState(null);const[invalidState,setInvalidState]=useState(null);const isInvalidActive=invalidState!==null&&invalidState.baseKey===committedText;const handleDraftReset=useCallback(()=>{setIsFocused(false);setFocusedDraft(null);setInvalidState(null);},[]);let displayText=committedText;if(isFocused){displayText=focusedDraft??(isInvalidActive?invalidState.text:committedText);}else if(isInvalidActive){displayText=invalidState.text;}const commitCandidate=useCallback(nextRange=>{setInvalidState(null);setFocusedDraft(null);if(areRangesEqual(committedValue,nextRange)){return;}if(!isControlled){setUncontrolledValue(nextRange);}onValueChange?.(nextRange);},[committedValue,isControlled,onValueChange,setUncontrolledValue]);const handleInputChange=useCallback(event=>{if(readOnly||disabled){return;}event.currentTarget.setCustomValidity(getRangeInputValidationMessage(event.currentTarget.value,constraints));setInvalidState(null);setFocusedDraft(event.target.value);},[constraints,disabled,readOnly]);const handleInputFocus=useCallback(()=>{if(disabled){return;}setIsFocused(true);},[disabled]);const handleInputBlur=useCallback(event=>{setIsFocused(false);if(readOnly||disabled){return;}const currentDraft=focusedDraft??event.target.value;setFocusedDraft(null);const result=validateRangeInput(currentDraft,constraints);event.currentTarget.setCustomValidity(getRangeInputValidationMessage(currentDraft,constraints));if(result.status==="valid"){setInvalidState(null);if(!areRangesEqual(committedValue,result.range)){commitCandidate(result.range);}}else{setInvalidState({baseKey:committedText,text:currentDraft});}},[commitCandidate,committedText,committedValue,constraints,disabled,focusedDraft,readOnly]);const handleInputKeyDown=useCallback(event=>{if(disabled||readOnly){return;}if(event.key==="Enter"){const currentDraft=focusedDraft??event.currentTarget.value;const result=validateRangeInput(currentDraft,constraints);event.currentTarget.setCustomValidity(getRangeInputValidationMessage(currentDraft,constraints));if(result.status==="valid"){commitCandidate(result.range);}else{setInvalidState({baseKey:committedText,text:currentDraft});event.preventDefault();}}else if(event.key==="Escape"){event.currentTarget.setCustomValidity(getRangeInputValidationMessage(committedText,constraints));setFocusedDraft(null);setInvalidState(null);setIsOpen(false);}},[commitCandidate,committedText,constraints,disabled,focusedDraft,readOnly,setIsOpen]);const handleCalendarSelect=useCallback(selectedRange=>{if(readOnly||disabled){return;}if(selectedRange&&!isRangeConstraintSatisfied(selectedRange,constraints)){return;}const{isComplete,nextVal}=getNextCalendarCommit(selectedRange);commitCandidate(nextVal);if(isComplete){setIsOpen(false);}},[commitCandidate,constraints,disabled,readOnly,setIsOpen]);const handlePresetSelect=useCallback(presetRange=>{if(readOnly||disabled){return;}if(!isRangeConstraintSatisfied(presetRange,constraints)){return;}commitCandidate(presetRange);setIsOpen(false);},[commitCandidate,constraints,disabled,readOnly,setIsOpen]);const isLocalInvalid=isInvalidActive;return{displayText:isFocused||isInvalidActive?displayText:formatIsoRange(committedValue),handleCalendarSelect,handleDraftReset,handleInputBlur,handleInputChange,handleInputFocus,handleInputKeyDown,handlePresetSelect,isLocalInvalid};}

package/dist/components/date-range-picker/date-range-picker-views.js

@@ -0,0 +1 @@
+import{props}from"@stylexjs/stylex";import{useCallback}from"react";import{Calendar}from"../calendar/calendar";import{dateRangePickerStyles}from"./date-range-picker.styles";import{isRangeConstraintSatisfied}from"./date-range-picker-date";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function DateRangePresetButton({disabled,label,onSelect,value}){const handleClick=useCallback(()=>{onSelect(value);},[onSelect,value]);return/*#__PURE__*/_jsx("button",{disabled:disabled,onClick:handleClick,type:"button",...props(dateRangePickerStyles.presetButton,disabled&&dateRangePickerStyles.presetButtonDisabled),children:label});}function DateRangePresetsList({constraints,disabled,onSelect,presets,readOnly}){if(!presets||presets.length===0){return null;}return/*#__PURE__*/_jsx("div",{...props(dateRangePickerStyles.presetsRow),children:presets.map(preset=>{const isPresetValid=isRangeConstraintSatisfied(preset.value,constraints);const isBtnDisabled=disabled||readOnly||!isPresetValid;return/*#__PURE__*/_jsx(DateRangePresetButton,{disabled:isBtnDisabled,label:preset.label,onSelect:onSelect,value:preset.value},preset.label);})});}export function DateRangeCalendarView({committedValue,constraints,disabled,onCalendarSelect,onPresetSelect,props:calendarViewProps,readOnly}){return/*#__PURE__*/_jsxs("div",{...props(dateRangePickerStyles.popupContainer),children:[/*#__PURE__*/_jsx(DateRangePresetsList,{constraints:constraints,disabled:disabled,onSelect:onPresetSelect,presets:calendarViewProps.presets,readOnly:readOnly}),/*#__PURE__*/_jsx(Calendar,{"aria-label":calendarViewProps["aria-label"]??"Date range picker calendar",autoFocus:true,captionLayout:calendarViewProps.captionLayout,defaultMonth:committedValue?.from,dir:calendarViewProps.dir,disabled:disabled,endMonth:calendarViewProps.endMonth,isDateUnavailable:calendarViewProps.isDateUnavailable,locale:calendarViewProps.locale,maxNights:calendarViewProps.maxNights,maxValue:calendarViewProps.maxValue,minNights:calendarViewProps.minNights??0,minValue:calendarViewProps.minValue,mode:"range",onValueChange:onCalendarSelect,readOnly:readOnly,required:calendarViewProps.required,resetOnSelect:true,startMonth:calendarViewProps.startMonth,value:committedValue,variant:"embedded",weekStartsOn:calendarViewProps.weekStartsOn})]});}

package/dist/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from "react";
+import type { DateRangePickerProps } from "./date-range-picker.types";
+export type { DateRangePickerProps, DateRangePreset, } from "./date-range-picker.types";
+export declare function DateRangePicker(dateRangePickerProps: DateRangePickerProps): ReactElement;

package/dist/components/date-range-picker/date-range-picker.js

@@ -0,0 +1 @@
+"use client";import{props}from"@stylexjs/stylex";import{useCallback,useId,useMemo,useRef,useState}from"react";import{assignRef}from"../../ref-utils";import{datePickerStyles}from"../date-picker/date-picker.styles";import{CalendarIcon}from"../date-picker/date-picker-icon";import{BoundFieldProvider}from"../field/field-context";import{InputGroup,InputGroupAddon,InputGroupInput}from"../input-group/input-group";import{Popover,PopoverPopup,PopoverTrigger}from"../popover/popover";import{formatIsoRange,getRangeInputValidationMessage}from"./date-range-picker-date";import{useDateRangePickerDraft}from"./date-range-picker-state";import{DateRangeCalendarView}from"./date-range-picker-views";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function DateRangePicker(dateRangePickerProps){const[isControlled]=useState(()=>Object.hasOwn(dateRangePickerProps,"value"));const[uncontrolledValue,setUncontrolledValue]=useState(dateRangePickerProps.defaultValue);const initialValue=useRef(dateRangePickerProps.defaultValue);const committedValue=isControlled?dateRangePickerProps.value:uncontrolledValue;const generatedId=useId();const inputId=dateRangePickerProps.id??generatedId;const committedText=useMemo(()=>formatIsoRange(committedValue),[committedValue]);const groupRef=useRef(null);const[isOpen,setIsOpen]=useState(false);const constraints=useMemo(()=>({isDateUnavailable:dateRangePickerProps.isDateUnavailable,maxNights:dateRangePickerProps.maxNights,maxValue:dateRangePickerProps.maxValue,minNights:dateRangePickerProps.minNights,minValue:dateRangePickerProps.minValue,required:dateRangePickerProps.required}),[dateRangePickerProps.isDateUnavailable,dateRangePickerProps.maxNights,dateRangePickerProps.maxValue,dateRangePickerProps.minNights,dateRangePickerProps.minValue,dateRangePickerProps.required]);const{displayText,handleCalendarSelect,handleInputBlur,handleInputChange,handleInputFocus,handleInputKeyDown,handlePresetSelect,handleDraftReset,isLocalInvalid}=useDateRangePickerDraft({committedText,committedValue,constraints,disabled:dateRangePickerProps.disabled??false,isControlled,onValueChange:dateRangePickerProps.onValueChange,readOnly:dateRangePickerProps.readOnly??false,setIsOpen,setUncontrolledValue});const isEffectivelyInvalid=Boolean(dateRangePickerProps.invalid||isLocalInvalid);const resolvedDisabled=Boolean(dateRangePickerProps.disabled);const resolvedReadOnly=Boolean(dateRangePickerProps.readOnly);const size=dateRangePickerProps.size??"default";const setInputRef=useCallback(node=>{if(!node){return assignRef(dateRangePickerProps.ref,node);}node.setCustomValidity(resolvedDisabled||resolvedReadOnly?"":getRangeInputValidationMessage(displayText,constraints));const{form}=node;const handleFormReset=event=>{queueMicrotask(()=>{if(event.defaultPrevented){return;}setUncontrolledValue(initialValue.current);setIsOpen(false);handleDraftReset();});};if(form&&!isControlled){form.addEventListener("reset",handleFormReset);}const cleanupRef=assignRef(dateRangePickerProps.ref,node);return()=>{if(form&&!isControlled){form.removeEventListener("reset",handleFormReset);}cleanupRef?.();};},[constraints,dateRangePickerProps.ref,displayText,handleDraftReset,isControlled,resolvedDisabled,resolvedReadOnly]);return/*#__PURE__*/_jsxs(Popover,{onOpenChange:setIsOpen,open:isOpen,children:[/*#__PURE__*/_jsx(BoundFieldProvider,{value:null,children:/*#__PURE__*/_jsxs(InputGroup,{ref:groupRef,children:[/*#__PURE__*/_jsx(InputGroupInput,{"aria-describedby":dateRangePickerProps["aria-describedby"],"aria-label":dateRangePickerProps["aria-label"],"aria-labelledby":dateRangePickerProps["aria-labelledby"],autoFocus:dateRangePickerProps.autoFocus,disabled:resolvedDisabled,id:inputId,invalid:isEffectivelyInvalid,name:dateRangePickerProps.name,onBlur:handleInputBlur,onChange:handleInputChange,onFocus:handleInputFocus,onKeyDown:handleInputKeyDown,placeholder:"YYYY-MM-DD – YYYY-MM-DD",readOnly:resolvedReadOnly,ref:setInputRef,required:dateRangePickerProps.required,size:size,value:displayText}),/*#__PURE__*/_jsx(InputGroupAddon,{align:"inline-end",children:/*#__PURE__*/_jsx(PopoverTrigger,{"aria-label":"Open calendar",disabled:resolvedDisabled,...props(datePickerStyles.triggerButton,resolvedDisabled&&datePickerStyles.triggerButtonDisabled),children:/*#__PURE__*/_jsx("span",{...props(datePickerStyles.triggerIcon),children:/*#__PURE__*/_jsx(CalendarIcon,{})})})})]})}),/*#__PURE__*/_jsx(PopoverPopup,{align:"start",anchor:groupRef,"aria-label":dateRangePickerProps["aria-label"]??"Date range picker calendar dialog",variant:"bare",children:/*#__PURE__*/_jsx(DateRangeCalendarView,{committedValue:committedValue,constraints:constraints,disabled:resolvedDisabled,onCalendarSelect:handleCalendarSelect,onPresetSelect:handlePresetSelect,props:dateRangePickerProps,readOnly:resolvedReadOnly})})]});}

package/dist/components/date-range-picker/date-range-picker.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/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 dateRangePickerStyles={popupContainer:{kWkggS:"xui3q9s",kVAM5u:"x155xxfk",kaIpWk:"x1yl01a3",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kB7OPa:"x9f619",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",ks0D6T:"x16xn7b0",kVQacm:"xb3r6kr",$$css:true},presetButton:{kGNEyG:"x6s0dn4",k44tkh:"x1iha7go",kKVMdj:"x1b5t0b2",kWkggS:"xkz2hrh xjbqb8w",kVAM5u:"x155xxfk",kaIpWk:"x2b34ud",ksu8eU:"x1y0btm7",kMzoRj:"x1cdonsl",kMwMTN:"x14tvo57",kkrTdU:"x1ypdohk",k1xSpc:"x3nfvp2",kGuDYH:"x12ama9c",k63SB2:"x1lo1l87",kLWn49:"x1rn0pvf",kjBf7l:"x4dprnk x1uczgqu",kInvED:"x1w1ofmy",k3XXqK:"xzc55om",kMeerF:"x1vhx2qj",k8WAf4:"x1lmimt7",kg3NbH:"xdbhxi8",khDVqt:"xuxw1ft",$$css:true},presetButtonDisabled:{kkrTdU:"x1h6gzvc",kSiTet:"xd57v9i",$$css:true},presetsRow:{kL6WhQ:"x9rbyu3",kfdmCh:"x1q0q8m5",kt9PQ7:"x13k63ub",k1xSpc:"x78zum5",kwnvtZ:"x1a02dak",kOIVth:"x13hh4mm",kmVPX3:"xh23c4d",$$css:true}};

package/dist/components/date-range-picker/date-range-picker.types.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithRef } from "react";
+import type { CalendarCommonProps, CalendarLocale, CalendarRangeValue } from "../calendar/calendar.types";
+export interface DateRangePreset {
+    readonly label: string;
+    readonly value: CalendarRangeValue & {
+        readonly to: Date;
+    };
+}
+export interface DateRangePickerProps {
+    readonly "aria-describedby"?: string | undefined;
+    readonly "aria-label"?: string | undefined;
+    readonly "aria-labelledby"?: string | undefined;
+    autoFocus?: boolean | undefined;
+    captionLayout?: CalendarCommonProps["captionLayout"];
+    defaultValue?: CalendarRangeValue | undefined;
+    dir?: "ltr" | "rtl" | undefined;
+    disabled?: boolean | undefined;
+    endMonth?: Date | undefined;
+    id?: string | undefined;
+    invalid?: boolean | undefined;
+    isDateUnavailable?: ((date: Date) => boolean) | undefined;
+    locale?: CalendarLocale | undefined;
+    maxNights?: number | undefined;
+    maxValue?: Date | undefined;
+    minNights?: number | undefined;
+    minValue?: Date | undefined;
+    name?: string | undefined;
+    onValueChange?: ((value: CalendarRangeValue | undefined) => void) | undefined;
+    presets?: readonly DateRangePreset[] | undefined;
+    readOnly?: boolean | undefined;
+    ref?: ComponentPropsWithRef<"input">["ref"] | undefined;
+    required?: boolean | undefined;
+    size?: "default" | "lg" | "sm" | undefined;
+    startMonth?: Date | undefined;
+    value?: CalendarRangeValue | undefined;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+}

package/dist/components/date-range-picker/date-range-picker.types.js

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

package/dist/components/date-time-input/date-time-input.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import type { InputProps } from "../input/input";
+export type DateTimeInputProps = Omit<InputProps, "data-slot" | "defaultValue" | "max" | "min" | "render" | "type" | "unstyled" | "value"> & {
+    "data-slot"?: never;
+    defaultValue?: string;
+    max?: string;
+    min?: string;
+    render?: never;
+    type?: never;
+    unstyled?: never;
+    value?: string;
+};
+export declare function DateTimeInput(props: DateTimeInputProps): ReactElement;

package/dist/components/date-time-input/date-time-input.js

@@ -0,0 +1 @@
+"use client";import{Input}from"../input/input";import{jsx as _jsx}from"react/jsx-runtime";export function DateTimeInput(props){return/*#__PURE__*/_jsx(Input,{...props,"data-slot":"date-time-input",type:"datetime-local"});}

package/dist/components/diagram/diagram-renderer.js

@@ -0,0 +1,5 @@
+const ZOOM_LABELS={reset:"Fit diagram",zoomIn:"Zoom in",zoomOut:"Zoom out"};/**
+ * Loads only the grammar the source uses, then mounts it. Every Mermaid type
+ * Pele renders works; cancelled mounts never touch detached DOM.
+ */export async function mountDiagram(element,source,options,signal){const{detectType,load,mount}=await import("pele/lazy");const supported=await load(detectType(source));if(signal.aborted){return;}if(!supported){throw new Error("This diagram type isn't supported.");}return mount(element,source,{...options,fontSize:Number.parseFloat(getComputedStyle(element).fontSize),images:false,links:false,// Fits the container; large diagrams get pinch, Ctrl+scroll, and + or −.
+zoom:{labels:ZOOM_LABELS}});}

package/dist/components/diagram/diagram.css

@@ -0,0 +1,51 @@
+/* Pele owns the SVG DOM. Center diagrams narrower than their container. */
+[data-slot="diagram-canvas"] > svg {
+	display: block;
+	margin-inline: auto;
+}
+
+/* Pele styles its zoom controls inline; match Mizen's quiet floating toolbar.
+   They appear on hover or keyboard focus so they never cover the diagram at
+   rest; touch screens zoom with a pinch, so the buttons stay hidden there. */
+[data-slot="diagram-canvas"] .pele-zoom {
+	padding: 3px !important;
+	border-color: color-mix(in oklch, var(--pele-fg) 12%, transparent) !important;
+	border-radius: 10px !important;
+	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
+	opacity: 0;
+	transition: opacity 140ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+[data-slot="diagram-canvas"] .pele-zoom button {
+	width: 26px !important;
+	height: 26px !important;
+	color: var(--pele-muted) !important;
+	border-radius: 7px !important;
+}
+[data-slot="diagram-canvas"]:focus-within .pele-zoom {
+	opacity: 1;
+}
+@media (hover: none) {
+	[data-slot="diagram-canvas"] .pele-zoom {
+		display: none !important;
+	}
+}
+@media (hover: hover) {
+	[data-slot="diagram-canvas"]:hover .pele-zoom {
+		opacity: 1;
+	}
+	[data-slot="diagram-canvas"] .pele-zoom button:hover:not(:disabled) {
+		color: var(--pele-fg) !important;
+		background: color-mix(in oklch, var(--pele-fg) 8%, transparent) !important;
+	}
+}
+[data-slot="diagram-canvas"] .pele-zoom button:focus-visible {
+	outline: 3px solid var(--pele-accent);
+	outline-offset: 1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	[data-slot="diagram-canvas"] * {
+		transition: none !important;
+		animation: none !important;
+	}
+}

package/dist/components/diagram/diagram.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import "./diagram.css";
+export type DiagramState = "loading" | "ready" | "error";
+export type DiagramProps = Omit<Closed<ComponentPropsWithRef<"figure">>, "aria-label" | "children" | "dangerouslySetInnerHTML" | "data-slot" | "role"> & {
+    "aria-label": string;
+    caption?: ReactNode;
+    source: string;
+    status?: DiagramState;
+};
+export declare function Diagram({ "aria-label": label, caption, source, status, ref, ...rest }: DiagramProps): import("react").JSX.Element;

package/dist/components/diagram/diagram.js

@@ -0,0 +1,4 @@
+"use client";import{props}from"@stylexjs/stylex";import{useCallback,useId,useState}from"react";import{typeRoles}from"../../styles/typography.styles";import{Spinner}from"../spinner/spinner";import{diagramStyles}from"./diagram.styles";import{mountDiagram}from"./diagram-renderer";import"./diagram.css";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";// Pele's PeleError carries the line, column, and a snippet with a caret.
+function toDiagramError(error){if(!(error instanceof Error)){return{message:"The diagram could not be rendered.",snippet:""};}const{column=0,line=0,snippet=""}=error;const message=line>0?`Line ${line}, column ${column}`:error.message.split("\n")[0]??error.message;return{message,snippet};}function Feedback({error,message,status}){return/*#__PURE__*/_jsxs("div",{"data-slot":"diagram-feedback",role:status==="error"?"alert":"status",...props(typeRoles.ui,diagramStyles.feedback),children:[status==="loading"&&/*#__PURE__*/_jsx(Spinner,{"aria-hidden":"true"}),/*#__PURE__*/_jsx("p",{...props(diagramStyles.feedbackTitle,status==="error"&&diagramStyles.error),children:message}),error?/*#__PURE__*/_jsx("p",{...props(diagramStyles.feedbackDetail),children:error.message}):null,error?.snippet?/*#__PURE__*/_jsx("pre",{...props(typeRoles.mono,diagramStyles.snippet),children:error.snippet}):null]});}function DiagramCanvas({source}){const prefix=useId().replace(/[^A-Za-z0-9_-]/gu,"");const[state,setState]=useState({status:"loading"});const attach=useCallback(element=>{if(!element){return;}const controller=new AbortController();let view;const onRender=()=>{if(!controller.signal.aborted){setState(current=>current.status==="ready"?current:{status:"ready"});}};const onError=error=>{if(!controller.signal.aborted){setState({error:toDiagramError(error),status:"error"});}};mountDiagram(element,source,{idPrefix:`mizen-diagram-${prefix}`,onError,onRender},controller.signal).then(mounted=>{if(controller.signal.aborted){mounted?.destroy();}else{view=mounted;}}).catch(onError);return()=>{controller.abort();view?.destroy();};},[source,prefix]);return/*#__PURE__*/_jsxs("div",{"aria-busy":state.status==="loading"||undefined,"data-slot":"diagram-content","data-status":state.status,...props(diagramStyles.content),children:[/*#__PURE__*/_jsx("div",{"data-slot":"diagram-canvas",ref:attach// Body size: Pele draws secondary labels (Gantt tasks, keys,
+// cardinalities) smaller than the base, and 16px keeps them at 12px.
+,...props(typeRoles.body,diagramStyles.canvas,state.status==="loading"&&diagramStyles.canvasPending,state.status==="error"&&diagramStyles.canvasFailed)}),state.status==="loading"?/*#__PURE__*/_jsx("div",{...props(diagramStyles.overlay),children:/*#__PURE__*/_jsx(Feedback,{message:"Rendering diagram",status:"loading"})}):null,state.status==="error"?/*#__PURE__*/_jsx(Feedback,{error:state.error,message:"Couldn't render this diagram",status:"error"}):null]});}function DiagramContent({source,status}){if(status==="loading"){return/*#__PURE__*/_jsx(Feedback,{message:"Loading diagram",status:"loading"});}if(status==="error"){return/*#__PURE__*/_jsx(Feedback,{message:"Couldn't load this diagram",status:"error"});}if(!source.trim()){return/*#__PURE__*/_jsx(Feedback,{message:"No diagram to show",status:"empty"});}return/*#__PURE__*/_jsx(DiagramCanvas,{source:source},source);}export function Diagram({"aria-label":label,caption,source,status="ready",ref,...rest}){if(!label?.trim()){throw new TypeError("Diagram requires a non-empty aria-label.");}if(typeof source!=="string"){throw new TypeError("Diagram source must be a string.");}if(!["loading","ready","error"].includes(status)){throw new TypeError("Diagram status must be loading, ready, or error.");}for(const name of["className","style","role","data-slot","children","dangerouslySetInnerHTML"]){Reflect.deleteProperty(rest,name);}return/*#__PURE__*/_jsxs("figure",{...rest,"aria-busy":status==="loading"||undefined,"aria-label":label,"data-slot":"diagram","data-status":status,ref:ref,...props(diagramStyles.root),children:[/*#__PURE__*/_jsx(DiagramContent,{source:source,status:status}),caption!==undefined&&caption!==null&&/*#__PURE__*/_jsx("figcaption",{"data-slot":"diagram-caption",...props(typeRoles.ui,diagramStyles.caption),children:caption})]});}

package/dist/components/diagram/diagram.styles.js

@@ -0,0 +1,6 @@
+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/fonts.stylex";import{fonts}from"../../styles/fonts.stylex";import"../../styles/shape.stylex";import{shape}from"../../styles/shape.stylex";import"../../styles/spacing.stylex";import{space}from"../../styles/spacing.stylex";import"../../styles/typography.stylex";import{fontWeight}from"../../styles/typography.stylex";// Nodes sit on the workarea gray with a quiet edge; lines stay muted so labels
+// lead. Pele's eight series take Mizen's chart palette, so pies and Gantt bars
+// match the charts; the last two fall back to the reference gray.
+const NODE_BORDER=`color-mix(in oklch, ${colors.content} 16%, transparent)`;// The canvas frame: room for zoom and pan, and the space a pending or failed
+// diagram holds, so rendering never jumps the page.
+const FRAME_HEIGHT="20rem";export const diagramStyles={canvas:{"--pele-accent":"x1enfc00 x1lwq31j","--pele-bg":"xl5kj0w x1sei1ph","--pele-bold-weight":"xr04ye6","--pele-border":"xiqmira xr4xb56","--pele-critical":"xk5ot19","--pele-error":"x5yh7vq","--pele-fg":"x14ge4ki xyr798j","--pele-font-mono":"xgel1hv","--pele-heading-weight":"x1ovx77v","--pele-line":"x1d8b5lg x1kbx2cv","--pele-muted":"xo9mza1 xbd6hd2","--pele-radius":"xdqlpey","--pele-series-1":"xomyuge","--pele-series-2":"xnz0tb8","--pele-series-3":"x1h82vco","--pele-series-4":"x1gtdnbc","--pele-series-5":"xiivjno","--pele-series-6":"xwvxo0t","--pele-series-7":"x1ixdn6i","--pele-series-8":"x1m1meg3","--pele-surface":"x1oatbhz x1gznfgu","--pele-surface-alt":"x1d7dixd x19v7ue3","--pele-title-weight":"x139pdsa","--pele-zoom-right":"x7qxgta","--pele-zoom-top":"x1bvhiyf",kfiyM8:"xc26acl",k1xSpc:"xrvj5dj",kAzted:"xciow05",k7Eaqz:"xeuugli",kVAEAm:"x1n2onr6",$$css:true},canvasFailed:{k1xSpc:"x1s85apg",$$css:true},canvasPending:{kAzted:"xciow05",k33iCy:"xlshs6z",$$css:true},caption:{kMwMTN:"x125omll",kogj98:"x1ghz6dp",kHjlTd:"xj0a0fe",$$css:true},content:{k7Eaqz:"xeuugli",kVAEAm:"x1n2onr6",$$css:true},error:{kMwMTN:"x1ytrddi",$$css:true},feedback:{kGNEyG:"x6s0dn4",kWkggS:"xu84zt7",kaIpWk:"x1jw0md8",kB7OPa:"x9f619",kMwMTN:"x125omll",k1xSpc:"x78zum5",kXwgrk:"xdt5ytf",kOIVth:"xp4ho6d",kjj79g:"xl56j7k",kAzted:"xciow05",k7Eaqz:"xeuugli",kHjlTd:"xj0a0fe",kmVPX3:"xvgr8tm",k9WMMc:"x2b8uid",$$css:true},feedbackDetail:{kogj98:"x1ghz6dp",ks0D6T:"xf2d64e",$$css:true},feedbackTitle:{kMwMTN:"x14tvo57",k63SB2:"xuku2lm",kogj98:"x1ghz6dp",$$css:true},overlay:{kpwlN0:"x10a8y8t",kVAEAm:"x10l6tqk",$$css:true},root:{k1xSpc:"xrvj5dj",kOIVth:"xiw8qbs",kumcoG:"x1mkdm3x",kogj98:"x1ghz6dp",k7Eaqz:"xeuugli",kzqmXN:"xh8yej3",$$css:true},snippet:{kWkggS:"xwn18cz",kaIpWk:"x2b34ud",kMwMTN:"x14tvo57",kXP6Bh:"xdb2kus",kogj98:"x1ghz6dp",ks0D6T:"x193iq5w",kXHlph:"xw2csxc",k8WAf4:"x391bbb",kg3NbH:"xy7odpl",k9WMMc:"x1yc453h",khDVqt:"x1sdyfia",$$css:true}};