@taiv/ui 1.0.0

package/dist/components/Info/Notifications/Notifications.d.ts

@@ -0,0 +1,16 @@
+import { componentVariants } from './variants';
+export declare const useNotifications: () => {
+    show: (options: {
+        variant?: keyof typeof componentVariants;
+        message: string;
+        title?: string;
+        id?: string;
+    }) => void;
+    showError: () => void;
+    showLoading: (options: {
+        message: string;
+        title?: string;
+    }) => string;
+    hide: (id: string) => Promise<void>;
+};
+//# sourceMappingURL=Notifications.d.ts.map

package/dist/components/Info/Notifications/Notifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Notifications/Notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,eAAO,MAAM,gBAAgB;oBAMJ;QACrB,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;QACzC,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,EAAE,CAAC,EAAE,MAAM,CAAC;KACb;;2BAmB6B;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE;eA7BzC,MAAM;CAiD/B,CAAC"}

package/dist/components/Info/Notifications/Notifications.js

@@ -0,0 +1,41 @@
+import { notifications as mantineNotifications } from '@mantine/notifications';
+import { componentVariants } from './variants';
+export const useNotifications = () => {
+    const hide = async (id) => {
+        mantineNotifications.hide(id);
+        await new Promise((resolve) => setTimeout(resolve, 200));
+    };
+    const show = (options) => {
+        const { variant = 'info', message, title, id } = options;
+        const selectedVariant = componentVariants[variant];
+        mantineNotifications.show({
+            title: title || selectedVariant.defaultTitle,
+            message,
+            icon: selectedVariant.icon,
+            autoClose: selectedVariant.autoClose,
+            id,
+            styles: {
+                root: {
+                    borderLeft: `4px solid ${selectedVariant.color}`,
+                },
+            },
+        });
+    };
+    const showLoading = (options) => {
+        const notificationId = `${Math.random()}-${Math.random()}`;
+        show({
+            id: notificationId,
+            message: options.message,
+            title: options.title,
+            variant: 'loading',
+        });
+        return notificationId;
+    };
+    const showError = () => {
+        show({
+            variant: 'error',
+            message: 'An error has occurred. Please try again. If the issue persists, please contact us at support@taiv.tv',
+        });
+    };
+    return { show, showError, showLoading, hide };
+};

package/dist/components/Info/Notifications/variants.d.ts

@@ -0,0 +1,39 @@
+export declare const componentVariants: {
+    readonly success: {
+        readonly defaultTitle: "Success!";
+        readonly color: "#00A63E";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+        readonly autoClose: 4000;
+    };
+    readonly error: {
+        readonly defaultTitle: "Oops!";
+        readonly color: "#FB2C36";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+        readonly autoClose: false;
+    };
+    readonly warning: {
+        readonly defaultTitle: "Warning";
+        readonly color: "#FE9A00";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+        readonly autoClose: 4000;
+    };
+    readonly info: {
+        readonly defaultTitle: "Note";
+        readonly color: "#00A6F4";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+        readonly autoClose: 4000;
+    };
+    readonly loading: {
+        readonly defaultTitle: "Loading...";
+        readonly color: "#00A6F4";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+        readonly autoClose: false;
+    };
+    readonly copy: {
+        readonly defaultTitle: "Copied to clipboard!";
+        readonly color: "#0081CE";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+        readonly autoClose: 4000;
+    };
+};
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/Info/Notifications/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Notifications/variants.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCpB,CAAC"}

package/dist/components/Info/Notifications/variants.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { primary, error, success, warning } from '../../../constants/colors';
+import { Loader } from '../../Layout/Loader';
+export const componentVariants = {
+    success: {
+        defaultTitle: 'Success!',
+        color: success[200],
+        icon: _jsx("i", { className: "fas fa-check-circle", style: { color: success[200] } }),
+        autoClose: 4000,
+    },
+    error: {
+        defaultTitle: 'Oops!',
+        color: error[100],
+        icon: _jsx("i", { className: "fas fa-exclamation-circle", style: { color: error[100] } }),
+        autoClose: false,
+    },
+    warning: {
+        defaultTitle: 'Warning',
+        color: warning[100],
+        icon: _jsx("i", { className: "fas fa-exclamation-triangle", style: { color: warning[100] } }),
+        autoClose: 4000,
+    },
+    info: {
+        defaultTitle: 'Note',
+        color: primary[200],
+        icon: _jsx("i", { className: "fas fa-info-circle", style: { color: primary[200] } }),
+        autoClose: 4000,
+    },
+    loading: {
+        defaultTitle: 'Loading...',
+        color: primary[200],
+        icon: _jsx(Loader, { size: "md", color: primary[200] }),
+        autoClose: false,
+    },
+    copy: {
+        defaultTitle: 'Copied to clipboard!',
+        color: primary[300],
+        icon: _jsx("i", { className: "fas fa-copy", style: { color: primary[300] } }),
+        autoClose: 4000,
+    },
+};

package/dist/components/Info/Tooltips/InfoTooltip.d.ts

@@ -0,0 +1,18 @@
+import { CSSObject } from '@mantine/styles';
+interface InfoTooltipProps {
+    text: string;
+    position?: 'top-end' | 'bottom-end' | 'top-start' | 'bottom-start';
+    size?: keyof typeof componentSizes;
+    offset?: number;
+    className?: string;
+    styles?: Record<string, CSSObject>;
+}
+declare const componentSizes: {
+    readonly sm: "1.2rem";
+    readonly md: "1.6rem";
+    readonly lg: "2rem";
+    readonly xl: "2.4rem";
+};
+declare const InfoTooltip: ({ text, position, size, offset, className, styles }: InfoTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export { InfoTooltip };
+//# sourceMappingURL=InfoTooltip.d.ts.map

package/dist/components/Info/Tooltips/InfoTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Tooltips/InfoTooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,QAAA,MAAM,WAAW,GAAI,qDAA0E,gBAAgB,4CAc9G,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Info/Tooltips/InfoTooltip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { neutral } from '../../../constants/colors';
+import { Tooltip } from './Tooltip';
+const componentSizes = {
+    sm: '1.2rem',
+    md: '1.6rem',
+    lg: '2rem',
+    xl: '2.4rem',
+};
+const InfoTooltip = ({ text, position = 'top-start', size = 'md', offset, className, styles }) => {
+    const style = {
+        icon: {
+            color: neutral[100],
+            fontSize: componentSizes[size],
+        },
+        ...styles,
+    };
+    return (_jsx(Tooltip, { text: text, position: position, offset: offset, className: className, children: _jsx("i", { className: "fas fa-info-circle", style: style.icon }) }));
+};
+export { InfoTooltip };

package/dist/components/Info/Tooltips/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CSSObject } from '@mantine/styles';
+interface TooltipProps {
+    children: React.ReactNode;
+    text: string;
+    position?: 'top-end' | 'bottom-end' | 'top-start' | 'bottom-start';
+    offset?: number;
+    className?: string;
+    styles?: Record<string, CSSObject>;
+}
+declare const Tooltip: ({ children, text, position, offset, className, styles }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export { Tooltip };
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Info/Tooltips/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Tooltips/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,OAAO,GAAI,yDAAuE,YAAY,4CA+CnG,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Info/Tooltips/Tooltip.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as MantineTooltip, Box } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { fontBase, fontSize, fontWeight } from '../../../constants/font';
+const Tooltip = ({ children, text, position = 'top-start', offset, className, styles }) => {
+    const positionToTransition = {
+        'top-end': 'slide-up',
+        'bottom-end': 'slide-down',
+        'top-start': 'slide-up',
+        'bottom-start': 'slide-down',
+    };
+    const wrapperStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 'fit-content',
+    };
+    const tooltipStyle = {
+        tooltip: {
+            ...fontBase,
+            color: neutral[200],
+            fontWeight: fontWeight['medium'],
+            boxShadow: '0px 0px 19px 0px #00000040',
+            borderRadius: '8px',
+            textWrap: 'wrap',
+            maxWidth: '375px',
+            padding: '0.75rem 1.125rem',
+            ...fontSize['sm'],
+            height: 'fit-content',
+        },
+        ...styles,
+    };
+    return (_jsx(MantineTooltip, { withArrow: true, arrowRadius: 0, arrowSize: 8, label: text, position: position, transitionProps: { transition: positionToTransition[position], duration: 200 }, color: "white", styles: tooltipStyle, offset: offset, className: className, children: _jsx(Box, { sx: wrapperStyle, children: children }) }));
+};
+export { Tooltip };

package/dist/components/Inputs/Buttons/Button.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps as MantineButtonProps } from '@mantine/core';
+import { componentSizes } from './shared/sizes';
+import { componentVariants } from './shared/variants';
+export interface ButtonProps extends MantineButtonProps {
+    onClick?: () => void;
+    size?: keyof typeof componentSizes;
+    variant?: keyof typeof componentVariants;
+    fullWidth?: boolean;
+}
+export declare const Button: ({ onClick, size, variant, fullWidth, styles, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Inputs/Buttons/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Buttons/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,GAAI,yDAOpB,WAAW,4CAuBb,CAAC"}

package/dist/components/Inputs/Buttons/Button.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as MantineButton } from '@mantine/core';
+import { fontBase, fontWeight } from '../../../constants/font';
+import { componentSizes } from './shared/sizes';
+import { componentVariants } from './shared/variants';
+export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth = false, styles, ...props }) => {
+    const selectedVariant = componentVariants[variant];
+    const selectedSize = componentSizes[size];
+    const style = {
+        root: {
+            borderRadius: '8px',
+            border: '1px solid white',
+            width: fullWidth ? '100%' : 'fit-content',
+            height: `${selectedSize.height}rem`,
+            padding: selectedSize.padding,
+            minWidth: `${selectedSize.minWidth}rem`,
+            fontSize: selectedSize.fontSize,
+            ...selectedVariant,
+        },
+        label: {
+            ...fontBase,
+            fontWeight: fontWeight['semibold'],
+        },
+        ...styles,
+    };
+    return _jsx(MantineButton, { styles: style, size: size, onClick: onClick, ...props });
+};

package/dist/components/Inputs/Buttons/UnstyledButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { UnstyledButtonProps as MantineUnstyledButtonProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+interface UnstyledButtonProps extends MantineUnstyledButtonProps {
+    styles?: Record<string, CSSObject>;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare const UnstyledButton: ({ styles, onClick, ...props }: UnstyledButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { UnstyledButton };
+//# sourceMappingURL=UnstyledButton.d.ts.map

package/dist/components/Inputs/Buttons/UnstyledButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnstyledButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Buttons/UnstyledButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,mBAAmB,IAAI,0BAA0B,EAClD,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,mBAAoB,SAAQ,0BAA0B;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,QAAA,MAAM,cAAc,GAAI,+BAA+B,mBAAmB,4CAEzE,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Inputs/Buttons/UnstyledButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UnstyledButton as MantineUnstyledButton, } from '@mantine/core';
+const UnstyledButton = ({ styles, onClick, ...props }) => {
+    return _jsx(MantineUnstyledButton, { styles: styles, onClick: onClick, ...props });
+};
+export { UnstyledButton };

package/dist/components/Inputs/Buttons/shared/sizes.d.ts

@@ -0,0 +1,25 @@
+declare const componentSizes: {
+    sm: {
+        padding: string;
+        minWidth: number;
+        fontSize: string;
+        lineHeight: string;
+        height: number;
+    };
+    md: {
+        padding: string;
+        minWidth: number;
+        fontSize: string;
+        lineHeight: string;
+        height: number;
+    };
+    lg: {
+        padding: string;
+        minWidth: number;
+        fontSize: string;
+        lineHeight: string;
+        height: number;
+    };
+};
+export { componentSizes };
+//# sourceMappingURL=sizes.d.ts.map

package/dist/components/Inputs/Buttons/shared/sizes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/shared/sizes.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;CAInB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Inputs/Buttons/shared/sizes.js

@@ -0,0 +1,7 @@
+import { fontSize } from '../../../../constants/font';
+const componentSizes = {
+    sm: { height: 3, ...fontSize['sm'], padding: '0.8rem 1.8rem', minWidth: 6.8 },
+    md: { height: 4, ...fontSize['md'], padding: '0.8rem 2.4rem', minWidth: 11.2 },
+    lg: { height: 4.8, ...fontSize['lg'], padding: '0.8rem 4rem', minWidth: 15.2 },
+};
+export { componentSizes };

package/dist/components/Inputs/Buttons/shared/variants.d.ts

@@ -0,0 +1,141 @@
+export declare const componentVariants: {
+    readonly primary: {
+        readonly background: "linear-gradient(to right, #0081CE, #00A6F4)";
+        readonly color: "white";
+        readonly '&:hover': {
+            readonly background: "linear-gradient(to right, #0081CE, #0081CE)";
+            readonly transition: "background 0.3s ease-in-out";
+        };
+        readonly '&:active': {
+            readonly background: "white";
+            readonly border: "1px solid #00A6F4";
+            readonly color: "#00A6F4";
+        };
+        readonly '&:disabled': {
+            readonly background: "#EDEDED";
+            readonly color: "#D9D9D9";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "white";
+            };
+        };
+    };
+    readonly secondary: {
+        readonly background: "white";
+        readonly color: "#6D6D6D";
+        readonly border: "1px solid #6D6D6D";
+        readonly '&:hover': {
+            readonly background: "#D9D9D9";
+            readonly border: "1px solid #D9D9D9";
+            readonly color: "white";
+        };
+        readonly '&:active': {
+            readonly background: "#D9D9D9";
+            readonly border: "1px solid #6D6D6D";
+            readonly color: "#6D6D6D";
+        };
+        readonly '&:disabled': {
+            readonly background: "#EDEDED";
+            readonly border: "1px solid #EDEDED";
+            readonly color: "#D9D9D9";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "#6D6D6D";
+            };
+        };
+    };
+    readonly cancel: {
+        readonly background: "#C10007";
+        readonly color: "white";
+        readonly '&:hover': {
+            readonly background: "#FB2C36";
+        };
+        readonly '&:active': {
+            readonly background: "white";
+            readonly border: "1px solid #C10007";
+            readonly color: "#C10007";
+        };
+        readonly '&:disabled': {
+            readonly background: "#FFD7D9";
+            readonly border: "1px solid #FFD7D9";
+            readonly color: "white";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "white";
+            };
+        };
+    };
+    readonly success: {
+        readonly background: "#00A63E";
+        readonly color: "white";
+        readonly '&:hover': {
+            readonly background: "#00C951";
+        };
+        readonly '&:active': {
+            readonly background: "white";
+            readonly border: "1px solid #00A63E";
+            readonly color: "#00A63E";
+        };
+        readonly '&:disabled': {
+            readonly background: "#E6F4E7";
+            readonly border: "1px solid #E6F4E7";
+            readonly color: "white";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "white";
+            };
+        };
+    };
+    readonly warning: {
+        readonly background: "#E17100";
+        readonly color: "white";
+        readonly '&:hover': {
+            readonly background: "#FE9A00";
+        };
+        readonly '&:active': {
+            readonly background: "white";
+            readonly border: "1px solid #E17100";
+            readonly color: "#E17100";
+        };
+        readonly '&:disabled': {
+            readonly background: "#FFE5B4";
+            readonly border: "1px solid #FFE5B4";
+            readonly color: "white";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "white";
+            };
+        };
+    };
+    readonly text: {
+        readonly background: "transparent";
+        readonly color: "#6D6D6D";
+        readonly border: "none";
+        readonly padding: "0";
+        readonly height: "auto";
+        readonly minWidth: "unset";
+        readonly '&:hover': {
+            readonly background: "transparent";
+            readonly color: "#0081CE";
+        };
+        readonly '&:active': {
+            readonly background: "transparent";
+            readonly color: "#00A6F4";
+        };
+        readonly '&:disabled': {
+            readonly background: "transparent";
+            readonly color: "#D9D9D9";
+        };
+        readonly '&[data-loading]': {
+            readonly '& .mantine-Button-icon svg': {
+                readonly stroke: "#6D6D6D";
+            };
+        };
+    };
+};
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/Inputs/Buttons/shared/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/shared/variants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IpB,CAAC"}

package/dist/components/Inputs/Buttons/shared/variants.js

@@ -0,0 +1,141 @@
+import { primary, neutral, error, success, warning } from '../../../../constants/colors';
+export const componentVariants = {
+    primary: {
+        background: `linear-gradient(to right, ${primary[300]}, ${primary[200]})`,
+        color: 'white',
+        '&:hover': {
+            background: `linear-gradient(to right, ${primary[300]}, ${primary[300]})`,
+            transition: 'background 0.3s ease-in-out',
+        },
+        '&:active': {
+            background: 'white',
+            border: `1px solid ${primary[200]}`,
+            color: primary[200],
+        },
+        '&:disabled': {
+            background: neutral[50],
+            color: neutral[100],
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: 'white',
+            },
+        },
+    },
+    secondary: {
+        background: 'white',
+        color: neutral[200],
+        border: `1px solid ${neutral[200]}`,
+        '&:hover': {
+            background: neutral[100],
+            border: `1px solid ${neutral[100]}`,
+            color: 'white',
+        },
+        '&:active': {
+            background: neutral[100],
+            border: `1px solid ${neutral[200]}`,
+            color: neutral[200],
+        },
+        '&:disabled': {
+            background: neutral[50],
+            border: `1px solid ${neutral[50]}`,
+            color: neutral[100],
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: neutral[200],
+            },
+        },
+    },
+    cancel: {
+        background: error[200],
+        color: 'white',
+        '&:hover': {
+            background: error[100],
+        },
+        '&:active': {
+            background: 'white',
+            border: `1px solid ${error[200]}`,
+            color: error[200],
+        },
+        '&:disabled': {
+            background: error[50],
+            border: `1px solid ${error[50]}`,
+            color: 'white',
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: 'white',
+            },
+        },
+    },
+    success: {
+        background: success[200],
+        color: 'white',
+        '&:hover': {
+            background: success[100],
+        },
+        '&:active': {
+            background: 'white',
+            border: `1px solid ${success[200]}`,
+            color: success[200],
+        },
+        '&:disabled': {
+            background: success[50],
+            border: `1px solid ${success[50]}`,
+            color: 'white',
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: 'white',
+            },
+        },
+    },
+    warning: {
+        background: warning[200],
+        color: 'white',
+        '&:hover': {
+            background: warning[100],
+        },
+        '&:active': {
+            background: 'white',
+            border: `1px solid ${warning[200]}`,
+            color: warning[200],
+        },
+        '&:disabled': {
+            background: warning[50],
+            border: `1px solid ${warning[50]}`,
+            color: 'white',
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: 'white',
+            },
+        },
+    },
+    text: {
+        background: 'transparent',
+        color: neutral[200],
+        border: 'none',
+        padding: '0',
+        height: 'auto',
+        minWidth: 'unset',
+        '&:hover': {
+            background: 'transparent',
+            color: primary[300],
+        },
+        '&:active': {
+            background: 'transparent',
+            color: primary[200],
+        },
+        '&:disabled': {
+            background: 'transparent',
+            color: neutral[100],
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: neutral[200],
+            },
+        },
+    },
+};