@moul-dev/ui 2026.8.20 → 2026.8.22

package/dist/src/components/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,81 @@
+import { StyleXStyles } from '@stylexjs/stylex';
+import * as React from 'react';
+export interface UseCommandPaletteOptions {
+    shortcut?: string | string[];
+    defaultOpen?: boolean;
+}
+export declare function useCommandPalette(options?: UseCommandPaletteOptions): {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export interface CommandPaletteItemData {
+    id: string;
+    onAction?: () => void;
+    getElement?: () => HTMLElement | null;
+}
+interface CommandPaletteContextValue {
+    search: string;
+    setSearch: (value: string) => void;
+    activeId: string | null;
+    setActiveId: (id: string | null) => void;
+    registerItem: (item: CommandPaletteItemData) => () => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    selectActive: () => void;
+    close: () => void;
+    matchCount: number;
+}
+export declare function useCommandPaletteContext(): CommandPaletteContextValue;
+export interface CommandPaletteProps {
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    shortcut?: string | string[];
+    size?: 'sm' | 'md' | 'lg';
+    style?: StyleXStyles;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const CommandPalette: React.ForwardRefExoticComponent<CommandPaletteProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandPaletteInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
+    style?: StyleXStyles;
+    className?: string;
+    showKbd?: boolean;
+}
+export declare const CommandPaletteInput: React.ForwardRefExoticComponent<CommandPaletteInputProps & React.RefAttributes<HTMLInputElement>>;
+export interface CommandPaletteListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const CommandPaletteList: React.ForwardRefExoticComponent<CommandPaletteListProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandPaletteSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    heading?: string;
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const CommandPaletteSection: React.ForwardRefExoticComponent<CommandPaletteSectionProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandPaletteItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'onSelect'> {
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    shortcut?: string | string[];
+    badge?: React.ReactNode;
+    keywords?: string[];
+    onAction?: () => void;
+    isDisabled?: boolean;
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const CommandPaletteItem: React.ForwardRefExoticComponent<CommandPaletteItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandPaletteEmptyProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const CommandPaletteEmpty: React.ForwardRefExoticComponent<CommandPaletteEmptyProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandPaletteFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const CommandPaletteFooter: React.ForwardRefExoticComponent<CommandPaletteFooterProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/components/CommandPalette/CommandPalette.styles.d.ts

@@ -0,0 +1,216 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const styles: Readonly<{
+    readonly overlay: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "fixed">;
+        readonly inset: stylex.StyleXClassNameFor<"inset", 0>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly backdropFilter: stylex.StyleXClassNameFor<"backdropFilter", "blur(4px)">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center" | "flex-start">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", 0 | "12vh">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", "0.2s">;
+        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "ease-out">;
+    }>;
+    readonly dialog: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", "0.2s">;
+        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.16, 1, 0.3, 1)">;
+    }>;
+    readonly sm: Readonly<{
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "460px">;
+    }>;
+    readonly md: Readonly<{
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "580px">;
+    }>;
+    readonly lg: Readonly<{
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "700px">;
+    }>;
+    readonly inputWrapper: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderBlockEndWidth: stylex.StyleXClassNameFor<"borderBlockEndWidth", "1px">;
+        readonly borderBlockEndStyle: stylex.StyleXClassNameFor<"borderBlockEndStyle", "solid">;
+        readonly borderBlockEndColor: stylex.StyleXClassNameFor<"borderBlockEndColor", string>;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "52px">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+    }>;
+    readonly searchIcon: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "20px">;
+        readonly height: stylex.StyleXClassNameFor<"height", "20px">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    }>;
+    readonly input: Readonly<{
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly '::placeholder': stylex.StyleXClassNameFor<"::placeholder", {
+            readonly color: stylex.StyleXVar<string>;
+        }>;
+    }>;
+    readonly clearButton: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly ':hover': stylex.StyleXClassNameFor<":hover", {
+            readonly color: stylex.StyleXVar<string>;
+            readonly backgroundColor: stylex.StyleXVar<string>;
+        }>;
+    }>;
+    readonly kbdEsc: Readonly<{
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+    }>;
+    readonly list: Readonly<{
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "340px">;
+        readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "2px">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    }>;
+    readonly section: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "2px">;
+    }>;
+    readonly sectionHeader: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly textTransform: stylex.StyleXClassNameFor<"textTransform", "uppercase">;
+        readonly letterSpacing: stylex.StyleXClassNameFor<"letterSpacing", "0.05em">;
+        readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+    }>;
+    readonly item: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+        readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly textDecoration: stylex.StyleXClassNameFor<"textDecoration", "none">;
+        readonly transition: stylex.StyleXClassNameFor<"transition", "background-color 0.12s ease, color 0.12s ease">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly itemContent: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+    }>;
+    readonly itemIcon: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly width: stylex.StyleXClassNameFor<"width", "18px">;
+        readonly height: stylex.StyleXClassNameFor<"height", "18px">;
+    }>;
+    readonly itemTextWrapper: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+    }>;
+    readonly itemLabel: Readonly<{
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+    }>;
+    readonly itemDescription: Readonly<{
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+    }>;
+    readonly itemMeta: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    }>;
+    readonly itemHovered: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly itemActive: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly itemDisabled: Readonly<{
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.4>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
+        readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
+    }>;
+    readonly empty: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly footer: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "flex-end">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderBlockStartWidth: stylex.StyleXClassNameFor<"borderBlockStartWidth", "1px">;
+        readonly borderBlockStartStyle: stylex.StyleXClassNameFor<"borderBlockStartStyle", "solid">;
+        readonly borderBlockStartColor: stylex.StyleXClassNameFor<"borderBlockStartColor", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly footerKeyGroup: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+}>;

package/dist/src/components/CommandPalette/index.d.ts

@@ -0,0 +1,2 @@
+export type { CommandPaletteEmptyProps, CommandPaletteFooterProps, CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteSectionProps, UseCommandPaletteOptions, } from './CommandPalette';
+export { CommandPalette, CommandPaletteEmpty, CommandPaletteFooter, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSection, useCommandPalette, useCommandPaletteContext, } from './CommandPalette';

package/dist/src/components/DateField/DateField.d.ts

@@ -0,0 +1,24 @@
+import { StyleXStyles } from '@stylexjs/stylex';
+import { DateFieldProps as AriaDateFieldProps, DateInputProps as AriaDateInputProps, DateSegmentProps as AriaDateSegmentProps, DateValue, ValidationResult } from 'react-aria-components';
+import * as React from 'react';
+export interface DateSegmentProps extends Omit<AriaDateSegmentProps, 'style' | 'className'> {
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const DateSegment: React.ForwardRefExoticComponent<DateSegmentProps & React.RefAttributes<HTMLDivElement>>;
+export interface DateInputProps extends Omit<AriaDateInputProps, 'style' | 'className' | 'children'> {
+    style?: StyleXStyles;
+    className?: string;
+    children?: (segment: any) => React.ReactElement;
+}
+export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLDivElement>>;
+export interface DateFieldProps<T extends DateValue = DateValue> extends Omit<AriaDateFieldProps<T>, 'style' | 'className'> {
+    style?: StyleXStyles;
+    className?: string;
+    label?: string;
+    description?: string;
+    errorMessage?: string | ((v: ValidationResult) => string);
+    variant?: 'primary' | 'secondary';
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const DateField: React.ForwardRefExoticComponent<DateFieldProps<any> & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/DateField/DateField.styles.d.ts

@@ -0,0 +1,99 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const styles: Readonly<{
+    readonly container: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+    }>;
+    readonly group: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly transition: stylex.StyleXClassNameFor<"transition", "border-color 0.15s ease, box-shadow 0.15s ease">;
+    }>;
+    readonly groupSm: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly groupMd: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly groupLg: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly primary: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly secondary: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly groupHover: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+    }>;
+    readonly groupFocused: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `0 0 0 1px ${stylex.StyleXVar<string>}`>;
+    }>;
+    readonly groupInvalid: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+    }>;
+    readonly groupFocusedInvalid: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `0 0 0 1px ${stylex.StyleXVar<string>}`>;
+    }>;
+    readonly groupDisabled: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.6>;
+    }>;
+    readonly dateInput: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+    }>;
+    readonly segment: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-block">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "2px">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "2px">;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+    }>;
+    readonly segmentFocused: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly segmentPlaceholder: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly segmentLiteral: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "1px">;
+    }>;
+    readonly segmentDisabled: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+}>;

package/dist/src/components/DateField/index.d.ts

@@ -0,0 +1,2 @@
+export type { DateFieldProps, DateInputProps, DateSegmentProps, } from './DateField';
+export { DateField, DateInput, DateSegment, } from './DateField';

package/dist/src/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,23 @@
+import { StyleXStyles } from '@stylexjs/stylex';
+import { DatePickerProps as AriaDatePickerProps, DateRangePickerProps as AriaDateRangePickerProps, DateValue, ValidationResult } from 'react-aria-components';
+import * as React from 'react';
+export interface DatePickerProps<T extends DateValue = DateValue> extends Omit<AriaDatePickerProps<T>, 'style' | 'className'> {
+    style?: StyleXStyles;
+    className?: string;
+    label?: string;
+    description?: string;
+    errorMessage?: string | ((v: ValidationResult) => string);
+    variant?: 'primary' | 'secondary';
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps<any> & React.RefAttributes<HTMLDivElement>>;
+export interface DateRangePickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'style' | 'className'> {
+    style?: StyleXStyles;
+    className?: string;
+    label?: string;
+    description?: string;
+    errorMessage?: string | ((v: ValidationResult) => string);
+    variant?: 'primary' | 'secondary';
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps<any> & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/DatePicker/DatePicker.styles.d.ts

@@ -0,0 +1,127 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const styles: Readonly<{
+    readonly container: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+    }>;
+    readonly group: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly transition: stylex.StyleXClassNameFor<"transition", "border-color 0.15s ease, box-shadow 0.15s ease">;
+    }>;
+    readonly groupSm: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", string>;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly groupMd: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", string>;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly groupLg: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", string>;
+        readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly primary: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly secondary: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly groupHover: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+    }>;
+    readonly groupFocused: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `0 0 0 1px ${stylex.StyleXVar<string>}`>;
+    }>;
+    readonly groupInvalid: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+    }>;
+    readonly groupFocusedInvalid: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `0 0 0 1px ${stylex.StyleXVar<string>}`>;
+    }>;
+    readonly groupDisabled: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.6>;
+    }>;
+    readonly rangeSeparator: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    }>;
+    readonly triggerButton: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly transition: stylex.StyleXClassNameFor<"transition", "color 0.15s ease, background-color 0.15s ease">;
+    }>;
+    readonly triggerButtonHover: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly triggerButtonPressed: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly triggerButtonDisabled: Readonly<{
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.4>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
+        readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
+    }>;
+    readonly triggerButtonFocused: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly calendarIcon: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "16px">;
+        readonly height: stylex.StyleXClassNameFor<"height", "16px">;
+    }>;
+    readonly popover: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", string>;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly dialog: Readonly<{
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    }>;
+}>;

package/dist/src/components/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export type { DatePickerProps, DateRangePickerProps, } from './DatePicker';
+export { DatePicker, DateRangePicker } from './DatePicker';

package/dist/src/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,44 @@
+import { StyleXStyles } from '@stylexjs/stylex';
+import * as React from 'react';
+export type EmptyStateVariant = 'default' | 'card' | 'dashed';
+export type EmptyStateSize = 'sm' | 'md' | 'lg';
+export type EmptyStateAlign = 'center' | 'start';
+export interface EmptyStateIconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    size?: EmptyStateSize;
+    variant?: 'default' | 'primary';
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const EmptyStateIcon: React.ForwardRefExoticComponent<EmptyStateIconProps & React.RefAttributes<HTMLDivElement>>;
+export interface EmptyStateTitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'style'> {
+    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+    size?: EmptyStateSize;
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const EmptyStateTitle: React.ForwardRefExoticComponent<EmptyStateTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface EmptyStateDescriptionProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, 'style'> {
+    size?: EmptyStateSize;
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const EmptyStateDescription: React.ForwardRefExoticComponent<EmptyStateDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface EmptyStateActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    align?: EmptyStateAlign;
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const EmptyStateActions: React.ForwardRefExoticComponent<EmptyStateActionsProps & React.RefAttributes<HTMLDivElement>>;
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'title'> {
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    secondaryAction?: React.ReactNode;
+    variant?: EmptyStateVariant;
+    size?: EmptyStateSize;
+    align?: EmptyStateAlign;
+    style?: StyleXStyles;
+    className?: string;
+}
+export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;