@taiv/ui 1.0.2 → 1.1.0

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

@@ -11,6 +11,10 @@ export declare const componentVariants: {
             readonly border: "1px solid #00A6F4";
             readonly color: "#00A6F4";
         };
+        readonly '&:toggled': {
+            readonly background: "linear-gradient(to right, #0081CE, #0081CE)";
+            readonly color: "white";
+        };
         readonly '&:disabled': {
             readonly background: "#EDEDED";
             readonly color: "#D9D9D9";
@@ -35,6 +39,10 @@ export declare const componentVariants: {
             readonly border: "1px solid #6D6D6D";
             readonly color: "#6D6D6D";
         };
+        readonly '&:toggled': {
+            readonly background: "#D9D9D9";
+            readonly color: "neutral[200]";
+        };
         readonly '&:disabled': {
             readonly background: "#EDEDED";
             readonly border: "1px solid #EDEDED";
@@ -57,6 +65,10 @@ export declare const componentVariants: {
             readonly border: "1px solid #C10007";
             readonly color: "#C10007";
         };
+        readonly '&:toggled': {
+            readonly background: "#FB2C36";
+            readonly color: "white";
+        };
         readonly '&:disabled': {
             readonly background: "#FFD7D9";
             readonly border: "1px solid #FFD7D9";
@@ -79,6 +91,9 @@ export declare const componentVariants: {
             readonly border: "1px solid #00A63E";
             readonly color: "#00A63E";
         };
+        readonly '&:toggled': {
+            readonly background: "#00C951";
+        };
         readonly '&:disabled': {
             readonly background: "#E6F4E7";
             readonly border: "1px solid #E6F4E7";
@@ -101,6 +116,9 @@ export declare const componentVariants: {
             readonly border: "1px solid #E17100";
             readonly color: "#E17100";
         };
+        readonly '&:toggled': {
+            readonly background: "#FE9A00";
+        };
         readonly '&:disabled': {
             readonly background: "#FFE5B4";
             readonly border: "1px solid #FFE5B4";
@@ -127,6 +145,10 @@ export declare const componentVariants: {
             readonly background: "transparent";
             readonly color: "#00A6F4";
         };
+        readonly '&:toggled': {
+            readonly background: "transparent";
+            readonly color: "#0081CE";
+        };
         readonly '&:disabled': {
             readonly background: "transparent";
             readonly color: "#D9D9D9";
@@ -137,5 +159,33 @@ export declare const componentVariants: {
             };
         };
     };
+    readonly nav: {
+        readonly background: "white";
+        readonly paddingLeft: "0.8rem";
+        readonly color: "#6D6D6D";
+        readonly '& .mantine-Button-inner': {
+            readonly justifyContent: "flex-start";
+        };
+        readonly '&:hover': {
+            readonly background: "#EDEDED";
+        };
+        readonly '&:active': {
+            readonly background: "#D9D9D9";
+            readonly color: "#6D6D6D";
+        };
+        readonly '&:toggled': {
+            readonly background: "#EDEDED";
+            readonly color: "#6D6D6D";
+        };
+        readonly '&:disabled': {
+            readonly background: "#EDEDED";
+            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

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

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

@@ -12,6 +12,10 @@ export const componentVariants = {
             border: `1px solid ${primary[200]}`,
             color: primary[200],
         },
+        '&:toggled': {
+            background: `linear-gradient(to right, ${primary[300]}, ${primary[300]})`,
+            color: 'white',
+        },
         '&:disabled': {
             background: neutral[50],
             color: neutral[100],
@@ -36,6 +40,10 @@ export const componentVariants = {
             border: `1px solid ${neutral[200]}`,
             color: neutral[200],
         },
+        '&:toggled': {
+            background: neutral[100],
+            color: 'neutral[200]',
+        },
         '&:disabled': {
             background: neutral[50],
             border: `1px solid ${neutral[50]}`,
@@ -58,6 +66,10 @@ export const componentVariants = {
             border: `1px solid ${error[200]}`,
             color: error[200],
         },
+        '&:toggled': {
+            background: error[100],
+            color: 'white',
+        },
         '&:disabled': {
             background: error[50],
             border: `1px solid ${error[50]}`,
@@ -80,6 +92,9 @@ export const componentVariants = {
             border: `1px solid ${success[200]}`,
             color: success[200],
         },
+        '&:toggled': {
+            background: success[100],
+        },
         '&:disabled': {
             background: success[50],
             border: `1px solid ${success[50]}`,
@@ -102,6 +117,9 @@ export const componentVariants = {
             border: `1px solid ${warning[200]}`,
             color: warning[200],
         },
+        '&:toggled': {
+            background: warning[100],
+        },
         '&:disabled': {
             background: warning[50],
             border: `1px solid ${warning[50]}`,
@@ -128,6 +146,10 @@ export const componentVariants = {
             background: 'transparent',
             color: primary[200],
         },
+        '&:toggled': {
+            background: 'transparent',
+            color: primary[300],
+        },
         '&:disabled': {
             background: 'transparent',
             color: neutral[100],
@@ -138,4 +160,32 @@ export const componentVariants = {
             },
         },
     },
+    nav: {
+        background: 'white',
+        paddingLeft: '0.8rem',
+        color: neutral[200],
+        '& .mantine-Button-inner': {
+            justifyContent: 'flex-start',
+        },
+        '&:hover': {
+            background: neutral[50],
+        },
+        '&:active': {
+            background: neutral[100],
+            color: neutral[200],
+        },
+        '&:toggled': {
+            background: neutral[50],
+            color: neutral[200],
+        },
+        '&:disabled': {
+            background: neutral[50],
+            color: neutral[100],
+        },
+        '&[data-loading]': {
+            '& .mantine-Button-icon svg': {
+                stroke: neutral[200],
+            },
+        },
+    },
 };

package/dist/components/Inputs/DatePickers/DatePicker.d.ts

@@ -0,0 +1,12 @@
+import { DatePickerInputProps as MantineDatePickerInputProps } from '@mantine/dates';
+import { CSSObject } from '@mantine/styles';
+import { componentSizes } from '../Dropdowns/shared/sizes';
+export interface DatePickerProps<T extends 'default' | 'multiple' | 'range' = 'default'> extends Omit<MantineDatePickerInputProps<T>, 'styles'> {
+    size?: keyof typeof componentSizes;
+    width?: string | number;
+    fullWidth?: boolean;
+    styles?: Record<string, CSSObject>;
+    showIcon?: boolean;
+}
+export declare const DatePicker: <T extends "default" | "multiple" | "range" = "default">({ size, width, fullWidth, placeholder, styles, showIcon, ...props }: DatePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/Inputs/DatePickers/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/DatePickers/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6C,oBAAoB,IAAI,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAChI,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAE,SAAQ,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC;IAC7I,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,EAAE,qEAQhF,eAAe,CAAC,CAAC,CAAC,4CAyCpB,CAAC"}

package/dist/components/Inputs/DatePickers/DatePicker.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatePickerInput as MantineDatePickerInput } from '@mantine/dates';
+import { neutral } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { componentSizes } from '../Dropdowns/shared/sizes';
+export const DatePicker = ({ size = 'md', width, fullWidth = false, placeholder = 'Pick Date', styles, showIcon = true, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const style = {
+        root: {
+            width: fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`,
+        },
+        input: {
+            height: `${selectedSize.height}rem`,
+            paddingRight: selectedSize.inputPadding,
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[300],
+            borderRadius: '8px',
+            border: `1px solid ${neutral[100]}`,
+            transition: 'all 200ms ease-in-out',
+        },
+        placeholder: {
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+        },
+        label: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.1rem)`,
+            color: neutral[200],
+        },
+        ...styles,
+    };
+    return (_jsx(MantineDatePickerInput, { icon: showIcon ? _jsx("i", { className: "far fa-calendar", style: { fontSize: 14, marginLeft: '0.25rem' } }) : undefined, radius: "lg", size: "xl", styles: style, placeholder: placeholder, popoverProps: { radius: 'lg' }, ...props }));
+};

package/dist/components/Layout/AutoGrid.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SimpleGridProps } from '@mantine/core';
+interface AutoGridProps extends SimpleGridProps {
+    children: React.ReactNode;
+}
+declare const AutoGrid: ({ children, ...props }: AutoGridProps) => import("react/jsx-runtime").JSX.Element;
+export { AutoGrid };
+//# sourceMappingURL=AutoGrid.d.ts.map

package/dist/components/Layout/AutoGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoGrid.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/AutoGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,UAAU,aAAc,SAAQ,eAAe;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,QAAQ,GAAI,wBAAwB,aAAa,4CAEtD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Layout/AutoGrid.js

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

package/dist/components/Layout/Card.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CardProps as MantineCardProps } from '@mantine/core';
+export interface CardProps extends MantineCardProps {
+    children: React.ReactNode;
+    animate?: boolean;
+}
+export declare const Card: ({ children, animate, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Layout/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnF,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,GAAI,iCAAyC,SAAS,4CAiBtE,CAAC"}

package/dist/components/Layout/Card.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card as MantineCard } from '@mantine/core';
+export const Card = ({ children, animate = false, ...props }) => {
+    const hoverAnimation = {
+        style: { transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out' },
+        onMouseEnter: (e) => {
+            e.currentTarget.style.transform = 'translateY(-5px)';
+            e.currentTarget.style.boxShadow = '0px 2px 8px 0px rgba(0, 0, 0, 0.05)';
+        },
+        onMouseLeave: (e) => {
+            e.currentTarget.style.transform = 'translateY(0)';
+            e.currentTarget.style.boxShadow = 'none';
+        },
+    };
+    return (_jsx(MantineCard, { p: "1.8rem", radius: "20px", withBorder: true, ...(animate ? hoverAnimation : {}), ...props, children: children }));
+};

package/dist/components/Layout/Grid.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { GridProps as MantineGridProps } from '@mantine/core';
+interface GridProps extends MantineGridProps {
+    children: React.ReactNode;
+}
+declare const Grid: (({ children, ...props }: GridProps) => import("react/jsx-runtime").JSX.Element) & {
+    Col: React.ForwardRefExoticComponent<import("@mantine/core").ColProps & React.RefAttributes<HTMLDivElement>>;
+};
+export { Grid };
+//# sourceMappingURL=Grid.d.ts.map

package/dist/components/Layout/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnF,UAAU,SAAU,SAAQ,gBAAgB;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,QAAA,MAAM,IAAI,4BAJqC,SAAS;;CAMtD,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Layout/Grid.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid as MantineGrid } from '@mantine/core';
+const GridComponent = ({ children, ...props }) => {
+    return _jsx(MantineGrid, { ...props, children: children });
+};
+const Grid = Object.assign(GridComponent, {
+    Col: MantineGrid.Col,
+});
+export { Grid };

package/dist/components/Layout/SectionCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CardProps as MantineCardProps } from '@mantine/core';
+import { colors } from '../../constants/colors';
+export interface SectionCardProps extends Omit<MantineCardProps, 'children'> {
+    title: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    color?: keyof typeof colors;
+}
+export declare const SectionCard: ({ title, subtitle, children, color, ...props }: SectionCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SectionCard.d.ts.map

package/dist/components/Layout/SectionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionCard.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/SectionCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAKhD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,GAAI,gDAA4D,gBAAgB,4CAsBvG,CAAC"}

package/dist/components/Layout/SectionCard.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card as MantineCard } from '@mantine/core';
+import { Stack } from './Stack';
+import { Title } from '../Typography/Title';
+export const SectionCard = ({ title, subtitle, children, color = 'primary', ...props }) => {
+    return (_jsxs(MantineCard, { radius: "20px", shadow: "lg", withBorder: true, padding: 0, ...props, children: [_jsx("div", { style: {
+                    // background: `linear-gradient(to right, ${colors[color][300]}, ${colors[color][200]})`,
+                    backgroundColor: 'white',
+                    padding: '1.6rem 2rem 0 2rem',
+                    borderRadius: '20px 20px 0 0',
+                }, children: _jsxs(Stack, { gap: "0.25rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Title, { variant: "cardSubheader", children: subtitle })] }) }), _jsx("div", { style: { padding: '2rem 3.2rem 3.2rem 3.2rem' }, children: children })] }));
+};

package/dist/components/Layout/Tabs.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TabsProps as MantineTabsProps } from '@mantine/core';
+export interface TabsProps extends Omit<MantineTabsProps, 'children' | 'onChange' | 'placement'> {
+    children: React.ReactNode;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string | null) => void;
+    orientation?: 'horizontal' | 'vertical';
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    variant?: 'default' | 'outline' | 'pills';
+}
+export declare const Tabs: (({ children, defaultValue, value, onChange, orientation, placement, variant, styles, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element) & {
+    List: React.ForwardRefExoticComponent<import("@mantine/core").TabsListProps & React.RefAttributes<HTMLDivElement>>;
+    Tab: React.ForwardRefExoticComponent<import("@mantine/core").TabProps & React.RefAttributes<HTMLButtonElement>>;
+    Panel: React.ForwardRefExoticComponent<import("@mantine/core").TabsPanelProps & React.RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/Layout/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAInF,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;IAC9F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAChD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAC3C;AAiED,eAAO,MAAM,IAAI,oGArDd,SAAS;;;;CAyDV,CAAC"}

package/dist/components/Layout/Tabs.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as MantineTabs } from '@mantine/core';
+import { fontBase } from '../../constants/font';
+import { colors } from '../../constants/colors';
+const TabsComponent = ({ children, defaultValue, value, onChange, orientation = 'horizontal', placement = 'top', variant = 'default', styles, ...props }) => {
+    const style = {
+        root: {
+            width: '100%',
+        },
+        list: {
+            borderBottom: variant === 'default' ? `1px solid ${colors.neutral[100]}` : 'none',
+            gap: '0',
+        },
+        tab: {
+            padding: '0.8rem 2.8rem',
+            backgroundColor: 'transparent',
+            color: colors.neutral[300],
+            '&:hover': {
+                backgroundColor: variant === 'pills' ? colors.neutral[25] : 'transparent',
+                color: colors.primary[300],
+            },
+            '&[data-active]': {
+                backgroundColor: variant === 'pills' ? colors.primary[200] : 'transparent',
+                color: variant === 'pills' ? 'white' : colors.primary[300],
+                borderBottom: variant === 'default' ? `2px solid ${colors.primary[200]}` : 'none',
+            },
+            '&[data-active]:hover': {
+                backgroundColor: variant === 'pills' ? colors.primary[200] : 'transparent',
+                color: variant === 'pills' ? 'white' : colors.primary[300],
+            },
+        },
+        tabLabel: {
+            ...fontBase,
+            fontSize: '1.6rem',
+            lineHeight: '2.4rem',
+        },
+        panel: {
+            padding: '1.6rem 0.8rem',
+        },
+        ...styles,
+    };
+    return (_jsx(MantineTabs, { styles: style, radius: "lg", defaultValue: defaultValue, value: value, orientation: orientation, variant: variant, ...props, children: children }));
+};
+export const Tabs = Object.assign(TabsComponent, {
+    List: MantineTabs.List,
+    Tab: MantineTabs.Tab,
+    Panel: MantineTabs.Panel,
+});

package/dist/components/Misc/IconBadge.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { palettes } from '../../constants/colors';
+export interface IconBadgeProps {
+    icon: React.ReactNode;
+    color: keyof typeof palettes;
+}
+export declare const IconBadge: ({ icon, color }: IconBadgeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconBadge.d.ts.map

package/dist/components/Misc/IconBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconBadge.d.ts","sourceRoot":"","sources":["../../../src/components/Misc/IconBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,OAAO,QAAQ,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,4CAkCxD,CAAC"}

package/dist/components/Misc/IconBadge.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { palettes } from '../../constants/colors';
+export const IconBadge = ({ icon, color }) => {
+    const getIconColors = () => {
+        const colorPalette = palettes[color];
+        return {
+            background: colorPalette[50],
+            icon: colorPalette[200],
+        };
+    };
+    const getIconSize = () => {
+        if (React.isValidElement(icon) && icon.props && typeof icon.props.size === 'number') {
+            const iconSize = icon.props.size;
+            const badgeSize = iconSize + 12;
+            return `${badgeSize / 10}rem`;
+        }
+    };
+    return (_jsx("div", { style: {
+            width: getIconSize(),
+            height: getIconSize(),
+            borderRadius: '50%',
+            backgroundColor: getIconColors().background,
+            color: getIconColors().icon,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: icon }));
+};

package/dist/components/Typography/Fraction.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { textStyle } from '../../constants';
+interface FractionProps {
+    numerator: React.ReactNode;
+    denominator: React.ReactNode;
+    variant: keyof typeof textStyle;
+}
+declare const Fraction: ({ numerator, denominator, variant }: FractionProps) => import("react/jsx-runtime").JSX.Element;
+export { Fraction };
+//# sourceMappingURL=Fraction.d.ts.map

package/dist/components/Typography/Fraction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fraction.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Fraction.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,UAAU,aAAa;IACrB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,OAAO,SAAS,CAAC;CACjC;AAED,QAAA,MAAM,QAAQ,GAAI,qCAAqC,aAAa,4CAcnE,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Typography/Fraction.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mantine/core';
+import { Text } from './Text';
+const Fraction = ({ numerator, denominator, variant }) => {
+    return (_jsx(Box, { component: "span", sx: { display: 'inline-flex', alignItems: 'center', lineHeight: 1 }, children: _jsxs(Box, { component: "span", sx: { display: 'inline-flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1 }, children: [_jsx(Text, { variant: variant, sx: { display: 'block', textAlign: 'center' }, children: numerator }), _jsx(Box, { component: "span", sx: { width: '100%', borderTop: '1px solid currentColor', margin: '2px 0' } }), _jsx(Text, { variant: variant, sx: { display: 'block', textAlign: 'center' }, children: denominator })] }) }));
+};
+export { Fraction };

package/dist/components/Typography/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvE,UAAU,SAAU,SAAQ,gBAAgB;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,QAAA,MAAM,IAAI,GAAI,8DAAuE,SAAS,4CAqB7F,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAuB,SAAS,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAY,MAAM,sBAAsB,CAAC;AAEjF,UAAU,SAAU,SAAQ,gBAAgB;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,QAAA,MAAM,IAAI,GAAI,8DAAuE,SAAS,4CAiC7F,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Typography/Text.js

@@ -9,12 +9,20 @@ const Text = ({ variant = 'body', size, children, weight, color, styles, ...prop
     const style = {
         margin: 0,
         padding: 0,
+        ...styles,
         ...selectedVariant,
         ...customSize,
         ...customWeight,
         ...customColor,
-        ...styles,
     };
-    return (_jsx(MantineText, { style: style, ...props, children: children }));
+    return (_jsx(MantineText, { style: style, sx: {
+            '& b': {
+                ...selectedVariant,
+                ...customSize,
+                ...customWeight,
+                ...customColor,
+                fontWeight: fontWeight.bold,
+            },
+        }, ...props, children: children }));
 };
 export { Text };

package/dist/components/index.d.ts

@@ -1,33 +1,45 @@
-export { CheckboxTable } from "./Data/CheckboxTable";
-export { RemovableItemList } from "./Data/RemovableItemList";
-export { ModalProvider } from "./Info/Modals/ModalProvider";
-export { Modal } from "./Info/Modals/Modal";
-export { NotificationProvider } from "./Info/Notifications/NotificationProvider";
-export { InfoTooltip } from "./Info/Tooltips/InfoTooltip";
-export { Tooltip } from "./Info/Tooltips/Tooltip";
-export { AutoComplete } from "./Inputs/TextInputs/AutoComplete";
-export { Button } from "./Inputs/Buttons/Button";
-export { UnstyledButton } from "./Inputs/Buttons/UnstyledButton";
-export { Checkbox } from "./Inputs/Controls/Checkbox";
-export { Toggle } from "./Inputs/Controls/Toggle";
-export { FontSelect } from "./Inputs/Dropdowns/FontSelect";
-export { MultiSelect } from "./Inputs/Dropdowns/MultiSelect";
-export { SearchBar } from "./Inputs/TextInputs/SearchBar";
-export { Select } from "./Inputs/Dropdowns/Select";
-export { Slider } from "./Inputs/Sliders/Slider";
-export { VolumeSlider } from "./Inputs/Sliders/VolumeSlider";
-export { TextArea } from "./Inputs/TextInputs/TextArea";
-export { TextInput } from "./Inputs/TextInputs/TextInput";
-export { PasswordInput } from "./Inputs/TextInputs/PasswordInput";
-export { Box } from "./Layout/Box";
-export { Center } from "./Layout/Center";
-export { Divider } from "./Layout/Divider";
-export { Frame } from "./Layout/Frame";
-export { Group } from "./Layout/Group";
-export { Loader } from "./Layout/Loader";
-export { Stack } from "./Layout/Stack";
-export { CollapsibleText } from "./Typography/CollapsibleText";
-export { Text } from "./Typography/Text";
-export { Title } from "./Typography/Title";
-export { Transition } from "./Misc/Transition";
+export { CheckboxTable } from './Data/CheckboxTable';
+export { Chart } from './Data/Chart';
+export { PieChart } from './Data/PieChart';
+export { RemovableItemList } from './Data/RemovableItemList';
+export { StatsCard } from './Data/StatsCard';
+export { Modal } from './Info/Modals/Modal';
+export { ModalProvider } from './Info/Modals/ModalProvider';
+export { NotificationProvider } from './Info/Notifications/NotificationProvider';
+export { Tooltip } from './Info/Tooltips/Tooltip';
+export { InfoTooltip } from './Info/Tooltips/InfoTooltip';
+export { InfoCard } from './Info/InfoCard';
+export { AutoComplete } from './Inputs/TextInputs/AutoComplete';
+export { Button } from './Inputs/Buttons/Button';
+export { UnstyledButton } from './Inputs/Buttons/UnstyledButton';
+export { Checkbox } from './Inputs/Controls/Checkbox';
+export { Toggle } from './Inputs/Controls/Toggle';
+export { FontSelect } from './Inputs/Dropdowns/FontSelect';
+export { MultiSelect } from './Inputs/Dropdowns/MultiSelect';
+export { SearchBar } from './Inputs/TextInputs/SearchBar';
+export { Select } from './Inputs/Dropdowns/Select';
+export { Slider } from './Inputs/Sliders/Slider';
+export { VolumeSlider } from './Inputs/Sliders/VolumeSlider';
+export { TextArea } from './Inputs/TextInputs/TextArea';
+export { TextInput } from './Inputs/TextInputs/TextInput';
+export { PasswordInput } from './Inputs/TextInputs/PasswordInput';
+export { DatePicker } from './Inputs/DatePickers/DatePicker';
+export { AutoGrid } from './Layout/AutoGrid';
+export { Grid } from './Layout/Grid';
+export { Box } from './Layout/Box';
+export { Center } from './Layout/Center';
+export { Divider } from './Layout/Divider';
+export { Frame } from './Layout/Frame';
+export { Group } from './Layout/Group';
+export { Loader } from './Layout/Loader';
+export { Stack } from './Layout/Stack';
+export { Card } from './Layout/Card';
+export { SectionCard } from './Layout/SectionCard';
+export { Tabs } from './Layout/Tabs';
+export { CollapsibleText } from './Typography/CollapsibleText';
+export { Text } from './Typography/Text';
+export { Title } from './Typography/Title';
+export { Fraction } from './Typography/Fraction';
+export { Transition } from './Misc/Transition';
+export { IconBadge } from './Misc/IconBadge';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGlD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGlE,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAG7D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}