@makroz/web 1.2.0 → 1.2.2

package/dist/components/MkSelect.module.css

@@ -0,0 +1,177 @@
+.container {
+    --mk-select-bg: var(--mk-background);
+    --mk-select-border: var(--mk-border);
+    --mk-select-color: var(--mk-foreground);
+    --mk-select-radius: var(--mk-radius, 8px);
+    --mk-select-focus-border: var(--mk-primary);
+    --mk-select-placeholder: var(--mk-muted-foreground);
+    --mk-dropdown-bg: var(--mk-popover);
+    --mk-dropdown-fg: var(--mk-popover-foreground);
+    --mk-dropdown-border: var(--mk-border);
+    --mk-option-hover-bg: var(--mk-muted);
+    --mk-option-selected-bg: color-mix(in srgb, var(--mk-primary) 15%, var(--mk-background));
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    width: 100%;
+    position: relative;
+    color: var(--mk-select-color);
+}
+
+.label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: inherit;
+    opacity: 0.9;
+}
+
+.selectWrapper {
+    position: relative;
+    width: 100%;
+}
+
+.select {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.625rem 0.875rem;
+    min-height: 40px;
+    font-size: 0.875rem;
+    background-color: var(--mk-select-bg);
+    border: 1px solid var(--mk-select-border);
+    border-radius: var(--mk-select-radius);
+    color: inherit;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    user-select: none;
+}
+
+.select:hover {
+    border-color: var(--mk-muted-foreground);
+}
+
+.selectActive {
+    border-color: var(--mk-select-focus-border);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-select-focus-border), transparent 85%);
+}
+
+.selectError {
+    --mk-select-border: var(--mk-error);
+    --mk-select-focus-border: var(--mk-error);
+}
+
+.valueText {
+    color: inherit;
+}
+
+.placeholderText {
+    color: var(--mk-select-placeholder);
+}
+
+.chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--mk-muted-foreground);
+    transition: transform 0.2s ease;
+    margin-left: 0.5rem;
+}
+
+.chevronOpen {
+    transform: rotate(180deg);
+    color: var(--mk-primary);
+}
+
+.dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    width: 100%;
+    background-color: var(--mk-dropdown-bg);
+    border: 1px solid var(--mk-dropdown-border);
+    border-radius: var(--mk-select-radius);
+    box-shadow:
+        0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    z-index: 50;
+    overflow: hidden;
+    animation: slideDown 0.2s ease-out;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.searchContainer {
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--mk-dropdown-border);
+}
+
+.searchInput {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    background-color: var(--mk-muted);
+    border: 1px solid var(--mk-dropdown-border);
+    border-radius: calc(var(--mk-select-radius) - 2px);
+    color: inherit;
+    outline: none;
+}
+
+.searchInput:focus {
+    border-color: var(--mk-primary);
+}
+
+.optionsList {
+    max-height: 240px;
+    overflow-y: auto;
+}
+
+.option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.625rem 0.875rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background 0.1s;
+    color: inherit;
+}
+
+.option:hover {
+    background-color: var(--mk-option-hover-bg);
+}
+
+.optionSelected {
+    background-color: var(--mk-option-selected-bg);
+    color: var(--mk-primary);
+    font-weight: 500;
+}
+
+.checkIcon {
+    display: flex;
+    color: var(--mk-primary);
+}
+
+.noResults {
+    padding: 1rem;
+    text-align: center;
+    color: var(--mk-muted-foreground);
+    font-size: 0.875rem;
+}
+
+.errorText {
+    font-size: 0.75rem;
+    color: var(--mk-error);
+    font-weight: 500;
+    margin-top: 0.25rem;
+}

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MkSelect } from './MkSelect';
+declare const meta: Meta<typeof MkSelect>;
+export default meta;
+type Story = StoryObj<typeof MkSelect>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Searchable: Story;
+export declare const Multiple: Story;
+export declare const WithDefaultValue: Story;
+export declare const WithError: Story;
+//# sourceMappingURL=MkSelect.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkSelect.stories.d.ts","sourceRoot":"","sources":["../../src/components/MkSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAc/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAUvC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC"}

package/dist/components/MkSelect.stories.js

@@ -0,0 +1,84 @@
+import { MkSelect } from './MkSelect';
+const meta = {
+    title: 'Components/MkSelect',
+    component: MkSelect,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        placeholder: { control: 'text' },
+        searchable: { control: 'boolean' },
+        multiple: { control: 'boolean' },
+        error: { control: 'text' },
+    },
+};
+export default meta;
+const FRUITS = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Cherry', value: 'cherry' },
+    { label: 'Date', value: 'date' },
+    { label: 'Elderberry', value: 'elderberry' },
+];
+export const Default = {
+    args: {
+        label: 'Favorite fruit',
+        placeholder: 'Pick one...',
+        options: FRUITS,
+    },
+};
+export const WithValue = {
+    args: {
+        label: 'Pre-selected',
+        options: FRUITS,
+        value: 'cherry',
+    },
+};
+export const Searchable = {
+    args: {
+        label: 'Country (searchable)',
+        placeholder: 'Type to search...',
+        searchable: true,
+        options: [
+            { label: 'Argentina', value: 'ar' },
+            { label: 'Bolivia', value: 'bo' },
+            { label: 'Chile', value: 'cl' },
+            { label: 'Colombia', value: 'co' },
+            { label: 'Ecuador', value: 'ec' },
+            { label: 'México', value: 'mx' },
+            { label: 'Perú', value: 'pe' },
+            { label: 'Uruguay', value: 'uy' },
+        ],
+    },
+};
+export const Multiple = {
+    args: {
+        label: 'Tags (multiple)',
+        placeholder: 'Select tags...',
+        multiple: true,
+        options: [
+            { label: 'React', value: 'react' },
+            { label: 'TypeScript', value: 'ts' },
+            { label: 'Laravel', value: 'laravel' },
+            { label: 'Node.js', value: 'node' },
+        ],
+    },
+};
+export const WithDefaultValue = {
+    args: {
+        label: 'Select with default value',
+        options: FRUITS,
+        value: 'banana',
+    },
+};
+export const WithError = {
+    args: {
+        label: 'Required field',
+        placeholder: 'Pick one...',
+        options: FRUITS,
+        error: 'This field is required',
+    },
+};
+//# sourceMappingURL=MkSelect.stories.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Smoke snapshot for MkSelect — generates `__snapshots__/MkSelect.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 { MkSelect } from './MkSelect';
+const FRUITS = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Cherry', value: 'cherry' },
+];
+describe('MkSelect story smoke', () => {
+    afterEach(cleanup);
+    it('renders with options', () => {
+        const { container } = render(_jsx(MkSelect, { label: "Pick a fruit", options: FRUITS }));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=MkSelect.stories.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkSelect.stories.test.js","sourceRoot":"","sources":["../../src/components/MkSelect.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,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,GAAG;IACX,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACvC,CAAC;AAEF,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IAClC,SAAS,CAAC,OAAO,CAAC,CAAC;IAEnB,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC5B,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CACxB,KAAC,QAAQ,IAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,MAAM,GAAI,CACrD,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

package/dist/components/MkSkeleton.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+/**
+ * @module MkSkeleton
+ * @description Placeholder loading skeleton. Supports text lines, circles, and custom dimensions.
+ */
+export interface MkSkeletonProps {
+    /** Shape: 'text', 'circle', 'rect'. Default 'text'. */
+    variant?: 'text' | 'circle' | 'rect';
+    /** Width in px or string. Default '100%'. */
+    width?: number | string;
+    /** Height in px. Default auto-calculated by variant. */
+    height?: number | string;
+    /** Number of text lines to render. Default 1. */
+    lines?: number;
+    /** Gap between lines. Default '0.5rem'. */
+    gap?: string;
+    /** Border radius override. */
+    radius?: number | string;
+    className?: string;
+}
+export declare const MkSkeleton: React.FC<MkSkeletonProps>;
+//# sourceMappingURL=MkSkeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkSkeleton.d.ts","sourceRoot":"","sources":["../../src/components/MkSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AAEH,MAAM,WAAW,eAAe;IAC5B,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqDhD,CAAC"}

package/dist/components/MkSkeleton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './MkSkeleton.module.css';
+export const MkSkeleton = ({ variant = 'text', width = '100%', height, lines = 1, gap = '0.5rem', radius, className, }) => {
+    if (variant === 'circle') {
+        const size = width || 40;
+        return (_jsx("div", { className: `${styles.skeleton} ${className || ''}`, style: { width: size, height: size, borderRadius: '50%' } }));
+    }
+    if (variant === 'rect') {
+        return (_jsx("div", { className: `${styles.skeleton} ${className || ''}`, style: { width, height: height || 80, borderRadius: radius !== null && radius !== void 0 ? radius : 'var(--mk-radius, 8px)' } }));
+    }
+    // Text variant
+    if (lines <= 1) {
+        return (_jsx("div", { className: `${styles.skeleton} ${className || ''}`, style: { width, height: height || '0.875rem', borderRadius: radius !== null && radius !== void 0 ? radius : 4 } }));
+    }
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap }, children: Array.from({ length: lines }).map((_, i) => (_jsx("div", { className: styles.skeleton, style: {
+                width: i === lines - 1 ? '70%' : '100%',
+                height: height || '0.875rem',
+                borderRadius: radius !== null && radius !== void 0 ? radius : 4,
+            } }, i))) }));
+};
+//# sourceMappingURL=MkSkeleton.js.map

package/dist/components/MkSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkSkeleton.js","sourceRoot":"","sources":["../../src/components/MkSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAuB7C,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAClD,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,MAAM,EACd,MAAM,EACN,KAAK,GAAG,CAAC,EACT,GAAG,GAAG,QAAQ,EACd,MAAM,EACN,SAAS,GACZ,EAAE,EAAE;IACD,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvB,MAAM,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;QACzB,OAAO,CACH,cACI,SAAS,EAAE,GAAG,MAAM,CAAC,QAAQ,IAAI,SAAS,IAAI,EAAE,EAAE,EAClD,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,GAC3D,CACL,CAAC;IACN,CAAC;IAED,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;QACrB,OAAO,CACH,cACI,SAAS,EAAE,GAAG,MAAM,CAAC,QAAQ,IAAI,SAAS,IAAI,EAAE,EAAE,EAClD,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,uBAAuB,EAAE,GACzF,CACL,CAAC;IACN,CAAC;IAED,eAAe;IACf,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;QACb,OAAO,CACH,cACI,SAAS,EAAE,GAAG,MAAM,CAAC,QAAQ,IAAI,SAAS,IAAI,EAAE,EAAE,EAClD,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,IAAI,UAAU,EAAE,YAAY,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,EAAE,GAC3E,CACL,CAAC;IACN,CAAC;IAED,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,YACxD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,cAEI,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,KAAK,EAAE;gBACH,KAAK,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;gBACvC,MAAM,EAAE,MAAM,IAAI,UAAU;gBAC5B,YAAY,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC;aAC5B,IANI,CAAC,CAOR,CACL,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/MkSkeleton.module.css

@@ -0,0 +1,28 @@
+.skeleton {
+    --mk-skeleton-bg: var(--mk-muted);
+    --mk-skeleton-shimmer: color-mix(in srgb, var(--mk-skeleton-bg), white 40%);
+
+    background: linear-gradient(
+        90deg,
+        var(--mk-skeleton-bg) 25%,
+        var(--mk-skeleton-shimmer) 50%,
+        var(--mk-skeleton-bg) 75%
+    );
+    background-size: 200% 100%;
+    animation: mk-shimmer 2s ease-in-out infinite;
+    border-radius: var(--mk-radius, 4px);
+    transition: all 0.2s ease;
+}
+
+:global([data-theme='dark']) .skeleton {
+    --mk-skeleton-shimmer: color-mix(in srgb, var(--mk-skeleton-bg), white 8%);
+}
+
+@keyframes mk-shimmer {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MkSkeleton } from './MkSkeleton';
+declare const meta: Meta<typeof MkSkeleton>;
+export default meta;
+type Story = StoryObj<typeof MkSkeleton>;
+export declare const Default: Story;
+export declare const TextLines: Story;
+export declare const Circle: Story;
+export declare const Rectangle: Story;
+export declare const CardPlaceholder: Story;
+export declare const ArticlePlaceholder: Story;
+//# sourceMappingURL=MkSkeleton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkSkeleton.stories.d.ts","sourceRoot":"","sources":["../../src/components/MkSkeleton.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,CASjC,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,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAQhC,CAAC"}

package/dist/components/MkSkeleton.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MkSkeleton } from './MkSkeleton';
+const meta = {
+    title: 'Components/MkSkeleton',
+    component: MkSkeleton,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: { control: { type: 'select' }, options: ['text', 'circle', 'rect'] },
+        lines: { control: { type: 'number', min: 1, max: 10 } },
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+export const TextLines = {
+    args: { variant: 'text', lines: 4 },
+};
+export const Circle = {
+    args: { variant: 'circle', width: 64 },
+};
+export const Rectangle = {
+    args: { variant: 'rect', width: 200, height: 100 },
+};
+export const CardPlaceholder = {
+    render: () => (_jsxs("div", { style: { display: 'flex', gap: 16, alignItems: 'center' }, children: [_jsx(MkSkeleton, { variant: "circle", width: 48 }), _jsxs("div", { style: { flex: 1 }, children: [_jsx(MkSkeleton, { variant: "text" }), _jsx(MkSkeleton, { variant: "text", width: "60%" })] })] })),
+};
+export const ArticlePlaceholder = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 400 }, children: [_jsx(MkSkeleton, { variant: "rect", height: 180 }), _jsx(MkSkeleton, { variant: "text", lines: 3 }), _jsx(MkSkeleton, { variant: "text", width: "40%" })] })),
+};
+//# sourceMappingURL=MkSkeleton.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkSkeleton.stories.js","sourceRoot":"","sources":["../../src/components/MkSkeleton.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,QAAQ,EAAE;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,EAAE;QAC7E,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE;KAC1D;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE,EAAE;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IACzB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;CACzC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;CACrD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IAClC,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC1D,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,GAAI,EAC1C,eAAK,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACnB,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,GAAG,EAC7B,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAG,IACvC,IACJ,CACT;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACrC,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,aAC5E,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,GAAI,EAC1C,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,GAAI,EACvC,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,GAAG,IACvC,CACT;CACJ,CAAC"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkSkeleton.stories.test.js","sourceRoot":"","sources":["../../src/components/MkSkeleton.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,CAAC,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,GAAI,CAAC,CAAC;QACtE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

package/dist/components/MkSwitch.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+/**
+ * @module MkSwitch
+ * @description Toggle switch component. Same prop API across web and mobile.
+ *
+ * @example
+ * ```tsx
+ * <MkSwitch label="Dark mode" checked={isDark} onChange={setIsDark} />
+ * <MkSwitch label="Notifications" checked={notif} onChange={setNotif} size="lg" />
+ * ```
+ */
+export interface MkSwitchProps {
+    label?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    error?: string;
+    className?: string;
+}
+export declare const MkSwitch: React.FC<MkSwitchProps>;
+//# sourceMappingURL=MkSwitch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkSwitch.d.ts","sourceRoot":"","sources":["../../src/components/MkSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C;;;;;;;;;GASG;AAEH,MAAM,WAAW,aAAa;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgC5C,CAAC"}

package/dist/components/MkSwitch.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import styles from './MkSwitch.module.css';
+export const MkSwitch = ({ label, checked = false, onChange, disabled = false, size = 'md', error, className, }) => {
+    const handleToggle = 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: [_jsx("div", { className: `${styles.track} ${styles[size]} ${checked ? styles.checked : ''} ${error ? styles.error : ''}`, onClick: handleToggle, role: "switch", "aria-checked": checked, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onKeyDown: (e) => { if (e.key === ' ' || e.key === 'Enter') {
+                            e.preventDefault();
+                            handleToggle();
+                        } }, children: _jsx("div", { className: `${styles.thumb} ${checked ? styles.thumbChecked : ''}` }) }), label && _jsx("span", { className: styles.text, children: label })] }), error && _jsx("span", { className: styles.errorText, children: error })] }));
+};
+//# sourceMappingURL=MkSwitch.js.map

package/dist/components/MkSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MkSwitch.js","sourceRoot":"","sources":["../../src/components/MkSwitch.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAuB3C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAC9C,KAAK,EACL,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,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,cACI,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAC1G,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,QAAQ,kBACC,OAAO,mBACN,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,EAAE,CAAC;4BAAC,CAAC,CAAC,cAAc,EAAE,CAAC;4BAAC,YAAY,EAAE,CAAC;wBAAC,CAAC,CAAC,CAAC,YAErG,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,GACzE,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/MkSwitch.module.css

@@ -0,0 +1,108 @@
+.container {
+    --mk-switch-track-bg: var(--mk-muted);
+    --mk-switch-track-active: var(--mk-primary);
+    --mk-switch-thumb-bg: #ffffff;
+    --mk-switch-color: var(--mk-foreground);
+    --mk-switch-accent: var(--mk-primary);
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    cursor: pointer;
+    user-select: none;
+    color: var(--mk-switch-color);
+}
+
+.label.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.track {
+    position: relative;
+    border-radius: 999px;
+    background-color: var(--mk-switch-track-bg);
+    transition: all 0.2s ease;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+:global([data-theme='dark']) .track {
+    --mk-switch-thumb-bg: var(--mk-popover);
+}
+
+.sm {
+    width: 32px;
+    height: 18px;
+}
+.md {
+    width: 40px;
+    height: 22px;
+}
+.lg {
+    width: 48px;
+    height: 26px;
+}
+
+.track:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-switch-accent), transparent 80%);
+}
+
+.checked {
+    background-color: var(--mk-switch-track-active);
+}
+.error {
+    --mk-switch-accent: var(--mk-error);
+    box-shadow: 0 0 0 2px var(--mk-error);
+}
+
+.thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    background-color: var(--mk-switch-thumb-bg);
+    border-radius: 50%;
+    transition: transform 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+.sm .thumb {
+    width: 14px;
+    height: 14px;
+}
+.md .thumb {
+    width: 18px;
+    height: 18px;
+}
+.lg .thumb {
+    width: 22px;
+    height: 22px;
+}
+
+.sm .thumbChecked {
+    transform: translateX(14px);
+}
+.md .thumbChecked {
+    transform: translateX(18px);
+}
+.lg .thumbChecked {
+    transform: translateX(22px);
+}
+
+.text {
+    font-size: 0.875rem;
+    color: inherit;
+}
+.errorText {
+    font-size: 0.75rem;
+    color: var(--mk-error);
+    font-weight: 500;
+    margin-left: 3rem;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MkSwitch.stories.d.ts","sourceRoot":"","sources":["../../src/components/MkSwitch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAW/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,GAAG,EAAE,KAEjB,CAAC;AAEF,eAAO,MAAM,EAAE,EAAE,KAEhB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC"}