@ufoui/core 0.0.4 → 0.0.5

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,8 @@
+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;

package/assets/index.d.ts

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

package/components/accordion/accordion.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { BoxBaseProps } from '../base/boxBase';
+/**
+ * Props for {@link Accordion}.
+ *
+ * @category Accordion
+ */
+export interface AccordionProps extends Omit<BoxBaseProps, 'type'> {
+    /** Accordion behavior mode. Default: 'single'. */
+    type?: 'single' | 'multiple';
+    /** Accordion items. */
+    children: ReactNode;
+}
+/**
+ * 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, children, ...rest }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/components/accordion/accordionItem.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { IS_ACCORDION_ITEM } from './accordionItem.guards';
+/**
+ * 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. */
+    title: ReactNode;
+    /** Panel content displayed when the item is expanded. */
+    children: ReactNode;
+}
+/**
+ * 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, title, children, }: 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 { BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape, SurfaceColor } from '../../utils';
 /**
  * Layout mode for {@link BoxBase}.
  *
@@ -28,7 +27,7 @@ export type BoxDirection = 'row' | 'col';
  *
  * @category Box
  */
-export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
+export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'content'> {
     /** Maps to `align-content` (grid/flex-wrap content alignment). */
     alignContent?: React.CSSProperties['alignContent'];
     /** Maps to `align-items` (cross-axis alignment). */
@@ -37,6 +36,8 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>
     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"`. */
@@ -57,6 +58,10 @@ 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%). */
+    fullHeight?: boolean;
     /** Forces full width (100%). */
     fullWidth?: boolean;
     /** Gap between children (flex/grid). */
@@ -71,6 +76,22 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>
     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;
     /** Padding (all sides). */
     p?: number | string;
     /** Padding bottom. */
@@ -79,6 +100,8 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>
     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';
     /** Padding right. */
     pr?: number | string;
     /** Padding top. */
@@ -87,16 +110,22 @@ 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;
 }
 /**
  * `BoxBase` — core layout primitive powering all semantic containers

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.
  *

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/dialog.d.ts → dialogBase.d.ts}

@@ -1,10 +1,10 @@
 import { default as React, ReactNode } from 'react';
-import { ElementElevation, ElementOutline, ElementShape, ElementSize } from '../../../utils/utils.ts';
-import { MotionAnimation, MotionStyle } from '../../../types/index.ts';
-import { BorderColor, SurfaceColor } from '../../../utils/color';
+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;
-export interface DialogProps {
+export interface DialogBaseProps {
+    elementClass: string;
     open: boolean;
     onClose?: () => void;
     type?: DialogType;
@@ -29,7 +29,4 @@ export interface DialogProps {
     showHandle?: boolean;
     autoFocus?: boolean;
 }
-export declare const Dialog: {
-    ({ open, onClose, type, color, elevation, shape, border, borderColor, size, animation, duration, disableBackdropClose, disableEscapeKey, children, className, motionStyle, modal, }: DialogProps): React.ReactPortal | null;
-    displayName: string;
-};
+export declare const DialogBase: React.ForwardRefExoticComponent<DialogBaseProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { ElementBorder, ElementDensity, ElementFont, ElementShape } from '../../../utils/utils.ts';
-import { BorderColor, SemanticColor, SurfaceColor } from '../../../utils/color';
+import { ElementBorder, ElementDensity, ElementFont, ElementShape } from '../../utils/utils';
+import { BorderColor, SemanticColor, SurfaceColor } from '../../utils/color';
 type FieldVariant = 'filled' | 'outlined' | 'classic';
 export interface FieldBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'children'> {
     color?: SemanticColor;

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,45 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+import { ElementBorder, ElementElevation, ElementFont, ElementShape } from '../../utils/utils';
+import { BorderColor, SurfaceColor } from '../../utils/color';
+/**
+ * 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/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/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' */

package/components/collapse/collapse.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { ElementOrientation } from '../../utils';
+import { BoxBaseProps } from '../base/boxBase';
+import { MotionAnimation, MotionStyle } from '../../types';
+/**
+ * Props for the Collapse component.
+ *
+ * @category Base components
+ */
+export interface CollapseProps extends BoxBaseProps {
+    /** Controls whether the container is expanded. */
+    open: boolean;
+    /** 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. */
+    children?: ReactNode;
+    /** Additional root class name. */
+    className?: string;
+    /** Collapse axis. Default: vertical */
+    orientation?: ElementOrientation;
+}
+/**
+ * Animated layout container that expands and collapses
+ * along vertical or horizontal axis.
+ *
+ * Combines dimension animation (height / width)
+ * with UUI motion system.
+ *
+ * @function
+ * @param props - Component properties.
+ *
+ * @category Base components
+ */
+export declare const Collapse: import('react').ForwardRefExoticComponent<CollapseProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/dialogs/bottomSheet.d.ts

@@ -0,0 +1,23 @@
+import { DialogBaseProps } from '../base/dialogBase';
+/**
+ * Props for {@link BottomSheet}.
+ * Extends {@link DialogBaseProps}.
+ *
+ * @category BottomSheet
+ */
+export type BottomSheetProps = Omit<DialogBaseProps, 'elementClass' | 'type'>;
+/**
+ * Bottom sheet component used to display supplementary content anchored to the bottom of the screen.
+ *
+ * Use for actions, filters, or contextual mobile interactions.
+ *
+ * @category BottomSheet
+ * @function
+ * @param props - All bottom sheet props inherited from {@link DialogBase}.
+ *
+ * @example
+ * <BottomSheet open onClose={() => setOpen(false)}>
+ *   Content
+ * </BottomSheet>
+ */
+export declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/dialogs/dialog.d.ts

@@ -0,0 +1,21 @@
+import { DialogBaseProps } from '../base/dialogBase';
+/**
+ * Props for {@link Dialog}.
+ * Extends {@link DialogBaseProps}.
+ *
+ * @category Dialog
+ */
+export type DialogProps = Omit<DialogBaseProps, 'elementClass'>;
+/**
+ * Dialog component used to display modal or non-modal content above the app layer.
+ *
+ * @category Dialog
+ * @function
+ * @param props - All dialog props inherited from {@link DialogBase}.
+ *
+ * @example
+ * <Dialog open onClose={() => setOpen(false)}>
+ *   Content
+ * </Dialog>
+ */
+export declare const Dialog: import('react').ForwardRefExoticComponent<DialogProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/{dialog → dialogs}/dialogActions.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { ElementOutline } from '../../utils/utils.ts';
-import { BorderColor, SurfaceColor } from '../../utils/color';
+import { BorderColor, ElementOutline, SurfaceColor } from '../../utils';
 export interface DialogActionsProps {
     children?: ReactNode;
     className?: string;

package/components/{dialog → dialogs}/dialogTitle.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { ElementFont } from '../../utils/utils.ts';
-import { SurfaceColor } from '../../utils/color';
+import { ElementFont, SurfaceColor } from '../../utils';
 export interface DialogTitleProps {
     icon?: ReactNode;
     label?: string;

package/components/dialogs/drawer.d.ts

@@ -0,0 +1,23 @@
+import { DialogBaseProps } from '../base/dialogBase';
+/**
+ * Props for {@link Drawer}.
+ * Extends {@link DialogBaseProps}.
+ *
+ * @category Drawer
+ */
+export type DrawerProps = Omit<DialogBaseProps, 'elementClass' | 'type'>;
+/**
+ * Drawer component used to display side content that slides in from the edge of the screen.
+ *
+ * Use for navigation panels, filters, or contextual content.
+ *
+ * @category Drawer
+ * @function
+ * @param props - All drawer props inherited from {@link DialogBase}.
+ *
+ * @example
+ * <Drawer open onClose={() => setOpen(false)}>
+ *   Content
+ * </Drawer>
+ */
+export declare const Drawer: import('react').ForwardRefExoticComponent<DrawerProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/dialogs/index.d.ts

@@ -0,0 +1,6 @@
+export * from './dialog';
+export * from './dialogActions';
+export * from './dialogContent';
+export * from './dialogTitle';
+export * from './drawer';
+export * from './bottomSheet';

package/components/divider/divider.d.ts

@@ -1,5 +1,5 @@
 import { HTMLProps } from 'react';
-import { BorderColor, ElementBorder, ElementElevation, ElementInset, ElementShape } from '../../index.ts';
+import { BorderColor, ElementBorder, ElementElevation, ElementInset, ElementShape } from '../../utils';
 import { IS_DIVIDER } from './divider.guards';
 /**
  * Props for the {@link Divider} component.

package/components/divider/divider.guards.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { DividerProps } from '../../index.ts';
+import { DividerProps } from './divider';
 export declare const IS_DIVIDER: unique symbol;
 /**
  * Type guard that checks whether a React node is a Divider component.

package/components/fab/fab.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { ButtonBaseProps } from '../../index.ts';
+import { ButtonBaseProps } from '../base/buttonBase';
 /**
  * Props for {@link Fab}.
  * Extends {@link ButtonBaseProps}.