@scripso-homepad/ui 0.4.2 → 0.4.4

package/dist/web/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, RefObject } from 'react';
+import { ReactNode, TdHTMLAttributes, HTMLAttributes, ThHTMLAttributes, ButtonHTMLAttributes, RefObject } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { ClassValue } from 'clsx';
 
@@ -47,8 +47,9 @@ type AdminLayoutLabels = {
 type AppHeaderProps = {
     title: string;
     labels: AdminHeaderLabels;
-    buildingOptions: AdminBuildingOption[];
-    selectedBuildingId: string;
+    hasBuildingSelect?: boolean;
+    buildingOptions?: AdminBuildingOption[];
+    selectedBuildingId?: string;
     className?: string;
     buildingSelectClassName?: string;
     searchClassName?: string;
@@ -66,7 +67,7 @@ type AppHeaderProps = {
     onNotificationsClick?: () => void;
     onSearchChange?: (value: string) => void;
 };
-declare function AppHeader({ title, labels, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
+declare function AppHeader({ title, labels, hasBuildingSelect, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
 
 type BuildingSelectProps = {
     options: AdminBuildingOption[];
@@ -147,10 +148,270 @@ type BuildingIconProps = {
 };
 declare function BuildingIcon({ className }: BuildingIconProps): react.JSX.Element;
 
+type TableMoreIconProps = {
+    className?: string;
+};
+declare function TableMoreIcon({ className }: TableMoreIconProps): react.JSX.Element;
+
+type TableSortDirection = 'asc' | 'desc';
+type TableSortIconProps = {
+    direction?: TableSortDirection | null;
+    className?: string;
+};
+declare function TableSortIcon({ direction, className }: TableSortIconProps): react.JSX.Element;
+
+type TableMenuCheckIconProps = {
+    className?: string;
+};
+declare function TableMenuCheckIcon({ className }: TableMenuCheckIconProps): react.JSX.Element;
+
+type TableMenuCloseIconProps = {
+    className?: string;
+};
+declare function TableMenuCloseIcon({ className }: TableMenuCloseIconProps): react.JSX.Element;
+
+type TableMenuInfoIconProps = {
+    className?: string;
+};
+declare function TableMenuInfoIcon({ className }: TableMenuInfoIconProps): react.JSX.Element;
+
+type TableMenuRefreshIconProps = {
+    className?: string;
+};
+declare function TableMenuRefreshIcon({ className }: TableMenuRefreshIconProps): react.JSX.Element;
+
+type TableMenuActivateIconProps = {
+    className?: string;
+};
+declare function TableMenuActivateIcon({ className }: TableMenuActivateIconProps): react.JSX.Element;
+
+type TableMenuEditIconProps = {
+    className?: string;
+};
+declare function TableMenuEditIcon({ className }: TableMenuEditIconProps): react.JSX.Element;
+
+type TableMenuSuspendIconProps = {
+    className?: string;
+};
+declare function TableMenuSuspendIcon({ className }: TableMenuSuspendIconProps): react.JSX.Element;
+
+type TableMenuTrashIconProps = {
+    className?: string;
+};
+declare function TableMenuTrashIcon({ className }: TableMenuTrashIconProps): react.JSX.Element;
+
+declare function getTotalPages(total: number, pageSize: number): number;
+declare function getPaginationRange(page: number, pageSize: number, total: number): {
+    start: number;
+    end: number;
+};
+declare function getVisiblePageNumbers(currentPage: number, totalPages: number, maxButtons?: number): number[];
+
+type PaginationLabels = {
+    previousPage: string;
+    nextPage: string;
+    page: (pageNumber: number) => string;
+    showing: (range: {
+        start: number;
+        end: number;
+        total: number;
+    }) => string;
+};
+type PaginationVariant = 'standalone' | 'attached';
+type PaginationProps = {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    labels?: Partial<PaginationLabels>;
+    maxPageButtons?: number;
+    /**
+     * `attached` — below a table; no top radius (footer shell handles bottom radius).
+     * `standalone` — full `rounded-xl` shell.
+     */
+    variant?: PaginationVariant;
+    className?: string;
+    hideOnSinglePage?: boolean;
+};
+declare function Pagination({ page, pageSize, total, onPageChange, labels, maxPageButtons, variant, className, hideOnSinglePage, }: PaginationProps): react.JSX.Element | null;
+
+type TableActionsMenuItemTone = 'default' | 'success' | 'danger';
+type TableActionsMenuItem = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onSelect: () => void;
+    tone?: TableActionsMenuItemTone;
+    disabled?: boolean;
+};
+type TableActionsMenuProps = {
+    items: TableActionsMenuItem[];
+    triggerAriaLabel: string;
+    className?: string;
+    menuClassName?: string;
+};
+declare function TableActionsMenu({ items, triggerAriaLabel, className, menuClassName, }: TableActionsMenuProps): react.JSX.Element | null;
+
+type TableRowActionsConfig = {
+    status: ReactNode;
+    menuItems?: TableActionsMenuItem[];
+    inlineActions?: ReactNode;
+    menuAriaLabel?: string;
+};
+type TableRowStatusActionsProps = TableRowActionsConfig;
+declare function TableRowStatusActions({ status, menuItems, inlineActions, menuAriaLabel, }: TableRowStatusActionsProps): react.JSX.Element;
+
+type TableStatusActionsCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
+    status: ReactNode;
+    actions?: ReactNode;
+};
+/** @deprecated Prefer `TableCell` + `TableActionsCell` via `TableRowStatusActions`. */
+declare function TableStatusActionsCell({ status, actions, className, ...props }: TableStatusActionsCellProps): react.JSX.Element;
+
+type DataTableClassNames = {
+    /** Outer flex wrapper around the whole table block. */
+    root?: string;
+    /** Bordered shell around the scroll area (border, radius, background). */
+    shell?: string;
+    /** Scrollable table region. */
+    scroll?: string;
+    /** Footer wrapper around pagination. */
+    footer?: string;
+    /** The `<table>` element. */
+    table?: string;
+    /** The `<thead>` section. */
+    header?: string;
+    /** The `<tbody>` section. */
+    body?: string;
+    /** Pagination component when used as a table footer. */
+    pagination?: string;
+};
+
+declare const tableRowDisabledCellClassName = "bg-[#ECEEF0]/30 [&>*]:opacity-70";
+declare const DEFAULT_TABLE_BODY_MIN_HEIGHT = 320;
+declare const tableAlignClasses: {
+    readonly left: "";
+    readonly right: "text-right";
+    readonly center: "text-center";
+};
+type TableCellVariant = 'default' | 'emphasis' | 'muted' | 'strong';
+
+type DataTableProps = {
+    children: ReactNode;
+    footer?: ReactNode;
+    minWidth?: number | string;
+    /** Outer flex container — override layout spacing if needed. */
+    className?: string;
+    /** Table shell — default `rounded-xl` alone, or `rounded-t-xl` when a footer is present. */
+    tableClassName?: string;
+    /** Footer shell — default `rounded-b-xl` when a footer is present. */
+    footerClassName?: string;
+    scrollClassName?: string;
+    /** Class names for individual table parts. Merged with the matching `*ClassName` props above. */
+    classNames?: DataTableClassNames;
+    /** Minimum height of the scrollable table body. Default: 320px. */
+    minBodyHeight?: number | string;
+    /** Fixed height of the scrollable table body (scrolls when content overflows). */
+    bodyHeight?: number | string;
+    /** Grow the table region to fill a flex parent (`flex-1 min-h-0`). */
+    fillHeight?: boolean;
+};
+declare function DataTable({ children, footer, minWidth, className, tableClassName, footerClassName, scrollClassName, classNames, minBodyHeight, bodyHeight, fillHeight, }: DataTableProps): react.JSX.Element;
+
+type TableScrollAreaProps = {
+    children: ReactNode;
+    minWidth?: number | string;
+    className?: string;
+    minHeight?: number | string;
+    height?: number | string;
+    fillHeight?: boolean;
+};
+declare function TableScrollArea({ children, minWidth, className, minHeight, height, fillHeight, }: TableScrollAreaProps): react.JSX.Element;
+
+type TableProps = HTMLAttributes<HTMLTableElement>;
+declare function Table({ className, ...props }: TableProps): react.JSX.Element;
+type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+declare function TableHeader({ className, ...props }: TableHeaderProps): react.JSX.Element;
+type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+declare function TableBody({ className, ...props }: TableBodyProps): react.JSX.Element;
+type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    /** Muted row state — Storm Gray/50 background at 30% with 70% content opacity. */
+    disabled?: boolean;
+};
+declare function TableRow({ className, disabled, ...props }: TableRowProps): react.JSX.Element;
+type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement> & {
+    align?: keyof typeof tableAlignClasses;
+    /** Pins the column to the right edge during horizontal scroll (e.g. actions menu). */
+    stickyRight?: boolean;
+    /** Enables sort UI and click handler for this column header. */
+    sortable?: boolean;
+    /** Active sort direction for this column. Omit or `null` when unsorted. */
+    sortDirection?: TableSortDirection | null;
+    /** Called when the sortable header is clicked. */
+    onSort?: () => void;
+    children?: ReactNode;
+};
+declare function TableHead({ className, align, stickyRight, sortable, sortDirection, onSort, children, ...props }: TableHeadProps): react.JSX.Element;
+
+type TableCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
+    variant?: TableCellVariant;
+    align?: keyof typeof tableAlignClasses;
+    children?: ReactNode;
+};
+declare function TableCell({ className, variant, align, children, ...props }: TableCellProps): react.JSX.Element;
+type TableActionsCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
+    children?: ReactNode;
+};
+declare function TableActionsCell({ className, children, ...props }: TableActionsCellProps): react.JSX.Element;
+
+type BadgeVariant = 'info' | 'danger' | 'warning' | 'success' | 'neutral';
+type BadgeProps = {
+    children: ReactNode;
+    variant?: BadgeVariant;
+    icon?: ReactNode;
+    className?: string;
+};
+declare function Badge({ children, variant, icon, className }: BadgeProps): react.JSX.Element;
+
+type StatusBadgeTone = BadgeVariant;
+type StatusBadgeProps = {
+    children: ReactNode;
+    tone?: StatusBadgeTone;
+    icon?: ReactNode;
+    className?: string;
+};
+declare function StatusBadge({ children, tone, icon, className }: StatusBadgeProps): react.JSX.Element;
+
+type TableActionButtonVariant = 'approve' | 'reject' | 'menu';
+type TableActionButtonProps = {
+    variant: TableActionButtonVariant;
+    children?: ReactNode;
+    icon?: ReactNode;
+    ariaLabel?: string;
+    className?: string;
+    disabled?: boolean;
+} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-expanded' | 'aria-haspopup' | 'aria-controls'>;
+declare const TableActionButton: react.ForwardRefExoticComponent<{
+    variant: TableActionButtonVariant;
+    children?: ReactNode;
+    icon?: ReactNode;
+    ariaLabel?: string;
+    className?: string;
+    disabled?: boolean;
+} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "aria-expanded" | "onClick" | "aria-controls" | "aria-haspopup"> & react.RefAttributes<HTMLButtonElement>>;
+
+type TableIconTextProps = {
+    icon: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+declare function TableIconText({ icon, children, className }: TableIconTextProps): react.JSX.Element;
+
 declare function useMediaQuery(query: string): boolean;
 
-declare function useOnClickOutside<T extends HTMLElement>(ref: RefObject<T | null>, handler: () => void, enabled?: boolean): void;
+type OutsideTarget<T extends HTMLElement> = RefObject<T | null> | Array<RefObject<T | null>>;
+declare function useOnClickOutside<T extends HTMLElement>(ref: OutsideTarget<T>, handler: () => void, enabled?: boolean): void;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, DashboardLayout, type DashboardLayoutProps, Sidebar, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, cn, useMediaQuery, useOnClickOutside };
+export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, Sidebar, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };