@scality/core-ui 0.115.0

package/dist/components/toast/DurationBasedProgressBar.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function DurationBasedProgressBar({ duration, color, }: {
+    duration: number | null;
+    color: string;
+}): JSX.Element;
+//# sourceMappingURL=DurationBasedProgressBar.d.ts.map

package/dist/components/toast/DurationBasedProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DurationBasedProgressBar.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/DurationBasedProgressBar.tsx"],"names":[],"mappings":";AAIA,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,eAkCA"}

package/dist/components/toast/DurationBasedProgressBar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { darken } from 'polished';
+import { useEffect, useState } from 'react';
+import { ProgressBar } from '../progressbar/ProgressBar.component';
+export function DurationBasedProgressBar({ duration, color, }) {
+    const [progress, setProgress] = useState(0);
+    useEffect(() => {
+        if (duration) {
+            const interval = setInterval(() => {
+                setProgress((prevProgress) => prevProgress + (100 / duration) * 1000);
+            }, 1000);
+            return () => {
+                clearInterval(interval);
+            };
+        }
+    }, [duration]);
+    return (_jsx("div", { style: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            width: '100%',
+            borderRadius: 4,
+        }, children: _jsx(ProgressBar, { size: "custom", percentage: progress, color: color, backgroundColor: `${darken(0.1, color)}`, height: '4px' }) }));
+}

package/dist/components/toast/Toast.component.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import { ToastPosition } from './ToastPositionHelpers';
+export type ToastStatus = 'success' | 'error' | 'warning' | 'info';
+export type ToastProps = {
+    open: boolean;
+    message: ReactNode;
+    onClose: () => void;
+    status?: ToastStatus;
+    position?: ToastPosition;
+    autoDismiss?: boolean;
+    duration?: number;
+    icon?: React.ReactNode;
+    width?: React.CSSProperties['width'];
+    withProgressBar?: boolean;
+    style?: React.CSSProperties;
+};
+export declare const useGetBackgroundColor: (status: string) => string;
+declare function Toast({ open, message, onClose, position, status, autoDismiss, duration, icon, width, withProgressBar, style, }: ToastProps): JSX.Element | null;
+export { Toast };
+//# sourceMappingURL=Toast.component.d.ts.map

package/dist/components/toast/Toast.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/Toast.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,aAAa,EAAkB,MAAM,wBAAwB,CAAC;AAKvE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,WAAY,MAAM,WAYnD,CAAC;AA6DF,iBAAS,KAAK,CAAC,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAsB,EACtB,MAAe,EACf,WAAkB,EAClB,QAAe,EACf,IAAsC,EACtC,KAAqB,EACrB,eAAuB,EACvB,KAAK,GACN,EAAE,UAAU,sBAiEZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/toast/Toast.component.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+import { useRef } from 'react';
+import { useTheme } from 'styled-components';
+import { Box } from '../box/Box';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+import { BasicText } from '../text/Text.component';
+import { positionOutput } from './ToastPositionHelpers';
+import { DurationBasedProgressBar } from './DurationBasedProgressBar';
+import { useToastParameters } from './useToastParameters';
+import styled from 'styled-components';
+export const useGetBackgroundColor = (status) => {
+    const theme = useTheme();
+    switch (status) {
+        case 'success':
+            return theme.statusHealthy;
+        case 'error':
+            return theme.statusCritical;
+        case 'warning':
+            return theme.statusWarning;
+        default:
+            return theme.infoPrimary;
+    }
+};
+const useGetRgbBackgroundColor = (status) => {
+    const theme = useTheme();
+    switch (status) {
+        case 'success':
+            return `rgba(${theme.statusHealthyRGB}, 0.4)`;
+        case 'error':
+            return `rgba(${theme.statusCriticalRGB}, 0.4)`;
+        case 'warning':
+            return `rgba(${theme.statusWarningRGB}, 0.4)`;
+        default:
+            return theme.infoSecondary;
+    }
+};
+const defaultIconName = (status) => {
+    switch (status) {
+        case 'success':
+            return 'Check-circle';
+        case 'error':
+            return 'Times-circle';
+        case 'warning':
+            return 'Exclamation-circle';
+        default:
+            return 'Info-circle';
+    }
+};
+const DefaultIcon = ({ status }) => {
+    const color = useGetBackgroundColor(status);
+    const iconName = defaultIconName(status);
+    return _jsx(Icon, { name: iconName, color: color });
+};
+const DEFAULT_WIDTH = '25rem';
+const IconContainer = styled.div `
+  align-items: center;
+  align-self: stretch;
+  border-radius: 4px 0px 0px 4px;
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  position: relative;
+  width: 32px;
+  background-color: ${(props) => props.bgColor};
+`;
+const ContentContainer = styled.div `
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex: 1;
+  flex-grow: 1;
+  gap: 8px;
+  padding: 0px 16px;
+  position: relative;
+`;
+function Toast({ open, message, onClose, position = 'top-right', status = 'info', autoDismiss = true, duration = 5000, icon = _jsx(DefaultIcon, { status: status }), width = DEFAULT_WIDTH, withProgressBar = false, style, }) {
+    const ref = useRef(null);
+    const { params } = useToastParameters({
+        open,
+        duration: autoDismiss ? duration : null,
+        onClose,
+    });
+    const positionStyle = positionOutput[position];
+    const bgColor = useGetBackgroundColor(status);
+    const rgbBgColor = useGetRgbBackgroundColor(status);
+    const theme = useTheme();
+    if (!open) {
+        return null;
+    }
+    return (_jsxs("div", { ref: ref, role: "status", "aria-live": "polite", style: {
+            position: 'fixed',
+            ...(style || positionStyle),
+            width,
+        }, children: [_jsxs(motion.div, { initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 20 }, transition: { duration: 0.3 }, style: {
+                    alignItems: 'flex-end',
+                    backgroundColor: theme.backgroundLevel1,
+                    border: `1px solid ${theme.border}`,
+                    boxShadow: '0px 4px 10px 4px #000',
+                    display: 'flex',
+                    borderRadius: '4px',
+                    position: 'relative',
+                }, children: [_jsx(IconContainer, { bgColor: rgbBgColor, children: icon }), _jsx(ContentContainer, { children: _jsx(BasicText, { children: message }) }), _jsx(Box, { display: "flex", alignItems: "center", alignSelf: "stretch", children: _jsx(Button, { icon: _jsx(Icon, { name: "Close", size: "lg", color: "textSecondary" }), onClick: params === null || params === void 0 ? void 0 : params.onClose, "aria-label": "Close" }) })] }, "toast"), withProgressBar && (_jsx(DurationBasedProgressBar, { duration: autoDismiss ? duration : null, color: bgColor }))] }));
+}
+export { Toast };

package/dist/components/toast/ToastPositionHelpers.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+export type ToastPosition = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+export declare const positionOutput: Record<ToastPosition, CSSProperties>;
+//# sourceMappingURL=ToastPositionHelpers.d.ts.map

package/dist/components/toast/ToastPositionHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastPositionHelpers.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/ToastPositionHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,WAAW,GACX,YAAY,GACZ,aAAa,GACb,cAAc,GACd,eAAe,CAAC;AAEpB,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,aAAa,EAAE,aAAa,CA2B/D,CAAC"}

package/dist/components/toast/ToastPositionHelpers.js

@@ -0,0 +1,28 @@
+export const positionOutput = {
+    'top-left': {
+        top: '3rem',
+        left: '1rem',
+    },
+    'top-right': {
+        top: '3rem',
+        right: '1rem',
+    },
+    'top-center': {
+        top: '1rem',
+        left: '50%',
+        transform: 'translateX(-50%)',
+    },
+    'bottom-left': {
+        bottom: '1rem',
+        left: '1rem',
+    },
+    'bottom-right': {
+        bottom: '1rem',
+        right: '1rem',
+    },
+    'bottom-center': {
+        bottom: '1rem',
+        left: '50%',
+        transform: 'translateX(-50%)',
+    },
+};

package/dist/components/toast/ToastProvider.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ToastProps } from './Toast.component';
+export type ToastContextState = Omit<ToastProps, 'onClose'>;
+export interface ToastContextType {
+    showToast: (toastProps: ToastContextState) => void;
+}
+export declare const ToastContext: import("react").Context<ToastContextType | undefined>;
+interface ToastProviderProps {
+    children: ReactNode;
+}
+export declare const ToastProvider: React.FC<ToastProviderProps>;
+export declare const useToast: () => ToastContextType;
+export {};
+//# sourceMappingURL=ToastProvider.d.ts.map

package/dist/components/toast/ToastProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuC,MAAM,OAAO,CAAC;AACvE,OAAO,EAAS,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAE5D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,CAAC,UAAU,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,YAAY,uDAExB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAetD,CAAC;AAEF,eAAO,MAAM,QAAQ,wBAMpB,CAAC"}

package/dist/components/toast/ToastProvider.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import { Toast } from './Toast.component';
+export const ToastContext = createContext(undefined);
+export const ToastProvider = ({ children }) => {
+    const [toastProps, setToastProps] = useState(null);
+    const showToast = (toastProps) => {
+        setToastProps(toastProps);
+    };
+    return (_jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toastProps && (_jsx(Toast, { ...toastProps, onClose: () => setToastProps(null) }))] }));
+};
+export const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return context;
+};

package/dist/components/toast/useMutationsHandler.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { UseMutationOptions, UseMutationResult } from 'react-query';
+import { ToastContextState } from './ToastProvider';
+export type MutationConfig<T> = {
+    mutation: T;
+    name: string;
+};
+declare type GetResults<T> = T extends MutationConfig<MinimalMutationResult<infer TData, infer TError>> ? MutationConfig<MinimalMutationResult<TData, TError>> : T extends MinimalMutationResult<infer TData, infer TError> ? MutationConfig<MinimalMutationResult<TData, TError>> : MutationConfig<MinimalMutationResult<unknown, unknown>>;
+declare type GetDescriptionBuilder<T> = T extends MutationConfig<MinimalMutationResult<infer TData, infer TError>> ? DescriptionBuilder<TData, TError> : T extends MutationConfig<UseMutationOptions<infer TData, infer TError>> ? DescriptionBuilder<TData, TError> : T extends MinimalMutationResult<infer TData, infer TError> ? DescriptionBuilder<TData, TError> : never;
+/**
+ * MutationResults reducer recursively maps type param to results
+ */
+declare type MutationsResults<T extends unknown[]> = T extends [] ? [] : T extends [infer Head, ...infer Tail] ? [GetResults<Head>, ...MutationsResults<Tail>] : T extends [infer Head] ? [GetResults<Head>] : unknown[] extends T ? T : never;
+declare enum DescriptionBuilderStatus {
+    Success = "success",
+    Error = "error"
+}
+type DescriptionBuilder<Data = unknown, Error = unknown> = {
+    error?: Error;
+    data?: Data;
+    status: DescriptionBuilderStatus;
+    name: string;
+};
+declare type DescriptionBuilders<T extends any[]> = T extends [] ? [] : T extends [infer Head, ...infer Tail] ? [GetDescriptionBuilder<Head>, ...DescriptionBuilders<Tail>] : T extends [infer Head] ? [GetDescriptionBuilder<Head>] : T extends UseMutationOptions<infer TMutationFnData, infer TError, infer TData>[] ? DescriptionBuilder<unknown extends TData ? TMutationFnData : TData, TError>[] : DescriptionBuilder[];
+type Props<MainMutationType, T extends any[]> = {
+    mainMutation: MutationConfig<MainMutationType>;
+    dependantMutations?: readonly [...MutationsResults<T>] | MutationConfig<MinimalMutationResult<unknown, unknown>>[];
+    messageDescriptionBuilder: (mutations: T extends [] ? [GetDescriptionBuilder<MainMutationType>] : [GetDescriptionBuilder<MainMutationType>, ...DescriptionBuilders<T>]) => ReactNode;
+    toastProps?: Pick<ToastContextState, 'style' | 'autoDismiss' | 'position' | 'duration' | 'withProgressBar'>;
+} & ({
+    onMainMutationSuccess?: () => void;
+    onAllMutationsSuccess?: never;
+} | {
+    onAllMutationsSuccess?: () => void;
+    onMainMutationSuccess?: never;
+});
+type MinimalMutationResult<TData, TError> = Pick<UseMutationResult<TData, TError, unknown, unknown>, 'isError' | 'isIdle' | 'isSuccess' | 'isLoading' | 'error' | 'data'>;
+export declare const useMutationsHandler: <MainMutationType extends MinimalMutationResult<unknown, unknown>, T extends any[] | []>({ mainMutation, dependantMutations, messageDescriptionBuilder, toastProps, ...rest }: Props<MainMutationType, T>) => void;
+export {};
+//# sourceMappingURL=useMutationsHandler.d.ts.map

package/dist/components/toast/useMutationsHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMutationsHandler.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/useMutationsHandler.ts"],"names":[],"mappings":"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"}

package/dist/components/toast/useMutationsHandler.js

@@ -0,0 +1,66 @@
+import { useCallback, useEffect } from 'react';
+import { useToast } from './ToastProvider';
+var DescriptionBuilderStatus;
+(function (DescriptionBuilderStatus) {
+    DescriptionBuilderStatus["Success"] = "success";
+    DescriptionBuilderStatus["Error"] = "error";
+})(DescriptionBuilderStatus || (DescriptionBuilderStatus = {}));
+export const useMutationsHandler = ({ mainMutation, dependantMutations, messageDescriptionBuilder, toastProps, ...rest }) => {
+    const { showToast } = useToast();
+    const mutations = [
+        mainMutation,
+        ...(dependantMutations ? dependantMutations : []),
+    ];
+    const handleMutationsCompletion = useCallback(async () => {
+        var _a, _b, _c, _d, _e;
+        const results = await Promise.all(mutations.map((m) => m.mutation));
+        const loadingMutations = mutations.filter((_, index) => results[index].isLoading);
+        const successMutations = mutations.filter((_, index) => results[index].isSuccess);
+        const errorMutations = mutations.filter((_, index) => results[index].isError);
+        const mainMutationDesc = {
+            data: (_a = mainMutation.mutation) === null || _a === void 0 ? void 0 : _a.data,
+            status: DescriptionBuilderStatus.Success,
+            name: mainMutation.name,
+        };
+        const descriptionBuilders = [
+            mainMutationDesc,
+            ...((dependantMutations === null || dependantMutations === void 0 ? void 0 : dependantMutations.map(({ mutation, name }) => ({
+                data: mutation.data,
+                error: mutation.isError && mutation.error,
+                status: mutation.isSuccess
+                    ? DescriptionBuilderStatus.Success
+                    : DescriptionBuilderStatus.Error,
+                name,
+            }))) || []),
+        ];
+        if (loadingMutations.length === 0) {
+            if (errorMutations.length > 0) {
+                if ((_b = mainMutation.mutation) === null || _b === void 0 ? void 0 : _b.isSuccess) {
+                    'onMainMutationSuccess' in rest && ((_c = rest === null || rest === void 0 ? void 0 : rest.onMainMutationSuccess) === null || _c === void 0 ? void 0 : _c.call(rest));
+                }
+                showToast({
+                    open: true,
+                    status: 'error',
+                    message: messageDescriptionBuilder(descriptionBuilders),
+                    ...toastProps,
+                });
+                return;
+            }
+            else if (successMutations.length > 0) {
+                'onMainMutationSuccess' in rest && ((_d = rest === null || rest === void 0 ? void 0 : rest.onMainMutationSuccess) === null || _d === void 0 ? void 0 : _d.call(rest));
+                if (successMutations.length === mutations.length) {
+                    'onAllMutationsSuccess' in rest && ((_e = rest === null || rest === void 0 ? void 0 : rest.onAllMutationsSuccess) === null || _e === void 0 ? void 0 : _e.call(rest));
+                }
+                showToast({
+                    open: true,
+                    status: 'success',
+                    message: messageDescriptionBuilder(descriptionBuilders),
+                    ...(toastProps ? toastProps : {}),
+                });
+            }
+        }
+    }, [JSON.stringify(mutations)]);
+    useEffect(() => {
+        handleMutationsCompletion();
+    }, [handleMutationsCompletion]);
+};

package/dist/components/toast/useToastParameters.d.ts

@@ -0,0 +1,10 @@
+interface ToastParameters {
+    duration?: number | null;
+    open?: boolean;
+    onClose?: () => void;
+}
+export declare function useToastParameters(params: ToastParameters): {
+    params: ToastParameters;
+};
+export {};
+//# sourceMappingURL=useToastParameters.d.ts.map

package/dist/components/toast/useToastParameters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToastParameters.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/useToastParameters.ts"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,eAAe;;EAkDzD"}

package/dist/components/toast/useToastParameters.js

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useRef } from 'react';
+export function useToastParameters(params) {
+    const { duration = null, open, onClose } = params;
+    const timerAutoHide = useRef();
+    useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        function handleKeyDown(nativeEvent) {
+            if (!nativeEvent.defaultPrevented) {
+                if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                }
+            }
+        }
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [open, onClose]);
+    const setAutoHideTimer = useCallback((autoHideDurationParam) => {
+        if (!onClose || autoHideDurationParam == null) {
+            return;
+        }
+        clearTimeout(timerAutoHide.current);
+        timerAutoHide.current = setTimeout(() => {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }, autoHideDurationParam);
+    }, [onClose]);
+    useEffect(() => {
+        if (open) {
+            setAutoHideTimer(duration);
+        }
+        return () => {
+            clearTimeout(timerAutoHide.current);
+        };
+    }, [open, duration, setAutoHideTimer]);
+    return { params };
+}

package/dist/components/toggle/Toggle.component.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent, InputHTMLAttributes } from 'react';
+type Props = InputHTMLAttributes<HTMLInputElement> & {
+    toggle: boolean;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
+    disabled?: boolean;
+};
+declare function ToggleSwitch({ toggle, label, onChange, disabled, ...rest }: Props): JSX.Element;
+export declare const Toggle: typeof ToggleSwitch;
+export {};
+//# sourceMappingURL=Toggle.component.d.ts.map

package/dist/components/toggle/Toggle.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toggle/Toggle.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAU,MAAM,OAAO,CAAC;AAQjE,KAAK,KAAK,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IACnD,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA6DF,iBAAS,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAmD1E;AAED,eAAO,MAAM,MAAM,qBAAe,CAAC"}

package/dist/components/toggle/Toggle.component.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../style/theme';
+import { LABEL_PREFIX, useFieldContext } from '../form/Form.component';
+import { Stack } from '../../spacing';
+import { Text } from '../text/Text.component';
+const ToggleContainer = styled.span `
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
+`;
+const Switch = styled.label `
+  position: relative;
+  width: ${spacing.sp24};
+  height: ${spacing.sp14};
+  align-self: center;
+  ${(props) => {
+    return css `
+      ${props.disabled
+        ? `
+          cursor: not-allowed;
+        `
+        : `
+          cursor: pointer;
+        `}
+    `;
+}}
+`;
+const Slider = styled.div `
+  width: 100%;
+  height: 1rem;
+  background-color: ${(props) => props.theme.backgroundLevel1};
+  border: ${spacing.sp1} solid
+    ${(props) => props.theme[props.toggle ? 'selectedActive' : 'infoPrimary']};
+  border-radius: ${spacing.sp8};
+  transition: 0.4s;
+  -moz-transform: rotate(0.02deg);
+  &:before {
+    border-radius: 100%;
+    position: absolute;
+    content: '';
+    height: ${spacing.sp10};
+    width: ${spacing.sp10};
+    left: 3px;
+    top: 3.5px;
+    background-color: ${(props) => props.theme[props.toggle ? 'textSecondary' : 'textPrimary']};
+    transition: 0.4s;
+    -moz-transform: rotate(0.02deg);
+  }
+`;
+const ToggleInput = styled.input `
+  &:checked + ${Slider} {
+    background-color: ${(props) => props.theme.selectedActive};
+  }
+  &:checked + ${Slider}:before {
+    transform: translateX(${spacing.sp10});
+  }
+  display: none;
+`;
+const StyledSwitchLabel = styled.label `
+  color: ${(props) => props.theme[props.toggle ? 'textPrimary' : 'textPrimary']};
+`;
+function ToggleSwitch({ toggle, label, onChange, disabled, ...rest }) {
+    const { isContextAvailable } = useFieldContext();
+    const checkboxRef = useRef(null);
+    return (_jsx(StyledSwitchLabel, { toggle: toggle, className: "text", id: `${rest['id']}-label`, htmlFor: rest['id'], children: _jsx(ToggleContainer, { className: "sc-toggle", disabled: disabled, children: _jsxs(Stack, { gap: 'r8', style: { alignItems: 'baseline' }, children: [_jsxs(Switch, { htmlFor: rest['id'], role: "checkbox", "aria-checked": toggle, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, disabled: disabled, onKeyDown: (e) => {
+                            if (e.code === 'Space' || e.code === 'Enter') {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                checkboxRef.current && checkboxRef.current.click();
+                            }
+                        }, "aria-labelledby": label
+                            ? `${rest['id']}-label`
+                            : isContextAvailable
+                                ? `${LABEL_PREFIX}${rest['id']}`
+                                : undefined, children: [_jsx(ToggleInput, { type: "checkbox", checked: toggle, onChange: onChange, disabled: disabled, ref: checkboxRef, ...rest }), _jsx(Slider, { className: "sc-slider", toggle: toggle })] }), label && _jsx(Text, { children: label })] }) }) }));
+}
+export const Toggle = ToggleSwitch;

package/dist/components/tooltip/Tooltip.component.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+export declare const TOP = "top";
+export declare const BOTTOM = "bottom";
+export declare const LEFT = "left";
+export declare const TOPSTART = "top-start";
+export declare const TOPEND = "top-end";
+export declare const RIGHT = "right";
+export declare const RIGHTSTART = "right-start";
+export declare const RIGHTEND = "right-end";
+export declare const BOTTOMEND = "bottom-end";
+export declare const BOTTOMSTART = "bottom-start";
+export declare const LEFTSTART = "left-start";
+export declare const LEFTEND = "left-end";
+export type Position = typeof TOP | typeof BOTTOM | typeof LEFT | typeof RIGHT | typeof TOPSTART | typeof TOPEND | typeof RIGHTSTART | typeof RIGHTEND | typeof BOTTOMEND | typeof BOTTOMSTART | typeof LEFTEND | typeof LEFTSTART;
+export type Props = {
+    placement?: Position;
+    overlayStyle?: CSSProperties;
+    overlay?: React.ReactNode;
+    children?: React.ReactNode;
+};
+declare function Tooltip({ placement, overlayStyle, children, overlay, ...rest }: Props): JSX.Element;
+export { Tooltip };
+//# sourceMappingURL=Tooltip.component.d.ts.map

package/dist/components/tooltip/Tooltip.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tooltip/Tooltip.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAKnE,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,IAAI,SAAS,CAAC;AAC3B,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,UAAU,CAAC;AAC7B,eAAO,MAAM,UAAU,gBAAgB,CAAC;AACxC,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAC1C,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,OAAO,aAAa,CAAC;AAClC,MAAM,MAAM,QAAQ,GAChB,OAAO,GAAG,GACV,OAAO,MAAM,GACb,OAAO,IAAI,GACX,OAAO,KAAK,GACZ,OAAO,QAAQ,GACf,OAAO,MAAM,GACb,OAAO,UAAU,GACjB,OAAO,QAAQ,GACf,OAAO,SAAS,GAChB,OAAO,WAAW,GAClB,OAAO,OAAO,GACd,OAAO,SAAS,CAAC;AACrB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA4CF,iBAAS,OAAO,CAAC,EACf,SAAe,EACf,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE,KAAK,eA+CP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/tooltip/Tooltip.component.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, zIndex } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+export const TOP = 'top';
+export const BOTTOM = 'bottom';
+export const LEFT = 'left';
+export const TOPSTART = 'top-start';
+export const TOPEND = 'top-end';
+export const RIGHT = 'right';
+export const RIGHTSTART = 'right-start';
+export const RIGHTEND = 'right-end';
+export const BOTTOMEND = 'bottom-end';
+export const BOTTOMSTART = 'bottom-start';
+export const LEFTSTART = 'left-start';
+export const LEFTEND = 'left-end';
+const TooltipContainer = styled.div `
+  position: relative;
+  display: inline-block;
+`;
+const TooltipOverLayContainer = styled.div `
+  display: inline-block;
+  opacity: 0;
+  position: fixed;
+  width: max-content;
+  border: 1px solid ${getThemePropSelector('border')};
+  background-color: ${(props) => (props && props.style && props.style.backgroundColor) ||
+    props.theme.backgroundLevel1};
+  color: ${(props) => (props && props.style && props.style.color) || props.theme.textPrimary};
+  z-index: ${zIndex.tooltip};
+  border-radius: 4px;
+  font-size: ${(props) => (props && props.style && props.style.fontSize) || fontSize.small};
+  vertical-align: middle;
+  padding: ${spacing.r4} ${spacing.r8};
+  max-width: 40rem;
+`;
+const TooltipText = styled.div `
+  width: 100%;
+  ul,
+  ol {
+    padding-inline-start: ${spacing.r16};
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+  li {
+    margin-bottom: ${spacing.r8};
+  }
+  li:last-child {
+    margin-bottom: 0;
+  }
+`;
+function Tooltip({ placement = TOP, overlayStyle, children, overlay, ...rest }) {
+    const childrenRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    useEffect(() => {
+        if (childrenRef.current && tooltipRef.current) {
+            computePosition(childrenRef.current, tooltipRef.current, {
+                placement,
+                middleware: [offset(5), shift(), flip()],
+            }).then(({ x, y }) => {
+                if (tooltipRef.current) {
+                    Object.assign(tooltipRef.current.style, {
+                        opacity: '1',
+                        // we set opacity to 1 to make sure the tooltip is not displayed before the position is computed
+                        left: `${x}px`,
+                        top: `${y}px`,
+                    });
+                }
+            });
+        }
+    }, [tooltipRef.current, childrenRef.current, isTooltipVisible]);
+    return (_jsxs(TooltipContainer, { className: "sc-tooltip", onPointerEnter: () => {
+            setIsTooltipVisible(true);
+        }, onPointerLeave: () => {
+            setIsTooltipVisible(false);
+        }, children: [isTooltipVisible && overlay ? (_jsx(TooltipOverLayContainer, { ref: tooltipRef, className: "sc-tooltip-overlay", placement: placement, style: overlayStyle, children: _jsx(TooltipText, { className: "sc-tooltip-overlay-text", children: overlay }) })) : null, _jsx("div", { ref: childrenRef, children: children })] }));
+}
+export { Tooltip };

package/dist/components/vegachart/VegaChart.component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const TOP = "top";
+export declare const BOTTOM = "bottom";
+type Position = typeof TOP | typeof BOTTOM;
+type Props = {
+    id: string;
+    spec: Record<string, any>;
+    tooltipPosition?: Position;
+    theme?: 'light' | 'dark' | 'custom';
+    className?: string;
+};
+declare function VegaChart({ id, spec, tooltipPosition, theme, }: Props): JSX.Element;
+export { VegaChart };
+//# sourceMappingURL=VegaChart.component.d.ts.map

package/dist/components/vegachart/VegaChart.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VegaChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/vegachart/VegaChart.component.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC;AAC3C,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0BF,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,IAAI,EACJ,eAAwB,EACxB,KAAgB,GACjB,EAAE,KAAK,eAkGP;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}