@itcase/ui-web 1.9.77 → 1.9.82

package/dist/types/components/Search/stories/SearchInputStyle.stories.d.ts

@@ -0,0 +1,66 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderColorHover?: import("@itcase/types-ui").BorderColorHoverProps;
+        borderHover?: import("@itcase/types-ui").BorderColorHoverProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        iconAfter?: import("../../Icon").IconProps["SvgImage"];
+        iconAfterFill?: import("../../Icon").IconProps["iconFill"];
+        iconAfterSize?: import("../../Icon").IconProps["size"];
+        iconAfterSrc?: import("../../Icon").IconProps["imageSrc"];
+        iconBefore?: import("../../Icon").IconProps["SvgImage"];
+        iconBeforeFill?: import("../../Icon").IconProps["iconFill"];
+        iconBeforeSize?: import("../../Icon").IconProps["size"];
+        iconBeforeSrc?: import("../../Icon").IconProps["imageSrc"];
+        iconClear?: import("../../Icon").IconProps["SvgImage"];
+        iconClearFill?: import("../../Icon").IconProps["iconFill"];
+        iconClearSize?: import("../../Icon").IconProps["size"];
+        iconClearSrc?: import("../../Icon").IconProps["imageSrc"];
+        inputFill?: import("@itcase/types-ui").FillProps;
+        inputTextColor?: import("../../Text").TextProps["textColor"];
+        inputTextSize?: import("../../Text").TextProps["size"];
+        inputTextStyle?: import("../../Text").TextProps["textStyle"];
+        inputTextWeight?: import("@itcase/types-ui").TextWeightProps;
+        placeholderTextColor?: import("../../Text").TextProps["textColor"];
+        placeholderTextSize?: import("../../Text").TextProps["size"];
+        placeholderTextStyle?: import("../../Text").TextProps["textStyle"];
+        placeholderTextWeight?: import("../../Text").TextProps["textWeight"];
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        width?: import("@itcase/types-ui").WidthProps;
+    } & import("@itcase/ui-core/hooks").StyleAttributes & {
+        after?: import("react").ReactNode;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceStateDefault;
+        before?: import("react").ReactNode;
+        className?: string;
+        dataTestId?: string;
+        dataTour?: string;
+        isActive?: boolean;
+        isDisabled?: boolean;
+        isSkeleton?: boolean;
+        onChange?: (targetValue: string) => void;
+        onClickClean?: () => void;
+        onFocus?: (() => void) | undefined;
+        onKeyDown?: (() => void) | undefined;
+        placeholder?: string;
+        style?: import("react").CSSProperties;
+        value?: string;
+    } & import("react").RefAttributes<HTMLInputElement>>;
+    args: {
+        placeholder: string;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Solid: Story;
+export declare const Outlined: Story;
+export declare const Ghost: Story;
+export declare const Full: Story;

package/dist/types/components/Search/stories/SearchInputStyle.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SearchInput } from '..';
+const meta = {
+    title: 'Atoms / Search / Style',
+    component: SearchInput,
+    args: {
+        placeholder: 'Search',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Solid = {
+    args: {
+        appearance: 'defaultPrimary sizeXXL solid',
+    },
+    render: (args) => {
+        return _jsx(SearchInput, { ...args });
+    },
+};
+export const Outlined = {
+    args: {
+        appearance: 'defaultPrimary sizeXXL outlined',
+    },
+    render: (args) => {
+        return _jsx(SearchInput, { ...args });
+    },
+};
+export const Ghost = {
+    args: {
+        appearance: 'defaultPrimary sizeXXL ghost',
+    },
+    render: (args) => {
+        return _jsx(SearchInput, { ...args });
+    },
+};
+export const Full = {
+    args: {
+        appearance: 'defaultPrimary sizeXXL full',
+    },
+    render: (args) => {
+        return _jsx(SearchInput, { ...args });
+    },
+};

package/dist/types/components/Search/stories/SearchInputSuccess.stories.d.ts

@@ -0,0 +1,68 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderColorHover?: import("@itcase/types-ui").BorderColorHoverProps;
+        borderHover?: import("@itcase/types-ui").BorderColorHoverProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        iconAfter?: import("../../Icon").IconProps["SvgImage"];
+        iconAfterFill?: import("../../Icon").IconProps["iconFill"];
+        iconAfterSize?: import("../../Icon").IconProps["size"];
+        iconAfterSrc?: import("../../Icon").IconProps["imageSrc"];
+        iconBefore?: import("../../Icon").IconProps["SvgImage"];
+        iconBeforeFill?: import("../../Icon").IconProps["iconFill"];
+        iconBeforeSize?: import("../../Icon").IconProps["size"];
+        iconBeforeSrc?: import("../../Icon").IconProps["imageSrc"];
+        iconClear?: import("../../Icon").IconProps["SvgImage"];
+        iconClearFill?: import("../../Icon").IconProps["iconFill"];
+        iconClearSize?: import("../../Icon").IconProps["size"];
+        iconClearSrc?: import("../../Icon").IconProps["imageSrc"];
+        inputFill?: import("@itcase/types-ui").FillProps;
+        inputTextColor?: import("../../Text").TextProps["textColor"];
+        inputTextSize?: import("../../Text").TextProps["size"];
+        inputTextStyle?: import("../../Text").TextProps["textStyle"];
+        inputTextWeight?: import("@itcase/types-ui").TextWeightProps;
+        placeholderTextColor?: import("../../Text").TextProps["textColor"];
+        placeholderTextSize?: import("../../Text").TextProps["size"];
+        placeholderTextStyle?: import("../../Text").TextProps["textStyle"];
+        placeholderTextWeight?: import("../../Text").TextProps["textWeight"];
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        size?: import("@itcase/types-ui").SizeProps;
+        width?: import("@itcase/types-ui").WidthProps;
+    } & import("@itcase/ui-core/hooks").StyleAttributes & {
+        after?: import("react").ReactNode;
+        appearance?: import("@itcase/types-ui").CompositeAppearanceStateDefault;
+        before?: import("react").ReactNode;
+        className?: string;
+        dataTestId?: string;
+        dataTour?: string;
+        isActive?: boolean;
+        isDisabled?: boolean;
+        isSkeleton?: boolean;
+        onChange?: (targetValue: string) => void;
+        onClickClean?: () => void;
+        onFocus?: (() => void) | undefined;
+        onKeyDown?: (() => void) | undefined;
+        placeholder?: string;
+        style?: import("react").CSSProperties;
+        value?: string;
+    } & import("react").RefAttributes<HTMLInputElement>>;
+    args: {
+        appearance: "successPrimary sizeXXL";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Placeholder: Story;
+export declare const PlaceholderActive: Story;
+export declare const Filled: Story;
+export declare const FilledActive: Story;
+export declare const Blank: Story;
+export declare const BlankIsActive: Story;

package/dist/types/components/Search/stories/SearchInputSuccess.stories.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SearchInput } from '..';
+const meta = {
+    title: 'Atoms / Search / Success',
+    component: SearchInput,
+    args: {
+        appearance: 'successPrimary sizeXXL',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Placeholder = {
+    args: {
+        placeholder: 'Search',
+    },
+    render: (args) => {
+        return _jsx(SearchInput, { ...args });
+    },
+};
+export const PlaceholderActive = {
+    args: {
+        placeholder: 'Search',
+        isActive: true,
+    },
+    render: (args) => {
+        return _jsx(SearchInput, { ...args });
+    },
+};
+export const Filled = {
+    args: {
+        value: 'Search Query',
+    },
+    render: (args) => {
+        return _jsx(SearchInput, { ...args });
+    },
+};
+export const FilledActive = {
+    args: {
+        value: 'Search Query',
+        isActive: true,
+    },
+    render: (args) => {
+        return _jsx(SearchInput, { ...args });
+    },
+};
+export const Blank = {
+    render: (args) => {
+        return _jsx(SearchInput, { ...args });
+    },
+};
+export const BlankIsActive = {
+    render: (args) => {
+        return _jsx(SearchInput, { ...args });
+    },
+};

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

@@ -0,0 +1,19 @@
+import { segmentedAppearanceDefault } from './appearance/segmentedDefault';
+import { segmentedAppearanceDisabled } from './appearance/segmentedDisabled';
+import { segmentedAppearanceError } from './appearance/segmentedError';
+import { segmentedAppearanceRequire } from './appearance/segmentedRequire';
+import { segmentedAppearanceShape } from './appearance/segmentedShape';
+import { segmentedAppearanceSize } from './appearance/segmentedSize';
+import { segmentedAppearanceStyle } from './appearance/segmentedStyle';
+import { segmentedAppearanceSuccess } from './appearance/segmentedSuccess';
+const segmentedAppearance = {
+    ...segmentedAppearanceDisabled,
+    ...segmentedAppearanceSize,
+    ...segmentedAppearanceShape,
+    ...segmentedAppearanceStyle,
+    ...segmentedAppearanceError,
+    ...segmentedAppearanceSuccess,
+    ...segmentedAppearanceDefault,
+    ...segmentedAppearanceRequire,
+};
+export { segmentedAppearance };

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

@@ -1,4 +1,4 @@
-import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStateKeysDefault, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceStateDefault, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WidthProps } from '@itcase/types-ui';
+import { AppearanceConfig, AppearanceKeysDefaultState, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceStateDefault, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WidthProps } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
@@ -40,14 +40,6 @@ type SegmentedProps = SegmentedAppearanceProps & StyleAttributes & {
     segments: Segment[];
     setActiveSegment?: (item: Segment) => void;
 };
-type SegmentedAppearanceKey = AppearanceShapeKey | AppearanceSizeKey | AppearanceStyleKey | (AppearanceKeysDefault | AppearanceStateKeysDefault);
-type SegmentedAppearance = {
-    [key in SegmentedAppearanceKey]?: SegmentedAppearanceProps;
-};
-type SegmentedConfig = {
-    appearance: SegmentedAppearance;
-    setAppearance: (appearanceConfig: SegmentedAppearance) => void;
-};
 type Segment = {
     icon?: IconProps['SvgImage'];
     iconActive?: IconProps['SvgImage'];
@@ -58,4 +50,6 @@ type Segment = {
     label?: string;
     value: string;
 };
+type SegmentedConfig = AppearanceConfig<AppearanceKeysDefaultState, SegmentedAppearanceProps>;
+type SegmentedAppearance = SegmentedConfig['appearance'];
 export type { Segment, SegmentedAppearance, SegmentedConfig, SegmentedProps };

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

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

package/dist/types/components/Segmented/Segmented.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRef, useCallback, useEffect, useMemo, useRef, } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig, useDevicePropsGenerator, } from '@itcase/ui-core/hooks';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { segmentedAppearance } from './Segmented.appearance';
+const segmentedConfig = {
+    appearance: segmentedAppearance,
+    setAppearance: (appearanceConfig) => {
+        segmentedConfig.appearance = appearanceConfig;
+    },
+};
+const Segmented = (props) => {
+    const { appearance, className, dataTestId, dataTour, name, activeSegment, segments, isDisabled, isSkeleton, setActiveSegment, onChange, } = props;
+    const controlRef = useRef(null);
+    const segmentsRefs = useMemo(() => new Map(segments.map((item) => [item.value, createRef()])), [segments]);
+    const onChangeValue = useCallback((item) => {
+        onChange && onChange(item.value, name);
+        setActiveSegment && setActiveSegment(item);
+    }, [name, onChange, setActiveSegment]);
+    useEffect(() => {
+        let offsetWidth = 0;
+        let offsetLeft = 0;
+        const activeSegmentRef = segmentsRefs.get(activeSegment.value);
+        if (activeSegmentRef?.current) {
+            offsetWidth = activeSegmentRef.current.offsetWidth;
+            offsetLeft = activeSegmentRef.current.offsetLeft;
+        }
+        controlRef.current?.style.setProperty('--segmented-active-width', `${offsetWidth}px`);
+        controlRef.current?.style.setProperty('--segmented-active-x-pos', `${offsetLeft}px`);
+    }, [activeSegment, segmentsRefs]);
+    const appearanceConfig = useAppearanceConfig(appearance, segmentedConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (_jsx("div", { className: clsx(className, 'segmented', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `segmented_width_${widthClass}`, sizeClass && `segmented_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, isSkeleton && `skeleton`), ref: controlRef, "data-testid": dataTestId, "data-tour": dataTour, children: _jsx("div", { className: "segmented__wrapper", children: _jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
+                        const isActive = activeSegment.value === item.value;
+                        return (_jsx("div", { className: clsx('segmented__item', !item.label && 'segmented__item_icon', sizeClass && `segmented__item_size_${sizeClass}`, isActive && 'segmented__item_active', !isActive && isDisabled && 'segmented__item_state_disabled', isActive &&
+                                isDisabled &&
+                                'segmented__item_active_state_disabled', !isActive
+                                ? fillHoverClass && `fill_hover_${fillHoverClass}`
+                                : fillActiveHoverClass &&
+                                    `fill_active_hover_${fillActiveHoverClass}`, isActive &&
+                                fillActiveClass &&
+                                `fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value), onClick: () => !isDisabled && onChangeValue(item), children: _jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
+                                            ? item.iconBeforeActive || item.iconBefore
+                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (_jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
+                                            ? item.iconAfterActive || item.iconAfter
+                                            : item.iconAfter, isActive: isActive, isDisabled: isDisabled })) : null] }) }, `${name}-${item.value}`));
+                    }), _jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && `fill_${indicatorFillClass}`) })] }) }) }));
+};
+export { Segmented, segmentedConfig };

package/dist/types/components/Segmented/appearance/segmentedDefault.js

@@ -0,0 +1,29 @@
+const segmentedAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfacePrimary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
+        fillHover: 'surfaceHoverSecondary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextActiveHoverPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconFill: 'surfaceItemQuaternary',
+        iconFillActive: 'surfaceItemSecondary',
+        indicatorFill: 'accentPrimary',
+    },
+    defaultSecondary: {
+        fill: 'surfaceSecondary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
+        fillHover: 'surfaceHoverTertiary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextActiveHoverPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconFill: 'surfaceItemQuaternary',
+        iconFillActive: 'surfaceItemSecondary',
+        indicatorFill: 'accentPrimary',
+    },
+};
+export { segmentedAppearanceDefault };

package/dist/types/components/Segmented/appearance/segmentedDisabled.js

@@ -0,0 +1,12 @@
+const segmentedAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceDisabled',
+        fillActive: 'surfaceTertiary',
+        labelTextActiveColor: 'surfaceTextActiveQuaternary',
+        labelTextColor: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderPrimary',
+        iconFill: 'surfaceItemPrimary',
+        iconFillActive: 'surfaceItemPrimary',
+    },
+};
+export { segmentedAppearanceDisabled };

package/dist/types/components/Segmented/appearance/segmentedError.js

@@ -0,0 +1,14 @@
+const segmentedAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        fillActive: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        labelTextActiveColor: 'errorTextActivePrimary',
+        labelTextColor: 'errorTextSecondary',
+        labelTextColorHover: 'errorTextPrimary',
+        borderColor: 'errorBorderQuaternary',
+        iconFill: 'errorItemSecondary',
+        iconFillActive: 'errorItemTertiary',
+    },
+};
+export { segmentedAppearanceError };

package/dist/types/components/Segmented/appearance/segmentedRequire.js

@@ -0,0 +1,15 @@
+const segmentedAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'warningSecondary',
+        labelTextActiveColor: 'warningTextPrimary',
+        labelTextColor: 'warningTextPrimary',
+        labelTextColorHover: 'warningTextSecondary',
+        borderColor: 'warningBorderSecondary',
+        iconFill: 'warningItemSecondary',
+        iconFillActive: 'warningItemTertiary',
+    },
+};
+export { segmentedAppearanceRequire };

package/dist/types/components/Segmented/appearance/segmentedShape.js

@@ -0,0 +1,25 @@
+const segmentedAppearanceShape = {
+    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 { segmentedAppearanceShape };

package/dist/types/components/Segmented/appearance/segmentedSize.js

@@ -0,0 +1,28 @@
+const segmentedAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'm',
+        iconSize: '24',
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+        iconSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        iconSize: '20',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        iconSize: '16',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        labelTextSize: 'xxs',
+        iconSize: '14',
+    },
+};
+export { segmentedAppearanceSize };

package/dist/types/components/Segmented/appearance/segmentedStyle.js

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

package/dist/types/components/Segmented/appearance/segmentedSuccess.js

@@ -0,0 +1,13 @@
+const segmentedAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successTertiary',
+        fillActive: 'successSecondary',
+        fillHover: 'successSecondary',
+        labelTextActiveColor: 'successTextPrimary',
+        labelTextColor: 'successTextSecondary',
+        labelTextColorHover: 'successTextPrimary',
+        borderColor: 'successBorderSecondary',
+        iconFill: 'successItemSecondary',
+    },
+};
+export { segmentedAppearanceSuccess };

package/dist/types/components/Segmented/appearance/segmentedWarning.js

@@ -0,0 +1,14 @@
+const segmentedAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningTertiary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'warningSecondary',
+        labelTextActiveColor: 'warningTextPrimary',
+        labelTextColor: 'warningTextSecondary',
+        labelTextColorHover: 'warningTextSecondary',
+        borderColor: 'warningBorderSecondary',
+        iconFill: 'warningItemSecondary',
+    },
+};
+export { segmentedAppearanceWarning };

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

@@ -0,0 +1,2 @@
+export { Segmented, segmentedConfig } from './Segmented';
+export { segmentedAppearance } from './Segmented.appearance';

package/dist/types/components/Segmented/stories/SegmenetedIcon.stories.d.ts

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { SegmentedProps } from '..';
+declare const meta: {
+    title: string;
+    component: (props: SegmentedProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        activeSegment: {
+            value: string;
+        };
+        segments: {
+            iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+            value: string;
+        }[];
+        shape: "rounded";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DefaultPrimary: Story;
+export declare const ErrorPrimary: Story;
+export declare const SuccessPrimary: Story;
+export declare const RequirePrimary: Story;
+export declare const DisabledPrimary: Story;

package/dist/types/components/Segmented/stories/SegmenetedIcon.stories.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Segmented } from '..';
+import { segmentedIconMock, segmentedMock } from './__mock__';
+const meta = {
+    title: 'Atoms / Segmented / Icon',
+    component: Segmented,
+    args: {
+        activeSegment: segmentedMock.activeSegment,
+        segments: segmentedIconMock,
+        shape: 'rounded',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const DefaultPrimary = {
+    args: {
+        appearance: 'defaultPrimary sizeL',
+    },
+    render: (args) => {
+        return _jsx(Segmented, { ...args });
+    },
+};
+export const ErrorPrimary = {
+    args: {
+        appearance: 'errorPrimary sizeL',
+    },
+    render: (args) => {
+        return _jsx(Segmented, { ...args });
+    },
+};
+export const SuccessPrimary = {
+    args: {
+        appearance: 'successPrimary sizeL',
+    },
+    render: (args) => {
+        return _jsx(Segmented, { ...args });
+    },
+};
+export const RequirePrimary = {
+    args: {
+        appearance: 'requirePrimary sizeL',
+    },
+    render: (args) => {
+        return _jsx(Segmented, { ...args });
+    },
+};
+export const DisabledPrimary = {
+    args: {
+        appearance: 'disabledPrimary sizeL',
+    },
+    render: (args) => {
+        return _jsx(Segmented, { ...args });
+    },
+};

package/dist/types/components/Segmented/stories/SegmentedDemo.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { SegmentedProps } from '../Segmented.interface';
+declare const meta: {
+    title: string;
+    component: (props: SegmentedProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        appearance: "defaultPrimary sizeL solid";
+        activeSegment: {
+            value: string;
+        };
+        segments: {
+            label: string;
+            value: string;
+        }[];
+        shape: "rounded";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Demo: Story;
+export declare const Skeleton: Story;