@makroz/web 1.2.0 → 1.2.2

package/dist/components/MkTabs.stories.js

@@ -0,0 +1,73 @@
+import { MkTabs } from './MkTabs';
+const meta = {
+    title: 'Components/MkTabs',
+    component: MkTabs,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['underline', 'pills', 'segmented'],
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md'],
+        },
+    },
+};
+export default meta;
+export const TwoTabs = {
+    args: {
+        tabs: [
+            { key: 'overview', label: 'Overview' },
+            { key: 'details', label: 'Details' },
+        ],
+        variant: 'underline',
+    },
+};
+export const FourTabs = {
+    args: {
+        tabs: [
+            { key: 'all', label: 'All', badge: 42 },
+            { key: 'unread', label: 'Unread', badge: 3 },
+            { key: 'starred', label: 'Starred' },
+            { key: 'archived', label: 'Archived' },
+        ],
+        variant: 'underline',
+    },
+};
+export const Pills = {
+    args: {
+        tabs: [
+            { key: 'day', label: 'Day' },
+            { key: 'week', label: 'Week' },
+            { key: 'month', label: 'Month' },
+            { key: 'year', label: 'Year' },
+        ],
+        variant: 'pills',
+    },
+};
+export const Segmented = {
+    args: {
+        tabs: [
+            { key: 'list', label: 'List view' },
+            { key: 'grid', label: 'Grid view' },
+            { key: 'board', label: 'Board view' },
+        ],
+        variant: 'segmented',
+    },
+};
+export const WithDisabled = {
+    args: {
+        tabs: [
+            { key: 'profile', label: 'Profile' },
+            { key: 'security', label: 'Security' },
+            { key: 'billing', label: 'Billing', disabled: true },
+            { key: 'team', label: 'Team' },
+        ],
+        variant: 'underline',
+    },
+};
+//# sourceMappingURL=MkTabs.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkTabs.stories.js","sourceRoot":"","sources":["../../src/components/MkTabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,IAAI,GAAwB;IAC9B,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACR,MAAM,EAAE,QAAQ;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,WAAW,EAAE,OAAO,EAAE,WAAW,CAAC;SAC/C;QACD,IAAI,EAAE;YACF,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;SACxB;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,IAAI,EAAE;YACF,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACtC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;SACvC;QACD,OAAO,EAAE,WAAW;KACvB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC3B,IAAI,EAAE;QACF,IAAI,EAAE;YACF,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;YACvC,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE;YAC5C,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACpC,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;SACzC;QACD,OAAO,EAAE,WAAW;KACvB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IACxB,IAAI,EAAE;QACF,IAAI,EAAE;YACF,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;YAC5B,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;YAC9B,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAChC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;SACjC;QACD,OAAO,EAAE,OAAO;KACnB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,IAAI,EAAE;YACF,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE;YACnC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE;YACnC,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE;SACxC;QACD,OAAO,EAAE,WAAW;KACvB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IAC/B,IAAI,EAAE;QACF,IAAI,EAAE;YACF,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACpC,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACtC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE;YACpD,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;SACjC;QACD,OAAO,EAAE,WAAW;KACvB;CACJ,CAAC"}

package/dist/components/MkTextArea.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * @module MkTextArea
+ * @description Multi-line text input. Inherits MkInput's styling.
+ * Same prop API as mk-mobile MkTextArea.
+ */
+export interface MkTextAreaProps {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    rows?: number;
+    maxLength?: number;
+    disabled?: boolean;
+    showCount?: boolean;
+    className?: string;
+}
+export declare const MkTextArea: React.FC<MkTextAreaProps>;
+//# sourceMappingURL=MkTextArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkTextArea.d.ts","sourceRoot":"","sources":["../../src/components/MkTextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C;;;;GAIG;AAEH,MAAM,WAAW,eAAe;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6ChD,CAAC"}

package/dist/components/MkTextArea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import styles from './MkInput.module.css';
+export const MkTextArea = ({ label, error, helperText, placeholder, value = '', onChange, rows = 4, maxLength, disabled = false, showCount = false, className, }) => {
+    const handleChange = useCallback((e) => { onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value); }, [onChange]);
+    return (_jsxs("div", { className: styles.container, children: [label && _jsx("label", { className: styles.label, children: label }), _jsx("div", { className: `${styles.wrapper} ${error ? styles.wrapperError : ''}`, children: _jsx("textarea", { className: `${styles.input} ${className || ''}`, style: { resize: 'vertical', minHeight: `${rows * 1.5}rem` }, placeholder: placeholder, value: value, onChange: handleChange, rows: rows, maxLength: maxLength, disabled: disabled }) }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [error ? (_jsx("span", { className: styles.errorText, children: error })) : helperText ? (_jsx("span", { className: styles.helperText, children: helperText })) : _jsx("span", {}), showCount && maxLength && (_jsxs("span", { className: styles.helperText, children: [value.length, "/", maxLength] }))] })] }));
+};
+//# sourceMappingURL=MkTextArea.js.map

package/dist/components/MkTextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkTextArea.js","sourceRoot":"","sources":["../../src/components/MkTextArea.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAsB1C,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAClD,KAAK,EACL,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,IAAI,GAAG,CAAC,EACR,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GACZ,EAAE,EAAE;IACD,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,CAAyC,EAAE,EAAE,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAC9E,CAAC,QAAQ,CAAC,CACb,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC3B,KAAK,IAAI,gBAAO,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAS,EACzD,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,YACnE,mBACI,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,SAAS,IAAI,EAAE,EAAE,EAC/C,KAAK,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,GAAG,GAAG,KAAK,EAAE,EAC5D,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,GACpB,GACA,EACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,aAC3D,KAAK,CAAC,CAAC,CAAC,CACL,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,YAAG,KAAK,GAAQ,CACpD,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACb,eAAM,SAAS,EAAE,MAAM,CAAC,UAAU,YAAG,UAAU,GAAQ,CAC1D,CAAC,CAAC,CAAC,gBAAQ,EACX,SAAS,IAAI,SAAS,IAAI,CACvB,gBAAM,SAAS,EAAE,MAAM,CAAC,UAAU,aAAG,KAAK,CAAC,MAAM,OAAG,SAAS,IAAQ,CACxE,IACC,IACJ,CACT,CAAC;AACN,CAAC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkTextArea.stories.d.ts","sourceRoot":"","sources":["../../src/components/MkTextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAajC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC"}

package/dist/components/MkTextArea.stories.js

@@ -0,0 +1,56 @@
+import { MkTextArea } from './MkTextArea';
+const meta = {
+    title: 'Components/MkTextArea',
+    component: MkTextArea,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        rows: { control: { type: 'number', min: 2, max: 20 } },
+        maxLength: { control: { type: 'number' } },
+        showCount: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        error: { control: 'text' },
+    },
+};
+export default meta;
+export const Default = {
+    args: { placeholder: 'Escribe aquí...' },
+};
+export const WithLabel = {
+    args: { label: 'Descripción', placeholder: 'Cuéntanos más...' },
+};
+export const WithValue = {
+    args: {
+        label: 'Bio',
+        value: 'Software engineer with a passion for clean code.',
+    },
+};
+export const WithHelperText = {
+    args: {
+        label: 'Comentario',
+        placeholder: 'Tu comentario...',
+        helperText: 'Máximo 500 caracteres',
+        maxLength: 500,
+        showCount: true,
+    },
+};
+export const WithError = {
+    args: {
+        label: 'Required',
+        value: 'Texto muy corto',
+        error: 'La descripción debe tener al menos 20 caracteres',
+    },
+};
+export const Disabled = {
+    args: { label: 'Locked notes', value: 'Cannot edit', disabled: true },
+};
+export const WithMaxLength = {
+    args: {
+        label: 'Tweet',
+        placeholder: 'What is happening?',
+        maxLength: 280,
+        showCount: true,
+    },
+};
+//# sourceMappingURL=MkTextArea.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkTextArea.stories.js","sourceRoot":"","sources":["../../src/components/MkTextArea.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,IAAI,GAA4B;IAClC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;IAClC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE;QACtD,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC7B;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,EAAE;CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,kDAAkD;KAC5D;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACjC,IAAI,EAAE;QACF,KAAK,EAAE,YAAY;QACnB,WAAW,EAAE,kBAAkB;QAC/B,UAAU,EAAE,uBAAuB;QACnC,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,IAAI;KAClB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,iBAAiB;QACxB,KAAK,EAAE,kDAAkD;KAC5D;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC3B,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE;CACxE,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAChC,IAAI,EAAE;QACF,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,oBAAoB;QACjC,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,IAAI;KAClB;CACJ,CAAC"}

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Smoke snapshot for MkTextArea — required by R-MK-002.
+ */
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/react';
+import { MkTextArea } from './MkTextArea';
+describe('MkTextArea story smoke', () => {
+    afterEach(cleanup);
+    it('renders with label', () => {
+        const { container } = render(_jsx(MkTextArea, { label: "Description", value: "Some text content" }));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=MkTextArea.stories.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkTextArea.stories.test.js","sourceRoot":"","sources":["../../src/components/MkTextArea.stories.test.tsx"],"names":[],"mappings":";AAAA;;GAEG;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,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACpC,SAAS,CAAC,OAAO,CAAC,CAAC;IAEnB,EAAE,CAAC,oBAAoB,EAAE,GAAG,EAAE;QAC1B,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CACxB,KAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,mBAAmB,GAAG,CAC/D,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

package/dist/components/MkThemeEditor.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * @module MkThemeEditor
+ * @description Real-time Theme Editor for MK-Director.
+ * Allows visual modification of CSS variables during development.
+ */
+export declare function MkThemeEditor(): React.JSX.Element;
+//# sourceMappingURL=MkThemeEditor.d.ts.map

package/dist/components/MkThemeEditor.module.css

@@ -0,0 +1,177 @@
+.container {
+    --mk-theme-editor-bg: var(--mk-card);
+    --mk-theme-editor-border: var(--mk-border);
+    --mk-theme-editor-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    width: 320px;
+    max-height: 500px;
+    background-color: var(--mk-theme-editor-bg);
+    border: 1px solid var(--mk-theme-editor-border);
+    border-radius: var(--mk-radius, 12px);
+    box-shadow: var(--mk-theme-editor-shadow);
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+:global([data-theme='dark']) .container {
+    --mk-theme-editor-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.85rem 1rem;
+    background-color: var(--mk-muted);
+    border-bottom: 1px solid var(--mk-theme-editor-border);
+}
+
+.title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--mk-foreground);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.sectionTitle {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--mk-muted-foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+}
+
+.tokenRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+
+.tokenInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.tokenLabel {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--mk-foreground);
+    font-family: inherit;
+}
+
+.tokenValue {
+    font-size: 0.7rem;
+    color: var(--mk-muted-foreground);
+    font-family: var(--mk-font-mono, monospace);
+}
+
+.colorInput {
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 2px solid var(--mk-theme-editor-border);
+    border-radius: 4px;
+    cursor: pointer;
+    background: none;
+    flex-shrink: 0;
+}
+
+.colorInput::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+.colorInput::-webkit-color-swatch {
+    border: none;
+    border-radius: 2px;
+}
+
+.footer {
+    padding: 0.75rem 1rem;
+    border-top: 1px solid var(--mk-theme-editor-border);
+    display: flex;
+    gap: 0.5rem;
+    background-color: var(--mk-muted);
+}
+
+.controlButton {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    padding: 0.5rem;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid var(--mk-theme-editor-border);
+    background-color: var(--mk-background);
+    color: var(--mk-foreground);
+}
+
+.controlButton:hover {
+    background-color: var(--mk-primary);
+    color: var(--mk-primary-foreground);
+}
+
+.minimized {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background-color: var(--mk-primary);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    z-index: 10000;
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+    border: none;
+}
+
+.minimized:hover {
+    transform: scale(1.1);
+}

package/dist/components/MkToastContainer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const MkToastContainer: React.FC;
+//# sourceMappingURL=MkToastContainer.d.ts.map

package/dist/components/MkToastContainer.module.css

@@ -0,0 +1,95 @@
+.container {
+    position: fixed;
+    z-index: 9999;
+    padding: 1rem;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.toast {
+    --mk-toast-bg: var(--mk-popover);
+    --mk-toast-fg: var(--mk-popover-foreground);
+    --mk-toast-border: var(--mk-border);
+    --mk-toast-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --mk-toast-color: var(--mk-foreground);
+    --mk-toast-radius: var(--mk-radius, 8px);
+
+    background-color: var(--mk-toast-bg);
+    color: var(--mk-toast-fg);
+    border: 1px solid var(--mk-toast-border);
+    border-radius: var(--mk-toast-radius);
+    padding: 0.85rem 1rem;
+    min-width: 280px;
+    max-width: 420px;
+    box-shadow: var(--mk-toast-shadow);
+    pointer-events: auto;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    animation: mk-fade-in 0.3s var(--mk-ease-out) backwards;
+    transition: all 0.3s var(--mk-ease-out);
+}
+
+:global([data-theme='dark']) .toast {
+    --mk-toast-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+}
+
+.toast.exiting {
+    opacity: 0;
+    transform: scale(0.95);
+}
+
+.content {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.icon {
+    font-size: 1.2rem;
+    flex-shrink: 0;
+}
+
+.text {
+    flex-grow: 1;
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+.close {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: var(--mk-muted-foreground);
+    line-height: 1;
+    padding: 0;
+    transition: color 0.15s ease;
+}
+
+.close:hover {
+    color: var(--mk-foreground);
+}
+
+.progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    opacity: 0.5;
+}
+
+/* Animations */
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MkToastContainer } from './MkToastContainer';
+declare const meta: Meta<typeof MkToastContainer>;
+export default meta;
+type Story = StoryObj<typeof MkToastContainer>;
+export declare const Empty: Story;
+export declare const WithToasts: Story;
+export declare const SingleToast: Story;
+//# sourceMappingURL=MkToastContainer.stories.d.ts.map

package/dist/components/MkToastContainer.stories.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MkToastContainer } from './MkToastContainer';
+import { MkToastProvider, useMkToast } from '../context/MkToastContext';
+import React from 'react';
+const meta = {
+    title: 'Components/MkToastContainer',
+    component: MkToastContainer,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsxs(MkToastProvider, { children: [_jsx(Story, {}), _jsx(MkToastContainer, {})] })),
+    ],
+};
+export default meta;
+/** Helper component that fires toasts on mount to populate the container. */
+const ToastFireOnMount = ({ messages }) => {
+    const { showToast } = useMkToast();
+    React.useEffect(() => {
+        messages.forEach((m, i) => {
+            setTimeout(() => showToast(m.message, { type: m.type, title: m.title }), i * 300);
+        });
+    }, [showToast, messages]);
+    return null;
+};
+export const Empty = {
+    render: () => (_jsx(MkToastProvider, { children: _jsx(MkToastContainer, {}) })),
+};
+export const WithToasts = {
+    render: () => (_jsxs(MkToastProvider, { children: [_jsx(ToastFireOnMount, { messages: [
+                    { type: 'success', title: 'Saved', message: 'Profile updated.' },
+                    { type: 'error', title: 'Error', message: 'Could not save changes.' },
+                    { type: 'info', title: 'Info', message: 'A new version is available.' },
+                    { type: 'warning', title: 'Warning', message: 'You are about to expire.' },
+                ] }), _jsx(MkToastContainer, {})] })),
+};
+export const SingleToast = {
+    render: () => (_jsxs(MkToastProvider, { children: [_jsx(ToastFireOnMount, { messages: [
+                    { type: 'success', title: 'Done', message: 'Your changes were saved.' },
+                ] }), _jsx(MkToastContainer, {})] })),
+};
+//# sourceMappingURL=MkToastContainer.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkToastContainer.stories.js","sourceRoot":"","sources":["../../src/components/MkToastContainer.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,IAAI,GAAkC;IACxC,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,gBAAgB;IAC3B,UAAU,EAAE;QACR,MAAM,EAAE,YAAY;KACvB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACR,CAAC,KAAK,EAAE,EAAE,CAAC,CACP,MAAC,eAAe,eACZ,KAAC,KAAK,KAAG,EACT,KAAC,gBAAgB,KAAG,IACN,CACrB;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,6EAA6E;AAC7E,MAAM,gBAAgB,GAEjB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClB,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,CAAC;IACnC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACtB,UAAU,CACN,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,EAC5D,CAAC,GAAG,GAAG,CACV,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1B,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IACxB,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,KAAC,eAAe,cACZ,KAAC,gBAAgB,KAAG,GACN,CACrB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,MAAC,eAAe,eACZ,KAAC,gBAAgB,IACb,QAAQ,EAAE;oBACN,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE;oBAChE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,yBAAyB,EAAE;oBACrE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,6BAA6B,EAAE;oBACvE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,0BAA0B,EAAE;iBAC7E,GACH,EACF,KAAC,gBAAgB,KAAG,IACN,CACrB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,MAAC,eAAe,eACZ,KAAC,gBAAgB,IACb,QAAQ,EAAE;oBACN,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,0BAA0B,EAAE;iBAC1E,GACH,EACF,KAAC,gBAAgB,KAAG,IACN,CACrB;CACJ,CAAC"}

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

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

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Smoke snapshot for MkToastContainer — generates
+ * `__snapshots__/MkToastContainer.stories.snap`. Required by R-MK-002.
+ *
+ * Note: this one is special — MkToastContainer depends on MkToastProvider
+ * being mounted in the tree. We use a helper component to fire a single
+ * toast on mount, then render the container.
+ */
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/react';
+import { MkToastProvider, useMkToast } from '../context/MkToastContext';
+import { MkToastContainer } from './MkToastContainer';
+import React from 'react';
+const ToastFirer = () => {
+    const { showToast } = useMkToast();
+    React.useEffect(() => {
+        showToast('Your changes were saved.', { type: 'success', title: 'Saved' });
+    }, [showToast]);
+    return null;
+};
+describe('MkToastContainer story smoke', () => {
+    afterEach(cleanup);
+    it('renders with one toast', () => {
+        const { container } = render(_jsxs(MkToastProvider, { children: [_jsx(ToastFirer, {}), _jsx(MkToastContainer, {})] }));
+        expect(container).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=MkToastContainer.stories.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkToastContainer.stories.test.js","sourceRoot":"","sources":["../../src/components/MkToastContainer.stories.test.tsx"],"names":[],"mappings":";AAAA;;;;;;;GAOG;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,eAAe,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,UAAU,GAAa,GAAG,EAAE;IAC9B,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,CAAC;IACnC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,SAAS,CAAC,0BAA0B,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAChB,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,QAAQ,CAAC,8BAA8B,EAAE,GAAG,EAAE;IAC1C,SAAS,CAAC,OAAO,CAAC,CAAC;IAEnB,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;QAC9B,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CACxB,MAAC,eAAe,eACZ,KAAC,UAAU,KAAG,EACd,KAAC,gBAAgB,KAAG,IACN,CACrB,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

package/dist/components/MkTooltip.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * @module MkTooltip
+ * @description Hover/focus tooltip for web. Shows contextual info on hover.
+ */
+export interface MkTooltipProps {
+    content: string | React.ReactNode;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    children: React.ReactElement;
+    className?: string;
+}
+export declare const MkTooltip: React.FC<MkTooltipProps>;
+//# sourceMappingURL=MkTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkTooltip.d.ts","sourceRoot":"","sources":["../../src/components/MkTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD;;;GAGG;AAEH,MAAM,WAAW,cAAc;IAC3B,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoC9C,CAAC"}

package/dist/components/MkTooltip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import styles from './MkTooltip.module.css';
+export const MkTooltip = ({ content, position = 'top', delay = 200, children, className, }) => {
+    const [visible, setVisible] = useState(false);
+    const timerRef = useRef(null);
+    const show = () => {
+        timerRef.current = setTimeout(() => setVisible(true), delay);
+    };
+    const hide = () => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        setVisible(false);
+    };
+    return (_jsxs("div", { className: `${styles.wrapper} ${className || ''}`, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [children, visible && (_jsxs("div", { className: `${styles.tooltip} ${styles[position]}`, role: "tooltip", children: [content, _jsx("div", { className: `${styles.arrow} ${styles[`arrow-${position}`]}` })] }))] }));
+};
+//# sourceMappingURL=MkTooltip.js.map

package/dist/components/MkTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkTooltip.js","sourceRoot":"","sources":["../../src/components/MkTooltip.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAe5C,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAChD,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,GAAG,EACX,QAAQ,EACR,SAAS,GACZ,EAAE,EAAE;IACD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAEpE,MAAM,IAAI,GAAG,GAAG,EAAE;QACd,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;IACjE,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,GAAG,EAAE;QACd,IAAI,QAAQ,CAAC,OAAO;YAAE,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACrD,UAAU,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACH,eACI,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,SAAS,IAAI,EAAE,EAAE,EACjD,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAClB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,IAAI,aAEX,QAAQ,EACR,OAAO,IAAI,CACR,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAC,SAAS,aAClE,OAAO,EACR,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,SAAS,QAAQ,EAAE,CAAC,EAAE,GAAI,IAClE,CACT,IACC,CACT,CAAC;AACN,CAAC,CAAC"}