@epam/ai-dial-ui-kit 0.16.0-dev.61 → 0.16.0-dev.62

package/dist/src/components/New/LoginScreen/LoginScreen.d.ts

@@ -0,0 +1,63 @@
+import { FC, ReactNode, Ref } from 'react';
+export interface LoginScreenProvider {
+    /** Stable provider id; used as the list key. */
+    id: string;
+    /** Visible label; also the link's accessible name. */
+    label: string;
+    /** Where the provider's sign-in starts — a top-level navigation. */
+    href: string;
+    /** Optional provider logo. Decorative; hidden when it fails to load. */
+    iconSrc?: string;
+}
+export interface LoginScreenProps {
+    /** Headline of the screen, rendered as the page's `h1`. */
+    title: ReactNode;
+    /** Prompt above the provider list, such as "Sign in with:". */
+    description?: ReactNode;
+    /** Product mark above the title. Decorative; hidden when it fails to load. */
+    logoSrc?: string;
+    /** One full-width link-styled button per provider. */
+    providers?: LoginScreenProvider[];
+    /** Accessible name of the provider list. */
+    providersLabel?: string;
+    /** State content above the providers: a spinner, an error with a retry, a notice. */
+    children?: ReactNode;
+    /** Ref to the `h1` (focusable with `tabIndex={-1}`), for moving focus after a retry. */
+    titleRef?: Ref<HTMLHeadingElement>;
+    /** Additional CSS classes for the container. */
+    className?: string;
+}
+/**
+ * The full-page sign-in screen shared by DIAL applications: soft themed
+ * artwork behind a centred card with the product mark, an `h1`, state content
+ * and one button per identity provider.
+ * aliases: SignInPage|LoginPage|AuthPage|ProviderPicker
+ * Design system 2.0
+ *
+ * Fills its container. The root is a `section` named by its title. The
+ * artwork follows the `gradient-1` / `gradient-2` theme tokens. On mobile the
+ * card loses its surface and spans the width. Fetching providers and building
+ * their URLs stay with the application. For a signed-out or access-denied
+ * state inside an app, use `StateScreen`.
+ *
+ * @example
+ * ```tsx
+ * <LoginScreen
+ *   logoSrc="/favicon.svg"
+ *   title="Welcome to DIAL Chat"
+ *   description="Sign in with:"
+ *   providersLabel="Sign-in options"
+ *   providers={[{ id: 'keycloak', label: 'Keycloak', href: '/api/auth/login/keycloak' }]}
+ * />
+ * ```
+ *
+ * @param title - Headline of the screen, rendered as the page's `h1`.
+ * @param [description] - Prompt above the provider list.
+ * @param [logoSrc] - Product mark above the title.
+ * @param [providers] - One link-styled button per provider.
+ * @param [providersLabel] - Accessible name of the provider list.
+ * @param [children] - State content above the providers.
+ * @param [titleRef] - Ref to the focusable `h1`.
+ * @param [className] - Additional CSS classes for the container.
+ */
+export declare const LoginScreen: FC<LoginScreenProps>;

package/dist/src/constants/public-class-names.d.ts

@@ -17,6 +17,8 @@ export declare const DIAL_KIT_CLASS: {
     readonly notification: "dial-kit-notification";
     /** The empty-state root of `NoDataContent`. */
     readonly noDataContent: "dial-kit-no-data-content";
+    /** The `section` root of a `LoginScreen`. */
+    readonly loginScreen: "dial-kit-login-screen";
     /** The `section` root of a `StateScreen`. */
     readonly stateScreen: "dial-kit-state-screen";
     /**

package/dist/src/index.d.ts

@@ -237,6 +237,8 @@ export { NoDataContent } from './components/New/NoDataContent/NoDataContent';
 export type { NoDataContentProps } from './components/New/NoDataContent/NoDataContent';
 export { StateScreen } from './components/New/StateScreen/StateScreen';
 export type { StateScreenProps } from './components/New/StateScreen/StateScreen';
+export { LoginScreen } from './components/New/LoginScreen/LoginScreen';
+export type { LoginScreenProps, LoginScreenProvider, } from './components/New/LoginScreen/LoginScreen';
 export { LiveRegion } from './components/New/LiveRegion/LiveRegion';
 export type { LiveRegionProps } from './components/New/LiveRegion/LiveRegion';
 export { LiveRegionElement, LiveRegionPoliteness } from './types/live-region';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.16.0-dev.61",
+  "version": "0.16.0-dev.62",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",