@almadar/ui 2.0.0 → 2.0.1

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,8 @@
+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;
+}
+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 (preferred) */
+    leftIcon?: React.ReactNode;
+    /** Right icon as ReactNode (preferred) */
+    rightIcon?: React.ReactNode;
+    /** Left icon as Lucide icon component (convenience prop, renders with default size) */
+    icon?: LucideIcon;
+    /** Right icon as Lucide icon component (convenience prop) */
+    iconRight?: LucideIcon;
+    /** 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,5 @@
+import React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    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/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/Icon.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ * 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/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>>;

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

@@ -0,0 +1,12 @@
+import React from "react";
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children"> {
+    options: SelectOption[];
+    placeholder?: string;
+    error?: string;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

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

@@ -0,0 +1,25 @@
+/**
+ * Spacer Component
+ *
+ * A flexible spacer that expands to fill available space in a flex container.
+ * Useful for pushing elements apart or creating consistent spacing.
+ */
+import React from 'react';
+export type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
+export interface SpacerProps {
+    /** Fixed size (auto = flex grow) */
+    size?: SpacerSize;
+    /** Orientation (for fixed sizes) */
+    axis?: 'horizontal' | 'vertical';
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Spacer - Flexible spacing element for flex layouts
+ *
+ * Usage:
+ * - size="auto" (default): Expands to fill available space (flex: 1)
+ * - size="md": Fixed size spacing
+ */
+export declare const Spacer: React.FC<SpacerProps>;
+export default Spacer;

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

@@ -0,0 +1,6 @@
+import React from "react";
+export type SpinnerSize = "xs" | "sm" | "md" | "lg";
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: SpinnerSize;
+}
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,64 @@
+/**
+ * Stack Component
+ *
+ * A layout primitive for arranging children in a vertical or horizontal stack with consistent spacing.
+ * Includes convenience exports VStack and HStack for common use cases.
+ */
+import React from "react";
+export type StackDirection = "horizontal" | "vertical";
+export type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+export interface StackProps {
+    /** Stack direction */
+    direction?: StackDirection;
+    /** Gap between children */
+    gap?: StackGap;
+    /** Align items on the cross axis */
+    align?: StackAlign;
+    /** Justify items on the main axis */
+    justify?: StackJustify;
+    /** Allow items to wrap */
+    wrap?: boolean;
+    /** Reverse the order of children */
+    reverse?: boolean;
+    /** Fill available space (flex: 1) */
+    flex?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Children elements */
+    children?: React.ReactNode;
+    /** HTML element to render as */
+    as?: React.ElementType;
+    /** Click handler */
+    onClick?: (e: React.MouseEvent) => void;
+    /** Keyboard handler */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    /** Role for accessibility */
+    role?: string;
+    /** Tab index for focus management */
+    tabIndex?: number;
+    /** Declarative event name — emits UI:{action} via eventBus on click */
+    action?: string;
+    /** Payload to include with the action event */
+    actionPayload?: Record<string, unknown>;
+}
+/**
+ * Stack - Flexible layout component for arranging children
+ */
+export declare const Stack: React.FC<StackProps>;
+/**
+ * VStack - Vertical stack shorthand
+ */
+export interface VStackProps extends Omit<StackProps, "direction"> {
+}
+export declare const VStack: React.FC<VStackProps>;
+/**
+ * HStack - Horizontal stack shorthand
+ */
+export interface HStackProps extends Omit<StackProps, "direction"> {
+}
+export declare const HStack: React.FC<HStackProps>;
+export default Stack;

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    id?: string;
+    name?: string;
+    className?: string;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;