kamotive_ui 1.2.7 → 1.2.9

package/dist/Icons/ChevronLeft/ChevronLeft.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const ChevronLeft: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: string;
+}>;

package/dist/Icons/ChevronLeft/ChevronLeft.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const ChevronLeft = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" })));
+};

package/dist/Icons/ChevronRight/ChevronRight.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const ChevronRight: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: string;
+}>;

package/dist/Icons/ChevronRight/ChevronRight.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const ChevronRight = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })));
+};

package/dist/Icons/index.d.ts

@@ -1,4 +1,6 @@
 export { ChevronDown10 } from './ChevronDown/ChevronDown10';
+export { ChevronRight } from './ChevronRight/ChevronRight';
+export { ChevronLeft } from './ChevronLeft/ChevronLeft';
 export { ChevronUp10 } from './ChevronUp/ChevronUp10';
 export { IconAlarm10 } from './IconAlarm/IconAlarm10';
 export { IconAccount10 } from './IconAccount/IconAccount10';

package/dist/Icons/index.js

@@ -1,4 +1,6 @@
 export { ChevronDown10 } from './ChevronDown/ChevronDown10';
+export { ChevronRight } from './ChevronRight/ChevronRight';
+export { ChevronLeft } from './ChevronLeft/ChevronLeft';
 export { ChevronUp10 } from './ChevronUp/ChevronUp10';
 export { IconAlarm10 } from './IconAlarm/IconAlarm10';
 export { IconAccount10 } from './IconAccount/IconAccount10';

package/dist/Intro/Welcome.module.css

@@ -1,5 +1,5 @@
-.h1{
-  font-family: var(--font-family);
+.h1 {
+  font-family: var(--font-family-headers);
   font-style: normal;
   font-weight: 600;
   line-height: 16.5px;
@@ -8,12 +8,11 @@
   margin: 20px;
 }
 .body {
-  font-family: var(--font-family);
+  font-family: var(--font-family-content);
   font-style: normal;
   font-weight: 400;
   line-height: 16.5px;
   font-size: 16px;
   color: var(--text-dark);
   margin: 20px;
-
-}
+}

package/dist/colors.css

@@ -2,6 +2,7 @@
   --white: #ffffff;
 
   --grey-medium: #aeaeb2;
+  --grey-mediumLight: #d3d3dd;
   --grey-light: #e5e5ea;
   --grey-extraLight: #f2f2f7;
 

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BreadcrumbProps } from '../../types';
+export declare const Breadcrumb: FC<BreadcrumbProps>;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './Breadcrumb.module.css';
+import classNames from 'classnames';
+;
+import { Typography } from '../Typography/Typography';
+export const Breadcrumb = ({ onClick, active, label, icon, children }) => {
+    const handleClick = (e) => {
+        if (!active && onClick) {
+            onClick();
+        }
+    };
+    const childrenClassNames = classNames(active ? styles['children--active'] : styles['children--inactive'], styles.children);
+    const iconClassNames = classNames(childrenClassNames, styles.icon);
+    return (React.createElement("button", { className: classNames(styles.breadcrumb), onClick: handleClick },
+        icon && React.createElement("span", { className: iconClassNames }, icon),
+        React.createElement(Typography, { variant: "Body2-Medium", style: { fontWeight: '500' }, className: childrenClassNames }, label || children)));
+};

package/dist/components/Breadcrumb/Breadcrumb.module.css

@@ -0,0 +1,30 @@
+.breadcrumb {
+	display: flex;
+	align-items: center;
+	background: none;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+}
+
+.icon {
+	gap: none;
+	margin-right: 6px;
+}
+
+.children {
+	display: inline-flex;
+	gap: 6px;
+}
+
+.children:hover {
+	text-decoration: underline;
+}
+
+.children--active {
+	color: var(--text-dark);
+}
+
+.children--inactive {
+	color: var(--icons-grey);
+}

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BreadcrumbsProps } from '../../types';
+export declare const Breadcrumbs: FC<BreadcrumbsProps>;

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './Breadcrumbs.module.css';
+export const Breadcrumbs = ({ className, separator = '/', children }) => {
+    return (React.createElement("nav", { className: classNames(styles.breadcrumbs, className) }, React.Children.map(children, (child, index) => {
+        return (React.createElement(React.Fragment, { key: index },
+            child,
+            index < children.length - 1 && (React.createElement("span", { className: styles.separator }, separator))));
+    })));
+};

package/dist/components/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,13 @@
+.breadcrumbs {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+  }
+  
+  .separator {
+	font-family: var(--font-family-content);
+	font-weight: 500;
+	font-size: var(--font-size-12);
+	color: var(--icons-grey);
+	margin: 0 8px;
+  }

package/dist/components/Button/Button.js

@@ -82,8 +82,8 @@ export const Button = ({ label, variant = 'fill', size = 'md', style, condition,
     }, [condition, error]);
     const iconColorStyle = iconColorFn();
     if (!buttonStyle) {
-        return React.createElement("button", { className: buttonClasses },
-            React.createElement(Typography, { variant: 'Body2' }, "\u041A\u043D\u043E\u043F\u043A\u0430"));
+        return (React.createElement("button", { className: buttonClasses },
+            React.createElement(Typography, { variant: "Body1" }, "\u041A\u043D\u043E\u043F\u043A\u0430")));
     }
     return (React.createElement("button", { className: buttonClasses, style: color && !error ? {
             '--button-color': color,
@@ -97,5 +97,5 @@ export const Button = ({ label, variant = 'fill', size = 'md', style, condition,
                 htmlColor: iconColorStyle,
                 strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
             }),
-        (buttonStyle === 'text' || buttonStyle === 'default') && React.createElement(Typography, { variant: 'Body2' }, label ? label : (typeof children === 'string' && children))));
+        (buttonStyle === 'text' || buttonStyle === 'default') && (React.createElement(Typography, { variant: "Body1" }, label ? label : typeof children === 'string' && children))));
 };

package/dist/components/ColorPicker/ColorPicker.module.css

@@ -1,4 +1,3 @@
-
 .colorPicker {
   -webkit-appearance: none;
   appearance: none;
@@ -9,14 +8,14 @@
   padding: 0;
 }
 
-.colorPicker:hover{
+.colorPicker:hover {
   box-shadow: 0px 0px 2.9px rgba(0, 0, 0, 0.1);
   background-color: var(--white);
   border-radius: 50%;
   padding: 0;
 }
 
-.colorPicker--defaultColor{
+.colorPicker--defaultColor {
   background: conic-gradient(
     rgba(255, 59, 48) 0deg,
     rgb(255, 59, 48) 35deg,
@@ -55,8 +54,6 @@
   );
 } */
 
-
-
 /* Обертка для всех цветов */
 .colorPickerWrapper {
   display: flex;
@@ -70,7 +67,6 @@
   padding: 5px;
 }
 
-
 /* Обертка для каждого цвета */
 .circle {
   border-radius: 50%;
@@ -80,7 +76,6 @@
   /* margin: 3px; */
 }
 
-
 /* Заданный основной цвет */
 .mainColor {
   position: relative;
@@ -93,13 +88,13 @@
   top: 50%;
   right: -6px;
   transform: translateY(-50%);
-  width: 1px; 
+  width: 1px;
   height: 20px;
-  background-color: var(--grey-light); 
+  background-color: var(--grey-light);
 }
 
 /* Обертка для выбора цветов */
-.colorPicker{
+.colorPicker {
   position: relative;
   display: inline-block;
 }
@@ -127,7 +122,7 @@
   z-index: 100;
 }
 
-:global(.w-color-swatch){
+:global(.w-color-swatch) {
   padding: 10px !important;
   border-radius: 10px !important;
   width: fit-content !important;
@@ -139,8 +134,8 @@
 }
 
 :global(.w-color-swatch) > div:nth-child(1),
-:global(.w-color-swatch) > div:nth-child(2){
- display: none !important;
+:global(.w-color-swatch) > div:nth-child(2) {
+  display: none !important;
 }
 :global(.w-color-swatch) > div:nth-child(3) {
   width: 195px !important;
@@ -148,76 +143,75 @@
   border-radius: 10px !important;
 }
 
-:global(.w-color-swatch) > div:nth-child(4){
+:global(.w-color-swatch) > div:nth-child(4) {
   gap: 15px !important;
   padding: 10px 0 !important;
   /* width: 80%; */
 }
-:global(.w-color-swatch) > div:nth-child(5){
+:global(.w-color-swatch) > div:nth-child(5) {
   padding: 0 !important;
-
 }
-:global(.w-color-swatch) > div:nth-child(5) > div:nth-child(2){
+:global(.w-color-swatch) > div:nth-child(5) > div:nth-child(2) {
   display: none !important;
   /* width: 80%; */
 }
 /* Для всех инпутов в пикере */
 :global(.w-color-chrome) :global(.w-color-editable-input) input {
-  font-family: var(--font-family) !important;
+  font-family: var(--font-family-content) !important;
   font-style: normal !important;
   font-weight: 400 !important;
   line-height: 14px !important;
   font-size: 12px !important;
   margin: 0 !important;
-}     
-:global(.w-color-editable-input){
+}
+:global(.w-color-editable-input) {
   margin: 0 !important;
   max-width: 30px !important;
   flex-direction: column-reverse !important;
-  --editable-input-box-shadow : none !important;
+  --editable-input-box-shadow: none !important;
 }
-:global(.w-color-editable-input-rgba){
+:global(.w-color-editable-input-rgba) {
   justify-content: end !important;
 }
 
 :global(.w-color-editable-input) > span {
   padding-top: 0 !important;
 }
-:global(.w-color-editable-input:nth-child(1))> input{
+:global(.w-color-editable-input:nth-child(1)) > input {
   border-radius: 10px 0 0 10px !important;
   border: 1px solid var(--grey-light) !important;
 }
-:global(.w-color-editable-input:nth-child(2))> input{
+:global(.w-color-editable-input:nth-child(2)) > input {
   border-radius: 0 0 0 0px !important;
-border: 1px solid var(--grey-light) !important;
-border-left: none !important;
+  border: 1px solid var(--grey-light) !important;
+  border-left: none !important;
 }
-:global(.w-color-editable-input:nth-child(3))> input{
+:global(.w-color-editable-input:nth-child(3)) > input {
   border-radius: 0 0 0 0px !important;
   border: 1px solid var(--grey-light) !important;
-  border-left: none !important; 
+  border-left: none !important;
 }
-:global(.w-color-editable-input:nth-child(4))> input{
+:global(.w-color-editable-input:nth-child(4)) > input {
   border-radius: 0px 10px 10px 0px !important;
   border: 1px solid var(--grey-light) !important;
-  border-left: none !important; 
+  border-left: none !important;
 }
 /* Для лейблов */
 :global(.w-color-chrome-fields) :global(.w-color-editable-input) label {
-  font-family: var(--font-family) !important;
+  font-family: var(--font-family-content) !important;
   font-style: normal !important;
   font-weight: 400 !important;
   line-height: 16.5px !important;
   font-size: 16px !important;
 }
 
-:global(.w-color-alpha-horizontal > div.w-color-interactive){
+:global(.w-color-alpha-horizontal > div.w-color-interactive) {
   border-radius: 8px !important;
 }
-:global(.w-color-alpha-horizontal:first-of-type > div:first-child){
+:global(.w-color-alpha-horizontal:first-of-type > div:first-child) {
   border-radius: 50px !important;
 }
-:global(.w-color-alpha-horizontal:nth-of-type(2) > div:first-child){
+:global(.w-color-alpha-horizontal:nth-of-type(2) > div:first-child) {
   border-radius: 50px !important;
 }
 
@@ -229,21 +223,21 @@ border-left: none !important;
   padding: 10px;
 }
 
-.hex{
+.hex {
   position: absolute;
   bottom: 20px;
   left: -10px;
 }
-.hex :global(.w-color-editable-input){
-    border-radius: 10px !important; 
+.hex :global(.w-color-editable-input) {
+  border-radius: 10px !important;
 }
 .hex > :global(.w-color-editable-input) > input {
   /* padding: 0 !important; */
   font-size: 12px !important;
-  font-family: var(--font-family) !important;
+  font-family: var(--font-family-content) !important;
   padding: 5px !important;
   width: 70px !important;
   height: 45px !important;
-  border-radius: 10px !important; 
+  border-radius: 10px !important;
   text-align: center !important;
 }

package/dist/components/DateInput/DateInput.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { DateInputProps } from '../../types';
+import 'react-datepicker/dist/react-datepicker.css';
+interface CustomDatePickerProps {
+    minDate?: Date;
+    maxDate?: Date;
+    inputClassName?: string;
+    calendarClassName?: string;
+    dateFormat?: string;
+}
+export declare const DateInput: FC<DateInputProps & CustomDatePickerProps>;
+export {};