@skalar-saas/design-system 0.1.67

package/dist/shared/ui/ContextualMenu/ContextualMenu.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+/**
+ * Represents a single menu item in the contextual menu.
+ */
+export interface MenuItem {
+    /** Unique identifier for the menu item */
+    id: string;
+    /** Display label for the menu item */
+    label: string;
+    /** Optional icon component to display before the label */
+    icon?: React.ReactNode;
+    /** Callback fired when the menu item is clicked */
+    onClick: () => void;
+    /** Whether this is a destructive action (renders in red) */
+    destructive?: boolean;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+}
+/**
+ * Defines the public API for the ContextualMenu component.
+ */
+export interface ContextualMenuProps {
+    /** Array of menu items to display */
+    items: MenuItem[];
+    /** The trigger button element */
+    trigger: React.ReactNode;
+    /** Optional custom CSS classes for the container */
+    className?: string;
+    /** Alignment of the menu relative to the trigger */
+    align?: 'left' | 'right';
+    /** Offset from the trigger in pixels */
+    offset?: number;
+}
+/**
+ * @file A contextual menu component that displays a list of actions.
+ * @description This component renders a dropdown menu that appears when clicking
+ * a trigger element. It supports icons, destructive actions (shown in red), and
+ * automatic positioning. The menu closes when clicking outside or selecting an item.
+ *
+ * @param {MenuItem[]} items - Array of menu items to display
+ * @param {React.ReactNode} trigger - The element that triggers the menu
+ * @param {string} [className] - Optional CSS classes for the container
+ * @param {'left' | 'right'} [align='right'] - Menu alignment relative to trigger
+ * @param {number} [offset=8] - Distance from trigger in pixels
+ * @returns {JSX.Element} The rendered ContextualMenu component
+ */
+export declare const ContextualMenu: ({ items, trigger, className, align, offset, }: ContextualMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/ContextualMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { ContextualMenu } from './ContextualMenu';
+export type { ContextualMenuProps, MenuItem } from './ContextualMenu';

package/dist/shared/ui/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,47 @@
+import { DateRange } from "react-day-picker";
+import "react-day-picker/style.css";
+import "./DateRangePicker.css";
+export type { DateRange } from "react-day-picker";
+export type PickType = 'range' | 'single';
+/**
+ * Props for the DateRangePicker component
+ */
+export interface DateRangePickerProps {
+    /** Currently selected date range */
+    selected?: DateRange;
+    /** Callback fired when the date selection changes */
+    onSelect?: (range: DateRange | undefined) => void;
+    /** If true, disables the date picker */
+    disabled?: boolean;
+    /** Callback fired when the cancel button is clicked */
+    onCancel?: () => void;
+    /** Callback fired when the accept button is clicked */
+    onAccept?: (range: DateRange | undefined) => void;
+    /** If true, displays two months side by side */
+    extraMonth?: boolean;
+    /** Selection mode: 'range' for date ranges, 'single' for single dates */
+    pickType?: PickType;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label for the cancel button */
+    cancelLabel?: string;
+    /** Label for the accept button */
+    acceptLabel?: string;
+}
+/**
+ * DateRangePicker - A simple calendar UI component for date selection
+ *
+ * Features:
+ * - Range or single date selection
+ * - Built-in Cancel and Accept buttons
+ * - Optional dual-month display
+ *
+ * @example
+ * <DateRangePicker
+ *   selected={dateRange}
+ *   onSelect={setDateRange}
+ *   onAccept={(range) => console.log(range)}
+ *   pickType="range"
+ * />
+ */
+export declare const DateRangePicker: ({ selected: selectedProp, onSelect, disabled, onCancel, onAccept, extraMonth, pickType, className, cancelLabel, acceptLabel, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/DateRangePicker/index.d.ts

@@ -0,0 +1 @@
+export { DateRangePicker, type DateRange, type PickType, type DateRangePickerProps } from './DateRangePicker';

package/dist/shared/ui/Divider/Divider.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface DividerProps {
+    direction?: 'horizontal' | 'vertical';
+    width?: string;
+    height?: string;
+    className?: string;
+}
+export declare const Divider: React.FC<DividerProps>;

package/dist/shared/ui/Divider/index.d.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from './Divider';

package/dist/shared/ui/DragAndDropListItem/DragAndDropListItem.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+export type DragAndDropListItemState = 'default' | 'hover' | 'active' | 'drag' | 'disabled';
+/**
+ * Defines the public API for the DragAndDropListItem component.
+ */
+export interface DragAndDropListItemProps {
+    /** The main text label displayed in the center. */
+    children: React.ReactNode;
+    /** The content to display inside the tooltip. If not provided, the right icon will be displayed without a tooltip. */
+    tooltipContent?: React.ReactNode;
+    /** The icon to trigger the tooltip on the right. Defaults to a question mark icon. */
+    icon?: React.ReactNode;
+    /** Optional custom Tailwind CSS class for the right icon's color (e.g., 'text-danger-500'). */
+    iconColor?: string;
+    /** The icon displayed on the left (drag handle). Defaults to PlusCircleIcon. */
+    leadingIcon?: React.ReactNode;
+    /** Optional custom Tailwind CSS class for the left icon's color (e.g., 'text-disabled'). */
+    leadingIconColor?: string;
+    /** Size for both icons in pixels. Defaults to 20. */
+    iconSize?: number;
+    /** Optional custom classes for the main container. */
+    className?: string;
+    /** Optional custom classes for the label text. Will override default text styles. */
+    labelClassName?: string;
+    /** Font size for the label. Accepts Tailwind sizes ('xs', 'sm', etc.) or custom values ('14px', '1.5rem', etc.). Defaults to 'sm'. */
+    fontSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | string;
+    /** Font weight for the label. Defaults to 'semibold'. */
+    fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    /** Text color for the label. Defaults to 'text-med-em'. */
+    textColor?: string;
+    /** Optional click handler for the entire item. */
+    onClick?: () => void;
+    /** The interactive state of the item. */
+    state?: DragAndDropListItemState;
+}
+/**
+ * @file A drag and drop list item component with leading icon, label, and tooltip.
+ * @description This component displays a bordered container with an icon on the left,
+ * text label in the center, and a tooltip icon on the right. Designed for use in sortable/draggable lists.
+ * Built on top of Radix UI's Tooltip for robust accessibility and positioning.
+ *
+ * @param {React.ReactNode} children - The main text label.
+ * @param {React.ReactNode} tooltipContent - The content to be shown inside the tooltip.
+ * @param {React.ReactNode} [icon] - An optional custom icon component to trigger the tooltip.
+ * @param {string} [iconColor='text-disabled'] - An optional Tailwind CSS class to customize the icon's color.
+ * @param {string} [className] - Optional custom classes for the main container.
+ * @param {string} [labelClassName] - Optional custom classes for the label text (overrides defaults).
+ * @param {'xs' | 'sm' | 'base' | 'lg' | 'xl'} [fontSize='sm'] - Font size for the label.
+ * @param {'normal' | 'medium' | 'semibold' | 'bold'} [fontWeight='semibold'] - Font weight for the label.
+ * @param {string} [textColor=''] - Text color for the label.
+ * @param {DragAndDropListItemState} [state='default'] - The interactive state of the item.
+ * @returns {JSX.Element} The rendered DragAndDropListItem element.
+ */
+export declare const DragAndDropListItem: React.MemoExoticComponent<({ children, tooltipContent, icon, iconColor, leadingIcon, leadingIconColor, iconSize, className, labelClassName, fontSize, fontWeight, textColor, onClick, state, }: DragAndDropListItemProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/shared/ui/DragAndDropListItem/index.d.ts

@@ -0,0 +1,2 @@
+export { DragAndDropListItem } from './DragAndDropListItem';
+export type { DragAndDropListItemProps } from './DragAndDropListItem';

package/dist/shared/ui/DropMenu/DropMenu.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ListItemProps, ListItemSize } from '../ListItem/ListItem';
+export type DropMenuSize = ListItemSize;
+/**
+ * Represents a single item in the DropMenu
+ */
+export interface DropMenuItemProps extends ListItemProps {
+    /** Unique identifier for the item */
+    id?: string;
+    /** Show a divider after this item */
+    showDividerAfter?: boolean;
+}
+/**
+ * Defines the public API for the DropMenu component
+ */
+export interface DropMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Array of items to display in the menu */
+    items: DropMenuItemProps[];
+    /** Optional header configuration (displays a minimal ListItem with only title) */
+    header?: {
+        title: string;
+    };
+    /** Size for the header (defaults to 'xs' for compact display) */
+    headerSize?: DropMenuSize;
+    /** Size to apply to all child ListItems */
+    size?: DropMenuSize;
+    /** Array of selected item IDs (for controlled selection) */
+    selectedIds?: string[];
+    /** Callback when an item is selected */
+    onSelect?: (id: string) => void;
+    /** If true, uses absolute positioning for dropdown behavior */
+    floating?: boolean;
+    /** Additional CSS classes for the container */
+    className?: string;
+}
+/**
+ * @file A dropdown menu component that displays a list of ListItem components
+ * @description This component renders a vertical menu container that can include:
+ * - Optional header (minimal ListItem with only title)
+ * - Multiple ListItem components with customizable props
+ * - Optional dividers between specific items
+ * - Selection management with controlled state
+ * - Absolute/floating positioning support
+ *
+ * The component acts as a static container (always visible) that composes ListItem
+ * components with consistent styling and behavior.
+ *
+ * @param {DropMenuItemProps[]} items - Array of items to display (required)
+ * @param {object} [header] - Optional header with title
+ * @param {DropMenuSize} [headerSize='xs'] - Size for the header (defaults to 'xs' for compact display)
+ * @param {DropMenuSize} [size='md'] - Size to apply to all ListItems
+ * @param {string[]} [selectedIds] - Array of selected item IDs
+ * @param {Function} [onSelect] - Callback when item is selected
+ * @param {boolean} [floating=false] - If true, uses absolute positioning
+ * @param {string} [className] - Additional CSS classes
+ * @returns {JSX.Element} The rendered DropMenu element
+ */
+export declare const DropMenu: ({ items, header, headerSize, size, selectedIds, onSelect, floating, className, ...props }: DropMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/DropMenu/index.d.ts

@@ -0,0 +1 @@
+export { DropMenu, type DropMenuProps, type DropMenuItemProps, type DropMenuSize } from './DropMenu';

package/dist/shared/ui/DropZone/DropZone.d.ts

@@ -0,0 +1,47 @@
+import React, { CSSProperties } from 'react';
+export interface DropZoneProps {
+    /**
+     * Whether the drop zone is currently being hovered over during drag
+     * @default false
+     */
+    isOver?: boolean;
+    /**
+     * Height when the drop zone is active (being hovered)
+     * @default '56px'
+     */
+    activeHeight?: string | number;
+    /**
+     * Height when the drop zone is inactive
+     * @default '0px'
+     */
+    inactiveHeight?: string | number;
+    /**
+     * Duration of the expand/collapse animation in milliseconds
+     * @default 150
+     */
+    transitionDuration?: number;
+    /**
+     * Timing function for the animation
+     * @default 'ease-out'
+     */
+    transitionTimingFunction?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: CSSProperties;
+    /**
+     * Ref callback for drag-and-drop library integration
+     * Pass this to your drag library's drop ref (e.g., dnd-kit's setNodeRef)
+     */
+    dropRef?: (node: HTMLDivElement | null) => void;
+    /**
+     * Optional ID for the drop zone (useful for drag library data)
+     */
+    id?: string;
+}
+export declare const DropZone: React.NamedExoticComponent<DropZoneProps>;
+export default DropZone;

package/dist/shared/ui/DropZone/index.d.ts

@@ -0,0 +1,2 @@
+export { DropZone } from './DropZone';
+export type { DropZoneProps } from './DropZone';

package/dist/shared/ui/Dropdown/Dropdown.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { DropMenuItemProps } from '../DropMenu/DropMenu';
+type DropdownVariant = 'default' | 'danger' | 'outlined';
+type DropdownSize = 'sm' | 'md';
+/**
+ * Defines the shape for a single item in the dropdown list (extends DropMenuItemProps).
+ */
+export interface DropdownItemProps extends DropMenuItemProps {
+    /** Unique identifier for the item (required) */
+    id: string;
+}
+/**
+ * Defines the public API for the Dropdown component.
+ */
+export interface DropdownProps {
+    /** The visual variant of the dropdown, used for different states. */
+    variant?: DropdownVariant;
+    /** The size of the dropdown. */
+    size?: DropdownSize;
+    /** The size of the dropdown menu (defaults to the dropdown size if not provided). */
+    menuSize?: DropdownSize;
+    /** The text label displayed above the dropdown. */
+    label?: string;
+    /** Helper text or an error message displayed below the dropdown. */
+    hint?: string;
+    /** An array of items to populate the dropdown. */
+    items: DropdownItemProps[];
+    /** A string for the initial, unselected option. */
+    placeholder?: string;
+    /** If true, the dropdown will be non-interactive. */
+    disabled?: boolean;
+    /** Optional custom CSS classes for additional styling. */
+    className?: string;
+    /** The currently selected item ID. */
+    value?: string;
+    /** Callback fired when an item is selected. */
+    onChange: (id: string) => void;
+    /** The id attribute for the dropdown button, used for associating the label. */
+    id?: string;
+    /** Optional custom height override. Accepts any CSS value (e.g., '12px', '48px', '3rem'). */
+    customHeight?: string;
+    /** Optional custom border radius override. Accepts any CSS value (e.g., '4px', '8px', '1rem'). */
+    customRadius?: string;
+    /** Optional custom placeholder color. Accepts Tailwind color classes (e.g., 'text-placeholder'). */
+    customPlaceholderColor?: string;
+    /** Optional custom background color. Accepts Tailwind color classes (e.g., 'bg-white') or CSS color values. */
+    customBackgroundColor?: string;
+    /** Optional leading icon to display at the start of the dropdown button. Defaults to Category icon if not provided. */
+    leadingIcon?: React.ReactNode;
+    /** If true, hides the leading icon completely. */
+    showLeadingIcon?: boolean;
+}
+/**
+ * @file A dropdown component that renders ListItems for rich option display.
+ * @description This component provides a button trigger that opens a floating menu
+ * with ListItem components, allowing for complex option layouts with icons, descriptions, tags, etc.
+ *
+ * @param {DropdownVariant} [variant='default'] - The color theme of the dropdown.
+ * @param {DropdownSize} [size='md'] - The size of the dropdown.
+ * @param {DropdownItemProps[]} items - The array of items (extends ListItemProps).
+ * @param {string | undefined} value - The currently selected item ID.
+ * @param {(id: string) => void} onChange - Callback fired when an item is selected.
+ * @returns {JSX.Element} The rendered Dropdown element.
+ */
+export declare const Dropdown: ({ variant, size, menuSize, label, hint, items, disabled, placeholder, className, value, onChange, id, customHeight, customRadius, customPlaceholderColor, customBackgroundColor, leadingIcon, showLeadingIcon, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export { Dropdown, type DropdownProps, type DropdownItemProps } from './Dropdown';

package/dist/shared/ui/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Menu } from "@headlessui/react";
+declare function DropdownMenu({ children, ...props }: React.ComponentProps<typeof Menu>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ as: AsComponent, className, ...props }: React.ComponentProps<"button"> & {
+    as?: React.ElementType;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset: _sideOffset, children, ...props }: Omit<React.ComponentProps<"div">, "ref"> & {
+    sideOffset?: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ children, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, children, disabled, ...props }: React.ComponentProps<"button"> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, disabled, ...props }: React.ComponentProps<"button"> & {
+    checked?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ children, className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, value: _value, checked, disabled, ...props }: React.ComponentProps<"button"> & {
+    checked?: boolean;
+    value?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, children, ...props }: React.ComponentProps<"div"> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ children, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<"button"> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, children, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItemContent({ icon, label }: {
+    icon?: React.ReactNode;
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItemContent, };

package/dist/shared/ui/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,46 @@
+import React, { Component, ReactNode } from 'react';
+export interface ErrorBoundaryProps {
+    /**
+     * Name of the component being wrapped (for logging/debugging)
+     */
+    componentName?: string;
+    /**
+     * Fallback UI to render when an error is caught
+     */
+    fallback?: ReactNode;
+    /**
+     * Callback function called when an error is caught
+     */
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+    /**
+     * Title for the default fallback UI
+     * @default 'Something went wrong'
+     */
+    defaultTitle?: string;
+    /**
+     * Message for the default fallback UI
+     * @default 'An error occurred while rendering this component.'
+     */
+    defaultMessage?: string;
+    /**
+     * Label for the retry button in default fallback UI
+     * @default 'Try again'
+     */
+    retryLabel?: string;
+    /**
+     * Children to render
+     */
+    children: ReactNode;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    resetError: () => void;
+    render(): ReactNode;
+}
+export default ErrorBoundary;

package/dist/shared/ui/ErrorBoundary/index.d.ts

@@ -0,0 +1,2 @@
+export { ErrorBoundary } from './ErrorBoundary';
+export type { ErrorBoundaryProps } from './ErrorBoundary';

package/dist/shared/ui/ErrorState/ErrorState.d.ts

@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react';
+export interface ErrorStateProps {
+    /**
+     * Error icon or emoji to display
+     * @default '⚠️'
+     */
+    icon?: ReactNode;
+    /**
+     * Error title/heading
+     * @default 'Something went wrong'
+     */
+    title?: string;
+    /**
+     * Error message/description
+     */
+    message?: string;
+    /**
+     * Error object for technical details (shown in dev mode only)
+     */
+    error?: Error;
+    /**
+     * Callback for retry action
+     */
+    onRetry?: () => void;
+    /**
+     * Label for the retry button
+     * @default 'Retry'
+     */
+    retryLabel?: string;
+    /**
+     * Whether to show error details in production
+     * @default false (only shows in development)
+     */
+    showDetailsInProduction?: boolean;
+    /**
+     * Additional CSS classes for the container
+     */
+    className?: string;
+    /**
+     * Whether to center the error state vertically
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * Maximum width of the error content
+     * @default 'max-w-sm'
+     */
+    maxWidth?: string;
+}
+export declare const ErrorState: React.NamedExoticComponent<ErrorStateProps>;
+export default ErrorState;

package/dist/shared/ui/ErrorState/index.d.ts

@@ -0,0 +1,2 @@
+export { ErrorState } from './ErrorState';
+export type { ErrorStateProps } from './ErrorState';

package/dist/shared/ui/FloatingBar/FloatingBar.d.ts

@@ -0,0 +1,92 @@
+import React from "react";
+import { ButtonHierarchy, ButtonSize, ButtonVariant } from "../Button/Button";
+import { DropMenuSize } from "../DropMenu/DropMenu";
+/**
+ * Dropdown item for FloatingBar
+ */
+export type FloatingBarDropdownItem = {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    destructive?: boolean;
+    showDividerAfter?: boolean;
+};
+/**
+ * Base action properties
+ */
+type BaseAction = {
+    id: string;
+    label?: string;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    isActive?: boolean;
+    disabled?: boolean;
+    /** Button variant - defaults to 'brand' */
+    variant?: ButtonVariant;
+    /** Button hierarchy - defaults to 'primary' */
+    hierarchy?: ButtonHierarchy;
+    /** Button size - defaults to 'sm' */
+    size?: ButtonSize;
+    /** Custom className for the button */
+    className?: string;
+};
+/**
+ * Button action (default type)
+ */
+type ButtonAction = BaseAction & {
+    type?: "button";
+    onClick: () => void;
+};
+/**
+ * Dropdown action with items
+ */
+type DropdownAction = BaseAction & {
+    type: "dropdown";
+    items: FloatingBarDropdownItem[];
+    /** DropMenu size - defaults to 'sm' */
+    dropMenuSize?: DropMenuSize;
+    /** Custom className for the DropMenu */
+    dropMenuClassName?: string;
+    /** Custom color for destructive items - defaults to 'text-danger-em' */
+    destructiveColor?: string;
+    /** Show description in dropdown items - defaults to false */
+    showDescription?: boolean;
+    /** Show trailing icon in dropdown items - defaults to false */
+    showTrailingIcon?: boolean;
+    /** Show trailing text in dropdown items - defaults to false */
+    showTrailingText?: boolean;
+    /** Show tag in dropdown items - defaults to false */
+    showTag?: boolean;
+    /** Show checkbox in dropdown items - defaults to false */
+    showCheckbox?: boolean;
+};
+export type Action = ButtonAction | DropdownAction;
+/**
+ * FloatingBar component props
+ */
+interface FloatingBarProps {
+    /** Array of action groups. Each group is an array of actions that will be visually connected */
+    groups: Action[][];
+    /** Optional custom CSS classes for the container */
+    className?: string;
+    /** Optional width for the bar */
+    width?: string | number;
+    /** Optional height for the bar */
+    height?: string | number;
+}
+/**
+ * @file A floating container component for displaying groups of primary actions.
+ * @description The FloatingBar is a data-driven component that takes an array of action groups
+ * and renders them as visually separated button groups. Each group can contain buttons and/or dropdowns.
+ * Groups are rendered with spacing between them, while buttons within a group are visually connected.
+ *
+ * @param {Action[][]} groups - Array of action groups. Each group is an array of actions.
+ * @param {string} [className] - Optional CSS classes to apply to the bar's container.
+ * @param {string | number} [width] - An optional width for the bar.
+ * @param {string | number} [height] - An optional height for the bar.
+ * @returns {JSX.Element} The rendered FloatingBar element.
+ */
+export declare const FloatingBar: ({ groups, className, width, height, }: FloatingBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/FloatingBar/index.d.ts

@@ -0,0 +1 @@
+export { FloatingBar, type Action } from './FloatingBar';

package/dist/shared/ui/FormFieldGroup/FormFieldGroup.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface FormFieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    onAction?: (action: "maximize" | "grid" | "add" | "copy" | "trash" | "addWidget") => void;
+}
+/**
+ * A component for displaying widget builder item hover action with an icon, title, and description.
+ * Includes a button group with predefined actions.
+ */
+export declare const FormFieldGroup: ({ className, onAction, children, ...props }: FormFieldGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/FormFieldGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { FormFieldGroup } from './FormFieldGroup';
+export type { FormFieldGroupProps } from './FormFieldGroup';

package/dist/shared/ui/GridDraggableItem/GridDraggableItem.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+/**
+ * Props interface for the GridDraggableItem component.
+ */
+export interface GridDraggableItemProps {
+    /**
+     * Icon to display at the center (can be any icon from iconsax-react or custom component)
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional text label displayed below the icon
+     */
+    text?: string;
+    /**
+     * Optional callback fired when the item is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Optional custom CSS classes
+     */
+    className?: string;
+}
+/**
+ * GridDraggableItem - A compact draggable item component for grid layouts.
+ *
+ * Features:
+ * - Fixed dimensions: 70px width × 60px height
+ * - Centered icon (20px) and optional text
+ * - Visual feedback with cursor-grab
+ * - Designed to be used within drag-and-drop grid systems
+ *
+ * @example
+ * ```tsx
+ * // With icon and text
+ * <GridDraggableItem
+ *   icon={<Home2 />}
+ *   text="Home"
+ *   onClick={() => console.log('clicked')}
+ * />
+ *
+ * // Icon only
+ * <GridDraggableItem icon={<Setting2 />} />
+ * ```
+ */
+export declare const GridDraggableItem: React.FC<GridDraggableItemProps>;