@almadar/ui 2.14.0 → 2.15.1

package/dist/{chunk-M7MOIE46.js → chunk-2KQPOTRM.js}

@@ -1,4 +1,4 @@
-import { SuspenseConfigProvider } from './chunk-SKWPSQHQ.js';
+import { SuspenseConfigProvider } from './chunk-FP3PNF7I.js';
 import { ThemeProvider } from './chunk-DKQN5FVU.js';
 import { SelectionProvider, EntityDataProvider } from './chunk-QU2X55WH.js';
 import { useEventBus, EventBusProvider } from './chunk-YXZM3WCF.js';

package/dist/{chunk-SKWPSQHQ.js → chunk-FP3PNF7I.js}

@@ -174,6 +174,10 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
+  if (typeof value === "object" && value !== null && "$$typeof" in value) {
+    const IconComp = value;
+    return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
+  }
   return value;
 }
 var Button = React80__default.forwardRef(
@@ -939,8 +943,9 @@ var Box = React80__default.forwardRef(
       onMouseLeave?.(e);
     }, [hoverEvent, eventBus, onMouseLeave]);
     const isClickable = action || onClick;
+    const Comp = Component;
     return /* @__PURE__ */ jsx(
-      Component,
+      Comp,
       {
         ref,
         className: cn(
@@ -996,8 +1001,9 @@ var Center = ({
   as: Component = "div"
 }) => {
   const mergedStyle = minHeight ? { minHeight, ...style } : style;
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
-    Component,
+    Comp,
     {
       className: cn(
         inline ? "inline-flex" : "flex",
@@ -1498,8 +1504,9 @@ var Stack = ({
   };
   const isHorizontal = direction === "horizontal";
   const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
-    Component,
+    Comp,
     {
       className: cn(
         "flex",
@@ -1669,8 +1676,9 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component = as || defaultElements[variant];
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
-    Component,
+    Comp,
     {
       id,
       className: cn(
@@ -5033,8 +5041,9 @@ var Container = ({
   as: Component = "div"
 }) => {
   const resolvedSize = maxWidth ?? size ?? "lg";
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
-    Component,
+    Comp,
     {
       className: cn(
         "w-full",
@@ -5107,8 +5116,9 @@ var Flex = ({
       flexStyle.flexBasis = typeof basis === "number" ? `${basis}px` : basis;
     }
   }
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
-    Component,
+    Comp,
     {
       className: cn(
         inline ? "inline-flex" : "flex",
@@ -5366,8 +5376,9 @@ var Grid = ({
   as: Component = "div"
 }) => {
   const mergedStyle = rows ? { gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`, ...style } : style;
+  const Comp = Component;
   return /* @__PURE__ */ jsx(
-    Component,
+    Comp,
     {
       className: cn(
         "grid",
@@ -5880,7 +5891,7 @@ var Pagination = ({
           size: "sm",
           onClick: () => handlePageChange(currentPage - 1),
           disabled: currentPage === 1,
-          icon: ChevronLeft,
+          icon: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
           children: t("pagination.previous")
         }
       ),
@@ -5917,7 +5928,7 @@ var Pagination = ({
           size: "sm",
           onClick: () => handlePageChange(currentPage + 1),
           disabled: currentPage === totalPages,
-          iconRight: ChevronRight,
+          iconRight: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
           children: t("pagination.next")
         }
       )
@@ -15609,8 +15620,9 @@ var Section = ({
   as: Component = "section"
 }) => {
   const hasHeader = title || description || action;
+  const Comp = Component;
   return /* @__PURE__ */ jsxs(
-    Component,
+    Comp,
     {
       className: cn(
         paddingStyles4[padding],

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>>;