@paroicms/react-ui 0.5.1 → 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;
-    size?: "sm" | "md" | "lg";
+    /** Default size is "md" */
+    size?: DialogSize;
 }
+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,7 +3,7 @@ import "../styles/Dialog.css";
 import { clsx } from "clsx";
 import { X } from "lucide-react";
 import { useEffect, useRef } from "react";
-export function Dialog({ visible, onHide, header, footer, children, className, closable = true, size, }) {
+export function Dialog({ visible, onHide, header, footer, children, className, closable = true, size = "md", }) {
     const dialogRef = useRef(null);
     // Control open/close with native methods
     useEffect(() => {
@@ -47,5 +47,12 @@ export function Dialog({ visible, onHide, header, footer, children, className, c
             document.body.style.overflow = "";
         };
     }, [visible]);
-    return (_jsxs("dialog", { ref: dialogRef, className: clsx("PaDialog", size && `size-${size}`, 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 })] }));
+    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,7 +6,7 @@ export interface MultiSelectOption {
 }
 export interface MultiSelectProps {
     value: string[];
-    onChange: (value: string[]) => void;
+    onChange?: (value: string[]) => void;
     options: MultiSelectOption[];
     label?: string;
     error?: string;

package/dist/MultiSelect.js

@@ -30,14 +30,14 @@ export function MultiSelect({ value, onChange, options, label, error, className,
     }, [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: "PaMultiSelect-control", onClick: () => !disabled && dropdownRef.current?.togglePopover(), onKeyDown: (e) => {

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/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/Switch.d.ts

@@ -1,8 +1,8 @@
-import type { InputHTMLAttributes } from "react";
+import type { ChangeEvent, InputHTMLAttributes } from "react";
 import "../styles/Switch.css";
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
     checked: boolean;
-    onChange: (checked: boolean) => void;
+    onChange?: (checked: boolean, ev: ChangeEvent<HTMLInputElement>) => void;
     label?: string;
     className?: string;
 }

package/dist/Switch.js

@@ -3,7 +3,7 @@ import { clsx } from "clsx";
 import "../styles/Switch.css";
 export function Switch({ checked, onChange, label, className, ...rest }) {
     const handleChange = (e) => {
-        onChange(e.target.checked);
+        onChange?.(e.target.checked, e);
     };
     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 })] }));

package/dist/Textarea.d.ts

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

package/dist/Textarea.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/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 })] }));
+export function Textarea({ className, label, error, value, onChange, ref, ...props }) {
+    const handleChange = (e) => {
+        onChange?.(e.target.value, e);
+    };
+    const textareaElement = (_jsx("textarea", { ref: ref, className: clsx("PaTextarea", 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 }), textareaElement] })) : (textareaElement), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/react-ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",
@@ -25,7 +25,7 @@
     "dev": "tsc --watch --preserveWatchOutput"
   },
   "dependencies": {
-    "@paroicms/public-anywhere-lib": "0.41.0",
+    "@paroicms/public-anywhere-lib": "0.41.1",
     "clsx": "~2.1.1",
     "lucide-react": "~0.562.0",
     "react-sortablejs": "~6.1.4",
@@ -36,11 +36,11 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@types/react": "~19.2.7",
+    "@types/react": "~19.2.8",
     "@types/react-dom": "~19.2.3",
-    "@types/sortablejs": "^1.15.8",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "@types/sortablejs": "^1.15.9",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "rimraf": "~6.1.2",
     "typescript": "~5.9.3"
   },

package/styles/Checkbox.css

@@ -1,7 +1,7 @@
 /* ========================================
    Checkbox Component
    ======================================== */
-.PaCheckbox {
+.PaCheckboxField {
   display: inline-flex;
   gap: var(--space-2);
   align-items: center;
@@ -9,7 +9,7 @@
   user-select: none;
 }
 
-.PaCheckbox-input {
+.PaCheckboxInput {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -24,7 +24,7 @@
   border-radius: var(--radius-sm);
   transition: all var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -55,7 +55,8 @@
   }
 }
 
-.PaCheckbox-label {
-  font-size: var(--text-sm);
-  color: var(--color-text);
+.PaCheckboxGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
 }

package/styles/DateInput.css

@@ -1,25 +1,7 @@
 /* ========================================
    DateInput Component
    ======================================== */
-.PaDateInput {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaDateInput-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaDateInput-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
-}
-
-.PaDateInput-field {
+.PaDateTimeInput {
   padding: var(--space-2) var(--space-3);
   font-family: inherit;
   font-size: var(--text-base);
@@ -32,7 +14,7 @@
     border-color var(--transition),
     box-shadow var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -52,8 +34,3 @@
     border-color: var(--color-danger);
   }
 }
-
-.PaDateInput-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
-}

package/styles/Dialog.css

@@ -24,18 +24,18 @@
   }
 
   /* Size variants */
-  &.size-sm {
-    width: 320px;
+  &.sizeSm {
+    width: 480px;
     max-width: 100%;
   }
 
-  &.size-md {
-    width: 480px;
+  &.sizeMd {
+    width: 640px;
     max-width: 100%;
   }
 
-  &.size-lg {
-    width: 640px;
+  &.sizeLg {
+    width: 800px;
     max-width: 100%;
   }
 }
@@ -45,7 +45,7 @@
   gap: var(--space-4);
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-4) var(--space-5);
+  padding: var(--space-3) var(--space-5);
   border-bottom: 1px solid var(--color-border-light);
 }
 
@@ -59,6 +59,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 40px;
+  height: 40px;
   padding: var(--space-1);
   color: var(--color-text-muted);
   cursor: pointer;

package/styles/InputNumber.css

@@ -1,25 +1,7 @@
 /* ========================================
    InputNumber Component
    ======================================== */
-.PaInputNumber {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaInputNumber-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaInputNumber-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
-}
-
-.PaInputNumber-field {
+.PaNumberInput {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   font-family: inherit;
@@ -33,7 +15,7 @@
     border-color var(--transition),
     box-shadow var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -53,8 +35,3 @@
     border-color: var(--color-danger);
   }
 }
-
-.PaInputNumber-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
-}

package/styles/InputText.css

@@ -1,33 +1,17 @@
 /* ========================================
    InputText Component
    ======================================== */
-.PaInputText {
+.PaTextField {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 
-  &.error .PaInputText-field {
+  &.error .PaTextInput {
     border-color: var(--color-danger);
   }
-
-  &.fullWidth {
-    width: 100%;
-  }
-}
-
-.PaInputText-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaInputText-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
 }
 
-.PaInputText-field {
+.PaTextInput {
   width: 100%;
   padding: var(--space-2) var(--space-3);
   font-family: inherit;
@@ -41,7 +25,7 @@
     border-color var(--transition),
     box-shadow var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -50,43 +34,44 @@
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
   }
-}
 
-.PaInputText-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--color-bg-subtle);
+    opacity: 0.7;
+  }
 }
 
-.PaInputText-row {
+.PaTextField-row {
   display: flex;
   gap: var(--space-1);
 
-  .PaInputText-field {
+  .PaTextInput {
     flex: 1;
     min-width: 0;
   }
 }
 
-.PaInputText-iconWrapper {
+.PaTextField-iconWrapper {
   position: relative;
   display: flex;
 
-  .PaInputText-field {
+  .PaTextInput {
     padding-left: var(--space-10);
   }
 
-  &.iconRight .PaInputText-icon {
+  &.iconRight .PaTextField-icon {
     right: var(--space-3);
     left: auto;
   }
 
-  &.iconRight .PaInputText-field {
+  &.iconRight .PaTextInput {
     padding-right: var(--space-10);
     padding-left: var(--space-3);
   }
 }
 
-.PaInputText-icon {
+.PaTextField-icon {
   position: absolute;
   top: 50%;
   left: var(--space-3);

package/styles/PasswordInput.css

@@ -7,18 +7,6 @@
   gap: var(--space-2);
 }
 
-.PaPasswordInput-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaPasswordInput-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
-}
-
 .PaPasswordInput-inputWrapper {
   position: relative;
   display: flex;
@@ -43,7 +31,7 @@
     border-color var(--transition),
     box-shadow var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -52,6 +40,12 @@
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--color-bg-subtle);
+    opacity: 0.7;
+  }
 }
 
 .PaPasswordInput-toggle {
@@ -73,8 +67,3 @@
     color: var(--color-text);
   }
 }
-
-.PaPasswordInput-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
-}

package/styles/RadioButton.css

@@ -9,7 +9,7 @@
   user-select: none;
 }
 
-.PaRadioButton-input {
+.PaRadioInput {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -24,7 +24,7 @@
   border-radius: var(--radius-full);
   transition: all var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -54,7 +54,8 @@
   }
 }
 
-.PaRadioButton-label {
-  font-size: var(--text-sm);
-  color: var(--color-text);
+.PaRadioGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
 }

package/styles/Select.css

@@ -1,37 +1,21 @@
 /* ========================================
    Select Component
    ======================================== */
-.PaSelect {
+.PaSelectField {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 
-  &.error .PaSelect-field {
+  &.error .PaSelect {
     border-color: var(--color-danger);
   }
-
-  &.fullWidth {
-    width: 100%;
-  }
-}
-
-.PaSelect-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
 }
 
-.PaSelect-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
-}
-
-.PaSelect-fieldWrapper {
+.PaSelectField-wrapper {
   position: relative;
 }
 
-.PaSelect-field {
+.PaSelect {
   width: 100%;
   padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
   font-family: inherit;
@@ -44,7 +28,7 @@
   border-radius: var(--radius);
   transition: border-color var(--transition);
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -53,9 +37,15 @@
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--color-bg-subtle);
+    opacity: 0.7;
+  }
 }
 
-.PaSelect-icon {
+.PaSelectField-icon {
   position: absolute;
   top: 50%;
   right: var(--space-3);
@@ -65,8 +55,3 @@
   pointer-events: none;
   transform: translateY(-50%);
 }
-
-.PaSelect-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
-}

package/styles/Textarea.css

@@ -2,24 +2,6 @@
    Textarea Component
    ======================================== */
 .PaTextarea {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaTextarea-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.PaTextarea-label {
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  color: var(--color-text);
-}
-
-.PaTextarea-field {
   width: 100%;
   min-height: 120px;
   padding: var(--space-3);
@@ -39,7 +21,7 @@
     color: var(--color-text-light);
   }
 
-  &:hover {
+  &:hover:not(:disabled) {
     border-color: var(--color-primary);
   }
 
@@ -59,8 +41,3 @@
     border-color: var(--color-danger);
   }
 }
-
-.PaTextarea-error {
-  font-size: var(--text-xs);
-  color: var(--color-danger);
-}

package/styles/theme/field.css

@@ -0,0 +1,29 @@
+/* ========================================
+   PaField - Form Field Layout Block
+   ======================================== */
+.PaField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+
+  &:not(:last-child) {
+    margin-bottom: var(--space-4);
+  }
+}
+
+.PaField-label {
+  display: block;
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+/* ========================================
+   PaFieldError - Field Error Message Block
+   ======================================== */
+.PaFieldError {
+  font-size: var(--text-xs);
+  color: var(--color-danger);
+}

package/styles/theme/index.css

@@ -13,3 +13,4 @@
 @import "./base.css" layer(base);
 @import "./common.css" layer(common);
 @import "./margins.css";
+@import "./field.css";