@makroz/web 1.2.0 → 1.2.2

package/dist/components/MkInfiniteList.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface MkInfiniteListProps<T> {
+    items: T[];
+    renderItem: (item: T) => React.ReactNode;
+    loading?: boolean;
+    hasMore?: boolean;
+    onLoadMore: () => void;
+    emptyMessage?: string;
+    skeletonCount?: number;
+    skeletonItem?: React.ReactNode;
+    perPage?: number;
+}
+export declare function MkInfiniteList<T>({ items, renderItem, loading, hasMore, onLoadMore, emptyMessage, skeletonCount, skeletonItem, perPage }: MkInfiniteListProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MkInfiniteList.d.ts.map

package/dist/components/MkInfiniteList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInfiniteList.d.ts","sourceRoot":"","sources":["../../src/components/MkInfiniteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,UAAU,mBAAmB,CAAC,CAAC;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,UAAU,EACV,YAA8C,EAC9C,aAAiB,EACjB,YAAY,EACZ,OAAY,EACf,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA2DxB"}

package/dist/components/MkInfiniteList.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from 'react';
+import styles from './MkInfiniteList.module.css';
+export function MkInfiniteList({ items, renderItem, loading, hasMore, onLoadMore, emptyMessage = "No se encontraron resultados.", skeletonCount = 3, skeletonItem, perPage = 15 }) {
+    const observerTarget = useRef(null);
+    const handleObserver = useCallback((entries) => {
+        const target = entries[0];
+        if (target.isIntersecting && hasMore && !loading) {
+            onLoadMore();
+        }
+    }, [hasMore, loading, onLoadMore]);
+    useEffect(() => {
+        const element = observerTarget.current;
+        const observer = new IntersectionObserver(handleObserver, {
+            root: null, // Use viewport
+            threshold: 1.0, // Fully visible trigger
+            rootMargin: '100px' // Pre-fetch slightly before reaching bottom
+        });
+        if (element) {
+            observer.observe(element);
+        }
+        return () => {
+            if (element)
+                observer.unobserve(element);
+        };
+    }, [handleObserver]);
+    return (_jsx("div", { className: styles.scrollContainer, children: _jsxs("div", { className: styles.list, children: [items.length === 0 && !loading && (_jsx("div", { className: styles.empty, children: emptyMessage })), items.map((item, index) => (_jsx("div", { className: styles.itemWrapper, style: { '--row-index': index % perPage }, children: renderItem(item) }, index))), loading && (_jsx("div", { className: styles.loadingArea, children: Array.from({ length: skeletonCount }).map((_, i) => (_jsx("div", { className: styles.skeletonWrapper, children: skeletonItem || _jsx("div", { className: styles.defaultSkeleton }) }, `skeleton-${i}`))) })), _jsx("div", { ref: observerTarget, className: styles.trigger })] }) }));
+}
+//# sourceMappingURL=MkInfiniteList.js.map

package/dist/components/MkInfiniteList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInfiniteList.js","sourceRoot":"","sources":["../../src/components/MkInfiniteList.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAcjD,MAAM,UAAU,cAAc,CAAI,EAC9B,KAAK,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,UAAU,EACV,YAAY,GAAG,+BAA+B,EAC9C,aAAa,GAAG,CAAC,EACjB,YAAY,EACZ,OAAO,GAAG,EAAE,EACS;IAErB,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEpD,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,OAAoC,EAAE,EAAE;QACxE,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,MAAM,CAAC,cAAc,IAAI,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;YAC/C,UAAU,EAAE,CAAC;QACjB,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC;QACvC,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,cAAc,EAAE;YACtD,IAAI,EAAE,IAAI,EAAE,eAAe;YAC3B,SAAS,EAAE,GAAG,EAAE,wBAAwB;YACxC,UAAU,EAAE,OAAO,CAAC,4CAA4C;SACnE,CAAC,CAAC;QAEH,IAAI,OAAO,EAAE,CAAC;YACV,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC9B,CAAC;QAED,OAAO,GAAG,EAAE;YACR,IAAI,OAAO;gBAAE,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC7C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACH,cAAK,SAAS,EAAE,MAAM,CAAC,eAAe,YAClC,eAAK,SAAS,EAAE,MAAM,CAAC,IAAI,aACtB,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,CAC/B,cAAK,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,YAAY,GAAO,CACrD,EAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,cAEI,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,GAAG,OAAO,EAAyB,YAE/D,UAAU,CAAC,IAAI,CAAC,IAJZ,KAAK,CAKR,CACT,CAAC,EAED,OAAO,IAAI,CACR,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAC7B,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACjD,cAA2B,SAAS,EAAE,MAAM,CAAC,eAAe,YACvD,YAAY,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,eAAe,GAAI,IADrD,YAAY,CAAC,EAAE,CAEnB,CACT,CAAC,GACA,CACT,EAED,cAAK,GAAG,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,IACrD,GACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/MkInfiniteList.module.css

@@ -0,0 +1,69 @@
+.scrollContainer {
+    --mk-inf-list-gap: 1rem;
+    --mk-inf-list-item-bg: transparent;
+    --mk-inf-list-border: var(--mk-border);
+    --mk-inf-list-radius: var(--mk-radius, 8px);
+    --mk-inf-list-muted-color: var(--mk-muted-foreground);
+
+    width: 100%;
+    margin: 1rem 0;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mk-inf-list-gap);
+}
+
+.itemWrapper {
+    width: 100%;
+    background-color: var(--mk-inf-list-item-bg);
+    animation: mk-fade-in 0.5s var(--mk-ease-out) backwards;
+    animation-delay: calc(var(--row-index, 0) * 0.05s);
+}
+
+.trigger {
+    height: 10px;
+    margin-top: 10px;
+}
+
+.loadingArea {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mk-inf-list-gap);
+    padding: 1rem 0;
+}
+
+.defaultSkeleton {
+    height: 4rem;
+    background-color: var(--mk-muted);
+    background-image: linear-gradient(
+        90deg,
+        transparent 25%,
+        var(--mk-border) 50%,
+        transparent 75%
+    );
+    background-size: 200% 100%;
+    animation: mk-shimmer 2s infinite linear;
+    border-radius: var(--mk-inf-list-radius);
+    width: 100%;
+}
+
+.empty {
+    text-align: center;
+    padding: 4rem 1rem;
+    color: var(--mk-inf-list-muted-color);
+    font-size: 0.875rem;
+    border: 1px dashed var(--mk-inf-list-border);
+    border-radius: var(--mk-inf-list-radius);
+}
+
+@keyframes skeleton-loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}

package/dist/components/MkInfiniteList.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MkInfiniteList } from './MkInfiniteList';
+interface User {
+    id: number;
+    name: string;
+    role: string;
+}
+declare const meta: Meta<typeof MkInfiniteList<User>>;
+export default meta;
+type Story = StoryObj<typeof MkInfiniteList<User>>;
+export declare const Empty: Story;
+export declare const WithItems: Story;
+export declare const Loading: Story;
+export declare const EndOfList: Story;
+export declare const WithCustomSkeleton: Story;
+export declare const WithPerPage: Story;
+//# sourceMappingURL=MkInfiniteList.stories.d.ts.map

package/dist/components/MkInfiniteList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInfiniteList.stories.d.ts","sourceRoot":"","sources":["../../src/components/MkInfiniteList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,UAAU,IAAI;IACV,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,CAK3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;AAyCnD,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAchC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC"}

package/dist/components/MkInfiniteList.stories.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MkInfiniteList } from './MkInfiniteList';
+const meta = {
+    title: 'Components/MkInfiniteList',
+    component: MkInfiniteList,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+};
+export default meta;
+const SAMPLE_USERS = Array.from({ length: 50 }, (_, i) => ({
+    id: i + 1,
+    name: `User ${i + 1}`,
+    role: i % 3 === 0 ? 'admin' : 'user',
+}));
+const renderUser = (user) => (_jsxs("div", { style: {
+        padding: '12px 16px',
+        borderBottom: '1px solid #f3f4f6',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+    }, children: [_jsx("div", { style: {
+                width: 40,
+                height: 40,
+                borderRadius: '50%',
+                background: '#6366f1',
+                color: 'white',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 600,
+            }, children: user.id }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 500 }, children: user.name }), _jsx("div", { style: { fontSize: 12, color: '#6b7280' }, children: user.role })] })] }, user.id));
+export const Empty = {
+    args: {
+        items: [],
+        renderItem: renderUser,
+        hasMore: false,
+        loading: false,
+        onLoadMore: () => { },
+        emptyMessage: 'No users yet',
+    },
+};
+export const WithItems = {
+    args: {
+        items: SAMPLE_USERS,
+        renderItem: renderUser,
+        hasMore: true,
+        loading: false,
+        onLoadMore: () => console.log('load more'),
+    },
+};
+export const Loading = {
+    args: {
+        items: SAMPLE_USERS,
+        renderItem: renderUser,
+        hasMore: true,
+        loading: true,
+        onLoadMore: () => { },
+    },
+};
+export const EndOfList = {
+    args: {
+        items: SAMPLE_USERS,
+        renderItem: renderUser,
+        hasMore: false,
+        loading: false,
+        onLoadMore: () => { },
+    },
+};
+export const WithCustomSkeleton = {
+    args: {
+        items: [],
+        renderItem: renderUser,
+        loading: true,
+        hasMore: true,
+        onLoadMore: () => { },
+        skeletonCount: 5,
+        skeletonItem: (_jsx("div", { style: { padding: 16, background: '#f3f4f6', margin: 8, borderRadius: 4 }, children: "Loading item..." })),
+    },
+};
+export const WithPerPage = {
+    args: {
+        items: SAMPLE_USERS,
+        renderItem: renderUser,
+        hasMore: true,
+        loading: false,
+        onLoadMore: () => console.log('load more'),
+        perPage: 10,
+    },
+};
+//# sourceMappingURL=MkInfiniteList.stories.js.map

package/dist/components/MkInfiniteList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInfiniteList.stories.js","sourceRoot":"","sources":["../../src/components/MkInfiniteList.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/MkInfiniteList.stories.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkInfiniteList.stories.test.d.ts.map

package/dist/components/MkInfiniteList.stories.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInfiniteList.stories.test.d.ts","sourceRoot":"","sources":["../../src/components/MkInfiniteList.stories.test.tsx"],"names":[],"mappings":""}

package/dist/components/MkInfiniteList.stories.test.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Smoke snapshot for MkInfiniteList — required by R-MK-002.
+ *
+ * Note: jsdom's IntersectionObserver is not implemented natively,
+ * so onLoadMore will not be triggered by the observer. We just
+ * render the items as-is. The snapshot captures the component
+ * structure.
+ */
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { render, cleanup } from '@testing-library/react';
+import { MkInfiniteList } from './MkInfiniteList';
+describe('MkInfiniteList story smoke', () => {
+    afterEach(cleanup);
+    it('renders with items', () => {
+        const { container } = render(_jsx(MkInfiniteList, { items: [
+                { id: 1, name: 'A' },
+                { id: 2, name: 'B' },
+                { id: 3, name: 'C' },
+            ], renderItem: (item) => _jsx("div", { children: item.name }, item.id), hasMore: true, loading: false, onLoadMore: vi.fn() }));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=MkInfiniteList.stories.test.js.map

package/dist/components/MkInfiniteList.stories.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInfiniteList.stories.test.js","sourceRoot":"","sources":["../../src/components/MkInfiniteList.stories.test.tsx"],"names":[],"mappings":";AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAQ,CAAC,4BAA4B,EAAE,GAAG,EAAE;IACxC,SAAS,CAAC,OAAO,CAAC,CAAC;IAEnB,EAAE,CAAC,oBAAoB,EAAE,GAAG,EAAE;QAC1B,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CACxB,KAAC,cAAc,IACX,KAAK,EAAE;gBACH,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE;gBACpB,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE;gBACpB,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE;aACvB,EACD,UAAU,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,wBAAoB,IAAI,CAAC,IAAI,IAAnB,IAAI,CAAC,EAAE,CAAmB,EAC/D,OAAO,QACP,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,EAAE,CAAC,EAAE,EAAE,GACrB,CACL,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

package/dist/components/MkInput.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface MkInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label?: string;
+    error?: string;
+    success?: boolean;
+    helperText?: string;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    onChange?: (value: string) => void;
+}
+export declare const MkInput: React.FC<MkInputProps>;
+export {};
+//# sourceMappingURL=MkInput.d.ts.map

package/dist/components/MkInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInput.d.ts","sourceRoot":"","sources":["../../src/components/MkInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA+B1C,CAAC"}

package/dist/components/MkInput.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './MkInput.module.css';
+export const MkInput = (_a) => {
+    var { label, error, success, helperText, iconLeft, iconRight, className, onChange } = _a, props = __rest(_a, ["label", "error", "success", "helperText", "iconLeft", "iconRight", "className", "onChange"]);
+    const handleChange = (e) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+    };
+    return (_jsxs("div", { className: styles.container, children: [label && _jsx("label", { className: styles.label, children: label }), _jsxs("div", { className: `${styles.wrapper} ${error ? styles.wrapperError : success ? styles.wrapperSuccess : ''}`, children: [iconLeft && _jsx("span", { className: styles.iconLeft, children: iconLeft }), _jsx("input", Object.assign({ className: `${styles.input} ${iconLeft ? styles.inputWithLeft : ''} ${iconRight ? styles.inputWithRight : ''} ${className || ''}`, onChange: handleChange }, props)), iconRight && _jsx("span", { className: styles.iconRight, children: iconRight })] }), error && _jsx("span", { className: styles.errorText, children: error }), !error && helperText && _jsx("span", { className: styles.helperText, children: helperText })] }));
+};
+//# sourceMappingURL=MkInput.js.map

package/dist/components/MkInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInput.js","sourceRoot":"","sources":["../../src/components/MkInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAY1C,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAU/C,EAAE,EAAE;QAV2C,EAC5C,KAAK,EACL,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,OAEX,EADM,KAAK,cAToC,6FAU/C,CADW;IAER,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC5D,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC3B,KAAK,IAAI,gBAAO,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAS,EACzD,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,aACpG,QAAQ,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAQ,EAChE,8BACI,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,IAAI,EAAE,EAAE,EACjI,QAAQ,EAAE,YAAY,IAClB,KAAK,EACX,EACD,SAAS,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,YAAG,SAAS,GAAQ,IACjE,EACL,KAAK,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,YAAG,KAAK,GAAQ,EAC1D,CAAC,KAAK,IAAI,UAAU,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,UAAU,YAAG,UAAU,GAAQ,IAC9E,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/MkInput.module.css

@@ -0,0 +1,94 @@
+.container {
+    --mk-input-bg: var(--mk-background);
+    --mk-input-border: var(--mk-border);
+    --mk-input-color: var(--mk-foreground);
+    --mk-input-radius: var(--mk-radius, 8px);
+    --mk-input-focus-border: var(--mk-primary);
+    --mk-input-placeholder: var(--mk-muted-foreground);
+    
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    width: 100%;
+}
+
+.label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--mk-input-color);
+    opacity: 0.9;
+}
+
+.wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.input {
+    width: 100%;
+    padding: 0.625rem 0.875rem;
+    font-size: 0.875rem;
+    background-color: var(--mk-input-bg);
+    border: 1px solid var(--mk-input-border);
+    border-radius: var(--mk-input-radius);
+    color: var(--mk-input-color);
+    transition: var(--mk-transition);
+    outline: none;
+}
+
+.input::placeholder {
+    color: var(--mk-input-placeholder);
+}
+
+.input:focus {
+    border-color: var(--mk-input-focus-border);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-input-focus-border), transparent 85%);
+}
+
+.wrapperError .input {
+    --mk-input-border: var(--mk-error);
+    --mk-input-focus-border: var(--mk-error);
+}
+
+.wrapperSuccess .input {
+    --mk-input-border: var(--mk-success, #10b981);
+    --mk-input-focus-border: var(--mk-success, #10b981);
+}
+
+.iconLeft, .iconRight {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--mk-muted-foreground);
+    pointer-events: none;
+}
+
+.iconLeft {
+    left: 0.875rem;
+}
+
+.iconRight {
+    right: 0.875rem;
+}
+
+.inputWithLeft {
+    padding-left: 2.5rem;
+}
+
+.inputWithRight {
+    padding-right: 2.5rem;
+}
+
+.errorText {
+    font-size: 0.75rem;
+    color: var(--mk-error);
+    font-weight: 500;
+}
+
+.helperText {
+    font-size: 0.75rem;
+    color: var(--mk-muted-foreground);
+}

package/dist/components/MkInput.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MkInput } from './MkInput';
+declare const meta: Meta<typeof MkInput>;
+export default meta;
+type Story = StoryObj<typeof MkInput>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;
+export declare const WithSuccess: Story;
+export declare const WithHelperText: Story;
+export declare const WithIcons: Story;
+//# sourceMappingURL=MkInput.stories.d.ts.map

package/dist/components/MkInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInput.stories.d.ts","sourceRoot":"","sources":["../../src/components/MkInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAmB9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC"}

package/dist/components/MkInput.stories.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MkInput } from './MkInput';
+const meta = {
+    title: 'Components/MkInput',
+    component: MkInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        placeholder: { control: 'text' },
+        error: { control: 'text' },
+        helperText: { control: 'text' },
+        success: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        type: {
+            control: { type: 'select' },
+            options: ['text', 'email', 'password', 'number', 'tel', 'url'],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        placeholder: 'Enter your name',
+    },
+};
+export const WithLabel = {
+    args: {
+        label: 'Full name',
+        placeholder: 'Mario Guzman',
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Disabled field',
+        placeholder: 'Cannot edit',
+        disabled: true,
+        value: 'Locked value',
+    },
+};
+export const WithError = {
+    args: {
+        label: 'Email',
+        placeholder: 'you@example.com',
+        error: 'Invalid email address',
+        value: 'not-an-email',
+    },
+};
+export const WithSuccess = {
+    args: {
+        label: 'Username',
+        value: 'marioguzman',
+        success: true,
+        helperText: 'Username is available',
+    },
+};
+export const WithHelperText = {
+    args: {
+        label: 'Password',
+        type: 'password',
+        placeholder: '••••••••',
+        helperText: 'At least 8 characters',
+    },
+};
+export const WithIcons = {
+    args: {
+        label: 'Search',
+        placeholder: 'Search...',
+        iconLeft: _jsx("span", { "aria-hidden": true, children: "\uD83D\uDD0D" }),
+        iconRight: _jsx("span", { "aria-hidden": true, children: "\u2715" }),
+    },
+};
+//# sourceMappingURL=MkInput.stories.js.map

package/dist/components/MkInput.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInput.stories.js","sourceRoot":"","sources":["../../src/components/MkInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,IAAI,GAAyB;IAC/B,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE;QACR,MAAM,EAAE,UAAU;KACrB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC/B,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC/B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,IAAI,EAAE;YACF,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC;SACjE;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,WAAW,EAAE,iBAAiB;KACjC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,KAAK,EAAE,WAAW;QAClB,WAAW,EAAE,cAAc;KAC9B;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC3B,IAAI,EAAE;QACF,KAAK,EAAE,gBAAgB;QACvB,WAAW,EAAE,aAAa;QAC1B,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,cAAc;KACxB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,iBAAiB;QAC9B,KAAK,EAAE,uBAAuB;QAC9B,KAAK,EAAE,cAAc;KACxB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAC9B,IAAI,EAAE;QACF,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,uBAAuB;KACtC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACjC,IAAI,EAAE;QACF,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,UAAU;QAChB,WAAW,EAAE,UAAU;QACvB,UAAU,EAAE,uBAAuB;KACtC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,WAAW;QACxB,QAAQ,EAAE,+DAA2B;QACrC,SAAS,EAAE,yDAA0B;KACxC;CACJ,CAAC"}

package/dist/components/MkInput.stories.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkInput.stories.test.d.ts.map

package/dist/components/MkInput.stories.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInput.stories.test.d.ts","sourceRoot":"","sources":["../../src/components/MkInput.stories.test.tsx"],"names":[],"mappings":""}

package/dist/components/MkInput.stories.test.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Smoke snapshot for MkInput — generates `__snapshots__/MkInput.stories.snap`.
+ * Required by R-MK-002 stories coverage rule (mk:lint:stories).
+ */
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/react';
+import { MkInput } from './MkInput';
+describe('MkInput story smoke', () => {
+    afterEach(cleanup);
+    it('renders default', () => {
+        const { container } = render(_jsx(MkInput, { placeholder: "Enter your name" }));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=MkInput.stories.test.js.map

package/dist/components/MkInput.stories.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkInput.stories.test.js","sourceRoot":"","sources":["../../src/components/MkInput.stories.test.tsx"],"names":[],"mappings":";AAAA;;;GAGG;AACH,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACjC,SAAS,CAAC,OAAO,CAAC,CAAC;IAEnB,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE;QACvB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,OAAO,IAAC,WAAW,EAAC,iBAAiB,GAAG,CAAC,CAAC;QACxE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

package/dist/components/MkLoading.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+/**
+ * @module MkLoading
+ * @description Loading spinner/indicator with optional label and overlay mode.
+ */
+export interface MkLoadingProps {
+    /** Show/hide the loading state. Default true. */
+    visible?: boolean;
+    /** Loading label text. */
+    label?: string;
+    /** Spinner size. */
+    size?: 'sm' | 'md' | 'lg';
+    /** If true, renders as a full-screen overlay. */
+    overlay?: boolean;
+    /** Color override for the spinner. */
+    color?: string;
+    className?: string;
+}
+export declare const MkLoading: React.FC<MkLoadingProps>;
+//# sourceMappingURL=MkLoading.d.ts.map

package/dist/components/MkLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkLoading.d.ts","sourceRoot":"","sources":["../../src/components/MkLoading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AAEH,MAAM,WAAW,cAAc;IAC3B,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAID,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2B9C,CAAC"}

package/dist/components/MkLoading.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './MkLoading.module.css';
+const SIZES = { sm: 20, md: 32, lg: 48 };
+export const MkLoading = ({ visible = true, label, size = 'md', overlay = false, color, className, }) => {
+    if (!visible)
+        return null;
+    const px = SIZES[size];
+    const spinner = (_jsxs("div", { className: `${styles.wrapper} ${className || ''}`, children: [_jsxs("svg", { className: styles.spinner, width: px, height: px, viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "10", stroke: color || 'var(--mk-primary, #6366f1)', strokeWidth: "3", opacity: "0.25" }), _jsx("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: color || 'var(--mk-primary, #6366f1)', strokeWidth: "3", strokeLinecap: "round" })] }), label && _jsx("span", { className: styles.label, children: label })] }));
+    if (overlay) {
+        return _jsx("div", { className: styles.overlay, children: spinner });
+    }
+    return spinner;
+};
+//# sourceMappingURL=MkLoading.js.map

package/dist/components/MkLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkLoading.js","sourceRoot":"","sources":["../../src/components/MkLoading.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAqB5C,MAAM,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAEzC,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAChD,OAAO,GAAG,IAAI,EACd,KAAK,EACL,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,KAAK,EACL,SAAS,GACZ,EAAE,EAAE;IACD,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAEvB,MAAM,OAAO,GAAG,CACZ,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,SAAS,IAAI,EAAE,EAAE,aAClD,eAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,aAClF,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,MAAM,EAAE,KAAK,IAAI,4BAA4B,EAAE,WAAW,EAAC,GAAG,EAAC,OAAO,EAAC,MAAM,GAAG,EAC/G,eAAM,CAAC,EAAC,yBAAyB,EAAC,MAAM,EAAE,KAAK,IAAI,4BAA4B,EAAE,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,GAAG,IACvH,EACL,KAAK,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAQ,IACrD,CACT,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,OAAO,GAAO,CAAC;IAC3D,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC"}

package/dist/components/MkLoading.module.css

@@ -0,0 +1,39 @@
+.wrapper {
+    --mk-loading-color: var(--mk-primary);
+    --mk-loading-muted: var(--mk-muted-foreground);
+    --mk-loading-overlay-bg: color-mix(in srgb, var(--mk-background) 80%, transparent);
+    --mk-loading-overlay-blur: 4px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+.spinner {
+    animation: mk-spin 0.75s linear infinite;
+    color: var(--mk-loading-color);
+}
+
+@keyframes mk-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.label {
+    font-size: 0.8125rem;
+    color: var(--mk-loading-muted);
+}
+
+.overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--mk-loading-overlay-bg);
+    backdrop-filter: blur(var(--mk-loading-overlay-blur));
+}