mosuk-ui 1.0.1

package/components/actions/input/(select)/component/component.module.css

@@ -0,0 +1,214 @@
+@layer mosuk-ui {
+    @layer index-21 {
+        .select {
+            &:has(~ .arrow) {
+                padding-right: calc(var(--spacing, .25rem) * 10);
+            }
+
+            &:not(:hover) {
+                &~.arrow {
+                    transition: all 0.6s ease-in-out;
+
+                    & svg {
+                        transition: all 0.6s ease-in-out;
+                    }
+                }
+            }
+
+            &:hover {
+                &~.arrow {
+                    color: var(--color-primary-500, #0074e7);
+                    border-color: var(--color-primary-200, #b3deff);
+                }
+            }
+
+            &:focus {
+                &~.arrow {
+                    color: var(--color-primary-500, #0074e7);
+                    border-color: var(--color-primary-500, #0074e7);
+
+                    & svg {
+                        transform: rotate(-180deg);
+                    }
+                }
+            }
+        }
+
+        .arrow {
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 1;
+
+            width: 2rem;
+            height: 2rem;
+
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            padding: 0.625rem;
+
+            border-left: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
+
+            cursor: pointer;
+            transition: all 0.2s ease-in-out;
+
+            & svg {
+                width: 100%;
+                height: 100%;
+                transition: transform 0.2s ease-in-out;
+            }
+        }
+
+        .dropdown {
+            overflow-y: auto;
+
+            width: var(--anchor-width);
+            max-height: var(--available-height, 12rem);
+
+            padding: calc(var(--spacing, 0.25rem) * 1);
+
+            background-color: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(12px);
+
+            border: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
+            border-radius: var(--radius-lg, 0.5rem);
+            box-shadow: 0 10px 15px -3px var(--color-gray-100, oklch(0.967 0.003 264.542)), 0 4px 6px -4px var(--color-gray-100, oklch(0.967 0.003 264.542));
+
+            transform-origin: var(--transform-origin);
+            transition: transform 200ms, opacity 200ms;
+
+            &[data-starting-style],
+            &[data-ending-style] {
+                opacity: 0;
+            }
+
+            &::-webkit-scrollbar {
+                width: calc(var(--spacing, .25rem) * 1);
+            }
+
+            .content {
+                display: flex;
+                flex-direction: column;
+                gap: calc(var(--spacing, 0.25rem) * 1);
+
+                .button {
+                    width: 100%;
+                    height: calc(var(--spacing, .25rem) * 8);
+
+                    display: flex;
+                    align-items: center;
+                    justify-content: start;
+                    gap: calc(var(--spacing, .25rem) * 2);
+
+                    background-color: transparent;
+                    color: var(--color-black, oklch(0.001 0.001 261.692));
+
+                    font-size: var(--text-xs, .75rem);
+                    text-wrap: nowrap;
+
+                    padding-left: calc(var(--spacing, .25rem) * 2);
+                    padding-right: calc(var(--spacing, .25rem) * 2);
+
+                    border-radius: var(--radius-lg, 0.5rem);
+                    outline: none;
+
+                    cursor: pointer;
+                    transition: all 0.2s ease-in-out;
+
+                    .check {
+                        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;
+                    }
+
+                    svg {
+                        width: calc(var(--spacing, .25rem) * 3.5);
+                        height: calc(var(--spacing, .25rem) * 3.5);
+                        min-width: calc(var(--spacing, .25rem) * 3.5);
+                        min-height: calc(var(--spacing, .25rem) * 3.5);
+
+                        color: var(--color-gray-700, oklch(0.373 0.034 259.733));
+                        transition: all 0.2s ease-in-out;
+                    }
+
+                    &:hover,
+                    &.selected {
+                        background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+                        color: var(--color-primary-500, #0074e7);
+
+                        svg {
+                            color: var(--color-primary-500, #0074e7);
+                        }
+                    }
+
+                    &:not(:hover) {
+                        transition: all 0.6s ease-in-out;
+
+                        svg {
+                            transition: all 0.6s ease-in-out;
+                        }
+                    }
+                }
+            }
+
+            .empty {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: calc(var(--spacing, 0.25rem) * 2);
+
+                width: 100%;
+                height: calc(var(--spacing, 0.25rem) * 8);
+
+                font-size: var(--text-sm, .875rem);
+                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+
+                svg {
+                    width: calc(var(--spacing, 0.25rem) * 4);
+                    height: calc(var(--spacing, 0.25rem) * 4);
+                }
+            }
+        }
+
+        .fieldset {
+            &:has(.hint.info) {
+                .select {
+                    &~.arrow {
+                        color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+                        border-color: var(--color-gray-200, oklch(0.928 0.006 264.531));
+                    }
+                }
+            }
+
+            &:has(.hint.success) {
+                .select {
+                    &~.arrow {
+                        color: var(--color-green-500, oklch(0.723 0.219 149.579));
+                        border-color: var(--color-green-300, oklch(0.871 0.15 154.449));
+                    }
+                }
+            }
+
+            &:has(.hint.warning) {
+                .select {
+                    &~.arrow {
+                        color: var(--color-orange-500, oklch(0.705 0.213 47.604));
+                        border-color: var(--color-orange-200, oklch(0.901 0.076 70.697));
+                    }
+                }
+
+            }
+
+            &:has(.hint.error) {
+                .select {
+                    &~.arrow {
+                        color: var(--color-red-500, oklch(0.637 0.237 25.331));
+                        border-color: var(--color-red-200, oklch(0.885 0.062 18.334));
+                    }
+                }
+            }
+        }
+    }
+}

package/components/actions/input/(select)/component/hint/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputHintProps } from '../../../component/hint/component.interface';
+export declare function InputSelectHint({ children, ...props }: InputHintProps): React.JSX.Element;

package/components/actions/input/(select)/component/hint/component.js

@@ -0,0 +1,31 @@
+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 { InputHint } from '../../../component/hint/component';
+import styles from '../component.module.css';
+export function InputSelectHint(_a) {
+    var _b;
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(InputHint, __assign({}, props, { className: classNames(styles.hint, styles[(_b = props === null || props === void 0 ? void 0 : props.type) !== null && _b !== void 0 ? _b : ''], props === null || props === void 0 ? void 0 : props.className) }), children));
+}

package/components/actions/input/(select)/component/index.d.ts

@@ -0,0 +1,20 @@
+import { InputProps, InputProps as ParentInputProps } from '../../component/component.interface';
+import { InputHintType } from '../../component/hint/component.enums';
+import { InputSelectHint } from './hint/component';
+import { InputSelectInput as Component } from './input/component';
+import { InputSelectInputProps } from './input/component.interface';
+export declare const InputSelect: ((props: ParentInputProps) => import("react").JSX.Element) & {
+    Input: typeof Component;
+    Hint: typeof InputSelectHint & {
+        Type: typeof InputHintType;
+    };
+};
+export declare namespace InputSelect {
+    type Props = InputProps;
+    namespace Input {
+        type Props = InputSelectInputProps;
+    }
+    namespace Hint {
+        type Props = InputHintType;
+    }
+}

package/components/actions/input/(select)/component/index.js

@@ -0,0 +1,11 @@
+import { Input as ParentInput } from '../../component/component';
+import { InputHintType } from '../../component/hint/component.enums';
+import { InputSelectHint } from './hint/component';
+import { InputSelectInput as Component } from './input/component';
+var ChildInput = function (props) { return ParentInput(props); };
+export var InputSelect = Object.assign(ChildInput, {
+    Input: Component,
+    Hint: Object.assign(InputSelectHint, {
+        Type: InputHintType,
+    }),
+});

package/components/actions/input/(select)/component/input/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputSelectInputProps } from './component.interface';
+export declare function InputSelectInput({ ref, value, values, onFocus, onBlur, onChange, onSearch, container, align, side, alignOffset, sideOffset, sticky, dropdownClassName, dropdownContentClassName, ...props }: InputSelectInputProps): React.JSX.Element;

package/components/actions/input/(select)/component/input/component.interface.d.ts

@@ -0,0 +1,24 @@
+import { Popover } from '@base-ui-components/react';
+import { ComponentType, ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes, SVGProps } from 'react';
+import { InputInputProps } from '../../../component/input/component.interface';
+export interface InputSelectInputOptionProps extends HTMLAttributes<HTMLButtonElement> {
+    icon?: ComponentType<SVGProps<SVGSVGElement>> | ForwardRefExoticComponent<RefAttributes<SVGSVGElement>>;
+    label: string;
+    value: string | number;
+    render?: (option: InputSelectInputOptionProps) => ReactNode;
+}
+export interface InputSelectInputProps extends Omit<InputInputProps, 'onChange'> {
+    values: InputSelectInputOptionProps[];
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onChange?: (value: string | number) => void;
+    onSearch?: (value: string) => void;
+    align?: Popover.Positioner.Props['align'];
+    side?: Popover.Positioner.Props['side'];
+    alignOffset?: Popover.Positioner.Props['alignOffset'];
+    sideOffset?: Popover.Positioner.Props['sideOffset'];
+    sticky?: Popover.Positioner.Props['sticky'];
+    container?: Popover.Portal.Props['container'];
+    dropdownClassName?: string;
+    dropdownContentClassName?: string;
+}

package/components/actions/input/(select)/component/input/component.interface.js

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

package/components/actions/input/(select)/component/input/component.js

@@ -0,0 +1,123 @@
+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 { Check, ChevronDown, SearchX } from 'lucide-react';
+import React, { useEffect, useId, useRef, useState } from 'react';
+import { Dropdown, DropdownDropdown, DropdownDropdownContent } from '../../../../../overlays/dropdown/component/component';
+import { InputInput } from '../../../component/input/component';
+import styles from '../component.module.css';
+export function InputSelectInput(_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var ref = _a.ref, value = _a.value, values = _a.values, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onSearch = _a.onSearch, container = _a.container, align = _a.align, side = _a.side, alignOffset = _a.alignOffset, sideOffset = _a.sideOffset, sticky = _a.sticky, dropdownClassName = _a.dropdownClassName, dropdownContentClassName = _a.dropdownContentClassName, props = __rest(_a, ["ref", "value", "values", "onFocus", "onBlur", "onChange", "onSearch", "container", "align", "side", "alignOffset", "sideOffset", "sticky", "dropdownClassName", "dropdownContentClassName"]);
+    if (!(props === null || props === void 0 ? void 0 : props.id)) {
+        var id = useId();
+        props.id = id;
+    }
+    var inputRef = useRef(null);
+    var searchTimeoutRef = useRef(null);
+    var _h = useState(false), open = _h[0], setOpen = _h[1];
+    var _j = useState(''), searchQuery = _j[0], setSearchQuery = _j[1];
+    var _k = useState(''), debouncedSearchQuery = _k[0], setDebouncedSearchQuery = _k[1];
+    var selectedOption = values.find(function (option) { return option.value === value; });
+    // * Debounce для поискового запроса
+    useEffect(function () {
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        searchTimeoutRef.current = setTimeout(function () {
+            setDebouncedSearchQuery(searchQuery);
+            if (onSearch) {
+                onSearch(searchQuery);
+            }
+        }, 200);
+        return function () {
+            if (searchTimeoutRef.current) {
+                clearTimeout(searchTimeoutRef.current);
+            }
+        };
+    }, [searchQuery, onSearch]);
+    // * Фильтрация значений по поисковому запросу
+    var filteredValues = values.filter(function (option) {
+        return option.label.toLowerCase().includes(debouncedSearchQuery.trim().toLowerCase());
+    });
+    // * Получение фокуса
+    var handleFocus = function () {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        setSearchQuery('');
+    };
+    // * Потеря фокуса
+    var handleBlur = function () {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        setSearchQuery('');
+    };
+    // * Ввод текста
+    var handleInputChange = function (value) {
+        setSearchQuery(value);
+    };
+    // * Выбор опции
+    var handleOptionSelect = function (option) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
+        setTimeout(function () {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            setSearchQuery('');
+            setDebouncedSearchQuery('');
+        }, 300);
+    };
+    return (React.createElement(Dropdown, { open: open, onOpenChange: setOpen },
+        React.createElement(InputInput, __assign({}, props, { ref: inputRef, value: open ? searchQuery : (_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _b !== void 0 ? _b : '', autoComplete: (_c = props === null || props === void 0 ? void 0 : props.autoComplete) !== null && _c !== void 0 ? _c : 'off', onChange: function (e) { return handleInputChange(e.target.value); }, onFocus: handleFocus, onBlur: handleBlur, onClick: function (e) {
+                var _a;
+                setOpen(true);
+                (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, onKeyDown: function (e) {
+                var _a;
+                setOpen(false);
+                (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, className: 'mosuk-input-select ' + ((_d = styles.select) !== null && _d !== void 0 ? _d : '') + ' ' + ((_e = props === null || props === void 0 ? void 0 : props.className) !== null && _e !== void 0 ? _e : '') }),
+            React.createElement("label", { htmlFor: props === null || props === void 0 ? void 0 : props.id, className: styles.arrow, "aria-hidden": "true" },
+                React.createElement(ChevronDown, null)), props === null || props === void 0 ? void 0 :
+            props.children),
+        React.createElement(DropdownDropdown, { container: container, anchor: inputRef.current, align: align !== null && align !== void 0 ? align : 'center', side: side !== null && side !== void 0 ? side : 'bottom', alignOffset: alignOffset !== null && alignOffset !== void 0 ? alignOffset : 0, sideOffset: sideOffset !== null && sideOffset !== void 0 ? sideOffset : 0, sticky: sticky !== null && sticky !== void 0 ? sticky : true, positionMethod: "fixed", className: "mosuk-input-select-positioner" },
+            React.createElement(DropdownDropdownContent, { className: 'mosuk-input-select-dropdown ' +
+                    ((_f = styles.dropdown) !== null && _f !== void 0 ? _f : '') +
+                    ' ' +
+                    (dropdownClassName !== null && dropdownClassName !== void 0 ? dropdownClassName : ''), initialFocus: inputRef, finalFocus: undefined },
+                React.createElement("div", { className: 'mosuk-input-select-dropdown-content ' +
+                        ((_g = styles.content) !== null && _g !== void 0 ? _g : '') +
+                        ' ' +
+                        (dropdownContentClassName !== null && dropdownContentClassName !== void 0 ? dropdownContentClassName : '') }, filteredValues.length > 0 ? (filteredValues.map(function (option, index) {
+                    var _a, _b;
+                    return (React.createElement("button", { key: index, type: "button", onMouseDown: function (e) {
+                            e.preventDefault();
+                            setOpen(false);
+                        }, onClick: function () { return handleOptionSelect(option); }, className: ((_a = styles.button) !== null && _a !== void 0 ? _a : '') +
+                            ' ' +
+                            (option.value === value ? styles.selected : '') +
+                            ' ' +
+                            ((_b = option.className) !== null && _b !== void 0 ? _b : '') }, option.render ? (option.render(option)) : (React.createElement(React.Fragment, null,
+                        option.icon && (React.createElement(option.icon, { className: "".concat(styles.icon, " ").concat(option.value === value ? styles.selected : '') })),
+                        option.label,
+                        option.value === value && React.createElement(Check, { className: styles.check })))));
+                })) : (React.createElement("div", { className: styles.empty },
+                    React.createElement(SearchX, null),
+                    " \u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E")))))));
+}

package/components/actions/input/(select)/skeleton/component.module.css

@@ -0,0 +1,47 @@
+@layer mosuk-ui {
+    @layer index-21 {
+        .input {
+            position: relative;
+            z-index: 0;
+
+            width: 100%;
+            height: calc(var(--spacing, .25rem) * 8);
+            min-height: calc(var(--spacing, .25rem) * 8);
+
+            border-radius: var(--radius-lg, 0.5rem);
+
+            .icon {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 1;
+
+                width: calc(var(--spacing, .25rem) * 8);
+                min-width: calc(var(--spacing, .25rem) * 8);
+                height: calc(var(--spacing, .25rem) * 8);
+                min-height: calc(var(--spacing, .25rem) * 8);
+
+                border-right: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
+            }
+
+            .field {
+                width: 100%;
+                height: 100%;
+            }
+
+            .arrow {
+                position: absolute;
+                top: 0;
+                right: 0;
+                z-index: 1;
+
+                width: calc(var(--spacing, .25rem) * 8);
+                min-width: calc(var(--spacing, .25rem) * 8);
+                height: calc(var(--spacing, .25rem) * 8);
+                min-height: calc(var(--spacing, .25rem) * 8);
+
+                border-left: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
+            }
+        }
+    }
+}

package/components/actions/input/(select)/skeleton/index.d.ts

@@ -0,0 +1,18 @@
+import { InputSkeletonProps as ParentInputSkeletonProps } from '../../skeleton/component.interface';
+import { InputHintSkeleton } from '../../skeleton/hint/component';
+import { InputHintSkeletonProps } from '../../skeleton/hint/component.interface';
+import { InputSelectInputProps } from '../component/input/component.interface';
+import { InputSelectInputSkeleton } from './input/component';
+export declare const InputSelectSkeleton: ((props: ParentInputSkeletonProps) => import("react").JSX.Element) & {
+    Input: typeof InputSelectInputSkeleton;
+    Hint: typeof InputHintSkeleton;
+};
+export declare namespace InputSelectSkeleton {
+    type Props = ParentInputSkeletonProps;
+    namespace Input {
+        type Props = InputSelectInputProps;
+    }
+    namespace Hint {
+        type Props = InputHintSkeletonProps;
+    }
+}

package/components/actions/input/(select)/skeleton/index.js

@@ -0,0 +1,10 @@
+import { InputSkeleton as ParentInputSkeleton } from '../../skeleton/component';
+import { InputHintSkeleton } from '../../skeleton/hint/component';
+import { InputSelectInputSkeleton } from './input/component';
+var ChildInput = function (props) {
+    return ParentInputSkeleton(props);
+};
+export var InputSelectSkeleton = Object.assign(ChildInput, {
+    Input: InputSelectInputSkeleton,
+    Hint: InputHintSkeleton,
+});

package/components/actions/input/(select)/skeleton/input/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputInputSkeletonProps as ParentInputInputSkeletonProps } from '../../../skeleton/input/component.interface';
+export declare function InputSelectInputSkeleton({ icon, ...rest }: ParentInputInputSkeletonProps): React.JSX.Element;

package/components/actions/input/(select)/skeleton/input/component.js

@@ -0,0 +1,33 @@
+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 { Skeleton } from '../../../../../display/skeleton/component/component';
+import styles from '../component.module.css';
+export function InputSelectInputSkeleton(_a) {
+    var icon = _a.icon, rest = __rest(_a, ["icon"]);
+    return (React.createElement("div", __assign({}, rest, { className: classNames('mosuk-input-skeleton-input', styles.input, rest === null || rest === void 0 ? void 0 : rest.className) }),
+        icon && React.createElement("div", { className: classNames(styles.icon) }),
+        React.createElement(Skeleton, { className: classNames(styles.field) }),
+        React.createElement("div", { className: classNames(styles.arrow) })));
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputContextProps, InputProps } from './component.interface';
+export declare const InputContext: React.Context<InputContextProps | null>;
+export declare function Input({ ...props }: InputProps): React.JSX.Element;

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

@@ -0,0 +1,6 @@
+import { FieldsetHTMLAttributes, RefObject } from 'react';
+export interface InputContextProps {
+}
+export interface InputProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    ref?: RefObject<HTMLFieldSetElement | null>;
+}

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

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

package/components/actions/input/component/component.js

@@ -0,0 +1,31 @@
+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, { createContext } from 'react';
+import styles from './component.module.css';
+export var InputContext = createContext(null);
+export function Input(_a) {
+    var props = __rest(_a, []);
+    return (React.createElement(InputContext.Provider, { value: {} },
+        React.createElement("fieldset", __assign({}, props, { className: classNames('mosuk-input', styles.fieldset, props === null || props === void 0 ? void 0 : props.className) }), props === null || props === void 0 ? void 0 : props.children)));
+}