@foi/design-system 0.0.0 → 0.0.1

package/dist/hocs/ThemeProvider/interfaces/Styles.interface.d.ts

@@ -0,0 +1,54 @@
+export declare enum StyleValues {
+    COLOR_PRIMARY = "color-primary",
+    COLOR_SECONDARY = "color-secondary",
+    COLOR_TERTIARY = "color-tertiary",
+    ICON_COLOR = "icon-color",
+    ICON_BACKGROUND_COLOR = "icon-background-color",
+    BACKGROUND_COLOR = "background-color",
+    SHADOW_COLOR = "shadow-color",
+    WIDTH = "width",
+    HEIGHT = "height",
+    MIN_WIDTH = "min-width",
+    MIN_HEIGHT = "min-height",
+    MAX_WIDTH = "max-width",
+    MAX_HEIGHT = "max-height",
+    BORDER_COLOR = "border-color",
+    BORDER_WIDTH = "border-width",
+    BORDER_RADIUS = "border-radius",
+    BORDER_STYLE = "border-style",
+    OUTLINE_COLOR = "outline-color",
+    OUTLINE_WIDTH = "outline-width",
+    OUTLINE_STYLE = "outline-style",
+    OUTLINE_OFFSET = "outline-offset",
+    TOP = "top",
+    RIGHT = "right",
+    LEFT = "left",
+    BOTTOM = "bottom"
+}
+export interface Styles {
+    [StyleValues.COLOR_PRIMARY]?: string;
+    [StyleValues.COLOR_SECONDARY]?: string;
+    [StyleValues.COLOR_TERTIARY]?: string;
+    [StyleValues.ICON_COLOR]?: string;
+    [StyleValues.ICON_BACKGROUND_COLOR]?: string;
+    [StyleValues.BACKGROUND_COLOR]?: string;
+    [StyleValues.SHADOW_COLOR]?: string;
+    [StyleValues.WIDTH]?: string;
+    [StyleValues.HEIGHT]?: string;
+    [StyleValues.MIN_WIDTH]?: string;
+    [StyleValues.MIN_HEIGHT]?: string;
+    [StyleValues.MAX_WIDTH]?: string;
+    [StyleValues.MAX_HEIGHT]?: string;
+    [StyleValues.BORDER_COLOR]?: string;
+    [StyleValues.BORDER_WIDTH]?: string;
+    [StyleValues.BORDER_RADIUS]?: string;
+    [StyleValues.BORDER_STYLE]?: string;
+    [StyleValues.OUTLINE_COLOR]?: string;
+    [StyleValues.OUTLINE_WIDTH]?: string;
+    [StyleValues.OUTLINE_STYLE]?: string;
+    [StyleValues.OUTLINE_OFFSET]?: string;
+    [StyleValues.TOP]?: string;
+    [StyleValues.RIGHT]?: string;
+    [StyleValues.LEFT]?: string;
+    [StyleValues.BOTTOM]?: string;
+}

package/dist/hocs/ThemeProvider/interfaces/Typography.interface.d.ts

@@ -0,0 +1,10 @@
+export declare enum Typography {
+    FONTFAMILY_PRIMARY = "fontfamily-primary",
+    FONTFAMILY_SECONDARY = "fontfamily-secondary",
+    FONTFAMILY_TERTIARY = "fontfamily-tertiary"
+}
+export interface Props {
+    [Typography.FONTFAMILY_PRIMARY]?: string;
+    [Typography.FONTFAMILY_SECONDARY]?: string;
+    [Typography.FONTFAMILY_TERTIARY]?: string;
+}

package/dist/hocs/ThemeProvider/interfaces/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Components.interface';
+export * from './Events.interface';
+export * from './Styles.interface';
+export * from './Typography.interface';

package/dist/hocs/ThemeProvider/useThemeProvider.hook.d.ts

@@ -0,0 +1,10 @@
+import { Theme, ThemeNames } from './ThemeProvider.interface';
+import { Component } from './interfaces';
+import { createComponentStyles } from './createComponentStyles';
+export { createComponentStyles };
+export declare const useCreateComponentStyles: (components: Array<Component>, events?: object) => {
+    componentStyles: {
+        [x: string]: string;
+    };
+};
+export declare const useCreateThemeStyles: <T extends readonly Theme[]>(themes: T, selectedTheme: ThemeNames<T>) => void;

package/dist/hocs/ThemeProvider/useThemeProvider.store.d.ts

@@ -0,0 +1,2 @@
+import { ThemeProviderStore } from './ThemeProvider.interface';
+export declare const useThemeProviderStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ThemeProviderStore>>;

package/dist/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,10 @@
+import { type DependencyList, type RefObject } from 'react';
+interface UseClickOutsideAlerter {
+    ref: RefObject<Element | null>;
+    isActive: boolean;
+    onAction: () => void;
+    exceptRef?: RefObject<Element | null>;
+    dependencies?: DependencyList;
+}
+export declare const useOnClickOutside: ({ ref, onAction, isActive, exceptRef, dependencies, }: UseClickOutsideAlerter) => void;
+export {};

package/dist/hooks/useStateCallback.d.ts

@@ -0,0 +1 @@
+export declare const useStateCallback: <T>(initialState: T) => [T, (state: T, cb?: (state: T) => void) => void];

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export { default as Button } from './components/atoms/Button';
+export { default as Checkbox } from './components/atoms/Checkbox';
+export { default as DatePicker } from './components/atoms/DatePicker';
+export { default as IconButton } from './components/atoms/IconButton';
+export { default as Input } from './components/atoms/Input';
+export { default as Radio } from './components/atoms/Radio';
+export { default as Select } from './components/atoms/Select';
+export { default as Slider } from './components/atoms/Slider';
+export { default as Switch } from './components/atoms/Switch';
+export { default as CheckboxGroup } from './components/molecules/CheckboxGroup';
+export { default as CheckboxTree } from './components/molecules/CheckboxTree';
+export { default as RadioGroup } from './components/molecules/RadioGroup';
+export { default as ThemeProvider } from './hocs/ThemeProvider';
+export type { Theme } from './hocs/ThemeProvider/ThemeProvider.interface';
+export { darkTheme } from './theme';
+export type { ButtonStyleProps } from './components/atoms/Button/Button.interface';
+export type { CheckboxStyleProps } from './components/atoms/Checkbox/Checkbox.interface';
+export type { DatePickerStyleProps } from './components/atoms/DatePicker/DatePicker.interface';
+export type { IconButtonStyleProps } from './components/atoms/IconButton/IconButton.interface';
+export type { InputStyleProps } from './components/atoms/Input/Input.interface';
+export type { RadioStyleProps } from './components/atoms/Radio/Radio.interface';
+export type { SelectStyleProps } from './components/atoms/Select/Select.interface';
+export type { SliderStyleProps } from './components/atoms/Slider/Slider.interface';
+export type { SwitchStyleProps } from './components/atoms/Switch/Switch.interface';
+export type { CheckboxGroupStyleProps } from './components/molecules/CheckboxGroup/CheckboxGroup.interface';
+export type { CheckboxTreeStyleProps } from './components/molecules/CheckboxTree/CheckboxTree.interface';
+export type { RadioGroupStyleProps } from './components/molecules/RadioGroup/RadioGroup.interface';

package/dist/interfaces/Option.d.ts

@@ -0,0 +1,10 @@
+export interface OptionProp {
+    /** Use label to display a text for a Select row */
+    label: string;
+    /** Use value to give an internal ID to the label prop */
+    value: string;
+}
+export interface MenuOption extends OptionProp {
+    /** Use description to explain the label prop */
+    description?: string;
+}

package/dist/interfaces/index.d.ts

@@ -0,0 +1 @@
+export * from './Option';

package/dist/theme/dark/colors.d.ts

@@ -0,0 +1,31 @@
+export declare const blueChill = "#188aa2";
+export declare const blueDeepAqua = "#0c748a";
+export declare const blueEigengrau = "#0e1621";
+export declare const graySeashell = "#f1f1f1";
+export declare const grayAsh = "#b2bac2";
+export declare const grayGrass = "#989a9b";
+export declare const grayGunmetal = "#495057";
+export declare const darkRed = "#f44336";
+declare const _default: {
+    white400: string;
+    white500: string;
+    white600: string;
+    red100: string;
+    red200: string;
+    red300: string;
+    red400: string;
+    red500: string;
+    gray100: string;
+    gray200: string;
+    gray300: string;
+    gray400: string;
+    gray500: string;
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    darkBlue300: string;
+    darkBlue400: string;
+};
+export default _default;

package/dist/theme/dark/components/Button.d.ts

@@ -0,0 +1,35 @@
+declare const component: {
+    readonly BUTTON: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'background-color': string;
+                readonly 'color-primary': string;
+                readonly 'border-style': "none";
+            };
+            readonly HOVER: {
+                readonly 'background-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'background-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+            readonly DISABLED: {
+                readonly 'background-color': string;
+                readonly 'color-primary': string;
+            };
+            readonly LOADING: {
+                readonly 'background-color': string;
+                readonly 'color-primary': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/Checkbox.d.ts

@@ -0,0 +1,64 @@
+declare const component: {
+    readonly CHECKBOX: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'icon-color': string;
+                readonly 'background-color': "transparent";
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'icon-color': string;
+                readonly 'background-color': string;
+                readonly 'border-color': string;
+            };
+            readonly HOVER: {
+                readonly 'shadow-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'shadow-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+            readonly ERROR: {
+                readonly 'background-color': "transparent";
+                readonly 'color-secondary': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_VALUE: {
+                readonly 'icon-color': string;
+                readonly 'background-color': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_HOVER: {
+                readonly 'shadow-color': string;
+            };
+            readonly ERROR_ACTIVE: {
+                readonly 'shadow-color': string;
+            };
+            readonly ERROR_FOCUS: {
+                readonly 'outline-color': string;
+            };
+            readonly DISABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-secondary': string;
+                readonly 'border-color': string;
+            };
+            readonly DISABLED_VALUE: {
+                readonly 'icon-color': string;
+                readonly 'background-color': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/CheckboxGroup.d.ts

@@ -0,0 +1,18 @@
+declare const component: {
+    readonly CHECKBOXGROUP: {
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+            };
+            readonly ERROR: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+            };
+            readonly DISABLED: {
+                readonly 'color-secondary': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/CheckboxTree.d.ts

@@ -0,0 +1,17 @@
+declare const component: {
+    readonly CHECKBOXTREE: {
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+            };
+            readonly ERROR: {
+                readonly 'color-secondary': string;
+            };
+            readonly DISABLED: {
+                readonly 'color-secondary': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/DatePicker.d.ts

@@ -0,0 +1,58 @@
+declare const component: {
+    readonly DATEPICKER: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly DISABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly DISABLED_VALUE: {};
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/DatePickerMenu.d.ts

@@ -0,0 +1,31 @@
+declare const component: {
+    readonly DATEPICKERMENU: {
+        readonly ROOT: {
+            readonly 'background-color': string;
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'background-color': string;
+            };
+            readonly VALUE: {
+                readonly 'background-color': string;
+            };
+            readonly HOVER: {
+                readonly 'background-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'background-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/IconButton.d.ts

@@ -0,0 +1,30 @@
+declare const component: {
+    readonly ICONBUTTON: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'icon-color': string;
+                readonly 'background-color': "transparent";
+                readonly 'border-style': "none";
+            };
+            readonly HOVER: {
+                readonly 'shadow-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'shadow-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+            readonly DISABLED: {
+                readonly 'icon-color': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/Input.d.ts

@@ -0,0 +1,58 @@
+declare const component: {
+    readonly INPUT: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly DISABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly DISABLED_VALUE: {};
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/Radio.d.ts

@@ -0,0 +1,61 @@
+declare const component: {
+    readonly RADIO: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'icon-color': string;
+                readonly 'background-color': "transparent";
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'icon-color': string;
+                readonly 'border-color': string;
+            };
+            readonly HOVER: {
+                readonly 'shadow-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'shadow-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+            readonly ERROR: {
+                readonly 'background-color': "transparent";
+                readonly 'color-secondary': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_VALUE: {
+                readonly 'icon-color': string;
+                readonly 'background-color': string;
+            };
+            readonly ERROR_HOVER: {
+                readonly 'shadow-color': string;
+            };
+            readonly ERROR_ACTIVE: {
+                readonly 'shadow-color': string;
+            };
+            readonly ERROR_FOCUS: {
+                readonly 'outline-color': string;
+            };
+            readonly DISABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-secondary': string;
+                readonly 'border-color': string;
+            };
+            readonly DISABLED_VALUE: {
+                readonly 'icon-color': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/RadioGroup.d.ts

@@ -0,0 +1,18 @@
+declare const component: {
+    readonly RADIOGROUP: {
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+            };
+            readonly ERROR: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+            };
+            readonly DISABLED: {
+                readonly 'color-secondary': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/Select.d.ts

@@ -0,0 +1,58 @@
+declare const component: {
+    readonly SELECT: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly DISABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly DISABLED_VALUE: {};
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/SelectMenu.d.ts

@@ -0,0 +1,30 @@
+declare const component: {
+    readonly SELECTMENU: {
+        readonly ROOT: {
+            readonly 'background-color': string;
+            readonly 'border-radius': "4px";
+            readonly top: "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+            };
+            readonly VALUE: {
+                readonly 'background-color': string;
+            };
+            readonly HOVER: {
+                readonly 'background-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'background-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'background-color': string;
+            };
+        };
+    };
+};
+export default component;