@asgardeo/react 0.2.4 → 0.4.0

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

@@ -0,0 +1,83 @@
+/**
+ * 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 { ButtonHTMLAttributes } from 'react';
+export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;
+export type ButtonVariant = 'solid' | 'outline' | 'text';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    /**
+     * The button color that determines the color scheme
+     */
+    color?: ButtonColor;
+    /**
+     * The button variant that determines the visual style
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button
+     */
+    size?: ButtonSize;
+    /**
+     * Whether the button should take the full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * Icon to display before the button text
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Icon to display after the button text
+     */
+    endIcon?: React.ReactNode;
+}
+/**
+ * Button component with multiple variants and types.
+ *
+ * @example
+ * ```tsx
+ * // Primary solid button
+ * <Button color="primary" variant="solid">
+ *   Click me
+ * </Button>
+ *
+ * // Secondary outline button
+ * <Button color="secondary" variant="outline" size="large">
+ *   Cancel
+ * </Button>
+ *
+ * // Text button with loading state
+ * <Button color="tertiary" variant="text" loading>
+ *   Loading...
+ * </Button>
+ *
+ * // Button with icons
+ * <Button
+ *   color="primary"
+ *   startIcon={<Icon />}
+ *   endIcon={<Arrow />}
+ * >
+ *   Save and Continue
+ * </Button>
+ * ```
+ */
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

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

@@ -0,0 +1,133 @@
+/**
+ * Copyright (import {CSSProperties, HTMLAttributes, forwardRef, useMemo, ReactNode, ForwardRefExoticComponent, Ref} from 'react';
+import useTheme from '../../../theme/useTheme'; 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 { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
+export type CardVariant = 'default' | 'outlined' | 'elevated';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The visual variant of the card
+     */
+    variant?: CardVariant;
+    /**
+     * Whether the card should be clickable (shows hover effects)
+     */
+    clickable?: boolean;
+    /**
+     * Card content
+     */
+    children?: ReactNode;
+}
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Header content
+     */
+    children?: ReactNode;
+}
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Title content
+     */
+    children?: ReactNode;
+    /**
+     * The heading level to use
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+export interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Description content
+     */
+    children?: ReactNode;
+}
+export interface CardActionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Action content
+     */
+    children?: ReactNode;
+}
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content
+     */
+    children?: ReactNode;
+}
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Footer content
+     */
+    children?: ReactNode;
+}
+/**
+ * Card component that provides a flexible container for content.
+ *
+ * @example
+ * ```tsx
+ * <Card variant="elevated" clickable>
+ *   <Card.Header>
+ *     <Card.Title>Card Title</Card.Title>
+ *     <Card.Description>Card Description</Card.Description>
+ *     <Card.Action>
+ *       <Button variant="link">Action</Button>
+ *     </Card.Action>
+ *   </Card.Header>
+ *   <Card.Content>
+ *     <p>Card content goes here</p>
+ *   </Card.Content>
+ *   <Card.Footer>
+ *     <Button>Cancel</Button>
+ *     <Button variant="outline">Submit</Button>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ */
+declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+/**
+ * Card header component that contains the title, description, and optional actions.
+ */
+declare const CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
+/**
+ * Card title component.
+ */
+declare const CardTitle: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLHeadingElement>>;
+/**
+ * Card description component.
+ */
+declare const CardDescription: ForwardRefExoticComponent<CardDescriptionProps & RefAttributes<HTMLParagraphElement>>;
+/**
+ * Card action component for action elements in the header.
+ */
+declare const CardAction: ForwardRefExoticComponent<CardActionProps & RefAttributes<HTMLDivElement>>;
+/**
+ * Card content component that contains the main content of the card.
+ */
+declare const CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>;
+/**
+ * Card footer component that contains footer actions or additional information.
+ */
+declare const CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
+export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Action: typeof CardAction;
+    Content: typeof CardContent;
+    Footer: typeof CardFooter;
+}
+declare const _default: CardComponent;
+export default _default;
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

package/dist/{esm/types/oxygen-ui-react-auth-components/models/component.d.ts → components/primitives/Checkbox/Checkbox.d.ts}

@@ -15,13 +15,28 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export type WithWrapperProps = MuiWrapperProps;
-export interface MuiWrapperProps {
+import { FC, InputHTMLAttributes } from 'react';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {
     /**
-     * Component name with `Mui` prefix.
-     * To provide maximum flexibility and performance, MUI needs a way to know the nature
-     * of the child elements a component receives.
-     * @see {@link https://mui.com/material-ui/guides/composition/#wrapping-components}
+     * Label text to display next to the checkbox
      */
-    muiName: string;
+    label?: string;
+    /**
+     * Error message to display below the checkbox
+     */
+    error?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Helper text to display below the checkbox
+     */
+    helperText?: string;
 }
+declare const Checkbox: FC<CheckboxProps>;
+export default Checkbox;

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

@@ -0,0 +1,50 @@
+/**
+ * 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 { FC, InputHTMLAttributes } from 'react';
+export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {
+    /**
+     * 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;
+    /**
+     * Helper text to display below the input
+     */
+    helperText?: string;
+    /**
+     * Custom date format for the regex pattern
+     */
+    dateFormat?: string;
+}
+declare const DatePicker: FC<DatePickerProps>;
+export default DatePicker;

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

@@ -0,0 +1,58 @@
+/**
+ * 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, HTMLAttributes } from 'react';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted';
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The orientation of the divider
+     */
+    orientation?: DividerOrientation;
+    /**
+     * The variant style of the divider
+     */
+    variant?: DividerVariant;
+    /**
+     * Text to display in the center of the divider
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom color for the divider
+     */
+    color?: string;
+}
+/**
+ * Divider component for separating content sections.
+ *
+ * @example
+ * ```tsx
+ * // Basic horizontal divider
+ * <Divider />
+ *
+ * // Divider with text
+ * <Divider>OR</Divider>
+ *
+ * // Vertical divider
+ * <Divider orientation="vertical" />
+ *
+ * // Custom styled divider
+ * <Divider variant="dashed" color="#ccc">Continue with</Divider>
+ * ```
+ */
+declare const Divider: FC<DividerProps>;
+export default Divider;

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

@@ -0,0 +1,50 @@
+/**
+ * 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, ReactNode } from 'react';
+export interface FormControlProps {
+    /**
+     * The content to be wrapped by the form control
+     */
+    children: ReactNode;
+    /**
+     * Error message to display below the content
+     */
+    error?: string;
+    /**
+     * Helper text to display below the content
+     */
+    helperText?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom container style
+     */
+    style?: CSSProperties;
+    /**
+     * Custom alignment for helper text (default: left, center for OTP)
+     */
+    helperTextAlign?: 'left' | 'center';
+    /**
+     * Custom margin left for helper text (for components like Checkbox)
+     */
+    helperTextMarginLeft?: string;
+}
+declare const FormControl: FC<FormControlProps>;
+export default FormControl;

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

@@ -0,0 +1,23 @@
+/**
+ * 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, SVGProps } from 'react';
+/**
+ * CircleAlert icon component.
+ */
+declare const CircleAlert: FC<SVGProps<SVGSVGElement>>;
+export default CircleAlert;

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

@@ -0,0 +1,23 @@
+/**
+ * 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, SVGProps } from 'react';
+/**
+ * CircleCheck icon component.
+ */
+declare const CircleCheck: FC<SVGProps<SVGSVGElement>>;
+export default CircleCheck;

package/dist/{esm/types/models/use-config.d.ts → components/primitives/Icons/Eye.d.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ * 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
@@ -15,8 +15,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { UIAuthConfig } from '@asgardeo/js';
-interface UseConfig {
-    config: UIAuthConfig;
-}
-export default UseConfig;
+import { FC, SVGProps } from 'react';
+/**
+ * Eye icon component.
+ */
+declare const Eye: FC<SVGProps<SVGSVGElement>>;
+export default Eye;

package/dist/{esm/types/contexts/i18n-context.d.ts → components/primitives/Icons/EyeOff.d.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ * 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
@@ -15,7 +15,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Context } from 'react';
-import { I18n } from '../models/i18n';
-declare const I18nContext: Context<I18n>;
-export default I18nContext;
+import { FC, SVGProps } from 'react';
+/**
+ * EyeOff icon component.
+ */
+declare const EyeOff: FC<SVGProps<SVGSVGElement>>;
+export default EyeOff;

package/dist/{esm/types/hooks/use-on.d.ts → components/primitives/Icons/Info.d.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ * 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
@@ -15,6 +15,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { UseOnProps } from '../models/use-on';
-declare const useOn: (props: UseOnProps) => void;
-export default useOn;
+import { FC, SVGProps } from 'react';
+/**
+ * Info icon component.
+ */
+declare const Info: FC<SVGProps<SVGSVGElement>>;
+export default Info;

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

@@ -0,0 +1,23 @@
+/**
+ * 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, SVGProps } from 'react';
+/**
+ * TriangleAlert icon component.
+ */
+declare const TriangleAlert: FC<SVGProps<SVGSVGElement>>;
+export default TriangleAlert;

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/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;