kamotive_ui 1.2.11 → 1.2.13

package/dist/components/Dialog/Dialog.d.ts

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

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './Dialog.module.css';
+import classNames from 'classnames';
+export const Dialog = ({ open, maxWidth = 'md', children, style, className, overlay = true, fullWidth = false }) => {
+    const isMaxWidthInPx = typeof maxWidth === 'string' && !isNaN(Number(maxWidth.replace('px', '')));
+    return (React.createElement(React.Fragment, null,
+        open && overlay && React.createElement("div", { className: styles.dialogOverlay }),
+        React.createElement("dialog", { open: open, className: classNames(styles['dialog'], !isMaxWidthInPx && styles[`maxWidth--${maxWidth}`], className), style: Object.assign(Object.assign({}, style), { maxWidth: isMaxWidthInPx ? maxWidth : '', width: fullWidth ? '100%' : '' }) },
+            React.createElement("div", { className: styles['content'] }, children))));
+};

package/dist/components/Dialog/Dialog.module.css

@@ -0,0 +1,47 @@
+.dialogOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--dialog-overlay);
+    z-index: 999;
+}
+.dialog {
+    border: none;
+    border-radius: 15px;
+    box-shadow: 0px 4px 16px var(--dialog-overlay);
+    padding: 30px;
+    background-color: var(--white);
+    z-index: 1000;
+    position: fixed; 
+    top: 50%; 
+    left: 50%; 
+    transform: translate(-50%, -50%);
+}
+
+.content {
+    display: flex;
+    flex-direction: column; 
+    gap: 1rem;
+}
+
+.maxWidth--xs {
+    max-width: 300px; 
+}
+
+.maxWidth--sm {
+    max-width: 400px; 
+}
+
+.maxWidth--md {
+    max-width: 500px; 
+}
+
+.maxWidth--lg {
+    max-width: 600px; 
+}
+
+.maxWidth--xl {
+    max-width: 800px; 
+}

package/dist/components/IconButton/IconButton.d.ts

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

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './IconButton.module.css';
+export const IconButton = ({ icon, size = 'md', color, style, disabled = false, onClick, children, }) => {
+    return (React.createElement("button", { className: classNames(styles['iconButton'], styles[`iconButton--${size}`]), disabled: disabled, "aria-disabled": disabled, type: "button", onClick: onClick, style: style }, (icon || (typeof children === 'object' && children)) &&
+        React.cloneElement(icon, {
+            htmlColor: color,
+            strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
+        })));
+};

package/dist/components/IconButton/IconButton.module.css

@@ -0,0 +1,26 @@
+.iconButton {
+    cursor: pointer;
+    box-sizing: border-box;
+    background-color: var(--white);
+    border: none;
+}
+
+.iconButton--sm svg{
+    width: 14px;
+    height: 14px;
+}
+
+.iconButton--md svg{
+    width: 16px;
+    height: 16px;
+}
+
+.iconButton--lg svg{
+    width: 18px;
+    height: 18px;
+}
+
+.iconButton:disabled {
+    cursor: not-allowed;
+    box-shadow: none;
+}

package/dist/index.d.ts

@@ -17,5 +17,7 @@ export { Typography as Typography } from './components/Typography/Typography';
 export { Loader as Loader } from './components/Loader/Loader';
 export { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
 export { Spinner as Spinner } from './components/Spinner/Spinner';
-export type { ButtonProps, InputProps, DateInputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, LoaderProps, FileAttachProps, SpinnerProps } from './types';
+export { Dialog as Dialog } from './components/Dialog/Dialog';
+export { IconButton as IconButton } from './components/IconButton/IconButton';
+export type { ButtonProps, InputProps, DateInputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, LoaderProps, FileAttachProps, SpinnerProps, DialogProps, IconButtonProps, } from './types';
 import './fonts.css';

package/dist/index.js

@@ -17,4 +17,6 @@ export { Typography as Typography } from './components/Typography/Typography';
 export { Loader as Loader } from './components/Loader/Loader';
 export { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
 export { Spinner as Spinner } from './components/Spinner/Spinner';
+export { Dialog as Dialog } from './components/Dialog/Dialog';
+export { IconButton as IconButton } from './components/IconButton/IconButton';
 import './fonts.css';

package/dist/types/index.d.ts

@@ -369,7 +369,7 @@ export interface FileAttachProps {
     acceptedFormats?: Accept;
     /**Добавленные файлы */
     addedFiles: File[];
-    /**Сосотояние для добавления файлов */
+    /**Состояние для добавления файлов */
     setAddedFiles: (addedFiles: File[]) => void;
     /**Заблокировано добавление файлов*/
     disabled?: boolean;
@@ -378,3 +378,35 @@ export interface FileAttachProps {
     /** Стили передаваемые напрямую */
     style?: CSSProperties;
 }
+export interface DialogProps {
+    /** Флаг открытия окна */
+    open: boolean;
+    /** Максимальная ширина окна */
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
+    /** Содержимое окна */
+    children?: React.ReactNode;
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
+    /** Дополнительный класс */
+    className?: string;
+    /**Задний фон окна */
+    overlay?: boolean;
+    /**Окно растягивается до максимальной ширины*/
+    fullWidth?: boolean;
+}
+export interface IconButtonProps {
+    /** Иконка кнопки */
+    icon?: React.ReactNode;
+    /** Размер кнопки */
+    size?: 'sm' | 'md' | 'lg';
+    /**Цвет кнопки */
+    color?: string;
+    /** Стиль кнопки иконки*/
+    style?: CSSProperties;
+    /** Заблокированная кнопка */
+    disabled?: boolean;
+    /** Callback, который будет вызван при клике по кнопке */
+    onClick: () => void;
+    /** Дочерние элементы */
+    children?: ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kamotive_ui",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [