mimir-ui-kit 0.0.1 → 0.0.7

package/dist/assets/index.css

@@ -0,0 +1,2 @@
+._inputWrapper_w9lgy_1{display:inline-flex;flex-direction:column;width:100%;height:var(--input-height);padding:var(--input-space);background-color:var(--black-5);border-radius:6px}._label_w9lgy_11{margin-bottom:2px;color:var(--black-60);font-size:var(--size-text-s)}._label_w9lgy_11:first-letter{text-transform:uppercase}._inputBody_w9lgy_20{--caption-margin-left: calc(var(--input-space) + var(--control-border-width));--counter-button-icon-color: var(--color-control-typo-ghost);--counter-button-background: transparent;--counter-offset: 0;--clear-button-color: var(--color-control-typo-clear);display:flex;align-items:center;border-radius:var(--control-input-radius);outline:var(--control-border-width) solid var(--container-border-color)}._xs_w9lgy_32{--label-offset: var(--space-2xs);--caption-offset: var(--space-2xs);--input-height: var(--control-height-xs);--input-font-size: var(--control-text-size-xs);--input-space: calc(var(--control-space-xs) * .5)}._s_w9lgy_40{--label-offset: var(--space-2xs);--caption-offset: var(--space-2xs);--input-height: var(--control-height-s);--input-font-size: var(--control-text-size-s);--input-space: calc(var(--control-space-s) * .5)}._m_w9lgy_48{--label-offset: var(--space-xs);--caption-offset: var(--space-xs);--input-height: var(--space-4xl);--input-font-size: var(--control-text-size-m);--input-space: calc(var(--control-space-m) * .5)}._l_w9lgy_11{--label-offset: var(--space-xs);--caption-offset: var(--space-xs);--input-height: var(--space-4xxl);--input-font-size: var(--control-text-size-2xl);--input-space: calc(var(--control-space-l) * .5)}._addonLeft_w9lgy_64,._addonRight_w9lgy_65{display:flex}._withAddonLeft_w9lgy_69{padding-left:8px}._withAddonRight_w9lgy_73{padding-right:8px}._input_w9lgy_1{width:100%;color:var(--dark-text);font-size:var(--input-font-size);font-family:var(--font-inter);letter-spacing:-.42px;background:none;border:none;outline:none;font-feature-settings:"zero"}
+ 

package/dist/assets/index2.css

@@ -0,0 +1 @@
+._button_a92xc_1{--button-loader-color: var(--button-color);--button-cursor: pointer;position:relative;display:inline-block;flex-shrink:0;box-sizing:border-box;max-width:100%;height:var(--button-height);padding:0 var(--button-space);overflow:hidden;color:var(--button-color);font-weight:600;font-size:14px;font-family:var(--font-inter);line-height:16px;white-space:nowrap;text-decoration:none;text-overflow:ellipsis;background:var(--button-bg-color);border:none;border-radius:var(--control-radius);cursor:var(--button-cursor);transition:background-color .3s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}._xs_a92xc_28{--button-height: var(--button-height-xs);--button-font-size: var(--control-text-size-xs);--button-space: var(--control-space-xs)}._s_a92xc_34{--button-height: var(--button-height-s);--button-font-size: var(--control-text-size-s);--button-space: var(--control-space-s)}._m_a92xc_40{--button-height: var(--button-height-m);--button-font-size: var(--control-text-size-m);--button-space: var(--control-space-m)}._l_a92xc_46{--button-height: var(--button-height-l);--button-font-size: var(--control-text-size-l);--button-space: var(--control-space-l)}._xl_a92xc_52{--button-height: var(--button-height-xl);--button-space: var(--control-space-l);font-weight:var(--font-weight-text-medium);font-size:var(--size-text-l)}._xxl_a92xc_59{--button-height: var(--button-height-xxl);--button-space: var(--control-space-xxl);font-weight:var(--font-weight-text-medium);font-size:var(--size-text-l)}._primary-sapphire_a92xc_66{--button-bg-color: var(--sapphire-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--sapphire-active);--button-bg-color-hover: var(--sapphire-hover);--button-color: var(--light-text);--button-border: transparent}._primary-citrine_a92xc_76{--button-bg-color: var(--citrine-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--citrine-active);--button-bg-color-hover: var(--citrine-hover);--button-color: var(--light-text);--button-border: transparent}._secondary-asphalt_a92xc_86{--button-bg-color: var(--asphalt-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--asphalt-active);--button-bg-color-hover: var(--asphalt-hover);--button-color: var(--light-text);--button-border: transparent}._secondary-gray_a92xc_96{--button-bg-color: var(--gray-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--gray-active);--button-bg-color-hover: var(--gray-hover);--button-color: var(--dark-text);--button-border: transparent}._secondary-white_a92xc_106{--button-bg-color: var(--white-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--white-active);--button-bg-color-hover: var(--white-hover);--button-color: var(--dark-text);--button-border: transparent}._secondary-red_a92xc_116{--button-bg-color: var(--red-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--red-active);--button-bg-color-hover: var(--red-hover);--button-color: var(--light-text);--button-border: transparent}._button_a92xc_1:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._button_a92xc_1:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._button_a92xc_1:focus{color:var(--button-color-active);background:var(--button-bg-color-active)}._full_a92xc_141{width:100%}._disabled_a92xc_145{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_a92xc_145:hover,._disabled_a92xc_145:active,._disabled_a92xc_145:focus{color:var(--light-text);background-color:var(--disabled)}

package/dist/assets/scss/index.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";*{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 '../../assets/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 {};