@itcase/ui 1.9.41 → 1.9.43

package/dist/hooks/useHoldProgress.js

@@ -0,0 +1,59 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+
+const FRAME_DURATION = 16; // Approximate duration of a frame in milliseconds
+const HOLD_STATE = {
+    HOLDING: 'holding',
+    IDLE: 'idle',
+};
+function useHoldProgress(options) {
+    const { holdDurationMs = 500, onHoldComplete } = options;
+    const animationFrameIdRef = useRef(null);
+    const onHoldCompleteRef = useRef(onHoldComplete);
+    const [holdState, setState] = useState(HOLD_STATE.IDLE);
+    // const [holdProgress, setProgress] = useState(0) // Progress from 0 to 1
+    const holdProgressRef = useRef(0);
+    // onHoldCompleteRef is not used in render, so it's safe to ignore lint rule here
+    // eslint-disable-next-line react-hooks/refs
+    onHoldCompleteRef.current = onHoldComplete;
+    useEffect(() => {
+        function updateProgress() {
+            if (holdState === HOLD_STATE.HOLDING && holdProgressRef.current === 1) {
+                onHoldCompleteRef.current && onHoldCompleteRef.current();
+            }
+            if (holdState === HOLD_STATE.HOLDING && holdProgressRef.current < 1) {
+                const prevProgress = holdProgressRef.current;
+                const newProgress = Math.min(prevProgress + FRAME_DURATION / holdDurationMs, 1);
+                holdProgressRef.current = newProgress;
+                animationFrameIdRef.current = requestAnimationFrame(updateProgress);
+            }
+            if (holdState === HOLD_STATE.IDLE && holdProgressRef.current > 0) {
+                const prevProgress = holdProgressRef.current;
+                const newProgress = Math.max(prevProgress - FRAME_DURATION / holdDurationMs, 0);
+                holdProgressRef.current = newProgress;
+                animationFrameIdRef.current = requestAnimationFrame(updateProgress);
+            }
+        }
+        animationFrameIdRef.current = requestAnimationFrame(updateProgress);
+        return () => {
+            if (animationFrameIdRef.current) {
+                cancelAnimationFrame(animationFrameIdRef.current);
+            }
+        };
+    }, [holdState, holdDurationMs]);
+    const onHoldStart = useCallback((event) => {
+        // Only proceed if it's a touch event or left mouse button (button 0)
+        if (event.pointerType === 'touch' || event.button === 0) {
+            setState(HOLD_STATE.HOLDING);
+        }
+    }, []);
+    const onHoldEnd = useCallback((_event) => {
+        setState(HOLD_STATE.IDLE);
+    }, []);
+    return {
+        holdState,
+        onHoldEnd,
+        onHoldStart,
+    };
+}
+
+export { useHoldProgress };

package/dist/hooks/useStyles/useStyles.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
-import camelCase from 'lodash/camelCase';
-import maxBy from 'lodash/maxBy';
-import upperFirst from 'lodash/upperFirst';
+import camelCase from 'lodash/camelCase.js';
+import maxBy from 'lodash/maxBy.js';
+import upperFirst from 'lodash/upperFirst.js';
 import '../../context/Notifications.js';
 import { useUserDeviceContext } from '../../context/UIContext.js';
 import { getStyleAttributeKey } from '../../hooks.js';

package/dist/hooks/useStyles.js

@@ -1,8 +1,8 @@
 export { useStyles } from './useStyles/useStyles.js';
 import 'react';
-import 'lodash/camelCase';
-import 'lodash/maxBy';
-import 'lodash/upperFirst';
+import 'lodash/camelCase.js';
+import 'lodash/maxBy.js';
+import 'lodash/upperFirst.js';
 import '../context/Notifications.js';
 import 'react/jsx-runtime';
 import 'uuid';

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

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from 'react';
-import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceDefaultSizeStyleKey, DirectionProps, FillHoverProps, FillProps, HeightProps, ShapeProps, ShapeStrengthProps, SizeProps, WidthProps } from '@itcase/types';
+import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceDefaultSizeStyleKey, DirectionProps, FillHoverProps, FillProps, HeightProps, ShapeProps, ShapeStrengthProps, SizeProps, WidthProps } from '@itcase/types-ui';
 import type { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 import { BadgeProps } from '../Badge/Badge.interface';
 import { DividerProps } from '../Divider/Divider.interface';

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizePxKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceSizePxKey, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizePXProps } from '@itcase/types';
+import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizePxKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceSizePxKey, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizePXProps } from '@itcase/types-ui';
 import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 import { BadgeProps } from '../Badge/Badge.interface';
 import { IconProps } from '../Icon/Icon.interface';

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

@@ -1,4 +1,4 @@
-import type { AppearanceSizePxKey, BorderColorProps, DirectionProps, FillHoverProps, FillProps, ShapeProps, SizePXProps, WidthProps } from '@itcase/types';
+import type { AppearanceSizePxKey, BorderColorProps, DirectionProps, FillHoverProps, FillProps, ShapeProps, SizePXProps, WidthProps } from '@itcase/types-ui';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 import { AvatarProps } from '../Avatar/Avatar.interface';
 import { IconProps } from '../Icon/Icon.interface';

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceDefaultStyleShapeKey, CompositeAppearanceKey, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, SvgFillItemProps } from '@itcase/types';
+import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceDefaultStyleShapeKey, CompositeAppearanceKey, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, SvgFillItemProps } from '@itcase/types-ui';
 import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 import { IconProps } from '../Icon/Icon.interface';
 import { TextProps } from '../Text/Text.interface';

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { AppearanceKeysDefault, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceDefaultSizeStyleKey, DirectionProps, FillProps, ShapeProps, SizeProps, UnderlineProps, WidthProps } from '@itcase/types';
+import { AppearanceKeysDefault, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceDefaultSizeStyleKey, DirectionProps, FillProps, ShapeProps, SizeProps, UnderlineProps, WidthProps } from '@itcase/types-ui';
 import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 import { IconProps } from '../Icon/Icon.interface';
 import { TextProps } from '../Text/Text.interface';

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

@@ -2,16 +2,16 @@ import React from 'react';
 import type { ButtonConfig } from './Button.interface';
 declare const buttonConfig: ButtonConfig;
 declare const Button: React.ForwardRefExoticComponent<{
-    align?: import("@itcase/types").AlignProps;
-    borderColor?: import("@itcase/types").BorderColorProps;
-    borderType?: import("@itcase/types").BorderTypeProps;
-    borderWidth?: import("@itcase/types").BorderWidthProps;
-    fill?: import("@itcase/types").FillProps;
-    fillHover?: import("@itcase/types").FillHoverProps;
+    align?: import("@itcase/types-ui").AlignProps;
+    borderColor?: import("@itcase/types-ui").BorderColorProps;
+    borderType?: import("@itcase/types-ui").BorderTypeProps;
+    borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+    fill?: import("@itcase/types-ui").FillProps;
+    fillHover?: import("@itcase/types-ui").FillHoverProps;
     icon?: import("../Icon/Icon.interface").IconProps["SvgImage"];
     iconAfter?: import("../Icon/Icon.interface").IconProps["SvgImage"];
     iconAfterAppearance?: import("../Icon/Icon.interface").IconProps["appearance"];
-    iconAfterAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+    iconAfterAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
     iconAfterFill?: import("../Icon/Icon.interface").IconProps["fill"];
     iconAfterFillIcon?: import("../Icon/Icon.interface").IconProps["iconFill"];
     iconAfterFillSize?: import("../Icon/Icon.interface").IconProps["fillSize"];
@@ -22,7 +22,7 @@ declare const Button: React.ForwardRefExoticComponent<{
     iconAppearanceSize?: import("../Icon/Icon.interface").IconProps["iconSize"];
     iconBefore?: import("../Icon/Icon.interface").IconProps["SvgImage"];
     iconBeforeAppearance?: import("../Icon/Icon.interface").IconProps["appearance"];
-    iconBeforeAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+    iconBeforeAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
     iconBeforeFill?: import("../Icon/Icon.interface").IconProps["fill"];
     iconBeforeFillIcon?: import("../Icon/Icon.interface").IconProps["iconFill"];
     iconBeforeFillSize?: import("../Icon/Icon.interface").IconProps["fillSize"];
@@ -42,31 +42,32 @@ declare const Button: React.ForwardRefExoticComponent<{
     labelTextWeight?: import("../Text/Text.interface").TextProps["textWeight"];
     labelTextWrap?: import("../Text/Text.interface").TextProps["textWrap"];
     loaderAppearance?: import("../Loader/Loader.interface").LoaderProps["appearance"];
-    loaderAppearanceSize?: import("@itcase/types").AppearanceSizeKey;
+    loaderAppearanceSize?: import("@itcase/types-ui").AppearanceSizeKey;
     loaderFill?: import("../Loader/Loader.interface").LoaderProps["fill"];
     loaderItemFill?: import("../Loader/Loader.interface").LoaderProps["itemFill"];
     loaderShape?: import("../Loader/Loader.interface").LoaderProps["shape"];
     loaderSize?: import("../Loader/Loader.interface").LoaderProps["size"];
     loaderType?: import("../Loader/Loader.interface").LoaderProps["type"];
-    shape?: import("@itcase/types").ShapeProps;
-    shapeStrength?: import("@itcase/types").ShapeStrengthProps;
-    size?: import("@itcase/types").SizeProps;
-    wrap?: import("@itcase/types").WrapProps;
+    shape?: import("@itcase/types-ui").ShapeProps;
+    shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+    size?: import("@itcase/types-ui").SizeProps;
+    wrap?: import("@itcase/types-ui").WrapProps;
     zeroGap?: boolean;
     zeroPadding?: boolean;
-} & import("../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+} & Pick<import("../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
     after?: string;
-    appearance?: import("@itcase/types").CompositeAppearanceKey;
+    appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
     Badge?: React.ReactNode;
     before?: string;
     children?: React.ReactNode;
     className?: string;
     dataTestId?: string;
     dataTour?: string;
-    elevation?: import("@itcase/types").ElevationProps;
+    elevation?: import("@itcase/types-ui").ElevationProps;
     href?: import("../Link/Link.interface").LinkWrapperProps["href"];
     htmlType?: import("../Link/Link.interface").LinkWrapperProps["type"];
     isDisabled?: import("../Link/Link.interface").LinkWrapperProps["disabled"];
+    isHolding?: boolean;
     isLoading?: boolean;
     isSkeleton?: boolean;
     label?: string;

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

@@ -1,5 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
-import { AlignProps, AppearanceIconSizeKey, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKey, ElevationProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WrapProps } from '@itcase/types';
+import { AlignProps, AppearanceIconSizeKey, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKey, ElevationProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WrapProps } from '@itcase/types-ui';
+import { UseHoldProgressOptions } from '../../hooks/useHoldProgress';
 import { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
 import { IconProps } from '../Icon/Icon.interface';
 import { LinkWrapperProps } from '../Link/Link.interface';
@@ -59,7 +60,7 @@ type ButtonAppearanceProps = {
     zeroGap?: boolean;
     zeroPadding?: boolean;
 };
-type ButtonProps = ButtonAppearanceProps & StyleAttributes & {
+type ButtonProps = ButtonAppearanceProps & Pick<UseHoldProgressOptions, 'onHoldComplete'> & StyleAttributes & {
     after?: string;
     appearance?: CompositeAppearanceKey;
     Badge?: ReactNode;
@@ -72,6 +73,7 @@ type ButtonProps = ButtonAppearanceProps & StyleAttributes & {
     href?: LinkWrapperProps['href'];
     htmlType?: LinkWrapperProps['type'];
     isDisabled?: LinkWrapperProps['disabled'];
+    isHolding?: boolean;
     isLoading?: boolean;
     isSkeleton?: boolean;
     label?: string;

package/dist/types/components/Button/stories/ButtonDefault.stories.d.ts

@@ -2,16 +2,16 @@ import { ButtonProps } from '../Button.interface';
 declare const meta: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        align?: import("@itcase/types").AlignProps;
-        borderColor?: import("@itcase/types").BorderColorProps;
-        borderType?: import("@itcase/types").BorderTypeProps;
-        borderWidth?: import("@itcase/types").BorderWidthProps;
-        fill?: import("@itcase/types").FillProps;
-        fillHover?: import("@itcase/types").FillHoverProps;
+        align?: import("@itcase/types-ui").AlignProps;
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        fillHover?: import("@itcase/types-ui").FillHoverProps;
         icon?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconAfter?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconAfterAppearance?: import("../../Icon/Icon.interface").IconProps["appearance"];
-        iconAfterAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+        iconAfterAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconAfterFill?: import("../../Icon/Icon.interface").IconProps["fill"];
         iconAfterFillIcon?: import("../../Icon/Icon.interface").IconProps["iconFill"];
         iconAfterFillSize?: import("../../Icon/Icon.interface").IconProps["fillSize"];
@@ -22,7 +22,7 @@ declare const meta: {
         iconAppearanceSize?: import("../../Icon/Icon.interface").IconProps["iconSize"];
         iconBefore?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconBeforeAppearance?: import("../../Icon/Icon.interface").IconProps["appearance"];
-        iconBeforeAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+        iconBeforeAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconBeforeFill?: import("../../Icon/Icon.interface").IconProps["fill"];
         iconBeforeFillIcon?: import("../../Icon/Icon.interface").IconProps["iconFill"];
         iconBeforeFillSize?: import("../../Icon/Icon.interface").IconProps["fillSize"];
@@ -42,31 +42,32 @@ declare const meta: {
         labelTextWeight?: import("../../Text/Text.interface").TextProps["textWeight"];
         labelTextWrap?: import("../../Text/Text.interface").TextProps["textWrap"];
         loaderAppearance?: import("../../Loader/Loader.interface").LoaderProps["appearance"];
-        loaderAppearanceSize?: import("@itcase/types").AppearanceSizeKey;
+        loaderAppearanceSize?: import("@itcase/types-ui").AppearanceSizeKey;
         loaderFill?: import("../../Loader/Loader.interface").LoaderProps["fill"];
         loaderItemFill?: import("../../Loader/Loader.interface").LoaderProps["itemFill"];
         loaderShape?: import("../../Loader/Loader.interface").LoaderProps["shape"];
         loaderSize?: import("../../Loader/Loader.interface").LoaderProps["size"];
         loaderType?: import("../../Loader/Loader.interface").LoaderProps["type"];
-        shape?: import("@itcase/types").ShapeProps;
-        shapeStrength?: import("@itcase/types").ShapeStrengthProps;
-        size?: import("@itcase/types").SizeProps;
-        wrap?: import("@itcase/types").WrapProps;
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
-        appearance?: import("@itcase/types").CompositeAppearanceKey;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
         before?: string;
         children?: import("react").ReactNode;
         className?: string;
         dataTestId?: string;
         dataTour?: string;
-        elevation?: import("@itcase/types").ElevationProps;
+        elevation?: import("@itcase/types-ui").ElevationProps;
         href?: import("../../Link/Link.interface").LinkWrapperProps["href"];
         htmlType?: import("../../Link/Link.interface").LinkWrapperProps["type"];
         isDisabled?: import("../../Link/Link.interface").LinkWrapperProps["disabled"];
+        isHolding?: boolean;
         isLoading?: boolean;
         isSkeleton?: boolean;
         label?: string;

package/dist/types/components/Button/stories/ButtonDemo.stories.d.ts

@@ -2,16 +2,16 @@ import { ButtonProps } from '../Button.interface';
 declare const meta: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        align?: import("@itcase/types").AlignProps;
-        borderColor?: import("@itcase/types").BorderColorProps;
-        borderType?: import("@itcase/types").BorderTypeProps;
-        borderWidth?: import("@itcase/types").BorderWidthProps;
-        fill?: import("@itcase/types").FillProps;
-        fillHover?: import("@itcase/types").FillHoverProps;
+        align?: import("@itcase/types-ui").AlignProps;
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        fillHover?: import("@itcase/types-ui").FillHoverProps;
         icon?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconAfter?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconAfterAppearance?: import("../../Icon/Icon.interface").IconProps["appearance"];
-        iconAfterAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+        iconAfterAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconAfterFill?: import("../../Icon/Icon.interface").IconProps["fill"];
         iconAfterFillIcon?: import("../../Icon/Icon.interface").IconProps["iconFill"];
         iconAfterFillSize?: import("../../Icon/Icon.interface").IconProps["fillSize"];
@@ -22,7 +22,7 @@ declare const meta: {
         iconAppearanceSize?: import("../../Icon/Icon.interface").IconProps["iconSize"];
         iconBefore?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconBeforeAppearance?: import("../../Icon/Icon.interface").IconProps["appearance"];
-        iconBeforeAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+        iconBeforeAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconBeforeFill?: import("../../Icon/Icon.interface").IconProps["fill"];
         iconBeforeFillIcon?: import("../../Icon/Icon.interface").IconProps["iconFill"];
         iconBeforeFillSize?: import("../../Icon/Icon.interface").IconProps["fillSize"];
@@ -42,31 +42,32 @@ declare const meta: {
         labelTextWeight?: import("../../Text/Text.interface").TextProps["textWeight"];
         labelTextWrap?: import("../../Text/Text.interface").TextProps["textWrap"];
         loaderAppearance?: import("../../Loader/Loader.interface").LoaderProps["appearance"];
-        loaderAppearanceSize?: import("@itcase/types").AppearanceSizeKey;
+        loaderAppearanceSize?: import("@itcase/types-ui").AppearanceSizeKey;
         loaderFill?: import("../../Loader/Loader.interface").LoaderProps["fill"];
         loaderItemFill?: import("../../Loader/Loader.interface").LoaderProps["itemFill"];
         loaderShape?: import("../../Loader/Loader.interface").LoaderProps["shape"];
         loaderSize?: import("../../Loader/Loader.interface").LoaderProps["size"];
         loaderType?: import("../../Loader/Loader.interface").LoaderProps["type"];
-        shape?: import("@itcase/types").ShapeProps;
-        shapeStrength?: import("@itcase/types").ShapeStrengthProps;
-        size?: import("@itcase/types").SizeProps;
-        wrap?: import("@itcase/types").WrapProps;
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
-        appearance?: import("@itcase/types").CompositeAppearanceKey;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
         before?: string;
         children?: import("react").ReactNode;
         className?: string;
         dataTestId?: string;
         dataTour?: string;
-        elevation?: import("@itcase/types").ElevationProps;
+        elevation?: import("@itcase/types-ui").ElevationProps;
         href?: import("../../Link/Link.interface").LinkWrapperProps["href"];
         htmlType?: import("../../Link/Link.interface").LinkWrapperProps["type"];
         isDisabled?: import("../../Link/Link.interface").LinkWrapperProps["disabled"];
+        isHolding?: boolean;
         isLoading?: boolean;
         isSkeleton?: boolean;
         label?: string;
@@ -98,3 +99,10 @@ export declare const Skeleton: {
     };
     render: (args: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Hold: {
+    args: {
+        isHolding: boolean;
+        onHoldComplete: () => void;
+    };
+    render: (args: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/types/components/Button/stories/ButtonIcon.stories.d.ts

@@ -2,16 +2,16 @@ import { ButtonProps } from '../Button.interface';
 declare const meta: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        align?: import("@itcase/types").AlignProps;
-        borderColor?: import("@itcase/types").BorderColorProps;
-        borderType?: import("@itcase/types").BorderTypeProps;
-        borderWidth?: import("@itcase/types").BorderWidthProps;
-        fill?: import("@itcase/types").FillProps;
-        fillHover?: import("@itcase/types").FillHoverProps;
+        align?: import("@itcase/types-ui").AlignProps;
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        fillHover?: import("@itcase/types-ui").FillHoverProps;
         icon?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconAfter?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconAfterAppearance?: import("../../Icon/Icon.interface").IconProps["appearance"];
-        iconAfterAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+        iconAfterAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconAfterFill?: import("../../Icon/Icon.interface").IconProps["fill"];
         iconAfterFillIcon?: import("../../Icon/Icon.interface").IconProps["iconFill"];
         iconAfterFillSize?: import("../../Icon/Icon.interface").IconProps["fillSize"];
@@ -22,7 +22,7 @@ declare const meta: {
         iconAppearanceSize?: import("../../Icon/Icon.interface").IconProps["iconSize"];
         iconBefore?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconBeforeAppearance?: import("../../Icon/Icon.interface").IconProps["appearance"];
-        iconBeforeAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+        iconBeforeAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconBeforeFill?: import("../../Icon/Icon.interface").IconProps["fill"];
         iconBeforeFillIcon?: import("../../Icon/Icon.interface").IconProps["iconFill"];
         iconBeforeFillSize?: import("../../Icon/Icon.interface").IconProps["fillSize"];
@@ -42,31 +42,32 @@ declare const meta: {
         labelTextWeight?: import("../../Text/Text.interface").TextProps["textWeight"];
         labelTextWrap?: import("../../Text/Text.interface").TextProps["textWrap"];
         loaderAppearance?: import("../../Loader/Loader.interface").LoaderProps["appearance"];
-        loaderAppearanceSize?: import("@itcase/types").AppearanceSizeKey;
+        loaderAppearanceSize?: import("@itcase/types-ui").AppearanceSizeKey;
         loaderFill?: import("../../Loader/Loader.interface").LoaderProps["fill"];
         loaderItemFill?: import("../../Loader/Loader.interface").LoaderProps["itemFill"];
         loaderShape?: import("../../Loader/Loader.interface").LoaderProps["shape"];
         loaderSize?: import("../../Loader/Loader.interface").LoaderProps["size"];
         loaderType?: import("../../Loader/Loader.interface").LoaderProps["type"];
-        shape?: import("@itcase/types").ShapeProps;
-        shapeStrength?: import("@itcase/types").ShapeStrengthProps;
-        size?: import("@itcase/types").SizeProps;
-        wrap?: import("@itcase/types").WrapProps;
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
-        appearance?: import("@itcase/types").CompositeAppearanceKey;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
         before?: string;
         children?: import("react").ReactNode;
         className?: string;
         dataTestId?: string;
         dataTour?: string;
-        elevation?: import("@itcase/types").ElevationProps;
+        elevation?: import("@itcase/types-ui").ElevationProps;
         href?: import("../../Link/Link.interface").LinkWrapperProps["href"];
         htmlType?: import("../../Link/Link.interface").LinkWrapperProps["type"];
         isDisabled?: import("../../Link/Link.interface").LinkWrapperProps["disabled"];
+        isHolding?: boolean;
         isLoading?: boolean;
         isSkeleton?: boolean;
         label?: string;

package/dist/types/components/Button/stories/ButtonLabel.stories.d.ts

@@ -2,16 +2,16 @@ import { ButtonProps } from '../Button.interface';
 declare const meta: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        align?: import("@itcase/types").AlignProps;
-        borderColor?: import("@itcase/types").BorderColorProps;
-        borderType?: import("@itcase/types").BorderTypeProps;
-        borderWidth?: import("@itcase/types").BorderWidthProps;
-        fill?: import("@itcase/types").FillProps;
-        fillHover?: import("@itcase/types").FillHoverProps;
+        align?: import("@itcase/types-ui").AlignProps;
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        fillHover?: import("@itcase/types-ui").FillHoverProps;
         icon?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconAfter?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconAfterAppearance?: import("../../Icon/Icon.interface").IconProps["appearance"];
-        iconAfterAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+        iconAfterAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconAfterFill?: import("../../Icon/Icon.interface").IconProps["fill"];
         iconAfterFillIcon?: import("../../Icon/Icon.interface").IconProps["iconFill"];
         iconAfterFillSize?: import("../../Icon/Icon.interface").IconProps["fillSize"];
@@ -22,7 +22,7 @@ declare const meta: {
         iconAppearanceSize?: import("../../Icon/Icon.interface").IconProps["iconSize"];
         iconBefore?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconBeforeAppearance?: import("../../Icon/Icon.interface").IconProps["appearance"];
-        iconBeforeAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+        iconBeforeAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconBeforeFill?: import("../../Icon/Icon.interface").IconProps["fill"];
         iconBeforeFillIcon?: import("../../Icon/Icon.interface").IconProps["iconFill"];
         iconBeforeFillSize?: import("../../Icon/Icon.interface").IconProps["fillSize"];
@@ -42,31 +42,32 @@ declare const meta: {
         labelTextWeight?: import("../../Text/Text.interface").TextProps["textWeight"];
         labelTextWrap?: import("../../Text/Text.interface").TextProps["textWrap"];
         loaderAppearance?: import("../../Loader/Loader.interface").LoaderProps["appearance"];
-        loaderAppearanceSize?: import("@itcase/types").AppearanceSizeKey;
+        loaderAppearanceSize?: import("@itcase/types-ui").AppearanceSizeKey;
         loaderFill?: import("../../Loader/Loader.interface").LoaderProps["fill"];
         loaderItemFill?: import("../../Loader/Loader.interface").LoaderProps["itemFill"];
         loaderShape?: import("../../Loader/Loader.interface").LoaderProps["shape"];
         loaderSize?: import("../../Loader/Loader.interface").LoaderProps["size"];
         loaderType?: import("../../Loader/Loader.interface").LoaderProps["type"];
-        shape?: import("@itcase/types").ShapeProps;
-        shapeStrength?: import("@itcase/types").ShapeStrengthProps;
-        size?: import("@itcase/types").SizeProps;
-        wrap?: import("@itcase/types").WrapProps;
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
-        appearance?: import("@itcase/types").CompositeAppearanceKey;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
         before?: string;
         children?: import("react").ReactNode;
         className?: string;
         dataTestId?: string;
         dataTour?: string;
-        elevation?: import("@itcase/types").ElevationProps;
+        elevation?: import("@itcase/types-ui").ElevationProps;
         href?: import("../../Link/Link.interface").LinkWrapperProps["href"];
         htmlType?: import("../../Link/Link.interface").LinkWrapperProps["type"];
         isDisabled?: import("../../Link/Link.interface").LinkWrapperProps["disabled"];
+        isHolding?: boolean;
         isLoading?: boolean;
         isSkeleton?: boolean;
         label?: string;

package/dist/types/components/Button/stories/ButtonLoading.stories.d.ts

@@ -2,16 +2,16 @@ import { ButtonProps } from '../Button.interface';
 declare const meta: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        align?: import("@itcase/types").AlignProps;
-        borderColor?: import("@itcase/types").BorderColorProps;
-        borderType?: import("@itcase/types").BorderTypeProps;
-        borderWidth?: import("@itcase/types").BorderWidthProps;
-        fill?: import("@itcase/types").FillProps;
-        fillHover?: import("@itcase/types").FillHoverProps;
+        align?: import("@itcase/types-ui").AlignProps;
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        fillHover?: import("@itcase/types-ui").FillHoverProps;
         icon?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconAfter?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconAfterAppearance?: import("../../Icon/Icon.interface").IconProps["appearance"];
-        iconAfterAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+        iconAfterAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconAfterFill?: import("../../Icon/Icon.interface").IconProps["fill"];
         iconAfterFillIcon?: import("../../Icon/Icon.interface").IconProps["iconFill"];
         iconAfterFillSize?: import("../../Icon/Icon.interface").IconProps["fillSize"];
@@ -22,7 +22,7 @@ declare const meta: {
         iconAppearanceSize?: import("../../Icon/Icon.interface").IconProps["iconSize"];
         iconBefore?: import("../../Icon/Icon.interface").IconProps["SvgImage"];
         iconBeforeAppearance?: import("../../Icon/Icon.interface").IconProps["appearance"];
-        iconBeforeAppearanceSize?: import("@itcase/types").AppearanceIconSizeKey;
+        iconBeforeAppearanceSize?: import("@itcase/types-ui").AppearanceIconSizeKey;
         iconBeforeFill?: import("../../Icon/Icon.interface").IconProps["fill"];
         iconBeforeFillIcon?: import("../../Icon/Icon.interface").IconProps["iconFill"];
         iconBeforeFillSize?: import("../../Icon/Icon.interface").IconProps["fillSize"];
@@ -42,31 +42,32 @@ declare const meta: {
         labelTextWeight?: import("../../Text/Text.interface").TextProps["textWeight"];
         labelTextWrap?: import("../../Text/Text.interface").TextProps["textWrap"];
         loaderAppearance?: import("../../Loader/Loader.interface").LoaderProps["appearance"];
-        loaderAppearanceSize?: import("@itcase/types").AppearanceSizeKey;
+        loaderAppearanceSize?: import("@itcase/types-ui").AppearanceSizeKey;
         loaderFill?: import("../../Loader/Loader.interface").LoaderProps["fill"];
         loaderItemFill?: import("../../Loader/Loader.interface").LoaderProps["itemFill"];
         loaderShape?: import("../../Loader/Loader.interface").LoaderProps["shape"];
         loaderSize?: import("../../Loader/Loader.interface").LoaderProps["size"];
         loaderType?: import("../../Loader/Loader.interface").LoaderProps["type"];
-        shape?: import("@itcase/types").ShapeProps;
-        shapeStrength?: import("@itcase/types").ShapeStrengthProps;
-        size?: import("@itcase/types").SizeProps;
-        wrap?: import("@itcase/types").WrapProps;
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
-        appearance?: import("@itcase/types").CompositeAppearanceKey;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
         before?: string;
         children?: import("react").ReactNode;
         className?: string;
         dataTestId?: string;
         dataTour?: string;
-        elevation?: import("@itcase/types").ElevationProps;
+        elevation?: import("@itcase/types-ui").ElevationProps;
         href?: import("../../Link/Link.interface").LinkWrapperProps["href"];
         htmlType?: import("../../Link/Link.interface").LinkWrapperProps["type"];
         isDisabled?: import("../../Link/Link.interface").LinkWrapperProps["disabled"];
+        isHolding?: boolean;
         isLoading?: boolean;
         isSkeleton?: boolean;
         label?: string;