@itcase/ui 1.9.35 → 1.9.37

package/dist/hooks/useDeviceTargetClass.js

@@ -40,7 +40,7 @@ function useDeviceTargetClass(componentProps, hookProps) {
     const valueForDevice = componentProps[`${propsKey}${deviceCurrentMainType}`];
     const valueDefault = componentProps[propsKey];
     return valueForDevice || valueDefault;
-  }, [isMobile, isTablet, isDesktop, componentProps[propsKey], componentProps[`${propsKey}Mobile`], componentProps[`${propsKey}Tablet`], componentProps[`${propsKey}Desktop`]]);
+  }, [isMobile, isTablet, isDesktop, componentProps, propsKey]);
   const targetClass = useMemo(() => {
     if (targetClassValue) {
       let cleanClassValue = camelCase(String(targetClassValue));

package/dist/snippets/Chips.snippets.json

@@ -3,7 +3,7 @@
         "prefix": "chips",
         "body": [
             "<Chips",
-            "  appearance=\"${1|accent,surface,accentMuted,danger,dangerMuted,disabled,error,errorMuted,info,infoMuted,primary,primaryMuted,secondary,secondaryMuted,success,successMuted,surfaceMuted,warning,warningMuted|}${2|Primary,Secondary,Tertiary|} ${3|sizeXXL,sizeXL,sizeL,sizeM,sizeS,sizeXS,sizeXXS|} ${4|solid,outlined,full,ghost|} ${5|rounded,circular,roundedS,roundedM,roundedL,roundedXL|}\"",
+            "  appearance=\"${1|accent,surface,accentMuted,danger,dangerMuted,disabled,error,errorMuted,info,infoMuted,special,specialMuted,secondary,extraMuted,success,successMuted,surfaceMuted,warning,warningMuted|}${2|Primary,Secondary,Tertiary|} ${3|sizeXXL,sizeXL,sizeL,sizeM,sizeS,sizeXS,sizeXXS|} ${4|solid,outlined,full,ghost|} ${5|rounded,circular,roundedS,roundedM,roundedL,roundedXL|}\"",
             "  label={}",
             "  isActive={}",
             "  onClick={}",

package/dist/snippets/Icon.snippets.json

@@ -3,7 +3,7 @@
         "prefix": "icon",
         "body": [
             "<Icon",
-            "  appearance=\"${1|accent,surface,danger,disabled,error,info,primary,secondary,success,warning|}${2|Primary,Secondary,Tertiary,Quaternary|} ${3|size12_12,size14_12,size14_14,size16_12,size16_14,size16_16,size20_12,size20_14,size20_16,size20_20,size24_12,size24_14,size24_16,size24_20,size24_24,size32_12,size32_14,size32_16,size32_20,size32_24,size32_32,size40_12,size40_14,size40_16,size40_20,size40_24,size40_32,size40_40|} ${4|solid,outlined,full,ghost|} ${5|rounded,circular,roundedXL,roundedL,roundedM,roundedS|}\"",
+            "  appearance=\"${1|accent,surface,danger,disabled,error,info,special,extra,success,warning|}${2|Primary,Secondary,Tertiary,Quaternary|} ${3|size12_12,size14_12,size14_14,size16_12,size16_14,size16_16,size20_12,size20_14,size20_16,size20_20,size24_12,size24_14,size24_16,size24_20,size24_24,size32_12,size32_14,size32_16,size32_20,size32_24,size32_32,size40_12,size40_14,size40_16,size40_20,size40_24,size40_32,size40_40|} ${4|solid,outlined,full,ghost|} ${5|rounded,circular,roundedXL,roundedL,roundedM,roundedS|}\"",
             "  SvgImage={$6}",
             "  onClick={}",
             "/>"

package/dist/stories/ChipsOverview.mdx

@@ -24,11 +24,11 @@ import * as ChipsStories from '../stories/ChipsDefault.stories'
 
 <Canvas sourceState="shown" of={ChipsStories.Error} />
 
-## PrimaryPrimary
+## SpecialPrimary
 
-<Canvas sourceState="shown" of={ChipsStories.Primary} />
+<Canvas sourceState="shown" of={ChipsStories.Special} />
 
-## SecondaryPrimary
+## ExtraPrimary
 
 <Canvas sourceState="shown" of={ChipsStories.Secondary} />
 

package/dist/stories/FlexOverview.mdx

@@ -31,13 +31,13 @@ import * as Flex from '../stories/Flex.stories.tsx'
         Header
       </Text>
     </Group>
-    <Group fill="primaryPrimary" padding="20">
-      <Text size="xl" textColor="primaryTextPrimary">
+    <Group fill="specialPrimary" padding="20">
+      <Text size="xl" textColor="specialTextPrimary">
         Component
       </Text>
     </Group>
-    <Group fill="secondaryPrimary" padding="20">
-      <Text size="xl" textColor="secondaryTextPrimary">
+    <Group fill="extraPrimary" padding="20">
+      <Text size="xl" textColor="extraTextPrimary">
         Footer
       </Text>
     </Group>

package/dist/stories/GroupAlignItems.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs/blocks'
 
-import * as AlignItemsStories from '../stories/AlignItems.stories.tsx'
+import * as AlignItemsStories from '../stories/GroupAlignItems.stories.js'
 
 <Meta title="Layout / Group / AlignItems" />
 

package/dist/stories/GroupAlignSelf.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs/blocks'
 
-import * as AlignSelfStories from '../stories/AlignSelf.stories.tsx'
+import * as AlignSelfStories from '../stories/GroupAlignSelf.stories.js'
 
 <Meta title="Layout / Group / AlignSelf" />
 

package/dist/stories/GroupColumns.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs/blocks'
 
-import * as ColumnsStories from '../stories/Columns.stories.tsx'
+import * as ColumnsStories from '../stories/GroupColumns.stories.js'
 
 <Meta title="Layout / Group / Columns" />
 

package/dist/stories/GroupDirection.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs/blocks'
 
-import * as DirectionStories from '../stories/Direction.stories.tsx'
+import * as DirectionStories from '../stories/GroupDirection.stories.js'
 
 <Meta title="Layout / Group / Direction" />
 

package/dist/stories/GroupJustifyContent.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs/blocks'
 
-import * as JustifyStories from '../stories/JustifyContent.stories.tsx'
+import * as JustifyStories from '../stories/GroupJustifyContent.stories.js'
 
 <Meta title="Layout / Group / JustifyContent" />
 

package/dist/stories/GroupOverview.mdx

@@ -1,6 +1,6 @@
 import { ArgTypes, Meta, Story } from '@storybook/addon-docs/blocks'
 
-import * as GroupStories from '../stories/Direction.stories.tsx'
+import * as GroupStories from '../stories/GroupDirection.stories.js'
 
 <Meta title="Layout / Group / Overview" />
 

package/dist/stories/GroupPlayground.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
 
-import * as GroupStories from '../stories/Direction.stories.tsx'
+import * as GroupStories from '../stories/GroupDirection.stories.js'
 
 <Meta title="Layout / Group / Playground" />
 

package/dist/stories/GroupWrap.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/addon-docs/blocks'
 
-import * as WrapStories from '../stories/Wrap.stories.tsx'
+import * as WrapStories from '../stories/GroupWrap.stories.js'
 
 <Meta title="Layout / Group / Wrap" />
 

package/dist/stories/ListOverview.mdx

@@ -1,4 +1,4 @@
-import { Meta, List, Story } from '@storybook/addon-docs/blocks'
+import { Meta, Story } from '@storybook/addon-docs/blocks'
 
 import * as ListStories from '../stories/List.stories'
 import * as ListItemStories from '../stories/ListItem.stories'

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

@@ -1,2 +1,3 @@
-import { AccordionAppearanceType } from './Accordion.interface';
-export declare const accordionAppearance: AccordionAppearanceType;
+import { AccordionItemAppearance } from './Accordion.interface';
+declare const accordionAppearance: AccordionItemAppearance;
+export { accordionAppearance };

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

@@ -1,79 +1,99 @@
 import type { CSSProperties, ReactNode } from 'react';
-import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceKey, DirectionProps, FillHoverProps, FillProps, HeightProps, ItemColorProps, ShapeProps, SizeProps, TextColorProps, TextSizeProps, TextWeightProps, WidthProps } from '@itcase/types';
+import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceDefaultSizeStyleKey, DirectionProps, FillHoverProps, FillProps, HeightProps, ShapeProps, ShapeStrengthProps, SizeProps, WidthProps } from '@itcase/types';
 import type { StyleAttributes } from '../../hooks/useStyles/styleAttributes.interface';
-type AccordionProps = {};
+import { BadgeProps } from '../Badge/Badge.interface';
+import { DividerProps } from '../Divider/Divider.interface';
+import { IconProps } from '../Icon/Icon.interface';
+import { TextProps } from '../Text/Text.interface';
+import { TitleProps } from '../Title/Title.interface';
+type AccordionAppearanceProps = {
+    borderColor?: BorderColorProps;
+    fill?: FillProps;
+    shape?: ShapeProps;
+    shapeStrength?: ShapeStrengthProps;
+};
+type AccordionProps = AccordionAppearanceProps & StyleAttributes & {
+    appearance?: AccordionItemProps['appearance'];
+    children?: ReactNode;
+    className?: string;
+    dataTestId?: string;
+    dataTour?: string;
+    initial?: Array<string | null>;
+    isMultiple?: boolean;
+    items?: Omit<AccordionItemEventData, 'isExpanded'>[];
+    onClickItem?: (item: AccordionItemEventData) => void;
+};
 type AccordionItemEventData = {
-    id: number | string;
-    content?: ReactNode;
-    title: string;
+    id: string;
+    content: ReactNode;
     isExpanded: boolean;
+    title: string;
 };
 type AccordionItemAppearanceProps = {
-    [key: number | string | symbol]: any;
-    appearance?: AppearanceKeys;
+    badgeAppearance?: BadgeProps['appearance'];
+    badgeAppearanceSize?: AppearanceSizeKey;
+    badgeShape?: BadgeProps['shape'];
+    badgeSize?: BadgeProps['size'];
+    badgeTextColor?: BadgeProps['textColor'];
+    badgeTextSize?: BadgeProps['textSize'];
+    badgeValue?: BadgeProps['value'];
     borderColor?: BorderColorProps;
-    children?: Element | React.ReactNode;
-    className?: string;
+    contentTextColor?: TextProps['textColor'];
+    contentTextSize?: TextProps['size'];
+    contentTextWeight?: TextProps['textWeight'];
     direction?: DirectionProps;
+    dividerDirection?: DividerProps['direction'];
+    dividerFill?: DividerProps['fill'];
+    dividerSize?: DividerProps['size'];
     fill?: FillProps;
+    fillHover?: FillHoverProps;
     height?: HeightProps;
-    initial?: any;
-    items?: {
-        id: number | string;
-        content?: ReactNode;
-        title: string;
-    }[];
+    icon?: IconProps['SvgImage'];
+    iconFill?: IconProps['fill'];
+    iconFillIcon?: IconProps['iconFill'];
+    iconFillSize?: IconProps['fillSize'];
+    iconShape?: IconProps['shape'];
+    iconSize?: IconProps['iconSize'];
+    iconSrc?: IconProps['imageSrc'];
+    isMultiple?: boolean;
+    labelTextColor?: TextProps['textColor'];
     shape?: ShapeProps;
-    style?: CSSProperties;
+    shapeDesktop?: ShapeProps;
+    shapeMobile?: ShapeProps;
+    shapeStrength?: ShapeStrengthProps;
+    shapeTablet?: ShapeProps;
+    showDivider?: boolean;
+    size?: SizeProps;
+    titleBorderColor?: TitleProps['borderColor'];
+    titleFill?: TitleProps['fill'];
+    titleFillHover?: TitleProps['fillHover'];
+    titleTextColor?: TitleProps['textColor'];
+    titleTextSize?: TextProps['size'];
+    titleTextWeight?: TitleProps['textWeight'];
+    titleWidth?: TitleProps['textWeight'];
     width?: WidthProps;
-    isMultiple?: boolean;
-    onClickItem?: (T: AccordionItemEventData) => void;
+    zeroGap?: boolean;
+    zeroPadding?: boolean;
 };
 type AccordionItemProps = AccordionItemAppearanceProps & StyleAttributes & {
-    id: number | string;
+    id?: string | null;
     afterContent?: ReactNode;
-    appearance?: CompositeAppearanceKey;
+    appearance?: CompositeAppearanceDefaultSizeStyleKey;
     beforeContent?: ReactNode;
-    borderColor?: BorderColorProps;
     children?: ReactNode;
     className?: string;
     content?: ReactNode;
-    contentBorderColor?: BorderColorProps;
-    contentFill?: FillProps;
-    contentTextColor?: TextColorProps;
-    contentTextSize?: SizeProps;
-    contentTextWeight?: TextWeightProps;
-    dividerDirection?: DirectionProps;
-    dividerFill?: FillProps;
-    dividerSize?: SizeProps;
-    fill?: FillProps;
-    height?: HeightProps;
-    icon?: ReactNode;
-    iconFill?: ItemColorProps;
     isExpanded?: boolean;
-    onClick?: (T: AccordionItemEventData) => void;
-    shape?: ShapeProps;
-    shapeDesktop?: ShapeProps;
-    shapeMobile?: ShapeProps;
-    shapeTablet?: ShapeProps;
-    showDivider?: boolean;
-    size?: SizeProps;
+    onClick?: (item: AccordionItemEventData) => void;
     style?: CSSProperties;
     title?: string;
-    titleBorderColor?: BorderColorProps;
-    titleFill?: FillProps;
-    titleFillHover?: FillHoverProps;
-    titleTextColor?: TextColorProps;
-    titleTextSize?: TextSizeProps;
-    titleTextWeight?: TextWeightProps;
-    width?: WidthProps;
 };
 type AccordionItemAppearanceKey = AppearanceKeysDefault | AppearanceShapeKey | AppearanceSizeKey | AppearanceStyleKey;
 type AccordionItemAppearance = {
     [key in AccordionItemAppearanceKey]?: AccordionItemAppearanceProps;
 };
 type AccordionItemConfig = {
-    appearance: AccordionItemConfig | undefined;
-    setAppearance: (appearanceConfig: AccordionItemConfig) => void;
+    appearance: AccordionItemAppearance;
+    setAppearance: (appearanceConfig: AccordionItemAppearance) => void;
 };
 export type { AccordionItemAppearance, AccordionItemConfig, AccordionItemEventData, AccordionItemProps, AccordionProps, };

package/dist/types/components/Accordion/appearance/accordionSize.d.ts

@@ -1,51 +1,3 @@
-declare const accordionAppearanceSize: {
-    sizeXXL: {
-        size: string;
-        titleTextSize: string;
-        badgeAppearanceSize: string;
-        contentTextSize: string;
-        icon: string;
-    };
-    sizeXL: {
-        size: string;
-        titleTextSize: string;
-        badgeAppearanceSize: string;
-        contentTextSize: string;
-        icon: string;
-    };
-    sizeL: {
-        size: string;
-        titleTextSize: string;
-        badgeAppearanceSize: string;
-        icon: string;
-    };
-    sizeM: {
-        size: string;
-        titleTextSize: string;
-        badgeAppearanceSize: string;
-        contentTextSize: string;
-        icon: string;
-    };
-    sizeS: {
-        size: string;
-        titleTextSize: string;
-        badgeAppearanceSize: string;
-        contentTextSize: string;
-        icon: string;
-    };
-    sizeXS: {
-        size: string;
-        titleTextSize: string;
-        badgeAppearanceSize: string;
-        contentTextSize: string;
-        icon: string;
-    };
-    sizeXXS: {
-        size: string;
-        titleTextSize: string;
-        badgeAppearanceSize: string;
-        contentTextSize: string;
-        icon: string;
-    };
-};
+import { AccordionItemAppearance } from '../Accordion.interface';
+declare const accordionAppearanceSize: AccordionItemAppearance;
 export { accordionAppearanceSize };

package/dist/types/components/Accordion/appearance/accordionStyle.d.ts

@@ -1,14 +1,3 @@
-declare const accordionAppearanceStyle: {
-    solid: {
-        borderColor: string;
-    };
-    outlined: {
-        fill: string;
-    };
-    full: {};
-    ghost: {
-        fill: string;
-        borderColor: string;
-    };
-};
+import { AccordionItemAppearance } from '../Accordion.interface';
+declare const accordionAppearanceStyle: AccordionItemAppearance;
 export { accordionAppearanceStyle };

package/dist/types/components/Accordion/appearance/accordionSurface.d.ts

@@ -1,36 +1,3 @@
-declare const accordionAppearanceSurface: {
-    surfacePrimary: {
-        fill: string;
-        fillHover: string;
-        titleTextColor: string;
-        labelTextColor: string;
-        badgeAppearance: string;
-        badgeShape: string;
-        iconFillIcon: string;
-    };
-    surfaceSecondary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-        badgeAppearance: string;
-        badgeShape: string;
-        iconFillIcon: string;
-    };
-    surfaceTertiary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-        badgeAppearance: string;
-        badgeShape: string;
-        iconFillIcon: string;
-    };
-    surfaceQuaternary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-        badgeAppearance: string;
-        badgeShape: string;
-        iconFillIcon: string;
-    };
-};
+import { AccordionItemAppearance } from '../Accordion.interface';
+declare const accordionAppearanceSurface: AccordionItemAppearance;
 export { accordionAppearanceSurface };

package/dist/types/components/Accordion/stories/AccordionDemo.stories.d.ts

@@ -0,0 +1,18 @@
+import { Accordion } from '../';
+import { AccordionProps } from '../Accordion.interface';
+declare const meta: {
+    title: string;
+    component: typeof Accordion;
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+    parameters: {
+        maxWidth: string;
+        layout: string;
+    };
+};
+export default meta;
+export declare const Demo: (args: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: {
+    render: (args: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+};