@infomaximum/ui-kit 0.9.1

package/dist/contexts/themeContext.d.ts

@@ -0,0 +1,354 @@
+export declare const ThemeContext: import('react').Context<{
+    opacityLoading: "65%";
+    iconXS: 8;
+    iconS: 12;
+    iconM: 16;
+    iconL: 24;
+    iconXL: 32;
+    borderRadiusM: 4;
+    borderRadiusL: 8;
+    spaceXS: 4;
+    spaceM: 8;
+    spaceL: 12;
+    spaceXL: 16;
+    marginXS: 4;
+    marginS: 6;
+    marginM: 8;
+    marginL: 12;
+    paddingXS: 4;
+    paddingS: 6;
+    paddingM: 8;
+    paddingL: 12;
+    paddingXL: 16;
+    controlInteractiveSize: 16;
+    controlHeightM: 28;
+    positiveBase: "#52C41A";
+    positiveHover: "#73D13D";
+    positiveActive: "#389E0D";
+    positiveBg: "#F6FFED";
+    positiveBorder: "#B7EB8F";
+    positiveHoverInverse: "#F6FFED";
+    positiveActiveInverse: "#D9F7BE";
+    fieldFocused: `rgba(${number}, ${number}, ${number}, 0.5)`;
+    fieldFocusedDanger: `rgba(${number}, ${number}, ${number}, 0.5)`;
+    tagNeutralText: "#262626";
+    tagNeutralBg: "#F5F5F5";
+    tagNeutralBorder: "#D9D9D9";
+    tagNeutralContrast: "#8C8C8C";
+    tagRedText: "#F5222D";
+    tagRedBg: "#FFF1F0";
+    tagRedBorder: "#FFA39E";
+    tagRedContrast: "#F5222D";
+    tagOrangeText: "#FA8C16";
+    tagOrangeBg: "#FFF7E6";
+    tagOrangeBorder: "#FFD591";
+    tagOrangeContrast: "#FA8C16";
+    tagYellowText: "#D4B106";
+    tagYellowBg: "#FEFFE6";
+    tagYellowBorder: "#FFEC3D";
+    tagYellowContrast: "#D4B106";
+    tagGreenText: "#52C41A";
+    tagGreenBg: "#F6FFED";
+    tagGreenBorder: "#B7EB8F";
+    tagGreenContrast: "#52C41A";
+    tagCyanText: "#13C2C2";
+    tagCyanBg: "#E6FFFB";
+    tagCyanBorder: "#87E8DE";
+    tagCyanContrast: "#13C2C2";
+    tagBlueText: "#1677FF";
+    tagBlueBg: "#E6F4FF";
+    tagBlueBorder: "#91CAFF";
+    tagBlueContrast: "#1677FF";
+    tagPurpleText: "#722ED1";
+    tagPurpleBg: "#F9F0FF";
+    tagPurpleBorder: "#D3ADF7";
+    tagPurpleContrast: "#722ED1";
+    tagMagentaText: "#EB2F96";
+    tagMagentaBg: "#FFF0F6";
+    tagMagentaBorder: "#FFADD2";
+    tagMagentaContrast: "#EB2F96";
+    infoBase: "#1677FF";
+    infoHover: "#4096FF";
+    infoActive: "#0958D9";
+    infoBg: "#E6F4FF";
+    infoBorder: "#91CAFF";
+    infoHoverInverse: "#E6F4FF";
+    infoActiveInverse: "#BAE0FF";
+    warningBase: "#FA8C16";
+    warningHover: "#FFA940";
+    warningActive: "#D46B08";
+    warningBg: "#FFF7E6";
+    warningBorder: "#FFD591";
+    warningHoverInverse: "#FFF7E6";
+    warningActiveInverse: "#FFE7BA";
+    dangerBase: "#FF4D4F";
+    dangerHover: "#FF7875";
+    dangerActive: "#CF1322";
+    dangerBg: "#FFF1F0";
+    dangerBorder: "#FFA39E";
+    dangerHoverInverse: "#FFF1F0";
+    dangerActiveInverse: "#FFCCC7";
+    lineDivider: "#E5E5E5";
+    lineBorder: "#D9D9D9";
+    lineBorderTransparent: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    lineBorderTransparentContrast: `rgba(${number}, ${number}, ${number}, 0.3)`;
+    bgPrimary: "#FFFFFF";
+    bgComplimentary: "#FAFAFA";
+    bgSecondary: "#F0F0F0";
+    bgContainer: "#FFFFFF";
+    bgContainerHover: "#F5F5F5";
+    bgContainerActive: "#D9D9D9";
+    bgContainerDisabled: "#F0F0F0";
+    bgContainerDisabledContrast: "#D9D9D9";
+    bgContainerComplimentary: "#FAFAFA";
+    bgContainerInverse: "#262626";
+    bgContainerInverseHover: "#434343";
+    bgContainerInverseActive: "#1F1F1F";
+    bgControl: "#BFBFBF";
+    bgControlHover: "#8C8C8C";
+    bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
+    bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
+    bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    bgFloat: "#FFFFFF";
+    bgFloatContrast: "#262626";
+    bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
+    textPrimary: "#262626";
+    textComplimentary: "#595959";
+    textSecondary: "#8C8C8C";
+    textDisabled: "#8C8C8C";
+    textContrast: "#FFFFFF";
+    textIcon: `rgba(${number}, ${number}, ${number}, 0.3)`;
+    textIconHover: `rgba(${number}, ${number}, ${number}, 0.7)`;
+    textIconDisabled: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    textIconContrast: `rgba(${number}, ${number}, ${number}, 0.8)`;
+    textIconContrastHover: "#FFFFFF";
+    textIconContrastDisabled: `rgba(${number}, ${number}, ${number}, 0.3)`;
+    textHint: "#BFBFBF";
+    textLink: "#0CB3B3";
+    textLinkHover: "#50CCC4";
+    textLinkActive: "#03888C";
+    primaryBase: "#0CB3B3";
+    primaryHover: "#50CCC4";
+    primaryActive: "#03888C";
+    primaryBg: "#E1FAF6";
+    primaryBorder: "#77D9CF";
+    primaryHoverInverse: "#E1FAF6";
+    primaryActiveInverse: "#A3E6DD";
+    typography: {
+        readonly header1: {
+            readonly fontFamily: "Roboto";
+            readonly fontSize: 24;
+            readonly lineHeight: "32px";
+        };
+        readonly header2: {
+            readonly fontFamily: "Roboto";
+            readonly fontSize: 16;
+            readonly lineHeight: "24px";
+        };
+        readonly subheader1: {
+            readonly fontFamily: "Roboto";
+            readonly fontSize: 14;
+            readonly lineHeight: "20px";
+        };
+        readonly subheader2: {
+            readonly fontFamily: "Roboto";
+            readonly fontSize: 12;
+            readonly lineHeight: "20px";
+        };
+        readonly body1: {
+            readonly fontFamily: "Roboto";
+            readonly fontSize: 16;
+            readonly lineHeight: "24px";
+        };
+        readonly body2: {
+            readonly fontFamily: "Roboto";
+            readonly fontSize: 14;
+            readonly lineHeight: "20px";
+        };
+        readonly body3: {
+            readonly fontFamily: "Roboto";
+            readonly fontSize: 12;
+            readonly lineHeight: "20px";
+        };
+        readonly code1: {
+            readonly fontFamily: "JetBrains-Mono";
+            readonly fontSize: 13;
+            readonly lineHeight: "18px";
+        };
+    };
+    shadow1: `0 1px 2px -2px rgba(${number}, ${number}, ${number}, 0.16), 0 3px 6px 0 rgba(${number}, ${number}, ${number}, 0.12), 0 5px 12px 4px rgba(${number}, ${number}, ${number}, 0.09)`;
+    shadow2: `0 3px 6px -4px rgba(${number}, ${number}, ${number}, 0.12), 0 6px 16px 0 rgba(${number}, ${number}, ${number}, 0.08), 0 9px 28px 8px rgba(${number}, ${number}, ${number}, 0.05)`;
+    shadow3: `0 6px 16px -8px rgba(${number}, ${number}, ${number}, 0.08), 0 9px 28px 0 rgba(${number}, ${number}, ${number}, 0.05), 0 12px 48px 16px rgba(${number}, ${number}, ${number}, 0.03)`;
+    x0: 0;
+    x05: 2;
+    x1: 4;
+    x1AndHalf: 6;
+    x2: 8;
+    x3: 12;
+    x3AndHalf: 14;
+    x4: 16;
+    x5: 20;
+    x6: 24;
+    x7: 28;
+    x8: 32;
+    x10: 40;
+    x12: 48;
+    x16: 64;
+    magenta100: "#520339";
+    magenta90: "#780650";
+    magenta80: "#9E1068";
+    magenta70: "#C41D7F";
+    magenta60: "#EB2F96";
+    magenta50: "#F759AB";
+    magenta40: "#FF85C0";
+    magenta30: "#FFADD2";
+    magenta20: "#FFD6E7";
+    magenta10: "#FFF0F6";
+    purple100: "#120338";
+    purple90: "#22075E";
+    purple80: "#391085";
+    purple70: "#531DAB";
+    purple60: "#722ED1";
+    purple50: "#9254DE";
+    purple40: "#B37FEB";
+    purple30: "#D3ADF7";
+    purple20: "#EFDBFF";
+    purple10: "#F9F0FF";
+    blue100: "#001D66";
+    blue90: "#002C8C";
+    blue80: "#003EB3";
+    blue70: "#0958D9";
+    blue60: "#1677FF";
+    blue50: "#4096FF";
+    blue40: "#69B1FF";
+    blue30: "#91CAFF";
+    blue20: "#BAE0FF";
+    blue10: "#E6F4FF";
+    cyan100: "#002329";
+    cyan90: "#00474F";
+    cyan80: "#006D75";
+    cyan70: "#08979C";
+    cyan60: "#13C2C2";
+    cyan50: "#36CFC9";
+    cyan40: "#5CDBD3";
+    cyan30: "#87E8DE";
+    cyan20: "#B5F5EC";
+    cyan10: "#E6FFFB";
+    green100: "#092B00";
+    green90: "#135200";
+    green80: "#237804";
+    green70: "#389E0D";
+    green60: "#52C41A";
+    green50: "#73D13D";
+    green40: "#95DE64";
+    green30: "#B7EB8F";
+    green20: "#D9F7BE";
+    green10: "#F6FFED";
+    lime100: "#254000";
+    lime90: "#254000";
+    lime80: "#254000";
+    lime70: "#254000";
+    lime60: "#254000";
+    lime50: "#254000";
+    lime40: "#254000";
+    lime30: "#254000";
+    lime20: "#254000";
+    lime10: "#254000";
+    yellow100: "#614700";
+    yellow90: "#876800";
+    yellow80: "#AD8B00";
+    yellow70: "#D4B106";
+    yellow60: "#FADB14";
+    yellow50: "#FFEC3D";
+    yellow40: "#FFF566";
+    yellow30: "#FFFB8F";
+    yellow20: "#FFFFB8";
+    yellow10: "#FEFFE6";
+    gold100: "#613400";
+    gold90: "#613400";
+    gold80: "#613400";
+    gold70: "#613400";
+    gold60: "#613400";
+    gold50: "#613400";
+    gold40: "#613400";
+    gold30: "#613400";
+    gold20: "#613400";
+    gold10: "#613400";
+    orange100: "#612500";
+    orange90: "#873800";
+    orange80: "#AD4E00";
+    orange70: "#D46B08";
+    orange60: "#FA8C16";
+    orange50: "#FFA940";
+    orange40: "#FFC069";
+    orange30: "#FFD591";
+    orange20: "#FFE7BA";
+    orange10: "#FFF7E6";
+    volcano100: "#610B00";
+    volcano90: "#871400";
+    volcano80: "#AD2102";
+    volcano70: "#D4380D";
+    volcano60: "#FA541C";
+    volcano50: "#FF7A45";
+    volcano40: "#FF9C6E";
+    volcano30: "#FFBB96";
+    volcano20: "#FFD8BF";
+    volcano10: "#FFF2E8";
+    red100: "#5C0011";
+    red90: "#820014";
+    red80: "#A8071A";
+    red70: "#CF1322";
+    red60: "#F5222D";
+    red50: "#FF4D4F";
+    red40: "#FF7875";
+    red30: "#FFA39E";
+    red20: "#FFCCC7";
+    red10: "#FFF1F0";
+    thrush100: "#00161A";
+    thrush90: "#003940";
+    thrush80: "#005F66";
+    thrush70: "#03888C";
+    thrush60: "#0CB3B3";
+    thrush50: "#2CBFBA";
+    thrush40: "#50CCC4";
+    thrush30: "#77D9CF";
+    thrush20: "#A3E6DD";
+    thrush10: "#E1FAF6";
+    transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
+    transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
+    transparentWhite70: `rgba(${number}, ${number}, ${number}, 0.7)`;
+    transparentWhite60: `rgba(${number}, ${number}, ${number}, 0.6)`;
+    transparentWhite50: `rgba(${number}, ${number}, ${number}, 0.5)`;
+    transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
+    transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
+    transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
+    transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
+    transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
+    transparentBlack70: `rgba(${number}, ${number}, ${number}, 0.7)`;
+    transparentBlack60: `rgba(${number}, ${number}, ${number}, 0.6)`;
+    transparentBlack50: `rgba(${number}, ${number}, ${number}, 0.5)`;
+    transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
+    transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
+    transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+    transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+    transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
+    neutral130: "#000000";
+    neutral120: "#141414";
+    neutral110: "#1F1F1F";
+    neutral100: "#262626";
+    neutral90: "#434343";
+    neutral80: "#595959";
+    neutral75: "#737373";
+    neutral70: "#8C8C8C";
+    neutral65: "#ABABAB";
+    neutral60: "#BFBFBF";
+    neutral50: "#D9D9D9";
+    neutral45: "#E5E5E5";
+    neutral40: "#F0F0F0";
+    neutral30: "#F5F5F5";
+    neutral20: "#FAFAFA";
+    neutral10: "#FFFFFF";
+}>;

package/dist/contexts/themeContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import { lightTheme } from "../themes/themes.utils.js";
+const ThemeContext = createContext(lightTheme);
+export {
+  ThemeContext
+};

package/dist/docComponents/Demonstration/Demonstration.d.ts

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from 'react';
+import { DemonstrationVerticalInnerProps } from './Demonstration.types';
+export declare const Demonstration: FC<PropsWithChildren>;
+export declare const DemonstrationVerticalInner: FC<DemonstrationVerticalInnerProps>;

package/dist/docComponents/Demonstration/Demonstration.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const demonstrationStyle: {
+    padding: string;
+};
+export declare const demonstrationVerticalInnerStyle: {
+    readonly display: "inline-flex";
+    readonly flexDirection: "column";
+    readonly rowGap: 16;
+    readonly alignItems: "start";
+};

package/dist/docComponents/Demonstration/Demonstration.types.d.ts

@@ -0,0 +1,5 @@
+import { Interpolation } from '@emotion/react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export type DemonstrationVerticalInnerProps = PropsWithChildren & {
+    css?: Interpolation;
+} & Pick<HTMLAttributes<HTMLElement>, "className">;

package/dist/docComponents/Description/Description.d.ts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const DescriptionComponent: FC<PropsWithChildren>;
+export declare const Description: FC<{
+    children?: import('react').ReactNode | undefined;
+}>;

package/dist/docComponents/Description/Description.style.d.ts

@@ -0,0 +1,26 @@
+import { Theme } from 'themes';
+export declare const descriptionStyle: (theme: Theme) => {
+    readonly padding: "24px 48px";
+    readonly background: "#FAFAFA";
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly gap: "24px";
+    readonly ".docblock-source.sb-unstyled": {
+        readonly margin: 0;
+    };
+    readonly "p, span": {
+        readonly color: "inherit";
+        readonly fontWeight: 400;
+        readonly margin: 0;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 14;
+        readonly lineHeight: "20px";
+    };
+    readonly h4: {
+        readonly color: "#262626";
+        readonly fontWeight: 500;
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 16;
+        readonly lineHeight: "24px";
+    };
+};

package/dist/docComponents/Doc/Doc.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+export declare const Doc: FC<{
+    children?: import('react').ReactNode | undefined;
+}>;

package/dist/docComponents/Doc/Doc.style.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from 'themes';
+export declare const docStyle: (theme: Theme) => {
+    readonly ".blue": {
+        readonly color: "#1677FF";
+    };
+    readonly fontFamily: "Roboto";
+    readonly fontSize: 14;
+    readonly lineHeight: "20px";
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly gap: 48;
+    readonly color: "#595959";
+};

package/dist/docComponents/Example/Example.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+export declare const Example: FC<{
+    children?: import('react').ReactNode | undefined;
+}>;

package/dist/docComponents/Example/Example.styles.d.ts

@@ -0,0 +1,9 @@
+import { Theme } from 'themes';
+export declare const exampleStyle: (theme: Theme) => {
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly borderRadius: 12;
+    readonly border: "1px solid #D9D9D9";
+    readonly background: "#FFFFFF";
+    readonly overflow: "hidden";
+};

package/dist/hocs/withThemeProvider.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const withThemeProvider: <Props>(Component: FC) => FC<PropsWithChildren<Props>>;

package/dist/hocs/withThemeProvider.js

@@ -0,0 +1,11 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createElement } from "@emotion/react";
+import { lightTheme } from "../themes/themes.utils.js";
+import { ThemeProvider } from "../providers/ThemeProvider/ThemeProvider.js";
+const withThemeProvider = (Component) => {
+  const WithThemeProvider = (props) => /* @__PURE__ */ jsx(ThemeProvider, { theme: lightTheme, children: /* @__PURE__ */ createElement(Component, { ...props, key: "ComponentWithThemeProvider" }) });
+  return WithThemeProvider;
+};
+export {
+  withThemeProvider
+};

package/dist/hooks/useDebounce.d.ts

@@ -0,0 +1,3 @@
+type ResultType = [string, string, (value: string) => void];
+export declare const useDebounce: (initValue: string, delay: number) => ResultType;
+export {};

package/dist/hooks/useDebounce.js

@@ -0,0 +1,27 @@
+import { isNull } from "lodash-es";
+import { useState, useRef, useEffect } from "react";
+const useDebounce = (initValue, delay) => {
+  const [value, setValue] = useState(initValue);
+  const [debouncedValue, setDebouncedValue] = useState(initValue);
+  const timer = useRef(null);
+  useEffect(() => {
+    if (!isNull(timer.current)) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    timer.current = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      if (isNull(timer.current)) {
+        return;
+      }
+      clearTimeout(timer.current);
+      timer.current = null;
+    };
+  }, [value, delay]);
+  return [debouncedValue, value, setValue];
+};
+export {
+  useDebounce
+};

package/dist/hooks/useForceUpdate.d.ts

@@ -0,0 +1 @@
+export declare const useForceUpdate: () => () => void;

package/dist/hooks/useForceUpdate.js

@@ -0,0 +1,9 @@
+import { useState, useCallback } from "react";
+const useForceUpdate = () => {
+  const [, updateState] = useState({});
+  const forceUpdate = useCallback(() => updateState({}), []);
+  return forceUpdate;
+};
+export {
+  useForceUpdate
+};

package/dist/hooks/useLoadingDelay.d.ts

@@ -0,0 +1,6 @@
+export declare const useLoadingDelay: (loading: boolean | {
+    delay: number;
+}) => {
+    currentLoading: boolean;
+    isDelay: boolean;
+};

package/dist/hooks/useLoadingDelay.js

@@ -0,0 +1,34 @@
+import { isObject } from "lodash-es";
+import { useState, useRef, useEffect } from "react";
+const useLoadingDelay = (loading) => {
+  const [currentLoading, setCurrentLoading] = useState(false);
+  const [isDelay, setIsDelay] = useState(false);
+  const timer = useRef(void 0);
+  useEffect(() => {
+    if (!loading) {
+      setCurrentLoading(false);
+      setIsDelay(false);
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+      return;
+    }
+    if (isObject(loading) && loading.delay) {
+      setIsDelay(true);
+      timer.current = setTimeout(() => {
+        setCurrentLoading(true);
+        setIsDelay(false);
+        timer.current = void 0;
+      }, loading.delay);
+      return;
+    }
+    setCurrentLoading(true);
+  }, [loading]);
+  return {
+    currentLoading,
+    isDelay
+  };
+};
+export {
+  useLoadingDelay
+};

package/dist/hooks/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare const usePrevious: <T>(value: T) => T | undefined;

package/dist/hooks/usePrevious.js

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from "react";
+const usePrevious = (value) => {
+  const previous = useRef();
+  useEffect(() => {
+    previous.current = value;
+  });
+  return previous.current;
+};
+export {
+  usePrevious
+};

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1 @@
+export declare function useResizeObserver(elementRef: React.RefObject<Element>, cb: ResizeObserverCallback): void;

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useLayoutEffect } from "react";
+function useLatest(val) {
+  const valueRef = useRef(val);
+  useLayoutEffect(() => {
+    valueRef.current = val;
+  }, [val]);
+  return valueRef;
+}
+function useResizeObserver(elementRef, cb) {
+  const latestCb = useLatest(cb);
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    const observer = new ResizeObserver((...args) => {
+      latestCb.current(...args);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [latestCb]);
+}
+export {
+  useResizeObserver
+};

package/dist/hooks/useTheme/index.d.ts

@@ -0,0 +1 @@
+export { useTheme } from './useTheme';