@axzydev/axzy_ui_system 1.2.9 → 1.2.12

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";
@@ -61,36 +60,35 @@ 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: "home", label: "Home" },
         { id: "getting-started", label: "Getting Started" },
       ],
     },
@@ -174,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;
@@ -190,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);
@@ -207,7 +205,7 @@ function App() {
         if (cat.subitems) return cat.subitems.length > 0;
         return true;
       });
-  }, [searchTerm, activeComponentId]);
+  }, [searchTerm, showroomActive]);
 
   const sidebarProps = {
     navigationItems: filteredNavigationItems,
@@ -215,27 +213,24 @@ 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
@@ -308,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

@@ -12,7 +12,18 @@ const sizeMap: Record<AvatarSize, { container: string; text: string }> = {
 
 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)";
+const DEFAULT_SHADOW = "0 6px 16px -2px rgba(37, 99, 235, 0.25)";
+
+// 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/calendar/calendar.tsx

@@ -371,7 +371,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
              {/* Weekday Headers */}
              <div className="grid grid-cols-7 mb-2">
                 {['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'].map(day => (
-                  <ITText key={day} as="div" className="text-center text-xs font-semibold text-gray-400 uppercase py-1">
+                  <ITText key={day} as="div" className="text-center text-xs font-semibold text-secondary-400 uppercase py-1">
                     {day}
                   </ITText>
                 ))}

package/src/components/card/card.tsx

@@ -33,15 +33,18 @@ export default function ITCard({
 
   const containerStyle: React.CSSProperties = {
     backgroundColor: "var(--card-bg, #ffffff)",
-    borderColor: "var(--card-border, #e2e8f0)",
+    borderColor: "var(--card-border, rgba(15, 23, 42, 0.06))",
     borderWidth: "1px",
-    borderRadius: "var(--card-radius, 0.75rem)",
+    borderRadius: "var(--card-radius, var(--radius-2xl))",
+    // Soft depth: every card floats a little at rest; interactive cards
+    // gain visual weight on hover instead of appearing flat until clicked.
     boxShadow: onClick
       ? isHovered
-        ? "0 8px 25px -5px rgba(0, 0, 0, 0.1)"
-        : "0 1px 3px 0 rgba(0, 0, 0, 0.05)"
-      : "none",
-    transition: onClick ? "all 0.2s ease-in-out" : "none",
+        ? "var(--shadow-lg)"
+        : "var(--shadow-sm)"
+      : "var(--shadow-sm)",
+    transition: onClick ? "box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out" : "none",
+    transform: onClick && isHovered ? "translateY(-2px)" : "translateY(0)",
     cursor: onClick ? "pointer" : "default",
   };
 
@@ -74,12 +77,12 @@ export default function ITCard({
             {title}
           </ITText>
         )}
-        <ITText as="div" className="text-gray-600">{children}</ITText>
+        <ITText as="div" className="text-secondary-600">{children}</ITText>
       </div>
       {actions && (
         <div
           className={clsx(
-            "p-4 border-t border-gray-100 mt-auto",
+            "p-4 border-t border-secondary-100 mt-auto",
             actionClassName,
           )}
         >

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);
@@ -136,14 +147,14 @@ export default function ITDataTable<T extends Record<string, unknown>>({
           title={`${getToggleLabel()} para ${col.label}`}
           disabled={isLoading}
         >
-          <div className="relative w-10 h-5 bg-gray-300 rounded-full">
+          <div className="relative w-10 h-5 bg-secondary-300 rounded-full">
             <div
               className={clsx(
                 "absolute top-0.5 w-4 h-4 rounded-full transition-all duration-300 shadow-sm",
                 {
-                  "left-0.5 bg-gray-400": currentValue === undefined,
+                  "left-0.5 bg-secondary-400": currentValue === undefined,
                   "left-5 bg-slate-500": currentValue === true,
-                  "left-0.5 bg-gray-500": currentValue === false,
+                  "left-0.5 bg-secondary-500": currentValue === false,
                 }
               )}
             />
@@ -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-slate-900/50 z-[60]`}
     >
       <div
         ref={modalRef}
@@ -97,7 +98,7 @@ export default function ITDialog({
         ) : (
           <>
             <button
-              className="absolute top-2 right-2 text-gray-600 hover:text-gray-900"
+              className="absolute top-2 right-2 text-secondary-600 hover:text-secondary-900"
               onClick={onClose}
             >
               <FaRegTimesCircle />

package/src/components/divider/divider.tsx

@@ -14,7 +14,7 @@ import { ITDividerProps } from "./divider.props";
  *
  * @example
  * ```tsx
- * <ITDivider orientation="vertical" color="bg-red-500" thickness="w-1" />
+ * <ITDivider orientation="vertical" color="bg-danger-500" thickness="w-1" />
  * ```
  */
 export default function ITDivider({

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 */