@axzydev/axzy_ui_system 1.2.13 → 1.2.14

package/src/components/{page → templates/page}/page.stories.tsx

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import ITPage from "./page";
-import ITButton from "../button/button";
-import ITCard from "../card/card";
+import ITPage from "@/components/templates/page/page";
+import ITButton from "@/components/atoms/button/button";
+import ITCard from "@/components/molecules/card/card";
 
 const meta: Meta<typeof ITPage> = {
   title: "Components/Layout/ITPage",
   component: ITPage,
-  tags: ["autodocs"],
 };
 
 export default meta;
@@ -36,8 +35,8 @@ export const WithBreadcrumbsAndActions: Story = {
     ],
     actions: (
       <>
-        <ITButton label="Cancelar" variant="outlined" size="small" />
-        <ITButton label="Guardar" size="small" />
+        <ITButton label="Cancelar" variant="outlined" size="sm" />
+        <ITButton label="Guardar" size="sm" />
       </>
     ),
     children: (
@@ -73,7 +72,7 @@ export const Empty: Story = {
     empty: true,
     emptyTitle: "Sin notificaciones",
     emptyDescription: "No tienes notificaciones pendientes.",
-    emptyAction: <ITButton label="Recargar" size="small" onClick={() => alert("Refresh")} />,
+    emptyAction: <ITButton label="Recargar" size="sm" onClick={() => alert("Refresh")} />,
     children: null,
   },
 };

package/src/components/{page → templates/page}/page.tsx

@@ -1,10 +1,10 @@
 import clsx from "clsx";
 import { ITPageProps } from "./page.props";
-import ITPageHeader from "../page-header/page-header";
-import ITSkeleton from "../skeleton/skeleton";
-import ITEmptyState from "../empty-state/empty-state";
-import ITButton from "../button/button";
-import ITStack from "../stack/stack";
+import ITPageHeader from "@/components/organisms/page-header/page-header";
+import ITSkeleton from "@/components/atoms/skeleton/skeleton";
+import ITEmptyState from "@/components/molecules/empty-state/empty-state";
+import ITButton from "@/components/atoms/button/button";
+import ITStack from "@/components/atoms/stack/stack";
 
 const hasHeader = (props: ITPageProps) =>
   !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction || props.icon);
@@ -92,7 +92,7 @@ export default function ITPage(props: ITPageProps) {
               <ITButton
                 label={errorActionLabel || "Reintentar"}
                 onClick={onRetry}
-                size="small"
+                size="sm"
               />
             ) : undefined
           }

package/src/components/theme-provider/themePresets.ts

@@ -0,0 +1,154 @@
+import { ITThemePalette } from "./themeProvider.props";
+
+/** Paleta por defecto del sistema (fallback de `ITThemeProvider`). */
+export const DEFAULT_PALETTE: ITThemePalette = {
+  primary: "#06b6d4", // Cyan
+  secondary: "#6b7280", // Gray
+  ternary: "#8b5cf6", // Purple/Violet
+  danger: "#ef4444", // Red
+  success: "#22c55e", // Green
+  info: "#3b82f6", // Blue
+  alert: "#f97316", // Orange
+  warning: "#eab308", // Yellow
+  layout: {
+    sidebarBg: "#ffffff", // White (light mode default)
+    sidebarText: "#334155", // Slate-700 (dark text for light sidebar)
+    navbarBg: "#ffffff", // White
+    navbarText: "#1e293b", // Slate-800
+  },
+  table: {
+    headerBg: "#f8fafc", // Slate-50
+    headerText: "#334155", // Slate-700
+    rowBg: "#ffffff", // White
+    rowText: "#1e293b", // Slate-800
+  },
+};
+
+/** Presets de colores para el FAB/theme-designer. */
+export const PRESETS: { name: string; colors: ITThemePalette }[] = [
+  {
+    name: "Midnight Indigo 🌌",
+    colors: {
+      primary: "#6366f1",
+      secondary: "#475569",
+      ternary: "#f472b6",
+      danger: "#ef4444",
+      success: "#34d399",
+      info: "#06b6d4",
+      alert: "#fb923c",
+      warning: "#fbbf24",
+      layout: {
+        sidebarBg: "#0b1120",
+        sidebarText: "#94a3b8",
+        navbarBg: "#0f172a",
+        navbarText: "#f1f5f9",
+      },
+      table: {
+        headerBg: "#f1f5f9",
+        headerText: "#334155",
+        rowBg: "#ffffff",
+        rowText: "#0f172a",
+      },
+    },
+  },
+  {
+    name: "Coral Reef 🪸",
+    colors: {
+      primary: "#f43f5e",
+      secondary: "#57534e",
+      ternary: "#f97316",
+      danger: "#b91c1c",
+      success: "#14b8a6",
+      info: "#6366f1",
+      alert: "#eab308",
+      warning: "#fde047",
+      layout: {
+        sidebarBg: "#0c0808",
+        sidebarText: "#fda4af",
+        navbarBg: "#1c1212",
+        navbarText: "#fff1f2",
+      },
+      table: {
+        headerBg: "#fff1f2",
+        headerText: "#881337",
+        rowBg: "#ffffff",
+        rowText: "#1c1212",
+      },
+    },
+  },
+  {
+    name: "Oceanic Teal 🌊",
+    colors: {
+      primary: "#0d9488",
+      secondary: "#64748b",
+      ternary: "#a78bfa",
+      danger: "#e11d48",
+      success: "#22c55e",
+      info: "#0284c7",
+      alert: "#ea580c",
+      warning: "#ca8a04",
+      layout: {
+        sidebarBg: "#042f2e",
+        sidebarText: "#5eead4",
+        navbarBg: "#062b2a",
+        navbarText: "#ccfbf1",
+      },
+      table: {
+        headerBg: "#f0fdfa",
+        headerText: "#115e59",
+        rowBg: "#ffffff",
+        rowText: "#042f2e",
+      },
+    },
+  },
+  {
+    name: "Golden Hour ☀️",
+    colors: {
+      primary: "#d97706",
+      secondary: "#78716c",
+      ternary: "#db2777",
+      danger: "#dc2626",
+      success: "#65a30d",
+      info: "#2563eb",
+      alert: "#f97316",
+      warning: "#facc15",
+      layout: {
+        sidebarBg: "#fefce8",
+        sidebarText: "#713f12",
+        navbarBg: "#fffbeb",
+        navbarText: "#451a03",
+      },
+      table: {
+        headerBg: "#fefce8",
+        headerText: "#713f12",
+        rowBg: "#ffffff",
+        rowText: "#292524",
+      },
+    },
+  },
+  {
+    name: "Deep Forest 🌲",
+    colors: {
+      primary: "#16a34a",
+      secondary: "#57534e",
+      ternary: "#d946ef",
+      danger: "#dc2626",
+      success: "#14b8a6",
+      info: "#0ea5e9",
+      alert: "#f97316",
+      warning: "#eab308",
+      layout: {
+        sidebarBg: "#052e16",
+        sidebarText: "#86efac",
+        navbarBg: "#0b3b1c",
+        navbarText: "#dcfce7",
+      },
+      table: {
+        headerBg: "#f0fdf4",
+        headerText: "#166534",
+        rowBg: "#ffffff",
+        rowText: "#052e16",
+      },
+    },
+  },
+];

package/src/components/theme-provider/themeProvider.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './themeProvider.stories';
+import * as StoriesData from './themeProvider.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITThemeProvider
 
@@ -14,6 +14,9 @@ Root theme context that injects CSS custom properties into the entire component
 | `theme` | `Partial<ITThemePalette>` | — | Partial palette overrides merged with the default theme. Supports primary, secondary, ternary, danger, success, info, alert, warning, layout, and table colors. |
 | `children` | `React.ReactNode` | — | The subtree that receives the theme context and CSS variables. |
 | `showFab` | `boolean` | `false` | Whether to show the floating action button for opening the theme designer drawer. |
+| `density` | `number` | `1` | Global density/compactness factor: values below `1` shrink base sizes (fonts, paddings, gaps), above `1` grow them. Applies by scaling the root font-size so every `rem`-based token compacts together while the layout stays fluid. Clamped to `0.5`–`1.5`. |
+| `radius` | `number` | — | Global border radius in **px** applied to the whole rounding scale. `2` ⇒ 2px corners (near-square), `8` ⇒ 8px, `0` ⇒ square. No override when omitted (Tailwind defaults). |
+| `shadow` | `number` | `2` | Global shadow strength level: `0` ⇒ none, `1` ⇒ subtle, `2` ⇒ default current look, `3` ⇒ pronounced. No override when omitted (keeps defaults). |
 
 ### ITThemePalette Shape
 
@@ -57,6 +60,11 @@ import { ITThemeProvider } from '@axzydev/axzy_ui_system';
 <ITThemeProvider showFab>
   <App />
 </ITThemeProvider>
+
+{/* Cuadrado en todos lados y sombras nivel 2 */}
+<ITThemeProvider radius={2} shadow={2}>
+  <App />
+</ITThemeProvider>
 ```
 
 ## Notes

package/src/components/theme-provider/themeProvider.props.ts

@@ -46,4 +46,10 @@ export interface ITThemeProviderProps {
   children: React.ReactNode;
   /** Whether to render the floating action button (bottom-right) that opens the live theme-designer drawer, letting end users tweak colors and persist their choice. Set to `false` to hide the FAB in production and only theme via the `theme` prop. @default true */
   showFab?: boolean;
+  /** Global density/compactness factor. Values below 1 shrink the UI's base sizes, above 1 grow them (e.g. `0.8` = 80%: smaller fonts, paddings, gaps, spacing). Applied by scaling the root font-size so every `rem`-based token in Tailwind components compacts together, keeping the layout fluid (no empty margins, unlike CSS zoom). Clamped to `0.5`–`1.5`. @default 1 */
+  density?: number;
+  /** Global border radius in pixels applied to the entire rounding scale (`rounded-sm/md/lg/xl/2xl/…`). `radius={2}` ⇒ 2px corners (near-square), `8` ⇒ 8px, `0` ⇒ completely square. Every `rounded-*` utility resolves to a `--radius-*` variable, so this reshapes inputs, buttons, cards, dialogs and tables system-wide with no per-component changes. @default 0 (no override, Tailwind defaults) */
+  radius?: number;
+  /** Global shadow strength level. `0` ⇒ no shadows, `1` ⇒ subtle, `2` ⇒ default current look, `3` ⇒ pronounced. Shadows are injected as `--shadow-*`/`.shadow-*` overrides so cards, dropdowns and dialogs follow the level. @default 2 (keeps current default when omitted) */
+  shadow?: number;
 }

package/src/components/theme-provider/themeProvider.stories.tsx

@@ -1,14 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import ITThemeProvider from './themeProvider';
-import ITCard from '../card/card';
-import ITButton from '../button/button';
-import ITText from '../text/text';
+import ITCard from '@/components/molecules/card/card';
+import ITButton from '@/components/atoms/button/button';
+import ITText from '@/components/atoms/text/text';
 
 const meta = {
   title: 'Components/System/ITThemeProvider',
   component: ITThemeProvider,
   parameters: { layout: 'centered' },
-  tags: ['autodocs'],
   argTypes: {
     theme: { control: false, description: 'Custom theme palette to override defaults' },
     children: { control: false, description: 'App content wrapped by the theme context' },