@umituz/web-design-system 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",
@@ -77,6 +77,7 @@
     "react-day-picker": ">=9.0.0",
     "react-dom": ">=19.0.0",
     "react-i18next": ">=13.0.0",
+    "react-syntax-highlighter": ">=15.0.0",
     "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
@@ -99,6 +100,7 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.577.0",
@@ -106,6 +108,7 @@
     "react-day-picker": "^9.14.0",
     "react-dom": "^19.0.0",
     "react-i18next": "^13.0.0",
+    "react-syntax-highlighter": "^16.1.1",
     "tailwind-merge": "^3.5.0",
     "typescript": "~5.9.2"
   },

package/src/index.ts

@@ -24,8 +24,68 @@ export * from './infrastructure/constants';
 export * from './infrastructure/security';
 export * from './infrastructure/performance';
 export * from './infrastructure/error';
-export * from './presentation/atoms';
-export * from './presentation/molecules';
-export * from './presentation/organisms';
 export * from './presentation/templates';
 export * from './presentation/hooks';
+
+// Atoms
+export type { ButtonProps } from './presentation/atoms/Button';
+export { Button } from './presentation/atoms/Button';
+export type { BadgeProps } from './presentation/atoms/Badge';
+export { Badge } from './presentation/atoms/Badge';
+export type { InputProps } from './presentation/atoms/Input';
+export { Input } from './presentation/atoms/Input';
+export type { TextProps, TextElement, TextVariant, TextSize } from './presentation/atoms/Text';
+export { Text } from './presentation/atoms/Text';
+export type { IconProps } from './presentation/atoms/Icon';
+export { Icon } from './presentation/atoms/Icon';
+export type { SpinnerProps } from './presentation/atoms/Spinner';
+export { Spinner } from './presentation/atoms/Spinner';
+export type { CheckboxProps } from './presentation/atoms/Checkbox';
+export { Checkbox } from './presentation/atoms/Checkbox';
+export type { RadioProps } from './presentation/atoms/Radio';
+export { Radio } from './presentation/atoms/Radio';
+export type { SliderProps } from './presentation/atoms/Slider';
+export { Slider } from './presentation/atoms/Slider';
+export type { DividerProps } from './presentation/atoms/Divider';
+export { Divider } from './presentation/atoms/Divider';
+export type { SkeletonProps } from './presentation/atoms/Skeleton';
+export { Skeleton } from './presentation/atoms/Skeleton';
+export type { LinkProps } from './presentation/atoms/Link';
+export { Link } from './presentation/atoms/Link';
+export type { TooltipProps } from './presentation/atoms/Tooltip';
+export { Tooltip } from './presentation/atoms/Tooltip';
+export type { ProgressProps } from './presentation/atoms/Progress';
+export { Progress } from './presentation/atoms/Progress';
+export { Label } from './presentation/atoms/Label';
+export type { AspectRatioProps } from './presentation/atoms/AspectRatio';
+export { AspectRatio } from './presentation/atoms/AspectRatio';
+export type { SwitchProps } from './presentation/atoms/Switch';
+export { Switch } from './presentation/atoms/Switch';
+export { Separator } from './presentation/atoms/Separator';
+export { Toggle as ToggleAtom, toggleVariants } from './presentation/atoms/Toggle';
+
+// Molecules
+export type { FormFieldProps } from './presentation/molecules/FormField';
+export { FormField } from './presentation/molecules/FormField';
+export type { SearchBoxProps } from './presentation/molecules/SearchBox';
+export { SearchBox } from './presentation/molecules/SearchBox';
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './presentation/molecules/Avatar';
+export { Avatar, AvatarImage, AvatarFallback } from './presentation/molecules/Avatar';
+export type { ChipProps } from './presentation/molecules/Chip';
+export { Chip } from './presentation/molecules/Chip';
+export type { ToggleProps } from './presentation/molecules/Toggle';
+export { Toggle } from './presentation/molecules/Toggle';
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } from './presentation/molecules/Select';
+export type { TextareaProps } from './presentation/molecules/Textarea';
+export { Textarea } from './presentation/molecules/Textarea';
+export type { RadioGroupProps, RadioOption } from './presentation/molecules/RadioGroup';
+export { RadioGroup } from './presentation/molecules/RadioGroup';
+export type { CheckboxGroupProps, CheckboxOption } from './presentation/molecules/CheckboxGroup';
+export { CheckboxGroup } from './presentation/molecules/CheckboxGroup';
+export type { InputGroupProps } from './presentation/molecules/InputGroup';
+export { InputGroup, GroupedInput } from './presentation/molecules/InputGroup';
+export { ScrollArea, ScrollBar } from './presentation/molecules/ScrollArea';
+export type { ListItemProps } from './presentation/molecules/ListItem';
+export { ListItem } from './presentation/molecules/ListItem';
+
+export * from './presentation/organisms';

package/src/infrastructure/error/SuspenseWrapper.tsx

@@ -14,14 +14,13 @@ export interface SuspenseWrapperProps {
 }
 
 const DefaultLoadingSpinner: React.FC<{ text?: string; className?: string }> = ({ text, className }) => (
-  <div style={{
+  <div className={className} style={{
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     gap: '16px',
-    padding: '32px',
-    ...({ className } as any)
+    padding: '32px'
   }}>
     <div style={{
       width: '40px',

package/src/presentation/atoms/Text.tsx

@@ -43,6 +43,8 @@ const weightStyles: Record<'normal' | 'medium' | 'semibold' | 'bold', string> =
   bold: 'font-bold',
 };
 
+// NOTE: "as any" is used here for the polymorphic ref, which is a necessary workaround
+// for TypeScript's limitations in typing polymorphic components properly.
 export const Text = forwardRef<HTMLElement, TextProps>(
   ({ className, as = 'p', variant = 'body', size = 'md', weight = 'normal', ...props }, ref) => {
     const Tag = as as any;

package/src/presentation/atoms/Tooltip.tsx

@@ -23,7 +23,7 @@ const placementStyles: Record<'top' | 'bottom' | 'left' | 'right', string> = {
 export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   ({ className, children, content, placement = 'top', delay = 200, ...props }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
-    const timeoutRef = useRef<number>();
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
     const handleMouseEnter = () => {
       timeoutRef.current = setTimeout(() => {

package/src/presentation/atoms/index.ts

@@ -55,7 +55,5 @@ export { Switch } from './Switch';
 export type { SwitchProps } from './Switch';
 
 export { Separator } from './Separator';
-export type { SeparatorProps } from './Separator';
 
 export { Toggle, toggleVariants } from './Toggle';
-export type { ToggleProps } from './Toggle';

package/src/presentation/molecules/ListItem.tsx

@@ -4,7 +4,7 @@
  * Reduces boilerplate in list components throughout the app
  */
 
-import { forwardRef, type ReactNode, type MouseEvent } from 'react';
+import { forwardRef, type ReactNode, type HTMLAttributes, type AnchorHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import { Button } from '../atoms';
 import type { BaseProps } from '../../domain/types';
@@ -22,6 +22,8 @@ export interface ListItemProps extends BaseProps {
   selected?: boolean;
   size?: 'sm' | 'md' | 'lg';
   variant?: 'default' | 'bordered' | 'ghost';
+  className?: string;
+  id?: string;
 }
 
 const sizeStyles = {
@@ -64,7 +66,7 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
       selected = false,
       size = 'md',
       variant = 'default',
-      ...props
+      id,
     },
     ref
   ) => {
@@ -104,9 +106,11 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
       </>
     );
 
+    // NOTE: Polymorphic component - renders as anchor when href is provided
+    // "ref as any" is necessary due to TypeScript limitations with polymorphic refs
     if (href && !disabled) {
       return (
-        <a href={href} ref={ref as any} className={baseClasses} {...(props as any)}>
+        <a href={href} className={baseClasses} id={id} ref={ref as any}>
           {content}
         </a>
       );
@@ -117,7 +121,7 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
         ref={ref}
         className={baseClasses}
         onClick={disabled ? undefined : onClick}
-        {...props}
+        id={id}
       >
         {content}
       </div>

package/src/presentation/molecules/index.ts

@@ -20,7 +20,6 @@ export { Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
 
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } from './Select';
-export type { SelectProps } from './Select';
 
 export { Textarea } from './Textarea';
 export type { TextareaProps } from './Textarea';

package/src/presentation/organisms/Calendar.tsx

@@ -63,8 +63,12 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
+        Chevron: ({ orientation, ...props }) =>
+          orientation === 'left' ? (
+            <ChevronLeft className="h-4 w-4" {...props} />
+          ) : (
+            <ChevronRight className="h-4 w-4" {...props} />
+          ),
       }}
       {...props}
     />

package/src/presentation/organisms/DataTable.tsx

@@ -84,8 +84,9 @@ export function DataTable<T extends Record<string, unknown>>({
       const bValue = typeof column.accessor === 'function' ? column.accessor(b) : b[column.accessor];
 
       if (aValue === bValue) return 0;
+      if (aValue == null || bValue == null) return 0;
 
-      const comparison = aValue < bValue ? -1 : 1;
+      const comparison = (aValue as string | number) < (bValue as string | number) ? -1 : 1;
       return sortDirection === 'asc' ? comparison : -comparison;
     });
   }, [data, sortColumn, sortDirection, columns, sortable]);

package/src/presentation/organisms/ImageLightbox.tsx

@@ -0,0 +1,253 @@
+/**
+ * ImageLightbox Component (Organism)
+ * @description Full-screen image gallery with zoom, navigation, and thumbnails
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+import { Icon } from '../atoms/Icon';
+
+export interface ImageLightboxImage {
+  src: string;
+  alt: string;
+  title?: string;
+}
+
+export interface ImageLightboxProps extends BaseProps {
+  images: ImageLightboxImage[];
+  initialIndex?: number;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ImageLightbox = ({
+  images,
+  initialIndex = 0,
+  isOpen,
+  onClose,
+  className,
+}: ImageLightboxProps) => {
+  // Early return if closed
+  if (!isOpen) return null;
+
+  // Early return if no images
+  if (!images || images.length === 0) {
+    return null;
+  }
+
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  // Ensure initialIndex is within bounds
+  const safeIndex = Math.min(Math.max(initialIndex, 0), images.length - 1);
+  const currentImage = images[safeIndex];
+
+  // Use useCallback to memoize navigation functions
+  const goToNext = useCallback(() => {
+    setCurrentIndex((prev) => (prev + 1) % images.length);
+  }, [images.length]);
+
+  const goToPrevious = useCallback(() => {
+    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
+  }, [images.length]);
+
+  const handleImageClick = useCallback(() => {
+    setIsZoomed(!isZoomed);
+  }, [isZoomed]);
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          onClose();
+          break;
+        case 'ArrowLeft':
+          goToPrevious();
+          break;
+        case 'ArrowRight':
+          goToNext();
+          break;
+        case '+':
+        case '=':
+          setIsZoomed(!isZoomed);
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose, goToPrevious, goToNext, isZoomed]);
+
+  // Prevent body scroll when lightbox is open
+  useEffect(() => {
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, []);
+
+  if (!currentImage) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      {/* Close button */}
+      <button
+        onClick={onClose}
+        className="absolute top-4 right-4 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white transition-all"
+        aria-label="Close lightbox"
+      >
+        <Icon className="text-white">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </Icon>
+      </button>
+
+      {/* Navigation - Previous */}
+      {images.length > 1 && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            goToPrevious();
+          }}
+          className="absolute left-4 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white transition-all"
+          aria-label="Previous image"
+        >
+          <Icon className="text-white" size="lg">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M15 19l-7-7 7-7"
+            />
+          </Icon>
+        </button>
+      )}
+
+      {/* Navigation - Next */}
+      {images.length > 1 && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            goToNext();
+          }}
+          className="absolute right-4 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white transition-all"
+          aria-label="Next image"
+        >
+          <Icon className="text-white" size="lg">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 5l7 7-7 7"
+            />
+          </Icon>
+        </button>
+      )}
+
+      {/* Main Image */}
+      <div
+        className="relative max-w-5xl max-h-[90vh] w-full"
+        onClick={handleImageClick}
+      >
+        <img
+          src={currentImage.src}
+          alt={currentImage.alt}
+          className={cn(
+            'w-full h-full object-contain',
+            isZoomed ? 'cursor-zoom-out' : 'cursor-zoom-in'
+          )}
+          style={{
+            maxHeight: '90vh',
+            objectFit: 'contain',
+          }}
+        />
+
+        {/* Zoom indicator */}
+        <div className="absolute bottom-4 right-4 flex items-center gap-2 bg-black/50 px-3 py-2 rounded-full">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsZoomed(!isZoomed);
+            }}
+            className="p-1 hover:bg-black/70 rounded-full transition-all text-white"
+            aria-label={isZoomed ? 'Zoom out' : 'Zoom in'}
+          >
+            {isZoomed ? (
+              <Icon className="text-white" size="sm">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"
+                />
+              </Icon>
+            ) : (
+              <Icon className="text-white" size="sm">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"
+                />
+              </Icon>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Image Counter */}
+      {images.length > 1 && (
+        <div className="absolute bottom-4 left-4 bg-black/50 px-4 py-2 rounded-full text-white text-sm">
+          {currentIndex + 1} / {images.length}
+        </div>
+      )}
+
+      {/* Image Title */}
+      {currentImage.title && (
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/50 px-4 py-2 rounded-full text-white text-sm max-w-md text-center">
+          {currentImage.title}
+        </div>
+      )}
+
+      {/* Thumbnails */}
+      {images.length > 1 && (
+        <div className="absolute bottom-20 left-1/2 -translate-x-1/2 flex gap-2 max-w-xl overflow-x-auto">
+          {images.map((image, index) => (
+            <button
+              key={index}
+              onClick={(e) => {
+                e.stopPropagation();
+                setCurrentIndex(index);
+              }}
+              className={cn(
+                'flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all',
+                index === currentIndex
+                  ? 'border-white scale-110'
+                  : 'border-transparent opacity-50 hover:opacity-100'
+              )}
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="w-full h-full object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+ImageLightbox.displayName = 'ImageLightbox';

package/src/presentation/organisms/Table.tsx

@@ -92,7 +92,7 @@ export const TableHead = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTab
 
 TableHead.displayName = 'TableHead';
 
-export const TableCell = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement>>(
+export const TableCell = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement> & { colSpan?: number }>(
   ({ className, ...props }, ref) => (
     <td
       ref={ref}

package/src/presentation/organisms/index.ts

@@ -1,75 +1,24 @@
 /**
  * Organisms Export
- * @description Organism components - complex UI combinations
+ * @description Complex UI components composed of molecules and atoms
  * Subpath: @umituz/web-design-system/organisms
  */
 
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
-export type { CardProps } from './Card';
-
-export { Alert, AlertTitle, AlertDescription } from './Alert';
-export type { AlertProps } from './Alert';
-
-export { Modal, ModalHeader, ModalTitle, ModalDescription, ModalContent, ModalFooter } from './Modal';
-export type { ModalProps } from './Modal';
-
+// Layout & Structure
 export { Navbar, NavbarBrand, NavbarLinks, NavbarActions } from './Navbar';
 export type { NavbarProps } from './Navbar';
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableRow,
-  TableHead,
-  TableCell,
-  TableCaption
-} from './Table';
-export type { TableProps } from './Table';
-
-export { Tabs } from './Tabs';
-export type { TabsProps, Tab } from './Tabs';
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-} from './Dialog';
+export { Footer } from './Footer';
 
 export { Breadcrumbs } from './Breadcrumb';
-export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumb';
+export type { BreadcrumbItem, BreadcrumbsProps } from './Breadcrumb';
 
-export { HoverCard, HoverCardTrigger, HoverCardContent } from './HoverCard';
-
-export { Popover, PopoverTrigger, PopoverContent } from './Popover';
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
-
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-  SheetTrigger,
-} from './Sheet';
+// Data Display
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
+export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps } from './Card';
 
-export { Footer } from './Footer';
-export type { FooterProps } from './Footer';
+export { StatCard } from './StatCard';
+export type { StatCardProps } from './StatCard';
 
 export { MetricCard } from './MetricCard';
 export type { MetricCardProps } from './MetricCard';
@@ -77,59 +26,80 @@ export type { MetricCardProps } from './MetricCard';
 export { QuickActionCard } from './QuickActionCard';
 export type { QuickActionCardProps } from './QuickActionCard';
 
+// Lists & Tables
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell } from './Table';
+export type { TableProps, TableHeaderProps, TableBodyProps, TableFooterProps, TableHeadProps, TableRowProps, TableCellProps } from './Table';
+
+export { DataTable } from './DataTable';
+export type { DataTableProps, ColumnDef } from './DataTable';
+
+export { List, ListItem, ListHeader } from './List';
+export type { ListProps, ListItemProps, ListHeaderProps } from './List';
+
+// Feedback & Empty States
+export { Alert, AlertTitle, AlertDescription } from './Alert';
+export type { AlertProps, AlertTitleProps, AlertDescriptionProps } from './Alert';
+
 export { EmptyState } from './EmptyState';
 export type { EmptyStateProps } from './EmptyState';
 
 export { LoadingState } from './LoadingState';
 export type { LoadingStateProps } from './LoadingState';
 
-export { DataTable } from './DataTable';
-export type { DataTableProps, Column } from './DataTable';
+// Overlays & Modals
+export { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent, DialogFooter } from './Dialog';
+export type { DialogProps } from './Dialog';
 
-export { StatCard } from './StatCard';
-export type { StatCardProps } from './StatCard';
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';
 
 export { FormModal } from './FormModal';
 export type { FormModalProps } from './FormModal';
 
-export { ConfirmDialog } from './ConfirmDialog';
-export type { ConfirmDialogProps } from './ConfirmDialog';
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from './AlertDialog';
+export type { AlertDialogProps } from './AlertDialog';
 
-export { Calendar } from './Calendar';
-export type { CalendarProps } from './Calendar';
+export { Popover, PopoverTrigger, PopoverContent } from './Popover';
+export type { PopoverProps } from './Popover';
+
+export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter } from './Sheet';
+export type { SheetProps, SheetSide } from './Sheet';
+
+export { HoverCard, HoverCardTrigger, HoverCardContent } from './HoverCard';
+export type { HoverCardProps } from './HoverCard';
+
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel } from './DropdownMenu';
+export type { DropdownMenuProps } from './DropdownMenu';
 
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from './AlertDialog';
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-} from './DropdownMenu';
-export type { DropdownMenuProps, DropdownMenuContentProps } from './DropdownMenu';
+// Interactive Components
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs';
+export type { TabsProps } from './Tabs';
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
+export type { AccordionProps } from './Accordion';
+
+export { Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle';
 
 export { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
 export type { ToggleGroupProps, ToggleGroupItemProps } from './ToggleGroup';
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
+export type { CollapsibleProps } from './Collapsible';
+
+// Form Components
+export { CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupProps } from './CheckboxGroup';
+
+export { RadioGroup, RadioGroupItem } from './RadioGroup';
+export type { RadioGroupProps, RadioGroupItemProps } from './RadioGroup';
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator } from './Select';
+export type { SelectProps } from './Select';
+
+export { Calendar } from './Calendar';
+export type { CalendarProps } from './Calendar';
+
+// NEW: Media & Content Components
+export { ImageLightbox } from './ImageLightbox';
+export type { ImageLightboxProps, ImageLightboxImage } from './ImageLightbox';