@kubit-ui-web/react-components 2.0.0-beta.7 → 2.0.0-beta.70

package/dist/types/components/accordion/types/accordion.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentSelected, ComponentsTypesComponents } from '../../../lib/types/cssGenerator/componentsTypes';
+type AccordionCssClasses = ComponentSelected<ComponentsTypesComponents['ACCORDION']>;
+/**
+ * Base interface for Accordion component
+ */
+export interface IAccordionStandAlone {
+    /** Content to be displayed when the accordion is expanded */
+    children: React.ReactNode;
+    /** Header content for the accordion */
+    header: React.ReactNode;
+    /** Handler to control clicking on the header, only available for Controlled version */
+    onHeaderClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Optional styles to apply to the component */
+    cssClasses?: AccordionCssClasses;
+    /** Custom test ID for testing */
+    dataTestId?: string;
+    /** Component type for the accordion container, defaults to 'div' */
+    component?: React.ElementType;
+    /** Component type for header, defaults to 'button' */
+    headerComponent?: React.ElementType;
+    expanded: boolean;
+}
+/**
+ * Interface for controlled Accordion component
+ */
+export interface IAccordionControlled<V = undefined extends string ? unknown : string> extends IAccordionStandAlone {
+    variant: V;
+    additionalClasses?: Partial<AccordionCssClasses>;
+    /** Whether the accordion is expanded or collapsed */
+    expanded: boolean;
+    /** Callback fired when the header is clicked */
+    onHeaderClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Unique ID for the content section, used for accessibility */
+    contentId?: string;
+}
+/**
+ * Interface for uncontrolled Accordion component
+ */
+export interface IAccordionUnControlled<V = undefined extends string ? unknown : string> extends Omit<IAccordionControlled<V>, 'expanded' | 'onHeaderClick' | 'contentId'> {
+    /** Default expanded state when component mounts */
+    defaultExpanded?: boolean;
+    /** Callback fired when accordion state changes */
+    onExpandCollapse?: (expanded: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export {};

package/dist/types/components/accordion/types/accordionTheme.d.ts

@@ -0,0 +1,18 @@
+import type { CssLibPropsType } from '../../../lib/types/cssGenerator/stylesTypes';
+/**
+ * Interface representing the styles for the container component.
+ */
+export interface AccordionStyleProps extends CssLibPropsType {
+    _header?: CssLibPropsType;
+    _headerButton?: CssLibPropsType;
+    _content?: CssLibPropsType;
+    _innerContent?: CssLibPropsType;
+}
+/**
+ * Type representing the styles for different variants of the container component.
+ *
+ * @template Variant - The type of the variant keys.
+ */
+export type AccordionVariantStyles<Variant extends string> = AccordionStyleProps & {
+    [key in Variant]: AccordionStyleProps;
+};

package/dist/types/components/accordion/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './accordion';
+export * from './accordionTheme';

package/dist/types/components/accordion/types/state.d.ts

@@ -0,0 +1,4 @@
+export declare const STATE: {
+    readonly COLLAPSED: "collapsed";
+    readonly EXPANDED: "expanded";
+};

package/dist/types/components/alert/alertControlled.d.ts

@@ -0,0 +1,17 @@
+import type { AlertProps } from './types/alert';
+/**
+ * Alert component for displaying notification messages.
+ *
+ * This component renders styled alerts.
+ * Useful for notifications, success/error messages, and informational banners.
+ * Always visible - no open/close functionality.
+ *
+ * @example
+ * ```tsx
+ * <Alert
+ *   variant="success"
+ *   content={{ content: "Your changes have been saved." }}
+ * />
+ * ```
+ */
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps<string> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/alert/alertStandAlone.d.ts

@@ -0,0 +1,17 @@
+import type { AlertStandAloneProps } from './types/alert';
+/**
+ * Standalone alert component for displaying notification messages.
+ *
+ * This component renders a simple alert box with content.
+ * It supports different visual states through variants and accessibility features.
+ * Always visible - no open/close functionality.
+ *
+ * @example
+ * ```tsx
+ * <AlertStandAlone
+ *   content={{ content: "Operation completed successfully" }}
+ *   variant="success"
+ * />
+ * ```
+ */
+export declare const AlertStandAlone: import("react").ForwardRefExoticComponent<AlertStandAloneProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/alert/index.d.ts

@@ -0,0 +1,3 @@
+export { Alert } from './alertControlled';
+export type { AlertStandAloneProps, AlertProps } from './types/alert';
+export type { AlertStyleProps, AlertVariantStyles } from './types/alertTheme';

package/dist/types/components/alert/types/alert.d.ts

@@ -0,0 +1,27 @@
+import type { AriaAttributes } from 'react';
+import type { CommonTextProps } from '../../../lib/types/commons/text';
+import type { ComponentSelected, ComponentsTypesComponents } from '../../../lib/types/cssGenerator/componentsTypes';
+import type { DataAttributes } from '../../../lib/types/dataAttributes/dataAttributes';
+type AlertCssClasses = ComponentSelected<ComponentsTypesComponents['ALERT']>;
+/**
+ * Interface for the standalone Alert component.
+ * A simplified component that displays alert messages. Always visible.
+ */
+export interface AlertStandAloneProps extends DataAttributes {
+    content: CommonTextProps;
+    role?: React.AriaRole;
+    id?: string;
+    ariaLive?: AriaAttributes['aria-live'];
+    cssClasses?: AlertCssClasses;
+}
+/**
+ * Interface for the Alert component.
+ * Extends the AlertStandAloneProps interface and adds a variant and additional CSS classes.
+ *
+ * @template Variant - The type of the variant for the Alert.
+ */
+export interface AlertProps<Variant = undefined extends string ? unknown : string> extends AlertStandAloneProps {
+    variant?: Variant;
+    additionalClasses?: Partial<AlertCssClasses>;
+}
+export {};

package/dist/types/components/alert/types/alertTheme.d.ts

@@ -0,0 +1,9 @@
+import type { CssLibPropsType } from '../../../lib/types/cssGenerator/stylesTypes';
+export interface AlertStyleProps extends CssLibPropsType {
+    _container?: CssLibPropsType;
+    _contentContainer?: CssLibPropsType;
+    _description?: CssLibPropsType;
+}
+export type AlertVariantStyles<Variant extends string> = AlertStyleProps & {
+    [key in Variant]: AlertStyleProps;
+};

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

@@ -0,0 +1,21 @@
+import type { AvatarProps } from './types/avatar';
+/**
+ * Avatar component for displaying a customizable user avatar.
+ *
+ * The `Avatar` component determines its content type (icon, initials, or image) based on the provided props.
+ * It supports custom sizes via a generic type parameter, and can be themed or extended as needed.
+ * Use this component to represent users or entities visually in your application.
+ *
+ * This component accepts a generic type parameter `<Size extends string | undefined>` to allow for custom size values,
+ * enabling flexible sizing and theming. For example:
+ *
+ * @example
+ * ```tsx
+ * <Avatar image="user.jpg" size="md" />
+ *
+ * // With a custom size type:
+ * type MySize = "xs" | "md" | "xl";
+ * <Avatar<MySize> initials="AB" size="xl" />
+ * ```
+ */
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps<string | undefined> & import("react").RefAttributes<HTMLButtonElement | HTMLDivElement>>;

package/dist/types/components/avatar/avatarStandAlone.d.ts

@@ -0,0 +1,14 @@
+import type { AvatarStandAloneProps } from './types/avatar';
+/**
+ * Standalone avatar component for displaying a user or entity avatar with flexible content.
+ *
+ * `AvatarStandAlone` supports rendering an icon, initials, or image as the avatar content.
+ * It can be rendered as a link, button, or div, and supports custom background colors, status dots, and accessibility features.
+ * Use this component when you need a low-level, highly customizable avatar element, or as the base for higher-level avatar components.
+ *
+ * @example
+ * ```tsx
+ * <AvatarStandAlone initials="AB" />
+ * ```
+ */
+export declare const AvatarStandAlone: import("react").ForwardRefExoticComponent<AvatarStandAloneProps & import("react").RefAttributes<HTMLButtonElement | HTMLDivElement>>;

package/dist/types/components/avatar/fragments/drawContent.d.ts

@@ -0,0 +1,6 @@
+import type { AvatarStandAloneProps } from '../types/avatar';
+type DrawContentProps = Pick<AvatarStandAloneProps, 'dot' | 'contentType' | 'cssClasses' | 'icon' | 'initials' | 'maxLengthInitials'> & {
+    customAttributes?: Record<string, string | boolean>;
+};
+export declare const DrawContent: ({ contentType, cssClasses, customAttributes, dot, icon, initials, maxLengthInitials, }: DrawContentProps) => JSX.Element;
+export {};

package/dist/types/components/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { Avatar } from './avatar';
+export type { AvatarLinkProps, AvatarStandAloneProps, AvatarProps, } from './types/avatar';
+export type { BackgroundColorAvatarStylesProps, AvatarStylesProps, AvatarSizeStyles, } from './types/avatarTheme';

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

@@ -0,0 +1,36 @@
+import type { GenericLinkProps, GenericLinkType } from '../../../lib/provider/genericComponentsProvider/types/genericComponentsProvider';
+import type { CommonIconProps } from '../../../lib/types/commons/icon';
+import type { CommonTextProps } from '../../../lib/types/commons/text';
+import type { ComponentSelected, ComponentsTypesComponents } from '../../../lib/types/cssGenerator/componentsTypes';
+import type { DataAttributes } from '../../../lib/types/dataAttributes/dataAttributes';
+import type { DotProps } from '../../dot/types/dot';
+import type { AvatarBackgroundColor, AvatarContentType } from './content';
+type AvatarCssClasses = ComponentSelected<ComponentsTypesComponents['AVATAR']>;
+export type AvatarLinkProps = Pick<GenericLinkProps, 'role' | 'target' | 'url' | 'onClick'>;
+type AvatarAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-hidden'>;
+/**
+ * Props for the standalone Avatar component.
+ * This component is self-contained and does not depend on external state.
+ */
+export interface AvatarStandAloneProps extends AvatarAriaAttributes, DataAttributes {
+    dot?: DotProps;
+    image?: string;
+    icon?: CommonIconProps;
+    initials?: CommonTextProps;
+    link?: AvatarLinkProps;
+    linkComponent: GenericLinkType;
+    contentType: AvatarContentType;
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLDivElement>;
+    backgroundColor?: AvatarBackgroundColor;
+    maxLengthInitials?: number;
+    cssClasses?: AvatarCssClasses;
+}
+/**
+ * Props for the Avatar component, which extends the standalone avatar with additional options.
+ * @template Size - Optional size type for the avatar.
+ */
+export interface AvatarProps<Size = string> extends Omit<AvatarStandAloneProps, 'contentType' | 'linkComponent'> {
+    size?: Size;
+    additionalClasses?: Partial<AvatarCssClasses>;
+}
+export {};

package/dist/types/components/avatar/types/avatarTheme.d.ts

@@ -0,0 +1,24 @@
+import type { CssLibPropsType } from '../../../lib/types/cssGenerator/stylesTypes';
+export interface BackgroundColorAvatarStylesProps {
+    ['color-default']?: {
+        backgroundColor?: string;
+        contentColor?: string;
+        borderColor?: string;
+    };
+    ['color-red']?: {
+        backgroundColor?: string;
+        contentColor?: string;
+        borderColor?: string;
+    };
+    ['color-white']?: {
+        backgroundColor?: string;
+        contentColor?: string;
+        borderColor?: string;
+    };
+}
+export interface AvatarStylesProps extends CssLibPropsType {
+    _initials?: CssLibPropsType;
+    _icon?: CssLibPropsType;
+    _dot?: CssLibPropsType;
+}
+export type AvatarSizeStyles<Size extends string> = AvatarStylesProps & Record<Size, AvatarStylesProps | undefined>;

package/dist/types/components/avatar/types/content.d.ts

@@ -0,0 +1,2 @@
+export type AvatarContentType = 'with-initials' | 'with-icon' | 'with-images';
+export type AvatarBackgroundColor = 'color-default' | 'color-red' | 'color-white';

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

@@ -0,0 +1,22 @@
+import type { BadgeProps } from './types/badge';
+/**
+ * Badge component for displaying a small status indicator, label, or notification count.
+ *
+ * The `Badge` component supports custom variants and sizes via generic type parameters, allowing for flexible theming and sizing.
+ * It can display a dot, handle click events, and manage its own active state for visual feedback.
+ * Use this component to highlight statuses, notifications, or contextual information in your UI.
+ *
+ * This component accepts generic type parameters `<Variant extends string | undefined, Size extends string | undefined>`
+ * to allow for custom variant and size values, enabling flexible theming and styling.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success" size="sm">New</Badge>
+ *
+ * // With custom types:
+ * type MyVariant = "success" | "warning";
+ * type MySize = "sm" | "lg";
+ * <Badge<MyVariant, MySize> variant="warning" size="lg">Alert</Badge>
+ * ```
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps<string | undefined, string | undefined> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/badge/badgeStandAlone.d.ts

@@ -0,0 +1,12 @@
+import type { BadgeStandAloneProps } from './types/badge';
+/**
+ * BadgeStandAlone is a reusable badge component that displays a label, optional icon, and a dot indicator.
+ * It is typically used to highlight notifications, statuses, or counts in a UI.
+ * The component is accessible, customizable via CSS classes, and supports forwarding refs for integration with parent components.
+ *
+ * @example
+ * <BadgeStandAlone label="New" active={true} hasDot={true} />
+ *
+ * This component does not accept generics.
+ */
+export declare const BadgeStandAlone: import("react").ForwardRefExoticComponent<BadgeStandAloneProps & import("react").RefAttributes<unknown>>;

package/dist/types/components/badge/index.d.ts

@@ -0,0 +1,3 @@
+export { Badge } from './badge';
+export type { BadgeStandAloneProps, BadgeProps } from './types/badge';
+export type { BadgeVariantStylesType, BadgeSizePropsType, BadgeStylesStatesStyles, BadgeStylesSizeType, BadgeStylesType, } from './types/badgeTheme';

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

@@ -0,0 +1,47 @@
+import type { CommonIconProps } from '../../../lib/types/commons/icon';
+import type { CommonTextProps } from '../../../lib/types/commons/text';
+import type { ComponentSelected, ComponentsTypesComponents } from '../../../lib/types/cssGenerator/componentsTypes';
+import type { DataAttributes } from '../../../lib/types/dataAttributes/dataAttributes';
+import type { DotProps } from '../../dot/types/dot';
+/**
+ * Type for CSS classes specific to the badge component.
+ */
+type BadgeCssClasses = ComponentSelected<ComponentsTypesComponents['BADGE']>;
+/**
+ * Type for ARIA attributes specific to the badge component.
+ */
+type BadgeAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-controls' | 'aria-expanded' | 'aria-hidden'>;
+/**
+ * Interface for the standalone badge component.
+ * Includes ARIA attributes, event handlers, and optional properties like dot, icon, and label.
+ */
+export interface BadgeStandAloneProps extends BadgeAriaAttributes, DataAttributes {
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onBadgeBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    dot?: DotProps;
+    hasDot?: boolean;
+    icon: CommonIconProps;
+    label?: CommonTextProps;
+    labelIcon?: CommonIconProps;
+    ariaLiveText?: string;
+    customDotTranslate?: string;
+    role?: React.AriaRole;
+    active?: boolean;
+    disabled?: boolean;
+    cssVariantClasses?: BadgeCssClasses;
+    cssSizeClasses?: BadgeCssClasses;
+}
+/**
+ * Interface for the badge component with a variant and size.
+ * Extends the BadgeStandAloneProps interface and adds variant and size properties.
+ *
+ * @template Variant - The type of the variant for the badge.
+ * @template Size - The type of the size for the badge.
+ */
+export interface BadgeProps<Variant = undefined extends string ? unknown : string, Size = undefined extends string ? unknown : string> extends Omit<BadgeStandAloneProps, 'styles' | 'sizeStyles' | 'iconStyles' | 'active'> {
+    variant?: Variant;
+    size?: Size;
+    additionalVariantClasses?: Partial<BadgeCssClasses>;
+    additionalSizeClasses?: Partial<BadgeCssClasses>;
+}
+export {};

package/dist/types/components/badge/types/badgeTheme.d.ts

@@ -0,0 +1,21 @@
+import type { CssLibPropsType } from '../../../lib/types/cssGenerator/stylesTypes';
+export interface BadgeVariantStylesType extends CssLibPropsType {
+    _button?: CssLibPropsType;
+    _dot?: CssLibPropsType;
+    _dotContainer?: CssLibPropsType;
+    _icon?: CssLibPropsType;
+    _labelContainer?: CssLibPropsType;
+    _label?: CssLibPropsType;
+    _labelIcon?: CssLibPropsType;
+}
+export interface BadgeSizePropsType extends CssLibPropsType {
+    _icon?: CssLibPropsType;
+    _label?: CssLibPropsType;
+}
+export type BadgeStylesStatesStyles<P extends string> = BadgeVariantStylesType & {
+    [key in P]?: BadgeVariantStylesType;
+};
+export type BadgeStylesSizeType<S extends string> = BadgeSizePropsType & {
+    [key in S]?: BadgeSizePropsType;
+};
+export type BadgeStylesType<P extends string, S extends string> = BadgeStylesStatesStyles<P> & BadgeStylesSizeType<S>;

package/dist/types/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,23 @@
+import type { BreadcrumbsProps } from './types/breadcrumbs';
+/**
+ * Breadcrumbs component for displaying navigation paths.
+ *
+ * This component renders a breadcrumb navigation bar, allowing users to understand
+ * and navigate the hierarchy of the current page. It is useful for improving
+ * navigation and user experience in multi-level applications.
+ *
+ * Accepts a generic type parameter `<Variant extends string>` to allow for custom
+ * variant values, enabling flexible theming and type safety for the `variant` prop.
+ *
+ * @example
+ * ```tsx
+ * <BreadCrumbs items={[{ label: "Home", href: "/" }, { label: "Section" }]} />
+ *
+ * // With a custom variant type:
+ * type MyVariant = "primary" | "secondary";
+ * <BreadCrumbs<MyVariant> variant="primary" items={[{ label: "Home" }]} />
+ * ```
+ *
+ * Internally, this component delegates rendering to {@link BreadcrumbsStandAlone}.
+ */
+export declare const BreadCrumbs: import("react").ForwardRefExoticComponent<BreadcrumbsProps<string> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/breadcrumbs/breadcrumbsStandAlone.d.ts

@@ -0,0 +1,20 @@
+import type { BreadcrumbsStandAloneProps } from './types/breadcrumbs';
+/**
+ * Standalone breadcrumbs component for displaying navigation paths.
+ *
+ * This component renders a navigation bar with a list of breadcrumb items, allowing users
+ * to understand and navigate the hierarchy of the current page. It automatically handles
+ * overflow and truncates breadcrumb names when necessary, improving usability in complex
+ * navigation structures.
+ *
+ * This component is presentational and does not manage navigation state. It is typically
+ * used internally by the {@link BreadCrumbs} component.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbsStandAlone
+ *   crumbs={[{ name: "Home" }, { name: "Section" }]}
+ * />
+ * ```
+ */
+export declare const BreadcrumbsStandAlone: import("react").ForwardRefExoticComponent<BreadcrumbsStandAloneProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/breadcrumbs/components/crumbStandAlone/crumbStandAlone.d.ts

@@ -0,0 +1,17 @@
+import type { BreadcrumbStandAloneProps } from '../../types/breadcrumbs';
+/**
+ * Standalone breadcrumb item component for navigation bars.
+ *
+ * This component renders a single breadcrumb item, handling both the last (current page)
+ * and intermediate crumbs. It supports custom rendering for the last crumb, icons as dividers,
+ * and navigation links. Used internally by the breadcrumbs navigation.
+ *
+ * @example
+ * ```tsx
+ * <CrumbStandAlone
+ *   crumb={{ name: "Home", url: "/" }}
+ *   lastCrumb={false}
+ * />
+ * ```
+ */
+export declare const CrumbStandAlone: ({ crumb, cssClasses, dividerIcon, lastCrumb, lastOneCrumbComponent, link, ...props }: BreadcrumbStandAloneProps) => JSX.Element;

package/dist/types/components/breadcrumbs/hooks/useIsOverflow/useIsOverflow.d.ts

@@ -0,0 +1,7 @@
+import { type MutableRefObject } from 'react';
+interface ReturnValue {
+    innerRef: MutableRefObject<HTMLElement | null>;
+    isOverflow: boolean;
+}
+export declare const useIsOverflow: () => ReturnValue;
+export {};

package/dist/types/components/breadcrumbs/index.d.ts

@@ -0,0 +1,3 @@
+export { BreadCrumbs } from './breadcrumbs';
+export type { BreadcrumbLiStyledProps, BreadcrumbProps, BreadcrumbLinkProps, BreadcrumbStandAloneProps, BreadcrumbsStandAloneProps, BreadcrumbsProps, } from './types/breadcrumbs';
+export type { BreadcrumbsStyleProps, BreadcrumbsVariantStyles, } from './types/breadcrumbsTheme';

package/dist/types/components/breadcrumbs/types/breadcrumbs.d.ts

@@ -0,0 +1,76 @@
+import type { CommonIconProps } from '../../../lib/types/commons/icon';
+import type { ComponentSelected, ComponentsTypesComponents } from '../../../lib/types/cssGenerator/componentsTypes';
+import type { DataAttributes } from '../../../lib/types/dataAttributes/dataAttributes';
+import type { StateType } from '../../../lib/types/states/states';
+import type { LinkProps } from '../../link/types/link';
+import type { TextComponentType } from '../../text/types/component';
+/**
+ * Type for CSS classes specific to the breadcrumbs component.
+ */
+type BreadcrumbsCssClasses = ComponentSelected<ComponentsTypesComponents['BREADCRUMBS']>;
+/**
+ * Interface for the styled breadcrumb list item.
+ * Includes optional state and a flag for the last breadcrumb.
+ */
+export interface BreadcrumbLiStyledProps {
+    state?: StateType;
+    lastCrumb?: boolean;
+}
+/**
+ * Type for an individual breadcrumb.
+ * Includes name, URL, optional onClick handler, and ARIA label.
+ */
+export interface BreadcrumbProps extends DataAttributes {
+    name: string;
+    url: string;
+    onClick?: (url: string, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    ariaLabel?: string;
+    id?: string;
+}
+/**
+ * Type for a breadcrumb link with optional content.
+ * Extends the ILink type with specific overrides.
+ */
+export type BreadcrumbLinkProps = Omit<LinkProps, 'children' | 'onClick' | 'aria-label' | 'url'> & {
+    content?: string;
+};
+/**
+ * Interface for a standalone breadcrumb component.
+ * Includes optional CSS classes, link, crumb, and other properties.
+ */
+export interface BreadcrumbStandAloneProps extends DataAttributes {
+    cssClasses?: BreadcrumbsCssClasses;
+    link?: BreadcrumbLinkProps;
+    crumb: BreadcrumbProps;
+    lastCrumb?: boolean;
+    lastOneCrumbComponent?: TextComponentType;
+    dividerIcon?: CommonIconProps;
+}
+/**
+ * Type for ARIA attributes used in breadcrumbs.
+ */
+type BreadcrumbAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-describedby' | 'aria-disabled' | 'aria-labelledby'>;
+/**
+ * Interface for the standalone breadcrumbs component.
+ * Includes ARIA attributes, crumbs, and optional properties.
+ */
+export interface BreadcrumbsStandAloneProps extends BreadcrumbAriaAttributes, DataAttributes {
+    link?: BreadcrumbLinkProps;
+    id?: string;
+    crumbs: BreadcrumbProps[];
+    minCharLimit?: number;
+    dividerIcon?: CommonIconProps;
+    lastOneCrumbComponent?: TextComponentType;
+    cssClasses?: BreadcrumbsCssClasses;
+}
+/**
+ * Interface for the controlled breadcrumbs component.
+ * Extends the BreadcrumbsStandAloneProps interface and adds a variant and additional CSS classes.
+ *
+ * @template Variant - The type of the variant for the breadcrumbs.
+ */
+export interface BreadcrumbsProps<Variant = undefined extends string ? unknown : string> extends Omit<BreadcrumbsStandAloneProps, 'styles'> {
+    variant?: Variant;
+    additionalClasses?: Partial<BreadcrumbsCssClasses>;
+}
+export {};

package/dist/types/components/breadcrumbs/types/breadcrumbsTheme.d.ts

@@ -0,0 +1,12 @@
+import type { CssLibPropsType } from '../../../lib/types/cssGenerator/stylesTypes';
+export interface BreadcrumbsStyleProps extends CssLibPropsType {
+    _linkContainer?: CssLibPropsType;
+    _link?: CssLibPropsType;
+    _lastOneCrumb?: CssLibPropsType;
+    _iconDividerContainer?: CssLibPropsType;
+    _iconDivider?: CssLibPropsType;
+    _crumb?: CssLibPropsType;
+}
+export type BreadcrumbsVariantStyles<Variant extends string> = BreadcrumbsStyleProps & {
+    [key in Variant]: BreadcrumbsStyleProps;
+};

package/dist/types/components/breadcrumbs/utils/crumbMaxCharName/crumbMaxCharName.d.ts

@@ -0,0 +1,22 @@
+import type { BreadcrumbProps } from '../../types/breadcrumbs';
+/**
+ * Utility function to truncate breadcrumb names based on character limit and overflow state.
+ *
+ * This function returns a new breadcrumb object with its `name` property truncated and an ellipsis appended
+ * if the name exceeds the specified character limit and the breadcrumb should be modified (e.g., when overflowing).
+ * It helps ensure breadcrumb navigation remains readable and compact in limited space scenarios.
+ *
+ * @example
+ * ```typescript
+ * const crumb = { name: "VeryLongBreadcrumbName", href: "/" };
+ * const result = crumbMaxCharName(crumb, 10, true, false);
+ * // result.name === "VeryLongBr..."
+ * ```
+ *
+ * @param crumb - Breadcrumb object to process.
+ * @param charLimit - Maximum number of characters allowed for the breadcrumb name.
+ * @param overflow - Whether the breadcrumb bar is overflowing.
+ * @param lastCrumb - Whether this is the last breadcrumb in the list.
+ * @returns A new breadcrumb object with the name truncated if necessary.
+ */
+export declare function crumbMaxCharName(crumb: BreadcrumbProps, charLimit: number, overflow: boolean, lastCrumb: boolean): BreadcrumbProps;

package/dist/types/components/button/button.d.ts

@@ -0,0 +1,28 @@
+import type { ButtonProps } from './types/button';
+/**
+ * Generic button component for triggering actions or submitting forms.
+ *
+ * This component supports custom variants and sizes through generic type parameters,
+ * allowing you to extend the button's appearance and behavior for your design system.
+ * It handles disabled and loading states, and can render an icon and/or children.
+ *
+ * Internally, it uses {@link ButtonStandAlone} for rendering and applies CSS classes
+ * based on the provided variant and size.
+ *
+ * ### Generics
+ * - `<Variant extends string | undefined>`: Allows you to define custom variant types for theming.
+ * - `<Size extends string | undefined>`: Allows you to define custom size types for sizing.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="md">Click me</Button>
+ *
+ * // With custom variant and size types:
+ * type MyVariant = "primary" | "danger";
+ * type MySize = "sm" | "lg";
+ * <Button<MyVariant, MySize> variant="danger" size="lg">Delete</Button>
+ * ```
+ *
+ * @returns The rendered button element, or null if no content is provided.
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps<string | undefined, string | undefined> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/button/buttonStandAlone.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonStandAloneProps } from './types/button';
+/**
+ * Low-level button component for rendering a styled button element.
+ *
+ * This component is responsible for rendering the actual `<button>` element with
+ * the correct classes, icon, loader, and layout. It is used internally by higher-level
+ * button components and is not intended to be used directly in most cases.
+ *
+ * It supports icons, loading state, full width, and custom alignment. The component
+ * is flexible and can be themed via CSS classes.
+ *
+ * @example
+ * ```tsx
+ * <ButtonStandAlone loading icon={{ icon: <MyIcon /> }}>
+ *   Save
+ * </ButtonStandAlone>
+ * ```
+ *
+ * @returns The rendered button element.
+ */
+export declare const ButtonStandAlone: import("react").ForwardRefExoticComponent<ButtonStandAloneProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './button';
+export type { ButtonCssClasses, ButtonStylesProps, ButtonStandAloneProps, ButtonProps, } from './types/button';
+export type { ButtonStyleProps, ButtonVariantStyles, } from './types/buttonTheme';