@kwantis-id3/frontend-library 0.25.1 → 0.27.0

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

@@ -1,24 +1,23 @@
-/// <reference types="react" />
 export declare const Divider: import("@emotion/styled").StyledComponent<{
-    theme?: import("..").ThemeContextProps | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 } & {
     $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;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 } & {
     $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;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 } & {
     $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;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;

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

@@ -1,23 +1,22 @@
-/// <reference types="react" />
 export declare const DropdownContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("..").ThemeContextProps | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 }, 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;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 }, 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;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 } & {
     $direction: string;
     $isOpen: boolean;
     $bgColor: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DropdownItemInnerContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("..").ThemeContextProps | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 } & {
     $bgColor: string;
     $textColor: string;
@@ -26,37 +25,37 @@ export declare const DropdownItemInnerContainer: import("@emotion/styled").Style
     $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;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 } & {
     $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;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 } & {
     $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;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 }, 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;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const MobileItemTitle: import("@emotion/styled").StyledComponent<{
-    theme?: import("..").ThemeContextProps | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 } & {
-    $bgColor?: string | undefined;
-    $textColor?: string | undefined;
+    $bgColor?: string;
+    $textColor?: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ItemSpanValue: import("@emotion/styled").StyledComponent<{
-    theme?: import("..").ThemeContextProps | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 } & {
     $direction: string;
     $hasChildren: boolean;

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

@@ -1,33 +1,14 @@
 import React from "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 {
-    /** The value of the input */
-    value?: string | number;
-    /** The name of the input */
-    name?: string;
-    /** The onChange handler of the input */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    /** The placeholder of the input */
-    placeholder?: string;
-    /** The HTML id of the input */
-    htmlId?: string;
+interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /** Classname given to the container div */
     containerClassName?: string;
-    /** Classname of the input element */
-    className?: string;
     /** Disables the input */
     isDisabled?: boolean;
     /** The color of the input */
     color?: ThemeColorsExtended;
-    required?: boolean;
-    pattern?: string;
-    readonly?: boolean;
-    autoFocus?: boolean;
-    list?: string;
-    /** The type of the input (only string or number based inputs are currently supported) */
-    type?: TInputType;
-    step?: number;
+    /** Change the styles of the input field */
+    sx?: React.CSSProperties;
 }
 export declare const InputField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export {};

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

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

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

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

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

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

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

@@ -1,9 +1,11 @@
-/// <reference types="react" />
 export declare const DialogElement: import("@emotion/styled").StyledComponent<{
-    theme?: import("..").ThemeContextProps | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
+} & {
+    $width?: string;
+    $height?: string;
 }, 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;
+    theme?: import("..").ThemeContextProps;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
 export interface MultiSelectProps<Option = {
     label: string;
@@ -41,4 +41,4 @@ export interface MultiSelectProps<Option = {
     /** Wether the select is required */
     required?: boolean;
 }
-export declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => JSX.Element;
+export declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
 export interface SingleSelectProps<Option = {
     label: string;
@@ -43,4 +43,4 @@ export interface SingleSelectProps<Option = {
     /** Wether the select is required */
     required?: boolean;
 }
-export declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => JSX.Element;
+export declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
 export type SliderProps = {
     /** The values of the slider. */
@@ -32,4 +32,4 @@ export type SliderProps = {
     /** Wether the thumbs can overlap */
     allowOverlap?: boolean;
 };
-export declare const Slider: (props: SliderProps) => JSX.Element;
+export declare const Slider: (props: SliderProps) => React.JSX.Element;

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

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

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

@@ -55,7 +55,7 @@ export declare const defaultThemeColors: {
 };
 export declare const ThemeContextProvider: (props: React.PropsWithChildren<{
     theme?: ThemeContextProps;
-}>) => JSX.Element;
+}>) => React.JSX.Element;
 type NestedObject<T> = {
     [key: string]: T | NestedObject<T>;
 };

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PropsOf } from "@emotion/react";
 import { CreateStyledComponent, StyledOptions, FilteringStyledOptions } from "@emotion/styled";
 import { ThemeContextProps } from "../components";

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import * as React$1 from 'react';
 import React__default from 'react';
@@ -31,7 +30,7 @@ type ThemeProperties = ThemeContextProps & {
 };
 declare const ThemeContextProvider: (props: React__default.PropsWithChildren<{
     theme?: ThemeContextProps;
-}>) => JSX.Element;
+}>) => React__default.JSX.Element;
 declare const useThemeContext: () => ThemeProperties;
 
 type ButtonVariants = "contained" | "outlined" | "text";
@@ -90,34 +89,15 @@ type AccordionProps = {
 };
 declare const Accordion: (props: AccordionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type TInputType = "text" | "number" | "password" | "email" | "image" | "search" | "tel" | "url" | "date" | "datetime-local" | "month" | "week" | "time" | "color";
-interface TextFieldProps {
-    /** The value of the input */
-    value?: string | number;
-    /** The name of the input */
-    name?: string;
-    /** The onChange handler of the input */
-    onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
-    /** The placeholder of the input */
-    placeholder?: string;
-    /** The HTML id of the input */
-    htmlId?: string;
+interface TextFieldProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
     /** Classname given to the container div */
     containerClassName?: string;
-    /** Classname of the input element */
-    className?: string;
     /** Disables the input */
     isDisabled?: boolean;
     /** The color of the input */
     color?: ThemeColorsExtended;
-    required?: boolean;
-    pattern?: string;
-    readonly?: boolean;
-    autoFocus?: boolean;
-    list?: string;
-    /** The type of the input (only string or number based inputs are currently supported) */
-    type?: TInputType;
-    step?: number;
+    /** Change the styles of the input field */
+    sx?: React__default.CSSProperties;
 }
 declare const InputField: React__default.ForwardRefExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLInputElement>>;
 
@@ -164,7 +144,7 @@ interface SingleSelectProps<Option = {
     /** Wether the select is required */
     required?: boolean;
 }
-declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => JSX.Element;
+declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => React__default.JSX.Element;
 
 interface MultiSelectProps<Option = {
     label: string;
@@ -207,7 +187,7 @@ interface MultiSelectProps<Option = {
     /** Wether the select is required */
     required?: boolean;
 }
-declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => JSX.Element;
+declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => React__default.JSX.Element;
 
 type SliderProps = {
     /** The values of the slider. */
@@ -241,7 +221,7 @@ type SliderProps = {
     /** Wether the thumbs can overlap */
     allowOverlap?: boolean;
 };
-declare const Slider: (props: SliderProps) => JSX.Element;
+declare const Slider: (props: SliderProps) => React__default.JSX.Element;
 
 /**
  * @property {string} value - The value displayed in the dropdown item
@@ -285,14 +265,18 @@ declare const Dropdown: (props: DropdownProps) => _emotion_react_types_jsx_names
 interface ModalProps {
     /** The content of the modal */
     children: React__default.ReactNode;
-    /** The state of the modal */
+    /** Cointrols whether the modal should be open or not. */
     isOpen: boolean;
-    /** The handler to change the state of the modal */
-    setIsOpen: (isOpen: boolean) => void;
+    /** The handler to be called when the modal is closed */
+    onClose: () => void;
     /** The handler to be called when the modal is opened */
     onOpen?: () => void;
-    /** The handler to be called when the modal is closed */
-    onClose?: () => void;
+    /** custom width */
+    width?: string;
+    /** custom height */
+    height?: string;
+    /** custom css */
+    sx?: React__default.CSSProperties;
 }
 declare const Modal: React__default.FC<ModalProps>;
 
@@ -341,4 +325,4 @@ interface CreateStyled extends BaseCreateStyled, StyledTags {
 }
 declare const styled: CreateStyled;
 
-export { Accordion, AccordionProps, Button, ButtonProps, Dropdown, DropdownItem, DropdownProps, InputField, Modal, MultiSelect, MultiSelectProps, SingleSelect, SingleSelectProps, Slider, SliderProps, TInputType, ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeContextProvider, ThemeProperties, styled, transientOptions, useIsMobile, useThemeContext };
+export { Accordion, AccordionProps, Button, ButtonProps, Dropdown, DropdownItem, DropdownProps, InputField, Modal, MultiSelect, MultiSelectProps, SingleSelect, SingleSelectProps, Slider, SliderProps, ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeContextProvider, ThemeProperties, styled, transientOptions, useIsMobile, useThemeContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwantis-id3/frontend-library",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "description": "Kwantis frontend components collection",
   "scriptsComments": {
     "storybook": "Starts storybook in development mode",
@@ -28,8 +28,7 @@
     "test:watch": "vitest",
     "test:coverage": "vitest --coverage",
     "chromatic": "npx chromatic --project-token=3dd812d03e4c",
-    "build-cleanup": "if exist dist rmdir /s /q dist",
-    "build": "pnpm clean-build && pnpm rollup",
+    "build": "pnpm rollup",
     "bump:patch": "pnpm version patch",
     "bump:minor": "pnpm version minor",
     "bump:major": "pnpm version major",
@@ -90,6 +89,9 @@
   "files": [
     "dist"
   ],
+  "engines": {
+    "node": ">=18.15.0"
+  },
   "types": "dist/index.d.ts",
   "dependencies": {
     "@emotion/jest": "^11.11.0",