indicator-ui 0.0.16 → 0.0.18

package/dist/scss/index.scss

@@ -1,2 +1 @@
-@forward "ui";
 @forward "styles";

package/dist/scss/ui/CheckboxMark/styles/mixins/base.scss

@@ -18,6 +18,7 @@
   @include modify-svg($stroke-width: 4) {
     width: 14px;
     height: 14px;
+    flex: none;
   }
   &:hover {
     @include checkbox-mark-base-hover();

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/radio.scss

@@ -5,6 +5,7 @@
 
   &:after {
     display: none;
+    flex: none;
     content: '';
     width: 8px;
     height: 8px;

package/dist/scss/ui/ToggleBase/styles/mixins/active.scss

@@ -0,0 +1,4 @@
+@mixin active() {
+  background-color: var(--blue-dark-500);
+  justify-content: end;
+}

package/dist/scss/ui/ToggleBase/styles/mixins/base-button.scss

@@ -0,0 +1,8 @@
+@use '../../../../styles' as *;
+
+@mixin base-button() {
+  flex: none;
+  border-radius: 50%;
+  background-color: var(--base-white);
+  box-shadow: 0 1px 2px 0 #1018280F, 0 1px 3px 0 #1018281A;
+}

package/dist/scss/ui/ToggleBase/styles/mixins/base.scss

@@ -0,0 +1,8 @@
+@use '../../../../styles' as *;
+
+@mixin base() {
+  border-radius: 12px;
+  padding: 2px;
+  background-color: var(--gray-300);
+  @include modify-flex($justify-content: start, $align-items: center);
+}

package/dist/scss/ui/ToggleBase/styles/mixins/disabled.scss

@@ -0,0 +1,8 @@
+@mixin disabled-base() {
+  cursor: default;
+  background-color: var(--gray-200);
+}
+
+@mixin disabled-button() {
+  background-color: var(--gray-50);
+}

package/dist/scss/ui/ToggleBase/styles/mixins/error.scss

@@ -0,0 +1,7 @@
+@mixin error-base() {
+  background-color: var(--error-200);
+}
+
+@mixin error-active() {
+  background-color: var(--error-500);
+}

package/dist/scss/ui/ToggleBase/styles/mixins/hover.scss

@@ -0,0 +1,15 @@
+@mixin hover() {
+  background-color: var(--gray-400);
+}
+
+@mixin hover-active() {
+  background-color: var(--blue-dark-600);
+}
+
+@mixin hover-error() {
+  background-color: var(--error-300);
+}
+
+@mixin hover-active-error() {
+  background-color: var(--error-600);
+}

package/dist/scss/ui/ToggleBase/styles/mixins/index.scss

@@ -0,0 +1,8 @@
+@forward "large";
+@forward "medium";
+@forward "error";
+@forward "active";
+@forward "hover";
+@forward "base-button";
+@forward "base";
+@forward "disabled";

package/dist/scss/ui/ToggleBase/styles/mixins/large.scss

@@ -0,0 +1,9 @@
+@mixin large-base() {
+  width: 44px;
+  height: 24px;
+}
+
+@mixin large-button() {
+  width: 20px;
+  height: 20px;
+}

package/dist/scss/ui/ToggleBase/styles/mixins/medium.scss

@@ -0,0 +1,9 @@
+@mixin medium-base() {
+  width: 36px;
+  height: 20px;
+}
+
+@mixin medium-button() {
+  width: 16px;
+  height: 16px;
+}

package/dist/types/src/test/pages/ToggleBasePage.d.ts

@@ -0,0 +1 @@
+export declare function ToggleBasePage(): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/test/pages/TogglePage.d.ts

@@ -0,0 +1 @@
+export declare function TogglePage(): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/test/pages/index.d.ts

@@ -6,3 +6,5 @@ export * from './FieldsPage';
 export * from './CheckboxMarkPage';
 export * from './FormBuilderPage';
 export * from './CheckboxPage';
+export * from './ToggleBasePage';
+export * from './TogglePage';

package/dist/types/src/ui/Checkbox/types/CheckboxTypes.d.ts

@@ -8,6 +8,10 @@ export type CheckboxClassNameType = {
     text?: string;
     indeterminate?: string;
     supportingText?: string;
+    widthFill?: string;
+    heightFill?: string;
+    widthHug?: string;
+    heightHug?: string;
 };
 export type CheckboxPropsType = {
     checked?: boolean;
@@ -19,5 +23,11 @@ export type CheckboxPropsType = {
     text?: React.ReactNode;
     onClick?: () => void;
     supportingText?: React.ReactNode;
+    width?: 'fill' | 'hug';
+    height?: 'fill' | 'hug';
+    /**
+     * Добавочные имена стилей. ```className="main-style addition-style-1 addition-style-2..."```
+     * */
+    additionStyle?: string | string[];
     className?: CheckboxClassNameType;
 };

package/dist/types/src/ui/Checkbox/ui/Checkbox.d.ts

@@ -1,2 +1,2 @@
 import { CheckboxPropsType } from "../types";
-export declare function Checkbox({ checked, type, error, subtype, disabled, text, supportingText, indeterminate, onClick, className, }: CheckboxPropsType): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ checked, type, error, subtype, disabled, text, supportingText, indeterminate, onClick, width, height, className, }: CheckboxPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/Toggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ui';
+export * from './types';

package/dist/types/src/ui/Toggle/styles/index.d.ts

@@ -0,0 +1 @@
+export { default as ToggleStyle } from './Toggle.module.scss';

package/dist/types/src/ui/Toggle/types/ToggleTypes.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type TogglePropsType = {
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    text?: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * Добавочные имена стилей. ```className="main-style addition-style-1 addition-style-2..."```
+     * */
+    additionStyle?: string | string[];
+    width?: 'fill' | 'hug';
+    height?: 'fill' | 'hug';
+};

package/dist/types/src/ui/Toggle/types/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleTypes';

package/dist/types/src/ui/Toggle/ui/Toggle.d.ts

@@ -0,0 +1,2 @@
+import { TogglePropsType } from "../types";
+export declare function Toggle({ active, disabled, onClick, text, description, additionStyle, width, height, }: TogglePropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/Toggle/ui/index.d.ts

@@ -0,0 +1 @@
+export * from './Toggle';

package/dist/types/src/ui/ToggleBase/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ui';
+export * from './types';

package/dist/types/src/ui/ToggleBase/styles/index.d.ts

@@ -0,0 +1 @@
+export { default as ToggleBaseStyle } from './ToggleBase.module.scss';

package/dist/types/src/ui/ToggleBase/types/ToggleBaseTypes.d.ts

@@ -0,0 +1,27 @@
+export type ToggleBaseClassNameType = {
+    toggleBase?: string;
+    button?: string;
+    active?: string;
+    hover?: string;
+    error?: string;
+    medium?: string;
+    large?: string;
+    disabled?: string;
+};
+export type ToggleBaseSizeType = 'medium' | 'large';
+export type ToggleBasePropsType = {
+    /**
+     * Активирована ли кнопка. (В дизайне pressed)
+     * */
+    active?: boolean;
+    onClick?: () => void;
+    size?: ToggleBaseSizeType;
+    error?: boolean;
+    hover?: boolean;
+    disabled?: boolean;
+    /**
+     * Включает обертку в ```<button>```, иначе обернет в ```<span>```.
+     * */
+    isButton?: boolean;
+    className?: ToggleBaseClassNameType;
+};

package/dist/types/src/ui/ToggleBase/types/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleBaseTypes';

package/dist/types/src/ui/ToggleBase/ui/ToggleBase.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ToggleBasePropsType } from "../types";
+export declare function ToggleBase({ active, onClick, error, size, hover, disabled, isButton, className, }: ToggleBasePropsType): React.FunctionComponentElement<any>;

package/dist/types/src/ui/ToggleBase/ui/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleBase';

package/dist/types/src/ui/index.d.ts

@@ -5,3 +5,5 @@ export * from './InputFields';
 export * from './FormBuilder';
 export * from './CheckboxMark';
 export * from './Checkbox';
+export * from './ToggleBase';
+export * from './Toggle';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indicator-ui",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "main": "dist/index.js",
   "types": "dist/types/src/index.d.ts",
   "style": "dist/index.css",

package/dist/scss/ui/index.scss

@@ -1,3 +0,0 @@
-@forward "Buttons";
-@forward "MicroButton";
-@forward "CheckboxMark";