@paroicms/react-ui 0.5.0 → 0.5.2

package/dist/Button.js

@@ -2,13 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import "../styles/Button.css";
 import { clsx } from "clsx";
 import { Check, Loader2 } from "lucide-react";
-import { useCallback, useState, } from "react";
+import { useCallback, useEffect, 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);
+    // Cancel feedback when button becomes enabled
+    useEffect(() => {
+        if (!disabled && showFeedback) {
+            setShowFeedback(false);
+        }
+    }, [disabled, showFeedback]);
     const classNames = clsx("PaBtn", severity, outlined && "outlined", disabled && "disabled", showFeedback && "feedback", className);
     const handleAsyncClick = useCallback(async (e) => {
         if (props.as !== "async")

package/dist/Checkbox.d.ts

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

package/dist/Checkbox.js

@@ -1,12 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "../styles/Checkbox.css";
 import { clsx } from "clsx";
-export function Checkbox({ checked, onChange, label, className, ...rest }) {
+export function Checkbox({ checked, onChange, label, inputLabel, className, ...rest }) {
     const handleChange = (e) => {
-        onChange(e.target.checked);
+        onChange?.(e.target.checked, e);
     };
-    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 }));
+    const fieldContent = inputLabel ? (_jsxs("label", { className: clsx("PaCheckboxField", className), children: [_jsx("input", { className: "PaCheckboxInput", type: "checkbox", checked: checked, onChange: handleChange, ...rest }), _jsx("span", { className: "PaCheckboxField-label", children: inputLabel })] })) : (_jsx("input", { className: clsx("PaCheckboxInput", className), type: "checkbox", checked: checked, onChange: handleChange, ...rest }));
+    return (_jsx(_Fragment, { children: label ? (_jsxs("label", { className: clsx("PaField", className), children: [_jsx("span", { className: "PaField-label", children: label }), fieldContent] })) : (fieldContent) }));
 }

package/dist/DateInput.d.ts

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

package/dist/DateInput.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 })] }));
+export function DateInput({ className, label, error, type, value, onChange, ref, ...props }) {
+    const handleChange = (e) => {
+        onChange?.(e.target.value, e);
+    };
+    const inputElement = (_jsx("input", { ref: ref, type: type, className: clsx("PaDateTimeInput", error && "error", !label && className), value: value, onChange: handleChange, ...props }));
+    return (_jsxs(_Fragment, { children: [label ? (_jsxs("label", { className: clsx("PaField", error && "error", className), children: [_jsx("span", { className: "PaField-label", children: label }), inputElement] })) : (inputElement), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/dist/Dialog.d.ts

@@ -8,6 +8,8 @@ export interface DialogProps {
     children: ReactNode;
     className?: string;
     closable?: boolean;
-    modal?: boolean;
+    /** Default size is "md" */
+    size?: DialogSize;
 }
-export declare function Dialog({ visible, onHide, header, footer, children, className, closable, modal, }: DialogProps): import("react").ReactPortal | null;
+export type DialogSize = "sm" | "md" | "lg" | "innerContent";
+export declare function Dialog({ visible, onHide, header, footer, children, className, closable, size, }: DialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/Dialog.js

@@ -3,39 +3,38 @@ 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);
+export function Dialog({ visible, onHide, header, footer, children, className, closable = true, size = "md", }) {
+    const dialogRef = useRef(null);
+    // Control open/close with native methods
     useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
         if (visible) {
-            dialogIdRef.current = ++dialogStackCounter;
+            if (!dialog.open) {
+                dialog.showModal();
+            }
         }
-        return () => {
-            if (dialogIdRef.current !== undefined) {
-                // Decrement only if this was the topmost dialog
-                if (dialogIdRef.current === dialogStackCounter) {
-                    dialogStackCounter--;
-                }
-                dialogIdRef.current = undefined;
+        else {
+            if (dialog.open) {
+                dialog.close();
             }
-        };
+        }
     }, [visible]);
-    // Handle escape key - only the topmost dialog should respond
+    // Handle ESC key via native cancel event
     useEffect(() => {
-        if (!visible || !closable)
+        const dialog = dialogRef.current;
+        if (!dialog)
             return;
-        const handleKeyDown = (e) => {
-            // Only handle ESC if this is the topmost dialog
-            if (e.key === "Escape" && dialogIdRef.current === dialogStackCounter) {
+        const handleCancel = (e) => {
+            e.preventDefault(); // Prevent default close
+            if (closable) {
                 onHide();
             }
         };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [visible, closable, onHide]);
+        dialog.addEventListener("cancel", handleCancel);
+        return () => dialog.removeEventListener("cancel", handleCancel);
+    }, [closable, onHide]);
     // Prevent body scroll when open
     useEffect(() => {
         if (visible) {
@@ -48,8 +47,12 @@ export function Dialog({ visible, onHide, header, footer, children, className, c
             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);
+    const sizeClass = size === "innerContent"
+        ? undefined
+        : size === "sm"
+            ? "sizeSm"
+            : size === "lg"
+                ? "sizeLg"
+                : "sizeMd";
+    return (_jsxs("dialog", { ref: dialogRef, className: clsx("PaDialog", sizeClass, className), 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 })] }));
 }

package/dist/InputNumber.d.ts

@@ -1,8 +1,8 @@
-import type { InputHTMLAttributes, Ref } from "react";
+import type { ChangeEvent, 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;
+    onChange?: (value: number | undefined, ev: ChangeEvent<HTMLInputElement>) => void;
     label?: string;
     error?: string;
     ref?: Ref<HTMLInputElement>;

package/dist/InputNumber.js

@@ -1,19 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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);
+            onChange?.(undefined, e);
         }
         else {
             const num = Number(val);
             if (!Number.isNaN(num)) {
-                onChange(num);
+                onChange?.(num, e);
             }
         }
     };
-    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 })] }));
+    const inputElement = (_jsx("input", { ref: ref, type: "number", className: clsx("PaNumberInput", error && "error", !label && className), value: value ?? "", onChange: handleChange, min: min, max: max, step: step, ...props }));
+    return (_jsxs(_Fragment, { children: [label ? (_jsxs("label", { className: clsx("PaField", error && "error", className), children: [_jsx("span", { className: "PaField-label", children: label }), inputElement] })) : (inputElement), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/dist/InputText.d.ts

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

package/dist/InputText.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 }) {
+export function InputText({ value, onChange, label, error, className, endElement, icon, iconPosition = "left", ...rest }) {
     const handleChange = (e) => {
-        onChange(e.target.value);
+        onChange?.(e.target.value, e);
     };
-    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 })] }));
+    const inputElement = (_jsx("input", { className: "PaTextInput", value: value, onChange: handleChange, ...rest }));
+    const hasWrapper = Boolean(endElement || icon);
+    const fieldContent = endElement ? (_jsxs("span", { className: "PaTextField-row", children: [inputElement, endElement] })) : icon ? (_jsxs("span", { className: clsx("PaTextField-iconWrapper", iconPosition === "right" && "iconRight"), children: [_jsx("span", { className: "PaTextField-icon", children: icon }), inputElement] })) : (inputElement);
+    return (_jsxs(_Fragment, { children: [label ? (_jsxs("label", { className: clsx("PaTextField PaField", error && "error", className), children: [_jsx("span", { className: "PaField-label", children: label }), fieldContent] })) : hasWrapper ? (_jsx("span", { className: clsx("PaTextField", error && "error", className), children: fieldContent })) : (_jsx("input", { className: clsx("PaTextInput", className), value: value, onChange: handleChange, ...rest })), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/dist/MultiSelect.d.ts

@@ -6,12 +6,13 @@ export interface MultiSelectOption {
 }
 export interface MultiSelectProps {
     value: string[];
-    onChange: (value: string[]) => void;
+    onChange?: (value: string[]) => void;
     options: MultiSelectOption[];
     label?: string;
     error?: string;
     className?: string;
     placeholder?: string;
     disabled?: boolean;
+    position?: "auto" | "top" | "bottom";
 }
-export declare function MultiSelect({ value, onChange, options, label, error, className, placeholder, disabled, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelect({ value, onChange, options, label, error, className, placeholder, disabled, position, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/MultiSelect.js

@@ -3,48 +3,51 @@ 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, }) {
+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);
-    // Close dropdown when clicking outside
+    const dropdownRef = useRef(null);
+    const dropdownId = useRef(`pa-multiselect-${Math.random().toString(36).substring(2, 9)}`);
     useEffect(() => {
-        if (!open)
+        const dropdown = dropdownRef.current;
+        const container = containerRef.current;
+        if (!dropdown || !container)
             return;
-        const handleClickOutside = (e) => {
-            if (containerRef.current && !containerRef.current.contains(e.target)) {
-                setOpen(false);
-            }
+        const handleToggle = (e) => {
+            setOpen(e.newState === "open");
         };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [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));
+            onChange?.(value.filter((v) => v !== optionValue));
         }
         else {
-            onChange([...value, optionValue]);
+            onChange?.([...value, optionValue]);
         }
     };
     const removeValue = (optionValue) => {
-        onChange(value.filter((v) => v !== 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 === " ") {
+    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();
-                        if (!disabled)
-                            setOpen(!open);
+                        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 })] }), 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))) }))] }));
+                                    }, "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/PasswordInput.d.ts

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

package/dist/PasswordInput.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 }) {
+export function PasswordInput({ className, label, error, value, onChange, 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 })] }));
+    const handleChange = (e) => {
+        onChange?.(e.target.value, e);
+    };
+    const inputWithToggle = (_jsxs("span", { className: clsx("PaPasswordInput-inputWrapper", error && "error"), children: [_jsx("input", { ref: ref, type: visible ? "text" : "password", className: "PaPasswordInput-input", value: value, onChange: handleChange, ...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(_Fragment, { children: [label ? (_jsxs("label", { className: clsx("PaPasswordInput PaField", error && "error", className), children: [_jsx("span", { className: "PaField-label", children: label }), inputWithToggle] })) : (inputWithToggle), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/dist/PopupMenu.d.ts

@@ -5,9 +5,8 @@ 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";
+    /** 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>;
@@ -17,4 +16,4 @@ export interface PopupMenuRef {
     show: (event: MouseEvent) => void;
     hide: () => void;
 }
-export declare function PopupMenu({ items, className, id, autoPosition, position, children, ref, }: PopupMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopupMenu({ items, className, id, position, children, ref, }: PopupMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/PopupMenu.js

@@ -5,28 +5,13 @@ 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;
-/**
- * Utility function to configure popup positioning
- */
-function setupPopoverPositioning(element, getPosition) {
-    const handleToggle = (e) => {
-        const newState = e.newState;
-        if (newState === "open") {
-            const position = getPosition();
-            element.style.position = "absolute";
-            element.style.top = `${position.top}px`;
-            element.style.left = `${position.left}px`;
-        }
-    };
-    element.addEventListener("toggle", handleToggle);
-    return () => element.removeEventListener("toggle", handleToggle);
-}
-export function PopupMenu({ items, className, id, autoPosition = true, position = "bottom", children, ref, }) {
+export function PopupMenu({ items, className, id, position = "auto", children, ref, }) {
     const menuRef = useRef(null);
     const triggerRef = useRef(null);
     const menuIdRef = useRef(undefined);
@@ -55,28 +40,12 @@ export function PopupMenu({ items, className, id, autoPosition = true, position
     }));
     // Position popover when it opens
     useEffect(() => {
-        if (!autoPosition || !menuRef.current || !triggerRef.current)
-            return;
         const menuEl = menuRef.current;
-        return setupPopoverPositioning(menuEl, () => {
-            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.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
-            };
-        });
-    }, [autoPosition, position]);
+        const triggerEl = triggerRef.current;
+        if (!menuEl || !triggerEl)
+            return;
+        return setupPopoverPositioning(menuEl, () => computePopupPosition(triggerEl, menuEl, position, "corner"));
+    }, [position]);
     const triggerProps = {
         popoverTarget: menuIdRef.current,
         popoverTargetAction: "toggle",
@@ -125,20 +94,13 @@ function PopupMenuItemWrapper({ item, onHide }) {
     }
     // Handle submenu positioning with Popover API
     useEffect(() => {
-        if (!subMenuRef.current || !item.subMenu)
-            return;
         const subMenuEl = subMenuRef.current;
-        return setupPopoverPositioning(subMenuEl, () => {
-            const parentEl = subMenuEl.parentElement;
-            if (parentEl) {
-                const rect = parentEl.getBoundingClientRect();
-                return {
-                    top: rect.top,
-                    left: rect.right + 5, // 5px gap
-                };
-            }
-            return { top: 0, left: 0 };
-        });
+        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

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

package/dist/RadioButton.js

@@ -1,12 +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 }) {
+export function RadioButton({ checked, onChange, inputLabel, className, ...rest }) {
     const handleChange = (e) => {
-        onChange(e.target.checked);
+        onChange?.(e.target.checked, e);
     };
-    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 })] }));
+    if (inputLabel) {
+        return (_jsxs("label", { className: clsx("PaRadioButton", className), children: [_jsx("input", { className: "PaRadioInput", type: "radio", checked: checked, onChange: handleChange, ...rest }), _jsx("span", { className: "PaRadioButton-label", children: inputLabel })] }));
     }
-    return (_jsx("input", { className: clsx("PaRadioButton-input", className), type: "radio", checked: checked, onChange: handleChange, ...rest }));
+    return (_jsx("input", { className: clsx("PaRadioInput", className), type: "radio", checked: checked, onChange: handleChange, ...rest }));
 }

package/dist/Select.d.ts

@@ -1,5 +1,5 @@
 import "../styles/Select.css";
-import type { SelectHTMLAttributes } from "react";
+import type { ChangeEvent, SelectHTMLAttributes } from "react";
 export interface SelectOption {
     value: string;
     label: string;
@@ -7,12 +7,11 @@ export interface SelectOption {
 }
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "onChange"> {
     value: string;
-    onChange: (value: string) => void;
+    onChange?: (value: string, ev: ChangeEvent<HTMLSelectElement>) => 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;
+export declare function Select({ value, onChange, options, label, error, className, placeholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/Select.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 }) {
+export function Select({ value, onChange, options, label, error, className, placeholder, ...rest }) {
     const handleChange = (e) => {
-        onChange(e.target.value);
+        onChange?.(e.target.value, e);
     };
-    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 })] }));
+    const selectWithIcon = (_jsxs("span", { className: "PaSelectField-wrapper", children: [_jsxs("select", { className: "PaSelect", 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: "PaSelectField-icon", size: 16 })] }));
+    return (_jsxs(_Fragment, { children: [label ? (_jsxs("label", { className: clsx("PaSelectField PaField", error && "error", className), children: [_jsx("span", { className: "PaField-label", children: label }), selectWithIcon] })) : (_jsx("span", { className: clsx("PaSelectField", error && "error", className), children: selectWithIcon })), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/dist/SplitButton.d.ts

@@ -11,6 +11,7 @@ export interface SplitAnchorElProps extends SplitButtonBaseProps, Omit<AnchorElP
 interface SplitButtonBaseProps {
     items: SplitButtonItem[];
     className?: string;
+    position?: "auto" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
 }
 export interface SplitButtonItem {
     label: string;