@internxt/ui 0.0.25

package/README.md

@@ -0,0 +1,69 @@
+# InternxtUI
+
+## Overview
+
+This repository contains the library of Internxt components, named `@internxt/internxtui`. It offers a collection of reusable UI components for use within Internxt projects.
+
+## Installation
+
+To install the library, use yarn:
+
+```bash
+yarn add @internxt/internxtui
+```
+
+## Usage/Examples
+
+You can import the components from @internxt/internxtui in your React application as follows:
+
+```javascript
+import { Button } from '@internxt/internxtui';
+```
+
+Replace `Button` with the specific component you want to use.
+
+## Scripts
+
+### `yarn sb`
+
+Starts Storybook server.
+
+### `yarn build-storybook`
+
+Builds Storybook for production.
+
+### `yarn build`
+
+Builds the library using TypeScript and Vite.
+
+### `yarn format`
+
+Formats TypeScript files using Prettier.
+
+### `yarn lint`
+
+Lints the project using ESLint.
+
+### `yarn test`
+
+Runs tests using Vitest.
+
+### `yarn test-update`
+
+Runs tests and updates snapshots.
+
+### `yarn test-watch`
+
+Runs tests in watch mode.
+
+### `yarn test:ui`
+
+Runs UI tests.
+
+### `yarn coverage`
+
+Generates test coverage reports.
+
+### `yarn deploy`
+
+Deploy Storybook to GitHub Pages. This is the url: https://internxt.github.io/ui

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

@@ -0,0 +1,29 @@
+type SIZE_KEYS = 'xxs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl';
+/**
+ * Renders an avatar component which can be either a picture or a default avatar with initials.
+ *
+ * @param {Object} props - The properties for the Avatar component.
+ * @param {string} props.fullName - The full name of the user, used to generate initials if no image is provided.
+ * @param {number} [props.diameter=80] - The diameter of the avatar in pixels. Ignored if `size` is provided.
+ * @param {SIZE_KEYS} [props.size] - Predefined size for the avatar. If provided, overrides the `diameter`.
+ *                                   The associated value in `SIZES` will be used as the diameter. Possible values are:
+ *                                    - `'xxs'`: 28px
+ *                                    - `'xs'`: 36px
+ *                                    - `'sm'`: 40px
+ *                                    - `'base'`: 48px
+ *                                    - `'lg'`: 80px
+ *                                    - `'xl'`: 128px
+ * @param {string|null} [props.src] - The URL of the image to display as the avatar. If not provided, initials are shown
+ * @param {string} [props.className=''] - Additional CSS classes to apply to the avatar component.
+ * @param {Object} [props.style={}] - Additional inline styles to apply to the avatar component.
+ * @returns {JSX.Element} The rendered avatar component.
+ */
+declare const Avatar: ({ src, diameter, size, className, fullName, style, }: {
+    fullName: string;
+    diameter?: number;
+    size?: SIZE_KEYS;
+    src?: string | null;
+    className?: string;
+    style?: Record<string, string | number>;
+}) => JSX.Element;
+export default Avatar;

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

@@ -0,0 +1,5 @@
+export default function DefaultAvatar({ fullName, diameter, className, }: Readonly<{
+    fullName: string;
+    diameter: number;
+    className?: string;
+}>): JSX.Element;

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

@@ -0,0 +1,6 @@
+export default function PictureAvatar({ src, diameter, className, style, }: Readonly<{
+    src: string;
+    diameter: number;
+    className?: string;
+    style?: Record<string, string | number>;
+}>): JSX.Element;

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

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar';

package/dist/components/baseDialog/BaseDialog.d.ts

@@ -0,0 +1,62 @@
+import { IconWeight } from '@phosphor-icons/react';
+
+export interface BaseDialogProps {
+    isOpen: boolean;
+    title?: string;
+    hideCloseButton?: boolean;
+    subTitle?: string;
+    dialogRounded?: boolean;
+    children: JSX.Element | JSX.Element[];
+    classes?: string;
+    titleClasses?: string;
+    panelClasses?: string;
+    closeClass?: string;
+    weightIcon?: IconWeight;
+    bgColor?: string;
+    onClose: () => void;
+    dataTest?: string;
+}
+/**
+ * BaseDialog component
+ *
+ * @property {boolean} isOpen
+ * - Controls whether the dialog is open or closed. If true, the dialog is visible.
+ *
+ * @property {string} [title]
+ * - The title of the dialog, displayed at the top of the dialog box.
+ *
+ * @property {boolean} [hideCloseButton]
+ * - If true, hides the close button (X icon) in the top right corner of the dialog.
+ *
+ * @property {string} [subTitle]
+ * - A subtitle for the dialog, displayed below the title.
+ *
+ * @property {boolean} [dialogRounded]
+ * - If true, applies a more rounded corner style to the dialog.
+ *
+ * @property {JSX.Element | JSX.Element[]} children
+ * - The content to be displayed inside the dialog. Can be a single JSX element or an array of elements.
+ *
+ * @property {string} [classes]
+ * - Custom classes for the outermost container of the dialog. Allows additional styling like margins or padding.
+ *
+ * @property {string} [titleClasses]
+ * - Custom classes for styling the title element. Can modify font size, weight, etc.
+ *
+ * @property {string} [panelClasses]
+ * - Custom classes for the main dialog panel, where the content is displayed.
+ *
+ * @property {string} [closeClass]
+ * - Custom classes for the close button, allowing for customization of the button's appearance.
+ *
+ * @property {IconWeight} [weightIcon]
+ * - Controls the thickness of the close button icon (X). Options range from "thin" to "bold".
+ *
+ * @property {string} [bgColor]
+ * - Custom background color for the dialog. Defaults to a light surface color if not provided.
+ *
+ * @property {() => void} onClose
+ * - Callback function triggered when the close button or overlay is clicked, used to close the dialog.
+ */
+declare const BaseDialog: ({ isOpen, title, subTitle, dialogRounded, children, onClose, classes, panelClasses, titleClasses, closeClass, weightIcon, bgColor, dataTest, hideCloseButton, }: BaseDialogProps) => JSX.Element;
+export default BaseDialog;

package/dist/components/baseDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BaseDialog } from './BaseDialog';
+export type { BaseDialogProps } from './BaseDialog';

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

@@ -0,0 +1,68 @@
+import { FunctionComponent, SVGProps } from 'react';
+import { Dispatch } from 'redux';
+import { BreadcrumbItemData, BreadcrumbsMenuProps } from './BreadcrumbsItem';
+import { DropTargetMonitor, useDrop } from 'react-dnd';
+
+export interface BreadcrumbsProps<T extends Dispatch, U> {
+    items: BreadcrumbItemData[];
+    rootBreadcrumbItemDataCy?: string;
+    menu?: (props: BreadcrumbsMenuProps) => JSX.Element;
+    namePath: {
+        name: string;
+        uuid: string;
+    }[];
+    isSomeItemSelected: boolean;
+    selectedItems: U[];
+    onItemDropped: (item: BreadcrumbItemData, namePath: {
+        name: string;
+        uuid: string;
+    }[], isSomeItemSelected: boolean, selectedItems: U[], dispatch: T) => (draggedItem: U, monitor: DropTargetMonitor) => Promise<void>;
+    canItemDrop: (item: BreadcrumbItemData) => (draggedItem: U, monitor: DropTargetMonitor) => boolean;
+    itemComponent?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    acceptedTypes: string[];
+    dispatch: T;
+    useDrop: typeof useDrop;
+}
+/**
+ * Breadcrumbs component
+ *
+ * @property {BreadcrumbItemData[]} items
+ * - Array of breadcrumb items to be displayed, each containing a label, icon, and other related properties.
+ *
+ * @property {string} [rootBreadcrumbItemDataCy]
+ * - Custom `data-cy` attribute  applied to the root breadcrumb item.
+ *
+ * @property {Function} [menu]
+ * - Optional custom menu component for rendering a dropdown menu for breadcrumb items that need additional actions
+ * or options.
+ *
+ * @property {Object[]} namePath
+ * - Array of objects representing the path and UUID of the breadcrumb item, used for handling navigation or selection.
+ *
+ * @property {boolean} isSomeItemSelected
+ * - If true, indicates that some breadcrumb items are selected, affecting the display and behavior of the breadcrumbs.
+ *
+ * @property {any[]} selectedItems
+ * - Array of selected breadcrumb items, used to manage the selection state and related actions.
+ *
+ * @property {Function} onItemDropped
+ * - Callback function that is triggered when a breadcrumb item is dropped, used for handling drag-and-drop operations.
+ *
+ * @property {Function} canItemDrop
+ * - Determines if a breadcrumb item can be dropped. Used for validating drop actions in the drag-and-drop interaction.
+ *
+ * @property {FunctionComponent<SVGProps<SVGSVGElement>>} [itemComponent]
+ * - Optional custom component for rendering icons or other visual elements inside each breadcrumb item.
+ *
+ * @property {string[]} acceptedTypes
+ * - Array of accepted drag-and-drop types for breadcrumb items,
+ * specifying what types of items can be dragged and dropped.
+ *
+ * @property {Dispatch} dispatch
+ * - The Redux dispatch function for dispatching actions related to the breadcrumb items.
+ *
+ * @property {Functiodn} useDrop
+ * - Hook for dnd.
+ */
+declare const Breadcrumbs: <T extends Dispatch, U>(props: Readonly<BreadcrumbsProps<T, U>>) => JSX.Element;
+export default Breadcrumbs;

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

@@ -0,0 +1,91 @@
+import { DropTargetMonitor, useDrop } from 'react-dnd';
+import { Dispatch } from 'redux';
+import { FunctionComponent, SVGProps } from 'react';
+
+export interface BreadcrumbItemData {
+    uuid: string;
+    label: string;
+    icon: JSX.Element | null;
+    active: boolean;
+    isFirstPath?: boolean;
+    dialog?: boolean;
+    isBackup?: boolean;
+    onClick?: () => void;
+}
+export interface BreadcrumbsMenuProps {
+    item: BreadcrumbItemData;
+    items: BreadcrumbItemData[];
+    onItemClicked: (item: BreadcrumbItemData) => void;
+}
+/**
+ * BreadcrumbsItem component
+ *
+ * @property {BreadcrumbItemData} item
+ * - Data representing a single breadcrumb item, including label, icon, and other properties.
+ *
+ * @property {number} totalBreadcrumbsLength
+ * - The total number of breadcrumb items, used for styling the first item and determining when to apply certain styles.
+ *
+ * @property {boolean} [isHiddenInList]
+ * - If true, the breadcrumb is hidden in the list and only shown in a dropdown menu.
+ *
+ * @property {BreadcrumbItemData[]} items
+ * - Array of all breadcrumb items, used for rendering all the breadcrumbs and their separators.
+ *
+ * @property {string} [breadcrumbButtonDataCy]
+ * - Custom `data-cy` attribute applied to the breadcrumb button element.
+ *
+ * @property {FunctionComponent<BreadcrumbsMenuProps>} [menu]
+ * - A custom menu component that can be shown for the breadcrumb item when it's not active or dialog-based.
+ *
+ * @property {Object[]} namePath
+ * - Array of objects representing the path and UUID of the breadcrumb item.
+ *
+ * @property {boolean} isSomeItemSelected
+ * - If true, indicates that at least one breadcrumb item is selected, affecting styling or behavior.
+ *
+ * @property {any[]} selectedItems
+ * - Array of selected breadcrumb items, used to manage selected states and actions.
+ *
+ * @property {Function} onItemDropped
+ * - Callback function that is triggered when a breadcrumb item is dropped.
+ *
+ * @property {Function} canItemDrop
+ * - Determines if a breadcrumb item can be dropped. Used for validation during drag-and-drop operations.
+ *
+ * @property {FunctionComponent<SVGProps<SVGSVGElement>>} [itemComponent]
+ * - Optional custom component for rendering an icon or other visual elements within the breadcrumb item.
+ *
+ * @property {string[]} acceptedTypes
+ * - List of accepted drag-and-drop types for the breadcrumb item.
+ *
+ * @property {Dispatch} dispatch
+ * - The Redux dispatch function for dispatching actions related to the breadcrumb item.
+ * @property {Functiodn} useDrop
+ * - Hook for dnd.
+ */
+export interface BreadcrumbsItemProps<T extends Dispatch, U> {
+    item: BreadcrumbItemData;
+    totalBreadcrumbsLength: number;
+    isHiddenInList?: boolean;
+    items: BreadcrumbItemData[];
+    breadcrumbButtonDataCy?: string;
+    menu?: (props: BreadcrumbsMenuProps) => JSX.Element;
+    namePath: {
+        name: string;
+        uuid: string;
+    }[];
+    isSomeItemSelected: boolean;
+    selectedItems: U[];
+    onItemDropped: (item: BreadcrumbItemData, namePath: {
+        name: string;
+        uuid: string;
+    }[], isSomeItemSelected: boolean, selectedItems: U[], dispatch: T) => (draggedItem: U, monitor: DropTargetMonitor) => Promise<void>;
+    canItemDrop: (item: BreadcrumbItemData) => (draggedItem: U, monitor: DropTargetMonitor<unknown, unknown>) => boolean;
+    itemComponent?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    acceptedTypes: string[];
+    dispatch: T;
+    useDrop: typeof useDrop;
+}
+declare const BreadcrumbsItem: <T extends Dispatch, U>(props: BreadcrumbsItemProps<T, U>) => JSX.Element;
+export default BreadcrumbsItem;

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

@@ -0,0 +1,3 @@
+export { default as Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps } from './Breadcrumbs';
+export type { BreadcrumbItemData, BreadcrumbsMenuProps } from './BreadcrumbsItem';

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

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react';
+
+export interface ButtonProps {
+    id?: string;
+    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'tertiary';
+    type?: 'button' | 'submit';
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClick?: (e?: unknown) => void;
+    onKeyDown?: (e?: unknown) => void;
+    size?: 'medium' | 'default';
+    loading?: boolean;
+    dataTest?: string;
+    autofocus?: boolean;
+    buttonDataCy?: string;
+    buttonChildrenDataCy?: string;
+}
+/**
+ * Button component
+ *
+ * @property {string} [id]
+ * - Optional ID for the button element, useful for accessibility and styling.
+ *
+ * @property {'primary' | 'secondary' | 'ghost' | 'destructive'} [variant]
+ * - Defines the button's style variant. Options are:
+ *   - 'primary': Standard button style with primary color.
+ *   - 'secondary': Button with border and subtle background color.
+ *   - 'ghost': Button with transparent background, suitable for icons or light use.
+ *   - 'destructive': Button for destructive actions.
+ *
+ * @property {'button' | 'submit'} [type]
+ * - Specifies the type of the button. Defaults to 'button'.
+ *   - 'button': Standard button behavior.
+ *   - 'submit': Button submits a form when used inside a form element.
+ *
+ * @property {ReactNode} [children]
+ * - The content inside the button, such as text or icons.
+ *   - Can be a single element or an array of elements.
+ *
+ * @property {string} [className]
+ * - Custom CSS classes for additional styling of the button.
+ *
+ * @property {boolean} [disabled]
+ * - Disables the button, preventing user interaction and applying a disabled style.
+ *   - Defaults to false.
+ *
+ * @property {(e?: unknown) => void} [onClick]
+ * - Function called when the button is clicked. Accepts an optional event object.
+ *
+ * @property {(e?: unknown) => void} [onKeyDown]
+ * - Function called when a key is pressed while the button is focused. Accepts an optional event object.
+ *
+ * @property {'medium' | 'default'} [size]
+ * - Specifies the button size. Options are:
+ *   - 'default': Standard size.
+ *   - 'medium': Slightly smaller size for compact use.
+ *
+ * @property {boolean} [loading]
+ * - If true, shows a loading spinner inside the button.
+ *
+ * @property {string} [dataTest]
+ * - Custom data attribute used for test automation or tracking purposes.
+ *
+ * @property {boolean} [autofocus]
+ * - If true, the button will be focused automatically when the page loads.
+ *
+ * @property {string} [buttonDataCy]
+ * - Custom data attribute for the button element.
+ *
+ * @property {string} [buttonChildrenDataCy]
+ * - Custom data attribute for the children of the button.
+ */
+declare const Button: ({ variant, type, id, children, className, disabled, onClick, onKeyDown, size, loading, dataTest, autofocus, buttonDataCy, buttonChildrenDataCy, }: Readonly<ButtonProps>) => JSX.Element;
+export default Button;

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

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/components/buttonCircle/CircleButton.d.ts

@@ -0,0 +1,19 @@
+type ButtonVariant = 'default' | 'warning' | 'cancel';
+export interface CircleButtonProps {
+    children?: JSX.Element | JSX.Element[];
+    variant?: ButtonVariant;
+    active?: boolean;
+    onClick?: () => void;
+    onClickToggleButton?: () => void;
+    className?: string;
+    dropdown?: React.ReactNode;
+    indicator?: {
+        icon?: JSX.Element;
+        className?: string;
+    };
+    isOpen?: boolean;
+    handleOpen?: () => void;
+    handleClose?: () => void;
+}
+declare const CircleButton: ({ children, variant, active, onClick, onClickToggleButton, className, dropdown, indicator, isOpen, handleOpen, handleClose, }: CircleButtonProps) => JSX.Element;
+export default CircleButton;

package/dist/components/buttonCircle/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CircleButton } from './CircleButton';
+export type { CircleButtonProps } from './CircleButton';

package/dist/components/card/Card.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+/**
+ * Card component
+ *
+ * @property {string} [className]
+ * - Optional additional CSS classes to customize the appearance of the card.
+ * By default, the card has rounded corners, border, padding, and shadow.
+ *
+ * @property {ReactNode} children
+ * - The content to be rendered inside the card. This can be any valid React node.
+ */
+declare const Card: ({ className, children }: {
+    className?: string;
+    children: ReactNode;
+}) => JSX.Element;
+export default Card;

package/dist/components/card/index.d.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card';

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,46 @@
+export interface CheckboxProps {
+    id?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    onClick?: React.DOMAttributes<HTMLLabelElement>['onClick'];
+    required?: boolean;
+    className?: string;
+    checkboxDataCy?: string;
+    disabled?: boolean;
+}
+/**
+ * Checkbox component
+ *
+ * @property {string} [id]
+ * - Optional ID for the checkbox input element, useful for accessibility and styling.
+ *
+ * @property {boolean} [checked]
+ * - Controls whether the checkbox is checked. Defaults to true.
+ *   - If true, the checkbox appears checked.
+ *   - If false, the checkbox appears unchecked.
+ *
+ * @property {boolean} [indeterminate]
+ * - If true, the checkbox appears in an indeterminate state (a visual state between checked and unchecked).
+ *   - This state is typically used for a parent checkbox representing a partial selection of child checkboxes.
+ *
+ * @property {React.DOMAttributes<HTMLLabelElement>['onClick']} [onClick]
+ * - Function called when the checkbox label is clicked. It is triggered only if the checkbox is not disabled.
+ *   - Accepts an event object from the click event.
+ *
+ * @property {boolean} [required]
+ * - If true, marks the checkbox as required in form validation.
+ *   - Defaults to false.
+ *
+ * @property {string} [className]
+ * - Custom CSS classes for additional styling of the checkbox container element.
+ *
+ * @property {string} [checkboxDataCy]
+ * - Custom data attribute for the checkbox element.
+ *
+ * @property {boolean} [disabled]
+ * - Disables the checkbox, preventing user interaction and applying a disabled style.
+ *   - If true, the checkbox cannot be checked or unchecked.
+ *   - Defaults to false.
+ */
+declare const Checkbox: ({ id, checked, indeterminate, onClick, required, className, checkboxDataCy, disabled, }: CheckboxProps) => JSX.Element;
+export default Checkbox;

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';

package/dist/components/contextMenu/ContextMenu.d.ts

@@ -0,0 +1,56 @@
+import { MenuItemsType } from '../menu/Menu';
+
+export interface ContextMenuProps<T> {
+    item: T;
+    menuItemsRef: React.MutableRefObject<HTMLDivElement | null>;
+    menu?: MenuItemsType<T>;
+    openedFromRightClick: boolean;
+    isOpen: boolean;
+    posX: number;
+    posY: number;
+    isContextMenuCutOff: boolean;
+    genericEnterKey: () => void;
+    handleMenuClose: () => void;
+}
+/**
+ * Properties for `ContextMenuProps<T>`
+ *
+ * @template T - Generic type representing the item to which the context menu applies.
+ *
+ * @property {T} item
+ * - The current item associated with the context menu.
+ * This object is passed to each menu option's `action` and `disabled` functions.
+ *
+ * @property {React.MutableRefObject<HTMLDivElement | null>} menuItemsRef
+ * - A mutable ref to the `div` containing the context menu. Used for handling the menu's positioning and visibility.
+ *
+ * @property {MenuType<T>} [menu]
+ * - An array of menu options, where each option includes properties like `name`, `icon`, `action`, etc.
+ * The `MenuType<T>` type allows some options to be separators (`separator: boolean`).
+ *
+ * @property {boolean} openedFromRightClick
+ * - Indicates whether the context menu was opened via a right-click (`true`).
+ * Determines whether the menu's position is set based on the click location or a predefined position.
+ *
+ * @property {boolean} [isOpen]
+ * - To know is Menu is visible.
+ *
+ * @property {number} posX
+ * - X-coordinate for the menu's position, used if `openedFromRightClick` is `true`.
+ *
+ * @property {number} posY
+ * - Y-coordinate for the menu's position, used if `openedFromRightClick` is `true`.
+ *
+ * @property {boolean} isContextMenuCutOff
+ * - Specifies whether the menu should align to the bottom of the screen to prevent it
+ * from being cut off on smaller screens. Switches menu positioning between top or bottom.
+ *
+ * @property {() => void} genericEnterKey
+ * - A callback that executes if the Enter key is pressed without a selected menu option.
+ * Can be used to define a default action.
+ *
+ * @property {() => void} handleMenuClose
+ * - Function to close the context menu. Called after an action is executed or when pressing Enter in the menu.
+ */
+declare const ContextMenu: <T>({ item, menuItemsRef, menu, openedFromRightClick, posX, posY, isContextMenuCutOff, isOpen, genericEnterKey, handleMenuClose, }: ContextMenuProps<T>) => JSX.Element;
+export default ContextMenu;

package/dist/components/contextMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ContextMenu } from './ContextMenu';
+export type { ContextMenuProps } from './ContextMenu';

package/dist/components/copyable/Copyable.d.ts

@@ -0,0 +1,27 @@
+export interface CopyableProps {
+    className?: string;
+    classText?: string;
+    text: string;
+    copiedText?: string;
+    copyToClipboardText?: string;
+}
+/**
+ * Copyable component
+ *
+ * @property {string} [className]
+ * - Custom classes for the outer container.
+ *
+ * @property {string} [classText]
+ * - Custom classes for the selected text.
+ *
+ * @property {string} text
+ * - The text content to be displayed and copied to the clipboard.
+ *
+ * @property {string} copiedText
+ * - The text to display in the tooltip when the content has been copied.
+ *
+ * @property {string} copyToClipboardText
+ * - The text to display in the tooltip when the content can be copied to the clipboard.
+ */
+declare const Copyable: ({ className, classText, text, copiedText, copyToClipboardText, }: CopyableProps) => JSX.Element;
+export default Copyable;

package/dist/components/copyable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Copyable } from './Copyable';
+export type { CopyableProps } from './Copyable';

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,50 @@
+export interface DialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onPrimaryAction: () => void;
+    onSecondaryAction: () => void;
+    title: string;
+    subtitle: string;
+    primaryAction: string;
+    secondaryAction: string;
+    primaryActionColor: 'primary' | 'danger';
+    isLoading?: boolean;
+}
+/**
+ * Dialog component
+ *
+ * @property {boolean} isOpen
+ * - Controls whether the dialog is open or closed. If true, the dialog becomes visible.
+ *
+ * @property {() => void} onClose
+ * - Callback function triggered when the overlay or the close button is clicked. Used to close the dialog.
+ *
+ * @property {() => void} onPrimaryAction
+ * - Callback function triggered when the primary action button is clicked.
+ *
+ * @property {() => void} onSecondaryAction
+ * - Callback function triggered when the secondary action button is clicked.
+ *
+ * @property {string} title
+ * - The title of the dialog, displayed at the top of the dialog box.
+ *
+ * @property {string} subtitle
+ * - A subtitle for the dialog, displayed below the title.
+ *
+ * @property {string} primaryAction
+ * - The label for the primary action button.
+ *
+ * @property {string} secondaryAction
+ * - The label for the secondary action button.
+ *
+ * @property {('primary' | 'danger')} primaryActionColor
+ * - Defines the color of the primary action button. Can either be 'primary' or 'danger'.
+ *
+ * @property {boolean} [isLoading]
+ * - Optional flag to indicate if the buttons should show a loading state. Defaults to false.
+ *
+ * @returns {JSX.Element}
+ * - The rendered dialog component.
+ */
+declare const Dialog: ({ isOpen, onClose, onPrimaryAction, onSecondaryAction, title, subtitle, primaryAction, secondaryAction, primaryActionColor, isLoading, }: DialogProps) => JSX.Element;
+export default Dialog;

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Dialog } from './Dialog';
+export type { DialogProps } from './Dialog';