@paroicms/react-ui 0.4.4 → 0.5.1

package/dist/MultiSelect.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "../styles/MultiSelect.css";
+import { clsx } from "clsx";
+import { ChevronDown, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Checkbox } from "./Checkbox.js";
+import { computePopupPosition, setupPopoverPositioning } from "./popup-positioning.js";
+export function MultiSelect({ value, onChange, options, label, error, className, placeholder, disabled, position, }) {
+    const [open, setOpen] = useState(false);
+    const containerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const dropdownId = useRef(`pa-multiselect-${Math.random().toString(36).substring(2, 9)}`);
+    useEffect(() => {
+        const dropdown = dropdownRef.current;
+        const container = containerRef.current;
+        if (!dropdown || !container)
+            return;
+        const handleToggle = (e) => {
+            setOpen(e.newState === "open");
+        };
+        dropdown.addEventListener("toggle", handleToggle);
+        const cleanupPositioning = setupPopoverPositioning(dropdown, () => {
+            dropdown.style.width = `${container.offsetWidth}px`;
+            return computePopupPosition(container, dropdown, position ?? "auto", "vertical");
+        });
+        return () => {
+            dropdown.removeEventListener("toggle", handleToggle);
+            cleanupPositioning();
+        };
+    }, [position]);
+    const toggleOption = (optionValue) => {
+        if (value.includes(optionValue)) {
+            onChange(value.filter((v) => v !== optionValue));
+        }
+        else {
+            onChange([...value, optionValue]);
+        }
+    };
+    const removeValue = (optionValue) => {
+        onChange(value.filter((v) => v !== optionValue));
+    };
+    const selectedOptions = options.filter((opt) => value.includes(opt.value));
+    const controlElement = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "PaMultiSelect-control", onClick: () => !disabled && dropdownRef.current?.togglePopover(), onKeyDown: (e) => {
+                    if ((e.key === "Enter" || e.key === " ") && !disabled) {
+                        e.preventDefault();
+                        dropdownRef.current?.togglePopover();
+                    }
+                }, tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", children: [_jsx("span", { className: "PaMultiSelect-values", children: selectedOptions.length > 0 ? (selectedOptions.map((opt) => (_jsxs("span", { className: "PaMultiSelect-chip", children: [opt.label, _jsx("button", { type: "button", className: "PaMultiSelect-chipRemove", onClick: (e) => {
+                                        e.stopPropagation();
+                                        removeValue(opt.value);
+                                    }, "aria-label": `Remove ${opt.label}`, children: _jsx(X, { size: 12 }) })] }, opt.value)))) : (_jsx("span", { className: "PaMultiSelect-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "PaMultiSelect-icon", size: 16 })] }), _jsx("span", { ref: dropdownRef, id: dropdownId.current, className: "PaMultiSelect-dropdown", role: "listbox", popover: "auto", children: options.map((option) => (_jsxs("label", { className: clsx("PaMultiSelect-option", value.includes(option.value) && "selected", option.disabled && "disabled"), children: [_jsx(Checkbox, { checked: value.includes(option.value), onChange: () => toggleOption(option.value), disabled: option.disabled }), option.label] }, option.value))) })] }));
+    return (_jsxs("span", { ref: containerRef, className: clsx("PaMultiSelect", error && "error", disabled && "disabled", className), children: [label ? (_jsxs("label", { className: "PaMultiSelect-wrapper", children: [_jsx("span", { className: "PaMultiSelect-label", children: label }), controlElement] })) : (controlElement), error && _jsx("span", { className: "PaMultiSelect-error", children: error })] }));
+}

package/dist/Panel.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import "../styles/Panel.css";
+export interface PanelProps {
+    header: ReactNode;
+    collapsed?: boolean;
+    onToggle?: () => void;
+    children: ReactNode;
+    className?: string;
+    collapsible?: boolean;
+}
+export declare function Panel({ header, collapsed, onToggle, children, className, collapsible, }: PanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/Panel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import "../styles/Panel.css";
+export function Panel({ header, collapsed = false, onToggle, children, className, collapsible = true, }) {
+    const isCollapsible = collapsible && onToggle;
+    const headerContent = (_jsxs(_Fragment, { children: [isCollapsible && (_jsx("span", { className: "PaPanel-chevron", children: collapsed ? _jsx(ChevronRight, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) })), _jsx("span", { className: "PaPanel-title", children: header })] }));
+    return (_jsxs("div", { className: clsx("PaPanel", collapsed && "collapsed", className), children: [isCollapsible ? (_jsx("button", { type: "button", className: clsx("PaPanel-header", "collapsible"), onClick: onToggle, "aria-expanded": !collapsed, children: headerContent })) : (_jsx("div", { className: "PaPanel-header", children: headerContent })), !collapsed && _jsx("div", { className: "PaPanel-content", children: children })] }));
+}

package/dist/PasswordInput.d.ts

@@ -0,0 +1,8 @@
+import "../styles/PasswordInput.css";
+import { type InputHTMLAttributes, type Ref } from "react";
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    error?: string;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare function PasswordInput({ className, label, error, ref, ...props }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/PasswordInput.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/PasswordInput.css";
+import { clsx } from "clsx";
+import { Eye, EyeOff } from "lucide-react";
+import { useState } from "react";
+export function PasswordInput({ className, label, error, ref, ...props }) {
+    const [visible, setVisible] = useState(false);
+    const inputWithToggle = (_jsxs("span", { className: clsx("PaPasswordInput-inputWrapper", error && "error"), children: [_jsx("input", { ref: ref, type: visible ? "text" : "password", className: "PaPasswordInput-input", ...props }), _jsx("button", { type: "button", className: "PaPasswordInput-toggle", onClick: () => setVisible(!visible), tabIndex: -1, "aria-label": visible ? "Hide password" : "Show password", children: visible ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 }) })] }));
+    return (_jsxs("span", { className: clsx("PaPasswordInput", className), children: [label ? (_jsxs("label", { className: "PaPasswordInput-wrapper", children: [_jsx("span", { className: "PaPasswordInput-label", children: label }), inputWithToggle] })) : (inputWithToggle), error && _jsx("span", { className: "PaPasswordInput-error", children: error })] }));
+}

package/dist/PopupMenu.d.ts

@@ -0,0 +1,19 @@
+import "../styles/PopupMenu.css";
+import { type MouseEvent, type ReactNode, type Ref } from "react";
+import type { MenuNode } from "./paroi-ui-lib-types.js";
+export interface PopupMenuProps {
+    items: MenuNode[];
+    className?: string;
+    id?: string;
+    /** Position of the popup relative to the trigger. Default is 'auto'. */
+    position?: "auto" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+    /** Optional custom trigger element. If provided, it will be used instead of the default button. */
+    children?: ReactNode;
+    ref?: Ref<PopupMenuRef>;
+}
+export interface PopupMenuRef {
+    toggle: (event: MouseEvent) => void;
+    show: (event: MouseEvent) => void;
+    hide: () => void;
+}
+export declare function PopupMenu({ items, className, id, position, children, ref, }: PopupMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/PopupMenu.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/PopupMenu.css";
+import clsx from "clsx";
+import { ChevronRight, ChevronsDown } from "lucide-react";
+import { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, } from "react";
+import { Button } from "./Button.js";
+import { MenuItem } from "./MenuItem.js";
+import { computePopupPosition, setupPopoverPositioning } from "./popup-positioning.js";
+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, }) {
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    const menuIdRef = useRef(undefined);
+    if (menuIdRef.current === undefined) {
+        menuIdRef.current = id ?? `pa-popup-menu-${++seq}`;
+    }
+    const toggle = (_ev) => {
+        if (menuRef.current) {
+            menuRef.current.togglePopover();
+        }
+    };
+    const show = (_ev) => {
+        if (menuRef.current) {
+            menuRef.current.showPopover();
+        }
+    };
+    const hide = () => {
+        if (menuRef.current) {
+            menuRef.current.hidePopover();
+        }
+    };
+    useImperativeHandle(ref, () => ({
+        toggle,
+        show,
+        hide,
+    }));
+    // Position popover when it opens
+    useEffect(() => {
+        const menuEl = menuRef.current;
+        const triggerEl = triggerRef.current;
+        if (!menuEl || !triggerEl)
+            return;
+        return setupPopoverPositioning(menuEl, () => computePopupPosition(triggerEl, menuEl, position, "corner"));
+    }, [position]);
+    const triggerProps = {
+        popoverTarget: menuIdRef.current,
+        popoverTargetAction: "toggle",
+    };
+    // Render custom trigger if provided, otherwise use default button
+    const renderTrigger = () => {
+        if (children && isValidElement(children)) {
+            return cloneElement(children, {
+                ref: triggerRef,
+                "aria-controls": menuIdRef.current,
+                "aria-haspopup": true,
+                ...triggerProps,
+            });
+        }
+        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))) }) })] }));
+}
+function PopupMenuItemWrapper({ item, onHide }) {
+    const subMenuRef = useRef(null);
+    const subMenuId = useRef(`pa-submenu-${item.key}-${Math.random().toString(36).substring(2, 9)}`);
+    // For items with submenu, override the command to toggle the submenu
+    const itemWithSubmenuHandling = { ...item };
+    if (item.subMenu && item.subMenu.length > 0) {
+        // Create submenu trigger icon
+        const originalIcon = item.icon;
+        itemWithSubmenuHandling.icon = originalIcon || _jsx(ChevronRight, { size: 14 });
+        // Create a command that opens the submenu
+        const originalCommand = item.command;
+        itemWithSubmenuHandling.command = () => {
+            if (originalCommand) {
+                originalCommand();
+            }
+            // Will be handled by popovertarget attribute
+        };
+    }
+    else {
+        // For regular items, add onHide to the command
+        const originalCommand = item.command;
+        itemWithSubmenuHandling.command = () => {
+            if (originalCommand) {
+                originalCommand();
+            }
+            onHide();
+        };
+    }
+    // Handle submenu positioning with Popover API
+    useEffect(() => {
+        const subMenuEl = subMenuRef.current;
+        if (!subMenuEl || !item.subMenu)
+            return;
+        const parentEl = subMenuEl.parentElement;
+        if (!parentEl)
+            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))) }))] }));
+}

package/dist/RadioButton.d.ts

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

package/dist/RadioButton.js

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

package/dist/Select.d.ts

@@ -0,0 +1,18 @@
+import "../styles/Select.css";
+import type { SelectHTMLAttributes } from "react";
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "onChange"> {
+    value: string;
+    onChange: (value: string) => void;
+    options: SelectOption[];
+    label?: string;
+    error?: string;
+    className?: string;
+    fullWidth?: boolean;
+    placeholder?: string;
+}
+export declare function Select({ value, onChange, options, label, error, className, fullWidth, placeholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/Select.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/Select.css";
+import { clsx } from "clsx";
+import { ChevronDown } from "lucide-react";
+export function Select({ value, onChange, options, label, error, className, fullWidth = false, placeholder, ...rest }) {
+    const handleChange = (e) => {
+        onChange(e.target.value);
+    };
+    const selectWithIcon = (_jsxs("span", { className: "PaSelect-fieldWrapper", children: [_jsxs("select", { className: "PaSelect-field", value: value, onChange: handleChange, ...rest, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), _jsx(ChevronDown, { className: "PaSelect-icon", size: 16 })] }));
+    return (_jsxs("span", { className: clsx("PaSelect", error && "error", fullWidth && "fullWidth", className), children: [label ? (_jsxs("label", { className: "PaSelect-wrapper", children: [_jsx("span", { className: "PaSelect-label", children: label }), selectWithIcon] })) : (selectWithIcon), error && _jsx("span", { className: "PaSelect-error", children: error })] }));
+}

package/dist/SideMenu.d.ts

@@ -0,0 +1,5 @@
+import "../styles/SideMenu.css";
+import type { MenuNode } from "./paroi-ui-lib-types.js";
+export declare function SideMenu({ menu }: {
+    menu: MenuNode[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/SideMenu.js

@@ -0,0 +1,13 @@
+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";
+export function SideMenu({ menu }) {
+    return (_jsx(_Fragment, { children: menu.map((child) => (_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(MenuItem, { item: item });
+}

package/dist/SortableList.d.ts

@@ -0,0 +1,19 @@
+import "../styles/SortableList.css";
+import { type ReactNode } from "react";
+export interface SortableListProps<T> {
+    /** Items to display and reorder */
+    items: T[];
+    /** Callback when items are reordered */
+    onReorder: (items: T[]) => void;
+    /** Field name used as unique key for each item */
+    keyField: keyof T & string;
+    /** Render function for each item */
+    renderItem: (item: T, index: number) => ReactNode;
+    /** Layout direction */
+    direction?: "row" | "column";
+    /** Container class name */
+    className?: string;
+    /** Class name applied to each item wrapper */
+    itemClassName?: string;
+}
+export declare function SortableList<T extends object>({ items, onReorder, keyField, renderItem, direction, className, itemClassName, }: SortableListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/SortableList.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../styles/SortableList.css";
+import { clsx } from "clsx";
+import { useEffect, useState } from "react";
+import { ReactSortable } from "react-sortablejs";
+export function SortableList({ items, onReorder, keyField, renderItem, direction = "column", className, itemClassName, }) {
+    const [sortableItems, setSortableItems] = useState(() => items.map((item) => ({
+        id: String(item[keyField]),
+        data: item,
+    })));
+    // Sync external items to internal state
+    useEffect(() => {
+        setSortableItems(items.map((item) => ({
+            id: String(item[keyField]),
+            data: item,
+        })));
+    }, [items, keyField]);
+    const handleSetList = (newList) => {
+        // Ignore empty list updates from ReactSortable during initialization
+        if (newList.length === 0 && sortableItems.length > 0) {
+            return;
+        }
+        setSortableItems(newList);
+        onReorder(newList.map((item) => item.data));
+    };
+    return (_jsx(ReactSortable, { tag: "div", className: clsx("PaSortableList", direction, className), list: sortableItems, setList: handleSetList, children: sortableItems.map((item, index) => (_jsx("div", { className: clsx("PaSortableList-item", itemClassName), children: renderItem(item.data, index) }, item.id))) }));
+}

package/dist/Spinner.d.ts

@@ -0,0 +1,2 @@
+import "../styles/Spinner.css";
+export declare function Spinner(): import("react/jsx-runtime").JSX.Element;

package/dist/Spinner.js

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

package/dist/SplitButton.d.ts

@@ -0,0 +1,25 @@
+import "../styles/SplitButton.css";
+import { type ReactNode } from "react";
+import { type AnchorElProps, type AsyncButtonElProps, type ButtonElProps } from "./Button.js";
+export type SplitButtonProps = SplitButtonElProps | SplitAsyncButtonElProps | SplitAnchorElProps;
+export interface SplitButtonElProps extends SplitButtonBaseProps, Omit<ButtonElProps, "className"> {
+}
+export interface SplitAsyncButtonElProps extends SplitButtonBaseProps, Omit<AsyncButtonElProps, "className"> {
+}
+export interface SplitAnchorElProps extends SplitButtonBaseProps, Omit<AnchorElProps, "className"> {
+}
+interface SplitButtonBaseProps {
+    items: SplitButtonItem[];
+    className?: string;
+    position?: "auto" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+}
+export interface SplitButtonItem {
+    label: string;
+    icon?: ReactNode;
+    /** can be async */
+    command: () => unknown;
+    danger?: boolean;
+    disabled?: boolean;
+}
+export declare function SplitButton(props: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/SplitButton.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/SplitButton.css";
+import { clsx } from "clsx";
+import { ChevronDown } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { Button, } from "./Button.js";
+import { computePopupPosition, setupPopoverPositioning } from "./popup-positioning.js";
+export function SplitButton(props) {
+    const { items, className, position, ...buttonProps } = 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;
+    useEffect(() => {
+        const menu = menuRef.current;
+        const container = containerRef.current;
+        if (!menu || !container)
+            return;
+        return setupPopoverPositioning(menu, () => computePopupPosition(container, menu, position ?? "auto", "corner"));
+    }, [position]);
+    const handleItemClick = async (item) => {
+        try {
+            await item.command();
+        }
+        catch (error) {
+            if (props.as === "async" && props.onError) {
+                props.onError(error);
+            }
+            else {
+                console.error("Error executing SplitButton item command:", error);
+            }
+        }
+        finally {
+            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", 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))) })] }));
+}

package/dist/Switch.d.ts

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

package/dist/Switch.js

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

package/dist/Tabs.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import "../styles/Tabs.css";
+export interface TabProps {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export interface TabsProps {
+    children: ReactNode;
+    value: string;
+    onChange: (value: string) => void;
+    variant?: "default" | "pill" | "stretch";
+    className?: string;
+}
+export declare function Tabs({ children, value, onChange, variant, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Render-less component for tab definition.
+ * Used for configuration only - does not render anything directly.
+ */
+export declare function Tab(_props: TabProps): null;

package/dist/Tabs.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Children, isValidElement } from "react";
+import "../styles/Tabs.css";
+export function Tabs({ children, value, onChange, variant = "default", className }) {
+    // Extract tab definitions from children
+    const tabs = [];
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.props) {
+            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))) }));
+}
+/**
+ * Render-less component for tab definition.
+ * Used for configuration only - does not render anything directly.
+ */
+export function Tab(_props) {
+    return null;
+}

package/dist/Textarea.d.ts

@@ -0,0 +1,8 @@
+import "../styles/Textarea.css";
+import type { Ref, TextareaHTMLAttributes } from "react";
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    ref?: Ref<HTMLTextAreaElement>;
+}
+export declare function Textarea({ className, label, error, ref, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/Textarea.js

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

package/dist/ToggleButton.d.ts

@@ -0,0 +1,11 @@
+import "../styles/ToggleButton.css";
+import type { ReactNode } from "react";
+export interface ToggleButtonProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    "aria-label"?: string;
+}
+export declare function ToggleButton({ checked, onChange, children, className, disabled, ...rest }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/ToggleButton.js

@@ -0,0 +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 }));
+}

package/dist/ToggleGroup.d.ts

@@ -0,0 +1,15 @@
+import "../styles/ToggleGroup.css";
+import type { ReactNode } from "react";
+export interface ToggleGroupOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface ToggleGroupProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: ToggleGroupOption[];
+    className?: string;
+    disabled?: boolean;
+}
+export declare function ToggleGroup({ value, onChange, options, className, disabled }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/ToggleGroup.js

@@ -0,0 +1,6 @@
+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))) }));
+}

package/dist/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import "../styles/Tooltip.css";
+import { type ReactNode } from "react";
+export interface TooltipProps {
+    content: string;
+    position?: "auto" | "top" | "bottom" | "left" | "right";
+    children: ReactNode;
+    className?: string;
+    delay?: number;
+}
+export declare function Tooltip({ content, position, children, className, delay, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/Tooltip.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/Tooltip.css";
+import { clsx } from "clsx";
+import { useEffect, useRef } from "react";
+import { computePopupPosition, setupPopoverPositioning } from "./popup-positioning.js";
+export function Tooltip({ content, position = "auto", children, className, delay = 200, }) {
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const timeoutRef = useRef(undefined);
+    const showTooltip = () => {
+        timeoutRef.current = window.setTimeout(() => {
+            tooltipRef.current?.showPopover();
+        }, delay);
+    };
+    const hideTooltip = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        tooltipRef.current?.hidePopover();
+    };
+    useEffect(() => {
+        if (!tooltipRef.current || !triggerRef.current)
+            return;
+        const triggerEl = triggerRef.current;
+        const popupEl = tooltipRef.current;
+        return setupPopoverPositioning(popupEl, () => computePopupPosition(triggerEl, popupEl, position, "cardinal"));
+    }, [position]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: "PaTooltip-trigger", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, children: children }), _jsx("div", { ref: tooltipRef, className: clsx("PaTooltip", className), role: "tooltip", popover: "hint", children: content })] }));
+}