@clarlabs/ui 0.1.3 → 0.1.4

package/dist/index.d.ts

@@ -28,6 +28,51 @@ export declare interface AlertProps {
 
 export declare type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 
+declare const Audio_2: default_2.ForwardRefExoticComponent<AudioProps & default_2.RefAttributes<HTMLAudioElement>>;
+export { Audio_2 as Audio }
+
+export declare interface AudioProps extends Omit<default_2.AudioHTMLAttributes<HTMLAudioElement>, 'className'> {
+    /** Audio source URL */
+    src: string;
+    /** Alternative sources for different formats */
+    sources?: {
+        src: string;
+        type: string;
+    }[];
+    /** Title/name of the audio track */
+    title?: string;
+    /** Artist or creator name */
+    artist?: string;
+    /** Album or collection name */
+    album?: string;
+    /** Cover art/thumbnail URL */
+    coverArt?: string;
+    /** Variant style of the player */
+    variant?: AudioVariant;
+    /** Whether to show native controls */
+    controls?: boolean;
+    /** Whether to autoplay the audio */
+    autoPlay?: boolean;
+    /** Whether to loop the audio */
+    loop?: boolean;
+    /** Whether to mute the audio */
+    muted?: boolean;
+    /** Whether to preload the audio */
+    preload?: 'none' | 'metadata' | 'auto';
+    /** Custom className for the container */
+    className?: string;
+    /** Error callback */
+    onError?: (error: default_2.SyntheticEvent<HTMLAudioElement>) => void;
+    /** Play callback */
+    onPlay?: () => void;
+    /** Pause callback */
+    onPause?: () => void;
+    /** Ended callback */
+    onEnded?: () => void;
+}
+
+export declare type AudioVariant = 'minimal' | 'standard' | 'detailed';
+
 export declare function Avatar({ src, alt, initials, size, status, className }: AvatarProps): default_2.JSX.Element;
 
 export declare interface AvatarProps {
@@ -114,6 +159,37 @@ export declare interface CheckboxProps extends Omit<default_2.InputHTMLAttribute
     indeterminate?: boolean;
 }
 
+export declare type ColorFormat = 'hex' | 'rgb' | 'hsl';
+
+export declare function ColorPicker({ value: controlledValue, defaultValue, onChange, format, label, disabled, showPresets, presets, showAlpha, className, helperText, error }: ColorPickerProps): default_2.JSX.Element;
+
+export declare interface ColorPickerProps {
+    /** Current color value */
+    value?: string;
+    /** Default color value */
+    defaultValue?: string;
+    /** Callback when color changes */
+    onChange?: (color: string) => void;
+    /** Color format */
+    format?: ColorFormat;
+    /** Label for the picker */
+    label?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Show preset colors */
+    showPresets?: boolean;
+    /** Custom preset colors */
+    presets?: string[];
+    /** Show alpha channel */
+    showAlpha?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Error message */
+    error?: string;
+}
+
 export declare function Combobox({ options, value: controlledValue, defaultValue, onChange, placeholder, disabled, className, allowCustomValue, filterFunction }: ComboboxProps): default_2.JSX.Element;
 
 export declare interface ComboboxOption {
@@ -134,6 +210,61 @@ export declare interface ComboboxProps {
     filterFunction?: (option: ComboboxOption, searchTerm: string) => boolean;
 }
 
+export declare function Container({ size, padding, centered, fluid, className, children, ...props }: ContainerProps): default_2.JSX.Element;
+
+export declare type ContainerPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare interface ContainerProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** Maximum width of the container */
+    size?: ContainerSize;
+    /** Padding on the sides */
+    padding?: ContainerPadding;
+    /** Whether to center the container */
+    centered?: boolean;
+    /** Whether the container should be fluid (no max-width) */
+    fluid?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Children */
+    children: default_2.ReactNode;
+}
+
+export declare type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+
+export declare function ContextMenu({ items, children, className, disabled }: ContextMenuProps): default_2.JSX.Element;
+
+export declare interface ContextMenuItem {
+    /** Unique identifier */
+    id: string;
+    /** Label to display */
+    label: string;
+    /** Icon element */
+    icon?: default_2.ReactNode;
+    /** Callback when item is clicked */
+    onClick?: () => void;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Separator after this item */
+    separator?: boolean;
+    /** Keyboard shortcut to display */
+    shortcut?: string;
+    /** Danger variant (red styling) */
+    danger?: boolean;
+    /** Submenu items */
+    submenu?: ContextMenuItem[];
+}
+
+export declare interface ContextMenuProps {
+    /** Menu items */
+    items: ContextMenuItem[];
+    /** Trigger element */
+    children: default_2.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+
 export declare function Datagrid<T extends Record<string, any>>({ columns, data, onRowClick, striped, hoverable, className }: DatagridProps<T>): default_2.JSX.Element;
 
 export declare interface DatagridColumn<T = any> {
@@ -152,6 +283,52 @@ export declare interface DatagridProps<T = any> {
     className?: string;
 }
 
+export declare function DataList({ items, orientation, size, dividers, boldLabels, className, labelWidth, striped, onCopy }: DataListProps): default_2.JSX.Element;
+
+export declare interface DataListItem {
+    /** Unique identifier */
+    id: string;
+    /** Label/key to display */
+    label: string;
+    /** Value to display */
+    value: default_2.ReactNode;
+    /** Optional icon */
+    icon?: default_2.ReactNode;
+    /** Optional help text for the label */
+    helpText?: string;
+    /** Custom className for the item */
+    className?: string;
+    /** Highlight this item */
+    highlight?: boolean;
+    /** Make the value copyable */
+    copyable?: boolean;
+}
+
+export declare type DataListOrientation = 'horizontal' | 'vertical';
+
+export declare interface DataListProps {
+    /** List of items to display */
+    items: DataListItem[];
+    /** Orientation of the list */
+    orientation?: DataListOrientation;
+    /** Size variant */
+    size?: DataListSize;
+    /** Show dividers between items */
+    dividers?: boolean;
+    /** Make labels bold */
+    boldLabels?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Custom label width (for horizontal orientation) */
+    labelWidth?: string;
+    /** Striped rows */
+    striped?: boolean;
+    /** Callback when a copyable value is copied */
+    onCopy?: (item: DataListItem) => void;
+}
+
+export declare type DataListSize = 'sm' | 'md' | 'lg';
+
 export declare function DatePicker({ value, onChange, minDate, maxDate, className, ...props }: DatePickerProps): default_2.JSX.Element;
 
 export declare interface DatePickerProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {
@@ -227,6 +404,134 @@ export declare interface FilePickerProps {
 
 export declare type FileStatus = 'idle' | 'processing' | 'uploaded' | 'failed';
 
+export declare interface GalleryImage {
+    /** Unique identifier */
+    id: string;
+    /** Image source URL */
+    src: string;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Optional caption */
+    caption?: string;
+    /** Optional thumbnail (for performance) */
+    thumbnail?: string;
+    /** Optional title */
+    title?: string;
+}
+
+export declare function Gauge({ value, min, max, size, variant, thickness, label, showValue, valueFormatter, showMinMax, startAngle, endAngle, animate, className, unit }: GaugeProps): default_2.JSX.Element;
+
+export declare interface GaugeProps {
+    /** Current value */
+    value: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Size of the gauge */
+    size?: GaugeSize;
+    /** Visual variant (color scheme) */
+    variant?: GaugeVariant;
+    /** Thickness of the gauge arc */
+    thickness?: number;
+    /** Label to display in the center */
+    label?: string;
+    /** Show the numeric value */
+    showValue?: boolean;
+    /** Custom value formatter */
+    valueFormatter?: (value: number) => string;
+    /** Show min/max labels */
+    showMinMax?: boolean;
+    /** Start angle in degrees (0 = top, 90 = right) */
+    startAngle?: number;
+    /** End angle in degrees */
+    endAngle?: number;
+    /** Whether to animate the gauge */
+    animate?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Unit to display after the value */
+    unit?: string;
+}
+
+export declare type GaugeSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export declare type GaugeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+
+export declare function Grid({ columns, columnsSm, columnsMd, columnsLg, columnsXl, gap, rowGap, columnGap, alignItems, justifyItems, justifyContent, autoFlow, className, children, ...props }: GridProps): default_2.JSX.Element;
+
+export declare namespace Grid {
+    var Item: typeof GridItem;
+}
+
+export declare type GridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+
+export declare type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export declare type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export declare function GridItem({ colSpan, colSpanSm, colSpanMd, colSpanLg, colSpanXl, rowSpan, colStart, colEnd, rowStart, rowEnd, className, children, ...props }: GridItemProps): default_2.JSX.Element;
+
+export declare interface GridItemProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'className'> {
+    /** Column span (1-12) */
+    colSpan?: GridColumns | 'full';
+    /** Column span on small screens */
+    colSpanSm?: GridColumns | 'full';
+    /** Column span on medium screens */
+    colSpanMd?: GridColumns | 'full';
+    /** Column span on large screens */
+    colSpanLg?: GridColumns | 'full';
+    /** Column span on extra large screens */
+    colSpanXl?: GridColumns | 'full';
+    /** Row span */
+    rowSpan?: number;
+    /** Column start position */
+    colStart?: number;
+    /** Column end position */
+    colEnd?: number;
+    /** Row start position */
+    rowStart?: number;
+    /** Row end position */
+    rowEnd?: number;
+    /** Custom className */
+    className?: string;
+    /** Children */
+    children?: default_2.ReactNode;
+}
+
+export declare type GridJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+
+export declare interface GridProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'className'> {
+    /** Number of columns (1-12) */
+    columns?: GridColumns;
+    /** Number of columns on small screens (mobile) */
+    columnsSm?: GridColumns;
+    /** Number of columns on medium screens (tablet) */
+    columnsMd?: GridColumns;
+    /** Number of columns on large screens (desktop) */
+    columnsLg?: GridColumns;
+    /** Number of columns on extra large screens */
+    columnsXl?: GridColumns;
+    /** Gap between grid items */
+    gap?: GridGap;
+    /** Row gap between grid items */
+    rowGap?: GridGap;
+    /** Column gap between grid items */
+    columnGap?: GridGap;
+    /** Align items along the cross axis */
+    alignItems?: GridAlign;
+    /** Justify items along the main axis */
+    justifyItems?: GridAlign;
+    /** Justify content along the main axis */
+    justifyContent?: GridJustify;
+    /** Whether grid items should auto-flow */
+    autoFlow?: 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
+    /** Custom className */
+    className?: string;
+    /** Children */
+    children: default_2.ReactNode;
+}
+
 export declare function Header({ logo, title, children, actions, sticky, className }: HeaderProps): default_2.JSX.Element;
 
 export declare interface HeaderProps {
@@ -238,6 +543,47 @@ export declare interface HeaderProps {
     className?: string;
 }
 
+export declare function ImageGallery({ images, variant, size, initialIndex, showThumbnails, showCaptions, autoPlay, columns, gap, lightbox, className, onImageClick, onIndexChange, showArrows, showIndicators, infinite }: ImageGalleryProps): default_2.JSX.Element;
+
+export declare interface ImageGalleryProps {
+    /** Array of images to display */
+    images: GalleryImage[];
+    /** Gallery variant */
+    variant?: ImageGalleryVariant;
+    /** Size variant */
+    size?: ImageGallerySize;
+    /** Initial image index (for carousel) */
+    initialIndex?: number;
+    /** Show thumbnails (carousel only) */
+    showThumbnails?: boolean;
+    /** Show captions */
+    showCaptions?: boolean;
+    /** Auto-play interval in ms (carousel only, 0 to disable) */
+    autoPlay?: number;
+    /** Grid columns (grid/masonry only) */
+    columns?: number;
+    /** Gap between images */
+    gap?: number;
+    /** Enable lightbox on click */
+    lightbox?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Callback when image is clicked */
+    onImageClick?: (image: GalleryImage, index: number) => void;
+    /** Callback when current index changes (carousel only) */
+    onIndexChange?: (index: number) => void;
+    /** Show navigation arrows */
+    showArrows?: boolean;
+    /** Show indicators/dots */
+    showIndicators?: boolean;
+    /** Enable infinite loop */
+    infinite?: boolean;
+}
+
+export declare type ImageGallerySize = 'sm' | 'md' | 'lg';
+
+export declare type ImageGalleryVariant = 'carousel' | 'grid' | 'masonry';
+
 export declare const Input: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
 
 export declare interface InputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -324,6 +670,51 @@ export declare interface PaginationProps {
     className?: string;
 }
 
+export declare function PinInput({ length, type, size, variant, mask, autoFocus, disabled, placeholder, label, error, helperText, onChange, onComplete, value: controlledValue, defaultValue, selectOnFocus, className }: PinInputProps): default_2.JSX.Element;
+
+export declare interface PinInputProps {
+    /** Number of input fields */
+    length?: number;
+    /** Type of characters allowed */
+    type?: PinInputType;
+    /** Size of the input fields */
+    size?: PinInputSize;
+    /** Variant style */
+    variant?: PinInputVariant;
+    /** Whether to mask the input (show dots) */
+    mask?: boolean;
+    /** Whether to focus on mount */
+    autoFocus?: boolean;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Placeholder character */
+    placeholder?: string;
+    /** Label for the input */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Callback when value changes */
+    onChange?: (value: string) => void;
+    /** Callback when all fields are filled */
+    onComplete?: (value: string) => void;
+    /** Value (controlled) */
+    value?: string;
+    /** Default value (uncontrolled) */
+    defaultValue?: string;
+    /** Whether to select input content on focus */
+    selectOnFocus?: boolean;
+    /** Custom className */
+    className?: string;
+}
+
+export declare type PinInputSize = 'sm' | 'md' | 'lg';
+
+export declare type PinInputType = 'numeric' | 'alphanumeric' | 'alphabetic';
+
+export declare type PinInputVariant = 'default' | 'error' | 'success';
+
 export declare function ProgressBar({ value, max, variant, size, showLabel, label, animated, striped, className }: ProgressBarProps): default_2.JSX.Element;
 
 export declare interface ProgressBarProps {
@@ -366,6 +757,47 @@ export declare interface RangeInputProps extends Omit<default_2.InputHTMLAttribu
     onChange?: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
 }
 
+export declare function Rating({ value: controlledValue, defaultValue, max, precision, size, readOnly, disabled, label, showValue, emptyIcon, filledIcon, halfIcon, onChange, onHoverChange, className, helperText }: RatingProps): default_2.JSX.Element;
+
+export declare type RatingPrecision = 0.5 | 1;
+
+export declare interface RatingProps {
+    /** Current rating value */
+    value?: number;
+    /** Default value (uncontrolled) */
+    defaultValue?: number;
+    /** Maximum rating value */
+    max?: number;
+    /** Precision of the rating (0.5 for half stars, 1 for full stars) */
+    precision?: RatingPrecision;
+    /** Size of the rating stars */
+    size?: RatingSize;
+    /** Whether the rating is read-only */
+    readOnly?: boolean;
+    /** Whether the rating is disabled */
+    disabled?: boolean;
+    /** Label for the rating */
+    label?: string;
+    /** Show the numeric value */
+    showValue?: boolean;
+    /** Custom empty icon */
+    emptyIcon?: default_2.ReactNode;
+    /** Custom filled icon */
+    filledIcon?: default_2.ReactNode;
+    /** Custom half icon (for half star precision) */
+    halfIcon?: default_2.ReactNode;
+    /** Callback when value changes */
+    onChange?: (value: number) => void;
+    /** Callback when hover value changes */
+    onHoverChange?: (value: number) => void;
+    /** Custom className */
+    className?: string;
+    /** Helper text */
+    helperText?: string;
+}
+
+export declare type RatingSize = 'sm' | 'md' | 'lg';
+
 export declare function RichSelect({ options, value, onChange, placeholder, disabled, searchable, className }: RichSelectProps): default_2.JSX.Element;
 
 export declare interface RichSelectOption {
@@ -386,6 +818,29 @@ export declare interface RichSelectProps {
     className?: string;
 }
 
+export declare const Select: default_2.ForwardRefExoticComponent<SelectProps & default_2.RefAttributes<HTMLSelectElement>>;
+
+export declare interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare interface SelectProps extends Omit<default_2.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    size?: SelectSize;
+    variant?: SelectVariant;
+    fullWidth?: boolean;
+    options: SelectOption[];
+    placeholder?: string;
+}
+
+export declare type SelectSize = 'sm' | 'md' | 'lg';
+
+export declare type SelectVariant = 'default' | 'error' | 'success';
+
 export declare function SidePanel({ isOpen, onClose, title, children, footer, position, size, closeOnOverlayClick, showCloseButton, className }: SidePanelProps): default_2.JSX.Element | null;
 
 export declare type SidePanelPosition = 'left' | 'right';
@@ -416,6 +871,58 @@ export declare interface SignpostProps {
     className?: string;
 }
 
+export declare function Skeleton({ variant, width, height, animation, className, lines, ...props }: SkeletonProps): default_2.JSX.Element;
+
+export declare namespace Skeleton {
+    var Text: typeof SkeletonText;
+    var Circle: typeof SkeletonCircle;
+    var Rectangle: typeof SkeletonRectangle;
+}
+
+export declare type SkeletonAnimation = 'pulse' | 'wave' | 'none';
+
+export declare function SkeletonCircle({ size, ...props }: Omit<SkeletonProps, 'variant' | 'width' | 'height'> & {
+    size?: number;
+}): default_2.JSX.Element;
+
+export declare interface SkeletonProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** Variant of the skeleton */
+    variant?: SkeletonVariant;
+    /** Width of the skeleton */
+    width?: string | number;
+    /** Height of the skeleton */
+    height?: string | number;
+    /** Animation type */
+    animation?: SkeletonAnimation;
+    /** Custom className */
+    className?: string;
+    /** Number of lines (for text variant) */
+    lines?: number;
+}
+
+export declare function SkeletonRectangle({ width, height, ...props }: Omit<SkeletonProps, 'variant'>): default_2.JSX.Element;
+
+export declare function SkeletonText({ lines, ...props }: Omit<SkeletonProps, 'variant'>): default_2.JSX.Element;
+
+export declare type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+
+export declare function Spacer({ size, axis, spacing, className }: SpacerProps): default_2.JSX.Element;
+
+export declare type SpacerAxis = 'horizontal' | 'vertical' | 'both';
+
+export declare interface SpacerProps {
+    /** Size of the spacer */
+    size?: SpacerSize;
+    /** Direction of spacing */
+    axis?: SpacerAxis;
+    /** Custom spacing value (overrides size) */
+    spacing?: string | number;
+    /** Custom className */
+    className?: string;
+}
+
+export declare type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+
 export declare function Spinner({ size, variant, className, label }: SpinnerProps): default_2.JSX.Element;
 
 export declare interface SpinnerProps {
@@ -429,6 +936,35 @@ export declare type SpinnerSize = 'sm' | 'md' | 'lg';
 
 export declare type SpinnerVariant = 'default' | 'primary' | 'secondary';
 
+export declare function Split({ direction, initialSize, minSize, maxSize, children, onResize, className, disabled, snapPositions, snapThreshold, gutterSize }: SplitProps): default_2.JSX.Element;
+
+export declare type SplitDirection = 'horizontal' | 'vertical';
+
+export declare interface SplitProps {
+    /** Direction of the split */
+    direction?: SplitDirection;
+    /** Initial size of the first pane (in percentage, 0-100) */
+    initialSize?: number;
+    /** Minimum size of the first pane (in pixels) */
+    minSize?: number;
+    /** Maximum size of the first pane (in pixels) */
+    maxSize?: number;
+    /** First pane content */
+    children: [default_2.ReactNode, default_2.ReactNode];
+    /** Callback when size changes */
+    onResize?: (size: number) => void;
+    /** Custom className */
+    className?: string;
+    /** Disable resizing */
+    disabled?: boolean;
+    /** Show snap guides at common positions */
+    snapPositions?: number[];
+    /** Snap threshold in pixels */
+    snapThreshold?: number;
+    /** Gutter size in pixels */
+    gutterSize?: number;
+}
+
 export declare function StackView({ children, direction, align, justify, spacing, wrap, className, style }: StackViewProps): default_2.JSX.Element;
 
 export declare type StackViewAlign = 'start' | 'center' | 'end' | 'stretch';
@@ -450,6 +986,45 @@ export declare interface StackViewProps {
 
 export declare type StackViewSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+export declare function StatCard({ value, label, icon, variant, size, change, trend, description, footer, loading, className, onClick, bordered, prefix, suffix }: StatCardProps): default_2.JSX.Element;
+
+export declare interface StatCardProps {
+    /** Main statistic value */
+    value: string | number;
+    /** Label for the statistic */
+    label: string;
+    /** Optional icon */
+    icon?: default_2.ReactNode;
+    /** Color variant */
+    variant?: StatCardVariant;
+    /** Size variant */
+    size?: StatCardSize;
+    /** Change amount (e.g., "+12.5%") */
+    change?: string;
+    /** Trend direction */
+    trend?: TrendDirection;
+    /** Description or additional info */
+    description?: string;
+    /** Footer content */
+    footer?: default_2.ReactNode;
+    /** Loading state */
+    loading?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Show border */
+    bordered?: boolean;
+    /** Prefix for the value (e.g., "$", "€") */
+    prefix?: string;
+    /** Suffix for the value (e.g., "%", "ms") */
+    suffix?: string;
+}
+
+export declare type StatCardSize = 'sm' | 'md' | 'lg';
+
+export declare type StatCardVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+
 export declare function Stepper({ steps, currentStep, orientation, onStepClick, className }: StepperProps): default_2.JSX.Element;
 
 export declare type StepperOrientation = 'horizontal' | 'vertical';
@@ -509,6 +1084,56 @@ export declare interface TabsProps {
 
 export declare type TabsVariant = 'default' | 'pills' | 'underline';
 
+export declare interface Tag {
+    id: string;
+    label: string;
+}
+
+export declare function TagInput({ tags, onChange, onTagAdd, onTagRemove, placeholder, label, error, helperText, size, variant, disabled, maxTags, separators, allowDuplicates, validate, removable, fullWidth, className }: TagInputProps): default_2.JSX.Element;
+
+export declare interface TagInputProps {
+    /** Array of tags */
+    tags?: Tag[];
+    /** Callback when tags change */
+    onChange?: (tags: Tag[]) => void;
+    /** Callback when a tag is added */
+    onTagAdd?: (tag: Tag) => void;
+    /** Callback when a tag is removed */
+    onTagRemove?: (tag: Tag) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Label for the input */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Size of the input */
+    size?: TagInputSize;
+    /** Variant style */
+    variant?: TagInputVariant;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Maximum number of tags allowed */
+    maxTags?: number;
+    /** Separator characters (default: Enter, comma) */
+    separators?: string[];
+    /** Whether to allow duplicate tags */
+    allowDuplicates?: boolean;
+    /** Custom validation function */
+    validate?: (value: string) => boolean;
+    /** Whether tags should be removable */
+    removable?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Custom className */
+    className?: string;
+}
+
+export declare type TagInputSize = 'sm' | 'md' | 'lg';
+
+export declare type TagInputVariant = 'default' | 'error' | 'success';
+
 export declare const Textarea: default_2.ForwardRefExoticComponent<TextareaProps & default_2.RefAttributes<HTMLTextAreaElement>>;
 
 export declare interface TextareaProps extends default_2.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -609,6 +1234,8 @@ export declare interface TreeViewProps {
     className?: string;
 }
 
+export declare type TrendDirection = 'up' | 'down' | 'neutral';
+
 export declare function useToast(): ToastContextValue;
 
 export declare function VerticalNav({ items, orientation, defaultExpandedIds, onItemClick, className, collapsed }: VerticalNavProps): default_2.JSX.Element;
@@ -622,4 +1249,94 @@ export declare interface VerticalNavProps {
     collapsed?: boolean;
 }
 
+export declare const Video: default_2.ForwardRefExoticComponent<VideoProps & default_2.RefAttributes<HTMLVideoElement>>;
+
+export declare type VideoAspectRatio = '16:9' | '4:3' | '1:1' | '21:9' | 'auto';
+
+export declare interface VideoProps extends Omit<default_2.VideoHTMLAttributes<HTMLVideoElement>, 'className'> {
+    /** Video source URL */
+    src: string;
+    /** Alternative sources for different formats */
+    sources?: {
+        src: string;
+        type: string;
+    }[];
+    /** Poster image URL */
+    poster?: string;
+    /** Aspect ratio of the video */
+    aspectRatio?: VideoAspectRatio;
+    /** Whether to show native controls */
+    controls?: boolean;
+    /** Whether to autoplay the video */
+    autoPlay?: boolean;
+    /** Whether to loop the video */
+    loop?: boolean;
+    /** Whether to mute the video */
+    muted?: boolean;
+    /** Whether to play inline on mobile */
+    playsInline?: boolean;
+    /** Width of the video container */
+    width?: string | number;
+    /** Height of the video container */
+    height?: string | number;
+    /** Custom className for the container */
+    className?: string;
+    /** Loading state placeholder */
+    loading?: 'lazy' | 'eager';
+    /** Error message to display if video fails to load */
+    onError?: (error: default_2.SyntheticEvent<HTMLVideoElement>) => void;
+}
+
+declare function Window_2({ title, size, variant, open, closable, minimizable, maximizable, resizable, draggable, onClose, onMinimize, onMaximize, width, height, initialX, initialY, children, className, showControls, toolbar, footer }: WindowProps): default_2.JSX.Element | null;
+export { Window_2 as Window }
+
+export declare interface WindowProps {
+    /** Window title */
+    title?: string;
+    /** Window size preset */
+    size?: WindowSize;
+    /** Visual variant */
+    variant?: WindowVariant;
+    /** Whether the window is open */
+    open?: boolean;
+    /** Whether the window can be closed */
+    closable?: boolean;
+    /** Whether the window can be minimized */
+    minimizable?: boolean;
+    /** Whether the window can be maximized */
+    maximizable?: boolean;
+    /** Whether the window is resizable */
+    resizable?: boolean;
+    /** Whether the window is draggable */
+    draggable?: boolean;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Callback when minimize button is clicked */
+    onMinimize?: () => void;
+    /** Callback when maximize button is clicked */
+    onMaximize?: () => void;
+    /** Custom width */
+    width?: string | number;
+    /** Custom height */
+    height?: string | number;
+    /** Initial position X */
+    initialX?: number;
+    /** Initial position Y */
+    initialY?: number;
+    /** Window content */
+    children: default_2.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Show window controls */
+    showControls?: boolean;
+    /** Custom toolbar content */
+    toolbar?: default_2.ReactNode;
+    /** Footer content */
+    footer?: default_2.ReactNode;
+}
+
+export declare type WindowSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export declare type WindowVariant = 'default' | 'dark' | 'light';
+
 export { }