@kwantis-id3/frontend-library 1.0.0-rc.6 → 1.0.0-rc.8

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

@@ -1,3 +1,3 @@
-import React from "react";
+import { FC } from "react";
 import { TAccordionProps } from "./AccordionInterfaces";
-export declare const Accordion: React.FC<TAccordionProps>;
+export declare const Accordion: FC<TAccordionProps>;

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

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 export type TAccordionProps = PropsWithChildren & {
     /** Title to be used if no custom trigger is passed */
     title: string;

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

@@ -1,2 +1,2 @@
-export { Accordion } from "./Accordion";
+export * from "./Accordion";
 export * from "./AccordionInterfaces";

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

@@ -1,27 +1,3 @@
 /** @jsxImportSource @emotion/react */
-import * as React from "react";
-import { Interpolation } from "@emotion/styled";
-import { Theme } from "@emotion/react";
-export type ButtonVariants = "contained" | "outlined" | "text";
-export type ButtonProps = {
-    /** Color of the button */
-    color?: string;
-    /** Type of the button */
-    type?: "button" | "submit" | "reset";
-    /** Custom styles */
-    sx?: Interpolation<Theme>;
-    /** Variant of the button, either `contained`, `outlined` or `text` */
-    variant?: ButtonVariants;
-    /** The button size; either "large" or "small" */
-    size?: "small" | "large";
-    /** onClick handler */
-    onClick?: () => void;
-    className?: string;
-    /** HTML id */
-    htmlId?: string;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Elements to render as children */
-    children?: React.ReactNode;
-};
-export declare const Button: (props: ButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+import { TButtonProps } from "./ButtonInterfaces";
+export declare const Button: (props: TButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { Interpolation } from "@emotion/react";
+import { Theme } from "@emotion/react/dist/declarations/src";
+export type TButtonVariants = "contained" | "outlined" | "text";
+export type TButtonProps = {
+    /** Color of the button */
+    color?: string;
+    /** Type of the button */
+    type?: "button" | "submit" | "reset";
+    /** Custom styles */
+    sx?: Interpolation<Theme>;
+    /** Variant of the button, either `contained`, `outlined` or `text` */
+    variant?: TButtonVariants;
+    /** The button size; either "large" or "small" */
+    size?: "small" | "large";
+    /** onClick handler */
+    onClick?: () => void;
+    className?: string;
+    /** HTML id */
+    htmlId?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Elements to render as children */
+    children?: React.ReactNode;
+};

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

@@ -0,0 +1,41 @@
+export declare const StylishButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $size: "small" | "large";
+    $disabled?: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const ContainedButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $size: "small" | "large";
+    $disabled?: boolean;
+} & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    $color: string;
+    $textColor: string;
+}, {}, {}>;
+export declare const OutlinedButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $size: "small" | "large";
+    $disabled?: boolean;
+} & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    $color: string;
+}, {}, {}>;
+export declare const TextButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $size: "small" | "large";
+    $disabled?: boolean;
+} & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    $color: string;
+}, {}, {}>;

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

@@ -1 +1,2 @@
-export { Button, ButtonProps } from "./Button";
+export * from "./Button";
+export * from "./ButtonInterfaces";

package/dist/esm/types/components/Card/CardInterfaces.d.ts

@@ -1,5 +1,5 @@
 import { Interpolation, Theme } from "@emotion/react";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 export type TCardSectionProps = PropsWithChildren & {
     sx?: Interpolation<Theme>;
     onClick?: (e: React.MouseEvent<HTMLElement>) => void;

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

@@ -1,2 +1,2 @@
-export { Card, CardHeader, CardContent, CardFooter, CardIndicators, CardMediaSection, } from "./Card";
-export { TCardSectionProps } from "./CardInterfaces";
+export * from "./Card";
+export * from "./CardInterfaces";

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

@@ -0,0 +1,3 @@
+/** @jsxImportSource @emotion/react */
+import { TDrawerProps } from "./DrawerInterfaces";
+export declare const Drawer: ({ anchor, openContent, closedContent, openTrigger, closedTrigger, minOpen, maxOpen, bgColor, triggerHoverColor, }: TDrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+export type TDrawerProps = {
+    /** Position of the drawer */
+    anchor: "top" | "right" | "bottom" | "left";
+    /** Trigger showed when drawer is closed */
+    closedTrigger?: ReactNode;
+    /** Trigger showed when drawer is open */
+    openTrigger?: ReactNode;
+    /** Component to be rendered when Drawer is open */
+    openContent?: ReactNode;
+    /** Component to be rendered when Drawer is closed */
+    closedContent?: ReactNode;
+    /** Min open of the drawer as number of pixels. If not defined the minOpen will be the height of closedContent if present, otherwise 0px */
+    minOpen?: number;
+    /** Max open of the drawer as number of pixels. If not defined the maxOpen will be the height of openContent with limit at 90vh/vw */
+    maxOpen?: number;
+    /** Background color */
+    bgColor?: string;
+    /** Trigger hover color */
+    triggerHoverColor?: string;
+};

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

@@ -0,0 +1,25 @@
+export declare const DrawerBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $anchor: "top" | "right" | "bottom" | "left";
+    $isOpen: boolean;
+    $minOpen?: string;
+    $maxOpen?: string;
+    $bgColor?: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DrawerContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $anchor: "top" | "right" | "bottom" | "left";
+    $isOpen: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Trigger: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $anchor: "top" | "right" | "bottom" | "left";
+    $bgColor?: string;
+    $triggerHoverColor?: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,2 @@
+export * from "./Drawer";
+export * from "./DrawerInterfaces";

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

@@ -1,43 +1,2 @@
-/** @jsxImportSource @emotion/react */
-import React from "react";
-/**
- * @property {string} value - The value displayed in the dropdown item
- * @property {string} color - The color of the dropdown item
- * @property {string} textColor - The text color of the dropdown item
- * @property {DropdownItem[]} children - The children of the dropdown item
- * @property {() => void} onClick - The onClick handler of the dropdown item
- */
-export type DropdownItem = {
-    /** The value displayed in the item */
-    value: string;
-    /** The color of the item */
-    bgColor?: string;
-    /** The text color of the item */
-    textColor?: string;
-    /** The hover color of the item */
-    hoverColor?: string;
-    /** The children of the item */
-    children?: DropdownItem[];
-    /** Wether the item is hidden or not */
-    isHidden?: boolean;
-    /** Wether the dropdown should close when the item is clicked */
-    closeOnClick?: boolean;
-    /** The onClick handler of the item */
-    onClick?: () => void;
-};
-export type DropdownProps = {
-    /** The content of the dropdown */
-    content: DropdownItem[];
-    /** The trigger element of the dropdown. Clicking on this item will open the dropdown */
-    trigger: React.ReactNode;
-    /** The color of the dropdown */
-    bgColor?: string;
-    /** The hover color of the dropdown */
-    hoverColor?: string;
-    /** Controls wether the dropdown should extend towards the left or the right */
-    direction?: "left" | "right";
-    /** The mobile breakpoint, by default it's 768px */
-    mobileBreakpoint?: number;
-};
-export declare const DropdownDesktop: (props: DropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const Dropdown: (props: DropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+import { TDropdownProps } from "./DropdownInterfaces";
+export declare const Dropdown: (props: TDropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+/**
+ * @property {string} value - The value displayed in the dropdown item
+ * @property {string} color - The color of the dropdown item
+ * @property {string} textColor - The text color of the dropdown item
+ * @property {DropdownItem[]} children - The children of the dropdown item
+ * @property {() => void} onClick - The onClick handler of the dropdown item
+ */
+export type TDropdownItem = {
+    /** The value displayed in the item */
+    value: string;
+    /** The color of the item */
+    bgColor?: string;
+    /** The text color of the item */
+    textColor?: string;
+    /** The hover color of the item */
+    hoverColor?: string;
+    /** The children of the item */
+    children?: TDropdownItem[];
+    /** Wether the item is hidden or not */
+    isHidden?: boolean;
+    /** Wether the dropdown should close when the item is clicked */
+    closeOnClick?: boolean;
+    /** The onClick handler of the item */
+    onClick?: () => void;
+};
+export type TDropdownProps = {
+    /** The content of the dropdown */
+    content: TDropdownItem[];
+    /** The trigger element of the dropdown. Clicking on this item will open the dropdown */
+    trigger: React.ReactNode;
+    /** The color of the dropdown */
+    bgColor?: string;
+    /** The hover color of the dropdown */
+    hoverColor?: string;
+    /** Controls wether the dropdown should extend towards the left or the right */
+    direction?: "left" | "right";
+    /** The mobile breakpoint, by default it's 768px */
+    mobileBreakpoint?: number;
+};
+export type TDropdownItemProps = TDropdownItem & {
+    direction?: string;
+    closeBody: () => void;
+};

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

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

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

@@ -1,2 +1,2 @@
-export { TIndicatorProps, TIndicatorVariants } from "./IndicatorInterfaces";
-export { Indicator } from "./Indicator";
+export * from "./IndicatorInterfaces";
+export * from "./Indicator";

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

@@ -1,11 +1,5 @@
-import React from "react";
-interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    /** Classname given to the container div */
+export declare const InputField: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
     containerClassName?: string;
-    /** The color of the input */
     color?: string;
-    /** Change the styles of the input field */
     sx?: React.CSSProperties;
-}
-export declare const InputField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
-export {};
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,8 @@
+export type TTextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    /** Classname given to the container div */
+    containerClassName?: string;
+    /** The color of the input */
+    color?: string;
+    /** Change the styles of the input field */
+    sx?: React.CSSProperties;
+};

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

@@ -1 +1,2 @@
-export { InputField } from "./InputField";
+export * from "./InputField";
+export * from "./InputFieldInterfaces";

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

@@ -1,19 +1,3 @@
-import React from "react";
-interface ModalProps {
-    /** The content of the modal */
-    children: React.ReactNode;
-    /** Cointrols whether the modal should be open or not. */
-    isOpen: boolean;
-    /** The handler to be called when the modal is closed */
-    onClose: () => void;
-    /** The handler to be called when the modal is opened */
-    onOpen?: () => void;
-    /** custom width */
-    width?: string;
-    /** custom height */
-    height?: string;
-    /** custom css */
-    sx?: React.CSSProperties;
-}
-declare const Modal: React.FC<ModalProps>;
-export default Modal;
+import { FC } from "react";
+import { TModalProps } from "./ModalInterfaces";
+export declare const Modal: FC<TModalProps>;

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

@@ -0,0 +1,16 @@
+export type TModalProps = {
+    /** The content of the modal */
+    children: React.ReactNode;
+    /** Cointrols whether the modal should be open or not. */
+    isOpen: boolean;
+    /** The handler to be called when the modal is closed */
+    onClose: () => void;
+    /** The handler to be called when the modal is opened */
+    onOpen?: () => void;
+    /** custom width */
+    width?: string;
+    /** custom height */
+    height?: string;
+    /** custom css */
+    sx?: React.CSSProperties;
+};

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

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

package/dist/esm/types/components/MultiViewList/MultiViewListInterfaces.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { TCellValues, TTableProps, TTableRow } from "../Table";
 export type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = TTableProps<Cell, Row> & {
     mode: "table" | "cards";

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

@@ -1,2 +1,2 @@
 export * from "./MultiViewListInterfaces";
-export { MultiViewList } from "./MultiViewList";
+export * from "./MultiViewList";

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

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

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

@@ -1,4 +1,4 @@
-export type SliderProps = {
+export type TSliderProps = {
     /** The values of the slider. */
     values: number[];
     /** The minimum value of the slider. */
@@ -30,4 +30,4 @@ export type SliderProps = {
     /** Wether the thumbs can overlap */
     allowOverlap?: boolean;
 };
-export declare const Slider: (props: SliderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Slider: (props: TSliderProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

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

package/dist/esm/types/components/Table/DebouncedInput.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 export declare function DebouncedInput({ value: initialValue, onChange, debounce, ...props }: {
     value: string | number;
     onChange: (value: string | number) => void;

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

@@ -1,2 +1,2 @@
 export * from "./TableInterfaces";
-export { Table, renderCell } from "./Table";
+export * from "./Table";

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

@@ -1,24 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { FC } from "react";
-import { ITagColors } from "../ThemeContext/ThemeInterfaces";
-import { Interpolation } from "@emotion/styled";
-import { Theme } from "@emotion/react";
-export type TTagProps = {
-    text: string;
-    /**
-     * If `variant` is set to `custom`, `bgColor` and `textColor` will be used.
-     * Otherwise, the `variant` will be used to determine the colors.
-     *
-     * The variants are the keys of the interface `@see ITagColors`, which by default are:
-     * - `default`
-     * - `warm`
-     * - `cold`
-     * - `paper`
-     */
-    variant: keyof ITagColors | "custom";
-    /** To use this prop, the variant must be set to `custom` */
-    bgColor?: string;
-    /** To use this prop, the variant must be set to `custom` */
-    textColor?: string;
-    sx?: Interpolation<Theme>;
-};
+import { TTagProps } from "./TagInterfaces";
 export declare const Tag: FC<TTagProps>;

package/dist/esm/types/components/Tag/TagInterfaces.d.ts

@@ -0,0 +1,22 @@
+import { Interpolation } from "@emotion/react";
+import { Theme } from "@emotion/react/dist/declarations/src";
+import { ITagColors } from "../ThemeContext";
+export type TTagProps = {
+    text: string;
+    /**
+     * If `variant` is set to `custom`, `bgColor` and `textColor` will be used.
+     * Otherwise, the `variant` will be used to determine the colors.
+     *
+     * The variants are the keys of the interface `@see ITagColors`, which by default are:
+     * - `default`
+     * - `warm`
+     * - `cold`
+     * - `paper`
+     */
+    variant: keyof ITagColors | "custom";
+    /** To use this prop, the variant must be set to `custom` */
+    bgColor?: string;
+    /** To use this prop, the variant must be set to `custom` */
+    textColor?: string;
+    sx?: Interpolation<Theme>;
+};

package/dist/esm/types/components/Tag/TagStyled.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledTag: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $bgColor: string;
+    $textColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -1 +1,2 @@
-export { Tag, TTagProps } from "./Tag";
+export * from "./Tag";
+export * from "./TagInterfaces";

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

@@ -1,6 +1,6 @@
-import React from "react";
+import { PropsWithChildren, ReactNode } from "react";
 import { IPalette, IThemeContextProps, IThemeContextValue } from "./ThemeInterfaces";
 export declare const defaultLightPalette: IPalette;
 export declare const defaultDarkPalette: IPalette;
-export declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: React.PropsWithChildren<IThemeContextProps>) => JSX.Element;
+export declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: PropsWithChildren<IThemeContextProps>) => ReactNode;
 export declare const useThemeContext: () => IThemeContextValue;

package/dist/esm/types/components/TreeView/TreeViewInterfaces.d.ts

@@ -1,5 +1,4 @@
 import { Interpolation, Theme } from "@emotion/react";
-import React from "react";
 /**
  * A callback to customize how items are rendered
  * @property isOpen: A boolean indicating if the item is expanded

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

@@ -1,14 +1,15 @@
-export { Button, ButtonProps } from "./Button";
+export * from "./Button";
 export * from "./ThemeContext";
-export { Accordion, TAccordionProps } from "./Accordion";
-export { InputField } from "./InputField";
-export { SingleSelect, SingleSelectProps, MultiSelect, MultiSelectProps, } from "./SelectFilter";
-export { Slider, SliderProps } from "./Slider";
-export { Dropdown, DropdownProps, DropdownItem } from "./Dropdown";
-export { Modal } from "./Modal";
-export { TIndicatorProps, TIndicatorVariants, Indicator } from "./Indicator";
-export { Tag, TTagProps } from "./Tag";
-export { Card, CardHeader, CardContent, CardFooter, CardIndicators, CardMediaSection, TCardSectionProps, } from "./Card";
-export { Table, renderCell, TTableProps, TTableCell, TCellValues, TTableRow, } from "./Table";
-export { MultiViewList, TMultiViewListProps } from "./MultiViewList";
-export { ControlledTreeView, UncontrolledTreeView, TControlledTreeViewProps, TUncontrolledTreeViewProps, TViewState, TTreeViewItem, TCustomRenderProps, } from "./TreeView";
+export * from "./Accordion";
+export * from "./InputField";
+export * from "./SelectFilter";
+export * from "./Slider";
+export * from "./Dropdown";
+export * from "./Modal";
+export * from "./Indicator";
+export * from "./Tag";
+export * from "./Card";
+export * from "./Table";
+export * from "./MultiViewList";
+export * from "./TreeView";
+export * from "./Drawer";

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

@@ -1,5 +1,4 @@
 import { TCellValues, TTableRow } from "../components/index";
-import React from "react";
 import { IThemeContextProps } from "../components/ThemeContext/ThemeInterfaces";
 import { RenderHookResult, RenderResult } from "@testing-library/react";
 import { ColumnDef } from "@tanstack/react-table";