kamotive_ui 1.1.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/dist/Icons/ChevronDown/ChevronDown10.d.ts +6 -0
  2. package/dist/Icons/ChevronDown/ChevronDown10.js +6 -0
  3. package/dist/Icons/ChevronUp/ChevronUp10.d.ts +6 -0
  4. package/dist/Icons/ChevronUp/ChevronUp10.js +6 -0
  5. package/dist/Icons/IconAccount/IconAccount10.d.ts +6 -0
  6. package/dist/Icons/IconAccount/IconAccount10.js +6 -0
  7. package/dist/Icons/IconAlarm/IconAlarm10.d.ts +6 -0
  8. package/dist/Icons/IconAlarm/IconAlarm10.js +6 -0
  9. package/dist/Icons/IconBank/IconBank10.d.ts +6 -0
  10. package/dist/Icons/IconBank/IconBank10.js +6 -0
  11. package/dist/Icons/IconBell/IconBell10.d.ts +6 -0
  12. package/dist/Icons/IconBell/IconBell10.js +6 -0
  13. package/dist/Icons/IconBriefcase/IconBriefcase10.d.ts +6 -0
  14. package/dist/Icons/IconBriefcase/IconBriefcase10.js +6 -0
  15. package/dist/Icons/IconCalendar/IconCalendar10.d.ts +6 -0
  16. package/dist/Icons/IconCalendar/IconCalendar10.js +6 -0
  17. package/dist/Icons/IconCheck/IconCheck10.d.ts +6 -0
  18. package/dist/Icons/IconCheck/IconCheck10.js +6 -0
  19. package/dist/Icons/IconClose/IconClose10.d.ts +6 -0
  20. package/dist/Icons/IconClose/IconClose10.js +6 -0
  21. package/dist/Icons/IconColorPicker/IconColorPicker10.d.ts +7 -0
  22. package/dist/Icons/IconColorPicker/IconColorPicker10.js +6 -0
  23. package/dist/Icons/IconError/IconError10.d.ts +6 -0
  24. package/dist/Icons/IconError/IconError10.js +6 -0
  25. package/dist/Icons/IconEyeOff/IconEyeOff10.d.ts +6 -0
  26. package/dist/Icons/IconEyeOff/IconEyeOff10.js +6 -0
  27. package/dist/Icons/IconInfo/IconInfo10.d.ts +6 -0
  28. package/dist/Icons/IconInfo/IconInfo10.js +6 -0
  29. package/dist/Icons/IconSuccess/IconSuccess10.d.ts +6 -0
  30. package/dist/Icons/IconSuccess/IconSuccess10.js +6 -0
  31. package/dist/Icons/IconWarning/IconWarning10.d.ts +6 -0
  32. package/dist/Icons/IconWarning/IconWarning10.js +6 -0
  33. package/dist/Icons/Icons.module.css +4 -0
  34. package/dist/Icons/index.d.ts +16 -0
  35. package/dist/Icons/index.js +16 -0
  36. package/dist/Intro/Welcome.d.ts +2 -0
  37. package/dist/Intro/Welcome.js +7 -0
  38. package/dist/Intro/Welcome.module.css +19 -0
  39. package/dist/colors.css +78 -0
  40. package/dist/components/Button/Button.d.ts +6 -0
  41. package/dist/components/Button/Button.js +49 -0
  42. package/dist/components/Button/Button.module.css +346 -0
  43. package/dist/components/Checkbox/Checkbox.d.ts +3 -0
  44. package/dist/components/Checkbox/Checkbox.js +13 -0
  45. package/dist/components/Checkbox/Checkbox.module.css +77 -0
  46. package/dist/components/ColorPicker/ColorPicker.d.ts +37 -0
  47. package/dist/components/ColorPicker/ColorPicker.js +113 -0
  48. package/dist/components/ColorPicker/ColorPicker.module.css +272 -0
  49. package/dist/components/Dropdown/Dropdown.d.ts +14 -0
  50. package/dist/components/Dropdown/Dropdown.js +83 -0
  51. package/dist/components/Dropdown/Dropdown.module.css +207 -0
  52. package/dist/components/Input/Input.d.ts +6 -0
  53. package/dist/components/Input/Input.js +37 -0
  54. package/dist/components/Input/Input.module.css +176 -0
  55. package/dist/components/ProgressBar/ProgressBar.d.ts +6 -0
  56. package/dist/components/ProgressBar/ProgressBar.js +41 -0
  57. package/dist/components/ProgressBar/ProgressBar.module.css +49 -0
  58. package/dist/components/ProgressLoader/ProgressLoader.d.ts +3 -0
  59. package/dist/components/ProgressLoader/ProgressLoader.js +71 -0
  60. package/dist/components/ProgressLoader/ProgressLoader.module.css +26 -0
  61. package/dist/components/RadioButton/RadioButton.d.ts +3 -0
  62. package/dist/components/RadioButton/RadioButton.js +13 -0
  63. package/dist/components/RadioButton/RadioButton.module.css +80 -0
  64. package/dist/components/SettingTag/SettingTag.d.ts +3 -0
  65. package/dist/components/SettingTag/SettingTag.js +15 -0
  66. package/dist/components/Snackbar/Snackbar.d.ts +32 -0
  67. package/dist/components/Snackbar/Snackbar.js +55 -0
  68. package/dist/components/Snackbar/Snackbar.module.css +52 -0
  69. package/dist/components/Snackbar/enums.d.ts +9 -0
  70. package/dist/components/Snackbar/enums.js +10 -0
  71. package/dist/components/Tab/Tab.d.ts +3 -0
  72. package/dist/components/Tab/Tab.js +14 -0
  73. package/dist/components/Tabs/Tabs.d.ts +3 -0
  74. package/dist/components/Tabs/Tabs.js +20 -0
  75. package/dist/components/Tabs/Tabs.module.css +54 -0
  76. package/dist/components/Tag/Tag.d.ts +3 -0
  77. package/dist/components/Tag/Tag.js +23 -0
  78. package/dist/components/Tag/Tag.module.css +146 -0
  79. package/dist/components/ToggleButton/ToggleButton.d.ts +3 -0
  80. package/dist/components/ToggleButton/ToggleButton.js +13 -0
  81. package/dist/components/ToggleButton/ToggleButton.module.css +75 -0
  82. package/dist/components/Typography/Typography.d.ts +6 -0
  83. package/dist/components/Typography/Typography.js +24 -0
  84. package/dist/components/Typography/Typography.module.css +264 -0
  85. package/dist/components/Typography/enums.d.ts +24 -0
  86. package/dist/components/Typography/enums.js +25 -0
  87. package/dist/fonts.css +35 -0
  88. package/dist/index.d.ts +14 -46
  89. package/dist/index.js +14 -36
  90. package/package.json +5 -2
  91. package/dist/kamotive_ui.css +0 -1
  92. package/dist/types/css.d.ts +0 -10
  93. package/dist/types/scss.d.ts +0 -7
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const ChevronDown10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const ChevronDown10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M5.84,9.59L11.5,15.25L17.16,9.59L16.45,8.89L11.5,13.84L6.55,8.89L5.84,9.59Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const ChevronUp10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const ChevronUp10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M5.84,15.41L11.5,9.75L17.16,15.41L16.45,16.11L11.5,11.16L6.55,16.11L5.84,15.41Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconAccount10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconAccount10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M11.5,14C15.64,14 19,15.57 19,17.5V20H4V17.5C4,15.57 7.36,14 11.5,14M18,17.5C18,16.12 15.09,15 11.5,15C7.91,15 5,16.12 5,17.5V19H18V17.5M11.5,5C13.43,5 15,6.57 15,8.5C15,10.43 13.43,12 11.5,12C9.57,12 8,10.43 8,8.5C8,6.57 9.57,5 11.5,5M11.5,6C10.12,6 9,7.12 9,8.5C9,9.88 10.12,11 11.5,11C12.88,11 14,9.88 14,8.5C14,7.12 12.88,6 11.5,6Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconAlarm10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconAlarm10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M11.5,6C15.64,6 19,9.36 19,13.5C19,17.64 15.64,21 11.5,21C7.36,21 4,17.64 4,13.5C4,9.36 7.36,6 11.5,6M11.5,7C7.91,7 5,9.91 5,13.5C5,17.09 7.91,20 11.5,20C15.09,20 18,17.09 18,13.5C18,9.91 15.09,7 11.5,7M11,9H12V13.36L15.05,14.78L14.63,15.69L11,14V9M15.25,5.25L15.89,4.5L19.72,7.7L19.08,8.46L15.25,5.25M7.75,5.25L3.92,8.46L3.28,7.7L7.11,4.5L7.75,5.25Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconBank10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconBank10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M11,2.5L20,7V9H2V7L11,2.5M15,10H19V18H15V10M2,22V19H20V22H2M9,10H13V18H9V10M3,10H7V18H3V10M3,20V21H19V20H3M4,11V17H6V11H4M10,11V17H12V11H10M16,11V17H18V11H16M3,8H19V7.6L11,3.58L3,7.6V8Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconBell10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconBell10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', color: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M12,4.5C12,4.22 11.78,4 11.5,4C11.22,4 11,4.22 11,4.5V6.03C8.75,6.28 7,8.18 7,10.5V16.41L5.41,18H17.59L16,16.41V10.5C16,8.18 14.25,6.28 12,6.03V4.5M11.5,3C12.33,3 13,3.67 13,4.5V5.21C15.31,5.86 17,8 17,10.5V16L20,19H3L6,16V10.5C6,8 7.69,5.86 10,5.21V4.5C10,3.67 10.67,3 11.5,3M11.5,22C10.29,22 9.28,21.14 9.05,20H10.09C10.29,20.58 10.85,21 11.5,21C12.15,21 12.71,20.58 12.91,20H13.95C13.72,21.14 12.71,22 11.5,22Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconBriefcase10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconBriefcase10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M5,7H8V5L10,3H13L15,5V7H18C19.66,7 21,8.34 21,10V18C21,19.66 19.66,21 18,21H5C3.34,21 2,19.66 2,18V10C2,8.34 3.34,7 5,7M10.41,4L9,5.41V7H14V5.41L12.59,4H10.41M5,8C3.9,8 3,8.9 3,10V18C3,19.1 3.9,20 5,20H18C19.1,20 20,19.1 20,18V10C20,8.9 19.1,8 18,8H5Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconCalendar10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconCalendar10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M7,2H8C8.55,2 9,2.45 9,3V4H14V3C14,2.45 14.45,2 15,2H16C16.55,2 17,2.45 17,3V4C18.66,4 20,5.34 20,7V18C20,19.66 18.66,21 17,21H6C4.34,21 3,19.66 3,18V7C3,5.34 4.34,4 6,4V3C6,2.45 6.45,2 7,2M15,4H16V3H15V4M8,4V3H7V4H8M6,5C4.9,5 4,5.9 4,7V8H19V7C19,5.9 18.1,5 17,5H6M4,18C4,19.1 4.9,20 6,20H17C18.1,20 19,19.1 19,18V9H4V18M12,13H17V18H12V13M13,14V17H16V14H13Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconCheck10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconCheck10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M18.9,8.1L9,18L4.05,13.05L4.76,12.34L9,16.59L18.19,7.39L18.9,8.1Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconClose10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconClose10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })));
6
+ };
@@ -0,0 +1,7 @@
1
+ import { FC } from 'react';
2
+ export declare const IconColorPicker10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ className?: string;
7
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconColorPicker10 = ({ color = 'inherit', htmlColor, strokeWidth, className, }) => {
4
+ return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]} ${className}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: 0, strokeLinejoin: "round", d: "M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconError10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconError10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', strokeLinejoin: "round", d: "M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconEyeOff10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconEyeOff10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M2.54,4.71L3.25,4L20,20.75L19.29,21.46L15.95,18.11C14.58,18.68 13.08,19 11.5,19C6.94,19 3,16.35 1.14,12.5C2.11,10.5 3.63,8.83 5.5,7.68L2.54,4.71M11.5,18C12.79,18 14.03,17.77 15.17,17.34L14.05,16.21C13.32,16.71 12.45,17 11.5,17C9,17 7,15 7,12.5C7,11.55 7.29,10.68 7.79,9.95L6.24,8.41C4.57,9.38 3.19,10.8 2.26,12.5C4.04,15.78 7.5,18 11.5,18M20.74,12.5C18.96,9.22 15.5,7 11.5,7C10.35,7 9.23,7.19 8.19,7.53L7.41,6.75C8.68,6.26 10.06,6 11.5,6C16.06,6 20,8.65 21.86,12.5C20.95,14.39 19.53,16 17.79,17.13L17.07,16.4C18.6,15.44 19.87,14.1 20.74,12.5M11.5,8C14,8 16,10 16,12.5C16,13.32 15.78,14.08 15.4,14.74L14.66,14C14.88,13.54 15,13.04 15,12.5C15,10.57 13.43,9 11.5,9C10.96,9 10.46,9.12 10,9.34L9.26,8.6C9.92,8.22 10.68,8 11.5,8M8,12.5C8,14.43 9.57,16 11.5,16C12.17,16 12.79,15.81 13.32,15.5L8.5,10.68C8.19,11.21 8,11.83 8,12.5Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconInfo10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconInfo10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconSuccess10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconSuccess10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" })));
6
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export declare const IconWarning10: FC<{
3
+ color?: string;
4
+ htmlColor?: string;
5
+ strokeWidth?: string;
6
+ }>;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import styles from '../Icons.module.css';
3
+ export const IconWarning10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
4
+ return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
5
+ React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', strokeLinejoin: "round", d: "M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" })));
6
+ };
@@ -0,0 +1,4 @@
1
+ path {
2
+ /* fill: var(--text-dark);
3
+ color: var(--text-dark); */
4
+ }
@@ -0,0 +1,16 @@
1
+ export { ChevronDown10 } from './ChevronDown/ChevronDown10';
2
+ export { ChevronUp10 } from './ChevronUp/ChevronUp10';
3
+ export { IconAlarm10 } from './IconAlarm/IconAlarm10';
4
+ export { IconAccount10 } from './IconAccount/IconAccount10';
5
+ export { IconBank10 } from './IconBank/IconBank10';
6
+ export { IconBell10 } from './IconBell/IconBell10';
7
+ export { IconBriefcase10 } from './IconBriefcase/IconBriefcase10';
8
+ export { IconCalendar10 } from './IconCalendar/IconCalendar10';
9
+ export { IconCheck10 } from './IconCheck/IconCheck10';
10
+ export { IconEyeOff10 } from './IconEyeOff/IconEyeOff10';
11
+ export { IconSuccess10 } from './IconSuccess/IconSuccess10';
12
+ export { IconInfo10 } from './IconInfo/IconInfo10';
13
+ export { IconWarning10 } from './IconWarning/IconWarning10';
14
+ export { IconError10 } from './IconError/IconError10';
15
+ export { IconClose10 } from './IconClose/IconClose10';
16
+ export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
@@ -0,0 +1,16 @@
1
+ export { ChevronDown10 } from './ChevronDown/ChevronDown10';
2
+ export { ChevronUp10 } from './ChevronUp/ChevronUp10';
3
+ export { IconAlarm10 } from './IconAlarm/IconAlarm10';
4
+ export { IconAccount10 } from './IconAccount/IconAccount10';
5
+ export { IconBank10 } from './IconBank/IconBank10';
6
+ export { IconBell10 } from './IconBell/IconBell10';
7
+ export { IconBriefcase10 } from './IconBriefcase/IconBriefcase10';
8
+ export { IconCalendar10 } from './IconCalendar/IconCalendar10';
9
+ export { IconCheck10 } from './IconCheck/IconCheck10';
10
+ export { IconEyeOff10 } from './IconEyeOff/IconEyeOff10';
11
+ export { IconSuccess10 } from './IconSuccess/IconSuccess10';
12
+ export { IconInfo10 } from './IconInfo/IconInfo10';
13
+ export { IconWarning10 } from './IconWarning/IconWarning10';
14
+ export { IconError10 } from './IconError/IconError10';
15
+ export { IconClose10 } from './IconClose/IconClose10';
16
+ export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const WelcomePage: () => React.JSX.Element;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import styles from './Welcome.module.css';
3
+ export const WelcomePage = () => {
4
+ return (React.createElement("div", null,
5
+ React.createElement("h1", { className: styles.h1 }, "\u0414\u0438\u0437\u0430\u0439\u043D-\u0441\u0438\u0441\u0442\u0435\u043C\u0430 Kamotive"),
6
+ React.createElement("p", { className: styles.body }, "\u041D\u0430\u0431\u043E\u0440 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432, \u0438\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u0438 \u043F\u0440\u0430\u0432\u0438\u043B, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0443\u043F\u0440\u043E\u0449\u0430\u044E\u0442 \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u0435, \u0430 \u0442\u0430\u043A\u0436\u0435 \u0432\u0438\u0437\u0443\u0430\u043B\u044C\u043D\u043E\u0435 \u0438 \u0442\u0435\u0445\u043D\u0438\u0447\u0435\u0441\u043A\u043E\u0435 \u043E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u0435 \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u043E\u0432 Kamotive.")));
7
+ };
@@ -0,0 +1,19 @@
1
+ .h1{
2
+ font-family: 'Raleway';
3
+ font-style: normal;
4
+ font-weight: 600;
5
+ line-height: 16.5px;
6
+ font-size: 30px;
7
+ color: var(--blue-main);
8
+ margin: 20px;
9
+ }
10
+ .body {
11
+ font-family: 'Raleway';
12
+ font-style: normal;
13
+ font-weight: 400;
14
+ line-height: 16.5px;
15
+ font-size: 16px;
16
+ color: var(--text-dark);
17
+ margin: 20px;
18
+
19
+ }
@@ -0,0 +1,78 @@
1
+ :root {
2
+ --white: #ffffff;
3
+
4
+ --grey-medium: #d1d1d6;
5
+ --grey-light: #e5e5ea;
6
+ --grey-extraLight: #f2f2f7;
7
+
8
+ --text-light: #3c3c434d;
9
+ --text-grey: #3c3c4399;
10
+ --text-dark: #2a3336;
11
+ --text-btn: #6f6f6f;
12
+ --text-btn-light: #9ca0a7;
13
+ --icons-medium: #5a5d61;
14
+ --icons-light: #dce4f0;
15
+ --icons-active: #bfd0eb;
16
+ --blue-main: #0d99ff;
17
+ --blue-secondary: #0c91f1;
18
+ --blue-dark: #0685e1;
19
+ --blue-disabled: #8dc6ef;
20
+ --error-main: #ff3b30;
21
+ --error-secondary: #eb3126;
22
+ --error-dark: #df2b21;
23
+ --error-disabled: #ff8d87;
24
+ --success-main: #34c759;
25
+ --success-secondary: #2db04e;
26
+ --success-dark: #2eb550;
27
+ --success-disabled: #8ac99a;
28
+ --warning-main: rgb(255, 149, 0);
29
+ --warning-secondary: #ed8c05;
30
+ --warning-dark: #e18504;
31
+ --warning-disabled:#ffb44a;
32
+ --info-main: #f2f2f7;
33
+ --info-secondary: #e5e5ea;
34
+
35
+ --info-dark: rgb(209, 209, 214);
36
+
37
+ --green:#34c759;
38
+ --greenBackground:rgba(52, 199, 89, 0.2);
39
+ --greenHover:rgba(52, 199, 89, 0.25);
40
+
41
+ --red: #ff3b30;
42
+ --redBackground:rgba(255, 59, 48, 0.2);
43
+ --redHover:rgba(255, 59, 48, 0.25);
44
+
45
+ --orange: #ff9500;
46
+ --orangeBackground:rgba(255, 149, 0, 0.2);
47
+ --orangeHover:rgba(255, 149, 0, 0.25);
48
+
49
+ --yellow:#ffcc00;
50
+ --yellowText:rgba(200, 160, 0, 1);
51
+ --yellowBackground:rgba(255, 204, 0, 0.1);
52
+ --yellowHover:rgba(255, 204, 0, 0.15);
53
+
54
+ --purple:#af52de;
55
+ --purpleBackground:rgba(175, 82, 222, 0.2);
56
+ --purpleHover:rgba(175, 82, 222, 0.25);
57
+
58
+ --indigo:#5856d6;
59
+ --indigoBackground:rgba(88, 86, 214, 0.2);
60
+ --indigoHover:rgba(88, 86, 214, 0.25);
61
+
62
+ --blue:#007aff;
63
+ --blueBackground:rgba(0, 122, 255, 0.2);
64
+ --blueHover:rgba(0, 122, 255, 0.25);
65
+
66
+ --teal:#30b0c7;
67
+ --tealBackground:rgba(48, 176, 199, 0.2);
68
+ --tealHover:rgba(48, 176, 199, 0.25);
69
+
70
+ --pink:#ff2d55;
71
+ --pinkBackground:rgba(255, 45, 85, 0.2);
72
+ --pinkHover:rgba(255, 45, 85, 0.25);
73
+ --info-dark: #d1d1d6;
74
+
75
+ --tab-light: #f3f3f3;;
76
+ --tab-extraLight: #f6f6f6;
77
+ --tab-medium: rgb(169, 169, 169, 0.2);
78
+ }
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import { ButtonProps } from 'kamotive_ui';
3
+ /**
4
+ * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
5
+ */
6
+ export declare const Button: React.FC<ButtonProps>;
@@ -0,0 +1,49 @@
1
+ import React from 'react';
2
+ import styles from './Button.module.css';
3
+ import classNames from 'classnames';
4
+ /**
5
+ * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
6
+ */
7
+ export const Button = ({ label, variant = 'fill', size = 'md', style = 'text', condition = 'default', icon, disabled = false, onClick, }) => {
8
+ const buttonClassess = classNames(styles.button, styles[`button--${variant}-${condition}`], styles[`button--${size}`], styles[`button--${style}`]
9
+ // {
10
+ // [styles['button--disabled']]: disabled,
11
+ // }
12
+ );
13
+ const iconColorFn = () => {
14
+ switch (condition) {
15
+ case 'default':
16
+ if (variant === 'outline') {
17
+ return disabled ? '#8dc6ef' : '#0d99ff';
18
+ }
19
+ return disabled ? 'var(--blue-disabled)' : '#FFFFFF';
20
+ case 'error':
21
+ if (variant === 'outline') {
22
+ return disabled ? '#ff8d87' : '#ff3b30';
23
+ }
24
+ return disabled ? 'var(--red-disabled)' : '#FFFFFF';
25
+ case 'success':
26
+ if (variant === 'outline') {
27
+ return disabled ? '#8ac99a' : '#34c759';
28
+ }
29
+ return disabled ? 'var(--green-disabled)' : '#FFFFFF';
30
+ case 'warning':
31
+ if (variant === 'outline') {
32
+ return disabled ? '#ffb44a' : '#ff9500';
33
+ }
34
+ return disabled ? 'var(--orange-disabled)' : '#FFFFFF';
35
+ case 'info':
36
+ return disabled ? 'var(--gray-disabled)' : '#6F6F6F';
37
+ default:
38
+ return disabled ? 'var(--blue-disabled)' : '#FFFFFF';
39
+ }
40
+ };
41
+ const iconColorStyle = iconColorFn();
42
+ return (React.createElement("button", { className: buttonClassess, onClick: onClick, disabled: disabled },
43
+ icon &&
44
+ React.cloneElement(icon, {
45
+ htmlColor: iconColorStyle,
46
+ strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
47
+ }),
48
+ label));
49
+ };