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

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/components/Spinner/Spinner.d.ts

@@ -1,11 +1,37 @@
-import { FC } from 'react';
+import { FC, Ref } from 'react';
 export interface SpinnerProps {
     size?: number;
     className?: string;
     fullWidth?: boolean;
+    /**
+     * Covers the whole viewport: a fixed overlay on the page background, above
+     * the page and at the kit's popup layer, with the ring centred. For an app's
+     * loading screen; it replaces the `fullWidth` + `h-screen` wrappers hosts
+     * wrote themselves.
+     */
+    fullScreen?: boolean;
     ariaLabel?: string;
+    /**
+     * Makes the ring focusable (`tabIndex={-1}`) and points this ref at it, so
+     * a host can move focus to the loading state after a retry removes the
+     * focused control. The ring, not the overlay, takes focus, so the host's
+     * focus outline stays on screen.
+     */
+    focusRef?: Ref<HTMLDivElement>;
 }
 /**
  * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Spinner fullScreen size={48} ariaLabel="Checking your session…" />
+ * ```
+ *
+ * @param [size] - Ring diameter in px.
+ * @param [className] - Additional container classes.
+ * @param [fullWidth] - Stretches the container to its parent's width and height.
+ * @param [fullScreen] - Covers the whole viewport with the ring centred.
+ * @param [ariaLabel] - Accessible label for screen readers.
+ * @param [focusRef] - Makes the ring focusable and points this ref at it.
  */
 export declare const Spinner: FC<SpinnerProps>;

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

@@ -84,7 +84,7 @@ export type { CardShellProps } from './components/New/CardShell/CardShell';
 export { ErrorMessageNotification, ErrorToastNotification, GeneralMessageNotification, GeneralToastNotification, InfoMessageNotification, InfoToastNotification, LoadingMessageNotification, LoadingToastNotification, SuccessMessageNotification, SuccessToastNotification, WarningMessageNotification, WarningToastNotification, } from './components/New/Notification/NotificationWrapper';
 export { CalendarMode } from './types/calendar.ts';
 export { Calendar } from './components/New/Calendar/Calendar';
-export type { CalendarProps, CalendarValue, } from './components/New/Calendar/Calendar';
+export type { CalendarProps, CalendarTimeFieldRenderProps, CalendarValue, } from './components/New/Calendar/Calendar';
 export { FolderPath } from './components/New/FolderPath/FolderPath';
 export type { FolderPathProps } from './components/New/FolderPath/FolderPath';
 export { BreadcrumbsSize } from './types/breadcrumbs';
@@ -237,6 +237,10 @@ 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 { ErrorBoundary } from './components/New/ErrorBoundary/ErrorBoundary';
+export type { ErrorBoundaryProps } from './components/New/ErrorBoundary/ErrorBoundary';
+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.66",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",