mosuk-ui 1.0.1

package/LICENSE

@@ -0,0 +1,29 @@
+MIT License
+
+Copyright (c) 2025 mosuk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to use,
+copy, modify, and incorporate the Software into personal or commercial projects,
+subject to the following conditions:
+
+1. The above copyright notice and this permission notice shall be included in all
+   copies or substantial portions of the Software.
+
+2. The Software may be used in personal and commercial projects without restriction.
+
+3. The Software, or any substantial portion thereof, may NOT be sold, sublicensed,
+   or distributed as a standalone product or as the primary component of a product
+   without explicit written permission from the copyright holder.
+
+4. Modified versions of the Software may be created and used, but must retain this
+   license and the original copyright notice.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/components/actions/button/(delete)/component/component.d.ts

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

package/components/actions/button/(delete)/component/component.interface.d.ts

@@ -0,0 +1,12 @@
+import { ButtonProps } from '../../component/component.interface';
+export interface ButtonDeleteProps extends ButtonProps {
+    danger?: IconDeleteDangerProps;
+    onDanger?: () => void;
+    onDelete?: () => void;
+}
+interface IconDeleteDangerProps {
+    timer: number;
+    title: string;
+    className: string;
+}
+export {};

package/components/actions/button/(delete)/component/component.interface.js

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

package/components/actions/button/(delete)/component/component.js

@@ -0,0 +1,64 @@
+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, useRef, useState } from 'react';
+import { Button } from '../../component/component';
+import styles from './component.module.css';
+export function ButtonDelete(_a) {
+    var _b;
+    var _c, _d, _e;
+    var danger = _a.danger, onDanger = _a.onDanger, onDelete = _a.onDelete, rest = __rest(_a, ["danger", "onDanger", "onDelete"]);
+    var timerRef = useRef(undefined);
+    var _f = useState(false), isConfirming = _f[0], setIsConfirming = _f[1];
+    useEffect(function () {
+        return function () {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, []);
+    var handleClick = function (e) {
+        var _a;
+        if (!isConfirming) {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsConfirming(true);
+            timerRef.current = window.setTimeout(function () {
+                onDanger === null || onDanger === void 0 ? void 0 : onDanger();
+                setIsConfirming(false);
+                timerRef.current = undefined;
+            }, (_a = danger === null || danger === void 0 ? void 0 : danger.timer) !== null && _a !== void 0 ? _a : 3000);
+            return;
+        }
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = undefined;
+        }
+        setIsConfirming(false);
+        onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+    };
+    return (React.createElement(Button, __assign({}, rest, { title: isConfirming ? ((_c = danger === null || danger === void 0 ? void 0 : danger.title) !== null && _c !== void 0 ? _c : 'Подтвердить удаление') : ((_d = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _d !== void 0 ? _d : 'Удалить'), onClick: handleClick, className: classNames('mosuk-button-delete', styles.button, (_b = {},
+            _b[styles.danger] = isConfirming,
+            _b[(_e = danger === null || danger === void 0 ? void 0 : danger.className) !== null && _e !== void 0 ? _e : ''] = isConfirming,
+            _b), rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/actions/button/(delete)/component/component.module.css

@@ -0,0 +1,32 @@
+@layer mosuk-ui {
+    @layer index-21 {
+        .button {
+            &:hover {
+                background-color: var(--color-red-100, oklch(0.936 0.032 17.717));
+                color: var(--color-red-500, oklch(0.637 0.237 25.331));
+
+                & svg {
+                    color: var(--color-red-500, oklch(0.637 0.237 25.331));
+                }
+            }
+
+            &.danger {
+                background-color: var(--color-red-100, oklch(0.936 0.032 17.717));
+                color: var(--color-red-500, oklch(0.637 0.237 25.331));
+
+                & svg {
+                    color: var(--color-red-500, oklch(0.637 0.237 25.331));
+                }
+
+                &:hover {
+                    background-color: var(--color-red-200, oklch(0.962 0.044 156.743));
+                    color: var(--color-red-700, oklch(0.527 0.154 150.069));
+
+                    svg {
+                        color: var(--color-red-700, oklch(0.527 0.154 150.069));
+                    }
+                }
+            }
+        }
+    }
+}

package/components/actions/button/(delete)/component/index.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonDeleteProps } from './component.interface';
+export declare function ButtonDelete(props: ButtonDeleteProps): import("react").JSX.Element;
+export declare namespace ButtonDelete {
+    type Props = ButtonDeleteProps;
+}

package/components/actions/button/(delete)/component/index.js

@@ -0,0 +1,4 @@
+import { ButtonDelete as BaseButtonDelete } from './component';
+export function ButtonDelete(props) {
+    return BaseButtonDelete(props);
+}

package/components/actions/button/(status)/component/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ButtonStatusProps } from './component.interface';
+export declare function ButtonStatus({ value, values, onChange, disabled, className, side, sideOffset, align, alignOffset, container, ...rest }: ButtonStatusProps): React.JSX.Element | null;

package/components/actions/button/(status)/component/component.interface.d.ts

@@ -0,0 +1,22 @@
+import { Popover } from '@base-ui-components/react';
+import { ComponentType, ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
+import { ButtonProps } from '../../component/component.interface';
+export interface StatusOption {
+    status: string;
+    text: string;
+    icon?: ComponentType<SVGProps<SVGSVGElement>> | ForwardRefExoticComponent<RefAttributes<SVGSVGElement>>;
+    className?: string;
+    iconClassName?: string;
+}
+export interface ButtonStatusProps extends Omit<ButtonProps, 'onChange'> {
+    value?: string;
+    values?: StatusOption[];
+    onChange?: (newValue: string) => void;
+    disabled?: boolean;
+    className?: string;
+    side?: Popover.Positioner.Props['side'];
+    sideOffset?: Popover.Positioner.Props['sideOffset'];
+    align?: Popover.Positioner.Props['align'];
+    alignOffset?: Popover.Positioner.Props['alignOffset'];
+    container?: Popover.Portal.Props['container'];
+}

package/components/actions/button/(status)/component/component.interface.js

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

package/components/actions/button/(status)/component/component.js

@@ -0,0 +1,124 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 { Dropdown, DropdownDropdown, DropdownDropdownContent, DropdownTrigger, } from '../../../../overlays/dropdown/component/component';
+import { Button } from '../../component/component';
+import { ButtonSkeleton } from '../../skeleton/component';
+import styles from './component.module.css';
+export function ButtonStatus(_a) {
+    var _this = this;
+    var _b, _c;
+    var value = _a.value, values = _a.values, onChange = _a.onChange, disabled = _a.disabled, className = _a.className, side = _a.side, sideOffset = _a.sideOffset, align = _a.align, alignOffset = _a.alignOffset, container = _a.container, rest = __rest(_a, ["value", "values", "onChange", "disabled", "className", "side", "sideOffset", "align", "alignOffset", "container"]);
+    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = useState(values === null || values === void 0 ? void 0 : values.find(function (option) { return option.status === value; })), currentValue = _f[0], setCurrentValue = _f[1];
+    useEffect(function () {
+        setCurrentValue(values === null || values === void 0 ? void 0 : values.find(function (option) { return option.status === value; }));
+    }, [value, values]);
+    if (!currentValue && (values === null || values === void 0 ? void 0 : values.length) === 0) {
+        return null;
+    }
+    var availableValues = values === null || values === void 0 ? void 0 : values.filter(function (option) { return option.status !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.status); });
+    var handleChange = function (newValue) { return __awaiter(_this, void 0, void 0, function () {
+        var error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    setCurrentValue(values === null || values === void 0 ? void 0 : values.find(function (option) { return option.status === newValue; }));
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, Promise.resolve(onChange === null || onChange === void 0 ? void 0 : onChange(newValue))];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 5];
+                case 3:
+                    error_1 = _a.sent();
+                    throw error_1;
+                case 4:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    if (isLoading) {
+        return React.createElement(ButtonSkeleton, __assign({}, rest));
+    }
+    if (disabled) {
+        return (React.createElement(Button, __assign({}, rest, { className: "".concat(styles.button, " ").concat(className !== null && className !== void 0 ? className : '', " ").concat((_b = currentValue === null || currentValue === void 0 ? void 0 : currentValue.className) !== null && _b !== void 0 ? _b : ''), disabled: true }),
+            (currentValue === null || currentValue === void 0 ? void 0 : currentValue.icon) && React.createElement(currentValue.icon, null), currentValue === null || currentValue === void 0 ? void 0 :
+            currentValue.text));
+    }
+    return (React.createElement(Dropdown, { open: isOpen, onOpenChange: setIsOpen },
+        React.createElement(DropdownTrigger, null,
+            React.createElement(Button, __assign({}, rest, { as: "span", className: "".concat(styles.button, " ").concat(className !== null && className !== void 0 ? className : '', " ").concat((_c = currentValue === null || currentValue === void 0 ? void 0 : currentValue.className) !== null && _c !== void 0 ? _c : '') }),
+                (currentValue === null || currentValue === void 0 ? void 0 : currentValue.icon) && React.createElement(currentValue.icon, null), currentValue === null || currentValue === void 0 ? void 0 :
+                currentValue.text)),
+        React.createElement(DropdownDropdown, { align: 'center', alignOffset: 0, side: 'bottom', sideOffset: 8, container: container },
+            React.createElement(DropdownDropdownContent, null,
+                React.createElement("div", { className: "".concat(styles.list) }, availableValues === null || availableValues === void 0 ? void 0 : availableValues.map(function (option) { return (React.createElement(Button, __assign({ key: option.status }, rest, { className: classNames(styles.listButton, option === null || option === void 0 ? void 0 : option.className), onClick: function () {
+                        handleChange(option.status);
+                        setIsOpen(false);
+                    } }),
+                    (option === null || option === void 0 ? void 0 : option.icon) && React.createElement(option.icon, null), option === null || option === void 0 ? void 0 :
+                    option.text)); }))))));
+}

package/components/actions/button/(status)/component/component.module.css

@@ -0,0 +1,26 @@
+@layer mosuk-ui {
+    @layer index-21 {
+        .button {
+            cursor: pointer;
+
+            &:disabled {
+                opacity: 1;
+
+                cursor: default;
+                pointer-events: none;
+            }
+        }
+
+        .list {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--spacing, .25rem) * 1);
+
+            .listButton {
+                width: 100%;
+
+                cursor: pointer;
+            }
+        }
+    }
+}

package/components/actions/button/(status)/component/index.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonStatusProps } from './component.interface';
+export declare function ButtonStatus(props: ButtonStatusProps): import("react").JSX.Element | null;
+export declare namespace ButtonStatus {
+    type Props = ButtonStatusProps;
+}

package/components/actions/button/(status)/component/index.js

@@ -0,0 +1,4 @@
+import { ButtonStatus as BaseButtonStatus, } from './component';
+export function ButtonStatus(props) {
+    return BaseButtonStatus(props);
+}

package/components/actions/button/(submit)/component/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ButtonSubmitProps } from './component.interface';
+export declare function ButtonSubmit({ icon, text, loading, success, error, ...props }: ButtonSubmitProps): React.JSX.Element;

package/components/actions/button/(submit)/component/component.interface.d.ts

@@ -0,0 +1,24 @@
+import { ComponentType, ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
+import { ButtonProps } from '../../component/component.interface';
+export interface ButtonSubmitProps extends ButtonProps {
+    icon?: ComponentType<SVGProps<SVGSVGElement>> | ForwardRefExoticComponent<RefAttributes<SVGSVGElement>>;
+    text?: string;
+    loading?: {
+        icon?: ComponentType<SVGProps<SVGSVGElement>> | ForwardRefExoticComponent<RefAttributes<SVGSVGElement>>;
+        text?: string;
+        className?: string;
+        isLoading?: boolean;
+    };
+    success?: {
+        icon?: ComponentType<SVGProps<SVGSVGElement>> | ForwardRefExoticComponent<RefAttributes<SVGSVGElement>>;
+        text?: string;
+        className?: string;
+        isSuccess?: boolean;
+    };
+    error?: {
+        icon?: ComponentType<SVGProps<SVGSVGElement>> | ForwardRefExoticComponent<RefAttributes<SVGSVGElement>>;
+        text?: string;
+        className?: string;
+        isError?: boolean;
+    };
+}

package/components/actions/button/(submit)/component/component.interface.js

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

package/components/actions/button/(submit)/component/component.js

@@ -0,0 +1,66 @@
+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 { CircleAlert, CircleCheck, LoaderCircle } from 'lucide-react';
+import React, { useMemo } from 'react';
+import { Button } from '../../component/component';
+import styles from './component.module.css';
+export function ButtonSubmit(_a) {
+    var _b;
+    var icon = _a.icon, text = _a.text, loading = _a.loading, success = _a.success, error = _a.error, props = __rest(_a, ["icon", "text", "loading", "success", "error"]);
+    var stateIcon = useMemo(function () {
+        var _a, _b, _c;
+        if (loading === null || loading === void 0 ? void 0 : loading.isLoading)
+            return (_a = loading === null || loading === void 0 ? void 0 : loading.icon) !== null && _a !== void 0 ? _a : LoaderCircle;
+        if (success === null || success === void 0 ? void 0 : success.isSuccess)
+            return (_b = success === null || success === void 0 ? void 0 : success.icon) !== null && _b !== void 0 ? _b : CircleCheck;
+        if (error === null || error === void 0 ? void 0 : error.isError)
+            return (_c = error === null || error === void 0 ? void 0 : error.icon) !== null && _c !== void 0 ? _c : CircleAlert;
+        return icon;
+    }, [loading, success, error]);
+    var stateText = useMemo(function () {
+        var _a, _b, _c;
+        if (loading === null || loading === void 0 ? void 0 : loading.isLoading)
+            return (_a = loading === null || loading === void 0 ? void 0 : loading.text) !== null && _a !== void 0 ? _a : 'Загрузка...';
+        if (success === null || success === void 0 ? void 0 : success.isSuccess)
+            return (_b = success === null || success === void 0 ? void 0 : success.text) !== null && _b !== void 0 ? _b : 'Успешно';
+        if (error === null || error === void 0 ? void 0 : error.isError)
+            return (_c = error === null || error === void 0 ? void 0 : error.text) !== null && _c !== void 0 ? _c : 'Ошибка';
+        return text;
+    }, [loading, success, error, text]);
+    var stateClassName = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f;
+        if (loading === null || loading === void 0 ? void 0 : loading.isLoading)
+            return ((_a = styles.loading) !== null && _a !== void 0 ? _a : '') + ' ' + ((_b = loading === null || loading === void 0 ? void 0 : loading.className) !== null && _b !== void 0 ? _b : '');
+        if (success === null || success === void 0 ? void 0 : success.isSuccess)
+            return ((_c = styles.success) !== null && _c !== void 0 ? _c : '') + ' ' + ((_d = success === null || success === void 0 ? void 0 : success.className) !== null && _d !== void 0 ? _d : '');
+        if (error === null || error === void 0 ? void 0 : error.isError)
+            return ((_e = styles.error) !== null && _e !== void 0 ? _e : '') + ' ' + ((_f = error === null || error === void 0 ? void 0 : error.className) !== null && _f !== void 0 ? _f : '');
+        return;
+    }, [loading, success, error]);
+    var IconComponent = stateIcon;
+    return (React.createElement(Button, __assign({}, props, { type: (_b = props === null || props === void 0 ? void 0 : props.type) !== null && _b !== void 0 ? _b : 'submit', className: classNames('mosuk-button-submit', styles.button, stateClassName, props === null || props === void 0 ? void 0 : props.className) }),
+        icon && IconComponent && React.createElement(IconComponent, null),
+        text && stateText, props === null || props === void 0 ? void 0 :
+        props.children));
+}

package/components/actions/button/(submit)/component/component.module.css

@@ -0,0 +1,76 @@
+@layer mosuk-ui {
+    @layer index-21 {
+        .button {
+            background: var(--color-primary-500, #0074e7);
+            color: var(--color-white, #fff);
+
+            svg {
+                color: var(--color-white, #fff);
+            }
+
+            &:hover {
+                background: var(--color-primary-600, #0074e7);
+                color: var(--color-white, #fff);
+
+                svg {
+                    color: var(--color-white, #fff);
+                }
+            }
+
+            /* ? Loading */
+            &.loading {
+                background: var(--color-gray-500, oklch(0.551 0.027 264.364));
+                cursor: progress;
+
+                svg {
+                    color: white;
+                    animation: spin 1s linear infinite;
+                }
+
+                &:not(:hover) {
+                    transition: all 200ms ease-in-out;
+
+                    svg {
+                        transition: all 200ms ease-in-out;
+                    }
+                }
+            }
+
+            /* ? Success */
+            &.success {
+                background: var(--color-green-500, oklch(0.723 0.219 149.579));
+                cursor: default;
+
+                svg {
+                    color: white;
+                }
+
+                &:not(:hover) {
+                    transition: all 200ms ease-in-out;
+
+                    svg {
+                        transition: all 200ms ease-in-out;
+                    }
+                }
+            }
+
+            /* ? Error */
+            &.error {
+                background: var(--color-red-500, oklch(0.637 0.237 25.331));
+                cursor: default;
+
+                svg {
+                    color: white;
+                }
+
+                &:not(:hover) {
+                    transition: all 200ms ease-in-out;
+
+                    svg {
+                        transition: all 200ms ease-in-out;
+                    }
+                }
+            }
+        }
+    }
+}

package/components/actions/button/(submit)/component/index.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonSubmitProps } from './component.interface';
+export declare function ButtonSubmit(props: ButtonSubmitProps): import("react").JSX.Element;
+export declare namespace ButtonSubmit {
+    type Props = ButtonSubmitProps;
+}

package/components/actions/button/(submit)/component/index.js

@@ -0,0 +1,4 @@
+import { ButtonSubmit as BaseButtonSubmit } from './component';
+export function ButtonSubmit(props) {
+    return BaseButtonSubmit(props);
+}

package/components/actions/button/component/component.d.ts

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

package/components/actions/button/component/component.interface.d.ts

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

package/components/actions/button/component/component.interface.js

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

package/components/actions/button/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 Button(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'button');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-button', styles.button, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}