@epam/ai-dial-ui-kit 0.15.0-dev.30 → 0.15.0-dev.35

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

@@ -0,0 +1,91 @@
+import { FC, ReactNode } from 'react';
+/** Props for `SideDrawer`. */
+export interface SideDrawerProps {
+    /** Whether the drawer is open. */
+    open: boolean;
+    /** Called when the drawer asks to close: the close button, Escape, or a press on the backdrop. */
+    onClose: () => void;
+    /** Header title. A string also names the dialog; a node needs `ariaLabel`. */
+    header?: ReactNode;
+    /** Accessible name of the drawer when `header` is not a string. */
+    ariaLabel?: string;
+    /** Controls placed in the header between the title and the close button. */
+    headerActions?: ReactNode;
+    /** Shows a back button at the start of the header when set. */
+    onBack?: () => void;
+    /** Accessible name of the back button. */
+    backAriaLabel?: string;
+    /** Whether the back button is disabled. */
+    backDisabled?: boolean;
+    /** Accessible name of the close button. */
+    closeAriaLabel?: string;
+    /** Whether the close button is disabled, e.g. while a submission is in flight. */
+    closeDisabled?: boolean;
+    /** Whether the header's close button is left out. */
+    hideClose?: boolean;
+    /** Whether a press on the backdrop closes the drawer. */
+    closeOnOutsideClick?: boolean;
+    /** Content of the drawer, scrolled when it is taller than the viewport. */
+    children?: ReactNode;
+    /** Additional CSS classes for the drawer panel, e.g. a different desktop width. */
+    className?: string;
+    /** Additional CSS classes for the backdrop. */
+    overlayClassName?: string;
+    /** Additional CSS classes for the header row. */
+    headerClassName?: string;
+    /** Additional CSS classes for the scrolling body. */
+    bodyClassName?: string;
+    /** Type-scale class for a string title, replacing its own. */
+    titleClassName?: string;
+    /** Id of the element to portal into, instead of the end of `<body>`. */
+    portalId?: string;
+}
+/**
+ * A full-height panel that slides in from the inline end over a dimmed page.
+ * aliases: Drawer|SidePanel|SideSheet|DetailsPanel
+ * Design system 2.0
+ *
+ * It is a modal dialog while open: focus moves to the panel and stays inside,
+ * returns to where it came from on close, and the page behind it does not
+ * scroll. Escape, the close button and a press on the backdrop all call
+ * `onClose`; the drawer stays controlled by `open`.
+ *
+ * The panel stays mounted while closed, so it can slide out as well as in and
+ * keep the state of whatever it holds. Closed, it is `inert` — out of both
+ * the tab order and the accessibility tree — and the backdrop lets pointer
+ * events through. On desktop the drawer is 540px wide with a rounded,
+ * bordered leading edge; on mobile it takes the full width. It slides from
+ * the end in either direction, and not at all under `prefers-reduced-motion`.
+ *
+ * The header follows `Popup`: an optional back button, the title,
+ * `headerActions`, and the close button. A string `header` renders an `<h2>`
+ * that names the dialog; for a node, pass `ariaLabel`.
+ *
+ * @example
+ * ```tsx
+ * <SideDrawer open={isOpen} header="Publish" onClose={() => setIsOpen(false)}>
+ *   <PublishForm />
+ * </SideDrawer>
+ * ```
+ *
+ * @param open - Whether the drawer is open
+ * @param onClose - Called when the drawer asks to close
+ * @param [header] - Header title; a string also names the dialog
+ * @param [ariaLabel] - Accessible name when `header` is not a string
+ * @param [headerActions] - Controls between the title and the close button
+ * @param [onBack] - Shows a back button at the start of the header
+ * @param [backAriaLabel='Back'] - Accessible name of the back button
+ * @param [backDisabled=false] - Whether the back button is disabled
+ * @param [closeAriaLabel='Close'] - Accessible name of the close button
+ * @param [closeDisabled=false] - Whether the close button is disabled
+ * @param [hideClose=false] - Whether the close button is left out
+ * @param [closeOnOutsideClick=true] - Whether a press on the backdrop closes the drawer
+ * @param [children] - Content of the drawer
+ * @param [className] - Additional CSS classes for the drawer panel
+ * @param [overlayClassName] - Additional CSS classes for the backdrop
+ * @param [headerClassName] - Additional CSS classes for the header row
+ * @param [bodyClassName] - Additional CSS classes for the scrolling body
+ * @param [titleClassName] - Type-scale class for a string title
+ * @param [portalId] - Id of the element to portal into
+ */
+export declare const SideDrawer: FC<SideDrawerProps>;

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

@@ -41,6 +41,10 @@ export declare const DIAL_KIT_CLASS: {
      * `overlayClassName`.
      */
     readonly popup: "dial-kit-popup";
+    /** The `role="dialog"` panel of a `BottomSheet`. */
+    readonly bottomSheet: "dial-kit-bottom-sheet";
+    /** The `role="dialog"` panel of a `SideDrawer`, open or closed. */
+    readonly sideDrawer: "dial-kit-side-drawer";
     /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */
     readonly confirmationPopup: "dial-kit-confirmation-popup";
     /** The root of an `Accordion`. */
@@ -121,6 +125,10 @@ export declare const DIAL_KIT_CLASS: {
      * shared badge a `FileIcon` draws over its glyph.
      */
     readonly sharedEntityIndicator: "dial-kit-shared-entity-indicator";
+    /** The root of a `Badge`: the label box, with its icon when it has one. */
+    readonly badge: "dial-kit-badge";
+    /** The root of an `Avatar`: the image, or the initials box that replaces it. */
+    readonly avatar: "dial-kit-avatar";
     /** The row of a `Switch`: the control and its label. */
     readonly switch: "dial-kit-switch";
     /** The row of a `Checkbox`: the box and its label. */

package/dist/src/index.d.ts

@@ -240,6 +240,17 @@ export { FolderName } from './components/New/FolderName/FolderName';
 export type { FolderNameProps } from './components/New/FolderName/FolderName';
 export { SharedEntityIndicator } from './components/New/SharedEntityIndicator/SharedEntityIndicator';
 export type { SharedEntityIndicatorProps } from './components/New/SharedEntityIndicator/SharedEntityIndicator';
+export { BottomSheet } from './components/New/BottomSheet/BottomSheet';
+export type { BottomSheetProps } from './components/New/BottomSheet/BottomSheet';
+export { Badge } from './components/New/Badge/Badge';
+export type { BadgeProps } from './components/New/Badge/Badge';
+export { BadgeColor, BadgeVariant } from './types/badge';
+export { Avatar } from './components/New/Avatar/Avatar';
+export type { AvatarProps } from './components/New/Avatar/Avatar';
+export { AvatarShape } from './types/avatar';
+export { extractInitials } from './utils/avatar';
+export { SideDrawer } from './components/New/SideDrawer/SideDrawer';
+export type { SideDrawerProps } from './components/New/SideDrawer/SideDrawer';
 export { Tag } from './components/New/Tag/Tag';
 export type { TagProps } from './components/New/Tag/Tag';
 export { TagAppearance } from './types/tag';

package/dist/src/types/avatar.d.ts

@@ -0,0 +1,7 @@
+/** The outline an `Avatar` is clipped to. */
+export declare enum AvatarShape {
+    /** A circle — the avatar of a person. */
+    Circle = "circle",
+    /** A rounded square — the avatar of an application, model or other entity. */
+    Square = "square"
+}

package/dist/src/types/badge.d.ts

@@ -0,0 +1,16 @@
+/** How a `Badge` is drawn. */
+export declare enum BadgeVariant {
+    /** A neutral label with a border on the sunken layer, for topics and plain categories. */
+    Outlined = "outlined",
+    /** A pill filled with one of the visual colours, for a label that is told apart by colour. */
+    Filled = "filled"
+}
+/** The visual colour of a `BadgeVariant.Filled` badge. */
+export declare enum BadgeColor {
+    Blue = "blue",
+    Green = "green",
+    Violet = "violet",
+    Indigo = "indigo",
+    Brown = "brown",
+    Red = "red"
+}

package/dist/src/utils/__tests__/avatar.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/avatar.d.ts

@@ -0,0 +1,12 @@
+/** A background and text colour pair for an initials avatar, as Tailwind classes. */
+export interface AvatarColorClasses {
+    /** Background class, bound to a `--bg-visual-*` token. */
+    background: string;
+    /** Text class, bound to the matching `--text-visual-*` token. */
+    foreground: string;
+}
+export declare const AVATAR_PALETTE: readonly AvatarColorClasses[];
+/** Returns the palette entry for a name; the same name always gets the same colours. */
+export declare const pickAvatarColor: (name: string) => AvatarColorClasses;
+/** Returns 1–2 uppercase initials derived from a display name, or `'?'` when it has no letters. */
+export declare const extractInitials: (name: string) => string;

package/dist/types/avatar.js

@@ -0,0 +1,4 @@
+var e = /* @__PURE__ */ ((r) => (r.Circle = "circle", r.Square = "square", r))(e || {});
+export {
+  e as AvatarShape
+};

package/dist/types/badge.js

@@ -0,0 +1,5 @@
+var n = /* @__PURE__ */ ((e) => (e.Outlined = "outlined", e.Filled = "filled", e))(n || {}), i = /* @__PURE__ */ ((e) => (e.Blue = "blue", e.Green = "green", e.Violet = "violet", e.Indigo = "indigo", e.Brown = "brown", e.Red = "red", e))(i || {});
+export {
+  i as BadgeColor,
+  n as BadgeVariant
+};