@axzydev/axzy_ui_system 1.2.6 → 1.2.7

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/grid/grid.tsx

@@ -13,6 +13,11 @@ function breakpointSpan(span: number | undefined, bp: string, cols: number) {
   return `${bp}:col-span-${clamped}`;
 }
 
+function gridColsClass(cols: number) {
+  const clamped = Math.min(Math.max(cols, 1), 12);
+  return `grid-cols-${clamped}`;
+}
+
 export default function ITGrid({
   children,
   container,
@@ -31,9 +36,8 @@ export default function ITGrid({
   if (container) {
     return (
       <Component
-        className={clsx("grid", className)}
+        className={clsx("grid", gridColsClass(columns), className)}
         style={{
-          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
           gap: spacing > 0 ? `${spacing * 0.25}rem` : undefined,
           ...style,
         }}
@@ -47,6 +51,7 @@ export default function ITGrid({
     return (
       <Component
         className={clsx(
+          "col-span-full",
           colSpanClass(xs ?? sm, columns),
           sm !== undefined && breakpointSpan(sm, "sm", columns),
           md !== undefined && breakpointSpan(md, "md", columns),

package/src/components/layout/layout.tsx

@@ -3,6 +3,8 @@ import clsx from "clsx";
 import ITTopBar from "../topbar/topbar";
 import ITSidebar from "../sidebar/sidebar";
 import { ITLayoutProps } from "./layout.props";
+import { theme } from "@/theme/theme";
+
 export default function ITLayout({
   topBar,
   sidebar,
@@ -10,37 +12,33 @@ export default function ITLayout({
   className = "",
   contentClassName = "",
 }: ITLayoutProps) {
-
-  // Desktop states
-  const [desktopCollapsed, setDesktopCollapsed] = useState(true); // Default to collapsed
-
-  // Mobile drawer state
+  const [desktopCollapsed, setDesktopCollapsed] = useState(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
 
+  const layoutTokens = theme.layout;
+
   return (
     <div className={`flex flex-col h-screen overflow-hidden w-full ${className}`}>
-      
-      {/* TOPBAR - Full Width at Top */}
       <ITTopBar
         {...topBar}
         showMobileMenuButton
         onToggleMobileMenu={() => setMobileSidebarOpen(v => !v)}
       />
 
-      <div className="flex flex-1 overflow-hidden relative" style={{ backgroundColor: "var(--layout-bg, #f8fafc)" }}>
-        
-        {/* DESKTOP SIDEBAR - Floating over content when expanded */}
+      <div
+        className="flex flex-1 overflow-hidden relative"
+        style={{ backgroundColor: layoutTokens.backgroundColor }}
+      >
+        {/* DESKTOP SIDEBAR */}
         <div className="hidden lg:block relative z-40 h-full">
-          {/* Spacer to keep main content from shifting. Width matches collapsed sidebar. */}
           <div className="w-[88px] h-full flex-shrink-0" />
-          
           <div className="absolute top-0 left-0 h-full">
             <ITSidebar
               {...sidebar}
               isCollapsed={desktopCollapsed}
               onToggleCollapse={() => setDesktopCollapsed(v => !v)}
               visibleOnMobile={false}
-              className={`h-full drop-shadow-2xl transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] flex-shrink-0`}
+              className="h-full drop-shadow-2xl transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] flex-shrink-0"
             />
           </div>
         </div>
@@ -51,11 +49,11 @@ export default function ITLayout({
             className="lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40"
             onClick={() => setMobileSidebarOpen(false)}
           >
-            <div 
+            <div
               className="h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]"
-              onClick={(e) => e.stopPropagation()} 
+              onClick={(e) => e.stopPropagation()}
             >
-               <ITSidebar
+              <ITSidebar
                 {...sidebar}
                 isCollapsed={false}
                 visibleOnMobile={true}
@@ -74,7 +72,6 @@ export default function ITLayout({
             {children}
           </div>
         </main>
-
       </div>
     </div>
   );

package/src/components/navbar/navbar.tsx

@@ -3,6 +3,7 @@ import { useRef, useState } from "react";
 import { FaChevronDown, FaChevronRight, FaUserCircle } from "react-icons/fa";
 import { ITNavbarProps, ITNavigationItem } from "./navbar.props";
 import ITText from "@/components/text/text";
+import { theme } from "@/theme/theme";
 
 export default function ITNavbar({
   logo,
@@ -139,15 +140,21 @@ export default function ITNavbar({
   }
 
   // New sidebar design
+  const sidebar = theme.sidebar;
+  const topbar = theme.topbar;
+
   return (
-    <div className="flex h-screen font-sans" style={{ backgroundColor: "var(--layout-bg, #f8fafc)" }}>
+    <div className="flex h-screen font-sans" style={{ backgroundColor: theme.layout.backgroundColor }}>
       {/* Sidebar */}
-      <aside className="w-72 shadow-xl flex flex-col transition-all duration-300 ease-in-out" style={{ backgroundColor: "var(--sidebar-bg, #0f172a)", borderRight: "1px solid var(--sidebar-border, #1e293b)" }}>
+      <aside
+        className="w-72 shadow-xl flex flex-col transition-all duration-300 ease-in-out"
+        style={{ backgroundColor: sidebar.backgroundColor, borderRight: `1px solid ${sidebar.borderColor}` }}
+      >
         {/* Logo Section */}
-        <div className="p-6 flex items-center gap-3" style={{ borderBottom: "1px solid var(--sidebar-border, #1e293b)" }}>
+        <div className="p-6 flex items-center gap-3" style={{ borderBottom: `1px solid ${sidebar.borderColor}` }}>
           {logo && <div className="h-8 w-auto object-contain transition-transform hover:scale-105">{logo}</div>}
           {logoText && (
-            <ITText as="span" className="text-lg font-bold tracking-wide" style={{ color: "var(--sidebar-active-color, #ffffff)" }}>
+            <ITText as="span" className="text-lg font-bold tracking-wide" style={{ color: sidebar.active.color }}>
               {logoText}
             </ITText>
           )}
@@ -160,46 +167,42 @@ export default function ITNavbar({
               <li key={item.id}>
                 <div
                   className={`group flex items-center justify-between px-4 py-3 rounded-xl cursor-pointer transition-all duration-200 border-l-4 ${
-                    item.isActive 
-                      ? 'shadow-sm' 
+                    item.isActive
+                      ? 'shadow-sm'
                       : 'hover:shadow-sm'
                   }`}
                   onClick={() => handleItemClick(item)}
                   style={{
-                    backgroundColor: item.isActive ? "var(--sidebar-active-bg, rgba(255,255,255,0.1))" : "transparent",
-                    borderColor: item.isActive ? "var(--sidebar-active-icon, #3b82f6)" : "transparent",
-                    color: item.isActive ? "var(--sidebar-active-color, #ffffff)" : "var(--sidebar-label-color, #94a3b8)"
+                    backgroundColor: item.isActive ? sidebar.active.backgroundColor : "transparent",
+                    borderColor: item.isActive ? sidebar.active.iconColor : "transparent",
+                    color: item.isActive ? sidebar.active.color : sidebar.label.color
                   }}
                   onMouseEnter={(e) => {
                     if (!item.isActive) {
-                      e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, rgba(255,255,255,0.05))";
-                      e.currentTarget.style.color = "var(--sidebar-active-color, #ffffff)";
+                      e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor;
+                      e.currentTarget.style.color = sidebar.active.color;
                     }
                   }}
                   onMouseLeave={(e) => {
                     if (!item.isActive) {
                       e.currentTarget.style.backgroundColor = "transparent";
-                      e.currentTarget.style.color = "var(--sidebar-label-color, #94a3b8)";
+                      e.currentTarget.style.color = sidebar.label.color;
                     }
                   }}
                 >
                   <div className="flex items-center gap-3">
-                    {/* Icon */}
                     {item.icon && (
                       <div className="text-xl transition-colors" style={{
-                        color: item.isActive ? "var(--sidebar-active-icon, #3b82f6)" : "var(--sidebar-icon-color, #64748b)"
+                        color: item.isActive ? sidebar.active.iconColor : sidebar.icon.color
                       }}>
                         {item.icon}
                       </div>
                     )}
-                    
-                    {/* Label */}
                     <ITText as="span" className={`font-medium text-sm ${item.isActive ? 'font-semibold' : ''}`}>{item.label}</ITText>
                   </div>
 
-                  {/* Chevron for expandable items */}
                   {item.subitems && item.subitems.length > 0 && (
-                    <div className="transition-transform" style={{ color: "var(--sidebar-icon-color, #64748b)" }}>
+                    <div className="transition-transform" style={{ color: sidebar.icon.color }}>
                       {expandedItems.has(item.id) ? (
                         <FaChevronDown className="w-3 h-3" />
                       ) : (
@@ -209,23 +212,22 @@ export default function ITNavbar({
                   )}
                 </div>
 
-                {/* Submenu */}
-                {item.subitems && 
-                 item.subitems.length > 0 && 
+                {item.subitems &&
+                 item.subitems.length > 0 &&
                  expandedItems.has(item.id) && (
-                  <ul className="mt-1 ml-4 pl-4 space-y-1" style={{ borderLeft: "1px solid var(--sidebar-border, #1e293b)" }}>
+                  <ul className="mt-1 ml-4 pl-4 space-y-1" style={{ borderLeft: `1px solid ${sidebar.borderColor}` }}>
                     {item.subitems.map((subitem) => (
                       <li key={subitem.id}>
                         <button
                           onClick={subitem.action}
                           className="block w-full text-left px-4 py-2.5 rounded-lg text-sm transition-all duration-200"
                           style={{
-                            color: subitem.isActive ? "var(--sidebar-active-color, #ffffff)" : "var(--sidebar-label-color, #94a3b8)",
-                            backgroundColor: subitem.isActive ? "var(--sidebar-active-bg, rgba(255,255,255,0.1))" : "transparent"
+                            color: subitem.isActive ? sidebar.active.color : sidebar.label.color,
+                            backgroundColor: subitem.isActive ? sidebar.active.backgroundColor : "transparent"
                           }}
                           onMouseEnter={(e) => {
                             if (!subitem.isActive) {
-                              e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, rgba(255,255,255,0.05))";
+                              e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor;
                             }
                           }}
                           onMouseLeave={(e) => {
@@ -247,14 +249,14 @@ export default function ITNavbar({
 
         {/* User Menu */}
         {userMenu && (
-          <div className="p-4" style={{ borderTop: "1px solid var(--sidebar-border, #1e293b)" }}>
+          <div className="p-4" style={{ borderTop: `1px solid ${sidebar.borderColor}` }}>
             <div className="relative">
               <button
                 type="button"
                 className="flex items-center gap-3 w-full p-3 rounded-xl transition-colors duration-200 group"
-                style={{ color: "var(--sidebar-label-color, #94a3b8)" }}
-                onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, rgba(255,255,255,0.05))"; e.currentTarget.style.color = "var(--sidebar-active-color, #ffffff)"; }}
-                onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = "transparent"; e.currentTarget.style.color = "var(--sidebar-label-color, #94a3b8)"; }}
+                style={{ color: sidebar.label.color }}
+                onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor; e.currentTarget.style.color = sidebar.active.color; }}
+                onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = "transparent"; e.currentTarget.style.color = sidebar.label.color; }}
                 onClick={toggleUserMenu}
               >
                 {userMenu.userImage ? (
@@ -262,37 +264,40 @@ export default function ITNavbar({
                     className="w-10 h-10 rounded-full border-2 transition-colors"
                     src={userMenu.userImage}
                     alt="user photo"
-                    style={{ borderColor: "var(--sidebar-border, #1e293b)" }}
+                    style={{ borderColor: sidebar.borderColor }}
                   />
                 ) : (
-                  <div className="w-10 h-10 rounded-full flex items-center justify-center transition-colors" style={{ backgroundColor: "var(--sidebar-hover-bg, rgba(255,255,255,0.1))", color: "var(--sidebar-icon-color, #64748b)" }}>
-                      <FaUserCircle className="w-6 h-6" />
+                  <div
+                    className="w-10 h-10 rounded-full flex items-center justify-center transition-colors"
+                    style={{ backgroundColor: sidebar.hover.backgroundColor, color: sidebar.icon.color }}
+                  >
+                    <FaUserCircle className="w-6 h-6" />
                   </div>
                 )}
                 <div className="flex-1 text-left overflow-hidden">
-                  <ITText as="div" className="font-medium text-sm truncate" style={{ color: "var(--sidebar-active-color, #ffffff)" }}>
+                  <ITText as="div" className="font-medium text-sm truncate" style={{ color: sidebar.active.color }}>
                     {userMenu.userName}
                   </ITText>
-                  <ITText as="div" className="text-xs truncate" style={{ color: "var(--sidebar-label-color, #94a3b8)" }}>
+                  <ITText as="div" className="text-xs truncate" style={{ color: sidebar.label.color }}>
                     {userMenu.userEmail}
                   </ITText>
                 </div>
-                <FaChevronRight className="w-3 h-3" style={{ color: "var(--sidebar-icon-color, #64748b)" }} />
+                <FaChevronRight className="w-3 h-3" style={{ color: sidebar.icon.color }} />
               </button>
 
               {isUserMenuOpen && (
                 <div
                   ref={userMenuRef}
                   className="absolute bottom-full left-0 mb-3 w-full rounded-xl shadow-2xl overflow-hidden transform transition-all duration-200 origin-bottom"
-                  style={{ backgroundColor: "var(--topbar-user-dropdown-bg, #ffffff)", border: "1px solid var(--topbar-user-dropdown-border, #e2e8f0)" }}
+                  style={{ backgroundColor: topbar.userMenu.dropdown.backgroundColor, border: `1px solid ${topbar.userMenu.dropdown.borderColor}` }}
                 >
-                  <div className="px-4 py-3" style={{ backgroundColor: "var(--topbar-user-bg, #f8fafc)", borderBottom: "1px solid var(--topbar-user-dropdown-border, #e2e8f0)" }}>
-                      <ITText as="span" className="block text-sm font-semibold" style={{ color: "var(--topbar-user-text, #0f172a)" }}>
-                        {userMenu.userName}
-                      </ITText>
-                      <ITText as="span" className="block text-xs truncate" style={{ color: "var(--topbar-user-subtitle, #64748b)" }}>
-                        {userMenu.userEmail}
-                      </ITText>
+                  <div className="px-4 py-3" style={{ backgroundColor: topbar.userMenu.backgroundColor, borderBottom: `1px solid ${topbar.userMenu.dropdown.borderColor}` }}>
+                    <ITText as="span" className="block text-sm font-semibold" style={{ color: topbar.userMenu.textColor }}>
+                      {userMenu.userName}
+                    </ITText>
+                    <ITText as="span" className="block text-xs truncate" style={{ color: topbar.userMenu.subtitleColor }}>
+                      {userMenu.userEmail}
+                    </ITText>
                   </div>
                   <ul className="py-1">
                     {userMenu.menuItems.map((item, index) => (
@@ -303,8 +308,8 @@ export default function ITNavbar({
                             setIsUserMenuOpen(false);
                           }}
                           className="flex items-center w-full px-4 py-2.5 text-sm transition-colors"
-                          style={{ color: "var(--topbar-user-text, #334155)" }}
-                          onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = "var(--topbar-user-item-hover, #f8fafc)"; }}
+                          style={{ color: topbar.userMenu.textColor }}
+                          onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = topbar.userMenu.dropdown.itemHoverBackground; }}
                           onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = "transparent"; }}
                         >
                           <ITText as="span">{item.label}</ITText>
@@ -320,7 +325,7 @@ export default function ITNavbar({
       </aside>
 
       {/* Main Content */}
-      <main className="flex-1 overflow-y-auto relative" style={{ backgroundColor: "var(--layout-bg, #f8fafc)" }}>
+      <main className="flex-1 overflow-y-auto relative" style={{ backgroundColor: theme.layout.backgroundColor }}>
         {children}
       </main>
     </div>

package/src/components/page/page.props.ts

@@ -7,6 +7,8 @@ export interface ITPageProps {
   breadcrumbs?: ITBreadcrumbItem[];
   actions?: ReactNode;
   backAction?: () => void;
+  icon?: ReactNode;
+  iconColor?: string;
   loading?: boolean;
   error?: string | null;
   errorTitle?: string;
@@ -18,4 +20,6 @@ export interface ITPageProps {
   emptyAction?: ReactNode;
   className?: string;
   children: ReactNode;
+  maxWidth?: "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+  noPadding?: boolean;
 }

package/src/components/page/page.tsx

@@ -7,7 +7,7 @@ import ITButton from "../button/button";
 import ITStack from "../stack/stack";
 
 const hasHeader = (props: ITPageProps) =>
-  !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction);
+  !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction || props.icon);
 
 const renderHeader = (props: ITPageProps) => {
   if (!hasHeader(props)) return null;
@@ -18,6 +18,8 @@ const renderHeader = (props: ITPageProps) => {
       breadcrumbs={props.breadcrumbs}
       actions={props.actions}
       backAction={props.backAction}
+      icon={props.icon}
+      iconColor={props.iconColor}
     />
   );
 };
@@ -35,18 +37,26 @@ export default function ITPage(props: ITPageProps) {
     emptyAction,
     className,
     children,
+    maxWidth = "7xl",
+    noPadding = false,
   } = props;
 
-  const wrapperClass = clsx("space-y-6", className);
+  const wrapperClass = clsx(
+    "mx-auto w-full",
+    !noPadding && "px-4 sm:px-6 lg:px-8 py-6",
+    `max-w-${maxWidth}`,
+    "space-y-8",
+    className
+  );
 
   if (loading) {
     return (
       <div className={wrapperClass}>
         {renderHeader(props)}
-        <ITStack spacing={4}>
-          <ITSkeleton variant="rectangular" height={40} width="40%" />
-          <ITSkeleton variant="rectangular" height={200} />
-          <ITSkeleton variant="rectangular" height={200} />
+        <ITStack spacing={6}>
+          <ITSkeleton variant="rectangular" height={40} width="40%" className="rounded-lg" />
+          <ITSkeleton variant="rectangular" height={200} className="rounded-lg" />
+          <ITSkeleton variant="rectangular" height={200} className="rounded-lg" />
         </ITStack>
       </div>
     );
@@ -92,4 +102,4 @@ export default function ITPage(props: ITPageProps) {
       {children}
     </div>
   );
-}
+}

package/src/components/page-header/page-header.props.ts

@@ -7,5 +7,7 @@ export interface ITPageHeaderProps {
   breadcrumbs?: ITBreadcrumbItem[];
   actions?: ReactNode;
   backAction?: () => void;
+  icon?: ReactNode;
+  iconColor?: string;
   className?: string;
 }

package/src/components/page-header/page-header.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FaUsers } from "react-icons/fa";
 import ITPageHeader from "./page-header";
 import ITButton from "../button/button";
 
@@ -59,3 +60,16 @@ export const WithBackAction: Story = {
     actions: <ITButton label="Editar" size="small" />,
   },
 };
+
+export const WithIcon: Story = {
+  args: {
+    title: "Usuarios",
+    description: "Gestiona los usuarios del sistema",
+    icon: <FaUsers size={20} />,
+    iconColor: "#6366f1",
+    breadcrumbs: [
+      { label: "Inicio", href: "#" },
+      { label: "Usuarios" },
+    ],
+  },
+};

package/src/components/page-header/page-header.tsx

@@ -9,19 +9,22 @@ export default function ITPageHeader({
   breadcrumbs,
   actions,
   backAction,
+  icon,
+  iconColor,
   className,
 }: ITPageHeaderProps) {
   const showTopRow = breadcrumbs?.length || backAction;
 
   return (
-    <div className={className}>
+    <div className={`${className} space-y-3`}>
+      {/* Fila superior: breadcrumbs + back + acciones */}
       {showTopRow && (
-        <div className="flex items-center justify-between gap-4 mb-1">
+        <div className="flex items-center justify-between gap-4">
           <div className="flex items-center gap-2 min-w-0">
             {backAction && (
               <button
                 onClick={backAction}
-                className="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:text-slate-500 dark:hover:text-slate-200 dark:hover:bg-slate-800 transition-colors flex-shrink-0"
+                className="flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0"
                 aria-label="Volver"
               >
                 <FaChevronLeft size={14} />
@@ -32,30 +35,47 @@ export default function ITPageHeader({
             )}
           </div>
           {actions && (
-            <div className="flex items-center gap-2 flex-shrink-0">
+            <div className="flex items-center gap-3 flex-shrink-0">
               {actions}
             </div>
           )}
         </div>
       )}
 
-      <div className="flex items-start justify-between gap-4">
-        <div className="min-w-0">
-          <ITText as="h1" className="text-2xl font-extrabold text-slate-800 dark:text-white tracking-tight">
-            {title}
-          </ITText>
-          {description && (
-            <ITText as="p" className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
-              {description}
-            </ITText>
+      {/* Fila principal: icono + título + descripción + (acciones si no hay top row) */}
+      <div className="flex items-start justify-between gap-6">
+        <div className="flex items-start gap-4 min-w-0">
+          {icon && (
+            <div
+              className="flex items-center justify-center w-12 h-12 rounded-full border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-300 flex-shrink-0 transition-all duration-200 hover:border-slate-300 dark:hover:border-slate-500 hover:shadow-sm"
+              style={iconColor ? { color: iconColor } : undefined}
+            >
+              {icon}
+            </div>
           )}
+          <div className="min-w-0">
+            <ITText
+              as="h1"
+              className="text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight"
+            >
+              {title}
+            </ITText>
+            {description && (
+              <ITText
+                as="p"
+                className="text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed"
+              >
+                {description}
+              </ITText>
+            )}
+          </div>
         </div>
         {!showTopRow && actions && (
-          <div className="flex items-center gap-2 flex-shrink-0">
+          <div className="flex items-center gap-3 flex-shrink-0">
             {actions}
           </div>
         )}
       </div>
     </div>
   );
-}
+}

package/src/index.css

@@ -99,6 +99,21 @@
   to { opacity: 1; transform: translateY(0); }
 }
 
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+.col-span-full { grid-column: 1 / -1; }
+
 .col-span-1 { grid-column: span 1 / span 1; }
 .col-span-2 { grid-column: span 2 / span 2; }
 .col-span-3 { grid-column: span 3 / span 3; }