@itcase/ui 1.3.2 → 1.3.4

package/dist/components/Search.js

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-CZrDqG76.js';
+import { I as Icon } from '../Icon-C9FlOMr9.js';
 import { T as Text } from '../Text-JayJa3hj.js';
 import { S as Scrollbar } from '../Scrollbar-Bo7z7ELm.js';
 import '../tslib.es6-5FtW-kfi.js';
@@ -16,7 +16,7 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Title-CHgrIarR.js';
 import 'react-scrollbars-custom';

package/dist/components/Select.js

@@ -1,7 +1,7 @@
 import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon } from '../Icon-CZrDqG76.js';
+import { I as Icon } from '../Icon-C9FlOMr9.js';
 import React, { useRef, useCallback, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
@@ -19,7 +19,7 @@ import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Title-CHgrIarR.js';
 import 'lodash/castArray';

package/dist/components/SiteMenu.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { useSiteMenuContext } from '../context/UIContext.js';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { I as Icon } from '../Icon-CZrDqG76.js';
+import { I as Icon } from '../Icon-C9FlOMr9.js';
 import { T as Text } from '../Text-JayJa3hj.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
@@ -15,7 +15,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Title-CHgrIarR.js';
 

package/dist/components/Tab.js

@@ -5,7 +5,7 @@ import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGene
 import { useStyles } from '../hooks/useStyles.js';
 import { B as Badge } from '../Badge-DMRagi5O.js';
 import { D as Divider } from '../Divider-DBvDCUqP.js';
-import { L as Link } from '../Link-_A9ZfNln.js';
+import { L as Link } from '../Link-CPzqprR1.js';
 import { T as Text } from '../Text-JayJa3hj.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';

package/dist/css/components/Image/Image.css

@@ -8,6 +8,13 @@
 }
 .image {
   &_horizontal-align {
+    &_left {
+      ^^&__wrapper {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+      }
+    }
     &_center {
       ^^&__wrapper {
         width: 100%;
@@ -15,6 +22,13 @@
         justify-content: center;
       }
     }
+    &_right {
+      ^^&__wrapper {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
   }
 }
 .image {
@@ -46,6 +60,7 @@
   &_resize-mode {
     &_cover {
       > ^^&__wrapper {
+        height: 100%;
         & > ^^^&__item {
           width: 100%;
           height: 100%;
@@ -55,6 +70,7 @@
     }
     &_contain {
       > ^^&__wrapper {
+        height: 100%;
         & > ^^^&__item {
           width: 100%;
           height: 100%;
@@ -121,6 +137,13 @@
 }
 .image {
   &_vertical-align {
+    &_top {
+      ^^&__wrapper {
+        height: 100%;
+        display: flex;
+        align-items: flex-start;
+      }
+    }
     &_center {
       ^^&__wrapper {
         height: 100%;
@@ -128,5 +151,12 @@
         align-items: center;
       }
     }
+    &_bottom {
+      ^^&__wrapper {
+        height: 100%;
+        display: flex;
+        align-items: flex-end;
+      }
+    }
   }
 }

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

@@ -0,0 +1,3 @@
+import { accordionAppearanceType, accordionItemAppearanceType } from './Accordion.interface';
+export declare const accordionAppearance: accordionAppearanceType;
+export declare const accordionItemAppearance: accordionItemAppearanceType;

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

@@ -1,3 +1,4 @@
-import type { iAccordionProps } from './Accordion.interface';
+import type { iAccordionConfig, iAccordionProps } from './Accordion.interface';
+declare const accordionConfig: iAccordionConfig;
 declare function Accordion(props: iAccordionProps): import("react/jsx-runtime").JSX.Element;
-export { Accordion };
+export { Accordion, accordionConfig };

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

@@ -1,14 +1,35 @@
 import type { CSSProperties, ReactNode } from 'react';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import type { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 import type { tBorderColorProps, tDirectionProps, tFillHoverProps, tFillProps, tHeightProps, tItemColorProps, tShapeProps, tSizeProps, tTextColorProps, tTextWeightProps, tWidthProps } from '../../types';
+export interface iAccordionThemeColor {
+}
+export interface iAccordionItemThemeColor {
+}
+type tAppearanceKeys = tAppearanceKeysDefault & {};
+export type accordionAppearanceType = {
+    [key in tAppearanceKeys]?: iAccordionThemeColor;
+};
+export type accordionItemAppearanceType = {
+    [key in tAppearanceKeys]?: iAccordionItemThemeColor;
+};
+export interface iAccordionConfig {
+    appearance: accordionAppearanceType | undefined;
+    setAppearance: (newComponent: accordionAppearanceType) => void;
+}
+export interface iAccordionItemConfig {
+    appearance: accordionItemAppearanceType | undefined;
+    setAppearance: (newComponent: accordionItemAppearanceType) => void;
+}
 interface iAccordionItemEventData {
     id: number | string;
     content?: ReactNode;
     title: string;
     isExpanded: boolean;
 }
-interface iAccordionProps extends iStyleAttributes {
+interface iAccordionProps extends iAccordionThemeColor, iStyleAttributes {
     [key: number | string | symbol]: any;
+    appearance?: tAppearanceKeys;
     borderColor?: tBorderColorProps;
     children?: Element | React.ReactNode;
     className?: string;
@@ -27,10 +48,11 @@ interface iAccordionProps extends iStyleAttributes {
     isMultiple?: boolean;
     onClickItem?: (T: iAccordionItemEventData) => void;
 }
-interface iAccordionItemProps extends iStyleAttributes {
+interface iAccordionItemProps extends iAccordionItemThemeColor, iStyleAttributes {
     id: number | string;
     [key: number | string | symbol]: any;
     afterContent?: ReactNode;
+    appearance?: tAppearanceKeys;
     beforeContent?: ReactNode;
     borderColor?: tBorderColorProps;
     children?: ReactNode;

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

@@ -1,3 +1,4 @@
-import type { iAccordionItemProps } from './Accordion.interface';
+import type { iAccordionItemConfig, iAccordionItemProps } from './Accordion.interface';
+declare const accordionItemConfig: iAccordionItemConfig;
 declare function AccordionItem(props: iAccordionItemProps): import("react/jsx-runtime").JSX.Element;
-export { AccordionItem };
+export { AccordionItem, accordionItemConfig };

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

@@ -1,3 +1,4 @@
-import { Accordion } from './Accordion';
-import { AccordionItem } from './AccordionItem';
-export { Accordion, AccordionItem };
+import { Accordion, accordionConfig } from './Accordion';
+import { accordionAppearance, accordionItemAppearance } from './Accordion.appearance';
+import { AccordionItem, accordionItemConfig } from './AccordionItem';
+export { Accordion, AccordionItem, accordionConfig, accordionItemConfig, accordionAppearance, accordionItemAppearance, };

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

@@ -0,0 +1,2 @@
+import { cellAppearanceType } from './Cell.interface';
+export declare const cellAppearance: cellAppearanceType;

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

@@ -1,3 +1,4 @@
-import type { iCellProps } from './Cell.interface';
+import type { iCellConfig, iCellProps } from './Cell.interface';
+declare const cellConfig: iCellConfig;
 declare function Cell(props: iCellProps): import("react/jsx-runtime").JSX.Element;
-export { Cell };
+export { Cell, cellConfig };

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

@@ -2,10 +2,21 @@ import { ElementType, ReactNode } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 import { iconFillSizePropsType, tDirectionProps, tFillProps, tItemColorProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tTextWrapProps } from '../../types';
 import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
+export interface iCellThemeColor {
+}
 type tAppearanceKeys = tAppearanceKeysDefault & {};
-export interface iCellProps extends iStyleAttributes {
+export type cellAppearanceType = {
+    [key in tAppearanceKeys]?: iCellThemeColor;
+};
+export interface iCellConfig {
+    [key: number | string | symbol]: any;
+    appearance: cellAppearanceType | undefined;
+    setAppearance: (newComponent: cellAppearanceType) => void;
+}
+export interface iCellProps extends iCellThemeColor, iStyleAttributes {
     [key: number | string | symbol]: any;
     after?: ReactNode;
+    appearance?: tAppearanceKeys;
     before?: ReactNode;
     className?: string;
     direction?: tDirectionProps;

package/dist/types/components/Cell/index.d.ts

@@ -1 +1,2 @@
-export { Cell } from './Cell';
+export { Cell, cellConfig } from './Cell';
+export { cellAppearance } from './Cell.appearance';

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

@@ -0,0 +1,2 @@
+import { drawerAppearanceType } from './Drawer.interface';
+export declare const drawerAppearance: drawerAppearanceType;

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

@@ -1,3 +1,4 @@
-import type { iDrawerProps } from './Drawer.interface';
+import type { iDrawerConfig, iDrawerProps } from './Drawer.interface';
+declare const drawerConfig: iDrawerConfig;
 declare function Drawer(props: iDrawerProps): import("react/jsx-runtime").JSX.Element;
-export { Drawer };
+export { Drawer, drawerConfig };

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

@@ -1,7 +1,21 @@
 import type { ReactNode } from 'react';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import type { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-interface iDrawerProps extends iStyleAttributes {
+export interface iDrawerThemeColor {
+}
+type tAppearanceKeys = tAppearanceKeysDefault & {};
+export type drawerAppearanceType = {
+    [key in tAppearanceKeys]?: iDrawerThemeColor;
+};
+export interface iDrawerConfig {
+    [key: number | string | symbol]: any;
+    appearance: drawerAppearanceType | undefined;
+    setAppearance: (newComponent: drawerAppearanceType) => void;
+}
+interface iDrawerProps extends iDrawerThemeColor, iStyleAttributes {
+    [key: number | string | symbol]: any;
     after?: ReactNode;
+    appearance?: tAppearanceKeys;
     before?: ReactNode;
     children?: ReactNode;
     className?: string;

package/dist/types/components/Drawer/index.d.ts

@@ -1 +1,2 @@
-export { Drawer } from './Drawer';
+export { Drawer, drawerConfig } from './Drawer';
+export { drawerAppearance } from './Drawer.appearance';

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

@@ -0,0 +1,2 @@
+import { linkAppearanceType } from './Link.interface';
+export declare const linkAppearance: linkAppearanceType;

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

@@ -1,4 +1,5 @@
 import { CSSProperties, ElementType, ReactNode } from 'react';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 import { tDirectionProps, tFillProps, tSizeProps, tTextColorHoverProps, tTextColorProps, tTextGradientProps, tTextStyleProps, tTextWeightProps, tUnderlineProps } from '../../types';
 export interface iLinkThemeColor {
@@ -23,6 +24,10 @@ export interface iLinkThemeColor {
     textWeightMobile?: tTextWeightProps;
     textWeightTablet?: tTextWeightProps;
 }
+type tAppearanceKeys = tAppearanceKeysDefault & {};
+export type linkAppearanceType = {
+    [key in tAppearanceKeys]?: iLinkThemeColor;
+};
 export interface iLinkConfig {
     LinkComponent: ElementType | undefined;
     setLinkComponent: (LinkComponent: ElementType) => void;
@@ -30,6 +35,7 @@ export interface iLinkConfig {
 export interface iLinkProps extends iLinkThemeColor, iStyleAttributes {
     [key: number | string | symbol]: any;
     after?: ReactNode;
+    appearance?: tAppearanceKeys;
     before?: ReactNode;
     children?: ReactNode;
     className?: string;
@@ -60,3 +66,4 @@ export interface iLinkWrapperProps extends iLinkThemeColor, iStyleAttributes {
     onClick?: () => void;
     onMouseDown?: () => void;
 }
+export {};

package/dist/types/components/Link/index.d.ts

@@ -1 +1,2 @@
 export { Link, LinkWrapper, linkConfig } from './Link';
+export { linkAppearance } from './Link.appearance';

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

@@ -0,0 +1,2 @@
+import { menuAppearanceType } from './Menu.interface';
+export declare const menuAppearance: menuAppearanceType;

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

@@ -1,8 +1,9 @@
-import type { iMenuProps } from './Menu.interface';
+import type { iMenuConfig, iMenuProps } from './Menu.interface';
+declare const menuConfig: iMenuConfig;
 declare function Menu(props: iMenuProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Menu {
     var defaultProps: {
         direction: string;
     };
 }
-export { Menu };
+export { Menu, menuConfig };

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

@@ -1,9 +1,22 @@
 import { CSSProperties, ReactNode } from 'react';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 import { flexGrowPropsType, tDirectionProps, tWidthProps } from '../../types';
-export interface iMenuProps extends iStyleAttributes {
+export interface iMenuThemeColor {
+}
+type tAppearanceKeys = tAppearanceKeysDefault & {};
+export type menuAppearanceType = {
+    [key in tAppearanceKeys]?: iMenuThemeColor;
+};
+export interface iMenuConfig {
+    [key: number | string | symbol]: any;
+    appearance: menuAppearanceType | undefined;
+    setAppearance: (newComponent: menuAppearanceType) => void;
+}
+export interface iMenuProps extends iMenuThemeColor, iStyleAttributes {
     [key: number | string | symbol]: any;
     after?: ReactNode;
+    appearance?: tAppearanceKeys;
     before?: ReactNode;
     children?: ReactNode;
     className?: string;
@@ -19,3 +32,4 @@ export interface iMenuProps extends iStyleAttributes {
     width?: tWidthProps;
     onClickItem?: () => void;
 }
+export {};

package/dist/types/components/Menu/index.d.ts

@@ -1 +1,2 @@
-export { Menu } from './Menu';
+export { Menu, menuConfig } from './Menu';
+export { menuAppearance } from './Menu.appearance';

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

@@ -0,0 +1,2 @@
+import { overlayAppearanceType } from './Overlay.interface';
+export declare const overlayAppearance: overlayAppearanceType;

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

@@ -1,3 +1,4 @@
-import type { iOverlayProps } from './Overlay.interface';
+import type { iOverlayConfig, iOverlayProps } from './Overlay.interface';
+declare const overlayConfig: iOverlayConfig;
 declare function Overlay(props: iOverlayProps): import("react/jsx-runtime").JSX.Element;
-export { Overlay };
+export { Overlay, overlayConfig };

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

@@ -1,7 +1,20 @@
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import type { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 import type { tFillGradientProps, tFillProps } from '../../types';
-interface iOverlayProps extends iStyleAttributes {
+export interface iOverlayThemeColor {
+}
+type tAppearanceKeys = tAppearanceKeysDefault & {};
+export type overlayAppearanceType = {
+    [key in tAppearanceKeys]?: iOverlayThemeColor;
+};
+export interface iOverlayConfig {
+    [key: number | string | symbol]: any;
+    appearance: overlayAppearanceType | undefined;
+    setAppearance: (newComponent: overlayAppearanceType) => void;
+}
+interface iOverlayProps extends iOverlayThemeColor, iStyleAttributes {
     [key: number | string | symbol]: any;
+    appearance?: tAppearanceKeys;
     className?: string;
     fill?: tFillProps;
     fillGradient?: tFillGradientProps;

package/dist/types/components/Overlay/index.d.ts

@@ -1 +1,2 @@
-export { Overlay } from './Overlay';
+export { Overlay, overlayConfig } from './Overlay';
+export { overlayAppearance } from './Overlay.appearance';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",