@taiv/ui 1.0.0

package/dist/components/Inputs/Controls/Checkbox.d.ts

@@ -0,0 +1,27 @@
+import { CheckboxProps as MantineCheckboxProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+declare const componentSizes: {
+    readonly sm: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly mantineSize: "md";
+    };
+    readonly md: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly mantineSize: "lg";
+    };
+    readonly lg: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly mantineSize: "xl";
+    };
+};
+interface CheckboxProps extends MantineCheckboxProps {
+    checked: boolean;
+    styles?: Record<string, CSSObject>;
+    size?: keyof typeof componentSizes;
+}
+declare const Checkbox: ({ checked, styles, size, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export { Checkbox };
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/Inputs/Controls/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Controls/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;CAIV,CAAC;AAEX,UAAU,aAAc,SAAQ,oBAAoB;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;CACpC;AAED,QAAA,MAAM,QAAQ,GAAI,qCAA4C,aAAa,4CA4C1E,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as MantineCheckbox } from '@mantine/core';
+import { primary, neutral } from '../../../constants/colors';
+import { fontBase, fontSize } from '../../../constants/font';
+// Size Presets - Maps to next larger Mantine size, workaround since we dont have a Provider setup
+const componentSizes = {
+    sm: { mantineSize: 'md', ...fontSize['xs'] },
+    md: { mantineSize: 'lg', ...fontSize['sm'] },
+    lg: { mantineSize: 'xl', ...fontSize['md'] },
+};
+const Checkbox = ({ checked, styles, size = 'md', ...props }) => {
+    const selectedSize = componentSizes[size];
+    const style = {
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+            '& input[type="checkbox"]': {
+                margin: 0,
+                marginTop: 0,
+                lineHeight: 'normal',
+            },
+        },
+        input: {
+            cursor: props.disabled ? 'default' : 'pointer',
+            margin: 0,
+            marginTop: 0,
+            lineHeight: 'normal',
+            '&[type="checkbox"]': {
+                margin: 0,
+                marginTop: 0,
+                lineHeight: 'normal',
+            },
+            '&:checked': {
+                backgroundColor: primary[200],
+                borderColor: primary[200],
+            },
+            '&:hover': {
+                backgroundColor: checked ? primary[200] : neutral[50],
+            },
+        },
+        icon: {
+            color: 'white',
+            transform: 'translateY(0)',
+        },
+        label: {
+            cursor: props.disabled ? 'default' : 'pointer',
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+        },
+        ...styles,
+    };
+    return _jsx(MantineCheckbox, { checked: checked, size: selectedSize.mantineSize, styles: style, ...props });
+};
+export { Checkbox };

package/dist/components/Inputs/Controls/Toggle.d.ts

@@ -0,0 +1,29 @@
+import { CSSObject, SwitchProps as MantineToggleProps } from '@mantine/core';
+declare const componentSizes: {
+    readonly sm: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly width: 2.4;
+        readonly height: 1.8;
+        readonly mantineSize: "md";
+        readonly thumbScale: 1.3;
+        readonly thumbTranslate: 2;
+    };
+    readonly md: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly width: 4.8;
+        readonly height: 2.8;
+        readonly mantineSize: "xl";
+        readonly thumbScale: 1.3;
+        readonly thumbTranslate: 10;
+    };
+};
+interface ToggleProps extends MantineToggleProps {
+    size?: keyof typeof componentSizes;
+    label?: string;
+    styles?: Record<string, CSSObject>;
+}
+declare const Toggle: ({ checked, onChange, styles, size, label, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export { Toggle };
+//# sourceMappingURL=Toggle.d.ts.map

package/dist/components/Inputs/Controls/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Controls/Toggle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKtG,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;CAGV,CAAC;AAEX,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,MAAM,GAAI,sDAA6D,WAAW,4CA8CvF,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch as MantineToggle } from '@mantine/core';
+import { neutral, primary } from '../../../constants/colors';
+import { fontBase, fontSize } from '../../../constants/font';
+// Size Presets
+const componentSizes = {
+    sm: { width: 2.4, height: 1.8, mantineSize: 'md', thumbScale: 1.3, thumbTranslate: 2, ...fontSize['sm'] },
+    md: { width: 4.8, height: 2.8, mantineSize: 'xl', thumbScale: 1.3, thumbTranslate: 10, ...fontSize['md'] },
+};
+const Toggle = ({ checked, onChange, styles, size = 'md', label, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const style = {
+        container: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1rem',
+        },
+        track: {
+            width: `${selectedSize.width}rem`,
+            height: `${selectedSize.height}rem`,
+            transition: 'background-color 300ms ease-in-out',
+            cursor: 'pointer',
+            backgroundColor: checked ? primary[200] : neutral[50],
+        },
+        thumb: {
+            transform: `scale(${selectedSize.thumbScale}) translateX(${checked
+                ? `-${selectedSize.thumbTranslate + selectedSize.thumbTranslate / 2}%`
+                : `${selectedSize.thumbTranslate}%`})`,
+            boxShadow: checked ? '0 2px 2px rgba(0,0,0,0.2)' : 'none',
+            transition: 'all 300ms ease-in-out',
+            border: checked ? `1px solid ${primary[200]}` : `1px solid ${neutral[50]}`,
+        },
+        label: {
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+        },
+        ...styles,
+    };
+    return (_jsxs("div", { style: style.container, children: [_jsx(MantineToggle, { checked: checked, onChange: onChange, color: primary[200], size: selectedSize.mantineSize, styles: style, ...props }), label && _jsx("span", { style: style.label, children: label })] }));
+};
+export { Toggle };

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { componentSizes } from './shared/sizes';
+import { Select } from './Select';
+import Fonts from './shared/fontSelectList';
+const FontSelect = ({ data, value, placeholder = 'Select a font', size = 'md', width, fullWidth = false, styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`;
+    const DropdownItem = ({ value, label, ...others }) => (_jsx(Box, { title: label, children: _jsx("div", { style: {
+                fontFamily: value,
+                fontSize: selectedSize.fontSize,
+                color: neutral[200],
+                padding: selectedSize.dropdownPadding,
+                borderRadius: '0.5rem',
+                transition: 'background-color 200ms ease-in-out',
+            }, ...others, children: label }) }));
+    const style = {
+        input: {
+            fontFamily: value || 'Poppins, sans-serif',
+            color: neutral[200],
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: '8px',
+            transition: 'all 200ms ease-in-out',
+            height: `${selectedSize.height}rem`,
+            fontSize: selectedSize.fontSize,
+            padding: selectedSize.inputPadding,
+        },
+        item: {
+            fontFamily: 'Poppins, sans-serif',
+            color: neutral[200],
+            borderRadius: '8px',
+            transition: 'background-color 200ms ease-in-out',
+            padding: selectedSize.dropdownPadding,
+            fontSize: selectedSize.fontSize,
+            '&[data-selected]': {
+                backgroundColor: neutral[50],
+                color: neutral[200],
+            },
+            '&[data-hovered]': {
+                backgroundColor: neutral[50],
+            },
+            ...styles,
+        },
+    };
+    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/MultiSelect.d.ts

@@ -0,0 +1,12 @@
+import { MultiSelectProps as MantineMultiSelectProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+import { componentSizes } from './shared/sizes';
+interface MultiSelectProps extends MantineMultiSelectProps {
+    size?: keyof typeof componentSizes;
+    width?: string | number;
+    fullWidth?: boolean;
+    styles?: Record<string, CSSObject>;
+}
+export declare const MultiSelect: ({ size, width, fullWidth, placeholder, styles, ...props }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MultiSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Dropdowns/MultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,gBAAgB,IAAI,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,UAAU,gBAAiB,SAAQ,uBAAuB;IACxD,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,WAAW,GAAI,2DAOzB,gBAAgB,4CAoGlB,CAAC"}

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MultiSelect as MantineMultiSelect } from '@mantine/core';
+import { neutral, primary } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { componentSizes } from './shared/sizes';
+export const MultiSelect = ({ size = 'md', width, fullWidth = false, placeholder = 'Select options', styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.maxWidth}rem`;
+    const style = {
+        input: {
+            height: 'auto',
+            minHeight: `${selectedSize.height}rem`,
+            padding: selectedSize.inputPadding,
+            display: 'flex',
+            alignItems: 'center',
+            cursor: 'pointer',
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: '8px',
+            backgroundColor: 'white',
+            transition: 'all 200ms ease-in-out',
+            '&:hover': {
+                backgroundColor: 'white',
+            },
+        },
+        dropdown: {
+            border: 'none',
+            borderRadius: '8px',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+        },
+        item: {
+            padding: selectedSize.dropdownPadding,
+            marginBottom: '0.5rem',
+            borderRadius: '8px',
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+            backgroundColor: 'white',
+            '&[data-selected]': {
+                backgroundColor: neutral[50],
+                color: neutral[200],
+                '&:hover': {
+                    backgroundColor: neutral[50],
+                },
+            },
+            '&:hover': {
+                backgroundColor: neutral[50],
+            },
+            '&:not(:hover):not([data-selected])': {
+                backgroundColor: 'white',
+            },
+        },
+        value: {
+            padding: selectedSize.valuePadding,
+            borderRadius: '25px',
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.125rem)`,
+            color: primary[300],
+            backgroundColor: primary[50],
+            '&:hover': {
+                backgroundColor: primary[50],
+            },
+        },
+        defaultValueRemove: {
+            marginLeft: '0.75rem',
+            borderRadius: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: primary[300],
+            backgroundColor: primary[25],
+            '&:hover': {
+                backgroundColor: primary[25],
+            },
+        },
+        label: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.1rem)`,
+            color: neutral[200],
+        },
+        defaultValueLabel: {
+            ...fontBase,
+        },
+        searchInput: {
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+        },
+        ...styles,
+    };
+    return (_jsx(MantineMultiSelect, { placeholder: placeholder, size: size, w: computedWidth, styles: style, maxDropdownHeight: selectedSize.dropdownHeight, searchable: true, ...props }));
+};

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

@@ -0,0 +1,11 @@
+import { SelectProps as MantineSelectProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+import { componentSizes } from './shared/sizes';
+export interface SelectProps extends MantineSelectProps {
+    size?: keyof typeof componentSizes;
+    width?: string | number;
+    fullWidth?: boolean;
+    styles?: Record<string, CSSObject>;
+}
+export declare const Select: ({ size, width, fullWidth, placeholder, styles, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select as MantineSelect } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { componentSizes } from './shared/sizes';
+export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'Select an option', styles, ...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]}`,
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            transition: 'all 200ms ease-in-out',
+        },
+        label: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.1rem)`,
+            color: neutral[200],
+        },
+        dropdown: {
+            border: 'none',
+            borderRadius: '8px',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+        },
+        item: {
+            padding: selectedSize.dropdownPadding,
+            marginBottom: '0.5rem',
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+            borderRadius: '8px',
+            backgroundColor: 'white',
+            '&[data-selected]': {
+                backgroundColor: neutral[50],
+                color: neutral[200],
+                '&:hover': {
+                    backgroundColor: neutral[50],
+                },
+            },
+            '&:hover': {
+                backgroundColor: neutral[50],
+            },
+            '&:not(:hover):not([data-selected])': {
+                backgroundColor: 'white',
+            },
+        },
+        rightSection: {
+            color: neutral[200],
+        },
+        ...styles,
+    };
+    return (_jsx(MantineSelect, { radius: "md", size: size, styles: style, placeholder: placeholder, maxDropdownHeight: selectedSize.dropdownHeight, ...props }));
+};

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

@@ -0,0 +1,12 @@
+interface SelectOption {
+    value: string;
+    label: string;
+}
+export declare const FONTS: SelectOption[];
+export declare const FONT_SIZES: SelectOption[];
+declare const _default: {
+    FONTS: SelectOption[];
+    FONT_SIZES: SelectOption[];
+};
+export default _default;
+//# sourceMappingURL=fontSelectList.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,68 @@
+export const FONTS = [
+    { value: 'Poppins', label: 'Poppins' },
+    { value: 'Insanibu', label: 'Insanibu' },
+    { value: 'MINI_Serif', label: 'MINI_Serif' },
+    { value: 'CHEESEPIZZA', label: 'CHEESEPIZZA' },
+    { value: 'BMW', label: 'BMW' },
+    { value: 'Abrakatebra', label: 'Abrakatebra' },
+    { value: 'Aramisi', label: 'Aramisi' },
+    { value: 'Facebook', label: 'Facebook' },
+    { value: 'Merriweather', label: 'Merriweather' },
+    { value: 'MINI_Sans', label: 'MINI_Sans' },
+    { value: 'Arvo', label: 'Arvo' },
+    { value: 'Dolce_Vita', label: 'Dolce_Vita' },
+    { value: 'Spectral', label: 'Spectral' },
+    { value: 'Twitter', label: 'Twitter' },
+    { value: 'CaviarDreams', label: 'CaviarDreams' },
+    { value: 'Freestyle_Script', label: 'Freestyle_Script' },
+    { value: 'Roboto', label: 'Roboto' },
+    { value: 'Cardo', label: 'Cardo' },
+    { value: 'Oswald', label: 'Oswald' },
+    { value: 'Nunito', label: 'Nunito' },
+    { value: 'Oxygen', label: 'Oxygen' },
+    { value: 'arial', label: 'arial' },
+    { value: 'Lora', label: 'Lora' },
+    { value: 'Montserrat', label: 'Montserrat' },
+    { value: 'College_Block', label: 'College_Block' },
+    { value: 'Karla', label: 'Karla' },
+    { value: 'Raleway', label: 'Raleway' },
+    { value: 'Rubik', label: 'Rubik' },
+    { value: 'Underground', label: 'Underground' },
+    { value: 'SS_Nickson_One', label: 'SS_Nickson_One' },
+    { value: 'Instagram', label: 'Instagram' },
+    { value: 'Cormorant', label: 'Cormorant' },
+    { value: 'Hamburger_Heaven', label: 'Hamburger_Heaven' },
+    { value: 'Coquette_Regular', label: 'Coquette_Regular' },
+    { value: 'Lato', label: 'Lato' },
+];
+export const FONT_SIZES = [
+    { value: '5', label: '5' },
+    { value: '5.5', label: '5.5' },
+    { value: '6.5', label: '6.5' },
+    { value: '7.5', label: '7.5' },
+    { value: '8', label: '8' },
+    { value: '9', label: '9' },
+    { value: '10', label: '10' },
+    { value: '10.5', label: '10.5' },
+    { value: '11', label: '11' },
+    { value: '12', label: '12' },
+    { value: '14', label: '14' },
+    { value: '16', label: '16' },
+    { value: '18', label: '18' },
+    { value: '20', label: '20' },
+    { value: '22', label: '22' },
+    { value: '24', label: '24' },
+    { value: '26', label: '26' },
+    { value: '28', label: '28' },
+    { value: '36', label: '36' },
+    { value: '40', label: '40' },
+    { value: '44', label: '44' },
+    { value: '48', label: '48' },
+    { value: '58', label: '58' },
+    { value: '64', label: '64' },
+    { value: '72', label: '72' },
+];
+export default {
+    FONTS,
+    FONT_SIZES,
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/shared/sizes.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B1B,CAAC"}

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

@@ -0,0 +1,33 @@
+import { inputFontSize } from '../../../../constants/font';
+export const componentSizes = {
+    sm: {
+        height: 3.2,
+        ...inputFontSize['sm'],
+        inputPadding: '0.25rem 2rem 0.25rem 1rem',
+        dropdownPadding: '0.5rem 1rem',
+        valuePadding: '1rem 0.8rem 1rem 1rem',
+        minWidth: 18,
+        maxWidth: 25,
+        dropdownHeight: 260,
+    },
+    md: {
+        height: 3.8,
+        ...inputFontSize['md'],
+        inputPadding: '0.5rem 2.25rem 0.5rem 1rem',
+        dropdownPadding: '0.75rem 1.125rem',
+        valuePadding: '1.25rem 1rem 1.25rem 1.25rem',
+        minWidth: 22,
+        maxWidth: 32.8,
+        dropdownHeight: 330,
+    },
+    lg: {
+        height: 4.8,
+        ...inputFontSize['lg'],
+        inputPadding: '0.75rem 2.5rem 0.75rem 1rem',
+        dropdownPadding: '1rem 1.5rem',
+        valuePadding: '1.25rem 1rem 1.25rem 1.25rem',
+        minWidth: 30,
+        maxWidth: 42,
+        dropdownHeight: 385,
+    },
+};

package/dist/components/Inputs/Sliders/Slider.d.ts

@@ -0,0 +1,16 @@
+import React, { CSSProperties } from 'react';
+import { SliderProps as MantineSliderProps } from '@mantine/core';
+import { componentSizes } from './shared/sizes';
+export interface SliderProps extends MantineSliderProps {
+    width?: string | number;
+    fullWidth?: boolean;
+    size?: keyof typeof componentSizes;
+    setValue: (value: number) => void;
+    animate?: boolean;
+    label?: React.ReactNode;
+    compact?: boolean;
+    styles?: Record<string, CSSProperties>;
+}
+declare const Slider: ({ width, size, value, setValue, disabled, styles, animate, label, fullWidth, compact, ...props }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export { Slider };
+//# sourceMappingURL=Slider.d.ts.map

package/dist/components/Inputs/Sliders/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Sliders/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAa,MAAM,eAAe,CAAC;AAItG,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CACxC;AAED,QAAA,MAAM,MAAM,GAAI,kGAYb,WAAW,4CAuGb,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}