@ufoui/core 0.0.5 → 0.0.12

package/assets/icons.d.ts

@@ -6,3 +6,6 @@ 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/components/accordion/accordion.d.ts

@@ -1,15 +1,43 @@
 import { ReactNode } from 'react';
-import { BoxBaseProps } from '../base/boxBase';
+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'> {
+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/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 { BorderColor, ElementBorder, ElementElevation, ElementFont, ElementShape, SurfaceColor, WrapperProps } from '../../utils';
 /**
  * Layout mode for {@link BoxBase}.
  *
@@ -27,17 +27,15 @@ 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"`. */
@@ -47,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. */
@@ -61,9 +59,9 @@ export interface BoxBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'
     /** Font token controlling typography (size, weight, line-height). */
     font?: ElementFont;
     /** Forces full height (100%). */
-    fullHeight?: boolean;
+    hf?: boolean;
     /** Forces full width (100%). */
-    fullWidth?: boolean;
+    wf?: boolean;
     /** Gap between children (flex/grid). */
     gap?: number | string;
     /** Horizontal gap (`column-gap`). */
@@ -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

@@ -37,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/dialogBase.d.ts

@@ -2,9 +2,9 @@ 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;
+export type DialogAnimation = 'none' | MotionAnimation;
 export interface DialogBaseProps {
-    elementClass: string;
+    elementClass?: string;
     open: boolean;
     onClose?: () => void;
     type?: DialogType;
@@ -14,6 +14,10 @@ export interface DialogBaseProps {
     shape?: ElementShape;
     border?: ElementOutline;
     borderColor?: BorderColor;
+    wf?: boolean;
+    hf?: boolean;
+    fit?: boolean;
+    detached?: boolean;
     animation?: DialogAnimation;
     duration?: number;
     disableBackdropClose?: boolean;
@@ -22,11 +26,9 @@ export interface DialogBaseProps {
     className?: string;
     motionStyle?: MotionStyle;
     modal?: boolean;
-    title?: string;
-    actions?: ReactNode[];
-    icon?: ReactNode;
-    showCloseButton?: boolean;
-    showHandle?: boolean;
     autoFocus?: boolean;
+    flush?: boolean;
+    docked?: boolean;
+    anchored?: boolean;
 }
 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;
@@ -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/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/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}.

package/components/dialogs/dialogTitle.d.ts

@@ -10,6 +10,6 @@ export interface DialogTitleProps {
     textColor?: SurfaceColor;
 }
 export declare const DialogTitle: {
-    ({ icon, label, children, className, font, }: DialogTitleProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ icon, label, children, className, font }: DialogTitleProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/components/dialogs/drawer.d.ts

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

package/components/fieldset/fieldset.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ElementFont, SurfaceColor } from '../../utils';
-import { BoxBaseProps } from '../base/boxBase';
+import { BoxBaseProps } from '../base';
 /**
  * Props for {@link Fieldset}.
  * Extends {@link BoxBaseProps} except for `elementClass` and `component`.

package/components/link/link.d.ts

@@ -0,0 +1,58 @@
+import { default as React, ElementType, ReactNode } from 'react';
+import { ElementFocusEffect, ElementFont, ElementHoverEffect, ElementPressedEffect, SurfaceColor } from '../../utils';
+/**
+ * Props for the Link component.
+ *
+ * Inline link element with optional leading and trailing content and animated underline.
+ *
+ * @category Link
+ */
+export type LinkProps<T extends ElementType = 'a'> = {
+    /** Underlying element or router component. */
+    as?: T;
+    /** Link content. */
+    children?: ReactNode;
+    /** Fallback text when children is not provided. */
+    label?: string;
+    /** Leading visual element. */
+    leading?: ReactNode;
+    /** Trailing visual element. */
+    trailing?: ReactNode;
+    /** Surface color token applied to text. */
+    color?: SurfaceColor;
+    /** Underline visibility behavior. */
+    underline?: 'none' | 'hover' | 'always';
+    /** Font token applied to content. */
+    font?: ElementFont;
+    /** Opens link in new tab with security attributes. */
+    isExternal?: boolean;
+    /** Accessibility label override. */
+    'aria-label'?: string;
+    /** Additional class applied to the root element. */
+    className?: string;
+    /** Disables interaction and focus. */
+    disabled?: boolean;
+    /** Hover visual effects. */
+    hoverEffects?: ElementHoverEffect[];
+    /** Focus visual effects. */
+    focusEffects?: ElementFocusEffect[];
+    /** Pressed visual effects. */
+    pressedEffects?: ElementPressedEffect[];
+    /** Underline animation origin. */
+    underlineOrigin?: 'left' | 'center';
+    /** Underline animation type. */
+    underlineAnimation?: 'scale' | 'fade';
+} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'color' | 'children' | 'className'>;
+export interface LinkComponent {
+    <T extends ElementType = 'a'>(props: LinkProps<T>): ReactNode;
+    displayName?: string;
+}
+/**
+ * Inline link component with optional leading and trailing content and animated underline.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Link
+ */
+export declare const Link: LinkComponent;

package/components/list/list.d.ts

@@ -5,4 +5,4 @@ export interface ListProps extends Omit<BoxBaseProps, 'type'> {
     defaultValue?: string;
     children: ReactNode;
 }
-export declare const List: ({ type, defaultValue, children, }: ListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const List: ({ type, defaultValue, children }: ListProps) => import("react/jsx-runtime").JSX.Element;

package/components/rating/rating.d.ts

@@ -0,0 +1,68 @@
+import { default as React, ReactNode } from 'react';
+import { ElementAlign, ElementDensity, ElementFocusEffect, ElementFont, ElementSize, ElementTextPlacement, SurfaceColor } from '../../utils';
+/**
+ * Props for the Rating component.
+ *
+ * Numeric rating control rendered as a star slider with optional label and description.
+ *
+ * @category Rating
+ */
+export interface RatingProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'defaultValue' | 'size'> {
+    /** Additional class applied to the root element. */
+    className?: string;
+    /** Color applied to the filled icons. */
+    color?: SurfaceColor;
+    /** Initial rating value for uncontrolled usage. */
+    defaultValue?: number;
+    /** Visual density of the control. */
+    density?: ElementDensity;
+    /** Supporting text displayed below the control. */
+    description?: string;
+    /** Disables interaction with the control. */
+    disabled?: boolean;
+    /** Icon used for the empty rating state. */
+    emptyIcon?: ReactNode;
+    /** Error message displayed below the control. */
+    error?: string;
+    /** Enables filled visual style for icons. */
+    filled?: boolean;
+    /** Visual effects applied when the control receives focus. */
+    focusEffects?: ElementFocusEffect[];
+    /** Font applied to the label text. */
+    font?: ElementFont;
+    /** Icon used for the filled rating state. */
+    icon?: ReactNode;
+    /** DOM id used for accessibility attributes. */
+    id?: string;
+    /** Label text displayed next to the control. */
+    label?: string;
+    /** Maximum rating value. */
+    max?: number;
+    /** Called when the rating value changes. */
+    onChange?: (value: number) => void;
+    /** Prevents value changes while keeping the control focusable. */
+    readOnly?: boolean;
+    /** Marks the control as required. */
+    required?: boolean;
+    /** Visual size of the rating icons. */
+    size?: ElementSize;
+    /** Step size used for keyboard and pointer interaction. */
+    step?: number;
+    /** Placement of label and description relative to the control. */
+    textPlacement?: ElementTextPlacement;
+    /** Tooltip alignment relative to the control. */
+    tooltipAlign?: ElementAlign;
+    /** Current rating value when used as a controlled component. */
+    value?: number;
+}
+/**
+ * Star rating input rendered as an interactive slider.
+ *
+ * Supports mouse, keyboard and form integration through a hidden input.
+ *
+ * @function
+ * @param props Component properties.
+ *
+ * @category Rating
+ */
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLInputElement>>;

package/components/slider/slider.d.ts

@@ -0,0 +1,11 @@
+export interface SliderProps {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    name?: string;
+    disabled?: boolean;
+    onChange?: (value: number) => void;
+}
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLDivElement>>;