torgbox-ui 1.0.8 → 1.0.9

package/dist/esm/Inputs/PasswordField/PasswordField.d.ts

@@ -0,0 +1,7 @@
+import { type ITextField, type THTMLInput } from '../TextField';
+export interface IPasswordField extends THTMLInput, Pick<ITextField, 'onVisibilityToggle'> {
+    onValidated: (state: boolean) => void;
+    onPasswordInput: (value: string) => void;
+    hidePassword?: boolean;
+}
+export declare const PasswordField: (props: IPasswordField) => JSX.Element;

package/dist/esm/Inputs/PasswordField/index.js

@@ -0,0 +1,2 @@
+export { PasswordField } from './PasswordField';
+export { emptyPasswordError, notCorrectPasswordError } from './ErrorMessages';

package/dist/esm/Inputs/PhoneField/ErrorMessages.d.ts

@@ -0,0 +1,2 @@
+export declare const emptyPhoneError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430";
+export declare const notCorrectPhoneError = "\u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u2014 10 \u0446\u0438\u0444\u0440";

package/dist/esm/Inputs/PhoneField/PhoneField.d.ts

@@ -0,0 +1,6 @@
+import { type THTMLInput } from '../TextField';
+export interface IPhoneField extends THTMLInput {
+    onValidated: (state: boolean) => void;
+    onTextValid: (value: string) => void;
+}
+export declare const PhoneField: (props: IPhoneField) => JSX.Element;

package/dist/esm/Inputs/PhoneField/index.js

@@ -0,0 +1,2 @@
+export { PhoneField } from './PhoneField';
+export { emptyPhoneError, notCorrectPhoneError } from './ErrorMessages';

package/dist/esm/Inputs/RepeatPasswordField/ErrorMessages.d.ts

@@ -0,0 +1,2 @@
+export declare const emptyRepeatPasswordError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043F\u0430\u0440\u043E\u043B\u044C \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u043E";
+export declare const notCorrectRepeatPasswordError = "\u041F\u0430\u0440\u043E\u043B\u0438 \u043D\u0435 \u0441\u043E\u0432\u043F\u0430\u0434\u0430\u044E\u0442";

package/dist/esm/Inputs/RepeatPasswordField/RepeatPasswordField.d.ts

@@ -0,0 +1,6 @@
+import { type ITextField, type THTMLInput } from '../TextField';
+export interface IRepeatPasswordField extends THTMLInput, Pick<ITextField, 'onVisibilityToggle'> {
+    equalHandler: (state: boolean) => void;
+    comparedValue: string;
+}
+export declare const RepeatPasswordField: (props: IRepeatPasswordField) => JSX.Element;

package/dist/esm/Inputs/RepeatPasswordField/index.js

@@ -0,0 +1,2 @@
+export { RepeatPasswordField } from './RepeatPasswordField';
+export { emptyRepeatPasswordError, notCorrectRepeatPasswordError, } from './ErrorMessages';

package/dist/esm/Inputs/Selector/Collapse.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import { type IOptionItem } from './Option/Option';
+export interface ICollapse {
+    options: IOptionItem[];
+    selected?: IOptionItem;
+    title?: ReactNode;
+    onSelect: (selected: IOptionItem['value']) => void;
+    chevron?: boolean;
+    optionsIcon?: ReactNode;
+    closeOnClick?: boolean;
+}
+export declare const Collapse: (props: ICollapse) => JSX.Element;

package/dist/esm/Inputs/Selector/Dropdown.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type IOptionItem } from './Option/Option';
+export interface IDropdown {
+    options: IOptionItem[];
+    selected?: IOptionItem;
+    title?: ReactNode;
+    onSelect: (selected: IOptionItem['value']) => void;
+    optionsIcon?: ReactNode;
+    optionsDirection?: 'up' | 'down';
+    noFlip?: boolean;
+    optionsMaxHeight?: number;
+}
+export declare const Dropdown: (props: IDropdown) => JSX.Element;

package/dist/esm/Inputs/Selector/Option/Option.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface IOptionItem {
+    label: string;
+    value: string;
+    icon?: ReactNode;
+}
+export interface IOption {
+    option: IOptionItem;
+    onClick: (value: IOptionItem['value']) => void;
+    selected?: boolean;
+    optionsIcon?: ReactNode;
+}
+export declare const Option: (props: IOption) => JSX.Element;

package/dist/esm/Inputs/Selector/Option/option.scss

@@ -0,0 +1,44 @@
+$option-bg:            $color-neutral-gray;
+$option-bg-hover:      $neutral-A8;
+$option-bg-selected:   $primary-A12;
+$option-text:          $neutral-high;
+$option-text-selected: $primary-high;
+$option-icon:          $neutral-high;
+$option-icon-selected: $primary-high;
+
+.selector-option {
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+
+  padding: 8px 12px;
+
+  color: $option-text;
+
+  background: $option-bg;
+  border-radius: 4px;
+
+  fill: $option-icon;
+
+  &:hover {
+    background: $option-bg-hover;
+    transition: background-color 0.2s;
+  }
+
+  &--selected {
+    color:      $option-text-selected;
+    background: $option-bg-selected;
+    fill:       $option-icon-selected;
+
+    &:hover {
+      background: $option-bg-selected;
+    }
+  }
+
+  &__icon {
+    display: flex;
+    width: 20px;
+    padding-right: 8px;
+  }
+}

package/dist/esm/Inputs/Selector/index.d.ts

@@ -0,0 +1,3 @@
+export { Option, type IOptionItem, type IOption, } from './Option/Option';
+export { Collapse, type ICollapse } from './Collapse';
+export { Dropdown, type IDropdown } from './Dropdown';

package/dist/esm/Inputs/Selector/selector.scss

@@ -0,0 +1,101 @@
+$title-bg:        transparent;
+$title-bg-hover:  $neutral-A8;
+$title-bg-active: $neutral-A12;
+$title-text:      $neutral-high;
+$title-icon:      $neutral-high;
+$title-border:    $neutral-border-low;
+$options-bg:      $color-neutral-gray;
+
+.selector {
+  @keyframes slide-down {
+    from {
+      transform: translateY(-5%);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      transform: translateY(5%);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  width: 200px;
+
+  .title {
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 8px 12px;
+
+    color: $title-text;
+
+    background: $title-bg;
+    border-radius: 4px;    
+
+    transition: background-color 0.2s;
+
+    &:hover {
+      background: $title-bg-hover;
+    }
+
+    &--active {
+      background: $title-bg-active;
+      border-bottom: 1px solid $title-border;
+      border-radius: 4px 4px 0 0;
+      &:hover {
+        background: $title-bg-active;
+      }
+    }
+
+    &__label {
+      display: flex;
+    }
+  
+    &__icon {
+      display: flex;
+      width: 20px;
+      padding-right: 8px;
+      fill: $title-icon;
+    }
+
+    &__chevron {
+      display: flex;
+      align-items: center;
+      fill: $title-icon;
+      transition: all 200ms;
+  
+      &--rotate {
+        transform: rotate(180deg);
+      }
+    }
+  }    
+
+  &__options {
+    overflow: auto;
+    background: $options-bg;
+    border-radius: 0 0 4px 4px;
+
+    &--slide-up {
+      animation: slide-up 0.2s forwards;
+    }
+
+    &--slide-down {
+      animation: slide-down 0.2s forwards;
+    }
+  }
+}

package/dist/esm/Inputs/TextField/TextField.d.ts

@@ -0,0 +1,25 @@
+import { type InputHTMLAttributes } from 'react';
+export type THTMLInput = Pick<InputHTMLAttributes<HTMLInputElement>, 'className' | 'placeholder' | 'tabIndex' | 'maxLength' | 'required'>;
+export type TTextFieldType = 'text' | 'password' | 'tel' | 'email';
+export type TTextFieldSize = 'medium' | 'large';
+export type TTextFieldState = 'idle' | 'error' | 'disabled';
+export interface ITextField extends THTMLInput {
+    label?: string;
+    value: string;
+    description?: string;
+    errorMessage?: string;
+    type?: TTextFieldType;
+    size?: TTextFieldSize;
+    state?: TTextFieldState;
+    onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;
+    onClear?: () => void;
+    onVisibilityToggle?: () => void;
+    onTouched?: (state: boolean) => void;
+    autoFocus?: boolean;
+    checkIcon?: boolean;
+    clearIcon?: boolean;
+    eyeIcon?: boolean;
+    searchIcon?: boolean;
+    alwaysShowError?: boolean;
+}
+export declare const TextField: (props: ITextField) => JSX.Element;

package/dist/esm/Inputs/TextField/index.d.ts

@@ -0,0 +1 @@
+export { TextField, type ITextField, type THTMLInput, type TTextFieldType } from './TextField';

package/dist/esm/Inputs/TextField/textField.module.scss

@@ -0,0 +1,157 @@
+@use 'sass:color';
+@use '@/assets/scss' as *;
+
+$border-inactive:    $neutral-border-low;
+$border-hover:       $neutral-border-middle;
+$border-focus:       $primary-border-high;
+$border-disabled:    $neutral-border-low;
+$border-error:       $error-border-high;
+$border-error-hover: $error-border-middle;
+
+$label:              $neutral-middle;
+$label-disabled:     $neutral-A48;
+$label-required:     $primary-high;
+
+$placeholder:        $neutral-low;
+$value:              $neutral-high;
+$value-disabled:     $neutral-A48;
+
+$icons:              $neutral-middle;
+
+$description:        $neutral-middle;
+$description-error:  $error-high;
+
+.text-field-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  font-family: 'Roboto Regular', sans-serif;
+
+  &__label {
+    line-height: 20px;
+    color: $label;
+
+    &--medium {
+      font-size: 12px;
+    }
+
+    &--large {
+      font-size: 14px;
+    }
+
+    &--required {
+      padding-left: 4px;
+      color: $label-required;
+    }
+
+    &--disabled {
+      color: $label-disabled;
+    }
+  }
+
+  &__bottom-text {
+    position: absolute;
+    bottom: -16px;
+    left: 0;
+    font-size: 12px;
+    line-height: 16px;
+    
+
+    &--description {
+      color: $description;
+    }
+
+    &--error {
+      color: $description-error;
+    }
+  }
+}
+
+.text-field {
+  display: flex;
+  align-items: center;
+
+  max-width: 400px;
+  padding: 0 12px;
+
+  border: 1px solid $border-inactive;
+  border-radius: 4px;
+
+  &--medium {
+    height: 36px;
+  }
+
+  &--large {
+    height: 44px;
+  }
+
+  &--idle {
+    &:hover {
+      border: 1px solid $border-hover;
+    }
+  }
+
+  &--error {
+    border: 1px solid $border-error;
+
+    &:hover {
+      border: 1px solid $border-error-hover;
+    }
+  }
+
+  &--disabled {
+    border: 1px solid $border-disabled;
+  }
+
+  &--focused {
+    border: 1px solid $border-focus;
+
+    &:hover {
+      border: 1px solid $border-focus;
+    }
+  }
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    padding: 0 4px;
+
+    font-weight: 400;
+
+    background: none;
+    border: none;
+    outline: none;
+
+    &::placeholder {
+      color: $placeholder;
+    }
+
+    &--medium {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    &--large {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    &:disabled {
+      color: $value-disabled;
+    }
+  }
+
+  &__icons {
+    display: flex;
+    align-items: center;
+    fill: $icons;
+
+    &--medium {
+      width: 20px;
+    }
+
+    &--large {
+      width: 24px;
+    }
+  }
+}

package/dist/esm/Inputs/TextField/textField.scss

@@ -0,0 +1,156 @@
+@use 'sass:color';
+
+$border-inactive:    $neutral-border-low;
+$border-hover:       $neutral-border-middle;
+$border-focus:       $primary-border-high;
+$border-disabled:    $neutral-border-low;
+$border-error:       $error-border-high;
+$border-error-hover: $error-border-middle;
+
+$label:              $neutral-middle;
+$label-disabled:     $neutral-A48;
+$label-required:     $primary-high;
+
+$placeholder:        $neutral-low;
+$value:              $neutral-high;
+$value-disabled:     $neutral-A48;
+
+$icons:              $neutral-middle;
+
+$description:        $neutral-middle;
+$description-error:  $error-high;
+
+.text-field-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  font-family: 'Roboto Regular', sans-serif;
+
+  &__label {
+    line-height: 20px;
+    color: $label;
+
+    &--medium {
+      font-size: 12px;
+    }
+
+    &--large {
+      font-size: 14px;
+    }
+
+    &--required {
+      padding-left: 4px;
+      color: $label-required;
+    }
+
+    &--disabled {
+      color: $label-disabled;
+    }
+  }
+
+  &__bottom-text {
+    position: absolute;
+    bottom: -16px;
+    left: 0;
+    font-size: 12px;
+    line-height: 16px;
+    
+
+    &--description {
+      color: $description;
+    }
+
+    &--error {
+      color: $description-error;
+    }
+  }
+}
+
+.text-field {
+  display: flex;
+  align-items: center;
+
+  max-width: 400px;
+  padding: 0 12px;
+
+  border: 1px solid $border-inactive;
+  border-radius: 4px;
+
+  &--medium {
+    height: 36px;
+  }
+
+  &--large {
+    height: 44px;
+  }
+
+  &--idle {
+    &:hover {
+      border: 1px solid $border-hover;
+    }
+  }
+
+  &--error {
+    border: 1px solid $border-error;
+
+    &:hover {
+      border: 1px solid $border-error-hover;
+    }
+  }
+
+  &--disabled {
+    border: 1px solid $border-disabled;
+  }
+
+  &--focused {
+    border: 1px solid $border-focus;
+
+    &:hover {
+      border: 1px solid $border-focus;
+    }
+  }
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    padding: 0 4px;
+
+    font-weight: 400;
+
+    background: none;
+    border: none;
+    outline: none;
+
+    &::placeholder {
+      color: $placeholder;
+    }
+
+    &--medium {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    &--large {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    &:disabled {
+      color: $value-disabled;
+    }
+  }
+
+  &__icons {
+    display: flex;
+    align-items: center;
+    fill: $icons;
+
+    &--medium {
+      width: 20px;
+    }
+
+    &--large {
+      width: 24px;
+    }
+  }
+}

package/dist/esm/Inputs/index.d.ts

@@ -0,0 +1,11 @@
+export { Button, type IButton, type TButtonState } from './Button';
+export { TextField, type ITextField } from './TextField';
+export { Dropdown, Collapse, Option } from './Selector';
+export { EmailField } from './EmailField';
+export { NameField } from './NameField';
+export { PhoneField } from './PhoneField';
+export { PasswordField } from './PasswordField';
+export { RepeatPasswordField } from './RepeatPasswordField';
+export { OtpInput } from './OtpInput';
+export { Checkbox } from './Checkbox';
+export { InnField } from './InnField';

package/dist/esm/Inputs/index.scss

@@ -0,0 +1,6 @@
+@import './Button/button';
+@import './TextField/textField';
+@import './Selector/selector';
+@import './Selector/Option/option';
+@import './OtpInput/otpInput';
+@import './Checkbox/checkbox';

package/dist/esm/Pages/ContentPage/ContentPage.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+interface ContentPageProps {
+    children?: ReactNode;
+}
+export declare const ContentPage: ({ children }: ContentPageProps) => JSX.Element;
+export {};

package/dist/esm/Pages/ContentPage/contentPage.scss

@@ -0,0 +1,10 @@
+.content-page {
+  &__content {
+    display: flex;
+    overflow: hidden;
+  }
+
+  &__main {
+    width: 100%;
+  }
+}

package/dist/esm/Pages/ContentPage/index.js

@@ -0,0 +1 @@
+export { ContentPage } from './ContentPage';

package/dist/esm/Pages/CreatePasswordPage/CreatePasswordPage.d.ts

@@ -0,0 +1 @@
+export declare const CreatePasswordPage: () => JSX.Element;

package/dist/esm/Pages/CreatePasswordPage/createPasswordPage.scss

@@ -0,0 +1,42 @@
+$page-background: $surface-bright;
+$title:           $neutral-high;
+
+.create-password-page {
+  background-color: $page-background;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  box-sizing: border-box;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 24px 40px;
+
+  &__title {
+    margin-bottom: 32px;
+    font-size: 28px;
+    line-height: 36px;
+    color: $title;
+  }
+
+  &__form {
+    width: 100%;
+    padding-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .register-page {
+    max-width: 320px;
+    padding: 24px 16px;
+
+    &__title {
+      font-size: 24px;
+      line-height: 32px;
+    }
+  }
+}

package/dist/esm/Pages/CreatePasswordPage/index.js

@@ -0,0 +1 @@
+export { CreatePasswordPage } from './CreatePasswordPage';

package/dist/esm/Pages/CreateTeamPage/CreateTeamPage.d.ts

@@ -0,0 +1,4 @@
+export interface ICreateTeamPage {
+    email: string;
+}
+export declare const CreateTeamPage: (props: ICreateTeamPage) => JSX.Element;