@kwantis-id3/frontend-library 0.20.0 → 0.20.1

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

@@ -0,0 +1,22 @@
+/** @jsxImportSource @emotion/react */
+import { Interpolation } from "@emotion/styled";
+import React from "react";
+import { Theme } from "@emotion/react";
+import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
+export type AccordionProps = {
+    title: string;
+    children: React.ReactNode;
+    customTrigger?: React.ReactNode;
+    color?: ThemeColorsExtended;
+    iconColor?: ThemeColorsExtended;
+    dividerColor?: ThemeColorsExtended;
+    hideIcon?: boolean;
+    hideDivider?: boolean;
+    isOpen?: boolean;
+    isLazy?: boolean;
+    onClick?: () => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    sx?: Interpolation<Theme>;
+};
+export declare const Accordion: (props: AccordionProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare const Divider: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $color: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TitleDiv: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $color: string;
+    $textColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $iconColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TitleH2: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;

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

@@ -0,0 +1 @@
+export { Accordion, AccordionProps } from "./Accordion";

package/dist/esm/types/components/Button/Button.d.ts

@@ -0,0 +1,18 @@
+/** @jsxImportSource @emotion/react */
+import * as React from "react";
+import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
+import { Interpolation } from "@emotion/styled";
+import { Theme } from "@emotion/react";
+export type ButtonVariants = "contained" | "outlined" | "text";
+export type ButtonProps = {
+    color?: ThemeColorsExtended;
+    type?: "button" | "submit" | "reset";
+    sx?: Interpolation<Theme>;
+    variant?: ButtonVariants;
+    onClick?: () => void;
+    className?: string;
+    htmlId?: string;
+    disabled?: boolean;
+    children?: React.ReactNode;
+};
+export declare const Button: (props: ButtonProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/esm/types/components/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button, ButtonProps } from "./Button";

package/dist/esm/types/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
+export type DropdownItem = {
+    value: string;
+    color?: ThemeColorsExtended;
+    textColor?: string;
+    children?: DropdownItem[];
+    onClick?: () => void;
+};
+export type DropdownProps = {
+    content: DropdownItem[];
+    trigger: React.ReactNode;
+    color?: ThemeColorsExtended;
+    hoverColor?: ThemeColorsExtended;
+    direction?: "left" | "right";
+    mobileBreakpoint?: number;
+};
+export declare const DropdownDesktop: (props: DropdownProps) => JSX.Element;
+export declare const Dropdown: (props: DropdownProps) => JSX.Element;

package/dist/esm/types/components/Dropdown/DropdownStyled.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+export declare const DropdownContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropdownTrigger: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $textColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropdownBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $direction: string;
+    $isOpen: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropdownItemContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $bgColor: string;
+    $textColor: string;
+    $hoverColor: string;
+    $hoverTextColor: string;
+    $direction: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropdownBodyMobile: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isOpen: boolean;
+    $bgColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropdownItemMobileContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $bgColor: string;
+    $textColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AccordionBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ClickableItemMobile: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/types/components/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export { Dropdown, DropdownProps, DropdownItem } from "./Dropdown";

package/dist/esm/types/components/InputField/InputField.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
+export type TInputType = "text" | "number" | "password" | "email" | "image" | "search" | "tel" | "url" | "date" | "datetime-local" | "month" | "week" | "time" | "color";
+interface TextFieldProps {
+    value?: string | number;
+    name?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    htmlId?: string;
+    containerClassName?: string;
+    className?: string;
+    isDisabled?: boolean;
+    color?: ThemeColorsExtended;
+    required?: boolean;
+    pattern?: string;
+    readonly?: boolean;
+    autoFocus?: boolean;
+    list?: string;
+    type?: TInputType;
+}
+export declare const InputField: (props: TextFieldProps) => JSX.Element;
+export {};

package/dist/esm/types/components/InputField/StyledInputField.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const InputContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $color: string;
+    $isDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;

package/dist/esm/types/components/InputField/index.d.ts

@@ -0,0 +1 @@
+export { InputField, TInputType } from "./InputField";

package/dist/esm/types/components/Modal/Modal.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface ModalProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    onClose?: () => void;
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/esm/types/components/Modal/StyledModal.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const DialogElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, {}>;
+export declare const ExitButtonContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/types/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+import Modal from "./Modal";
+export { Modal };

package/dist/esm/types/components/SelectFilter/MultiSelect.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
+export interface MultiSelectProps<Option = {
+    label: string;
+    value: string;
+}> {
+    options: Option[];
+    onChange?: (option: Option[] | null) => void;
+    value?: readonly Option[] | null;
+    name?: string;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isOptionDisabled?: (option: Option) => boolean;
+    isLoading?: boolean;
+    color?: ThemeColorsExtended;
+    containerId?: string;
+    htmlId?: string;
+    className?: string;
+    menuPosition?: "fixed" | "absolute";
+    required?: boolean;
+}
+export declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => JSX.Element;

package/dist/esm/types/components/SelectFilter/SingleSelect.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
+export interface SingleSelectProps<Option = {
+    label: string;
+    value: string;
+}> {
+    options: Option[];
+    onChange?: (option: Option | null) => void;
+    value?: Option | null;
+    name?: string;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isOptionDisabled?: (option: Option) => boolean;
+    isLoading?: boolean;
+    color?: ThemeColorsExtended;
+    containerId?: string;
+    htmlId?: string;
+    className?: string;
+    inputClassName?: string;
+    menuPosition?: "fixed" | "absolute";
+    required?: boolean;
+}
+export declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => JSX.Element;

package/dist/esm/types/components/SelectFilter/index.d.ts

@@ -0,0 +1,2 @@
+export { SingleSelect, SingleSelectProps } from "./SingleSelect";
+export { MultiSelect, MultiSelectProps } from "./MultiSelect";

package/dist/esm/types/components/Slider/Slider.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
+export type SliderProps = {
+    values: number[];
+    min?: number;
+    max?: number;
+    onChange: (values: number[]) => void;
+    onFinalChange?: (values: number[]) => void;
+    color?: ThemeColorsExtended;
+    unselectedColor?: ThemeColorsExtended;
+    thumbColor?: ThemeColorsExtended;
+    htmlId?: string;
+    className?: string;
+    showThumbValue?: boolean;
+    autoCalculateMinMax?: boolean;
+    step?: number;
+    disabled?: boolean;
+    allowOverlap?: boolean;
+};
+export declare const Slider: (props: SliderProps) => JSX.Element;

package/dist/esm/types/components/Slider/SliderStyled.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const OuterTrackDiv: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InnerTrackDiv: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $bgColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ThumbDiv: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $bgColor: string;
+    $borderColor: string;
+    $disabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ThumbValueSpan: import("@emotion/styled").StyledComponent<{
+    theme?: import("..").ThemeContextProps | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $textColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/types/components/Slider/index.d.ts

@@ -0,0 +1 @@
+export { Slider, SliderProps } from "./Slider";

package/dist/esm/types/components/ThemeContext/ThemeContext.d.ts

@@ -0,0 +1,78 @@
+import React from "react";
+export interface Color {
+    main: string;
+    contrastText: string;
+}
+export interface ThemeColorsObject {
+    primary: Color;
+    secondary: Color;
+    tertiary: Color;
+    statusOk: Color;
+    statusWarning: Color;
+    statusCritical: Color;
+    statusNeutral: Color;
+}
+export type ThemeContextProps = {
+    colors: ThemeColorsObject;
+};
+interface Nothing {
+}
+type Union<T, U> = T | (U & Nothing);
+export type ThemeColors = keyof ThemeColorsObject;
+export type ThemeColorsExtended = Union<ThemeColors, string>;
+type ThemeProperties = {
+    colors: ThemeColorsObject;
+    /**
+     *
+     * @param color one of the theme keys, a path to a specific color in the theme, OR a string representing a color (hex, rgb, hsl, etc)
+     * @returns a valid color object. If color is not valid, will return the primary color.
+     */
+    getColor: (color: ThemeColorsExtended) => Color;
+};
+export declare const defaultThemeColors: {
+    primary: {
+        main: string;
+        contrastText: string;
+    };
+    secondary: {
+        main: string;
+        contrastText: string;
+    };
+    tertiary: {
+        main: string;
+        contrastText: string;
+    };
+    statusOk: {
+        main: string;
+        contrastText: string;
+    };
+    statusWarning: {
+        main: string;
+        contrastText: string;
+    };
+    statusCritical: {
+        main: string;
+        contrastText: string;
+    };
+    statusNeutral: {
+        main: string;
+        contrastText: string;
+    };
+};
+export declare const ThemeContextProvider: (props: React.PropsWithChildren<{
+    theme?: ThemeContextProps;
+}>) => JSX.Element;
+type NestedObject<T> = {
+    [key: string]: T | NestedObject<T>;
+};
+/**
+ * Returns the value of a nested object given a string path
+ * This function is supposed to be used ONLY to retrieve values from the theme object
+ *
+ * @param object the object to search
+ * @param path a string representing the path to the value
+ * @returns the value of the nested object
+ */
+export declare function getObjectValueByPath<T>(obj: NestedObject<T>, path: string): T | undefined;
+export declare const useThemeContext: () => ThemeProperties;
+export {};

package/dist/esm/types/components/ThemeContext/index.d.ts

@@ -0,0 +1 @@
+export { ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeContextProvider, useThemeContext, } from "./ThemeContext";

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

@@ -0,0 +1,8 @@
+export { Button, ButtonProps } from "./Button";
+export { ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeContextProvider, useThemeContext, } from "./ThemeContext";
+export { Accordion, AccordionProps } from "./Accordion";
+export { InputField, TInputType } from "./InputField";
+export { SingleSelect, SingleSelectProps, MultiSelect, MultiSelectProps, } from "./SelectFilter";
+export { Slider, SliderProps } from "./Slider";
+export { Dropdown, DropdownProps, DropdownItem } from "./Dropdown";
+export { Modal } from "./Modal";

package/dist/esm/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./utils";

package/dist/esm/types/utils/index.d.ts

@@ -0,0 +1,4 @@
+import useIsMobile from "./isMobile";
+export { transientOptions } from "./transientOptions";
+export { styled } from "./styled";
+export { useIsMobile };

package/dist/esm/types/utils/isMobile.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook to check if the screen is mobile. The default breakpoint is 768px.
+ * @param {number=} mobileBreakpoint breakpoint width to check against
+ * @returns boolean
+ */
+declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
+export default useIsMobile;

package/dist/esm/types/utils/styled.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { PropsOf } from "@emotion/react";
+import { CreateStyledComponent, StyledOptions, FilteringStyledOptions } from "@emotion/styled";
+import { ThemeContextProps } from "../components";
+export type StyledTags = {
+    [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<{
+        theme?: ThemeContextProps;
+        as?: React.ElementType;
+    }, JSX.IntrinsicElements[Tag]>;
+};
+export interface BaseCreateStyled {
+    <C extends React.ComponentClass<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
+        theme?: ThemeContextProps;
+    }, {}, {
+        ref?: React.Ref<InstanceType<C>>;
+    }>;
+    <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
+        theme?: ThemeContextProps;
+    }, {}, {
+        ref?: React.Ref<InstanceType<C>>;
+    }>;
+    <C extends React.ComponentType<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
+        theme?: ThemeContextProps;
+    }>;
+    <C extends React.ComponentType<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
+        theme?: ThemeContextProps;
+    }>;
+    <Tag extends keyof JSX.IntrinsicElements, ForwardedProps extends keyof JSX.IntrinsicElements[Tag] & string = keyof JSX.IntrinsicElements[Tag] & string>(tag: Tag, options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>): CreateStyledComponent<{
+        theme?: ThemeContextProps;
+        as?: React.ElementType;
+    }, Pick<JSX.IntrinsicElements[Tag], ForwardedProps>>;
+    <Tag extends keyof JSX.IntrinsicElements>(tag: Tag, options?: StyledOptions<JSX.IntrinsicElements[Tag]>): CreateStyledComponent<{
+        theme?: ThemeContextProps;
+        as?: React.ElementType;
+    }, JSX.IntrinsicElements[Tag]>;
+}
+interface CreateStyled extends BaseCreateStyled, StyledTags {
+}
+export declare const styled: CreateStyled;
+export {};

package/dist/esm/types/utils/transientOptions.d.ts

@@ -0,0 +1,2 @@
+import { CreateStyled } from "@emotion/styled";
+export declare const transientOptions: Parameters<CreateStyled>[1];