@itcase/ui-web 1.9.104 → 1.9.105

package/dist/types/components/Warning/stories/WarningDefault.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const AccentPrimary = {
     args: {
-        appearance: 'accentPrimary sizeL',
+        appearance: 'accentPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -23,7 +23,7 @@ export const AccentPrimary = {
 };
 export const ErrorPrimary = {
     args: {
-        appearance: 'errorPrimary sizeL',
+        appearance: 'errorPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -31,7 +31,7 @@ export const ErrorPrimary = {
 };
 export const WarningPrimary = {
     args: {
-        appearance: 'warningPrimary sizeL',
+        appearance: 'warningPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -39,7 +39,7 @@ export const WarningPrimary = {
 };
 export const InfoPrimary = {
     args: {
-        appearance: 'infoPrimary sizeL',
+        appearance: 'infoPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });

package/dist/types/components/Warning/stories/WarningDemo.stories.d.ts

@@ -1,18 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Warning } from '../Warning';
-declare const meta: {
-    title: string;
-    component: typeof Warning;
-    args: {
-        appearance: "infoMutedPrimary sizeL rounded";
-        label: string;
-        description: string;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { WarningGalleryStory } from '../Warning.interface';
+declare const meta: Meta<WarningGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<WarningGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Warning/stories/WarningDemo.stories.js

@@ -1,28 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { warningAppearanceAccent } from '../appearance/warningAccent';
+import { warningAppearanceError } from '../appearance/warningError';
+import { warningAppearanceInfo } from '../appearance/warningInfo';
+import { warningAppearanceShape } from '../appearance/warningShape';
+import { warningAppearanceSize } from '../appearance/warningSize';
+import { warningAppearanceStyle } from '../appearance/warningStyle';
+import { warningAppearanceWarning } from '../appearance/warningWarning';
 import { Warning } from '../Warning';
+const gallery = createComponentGallery({
+    size: warningAppearanceSize,
+    appearanceGroups: {
+        accent: warningAppearanceAccent,
+        error: warningAppearanceError,
+        info: warningAppearanceInfo,
+        warning: warningAppearanceWarning,
+    },
+    shape: warningAppearanceShape,
+    style: warningAppearanceStyle,
+});
 const meta = {
     title: 'Molecules / Warning',
     component: Warning,
     args: {
-        appearance: 'infoMutedPrimary sizeL rounded',
+        appearance: 'accent sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         label: 'Label',
         description: 'Description',
+        isSkeleton: false,
     },
     parameters: {
         layout: 'centered',
     },
+    argTypes: {
+        appearance: gallery.argTypes.appearance,
+        tier: gallery.argTypes.tier,
+        style: gallery.argTypes.style,
+        shape: gallery.argTypes.shape,
+    },
 };
 export default meta;
 export const Demo = {
-    render: (args) => {
-        return _jsx(Warning, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Warning, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args }) => (_jsx(Warning, { appearance: appearance, label: args.label, description: args.description, isSkeleton: args.isSkeleton }))),
 };

package/dist/types/components/Warning/stories/WarningMuted.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const AccentMuted = {
     args: {
-        appearance: 'accentMutedPrimary sizeL',
+        appearance: 'accentMutedPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -23,7 +23,7 @@ export const AccentMuted = {
 };
 export const ErrorMuted = {
     args: {
-        appearance: 'errorMutedPrimary sizeL',
+        appearance: 'errorMutedPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -31,7 +31,7 @@ export const ErrorMuted = {
 };
 export const WarningMuted = {
     args: {
-        appearance: 'warningMutedPrimary sizeL',
+        appearance: 'warningMutedPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -39,7 +39,7 @@ export const WarningMuted = {
 };
 export const InfoMuted = {
     args: {
-        appearance: 'infoMutedPrimary sizeL',
+        appearance: 'infoMutedPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });

package/dist/types/components/Warning/stories/WarningShape.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        appearance: 'infoMutedPrimary sizeL solid',
+        appearance: 'infoMutedPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -23,7 +23,7 @@ export const Default = {
 };
 export const Rounded = {
     args: {
-        appearance: 'infoMutedPrimary sizeL rounded',
+        appearance: 'infoMutedPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -31,7 +31,7 @@ export const Rounded = {
 };
 export const RoundedXL = {
     args: {
-        appearance: 'infoMutedPrimary sizeL roundedXL',
+        appearance: 'infoMutedPrimary sizeL solid roundedXL',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -39,7 +39,7 @@ export const RoundedXL = {
 };
 export const RoundedL = {
     args: {
-        appearance: 'infoMutedPrimary sizeL roundedL',
+        appearance: 'infoMutedPrimary sizeL solid roundedL',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -47,7 +47,7 @@ export const RoundedL = {
 };
 export const RoundedM = {
     args: {
-        appearance: 'infoMutedPrimary sizeL roundedM',
+        appearance: 'infoMutedPrimary sizeL solid roundedM',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -55,7 +55,7 @@ export const RoundedM = {
 };
 export const RoundedS = {
     args: {
-        appearance: 'infoMutedPrimary sizeL roundedS',
+        appearance: 'infoMutedPrimary sizeL solid roundedS',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });

package/dist/types/components/Warning/stories/WarningSize.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const SizeL = {
     args: {
-        appearance: 'infoMutedPrimary sizeL',
+        appearance: 'infoMutedPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });

package/dist/types/components/Warning/stories/WarningStyle.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'infoMutedPrimary sizeL solid',
+        appearance: 'infoMutedPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -23,7 +23,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'infoMutedPrimary sizeL outlined',
+        appearance: 'infoMutedPrimary sizeL outlined rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -31,7 +31,7 @@ export const Outlined = {
 };
 export const Full = {
     args: {
-        appearance: 'infoMutedPrimary sizeL full',
+        appearance: 'infoMutedPrimary sizeL full rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });
@@ -39,7 +39,7 @@ export const Full = {
 };
 export const Ghost = {
     args: {
-        appearance: 'infoMutedPrimary sizeL ghost',
+        appearance: 'infoMutedPrimary sizeL ghost rounded',
     },
     render: (args) => {
         return _jsx(Warning, { ...args });

package/dist/types/hooks/useHoldProgress.d.ts

@@ -11,7 +11,7 @@ type UseHoldProgressOptions = {
 };
 declare function useHoldProgress(options: UseHoldProgressOptions): {
     holdState: HoldStates;
-    onHoldEnd: (_event?: React.PointerEvent) => void;
+    onHoldEnd: () => void;
     onHoldStart: (event: React.PointerEvent) => void;
 };
 export { useHoldProgress, type UseHoldProgressOptions };

package/dist/types/hooks/useHoldProgress.js

@@ -7,27 +7,25 @@ const HOLD_STATE = {
 function useHoldProgress(options) {
     const { holdDurationMs = 500, isHolding, onHoldComplete } = options;
     const animationFrameIdRef = useRef(null);
-    const onHoldCompleteRef = useRef(onHoldComplete);
+    const holdCompleteFiredRef = useRef(false);
     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 &&
+                !holdCompleteFiredRef.current &&
+                onHoldComplete) {
+                holdCompleteFiredRef.current = true;
+                onHoldComplete();
             }
             if (holdState === HOLD_STATE.HOLDING && holdProgressRef.current < 1) {
-                const prevProgress = holdProgressRef.current;
-                const newProgress = Math.min(prevProgress + FRAME_DURATION / holdDurationMs, 1);
+                const newProgress = Math.min(holdProgressRef.current + 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);
+                const newProgress = Math.max(holdProgressRef.current - FRAME_DURATION / holdDurationMs, 0);
                 holdProgressRef.current = newProgress;
                 animationFrameIdRef.current = requestAnimationFrame(updateProgress);
             }
@@ -38,17 +36,18 @@ function useHoldProgress(options) {
                 cancelAnimationFrame(animationFrameIdRef.current);
             }
         };
-    }, [holdState, holdDurationMs]);
+    }, [holdState, holdDurationMs, onHoldComplete]);
     const onHoldStart = useCallback((event) => {
         if (!isHolding) {
             return;
         }
-        // Only proceed if it's a touch event or left mouse button (button 0)
         if (event.pointerType === 'touch' || event.button === 0) {
+            holdCompleteFiredRef.current = false;
             setState(HOLD_STATE.HOLDING);
         }
     }, [isHolding]);
-    const onHoldEnd = useCallback((_event) => {
+    const onHoldEnd = useCallback(() => {
+        holdCompleteFiredRef.current = false;
         setState(HOLD_STATE.IDLE);
     }, []);
     return {

package/dist/types/storybook/avatarSrcOptions.d.ts

@@ -0,0 +1,2 @@
+declare const AVATAR_SRC_OPTIONS: string[];
+export { AVATAR_SRC_OPTIONS };

package/dist/types/storybook/avatarSrcOptions.js

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+const avatarAssetModules = import.meta.glob('../../.storybook/assets/avatar/*.{png,jpg,jpeg,webp,svg}');
+const toAvatarPublicSrc = (assetPath) => `/avatar/${assetPath.split('/').pop()}`;
+const AVATAR_SRC_OPTIONS = Object.keys(avatarAssetModules)
+    .map(toAvatarPublicSrc)
+    .sort();
+export { AVATAR_SRC_OPTIONS };

package/dist/types/storybook/createComponentGallery/createComponentGallery.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import type { ComponentGalleryArgs, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved } from './createComponentGallery.interface';
+declare const createComponentGallery: <TAppearance extends string = string>({ size, src, appearanceGroups, shape, style, tierOrder, }: ComponentGalleryOptions) => {
+    render: <TArgs extends ComponentGalleryArgs>(args: TArgs, renderComponent: (params: ComponentGalleryRenderParams<TArgs, TAppearance>) => ReactNode) => import("react/jsx-runtime").JSX.Element;
+    appearanceList: string[];
+    appearanceTierOptions: string[];
+    argTypes: {
+        src: {
+            control: "select";
+            options: string[];
+        };
+        appearance: {
+            name: string;
+            control: "select";
+            options: string[];
+        };
+        shape: {
+            name: string;
+            control: "radio";
+            options: string[];
+        };
+        style: {
+            name: string;
+            control: "radio";
+            options: string[];
+        };
+        tier: {
+            name: string;
+            control: "select";
+            options: string[];
+        };
+    };
+    resolved: ComponentGalleryResolved;
+    shapeOptions: string[];
+    sizeKeys: string[];
+    styleOptions: string[];
+};
+export { createComponentGallery };

package/dist/types/storybook/createComponentGallery/createComponentGallery.interface.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+type ComponentGalleryArgs = {
+    appearance: string;
+    shape: string;
+    style: string;
+    tier: string;
+};
+type ComponentGalleryResolved = {
+    resolveAppearanceKey: (appearance: string, tier: string) => string;
+    sizeKeys: string[];
+};
+type ComponentGallerySizeGridProps = {
+    children: (sizeKey: string) => ReactNode;
+    sizeKeys: string[];
+};
+type ComponentGalleryAppearanceGroup = Record<string, unknown>;
+type ComponentGalleryOptions = {
+    appearanceGroups: Record<string, ComponentGalleryAppearanceGroup>;
+    shape: Record<string, unknown>;
+    size: Record<string, unknown>;
+    src?: readonly string[];
+    style: Record<string, unknown>;
+    tierOrder?: string[];
+};
+type ComponentGalleryRenderParams<Args extends ComponentGalleryArgs, Appearance extends string = string> = {
+    appearance: Appearance;
+    args: Args;
+    sizeKey: string;
+};
+export type { ComponentGalleryAppearanceGroup, ComponentGalleryArgs, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved, ComponentGallerySizeGridProps, };

package/dist/types/storybook/createComponentGallery/createComponentGallery.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/types/storybook/createComponentGallery/createComponentGallery.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeAppearanceKeys } from '@itcase/ui-core/utils';
+import { Group } from 'src/components/Group';
+import { Text } from 'src/components/Text';
+const ComponentGallerySizeGrid = ({ sizeKeys, children, }) => {
+    return (_jsx(Group, { direction: "vertical", padding: "2m", gap: "3m", children: sizeKeys.map((sizeKey) => (_jsxs(Group, { direction: "vertical", gap: "1m", children: [_jsx(Text, { size: "l", textColor: "surfaceTextQuaternary", textWeight: "bold", children: sizeKey }), children(sizeKey)] }, sizeKey))) }));
+};
+const DEFAULT_TIER_ORDER = [
+    'Primary',
+    'Secondary',
+    'Tertiary',
+    'Quaternary',
+    'MutedPrimary',
+    'MutedSecondary',
+    'MutedTertiary',
+    'MutedQuaternary',
+];
+const createComponentGallery = ({ size, src, appearanceGroups, shape, style, tierOrder = DEFAULT_TIER_ORDER, }) => {
+    const appearanceList = Object.keys(appearanceGroups).sort();
+    const tiersByAppearance = Object.fromEntries(Object.entries(appearanceGroups).map(([appearance, group]) => [
+        appearance,
+        Object.keys(group)
+            .map((key) => key.slice(appearance.length))
+            .sort((left, right) => tierOrder.indexOf(left) - tierOrder.indexOf(right)),
+    ]));
+    const appearanceTierOptions = [
+        ...new Set(Object.values(tiersByAppearance).flat()),
+    ].sort((left, right) => tierOrder.indexOf(left) - tierOrder.indexOf(right));
+    const resolveAppearanceKey = (appearance, tier) => `${appearance}${tier}`;
+    const sizeKeys = Object.keys(size);
+    const styleOptions = Object.keys(style);
+    const shapeOptions = Object.keys(shape);
+    const argTypes = {
+        appearance: {
+            name: 'Appearance',
+            control: 'select',
+            options: appearanceList,
+        },
+        shape: {
+            name: 'Shape',
+            control: 'radio',
+            options: shapeOptions,
+        },
+        style: {
+            name: 'Style',
+            control: 'radio',
+            options: styleOptions,
+        },
+        tier: {
+            name: 'Tier',
+            control: 'select',
+            options: appearanceTierOptions,
+        },
+        ...(src && {
+            src: {
+                control: 'select',
+                options: [...src],
+            },
+        }),
+    };
+    const resolved = {
+        resolveAppearanceKey,
+        sizeKeys,
+    };
+    const render = (args, renderComponent) => {
+        const { appearance, shape, style, tier } = args;
+        const appearanceKey = resolved.resolveAppearanceKey(appearance, tier);
+        return (_jsx(ComponentGallerySizeGrid, { sizeKeys: resolved.sizeKeys, children: (sizeKey) => renderComponent({
+                appearance: mergeAppearanceKeys(appearanceKey, style, shape, sizeKey),
+                args: args,
+                sizeKey: sizeKey,
+            }) }));
+    };
+    return {
+        render,
+        appearanceList,
+        appearanceTierOptions,
+        argTypes,
+        resolved,
+        shapeOptions,
+        sizeKeys,
+        styleOptions,
+    };
+};
+export { createComponentGallery };

package/dist/types/storybook/createComponentGallery/index.d.ts

@@ -0,0 +1,2 @@
+export { createComponentGallery } from './createComponentGallery';
+export type { ComponentGalleryAppearanceGroup, ComponentGalleryArgs, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved, } from './createComponentGallery.interface';

package/dist/types/storybook/createComponentGallery/index.js

@@ -0,0 +1 @@
+export { createComponentGallery } from './createComponentGallery';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-web",
-  "version": "1.9.104",
+  "version": "1.9.105",
   "description": "UI components",
   "keywords": "",
   "license": "MIT",
@@ -26,10 +26,10 @@
     "dev-js": "rollup -c -w",
     "dev-css": "postcss 'src/styles/bundles.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' --base src --dir dist/css/ --env production -w --verbose",
     "prepack": "NODE_ENV=production npm run build",
-    "typecheck": "tsc --noEmit --pretty",
+    "typecheck": "tsc --noEmit --pretty -p tsconfig.build.json",
     "storybook": "rm -rf node_modules/.cache/ && STORYBOOK=true storybook dev -p 6006 --disable-telemetry",
-    "build-storybook": "STORYBOOK=true storybook build",
-    "test-storybook": "vitest run --project=storybook"
+    "storybook:test": "vitest --run --project storybook",
+    "build-storybook": "STORYBOOK=true storybook build"
   },
   "files": [
     "dist"
@@ -50,18 +50,18 @@
   "dependencies": {
     "@itcase/common": "^1.2.41",
     "@itcase/icons": "^1.2.29",
-    "@itcase/tokens-am": "^1.1.56",
+    "@itcase/tokens-am": "^1.1.57",
     "@itcase/tokens-baikal": "^1.1.54",
     "@itcase/tokens-palette": "^1.1.50",
-    "@itcase/ui-core": "^1.9.97",
+    "@itcase/ui-core": "^1.9.105",
     "@rc-component/tooltip": "^1.4.0",
     "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "framer-motion": "^12.38.0",
-    "js-cookie": "^3.0.5",
+    "date-fns": "^4.2.1",
+    "framer-motion": "^12.39.0",
+    "js-cookie": "^3.0.7",
     "lodash": "^4.18.1",
     "luxon": "^3.7.2",
-    "motion": "^12.38.0",
+    "motion": "^12.39.0",
     "rc-slider": "^11.1.9",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -69,7 +69,7 @@
     "react-dom": "^18.3.1",
     "react-dropzone": "^15.0.0",
     "react-indiana-drag-scroll": "^3.0.3-alpha",
-    "react-inlinesvg": "^4.4.0",
+    "react-inlinesvg": "^4.4.1",
     "react-modal-sheet": "5.6.0",
     "react-modern-drawer": "^1.4.0",
     "react-otp-input": "^3.1.1",
@@ -85,9 +85,9 @@
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
-    "@itcase/storybook-config": "^1.2.52",
-    "@itcase/types-core": "^1.1.64",
-    "@itcase/types-ui": "^1.1.70",
+    "@itcase/storybook-config": "^1.2.58",
+    "@itcase/types-core": "^1.1.74",
+    "@itcase/types-ui": "^1.1.75",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-commonjs": "^29.0.2",
@@ -96,7 +96,7 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/addon-vitest": "^10.4.0",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.24",
     "@types/luxon": "^3.7.1",
@@ -106,13 +106,13 @@
     "@types/react-scroll": "^1.8.10",
     "@types/uuid": "^11.0.0",
     "babel-plugin-inline-react-svg": "^2.0.2",
-    "playwright": "^1.59.1",
-    "rollup": "4.60.3",
+    "playwright": "^1.60.0",
+    "rollup": "4.60.4",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.3.6",
+    "storybook": "^10.4.0",
     "typescript": "^6.0.3"
   },
-  "gitHead": "4b3a1faf6ea63fdf252fb4e66b7445b5fde1ef4e"
+  "gitHead": "b218d412f3af6819f6555abdbef7e83b0646c5bb"
 }

package/dist/Avatar_cjs_xThGdOLX.js

@@ -1 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("react"),i=require("clsx"),r=require("@itcase/ui-core/hooks"),s=require("./primitives_cjs_BphFj-db.js"),l=require("./Image_cjs_DBUl9LUO.js");const t={size16:{size:"16",textSize:"xs",badgeSize:"xxs",iconFillSize:"12"},size20:{size:"20",textSize:"xs",badgeSize:"xxs",iconFillSize:"12"},size24:{size:"24",textSize:"s",badgeSize:"xxs",iconFillSize:"12"},size32:{size:"32",textSize:"m",badgeSize:"xs",iconFillSize:"12"},size40:{size:"40",textSize:"l",badgeSize:"s",iconFillSize:"12"},size48:{size:"48",textSize:"l",badgeSize:"s",iconFillSize:"12"},size56:{size:"56",textSize:"xl",badgeSize:"m",iconFillSize:"16"},size96:{size:"96",textSize:"xxl",badgeSize:"xl",iconFillSize:"32"},size144:{size:"144",textSize:"xxl",badgeSize:"xxl",iconFillSize:"40"},size240:{size:"240",textSize:"xxl",badgeSize:"xxl",iconFillSize:"40"},solid:{borderColor:"none"},outlined:{fill:"none"},full:{borderColor:"none"},ghost:{fill:"none",borderColor:"none"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"rounded"},roundedL:{shape:"rounded"},roundedM:{shape:"rounded"},roundedS:{shape:"rounded"},surfacePrimary:{fill:"surfacePrimary",textColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary solid circular"},surfaceQuaternary:{fill:"surfaceQuaternary",textColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary solid circular"},surfaceSecondary:{fill:"surfaceSecondary",textColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary solid circular"},surfaceTertiary:{fill:"surfaceTertiary",textColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary solid circular"}},o={appearance:t,setAppearance:e=>{o.appearance=e}};exports.Avatar=function(t){const{appearance:c,className:n,dataTestId:d,dataTour:z,src:x,firstName:u="",secondName:p="",count:S,before:g,after:f,isSkeleton:m,onClick:b}=t,_=a.useMemo(()=>`${(u?.[0]||"").toUpperCase()}${(p?.[0]||"").toUpperCase()}`,[u,p]),h=r.useAppearanceConfig(c,o),v=r.useDevicePropsGenerator(t,h),{size:C,fillClass:y,fillHoverClass:F,textColor:j,textSize:P,textWeight:T,badge:A,badgeAppearance:N,badgeShape:$,badgeSize:q,badgeTextColor:I,badgeTextSize:k,badgeValue:U,icon:H,iconFill:L,iconFillHover:M,iconFillSize:Q,iconItemFill:W,iconShape:w,iconSize:B,iconSrc:D,placeholderUrl:G,shapeClass:V,sizeClass:X}=v;return e.jsx("div",{className:i(n,"avatar",C&&`avatar_size_${X}`,(U||N||q)&&"avatar_status",m&&"skeleton",b&&"cursor_type_pointer"),"data-testid":d,"data-tour":z,onClick:b,children:e.jsxs("div",{className:i("avatar__wrapper",y&&`fill_${y}`,F&&`fill_hover_${F}`,V&&`shape_${V}`),children:[g,x?e.jsx(l.Image,{className:i("avatar__image",V&&`shape_${V}`),src:x,placeholderUrl:G}):e.jsx(s.Text,{className:"avatar__text",size:P,textColor:j,textWeight:T,children:_||S}),(H||D)&&e.jsx(s.Icon,{className:"avatar__icon",fill:L,fillHover:M,fillSize:Q,iconFill:W,iconSize:B,imageSrc:D,shape:w,SvgImage:H}),(A||U)&&e.jsx(s.Badge,{appearance:N,className:"avatar__badge",size:q,textColor:I,textSize:k,shape:$,value:U}),f]})})},exports.avatarAppearance=t,exports.avatarConfig=o;

package/dist/Avatar_es_BsCCcacw.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useMemo as i}from"react";import r from"clsx";import{useAppearanceConfig as l,useDevicePropsGenerator as s}from"@itcase/ui-core/hooks";import{a as o,I as t,B as c}from"./primitives_es_BkqjUVO-.js";import{I as n}from"./Image_es_CA8fSzj-.js";const d={size16:{size:"16",textSize:"xs",badgeSize:"xxs",iconFillSize:"12"},size20:{size:"20",textSize:"xs",badgeSize:"xxs",iconFillSize:"12"},size24:{size:"24",textSize:"s",badgeSize:"xxs",iconFillSize:"12"},size32:{size:"32",textSize:"m",badgeSize:"xs",iconFillSize:"12"},size40:{size:"40",textSize:"l",badgeSize:"s",iconFillSize:"12"},size48:{size:"48",textSize:"l",badgeSize:"s",iconFillSize:"12"},size56:{size:"56",textSize:"xl",badgeSize:"m",iconFillSize:"16"},size96:{size:"96",textSize:"xxl",badgeSize:"xl",iconFillSize:"32"},size144:{size:"144",textSize:"xxl",badgeSize:"xxl",iconFillSize:"40"},size240:{size:"240",textSize:"xxl",badgeSize:"xxl",iconFillSize:"40"},solid:{borderColor:"none"},outlined:{fill:"none"},full:{borderColor:"none"},ghost:{fill:"none",borderColor:"none"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"rounded"},roundedL:{shape:"rounded"},roundedM:{shape:"rounded"},roundedS:{shape:"rounded"},surfacePrimary:{fill:"surfacePrimary",textColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary solid circular"},surfaceQuaternary:{fill:"surfaceQuaternary",textColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary solid circular"},surfaceSecondary:{fill:"surfaceSecondary",textColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary solid circular"},surfaceTertiary:{fill:"surfaceTertiary",textColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary solid circular"}},z={appearance:d,setAppearance:e=>{z.appearance=e}};function x(d){const{appearance:x,className:p,dataTestId:S,dataTour:u,src:m,firstName:f="",secondName:g="",count:b,before:_,after:h,isSkeleton:C,onClick:v}=d,y=i(()=>`${(f?.[0]||"").toUpperCase()}${(g?.[0]||"").toUpperCase()}`,[f,g]),F=l(x,z),P=s(d,F),{size:T,fillClass:N,fillHoverClass:A,textColor:$,textSize:I,textWeight:k,badge:U,badgeAppearance:j,badgeShape:H,badgeSize:L,badgeTextColor:Q,badgeTextSize:W,badgeValue:w,icon:B,iconFill:M,iconFillHover:V,iconFillSize:X,iconItemFill:q,iconShape:D,iconSize:E,iconSrc:G,placeholderUrl:J,shapeClass:K,sizeClass:O}=P;return e("div",{className:r(p,"avatar",T&&`avatar_size_${O}`,(w||j||L)&&"avatar_status",C&&"skeleton",v&&"cursor_type_pointer"),"data-testid":S,"data-tour":u,onClick:v,children:a("div",{className:r("avatar__wrapper",N&&`fill_${N}`,A&&`fill_hover_${A}`,K&&`shape_${K}`),children:[_,m?e(n,{className:r("avatar__image",K&&`shape_${K}`),src:m,placeholderUrl:J}):e(o,{className:"avatar__text",size:I,textColor:$,textWeight:k,children:y||b}),(B||G)&&e(t,{className:"avatar__icon",fill:M,fillHover:V,fillSize:X,iconFill:q,iconSize:E,imageSrc:G,shape:D,SvgImage:B}),(U||w)&&e(c,{appearance:j,className:"avatar__badge",size:L,textColor:Q,textSize:W,shape:H,value:w}),h]})})}export{x as A,d as a,z as b};