@ufoui/core 0.0.4 → 0.0.12

package/README.md

@@ -1,6 +1,6 @@
-# UFOUI
+# UFO UI
 
-UFOUI is a React UI component library implementing Material Design 3.
+UFO UI is a React UI component library implementing Material Design 3.
 It focuses on simplicity, low dependency count, and small bundle size.
 
 The library is designed to be used as a single import, without additional required packages beyond React.
@@ -15,6 +15,12 @@ The library is designed to be used as a single import, without additional requir
 This project is currently in early development (v0.x).
 The API may change.
 
+## Live preview
+
+UFO UI Playground (preview):  
+https://ufoui.kgnet.eu
+
+
 ## Installation
 ```bash
 pnpm add @ufoui/core
@@ -59,5 +65,5 @@ You can customize the theme by providing a seed color:
 Apache License 2.0
 
 ## Trademark
-“UFOUI” and the UFOUI logo are trademarks of the UFOUI project.
+“UFOUI” (UFO UI) and the UFOUI logo are trademarks of the UFOUI project.
 Use of the name or logo requires permission.

package/assets/icons.d.ts

@@ -0,0 +1,11 @@
+export declare const CheckmarkIcon: import("react/jsx-runtime").JSX.Element;
+export declare const IndeterminateIcon: import("react/jsx-runtime").JSX.Element;
+export declare const RadioIcon: import("react/jsx-runtime").JSX.Element;
+export declare const ArrowRightIcon: import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxIcon: import("react/jsx-runtime").JSX.Element;
+export declare const RadioCheckedIcon: import("react/jsx-runtime").JSX.Element;
+export declare const RadioUncheckedIcon: import("react/jsx-runtime").JSX.Element;
+export declare const MenuCheckIcon: import("react/jsx-runtime").JSX.Element;
+export declare const ExpandIcon: import("react/jsx-runtime").JSX.Element;
+export declare const StarIcon: import("react/jsx-runtime").JSX.Element;
+export declare const StarFilledIcon: import("react/jsx-runtime").JSX.Element;

package/assets/index.d.ts

@@ -0,0 +1 @@
+export * from './icons';

package/components/accordion/accordion.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { BoxBaseProps } from '../base';
+import { BorderColor, ElementBorder, ElementDensity, ElementElevation, ElementFont, ElementShape, SurfaceColor } from '../../utils';
+import { MotionAnimation, MotionStyle } from '../../types';
+export type AccordionVariant = 'text' | 'pills' | 'grouped' | 'segmented';
+export type AccordionConfig = {
+    variant?: AccordionVariant;
+    density?: ElementDensity;
+    elevation?: ElementElevation;
+    showIcon?: boolean;
+    font?: ElementFont;
+    border?: ElementBorder;
+    borderColor?: BorderColor;
+    shape?: ElementShape;
+    animation?: MotionAnimation;
+    motionStyle?: MotionStyle;
+    duration?: number;
+    color?: SurfaceColor;
+    disabled?: boolean;
+};
+/**
+ * Props for {@link Accordion}.
+ *
+ * @category Accordion
+ */
+export interface AccordionProps extends Omit<BoxBaseProps, 'type' | 'gap' | 'gapY' | 'gapX'> {
+    /** Accordion behavior mode. Default: 'single'. */
+    type?: 'single' | 'multiple';
+    /** Accordion items. */
+    children: ReactNode;
+    variant: AccordionVariant;
+    elevation?: ElementElevation;
+    density?: ElementDensity;
+    showIcon?: boolean;
+    border?: ElementBorder;
+    borderColor?: BorderColor;
+    font?: ElementFont;
+    animation?: MotionAnimation;
+    motionStyle?: MotionStyle;
+    duration?: number;
+}
+/**
+ * Container component that manages accordion selection state.
+ *
+ * Uses shared selection behavior and provides it
+ * to child components through SelectionContext.
+ *
+ * @function
+ *
+ * @category Accordion
+ */
+export declare const Accordion: ({ type, variant, children, density, border, borderColor, elevation, showIcon, font, shape, animation, motionStyle, duration, color, disabled, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/components/accordion/accordionItem.d.ts

@@ -0,0 +1,65 @@
+import { default as React, ReactNode } from 'react';
+import { IS_ACCORDION_ITEM } from './accordionItem.guards';
+import { AccordionVariant } from './accordion';
+import { ElementFocusEffect, ElementFont, ElementHoverEffect, ElementPressedEffect, ElementSelectedEffect, ElementTouchEffect, SurfaceColor } from '../../utils';
+import { MotionAnimation, MotionStyle } from '../../types';
+/**
+ * Props for {@link AccordionItem}.
+ *
+ * @category Accordion
+ */
+export interface AccordionItemProps {
+    /** Unique item value used to control selection state. */
+    value: string;
+    /** Item header content rendered inside the trigger button. */
+    label: ReactNode;
+    /** Panel content displayed when the item is expanded. */
+    children: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    variant?: AccordionVariant;
+    font?: ElementFont;
+    animation?: MotionAnimation;
+    motionStyle?: MotionStyle;
+    duration?: number;
+    flush?: boolean;
+    divided?: boolean;
+    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    /** Hover visual effects. */
+    hoverEffects?: ElementHoverEffect[];
+    /** Focus visual effects. */
+    focusEffects?: ElementFocusEffect[];
+    /** Pressed visual effects. */
+    pressedEffects?: ElementPressedEffect[];
+    /** Touch and click visual effects. */
+    touchEffects?: ElementTouchEffect[];
+    /** Visual effects applied when selected. */
+    selectedEffects?: ElementSelectedEffect[];
+    color?: SurfaceColor;
+    disabled?: boolean;
+}
+/**
+ * Single accordion item consisting of a trigger and collapsible content.
+ *
+ * Integrates with shared selection behavior to determine
+ * whether the panel is expanded and to toggle its state.
+ *
+ * @function
+ *
+ * @category Accordion
+ */
+export declare const AccordionItem: {
+    ({ value, label, children, leading, trailing, showIcon, icon, font, variant, animation, duration, motionStyle, flush, divided, onFocus, onBlur, color, disabled, hoverEffects, focusEffects, pressedEffects, touchEffects, selectedEffects, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Marks this component as an AccordionItem for runtime type guards.
+     *
+     * Used internally to identify Accordion elements via a shared Symbol.
+     * Not part of the public API.
+     *
+     * @internal
+     */
+    [IS_ACCORDION_ITEM]: boolean;
+};

package/components/accordion/accordionItem.guards.d.ts

@@ -0,0 +1,15 @@
+import { default as React, ReactElement } from 'react';
+import { AccordionItemProps } from './accordionItem';
+export declare const IS_ACCORDION_ITEM: unique symbol;
+/**
+ * Type guard that checks whether a React node is an AccordionItem component.
+ *
+ * Identifies AccordionItem elements by the internal {@link IS_ACCORDION_ITEM} symbol
+ * attached to the component type.
+ *
+ * @param el - React node to test.
+ * @returns `true` if the node is an AccordionItem element.
+ *
+ * @internal
+ */
+export declare function isAccordionItem(el: React.ReactNode): el is ReactElement<AccordionItemProps>;

package/components/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './accordion';
+export * from './accordionItem';

package/components/avatar/avatar.d.ts

@@ -1,35 +1,32 @@
-import { HTMLProps } from 'react';
-import { ElementBorder, ElementElevation, ElementShape, ElementSize } from '../../utils/utils.ts';
-import { BorderColor, SemanticColor } from '../../utils/color';
+import { ReactNode } from 'react';
+import { BoxBaseProps } from '../base';
+import { ElementSize } from '../../utils';
 /**
- * Props for the {@link Badge} component.
+ * Properties for Avatar component.
  *
- * @remarks
- * Badge displays a status or value in a small decorative label.
- * Supports customization of color, border, elevation, shape, size, and position.
- *
- * @category Component properties
+ * @category Avatar
  */
-export interface AvatarProps extends Omit<HTMLProps<HTMLDivElement>, 'ref' | 'size'> {
-    /** The value displayed inside the badge (e.g. a number or label). */
-    label: string;
-    /** Semantic color of the badge background (e.g. `'error'`, `'info'`). */
-    color?: SemanticColor;
-    /** Border width, e.g. `1` or `2`. Ignored if `outlined` is not set.
-     * @default 1
-     * */
-    border?: ElementBorder;
-    /** Color of the border when `outlined` is true. */
-    borderColor?: BorderColor;
-    /** Elevation depth if `raised` is true. */
-    elevation?: ElementElevation;
-    /** Size of the badge (`small`, `medium`, `large`). */
+export interface AvatarProps extends Omit<BoxBaseProps, 'component' | 'elementClass'> {
+    /** Size token controlling width and height. */
     size?: ElementSize;
-    /** Shape of the badge, e.g. `'round'`, `'square'`. */
-    shape?: ElementShape;
-    /** If true, adds elevation shadow. */
-    raised?: boolean;
-    /** If true, renders the badge as outlined. */
-    outlined?: boolean;
+    /** Image source URL. */
+    src?: string;
+    /** Alternative text for image element. */
+    alt?: string;
+    /** Full name used for initials and auto color derivation. */
+    name?: string;
+    /** Custom fallback content rendered when no image and no name are provided. */
+    children?: ReactNode;
 }
+/**
+ * Avatar identity component displaying image, initials, or custom content.
+ *
+ * Automatically derives a background color from name when no image
+ * and no explicit color are provided.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Avatar
+ */
 export declare const Avatar: import('react').ForwardRefExoticComponent<AvatarProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/avatar/avatar.guards.d.ts

@@ -0,0 +1,15 @@
+import { default as React, ReactElement } from 'react';
+import { AvatarProps } from './avatar';
+export declare const IS_AVATAR: unique symbol;
+/**
+ * Type guard that checks whether a React node is an Avatar component.
+ *
+ * Identifies Avatar elements by the internal {@link IS_AVATAR} symbol
+ * attached to the component type.
+ *
+ * @param el - React node to test.
+ * @returns `true` if the node is an Avatar element.
+ *
+ * @internal
+ */
+export declare function isAvatar(el: React.ReactNode): el is ReactElement<AvatarProps>;

package/components/avatar/avatarGroup.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { BoxBaseProps } from '../base';
+import { BorderColor, ElementBorder, ElementShape, ElementSize } from '../../utils';
+/**
+ * Props for AvatarGroup component.
+ *
+ * @category Avatar
+ */
+export interface AvatarGroupProps extends Omit<BoxBaseProps, 'type'> {
+    max?: number;
+    overlap?: number;
+    size?: ElementSize;
+    shape?: ElementShape;
+    border?: ElementBorder;
+    borderColor?: BorderColor;
+    overflow?: (count: number) => ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Groups multiple Avatar components with optional overlap,
+ * size/shape override and overflow handling.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Avatar
+ */
+export declare const AvatarGroup: import('react').ForwardRefExoticComponent<AvatarGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './avatar';
+export * from './avatarGroup';

package/components/badge/badge.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { ElementAlign, ElementBorder, ElementElevation, ElementFont, ElementShape, ElementSize } from '../../utils/utils.ts';
+import { ElementAlign, ElementBorder, ElementElevation, ElementFont, ElementShape, ElementSize } from '../../utils/utils';
 import { BorderColor, SemanticColor } from '../../utils/color';
 /**
  * Props for the Badge component.

package/components/base/{boxBase/boxBase.d.ts → boxBase.d.ts}

@@ -1,6 +1,5 @@
-import { default as React, HTMLAttributes, ReactNode } from 'react';
-import { ElementBorder, ElementElevation, ElementShape } from '../../../utils/utils.ts';
-import { BorderColor, SurfaceColor } from '../../../utils/color';
+import { CSSProperties, ElementType, HTMLAttributes, ReactNode } from 'react';
+import { BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape, SurfaceColor, WrapperProps } from '../../utils';
 /**
  * Layout mode for {@link BoxBase}.
  *
@@ -28,11 +27,11 @@ export type BoxDirection = 'row' | 'col';
  *
  * @category Box
  */
-export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
+export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'content'>, WrapperProps {
     /** Maps to `align-content` (grid/flex-wrap content alignment). */
-    alignContent?: React.CSSProperties['alignContent'];
+    alignContent?: CSSProperties['alignContent'];
     /** Maps to `align-items` (cross-axis alignment). */
-    alignItems?: React.CSSProperties['alignItems'];
+    alignItems?: CSSProperties['alignItems'];
     /** Border width (0–5). */
     border?: ElementBorder;
     /** Border color token. */
@@ -46,7 +45,7 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>
     /** Grid template columns (`3` → `repeat(3, 1fr)`). */
     cols?: number | string;
     /** Custom HTML element/component. Default: `div`. */
-    component?: React.ElementType;
+    component?: ElementType;
     /** Layout direction (`row` or `col`) for flex. Ignored if `row` or `col` is set. */
     direction?: BoxDirection;
     /** Native disabled attribute. Applied when supported by the rendered element. */
@@ -57,8 +56,12 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>
     elevation?: ElementElevation;
     /** Auto-placement flow direction for grid layouts. */
     flow?: BoxDirection;
+    /** Font token controlling typography (size, weight, line-height). */
+    font?: ElementFont;
+    /** Forces full height (100%). */
+    hf?: boolean;
     /** Forces full width (100%). */
-    fullWidth?: boolean;
+    wf?: boolean;
     /** Gap between children (flex/grid). */
     gap?: number | string;
     /** Horizontal gap (`column-gap`). */
@@ -70,7 +73,7 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>
     /** Renders as `inline-flex`, `inline-grid` or `inline-block`. */
     inline?: boolean;
     /** Maps to `justify-content` (main-axis alignment). */
-    justifyContent?: React.CSSProperties['justifyContent'];
+    justifyContent?: CSSProperties['justifyContent'];
     /** Padding (all sides). */
     p?: number | string;
     /** Padding bottom. */
@@ -78,7 +81,7 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>
     /** Padding left. */
     pl?: number | string;
     /** Maps to `place-items` (grid shortcut for align+justify items). */
-    placeItems?: React.CSSProperties['placeItems'];
+    placeItems?: CSSProperties['placeItems'];
     /** Padding right. */
     pr?: number | string;
     /** Padding top. */
@@ -97,6 +100,10 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>
     type?: BoxType;
     /** Enables wrapping (`flex-wrap: wrap`). */
     wrap?: boolean;
+    /** Width. */
+    w?: number | string;
+    /** Height. */
+    h?: number | string;
 }
 /**
  * `BoxBase` — core layout primitive powering all semantic containers
@@ -123,4 +130,4 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>
  *
  * @category Box
  */
-export declare const BoxBase: React.ForwardRefExoticComponent<BoxBaseProps & React.RefAttributes<HTMLElement>>;
+export declare const BoxBase: import('react').ForwardRefExoticComponent<BoxBaseProps & import('react').RefAttributes<HTMLElement>>;

package/components/base/{buttonBase/buttonBase.d.ts → buttonBase.d.ts}

@@ -1,6 +1,5 @@
 import { default as React, ReactNode } from 'react';
-import { ElementAlign, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTouchEffect } from '../../../utils/utils.ts';
-import { BorderColor, SemanticColor, SurfaceColor } from '../../../utils/color';
+import { BorderColor, ElementAlign, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTouchEffect, SemanticColor, SurfaceColor } from '../../utils';
 /**
  * Props for the ButtonBase component.
  *
@@ -38,7 +37,7 @@ export interface ButtonBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     /** Font token for label and content. */
     font?: ElementFont;
     /** Expands button to full width. */
-    fullWidth?: boolean;
+    wf?: boolean;
     /** Hover visual effects. */
     hoverEffects?: ElementHoverEffect[];
     /** Icon rendered at the start of the button. */

package/components/base/{checkboxBase/checkboxBase.d.ts → checkboxBase.d.ts}

@@ -1,7 +1,6 @@
 import { default as React, ReactNode } from 'react';
-import { ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect } from '../../../utils/utils.ts';
-import { MotionAnimation, MotionStyle } from '../../../types/index.ts';
-import { BorderColor, SemanticColor, SurfaceColor } from '../../../utils/color';
+import { BorderColor, ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect, SemanticColor, SurfaceColor } from '../../utils';
+import { MotionAnimation, MotionStyle } from '../../types';
 /**
  * Props for the CheckboxBase component.
  *

package/components/base/dialogBase.d.ts

@@ -0,0 +1,34 @@
+import { default as React, ReactNode } from 'react';
+import { BorderColor, ElementElevation, ElementOutline, ElementShape, ElementSize, SurfaceColor } from '../../utils';
+import { MotionAnimation, MotionStyle } from '../../types';
+export type DialogType = 'basic' | 'fullscreen' | 'dockRight' | 'dockLeft' | 'dockTop' | 'dockBottom';
+export type DialogAnimation = 'none' | MotionAnimation;
+export interface DialogBaseProps {
+    elementClass?: string;
+    open: boolean;
+    onClose?: () => void;
+    type?: DialogType;
+    color?: SurfaceColor;
+    elevation?: ElementElevation;
+    size?: ElementSize;
+    shape?: ElementShape;
+    border?: ElementOutline;
+    borderColor?: BorderColor;
+    wf?: boolean;
+    hf?: boolean;
+    fit?: boolean;
+    detached?: boolean;
+    animation?: DialogAnimation;
+    duration?: number;
+    disableBackdropClose?: boolean;
+    disableEscapeKey?: boolean;
+    children?: ReactNode;
+    className?: string;
+    motionStyle?: MotionStyle;
+    modal?: boolean;
+    autoFocus?: boolean;
+    flush?: boolean;
+    docked?: boolean;
+    anchored?: boolean;
+}
+export declare const DialogBase: React.ForwardRefExoticComponent<DialogBaseProps & React.RefAttributes<HTMLDivElement>>;

package/components/base/{fieldBase/fieldBase.d.ts → fieldBase.d.ts}

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-import { ElementBorder, ElementDensity, ElementFont, ElementShape } from '../../../utils/utils.ts';
-import { BorderColor, SemanticColor, SurfaceColor } from '../../../utils/color';
+import { BorderColor, ElementBorder, ElementDensity, ElementFont, ElementShape, SemanticColor, SurfaceColor } from '../../utils';
 type FieldVariant = 'filled' | 'outlined' | 'classic';
 export interface FieldBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'children'> {
     color?: SemanticColor;
@@ -22,7 +21,7 @@ export interface FieldBaseProps extends Omit<React.InputHTMLAttributes<HTMLInput
     outlined?: boolean;
     filled?: boolean;
     classic?: boolean;
-    fullWidth?: boolean;
+    wFull?: boolean;
     /** Control shape variant. */
     shape?: ElementShape;
     /** Text color override for the label. */

package/components/base/index.d.ts

@@ -0,0 +1,6 @@
+export * from './boxBase';
+export * from './buttonBase';
+export * from './checkboxBase';
+export * from './dialogBase';
+export * from './fieldBase';
+export * from './textBase';

package/components/base/textBase.d.ts

@@ -0,0 +1,44 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+import { BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape, SurfaceColor } from '../../utils';
+/**
+ * Props for {@link TextBase}.
+ *
+ * Defines typography and visual styling for text-level elements
+ * without introducing layout behaviour.
+ *
+ * @category Text
+ */
+export interface TextBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    /** Custom HTML element/component. Default: span. */
+    component?: React.ElementType;
+    /** Font token controlling typography (size, weight, line-height). */
+    font?: ElementFont;
+    /** Surface background token. */
+    color?: SurfaceColor;
+    /** Elevation level (0–5). */
+    elevation?: ElementElevation;
+    /** Shape/border-radius token. */
+    shape?: ElementShape;
+    /** Border width (0–5). */
+    border?: ElementBorder;
+    /** Border color token. */
+    borderColor?: BorderColor;
+    /** Semantic UUI element class (e.g. uui-text, uui-heading). */
+    elementClass?: string;
+    /** Text content. */
+    children?: ReactNode;
+}
+/**
+ * TextBase — core typography primitive powering semantic text components.
+ *
+ * Provides font tokens, color, border, shape and elevation styling
+ * for inline-level and text semantic elements.
+ *
+ * Intended as a foundation for components such as Text, Heading,
+ * Label or other typography-driven UI elements.
+ *
+ * @category Text
+ * @function
+ * @param props - Typography and visual styling props.
+ */
+export declare const TextBase: React.ForwardRefExoticComponent<TextBaseProps & React.RefAttributes<HTMLElement>>;

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,48 @@
+import { default as React, ElementType, ReactNode } from 'react';
+import { BoxBaseProps } from '../base';
+import { ElementDensity, ElementFont, SurfaceColor } from '../../utils';
+import { MotionAnimation, MotionStyle } from '../../types';
+/**
+ * Breadcrumb item.
+ *
+ * @function
+ * @param props - Item props.
+ */
+export interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+    icon?: ReactNode;
+    current?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Props for Breadcrumbs component.
+ *
+ * @category Navigation
+ */
+export interface BreadcrumbsProps extends BoxBaseProps {
+    items?: BreadcrumbItem[];
+    children?: ReactNode;
+    separator?: ReactNode;
+    maxItems?: number;
+    itemsBeforeCollapse?: number;
+    itemsAfterCollapse?: number;
+    renderItem?: (item: BreadcrumbItem, index: number) => ReactNode;
+    renderSeparator?: (index: number) => ReactNode;
+    renderCollapse?: (items: BreadcrumbItem[]) => ReactNode;
+    component?: ElementType;
+    itemComponent?: ElementType;
+    density?: ElementDensity;
+    font?: ElementFont;
+    color?: SurfaceColor;
+    animation?: MotionAnimation;
+    motionStyle?: MotionStyle;
+    duration?: number;
+}
+/**
+ * Breadcrumbs navigation component.
+ *
+ * @function
+ * @param props - Component props.
+ */
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;

package/components/button/button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBaseProps } from '../../index.ts';
+import { ButtonBaseProps } from '../base/buttonBase';
 /**
  * Props for {@link Button}.
  * Extends {@link ButtonBaseProps}.

package/components/calendar/calendar.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { BoxBaseProps } from '../base';
+/**
+ * Props for Calendar component.
+ *
+ * @category Calendar
+ */
+export interface CalendarProps extends Omit<BoxBaseProps, 'onChange'> {
+    /** The currently selected date. */
+    value?: Date;
+    /** Callback fired when a date is selected. */
+    onChange?: (date: Date) => void;
+    /** The date that is currently visible in the calendar. */
+    viewDate?: Date;
+}
+/**
+ * Calendar component following MD3 guidelines.
+ *
+ * @function
+ * @param props Component properties.
+ * @category Calendar
+ */
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;

package/components/calendar/calendarUtils.d.ts

@@ -0,0 +1,18 @@
+export interface CalendarDay {
+    date: Date;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isSelected: boolean;
+}
+export declare const isSameDay: (d1: Date, d2: Date) => boolean;
+export declare const isSameMonth: (d1: Date, d2: Date) => boolean;
+export declare const isToday: (date: Date) => boolean;
+export declare const startOfMonth: (date: Date) => Date;
+export declare const endOfMonth: (date: Date) => Date;
+export declare const startOfWeek: (date: Date, weekStartsOn?: number) => Date;
+export declare const endOfWeek: (date: Date, weekStartsOn?: number) => Date;
+export declare const addMonths: (date: Date, months: number) => Date;
+export declare const addDays: (date: Date, days: number) => Date;
+export declare const getMonthDays: (viewDate: Date, selectedDate?: Date) => CalendarDay[];
+export declare const getWeekDaysShort: () => string[];
+export declare const formatMonthYear: (date: Date) => string;

package/components/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxBaseProps } from '../../index.ts';
+import { CheckboxBaseProps } from '../base';
 /**
  * Props for the Checkbox component.
  *

package/components/chip/chip.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBaseProps } from '../../index.ts';
+import { ButtonBaseProps } from '../base/buttonBase';
 export type ChipType = 'assist' | 'filter' | 'input' | 'suggestion';
 export interface ChipProps extends Omit<ButtonBaseProps, 'elementClass' | 'iconClass' | 'labelClass'> {
     /** Defines the visual style and behavior of the chip. @default 'assist' */