@kwantis-id3/frontend-library 0.27.2 → 1.0.0-rc.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/README.md +6 -332
  2. package/dist/esm/index.js +398 -114
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/esm/types/components/Accordion/Accordion.d.ts +3 -38
  5. package/dist/esm/types/components/Accordion/AccordionInterfaces.d.ts +21 -0
  6. package/dist/esm/types/components/Accordion/AccordionStyled.d.ts +23 -14
  7. package/dist/esm/types/components/Accordion/index.d.ts +2 -1
  8. package/dist/esm/types/components/Button/Button.d.ts +2 -25
  9. package/dist/esm/types/components/Button/ButtonInterfaces.d.ts +24 -0
  10. package/dist/esm/types/components/Button/ButtonStyled.d.ts +41 -0
  11. package/dist/esm/types/components/Button/index.d.ts +2 -1
  12. package/dist/esm/types/components/Card/Card.d.ts +15 -0
  13. package/dist/esm/types/components/Card/CardInterfaces.d.ts +6 -0
  14. package/dist/esm/types/components/Card/CardStyled.d.ts +24 -0
  15. package/dist/esm/types/components/Card/index.d.ts +2 -0
  16. package/dist/esm/types/components/Drawer/Drawer.d.ts +3 -0
  17. package/dist/esm/types/components/Drawer/DrawerInterfaces.d.ts +21 -0
  18. package/dist/esm/types/components/Drawer/DrawerStyled.d.ts +25 -0
  19. package/dist/esm/types/components/Drawer/index.d.ts +2 -0
  20. package/dist/esm/types/components/Dropdown/Dropdown.d.ts +2 -42
  21. package/dist/esm/types/components/Dropdown/DropdownInterfaces.d.ts +43 -0
  22. package/dist/esm/types/components/Dropdown/DropdownStyled.d.ts +10 -11
  23. package/dist/esm/types/components/Dropdown/index.d.ts +2 -1
  24. package/dist/esm/types/components/Indicator/ErrorIndicator.d.ts +3 -0
  25. package/dist/esm/types/components/Indicator/Indicator.d.ts +7 -0
  26. package/dist/esm/types/components/Indicator/IndicatorInterfaces.d.ts +11 -0
  27. package/dist/esm/types/components/Indicator/LiveIndicator.d.ts +3 -0
  28. package/dist/esm/types/components/Indicator/SuccessIndicator.d.ts +3 -0
  29. package/dist/esm/types/components/Indicator/WarningIndicator.d.ts +3 -0
  30. package/dist/esm/types/components/Indicator/index.d.ts +2 -0
  31. package/dist/esm/types/components/InputField/InputField.d.ts +3 -12
  32. package/dist/esm/types/components/InputField/InputFieldInterfaces.d.ts +8 -0
  33. package/dist/esm/types/components/InputField/{StyledInputField.d.ts → InputFieldStyled.d.ts} +2 -2
  34. package/dist/esm/types/components/InputField/index.d.ts +2 -1
  35. package/dist/esm/types/components/Modal/Modal.d.ts +3 -19
  36. package/dist/esm/types/components/Modal/ModalInterfaces.d.ts +16 -0
  37. package/dist/esm/types/components/Modal/{StyledModal.d.ts → ModalStyled.d.ts} +4 -2
  38. package/dist/esm/types/components/Modal/index.d.ts +2 -2
  39. package/dist/esm/types/components/MultiViewList/MultiViewList.d.ts +3 -0
  40. package/dist/esm/types/components/MultiViewList/MultiViewListInterfaces.d.ts +5 -0
  41. package/dist/esm/types/components/MultiViewList/MultiViewListStyled.d.ts +4 -0
  42. package/dist/esm/types/components/MultiViewList/index.d.ts +2 -0
  43. package/dist/esm/types/components/SelectFilter/MultiSelect.d.ts +2 -4
  44. package/dist/esm/types/components/SelectFilter/SingleSelect.d.ts +2 -4
  45. package/dist/esm/types/components/SelectFilter/index.d.ts +2 -2
  46. package/dist/esm/types/components/Slider/Slider.d.ts +5 -7
  47. package/dist/esm/types/components/Slider/SliderStyled.d.ts +4 -4
  48. package/dist/esm/types/components/Slider/index.d.ts +1 -1
  49. package/dist/esm/types/components/Table/DebouncedFilter.d.ts +7 -0
  50. package/dist/esm/types/components/Table/DebouncedInput.d.ts +5 -0
  51. package/dist/esm/types/components/Table/Table.d.ts +3 -0
  52. package/dist/esm/types/components/Table/TableInterfaces.d.ts +21 -0
  53. package/dist/esm/types/components/Table/TableStyled.d.ts +14 -0
  54. package/dist/esm/types/components/Table/index.d.ts +2 -0
  55. package/dist/esm/types/components/Tag/Tag.d.ts +4 -0
  56. package/dist/esm/types/components/Tag/TagInterfaces.d.ts +22 -0
  57. package/dist/esm/types/components/Tag/TagStyled.d.ts +7 -0
  58. package/dist/esm/types/components/Tag/index.d.ts +2 -0
  59. package/dist/esm/types/components/ThemeContext/ThemeContext.d.ts +6 -72
  60. package/dist/esm/types/components/ThemeContext/ThemeInterfaces.d.ts +109 -0
  61. package/dist/esm/types/components/ThemeContext/index.d.ts +2 -1
  62. package/dist/esm/types/components/TreeView/ControlledTreeView.d.ts +4 -0
  63. package/dist/esm/types/components/TreeView/TreeUtils.d.ts +3 -0
  64. package/dist/esm/types/components/TreeView/TreeViewInterfaces.d.ts +77 -0
  65. package/dist/esm/types/components/TreeView/TreeViewSyled.d.ts +24 -0
  66. package/dist/esm/types/components/TreeView/UncontrolledTreeView.d.ts +3 -0
  67. package/dist/esm/types/components/TreeView/index.d.ts +3 -0
  68. package/dist/esm/types/components/index.d.ts +15 -8
  69. package/dist/esm/types/utils/colors.d.ts +30 -0
  70. package/dist/esm/types/utils/index.d.ts +1 -0
  71. package/dist/esm/types/utils/styled.d.ts +1 -38
  72. package/dist/esm/types/utils/testing.d.ts +53 -0
  73. package/dist/esm/types/utils/transientOptions.d.ts +7 -0
  74. package/dist/esm/types/utils/usePrefersColorScheme.d.ts +1 -0
  75. package/dist/index.d.ts +422 -132
  76. package/package.json +31 -24
  77. package/src/types/emotion.d.ts +8 -0
  78. package/src/types/tanstack.d.ts +7 -0
  79. package/changelog.md +0 -197
@@ -1,11 +1,13 @@
1
1
  export declare const DialogElement: import("@emotion/styled").StyledComponent<{
2
- theme?: import("..").ThemeContextProps;
2
+ theme?: import("@emotion/react").Theme;
3
3
  as?: React.ElementType;
4
4
  } & {
5
5
  $width?: string;
6
6
  $height?: string;
7
+ $bgColor?: string;
8
+ $textColor?: string;
7
9
  }, import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, {}>;
8
10
  export declare const ExitButtonContainer: import("@emotion/styled").StyledComponent<{
9
- theme?: import("..").ThemeContextProps;
11
+ theme?: import("@emotion/react").Theme;
10
12
  as?: React.ElementType;
11
13
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,2 +1,2 @@
1
- import Modal from "./Modal";
2
- export { Modal };
1
+ export * from "./Modal";
2
+ export * from "./ModalInterfaces";
@@ -0,0 +1,3 @@
1
+ import { TMultiViewListProps } from "./MultiViewListInterfaces";
2
+ import { TCellValues, TTableRow } from "../Table";
3
+ export declare const MultiViewList: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TMultiViewListProps<Cell, Row>) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { TCellValues, TTableProps, TTableRow } from "../Table";
2
+ export type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = TTableProps<Cell, Row> & {
3
+ mode: "table" | "cards";
4
+ cardComponent: (item: Row) => React.ReactNode;
5
+ };
@@ -0,0 +1,4 @@
1
+ export declare const StyledCardsContainer: import("@emotion/styled").StyledComponent<{
2
+ theme?: import("@emotion/react").Theme;
3
+ as?: React.ElementType;
4
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -0,0 +1,2 @@
1
+ export * from "./MultiViewListInterfaces";
2
+ export * from "./MultiViewList";
@@ -1,5 +1,3 @@
1
- import React from "react";
2
- import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
3
1
  export interface MultiSelectProps<Option = {
4
2
  label: string;
5
3
  value: string;
@@ -29,7 +27,7 @@ export interface MultiSelectProps<Option = {
29
27
  /** Wether the select is loading */
30
28
  isLoading?: boolean;
31
29
  /** The color of the select */
32
- color?: ThemeColorsExtended;
30
+ color?: string;
33
31
  /** The HTML id of the container */
34
32
  containerId?: string;
35
33
  /** The HTML id of the select */
@@ -41,4 +39,4 @@ export interface MultiSelectProps<Option = {
41
39
  /** Wether the select is required */
42
40
  required?: boolean;
43
41
  }
44
- export declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => React.JSX.Element;
42
+ export declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -1,5 +1,3 @@
1
- import React from "react";
2
- import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
3
1
  export interface SingleSelectProps<Option = {
4
2
  label: string;
5
3
  value: string;
@@ -29,7 +27,7 @@ export interface SingleSelectProps<Option = {
29
27
  /** Wether the select is loading */
30
28
  isLoading?: boolean;
31
29
  /** The color of the select */
32
- color?: ThemeColorsExtended;
30
+ color?: string;
33
31
  /** The HTML id of the container */
34
32
  containerId?: string;
35
33
  /** The HTML id of the select */
@@ -43,4 +41,4 @@ export interface SingleSelectProps<Option = {
43
41
  /** Wether the select is required */
44
42
  required?: boolean;
45
43
  }
46
- export declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => React.JSX.Element;
44
+ export declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -1,2 +1,2 @@
1
- export { SingleSelect, SingleSelectProps } from "./SingleSelect";
2
- export { MultiSelect, MultiSelectProps } from "./MultiSelect";
1
+ export * from "./SingleSelect";
2
+ export * from "./MultiSelect";
@@ -1,6 +1,4 @@
1
- import React from "react";
2
- import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
3
- export type SliderProps = {
1
+ export type TSliderProps = {
4
2
  /** The values of the slider. */
5
3
  values: number[];
6
4
  /** The minimum value of the slider. */
@@ -12,11 +10,11 @@ export type SliderProps = {
12
10
  /** The onFinalChange handler of the slider. (called only when the thumb is released) */
13
11
  onFinalChange?: (values: number[]) => void;
14
12
  /** The color of the slider */
15
- color?: ThemeColorsExtended;
13
+ color?: string;
16
14
  /** The color of the section not included in the range */
17
- unselectedColor?: ThemeColorsExtended;
15
+ unselectedColor?: string;
18
16
  /** The color of the thumb */
19
- thumbColor?: ThemeColorsExtended;
17
+ thumbColor?: string;
20
18
  /** The HTML id of the slider */
21
19
  htmlId?: string;
22
20
  /** The class name of the slider */
@@ -32,4 +30,4 @@ export type SliderProps = {
32
30
  /** Wether the thumbs can overlap */
33
31
  allowOverlap?: boolean;
34
32
  };
35
- export declare const Slider: (props: SliderProps) => React.JSX.Element;
33
+ export declare const Slider: (props: TSliderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -1,15 +1,15 @@
1
1
  export declare const OuterTrackDiv: import("@emotion/styled").StyledComponent<{
2
- theme?: import("..").ThemeContextProps;
2
+ theme?: import("@emotion/react").Theme;
3
3
  as?: React.ElementType;
4
4
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
5
  export declare const InnerTrackDiv: import("@emotion/styled").StyledComponent<{
6
- theme?: import("..").ThemeContextProps;
6
+ theme?: import("@emotion/react").Theme;
7
7
  as?: React.ElementType;
8
8
  } & {
9
9
  $bgColor: string;
10
10
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
11
11
  export declare const ThumbDiv: import("@emotion/styled").StyledComponent<{
12
- theme?: import("..").ThemeContextProps;
12
+ theme?: import("@emotion/react").Theme;
13
13
  as?: React.ElementType;
14
14
  } & {
15
15
  $bgColor: string;
@@ -17,7 +17,7 @@ export declare const ThumbDiv: import("@emotion/styled").StyledComponent<{
17
17
  $disabled?: boolean;
18
18
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
19
19
  export declare const ThumbValueSpan: import("@emotion/styled").StyledComponent<{
20
- theme?: import("..").ThemeContextProps;
20
+ theme?: import("@emotion/react").Theme;
21
21
  as?: React.ElementType;
22
22
  } & {
23
23
  $textColor: string;
@@ -1 +1 @@
1
- export { Slider, SliderProps } from "./Slider";
1
+ export * from "./Slider";
@@ -0,0 +1,7 @@
1
+ /** @jsxImportSource @emotion/react */
2
+ import { Column, Table } from "@tanstack/react-table";
3
+ import { TCellValues, TTableRow } from "./TableInterfaces";
4
+ export declare function DebouncedFilter<T extends TTableRow<TCellValues>>({ column, table, }: {
5
+ column: Column<T, unknown>;
6
+ table: Table<T>;
7
+ }): import("@emotion/react/jsx-runtime").JSX.Element;
@@ -0,0 +1,5 @@
1
+ export declare function DebouncedInput({ value: initialValue, onChange, debounce, ...props }: {
2
+ value: string | number;
3
+ onChange: (value: string | number) => void;
4
+ debounce?: number;
5
+ } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">): import("@emotion/react/jsx-runtime").JSX.Element;
@@ -0,0 +1,3 @@
1
+ import { TCellValues, TTableProps, TTableRow } from "./TableInterfaces";
2
+ export declare const Table: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TTableProps<Cell, Row>) => import("@emotion/react/jsx-runtime").JSX.Element;
3
+ export declare const renderCell: (value: string | number | boolean | null) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -0,0 +1,21 @@
1
+ import { ColumnDef } from "@tanstack/react-table";
2
+ export type TCellValues = string | number | boolean | null;
3
+ export type TTableProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = {
4
+ columns: ColumnDef<Row, Cell>[];
5
+ data: Row[] | undefined;
6
+ };
7
+ export type TTableCell<T extends TCellValues> = {
8
+ value: T;
9
+ bgColor?: string | null;
10
+ textColor?: string | null;
11
+ };
12
+ export type TTableRow<T extends TCellValues> = {
13
+ info?: {
14
+ bgColor?: string | null;
15
+ textColor?: string | null;
16
+ [key: string]: string | number | boolean | null | undefined;
17
+ };
18
+ cells: {
19
+ [key: string]: TTableCell<T>;
20
+ };
21
+ };
@@ -0,0 +1,14 @@
1
+ export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
2
+ theme?: import("@emotion/react").Theme;
3
+ as?: React.ElementType;
4
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
+ export declare const StyledTable: import("@emotion/styled").StyledComponent<{
6
+ theme?: import("@emotion/react").Theme;
7
+ as?: React.ElementType;
8
+ } & {
9
+ $mobileBreakpoint: number;
10
+ }, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
11
+ export declare const StyledCell: import("@emotion/styled").StyledComponent<{
12
+ theme?: import("@emotion/react").Theme;
13
+ as?: React.ElementType;
14
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -0,0 +1,2 @@
1
+ export * from "./TableInterfaces";
2
+ export * from "./Table";
@@ -0,0 +1,4 @@
1
+ /** @jsxImportSource @emotion/react */
2
+ import { FC } from "react";
3
+ import { TTagProps } from "./TagInterfaces";
4
+ export declare const Tag: FC<TTagProps>;
@@ -0,0 +1,22 @@
1
+ import { Interpolation } from "@emotion/react";
2
+ import { Theme } from "@emotion/react/dist/declarations/src";
3
+ import { ITagColors } from "../ThemeContext";
4
+ export type TTagProps = {
5
+ text: string;
6
+ /**
7
+ * If `variant` is set to `custom`, `bgColor` and `textColor` will be used.
8
+ * Otherwise, the `variant` will be used to determine the colors.
9
+ *
10
+ * The variants are the keys of the interface `@see ITagColors`, which by default are:
11
+ * - `default`
12
+ * - `warm`
13
+ * - `cold`
14
+ * - `paper`
15
+ */
16
+ variant: keyof ITagColors | "custom";
17
+ /** To use this prop, the variant must be set to `custom` */
18
+ bgColor?: string;
19
+ /** To use this prop, the variant must be set to `custom` */
20
+ textColor?: string;
21
+ sx?: Interpolation<Theme>;
22
+ };
@@ -0,0 +1,7 @@
1
+ export declare const StyledTag: import("@emotion/styled").StyledComponent<{
2
+ theme?: import("@emotion/react").Theme;
3
+ as?: React.ElementType;
4
+ } & {
5
+ $bgColor: string;
6
+ $textColor: string;
7
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
@@ -0,0 +1,2 @@
1
+ export * from "./Tag";
2
+ export * from "./TagInterfaces";
@@ -1,72 +1,6 @@
1
- import React from "react";
2
- export interface Color {
3
- main: string;
4
- contrastText: string;
5
- }
6
- export interface ThemeColorsObject {
7
- primary: Color;
8
- secondary: Color;
9
- tertiary: Color;
10
- statusOk: Color;
11
- statusWarning: Color;
12
- statusCritical: Color;
13
- statusNeutral: Color;
14
- }
15
- export interface ThemeContextProps {
16
- colors: ThemeColorsObject;
17
- }
18
- interface Nothing {
19
- }
20
- type Union<T, U> = T | (U & Nothing);
21
- export type ThemeColors = keyof ThemeColorsObject;
22
- export type ThemeColorsExtended = Union<ThemeColors, string>;
23
- export type ThemeProperties = ThemeContextProps & {
24
- getColor: (color: ThemeColorsExtended) => Color;
25
- };
26
- export declare const defaultThemeColors: {
27
- primary: {
28
- main: string;
29
- contrastText: string;
30
- };
31
- secondary: {
32
- main: string;
33
- contrastText: string;
34
- };
35
- tertiary: {
36
- main: string;
37
- contrastText: string;
38
- };
39
- statusOk: {
40
- main: string;
41
- contrastText: string;
42
- };
43
- statusWarning: {
44
- main: string;
45
- contrastText: string;
46
- };
47
- statusCritical: {
48
- main: string;
49
- contrastText: string;
50
- };
51
- statusNeutral: {
52
- main: string;
53
- contrastText: string;
54
- };
55
- };
56
- export declare const ThemeContextProvider: (props: React.PropsWithChildren<{
57
- theme?: ThemeContextProps;
58
- }>) => React.JSX.Element;
59
- type NestedObject<T> = {
60
- [key: string]: T | NestedObject<T>;
61
- };
62
- /**
63
- * Returns the value of a nested object given a string path
64
- * This function is supposed to be used ONLY to retrieve values from the theme object
65
- *
66
- * @param object the object to search
67
- * @param path a string representing the path to the value
68
- * @returns the value of the nested object
69
- */
70
- export declare function getObjectValueByPath<T>(obj: NestedObject<T>, path: string): T | undefined;
71
- export declare const useThemeContext: () => ThemeProperties;
72
- export {};
1
+ import { PropsWithChildren, ReactNode } from "react";
2
+ import { IPalette, IThemeContextProps, IThemeContextValue } from "./ThemeInterfaces";
3
+ export declare const defaultLightPalette: IPalette;
4
+ export declare const defaultDarkPalette: IPalette;
5
+ export declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: PropsWithChildren<IThemeContextProps>) => ReactNode;
6
+ export declare const useThemeContext: () => IThemeContextValue;
@@ -0,0 +1,109 @@
1
+ export type TColorScale = {
2
+ 50: string;
3
+ 100: string;
4
+ 200: string;
5
+ 300: string;
6
+ 400: string;
7
+ 500: string;
8
+ 600: string;
9
+ 700: string;
10
+ 800: string;
11
+ 900: string;
12
+ 950: string;
13
+ };
14
+ export interface ICommonColors {
15
+ red: TColorScale;
16
+ green: TColorScale;
17
+ blue: TColorScale;
18
+ yellow: TColorScale;
19
+ purple: TColorScale;
20
+ darkBlue: TColorScale;
21
+ orange: TColorScale;
22
+ gray: TColorScale;
23
+ }
24
+ export interface IBackgroundColors {
25
+ main: string;
26
+ radialGradient: string;
27
+ }
28
+ interface ISharedColorProperties {
29
+ /** Represents the color itself */
30
+ main: string;
31
+ /** A slightly different color derived from the main one */
32
+ variant: string;
33
+ }
34
+ export interface IStandardPaletteColor extends ISharedColorProperties {
35
+ /** The color to be used for text and elements that need to contrast with the main / variant */
36
+ contrast: string;
37
+ }
38
+ export interface ITagColors {
39
+ default: {
40
+ main: string;
41
+ text: string;
42
+ };
43
+ warm: {
44
+ main: string;
45
+ text: string;
46
+ };
47
+ cold: {
48
+ main: string;
49
+ text: string;
50
+ };
51
+ paper: {
52
+ main: string;
53
+ text: string;
54
+ };
55
+ }
56
+ export interface IIndicatorColors {
57
+ main: string;
58
+ mainFill: string;
59
+ success: string;
60
+ successFill: string;
61
+ warning: string;
62
+ warningFill: string;
63
+ error: string;
64
+ errorFill: string;
65
+ }
66
+ export interface IPalette {
67
+ /** Application background */
68
+ background: IBackgroundColors;
69
+ /** Primary Brand Color */
70
+ primary: IStandardPaletteColor;
71
+ /** Color config for actions solved with a success */
72
+ success: IStandardPaletteColor;
73
+ /** Color config for actions solved with a warning */
74
+ warning: IStandardPaletteColor;
75
+ /** Color config for actions solved with an error */
76
+ error: IStandardPaletteColor;
77
+ /** Color config for surfaces*/
78
+ surface: IStandardPaletteColor;
79
+ /** Color config for borders */
80
+ border: ISharedColorProperties;
81
+ /** Color config for tags */
82
+ tag: ITagColors;
83
+ /** Color config for indicators */
84
+ indicator: IIndicatorColors;
85
+ }
86
+ export type TThemeMode = "light" | "dark" | "system";
87
+ export interface IThemeContextProps {
88
+ /** From this prop you can override (even partially) the palettes (dark and light) of the library. */
89
+ palettes?: {
90
+ light?: Partial<IPalette>;
91
+ dark?: Partial<IPalette>;
92
+ };
93
+ defaultMode?: TThemeMode;
94
+ }
95
+ export interface IThemeContextValue {
96
+ /** Which mode is currently active */
97
+ mode: TThemeMode;
98
+ /** Which mode is currently displayed.
99
+ * This is useful when the mode is set to "system" and the user has a dark mode preference.
100
+ */
101
+ displayedMode: "light" | "dark";
102
+ /** A collection of common Colors with variants */
103
+ commonColors: ICommonColors;
104
+ /** This will contain the palette of the correct color mode. */
105
+ activePalette: IPalette;
106
+ /** use this function to change the mode */
107
+ setMode: (mode: TThemeMode) => void;
108
+ }
109
+ export {};
@@ -1 +1,2 @@
1
- export { ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeProperties, ThemeContextProvider, useThemeContext, } from "./ThemeContext";
1
+ export * from "./ThemeContext";
2
+ export * from "./ThemeInterfaces";
@@ -0,0 +1,4 @@
1
+ /** @jsxImportSource @emotion/react */
2
+ import { FC } from "react";
3
+ import { TControlledTreeViewProps } from "./TreeViewInterfaces";
4
+ export declare const ControlledTreeView: FC<TControlledTreeViewProps>;
@@ -0,0 +1,3 @@
1
+ import { TTreeViewItem } from "./TreeViewInterfaces";
2
+ export declare const getRootItems: (items: TTreeViewItem[]) => TTreeViewItem[];
3
+ export declare const getChildrenItems: (items: TTreeViewItem[], parentId: string) => TTreeViewItem[];
@@ -0,0 +1,77 @@
1
+ import { Interpolation, Theme } from "@emotion/react";
2
+ /**
3
+ * A callback to customize how items are rendered
4
+ * @property isOpen: A boolean indicating if the item is expanded
5
+ * @property hasChildren: A boolean indicating if the item has children
6
+ * @property item: the entire item object
7
+ */
8
+ export type TCustomRenderProps = {
9
+ isOpen: boolean;
10
+ item: TTreeViewItem;
11
+ };
12
+ /**
13
+ * A callback to customize how the content of the items is rendered
14
+ * @extends TCustomRenderProps
15
+ * @property icon: The icon of the item. If the renderIcon callback is provided, this will be the result of that callback
16
+ * @property title: The title of the item. If the renderTitle callback is provided, this will be the result of that callback
17
+ */
18
+ export type TRenderTriggerProps = TCustomRenderProps & {
19
+ icon: React.ReactNode;
20
+ title: React.ReactNode;
21
+ };
22
+ type TTreeItemFunctions = {
23
+ /** A callback to customize how the titles are rendered */
24
+ renderTitle?: (props: TCustomRenderProps) => React.ReactNode;
25
+ /** A callback to customize how the icons are rendered */
26
+ renderIcon?: (props: TCustomRenderProps) => React.ReactNode;
27
+ /** A callback to customize how the content of the items is rendered */
28
+ renderTrigger?: (props: TRenderTriggerProps) => React.ReactNode;
29
+ /** A callback executed when an item is focused. An item gets focused when you click on it. Focusing and item will also select it. */
30
+ onFocusItem?: (item: TTreeViewItem) => void;
31
+ /** A callback executed when an item is selected. To select an item, ctrl+click on it. */
32
+ onSelectItems?: (item: string[]) => void;
33
+ /** A callback executed when an item is expanded */
34
+ onExpandItem?: (item: TTreeViewItem) => void;
35
+ /** A callback executed when an item is collapsed */
36
+ onCollapseItem?: (item: TTreeViewItem) => void;
37
+ /** A callback to handle the expansion of items without children */
38
+ onMissingChildren?: (item: TTreeViewItem) => void;
39
+ };
40
+ type TTreeViewProps = TTreeItemFunctions & {
41
+ /** An array representing the items that the tree needs to render */
42
+ items: TTreeViewItem[];
43
+ /** Disable multi-selection possibility */
44
+ isMultiSelectionDisabled?: boolean;
45
+ /** Custom styles */
46
+ sx?: Interpolation<Theme>;
47
+ };
48
+ export type TUncontrolledTreeViewProps = TTreeViewProps & {
49
+ items: TTreeViewItem[];
50
+ };
51
+ export type TControlledTreeViewProps = TTreeViewProps & {
52
+ /** The current state of the Tree View. */
53
+ viewState: TViewState;
54
+ };
55
+ export type TViewState = {
56
+ /** The list of ids of items that are selected */
57
+ selectedItems?: string[];
58
+ /** The list of ids of items that are expanded */
59
+ expandedItems?: string[];
60
+ /** The focused item */
61
+ focusedItem?: string;
62
+ };
63
+ export type TTreeViewItem = TTreeItemFunctions & {
64
+ /** Item identifier */
65
+ id: string;
66
+ /** Item name */
67
+ name: string;
68
+ /** The possible children of this item */
69
+ children?: string[];
70
+ /** If the item should be rendered as a folder even with no children */
71
+ isFolder?: boolean;
72
+ /** A callback to fetch children asynchronously */
73
+ childrenAsync?: () => Promise<TTreeViewItem[]>;
74
+ /** Custom styles */
75
+ sx?: Interpolation<Theme>;
76
+ };
77
+ export {};
@@ -0,0 +1,24 @@
1
+ export declare const TreeView: import("@emotion/styled").StyledComponent<{
2
+ theme?: import("@emotion/react").Theme;
3
+ as?: React.ElementType;
4
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
+ export declare const TreeItemsWrapper: import("@emotion/styled").StyledComponent<{
6
+ theme?: import("@emotion/react").Theme;
7
+ as?: React.ElementType;
8
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
9
+ export declare const TreeItemTrigger: import("@emotion/styled").StyledComponent<{
10
+ theme?: import("@emotion/react").Theme;
11
+ as?: React.ElementType;
12
+ } & {
13
+ $isFocused: boolean;
14
+ $isExpanded: boolean;
15
+ $isSelected: boolean;
16
+ }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
17
+ export declare const TreeItemChildren: import("@emotion/styled").StyledComponent<{
18
+ theme?: import("@emotion/react").Theme;
19
+ as?: React.ElementType;
20
+ } & import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & {
21
+ theme?: import("@emotion/react").Theme;
22
+ } & {
23
+ $isExpanded: boolean;
24
+ }, {}, {}>;
@@ -0,0 +1,3 @@
1
+ import { FC } from "react";
2
+ import { TUncontrolledTreeViewProps } from "./TreeViewInterfaces";
3
+ export declare const UncontrolledTreeView: FC<TUncontrolledTreeViewProps>;
@@ -0,0 +1,3 @@
1
+ export * from "./TreeViewInterfaces";
2
+ export * from "./ControlledTreeView";
3
+ export * from "./UncontrolledTreeView";
@@ -1,8 +1,15 @@
1
- export { Button, ButtonProps } from "./Button";
2
- export { ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeProperties, ThemeContextProvider, useThemeContext, } from "./ThemeContext";
3
- export { Accordion, AccordionProps } from "./Accordion";
4
- export { InputField } from "./InputField";
5
- export { SingleSelect, SingleSelectProps, MultiSelect, MultiSelectProps, } from "./SelectFilter";
6
- export { Slider, SliderProps } from "./Slider";
7
- export { Dropdown, DropdownProps, DropdownItem } from "./Dropdown";
8
- export { Modal } from "./Modal";
1
+ export * from "./Button";
2
+ export * from "./ThemeContext";
3
+ export * from "./Accordion";
4
+ export * from "./InputField";
5
+ export * from "./SelectFilter";
6
+ export * from "./Slider";
7
+ export * from "./Dropdown";
8
+ export * from "./Modal";
9
+ export * from "./Indicator";
10
+ export * from "./Tag";
11
+ export * from "./Card";
12
+ export * from "./Table";
13
+ export * from "./MultiViewList";
14
+ export * from "./TreeView";
15
+ export * from "./Drawer";
@@ -0,0 +1,30 @@
1
+ /**
2
+ *
3
+ * @param color the color to get the contrast color for
4
+ * @returns the most readable color between black and white
5
+ */
6
+ export declare const getContrastColor: (color: string) => string;
7
+ /**
8
+ *
9
+ * @param color a color
10
+ * @param strength the strength (0-100) to darken the color
11
+ * @returns the color darkened by the strength
12
+ */
13
+ export declare const darkenColor: (color: string, strength?: number) => string;
14
+ /**
15
+ *
16
+ * @param color a color
17
+ * @param strength the strength (0-100) to lighten the color
18
+ * @returns the color lightened by the strength
19
+ */
20
+ export declare const lightenColor: (color: string, strength?: number) => string;
21
+ /**
22
+ * @param color a color
23
+ * @returns the hover color, based on if the color is dark or light
24
+ */
25
+ export declare const getHoverColor: (color: string) => string;
26
+ /**
27
+ * @param color a color
28
+ * @returns the active color, based on if the color is dark or light
29
+ */
30
+ export declare const getActiveColor: (color: string) => string;
@@ -2,3 +2,4 @@ import useIsMobile from "./isMobile";
2
2
  export { transientOptions } from "./transientOptions";
3
3
  export { styled } from "./styled";
4
4
  export { useIsMobile };
5
+ export { getContrastColor, darkenColor, lightenColor, getHoverColor, getActiveColor } from "./colors";