@umituz/web-design-system 1.3.1 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "1.3.1",
+  "version": "1.5.1",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",
@@ -52,15 +52,20 @@
     "url": "git+https://github.com/umituz/web-design-system.git"
   },
   "peerDependencies": {
+    "@radix-ui/react-accordion": ">=1.0.0",
+    "@radix-ui/react-select": ">=2.0.0",
+    "clsx": ">=2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "clsx": ">=2.0.0",
     "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-select": "^2.2.6",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "clsx": "^2.1.1",
+    "lucide-react": "^0.577.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "tailwind-merge": "^3.5.0",

package/src/presentation/molecules/Avatar.tsx

@@ -1,16 +1,13 @@
 /**
  * Avatar Component (Molecule)
- * @description User avatar with fallback
+ * @description User avatar with image and fallback (shadcn/ui compatible)
  */
 
-import { forwardRef, type HTMLAttributes } from 'react';
+import { forwardRef, type HTMLAttributes, type ElementType, type ComponentPropsWithoutRef } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, SizeVariant } from '../../domain/types';
 
 export interface AvatarProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
-  src?: string;
-  alt?: string;
-  fallback?: string;
   size?: Extract<SizeVariant, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>;
 }
 
@@ -23,30 +20,61 @@ const sizeStyles: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', string> = {
   '2xl': 'h-20 w-20 text-2xl',
 };
 
-export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
-  ({ className, src, alt, fallback, size = 'md', ...props }, ref) => {
-    const hasError = !src;
-
+const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, size = 'md', ...props }, ref) => {
     return (
       <div
         ref={ref}
         className={cn(
-          'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted',
+          'relative flex shrink-0 overflow-hidden rounded-full',
           sizeStyles[size],
           className
         )}
         {...props}
-      >
-        {hasError ? (
-          <span className="font-medium text-muted-foreground">
-            {fallback || '?'}
-          </span>
-        ) : (
-          <img src={src} alt={alt || 'Avatar'} className="h-full w-full object-cover" />
-        )}
-      </div>
+      />
     );
   }
 );
 
 Avatar.displayName = 'Avatar';
+
+export interface AvatarImageProps extends ComponentPropsWithoutRef<'img'> {
+  asChild?: boolean;
+}
+
+const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(
+  ({ className, src, alt, ...props }, ref) => {
+    return (
+      <img
+        ref={ref}
+        src={src}
+        alt={alt}
+        className={cn('aspect-square h-full w-full object-cover', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+AvatarImage.displayName = 'AvatarImage';
+
+export interface AvatarFallbackProps extends HTMLAttributes<HTMLDivElement> {}
+
+const AvatarFallback = forwardRef<HTMLDivElement, AvatarFallbackProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex h-full w-full items-center justify-center rounded-full bg-muted',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+AvatarFallback.displayName = 'AvatarFallback';
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/presentation/molecules/Select.tsx

@@ -1,41 +1,160 @@
 /**
  * Select Component (Molecule)
- * @description Dropdown select input
+ * @description Dropdown select (Shadcn/Radix UI compatible)
  */
 
-import { forwardRef, type SelectHTMLAttributes } from 'react';
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps } from '../../domain/types';
-
-export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement>, BaseProps {
-  error?: boolean;
-  options: Array<{ value: string; label: string; disabled?: boolean }>;
-}
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  ({ className, error, options, disabled, ...props }, ref) => {
-    return (
-      <select
-        ref={ref}
-        disabled={disabled}
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] 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
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
         className={cn(
-          'flex h-9 w-full rounded-md border border-input bg-background px-3 py-2',
-          'text-sm ring-offset-background',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          error && 'border-destructive',
-          className
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
         )}
-        {...props}
       >
-        {options.map((option) => (
-          <option key={option.value} value={option.value} disabled={option.disabled}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    );
-  }
-);
-
-Select.displayName = 'Select';
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

package/src/presentation/molecules/index.ts

@@ -10,8 +10,8 @@ export type { FormFieldProps } from './FormField';
 export { SearchBox } from './SearchBox';
 export type { SearchBoxProps } from './SearchBox';
 
-export { Avatar } from './Avatar';
-export type { AvatarProps } from './Avatar';
+export { Avatar, AvatarImage, AvatarFallback } from './Avatar';
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './Avatar';
 
 export { Chip } from './Chip';
 export type { ChipProps } from './Chip';
@@ -19,7 +19,7 @@ export type { ChipProps } from './Chip';
 export { Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
 
-export { Select } from './Select';
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } from './Select';
 export type { SelectProps } from './Select';
 
 export { Textarea } from './Textarea';

package/src/presentation/organisms/Accordion.tsx

@@ -1,117 +1,59 @@
 /**
  * Accordion Component (Organism)
- * @description Collapsible content sections
+ * @description Collapsible content sections (Shadcn/ui compatible)
  */
 
-import { useState, useCallback, type ReactNode, type HTMLAttributes } from 'react';
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps } from '../../domain/types';
-import { Icon } from '../atoms/Icon';
 
-export interface AccordionItem {
-  value: string;
-  title: string;
-  content: ReactNode;
-  disabled?: boolean;
-}
-
-export interface AccordionProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
-  items: AccordionItem[];
-  allowMultiple?: boolean;
-  defaultValue?: string[];
-  variant?: 'default' | 'bordered' | 'ghost';
-}
-
-const variantStyles: Record<'default' | 'bordered' | 'ghost', string> = {
-  default: 'border-b',
-  bordered: 'border rounded-lg mb-2',
-  ghost: 'border-0',
-};
-
-export function Accordion({
-  items,
-  allowMultiple = false,
-  defaultValue = [],
-  variant = 'default',
-  className,
-  ...props
-}: AccordionProps) {
-  const [openItems, setOpenItems] = useState<string[]>(defaultValue);
-
-  const toggleItem = useCallback((value: string) => {
-    setOpenItems((prev) => {
-      const isOpen = prev.includes(value);
-
-      if (allowMultiple) {
-        return isOpen
-          ? prev.filter((v) => v !== value)
-          : [...prev, value];
-      } else {
-        return isOpen ? [] : [value];
-      }
-    });
-  }, [allowMultiple]);
-
-  return (
-    <div className={cn('w-full', className)} {...props}>
-      {items.map((item, index) => {
-        const isOpen = openItems.includes(item.value);
-
-        return (
-          <div
-            key={item.value}
-            className={cn(
-              'group',
-              variantStyles[variant],
-              variant === 'bordered' && isOpen && 'ring-1 ring-ring'
-            )}
-          >
-            {/* Header */}
-            <button
-              onClick={() => toggleItem(item.value)}
-              disabled={item.disabled}
-              className={cn(
-                'flex w-full items-center justify-between py-4 font-medium transition-all',
-                'hover:text-foreground',
-                item.disabled && 'opacity-50 cursor-not-allowed',
-                variant === 'bordered' && 'px-4'
-              )}
-            >
-              <span>{item.title}</span>
-              <Icon
-                className={cn(
-                  'transition-transform duration-200',
-                  isOpen && 'rotate-180'
-                )}
-                size="sm"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-                />
-              </Icon>
-            </button>
-
-            {/* Content */}
-            {isOpen && (
-              <div
-                className={cn(
-                  'overflow-hidden',
-                  'animate-accordion-down',
-                  variant === 'bordered' && 'px-4 pb-4'
-                )}
-              >
-                <div className="pb-4 text-sm text-muted-foreground">
-                  {item.content}
-                </div>
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-Accordion.displayName = 'Accordion';
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/presentation/organisms/Alert.tsx

@@ -1,96 +1,63 @@
 /**
  * Alert Component (Organism)
- * @description Feedback message with icon
+ * @description Feedback message (Shadcn/ui compatible)
  */
 
-import { forwardRef, type HTMLAttributes } from 'react';
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps, ChildrenProps, ColorVariant } from '../../domain/types';
-import { Icon } from '../atoms/Icon';
 
-export type AlertVariant = Extract<ColorVariant, 'success' | 'warning' | 'destructive'> | 'info';
-
-export interface AlertProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
-  variant?: AlertVariant;
-  showIcon?: boolean;
-}
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
 
-const variantStyles: Record<AlertVariant, { container: string; iconColor: string }> = {
-  success: {
-    container: 'border-success bg-success/10 text-success',
-    iconColor: 'text-success',
-  },
-  warning: {
-    container: 'border-warning bg-warning/10 text-warning',
-    iconColor: 'text-warning',
-  },
-  destructive: {
-    container: 'border-destructive bg-destructive/10 text-destructive',
-    iconColor: 'text-destructive',
-  },
-  info: {
-    container: 'border-primary bg-primary/10 text-primary',
-    iconColor: 'text-primary',
-  },
-};
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {}
 
-const icons: Record<AlertVariant, React.ReactNode> = {
-  success: (
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-    />
-  ),
-  warning: (
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
-    />
-  ),
-  destructive: (
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
-    />
-  ),
-  info: (
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
     />
-  ),
-};
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, variant = 'info', showIcon = true, children, ...props }, ref) => {
-    const styles = variantStyles[variant];
-
-    return (
-      <div
-        ref={ref}
-        role="alert"
-        className={cn(
-          'relative w-full rounded-lg border p-4',
-          styles.container,
-          className
-        )}
-        {...props}
-      >
-        <div className="flex items-start gap-3">
-          {showIcon && (
-            <Icon className={cn('shrink-0 mt-0.5', styles.iconColor)} size="sm">
-              {icons[variant]}
-            </Icon>
-          )}
-          <div className="flex-1">{children}</div>
-        </div>
-      </div>
-    );
-  }
+  )
 );
-
 Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

package/src/presentation/organisms/index.ts

@@ -7,8 +7,8 @@
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
 export type { CardProps } from './Card';
 
-export { Alert } from './Alert';
-export type { AlertProps, AlertVariant } from './Alert';
+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';
@@ -31,8 +31,7 @@ export type { TableProps } from './Table';
 export { Tabs } from './Tabs';
 export type { TabsProps, Tab } from './Tabs';
 
-export { Accordion } from './Accordion';
-export type { AccordionProps, AccordionItem } from './Accordion';
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
 
 export { Breadcrumbs } from './Breadcrumb';
 export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumb';