kamotive_ui 1.2.1 → 1.2.2

package/dist/components/Tag/Tag.module.css

@@ -1,9 +1,8 @@
-.story--wrapper {
+.story--wrapper-tag {
     background-color: var(--white);
     padding: 30px;
     border-radius: 10px;
     width: 300px;
-    height: 300px; 
 }
 
 .tag {
@@ -22,14 +21,14 @@
     line-height: 14px;
 }
 
-.circle {
+.tag .circle {
   border-radius: 50%;
   cursor: pointer;
   transition: transform 0.2s ease;
   position: relative;
 }
 
-button[aria-label="Закрыть"] {
+.tag button[aria-label="Закрыть"] {
     background: none;
     border: none;
     padding: 0;
@@ -39,8 +38,8 @@ button[aria-label="Закрыть"] {
     height: 8px;
 }
 
-button[aria-label="Закрыть"]::before,
-button[aria-label="Закрыть"]::after {
+.tag button[aria-label="Закрыть"]::before,
+.tag button[aria-label="Закрыть"]::after {
     content: '';
     position: absolute;
     top: 50%;
@@ -51,96 +50,96 @@ button[aria-label="Закрыть"]::after {
     background-color: var(--close-color); 
 }
 
-button[aria-label="Закрыть"]::after {
+.tag button[aria-label="Закрыть"]::after {
     transform: translate(-50%, -50%) rotate(-45deg);
 }
 
-.red {
+.tag.red {
     color: var(--red);
     background-color: var(--redBackground);
     border: 1px solid var(--red)
 }
 
-.red:hover {
+.tag.red:hover {
     background-color: var(--redHover);
 }
 
-.orange {
+.tag.orange {
     color: var(--orange);
     background-color: var(--orangeBackground);
     border: 1px solid var(--orange)
 }
 
-.orange:hover {
+.tag.orange:hover {
     background-color: var(--orangeHover);
 }
 
-.yellow {
+.tag.yellow {
     color: var(--yellowText);
     background-color: var(--yellowBackground);
     border: 1px solid var(--yellow)
 }
 
-.yellow:hover {
+.tag.yellow:hover {
     background-color: var(--yellowHover);
 }
 
-.green {
+.tag.green {
     color: var(--green);
     background-color: var(--greenBackground);
     border: 1px solid var(--green)
 }
 
-.green:hover {
+.tag.green:hover {
     background-color: var(--greenHover);
 }
 
-.purple {
+.tag.purple {
     color: var(--purple);
     background-color: var(--purpleBackground);
     border: 1px solid var(--purple)
 }
 
-.purple:hover {
+.tag.purple:hover {
     background-color: var(--purpleHover);
 }
 
-.indigo {
+.tag.indigo {
     color: var(--indigo);
     background-color: var(--indigoBackground);
     border: 1px solid var(--indigo)
 }
 
-.indigo:hover {
+.tag.indigo:hover {
     background-color: var(--indigoHover);
 }
 
-.blue {
+.tag.blue {
     color: var(--blue);
     background-color: var(--blueBackground);
     border: 1px solid var(--blue)
 }
 
-.blue:hover {
+.tag.blue:hover {
     background-color: var(--blueHover);
 }
 
-.teal {
+.tag.teal {
     color: var(--teal);
     background-color: var(--tealBackground);
     border: 1px solid var(--teal)
 }
 
-.teal:hover {
+.tag.teal:hover {
     background-color: var(--tealHover);
 }
 
-.pink {
+.tag.pink {
     color: var(--pink);
     background-color: var(--pinkBackground);
     border: 1px solid var(--pink)
 }
 
-.pink:hover {
+.tag.pink:hover {
     background-color: var(--pinkHover);
 }

package/dist/components/ToggleButton/ToggleButton.js

@@ -7,7 +7,7 @@ export const ToggleButton = ({ value, onChange, disabled = false, size = 'sm', l
             onChange(e);
         }
     };
-    return (React.createElement("label", { className: styles.toggle },
-        React.createElement("input", { type: "checkbox", checked: value, onChange: handleChange, disabled: disabled, className: classNames(styles.input, styles[size]) }),
+    return (React.createElement("label", { className: styles['toggle'] },
+        React.createElement("input", { type: "checkbox", checked: value, onChange: handleChange, disabled: disabled, className: classNames(styles['toggleInput'], `${size}`) }),
         label));
 };

package/dist/components/ToggleButton/ToggleButton.module.css

@@ -1,4 +1,4 @@
-.story--wrapper {
+.story--wrapper-toggle {
     background-color: var(--white);
     padding: 30px;
     border-radius: 10px;
@@ -16,15 +16,15 @@
     line-height: 16px;
     color: var(--text-dark);
 }
-.sm {
+.toggleInput.sm {
     width: 22px;
     height: 12px;
 }
-.md {
+.toggleInput.md {
     width: 28px;
     height: 16px;
 }
-.input[type="checkbox"] {
+.toggleInput {
     -webkit-appearance: none;
     appearance: none;
     display: inline-block;
@@ -34,14 +34,14 @@
     position: relative;
     cursor: pointer;
 }
-.input[type="checkbox"]:checked {
+.toggleInput:checked {
     background-color: var(--blue-main);
 }
-.input[type="checkbox"]:disabled:checked {
+.toggleInput:disabled:checked {
     background-color: var(--blue-disabled);
 }
 /* Круг слева */
-.input[type="checkbox"]::after {
+.toggleInput::after {
     content: '';
     position: absolute;
     left: 50%;
@@ -52,16 +52,16 @@
     border-radius: 50%;
     background-color: var(--white);
 }
-.input[type="checkbox"]:hover::after {
+.toggleInput:hover::after {
     box-shadow: 0 0 2px var(--blue-main);
 }
-.input[type="checkbox"]:disabled::after {
+.toggleInput:disabled::after {
     background-color: var(--grey-extraLight);
     cursor: not-allowed;
     box-shadow: none;
 }
 /* Круг справа */
-.input[type="checkbox"]:checked::after {
+.toggleInput:checked::after {
     content: '';
     position: absolute;
     left: 50%;

package/dist/components/Typography/Typography.js

@@ -10,15 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import styles from './Typography.module.css';
+;
 import classNames from 'classnames';
 import { ETypographyVariants } from './enums';
+import styles from './Typography.module.css';
 /**
  * Компонент Typography для стилизованного отображения текста.
  */
 export const Typography = (_a) => {
     var { variant = ETypographyVariants.Body1, children, className, color, style } = _a, props = __rest(_a, ["variant", "children", "className", "color", "style"]);
-    const variantClass = classNames(styles[`typography--variant-${variant}`], className);
+    const variantClass = classNames([`typography--variant-${variant}`], className);
     const combinedStyle = Object.assign({ color }, style);
-    return (React.createElement("span", Object.assign({ className: `${variantClass} ${className}`, style: combinedStyle }, props), children));
+    return (React.createElement("span", Object.assign({ className: styles[`${variantClass} ${className}`], style: combinedStyle }, props), children));
 };

package/dist/components/Typography/Typography.module.css

@@ -1,15 +1,15 @@
-.story--wrapper {
+
+.story--wrapper-typography{
   background-color: var(--white);
-  padding: 20px;
-  border-radius: 10px;
-  /* width: 900px; */
+  width: 900px;
 }
-.typography--wrapper{
+.typography--wrapper-typography {
   display: grid;
   grid-template-columns: 4fr 170px 80px 150px;
   gap: 20px;
   align-items: center;
   height: 60px;
+  width: 1100px;
 }
 
 .typography--variant-Heading1 {

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 export { Button as Button } from './components/Button/Button';
 export { Input as Input } from './components/Input/Input';
-import './fonts.css';
 export { Tag as Tag } from './components/Tag/Tag';
 export { Dropdown as Dropdown } from './components/Dropdown/Dropdown';
 export { ProgressBar as ProgressBar } from './components/ProgressBar/ProgressBar';
@@ -11,4 +10,7 @@ export { RadioButton as RadioButton } from './components/RadioButton/RadioButton
 export { Tab as Tab } from './components/Tab/Tab';
 export { Tabs as Tabs } from './components/Tabs/Tabs';
 export { SettingTag as SettingTag } from './components/SettingTag/SettingTag';
+export { ColorPicker as ColorPicker } from './components/ColorPicker/ColorPicker';
+export { Snackbar as Snackbar } from './components/Snackbar/Snackbar';
+export { ToggleButton as ToggleButton } from './components/ToggleButton/ToggleButton';
 import './fonts.css';

package/dist/index.js

@@ -1,6 +1,5 @@
 export { Button as Button } from './components/Button/Button';
 export { Input as Input } from './components/Input/Input';
-import './fonts.css';
 export { Tag as Tag } from './components/Tag/Tag';
 export { Dropdown as Dropdown } from './components/Dropdown/Dropdown';
 export { ProgressBar as ProgressBar } from './components/ProgressBar/ProgressBar';
@@ -11,4 +10,7 @@ export { RadioButton as RadioButton } from './components/RadioButton/RadioButton
 export { Tab as Tab } from './components/Tab/Tab';
 export { Tabs as Tabs } from './components/Tabs/Tabs';
 export { SettingTag as SettingTag } from './components/SettingTag/SettingTag';
+export { ColorPicker as ColorPicker } from './components/ColorPicker/ColorPicker';
+export { Snackbar as Snackbar } from './components/Snackbar/Snackbar';
+export { ToggleButton as ToggleButton } from './components/ToggleButton/ToggleButton';
 import './fonts.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kamotive_ui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "main": "dist/index.js",
   "files": [
     "dist"

package/dist/Icons/Icons.module.css

@@ -1,4 +0,0 @@
-path {
-  /* fill: var(--text-dark);
-  color: var(--text-dark); */
-}