@umituz/web-design-system 1.1.0 → 1.5.1

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "1.1.0",
-  "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms) for React applications",
+  "version": "1.5.1",
+  "private": false,
+  "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "sideEffects": false,
@@ -51,14 +52,23 @@
     "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"
+    "react-dom": ">=18.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",
     "typescript": "~5.9.2"
   },
   "publishConfig": {

package/src/global.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Global Type Declarations
+ * @description Global type definitions for the design system
+ */
+
+declare global {
+  interface ImportMetaEnv {
+    readonly DEV: boolean;
+    readonly MODE: string;
+    readonly BASE_URL: string;
+    readonly PROD: boolean;
+    readonly SSR: boolean;
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
+}
+
+export {};

package/src/infrastructure/error/ErrorDisplay.tsx

@@ -55,13 +55,9 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
   const errorMessage = error instanceof Error ? error.message : (error || 'Unknown error');
   const errorStack = error instanceof Error ? error.stack : undefined;
 
-  const containerStyle: React.CSSProperties = {
-    className
-  };
-
   if (variant === 'minimal') {
     return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px', color: config.color, ...containerStyle }}>
+      <div className={className} style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px', color: config.color }}>
         <span>{config.icon}</span>
         <span>{errorMessage}</span>
       </div>
@@ -70,12 +66,11 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
 
   if (variant === 'inline') {
     return (
-      <div style={{
+      <div className={className} style={{
         padding: '12px 16px',
         background: config.bgColor,
         border: `1px solid ${config.borderColor}`,
-        borderRadius: '6px',
-        ...containerStyle
+        borderRadius: '6px'
       }}>
         <span style={{ marginRight: '8px' }}>{config.icon}</span>
         <span style={{ fontWeight: 500 }}>{title}:</span> {errorMessage}
@@ -85,12 +80,11 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
 
   if (variant === 'card') {
     return (
-      <div style={{
+      <div className={className} style={{
         background: 'white',
         borderRadius: '8px',
         boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-        border: 'none',
-        ...containerStyle
+        border: 'none'
       }}>
         <div style={{ padding: '24px' }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
@@ -209,7 +203,7 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
 
   // Default variant
   return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px', ...containerStyle }}>
+    <div className={className} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
       <div style={{
         width: '100%',
         maxWidth: '448px',

package/src/infrastructure/error/SuspenseWrapper.tsx

@@ -8,6 +8,7 @@ export interface SuspenseWrapperProps {
   loadingText?: string;
   variant?: 'default' | 'minimal' | 'card';
   className?: string;
+  style?: React.CSSProperties;
   showErrorBoundary?: boolean;
   errorBoundaryLevel?: 'page' | 'component' | 'feature';
 }
@@ -41,6 +42,7 @@ export const SuspenseWrapper: React.FC<SuspenseWrapperProps> = ({
   loadingText = 'Loading...',
   variant = 'default',
   className = '',
+  style,
   showErrorBoundary = true,
   errorBoundaryLevel = 'component'
 }) => {
@@ -57,18 +59,21 @@ export const SuspenseWrapper: React.FC<SuspenseWrapperProps> = ({
     </Suspense>
   );
 
-  if (showErrorBoundary) {
-    return (
-      <ErrorBoundary
-        level={errorBoundaryLevel}
-        fallback={errorFallback}
-      >
-        {suspenseContent}
-      </ErrorBoundary>
-    );
+  const content = showErrorBoundary ? (
+    <ErrorBoundary
+      level={errorBoundaryLevel}
+      fallback={errorFallback}
+    >
+      {suspenseContent}
+    </ErrorBoundary>
+  ) : suspenseContent;
+
+  // Wrap in div if className or style is provided
+  if (className || style) {
+    return <div className={className} style={style}>{content}</div>;
   }
 
-  return suspenseContent;
+  return content;
 };
 
 // Specialized Suspense wrappers

package/src/infrastructure/performance/useMemoryOptimization.ts

@@ -249,7 +249,7 @@ export const useMemoryOptimization = (config: MemoryOptimizationConfig = {}) =>
 };
 
 export const useMemoryLeakDetector = (componentName?: string) => {
-  const mountTime = useRef<number>(() => Date.now());
+  const mountTime = useRef<number>(Date.now());
   const [renderCount, setRenderCount] = useState<number>(0);
   const [lifespan, setLifespan] = useState<number>(0);
 

package/src/infrastructure/utils/cn.util.ts

@@ -1,13 +1,13 @@
 /**
  * cn Utility
- * @description Conditional className utility (clsx + tailwind-merge alternative)
+ * @description Conditional className utility using clsx + tailwind-merge for proper Tailwind class merging
  */
 
-export type ClassName = string | undefined | null | false | ClassName[];
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
-export function cn(...classes: ClassName[]): string {
-  return classes
-    .flat(Infinity as any)
-    .filter(Boolean)
-    .join(' ');
+export type { ClassValue };
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
 }

package/src/infrastructure/utils/index.ts

@@ -6,5 +6,5 @@
 
 export {
   cn,
-  type ClassName,
 } from './cn.util';
+export type { ClassValue } from './cn.util';

package/src/presentation/atoms/Input.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type InputHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, SizeVariant } from '../../domain/types';
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, BaseProps {
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseProps {
   error?: boolean;
   size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
 }

package/src/presentation/atoms/Slider.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type InputHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
-export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseProps {
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'>, BaseProps {
   min?: number;
   max?: number;
   step?: number;

package/src/presentation/atoms/Text.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
-export type TextElement = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type TextElement = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
 export type TextVariant = 'body' | 'heading' | 'label' | 'caption';
 export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
 

package/src/presentation/atoms/Tooltip.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type HTMLAttributes, type ReactNode, useState, useRef, useE
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, ChildrenProps } from '../../domain/types';
 
-export interface TooltipProps extends HTMLAttributes<HTMLDivElement>, BaseProps, ChildrenProps {
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'>, BaseProps {
   content: ReactNode;
   placement?: 'top' | 'bottom' | 'left' | 'right';
   delay?: number;
@@ -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<NodeJS.Timeout>();
+    const timeoutRef = useRef<number>();
 
     const handleMouseEnter = () => {
       timeoutRef.current = setTimeout(() => {

package/src/presentation/hooks/index.ts

@@ -15,11 +15,12 @@ export { useLocalStorage } from './useLocalStorage';
 export { useClickOutside } from './useClickOutside';
 
 export { useKeyboard, useEscape } from './useKeyboard';
-export type { KeyboardKey, KeyboardModifier, KeyboardOptions, UseClipboardReturn } from './useKeyboard';
+export type { KeyboardKey, KeyboardModifier, KeyboardOptions } from './useKeyboard';
 
 export { useDebounce } from './useDebounce';
 
 export { useClipboard } from './useClipboard';
+export type { UseClipboardReturn } from './useClipboard';
 
 export { useToggle } from './useToggle';
 

package/src/presentation/hooks/useClickOutside.ts

@@ -14,7 +14,7 @@ export function useClickOutside<T extends HTMLElement>(
   useEffect(() => {
     if (!enabled) return;
 
-    const handleClick = (event: MouseEvent) => {
+    const handleClick = (event: Event) => {
       if (ref.current && !ref.current.contains(event.target as Node)) {
         callback();
       }

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/CheckboxGroup.tsx

@@ -15,7 +15,7 @@ export interface CheckboxOption {
   disabled?: boolean;
 }
 
-export interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+export interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, BaseProps {
   options: CheckboxOption[];
   value?: string[];
   onChange?: (values: string[]) => void;

package/src/presentation/molecules/FormField.tsx

@@ -27,10 +27,10 @@ export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
     return (
       <div className={cn('space-y-1.5', className)} {...props}>
         {label && (
-          <Text as="label" variant="label" size="sm" htmlFor={fieldId}>
+          <label htmlFor={fieldId} className="text-sm font-medium">
             {label}
             {required && <span className="text-destructive ml-1">*</span>}
-          </Text>
+          </label>
         )}
 
         <Input

package/src/presentation/molecules/InputGroup.tsx

@@ -8,7 +8,7 @@ import { cn } from '../../infrastructure/utils';
 import type { BaseProps, ChildrenProps } from '../../domain/types';
 import { Input } from '../atoms/Input';
 
-export interface InputGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps, ChildrenProps {
+export interface InputGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
   leftElement?: ReactNode;
   rightElement?: ReactNode;
 }

package/src/presentation/molecules/RadioGroup.tsx

@@ -15,7 +15,7 @@ export interface RadioOption {
   disabled?: boolean;
 }
 
-export interface RadioGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, BaseProps {
   name: string;
   options: RadioOption[];
   value?: string;

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';