@nar-bus/lena-ui-shared 1.1.2 → 1.2.0

package/dist/index.d.ts

@@ -52,6 +52,14 @@ export declare function AccordionItem({ className, ...props }: React_2.Component
 
 export declare function AccordionTrigger({ className, children, ...props }: React_2.ComponentProps<typeof AccordionPrimitive.Trigger>): JSX.Element;
 
+export declare function ActiveFiltersBar({ fieldConfig, filters, onFiltersChange }: ActiveFiltersBarProps): JSX.Element | null;
+
+export declare interface ActiveFiltersBarProps {
+    fieldConfig: FieldConfig[];
+    filters: FilterState[];
+    onFiltersChange: (filters: FilterState[]) => void;
+}
+
 export declare function AdvancedJsonEditor({ value, onChange, onSave, title, icon: Icon, defaultOpen, maxViewHeight, rows, placeholder, defaultMode, allowModeSwitch, schema, editable, disabled, disabledReason, isSaving, showLineNumbers, showValidation, showStats, }: AdvancedJsonEditorProps): JSX.Element;
 
 export declare interface AdvancedJsonEditorProps {
@@ -699,7 +707,17 @@ export declare interface CRUDTabContentProps<T extends {
     onExternalCreateSheetOpenChange?: (open: boolean) => void;
 }
 
-export declare function DataTable<TData>({ columns, getRowId, data, isLoading, error, pagination, onPageChange, onPageSizeChange, onPrefetchPage, pageSizeOptions, sortBy, sortDirection, onSortChange, searchValue, onSearchChange, searchPlaceholder, searchDebounceMs, fieldConfig, filters, onFiltersChange, enableRowSelection, rowSelection, onRowSelectionChange, bulkActions, rowActions, toolbarStart, toolbarEnd, className, emptyIcon, emptyTitle, emptyDescription, onRowClick, onRowHover, rowClassName, meta, }: DataTableComponentProps<TData>): JSX.Element;
+export declare function DataRow({ label, value, mono, suffix, className }: DataRowProps): JSX.Element;
+
+export declare interface DataRowProps {
+    label: string;
+    value?: ReactNode;
+    mono?: boolean;
+    suffix?: string;
+    className?: string;
+}
+
+export declare function DataTable<TData>({ columns, getRowId, data, isLoading, error, pagination, onPageChange, onPageSizeChange, onPrefetchPage, pageSizeOptions, sortBy, sortDirection, onSortChange, searchValue, onSearchChange, searchPlaceholder, searchDebounceMs, fieldConfig, filters, onFiltersChange, enableRowSelection, rowSelection, onRowSelectionChange, bulkActions, rowActions, toolbarStart, toolbarEnd, className, emptyIcon, emptyTitle, emptyDescription, onRowClick, onRowHover, rowClassName, meta, headerColor, }: DataTableComponentProps<TData>): JSX.Element;
 
 declare interface DataTableActions {
     setGeneralSearch: (value: string) => void;
@@ -775,6 +793,8 @@ declare interface DataTableComponentProps<TData> {
     onRowHover?: (row: TData) => void;
     rowClassName?: (row: TData) => string;
     meta?: Record<string, unknown>;
+    /** Custom header color (CSS color value). Overrides --table-header variable */
+    headerColor?: string;
 }
 
 /** Customization props */
@@ -834,6 +854,16 @@ export declare interface DataTableProps<TData> extends DataTableDataProps<TData>
     columns: ColumnDef<TData, unknown>[];
 }
 
+export declare function DataTableSearch({ value, onChange, placeholder, debounceMs, className, }: DataTableSearchInputProps): JSX.Element;
+
+export declare interface DataTableSearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    debounceMs?: number;
+    className?: string;
+}
+
 /** Search props */
 export declare interface DataTableSearchProps {
     searchValue: string;
@@ -954,6 +984,18 @@ export declare function dateStringToTimestamp(dateStr: string, endOfDay?: boolea
  */
 export declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
 
+/**
+ * Default pagination state — use as initial value when API hasn't responded yet
+ */
+export declare const DEFAULT_PAGINATION: {
+    readonly page: 0;
+    readonly size: 20;
+    readonly totalElements: 0;
+    readonly totalPages: 0;
+    readonly hasNext: false;
+    readonly hasPrevious: false;
+};
+
 /**
  * Default values
  */
@@ -1181,8 +1223,78 @@ declare interface FileFieldProps<TFieldValues extends FieldValues> {
     errorHint?: string;
 }
 
+export declare function FilterableListLayout({ fieldConfig, filters, onFiltersChange, filterPanelOpen, onFilterPanelToggle, searchValue, onSearchChange, searchPlaceholder, onRefresh, isRefreshing, activeFilterCount, toolbarStart, addButton, filterLabel, refreshLabel, children, className, }: FilterableListLayoutProps): JSX.Element;
+
+export declare interface FilterableListLayoutProps {
+    /** FieldConfig array for FilterSidePanel + ActiveFiltersBar */
+    fieldConfig: FieldConfig[];
+    /** Current filter state */
+    filters: FilterState[];
+    /** Filter change handler — passed to FilterSidePanel + ActiveFiltersBar */
+    onFiltersChange: (filters: FilterState[]) => void;
+    /** Whether the filter side panel is open */
+    filterPanelOpen: boolean;
+    /** Toggle filter panel */
+    onFilterPanelToggle: () => void;
+    /** Debounced search value */
+    searchValue: string;
+    /** Search change handler */
+    onSearchChange: (value: string) => void;
+    /** Search input placeholder */
+    searchPlaceholder?: string;
+    /** Refresh handler — typically queryClient.invalidateQueries */
+    onRefresh: () => void;
+    /** Shows spinning animation on refresh button */
+    isRefreshing?: boolean;
+    /** Number of active filters — shown as badge on filter button */
+    activeFilterCount?: number;
+    /** Slot: entity label (left side of toolbar) — e.g. ToolbarEntityLabel */
+    toolbarStart?: ReactNode;
+    /** Slot: add/create button (right side of toolbar) */
+    addButton?: ReactNode;
+    /** i18n labels */
+    filterLabel?: string;
+    refreshLabel?: string;
+    /** Main content — typically DataTable */
+    children: ReactNode;
+    /** Additional className for the outer container */
+    className?: string;
+}
+
+export declare function FilterFieldRow({ fieldConfig, filter, onFilterChange }: FilterFieldRowProps): JSX.Element;
+
+export declare interface FilterFieldRowProps {
+    fieldConfig: FieldConfig;
+    filter: FilterState | undefined;
+    onFilterChange: (filter: FilterState | null) => void;
+}
+
 export declare type FilterOperator = 'EQUALS' | 'NOT_EQUALS' | 'CONTAINS' | 'STARTS_WITH' | 'ENDS_WITH' | 'GREATER_THAN' | 'GREATER_THAN_OR_EQUALS' | 'LESS_THAN' | 'LESS_THAN_OR_EQUALS' | 'IN' | 'NOT_IN' | 'BETWEEN' | 'IS_NULL' | 'IS_NOT_NULL';
 
+declare interface FilterPanelLabels {
+    title: string;
+    apply: string;
+    clearAll: string;
+    clearChip: string;
+    activeFilter: string;
+    empty: string;
+    notEmpty: string;
+    select: string;
+    yes: string;
+    no: string;
+    operators: Record<string, string>;
+}
+
+export declare function FilterSidePanel({ open, onClose, fieldConfig, filters, onFiltersChange, }: FilterSidePanelProps): JSX.Element;
+
+export declare interface FilterSidePanelProps {
+    open: boolean;
+    onClose: () => void;
+    fieldConfig: FieldConfig[];
+    filters: FilterState[];
+    onFiltersChange: (filters: FilterState[]) => void;
+}
+
 export declare interface FilterState {
     /** Unique filter ID (UI only, for React keys) */
     id: string;
@@ -1367,6 +1479,19 @@ declare interface IconTextCellProps {
     className?: string;
 }
 
+export declare function IconTooltipButton({ icon: Icon, tooltip, onClick, disabled, variant, size, className, spinning, }: IconTooltipButtonProps): JSX.Element;
+
+export declare interface IconTooltipButtonProps {
+    icon: LucideIcon;
+    tooltip: string;
+    onClick: () => void;
+    disabled?: boolean;
+    variant?: 'ghost' | 'outline';
+    size?: 'sm' | 'icon';
+    className?: string;
+    spinning?: boolean;
+}
+
 export declare function InfoCard({ icon, label, value, variant, iconColor, className, }: InfoCardProps): JSX.Element;
 
 export declare function InfoCardGrid({ children, columns, className, }: InfoCardGridProps): JSX.Element;
@@ -1386,6 +1511,14 @@ declare interface InfoCardProps {
     className?: string;
 }
 
+export declare function InfoSection({ title, children, className }: InfoSectionProps): JSX.Element;
+
+export declare interface InfoSectionProps {
+    title: string;
+    children: ReactNode;
+    className?: string;
+}
+
 export declare function Input({ className, type, ...props }: React_2.ComponentProps<"input">): JSX.Element;
 
 /**
@@ -1503,6 +1636,7 @@ export declare interface LenaUILabels {
     jsonEditor: JsonEditorLabels;
     common: CommonLabels;
     deleteDialog: DeleteDialogLabels;
+    filterPanel: FilterPanelLabels;
 }
 
 /**
@@ -1623,6 +1757,11 @@ declare interface NumberFieldProps<TFieldValues extends FieldValues> {
  */
 export declare const OPERATOR_LABELS: Record<FilterOperator, string>;
 
+/**
+ * Short symbolic representations of filter operators
+ */
+export declare const OPERATOR_SYMBOLS: Record<FilterOperator, string>;
+
 /**
  * Available operators grouped by field type
  * Matches backend GenericSpecification supported operations
@@ -1643,6 +1782,30 @@ export declare type OptimisticAction<T> = {
     id: number | string;
 };
 
+export declare function OverviewPanel({ children, className }: OverviewPanelProps): JSX.Element;
+
+export declare function OverviewPanelGrid({ children, columns, className }: OverviewPanelGridProps): JSX.Element;
+
+export declare interface OverviewPanelGridProps {
+    children: ReactNode;
+    columns?: string;
+    className?: string;
+}
+
+export declare interface OverviewPanelProps {
+    children: ReactNode;
+    className?: string;
+}
+
+export declare function OverviewPanelTopBar({ icon: Icon, segments, actions, className }: OverviewPanelTopBarProps): JSX.Element;
+
+export declare interface OverviewPanelTopBarProps {
+    icon: LucideIcon;
+    segments: string[];
+    actions?: ReactNode;
+    className?: string;
+}
+
 export declare interface PagedResponse<T> {
     status: number;
     success: boolean;
@@ -2086,7 +2249,7 @@ export declare interface SidebarNavItem {
     children?: SidebarNavItem[];
 }
 
-export declare function SimpleDataTable<TData>({ columns, data, getRowId, isLoading, error, meta, enableSearch, searchPlaceholder, searchColumn, emptyIcon, emptyTitle, emptyDescription, onRowClick, rowClassName, className, loadingRows, }: SimpleDataTableProps<TData>): JSX.Element;
+export declare function SimpleDataTable<TData>({ columns, data, getRowId, isLoading, error, meta, enableSearch, searchPlaceholder, searchColumn, emptyIcon, emptyTitle, emptyDescription, onRowClick, rowClassName, className, loadingRows, headerColor, }: SimpleDataTableProps<TData>): JSX.Element;
 
 declare interface SimpleDataTableProps<TData> {
     /** Column definitions */
@@ -2121,6 +2284,8 @@ declare interface SimpleDataTableProps<TData> {
     className?: string;
     /** Number of skeleton rows for loading state */
     loadingRows?: number;
+    /** Custom header color (CSS color value). Overrides --table-header variable */
+    headerColor?: string;
 }
 
 export declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
@@ -2500,6 +2665,16 @@ export declare const toggleVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare function ToolbarEntityLabel({ icon: Icon, entityName, totalElements, countLabel, className, }: ToolbarEntityLabelProps): JSX.Element;
+
+export declare interface ToolbarEntityLabelProps {
+    icon: LucideIcon;
+    entityName: string;
+    totalElements: number;
+    countLabel?: string;
+    className?: string;
+}
+
 export declare function Tooltip({ ...props }: React_2.ComponentProps<typeof TooltipPrimitive.Root>): JSX.Element;
 
 export declare function TooltipContent({ className, sideOffset, children, ...props }: React_2.ComponentProps<typeof TooltipPrimitive.Content>): JSX.Element;
@@ -2533,6 +2708,17 @@ declare interface TreeNodeOperation {
 
 export declare const trLabels: LenaUILabels;
 
+export declare function UnderConstructionPage({ title, description, goBackLabel, homeLabel, onGoBack, onGoHome, }: UnderConstructionPageProps): JSX.Element;
+
+export declare interface UnderConstructionPageProps {
+    title?: string;
+    description?: string;
+    goBackLabel?: string;
+    homeLabel?: string;
+    onGoBack?: () => void;
+    onGoHome?: () => void;
+}
+
 /**
  * UnifiedTabs - Single tab component for both list and detail pages
  */
@@ -2547,8 +2733,8 @@ export declare interface UnifiedTabsProps {
     onTabChange: (tabId: string) => void;
     /** Tab content - use TabsContent for overflow variant, conditional render for simple */
     children: React.ReactNode;
-    /** Tab variant: 'simple' for list pages, 'overflow' for detail pages */
-    variant?: 'simple' | 'overflow';
+    /** Tab variant: 'simple' for list pages, 'overflow' for detail pages, 'segmented' for iOS-style segmented control */
+    variant?: 'simple' | 'overflow' | 'segmented';
     /** Dynamic count getter - overrides static count in TabConfig */
     getTabCount?: (tabId: string) => number | undefined;
     /** Additional CSS classes for the container */
@@ -2599,7 +2785,7 @@ declare interface UseDataTableOptions<TData> extends CreateDataTableStoreOptions
     data?: TData[];
 }
 
-declare interface UseDataTableReturn<TData> {
+export declare interface UseDataTableReturn<TData> {
     /** Search request ready for API call (100% backend compatible) */
     searchRequest: SearchRequest;
     /** Pagination props to spread to DataTable */
@@ -2650,6 +2836,12 @@ declare interface UseDataTableUrlOptions {
     debounceMs?: number;
 }
 
+/**
+ * Debounces a value by the specified delay.
+ * Returns the debounced value that only updates after `delay` ms of inactivity.
+ */
+export declare function useDebounce<T>(value: T, delay?: number): T;
+
 export declare function useJsonTree({ value, onChange }: UseJsonTreeOptions): UseJsonTreeReturn;
 
 declare interface UseJsonTreeOptions {