@texturehq/edges 1.0.2 → 1.1.1

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { I as Icon, B as BaseDataPoint, Y as YFormatType, T as TooltipData, a as IconName$2 } from './server-DmvMh5XJ.js';
-export { A as ActionItem, c as ActionMenu, b as ActionMenuProps, e as AppShell, d as AppShellProps, g as Avatar, f as AvatarProps, i as Badge, h as BadgeProps, C as Card, Q as ChartContext, V as ChartMargin, m as CodeEditor, j as CodeEditorProps, k as CodeLanguage, l as CodeTheme, n as DateField, D as DateFieldProps, o as FileUpload, F as FileUploadProps, H as Heading, r as InteractiveMap, q as InteractiveMapProps, L as Loader, p as Logo, s as MAPBOX_THEMES, M as MapPoint, v as Meter, u as MeterProps, w as RichTextEditor, R as RichTextEditorProps, y as SegmentOption, z as SegmentedControl, x as SegmentedControlProps, J as SideNav, E as SideNavItem, G as SideNavProps, t as StaticMap, S as StaticMapProps, K as TextLink, P as TooltipSeries, O as TopNav, N as TopNavProps, $ as YFormatSettings, a0 as clearColorCache, a1 as createCategoryColorMap, W as createXScale, X as createYScale, Z as defaultMargin, a2 as getContrastingTextColor, a3 as getDefaultChartColor, a4 as getDefaultColors, a5 as getResolvedColor, a6 as getThemeCategoricalColors, _ as getYFormatSettings, a7 as isLightColor, U as useChartContext } from './server-DmvMh5XJ.js';
+import { I as Icon, B as BaseDataPoint, Y as YFormatType, T as TooltipData, a as IconName$2 } from './server-DkP8PI1p.js';
+export { A as ActionItem, c as ActionMenu, b as ActionMenuProps, e as AppShell, d as AppShellProps, g as Avatar, f as AvatarProps, i as Badge, h as BadgeProps, k as Card, C as CardProps, j as CardVariant, V as ChartContext, X as ChartMargin, o as CodeEditor, l as CodeEditorProps, m as CodeLanguage, n as CodeTheme, p as DateField, D as DateFieldProps, q as FileUpload, F as FileUploadProps, H as Heading, t as InteractiveMap, s as InteractiveMapProps, L as Loader, r as Logo, u as MAPBOX_THEMES, M as MapPoint, x as Meter, w as MeterProps, y as RichTextEditor, R as RichTextEditorProps, E as SegmentOption, G as SegmentedControl, z as SegmentedControlProps, N as SideNav, J as SideNavItem, K as SideNavProps, v as StaticMap, S as StaticMapProps, O as TextLink, U as TooltipSeries, Q as TopNav, P as TopNavProps, a1 as YFormatSettings, a2 as clearColorCache, a3 as createCategoryColorMap, Z as createXScale, _ as createYScale, $ as defaultMargin, a4 as getContrastingTextColor, a5 as getDefaultChartColor, a6 as getDefaultColors, a7 as getResolvedColor, a8 as getThemeCategoricalColors, a0 as getYFormatSettings, a9 as isLightColor, W as useChartContext } from './server-DkP8PI1p.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { ComponentProps, ReactNode, ComponentType, Component, ErrorInfo } from 'react';
-import { Key, ValidationResult, BreadcrumbProps, BreadcrumbsProps, ButtonProps as ButtonProps$1, DateValue, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, CheckboxRenderProps, CheckboxGroupProps as CheckboxGroupProps$1, DateRangePickerProps as DateRangePickerProps$1, DialogProps, TextProps, FormProps, ListBoxProps as ListBoxProps$1, ListBoxItemProps, NumberFieldProps as NumberFieldProps$1, PopoverProps as PopoverProps$1, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, RangeCalendarProps as RangeCalendarProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, TabProps as TabProps$1, TabListProps, TabPanelProps, TabsProps, TextFieldProps as TextFieldProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue, TooltipProps as TooltipProps$1 } from 'react-aria-components';
+import { Key, ValidationResult, BreadcrumbProps, BreadcrumbsProps, ButtonProps as ButtonProps$1, DateValue, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, CheckboxRenderProps, CheckboxGroupProps as CheckboxGroupProps$1, DateRangePickerProps as DateRangePickerProps$1, DialogProps, TextProps, FormProps, ListBoxProps as ListBoxProps$1, ListBoxItemProps, NumberFieldProps as NumberFieldProps$1, PopoverProps as PopoverProps$1, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, RangeCalendarProps as RangeCalendarProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps, TabsProps as TabsProps$2, TextFieldProps as TextFieldProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue, TooltipProps as TooltipProps$1 } from 'react-aria-components';
 export { BreadcrumbProps, BreadcrumbsProps } from 'react-aria-components';
 import { ScaleTime, ScaleLinear } from 'd3-scale';
 import '@phosphor-icons/react';
@@ -19,6 +19,759 @@ declare function useDebounce<T>(value: T, delay?: number): T;
  */
 declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void, () => void];
 
+/**
+ * Core types for the formatting system
+ */
+type FieldValue = string | number | boolean | Date | null | undefined;
+type FormattedValue = string | null;
+type FormatterFunction = (value: FieldValue, ...args: unknown[]) => FormattedValue;
+interface BaseFormat {
+    nullText?: string;
+    emptyText?: string;
+    hideWhenNull?: boolean;
+    hideWhenZero?: boolean;
+}
+type TextTransform = "uppercase" | "lowercase" | "capitalize" | "titleCase" | "sentenceCase";
+type TextTruncatePosition = "start" | "middle" | "end";
+interface TextFormat extends BaseFormat {
+    type: "text";
+    transform?: TextTransform | TextTransform[];
+    truncate?: {
+        length: number;
+        position: TextTruncatePosition;
+        ellipsis?: string;
+    };
+    wrap?: "normal" | "nowrap" | "pre" | "pre-wrap";
+    highlight?: {
+        pattern: string | RegExp;
+        className?: string;
+    };
+}
+interface NumberFormat extends BaseFormat {
+    type: "number";
+    decimals?: number;
+    thousandsSeparator?: boolean;
+    notation?: "standard" | "scientific" | "compact" | "engineering";
+    compactDisplay?: "short" | "long";
+    sign?: "auto" | "never" | "always" | "exceptZero";
+}
+interface CurrencyFormat extends BaseFormat {
+    type: "currency";
+    currency?: string;
+    currencyDisplay?: "symbol" | "narrowSymbol" | "code" | "name";
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    thousandsSeparator?: boolean;
+}
+type DateFormatStyle = "short" | "medium" | "long" | "full";
+interface DateFormat extends BaseFormat {
+    type: "date";
+    format?: string;
+    dateStyle?: DateFormatStyle;
+    timeStyle?: DateFormatStyle;
+    relative?: boolean;
+    timezone?: string;
+}
+interface BooleanFormat extends BaseFormat {
+    type: "boolean";
+    trueText?: string;
+    falseText?: string;
+    trueIcon?: string;
+    falseIcon?: string;
+}
+type EnergyUnit = "Wh" | "kWh" | "MWh" | "GWh";
+interface EnergyFormat extends BaseFormat {
+    type: "energy";
+    unit?: EnergyUnit;
+    autoScale?: boolean;
+    decimals?: number;
+}
+type PowerUnit = "W" | "kW" | "MW" | "GW";
+interface PowerFormat extends BaseFormat {
+    type: "power";
+    unit?: PowerUnit;
+    autoScale?: boolean;
+    decimals?: number;
+}
+type VoltageUnit = "mV" | "V" | "kV";
+interface VoltageFormat extends BaseFormat {
+    type: "voltage";
+    unit?: VoltageUnit;
+    autoScale?: boolean;
+    decimals?: number;
+}
+type CurrentUnit = "mA" | "A" | "kA";
+interface CurrentFormat extends BaseFormat {
+    type: "current";
+    unit?: CurrentUnit;
+    autoScale?: boolean;
+    decimals?: number;
+}
+type ResistanceUnit = "mΩ" | "Ω" | "kΩ" | "MΩ";
+interface ResistanceFormat extends BaseFormat {
+    type: "resistance";
+    unit?: ResistanceUnit;
+    autoScale?: boolean;
+    decimals?: number;
+}
+type TemperatureUnit = "C" | "F" | "K";
+type TemperatureUnitString = "CELSIUS" | "FAHRENHEIT" | "KELVIN";
+interface TemperatureFormat extends BaseFormat {
+    type: "temperature";
+    unit?: TemperatureUnit | TemperatureUnitString;
+    decimals?: number;
+    showUnit?: boolean;
+}
+type DistanceUnit = "m" | "km" | "ft" | "mi" | "yd";
+interface DistanceFormat extends BaseFormat {
+    type: "distance";
+    unit?: DistanceUnit;
+    autoScale?: boolean;
+    decimals?: number;
+}
+interface PhoneFormat extends BaseFormat {
+    type: "phone";
+    country?: string;
+    international?: boolean;
+}
+interface CustomFormat extends BaseFormat {
+    type: "custom";
+    formatter: FormatterFunction;
+    options?: Record<string, unknown>;
+}
+type FieldFormat = TextFormat | NumberFormat | CurrencyFormat | DateFormat | BooleanFormat | EnergyFormat | PowerFormat | VoltageFormat | CurrentFormat | ResistanceFormat | TemperatureFormat | DistanceFormat | PhoneFormat | CustomFormat;
+
+/**
+ * Boolean formatting utilities
+ */
+
+/**
+ * Format boolean value with custom text
+ */
+declare const toBoolean: (value: boolean | null | undefined, trueText?: string, falseText?: string) => string | null;
+/**
+ * Format boolean as enabled/disabled
+ */
+declare const toEnabledDisabled: (value: boolean | null | undefined) => string | null;
+/**
+ * Format boolean as on/off
+ */
+declare const toOnOff: (value: boolean | null | undefined) => string | null;
+/**
+ * Format boolean as active/inactive
+ */
+declare const toActiveInactive: (value: boolean | null | undefined) => string | null;
+/**
+ * Format boolean as true/false
+ */
+declare const toTrueFalse: (value: boolean | null | undefined) => string | null;
+/**
+ * Format boolean as checkmark/cross
+ */
+declare const toCheckmark: (value: boolean | null | undefined) => string | null;
+/**
+ * Parse various truthy/falsy values to boolean
+ */
+declare const parseBoolean: (value: FieldValue) => boolean | null;
+/**
+ * Format boolean according to BooleanFormat specification
+ */
+declare const formatBoolean: (value: FieldValue, format: BooleanFormat) => FormattedValue;
+
+/**
+ * Centralized formatting utility for UI components
+ * Used by Kpi, StatList, and other data display components
+ */
+
+/**
+ * Common formatter type used by data display components
+ * Can be either a custom function or a FieldFormat object
+ */
+type ComponentFormatter = ((value: FieldValue) => React__default.ReactNode) | FieldFormat;
+/**
+ * Options for formatting values in components
+ */
+interface ComponentFormatOptions {
+    /** The value to format */
+    value: FieldValue;
+    /** The formatter to apply */
+    formatter?: ComponentFormatter;
+    /** CSS class for null/empty values */
+    emptyClassName?: string;
+    /** Text to show for null/empty values */
+    emptyText?: React__default.ReactNode;
+}
+/**
+ * Format a value for display in a component
+ * Centralizes the logic used by Kpi, StatList, and similar components
+ *
+ * @example
+ * ```tsx
+ * // In a component
+ * const formatted = formatComponentValue({
+ *   value: 1500,
+ *   formatter: { type: "power" }
+ * });
+ * // Returns: "1.5 kW"
+ * ```
+ */
+declare function formatComponentValue({ value, formatter, emptyClassName, emptyText, }: ComponentFormatOptions): React__default.ReactNode;
+/**
+ * Hook for using the component formatter
+ * Provides memoization for better performance
+ *
+ * @example
+ * ```tsx
+ * function MyComponent({ value, formatter }) {
+ *   const format = useComponentFormatter(formatter);
+ *   const formatted = format(value);
+ *   return <span>{formatted}</span>;
+ * }
+ * ```
+ */
+declare function useComponentFormatter(formatter?: ComponentFormatter, emptyClassName?: string, emptyText?: React__default.ReactNode): (value: FieldValue) => React__default.ReactNode;
+
+/**
+ * Electrical current formatting utilities (flow of electric charge)
+ */
+
+/**
+ * Format as milliamps
+ */
+declare const toMilliamps: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as amperes
+ */
+declare const toAmps: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as kiloamps (rarely used but included for completeness)
+ */
+declare const toKiloamps: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Auto-scale current to the most appropriate unit
+ */
+declare const autoScaleCurrent: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format current according to CurrentFormat specification
+ */
+declare const formatCurrent: (value: FieldValue, format: CurrentFormat) => FormattedValue;
+declare const toMA: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toA: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toKA: (value: number | null | undefined, decimals?: number) => string | null;
+
+/**
+ * Date formatting utilities using Luxon
+ */
+
+/**
+ * Format date to string with various options
+ */
+declare const toDateString: (value: string | Date | number | null | undefined, showTime?: boolean, timezone?: string) => string | null;
+/**
+ * Format date to relative time (e.g., "2 hours ago")
+ */
+declare const toRelativeTime: (value: string | Date | number | null | undefined) => string | null;
+/**
+ * Format date with full date and time including weekday
+ */
+declare const toFullDateTime: (value: string | Date | number | null | undefined, timezone?: string) => string | null;
+/**
+ * Format date to ISO string
+ */
+declare const toISOString: (value: string | Date | number | null | undefined) => string | null;
+/**
+ * Format date with custom format string
+ */
+declare const toCustomDateFormat: (value: string | Date | number | null | undefined, format: string, timezone?: string) => string | null;
+/**
+ * Get formatted date parts
+ */
+declare const getDateParts: (value: string | Date | number | null | undefined) => {
+    year: number;
+    month: number;
+    day: number;
+    weekday: number;
+    hour: number;
+    minute: number;
+    second: number;
+    millisecond: number;
+    weekdayShort: string | null;
+    weekdayLong: string | null;
+    monthShort: string | null;
+    monthLong: string | null;
+} | null;
+/**
+ * Format date according to DateFormat specification
+ */
+declare const formatDate: (value: FieldValue, format: DateFormat) => FormattedValue;
+
+/**
+ * Distance and length formatting utilities
+ */
+
+/**
+ * Format as meters
+ */
+declare const toMeters: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as centimeters
+ */
+declare const toCentimeters: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as millimeters
+ */
+declare const toMillimeters: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as kilometers
+ */
+declare const toKilometers: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as feet
+ */
+declare const toFeet: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as inches
+ */
+declare const toInches: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as miles
+ */
+declare const toMiles: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as yards
+ */
+declare const toYards: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as nautical miles
+ */
+declare const toNauticalMiles: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Conversion utilities
+ */
+declare const metersToFeet: (meters: number) => number;
+declare const feetToMeters: (feet: number) => number;
+declare const milesToKilometers: (miles: number) => number;
+declare const kilometersToMiles: (km: number) => number;
+declare const feetToMiles: (feet: number) => number;
+declare const milesToFeet: (miles: number) => number;
+declare const metersToMiles: (meters: number) => number;
+declare const milesToMeters: (miles: number) => number;
+declare const yardsToMeters: (yards: number) => number;
+declare const metersToYards: (meters: number) => number;
+declare const inchesToCentimeters: (inches: number) => number;
+declare const centimetersToInches: (cm: number) => number;
+/**
+ * Auto-scale distance to the most appropriate unit
+ */
+declare const autoScaleDistance: (value: number | null | undefined, metric?: boolean, decimals?: number) => string | null;
+/**
+ * Format distance according to DistanceFormat specification
+ */
+declare const formatDistance: (value: FieldValue, format: DistanceFormat) => FormattedValue;
+
+/**
+ * Energy formatting utilities (stored or consumed energy)
+ * For power (rate of energy), use power.ts
+ * For electrical units (voltage, current), use voltage.ts and current.ts
+ */
+
+/**
+ * Format as Watt-hours
+ */
+declare const toWh: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as kilowatt-hours
+ */
+declare const tokWh: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as megawatt-hours
+ */
+declare const toMWh: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as gigawatt-hours
+ */
+declare const toGWh: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Auto-scale energy to the most appropriate unit
+ */
+declare const autoScaleEnergy: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format energy according to EnergyFormat specification
+ */
+declare const formatEnergy: (value: FieldValue, format: EnergyFormat) => FormattedValue;
+
+/**
+ * Number and currency formatting utilities
+ */
+
+/**
+ * Check if a value is null or undefined
+ */
+declare const isNil: (value: unknown) => value is null | undefined;
+/**
+ * Format as percentage
+ */
+declare const toPercentage: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as integer
+ */
+declare const toInteger: (value: number | null | undefined) => string | null;
+/**
+ * Format as float with specified decimals
+ */
+declare const toFloat: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format number with thousands separator
+ */
+declare const toFormattedNumber: (value: number | null | undefined, decimals?: number, thousandsSeparator?: boolean) => string | null;
+/**
+ * Format number with compact notation (1K, 1M, etc.)
+ */
+declare const toCompactNumber: (value: number | null | undefined, display?: "short" | "long") => string | null;
+/**
+ * Format number with scientific notation
+ */
+declare const toScientificNotation: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as currency
+ */
+declare const toCurrency: (value: number | null | undefined, currency?: string, options?: Partial<CurrencyFormat>) => string | null;
+/**
+ * Format number according to NumberFormat specification
+ */
+declare const formatNumber: (value: FieldValue, format: NumberFormat) => FormattedValue;
+/**
+ * Format currency according to CurrencyFormat specification
+ */
+declare const formatCurrency: (value: FieldValue, format: CurrencyFormat) => FormattedValue;
+
+/**
+ * Phone number formatting utilities
+ */
+
+/**
+ * Format US phone number
+ */
+declare const formatUSPhone: (phone: string | null | undefined) => string | null;
+/**
+ * Format international phone number
+ */
+declare const formatInternationalPhone: (phone: string | null | undefined) => string | null;
+/**
+ * Format phone number with basic formatting
+ */
+declare const formatPhoneNumber: (phone: string | null | undefined) => string | null;
+/**
+ * Format phone according to PhoneFormat specification
+ */
+declare const formatPhone: (value: FieldValue, format: PhoneFormat) => FormattedValue;
+
+/**
+ * Power formatting utilities (rate of energy transfer)
+ */
+
+/**
+ * Format as Watts
+ */
+declare const toWatts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as kilowatts
+ */
+declare const toKilowatts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as megawatts
+ */
+declare const toMegawatts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as gigawatts
+ */
+declare const toGigawatts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Auto-scale power to the most appropriate unit
+ */
+declare const autoScalePower: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format power according to PowerFormat specification
+ */
+declare const formatPower: (value: FieldValue, format: PowerFormat) => FormattedValue;
+declare const toW: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toKW: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toMW: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toGW: (value: number | null | undefined, decimals?: number) => string | null;
+
+/**
+ * FormatRegistry - A singleton pattern for managing formatters
+ * Allows registration and retrieval of formatting functions by key
+ */
+
+declare class FormatRegistryClass {
+    private formatters;
+    /**
+     * Register a new formatter
+     * @param key - Unique identifier for the formatter
+     * @param formatter - The formatting function
+     */
+    register(key: string, formatter: FormatterFunction): void;
+    /**
+     * Format a value using a registered formatter
+     * @param key - The formatter key
+     * @param value - The value to format
+     * @param args - Additional arguments to pass to the formatter
+     * @returns The formatted value or null
+     */
+    format(key: string, value: FieldValue, ...args: unknown[]): FormattedValue;
+    /**
+     * Check if a formatter is registered
+     * @param key - The formatter key
+     * @returns True if the formatter exists
+     */
+    has(key: string): boolean;
+    /**
+     * Get all registered formatter keys
+     * @returns Array of formatter keys
+     */
+    keys(): string[];
+    /**
+     * Remove a formatter
+     * @param key - The formatter key to remove
+     */
+    unregister(key: string): void;
+    /**
+     * Clear all registered formatters
+     */
+    clear(): void;
+}
+declare const FormatRegistry: FormatRegistryClass;
+
+/**
+ * Electrical resistance formatting utilities
+ */
+
+/**
+ * Format as milliohms
+ */
+declare const toMilliohms: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as ohms
+ */
+declare const toOhms: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as kilohms
+ */
+declare const toKilohms: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as megohms
+ */
+declare const toMegohms: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Auto-scale resistance to the most appropriate unit
+ */
+declare const autoScaleResistance: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format resistance according to ResistanceFormat specification
+ */
+declare const formatResistance: (value: FieldValue, format: ResistanceFormat) => FormattedValue;
+
+/**
+ * Temperature formatting utilities
+ */
+
+/**
+ * Convert temperature unit string to symbol
+ */
+declare const temperatureStringToSymbol: (unit: TemperatureUnitString) => TemperatureUnit;
+/**
+ * Format as Fahrenheit
+ */
+declare const toFahrenheit: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as Celsius
+ */
+declare const toCelsius: (value: number | null | undefined, fromFahrenheit?: boolean, decimals?: number) => string | null;
+/**
+ * Format as Kelvin
+ */
+declare const toKelvin: (value: number | null | undefined, fromFahrenheit?: boolean, decimals?: number) => string | null;
+/**
+ * Convert Celsius to Fahrenheit
+ */
+declare const celsiusToFahrenheit: (celsius: number) => number;
+/**
+ * Convert Fahrenheit to Celsius
+ */
+declare const fahrenheitToCelsius: (fahrenheit: number) => number;
+/**
+ * Convert Celsius to Kelvin
+ */
+declare const celsiusToKelvin: (celsius: number) => number;
+/**
+ * Convert Kelvin to Celsius
+ */
+declare const kelvinToCelsius: (kelvin: number) => number;
+/**
+ * Convert Fahrenheit to Kelvin
+ */
+declare const fahrenheitToKelvin: (fahrenheit: number) => number;
+/**
+ * Convert Kelvin to Fahrenheit
+ */
+declare const kelvinToFahrenheit: (kelvin: number) => number;
+/**
+ * Format temperature with specified unit
+ */
+declare const toTemperature: (value: number | null | undefined, unit?: TemperatureUnit | TemperatureUnitString, decimals?: number) => string | null;
+/**
+ * Format temperature according to TemperatureFormat specification
+ */
+declare const formatTemperature: (value: FieldValue, format: TemperatureFormat) => FormattedValue;
+
+/**
+ * Text formatting utilities
+ */
+
+/**
+ * Convert text to uppercase
+ */
+declare const toUpperCase: (text: string | null | undefined) => string;
+/**
+ * Convert text to lowercase
+ */
+declare const toLowerCase: (text: string | null | undefined) => string;
+/**
+ * Convert text to sentence case
+ */
+declare const toSentenceCase: (text: string | null | undefined) => string;
+/**
+ * Convert text to title case
+ */
+declare const toTitleCase: (text: string | null | undefined) => string;
+/**
+ * Capitalize first letter of each word
+ */
+declare const capitalize: (text: string | null | undefined) => string;
+/**
+ * Uppercase first letter only
+ */
+declare const ucFirst: (text: string | null | undefined) => string;
+/**
+ * Convert camelCase to words
+ */
+declare const camelCaseToWords: (text: string | null | undefined) => string;
+/**
+ * Convert snake_case to words
+ */
+declare const snakeCaseToWords: (text: string | null | undefined) => string;
+/**
+ * Convert enum-style text to sentence case
+ */
+declare const enumToSentenceCase: (text: string | null | undefined) => string;
+/**
+ * Truncate text in the middle
+ */
+declare const truncateMiddle: (value: string | null | undefined, length?: number) => string;
+/**
+ * Truncate text at the start
+ */
+declare const truncateStart: (value: string | null | undefined, length?: number) => string;
+/**
+ * Truncate text at the end
+ */
+declare const truncateEnd: (value: string | null | undefined, length?: number, ellipsis?: string) => string;
+/**
+ * Mask sensitive text (e.g., secrets, API keys)
+ */
+declare const toSecret: (value: string | null | undefined) => string;
+/**
+ * Format text according to TextFormat specification
+ */
+declare const formatText: (value: FieldValue, format: TextFormat) => FormattedValue;
+
+/**
+ * Voltage formatting utilities (electrical potential)
+ */
+
+/**
+ * Format as millivolts
+ */
+declare const toMillivolts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as volts
+ */
+declare const toVolts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format as kilovolts
+ */
+declare const toKilovolts: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Auto-scale voltage to the most appropriate unit
+ */
+declare const autoScaleVoltage: (value: number | null | undefined, decimals?: number) => string | null;
+/**
+ * Format voltage according to VoltageFormat specification
+ */
+declare const formatVoltage: (value: FieldValue, format: VoltageFormat) => FormattedValue;
+declare const toMV: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toV: (value: number | null | undefined, decimals?: number) => string | null;
+declare const toKV: (value: number | null | undefined, decimals?: number) => string | null;
+
+/**
+ * Comprehensive formatting utilities for the Edges design system
+ *
+ * This module provides a unified formatting system with support for:
+ * - Text formatting (case conversion, truncation, etc.)
+ * - Number formatting (decimals, thousands separators, compact notation)
+ * - Currency formatting (multiple currencies and display options)
+ * - Date formatting (relative time, custom formats, timezones)
+ * - Boolean formatting (custom true/false text)
+ * - Energy units (Wh, kWh, MWh, GWh with auto-scaling)
+ * - Temperature units (Celsius, Fahrenheit, Kelvin)
+ * - Distance units (meters, kilometers, miles, feet)
+ * - Phone number formatting (US and international)
+ * - Custom formatters via the FormatRegistry
+ */
+
+/**
+ * Main formatting function that routes to the appropriate formatter
+ * based on the format type
+ *
+ * @param value - The value to format
+ * @param format - The format specification
+ * @returns The formatted value or null
+ *
+ * @example
+ * ```typescript
+ * // Format as currency
+ * formatFieldValue(1234.56, { type: "currency", currency: "USD" })
+ * // Returns: "$1,234.56"
+ *
+ * // Format as relative time
+ * formatFieldValue(new Date(), { type: "date", relative: true })
+ * // Returns: "just now"
+ *
+ * // Format with custom formatter
+ * formatFieldValue("hello", {
+ *   type: "custom",
+ *   formatter: (val) => String(val).toUpperCase()
+ * })
+ * // Returns: "HELLO"
+ * ```
+ */
+declare const formatFieldValue: (value: FieldValue, format: FieldFormat) => FormattedValue;
+/**
+ * Convenience function to create a format object
+ *
+ * @example
+ * ```typescript
+ * const currencyFormat = createFormat("currency", { currency: "EUR" });
+ * const dateFormat = createFormat("date", { relative: true });
+ * ```
+ */
+declare const createFormat: <T extends FieldFormat["type"]>(type: T, options?: Omit<Extract<FieldFormat, {
+    type: T;
+}>, "type">) => Extract<FieldFormat, {
+    type: T;
+}>;
+
 /**
  * Control-specific style utilities for form elements and interactive components.
  * These styles use CSS variables defined in the theme for consistent sizing
@@ -36,7 +789,7 @@ interface Item {
     id: string;
     name: string;
 }
-interface Section {
+interface Section$1 {
     name: string;
     items: Item[];
 }
@@ -69,7 +822,7 @@ type AutocompleteRequestConfig = RestRequestConfig | GraphQLRequestConfig;
 interface AutocompleteProps {
     label?: string;
     staticItems?: Item[];
-    sections?: Section[];
+    sections?: Section$1[];
     selectedKey?: Key | null;
     defaultSelectedKey?: Key | null;
     onSelectionChange?: (key: Key | null) => void;
@@ -78,7 +831,7 @@ interface AutocompleteProps {
     placeholder?: string;
     renderItem?: (item: Item) => React__default.ReactNode;
     renderLeftIcon?: (isLoading: boolean) => React__default.ReactNode;
-    renderSection?: (section: Section, children: React__default.ReactNode) => React__default.ReactNode;
+    renderSection?: (section: Section$1, children: React__default.ReactNode) => React__default.ReactNode;
     errorMessage?: string | ((validation: ValidationResult) => string);
     description?: string;
     size?: Size;
@@ -617,7 +1370,7 @@ declare class ErrorBoundary extends Component<Props, State> {
     static getDerivedStateFromError(error: Error): State;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     private handleRetry;
-    render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | null | undefined;
+    render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
 }
 
 interface InputStyleProps {
@@ -826,6 +1579,205 @@ declare function FieldGroup(props: FieldGroupProps): react_jsx_runtime.JSX.Eleme
  */
 declare function Form(props: FormProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Grid Component — Flexible layout system for dashboards
+ *
+ * A higher-level abstraction over CSS Grid that provides responsive columns,
+ * consistent spacing, and span helpers for building complex dashboard layouts.
+ *
+ * Usage:
+ * ```tsx
+ * <Grid cols={{ base: 1, md: 2, lg: 4 }} gap="md">
+ *   <Grid.Item span={{ base: 1, lg: 2 }}>
+ *     <Card>Wide content</Card>
+ *   </Grid.Item>
+ *   <Grid.Item>
+ *     <Card>Regular content</Card>
+ *   </Grid.Item>
+ * </Grid>
+ * ```
+ */
+type ResponsiveValue<T> = T | {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    "2xl"?: T;
+};
+type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "none";
+type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full" | "auto";
+type GridGap = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type GridAlign = "start" | "center" | "end" | "stretch" | "baseline";
+type GridJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+type GridFlow = "row" | "col" | "dense" | "row-dense" | "col-dense";
+interface GridProps {
+    /** Number of columns at different breakpoints */
+    cols?: ResponsiveValue<GridCols>;
+    /** Gap between grid items using design tokens */
+    gap?: GridGap;
+    /** Gap between rows specifically */
+    gapY?: GridGap;
+    /** Gap between columns specifically */
+    gapX?: GridGap;
+    /** Vertical alignment of items */
+    align?: GridAlign;
+    /** Horizontal justification of the grid */
+    justify?: GridJustify;
+    /** Grid flow direction */
+    flow?: GridFlow;
+    /** Auto-fit mode with minimum item width */
+    autoFit?: string;
+    /** Auto-fill mode with minimum item width */
+    autoFill?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children?: React__default.ReactNode;
+}
+interface GridItemProps {
+    /** Column span at different breakpoints */
+    span?: ResponsiveValue<GridSpan>;
+    /** Column start position */
+    colStart?: ResponsiveValue<number | "auto">;
+    /** Column end position */
+    colEnd?: ResponsiveValue<number | "auto">;
+    /** Row span at different breakpoints */
+    rowSpan?: ResponsiveValue<GridSpan>;
+    /** Row start position */
+    rowStart?: ResponsiveValue<number | "auto">;
+    /** Row end position */
+    rowEnd?: ResponsiveValue<number | "auto">;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children?: React__default.ReactNode;
+}
+declare function Grid({ cols, gap, gapX, gapY, align, justify, flow, autoFit, autoFill, className, children, }: GridProps): react_jsx_runtime.JSX.Element;
+declare namespace Grid {
+    var Item: typeof GridItem;
+}
+declare function GridItem({ span, className, children, }: GridItemProps): react_jsx_runtime.JSX.Element;
+
+type KpiFormatter = ComponentFormatter;
+/**
+ * Kpi Component — Single metric display
+ *
+ * Displays a key performance indicator with value, delta, trend, and status.
+ * Designed to work standalone or within a KpiGroup for dashboard layouts.
+ *
+ * Usage:
+ * ```tsx
+ * <Kpi
+ *   label="Active Sites"
+ *   value={2481}
+ *   delta={3.2}
+ *   deltaPeriodLabel="vs last 7d"
+ *   trend={dataPoints}
+ * />
+ * ```
+ */
+type KpiStatus = "neutral" | "success" | "warning" | "error" | "info";
+type KpiSize = "sm" | "md" | "lg";
+type KpiOrientation = "vertical" | "horizontal";
+interface TrendPoint {
+    x: number | string | Date;
+    y: number;
+}
+interface KpiProps {
+    /** Short label describing the metric */
+    label: React__default.ReactNode;
+    /** Primary value - number for auto-formatting or string for custom display */
+    value: number | string;
+    /** Formatter using the unified formatting system */
+    formatter?: KpiFormatter;
+    /** Change since prior period */
+    delta?: number;
+    /** Description of delta period (e.g., "vs last 7d") */
+    deltaPeriodLabel?: string;
+    /** How to interpret delta direction */
+    deltaIntent?: "upIsGood" | "downIsGood";
+    /** Mini trend data points */
+    trend?: TrendPoint[];
+    /** Status indicator */
+    status?: {
+        value: string;
+        tone?: KpiStatus;
+    };
+    /** Help text or tooltip content */
+    helpText?: React__default.ReactNode;
+    /** Size variant */
+    size?: KpiSize;
+    /** Layout orientation */
+    orientation?: KpiOrientation;
+    /** Loading state */
+    loading?: boolean;
+    /** Empty state */
+    empty?: boolean;
+    /** Error state */
+    error?: string | React__default.ReactNode;
+    /** Click handler for drill-down */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom value renderer */
+    renderValue?: (value: KpiProps["value"]) => React__default.ReactNode;
+    /** Custom delta renderer */
+    renderDelta?: (delta?: number) => React__default.ReactNode;
+    /** Custom trend renderer */
+    renderTrend?: (points?: TrendPoint[]) => React__default.ReactNode;
+}
+declare function Kpi({ label, value, formatter, delta, deltaPeriodLabel, deltaIntent, trend, status, helpText, size, orientation, loading, empty, error, onClick, className, renderValue, renderDelta, renderTrend, }: KpiProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * KpiGroup Component — Layout container for multiple KPIs
+ *
+ * Provides consistent grid layout for KPI cards with responsive columns
+ * and spacing. Perfect for dashboard metric rows and summary sections.
+ *
+ * Usage:
+ * ```tsx
+ * <KpiGroup cols={{ base: 1, md: 2, lg: 4 }}>
+ *   <Kpi label="Revenue" value={45231} />
+ *   <Kpi label="Users" value={1234} />
+ *   <Kpi label="Conversion" value={0.089} unit="%" />
+ *   <Kpi label="Avg Order" value={89.50} unit="$" />
+ * </KpiGroup>
+ * ```
+ */
+type KpiGroupGap = "xs" | "sm" | "md" | "lg" | "xl";
+type KpiGroupAlign = "start" | "center" | "stretch";
+interface KpiGroupCols {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    "2xl"?: number;
+}
+interface KpiGroupProps {
+    /** KPI components to display */
+    children: React__default.ReactNode;
+    /** Responsive column configuration */
+    cols?: KpiGroupCols | number;
+    /** Gap between items using spacing tokens */
+    gap?: KpiGroupGap;
+    /** Vertical alignment of items */
+    align?: KpiGroupAlign;
+    /** Force equal heights for all items */
+    equalizeHeights?: boolean;
+    /** Optional header content */
+    header?: React__default.ReactNode;
+    /** Loading state for all children */
+    loading?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function KpiGroup({ children, cols, gap, align, equalizeHeights, header, loading, className, }: KpiGroupProps): react_jsx_runtime.JSX.Element;
+declare namespace KpiGroup {
+    var displayName: string;
+}
+
 /**
  * ListBox
  *
@@ -984,6 +1936,104 @@ interface NumberFieldProps extends Omit<NumberFieldProps$1, "size" | "className"
 }
 declare function NumberField({ label, description, errorMessage, size, tooltip, isRequired, transparent, validationResult, ...props }: NumberFieldProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * PageLayout — opinionated, SSR-friendly page scaffold for dashboards.
+ *
+ * Structure:
+ *   <PageLayout>
+ *     <PageLayout.Header title="..." subtitle="..." breadcrumbs={[...]} />
+ *     <PageLayout.Actions primary={<Button/>} secondary={<Button/>} />
+ *     <PageLayout.Filters>...chips/search/time...</PageLayout.Filters>
+ *     <PageLayout.Tabs tabs={[...]} value=... onChange=... />
+ *     <PageLayout.Content>
+ *       <Grid cols={{ base: 1, lg: 4 }} gap="lg">
+ *         ...cards/tables/content...
+ *       </Grid>
+ *     </PageLayout.Content>
+ *     <PageLayout.Aside>...sticky insights/help...</PageLayout.Aside>
+ *   </PageLayout>
+ *
+ * Notes:
+ * - Router-agnostic: Breadcrumbs accept either structured items with a Link component, or a custom ReactNode.
+ * - Accessible: Header uses h1; Tabs are roving-`tablist`; Filters region has landmark role.
+ * - Composable: Use with Grid component for layouts, Card for content containers.
+ * - Styling: token-oriented utility classes (match to your Tailwind preset/tokens).
+ */
+type BreadcrumbItem = {
+    label: string;
+    href?: string;
+};
+type PageLayoutProps = {
+    children: React$1.ReactNode;
+    /** Constrain width and apply default page rhythm */
+    maxWidth?: number;
+    paddingXClass?: string;
+    paddingYClass?: string;
+    className?: string;
+};
+declare function PageLayout({ children, maxWidth, paddingXClass, paddingYClass, className, }: PageLayoutProps): react_jsx_runtime.JSX.Element;
+declare namespace PageLayout {
+    var Header: typeof Header;
+    var Actions: typeof Actions;
+    var Filters: typeof Filters;
+    var Tabs: typeof Tabs$1;
+    var Content: typeof Content;
+    var Aside: typeof Aside$1;
+}
+type PageHeaderProps = {
+    title: React$1.ReactNode;
+    subtitle?: React$1.ReactNode;
+    breadcrumbs?: BreadcrumbItem[];
+    /** Custom breadcrumbs node if you don't want the built-in renderer */
+    breadcrumbsNode?: React$1.ReactNode;
+    /** Optional right-aligned meta area (badges, status, small stats) */
+    meta?: React$1.ReactNode;
+    /** Optional slot to replace the default heading element */
+    headingAs?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    className?: string;
+};
+declare function Header({ title, subtitle, breadcrumbs, breadcrumbsNode, meta, headingAs, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+type PageActionsProps = {
+    primary?: React$1.ReactNode;
+    secondary?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+    align?: "start" | "end";
+    className?: string;
+};
+declare function Actions({ primary, secondary, children, align, className, }: PageActionsProps): react_jsx_runtime.JSX.Element;
+type PageFiltersProps = {
+    children: React$1.ReactNode;
+    className?: string;
+    ariaLabel?: string;
+};
+declare function Filters({ children, className, ariaLabel }: PageFiltersProps): react_jsx_runtime.JSX.Element;
+type PageLayoutTab = {
+    id: string;
+    label: React$1.ReactNode;
+    disabled?: boolean;
+};
+type TabsProps$1 = {
+    tabs: PageLayoutTab[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (id: string) => void;
+    className?: string;
+    children?: React$1.ReactNode;
+};
+declare function Tabs$1({ tabs, value, defaultValue, onChange, className, children }: TabsProps$1): react_jsx_runtime.JSX.Element;
+type PageContentProps = {
+    children: React$1.ReactNode;
+    className?: string;
+};
+declare function Content({ children, className }: PageContentProps): react_jsx_runtime.JSX.Element;
+type PageAsideProps = {
+    children: React$1.ReactNode;
+    /** Sticky aside on wide screens */
+    sticky?: boolean;
+    className?: string;
+};
+declare function Aside$1({ children, sticky, className }: PageAsideProps): react_jsx_runtime.JSX.Element;
+
 interface Place {
     id: string;
     place_name: string;
@@ -1070,6 +2120,50 @@ interface RangeCalendarProps<T extends DateValue> extends Omit<RangeCalendarProp
 }
 declare function RangeCalendar<T extends DateValue>({ errorMessage, ...props }: RangeCalendarProps<T>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Section Component — Semantic content grouping for dashboards
+ *
+ * A lightweight container that provides structure and hierarchy to page content.
+ * Less heavy than a Card, more structured than a div. Perfect for organizing
+ * related content with consistent spacing and optional headers.
+ *
+ * Usage:
+ * ```tsx
+ * <Section
+ *   title="Overview"
+ *   description="Key metrics and performance indicators"
+ *   actions={<Button variant="ghost" size="sm">Refresh</Button>}
+ * >
+ *   <Grid cols={{ base: 1, lg: 3 }}>
+ *     <Card>...</Card>
+ *   </Grid>
+ * </Section>
+ * ```
+ */
+type SectionVariant = "plain" | "contained" | "bordered";
+type SectionSpacing = "none" | "sm" | "md" | "lg";
+interface SectionProps {
+    /** Section title */
+    title?: React__default.ReactNode;
+    /** Optional description/subtitle */
+    description?: React__default.ReactNode;
+    /** Actions slot (buttons, links, etc.) */
+    actions?: React__default.ReactNode;
+    /** Visual variant */
+    variant?: SectionVariant;
+    /** Vertical spacing around section */
+    spacing?: SectionSpacing;
+    /** Show divider under header */
+    withDivider?: boolean;
+    /** Heading level for accessibility */
+    headingAs?: "h2" | "h3" | "h4";
+    /** Additional CSS classes */
+    className?: string;
+    /** Section content */
+    children?: React__default.ReactNode;
+}
+declare function Section({ title, description, actions, variant, spacing, withDivider, headingAs, className, children, }: SectionProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Interface defining the shape of items in the Select component
  */
@@ -1155,25 +2249,150 @@ interface SliderProps {
 }
 declare function Slider({ label, description, tooltip, errorMessage, size, className, value, defaultValue, onChange, min, max, step, disabled, showValue, }: SliderProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * SplitPane Component — Resizable two-panel layout
+ *
+ * A layout primitive for side-by-side content with a draggable divider.
+ * Perfect for list/detail views, dashboards with inspectors, or any
+ * main/aside layout that benefits from user-controlled sizing.
+ *
+ * Usage:
+ * ```tsx
+ * <SplitPane defaultSize={0.7} minSize={280} maxSize={480}>
+ *   <SplitPane.Main>
+ *     <DataTable />
+ *   </SplitPane.Main>
+ *   <SplitPane.Aside>
+ *     <Inspector />
+ *   </SplitPane.Aside>
+ * </SplitPane>
+ * ```
+ */
+type SplitPaneOrientation = "horizontal" | "vertical";
+interface SplitPaneProps {
+    /** Initial size of the main panel (0-1 for ratio, or px value) */
+    defaultSize?: number;
+    /** Minimum size of aside panel in pixels */
+    minSize?: number;
+    /** Maximum size of aside panel in pixels */
+    maxSize?: number;
+    /** Orientation of the split */
+    orientation?: SplitPaneOrientation;
+    /** Whether the divider is draggable */
+    resizable?: boolean;
+    /** Callback when resize occurs */
+    onResize?: (size: number) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child panels */
+    children?: React__default.ReactNode;
+}
+interface SplitPanePanelProps {
+    className?: string;
+    children?: React__default.ReactNode;
+}
+declare function SplitPane({ defaultSize, minSize, maxSize, orientation, resizable, onResize, className, children, }: SplitPaneProps): react_jsx_runtime.JSX.Element;
+declare namespace SplitPane {
+    var Main: typeof Main;
+    var Aside: typeof Aside;
+}
+declare function Main({ className, children }: SplitPanePanelProps): react_jsx_runtime.JSX.Element;
+declare function Aside({ className, children }: SplitPanePanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * StatList — Compact key-value statistics display
+ *
+ * Displays formatted statistics with status indicators and optional copy functionality.
+ * Uses the unified formatting system for consistent data presentation.
+ */
+type StatTone = "neutral" | "success" | "warning" | "error" | "info";
+type StatAlign = "start" | "end";
+type StatLayout = "one-column" | "two-column";
+type StatValue = FieldValue;
+type StatFormatter = ComponentFormatter;
+interface StatThreshold {
+    when: (value: StatValue) => boolean;
+    tone: StatTone;
+}
+interface StatItem {
+    /** Unique identifier */
+    id: string;
+    /** Label for the statistic */
+    label: React__default.ReactNode;
+    /** Value to display */
+    value: StatValue;
+    /** Custom formatter for the value */
+    formatter?: StatFormatter;
+    /** Additional metadata below value */
+    meta?: React__default.ReactNode;
+    /** Explicit tone/status color */
+    tone?: StatTone;
+    /** Data-driven tone based on value */
+    thresholds?: StatThreshold[];
+    /** Enable copy to clipboard */
+    copyable?: boolean | ((value: StatValue) => string);
+    /** Optional link URL */
+    href?: string;
+    /** Click handler */
+    onAction?: () => void;
+    /** Icon before label */
+    iconLeft?: React__default.ReactNode;
+    /** Icon after value */
+    iconRight?: React__default.ReactNode;
+    /** Tooltip for additional info */
+    tooltip?: React__default.ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+}
+interface StatListProps {
+    /** Statistics to display */
+    items: StatItem[];
+    /** Layout mode */
+    layout?: StatLayout;
+    /** Compact spacing */
+    dense?: boolean;
+    /** Value alignment */
+    valueAlign?: StatAlign;
+    /** Show dividers between items */
+    showDividers?: boolean;
+    /** Loading state */
+    skeleton?: boolean;
+    /** Empty state */
+    empty?: boolean;
+    /** Error state */
+    error?: string | React__default.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function StatList({ items, layout, dense, valueAlign, showDividers, skeleton, empty, error, className, }: StatListProps): react_jsx_runtime.JSX.Element;
+
 interface SwitchProps extends Omit<SwitchProps$1, "children"> {
     children: React__default.ReactNode;
 }
 declare function Switch({ children, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
 
+type TabVariant = "default" | "accent";
 type TabProps = TabProps$1 & {
     isSelected?: boolean;
     id?: string;
 };
+type TabsProps = TabsProps$2 & {
+    variant?: TabVariant;
+};
+type TabListProps<T extends object> = TabListProps$1<T> & {
+    variant?: TabVariant;
+};
 /**
  * Tabs
  *
  * Tabbed interface with styled tabs and panels.
+ * @param variant - "default" for gray styling, "accent" for brand color styling
  */
-declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;
+declare function Tabs({ variant, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
 /**
  * TabList container.
  */
-declare function TabList<T extends object>(props: TabListProps<T>): react_jsx_runtime.JSX.Element;
+declare function TabList<T extends object>({ variant, ...props }: TabListProps<T>): react_jsx_runtime.JSX.Element;
 /**
  * Tab trigger element.
  */
@@ -1326,4 +2545,4 @@ interface ColorModeProviderProps {
 }
 declare const ColorModeProvider: React.FC<ColorModeProviderProps>;
 
-export { type Action, ActionCell, type ActionCellProps, AreaSeries, AutoMobileRenderer, Autocomplete, BarSeries, BaseDataPoint, type BaseInputProps, type BaseProps, BooleanCell, type BooleanCellProps, Breadcrumb, Breadcrumbs, Button, Calendar, CardMobileRenderer, type CellAlignment, type CellComponent, type CellComponentProps, type CellContext, type CellEmphasis, ChartAxis, ChartBottomBar, ChartContainer, type ChartExportMetadata, ChartTooltip, Checkbox, CheckboxGroup, Chip, ClearButton, ColorModeProvider, type Column, CopyToClipboard, DataTable, type DataTableProps, DateCell, type DateCellProps, DateRangePicker, Description, type DescriptionProps, Dialog, DialogHeader, Drawer, ErrorBoundary, type ExportType, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, Form, Icon, Input, type InputProps, type InputStyleProps, InputWrapper, Label, type LabelProps, LineSeries, type LinkBehavior, ListBox, ListBoxItem, type MobileBreakpoint, type MobileConfig, type MobileRenderer, Notice, NoticeContainer, type NoticeContainerProps, type NoticeOptions, type NoticeProps, NoticeProvider, type NoticeProviderProps, type NoticeVariant, NumberCell, type NumberCellProps, NumberField, PlaceSearch, Popover, ProgressBar, Radio, RadioGroup, RangeCalendar, SKELETON_SIZES, Select, SelectCell, type SelectCellProps, Skeleton, Slider, type SortConfig, type SortDirection, Switch, Tab, TabList, TabPanel, type TableDensity, type TableLayout, type TableWidth, Tabs, TextArea, TextAreaWithChips, TextCell, type TextCellProps, TextField, TimeField, ToggleButton, Tooltip, TooltipData, YFormatType, exportChart, formatEmptyValue, getBadgeClasses, getBooleanBadgeVariant, getCellAlignmentClasses, getCellContainerClasses, getCellTextClasses, getExportFormatName, getFieldGroupStyles, getInputBackgroundStyles, getInputBaseStyles, getInputStateStyles, getNumericColorClasses, getSkeletonSize, isExportSupported, resolveValue, useColorMode, useDebounce, useInputFocus, useLocalStorage, useNotice };
+export { type Action, ActionCell, type ActionCellProps, AreaSeries, AutoMobileRenderer, Autocomplete, BarSeries, BaseDataPoint, type BaseFormat, type BaseInputProps, type BaseProps, BooleanCell, type BooleanCellProps, type BooleanFormat, Breadcrumb, type BreadcrumbItem, Breadcrumbs, Button, Calendar, CardMobileRenderer, type CellAlignment, type CellComponent, type CellComponentProps, type CellContext, type CellEmphasis, ChartAxis, ChartBottomBar, ChartContainer, type ChartExportMetadata, ChartTooltip, Checkbox, CheckboxGroup, Chip, ClearButton, ColorModeProvider, type Column, type ComponentFormatOptions, type ComponentFormatter, CopyToClipboard, type CurrencyFormat, type CurrentFormat, type CurrentUnit, type CustomFormat, DataTable, type DataTableProps, DateCell, type DateCellProps, type DateFormat, type DateFormatStyle, DateRangePicker, Description, type DescriptionProps, Dialog, DialogHeader, type DistanceFormat, type DistanceUnit, Drawer, type EnergyFormat, type EnergyUnit, ErrorBoundary, type ExportType, FieldError, type FieldErrorProps, type FieldFormat, FieldGroup, type FieldGroupProps, type FieldValue, Form, FormatRegistry, type FormattedValue, type FormatterFunction, Grid, type GridAlign, type GridCols, type GridFlow, type GridGap, type GridItemProps, type GridJustify, type GridProps, type GridSpan, Icon, Input, type InputProps, type InputStyleProps, InputWrapper, Kpi, KpiGroup, type KpiGroupAlign, type KpiGroupCols, type KpiGroupGap, type KpiGroupProps, type KpiOrientation, type KpiProps, type KpiSize, type KpiStatus, Label, type LabelProps, LineSeries, type LinkBehavior, ListBox, ListBoxItem, type MobileBreakpoint, type MobileConfig, type MobileRenderer, Notice, NoticeContainer, type NoticeContainerProps, type NoticeOptions, type NoticeProps, NoticeProvider, type NoticeProviderProps, type NoticeVariant, NumberCell, type NumberCellProps, NumberField, type NumberFormat, type PageActionsProps, type PageAsideProps, type PageContentProps, type PageFiltersProps, type PageHeaderProps, PageLayout, type PageLayoutProps, type PhoneFormat, PlaceSearch, Popover, type PowerFormat, type PowerUnit, ProgressBar, Radio, RadioGroup, RangeCalendar, type ResistanceFormat, type ResistanceUnit, type ResponsiveValue, SKELETON_SIZES, Section, type SectionProps, type SectionSpacing, type SectionVariant, Select, SelectCell, type SelectCellProps, Skeleton, Slider, type SortConfig, type SortDirection, SplitPane, type SplitPaneOrientation, type SplitPanePanelProps, type SplitPaneProps, type StatAlign, type StatFormatter, type StatItem, type StatLayout, StatList, type StatListProps, type StatThreshold, type StatTone, type StatValue, Switch, Tab, TabList, TabPanel, type TableDensity, type TableLayout, type TableWidth, Tabs, type TabsProps$1 as TabsProps, type TemperatureFormat, type TemperatureUnit, type TemperatureUnitString, TextArea, TextAreaWithChips, TextCell, type TextCellProps, TextField, type TextFormat, type TextTransform, type TextTruncatePosition, TimeField, ToggleButton, Tooltip, TooltipData, type TrendPoint, type VoltageFormat, type VoltageUnit, YFormatType, autoScaleCurrent, autoScaleDistance, autoScaleEnergy, autoScalePower, autoScaleResistance, autoScaleVoltage, camelCaseToWords, capitalize, celsiusToFahrenheit, celsiusToKelvin, centimetersToInches, createFormat, enumToSentenceCase, exportChart, fahrenheitToCelsius, fahrenheitToKelvin, feetToMeters, feetToMiles, formatBoolean, formatComponentValue, formatCurrency, formatCurrent, formatDate, formatDistance, formatEmptyValue, formatEnergy, formatFieldValue, formatInternationalPhone, formatNumber, formatPhone, formatPhoneNumber, formatPower, formatResistance, formatTemperature, formatText, formatUSPhone, formatVoltage, getBadgeClasses, getBooleanBadgeVariant, getCellAlignmentClasses, getCellContainerClasses, getCellTextClasses, getDateParts, getExportFormatName, getFieldGroupStyles, getInputBackgroundStyles, getInputBaseStyles, getInputStateStyles, getNumericColorClasses, getSkeletonSize, inchesToCentimeters, isExportSupported, isNil, kelvinToCelsius, kelvinToFahrenheit, kilometersToMiles, metersToFeet, metersToMiles, metersToYards, milesToFeet, milesToKilometers, milesToMeters, parseBoolean, resolveValue, snakeCaseToWords, temperatureStringToSymbol, toA, toActiveInactive, toAmps, toBoolean, toCelsius, toCentimeters, toCheckmark, toCompactNumber, toCurrency, toCustomDateFormat, toDateString, toEnabledDisabled, toFahrenheit, toFeet, toFloat, toFormattedNumber, toFullDateTime, toGW, toGWh, toGigawatts, toISOString, toInches, toInteger, toKA, toKV, toKW, toKelvin, toKiloamps, toKilohms, toKilometers, toKilovolts, toKilowatts, toLowerCase, toMA, toMV, toMW, toMWh, toMegawatts, toMegohms, toMeters, toMiles, toMilliamps, toMillimeters, toMilliohms, toMillivolts, toNauticalMiles, toOhms, toOnOff, toPercentage, toRelativeTime, toScientificNotation, toSecret, toSentenceCase, toTemperature, toTitleCase, toTrueFalse, toUpperCase, toV, toVolts, toW, toWatts, toWh, toYards, tokWh, truncateEnd, truncateMiddle, truncateStart, ucFirst, useColorMode, useComponentFormatter, useDebounce, useInputFocus, useLocalStorage, useNotice, yardsToMeters };