@umituz/web-design-system 5.3.1 → 5.4.0

package/src/index.ts

@@ -1,14 +1,20 @@
-
+// Core Tokens, Types, Constants, Hooks & Utils
 export * from './domain/tokens';
 export * from './domain/types';
 export * from './infrastructure/utils';
 export * from './infrastructure/constants';
-export * from './presentation/templates';
 export * from './presentation/hooks';
 
+// Templates
+export * from './presentation/templates';
+
+// Organisms
+export * from './presentation/organisms';
+
+// Atoms
 export type { ButtonProps } from './presentation/atoms/Button';
-export { Button } from './presentation/atoms/Button';
-export type { BadgeProps } from './presentation/atoms/Badge';
+export { Button, buttonVariants } from './presentation/atoms/Button';
+export type { BadgeProps, BadgeVariant } from './presentation/atoms/Badge';
 export { Badge } from './presentation/atoms/Badge';
 export type { InputProps } from './presentation/atoms/Input';
 export { Input } from './presentation/atoms/Input';
@@ -34,6 +40,8 @@ export type { TooltipProps } from './presentation/atoms/Tooltip';
 export { Tooltip } from './presentation/atoms/Tooltip';
 export type { ProgressProps } from './presentation/atoms/Progress';
 export { Progress } from './presentation/atoms/Progress';
+export type { ProgressRingProps } from './presentation/atoms/ProgressRing';
+export { ProgressRing } from './presentation/atoms/ProgressRing';
 export { Label } from './presentation/atoms/Label';
 export type { AspectRatioProps } from './presentation/atoms/AspectRatio';
 export { AspectRatio } from './presentation/atoms/AspectRatio';
@@ -41,18 +49,58 @@ export type { SwitchProps } from './presentation/atoms/Switch';
 export { Switch } from './presentation/atoms/Switch';
 export { Separator } from './presentation/atoms/Separator';
 export { Toggle as TogglePrimitive, toggleVariants } from './presentation/atoms/Toggle';
+export { Show } from './presentation/atoms/Show';
+export type { ShowComponentProps } from './presentation/atoms/Show';
+export { Hide } from './presentation/atoms/Hide';
+export type { HideComponentProps } from './presentation/atoms/Hide';
+export { IconButton } from './presentation/atoms/IconButton';
+export type { IconButtonProps } from './presentation/atoms/IconButton';
+export { Sparkline } from './presentation/atoms/Sparkline';
+export type { SparklineProps } from './presentation/atoms/Sparkline';
+export { HeatmapStrip } from './presentation/atoms/HeatmapStrip';
+export type { HeatmapStripProps, HeatmapCell } from './presentation/atoms/HeatmapStrip';
+export { NativeSelect } from './presentation/atoms/NativeSelect';
+export type { NativeSelectProps, NativeSelectOption } from './presentation/atoms/NativeSelect';
+export { BatteryPill } from './presentation/atoms/BatteryPill';
+export type { BatteryPillProps } from './presentation/atoms/BatteryPill';
+export { CodeChip } from './presentation/atoms/CodeChip';
+export type { CodeChipProps } from './presentation/atoms/CodeChip';
+export { Kbd } from './presentation/atoms/Kbd';
+export type { KbdProps } from './presentation/atoms/Kbd';
+export { Money } from './presentation/atoms/Money';
+export type { MoneyProps } from './presentation/atoms/Money';
+export { CopyButton } from './presentation/atoms/CopyButton';
+export type { CopyButtonProps } from './presentation/atoms/CopyButton';
+export { StatusDot } from './presentation/atoms/StatusDot';
+export type { StatusDotProps, StatusType } from './presentation/atoms/StatusDot';
 
+// Molecules
 export type { FormFieldProps } from './presentation/molecules/FormField';
 export { FormField } from './presentation/molecules/FormField';
 export type { SearchBoxProps } from './presentation/molecules/SearchBox';
 export { SearchBox } from './presentation/molecules/SearchBox';
-export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './presentation/molecules/Avatar';
+export type {
+  AvatarProps,
+  AvatarImageProps,
+  AvatarFallbackProps,
+} from './presentation/molecules/Avatar';
 export { Avatar, AvatarImage, AvatarFallback } from './presentation/molecules/Avatar';
 export type { ChipProps } from './presentation/molecules/Chip';
 export { Chip } from './presentation/molecules/Chip';
 export type { ToggleProps } from './presentation/molecules/Toggle';
 export { Toggle } from './presentation/molecules/Toggle';
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } from './presentation/molecules/Select';
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from './presentation/molecules/Select';
 export type { TextareaProps } from './presentation/molecules/Textarea';
 export { Textarea } from './presentation/molecules/Textarea';
 export type { RadioGroupProps, RadioOption } from './presentation/molecules/RadioGroup';
@@ -62,9 +110,35 @@ export { CheckboxGroup } from './presentation/molecules/CheckboxGroup';
 export type { InputGroupProps } from './presentation/molecules/InputGroup';
 export { InputGroup, GroupedInput } from './presentation/molecules/InputGroup';
 export { ScrollArea, ScrollBar } from './presentation/molecules/ScrollArea';
-export type { ListItemProps } from './presentation/molecules/ListItem';
-export { ListItem } from './presentation/molecules/ListItem';
+export type { ListItemProps as MoleculeListItemProps } from './presentation/molecules/ListItem';
+export { ListItem as MoleculeListItem } from './presentation/molecules/ListItem';
 export type { BookmarkButtonProps, BookmarkTone } from './presentation/molecules/BookmarkButton';
 export { BookmarkButton } from './presentation/molecules/BookmarkButton';
-
-export * from './presentation/organisms';
+export { PasswordInput } from './presentation/molecules/PasswordInput';
+export type { PasswordInputProps } from './presentation/molecules/PasswordInput';
+export { SearchInput } from './presentation/molecules/SearchInput';
+export type { SearchInputProps } from './presentation/molecules/SearchInput';
+export { ConfirmButton } from './presentation/molecules/ConfirmButton';
+export type { ConfirmButtonProps } from './presentation/molecules/ConfirmButton';
+export { Toolbar } from './presentation/molecules/Toolbar';
+export type { ToolbarProps } from './presentation/molecules/Toolbar';
+export { ActiveFilterTags } from './presentation/molecules/ActiveFilterTags';
+export type { ActiveFilterTagsProps } from './presentation/molecules/ActiveFilterTags';
+export { CodeBlock } from './presentation/molecules/CodeBlock';
+export type { CodeBlockProps } from './presentation/molecules/CodeBlock';
+export { OptionCard } from './presentation/molecules/OptionCard';
+export type { OptionCardProps } from './presentation/molecules/OptionCard';
+export { OptionTile } from './presentation/molecules/OptionTile';
+export type { OptionTileProps, OptionTileState } from './presentation/molecules/OptionTile';
+export { Field } from './presentation/molecules/Field';
+export type { FieldProps } from './presentation/molecules/Field';
+export { Segmented } from './presentation/molecules/Segmented';
+export type { SegmentedProps, SegmentedOption } from './presentation/molecules/Segmented';
+export { RatingStars } from './presentation/molecules/RatingStars';
+export type { RatingStarsProps } from './presentation/molecules/RatingStars';
+export { StatPill } from './presentation/molecules/StatPill';
+export type { StatPillProps, StatPillTone } from './presentation/molecules/StatPill';
+export { TagInput } from './presentation/molecules/TagInput';
+export type { TagInputProps } from './presentation/molecules/TagInput';
+export { MarkdownText } from './presentation/molecules/MarkdownText';
+export type { MarkdownTextProps } from './presentation/molecules/MarkdownText';

package/src/presentation/atoms/CopyButton.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { Copy, Check } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
+import { useClipboard } from '../hooks/useClipboard';
+
+export interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  label?: string;
+  copiedLabel?: string;
+  variant?: 'outline' | 'ghost' | 'secondary' | 'default';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  showLabel?: boolean;
+  onCopySuccess?: (text: string) => void;
+}
+
+const sizeStyles = {
+  xs: 'h-6 px-2 text-xs gap-1 [&_svg]:size-3',
+  sm: 'h-8 px-2.5 text-xs gap-1.5 [&_svg]:size-3.5',
+  md: 'h-9 px-3 text-sm gap-2 [&_svg]:size-4',
+  lg: 'h-10 px-4 text-sm gap-2 [&_svg]:size-4',
+};
+
+const iconOnlySizeStyles = {
+  xs: 'h-6 w-6 p-0 [&_svg]:size-3',
+  sm: 'h-8 w-8 p-0 [&_svg]:size-3.5',
+  md: 'h-9 w-9 p-0 [&_svg]:size-4',
+  lg: 'h-10 w-10 p-0 [&_svg]:size-4',
+};
+
+const variantStyles = {
+  default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+  ghost: 'hover:bg-accent hover:text-accent-foreground',
+};
+
+export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
+  (
+    {
+      text,
+      label = 'Kopyala',
+      copiedLabel = 'Kopyalandı',
+      variant = 'outline',
+      size = 'sm',
+      showLabel = false,
+      className,
+      onClick,
+      onCopySuccess,
+      ...props
+    },
+    ref
+  ) => {
+    const { copied, copy } = useClipboard();
+
+    const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(e);
+      if (e.defaultPrevented) return;
+      const success = await copy(text);
+      if (success) {
+        onCopySuccess?.(text);
+      }
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label={copied ? copiedLabel : label}
+        title={copied ? copiedLabel : label}
+        className={cn(
+          'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 shrink-0 select-none',
+          showLabel ? sizeStyles[size] : iconOnlySizeStyles[size],
+          variantStyles[variant],
+          copied && 'text-emerald-600 dark:text-emerald-400 border-emerald-500/40 bg-emerald-500/10 hover:bg-emerald-500/20',
+          className
+        )}
+        onClick={handleCopy}
+        {...props}
+      >
+        {copied ? (
+          <Check className="shrink-0 transition-transform duration-200 scale-110" />
+        ) : (
+          <Copy className="shrink-0" />
+        )}
+        {showLabel && (
+          <span>{copied ? copiedLabel : label}</span>
+        )}
+      </button>
+    );
+  }
+);
+
+CopyButton.displayName = 'CopyButton';

package/src/presentation/atoms/StatusDot.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { cn } from '../../infrastructure/utils';
+
+export type StatusType =
+  | 'online'
+  | 'offline'
+  | 'busy'
+  | 'away'
+  | 'pending'
+  | 'success'
+  | 'warning'
+  | 'error';
+
+export interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
+  status: StatusType;
+  ping?: boolean;
+  label?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+}
+
+const colorMap: Record<StatusType, { dot: string; ping: string }> = {
+  online: { dot: 'bg-emerald-500', ping: 'bg-emerald-400' },
+  success: { dot: 'bg-emerald-500', ping: 'bg-emerald-400' },
+  busy: { dot: 'bg-rose-500', ping: 'bg-rose-400' },
+  error: { dot: 'bg-rose-500', ping: 'bg-rose-400' },
+  away: { dot: 'bg-amber-500', ping: 'bg-amber-400' },
+  warning: { dot: 'bg-amber-500', ping: 'bg-amber-400' },
+  pending: { dot: 'bg-sky-500', ping: 'bg-sky-400' },
+  offline: { dot: 'bg-zinc-400 dark:bg-zinc-500', ping: 'bg-zinc-300' },
+};
+
+const dotSizeMap = {
+  xs: 'size-1.5',
+  sm: 'size-2',
+  md: 'size-2.5',
+  lg: 'size-3.5',
+};
+
+const textSizeMap = {
+  xs: 'text-xs',
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+export const StatusDot = React.forwardRef<HTMLSpanElement, StatusDotProps>(
+  ({ status, ping = false, label, size = 'sm', className, ...props }, ref) => {
+    const colors = colorMap[status] ?? colorMap.offline;
+
+    return (
+      <span
+        ref={ref}
+        className={cn('inline-flex items-center gap-2 select-none', textSizeMap[size], className)}
+        {...props}
+      >
+        <span className="relative flex shrink-0 items-center justify-center">
+          {ping && status !== 'offline' && (
+            <span
+              className={cn(
+                'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
+                colors.ping
+              )}
+            />
+          )}
+          <span
+            className={cn(
+              'relative inline-flex rounded-full',
+              dotSizeMap[size],
+              colors.dot
+            )}
+          />
+        </span>
+        {label && <span className="text-foreground/90 font-medium">{label}</span>}
+      </span>
+    );
+  }
+);
+
+StatusDot.displayName = 'StatusDot';

package/src/presentation/atoms/index.ts

@@ -1,5 +1,4 @@
-
-export { Button } from './Button';
+export { Button, buttonVariants } from './Button';
 export type { ButtonProps } from './Button';
 
 export { Badge } from './Badge';
@@ -60,7 +59,6 @@ export { Toggle, toggleVariants } from './Toggle';
 
 export { Show } from './Show';
 export type { ShowComponentProps } from './Show';
-
 export { Hide } from './Hide';
 export type { HideComponentProps } from './Hide';
 
@@ -68,9 +66,9 @@ export { IconButton } from './IconButton';
 export type { IconButtonProps } from './IconButton';
 
 export { Sparkline } from './Sparkline';
+export type { SparklineProps } from './Sparkline';
 export { HeatmapStrip } from './HeatmapStrip';
 export type { HeatmapStripProps, HeatmapCell } from './HeatmapStrip';
-export type { SparklineProps } from './Sparkline';
 
 export { NativeSelect } from './NativeSelect';
 export type { NativeSelectProps, NativeSelectOption } from './NativeSelect';
@@ -86,3 +84,10 @@ export type { KbdProps } from './Kbd';
 
 export { Money } from './Money';
 export type { MoneyProps } from './Money';
+
+// New Productivity Atoms
+export { CopyButton } from './CopyButton';
+export type { CopyButtonProps } from './CopyButton';
+
+export { StatusDot } from './StatusDot';
+export type { StatusDotProps, StatusType } from './StatusDot';

package/src/presentation/molecules/ConfirmButton.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { Button, type ButtonProps } from '../atoms/Button';
+import { Check, X } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
+
+export interface ConfirmButtonProps extends Omit<ButtonProps, 'onConfirm'> {
+  onConfirm: () => void | Promise<void>;
+  confirmText?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  timeoutMs?: number;
+}
+
+export const ConfirmButton = React.forwardRef<HTMLButtonElement, ConfirmButtonProps>(
+  (
+    {
+      onConfirm,
+      confirmText = 'Emin misiniz?',
+      confirmLabel = 'Evet',
+      cancelLabel = 'İptal',
+      timeoutMs = 4000,
+      children,
+      variant = 'destructive',
+      size = 'default',
+      className,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const [isConfirming, setIsConfirming] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    React.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
+    }, []);
+
+    const resetConfirmation = () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      setIsConfirming(false);
+    };
+
+    const handleInitialClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsConfirming(true);
+
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        setIsConfirming(false);
+      }, timeoutMs);
+    };
+
+    const handleConfirm = async (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+      try {
+        setIsLoading(true);
+        await onConfirm();
+      } finally {
+        setIsLoading(false);
+        setIsConfirming(false);
+      }
+    };
+
+    const handleCancel = (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      resetConfirmation();
+    };
+
+    if (isConfirming) {
+      return (
+        <div className={cn('inline-flex items-center gap-1.5 animate-in fade-in zoom-in-95 duration-150', className)}>
+          <span className="text-xs font-semibold text-destructive px-1 select-none">
+            {confirmText}
+          </span>
+          <Button
+            type="button"
+            size="xs"
+            variant="destructive"
+            loading={isLoading}
+            onClick={handleConfirm}
+            className="gap-1 h-7 px-2"
+          >
+            <Check className="size-3" />
+            <span>{confirmLabel}</span>
+          </Button>
+          <Button
+            type="button"
+            size="xs"
+            variant="ghost"
+            disabled={isLoading}
+            onClick={handleCancel}
+            className="h-7 px-1.5 text-muted-foreground hover:text-foreground"
+          >
+            <X className="size-3" />
+            <span className="sr-only">{cancelLabel}</span>
+          </Button>
+        </div>
+      );
+    }
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        disabled={disabled || isLoading}
+        onClick={handleInitialClick}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);
+
+ConfirmButton.displayName = 'ConfirmButton';

package/src/presentation/molecules/PasswordInput.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { Input, type InputProps } from '../atoms/Input';
+import { cn } from '../../infrastructure/utils';
+
+export interface PasswordInputProps extends Omit<InputProps, 'type'> {
+  showToggle?: boolean;
+}
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ showToggle = true, className, ...props }, ref) => {
+    const [visible, setVisible] = React.useState(false);
+
+    const toggleVisibility = (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setVisible((prev) => !prev);
+    };
+
+    return (
+      <div className={cn('relative flex items-center w-full', className)}>
+        <Input
+          ref={ref}
+          type={visible ? 'text' : 'password'}
+          className="pr-10"
+          {...props}
+        />
+        {showToggle && (
+          <button
+            type="button"
+            onClick={toggleVisibility}
+            aria-label={visible ? 'Şifreyi gizle' : 'Şifreyi göster'}
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground focus:outline-none transition-colors p-1"
+          >
+            {visible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+PasswordInput.displayName = 'PasswordInput';

package/src/presentation/molecules/SearchInput.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { Search, X } from 'lucide-react';
+import { Input, type InputProps } from '../atoms/Input';
+import { Spinner } from '../atoms/Spinner';
+import { cn } from '../../infrastructure/utils';
+
+export interface SearchInputProps extends Omit<InputProps, 'onChange' | 'value' | 'defaultValue'> {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  onSearch?: (value: string) => void;
+  onClear?: () => void;
+  debounceMs?: number;
+  loading?: boolean;
+  clearable?: boolean;
+}
+
+export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue = '',
+      onChange,
+      onSearch,
+      onClear,
+      debounceMs = 0,
+      loading = false,
+      clearable = true,
+      placeholder = 'Ara...',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const currentValue = isControlled ? controlledValue : internalValue;
+
+    const debounceTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    React.useEffect(() => {
+      return () => {
+        if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      };
+    }, []);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const nextVal = e.target.value;
+      if (!isControlled) {
+        setInternalValue(nextVal);
+      }
+      onChange?.(nextVal);
+
+      if (debounceMs > 0 && onSearch) {
+        if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(() => {
+          onSearch(nextVal);
+        }, debounceMs);
+      }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+        onSearch?.(currentValue);
+      }
+    };
+
+    const handleClear = () => {
+      if (!isControlled) {
+        setInternalValue('');
+      }
+      onChange?.('');
+      onClear?.();
+      onSearch?.('');
+    };
+
+    return (
+      <div className={cn('relative flex items-center w-full', className)}>
+        <Search className="absolute left-3 size-4 text-muted-foreground pointer-events-none shrink-0" />
+        <Input
+          ref={ref}
+          type="text"
+          value={currentValue}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className="pl-9 pr-9"
+          {...props}
+        />
+        <div className="absolute right-2.5 flex items-center">
+          {loading ? (
+            <Spinner size="sm" />
+          ) : clearable && currentValue ? (
+            <button
+              type="button"
+              aria-label="Aramayı temizle"
+              onClick={handleClear}
+              className="text-muted-foreground hover:text-foreground transition-colors p-1"
+            >
+              <X className="size-3.5" />
+            </button>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+);
+
+SearchInput.displayName = 'SearchInput';

package/src/presentation/molecules/Toolbar.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cn } from '../../infrastructure/utils';
+
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  search?: React.ReactNode;
+  filters?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+export const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(
+  ({ search, filters, actions, children, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 w-full',
+          className
+        )}
+        {...props}
+      >
+        <div className="flex flex-1 flex-wrap items-center gap-2">
+          {search && <div className="w-full sm:w-72 max-w-full">{search}</div>}
+          {filters && <div className="flex flex-wrap items-center gap-2">{filters}</div>}
+          {children}
+        </div>
+        {actions && (
+          <div className="flex items-center gap-2 shrink-0 justify-end">
+            {actions}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Toolbar.displayName = 'Toolbar';