@rippling/rippling-sdk 0.2.0-alpha.37 → 0.2.0-alpha.39

package/lib/sdui/components.d.mts

@@ -1,11 +1,14 @@
 /**
- * AUTO-GENERATED from component-manifest.json
- * Generated at: 2026-04-17T04:10:01.126Z
- * Components: 128
+ * AUTO-GENERATED from catalog-schema.json
+ * Components: 154
  *
- * Do not edit manually. Run: npx tsx scripts/codegen-builder.ts
+ * Do not edit manually. Run: node tools/sdui/builder/build.js
  */
 import type { ActionBinding } from "./actions.mjs";
+import type { StateRef, BindStateRef } from "./state.mjs";
+import type { CondRef, TemplateRef } from "./props.mjs";
+import type { ItemRef, BindItemRef } from "./directives.mjs";
+import type { ActionCardCatalogProps, AiIconCatalogProps, AlertCatalogProps, AnimationCatalogProps, ApiErrorCatalogProps, AppGroupLoaderCatalogProps, AppGroupSelectCatalogProps, AppNavBarCatalogProps, AtomsSeparatorCatalogProps, AvatarCatalogProps, AvatarListCatalogProps, BadgeCatalogProps, BoxCatalogProps, BreadcrumbCatalogProps, ButtonCatalogProps, ButtonGroupCatalogProps, CardCatalogProps, CardGroupCatalogProps, CarouselCatalogProps, ChartLoaderCatalogProps, CheckListCatalogProps, CheckboxCatalogProps, CheckboxGroupCatalogProps, ChipCatalogProps, ChipGroupCatalogProps, CircleCatalogProps, ColorPickerCatalogProps, ContentLoaderCatalogProps, CountDownCatalogProps, CountryCatalogProps, CurrencyCatalogProps, DateCatalogProps, DateInlineMultiCatalogProps, DateRangeCatalogProps, DaySelectorCatalogProps, DistributionBarCatalogProps, DividerCatalogProps, DraggableListCatalogProps, DrawerCatalogProps, DropdownCatalogProps, EmailCatalogProps, ExpansionPanelCatalogProps, ExpansionPanelGroupCatalogProps, FieldCatalogProps, FileCatalogProps, FileDropCatalogProps, FloatingButtonCatalogProps, GridCatalogProps, HStackCatalogProps, HeadingCatalogProps, IconCatalogProps, IconButtonCatalogProps, ImageCatalogProps, ImageViewerCatalogProps, InputGroupCatalogProps, ItemNavigatorCatalogProps, LabelCatalogProps, LabelGroupCatalogProps, LayoutCatalogProps, LayoutCardCatalogProps, LinkCatalogProps, ListItemCatalogProps, LoaderCardCatalogProps, LocationCardCatalogProps, MaskerCatalogProps, MenuListCatalogProps, ModalCatalogProps, ModalCloseButtonCatalogProps, ModalFooterCatalogProps, NestedListCatalogProps, NumberCatalogProps, ObjectUICatalogProps, ObjectUIContentCatalogProps, ObjectUIHeaderCatalogProps, ObjectUIStatsCatalogProps, ObjectUITemplateCatalogProps, PageAppLogoCatalogProps, PageContentCatalogProps, PageFooterCatalogProps, PageHeaderCatalogProps, PaginateCatalogProps, PaneCatalogProps, PasswordCatalogProps, PercentageCatalogProps, PhoneCatalogProps, ProgressBarCatalogProps, ProgressStepsCatalogProps, RadioCatalogProps, RangeSliderCatalogProps, ReportLoaderCatalogProps, ReportShareLoaderCatalogProps, ReportViewerLoaderCatalogProps, ResponsiveCatalogProps, SegmentedControlCatalogProps, SelectCatalogProps, SelectableGroupCatalogProps, SelectableMenuCatalogProps, SettingsLoaderCatalogProps, ShowMoreCatalogProps, SignatureCatalogProps, SinCatalogProps, SkeletonCatalogProps, SliderCatalogProps, SnackBarCatalogProps, SpinnerCatalogProps, SplitButtonCatalogProps, SplitPaneCatalogProps, SsnCatalogProps, StatusCatalogProps, StepperCatalogProps, SurveyCatalogProps, SwitchCatalogProps, TabCatalogProps, TableBasicCatalogProps, TextCatalogProps, TextAutoSuggestCatalogProps, TextClipCatalogProps, TextInputCatalogProps, TextSnippetCatalogProps, TextareaCatalogProps, TimeCatalogProps, TimeRangeCatalogProps, TimezoneCatalogProps, TipCatalogProps, TitleCaptionCatalogProps, ToggleableArrowCatalogProps, TreeCatalogProps, TreeSelectCatalogProps, VStackCatalogProps, VideoCatalogProps, WorkEmailCatalogProps, AnalyticsCardCatalogProps, ResizableBoardCatalogProps, EChartCatalogProps, RichTextCatalogProps, DashboardRichTextCatalogProps, CustomObjectGridCatalogProps, ObjectListViewCatalogProps, BarChartCatalogProps, LineChartCatalogProps, HorizontalBarChartCatalogProps, CombinationChartCatalogProps, PieChartCatalogProps, ScatterChartCatalogProps, FunnelChartCatalogProps, GaugeChartCatalogProps, SunburstChartCatalogProps, WithSpinnerCatalogProps, RadarChartCatalogProps, RadarFilledChartCatalogProps, HeatmapCalendarChartCatalogProps, HeatmapChartCatalogProps, TreemapChartCatalogProps, SqlHighlightCatalogProps } from "./propTypes.mjs";
 export interface SpecNode {
     type: string;
     props: Record<string, unknown>;
@@ -18,132 +21,1138 @@ export interface SpecNode {
         key?: string;
     };
 }
-export declare const TextInput: (props?: Record<string, unknown>) => SpecNode;
-export declare const Select: (props?: Record<string, unknown>) => SpecNode;
-export declare const AppGroupSelect: (props?: Record<string, unknown>) => SpecNode;
-export declare const Checkbox: (props?: Record<string, unknown>) => SpecNode;
-export declare const CheckboxGroup: (props?: Record<string, unknown>) => SpecNode;
-export declare const Email: (props?: Record<string, unknown>) => SpecNode;
-export declare const Number: (props?: Record<string, unknown>) => SpecNode;
-export declare const Date: (props?: Record<string, unknown>) => SpecNode;
-export declare const DateRange: (props?: Record<string, unknown>) => SpecNode;
-export declare const DateInlineMulti: (props?: Record<string, unknown>) => SpecNode;
-export declare const Textarea: (props?: Record<string, unknown>) => SpecNode;
-export declare const Radio: (props?: Record<string, unknown>) => SpecNode;
-export declare const Phone: (props?: Record<string, unknown>) => SpecNode;
-export declare const Password: (props?: Record<string, unknown>) => SpecNode;
-export declare const Switch: (props?: Record<string, unknown>) => SpecNode;
-export declare const FileDrop: (props?: Record<string, unknown>) => SpecNode;
-export declare const TextAutoSuggest: (props?: Record<string, unknown>) => SpecNode;
-export declare const Currency: (props?: Record<string, unknown>) => SpecNode;
-export declare const WorkEmail: (props?: Record<string, unknown>) => SpecNode;
-export declare const Percentage: (props?: Record<string, unknown>) => SpecNode;
-export declare const SegmentedControl: (props?: Record<string, unknown>) => SpecNode;
-export declare const Time: (props?: Record<string, unknown>) => SpecNode;
-export declare const TimeRange: (props?: Record<string, unknown>) => SpecNode;
-export declare const Timezone: (props?: Record<string, unknown>) => SpecNode;
-export declare const Slider: (props?: Record<string, unknown>) => SpecNode;
-export declare const RangeSlider: (props?: Record<string, unknown>) => SpecNode;
-export declare const Masker: (props?: Record<string, unknown>) => SpecNode;
-export declare const DaySelector: (props?: Record<string, unknown>) => SpecNode;
-export declare const ColorPicker: (props?: Record<string, unknown>) => SpecNode;
-export declare const SelectableGroup: (props?: Record<string, unknown>) => SpecNode;
-export declare const Ssn: (props?: Record<string, unknown>) => SpecNode;
-export declare const Sin: (props?: Record<string, unknown>) => SpecNode;
-export declare const Signature: (props?: Record<string, unknown>) => SpecNode;
-export declare const Survey: (props?: Record<string, unknown>) => SpecNode;
-export declare const Tree: (props?: Record<string, unknown>) => SpecNode;
-export declare const TreeSelect: (props?: Record<string, unknown>) => SpecNode;
-export declare const File: (props?: Record<string, unknown>) => SpecNode;
-export declare const InputGroup: (props?: Record<string, unknown>) => SpecNode;
-export declare const Field: (props?: Record<string, unknown>) => SpecNode;
-export declare const ActionCard: (props?: Record<string, unknown>) => SpecNode;
-export declare const Alert: (props?: Record<string, unknown>) => SpecNode;
-export declare const Avatar: (props?: Record<string, unknown>) => SpecNode;
-export declare const Badge: (props?: Record<string, unknown>) => SpecNode;
-export declare const Chip: (props?: Record<string, unknown>) => SpecNode;
-export declare const Card: (props?: Record<string, unknown>) => SpecNode;
-export declare const ContentLoader: (props?: Record<string, unknown>) => SpecNode;
-export declare const Divider: (props?: Record<string, unknown>) => SpecNode;
-export declare const Icon: (props?: Record<string, unknown>) => SpecNode;
-export declare const Label: (props?: Record<string, unknown>) => SpecNode;
-export declare const ListItem: (props?: Record<string, unknown>) => SpecNode;
-export declare const Modal: (props?: Record<string, unknown>) => SpecNode;
-export declare const ModalFooter: (props?: Record<string, unknown>) => SpecNode;
-export declare const ProgressBar: (props?: Record<string, unknown>) => SpecNode;
-export declare const Skeleton: (props?: Record<string, unknown>) => SpecNode;
-export declare const Spinner: (props?: Record<string, unknown>) => SpecNode;
-export declare const Stepper: (props?: Record<string, unknown>) => SpecNode;
-export declare const TextClip: (props?: Record<string, unknown>) => SpecNode;
-export declare const TextSnippet: (props?: Record<string, unknown>) => SpecNode;
-export declare const Tip: (props?: Record<string, unknown>) => SpecNode;
-export declare const CheckList: (props?: Record<string, unknown>) => SpecNode;
-export declare const DistributionBar: (props?: Record<string, unknown>) => SpecNode;
-export declare const ImageViewer: (props?: Record<string, unknown>) => SpecNode;
-export declare const ObjectUI: (props?: Record<string, unknown>) => SpecNode;
-export declare const ObjectUITemplate: (props?: Record<string, unknown>) => SpecNode;
-export declare const ObjectUIHeader: (props?: Record<string, unknown>) => SpecNode;
-export declare const ObjectUIContent: (props?: Record<string, unknown>) => SpecNode;
-export declare const ObjectUIStats: (props?: Record<string, unknown>) => SpecNode;
-export declare const SnackBar: (props?: Record<string, unknown>) => SpecNode;
-export declare const Video: (props?: Record<string, unknown>) => SpecNode;
-export declare const AvatarList: (props?: Record<string, unknown>) => SpecNode;
-export declare const Image: (props?: Record<string, unknown>) => SpecNode;
-export declare const AtomsSeparator: (props?: Record<string, unknown>) => SpecNode;
-export declare const Carousel: (props?: Record<string, unknown>) => SpecNode;
-export declare const TableBasic: (props?: Record<string, unknown>) => SpecNode;
-export declare const LocationCard: (props?: Record<string, unknown>) => SpecNode;
-export declare const LoaderCard: (props?: Record<string, unknown>) => SpecNode;
-export declare const LayoutCard: (props?: Record<string, unknown>) => SpecNode;
-export declare const AppGroupLoader: (props?: Record<string, unknown>) => SpecNode;
-export declare const ChartLoader: (props?: Record<string, unknown>) => SpecNode;
-export declare const ReportLoader: (props?: Record<string, unknown>) => SpecNode;
-export declare const ReportShareLoader: (props?: Record<string, unknown>) => SpecNode;
-export declare const ReportViewerLoader: (props?: Record<string, unknown>) => SpecNode;
-export declare const SettingsLoader: (props?: Record<string, unknown>) => SpecNode;
-export declare const ChipGroup: (props?: Record<string, unknown>) => SpecNode;
-export declare const ModalCloseButton: (props?: Record<string, unknown>) => SpecNode;
-export declare const Status: (props?: Record<string, unknown>) => SpecNode;
-export declare const ApiError: (props?: Record<string, unknown>) => SpecNode;
-export declare const Circle: (props?: Record<string, unknown>) => SpecNode;
-export declare const CountDown: (props?: Record<string, unknown>) => SpecNode;
-export declare const Country: (props?: Record<string, unknown>) => SpecNode;
-export declare const ToggleableArrow: (props?: Record<string, unknown>) => SpecNode;
-export declare const TitleCaption: (props?: Record<string, unknown>) => SpecNode;
-export declare const AiIcon: (props?: Record<string, unknown>) => SpecNode;
-export declare const Breadcrumb: (props?: Record<string, unknown>) => SpecNode;
-export declare const Button: (props?: Record<string, unknown>) => SpecNode;
-export declare const ButtonGroup: (props?: Record<string, unknown>) => SpecNode;
-export declare const DraggableList: (props?: Record<string, unknown>) => SpecNode;
-export declare const Drawer: (props?: Record<string, unknown>) => SpecNode;
-export declare const Dropdown: (props?: Record<string, unknown>) => SpecNode;
-export declare const ExpansionPanel: (props?: Record<string, unknown>) => SpecNode;
-export declare const ExpansionPanelGroup: (props?: Record<string, unknown>) => SpecNode;
-export declare const FloatingButton: (props?: Record<string, unknown>) => SpecNode;
-export declare const IconButton: (props?: Record<string, unknown>) => SpecNode;
-export declare const ItemNavigator: (props?: Record<string, unknown>) => SpecNode;
-export declare const Link: (props?: Record<string, unknown>) => SpecNode;
-export declare const MenuList: (props?: Record<string, unknown>) => SpecNode;
-export declare const NestedList: (props?: Record<string, unknown>) => SpecNode;
-export declare const Paginate: (props?: Record<string, unknown>) => SpecNode;
-export declare const SelectableMenu: (props?: Record<string, unknown>) => SpecNode;
-export declare const ShowMore: (props?: Record<string, unknown>) => SpecNode;
-export declare const Tab: (props?: Record<string, unknown>) => SpecNode;
-export declare const Heading: (props?: Record<string, unknown>) => SpecNode;
-export declare const Text: (props?: Record<string, unknown>) => SpecNode;
-export declare const Box: (props?: Record<string, unknown>) => SpecNode;
-export declare const Grid: (props?: Record<string, unknown>) => SpecNode;
-export declare const HStack: (props?: Record<string, unknown>) => SpecNode;
-export declare const LabelGroup: (props?: Record<string, unknown>) => SpecNode;
-export declare const Layout: (props?: Record<string, unknown>) => SpecNode;
-export declare const PageContent: (props?: Record<string, unknown>) => SpecNode;
-export declare const PageHeader: (props?: Record<string, unknown>) => SpecNode;
-export declare const PageAppLogo: (props?: Record<string, unknown>) => SpecNode;
-export declare const PageFooter: (props?: Record<string, unknown>) => SpecNode;
-export declare const Pane: (props?: Record<string, unknown>) => SpecNode;
-export declare const Responsive: (props?: Record<string, unknown>) => SpecNode;
-export declare const SplitPane: (props?: Record<string, unknown>) => SpecNode;
-export declare const VStack: (props?: Record<string, unknown>) => SpecNode;
-export declare const CustomObjectGrid: (props?: Record<string, unknown>) => SpecNode;
-export declare const ObjectListView: (props?: Record<string, unknown>) => SpecNode;
+interface ComponentDirectives {
+    visible?: unknown;
+    watch?: Record<string, unknown>;
+    repeat?: {
+        statePath: string;
+        key?: string;
+    };
+}
+/**
+ * Wrap each prop with the set of runtime refs the renderer accepts in
+ * place of a literal value: state reads/binds, conditional/template
+ * expressions, and per-row item refs (inside repeat loops). This is what
+ * lets callers write `value: state.foo.$bind` or `label: cond(...)`
+ * against typed prop interfaces — the renderer dereferences these at
+ * runtime.
+ */
+type Bindable<T> = {
+    [K in keyof T]: T[K] | StateRef | BindStateRef | CondRef | TemplateRef | ItemRef | BindItemRef;
+};
+export type ActionCardProps = Bindable<ActionCardCatalogProps> & {
+    onPressPrimary?: ActionBinding | ActionBinding[];
+    onPressSecondary?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * Placeholder for states like empty, success, error, and loading, featuring animations, icons, text, and action buttons.
+ */
+export declare const ActionCard: (props: ActionCardProps) => SpecNode;
+export type AiIconProps = Bindable<AiIconCatalogProps> & ComponentDirectives;
+/**
+ * Branded Rippling AI icon used to indicate AI-powered features or content. Displays the Rippling AI star icon with optional "Rippling AI" label text.
+ */
+export declare const AiIcon: (props?: AiIconProps | undefined) => SpecNode;
+export type AlertProps = Bindable<AlertCatalogProps> & {
+    onPressPrimary?: ActionBinding | ActionBinding[];
+    onPressSecondary?: ActionBinding | ActionBinding[];
+    onDismiss?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A persistent, high-priority notice that conveys critical information (errors, warnings, success confirmations, or informational messages) and guides users to proceed or resolve issues. Appears with page content and remains visible until dismissed or resolved. Use for system-level or page-level messaging, not for ephemeral feedback (use SnackBar instead) or for interruptions requiring immediate input (use Modal instead).
+ */
+export declare const Alert: (props?: AlertProps | undefined) => SpecNode;
+export type AnimationProps = Bindable<AnimationCatalogProps> & ComponentDirectives;
+/**
+ * Renders pre-built Lottie animations from a curated library. Each animation type maps to an SVG animation that plays on mount. Use for empty states, onboarding flows, status illustrations, and feature highlights.
+ */
+export declare const Animation: (props: AnimationProps) => SpecNode;
+export type ApiErrorProps = Bindable<ApiErrorCatalogProps> & ComponentDirectives;
+/**
+ * A full-screen error state placeholder for API or server failures, displaying an animated exclamation icon and an error message. Use when an API call fails and the entire content area should show an error instead of the expected content.
+ */
+export declare const ApiError: (props?: ApiErrorProps | undefined) => SpecNode;
+export type AppGroupLoaderProps = Bindable<AppGroupLoaderCatalogProps> & ComponentDirectives;
+/**
+ * A skeleton placeholder shown while app group content is loading. Use when the layout of the app group area is known and you want to reduce perceived loading time and prevent layout shift.
+ */
+export declare const AppGroupLoader: (props?: AppGroupLoaderProps | undefined) => SpecNode;
+export type AppGroupSelectProps = Bindable<AppGroupSelectCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onFocus?: ActionBinding | ActionBinding[];
+    onPaste?: ActionBinding | ActionBinding[];
+    onMenuToggle?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A multi-select dropdown for choosing multiple options from grouped categories, with app-group styling. Use when users need to pick several items organized into labeled groups (e.g. apps by category). For single selection or ungrouped options, use Select instead.
+ */
+export declare const AppGroupSelect: (props?: AppGroupSelectProps | undefined) => SpecNode;
+export type AppNavBarProps = Bindable<AppNavBarCatalogProps> & {
+    onNavigate?: ActionBinding | ActionBinding[];
+    onAction?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Application navigation bar with routing support. Displays a horizontal tab bar or vertical sidebar with links, icons, badges, and optional nested sub-navigation. Use for top-level page navigation.
+ */
+export declare const AppNavBar: (props: AppNavBarProps) => SpecNode;
+export type AtomsSeparatorProps = Bindable<AtomsSeparatorCatalogProps> & ComponentDirectives;
+/**
+ * A horizontal rule that visually divides sections of content, with optional centered text (e.g. "OR"). Use for content separation — use Divider for separating individual list items.
+ */
+export declare const AtomsSeparator: (props?: AtomsSeparatorProps | undefined) => SpecNode;
+export type AvatarProps = Bindable<AvatarCatalogProps> & {
+    onPress?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A visual representation of an entity, such as a user, organization, or product. Use circular shape (isRounded=true) for people and rounded square (isRounded=false) for non-human entities like organizations or brands.
+ */
+export declare const Avatar: (props?: AvatarProps | undefined) => SpecNode;
+export type AvatarListProps = Bindable<AvatarListCatalogProps> & ComponentDirectives;
+/**
+ * Displays a list of avatars with a configurable maximum limit that automatically truncates with a number indicating the remaining entities. Use to represent a group of people or organizations.
+ */
+export declare const AvatarList: (props?: AvatarListProps | undefined) => SpecNode;
+export type BadgeProps = Bindable<BadgeCatalogProps> & ComponentDirectives;
+/**
+ * A static indicator for displaying notifications, counts, or numerical status information. Use for unread counts, pending items, and quantity metrics — not for categories (use Label) or actions (use Button).
+ */
+export declare const Badge: (props: BadgeProps) => SpecNode;
+export type BoxProps = Bindable<BoxCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A general-purpose flexbox layout container with full control over direction, alignment, spacing, dimensions, styling, and responsive direction switching via container queries. Use Box when you need fine-grained CSS control (custom dimensions, borders, backgrounds, positioning, responsive breakpoints) beyond what VStack/HStack provide. Prefer VStack or HStack for simple vertical or horizontal stacking with token-based spacing.
+ */
+export declare const Box: (props?: BoxProps | undefined) => SpecNode;
+export type BreadcrumbProps = Bindable<BreadcrumbCatalogProps> & {
+    onSelect?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A sequential series of links that mark the nested hierarchy and navigational context for a user's location within an app. Use for complex information architectures where users need a clear path back to higher-level pages.
+ */
+export declare const Breadcrumb: (props: BreadcrumbProps) => SpecNode;
+export type ButtonProps = Bindable<ButtonCatalogProps> & {
+    onPress?: ActionBinding | ActionBinding[];
+    onPressWhileDisabled?: ActionBinding | ActionBinding[];
+    onMouseEnter?: ActionBinding | ActionBinding[];
+    onMouseLeave?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * An interactive element that allows users to trigger actions or events with a single click. Use for actions, not navigation — use links for navigation. Use IconButton when space is limited and the action is not critical.
+ */
+export declare const Button: (props?: ButtonProps | undefined) => SpecNode;
+export type ButtonGroupProps = Bindable<ButtonGroupCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Layout container for arranging multiple Button elements horizontally or vertically with configurable placement, alignment, gap, and wrapping.
+ */
+export declare const ButtonGroup: (props?: ButtonGroupProps | undefined) => SpecNode;
+export type CardProps = Bindable<CardCatalogProps> & {
+    onEdit?: ActionBinding | ActionBinding[];
+    onDelete?: ActionBinding | ActionBinding[];
+    onAdd?: ActionBinding | ActionBinding[];
+    onClick?: ActionBinding | ActionBinding[];
+    onAction?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Visually groups related information and components into a contained, interactive card. Use for summarizing content, facilitating comparisons, or guiding users toward specific actions. Renders as a simple layout container when used with children only (no title/content).
+ */
+export declare const Card: (props?: CardProps | undefined) => SpecNode;
+export type CardGroupProps = Bindable<CardGroupCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A layout container that arranges Card children (Card, LocationCard, LoaderCard) in an auto-sizing responsive grid. Automatically computes a uniform card width based on available container space.
+ */
+export declare const CardGroup: (props?: CardGroupProps | undefined) => SpecNode;
+export type CarouselProps = Bindable<CarouselCatalogProps> & {
+    onDone?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A step-through image carousel for onboarding flows and guided walkthroughs. Each slide has a heading and image, with built-in navigation controls. Emits a done event when the user advances past the last slide.
+ */
+export declare const Carousel: (props: CarouselProps) => SpecNode;
+export type ChartLoaderProps = Bindable<ChartLoaderCatalogProps> & {
+    onLoad?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Chart-specific replacement for `WithSpinner`. While `isLoading` is true and `error` is empty, renders a chart-shaped stencil (the same `ChartVisualizationStencil` bar-chart animation the Analytics Report uses) instead of a generic Pebble spinner. When `error` is non-null/non-false, renders a status-aware `ChartError` fallback that picks an animation + copy variant from the HTTP status (403 forbidden, 404 not found, 400 bad request, 500-or-default), mirroring the Analytics Report `VisualizationErrorFallback`. Otherwise renders children. Emits `load` once on mount so a handler can kick off the data fetch.
+ */
+export declare const ChartLoader: (props: ChartLoaderProps) => SpecNode;
+export type CheckListProps = Bindable<CheckListCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A flexible multi-select interface with nested lists, allowing users to toggle selections using switches or checkboxes. Use for hierarchical options with parent-child relationships, bulk selection, or settings where multiple configurations can be enabled simultaneously.
+ */
+export declare const CheckList: (props: CheckListProps) => SpecNode;
+export type CheckboxProps = Bindable<CheckboxCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A checkbox that lets users select or unselect an option. Use for toggling a single boolean (e.g. "I agree") or selecting multiple items from a list. Use Radio for mutually exclusive choices; use Toggle when the change takes effect immediately.
+ */
+export declare const Checkbox: (props?: CheckboxProps | undefined) => SpecNode;
+export type CheckboxGroupProps = Bindable<CheckboxGroupCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A group of checkboxes that lets users select multiple options from a predefined list. Use when users can choose all, some, or none of the options. Use Radio instead for mutually exclusive single selection, or Toggle for immediate on/off activation.
+ */
+export declare const CheckboxGroup: (props?: CheckboxGroupProps | undefined) => SpecNode;
+export type ChipProps = Bindable<ChipCatalogProps> & {
+    onDismiss?: ActionBinding | ActionBinding[];
+    onPress?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A compact, interactive element for representing entities, attributes, filters, or complex criteria. Use for user-selected tags, filter conditions, or dismissible items. Use Label instead for static semantic color-coded metadata like "New" or "Caution", and Button for calls to action.
+ */
+export declare const Chip: (props?: ChipProps | undefined) => SpecNode;
+export type ChipGroupProps = Bindable<ChipGroupCatalogProps> & {
+    onOverflowChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A layout container for grouping multiple Chip components (tags, filters, attributes), managing arrangement with configurable gap spacing, overflow behavior that collapses excess chips into a "+N more" modal, and incremental batch rendering for large datasets.
+ */
+export declare const ChipGroup: (props?: ChipGroupProps | undefined) => SpecNode;
+export type CircleProps = Bindable<CircleCatalogProps> & ComponentDirectives;
+/**
+ * Circular graphic element for status or decoration
+ */
+export declare const Circle: (props?: CircleProps | undefined) => SpecNode;
+export type ColorPickerProps = Bindable<ColorPickerCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A form input for selecting a color from a predefined palette or entering a custom hex value. Use for brand color selection, theme customization, or any setting where users choose a specific color.
+ */
+export declare const ColorPicker: (props?: ColorPickerProps | undefined) => SpecNode;
+export type ContentLoaderProps = Bindable<ContentLoaderCatalogProps> & ComponentDirectives;
+/**
+ * A low-level SVG shimmer placeholder used to indicate loading state. Renders a plain animated rectangle whose dimensions you control. For shaped placeholders (text lines, circles, boxes), use Skeleton instead.
+ */
+export declare const ContentLoader: (props?: ContentLoaderProps | undefined) => SpecNode;
+export type CountDownProps = Bindable<CountDownCatalogProps> & ComponentDirectives;
+/**
+ * Countdown timer displaying time remaining until a target date
+ */
+export declare const CountDown: (props: CountDownProps) => SpecNode;
+export type CountryProps = Bindable<CountryCatalogProps> & ComponentDirectives;
+/**
+ * Displays a country by its ISO code, showing flag and/or name. Can show both (default), flag only, or name only. Ideal for profiles, address settings, or regional customization contexts where country identification is needed.
+ */
+export declare const Country: (props: CountryProps) => SpecNode;
+export type CurrencyProps = Bindable<CurrencyCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * Specialized input for entering monetary amounts with currency symbol/code prefix and locale-aware number formatting. Supports arithmetic expression evaluation, currency type selection via dropdown, and decimal precision control.
+ */
+export declare const Currency: (props?: CurrencyProps | undefined) => SpecNode;
+export type DateProps = Bindable<DateCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A date input that lets users select a single date via calendar or keyboard entry. Use for collecting exact, approximate, or memorable dates (e.g. birth date, start date) and for scheduling. Optionally includes time selection with timezone support. Use DateRange for start/end date pairs; use DateInlineMulti for selecting multiple individual dates without an input field.
+ */
+export declare const Date: (props?: DateProps | undefined) => SpecNode;
+export type DateInlineMultiProps = Bindable<DateInlineMultiCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * An always-visible inline calendar for selecting multiple individual dates without an input field. Use when users need to pick several non-contiguous dates (e.g. holidays, blocked days). Use Date for single-date entry with an input field, or DateRange for start/end date pairs.
+ */
+export declare const DateInlineMulti: (props?: DateInlineMultiProps | undefined) => SpecNode;
+export type DateRangeProps = Bindable<DateRangeCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A date range picker for selecting a start date and end date pair, such as travel dates, leave periods, or reporting intervals. Use Date instead when only a single date is needed.
+ */
+export declare const DateRange: (props?: DateRangeProps | undefined) => SpecNode;
+export type DaySelectorProps = Bindable<DaySelectorCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A form input for selecting one or more days of the week (Sunday through Saturday). Use for recurring schedules, availability preferences, or any scenario requiring day-of-week choices.
+ */
+export declare const DaySelector: (props?: DaySelectorProps | undefined) => SpecNode;
+export type DistributionBarProps = Bindable<DistributionBarCatalogProps> & ComponentDirectives;
+/**
+ * A horizontal stacked bar that visualizes proportional distribution of values across categories. Use to show how parts contribute to a whole, such as budget allocation, storage usage breakdown, or workforce composition.
+ */
+export declare const DistributionBar: (props: DistributionBarProps) => SpecNode;
+export type DividerProps = Bindable<DividerCatalogProps> & ComponentDirectives;
+/**
+ * Horizontal line to visually separate content sections
+ */
+export declare const Divider: (props?: DividerProps | undefined) => SpecNode;
+export type DraggableListProps = Bindable<DraggableListCatalogProps> & {
+    onUpdate?: ActionBinding | ActionBinding[];
+    onRemove?: ActionBinding | ActionBinding[];
+    onDragStart?: ActionBinding | ActionBinding[];
+    onDragEnd?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A reorderable drag-and-drop list for dynamically rearranging items. Supports vertical and horizontal layouts; use when item order flexibility is crucial to the user experience.
+ */
+export declare const DraggableList: (props: DraggableListProps) => SpecNode;
+export type DrawerProps = Bindable<DrawerCatalogProps> & {
+    onClose?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A sliding panel that appears from the edge of the screen, allowing users to access additional information or complete secondary tasks like forms without losing context of their primary workflow. Use instead of Modal when preserving the user's place on the page is important.
+ */
+export declare const Drawer: (props?: DrawerProps | undefined) => SpecNode;
+export type DropdownProps = Bindable<DropdownCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A popover menu that displays a list of actions or selectable options. Use for 3–15 choices triggered by a button; for form field selection, use Select instead.
+ */
+export declare const Dropdown: (props: DropdownProps) => SpecNode;
+export type EmailProps = Bindable<EmailCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onFocus?: ActionBinding | ActionBinding[];
+    onClick?: ActionBinding | ActionBinding[];
+    onKeydown?: ActionBinding | ActionBinding[];
+    onKeyup?: ActionBinding | ActionBinding[];
+    onPaste?: ActionBinding | ActionBinding[];
+    onMouseenter?: ActionBinding | ActionBinding[];
+    onMouseleave?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A form input field for collecting email addresses with built-in format validation. Use for registration, login, subscriptions, and any context requiring a valid email. Do not use for non-email text like phone numbers or usernames — use Text instead.
+ */
+export declare const Email: (props?: EmailProps | undefined) => SpecNode;
+export type ExpansionPanelProps = Bindable<ExpansionPanelCatalogProps> & {
+    onToggle?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A collapsible panel that expands or contracts to reveal additional detailed information. Use to organize related content within limited space, such as FAQs, settings menus, or side panels. Prefer a full scrolling page when users need to read all content.
+ */
+export declare const ExpansionPanel: (props: ExpansionPanelProps) => SpecNode;
+export type ExpansionPanelGroupProps = Bindable<ExpansionPanelGroupCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A container that coordinates multiple ExpansionPanel children, optionally enforcing accordion behavior where only one panel can be open at a time. Use to organize related content into collapsible sections within limited space.
+ */
+export declare const ExpansionPanelGroup: (props?: ExpansionPanelGroupProps | undefined) => SpecNode;
+export type FieldProps = Bindable<FieldCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A layout wrapper that provides consistent structure around form inputs, including a label, required indicator, helper or error message, tooltip, read-only mode, and inline (side-by-side) layout option. Use Field to wrap any form input component.
+ */
+export declare const Field: (props?: FieldProps | undefined) => SpecNode;
+export type FileProps = Bindable<FileCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onDelete?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A compact file upload input for selecting one or more files via browse or drag-and-drop. Supports file type restrictions, size limits, and upload progress. Use for inline file fields in forms; use FileDrop for larger drag-and-drop zones with labels and validation.
+ */
+export declare const File: (props?: FileProps | undefined) => SpecNode;
+export type FileDropProps = Bindable<FileDropCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A file upload input that allows users to drag and drop files into a drop zone or click to browse. Supports single or multiple file uploads with configurable file type restrictions, size limits, and optional image cropping.
+ */
+export declare const FileDrop: (props?: FileDropProps | undefined) => SpecNode;
+export type FloatingButtonProps = Bindable<FloatingButtonCatalogProps> & {
+    onPress?: ActionBinding | ActionBinding[];
+    onPressWhileDisabled?: ActionBinding | ActionBinding[];
+    onMouseEnter?: ActionBinding | ActionBinding[];
+    onMouseLeave?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A floating action button (FAB) that highlights the primary action on a screen, staying visible above other content. Uses an icon only (no text label) and typically appears once per screen for key tasks like creating, favoriting, or sharing.
+ */
+export declare const FloatingButton: (props: FloatingButtonProps) => SpecNode;
+export type GridProps = Bindable<GridCatalogProps> & {
+    onRowClick?: ActionBinding | ActionBinding[];
+    onRowAction?: ActionBinding | ActionBinding[];
+    onHeaderAction?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * Data grid for displaying tabular data. Each column defines a header, data key path, and cell type. Use $bindState on selectedRow to capture clicked row data. Data is an array of row objects with _key as unique identifier.
+ */
+export declare const Grid: (props: GridProps) => SpecNode;
+export type HStackProps = Bindable<HStackCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Horizontal stack layout that arranges children side-by-side in a row with token-based spacing. Use for placing elements next to each other horizontally — e.g. side-by-side form fields, button groups, or inline icon-and-text pairs. Prefer VStack for vertical stacking and Box for complex layouts needing custom dimensions, borders, or backgrounds.
+ */
+export declare const HStack: (props?: HStackProps | undefined) => SpecNode;
+export type HeadingProps = Bindable<HeadingCatalogProps> & ComponentDirectives;
+/**
+ * A semantic heading element (h1–h6) for page titles and section headers that establishes document hierarchy. Use for structural headings only — for body text or paragraphs use Paragraph, and for a title paired with a subtitle use TitleCaption.
+ */
+export declare const Heading: (props?: HeadingProps | undefined) => SpecNode;
+export type IconProps = Bindable<IconCatalogProps> & {
+    onPress?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A standalone icon element from the Pebble icon set. Use for decorative or interactive icon displays — as clickable action triggers, status indicators, or visual accents. Supports tooltips and full ARIA attributes for accessibility.
+ */
+export declare const Icon: (props: IconProps) => SpecNode;
+export type IconButtonProps = Bindable<IconButtonCatalogProps> & {
+    onPress?: ActionBinding | ActionBinding[];
+    onPressWhileDisabled?: ActionBinding | ActionBinding[];
+    onMouseEnter?: ActionBinding | ActionBinding[];
+    onMouseLeave?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * An icon-only button for repeated, common, or persistent actions when screen real estate is limited. Use for well-known actions like search, refresh, edit, or navigation — use a regular Button with text when the action is critical or requires more context.
+ */
+export declare const IconButton: (props: IconButtonProps) => SpecNode;
+export type ImageProps = Bindable<ImageCatalogProps> & {
+    onPress?: ActionBinding | ActionBinding[];
+    onLoad?: ActionBinding | ActionBinding[];
+    onError?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * Displays an image with optional theme-aware light/dark sources, lazy loading, and click interaction. Use for static or decorative images — use Avatar for user profile pictures, Icon for symbolic glyphs, or ImageViewer for zoomable image galleries.
+ */
+export declare const Image: (props: ImageProps) => SpecNode;
+export type ImageViewerProps = Bindable<ImageViewerCatalogProps> & ComponentDirectives;
+/**
+ * Displays an image thumbnail that expands into a full-size overlay with zoom when clicked. Use for previewing images such as uploaded documents, photos, or screenshots where users need to inspect detail.
+ */
+export declare const ImageViewer: (props: ImageViewerProps) => SpecNode;
+export type InputGroupProps = Bindable<InputGroupCatalogProps> & ComponentDirectives;
+/**
+ * Combines multiple input fields (e.g. a Select prefix with a Text input) into a single visually unified group with shared sizing, disabled, invalid, and read-only state. Use for composite inputs like currency amount with currency selector, or phone number with country code.
+ */
+export declare const InputGroup: (props: InputGroupProps) => SpecNode;
+export type ItemNavigatorProps = Bindable<ItemNavigatorCatalogProps> & {
+    onNext?: ActionBinding | ActionBinding[];
+    onPrevious?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A compact prev/next control for stepping through items one at a time, displaying "X of Y items" with previous and next buttons. Use for sequential item-by-item navigation such as cycling through detail views of records, search results, or review queues — not for page-based navigation (use Pagination instead).
+ */
+export declare const ItemNavigator: (props: ItemNavigatorProps) => SpecNode;
+export type LabelProps = Bindable<LabelCatalogProps> & ComponentDirectives;
+/**
+ * A static, non-interactive identifier representing a status, property, or other highlighted metadata about an item. Use for categorizing or labeling items with short keywords like "New", "Recommended", or "High Priority". For interactive tagging use Chip; for live status updates use Status.
+ */
+export declare const Label: (props: LabelProps) => SpecNode;
+export type LabelGroupProps = Bindable<LabelGroupCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A layout container for grouping multiple Label components together, with automatic wrapping and overflow handling. When labels exceed a configured row limit, excess labels collapse into a "+N more" indicator that opens a modal. Use when displaying a set of categorization or metadata labels on an item.
+ */
+export declare const LabelGroup: (props?: LabelGroupProps | undefined) => SpecNode;
+export type LayoutProps = Bindable<LayoutCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A flex-based container for arranging child elements with control over direction, alignment, spacing, dimensions, and styling. Use Layout for general-purpose page structure and custom layouts. Prefer VStack or HStack for simple vertical or horizontal stacking.
+ */
+export declare const Layout: (props?: LayoutProps | undefined) => SpecNode;
+export type LayoutCardProps = Bindable<LayoutCardCatalogProps> & {
+    onPress?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A standard card container for creating card-based page layouts with configurable padding and an optional selectable theme for selection interfaces.
+ */
+export declare const LayoutCard: (props?: LayoutCardProps | undefined) => SpecNode;
+export type LinkProps = Bindable<LinkCatalogProps> & {
+    onPress?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A clickable text hyperlink for navigating to URLs or downloading files. Use for inline or standalone text links — use Button for actions that don't navigate, and Breadcrumb for hierarchical navigation trails.
+ */
+export declare const Link: (props: LinkProps) => SpecNode;
+export type ListItemProps = Bindable<ListItemCatalogProps> & {
+    onPress?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A structured list entry for displaying related entities vertically, with a title and optional caption. Use within grouped lists to present items for scanning, selection, or action.
+ */
+export declare const ListItem: (props?: ListItemProps | undefined) => SpecNode;
+export type LoaderCardProps = Bindable<LoaderCardCatalogProps> & ComponentDirectives;
+/**
+ * A skeleton placeholder shaped like a card, shown while card content is loading. Use inside a Card.Group context to match card dimensions and reduce perceived loading time. Set isGridView for grid-based layouts.
+ */
+export declare const LoaderCard: (props?: LoaderCardProps | undefined) => SpecNode;
+export type LocationCardProps = Bindable<LocationCardCatalogProps> & {
+    onEdit?: ActionBinding | ActionBinding[];
+    onDelete?: ActionBinding | ActionBinding[];
+    onClick?: ActionBinding | ActionBinding[];
+    onAction?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A specialized card for displaying a physical location with its nickname and formatted address. Supports edit/delete actions, custom dropdown actions, and navigation links to location details.
+ */
+export declare const LocationCard: (props: LocationCardProps) => SpecNode;
+export type MaskerProps = Bindable<MaskerCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A text input that enforces a specific format pattern using mask characters (e.g. phone numbers, SSNs, postal codes). Use when the input value must conform to a known fixed-length pattern with digit, letter, or mixed character slots.
+ */
+export declare const Masker: (props: MaskerProps) => SpecNode;
+export type MenuListProps = Bindable<MenuListCatalogProps> & {
+    onSelect?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A dropdown menu list that displays selectable actions or options. Use for context menus, action menus, or option pickers where items need to be selected from a list. Items can use WARNING type for cautionary actions or ALERT type for destructive actions like delete.
+ */
+export declare const MenuList: (props: MenuListProps) => SpecNode;
+export type ModalProps = Bindable<ModalCatalogProps> & {
+    onClose?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * An interactive overlay that demands user attention and input, isolating specific tasks or information above the main page content. Use for confirmations, urgent notifications, or brief focused tasks that require an immediate response.
+ */
+export declare const Modal: (props?: ModalProps | undefined) => SpecNode;
+export type ModalCloseButtonProps = Bindable<ModalCloseButtonCatalogProps> & ComponentDirectives;
+/**
+ * A button placed inside a Modal that dismisses the dialog when clicked. Used as the cancel or close action in modal footers, allowing users to exit without completing the modal task.
+ */
+export declare const ModalCloseButton: (props?: ModalCloseButtonProps | undefined) => SpecNode;
+export type ModalFooterProps = Bindable<ModalFooterCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Footer section of a Modal that holds primary action buttons for task completion or cancellation. Use inside a Modal as the bottom bar for confirm/cancel actions.
+ */
+export declare const ModalFooter: (props?: ModalFooterProps | undefined) => SpecNode;
+export type NestedListProps = Bindable<NestedListCatalogProps> & {
+    onToggle?: ActionBinding | ActionBinding[];
+    onSelect?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A hierarchical nested list for displaying complex data structures like categories and subcategories, supporting up to four levels of expandable/collapsible nesting. Use for organizing large amounts of nested information such as organizational structures or department lists.
+ */
+export declare const NestedList: (props: NestedListProps) => SpecNode;
+export type NumberProps = Bindable<NumberCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onChangeRaw?: ActionBinding | ActionBinding[];
+    onChangeCalculationState?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A general-purpose numeric input for entering whole or decimal numbers. Supports min/max range constraints, step increments, locale-aware formatting, and inline arithmetic evaluation. Use for quantities, counts, measurements, or any plain number entry — use Currency for monetary amounts, Percentage for percent values, or Slider/RangeSlider for visual range selection.
+ */
+export declare const Number: (props?: NumberProps | undefined) => SpecNode;
+export type ObjectUIProps = Bindable<ObjectUICatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A modular component that presents a high-level overview of an entity (person, organization, device) with an avatar, title, and caption. Typically placed at the top of a detail page below navigation. Use Cards for detailed entity info, Lists for comparing multiple items, or Tables for large sortable datasets.
+ */
+export declare const ObjectUI: (props?: ObjectUIProps | undefined) => SpecNode;
+export type ObjectUIContentProps = Bindable<ObjectUIContentCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * The main body content area of an ObjectUI entity detail page. Place below ObjectUIHeader (and optionally ObjectUIStats) inside ObjectUITemplate to hold the detailed content for the entity.
+ */
+export declare const ObjectUIContent: (props?: ObjectUIContentProps | undefined) => SpecNode;
+export type ObjectUIHeaderProps = Bindable<ObjectUIHeaderCatalogProps> & ComponentDirectives;
+/**
+ * Header section of an entity overview (person, organization, device) displaying an avatar, title, and caption. Used at the top of ObjectUI layouts to identify the entity at a glance.
+ */
+export declare const ObjectUIHeader: (props?: ObjectUIHeaderProps | undefined) => SpecNode;
+export type ObjectUIStatsProps = Bindable<ObjectUIStatsCatalogProps> & {
+    onActionClick?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A grid section within ObjectUI that displays key-value statistics about an entity (person, organization, device), with optional tooltips on stat labels and icon action buttons.
+ */
+export declare const ObjectUIStats: (props: ObjectUIStatsProps) => SpecNode;
+export type ObjectUITemplateProps = Bindable<ObjectUITemplateCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * The root container for an ObjectUI entity detail page that presents a high-level overview of an entity (person, organization, device). Place ObjectUIHeader, ObjectUIStats, and ObjectUIContent as children. Use ObjectUITemplate when you need a structured entity overview at the top of a page; use Cards for detailed entity info, Lists for comparing multiple items, or Tables for large sortable datasets.
+ */
+export declare const ObjectUITemplate: (props?: ObjectUITemplateProps | undefined) => SpecNode;
+export type PageAppLogoProps = Bindable<PageAppLogoCatalogProps> & ComponentDirectives;
+/**
+ * Branded header for an application or module page, displaying the app logo, title, optional subtitle, and optional help/support link. Use at the top of a page to identify which app the user is in.
+ */
+export declare const PageAppLogo: (props: PageAppLogoProps) => SpecNode;
+export type PageContentProps = Bindable<PageContentCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * The standard wrapper for a page's main body area. Controls maximum content width (584–1544px or FLUID for edge-to-edge) and horizontal alignment (center, left, right). Use PageContent for every page-level content region, whether constrained to a fixed width or stretched full-width.
+ */
+export declare const PageContent: (props?: PageContentProps | undefined) => SpecNode;
+export type PageFooterProps = Bindable<PageFooterCatalogProps> & {
+    onContinue?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A persistent footer bar at the bottom of a page, typically used for primary navigation actions like "Continue" or "Submit". Supports a built-in continue button (via the continue event) or custom child content for more complex footer layouts. Use shouldBeSticky to keep it visible at the bottom of the viewport as the user scrolls.
+ */
+export declare const PageFooter: (props?: PageFooterProps | undefined) => SpecNode;
+export type PageHeaderProps = Bindable<PageHeaderCatalogProps> & ComponentDirectives;
+/**
+ * A top-of-page header displaying a title and optional caption, used inside a page layout alongside PageContent and PageFooter. Use size to match the PageContent width.
+ */
+export declare const PageHeader: (props?: PageHeaderProps | undefined) => SpecNode;
+export type PaginateProps = Bindable<PaginateCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A navigation control that breaks large content into smaller pages, commonly used with data tables and content-rich views. Use when loading all data at once is impractical or when content is too large for a single view.
+ */
+export declare const Paginate: (props: PaginateProps) => SpecNode;
+export type PaneProps = Bindable<PaneCatalogProps> & {
+    onCollapsedChange?: ActionBinding | ActionBinding[];
+    onDismiss?: ActionBinding | ActionBinding[];
+    onResize?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * An individual panel within a SplitPane container. Each Pane defines its own size constraints, collapse priority, and resize behavior. Must be a direct child of SplitPane.
+ */
+export declare const Pane: (props: PaneProps) => SpecNode;
+export type PasswordProps = Bindable<PasswordCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onFocus?: ActionBinding | ActionBinding[];
+    onClick?: ActionBinding | ActionBinding[];
+    onKeydown?: ActionBinding | ActionBinding[];
+    onKeyup?: ActionBinding | ActionBinding[];
+    onPaste?: ActionBinding | ActionBinding[];
+    onMouseenter?: ActionBinding | ActionBinding[];
+    onMouseleave?: ActionBinding | ActionBinding[];
+    onReveal?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A secure input field for entering or creating passwords, with automatic character masking and an optional visibility toggle. Use in login, signup, or verification flows.
+ */
+export declare const Password: (props?: PasswordProps | undefined) => SpecNode;
+export type PercentageProps = Bindable<PercentageCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A numeric input for entering and editing percentage values. Automatically appends a % suffix, supports decimal precision, negative values, and upper/lower bounds. Use for financial calculations, progress indicators, or statistical entries requiring percentage values.
+ */
+export declare const Percentage: (props?: PercentageProps | undefined) => SpecNode;
+export type PhoneProps = Bindable<PhoneCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onFocus?: ActionBinding | ActionBinding[];
+    onClick?: ActionBinding | ActionBinding[];
+    onKeydown?: ActionBinding | ActionBinding[];
+    onKeyup?: ActionBinding | ActionBinding[];
+    onPaste?: ActionBinding | ActionBinding[];
+    onMouseenter?: ActionBinding | ActionBinding[];
+    onMouseleave?: ActionBinding | ActionBinding[];
+    onCountryCodeChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A specialized input for entering and editing phone numbers with automatic region-based formatting, international support, and an optional country code dropdown selector.
+ */
+export declare const Phone: (props?: PhoneProps | undefined) => SpecNode;
+export type ProgressBarProps = Bindable<ProgressBarCatalogProps> & ComponentDirectives;
+/**
+ * Communicates the status of an ongoing process, like downloading or uploading files, to inform the user of the remaining wait time. Use determinate mode when progress percentage is known, or indeterminate when wait time cannot be calculated. For multi-step processes requiring user action, use ProgressSteps instead; for a simple busy indicator, use Spinner.
+ */
+export declare const ProgressBar: (props?: ProgressBarProps | undefined) => SpecNode;
+export type ProgressStepsProps = Bindable<ProgressStepsCatalogProps> & ComponentDirectives;
+/**
+ * A multi-step progress indicator that visually shows completed, current, and upcoming steps in a sequential workflow. Use for onboarding flows, form wizards, or any multi-part process where users need to see their progress.
+ */
+export declare const ProgressSteps: (props: ProgressStepsProps) => SpecNode;
+export type RadioProps = Bindable<RadioCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onMouseenter?: ActionBinding | ActionBinding[];
+    onMouseleave?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * Radio buttons let users choose a single option from two or more mutually exclusive options. Prefer over Select when showing 5 or fewer options that need to be immediately visible. Use Checkbox instead when multiple selections are allowed.
+ */
+export declare const Radio: (props?: RadioProps | undefined) => SpecNode;
+export type RangeSliderProps = Bindable<RangeSliderCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBeforeChange?: ActionBinding | ActionBinding[];
+    onAfterChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A two-handle slider for selecting a numeric range within a track. Use for defining min/max boundaries such as price filters or value ranges.
+ */
+export declare const RangeSlider: (props?: RangeSliderProps | undefined) => SpecNode;
+export type ReportLoaderProps = Bindable<ReportLoaderCatalogProps> & ComponentDirectives;
+/**
+ * A skeleton placeholder shown while tabular report content is loading. Use when the content area will contain a data report with header and detail rows, and you want to reduce perceived loading time and prevent layout shift.
+ */
+export declare const ReportLoader: (props?: ReportLoaderProps | undefined) => SpecNode;
+export type ReportShareLoaderProps = Bindable<ReportShareLoaderCatalogProps> & ComponentDirectives;
+/**
+ * A skeleton placeholder shown while report sharing content is loading. Use when the report share dialog or page layout is known and you want to reduce perceived loading time and prevent layout shift. Renders a header, description, and two side-by-side content blocks (stacking on mobile).
+ */
+export declare const ReportShareLoader: (props?: ReportShareLoaderProps | undefined) => SpecNode;
+export type ReportViewerLoaderProps = Bindable<ReportViewerLoaderCatalogProps> & ComponentDirectives;
+/**
+ * A skeleton placeholder shown while report viewer content is loading. Use when the content area will contain a report viewer with sidebar navigation and a main report content area, and you want to reduce perceived loading time and prevent layout shift.
+ */
+export declare const ReportViewerLoader: (props?: ReportViewerLoaderProps | undefined) => SpecNode;
+export type ResponsiveProps = Bindable<ResponsiveCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Conditionally show or hide content based on container or viewport width breakpoints, enabling responsive layouts that adapt to different screen and panel sizes. Use to hide non-essential UI at narrow widths or show alternative layouts at wider breakpoints.
+ */
+export declare const Responsive: (props?: ResponsiveProps | undefined) => SpecNode;
+export type SegmentedControlProps = Bindable<SegmentedControlCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A linear set of buttons for toggling between closely related choices (2-5 short-label options) and instantly applying a selection. Supports single, multi, and range selection modes. NOT suitable for binary (2-option) choices — use Toggle or ToggleButton instead. Prefer over Radio when options are short labels needing a compact inline layout; use Radio for longer phrases, Tabs for content navigation.
+ */
+export declare const SegmentedControl: (props: SegmentedControlProps) => SpecNode;
+export type SelectProps = Bindable<SelectCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onFocus?: ActionBinding | ActionBinding[];
+    onPaste?: ActionBinding | ActionBinding[];
+    onMenuToggle?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A dropdown input that lets users choose one or more options from a predefined list. Use for long lists, searchable lists, or constrained spaces. Use Radio or Checkbox cards instead when there are few options and the selection is a key part of the flow.
+ */
+export declare const Select: (props?: SelectProps | undefined) => SpecNode;
+export type SelectableGroupProps = Bindable<SelectableGroupCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A card-based selection input that renders a group of selectable cards for single or multi-choice picking. Use when users need to choose from a small set of visually rich options displayed as cards (e.g. plans, locations, tiers). Use Radio for simple text-only single choice, or Select for long option lists in a dropdown.
+ */
+export declare const SelectableGroup: (props: SelectableGroupProps) => SpecNode;
+export type SelectableMenuProps = Bindable<SelectableMenuCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A dropdown menu that displays selectable options, allowing users to choose from a list of actions or settings. Includes a built-in trigger button. Deprecated — prefer Dropdown for new specs.
+ */
+export declare const SelectableMenu: (props: SelectableMenuProps) => SpecNode;
+export type SettingsLoaderProps = Bindable<SettingsLoaderCatalogProps> & ComponentDirectives;
+/**
+ * A skeleton placeholder shown while settings page content is loading. Use when the content area will contain a settings form with label/value rows, and you want to reduce perceived loading time and prevent layout shift. Supports optional centering and custom margin.
+ */
+export declare const SettingsLoader: (props?: SettingsLoaderProps | undefined) => SpecNode;
+export type ShowMoreProps = Bindable<ShowMoreCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A container that truncates a list of child elements, showing only the first N items with a "Show all" / "Show less" toggle button. Use to reduce visual clutter in long lists while keeping all items accessible on demand.
+ */
+export declare const ShowMore: (props?: ShowMoreProps | undefined) => SpecNode;
+export type SignatureProps = Bindable<SignatureCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A signature capture input that lets users sign by drawing on a canvas or typing their name. Use for legally binding agreements, contracts, or any workflow requiring a personal signature.
+ */
+export declare const Signature: (props?: SignatureProps | undefined) => SpecNode;
+export type SinProps = Bindable<SinCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A specialized masked input for entering Canadian Social Insurance Numbers (SIN). Automatically formats the 9-digit value as "XXX XXX XXX" while storing the unmasked digits. Use for Canadian employee or tax forms requiring a SIN — use Ssn for US Social Security Numbers, or Masker for other custom-format masked inputs.
+ */
+export declare const Sin: (props?: SinProps | undefined) => SpecNode;
+export type SkeletonProps = Bindable<SkeletonCatalogProps> & ComponentDirectives;
+/**
+ * An animated placeholder that mimics the shape of content while it loads, available in text (lines), circle, and box variants.
+ */
+export declare const Skeleton: (props?: SkeletonProps | undefined) => SpecNode;
+export type SliderProps = Bindable<SliderCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onBeforeChange?: ActionBinding | ActionBinding[];
+    onAfterChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * An interactive control for selecting a single numeric value within a defined range by dragging a handle along a horizontal track. Use for numeric ranges like 0–100; do not use for extremely large ranges (e.g. 1–1000) or non-numeric values.
+ */
+export declare const Slider: (props?: SliderProps | undefined) => SpecNode;
+export type SnackBarProps = Bindable<SnackBarCatalogProps> & {
+    onDismiss?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A passive notification that appears at the bottom of the screen to provide quick, at-a-glance feedback on the outcome of an action. Use for non-critical, supplementary messages that do not require user action — for critical messages requiring acknowledgment, use a Modal instead.
+ */
+export declare const SnackBar: (props: SnackBarProps) => SpecNode;
+export type SpinnerProps = Bindable<SpinnerCatalogProps> & ComponentDirectives;
+/**
+ * A progress indicator for communicating that a process or task is currently underway without a known completion time. Use ProgressBar instead when the completion percentage is known.
+ */
+export declare const Spinner: (props?: SpinnerProps | undefined) => SpecNode;
+export type SplitButtonProps = Bindable<SplitButtonCatalogProps> & {
+    onPress?: ActionBinding | ActionBinding[];
+    onDropdownChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A compound button that combines a primary action with a secondary trailing button, typically opening a dropdown of alternative actions. Use when the user has a main action with related alternatives (e.g. "Save" with "Save as draft", "Save and publish").
+ */
+export declare const SplitButton: (props: SplitButtonProps) => SpecNode;
+export type SplitPaneProps = Bindable<SplitPaneCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A multi-pane layout container that arranges child Pane components side-by-side with support for resizing, collapsing, and responsive behavior. Use for master-detail views, sidebars, and split-screen interfaces where panels need independent sizing and collapse control.
+ */
+export declare const SplitPane: (props?: SplitPaneProps | undefined) => SpecNode;
+export type SsnProps = Bindable<SsnCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A specialized masked input for collecting US Social Security Numbers (SSN). Automatically formats display as XXX-XX-XXXX while storing the raw 9-digit value. Use for any form field that requires an SSN; use Text for general text or Password for secret credentials.
+ */
+export declare const Ssn: (props?: SsnProps | undefined) => SpecNode;
+export type StatusProps = Bindable<StatusCatalogProps> & ComponentDirectives;
+/**
+ * A static indicator of real-time state or condition, such as availability, progress, or publication status. Displays a colored dot alongside a text label. Use Label instead for categorizing or organizing items with keywords.
+ */
+export declare const Status: (props: StatusProps) => SpecNode;
+export type StepperProps = Bindable<StepperCatalogProps> & {
+    onClick?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A progress indicator that guides users through multi-step sequential workflows by displaying completed steps, current position, and upcoming tasks. Best for linear processes with 3-7 steps such as checkout flows, onboarding sequences, or form wizards. Not suitable for non-linear workflows or processes with fewer than three steps.
+ */
+export declare const Stepper: (props: StepperProps) => SpecNode;
+export type SurveyProps = Bindable<SurveyCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A button-group input for collecting ratings or opinions on a Likert scale (e.g. 1–5 or 1–10). Renders each option as a clickable button with optional range labels for the endpoints. Supports single or multi-select. Use for satisfaction surveys, NPS scores, or opinion scales. Use Radio for mutually exclusive text choices, SegmentedControl for toggling between named options, or Slider for continuous numeric ranges.
+ */
+export declare const Survey: (props: SurveyProps) => SpecNode;
+export type SwitchProps = Bindable<SwitchCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A toggle that lets users switch instantly between on and off states. Use for activation settings that take effect immediately; use Checkbox instead for selection or agreement scenarios that require submission.
+ */
+export declare const Switch: (props?: SwitchProps | undefined) => SpecNode;
+export type TabProps = Bindable<TabCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * Labeled controls for alternating between related views within the same page or context. Use to organize groups of related content at the same hierarchy level; for selection within a single view, use a segmented control instead.
+ */
+export declare const Tab: (props: TabProps) => SpecNode;
+export type TableBasicProps = Bindable<TableBasicCatalogProps> & ComponentDirectives;
+/**
+ * A read-only data table for displaying moderately large amounts of information in rows and columns. Use for structured, text-based data that benefits from systematic organization and easy scanning. For sorting, filtering, or cell-level interaction, use Grid instead; for simple vertical lists without column headings, use ListItem.
+ */
+export declare const TableBasic: (props: TableBasicProps) => SpecNode;
+export type TextProps = Bindable<TextCatalogProps> & ComponentDirectives;
+/**
+ * A general-purpose text component for rendering body copy, descriptions, captions, and other non-heading text content. Defaults to a paragraph (<p>) with body-medium typestyle. Use Heading instead for section titles (h1–h6), and TitleCaption for a title paired with a subtitle.
+ */
+export declare const Text: (props?: TextProps | undefined) => SpecNode;
+export type TextAutoSuggestProps = Bindable<TextAutoSuggestCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onFocus?: ActionBinding | ActionBinding[];
+    onClick?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * An autocomplete input that offers text suggestions in a dropdown menu as the user types. Unlike Select, users can either manually type free-form text or pick from the suggestions list.
+ */
+export declare const TextAutoSuggest: (props?: TextAutoSuggestProps | undefined) => SpecNode;
+export type TextClipProps = Bindable<TextClipCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Displays extensive text or content in a compact area by clipping it at a specified height, with an expand/collapse toggle for full viewing. Use when space is limited but more information is available. Use ExpansionPanel instead for multiple collapsible sections, or Tooltip for brief hover-only content.
+ */
+export declare const TextClip: (props: TextClipProps) => SpecNode;
+export type TextInputProps = Bindable<TextInputCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onFocus?: ActionBinding | ActionBinding[];
+    onClick?: ActionBinding | ActionBinding[];
+    onKeydown?: ActionBinding | ActionBinding[];
+    onKeyup?: ActionBinding | ActionBinding[];
+    onPaste?: ActionBinding | ActionBinding[];
+    onMouseenter?: ActionBinding | ActionBinding[];
+    onMouseleave?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A single-line text input for collecting short-form text data such as names, emails, URLs, or search queries. Use TextArea for multi-line content or Number for numeric-only values.
+ */
+export declare const TextInput: (props?: TextInputProps | undefined) => SpecNode;
+export type TextSnippetProps = Bindable<TextSnippetCatalogProps> & ComponentDirectives;
+/**
+ * A read-only text block with a one-click action to copy its content to the clipboard or download it as a file. Use for command-line instructions, code snippets, API keys, or any text the user needs to grab verbatim.
+ */
+export declare const TextSnippet: (props: TextSnippetProps) => SpecNode;
+export type TextareaProps = Bindable<TextareaCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onFocus?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A multi-line text input for entering longer free-form text such as comments, descriptions, or paragraphs. Use TextInput instead for short single-line entries.
+ */
+export declare const Textarea: (props?: TextareaProps | undefined) => SpecNode;
+export type TimeProps = Bindable<TimeCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A form input for entering or selecting a specific time of day. Supports typed entry, optional dropdown time selection, timezone display, and locale-aware formatting.
+ */
+export declare const Time: (props?: TimeProps | undefined) => SpecNode;
+export type TimeRangeProps = Bindable<TimeRangeCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A time range input for selecting a start and end time pair, such as work schedules, shifts, or availability windows. Stores a [startTime, endTime] tuple of ISO 8601 strings. Supports timezone display and next-day span detection.
+ */
+export declare const TimeRange: (props?: TimeRangeProps | undefined) => SpecNode;
+export type TimezoneProps = Bindable<TimezoneCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onFocus?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A specialized select component for choosing a timezone. Lists all IANA timezones with search filtering. Use this when the user needs to pick a standalone timezone; use Time with timezone instead when selecting a time together with a timezone.
+ */
+export declare const Timezone: (props?: TimezoneProps | undefined) => SpecNode;
+export type TipProps = Bindable<TipCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * A supportive floating text box that offers contextual details about an associated element when hovered over or focused. Use for supplementary, non-critical information such as labelling icon buttons or describing ambiguous UI elements.
+ */
+export declare const Tip: (props: TipProps) => SpecNode;
+export type TitleCaptionProps = Bindable<TitleCaptionCatalogProps> & ComponentDirectives;
+/**
+ * A compact title-and-caption pair for displaying a primary label with an optional secondary descriptor, such as a person's name with their job title or a heading with a subtitle.
+ */
+export declare const TitleCaption: (props: TitleCaptionProps) => SpecNode;
+export type ToggleableArrowProps = Bindable<ToggleableArrowCatalogProps> & ComponentDirectives;
+/**
+ * A chevron arrow indicator that toggles between down (collapsed) and up (expanded) directions. Use as a standalone expand/collapse affordance, such as in custom collapsible sections or tree nodes.
+ */
+export declare const ToggleableArrow: (props?: ToggleableArrowProps | undefined) => SpecNode;
+export type TreeProps = Bindable<TreeCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onFooterAction?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A hierarchical selector for choosing from a tree-structured list of parent-child relationships with expand/collapse navigation. Use for selecting from deeply nested data like org structures, file systems, directories, or classification hierarchies.
+ */
+export declare const Tree: (props: TreeProps) => SpecNode;
+export type TreeSelectProps = Bindable<TreeSelectCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A dropdown select component with a hierarchical tree structure for choosing from nested parent-child options. Use when users need to pick from deeply nested data like org structures, file systems, or classification hierarchies, but the tree should stay collapsed behind a dropdown trigger. Use Tree instead when the hierarchy should be visible at all times.
+ */
+export declare const TreeSelect: (props: TreeSelectProps) => SpecNode;
+export type VStackProps = Bindable<VStackCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Vertical stack layout that arranges children top-to-bottom in a column with token-based spacing. Use for stacking elements vertically — e.g. form field groups, page sections, or lists of content blocks. Prefer HStack for horizontal side-by-side arrangement and Box for complex layouts needing custom dimensions, borders, or backgrounds.
+ */
+export declare const VStack: (props?: VStackProps | undefined) => SpecNode;
+export type VideoProps = Bindable<VideoCatalogProps> & ComponentDirectives;
+/**
+ * Embedded video player with 16:9 aspect ratio
+ */
+export declare const Video: (props: VideoProps) => SpecNode;
+export type WorkEmailProps = Bindable<WorkEmailCatalogProps> & {
+    onChange?: ActionBinding | ActionBinding[];
+    onBlur?: ActionBinding | ActionBinding[];
+    onFocus?: ActionBinding | ActionBinding[];
+    onClick?: ActionBinding | ActionBinding[];
+    onKeydown?: ActionBinding | ActionBinding[];
+    onKeyup?: ActionBinding | ActionBinding[];
+    onPaste?: ActionBinding | ActionBinding[];
+    onMouseenter?: ActionBinding | ActionBinding[];
+    onMouseleave?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * A specialized email input for entering work email addresses, featuring a domain suffix dropdown selector so users type only the username while choosing from a predefined list of company domains
+ */
+export declare const WorkEmail: (props?: WorkEmailProps | undefined) => SpecNode;
+export type AnalyticsCardProps = Bindable<AnalyticsCardCatalogProps> & {
+    onConfigure?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Dashboard tile chrome with a fixed header (start: heading + sub-heading; end: optional configure button) and a children body. The header renders immediately when the spec lands so the chrome is visible while the body subtree resolves its run_query data through a WithSpinner. Use this instead of the legacy Card for every dashboard tile (KPI, visual chart, grid).
+ */
+export declare const AnalyticsCard: (props: AnalyticsCardProps) => SpecNode;
+export type ResizableBoardProps = Bindable<ResizableBoardCatalogProps> & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Resizable dashboard board for AI widget layouts. Wraps each child in a Pebble ResizableBoard block.
+ */
+export declare const ResizableBoard: (props: ResizableBoardProps) => SpecNode;
+export type EChartProps = Bindable<EChartCatalogProps> & {
+    onClick?: ActionBinding | ActionBinding[];
+    onLegendChange?: ActionBinding | ActionBinding[];
+    onDataZoomChange?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * Raw ECharts renderer for SDUI. Provide a JSON-safe ECharts option object. It fills its parent card by default and keeps a usable minimum height when no fixed parent height exists; optional height/width can override sizing.
+ */
+export declare const EChart: (props: EChartProps) => SpecNode;
+export type RichTextProps = Bindable<RichTextCatalogProps> & ComponentDirectives;
+/**
+ * Read-only HTML content rendered with the shared RichTextEditor (non-editable). Generic SDUI building block for narrative or explanatory copy in any product layout.
+ */
+export declare const RichText: (props: RichTextProps) => SpecNode;
+export type DashboardRichTextProps = Bindable<DashboardRichTextCatalogProps> & ComponentDirectives;
+/**
+ * Deprecated alias for RichText. Same props; prefer type `RichText` in new specs.
+ */
+export declare const DashboardRichText: (props: DashboardRichTextProps) => SpecNode;
+export type CustomObjectGridProps = Bindable<CustomObjectGridCatalogProps> & ComponentDirectives;
+/**
+ * Auto-fetching grid for Rippling Custom Objects. Provide objectApiName and fieldApiNames to display records with auto-generated columns, pagination, sorting, and field-type formatting. Increment refreshKey to force a data refresh after mutations.
+ */
+export declare const CustomObjectGrid: (props: CustomObjectGridProps) => SpecNode;
+export type ObjectListViewProps = Bindable<ObjectListViewCatalogProps> & ComponentDirectives;
+/**
+ * Full-featured object list page with list view management. Supports multiple list views, view switching, inline editing, bulk actions, and record management. Use objectApiName to specify the object. Optionally set defaultListViewId to pre-select a specific list view.
+ */
+export declare const ObjectListView: (props: ObjectListViewProps) => SpecNode;
+export type BarChartProps = Bindable<BarChartCatalogProps> & {
+    onBarClick?: ActionBinding | ActionBinding[];
+} & ComponentDirectives;
+/**
+ * Vertical bar chart powered by ECharts. Provide series (name + data array) and optional categories for the x-axis. Use showStackedPercent for 100%-stacked bars, showBarLabel to render values on bars, and showLegend to display a series legend. Use $bindState on selected to capture the clicked bar.
+ */
+export declare const BarChart: (props: BarChartProps) => SpecNode;
+export type LineChartProps = Bindable<LineChartCatalogProps> & ComponentDirectives;
+/**
+ * Line chart powered by ECharts. Provide series (name + data array) and optional categories for the x-axis. Use connectNulls to bridge null gaps, showAreaPercent for 100%-stacked area, and showLegend to display a series legend.
+ */
+export declare const LineChart: (props: LineChartProps) => SpecNode;
+export type HorizontalBarChartProps = Bindable<HorizontalBarChartCatalogProps> & ComponentDirectives;
+/**
+ * Horizontal bar chart powered by ECharts. Same data shape as BarChart but renders bars horizontally. Categories appear on the y-axis and values on the x-axis.
+ */
+export declare const HorizontalBarChart: (props: HorizontalBarChartProps) => SpecNode;
+export type CombinationChartProps = Bindable<CombinationChartCatalogProps> & ComponentDirectives;
+/**
+ * Combination chart with bars and lines on dual Y-axes. Bars use the left Y-axis by default; lines can use the right Y-axis via yAxisIndex: 1.
+ */
+export declare const CombinationChart: (props: CombinationChartProps) => SpecNode;
+export type PieChartProps = Bindable<PieChartCatalogProps> & ComponentDirectives;
+/**
+ * Pie / donut chart. Each series entry has a data array of {name, value} pairs. Use radius: ["50%", "70%"] for a donut hole.
+ */
+export declare const PieChart: (props: PieChartProps) => SpecNode;
+export type ScatterChartProps = Bindable<ScatterChartCatalogProps> & ComponentDirectives;
+/**
+ * Scatter plot. Each series contains [x, y] data pairs plotted as individual points.
+ */
+export declare const ScatterChart: (props: ScatterChartProps) => SpecNode;
+export type FunnelChartProps = Bindable<FunnelChartCatalogProps> & ComponentDirectives;
+/**
+ * Funnel chart for conversion or stage-based data. Data items are ordered by value (largest at top).
+ */
+export declare const FunnelChart: (props: FunnelChartProps) => SpecNode;
+export type GaugeChartProps = Bindable<GaugeChartCatalogProps> & ComponentDirectives;
+/**
+ * Gauge (speedometer) chart. Displays a single numeric value against colored segments. Segments define the scale breakpoints and their colors.
+ */
+export declare const GaugeChart: (props: GaugeChartProps) => SpecNode;
+export type SunburstChartProps = Bindable<SunburstChartCatalogProps> & ComponentDirectives;
+/**
+ * Sunburst (multi-level pie) chart for hierarchical data. Each node has a name, optional value, and optional children array.
+ */
+export declare const SunburstChart: (props: SunburstChartProps) => SpecNode;
+export type WithSpinnerProps = Bindable<WithSpinnerCatalogProps> & {
+    onLoad?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & {
+    children?: SpecNode | SpecNode[];
+};
+/**
+ * Wrapper that shows a spinner while loading. Emits `load` once on mount so a handler can start fetching data. Renders children only when `isLoading` is false.
+ */
+export declare const WithSpinner: (props: WithSpinnerProps) => SpecNode;
+export type RadarChartProps = Bindable<RadarChartCatalogProps> & ComponentDirectives;
+/**
+ * Radar (spider) chart for comparing multiple variables across categories. Each indicator defines a spoke axis. Provide radarIndicators (axis definitions) and radarOptions (series data).
+ */
+export declare const RadarChart: (props: RadarChartProps) => SpecNode;
+export type RadarFilledChartProps = Bindable<RadarFilledChartCatalogProps> & ComponentDirectives;
+/**
+ * Radar chart with filled area between data points and the center. Same data shape as RadarChart but renders with semi-transparent area fill for each series.
+ */
+export declare const RadarFilledChart: (props: RadarFilledChartProps) => SpecNode;
+export type HeatmapCalendarChartProps = Bindable<HeatmapCalendarChartCatalogProps> & ComponentDirectives;
+/**
+ * Calendar heatmap chart that renders data points on a calendar grid. Each cell represents a day, colored by value intensity. Provide heatmapOptions with [date, value] data and calendarOptions with a date range.
+ */
+export declare const HeatmapCalendarChart: (props: HeatmapCalendarChartProps) => SpecNode;
+export type HeatmapChartProps = Bindable<HeatmapChartCatalogProps> & ComponentDirectives;
+/**
+ * Grid-based heatmap chart for showing magnitude across two dimensions. Data format: [[xIndex, yIndex, value], …]. Provide category labels for both axes.
+ */
+export declare const HeatmapChart: (props: HeatmapChartProps) => SpecNode;
+export type TreemapChartProps = Bindable<TreemapChartCatalogProps> & ComponentDirectives;
+/**
+ * Treemap chart for visualizing hierarchical data as nested rectangles. Each node has a name and either a numeric value (leaf) or children (branch). Rectangle size represents the value.
+ */
+export declare const TreemapChart: (props: TreemapChartProps) => SpecNode;
+export type SqlHighlightProps = Bindable<SqlHighlightCatalogProps> & ComponentDirectives;
+/**
+ * Read-only SQL syntax highlighter powered by Monaco Editor. Renders a formatted, non-editable SQL block with auto-height based on line count and a max height cap.
+ */
+export declare const SqlHighlight: (props: SqlHighlightProps) => SpecNode;
+export {};
 //# sourceMappingURL=components.d.mts.map