npm - @epam/ai-dial-ui-kit - Versions diffs - 0.13.0-dev.51 → 0.13.0-dev.57 - Mend

@epam/ai-dial-ui-kit 0.13.0-dev.51 → 0.13.0-dev.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/src/components/New/Button/Button.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from 'react';
+import { ButtonHTMLAttributes, DetailedHTMLProps, FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
 import { DialTooltipProps } from '../../Tooltip/Tooltip';
 import { ButtonAppearance, ButtonVariant } from '../../../types/button';
 import { ElementSize } from '../../../types/size';
@@ -12,6 +12,9 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
     iconBefore?: ReactNode;
     iconAfter?: ReactNode;
     tooltipProps?: TooltipProps;
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
+    rel?: string;
 }
 /**
  * A Button component with flexible icon and text positioning
@@ -50,6 +53,13 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
  * @param [textClassName] - Additional CSS classes to apply specifically to the button text
  * @param [iconAfter] - Icon or element to display after the button text
  * @param [iconBefore] - Icon or element to display before the button text
+ * @param [href] - Destination to navigate to. Renders an `<a>` instead of a
+ * `<button>`, so the control keeps the link role, middle-click, and
+ * "open in new tab". Pair it with `ButtonAppearance.Link` (or `LinkButton`)
+ * unless a button-shaped link is intended.
+ * @param [target] - Anchor target, only meaningful alongside `href`
+ * @param [rel] - Anchor `rel`. Defaults to `noopener noreferrer` when
+ * `target="_blank"`.
  */
 export declare const Button: FC<ButtonProps>;
 export {};

package/dist/src/components/New/Button/ButtonWrappers.d.ts CHANGED Viewed

@@ -52,6 +52,16 @@ export declare const DangerButton: FC<ButtonVariantProps>;
  * />
  * ```
  *
+ * Pass `href` to navigate: the control then renders a real `<a>`, so it keeps
+ * the link role, middle-click, and "open in new tab". Without `href` it stays a
+ * `<button>` and needs an `onClick`.
+ *
+ * @example
+ * ```tsx
+ * <LinkButton label="Read the docs" href="/docs" />
+ * <LinkButton label="Open dashboard" href="https://example.com" target="_blank" />
+ * ```
+ *
  * Inherits all properties from the `ButtonProps`
  */
 export declare const LinkButton: FC<ButtonAppearanceProps>;

package/dist/src/components/New/ButtonDropdown/ButtonDropdown.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import { FC } from 'react';
-import { DialButtonProps } from '../../Button/Button';
 import { DropdownItem } from '../../../models/dropdown';
-export interface ButtonDropdownProps extends Omit<DialButtonProps, 'iconAfter'> {
+import { ButtonProps } from '../Button/Button';
+export interface ButtonDropdownProps extends Omit<ButtonProps, 'iconAfter'> {
     items: DropdownItem[];
 }
 /**
- * A Button dropdown component based on DialDropdown component
+ * A Button dropdown component based on the Dropdown component
  * aliases: SplitButton|MenuButton
  *
  * @example
@@ -17,7 +17,7 @@ export interface ButtonDropdownProps extends Omit<DialButtonProps, 'iconAfter'>
  * />
  * ```
  *
- * Inherits all props from DialButton.
+ * Inherits all props from Button.
  * @param [items] - DropdownItems with actions
  */
 export declare const ButtonDropdown: FC<ButtonDropdownProps>;

package/dist/src/components/New/Calendar/constants.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import { CalendarMode } from '../../../types/calendar';
 export declare const DEFAULT_CALENDAR_LOCALE = "en-GB";
 export declare const calendarModeDefaultPlaceholder: Record<CalendarMode, string>;
-export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-0 px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-primary focus-within:border-accent-primary";
-export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-controls-disable text-controls-primary-disable hover:!border-transparent";
+export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-hover-alpha focus-within:border-focus-blue";
+export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-alpha hover:!border-transparent";
 export declare const calendarFieldInvalidClassName = "!border-error";
 export declare const calendarPopoverClassName = "z-[53] flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-3 py-4 shadow-md";
 export declare const calendarDayButtonBaseClassName = "flex size-8 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus-black";

package/dist/src/components/New/InlineSelect/InlineSelect.d.ts CHANGED Viewed

@@ -37,7 +37,7 @@ export interface InlineSelectProps {
     ariaLabel?: string;
 }
 /**
- * An inline select control combining `InlineSelectTrigger` with `DialDropdown`.
+ * An inline select control combining `InlineSelectTrigger` with `Dropdown`.
  *
  * @example
  * ```tsx

package/dist/src/components/New/Input/Button/constants.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const inputButtonClassName = "bg-~~layer~~-4 flex items-center justify-center enabled:text-secondary enabled:hover:text-~~accent~~-~~primary~~ enabled:active:bg-~~controls~~-accent-~~primary-~~alpha-active enabled:hover:bg-accent-~~primary~~-~~alpha~~ enabled:active:text-~~accent~~-~~primary~~";
1	+ export declare const inputButtonClassName = "bg-control-neutral-active flex items-center justify-center enabled:text-secondary enabled:hover:text-control-blue-hover enabled:active:bg-control-accent-alpha-active enabled:hover:bg-control-accent-alpha-hover enabled:active:text-control-blue-active";

package/dist/src/components/New/Input/Input.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 import { FC, InputHTMLAttributes, ReactNode, Ref } from 'react';
-import { DialLabelProps } from '../../Label/Label';
 import { ElementSize } from '../../../types/size';
+import { LabelProps } from '../Label/Label';
 import { InputButtonProps } from './Button/InputButton';
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
-    labelProps?: DialLabelProps;
+    labelProps?: LabelProps;
     inputButtonProps?: InputButtonProps;
     size?: ElementSize;
     invalid?: boolean;

package/dist/src/components/New/Popup/constants.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { PopupSize } from '../../../types/popup';
 export declare const popupOverlayBaseClassName = "z-[52] flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
 export declare const popupBaseClassName = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto";
 export declare const popupHeaderClassName = "flex flex-row items-center justify-between px-6 py-4";
-export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h2-text text-primary";
+export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary";
 /**
  * Max widths per size. Full width below the `md` breakpoint, where the popup
  * fills the screen.

package/dist/src/components/New/Select/constants.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 export declare const selectOverlayBaseClassName: string;
 export declare const selectOptionBaseClassName: string;
-export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
+export declare const selectOptionSelectedClassName = "bg-control-accent-alpha-hover";
 /**
  * Holds the option list to the width of the field.
  *

package/dist/src/components/New/Textarea/Textarea.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';
-import { DialLabelProps } from '../../Label/Label';
+import { LabelProps } from '../Label/Label';
 export interface TextareaProps extends DetailedHTMLProps<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>, HTMLTextAreaElement> {
-    labelProps?: DialLabelProps;
+    labelProps?: LabelProps;
     invalid?: boolean;
     containerClassName?: string;
     resize?: boolean;

package/dist/src/components/New/constants/overlay.d.ts CHANGED Viewed

@@ -18,7 +18,7 @@ export declare const overlaySubMenuClassName: string;
  */
 export declare const overlayItemClassName: string;
 /** Tint marking the row that is currently selected. */
-export declare const overlayItemSelectedClassName = "bg-accent-primary-alpha";
+export declare const overlayItemSelectedClassName = "bg-control-accent-alpha-hover";
 export declare const overlayItemDisabledClassName = "opacity-75";
 /** Distance between the trigger and its panel, and between nested panels. */
 export declare const overlayGap = 4;

package/package.json CHANGED Viewed

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