@asgardeo/react 0.11.2 → 0.12.0

package/dist/components/primitives/InputLabel/InputLabel.d.ts

@@ -23,29 +23,29 @@ export interface InputLabelProps extends Omit<LabelHTMLAttributes<HTMLLabelEleme
      */
     children: ReactNode;
     /**
-     * Whether the field is required
+     * Additional CSS class names
      */
-    required?: boolean;
+    className?: string;
     /**
      * Whether there's an error state
      */
     error?: boolean;
     /**
-     * Custom style overrides
+     * Custom margin bottom (useful for different form layouts)
      */
-    style?: CSSProperties;
+    marginBottom?: string;
     /**
-     * Display type for label positioning
+     * Whether the field is required
      */
-    variant?: InputLabelVariant;
+    required?: boolean;
     /**
-     * Custom margin bottom (useful for different form layouts)
+     * Custom style overrides
      */
-    marginBottom?: string;
+    style?: CSSProperties;
     /**
-     * Additional CSS class names
+     * Display type for label positioning
      */
-    className?: string;
+    variant?: InputLabelVariant;
 }
 declare const InputLabel: FC<InputLabelProps>;
 export default InputLabel;

package/dist/components/primitives/InputLabel/InputLabel.styles.d.ts

@@ -26,11 +26,5 @@ export type InputLabelVariant = 'block' | 'inline';
  * @param marginBottom - Custom margin bottom value
  * @returns Object containing CSS class names for component styling
  */
-declare const useStyles: (theme: Theme, colorScheme: string, variant: InputLabelVariant, error: boolean, marginBottom?: string) => {
-    label: string;
-    error: string;
-    requiredIndicator: string;
-    block: string;
-    inline: string;
-};
+declare const useStyles: (theme: Theme, colorScheme: string, variant: InputLabelVariant, error: boolean, marginBottom?: string) => Record<string, string>;
 export default useStyles;

package/dist/components/primitives/KeyValueInput/KeyValueInput.d.ts

@@ -53,14 +53,14 @@ export interface KeyValueInputProps {
      * Maximum number of key-value pairs allowed.
      */
     maxPairs?: number;
-    /**
-     * Callback fired when the key-value pairs change.
-     */
-    onChange?: (pairs: KeyValuePair[]) => void;
     /**
      * Callback fired when a pair is added.
      */
     onAdd?: (pair: KeyValuePair) => void;
+    /**
+     * Callback fired when the key-value pairs change.
+     */
+    onChange?: (pairs: KeyValuePair[]) => void;
     /**
      * Callback fired when a pair is removed.
      */

package/dist/components/primitives/KeyValueInput/KeyValueInput.styles.d.ts

@@ -25,21 +25,5 @@ import { Theme } from '@asgardeo/browser';
  * @param hasError - Whether the component has an error
  * @returns Object containing CSS class names for component styling
  */
-declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, readOnly: boolean, hasError: boolean) => {
-    container: string;
-    label: string;
-    requiredIndicator: string;
-    pairsList: string;
-    pairRow: string;
-    pairInput: string;
-    addRow: string;
-    removeButton: string;
-    addButton: string;
-    helperText: string;
-    emptyState: string;
-    readOnlyPair: string;
-    readOnlyKey: string;
-    readOnlyValue: string;
-    counterText: string;
-};
+declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, readOnly: boolean, hasError: boolean) => Record<string, string>;
 export default useStyles;

package/dist/components/primitives/Logo/Logo.d.ts

@@ -21,26 +21,26 @@ export type LogoSize = 'small' | 'medium' | 'large';
  * Props for the Logo component.
  */
 export interface LogoProps {
+    /**
+     * Custom alt text for the logo.
+     */
+    alt?: string;
     /**
      * Custom CSS class name for the logo.
      */
     className?: string;
     /**
-     * Custom logo URL to override theme logo.
+     * Size of the logo.
      */
-    src?: string;
+    size?: LogoSize;
     /**
-     * Custom alt text for the logo.
+     * Custom logo URL to override theme logo.
      */
-    alt?: string;
+    src?: string;
     /**
      * Custom title for the logo.
      */
     title?: string;
-    /**
-     * Size of the logo.
-     */
-    size?: LogoSize;
 }
 /**
  * Logo component that displays the brand logo from theme or custom source.

package/dist/components/primitives/Logo/Logo.styles.d.ts

@@ -24,11 +24,5 @@ export type LogoSize = 'small' | 'medium' | 'large';
  * @param size - The size of the logo
  * @returns Object containing CSS class names for component styling
  */
-declare const useStyles: (theme: Theme, colorScheme: string, size: LogoSize) => {
-    logo: string;
-    size: string;
-    small: string;
-    medium: string;
-    large: string;
-};
+declare const useStyles: (theme: Theme, colorScheme: string, size: LogoSize) => Record<string, string>;
 export default useStyles;

package/dist/components/primitives/MultiInput/MultiInput.d.ts

@@ -20,69 +20,69 @@ export type MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'da
 export type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';
 export interface MultiInputProps {
     /**
-     * Label text to display above the inputs
+     * Additional CSS class names
      */
-    label?: string;
+    className?: string;
     /**
-     * Error message to display below the inputs
+     * Whether the field is disabled
      */
-    error?: string;
+    disabled?: boolean;
     /**
-     * Additional CSS class names
+     * Icon to display at the end (right) of each input (in addition to add/remove buttons)
      */
-    className?: string;
+    endIcon?: ReactNode;
     /**
-     * Whether the field is required
+     * Error message to display below the inputs
      */
-    required?: boolean;
+    error?: string;
     /**
-     * Whether the field is disabled
+     * Field type for different input components
      */
-    disabled?: boolean;
+    fieldType?: MultiInputFieldType;
     /**
      * Helper text to display below the inputs
      */
     helperText?: string;
     /**
-     * Placeholder text for input fields
+     * Label text to display above the inputs
      */
-    placeholder?: string;
+    label?: string;
     /**
-     * Array of values
+     * Maximum number of fields to allow (default: unlimited)
      */
-    values: string[];
+    maxFields?: number;
+    /**
+     * Minimum number of fields to show (default: 1)
+     */
+    minFields?: number;
     /**
      * Callback when values change
      */
     onChange: (values: string[]) => void;
     /**
-     * Input type
+     * Placeholder text for input fields
      */
-    type?: MultiInputType;
+    placeholder?: string;
     /**
-     * Field type for different input components
+     * Whether the field is required
      */
-    fieldType?: MultiInputFieldType;
+    required?: boolean;
     /**
      * Icon to display at the start (left) of each input
      */
     startIcon?: ReactNode;
     /**
-     * Icon to display at the end (right) of each input (in addition to add/remove buttons)
-     */
-    endIcon?: ReactNode;
-    /**
-     * Minimum number of fields to show (default: 1)
+     * Custom style object
      */
-    minFields?: number;
+    style?: CSSProperties;
     /**
-     * Maximum number of fields to allow (default: unlimited)
+     * Input type
      */
-    maxFields?: number;
+    type?: MultiInputType;
     /**
-     * Custom style object
+     * Array of values
      */
-    style?: CSSProperties;
+    values: string[];
 }
 declare const MultiInput: FC<MultiInputProps>;
 export default MultiInput;

package/dist/components/primitives/MultiInput/MultiInput.styles.d.ts

@@ -28,15 +28,5 @@ export type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';
  * @param canRemove - Whether items can be removed
  * @returns Object containing CSS class names for component styling
  */
-declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean, canAddMore: boolean, canRemove: boolean) => {
-    container: string;
-    inputRow: string;
-    inputWrapper: string;
-    plusIcon: string;
-    listContainer: string;
-    listItem: string;
-    listItemText: string;
-    removeButton: string;
-    icon: string;
-};
+declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean, canAddMore: boolean, canRemove: boolean) => Record<string, string>;
 export default useStyles;

package/dist/components/primitives/OtpField/OtpField.d.ts

@@ -19,37 +19,33 @@ import { FC, CSSProperties } from 'react';
 export type OtpFieldType = 'text' | 'number' | 'password';
 export interface OtpInputProps {
     /**
-     * Label text to display above the OTP input
-     */
-    label?: string;
-    /**
-     * Error message to display below the OTP input
+     * Auto focus the first input on mount
      */
-    error?: string;
+    autoFocus?: boolean;
     /**
      * Additional CSS class names
      */
     className?: string;
-    /**
-     * Whether the field is required
-     */
-    required?: boolean;
     /**
      * Whether the field is disabled
      */
     disabled?: boolean;
+    /**
+     * Error message to display below the OTP input
+     */
+    error?: string;
     /**
      * Helper text to display below the OTP input
      */
     helperText?: string;
     /**
-     * Number of OTP input fields
+     * Label text to display above the OTP input
      */
-    length?: number;
+    label?: string;
     /**
-     * Current OTP value
+     * Number of OTP input fields
      */
-    value?: string;
+    length?: number;
     /**
      * Callback function called when OTP value changes
      */
@@ -63,25 +59,29 @@ export interface OtpInputProps {
      */
     onComplete?: (value: string) => void;
     /**
-     * Type of input (text, number, password)
+     * Pattern for numeric input validation
      */
-    type?: OtpFieldType;
+    pattern?: string;
     /**
      * Placeholder character for each input field
      */
     placeholder?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
     /**
      * Custom container style
      */
     style?: CSSProperties;
     /**
-     * Auto focus the first input on mount
+     * Type of input (text, number, password)
      */
-    autoFocus?: boolean;
+    type?: OtpFieldType;
     /**
-     * Pattern for numeric input validation
+     * Current OTP value
      */
-    pattern?: string;
+    value?: string;
 }
 declare const OtpField: FC<OtpInputProps>;
 export default OtpField;

package/dist/components/primitives/OtpField/OtpField.styles.d.ts

@@ -26,10 +26,5 @@ export type OtpFieldType = 'text' | 'number' | 'password';
  * @param length - Number of OTP input fields
  * @returns Object containing CSS class names for component styling
  */
-declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean, length: number) => {
-    inputContainer: string;
-    input: string;
-    inputError: string;
-    inputDisabled: string;
-};
+declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean, length: number) => Record<string, string>;
 export default useStyles;

package/dist/components/primitives/PasswordField/PasswordField.styles.d.ts

@@ -25,9 +25,5 @@ import { Theme } from '@asgardeo/browser';
  * @param hasError - Whether the component has an error
  * @returns Object containing CSS class names for component styling
  */
-declare const useStyles: (theme: Theme, colorScheme: string, showPassword: boolean, disabled: boolean, hasError: boolean) => {
-    toggleIcon: string;
-    visibleIcon: string;
-    hiddenIcon: string;
-};
+declare const useStyles: (theme: Theme, colorScheme: string, showPassword: boolean, disabled: boolean, hasError: boolean) => Record<string, string>;
 export default useStyles;

package/dist/components/primitives/Select/Select.d.ts

@@ -17,48 +17,48 @@
  */
 import { FC, SelectHTMLAttributes } from 'react';
 export interface SelectOption {
-    /**
-     * The value that will be submitted with the form
-     */
-    value: string;
     /**
      * The text that will be displayed in the select
      */
     label: string;
-}
-export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {
-    /**
-     * Label text to display above the select
-     */
-    label?: string;
     /**
-     * Error message to display below the select
+     * The value that will be submitted with the form
      */
-    error?: string;
+    value: string;
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {
     /**
      * Additional CSS class names
      */
     className?: string;
-    /**
-     * Whether the field is required
-     */
-    required?: boolean;
     /**
      * Whether the field is disabled
      */
     disabled?: boolean;
+    /**
+     * Error message to display below the select
+     */
+    error?: string;
     /**
      * Helper text to display below the select
      */
     helperText?: string;
     /**
-     * Placeholder text for the default/empty option
+     * Label text to display above the select
      */
-    placeholder?: string;
+    label?: string;
     /**
      * The options to display in the select
      */
     options: SelectOption[];
+    /**
+     * Placeholder text for the default/empty option
+     */
+    placeholder?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
 }
 declare const Select: FC<SelectProps>;
 export default Select;

package/dist/components/primitives/Select/Select.styles.d.ts

@@ -24,10 +24,5 @@ import { Theme } from '@asgardeo/browser';
  * @param hasError - Whether the component has an error
  * @returns Object containing CSS class names for component styling
  */
-declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean) => {
-    select: string;
-    selectError: string;
-    selectDisabled: string;
-    option: string;
-};
+declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean) => Record<string, string>;
 export default useStyles;

package/dist/components/primitives/Spinner/Spinner.d.ts

@@ -19,17 +19,17 @@ import { FC, CSSProperties } from 'react';
 export type SpinnerSize = 'small' | 'medium' | 'large';
 export interface SpinnerProps {
     /**
-     * Size of the spinner
+     * Additional CSS class names
      */
-    size?: SpinnerSize;
+    className?: string;
     /**
      * Custom color for the spinner
      */
     color?: string;
     /**
-     * Additional CSS class names
+     * Size of the spinner
      */
-    className?: string;
+    size?: SpinnerSize;
     /**
      * Custom styles
      */

package/dist/components/primitives/Spinner/Spinner.styles.d.ts

@@ -25,10 +25,5 @@ export type SpinnerSize = 'small' | 'medium' | 'large';
  * @param color - The color of the spinner
  * @returns Object containing CSS class names for component styling
  */
-declare const useStyles: (theme: Theme, colorScheme: string, size: SpinnerSize, color?: string) => {
-    spinner: string;
-    spinnerSmall: string;
-    spinnerMedium: string;
-    spinnerLarge: string;
-};
+declare const useStyles: (theme: Theme, colorScheme: string, size: SpinnerSize, color?: string) => Record<string, string>;
 export default useStyles;

package/dist/components/primitives/TextField/TextField.d.ts

@@ -17,46 +17,46 @@
  */
 import { FC, InputHTMLAttributes, ReactNode } from 'react';
 export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
-    /**
-     * Label text to display above the input
-     */
-    label?: string;
-    /**
-     * Error message to display below the input
-     */
-    error?: string;
     /**
      * Additional CSS class names
      */
     className?: string;
-    /**
-     * Whether the field is required
-     */
-    required?: boolean;
     /**
      * Whether the field is disabled
      */
     disabled?: boolean;
+    /**
+     * Icon to display at the end (right) of the input
+     */
+    endIcon?: ReactNode;
+    /**
+     * Error message to display below the input
+     */
+    error?: string;
     /**
      * Helper text to display below the input
      */
     helperText?: string;
     /**
-     * Icon to display at the start (left) of the input
+     * Label text to display above the input
      */
-    startIcon?: ReactNode;
+    label?: string;
     /**
-     * Icon to display at the end (right) of the input
+     * Click handler for the end icon
      */
-    endIcon?: ReactNode;
+    onEndIconClick?: () => void;
     /**
      * Click handler for the start icon
      */
     onStartIconClick?: () => void;
     /**
-     * Click handler for the end icon
+     * Whether the field is required
      */
-    onEndIconClick?: () => void;
+    required?: boolean;
+    /**
+     * Icon to display at the start (left) of the input
+     */
+    startIcon?: ReactNode;
 }
 declare const TextField: FC<TextFieldProps>;
 export default TextField;

package/dist/components/primitives/TextField/TextField.styles.d.ts

@@ -26,13 +26,5 @@ import { Theme } from '@asgardeo/browser';
  * @param hasEndIcon - Whether the component has an end icon
  * @returns Object containing CSS class names for component styling
  */
-declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean, hasStartIcon: boolean, hasEndIcon: boolean) => {
-    inputContainer: string;
-    input: string;
-    inputError: string;
-    inputDisabled: string;
-    icon: string;
-    startIcon: string;
-    endIcon: string;
-};
+declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean, hasStartIcon: boolean, hasEndIcon: boolean) => Record<string, string>;
 export default useStyles;

package/dist/components/primitives/Typography/Typography.d.ts

@@ -19,57 +19,57 @@ import { CSSProperties, FC, ReactNode, ElementType } from 'react';
 import { TypographyVariant, TypographyAlign, TypographyColor } from './Typography.styles';
 export interface TypographyProps {
     /**
-     * The content to be rendered
-     */
-    children: ReactNode;
-    /**
-     * The typography variant to apply
+     * Text alignment
      */
-    variant?: TypographyVariant;
+    align?: TypographyAlign;
     /**
-     * The HTML element or React component to render
+     * The content to be rendered
      */
-    component?: ElementType;
+    children: ReactNode;
     /**
-     * Text alignment
+     * Additional CSS class names
      */
-    align?: TypographyAlign;
+    className?: string;
     /**
      * Color variant
      */
     color?: TypographyColor;
     /**
-     * Whether the text should be clipped with ellipsis when it overflows
+     * The HTML element or React component to render
      */
-    noWrap?: boolean;
+    component?: ElementType;
     /**
-     * Additional CSS class names
+     * Custom font size (overrides variant sizing)
      */
-    className?: string;
+    fontSize?: string | number;
     /**
-     * Custom styles
+     * Custom font weight
      */
-    style?: CSSProperties;
+    fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | number;
+    /**
+     * Whether to disable gutters (margin bottom)
+     */
+    gutterBottom?: boolean;
     /**
      * Whether the text should be displayed inline
      */
     inline?: boolean;
     /**
-     * Custom font weight
+     * Line height
      */
-    fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | number;
+    lineHeight?: string | number;
     /**
-     * Custom font size (overrides variant sizing)
+     * Whether the text should be clipped with ellipsis when it overflows
      */
-    fontSize?: string | number;
+    noWrap?: boolean;
     /**
-     * Line height
+     * Custom styles
      */
-    lineHeight?: string | number;
+    style?: CSSProperties;
     /**
-     * Whether to disable gutters (margin bottom)
+     * The typography variant to apply
      */
-    gutterBottom?: boolean;
+    variant?: TypographyVariant;
 }
 /**
  * Typography component for consistent text rendering throughout the application.