@taiv/ui 1.3.2 → 1.4.0

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

@@ -0,0 +1,242 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select } from './Select';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/Dropdowns/Select',
+    component: Select,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls the select size',
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        placeholder: {
+            control: { type: 'text' },
+            description: 'Placeholder text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: "'Select an option'" },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Select label',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        description: {
+            control: { type: 'text' },
+            description: 'Description text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        error: {
+            control: { type: 'text' },
+            description: 'Error message',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            description: 'Disabled state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        required: {
+            control: { type: 'boolean' },
+            description: 'Required field',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        fullWidth: {
+            control: { type: 'boolean' },
+            description: 'Full width of container',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        width: {
+            control: { type: 'text' },
+            description: 'Custom width',
+            table: {
+                type: { summary: 'string | number' },
+            },
+        },
+        clearable: {
+            control: { type: 'boolean' },
+            description: 'Allow clearing selection',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        searchable: {
+            control: { type: 'boolean' },
+            description: 'Allow searching options',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Change handler function',
+            table: {
+                type: { summary: '(value: string | null) => void' },
+            },
+        },
+    },
+};
+export default meta;
+const basicOptions = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+    { value: 'option4', label: 'Option 4' },
+];
+const countryOptions = [
+    { value: 'us', label: 'United States' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'uk', label: 'United Kingdom' },
+    { value: 'de', label: 'Germany' },
+    { value: 'fr', label: 'France' },
+    { value: 'jp', label: 'Japan' },
+    { value: 'au', label: 'Australia' },
+];
+export const Default = {
+    args: {
+        label: 'Choose an option',
+        data: basicOptions,
+        placeholder: 'Select an option',
+        size: 'md',
+        disabled: false,
+        required: false,
+        fullWidth: false,
+        clearable: false,
+        searchable: false,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '220px' }, children: _jsx(Story, {}) })),
+    ],
+    parameters: {
+        docs: {
+            source: {
+                code: `<Select
+  label="Choose an option"
+  value={selectedValue}
+  onChange={setSelectedValue}
+  data={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+  ]}
+/>`,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Select, { size: "sm", label: "Small Select", data: basicOptions }), _jsx(Select, { size: "md", label: "Medium Select (Default)", data: basicOptions }), _jsx(Select, { size: "lg", label: "Large Select", data: basicOptions })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<Select size="sm" label="Small Select" value={value} onChange={setValue} data={options} />
+<Select size="lg" label="Large Select" value={value} onChange={setValue} data={options} />`,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Select, { label: "Normal Select", data: basicOptions, placeholder: "Select option" }), _jsx(Select, { label: "Disabled Select", data: basicOptions, placeholder: "Select option", disabled: true }), _jsx(Select, { label: "Required Select", data: basicOptions, placeholder: "Select option", required: true }), _jsx(Select, { label: "Select with Description", description: "Please choose an option", data: basicOptions, placeholder: "Select option" }), _jsx(Select, { label: "Select with Error", error: "This field is required", data: basicOptions, placeholder: "Select option" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const WithFeatures = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Select, { label: "Searchable Select", placeholder: "Type to search...", searchable: true, data: countryOptions }), _jsx(Select, { label: "Clearable Select", data: basicOptions, clearable: true, value: "option1" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<Select
+  label="Searchable Select"
+  placeholder="Type to search..."
+  searchable
+  value={value}
+  onChange={setValue}
+  data={options}
+/>`,
+            },
+        },
+    },
+};
+export const FullWidth = {
+    render: () => (_jsx("div", { style: { width: '400px' }, children: _jsx(Select, { label: "Full Width Select", data: basicOptions, placeholder: "Select option", fullWidth: true }) })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const CustomStyles = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(Select, { label: "Custom Styled Select", data: basicOptions, placeholder: "Select option", styles: {
+                    input: {
+                        borderColor: '#ff6b6b',
+                        '&:focus': {
+                            borderColor: '#ff6b6b',
+                            boxShadow: '0 0 0 2px rgba(255, 107, 107, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#ff6b6b',
+                        fontWeight: 600,
+                    },
+                } }), _jsx(Select, { label: "Another Custom Style", data: basicOptions, placeholder: "Select option", styles: {
+                    input: {
+                        backgroundColor: '#f8f9fa',
+                        borderColor: '#4CAF50',
+                        '&:focus': {
+                            borderColor: '#4CAF50',
+                            boxShadow: '0 0 0 2px rgba(76, 175, 80, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#4CAF50',
+                        fontSize: '16px',
+                    },
+                } })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Sliders/Slider/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,iBAAiB,CAAC;AAEjD,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,kGAAyI,WAAW,4CA8FnK,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Inputs/Sliders/Slider/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/VolumeSlider.d.ts

@@ -0,0 +1,6 @@
+import { SliderProps } from '../Slider/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/VolumeSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Sliders/VolumeSlider/VolumeSlider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGvD,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/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/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/TextInputs/AutoComplete/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/AutoComplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/AutoComplete/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,8BAA8B,CAAC;AAE9D,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,2DAA+F,iBAAiB,4CAqD5I,CAAC"}

package/dist/components/Inputs/TextInputs/AutoComplete/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/AutoComplete/AutoComplete.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AutoComplete } from './AutoComplete';
+declare const meta: Meta<typeof AutoComplete>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const AdditionalFunctionality: Story;
+export declare const CustomStyling: Story;
+//# sourceMappingURL=AutoComplete.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/AutoComplete/AutoComplete.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAkGnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAMnC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KA6BrC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA+C3B,CAAC"}