@santi020k/lumen-react 1.6.0 → 1.7.0

package/README.md

@@ -11,12 +11,23 @@ Lumen stylesheet.
 pnpm add @santi020k/lumen-react
 ```
 
+The adapter also exposes Lumen's discovery and diagnostics CLI:
+
+```bash
+pnpm exec lumen show Tabs
+pnpm exec lumen doctor
+```
+
 Load the shared stylesheet once from your app entry or global CSS.
 
 ```tsx
-import '@santi020k/lumen-react/styles.css'
+import "@santi020k/lumen-react/styles.css";
 ```
 
+For an essential application shell using forms, feedback, tabs, dialogs, calendar, and DataTable,
+import `@santi020k/lumen-react/styles/critical.css` instead. It is generated from the canonical
+stylesheet and remains materially smaller than the complete catalog.
+
 The stylesheet defaults `--ui-font` to `"Montserrat", "Avenir Next", "Segoe UI", sans-serif`.
 It declares the family stack but does not bundle or load font files. Load Montserrat once through
 your preferred delivery path, or override `--ui-font` in application CSS.
@@ -24,7 +35,7 @@ your preferred delivery path, or override `--ui-font` in application CSS.
 ## Usage
 
 ```tsx
-import { Button, Card, Input } from '@santi020k/lumen-react'
+import { Button, Card, Input } from "@santi020k/lumen-react";
 
 export function SubscribeForm() {
   return (
@@ -33,10 +44,22 @@ export function SubscribeForm() {
       <Input id="email" type="email" placeholder="you@example.com" />
       <Button>Subscribe</Button>
     </Card>
-  )
+  );
 }
 ```
 
+`PhoneInput` supports a controlled international phone model while preserving the legacy custom
+country-option API:
+
+```tsx
+const colombia = getLumenPhoneCountry('CO', { locale: 'en-US' })
+if (!colombia) throw new Error('Missing Colombia metadata')
+
+const [phone, setPhone] = useState(() => createEmptyLumenPhoneNumber(colombia))
+
+<PhoneInput value={phone} onValueChange={setPhone} locale="en-US" />
+```
+
 ## Dropdown menus
 
 Compose dropdown menus from the public trigger, content, item, and separator parts. Items close the
@@ -49,8 +72,8 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from '@santi020k/lumen-react'
+  DropdownMenuTrigger,
+} from "@santi020k/lumen-react";
 
 <DropdownMenu>
   <DropdownMenuTrigger>Download</DropdownMenuTrigger>
@@ -58,9 +81,11 @@ import {
     <DropdownMenuItem>macOS</DropdownMenuItem>
     <DropdownMenuItem>Windows</DropdownMenuItem>
     <DropdownMenuSeparator />
-    <DropdownMenuItem disabled status="Soon">Android</DropdownMenuItem>
+    <DropdownMenuItem disabled status="Soon">
+      Android
+    </DropdownMenuItem>
   </DropdownMenuContent>
-</DropdownMenu>
+</DropdownMenu>;
 ```
 
 ## Language selection
@@ -113,6 +138,23 @@ without wrapping or changing the resolver contract.
 
 See the [forms guide](https://lumen.santi020k.com/docs/forms/react-hook-form) for typed examples.
 
+## Error states
+
+Use `ErrorState` as a visible fallback when a page or region cannot show its primary content. It can
+be rendered by an application or router error boundary, but Lumen does not catch exceptions, log
+diagnostics, or decide whether retrying is safe.
+
+```tsx
+<ErrorState
+  actions={<Button onClick={reload}>Try again</Button>}
+  description="Check your connection and try again."
+  title="Could not load projects"
+/>
+```
+
+See the repository [React error-handling guide](../../docs/error-handling.md#react) for the complete
+example, error-boundary ownership, announcement behavior, and verification guidance.
+
 For long articles, `Anchor` accepts optional `depth`, `index`, and `description` metadata plus an
 `activationOffset`. It synchronizes the current link on click and scroll. `ScrollProgress` tracks
 the document without requiring a separate hook.
@@ -131,15 +173,22 @@ Use `CopyButton` for clipboard actions on generated names, descriptions, message
 either a `value` or a `target` selector; `toast` opts into Lumen Toast feedback.
 
 ```tsx
-<CopyButton value="https://lumen.santi020k.com" toast>Copy link</CopyButton>
+<CopyButton value="https://lumen.santi020k.com" toast>
+  Copy link
+</CopyButton>
 ```
 
 ## Data visualization
 
-`Sparkline`, `BarChart`, `LineChart`, and `PieChart` use the shared `LumenChartSeries` contract and
+`Sparkline`, `BarChart`, `LineChart`, `PieChart`, `ScatterChart`, `Heatmap`, `RangeChart`, and
+`ComboChart` use the shared chart contracts and
 render without an external charting dependency. Data charts expose a revealable semantic table by
 default. `PieChart` accepts one series and defaults to a donut presentation.
 
+Every chart includes a factual screen-reader summary by default and accepts `summary` for more
+useful domain context. See [data visualization](../../docs/data-visualization.md) for selection,
+missing-data, live-data, and accessibility guidance.
+
 ```tsx
 import { LineChart } from '@santi020k/lumen-react'
 
@@ -161,7 +210,7 @@ the server runtime.
 
 ```tsx
 // app/page.tsx — this file remains a Server Component.
-import { Badge, Card } from '@santi020k/lumen-react'
+import { Badge, Card } from "@santi020k/lumen-react";
 
 export default function Page() {
   return (
@@ -169,13 +218,37 @@ export default function Page() {
       <Badge>Ready</Badge>
       Server-rendered page content
     </Card>
-  )
+  );
 }
 ```
 
 This boundary is specific to React environments that recognize the `"use client"` directive.
 Other React applications continue to consume the same package and exports normally.
 
+For stateless primitives that should execute directly in a React Server Component, use the
+server-safe entrypoint:
+
+```tsx
+import { Badge, Progress, Skeleton } from "@santi020k/lumen-react/server";
+
+export default function Status() {
+  return (
+    <section>
+      <Badge variant="success">Ready</Badge>
+      <Progress aria-label="Migration progress" value={72} />
+      <Skeleton aria-label="Loading activity" />
+    </section>
+  );
+}
+```
+
+The server entrypoint contains Badge, Card and its compound parts, Container, Direction, Grid,
+Input, Label, Progress, Separator, Skeleton, Spinner, Stack, Textarea, Typography, and
+VisuallyHidden plus the component-name metadata. The package root reuses those exact
+implementations and remains the full client catalog. Import interactive primitives, hooks, or
+stateless primitives that receive event handlers from the root entrypoint inside a Client
+Component.
+
 ## Compatibility wrappers
 
 The common wrapper primitives preserve their underlying DOM handles with React 19's ref-as-prop
@@ -211,29 +284,35 @@ product, or workspace. Pass the stable selector or identity through `context` an
 related links with one independently named `NavigationMenu`. Long link sets scroll horizontally.
 
 ```tsx
-import { ContextNavigation, NativeSelect, NavigationMenu } from '@santi020k/lumen-react'
+import {
+  ContextNavigation,
+  NativeSelect,
+  NavigationMenu,
+} from "@santi020k/lumen-react";
 
 <ContextNavigation
-  context={(
+  context={
     <NativeSelect aria-label="Documentation platform" visualSize="sm">
       <option>Web</option>
       <option>Apple</option>
       <option>Android</option>
     </NativeSelect>
-  )}
+  }
 >
   <NavigationMenu aria-label="Web documentation" variant="unstyled">
-    <a href="/docs/web" aria-current="page">Overview</a>
+    <a href="/docs/web" aria-current="page">
+      Overview
+    </a>
     <a href="/docs/components">Components</a>
     <a href="/docs/web/playground">Playground</a>
   </NavigationMenu>
-</ContextNavigation>
+</ContextNavigation>;
 ```
 
 Use `Icon` for Lucide icons by name across framework adapters.
 
 ```tsx
-import { Button, Icon } from '@santi020k/lumen-react'
+import { Button, Icon } from "@santi020k/lumen-react";
 
 export function SettingsButton() {
   return (
@@ -241,7 +320,7 @@ export function SettingsButton() {
       <Icon name="wand-sparkles" decorative />
       Generate
     </Button>
-  )
+  );
 }
 ```
 
@@ -252,8 +331,8 @@ Next keeps control of image sizing, format negotiation, caching, placeholders, a
 Lumen supplies its presentation class.
 
 ```tsx
-import NextImage from 'next/image'
-import { Image as LumenImage } from '@santi020k/lumen-react'
+import NextImage from "next/image";
+import { Image as LumenImage } from "@santi020k/lumen-react";
 
 <LumenImage
   alt="Team collaborating around a table"
@@ -262,7 +341,7 @@ import { Image as LumenImage } from '@santi020k/lumen-react'
   sizes="(max-width: 768px) 100vw, 50vw"
   src="/team.jpg"
   width={1200}
-/>
+/>;
 ```
 
 Keep the default lazy loading for images below the fold. For the single likely LCP image, follow
@@ -273,13 +352,13 @@ artwork authored for light surfaces; leave it off for photos and colorful illust
 name on the SVG itself.
 
 ```tsx
-import { AnimatedLogo } from '@santi020k/lumen-react'
+import { AnimatedLogo } from "@santi020k/lumen-react";
 
-<AnimatedLogo style={{ height: '3rem' }}>
+<AnimatedLogo style={{ height: "3rem" }}>
   <svg aria-label="Acme" role="img" viewBox="0 0 120 32">
     {/* Your logo artwork */}
   </svg>
-</AnimatedLogo>
+</AnimatedLogo>;
 ```
 
 For a choreographed logo, set `animation="sequence"` and mark individual SVG layers with
@@ -290,15 +369,20 @@ React is Lumen's visual adapter layer plus headless behavior hooks. The componen
 `ui-*` classes and `data-ui-*` attributes as Astro, while hooks such as `useDialog`, `usePopover`,
 `useDropdownMenu`, `useContextMenu`, `useTabs`, `useSelect`, `useFormValidation`, `useCalendar`,
 `useInputOTP`, `useDateRangePicker`, `useRichTextEditor`, `useSchedule`, `useThemeBuilder`,
-`useResizable`, `useToast`, and
-`useTooltip` track the Astro runtime's ARIA, keyboard, Escape, dismissal, context menu, form
+`useKanban`, `useResizable`, `useThemeToggle`, `useToast`, and `useTooltip` track the Astro runtime's
+ARIA, keyboard, Escape, dismissal, context menu, form
 validation, calendar grids, OTP segmentation, date range syncing, rich text command, schedule
-drag/drop, theme export, resizable pane sizing, and toast controller semantics for React
-applications.
+drag/drop, controlled Kanban move requests, theme export and switching, resizable pane sizing, and
+toast controller semantics for React applications.
 `useRichTextEditor` also provides `getEditableProps`, value-bearing commands, common formatting
 shortcuts, active toolbar state, and `{ html, text }` change details.
-`DataTable` can render structured `columns` and `rows` with the same selectable/sortable data
-attributes, and `VirtualList` exposes the shared range sizing attributes for app-level adapters.
+`DataTable` can render structured `columns` and `rows`; sortable columns use native header buttons,
+update `aria-sort`, and order string or numeric values without mutating the supplied rows. The
+shared selectable/sortable data attributes remain available for app-level adapters, and
+`VirtualList` exposes the shared range sizing attributes.
+`useTabs` keeps the selected trigger visible when a narrow horizontal list scrolls. The package
+also exports `LumenTabsChangeDetail` and `LumenTabsChangeEvent` for integrations that consume the
+shared `ui:tabs-change` contract.
 
 ## Kanban boards
 

package/bin/lumen.mjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '@santi020k/lumen/cli'

package/dist/chart-recipes.d.ts

@@ -0,0 +1,2 @@
+export declare const formatReactChartTableValue: (value: number | null | undefined, formatValue: (value: number) => string) => string;
+//# sourceMappingURL=chart-recipes.d.ts.map

package/dist/chart-recipes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-recipes.d.ts","sourceRoot":"","sources":["../src/chart-recipes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B,GACrC,OAAO,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,aAAa,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,KACrC,MAEiB,CAAA"}

package/dist/chart-recipes.js

@@ -0,0 +1,3 @@
+export const formatReactChartTableValue = (value, formatValue) => value === null || value === undefined || !Number.isFinite(value) ?
+    'Not available' :
+    formatValue(value);

package/dist/components.d.ts

@@ -1,12 +1,12 @@
 import type { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties, ElementType, HTMLAttributes, ReactNode, Ref } from 'react';
-import { type LumenBarChartLayout, type LumenChartOrientation, type LumenChartSeries, type LumenChartTone, type LumenFormErrorInput, type LumenFormStatus, type LumenIconName, type LumenPieChartVariant } from '@santi020k/lumen-core';
-import { type DialogOptions, type DropdownMenuOptions, type LanguageToggleOptions, type PopoverOptions, type ResizableDirection, type SelectOptions, type TabsOptions, type TooltipOptions } from './hooks.js';
+import { type LumenBarChartLayout, type LumenChartOrientation, type LumenChartScaleType, type LumenChartSeries, type LumenChartTone, type LumenComboSeries, type LumenErrorStateAnnouncement, type LumenErrorStateKind, type LumenErrorStateLayout, type LumenFormErrorInput, type LumenFormStatus, type LumenHeatmapDatum, type LumenIconName, type LumenPhoneCountry, type LumenPhoneCountryOptions, type LumenPhoneNumber, type LumenPieChartVariant, type LumenRangeDatum } from '@santi020k/lumen-core';
+import { type DialogOptions, type DropdownMenuOptions, type LanguageToggleOptions, type PopoverOptions, type ResizableDirection, type SelectOptions, type TabsOptions, type ToastPlacement, type TooltipOptions } from './hooks.js';
+import { type InputProps } from './server-components.js';
+export { Badge, type BadgeProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Container, type ContainerProps, Direction, type DirectionProps, Grid, type GridProps, Input, type InputProps, Label, type LabelProps, Progress, type ProgressProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Stack, type StackProps, Textarea, type TextareaProps, Typography, type TypographyProps, VisuallyHidden, type VisuallyHiddenProps } from './server-components.js';
 type AlertVariant = 'default' | 'destructive' | 'success' | 'warning';
 type AccordionVariant = 'default' | 'flush';
-type BadgeVariant = AlertVariant | 'outline' | 'secondary';
 type ButtonSize = 'default' | 'icon' | 'lg' | 'sm';
 type ButtonVariant = 'default' | 'destructive' | 'ghost' | 'link' | 'outline' | 'secondary';
-type CardVariant = 'default' | 'glass' | 'interactive' | 'muted' | 'unstyled';
 type CodeTheme = 'auto' | 'lumen' | 'santi020k';
 type CodeVariant = 'block' | 'inline';
 type IconSize = 'default' | 'lg' | 'sm' | 'xl';
@@ -80,10 +80,6 @@ export interface AvatarProps extends ComponentPropsWithRef<'span'> {
     src?: string;
 }
 export declare const Avatar: ({ alt, children, className, fallback, src, ...props }: AvatarProps) => import("react").JSX.Element;
-export interface BadgeProps extends ComponentPropsWithRef<'span'> {
-    variant?: BadgeVariant;
-}
-export declare const Badge: ({ className, variant, ...props }: BadgeProps) => import("react").JSX.Element;
 export type BreadcrumbProps = ComponentPropsWithoutRef<'nav'>;
 export declare const Breadcrumb: ({ "aria-label": ariaLabel, className, ...props }: BreadcrumbProps) => import("react").JSX.Element;
 export interface BubbleProps extends ComponentPropsWithoutRef<'article'> {
@@ -113,22 +109,6 @@ export interface CalendarProps extends ComponentPropsWithoutRef<'div'> {
     value?: string | undefined;
 }
 export declare const Calendar: ({ className, defaultValue, disabled, glass, locale, max, min, month, name, onValueChange, value, ...props }: CalendarProps) => import("react").JSX.Element;
-export type CardProps<T extends ElementType = 'div'> = LumenPrimitiveProps<T> & {
-    'data-variant'?: CardVariant;
-    glass?: LumenGlassProp;
-    variant?: CardVariant;
-};
-export declare const Card: <T extends ElementType = "div">({ as, className, glass, variant, ...props }: CardProps<T>) => import("react").JSX.Element;
-export type CardHeaderProps<T extends ElementType = 'div'> = LumenPrimitiveProps<T>;
-export declare const CardHeader: <T extends ElementType = "div">({ as, ...props }: CardHeaderProps<T>) => import("react").JSX.Element;
-export type CardTitleProps<T extends ElementType = 'div'> = LumenPrimitiveProps<T>;
-export declare const CardTitle: <T extends ElementType = "div">({ as, ...props }: CardTitleProps<T>) => import("react").JSX.Element;
-export type CardDescriptionProps<T extends ElementType = 'div'> = LumenPrimitiveProps<T>;
-export declare const CardDescription: <T extends ElementType = "div">({ as, ...props }: CardDescriptionProps<T>) => import("react").JSX.Element;
-export type CardContentProps<T extends ElementType = 'div'> = LumenPrimitiveProps<T>;
-export declare const CardContent: <T extends ElementType = "div">({ as, ...props }: CardContentProps<T>) => import("react").JSX.Element;
-export type CardFooterProps<T extends ElementType = 'div'> = LumenPrimitiveProps<T>;
-export declare const CardFooter: <T extends ElementType = "div">({ as, ...props }: CardFooterProps<T>) => import("react").JSX.Element;
 export interface CarouselProps extends ComponentPropsWithoutRef<'section'> {
     glass?: LumenGlassProp;
 }
@@ -139,9 +119,10 @@ export interface ChartProps extends ComponentPropsWithoutRef<'figure'> {
     glass?: LumenGlassProp;
     heading?: ReactNode;
     presentation?: 'bare' | 'default';
+    summary?: ReactNode;
     value?: ReactNode;
 }
-export declare const Chart: ({ caption, children, className, description, glass, heading, presentation, value, ...props }: ChartProps) => import("react").JSX.Element;
+export declare const Chart: ({ caption, children, className, description, glass, heading, presentation, summary, value, ...props }: ChartProps) => import("react").JSX.Element;
 export interface SparklineProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
     area?: boolean;
     label?: string;
@@ -161,7 +142,7 @@ export interface BarChartProps extends Omit<ChartProps, 'children'> {
     showLegend?: boolean;
     showTable?: boolean;
 }
-export declare const BarChart: ({ categoryWidth, className, emptyLabel, formatCategory, formatValue, layout, orientation, series, showLegend, showTable, ...props }: BarChartProps) => import("react").JSX.Element;
+export declare const BarChart: ({ categoryWidth, className, emptyLabel, formatCategory, formatValue, layout, orientation, series, showLegend, showTable, summary, ...props }: BarChartProps) => import("react").JSX.Element;
 export interface LineChartProps extends Omit<ChartProps, 'children'> {
     area?: boolean;
     emptyLabel?: ReactNode;
@@ -173,7 +154,7 @@ export interface LineChartProps extends Omit<ChartProps, 'children'> {
     showLegend?: boolean;
     showTable?: boolean;
 }
-export declare const LineChart: ({ area, className, emptyLabel, formatCategory, formatValue, markers, referenceValue, series, showLegend, showTable, ...props }: LineChartProps) => import("react").JSX.Element;
+export declare const LineChart: ({ area, className, emptyLabel, formatCategory, formatValue, markers, referenceValue, series, showLegend, showTable, summary, ...props }: LineChartProps) => import("react").JSX.Element;
 export interface PieChartProps extends Omit<ChartProps, 'children'> {
     centerLabel?: ReactNode;
     centerValue?: ReactNode;
@@ -183,7 +164,35 @@ export interface PieChartProps extends Omit<ChartProps, 'children'> {
     valueFormatter?: (value: number) => string;
     variant?: LumenPieChartVariant;
 }
-export declare const PieChart: ({ centerLabel, centerValue, className, series, showLegend, showTable, valueFormatter, variant, ...props }: PieChartProps) => import("react").JSX.Element;
+export declare const PieChart: ({ centerLabel, centerValue, className, series, showLegend, showTable, summary, valueFormatter, variant, ...props }: PieChartProps) => import("react").JSX.Element;
+export interface ScatterChartProps extends Omit<ChartProps, 'children'> {
+    formatValue?: (value: number) => string;
+    series?: readonly LumenChartSeries[];
+    showLegend?: boolean;
+    showTable?: boolean;
+    xScale?: Exclude<LumenChartScaleType, 'categorical'>;
+}
+export declare const ScatterChart: ({ className, formatValue, series, showLegend, showTable, summary, xScale, ...props }: ScatterChartProps) => import("react").JSX.Element;
+export interface HeatmapProps extends Omit<ChartProps, 'children'> {
+    data?: readonly LumenHeatmapDatum[];
+    formatValue?: (value: number) => string;
+    showTable?: boolean;
+}
+export declare const Heatmap: ({ className, data, formatValue, showTable, summary, ...props }: HeatmapProps) => import("react").JSX.Element;
+export interface RangeChartProps extends Omit<ChartProps, 'children'> {
+    data?: readonly LumenRangeDatum[];
+    formatValue?: (value: number) => string;
+    showTable?: boolean;
+    tone?: LumenChartTone;
+}
+export declare const RangeChart: ({ className, data, formatValue, showTable, summary, tone, ...props }: RangeChartProps) => import("react").JSX.Element;
+export interface ComboChartProps extends Omit<ChartProps, 'children'> {
+    formatValue?: (value: number) => string;
+    series?: readonly LumenComboSeries[];
+    showLegend?: boolean;
+    showTable?: boolean;
+}
+export declare const ComboChart: ({ className, formatValue, series, showLegend, showTable, summary, ...props }: ComboChartProps) => import("react").JSX.Element;
 export type CheckboxProps = Omit<ComponentPropsWithRef<'input'>, 'type'>;
 export declare const Checkbox: ({ className, ref, ...props }: CheckboxProps) => import("react").JSX.Element;
 export interface CheckboxGroupProps extends ComponentPropsWithRef<'fieldset'> {
@@ -273,33 +282,6 @@ export type DialogProps = Omit<ComponentPropsWithoutRef<'dialog'>, 'open'> & Sur
     layout?: 'centered' | 'fullscreen';
 };
 export declare const Dialog: ({ className, defaultOpen, glass, layout, onClick, onClose, onOpenChange, open, ...props }: DialogProps) => import("react").JSX.Element;
-export type DirectionProps = ComponentPropsWithoutRef<'div'>;
-export declare const Direction: ({ className, dir, ...props }: DirectionProps) => import("react").JSX.Element;
-export interface ContainerProps extends ComponentPropsWithRef<'div'> {
-    as?: ElementType;
-    size?: 'full' | 'lg' | 'md' | 'sm';
-}
-export declare const Container: ({ as, className, size, ...props }: ContainerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export interface GridProps extends ComponentPropsWithRef<'div'> {
-    as?: ElementType;
-    columns?: 1 | 2 | 3 | 4 | 6 | 12 | 'auto';
-    gap?: 'lg' | 'md' | 'none' | 'sm' | 'xl';
-    minItemWidth?: string;
-}
-export declare const Grid: ({ as, className, columns, gap, minItemWidth, style, ...props }: GridProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export interface StackProps extends ComponentPropsWithRef<'div'> {
-    align?: 'center' | 'end' | 'start' | 'stretch';
-    as?: ElementType;
-    direction?: Orientation;
-    gap?: 'lg' | 'md' | 'none' | 'sm' | 'xl';
-    justify?: 'between' | 'center' | 'end' | 'start';
-    wrap?: boolean;
-}
-export declare const Stack: ({ align, as, className, direction, gap, justify, wrap, ...props }: StackProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export interface VisuallyHiddenProps extends ComponentPropsWithRef<'span'> {
-    focusable?: boolean;
-}
-export declare const VisuallyHidden: ({ className, focusable, ...props }: VisuallyHiddenProps) => import("react").JSX.Element;
 export interface DrawerProps extends ComponentPropsWithoutRef<'dialog'>, SurfaceProps {
 }
 export declare const Drawer: ({ className, glass, ...props }: DrawerProps) => import("react").JSX.Element;
@@ -320,6 +302,27 @@ export interface EmptyProps extends ComponentPropsWithoutRef<'section'> {
     variant?: 'compact' | 'default';
 }
 export declare const Empty: ({ className, glass, variant, ...props }: EmptyProps) => import("react").JSX.Element;
+export interface IllustrationProps extends ComponentPropsWithoutRef<'span'> {
+    label?: string;
+    size?: 'lg' | 'md' | 'sm';
+    tone?: 'accent' | 'auto' | 'brand' | 'neutral';
+    variant?: 'empty' | 'error' | 'offline' | 'success';
+}
+export declare const Illustration: ({ className, label, size, tone, variant, ...props }: IllustrationProps) => import("react").JSX.Element;
+type ErrorStateHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface ErrorStateProps extends Omit<ComponentPropsWithoutRef<'section'>, 'title'> {
+    actions?: ReactNode;
+    announce?: LumenErrorStateAnnouncement;
+    description?: string;
+    graphic?: false | ReactNode;
+    headingLevel?: ErrorStateHeadingLevel;
+    kind?: LumenErrorStateKind;
+    layout?: LumenErrorStateLayout;
+    reference?: string;
+    referenceLabel?: string;
+    title: string;
+}
+export declare const ErrorState: ({ "aria-live": ariaLive, actions, announce, children, className, description, graphic, headingLevel, id, kind, layout, reference, referenceLabel, role, title, ...props }: ErrorStateProps) => import("react").JSX.Element;
 export type KanbanBoardProps = ComponentPropsWithoutRef<'section'>;
 export declare const KanbanBoard: ({ className, tabIndex, ...props }: KanbanBoardProps) => import("react").JSX.Element;
 export interface KanbanColumnProps extends ComponentPropsWithoutRef<'section'> {
@@ -357,12 +360,6 @@ export interface IconProps extends ComponentPropsWithoutRef<'span'> {
     size?: IconSize;
 }
 export declare const Icon: ({ "aria-hidden": ariaHidden, "aria-label": ariaLabel, children, className, decorative, label, name, role, size, ...props }: IconProps) => import("react").JSX.Element;
-export interface InputProps extends ComponentPropsWithRef<'input'> {
-    visualSize?: 'default' | 'lg' | 'sm';
-}
-export declare const Input: ({ className, ref, type, visualSize, ...props }: InputProps) => import("react").JSX.Element;
-export type LabelProps = ComponentPropsWithRef<'label'>;
-export declare const Label: ({ className, ...props }: LabelProps) => import("react").JSX.Element;
 export interface PasswordFieldProps extends Omit<InputProps, 'type' | 'visualSize'> {
     error?: ReactNode;
     hideLabel?: string;
@@ -694,15 +691,21 @@ export interface NativeSelectProps extends ComponentPropsWithRef<'select'> {
 export declare const NativeSelect: ({ children, className, defaultValue, options, placeholder, ref, value, visualSize, ...props }: NativeSelectProps) => import("react").JSX.Element;
 export interface PhoneInputProps extends Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue'> {
     countries?: SelectOption[];
+    countryOptions?: readonly LumenPhoneCountry[];
     countryLabel?: string;
     countryName?: string;
     defaultCountryValue?: string;
     defaultValue?: string;
+    invalidNumberMessage?: string;
+    locale?: LumenPhoneCountryOptions['locale'];
     name?: string;
+    onValueChange?: (value: LumenPhoneNumber) => void;
     placeholder?: string;
+    showValidationError?: boolean;
     size?: 'default' | 'lg' | 'sm';
+    value?: LumenPhoneNumber;
 }
-export declare const PhoneInput: ({ className, countries, countryLabel, countryName, defaultCountryValue, defaultValue, name, placeholder, size, ...props }: PhoneInputProps) => import("react").JSX.Element;
+export declare const PhoneInput: (props: PhoneInputProps) => import("react").JSX.Element;
 export interface NavigationMenuProps extends ComponentPropsWithoutRef<'nav'>, SurfaceProps {
     variant?: 'default' | 'unstyled';
 }
@@ -720,11 +723,6 @@ export type PopoverTriggerProps = ComponentPropsWithoutRef<'button'>;
 export declare const PopoverTrigger: ({ onClick, onKeyDown, ...props }: PopoverTriggerProps) => import("react").JSX.Element;
 export type PopoverPanelProps = ComponentPropsWithoutRef<'div'>;
 export declare const PopoverPanel: ({ onKeyDown, ...props }: PopoverPanelProps) => import("react").JSX.Element;
-export interface ProgressProps extends ComponentPropsWithoutRef<'div'> {
-    max?: number;
-    value?: number;
-}
-export declare const Progress: ({ className, max, value, ...props }: ProgressProps) => import("react").JSX.Element;
 export type RadioGroupProps = ComponentPropsWithoutRef<'fieldset'>;
 export declare const RadioGroup: ({ className, ...props }: RadioGroupProps) => import("react").JSX.Element;
 export interface ResizableProps extends ComponentPropsWithoutRef<'div'> {
@@ -772,10 +770,6 @@ export interface ListBoxProps extends Omit<ComponentPropsWithRef<'select'>, 'chi
     value?: string | string[];
 }
 export declare const ListBox: (inputProps: ListBoxProps) => import("react").JSX.Element;
-export interface SeparatorProps extends ComponentPropsWithRef<'hr'> {
-    orientation?: Orientation;
-}
-export declare const Separator: ({ className, orientation, ...props }: SeparatorProps) => import("react").JSX.Element;
 export interface SheetProps extends ComponentPropsWithoutRef<'dialog'>, SurfaceProps {
 }
 export declare const Sheet: ({ className, glass, ...props }: SheetProps) => import("react").JSX.Element;
@@ -783,14 +777,17 @@ export interface SidebarProps extends ComponentPropsWithoutRef<'aside'>, Surface
     variant?: 'default' | 'unstyled';
 }
 export declare const Sidebar: ({ className, glass, variant, ...props }: SidebarProps) => import("react").JSX.Element;
-export type SkeletonProps = ComponentPropsWithRef<'div'>;
-export declare const Skeleton: ({ className, ...props }: SkeletonProps) => import("react").JSX.Element;
 export type SliderProps = ComponentPropsWithRef<'input'>;
 export declare const Slider: ({ className, ref, type, ...props }: SliderProps) => import("react").JSX.Element;
-export type SonnerProps = ComponentPropsWithoutRef<'div'>;
-export declare const Sonner: ({ className, ...props }: SonnerProps) => import("react").JSX.Element;
-export type SpinnerProps = ComponentPropsWithoutRef<'span'>;
-export declare const Spinner: ({ "aria-hidden": ariaHidden, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, role, ...props }: SpinnerProps) => import("react").JSX.Element;
+export interface ToastViewportProps extends ComponentPropsWithoutRef<'div'> {
+    maxCount?: number;
+    placement?: ToastPlacement;
+}
+export declare const ToastViewport: ({ "aria-atomic": ariaAtomic, "aria-label": ariaLabel, "aria-live": ariaLive, className, maxCount, placement, ...props }: ToastViewportProps) => import("react").JSX.Element;
+/** @deprecated Use ToastViewportProps instead. */
+export type SonnerProps = ToastViewportProps;
+/** @deprecated Use ToastViewport instead. */
+export declare const Sonner: ({ className, ...props }: ToastViewportProps) => import("react").JSX.Element;
 export type SwitchProps = Omit<ComponentPropsWithRef<'input'>, 'type'>;
 export declare const Switch: ({ className, ref, role, ...props }: SwitchProps) => import("react").JSX.Element;
 export interface TableProps extends ComponentPropsWithoutRef<'div'> {
@@ -814,8 +811,6 @@ export declare const TabsPanel: ({ value, ...props }: TabsPanelProps) => import(
 export declare const CodeTabs: ({ ariaLabel, className, copy, initialValue, items, storageKey, theme, wrap, ...props }: CodeTabsProps) => import("react").JSX.Element;
 export type TagGroupProps = ComponentPropsWithoutRef<'div'>;
 export declare const TagGroup: ({ className, role, ...props }: TagGroupProps) => import("react").JSX.Element;
-export type TextareaProps = ComponentPropsWithRef<'textarea'>;
-export declare const Textarea: ({ className, ref, rows, ...props }: TextareaProps) => import("react").JSX.Element;
 export interface ThemeBuilderProps extends ComponentPropsWithoutRef<'section'> {
     glass?: LumenGlassProp;
 }
@@ -845,8 +840,6 @@ export interface TreeGridProps extends ComponentPropsWithoutRef<'div'> {
     glass?: LumenGlassProp;
 }
 export declare const TreeGrid: ({ className, glass, role, ...props }: TreeGridProps) => import("react").JSX.Element;
-export type TypographyProps = ComponentPropsWithoutRef<'div'>;
-export declare const Typography: ({ className, ...props }: TypographyProps) => import("react").JSX.Element;
 export interface VirtualListProps extends ComponentPropsWithoutRef<'div'> {
     glass?: LumenGlassProp;
     itemSize?: number | string;
@@ -866,10 +859,12 @@ export declare const FormattedDate: ({ className, ...props }: FormattedDateProps
 export type ImageProps<T extends ElementType = 'img'> = {
     as?: T;
     className?: string;
+    fit?: 'contain' | 'cover';
     invertOnDark?: boolean;
     loading?: 'eager' | 'lazy';
-} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'loading'>;
-export declare const Image: <T extends ElementType = "img">({ as, className, invertOnDark, loading, ...props }: ImageProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    radius?: 'full' | 'lg' | 'md' | 'none' | 'sm';
+} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'fit' | 'loading' | 'radius'>;
+export declare const Image: <T extends ElementType = "img">({ as, className, fit, invertOnDark, loading, radius, ...props }: ImageProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export type LinkProps = ComponentPropsWithRef<'a'> & {
     newTab?: boolean;
     variant?: 'default' | 'inherit';
@@ -979,13 +974,6 @@ export interface BackdropProps extends ComponentPropsWithoutRef<'div'> {
     variant?: 'aurora' | 'dots' | 'grid' | 'rays';
 }
 export declare const Backdrop: ({ children, className, intensity, tone, variant, ...props }: BackdropProps) => import("react").JSX.Element;
-export interface IllustrationProps extends ComponentPropsWithoutRef<'span'> {
-    label?: string;
-    size?: 'lg' | 'md' | 'sm';
-    tone?: 'accent' | 'auto' | 'brand' | 'neutral';
-    variant?: 'empty' | 'error' | 'offline' | 'success';
-}
-export declare const Illustration: ({ className, label, size, tone, variant, ...props }: IllustrationProps) => import("react").JSX.Element;
 export type AnimatedPortraitProps = ComponentPropsWithoutRef<'div'>;
 export declare const AnimatedPortrait: ({ className, ...props }: AnimatedPortraitProps) => import("react").JSX.Element;
 export type ButtonLinkProps = ComponentPropsWithRef<'a'> & {
@@ -1145,5 +1133,4 @@ export interface SpeedDialProps extends ComponentPropsWithoutRef<'div'> {
     label?: string;
 }
 export declare const SpeedDial: ({ actions, children, className, defaultOpen, direction, label, onBlur, ...props }: SpeedDialProps) => import("react").JSX.Element;
-export {};
 //# sourceMappingURL=components.d.ts.map