@almadar/ui 2.13.3 → 2.15.0

package/dist/components/atoms/AnimatedCounter.d.ts

@@ -0,0 +1,20 @@
+/**
+ * AnimatedCounter Atom Component
+ *
+ * Animates a number from its previous value to the current value
+ * using requestAnimationFrame and ease-out easing.
+ */
+import React from "react";
+export interface AnimatedCounterProps {
+    /** The target number to animate to */
+    value: number;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Text to display before the number */
+    prefix?: string;
+    /** Text to display after the number */
+    suffix?: string;
+    /** Additional class names */
+    className?: string;
+}
+export declare const AnimatedCounter: React.FC<AnimatedCounterProps>;

package/dist/components/atoms/Avatar.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Avatar Atom Component
+ *
+ * A versatile avatar component supporting images, initials, icons, and status indicators.
+ */
+import React from "react";
+import type { LucideIcon } from "lucide-react";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarStatus = "online" | "offline" | "away" | "busy";
+export interface AvatarProps {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+    /**
+     * Full name - initials will be generated automatically
+     */
+    name?: string;
+    /**
+     * Initials to display (e.g., "JD" for John Doe)
+     * If not provided but name is, initials will be auto-generated
+     */
+    initials?: string;
+    /**
+     * Icon to display when no image or initials
+     */
+    icon?: LucideIcon;
+    /**
+     * Size of the avatar
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Status indicator
+     */
+    status?: AvatarStatus;
+    /**
+     * Badge content (e.g., notification count)
+     */
+    badge?: string | number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /** Declarative event name — emits UI:{action} via eventBus on click */
+    action?: string;
+    /** Payload to include with the action event */
+    actionPayload?: Record<string, unknown>;
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/atoms/Badge.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral";
+export type BadgeSize = "sm" | "md" | "lg";
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Numeric count or amount to display in badge */
+    amount?: number;
+    /** Badge label text (alternative to children for schema-driven rendering) */
+    label?: string;
+    /** Icon name (Lucide icon string) or React node */
+    icon?: React.ReactNode;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/atoms/Box.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Box Component
+ *
+ * A versatile layout primitive that provides spacing, background, border, and shadow controls.
+ * Think of it as a styled div with consistent design tokens.
+ */
+import React from "react";
+export type BoxPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type BoxMargin = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "auto";
+export type BoxBg = "transparent" | "primary" | "secondary" | "muted" | "accent" | "surface" | "overlay";
+export type BoxRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export type BoxShadow = "none" | "sm" | "md" | "lg" | "xl";
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Padding on all sides */
+    padding?: BoxPadding;
+    /** Horizontal padding (overrides padding for x-axis) */
+    paddingX?: BoxPadding;
+    /** Vertical padding (overrides padding for y-axis) */
+    paddingY?: BoxPadding;
+    /** Margin on all sides */
+    margin?: BoxMargin;
+    /** Horizontal margin */
+    marginX?: BoxMargin;
+    /** Vertical margin */
+    marginY?: BoxMargin;
+    /** Background color */
+    bg?: BoxBg;
+    /** Show border */
+    border?: boolean;
+    /** Border radius */
+    rounded?: BoxRounded;
+    /** Box shadow */
+    shadow?: BoxShadow;
+    /** Display type */
+    display?: "block" | "inline" | "inline-block" | "flex" | "inline-flex" | "grid";
+    /** Fill available width */
+    fullWidth?: boolean;
+    /** Fill available height */
+    fullHeight?: boolean;
+    /** Overflow behavior */
+    overflow?: "auto" | "hidden" | "visible" | "scroll";
+    /** Position */
+    position?: "relative" | "absolute" | "fixed" | "sticky";
+    /** HTML element to render as */
+    as?: React.ElementType;
+    /** Declarative event name — emits UI:{action} via eventBus on click */
+    action?: string;
+    /** Payload to include with the action event */
+    actionPayload?: Record<string, unknown>;
+    /** Declarative hover event — emits UI:{hoverEvent} with { hovered: true/false } on mouseEnter/mouseLeave */
+    hoverEvent?: string;
+}
+/**
+ * Box - Versatile container component with design tokens
+ */
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
+export default Box;

package/dist/components/atoms/Button.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { type LucideIcon } from "lucide-react";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    /** Left icon as ReactNode, Lucide component, or string name (e.g. "plus", "trash") */
+    leftIcon?: React.ReactNode | LucideIcon | string;
+    /** Right icon as ReactNode, Lucide component, or string name */
+    rightIcon?: React.ReactNode | LucideIcon | string;
+    /** Alias for leftIcon */
+    icon?: React.ReactNode | LucideIcon | string;
+    /** Alias for rightIcon */
+    iconRight?: React.ReactNode | LucideIcon | string;
+    /** Declarative event name — emits UI:{action} via eventBus on click */
+    action?: string;
+    /** Payload to include with the action event */
+    actionPayload?: Record<string, unknown>;
+    /** Button label text (alternative to children for schema-driven rendering) */
+    label?: string;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/atoms/Card.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export type CardShadow = "none" | "sm" | "md" | "lg";
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "bordered" | "elevated" | "interactive";
+    padding?: "none" | "sm" | "md" | "lg";
+    /** Card title - renders in header if provided */
+    title?: string;
+    /** Card subtitle - renders below title */
+    subtitle?: string;
+    /** Shadow size override */
+    shadow?: CardShadow;
+}
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/Center.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Center Component
+ *
+ * A layout utility that centers its children horizontally and/or vertically.
+ */
+import React from 'react';
+export interface CenterProps {
+    /** Center inline (width fits content) vs block (full width) */
+    inline?: boolean;
+    /** Center only horizontally */
+    horizontal?: boolean;
+    /** Center only vertically */
+    vertical?: boolean;
+    /** Minimum height (useful for vertical centering) */
+    minHeight?: string | number;
+    /** Fill available height */
+    fullHeight?: boolean;
+    /** Fill available width */
+    fullWidth?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Children elements */
+    children: React.ReactNode;
+    /** HTML element to render as */
+    as?: React.ElementType;
+}
+/**
+ * Center - Centers content horizontally and/or vertically
+ */
+export declare const Center: React.FC<CenterProps>;
+export default Center;

package/dist/components/atoms/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Default checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    label?: string;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/ConditionalWrapper.d.ts

@@ -0,0 +1,68 @@
+/**
+ * ConditionalWrapper Atom Component
+ *
+ * A wrapper component that conditionally renders its children based on
+ * S-expression evaluation. Used for dynamic field visibility in inspection forms.
+ */
+import React from 'react';
+import { type SExpr } from '@almadar/evaluator';
+/**
+ * Context for conditional evaluation
+ */
+export interface ConditionalContext {
+    formValues: Record<string, unknown>;
+    globalVariables: Record<string, unknown>;
+    localVariables?: Record<string, unknown>;
+    entity?: Record<string, unknown>;
+}
+export interface ConditionalWrapperProps {
+    /** The S-expression condition to evaluate */
+    condition?: SExpr;
+    /** Context for evaluating the condition */
+    context: ConditionalContext;
+    /** Children to render when condition is true (or when no condition is provided) */
+    children: React.ReactNode;
+    /** Optional fallback to render when condition is false */
+    fallback?: React.ReactNode;
+    /** Whether to animate the transition (uses CSS transitions) */
+    animate?: boolean;
+}
+/**
+ * ConditionalWrapper conditionally renders children based on S-expression evaluation.
+ *
+ * Supported bindings:
+ * - @entity.formValues.fieldId - Access form field values
+ * - @entity.globalVariables.HG_VAR - Access global inspection variables
+ * - @entity.localVariables.H_VAR - Access document-local variables
+ * - @state - Current state machine state
+ * - @now - Current timestamp
+ *
+ * @example
+ * // Simple condition - show field when another field equals a value
+ * <ConditionalWrapper
+ *   condition={["=", "@entity.formValues.vehicleType", "commercial"]}
+ *   context={{ formValues: { vehicleType: "commercial" }, globalVariables: {} }}
+ * >
+ *   <Input name="commercialLicenseNumber" />
+ * </ConditionalWrapper>
+ *
+ * @example
+ * // With fallback - show message when condition not met
+ * <ConditionalWrapper
+ *   condition={[">=", "@entity.formValues.loadWeight", 3500]}
+ *   context={formContext}
+ *   fallback={<Typography variant="small">Load weight must be at least 3500kg</Typography>}
+ * >
+ *   <HeavyVehicleFields />
+ * </ConditionalWrapper>
+ *
+ * @example
+ * // Using global variables for cross-form conditions
+ * <ConditionalWrapper
+ *   condition={["=", "@entity.globalVariables.HG_POTROSNIKI", "DA"]}
+ *   context={{ formValues: {}, globalVariables: { HG_POTROSNIKI: "DA" } }}
+ * >
+ *   <PriceMarkingSection />
+ * </ConditionalWrapper>
+ */
+export declare const ConditionalWrapper: React.FC<ConditionalWrapperProps>;

package/dist/components/atoms/ConfettiEffect.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ConfettiEffect Atom Component
+ *
+ * Renders a brief particle burst animation when triggered.
+ * Uses CSS keyframe animations for each particle with random
+ * position, rotation, and velocity.
+ */
+import React from "react";
+export interface ConfettiEffectProps {
+    /** When this changes from false to true, a burst of particles is spawned */
+    trigger: boolean;
+    /** How long the animation lasts in milliseconds */
+    duration?: number;
+    /** Number of particles to spawn */
+    particleCount?: number;
+    /** Additional class names */
+    className?: string;
+}
+export declare const ConfettiEffect: React.FC<ConfettiEffectProps>;

package/dist/components/atoms/DayCell.d.ts

@@ -0,0 +1,21 @@
+/**
+ * DayCell
+ *
+ * Calendar day header atom. Renders day abbreviation and date number
+ * with optional today highlight.
+ */
+import React from "react";
+export interface DayCellProps {
+    /** The date this cell represents */
+    date: Date;
+    /** Whether this date is today */
+    isToday?: boolean;
+    /** Called when the day is clicked */
+    onClick?: (date: Date) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function DayCell({ date, isToday, onClick, className, }: DayCellProps): React.JSX.Element;
+export declare namespace DayCell {
+    var displayName: string;
+}

package/dist/components/atoms/Divider.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Divider Atom Component
+ *
+ * A divider component for separating content sections.
+ */
+import React from "react";
+export type DividerOrientation = "horizontal" | "vertical";
+export type DividerVariant = "solid" | "dashed" | "dotted";
+export interface DividerProps {
+    /**
+     * Orientation of the divider
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Text label to display in the divider
+     */
+    label?: string;
+    /**
+     * Line style variant
+     * @default 'solid'
+     */
+    variant?: DividerVariant;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/atoms/FlipContainer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * FlipContainer - A 3D perspective container atom for flip animations.
+ *
+ * Provides CSS 3D transform infrastructure: perspective on the outer wrapper,
+ * preserve-3d + rotateY on the inner, and backface-visibility hidden on each child face.
+ */
+import React from 'react';
+export interface FlipContainerProps {
+    /** Whether the container is flipped (rotateY 180deg) */
+    flipped: boolean;
+    /** Optional className for the outer wrapper */
+    className?: string;
+    /** The two face elements (front and back) */
+    children: React.ReactNode;
+    /** Click handler on the outer wrapper */
+    onClick?: () => void;
+}
+export declare const FlipContainer: {
+    ({ flipped, className, children, onClick, }: FlipContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/atoms/Icon.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Icon Atom Component
+ *
+ * A wrapper component for Lucide icons with consistent sizing and styling.
+ * Uses theme-aware CSS variables for stroke width and color.
+ *
+ * Supports two APIs:
+ * - `icon` prop: Pass a LucideIcon component directly
+ * - `name` prop: Pass a string icon name (resolved from iconMap)
+ */
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconAnimation = 'spin' | 'pulse' | 'none';
+/**
+ * Resolve an icon name to a Lucide icon component.
+ * Supports all 1500+ Lucide icons via dynamic PascalCase lookup.
+ * Falls back to HelpCircle if not found.
+ */
+export declare function resolveIcon(name: string): LucideIcon;
+export interface IconProps {
+    /** Lucide icon component (preferred for type-safe usage) */
+    icon?: LucideIcon;
+    /** Icon name as string (resolved from iconMap) */
+    name?: string;
+    /** Size of the icon */
+    size?: IconSize;
+    /** Color class (Tailwind color class) or 'inherit' for theme default */
+    color?: string;
+    /** Animation type */
+    animation?: IconAnimation;
+    /** Additional CSS classes */
+    className?: string;
+    /** Icon stroke width - uses theme default if not specified */
+    strokeWidth?: number;
+    /** Inline style */
+    style?: React.CSSProperties;
+}
+export declare const Icon: React.FC<IconProps>;

package/dist/components/atoms/InfiniteScrollSentinel.d.ts

@@ -0,0 +1,23 @@
+/**
+ * InfiniteScrollSentinel Atom Component
+ *
+ * Invisible element placed at the end of a list. Uses IntersectionObserver
+ * via useInfiniteScroll to detect when the user scrolls near the bottom,
+ * then fires a load-more event through the event bus.
+ */
+import React from "react";
+export interface InfiniteScrollSentinelProps {
+    /** Event name to emit when load-more is triggered (emitted as UI:{loadMoreEvent}) */
+    loadMoreEvent: string;
+    /** Optional payload to include with the load-more event */
+    loadMorePayload?: Record<string, unknown>;
+    /** Whether a load operation is currently in progress */
+    isLoading?: boolean;
+    /** Whether there are more items to load */
+    hasMore?: boolean;
+    /** IntersectionObserver rootMargin for early trigger */
+    threshold?: string;
+    /** Additional class names */
+    className?: string;
+}
+export declare const InfiniteScrollSentinel: React.FC<InfiniteScrollSentinelProps>;

package/dist/components/atoms/Input.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { type LucideIcon } from "lucide-react";
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    /** Input type - supports 'select' and 'textarea' in addition to standard types */
+    inputType?: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "date" | "datetime-local" | "time" | "checkbox" | "select" | "textarea";
+    error?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    /** Lucide icon component for left side (convenience prop) */
+    icon?: LucideIcon;
+    /** Show clear button when input has value */
+    clearable?: boolean;
+    /** Callback when clear button is clicked */
+    onClear?: () => void;
+    /** Options for select type */
+    options?: SelectOption[];
+    /** Rows for textarea type */
+    rows?: number;
+    /** onChange handler - accepts events from input, select, or textarea */
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>>;

package/dist/components/atoms/Label.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+}
+export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/atoms/LawReferenceTooltip.d.ts

@@ -0,0 +1,48 @@
+/**
+ * LawReferenceTooltip Atom Component
+ *
+ * A specialized tooltip for displaying law references in inspection forms.
+ * Shows law name, article number, and relevant clause text.
+ */
+import React from "react";
+/**
+ * Law reference definition
+ */
+export interface LawReference {
+    /** Law identifier (e.g., "VVO", "TPED") */
+    law: string;
+    /** Full name of the law */
+    lawName?: string;
+    /** Article number (e.g., "§8", "Artikel 5") */
+    article: string;
+    /** Clause or paragraph text */
+    clause?: string;
+    /** Optional link to full law text */
+    link?: string;
+}
+export interface LawReferenceTooltipProps {
+    /** The law reference to display */
+    reference: LawReference;
+    /** Children element that triggers the tooltip */
+    children: React.ReactNode;
+    /** Tooltip position */
+    position?: "top" | "bottom" | "left" | "right";
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * LawReferenceTooltip displays legal references with structured formatting.
+ *
+ * @example
+ * <LawReferenceTooltip
+ *   reference={{
+ *     law: "VVO",
+ *     lawName: "Verkehrsverordnung",
+ *     article: "§8 Abs. 3",
+ *     clause: "Die zulässige Gesamtmasse darf 3500 kg nicht überschreiten."
+ *   }}
+ * >
+ *   <Typography variant="small" className="text-blue-600 underline cursor-help">VVO §8</Typography>
+ * </LawReferenceTooltip>
+ */
+export declare const LawReferenceTooltip: React.FC<LawReferenceTooltipProps>;

package/dist/components/atoms/Overlay.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Overlay Atom Component
+ *
+ * A fixed backdrop for modals and drawers.
+ */
+import React from "react";
+export interface OverlayProps {
+    isVisible?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+    className?: string;
+    blur?: boolean;
+    /** Declarative event name — emits UI:{action} via eventBus on click */
+    action?: string;
+}
+export declare const Overlay: React.FC<OverlayProps>;
+export default Overlay;

package/dist/components/atoms/ProgressBar.d.ts

@@ -0,0 +1,63 @@
+/**
+ * ProgressBar Atom Component
+ *
+ * A progress bar component with linear, circular, and stepped variants.
+ */
+import React from "react";
+export type ProgressBarType = "linear" | "circular" | "stepped";
+export type ProgressBarVariant = "default" | "primary" | "success" | "warning" | "danger";
+export type ProgressBarColor = ProgressBarVariant;
+export interface ProgressBarProps {
+    /**
+     * Progress value (0-100)
+     */
+    value: number;
+    /**
+     * Maximum value (for calculating percentage)
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Type of the progress bar (linear, circular, stepped)
+     * @default 'linear'
+     */
+    progressType?: ProgressBarType;
+    /**
+     * Variant/color of the progress bar
+     * @default 'primary'
+     */
+    variant?: ProgressBarVariant;
+    /**
+     * Color variant (alias for variant)
+     * @default 'primary'
+     */
+    color?: ProgressBarColor;
+    /**
+     * Show percentage text
+     * @default false
+     */
+    showPercentage?: boolean;
+    /**
+     * Alias for showPercentage (pattern compatibility)
+     */
+    showLabel?: boolean;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Size (for circular variant)
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Number of steps (for stepped variant)
+     * @default 5
+     */
+    steps?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const ProgressBar: React.FC<ProgressBarProps>;

package/dist/components/atoms/Radio.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Radio Atom Component
+ *
+ * A radio button component with label support and accessibility.
+ */
+import React from "react";
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /**
+     * Label text displayed next to the radio button
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the radio button
+     */
+    helperText?: string;
+    /**
+     * Error message displayed below the radio button
+     */
+    error?: string;
+    /**
+     * Size of the radio button
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;