@skalar-saas/design-system 0.1.67

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

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

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

@@ -0,0 +1,36 @@
+import React from "react";
+type JustifyContent = "start" | "center" | "end" | "between" | "around" | "evenly";
+type AlignItems = "start" | "center" | "end" | "baseline" | "stretch";
+type HeaderSize = "sm" | "md" | "lg";
+type LogoVariant = "with-text" | "no-text";
+export type LogoVisibility = "always" | "desktop" | "none";
+interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    gap?: number;
+    justify?: JustifyContent;
+    align?: AlignItems;
+    children?: React.ReactNode;
+}
+export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    bordered?: boolean;
+    size?: HeaderSize;
+    logoVariant?: LogoVariant;
+    /** Control logo visibility: "always" (default), "desktop" (hidden on mobile/tablet), "none" */
+    showLogo?: LogoVisibility;
+    children?: React.ReactNode;
+    logoSectionGap?: number;
+    /** Fixed width for left section in percentage. If not provided, uses flex layout */
+    leftWidth?: number;
+    /** Fixed width for center section in percentage. If not provided, uses flex layout */
+    centerWidth?: number;
+    /** Fixed width for right section in percentage. If not provided, uses flex layout */
+    rightWidth?: number;
+    /** Whether center section should have full height. Default: true */
+    centerFullHeight?: boolean;
+}
+export declare const Header: {
+    (props: HeaderProps): import("react/jsx-runtime").JSX.Element;
+    LeftContent: React.FC<SectionProps>;
+    Center: React.FC<SectionProps>;
+    Right: React.FC<SectionProps>;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export { Header, type HeaderProps, type LogoVisibility } from './Header';
+export { calculateHeaderWidths } from './useCalculateHeaderWidths';

package/dist/shared/ui/Header/useCalculateHeaderWidths.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Calculate header section widths from panel state with fallback for closed sides
+ *
+ * @param panels - Panel state object with left and right arrays containing open panels with width percentages
+ * @param widthSideFallback - Fallback width percentage when a side has no open panels (default: 20)
+ * @returns Object with leftWidth, centerWidth, and rightWidth percentages (or all undefined if no panels are open)
+ *
+ * @example
+ * // Both panels closed
+ * calculateHeaderWidths(panels) // { leftWidth: undefined, centerWidth: undefined, rightWidth: undefined }
+ *
+ * // Left closed, right open at 33%
+ * calculateHeaderWidths(panels, 20) // { leftWidth: 20, centerWidth: 47, rightWidth: 33 }
+ *
+ * // Both open at 25% and 33%
+ * calculateHeaderWidths(panels) // { leftWidth: 25, centerWidth: 42, rightWidth: 33 }
+ */
+export declare function calculateHeaderWidths(panels: {
+    left: Array<{
+        open: boolean;
+        width: number;
+    }>;
+    right: Array<{
+        open: boolean;
+        width: number;
+    }>;
+}, widthSideFallback?: number): {
+    leftWidth?: number;
+    centerWidth?: number;
+    rightWidth?: number;
+};

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

@@ -0,0 +1,36 @@
+/**
+ * Defines the shape for a single header tab's data
+ */
+export interface HeaderTabItem {
+    id: number | string;
+    label: string;
+    /** Whether this tab can be closed/removed */
+    closeable?: boolean;
+}
+/**
+ * Props for the HeaderTabs component
+ */
+export interface HeaderTabsProps {
+    /** Array of tab objects to be rendered */
+    tabs: HeaderTabItem[];
+    /** Optional custom classes for the container */
+    className?: string;
+    /** The index of the selected tab */
+    selectedIndex?: number;
+    /** Callback fired when a tab is selected */
+    onChange?: (index: number) => void;
+    /** Callback fired when the add button is clicked */
+    onAddTab?: () => void;
+    /** Callback fired when the arrow right button is clicked */
+    onArrowRightClick?: () => void;
+    /** Callback fired when a tab close is requested */
+    onCloseTab?: (index: number) => void;
+    /** Fixed width for each tab in pixels. If not provided, tabs will be flex */
+    tabWidth?: number;
+    /** Distance in pixels to scroll when clicking pagination arrows. Default: 300 */
+    scrollDistance?: number;
+}
+export declare const HeaderTabs: {
+    ({ tabs, className, selectedIndex, onChange, onAddTab, onArrowRightClick, onCloseTab, tabWidth, scrollDistance, }: HeaderTabsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,2 @@
+export { HeaderTabs } from './HeaderTabs';
+export type { HeaderTabsProps, HeaderTabItem } from './HeaderTabs';

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

@@ -0,0 +1,37 @@
+import React from 'react';
+export type IconSize = 'xs' | 'sm' | 'sm-md' | 'md' | 'md-lg' | 'lg' | 'xl' | '2xl';
+/**
+ * Defines the public API for the Icon component.
+ */
+export interface IconProps {
+    /** The size of the icon or image. Can be a predefined size or a custom number in pixels. */
+    size?: IconSize | number;
+    /** Icon component to render (from iconsax-react or similar). */
+    children?: React.ReactNode;
+    /** Color to apply to the icon (only for icon components, not images). */
+    color?: string;
+    /** Image URL to display instead of an icon component. */
+    imageUrl?: string;
+    /** Alt text for the image (only applies when imageUrl is provided). */
+    alt?: string;
+    /** Optional custom CSS classes. */
+    className?: string;
+}
+/**
+ * @file A versatile icon component that supports both icon components and images.
+ * @description This component can render either:
+ * 1. Icon components (from iconsax-react) with configurable size and color
+ * 2. Images with configurable size and fixed 12px border-radius
+ *
+ * If an image fails to load, it falls back to the InfoCircle icon.
+ * If neither children nor imageUrl is provided, it renders InfoCircle as default.
+ *
+ * @param {IconSize} [size='md'] - The size of the icon or image.
+ * @param {React.ReactNode} [children] - The icon component to render.
+ * @param {string} [color='currentColor'] - The color to apply to icon components.
+ * @param {string} [imageUrl] - URL of the image to display.
+ * @param {string} [alt='Icon'] - Alt text for images.
+ * @param {string} [className] - Additional CSS classes.
+ * @returns {JSX.Element | null} The rendered Icon element.
+ */
+export declare const Icon: ({ size, children, color, imageUrl, alt, className, }: IconProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export * from './Icon';

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

@@ -0,0 +1,38 @@
+import React from 'react';
+export type ImageUploaderVariant = 'default';
+export type ImageUploaderSize = 'sm' | 'md' | 'lg';
+/**
+ * Defines the public API for the ImageUploader component.
+ */
+export interface ImageUploaderProps {
+    /** Callback fired when an image is selected. */
+    onImageSelected: (file: File) => void;
+    /** The visual variant of the image uploader. */
+    variant?: ImageUploaderVariant;
+    /** The size of the image uploader. */
+    size?: ImageUploaderSize;
+    /** Optional custom CSS classes for additional styling. */
+    className?: string;
+    /** The accepted file types for the input. */
+    acceptedFileTypes?: string;
+    /** Maximum file size in bytes. */
+    maxFileSize?: number;
+    /** Helper text or an error message displayed below the uploader. */
+    hint?: string;
+    /** If true, the uploader will be non-interactive. */
+    disabled?: boolean;
+    /** Preview image URL to display initially. */
+    initialPreviewUrl?: string;
+}
+/**
+ * @file A reusable image uploader component with drag-and-drop functionality and preview.
+ * @description This component provides an intuitive interface for uploading images with
+ * both drag-and-drop and file browser capabilities. It includes image preview and follows
+ * the same design patterns as other components in the codebase.
+ *
+ * @param {ImageUploaderVariant} [variant='default'] - The layout variant of the uploader.
+ * @param {ImageUploaderSize} [size='md'] - The size of the uploader.
+ * @param {(file: File) => void} onImageSelected - Callback fired when an image is selected.
+ * @returns {JSX.Element} The rendered ImageUploader element.
+ */
+export declare const ImageUploader: React.FC<ImageUploaderProps>;

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

@@ -0,0 +1 @@
+export * from './ImageUploader';

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

@@ -0,0 +1,28 @@
+import React from 'react';
+type InfoLabelVariant = 'default' | 'danger' | 'success';
+export interface InfoLabelProps {
+    /** The variant of the info label */
+    variant?: InfoLabelVariant;
+    /** The title text */
+    title: string;
+    /** The description text */
+    description: string;
+    /** Custom icon component (defaults to InfoCircle) */
+    icon?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * @file An informational label component with customizable variants.
+ * @description This component displays an icon, title, and description in a styled container.
+ * It supports different visual states through the variant prop.
+ *
+ * @param {InfoLabelVariant} [variant='default'] - The visual variant of the info label.
+ * @param {string} title - The title text to display.
+ * @param {string} description - The description text to display.
+ * @param {React.ReactNode} [icon] - Custom icon component (defaults to InfoCircle from iconsax).
+ * @param {string} [className] - Additional CSS classes for custom styling.
+ * @returns {JSX.Element} The rendered InfoLabel element.
+ */
+export declare const InfoLabel: ({ variant, title, description, icon, className, }: InfoLabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,55 @@
+import React from 'react';
+type InputFieldVariant = 'default' | 'outlined' | 'danger' | 'success';
+type HintIconVariant = 'Bold' | 'Outline' | 'TwoTone' | 'Bulk' | 'Broken';
+export type InputFieldSize = 'sm' | 'md' | 'lg';
+/**
+ * Defines the public API for the InputField component, extending standard input element attributes.
+ */
+export interface InputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    variant?: InputFieldVariant;
+    size?: InputFieldSize;
+    hintIconVariant?: HintIconVariant;
+    label?: string;
+    hint?: string;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    leadingIconColor?: string;
+    trailingIconColor?: string;
+    customBackground?: string;
+    placeholderColor?: string;
+    multiline?: boolean;
+    customFontWeight?: number;
+    /** Optional font size override. Accepts Tailwind size classes (e.g., 'xs', 'sm', 'md', 'lg') or pixel values (e.g., '12px', '16px'). */
+    fontSize?: string;
+    /** Optional custom font size override. Accepts Tailwind size classes (e.g., 'xs', 'sm', 'md', 'lg') or pixel values (e.g., '12px', '16px'). Alias for fontSize. */
+    customFontSize?: string;
+    /** Optional callback executed when clicking anywhere on the field. Prevents default input focus behavior. */
+    onInputClick?: () => void;
+}
+/**
+ * @file A versatile and themeable input field component for forms.
+ * @description This component renders a complete input field unit, including a label,
+ * the input itself, optional leading/trailing icons, and hint text. Its appearance is
+ * controlled by the `variant` prop, which pulls styles from a centralized configuration object.
+ * For password fields (type="password"), a toggle visibility button is automatically added.
+ *
+ * @param {InputFieldVariant} [variant='default'] - The visual variant of the input field (default, outlined, danger, success).
+ * @param {InputFieldSize} [size='md'] - The size variant of the input field (sm, md, lg).
+ * @param {string} [label] - The text label displayed above the input.
+ * @param {string} [hint] - Helper text or an error message displayed below the input.
+ * @param {React.ReactNode} [leadingIcon] - An optional icon to display at the start of the input.
+ * @param {React.ReactNode} [trailingIcon] - An optional icon to display at the end of the input.
+ * @param {string} [leadingIconColor] - Custom color class for the leading icon (e.g., 'text-high-em', 'text-primary-900').
+ * @param {string} [trailingIconColor] - Custom color class for the trailing icon (e.g., 'text-high-em', 'text-primary-900').
+ * @param {string} [customBackground] - Custom background color (supports CSS color values or CSS variable names like 'gray-50', 'med-em').
+ * @param {string} [placeholderColor] - Custom placeholder color class.
+ * @param {boolean} [multiline] - If true, renders as a textarea with auto-resize.
+ * @param {number} [customFontWeight] - Custom font weight (numeric value like 400, 500, 600, 700, etc.). Overrides default weight.
+ * @param {string} [fontSize] - Optional font size override. Accepts Tailwind size classes (e.g., 'xs', 'sm', 'md', 'lg') or pixel values (e.g., '12px', '16px').
+ * @param {string} [customFontSize] - Optional custom font size override. Accepts Tailwind size classes (e.g., 'xs', 'sm', 'md', 'lg') or pixel values (e.g., '12px', '16px'). Alias for fontSize.
+ * @param {() => void} [onInputClick] - Optional callback executed when clicking anywhere on the field container. Prevents default input focus behavior. Changes cursor to pointer when defined.
+ * @param {boolean} [disabled] - If true, the input will be visually disabled and non-interactive.
+ * @returns {JSX.Element} The rendered InputField element.
+ */
+export declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export {};

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

@@ -0,0 +1 @@
+export { InputField, type InputFieldProps, type InputFieldSize } from './InputField';

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

@@ -0,0 +1,44 @@
+import React from "react";
+/**
+ * Props for the InputSearch component
+ */
+export interface InputSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    /** Callback triggered when a search is initiated (Enter key or search icon click) */
+    onSearch?: (value: string) => void;
+    /** Milliseconds for search debouncing (default: 300ms) */
+    debounceMs?: number;
+    /** Indicates if the input is in a loading state */
+    isLoading?: boolean;
+    /** If true, shows a button to clear the input */
+    showClearButton?: boolean;
+    /** Error message to show conditionally */
+    errorMessage?: string;
+    /** Array of search suggestions for autocomplete */
+    suggestions?: string[];
+    /** Callback triggered when a suggestion is clicked */
+    onSuggestionClick?: (suggestion: string) => void;
+    /** Placeholder for the search input (default: "Search...") */
+    placeholder?: string;
+    /** Value of the input */
+    value?: string;
+    /** Handler for changes */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Default value: false */
+    disabled?: boolean;
+    /** Standard input attributes */
+    id?: string;
+    name?: string;
+    autoComplete?: string;
+    maxLength?: number;
+    required?: boolean;
+    /** Validation events */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onInvalid?: (e: React.FormEvent<HTMLInputElement>) => void;
+    /** Default value: "Search" */
+    "aria-label"?: string;
+}
+/**
+ * InputSearch component with search, debounce, and autocomplete functionality
+ */
+export declare const InputSearch: React.ForwardRefExoticComponent<InputSearchProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1 @@
+export { InputSearch, type InputSearchProps } from './InputSearch';

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export type KbdSize = 'sm' | 'md';
+export interface KbdProps {
+    children: React.ReactNode;
+    size?: KbdSize;
+    className?: string;
+}
+export declare const Kbd: ({ children, size, className }: KbdProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Kbd } from './Kbd';
+export type { KbdProps, KbdSize } from './Kbd';

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { IconSize } from '@/shared/ui/Icon/Icon';
+export type LabelSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
+export interface LabelIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The icon component or element to display */
+    icon?: React.ReactNode;
+    /** The label text to display */
+    label?: React.ReactNode;
+    /** Gap between icon and label (Tailwind spacing: 1-12) */
+    gap?: number;
+    /** Alignment of items */
+    align?: 'start' | 'center' | 'end';
+    /** Icon size using Icon component sizes */
+    iconSize?: IconSize;
+    /** Label size - Tailwind text size class */
+    labelSize?: LabelSize;
+    /** Icon color class (e.g., 'text-low-em', 'text-high-em') */
+    iconColorClass?: string;
+    /** Label color class (e.g., 'text-low-em', 'text-high-em') */
+    labelColorClass?: string;
+}
+/**
+ * A modular component for displaying an icon with a label.
+ * Completely customizable via className and composition.
+ */
+export declare const LabelIcon: ({ icon, label, gap, align, iconSize, labelSize, iconColorClass, labelColorClass, className, children, ...props }: LabelIconProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { LabelIcon } from './LabelIcon';
+export type { LabelIconProps, LabelSize } from './LabelIcon';

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

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface LabelWithIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The icon component to display on the left. */
+    icon: React.ReactNode;
+    /** The text label to display on the right. */
+    children: React.ReactNode;
+    /** If true, applies styles for an active/selected state. */
+    isActive?: boolean;
+    /** Optional custom font size override. Accepts Tailwind size classes (e.g., 'xs', 'sm', 'md', 'lg') or pixel values (e.g., '12px', '16px'). */
+    customFontSize?: string;
+    /** Optional custom icon size override. Accepts numeric values (e.g., 16, 20, 24). */
+    customIconSize?: number;
+}
+/**
+ * @file An interactive component that pairs an icon with a text label.
+ * @description This component renders a clickable button, typically used as a list item
+ * in navigation menus or sidebars. It supports an active state to indicate the
+ * current selection and allows for customizable spacing between the icon and text.
+ *
+ * @param {React.ReactNode} icon - The icon component to display.
+ * @param {React.ReactNode} children - The text label for the item.
+ * @param {boolean} [isActive=false] - If true, applies the active/selected styles.
+ * @param {string} [customFontSize] - Optional custom font size override. Accepts Tailwind size classes (e.g., 'xs', 'sm', 'md', 'lg') or pixel values (e.g., '12px', '16px').
+ * @param {number} [customIconSize] - Optional custom icon size override. Accepts numeric values (e.g., 16, 20, 24).
+ * @returns {JSX.Element} The rendered LabelWithIcon element.
+ */
+export declare const LabelWithIcon: ({ icon, children, isActive, className, customFontSize, customIconSize, ...props }: LabelWithIconProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { LabelWithIcon, type LabelWithIconProps } from './LabelWithIcon';

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

@@ -0,0 +1,41 @@
+import React from 'react';
+/**
+ * Defines the public API for the LabelWithTooltip component.
+ */
+export interface LabelWithTooltipProps {
+    /** The label text content. */
+    children: React.ReactNode;
+    /** The content to display inside the tooltip. */
+    tooltipContent: React.ReactNode;
+    /** The icon to trigger the tooltip. Defaults to a question mark icon. */
+    icon?: React.ReactNode;
+    /** Optional custom Tailwind CSS class for the icon's color (e.g., 'text-danger-500'). */
+    iconColor?: string;
+    /** Optional custom classes for the label text. */
+    labelClassName?: string;
+    /** Optional custom classes for the container. */
+    className?: string;
+    /** Optional custom font size override. Accepts Tailwind size classes (e.g., 'xs', 'sm', 'md', 'lg') or pixel values (e.g., '12px', '16px'). */
+    customFontSize?: string;
+    /** Optional custom icon size override. Accepts numeric values (e.g., 16, 20, 24). */
+    customIconSize?: number;
+}
+/**
+ * @file A simple label with an adjacent tooltip icon.
+ * @description This component displays a text label with a small tooltip icon next to it.
+ * When the user hovers over the icon, a tooltip with additional information appears.
+ * Built on top of Radix UI's Tooltip for robust accessibility and positioning.
+ *
+ * Designed to be used inline with form fields, headings, or any text that needs contextual help.
+ *
+ * @param {React.ReactNode} children - The label text.
+ * @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-low-em'] - An optional Tailwind CSS class to customize the icon's color.
+ * @param {string} [labelClassName] - Optional custom classes for the label text.
+ * @param {string} [className] - Optional custom classes for the container.
+ * @param {string} [customFontSize] - Optional custom font size override. Accepts Tailwind size classes (e.g., 'xs', 'sm', 'md', 'lg') or pixel values (e.g., '12px', '16px').
+ * @param {number} [customIconSize] - Optional custom icon size override. Accepts numeric values (e.g., 16, 20, 24).
+ * @returns {JSX.Element} The rendered LabelWithTooltip element.
+ */
+export declare const LabelWithTooltip: ({ children, tooltipContent, icon, iconColor, labelClassName, className, customFontSize, customIconSize, }: LabelWithTooltipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { LabelWithTooltip, type LabelWithTooltipProps } from './LabelWithTooltip';

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

@@ -0,0 +1,39 @@
+import React from 'react';
+type LinkVariant = 'neutral' | 'info';
+type LinkSize = 'xs' | 'sm' | 'md' | 'lg';
+type TrailingIconPosition = 'inline' | 'end';
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    variant?: LinkVariant;
+    size?: LinkSize;
+    disabled?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    /** If true, shows the leading icon */
+    showLeadingIcon?: boolean;
+    /** If true, shows the trailing icon */
+    showTrailingIcon?: boolean;
+    /** Position of the trailing icon: 'inline' (next to text) or 'end' (aligned to container end) */
+    trailingIconPosition?: TrailingIconPosition;
+    /** If true, disables the underline that appears on hover */
+    disableUnderline?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * @file A styled link component for navigation and actions.
+ * @description This component renders a semantic `<a>` tag with support for different themes,
+ * sizes, and states. It features optional leading and trailing icons.
+ *
+ * @param {LinkVariant} [variant='neutral'] - The color theme of the link.
+ * @param {LinkSize} [size='md'] - The font size and spacing of the link.
+ * @param {boolean} [disabled=false] - If true, the link will be visually disabled and non-interactive.
+ * @param {React.ReactNode} [leadingIcon] - Custom leading icon component.
+ * @param {React.ReactNode} [trailingIcon] - Custom trailing icon component.
+ * @param {boolean} [showLeadingIcon=true] - If true, shows the leading icon.
+ * @param {boolean} [showTrailingIcon=true] - If true, shows the trailing icon.
+ * @param {TrailingIconPosition} [trailingIconPosition='inline'] - Position of trailing icon: 'inline' (next to text) or 'end' (aligned to container end).
+ * @param {boolean} [disableUnderline=false] - If true, disables the underline that appears on hover.
+ * @param {React.ReactNode} children - The text content of the link.
+ * @returns {JSX.Element} The rendered Link element.
+ */
+export declare const Link: ({ variant, size, disabled, leadingIcon, trailingIcon, showLeadingIcon, showTrailingIcon, trailingIconPosition, disableUnderline, children, className, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { Link } from './Link';

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { TagProps } from '../Tag/Tag';
+export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * Defines the public API for the ListItem component
+ */
+export interface ListItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+    /** The size of the list item */
+    size?: ListItemSize;
+    /** If true, the list item will be non-interactive */
+    disabled?: boolean;
+    /** Show/hide optional elements (all default to true) */
+    showCheckbox?: boolean;
+    showLeadingImage?: boolean;
+    showLeadingIcon?: boolean;
+    showDescription?: boolean;
+    showTrailingIcon?: boolean;
+    showTag?: boolean;
+    showTrailingText?: boolean;
+    /** Content props */
+    title: string;
+    description?: string;
+    /** Custom color class for title (e.g., 'text-low-em', 'text-success-main') */
+    customTitleColor?: string;
+    /** Custom background color class (e.g., 'bg-surface-1', 'bg-success-accent-1') */
+    customBackgroundColor?: string;
+    /** Custom hover background color class (e.g., 'hover:bg-surface-2', 'hover:bg-success-accent-2') */
+    customHoverColor?: string;
+    /** Custom color for leading icon (e.g., 'var(--danger-em)', '#DE2424') */
+    customLeadingIconColor?: string;
+    /** Checkbox props */
+    checked?: boolean;
+    indeterminate?: boolean;
+    onCheckboxChange?: (checked: boolean) => void;
+    /** Icon/Image props */
+    leadingImageUrl?: string;
+    leadingImageAlt?: string;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    /** Tag props */
+    tagContent?: string;
+    tagVariant?: TagProps['variant'];
+    /** Trailing text */
+    trailingText?: string;
+    /** Custom className for middle container */
+    middleContainerClassName?: string;
+}
+/**
+ * @file A versatile list item component that composes multiple UI elements
+ * @description This component renders a horizontal list item that can contain:
+ * - Optional checkbox
+ * - Optional leading image or icon
+ * - Title and description (title required)
+ * - Optional trailing icon
+ * - Optional tag
+ * - Optional trailing text
+ *
+ * The component is always rendered as a button and handles hover/active/disabled states automatically.
+ *
+ * @param {ListItemSize} [size='md'] - The size of the list item (affects height and all child components)
+ * @param {boolean} [disabled=false] - If true, the list item will be non-interactive
+ * @param {string} title - The main title text (required)
+ * @param {string} [description] - Optional description text below the title
+ * @param {boolean} [showCheckbox=true] - Show/hide checkbox
+ * @param {boolean} [showLeadingImage=true] - Show/hide leading image
+ * @param {boolean} [showLeadingIcon=true] - Show/hide leading icon
+ * @param {boolean} [showTrailingIcon=true] - Show/hide trailing icon
+ * @param {boolean} [showTag=true] - Show/hide tag
+ * @param {boolean} [showTrailingText=true] - Show/hide trailing text
+ * @returns {JSX.Element} The rendered ListItem element
+ */
+export declare const ListItem: ({ size, disabled, showCheckbox, showLeadingImage, showLeadingIcon, showDescription, showTrailingIcon, showTag, showTrailingText, title, description, customTitleColor, customBackgroundColor, customHoverColor, customLeadingIconColor, checked, indeterminate, onCheckboxChange, leadingImageUrl, leadingImageAlt, leadingIcon, trailingIcon, tagContent, tagVariant, trailingText, className, middleContainerClassName, onClick, ...props }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

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

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