@true-engineering/true-react-common-ui-kit 2.4.0 → 2.5.0

package/dist/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/AccountInfo/AccountInfo.styles.ts

@@ -1,55 +1,55 @@
-import { animations } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-//
-
-export const styles = {
-  root: {
-    display: 'flex',
-  },
-
-  account: {
-    display: 'flex',
-    position: 'relative',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-
-  accountName: {
-    margin: [0, 2, 0, 10],
-    fontSize: 14,
-    transition: 'color 0.25s ease-in-out',
-  },
-
-  accountNameOpened: {},
-
-  accountChevron: {
-    width: 16,
-    height: 16,
-    transition: 'ease-in-out 0.25s',
-    transitionProperty: 'transform, color',
-  },
-
-  accountChevronOpened: {
-    transform: 'rotate(180deg)',
-  },
-
-  accountMenu: {
-    position: 'absolute',
-    zIndex: 90,
-    top: '100%',
-    right: 0,
-    marginTop: 8,
-  },
-
-  avatarIcon: {
-    width: 32,
-    height: 32,
-  },
-
-  ...animations.slideUp,
-
-  tweakList: {},
-};
-
-export type AccountInfoStyles = ComponentStyles<typeof styles>;
+import { animations } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+//
+
+export const styles = {
+  root: {
+    display: 'flex',
+  },
+
+  account: {
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
+
+  accountName: {
+    margin: [0, 2, 0, 10],
+    fontSize: 14,
+    transition: 'color 0.25s ease-in-out',
+  },
+
+  accountNameOpened: {},
+
+  accountChevron: {
+    width: 16,
+    height: 16,
+    transition: 'ease-in-out 0.25s',
+    transitionProperty: 'transform, color',
+  },
+
+  accountChevronOpened: {
+    transform: 'rotate(180deg)',
+  },
+
+  accountMenu: {
+    position: 'absolute',
+    zIndex: 90,
+    top: '100%',
+    right: 0,
+    marginTop: 8,
+  },
+
+  avatarIcon: {
+    width: 32,
+    height: 32,
+  },
+
+  ...animations.slideUp,
+
+  tweakList: {},
+};
+
+export type AccountInfoStyles = ComponentStyles<typeof styles>;

package/src/components/AccountInfo/index.ts

@@ -1,2 +1,2 @@
-export * from './AccountInfo';
-export type { AccountInfoStyles } from './AccountInfo.styles';
+export * from './AccountInfo';
+export type { AccountInfoStyles } from './AccountInfo.styles';

package/src/components/AddButton/AddButton.stories.tsx

@@ -1,21 +1,21 @@
-import { ComponentStory } from '@storybook/react';
-import { AddButton } from './AddButton';
-
-export default {
-  title: 'AddButton',
-  component: AddButton,
-};
-
-const Template: ComponentStory<typeof AddButton> = (args) => (
-  <AddButton {...args} onClick={console.log} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Добавить билет',
-  isDisabled: false,
-  isFullWidth: false,
-};
-
-Default.parameters = { controls: { exclude: ['onClick'] } };
+import { ComponentStory } from '@storybook/react';
+import { AddButton } from './AddButton';
+
+export default {
+  title: 'AddButton',
+  component: AddButton,
+};
+
+const Template: ComponentStory<typeof AddButton> = (args) => (
+  <AddButton {...args} onClick={console.log} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Добавить билет',
+  isDisabled: false,
+  isFullWidth: false,
+};
+
+Default.parameters = { controls: { exclude: ['onClick'] } };

package/src/components/AddButton/AddButton.styles.ts

@@ -1,34 +1,34 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0px 16px',
-    height: 52,
-    cursor: 'pointer',
-    outline: 'none',
-    transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
-    fontSize: 14,
-
-    '&:hover': {
-      transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
-    },
-  },
-
-  disabled: {
-    cursor: 'default',
-  },
-
-  icon: {
-    width: 20,
-    display: 'inline-block',
-    marginRight: 8,
-  },
-
-  fullWidth: {
-    width: '100%',
-  },
-};
-
-export type AddButtonStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0px 16px',
+    height: 52,
+    cursor: 'pointer',
+    outline: 'none',
+    transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
+    fontSize: 14,
+
+    '&:hover': {
+      transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
+    },
+  },
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  icon: {
+    width: 20,
+    display: 'inline-block',
+    marginRight: 8,
+  },
+
+  fullWidth: {
+    width: '100%',
+  },
+};
+
+export type AddButtonStyles = ComponentStyles<typeof styles>;

package/src/components/AddButton/index.ts

@@ -1,2 +1,2 @@
-export * from './AddButton';
-export type { AddButtonStyles } from './AddButton.styles';
+export * from './AddButton';
+export type { AddButtonStyles } from './AddButton.styles';

package/src/components/Button/Button.styles.ts

@@ -1,196 +1,196 @@
-import { ComponentStyles } from '../../types';
-import { ThemedPreloaderStyles } from '../ThemedPreloader';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    cursor: 'pointer',
-    outline: 'none',
-    boxSizing: 'border-box',
-    transition: '0.25s ease-in-out',
-    transitionProperty: 'background-color, color, box-shadow, border-color',
-    maxWidth: '100%',
-    border: [1, 'solid', 'transparent'],
-    position: 'relative',
-    boxShadow: 'none',
-
-    '&[disabled]': {
-      cursor: 'default',
-      pointerEvents: 'none',
-    },
-  },
-
-  primary: {},
-  secondary: {},
-  outline: {},
-  warning: {},
-  destructive: {},
-  text: {},
-  custom: {},
-
-  children: {},
-
-  icon: {
-    width: 20,
-    height: 20,
-    flexShrink: 0,
-    transition: 'color 0.25s ease-in-out',
-  },
-
-  iconFromLeft: {
-    flexDirection: 'row',
-    gap: 6,
-
-    '& $icon': {
-      marginLeft: -4,
-    },
-  },
-
-  iconFromRight: {
-    flexDirection: 'row-reverse',
-    gap: 6,
-
-    '& $icon': {
-      marginRight: -4,
-    },
-  },
-
-  onlyIcon: {},
-
-  withIcon: {},
-
-  s: {
-    padding: [0, 12],
-    height: 32,
-    fontSize: 14,
-    letterSpacing: 0.15,
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 32,
-    },
-
-    '& $icon': {
-      width: 16,
-      height: 16,
-    },
-
-    '& $iconFromLeft': {
-      gap: 4,
-    },
-
-    '& $iconFromRight': {
-      gap: 4,
-    },
-  },
-
-  m: {
-    padding: [0, 12],
-    height: 42,
-    fontSize: 16,
-
-    '& $iconFromLeft': {
-      gap: 6,
-    },
-
-    '& $iconFromRight': {
-      gap: 6,
-    },
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 42,
-    },
-  },
-
-  l: {
-    padding: [0, 16],
-    height: 48,
-    fontSize: 16,
-
-    '& $iconFromLeft': {
-      gap: 6,
-    },
-
-    '& $iconFromRight': {
-      gap: 6,
-    },
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 48,
-    },
-  },
-
-  xl: {
-    padding: [0, 20],
-    height: 56,
-    fontSize: 16,
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 56,
-    },
-
-    '& $iconFromLeft': {
-      gap: 8,
-    },
-
-    '& $iconFromRight': {
-      gap: 8,
-    },
-  },
-
-  fullWidth: {
-    minWidth: 'auto',
-    width: '100%',
-  },
-
-  inline: {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-
-  active: {},
-
-  content: {
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-  },
-
-  loader: {
-    display: 'none',
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    transform: 'translate(-50%, -50%)',
-  },
-
-  loading: {
-    '& $content': {
-      visibility: 'hidden',
-    },
-
-    '& $loader': {
-      display: 'block',
-    },
-  },
-
-  disabled: {},
-
-  tweakPreloader: {},
-};
-
-export const dotsPreloaderStyles: ThemedPreloaderStyles = {
-  tweakPreloaderComponent: {
-    fadedDot: {
-      width: 6,
-      height: 6,
-    },
-  },
-};
-
-export type ButtonStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+import { ThemedPreloaderStyles } from '../ThemedPreloader';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    outline: 'none',
+    boxSizing: 'border-box',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color, color, box-shadow, border-color',
+    maxWidth: '100%',
+    border: [1, 'solid', 'transparent'],
+    position: 'relative',
+    boxShadow: 'none',
+
+    '&[disabled]': {
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+  },
+
+  primary: {},
+  secondary: {},
+  outline: {},
+  warning: {},
+  destructive: {},
+  text: {},
+  custom: {},
+
+  children: {},
+
+  icon: {
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+    transition: 'color 0.25s ease-in-out',
+  },
+
+  iconFromLeft: {
+    flexDirection: 'row',
+    gap: 6,
+
+    '& $icon': {
+      marginLeft: -4,
+    },
+  },
+
+  iconFromRight: {
+    flexDirection: 'row-reverse',
+    gap: 6,
+
+    '& $icon': {
+      marginRight: -4,
+    },
+  },
+
+  onlyIcon: {},
+
+  withIcon: {},
+
+  s: {
+    padding: [0, 12],
+    height: 32,
+    fontSize: 14,
+    letterSpacing: 0.15,
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 32,
+    },
+
+    '& $icon': {
+      width: 16,
+      height: 16,
+    },
+
+    '& $iconFromLeft': {
+      gap: 4,
+    },
+
+    '& $iconFromRight': {
+      gap: 4,
+    },
+  },
+
+  m: {
+    padding: [0, 12],
+    height: 42,
+    fontSize: 16,
+
+    '& $iconFromLeft': {
+      gap: 6,
+    },
+
+    '& $iconFromRight': {
+      gap: 6,
+    },
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 42,
+    },
+  },
+
+  l: {
+    padding: [0, 16],
+    height: 48,
+    fontSize: 16,
+
+    '& $iconFromLeft': {
+      gap: 6,
+    },
+
+    '& $iconFromRight': {
+      gap: 6,
+    },
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 48,
+    },
+  },
+
+  xl: {
+    padding: [0, 20],
+    height: 56,
+    fontSize: 16,
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 56,
+    },
+
+    '& $iconFromLeft': {
+      gap: 8,
+    },
+
+    '& $iconFromRight': {
+      gap: 8,
+    },
+  },
+
+  fullWidth: {
+    minWidth: 'auto',
+    width: '100%',
+  },
+
+  inline: {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  active: {},
+
+  content: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+  },
+
+  loader: {
+    display: 'none',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+
+  loading: {
+    '& $content': {
+      visibility: 'hidden',
+    },
+
+    '& $loader': {
+      display: 'block',
+    },
+  },
+
+  disabled: {},
+
+  tweakPreloader: {},
+};
+
+export const dotsPreloaderStyles: ThemedPreloaderStyles = {
+  tweakPreloaderComponent: {
+    fadedDot: {
+      width: 6,
+      height: 6,
+    },
+  },
+};
+
+export type ButtonStyles = ComponentStyles<typeof styles>;