@taiv/ui 1.3.2 → 1.4.0

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

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchBar } from './SearchBar';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/TextInputs/SearchBar',
+    component: SearchBar,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls the search bar size',
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        placeholder: {
+            control: { type: 'text' },
+            description: 'Placeholder text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: "'Search'" },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Search bar 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: 'number' },
+            description: 'Custom width in pixels',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        styles: {
+            control: { type: 'object' },
+            description: 'Custom styles object',
+            table: {
+                type: { summary: 'Record<string, CSSObject>' },
+            },
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Change handler function',
+            table: {
+                type: { summary: '(event: React.ChangeEvent<HTMLInputElement>) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        size: 'md',
+        disabled: false,
+        required: false,
+        fullWidth: false,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<SearchBar
+  value={searchQuery}
+  onChange={(event) => setSearchQuery(event.currentTarget.value)}
+/>`,
+            },
+        },
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { label: "Find Users", description: "Search by name, email, or username" }), _jsx(SearchBar, { placeholder: "Search products..." }), _jsx(SearchBar, { label: "Product Search", error: "Search query is too short" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { size: "sm" }), _jsx(SearchBar, { size: "md" }), _jsx(SearchBar, { size: "lg" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<SearchBar size="sm" value={query} onChange={handleSearch} />
+<SearchBar size="lg" value={query} onChange={handleSearch} />`,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { label: "Normal Search Bar" }), _jsx(SearchBar, { label: "Disabled Search Bar", disabled: true }), _jsx(SearchBar, { label: "Required Search Bar", required: true }), _jsx(SearchBar, { label: "Search Bar with Description", description: "Enter your search terms" }), _jsx(SearchBar, { label: "Search Bar with Error", error: "Please enter a valid search term" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const AdditionalFunctionality = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { width: 400, placeholder: "Search products..." }), _jsx(SearchBar, { label: "Find Users", description: "Search by name, email, or username" }), _jsx(SearchBar, { label: "Product Search", error: "Search query is too short" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<SearchBar
+  width={400}
+  value={searchTerm}
+  onChange={handleSearchChange}
+  placeholder="Search products..."
+/>
+
+<SearchBar
+  label="Find Users"
+  description="Search by name, email, or username"
+  value={userSearch}
+  onChange={handleUserSearch}
+/>`,
+            },
+        },
+    },
+};
+export const CustomStyling = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(SearchBar, { label: "Custom Styled Search Bar", styles: {
+                    input: {
+                        borderColor: '#ff6b6b',
+                        '&:focus': {
+                            borderColor: '#ff6b6b',
+                            boxShadow: '0 0 0 2px rgba(255, 107, 107, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#ff6b6b',
+                        fontWeight: 600,
+                    },
+                } }), _jsx(SearchBar, { label: "Another Custom Style", 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/TextInputs/TextArea/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/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextArea/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,iBAAiB,CAAC;AAEjD,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,4CA4B3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TextArea } from './TextArea';
+declare const meta: Meta<typeof TextArea>;
+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=TextArea.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAgH/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAsBrB,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,KA8BrC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6C3B,CAAC"}

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

@@ -0,0 +1,231 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextArea } from './TextArea';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/TextInputs/TextArea',
+    component: TextArea,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls the textarea size',
+            table: {
+                type: { summary: "'sm' | 'md' | 'lg'" },
+                defaultValue: { summary: "'md'" },
+            },
+        },
+        placeholder: {
+            control: { type: 'text' },
+            description: 'Placeholder text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        label: {
+            control: { type: 'text' },
+            description: 'Textarea 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' },
+            },
+        },
+        minRows: {
+            control: { type: 'number' },
+            description: 'Minimum number of rows',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        maxRows: {
+            control: { type: 'number' },
+            description: 'Maximum number of rows',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        autosize: {
+            control: { type: 'boolean' },
+            description: 'Auto-resize based on content',
+            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: '(event: React.ChangeEvent<HTMLTextAreaElement>) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Message',
+        placeholder: 'Enter your message here...',
+        size: 'md',
+        disabled: false,
+        required: false,
+        fullWidth: false,
+        autosize: false,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<TextArea
+  label="Message"
+  placeholder="Enter your message here..."
+  value={message}
+  onChange={(event) => setMessage(event.currentTarget.value)}
+/>`,
+            },
+        },
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Basic TextArea" }), _jsx(TextArea, { label: "With Placeholder", placeholder: "Enter your text here..." }), _jsx(TextArea, { label: "With Description", description: "This is a description" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { size: "sm", label: "Small TextArea", placeholder: "Small textarea" }), _jsx(TextArea, { size: "md", label: "Medium TextArea (Default)", placeholder: "Medium textarea" }), _jsx(TextArea, { size: "lg", label: "Large TextArea", placeholder: "Large textarea" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<TextArea size="sm" label="Small TextArea" placeholder="Small textarea" />
+<TextArea size="lg" label="Large TextArea" placeholder="Large textarea" />`,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Normal TextArea" }), _jsx(TextArea, { label: "Disabled TextArea", disabled: true }), _jsx(TextArea, { label: "Required TextArea", required: true }), _jsx(TextArea, { label: "TextArea with Description", description: "Please provide detailed information" }), _jsx(TextArea, { label: "TextArea with Error", error: "This field is required" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const AdditionalFunctionality = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Auto-resize TextArea", autosize: true, placeholder: "This will grow as you type..." }), _jsx(TextArea, { label: "Fixed Rows", minRows: 3, maxRows: 6, placeholder: "Fixed height textarea" }), _jsx(TextArea, { label: "Custom Width TextArea", width: "400px", placeholder: "Custom width textarea" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<TextArea
+  label="Auto-resize TextArea"
+  autosize
+  placeholder="This will grow as you type..."
+  value={content}
+  onChange={(event) => setContent(event.currentTarget.value)}
+/>
+
+<TextArea
+  label="Fixed Rows"
+  minRows={3}
+  maxRows={6}
+  placeholder="Fixed height textarea"
+  value={content}
+  onChange={(event) => setContent(event.currentTarget.value)}
+/>`,
+            },
+        },
+    },
+};
+export const CustomStyling = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(TextArea, { label: "Custom Styled TextArea", styles: {
+                    input: {
+                        borderColor: '#ff6b6b',
+                        '&:focus': {
+                            borderColor: '#ff6b6b',
+                            boxShadow: '0 0 0 2px rgba(255, 107, 107, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#ff6b6b',
+                        fontWeight: 600,
+                    },
+                } }), _jsx(TextArea, { label: "Another Custom Style", 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/TextInputs/TextInput/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/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextInput/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,iBAAiB,CAAC;AAEjD,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/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/TextInput/TextInput.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TextInput } from './TextInput';
+declare const meta: Meta<typeof TextInput>;
+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=TextInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAmGhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAsBrB,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,KA+BrC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6C3B,CAAC"}