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

package/src/components/Navigation/TabsContainer/TabsContainer.tsx

@@ -8,25 +8,105 @@ import {
 } from '@/shadcn-components/Navigation/Tabs/Tabs';
 import { useEffect, useState } from 'react';
 
+/**
+ * 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 const TabsContainer = ({
   tabs,
   onTabChange,
@@ -86,7 +166,7 @@ export const TabsContainer = ({
               variant === 'fixed'
                 ? isSmallScreen
                   ? `calc(100vh - 98px)`
-                  : `calc(100vh - 90px)`
+                  : `calc(100vh - 80px)`
                 : 'max-content',
           }}
         >

package/src/components/Navigation/UploadDialog/UploadDialog.tsx

@@ -6,17 +6,81 @@ import { PreviewFiles } from '../PreviewFiles/PreviewFiles';
 import { LoadingUploadDialogContainer } from './LoadingUploadDialogContainer';
 import { UploadDialogContainer } from './UploadDialogContainer';
 
+/**
+ * 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 const UploadDialog = ({
   onUpload,
   sampleFileUrl,

package/src/shadcn-components/DataDisplay/Dialog/Dialog.tsx

@@ -36,7 +36,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-[fadeIn_100ms_ease-out] data-[state=closed]:animate-[fadeOut_100ms_ease-in]',
+        'fixed inset-0  bg-black/50 data-[state=open]:animate-[fadeIn_100ms_ease-out] data-[state=closed]:animate-[fadeOut_100ms_ease-in]',
         className,
       )}
       {...props}
@@ -58,7 +58,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg data-[state=open]:animate-[zoomIn_200ms_ease-out] data-[state=closed]:animate-[zoomOut_200ms_ease-in]',
+          'bg-background fixed top-[50%] left-[50%]  grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg data-[state=open]:animate-[zoomIn_200ms_ease-out] data-[state=closed]:animate-[zoomOut_200ms_ease-in]',
           className,
         )}
         {...props}

package/src/shadcn-components/Input/Popover/Popover.tsx

@@ -28,7 +28,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[2000] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2  w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
           className,
         )}
         {...props}

package/src/shadcn-components/Input/Select/Select.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -73,7 +73,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
@@ -145,13 +145,13 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
+  SelectLabel,
   SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 };

package/src/shadcn-components/Layout/Sheet/Sheet.tsx

@@ -34,7 +34,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0  bg-black/50',
         className,
       )}
       {...props}
@@ -56,7 +56,7 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed  flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
           side === 'right' &&
             'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
           side === 'left' &&

package/src/shadcn-components/Navigation/DropdownMenu/DropdownMenu.tsx

@@ -40,7 +40,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[2000] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2  max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
           className,
         )}
         {...props}
@@ -228,7 +228,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2  min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
         className,
       )}
       {...props}

package/src/styles/globals.css

@@ -1,5 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');
 @import 'tailwindcss';
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');
 
 @custom-variant dark (&:is(.dark *));
 
@@ -51,6 +51,7 @@
   --yellow-background: oklch(0.82 0.166 94.2 / 0.2);
   --default-background: oklch(0.978 0.004 233.756);
   --input-background: oklch(0.953 0.002 264);
+  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
 }
 
 .dark {
@@ -100,6 +101,7 @@
   --yellow-background: oklch(0.82 0.166 94.2 / 0.2);
   --default-background: oklch(0.154 0.013 233.756);
   --input-background: oklch(0.215 0.008 264);
+  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
 }
 
 @theme inline {
@@ -153,7 +155,6 @@
   --color-yellow-background: var(--yellow-background);
   --color-default-background: var(--default-background);
   --color-input-background: var(--input-background);
-  --font-family-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
 
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
@@ -171,6 +172,7 @@
   body {
     height: 100%;
     overflow: auto;
+    -webkit-font-smoothing: antialiased;
     @apply bg-background text-foreground font-sans;
   }
 

package/src/styles/index.css

@@ -1,3 +1,8 @@
 /* Main stylesheet entry point for react-blueprint */
 /* This file imports globals.css and will be processed through Tailwind v4 PostCSS plugin */
 @import './globals.css';
+
+/* Component-specific styles */
+@import '../components/DataDisplay/ReactJoyride/CustomJoyRideStyles.css';
+@import '../components/Input/Button/ButtonLoader.css';
+@import '../components/Navigation/Calendar/Calendar.css';