@itcase/ui 1.2.22 → 1.2.24

package/dist/components/Select.js

@@ -1,7 +1,7 @@
 import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
@@ -21,7 +21,7 @@ import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 import 'lodash/castArray';
 

package/dist/components/SiteMenu.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { useSiteMenuContext } from '../context/UIContext.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-DfVed6hR.js';
+import { I as Icon } from '../Icon-Du1Nyea-.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
@@ -17,7 +17,7 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-CK7SVawj.js';
+import '../Tooltip-aaDRYNWY.js';
 import '../Title-BfSFPJtJ.js';
 
 function SiteMenu(props) {

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, t as tooltipConfig } from '../Tooltip-CK7SVawj.js';
+export { T as Tooltip, t as tooltipConfig } from '../Tooltip-aaDRYNWY.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/css/components/DatePicker/DatePicker.css

@@ -1111,7 +1111,7 @@ h2.react-datepicker__current-month {
   &__clear-label {
     width: 100%;
   }
-  &__input-icon {
+  &__input-icon.icon {
     background: #fff;
     position: absolute;
     top: 50%;

package/dist/css/components/Icon/Icon.css

@@ -1,4 +1,5 @@
 .icon {
+  position: relative;
   &__item {
     position: relative;
     display: flex;

package/dist/css/mixins/mixin_utils.css

@@ -1,18 +1,25 @@
 @define-mixin font $fontWeight, $minFontSize, $maxFontSize, $minLetterSpacing, $minLineHeight,
   $maxLineHeight, $maxLetterSpacing, $fontFamily {
-  font-size: responsive $minFontSize $maxFontSize;
-  font-range: var(--min-max);
+  font-size: fluid(
+    $minFontSize,
+    $maxFontSize,
+    var(--typography-min-viewport, 360px),
+    var(--typography-max-viewport, 1920px)
+  );
   font-weight: $fontWeight;
+  line-height: fluid(
+    $minLineHeight,
+    $maxLineHeight,
+    var(--typography-min-viewport, 360px),
+    var(--typography-max-viewport, 1920px)
+  );
+  letter-spacing: fluid(
+    $minLetterSpacing,
+    $maxLetterSpacing,
+    var(--typography-min-viewport, 360px),
+    var(--typography-max-viewport, 1920px)
+  );
   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;
-  }
 }
 
 @define-mixin font-fixed $weight, $size, $line, $family {

package/dist/css/styles/mediaqueries.css

@@ -12,7 +12,7 @@
   --desktop-large: 80em; /* 1280px */
   --desktop-extra-large: 90em; /* 1441px */
   --desktop-super-extra-large: 120em; /* 1920px */
-  --desktop-huge: 160em; /* 560px */
+  --desktop-huge: 160em; /* 2560px */
 }
 
 @custom-media --warning (width <= 15em);

package/dist/css/tokens/typography.css

@@ -1,4 +1,7 @@
 :root {
+  --typography-min-viewport: 360px;
+  --typography-max-viewport: 1920px;
+
   --typography-h1-min: 32px;
   --typography-h1-max: 38px;
   --typography-h1-min-line-height: 64px;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IIconConfig, IIconProps } from '../Icon/Icon.interface';
-declare const iconConfig: IIconConfig;
-declare const Icon: React.ForwardRefExoticComponent<IIconProps & React.RefAttributes<HTMLDivElement>>;
+import type { iIconConfig, iIconProps } from '../Icon/Icon.interface';
+declare const iconConfig: iIconConfig;
+declare const Icon: React.ForwardRefExoticComponent<iIconProps & React.RefAttributes<HTMLDivElement>>;
 export { Icon, iconConfig };

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

@@ -1,8 +1,8 @@
-import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { alignmentPropsType, borderColorHoverPropsType, borderTypePropsType, iconFillSizePropsType, iconSizePropsType, tBorderColorProps, tBorderWidthProps, tFillHoverProps, tFillProps, tItemColorProps, titleSizePropsType, tShapeProps, tTextColorHoverProps, tTextColorProps, tTextSizeProps } from '../../types';
-import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
-export interface IIconThemeColor {
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import type { iStyleAttributes } from '../../hooks/styleAttributes.interface';
+import type { alignmentPropsType, borderColorHoverPropsType, borderTypePropsType, iconFillSizePropsType, iconSizePropsType, tBorderColorProps, tBorderWidthProps, tFillHoverProps, tFillProps, tItemColorProps, titleSizePropsType, tShapeProps, tTextColorHoverProps, tTextColorProps, tTextSizeProps } from '../../types';
+import type { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
+interface iIconThemeColor {
     alignment?: alignmentPropsType;
     bgFill?: tFillProps;
     borderColor?: tBorderColorProps;
@@ -35,15 +35,14 @@ export interface IIconThemeColor {
     shape?: tShapeProps;
     size?: iconSizePropsType;
 }
-type appearanceKeysType = {} & tAppearanceKeysDefault;
-export type iconAppearanceType = {
-    [key in appearanceKeysType]?: IIconThemeColor;
+type tIconAppearance = {
+    [key in tAppearanceKeysDefault]?: iIconThemeColor;
 };
-export interface IIconConfig {
-    appearance: iconAppearanceType | undefined;
-    setAppearance: (newComponent: iconAppearanceType) => void;
+interface iIconConfig {
+    appearance: tIconAppearance | undefined;
+    setAppearance: (newComponent: tIconAppearance) => void;
 }
-export interface IIconProps extends IIconThemeColor, iStyleAttributes {
+interface iIconProps extends iIconThemeColor, iStyleAttributes {
     id?: number | string;
     after?: ReactNode;
     Badge?: ReactNode;
@@ -80,7 +79,7 @@ export interface IIconProps extends IIconThemeColor, iStyleAttributes {
     style?: CSSProperties;
     SvgImage?: any;
     target?: string;
-    tooltipAppearance?: appearanceKeysType;
+    tooltipAppearance?: tAppearanceKeysDefault;
     tooltipContent?: ReactNode;
     tooltipText?: string;
     tooltipTextSize?: tTextSizeProps;
@@ -90,5 +89,7 @@ export interface IIconProps extends IIconThemeColor, iStyleAttributes {
     width?: string;
     isDisabled?: boolean;
     onClick?: MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
 }
-export {};
+export type { iIconThemeColor, tIconAppearance, iIconConfig, iIconProps };

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/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ITooltipConfig, ITooltipProps } from './Tooltip.interface';
 declare const tooltipConfig: ITooltipConfig;
-declare const Tooltip: React.ForwardRefExoticComponent<ITooltipProps & React.RefAttributes<HTMLDivElement>>;
+declare const Tooltip: React.ForwardRefExoticComponent<ITooltipProps & React.RefAttributes<any>>;
 export { Tooltip, tooltipConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.22",
+  "version": "1.2.24",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -113,20 +113,21 @@
     "react-responsive": "^10.0.0",
     "react-scroll": "^1.9.0",
     "react-scrollbars-custom": "^4.1.1",
-    "react-select": "^5.8.1",
+    "react-select": "^5.8.3",
     "swiper": "^11.1.14",
-    "uuid": "^10.0.0"
+    "uuid": "^11.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.9",
+    "@babel/core": "^7.26.0",
     "@babel/eslint-parser": "^7.25.9",
     "@babel/eslint-plugin": "^7.25.9",
-    "@babel/preset-env": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
-    "@chromatic-com/storybook": "^3.1.0",
+    "@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,19 +137,19 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.0.1",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-onboarding": "^8.3.6",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-themes": "^8.3.6",
+    "@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-styling-webpack": "^1.0.1",
+    "@storybook/addon-themes": "^8.4.2",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-webpack5": "^8.3.6",
-    "@storybook/test": "^8.3.6",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-webpack5": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.12",
+    "@types/lodash": "^4.17.13",
     "@types/react": "^18",
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^18.3.1",
@@ -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.13.0",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint": "9.14.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",
@@ -178,22 +179,21 @@
     "postcss-import-ext-glob": "^2.1.1",
     "postcss-loader": "^8.1.1",
     "postcss-mixins": "^11.0.3",
-    "postcss-nested": "^6.2.0",
+    "postcss-nested": "^7.0.2",
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^13.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^10.0.8",
+    "postcss-preset-env": "^10.1.0",
     "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.0",
+    "rollup": "^4.25.0",
     "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.1.3",
-    "storybook": "^8.3.6",
+    "semantic-release": "^24.2.0",
+    "storybook": "^8.4.2",
     "stylelint": "^16.10.0",
     "typescript": "^5.6.3"
   }