mimir-ui-kit 0.0.1 → 0.0.8

package/dist/assets/styles/index.css

@@ -0,0 +1 @@
+@font-face{font-family:Montserrat;src:url(../fonts/585d10920d676fcd.woff2) format("woff2"),url(../fonts/3b9f59412b17ff93.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Montserrat;src:url(../fonts/f4d681a788c6d497.woff2) format("woff2"),url(../fonts/43b748f250df0f08.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Montserrat;src:url(../fonts/ee3db32f0aadef5d.woff2) format("woff2"),url(../fonts/1a738bfdbc1e4d9d.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Montserrat;src:url(../fonts/e51d2feb30084bc2.woff2) format("woff2"),url(../fonts/badaa6d1837432de.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Montserrat;src:url(../fonts/63611593e008a77c.woff2) format("woff2"),url(../fonts/3cdd7fabbe89d2b9.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Inter;src:url(../fonts/d080ae18fd04e52c.woff2) format("woff2");font-weight:400;font-style:normal;font-variant-numeric:slashed-zero}@font-face{font-family:Inter;src:url(../fonts/11d5bc9f0cad36d1.woff2) format("woff2");font-weight:700;font-style:normal;font-variant-numeric:slashed-zero}@font-face{font-family:Inter;src:url(../fonts/242d04bef81519ae.woff2) format("woff2");font-weight:500;font-style:normal;font-variant-numeric:slashed-zero}@font-face{font-family:Inter;src:url(../fonts/cac2ba46e8c8adc9.woff2) format("woff2");font-weight:600;font-style:normal;font-variant-numeric:slashed-zero}@supports (font-variation-settings: normal){:root{font-family:InterVariable,sans-serif}}*{margin:0;padding:0;border:0;outline:none}*,:after,:before{box-sizing:border-box}:active,:focus{outline:0}a,a:visited,a:hover{text-decoration:none}a:active,a:focus{outline:0}aside,footer,header,nav{display:block}body,html{width:100%;height:100%;font-size:100%;line-height:1}button,input,textarea,select{font-family:inherit}input::-ms-clear{display:none}button{cursor:pointer}button::-moz-focus-inner{padding:0;border:0}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--color-typo-brand);transition:background-color 5000s ease-in-out 0s}:root{--sapphire-100: #2355d7;--sapphire-90: #3564df;--sapphire-80: #4b75e2;--sapphire-70: #6186e6;--sapphire-60: #7797e9;--sapphire-50: #8da7ed;--sapphire-40: #9fb7f4;--sapphire-30: #b9caf4;--sapphire-20: #cfdaf7;--sapphire-10: #e5ebfb;--citrine-100: #ff7900;--citrine-90: #ff861a;--citrine-80: #ff9433;--citrine-70: #ffa14d;--citrine-60: #ffaf66;--citrine-50: #ffbc80;--citrine-40: #ffc999;--citrine-30: #ffd7b2;--citrine-20: #ffe4cc;--citrine-10: #fff2e5;--magenta-100: #bc2251;--magenta-90: #d8275d;--magenta-80: #dc3d6d;--magenta-70: #e15781;--magenta-60: #e46c91;--magenta-50: #e986a4;--magenta-40: #ed9cb4;--magenta-30: #f2b6c8;--magenta-20: #f6cbd8;--magenta-10: #fae5ec;--black-100: #000;--black-95: #0d0d0d;--black-90: #1a1a1a;--black-85: #262626;--black-80: #333;--black-75: #404040;--black-70: #4d4d4d;--black-65: #595959;--black-60: #666;--black-55: #737373;--black-50: #808080;--black-45: #8c8c8c;--black-40: #999;--black-35: #a6a6a6;--black-30: #b3b3b3;--black-25: #bfbfbf;--black-20: #ccc;--black-15: #d9d9d9;--black-10: #e6e6e6;--black-5: #f2f2f2;--white: #fff;--dark-blue: #0a38af;--blue-40: #a7bbef;--blue-20: #d3ddf7;--green: #1b770c;--red-tag: #f01406;--success-normal: #23b413;--success-bg-hover: #d5fbe2;--success-bg: #ebfdf1;--alarm-normal: #fdc023;--alarm-bg-hover: #fff0c7;--alarm-bg: #fff6de;--error-normal: #e64646;--error-bg-hover: #fadbdb;--error-bg: #fbe3e3;--disabled: #b3b3b3;--light-text: var(--white);--dark-text: var(--black-100);--sapphire-normal: var(--sapphire-100);--sapphire-hover: #1b41a3;--sapphire-active: #122c70;--citrine-normal: var(--citrine-100);--citrine-hover: #e56d00;--citrine-active: #cc6100;--asphalt-border: var(--black-30);--asphalt-normal: var(--black-80);--asphalt-hover: var(--black-90);--asphalt-active: var(--black-100);--gray-normal: var(--black-5);--gray-hover: var(--black-10);--gray-active: var(--black-80);--white-normal: var(--white);--white-hover: var(--black-5);--white-transparent: rgb(255 255 255 / 40%);--white-active: var(--black-80);--red-normal: var(--error-normal);--red-hover: #e33030;--red-active: #dc1e1e;--green-normal: var(--green);--green-hover: #16610a;--green-active: #114a08;--counter-text: #ffa066;--button-height-xs: 24px;--button-height-s: 32px;--button-height-m: 40px;--button-height-l: 48px;--button-height-xl: 56px;--button-height-xxl: 64px;--control-default: var(--sapphire-20);--control-hover: var(--sapphire-40);--control-selected: var(--sapphire-100);--control-disabled: var(--black-10);--font-inter: "Inter", sans-serif;--font-montserrat: "Montserrat", sans-serif;--font-weight-text-regular: 400;--font-weight-text-medium: 500;--font-weight-text-semibold: 600;--font-weight-text-bold: 700;--font-weight-text-extrabold: 800;--font-weight-text-black: 900;--size-text-xs2: 8px;--size-text-xs: 10px;--size-text-s: 12px;--size-text-m: 14px;--size-text-l: 16px;--size-text-xl: 20px;--size-text-xl2: 24px;--size-text-2xl: 28px;--size-text-xl3: 32px;--size-text-xl4: 48px;--size-text-xl5: 72px;--size-text-xl6: 96px;--line-height-text-2xs: 1em;--line-height-text-xs: 1.1em;--line-height-text-s: 1.2em;--line-height-text-m: 1.3em;--line-height-text-l: 1.4em;--line-height-text-xl: 1.5em;--control-radius: 6px;--control-radius-l: 24px;--control-input-radius: 12px;--control-border-width: 1px;--control-height-xl: 60px;--control-height-xxl: 60px;--control-height-l: var(--space-4xl);--control-height-m: var(--space-3xl);--control-height-s: var(--space-2xl);--control-height-xs: var(--space-xl);--control-box-size-s: var(--space-s);--control-box-size-m: var(--space-m);--control-box-size-l: var(--space-l);--control-space-l: var(--space-xl);--control-space-m: var(--space-l);--control-space-s: var(--space-m);--control-space-xs: var(--space-s);--control-text-size-2xl: var(--size-text-xl);--control-text-size-xl: var(--size-text-xl3);--control-text-size-l: var(--size-text-l);--control-text-size-m: var(--size-text-m);--control-text-size-s: var(--size-text-s);--control-text-size-xs: var(--size-text-xs);--space-3xs: 2px;--space-2xs: 4px;--space-xs: 8px;--space-s: 12px;--space-m: 16px;--space-l: 20px;--space-xl: 24px;--space-2xl: 32px;--space-xxl: 40px;--space-3xl: 44px;--space-4xl: 48px;--space-4xxl: 64px;--space-5xl: 72px;--space-6xl: 96px;--container-width-xs: 375px;--container-width-s: 767px;--container-width-m: 960px;--container-width-l: 1280px;--container-width-xl: 1440px;--container-width-xxl: 1920px}@supports (font-variation-settings: normal){:root{font-family:Inter,sans-serif}}:root{font-feature-settings:"zero"}body{font-family:Inter,sans-serif;font-variant-numeric:slashed-zero;background-color:var(--black-5);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{display:flex;flex-direction:column;min-height:100%}

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

@@ -0,0 +1,33 @@
+import { StoryObj } from '@storybook/react';
+import { EButtonSize, EButtonVariant } from './constants';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+        className?: string;
+        variant?: EButtonVariant | `${EButtonVariant}`;
+        size?: EButtonSize | `${EButtonSize}`;
+        disabled?: boolean;
+        full?: boolean;
+        formId?: string;
+    }, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+    args: {
+        onClick: import('@vitest/spy').Mock<[event: import('react').MouseEvent<HTMLButtonElement, MouseEvent>], void>;
+        children: string;
+        variant: EButtonVariant.PrimaryCitrine;
+        size: EButtonSize.M;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const PrimarySapphire: Story;
+export declare const PrimaryCitrine: Story;
+export declare const SecondaryAsphalt: Story;
+export declare const SecondaryGray: Story;
+export declare const SecondaryWhite: Story;
+export declare const SecondaryRed: Story;

package/dist/components/Button/constants.d.ts

@@ -0,0 +1,16 @@
+export declare enum EButtonVariant {
+    PrimarySapphire = "primary-sapphire",
+    PrimaryCitrine = "primary-citrine",
+    SecondaryAsphalt = "secondary-asphalt",
+    SecondaryGray = "secondary-gray",
+    SecondaryWhite = "secondary-white",
+    SecondaryRed = "secondary-red"
+}
+export declare enum EButtonSize {
+    XS = "xs",
+    S = "s",
+    M = "m",
+    L = "l",
+    XL = "xl",
+    XXL = "xxl"
+}

package/dist/components/Button/constants.js

@@ -0,0 +1,5 @@
+var e = /* @__PURE__ */ ((r) => (r.PrimarySapphire = "primary-sapphire", r.PrimaryCitrine = "primary-citrine", r.SecondaryAsphalt = "secondary-asphalt", r.SecondaryGray = "secondary-gray", r.SecondaryWhite = "secondary-white", r.SecondaryRed = "secondary-red", r))(e || {}), y = /* @__PURE__ */ ((r) => (r.XS = "xs", r.S = "s", r.M = "m", r.L = "l", r.XL = "xl", r.XXL = "xxl", r))(y || {});
+export {
+  y as EButtonSize,
+  e as EButtonVariant
+};

package/dist/components/Button/index.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps } from 'react';
+import { EButtonSize, EButtonVariant } from './constants';
+
+type TProps = ComponentProps<'button'> & {
+    className?: string;
+    /**
+     * Button theme. Responsible for the visual (in a frame, without styles, color opposite to the theme of the application, etc.)
+     */
+    variant?: EButtonVariant | `${EButtonVariant}`;
+    /**
+     * Button size according to design system
+     */
+    size?: EButtonSize | `${EButtonSize}`;
+    /**
+     * Flag responsible for the operation of the button
+     */
+    disabled?: boolean;
+    /**
+     * Enlarges the button to the full width
+     */
+    full?: boolean;
+    formId?: string;
+};
+/**
+ * Компонент кнопки, который можно настраивать с различными темами и размерами.
+
+ */
+export declare const Button: import('react').ForwardRefExoticComponent<Omit<TProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Button/index.js

@@ -0,0 +1,30 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { c as p } from "../../index-DIxK0V-G.js";
+import '../../index2.css';const y = "_button_a92xc_1", u = "_xs_a92xc_28", f = "_s_a92xc_34", b = "_m_a92xc_40", h = "_l_a92xc_46", N = "_xl_a92xc_52", w = "_xxl_a92xc_59", g = "_full_a92xc_141", B = "_disabled_a92xc_145", a = {
+  button: y,
+  xs: u,
+  s: f,
+  m: b,
+  l: h,
+  xl: N,
+  xxl: w,
+  "primary-sapphire": "_primary-sapphire_a92xc_66",
+  "primary-citrine": "_primary-citrine_a92xc_76",
+  "secondary-asphalt": "_secondary-asphalt_a92xc_86",
+  "secondary-gray": "_secondary-gray_a92xc_96",
+  "secondary-white": "_secondary-white_a92xc_106",
+  "secondary-red": "_secondary-red_a92xc_116",
+  full: g,
+  disabled: B
+}, j = m((c, _) => {
+  const { size: o = "m", variant: t, full: r, children: l, className: n, formId: e, ...s } = c, d = {
+    [a.full]: r,
+    [a.disabled]: s.disabled
+  }, x = [s.disabled ? "" : a[t ?? ""], a[o], n];
+  return /* @__PURE__ */ i("button", { form: e, ...s, ref: _, className: p(a.button, d, x), children: l });
+});
+j.displayName = "Button";
+export {
+  j as Button
+};

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

@@ -0,0 +1,329 @@
+import { StoryObj } from '@storybook/react';
+import { EInputSize, EInputStatus } from './constants';
+
+declare const meta: {
+    title: string;
+    component: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<{
+        form?: string | undefined;
+        slot?: string | undefined;
+        style?: import('react').CSSProperties | undefined;
+        title?: string | undefined;
+        pattern?: string | undefined;
+        disabled?: boolean | undefined;
+        formAction?: string | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
+        formEncType?: string | undefined;
+        formMethod?: string | undefined;
+        formNoValidate?: boolean | undefined;
+        formTarget?: string | undefined;
+        name?: string | undefined;
+        type?: import('react').HTMLInputTypeAttribute | undefined;
+        value?: string | readonly string[] | number | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoFocus?: boolean | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        tabIndex?: number | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: import('react').AriaRole | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        children?: import('react').ReactNode | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCopyCapture?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCut?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCutCapture?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPaste?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPasteCapture?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCompositionEnd?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionEndCapture?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStart?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStartCapture?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdate?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdateCapture?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
+        onFocus?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
+        onFocusCapture?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
+        onBlur?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
+        onBlurCapture?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
+        onChange?: import('react').ChangeEventHandler<HTMLInputElement> | undefined;
+        onChangeCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInput?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInputCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onInput?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onInputCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onReset?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onResetCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onSubmit?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onSubmitCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onInvalid?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onInvalidCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onLoad?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onError?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onErrorCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onKeyDown?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyDownCapture?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPress?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPressCapture?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUp?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUpCapture?: import('react').KeyboardEventHandler<HTMLInputElement> | undefined;
+        onAbort?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onAbortCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlay?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThrough?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThroughCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChange?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChangeCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptied?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptiedCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onEncrypted?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onEncryptedCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onEnded?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onEndedCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedData?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedDataCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadata?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadataCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStart?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStartCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onPause?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onPauseCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onPlay?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onPlaying?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayingCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onProgress?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onProgressCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChange?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChangeCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onResize?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onResizeCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeked?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekedCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeking?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekingCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onStalled?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onStalledCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspend?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspendCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdate?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdateCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChange?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChangeCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onWaiting?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onWaitingCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onAuxClick?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onAuxClickCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onClick?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onClickCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenu?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenuCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClick?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClickCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onDrag?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnd?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragEndCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnter?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnterCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragExit?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragExitCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeave?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeaveCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragOver?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragOverCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragStart?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDragStartCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDrop?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onDropCapture?: import('react').DragEventHandler<HTMLInputElement> | undefined;
+        onMouseDown?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseDownCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseEnter?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseLeave?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMove?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMoveCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOut?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOutCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOver?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOverCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUp?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUpCapture?: import('react').MouseEventHandler<HTMLInputElement> | undefined;
+        onSelect?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onSelectCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+        onTouchCancel?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchCancelCapture?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEnd?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEndCapture?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMove?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMoveCapture?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStart?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStartCapture?: import('react').TouchEventHandler<HTMLInputElement> | undefined;
+        onPointerDown?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerDownCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMove?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMoveCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUp?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUpCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancel?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancelCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerEnter?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerLeave?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOver?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOverCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOut?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOutCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCaptureCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
+        onScroll?: import('react').UIEventHandler<HTMLInputElement> | undefined;
+        onScrollCapture?: import('react').UIEventHandler<HTMLInputElement> | undefined;
+        onWheel?: import('react').WheelEventHandler<HTMLInputElement> | undefined;
+        onWheelCapture?: import('react').WheelEventHandler<HTMLInputElement> | undefined;
+        onAnimationStart?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEnd?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIteration?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
+        onTransitionEnd?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+        list?: string | undefined;
+        accept?: string | undefined;
+        alt?: string | undefined;
+        autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;
+        capture?: boolean | "user" | "environment" | undefined;
+        checked?: boolean | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        height?: number | string | undefined;
+        max?: number | string | undefined;
+        maxLength?: number | undefined;
+        min?: number | string | undefined;
+        minLength?: number | undefined;
+        multiple?: boolean | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        src?: string | undefined;
+        step?: number | string | undefined;
+        width?: number | string | undefined;
+    } & {
+        className?: string;
+        label?: string;
+        status?: EInputStatus | `${EInputStatus}`;
+        caption?: string;
+        autofocus?: boolean;
+        readonly?: boolean;
+        addonLeft?: import('react').ReactNode;
+        addonRight?: import('react').ReactNode;
+        size?: EInputSize | `${EInputSize}`;
+    } & {
+        children?: import('react').ReactNode | undefined;
+    } & import('react').RefAttributes<HTMLInputElement>>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {};
+    args: {
+        onClick: import('@vitest/spy').Mock<[event: import('react').MouseEvent<HTMLInputElement, MouseEvent>], void>;
+        size: EInputSize.L;
+        status: EInputStatus.Alert;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Alert: Story;
+export declare const Success: Story;

package/dist/components/Input/constants.d.ts

@@ -0,0 +1,10 @@
+export declare enum EInputStatus {
+    Alert = "alert",
+    Success = "success",
+    Default = "default"
+}
+export declare enum EInputSize {
+    S = "s",
+    M = "m",
+    L = "l"
+}

package/dist/components/Input/constants.js

@@ -0,0 +1,5 @@
+var e = /* @__PURE__ */ ((r) => (r.Alert = "alert", r.Success = "success", r.Default = "default", r))(e || {}), l = /* @__PURE__ */ ((r) => (r.S = "s", r.M = "m", r.L = "l", r))(l || {});
+export {
+  l as EInputSize,
+  e as EInputStatus
+};

package/dist/components/Input/index.d.ts

@@ -0,0 +1,77 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { EInputSize, EInputStatus } from './constants';
+
+type HTMLInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'size'>;
+export type TProps = HTMLInputProps & {
+    className?: string;
+    /**
+     * An optional label for the input.
+     */
+    label?: string;
+    /**
+     * The status of the input. Can be one of 'alert', 'success', or 'default'.
+     */
+    status?: EInputStatus | `${EInputStatus}`;
+    /**
+     * An optional caption to provide additional information or instructions for the input.
+     */
+    caption?: string;
+    /**
+     *  Whether the input should be focused automatically on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * Whether the input should be read-only.
+     */
+    readonly?: boolean;
+    /**
+     * An optional React node to display on the left side of the input.
+     */
+    addonLeft?: ReactNode;
+    /**
+     * An optional React node to display on the right side of the input.
+     */
+    addonRight?: ReactNode;
+    /**
+     *  The size of the input.
+     */
+    size?: EInputSize | `${EInputSize}`;
+};
+export declare const Input: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<HTMLInputProps & {
+    className?: string;
+    /**
+     * An optional label for the input.
+     */
+    label?: string;
+    /**
+     * The status of the input. Can be one of 'alert', 'success', or 'default'.
+     */
+    status?: EInputStatus | `${EInputStatus}`;
+    /**
+     * An optional caption to provide additional information or instructions for the input.
+     */
+    caption?: string;
+    /**
+     *  Whether the input should be focused automatically on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * Whether the input should be read-only.
+     */
+    readonly?: boolean;
+    /**
+     * An optional React node to display on the left side of the input.
+     */
+    addonLeft?: ReactNode;
+    /**
+     * An optional React node to display on the right side of the input.
+     */
+    addonRight?: ReactNode;
+    /**
+     *  The size of the input.
+     */
+    size?: EInputSize | `${EInputSize}`;
+} & {
+    children?: ReactNode | undefined;
+} & import('react').RefAttributes<HTMLInputElement>>>;
+export {};