@paroicms/react-ui 0.5.3 → 0.5.5

package/dist/Breadcrumb.d.ts

@@ -5,6 +5,7 @@ export interface BreadcrumbItem {
     icon?: ReactNode;
     url?: string;
     onClick?: () => void;
+    className?: string;
 }
 export interface BreadcrumbProps {
     items: BreadcrumbItem[];

package/dist/Breadcrumb.js

@@ -5,6 +5,9 @@ import "../styles/Breadcrumb.css";
 export function Breadcrumb({ items, separator = _jsx(ChevronRight, { size: 12 }), className, }) {
     return (_jsx("nav", { className: clsx("PaBreadcrumb", className), "aria-label": "Breadcrumb", children: items.map((item, index) => {
             const isLast = index === items.length - 1;
-            return (_jsxs("div", { className: "PaBreadcrumb-item", children: [isLast ? (_jsxs("span", { className: "PaBreadcrumb-current", children: [item.icon, item.label] })) : item.url ? (_jsxs("a", { href: item.url, className: "PaBreadcrumb-link", children: [item.icon, item.label] })) : item.onClick ? (_jsxs("button", { type: "button", className: "PaBreadcrumb-link", onClick: item.onClick, children: [item.icon, item.label] })) : (_jsxs("span", { className: "PaBreadcrumb-link", children: [item.icon, item.label] })), !isLast && _jsx("span", { className: "PaBreadcrumb-separator", children: separator })] }, `${item.label}:${index}`));
+            const linkClassName = clsx("PaBreadcrumb-link", {
+                iconBtn: item.icon && !item.label,
+            });
+            return (_jsxs("div", { className: clsx("PaBreadcrumb-item", item.className), children: [item.url ? (_jsxs("a", { href: item.url, className: linkClassName, children: [item.icon, item.label] })) : item.onClick ? (_jsxs("button", { type: "button", className: linkClassName, onClick: item.onClick, children: [item.icon, item.label] })) : (_jsxs("span", { className: linkClassName, children: [item.icon, item.label] })), !isLast && _jsx("span", { className: "PaBreadcrumb-separator", children: separator })] }, `${item.label}:${index}`));
         }) }));
 }

package/dist/DataTable.d.ts

@@ -1,12 +1,21 @@
 import "../styles/DataTable.css";
-import { type ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
+export interface DataTableColumn<T = unknown> {
+    field?: keyof T & string;
+    header?: string;
+    body?: (rowData: T) => ReactNode;
+    style?: CSSProperties;
+    sortable?: boolean;
+    bodyClassName?: string;
+}
 export interface DataTableProps<T> {
     value: T[];
     dataKey: keyof T & string;
+    columns: DataTableColumn<T>[];
     size?: "small" | "normal";
     loading?: boolean;
-    children: ReactNode;
     className?: string;
+    tableClassName?: string;
     emptyMessage?: string;
     paginator?: boolean;
     rows?: number;
@@ -27,4 +36,4 @@ export interface DataTableProps<T> {
     rowClassName?: (row: T) => string | undefined;
     totalLabel?: string;
 }
-export declare function DataTable<T extends object>({ value, dataKey, size, loading, children, className, emptyMessage, paginator, rows, totalRecords, first, onPage, rowsPerPageOptions, sortField, sortOrder, onSort, onRowClick, rowClassName, totalLabel, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<T extends object>({ value, dataKey, columns, size, loading, className, tableClassName, emptyMessage, paginator, rows, totalRecords, first, onPage, rowsPerPageOptions, sortField, sortOrder, onSort, onRowClick, rowClassName, totalLabel, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/DataTable.js

@@ -2,17 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../styles/DataTable.css";
 import { clsx } from "clsx";
 import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, ChevronsUpDown } from "lucide-react";
-import { Children, isValidElement } from "react";
 import { Select } from "./Select.js";
 import { Spinner } from "./Spinner.js";
-export function DataTable({ value, dataKey, size, loading, children, className, emptyMessage = "No data available", paginator, rows = 10, totalRecords, first = 0, onPage, rowsPerPageOptions, sortField, sortOrder, onSort, onRowClick, rowClassName, totalLabel, }) {
-    // Extract column definitions from children
-    const columns = [];
-    Children.forEach(children, (child) => {
-        if (isValidElement(child) && child.props) {
-            columns.push(child.props);
-        }
-    });
+export function DataTable({ value, dataKey, columns, size, loading, className, tableClassName, emptyMessage = "No data available", paginator, rows = 10, totalRecords, first = 0, onPage, rowsPerPageOptions, sortField, sortOrder, onSort, onRowClick, rowClassName, totalLabel, }) {
     const total = totalRecords ?? value.length;
     const pageCount = Math.ceil(total / rows);
     const currentPage = Math.floor(first / rows) + 1;
@@ -22,5 +14,5 @@ export function DataTable({ value, dataKey, size, loading, children, className,
         const newOrder = sortField === field && sortOrder === 1 ? -1 : 1;
         onSort({ field, order: newOrder });
     };
-    return (_jsxs("div", { className: clsx("PaDataTable-wrapper", loading && "loading"), children: [loading && (_jsx("div", { className: "PaDataTable-overlay", children: _jsx(Spinner, {}) })), _jsx("div", { className: "PaDataTable-scrollable", children: _jsxs("table", { className: clsx("PaDataTable", size, className), children: [_jsx("thead", { className: "PaDataTable-header", children: _jsx("tr", { children: columns.map((col, i) => (_jsx("th", { className: clsx("PaDataTable-headerCell", col.sortable && "sortable"), style: col.style, onClick: col.sortable ? () => handleSort(col.field) : undefined, tabIndex: 0, children: _jsxs("span", { className: "PaDataTable-headerContent", children: [col.header, col.sortable && (_jsx("span", { className: "PaDataTable-sortIcon", children: col.field === sortField ? (sortOrder === 1 ? (_jsx(ArrowDown, { size: 14 })) : (_jsx(ArrowUp, { size: 14 }))) : (_jsx(ChevronsUpDown, { size: 14 })) }))] }) }, col.field ?? i))) }) }), _jsx("tbody", { children: value.length === 0 ? (_jsx("tr", { className: "PaDataTable-emptyRow", children: _jsx("td", { colSpan: columns.length, className: "PaDataTable-emptyCell", children: emptyMessage }) })) : (value.map((row) => (_jsx("tr", { className: clsx("PaDataTable-row", onRowClick && "clickable", rowClassName?.(row)), onClick: onRowClick ? (e) => onRowClick(row, e) : undefined, children: columns.map((col, i) => (_jsx("td", { className: clsx("PaDataTable-cell", col.bodyClassName), style: col.style, children: col.body ? col.body(row) : col.field ? String(row[col.field] ?? "") : null }, col.field ?? i))) }, String(row[dataKey]))))) })] }) }), paginator && onPage && pageCount > 0 && (_jsxs("div", { className: "PaDataTable-footer", children: [_jsxs("span", { className: "PaDataTable-totalCount", children: [total, " ", totalLabel ?? "items"] }), _jsxs("div", { className: "PaDataTable-pagination", children: [_jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage <= 1, onClick: () => onPage({ first: first - rows, rows }), children: _jsx(ChevronLeft, { size: 16 }) }), _jsxs("span", { className: "PaDataTable-paginationText", children: ["Page ", currentPage, " of ", pageCount] }), _jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage >= pageCount, onClick: () => onPage({ first: first + rows, rows }), children: _jsx(ChevronRight, { size: 16 }) }), rowsPerPageOptions && rowsPerPageOptions.length > 0 && (_jsx(Select, { className: "PaDataTable-rowsPerPage", value: String(rows), options: rowsPerPageOptions.map((n) => ({ label: String(n), value: String(n) })), onChange: (val) => onPage({ first: 0, rows: Number(val) }) }))] })] }))] }));
+    return (_jsxs("div", { className: clsx("PaDataTable", { loading }, className), children: [loading && (_jsx("div", { className: "PaDataTable-overlay", children: _jsx(Spinner, {}) })), _jsx("div", { className: "PaDataTable-scrollable", children: _jsxs("table", { className: clsx("PaDataTable-table", size, tableClassName), children: [_jsx("thead", { className: "PaDataTable-header", children: _jsx("tr", { children: columns.map((col, i) => (_jsx("th", { className: clsx("PaDataTable-headerCell", col.sortable && "sortable"), style: col.style, onClick: col.sortable ? () => handleSort(col.field) : undefined, tabIndex: 0, children: _jsxs("span", { className: "PaDataTable-headerContent", children: [col.header, col.sortable && (_jsx("span", { className: "PaDataTable-sortIcon", children: col.field === sortField ? (sortOrder === 1 ? (_jsx(ArrowDown, { size: 14 })) : (_jsx(ArrowUp, { size: 14 }))) : (_jsx(ChevronsUpDown, { size: 14 })) }))] }) }, col.field ?? i))) }) }), _jsx("tbody", { children: value.length === 0 ? (_jsx("tr", { className: "PaDataTable-emptyRow", children: _jsx("td", { colSpan: columns.length, className: "PaDataTable-emptyCell", children: emptyMessage }) })) : (value.map((row) => (_jsx("tr", { className: clsx("PaDataTable-row", onRowClick && "clickable", rowClassName?.(row)), onClick: onRowClick ? (e) => onRowClick(row, e) : undefined, children: columns.map((col, i) => (_jsx("td", { className: clsx("PaDataTable-cell", col.bodyClassName), style: col.style, children: col.body ? col.body(row) : col.field ? String(row[col.field] ?? "") : null }, col.field ?? i))) }, String(row[dataKey]))))) })] }) }), paginator && onPage && pageCount > 1 && (_jsxs("div", { className: "PaDataTable-footer", children: [_jsxs("span", { className: "PaDataTable-totalCount", children: [total, " ", totalLabel ?? "items"] }), _jsxs("div", { className: "PaDataTable-pagination", children: [_jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage <= 1, onClick: () => onPage({ first: first - rows, rows }), children: _jsx(ChevronLeft, { size: 16 }) }), _jsxs("span", { className: "PaDataTable-paginationText", children: ["Page ", currentPage, " of ", pageCount] }), _jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage >= pageCount, onClick: () => onPage({ first: first + rows, rows }), children: _jsx(ChevronRight, { size: 16 }) }), rowsPerPageOptions && rowsPerPageOptions.length > 0 && (_jsx(Select, { className: "PaDataTable-rowsPerPage", value: String(rows), options: rowsPerPageOptions.map((n) => ({ label: String(n), value: String(n) })), onChange: (val) => onPage({ first: 0, rows: Number(val) }) }))] })] }))] }));
 }

package/dist/InputSwitch.d.ts

@@ -0,0 +1,10 @@
+import "../styles/InputSwitch.css";
+import type { ChangeEvent, InputHTMLAttributes } from "react";
+export interface InputSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    checked: boolean;
+    onChange?: (checked: boolean, ev: ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
+    inputLabel?: string;
+    className?: string;
+}
+export declare function InputSwitch({ checked, onChange, label, inputLabel, className, ...rest }: InputSwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/InputSwitch.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "../styles/InputSwitch.css";
+import { clsx } from "clsx";
+export function InputSwitch({ checked, onChange, label, inputLabel, className, ...rest }) {
+    const handleChange = (e) => {
+        onChange?.(e.target.checked, e);
+    };
+    const fieldContent = inputLabel ? (_jsxs("label", { className: clsx("PaInputSwitch", className), children: [_jsx("input", { className: "PaInputSwitch-input", type: "checkbox", checked: checked, onChange: handleChange, ...rest }), _jsx("span", { className: "PaInputSwitch-track", children: _jsx("span", { className: "PaInputSwitch-thumb" }) }), _jsx("span", { className: "PaInputSwitch-label", children: inputLabel })] })) : (_jsxs("span", { className: clsx("PaInputSwitch", className), children: [_jsx("input", { className: "PaInputSwitch-input", type: "checkbox", checked: checked, onChange: handleChange, ...rest }), _jsx("span", { className: "PaInputSwitch-track", children: _jsx("span", { className: "PaInputSwitch-thumb" }) })] }));
+    return (_jsx(_Fragment, { children: label ? (_jsxs("label", { className: clsx("PaField", className), children: [_jsx("span", { className: "PaField-label", children: label }), fieldContent] })) : (fieldContent) }));
+}

package/dist/MenuItem.js

@@ -9,10 +9,10 @@ export function MenuItem({ item, expanded, onToggle }) {
         url = undefined;
         command = undefined;
     }
-    return (_jsxs("div", { className: clsx("PaMenuItem", active && "active", disabled && "disabled", className), style: style, children: [expanded !== undefined && onToggle ? (_jsx("button", { className: "PaMenuItem-left toggle", onClick: () => onToggle(!expanded), type: "button", children: expanded ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }) })) : icon ? (_jsx("div", { className: "PaMenuItem-left icon", children: icon })) : undefined, url ? (_jsx("a", { className: "PaMenuItem-label", href: url, onClick: url && command
+    return (_jsxs("div", { className: clsx("PaMenuItem", { active }, className), style: style, children: [expanded !== undefined && onToggle ? (_jsx("button", { className: "PaMenuItem-left toggle", onClick: () => onToggle(!expanded), type: "button", children: expanded ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }) })) : icon ? (_jsx("div", { className: "PaMenuItem-left icon", children: icon })) : undefined, url ? (_jsx("a", { className: clsx("PaMenuItem-label", { disabled }), href: url, onClick: url && command
                     ? (ev) => {
                         ev.preventDefault();
                         command?.();
                     }
-                    : undefined, children: label })) : command ? (_jsx("button", { className: "PaMenuItem-label", onClick: command, type: "button", children: label })) : (_jsx("span", { className: "PaMenuItem-label", children: label })), popupMenu && _jsx(PopupMenu, { className: "PaMenuItem-popup", items: popupMenu })] }, id));
+                    : undefined, children: label })) : command ? (_jsx("button", { className: "PaMenuItem-label", onClick: command, type: "button", disabled: disabled, children: label })) : (_jsx("span", { className: clsx("PaMenuItem-label", { disabled }), children: label })), popupMenu && _jsx(PopupMenu, { className: "PaMenuItem-popup", items: popupMenu })] }, id));
 }

package/dist/PopupMenu.d.ts

@@ -1,5 +1,5 @@
 import "../styles/PopupMenu.css";
-import { type MouseEvent, type ReactNode, type Ref } from "react";
+import { type MouseEvent, type ReactElement, type ReactNode, type Ref } from "react";
 import type { MenuNode } from "./paroi-ui-lib-types.js";
 export interface PopupMenuProps {
     items: MenuNode[];
@@ -9,6 +9,8 @@ export interface PopupMenuProps {
     position?: "auto" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
     /** Optional custom trigger element. If provided, it will be used instead of the default button. */
     children?: ReactNode;
+    /** Optional footer render prop. Receives a hide function to close the menu. */
+    footer?: (hide: () => void) => ReactElement;
     ref?: Ref<PopupMenuRef>;
 }
 export interface PopupMenuRef {
@@ -16,4 +18,4 @@ export interface PopupMenuRef {
     show: (event: MouseEvent) => void;
     hide: () => void;
 }
-export declare function PopupMenu({ items, className, id, position, children, ref, }: PopupMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopupMenu({ items, className, id, position, children, footer, ref, }: PopupMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/PopupMenu.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "../styles/PopupMenu.css";
 import clsx from "clsx";
 import { ChevronRight, ChevronsDown } from "lucide-react";
@@ -6,12 +6,15 @@ import { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, }
 import { Button } from "./Button.js";
 import { MenuItem } from "./MenuItem.js";
 import { computePopupPosition, setupPopoverPositioning } from "./popup-positioning.js";
+function isSeparator(item) {
+    return "separator" in item && item.separator === true;
+}
 const isPopoverSupported = typeof HTMLElement !== "undefined" && "showPopover" in HTMLElement.prototype;
 if (!isPopoverSupported) {
     console?.error("PopupMenu: Popover API is not supported in this browser.");
 }
 let seq = 0;
-export function PopupMenu({ items, className, id, position = "auto", children, ref, }) {
+export function PopupMenu({ items, className, id, position = "auto", children, footer, ref, }) {
     const menuRef = useRef(null);
     const triggerRef = useRef(null);
     const menuIdRef = useRef(undefined);
@@ -62,7 +65,9 @@ export function PopupMenu({ items, className, id, position = "auto", children, r
         }
         return (_jsx(Button, { ref: triggerRef, className: clsx(className, "borderless"), outlined: true, severity: "secondary", "aria-label": "unfold", "aria-controls": menuIdRef.current, "aria-haspopup": true, ...triggerProps, children: _jsx(ChevronsDown, { size: 16 }) }));
     };
-    return (_jsxs(_Fragment, { children: [renderTrigger(), _jsx("div", { className: "PaPopupMenu", ref: menuRef, id: menuIdRef.current, popover: "auto", children: _jsx("div", { className: "PaPopupMenu-content", children: items.map((item) => (_jsx(PopupMenuItemWrapper, { item: item, onHide: hide }, item.key))) }) })] }));
+    return (_jsxs(_Fragment, { children: [renderTrigger(), _jsxs("div", { className: "PaPopupMenu", ref: menuRef, id: menuIdRef.current, popover: "auto", children: [_jsx("div", { className: "PaPopupMenu-content", children: items.map((item, index) => isSeparator(item) ? (
+                        // biome-ignore lint/suspicious/noArrayIndexKey: separator items may not have unique keys
+                        _jsx("div", { className: "PaPopupMenu-separator" }, `separator-${index}`)) : (_jsx(PopupMenuItemWrapper, { item: item, onHide: hide }, item.key))) }), footer && _jsx("div", { className: "PaPopupMenu-footer", children: footer(hide) })] })] }));
 }
 function PopupMenuItemWrapper({ item, onHide }) {
     const subMenuRef = useRef(null);
@@ -102,5 +107,7 @@ function PopupMenuItemWrapper({ item, onHide }) {
             return;
         return setupPopoverPositioning(subMenuEl, () => computePopupPosition(parentEl, subMenuEl, "right", "cardinal"));
     }, [item.subMenu]);
-    return (_jsxs("div", { className: "PaPopupMenu-item", popoverTargetAction: "toggle", popoverTarget: subMenuId.current, children: [_jsx(MenuItem, { item: itemWithSubmenuHandling }), item.subMenu && (_jsx("div", { className: "PaPopupMenu-submenu", popover: "auto", id: subMenuId.current, ref: subMenuRef, children: item.subMenu.map((subItem) => (_jsx(PopupMenuItemWrapper, { item: subItem, onHide: onHide }, subItem.key))) }))] }));
+    return (_jsxs("div", { className: "PaPopupMenu-item", popoverTargetAction: "toggle", popoverTarget: subMenuId.current, children: [_jsx(MenuItem, { item: itemWithSubmenuHandling }), item.subMenu && (_jsx("div", { className: "PaPopupMenu-submenu", popover: "auto", id: subMenuId.current, ref: subMenuRef, children: item.subMenu.map((subItem, index) => isSeparator(subItem) ? (
+                // biome-ignore lint/suspicious/noArrayIndexKey: separator items may not have unique keys
+                _jsx("div", { className: "PaPopupMenu-separator" }, `separator-${index}`)) : (_jsx(PopupMenuItemWrapper, { item: subItem, onHide: onHide }, subItem.key))) }))] }));
 }

package/dist/SideMenu.js

@@ -2,12 +2,23 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import "../styles/SideMenu.css";
 import { Accordion } from "./Accordion.js";
 import { MenuItem } from "./MenuItem.js";
+function isSeparator(item) {
+    return "separator" in item && item.separator === true;
+}
 export function SideMenu({ menu }) {
-    return (_jsx(_Fragment, { children: menu.map((child) => (_jsx(AccordionOrMenuItem, { item: child }, child.key))) }));
+    return (_jsx(_Fragment, { children: menu.map((child, index) => {
+            return isSeparator(child) ? (
+            // biome-ignore lint/suspicious/noArrayIndexKey: separator items may not have unique keys
+            _jsx("div", { className: "PaSideMenu-separator" }, `separator-${index}`)) : (_jsx(AccordionOrMenuItem, { item: child }, child.key));
+        }) }));
 }
 function AccordionOrMenuItem({ item }) {
     if (item.subMenu) {
-        return (_jsx(Accordion, { header: item, expanded: item.expanded, children: item.subMenu.map((child) => (_jsx(AccordionOrMenuItem, { item: child }, child.key))) }));
+        return (_jsx(Accordion, { header: item, expanded: item.expanded, children: item.subMenu.map((child, index) => {
+                return isSeparator(child) ? (
+                // biome-ignore lint/suspicious/noArrayIndexKey: separator items may not have unique keys
+                _jsx("div", { className: "PaSideMenu-separator" }, `separator-${index}`)) : (_jsx(AccordionOrMenuItem, { item: child }, child.key));
+            }) }));
     }
     return _jsx(MenuItem, { item: item });
 }

package/dist/SortableList.js

@@ -17,9 +17,8 @@ export function SortableList({ items, onReorder, keyField, renderItem, direction
     }, [items, keyField]);
     const handleSetList = (newList) => {
         // Ignore empty list updates from ReactSortable during initialization
-        if (newList.length === 0 && sortableItems.length > 0) {
+        if (newList.length === 0 && sortableItems.length > 0)
             return;
-        }
         setSortableItems(newList);
         onReorder(newList.map((item) => item.data));
     };

package/dist/Spinner.d.ts

@@ -1,2 +1,6 @@
 import "../styles/Spinner.css";
-export declare function Spinner(): import("react/jsx-runtime").JSX.Element;
+export interface SpinnerProps {
+    /** @default `"medium"` */
+    size?: "small" | "medium" | "large";
+}
+export declare function Spinner({ size }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Spinner.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "../styles/Spinner.css";
-export function Spinner() {
-    return _jsx("div", { className: "PaSpinner" });
+import clsx from "clsx";
+export function Spinner({ size = "medium" }) {
+    return _jsx("div", { className: clsx("PaSpinner", size) });
 }

package/dist/SplitButton.js

@@ -10,8 +10,6 @@ export function SplitButton(props) {
     const containerRef = useRef(null);
     const menuRef = useRef(null);
     const menuId = useRef(`pa-splitbtn-menu-${Math.random().toString(36).substring(2, 9)}`);
-    const severity = props.severity ?? "primary";
-    const disabled = props.disabled;
     const hasEnabledItems = items.some((item) => !item.disabled);
     useEffect(() => {
         const menu = menuRef.current;
@@ -36,5 +34,5 @@ export function SplitButton(props) {
             menuRef.current?.hidePopover();
         }
     };
-    return (_jsxs("div", { ref: containerRef, className: clsx("PaSplitBtn", severity, disabled && "disabled", className), children: [_jsx(Button, { ...buttonProps, className: "PaSplitBtn-main" }), _jsx("button", { type: "button", className: "PaSplitBtn-toggle", popoverTarget: menuId.current, popoverTargetAction: "toggle", "aria-haspopup": "menu", disabled: !hasEnabledItems, children: _jsx(ChevronDown, { className: "PaSplitBtn-toggleIcon" }) }), _jsx("div", { ref: menuRef, id: menuId.current, className: "PaSplitBtn-menu", role: "menu", popover: "auto", children: items.map((item) => (_jsxs("button", { type: "button", className: clsx("PaSplitBtn-menuItem", item.danger && "danger", item.disabled && "disabled"), onClick: () => void handleItemClick(item), role: "menuitem", disabled: item.disabled, children: [item.icon && _jsx("span", { className: "PaSplitBtn-menuIcon", children: item.icon }), item.label] }, item.label))) })] }));
+    return (_jsxs("div", { ref: containerRef, className: clsx("PaSplitBtn", className, { outlined: props.outlined }), children: [_jsx(Button, { ...buttonProps, className: "PaSplitBtn-main" }), _jsx("button", { type: "button", className: clsx("PaSplitBtn-toggle", props.severity ?? "primary"), popoverTarget: menuId.current, popoverTargetAction: "toggle", "aria-haspopup": "menu", disabled: !hasEnabledItems, children: _jsx(ChevronDown, { className: "PaSplitBtn-toggleIcon" }) }), _jsx("div", { ref: menuRef, id: menuId.current, className: "PaSplitBtn-menu", role: "menu", popover: "auto", children: items.map((item) => (_jsxs("button", { type: "button", className: clsx("PaSplitBtn-menuItem", item.danger && "danger"), onClick: () => void handleItemClick(item), role: "menuitem", disabled: item.disabled, children: [item.icon && _jsx("span", { className: "PaSplitBtn-menuIcon", children: item.icon }), item.label] }, item.label))) })] }));
 }

package/dist/Tabs.js

@@ -10,7 +10,7 @@ export function Tabs({ children, value, onChange, variant = "default", className
             tabs.push(child.props);
         }
     });
-    return (_jsx("div", { className: clsx("PaTabs", variant, className), role: "tablist", children: tabs.map((tab) => (_jsxs("button", { type: "button", className: clsx("PaTab", value === tab.value && "active", tab.disabled && "disabled", tab.className), onClick: () => !tab.disabled && onChange(tab.value), disabled: tab.disabled, role: "tab", "aria-selected": value === tab.value, children: [tab.icon && _jsx("span", { className: "PaTab-icon", children: tab.icon }), tab.label] }, tab.value))) }));
+    return (_jsx("div", { className: clsx("PaTabs", variant, className), role: "tablist", children: tabs.map((tab) => (_jsxs("button", { type: "button", className: clsx("PaTab", value === tab.value && "active", tab.className), onClick: () => !tab.disabled && onChange(tab.value), disabled: tab.disabled, role: "tab", "aria-selected": value === tab.value, children: [tab.icon && _jsx("span", { className: "PaTab-icon", children: tab.icon }), tab.label] }, tab.value))) }));
 }
 /**
  * Render-less component for tab definition.

package/dist/ToggleButton.d.ts

@@ -6,6 +6,7 @@ export interface ToggleButtonProps {
     children: ReactNode;
     className?: string;
     disabled?: boolean;
+    severity?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
     "aria-label"?: string;
 }
-export declare function ToggleButton({ checked, onChange, children, className, disabled, ...rest }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleButton({ checked, onChange, children, className, disabled, severity, ...rest }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/ToggleButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "../styles/ToggleButton.css";
 import { clsx } from "clsx";
-export function ToggleButton({ checked, onChange, children, className, disabled, ...rest }) {
-    return (_jsx("button", { type: "button", className: clsx("PaToggleBtn", checked && "active", disabled && "disabled", className), onClick: () => !disabled && onChange(!checked), disabled: disabled, "aria-pressed": checked, ...rest, children: children }));
+export function ToggleButton({ checked, onChange, children, className, disabled, severity = "primary", ...rest }) {
+    return (_jsx("button", { type: "button", className: clsx("PaToggleBtn", severity, checked && "active", className), onClick: () => !disabled && onChange(!checked), disabled: disabled, "aria-pressed": checked, ...rest, children: children }));
 }

package/dist/ToggleGroup.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "../styles/ToggleGroup.css";
 import { clsx } from "clsx";
 export function ToggleGroup({ value, onChange, options, className, disabled }) {
-    return (_jsx("fieldset", { className: clsx("PaToggleGroup", disabled && "disabled", className), disabled: disabled, children: options.map((option) => (_jsx("button", { type: "button", className: clsx("PaToggleGroup-item", value === option.value && "active", option.disabled && "disabled"), onClick: () => !option.disabled && onChange(option.value), disabled: option.disabled, "aria-pressed": value === option.value, children: option.label }, option.value))) }));
+    return (_jsx("fieldset", { className: clsx("PaToggleGroup", className), disabled: disabled, children: options.map((option) => (_jsx("button", { type: "button", className: clsx("PaToggleGroup-item", value === option.value && "active"), onClick: () => !option.disabled && onChange(option.value), disabled: option.disabled, "aria-pressed": value === option.value, children: option.label }, option.value))) }));
 }

package/dist/index.d.ts

@@ -2,12 +2,12 @@ import "../styles/theme/index.css";
 export * from "./Checkbox.js";
 export * from "./DateInput.js";
 export * from "./InputNumber.js";
+export * from "./InputSwitch.js";
 export * from "./InputText.js";
 export * from "./MultiSelect.js";
 export * from "./PasswordInput.js";
 export * from "./RadioButton.js";
 export * from "./Select.js";
-export * from "./Switch.js";
 export * from "./Textarea.js";
 export * from "./ToggleGroup.js";
 export * from "./Button.js";
@@ -17,7 +17,6 @@ export * from "./Alert.js";
 export * from "./Badge.js";
 export * from "./Card.js";
 export * from "./Chip.js";
-export * from "./Column.js";
 export * from "./DataTable.js";
 export * from "./Breadcrumb.js";
 export * from "./MenuItem.js";

package/dist/index.js

@@ -3,12 +3,12 @@ import "../styles/theme/index.css";
 export * from "./Checkbox.js";
 export * from "./DateInput.js";
 export * from "./InputNumber.js";
+export * from "./InputSwitch.js";
 export * from "./InputText.js";
 export * from "./MultiSelect.js";
 export * from "./PasswordInput.js";
 export * from "./RadioButton.js";
 export * from "./Select.js";
-export * from "./Switch.js";
 export * from "./Textarea.js";
 export * from "./ToggleGroup.js";
 // Buttons
@@ -20,7 +20,6 @@ export * from "./Alert.js";
 export * from "./Badge.js";
 export * from "./Card.js";
 export * from "./Chip.js";
-export * from "./Column.js";
 export * from "./DataTable.js";
 // Navigation
 export * from "./Breadcrumb.js";

package/dist/paroi-ui-lib-types.d.ts

@@ -35,7 +35,8 @@ export interface MenuOption {
     popupMenu?: MenuNode[];
     active?: boolean;
 }
-export interface MenuNode extends MenuOption {
+export type MenuNode = OptionMenuNode | SeparatorMenuNode;
+export interface OptionMenuNode extends MenuOption {
     /**
      * An array of child menu items.
      */
@@ -45,3 +46,6 @@ export interface MenuNode extends MenuOption {
      */
     expanded?: boolean;
 }
+export interface SeparatorMenuNode {
+    separator: true;
+}

package/dist/popup-positioning.js

@@ -45,11 +45,12 @@ function getConstrainingBounds(triggerEl) {
             bottom: rect.bottom,
         };
     }
+    const viewport = window.visualViewport;
     return {
         top: 0,
         left: 0,
-        right: window.innerWidth,
-        bottom: window.innerHeight,
+        right: viewport?.width ?? window.innerWidth,
+        bottom: viewport?.height ?? window.innerHeight,
     };
 }
 function computeCornerPosition(triggerRect, popupWidth, popupHeight, bounds, preferredPosition) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/react-ui",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",

package/styles/Accordion.css

@@ -24,6 +24,13 @@
   background: var(--color-bg-subtle);
   transition: background-color var(--transition);
 
+  &:disabled,
+  &.disabled {
+    color: var(--color-text-muted);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
   /* &:hover {
     background: var(--color-bg-section);
   } */

package/styles/Alert.css

@@ -55,10 +55,16 @@
     color 0.15s,
     background-color 0.15s;
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: var(--color-text);
     background: rgb(0 0 0 / 10%);
   }
+
+  &:disabled {
+    color: var(--color-text-light);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 }
 
 .PaAlert-title {

package/styles/Breadcrumb.css

@@ -21,15 +21,34 @@
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   white-space: nowrap;
+
+  &.iconBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+  }
+}
+
+._mobile .PaNavbar-item {
+  padding: 0 var(--space-2);
 }
 
 .PaBreadcrumb-link:is(a, button) {
   cursor: pointer;
   transition: color var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled):not(.disabled) {
     color: var(--color-primary);
   }
+
+  &:disabled,
+  &.disabled {
+    color: var(--color-text-muted);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 }
 
 .PaBreadcrumb-separator {
@@ -45,13 +64,3 @@
     height: 16px;
   }
 }
-
-.PaBreadcrumb-current {
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
-  white-space: nowrap;
-}

package/styles/Button.css

@@ -1,6 +1,7 @@
 /* ========================================
    Buttons
    ======================================== */
+._paForm button,
 .PaBtn {
   display: inline-flex;
   gap: var(--space-2);
@@ -24,11 +25,12 @@
   }
 
   /* Primary button */
+  &,
   &.primary {
     color: var(--color-text-inverse);
     background: var(--color-primary);
 
-    &:hover {
+    &:hover:not(:disabled):not(.disabled) {
       background: var(--color-primary-hover);
     }
 
@@ -40,10 +42,10 @@
   /* Secondary button (outline) */
   &.secondary {
     color: var(--color-text-muted);
-    background: transparent;
+    background: var(--color-bg-muted);
     border: 1px solid var(--color-border);
 
-    &:hover {
+    &:hover:not(:disabled):not(.disabled) {
       color: var(--color-text);
       background: var(--color-bg-subtle);
       border-color: var(--color-text-muted);
@@ -60,7 +62,7 @@
     color: var(--color-text-muted);
     background: transparent;
 
-    &:hover {
+    &:hover:not(:disabled):not(.disabled) {
       color: var(--color-text);
       background: var(--color-bg-subtle);
     }
@@ -71,7 +73,7 @@
     color: var(--color-text-inverse);
     background: var(--color-danger);
 
-    &:hover {
+    &:hover:not(:disabled):not(.disabled) {
       background: var(--color-danger-dark);
     }
   }
@@ -82,7 +84,7 @@
     background: transparent;
     border: 2px solid var(--color-yellow);
 
-    &:hover {
+    &:hover:not(:disabled):not(.disabled) {
       background: var(--color-yellow-light);
     }
   }
@@ -107,10 +109,44 @@
   /* Disabled state */
   &:disabled,
   &.disabled {
+    color: var(--color-text-disabled);
     pointer-events: none;
     cursor: not-allowed;
-    opacity: 0.6;
-    filter: grayscale(40%);
+    background: var(--color-bg-disabled);
+    border-color: var(--color-bg-disabled);
+
+    &.outlined {
+      background: transparent;
+      border-color: var(--color-border-disabled);
+    }
+
+    &.primary {
+      color: var(--color-primary-disabled);
+      background: var(--color-primary-bg-disabled);
+      border-color: var(--color-primary-bg-disabled);
+
+      &.outlined {
+        background: transparent;
+        border-color: var(--color-primary-disabled);
+      }
+    }
+
+    &.danger {
+      color: var(--color-danger-disabled);
+      background: var(--color-danger-bg-disabled);
+      border-color: var(--color-danger-bg-disabled);
+
+      &.outlined {
+        background: transparent;
+        border-color: var(--color-danger-disabled);
+      }
+    }
+
+    &.warning {
+      color: var(--color-warning-disabled);
+      background: transparent;
+      border-color: var(--color-warning-disabled);
+    }
   }
 
   /* Outlined variant */
@@ -119,7 +155,7 @@
     border: 1px solid currentColor;
   }
 
-  &.danger.outlined {
+  &.danger.outlined:not(:disabled):not(.disabled) {
     color: var(--color-danger);
 
     &:hover {
@@ -127,7 +163,7 @@
     }
   }
 
-  &.primary.outlined {
+  &.primary.outlined:not(:disabled):not(.disabled) {
     color: var(--color-primary);
 
     &:hover {

package/styles/Checkbox.css

@@ -9,6 +9,7 @@
   user-select: none;
 }
 
+._paForm input[type="checkbox"],
 .PaCheckboxInput {
   display: flex;
   flex-shrink: 0;
@@ -51,7 +52,8 @@
 
   &:disabled {
     cursor: not-allowed;
-    opacity: 0.5;
+    background: var(--color-bg-muted);
+    border-color: var(--color-border-light);
   }
 }