@shipfox/react-ui 0.22.0 → 0.24.0

package/dist/components/dashboard/context/dashboard-context.d.ts

@@ -2,10 +2,14 @@
  * Dashboard Context Provider
  *
  * Provides centralized state management for dashboard components including
- * search, filters, column visibility, time period, and sidebar navigation.
+ * search, filters, column visibility, time interval, and sidebar navigation.
  */
+import type { IntervalSelection } from '../../../components/interval-selector';
 import { type ReactNode } from 'react';
-import type { DashboardState, FilterOption, ResourceType, TimePeriod, ViewColumn } from './types';
+import type { DashboardState, FilterOption, ResourceType, ResourceTypeOption, ViewColumn } from './types';
+export declare const RESOURCE_TYPES: Array<ResourceType>;
+export declare const RESOURCE_TYPE_LABELS: Record<ResourceType, string>;
+export declare const RESOURCE_TYPE_OPTIONS: ResourceTypeOption[];
 export interface DashboardProviderProps {
     children: ReactNode;
     /**
@@ -19,10 +23,10 @@ export interface DashboardProviderProps {
      */
     initialFilters?: FilterOption[];
     /**
-     * Initial time period
-     * @default '2days'
+     * Initial time interval selection
+     * @default { type: 'relative', duration: {days: 7} }
      */
-    initialTimePeriod?: TimePeriod;
+    initialSelection?: IntervalSelection;
     /**
      * Initial active sidebar item
      * @default 'reliability'
@@ -30,7 +34,7 @@ export interface DashboardProviderProps {
     initialActiveSidebarItem?: string;
     /**
      * Initial resource type
-     * @default 'ci-pipeline'
+     * @default 'ci.pipeline'
      */
     initialResourceType?: ResourceType;
     /**
@@ -46,12 +50,12 @@ export interface DashboardProviderProps {
  *
  * @example
  * ```tsx
- * <DashboardProvider initialTimePeriod="7days">
+ * <DashboardProvider initialInterval={intervalToNowFromDuration({days: 7})}>
  *   <AnalyticsContent />
  * </DashboardProvider>
  * ```
  */
-export declare function DashboardProvider({ children, initialColumns, initialFilters, initialTimePeriod, initialActiveSidebarItem, initialResourceType, columnMapping, }: DashboardProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DashboardProvider({ children, initialColumns, initialFilters, initialSelection, initialActiveSidebarItem, initialResourceType, columnMapping, }: DashboardProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Hook to access dashboard context
  *

package/dist/components/dashboard/context/dashboard-context.js

@@ -2,7 +2,7 @@
  * Dashboard Context Provider
  *
  * Provides centralized state management for dashboard components including
- * search, filters, column visibility, time period, and sidebar navigation.
+ * search, filters, column visibility, time interval, and sidebar navigation.
  */ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { updateViewColumnsFromVisibility, viewColumnsToVisibilityState } from './utils.js';
@@ -85,6 +85,37 @@ const DashboardContext = /*#__PURE__*/ createContext(undefined);
         checked: false
     }
 ];
+export const RESOURCE_TYPES = [
+    'ci.pipeline',
+    'ci.job',
+    'ci.step',
+    'test.run',
+    'test.suite',
+    'test.case'
+];
+export const RESOURCE_TYPE_LABELS = {
+    'ci.pipeline': 'CI Pipeline',
+    'ci.job': 'CI Job',
+    'ci.step': 'CI Step',
+    'test.run': 'Test Run',
+    'test.suite': 'Test Suite',
+    'test.case': 'Test Case'
+};
+export const RESOURCE_TYPE_OPTIONS = [
+    ...RESOURCE_TYPES.map((type)=>({
+            id: type,
+            label: RESOURCE_TYPE_LABELS[type],
+            disabled: type.startsWith('test.')
+        }))
+];
+/**
+ * Default selection (relative: last 7 days)
+ */ const DEFAULT_SELECTION = {
+    type: 'relative',
+    duration: {
+        days: 7
+    }
+};
 /**
  * Dashboard Provider Component
  *
@@ -92,19 +123,22 @@ const DashboardContext = /*#__PURE__*/ createContext(undefined);
  *
  * @example
  * ```tsx
- * <DashboardProvider initialTimePeriod="7days">
+ * <DashboardProvider initialInterval={intervalToNowFromDuration({days: 7})}>
  *   <AnalyticsContent />
  * </DashboardProvider>
  * ```
- */ export function DashboardProvider({ children, initialColumns = DEFAULT_COLUMNS, initialFilters = DEFAULT_FILTERS, initialTimePeriod = '2days', initialActiveSidebarItem = 'reliability', initialResourceType = 'ci-pipeline', columnMapping }) {
+ */ export function DashboardProvider({ children, initialColumns = DEFAULT_COLUMNS, initialFilters = DEFAULT_FILTERS, initialSelection = DEFAULT_SELECTION, initialActiveSidebarItem = 'reliability', initialResourceType = 'ci.pipeline', columnMapping }) {
     // State management
     const [searchQuery, setSearchQuery] = useState('');
-    const [timePeriod, setTimePeriod] = useState(initialTimePeriod);
+    const [selection, setSelection] = useState(initialSelection);
     const [lastUpdated, setLastUpdated] = useState('13s ago');
     const [columns, setColumns] = useState(initialColumns);
     const [filters, setFilters] = useState(initialFilters);
     const [activeSidebarItem, setActiveSidebarItem] = useState(initialActiveSidebarItem);
     const [resourceType, setResourceType] = useState(initialResourceType);
+    const handleSelectionChange = useCallback((newSelection)=>{
+        setSelection(newSelection);
+    }, []);
     // Compute column visibility state
     const columnVisibility = useMemo(()=>viewColumnsToVisibilityState(columns, columnMapping), [
         columns,
@@ -121,8 +155,8 @@ const DashboardContext = /*#__PURE__*/ createContext(undefined);
     const value = useMemo(()=>({
             searchQuery,
             setSearchQuery,
-            timePeriod,
-            setTimePeriod,
+            selection,
+            setSelection: handleSelectionChange,
             lastUpdated,
             setLastUpdated,
             columns,
@@ -137,7 +171,8 @@ const DashboardContext = /*#__PURE__*/ createContext(undefined);
             setResourceType
         }), [
         searchQuery,
-        timePeriod,
+        selection,
+        handleSelectionChange,
         lastUpdated,
         columns,
         columnVisibility,

package/dist/components/dashboard/context/index.d.ts

@@ -2,7 +2,7 @@
  * Dashboard Context exports
  */
 export type { DashboardProviderProps } from './dashboard-context';
-export { DashboardProvider, useDashboardContext } from './dashboard-context';
-export type { DashboardState, FilterOption, ResourceType, TimePeriod, ViewColumn } from './types';
+export { DashboardProvider, RESOURCE_TYPE_LABELS, RESOURCE_TYPE_OPTIONS, RESOURCE_TYPES, useDashboardContext, } from './dashboard-context';
+export type { DashboardState, FilterOption, ResourceType, ResourceTypeOption, ViewColumn, } from './types';
 export { DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, viewColumnsToVisibilityState, } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/dashboard/context/index.js

@@ -1,6 +1,6 @@
 /**
  * Dashboard Context exports
- */ export { DashboardProvider, useDashboardContext } from './dashboard-context.js';
+ */ export { DashboardProvider, RESOURCE_TYPE_LABELS, RESOURCE_TYPE_OPTIONS, RESOURCE_TYPES, useDashboardContext } from './dashboard-context.js';
 export { DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, viewColumnsToVisibilityState } from './utils.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/dashboard/context/types.d.ts

@@ -2,6 +2,7 @@
  * Shared types for dashboard components
  */
 import type { VisibilityState } from '@tanstack/react-table';
+import type { IntervalSelection } from '../../../components/interval-selector';
 /**
  * View column configuration for table visibility control
  */
@@ -18,22 +19,23 @@ export interface FilterOption {
     label: string;
     checked: boolean;
 }
-/**
- * Time period option
- */
-export type TimePeriod = '1hour' | '1day' | '2days' | '7days' | '30days';
+export type ResourceType = 'ci.pipeline' | 'ci.job' | 'ci.step' | 'test.run' | 'test.suite' | 'test.case';
 /**
  * Resource type option
  */
-export type ResourceType = 'ci-pipeline' | 'ci-jobs' | 'ci-steps' | 'runners' | 'suite' | 'cases';
+export interface ResourceTypeOption {
+    id: ResourceType;
+    label: string;
+    disabled?: boolean;
+}
 /**
  * Dashboard context state
  */
 export interface DashboardState {
     searchQuery: string;
     setSearchQuery: (query: string) => void;
-    timePeriod: TimePeriod;
-    setTimePeriod: (period: TimePeriod) => void;
+    selection: IntervalSelection;
+    setSelection: (selection: IntervalSelection) => void;
     lastUpdated: string;
     setLastUpdated: (timestamp: string) => void;
     columns: ViewColumn[];

package/dist/components/dashboard/index.d.ts

@@ -7,12 +7,10 @@ export type { MobileSidebarProps } from './components/mobile-sidebar';
 export { MobileSidebar } from './components/mobile-sidebar';
 export type { SidebarNavItem, SidebarProps } from './components/sidebar';
 export { defaultSidebarItems, Sidebar } from './components/sidebar';
-export type { DashboardProviderProps, DashboardState, FilterOption, ResourceType, TimePeriod, ViewColumn, } from './context';
-export { DashboardProvider, DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, useDashboardContext, viewColumnsToVisibilityState, } from './context';
+export type { DashboardProviderProps, DashboardState, FilterOption, ResourceType, ViewColumn, } from './context';
+export { DashboardProvider, DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, RESOURCE_TYPE_OPTIONS, updateViewColumnsFromVisibility, useDashboardContext, viewColumnsToVisibilityState, } from './context';
 export type { DashboardProps } from './dashboard';
 export { Dashboard } from './dashboard';
-export type { ExpressionFilterBarProps, ResourceTypeOption } from './filters';
-export { ExpressionFilterBar } from './filters';
 export { AnalyticsPage, JobsPage } from './pages';
 export type { TableWrapperProps } from './table';
 export { TableWrapper } from './table';

package/dist/components/dashboard/index.js

@@ -3,9 +3,8 @@ export { DashboardAlert } from './components/dashboard-alert.js';
 export { KpiCard, KpiCardsGroup } from './components/kpi-card.js';
 export { MobileSidebar } from './components/mobile-sidebar.js';
 export { defaultSidebarItems, Sidebar } from './components/sidebar.js';
-export { DashboardProvider, DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, useDashboardContext, viewColumnsToVisibilityState } from './context/index.js';
+export { DashboardProvider, DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, RESOURCE_TYPE_OPTIONS, updateViewColumnsFromVisibility, useDashboardContext, viewColumnsToVisibilityState } from './context/index.js';
 export { Dashboard } from './dashboard.js';
-export { ExpressionFilterBar } from './filters/index.js';
 export { AnalyticsPage, JobsPage } from './pages/index.js';
 export { TableWrapper } from './table/index.js';
 export { FilterButton, PageToolbar, ToolbarActions, ToolbarSearch, ViewDropdown } from './toolbar/index.js';

package/dist/components/dashboard/pages/analytics-page.js

@@ -15,7 +15,6 @@ import { KpiCardsGroup } from '../components/kpi-card.js';
 import { MobileSidebar } from '../components/mobile-sidebar.js';
 import { defaultSidebarItems, Sidebar } from '../components/sidebar.js';
 import { useDashboardContext } from '../context/index.js';
-import { ExpressionFilterBar } from '../filters/index.js';
 import { TableWrapper } from '../table/index.js';
 import { PageToolbar, ToolbarActions } from '../toolbar/index.js';
 const performanceData = [
@@ -147,7 +146,7 @@ const kpiCards = [
     }
 ];
 export function AnalyticsPage() {
-    const { searchQuery, setSearchQuery, timePeriod, setTimePeriod, lastUpdated, columnVisibility, updateColumnVisibility, activeSidebarItem, setActiveSidebarItem, resourceType, setResourceType } = useDashboardContext();
+    const { searchQuery, setSearchQuery, columnVisibility, updateColumnVisibility, activeSidebarItem, setActiveSidebarItem } = useDashboardContext();
     const isDesktop = useMediaQuery('(min-width: 1024px)');
     const [performanceTimeRange, setPerformanceTimeRange] = useState('2h');
     const pageTitle = useMemo(()=>{
@@ -164,9 +163,7 @@ export function AnalyticsPage() {
         children: [
             /*#__PURE__*/ _jsx(PageToolbar, {
                 title: pageTitle,
-                timePeriod: timePeriod,
-                onTimePeriodChange: setTimePeriod,
-                lastUpdated: lastUpdated,
+                onRefresh: ()=>undefined,
                 children: !isDesktop && /*#__PURE__*/ _jsx(MobileSidebar, {
                     items: defaultSidebarItems,
                     activeItemId: activeSidebarItem,
@@ -196,10 +193,6 @@ export function AnalyticsPage() {
                                     onClick: ()=>undefined
                                 }
                             }),
-                            /*#__PURE__*/ _jsx(ExpressionFilterBar, {
-                                value: resourceType,
-                                onValueChange: setResourceType
-                            }),
                             /*#__PURE__*/ _jsx(ToolbarActions, {}),
                             /*#__PURE__*/ _jsx(KpiCardsGroup, {
                                 cards: kpiCards

package/dist/components/dashboard/pages/jobs-page.js

@@ -9,7 +9,7 @@ import { useDashboardContext } from '../context/index.js';
 import { TableWrapper } from '../table/index.js';
 import { PageToolbar } from '../toolbar/index.js';
 export function JobsPage() {
-    const { searchQuery, setSearchQuery, timePeriod, setTimePeriod, lastUpdated, columnVisibility, updateColumnVisibility } = useDashboardContext();
+    const { searchQuery, setSearchQuery, columnVisibility, updateColumnVisibility } = useDashboardContext();
     const filteredData = useMemo(()=>jobsData.filter((job)=>job.name.toLowerCase().includes(searchQuery.toLowerCase())), [
         searchQuery
     ]);
@@ -18,9 +18,7 @@ export function JobsPage() {
         children: [
             /*#__PURE__*/ _jsx(PageToolbar, {
                 title: "Jobs",
-                timePeriod: timePeriod,
-                onTimePeriodChange: setTimePeriod,
-                lastUpdated: lastUpdated
+                onRefresh: ()=>undefined
             }),
             /*#__PURE__*/ _jsx("div", {
                 className: "flex-1 px-12 pb-12 pt-4 md:px-24 md:pb-24 overflow-auto",

package/dist/components/dashboard/toolbar/filter-button.d.ts

@@ -1,12 +1,8 @@
-export interface FilterOption {
-    id: string;
-    label: string;
-    checked: boolean;
+import type { HTMLAttributes } from 'react';
+import type { ResourceType } from '../context/types';
+export interface FilterButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    value: ResourceType;
+    onValueChange: (value: ResourceType) => void;
 }
-export interface FilterButtonProps {
-    filters?: FilterOption[];
-    onFiltersChange?: (filters: FilterOption[]) => void;
-    className?: string;
-}
-export declare function FilterButton({ filters: controlledFilters, onFiltersChange, className, }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterButton({ value, onValueChange, className, ...props }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=filter-button.d.ts.map

package/dist/components/dashboard/toolbar/filter-button.js

@@ -1,73 +1,66 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '../../../components/button/index.js';
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
-import { Icon } from '../../../components/icon/index.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
 import { Kbd } from '../../../components/kbd/index.js';
 import { useEffect, useState } from 'react';
 import { cn } from '../../../utils/cn.js';
-const defaultFilters = [
-    {
-        id: 'success',
-        label: 'Success',
-        checked: false
-    },
-    {
-        id: 'failed',
-        label: 'Failed',
-        checked: false
-    },
-    {
-        id: 'neutral',
-        label: 'Neutral',
-        checked: false
-    },
-    {
-        id: 'flaked',
-        label: 'Flaked',
-        checked: false
-    },
-    {
-        id: 'running',
-        label: 'Running',
-        checked: false
-    }
-];
-export function FilterButton({ filters: controlledFilters, onFiltersChange, className }) {
-    const [internalFilters, setInternalFilters] = useState(defaultFilters);
+import { RESOURCE_TYPE_LABELS, RESOURCE_TYPE_OPTIONS } from '../context/index.js';
+export function FilterButton({ value, onValueChange, className, ...props }) {
     const [open, setOpen] = useState(false);
-    const filters = controlledFilters ?? internalFilters;
-    const handleFilterChange = (filterId, checked)=>{
-        const updatedFilters = filters.map((f)=>f.id === filterId ? {
-                ...f,
-                checked
-            } : f);
-        if (onFiltersChange) {
-            onFiltersChange(updatedFilters);
-        } else {
-            setInternalFilters(updatedFilters);
+    const filterOptions = RESOURCE_TYPE_OPTIONS.filter((opt)=>!opt.disabled);
+    const normalizedValue = filterOptions.some((opt)=>opt.id === value) ? value : filterOptions[0]?.id ?? value;
+    const selectedLabel = RESOURCE_TYPE_LABELS[normalizedValue] ?? normalizedValue;
+    const selectedIndex = filterOptions.findIndex((opt)=>opt.id === normalizedValue);
+    const handleFilterChange = (filterId)=>{
+        onValueChange(filterId);
+        setOpen(false);
+    };
+    const indicator = (index)=>{
+        if (index === 0) {
+            return /*#__PURE__*/ _jsx("span", {
+                className: "size-[8.3px] rotate-45 border border-tag-purple-icon"
+            });
+        }
+        return /*#__PURE__*/ _jsx("span", {
+            className: "size-10 rounded-full border border-tag-neutral-icon"
+        });
+    };
+    const calculatePaddingLeft = (index)=>{
+        switch(index){
+            case 0:
+                return 10;
+            case 1:
+                return 28;
+            case 2:
+                return 48;
+            default:
+                return 0;
+        }
+    };
+    const calculateLeftPosition = (index)=>{
+        switch(index){
+            case 0:
+                return 0;
+            case 1:
+                return 16;
+            case 2:
+                return 34;
+            default:
+                return 0;
         }
     };
-    const activeCount = filters.filter((f)=>f.checked).length;
-    // Keyboard shortcut handler for "F" key
     useEffect(()=>{
         const handleKeyDown = (event)=>{
-            // Check if key is 'f' or 'F'
-            if (event.key !== 'f' && event.key !== 'F') {
-                return;
-            }
-            // Ignore if event is from input, textarea, or contentEditable
-            const target = event.target;
-            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-                return;
+            if (event.key === 'ArrowDown' && (event.metaKey || event.ctrlKey) && event.target instanceof HTMLElement && ![
+                'INPUT',
+                'TEXTAREA'
+            ].includes(event.target.tagName) && !event.target.isContentEditable) {
+                event.preventDefault();
+                setOpen(true);
             }
-            // Open the dropdown
-            event.preventDefault();
-            setOpen(true);
         };
         window.addEventListener('keydown', handleKeyDown);
-        return ()=>{
-            window.removeEventListener('keydown', handleKeyDown);
-        };
+        return ()=>window.removeEventListener('keydown', handleKeyDown);
     }, []);
     return /*#__PURE__*/ _jsxs(DropdownMenu, {
         open: open,
@@ -78,25 +71,35 @@ export function FilterButton({ filters: controlledFilters, onFiltersChange, clas
                 children: /*#__PURE__*/ _jsxs(Button, {
                     variant: "secondary",
                     size: "sm",
-                    className: cn(className),
+                    className: cn('px-10', className),
+                    ...props,
                     children: [
-                        /*#__PURE__*/ _jsx(Icon, {
-                            name: "filterLine",
-                            className: "size-16 text-foreground-neutral-subtle block md:hidden"
-                        }),
                         /*#__PURE__*/ _jsxs("span", {
                             className: "hidden md:inline-flex items-center gap-6",
                             children: [
-                                "Filter ",
+                                /*#__PURE__*/ _jsxs("span", {
+                                    className: "inline-flex items-center gap-8",
+                                    children: [
+                                        selectedIndex >= 0 && indicator(selectedIndex),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: selectedLabel
+                                        })
+                                    ]
+                                }),
                                 /*#__PURE__*/ _jsx(Kbd, {
                                     className: "h-16 min-w-16 px-4 text-[10px]",
-                                    children: "F"
+                                    children: "⌘↓"
                                 })
                             ]
                         }),
-                        activeCount > 0 && /*#__PURE__*/ _jsx("span", {
-                            className: "size-16 rounded-full bg-foreground-highlight-interactive text-[10px] font-medium text-foreground-neutral-on-color flex items-center justify-center",
-                            children: activeCount
+                        /*#__PURE__*/ _jsxs("span", {
+                            className: "flex md:hidden items-center gap-8",
+                            children: [
+                                selectedIndex >= 0 && indicator(selectedIndex),
+                                /*#__PURE__*/ _jsx("span", {
+                                    children: selectedLabel
+                                })
+                            ]
                         })
                     ]
                 })
@@ -106,15 +109,45 @@ export function FilterButton({ filters: controlledFilters, onFiltersChange, clas
                 className: "w-200",
                 children: [
                     /*#__PURE__*/ _jsx(DropdownMenuLabel, {
-                        children: "Status"
+                        className: "text-foreground-neutral-muted text-xs",
+                        children: "CI Structure"
                     }),
-                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
-                    filters.map((filter)=>/*#__PURE__*/ _jsx(DropdownMenuCheckboxItem, {
-                            checked: filter.checked,
-                            onCheckedChange: (checked)=>handleFilterChange(filter.id, checked),
-                            closeOnSelect: false,
-                            children: filter.label
-                        }, filter.id))
+                    /*#__PURE__*/ _jsx(DropdownMenuGroup, {
+                        children: filterOptions.map((option, index)=>{
+                            return /*#__PURE__*/ _jsxs(DropdownMenuItem, {
+                                onClick: ()=>handleFilterChange(option.id),
+                                style: {
+                                    paddingLeft: calculatePaddingLeft(index)
+                                },
+                                className: cn('relative hover:text-foreground-neutral-base', selectedIndex === index && 'text-foreground-neutral-base'),
+                                children: [
+                                    index !== 0 && /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "absolute top-0 bottom-0 w-px bg-border-neutral-strong h-16",
+                                                style: {
+                                                    left: calculateLeftPosition(index)
+                                                }
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "absolute top-16 bottom-0 w-6 bg-border-neutral-strong h-px",
+                                                style: {
+                                                    left: calculateLeftPosition(index)
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: "inline-flex items-center gap-8 ml-2",
+                                        children: [
+                                            indicator(index),
+                                            option.label
+                                        ]
+                                    })
+                                ]
+                            }, option.id);
+                        })
+                    })
                 ]
             })
         ]

package/dist/components/dashboard/toolbar/page-toolbar.d.ts

@@ -5,26 +5,11 @@
  * time period selector, and playback controls.
  */
 import type { ComponentProps, ReactNode } from 'react';
-import type { TimePeriod } from '../context';
 export interface PageToolbarProps extends Omit<ComponentProps<'div'>, 'title' | 'children'> {
     /**
      * The title to display in the toolbar header
      */
     title: ReactNode;
-    /**
-     * Last updated timestamp text
-     * @default '13s ago'
-     */
-    lastUpdated?: string;
-    /**
-     * Current time period value
-     * @default '2days'
-     */
-    timePeriod?: TimePeriod;
-    /**
-     * Callback when time period changes
-     */
-    onTimePeriodChange?: (value: TimePeriod) => void;
     /**
      * Callback when refresh button is clicked
      */
@@ -54,22 +39,25 @@ export interface PageToolbarProps extends Omit<ComponentProps<'div'>, 'title' |
      * Children to render (e.g., mobile menu button)
      */
     children?: ReactNode;
+    /**
+     * Custom container for the interval selector popover
+     */
+    intervalSelectorContainer?: HTMLElement | null;
 }
 /**
  * Generic Page Toolbar
  *
  * A flexible toolbar component that can be used across different dashboard pages.
- * Supports title customization, time period selection, refresh indicator, and playback controls.
+ * Supports title customization, time interval selection, refresh indicator, and playback controls.
+ * Uses DashboardContext for interval state management.
  *
  * @example
  * ```tsx
  * <PageToolbar
  *   title="Analytics"
- *   timePeriod="2days"
- *   onTimePeriodChange={setTimePeriod}
  *   onRefresh={handleRefresh}
  * />
  * ```
  */
-export declare function PageToolbar({ title, lastUpdated, timePeriod, onTimePeriodChange, onRefresh, showPlaybackControls, onRewind, onPlay, onSpeed, actions, children, className, ...props }: PageToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageToolbar({ title, onRefresh, showPlaybackControls, onRewind, onPlay, onSpeed, actions, children, intervalSelectorContainer, className, ...props }: PageToolbarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=page-toolbar.d.ts.map