@makroz/web 1.2.0 → 1.2.2

package/dist/index.js

@@ -0,0 +1,37 @@
+export * from './components';
+export { MkThemeEditor } from './components/MkThemeEditor';
+export { MkThemeProvider, useMkTheme } from './theme/MkThemeProvider';
+// Contexts
+export * from './context/MkApiContext';
+export * from './context/MkToastContext';
+export * from './context/MkConfirmContext';
+export * from './theme/MkThemeProvider';
+// Hooks
+export * from './hooks/useApi';
+export * from './hooks/useMkList';
+export * from './hooks/useMkInfiniteList';
+export * from './hooks/useMkDebounce';
+export * from './hooks/useMkInViewPort';
+export * from './hooks/useMkClickOutside';
+export * from './hooks/useMkEffectDebug';
+export * from './hooks/useMkEvent';
+export * from './hooks/useMkLocalStorage';
+export * from './hooks/useMkPrevious';
+export * from './hooks/useMkToggle';
+export * from './hooks/useMkForm';
+export * from './hooks/useMkCrud';
+export * from './hooks/useMkMediaQuery';
+export * from './hooks/useMkScreenSize';
+export * from './hooks/useMkLongPress';
+export * from './hooks/useMkStore';
+// Auth (mk-web 1.0 — scope-aware provider, see MK-WEB-1.0.3 / 1.0.4)
+export { MkAuthProvider } from './auth/MkAuthProvider';
+export { useMkAuth } from './auth/useMkAuth';
+export { MkAuthForm } from './auth/MkAuthForm';
+// Utils
+export * from './utils/images';
+// Note: Global CSS (`@makroz/web/styles/index.css`) MUST be imported by the
+// consuming app from `pages/_app.tsx` (or `app/layout.tsx`) — Next 13+
+// forbids auto-importing global CSS from a package's main entry, and
+// Turbopack in Next 16 enforces it strictly. See package README for usage.
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEtE,WAAW;AACX,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AAExC,QAAQ;AACR,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAEnC,qEAAqE;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAW/C,QAAQ;AACR,cAAc,gBAAgB,CAAC;AAE/B,4EAA4E;AAC5E,uEAAuE;AACvE,qEAAqE;AACrE,2EAA2E"}

package/dist/styles/index.css

@@ -0,0 +1,124 @@
+/**
+ * MK-Director Design Tokens
+ * -------------------------
+ * Overwrite these variables in your own CSS to customize the entire UI Kit.
+ */
+
+:root {
+    /* Colors - Light Mode */
+    --mk-primary: #3b82f6;
+    --mk-primary-foreground: #ffffff;
+
+    --mk-background: #ffffff;
+    --mk-foreground: #0f172a;
+
+    --mk-muted: #f1f5f9;
+    --mk-muted-foreground: #64748b;
+
+    --mk-accent: #f8fafc;
+    --mk-accent-foreground: #0f172a;
+
+    --mk-border: #e2e8f0;
+    --mk-input: #e2e8f0;
+
+    --mk-success: #10b981;
+    --mk-success-foreground: #ffffff;
+    --mk-error: #ef4444;
+    --mk-error-foreground: #ffffff;
+    --mk-warning: #f59e0b;
+    --mk-warning-foreground: #ffffff;
+    --mk-info: #3b82f6;
+    --mk-info-foreground: #ffffff;
+
+    /* Card / Surface */
+    --mk-card: #ffffff;
+    --mk-card-foreground: #0f172a;
+
+    /* Popover / Dropdown */
+    --mk-popover: #ffffff;
+    --mk-popover-foreground: #0f172a;
+
+    /* Shared Tokens */
+    --mk-radius: 0.5rem;
+    --mk-font-sans: 'Inter', system-ui, sans-serif;
+
+    /* Animations & Transitions */
+    --mk-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    --mk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --mk-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --mk-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes mk-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes mk-shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+@keyframes mk-pulse-subtle {
+    0%,
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.85;
+        transform: scale(0.995);
+    }
+}
+
+/* Dark Mode */
+.mk-dark {
+    --mk-background: #0f172a;
+    --mk-foreground: #f8fafc;
+
+    --mk-muted: #1e293b;
+    --mk-muted-foreground: #94a3b8;
+
+    --mk-accent: #1e293b;
+    --mk-accent-foreground: #f8fafc;
+
+    --mk-border: #334155;
+    --mk-input: #334155;
+
+    --mk-primary: #60a5fa;
+    --mk-primary-foreground: #0f172a;
+
+    --mk-success-foreground: #0f172a;
+    --mk-error-foreground: #ffffff;
+    --mk-warning-foreground: #0f172a;
+    --mk-info-foreground: #0f172a;
+
+    /* Card / Surface */
+    --mk-card: #1e293b;
+    --mk-card-foreground: #f8fafc;
+
+    /* Popover / Dropdown */
+    --mk-popover: #1e293b;
+    --mk-popover-foreground: #f8fafc;
+}
+
+/* Global Styles */
+* {
+    border-color: var(--mk-border);
+}
+
+body {
+    background-color: var(--mk-background);
+    color: var(--mk-foreground);
+    font-family: var(--mk-font-sans);
+}

package/dist/test-setup.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=test-setup.d.ts.map

package/dist/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/test-setup.js

@@ -0,0 +1,31 @@
+var _a, _b;
+import '@testing-library/jest-dom';
+// jsdom does not implement these browser APIs. Both are used by
+// virtualized list components (MkWindowList uses ResizeObserver;
+// MkInfiniteList uses IntersectionObserver). We stub them with
+// no-op classes so jsdom can mount the components without crashing.
+class ResizeObserverStub {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+}
+class IntersectionObserverStub {
+    constructor() {
+        this.root = null;
+        this.rootMargin = '';
+        this.thresholds = [];
+    }
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+    takeRecords() {
+        return [];
+    }
+}
+// jsdom does not implement these browser APIs. Both are used by
+// virtualized list components (MkWindowList uses ResizeObserver;
+// MkInfiniteList uses IntersectionObserver). We stub them with
+// no-op classes so jsdom can mount the components without crashing.
+globalThis.ResizeObserver = (_a = globalThis.ResizeObserver) !== null && _a !== void 0 ? _a : ResizeObserverStub;
+globalThis.IntersectionObserver = (_b = globalThis.IntersectionObserver) !== null && _b !== void 0 ? _b : IntersectionObserverStub;
+//# sourceMappingURL=test-setup.js.map

package/dist/test-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.js","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":";AAAA,OAAO,2BAA2B,CAAC;AAEnC,gEAAgE;AAChE,iEAAiE;AACjE,+DAA+D;AAC/D,oEAAoE;AACpE,MAAM,kBAAkB;IACpB,OAAO,KAAI,CAAC;IACZ,SAAS,KAAI,CAAC;IACd,UAAU,KAAI,CAAC;CAClB;AAED,MAAM,wBAAwB;IAA9B;QACa,SAAI,GAAG,IAAI,CAAC;QACZ,eAAU,GAAG,EAAE,CAAC;QAChB,eAAU,GAA0B,EAAE,CAAC;IAOpD,CAAC;IANG,OAAO,KAAI,CAAC;IACZ,SAAS,KAAI,CAAC;IACd,UAAU,KAAI,CAAC;IACf,WAAW;QACP,OAAO,EAAE,CAAC;IACd,CAAC;CACJ;AAED,gEAAgE;AAChE,iEAAiE;AACjE,+DAA+D;AAC/D,oEAAoE;AACpE,UAAU,CAAC,cAAc,GAAG,MAAA,UAAU,CAAC,cAAc,mCAAI,kBAAkB,CAAC;AAC5E,UAAU,CAAC,oBAAoB,GAAG,MAAA,UAAU,CAAC,oBAAoB,mCAAI,wBAAwB,CAAC"}

package/dist/theme/MkThemeProvider.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { MkTheme } from '@makroz/core';
+interface ThemeContextType {
+    theme: MkTheme;
+    isDark: boolean;
+    toggleTheme: () => void;
+    setDark: (dark: boolean) => void;
+    customOverrides: Partial<Record<string, string>>;
+    updateOverride: (key: string, value: string) => void;
+    resetOverrides: () => void;
+}
+export declare function MkThemeProvider({ children, initialDark, defaultTheme, }: {
+    children: React.ReactNode;
+    initialDark?: boolean;
+    defaultTheme?: MkTheme;
+}): React.JSX.Element;
+export declare const useMkTheme: () => ThemeContextType;
+export { tokens } from '@makroz/core';
+export type { MkTheme } from '@makroz/core';
+//# sourceMappingURL=MkThemeProvider.d.ts.map

package/dist/utils/images.d.ts

@@ -0,0 +1,9 @@
+/**
+ * mkResizeImage
+ *
+ * Frontend image resizer using Canvas.
+ * Generates a WebP version of the image with the specified constraints.
+ * 🚀 Performance-first: Reduces upload payload size.
+ */
+export declare const mkResizeImage: (file: File | Blob, maxWidth?: number, maxHeight?: number, quality?: number) => Promise<string>;
+//# sourceMappingURL=images.d.ts.map

package/dist/utils/images.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/utils/images.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GACtB,MAAM,IAAI,GAAG,IAAI,EACjB,WAAU,MAAa,EACvB,YAAW,MAAa,EACxB,UAAS,MAAY,KACtB,OAAO,CAAC,MAAM,CAgDhB,CAAC"}

package/dist/utils/images.js

@@ -0,0 +1,50 @@
+/**
+ * mkResizeImage
+ *
+ * Frontend image resizer using Canvas.
+ * Generates a WebP version of the image with the specified constraints.
+ * 🚀 Performance-first: Reduces upload payload size.
+ */
+export const mkResizeImage = async (file, maxWidth = 1024, maxHeight = 1024, quality = 0.8) => {
+    return new Promise((resolve, reject) => {
+        if (typeof window === 'undefined') {
+            return reject(new Error('mkResizeImage solo puede usarse en el navegador.'));
+        }
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            var _a;
+            const img = new Image();
+            img.src = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+            img.onload = () => {
+                let width = img.width;
+                let height = img.height;
+                // Adjust based on constraints
+                if (width > maxWidth || height > maxHeight) {
+                    const aspectRatio = width / height;
+                    if (width > height) {
+                        width = maxWidth;
+                        height = maxWidth / aspectRatio;
+                    }
+                    else {
+                        height = maxHeight;
+                        width = maxHeight * aspectRatio;
+                    }
+                }
+                const canvas = document.createElement('canvas');
+                canvas.width = width;
+                canvas.height = height;
+                const ctx = canvas.getContext('2d');
+                if (!ctx)
+                    return reject(new Error('No se pudo obtener el contexto 2d del canvas.'));
+                ctx.drawImage(img, 0, 0, width, height);
+                // Convert to WebP for modern performance
+                const resizedImage = canvas.toDataURL('image/webp', quality);
+                resolve(resizedImage);
+            };
+            img.onerror = () => reject(new Error('Error al cargar la imagen en el motor de renderizado.'));
+        };
+        reader.onerror = () => reject(new Error('Error al leer el archivo de origen.'));
+        reader.readAsDataURL(file);
+    });
+};
+//# sourceMappingURL=images.js.map

package/dist/utils/images.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"images.js","sourceRoot":"","sources":["../../src/utils/images.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,EAC9B,IAAiB,EACjB,WAAmB,IAAI,EACvB,YAAoB,IAAI,EACxB,UAAkB,GAAG,EACN,EAAE;IACjB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACnC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAChC,OAAO,MAAM,CAAC,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC,CAAC;QACjF,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAEhC,MAAM,CAAC,MAAM,GAAG,CAAC,KAAK,EAAE,EAAE;;YACtB,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;YACxB,GAAG,CAAC,GAAG,GAAG,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAgB,CAAC;YAEzC,GAAG,CAAC,MAAM,GAAG,GAAG,EAAE;gBACd,IAAI,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;gBACtB,IAAI,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC;gBAExB,8BAA8B;gBAC9B,IAAI,KAAK,GAAG,QAAQ,IAAI,MAAM,GAAG,SAAS,EAAE,CAAC;oBACzC,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,CAAC;oBACnC,IAAI,KAAK,GAAG,MAAM,EAAE,CAAC;wBACjB,KAAK,GAAG,QAAQ,CAAC;wBACjB,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;oBACpC,CAAC;yBAAM,CAAC;wBACJ,MAAM,GAAG,SAAS,CAAC;wBACnB,KAAK,GAAG,SAAS,GAAG,WAAW,CAAC;oBACpC,CAAC;gBACL,CAAC;gBAED,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBAChD,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;gBACrB,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;gBACvB,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBAEpC,IAAI,CAAC,GAAG;oBAAE,OAAO,MAAM,CAAC,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC,CAAC;gBAEpF,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;gBAExC,yCAAyC;gBACzC,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;gBAC7D,OAAO,CAAC,YAAY,CAAC,CAAC;YAC1B,CAAC,CAAC;YAEF,GAAG,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC,CAAC;QACnG,CAAC,CAAC;QAEF,MAAM,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAC,CAAC;QAChF,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;AACP,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makroz/web",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "React UI components and hooks for MK-Director web applications",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.62.0",
-    "@makroz/core": "1.1.0"
+    "@makroz/core": "1.1.2"
   },
   "peerDependencies": {
     "next": "^16.0.0",