@orfium/ictinus 5.5.0 → 5.5.1

package/dist/src/components/TextField/TextField.stories.d.ts

@@ -0,0 +1,99 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('./TextField').TextFieldProps & import('react').RefAttributes<HTMLInputElement>>>;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        }[];
+    };
+    args: {
+        hintMessage: string;
+        label: string;
+        size: string;
+    };
+    argTypes: {
+        status: {
+            type: string;
+            options: string[];
+        };
+        suffixIcon: {
+            type: string;
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const TextFieldSizes: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const TextFieldWithPlaceholder: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const TextFieldWithMaskOption: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};
+export declare const TextFieldWithIcon: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const MultiTextField: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const TextFieldStatuses: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+    name: string;
+};
+export declare const DisabledTextField: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const Playground: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+    name: string;
+};

package/dist/src/components/TextField/TextField.style.d.ts

@@ -0,0 +1,8 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from 'theme';
+
+export declare const iconWrapperStyle: ({ iconPosition, isClickable }: {
+    iconPosition?: 'left' | 'right';
+    isClickable?: boolean;
+}) => (theme: Theme) => SerializedStyles;
+export declare const suffixContainerStyle: (isClickable?: boolean) => () => SerializedStyles;

package/dist/src/components/TextField/TextField.test.d.ts

@@ -0,0 +1 @@
+export declare const values: string[];

package/dist/src/components/TextField/components/commons.d.ts

@@ -0,0 +1,6 @@
+import { FCC, MouseEvent } from 'react';
+
+export declare const IconWrapper: FCC<{
+    iconPosition: 'left' | 'right';
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+}>;

package/dist/src/components/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TextField';
+export * from './TextField';

package/dist/src/components/TextInputBase/TextInputBase.d.ts

@@ -0,0 +1,39 @@
+import { CSSObject } from '@emotion/serialize';
+import { default as React } from 'react';
+import { ComponentSizes } from 'types';
+import { TestProps } from '../../utils/types';
+import { AcceptedIconNames } from '../Icon';
+
+export type TextInputBaseProps = {
+    /** The label of the text field that will be used as a placeholder and a label */
+    label: string;
+    /** The placeholder of the input that will be used. This is shown if no label exists */
+    placeholder?: string;
+    /** The size of input */
+    size?: ComponentSizes;
+    /** An optional suffix (element or icon-name) to show to the left */
+    suffix?: AcceptedIconNames | React.ReactNode | null;
+    /** If the text field value is required */
+    isRequired?: boolean;
+    /** If the text field is disabled */
+    isDisabled?: boolean;
+    /** The status of the TextInput with an optional hint message */
+    status?: {
+        type: 'normal' | 'error' | 'read-only';
+        hintMessage?: string;
+        id?: string;
+    };
+    /** value of the input */
+    value?: string | number;
+    /** Sx prop to override specific properties */
+    sx?: {
+        wrapper?: CSSObject;
+        textField?: CSSObject;
+        input?: CSSObject;
+    };
+    /** Whether the Textfield should change its styles when hovered/focused etc */
+    isInteractive?: boolean;
+    children?: React.ReactNode;
+} & TestProps;
+declare const _default: React.NamedExoticComponent<React.PropsWithChildren<Omit<TextInputBaseProps, "value" | "label" | "placeholder" | "isRequired" | "suffix">>>;
+export default _default;

package/dist/src/components/TextInputBase/TextInputBase.style.d.ts

@@ -0,0 +1,14 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from 'theme';
+import { TextInputBaseProps } from './TextInputBase';
+
+/**
+ * this wrapper must remain simple and not mess with children properties as it will be used
+ * in custom implementation needed eg: datepicker
+ * */
+export declare const wrapperStyle: ({ isDisabled, status, isInteractive, size, sx }: Partial<TextInputBaseProps>) => (theme: Theme) => SerializedStyles;
+export declare const textFieldStyle: ({ sx }: Partial<TextInputBaseProps>) => (theme: Theme) => SerializedStyles;
+export declare const inputStyle: ({ label, placeholder, size, isLocked, isDisabled, sx, }: Partial<TextInputBaseProps> & {
+    isLocked?: boolean;
+}) => (theme: Theme) => SerializedStyles;
+export declare const hintMessageStyle: ({ status, isDisabled }: Partial<TextInputBaseProps>) => (theme: Theme) => SerializedStyles;

package/dist/src/components/TextInputBase/TextInputBase.tokens.d.ts

@@ -0,0 +1,6 @@
+import { default as field } from '../../theme/tokens/components/variables/field';
+import { DotKeys } from '../../theme/tokens/utils';
+import { Theme } from '../../theme';
+
+export type TextInputBaseTokens = DotKeys<typeof field>;
+export declare const getTextInputBaseTokens: (theme: Theme) => (path: "minWidth.small.normal" | "minWidth.small.compact" | "minWidth.medium.normal" | "minWidth.medium.compact" | "minWidth.large.normal" | "minWidth.extraLarge.normal" | "content.padding" | "container.normal" | "container.compact" | "addOn.height.normal" | "addOn.height.compact" | "addOn.padding.normal" | "addOn.padding.compact" | "addOn.padding.textArea", fn?: (val: string) => unknown) => any;

package/dist/src/components/TextInputBase/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TextInputBase';
+export * from './TextInputBase';

package/dist/src/components/ThemeProvider/Test.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+declare const Test: React.ForwardRefExoticComponent<import('../Box').StyledBoxProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export default Test;

package/dist/src/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,9 @@
+import { ThemeConfig } from 'theme';
+import { DeepPartial } from '../../utils/types';
+import * as React from 'react';
+export type ThemeProviderProps = {
+    /** Theme properties to override or pass theming down to library */
+    theme?: DeepPartial<ThemeConfig>;
+};
+declare const ThemeProvider: React.FCC<ThemeProviderProps>;
+export default ThemeProvider;

package/dist/src/components/ThemeProvider/ThemeProvider.stories.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    title: string;
+    component: import('react').FCC<import('./ThemeProvider').ThemeProviderProps>;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export default _default;
+export declare const SettingUpAButtonExample: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+};

package/dist/src/components/ThemeProvider/ThemeProvider.style.d.ts

@@ -0,0 +1,5 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from 'theme';
+
+export declare const scrollbar: (theme: Theme) => SerializedStyles;
+export declare const globalStyles: (theme: Theme) => SerializedStyles;

package/dist/src/components/ThemeProvider/ThemeProvider.test.d.ts

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

package/dist/src/components/ThemeProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ThemeProvider';
+export * from './ThemeProvider';

package/dist/src/components/Toast/Toast.d.ts

@@ -0,0 +1,23 @@
+import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
+import { TestId } from '../../utils/types';
+import { NotificationStyleType, NotificationTypes } from '../Notification/Notification';
+import * as React from 'react';
+export type ToastProps = {
+    /** The informative message of the Toast */
+    message: string;
+    /** The type of the Toast, will determine the color and the icon */
+    type?: AcceptedColorComponentTypes;
+    /** The style type of the Notification. Defaults to elevated */
+    styleType?: NotificationStyleType;
+    /** The closing call-to-action of the Toast */
+    closeCTA: (() => void) | undefined;
+    /** Initialize toast as expanded */
+    isExpanded?: boolean;
+    /** If true, the Toast has a minimum-height */
+    hasMinimumHeight?: boolean;
+    /** The data test id if needed */
+    dataTestId?: TestId;
+};
+export declare const isNotificationTypes: (type: string) => type is NotificationTypes;
+declare const Toast: React.FCC<ToastProps>;
+export default Toast;

package/dist/src/components/Toast/Toast.style.d.ts

@@ -0,0 +1,12 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from '../../theme';
+import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
+import { NotificationStyleType } from '../Notification/Notification';
+
+export declare const toastContainer: (type: AcceptedColorComponentTypes, styleType: NotificationStyleType) => (theme: Theme) => SerializedStyles;
+export declare const topContainer: (type: AcceptedColorComponentTypes) => (theme: Theme) => SerializedStyles;
+export declare const infoContainer: () => (theme: Theme) => SerializedStyles;
+export declare const infoIconContainer: () => (theme: Theme) => SerializedStyles;
+export declare const actionIconsContainer: () => (theme: Theme) => SerializedStyles;
+export declare const chevronIconContainer: (isExpanded: boolean) => () => SerializedStyles;
+export declare const expandedContainer: (type: AcceptedColorComponentTypes, isExpanded: boolean, hasMinimumHeight: boolean) => (theme: Theme) => SerializedStyles;

package/dist/src/components/Toast/Toast.test.d.ts

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

package/dist/src/components/Toast/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Toast';
+export * from './Toast';

package/dist/src/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TooltipProps } from './Tooltip.types';
+
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+export default Tooltip;

package/dist/src/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,76 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Tooltip.types').TooltipProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        }[];
+        chromatic: {
+            delay: number;
+        };
+    };
+    args: {
+        content: string;
+        placement: string;
+    };
+    argTypes: {
+        content: {
+            type: string;
+        };
+    };
+};
+export default _default;
+export declare const TextTooltip: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    autoplay: boolean;
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const InteractiveTooltip: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    autoplay: boolean;
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const TooltipPlacement: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    autoplay: boolean;
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const Playground: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    autoplay: boolean;
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+    name: string;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};

package/dist/src/components/Tooltip/Tooltip.style.d.ts

@@ -0,0 +1,5 @@
+import { SerializedStyles } from '@emotion/react';
+import { TooltipProps } from './Tooltip.types';
+import { Theme } from '../../theme';
+
+export declare const tooltipStyle: ({ isInverted, isInteractive, }: Pick<TooltipProps, 'isInverted' | 'isInteractive'>) => (theme: Theme) => SerializedStyles;

package/dist/src/components/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type InteractiveTooltip = {
+    isInteractive: true;
+    content: React.ReactNode;
+};
+export type TextTooltip = {
+    isInteractive?: false;
+    content: string;
+};
+export type TooltipContent = InteractiveTooltip | TextTooltip;
+export type TooltipProps = TooltipContent & {
+    /** Whether the tooltip's style is inverted */
+    /** @default false */
+    isInverted?: boolean;
+    /** The placement where the tooltip will show */
+    /** @default top */
+    placement?: TooltipPlacement;
+    /** The unique id in order to link content and tooltip */
+    /** @default uuid */
+    id?: string;
+    /** Show delay for tooltip */
+    /** @default 500 */
+    delayIn?: number;
+    /** Hide delay for tooltip */
+    /** @default 500 */
+    delayOut?: number;
+    children: React.ReactElement;
+};

package/dist/src/components/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Tooltip';
+export * from './Tooltip';
+export * from './Tooltip.types';

package/dist/src/components/Tooltip/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const hoverOnTooltips: ({ canvasElement }: {
+    canvasElement: HTMLElement;
+}) => Promise<void>;

package/dist/src/components/TopAppBar/TopAppBar.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { TopAppBarProps } from './TopAppBar.types';
+
+declare const TopAppBar: FC<TopAppBarProps>;
+export default TopAppBar;

package/dist/src/components/TopAppBar/TopAppBar.stories.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import('react').FC<import('./TopAppBar.types').TopAppBarProps>;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        }[];
+    };
+    args: {
+        hasSearchHandler: boolean;
+        hasAdditionalTools: boolean;
+        hasLogo: boolean;
+    };
+};
+export default _default;
+export declare const WithLogoPlaceholder: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const WithAdditionalTools: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const WithDarkThemeEnabled: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const Playground: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};

package/dist/src/components/TopAppBar/TopAppBar.style.d.ts

@@ -0,0 +1,10 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from '../../theme';
+
+declare const _default: {
+    topAppBarWrapper: (isDark: boolean) => (theme: Theme) => SerializedStyles;
+    topAppBarSection: SerializedStyles;
+    additionalToolsSection: (hasAdditionalTools: boolean) => (theme: Theme) => SerializedStyles;
+    mainSection: (hasSearchBar: boolean) => SerializedStyles;
+};
+export default _default;

package/dist/src/components/TopAppBar/TopAppBar.test.d.ts

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

package/dist/src/components/TopAppBar/TopAppBar.types.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { UserMenuProps } from './components/UserMenu/UserMenu';
+
+export interface TopAppBarProps {
+    /** The placeholder of the search component */
+    searchPlaceholder?: string;
+    /** The defaultValue of the search component */
+    searchDefaultValue?: string;
+    /** Flag indicating that the search is disabled */
+    isSearchDisabled?: boolean;
+    /** Callback to be triggered on onChange event of search component */
+    onSearchHandler?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Callback to be triggered on onKeyPress event of search component */
+    onKeyPressHandler?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Custom product logo */
+    logoIcon?: JSX.Element;
+    /** Handler for opening end closing the Navigation. Burger menu only visible from breakpoint [tab-1024] */
+    onMenuIconClick: () => void;
+    /** Whatever is needed can be placed here. It will be placed on the left side of the user menu */
+    additionalTools?: JSX.Element | JSX.Element[];
+    /** User menu props */
+    userMenu: UserMenuProps;
+    /** Flag indicating the theme mode */
+    isDark?: boolean;
+}

package/dist/src/components/TopAppBar/components/Logo/Logo.style.d.ts

@@ -0,0 +1,9 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from '../../../../theme';
+
+export declare const placeholderWrapper: SerializedStyles;
+declare const _default: {
+    wrapper: (theme: Theme) => SerializedStyles;
+    placeholderWrapper: SerializedStyles;
+};
+export default _default;

package/dist/src/components/TopAppBar/components/Logo/Logo.wrapper.d.ts

@@ -0,0 +1,7 @@
+import { FCC } from 'react';
+
+interface LogoWrapperProps {
+    logoIcon?: JSX.Element;
+}
+declare const LogoWrapper: FCC<LogoWrapperProps>;
+export default LogoWrapper;

package/dist/src/components/TopAppBar/components/Logo/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Logo.wrapper';
+export * from './Logo.wrapper';

package/dist/src/components/TopAppBar/components/Search/Search.d.ts

@@ -0,0 +1,13 @@
+import { FCC, default as React } from 'react';
+
+export type SearchProps = {
+    searchPlaceholder: string;
+    searchDefaultValue: string;
+    onSearchHandler?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyPressHandler?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    isSearchDisabled?: boolean;
+} & {
+    isDark?: boolean;
+};
+declare const Search: FCC<SearchProps>;
+export default Search;

package/dist/src/components/TopAppBar/components/Search/Search.style.d.ts

@@ -0,0 +1,5 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from '../../../../theme';
+
+export declare const searchWrapper: (isDark: boolean) => (theme: Theme) => SerializedStyles;
+export declare const customInputStyle: (searchPlaceholder: string, isDark: boolean) => (theme: Theme) => SerializedStyles;

package/dist/src/components/TopAppBar/components/Search/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Search';
+export * from './Search';

package/dist/src/components/TopAppBar/components/SidebarMenuIcon/SidebarMenuIcon.d.ts

@@ -0,0 +1,5 @@
+export interface SidebarMenuIconProps {
+    onMenuIconClick: () => void;
+}
+declare const SidebarMenuIcon: ({ onMenuIconClick }: SidebarMenuIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default SidebarMenuIcon;

package/dist/src/components/TopAppBar/components/SidebarMenuIcon/SidebarMenuIcon.style.d.ts

@@ -0,0 +1,7 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from '../../../../theme';
+
+declare const _default: {
+    iconWrapper: (theme: Theme) => SerializedStyles;
+};
+export default _default;

package/dist/src/components/TopAppBar/components/SidebarMenuIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SidebarMenuIcon';
+export * from './SidebarMenuIcon';

package/dist/src/components/TopAppBar/components/UserMenu/UserMenu.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+export type UserMenuProps = {
+    items: string[];
+    userName: string;
+    userAvatar: {
+        src: string;
+        letter: string;
+    };
+    onSelect: (selectedItem: string | number) => void;
+};
+declare const UserMenu: FC<UserMenuProps>;
+export default UserMenu;

package/dist/src/components/TopAppBar/components/UserMenu/UserMenu.style.d.ts

@@ -0,0 +1,7 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from '../../../../theme';
+
+declare const _default: {
+    buttonTextStyle: (theme: Theme) => SerializedStyles;
+};
+export default _default;

package/dist/src/components/TopAppBar/components/UserMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './UserMenu';
+export * from './UserMenu';

package/dist/src/components/TopAppBar/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as LogoPlaceholder } from './Logo';
+export * from './Logo';
+export { default as SidebarMenuIcon } from './SidebarMenuIcon';
+export * from './SidebarMenuIcon';
+export { default as UserMenu } from './UserMenu';
+export * from './UserMenu';

package/dist/src/components/TopAppBar/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './TopAppBar';
+export * from './TopAppBar';
+export * from './TopAppBar.types';

package/dist/src/components/TruncatedContent/TruncatedContent.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+export type TruncatedContentProps = {
+    /** The content of the tooltip */
+    tooltipContent: string | undefined;
+    /** Flag for overriding other settings to always show the tooltip */
+    isAlwaysVisible?: boolean;
+    /** The placement of the tooltip */
+    placement?: 'top' | 'bottom' | 'right' | 'left';
+};
+declare const TruncatedContent: React.FCC<TruncatedContentProps>;
+export default TruncatedContent;