@taiv/ui 1.0.0

package/dist/components/Inputs/Sliders/Slider.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as MantineSlider } from '@mantine/core';
+import { useHover } from '@mantine/hooks';
+import { neutral, primary } from '../../../constants/colors';
+import { fontBase, textStyle } from '../../../constants/font';
+import { componentSizes } from './shared/sizes';
+const Slider = ({ width, size = 'md', value, setValue, disabled = false, styles, animate = false, label, fullWidth = false, compact = false, ...props }) => {
+    const { hovered, ref } = useHover();
+    const sliderColor = disabled ? neutral[100] : primary[200];
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const wrapperStyle = {
+        container: {
+            width: fullWidth ? '100%' : 'auto',
+            display: 'flex',
+            gap: '1rem',
+            alignItems: 'center',
+        },
+        label: {
+            ...fontBase,
+            ...selectedSize.labelFontSize,
+            color: disabled ? neutral[100] : neutral[200],
+            whiteSpace: 'nowrap',
+            flexShrink: 0,
+        },
+        valueLabel: {
+            ...fontBase,
+            ...selectedSize.valueFontSize,
+            color: disabled ? neutral[100] : neutral[200],
+            whiteSpace: 'nowrap',
+            flexShrink: 0,
+            textAlign: 'right',
+            minWidth: '2rem',
+        },
+        sliderContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1rem',
+            flex: fullWidth ? 1 : 'none',
+        },
+    };
+    const sliderStyle = {
+        root: {
+            flex: 1,
+            minWidth: '10rem',
+        },
+        thumb: {
+            width: `${selectedSize.thumbSize}rem`,
+            height: `${selectedSize.thumbSize}rem`,
+            backgroundColor: sliderColor,
+            borderColor: sliderColor,
+            boxShadow: '0 2px 2px rgba(0,0,0,0.2)',
+            transition: 'opacity 150ms ease',
+            opacity: animate ? (hovered ? 1 : 0) : 1,
+        },
+        trackContainer: {
+            cursor: disabled ? 'default' : 'pointer',
+        },
+        track: {
+            height: `${selectedSize.trackHeight}rem`,
+            backgroundColor: sliderColor,
+        },
+        bar: {
+            height: `${selectedSize.trackHeight}rem`,
+            backgroundColor: sliderColor,
+        },
+        marksContainer: {
+            height: `${selectedSize.trackHeight}rem`,
+        },
+        mark: {
+            width: '0.7rem',
+            height: '0.7rem',
+            borderColor: neutral[50],
+            backgroundColor: neutral[50],
+            transform: 'translateY(-0.15rem) translateX(-0.2rem)',
+        },
+        markFilled: {
+            borderColor: sliderColor,
+            backgroundColor: 'white',
+        },
+        markLabel: {
+            ...textStyle['caption'],
+            color: disabled ? neutral[100] : neutral[200],
+            marginTop: '0.4rem',
+            textAlign: 'center',
+        },
+        ...styles,
+    };
+    return (_jsxs("div", { style: wrapperStyle.container, children: [!compact && label && _jsx("div", { style: wrapperStyle.label, children: label }), _jsxs("div", { style: wrapperStyle.sliderContainer, children: [_jsx(MantineSlider, { value: value, onChange: setValue, w: computedWidth, showLabelOnHover: false, disabled: disabled, ref: ref, styles: sliderStyle, ...props }), !compact && _jsx("div", { style: wrapperStyle.valueLabel, children: value })] })] }));
+};
+export { Slider };

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

@@ -0,0 +1,6 @@
+import { SliderProps } from './Slider';
+interface VolumeSliderProps extends Omit<SliderProps, 'label'> {
+}
+declare const VolumeSlider: ({ compact, size, fullWidth, ...props }: VolumeSliderProps) => import("react/jsx-runtime").JSX.Element;
+export { VolumeSlider };
+//# sourceMappingURL=VolumeSlider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/Sliders/VolumeSlider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAG/C,UAAU,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;CAAG;AAEjE,QAAA,MAAM,YAAY,GAAI,wCAA+D,iBAAiB,4CAmCrG,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/Inputs/Sliders/VolumeSlider.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconVolume, IconVolume2, IconVolume3 } from '@tabler/icons-react';
+import { neutral } from '../../../constants/colors';
+import { Slider } from './Slider';
+import { componentSizes } from './shared/sizes';
+const VolumeSlider = ({ compact = false, size = 'md', fullWidth = false, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const getIcon = () => {
+        var _a;
+        const iconColor = props.disabled ? neutral[100] : neutral[200];
+        const currentValue = (_a = props.value) !== null && _a !== void 0 ? _a : 0;
+        if (currentValue === 0)
+            return _jsx(IconVolume3, { size: selectedSize.iconSize, color: iconColor });
+        if (currentValue <= 50)
+            return _jsx(IconVolume2, { size: selectedSize.iconSize, color: iconColor });
+        return _jsx(IconVolume, { size: selectedSize.iconSize, color: iconColor });
+    };
+    const style = {
+        container: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1rem',
+            width: fullWidth ? '100%' : 'auto',
+            padding: '0.5rem 0',
+        },
+        iconContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: `${selectedSize.iconSize / 10}rem`, // Based on 10px root font
+            height: `${selectedSize.iconSize / 10}rem`,
+            flexShrink: 0,
+        },
+    };
+    return (_jsxs("div", { style: style.container, children: [!compact && _jsx("div", { style: style.iconContainer, children: getIcon() }), _jsx(Slider, { ...props, compact: compact, size: size, fullWidth: fullWidth })] }));
+};
+export { VolumeSlider };

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

@@ -0,0 +1,45 @@
+export declare const componentSizes: {
+    readonly sm: {
+        readonly width: 20;
+        readonly trackHeight: 0.4;
+        readonly thumbSize: 1;
+        readonly labelFontSize: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        readonly valueFontSize: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        readonly iconSize: 18;
+    };
+    readonly md: {
+        readonly width: 30;
+        readonly trackHeight: 0.5;
+        readonly thumbSize: 1.25;
+        readonly labelFontSize: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        readonly valueFontSize: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        readonly iconSize: 22;
+    };
+    readonly lg: {
+        readonly width: 40;
+        readonly trackHeight: 0.6;
+        readonly thumbSize: 1.5;
+        readonly labelFontSize: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        readonly valueFontSize: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        readonly iconSize: 26;
+    };
+};
+//# sourceMappingURL=sizes.d.ts.map

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

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

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

@@ -0,0 +1,27 @@
+import { inputFontSize } from '../../../../constants/font';
+export const componentSizes = {
+    sm: {
+        width: 20,
+        trackHeight: 0.4,
+        thumbSize: 1,
+        labelFontSize: inputFontSize['sm'],
+        valueFontSize: inputFontSize['sm'],
+        iconSize: 18,
+    },
+    md: {
+        width: 30,
+        trackHeight: 0.5,
+        thumbSize: 1.25,
+        labelFontSize: inputFontSize['md'],
+        valueFontSize: inputFontSize['md'],
+        iconSize: 22,
+    },
+    lg: {
+        width: 40,
+        trackHeight: 0.6,
+        thumbSize: 1.5,
+        labelFontSize: inputFontSize['lg'],
+        valueFontSize: inputFontSize['lg'],
+        iconSize: 26,
+    },
+};

package/dist/components/Inputs/TextInputs/AutoComplete.d.ts

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

package/dist/components/Inputs/TextInputs/AutoComplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInputs/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuC,iBAAiB,IAAI,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,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,YAAY,GAAI,2DAO1B,iBAAiB,4CA8DnB,CAAC"}

package/dist/components/Inputs/TextInputs/AutoComplete.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Autocomplete as MantineAutocomplete } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { componentSizes } from '../Dropdowns/shared/sizes';
+export const AutoComplete = ({ size = 'md', width, fullWidth = false, placeholder = 'Select an option', styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.minWidth}rem`;
+    const style = {
+        input: {
+            height: `${selectedSize.height}rem`,
+            fontSize: selectedSize.fontSize,
+            padding: selectedSize.inputPadding,
+            ...fontBase,
+            color: neutral[300],
+            transition: 'all 200ms ease-in-out',
+            borderRadius: '8px',
+        },
+        label: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            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(MantineAutocomplete, { w: computedWidth, size: size, styles: style, placeholder: placeholder, maxDropdownHeight: selectedSize.dropdownHeight, ...props }));
+};

package/dist/components/Inputs/TextInputs/PasswordInput.d.ts

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

package/dist/components/Inputs/TextInputs/PasswordInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInputs/PasswordInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyC,kBAAkB,IAAI,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAShD,KAAK,kBAAkB,GAAG,yBAAyB,GAAG;IACpD,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,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,2DAOpB,kBAAkB,4CAiDpB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/PasswordInput.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PasswordInput as MantinePasswordInput } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { componentSizes } from './shared/sizes';
+// Workaround for Icon sizing since we dont have a Provider setup
+const mantineSize = {
+    sm: 'lg',
+    md: 'xl',
+    lg: 'xl',
+};
+const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placeholder = 'Enter password', ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const style = {
+        input: {
+            ...fontBase,
+            color: neutral[200],
+            transition: 'all 200ms ease-in-out',
+            borderRadius: '8px',
+            height: `${selectedSize.height}rem`,
+            fontSize: selectedSize.fontSize,
+            padding: '0 1rem',
+        },
+        label: {
+            ...fontBase,
+            color: neutral[200],
+            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+        },
+        error: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+        },
+        innerInput: {
+            ...fontBase,
+            color: neutral[200],
+            height: `${selectedSize.height}rem`,
+            fontSize: selectedSize.fontSize,
+            padding: '0 1rem',
+        },
+        visibilityToggle: {
+            color: neutral[200],
+            marginRight: '1.25rem',
+            '&:hover': {
+                backgroundColor: 'transparent',
+            },
+        },
+        ...styles,
+    };
+    return (_jsx(MantinePasswordInput, { w: computedWidth, ...props, placeholder: placeholder, size: mantineSize[size], styles: style }));
+};
+export { PasswordInput };

package/dist/components/Inputs/TextInputs/SearchBar.d.ts

@@ -0,0 +1,7 @@
+import { TextInputProps } from '@mantine/core';
+interface SearchBarProps extends TextInputProps {
+    fullWidth?: boolean;
+}
+declare const SearchBar: ({ width, fullWidth, size, styles, ...props }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
+export { SearchBar };
+//# sourceMappingURL=SearchBar.d.ts.map

package/dist/components/Inputs/TextInputs/SearchBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInputs/SearchBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAM/C,UAAU,cAAe,SAAQ,cAAc;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CA4B7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/SearchBar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextInput } from './TextInput';
+import { neutral } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { componentSizes } from './shared/sizes';
+const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props }) => {
+    const selectedSize = componentSizes[size || 'md'];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const style = {
+        input: {
+            ...fontBase,
+            fontSize: selectedSize.fontSize,
+            color: neutral[200],
+            border: `1px solid ${neutral[100]}`,
+            borderRadius: '8px',
+            height: `${selectedSize.height}rem`,
+            transition: 'all 200ms ease-in-out',
+        },
+        ...styles,
+    };
+    return (_jsx(TextInput, { placeholder: "Search", width: computedWidth, styles: style, icon: _jsx("i", { className: "fas fa-search", style: { fontSize: 14, marginLeft: '0.25rem' } }), size: 'lg', fullWidth: fullWidth, ...props }));
+};
+export { SearchBar };

package/dist/components/Inputs/TextInputs/TextArea.d.ts

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

package/dist/components/Inputs/TextInputs/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInputs/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,KAAK,aAAa,GAAG,oBAAoB,GAAG;IAC1C,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,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,8CAA6D,aAAa,4CAqC3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/TextArea.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Textarea as MantineTextarea } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { componentSizes } from './shared/sizes';
+const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const style = {
+        input: {
+            minHeight: `${selectedSize.height}rem`,
+            fontSize: selectedSize.fontSize,
+            padding: '0.75rem 1rem',
+            ...fontBase,
+            color: neutral[200],
+            transition: 'all 200ms ease-in-out',
+            borderRadius: '8px',
+            resize: 'vertical',
+        },
+        label: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: neutral[200],
+        },
+        error: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+        },
+        ...styles,
+    };
+    return (_jsx(MantineTextarea, { ...props, size: size, styles: style, w: computedWidth, minRows: props.minRows || selectedSize.minRows, maxRows: props.maxRows || selectedSize.maxRows }));
+};
+export { TextArea };

package/dist/components/Inputs/TextInputs/TextInput.d.ts

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

package/dist/components/Inputs/TextInputs/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInputs/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiC,cAAc,IAAI,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,KAAK,cAAc,GAAG,qBAAqB,GAAG;IAC5C,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,CAAC;AAEF,QAAA,MAAM,SAAS,GAAI,8CAA6D,cAAc,4CA2B7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Inputs/TextInputs/TextInput.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextInput as MantineTextInput } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { fontBase } from '../../../constants/font';
+import { componentSizes } from './shared/sizes';
+const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const style = {
+        input: {
+            height: `${selectedSize.height}rem`,
+            fontSize: selectedSize.fontSize,
+            padding: '0 1rem',
+            ...fontBase,
+            color: neutral[200],
+            transition: 'all 200ms ease-in-out',
+            borderRadius: '8px',
+        },
+        label: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: neutral[200],
+        },
+        error: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+        },
+        ...styles,
+    };
+    return _jsx(MantineTextInput, { w: computedWidth, ...props, size: size, styles: style });
+};
+export { TextInput };

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

@@ -0,0 +1,27 @@
+export declare const componentSizes: {
+    readonly sm: {
+        readonly width: 20;
+        readonly minRows: 3;
+        readonly maxRows: 6;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly height: 3.2;
+    };
+    readonly md: {
+        readonly width: 32.8;
+        readonly minRows: 4;
+        readonly maxRows: 8;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly height: 4;
+    };
+    readonly lg: {
+        readonly width: 42;
+        readonly minRows: 6;
+        readonly maxRows: 9;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly height: 4.8;
+    };
+};
+//# sourceMappingURL=sizes.d.ts.map

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

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

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

@@ -0,0 +1,6 @@
+import { inputFontSize } from '../../../../constants/font';
+export const componentSizes = {
+    sm: { height: 3.2, ...inputFontSize['sm'], width: 20, minRows: 3, maxRows: 6 },
+    md: { height: 4, ...inputFontSize['md'], width: 32.8, minRows: 4, maxRows: 8 },
+    lg: { height: 4.8, ...inputFontSize['lg'], width: 42, minRows: 6, maxRows: 9 },
+};

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

@@ -0,0 +1,10 @@
+import { BoxProps as MantineBoxProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+interface BoxProps extends MantineBoxProps {
+    width?: string | number;
+    onClick?: () => void;
+    styles?: Record<string, CSSObject>;
+}
+declare const Box: ({ width, styles, onClick, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export { Box };
+//# sourceMappingURL=Box.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Box.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,QAAQ,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,QAAS,SAAQ,eAAe;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,GAAG,GAAI,sCAAsC,QAAQ,4CAE1D,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/Layout/Box.js

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

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

@@ -0,0 +1,9 @@
+import { CenterProps as MantineCenterProps } from '@mantine/core';
+import { CSSObject } from '@mantine/styles';
+interface CenterProps extends MantineCenterProps {
+    width?: string | number;
+    styles?: Record<string, CSSObject>;
+}
+declare const Center: ({ width, styles, ...props }: CenterProps) => import("react/jsx-runtime").JSX.Element;
+export { Center };
+//# sourceMappingURL=Center.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Center.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,MAAM,GAAI,6BAA6B,WAAW,4CAEvD,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Layout/Center.js

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

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

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

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

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

package/dist/components/Layout/Divider.js

@@ -0,0 +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 });
+};
+export { Divider };

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

@@ -0,0 +1,12 @@
+import { CSSObject } from '@mantine/core';
+import { ReactNode } from 'react';
+interface FrameProps {
+    title: string;
+    subtitle?: string;
+    children: ReactNode;
+    width?: string | number;
+    styles?: Record<string, CSSObject>;
+}
+declare const Frame: ({ title, subtitle, children, width, styles }: FrameProps) => import("react/jsx-runtime").JSX.Element;
+export { Frame };
+//# sourceMappingURL=Frame.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Frame.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,KAAK,GAAI,8CAA8C,UAAU,4CAUtE,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Layout/Frame.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '../Layout/Stack';
+import { Title } from '../Typography/Title';
+const Frame = ({ title, subtitle, children, width, styles }) => {
+    return (_jsxs(Stack, { mt: "1.25rem", width: width || '100%', gap: "0", ...styles, children: [_jsxs(Stack, { mb: "1.25rem", gap: "0", children: [_jsx(Title, { variant: "sectionHeader", children: title }), subtitle && _jsx(Title, { variant: "sectionSubheader", children: subtitle })] }), children] }));
+};
+export { Frame };