@itcase/ui 1.2.23 → 1.2.25

package/dist/stories/mixins_animation.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Animation" />
+
+# Animation

package/dist/stories/mixins_dark-light.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Dark-Light" />
+
+# Dark/Light
+
+Для работы с темами используются пакеты `postcss-dark-theme-class` и `postcss-mixins`
+
+```css
+:root {
+	@media (prefers-color-scheme: light) {
+		--color-test: hsla(51, 98%, 61%, 1);
+	}
+	@media (prefers-color-scheme: dark) {
+		--color-test: hsla(221, 95%, 40%, 1);
+	}
+}
+```
+
+# Миксины для указания `CSS`
+
+```css
+@define-mixin dark {
+  @media (prefers-color-scheme: dark) {
+    & {
+      @mixin-content;
+    }
+  }
+}
+
+@define-mixin light {
+  @media (prefers-color-scheme: light) {
+    & {
+      @mixin-content;
+    }
+  }
+  @mixin-content;
+}
+```
+
+# Пример использования
+
+```css
+.block {
+	width: 100px;
+	height: 100px;
+	@mixin dark {
+	    background: #000;
+	  }
+	@mixin light {
+	    background: #fff;
+	}
+}
+```

package/dist/stories/mixins_elevation.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Elevation" />
+
+# Elevation

package/dist/stories/mixins_fill-gradient.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Fill Gradient" />
+
+# Fill Gradient

package/dist/stories/mixins_typography.mdx

@@ -0,0 +1,133 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Typography" />
+
+# Typography
+
+
+Общие настройки для текста находятся в файле `fonts.css`
+
+Название переменных для шрифтов задаются в формате порядковых числительных за исключение шрифта для писем.
+
+```bash
+:root {
+  --font-primary: 'Inter', sans-serif;
+  --font-secondary: 'Roboto', sans-serif;
+  --font-email: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+}
+```
+
+# Миксин `@font`
+
+В большинстве проектов используются отзывчивые шрифты с использованием миксина `@font` и пакетов: `postcss-mixins` и `postcss-responsive-type`
+
+```css
+@define-mixin font $fontWeight, $minFontSize, $minLineHeight, $minLetterSpacing, $maxFontSize, $maxLineHeight, $maxLetterSpacing, $fontFamily {
+  font-size: responsive $minFontSize $maxFontSize;
+  font-range: var(--min-max);
+  font-weight: $fontWeight;
+  font-family: $fontFamily;
+  line-height: responsive $minLineHeight $maxLineHeight;
+  line-height-range: var(--min-max);
+  letter-spacing: responsive $minLetterSpacing $maxLetterSpacing;
+  letter-spacing-range: var(--min-max);
+  @media (--desktop-super-huge) {
+    font-size: $maxFontSize;
+    line-height: $maxLineHeight;
+    letter-spacing: $maxLetterSpacing;
+  }
+}
+```
+
+## Параметры миксина `@font`
+
+- `$fontWeight`  — вес шрифта `default: normal`
+- `$minFontSize` — минимальная высота строки
+- `$minLineHeight` — максимальный высота строки
+- `$maxFontSize` — минимальная ширина буквы
+- `$minLetterSpacing` — максимальный размер шрифта `default: normal`
+- `$maxLineHeight` — максимальная высота строки
+- `$maxLetterSpacing` — максимальная ширина буквы `default: normal`
+- `$fontFamily` — шрифт
+
+## Использование миксина `@font`
+
+Создание миксинов текстовых стилей с использование миксина `@font`
+
+```css
+@define-mixin h1 $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 36px, 36px, $minLetterSpacing, 80px, 80px, $maxLetterSpacing, var(--font-primary);
+}
+
+@define-mixin h5 $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 24px, 28px, $minLetterSpacing, 48px, 48px, $maxLetterSpacing, var(--font-primary);
+}
+
+@define-mixin text-l $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 24px, 28px, $minLetterSpacing, 32px, 40px, $maxLetterSpacing, var(--font-secondary);
+}
+
+@define-mixin text-xs $weight: normal, $minLetterSpacing: normal, $maxLetterSpacing: normal { {
+  @mixin font $fontWeight, 16px, 20px, $minLetterSpacing, 16px, 20px, $maxLetterSpacing, var(--font-secondary);
+}
+```
+
+## Пример использования миксинов текстовых стилей
+
+```css
+.title-block {
+    color: var(--color-surface-text-primary);
+    @mixin h1 bold;
+}
+```
+
+# Создание миксинов на основе `Text Styles`
+в Figma
+
+Например в Figma доступны следующий текстовые стили:
+
+
+
+## Пример созданных миксинов
+
+```css
+@define-mixin h1 $fontWeight: normal {
+  @mixin font $fontWeight, 24px, 28px, 24px, 28px, var(--font-primary);
+}
+
+@define-mixin h3 $fontWeight: normal {
+  @mixin font $fontWeight, 17px, 22px, 17px, 22px, var(--font-primary);
+}
+
+@define-mixin p $fontWeight: normal {
+  @mixin font $fontWeight, 14px, 18px, 14px, 18px, var(--font-primary);
+}
+
+@define-mixin text-xs $fontWeight: normal {
+  @mixin font $fontWeight, 16px, 20px, 16px, 20px, var(--font-primary);
+}
+
+@define-mixin text-l $fontWeight: normal {
+  @mixin font $fontWeight, 10px, 12px, 10px, 12px, var(--font-primary);
+}
+```
+
+## Использование в `CSS`
+
+```css
+.title-block-h1 {
+    @mixin h1 bold;
+}
+
+.title-block-3 {
+    @mixin h3 600;
+}
+
+p {
+    @mixin p;
+}
+
+.desc {
+    @mixin text-l;
+}
+```

package/dist/stories/mixins_utils.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Mixins / Utils" />
+
+# Utils

package/dist/stories/typography.mdx

@@ -0,0 +1,82 @@
+import { Meta, Typeset } from '@storybook/blocks'
+
+<Meta title="Tokens / Typography" />
+
+export const typography = {
+  type: {
+    primary: 'PF Din Display Pro Family, sans-serif',
+  },
+  weight: {
+    regular: '400',
+    bold: '700',
+    extrabold: '800',
+    black: '900',
+  },
+  size: {
+    h1: 64,
+    h2: 46,
+    h3: 32,
+    h4: 24,
+    h5: 18,
+    h6: 16,
+  },
+}
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+
+# Typography
+
+
+**Font:** PF Din Display Pro Family
+
+**Title:** H1- H6
+
+<Typeset
+  fontSizes={[
+    Number(typography.size.h1),
+    Number(typography.size.h2),
+    Number(typography.size.h3),
+    Number(typography.size.h4),
+    Number(typography.size.h5),
+    Number(typography.size.h6),
+  ]}
+  fontWeight={typography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>
+
+export const textography = {
+  type: {
+    primary: 'PF Din Display Pro Family, sans-serif',
+  },
+  weight: {
+    regular: '400',
+    semibold: '600',
+  },
+  size: {
+    xxl: 24,
+    xl: 22,
+    l: 20,
+    m: 16,
+    s: 14,
+    xs: 12,
+    xxs: 10,
+  },
+}
+
+**Text:** xxl- xxs
+
+<Typeset
+  fontSizes={[
+    Number(textography.size.xxl),
+    Number(textography.size.xl),
+    Number(textography.size.l),
+    Number(textography.size.m),
+    Number(textography.size.s),
+    Number(textography.size.xs),
+    Number(textography.size.xxs),
+  ]}
+  fontWeight={textography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={textography.type.primary}
+/>

package/dist/types/components/Notification/Notification.interface.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 import { tFillProps, tSizeProps, tTextColorProps, tTextSizeProps, titleSizePropsType } from '../../types';
 import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
@@ -36,6 +36,7 @@ export interface INotificationItemProps extends iStyleAttributes {
     titleTextColor?: tTextColorProps;
     titleTextSize?: titleSizePropsType;
     type?: string;
+    style?: CSSProperties;
     onClickClose?: (id?: number | string) => void;
     fill?: tFillProps;
 }

package/dist/types/components/Notification/NotificationItem.d.ts

@@ -1,10 +1,4 @@
 import { INotificationItemConfig, INotificationItemProps } from './Notification.interface';
 declare const notificationItemConfig: INotificationItemConfig;
 declare function NotificationItem(props: INotificationItemProps): import("react/jsx-runtime").JSX.Element;
-declare namespace NotificationItem {
-    var defaultProps: {
-        titleTextSize: string;
-        textSize: string;
-    };
-}
 export { NotificationItem, notificationItemConfig };

package/dist/types/components/Pagination/Pagination.d.ts

@@ -1,3 +1,4 @@
-import { iPaginationProps } from './Pagination.interface';
+import { IPaginationConfig, iPaginationProps } from './Pagination.interface';
+declare const paginationConfig: IPaginationConfig;
 declare function Pagination(props: iPaginationProps): import("react/jsx-runtime").JSX.Element;
-export { Pagination };
+export { Pagination, paginationConfig };

package/dist/types/components/Pagination/Pagination.interface.d.ts

@@ -1,45 +1,62 @@
 import { type ReactNode } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 import { alignmentPropsType, elevationPropsType, iconFillSizePropsType, tDirectionProps, tFillHoverProps, tFillProps, tItemColorProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorActiveProps, tTextColorProps, tTextSizeProps, tTextWrapProps } from '../../types';
-interface iPaginationProps extends iStyleAttributes {
-    allItemsCount?: number;
-    className?: string;
+import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
+export interface IPaginationThemeColor {
+    fill?: tFillProps;
+    fillHover?: tFillHoverProps;
+    gap?: string;
     marginPagesDisplayed?: number;
-    nextLabel?: ReactNode;
-    pageCountArray?: number[];
     pageCountDesc?: string;
-    pageCountDropdownItemLabelAlign?: tTextAlignProps;
-    pageCountDropdownItemWidth?: string;
     pageCountDescTextColor?: tTextColorProps;
     pageCountDescTextSize?: tTextSizeProps;
     pageCountDropdownAlignment?: alignmentPropsType;
     pageCountDropdownElevation?: elevationPropsType;
     pageCountDropdownFill?: tFillProps;
-    pageCountDropdownItemDividerDirection?: tDirectionProps;
     pageCountDropdownItemDividerFill?: tFillProps;
     pageCountDropdownItemDividerSize?: tSizeProps;
     pageCountDropdownItemFill?: tFillProps;
     pageCountDropdownItemFillActive?: tFillProps;
     pageCountDropdownItemFillActiveHover?: tFillHoverProps;
     pageCountDropdownItemFillHover?: tFillHoverProps;
+    pageCountDropdownItemLabelAlign?: tTextAlignProps;
     pageCountDropdownItemLabelColor?: tTextColorProps;
     pageCountDropdownItemLabelColorActive?: tTextColorActiveProps;
     pageCountDropdownItemLabelSize?: tTextSizeProps;
-    pageCountDropdownItemLabelWrap?: tTextWrapProps;
-    pageCountDropdownItemSize?: tSizeProps;
     pageCountDropdownItemShowDivider?: boolean;
+    pageCountDropdownItemSize?: tSizeProps;
+    pageCountDropdownItemWidth?: string;
     pageCountDropdownSet?: string;
     pageCountDropdownShape?: tShapeProps;
-    pageCountInputIcon?: ReactNode;
     pageCountInputIconColor?: tItemColorProps;
     pageCountInputIconFillSize?: iconFillSizePropsType;
     pageCountInputTextColor?: tTextColorProps;
     pageCountInputTextSize?: tTextSizeProps;
-    pageNumber: string;
+    pageRangeDisplayed?: number;
+    isPageCount?: boolean;
+}
+type appearanceKeysType = {} & tAppearanceKeysDefault;
+export type paginationAppearanceType = {
+    [key in appearanceKeysType]?: IPaginationThemeColor;
+};
+export interface IPaginationConfig {
+    appearance: paginationAppearanceType | undefined;
+    setAppearance: (newComponent: paginationAppearanceType) => void;
+}
+interface iPaginationProps extends IPaginationThemeColor, iStyleAttributes {
+    allItemsCount?: number;
+    appearance?: appearanceKeysType;
+    className?: string;
+    marginPagesDisplayed?: number;
+    nextLabel?: ReactNode;
+    pageCountArray?: number[];
+    pageCountDropdownItemDividerDirection?: tDirectionProps;
+    pageCountDropdownItemLabelWrap?: tTextWrapProps;
+    pageCountInputIcon?: ReactNode;
+    pageNumber: string | string;
     pageRangeDisplayed?: number;
     perPageCount?: number;
     previousLabel?: ReactNode;
-    isPageCount?: boolean;
     isPageCountDropdownReversed?: boolean;
     onChangePage?: () => void;
     onChangePerPageCount?: (perPageCount: number) => void;

package/dist/types/components/Pagination/index.d.ts

@@ -1 +1 @@
-export { Pagination } from './Pagination';
+export { Pagination, paginationConfig } from './Pagination';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.23",
+  "version": "1.2.25",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -106,16 +106,16 @@
     "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha",
-    "react-inlinesvg": "^4.1.4",
+    "react-inlinesvg": "^4.1.5",
     "react-modern-drawer": "^1.4.0",
     "react-otp-input": "^3.1.1",
     "react-paginate": "^8.2.0",
     "react-responsive": "^10.0.0",
     "react-scroll": "^1.9.0",
     "react-scrollbars-custom": "^4.1.1",
-    "react-select": "^5.8.2",
+    "react-select": "^5.8.3",
     "swiper": "^11.1.14",
-    "uuid": "^11.0.2"
+    "uuid": "^11.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -126,7 +126,8 @@
     "@chromatic-com/storybook": "^3.2.2",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@itcase/lint": "^1.0.14",
+    "@itcase/lint": "^1.0.16",
+    "@lehoczky/postcss-fluid": "^1.0.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
@@ -136,17 +137,17 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.0.1",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-onboarding": "^8.4.4",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.4.2",
+    "@storybook/addon-themes": "^8.4.4",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-webpack5": "^8.4.2",
-    "@storybook/test": "^8.4.2",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-webpack5": "^8.4.4",
+    "@storybook/test": "^8.4.4",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18",
@@ -159,12 +160,12 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.14.0",
+    "eslint": "9.15.0",
     "eslint-plugin-storybook": "^0.11.0",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
     "npm": "^10.9.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
@@ -182,19 +183,19 @@
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^13.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^10.0.9",
+    "postcss-preset-env": "^10.1.1",
     "postcss-pxtorem": "^6.1.0",
-    "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.3.3",
-    "rollup": "^4.24.4",
+    "rollup": "^4.27.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.2",
     "semantic-release": "^24.2.0",
-    "storybook": "^8.4.2",
+    "storybook": "^8.4.4",
     "stylelint": "^16.10.0",
     "typescript": "^5.6.3"
-  }
+  },
+  "packageManager": "pnpm@8.6.2+sha1.343879a68ea9ba1427ee1392072c8ad68537c534"
 }