@kazee-ds/react 0.6.0 → 0.7.0

package/dist/types/Avatar.d.ts

@@ -0,0 +1,42 @@
+import { type HTMLAttributes, type ImgHTMLAttributes, type Ref } from 'react';
+import { type StylingProps } from './styling.js';
+import type { AvatarVariant, ComponentSize, ImageLoadingStatus, IndicatorPlacement, Tone } from './visual.js';
+export declare const AvatarGroupContext: import("react").Context<{
+    size?: ComponentSize;
+    tone?: Tone;
+    variant?: AvatarVariant;
+}>;
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, StylingProps<'image' | 'fallback' | 'badge'> {
+    size?: ComponentSize;
+    tone?: Tone;
+    variant?: AvatarVariant;
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    asChild?: boolean;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function AvatarRoot({ size, tone, variant, radius, asChild, children, className, classNames, ...props }: AvatarProps): import("react").JSX.Element;
+export interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    asChild?: boolean;
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+    ref?: Ref<HTMLImageElement>;
+}
+export declare function AvatarImage(props: AvatarImageProps): import("react").JSX.Element;
+export interface AvatarFallbackProps extends HTMLAttributes<HTMLSpanElement> {
+    delayMs?: number;
+    tone?: Tone;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function AvatarFallback({ delayMs, tone, className, ...props }: AvatarFallbackProps): import("react").JSX.Element | null;
+export interface AvatarBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: ComponentSize;
+    tone?: Tone;
+    placement?: IndicatorPlacement;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function AvatarBadge({ size, tone, placement, className, children, ...props }: AvatarBadgeProps): import("react").JSX.Element;
+export declare const Avatar: typeof AvatarRoot & {
+    Root: typeof AvatarRoot;
+    Image: typeof AvatarImage;
+    Fallback: typeof AvatarFallback;
+    Badge: typeof AvatarBadge;
+};

package/dist/types/AvatarGroup.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes } from 'react';
+import { type AvatarProps } from './Avatar.js';
+import { type StylingProps } from './styling.js';
+import type { AvatarVariant, ComponentSize, Tone } from './visual.js';
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement>, StylingProps<'count'> {
+    size?: ComponentSize;
+    tone?: Tone;
+    variant?: AvatarVariant;
+    max?: number;
+    isGrid?: boolean;
+    overlap?: 'clip' | 'ring';
+}
+export declare function AvatarGroupCount({ className, ...props }: AvatarProps): import("react").JSX.Element;
+export declare function AvatarGroupRoot({ size, tone, variant, max, isGrid, overlap, className, classNames, children, ...props }: AvatarGroupProps): import("react").JSX.Element;
+export declare const AvatarGroup: typeof AvatarGroupRoot & {
+    Root: typeof AvatarGroupRoot;
+    Count: typeof AvatarGroupCount;
+};

package/dist/types/Badge.d.ts

@@ -1,8 +1,26 @@
-import type { HTMLAttributes } from 'react';
-export type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+import { type HTMLAttributes, type Ref } from 'react';
+import type { ComponentSize, IndicatorPlacement, Tone } from './visual.js';
+export type BadgeTone = Tone;
+export type BadgeVariant = 'default' | 'solid' | 'soft' | 'outline' | 'ghost' | 'link';
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    classNames?: Partial<Record<'root', string>>;
+    classNames?: Partial<Record<'root' | 'label', string>>;
     tone?: BadgeTone;
+    size?: ComponentSize;
+    variant?: BadgeVariant;
+    placement?: IndicatorPlacement;
+    asChild?: boolean;
+    ref?: Ref<HTMLSpanElement>;
 }
-/** Static status text. Dynamic announcements belong in an application-owned live region. */
-export declare function Badge({ tone, className, classNames, ...props }: BadgeProps): import("react").JSX.Element;
+/** Static status text; wrap in Badge.Anchor to position it relative to another element. */
+export declare function BadgeRoot({ tone, size, variant, placement, asChild, children, className, classNames, ...props }: BadgeProps): import("react").JSX.Element;
+export declare function BadgeAnchor({ className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+    ref?: Ref<HTMLSpanElement>;
+}): import("react").JSX.Element;
+export declare function BadgeLabel({ className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+    ref?: Ref<HTMLSpanElement>;
+}): import("react").JSX.Element;
+export declare const Badge: typeof BadgeRoot & {
+    Root: typeof BadgeRoot;
+    Anchor: typeof BadgeAnchor;
+    Label: typeof BadgeLabel;
+};

package/dist/types/Button.d.ts

@@ -2,7 +2,7 @@ import { type StylingProps } from './styling.js';
 import { type ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
 import { type ReactNode } from 'react';
 export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'outline' | 'tertiary' | 'ghost' | 'danger-soft' | 'ai';
-export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /** The event passed to `onPress`: pointer type, modifier keys, and the target element. */
 export type ButtonPressEvent = Parameters<NonNullable<AriaButtonProps['onPress']>>[0];
 /** Public flags supplied to the Button render function. */

package/dist/types/Calendar.d.ts

@@ -0,0 +1,60 @@
+import { type HTMLAttributes } from 'react';
+import { CalendarDate } from '@internationalized/date';
+import { type StylingProps } from './styling.js';
+import type { TemporalRange } from './temporal-model.js';
+export interface MonthPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    value?: number;
+    year?: number;
+    onChange?: (month: number) => void;
+    locale?: string;
+    minDate?: string;
+    maxDate?: string;
+    isDisabled?: boolean;
+}
+export declare function MonthPicker({ value, year, onChange, locale, minDate, maxDate, isDisabled, className, ...props }: MonthPickerProps): import("react").JSX.Element;
+export interface YearPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    value?: number;
+    onChange?: (year: number) => void;
+    locale?: string;
+    minDate?: string;
+    maxDate?: string;
+    isDisabled?: boolean;
+}
+export declare function YearPicker({ value, onChange, locale, minDate, maxDate, isDisabled, className, ...props }: YearPickerProps): import("react").JSX.Element;
+export interface MonthYearNavigationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value: string;
+    onChange: (value: string) => void;
+    locale?: string;
+    minDate?: string;
+    maxDate?: string;
+    isDisabled?: boolean;
+}
+export declare function MonthYearNavigation({ value, onChange, locale, minDate, maxDate, isDisabled, className, ...props }: MonthYearNavigationProps): import("react").JSX.Element;
+/** Reads actual visibleRange rather than assuming the focused day is the first panel. */
+export declare function CalendarViewHeader({ offset, onNavigate, ...props }: Omit<MonthYearNavigationProps, 'value' | 'onChange'> & {
+    offset?: number;
+    onNavigate: (value: CalendarDate) => void;
+}): import("react").JSX.Element;
+export interface CalendarProps extends StylingProps<'header' | 'grid' | 'day' | 'month'> {
+    label?: string;
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+    locale?: string;
+    dir?: 'ltr' | 'rtl';
+    minDate?: string;
+    maxDate?: string;
+    isDateUnavailable?: (value: string) => boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    weekStartsOn?: 0 | 1;
+    visibleMonths?: 1 | 2;
+    referenceDate?: string;
+}
+export interface RangeCalendarProps extends Omit<CalendarProps, 'value' | 'defaultValue' | 'onChange'> {
+    value?: TemporalRange | null;
+    defaultValue?: TemporalRange | null;
+    onChange?: (value: TemporalRange | null) => void;
+}
+export declare function Calendar(props: CalendarProps): import("react").JSX.Element;
+export declare function RangeCalendar(props: RangeCalendarProps): import("react").JSX.Element;

package/dist/types/Card.d.ts

@@ -1,7 +1,20 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
 import { type StylingProps } from './styling.js';
-export type CardPart = 'root' | 'header' | 'heading' | 'titleRow' | 'title' | 'description' | 'actions' | 'content' | 'footer';
-export interface CardProps extends HTMLAttributes<HTMLDivElement>, StylingProps<CardPart> {
+export type CardPart = 'root' | 'action' | 'header' | 'heading' | 'titleRow' | 'title' | 'description' | 'actions' | 'content' | 'footer';
+export interface CardInteractionProps {
+    density?: 'default' | 'compact';
+    href?: string;
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    rel?: string;
+    onPress?: () => void;
+    isDisabled?: boolean;
+    actionLabel?: string;
+    actionLabelledBy?: string;
+    actionClassName?: string;
+    /** Compose a router link using the supplied native anchor props. */
+    renderLink?: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => ReactNode;
+}
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, StylingProps<CardPart>, CardInteractionProps {
     title?: string;
     description?: string;
     headingLevel?: 2 | 3 | 4 | 5 | 6;
@@ -11,11 +24,16 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement>, StylingProps<
     titleExtras?: ReactNode;
     actions?: ReactNode;
     footer?: ReactNode;
+    headerAlign?: 'start' | 'center' | 'end';
+    dividedHeader?: boolean;
+    flushFooter?: boolean;
 }
-/** A content container; place links and buttons inside rather than making it clickable. */
-declare function CompactCard({ title, description, headingLevel, actions, header, titleExtras, footer, children, className, classNames, ...props }: CardProps): import("react").JSX.Element;
-export declare function CardRoot({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function CompactCard({ title, description, headingLevel, actions, header, titleExtras, footer, children, className, classNames, density, href, target, rel, onPress, isDisabled, actionLabel, actionLabelledBy, actionClassName, renderLink, headerAlign, dividedHeader, flushFooter, ...props }: CardProps): import("react").JSX.Element;
+export declare function CardRoot({ className, classNames, children, density, href, target, rel, onPress, isDisabled, actionLabel, actionLabelledBy, actionClassName, renderLink, ...props }: HTMLAttributes<HTMLDivElement> & CardInteractionProps & StylingProps<'action'>): import("react").JSX.Element;
+export declare function CardHeader({ className, align, divided, ...props }: HTMLAttributes<HTMLDivElement> & {
+    align?: 'start' | 'center' | 'end';
+    divided?: boolean;
+}): import("react").JSX.Element;
 export declare function CardHeading({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 export declare function CardTitleRow({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 export declare function CardTitle({ className, headingLevel, ...props }: HTMLAttributes<HTMLHeadingElement> & {
@@ -24,7 +42,9 @@ export declare function CardTitle({ className, headingLevel, ...props }: HTMLAtt
 export declare function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
 export declare function CardActions({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 export declare function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardFooter({ className, flush, ...props }: HTMLAttributes<HTMLDivElement> & {
+    flush?: boolean;
+}): import("react").JSX.Element;
 export declare const Card: typeof CompactCard & {
     Root: typeof CardRoot;
     Header: typeof CardHeader;

package/dist/types/DropdownMenu.d.ts

@@ -5,7 +5,7 @@ import { type ReactNode } from 'react';
 import { type PopoverProps } from 'react-aria-components/Popover';
 import { type MenuSelectionMode, type MenuPlacement } from './overlay-model.js';
 import type { DropdownMenuItem } from './dashboard-types.js';
-import type { ButtonVariant } from './Button.js';
+import type { ButtonVariant, ButtonSize } from './Button.js';
 export type DropdownMenuPart = 'root' | 'trigger' | 'panel' | 'list' | 'item' | 'check' | 'icon' | 'text' | 'description' | 'shortcut' | 'arrow' | 'separator' | 'heading' | 'section';
 export interface DropdownMenuProps extends StylingProps<DropdownMenuPart> {
     triggerLabel: string;
@@ -19,6 +19,7 @@ export interface DropdownMenuProps extends StylingProps<DropdownMenuPart> {
     triggerContent?: ReactNode;
     triggerIconOnly?: boolean;
     triggerVariant?: ButtonVariant;
+    triggerSize?: ButtonSize;
     renderIcon?: (item: DropdownMenuItem) => ReactNode;
     selectionMode?: MenuSelectionMode;
     selectedKeys?: string[];

package/dist/types/Input.d.ts

@@ -1,13 +1,14 @@
 import { InputRoot, InputGroup, InputPrefix, InputSuffix, type InputCompositionProps } from './control-composition.js';
 import { type StylingProps } from './styling.js';
+import { InputClearButton } from './input-clear.js';
 import { type FocusEventHandler, type KeyboardEventHandler, type ReactNode } from 'react';
-export type InputSize = 'sm' | 'md' | 'lg';
+export type InputSize = 'xs' | 'sm' | 'dense' | 'md' | 'lg' | 'xl';
 export type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
-export type InputVariant = 'primary' | 'secondary';
+export type InputVariant = 'primary' | 'secondary' | 'flat' | 'sunken';
 export type InputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
 export type InputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 /** A labeled single-line string field. Numeric/date parsing is a separate contract. */
-export interface InputProps extends StylingProps<'root' | 'input' | 'control' | 'label' | 'boundary' | 'prefix' | 'suffix' | 'description' | 'error' | 'group'> {
+export interface InputProps extends StylingProps<'root' | 'input' | 'control' | 'label' | 'boundary' | 'prefix' | 'suffix' | 'description' | 'error' | 'group' | 'clearButton'> {
     label: string;
     value?: string;
     defaultValue?: string;
@@ -26,6 +27,9 @@ export interface InputProps extends StylingProps<'root' | 'input' | 'control' |
     variant?: InputVariant;
     /** Fill the available width. Defaults to true to preserve the existing field layout. */
     fullWidth?: boolean;
+    hideLabel?: boolean;
+    isClearable?: boolean;
+    clearLabel?: string;
     /** Leading/trailing content. Mark decorative icons aria-hidden; name interactive buttons. */
     prefix?: ReactNode;
     suffix?: ReactNode;
@@ -54,4 +58,5 @@ export declare const Input: import("react").ForwardRefExoticComponent<(InputComp
     Group: typeof InputGroup;
     Prefix: typeof InputPrefix;
     Suffix: typeof InputSuffix;
+    ClearButton: typeof InputClearButton;
 };

package/dist/types/OverlayDirection.d.ts

@@ -2,4 +2,4 @@ import type { ReactNode } from 'react';
 export declare function OverlayDirection({ dir, children }: {
     dir?: 'ltr' | 'rtl';
     children: ReactNode;
-}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/types/Select.d.ts

@@ -3,8 +3,8 @@ import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
 import { type SelectOption } from './selection-options.js';
 export type { SelectOption } from './selection-options.js';
-export type SelectSize = 'sm' | 'md' | 'lg';
-export type SelectVariant = 'primary' | 'secondary' | 'outline';
+export type SelectSize = 'xs' | 'sm' | 'dense' | 'md' | 'lg' | 'xl';
+export type SelectVariant = 'primary' | 'secondary' | 'outline' | 'flat';
 interface SelectCommonProps extends StylingProps<'root' | 'label' | 'required' | 'control' | 'trigger' | 'leading' | 'value' | 'indicator' | 'clearButton' | 'clearIcon' | 'popover' | 'list' | 'item' | 'itemLabel' | 'itemDescription' | 'itemIndicator' | 'description' | 'error'> {
     /** Activates an option even when it is already selected (for linked editors). */
     onAction?: (value: string) => void;

package/dist/types/Switch.d.ts

@@ -1,12 +1,18 @@
-import { SwitchComposition, SwitchControl, SwitchThumb, ChoiceContent, type SwitchCompositionProps } from './choice-composition.js';
+import { SwitchComposition, SwitchControl, SwitchThumb, SwitchIcon, ChoiceContent, type SwitchCompositionProps } from './choice-composition.js';
 import { type StylingProps } from './styling.js';
 import type { FieldFeedbackProps } from './field.js';
-export interface SwitchProps extends FieldFeedbackProps, StylingProps<'root' | 'choice' | 'control' | 'thumb' | 'label' | 'description' | 'error'> {
+import { type SwitchVisualProps } from './switch-visual.js';
+export { SwitchGroup } from './switch-visual.js';
+export interface SwitchProps extends FieldFeedbackProps, SwitchVisualProps, StylingProps<'root' | 'choice' | 'control' | 'thumb' | 'label' | 'description' | 'error'> {
     label: string;
     isSelected?: boolean;
     defaultSelected?: boolean;
     onChange?: (selected: boolean) => void;
     isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    validate?: import('react-aria-components/Switch').SwitchFieldProps['validate'];
+    validationBehavior?: 'native' | 'aria';
     name?: string;
     value?: string;
     id?: string;
@@ -17,6 +23,7 @@ export declare const Switch: typeof SwitchRoot & {
     Root: typeof SwitchComposition;
     Control: typeof SwitchControl;
     Thumb: typeof SwitchThumb;
+    Icon: typeof SwitchIcon;
     Content: typeof ChoiceContent;
 };
 export type { SwitchCompositionProps } from './choice-composition.js';

package/dist/types/Tabs.d.ts

@@ -13,6 +13,7 @@ export interface TabsProps extends StylingProps<TabsPart> {
     label: string;
     variant?: TabsVariant;
     size?: ButtonSize;
+    indicatorShadow?: boolean;
     orientation?: 'horizontal' | 'vertical';
     align?: 'start' | 'center' | 'end';
     fullWidth?: boolean;
@@ -40,10 +41,11 @@ export interface TabsRootProps extends Omit<AriaTabsProps, 'selectedKey' | 'defa
     onChange?: (value: string) => void;
     variant?: TabsVariant;
     size?: ButtonSize;
+    indicatorShadow?: boolean;
     align?: 'start' | 'center' | 'end';
     fullWidth?: boolean;
 }
-export declare function TabsRoot({ className, classNames, value, defaultValue, onChange, variant, size, align, fullWidth, ...props }: TabsRootProps): import("react").JSX.Element;
+export declare function TabsRoot({ className, classNames, value, defaultValue, onChange, variant, size, align, fullWidth, indicatorShadow, ...props }: TabsRootProps): import("react").JSX.Element;
 export declare function TabsListContainer({ className, children, previousLabel, nextLabel, ...props }: HTMLAttributes<HTMLDivElement> & {
     previousLabel?: string;
     nextLabel?: string;

package/dist/types/TemporalField.d.ts

@@ -0,0 +1,36 @@
+import { type TemporalConstraints, type TemporalKind } from './temporal-model.js';
+import { type StylingProps } from './styling.js';
+export interface TemporalFieldProps extends Omit<TemporalConstraints, 'kind'>, StylingProps<'label' | 'input' | 'segment' | 'description' | 'error'> {
+    label: string;
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+    onError?: (error: string | null) => void;
+    locale?: string;
+    dir?: 'ltr' | 'rtl';
+    hourCycle?: 12 | 24;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    name?: string;
+    id?: string;
+    description?: string;
+    errorMessage?: string;
+    hideLabel?: boolean;
+    /** Disable only when this field edits an uncommitted picker draft. */
+    formValidation?: boolean;
+}
+export declare function TemporalField({ kind, ...props }: TemporalFieldProps & {
+    kind: TemporalKind;
+}): import("react").JSX.Element;
+export declare function DateField(props: TemporalFieldProps): import("react").JSX.Element;
+export declare function TimeField(props: TemporalFieldProps): import("react").JSX.Element;
+export declare function DateTimeField(props: TemporalFieldProps): import("react").JSX.Element;
+export interface TemporalRangeFieldProps extends Omit<TemporalFieldProps, 'value' | 'defaultValue' | 'onChange'> {
+    value?: import('./temporal-model.js').TemporalRange | null;
+    defaultValue?: import('./temporal-model.js').TemporalRange | null;
+    onChange?: (value: import('./temporal-model.js').TemporalRange | null) => void;
+}
+export declare function DateRangeField(props: TemporalRangeFieldProps): import("react").JSX.Element;
+export declare function TimeRangeField(props: TemporalRangeFieldProps): import("react").JSX.Element;
+export declare function DateTimeRangeField(props: TemporalRangeFieldProps): import("react").JSX.Element;

package/dist/types/TemporalPicker.d.ts

@@ -0,0 +1,137 @@
+import { type ReactNode, type HTMLAttributes, type ButtonHTMLAttributes } from 'react';
+import { type ButtonProps } from 'react-aria-components/Button';
+import { MonthPicker, YearPicker } from './Calendar.js';
+import { type TemporalFieldProps } from './TemporalField.js';
+import { type StylingProps } from './styling.js';
+import { type TemporalConstraints, type TemporalRange } from './temporal-model.js';
+export type TemporalValue = string | TemporalRange;
+export interface TemporalPreset<T> {
+    id: string;
+    label: string;
+    value: T | null;
+}
+export interface TemporalPickerOptions extends Omit<TemporalConstraints, 'kind'>, StylingProps<'label' | 'trigger' | 'value' | 'panel' | 'content' | 'field' | 'calendar' | 'time' | 'footer' | 'applyButton' | 'cancelButton' | 'clearButton' | 'preset' | 'description' | 'error'> {
+    label: string;
+    locale?: string;
+    dir?: 'ltr' | 'rtl';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    hourCycle?: 12 | 24;
+    display?: 'inline' | 'popover' | 'dialog' | 'auto';
+    commitMode?: 'apply' | 'immediate';
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    hideLabel?: boolean;
+    name?: string;
+    description?: string;
+    errorMessage?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onError?: (error: string | null) => void;
+    visibleMonths?: 1 | 2;
+    weekStartsOn?: 0 | 1;
+    referenceDate?: string;
+    timePresentation?: 'list' | 'clock';
+    showInputs?: boolean;
+    showActions?: boolean;
+    children?: ReactNode;
+    formatValue?: (value: TemporalValue, locale: string) => string;
+}
+export interface TemporalPickerProps<T extends TemporalValue = string> extends TemporalPickerOptions {
+    value?: T | null;
+    defaultValue?: T | null;
+    onChange?: (value: T | null) => void;
+    onApply?: (value: T | null) => void;
+    presets?: TemporalPreset<T>[];
+}
+export declare function TemporalPickerField({ part, ...props }: Partial<TemporalFieldProps> & {
+    part?: 'start' | 'end';
+}): import("react").JSX.Element;
+export declare function TemporalPickerCalendar(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function TemporalPickerTime({ part, ...props }: HTMLAttributes<HTMLDivElement> & {
+    part?: 'start' | 'end';
+}): import("react").JSX.Element;
+export declare function TemporalPickerValue({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export declare function TemporalPickerTrigger({ children, className, ...props }: Omit<ButtonProps, 'children' | 'className'> & {
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function TemporalPickerContent({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function TemporalPickerPopover({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare const TemporalPickerApplyButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element, TemporalPickerCancelButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element, TemporalPickerClearButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+export declare const DatePicker: ((props: TemporalPickerProps<string>) => import("react").JSX.Element) & {
+    Root: (props: TemporalPickerProps<string>) => import("react").JSX.Element;
+    Trigger: typeof TemporalPickerTrigger;
+    Value: typeof TemporalPickerValue;
+    Popover: typeof TemporalPickerPopover;
+    Content: typeof TemporalPickerContent;
+    Field: typeof TemporalPickerField;
+    Calendar: typeof TemporalPickerCalendar;
+    Time: typeof TemporalPickerTime;
+    MonthPicker: typeof MonthPicker;
+    YearPicker: typeof YearPicker;
+    ApplyButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+    CancelButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+    ClearButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+};
+export declare const TimePicker: ((props: TemporalPickerProps<string>) => import("react").JSX.Element) & {
+    Root: (props: TemporalPickerProps<string>) => import("react").JSX.Element;
+    Trigger: typeof TemporalPickerTrigger;
+    Value: typeof TemporalPickerValue;
+    Popover: typeof TemporalPickerPopover;
+    Content: typeof TemporalPickerContent;
+    Field: typeof TemporalPickerField;
+    Calendar: typeof TemporalPickerCalendar;
+    Time: typeof TemporalPickerTime;
+    MonthPicker: typeof MonthPicker;
+    YearPicker: typeof YearPicker;
+    ApplyButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+    CancelButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+    ClearButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+};
+export declare const TimeRangePicker: ((props: TemporalPickerProps<TemporalRange>) => import("react").JSX.Element) & {
+    Root: (props: TemporalPickerProps<TemporalRange>) => import("react").JSX.Element;
+    Trigger: typeof TemporalPickerTrigger;
+    Value: typeof TemporalPickerValue;
+    Popover: typeof TemporalPickerPopover;
+    Content: typeof TemporalPickerContent;
+    Field: typeof TemporalPickerField;
+    Calendar: typeof TemporalPickerCalendar;
+    Time: typeof TemporalPickerTime;
+    MonthPicker: typeof MonthPicker;
+    YearPicker: typeof YearPicker;
+    ApplyButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+    CancelButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+    ClearButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+};
+export declare const DateTimePicker: ((props: TemporalPickerProps<string>) => import("react").JSX.Element) & {
+    Root: (props: TemporalPickerProps<string>) => import("react").JSX.Element;
+    Trigger: typeof TemporalPickerTrigger;
+    Value: typeof TemporalPickerValue;
+    Popover: typeof TemporalPickerPopover;
+    Content: typeof TemporalPickerContent;
+    Field: typeof TemporalPickerField;
+    Calendar: typeof TemporalPickerCalendar;
+    Time: typeof TemporalPickerTime;
+    MonthPicker: typeof MonthPicker;
+    YearPicker: typeof YearPicker;
+    ApplyButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+    CancelButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+    ClearButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+};
+export declare const DateTimeRangePicker: ((props: TemporalPickerProps<TemporalRange>) => import("react").JSX.Element) & {
+    Root: (props: TemporalPickerProps<TemporalRange>) => import("react").JSX.Element;
+    Trigger: typeof TemporalPickerTrigger;
+    Value: typeof TemporalPickerValue;
+    Popover: typeof TemporalPickerPopover;
+    Content: typeof TemporalPickerContent;
+    Field: typeof TemporalPickerField;
+    Calendar: typeof TemporalPickerCalendar;
+    Time: typeof TemporalPickerTime;
+    MonthPicker: typeof MonthPicker;
+    YearPicker: typeof YearPicker;
+    ApplyButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+    CancelButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+    ClearButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+};

package/dist/types/TimeControls.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes } from 'react';
+import { type TemporalConstraints } from './temporal-model.js';
+export interface TimeControlProps extends Omit<TemporalConstraints, 'kind'>, Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string) => void;
+    label?: string;
+    locale?: string;
+    hourCycle?: 12 | 24;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+}
+export declare function TimeList({ value, defaultValue, onChange, label, locale, hourCycle, isDisabled, isReadOnly, className, minTime, maxTime, hourStep, minuteStep, secondStep, granularity, isTimeUnavailable, ...props }: TimeControlProps): import("react").JSX.Element;
+export declare function TimeClock({ value, defaultValue, onChange, label, locale, hourCycle, isDisabled, isReadOnly, className, minTime, maxTime, hourStep, minuteStep, secondStep, granularity, isTimeUnavailable, ...props }: TimeControlProps): import("react").JSX.Element;

package/dist/types/ToggleButton.d.ts

@@ -2,7 +2,7 @@ import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
 import { type ToggleButtonRenderProps as AriaRenderProps } from 'react-aria-components/ToggleButton';
 import type { ButtonPressEvent, ButtonSize } from './Button.js';
-export type ToggleButtonVariant = 'default' | 'ghost';
+export type ToggleButtonVariant = 'default' | 'ghost' | 'chip';
 export type ToggleButtonRenderProps = Omit<AriaRenderProps, 'state'>;
 export interface ToggleButtonProps extends StylingProps {
     id?: string;
@@ -21,4 +21,5 @@ export interface ToggleButtonProps extends StylingProps {
     autoFocus?: boolean;
 }
 export declare const ToggleButtonSizeContext: import("react").Context<ButtonSize>;
+export declare const ToggleButtonVariantContext: import("react").Context<ToggleButtonVariant>;
 export declare function ToggleButton({ children, variant, size, isIconOnly, className: consumerClassName, classNames, style, ...props }: ToggleButtonProps): import("react").JSX.Element;

package/dist/types/ToggleButtonGroup.d.ts

@@ -1,11 +1,13 @@
 import { type StylingProps } from './styling.js';
 import type { ReactNode } from 'react';
 import type { ButtonSize } from './Button.js';
+import { type ToggleButtonVariant } from './ToggleButton.js';
 import { ButtonGroupSeparator } from './ButtonGroup.js';
 interface Common extends StylingProps {
     label: string;
     children: ReactNode;
     size?: ButtonSize;
+    variant?: ToggleButtonVariant;
     isDisabled?: boolean;
     isDetached?: boolean;
     fullWidth?: boolean;

package/dist/types/choice-composition.d.ts

@@ -2,6 +2,7 @@ import { type HTMLAttributes } from 'react';
 import { type CheckboxProps as AriaCheckboxProps } from 'react-aria-components/Checkbox';
 import { type SwitchFieldProps } from 'react-aria-components/Switch';
 import { type RadioGroupProps as AriaRadioGroupProps, type RadioProps } from 'react-aria-components/RadioGroup';
+import { type SwitchVisualProps } from './switch-visual.js';
 type ChoiceElementProps = HTMLAttributes<HTMLSpanElement>;
 export type CheckboxCompositionProps = Omit<AriaCheckboxProps, 'className'> & {
     className?: string;
@@ -11,13 +12,15 @@ export declare function CheckboxComposition({ className, children, ...props }: C
 export declare function CheckboxControl({ className, ...props }: ChoiceElementProps): import("react").JSX.Element;
 export declare function CheckboxIndicator({ className, children, ...props }: ChoiceElementProps): import("react").JSX.Element;
 export declare function ChoiceContent({ className, ...props }: ChoiceElementProps): import("react").JSX.Element;
-export type SwitchCompositionProps = Omit<SwitchFieldProps, 'className'> & {
+export type SwitchCompositionProps = Omit<SwitchFieldProps, 'className' | 'children'> & SwitchVisualProps & {
     className?: string;
     label?: never;
+    children?: import('react').ReactNode | ((state: import('react-aria-components/Switch').SwitchFieldRenderProps & Partial<import('react-aria-components/Switch').SwitchButtonRenderProps>) => import('react').ReactNode);
 };
-export declare function SwitchComposition({ className, children, ...props }: SwitchCompositionProps): import("react").JSX.Element;
+export declare function SwitchComposition({ className, children, size, tone, variant, ...props }: SwitchCompositionProps): import("react").JSX.Element;
 export declare function SwitchControl({ className, ...props }: ChoiceElementProps): import("react").JSX.Element;
 export declare function SwitchThumb({ className, ...props }: ChoiceElementProps): import("react").JSX.Element;
+export declare function SwitchIcon({ className, ...props }: ChoiceElementProps): import("react").JSX.Element;
 export type RadioGroupCompositionProps = Omit<AriaRadioGroupProps, 'className'> & {
     className?: string;
     options?: never;

package/dist/types/control-composition.d.ts

@@ -17,8 +17,8 @@ export type SelectCompositionProps<M extends 'single' | 'multiple' = 'single'> =
     defaultValue?: AriaSelectProps<object, M>['defaultValue'];
     onChange?: (value: M extends 'multiple' ? string[] : string | null) => void;
     onClear?: () => void;
-    size?: 'sm' | 'md' | 'lg';
-    variant?: 'primary' | 'secondary' | 'outline';
+    size?: import('./Select.js').SelectSize;
+    variant?: import('./Select.js').SelectVariant;
     fullWidth?: boolean;
     hideLabel?: boolean;
 };
@@ -56,10 +56,11 @@ export declare function FieldError({ className, ...props }: Omit<FieldErrorProps
 export type InputCompositionProps = Omit<TextFieldProps, 'className'> & {
     className?: string;
     label?: never;
+    size?: import('./Input.js').InputSize;
+    variant?: import('./Input.js').InputVariant;
+    hideLabel?: boolean;
 };
-export declare function InputRoot({ className, ...props }: Omit<TextFieldProps, 'className'> & {
-    className?: string;
-}): import("react").JSX.Element;
+export declare function InputRoot({ className, size, variant, hideLabel, value, defaultValue, onChange, ...props }: Omit<InputCompositionProps, 'label'>): import("react").JSX.Element;
 export declare const InputControlRefContext: import("react").Context<Ref<HTMLInputElement> | undefined>;
 export declare const InputControl: import("react").ForwardRefExoticComponent<Omit<AriaInputProps, "className"> & {
     className?: string;