@axzydev/axzy_ui_system 1.2.8 → 1.2.11

package/src/App.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useMemo, useState } from "react";
 import {
   FaCreditCard,
-FaHome,
+  FaHome,
   FaKeyboard,
   FaRegBell,
-  FaSearch,
   FaSlidersH,
   FaTable,
 } from "react-icons/fa";
@@ -13,6 +12,7 @@ import "./index.css";
 
 // Import Showcases
 import { HomeShowcase } from "./showcases/HomeShowcase";
+import { GettingStartedShowcase } from "./showcases/GettingStartedShowcase";
 import {
   CardShowcase,
   LayoutShowcase,
@@ -60,34 +60,37 @@ import {
   ThemeProviderShowcase,
 } from "./showcases/FeedbackShowcases";
 
+type ViewMode = "home" | "ui-system";
+
 function App() {
-  const [activeComponentId, setActiveComponentId] = useState(
-    () => window.location.hash.replace("#", "") || "home"
-  );
-  const [searchTerm, setSearchTerm] = useState("");
-  const [subitemConnector, setSubitemConnector] = useState<
+  const [view, setView] = useState<ViewMode>(() => {
+    const hash = window.location.hash.replace("#", "");
+    return hash.startsWith("ui-system") ? "ui-system" : "home";
+  });
+  const [showroomActive, setShowroomActive] = useState("getting-started");
+  const [searchTerm] = useState("");
+  const [subitemConnector] = useState<
     "dot" | "|" | "none"
   >("dot");
 
   useEffect(() => {
     const onHashChange = () => {
-      const id = window.location.hash.replace("#", "") || "home";
-      setActiveComponentId(id);
+      const hash = window.location.hash.replace("#", "");
+      setView(hash.startsWith("ui-system") ? "ui-system" : "home");
     };
     window.addEventListener("hashchange", onHashChange);
     return () => window.removeEventListener("hashchange", onHashChange);
   }, []);
 
-  useEffect(() => {
-    window.location.hash = activeComponentId;
-  }, [activeComponentId]);
-
-  // Group definitions for the sidebar
+  // Group definitions for the sidebar (UI System showroom)
   const categories = [
     {
       id: "general",
       label: "General",
       icon: <FaHome />,
+      subitems: [
+        { id: "getting-started", label: "Getting Started" },
+      ],
     },
     {
       id: "struc",
@@ -169,8 +172,8 @@ function App() {
           if (matches) {
             return {
               ...cat,
-              isActive: activeComponentId === cat.id,
-              action: () => setActiveComponentId(cat.id),
+              isActive: showroomActive === cat.id,
+              action: () => setShowroomActive(cat.id),
             };
           }
           return null;
@@ -185,8 +188,8 @@ function App() {
         const mappedSubitems = matchingSubitems.map((sub) => ({
           id: sub.id,
           label: sub.label,
-          isActive: activeComponentId === sub.id,
-          action: () => setActiveComponentId(sub.id),
+          isActive: showroomActive === sub.id,
+          action: () => setShowroomActive(sub.id),
         }));
 
         const isAnySubitemActive = mappedSubitems.some((sub) => sub.isActive);
@@ -202,7 +205,7 @@ function App() {
         if (cat.subitems) return cat.subitems.length > 0;
         return true;
       });
-  }, [searchTerm, activeComponentId]);
+  }, [searchTerm, showroomActive]);
 
   const sidebarProps = {
     navigationItems: filteredNavigationItems,
@@ -210,27 +213,26 @@ function App() {
   };
 
   const topBarProps = {
-    logoText: "AXZY Showroom",
+    logoText: "AXZY UI System",
     userMenu: {
       userName: "Alex Dev",
       userEmail: "alex@axzy.dev",
       menuItems: [
         {
-          label: "Resetear Demo",
+          label: "Ir al Portafolio",
           onClick: () => {
-            setActiveComponentId("home");
-            setSearchTerm("");
+            window.location.hash = "home";
           },
         },
       ],
     },
   };
 
-  // Render correct component based on active navigation
+  // Render correct component based on active showroom navigation
   const renderShowcase = () => {
-    switch (activeComponentId) {
-      case "home":
-        return <HomeShowcase />;
+    switch (showroomActive) {
+      case "getting-started":
+        return <GettingStartedShowcase />;
       // Structure
       case "layout":
         return <LayoutShowcase />;
@@ -301,17 +303,25 @@ function App() {
       case "themeprovider":
         return <ThemeProviderShowcase />;
       default:
-        return <HomeShowcase />;
+        return <GettingStartedShowcase />;
     }
   };
 
   return (
-    <ITThemeProvider showFab={true}>
-      <ITLayout sidebar={sidebarProps} topBar={topBarProps}>
-        <div className="max-w-7xl mx-auto">
-          {renderShowcase()}
+    <ITThemeProvider showFab={false}>
+      {view === "home" ? (
+        <div className="min-h-screen bg-slate-50 dark:bg-slate-950 py-10 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-6xl mx-auto">
+            <HomeShowcase />
+          </div>
         </div>
-      </ITLayout>
+      ) : (
+        <ITLayout sidebar={sidebarProps} topBar={topBarProps}>
+          <div className="max-w-7xl mx-auto">
+            {renderShowcase()}
+          </div>
+        </ITLayout>
+      )}
     </ITThemeProvider>
   );
 }

package/src/components/avatar/avatar.props.ts

@@ -11,7 +11,18 @@ export interface ITAvatarProps {
   initials?: string;
   /** Avatar dimensions. Valid values: `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. @default "md" */
   size?: AvatarSize;
-  /** Background color class for the initials fallback. @default "bg-primary-600" */
+  /**
+   * Color de fondo para el fallback de iniciales. Acepta un valor de color
+   * real (`"#8b5cf6"`, `"rgb(...)"`, `"hsl(...)"`, `"var(--...)"`) — se
+   * aplica como `style` inline y SIEMPRE se renderiza — o una clase de
+   * Tailwind (`"bg-purple-600"`) por compatibilidad con código existente.
+   * Una clase de Tailwind solo se ve si esa clase exacta ya existe en el
+   * CSS compilado que consume la app (esta librería se distribuye con un
+   * CSS estático pre-compilado, ver scripts/build-css.mjs), así que para
+   * cualquier color calculado en tiempo de ejecución (p.ej. un hash por
+   * usuario) se recomienda pasar el valor de color directamente.
+   * @default "bg-primary-600"
+   */
   color?: string;
   /** Additional CSS class names for the avatar container. */
   className?: string;

package/src/components/avatar/avatar.stories.tsx

@@ -44,3 +44,22 @@ export const Sizes: Story = {
     </div>
   ),
 };
+
+export const WithRawColor: Story = {
+  name: "Con color calculado en runtime",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Cuando el color se calcula dinámicamente (por ejemplo, un hash por usuario o etiqueta), pasa un valor de color real en vez de una clase de Tailwind. Una clase de Tailwind arbitraria solo se ve si ya existe en el CSS pre-compilado de esta librería; un color inline siempre se aplica.",
+      },
+    },
+  },
+  render: () => (
+    <div className="flex items-center gap-4">
+      {["#3b82f6", "#a855f7", "#059669", "#f59e0b", "#ec4899"].map((hex) => (
+        <ITAvatar key={hex} initials="JD" size="md" color={hex} />
+      ))}
+    </div>
+  ),
+};

package/src/components/avatar/avatar.tsx

@@ -14,6 +14,17 @@ const DEFAULT_COLOR = "bg-primary-600";
 const DEFAULT_BG = "var(--color-primary-600)";
 const DEFAULT_SHADOW = "0 4px 14px 0 rgba(37, 99, 235, 0.35)";
 
+// Un valor tipo "#8b5cf6", "rgb(...)", "hsl(...)" o "var(--...)" se aplica
+// como color inline; cualquier otra cosa se trata como clase de Tailwind
+// (comportamiento previo, sin romper a quien ya pasa "bg-purple-600" etc.).
+// Motivo: esta librería se consume vía un CSS estático pre-compilado
+// (ver scripts/build-css.mjs) que solo contiene las clases usadas en el
+// código FUENTE de la librería. Si una app consumidora pasa un color de
+// Tailwind que la librería nunca usa en ningún otro lado, esa clase no
+// existe en el CSS entregado y el avatar se renderiza sin color visible.
+// Un valor de color inline no tiene ese problema: siempre se aplica.
+const isRawColorValue = (value: string) => /^#|^rgb|^hsl|^var\(/i.test(value.trim());
+
 /**
  * Circular avatar component with image, initials fallback, and optional badge overlay.
  *
@@ -22,6 +33,11 @@ const DEFAULT_SHADOW = "0 4px 14px 0 rgba(37, 99, 235, 0.35)";
  *
  * @example
  * <ITAvatar initials="JD" size="md" color="bg-purple-600" />
+ *
+ * @example
+ * // Recomendado cuando el color se calcula en tiempo de ejecución (p.ej. un
+ * // hash por usuario/etiqueta): pasa un valor de color real, no una clase.
+ * <ITAvatar initials="JD" size="md" color="#8b5cf6" />
  */
 export default function ITAvatar({
   src,
@@ -34,17 +50,24 @@ export default function ITAvatar({
   onClick,
 }: ITAvatarProps) {
   const { container, text } = sizeMap[size];
-  const useInlineStyle = !color || color === DEFAULT_COLOR;
+  const useDefaultStyle = !color || color === DEFAULT_COLOR;
+  const useRawColorStyle = !useDefaultStyle && isRawColorValue(color);
 
   return (
     <div
       className={clsx(
         "relative inline-flex items-center justify-center rounded-full flex-shrink-0 overflow-hidden text-white font-bold tracking-wide",
         container,
-        !useInlineStyle && color,
+        !useDefaultStyle && !useRawColorStyle && color,
         className,
       )}
-      style={useInlineStyle ? { backgroundColor: DEFAULT_BG, boxShadow: DEFAULT_SHADOW } : undefined}
+      style={
+        useDefaultStyle
+          ? { backgroundColor: DEFAULT_BG, boxShadow: DEFAULT_SHADOW }
+          : useRawColorStyle
+          ? { backgroundColor: color }
+          : undefined
+      }
       onClick={onClick}
       role={onClick ? "button" : undefined}
       tabIndex={onClick ? 0 : undefined}

package/src/components/confirm-dialog/confirm-dialog.tsx

@@ -37,7 +37,7 @@ export default function ITConfirmDialog({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-[300] flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
       <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
       <div
         className={clsx(

package/src/components/data-table/dataTable.props.ts

@@ -1,18 +1,28 @@
 import { ReactNode } from "react";
 import { Column } from "../table/table.props";
 
+/** Parameters passed to `fetchData` every time pagination, filters, or sorting change. */
 export interface ITDataTableFetchParams {
+  /** 1-indexed current page number. */
   page: number;
+  /** Number of rows requested per page. */
   limit: number;
+  /** Active per-column filter values (from `Column.filter`), keyed by column `key`. */
   filters: Record<string, string | number | boolean | Date>;
+  /** Active sort, present only when the user has clicked a sortable column header. */
   sort?: {
+    /** Column `key` currently sorted by. */
     key: string;
+    /** Sort direction. */
     direction: "asc" | "desc";
   };
 }
 
+/** Expected shape of the Promise returned by `fetchData`. */
 export interface ITDataTableResponse<T> {
+  /** Rows for the requested page. */
   data: T[];
+  /** Total row count across all pages (used to compute the paginator's total pages). */
   total: number;
 }
 

package/src/components/data-table/dataTable.tsx

@@ -11,6 +11,17 @@ import { Column } from "../table/table.props";
 import { formatCurrencyMX } from "../table/table";
 import { ITDataTableProps } from "./dataTable.props";
 import ITText from "@/components/text/text";
+import {
+  tableActionsCell,
+  tableBody,
+  tableCell,
+  tableCellText,
+  tableContainer,
+  tableEmptyContent,
+  tableHeaderCell,
+  tableHeaderRow,
+  tableRow,
+} from "@/utils/styles";
 
 const getNestedValue = (obj: unknown, path: string) => {
   return path.split(".").reduce((acc, part) => acc && acc[part], obj);
@@ -157,7 +168,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
         return <FaSpinner className="animate-spin" aria-label="Cargando opciones" title="Cargando opciones" />;
       }
       if (col.catalogOptions.error) {
-        return <ITText as="span" className="text-red-500 text-xs">Error cargando</ITText>;
+        return <ITText as="span" className="text-danger-500 text-xs">Error cargando</ITText>;
       }
       return (
         <ITSelect
@@ -203,9 +214,9 @@ export default function ITDataTable<T extends Record<string, unknown>>({
         return typeof value === "number" && col.currencyMX ? formatCurrencyMX(value) : value;
       case "boolean":
         return value ? (
-          <FaCheck className="text-green-500" aria-label="Verdadero" title="Verdadero" />
+          <FaCheck className="text-success-500" aria-label="Verdadero" title="Verdadero" />
         ) : (
-          <FaTimes className="text-red-500" aria-label="Falso" title="Falso" />
+          <FaTimes className="text-danger-500" aria-label="Falso" title="Falso" />
         );
       case "actions":
         return col.actions ? col.actions(row) : null;
@@ -253,7 +264,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
 
   return (
     <div className={clsx("space-y-4 w-full relative", containerClassName)}>
-      <div className="rounded-xl shadow-sm overflow-hidden" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+      <div className={tableContainer} style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
         {title && (
           <div className="px-6 py-5 flex items-center justify-between" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
             <ITText as="h2" className="text-xl font-bold text-secondary-900 leading-tight">{title}</ITText>
@@ -316,7 +327,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
                 ))
               ) : (
                 !isLoading && (
-                  <div className="flex flex-col items-center justify-center py-12 text-secondary-400">
+                  <div className={clsx(tableEmptyContent, "py-12")}>
                     <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
                     <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
                   </div>
@@ -336,9 +347,9 @@ export default function ITDataTable<T extends Record<string, unknown>>({
               )}
             >
               <thead>
-                <tr className="bg-secondary-50 text-xs uppercase tracking-wider font-semibold text-slate-700 dark:text-slate-200">
+                <tr className={clsx(tableHeaderRow, "dark:text-slate-200")}>
                   {columns.map((col) => (
-                    <th key={col.key} scope="col" className={clsx("px-4 py-4 align-top", col.className)}>
+                    <th key={col.key} scope="col" className={tableHeaderCell(col.className)}>
                       <div className="flex flex-col gap-3 min-w-[150px]">
                         <div className="flex items-center justify-between gap-2">
                            <ITText as="span" className="text-slate-900 dark:text-white font-bold">{col.label}</ITText>
@@ -364,18 +375,18 @@ export default function ITDataTable<T extends Record<string, unknown>>({
                   ))}
                 </tr>
               </thead>
-              <tbody className="divide-y divide-slate-100 dark:divide-slate-700/30">
+              <tbody className={clsx(tableBody, "dark:divide-slate-700/30")}>
                 {data.length > 0 ? (
                   data.map((row, rowIndex) => (
-                    <tr key={rowIndex} className={clsx("hover:bg-secondary-50/50 transition-colors duration-150 group", variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20")}>
+                    <tr key={rowIndex} className={clsx(tableRow, variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20")}>
                       {columns.map((col) => (
-                        <td key={`${rowIndex}-${col.key}`} className={clsx("px-4 py-3 align-middle", col.className)}>
+                        <td key={`${rowIndex}-${col.key}`} className={tableCell(col.className)}>
                           {col.type === "actions" ? (
-                            <div className="flex items-center justify-center gap-2">
+                            <div className={tableActionsCell}>
                               {renderCellContent(col, row) as React.ReactNode}
                             </div>
                           ) : (
-                            <div className="text-secondary-700 font-medium">
+                            <div className={tableCellText}>
                               {renderCellContent(col, row) as React.ReactNode}
                             </div>
                           )}
@@ -387,7 +398,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
                   <tr>
                     <td colSpan={columns.length} className="px-6 py-12 text-center">
                       {!isLoading && (
-                        <div className="flex flex-col items-center justify-center text-secondary-400">
+                        <div className={tableEmptyContent}>
                           <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
                           <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
                         </div>

package/src/components/date-picker/datePicker.tsx

@@ -303,7 +303,7 @@ export default function ITDatePicker({
       {isOpen && (
         <div
           className={clsx(
-            "fixed z-[9999]",
+            "fixed z-[70]",
             calendarClassName,
             range ? "w-[320px]" : "w-[280px]"
           )}

package/src/components/dialog/dialog.tsx

@@ -67,9 +67,10 @@ export default function ITDialog({
 
   const content = (
     <div
+      data-it-dialog="true"
       className={`fixed inset-0 flex ${
         fullScreen ? "items-stretch" : "items-center justify-center"
-      } bg-black/50 z-[9999]`}
+      } bg-black/50 z-[60]`}
     >
       <div
         ref={modalRef}

package/src/components/drawer/drawer.tsx

@@ -41,7 +41,7 @@ export default function ITDrawer({
   return (
     <>
       {isOpen && (
-        <div className="fixed inset-0 z-[100] flex">
+        <div className="fixed inset-0 z-[50] flex">
           <div className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" />
           <div
             ref={panelRef}

package/src/components/dropfile/dropfile.props.ts

@@ -7,6 +7,12 @@ export enum FileTypeEnum {
   PNG = "image/png",
   JPG = "image/jpg",
   JPEG = "image/jpeg",
+  MP4 = "video/mp4",
+  MOV = "video/quicktime",
+  AVI = "video/x-msvideo",
+  MKV = "video/x-matroska",
+  VIDEO_3GPP = "video/3gpp",
+  WEBM = "video/webm",
 }
 
 /** Upload lifecycle status */

package/src/components/dropfile/dropfile.tsx

@@ -3,6 +3,7 @@ import { useDropzone } from "react-dropzone";
 // import pdfjsLib from "@/hooks/pdf"; // Disabled as hook is missing
 import clsx from "clsx";
 import ITText from "@/components/text/text";
+import ITButton from "@/components/button/button";
 import { ITDropfileProps, FileTypeEnum, UploadStatus } from "./dropfile.props";
 export { FileTypeEnum, UploadStatus } from "./dropfile.props";
 
@@ -94,6 +95,24 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
         case FileTypeEnum.JPEG:
           accept[FileTypeEnum.JPEG] = [".jpeg", ".jpg"];
           break;
+        case FileTypeEnum.MP4:
+          accept[FileTypeEnum.MP4] = [".mp4"];
+          break;
+        case FileTypeEnum.MOV:
+          accept[FileTypeEnum.MOV] = [".mov"];
+          break;
+        case FileTypeEnum.AVI:
+          accept[FileTypeEnum.AVI] = [".avi"];
+          break;
+        case FileTypeEnum.MKV:
+          accept[FileTypeEnum.MKV] = [".mkv"];
+          break;
+        case FileTypeEnum.VIDEO_3GPP:
+          accept[FileTypeEnum.VIDEO_3GPP] = [".3gp"];
+          break;
+        case FileTypeEnum.WEBM:
+          accept[FileTypeEnum.WEBM] = [".webm"];
+          break;
       }
     });
     
@@ -121,6 +140,14 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
         case FileTypeEnum.JPEG:
            if (!extensions.includes("IMAGEN")) extensions.push("IMAGEN");
           break;
+        case FileTypeEnum.MP4:
+        case FileTypeEnum.MOV:
+        case FileTypeEnum.AVI:
+        case FileTypeEnum.MKV:
+        case FileTypeEnum.VIDEO_3GPP:
+        case FileTypeEnum.WEBM:
+          if (!extensions.includes("VIDEO")) extensions.push("VIDEO");
+          break;
       }
     });
     
@@ -341,35 +368,43 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
           <div className="px-3 py-2 bg-white border-t border-gray-100 flex justify-end gap-2">
             {!isConfirmed ? (
               <>
-                <button
+                <ITButton
                   type="button"
+                  variant="outlined"
+                  color="secondary"
+                  size="small"
                   onClick={handleCancel}
-                  className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                 >
-                  <ITText as="span">Cancelar</ITText>
-                </button>
-                <button
+                  <ITText>Cancelar</ITText>
+                </ITButton>
+                <ITButton
                   type="button"
+                  variant="filled"
+                  color="primary"
+                  size="small"
                   onClick={handleConfirm}
-                  className="px-3 py-1.5 text-xs font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 shadow-sm transition-colors flex items-center gap-1"
                 >
-                  <ITText as="span">Confirmar</ITText>
-                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                  </svg>
-                </button>
+                  <div className="flex items-center gap-2">
+                    <ITText>Confirmar</ITText>
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                </ITButton>
               </>
             ) : (
-              <button
+              <ITButton
                 type="button"
+                variant="outlined"
+                color="danger"
+                size="small"
                 onClick={handleDelete}
-                className="px-3 py-1.5 text-xs font-medium text-danger-600 bg-danger-50 border border-danger-100 rounded-lg hover:bg-danger-100 transition-colors flex items-center gap-1"
               >
                 <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                 </svg>
-                <ITText as="span">Eliminar</ITText>
-              </button>
+                <ITText>Eliminar</ITText>
+              </ITButton>
             )}
           </div>
 
@@ -392,4 +427,4 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   );
 };
 
-export default ITDropfile;
+export default ITDropfile;

package/src/components/layout/layout.tsx

@@ -73,7 +73,7 @@ export default function ITLayout({
         {/* MOBILE SIDEBAR PANE */}
         {mobileSidebarOpen && (
           <div
-            className="lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40"
+            className="lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40"
             onClick={() => setMobileSidebarOpen(false)}
           >
             <div

package/src/components/navbar/navbar.tsx

@@ -116,7 +116,7 @@ export default function ITNavbar({
                     {isUserMenuOpen && (
                       <div
                         ref={userMenuRef}
-                        className="z-50 absolute right-0 mt-2 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm"
+                        className="z-[70] absolute right-0 mt-2 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm"
                       >
                         <div className="px-4 py-3">
                           <ITText as="span" className="block text-sm text-gray-900">
@@ -152,7 +152,7 @@ export default function ITNavbar({
 
         <div className="flex-1 flex overflow-hidden relative">
           {(showSidebar || showSidebarOnMobile) && (
-            <aside className="fixed inset-y-0 left-0 w-64 bg-gray-50 transform transition-transform duration-300 ease-in-out z-50 shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200">
+            <aside className="fixed inset-y-0 left-0 w-64 bg-gray-50 transform transition-transform duration-300 ease-in-out z-[40] shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200">
               <div className="h-full overflow-y-auto py-4 px-3">
                 <ul className="space-y-2 font-medium">{sidebarItems}</ul>
               </div>

package/src/components/popover/popover.tsx

@@ -47,7 +47,7 @@ export default function ITPopover({
         {trigger}
       </div>
       {open && (
-        <div className={clsx("absolute z-[200]", positionClasses[position])}>
+        <div className={clsx("absolute z-[70]", positionClasses[position])}>
           <div className="bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 p-3 min-w-[160px]">
             {children}
           </div>

package/src/components/search-select/search-select.tsx

@@ -148,7 +148,7 @@ export default function ITSearchSelect({
   const getInputStyle = () => {
     const style: React.CSSProperties = {
       backgroundColor: inputTheme.backgroundColor || "#ffffff",
-      borderColor: inputTheme.borderColor || "#e2e8f0",
+      borderColor: inputTheme.borderColor || "var(--color-secondary-300)",
       borderRadius: inputTheme.borderRadius || "0.5rem",
       padding: inputTheme.padding || "0.5rem 0.75rem",
       fontSize: inputTheme.fontSize || "0.875rem",
@@ -160,8 +160,8 @@ export default function ITSearchSelect({
     };
 
     if (disabled) {
-      style.backgroundColor = inputTheme.disabled?.backgroundColor || "#f1f5f9";
-      style.borderColor = inputTheme.disabled?.borderColor || "#e2e8f0";
+      style.backgroundColor = inputTheme.disabled?.backgroundColor || "var(--color-secondary-100)";
+      style.borderColor = inputTheme.disabled?.borderColor || "var(--color-secondary-200)";
       style.opacity = 0.7;
       style.cursor = "not-allowed";
     }
@@ -217,7 +217,7 @@ export default function ITSearchSelect({
 
         {/* Dropdown Panel */}
         {isOpen && (
-          <div className="absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top">
+          <div className="absolute z-[70] w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top">
             <div className="max-h-60 overflow-y-auto">
               {filteredOptions.length > 0 ? (
                 filteredOptions.map((option) => (