torgbox-ui 1.0.10 → 1.0.12

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

@@ -1,6 +0,0 @@
-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/cjs/Inputs/RepeatPasswordField/index.d.ts

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

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

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.notCorrectRepeatPasswordError = exports.emptyRepeatPasswordError = exports.RepeatPasswordField = void 0;
-var RepeatPasswordField_1 = require("./RepeatPasswordField");
-Object.defineProperty(exports, "RepeatPasswordField", { enumerable: true, get: function () { return RepeatPasswordField_1.RepeatPasswordField; } });
-var ErrorMessages_1 = require("./ErrorMessages");
-Object.defineProperty(exports, "emptyRepeatPasswordError", { enumerable: true, get: function () { return ErrorMessages_1.emptyRepeatPasswordError; } });
-Object.defineProperty(exports, "notCorrectRepeatPasswordError", { enumerable: true, get: function () { return ErrorMessages_1.notCorrectRepeatPasswordError; } });

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

@@ -1,12 +0,0 @@
-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/cjs/Inputs/Selector/Dropdown.d.ts

@@ -1,13 +0,0 @@
-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/cjs/Inputs/Selector/Option/Option.d.ts

@@ -1,13 +0,0 @@
-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/cjs/Inputs/Selector/Option/option.scss

@@ -1,44 +0,0 @@
-$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/cjs/Inputs/Selector/index.d.ts

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

package/dist/cjs/Inputs/Selector/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropdown = exports.Collapse = exports.Option = void 0;
-var Option_1 = require("./Option/Option");
-Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return Option_1.Option; } });
-var Collapse_1 = require("./Collapse");
-Object.defineProperty(exports, "Collapse", { enumerable: true, get: function () { return Collapse_1.Collapse; } });
-var Dropdown_1 = require("./Dropdown");
-Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });

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

@@ -1,101 +0,0 @@
-$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/cjs/Inputs/TextField/TextField.d.ts

@@ -1,25 +0,0 @@
-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/cjs/Inputs/TextField/index.d.ts

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

package/dist/cjs/Inputs/TextField/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextField = void 0;
-var TextField_1 = require("./TextField");
-Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return TextField_1.TextField; } });

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

@@ -1,157 +0,0 @@
-@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/cjs/Inputs/TextField/textField.scss

@@ -1,156 +0,0 @@
-@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/cjs/Inputs/index.d.ts

@@ -1,11 +0,0 @@
-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/cjs/Inputs/index.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InnField = exports.Checkbox = exports.OtpInput = exports.RepeatPasswordField = exports.PasswordField = exports.PhoneField = exports.NameField = exports.EmailField = exports.Option = exports.Collapse = exports.Dropdown = exports.TextField = exports.Button = void 0;
-var Button_1 = require("./Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
-var TextField_1 = require("./TextField");
-Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return TextField_1.TextField; } });
-var Selector_1 = require("./Selector");
-Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Selector_1.Dropdown; } });
-Object.defineProperty(exports, "Collapse", { enumerable: true, get: function () { return Selector_1.Collapse; } });
-Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return Selector_1.Option; } });
-var EmailField_1 = require("./EmailField");
-Object.defineProperty(exports, "EmailField", { enumerable: true, get: function () { return EmailField_1.EmailField; } });
-var NameField_1 = require("./NameField");
-Object.defineProperty(exports, "NameField", { enumerable: true, get: function () { return NameField_1.NameField; } });
-var PhoneField_1 = require("./PhoneField");
-Object.defineProperty(exports, "PhoneField", { enumerable: true, get: function () { return PhoneField_1.PhoneField; } });
-var PasswordField_1 = require("./PasswordField");
-Object.defineProperty(exports, "PasswordField", { enumerable: true, get: function () { return PasswordField_1.PasswordField; } });
-var RepeatPasswordField_1 = require("./RepeatPasswordField");
-Object.defineProperty(exports, "RepeatPasswordField", { enumerable: true, get: function () { return RepeatPasswordField_1.RepeatPasswordField; } });
-var OtpInput_1 = require("./OtpInput");
-Object.defineProperty(exports, "OtpInput", { enumerable: true, get: function () { return OtpInput_1.OtpInput; } });
-var Checkbox_1 = require("./Checkbox");
-Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
-var InnField_1 = require("./InnField");
-Object.defineProperty(exports, "InnField", { enumerable: true, get: function () { return InnField_1.InnField; } });

package/dist/cjs/Inputs/index.scss

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

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

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

package/dist/cjs/Pages/ContentPage/ContentPage.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentPage = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Utils_1 = require("../../Utils");
-const Widgets_1 = require("../../Widgets");
-const ContentPage = ({ children }) => {
-    const [sidebarOpened, setSidebarOpened] = (0, react_1.useState)(false);
-    const [sidebarPinned, setSidebarPinned] = (0, react_1.useState)(false);
-    const onShowSidebar = () => {
-        setSidebarOpened(true);
-    };
-    const onCloseSidebar = (0, react_1.useCallback)(() => {
-        setSidebarOpened(false);
-    }, []);
-    const onPinSidebar = () => {
-        setSidebarPinned(true);
-    };
-    const onUnpinSidebar = () => {
-        setSidebarPinned(false);
-        onCloseSidebar();
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Widgets_1.Header, { onShowSidebar: onShowSidebar, onCloseSidebar: onCloseSidebar, sidebarOpened: sidebarOpened, sidebarPinned: sidebarPinned }), (0, jsx_runtime_1.jsxs)("div", { className: 'content-page__content', children: [sidebarOpened && ((0, jsx_runtime_1.jsx)(Widgets_1.Sidebar, { pinned: sidebarPinned, onPinSidebar: onPinSidebar, onUnpinSidebar: onUnpinSidebar })), (0, jsx_runtime_1.jsx)("main", { className: 'content-page__main', children: children || (0, jsx_runtime_1.jsx)(Utils_1.SectionPlaceholder, {}) })] })] }));
-};
-exports.ContentPage = ContentPage;

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

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

package/dist/cjs/Pages/ContentPage/index.d.ts

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

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

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentPage = void 0;
-var ContentPage_1 = require("./ContentPage");
-Object.defineProperty(exports, "ContentPage", { enumerable: true, get: function () { return ContentPage_1.ContentPage; } });

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

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