@taiv/ui 1.6.1 → 1.8.9

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

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

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Autocomplete as MantineAutocomplete } from '@mantine/core';
-import { neutral } from '../../../../constants/colors';
+import { neutral, red } 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 }) => {
@@ -15,6 +15,13 @@ export const AutoComplete = ({ size = 'md', width, fullWidth = false, placeholde
             color: neutral[300],
             transition: 'all 200ms ease-in-out',
             borderRadius: '8px',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         label: {
             ...fontBase,

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,gBAAgB,IAAI,uBAAuB,EAC5C,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,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,QAAA,MAAM,WAAW,GAAI,oDAOlB,gBAAgB,4CAoElB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NumberInput as MantineNumberInput, } from '@mantine/core';
+import { neutral, red } from '../../../../constants/colors';
+import { fontBase } from '../../../../constants/font';
+import { componentSizes } from '../shared/sizes';
+const NumberInput = ({ size = 'md', width, fullWidth = false, styles, step = 1, ...props }) => {
+    const selectedSize = componentSizes[size];
+    const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
+    const hasError = !!props.error;
+    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',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
+        },
+        rightSection: {
+            height: 'auto',
+            margin: 'auto 0',
+            gap: 0,
+            width: '4.8rem',
+            alignItems: 'center',
+        },
+        control: {
+            color: hasError ? red[200] : neutral[200],
+            border: 'none',
+            background: 'transparent',
+            width: '2rem',
+            height: '1.2rem',
+            flex: '0 0 auto',
+            '& svg': {
+                width: '2rem',
+                height: '1.2rem',
+            },
+            '&:hover': {
+                cursor: 'pointer',
+            },
+        },
+        label: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: neutral[200],
+        },
+        error: {
+            ...fontBase,
+            fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: red[200],
+        },
+        ...styles,
+    };
+    return (_jsx(MantineNumberInput, { w: computedWidth, size: size, step: step, hideControls: false, styles: style, type: "number", ...props }));
+};
+export { NumberInput };

package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.stories.d.ts

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

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

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

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

@@ -0,0 +1,245 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumberInput } from './NumberInput';
+import { Group } from '../../../Layout/Group/Group';
+const meta = {
+    title: 'Components/Inputs/TextInputs/NumberInput',
+    component: NumberInput,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Controls the number input 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: 'Number input 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' },
+            },
+        },
+        min: {
+            control: { type: 'number' },
+            description: 'Minimum value',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        max: {
+            control: { type: 'number' },
+            description: 'Maximum value',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        step: {
+            control: { type: 'number' },
+            description: 'Step value for increment/decrement',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '1' },
+            },
+        },
+        precision: {
+            control: { type: 'number' },
+            description: 'Number of decimal places',
+            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: '(value: number | string) => void' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Age',
+        placeholder: 'Enter your age',
+        size: 'md',
+        disabled: false,
+        required: false,
+        fullWidth: false,
+        step: 1,
+        min: 0,
+        max: 120,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `<NumberInput
+  label="Age"
+  placeholder="Enter your age"
+  min={0}
+  max={120}
+  step={1}
+  value={age}
+  onChange={setAge}
+/>`,
+            },
+        },
+    },
+};
+export const Variants = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Basic Number Input" }), _jsx(NumberInput, { label: "With Placeholder", placeholder: "Enter a value" }), _jsx(NumberInput, { label: "With Description", description: "Enter a value between 0 and 100", min: 0, max: 100 })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { size: "sm", label: "Small Number Input", placeholder: "Small value" }), _jsx(NumberInput, { size: "md", label: "Medium Number Input (Default)", placeholder: "Medium value" }), _jsx(NumberInput, { size: "lg", label: "Large Number Input", placeholder: "Large value" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<NumberInput size="sm" label="Small Number Input" placeholder="Small value" />
+<NumberInput size="lg" label="Large Number Input" placeholder="Large value" />`,
+            },
+        },
+    },
+};
+export const States = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Normal Number Input" }), _jsx(NumberInput, { label: "Disabled Number Input", disabled: true }), _jsx(NumberInput, { label: "Required Number Input", required: true }), _jsx(NumberInput, { label: "Number Input with Description", description: "Please enter a numeric value" }), _jsx(NumberInput, { label: "Number Input with Error", error: "Value is required" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: false,
+            },
+        },
+    },
+};
+export const AdditionalFunctionality = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Step of 1", placeholder: "Integer values", step: 1 }), _jsx(NumberInput, { label: "Step of 0.5", placeholder: "Decimal values", step: 0.5, precision: 1 }), _jsx(NumberInput, { label: "With Min/Max", placeholder: "Between 0 and 10", min: 0, max: 10, step: 1 }), _jsx(NumberInput, { label: "Custom Width", placeholder: "Custom width", width: "300rem" })] })),
+    parameters: {
+        docs: {
+            source: {
+                code: `<NumberInput
+  label="Step of 0.5"
+  placeholder="Decimal values"
+  step={0.5}
+  precision={1}
+  value={amount}
+  onChange={setAmount}
+/>
+
+<NumberInput
+  label="With Min/Max"
+  placeholder="Between 0 and 10"
+  min={0}
+  max={10}
+  step={1}
+  value={count}
+  onChange={setCount}
+/>`,
+            },
+        },
+    },
+};
+export const CustomStyling = {
+    render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Custom Styled Number Input", styles: {
+                    input: {
+                        borderColor: '#ff6b6b',
+                        '&:focus': {
+                            borderColor: '#ff6b6b',
+                            boxShadow: '0 0 0 2px rgba(255, 107, 107, 0.2)',
+                        },
+                    },
+                    label: {
+                        color: '#ff6b6b',
+                        fontWeight: 600,
+                    },
+                } }), _jsx(NumberInput, { 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/PasswordInput/PasswordInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/PasswordInput/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,iBAAiB,CAAC;AASjD,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,2DAA6F,kBAAkB,4CAyCrI,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/TextInputs/PasswordInput/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,iBAAiB,CAAC;AASjD,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,2DAA6F,kBAAkB,4CAsDrI,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PasswordInput as MantinePasswordInput } from '@mantine/core';
-import { neutral } from '../../../../constants/colors';
+import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 // Workaround for Icon sizing since we dont have a Provider setup
@@ -21,6 +21,12 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
             height: `${selectedSize.height}rem`,
             fontSize: selectedSize.fontSize,
             padding: '0 1rem',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         label: {
             ...fontBase,
@@ -30,6 +36,7 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
         error: {
             ...fontBase,
             fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: red[200],
         },
         innerInput: {
             ...fontBase,
@@ -37,6 +44,12 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
             height: `${selectedSize.height}rem`,
             fontSize: selectedSize.fontSize,
             padding: '0 1rem',
+            '&[data-invalid]': {
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         visibilityToggle: {
             color: neutral[200],

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

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

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TextInput } from '../TextInput/TextInput';
-import { neutral } from '../../../../constants/colors';
+import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props }) => {
@@ -15,6 +15,13 @@ const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props })
             borderRadius: '8px',
             height: `${selectedSize.height}rem`,
             transition: 'all 200ms ease-in-out',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         ...styles,
     };

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

@@ -1 +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"}
+{"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,4CAoC3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Textarea as MantineTextarea } from '@mantine/core';
-import { neutral } from '../../../../constants/colors';
+import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
@@ -16,6 +16,13 @@ const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) =
             transition: 'all 200ms ease-in-out',
             borderRadius: '8px',
             resize: 'vertical',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         label: {
             ...fontBase,
@@ -25,6 +32,7 @@ const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) =
         error: {
             ...fontBase,
             fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: red[200],
         },
         ...styles,
     };

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

@@ -1 +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"}
+{"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,4CAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TextInput as MantineTextInput } from '@mantine/core';
-import { neutral } from '../../../../constants/colors';
+import { neutral, red } from '../../../../constants/colors';
 import { fontBase } from '../../../../constants/font';
 import { componentSizes } from '../shared/sizes';
 const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
@@ -15,6 +15,13 @@ const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props })
             color: neutral[200],
             transition: 'all 200ms ease-in-out',
             borderRadius: '8px',
+            '&[data-invalid]': {
+                borderColor: red[200],
+                color: neutral[200],
+                '&::placeholder': {
+                    color: red[200],
+                },
+            },
         },
         label: {
             ...fontBase,
@@ -24,6 +31,7 @@ const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props })
         error: {
             ...fontBase,
             fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
+            color: red[200]
         },
         ...styles,
     };

package/dist/components/index.d.ts

@@ -32,6 +32,7 @@ export { TextArea } from './Inputs/TextInputs/TextArea/TextArea';
 export { TextInput } from './Inputs/TextInputs/TextInput/TextInput';
 export { PasswordInput } from './Inputs/TextInputs/PasswordInput/PasswordInput';
 export { DatePicker } from './Inputs/Dates/DatePicker/DatePicker';
+export { NumberInput } from './Inputs/TextInputs/NumberInput/NumberInput';
 export { AutoGrid } from './Layout/AutoGrid/AutoGrid';
 export { Grid } from './Layout/Grid/Grid';
 export { Box } from './Layout/Box/Box';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/components/index.js

@@ -35,6 +35,7 @@ export { TextArea } from './Inputs/TextInputs/TextArea/TextArea';
 export { TextInput } from './Inputs/TextInputs/TextInput/TextInput';
 export { PasswordInput } from './Inputs/TextInputs/PasswordInput/PasswordInput';
 export { DatePicker } from './Inputs/Dates/DatePicker/DatePicker';
+export { NumberInput } from './Inputs/TextInputs/NumberInput/NumberInput';
 //Layout
 export { AutoGrid } from './Layout/AutoGrid/AutoGrid';
 export { Grid } from './Layout/Grid/Grid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiv/ui",
-  "version": "1.6.1",
+  "version": "1.8.9",
   "author": "Taiv",
   "description": "Taiv's web UI Toolkit built on Mantine v6",
   "main": "dist/index.js",
@@ -8,9 +8,13 @@
   "files": [
     "dist"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alborz-taiv/taiv-ui"
+  },
   "scripts": {
     "build": "tsc",
-    "dev": "tsc --watch",
+    "dev": "npm link && tsc --watch",
     "clean": "rm -rf dist",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",