@axzydev/axzy_ui_system 1.2.0 → 1.2.2

package/src/components/toast/toast.tsx

@@ -0,0 +1,87 @@
+import { positionStyles } from "@/types/toast.types";
+import { theme } from "@/theme/theme";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import "./toast.css";
+import { ITToastProps } from "./toast.props";
+import { FaTimesCircle, FaCheckCircle, FaExclamationTriangle, FaInfoCircle, FaTimes } from "react-icons/fa";
+import ITText from "@/components/text/text";
+
+export default function ITToast({
+  message,
+  type = "info",
+  duration = 1500,
+  position = "top-right",
+  onClose,
+}: ITToastProps) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+      setTimeout(() => {
+        if (onClose) onClose();
+      }, 300); // Wait for transition to finish
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  const handleClose = () => {
+    setIsVisible(false);
+    setTimeout(() => {
+      if (onClose) onClose();
+    }, 300);
+  };
+
+  // Resolve dynamic theme colors for background
+  const isThemeColor = type in theme.colors;
+  const backgroundColor = isThemeColor
+    ? theme.colors[type as keyof typeof theme.colors][500]
+    : theme.colors.primary[500];
+
+  // Determine Icon based on type
+  const TypeIcon = () => {
+    switch (type) {
+      case "success":
+        return <FaCheckCircle className="w-5 h-5 flex-shrink-0" />;
+      case "error":
+      case "danger":
+        return <FaTimesCircle className="w-5 h-5 flex-shrink-0" />;
+      case "warning":
+        return <FaExclamationTriangle className="w-5 h-5 flex-shrink-0" />;
+      case "info":
+      default:
+        return <FaInfoCircle className="w-5 h-5 flex-shrink-0" />;
+    }
+  };
+
+  return (
+    <div
+      className={clsx(
+        "fixed z-50 p-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300 text-white min-w-[300px]",
+        positionStyles[position],
+        {
+          "opacity-100 translate-y-0 scale-100": isVisible,
+          "opacity-0 scale-95": !isVisible,
+          "-translate-y-4": !isVisible && position.startsWith("top"),
+          "translate-y-4": !isVisible && position.startsWith("bottom"),
+        }
+      )}
+      style={{ backgroundColor }}
+      role="alert"
+    >
+      <div className="flex items-center gap-3">
+        <TypeIcon />
+        <ITText as="span" className="font-medium text-sm sm:text-base leading-snug">{message}</ITText>
+      </div>
+      <button
+        onClick={handleClose}
+        className="p-1.5 rounded-full hover:bg-black/15 transition-colors focus:outline-none focus:ring-2 focus:ring-white/50"
+        aria-label="Close notification"
+      >
+        <FaTimes className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}

package/src/components/tooltip/tooltip.props.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+export type TooltipPosition = "top" | "bottom" | "left" | "right";
+
+export interface ITTooltipProps {
+  content: ReactNode;
+  children: ReactNode;
+  position?: TooltipPosition;
+  delay?: number;
+  className?: string;
+}

package/src/components/tooltip/tooltip.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITTooltip from "./tooltip";
+import ITButton from "../button/button";
+
+const meta: Meta<typeof ITTooltip> = {
+  title: "Components/Overlay/ITTooltip",
+  component: ITTooltip,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITTooltip>;
+
+export const Top: Story = {
+  args: { content: "Tooltip arriba", position: "top", children: <ITButton label="Hover me" /> },
+};
+
+export const Bottom: Story = {
+  args: { content: "Tooltip abajo", position: "bottom", children: <ITButton label="Hover me" /> },
+};

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import clsx from "clsx";
+import { ITTooltipProps, TooltipPosition } from "./tooltip.props";
+import ITText from "@/components/text/text";
+
+const positionClasses: Record<TooltipPosition, string> = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+  left: "right-full top-1/2 -translate-y-1/2 mr-2",
+  right: "left-full top-1/2 -translate-y-1/2 ml-2",
+};
+
+const arrowClasses: Record<TooltipPosition, string> = {
+  top: "top-full left-1/2 -translate-x-1/2 border-l-4 border-r-4 border-t-4 border-transparent border-t-slate-800",
+  bottom: "bottom-full left-1/2 -translate-x-1/2 border-l-4 border-r-4 border-b-4 border-transparent border-b-slate-800",
+  left: "left-full top-1/2 -translate-y-1/2 border-t-4 border-b-4 border-l-4 border-transparent border-l-slate-800",
+  right: "right-full top-1/2 -translate-y-1/2 border-t-4 border-b-4 border-r-4 border-transparent border-r-slate-800",
+};
+
+export default function ITTooltip({
+  content,
+  children,
+  position = "top",
+  delay = 200,
+  className,
+}: ITTooltipProps) {
+  const [visible, setVisible] = useState(false);
+  let timeout: ReturnType<typeof setTimeout>;
+
+  const handleMouseEnter = () => {
+    timeout = setTimeout(() => setVisible(true), delay);
+  };
+  const handleMouseLeave = () => {
+    clearTimeout(timeout);
+    setVisible(false);
+  };
+
+  return (
+    <div
+      className={clsx("relative inline-flex", className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+      {visible && (
+        <div className={clsx("absolute z-[200] pointer-events-none", positionClasses[position])}>
+          <div className="bg-slate-800 dark:bg-slate-700 text-white text-xs rounded-lg px-2.5 py-1.5 whitespace-nowrap shadow-lg">
+            <ITText as="span">{content}</ITText>
+          </div>
+          <div className={clsx("absolute", arrowClasses[position])} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/topbar/topbar.props.ts

@@ -0,0 +1,21 @@
+export interface ITTopBarNavItem {
+  id: string;
+  label: string;
+  icon?: any;
+  action: () => void;
+}
+
+export interface ITTopBarProps {
+  logo?: any;
+  logoText?: string;
+  userMenu?: {
+    userName: string;
+    userEmail: string;
+    userImage?: string;
+    menuItems: { label: string; onClick: () => void }[];
+  };
+  navItems?: ITTopBarNavItem[];
+  onNavItemClick?: (id: string) => void;
+  showMobileMenuButton?: boolean;
+  onToggleMobileMenu?: () => void;
+}

package/src/components/topbar/topbar.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ITTopBar from './topbar';
+import { FaShieldAlt, FaChartBar, FaUserCog } from 'react-icons/fa';
+
+const meta: Meta<typeof ITTopBar> = {
+  title: 'Components/Layout & Navigation/ITTopBar',
+  component: ITTopBar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Un Header moderno, con efecto glassmorphism, sombras suaves y un submenú de usuario flotante con diseño premium. Totalmente integrado a theme.ts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITTopBar>;
+
+const mockUserMenu = {
+  userName: 'Alejandro G.',
+  userEmail: 'alejandro@axzy.io',
+  userImage: 'https://i.pravatar.cc/150?u=a042581f4e29026024d',
+  menuItems: [
+    { label: 'Mi Perfil', onClick: () => console.log('Perfil clicked') },
+    { label: 'Configuración de Cuenta', onClick: () => console.log('Config clicked') },
+    { label: 'Preferencias', onClick: () => console.log('Preferencias clicked') },
+    { label: 'Cerrar Sesión', onClick: () => console.log('Logout clicked') },
+  ],
+};
+
+const mockNavItems = [
+  { id: '1', label: 'Monitor', icon: <FaChartBar />, action: () => console.log('Monitor') },
+  { id: '2', label: 'Seguridad', icon: <FaShieldAlt />, action: () => console.log('Seguridad') },
+  { id: '3', label: 'Admin', icon: <FaUserCog />, action: () => console.log('Admin') },
+];
+
+export const Default: Story = {
+  args: {
+    logoText: 'AXZY SYSTEM',
+    showMobileMenuButton: true,
+    userMenu: mockUserMenu,
+    navItems: mockNavItems,
+    onToggleMobileMenu: () => console.log('Toggle Mobile Menu'),
+  },
+  render: (args) => (
+    <div className="h-[400px] w-full bg-slate-50 overflow-y-auto">
+      <ITTopBar {...args} />
+      <div className="p-8">
+        <h1 className="text-2xl font-bold text-slate-800 mb-4">Contenido de ejemplo</h1>
+        <p className="text-slate-500 max-w-2xl leading-relaxed mb-6">
+          Haz scroll hacia abajo para ver cómo el ITTopBar mantiene su efecto glassmorphism 
+          (fondo desenfocado) mientras se superpone al contenido. Prueba también a hacer clic 
+          en el avatar del usuario a la derecha para ver el nuevo menú desplegable flotante.
+        </p>
+        {[1, 2, 3, 4, 5].map(i => (
+          <div key={i} className="h-24 bg-white rounded-xl border border-slate-200 shadow-sm mb-4"></div>
+        ))}
+      </div>
+    </div>
+  )
+};
+
+export const WithoutNavigation: Story = {
+  args: {
+    logoText: 'AXZY Simple',
+    showMobileMenuButton: true,
+    userMenu: {
+      ...mockUserMenu,
+      userImage: undefined, // Test without avatar image
+    },
+  },
+  render: (args) => (
+    <div className="h-[250px] w-full bg-slate-50">
+      <ITTopBar {...args} />
+    </div>
+  )
+};

package/src/components/topbar/topbar.tsx

@@ -0,0 +1,205 @@
+import { FaUserCircle, FaBars } from "react-icons/fa";
+import useClickOutside from "../../hooks/useClickOutside";
+import { useRef, useState } from "react";
+import { ITTopBarProps } from "./topbar.props";
+import ITText from "@/components/text/text";
+
+export default function ITTopBar({
+  logo,
+  logoText,
+  userMenu,
+  showMobileMenuButton,
+  onToggleMobileMenu,
+  navItems,
+  onNavItemClick,
+}: ITTopBarProps) {
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  const userMenuRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(userMenuRef, () => setIsUserMenuOpen(false));
+
+  return (
+    <header 
+      className="sticky top-0 z-40 backdrop-blur-md transition-all duration-300"
+      style={{
+        backgroundColor: "var(--topbar-bg, rgba(255, 255, 255, 0.9))",
+        borderBottom: "1px solid var(--topbar-border, #e2e8f0)",
+        boxShadow: "none",
+      }}
+    >
+      <div className="flex items-center justify-between h-[72px] px-6 lg:px-8">
+
+        {/* LEFT AREA: Logo & Mobile Toggle */}
+        <div className="flex items-center gap-5">
+
+          {/* Mobile Sidebar Toggle */}
+          {showMobileMenuButton && (
+            <button
+              className="lg:hidden p-2.5 rounded-xl transition-colors duration-200"
+              style={{
+                 color: "var(--topbar-icon, #64748b)",
+              }}
+              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = "var(--topbar-user-hover, #f1f5f9)"}
+              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = "transparent"}
+              onClick={onToggleMobileMenu}
+            >
+              <FaBars className="w-[1.125rem] h-[1.125rem]" />
+            </button>
+          )}
+
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            {logo && (
+              <div className="flex-shrink-0 drop-shadow-sm">
+                 {logo}
+              </div>
+            )}
+  
+            {logoText && (
+              <ITText as="span" 
+                 className="text-[1.15rem] font-bold tracking-tight"
+                 style={{ color: "var(--topbar-text, #0f172a)" }}
+              >
+                {logoText}
+              </ITText>
+            )}
+          </div>
+
+          {/* Top Navigation Items (Desktop) */}
+          {navItems && navItems.length > 0 && (
+            <nav className="hidden md:flex ml-8 space-x-1 border-l pl-8" style={{ borderColor: "var(--topbar-border, #e2e8f0)" }}>
+              {navItems.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => onNavItemClick?.(item.id)}
+                  className="px-4 py-2 rounded-lg font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]"
+                  style={{ color: "var(--topbar-text, #475569)" }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.color = "var(--topbar-text, #0f172a)";
+                    e.currentTarget.style.backgroundColor = "var(--topbar-user-hover, #f1f5f9)";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.color = "var(--topbar-text, #475569)";
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  }}
+                >
+                  <div className="flex items-center gap-2">
+                    {item.icon && <span className="opacity-70">{item.icon}</span>}
+                    <ITText as="span">{item.label}</ITText>
+                  </div>
+                </button>
+              ))}
+            </nav>
+          )}
+        </div>
+
+        {/* RIGHT AREA: User Menu */}
+        {userMenu && (
+          <div className="relative">
+            <button
+              type="button"
+              className="flex items-center gap-3 rounded-full pl-2 pr-4 py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-gray-200"
+              style={{
+                backgroundColor: isUserMenuOpen ? "var(--topbar-user-hover, #f1f5f9)" : "transparent",
+              }}
+              onMouseEnter={(e) => {
+                if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--topbar-user-hover, #f1f5f9)";
+              }}
+              onMouseLeave={(e) => {
+                if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "transparent";
+              }}
+              onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
+            >
+              {/* Avatar */}
+              <div className="relative">
+                {userMenu.userImage ? (
+                  <img
+                    className="w-9 h-9 rounded-full object-cover ring-2 ring-white shadow-sm"
+                    src={userMenu.userImage}
+                    alt="Current user"
+                  />
+                ) : (
+                  <div className="w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm">
+                     <FaUserCircle className="w-6 h-6" style={{ color: "var(--topbar-icon, #94a3b8)" }} />
+                  </div>
+                )}
+                {/* Active dot indicator */}
+                <div className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></div>
+              </div>
+
+              {/* Name Details */}
+              <div className="hidden sm:flex flex-col text-left py-0.5">
+                <ITText as="span" 
+                  className="font-semibold text-[0.85rem] leading-tight"
+                  style={{ color: "var(--topbar-user-text, #0f172a)" }}
+                >
+                  {userMenu.userName}
+                </ITText>
+                <ITText as="span" 
+                  className="text-[0.7rem] font-medium"
+                  style={{ color: "var(--topbar-user-subtitle, #64748b)" }}
+                >
+                  {userMenu.userEmail}
+                </ITText>
+              </div>
+            </button>
+
+            {/* Dropdown Menu */}
+            <div
+              ref={userMenuRef}
+              className={`
+                absolute right-0 mt-3 w-64 rounded-2xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] z-50 overflow-hidden transform origin-top-right transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]
+                ${isUserMenuOpen ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-2 pointer-events-none"}
+              `}
+              style={{ 
+                backgroundColor: "var(--topbar-user-dropdown-bg, #ffffff)",
+                border: "1px solid var(--topbar-user-dropdown-border, #f1f5f9)"
+              }}
+            >
+               {/* Dropdown Header */}
+              <div className="px-5 py-4 border-b" style={{ borderColor: "var(--topbar-user-dropdown-border, #f1f5f9)", backgroundColor: "var(--topbar-user-bg, #f8fafc)" }}>
+                <ITText as="span" className="block font-bold text-[0.9rem]" style={{ color: "var(--topbar-user-text, #0f172a)" }}>
+                  {userMenu.userName}
+                </ITText>
+                <ITText as="span" className="block text-xs font-medium truncate mt-0.5" style={{ color: "var(--topbar-user-subtitle, #64748b)" }}>
+                  {userMenu.userEmail}
+                </ITText>
+              </div>
+              
+              {/* Dropdown Items */}
+              <ul className="py-2">
+                {userMenu.menuItems.map((m, i) => {
+                  const isDestructive = m.label.toLowerCase().includes('salir') || m.label.toLowerCase().includes('cerrar') || m.label.toLowerCase().includes('logout');
+                  
+                  return (
+                    <li key={i} className="px-2">
+                       {i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && (
+                          <div className="h-px bg-slate-100 my-1 mx-2"></div>
+                       )}
+                      <button
+                        onClick={(e) => {
+                           m.onClick();
+                           setIsUserMenuOpen(false);
+                        }}
+                        className="block w-full text-left px-3 py-2.5 rounded-xl text-[0.875rem] font-medium transition-colors duration-150"
+                        style={{ color: isDestructive ? '#ef4444' : "var(--topbar-user-text, #334155)" }}
+                        onMouseEnter={(e) => {
+                          e.currentTarget.style.backgroundColor = isDestructive ? '#fef2f2' : "var(--topbar-user-item-hover, #f8fafc)";
+                        }}
+                        onMouseLeave={(e) => {
+                          e.currentTarget.style.backgroundColor = "transparent";
+                        }}
+                      >
+                        <ITText as="span">{m.label}</ITText>
+                      </button>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}

package/src/components/triple-filter/tripleFilter.props.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ColorsTypes } from "@/types/colors.types";
+
+export interface ITTripleFilterOption<T> {
+  label: string;
+  value: T;
+}
+
+export interface ITTripleFilterProps<T> {
+  value: T;
+  onChange: (value: T) => void;
+  options: ITTripleFilterOption<T>[];
+  color?: ColorsTypes;
+  className?: string;
+}

package/src/components/triple-filter/tripleFilter.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ITTripleFilter from './tripleFilter';
+
+const meta: Meta<typeof ITTripleFilter> = {
+  title: 'Components/ITTripleFilter',
+  component: ITTripleFilter,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITTripleFilter>;
+
+export const Default: Story = {
+  args: {
+    value: 'all',
+    options: [
+      { label: 'Todos', value: 'all' },
+      { label: 'Activos', value: 'active' },
+      { label: 'Inactivos', value: 'inactive' },
+    ],
+  },
+};
+
+export const Boolean: Story = {
+  args: {
+    value: true,
+    options: [
+      { label: 'Sí', value: true },
+      { label: 'No', value: false },
+    ],
+  },
+};

package/src/components/triple-filter/tripleFilter.tsx

@@ -0,0 +1,50 @@
+import clsx from "clsx";
+import { ITTripleFilterProps } from "./tripleFilter.props";
+import { ColorsTypes } from "@/types/colors.types";
+import ITText from "@/components/text/text";
+
+const colorMap: Record<ColorsTypes, string> = {
+  primary: "text-primary-600",
+  secondary: "text-secondary-600",
+  success: "text-success-600",
+  danger: "text-danger-600",
+  warning: "text-warning-600",
+  info: "text-info-600",
+  purple: "text-purple-600",
+  error: "text-danger-600",
+  gray: "text-secondary-600",
+};
+
+/**
+ * @description Generic triple/segmented filter component with color support.
+ */
+export const ITTripleFilter = <T extends string | boolean>({
+  value,
+  onChange,
+  options,
+  color = "primary",
+  className,
+}: ITTripleFilterProps<T>) => {
+  return (
+    <div
+      className={clsx("flex bg-slate-100 p-1 rounded-xl gap-1 w-fit", className)}
+    >
+      {options.map((option) => (
+        <button
+          key={String(option.value)}
+          onClick={() => onChange(option.value)}
+          className={clsx(
+            "px-4 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all duration-200 whitespace-nowrap",
+            value === option.value
+              ? clsx("bg-white shadow-sm", colorMap[color])
+              : "text-slate-400 hover:text-slate-600"
+          )}
+        >
+          <ITText as="span">{option.label}</ITText>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default ITTripleFilter;

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+
+const useClickOutside = (
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void
+) => {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, callback]);
+};
+
+export default useClickOutside;

package/src/hooks/useDebouncedSearch.ts

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface UseDebouncedSearchOptions {
+  initialValue?: string;
+  debounceMs?: number;
+  onSearch: (value: string) => void;
+}
+
+interface UseDebouncedSearchResult {
+  searchTerm: string;
+  setSearchTerm: (value: string) => void;
+  handleSearchChange: (value: string) => void;
+  handleClearSearch: () => void;
+}
+
+export function useDebouncedSearch({
+  initialValue = "",
+  debounceMs = 500,
+  onSearch,
+}: UseDebouncedSearchOptions): UseDebouncedSearchResult {
+  const [searchTerm, setSearchTerm] = useState(initialValue);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const debouncedSearch = useCallback(
+    (value: string) => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        onSearch(value);
+      }, debounceMs);
+    },
+    [onSearch, debounceMs]
+  );
+
+  const handleSearchChange = useCallback(
+    (value: string) => {
+      setSearchTerm(value);
+      debouncedSearch(value);
+    },
+    [debouncedSearch]
+  );
+
+  const handleClearSearch = useCallback(() => {
+    setSearchTerm("");
+    onSearch("");
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+  }, [onSearch]);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return { searchTerm, setSearchTerm, handleSearchChange, handleClearSearch };
+}