@umituz/web-design-system 1.3.1 → 1.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "1.3.1",
+  "version": "1.7.1",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",
@@ -52,15 +52,33 @@
     "url": "git+https://github.com/umituz/web-design-system.git"
   },
   "peerDependencies": {
+    "@radix-ui/react-accordion": ">=1.0.0",
+    "@radix-ui/react-collapsible": ">=1.0.0",
+    "@radix-ui/react-dialog": ">=1.0.0",
+    "@radix-ui/react-hover-card": ">=1.0.0",
+    "@radix-ui/react-label": ">=2.0.0",
+    "@radix-ui/react-popover": ">=1.0.0",
+    "@radix-ui/react-scroll-area": ">=1.0.0",
+    "@radix-ui/react-select": ">=2.0.0",
+    "clsx": ">=2.0.0",
+    "lucide-react": ">=0.400.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-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-hover-card": "^1.1.8",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@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/atoms/Label.tsx

@@ -0,0 +1,25 @@
+/**
+ * Label Component (Atom)
+ * @description Form label (Shadcn/ui compatible)
+ */
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../../infrastructure/utils';
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      className
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/presentation/atoms/index.ts

@@ -45,3 +45,5 @@ export type { TooltipProps } from './Tooltip';
 
 export { Progress } from './Progress';
 export type { ProgressProps } from './Progress';
+
+export { Label } from './Label';

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

@@ -0,0 +1,128 @@
+/**
+ * ListItem Component (Molecule)
+ * @description Reusable list item with icon, content, and actions
+ * Reduces boilerplate in list components throughout the app
+ */
+
+import { forwardRef, type ReactNode, type MouseEvent } from 'react';
+import { cn } from '../../infrastructure/utils';
+import { Button } from '../atoms';
+import type { BaseProps } from '../../domain/types';
+
+export interface ListItemProps extends BaseProps {
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  actions?: ReactNode;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+  onClick?: () => void;
+  href?: string;
+  disabled?: boolean;
+  selected?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'bordered' | 'ghost';
+}
+
+const sizeStyles = {
+  sm: 'p-3 gap-3',
+  md: 'p-4 gap-4',
+  lg: 'p-5 gap-5',
+};
+
+const titleSizeStyles = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+};
+
+const descriptionSizeStyles = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+const iconSizeStyles = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+};
+
+export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
+  (
+    {
+      className,
+      title,
+      description,
+      icon,
+      actions,
+      leftContent,
+      rightContent,
+      onClick,
+      href,
+      disabled = false,
+      selected = false,
+      size = 'md',
+      variant = 'default',
+      ...props
+    },
+    ref
+  ) => {
+    const baseClasses = cn(
+      'flex items-center justify-between w-full transition-all duration-200',
+      sizeStyles[size],
+      !disabled && onClick && 'cursor-pointer hover:bg-muted/50 active:scale-[0.98]',
+      selected && 'bg-muted/50 border-primary',
+      variant === 'bordered' && 'border border-border rounded-lg',
+      variant === 'ghost' && 'hover:bg-muted/30',
+      disabled && 'opacity-50 cursor-not-allowed',
+      className
+    );
+
+    const content = (
+      <>
+        {leftContent || icon ? (
+          <div className="flex items-center gap-3 flex-shrink-0">
+            {icon && <div className={cn(iconSizeStyles[size], 'text-muted-foreground')}>{icon}</div>}
+            {!icon && leftContent}
+          </div>
+        ) : null}
+
+        <div className="flex-1 min-w-0">
+          <p className={cn('font-medium text-foreground truncate', titleSizeStyles[size])}>{title}</p>
+          {description && (
+            <p className={cn('text-muted-foreground truncate', descriptionSizeStyles[size])}>{description}</p>
+          )}
+        </div>
+
+        {rightContent || actions ? (
+          <div className="flex items-center gap-2 flex-shrink-0">
+            {rightContent}
+            {actions}
+          </div>
+        ) : null}
+      </>
+    );
+
+    if (href && !disabled) {
+      return (
+        <a href={href} ref={ref as any} className={baseClasses} {...(props as any)}>
+          {content}
+        </a>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={baseClasses}
+        onClick={disabled ? undefined : onClick}
+        {...props}
+      >
+        {content}
+      </div>
+    );
+  }
+);
+
+ListItem.displayName = 'ListItem';

package/src/presentation/molecules/ScrollArea.tsx

@@ -0,0 +1,50 @@
+/**
+ * ScrollArea Component (Molecule)
+ * @description Custom scrollable area (Shadcn/ui compatible)
+ */
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '../../infrastructure/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

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';
@@ -33,3 +33,8 @@ export type { CheckboxGroupProps, CheckboxOption } from './CheckboxGroup';
 
 export { InputGroup, GroupedInput } from './InputGroup';
 export type { InputGroupProps } from './InputGroup';
+
+export { ScrollArea, ScrollBar } from './ScrollArea';
+
+export { ListItem } from './ListItem';
+export type { ListItemProps } from './ListItem';