@taiv/ui 1.2.0 → 1.3.0

package/dist/components/Inputs/Controls/RadioList.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '../../Layout/Stack';
+import { Radio } from './Radio';
+import { neutral } from '../../../constants/colors';
+import { Group } from '../../Layout/Group';
+const RadioList = ({ data, value, onChange, disabled = false, width }) => {
+    const handleChange = (optionValue) => {
+        if (onChange) {
+            onChange(optionValue);
+        }
+    };
+    return (_jsx(Stack, { gap: "0", style: {
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: '16px',
+            overflow: 'hidden',
+            padding: '0.2rem 0 0.2rem 0',
+            width,
+        }, children: data.map((option, index) => (_jsxs(Group, { position: "apart", style: {
+                padding: '1rem 1.2rem 0.8rem 1.2rem',
+                borderBottom: index < data.length - 1 ? `1px solid ${neutral[100]}` : 'none',
+                backgroundColor: 'white',
+            }, children: [_jsx(Radio, { value: option.value, label: option.label, checked: value === option.value, onChange: () => handleChange(option.value), disabled: disabled }), option.rightContent && option.rightContent] }, option.value))) }));
+};
+export { RadioList };

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

@@ -1 +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"}
+{"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;AAEhI,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,4CA4EpB,CAAC"}

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DatePickerInput as MantineDatePickerInput } from '@mantine/dates';
+import { createStyles } from '@mantine/core';
 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 = {
+    const { classes } = createStyles(() => ({
         root: {
             width: fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`,
         },
@@ -29,7 +30,42 @@ export const DatePicker = ({ size = 'md', width, fullWidth = false, placeholder
             fontSize: `calc(${selectedSize.fontSize} - 0.1rem)`,
             color: neutral[200],
         },
+        calendar: {
+            '& .mantine-UnstyledButton-root': {
+                borderRadius: '8px',
+                fontFamily: 'Poppins, sans-serif',
+            },
+            '& .mantine-Day-day': {
+                borderRadius: '50%',
+            },
+            '& .mantine-Day-day[data-selected="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+            },
+            '& .mantine-Day-day[data-in-range="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+            },
+            '& .mantine-Day-day[data-first-in-range="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+            },
+            '& .mantine-Day-day[data-last-in-range="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+            },
+            '& .mantine-WeekdaysRow-weekday': {
+                textAlign: 'center',
+                fontFamily: 'Poppins, sans-serif',
+            },
+        },
         ...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 }));
+    }))();
+    return (_jsx(MantineDatePickerInput, { icon: showIcon ? _jsx("i", { className: "far fa-calendar", style: { fontSize: 14, marginLeft: '0.25rem' } }) : undefined, radius: "lg", size: "xl", classNames: {
+            root: classes.root,
+            input: classes.input,
+            placeholder: classes.placeholder,
+            label: classes.label,
+            calendar: classes.calendar,
+        }, placeholder: placeholder, popoverProps: { radius: 'lg' }, ...props }));
 };

package/dist/components/Inputs/Dates/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/Dates/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Dates/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6C,oBAAoB,IAAI,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAEhI,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,4CA4EpB,CAAC"}

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatePickerInput as MantineDatePickerInput } from '@mantine/dates';
+import { createStyles } from '@mantine/core';
+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 { classes } = createStyles(() => ({
+        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],
+        },
+        calendar: {
+            '& .mantine-UnstyledButton-root': {
+                borderRadius: '8px',
+                fontFamily: 'Poppins, sans-serif',
+            },
+            '& .mantine-Day-day': {
+                borderRadius: '50%',
+            },
+            '& .mantine-Day-day[data-selected="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+            },
+            '& .mantine-Day-day[data-in-range="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+            },
+            '& .mantine-Day-day[data-first-in-range="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+            },
+            '& .mantine-Day-day[data-last-in-range="true"]': {
+                fontFamily: 'Poppins, sans-serif',
+                borderRadius: '50%',
+            },
+            '& .mantine-WeekdaysRow-weekday': {
+                textAlign: 'center',
+                fontFamily: 'Poppins, sans-serif',
+            },
+        },
+        ...styles,
+    }))();
+    return (_jsx(MantineDatePickerInput, { icon: showIcon ? _jsx("i", { className: "far fa-calendar", style: { fontSize: 14, marginLeft: '0.25rem' } }) : undefined, radius: "lg", size: "xl", classNames: {
+            root: classes.root,
+            input: classes.input,
+            placeholder: classes.placeholder,
+            label: classes.label,
+            calendar: classes.calendar,
+        }, placeholder: placeholder, popoverProps: { radius: 'lg' }, ...props }));
+};

package/dist/components/Inputs/Dropdowns/CascadingSelect.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SelectProps } from './Select';
+import { SelectOption } from '../../../utils/select';
+export type CascadingSelectItemProps = {
+    option: SelectOption;
+    icon?: React.ReactNode;
+    children?: CascadingSelectItemProps[];
+};
+export interface NestedSelectProps extends Omit<SelectProps, 'value' | 'data'> {
+    data?: CascadingSelectItemProps[];
+    value?: string | null;
+    width?: string | number;
+    fullWidth?: boolean;
+}
+declare const NestedSelect: ({ data, value, placeholder, size, width, fullWidth, styles, ...props }: NestedSelectProps) => import("react/jsx-runtime").JSX.Element;
+export { NestedSelect as CascadingSelect };
+//# sourceMappingURL=CascadingSelect.d.ts.map

package/dist/components/Inputs/Dropdowns/CascadingSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CascadingSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Dropdowns/CascadingSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAG/C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,wBAAwB,EAAE,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5E,IAAI,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,YAAY,GAAI,wEAAiH,iBAAiB,4CA+EvJ,CAAC;AAEF,OAAO,EAAE,YAAY,IAAI,eAAe,EAAE,CAAC"}

package/dist/components/Inputs/Dropdowns/CascadingSelect.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Group } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { componentSizes } from './shared/sizes';
+import { Select } from './Select';
+import { Text } from '../../Typography/Text';
+import { fontBase } from '../../../constants/font';
+const NestedSelect = ({ data = [], value, placeholder = 'Select an option', size = 'md', width, fullWidth = false, styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`;
+    // Flatten the hierarchy into a flat array with depth information
+    const flattenHierarchy = (items, depth = 0) => {
+        const result = [];
+        items.forEach((item) => {
+            result.push({ ...item.option, depth, icon: item.icon });
+            if (item.children && item.children.length > 0) {
+                result.push(...flattenHierarchy(item.children, depth + 1));
+            }
+        });
+        return result;
+    };
+    const flattenedData = flattenHierarchy(data);
+    const DropdownItem = ({ value, label, icon, depth, ...others }) => {
+        const indentLevel = depth * 0.8;
+        return (_jsx(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                padding: selectedSize.dropdownPadding,
+                borderRadius: '8px',
+                transition: 'background-color 200ms ease-in-out',
+                cursor: 'pointer',
+            }, ...others, children: _jsxs(Group, { spacing: "0.5rem", sx: { marginLeft: `${indentLevel}rem` }, children: [icon && _jsx(Box, { sx: { display: 'flex', alignItems: 'center', color: neutral[200], fontSize: selectedSize.fontSize }, children: icon }), _jsx(Text, { style: { ...fontBase, color: neutral[200], fontSize: selectedSize.fontSize }, children: label })] }) }));
+    };
+    const style = {
+        input: {
+            color: neutral[300],
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: '8px',
+            transition: 'all 200ms ease-in-out',
+            height: `${selectedSize.height}rem`,
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            padding: selectedSize.inputPadding,
+        },
+        item: {
+            color: neutral[200],
+            borderRadius: '8px',
+            transition: 'background-color 200ms ease-in-out',
+            padding: 0,
+            fontSize: selectedSize.fontSize,
+            marginBottom: '0.2rem',
+            '&[data-selected]': {
+                backgroundColor: neutral[50],
+                color: neutral[200],
+            },
+            '&[data-hovered]': {
+                backgroundColor: neutral[50],
+            },
+            '&:not(:hover):not([data-selected])': {
+                backgroundColor: 'white',
+            },
+            '&[data-selected]:hover': {
+                backgroundColor: neutral[50],
+            },
+            ...styles,
+        },
+    };
+    return _jsx(Select, { placeholder: placeholder, width: computedWidth, value: value, size: size, styles: style, itemComponent: DropdownItem, data: flattenedData, ...props });
+};
+export { NestedSelect as CascadingSelect };

package/dist/components/Inputs/Dropdowns/FontSelect.d.ts

@@ -1,10 +1,7 @@
 import { SelectProps } from './Select';
-export type ItemProps = {
-    value: string;
-    label: string;
-};
+import { SelectOption } from '../../../utils/select';
 export interface FontSelectProps extends Omit<SelectProps, 'value' | 'data'> {
-    data?: ItemProps[];
+    data?: SelectOption[];
     value?: string | null;
     width?: string | number;
     fullWidth?: boolean;

package/dist/components/Inputs/Dropdowns/FontSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Dropdowns/FontSelect.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAG/C,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1E,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,UAAU,GAAI,wEASjB,eAAe,4CA+DjB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"FontSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Dropdowns/FontSelect.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1E,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,UAAU,GAAI,wEAAyG,eAAe,4CAoD3I,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Inputs/Dropdowns/FontSelect.js

@@ -43,6 +43,6 @@ const FontSelect = ({ data, value, placeholder = 'Select a font', size = 'md', w
             ...styles,
         },
     };
-    return (_jsx(Select, { placeholder: placeholder, width: computedWidth, value: value, size: size, styles: style, itemComponent: DropdownItem, data: data || Fonts.FONTS, ...props }));
+    return _jsx(Select, { placeholder: placeholder, width: computedWidth, value: value, size: size, styles: style, itemComponent: DropdownItem, data: data || Fonts.FONTS, ...props });
 };
 export { FontSelect };

package/dist/components/Inputs/Dropdowns/NestedSelect.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SelectProps } from './Select';
+export type NestedSelectItemProps = {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+    children?: NestedSelectItemProps[];
+};
+export interface NestedSelectProps extends Omit<SelectProps, 'value' | 'data'> {
+    data?: NestedSelectItemProps[];
+    value?: string | null;
+    width?: string | number;
+    fullWidth?: boolean;
+}
+declare const NestedSelect: ({ data, value, placeholder, size, width, fullWidth, styles, ...props }: NestedSelectProps) => import("react/jsx-runtime").JSX.Element;
+export { NestedSelect };
+//# sourceMappingURL=NestedSelect.d.ts.map

package/dist/components/Inputs/Dropdowns/NestedSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NestedSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Dropdowns/NestedSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAI/C,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5E,IAAI,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,YAAY,GAAI,wEAAiH,iBAAiB,4CA+EvJ,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/Inputs/Dropdowns/NestedSelect.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Group } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { componentSizes } from './shared/sizes';
+import { Select } from './Select';
+import { Text } from '../../Typography/Text';
+import { fontBase } from '../../..';
+const NestedSelect = ({ data = [], value, placeholder = 'Select an option', size = 'md', width, fullWidth = false, styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`;
+    // Flatten the hierarchy into a flat array with depth information
+    const flattenHierarchy = (items, depth = 0) => {
+        const result = [];
+        items.forEach((item) => {
+            result.push({ ...item, depth });
+            if (item.children && item.children.length > 0) {
+                result.push(...flattenHierarchy(item.children, depth + 1));
+            }
+        });
+        return result;
+    };
+    const flattenedData = flattenHierarchy(data);
+    const DropdownItem = ({ value, label, icon, depth, ...others }) => {
+        const indentLevel = depth * 0.8;
+        return (_jsx(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                padding: selectedSize.dropdownPadding,
+                borderRadius: '8px',
+                transition: 'background-color 200ms ease-in-out',
+                cursor: 'pointer',
+            }, ...others, children: _jsxs(Group, { spacing: "0.5rem", sx: { marginLeft: `${indentLevel}rem` }, children: [icon && _jsx(Box, { sx: { display: 'flex', alignItems: 'center', color: neutral[200], fontSize: selectedSize.fontSize }, children: icon }), _jsx(Text, { style: { ...fontBase, color: neutral[200], fontSize: selectedSize.fontSize }, children: label })] }) }));
+    };
+    const style = {
+        input: {
+            color: neutral[300],
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: '8px',
+            transition: 'all 200ms ease-in-out',
+            height: `${selectedSize.height}rem`,
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            padding: selectedSize.inputPadding,
+        },
+        item: {
+            color: neutral[200],
+            borderRadius: '8px',
+            transition: 'background-color 200ms ease-in-out',
+            padding: 0,
+            fontSize: selectedSize.fontSize,
+            marginBottom: '0.2rem',
+            '&[data-selected]': {
+                backgroundColor: neutral[50],
+                color: neutral[200],
+            },
+            '&[data-hovered]': {
+                backgroundColor: neutral[50],
+            },
+            '&:not(:hover):not([data-selected])': {
+                backgroundColor: 'white',
+            },
+            '&[data-selected]:hover': {
+                backgroundColor: neutral[50],
+            },
+            ...styles,
+        },
+    };
+    return _jsx(Select, { placeholder: placeholder, width: computedWidth, value: value, size: size, styles: style, itemComponent: DropdownItem, data: flattenedData, ...props });
+};
+export { NestedSelect };

package/dist/components/Inputs/Dropdowns/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Dropdowns/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,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;CACpC;AAED,eAAO,MAAM,MAAM,GAAI,2DAOpB,WAAW,4CAmEb,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Dropdowns/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,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;CACpC;AAED,eAAO,MAAM,MAAM,GAAI,2DAA+F,WAAW,4CA0DhI,CAAC"}

package/dist/components/Inputs/Dropdowns/Select.js

@@ -33,7 +33,7 @@ export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'S
         },
         item: {
             padding: selectedSize.dropdownPadding,
-            marginBottom: '0.5rem',
+            marginBottom: '0.2rem',
             ...fontBase,
             fontSize: selectedSize.fontSize,
             color: neutral[200],
@@ -58,5 +58,5 @@ export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'S
         },
         ...styles,
     };
-    return (_jsx(MantineSelect, { radius: "md", size: size, styles: style, placeholder: placeholder, maxDropdownHeight: selectedSize.dropdownHeight, ...props }));
+    return _jsx(MantineSelect, { radius: "md", size: size, styles: style, placeholder: placeholder, maxDropdownHeight: selectedSize.dropdownHeight, ...props });
 };

package/dist/components/Inputs/Dropdowns/shared/fontSelectList.d.ts

@@ -1,7 +1,4 @@
-interface SelectOption {
-    value: string;
-    label: string;
-}
+import { SelectOption } from '../../../../utils/select';
 export declare const FONTS: SelectOption[];
 export declare const FONT_SIZES: SelectOption[];
 declare const _default: {

package/dist/components/Inputs/Dropdowns/shared/fontSelectList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fontSelectList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/shared/fontSelectList.ts"],"names":[],"mappings":"AAAA,UAAU,YAAY;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,KAAK,EAAE,YAAY,EAoC/B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,YAAY,EA0BpC,CAAC;;;;;AAEF,wBAGE"}
+{"version":3,"file":"fontSelectList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/shared/fontSelectList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,eAAO,MAAM,KAAK,EAAE,YAAY,EAoC/B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,YAAY,EA0BpC,CAAC;;;;;AAEF,wBAAqC"}

package/dist/components/Inputs/Dropdowns/shared/fontSelectList.js

@@ -62,7 +62,4 @@ export const FONT_SIZES = [
     { value: '64', label: '64' },
     { value: '72', label: '72' },
 ];
-export default {
-    FONTS,
-    FONT_SIZES,
-};
+export default { FONTS, FONT_SIZES };

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

@@ -3,7 +3,8 @@ import { CSSObject } from '@mantine/styles';
 interface DividerProps extends MantineDividerProps {
     width?: string | number;
     styles?: Record<string, CSSObject>;
+    color?: string;
 }
-declare const Divider: ({ width, styles, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Divider: ({ width, styles, color, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
 export { Divider };
 //# sourceMappingURL=Divider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,YAAY,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,UAAU,YAAa,SAAQ,mBAAmB;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,OAAO,GAAI,6BAA6B,YAAY,4CAEzD,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,YAAY,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,UAAU,YAAa,SAAQ,mBAAmB;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO,GAAI,oCAA2D,YAAY,4CAEvF,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Layout/Divider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Divider as MantineDivider } from '@mantine/core';
 import { neutral } from '../../constants/colors';
-const Divider = ({ width, styles, ...props }) => {
-    return _jsx(MantineDivider, { color: neutral[50], w: width, styles: styles, ...props });
+const Divider = ({ width = '100%', styles, color = neutral[50], ...props }) => {
+    return _jsx(MantineDivider, { color: color, w: width, styles: styles, ...props });
 };
 export { Divider };

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

@@ -1 +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"}
+{"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;AAIhD,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

@@ -2,11 +2,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';
+import { Box } from './Box';
 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: {
+    return (_jsxs(MantineCard, { radius: "20px", shadow: "lg", withBorder: true, padding: 0, ...props, children: [_jsx(Box, { sx: {
                     // 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 })] }));
+                }, children: _jsxs(Stack, { gap: "0.25rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Title, { variant: "cardSubheader", children: subtitle })] }) }), _jsx(Box, { sx: { padding: '2rem 3.2rem 3.2rem 3.2rem' }, children: children })] }));
 };

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { palettes } from '../../constants/colors';
+import { primitives } from '../../constants/colors';
 export interface IconBadgeProps {
     icon: React.ReactNode;
-    color: keyof typeof palettes;
+    color: keyof typeof primitives;
 }
 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

@@ -1 +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"}
+{"version":3,"file":"IconBadge.d.ts","sourceRoot":"","sources":["../../../src/components/Misc/IconBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,OAAO,UAAU,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,4CAgCxD,CAAC"}

package/dist/components/Misc/IconBadge.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { palettes } from '../../constants/colors';
+import { primitives } from '../../constants/colors';
 export const IconBadge = ({ icon, color }) => {
     const getIconColors = () => {
-        const colorPalette = palettes[color];
         return {
-            background: colorPalette[50],
-            icon: colorPalette[200],
+            background: primitives[color][50],
+            icon: primitives[color][200],
         };
     };
     const getIconSize = () => {

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

@@ -0,0 +1,10 @@
+import { fontWeight, fontSize } from '../../constants/font';
+interface FormulaProps {
+    expression: string;
+    weight?: keyof typeof fontWeight;
+    size?: keyof typeof fontSize;
+    color?: string;
+}
+declare const Formula: ({ expression, weight, size, color }: FormulaProps) => import("react/jsx-runtime").JSX.Element;
+export { Formula };
+//# sourceMappingURL=Formula.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Formula.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Formula.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAK5D,UAAU,YAAY;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0MD,QAAA,MAAM,OAAO,GAAI,qCAAqC,YAAY,4CAKjE,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}