mimir-ui-kit 0.0.10 → 0.0.12

package/dist/assets/styles/index.css

@@ -0,0 +1 @@
+@font-face{font-weight:400;font-family:Montserrat;font-style:normal;src:url(../fonts/585d10920d676fcd.woff2) format("woff2"),url(../fonts/3b9f59412b17ff93.woff) format("woff")}@font-face{font-weight:700;font-family:Montserrat;font-style:normal;src:url(../fonts/f4d681a788c6d497.woff2) format("woff2"),url(../fonts/43b748f250df0f08.woff) format("woff")}@font-face{font-weight:300;font-family:Montserrat;font-style:normal;src:url(../fonts/ee3db32f0aadef5d.woff2) format("woff2"),url(../fonts/1a738bfdbc1e4d9d.woff) format("woff")}@font-face{font-weight:500;font-family:Montserrat;font-style:normal;src:url(../fonts/e51d2feb30084bc2.woff2) format("woff2"),url(../fonts/badaa6d1837432de.woff) format("woff")}@font-face{font-weight:600;font-family:Montserrat;font-style:normal;src:url(../fonts/63611593e008a77c.woff2) format("woff2"),url(../fonts/3cdd7fabbe89d2b9.woff) format("woff")}@font-face{font-weight:400;font-family:Inter;font-style:normal;src:url(../fonts/d080ae18fd04e52c.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:700;font-family:Inter;font-style:normal;src:url(../fonts/11d5bc9f0cad36d1.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:500;font-family:Inter;font-style:normal;src:url(../fonts/242d04bef81519ae.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:600;font-family:Inter;font-style:normal;src:url(../fonts/cac2ba46e8c8adc9.woff2) format("woff2");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-active: #ebfdf1;--alarm-normal: #fdc023;--alarm-bg-hover: #fff0c7;--alarm-bg-active: #fff6de;--error-normal: #e64646;--error-bg-hover: #fadbdb;--error-bg-active: #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-xxl: var(--space-xl);--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;--box-shadow-active: 0 0 2px var(--sapphire-normal)}@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,67 @@
+import { StoryObj } from '@storybook/react';
+import { EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonForm } from './constants';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<(Omit<import('./types').TButtonDefaultFormProps & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+        className?: string;
+        disabled?: boolean;
+        rightIcon?: import('react').ReactNode;
+        leftIcon?: import('react').ReactNode;
+        full?: boolean;
+        formId?: string;
+    }, "ref"> | Omit<import('./types').TButtonRoundFormProps & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+        className?: string;
+        disabled?: boolean;
+        rightIcon?: import('react').ReactNode;
+        leftIcon?: import('react').ReactNode;
+        full?: boolean;
+        formId?: string;
+    }, "ref">) & import('react').RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            options: (EButtonVariantDefault | EButtonVariantRound)[];
+            control: {
+                type: "select";
+            };
+            description: string;
+        };
+        size: {
+            options: EButtonSize[];
+            control: {
+                type: "select";
+            };
+            description: string;
+        };
+        form: {
+            options: EButtonForm[];
+            control: {
+                type: "select";
+            };
+            description: string;
+        };
+    };
+    args: {
+        onClick: import('@vitest/spy').Mock<[event: import('react').MouseEvent<HTMLButtonElement, MouseEvent>], void>;
+        children: string;
+        form: EButtonForm.DefaultButton;
+        variant: EButtonVariantDefault.PrimaryCitrine;
+        size: EButtonSize.M;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DefaultPrimarySapphire: Story;
+export declare const DefaultPrimaryCitrine: Story;
+export declare const DefaultSecondaryAsphalt: Story;
+export declare const DefaultSecondaryGray: Story;
+export declare const DefaultSecondaryWhite: Story;
+export declare const DefaultSecondaryRed: Story;
+export declare const DefaultWithIcons: Story;
+export declare const RoundBlack: Story;
+export declare const RoundGray: Story;
+export declare const RoundWhite: Story;

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

@@ -0,0 +1,25 @@
+export declare enum EButtonVariantDefault {
+    PrimarySapphire = "primary-sapphire",
+    PrimaryCitrine = "primary-citrine",
+    SecondaryAsphalt = "secondary-asphalt",
+    SecondaryGray = "secondary-gray",
+    SecondaryWhite = "secondary-white",
+    SecondaryRed = "secondary-red"
+}
+export declare enum EButtonVariantRound {
+    Black = "black",
+    Gray = "gray",
+    White = "white"
+}
+export declare enum EButtonSize {
+    XS = "xs",
+    S = "s",
+    M = "m",
+    L = "l",
+    XL = "xl",
+    XXL = "xxl"
+}
+export declare enum EButtonForm {
+    DefaultButton = "default-button",
+    RoundButton = "round-button"
+}

package/dist/components/Button/constants.js

@@ -0,0 +1,7 @@
+var y = /* @__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))(y || {}), e = /* @__PURE__ */ ((r) => (r.Black = "black", r.Gray = "gray", r.White = "white", r))(e || {}), c = /* @__PURE__ */ ((r) => (r.XS = "xs", r.S = "s", r.M = "m", r.L = "l", r.XL = "xl", r.XXL = "xxl", r))(c || {}), d = /* @__PURE__ */ ((r) => (r.DefaultButton = "default-button", r.RoundButton = "round-button", r))(d || {});
+export {
+  d as EButtonForm,
+  c as EButtonSize,
+  y as EButtonVariantDefault,
+  e as EButtonVariantRound
+};

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

@@ -0,0 +1,84 @@
+import { ComponentProps, ReactNode } from 'react';
+import { TButtonDefaultFormProps, TButtonRoundFormProps } from './types';
+
+export type TProps = (TButtonDefaultFormProps | TButtonRoundFormProps) & ComponentProps<'button'> & {
+    /**
+     * Класс, применяемый к корневому элементу кнопки.
+     */
+    className?: string;
+    /**
+     * Флаг, указывающий, отключена ли кнопка.
+     */
+    disabled?: boolean;
+    /**
+     * Иконка справа.
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Иконка слева.
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Флаг, указывающий, что кнопка занимает все доступное пространство.
+     */
+    full?: boolean;
+    /**
+     * Идентификатор формы, к которой привязана кнопка.
+     */
+    formId?: string;
+};
+/**
+ * Компонент кнопки, который можно настраивать с различными темами и размерами.
+
+ */
+export declare const Button: import('react').ForwardRefExoticComponent<(Omit<TButtonDefaultFormProps & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Класс, применяемый к корневому элементу кнопки.
+     */
+    className?: string;
+    /**
+     * Флаг, указывающий, отключена ли кнопка.
+     */
+    disabled?: boolean;
+    /**
+     * Иконка справа.
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Иконка слева.
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Флаг, указывающий, что кнопка занимает все доступное пространство.
+     */
+    full?: boolean;
+    /**
+     * Идентификатор формы, к которой привязана кнопка.
+     */
+    formId?: string;
+}, "ref"> | Omit<TButtonRoundFormProps & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Класс, применяемый к корневому элементу кнопки.
+     */
+    className?: string;
+    /**
+     * Флаг, указывающий, отключена ли кнопка.
+     */
+    disabled?: boolean;
+    /**
+     * Иконка справа.
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Иконка слева.
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Флаг, указывающий, что кнопка занимает все доступное пространство.
+     */
+    full?: boolean;
+    /**
+     * Идентификатор формы, к которой привязана кнопка.
+     */
+    formId?: string;
+}, "ref">) & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/index.js

@@ -0,0 +1,53 @@
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { c as h } from "../../index-DIxK0V-G.js";
+import { EButtonVariantDefault as b, EButtonForm as g } from "./constants.js";
+import '../../index4.css';const w = "_button_1yux6_1", N = "_xs_1yux6_29", B = "_s_1yux6_37", k = "_m_1yux6_45", I = "_l_1yux6_53", j = "_xl_1yux6_61", D = "_xxl_1yux6_70", E = "_black_1yux6_140", P = "_gray_1yux6_149", v = "_white_1yux6_158", z = "_full_1yux6_182", C = "_disabled_1yux6_186", t = {
+  button: w,
+  xs: N,
+  s: B,
+  m: k,
+  l: I,
+  xl: j,
+  xxl: D,
+  "default-button": "_default-button_1yux6_78",
+  "primary-sapphire": "_primary-sapphire_1yux6_78",
+  "primary-citrine": "_primary-citrine_1yux6_87",
+  "secondary-asphalt": "_secondary-asphalt_1yux6_96",
+  "secondary-gray": "_secondary-gray_1yux6_105",
+  "secondary-white": "_secondary-white_1yux6_114",
+  "secondary-red": "_secondary-red_1yux6_123",
+  "round-button": "_round-button_1yux6_133",
+  black: E,
+  gray: P,
+  white: v,
+  full: z,
+  disabled: C,
+  "right-icon": "_right-icon_1yux6_197",
+  "left-icon": "_left-icon_1yux6_198"
+}, F = p((n, r) => {
+  const {
+    size: l = "m",
+    variant: e = b.PrimarySapphire,
+    form: c = g.DefaultButton,
+    full: u,
+    children: i,
+    className: y,
+    formId: x,
+    rightIcon: s,
+    leftIcon: _,
+    ...o
+  } = n, d = {
+    [t.full]: u,
+    [t.disabled]: o.disabled
+  }, m = [o.disabled ? "" : t[e ?? ""], t[c ?? ""], t[l], y];
+  return /* @__PURE__ */ f("button", { form: x, ...o, ref: r, className: h(t.button, d, m), children: [
+    _ && /* @__PURE__ */ a("span", { className: t["left-icon"], children: _ }),
+    i,
+    s && /* @__PURE__ */ a("span", { className: t["right-icon"], children: s })
+  ] });
+});
+F.displayName = "Button";
+export {
+  F as Button
+};

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

@@ -0,0 +1,14 @@
+import { EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonForm } from './constants';
+
+type TButtonRoundFormSize = Exclude<EButtonSize, 'xxl'> & Exclude<EButtonSize, 'xl'>;
+export type TButtonDefaultFormProps = {
+    form: EButtonForm.DefaultButton;
+    variant?: EButtonVariantDefault | `${EButtonVariantDefault}`;
+    size?: EButtonSize | `${EButtonSize}`;
+};
+export type TButtonRoundFormProps = {
+    form: EButtonForm.RoundButton;
+    variant?: EButtonVariantRound | `${EButtonVariantRound}`;
+    size?: TButtonRoundFormSize | `${TButtonRoundFormSize}`;
+};
+export {};

package/dist/components/Button/types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TProps as TInputProps } from '.';
+
+declare const meta: Meta<TInputProps>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Alarm: Story;
+export declare const Success: Story;
+export declare const SmallSize: Story;
+export declare const MediumSize: Story;
+export declare const LargeSize: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,12 @@
+export declare enum EInputVariant {
+    Alarm = "alarm",
+    Success = "success",
+    Error = "error",
+    DefaultGray = "default-gray",
+    DefaultWhite = "default-white"
+}
+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.Alarm = "alarm", r.Success = "success", r.Error = "error", r.DefaultGray = "default-gray", r.DefaultWhite = "default-white", r))(e || {}), l = /* @__PURE__ */ ((r) => (r.S = "s", r.M = "m", r.L = "l", r))(l || {});
+export {
+  l as EInputSize,
+  e as EInputVariant
+};

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

@@ -0,0 +1,29 @@
+import { InputHTMLAttributes } from 'react';
+import { EInputSize, EInputVariant } from './constants';
+
+type HTMLInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'size'>;
+export type TProps = HTMLInputProps & {
+    className?: string;
+    /**
+     * Метка для ввода.
+     */
+    label?: string;
+    /**
+     * Статус ввода. Может быть 'alert', 'success' или 'default'.
+     */
+    variant?: `${EInputVariant}` | EInputVariant;
+    /**
+     *  Автоматически фокусировать ввод при монтировании.
+     */
+    autofocus?: boolean;
+    /**
+     * Сделать ввод только для чтения.
+     */
+    readonly?: boolean;
+    /**
+     * Размер ввода.
+     */
+    size?: `${EInputSize}` | EInputSize;
+};
+export declare const Input: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<HTMLInputProps & import('react').RefAttributes<HTMLInputElement>>>;
+export {};

package/dist/components/Input/index.js

@@ -0,0 +1,61 @@
+import { jsx as N } from "react/jsx-runtime";
+import { memo as w, forwardRef as x, useState as F, useEffect as g } from "react";
+import { c as E } from "../../index-DIxK0V-G.js";
+import { EInputVariant as j } from "./constants.js";
+import '../../index3.css';const v = "_input_uy10d_1", z = "_s_uy10d_25", B = "_m_uy10d_32", D = "_l_uy10d_39", G = "_success_uy10d_74", O = "_alarm_uy10d_91", P = "_error_uy10d_108", R = "_disabled_uy10d_136", s = {
+  input: v,
+  s: z,
+  m: B,
+  l: D,
+  "default-gray": "_default-gray_uy10d_46",
+  "default-white": "_default-white_uy10d_57",
+  success: G,
+  alarm: O,
+  error: P,
+  disabled: R
+}, S = w(
+  x((c, n) => {
+    const {
+      className: l,
+      variant: _ = j.DefaultGray,
+      type: i = "text",
+      placeholder: m,
+      autofocus: t,
+      readonly: e,
+      onFocus: a,
+      onBlur: o,
+      disabled: d,
+      size: y = "m",
+      ...f
+    } = c, [p, r] = F(t);
+    g(() => {
+      t && r(!0);
+    }, [t]);
+    const h = (u) => {
+      r(!1), o == null || o(u);
+    }, b = (u) => {
+      r(!0), a == null || a(u);
+    }, I = {
+      [s.readonly]: d || e,
+      [s.focused]: p,
+      [s.disabled]: d || e
+    };
+    return /* @__PURE__ */ N(
+      "input",
+      {
+        ...f,
+        ref: n,
+        type: i,
+        className: E(s.input, I, l, [s[_], s[y]]),
+        onFocus: b,
+        onBlur: h,
+        readOnly: e,
+        placeholder: m
+      }
+    );
+  })
+);
+S.displayName = "Input";
+export {
+  S as Input
+};

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TProps as TInputPasswordProps } from '.';
+
+declare const meta: Meta<TInputPasswordProps>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;