@ctlyst.id/internal-ui 1.0.4-canary.1 → 1.0.4-canary.10

package/README.md

@@ -1 +1 @@
-# @ctlyst.id/internal-ui
+## @ctlyst.id/internal-ui

package/dist/components/breadcrumb/index.d.ts

@@ -1,2 +1,2 @@
-export { default as BreadCrumb } from './components/BreadCrumb';
-export * from './components/BreadCrumb';
+export { default as BreadCrumb } from './components/bread-crumb';
+export * from './components/bread-crumb';

package/dist/components/checkbox/__stories__/checkbox.stories.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare const _default: {
+    chakra: {
+        theme: Record<string, any>;
+    };
+    title: string;
+    decorators: ((Story: React.ElementType) => JSX.Element)[];
+};
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const WithLabel: () => JSX.Element;
+export declare const WithHelpText: () => JSX.Element;

package/dist/components/checkbox/components/checkbox.d.ts

@@ -0,0 +1,16 @@
+import type { CheckboxProps } from '@chakra-ui/react';
+import type { PropsWithChildren } from 'react';
+export interface CheckboxComponentProps extends CheckboxProps, PropsWithChildren {
+    isError?: boolean;
+    helpText?: string;
+    errorText?: string;
+}
+declare function CheckboxComponent({ isError, helpText, errorText, children, isDisabled, ...rest }: CheckboxComponentProps): JSX.Element;
+declare namespace CheckboxComponent {
+    var defaultProps: {
+        isError: boolean;
+        helpText: string;
+        errorText: string;
+    };
+}
+export default CheckboxComponent;

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './components/checkbox';
+export * from './components/checkbox';

package/dist/components/field/components/field.d.ts

@@ -2,8 +2,11 @@ import type { FC, PropsWithChildren, ReactNode } from 'react';
 export interface Props {
     label?: string | ReactNode;
     isError?: boolean;
-    error?: string | ReactNode;
-    helperText?: string | ReactNode;
+    isSuccess?: boolean;
+    isDisabled?: boolean;
+    errorMessage?: string | ReactNode;
+    leftHelperText?: string | ReactNode;
+    rightHelperText?: string | ReactNode;
     isRequired?: boolean;
 }
 export declare type FieldProps<T = unknown> = Props & T;

package/dist/components/field/index.d.ts

@@ -2,5 +2,3 @@ export { default as Field } from './components/field';
 export * from './components/field';
 export { default as InputField } from './components/input-field';
 export * from './components/input-field';
-export { default as TextareaField } from './components/textarea-field';
-export * from './components/textarea-field';

package/dist/components/form/__stories__/textarea.stories.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const _default: {
+    chakra: {
+        theme: Record<string, any>;
+    };
+    title: string;
+    decorators: ((Story: React.ElementType) => JSX.Element)[];
+};
+export default _default;
+export declare const TextArea: () => JSX.Element;

package/dist/components/{field/components/textarea-field.d.ts → form/components/textarea.d.ts}

@@ -1,12 +1,8 @@
 import type { TextareaProps as ChakraTextareaProps } from '@chakra-ui/react';
-import type { ReactNode } from 'react';
 import React from 'react';
-import type { FieldProps } from './field';
+import type { FieldProps } from '../../field';
 export interface TextAreaProps extends ChakraTextareaProps, FieldProps {
-    addOnLeft?: ReactNode;
-    addOnRight?: ReactNode;
-    elementLeft?: ReactNode;
-    elementRight?: ReactNode;
+    isLoading?: boolean;
 }
 declare const TextareaField: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextareaField;

package/dist/components/form/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextareaField } from './components/textarea';
+export * from './components/textarea';

package/dist/components/header/components/header.d.ts

@@ -5,6 +5,7 @@ export declare type HeaderProps = BoxProps & {
     data?: HeaderDataProps;
     onLogout?: () => void;
     onOpenModalRelease?: () => void;
+    hideSwitchMode?: boolean;
 };
 declare const Header: React.FC<HeaderProps>;
 export default Header;

package/dist/components/index.d.ts

@@ -1,8 +1,11 @@
 export * from './breadcrumb';
+export * from './checkbox';
 export * from './data-table';
 export * from './datepicker';
 export * from './field';
+export * from './form';
 export * from './header';
+export * from './loader';
 export * from './modal';
 export * from './navigation';
 export * from './pagination';

package/dist/components/{base/stories/checkbox.stories.d.ts → loader/__stories__/loader.stories.d.ts}

@@ -7,5 +7,6 @@ declare const _default: {
     decorators: ((Story: React.ElementType) => JSX.Element)[];
 };
 export default _default;
-export declare const CheckboxDefault: () => JSX.Element;
-export declare const CheckboxSize: () => JSX.Element;
+export declare const Default: () => JSX.Element;
+export declare const Variant: () => JSX.Element;
+export declare const Size: () => JSX.Element;

package/dist/components/loader/components/loader.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLChakraProps, ThemingProps } from '@chakra-ui/react';
+export interface LoaderProps {
+    size?: string;
+    variant?: string;
+}
+export interface CustomBadgeProps extends HTMLChakraProps<'span'>, ThemingProps {
+}
+declare const Loader: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"div", CustomBadgeProps>;
+export default Loader;

package/dist/components/loader/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Loader } from './components/loader';
+export * from './components/loader';

package/dist/components/navigation/components/customer-icon.d.ts

@@ -0,0 +1,2 @@
+declare const CustomerIcon: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"svg", import("@chakra-ui/icon/dist/icon").IconProps>;
+export default CustomerIcon;

package/dist/components/navigation/components/mapping-icon.d.ts

@@ -0,0 +1,2 @@
+import type { IconType } from 'react-icons/lib';
+export declare const mappingIcon: Map<string, IconType>;

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

@@ -1,7 +1,7 @@
 import type { IconType } from 'react-icons/lib';
 export declare type NavigationLink = {
     title: string;
-    icon: IconType;
+    icon?: IconType;
     navLink?: string;
     navHost?: string;
     children?: Omit<NavigationLink, 'children'>[];

package/dist/components/select/components/select-async-creatable.d.ts

@@ -1,4 +1,5 @@
 import type { GroupBase } from 'react-select';
 import type { AsyncCreatableProps } from 'react-select/async-creatable';
-export declare type SelectAsyncCreatableProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = AsyncCreatableProps<Option, IsMulti, Group>;
-export default function SelectAsyncCreatable<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ styles, ...rest }: SelectAsyncCreatableProps<Option, IsMulti, Group>): JSX.Element;
+import type { ExtendedSelectProps } from './types/select.types';
+export declare type SelectAsyncCreatableProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = AsyncCreatableProps<Option, IsMulti, Group> & ExtendedSelectProps;
+export default function SelectAsyncCreatable<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ styles, isError, ...rest }: SelectAsyncCreatableProps<Option, IsMulti, Group>): JSX.Element;

package/dist/components/select/components/select-async.d.ts

@@ -1,5 +1,6 @@
 import type { GroupBase } from 'react-select';
 import type { AsyncPaginateProps } from 'react-select-async-paginate';
-export declare type SelectAsyncProps<OptionType = unknown, Group extends GroupBase<OptionType> = GroupBase<OptionType>, Additional = unknown, IsMulti extends boolean = false> = AsyncPaginateProps<OptionType, Group, Additional, IsMulti>;
-declare function SelectAsync<OptionType, Group extends GroupBase<OptionType>, Additional, IsMulti extends boolean = false>({ styles, ...rest }: SelectAsyncProps<OptionType, Group, Additional, IsMulti>): JSX.Element;
+import type { ExtendedSelectProps } from './types/select.types';
+export declare type SelectAsyncProps<OptionType = unknown, Group extends GroupBase<OptionType> = GroupBase<OptionType>, Additional = unknown, IsMulti extends boolean = false> = AsyncPaginateProps<OptionType, Group, Additional, IsMulti> & ExtendedSelectProps;
+declare function SelectAsync<OptionType, Group extends GroupBase<OptionType>, Additional, IsMulti extends boolean = false>({ styles, isError, ...rest }: SelectAsyncProps<OptionType, Group, Additional, IsMulti>): JSX.Element;
 export default SelectAsync;

package/dist/components/select/components/select-creatable.d.ts

@@ -1,4 +1,5 @@
 import type { GroupBase } from 'react-select';
 import type { CreatableProps } from 'react-select/creatable';
-export declare type SelectCreatableProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = CreatableProps<Option, IsMulti, Group>;
-export default function SelectCreatable<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ styles, ...rest }: SelectCreatableProps<Option, IsMulti, Group>): JSX.Element;
+import type { ExtendedSelectProps } from './types/select.types';
+export declare type SelectCreatableProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = CreatableProps<Option, IsMulti, Group> & ExtendedSelectProps;
+export default function SelectCreatable<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ styles, isError, ...rest }: SelectCreatableProps<Option, IsMulti, Group>): JSX.Element;

package/dist/components/select/components/select-wrapper.d.ts

@@ -0,0 +1,6 @@
+import type { FC, PropsWithChildren } from 'react';
+interface SelectWrapperProps {
+    isError?: boolean;
+}
+declare const SelectWrapper: FC<PropsWithChildren<SelectWrapperProps>>;
+export default SelectWrapper;

package/dist/components/select/components/select.d.ts

@@ -1,4 +1,5 @@
 import type { GroupBase, Props as ReactSelectProps } from 'react-select';
-export declare type SelectProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = ReactSelectProps<Option, IsMulti, Group>;
-declare function Select<OptionType, Group extends GroupBase<OptionType>, IsMulti extends boolean = false>({ styles, ...rest }: SelectProps<OptionType, IsMulti, Group>): JSX.Element;
+import type { ExtendedSelectProps } from './types/select.types';
+export declare type SelectProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = ReactSelectProps<Option, IsMulti, Group> & ExtendedSelectProps;
+declare function Select<OptionType, Group extends GroupBase<OptionType>, IsMulti extends boolean = false>({ styles, isError, ...rest }: SelectProps<OptionType, IsMulti, Group>): JSX.Element;
 export default Select;

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

@@ -0,0 +1,3 @@
+export declare type ExtendedSelectProps = {
+    isError?: boolean;
+};

package/dist/components/select/components/utils.d.ts

@@ -1,6 +1,6 @@
 import type { ColorMode } from '@chakra-ui/system';
 import type { GroupBase, StylesConfig, Theme } from 'react-select';
-export declare function selectStyles<OptionType = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<OptionType> = GroupBase<OptionType>>(colorMode?: ColorMode): StylesConfig<OptionType, IsMulti, Group> | undefined;
+export declare function selectStyles<OptionType = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<OptionType> = GroupBase<OptionType>>(colorMode: ColorMode, _isError: boolean): StylesConfig<OptionType, IsMulti, Group> | undefined;
 export declare const themeSelect: (theme: Theme) => {
     colors: {
         primary: string;

package/dist/config/{foundations.stories.d.ts → __stories__/foundations.stories.d.ts}

@@ -9,5 +9,6 @@ declare const _default: {
 export default _default;
 export declare const Color: () => JSX.Element;
 export declare const Typography: () => JSX.Element;
+export declare const Shadow: () => JSX.Element;
 export declare const Spacing: () => JSX.Element;
 export declare const Sizes: () => JSX.Element;

package/dist/config/theme/components/checkbox.d.ts

@@ -1,3 +1,87 @@
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-declare const Checkbox: ComponentStyleConfig;
+declare const Checkbox: {
+    baseStyle?: {
+        control: {
+            borderRadius: string;
+            width: string;
+            height: string;
+            border: string;
+        };
+        icon: {
+            color: string;
+            width: string;
+        };
+        label: {
+            fontWeight: string;
+            lineHeight: string;
+            color: string;
+            ml: string;
+        };
+        _disabled: {
+            background: string;
+            border: string;
+            borderColor: string;
+            cursor: string;
+        };
+    } | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("container" | "icon" | "label" | "control")[];
+        }>;
+    } | undefined;
+    variants?: {
+        errors: {
+            control: {
+                borderColor: string;
+                _checked: {
+                    borderColor: string;
+                    backgroundColor: string;
+                    _hover: {
+                        borderColor: string;
+                        backgroundColor: string;
+                    };
+                };
+                _indeterminate: {
+                    borderColor: string;
+                    backgroundColor: string;
+                };
+            };
+            label: {
+                fontSize: string;
+            };
+        };
+        unstyled: {
+            control: {
+                borderColor: string;
+                _checked: {
+                    borderColor: string;
+                    backgroundColor: string;
+                    _hover: {
+                        borderColor: string;
+                        backgroundColor: string;
+                    };
+                    _disabled: {
+                        backgroundColor: string;
+                        borderColor: string;
+                    };
+                };
+                _disabled: {
+                    backgroundColor: string;
+                };
+                _indeterminate: {
+                    borderColor: string;
+                    backgroundColor: string;
+                };
+            };
+            label: {
+                fontSize: string;
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: "errors" | "unstyled" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("container" | "icon" | "label" | "control")[];
+};
 export default Checkbox;

package/dist/config/theme/components/index.d.ts

@@ -2,7 +2,8 @@ export { default as Button } from './button';
 export { default as Checkbox } from './checkbox';
 export { default as FormLabel } from './form-label';
 export { default as Input } from './input';
+export { default as LoaderStyle } from './loader';
+export { default as Popover } from './popover';
 export { default as Radio } from './radio';
 export { default as Switch } from './switch';
-export { default as Popover } from './popover';
 export { default as Textarea } from './textarea';

package/dist/config/theme/components/loader.d.ts

@@ -0,0 +1,85 @@
+declare const LoaderStyle: {
+    baseStyle?: ((props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        borderRadius: string;
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        animation: string;
+        background: string;
+        ':before': {
+            content: string;
+            display: string;
+            borderRadius: string;
+            width: string;
+            height: string;
+            position: string;
+            bottom: number;
+            background: string;
+        };
+    }) | undefined;
+    sizes?: {
+        xs: {
+            width: string;
+            height: string;
+            WebkitMask: string;
+            ':before': {
+                width: string;
+                height: string;
+            };
+        };
+        sm: {
+            width: string;
+            height: string;
+            WebkitMask: string;
+            ':before': {
+                width: string;
+                height: string;
+            };
+        };
+        md: {
+            width: string;
+            height: string;
+            WebkitMask: string;
+            ':before': {
+                width: string;
+                height: string;
+            };
+        };
+        lg: {
+            width: string;
+            height: string;
+            WebkitMask: string;
+            ':before': {
+                width: string;
+                height: string;
+            };
+        };
+        xl: {
+            width: string;
+            height: string;
+            WebkitMask: string;
+            ':before': {
+                width: string;
+                height: string;
+            };
+        };
+        xxl: {
+            width: string;
+            height: string;
+            WebkitMask: string;
+            ':before': {
+                width: string;
+                height: string;
+            };
+        };
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    } | undefined;
+    defaultProps?: {
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+};
+export default LoaderStyle;

package/dist/config/theme/components/textarea.d.ts

@@ -1,3 +1,55 @@
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-declare const Textarea: ComponentStyleConfig;
+export declare const Textarea: {
+    baseStyle?: import("@chakra-ui/styled-system").CSSWithMultiValues | (import("@chakra-ui/styled-system").CSSWithMultiValues & import("@chakra-ui/styled-system").RecursivePseudo<import("@chakra-ui/styled-system").CSSWithMultiValues>) | (import("@chakra-ui/styled-system").CSSWithMultiValues & import("@chakra-ui/styled-system").RecursiveCSSSelector<import("@chakra-ui/styled-system").CSSWithMultiValues>) | import("@chakra-ui/styled-system").SystemStyleFunction | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    } | undefined;
+    variants?: {
+        outline: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+            background: string;
+            color: string;
+            borderColor: string;
+            fontSize: string;
+            padding: number;
+            borderRadius: string;
+            borderWidth: string;
+            outline: string;
+            _disabled: {
+                opacity: number;
+                color: string;
+                background: string;
+            };
+            _placeholder: {
+                color: string;
+            };
+            _hover: {
+                borderColor: string;
+            };
+            _focus: {
+                outline: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            _focusVisible: {
+                outline: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            _focusWithin: {
+                outline: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+            _invalid: {
+                outline: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: "outline" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+};
 export default Textarea;

package/dist/config/theme/foundations/index.d.ts

@@ -1,5 +1,6 @@
 export { default as colors } from './colors';
 export { default as radii } from './radius';
-export { default as space } from './spacing';
+export { default as shadows } from './shadows';
 export { default as sizes } from './sizes';
-export { fonts, fontSizes, lineHeights, textStyles } from './typography';
+export { default as space } from './spacing';
+export { fonts, fontSizes, letterSpacings, lineHeights, textStyles } from './typography';

package/dist/config/theme/foundations/shadows.d.ts

@@ -0,0 +1,15 @@
+declare const shadows: {
+    raised: string;
+    xs: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    outline: string;
+    inner: string;
+    none: string;
+    "dark-lg": string;
+};
+export default shadows;

package/dist/config/theme/foundations/typography.d.ts

@@ -20,6 +20,11 @@ declare const lineHeights: {
     short: number;
     base: number;
     tall: number;
+    64: string;
+    56: string;
+    48: string;
+    40: string;
+    36: string;
     34: string;
     32: string;
     30: string;
@@ -33,6 +38,14 @@ declare const lineHeights: {
     14: string;
     12: string;
 };
+declare const letterSpacings: {
+    tighter: string;
+    tight: string;
+    normal: string;
+    wide: string;
+    wider: string;
+    widest: string;
+};
 declare const fontSizes: {
     heading: {
         1: string;
@@ -67,37 +80,37 @@ declare const textStyles: {
     heading: {
         1: {
             fontSize: string;
-            fontWeight: string;
+            fontWeight: number;
             lineHeight: string;
             letterSpacing: string;
         };
         2: {
             fontSize: string;
-            fontWeight: string;
+            fontWeight: number;
             lineHeight: string;
             letterSpacing: string;
         };
         3: {
             fontSize: string;
-            fontWeight: string;
+            fontWeight: number;
             lineHeight: string;
             letterSpacing: string;
         };
         4: {
             fontSize: string;
-            fontWeight: string;
+            fontWeight: number;
             lineHeight: string;
             letterSpacing: string;
         };
         5: {
             fontSize: string;
-            fontWeight: string;
+            fontWeight: number;
             lineHeight: string;
             letterSpacing: string;
         };
         6: {
             fontSize: string;
-            fontWeight: string;
+            fontWeight: number;
             lineHeight: string;
             letterSpacing: string;
         };
@@ -105,26 +118,31 @@ declare const textStyles: {
     text: {
         xl: {
             fontSize: string;
+            fontWeight: number;
             lineHeight: string;
             letterSpacing: string;
         };
         lg: {
             fontSize: string;
+            fontWeight: number;
             lineHeight: string;
             letterSpacing: string;
         };
         md: {
             fontSize: string;
+            fontWeight: number;
             lineHeight: string;
             letterSpacing: string;
         };
         sm: {
             fontSize: string;
+            fontWeight: number;
             lineHeight: string;
             letterSpacing: string;
         };
         xs: {
             fontSize: string;
+            fontWeight: number;
             lineHeight: string;
             letterSpacing: string;
         };
@@ -170,4 +188,4 @@ declare const textStyles: {
         };
     };
 };
-export { fonts, fontSizes, fontWeights, lineHeights, textStyles };
+export { fonts, fontSizes, fontWeights, letterSpacings, lineHeights, textStyles };