@epam/ai-dial-ui-kit 0.5.0-rc.11 → 0.5.0-rc.111

package/dist/src/components/ResizableContainer/ConditionalResizableContainer.d.ts

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { DialResizableContainerProps } from './ResizableContainer';
+export interface DialConditionalResizableContainerProps extends DialResizableContainerProps {
+    enabled?: boolean;
+}
+/**
+ * DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.
+ *
+ * This component renders its children inside a resizable container only when `enabled` is true.
+ * When `enabled` is false, children are rendered directly without any resizable behavior.
+ *
+ * All other props are the same as `DialResizableContainer`. See the documentation for
+ * `DialResizableContainer` for full details on usage, controlled/uncontrolled modes, sides, and callbacks.
+ *
+ * @example
+ * ```tsx
+ * <DialConditionalResizableContainer
+ *   enabled={!isCollapsed}
+ *   defaultWidth={260}
+ *   minWidth={180}
+ *   maxWidth={520}
+ *   onResize={(w) => console.log('Current width:', w)}
+ *   onResizeStop={(w) => setSidebarWidth(w)}
+ * >
+ *   <Sidebar />
+ * </DialConditionalResizableContainer>
+ * ```
+ *
+ * @param enabled - Whether resizing is enabled. When false, children are rendered directly.
+ * @param children - Content to render inside the container.
+ * @see DialResizableContainer
+ */
+export declare const DialConditionalResizableContainer: FC<DialConditionalResizableContainerProps>;

package/dist/src/components/ResizableContainer/ResizableContainer.d.ts

@@ -0,0 +1,69 @@
+import { ResizableContainerSide } from '../../types/resizable-container';
+import { FC, ReactNode } from 'react';
+export interface DialResizableContainerProps {
+    children: ReactNode;
+    minWidth: number;
+    maxWidth: number;
+    width?: number;
+    defaultWidth: number;
+    onResizeStop?: (width: number) => void;
+    onResize?: (width: number) => void;
+    side?: ResizableContainerSide;
+    resizeHandlerClassName?: string;
+    resizeHandler?: ReactNode;
+}
+/**
+ * DialResizableContainer — A reusable resizable container
+ * supporting both **controlled** and **uncontrolled** width modes.
+ *
+ * Controlled Mode
+ *
+ * Provide `width` and optionally `onResizeStop`:
+ * ```tsx
+ * <DialResizableContainer
+ *   width={sidebarWidth}
+ *   onResizeStop={(w) => setSidebarWidth(w)}
+ *   minWidth={180}
+ *   maxWidth={520}
+ * >
+ *   <Sidebar />
+ * </DialResizableContainer>
+ * ```
+ *
+ * Uncontrolled Mode
+ *
+ * Omit `width` entirely — the component manages its own width:
+ * ```tsx
+ * <DialResizableContainer
+ *   defaultWidth={260}
+ *   minWidth={180}
+ *   maxWidth={520}
+ * >
+ *   <Sidebar />
+ * </DialResizableContainer>
+ * ```
+ *
+ * Features:
+ * - Resize from left or right
+ * - Fully supports controlled & uncontrolled sizing
+ * - Custom resize handler (icon or any ReactNode)
+ * - Callback when resize stops (optional)
+ * - Smooth hover/drag visibility transitions
+ *
+ * @param [children] - Content placed inside the container.
+ * @param [minWidth] - Minimum allowed width (px).
+ * @param [maxWidth] - Maximum allowed width (px).
+ * @param [width] - Controlled width. If omitted → uncontrolled mode.
+ * @param [defaultWidth] - Initial width in uncontrolled mode.
+ * @param [onResizeStop] - Optional callback fired when resize ends.
+ * @param [onResize] - Optional callback fired continuously during resizing with current width.
+ * @param [side=ResizableContainerSide.Right] - Resize handle side.
+ * @param [resizeHandlerClassName] - Optional additional CSS classes.
+ * @param [resizeHandler] - Optional custom handler element.
+ *
+ * @remarks
+ * - In uncontrolled mode, width is stored internally.
+ * - `onResizeStop` is optional in both modes.
+ * - Controlled mode always uses the value from `width`.
+ */
+export declare const DialResizableContainer: FC<DialResizableContainerProps>;

package/dist/src/components/ResizableContainer/components/ResizeHandle.d.ts

@@ -0,0 +1,10 @@
+import { ResizableContainerSide } from '../../../types/resizable-container';
+import { FC, ReactNode } from 'react';
+interface ResizeHandleProps {
+    side: ResizableContainerSide;
+    isResizing: boolean;
+    customHandler?: ReactNode;
+    handlerClassName?: string;
+}
+export declare const ResizeHandle: FC<ResizeHandleProps>;
+export {};

package/dist/src/components/ResizableContainer/components/ResizeIcon.d.ts

@@ -0,0 +1,8 @@
+import { ResizableContainerSide } from '../../../types/resizable-container';
+import { FC } from 'react';
+interface ResizeIconProps {
+    side: ResizableContainerSide;
+    className: string;
+}
+export declare const ResizeIcon: FC<ResizeIconProps>;
+export {};

package/dist/src/components/Search/Search.d.ts

@@ -7,9 +7,10 @@ export interface DialSearchProps {
     disabled?: boolean;
     readonly?: boolean;
     invalid?: boolean;
-    cssClass?: string;
-    containerCssClass?: string;
+    className?: string;
+    containerClassName?: string;
     onChange?: (value: string) => void;
+    onBlur?: () => void;
     size?: SearchSize;
     allowClear?: boolean;
 }
@@ -25,6 +26,7 @@ export interface DialSearchProps {
  *   placeholder="Search"
  *   size={SearchSize.Small}
  *   onChange={(value) => setQuery(value)}
+ *   onBlur={() => handleBlur()}
  *   disabled={false}
  * />
  * ```
@@ -35,9 +37,10 @@ export interface DialSearchProps {
  * @param [disabled=false] - Whether the input is disabled
  * @param [readonly=false] - Whether the input is read-only (non-editable)
  * @param [invalid=false] - Whether the input should be styled as invalid
- * @param [cssClass] - Additional CSS classes applied to the input element
- * @param [containerCssClass] - Additional CSS classes applied to the container
+ * @param [className] - Additional CSS classes applied to the input element
+ * @param [containerClassName] - Additional CSS classes applied to the container
  * @param [onChange] - Callback fired when the input value changes
+ * @param [onBlur] - Callback fired when the input loses focus
  * @param [size=SearchSize.Base] - The size of the search input. Uses the {@link SearchSize} enum.
  * @param [allowClear=true] - Whether to show a clear button when there is a value
  */

package/dist/src/components/Search/constants.d.ts

@@ -1,13 +1,13 @@
 export declare const SIZE_CONFIG: {
     small: {
-        textClass: string;
-        containerClass: string;
+        textClassName: string;
+        containerClassName: string;
         iconSize: number;
         iconStroke: number;
     };
     base: {
-        textClass: string;
-        containerClass: string;
+        textClassName: string;
+        containerClassName: string;
         iconSize: number;
         iconStroke: number;
     };

package/dist/src/components/Select/Select.d.ts

@@ -1,12 +1,14 @@
-import { FC, ReactNode, MouseEvent } from 'react';
+import { FC, ReactNode, MouseEvent, Ref } from 'react';
 import { SelectOption } from '../../models/select';
 import { SelectSize, SelectVariant } from '../../types/select';
 export interface DialSelectProps {
     options: SelectOption[];
     multiple?: boolean;
+    elementId?: string;
     size?: SelectSize;
     variant?: SelectVariant;
     value?: string | string[];
+    customSelectedValue?: string;
     prefix?: string;
     defaultValue?: string | string[];
     placeholder?: string;
@@ -18,10 +20,11 @@ export interface DialSelectProps {
     emptyStateDescription?: string;
     emptyStateIcon?: ReactNode;
     disabled?: boolean;
-    cssClass?: string;
+    className?: string;
     closable?: boolean;
     header?: ReactNode | (() => ReactNode);
     footer?: ReactNode | (() => ReactNode);
+    dismissRef?: Ref<unknown>;
     onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
     onChange?: (next: string | string[]) => void;
     inlineSearch?: boolean;
@@ -51,10 +54,12 @@ export interface DialSelectProps {
  * ```
  *
  * @param options - Array of options to select from.
+ * @param [elementId] - The id attribute for the select element.
  * @param [multiple] - Whether multiple selections are allowed.
  * @param [size=SelectSize.Md] - Size of the control.
  * @param [variant=SelectVariant.Primary] - Visual variant.
  * @param [value] - Controlled selected value(s).
+ * @param [customSelectedValue] - Custom string to render as the selected value in single mode.
  * @param [prefix] - Prefix for selected value(s).
  * @param [defaultValue] - Uncontrolled initial selected value(s).
  * @param [placeholder="Select..."] - Placeholder text when no selection is made.
@@ -66,7 +71,7 @@ export interface DialSelectProps {
  * @param [emptyStateDescription] - Description text when there are no options.
  * @param [emptyStateIcon] - Icon to display when there are no options.
  * @param [disabled=false] - Disable the control.
- * @param [cssClass] - Additional CSS classes for the trigger.
+ * @param [className] - Additional CSS classes for the trigger.
  * @param [closable=false] - Show a close button in the dropdown header.
  * @param [header] - Custom node/function rendered above the options.
  * @param [footer] - Custom node/function rendered below the options.
@@ -74,5 +79,6 @@ export interface DialSelectProps {
  * @param [onChange] - Called when the selection changes.
  * @param [inlineSearch=false] - Render a plain input inside trigger (single mode only).
  * @param [onFooterClick] - Called when the footer element is clicked. When provided, automatically closes the dropdown.
+ * @param [dismissRef] - Ref object to expose a `dismiss` method to programmatically close the select.
  */
 export declare const DialSelect: FC<DialSelectProps>;

package/dist/src/components/Select/constants.d.ts

@@ -1,7 +1,8 @@
-export declare const selectTriggerBaseClasses = "dial-input flex w-full items-center justify-between gap-2 dial-small";
-export declare const selectOverlayBaseClasses = "w-full rounded";
-export declare const selectOptionBaseClasses = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
-export declare const selectOptionSelectedClasses = "bg-accent-primary-alpha";
-export declare const selectOptionSingleSelectedClasses = "bg-accent-primary-alpha border-l border-accent-primary border-1";
-export declare const selectOptionDisabledClasses = "opacity-75";
+export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small";
+export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
+export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
+export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
+export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
+export declare const selectOptionDisabledClassName = "opacity-75";
+export declare const dropdownMenuMaxHeight = 352;
 export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;

package/dist/src/components/SelectField/SelectField.d.ts

@@ -2,9 +2,9 @@ import { FC } from 'react';
 import { DialFormItemProps } from '../FormItem/FormItem';
 import { DialSelectProps } from '../Select/Select';
 import { DialFieldLabelProps } from '../Field/Field';
-export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
-    selectCssClass?: string;
-    containerCssClass?: string;
+export interface DialSelectFieldProps extends Omit<DialSelectProps, 'className' | 'elementId'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
+    selectClassName?: string;
+    containerClassName?: string;
 }
 /**
  * A Select field wrapper that composes `DialFormItem` and `DialSelect`.
@@ -26,12 +26,12 @@ export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass'>,
  * />
  *
  * @params - Component properties extending:
- * - {@link DialSelectProps} for select options and props, except for cssClass
+ * - {@link DialSelectProps} for select options and props, except for className
  * - {@link DialFormItemProps} for form item props, except for htmlFor
  * - {@link DialFieldLabelProps} for label props, except for label, children, value
  *
- * @param selectCssClass CSS class for the select element
- * @param containerCssClass CSS class for the form item container
+ * @param selectClassName CSS class for the select element
+ * @param containerClassName CSS class for the form item container
  * @param emptyStateTitle Title to show when there are no options
  * @param restSelectProps All other DialSelect props
  * @param restFormItemProps All other DialFormItem props

package/dist/src/components/SharedEntityIndicator/SharedEntityIndicator.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 export interface DialSharedEntityIndicatorProps {
-    label?: string;
+    label?: ReactNode;
     size?: number;
-    cssClass?: string;
+    className?: string;
     stroke?: number;
 }
 /**
@@ -18,7 +18,7 @@ export interface DialSharedEntityIndicatorProps {
  *
  * @param [label="Shared entity"] - Accessible label for assistive tech
  * @param [size=10] - Pixel size for the icon
- * @param [cssClass] - Additional Tailwind classes appended to the container
+ * @param [className] - Additional Tailwind classes appended to the container
  * @param [stroke=2] - Stroke width for the icon
  *
  */

package/dist/src/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,77 @@
+import { FC, HTMLAttributes } from 'react';
+import { DialSkeletonVariant, DialSkeletonAvatarSize, DialSkeletonAvatarShape } from '../../types/skeleton';
+export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    paragraph?: boolean | {
+        rows?: number;
+        width?: string | string[];
+    };
+    avatar?: boolean | {
+        size?: number | DialSkeletonAvatarSize;
+        shape?: DialSkeletonAvatarShape;
+    };
+    showTitle?: boolean | {
+        width?: string;
+    };
+    loading?: boolean;
+    children?: React.ReactNode;
+    variant?: DialSkeletonVariant;
+    width?: string | number;
+    height?: string | number;
+}
+/**
+ * DialSkeleton
+ *
+ * A placeholder component to show while content is loading.
+ * Provides various skeleton shapes and configurations.
+ *
+ * @example
+ * ```tsx
+ * // Simple skeleton
+ * <DialSkeleton />
+ *
+ * // Text skeleton with custom size
+ * <DialSkeleton variant={DialSkeletonVariant.Text} width="200px" height="20px" />
+ *
+ * // Circular avatar skeleton
+ * <DialSkeleton variant={DialSkeletonVariant.Circular} width={40} height={40} />
+ *
+ * // Complex skeleton with avatar, showTitle and paragraph
+ * <DialSkeleton
+ *   avatar
+ *   showTitle
+ *   paragraph={{ rows: 3 }}
+ *   active
+ * />
+ *
+ * // Conditional loading
+ * <DialSkeleton loading={isLoading}>
+ *   <div>Your content here</div>
+ * </DialSkeleton>
+ *
+ * // Custom paragraph widths
+ * <DialSkeleton
+ *   paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }}
+ * />
+ *
+ * // Avatar with size and shape
+ * <DialSkeleton
+ *   avatar={{
+ *     size: DialSkeletonAvatarSize.Large,
+ *     shape: DialSkeletonAvatarShape.Square
+ *   }}
+ * />
+ * ```
+ *
+ * @param [active=true] - Whether to show the loading animation
+ * @param [paragraph=true] - Show paragraph placeholder or configure its appearance
+ * @param [avatar=false] - Show avatar placeholder or configure its appearance
+ * @param [showTitle=true] - Show title placeholder or configure its appearance
+ * @param [loading=true] - Display the skeleton when true
+ * @param [children] - Content to be displayed when loading is false
+ * @param [variant=DialSkeletonVariant.Default] - Skeleton variant
+ * @param [width] - Width of the skeleton
+ * @param [height] - Height of the skeleton
+ * @param [className] - Additional CSS classes
+ */
+export declare const DialSkeleton: FC<DialSkeletonProps>;

package/dist/src/components/Skeleton/utils.d.ts

@@ -0,0 +1,2 @@
+import { DialSkeletonAvatarSize } from '../../types/skeleton';
+export declare const getAvatarSize: (size?: number | DialSkeletonAvatarSize) => number;

package/dist/src/components/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 export interface DialSwitchProps {
-    title?: string;
+    title?: ReactNode;
     switchId: string;
     isOn?: boolean;
     disabled?: boolean;

package/dist/src/components/Tab/Tab.d.ts

@@ -1,11 +1,11 @@
+import { ButtonHTMLAttributes, FC } from 'react';
 import { TabModel } from '../../models/tab';
-import { FC } from 'react';
-export interface DialTabProps {
+type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children' | 'type' | 'role' | 'disabled'>;
+export interface DialTabProps extends NativeButtonProps {
     tab: TabModel;
     active: boolean;
     invalid?: boolean;
     horizontal?: boolean;
-    cssClass?: string;
     onClick: (id: string) => void;
 }
 /**
@@ -26,7 +26,7 @@ export interface DialTabProps {
  * @param tab - The tab model containing its `id`, `name`, [`disabled`], [`invalid`].
  * @param active - Whether the tab is currently active.
  * @param [horizontal=false] - Whether the tab is displayed in horizontal orientation.
- * @param [cssClass] - Additional CSS classes applied to the tab element.
  * @param onClick - Callback fired when the tab is clicked. Receives the tab’s `id`.
  */
 export declare const DialTab: FC<DialTabProps>;
+export {};

package/dist/src/components/Tabs/Tabs.d.ts

@@ -1,14 +1,14 @@
 import { FC } from 'react';
 import { TabModel } from '../../models/tab';
-import { SmallScreenThreshold, TabOrientation } from '../../types/tab';
+import { ScreenResolution, TabOrientation } from '../../types/tab';
 export interface DialTabsProps {
     tabs: TabModel[];
     activeTab: string;
     onClick: (id: string) => void;
     orientation?: TabOrientation;
-    smallScreenThreshold?: SmallScreenThreshold;
-    smallScreenContainerCssClass?: string;
-    smallScreenDropdownItemCssClass?: string;
+    screenThreshold?: ScreenResolution;
+    smallScreenContainerClassName?: string;
+    smallScreenDropdownItemClassName?: string;
 }
 /**
  * A responsive and overflow-aware tabs component that automatically adapts its layout
@@ -43,17 +43,17 @@ export interface DialTabsProps {
  * @param activeTab - The identifier of the currently active tab.
  * @param onClick - Callback fired when a tab is selected. Receives the tab's `id` as an argument.
  * @param [orientation=TabOrientation.Horizontal] - Layout direction of the tabs. Uses the {@link TabOrientation} enum.
- * @param [smallScreenThreshold=SmallScreenThreshold.Tablet] - Defines the screen size threshold
- *   below which tabs collapse into a dropdown. Uses the {@link SmallScreenThreshold} enum.
+ * @param [screenThreshold=ScreenResolution.Tablet] - Defines the screen size threshold
+ *   below which tabs collapse into a dropdown. Uses the {@link ScreenRelosution} enum.
  *   When set to `Tablet`, both mobile and tablet screens will trigger dropdown mode.
- * @param [smallScreenContainerCssClass] - Optional CSS class applied to the dropdown container
+ * @param [smallScreenContainerClassName] - Optional CSS class applied to the dropdown container
  *   in small-screen (collapsed) mode.
- * @param [smallScreenDropdownItemCssClass] - Optional CSS class applied to individual dropdown
+ * @param [smallScreenDropdownItemClassName] - Optional CSS class applied to individual dropdown
  *   items in small-screen mode.
  *
  * @remarks
  * - Automatically detects horizontal overflow via `ResizeObserver` and shows a dropdown when needed.
  * - Smoothly scrolls to keep the active tab visible when navigating.
- * - Switches layout responsively based on `smallScreenThreshold`.
+ * - Switches layout responsively based on `screenThreshold`.
  */
 export declare const DialTabs: FC<DialTabsProps>;

package/dist/src/components/Tag/Tag.d.ts

@@ -2,7 +2,7 @@ import { TagVariant } from '../../types/tag';
 import { FC, MouseEvent, ReactNode } from 'react';
 export interface DialTagProps {
     tag: string;
-    cssClass?: string;
+    className?: string;
     remove?: (event: MouseEvent<HTMLButtonElement>) => void;
     variant?: TagVariant;
     iconBefore?: ReactNode;
@@ -22,7 +22,7 @@ export interface DialTagProps {
  * ```
  *
  * @param tag - The text label displayed inside the tag.
- * @param [cssClass] - Optional additional CSS classes applied to the tag container.
+ * @param [className] - Optional additional CSS classes applied to the tag container.
  * @param [remove] - Optional callback invoked when the remove button is clicked.
  *                   If not provided, the remove button will not be rendered.
  * @param [variant=TagVariant.Default] - Visual style of the tag. Uses the {@link TagVariant} enum.

package/dist/src/components/TextAreaField/TextAreaField.d.ts

@@ -33,9 +33,9 @@ export interface DialTextAreaFieldProps extends DialInputFieldBaseProps {
  * @param [iconBefore] - Icon or element to display before the input
  * @param [iconAfter] - Icon or element to display after the input
  * @param [textBeforeInput] - Text to display before the input
- * @param [elementCssClass] - Additional CSS classes to apply to the textarea element
- * @param [containerCssClass] - Additional CSS classes to apply to the outer container
- * @param [elementContainerCssClass] - Additional CSS classes to apply to the textarea container
+ * @param [elementClassName] - Additional CSS classes to apply to the textarea element
+ * @param [containerClassName] - Additional CSS classes to apply to the outer container
+ * @param [elementContainerClassName] - Additional CSS classes to apply to the textarea container
  * @param [disableTooltip] - Whether to disable the tooltip that shows the full value on hover
  */
 export declare const DialTextAreaField: FC<DialTextAreaFieldProps>;

package/dist/src/components/Textarea/Textarea.d.ts

@@ -3,8 +3,8 @@ export interface DialTextareaProps {
     value?: string | number | null;
     placeholder?: string;
     textareaId: string;
-    cssClass?: string;
-    containerCssClass?: string;
+    className?: string;
+    containerClassName?: string;
     disabled?: boolean;
     invalid?: boolean;
     readonly?: boolean;
@@ -28,8 +28,8 @@ export interface DialTextareaProps {
  * @param [value] - The current value of the textarea
  * @param [onChange] - Callback function called when the textarea value changes
  * @param [placeholder] - Placeholder text displayed when textarea is empty
- * @param [cssClass=""] - Additional CSS classes to apply to the textarea element
- * @param [containerCssClass=""] - Additional CSS classes to apply to the container div
+ * @param [className=""] - Additional CSS classes to apply to the textarea element
+ * @param [containerClassName=""] - Additional CSS classes to apply to the container div
  * @param [disabled=false] - Whether the textarea is disabled
  * @param [readonly=false] - Whether the textarea is read-only (no user input allowed)
  * @param [invalid=false] - Whether the textarea has validation errors (applies error styling)

package/dist/src/hooks/use-width-breakpoint.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A React hook that tracks the width of a DOM element and determines if it is smaller than a specified breakpoint.
+ *
+ * This hook returns a `ref` to attach to the element you want to observe and a boolean `isBelowBreakpoint`
+ * that becomes `true` when the element's width is less than the given `breakpoint`, and `false` otherwise.
+ * The value updates automatically when the element is resized.
+ *
+ * @param {number} breakpoint - The width in pixels used as the threshold. `isBelowBreakpoint` is true when the element's width is less than this value.
+ * @returns {{ containerRef: React.RefObject<HTMLElement>, isBelowBreakpoint: boolean }} An object containing the ref to attach to your element and the boolean indicating if it is smaller than the breakpoint.
+ *
+ * @example
+ * const { containerRef, isBelowBreakpoint } = useWidthBreakpoint(600);
+ *
+ * return (
+ *   <div ref={containerRef}>
+ *     {isBelowBreakpoint ? 'Compact view' : 'Full view'}
+ *   </div>
+ * );
+ */
+export declare function useWidthBreakpoint(breakpoint: number): {
+    containerRef: import('react').RefObject<HTMLElement | null>;
+    isBelowBreakpoint: boolean;
+};

package/dist/src/index.d.ts

@@ -18,7 +18,10 @@ export { DialFormItem } from './components/FormItem/FormItem';
 export { DialSharedEntityIndicator } from './components/SharedEntityIndicator/SharedEntityIndicator';
 export { DialFileName } from './components/FileName/FileName';
 export { DialFolderName } from './components/FolderName/FolderName';
-export { DialDateCellRenderer } from './components/Grid/renderers/DateCellRenderer';
+export { DialResizableContainer } from './components/ResizableContainer/ResizableContainer';
+export { DialConditionalResizableContainer } from './components/ResizableContainer/ConditionalResizableContainer';
+export { DialSkeleton } from './components/Skeleton/Skeleton';
+export { DialGrid } from './components/Grid/Grid';
 export { DialTabs } from './components/Tabs/Tabs';
 export { DialBreadcrumb } from './components/Breadcrumb/Breadcrumb';
 export { DialBreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem';
@@ -62,9 +65,11 @@ export { TabOrientation } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';
 export { SelectSize, SelectVariant } from './types/select';
-export { DialFileManagerTabs, DialFileManagerActions, type DialCopiedItem, type DialDeletedItem, } from './types/file-manager';
+export { DialFileManagerTabs, DialFileManagerActions, FileManagerColumnKey, } from './types/file-manager';
 export { FlexibleActionsDirection } from './types/flexible-actions';
 export { DialItemType } from './types/item';
+export { ResizableContainerSide } from './types/resizable-container';
+export { DialSkeletonVariant, DialSkeletonAvatarSize, DialSkeletonAvatarShape, } from './types/skeleton';
 export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
 export { useEditableItem } from './hooks/use-editable-item';
 export { FileManagerProvider } from './components/FileManager/FileManagerProvider';
@@ -78,4 +83,5 @@ export type { DropdownItem } from './models/dropdown';
 export type { DialModifiedEntity } from './models/base-entity';
 export type { DialFile } from './models/file';
 export { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
+export { type DialCopiedItem, type DialDeletedItem, type DialUploadFileItem, type DialFileManagerActionsRef, type DialFileAcceptType, } from './models/file-manager';
 export { mergeClasses } from './utils/merge-classes';

package/dist/src/models/breadcrumb.d.ts

@@ -4,6 +4,6 @@ export interface DialBreadcrumbPathItem {
     href?: string;
     onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
     disabled?: boolean;
-    cssClass?: string;
+    className?: string;
     iconBefore?: ReactNode;
 }

package/dist/src/models/dropdown.d.ts

@@ -7,6 +7,7 @@ export interface DropdownItem {
     disabled?: boolean;
     danger?: boolean;
     type?: DropdownItemType;
+    className?: string;
     onClick?: (info: {
         key: string;
         domEvent: MouseEvent;

package/dist/src/models/file-manager.d.ts

@@ -0,0 +1,19 @@
+import { DialFileNodeType } from './file';
+export interface DialCopiedItem {
+    sourceUrl: string;
+    destinationUrl: string;
+    overwrite?: boolean;
+    nodeType: DialFileNodeType;
+}
+export interface DialDeletedItem {
+    sourceUrl: string;
+    nodeType: DialFileNodeType;
+}
+export interface DialUploadFileItem {
+    fileContent: File;
+    name: string;
+}
+export interface DialFileManagerActionsRef {
+    createFolder: () => void;
+}
+export type DialFileAcceptType = `${string}/${string}` | `.${string}`;

package/dist/src/models/file.d.ts

@@ -11,6 +11,7 @@ export interface DialFile extends DialModifiedEntity {
     path: string;
     name: string;
     folderId: string;
+    owner?: string;
     author?: string;
     nextToken?: string;
     extension?: string;
@@ -34,5 +35,5 @@ export declare enum DialFilePermission {
     SHARE = "SHARE"
 }
 export interface DialRootFolder extends DialFile {
-    breadcrumbLabel: string;
+    label: string;
 }

package/dist/src/models/tab.d.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 export interface TabModel {
     id: string;
-    name: string;
+    label: ReactNode;
     invalid?: boolean;
     disabled?: boolean;
 }

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

@@ -9,5 +9,6 @@ export declare enum DropdownTrigger {
 }
 export declare enum DropdownItemType {
     Item = "item",
-    Divider = "divider"
+    Divider = "divider",
+    PlainText = "plainText"
 }