@itcase/ui 1.3.20 → 1.3.21

package/dist/cjs/components/HeroTitle.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var UIContext = require('../context/UIContext.js');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
+var useStyles = require('../hooks/useStyles.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../../tslib.es6-CCZ3TN_7.js');
+require('lodash/camelCase');
+require('lodash/castArray');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+var heroTitleAppearance = {
+    dev: {
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+var heroTitleConfig = {
+    appearance: heroTitleAppearance,
+    setAppearance: function (newComponent) {
+        heroTitleConfig.appearance = newComponent;
+    },
+};
+function HeroTitle(props) {
+    var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, _a = props.size, size = _a === undefined ? 'h3' : _a, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === undefined ? 'span' : _b, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
+    var _c = UIContext.useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
+    // @ts-expect-error
+    var appearanceConfig = heroTitleConfig.appearance && heroTitleConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, heightClass = classGenerator.heightClass, svgFillClass = classGenerator.svgFillClass, svgFillHoverClass = classGenerator.svgFillHoverClass, textAlignClass = classGenerator.textAlignClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorGradientClass = classGenerator.textColorGradientClass, textColorHoverClass = classGenerator.textColorHoverClass, textStyleClass = classGenerator.textStyleClass, textTruncateClass = classGenerator.textTruncateClass, textWeightClass = classGenerator.textWeightClass, typeClass = classGenerator.typeClass, widthClass = classGenerator.widthClass, wrapperDirectionClass = classGenerator.wrapperDirectionClass;
+    // @ts-expect-error
+    var _d = useStyles.useStyles(props), heroTitleStyles = _d.styles, heroTitleWrapperStyles = _d.wrapper;
+    // Element type (h1, h2, ..., h6)
+    var Tag = React.useMemo(function () {
+        if (tag) {
+            return tag;
+        }
+        if (isMobile && sizeMobile) {
+            return sizeMobile;
+        }
+        if (isTablet && sizeTablet) {
+            return sizeTablet;
+        }
+        if (isDesktop && sizeDesktop) {
+            return sizeDesktop;
+        }
+        return size ? size : 'span';
+    }, [isMobile, isTablet, isDesktop]);
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'heroTitle', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "hero-title_size_".concat(size), mode && "hero-title_mode_".concat(mode), directionClass && "hero-title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "hero-title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, style: heroTitleStyles, onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "hero-title-direction_".concat(wrapperDirectionClass), 'hero-title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: heroTitleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
+}
+
+exports.HeroTitle = HeroTitle;
+exports.heroTitleAppearance = heroTitleAppearance;
+exports.heroTitleConfig = heroTitleConfig;

package/dist/components/HeroTitle.js

@@ -0,0 +1,56 @@
+import { jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useUserDeviceContext } from '../context/UIContext.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
+import { useStyles } from '../hooks/useStyles.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import '../tslib.es6-5FtW-kfi.js';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+
+var heroTitleAppearance = {
+    dev: {
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+var heroTitleConfig = {
+    appearance: heroTitleAppearance,
+    setAppearance: function (newComponent) {
+        heroTitleConfig.appearance = newComponent;
+    },
+};
+function HeroTitle(props) {
+    var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, _a = props.size, size = _a === undefined ? 'h3' : _a, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === undefined ? 'span' : _b, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
+    var _c = useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
+    // @ts-expect-error
+    var appearanceConfig = heroTitleConfig.appearance && heroTitleConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, heightClass = classGenerator.heightClass, svgFillClass = classGenerator.svgFillClass, svgFillHoverClass = classGenerator.svgFillHoverClass, textAlignClass = classGenerator.textAlignClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorGradientClass = classGenerator.textColorGradientClass, textColorHoverClass = classGenerator.textColorHoverClass, textStyleClass = classGenerator.textStyleClass, textTruncateClass = classGenerator.textTruncateClass, textWeightClass = classGenerator.textWeightClass, typeClass = classGenerator.typeClass, widthClass = classGenerator.widthClass, wrapperDirectionClass = classGenerator.wrapperDirectionClass;
+    // @ts-expect-error
+    var _d = useStyles(props), heroTitleStyles = _d.styles, heroTitleWrapperStyles = _d.wrapper;
+    // Element type (h1, h2, ..., h6)
+    var Tag = useMemo(function () {
+        if (tag) {
+            return tag;
+        }
+        if (isMobile && sizeMobile) {
+            return sizeMobile;
+        }
+        if (isTablet && sizeTablet) {
+            return sizeTablet;
+        }
+        if (isDesktop && sizeDesktop) {
+            return sizeDesktop;
+        }
+        return size ? size : 'span';
+    }, [isMobile, isTablet, isDesktop]);
+    return (jsxs(Tag, { className: clsx(className, 'heroTitle', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "hero-title_size_".concat(size), mode && "hero-title_mode_".concat(mode), directionClass && "hero-title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "hero-title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, style: heroTitleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "hero-title-direction_".concat(wrapperDirectionClass), 'hero-title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: heroTitleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
+}
+
+export { HeroTitle, heroTitleAppearance, heroTitleConfig };

package/dist/css/components/HeroTitle/HeroTitle.css

@@ -0,0 +1,59 @@
+.hero-title {
+  &__wrapper {
+    display: inline-block;
+  }
+}
+.hero-title {
+  &&_mode {
+    &_skeleton {
+      color: transparent;
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      border-radius: 6px;
+      animation: hero-title-skeleton 3s infinite linear;
+    }
+  }
+}
+@keyframes hero-title-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
+.hero-title_size {
+  @each $size in h1, h2, h3, h4, h5, h6 {
+    &_$(size) {
+      padding: 0;
+      margin: 0;
+      @mixin hero_$(size);
+    }
+  }
+}
+.hero-title {
+  &&_type {
+    @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      &_$(type) {
+        color: var(--color-$(type)-text-$(type));
+      }
+    }
+  }
+}
+.hero-title_direction {
+  &_horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  &_vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

package/dist/css/mixins/mixin_typography.css

@@ -40,6 +40,48 @@
     var(--typography-h6-font, system-ui);
 }
 
+@define-mixin hero_h1 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero1-min, 32px), var(--typography-hero1-max, 38px),
+    $minLetterSpacing, var(--typography-hero1-min-line-height, 64px),
+    var(--typography-hero1-max-line-height, 80px), $maxLetterSpacing,
+    var(--typography-hero1-font, system-ui);
+}
+
+@define-mixin hero_h2 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero2-min, 26px), var(--typography-hero2-max, 32px),
+    $minLetterSpacing, var(--typography-hero2-min-line-height, 46px),
+    var(--typography-hero2-max-line-height, 58px), $maxLetterSpacing,
+    var(--typography-hero2-font, system-ui);
+}
+
+@define-mixin hero_h3 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero3-min, 18px), var(--typography-hero3-max, 24px),
+    $minLetterSpacing, var(--typography-hero3-min-line-height, 32px),
+    var(--typography-hero3-max-line-height, 40px), $maxLetterSpacing,
+    var(--typography-hero3-font, system-ui);
+}
+
+@define-mixin hero_h4 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero4-min, 16px), var(--typography-hero4-max, 18px),
+    $minLetterSpacing, var(--typography-hero4-min-line-height, 24px),
+    var(--typography-hero4-max-line-height, 30px), $maxLetterSpacing,
+    var(--typography-hero4-font, system-ui);
+}
+
+@define-mixin hero_h5 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero5-min, 14px), var(--typography-hero5-max, 16px),
+    $minLetterSpacing, var(--typography-hero5-min-line-height, 18px),
+    var(--typography-hero5-max-line-height, 26px), $maxLetterSpacing,
+    var(--typography-hero5-font, system-ui);
+}
+
+@define-mixin h6 $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
+  @mixin font $weight, var(--typography-hero6-min, 12px), var(--typography-hero6-max, 18px),
+    $minLetterSpacing, var(--typography-hero6-min-line-height, 16px),
+    var(--typography-hero6-max-line-height, 24px), $maxLetterSpacing,
+    var(--typography-hero6-font, system-ui);
+}
+
 @define-mixin p $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
   @mixin font $weight, var(--typography-p-min, 16px), var(--typography-p-max, 24px),
     $minLetterSpacing, var(--typography-p-min-line-height, 24px),

package/dist/stories/HeroTitle.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as HeroTitleStories from './HeroTitle.stories.tsx'
+
+<Meta of={HeroTitleStories} />
+
+# Size
+
+## SizeH1
+
+<Canvas sourceState="shown" of={HeroTitleStories.SizeH1} />
+
+## SizeH2
+
+<Canvas sourceState="shown" of={HeroTitleStories.SizeH2} />
+
+## SizeH3
+
+<Canvas sourceState="shown" of={HeroTitleStories.SizeH3} />
+
+## SizeH4
+
+<Canvas sourceState="shown" of={HeroTitleStories.SizeH4} />
+
+## SizeH5
+
+<Canvas sourceState="shown" of={HeroTitleStories.SizeH5} />
+
+## SizeH6
+
+<Canvas sourceState="shown" of={HeroTitleStories.SizeH6} />

package/dist/types/components/HeroTitle/HeroTitle.appearance.d.ts

@@ -0,0 +1,2 @@
+import { tAppearance } from './HeroTitle.interface';
+export declare const heroTitleAppearance: tAppearance;

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

@@ -0,0 +1,4 @@
+import type { iHeroTitleConfig, iHeroTitleProps } from './HeroTitle.interface';
+declare const heroTitleConfig: iHeroTitleConfig;
+declare function HeroTitle(props: iHeroTitleProps): import("react/jsx-runtime").JSX.Element;
+export { HeroTitle, heroTitleConfig };

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

@@ -0,0 +1,53 @@
+import { CSSProperties, ElementType, ReactNode } from 'react';
+import { tFillProps, tSvgFillProps, tTextAlignProps, tTextColorActiveProps, tTextColorHoverProps, tTextColorProps, tTextGradientProps, tTextStyleProps, tTextWeightProps, tTextWrapProps, tHeroTitleSizeProps } from 'types';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
+import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
+interface iHeroTitleThemeColor {
+    [key: number | string | symbol]: any;
+    fill?: tFillProps;
+    size?: tHeroTitleSizeProps;
+    sizeDesktop?: tHeroTitleSizeProps;
+    sizeMobile?: tHeroTitleSizeProps;
+    sizeTablet?: tHeroTitleSizeProps;
+    svgFill?: tSvgFillProps;
+    svgFillHover?: tSvgFillProps;
+    textColor?: tTextColorProps;
+    textColorActive?: tTextColorActiveProps;
+    textColorHover?: tTextColorHoverProps;
+    textGradient?: tTextGradientProps;
+    textStyle?: tTextStyleProps;
+    textWeight?: tTextWeightProps;
+    textWrap?: tTextWrapProps;
+    weight?: tTextWeightProps;
+}
+type tAppearanceKeys = tAppearanceKeysDefault & {};
+export type tAppearance = {
+    [key in tAppearanceKeys]: iHeroTitleThemeColor;
+};
+export interface iHeroTitleConfig {
+    [key: number | string | symbol]: any;
+    appearance: tAppearance | undefined;
+    setAppearance: (newComponent: tAppearance) => void;
+}
+export interface iHeroTitleProps extends iHeroTitleThemeColor, iStyleAttributes {
+    [key: number | string | symbol]: any;
+    after?: any;
+    afterWrapper?: any;
+    appearance?: tAppearanceKeys;
+    before?: any;
+    beforeWrapper?: any;
+    children: ReactNode;
+    className?: string;
+    dataTour?: string;
+    direction?: string;
+    directionWrapper?: string;
+    mode?: string;
+    style?: CSSProperties;
+    tag?: ElementType;
+    text?: string;
+    textAlign?: tTextAlignProps;
+    textTruncate?: string;
+    type?: string;
+    onClick?: () => void;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export { HeroTitle, heroTitleConfig } from './HeroTitle';
+export { heroTitleAppearance } from './HeroTitle.appearance';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.3.20",
+  "version": "1.3.21",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -87,10 +87,10 @@
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
     "@itcase/common": "^1.2.17",
-    "@itcase/icons": "^1.0.18",
+    "@itcase/icons": "^1.0.19",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.0.5",
+    "framer-motion": "^12.0.6",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "rc-slider": "^11.1.8",
@@ -103,7 +103,7 @@
     "react-modal-sheet": "^4.0.1",
     "react-modern-drawer": "^1.4.0",
     "react-otp-input": "^3.1.1",
-    "react-paginate": "^8.2.0",
+    "react-paginate": "^8.3.0",
     "react-responsive": "^10.0.0",
     "react-scroll": "^1.9.0",
     "react-scrollbars-custom": "^4.1.1",
@@ -119,7 +119,7 @@
     "@babel/preset-react": "^7.26.3",
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
-    "@itcase/icons": "^1.0.18",
+    "@itcase/icons": "^1.0.19",
     "@itcase/lint": "^1.0.36",
     "@lehoczky/postcss-fluid": "^1.0.3",
     "@rollup/plugin-babel": "^6.0.4",
@@ -132,16 +132,16 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.0.3",
-    "@storybook/addon-essentials": "^8.5.1",
-    "@storybook/addon-interactions": "^8.5.1",
+    "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/addon-interactions": "^8.5.2",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.5.1",
+    "@storybook/addon-themes": "^8.5.2",
     "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
-    "@storybook/blocks": "^8.5.1",
-    "@storybook/react": "^8.5.1",
-    "@storybook/react-webpack5": "^8.5.1",
+    "@storybook/blocks": "^8.5.2",
+    "@storybook/react": "^8.5.2",
+    "@storybook/react-webpack5": "^8.5.2",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.14",
+    "@types/lodash": "^4.17.15",
     "@types/react": "^19",
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^19.0.2",
@@ -155,7 +155,7 @@
     "eslint": "9.19.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",
-    "npm": "^11.0.0",
+    "npm": "^11.1.0",
     "postcss": "^8.5.1",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
@@ -178,14 +178,14 @@
     "postcss-pxtorem": "^6.1.0",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.4.2",
-    "rollup": "^4.32.0",
+    "rollup": "^4.32.1",
     "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.3",
     "semantic-release": "^24.2.1",
-    "storybook": "^8.5.1",
-    "stylelint": "^16.14.0",
+    "storybook": "^8.5.2",
+    "stylelint": "^16.14.1",
     "typescript": "^5.7.3"
   }
 }