kamotive_ui 1.2.0 → 1.2.2

package/dist/components/Snackbar/enums.js

@@ -0,0 +1,10 @@
+/**
+ * @type {enum} ESnackbarTypes
+ */
+export var ESnackbarTypes;
+(function (ESnackbarTypes) {
+    ESnackbarTypes["success"] = "success";
+    ESnackbarTypes["error"] = "error";
+    ESnackbarTypes["warning"] = "warning";
+    ESnackbarTypes["info"] = "info";
+})(ESnackbarTypes || (ESnackbarTypes = {}));

package/dist/components/Tab/Tab.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TabProps } from 'kamotive_ui';
+export declare const Tab: FC<TabProps>;

package/dist/components/Tab/Tab.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './Tab.module.css';
+import classNames from 'classnames';
+export const Tab = ({ value, onClick, label, selected, disabled = false }) => {
+    const handleClick = (e) => {
+        if (onClick && value && !disabled) {
+            onClick(value);
+        }
+    };
+    return (React.createElement("button", { role: "tab", "aria-selected": selected, "aria-disabled": disabled, value: value, className: classNames(styles['tab'], {
+            'selected': selected,
+            'disabled': disabled,
+        }), onClick: handleClick }, label));
+};

package/dist/components/Tab/Tab.module.css

@@ -0,0 +1,45 @@
+.story--wrapper-tab {
+  background-color: var(--white);
+  padding: 30px;
+  border-radius: 10px;
+}
+
+.tab {
+  width: 126px;
+  height: 24px;
+  padding: 3px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--tab-extraLight);
+  border: none;
+
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.tab:hover {
+  background-color: var(--tab-medium);
+  border-radius: 7px;
+}
+
+.selected {
+  border: 0.5px solid var(--tab-medium);
+  border-radius: 7px;
+  font-weight: 600;
+  background-color: var(--white);
+  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.04);
+}
+
+.selected:hover {
+  background-color: var(--tab-light);
+}
+
+.tab.disabled {
+  cursor: not-allowed;
+  color: var(--text-btn);
+  background-color: transparent;
+}

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,3 @@
+import { TabsProps } from 'kamotive_ui';
+import { FC } from 'react';
+export declare const Tabs: FC<TabsProps>;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './Tabs.module.css';
+export const Tabs = ({ value, onChange, children }) => {
+    var _a;
+    const selectedTabContent = (_a = children === null || children === void 0 ? void 0 : children.find((child) => child.props.value === value)) === null || _a === void 0 ? void 0 : _a.props.children;
+    const handleTabChange = (newValue) => {
+        if (onChange && newValue) {
+            onChange(newValue);
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { role: "tablist", className: styles['tabs'] }, children === null || children === void 0 ? void 0 : children.map((child, index) => React.cloneElement(child, {
+            key: index,
+            selected: child.props.value === value,
+            disabled: child.props.disabled,
+            onClick: () => handleTabChange(child.props.value),
+        }))),
+        React.createElement("div", { role: "tabpanel", "aria-labelledby": value }, selectedTabContent)));
+};

package/dist/components/Tabs/Tabs.module.css

@@ -0,0 +1,55 @@
+.story--wrapper-tabs {
+  background-color: var(--white);
+  padding: 30px;
+  border-radius: 10px;
+}
+
+.tabs {
+  display: flex;
+  flex-direction: row;
+  gap: 3px;
+  padding: 2px;
+  border-radius: 9px;
+  background-color: var(--tab-extraLight);
+  width: fit-content;
+}
+
+.tab {
+  width: 126px;
+  height: 24px;
+  padding: 3px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--tab-extraLight);
+  border: none;
+
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.tab:hover {
+  background-color: var(--tab-medium);
+  border-radius: 7px;
+}
+
+.selected {
+  border: 0.5px solid var(--tab-medium);
+  border-radius: 7px;
+  font-weight: 600;
+  background-color: var(--white);
+  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.04);
+}
+
+.selected:hover {
+  background-color: var(--tab-light);
+}
+
+.tab.disabled {
+  cursor: not-allowed;
+  color: var(--text-btn);
+  background-color: transparent;
+}

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TagProps } from 'kamotive_ui';
+export declare const Tag: FC<TagProps>;

package/dist/components/Tag/Tag.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './Tag.module.css';
+import classNames from 'classnames';
+export const Tag = ({ label, color = 'red', closeButton = false, onClick }) => {
+    const hexToRgba = (hex, alpha) => {
+        //преобразуем в rgba для заднего фона
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    };
+    return (React.createElement("span", { className: classNames(styles['tag'], !color.startsWith('#') ? `${color}` : ''), style: color.startsWith('#')
+            ? {
+                color: color,
+                border: `1px solid ${color}`,
+                backgroundColor: hexToRgba(color, 0.2),
+            }
+            : {} },
+        label,
+        closeButton && (React.createElement("button", { type: "button", "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", style: color.startsWith('#')
+                ? { '--close-color': color }
+                : { '--close-color': `var(--${color})` }, onClick: onClick }))));
+};

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

@@ -0,0 +1,145 @@
+.story--wrapper-tag {
+    background-color: var(--white);
+    padding: 30px;
+    border-radius: 10px;
+    width: 300px;
+}
+
+.tag {
+    padding: 4px 10px;
+    border-radius: 8px;
+
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 14px;
+}
+
+.tag .circle {
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  position: relative;
+}
+
+.tag button[aria-label="Закрыть"] {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    position: relative;
+    width: 8px;
+    height: 8px;
+}
+
+.tag button[aria-label="Закрыть"]::before,
+.tag button[aria-label="Закрыть"]::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    height: 1px;
+    width: 100%;
+    background-color: var(--close-color); 
+}
+
+.tag button[aria-label="Закрыть"]::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.tag.red {
+    color: var(--red);
+    background-color: var(--redBackground);
+    border: 1px solid var(--red)
+}
+
+.tag.red:hover {
+    background-color: var(--redHover);
+}
+
+.tag.orange {
+    color: var(--orange);
+    background-color: var(--orangeBackground);
+    border: 1px solid var(--orange)
+}
+
+.tag.orange:hover {
+    background-color: var(--orangeHover);
+}
+
+.tag.yellow {
+    color: var(--yellowText);
+    background-color: var(--yellowBackground);
+    border: 1px solid var(--yellow)
+}
+
+.tag.yellow:hover {
+    background-color: var(--yellowHover);
+}
+
+.tag.green {
+    color: var(--green);
+    background-color: var(--greenBackground);
+    border: 1px solid var(--green)
+}
+
+.tag.green:hover {
+    background-color: var(--greenHover);
+}
+
+.tag.purple {
+    color: var(--purple);
+    background-color: var(--purpleBackground);
+    border: 1px solid var(--purple)
+}
+
+.tag.purple:hover {
+    background-color: var(--purpleHover);
+}
+
+.tag.indigo {
+    color: var(--indigo);
+    background-color: var(--indigoBackground);
+    border: 1px solid var(--indigo)
+}
+
+.tag.indigo:hover {
+    background-color: var(--indigoHover);
+}
+
+.tag.blue {
+    color: var(--blue);
+    background-color: var(--blueBackground);
+    border: 1px solid var(--blue)
+}
+
+.tag.blue:hover {
+    background-color: var(--blueHover);
+}
+
+.tag.teal {
+    color: var(--teal);
+    background-color: var(--tealBackground);
+    border: 1px solid var(--teal)
+}
+
+.tag.teal:hover {
+    background-color: var(--tealHover);
+}
+
+.tag.pink {
+    color: var(--pink);
+    background-color: var(--pinkBackground);
+    border: 1px solid var(--pink)
+}
+
+.tag.pink:hover {
+    background-color: var(--pinkHover);
+}

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ToggleButtonProps } from 'kamotive_ui';
+export declare const ToggleButton: FC<ToggleButtonProps>;

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './ToggleButton.module.css';
+import classNames from 'classnames';
+export const ToggleButton = ({ value, onChange, disabled = false, size = 'sm', label }) => {
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    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

@@ -0,0 +1,75 @@
+.story--wrapper-toggle {
+    background-color: var(--white);
+    padding: 30px;
+    border-radius: 10px;
+}
+.toggle {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    gap: 5px;
+
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: var(--text-dark);
+}
+.toggleInput.sm {
+    width: 22px;
+    height: 12px;
+}
+.toggleInput.md {
+    width: 28px;
+    height: 16px;
+}
+.toggleInput {
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-block;
+    border-radius: 10px;
+    background-color: var(--grey-medium);
+    background-clip: content-box;
+    position: relative;
+    cursor: pointer;
+}
+.toggleInput:checked {
+    background-color: var(--blue-main);
+}
+.toggleInput:disabled:checked {
+    background-color: var(--blue-disabled);
+}
+/* Круг слева */
+.toggleInput::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-100%, -50%);
+    width: 45%;
+    height: 85%;
+    border-radius: 50%;
+    background-color: var(--white);
+}
+.toggleInput:hover::after {
+    box-shadow: 0 0 2px var(--blue-main);
+}
+.toggleInput:disabled::after {
+    background-color: var(--grey-extraLight);
+    cursor: not-allowed;
+    box-shadow: none;
+}
+/* Круг справа */
+.toggleInput:checked::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(0%, -50%);
+    width: 45%;
+    height: 85%;
+    border-radius: 50%;
+    background-color: var(--white);
+}
+

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { TypographyProps } from 'kamotive_ui';
+/**
+ * Компонент Typography для стилизованного отображения текста.
+ */
+export declare const Typography: FC<TypographyProps>;

package/dist/components/Typography/Typography.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+;
+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([`typography--variant-${variant}`], className);
+    const combinedStyle = Object.assign({ color }, style);
+    return (React.createElement("span", Object.assign({ className: styles[`${variantClass} ${className}`], style: combinedStyle }, props), children));
+};