@paroicms/react-ui 0.4.4 → 0.5.0

package/dist/Accordion.d.ts

@@ -0,0 +1,10 @@
+import "../styles/Accordion.css";
+import { type ReactNode } from "react";
+import type { MenuOption } from "./paroi-ui-lib-types.js";
+export interface AccordionProps {
+    children: ReactNode;
+    header: MenuOption;
+    /** Initial value */
+    expanded?: boolean;
+}
+export declare function Accordion({ children, header, expanded }: AccordionProps): import("react/jsx-runtime").JSX.Element;

package/dist/{PuAccordion.jsx → Accordion.js}

@@ -1,7 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/Accordion.css";
 import { useAsyncEffect } from "@paroi/use-async-effect";
 import { useRef, useState } from "react";
-import { PuMenuItem } from "./PuMenuItem.jsx";
-export function PuAccordion({ children, header, expanded }) {
+import { MenuItem } from "./MenuItem.js";
+export function Accordion({ children, header, expanded }) {
     const [isExpanded, setIsExpanded] = useState(expanded ?? false);
     const contentRef = useRef(null);
     useAsyncEffect(async () => {
@@ -19,12 +21,7 @@ export function PuAccordion({ children, header, expanded }) {
             await startTransition(content, isExpanded);
         }
     }, [isExpanded]);
-    return (<div className="PuAccordion">
-      <PuMenuItem item={header} expanded={isExpanded} onToggle={setIsExpanded}/>
-      <div className="PuAccordion-content initializing" ref={contentRef}>
-        {children}
-      </div>
-    </div>);
+    return (_jsxs("div", { className: "PaAccordion", children: [_jsx(MenuItem, { item: header, expanded: isExpanded, onToggle: setIsExpanded }), _jsx("div", { className: "PaAccordion-content initializing", ref: contentRef, children: children })] }));
 }
 function startTransition(content, isOpen) {
     if (isOpen) {

package/dist/Alert.d.ts

@@ -0,0 +1,10 @@
+import "../styles/Alert.css";
+import type { ReactNode } from "react";
+export interface AlertProps {
+    children: ReactNode;
+    severity?: "info" | "success" | "warning" | "error" | "primary";
+    title?: string;
+    className?: string;
+    onClose?: () => void;
+}
+export declare function Alert({ children, severity, title, className, onClose }: AlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/Alert.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/Alert.css";
+import { clsx } from "clsx";
+import { X } from "lucide-react";
+export function Alert({ children, severity = "info", title, className, onClose }) {
+    return (_jsxs("div", { className: clsx("PaAlert", severity, onClose && "dismissible", className), children: [onClose && (_jsx("button", { type: "button", className: "PaAlert-closeBtn", onClick: onClose, "aria-label": "Close", children: _jsx(X, { size: 16 }) })), title && _jsx("div", { className: "PaAlert-title", children: title }), _jsx("div", { className: "PaAlert-content", children: children })] }));
+}

package/dist/Badge.d.ts

@@ -0,0 +1,8 @@
+import "../styles/Badge.css";
+import type { ReactNode } from "react";
+export interface BadgeProps {
+    children: ReactNode;
+    severity?: "default" | "primary" | "accent" | "success" | "warning" | "danger" | "info" | "secondary" | "contrast";
+    className?: string;
+}
+export declare function Badge({ children, severity, className }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/Badge.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../styles/Badge.css";
+import { clsx } from "clsx";
+export function Badge({ children, severity = "default", className }) {
+    return _jsx("span", { className: clsx("PaBadge", severity, className), children: children });
+}

package/dist/Breadcrumb.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import "../styles/Breadcrumb.css";
+export interface BreadcrumbItem {
+    label: string;
+    icon?: ReactNode;
+    url?: string;
+    onClick?: () => void;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+    className?: string;
+}
+export declare function Breadcrumb({ items, separator, className, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/Breadcrumb.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ChevronRight } from "lucide-react";
+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}`));
+        }) }));
+}

package/dist/Button.d.ts

@@ -0,0 +1,36 @@
+import "../styles/Button.css";
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from "react";
+export type ButtonProps = ButtonElProps | AsyncButtonElProps | AnchorElProps;
+interface ButtonBaseProps {
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    outlined?: boolean;
+    icon?: ReactNode;
+    severity?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
+}
+export interface ButtonElProps extends ButtonBaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
+    as?: "button";
+    type?: "button" | "submit" | "reset";
+    onClick?(e: MouseEvent<HTMLButtonElement>): unknown;
+    insideFeedback?: InsideFeedback;
+    ref?: Ref<HTMLButtonElement>;
+}
+export interface InsideFeedback {
+    label: string;
+    autoDismiss?: boolean;
+}
+export interface AsyncButtonElProps extends ButtonBaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
+    as: "async";
+    type?: "button";
+    onClick: (e: MouseEvent<HTMLButtonElement>) => Promise<unknown>;
+    insideFeedback?: InsideFeedback;
+    onError?: (error: unknown) => void;
+    ref?: Ref<HTMLButtonElement>;
+}
+export interface AnchorElProps extends ButtonBaseProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
+    as: "a";
+    ref?: Ref<HTMLAnchorElement>;
+}
+export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Button.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "../styles/Button.css";
+import { clsx } from "clsx";
+import { Check, Loader2 } from "lucide-react";
+import { useCallback, useState, } from "react";
+import { useReactUIConfig } from "./react-ui-provider.js";
+export function Button(props) {
+    const { children, className, disabled, outlined, icon, severity = "primary", ref, ...rest } = props;
+    const { autoDismissInsideFeedbackDurationMs } = useReactUIConfig();
+    const [loading, setLoading] = useState(false);
+    const [showFeedback, setShowFeedback] = useState(false);
+    const classNames = clsx("PaBtn", severity, outlined && "outlined", disabled && "disabled", showFeedback && "feedback", className);
+    const handleAsyncClick = useCallback(async (e) => {
+        if (props.as !== "async")
+            return;
+        setLoading(true);
+        setShowFeedback(false);
+        try {
+            await props.onClick(e);
+            if (props.insideFeedback) {
+                setShowFeedback(true);
+                if (props.insideFeedback.autoDismiss) {
+                    setTimeout(() => setShowFeedback(false), autoDismissInsideFeedbackDurationMs);
+                }
+            }
+        }
+        catch (error) {
+            props.onError?.(error);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [
+        props.as,
+        ...(props.as === "async"
+            ? [
+                props.onClick,
+                !!props.insideFeedback,
+                props.insideFeedback?.autoDismiss,
+                props.onError,
+                autoDismissInsideFeedbackDurationMs,
+            ]
+            : []),
+    ]);
+    const handleSyncClick = useCallback((e) => {
+        if (props.as && props.as !== "button")
+            return;
+        if (props.onClick) {
+            props.onClick(e);
+        }
+        if (props.insideFeedback) {
+            setShowFeedback(true);
+            if (props.insideFeedback.autoDismiss) {
+                setTimeout(() => setShowFeedback(false), autoDismissInsideFeedbackDurationMs);
+            }
+        }
+    }, [
+        props.as,
+        props.onClick,
+        ...(!props.as || props.as === "button"
+            ? [
+                !!props.insideFeedback,
+                props.insideFeedback?.autoDismiss,
+                autoDismissInsideFeedbackDurationMs,
+            ]
+            : []),
+    ]);
+    if (props.as === "a") {
+        const { as, ...anchorProps } = rest;
+        return (_jsxs("a", { ref: ref, className: classNames, ...anchorProps, children: [icon && _jsx("span", { className: "PaBtn-icon", children: icon }), children] }));
+    }
+    const { as, onClick, type = "button", insideFeedback, ...buttonProps } = rest;
+    return (_jsx("button", { ref: ref, className: classNames, disabled: disabled || loading, onClick: as === "async" ? handleAsyncClick : handleSyncClick, type: type, ...buttonProps, children: loading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 16, className: "PaBtn-spinner" }), children] })) : showFeedback && insideFeedback ? (_jsxs(_Fragment, { children: [_jsx(Check, { size: 16, className: "PaBtn-feedbackIcon" }), insideFeedback.label] })) : (_jsxs(_Fragment, { children: [icon && _jsx("span", { className: "PaBtn-icon", children: icon }), children] })) }));
+}

package/dist/Card.d.ts

@@ -0,0 +1,10 @@
+import "../styles/Card.css";
+import type { ReactNode } from "react";
+export interface CardProps {
+    children: ReactNode;
+    header?: ReactNode;
+    title?: string;
+    subtitle?: string;
+    className?: string;
+}
+export declare function Card({ children, header, title, subtitle, className }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/Card.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/Card.css";
+import { clsx } from "clsx";
+export function Card({ children, header, title, subtitle, className }) {
+    const hasHeader = header || title || subtitle;
+    return (_jsxs("div", { className: clsx("PaCard", className), children: [hasHeader && (_jsx("div", { className: "PaCard-header", children: header || (_jsxs(_Fragment, { children: [title && _jsx("h3", { className: "PaCard-title", children: title }), subtitle && _jsx("p", { className: "PaCard-subtitle", children: subtitle })] })) })), children] }));
+}

package/dist/Checkbox.d.ts

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

package/dist/Checkbox.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/Checkbox.css";
+import { clsx } from "clsx";
+export function Checkbox({ checked, onChange, label, className, ...rest }) {
+    const handleChange = (e) => {
+        onChange(e.target.checked);
+    };
+    if (label) {
+        return (_jsxs("label", { className: clsx("PaCheckbox", className), children: [_jsx("input", { className: "PaCheckbox-input", type: "checkbox", checked: checked, onChange: handleChange, ...rest }), _jsx("span", { className: "PaCheckbox-label", children: label })] }));
+    }
+    return (_jsx("input", { className: clsx("PaCheckbox-input", className), type: "checkbox", checked: checked, onChange: handleChange, ...rest }));
+}

package/dist/Chip.d.ts

@@ -0,0 +1,8 @@
+import "../styles/Chip.css";
+export interface ChipProps {
+    label: string;
+    onRemove?: () => void;
+    className?: string;
+    removable?: boolean;
+}
+export declare function Chip({ label, onRemove, className, removable }: ChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/Chip.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { X } from "lucide-react";
+import "../styles/Chip.css";
+export function Chip({ label, onRemove, className, removable = true }) {
+    return (_jsxs("span", { className: clsx("PaChip", className), children: [_jsx("span", { className: "PaChip-label", children: label }), removable && onRemove && (_jsx("button", { type: "button", className: "PaChip-remove", onClick: onRemove, "aria-label": `Remove ${label}`, children: _jsx(X, { size: 12 }) }))] }));
+}

package/dist/Column.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties, ReactNode } from "react";
+export interface ColumnProps<T = unknown> {
+    field?: keyof T & string;
+    header?: string;
+    body?: (rowData: T) => ReactNode;
+    style?: CSSProperties;
+    sortable?: boolean;
+    bodyClassName?: string;
+}
+/**
+ * Render-less component for column definition.
+ * Used for configuration only - does not render anything.
+ */
+export declare function Column<T>(_props: ColumnProps<T>): null;

package/dist/Column.js

@@ -0,0 +1,7 @@
+/**
+ * Render-less component for column definition.
+ * Used for configuration only - does not render anything.
+ */
+export function Column(_props) {
+    return null;
+}

package/dist/DataTable.d.ts

@@ -0,0 +1,30 @@
+import "../styles/DataTable.css";
+import { type ReactNode } from "react";
+export interface DataTableProps<T> {
+    value: T[];
+    dataKey: keyof T & string;
+    size?: "small" | "normal";
+    loading?: boolean;
+    children: ReactNode;
+    className?: string;
+    emptyMessage?: string;
+    paginator?: boolean;
+    rows?: number;
+    totalRecords?: number;
+    first?: number;
+    onPage?: (event: {
+        first: number;
+        rows: number;
+    }) => void;
+    rowsPerPageOptions?: number[];
+    sortField?: string;
+    sortOrder?: 1 | -1;
+    onSort?: (event: {
+        field: string;
+        order: 1 | -1;
+    }) => void;
+    onRowClick?: (row: T, event: React.MouseEvent) => void;
+    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;

package/dist/DataTable.js

@@ -0,0 +1,26 @@
+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);
+        }
+    });
+    const total = totalRecords ?? value.length;
+    const pageCount = Math.ceil(total / rows);
+    const currentPage = Math.floor(first / rows) + 1;
+    const handleSort = (field) => {
+        if (!field || !onSort)
+            return;
+        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) }) }))] })] }))] }));
+}

package/dist/DateInput.d.ts

@@ -0,0 +1,9 @@
+import "../styles/DateInput.css";
+import type { InputHTMLAttributes, Ref } from "react";
+export interface DateInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    type: "date" | "datetime-local" | "time";
+    label?: string;
+    error?: string;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function DateInput({ className, label, error, type, ref, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/DateInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/DateInput.css";
+import { clsx } from "clsx";
+export function DateInput({ className, label, error, type, ref, ...props }) {
+    const inputElement = (_jsx("input", { ref: ref, type: type, className: clsx("PaDateInput-field", error && "error"), ...props }));
+    return (_jsxs("span", { className: clsx("PaDateInput", className), children: [label ? (_jsxs("label", { className: "PaDateInput-wrapper", children: [_jsx("span", { className: "PaDateInput-label", children: label }), inputElement] })) : (inputElement), error && _jsx("span", { className: "PaDateInput-error", children: error })] }));
+}

package/dist/Dialog.d.ts

@@ -0,0 +1,13 @@
+import "../styles/Dialog.css";
+import { type ReactNode } from "react";
+export interface DialogProps {
+    visible: boolean;
+    onHide: () => void;
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    closable?: boolean;
+    modal?: boolean;
+}
+export declare function Dialog({ visible, onHide, header, footer, children, className, closable, modal, }: DialogProps): import("react").ReactPortal | null;

package/dist/Dialog.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/Dialog.css";
+import { clsx } from "clsx";
+import { X } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+/** Track dialog stack for ESC key handling - only topmost dialog should respond */
+let dialogStackCounter = 0;
+export function Dialog({ visible, onHide, header, footer, children, className, closable = true, modal = true, }) {
+    // Track this dialog's position in the stack for ESC key handling
+    const dialogIdRef = useRef(undefined);
+    useEffect(() => {
+        if (visible) {
+            dialogIdRef.current = ++dialogStackCounter;
+        }
+        return () => {
+            if (dialogIdRef.current !== undefined) {
+                // Decrement only if this was the topmost dialog
+                if (dialogIdRef.current === dialogStackCounter) {
+                    dialogStackCounter--;
+                }
+                dialogIdRef.current = undefined;
+            }
+        };
+    }, [visible]);
+    // Handle escape key - only the topmost dialog should respond
+    useEffect(() => {
+        if (!visible || !closable)
+            return;
+        const handleKeyDown = (e) => {
+            // Only handle ESC if this is the topmost dialog
+            if (e.key === "Escape" && dialogIdRef.current === dialogStackCounter) {
+                onHide();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [visible, closable, onHide]);
+    // Prevent body scroll when open
+    useEffect(() => {
+        if (visible) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [visible]);
+    if (!visible)
+        return null;
+    const dialog = (_jsxs("div", { className: "PaDialog-overlay", children: [modal && _jsx("div", { className: "PaDialog-backdrop", onClick: closable ? onHide : undefined }), _jsxs("div", { className: clsx("PaDialog", className), role: "dialog", "aria-modal": modal, children: [(header || closable) && (_jsxs("div", { className: "PaDialog-header", children: [header && _jsx("div", { className: "PaDialog-title", children: header }), closable && (_jsx("button", { type: "button", className: "PaDialog-close", onClick: onHide, "aria-label": "Close", children: _jsx(X, { size: 18 }) }))] })), _jsx("div", { className: "PaDialog-content", children: children }), footer && _jsx("div", { className: "PaDialog-footer", children: footer })] })] }));
+    return createPortal(dialog, document.body);
+}

package/dist/Inplace.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import "../styles/Inplace.css";
+export interface InplaceProps {
+    display: ReactNode;
+    children: ReactNode;
+    active?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    className?: string;
+    closable?: boolean;
+}
+export declare function Inplace({ display, children, active, onOpen, onClose, className, closable, }: InplaceProps): import("react/jsx-runtime").JSX.Element;

package/dist/Inplace.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import "../styles/Inplace.css";
+export function Inplace({ display, children, active = false, onOpen, onClose, className, closable = true, }) {
+    if (!active) {
+        return (
+        // biome-ignore lint/a11y/useSemanticElements: custom behavior
+        _jsx("div", { className: clsx("PaInplace", "display", className), onClick: onOpen, onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onOpen?.();
+                }
+            }, tabIndex: 0, role: "button", children: display }));
+    }
+    return (_jsxs("div", { className: clsx("PaInplace", "active", className), children: [_jsx("div", { className: "PaInplace-content", children: children }), closable && onClose && (_jsx("button", { type: "button", className: "PaInplace-close", onClick: onClose, children: "Done" }))] }));
+}

package/dist/InputNumber.d.ts

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes, Ref } from "react";
+import "../styles/InputNumber.css";
+export interface InputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
+    label?: string;
+    error?: string;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function InputNumber({ className, label, error, value, onChange, min, max, step, ref, ...props }: InputNumberProps): import("react/jsx-runtime").JSX.Element;

package/dist/InputNumber.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import "../styles/InputNumber.css";
+export function InputNumber({ className, label, error, value, onChange, min, max, step, ref, ...props }) {
+    const handleChange = (e) => {
+        const val = e.target.value;
+        if (val === "") {
+            onChange(undefined);
+        }
+        else {
+            const num = Number(val);
+            if (!Number.isNaN(num)) {
+                onChange(num);
+            }
+        }
+    };
+    const inputElement = (_jsx("input", { ref: ref, type: "number", className: clsx("PaInputNumber-field", error && "error"), value: value ?? "", onChange: handleChange, min: min, max: max, step: step, ...props }));
+    return (_jsxs("span", { className: clsx("PaInputNumber", className), children: [label ? (_jsxs("label", { className: "PaInputNumber-wrapper", children: [_jsx("span", { className: "PaInputNumber-label", children: label }), inputElement] })) : (inputElement), error && _jsx("span", { className: "PaInputNumber-error", children: error })] }));
+}

package/dist/InputText.d.ts

@@ -0,0 +1,14 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import "../styles/InputText.css";
+export interface InputTextProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    value: string;
+    onChange: (value: string) => void;
+    label?: string;
+    error?: string;
+    className?: string;
+    fullWidth?: boolean;
+    endElement?: ReactNode;
+    icon?: ReactNode;
+    iconPosition?: "left" | "right";
+}
+export declare function InputText({ value, onChange, label, error, className, fullWidth, endElement, icon, iconPosition, ...rest }: InputTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/InputText.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import "../styles/InputText.css";
+export function InputText({ value, onChange, label, error, className, fullWidth = false, endElement, icon, iconPosition = "left", ...rest }) {
+    const handleChange = (e) => {
+        onChange(e.target.value);
+    };
+    const inputElement = (_jsx("input", { className: "PaInputText-field", value: value, onChange: handleChange, ...rest }));
+    const fieldContent = endElement ? (_jsxs("span", { className: "PaInputText-row", children: [inputElement, endElement] })) : icon ? (_jsxs("span", { className: clsx("PaInputText-iconWrapper", iconPosition === "right" && "iconRight"), children: [_jsx("span", { className: "PaInputText-icon", children: icon }), inputElement] })) : (inputElement);
+    return (_jsxs("span", { className: clsx("PaInputText", error && "error", fullWidth && "fullWidth", className), children: [label ? (_jsxs("label", { className: "PaInputText-wrapper", children: [_jsx("span", { className: "PaInputText-label", children: label }), fieldContent] })) : (fieldContent), error && _jsx("span", { className: "PaInputText-error", children: error })] }));
+}

package/dist/MenuItem.d.ts

@@ -0,0 +1,8 @@
+import "../styles/MenuItem.css";
+import type { MenuOption } from "./paroi-ui-lib-types.js";
+export interface MenuItemProps {
+    item: MenuOption;
+    expanded?: boolean;
+    onToggle?: (expanded: boolean) => void;
+}
+export declare function MenuItem({ item, expanded, onToggle }: MenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/MenuItem.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/MenuItem.css";
+import { clsx } from "clsx";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { PopupMenu } from "./PopupMenu.js";
+export function MenuItem({ item, expanded, onToggle }) {
+    let { key: id, label, icon, url, command, popupMenu, className, style, active, disabled } = item;
+    if (disabled) {
+        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
+                    ? (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));
+}

package/dist/MultiSelect.d.ts

@@ -0,0 +1,17 @@
+import "../styles/MultiSelect.css";
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    value: string[];
+    onChange: (value: string[]) => void;
+    options: MultiSelectOption[];
+    label?: string;
+    error?: string;
+    className?: string;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export declare function MultiSelect({ value, onChange, options, label, error, className, placeholder, disabled, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;