@campxdev/react-blueprint 3.0.0-alpha.5 → 3.0.0-alpha.6

package/dist/esm/types/src/components/Navigation/Stepper/Stepper.d.ts

@@ -2,35 +2,80 @@ import React from 'react';
 import HorizontalStepper from './HorizontalStepper';
 import VerticalStepper from './VerticalStepper';
 /**
- * Interface for individual step items
+ * Interface for individual step items in the stepper
  */
 export interface StepItem {
-    /** The label text for the step */
+    /** The label text displayed for this step */
     label: string;
-    /** Optional description text shown below the label */
+    /** Optional description text shown below the label for additional context */
     description?: string;
 }
 /**
- * Props for the Stepper Variant components
+ * Props for the Stepper variant components (HorizontalStepper and VerticalStepper)
  */
 export interface StepperVariantProps {
-    /** Current active step index (0-based) */
+    /** Current active step index (0-based). Determines which step is highlighted */
     activeStep: number;
     /** Array of step items with labels and optional descriptions */
     steps: StepItem[];
-    /** Additional className for the container */
+    /** Additional CSS class names for the stepper container element */
     containerClassName?: string;
-    /** Callback function called when a step is clicked. Receives the step index as parameter */
+    /** Callback function fired when a step is clicked. Receives the step index (0-based) as parameter */
     onStepClick?: (stepIndex: number) => void;
-    /** Whether to allow navigation by clicking on steps. Defaults to true */
+    /** Whether to allow users to navigate by clicking on steps. Defaults to true */
     allowNavigation?: boolean;
 }
+/**
+ * Props for the Stepper component
+ */
 export type StepperProps = StepperVariantProps & {
-    /** Orientation of the stepper - horizontal or vertical */
+    /** Orientation of the stepper layout - 'horizontal' displays steps left-to-right, 'vertical' displays top-to-bottom. Defaults to 'horizontal' */
     orientation?: 'vertical' | 'horizontal';
 };
 /**
- * Main Stepper component that handles both horizontal and vertical orientations
+ * Stepper component that displays a progress indicator with multiple steps.
+ *
+ * This is a wrapper component that renders either HorizontalStepper or VerticalStepper
+ * based on the orientation prop. It provides a visual representation of progress through
+ * a sequence of steps, with optional click handlers for step navigation.
+ *
+ * @component
+ * @param {StepperProps} props - The component props
+ * @param {number} props.activeStep - Index of the currently active step (0-based)
+ * @param {StepItem[]} props.steps - Array of steps with label and optional description
+ * @param {'horizontal' | 'vertical'} [props.orientation='horizontal'] - Layout orientation
+ * @param {string} [props.containerClassName] - Optional CSS classes for the container
+ * @param {(stepIndex: number) => void} [props.onStepClick] - Callback when a step is clicked
+ * @param {boolean} [props.allowNavigation=true] - Whether clicking on steps navigates between them
+ *
+ * @returns {React.ReactElement} A HorizontalStepper or VerticalStepper component
+ *
+ * @example
+ * // Horizontal stepper (default)
+ * <Stepper
+ *   activeStep={1}
+ *   steps={[
+ *     { label: 'Step 1', description: 'Enter details' },
+ *     { label: 'Step 2', description: 'Confirm' },
+ *     { label: 'Step 3', description: 'Complete' }
+ *   ]}
+ *   onStepClick={(index) => setActiveStep(index)}
+ * />
+ *
+ * @example
+ * // Vertical stepper with custom styling
+ * <Stepper
+ *   orientation="vertical"
+ *   activeStep={2}
+ *   steps={[
+ *     { label: 'Personal Info' },
+ *     { label: 'Address' },
+ *     { label: 'Payment' },
+ *     { label: 'Review' }
+ *   ]}
+ *   containerClassName="bg-gray-50 p-6 rounded"
+ *   allowNavigation={false}
+ * />
  */
 declare const Stepper: React.FC<StepperProps>;
 export { HorizontalStepper, VerticalStepper };

package/dist/esm/types/src/components/Navigation/TabsContainer/TabsContainer.d.ts

@@ -1,19 +1,99 @@
+/**
+ * Configuration for an individual tab in TabsContainer
+ */
 interface CustomTabProps {
+    /** Unique identifier for the tab. Can be string or number */
     key: string | number;
+    /** Display label or React element for the tab trigger */
     label: React.ReactNode;
+    /** React component or element to render when this tab is active */
     component: React.ReactNode;
+    /** Whether to show a highlight indicator (dot) on the tab trigger. Defaults to false */
     highlight?: boolean;
+    /** Whether the tab is disabled and cannot be selected. Defaults to false */
     disabled?: boolean;
+    /** Optional icon or React element to display before the label */
     icon?: React.ReactNode;
 }
+/**
+ * Props for the TabsContainer component
+ */
 export interface TabsContainerProps {
+    /** Array of tab configurations with labels, content, and optional metadata */
     tabs: CustomTabProps[];
+    /** Optional callback fired when a tab is selected. Receives the tab key as parameter */
     onTabChange?: (tabKey: string) => void;
+    /** Index of the tab to show initially. Defaults to 0 (first tab) */
     currentTabIndex?: number;
+    /** Optional CSS class names for the Tabs root element */
     className?: string;
+    /** Optional CSS class names for the TabsList container */
     tabsListClassName?: string;
+    /** Optional CSS class names for each TabsTrigger element */
     tabsTriggerClassName?: string;
+    /** Layout variant - 'fixed' uses viewport height, 'dynamic' uses content height. Defaults to 'fixed' */
     variant?: 'fixed' | 'dynamic';
 }
+/**
+ * TabsContainer component that displays tabbed content with a tab list and content area.
+ *
+ * This component provides a responsive tab interface with support for icons, highlights,
+ * disabled states, and two layout modes (fixed height for viewport or dynamic height for content).
+ * It manages tab selection state and provides callbacks for external state management.
+ *
+ * @component
+ * @param {TabsContainerProps} props - The component props
+ * @param {CustomTabProps[]} props.tabs - Array of tab configurations
+ * @param {(tabKey: string) => void} [props.onTabChange] - Callback when a tab is selected
+ * @param {number} [props.currentTabIndex=0] - Initially active tab index
+ * @param {string} [props.className] - CSS classes for the Tabs root
+ * @param {string} [props.tabsListClassName] - CSS classes for the TabsList
+ * @param {string} [props.tabsTriggerClassName] - CSS classes for TabsTrigger elements
+ * @param {'fixed' | 'dynamic'} [props.variant='fixed'] - Layout mode for tab content
+ *
+ * @returns {React.ReactElement} A Tabs component with tab list and content area
+ *
+ * @example
+ * // Basic tabs
+ * <TabsContainer
+ *   tabs={[
+ *     { key: 'tab1', label: 'Overview', component: <OverviewPanel /> },
+ *     { key: 'tab2', label: 'Details', component: <DetailsPanel /> },
+ *   ]}
+ *   onTabChange={(key) => console.log('Selected:', key)}
+ * />
+ *
+ * @example
+ * // Tabs with icons and highlights
+ * <TabsContainer
+ *   tabs={[
+ *     {
+ *       key: 'notifications',
+ *       label: 'Notifications',
+ *       icon: <BellIcon />,
+ *       component: <NotificationsList />,
+ *       highlight: unreadCount > 0
+ *     },
+ *     {
+ *       key: 'settings',
+ *       label: 'Settings',
+ *       icon: <SettingsIcon />,
+ *       component: <SettingsPanel />
+ *     },
+ *   ]}
+ *   variant="dynamic"
+ *   className="min-h-screen"
+ * />
+ *
+ * @example
+ * // Tabs with disabled state
+ * <TabsContainer
+ *   tabs={[
+ *     { key: 'basic', label: 'Basic Info', component: <BasicForm /> },
+ *     { key: 'advanced', label: 'Advanced', component: <AdvancedForm />, disabled: !basicComplete },
+ *   ]}
+ *   currentTabIndex={0}
+ * />
+ */
 export declare const TabsContainer: ({ tabs, onTabChange, currentTabIndex, className, tabsListClassName, tabsTriggerClassName, variant, }: TabsContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/components/Navigation/UploadDialog/UploadDialog.d.ts

@@ -1,14 +1,78 @@
 import { ReactNode } from 'react';
+/**
+ * Props for the UploadDialog component
+ */
 export type UploadDialogProps = {
+    /** Function that renders the dialog trigger element. Receives open callback to open the dialog */
     anchor: (props: {
         open: () => void;
     }) => ReactNode;
+    /** Optional callback fired when the dialog opens */
     onDialogOpen?: () => void;
+    /** Optional callback fired when the dialog closes */
     onDialogClose?: () => void;
+    /** Title displayed in the dialog header. Defaults to 'Upload File' */
     title?: string;
+    /** Optional URL to a sample file for download */
     sampleFileUrl?: string;
+    /** Callback function fired when the Upload Now button is clicked. Receives single File or File[] */
     onUpload: (file: File | File[]) => void;
+    /** HTML accept attribute value for the file input (e.g., '.pdf,.doc', 'image/*'). Defaults to all files */
     acceptFileType?: string;
+    /** Whether the upload is currently in progress. Defaults to false */
     loading?: boolean;
 };
+/**
+ * UploadDialog component that provides a file upload interface with preview and download sample options.
+ *
+ * This component manages file selection, displays selected file previews with delete capability,
+ * and provides options to download sample files. It supports loading states and file type filtering.
+ * The upload is triggered via an anchor element (trigger) that's configurable.
+ *
+ * @component
+ * @param {UploadDialogProps} props - The component props
+ * @param {(props: { open: () => void }) => ReactNode} props.anchor - Render function for the trigger element
+ * @param {(file: File | File[]) => void} props.onUpload - Callback when upload button is clicked
+ * @param {string} [props.title='Upload File'] - Dialog header title
+ * @param {string} [props.sampleFileUrl] - URL to download a sample file
+ * @param {string} [props.acceptFileType] - File type filter for the input (e.g., '.pdf', 'image/*')
+ * @param {boolean} [props.loading=false] - Whether upload is in progress
+ * @param {() => void} [props.onDialogOpen] - Callback when dialog opens
+ * @param {() => void} [props.onDialogClose] - Callback when dialog closes
+ *
+ * @returns {React.ReactElement} A fragment with the anchor element and Upload Dialog
+ *
+ * @example
+ * // Basic file upload
+ * <UploadDialog
+ *   anchor={({ open }) => <button onClick={open}>Upload</button>}
+ *   title="Upload Document"
+ *   onUpload={(file) => uploadToServer(file)}
+ * />
+ *
+ * @example
+ * // Upload with sample file and type restriction
+ * <UploadDialog
+ *   anchor={({ open }) => <IconButton icon={<UploadIcon />} onClick={open} />}
+ *   title="Upload CSV File"
+ *   acceptFileType=".csv"
+ *   sampleFileUrl="https://example.com/sample.csv"
+ *   onUpload={async (file) => {
+ *     await uploadFile(file);
+ *     setUploadComplete(true);
+ *   }}
+ *   loading={isUploading}
+ *   onDialogClose={() => setIsUploading(false)}
+ * />
+ *
+ * @example
+ * // Image upload with loading state
+ * <UploadDialog
+ *   anchor={({ open }) => <button onClick={open}>Choose Avatar</button>}
+ *   title="Select Avatar"
+ *   acceptFileType="image/*"
+ *   onUpload={(file) => updateAvatar(file)}
+ *   loading={uploadInProgress}
+ * />
+ */
 export declare const UploadDialog: ({ onUpload, sampleFileUrl, acceptFileType, loading, title, anchor, onDialogClose, onDialogOpen, }: UploadDialogProps) => import("react/jsx-runtime").JSX.Element;