@paroicms/react-ui 0.5.10 → 0.5.11

package/dist/InputText.d.ts

@@ -6,8 +6,9 @@ export interface InputTextProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     label?: string;
     error?: string;
     className?: string;
+    inputClassName?: string;
     endElement?: ReactNode;
     icon?: ReactNode;
     iconPosition?: "left" | "right";
 }
-export declare function InputText({ value, onChange, label, error, className, endElement, icon, iconPosition, ...rest }: InputTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputText({ value, onChange, label, error, className, inputClassName, endElement, icon, iconPosition, ...rest }: InputTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/InputText.js

@@ -1,12 +1,12 @@
 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, endElement, icon, iconPosition = "left", ...rest }) {
+export function InputText({ value, onChange, label, error, className, inputClassName, endElement, icon, iconPosition = "left", ...rest }) {
     const handleChange = (e) => {
         onChange?.(e.target.value, e);
     };
-    const inputElement = (_jsx("input", { className: "PaTextInput", value: value, onChange: handleChange, ...rest }));
+    const inputElement = (_jsx("input", { className: clsx("PaTextInput", inputClassName), 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 })] }));
+    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", inputClassName, className), value: value, onChange: handleChange, ...rest })), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/dist/PasswordInput.d.ts

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

package/dist/PasswordInput.js

@@ -3,11 +3,11 @@ import "../styles/PasswordInput.css";
 import { clsx } from "clsx";
 import { Eye, EyeOff } from "lucide-react";
 import { useState } from "react";
-export function PasswordInput({ className, label, error, value, onChange, ref, ...props }) {
+export function PasswordInput({ className, inputClassName, label, error, value, onChange, ref, ...props }) {
     const [visible, setVisible] = useState(false);
     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 }) })] }));
+    const inputWithToggle = (_jsxs("span", { className: clsx("PaPasswordInput-inputWrapper", error && "error"), children: [_jsx("input", { ref: ref, type: visible ? "text" : "password", className: clsx("PaPasswordInput-input", inputClassName), 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/Textarea.d.ts

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

package/dist/Textarea.js

@@ -1,10 +1,10 @@
 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, value, onChange, ref, ...props }) {
+export function Textarea({ className, inputClassName, 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 }));
+    const textareaElement = (_jsx("textarea", { ref: ref, className: clsx("PaTextarea", error && "error", inputClassName, !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.10",
+  "version": "0.5.11",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",