@paroicms/react-ui 0.4.3 → 0.5.0

package/dist/MultiSelect.js

@@ -0,0 +1,50 @@
+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";
+export function MultiSelect({ value, onChange, options, label, error, className, placeholder, disabled, }) {
+    const [open, setOpen] = useState(false);
+    const containerRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleClickOutside = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [open]);
+    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: clsx("PaMultiSelect-control", open && "open"), onClick: () => !disabled && setOpen(!open), onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        if (!disabled)
+                            setOpen(!open);
+                    }
+                }, 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 })] }), open && (_jsx("span", { className: "PaMultiSelect-dropdown", role: "listbox", children: options.map((option) => (_jsxs("span", { className: clsx("PaMultiSelect-option", value.includes(option.value) && "selected", option.disabled && "disabled"), onClick: () => !option.disabled && toggleOption(option.value), onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            if (!option.disabled)
+                                toggleOption(option.value);
+                        }
+                    }, tabIndex: option.disabled ? -1 : 0, role: "option", "aria-selected": value.includes(option.value), children: [_jsx("span", { className: "PaMultiSelect-checkbox", children: value.includes(option.value) && "✓" }), 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,20 @@
+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;
+    autoPosition?: boolean;
+    /** Position of the popup relative to the trigger: 'bottom' (default) or 'top' */
+    position?: "bottom" | "top";
+    /** 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, autoPosition, position, children, ref, }: PopupMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/{PuPopupMenu.jsx → PopupMenu.js}

@@ -1,10 +1,13 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import { PuButton } from "./PuButton.jsx";
-import { PuMenuItem } from "./PuMenuItem.jsx";
-import { PopupMenuBtnSvg, SubMenuIconLeft } from "./svg-icons.jsx";
+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";
 const isPopoverSupported = typeof HTMLElement !== "undefined" && "showPopover" in HTMLElement.prototype;
 if (!isPopoverSupported) {
-    console?.error("PuPopupMenu: Popover API is not supported in this browser.");
+    console?.error("PopupMenu: Popover API is not supported in this browser.");
 }
 let seq = 0;
 /**
@@ -23,12 +26,12 @@ function setupPopoverPositioning(element, getPosition) {
     element.addEventListener("toggle", handleToggle);
     return () => element.removeEventListener("toggle", handleToggle);
 }
-export const PuPopupMenu = forwardRef(function PuPopupMenu({ items, className = "", id, autoPosition = true }, ref) {
+export function PopupMenu({ items, className, id, autoPosition = true, position = "bottom", children, ref, }) {
     const menuRef = useRef(null);
-    const buttonRef = useRef(null);
+    const triggerRef = useRef(null);
     const menuIdRef = useRef(undefined);
     if (menuIdRef.current === undefined) {
-        menuIdRef.current = id ?? `pu-popup-menu-${++seq}`;
+        menuIdRef.current = id ?? `pa-popup-menu-${++seq}`;
     }
     const toggle = (_ev) => {
         if (menuRef.current) {
@@ -52,43 +55,55 @@ export const PuPopupMenu = forwardRef(function PuPopupMenu({ items, className =
     }));
     // Position popover when it opens
     useEffect(() => {
-        if (!autoPosition || !menuRef.current || !buttonRef.current)
+        if (!autoPosition || !menuRef.current || !triggerRef.current)
             return;
         const menuEl = menuRef.current;
         return setupPopoverPositioning(menuEl, () => {
-            const rect = buttonRef.current?.getBoundingClientRect();
+            const rect = triggerRef.current?.getBoundingClientRect();
+            if (!rect)
+                return { top: 0, left: 0 };
+            if (position === "top") {
+                // Position above the trigger
+                const menuHeight = menuEl.offsetHeight || 150; // Fallback height
+                return {
+                    top: rect.top + window.scrollY - menuHeight - 8,
+                    left: rect.left + window.scrollX,
+                };
+            }
+            // Default: position below
             return {
-                top: rect ? rect.bottom + window.scrollY : 0,
-                left: rect ? rect.left + window.scrollX : 0,
+                top: rect.bottom + window.scrollY,
+                left: rect.left + window.scrollX,
             };
         });
-    }, [autoPosition]);
-    const buttonProps = {
+    }, [autoPosition, position]);
+    const triggerProps = {
         popoverTarget: menuIdRef.current,
         popoverTargetAction: "toggle",
     };
-    return (<>
-      <PuButton ref={buttonRef} className={className} outlined severity="secondary" aria-label="unfold" // should be localized
-     aria-controls={menuIdRef.current} aria-haspopup {...buttonProps}>
-        <PopupMenuBtnSvg />
-      </PuButton>
-
-      <div className="PuPopupMenu" ref={menuRef} id={menuIdRef.current} popover="auto">
-        <div className="PuPopupMenu-content">
-          {items.map((item) => (<PopupMenuItemWrapper key={item.key} item={item} onHide={hide}/>))}
-        </div>
-      </div>
-    </>);
-});
+    // 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(`pu-submenu-${item.key}-${Math.random().toString(36).substring(2, 9)}`);
+    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 || <SubMenuIconLeft />;
+        itemWithSubmenuHandling.icon = originalIcon || _jsx(ChevronRight, { size: 14 });
         // Create a command that opens the submenu
         const originalCommand = item.command;
         itemWithSubmenuHandling.command = () => {
@@ -125,11 +140,5 @@ function PopupMenuItemWrapper({ item, onHide }) {
             return { top: 0, left: 0 };
         });
     }, [item.subMenu]);
-    return (<div className="PuPopupMenu-item" popoverTargetAction="toggle" popoverTarget={subMenuId.current}>
-      <PuMenuItem item={itemWithSubmenuHandling}/>
-
-      {item.subMenu && (<div className="PuPopupMenu-submenu" popover="auto" id={subMenuId.current} ref={subMenuRef}>
-          {item.subMenu.map((subItem) => (<PopupMenuItemWrapper key={subItem.key} item={subItem} onHide={onHide}/>))}
-        </div>)}
-    </div>);
+    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,24 @@
+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;
+}
+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,42 @@
+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, useState } from "react";
+import { Button, } from "./Button.js";
+export function SplitButton(props) {
+    const { items, className, ...buttonProps } = props;
+    const [open, setOpen] = useState(false);
+    const containerRef = useRef(null);
+    const severity = props.severity ?? "primary";
+    const disabled = props.disabled;
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleClickOutside = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [open]);
+    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 {
+            setOpen(false);
+        }
+    };
+    return (_jsxs("div", { ref: containerRef, className: clsx("PaSplitBtn", severity, open && "open", disabled && "disabled", className), children: [_jsx(Button, { ...buttonProps, className: "PaSplitBtn-main" }), _jsx("button", { type: "button", className: "PaSplitBtn-toggle", onClick: () => setOpen(!open), "aria-haspopup": "menu", "aria-expanded": open, children: _jsx(ChevronDown, { className: "PaSplitBtn-toggleIcon" }) }), open && (_jsx("div", { className: "PaSplitBtn-menu", role: "menu", 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?: "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;