mosuk-ui 1.0.1

package/components/integrations/yandex/maps/component/map/marker/component.interface.d.ts

@@ -0,0 +1,4 @@
+import { YMapMarkerProps } from '@yandex/ymaps3-types';
+export interface YandexMapsMapMarkerProps extends YMapMarkerProps {
+    children?: React.ReactNode;
+}

package/components/integrations/yandex/maps/component/map/marker/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/integrations/yandex/maps/component/map/marker/component.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 React, { useContext } from 'react';
+import { YandexMapsContext } from '../../../../../../../providers/yandex/maps/context/context';
+export function YandexMapsMapMarker(_a) {
+    var coordinates = _a.coordinates, children = _a.children, props = __rest(_a, ["coordinates", "children"]);
+    var context = useContext(YandexMapsContext);
+    if (!context || !context.api)
+        return null;
+    var YMapMarker = context.api.YMapMarker;
+    return (React.createElement(YMapMarker, __assign({ coordinates: coordinates }, props), children));
+}

package/components/integrations/yandex/maps/skeleton/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { YandexMapsSkeletonProps } from './component.interface';
+export declare function YandexMapsSkeleton({ ...rest }: YandexMapsSkeletonProps): React.JSX.Element;

package/components/integrations/yandex/maps/skeleton/component.interface.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export interface YandexMapsSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+}

package/components/integrations/yandex/maps/skeleton/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/integrations/yandex/maps/skeleton/component.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 classNames from 'classnames';
+import React from 'react';
+import styles from './component.module.css';
+export function YandexMapsSkeleton(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement("div", __assign({}, rest, { className: classNames(styles.yandexMaps, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/integrations/yandex/maps/skeleton/component.module.css

@@ -0,0 +1,21 @@
+@layer mosuk-ui {
+    @layer index-15 {
+        .yandexMaps {
+            overflow: hidden;
+
+            width: 100%;
+            height: calc(var(--spacing, .25rem) * 100);
+        }
+
+        .yandexMapsMap {
+            svg {
+                width: 100%;
+                height: 100%;
+
+                color: var(--color-gray-300, oklch(0.872 0.01 258.338));
+
+                padding: 25%;
+            }
+        }
+    }
+}

package/components/integrations/yandex/maps/skeleton/index.d.ts

@@ -0,0 +1,13 @@
+import { YandexMapsSkeleton as BaseYandexMapsSkeleton } from './component';
+import type { YandexMapsSkeletonProps } from './component.interface';
+import { YandexMapsMapSkeleton } from './map/component';
+import type { YandexMapsMapSkeletonProps } from './map/component.interface';
+export declare const YandexMapsSkeleton: typeof BaseYandexMapsSkeleton & {
+    Map: typeof YandexMapsMapSkeleton;
+};
+export declare namespace YandexMapsSkeleton {
+    type Props = YandexMapsSkeletonProps;
+    namespace Map {
+        type Props = YandexMapsMapSkeletonProps;
+    }
+}

package/components/integrations/yandex/maps/skeleton/index.js

@@ -0,0 +1,5 @@
+import { YandexMapsSkeleton as BaseYandexMapsSkeleton } from './component';
+import { YandexMapsMapSkeleton } from './map/component';
+export var YandexMapsSkeleton = Object.assign(BaseYandexMapsSkeleton, {
+    Map: YandexMapsMapSkeleton,
+});

package/components/integrations/yandex/maps/skeleton/map/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { YandexMapsMapSkeletonProps } from './component.interface';
+export declare function YandexMapsMapSkeleton({ ...rest }: YandexMapsMapSkeletonProps): React.JSX.Element;

package/components/integrations/yandex/maps/skeleton/map/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { SkeletonProps } from '../../../../../display/skeleton/component/component.interface';
+export interface YandexMapsMapSkeletonProps extends SkeletonProps {
+}

package/components/integrations/yandex/maps/skeleton/map/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/integrations/yandex/maps/skeleton/map/component.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 classNames from 'classnames';
+import { Locate } from 'lucide-react';
+import React from 'react';
+import { Skeleton } from '../../../../../display/skeleton/component';
+import styles from '../component.module.css';
+export function YandexMapsMapSkeleton(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(Skeleton, __assign({}, rest, { title: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u043A\u0430\u0440\u0442\u044B...", className: classNames(styles.yandexMapsMap, rest === null || rest === void 0 ? void 0 : rest.className) }),
+        React.createElement(Locate, null)));
+}

package/components/layouts/header/component/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { HeaderProps } from './component.interface';
+export declare function Header<C extends ElementType = 'header'>({ header, ...rest }: HeaderProps<C>): React.JSX.Element;

package/components/layouts/header/component/component.interface.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type HeaderProps<C extends ElementType = 'header'> = {
+    as?: C;
+    ref?: Ref<any>;
+    header?: {
+        enable?: boolean;
+        height?: number;
+        delay?: {
+            top?: number;
+            bottom?: number;
+        };
+    };
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/layouts/header/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/layouts/header/component/component.js

@@ -0,0 +1,95 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import styles from './component.module.css';
+export function Header(_a) {
+    var header = _a.header, rest = __rest(_a, ["header"]);
+    var Component = ((rest === null || rest === void 0 ? void 0 : rest.as) || 'header');
+    var _b = useState(0), progress = _b[0], setProgress = _b[1];
+    useEffect(function () {
+        var _a;
+        if (((_a = header === null || header === void 0 ? void 0 : header.enable) !== null && _a !== void 0 ? _a : true) === false) {
+            return;
+        }
+        var lastScrollY = window.scrollY;
+        var ticking = false;
+        var cachedDocumentHeight = document.documentElement.scrollHeight;
+        var cachedWindowHeight = window.innerHeight;
+        var recalcDimensions = function () {
+            cachedDocumentHeight = document.documentElement.scrollHeight;
+            cachedWindowHeight = window.innerHeight;
+        };
+        var update = function () {
+            var _a, _b, _c, _d, _e;
+            ticking = false;
+            var currentScrollY = window.scrollY;
+            var scrollDelta = Math.abs(currentScrollY - lastScrollY);
+            if (currentScrollY === 0) {
+                setProgress(0);
+                lastScrollY = currentScrollY;
+                return;
+            }
+            var distanceToBottom = cachedDocumentHeight - (currentScrollY + cachedWindowHeight);
+            var unit = (_a = header === null || header === void 0 ? void 0 : header.height) !== null && _a !== void 0 ? _a : 64;
+            var progressDelta = Math.min(100, (scrollDelta / unit) * 100);
+            if (currentScrollY < ((_c = (_b = header === null || header === void 0 ? void 0 : header.delay) === null || _b === void 0 ? void 0 : _b.top) !== null && _c !== void 0 ? _c : 64)) {
+                if (currentScrollY < lastScrollY)
+                    setProgress(function (prev) { return Math.max(0, prev - progressDelta); });
+                lastScrollY = currentScrollY;
+                return;
+            }
+            if (distanceToBottom < ((_e = (_d = header === null || header === void 0 ? void 0 : header.delay) === null || _d === void 0 ? void 0 : _d.bottom) !== null && _e !== void 0 ? _e : 64)) {
+                if (currentScrollY > lastScrollY)
+                    setProgress(function (prev) { return Math.max(0, prev - progressDelta); });
+                lastScrollY = currentScrollY;
+                return;
+            }
+            if (currentScrollY > lastScrollY) {
+                setProgress(function (prev) { return Math.min(100, prev + progressDelta); });
+            }
+            else {
+                setProgress(function (prev) { return Math.max(0, prev - progressDelta); });
+            }
+            lastScrollY = currentScrollY;
+        };
+        var handleScroll = function () {
+            if (!ticking) {
+                ticking = true;
+                requestAnimationFrame(update);
+            }
+        };
+        var handleResize = function () {
+            recalcDimensions();
+            handleScroll();
+        };
+        recalcDimensions();
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [header]);
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-header', styles.header, rest === null || rest === void 0 ? void 0 : rest.className), style: __assign(__assign(__assign({}, rest === null || rest === void 0 ? void 0 : rest.style), { '--progress': "".concat(progress, "%") }), (progress == 100 ? { display: 'none' } : {})) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/layouts/header/component/component.module.css

@@ -0,0 +1,27 @@
+@layer mosuk-ui {
+    @layer index-16 {
+        .header {
+            position: fixed;
+            top: calc(var(--spacing, .25rem) * 2);
+            right: calc(var(--spacing, .25rem) * 2);
+            bottom: auto;
+            left: calc(var(--spacing, .25rem) * 2);
+            z-index: 100;
+
+            width: calc(100% - calc(var(--spacing, .25rem) * 4));
+            height: calc(var(--spacing, .25rem) * 16);
+
+            background-color: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(12px);
+
+            padding: calc(var(--spacing, .25rem) * 1);
+            border-radius: calc(infinity * 1px);
+            border: 1px solid var(--color-gray-100, oklch(0.967 0.003 264.542));
+            box-shadow: 0 -25px 50px -12px rgba(243, 244, 246, var(--tw-shadow-alpha, 0.5));
+
+            opacity: calc(100% - var(--progress, 0%) * 1);
+            scale: calc(100% - var(--progress, 0%) * 0.2);
+            translate: 0 calc(0% - (var(--progress, 0%) * 0.1));
+        }
+    }
+}

package/components/layouts/header/component/index.d.ts

@@ -0,0 +1,6 @@
+import { Header as HeaderBase } from './component';
+import type { HeaderProps } from './component.interface';
+export declare const Header: typeof HeaderBase;
+export declare namespace Header {
+    type Props = HeaderProps;
+}

package/components/layouts/header/component/index.js

@@ -0,0 +1,2 @@
+import { Header as HeaderBase } from './component';
+export var Header = HeaderBase;

package/components/layouts/header/skeleton/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { HeaderSkeletonProps } from './component.interface';
+export declare function HeaderSkeleton<C extends ElementType = 'header'>({ ...rest }: HeaderSkeletonProps<C>): React.JSX.Element;

package/components/layouts/header/skeleton/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type HeaderSkeletonProps<C extends ElementType = 'header'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/layouts/header/skeleton/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/layouts/header/skeleton/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 classNames from 'classnames';
+import React from 'react';
+import styles from './component.module.css';
+export function HeaderSkeleton(_a) {
+    var rest = __rest(_a, []);
+    var Component = ((rest === null || rest === void 0 ? void 0 : rest.as) || 'header');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-header-skeleton', styles.header, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/layouts/header/skeleton/component.module.css

@@ -0,0 +1,23 @@
+@layer mosuk-ui {
+    @layer index-16 {
+        .header {
+            position: fixed;
+            top: calc(var(--spacing, .25rem) * 2);
+            right: calc(var(--spacing, .25rem) * 2);
+            bottom: auto;
+            left: calc(var(--spacing, .25rem) * 2);
+            z-index: 100;
+
+            width: calc(100% - calc(var(--spacing, .25rem) * 4));
+            height: calc(var(--spacing, .25rem) * 16);
+
+            background-color: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(12px);
+
+            padding: calc(var(--spacing, .25rem) * 1);
+            border-radius: calc(infinity * 1px);
+            border: 1px solid var(--color-gray-100, oklch(0.967 0.003 264.542));
+            box-shadow: 0 -25px 50px -12px rgba(243, 244, 246, var(--tw-shadow-alpha, 0.5));
+        }
+    }
+}

package/components/layouts/header/skeleton/index.d.ts

@@ -0,0 +1,6 @@
+import { HeaderSkeleton as HeaderSkeletonBase } from './component';
+import type { HeaderSkeletonProps } from './component.interface';
+export declare const HeaderSkeleton: typeof HeaderSkeletonBase;
+export declare namespace HeaderSkeleton {
+    type Props = HeaderSkeletonProps;
+}

package/components/layouts/header/skeleton/index.js

@@ -0,0 +1,2 @@
+import { HeaderSkeleton as HeaderSkeletonBase } from './component';
+export var HeaderSkeleton = HeaderSkeletonBase;

package/components/layouts/sidebar/component/card/button/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { SidebarCardButtonProps } from './component.interface';
+export declare function SidebarCardButton<C extends ElementType = 'button'>({ active, ...rest }: SidebarCardButtonProps<C>): React.JSX.Element;

package/components/layouts/sidebar/component/card/button/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ElementType } from 'react';
+import { ButtonProps } from '../../../../../actions/button/component/component.interface';
+export type SidebarCardButtonProps<C extends ElementType = 'button'> = ButtonProps<C> & {
+    active?: boolean;
+};

package/components/layouts/sidebar/component/card/button/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/layouts/sidebar/component/card/button/component.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 classNames from 'classnames';
+import { ChevronRight } from 'lucide-react';
+import React from 'react';
+import { Button } from '../../../../../actions/button/component/component';
+import styles from '../../component.module.css';
+export function SidebarCardButton(_a) {
+    var _b;
+    var active = _a.active, rest = __rest(_a, ["active"]);
+    return (React.createElement(Button, __assign({}, rest, { className: classNames('mosuk-sidebar-card-button', styles.button, rest === null || rest === void 0 ? void 0 : rest.className, (_b = {},
+            _b[styles.active] = active,
+            _b)) }), rest === null || rest === void 0 ? void 0 :
+        rest.children,
+        React.createElement(ChevronRight, { className: styles.right })));
+}

package/components/layouts/sidebar/component/card/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SidebarCardProps } from './component.interface';
+export declare function SidebarCard({ ...rest }: SidebarCardProps): React.JSX.Element;

package/components/layouts/sidebar/component/card/component.interface.d.ts

@@ -0,0 +1,2 @@
+import { CardProps } from '../../../../display/card/component/component.interface';
+export type SidebarCardProps = CardProps;

package/components/layouts/sidebar/component/card/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/layouts/sidebar/component/card/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 classNames from 'classnames';
+import React from 'react';
+import { Card } from '../../../../display/card/component/component';
+import styles from '../component.module.css';
+export function SidebarCard(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(Card, __assign({}, rest, { className: classNames('mosuk-sidebar-card', styles.card, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/layouts/sidebar/component/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { SidebarProps } from './component.interface';
+export declare function Sidebar<C extends ElementType = 'aside'>({ as, ...rest }: SidebarProps<C>): React.JSX.Element;

package/components/layouts/sidebar/component/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type SidebarProps<C extends ElementType = 'aside'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/layouts/sidebar/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/layouts/sidebar/component/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 classNames from 'classnames';
+import React from 'react';
+import styles from './component.module.css';
+export function Sidebar(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'aside');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-sidebar', styles.sidebar, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/layouts/sidebar/component/component.module.css

@@ -0,0 +1,54 @@
+@layer mosuk-ui {
+    @layer index-16 {
+        .sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--spacing, .25rem) * 4);
+        }
+
+        .card {
+            padding: 0;
+
+            cursor: default;
+
+            &:hover {
+                border-color: var(--color-gray-100, oklch(.967 .003 264.542));
+                box-shadow: 0 25px 50px -12px rgba(249, 250, 251, var(--tw-shadow-alpha, 0.5));
+            }
+        }
+
+        .button {
+            width: 100%;
+            height: calc(var(--spacing, .25rem) * 12);
+
+            justify-content: flex-start;
+
+            border: 0;
+            border-bottom: 1px solid var(--color-gray-100, oklch(.967 .003 264.542));
+            border-radius: 0;
+
+            .right {
+                width: calc(var(--spacing, .25rem) * 3);
+                height: calc(var(--spacing, .25rem) * 3);
+                min-width: calc(var(--spacing, .25rem) * 3);
+                min-height: calc(var(--spacing, .25rem) * 3);
+
+                margin-left: auto;
+            }
+
+            &:last-child {
+                border-bottom: 0;
+            }
+
+            &:hover,
+            &.active {
+                background-color: var(--color-gray-100, oklch(.967 .003 264.542));
+                color: var(--color-primary-500, #0074e7);
+
+                svg {
+                    color: var(--color-primary-500, #0074e7);
+                }
+            }
+        }
+    }
+}

package/components/layouts/sidebar/component/index.d.ts

@@ -0,0 +1,20 @@
+import { SidebarCardButton } from './card/button/component';
+import { SidebarCardButtonProps } from './card/button/component.interface';
+import { SidebarCard } from './card/component';
+import { SidebarCardProps } from './card/component.interface';
+import { Sidebar as BaseSidebar } from './component';
+import type { SidebarProps } from './component.interface';
+export declare const Sidebar: typeof BaseSidebar & {
+    Card: typeof SidebarCard & {
+        Button: typeof SidebarCardButton;
+    };
+};
+export declare namespace Sidebar {
+    type Props = SidebarProps;
+    namespace Card {
+        type Props = SidebarCardProps;
+        namespace Button {
+            type Props = SidebarCardButtonProps;
+        }
+    }
+}