mosuk-ui 1.0.1 → 1.0.3

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

@@ -1,4 +1,4 @@
-import { Popover } from '@base-ui-components/react';
+import { Popover } from '@base-ui/react';
 import { ComponentType, ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
 import { ButtonProps } from '../../component/component.interface';
 export interface StatusOption {

package/components/actions/button/component/component.module.css

@@ -13,12 +13,16 @@
 
             background-color: transparent;
             color: var(--color-black, #000);
+
             font-size: var(--text-xs, .75rem);
             text-wrap: nowrap;
+            text-overflow: ellipsis;
 
             padding-left: calc(var(--spacing, .25rem) * 4);
             padding-right: calc(var(--spacing, .25rem) * 4);
+
             border-radius: calc(infinity * 1px);
+            border: none;
             outline: none;
 
             user-select: none;

package/components/actions/button/skeleton/component.module.css

@@ -11,19 +11,25 @@
             justify-content: center;
             gap: calc(var(--spacing, .25rem) * 2);
 
-            background-color: var(--color-gray-100, oklch(.967 .003 264.542));
+            background-color: transparent;
             color: var(--color-black, #000);
+
             font-size: var(--text-xs, .75rem);
             text-wrap: nowrap;
+            text-overflow: ellipsis;
 
             padding-left: calc(var(--spacing, .25rem) * 4);
             padding-right: calc(var(--spacing, .25rem) * 4);
+
             border-radius: calc(infinity * 1px);
+            border: 1px solid transparent;
             outline: none;
 
             user-select: none;
             transition: all 200ms ease-in-out;
 
+            cursor: pointer;
+
             svg {
                 width: calc(var(--spacing, .25rem) * 3.5);
                 height: calc(var(--spacing, .25rem) * 3.5);
@@ -35,15 +41,6 @@
                 transition: all 200ms ease-in-out;
             }
 
-            &:hover {
-                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 600ms ease-in-out;
 
@@ -51,7 +48,6 @@
                     transition: all 600ms ease-in-out;
                 }
             }
-
         }
     }
 }

package/components/actions/icon/skeleton/component.module.css

@@ -13,15 +13,15 @@
             background-color: transparent;
             color: var(--color-gray-500, oklch(0.551 0.027 264.364));
 
-            padding: calc(var(--spacing, .25rem) * 2.25);
-            border-radius: calc(infinity * 1px);
-            outline: none;
-
             font-size: var(--text-base, 1rem);
             text-wrap: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
 
+            padding: calc(var(--spacing, .25rem) * 2.25);
+            border-radius: calc(infinity * 1px);
+            outline: none;
+
             transition: all 0.2s ease-in-out;
 
             cursor: pointer;

package/components/actions/input/(mask)/(date)/component/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputMaskDateProps } from './component.interface';
+export declare function InputMaskDate({ value, onChange, ...props }: InputMaskDateProps): React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import { InputMaskProps } from '../../component/component.interface';
+export interface InputMaskDateProps extends Omit<InputMaskProps, 'value' | 'onChange'> {
+    value?: Date;
+    onChange: (value: Date) => void;
+}

package/components/actions/input/(mask)/(date)/component/{input/component.js → component.js}

@@ -24,8 +24,8 @@ import { format, parse } from 'date-fns';
 import { createMask } from 'imask';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { IMask } from 'react-imask';
-import { InputMaskInput } from '../../../component/input/component';
-export function InputMaskDateInput(_a) {
+import { InputMask } from '../../component/component';
+export function InputMaskDate(_a) {
     var _b;
     var value = _a.value, onChange = _a.onChange, props = __rest(_a, ["value", "onChange"]);
     var normalizeDate = function (dateValue) {
@@ -88,5 +88,5 @@ export function InputMaskDateInput(_a) {
             },
         });
     }, [currentYear]);
-    return (React.createElement(InputMaskInput, __assign({}, props, { mask: maskInstance, placeholder: (_b = props === null || props === void 0 ? void 0 : props.placeholder) !== null && _b !== void 0 ? _b : 'ДД.ММ.ГГГГ', value: inputValue, onAccept: handleAccept, onComplete: handleComplete })));
+    return (React.createElement(InputMask, __assign({}, props, { mask: maskInstance, placeholder: (_b = props === null || props === void 0 ? void 0 : props.placeholder) !== null && _b !== void 0 ? _b : 'ДД.ММ.ГГГГ', value: inputValue, onAccept: handleAccept, onComplete: handleComplete })));
 }

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

@@ -1,21 +1,5 @@
-import { InputProps as ParentInputProps } from '../../../component/component.interface';
-import { InputHint as ParentInputHint } from '../../../component/hint/component';
-import { InputHintType as ParentInputHintType } from '../../../component/hint/component.enums';
-import { InputHintProps as ParentInputHintProps } from '../../../component/hint/component.interface';
-import { InputMaskDateInput } from './input/component';
-import { InputMaskDateInputProps } from './input/component.interface';
-export declare const InputMaskDate: ((props: ParentInputProps) => import("react").JSX.Element) & {
-    Input: typeof InputMaskDateInput;
-    Hint: typeof ParentInputHint & {
-        Type: typeof ParentInputHintType;
-    };
-};
+import { InputMaskDateProps as ComponentProps } from './component.interface';
+export declare const InputMaskDate: (props: ComponentProps) => import("react").JSX.Element;
 export declare namespace InputMaskDate {
-    type Props = ParentInputProps;
-    namespace Input {
-        type Props = InputMaskDateInputProps;
-    }
-    namespace Hint {
-        type Props = ParentInputHintProps;
-    }
+    type Props = ComponentProps;
 }

package/components/actions/input/(mask)/(date)/component/index.js

@@ -1,11 +1,5 @@
-import { InputHint as ParentInputHint } from '../../../component/hint/component';
-import { InputHintType as ParentInputHintType } from '../../../component/hint/component.enums';
-import { InputMask as ParentInputMask } from '../../component';
-import { InputMaskDateInput } from './input/component';
-var ChildInputMask = function (props) { return ParentInputMask(props); };
-export var InputMaskDate = Object.assign(ChildInputMask, {
-    Input: InputMaskDateInput,
-    Hint: Object.assign(ParentInputHint, {
-        Type: ParentInputHintType,
-    }),
-});
+import { InputMaskDate as Component } from './component';
+var ChildComponent = function (props) {
+    return Component(props);
+};
+export var InputMaskDate = Object.assign(ChildComponent, {});

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

@@ -1,18 +1,5 @@
-import { InputSkeletonProps as ParentInputSkeletonProps } from '../../../skeleton/component.interface';
-import { InputHintSkeleton as ParentInputHintSkeleton } from '../../../skeleton/hint/component';
-import { InputHintSkeletonProps as ParentInputHintSkeletonProps } from '../../../skeleton/hint/component.interface';
-import { InputInputSkeleton as ParentInputInputSkeleton } from '../../../skeleton/input/component';
-import { InputInputSkeletonProps as ParentInputInputSkeletonProps } from '../../../skeleton/input/component.interface';
-export declare const InputMaskDateSkeleton: ((props: ParentInputSkeletonProps) => import("react").JSX.Element) & {
-    Input: typeof ParentInputInputSkeleton;
-    Hint: typeof ParentInputHintSkeleton;
-};
+import { InputSkeletonProps as ComponentProps } from '../../../skeleton/component.interface';
+export declare const InputMaskDateSkeleton: (props: ComponentProps) => import("react").JSX.Element;
 export declare namespace InputMaskDateSkeleton {
-    type Props = ParentInputSkeletonProps;
-    namespace Input {
-        type Props = ParentInputInputSkeletonProps;
-    }
-    namespace Hint {
-        type Props = ParentInputHintSkeletonProps;
-    }
+    type Props = ComponentProps;
 }

package/components/actions/input/(mask)/(date)/skeleton/index.js

@@ -1,10 +1,5 @@
-import { InputSkeleton as ParentInputSkeleton } from '../../../skeleton/component';
-import { InputHintSkeleton as ParentInputHintSkeleton } from '../../../skeleton/hint/component';
-import { InputInputSkeleton as ParentInputInputSkeleton } from '../../../skeleton/input/component';
-var ChildInputSkeleton = function (props) {
-    return ParentInputSkeleton(props);
+import { InputSkeleton as Component } from '../../../skeleton/component';
+var ChildComponent = function (props) {
+    return Component(props);
 };
-export var InputMaskDateSkeleton = Object.assign(ChildInputSkeleton, {
-    Input: ParentInputInputSkeleton,
-    Hint: ParentInputHintSkeleton,
-});
+export var InputMaskDateSkeleton = Object.assign(ChildComponent, {});

package/components/actions/input/(mask)/(phone)/component/component.d.ts

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

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

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+import { IMaskInputProps } from 'react-imask';
+export type InputMaskPhoneProps<C extends ElementType = 'input'> = IMaskInputProps<HTMLInputElement> & {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref' | 'type' | 'mask' | 'definitions' | 'prepare'>;

package/components/actions/input/(mask)/(phone)/component/{input/component.js → component.js}

@@ -21,11 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { InputMaskInput } from '../../../component/input/component';
-export function InputMaskPhoneInput(_a) {
+import { InputMask } from '../../component/component';
+export function InputMaskPhone(_a) {
     var _b;
     var props = __rest(_a, []);
-    return (React.createElement(InputMaskInput, __assign({}, props, { type: "tel", mask: '+7 (900) 000-00-00', definitions: {
+    return (React.createElement(InputMask, __assign({}, props, { type: "tel", mask: '+7 (900) 000-00-00', definitions: {
             '0': /[0-9]/,
         }, prepare: function (value, masked) {
             if (value.startsWith('8') && !masked.value) {

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

@@ -1,21 +1,5 @@
-import { InputProps as ParentInputProps } from '../../../component/component.interface';
-import { InputHint as ParentInputHint } from '../../../component/hint/component';
-import { InputHintType as ParentInputHintType } from '../../../component/hint/component.enums';
-import { InputHintProps as ParentInputHintProps } from '../../../component/hint/component.interface';
-import { InputMaskInputProps } from '../../component/input/component.interface';
-import { InputMaskPhoneInput as Component } from './input/component';
-export declare const InputMaskPhone: ((props: ParentInputProps) => import("react").JSX.Element) & {
-    Input: typeof Component;
-    Hint: typeof ParentInputHint & {
-        Type: typeof ParentInputHintType;
-    };
-};
+import { InputMaskPhoneProps, InputMaskPhoneProps as ParentComponentProps } from './component.interface';
+export declare const InputMaskPhone: (props: ParentComponentProps) => import("react").JSX.Element;
 export declare namespace InputMaskPhone {
-    type Props = ParentInputProps;
-    namespace Input {
-        type Props = InputMaskInputProps;
-    }
-    namespace Hint {
-        type Props = ParentInputHintProps;
-    }
+    type Props = InputMaskPhoneProps;
 }

package/components/actions/input/(mask)/(phone)/component/index.js

@@ -1,13 +1,3 @@
-import { InputHint as ParentInputHint } from '../../../component/hint/component';
-import { InputHintType as ParentInputHintType } from '../../../component/hint/component.enums';
-import { InputMask as ParentInputMask } from '../../component';
-import { InputMaskPhoneInput as Component } from './input/component';
-var InputMaskPhoneComponent = function (props) {
-    return ParentInputMask(props);
-};
-export var InputMaskPhone = Object.assign(InputMaskPhoneComponent, {
-    Input: Component,
-    Hint: Object.assign(ParentInputHint, {
-        Type: ParentInputHintType,
-    }),
-});
+import { InputMaskPhone as ParentComponent } from './component';
+var Component = function (props) { return ParentComponent(props); };
+export var InputMaskPhone = Object.assign(Component, {});

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

@@ -1,18 +1,5 @@
-import { InputSkeletonProps as ParentInputSkeletonProps } from '../../../skeleton/component.interface';
-import { InputHintSkeleton as ParentInputHintSkeleton } from '../../../skeleton/hint/component';
-import { InputHintSkeletonProps as ParentInputHintSkeletonProps } from '../../../skeleton/hint/component.interface';
-import { InputInputSkeleton as ParentInputInputSkeleton } from '../../../skeleton/input/component';
-import { InputInputSkeletonProps as ParentInputInputSkeletonProps } from '../../../skeleton/input/component.interface';
-export declare const InputMaskPhoneSkeleton: ((props: ParentInputSkeletonProps) => import("react").JSX.Element) & {
-    Input: typeof ParentInputInputSkeleton;
-    Hint: typeof ParentInputHintSkeleton;
-};
+import { InputSkeletonProps as ParentComponentProps } from '../../../skeleton/component.interface';
+export declare const InputMaskPhoneSkeleton: (props: ParentComponentProps) => import("react").JSX.Element;
 export declare namespace InputMaskPhoneSkeleton {
-    type Props = ParentInputSkeletonProps;
-    namespace Input {
-        type Props = ParentInputInputSkeletonProps;
-    }
-    namespace Hint {
-        type Props = ParentInputHintSkeletonProps;
-    }
+    type Props = ParentComponentProps;
 }

package/components/actions/input/(mask)/(phone)/skeleton/index.js

@@ -1,10 +1,5 @@
-import { InputSkeleton as ParentInputSkeleton } from '../../../skeleton/component';
-import { InputHintSkeleton as ParentInputHintSkeleton } from '../../../skeleton/hint/component';
-import { InputInputSkeleton as ParentInputInputSkeleton } from '../../../skeleton/input/component';
-var ChildInputSkeleton = function (props) {
-    return ParentInputSkeleton(props);
+import { InputSkeleton as ParentComponent } from '../../../skeleton/component';
+var Component = function (props) {
+    return ParentComponent(props);
 };
-export var InputMaskPhoneSkeleton = Object.assign(ChildInputSkeleton, {
-    Input: ParentInputInputSkeleton,
-    Hint: ParentInputHintSkeleton,
-});
+export var InputMaskPhoneSkeleton = Object.assign(Component, {});

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

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

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

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+import { IMaskInputProps } from 'react-imask';
+export type InputMaskProps<C extends ElementType = 'input'> = IMaskInputProps<HTMLInputElement> & {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/actions/input/{(select) → (mask)}/component/component.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
+import { IMaskInput } from 'react-imask';
 import { Input } from '../../component/component';
-import styles from './component.module.css';
-export function Select(_a) {
-    var ref = _a.ref, children = _a.children, rest = __rest(_a, ["ref", "children"]);
-    return (React.createElement(Input, __assign({}, rest, { ref: ref, className: classNames(styles.fieldset, rest === null || rest === void 0 ? void 0 : rest.className) }), children));
+export function InputMask(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || IMaskInput);
+    return (React.createElement(Input, __assign({}, rest, { as: Component, ref: rest === null || rest === void 0 ? void 0 : rest.ref, className: classNames('mosuk-input-mask', rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

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

@@ -1,21 +1,6 @@
-import { InputProps as ParentInputProps } from '../../component/component.interface';
-import { InputHint } from '../../component/hint/component';
-import { InputHintType } from '../../component/hint/component.enums';
-import { InputHintProps as ParentInputHintProps } from '../../component/hint/component.interface';
-import { InputMaskInput } from './input/component';
-import { InputMaskInputProps } from './input/component.interface';
-export declare const InputMask: ((props: ParentInputProps) => import("react").JSX.Element) & {
-    Input: typeof InputMaskInput;
-    Hint: typeof InputHint & {
-        Type: typeof InputHintType;
-    };
-};
+import { InputMask as Component } from './component';
+import { InputMaskProps as ComponentProps } from './component.interface';
+export declare const InputMask: typeof Component;
 export declare namespace InputMask {
-    type Props = ParentInputProps;
-    namespace Input {
-        type Props = InputMaskInputProps;
-    }
-    namespace Hint {
-        type Props = ParentInputHintProps;
-    }
+    type Props = ComponentProps;
 }

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

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

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

@@ -1,18 +1,6 @@
-import { InputSkeletonProps as ParentInputSkeletonProps } from '../../skeleton/component.interface';
-import { InputHintSkeleton as ParentInputHintSkeleton } from '../../skeleton/hint/component';
-import { InputHintSkeletonProps as ParentInputHintSkeletonProps } from '../../skeleton/hint/component.interface';
-import { InputInputSkeleton as ParentInputInputSkeleton } from '../../skeleton/input/component';
-import { InputInputSkeletonProps as ParentInputInputSkeletonProps } from '../../skeleton/input/component.interface';
-export declare const InputMaskSkeleton: ((props: ParentInputSkeletonProps) => import("react").JSX.Element) & {
-    Input: typeof ParentInputInputSkeleton;
-    Hint: typeof ParentInputHintSkeleton;
-};
+import { InputSkeleton as ParentInputSkeleton } from '../../skeleton/component';
+import { InputSkeletonProps as ParentComponentProps } from '../../skeleton/component.interface';
+export declare const InputMaskSkeleton: typeof ParentInputSkeleton;
 export declare namespace InputMaskSkeleton {
-    type Props = ParentInputSkeletonProps;
-    namespace Input {
-        type Props = ParentInputInputSkeletonProps;
-    }
-    namespace Hint {
-        type Props = ParentInputHintSkeletonProps;
-    }
+    type Props = ParentComponentProps;
 }

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

@@ -1,10 +1,2 @@
 import { InputSkeleton as ParentInputSkeleton } from '../../skeleton/component';
-import { InputHintSkeleton as ParentInputHintSkeleton } from '../../skeleton/hint/component';
-import { InputInputSkeleton as ParentInputInputSkeleton } from '../../skeleton/input/component';
-var ChildInputSkeleton = function (props) {
-    return ParentInputSkeleton(props);
-};
-export var InputMaskSkeleton = Object.assign(ChildInputSkeleton, {
-    Input: ParentInputInputSkeleton,
-    Hint: ParentInputHintSkeleton,
-});
+export var InputMaskSkeleton = Object.assign(ParentInputSkeleton, {});

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

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

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

@@ -0,0 +1,3 @@
+import { InputProps } from '../../component/component.interface';
+export interface InputSearchProps extends InputProps {
+}

package/components/actions/input/(search)/component/{input/component.js → component.js}

@@ -21,8 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useEffect, useRef, useState } from 'react';
-import { InputInput } from '../../../component/input/component';
-export function InputSearchInput(_a) {
+import { Input } from '../../component/component';
+export function InputSearch(_a) {
     var _b;
     var rest = __rest(_a, []);
     var timeoutRef = useRef(undefined);
@@ -51,5 +51,5 @@ export function InputSearchInput(_a) {
             }
         }, 500);
     };
-    return (React.createElement(InputInput, __assign({}, rest, { placeholder: (_b = rest === null || rest === void 0 ? void 0 : rest.placeholder) !== null && _b !== void 0 ? _b : 'Поиск...', value: searchValue, onChange: handleInputChange })));
+    return (React.createElement(Input, __assign({}, rest, { placeholder: (_b = rest === null || rest === void 0 ? void 0 : rest.placeholder) !== null && _b !== void 0 ? _b : 'Поиск...', value: searchValue, onChange: handleInputChange })));
 }

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

@@ -1,21 +1,6 @@
-import { InputProps as ParentInputProps } from '../../component/component.interface';
-import { InputHint as ParentInputHint } from '../../component/hint/component';
-import { InputHintType as ParentInputHintType } from '../../component/hint/component.enums';
-import { InputHintProps as ParentInputHintProps } from '../../component/hint/component.interface';
-import { InputSearchInput } from './input/component';
-import { InputSearchInputProps } from './input/component.interface';
-export declare const InputSearch: ((props: ParentInputProps) => import("react").JSX.Element) & {
-    Input: typeof InputSearchInput;
-    Hint: typeof ParentInputHint & {
-        Type: typeof ParentInputHintType;
-    };
-};
+import { InputSearch as Component } from './component';
+import { InputSearchProps as ComponentProps } from './component.interface';
+export declare const InputSearch: typeof Component;
 export declare namespace InputSearch {
-    type Props = ParentInputProps;
-    namespace Input {
-        type Props = InputSearchInputProps;
-    }
-    namespace Hint {
-        type Props = ParentInputHintProps;
-    }
+    type Props = ComponentProps;
 }

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

@@ -1,11 +1,2 @@
-import { Input as ParentInput } from '../../component/component';
-import { InputHint as ParentInputHint } from '../../component/hint/component';
-import { InputHintType as ParentInputHintType } from '../../component/hint/component.enums';
-import { InputSearchInput } from './input/component';
-var ChildInput = function (props) { return ParentInput(props); };
-export var InputSearch = Object.assign(ChildInput, {
-    Input: InputSearchInput,
-    Hint: Object.assign(ParentInputHint, {
-        Type: ParentInputHintType,
-    }),
-});
+import { InputSearch as Component } from './component';
+export var InputSearch = Object.assign(Component, {});

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

@@ -1,18 +1,6 @@
-import { InputSkeletonProps as ParentInputSkeletonProps } from '../../skeleton/component.interface';
-import { InputHintSkeleton as ParentInputHintSkeleton } from '../../skeleton/hint/component';
-import { InputHintSkeletonProps as ParentInputHintSkeletonProps } from '../../skeleton/hint/component.interface';
-import { InputInputSkeleton as ParentInputInputSkeleton } from '../../skeleton/input/component';
-import { InputInputSkeletonProps as ParentInputInputSkeletonProps } from '../../skeleton/input/component.interface';
-export declare const InputSearchSkeleton: ((props: ParentInputSkeletonProps) => import("react").JSX.Element) & {
-    Input: typeof ParentInputInputSkeleton;
-    Hint: typeof ParentInputHintSkeleton;
-};
+import { InputSkeleton as ParentComponent } from '../../skeleton/component';
+import { InputSkeletonProps as ParentComponentProps } from '../../skeleton/component.interface';
+export declare const InputSearchSkeleton: typeof ParentComponent;
 export declare namespace InputSearchSkeleton {
-    type Props = ParentInputSkeletonProps;
-    namespace Input {
-        type Props = ParentInputInputSkeletonProps;
-    }
-    namespace Hint {
-        type Props = ParentInputHintSkeletonProps;
-    }
+    type Props = ParentComponentProps;
 }

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

@@ -1,10 +1,2 @@
-import { InputSkeleton as ParentInputSkeleton } from '../../skeleton/component';
-import { InputHintSkeleton as ParentInputHintSkeleton } from '../../skeleton/hint/component';
-import { InputInputSkeleton as ParentInputInputSkeleton } from '../../skeleton/input/component';
-var ChildInputSkeleton = function (props) {
-    return ParentInputSkeleton(props);
-};
-export var InputSearchSkeleton = Object.assign(ChildInputSkeleton, {
-    Input: ParentInputInputSkeleton,
-    Hint: ParentInputHintSkeleton,
-});
+import { InputSkeleton as ParentComponent } from '../../skeleton/component';
+export var InputSearchSkeleton = Object.assign(ParentComponent, {});

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

@@ -1,4 +1,3 @@
-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;
+import React, { ElementType } from 'react';
+import { InputProps } from './component.interface';
+export declare function Input<C extends ElementType = 'input'>({ as, ...rest }: InputProps<C>): React.JSX.Element;

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

@@ -1,6 +1,5 @@
-import { FieldsetHTMLAttributes, RefObject } from 'react';
-export interface InputContextProps {
-}
-export interface InputProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    ref?: RefObject<HTMLFieldSetElement | null>;
-}
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type InputProps<C extends ElementType = 'input'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

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

@@ -21,11 +21,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import classNames from 'classnames';
-import React, { createContext } from 'react';
+import React, { useId } 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)));
+    var _b, _c;
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'input');
+    var id = (_b = rest === null || rest === void 0 ? void 0 : rest.id) !== null && _b !== void 0 ? _b : useId();
+    var name = (_c = rest === null || rest === void 0 ? void 0 : rest.name) !== null && _c !== void 0 ? _c : id;
+    return (React.createElement(Component, __assign({}, rest, { ref: rest === null || rest === void 0 ? void 0 : rest.ref, id: id, name: name, className: classNames('mosuk-input', styles.input, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }