@texturehq/edges 1.13.0 → 1.13.1

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-8T44SFVa.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-8T44SFVa.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, 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 { Virtualizer } from '@tanstack/react-virtual';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ScaleTime, ScaleLinear } from 'd3-scale';
@@ -743,6 +743,289 @@ declare function isExportSupported(type: ExportType): boolean;
  */
 declare function getExportFormatName(type: ExportType): string;
 
+/**
+ * Data Controls Types
+ *
+ * Core type definitions for client-side and server-side data filtering,
+ * sorting, faceting, and search operations.
+ */
+type FilterOperator = "eq" | "neq" | "in" | "nin" | "gt" | "gte" | "lt" | "lte" | "contains" | "startsWith" | "endsWith";
+interface FilterCondition {
+    /** Field name (supports nested paths like 'user.profile.name') */
+    field: string;
+    /** Comparison operator */
+    operator: FilterOperator;
+    /** Value to compare against */
+    value: string | number | boolean | (string | number)[];
+}
+interface FilterGroup {
+    /** Logical operator combining conditions */
+    logic: "AND" | "OR";
+    /** Conditions or nested filter groups */
+    conditions: (FilterCondition | FilterGroup)[];
+}
+/** Root filter state - can be empty, a single group, or nested groups */
+type FilterState = FilterGroup | null;
+interface SortState {
+    /** Field to sort by (supports nested paths) */
+    field: string;
+    /** Sort direction */
+    direction: "asc" | "desc";
+}
+interface SearchConfig {
+    /** Search query string */
+    query: string;
+    /** Fields to search across */
+    fields: string[];
+    /** Use fuzzy matching (Fuse.js) - default true */
+    fuzzy?: boolean;
+    /** Fuse.js matching threshold (0.0 = perfect, 1.0 = anything) - default 0.3 */
+    threshold?: number;
+}
+type FacetType = "string" | "number" | "boolean" | "date";
+interface FacetConfig {
+    /** Field name to facet on */
+    field: string;
+    /** Display label for the facet */
+    label: string;
+    /** Data type of the field */
+    type?: FacetType;
+    /** Optional: Provide predefined values for the facet (useful for enums) */
+    values?: Array<{
+        value: string | number;
+        label: string;
+    }>;
+}
+interface FacetCounts {
+    [field: string]: {
+        [value: string]: number;
+    };
+}
+/**
+ * Create a single filter condition
+ */
+declare function createFilter(field: string, operator: FilterOperator, value: string | number | boolean | (string | number)[]): FilterCondition;
+/**
+ * Create a filter group from multiple conditions with AND logic
+ */
+declare function createFilters(conditions: FilterCondition[], logic?: "AND" | "OR"): FilterGroup;
+/**
+ * Create an empty filter state
+ */
+declare function createEmptyFilter(): FilterGroup;
+/**
+ * Check if a filter state is empty (no conditions)
+ */
+declare function isFilterEmpty(filter: FilterState): boolean;
+/**
+ * Convert structured filter state to simple display chips
+ * Used for backward compatibility with existing FilterChips component
+ */
+interface FilterChip {
+    id: string;
+    label: string;
+    value: string;
+}
+declare function filterToChips(filter: FilterState, facetConfigs?: FacetConfig[]): FilterChip[];
+/**
+ * Add a condition to a filter state
+ */
+declare function addFilterCondition(filter: FilterState, condition: FilterCondition): FilterGroup;
+/**
+ * Remove a condition from a filter state by field
+ */
+declare function removeFilterCondition(filter: FilterState, field: string): FilterGroup;
+/**
+ * Get all unique fields being filtered on
+ */
+declare function getFilterFields(filter: FilterState): string[];
+
+interface UseClientDataControlsOptions<T> {
+    /** Raw data to process */
+    data: T[];
+    /** Filter state */
+    filters?: FilterState;
+    /** Sort state */
+    sort?: SortState | null;
+    /** Search configuration */
+    search?: SearchConfig | null;
+    /** Facet configurations */
+    facetConfigs?: FacetConfig[];
+}
+interface UseClientDataControlsResult<T> {
+    /** Processed data (filtered, sorted, searched) */
+    data: T[];
+    /** Facet counts computed from filtered data */
+    facetCounts: FacetCounts;
+    /** Number of results after filtering/searching */
+    resultCount: number;
+}
+/**
+ * useClientDataControls
+ *
+ * Client-side hook for filtering, sorting, searching, and faceting data.
+ * Uses memoization to avoid unnecessary recomputation.
+ *
+ * Operations are applied in this order:
+ * 1. Search (fuzzy or exact matching)
+ * 2. Filter (structured conditions)
+ * 3. Facet computation (on filtered data)
+ * 4. Sort
+ *
+ * @example
+ * ```tsx
+ * const { data, facetCounts, resultCount } = useClientDataControls({
+ *   data: rawData,
+ *   filters: createFilters([
+ *     createFilter('department', 'in', ['Engineering', 'Sales'])
+ *   ]),
+ *   sort: { field: 'name', direction: 'asc' },
+ *   search: { query: searchQuery, fields: ['name', 'email'] },
+ *   facetConfigs: [
+ *     { field: 'department', label: 'Department' },
+ *     { field: 'status', label: 'Status' }
+ *   ]
+ * });
+ * ```
+ */
+declare function useClientDataControls<T>({ data, filters, sort, search, facetConfigs, }: UseClientDataControlsOptions<T>): UseClientDataControlsResult<T>;
+
+interface ServerDataState {
+    filters: FilterState;
+    sort: SortState | null;
+    search: SearchConfig | null;
+}
+interface UseServerDataControlsOptions {
+    /** Filter state */
+    filters: FilterState;
+    /** Sort state */
+    sort: SortState | null;
+    /** Search configuration */
+    search: SearchConfig | null;
+    /** Callback when state changes (debounced for search) */
+    onStateChange: (state: ServerDataState) => void;
+    /** Search debounce delay in ms (default: 300) */
+    searchDebounce?: number;
+}
+/**
+ * useServerDataControls
+ *
+ * Server-side hook that notifies the parent when filter/sort/search state changes.
+ * Search queries are debounced to avoid excessive API calls.
+ *
+ * This hook doesn't manipulate data - it just provides a clean way to:
+ * 1. Debounce search input
+ * 2. Notify when any state changes
+ * 3. Trigger server refetch
+ *
+ * @example
+ * ```tsx
+ * const [filters, setFilters] = useState(null);
+ * const [sort, setSort] = useState({ field: 'name', direction: 'asc' });
+ * const [search, setSearch] = useState({ query: '', fields: ['name'] });
+ *
+ * useServerDataControls({
+ *   filters,
+ *   sort,
+ *   search,
+ *   onStateChange: (state) => {
+ *     // Refetch data with new parameters
+ *     refetch({
+ *       filters: state.filters,
+ *       sort: state.sort,
+ *       search: state.search?.query
+ *     });
+ *   }
+ * });
+ * ```
+ */
+declare function useServerDataControls({ filters, sort, search, onStateChange, searchDebounce, }: UseServerDataControlsOptions): void;
+
+interface UseDataControlsClientOptions<T> {
+    mode: "client";
+    /** Raw data to process (required in client mode) */
+    data: T[];
+    /** Filter state */
+    filters?: FilterState;
+    /** Sort state */
+    sort?: SortState | null;
+    /** Search configuration */
+    search?: SearchConfig | null;
+    /** Facet configurations */
+    facetConfigs?: FacetConfig[];
+}
+interface UseDataControlsServerOptions<T> {
+    mode: "server";
+    /** Data from server (already filtered/sorted) */
+    data: T[];
+    /** Filter state */
+    filters: FilterState;
+    /** Sort state */
+    sort: SortState | null;
+    /** Search configuration */
+    search: SearchConfig | null;
+    /** Callback when state changes (required in server mode) */
+    onStateChange: (state: ServerDataState) => void;
+    /** Search debounce delay in ms (default: 300) */
+    searchDebounce?: number;
+    /** Result count from server */
+    resultCount?: number;
+    /** Facet counts from server */
+    facetCounts?: FacetCounts;
+}
+type UseDataControlsOptions<T> = UseDataControlsClientOptions<T> | UseDataControlsServerOptions<T>;
+interface UseDataControlsResult<T> {
+    /** Processed data (client mode) or server data (server mode) */
+    data: T[];
+    /** Facet counts (computed in client mode, passed through in server mode) */
+    facetCounts: FacetCounts;
+    /** Result count (computed in client mode, passed through in server mode) */
+    resultCount: number;
+}
+/**
+ * useDataControls
+ *
+ * Unified hook for managing data filtering, sorting, searching, and faceting.
+ * Supports both client-side and server-side modes.
+ *
+ * **Client Mode:**
+ * - Processes data locally using pure functions
+ * - Computes facet counts automatically
+ * - Best for datasets < 5000 rows
+ *
+ * **Server Mode:**
+ * - Notifies parent when state changes (debounced for search)
+ * - Passes through server-provided data and counts
+ * - Best for large datasets or complex queries
+ *
+ * @example Client Mode
+ * ```tsx
+ * const { data, facetCounts, resultCount } = useDataControls({
+ *   mode: 'client',
+ *   data: rawData,
+ *   filters: createFilters([...]),
+ *   sort: { field: 'name', direction: 'asc' },
+ *   search: { query: searchQuery, fields: ['name', 'email'] },
+ *   facetConfigs: [{ field: 'department', label: 'Department' }]
+ * });
+ * ```
+ *
+ * @example Server Mode
+ * ```tsx
+ * const { data, facetCounts, resultCount } = useDataControls({
+ *   mode: 'server',
+ *   data: serverData, // Already filtered
+ *   filters,
+ *   sort,
+ *   search,
+ *   resultCount: totalCount,
+ *   facetCounts: serverFacets,
+ *   onStateChange: (state) => refetch(state)
+ * });
+ * ```
+ */
+declare function useDataControls<T>(options: UseDataControlsOptions<T>): UseDataControlsResult<T>;
+
 declare function useDebounce<T>(value: T, delay?: number): T;
 
 type LoadingState = "idle" | "loading" | "loading-more" | "error";
@@ -1370,7 +1653,7 @@ interface CheckboxProps extends Omit<CheckboxProps$1, "children"> {
     children?: ReactNode | ((props: CheckboxRenderProps) => ReactNode);
     /**
      * Visual variant of the checkbox
-     * @default "brand"
+     * @default "default"
      */
     variant?: "default" | "brand";
 }
@@ -1719,12 +2002,16 @@ interface SortOption {
     label: string;
 }
 interface SortControlProps {
-    /** Currently selected sort value */
+    /** Currently selected sort value (field name) */
     value: string;
     /** Available sort options */
     options: SortOption[];
     /** Callback when sort selection changes */
     onChange: (value: string) => void;
+    /** Sort direction (optional, for enhanced mode) */
+    direction?: "asc" | "desc";
+    /** Callback when direction changes (optional, for enhanced mode) */
+    onDirectionChange?: (direction: "asc" | "desc") => void;
     /** Whether to show "Sort by:" label */
     showLabel?: boolean;
     /** Size variant */
@@ -1735,10 +2022,10 @@ interface SortControlProps {
 /**
  * SortControl
  *
- * A dropdown for selecting sort order with optional label.
+ * A dropdown for selecting sort order with optional direction toggle.
  * Wraps Select component with consistent styling for data controls.
  *
- * Example usage:
+ * **Basic Mode (backward compatible):**
  * ```tsx
  * <SortControl
  *   value={sortBy}
@@ -1747,11 +2034,24 @@ interface SortControlProps {
  *     { value: 'date', label: 'Date' }
  *   ]}
  *   onChange={setSortBy}
- *   showLabel={true}
+ * />
+ * ```
+ *
+ * **Enhanced Mode (with direction):**
+ * ```tsx
+ * <SortControl
+ *   value={sortField}
+ *   direction={sortDirection}
+ *   options={[
+ *     { value: 'name', label: 'Name' },
+ *     { value: 'date', label: 'Date' }
+ *   ]}
+ *   onChange={setSortField}
+ *   onDirectionChange={setSortDirection}
  * />
  * ```
  */
-declare function SortControl({ value, options, onChange, showLabel, size, className, }: SortControlProps): react_jsx_runtime.JSX.Element;
+declare function SortControl({ value, options, onChange, direction, onDirectionChange, showLabel, size, className, }: SortControlProps): react_jsx_runtime.JSX.Element;
 
 interface DataControlsProps {
     /** Search configuration */
@@ -1779,6 +2079,8 @@ interface DataControlsProps {
         options: SortOption[];
         onChange: (value: string) => void;
         showLabel?: boolean;
+        direction?: "asc" | "desc";
+        onDirectionChange?: (direction: "asc" | "desc") => void;
     };
     /** Results count configuration */
     resultsCount?: {
@@ -1786,6 +2088,12 @@ interface DataControlsProps {
         label?: string;
         isLoading?: boolean;
     };
+    /** Make controls sticky */
+    sticky?: boolean;
+    /** Sticky top offset - useful when stacking below sticky header (default: "0") */
+    stickyTop?: string;
+    /** Z-index for sticky positioning (default: 10) */
+    zIndex?: number;
     /** Additional CSS classes */
     className?: string;
     /** Inline styles */
@@ -1801,6 +2109,11 @@ interface DataControlsProps {
  * All data operations (search, filter, sort) are handled server-side.
  * This component is purely presentational and controlled.
  *
+ * **Features:**
+ * - Optional sticky positioning for data-heavy pages
+ * - Works with PageLayout sticky headers
+ * - Configurable z-index and offset
+ *
  * **Responsive Behavior:**
  * - Narrow containers (< 640px): Two rows - Row 1: inputs (search + filter icon), Row 2: outputs (results + sort + actions)
  * - Wide containers (≥ 640px): Single row with all controls visible
@@ -1828,7 +2141,55 @@ interface DataControlsProps {
  * ```
  */
 declare function DataControls({ search, searchMobileMode: _searchMobileMode, // Deprecated: kept for backward compatibility
-filters, onRemoveFilter, onClearAllFilters, onManageFilters, maxVisibleFilterChips, sort, resultsCount, className, style, }: DataControlsProps): react_jsx_runtime.JSX.Element | null;
+filters, onRemoveFilter, onClearAllFilters, onManageFilters, maxVisibleFilterChips, sort, resultsCount, sticky, stickyTop, zIndex, className, style, }: DataControlsProps): react_jsx_runtime.JSX.Element | null;
+
+interface FilterDialogProps {
+    /** Whether the dialog is open */
+    isOpen: boolean;
+    /** Callback when dialog is closed */
+    onClose: () => void;
+    /** Facet configurations defining available filters */
+    facetConfigs: FacetConfig[];
+    /** Optional facet counts to display next to options */
+    facetCounts?: FacetCounts;
+    /** Current filter state */
+    currentFilters: FilterState;
+    /** Callback when filters are applied */
+    onApply: (filters: FilterState) => void;
+    /** Optional callback to clear all filters */
+    onClear?: () => void;
+    /** Dialog title */
+    title?: string;
+}
+/**
+ * FilterDialog
+ *
+ * A reusable dialog for applying structured filters to data.
+ * Automatically renders appropriate UI based on facet type and configuration.
+ *
+ * **Supported Facet Types:**
+ * - `string`: Checkbox group for multi-select
+ * - `number`: Min/max range inputs
+ * - `boolean`: Single checkbox
+ *
+ * @example
+ * ```tsx
+ * <FilterDialog
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   facetConfigs={[
+ *     { field: 'department', label: 'Department', type: 'string' },
+ *     { field: 'salary', label: 'Salary', type: 'number' }
+ *   ]}
+ *   facetCounts={{
+ *     department: { Engineering: 10, Sales: 5 }
+ *   }}
+ *   currentFilters={filters}
+ *   onApply={setFilters}
+ * />
+ * ```
+ */
+declare function FilterDialog({ isOpen, onClose, facetConfigs, facetCounts, currentFilters, onApply, onClear, title, }: FilterDialogProps): react_jsx_runtime.JSX.Element;
 
 interface ResultsCountProps {
     /** Number of results/items */
@@ -2409,7 +2770,7 @@ declare function getInputStateStyles(props: {
     isInvalid?: boolean;
     isDisabled?: boolean;
     isFocused?: boolean;
-}): "border rounded-[var(--control-border-radius)] " | "border rounded-[var(--control-border-radius)]  border-border-muted focus:outline-none" | "border rounded-[var(--control-border-radius)]  border-feedback-error-border outline-[1.5px] outline-[var(--control-focus-ring-color-error)]" | "border rounded-[var(--control-border-radius)]  border-feedback-error-border" | "border rounded-[var(--control-border-radius)]  !outline-[1.5px] !outline-[var(--control-focus-ring-color)] ![--tw-outline-style:solid]";
+}): "border rounded-[var(--control-border-radius)] outline-none  border-border-muted" | "border rounded-[var(--control-border-radius)] outline-none  border-feedback-error-border shadow-[inset_0_0_0_1px_var(--color-feedback-error-border)]" | "border rounded-[var(--control-border-radius)] outline-none  border-feedback-error-border" | "border rounded-[var(--control-border-radius)] outline-none  border-border-focus shadow-[inset_0_0_0_1px_var(--color-border-focus)]" | "border rounded-[var(--control-border-radius)] outline-none  border-border-default";
 /**
  * Generates background styles based on the transparent and disabled props.
  * Uses Tailwind classes for consistent styling across light/dark modes.
@@ -3211,6 +3572,15 @@ declare function NumberField({ label, description, errorMessage, size, tooltip,
  *     </PageLayout.Content>
  *   </PageLayout>
  *
+ * With Sticky Header and Scrollable Content (data-heavy pages):
+ *   <PageLayout className="flex flex-col min-h-0">
+ *     <PageLayout.Header title="..." sticky={true} stickyTop="0" />
+ *     <DataControls sticky={true} stickyTop="120px" />
+ *     <PageLayout.ScrollableContent>
+ *       <DataTable data={data} columns={columns} />
+ *     </PageLayout.ScrollableContent>
+ *   </PageLayout>
+ *
  * Notes:
  * - Router-agnostic: Breadcrumbs accept either structured items with a Link component, or a custom ReactNode.
  * - Accessible: Header uses h1; Tabs are roving-`tablist`.
@@ -3218,6 +3588,9 @@ declare function NumberField({ label, description, errorMessage, size, tooltip,
  * - Media support: Header can include hero images, maps, or other visual content.
  * - Actions: Right-aligned on desktop, below subtitle on mobile.
  * - Section nav: Automatically extracts navigation from Section children when withSectionNav is enabled.
+ * - Sticky header support: Make headers sticky for data-heavy pages with scrollable content.
+ * - ScrollableContent helper: Ensures proper overflow handling with sticky elements.
+ * - Works with sticky DataControls: Configurable z-index and offset for complex layouts.
  * - Styling: token-oriented utility classes (match to your Tailwind preset/tokens).
  */
 type PageBreadcrumbItem = BreadcrumbItemProps & {
@@ -3237,6 +3610,7 @@ declare namespace PageLayout {
     var Tabs: typeof Tabs$1;
     var Content: typeof Content;
     var Aside: typeof Aside$1;
+    var ScrollableContent: typeof ScrollableContent;
 }
 type PageHeaderProps = {
     title: React__default.ReactNode;
@@ -3252,9 +3626,15 @@ type PageHeaderProps = {
     actions?: React__default.ReactNode[];
     /** Optional slot to replace the default heading element */
     headingAs?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /** Make header sticky at top of viewport */
+    sticky?: boolean;
+    /** Sticky top offset in pixels or CSS value (default: "0") */
+    stickyTop?: string;
+    /** Z-index for sticky positioning (default: 10) */
+    zIndex?: number;
     className?: string;
 };
-declare function Header({ title, subtitle, breadcrumbs, breadcrumbsNode, meta, media, actions, headingAs, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+declare function Header({ title, subtitle, breadcrumbs, breadcrumbsNode, meta, media, actions, headingAs, sticky, stickyTop, zIndex, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
 type PageLayoutTab = {
     id: string;
     label: React__default.ReactNode;
@@ -3295,6 +3675,28 @@ type PageAsideProps = {
     className?: string;
 };
 declare function Aside$1({ children, sticky, className }: PageAsideProps): react_jsx_runtime.JSX.Element;
+type PageScrollableContentProps = {
+    children: React__default.ReactNode;
+    className?: string;
+};
+/**
+ * ScrollableContent
+ *
+ * Helper component for creating scrollable content areas within PageLayout.
+ * Commonly used with sticky headers and controls for data-heavy pages.
+ *
+ * Example usage:
+ * ```tsx
+ * <PageLayout className="flex flex-col h-screen">
+ *   <PageLayout.Header sticky={true} />
+ *   <DataControls sticky={true} stickyTop="120px" />
+ *   <PageLayout.ScrollableContent>
+ *     <DataTable data={data} columns={columns} />
+ *   </PageLayout.ScrollableContent>
+ * </PageLayout>
+ * ```
+ */
+declare function ScrollableContent({ children, className }: PageScrollableContentProps): react_jsx_runtime.JSX.Element;
 
 interface Place {
     id: string;
@@ -4096,4 +4498,4 @@ 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, FieldError, type FieldErrorProps, FieldFormat, FieldGroup, type FieldGroupProps, FieldValue, FilterChips, type FilterChipsProps, 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, PhoneFormat, PlaceSearch, Popover, PowerFormat, ProgressBar, Radio, RadioCard, RadioCardGroup, type RadioCardGroupProps, type RadioCardProps, RadioGroup, RangeCalendar, RasterLayerSpec, ResistanceFormat, type ResponsiveValue, ResultsCount, type ResultsCountProps, SKELETON_SIZES, 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, 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 UseInfiniteScrollOptions, type UseInfiniteScrollReturn, VectorLayerSpec, VoltageFormat, YFormatType, autoScaleCurrent, autoScaleDistance, autoScaleEnergy, autoScalePower, autoScaleResistance, autoScaleVoltage, camelCaseToWords, capitalize, celsiusToFahrenheit, celsiusToKelvin, centimetersToInches, createFormat, enumToSentenceCase, exportChart, fahrenheitToCelsius, fahrenheitToKelvin, feetToMeters, feetToMiles, 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, getInputBackgroundStyles, getInputBaseStyles, getInputStateStyles, getNumericColorClasses, getSkeletonSize, inchesToCentimeters, isCustomPinsLayer, isExportSupported, isGeoJsonLayer, isNil, isRasterLayer, isVectorLayer, kelvinToCelsius, kelvinToFahrenheit, kilometersToMiles, layer, metersToFeet, metersToMiles, metersToYards, milesToFeet, milesToKilometers, milesToMeters, parseBoolean, resolveValue, snakeCaseToWords, temperatureStringToSymbol, toA, toActiveInactive, toAmps, toBoolean, toCelsius, toCentimeters, toCheckmark, toCompactNumber, toCurrency, toCustomDateFormat, toDateString, toEnabledDisabled, toFahrenheit, toFeet, toFloat, toFormattedNumber, toFullDateTime, toGW, toGWh, toGigawatts, toISOString, toInches, toInteger, toKA, toKV, toKW, toKelvin, toKiloamps, toKilohms, toKilometers, toKilovolts, toKilowatts, toLowerCase, toMA, toMV, toMW, toMWh, toMegawatts, toMegohms, toMeters, toMiles, toMilliamps, toMillimeters, toMilliohms, toMillivolts, toNauticalMiles, toOhms, toOnOff, toPercentage, toRelativeTime, toScientificNotation, toSecret, toSentenceCase, toTemperature, toTitleCase, toTrueFalse, toUpperCase, toV, toVolts, toW, toWatts, toWh, toYards, tokWh, truncateEnd, truncateMiddle, truncateStart, ucFirst, useBreakpoint, useColorMode, useDebounce, useInfiniteScroll, useInputFocus, useLocalStorage, useMediaQuery, useNotice, yardsToMeters };
+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 };