@texturehq/edges 1.13.2 → 1.14.0

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import { Key, ValidationResult, BreadcrumbProps, BreadcrumbsProps, ButtonProps a
 export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger } from 'react-aria-components';
 import * as React$1 from 'react';
 import React__default, { RefObject, HTMLAttributes, ReactNode, ComponentProps, CSSProperties, ComponentType, Component, ErrorInfo } from 'react';
-import { F as FieldValue, B as BooleanFormat, a as FormattedValue, C as CurrentFormat, D as DateFormat, b as DistanceFormat, E as EnergyFormat, c as CurrencyFormat, N as NumberFormat, P as PhoneFormat, d as PowerFormat, e as FormatterFunction, R as ResistanceFormat, T as TemperatureUnitString, f as TemperatureUnit, g as TemperatureFormat, h as TextFormat, V as VoltageFormat, i as FieldFormat, j as BaseDataPoint, I as Icon, Y as YFormatType, k as TooltipData, l as IconName$2, m as ComponentFormatter, L as LayerSpec, n as CustomPinsSpec, G as GeoJsonLayerSpec, o as RasterLayerSpec, p as VectorLayerSpec, q as ClusteredVectorLayerSpec } from './server-BV15KAF4.js';
-export { A as ActionItem, s as ActionMenu, r as ActionMenuProps, u as AppShell, t as AppShellProps, w as Avatar, v as AvatarProps, y as Badge, x as BadgeProps, aF as BaseFormat, am as ChartContext, ao as ChartMargin, K as CodeEditor, z as CodeEditorProps, H as CodeLanguage, J as CodeTheme, Z as ColorSpec, aC as ComponentFormatOptions, aM as CurrentUnit, aP as CustomFormat, O as DateField, M as DateFieldProps, aI as DateFormatStyle, aO as DistanceUnit, aJ as EnergyUnit, S as FileUpload, Q as FileUploadProps, U as Heading, a5 as InteractiveMap, _ as InteractiveMapProps, $ as LayerFeature, a0 as LayerStyle, W as Loader, X as Logo, a6 as MAP_TYPES, a1 as MapPoint, a9 as Meter, a8 as MeterProps, aK as PowerUnit, a2 as RenderType, aN as ResistanceUnit, ab as RichTextEditor, aa as RichTextEditorProps, ad as SegmentOption, ae as SegmentedControl, ac as SegmentedControlProps, ah as SideNav, af as SideNavItem, ag as SideNavProps, a7 as StaticMap, a3 as StaticMapProps, ai as TextLink, aG as TextTransform, aH as TextTruncatePosition, al as TooltipSeries, ak as TopNav, aj as TopNavProps, aL as VoltageUnit, at as YFormatSettings, a4 as ZoomStops, au as clearColorCache, av as createCategoryColorMap, ap as createXScale, aq as createYScale, ar as defaultMargin, aD as formatComponentValue, aw as getContrastingTextColor, ax as getDefaultChartColor, ay as getDefaultColors, az as getResolvedColor, aA as getThemeCategoricalColors, as as getYFormatSettings, aB as isLightColor, an as useChartContext, aE as useComponentFormatter } from './server-BV15KAF4.js';
+import { F as FieldValue, B as BooleanFormat, a as FormattedValue, C as CurrentFormat, D as DateFormat, b as DistanceFormat, E as EnergyFormat, c as CurrencyFormat, N as NumberFormat, P as PhoneFormat, d as PowerFormat, e as FormatterFunction, R as ResistanceFormat, T as TemperatureUnitString, f as TemperatureUnit, g as TemperatureFormat, h as TextFormat, V as VoltageFormat, i as FieldFormat, j as BaseDataPoint, I as Icon, k as BadgeProps, Y as YFormatType, l as TooltipData, m as IconName$2, n as DeviceState, G as GridState, o as ComponentFormatter, L as LayerSpec, p as CustomPinsSpec, q as GeoJsonLayerSpec, r as RasterLayerSpec, s as VectorLayerSpec, t as ClusteredVectorLayerSpec } from './server-v2FT_HvE.js';
+export { A as ActionItem, v as ActionMenu, u as ActionMenuProps, x as AppShell, w as AppShellProps, z as Avatar, y as AvatarProps, H as Badge, aH as BaseFormat, ao as ChartContext, aq as ChartMargin, O as CodeEditor, J as CodeEditorProps, K as CodeLanguage, M as CodeTheme, $ as ColorSpec, aE as ComponentFormatOptions, aO as CurrentUnit, aR as CustomFormat, S as DateField, Q as DateFieldProps, aK as DateFormatStyle, aQ as DistanceUnit, aL as EnergyUnit, W as FileUpload, U as FileUploadProps, X as Heading, a7 as InteractiveMap, a0 as InteractiveMapProps, a1 as LayerFeature, a2 as LayerStyle, Z as Loader, _ as Logo, a8 as MAP_TYPES, a3 as MapPoint, ab as Meter, aa as MeterProps, aS as MetricFormat, aM as PowerUnit, a4 as RenderType, aP as ResistanceUnit, ad as RichTextEditor, ac as RichTextEditorProps, af as SegmentOption, ag as SegmentedControl, ae as SegmentedControlProps, aj as SideNav, ah as SideNavItem, ai as SideNavProps, a9 as StaticMap, a5 as StaticMapProps, ak as TextLink, aI as TextTransform, aJ as TextTruncatePosition, an as TooltipSeries, am as TopNav, al as TopNavProps, aN as VoltageUnit, av as YFormatSettings, a6 as ZoomStops, aU as activeDeviceStates, aw as clearColorCache, ax as createCategoryColorMap, ar as createXScale, as as createYScale, at as defaultMargin, aV as deviceStateLabels, aT as deviceStateMetricFormats, aF as formatComponentValue, ay as getContrastingTextColor, az as getDefaultChartColor, aA as getDefaultColors, aX as getDeviceStateDisplayLabel, aX as getDeviceStateLabel, aZ as getGridStateLabel, aB as getResolvedColor, aC as getThemeCategoricalColors, au as getYFormatSettings, aY as gridStateLabels, aW as isActiveDeviceState, aW as isActiveState, aD as isLightColor, ap as useChartContext, aG as useComponentFormatter } from './server-v2FT_HvE.js';
 import { Virtualizer } from '@tanstack/react-virtual';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ScaleTime, ScaleLinear } from 'd3-scale';
@@ -109,6 +109,43 @@ declare const parseBoolean: (value: FieldValue) => boolean | null;
  */
 declare const formatBoolean: (value: FieldValue, format: BooleanFormat) => FormattedValue;
 
+/**
+ * Capacity formatting utilities for batteries and energy storage
+ *
+ * Domain-specific formatters for energy capacity (kWh) and power ratings (kW).
+ * Auto-scales to appropriate units (MWh, MW for large values).
+ */
+/**
+ * Format battery capacity (kWh)
+ *
+ * @param value - Capacity in kWh
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted capacity string or null
+ *
+ * @example
+ * ```typescript
+ * formatCapacity(13.5); // "13.5 kWh"
+ * formatCapacity(1500); // "1.5 MWh"
+ * formatCapacity(null); // null
+ * ```
+ */
+declare function formatCapacity(value: number | null | undefined, decimals?: number): string | null;
+/**
+ * Format power rating (kW)
+ *
+ * @param value - Power rating in kW
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted power rating string or null
+ *
+ * @example
+ * ```typescript
+ * formatPowerRating(5.2); // "5.2 kW"
+ * formatPowerRating(2500); // "2.5 MW"
+ * formatPowerRating(null); // null
+ * ```
+ */
+declare function formatPowerRating(value: number | null | undefined, decimals?: number): string | null;
+
 /**
  * Electrical current formatting utilities (flow of electric charge)
  */
@@ -1801,6 +1838,35 @@ interface ConfirmProps {
  */
 declare function Confirm({ isOpen, onClose, onConfirm, title, message, confirmLabel, cancelLabel, confirmVariant, isDestructive, isLoading, maxWidth, minWidth, }: ConfirmProps): react_jsx_runtime.JSX.Element;
 
+interface ConnectionStatusBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+    /** Whether the device is currently connected */
+    isConnected: boolean;
+    /** Timestamp when the device last connected */
+    connectedAt?: Date | string | null;
+    /** Timestamp when the device disconnected */
+    disconnectedAt?: Date | string | null;
+    /** Show timestamp below the status */
+    showTimestamp?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * ConnectionStatusBadge
+ *
+ * Displays device connection status with optional timestamps.
+ * - Green "Connected" badge with pulsing dot
+ * - Gray "Disconnected" badge with duration offline
+ * - Auto-calculates "offline for 2 hours" type strings
+ *
+ * @example
+ * ```tsx
+ * <ConnectionStatusBadge isConnected={true} />
+ * <ConnectionStatusBadge isConnected={false} disconnectedAt={new Date()} showTimestamp />
+ * <ConnectionStatusBadge isConnected={true} connectedAt={new Date()} />
+ * ```
+ */
+declare function ConnectionStatusBadge({ isConnected, connectedAt, disconnectedAt, showTimestamp, isLoading, size, shape, ...badgeProps }: ConnectionStatusBadgeProps): react_jsx_runtime.JSX.Element;
+
 interface CopyToClipboardProps {
     /**
      * The value to copy to clipboard. If not provided, will use the text content of children
@@ -2259,7 +2325,7 @@ declare function SearchControl({ value, onChange, onClear, placeholder, size, cl
 type SortDirection = "asc" | "desc";
 type CellAlignment = "left" | "center" | "right";
 type TableDensity = "compact" | "default" | "relaxed";
-type CellEmphasis = "high" | "normal" | "low";
+type CellEmphasis = "strong" | "high" | "normal" | "low";
 type LinkBehavior = "none" | "hover" | "visible";
 type TableLayout = "auto" | "fixed" | "responsive";
 type TableWidth = "full" | "auto" | "contained";
@@ -2367,6 +2433,7 @@ interface BooleanCellProps<T = any> extends CellComponentProps<T> {
     showFalse?: boolean;
     align?: "left" | "center" | "right";
     emphasis?: CellEmphasis;
+    className?: string;
 }
 /**
  * BooleanCell
@@ -2374,7 +2441,7 @@ interface BooleanCellProps<T = any> extends CellComponentProps<T> {
  * DataTable cell component for displaying boolean values.
  * Supports multiple display formats including icons, text, or badges with customizable true/false representations.
  */
-declare function BooleanCell<T = any>({ value, context, format, trueText, falseText, trueIcon, falseIcon, showFalse, align, emphasis, }: BooleanCellProps<T>): react_jsx_runtime.JSX.Element | null;
+declare function BooleanCell<T = any>({ value, context, format, trueText, falseText, trueIcon, falseIcon, showFalse, align, emphasis, className, }: BooleanCellProps<T>): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Get alignment classes for cell content
@@ -2431,6 +2498,7 @@ interface DateCellProps<T = any> extends CellComponentProps<T> {
     emphasis?: CellEmphasis;
     href?: string | ((row: T) => string);
     linkBehavior?: LinkBehavior;
+    className?: string;
 }
 /**
  * DateCell
@@ -2438,7 +2506,7 @@ interface DateCellProps<T = any> extends CellComponentProps<T> {
  * DataTable cell component for displaying date and time values.
  * Supports multiple formats including relative time, with optional linking capabilities.
  */
-declare function DateCell<T = any>({ value, row, context, format, customFormat, emptyText, align, emphasis, href, linkBehavior, }: DateCellProps<T>): react_jsx_runtime.JSX.Element;
+declare function DateCell<T = any>({ value, row, context, format, customFormat, emptyText, align, emphasis, href, linkBehavior, className, }: DateCellProps<T>): react_jsx_runtime.JSX.Element;
 
 interface NumberCellProps<T = any> extends CellComponentProps<T> {
     format?: "number" | "currency" | "percent" | "compact";
@@ -2452,6 +2520,7 @@ interface NumberCellProps<T = any> extends CellComponentProps<T> {
     linkBehavior?: LinkBehavior;
     showPositiveSign?: boolean;
     colorCode?: boolean;
+    className?: string;
 }
 /**
  * NumberCell
@@ -2459,7 +2528,7 @@ interface NumberCellProps<T = any> extends CellComponentProps<T> {
  * DataTable cell component for displaying numeric values.
  * Supports currency, percentage, and compact formatting with optional color coding for positive/negative values.
  */
-declare function NumberCell<T = any>({ value, row, context, format, decimals, prefix, suffix, emptyText, align, emphasis, href, linkBehavior, showPositiveSign, colorCode, }: NumberCellProps<T>): react_jsx_runtime.JSX.Element;
+declare function NumberCell<T = any>({ value, row, context, format, decimals, prefix, suffix, emptyText, align, emphasis, href, linkBehavior, showPositiveSign, colorCode, className, }: NumberCellProps<T>): react_jsx_runtime.JSX.Element;
 
 interface SelectCellProps<T = any> extends CellComponentProps<T> {
     isSelected?: boolean;
@@ -2481,9 +2550,13 @@ interface TextCellProps<T = any> extends CellComponentProps<T> {
     emptyText?: string;
     href?: string | ((row: T) => string);
     linkBehavior?: LinkBehavior;
+    /** Color variant for links (matches TextLink variants) */
+    linkVariant?: "default" | "brand" | "muted" | "unstyled";
+    /** Text emphasis (use "strong" for bold) */
     emphasis?: CellEmphasis;
     truncate?: boolean;
     align?: "left" | "center" | "right";
+    className?: string;
 }
 /**
  * TextCell
@@ -2491,7 +2564,7 @@ interface TextCellProps<T = any> extends CellComponentProps<T> {
  * DataTable cell component for displaying text content.
  * Supports prefixes, suffixes, truncation, and optional linking with customizable emphasis levels.
  */
-declare function TextCell<T = any>({ value, row, context, prefix, suffix, emptyText, href, linkBehavior, emphasis, truncate, align, }: TextCellProps<T>): react_jsx_runtime.JSX.Element;
+declare function TextCell<T = any>({ value, row, context, prefix, suffix, emptyText, href, linkBehavior, linkVariant, emphasis, truncate, align, className, }: TextCellProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
  * DataTable
@@ -2531,6 +2604,196 @@ interface DateRangePickerProps<T extends DateValue> extends DateRangePickerProps
 }
 declare function DateRangePicker<T extends DateValue>({ label, description, errorMessage, ...props }: DateRangePickerProps<T>): react_jsx_runtime.JSX.Element;
 
+type HealthStatus = "healthy" | "warning" | "error" | "unknown";
+interface DeviceHealthBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+    /** Health status of the device */
+    status: HealthStatus;
+    /** Number of active alerts */
+    alertCount?: number;
+    /** Show alert count in the badge */
+    showCount?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * DeviceHealthBadge
+ *
+ * Displays device health status with optional alert counts.
+ * Maps health status to feedback colors (success/warning/error).
+ * Pulsing dot for warning/error states.
+ *
+ * @example
+ * ```tsx
+ * <DeviceHealthBadge status="healthy" />
+ * <DeviceHealthBadge status="warning" alertCount={2} showCount />
+ * <DeviceHealthBadge status="error" alertCount={5} showCount />
+ * ```
+ */
+declare function DeviceHealthBadge({ status, alertCount, showCount, isLoading, size, shape, ...badgeProps }: DeviceHealthBadgeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Device type classification
+ */
+type DeviceType = "battery" | "charger" | "thermostat" | "inverter" | "vehicle" | "meter" | "gateway" | "other" | "unknown";
+
+interface DeviceMetaDisplayProps {
+    /** Device manufacturer name */
+    manufacturer: string;
+    /** Device model */
+    model: string;
+    /** Device serial number (optional) */
+    serialNumber?: string;
+    /** URL to manufacturer logo */
+    logoUrl?: string;
+    /** Device type (for fallback icon) */
+    deviceType: DeviceType;
+    /** Layout mode */
+    layout?: "compact" | "full";
+    /** Show manufacturer logo */
+    showLogo?: boolean;
+    /** Show device type icon */
+    showDeviceTypeIcon?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * DeviceMetaDisplay
+ *
+ * Displays device metadata (manufacturer, model, serial number) with optional logo.
+ * Supports compact layout for tables and full layout for headers/cards.
+ * Falls back to device type icon if logo fails to load.
+ *
+ * @example
+ * ```tsx
+ * // Table cell
+ * <DeviceMetaDisplay
+ *   manufacturer="Tesla"
+ *   model="Powerwall 2"
+ *   logoUrl="https://..."
+ *   deviceType="battery"
+ *   layout="compact"
+ * />
+ *
+ * // Page header
+ * <DeviceMetaDisplay
+ *   manufacturer="Tesla"
+ *   model="Powerwall 2"
+ *   serialNumber="TG123456789"
+ *   logoUrl="https://..."
+ *   deviceType="battery"
+ *   layout="full"
+ *   showDeviceTypeIcon
+ * />
+ * ```
+ */
+declare function DeviceMetaDisplay({ manufacturer, model, serialNumber, logoUrl, deviceType, layout, showLogo, showDeviceTypeIcon, isLoading, className, }: DeviceMetaDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface DeviceStateBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+    /** The device state to display */
+    state: DeviceState;
+    /** Custom label override (defaults to auto-capitalized state name) */
+    label?: string;
+    /** Optional icon to display before the label */
+    icon?: IconName$2;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Fixed width for column alignment (useful in tables) */
+    fixedWidth?: boolean;
+}
+/**
+ * DeviceStateBadge
+ *
+ * A specialized badge component for displaying device states with smart defaults.
+ * Auto-enables pulsing dot for active states (charging, discharging, heat, cool, on).
+ * Uses semantic device state colors from the theme.
+ *
+ * @example
+ * ```tsx
+ * <DeviceStateBadge state="charging" />
+ * <DeviceStateBadge state="heat" label="Heating Mode" />
+ * <DeviceStateBadge state="on" icon="Lightning" />
+ * ```
+ */
+declare function DeviceStateBadge({ state, label, icon, isLoading, size, shape, dot, dotPulse, fixedWidth, className, ...badgeProps }: DeviceStateBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface DeviceStateWithMetricProps extends Pick<DeviceStateBadgeProps, "state" | "size" | "shape" | "icon"> {
+    /** Custom label for the state badge */
+    stateLabel?: string;
+    /** The metric value to display */
+    metric?: number | null;
+    /** Formatter for the metric (uses FieldFormat system) */
+    metricFormatter?: FieldFormat;
+    /** Optional secondary state badge (e.g., grid status) */
+    secondaryState?: DeviceState | GridState;
+    /** Layout orientation */
+    layout?: "horizontal" | "vertical";
+    /** Loading state */
+    isLoading?: boolean;
+    /** Fixed width for column alignment (useful in tables) */
+    fixedWidth?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * DeviceStateWithMetric
+ *
+ * Combines a device state badge with a formatted metric display.
+ * Uses the existing FieldFormat system for flexible metric formatting.
+ * Supports horizontal layout (for tables) and vertical layout (for cards/detail views).
+ *
+ * @example
+ * ```tsx
+ * // Battery: "Charging | 75%"
+ * <DeviceStateWithMetric
+ *   state="charging"
+ *   metric={75}
+ *   metricFormatter={{ type: "number", decimals: 0, suffix: "%" }}
+ * />
+ *
+ * // Inverter: "On | 5.2 kW"
+ * <DeviceStateWithMetric
+ *   state="on"
+ *   metric={5200}
+ *   metricFormatter={{ type: "power", unit: "kW" }}
+ * />
+ *
+ * // Thermostat: "Cool | 72°F"
+ * <DeviceStateWithMetric
+ *   state="cool"
+ *   metric={72}
+ *   metricFormatter={{ type: "temperature", unit: "F" }}
+ * />
+ * ```
+ */
+declare function DeviceStateWithMetric({ state, stateLabel, metric, metricFormatter, secondaryState, layout, isLoading, size, shape, icon, fixedWidth, className, }: DeviceStateWithMetricProps): react_jsx_runtime.JSX.Element;
+
+interface DeviceTypeIconProps {
+    /** The device type to display */
+    deviceType: DeviceType;
+    /** Size of the icon (preset or custom pixel size) */
+    size?: number | "sm" | "md" | "lg" | "xl";
+    /** Show label below the icon */
+    showLabel?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * DeviceTypeIcon
+ *
+ * Displays a consistent icon for device types across the platform.
+ * Maps device types to appropriate Phosphor icons with optional labels.
+ *
+ * @example
+ * ```tsx
+ * <DeviceTypeIcon deviceType="battery" size="md" />
+ * <DeviceTypeIcon deviceType="thermostat" showLabel />
+ * <DeviceTypeIcon deviceType="charger" size={32} />
+ * ```
+ */
+declare function DeviceTypeIcon({ deviceType, size, showLabel, className, }: DeviceTypeIconProps): react_jsx_runtime.JSX.Element;
+
 type BaseDialogHeaderProps = {
     title?: string;
     onClose: () => void;
@@ -2649,6 +2912,37 @@ interface EmptyStateProps {
  */
 declare function EmptyState({ icon, title, description, primaryAction, secondaryAction, actions, size, alignment, fullHeight, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
 
+type EnrollmentStatus = "enrolled" | "eligible" | "not_eligible" | "pending" | "opted_out";
+interface EnrollmentStatusBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+    /** Enrollment status */
+    status: EnrollmentStatus;
+    /** Program name (shown in tooltip) */
+    programName?: string;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * EnrollmentStatusBadge
+ *
+ * Displays device enrollment status for programs.
+ * Color-coded status with optional program name in tooltip.
+ *
+ * Status mapping:
+ * - enrolled → success (green)
+ * - eligible → info (blue)
+ * - pending → warning (yellow)
+ * - not_eligible → neutral (gray)
+ * - opted_out → neutral (gray)
+ *
+ * @example
+ * ```tsx
+ * <EnrollmentStatusBadge status="enrolled" programName="Demand Response Q4" />
+ * <EnrollmentStatusBadge status="eligible" />
+ * <EnrollmentStatusBadge status="pending" />
+ * ```
+ */
+declare function EnrollmentStatusBadge({ status, programName, isLoading, size, shape, ...badgeProps }: EnrollmentStatusBadgeProps): react_jsx_runtime.JSX.Element;
+
 interface Props {
     children: ReactNode;
     fallback?: ReactNode;
@@ -2871,6 +3165,32 @@ declare function Input({ size, isInvalid, isDisabled, isFocused, transparent, cl
  */
 declare function FieldGroup(props: FieldGroupProps): react_jsx_runtime.JSX.Element;
 
+interface FirmwareVersionBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+    /** Firmware version string */
+    version: string;
+    /** Whether this is the latest version */
+    isLatest?: boolean;
+    /** Whether an update is available */
+    updateAvailable?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * FirmwareVersionBadge
+ *
+ * Displays firmware version with update status indicators.
+ * Green indicator if latest, orange if update available.
+ * Compact display suitable for tables.
+ *
+ * @example
+ * ```tsx
+ * <FirmwareVersionBadge version="1.2.3" isLatest />
+ * <FirmwareVersionBadge version="1.1.0" updateAvailable />
+ * <FirmwareVersionBadge version="2.0.0-beta" />
+ * ```
+ */
+declare function FirmwareVersionBadge({ version, isLatest, updateAvailable, isLoading, size, shape, ...badgeProps }: FirmwareVersionBadgeProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Form
  *
@@ -2958,6 +3278,34 @@ declare namespace Grid {
 }
 declare function GridItem({ span, className, children, }: GridItemProps): react_jsx_runtime.JSX.Element;
 
+interface GridStateBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+    /** The grid state to display */
+    state: GridState;
+    /** Custom label override (defaults to auto-capitalized state name) */
+    label?: string;
+    /** Show directional icon (arrow up for exporting, arrow down for importing) */
+    showIcon?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Fixed width for column alignment (useful in tables) */
+    fixedWidth?: boolean;
+}
+/**
+ * GridStateBadge
+ *
+ * A specialized badge component for displaying grid states (importing, exporting).
+ * Optionally shows directional icons to indicate power flow direction.
+ * Uses semantic grid state colors from the theme.
+ *
+ * @example
+ * ```tsx
+ * <GridStateBadge state="importing" />
+ * <GridStateBadge state="exporting" showIcon />
+ * <GridStateBadge state="importing" label="Grid Import" />
+ * ```
+ */
+declare function GridStateBadge({ state, label, showIcon, isLoading, size, shape, fixedWidth, className, ...badgeProps }: GridStateBadgeProps): react_jsx_runtime.JSX.Element;
+
 interface InfiniteScrollIndicatorProps {
     /** Current loading state - determines which indicator to show */
     state: "loading-more";
@@ -4168,14 +4516,14 @@ declare function Aside({ className, children }: SplitPanePanelProps): react_jsx_
  * 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 StatTone$1 = "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;
+    tone: StatTone$1;
 }
 interface StatItem {
     /** Unique identifier */
@@ -4189,7 +4537,7 @@ interface StatItem {
     /** Additional metadata below value */
     meta?: React__default.ReactNode;
     /** Explicit tone/status color */
-    tone?: StatTone;
+    tone?: StatTone$1;
     /** Data-driven tone based on value */
     thresholds?: StatThreshold[];
     /** Enable copy to clipboard */
@@ -4506,4 +4854,28 @@ interface ColorModeProviderProps {
 }
 declare const ColorModeProvider: React.FC<ColorModeProviderProps>;
 
-export { type Action, ActionCell, type ActionCellProps, ActivityFeed, ActivityFeedGroup, type ActivityFeedGroupProps, type ActivityFeedProps, type ActivityFeedSize, type ActivityFeedVariant, ActivityItem, type ActivityItemProps, type ActivityItemSurface, type ActivityItemTone, Alert, type AlertProps, AreaSeries, AutoMobileRenderer, Autocomplete, BREAKPOINTS, BarSeries, BaseDataPoint, type BaseInputProps, type BaseProps, BooleanCell, type BooleanCellProps, BooleanFormat, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type Breakpoint, type BreakpointState, Button, Calendar, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, CardMobileRenderer, type CardProps, type CardVariant, type CellAlignment, type CellComponent, type CellComponentProps, type CellContext, type CellEmphasis, ChartAxis, ChartBottomBar, ChartContainer, type ChartExportMetadata, ChartTooltip, Checkbox, CheckboxGroup, Chip, ClearButton, Collapse, CollapseContent, type CollapseContentProps, type CollapseDensity, CollapseHeader, type CollapseHeaderProps, CollapseItem, type CollapseItemProps, type CollapseProps, type CollapseVariant, ColorModeProvider, type Column, ComponentFormatter, Confirm, type ConfirmProps, CopyToClipboard, CurrencyFormat, CurrentFormat, CustomPinsSpec, DataControls, type Filter as DataControlsFilter, type DataControlsProps, type SortOption as DataControlsSortOption, DataTable, type DataTableProps, DateCell, type DateCellProps, DateFormat, DateRangePicker, Description, type DescriptionProps, Dialog, type DialogAction, type DialogFooterConfig, DialogHeader, type DialogHeaderConfig, type DialogHeaderProps, type DialogProps, DistanceFormat, Drawer, type DrawerProps, EmptyState, type EmptyStateAction, type EmptyStateAlignment, type EmptyStateProps, type EmptyStateSize, EnergyFormat, ErrorBoundary, type ExportType, type FacetConfig, type FacetCounts, type FacetType, FieldError, type FieldErrorProps, FieldFormat, FieldGroup, type FieldGroupProps, FieldValue, type FilterChip, FilterChips, type FilterChipsProps, type FilterCondition, FilterDialog, type FilterDialogProps, type FilterGroup, type FilterOperator, type FilterState, Form, FormatRegistry, FormattedValue, FormatterFunction, GeoJsonLayerSpec, Grid, type GridAlign, type GridCols, type GridFlow, type GridGap, type GridItemProps, type GridJustify, type GridProps, type GridSpan, Icon, InfiniteScrollIndicator, type InfiniteScrollIndicatorProps, 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, LayerSpec, LineSeries, type LinkBehavior, List, ListBox, ListBoxItem, ListItem, type ListItemProps, ListPane, type ListPaneProps, type ListProps, type LoadingState, type MobileBreakpoint, type MobileConfig, type MobileRenderer, ModalBackdrop, type ModalBackdropProps, Notice, NoticeContainer, type NoticeContainerProps, type NoticeOptions, type NoticeProps, NoticeProvider, type NoticeProviderProps, type NoticeVariant, NumberCell, type NumberCellProps, NumberField, NumberFormat, type PageAsideProps, type PageBreadcrumbItem, type PageContentProps, type PageHeaderProps, PageLayout, type PageLayoutProps, type PageScrollableContentProps, PhoneFormat, PlaceSearch, Popover, PowerFormat, ProgressBar, Radio, RadioCard, RadioCardGroup, type RadioCardGroupProps, type RadioCardProps, RadioGroup, RangeCalendar, RasterLayerSpec, ResistanceFormat, type ResponsiveValue, ResultsCount, type ResultsCountProps, SKELETON_SIZES, type SearchConfig, SearchControl, type SearchControlProps, Section, SectionNav, type SectionNavItem, type SectionNavOrientation, type SectionNavProps, type SectionProps, type SectionSpacing, type SectionVariant, Select, SelectCell, type SelectCellProps, Skeleton, Slider, type SortConfig, SortControl, type SortControlProps, type SortDirection, type SortState, 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, TemperatureFormat, TemperatureUnit, TemperatureUnitString, TextArea, TextAreaWithChips, TextCell, type TextCellProps, TextField, TextFormat, TimeField, ToggleButton, Tooltip, TooltipData, Tray, type TrayProps, type TrendPoint, type UseBreakpointReturn, type UseClientDataControlsOptions, type UseClientDataControlsResult, type UseDataControlsClientOptions, type UseDataControlsOptions, type UseDataControlsResult, type UseDataControlsServerOptions, type UseInfiniteScrollOptions, type UseInfiniteScrollReturn, type UseServerDataControlsOptions, VectorLayerSpec, VoltageFormat, YFormatType, addFilterCondition, autoScaleCurrent, autoScaleDistance, autoScaleEnergy, autoScalePower, autoScaleResistance, autoScaleVoltage, camelCaseToWords, capitalize, celsiusToFahrenheit, celsiusToKelvin, centimetersToInches, createEmptyFilter, createFilter, createFilters, createFormat, enumToSentenceCase, exportChart, fahrenheitToCelsius, fahrenheitToKelvin, feetToMeters, feetToMiles, filterToChips, formatBoolean, 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, getFilterFields, getInputBackgroundStyles, getInputBaseStyles, getInputStateStyles, getNumericColorClasses, getSkeletonSize, inchesToCentimeters, isCustomPinsLayer, isExportSupported, isFilterEmpty, isGeoJsonLayer, isNil, isRasterLayer, isVectorLayer, kelvinToCelsius, kelvinToFahrenheit, kilometersToMiles, layer, metersToFeet, metersToMiles, metersToYards, milesToFeet, milesToKilometers, milesToMeters, parseBoolean, removeFilterCondition, 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, useBreakpoint, useClientDataControls, useColorMode, useDataControls, useDebounce, useInfiniteScroll, useInputFocus, useLocalStorage, useMediaQuery, useNotice, useServerDataControls, yardsToMeters };
+/**
+ * Device state helper utilities
+ *
+ * Pure utility functions for working with device states.
+ * These help Layer 2 & 3 without adding business logic to components.
+ */
+/**
+ * Stat tone type (matches StatList component)
+ */
+type StatTone = "success" | "warning" | "error" | "info" | "neutral";
+/**
+ * Map device state to StatList tone for conditional styling
+ *
+ * @param state - Device state
+ * @returns Appropriate tone for StatList component
+ *
+ * @example
+ * ```tsx
+ * const tone = getStateTone("charging"); // "success"
+ * <StatList items={[...]} tone={tone} />
+ * ```
+ */
+declare function getStateTone(state: DeviceState): StatTone;
+
+export { type Action, ActionCell, type ActionCellProps, ActivityFeed, ActivityFeedGroup, type ActivityFeedGroupProps, type ActivityFeedProps, type ActivityFeedSize, type ActivityFeedVariant, ActivityItem, type ActivityItemProps, type ActivityItemSurface, type ActivityItemTone, Alert, type AlertProps, AreaSeries, AutoMobileRenderer, Autocomplete, BREAKPOINTS, BadgeProps, BarSeries, BaseDataPoint, type BaseInputProps, type BaseProps, BooleanCell, type BooleanCellProps, BooleanFormat, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type Breakpoint, type BreakpointState, Button, Calendar, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, CardMobileRenderer, type CardProps, type CardVariant, type CellAlignment, type CellComponent, type CellComponentProps, type CellContext, type CellEmphasis, ChartAxis, ChartBottomBar, ChartContainer, type ChartExportMetadata, ChartTooltip, Checkbox, CheckboxGroup, Chip, ClearButton, Collapse, CollapseContent, type CollapseContentProps, type CollapseDensity, CollapseHeader, type CollapseHeaderProps, CollapseItem, type CollapseItemProps, type CollapseProps, type CollapseVariant, ColorModeProvider, type Column, ComponentFormatter, Confirm, type ConfirmProps, ConnectionStatusBadge, type ConnectionStatusBadgeProps, CopyToClipboard, CurrencyFormat, CurrentFormat, CustomPinsSpec, DataControls, type Filter as DataControlsFilter, type DataControlsProps, type SortOption as DataControlsSortOption, DataTable, type DataTableProps, DateCell, type DateCellProps, DateFormat, DateRangePicker, Description, type DescriptionProps, DeviceHealthBadge, type DeviceHealthBadgeProps, DeviceMetaDisplay, type DeviceMetaDisplayProps, DeviceState, DeviceStateBadge, type DeviceStateBadgeProps, DeviceStateWithMetric, type DeviceStateWithMetricProps, type DeviceType, DeviceTypeIcon, type DeviceTypeIconProps, Dialog, type DialogAction, type DialogFooterConfig, DialogHeader, type DialogHeaderConfig, type DialogHeaderProps, type DialogProps, DistanceFormat, Drawer, type DrawerProps, EmptyState, type EmptyStateAction, type EmptyStateAlignment, type EmptyStateProps, type EmptyStateSize, EnergyFormat, type EnrollmentStatus, EnrollmentStatusBadge, type EnrollmentStatusBadgeProps, ErrorBoundary, type ExportType, type FacetConfig, type FacetCounts, type FacetType, FieldError, type FieldErrorProps, FieldFormat, FieldGroup, type FieldGroupProps, FieldValue, type FilterChip, FilterChips, type FilterChipsProps, type FilterCondition, FilterDialog, type FilterDialogProps, type FilterGroup, type FilterOperator, type FilterState, FirmwareVersionBadge, type FirmwareVersionBadgeProps, Form, FormatRegistry, FormattedValue, FormatterFunction, GeoJsonLayerSpec, Grid, type GridAlign, type GridCols, type GridFlow, type GridGap, type GridItemProps, type GridJustify, type GridProps, type GridSpan, GridState, GridStateBadge, type GridStateBadgeProps, type HealthStatus, Icon, InfiniteScrollIndicator, type InfiniteScrollIndicatorProps, 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, LayerSpec, LineSeries, type LinkBehavior, List, ListBox, ListBoxItem, ListItem, type ListItemProps, ListPane, type ListPaneProps, type ListProps, type LoadingState, type MobileBreakpoint, type MobileConfig, type MobileRenderer, ModalBackdrop, type ModalBackdropProps, Notice, NoticeContainer, type NoticeContainerProps, type NoticeOptions, type NoticeProps, NoticeProvider, type NoticeProviderProps, type NoticeVariant, NumberCell, type NumberCellProps, NumberField, NumberFormat, type PageAsideProps, type PageBreadcrumbItem, type PageContentProps, type PageHeaderProps, PageLayout, type PageLayoutProps, type PageScrollableContentProps, PhoneFormat, PlaceSearch, Popover, PowerFormat, ProgressBar, Radio, RadioCard, RadioCardGroup, type RadioCardGroupProps, type RadioCardProps, RadioGroup, RangeCalendar, RasterLayerSpec, ResistanceFormat, type ResponsiveValue, ResultsCount, type ResultsCountProps, SKELETON_SIZES, type SearchConfig, SearchControl, type SearchControlProps, Section, SectionNav, type SectionNavItem, type SectionNavOrientation, type SectionNavProps, type SectionProps, type SectionSpacing, type SectionVariant, Select, SelectCell, type SelectCellProps, Skeleton, Slider, type SortConfig, SortControl, type SortControlProps, type SortDirection, type SortState, SplitPane, type SplitPaneOrientation, type SplitPanePanelProps, type SplitPaneProps, type StatAlign, type StatFormatter, type StatItem, type StatLayout, StatList, type StatListProps, type StatThreshold, type StatTone$1 as StatTone, type StatValue, Switch, Tab, TabList, TabPanel, type TableDensity, type TableLayout, type TableWidth, Tabs, type TabsProps$1 as TabsProps, TemperatureFormat, TemperatureUnit, TemperatureUnitString, TextArea, TextAreaWithChips, TextCell, type TextCellProps, TextField, TextFormat, TimeField, ToggleButton, Tooltip, TooltipData, Tray, type TrayProps, type TrendPoint, type UseBreakpointReturn, type UseClientDataControlsOptions, type UseClientDataControlsResult, type UseDataControlsClientOptions, type UseDataControlsOptions, type UseDataControlsResult, type UseDataControlsServerOptions, type UseInfiniteScrollOptions, type UseInfiniteScrollReturn, type UseServerDataControlsOptions, VectorLayerSpec, VoltageFormat, YFormatType, addFilterCondition, autoScaleCurrent, autoScaleDistance, autoScaleEnergy, autoScalePower, autoScaleResistance, autoScaleVoltage, camelCaseToWords, capitalize, celsiusToFahrenheit, celsiusToKelvin, centimetersToInches, createEmptyFilter, createFilter, createFilters, createFormat, enumToSentenceCase, exportChart, fahrenheitToCelsius, fahrenheitToKelvin, feetToMeters, feetToMiles, filterToChips, formatBoolean, formatCapacity, formatCurrency, formatCurrent, formatDate, formatDistance, formatEmptyValue, formatEnergy, formatFieldValue, formatInternationalPhone, formatNumber, formatPhone, formatPhoneNumber, formatPower, formatPowerRating, formatResistance, formatTemperature, formatText, formatUSPhone, formatVoltage, getBadgeClasses, getBooleanBadgeVariant, getCellAlignmentClasses, getCellContainerClasses, getCellTextClasses, getDateParts, getExportFormatName, getFieldGroupStyles, getFilterFields, getInputBackgroundStyles, getInputBaseStyles, getInputStateStyles, getNumericColorClasses, getSkeletonSize, getStateTone, inchesToCentimeters, isCustomPinsLayer, isExportSupported, isFilterEmpty, isGeoJsonLayer, isNil, isRasterLayer, isVectorLayer, kelvinToCelsius, kelvinToFahrenheit, kilometersToMiles, layer, metersToFeet, metersToMiles, metersToYards, milesToFeet, milesToKilometers, milesToMeters, parseBoolean, removeFilterCondition, 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, useBreakpoint, useClientDataControls, useColorMode, useDataControls, useDebounce, useInfiniteScroll, useInputFocus, useLocalStorage, useMediaQuery, useNotice, useServerDataControls, yardsToMeters };