@axzydev/axzy_ui_system 1.1.1 → 1.2.0

package/README.md

@@ -1,49 +1,59 @@
 # AXZY UI System
 
-A modern, enterprise-ready React component library powered by Tailwind CSS. Built specifically for high-density data applications, hospital management software, and complex dashboards.
+A modern, enterprise-ready React component library powered by **Tailwind CSS v4**. Built specifically for high-density data applications, hospital management software, and complex dashboards.
 
-## Installation
+---
+
+## Quick Start
+
+### 1. Crear un proyecto nuevo con Vite + React + TypeScript
+
+```bash
+npm create vite@latest mi-app -- --template react-ts
+cd mi-app
+npm install
+```
+
+### 2. Instalar Tailwind CSS v4 y AXZY UI System
 
 ```bash
 npm install @axzydev/axzy_ui_system
+npm install -D tailwindcss @tailwindcss/vite
 ```
 
-## Basic Setup
+### 3. Configurar Vite
 
-Then, you must tell your own `tailwind.config.ts` to scan the library for its dynamic classes:
+Edita `vite.config.ts`:
 
 ```ts
-// tailwind.config.ts
-import type { Config } from 'tailwindcss'
-
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@axzydev/axzy_ui_system/dist/**/*.{js,ts,jsx,tsx}" // <--- ADD THIS LINE
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react-swc"
+import tailwindcss from "@tailwindcss/vite"
+
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+})
 ```
 
----
+### 4. Agregar directivas de Tailwind
 
-## Dynamic Theming (ITThemeProvider)
+En `src/index.css`:
 
-`AXZY_UI_SYSTEM` uses a powerful CSS Variables engine under the hood. You can override the entire color palette of all components instantly without recompiling the library by using the `<ITThemeProvider>`.
+```css
+@import "tailwindcss";
+```
 
-Wrap your application root with the provider and pass your custom brand JSON object:
+### 5. Envolver la app con ITThemeProvider
 
 ```tsx
-import React from 'react';
-import { ITThemeProvider } from '@axzydev/axzy_ui_system';
-import App from './App';
+// src/main.tsx
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { ITThemeProvider } from "@axzydev/axzy_ui_system"
+import App from "./App"
+import "./index.css"
 
-// Define your custom brand palette mapping
-const myEnterpriseTheme = {
+const myTheme = {
   colors: {
     primary: {
       50: "#fef2f2",
@@ -51,24 +61,78 @@ const myEnterpriseTheme = {
       200: "#fecaca",
       300: "#fca5a5",
       400: "#f87171",
-      500: "#ef4444", // Your Main Brand Color
+      500: "#ef4444",
       600: "#dc2626",
       700: "#b91c1c",
       800: "#991b1b",
       900: "#7f1d1d",
       950: "#450a0a",
     },
-    // You can optionally override secondary, success, danger, warning, purple, info
-  }
-};
+  },
+}
 
-export default function Main() {
-  return (
-    <ITThemeProvider theme={myEnterpriseTheme}>
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <ITThemeProvider theme={myTheme}>
       <App />
     </ITThemeProvider>
-  );
+  </React.StrictMode>
+)
+```
+
+### 6. ¡Usar componentes!
+
+```tsx
+// src/App.tsx
+import { ITButton } from "@axzydev/axzy_ui_system"
+
+export default function App() {
+  return (
+    <div className="p-8">
+      <ITButton variant="primary">Hola Mundo</ITButton>
+    </div>
+  )
 }
 ```
 
-> **Note:** You do not need to provide all colors. Only provide the scales (e.g., `primary`) that you wish to override. Unprovided scales will gracefully fallback to the default AXZY palette.
+---
+
+## Theming
+
+El `ITThemeProvider` permite sobrescribir toda la paleta de colores en tiempo de ejecución sin recompilar.
+
+```tsx
+const myTheme = {
+  colors: {
+    primary: { 50: "..." , 500: "#ef4444", ... },
+    secondary: { 50: "...", 500: "#3b82f6", ... },
+    success: { 50: "...", 500: "#22c55e", ... },
+    danger: { 50: "...", 500: "#ef4444", ... },
+    warning: { 50: "...", 500: "#f59e0b", ... },
+    purple: { 50: "...", 500: "#a855f7", ... },
+    info: { 50: "...", 500: "#06b6d4", ... },
+  },
+}
+```
+
+Solo debes proveer los colores que quieras cambiar — el resto usa los valores por defecto.
+
+---
+
+## Scripts del proyecto
+
+| Comando | Descripción |
+|---------|-------------|
+| `npm run dev` | Inicia servidor de desarrollo |
+| `npm run build` | Compila para producción |
+| `npm run preview` | Previsualiza el build |
+| `npm run storybook` | Storybook para desarrollo |
+| `npm run lint` | Ejecuta ESLint |
+
+---
+
+## Requisitos
+
+- React 18+
+- Tailwind CSS 4.x + `@tailwindcss/vite`
+- Node.js 18+

package/dist/index.cjs

@@ -487,7 +487,6 @@ var badgeSizes = {
 };
 
 // src/theme/theme.ts
-var import_colors = __toESM(require("tailwindcss/colors"), 1);
 var palette = {
   blue: {
     50: "#eff6ff",
@@ -528,11 +527,71 @@ var palette = {
     900: "#0f172a",
     950: "#020617"
   },
-  success: import_colors.default.emerald,
-  danger: import_colors.default.rose,
-  warning: import_colors.default.amber,
-  purple: import_colors.default.violet,
-  info: import_colors.default.sky
+  success: {
+    50: "#ecfdf5",
+    100: "#d1fae5",
+    200: "#a7f3d0",
+    300: "#6ee7b7",
+    400: "#34d399",
+    500: "#10b981",
+    600: "#059669",
+    700: "#047857",
+    800: "#065f46",
+    900: "#064e3b",
+    950: "#022c22"
+  },
+  danger: {
+    50: "#fff1f2",
+    100: "#ffe4e6",
+    200: "#fecdd3",
+    300: "#fda4af",
+    400: "#fb7185",
+    500: "#f43f5e",
+    600: "#e11d48",
+    700: "#be123c",
+    800: "#9f1239",
+    900: "#881337",
+    950: "#4c0519"
+  },
+  warning: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03"
+  },
+  purple: {
+    50: "#f5f3ff",
+    100: "#ede9fe",
+    200: "#ddd6fe",
+    300: "#c4b5fd",
+    400: "#a78bfa",
+    500: "#8b5cf6",
+    600: "#7c3aed",
+    700: "#6d28d9",
+    800: "#5b21b6",
+    900: "#4c1d95",
+    950: "#2e1065"
+  },
+  info: {
+    50: "#f0f9ff",
+    100: "#e0f2fe",
+    200: "#bae6fd",
+    300: "#7dd3fc",
+    400: "#38bdf8",
+    500: "#0ea5e9",
+    600: "#0284c7",
+    700: "#0369a1",
+    800: "#075985",
+    900: "#0c4a6e",
+    950: "#082f49"
+  }
 };
 var createColorVar = (name) => ({
   50: `var(--color-${name}-50)`,
@@ -972,7 +1031,7 @@ var buttonVariants = {
   outlined: "bg-transparent border-2",
   raised: "border-transparent shadow-md",
   rounded: "border-transparent shadow-sm rounded-full",
-  text: "bg-transparent border-transparent shadow-none hover:bg-opacity-10",
+  text: "bg-transparent border-transparent shadow-none hover:bg-black/5 dark:hover:bg-white/10",
   "raised-text": "bg-white border border-gray-200 shadow-sm hover:shadow-md",
   "icon-only": "p-2 aspect-square flex items-center justify-center border-transparent shadow-sm",
   link: "bg-transparent border-transparent shadow-none hover:underline px-0"
@@ -4982,8 +5041,8 @@ function ITThemeProvider({
       };
     });
   };
-  const applyPreset = (colors2) => {
-    setPaletteState(colors2);
+  const applyPreset = (colors) => {
+    setPaletteState(colors);
   };
   const resetTheme = () => {
     const basePalette = {
@@ -5409,7 +5468,7 @@ function ITDialog({
   const content = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
-      className: `fixed inset-0 flex ${fullScreen ? "items-stretch" : "items-center justify-center"} bg-black bg-opacity-50 z-[9999]`,
+      className: `fixed inset-0 flex ${fullScreen ? "items-stretch" : "items-center justify-center"} bg-black/50 z-[9999]`,
       children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
@@ -6464,7 +6523,7 @@ function ITNavbar({
         logo && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-8 w-auto object-contain transition-transform hover:scale-105", children: logo }),
         logoText && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ITText, { as: "span", className: "text-lg font-bold tracking-wide", style: { color: "var(--sidebar-active-color, #ffffff)" }, children: logoText })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("nav", { className: "flex-1 px-4 py-6 overflow-y-auto custom-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "space-y-1.5", children: navigationItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("nav", { className: "flex-1 px-4 py-6 overflow-y-auto custom-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "flex flex-col gap-1.5", children: navigationItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           "div",
           {
@@ -7981,7 +8040,7 @@ function ITSidebar({
         !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "ul",
           {
-            className: "ml-5 space-y-0.5 py-1",
+            className: "ml-5 flex flex-col gap-0.5 py-1",
             style: {
               borderLeft: subitemConnector === "|" ? "1px solid var(--sidebar-border, #e2e8f0)" : "none"
             },