@umituz/web-design-system 1.8.7 → 1.9.0

package/README.md

@@ -68,7 +68,11 @@ import {
 import {
   Form,
   List,
-  Section
+  Section,
+  PageLayout,
+  PageHeader,
+  ResponsiveContainer,
+  ProjectSkeleton
 } from '@umituz/web-design-system/templates';
 ```
 
@@ -78,7 +82,15 @@ import {
   useTheme,
   useMediaQuery,
   useBreakpoint,
-  useLocalStorage
+  useLocalStorage,
+  useLanguage,
+  useClickOutside,
+  useKeyboard,
+  useEscape,
+  useDebounce,
+  useClipboard,
+  useToggle,
+  useScrollLock
 } from '@umituz/web-design-system/hooks';
 ```
 
@@ -196,6 +208,81 @@ function ThemeToggle() {
 }
 ```
 
+### Language Hook
+
+```tsx
+import { useLanguage } from '@umituz/web-design-system/hooks';
+
+function LanguageSelector() {
+  const { currentLanguage, changeLanguage, t, supportedLanguages } = useLanguage({
+    defaultLanguage: 'en-US',
+    supportedLanguages: {
+      'en-US': { name: 'English', flag: '🇺🇸' },
+      'tr-TR': { name: 'Türkçe', flag: '🇹🇷' },
+      'de-DE': { name: 'Deutsch', flag: '🇩🇪' },
+    }
+  });
+
+  return (
+    <select value={currentLanguage} onChange={(e) => changeLanguage(e.target.value)}>
+      {Object.entries(supportedLanguages).map(([code, { name, flag }]) => (
+        <option key={code} value={code}>{flag} {name}</option>
+      ))}
+    </select>
+  );
+}
+```
+
+### Breakpoint Hook
+
+```tsx
+import { useBreakpoint, useMediaQuery } from '@umituz/web-design-system/hooks';
+
+function ResponsiveComponent() {
+  const breakpoint = useBreakpoint();
+  const isDesktop = useMediaQuery('lg');
+  const isTablet = useMediaQuery('md');
+
+  return (
+    <div>
+      Current breakpoint: {breakpoint || 'mobile'}
+      {isDesktop && <DesktopNavigation />}
+      {isTablet && !isDesktop && <TabletNavigation />}
+    </div>
+  );
+}
+```
+
+## 📱 Responsive Templates
+
+### ResponsiveContainer
+
+```tsx
+import { ResponsiveContainer } from '@umituz/web-design-system/templates';
+
+// Auto-responsive container with different max widths per device
+<ResponsiveContainer
+  mobileMaxWidth="full"
+  tabletMaxWidth="lg"
+  desktopMaxWidth="xl"
+  gradient
+  minHeight="screen"
+>
+  <h1>Auto-responsive content</h1>
+  <p>This container automatically adjusts based on screen size</p>
+</ResponsiveContainer>
+
+// Custom responsive container
+<ResponsiveContainer
+  mobilePadding={false}
+  tabletPadding={true}
+  desktopPadding={true}
+  centered={false}
+>
+  <div>Custom responsive layout</div>
+</ResponsiveContainer>
+```
+
 ## 🎯 Design Tokens
 
 ### Colors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "1.8.7",
+  "version": "1.9.0",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",
@@ -57,16 +57,26 @@
     "@radix-ui/react-alert-dialog": ">=1.0.0",
     "@radix-ui/react-collapsible": ">=1.0.0",
     "@radix-ui/react-dialog": ">=1.0.0",
+    "@radix-ui/react-dropdown-menu": ">=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",
+    "@radix-ui/react-separator": ">=1.0.0",
+    "@radix-ui/react-slot": ">=1.0.0",
+    "@radix-ui/react-switch": ">=1.0.0",
+    "@radix-ui/react-tabs": ">=1.0.0",
+    "@radix-ui/react-toggle": ">=1.0.0",
+    "@radix-ui/react-toggle-group": ">=1.0.0",
+    "@radix-ui/react-tooltip": ">=1.0.0",
+    "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.0.0",
     "lucide-react": ">=0.400.0",
     "react": ">=18.0.0",
     "react-day-picker": ">=9.0.0",
     "react-dom": ">=18.0.0",
+    "react-i18next": ">=13.0.0",
     "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
@@ -74,18 +84,28 @@
     "@radix-ui/react-alert-dialog": "^1.1.8",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.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",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.577.0",
     "react": "^18.0.0",
     "react-day-picker": "^9.14.0",
     "react-dom": "^18.0.0",
+    "react-i18next": "^13.0.0",
     "tailwind-merge": "^3.5.0",
     "typescript": "~5.9.2"
   },

package/src/presentation/atoms/Separator.tsx

@@ -0,0 +1,34 @@
+/**
+ * Separator Component (Atom) - Shadcn/ui format
+ * @description Visual separator/divider component
+ */
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '../../infrastructure/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/src/presentation/atoms/Switch.tsx

@@ -0,0 +1,55 @@
+/**
+ * Switch Component (Atom) - Shadcn/ui format
+ * @description Toggle switch component using class-variance-authority
+ */
+
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../infrastructure/utils';
+
+const switchVariants = cva(
+  'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+  {
+    variants: {
+      size: {
+        default: 'h-6 w-11',
+        sm: 'h-5 w-9',
+        lg: 'h-7 w-13',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+);
+
+const switchThumbVariants = cva(
+  'pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+  {
+    variants: {
+      size: {
+        default: 'h-5 w-5 data-[state=checked]:translate-x-5',
+        sm: 'h-4 w-4 data-[state=checked]:translate-x-4',
+        lg: 'h-6 w-6 data-[state=checked]:translate-x-6',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+);
+
+export interface SwitchProps extends React.ComponentProps<typeof SwitchPrimitives.Root>, VariantProps<typeof switchVariants> {}
+
+const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
+  ({ className, size, ...props }, ref) => (
+    <SwitchPrimitives.Root className={cn(switchVariants({ size, className }))} {...props} ref={ref}>
+      <SwitchPrimitives.Thumb className={cn(switchThumbVariants({ size }))} />
+    </SwitchPrimitives.Root>
+  )
+);
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/src/presentation/atoms/Toggle.tsx

@@ -0,0 +1,48 @@
+/**
+ * Toggle Component (Atom) - Shadcn/ui format
+ * @description Toggle button component with variants
+ */
+
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../infrastructure/utils';
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

package/src/presentation/atoms/index.ts

@@ -50,3 +50,12 @@ export { Label } from './Label';
 
 export { AspectRatio } from './AspectRatio';
 export type { AspectRatioProps } from './AspectRatio';
+
+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/hooks/index.ts

@@ -25,3 +25,6 @@ export type { UseClipboardReturn } from './useClipboard';
 export { useToggle } from './useToggle';
 
 export { useScrollLock } from './useScrollLock';
+
+export { useLanguage } from './useLanguage';
+export type { Language, SupportedLanguage, UseLanguageReturn } from './useLanguage';

package/src/presentation/hooks/useLanguage.ts

@@ -0,0 +1,109 @@
+/**
+ * useLanguage Hook
+ * @description Language management with i18n integration
+ */
+
+import { useTranslation } from 'react-i18next';
+
+export type Language = string;
+
+export interface SupportedLanguage {
+  name: string;
+  flag: string;
+}
+
+export interface UseLanguageReturn {
+  currentLanguage: Language;
+  changeLanguage: (language: Language) => void;
+  t: (key: string, params?: Record<string, unknown>) => string;
+  supportedLanguages: Record<Language, SupportedLanguage>;
+}
+
+/**
+ * Validates if a language code exists in supported languages
+ */
+function isValidLanguage(
+  code: string,
+  supportedLanguages: Record<Language, SupportedLanguage>
+): boolean {
+  return Object.keys(supportedLanguages).includes(code);
+}
+
+/**
+ * Normalizes language code to match supported languages
+ * Tries exact match first, then tries to match by language code prefix
+ */
+function normalizeLanguage(
+  code: string,
+  supportedLanguages: Record<Language, SupportedLanguage>,
+  defaultLanguage: Language
+): Language {
+  // If code is valid, return it
+  if (isValidLanguage(code, supportedLanguages)) {
+    return code;
+  }
+
+  // Try to extract language code (e.g., 'en-US' -> 'en')
+  const [language] = code.split('-');
+  const matchedKey = Object.keys(supportedLanguages).find((key) =>
+    key.startsWith(language)
+  );
+
+  return (matchedKey as Language) || defaultLanguage;
+}
+
+/**
+ * Language management hook with i18n integration
+ *
+ * @example
+ * ```tsx
+ * const { currentLanguage, changeLanguage, t, supportedLanguages } = useLanguage({
+ *   defaultLanguage: 'en-US',
+ *   supportedLanguages: {
+ *     'en-US': { name: 'English', flag: '🇺🇸' },
+ *     'tr-TR': { name: 'Türkçe', flag: '🇹🇷' },
+ *   }
+ * });
+ *
+ * // Change language
+ * changeLanguage('tr-TR');
+ *
+ * // Translate
+ * const title = t('common.title');
+ * ```
+ */
+export function useLanguage(options?: {
+  defaultLanguage?: Language;
+  supportedLanguages?: Record<Language, SupportedLanguage>;
+}): UseLanguageReturn {
+  const {
+    defaultLanguage = 'en-US',
+    supportedLanguages = {} as Record<Language, SupportedLanguage>,
+  } = options || {};
+
+  const { t, i18n } = useTranslation();
+
+  // Safely get and validate current language
+  const currentLanguage: Language = normalizeLanguage(
+    i18n.language,
+    supportedLanguages,
+    defaultLanguage
+  );
+
+  const changeLanguage = (language: Language) => {
+    // Validate language before changing
+    if (isValidLanguage(language, supportedLanguages)) {
+      i18n.changeLanguage(language);
+    } else {
+      // Fall back to default language
+      i18n.changeLanguage(defaultLanguage);
+    }
+  };
+
+  return {
+    currentLanguage,
+    changeLanguage,
+    t,
+    supportedLanguages,
+  };
+}

package/src/presentation/organisms/DropdownMenu.tsx

@@ -0,0 +1,186 @@
+/**
+ * Dropdown Menu Component (Organism) - Shadcn/ui format
+ * @description Dropdown menu component using Radix UI
+ */
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+
+import { cn } from '../../infrastructure/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, collisionPadding = 8, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      collisionPadding={collisionPadding}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors 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">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />;
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/src/presentation/organisms/ToggleGroup.tsx

@@ -0,0 +1,62 @@
+/**
+ * Toggle Group Component (Organism) - Shadcn/ui format
+ * @description Group of toggle buttons with single or multiple selection
+ */
+
+import * as React from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../infrastructure/utils';
+import { Toggle, toggleVariants } from '../atoms/Toggle';
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn('flex items-center justify-center gap-1', className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: variant || context.variant,
+          size: size || context.size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

package/src/presentation/organisms/index.ts

@@ -111,3 +111,25 @@ export {
   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';
+
+export { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
+export type { ToggleGroupProps, ToggleGroupItemProps } from './ToggleGroup';

package/src/presentation/templates/ResponsiveContainer.tsx

@@ -0,0 +1,178 @@
+/**
+ * ResponsiveContainer Template Component
+ * @description Responsive wrapper with mobile/desktop optimizations
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import { useBreakpoint } from '../hooks/useMediaQuery';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+
+export type ResponsiveSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface ResponsiveContainerProps
+  extends HTMLAttributes<HTMLDivElement>,
+    BaseProps,
+    ChildrenProps {
+  /**
+   * Maximum width on mobile devices
+   * @default 'full'
+   */
+  mobileMaxWidth?: ResponsiveSize;
+
+  /**
+   * Maximum width on tablet devices
+   * @default 'lg'
+   */
+  tabletMaxWidth?: ResponsiveSize;
+
+  /**
+   * Maximum width on desktop devices
+   * @default 'xl'
+   */
+  desktopMaxWidth?: ResponsiveSize;
+
+  /**
+   * Padding on mobile devices
+   * @default true
+   */
+  mobilePadding?: boolean;
+
+  /**
+   * Padding on tablet devices
+   * @default true
+   */
+  tabletPadding?: boolean;
+
+  /**
+   * Padding on desktop devices
+   * @default true
+   */
+  desktopPadding?: boolean;
+
+  /**
+   * Center content horizontally
+   * @default true
+   */
+  centered?: boolean;
+
+  /**
+   * Background gradient
+   * @default false
+   */
+  gradient?: boolean;
+
+  /**
+   * Minimum height
+   * @default 'auto'
+   */
+  minHeight?: 'auto' | 'screen' | 'full';
+}
+
+const maxWidthClasses: Record<ResponsiveSize, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  full: 'max-w-full',
+};
+
+const sizeBreakpointMap: Record<string, ResponsiveSize> = {
+  sm: 'mobileMaxWidth',
+  md: 'tabletMaxWidth',
+  lg: 'desktopMaxWidth',
+};
+
+export const ResponsiveContainer = forwardRef<
+  HTMLDivElement,
+  ResponsiveContainerProps
+>(
+  (
+    {
+      children,
+      mobileMaxWidth = 'full',
+      tabletMaxWidth = 'lg',
+      desktopMaxWidth = 'xl',
+      mobilePadding = true,
+      tabletPadding = true,
+      desktopPadding = true,
+      centered = true,
+      gradient = false,
+      minHeight = 'auto',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const breakpoint = useBreakpoint();
+
+    // Determine current max width based on breakpoint
+    const getCurrentMaxWidth = (): string => {
+      if (!breakpoint) return maxWidthClasses[mobileMaxWidth];
+
+      if (breakpoint === 'sm') {
+        return maxWidthClasses[mobileMaxWidth];
+      }
+      if (breakpoint === 'md') {
+        return maxWidthClasses[tabletMaxWidth];
+      }
+      return maxWidthClasses[desktopMaxWidth];
+    };
+
+    // Determine current padding based on breakpoint
+    const getCurrentPadding = (): string => {
+      if (!breakpoint) return mobilePadding ? 'px-4' : '';
+
+      if (breakpoint === 'sm') {
+        return mobilePadding ? 'px-4' : '';
+      }
+      if (breakpoint === 'md') {
+        return tabletPadding ? 'px-6' : '';
+      }
+      return desktopPadding ? 'px-8' : '';
+    };
+
+    // Determine current py padding based on breakpoint
+    const getCurrentPyPadding = (): string => {
+      if (!breakpoint) return 'py-8';
+
+      if (breakpoint === 'sm') {
+        return 'py-8';
+      }
+      if (breakpoint === 'md') {
+        return 'py-12';
+      }
+      return 'py-16';
+    };
+
+    const minHeightClasses: Record<
+      typeof minHeight,
+      string
+    > = {
+      auto: '',
+      screen: 'min-h-screen',
+      full: 'min-h-full',
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'transition-theme',
+          gradient && 'bg-surface-gradient',
+          minHeightClasses[minHeight],
+          getCurrentPyPadding(),
+          getCurrentPadding(),
+          centered && 'mx-auto',
+          getCurrentMaxWidth(),
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+ResponsiveContainer.displayName = 'ResponsiveContainer';

package/src/presentation/templates/index.ts

@@ -21,3 +21,6 @@ export type { PageHeaderProps, TextAlign, HeaderSize } from './PageHeader';
 
 export { ProjectSkeleton } from './ProjectSkeleton';
 export type { ProjectSkeletonProps } from './ProjectSkeleton';
+
+export { ResponsiveContainer } from './ResponsiveContainer';
+export type { ResponsiveContainerProps, ResponsiveSize } from './ResponsiveContainer';