@porsche-design-system/components-react 3.31.0 → 4.0.0-alpha.0

package/esm/lib/components/input-date.wrapper.mjs

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInputDate = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 1, theme, value = '', className, ...rest }, ref) => {
+const PInputDate = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 1, value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-date');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-email.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputEmailBlurEventDetail, InputEmailChangeEventDetail, InputEmailInputEventDetail, InputEmailState, Theme } from '../types';
+import type { BreakpointCustomizable, InputEmailBlurEventDetail, InputEmailChangeEventDetail, InputEmailInputEventDetail, InputEmailState } from '../types';
 export type PInputEmailProps = BaseProps & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='email').
@@ -89,16 +89,12 @@ export type PInputEmailProps = BaseProps & {
      * Indicates the validation or overall status of the input component.
      */
     state?: InputEmailState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The default email address (or comma-separated list of addresses) for the input.
      */
     value?: string;
 };
-export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='email').
      */
@@ -187,10 +183,6 @@ export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit
      * Indicates the validation or overall status of the input component.
      */
     state?: InputEmailState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The default email address (or comma-separated list of addresses) for the input.
      */

package/esm/lib/components/input-email.wrapper.mjs

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInputEmail = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, multiple = false, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, ...rest }, ref) => {
+const PInputEmail = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, multiple = false, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-email');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, multiple, name, pattern, placeholder, readOnly, required, state, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, multiple, name, pattern, placeholder, readOnly, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-month.wrapper.d.ts

@@ -0,0 +1,168 @@
+import type { BaseProps } from '../../BaseProps';
+import type { BreakpointCustomizable, InputMonthBlurEventDetail, InputMonthChangeEventDetail, InputMonthInputEventDetail, InputMonthState } from '../types';
+export type PInputMonthProps = BaseProps & {
+    /**
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features.
+     */
+    autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the input field as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the input.
+     */
+    description?: string;
+    /**
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     */
+    form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * Specifies the latest month that can be selected. The value must be a month string in YYYY-MM format(e.g., max='2024-12').
+     */
+    max?: string;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
+    /**
+     * Specifies the earliest month that can be selected. The value must be a month string in YYYY-MM format (e.g., min='2023-01').
+     */
+    min?: string;
+    /**
+     * The name of the input field, used when submitting the form data.
+     */
+    name: string;
+    /**
+     * Emitted when the number input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputMonthBlurEventDetail>) => void;
+    /**
+     * Emitted when the number input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputMonthChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputMonthInputEventDetail>) => void;
+    /**
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     */
+    readOnly?: boolean;
+    /**
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the input component.
+     */
+    state?: InputMonthState;
+    /**
+     * Defines the stepping interval in months. For example, step="1" increments by 1 month, step="12" by 1 year. The default is 1 month.
+     */
+    step?: number;
+    /**
+     * The default month value for the input, in YYYY-MM format (e.g., value='2025-07').
+     */
+    value?: string;
+};
+export declare const PInputMonth: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features.
+     */
+    autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the input field as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the input.
+     */
+    description?: string;
+    /**
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     */
+    form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * Specifies the latest month that can be selected. The value must be a month string in YYYY-MM format(e.g., max='2024-12').
+     */
+    max?: string;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
+    /**
+     * Specifies the earliest month that can be selected. The value must be a month string in YYYY-MM format (e.g., min='2023-01').
+     */
+    min?: string;
+    /**
+     * The name of the input field, used when submitting the form data.
+     */
+    name: string;
+    /**
+     * Emitted when the number input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputMonthBlurEventDetail>) => void;
+    /**
+     * Emitted when the number input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputMonthChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputMonthInputEventDetail>) => void;
+    /**
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     */
+    readOnly?: boolean;
+    /**
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the input component.
+     */
+    state?: InputMonthState;
+    /**
+     * Defines the stepping interval in months. For example, step="1" increments by 1 month, step="12" by 1 year. The default is 1 month.
+     */
+    step?: number;
+    /**
+     * The default month value for the input, in YYYY-MM format (e.g., value='2025-07').
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/input-month.wrapper.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PInputMonth = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 1, value = '', className, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'blur', onBlur);
+    useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = usePrefix('p-input-month');
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PInputMonth };

package/esm/lib/components/input-number.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputNumberBlurEventDetail, InputNumberChangeEventDetail, InputNumberInputEventDetail, InputNumberState, Theme } from '../types';
+import type { BreakpointCustomizable, InputNumberBlurEventDetail, InputNumberChangeEventDetail, InputNumberInputEventDetail, InputNumberState } from '../types';
 export type PInputNumberProps = BaseProps & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='postal-code').
@@ -85,16 +85,12 @@ export type PInputNumberProps = BaseProps & {
      * The granularity that the value must adhere to.
      */
     step?: number;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The number input value.
      */
     value?: string;
 };
-export declare const PInputNumber: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputNumber: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='postal-code').
      */
@@ -179,10 +175,6 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<Omi
      * The granularity that the value must adhere to.
      */
     step?: number;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The number input value.
      */

package/esm/lib/components/input-number.wrapper.mjs

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInputNumber = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, controls = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', step = 1, theme, value = '', className, ...rest }, ref) => {
+const PInputNumber = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, controls = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', step = 1, value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-number');
-    const propsToSync = [autoComplete, compact, controls, description, disabled, form, hideLabel, label, loading, max, message, min, name, placeholder, readOnly, required, state, step, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, controls, description, disabled, form, hideLabel, label, loading, max, message, min, name, placeholder, readOnly, required, state, step, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'controls', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'placeholder', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'controls', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'placeholder', 'readOnly', 'required', 'state', 'step', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-password.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputPasswordBlurEventDetail, InputPasswordChangeEventDetail, InputPasswordInputEventDetail, InputPasswordState, Theme } from '../types';
+import type { BreakpointCustomizable, InputPasswordBlurEventDetail, InputPasswordChangeEventDetail, InputPasswordInputEventDetail, InputPasswordState } from '../types';
 export type PInputPasswordProps = BaseProps & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='current-password', autocomplete='new-password').
@@ -77,10 +77,6 @@ export type PInputPasswordProps = BaseProps & {
      * Indicates the validation or overall status of the input component.
      */
     state?: InputPasswordState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * Show or hide password toggle for `input type="password"`.
      */
@@ -90,7 +86,7 @@ export type PInputPasswordProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PInputPassword: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputPassword: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='current-password', autocomplete='new-password').
      */
@@ -167,10 +163,6 @@ export declare const PInputPassword: import("react").ForwardRefExoticComponent<O
      * Indicates the validation or overall status of the input component.
      */
     state?: InputPasswordState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * Show or hide password toggle for `input type="password"`.
      */

package/esm/lib/components/input-password.wrapper.mjs

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInputPassword = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, toggle = false, value = '', className, ...rest }, ref) => {
+const PInputPassword = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', toggle = false, value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-password');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme || useTheme(), toggle, value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, toggle, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'toggle', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'toggle', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-search.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState, Theme } from '../types';
+import type { BreakpointCustomizable, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState } from '../types';
 export type PInputSearchProps = BaseProps & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
@@ -41,10 +41,18 @@ export type PInputSearchProps = BaseProps & {
      * @experimental Shows a loading indicator.
      */
     loading?: boolean;
+    /**
+     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     */
+    maxLength?: number;
     /**
      * Dynamic feedback text for validation or status.
      */
     message?: string;
+    /**
+     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     */
+    minLength?: number;
     /**
      * The name of the input field, used when submitting the form data.
      */
@@ -77,16 +85,12 @@ export type PInputSearchProps = BaseProps & {
      * Indicates the validation or overall status of the input component.
      */
     state?: InputSearchState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The search input value.
      */
     value?: string;
 };
-export declare const PInputSearch: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputSearch: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */
@@ -127,10 +131,18 @@ export declare const PInputSearch: import("react").ForwardRefExoticComponent<Omi
      * @experimental Shows a loading indicator.
      */
     loading?: boolean;
+    /**
+     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     */
+    maxLength?: number;
     /**
      * Dynamic feedback text for validation or status.
      */
     message?: string;
+    /**
+     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     */
+    minLength?: number;
     /**
      * The name of the input field, used when submitting the form data.
      */
@@ -163,10 +175,6 @@ export declare const PInputSearch: import("react").ForwardRefExoticComponent<Omi
      * Indicates the validation or overall status of the input component.
      */
     state?: InputSearchState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The search input value.
      */

package/esm/lib/components/input-search.wrapper.mjs

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInputSearch = /*#__PURE__*/ forwardRef(({ autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, message = '', name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, ...rest }, ref) => {
+const PInputSearch = /*#__PURE__*/ forwardRef(({ autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-search');
-    const propsToSync = [autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, message, name, placeholder, readOnly, required, state, theme || useTheme(), value];
+    const propsToSync = [autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'message', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-tel.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputTelBlurEventDetail, InputTelChangeEventDetail, InputTelInputEventDetail, InputTelState, Theme } from '../types';
+import type { BreakpointCustomizable, InputTelBlurEventDetail, InputTelChangeEventDetail, InputTelInputEventDetail, InputTelState } from '../types';
 export type PInputTelProps = BaseProps & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='tel').
@@ -85,16 +85,12 @@ export type PInputTelProps = BaseProps & {
      * Indicates the validation or overall status of the input component.
      */
     state?: InputTelState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The tel input value.
      */
     value?: string;
 };
-export declare const PInputTel: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputTel: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='tel').
      */
@@ -179,10 +175,6 @@ export declare const PInputTel: import("react").ForwardRefExoticComponent<Omit<i
      * Indicates the validation or overall status of the input component.
      */
     state?: InputTelState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The tel input value.
      */

package/esm/lib/components/input-tel.wrapper.mjs

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInputTel = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, ...rest }, ref) => {
+const PInputTel = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-tel');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-text.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputTextBlurEventDetail, InputTextChangeEventDetail, InputTextInputEventDetail, InputTextState, Theme } from '../types';
+import type { BreakpointCustomizable, InputTextBlurEventDetail, InputTextChangeEventDetail, InputTextInputEventDetail, InputTextState } from '../types';
 export type PInputTextProps = BaseProps & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='name').
@@ -85,16 +85,12 @@ export type PInputTextProps = BaseProps & {
      * Indicates the validation or overall status of the input component.
      */
     state?: InputTextState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The text input value.
      */
     value?: string;
 };
-export declare const PInputText: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputText: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='name').
      */
@@ -179,10 +175,6 @@ export declare const PInputText: import("react").ForwardRefExoticComponent<Omit<
      * Indicates the validation or overall status of the input component.
      */
     state?: InputTextState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The text input value.
      */