@kazee-ds/react 0.5.5 → 0.7.0

package/dist/types/Input.d.ts

@@ -1,11 +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 {
+export interface InputProps extends StylingProps<'root' | 'input' | 'control' | 'label' | 'boundary' | 'prefix' | 'suffix' | 'description' | 'error' | 'group' | 'clearButton'> {
     label: string;
     value?: string;
     defaultValue?: string;
@@ -24,6 +27,9 @@ export interface InputProps {
     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;
@@ -44,4 +50,13 @@ export interface InputProps {
     onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
     dir?: 'ltr' | 'rtl';
 }
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<(InputCompositionProps | InputProps) & import("react").RefAttributes<HTMLInputElement>> & {
+    Root: typeof InputRoot;
+    Control: import("react").ForwardRefExoticComponent<Omit<import("react-aria-components").InputProps, "className"> & {
+        className?: string;
+    } & import("react").RefAttributes<HTMLInputElement>>;
+    Group: typeof InputGroup;
+    Prefix: typeof InputPrefix;
+    Suffix: typeof InputSuffix;
+    ClearButton: typeof InputClearButton;
+};

package/dist/types/Label.d.ts

@@ -1,8 +1,9 @@
-import type { ReactNode } from 'react';
-export interface LabelProps {
+import { type StylingProps } from './styling.js';
+import { type ReactNode } from 'react';
+export interface LabelProps extends StylingProps<'root'> {
     children: ReactNode;
     htmlFor?: string;
     id?: string;
 }
 /** Associates visible text with a separately rendered control. */
-export declare function Label({ children, htmlFor, id }: LabelProps): import("react").JSX.Element;
+export declare function Label({ children, htmlFor, id, className, style, classNames }: LabelProps): import("react").JSX.Element;

package/dist/types/Listbox.d.ts

@@ -1,6 +1,8 @@
+import { ListBoxRoot, ListBoxItemPart, ListBoxSectionPart, ListBoxItemIndicator } from './control-composition.js';
+import { type StylingProps } from './styling.js';
 import { type FieldFeedbackProps } from './field.js';
 import { type ListboxOption, type ListboxSelectionMode } from './listbox-selection.js';
-export interface ListboxProps extends FieldFeedbackProps {
+export interface ListboxProps extends FieldFeedbackProps, StylingProps<'root' | 'label' | 'list' | 'empty' | 'item' | 'itemLabel' | 'indicator' | 'description' | 'error'> {
     label: string;
     options: ListboxOption[];
     /** Always an array; empty selection is []. */
@@ -14,4 +16,11 @@ export interface ListboxProps extends FieldFeedbackProps {
     dir?: 'ltr' | 'rtl';
     emptyMessage?: string;
 }
-export declare function Listbox({ label, options, value, defaultValue, onChange, selectionMode, isDisabled, description, errorMessage, isInvalid, name, id, dir, emptyMessage, }: ListboxProps): import("react").JSX.Element;
+declare function ListboxRoot(props: ListboxProps | Parameters<typeof ListBoxRoot>[0]): import("react").JSX.Element;
+export declare const Listbox: typeof ListboxRoot & {
+    Root: typeof ListBoxRoot;
+    Item: typeof ListBoxItemPart;
+    Section: typeof ListBoxSectionPart;
+    ItemIndicator: typeof ListBoxItemIndicator;
+};
+export {};

package/dist/types/NumberField.d.ts

@@ -1,4 +1,6 @@
-export interface NumberFieldProps {
+import { NumberFieldComposition, NumberFieldGroup, NumberFieldInput, NumberFieldIncrement, NumberFieldDecrement, type NumberFieldCompositionProps } from './number-composition.js';
+import { type StylingProps } from './styling.js';
+export interface NumberFieldProps extends StylingProps<'root' | 'label' | 'group' | 'input' | 'button' | 'decrementButton' | 'incrementButton' | 'description' | 'error'> {
     label: string;
     value?: number | null;
     defaultValue?: number | null;
@@ -21,4 +23,12 @@ export interface NumberFieldProps {
     incrementLabel?: string;
     decrementLabel?: string;
 }
-export declare function NumberField({ label, value, defaultValue, onChange, min, max, step, locale, formatOptions, description, errorMessage, isInvalid, isDisabled, isReadOnly, isRequired, name, id, dir, incrementLabel, decrementLabel, }: NumberFieldProps): import("react").JSX.Element;
+declare function NumberFieldRoot(props: NumberFieldProps | NumberFieldCompositionProps): import("react").JSX.Element;
+export declare const NumberField: typeof NumberFieldRoot & {
+    Root: typeof NumberFieldComposition;
+    Group: typeof NumberFieldGroup;
+    Input: typeof NumberFieldInput;
+    IncrementButton: typeof NumberFieldIncrement;
+    DecrementButton: typeof NumberFieldDecrement;
+};
+export type { NumberFieldCompositionProps } from './number-composition.js';

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/Pagination.d.ts

@@ -1,4 +1,7 @@
-export interface PaginationProps {
+import { type StylingProps } from './styling.js';
+import { type HTMLAttributes, type ButtonHTMLAttributes, type ReactNode } from 'react';
+export type PaginationPart = 'root' | 'button' | 'gap' | 'summary';
+export interface PaginationProps extends StylingProps<PaginationPart> {
     totalItems: number;
     pageSize?: number;
     value?: number;
@@ -13,4 +16,28 @@ export interface PaginationProps {
     dir?: 'ltr' | 'rtl';
     id?: string;
 }
-export declare function Pagination({ totalItems, pageSize, value, defaultValue, onChange, isDisabled, siblingCount, label, previousLabel, nextLabel, pageLabel, dir, id, }: PaginationProps): import("react").JSX.Element;
+export interface PaginationRootProps extends Omit<PaginationProps, 'previousLabel' | 'nextLabel' | 'pageLabel'> {
+    children?: ReactNode;
+}
+export declare function PaginationRoot({ totalItems, pageSize, value, defaultValue, onChange, isDisabled, siblingCount, label, className, classNames, style, dir, id, children, }: PaginationRootProps): import("react").JSX.Element;
+export declare function PaginationPageButton({ page, className, onClick, disabled, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    page: number;
+}): import("react").JSX.Element;
+export declare function PaginationPrevious(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+export declare function PaginationNext(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+export declare function PaginationSummary({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export declare function PaginationContent(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function PaginationItem(props: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export declare function PaginationEllipsis({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+declare function PaginationComponent(props: PaginationProps | PaginationRootProps): import("react").JSX.Element;
+export declare const Pagination: typeof PaginationComponent & {
+    Root: typeof PaginationRoot;
+    Content: typeof PaginationContent;
+    Item: typeof PaginationItem;
+    PageButton: typeof PaginationPageButton;
+    Previous: typeof PaginationPrevious;
+    Next: typeof PaginationNext;
+    Summary: typeof PaginationSummary;
+    Ellipsis: typeof PaginationEllipsis;
+};
+export {};

package/dist/types/Popover.d.ts

@@ -1,5 +1,9 @@
+import type { DialogRootProps } from './structural-parts.js';
+import { PopoverDialog, OverlayHeading, DialogRoot, PopoverCloseButton, OverlayDescription } from './structural-parts.js';
+import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
-export interface PopoverProps {
+export type PopoverPart = 'root' | 'trigger' | 'panel' | 'content' | 'title' | 'description' | 'body' | 'footer' | 'close';
+export interface PopoverProps extends StylingProps<PopoverPart> {
     triggerLabel: string;
     title: string;
     description?: string;
@@ -11,4 +15,17 @@ export interface PopoverProps {
     closeLabel?: string;
     dir?: 'ltr' | 'rtl';
 }
-export declare function Popover({ triggerLabel, title, description, children, open, defaultOpen, onOpenChange, isDisabled, closeLabel, dir, }: PopoverProps): import("react").JSX.Element;
+declare function PopoverComponent(props: PopoverProps | DialogRootProps): import("react").JSX.Element;
+export declare const Popover: typeof PopoverComponent & {
+    Root: typeof DialogRoot;
+    Trigger: ({ className, ...props }: import("react-aria-components").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<import("react-aria-components").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, string | import("react").JSXElementConstructor<any>>;
+    Content: ({ className, ...props }: import("react-aria-components").PopoverProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<import("react-aria-components").PopoverProps & import("react").RefAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;
+    Dialog: typeof PopoverDialog;
+    Heading: typeof OverlayHeading;
+    Description: typeof OverlayDescription;
+    Header: ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    Body: ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    Footer: ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    CloseButton: typeof PopoverCloseButton;
+};
+export {};

package/dist/types/RadioGroup.d.ts

@@ -1,10 +1,12 @@
+import { RadioGroupComposition, RadioItem, RadioControl, RadioIndicator, ChoiceContent, type RadioGroupCompositionProps } from './choice-composition.js';
+import { type StylingProps } from './styling.js';
 import { type FieldFeedbackProps } from './field.js';
 export interface RadioOption {
     id: string;
     label: string;
     isDisabled?: boolean;
 }
-export interface RadioGroupProps extends FieldFeedbackProps {
+export interface RadioGroupProps extends FieldFeedbackProps, StylingProps<'root' | 'label' | 'items' | 'item' | 'control' | 'indicator' | 'itemLabel' | 'description' | 'error'> {
     label: string;
     options: RadioOption[];
     value?: string;
@@ -17,4 +19,12 @@ export interface RadioGroupProps extends FieldFeedbackProps {
     orientation?: 'vertical' | 'horizontal';
     dir?: 'ltr' | 'rtl';
 }
-export declare function RadioGroup({ label, options, value, defaultValue, onChange, description, errorMessage, isInvalid, isDisabled, isRequired, name, id, orientation, dir, }: RadioGroupProps): import("react").JSX.Element;
+declare function RadioGroupRoot(props: RadioGroupProps | RadioGroupCompositionProps): import("react").JSX.Element;
+export declare const RadioGroup: typeof RadioGroupRoot & {
+    Root: typeof RadioGroupComposition;
+    Item: typeof RadioItem;
+    Control: typeof RadioControl;
+    Indicator: typeof RadioIndicator;
+    Content: typeof ChoiceContent;
+};
+export type { RadioGroupCompositionProps } from './choice-composition.js';

package/dist/types/Select.d.ts

@@ -1,9 +1,11 @@
+import { SelectComposition, SelectControl, SelectTrigger, SelectValuePart, SelectIndicator, SelectClearButton, SelectPopover, type SelectCompositionProps } from './control-composition.js';
+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';
-interface SelectCommonProps {
+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;
     label: string;
@@ -42,9 +44,19 @@ export type SelectProps = SelectCommonProps & ({
     defaultValue?: string[];
     onChange?: (value: string[]) => void;
 });
-export declare function Select(props: Extract<SelectProps, {
+declare function SelectRoot(props: Extract<SelectProps, {
     selectionMode: 'multiple';
-}>): ReactNode;
-export declare function Select(props: Exclude<SelectProps, {
+}> | SelectCompositionProps<'multiple'>): ReactNode;
+declare function SelectRoot(props: Exclude<SelectProps, {
     selectionMode: 'multiple';
-}>): ReactNode;
+}> | SelectCompositionProps<'single'>): ReactNode;
+export declare const Select: typeof SelectRoot & {
+    Root: typeof SelectComposition;
+    Control: typeof SelectControl;
+    Trigger: typeof SelectTrigger;
+    Value: typeof SelectValuePart;
+    Indicator: typeof SelectIndicator;
+    ClearButton: typeof SelectClearButton;
+    Popover: typeof SelectPopover;
+};
+export type { SelectCompositionProps } from './control-composition.js';

package/dist/types/SelectGroup.d.ts

@@ -1,6 +1,7 @@
+import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
 import { type SelectSize, type SelectVariant } from './Select.js';
-export interface SelectGroupProps {
+export interface SelectGroupProps extends StylingProps<'root' | 'label' | 'controls'> {
     label: string;
     children: ReactNode;
     size?: SelectSize;
@@ -10,4 +11,4 @@ export interface SelectGroupProps {
     dir?: 'ltr' | 'rtl';
 }
 /** Joins direct Select children. Each child retains its own value and accessible label. */
-export declare function SelectGroup({ label, children, size, variant, fullWidth, isDisabled, dir, }: SelectGroupProps): import("react").JSX.Element;
+export declare function SelectGroup({ label, children, size, variant, fullWidth, isDisabled, dir, className, style, classNames, }: SelectGroupProps): import("react").JSX.Element;

package/dist/types/Separator.d.ts

@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from 'react';
 export interface SeparatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'aria-hidden' | 'aria-orientation'> {
+    classNames?: Partial<Record<'root', string>>;
     orientation?: 'horizontal' | 'vertical';
     decorative?: boolean;
 }
-export declare function Separator({ orientation, decorative, className, ...props }: SeparatorProps): import("react").JSX.Element;
+export declare function Separator({ orientation, decorative, className, classNames, ...props }: SeparatorProps): import("react").JSX.Element;

package/dist/types/Sidebar.d.ts

@@ -1,5 +1,8 @@
+import { SidebarRoot, SidebarHeader, SidebarTitle, SidebarToggle, SidebarNavigation, SidebarList, SidebarItem, SidebarLink } from './layout-parts.js';
+import { type StylingProps } from './styling.js';
 import type { NavigationItem } from './dashboard-types.js';
-export interface SidebarProps {
+export type SidebarPart = 'root' | 'header' | 'title' | 'toggle' | 'navigation' | 'list' | 'item' | 'link';
+export interface SidebarProps extends StylingProps<SidebarPart> {
     label: string;
     items: NavigationItem[];
     currentId?: string;
@@ -10,4 +13,15 @@ export interface SidebarProps {
     dir?: 'ltr' | 'rtl';
     id?: string;
 }
-export declare function Sidebar({ label, items, currentId, open, defaultOpen, onOpenChange, toggleLabel, dir, id, }: SidebarProps): import("react").JSX.Element;
+declare function SidebarComponent(props: SidebarProps | import('./layout-parts.js').SidebarRootProps): import("react").JSX.Element;
+export declare const Sidebar: typeof SidebarComponent & {
+    Root: typeof SidebarRoot;
+    Header: typeof SidebarHeader;
+    Title: typeof SidebarTitle;
+    Toggle: typeof SidebarToggle;
+    Navigation: typeof SidebarNavigation;
+    List: typeof SidebarList;
+    Item: typeof SidebarItem;
+    Link: typeof SidebarLink;
+};
+export {};

package/dist/types/Skeleton.d.ts

@@ -1,7 +1,8 @@
 import type { HTMLAttributes } from 'react';
 export interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'aria-hidden'> {
+    classNames?: Partial<Record<'root', string>>;
     shape?: 'rectangle' | 'circle';
     animated?: boolean;
 }
 /** Decorative placeholder. Set aria-busy and loading text on the surrounding content. */
-export declare function Skeleton({ shape, animated, className, ...props }: SkeletonProps): import("react").JSX.Element;
+export declare function Skeleton({ shape, animated, className, classNames, ...props }: SkeletonProps): import("react").JSX.Element;

package/dist/types/Spinner.d.ts

@@ -1,10 +1,11 @@
+import { type StylingProps } from './styling.js';
 export type SpinnerSize = 'sm' | 'md' | 'lg';
 export type SpinnerColor = 'current' | 'primary';
-export interface SpinnerProps {
+export interface SpinnerProps extends StylingProps<'root' | 'track' | 'arc' | 'label'> {
     size?: SpinnerSize;
     color?: SpinnerColor;
     label?: string;
     id?: string;
 }
 /** Decorative by default. Use label for a standalone loading status; omit it inside a labeled Button. */
-export declare function Spinner({ size, color, label, id }: SpinnerProps): import("react").JSX.Element;
+export declare function Spinner({ size, color, label, id, className, style, classNames, }: SpinnerProps): import("react").JSX.Element;

package/dist/types/Switch.d.ts

@@ -1,13 +1,29 @@
+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 {
+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;
     dir?: 'ltr' | 'rtl';
 }
-export declare function Switch({ label, description, errorMessage, isInvalid, isSelected, defaultSelected, onChange, isDisabled, name, value, id, dir, }: SwitchProps): import("react").JSX.Element;
+declare function SwitchRoot(props: SwitchProps | SwitchCompositionProps): import("react").JSX.Element;
+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/Table.d.ts

@@ -1,5 +1,19 @@
 import type { TableHTMLAttributes } from 'react';
-export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+import { type StylingProps } from './styling.js';
+import { TableRoot, TableScrollContainer, TableHeader, TableBody, TableFooter, TableRow, TableColumn, TableCell, TableCaption } from './structural-parts.js';
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement>, StylingProps<'root' | 'scroll' | 'caption'> {
     caption: string;
 }
-export declare function Table({ caption, children, className, ...props }: TableProps): import("react").JSX.Element;
+declare function CompactTable({ caption, children, className, classNames, ...props }: TableProps): import("react").JSX.Element;
+export declare const Table: typeof CompactTable & {
+    Root: typeof TableRoot;
+    ScrollContainer: typeof TableScrollContainer;
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Footer: typeof TableFooter;
+    Row: typeof TableRow;
+    Column: typeof TableColumn;
+    Cell: typeof TableCell;
+    Caption: typeof TableCaption;
+};
+export {};

package/dist/types/Tabs.d.ts

@@ -1,15 +1,19 @@
+import { type StylingProps } from './styling.js';
 import type { ButtonSize } from './Button.js';
-import { type ReactNode } from 'react';
+import { type ReactNode, type HTMLAttributes } from 'react';
+import type { TabsProps as AriaTabsProps, TabListProps, TabProps, TabPanelProps } from 'react-aria-components/Tabs';
 export interface TabItem {
     id: string;
     label: string;
     isDisabled?: boolean;
 }
 export type TabsVariant = 'primary' | 'secondary' | 'default' | 'pill';
-export interface TabsProps {
+export type TabsPart = 'root' | 'listContainer' | 'list' | 'tab' | 'separator' | 'icon' | 'label' | 'panel' | 'toolbar' | 'navigation' | 'extras' | 'actions' | 'scrollButton';
+export interface TabsProps extends StylingProps<TabsPart> {
     label: string;
     variant?: TabsVariant;
     size?: ButtonSize;
+    indicatorShadow?: boolean;
     orientation?: 'horizontal' | 'vertical';
     align?: 'start' | 'center' | 'end';
     fullWidth?: boolean;
@@ -30,4 +34,35 @@ export interface TabsProps {
     dir?: 'ltr' | 'rtl';
     id?: string;
 }
-export declare function Tabs({ label, variant, size, orientation, align, fullWidth, inset, showSeparators, renderIcon, previousLabel, nextLabel, extras, actions, items, value, defaultValue, onChange, renderPanel, activationMode, dir, id, }: TabsProps): import("react").JSX.Element;
+export interface TabsRootProps extends Omit<AriaTabsProps, 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'className' | 'style' | 'children'>, StylingProps<'root'> {
+    children?: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    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, indicatorShadow, ...props }: TabsRootProps): import("react").JSX.Element;
+export declare function TabsListContainer({ className, children, previousLabel, nextLabel, ...props }: HTMLAttributes<HTMLDivElement> & {
+    previousLabel?: string;
+    nextLabel?: string;
+}): import("react").JSX.Element;
+export declare function TabsList<T extends object>(props: TabListProps<T>): import("react").JSX.Element;
+export declare function TabsTab(props: TabProps): import("react").JSX.Element;
+export declare function TabsPanel(props: TabPanelProps): import("react").JSX.Element;
+export declare function TabsIndicator({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+export declare function TabsSeparator({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+declare function TabsComponent(props: TabsProps | TabsRootProps): import("react").JSX.Element;
+export declare const Tabs: typeof TabsComponent & {
+    Root: typeof TabsRoot;
+    ListContainer: typeof TabsListContainer;
+    List: typeof TabsList;
+    Tab: typeof TabsTab;
+    Panel: typeof TabsPanel;
+    Indicator: typeof TabsIndicator;
+    Separator: typeof TabsSeparator;
+};
+export {};

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;
+};