@asgardeo/react 0.3.0 → 0.5.0

package/dist/components/primitives/Icons/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export { default as CircleAlert } from './CircleAlert';
+export { default as CircleCheck } from './CircleCheck';
+export { default as Eye } from './Eye';
+export { default as EyeOff } from './EyeOff';
+export { default as Info } from './Info';
+export { default as LogOut } from './LogOut';
+export { default as Plus } from './Plus';
+export { default as TriangleAlert } from './TriangleAlert';
+export { default as User } from './User';
+export { default as X } from './X';

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

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { CSSProperties, FC, LabelHTMLAttributes, ReactNode } from 'react';
+export interface InputLabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'style'> {
+    /**
+     * Label text or content
+     */
+    children: ReactNode;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether there's an error state
+     */
+    error?: boolean;
+    /**
+     * Custom style overrides
+     */
+    style?: CSSProperties;
+    /**
+     * Display type for label positioning
+     */
+    variant?: 'block' | 'inline';
+    /**
+     * Custom margin bottom (useful for different form layouts)
+     */
+    marginBottom?: string;
+}
+declare const InputLabel: FC<InputLabelProps>;
+export default InputLabel;

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

@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { FC } from 'react';
+export interface KeyValuePair {
+    key: string;
+    value: string;
+}
+export interface KeyValueInputProps {
+    /**
+     * CSS class name for styling the component.
+     */
+    className?: string;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Error message to display.
+     */
+    error?: string;
+    /**
+     * Help text to display below the input.
+     */
+    helperText?: string;
+    /**
+     * Label for the key input field.
+     */
+    keyLabel?: string;
+    /**
+     * Placeholder text for the key input field.
+     */
+    keyPlaceholder?: string;
+    /**
+     * Label for the component.
+     */
+    label?: string;
+    /**
+     * 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 a pair is removed.
+     */
+    onRemove?: (pair: KeyValuePair, index: number) => void;
+    /**
+     * Whether the component is in read-only mode.
+     */
+    readOnly?: boolean;
+    /**
+     * Text for the remove button.
+     */
+    removeButtonText?: string;
+    /**
+     * Whether the component is required.
+     */
+    required?: boolean;
+    /**
+     * Current key-value pairs.
+     */
+    value?: Record<string, any> | KeyValuePair[];
+    /**
+     * Label for the value input field.
+     */
+    valueLabel?: string;
+    /**
+     * Placeholder text for the value input field.
+     */
+    valuePlaceholder?: string;
+}
+/**
+ * KeyValueInput component allows users to manage key-value pairs with add/remove functionality.
+ * It provides a user-friendly interface for editing organization attributes or similar data structures.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <KeyValueInput
+ *   label="Organization Attributes"
+ *   onChange={(pairs) => console.log(pairs)}
+ * />
+ *
+ * // With initial values
+ * <KeyValueInput
+ *   label="Organization Attributes"
+ *   value={{department: 'IT', location: 'New York'}}
+ *   onChange={(pairs) => console.log(pairs)}
+ * />
+ *
+ * // With add/remove callbacks
+ * <KeyValueInput
+ *   label="Custom Attributes"
+ *   value={attributes}
+ *   onChange={(pairs) => setAttributes(pairs)}
+ *   onAdd={(pair) => console.log('Added:', pair)}
+ *   onRemove={(pair, index) => console.log('Removed:', pair, 'at index:', index)}
+ * />
+ * ```
+ */
+declare const KeyValueInput: FC<KeyValueInputProps>;
+export default KeyValueInput;

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

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { CSSProperties, FC } from 'react';
+export interface OtpInputProps {
+    /**
+     * Label text to display above the OTP input
+     */
+    label?: string;
+    /**
+     * Error message to display below the OTP input
+     */
+    error?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Helper text to display below the OTP input
+     */
+    helperText?: string;
+    /**
+     * Number of OTP input fields
+     */
+    length?: number;
+    /**
+     * Current OTP value
+     */
+    value?: string;
+    /**
+     * Callback function called when OTP value changes
+     */
+    onChange?: (event: {
+        target: {
+            value: string;
+        };
+    }) => void;
+    /**
+     * Callback function called when OTP input is complete
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Type of input (text, number, password)
+     */
+    type?: 'text' | 'number' | 'password';
+    /**
+     * Placeholder character for each input field
+     */
+    placeholder?: string;
+    /**
+     * Custom container style
+     */
+    style?: CSSProperties;
+    /**
+     * Auto focus the first input on mount
+     */
+    autoFocus?: boolean;
+    /**
+     * Pattern for numeric input validation
+     */
+    pattern?: string;
+}
+declare const OtpField: FC<OtpInputProps>;
+export default OtpField;

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { FC } from 'react';
+import { TextFieldProps } from '../TextField/TextField';
+export interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'onEndIconClick' | 'onChange'> {
+    /**
+     * Callback function when the field value changes
+     */
+    onChange: (value: string) => void;
+}
+/**
+ * Password field component with show/hide toggle functionality.
+ * This component extends TextField and adds password visibility toggle functionality.
+ */
+declare const PasswordField: FC<PasswordFieldProps>;
+export default PasswordField;

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

@@ -15,45 +15,82 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC, ReactNode } from 'react';
-interface PopoverHeaderProps {
-    children?: ReactNode;
+import { UseFloatingReturn, UseInteractionsReturn } from '@floating-ui/react';
+import React from 'react';
+interface DialogOptions {
+    initialOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
 }
-declare const PopoverHeader: FC<PopoverHeaderProps>;
-interface PopoverContentProps {
-    children: ReactNode;
+interface DialogHookReturn extends UseFloatingReturn, UseInteractionsReturn {
+    descriptionId: string | undefined;
+    labelId: string | undefined;
+    open: boolean;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setOpen: (open: boolean) => void;
 }
-declare const PopoverContent: FC<PopoverContentProps>;
-export interface PopoverProps {
-    /**
-     * Whether the popover is open
-     */
-    isOpen: boolean;
-    /**
-     * The content to display inside the popover
-     */
-    children: ReactNode;
-    /**
-     * Callback when the popover should close
-     */
-    onClose: () => void;
-    /**
-     * Optional custom class name for the popover container
-     */
+export declare function useDialog({ initialOpen, open: controlledOpen, onOpenChange: setControlledOpen, }?: DialogOptions): DialogHookReturn;
+interface PopoverOptions {
+    initialOpen?: boolean;
+    offset?: number;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+}
+interface PopoverHookReturn extends UseFloatingReturn, UseInteractionsReturn {
+    descriptionId: string | undefined;
+    labelId: string | undefined;
+    open: boolean;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setOpen: (open: boolean) => void;
+}
+export declare function usePopover({ initialOpen, open: controlledOpen, onOpenChange: setControlledOpen, placement, offset: offsetValue, }?: PopoverOptions): PopoverHookReturn;
+export declare const useDialogContext: () => DialogHookReturn;
+export declare const usePopoverContext: () => PopoverHookReturn;
+export declare function Dialog({ children, ...options }: {
+    children: React.ReactNode;
+} & DialogOptions): import("react/jsx-runtime").JSX.Element;
+interface DialogTriggerProps {
+    asChild?: boolean;
+    children: React.ReactNode;
+}
+export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement> & DialogTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const DialogContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function Popover({ children, ...options }: {
+    children: React.ReactNode;
+} & PopoverOptions): import("react/jsx-runtime").JSX.Element;
+interface PopoverTriggerProps {
+    asChild?: boolean;
+    children: React.ReactNode;
+}
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement> & PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverHeading: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DialogHeading: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const PopoverClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+interface LegacyPopoverProps {
+    children: React.ReactNode;
     className?: string;
-    /**
-     * The HTML element ID where the portal should be mounted
-     */
-    portalId?: string;
-    /**
-     * The display mode of the popover
-     * 'modal' - shows overlay and centers content
-     * 'dropdown' - no overlay, content positioned relative to trigger
-     */
+    isOpen: boolean;
     mode?: 'modal' | 'dropdown';
+    offset?: number;
+    onClose: () => void;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    trigger?: HTMLElement | null;
 }
-export declare const Popover: FC<PopoverProps> & {
-    Header: typeof PopoverHeader;
-    Content: typeof PopoverContent;
+declare const LegacyPopoverHeader: React.FC<{
+    children?: React.ReactNode;
+}>;
+declare const LegacyPopoverContent: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const LegacyPopover: React.FC<LegacyPopoverProps> & {
+    Content: typeof LegacyPopoverContent;
+    Header: typeof LegacyPopoverHeader;
 };
-export default Popover;
+export default LegacyPopover;

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

@@ -56,5 +56,5 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
      */
     options: SelectOption[];
 }
-export declare const Select: FC<SelectProps>;
+declare const Select: FC<SelectProps>;
 export default Select;

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

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { FC, CSSProperties } from 'react';
+export type SpinnerSize = 'small' | 'medium' | 'large';
+export interface SpinnerProps {
+    /**
+     * Size of the spinner
+     */
+    size?: SpinnerSize;
+    /**
+     * Custom color for the spinner
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: CSSProperties;
+}
+/**
+ * Spinner component for loading states
+ *
+ * @example
+ * ```tsx
+ * // Basic spinner
+ * <Spinner />
+ *
+ * // Large spinner with custom color
+ * <Spinner size="large" color="#3b82f6" />
+ *
+ * // Small spinner
+ * <Spinner size="small" />
+ * ```
+ */
+declare const Spinner: FC<SpinnerProps>;
+export default Spinner;

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

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC, InputHTMLAttributes } from 'react';
+import { FC, InputHTMLAttributes, ReactNode } from 'react';
 export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
     /**
      * Label text to display above the input
@@ -41,6 +41,22 @@ export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElemen
      * Helper text to display below the input
      */
     helperText?: string;
+    /**
+     * Icon to display at the start (left) of the input
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon to display at the end (right) of the input
+     */
+    endIcon?: ReactNode;
+    /**
+     * Click handler for the start icon
+     */
+    onStartIconClick?: () => void;
+    /**
+     * Click handler for the end icon
+     */
+    onEndIconClick?: () => void;
 }
-export declare const TextField: FC<TextFieldProps>;
+declare const TextField: FC<TextFieldProps>;
 export default TextField;

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

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { CSSProperties, FC, ReactNode, ElementType } from 'react';
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'overline' | 'button';
+export type TypographyAlign = 'left' | 'center' | 'right' | 'justify';
+export type TypographyColor = 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | 'textPrimary' | 'textSecondary' | 'inherit';
+export interface TypographyProps {
+    /**
+     * The content to be rendered
+     */
+    children: ReactNode;
+    /**
+     * The typography variant to apply
+     */
+    variant?: TypographyVariant;
+    /**
+     * The HTML element or React component to render
+     */
+    component?: ElementType;
+    /**
+     * Text alignment
+     */
+    align?: TypographyAlign;
+    /**
+     * Color variant
+     */
+    color?: TypographyColor;
+    /**
+     * Whether the text should be clipped with ellipsis when it overflows
+     */
+    noWrap?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: CSSProperties;
+    /**
+     * Whether the text should be displayed inline
+     */
+    inline?: boolean;
+    /**
+     * Custom font weight
+     */
+    fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | number;
+    /**
+     * Custom font size (overrides variant sizing)
+     */
+    fontSize?: string | number;
+    /**
+     * Line height
+     */
+    lineHeight?: string | number;
+    /**
+     * Whether to disable gutters (margin bottom)
+     */
+    gutterBottom?: boolean;
+}
+/**
+ * Typography component for consistent text rendering throughout the application.
+ * Integrates with the theme system and provides semantic HTML elements.
+ */
+declare const Typography: FC<TypographyProps>;
+export default Typography;

package/dist/contexts/{AsgardeoContext.d.ts → Asgardeo/AsgardeoContext.d.ts}

@@ -20,6 +20,9 @@ import { Context } from 'react';
  * Props interface of {@link AsgardeoContext}
  */
 export type AsgardeoContextProps = {
+    afterSignInUrl: string;
+    baseUrl: string;
+    isInitialized: boolean;
     /**
      * Flag indicating whether the SDK is working in the background.
      */
@@ -47,7 +50,6 @@ export type AsgardeoContextProps = {
      */
     signUp: any;
     user: any;
-    baseUrl: string;
 };
 /**
  * Context object for managing the Authentication flow builder core context.

package/dist/{providers → contexts/Asgardeo}/AsgardeoProvider.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC, PropsWithChildren } from 'react';
-import { AsgardeoReactConfig } from '../models/config';
+import { AsgardeoReactConfig } from '../../models/config';
 /**
  * Props interface of {@link AsgardeoProvider}
  */

package/dist/{hooks → contexts/Asgardeo}/useAsgardeo.d.ts

@@ -15,6 +15,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { AsgardeoContextProps } from '../contexts/AsgardeoContext';
+import { AsgardeoContextProps } from './AsgardeoContext';
 declare const useAsgardeo: () => AsgardeoContextProps;
 export default useAsgardeo;