@ufoui/core 0.0.5 → 0.0.40

package/assets/icons.d.ts

@@ -1,8 +1,14 @@
+export declare const ChevronRightIcon: import("react/jsx-runtime").JSX.Element;
+export declare const CloseIcon: import("react/jsx-runtime").JSX.Element;
+export declare const ArrowBackIcon: import("react/jsx-runtime").JSX.Element;
+export declare const MoreVertIcon: import("react/jsx-runtime").JSX.Element;
 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 MenuCheckIcon: 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/components/accordion/accordion.d.ts

@@ -1,15 +1,43 @@
 import { ReactNode } from 'react';
-import { BoxBaseProps } from '../base/boxBase';
+import { BoxBaseProps } from '../base';
+import { BaseColor, BorderColor, ElementBorder, ElementDensity, ElementElevation, ElementFont, ElementShape } 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?: BaseColor;
+    disabled?: boolean;
+};
 /**
  * Props for {@link Accordion}.
  *
  * @category Accordion
  */
-export interface AccordionProps extends Omit<BoxBaseProps, 'type'> {
+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.
@@ -21,4 +49,4 @@ export interface AccordionProps extends Omit<BoxBaseProps, 'type'> {
  *
  * @category Accordion
  */
-export declare const Accordion: ({ type, children, ...rest }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1,5 +1,8 @@
-import { ReactNode } from 'react';
+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}.
  *
@@ -9,9 +12,34 @@ export interface AccordionItemProps {
     /** Unique item value used to control selection state. */
     value: string;
     /** Item header content rendered inside the trigger button. */
-    title: ReactNode;
+    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.
@@ -24,7 +52,7 @@ export interface AccordionItemProps {
  * @category Accordion
  */
 export declare const AccordionItem: {
-    ({ value, title, children, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ 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.
      *

package/components/badge/badge.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { ElementAlign, ElementBorder, ElementElevation, ElementFont, ElementShape, ElementSize } from '../../utils/utils';
+import { ElementBorder, ElementElevation, ElementFont, ElementPlacement, ElementShape, ElementSize } from '../../utils/utils';
 import { BorderColor, SemanticColor } from '../../utils/color';
 /**
  * Props for the Badge component.
@@ -10,7 +10,7 @@ import { BorderColor, SemanticColor } from '../../utils/color';
  */
 export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'ref' | 'size'> {
     /** Position relative to the parent element. */
-    align?: ElementAlign;
+    align?: ElementPlacement;
     /** Accessible label for screen readers when badge conveys information. */
     ariaLabel?: string;
     /** Border width when outlined. */

package/components/base/boxBase.d.ts

@@ -1,5 +1,5 @@
-import { default as React, HTMLAttributes, ReactNode } from 'react';
-import { BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape, SurfaceColor } from '../../utils';
+import { CSSProperties, ElementType, HTMLAttributes, ReactNode } from 'react';
+import { BaseColor, BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape, WrapperProps } from '../../utils';
 /**
  * Layout mode for {@link BoxBase}.
  *
@@ -27,27 +27,25 @@ export type BoxDirection = 'row' | 'col';
  *
  * @category Box
  */
-export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'content'> {
+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. */
     borderColor?: BorderColor;
-    /** Bottom offset. */
-    bottom?: number | string;
     /** React children inside the box. */
     children?: ReactNode;
     /** Layout direction shortcut. Same as `direction="col"`. */
     col?: boolean;
     /** Surface background token. Default: `'surface'`. */
-    color?: SurfaceColor;
+    color?: BaseColor;
     /** 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. */
@@ -75,23 +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'];
-    /** Left offset. */
-    left?: number | string;
-    /** Margin (all sides). */
-    m?: number | string;
-    /** Margin bottom. */
-    mb?: number | string;
-    /** Margin left. */
-    ml?: number | string;
-    /** Margin right. */
-    mr?: number | string;
-    /** Margin top. */
-    mt?: number | string;
-    /** Horizontal margin (`margin-left` + `margin-right`). */
-    mx?: number | string;
-    /** Vertical margin (`margin-top` + `margin-bottom`). */
-    my?: number | string;
+    justifyContent?: CSSProperties['justifyContent'];
     /** Padding (all sides). */
     p?: number | string;
     /** Padding bottom. */
@@ -99,9 +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'];
-    /** CSS position (mapped to `uui-*` class). */
-    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    placeItems?: CSSProperties['placeItems'];
     /** Padding right. */
     pr?: number | string;
     /** Padding top. */
@@ -110,22 +90,20 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'
     px?: number | string;
     /** Vertical padding (`padding-top` + `padding-bottom`). */
     py?: number | string;
-    /** Right offset. */
-    right?: number | string;
     /** Layout direction shortcut. Same as `direction="row"`. */
     row?: boolean;
     /** Grid template rows (`2` → `repeat(2, 1fr)`). */
     rows?: number | string;
     /** Shape/border-radius token (round, rounded, smooth, square). */
     shape?: ElementShape;
-    /** Top offset. */
-    top?: number | string;
     /** Layout mode (`flex`, `grid`, `block`). Default: `flex`. */
     type?: BoxType;
     /** Enables wrapping (`flex-wrap: wrap`). */
     wrap?: boolean;
-    /** Stacking order (z-index). */
-    zIndex?: number;
+    /** Width. */
+    w?: number | string;
+    /** Height. */
+    h?: number | string;
 }
 /**
  * `BoxBase` — core layout primitive powering all semantic containers
@@ -152,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.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactNode } from 'react';
-import { BorderColor, ElementAlign, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTouchEffect, SemanticColor, SurfaceColor } from '../../utils';
+import { BaseColor, BorderColor, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPlacement, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTouchEffect, SemanticColor } from '../../utils';
 /**
  * Props for the ButtonBase component.
  *
@@ -77,13 +77,13 @@ export interface ButtonBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     /** Shape override when selected. */
     selectedShape?: ElementShape;
     /** Text color override when selected. */
-    selectedTextColor?: SurfaceColor;
+    selectedTextColor?: BaseColor;
     /** Shape of the button. */
     shape?: ElementShape;
     /** Predefined button size. Default: medium */
     size?: ElementSize;
     /** Text color override. */
-    textColor?: SurfaceColor;
+    textColor?: BaseColor;
     /** Tooltip text and accessibility label fallback. */
     title?: string;
     /** Enables toggle button behavior. */
@@ -91,7 +91,7 @@ export interface ButtonBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     /** Enables tonal style. */
     tonal?: boolean;
     /** Tooltip alignment relative to the button. */
-    tooltipAlign?: ElementAlign;
+    tooltipAlign?: ElementPlacement;
     /** Touch and click visual effects. */
     touchEffects?: ElementTouchEffect[];
     /** Custom trailing content. */

package/components/base/checkboxBase.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ReactNode } from 'react';
-import { BorderColor, ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect, SemanticColor, SurfaceColor } from '../../utils';
+import { BorderColor, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPlacement, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect, SemanticColor, SurfaceColor } from '../../utils';
 import { MotionAnimation, MotionStyle } from '../../types';
 /**
  * Props for the CheckboxBase component.
@@ -83,7 +83,7 @@ export interface CheckboxBaseProps extends Omit<React.InputHTMLAttributes<HTMLIn
     /** Placement of text relative to the control. */
     textPlacement?: ElementTextPlacement;
     /** Tooltip alignment relative to the control. */
-    tooltipAlign?: ElementAlign;
+    tooltipAlign?: ElementPlacement;
     /** Touch and click visual effects. */
     touchEffects?: ElementTouchEffect[];
     /** Input type. */

package/components/base/dialogBase.d.ts

@@ -1,32 +1,130 @@
-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 = 'auto' | 'none' | MotionAnimation;
+import { default as React, ReactElement, ReactNode } from 'react';
+import { BorderColor, ElementElevation, ElementFont, ElementOutline, ElementShape, ElementSize, SurfaceColor } from '../../utils';
+import { DialogAnimation, DialogIconSlot, DialogType, MotionStyle } from '../../types';
+/**
+ * Props for the DialogBase component.
+ *
+ * Supports backdrop and portal rendering, transitions, Escape and backdrop
+ * dismiss, and optional modal focus trap and scroll locking.
+ *
+ * @category Base components
+ */
 export interface DialogBaseProps {
-    elementClass: string;
+    /** Semantic UUI element class for the dialog panel. */
+    elementClass?: string;
+    /** Whether the dialog is open. */
     open: boolean;
+    /** Handler invoked when the dialog should close. */
     onClose?: () => void;
+    /** Layout mode. Default: basic */
     type?: DialogType;
+    /** Surface background token. */
     color?: SurfaceColor;
+    /** Elevation level. Default: 3 for non-fullscreen layouts. */
     elevation?: ElementElevation;
+    /** Predefined panel size. Default: small for horizontal docks, medium otherwise. */
     size?: ElementSize;
+    /** Shape of the dialog panel. */
     shape?: ElementShape;
+    /** Outline thickness when outlined. */
     border?: ElementOutline;
+    /** Outline color when outlined. */
     borderColor?: BorderColor;
+    /** Expands panel to full width. */
+    fullWidth?: boolean;
+    /** Expands panel to full height. */
+    fullHeight?: boolean;
+    /** Fits content to the panel. */
+    fit?: boolean;
+    /** Renders the panel in detached layout style. */
+    detached?: boolean;
+    /** Animation preset; `'none'` disables motion. */
     animation?: DialogAnimation;
+    /** Duration in milliseconds for open and close animations. Default: 500 */
     duration?: number;
-    disableBackdropClose?: boolean;
-    disableEscapeKey?: boolean;
+    /** Whether the dialog closes when the backdrop is clicked. Default: true */
+    closeOnBackdrop?: boolean;
+    /** Whether the dialog closes when Escape is pressed. Default: true */
+    closeOnEsc?: boolean;
+    /** Dialog content. */
     children?: ReactNode;
+    /** Visual title text. Referenced via aria-labelledby on the dialog element. */
+    label?: string;
+    /** Accessible label for dialogs without a visible title. */
+    'aria-label'?: string;
+    /** Icon rendered in the dialog. Position controlled by iconSlot. */
+    icon?: ReactElement;
+    showIcon?: boolean;
+    iconColor?: SurfaceColor;
+    /** Where the icon is placed. Default: leading */
+    iconSlot?: DialogIconSlot;
+    /** Alignment of the title text. Default: start */
+    titleAlign?: 'start' | 'center' | 'end';
+    /** Full leading slot content for the title area. */
+    leading?: ReactNode;
+    /** Trailing slot content for the title area. */
+    trailing?: ReactNode;
+    /** Action buttons rendered in the dialog. */
+    actions?: ReactNode;
+    /** Where actions are placed. Default: inline for fullscreen, bottom otherwise (MD3) */
+    actionsPlacement?: 'top' | 'subtitle' | 'bottom' | 'inline';
+    /** Alignment of action buttons. Default: end (MD3) */
+    actionsAlign?: 'start' | 'center' | 'end';
+    /** Stack actions vertically instead of horizontally. Default: false (MD3) */
+    actionsStack?: boolean;
+    /** Maximum number of visible actions before the rest collapse into an overflow menu. Only applies when actionsPosition is inline. */
+    maxActions?: number;
+    /** Accessible label for the overflow actions button. Default: "More actions" */
+    moreLabel?: string;
+    /** Custom icon for the overflow actions button. */
+    moreIcon?: ReactElement;
+    /** Renders a close button in the trailing slot. */
+    showClose?: boolean;
+    /** Custom icon for the close button. */
+    closeIcon?: ReactElement;
+    /** Renders a back button in the leading slot. */
+    showBack?: boolean;
+    /** Custom icon for the back button. */
+    backIcon?: ReactElement;
+    /** Handler for the back button. Defaults to onClose. */
+    onBack?: () => void;
+    /** Additional class names for the dialog panel. */
     className?: string;
+    /** Motion style helper classes for the panel. */
     motionStyle?: MotionStyle;
+    /** Enables modal behaviour, focus trap, aria-modal, and body scroll lock when applicable. */
     modal?: boolean;
-    title?: string;
-    actions?: ReactNode[];
-    icon?: ReactNode;
-    showCloseButton?: boolean;
-    showHandle?: boolean;
+    /** Focuses the dialog when opened (with modal focus trap). */
     autoFocus?: boolean;
+    /** Removes default panel padding. */
+    flush?: boolean;
+    /** Renders inline without a portal (e.g. docked regions). */
+    docked?: boolean;
+    /** Skips portaling and modal body scroll lock; for anchored overlays. */
+    anchored?: boolean;
+    font?: ElementFont;
+    titleFont?: ElementFont;
 }
+/**
+ * Low-level base component for modal and docked dialogs.
+ *
+ * Renders a backdrop and panel (via BoxBase), portaled to `#dialog-root` (created if
+ * missing; see {@link renderPortal}) unless `docked` or `anchored`.
+ *
+ *
+ * @param props Component properties.
+ * @function
+ *
+ * @example
+ * <DialogBase open={open} onClose={() => setOpen(false)} modal>
+ * {children}
+ * </DialogBase>
+ *
+ * @example
+ * <DialogBase open type="dockRight" anchored >
+ * {children}
+ * </DialogBase>
+ *
+ * @category Base components
+ */
 export declare const DialogBase: React.ForwardRefExoticComponent<DialogBaseProps & React.RefAttributes<HTMLDivElement>>;

package/components/base/fieldBase.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-import { ElementBorder, ElementDensity, ElementFont, ElementShape } from '../../utils/utils';
-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;

package/components/base/textBase.d.ts

@@ -1,6 +1,5 @@
 import { default as React, HTMLAttributes, ReactNode } from 'react';
-import { ElementBorder, ElementElevation, ElementFont, ElementShape } from '../../utils/utils';
-import { BorderColor, SurfaceColor } from '../../utils/color';
+import { BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape, SurfaceColor } from '../../utils';
 /**
  * Props for {@link TextBase}.
  *

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

@@ -1,10 +1,10 @@
 import { HTMLProps } from 'react';
-import { ElementAlign, ElementShape, ElementSize } from '../../utils/utils';
+import { ElementPlacement, ElementShape, ElementSize } from '../../utils/utils';
 import { SemanticColor } from '../../utils/color';
 export interface CardProps extends Omit<HTMLProps<HTMLSpanElement>, 'ref' | 'size'> {
     value: string | number;
     color?: SemanticColor;
-    position?: ElementAlign;
+    position?: ElementPlacement;
     size?: ElementSize;
     shape?: ElementShape;
     raised?: boolean;

package/components/collapse/collapse.d.ts

@@ -1,38 +1,33 @@
 import { ReactNode } from 'react';
-import { ElementOrientation } from '../../utils';
-import { BoxBaseProps } from '../base/boxBase';
+import { BoxBaseProps } from '../base';
 import { MotionAnimation, MotionStyle } from '../../types';
 /**
  * Props for the Collapse component.
  *
- * @category Base components
+ * @category Collapse
  */
-export interface CollapseProps extends BoxBaseProps {
-    /** Controls whether the container is expanded. */
-    open: boolean;
-    /** Motion animation key. Default: slideDown */
+export interface CollapseProps extends Omit<BoxBaseProps, 'elevation'> {
+    /** Motion animation key. Default: slideDown. */
     animation?: MotionAnimation;
-    /** Animation duration in milliseconds. Default: 250 */
-    duration?: number;
-    /** Motion style variant. */
-    motionStyle?: MotionStyle;
-    /** Custom content rendered inside the container. */
+    /** Content rendered inside the container. */
     children?: ReactNode;
     /** Additional root class name. */
     className?: string;
-    /** Collapse axis. Default: vertical */
-    orientation?: ElementOrientation;
+    /** Animation duration in milliseconds. Default: 220. */
+    duration?: number;
+    /** Motion style variant. */
+    motionStyle?: MotionStyle;
+    /** Controls whether the container is expanded. */
+    open: boolean;
 }
 /**
- * Animated layout container that expands and collapses
- * along vertical or horizontal axis.
+ * Animated container that expands and collapses vertically.
  *
- * Combines dimension animation (height / width)
- * with UUI motion system.
+ * Animates height and integrates with the UUI motion system.
  *
  * @function
- * @param props - Component properties.
+ * @param props Component properties.
  *
- * @category Base components
+ * @category Collapse
  */
 export declare const Collapse: import('react').ForwardRefExoticComponent<CollapseProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/dialogs/dialog.d.ts

@@ -1,4 +1,4 @@
-import { DialogBaseProps } from '../base/dialogBase';
+import { DialogBaseProps } from '../base';
 /**
  * Props for {@link Dialog}.
  * Extends {@link DialogBaseProps}.