@punkbit/cui 0.0.247-rc.2

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

@@ -0,0 +1,149 @@
+import { ComponentType, HTMLAttributes, KeyboardEventHandler, MouseEventHandler, MutableRefObject, ReactNode } from 'react';
+import { VariableSizeGrid, VariableSizeGridProps } from 'react-window';
+import { ContextMenuItemProps } from '..';
+interface CellCommonProps extends HTMLAttributes<HTMLElement> {
+    columnIndex: number;
+    isScrolling?: boolean;
+}
+interface CellHeaderProps extends CellCommonProps {
+    rowIndex?: never;
+    type: "header-cell";
+    width: number;
+}
+interface CellBodyProps extends CellCommonProps {
+    rowIndex: number;
+    type: "row-cell";
+    width: number;
+}
+type CellComponentProps = CellHeaderProps | CellBodyProps;
+export type CellProps = ComponentType<CellComponentProps>;
+export interface CellSelectionAction {
+    type: "normal" | "shiftSelection";
+    row: number;
+    column: number;
+    event?: KeyEventType;
+}
+export interface AllSelection {
+    type: "all";
+    event?: KeyEventType;
+}
+export interface ColumnSelectionAction {
+    type: "columnSelection" | "shiftColumnSelection" | "ctrlColumnSelection";
+    column: number;
+    event?: KeyEventType;
+}
+export interface RowSelectionAction {
+    type: "rowSelection" | "shiftRowSelection" | "ctrlRowSelection";
+    row: number;
+    event?: KeyEventType;
+}
+export type SelectionAction = AllSelection | CellSelectionAction | ColumnSelectionAction | RowSelectionAction;
+export type SelectionType = "default" | "selectIndirect" | "selectDirect";
+export interface SelectionPos {
+    column: number;
+    row: number;
+}
+export interface EmptySelection {
+    type: "empty";
+}
+export interface RowsSelection {
+    type: "rows";
+    rows: Set<number>;
+    anchorRow: number;
+}
+export interface ColumnsSelection {
+    type: "columns";
+    columns: Set<number>;
+    anchorColumn: number;
+}
+export interface Rectangle {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export interface RectangleSelection {
+    type: "rectangle";
+    bounds: Rectangle;
+    anchor: SelectionPos;
+}
+export type SelectedRegion = EmptySelection | RowsSelection | ColumnsSelection | RectangleSelection;
+export type RoundedType = "none" | "lg" | "md" | "sm";
+export type KeyEventType = "keypress" | "click";
+export type onSelectFn = (action: SelectionAction, selction: SelectedRegion, focus: SelectionFocus) => void;
+type IsAllSelectedType = {
+    type: "all";
+};
+type IsRowSelectedType = {
+    type: "row";
+    row: number;
+};
+type IsColumnSelectedType = {
+    type: "column";
+    column: number;
+};
+type IsCellSelectedType = {
+    type: "cell";
+    row: number;
+    column: number;
+};
+export type IsSelectedType = IsAllSelectedType | IsRowSelectedType | IsColumnSelectedType | IsCellSelectedType;
+export type SelectionTypeFn = (props: IsSelectedType) => SelectionType;
+export type ColumnResizeFn = (columnIndex: number, newWidth: number, type: "auto" | "manual") => void;
+export type SelectionFocus = {
+    row: number;
+    column: number;
+};
+export interface ItemDataType {
+    showRowNumber: boolean;
+    showHeader: boolean;
+    getSelectionType: SelectionTypeFn;
+    rowCount: number;
+    columnCount: number;
+    cell: CellProps;
+    focus: SelectionFocus;
+    rowHeight: number;
+    headerHeight: number;
+    rowNumberWidth: number;
+    rowStart: number;
+    rowAutoHeight?: boolean;
+    updateRowHeight: (rowIndex: number, height: number) => void;
+    getRowHeight: (index: number) => number;
+}
+export interface GridContextMenuItemProps extends Omit<ContextMenuItemProps, "children"> {
+    label: ReactNode;
+}
+export interface GridProps extends Omit<VariableSizeGridProps, "height" | "width" | "rowHeight" | "children" | "innerElementType" | "innerRef" | "outerElementType" | "outerRef" | "columnWidth"> {
+    autoFocus?: boolean;
+    autoHeight?: boolean;
+    rowStart?: number;
+    rounded?: RoundedType;
+    focus?: SelectionFocus;
+    rowHeight?: number;
+    cell: CellProps;
+    showHeader?: boolean;
+    showRowNumber?: boolean;
+    headerHeight?: number;
+    onFocusChange?: (rowIndex: number, columnIndex: number) => void;
+    onSelect?: onSelectFn;
+    onColumnResize?: (columnIndex: number, newWidth: number) => void;
+    getMenuOptions?: (selection: SelectedRegion, focus: SelectionFocus) => Array<GridContextMenuItemProps>;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    selection?: SelectedRegion;
+    showToast?: boolean;
+    columnWidth?: (index: number) => number;
+    onMouseDown?: MouseEventHandler<HTMLDivElement>;
+    onMouseMove?: MouseEventHandler<HTMLDivElement>;
+    showBorder?: boolean;
+    onCopy?: (selection: SelectedRegion, focus: SelectionFocus) => void | Promise<void>;
+    onCopyCallback?: (copied: boolean) => void;
+    onContextMenu?: MouseEventHandler<HTMLDivElement>;
+    forwardedGridRef?: MutableRefObject<VariableSizeGrid>;
+    rowAutoHeight?: boolean;
+}
+export type ResizerPosition = {
+    left: string;
+    top?: string;
+};
+export type GetResizerPositionFn = (clientX: number, width: number, columnIndex: number) => ResizerPosition;
+export {};

package/dist/components/Grid/useColumns.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+import { ColumnResizeFn } from './types';
+import { VariableSizeGrid } from 'react-window';
+interface Props {
+    columnCount: number;
+    columnWidth?: (index: number) => number;
+    outerGridRef: RefObject<HTMLDivElement>;
+    gridRef: RefObject<VariableSizeGrid>;
+    onColumnResize?: (columnIndex: number, newWidth: number) => void;
+}
+declare const useColumns: ({ columnCount, columnWidth: columnWidthProp, outerGridRef, onColumnResize: onColumnResizeProp, gridRef, }: Props) => {
+    getColumnHorizontalPosition: (index: number) => number;
+    onColumnResize: ColumnResizeFn;
+    columnWidth: (columnIndex: number) => number;
+    initColumnSize: (containerWidth: number) => void;
+};
+export default useColumns;

package/dist/components/Grid/useResizingState.d.ts

@@ -0,0 +1,47 @@
+import { ResizerPosition } from './types';
+/**
+ * Defines the type for pointer information used in resizing.
+ * @typedef {Object} PointerType
+ * @property {number} width - The width of the pointer component.
+ * @property {number} pointerId - Unique identifier for the pointer from a touch event.
+ * @property {number} initialClientX - The initial X coordinate of the pointer when resizing started.
+ */
+export type PointerType = {
+    width: number;
+    pointerId: number;
+    initialClientX: number;
+};
+/**
+ * Defines the state and methods used for managing the column resizing.
+ * @typedef {Object} ResizingState
+ * @property {PointerType | null} pointer - The current pointer data, or null if no pointer is active.
+ * @property {(pointer: PointerType | null) => void} setPointer - Setter to update the pointer.
+ * @property {(columnIndex: number) => boolean} getIsPressed - Indicates if a resizer for the given column is currently pressed/dragged.
+ * @property {(columnIndex: number, pressed: boolean) => void} setIsPressed - Sets the pressed state for a given column.
+ * @property {(columnIndex: number) => ResizerPosition} getPosition - Gets the position of the resizer for the specified column.
+ * @property {(position: ResizerPosition) => void} setPosition - Updates the position of the resizer.
+ * @property {number} lastPressedTimestamp - Timestamp of the last time a column was pressed, used to detect double-clicks.
+ */
+export interface ResizingState {
+    pointer: PointerType | null;
+    setPointer: (pointer: PointerType | null) => void;
+    getIsPressed: (columnIndex: number) => boolean;
+    setIsPressed: (columnIndex: number, pressed: boolean) => void;
+    getPosition: (columnIndex: number) => ResizerPosition;
+    setPosition: (position: ResizerPosition) => void;
+    lastPressedTimestamp: number;
+}
+/**
+ * The initial position of the resizer element.
+ * @type {ResizerPosition}
+ */
+export declare const initialPosition: {
+    left: string;
+    top: string;
+};
+/**
+ * Custom hook that provides the state and methods needed to manage a resizing operation on columns.
+ * @returns {ResizingState} The resizing state and methods for controlling resizing behavior.
+ */
+declare const useResizingState: () => ResizingState;
+export default useResizingState;

package/dist/components/Grid/useSelectionActions.d.ts

@@ -0,0 +1,31 @@
+import { SelectionAction, SelectedRegion, SelectionPos, Rectangle, KeyEventType, onSelectFn, SelectionTypeFn } from './types';
+interface Props {
+    onCellSelect: onSelectFn;
+    focus: {
+        row: number;
+        column: number;
+    };
+    columnCount: number;
+    rowCount: number;
+    onFocusChange: (rowIndex: number, columnIndex: number) => void;
+    scrollGridTo: (props: {
+        row?: number;
+        column?: number;
+    }) => void;
+    selection: SelectedRegion;
+    rowStart: number;
+}
+interface SelectionActions {
+    getSelectionType: SelectionTypeFn;
+    onSelection: (action: SelectionAction) => void;
+    mouseMoveCellSelect: (row: number, column: number) => void;
+    moveSelection: (columnDiff: number, rowDiff: number, moveAnchor: boolean, event: KeyEventType) => SelectionAction | null;
+}
+export declare const singleCellSelected: (selection: SelectedRegion) => SelectionPos | null;
+export declare const cellRectSelected: (selection: SelectedRegion, x1: number, y1: number, x2: number, y2: number) => boolean;
+export declare const rectangleSelection: (anchorColumn: number, anchorRow: number, focusColumn: number, focusRow: number) => SelectedRegion;
+export declare const emptySelection: () => SelectedRegion;
+export declare const columnIsSelected: (selection: SelectedRegion, column: number, bounds: Rectangle) => boolean;
+export declare const rangeIndices: (a: number, b: number) => number[];
+export declare const useSelectionActions: ({ onCellSelect, focus, columnCount, rowCount, onFocusChange, scrollGridTo, selection, rowStart, }: Props) => SelectionActions;
+export {};

package/dist/components/GridContainer/GridContainer.d.ts

@@ -0,0 +1,60 @@
+import { ComponentProps, ElementType, ReactNode } from 'react';
+export type FlowOptions = "row" | "column" | "row-dense" | "column-dense";
+type GapOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "unset";
+type ItemsOptions = "start" | "center" | "end" | "stretch";
+type ContentOptions = "center" | "space-between" | "space-around" | "space-evenly" | "start" | "stretch" | "end" | "left" | "right";
+export interface GridContainerProps<T extends ElementType = "div"> {
+    /** Custom component to render as */
+    component?: T;
+    /** Alignment of items along the block axis */
+    alignItems?: ItemsOptions;
+    /** Alignment of content along the block axis */
+    alignContent?: ContentOptions;
+    /** The content to display inside the grid container */
+    children?: React.ReactNode;
+    /** Gap between columns */
+    columnGap?: GapOptions;
+    /** Gap between rows and columns */
+    gap?: GapOptions;
+    /** Size of implicitly-created grid columns */
+    gridAutoColumns?: string;
+    /** How auto-placed items flow into the grid */
+    gridAutoFlow?: FlowOptions;
+    /** Size of implicitly-created grid rows */
+    gridAutoRows?: string;
+    /** Named grid areas */
+    gridTemplateAreas?: string;
+    /** Column track sizes */
+    gridTemplateColumns?: string;
+    /** Row track sizes */
+    gridTemplateRows?: string;
+    /** Shorthand for grid-template-rows, grid-template-columns, and grid-template-areas */
+    gridTemplate?: string;
+    /** Whether to use inline-grid instead of grid */
+    inline?: boolean;
+    /** Whether to collapse to single column on smaller screens */
+    isResponsive?: boolean;
+    /** Alignment of content along the inline axis */
+    justifyContent?: ContentOptions;
+    /** Alignment of items along the inline axis */
+    justifyItems?: ItemsOptions;
+    /** Gap between rows */
+    rowGap?: GapOptions;
+    /** Height of the container */
+    height?: string;
+    /** Maximum height of the container */
+    maxHeight?: string;
+    /** Minimum height of the container */
+    minHeight?: string;
+    /** Whether the container should fill the full width of its parent */
+    fillWidth?: boolean;
+    /** Maximum width of the container */
+    maxWidth?: string;
+    /** Minimum width of the container */
+    minWidth?: string;
+    /** CSS overflow behavior */
+    overflow?: string;
+}
+type GridContainerPolymorphicComponent = <T extends ElementType = "div">(props: Omit<ComponentProps<T>, keyof T> & GridContainerProps<T>) => ReactNode;
+export declare const GridContainer: GridContainerPolymorphicComponent;
+export {};

package/dist/components/HoverCard/HoverCard.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import * as RadixHoverCard from "@radix-ui/react-hover-card";
+export declare const HoverCard: {
+    ({ children, ...props }: RadixHoverCard.HoverCardProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: {
+        ({ children, ...props }: RadixHoverCard.HoverCardTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children, showArrow, forceMount, container, ...props }: HoverCardContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {
+    /** Whether to show the arrow pointing to the trigger */
+    showArrow?: boolean;
+    /** Whether to force mount the content */
+    forceMount?: true;
+    /** Container element to portal the hover card into */
+    container?: HTMLElement | null;
+    /** The content to display in the hover card */
+    children: ReactNode;
+}
+export {};

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,6 @@
+import { ImageType } from './types';
+declare const SvgImage: {
+    ({ name, size, theme, ...props }: ImageType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SvgImage as Icon };

package/dist/components/Icon/IconCommon.d.ts

@@ -0,0 +1,167 @@
+export declare const ICONS_MAP: {
+    activity: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    alarm: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "arrow-down": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "arrow-left": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "arrow-right": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "arrow-triangle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "arrow-directions": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "arrow-up": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "auth-app": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "auth-sms": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    backups: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "bar-chart": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    bell: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    beta: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    blog: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    bold: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    book: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    brackets: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    briefcase: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    building: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "burger-menu": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    calendar: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "calendar-with-time": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    cards: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "cell-tower": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    chat: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "chart-area": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "chart-bar-horizontal": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "chart-donut": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "chart-heatmap": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "chart-scatter": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "chart-stacked-horizontal": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "chart-stacked-vertical": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    check: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "check-in-circle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "chevron-down": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "chevron-left": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "chevron-right": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "chevron-up": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    circle: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    clock: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    cloud: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "cloud-keys": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    code: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "code-in-square": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    connect: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "connect-alt": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    console: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    copy: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    cpu: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    cross: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "credit-card": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    data: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    database: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "data-lakes": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    disk: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    display: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    document: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    dot: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "dots-horizontal": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "dots-triangle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "dots-vertical": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "dots-vertical-double": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "double-check": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    download: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "download-in-circle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    email: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    empty: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    enter: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    eye: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "eye-closed": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    filter: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    fire: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    flag: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    flash: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    flask: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "folder-closed": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "folder-open": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    gear: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    gift: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    globe: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "git-merge": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    hexagon: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    history: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    home: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "horizontal-loading": import('styled-components').StyledComponent<(props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element, import('styled-components').DefaultTheme, {}, never>;
+    http: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "http-monitoring": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "info-in-circle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    information: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "insert-row": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    integrations: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    italic: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    key: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    keys: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    lifebuoy: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "light-bulb": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "light-bulb-on": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    lightening: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "line-in-circle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "list-bulleted": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "list-numbered": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    loading: import('styled-components').StyledComponent<(props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element, import('styled-components').DefaultTheme, {}, never>;
+    "loading-animated": import('styled-components').StyledComponent<(props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element, import('styled-components').DefaultTheme, {}, never>;
+    lock: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "map-pin": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    mcp: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    metrics: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "metrics-alt": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    minus: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    moon: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "no-cloud": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    pause: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    payment: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    pencil: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "pie-chart": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    pipe: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    play: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "play-in-circle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    plug: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    plus: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    popout: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "puzzle-piece": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    query: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    question: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    refresh: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "resize-arrows-horizontal": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "resize-arrows-vertical": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    rocket: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    sandglass: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    search: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    secure: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    server: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    services: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    settings: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    share: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "share-arrow": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "share-network": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    sleep: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "slide-in": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "slide-out": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "sort-alt": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    sort: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    sparkle: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    speaker: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    speed: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    square: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    star: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    stop: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    support: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    table: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    taxi: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "text-slash": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "thumbs-down": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "thumbs-up": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    trash: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "tree-structure": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    underline: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    upgrade: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    upload: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    url: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    user: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    users: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    warning: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    waves: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -0,0 +1,30 @@
+import { SVGAttributes } from 'react';
+import { LogoProps } from '../Logos/Logo';
+import { FlagName, FlagProps } from '../icons/Flags';
+import { LogoName } from '../Logos/types';
+import { PaymentName, PaymentProps } from '../icons/Payments';
+export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type IconState = "default" | "success" | "warning" | "danger" | "info";
+export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "bold", "book", "brackets", "briefcase", "building", "burger-menu", "calendar", "calendar-with-time", "cards", "cell-tower", "chat", "chart-area", "chart-bar-horizontal", "chart-donut", "chart-heatmap", "chart-scatter", "chart-stacked-horizontal", "chart-stacked-vertical", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cpu", "cross", "credit-card", "data", "database", "data-lakes", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "double-check", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flash", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "globe", "hexagon", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "italic", "key", "keys", "lifebuoy", "light-bulb", "light-bulb-on", "lightening", "line-in-circle", "list-bulleted", "list-numbered", "loading", "loading-animated", "lock", "map-pin", "metrics", "metrics-alt", "minus", "mcp", "moon", "no-cloud", "pause", "payment", "pencil", "pie-chart", "pipe", "play", "play-in-circle", "plug", "plus", "popout", "puzzle-piece", "query", "question", "resize-arrows-horizontal", "resize-arrows-vertical", "refresh", "rocket", "sandglass", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "sleep", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "square", "star", "stop", "support", "table", "taxi", "text-slash", "thumbs-up", "thumbs-down", "trash", "tree-structure", "upgrade", "upload", "url", "user", "users", "underline", "warning", "waves"];
+export type IconName = (typeof ICON_NAMES)[number];
+export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
+    /** The name of the icon to display */
+    name: IconName;
+    /** The color of the icon */
+    color?: string;
+    /** The size of the icon */
+    size?: IconSize;
+    /** The visual state of the icon */
+    state?: IconState;
+}
+type NoThemeType = {
+    theme?: never;
+};
+type NoColorType = {
+    color?: never;
+};
+export type ImageName = IconName | LogoName | FlagName | PaymentName;
+export type ImageType = ((Omit<IconProps, "name"> & NoThemeType) | (Omit<LogoProps, "name"> & NoColorType) | (Omit<FlagProps, "name"> & NoThemeType & NoColorType) | (Omit<PaymentProps, "name"> & NoThemeType & NoColorType)) & {
+    name: ImageName;
+};
+export {};

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,13 @@
+import { IconName } from '..';
+import { HTMLAttributes } from 'react';
+export interface IconButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    /** The size of the icon button */
+    size?: "default" | "sm" | "xs";
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** The visual style variant of the button */
+    type?: "primary" | "secondary" | "ghost" | "danger" | "info";
+    /** The icon to display in the button */
+    icon: IconName;
+}
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/IconWrapper/IconWrapper.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { HorizontalDirection, IconName } from '..';
+import { GapOptions } from '../Container/Container';
+import { IconSize } from '../Icon/types';
+interface IconWrapperProps {
+    icon?: IconName;
+    iconDir?: HorizontalDirection;
+    size?: IconSize;
+    width?: number | string;
+    height?: number | string;
+    children: ReactNode;
+    ellipsisContent?: boolean;
+    gap?: GapOptions;
+}
+declare const IconWrapper: ({ icon, iconDir, size, width, height, children, ellipsisContent, gap, ...props }: IconWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export default IconWrapper;

package/dist/components/Input/InputWrapper.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+export interface WrapperProps {
+    className?: string;
+    id: string;
+    label?: ReactNode;
+    labelColor?: string;
+    error?: ReactNode;
+    disabled?: boolean;
+    children: ReactNode;
+    orientation?: "vertical" | "horizontal";
+    dir?: "start" | "end";
+    resize?: "none" | "vertical" | "horizontal" | "both";
+}
+export declare const InputWrapper: ({ className, id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputElement: import('styled-components').StyledComponent<"input", import('styled-components').DefaultTheme, {
+    $hasStartContent?: boolean;
+    $hasEndContent?: boolean;
+}, never>;
+export declare const NumberInputElement: import('styled-components').StyledComponent<"input", import('styled-components').DefaultTheme, {
+    $hasStartContent?: boolean;
+    $hasEndContent?: boolean;
+} & {
+    $hideControls?: boolean;
+}, never>;
+export declare const TextAreaElement: import('styled-components').StyledComponent<"textarea", import('styled-components').DefaultTheme, {}, never>;
+export declare const IconButton: import('styled-components').StyledComponent<"button", import('styled-components').DefaultTheme, {}, never>;
+export declare const IconWrapper: import('styled-components').StyledComponent<"svg", import('styled-components').DefaultTheme, {}, never>;
+export declare const InputStartContent: import('styled-components').StyledComponent<"div", import('styled-components').DefaultTheme, {}, never>;
+export declare const InputEndContent: import('styled-components').StyledComponent<"div", import('styled-components').DefaultTheme, {}, never>;