@skalar-saas/design-system 0.1.67

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

@@ -0,0 +1,203 @@
+import React from 'react';
+import { Button } from '@/shared/ui/Button/Button';
+/**
+ * Modal size options.
+ * @typedef {'sm' | 'md' | 'lg'} ModalSize
+ */
+export type ModalSize = 'sm' | 'md' | 'lg';
+/**
+ * Modal root component. Provides modal context and manages open state.
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - Modal children.
+ * @param {ModalSize} [props.size='md'] - Modal size.
+ * @returns {JSX.Element}
+ */
+declare const Modal: {
+    ({ children, size, }: {
+        children: React.ReactNode;
+        size?: ModalSize;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Component to wrap the element that triggers opening the modal.
+ * @param {Object} props
+ * @param {React.ReactElement} props.children - Trigger element.
+ * @returns {JSX.Element}
+ */
+declare const ModalTrigger: {
+    ({ children }: {
+        children: React.ReactElement<React.HTMLAttributes<HTMLElement>>;
+    }): React.ReactElement<React.HTMLAttributes<HTMLElement>, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+/**
+ * Main modal content container. Handles animations and layout.
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - Modal content.
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element}
+ */
+declare const ModalContent: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Modal header section.
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - Header content.
+ * @param {() => void} [props.onBack] - Optional back button handler.
+ * @param {boolean} [props.disabled] - Disable header actions.
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element}
+ */
+declare const ModalHeader: {
+    ({ children, onBack, disabled, className, }: {
+        children: React.ReactNode;
+        onBack?: () => void;
+        disabled?: boolean;
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Modal title component for accessibility. Use inside ModalHeader.
+ * @param {Object} props
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element}
+ */
+declare const ModalTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * Modal description component for accessibility.
+ * @param {Object} props
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element}
+ */
+declare const ModalDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Modal body/content section.
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - Body content.
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element}
+ */
+declare const ModalBody: {
+    ({ children, className, }: {
+        children: React.ReactNode;
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Modal footer section. Flexible container that accepts any children.
+ *
+ * @example
+ * // Flexible usage with custom layout
+ * <ModalFooter>
+ *   <div className="flex justify-between w-full">
+ *     <ModalClose><Button>Cancel</Button></ModalClose>
+ *     <Button onClick={handleSave}>Save</Button>
+ *   </div>
+ * </ModalFooter>
+ *
+ * @example
+ * // For simple cases, use ModalFooterActions instead
+ * <ModalFooterActions
+ *   cancelButton={{ label: "Cancel" }}
+ *   acceptButton={{ label: "Confirm" }}
+ * />
+ *
+ * @param {Object} props
+ * @param {string} [props.className] - Additional class names.
+ * @param {React.ReactNode} props.children - Footer content. Use any custom layout or components.
+ * @returns {JSX.Element}
+ */
+declare const ModalFooter: {
+    ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Button configuration for ModalFooterActions.
+ */
+interface ModalFooterButtonConfig extends Omit<React.ComponentPropsWithoutRef<typeof Button>, 'onClick'> {
+    /** Button label text */
+    label: string;
+    /** Optional click handler (called before closing modal if closeOnClick is true) */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Whether clicking the button should close the modal. Defaults to true. */
+    closeOnClick?: boolean;
+}
+/**
+ * Convenience component for common modal footer patterns with preset button layouts.
+ * Provides responsive behavior: full-width buttons on sm modals, fixed-width on md/lg.
+ *
+ * Use this when you need a simple, standard footer with cancel/accept actions.
+ * For custom layouts or complex footers, use ModalFooter with custom children.
+ *
+ * @example
+ * // Simple confirmation dialog
+ * <ModalFooterActions
+ *   cancelButton={{ label: "Cancel" }}
+ *   acceptButton={{ label: "Confirm" }}
+ * />
+ *
+ * @example
+ * // Custom styling and click handlers
+ * <ModalFooterActions
+ *   cancelButton={{
+ *     label: "No",
+ *     variant: "neutral",
+ *     onClick: () => console.log('Cancelled')
+ *   }}
+ *   acceptButton={{
+ *     label: "Yes, Delete",
+ *     variant: "danger",
+ *     onClick: handleDelete,
+ *     closeOnClick: false  // Handle close manually after async operation
+ *   }}
+ * />
+ *
+ * @example
+ * // With back button (only visible on md/lg modals)
+ * <ModalFooterActions
+ *   backButton={{ label: "Back", onClick: () => setStep(step - 1), closeOnClick: false }}
+ *   cancelButton={{ label: "Cancel" }}
+ *   acceptButton={{ label: "Next" }}
+ * />
+ *
+ * @param {Object} props
+ * @param {ModalFooterButtonConfig} [props.backButton] - Optional back button configuration.
+ * @param {ModalFooterButtonConfig} [props.cancelButton] - Optional cancel button configuration.
+ * @param {ModalFooterButtonConfig} [props.acceptButton] - Optional accept/primary button configuration.
+ * @param {string} [props.className] - Additional class names for the footer container.
+ * @returns {JSX.Element}
+ */
+declare const ModalFooterActions: {
+    ({ backButton, cancelButton, acceptButton, className, }: {
+        backButton?: ModalFooterButtonConfig;
+        cancelButton?: ModalFooterButtonConfig;
+        acceptButton?: ModalFooterButtonConfig;
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Component to wrap an element that closes the modal on click.
+ * @param {Object} props
+ * @param {React.ReactElement} props.children - Close trigger element.
+ * @returns {JSX.Element}
+ */
+declare const ModalClose: {
+    ({ children }: {
+        children: React.ReactElement<React.HTMLAttributes<HTMLElement>>;
+    }): React.ReactElement<React.HTMLAttributes<HTMLElement>, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+/**
+ * Modal component exports.
+ */
+export { Modal, ModalTrigger, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalBody, ModalFooter, ModalFooterActions, ModalClose, };
+/**
+ * Type exports for ModalFooterActions configuration.
+ */
+export type { ModalFooterButtonConfig };

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

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

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

@@ -0,0 +1,51 @@
+import React from 'react';
+export interface ModuleCardHeaderProps {
+    /** Module name/title displayed in the header */
+    title?: string;
+    /** Callback when settings icon is clicked */
+    onSettingsClick?: () => void;
+    /** Additional CSS classes for the header */
+    className?: string;
+    /** Whether to show the settings button */
+    showSettings?: boolean;
+}
+/**
+ * ModuleCardHeader - Header section of a module card
+ *
+ * Displays the module icon, title, and optional settings button.
+ * Used as the drag handle when inside a draggable context.
+ */
+export declare const ModuleCardHeader: React.FC<ModuleCardHeaderProps>;
+export interface ModuleCardProps {
+    /** Module name/title for the header */
+    title?: string;
+    /** Callback when settings icon is clicked */
+    onSettingsClick?: () => void;
+    /** Whether to show the settings button in header */
+    showSettings?: boolean;
+    /** Content to render inside the card body */
+    children?: React.ReactNode;
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Minimum width of the card */
+    minWidth?: number;
+    /** Maximum width of the card */
+    maxWidth?: number;
+    /** Empty state content when no children */
+    emptyState?: React.ReactNode;
+}
+/**
+ * ModuleCard - Container card for displaying module fields
+ *
+ * A structured card component with header and body sections.
+ * The header includes a drag handle class for integration with drag libraries.
+ *
+ * @example
+ * ```tsx
+ * <ModuleCard title="Users" onSettingsClick={handleSettings}>
+ *   <ModuleFieldItem type="text" label="Name" />
+ *   <ModuleFieldItem type="email" label="Email" />
+ * </ModuleCard>
+ * ```
+ */
+export declare const ModuleCard: React.FC<ModuleCardProps>;

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

@@ -0,0 +1 @@
+export { ModuleCard, ModuleCardHeader, type ModuleCardProps, type ModuleCardHeaderProps, } from './ModuleCard';

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

@@ -0,0 +1,53 @@
+import React from 'react';
+export interface ModuleFieldItemProps {
+    /** Field type label (e.g., "Texto", "Email", "Number") */
+    type: string;
+    /** Field name/label */
+    label?: string;
+    /** Description text below the type */
+    description?: string;
+    /** Whether the item is selected */
+    isSelected?: boolean;
+    /** Whether this is the last item (hides bottom border) */
+    isLast?: boolean;
+    /** Callback when the item is clicked */
+    onClick?: () => void;
+    /** Callback when delete button is clicked */
+    onDelete?: () => void;
+    /** Whether to show action buttons (drag handle, delete) */
+    showActions?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Props to spread on the drag handle (for dnd-kit integration) */
+    dragHandleProps?: React.HTMLAttributes<HTMLDivElement>;
+    /** Ref for sortable integration */
+    innerRef?: React.Ref<HTMLDivElement>;
+    /** Style object (for transform during drag) */
+    style?: React.CSSProperties;
+}
+/**
+ * ModuleFieldItem - A single field row in a module card
+ *
+ * Pure UI component that displays a field with type, label, and optional actions.
+ * On hover, action icons slide in from the left with a smooth animation.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ModuleFieldItem
+ *   type="Texto"
+ *   label="Username"
+ *   onClick={() => handleFieldClick('username')}
+ * />
+ *
+ * // With sortable (in consuming app)
+ * const { attributes, listeners, setNodeRef } = useSortable({ id: field.id });
+ * <ModuleFieldItem
+ *   type={field.type}
+ *   label={field.label}
+ *   innerRef={setNodeRef}
+ *   dragHandleProps={{ ...attributes, ...listeners }}
+ * />
+ * ```
+ */
+export declare const ModuleFieldItem: React.ForwardRefExoticComponent<ModuleFieldItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { ModuleFieldItem, type ModuleFieldItemProps } from './ModuleFieldItem';

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

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface PanelHeaderProps {
+    /** Title text displayed in the header */
+    title: string;
+    /** Optional back button configuration */
+    backButton?: {
+        onClick: () => void;
+        'aria-label'?: string;
+    };
+    /** Optional actions to display on the right side (icons, menus, etc.) */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * PanelHeader - Standardized header for panels
+ *
+ * Provides consistent styling across all panel headers:
+ * - Height: 56px (fixed via h-14)
+ * - Typography: Inter Semi Bold, 14px
+ * - Border: bottom border with surface-3 color
+ * - Supports optional back button and right-side actions
+ *
+ * @example
+ * // Simple header with title only
+ * <PanelHeader title="Types" />
+ *
+ * @example
+ * // Header with back button and actions
+ * <PanelHeader
+ *   title="Data"
+ *   backButton={{ onClick: handleBack }}
+ *   actions={<ContextualMenu ... />}
+ * />
+ */
+export declare const PanelHeader: React.FC<PanelHeaderProps>;
+export default PanelHeader;

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

@@ -0,0 +1 @@
+export { PanelHeader, type PanelHeaderProps } from './PanelHeader';

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

@@ -0,0 +1,19 @@
+import React from "react";
+export interface PasswordResetWidgetProps {
+    /** Title displayed in the widget header. Defaults to "Recuperación" */
+    title?: string;
+    /** Actions displayed in the widget header. Pass `null` to hide. Defaults to settings button */
+    actions?: React.ReactNode | null;
+    /** Callback when password reset is submitted */
+    onSubmit?: (password: string, confirmPassword: string) => void;
+    /** Callback when back to login is clicked */
+    onBackToLogin?: () => void;
+    /** Callback when settings button is clicked */
+    onSettings?: () => void;
+    /** Optional className for the widget container */
+    className?: string;
+}
+/**
+ * Password Reset Widget - A complete password reset form in a widget container
+ */
+export declare const PasswordResetWidget: ({ title, actions, onSubmit, onBackToLogin, onSettings, className, }: PasswordResetWidgetProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+export type ProductIconType = 'default' | 'brand' | 'danger' | 'success';
+export type ProductIconSize = 'lg' | 'md' | 'sm';
+export type ProductIconVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+export interface ProductIconProps {
+    type?: ProductIconType;
+    size?: ProductIconSize;
+    variant?: ProductIconVariant;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * @file A styled container for displaying product or feature icons.
+ * @description The ProductIcon component is a wrapper that provides a consistent, themeable
+ * background and container for an icon passed as its child. Its appearance is determined
+ * by a combination of `type` (color scheme), `variant` (visual style), and `size`.
+ *
+ * @param {ProductIconType} [type='default'] - The color theme of the icon container.
+ * @param {ProductIconSize} [size='lg'] - The physical size of the icon container (sm: 34px, md: 56px, lg: 80px).
+ * @param {ProductIconVariant} [variant='primary'] - The visual style (e.g., filled, bordered).
+ * @param {React.ReactNode} children - The icon component to be rendered inside.
+ * @param {string} [className] - Optional custom CSS classes for additional styling.
+ * @returns {JSX.Element} The rendered ProductIcon element.
+ */
+export declare const ProductIcon: ({ type, size, variant, children, className, }: ProductIconProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,29 @@
+/**
+ * Defines the display variant for the progress percentage.
+ * - "none": No percentage display
+ * - "inline": Percentage displayed inline on the right of the bar
+ * - "below": Percentage displayed below the bar with text-right alignment
+ * - "tooltip": Percentage displayed in a custom CSS tooltip at the end of the progress bar on hover
+ */
+type ProgressVariant = "none" | "inline" | "below" | "tooltip";
+/**
+ * Defines the props for the Progress component.
+ */
+interface ProgressProps {
+    progress: number;
+    className?: string;
+    variant?: ProgressVariant;
+}
+/**
+ * A versatile progress bar component for displaying completion status.
+ *
+ * This component displays a horizontal progress bar with optional percentage display
+ * support for multiple display variants and is fully accessible with ARIA attributes.
+ *
+ * @param {number} progress - The current progress value as a percentage (0-100).
+ * @param {string} [className] - Additional CSS classes to apply to the progress bar container.
+ * @param {ProgressVariant} [variant="none"] - Display variant for the progress percentage.
+ * @returns {JSX.Element} The rendered progress bar element.
+ */
+export declare const Progress: ({ progress, className, variant, ...props }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { Progress } from "./Progress";

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

@@ -0,0 +1,21 @@
+/**
+ * Defines the props for the ProgressBar component.
+ */
+interface ProgressBarProps {
+    progress: number;
+    className?: string;
+    description?: string;
+}
+/**
+ * A versatile progress bar component for displaying completion status.
+ *
+ * This component displays a horizontal progress bar with a circular indicator
+ * support for optional description text and is fully accessible with ARIA attributes.
+ *
+ * @param {number} progress - The current progress value as a percentage (0-100).
+ * @param {string} [description] - Optional description text to display below the progress bar.
+ * @param {string} [className] - Additional CSS classes to apply to the progress bar container.
+ * @returns {JSX.Element} The rendered progress bar element.
+ */
+export declare const ProgressBar: ({ progress, description, className, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { ProgressBar } from "./ProgressBar";

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

@@ -0,0 +1,44 @@
+/**
+ * Size variants for ProgressCircle component
+ */
+type ProgressSize = "xs" | "sm" | "md" | "lg";
+/**
+ * Color variants for ProgressCircle component
+ */
+type ProgressVariant = "primary";
+/**
+ * Shape variants for ProgressCircle component
+ */
+type ProgressShape = "circle" | "half-circle";
+/**
+ * Defines props for ProgressCircle component.
+ */
+interface ProgressCircleProps {
+    progress: number;
+    size?: ProgressSize;
+    variant?: ProgressVariant;
+    shape?: ProgressShape;
+    showLabel?: boolean;
+    label?: string;
+    className?: string;
+    ariaLabel?: string;
+    id?: string;
+}
+/**
+ * A versatile progress circle component for displaying completion status.
+ *
+ * This component displays a circular progress indicator with support for
+ * different sizes, colors, shapes, and optional label display. It is fully accessible
+ * with ARIA attributes and follows the project's design system.
+ *
+ * @param {number} progress - The current progress value as a percentage (0-100).
+ * @param {ProgressSize} [size='md'] - Size variant of progress circle.
+ * @param {ProgressVariant} [variant='primary'] - Color variant of progress circle.
+ * @param {ProgressShape} [shape='circle'] - Shape variant of progress circle.
+ * @param {boolean} [showLabel=true] - Whether to show progress label inside/under circle.
+ * @param {string} [label] - Custom label text to display instead of percentage.
+ * @param {string} [className] - Additional CSS classes to apply to the progress circle container.
+ * @returns {JSX.Element} The rendered progress circle element.
+ */
+export declare const ProgressCircle: ({ progress, size, variant, shape, showLabel, label, className, ariaLabel, id, ...props }: ProgressCircleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,47 @@
+/**
+ * Defines the display variant for the progress percentage.
+ * - "none": No percentage display
+ * - "inline": Percentage displayed inline on the right of the bar
+ * - "below": Percentage displayed below the bar with text-right alignment
+ * - "tooltip": Percentage displayed in a tooltip when hovering over the progress bar (uses Radix UI)
+ */
+type ProgressVariant = "none" | "inline" | "below" | "tooltip";
+/**
+ * Defines the props for the ProgressCustomTooltip component.
+ */
+interface ProgressCustomTooltipProps {
+    progress: number;
+    className?: string;
+    isActive?: boolean;
+    variant?: ProgressVariant;
+}
+/**
+ * A versatile progress bar component for displaying completion status.
+ *
+ * This component displays a horizontal progress bar with optional percentage display
+ * support for multiple display variants and is fully accessible with ARIA attributes.
+ *
+ * @example
+ * // No percentage display
+ * <ProgressCustomTooltip progress={75} variant="none" />
+ *
+ * @example
+ * // Inline percentage
+ * <ProgressCustomTooltip progress={75} variant="inline" />
+ *
+ * @example
+ * // Below percentage
+ * <ProgressCustomTooltip progress={75} variant="below" />
+ *
+ * @example
+ * // Tooltip on hover - shows percentage when hovering over the progress bar (Radix UI)
+ * <ProgressCustomTooltip progress={75} variant="tooltip" />
+ *
+ * @param {number} progress - The current progress value as a percentage (0-100).
+ * @param {string} [className] - Additional CSS classes to apply to the progress bar container.
+ * @param {boolean} [isActive] - Whether this progress bar represents the currently active step.
+ * @param {ProgressVariant} [variant="none"] - Display variant for the progress percentage.
+ * @returns {JSX.Element} The rendered progress bar element.
+ */
+export declare const ProgressCustomTooltip: ({ progress, className, isActive, variant, ...props }: ProgressCustomTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { ProgressCustomTooltip } from "./ProgressCustomTooltip";

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

@@ -0,0 +1,36 @@
+/**
+ * Props for the ProgressTracker component
+ */
+interface ProgressTrackerProps {
+    /** Current step number (1-based index) */
+    currentStep: number;
+    /** Total number of steps */
+    totalSteps: number;
+    /** Optional progress percentage for the current step (0-100). If not provided, current step shows as 50% */
+    currentStepProgress?: number;
+    /** Optional descriptions for each step */
+    stepDescriptions?: string[];
+    title?: string;
+    subtitle?: string;
+    collapsed?: boolean;
+    onToggleCollapse?: (collapsed: boolean) => void;
+    onClose?: () => void;
+    /** If true, only displays the progress circle without other elements */
+    onlyProgressCircle?: boolean;
+    className?: string;
+}
+/**
+ * A versatile progress tracker component that displays multiple progress indicators
+ * with both collapsed and expanded states, following shadcn/ui design principles.
+ *
+ * @param {number} currentStep - Current step number (1-based)
+ * @param {number} totalSteps - Total number of steps
+ * @param {number} [currentStepProgress] - Optional progress for current step (0-100)
+ * @param {string[]} [stepDescriptions] - Optional descriptions for each step
+ * @param {string} [title] - Optional title displayed in expanded state
+ * @param {string} [subtitle] - Optional subtitle displayed in expanded state
+ * @param {string} [className] - Additional CSS classes
+ * @returns {JSX.Element} The rendered progress tracker component
+ */
+export declare const ProgressTracker: ({ currentStep, totalSteps, currentStepProgress, stepDescriptions, title, subtitle, className, collapsed: collapsedProp, onToggleCollapse, onClose, onlyProgressCircle, }: ProgressTrackerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,23 @@
+import React from "react";
+export interface LabelIconItem {
+    icon: React.ReactNode;
+    label: string;
+}
+export interface ActionButton {
+    icon: React.ReactNode;
+    onClick: () => void;
+    ariaLabel?: string;
+}
+export interface ProjectActionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    subtitle: string;
+    image: string;
+    imageAlt?: string;
+    actionButtons?: ActionButton[];
+    labelIcons?: LabelIconItem[];
+}
+/**
+ * A component for displaying a support card with a title, subtitle, and action buttons.
+ * Each button can have an icon, label, and custom variant/hierarchy styling.
+ */
+export declare const ProjectActionCard: ({ className, title, subtitle, image, imageAlt, actionButtons, labelIcons, ...props }: ProjectActionCardProps) => import("react/jsx-runtime").JSX.Element;

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

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