@axzydev/axzy_ui_system 1.0.157 → 1.0.160

package/README.md

@@ -1,50 +1,74 @@
-# React + TypeScript + Vite
+# AXZY UI System
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A modern, enterprise-ready React component library powered by Tailwind CSS. Built specifically for high-density data applications, hospital management software, and complex dashboards.
 
-Currently, two official plugins are available:
+## Installation
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+npm install @axzydev/axzy_ui_system
+```
 
-## Expanding the ESLint configuration
+## Basic Setup
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+Then, you must tell your own `tailwind.config.ts` to scan the library for its dynamic classes:
 
-- Configure the top-level `parserOptions` property like this:
+```ts
+// tailwind.config.ts
+import type { Config } from 'tailwindcss'
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
+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: [],
+}
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+---
 
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
+## Dynamic Theming (ITThemeProvider)
 
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+`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>`.
+
+Wrap your application root with the provider and pass your custom brand JSON object:
+
+```tsx
+import React from 'react';
+import { ITThemeProvider } from '@axzydev/axzy_ui_system';
+import App from './App';
+
+// Define your custom brand palette mapping
+const myEnterpriseTheme = {
+  colors: {
+    primary: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444", // Your Main Brand Color
+      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}>
+      <App />
+    </ITThemeProvider>
+  );
+}
 ```
+
+> **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.

package/dist/index.cjs

@@ -48,6 +48,7 @@ __export(index_exports, {
   ITStepper: () => ITStepper,
   ITTable: () => ITTable,
   ITText: () => ITText,
+  ITThemeProvider: () => ITThemeProvider,
   ITTimePicker: () => ITTimePicker,
   ITToast: () => ITToast,
   createValidationSchema: () => createValidationSchema
@@ -117,35 +118,45 @@ var palette = {
     900: "#0f172a",
     950: "#020617"
   },
-  // Mantenemos los colores de estado pero actualizamos a tonos más suaves
   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
 };
+var createColorVar = (name) => ({
+  50: `var(--color-${name}-50)`,
+  100: `var(--color-${name}-100)`,
+  200: `var(--color-${name}-200)`,
+  300: `var(--color-${name}-300)`,
+  400: `var(--color-${name}-400)`,
+  500: `var(--color-${name}-500)`,
+  600: `var(--color-${name}-600)`,
+  700: `var(--color-${name}-700)`,
+  800: `var(--color-${name}-800)`,
+  900: `var(--color-${name}-900)`,
+  950: `var(--color-${name}-950)`
+});
 var semanticColors = {
-  primary: palette.blue,
-  secondary: palette.gray,
-  success: palette.success,
-  danger: palette.danger,
-  warning: palette.warning,
-  info: palette.cyan,
-  // Usamos cyan para info en lugar de sky
-  purple: palette.purple,
-  error: palette.danger,
-  gray: palette.gray
+  primary: createColorVar("primary"),
+  secondary: createColorVar("secondary"),
+  success: createColorVar("success"),
+  danger: createColorVar("danger"),
+  warning: createColorVar("warning"),
+  info: createColorVar("info"),
+  purple: createColorVar("purple"),
+  error: createColorVar("danger"),
+  // Alias
+  gray: createColorVar("secondary")
+  // Secondary as Gray
 };
 var components = {
   layout: {
     backgroundColor: semanticColors.gray[50],
-    // Very light gray background for the main content area
     contentPadding: "1.5rem"
-    // p-6
   },
   topbar: {
     backgroundColor: "rgba(255, 255, 255, 0.90)",
-    // Glassmorphism base
     borderColor: semanticColors.gray[200],
     iconColor: semanticColors.gray[500],
     iconHoverColor: semanticColors.gray[700],
@@ -166,7 +177,6 @@ var components = {
   },
   sidebar: {
     backgroundColor: "rgba(255, 255, 255, 0.90)",
-    // Glassmorphism base like topbar
     borderColor: semanticColors.gray[200],
     label: {
       color: semanticColors.gray[700],
@@ -182,95 +192,75 @@ var components = {
     },
     active: {
       backgroundColor: semanticColors.gray[50],
-      // Very subtle active bg in light mode
       color: semanticColors.gray[900],
-      iconColor: "#10b981"
-      // Emerald green
+      iconColor: semanticColors.primary[500]
     },
     badge: {
-      backgroundColor: "#10b981",
+      backgroundColor: semanticColors.primary[500],
       color: "#ffffff"
     }
   },
   button: {
     primary: {
-      backgroundColor: "#06b6d4",
-      // Cyan-500
+      backgroundColor: semanticColors.primary[500],
       color: "#ffffff",
-      hover: "#0891b2",
-      // Cyan-600
-      active: "#0e7490",
-      // Cyan-700
-      focus: "0 0 0 2px #a5f3fc",
-      // Cyan-200
+      hover: semanticColors.primary[600],
+      active: semanticColors.primary[700],
+      focus: `0 0 0 2px ${semanticColors.primary[200]}`,
       borderRadius: "0.375rem",
-      // 6px - rounded-md
       padding: "0.5rem 1rem",
       fontSize: "0.875rem",
       fontWeight: "600",
       transition: "all 150ms ease-in-out"
     },
     secondary: {
-      backgroundColor: "#64748b",
-      // Slate-500
+      backgroundColor: semanticColors.secondary[500],
       color: "#ffffff",
-      // Text white for filled secondary per screenshot
-      hover: "#475569",
-      // Slate-600
-      focus: "0 0 0 2px #e2e8f0",
+      hover: semanticColors.secondary[600],
+      focus: `0 0 0 2px ${semanticColors.secondary[200]}`,
       borderRadius: "0.375rem",
       padding: "0.5rem 1rem",
       fontSize: "0.875rem",
       fontWeight: "600"
     },
     success: {
-      backgroundColor: "#22c55e",
-      // Green-500
+      backgroundColor: semanticColors.success[500],
       color: "#ffffff",
-      hover: "#16a34a",
-      // Green-600
+      hover: semanticColors.success[600],
       focus: `0 0 0 2px ${semanticColors.success[200]}`,
       borderRadius: "0.375rem"
     },
     danger: {
-      backgroundColor: "#ef4444",
-      // Red-500
+      backgroundColor: semanticColors.danger[500],
       color: "#ffffff",
-      hover: "#dc2626",
-      // Red-600
+      hover: semanticColors.danger[600],
       focus: `0 0 0 2px ${semanticColors.danger[200]}`,
       borderRadius: "0.375rem"
     },
     error: {
-      backgroundColor: "#ef4444",
+      backgroundColor: semanticColors.danger[500],
       color: "#ffffff",
-      hover: "#dc2626",
+      hover: semanticColors.danger[600],
       borderRadius: "0.375rem"
     },
     warning: {
-      backgroundColor: "#f97316",
-      // Orange-500
+      backgroundColor: semanticColors.warning[500],
       color: "#ffffff",
-      hover: "#ea580c",
-      // Orange-600
+      hover: semanticColors.warning[600],
       focus: `0 0 0 2px ${semanticColors.warning[200]}`,
       borderRadius: "0.375rem"
     },
     info: {
-      backgroundColor: "#0ea5e9",
-      // Sky-500
+      backgroundColor: semanticColors.info[500],
       color: "#ffffff",
-      hover: "#0284c7",
-      // Sky-600
+      hover: semanticColors.info[600],
       focus: `0 0 0 2px ${semanticColors.info[200]}`,
       borderRadius: "0.375rem"
     },
     purple: {
-      backgroundColor: "#8b5cf6",
-      // Violet-500
+      backgroundColor: semanticColors.purple[500],
       color: "#ffffff",
-      hover: "#7c3aed",
-      // Violet-600
+      hover: semanticColors.purple[600],
       focus: `0 0 0 2px ${semanticColors.purple[200]}`,
       borderRadius: "0.375rem"
     },
@@ -279,7 +269,6 @@ var components = {
       color: semanticColors.primary[600],
       borderColor: semanticColors.primary[600],
       borderWidth: "2px",
-      // Slightly thicker for modern look
       hover: semanticColors.primary[50],
       borderRadius: "0.375rem"
     }
@@ -340,7 +329,6 @@ var components = {
   card: {
     backgroundColor: "#ffffff",
     borderRadius: "1rem",
-    // 16px - más moderno
     borderColor: semanticColors.gray[200],
     borderWidth: "1px",
     shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
@@ -349,7 +337,7 @@ var components = {
     },
     header: {
       backgroundColor: semanticColors.gray[50],
-      borderBottom: `1px solid ${semanticColors.gray[200]}`,
+      borderBottom: `1px solid var(--color-secondary-200)`,
       padding: "1rem 1.5rem",
       borderTopLeftRadius: "1rem",
       borderTopRightRadius: "1rem"
@@ -389,7 +377,7 @@ var components = {
     },
     row: {
       hover: semanticColors.primary[50],
-      borderBottom: `1px solid ${semanticColors.gray[200]}`
+      borderBottom: `1px solid var(--color-secondary-200)`
     },
     cell: {
       padding: "1rem 1.5rem"
@@ -424,7 +412,6 @@ var components = {
   modal: {
     overlay: {
       backgroundColor: "rgba(15, 23, 42, 0.75)"
-      // gray[900] con opacidad
     },
     content: {
       backgroundColor: "#ffffff",
@@ -433,14 +420,14 @@ var components = {
     },
     header: {
       padding: "1.5rem 1.5rem 0.5rem 1.5rem",
-      borderBottom: `1px solid ${semanticColors.gray[200]}`
+      borderBottom: `1px solid var(--color-secondary-200)`
     },
     body: {
       padding: "1.5rem"
     },
     footer: {
       padding: "1rem 1.5rem",
-      borderTop: `1px solid ${semanticColors.gray[200]}`,
+      borderTop: `1px solid var(--color-secondary-200)`,
       backgroundColor: semanticColors.gray[50]
     }
   }
@@ -4655,6 +4642,48 @@ function ITStepper({
     ] })
   ] });
 }
+
+// src/components/theme-provider/themeProvider.tsx
+var import_react25 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function ITThemeProvider({ theme: theme2, children }) {
+  const activeThemeContext = (0, import_react25.useMemo)(() => {
+    const baseColors = {
+      primary: palette.blue,
+      secondary: palette.gray,
+      success: palette.success,
+      danger: palette.danger,
+      warning: palette.warning,
+      info: palette.cyan,
+      purple: palette.purple
+    };
+    return {
+      colors: {
+        ...baseColors,
+        ...theme2?.colors
+      },
+      layout: {
+        ...theme.layout,
+        ...theme2?.layout
+      }
+    };
+  }, [theme2]);
+  const cssVariables = (0, import_react25.useMemo)(() => {
+    let variablesString = "";
+    Object.entries(activeThemeContext.colors).forEach(([colorName, scale]) => {
+      Object.entries(scale).forEach(([shade, hexValue]) => {
+        variablesString += `--color-${colorName}-${shade}: ${hexValue};
+`;
+      });
+    });
+    return `:root {
+${variablesString}}`;
+  }, [activeThemeContext]);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("style", { suppressHydrationWarning: true, children: cssVariables }),
+    children
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ITBadget,
@@ -4676,6 +4705,7 @@ function ITStepper({
   ITStepper,
   ITTable,
   ITText,
+  ITThemeProvider,
   ITTimePicker,
   ITToast,
   createValidationSchema