@itcase/ui-web 1.9.77 → 1.9.81

package/dist/types/components/Drawer/stories/DrawerSwap.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Drawer } from '../Drawer';
+declare const meta: {
+    title: string;
+    component: typeof Drawer;
+    args: {
+        appearance: "surfacePrimary";
+        before: import("react/jsx-runtime").JSX.Element;
+        after: import("react/jsx-runtime").JSX.Element;
+        isOpen: true;
+        children: import("react/jsx-runtime").JSX.Element;
+        title: string;
+        desc: string;
+        onClickClose: () => void;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/types/components/Drawer/stories/DrawerSwap.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group } from 'src/components/Group';
+import { Drawer } from '../Drawer';
+import { DrawerMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Drawer / Swap',
+    component: Drawer,
+    args: {
+        ...DrawerMock,
+        appearance: 'surfacePrimary',
+        before: _jsx(Group, { width: "fill", height: "48px", fill: "purple" }),
+        after: _jsx(Group, { width: "fill", height: "48px", fill: "purple" }),
+        isOpen: true,
+        children: _jsx(Group, { width: "fill", height: "48px", fill: "purple" }),
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        return _jsx(Drawer, { ...args });
+    },
+};

package/dist/types/components/Drawer/stories/__mock__/index.js

@@ -0,0 +1,7 @@
+const DrawerMock = {
+    title: 'Title 123',
+    desc: 'Text 123',
+    isOpen: true,
+    onClickClose: () => { },
+};
+export { DrawerMock };

package/dist/types/components/Dropdown/Dropdown.appearance.js

@@ -0,0 +1,13 @@
+import { dropdownAppearanceAccent } from './appearance/dropdownAccent';
+import { dropdownAppearanceShape } from './appearance/dropdownShape';
+import { dropdownAppearanceSize } from './appearance/dropdownSize';
+import { dropdownAppearanceStyle } from './appearance/dropdownStyle';
+import { dropdownAppearanceSurface } from './appearance/dropdownSurface';
+const dropdownAppearance = {
+    ...dropdownAppearanceSurface,
+    ...dropdownAppearanceStyle,
+    ...dropdownAppearanceShape,
+    ...dropdownAppearanceAccent,
+    ...dropdownAppearanceSize,
+};
+export { dropdownAppearance };

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

@@ -1,5 +1,5 @@
 import { CSSProperties, MouseEvent, MouseEventHandler, ReactNode } from 'react';
-import { AlignmentProps, AlignProps, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceKey, DirectionProps, ElevationProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, ShapeStrengthProps, SizeProps, WidthProps } from '@itcase/types-ui';
+import { AlignmentProps, AlignProps, AppearanceConfig, AppearanceKeysDefault, BorderColorProps, CompositeAppearanceKeys, DirectionProps, ElevationProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, ShapeStrengthProps, SizeProps, WidthProps } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { BadgeProps } from 'src/components/Badge/Badge.interface';
 import { DividerProps } from 'src/components/Divider/Divider.interface';
@@ -54,7 +54,7 @@ type DropdownProps = DropdownAppearanceProps & StyleAttributes & {
     after?: ReactNode;
     animationClose?: string;
     animationOpen?: string;
-    appearance?: CompositeAppearanceKey;
+    appearance?: CompositeAppearanceKeys;
     before?: ReactNode;
     children?: ReactNode;
     className?: string;
@@ -68,14 +68,6 @@ type DropdownProps = DropdownAppearanceProps & StyleAttributes & {
     showDivider?: boolean;
     style?: CSSProperties;
 };
-type DropdownAppearanceKeys = AppearanceKeysDefault | AppearanceShapeKey | AppearanceSizeKey | AppearanceStyleKey;
-type DropdownAppearance = {
-    [key in DropdownAppearanceKeys]?: DropdownAppearanceProps;
-};
-type DropdownConfig = {
-    appearance: DropdownAppearance;
-    setAppearance: (appearanceConfig: DropdownAppearance) => void;
-};
 type DropdownItemAppearanceProps = {
     align?: AlignProps;
     alignDirection?: DirectionProps;
@@ -142,16 +134,9 @@ type DropdownItemAppearanceProps = {
     size?: SizeProps;
     width?: WidthProps;
 };
-type DropdownItemAppearance = {
-    [key in DropdownAppearanceKeys]?: DropdownItemAppearanceProps;
-};
-type DropdownItemConfig = {
-    appearance: DropdownItemAppearance;
-    setAppearance: (appearanceConfig: DropdownItemAppearance) => void;
-};
 type DropdownItemProps = DropdownItemAppearanceProps & StyleAttributes & {
     after?: ReactNode;
-    appearance?: CompositeAppearanceKey;
+    appearance?: CompositeAppearanceKeys;
     badgeValue?: BadgeProps['value'];
     before?: ReactNode;
     children?: ReactNode;
@@ -171,4 +156,8 @@ type DropdownItemProps = DropdownItemAppearanceProps & StyleAttributes & {
     showDivider?: boolean;
     style?: CSSProperties;
 };
+type DropdownItemConfig = AppearanceConfig<AppearanceKeysDefault, DropdownItemAppearanceProps>;
+type DropdownItemAppearance = DropdownItemConfig['appearance'];
+type DropdownConfig = AppearanceConfig<AppearanceKeysDefault, DropdownAppearanceProps>;
+type DropdownAppearance = DropdownConfig['appearance'];
 export type { DropdownAppearance, DropdownConfig, DropdownItemAppearance, DropdownItemConfig, DropdownItemProps, DropdownProps, };

package/dist/types/components/Dropdown/Dropdown.interface.js

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

package/dist/types/components/Dropdown/Dropdown.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcase/ui-core/hooks';
+import { DropdownItem } from '.';
+import { dropdownAppearance } from './Dropdown.appearance';
+const dropdownConfig = {
+    appearance: dropdownAppearance,
+    setAppearance: (appearanceConfig) => {
+        dropdownConfig.appearance = appearanceConfig;
+    },
+};
+function Dropdown(props) {
+    const { appearance, className, dataTestId, dataTour, animationClose = 'dropdown_animation_close', animationOpen = 'dropdown_animation_open', dropdownList, showDivider, before, after, isSkeleton, isOpen, setIsOpen, onClickItem, children, } = props;
+    const dropdownRef = useRef(null);
+    const appearanceConfig = useAppearanceConfig(appearance, dropdownConfig);
+    const [animationState, setAnimationState] = useState({
+        className: '',
+    });
+    const onAnimationEnd = useCallback(() => {
+        setAnimationState((prevState) => ({
+            className: isOpen ? prevState.className : '',
+        }));
+    }, [isOpen]);
+    useEffect(() => {
+        if (animationOpen && animationClose) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setAnimationState(() => ({
+                className: isOpen ? animationOpen : animationClose,
+            }));
+        }
+    }, [isOpen, animationOpen, animationClose]);
+    useEffect(() => {
+        function onClickWindow(event) {
+            const dropdownElement = dropdownRef.current;
+            if (dropdownElement && animationOpen) {
+                const isContainsTarget = dropdownElement.contains(event.target);
+                const hasOpenClass = dropdownElement.classList.contains(animationOpen);
+                if (!isContainsTarget && hasOpenClass) {
+                    setIsOpen(false);
+                }
+            }
+        }
+        window.addEventListener('click', onClickWindow);
+        return () => {
+            window.removeEventListener('click', onClickWindow);
+        };
+    }, [animationOpen, setIsOpen]);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignmentClass, fillClass, elevationClass, shapeClass, shapeStrengthClass, } = propsGenerator;
+    const { styles } = useStyles(props);
+    return (_jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: [before, (children || dropdownList) && (_jsxs("div", { className: clsx('dropdown__wrapper'), onAnimationEnd: onAnimationEnd, children: [dropdownList?.map((item) => (_jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, emptyMessage: item.emptyMessage, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, showDivider: showDivider, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
+}
+export { Dropdown };

package/dist/types/components/Dropdown/DropdownItem.appearance.js

@@ -0,0 +1,13 @@
+import { dropdownAppearanceAccent } from './appearance/dropdownAccent';
+import { dropdownAppearanceShape } from './appearance/dropdownShape';
+import { dropdownAppearanceSize } from './appearance/dropdownSize';
+import { dropdownAppearanceStyle } from './appearance/dropdownStyle';
+import { dropdownAppearanceSurface } from './appearance/dropdownSurface';
+const dropdownItemAppearance = {
+    ...dropdownAppearanceSurface,
+    ...dropdownAppearanceStyle,
+    ...dropdownAppearanceShape,
+    ...dropdownAppearanceAccent,
+    ...dropdownAppearanceSize,
+};
+export { dropdownItemAppearance };

package/dist/types/components/Dropdown/DropdownItem.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcase/ui-core/hooks';
+import { Badge } from 'src/components/Badge';
+import { Divider } from 'src/components/Divider';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { dropdownItemAppearance } from './DropdownItem.appearance';
+const dropdownItemConfig = {
+    appearance: dropdownItemAppearance,
+    setAppearance: (appearanceConfig) => {
+        dropdownItemConfig.appearance = appearanceConfig;
+    },
+};
+function DropdownItem(props) {
+    const { appearance, className, dataTestId, dataTour, label, desc, badgeValue, emptyMessage, showDivider, before, after, isActive, isDisabled, isSkeleton, isHover, onClick, onMouseEnter, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, dropdownItemConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, descTextColor, descTextColorHover, descTextGradient, descTextSize, descTextStyle, descTextWeight, descTextWrap, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerDirection, dividerFill, dividerSize, emptyMessageTextColor, emptyMessageTextColorHover, emptyMessageTextSize, emptyMessageTextStyle, emptyMessageTextWeight, emptyMessageTextWrap, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { styles: dropdownItem } = useStyles(props);
+    return (_jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && `dropdown__item_direction_${directionClass}`, className, !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, sizeClass && `dropdown__item_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `dropdown__item_width_${widthClass}`, isDisabled && `dropdown__item_state_disabled`, onClick && 'cursor_type_pointer', isSkeleton && `skeleton`, justifyContentClass &&
+            `dropdown__item_justify-content_${justifyContentClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [_jsx("div", { className: "dropdown__item-wrapper", children: _jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (_jsx(Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (_jsxs(React.Fragment, { children: [label && (_jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (_jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (_jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (_jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (_jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+}
+export { DropdownItem, dropdownItemConfig };

package/dist/types/components/Dropdown/appearance/dropdownAccent.js

@@ -0,0 +1,24 @@
+const dropdownAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillActive: 'accentActivePrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorActive: 'accentTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        badgeAppearance: 'surfacePrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'accentTextPrimary',
+        iconAfterFillIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+    },
+};
+export { dropdownAppearanceAccent };

package/dist/types/components/Dropdown/appearance/dropdownShape.js

@@ -0,0 +1,25 @@
+const dropdownAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { dropdownAppearanceShape };

package/dist/types/components/Dropdown/appearance/dropdownSize.js

@@ -0,0 +1,39 @@
+const dropdownAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'm',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
+        dividerSize: 's',
+        emptyMessageTextSize: 'm',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
+        dividerSize: 's',
+        emptyMessageTextSize: 'm',
+        iconAfterFillSize: '16',
+        iconAfterSize: '16',
+        iconBeforeFillSize: '16',
+        iconBeforeSize: '16',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
+        dividerSize: 's',
+        emptyMessageTextSize: 'xs',
+        iconAfterFillSize: '12',
+        iconAfterSize: '12',
+        iconBeforeFillSize: '12',
+        iconBeforeSize: '12',
+    },
+};
+export { dropdownAppearanceSize };

package/dist/types/components/Dropdown/appearance/dropdownStyle.js

@@ -0,0 +1,14 @@
+const dropdownAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { dropdownAppearanceStyle };

package/dist/types/components/Dropdown/appearance/dropdownSurface.js

@@ -0,0 +1,32 @@
+const dropdownAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillActive: 'surfaceActivePrimary',
+        fillHover: 'surfaceHoverPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'surfaceTextPrimary',
+        labelTextColorActiveHover: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'surfaceTextPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+export { dropdownAppearanceSurface };

package/dist/types/components/Dropdown/index.js

@@ -0,0 +1,4 @@
+import { Dropdown } from './Dropdown';
+import { DropdownItem, dropdownItemConfig } from './DropdownItem';
+import { dropdownItemAppearance } from './DropdownItem.appearance';
+export { Dropdown, DropdownItem, dropdownItemAppearance, dropdownItemConfig };

package/dist/types/components/Dropdown/stories/DropdownBadge.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Dropdown } from '../Dropdown';
+declare const meta: {
+    title: string;
+    component: typeof Dropdown;
+    args: {
+        elevation: "8";
+        dropdownList: {
+            key: number;
+            label: string;
+            badgeValue: number;
+        }[];
+        isOpen: true;
+        setIsOpen: () => void;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Surface: Story;
+export declare const Accent: Story;

package/dist/types/components/Dropdown/stories/DropdownBadge.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from '../Dropdown';
+import { dropdownListBadgeMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Dropdown / Badge',
+    component: Dropdown,
+    args: {
+        elevation: '8',
+        dropdownList: dropdownListBadgeMock,
+        isOpen: true,
+        setIsOpen: () => { },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Surface = {
+    args: {
+        appearance: 'surfacePrimary sizeL',
+    },
+    render: (args) => {
+        return _jsx(Dropdown, { ...args });
+    },
+};
+export const Accent = {
+    args: {
+        appearance: 'accentPrimary sizeL',
+    },
+    render: (args) => {
+        return _jsx(Dropdown, { ...args });
+    },
+};

package/dist/types/components/Dropdown/stories/DropdownDefault.stories.d.ts

@@ -0,0 +1,47 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Dropdown } from '../Dropdown';
+declare const meta: {
+    title: string;
+    component: typeof Dropdown;
+    args: {
+        elevation: "8";
+        dropdownList: ({
+            key: number;
+            label: string;
+            isActive: boolean;
+            badgeValue?: undefined;
+            iconBefore?: undefined;
+            iconAfter?: undefined;
+        } | {
+            key: number;
+            label: string;
+            badgeValue: number;
+            isActive: boolean;
+            iconBefore?: undefined;
+            iconAfter?: undefined;
+        } | {
+            key: number;
+            label: string;
+            iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+            isActive: boolean;
+            badgeValue?: undefined;
+            iconAfter?: undefined;
+        } | {
+            key: number;
+            label: string;
+            iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+            isActive: boolean;
+            badgeValue?: undefined;
+            iconBefore?: undefined;
+        })[];
+        isOpen: true;
+        setIsOpen: () => void;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Surface: Story;
+export declare const Accent: Story;

package/dist/types/components/Dropdown/stories/DropdownDefault.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from '../Dropdown';
+import { dropdownListMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Dropdown / Default',
+    component: Dropdown,
+    args: {
+        elevation: '8',
+        dropdownList: dropdownListMock,
+        isOpen: true,
+        setIsOpen: () => { },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Surface = {
+    args: {
+        appearance: 'surfacePrimary sizeL',
+    },
+    render: (args) => {
+        return _jsx(Dropdown, { ...args });
+    },
+};
+export const Accent = {
+    args: {
+        appearance: 'accentPrimary sizeL',
+    },
+    render: (args) => {
+        return _jsx(Dropdown, { ...args });
+    },
+};

package/dist/types/components/Dropdown/stories/DropdownDemo.stories.d.ts

@@ -0,0 +1,48 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Dropdown } from '../Dropdown';
+declare const meta: {
+    title: string;
+    component: typeof Dropdown;
+    args: {
+        appearance: "surfacePrimary sizeL";
+        elevation: "8";
+        dropdownList: ({
+            key: number;
+            label: string;
+            isActive: boolean;
+            badgeValue?: undefined;
+            iconBefore?: undefined;
+            iconAfter?: undefined;
+        } | {
+            key: number;
+            label: string;
+            badgeValue: number;
+            isActive: boolean;
+            iconBefore?: undefined;
+            iconAfter?: undefined;
+        } | {
+            key: number;
+            label: string;
+            iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+            isActive: boolean;
+            badgeValue?: undefined;
+            iconAfter?: undefined;
+        } | {
+            key: number;
+            label: string;
+            iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+            isActive: boolean;
+            badgeValue?: undefined;
+            iconBefore?: undefined;
+        })[];
+        isOpen: true;
+        setIsOpen: () => void;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Demo: Story;
+export declare const Skeleton: Story;

package/dist/types/components/Dropdown/stories/DropdownDemo.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from '../Dropdown';
+import { dropdownListMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Dropdown',
+    component: Dropdown,
+    args: {
+        appearance: 'surfacePrimary sizeL',
+        elevation: '8',
+        dropdownList: dropdownListMock,
+        isOpen: true,
+        setIsOpen: () => { },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Demo = {
+    render: (args) => {
+        return _jsx(Dropdown, { ...args });
+    },
+};
+export const Skeleton = {
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => {
+        return _jsx(Dropdown, { ...args });
+    },
+};

package/dist/types/components/Dropdown/stories/DropdownMessage.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Dropdown } from '../Dropdown';
+declare const meta: {
+    title: string;
+    component: typeof Dropdown;
+    args: {
+        elevation: "8";
+        dropdownList: {
+            key: number;
+            emptyMessage: string;
+        }[];
+        isOpen: true;
+        setIsOpen: () => void;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Surface: Story;
+export declare const Accent: Story;

package/dist/types/components/Dropdown/stories/DropdownMessage.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from '../Dropdown';
+import { dropdownListMessageMock } from './__mock__';
+const meta = {
+    title: 'Molecules / Dropdown / Message',
+    component: Dropdown,
+    args: {
+        elevation: '8',
+        dropdownList: dropdownListMessageMock,
+        isOpen: true,
+        setIsOpen: () => { },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Surface = {
+    args: {
+        appearance: 'surfacePrimary sizeL',
+    },
+    render: (args) => {
+        return _jsx(Dropdown, { ...args });
+    },
+};
+export const Accent = {
+    args: {
+        appearance: 'accentPrimary sizeL',
+    },
+    render: (args) => {
+        return _jsx(Dropdown, { ...args });
+    },
+};