@makroz/web 1.0.1

package/dist/components/MkAvatar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+use;
+client;
+import { useMemo } from 'react';
+import styles from './MkAvatar.module.css';
+const SIZES = { xs: 24, sm: 32, md: 40, lg: 56, xl: 80 };
+// Darker colors for better contrast with --mk-foreground text
+const COLORS = ['#4f46e5', '#be185d', '#c2410c', '#0d9488', '#7c3aed', '#0891b2', '#dc2626', '#65a30d'];
+export const MkAvatar = ({ src, name = '', size = 'md', status, className, onClick }) => {
+    const initials = useMemo(() => {
+        var _a, _b, _c, _d;
+        const parts = name.trim().split(/\s+/);
+        return (((_b = (_a = parts[0]) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '') + ((_d = (_c = parts[1]) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : '')).toUpperCase();
+    }, [name]);
+    const bgColor = useMemo(() => {
+        let hash = 0;
+        for (let i = 0; i < name.length; i++)
+            hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        return COLORS[Math.abs(hash) % COLORS.length];
+    }, [name]);
+    const px = SIZES[size];
+    const fontSize = px * 0.4;
+    return (_jsxs("div", { className: `${styles.avatar} ${className || ''}`, style: { width: px, height: px, fontSize, cursor: onClick ? 'pointer' : undefined }, onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [src ? (_jsx("img", { src: src, alt: name, className: styles.image, loading: "lazy" })) : (_jsx("div", { className: styles.initials, style: { backgroundColor: bgColor }, children: initials })), status && _jsx("span", { className: `${styles.status} ${styles[status]}` })] }));
+};
+//# sourceMappingURL=MkAvatar.js.map

package/dist/components/MkAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkAvatar.js","sourceRoot":"","sources":["../../src/components/MkAvatar.tsx"],"names":[],"mappings":";AAAA,GAAG,CAAA;AAAC,MAAM,CAAA;AACV,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAiB3C,MAAM,KAAK,GAA2B,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAEjF,8DAA8D;AAC9D,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAExG,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,GAAG,EAAE,IAAI,GAAG,EAAE,EAAE,IAAI,GAAG,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IAC7G,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACvC,OAAO,CAAC,CAAC,MAAA,MAAA,KAAK,CAAC,CAAC,CAAC,0CAAG,CAAC,CAAC,mCAAI,EAAE,CAAC,GAAG,CAAC,MAAA,MAAA,KAAK,CAAC,CAAC,CAAC,0CAAG,CAAC,CAAC,mCAAI,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACzE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE;YAAE,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;QACvF,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IACvB,MAAM,QAAQ,GAAG,EAAE,GAAG,GAAG,CAAC;IAE1B,OAAO,CACH,eACI,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,SAAS,IAAI,EAAE,EAAE,EAChD,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,EACnF,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACpC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,aAEhC,GAAG,CAAC,CAAC,CAAC,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAC,MAAM,GAAG,CACvE,CAAC,CAAC,CAAC,CACA,cAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,YAC/D,QAAQ,GACP,CACT,EACA,MAAM,IAAI,eAAM,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC,EAAE,GAAI,IAClE,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/MkAvatar.module.css

@@ -0,0 +1,62 @@
+.avatar {
+    --mk-avatar-bg: var(--mk-muted);
+    --mk-avatar-color: var(--mk-foreground);
+    --mk-avatar-radius: 50%;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--mk-avatar-radius);
+    background-color: var(--mk-avatar-bg);
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.initials {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--mk-avatar-color);
+    font-weight: 600;
+    letter-spacing: 0.025em;
+}
+
+.status {
+    --mk-status-border: var(--mk-background);
+
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 25%;
+    height: 25%;
+    min-width: 8px;
+    min-height: 8px;
+    border-radius: 50%;
+    border: 2px solid var(--mk-status-border);
+}
+
+.online {
+    --mk-status-bg: #22c55e;
+    background-color: var(--mk-status-bg);
+}
+.offline {
+    --mk-status-bg: #9ca3af;
+    background-color: var(--mk-status-bg);
+}
+.away {
+    --mk-status-bg: #f59e0b;
+    background-color: var(--mk-status-bg);
+}
+.busy {
+    --mk-status-bg: #ef4444;
+    background-color: var(--mk-status-bg);
+}

package/dist/components/MkBadge.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * @module MkBadge
+ * @description Small label/tag component for status, counts, and categories.
+ */
+export interface MkBadgeProps {
+    children: React.ReactNode;
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md';
+    dot?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function MkBadge({ children, variant, size, dot, className, style, }: MkBadgeProps): React.JSX.Element;
+//# sourceMappingURL=MkBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkBadge.d.ts","sourceRoot":"","sources":["../../src/components/MkBadge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AAEH,MAAM,WAAW,YAAY;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC3E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED,wBAAgB,OAAO,CAAC,EACpB,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,GAAW,EACX,SAAS,EACT,KAAK,GACR,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAUlC"}

package/dist/components/MkBadge.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+use;
+client;
+import styles from './MkBadge.module.css';
+export function MkBadge({ children, variant = 'default', size = 'sm', dot = false, className, style, }) {
+    return (_jsxs("span", { className: `${styles.badge} ${styles[variant]} ${styles[size]} ${className || ''}`, style: style, children: [dot && _jsx("span", { className: styles.dot }), children] }));
+}
+;
+//# sourceMappingURL=MkBadge.js.map

package/dist/components/MkBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkBadge.js","sourceRoot":"","sources":["../../src/components/MkBadge.tsx"],"names":[],"mappings":";AAAA,GAAG,CAAA;AAAC,MAAM,CAAA;AAEV,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAgB1C,MAAM,UAAU,OAAO,CAAC,EACpB,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,GAAG,GAAG,KAAK,EACX,SAAS,EACT,KAAK,GACM;IACX,OAAO,CACH,gBACI,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,SAAS,IAAI,EAAE,EAAE,EAClF,KAAK,EAAE,KAAK,aAEX,GAAG,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,GAAG,GAAI,EACtC,QAAQ,IACN,CACV,CAAC;AACN,CAAC;AAAA,CAAC"}

package/dist/components/MkBadge.module.css

@@ -0,0 +1,74 @@
+.badge {
+    --mk-badge-bg: var(--mk-muted);
+    --mk-badge-color: var(--mk-foreground);
+    --mk-badge-radius: 999px;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-weight: 500;
+    border-radius: var(--mk-badge-radius);
+    white-space: nowrap;
+    line-height: 1;
+    background-color: var(--mk-badge-bg);
+    color: var(--mk-badge-color);
+    transition: all 0.2s ease;
+}
+
+.sm {
+    font-size: 0.6875rem;
+    padding: 0.125rem 0.5rem;
+}
+.md {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.625rem;
+}
+
+/* Variants - solid background with contrasting text */
+.default {
+    --mk-badge-bg: var(--mk-muted);
+    --mk-badge-color: var(--mk-foreground);
+}
+
+.primary {
+    --mk-badge-bg: var(--mk-primary);
+    --mk-badge-color: var(--mk-primary-foreground);
+}
+
+.success {
+    --mk-badge-bg: #22c55e;
+    --mk-badge-color: #ffffff;
+}
+
+.warning {
+    --mk-badge-bg: #f59e0b;
+    --mk-badge-color: #ffffff;
+}
+
+.error {
+    --mk-badge-bg: #ef4444;
+    --mk-badge-color: #ffffff;
+}
+
+.info {
+    --mk-badge-bg: #3b82f6;
+    --mk-badge-color: #ffffff;
+}
+
+/* Dark mode - adjust for better visibility */
+.mk-dark .success {
+    --mk-badge-bg: #16a34a;
+    --mk-badge-color: #ffffff;
+}
+.mk-dark .warning {
+    --mk-badge-bg: #d97706;
+    --mk-badge-color: #ffffff;
+}
+
+.dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+    flex-shrink: 0;
+}

package/dist/components/MkButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { MkTheme } from '@mk/core';
+interface MkButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'outline' | 'ghost' | 'error';
+    loading?: boolean;
+    /** @deprecated Theme is now controlled via CSS variables */
+    _theme?: MkTheme;
+}
+export declare const MkButton: React.FC<MkButtonProps>;
+export {};
+//# sourceMappingURL=MkButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkButton.d.ts","sourceRoot":"","sources":["../../src/components/MkButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,UAAU,aAAc,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACzE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuB5C,CAAC"}

package/dist/components/MkButton.js

@@ -0,0 +1,20 @@
+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 } from "react/jsx-runtime";
+use;
+client;
+import styles from './MkButton.module.css';
+export const MkButton = (_a) => {
+    var { variant = 'primary', loading, children, className, _theme: _theme, style } = _a, props = __rest(_a, ["variant", "loading", "children", "className", "_theme", "style"]);
+    return (_jsx("button", Object.assign({ className: `${styles.button} ${styles[variant]} ${className || ''}`, disabled: loading || props.disabled, style: Object.assign({ borderRadius: 'var(--mk-radius)', transition: 'all 0.2s ease' }, style) }, props, { children: loading ? _jsx("span", { className: styles.loader }) : children })));
+};
+//# sourceMappingURL=MkButton.js.map

package/dist/components/MkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkButton.js","sourceRoot":"","sources":["../../src/components/MkButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,GAAG,CAAA;AAAC,MAAM,CAAA;AAEV,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAU3C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAQjD,EAAE,EAAE;QAR6C,EAC9C,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,MAAM,EAAE,MAAM,EACd,KAAK,OAER,EADM,KAAK,cAPsC,kEAQjD,CADW;IAER,OAAO,CACH,+BACI,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,SAAS,IAAI,EAAE,EAAE,EACnE,QAAQ,EAAE,OAAO,IAAI,KAAK,CAAC,QAAQ,EACnC,KAAK,kBACD,YAAY,EAAE,kBAAkB,EAChC,UAAU,EAAE,eAAe,IACxB,KAAK,KAER,KAAK,cAER,OAAO,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,MAAM,GAAS,CAAC,CAAC,CAAC,QAAQ,IACxD,CACZ,CAAC;AACN,CAAC,CAAC"}

package/dist/components/MkButton.module.css

@@ -0,0 +1,85 @@
+.button {
+    --mk-btn-bg: var(--mk-primary);
+    --mk-btn-color: var(--mk-primary-foreground);
+    --mk-btn-border: transparent;
+    --mk-btn-radius: var(--mk-radius, 8px);
+    --mk-btn-padding: 0.5rem 1rem;
+    --mk-btn-font-size: 0.875rem;
+    --mk-btn-gap: 0.5rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--mk-btn-padding);
+    font-family: var(--mk-font-sans);
+    font-weight: 500;
+    font-size: var(--mk-btn-font-size);
+    border-radius: var(--mk-btn-radius);
+    background-color: var(--mk-btn-bg);
+    color: var(--mk-btn-color);
+    border: 1px solid var(--mk-btn-border);
+    gap: var(--mk-btn-gap);
+    cursor: pointer;
+    transition: var(--mk-transition);
+    outline: none;
+}
+
+.button:active {
+    transform: scale(0.98);
+}
+
+.button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Variants */
+.primary {
+    --mk-btn-bg: var(--mk-primary);
+    --mk-btn-color: var(--mk-primary-foreground);
+}
+
+.primary:hover:not(:disabled) {
+    filter: brightness(1.1);
+}
+
+.outline {
+    --mk-btn-bg: transparent;
+    --mk-btn-border: var(--mk-border);
+    --mk-btn-color: var(--mk-foreground);
+}
+
+.outline:hover:not(:disabled) {
+    background-color: var(--mk-accent);
+}
+
+.ghost {
+    --mk-btn-bg: transparent;
+    --mk-btn-border: transparent;
+    --mk-btn-color: var(--mk-foreground);
+}
+
+.ghost:hover:not(:disabled) {
+    background-color: var(--mk-accent);
+}
+
+.error {
+    --mk-btn-bg: var(--mk-error);
+    --mk-btn-color: #ffffff;
+}
+
+/* Loader Animation */
+.loader {
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid currentColor;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

package/dist/components/MkButton.test.d.ts

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

package/dist/components/MkButton.test.d.ts.map

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

package/dist/components/MkButton.test.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+use;
+client;
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MkButton } from '../components/MkButton';
+describe('MkButton', () => {
+    it('renders with correct text', () => {
+        render(_jsx(MkButton, { children: "Click me" }));
+        const button = screen.getByRole('button');
+        expect(button.textContent).toBe('Click me');
+    });
+    it('calls onClick when clicked', () => {
+        const handleClick = vi.fn();
+        render(_jsx(MkButton, { onClick: handleClick, children: "Click me" }));
+        fireEvent.click(screen.getByRole('button'));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('does not call onClick when disabled', () => {
+        const handleClick = vi.fn();
+        render(_jsx(MkButton, { disabled: true, onClick: handleClick, children: "Click me" }));
+        fireEvent.click(screen.getByRole('button'));
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+    it('applies variant class correctly', () => {
+        const { container } = render(_jsx(MkButton, { variant: "outline", children: "Outline" }));
+        const button = container.querySelector('button');
+        expect(button === null || button === void 0 ? void 0 : button.className).toMatch(/outline/);
+    });
+    it('shows loading spinner and disables button', () => {
+        render(_jsx(MkButton, { loading: true, children: "Click me" }));
+        const button = screen.getByRole('button');
+        expect(button.disabled).toBe(true);
+        // When loading, children are replaced with spinner
+        expect(button.querySelector('span')).not.toBeNull();
+    });
+    it('does not render children when loading', () => {
+        render(_jsx(MkButton, { loading: true, children: "Submit Form" }));
+        // When loading, the spinner replaces the children
+        expect(screen.queryByText('Submit Form')).toBeNull();
+    });
+    it('applies custom className', () => {
+        const { container } = render(_jsx(MkButton, { className: "custom-class", children: "Test" }));
+        const button = container.querySelector('button');
+        expect(button === null || button === void 0 ? void 0 : button.className).toContain('custom-class');
+    });
+    it('supports error variant', () => {
+        const { container } = render(_jsx(MkButton, { variant: "error", children: "Delete" }));
+        const button = container.querySelector('button');
+        expect(button === null || button === void 0 ? void 0 : button.className).toMatch(/error/);
+    });
+    it('supports ghost variant', () => {
+        const { container } = render(_jsx(MkButton, { variant: "ghost", children: "Ghost" }));
+        const button = container.querySelector('button');
+        expect(button === null || button === void 0 ? void 0 : button.className).toMatch(/ghost/);
+    });
+});
+//# sourceMappingURL=MkButton.test.js.map

package/dist/components/MkButton.test.js.map

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

package/dist/components/MkCard.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+/**
+ * @module MkCard
+ * @description Versatile card container with header, body, footer sections.
+ */
+export interface MkCardProps {
+    children: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    headerRight?: React.ReactNode;
+    footer?: React.ReactNode;
+    variant?: 'default' | 'outlined' | 'elevated';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    onClick?: () => void;
+    className?: string;
+}
+export declare const MkCard: React.FC<MkCardProps>;
+//# sourceMappingURL=MkCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkCard.d.ts","sourceRoot":"","sources":["../../src/components/MkCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AAEH,MAAM,WAAW,WAAW;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+BxC,CAAC"}

package/dist/components/MkCard.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+use;
+client;
+import styles from './MkCard.module.css';
+export const MkCard = ({ children, title, subtitle, headerRight, footer, variant = 'default', padding = 'md', onClick, className, }) => {
+    return (_jsxs("div", { className: `${styles.card} ${styles[variant]} ${styles[`pad-${padding}`]} ${onClick ? styles.clickable : ''} ${className || ''}`, onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [(title || headerRight) && (_jsxs("div", { className: styles.header, children: [_jsxs("div", { children: [title && _jsx("h3", { className: styles.title, children: title }), subtitle && _jsx("p", { className: styles.subtitle, children: subtitle })] }), headerRight && _jsx("div", { className: styles.headerRight, children: headerRight })] })), _jsx("div", { className: styles.body, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] }));
+};
+//# sourceMappingURL=MkCard.js.map

package/dist/components/MkCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkCard.js","sourceRoot":"","sources":["../../src/components/MkCard.tsx"],"names":[],"mappings":";AAAA,GAAG,CAAA;AAAC,MAAM,CAAA;AAEV,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAmBzC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC1C,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,IAAI,EACd,OAAO,EACP,SAAS,GACZ,EAAE,EAAE;IACD,OAAO,CACH,eACI,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,OAAO,OAAO,EAAE,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,IAAI,EAAE,EAAE,EAChI,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACpC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,aAEhC,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACvB,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aACzB,0BACK,KAAK,IAAI,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAM,EAClD,QAAQ,IAAI,YAAG,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAK,IACxD,EACL,WAAW,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,WAAW,GAAO,IACrE,CACT,EACD,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,YAAG,QAAQ,GAAO,EAC5C,MAAM,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,MAAM,YAAG,MAAM,GAAO,IACtD,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/MkCard.module.css

@@ -0,0 +1,63 @@
+.card {
+    --mk-card-bg: var(--mk-background);
+    --mk-card-border: var(--mk-border);
+    --mk-card-radius: var(--mk-radius, 8px);
+    --mk-card-shadow: none;
+    --mk-card-hover-shadow: 0 6px 16px rgba(0,0,0,0.1);
+    --mk-card-color: var(--mk-foreground);
+    --mk-card-muted-color: var(--mk-muted-foreground);
+
+    border-radius: var(--mk-card-radius);
+    background-color: var(--mk-card-bg);
+    color: var(--mk-card-color);
+    transition: var(--mk-transition);
+    overflow: hidden;
+}
+
+:global([data-theme='dark']) .card {
+    --mk-card-hover-shadow: 0 6px 16px rgba(0,0,0,0.4);
+}
+
+.default { border: 1px solid var(--mk-card-border); }
+.outlined { border: 2px solid var(--mk-card-border); background: transparent; }
+.elevated { 
+    --mk-card-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
+    border: none; 
+    box-shadow: var(--mk-card-shadow); 
+}
+
+:global([data-theme='dark']) .elevated {
+    --mk-card-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
+}
+
+.pad-none {}
+.pad-sm { padding: 0.75rem; }
+.pad-md { padding: 1rem; }
+.pad-lg { padding: 1.5rem; }
+
+.clickable { cursor: pointer; }
+.clickable:hover { box-shadow: var(--mk-card-hover-shadow); transform: translateY(-1px); }
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 0.75rem;
+}
+
+.title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: inherit;
+}
+
+.subtitle {
+    margin: 0.125rem 0 0;
+    font-size: 0.8125rem;
+    color: var(--mk-card-muted-color);
+}
+
+.headerRight { flex-shrink: 0; }
+.body {}
+.footer { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--mk-card-border); }

package/dist/components/MkCheck.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+/**
+ * @module MkCheck
+ * @description Checkbox component with label, error, and indeterminate support.
+ * Same prop interface as mk-mobile MkCheck.
+ *
+ * @example
+ * ```tsx
+ * <MkCheck label="Accept terms" checked={agreed} onChange={setAgreed} />
+ * <MkCheck label="Select all" indeterminate={someChecked} onChange={handleAll} />
+ * ```
+ */
+export interface MkCheckProps {
+    /** Checkbox label text. */
+    label?: string;
+    /** Whether checked. */
+    checked?: boolean;
+    /** Indeterminate state (partial selection). */
+    indeterminate?: boolean;
+    /** Callback when value changes. */
+    onChange?: (checked: boolean) => void;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Error message. */
+    error?: string;
+    /** Size variant. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional className. */
+    className?: string;
+}
+export declare const MkCheck: React.FC<MkCheckProps>;
+//# sourceMappingURL=MkCheck.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkCheck.d.ts","sourceRoot":"","sources":["../../src/components/MkCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,YAAY;IACzB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0C1C,CAAC"}

package/dist/components/MkCheck.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+use;
+client;
+import { useCallback } from 'react';
+import styles from './MkCheck.module.css';
+export const MkCheck = ({ label, checked = false, indeterminate = false, onChange, disabled = false, error, size = 'md', className, }) => {
+    const handleChange = useCallback(() => {
+        if (!disabled)
+            onChange === null || onChange === void 0 ? void 0 : onChange(!checked);
+    }, [checked, disabled, onChange]);
+    return (_jsxs("div", { className: `${styles.container} ${className || ''}`, children: [_jsxs("label", { className: `${styles.label} ${disabled ? styles.disabled : ''}`, children: [_jsxs("div", { className: `${styles.checkbox} ${styles[size]} ${checked ? styles.checked : ''} ${indeterminate ? styles.indeterminate : ''} ${error ? styles.error : ''}`, onClick: handleChange, role: "checkbox", "aria-checked": indeterminate ? 'mixed' : checked, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onKeyDown: (e) => { if (e.key === ' ' || e.key === 'Enter')
+                            handleChange(); }, children: [checked && (_jsx("svg", { viewBox: "0 0 12 12", className: styles.icon, children: _jsx("polyline", { points: "1.5 6 4.5 9 10.5 3", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })), indeterminate && !checked && (_jsx("svg", { viewBox: "0 0 12 12", className: styles.icon, children: _jsx("line", { x1: "2.5", y1: "6", x2: "9.5", y2: "6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }))] }), label && _jsx("span", { className: styles.text, children: label })] }), error && _jsx("span", { className: styles.errorText, children: error })] }));
+};
+//# sourceMappingURL=MkCheck.js.map

package/dist/components/MkCheck.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkCheck.js","sourceRoot":"","sources":["../../src/components/MkCheck.tsx"],"names":[],"mappings":";AAAA,GAAG,CAAA;AAAC,MAAM,CAAA;AACV,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAiC1C,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC5C,KAAK,EACL,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GACZ,EAAE,EAAE;IACD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,CAAC,QAAQ;YAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAElC,OAAO,CACH,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,IAAI,SAAS,IAAI,EAAE,EAAE,aACpD,iBAAO,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,aAClE,eACI,SAAS,EAAE,GAAG,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAC1J,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,UAAU,kBACD,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,mBAChC,QAAQ,EACvB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;4BAAE,YAAY,EAAE,CAAC,CAAC,CAAC,aAE5E,OAAO,IAAI,CACR,cAAK,OAAO,EAAC,WAAW,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,YAC3C,mBAAU,MAAM,EAAC,oBAAoB,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,GAAG,GACrI,CACT,EACA,aAAa,IAAI,CAAC,OAAO,IAAI,CAC1B,cAAK,OAAO,EAAC,WAAW,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,YAC3C,eAAM,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,GAAG,GAClG,CACT,IACC,EACL,KAAK,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,IAAI,YAAG,KAAK,GAAQ,IAClD,EACP,KAAK,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,YAAG,KAAK,GAAQ,IACzD,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/MkCheck.module.css

@@ -0,0 +1,87 @@
+.container {
+    --mk-check-bg: var(--mk-background);
+    --mk-check-border: var(--mk-border);
+    --mk-check-checked-bg: var(--mk-primary);
+    --mk-check-radius: calc(var(--mk-radius, 8px) * 0.375);
+    --mk-check-color: var(--mk-foreground);
+    --mk-check-accent: var(--mk-primary);
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    color: var(--mk-check-color);
+}
+
+.label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+    color: inherit;
+}
+
+.label.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--mk-check-border);
+    border-radius: var(--mk-check-radius);
+    background-color: var(--mk-check-bg);
+    transition: all 0.15s ease;
+    flex-shrink: 0;
+    cursor: pointer;
+}
+
+.sm { width: 16px; height: 16px; }
+.md { width: 20px; height: 20px; }
+.lg { width: 24px; height: 24px; }
+
+.checkbox:hover {
+    border-color: var(--mk-check-accent);
+}
+
+.checkbox:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-check-accent), transparent 80%);
+}
+
+.checked {
+    background-color: var(--mk-check-checked-bg);
+    border-color: var(--mk-check-checked-bg);
+    color: var(--mk-primary-foreground, #fff);
+}
+
+.indeterminate {
+    background-color: var(--mk-check-checked-bg);
+    border-color: var(--mk-check-checked-bg);
+    color: var(--mk-primary-foreground, #fff);
+}
+
+.error {
+    --mk-check-border: var(--mk-error);
+    --mk-check-accent: var(--mk-error);
+}
+
+.icon {
+    width: 12px;
+    height: 12px;
+}
+
+.text {
+    font-size: 0.875rem;
+    color: inherit;
+    line-height: 1.4;
+}
+
+.errorText {
+    font-size: 0.75rem;
+    color: var(--mk-error);
+    font-weight: 500;
+    margin-left: 1.75rem;
+}