@taiv/ui 1.7.0 → 1.8.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Inputs/Buttons/Button/Button.js +1 -1
- package/dist/components/Inputs/Buttons/Button/Button.stories.d.ts.map +1 -1
- package/dist/components/Inputs/Buttons/Button/Button.stories.js +9 -0
- package/dist/components/Inputs/TextInputs/AutoComplete/AutoComplete.d.ts.map +1 -1
- package/dist/components/Inputs/TextInputs/AutoComplete/AutoComplete.js +8 -1
- package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.d.ts +12 -0
- package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.d.ts.map +1 -0
- package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.js +63 -0
- package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.stories.d.ts +12 -0
- package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.stories.d.ts.map +1 -0
- package/dist/components/Inputs/TextInputs/NumberInput/NumberInput.stories.js +245 -0
- package/dist/components/Inputs/TextInputs/PasswordInput/PasswordInput.d.ts.map +1 -1
- package/dist/components/Inputs/TextInputs/PasswordInput/PasswordInput.js +14 -1
- package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.d.ts.map +1 -1
- package/dist/components/Inputs/TextInputs/SearchBar/SearchBar.js +8 -1
- package/dist/components/Inputs/TextInputs/TextArea/TextArea.d.ts.map +1 -1
- package/dist/components/Inputs/TextInputs/TextArea/TextArea.js +9 -1
- package/dist/components/Inputs/TextInputs/TextInput/TextInput.d.ts.map +1 -1
- package/dist/components/Inputs/TextInputs/TextInput/TextInput.js +9 -1
- package/dist/components/Layout/Table/Table.d.ts +15 -0
- package/dist/components/Layout/Table/Table.d.ts.map +1 -0
- package/dist/components/Layout/Table/Table.js +48 -0
- package/dist/components/Layout/Table/Table.stories.d.ts +10 -0
- package/dist/components/Layout/Table/Table.stories.d.ts.map +1 -0
- package/dist/components/Layout/Table/Table.stories.js +257 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -0
- package/dist/constants/colors.d.ts +2 -0
- package/dist/constants/colors.d.ts.map +1 -1
- package/dist/constants/colors.js +2 -0
- package/package.json +5 -1
|
@@ -25,7 +25,7 @@ export const Button = ({ onClick, size = 'md', variant = 'primary', fullWidth =
|
|
|
25
25
|
padding: selectedSize.padding,
|
|
26
26
|
minWidth: `${selectedSize.minWidth}rem`,
|
|
27
27
|
fontSize: selectedSize.fontSize,
|
|
28
|
-
boxShadow: shadow ? '0px
|
|
28
|
+
boxShadow: shadow ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
|
|
29
29
|
...getVariantStyles(),
|
|
30
30
|
},
|
|
31
31
|
label: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Buttons/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAmG7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsE1B,CAAC"}
|
|
@@ -90,6 +90,14 @@ const meta = {
|
|
|
90
90
|
type: { summary: '() => void' },
|
|
91
91
|
},
|
|
92
92
|
},
|
|
93
|
+
shadow: {
|
|
94
|
+
control: { type: 'boolean' },
|
|
95
|
+
description: 'Adds shadow to the button',
|
|
96
|
+
table: {
|
|
97
|
+
type: { summary: 'boolean' },
|
|
98
|
+
defaultValue: { summary: 'false' },
|
|
99
|
+
}
|
|
100
|
+
}
|
|
93
101
|
},
|
|
94
102
|
};
|
|
95
103
|
export default meta;
|
|
@@ -101,6 +109,7 @@ export const Default = {
|
|
|
101
109
|
disabled: false,
|
|
102
110
|
loading: false,
|
|
103
111
|
fullWidth: false,
|
|
112
|
+
shadow: false,
|
|
104
113
|
leftIcon: undefined,
|
|
105
114
|
rightIcon: undefined,
|
|
106
115
|
styles: {},
|
|
@@ -1 +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,
|
|
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,4CA4D5I,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Autocomplete as MantineAutocomplete } from '@mantine/core';
|
|
3
|
-
import { neutral } from '../../../../constants/colors';
|
|
3
|
+
import { neutral, red } from '../../../../constants/colors';
|
|
4
4
|
import { fontBase } from '../../../../constants/font';
|
|
5
5
|
import { componentSizes } from '../../Dropdowns/shared/sizes';
|
|
6
6
|
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
|
|
|
15
15
|
color: neutral[300],
|
|
16
16
|
transition: 'all 200ms ease-in-out',
|
|
17
17
|
borderRadius: '8px',
|
|
18
|
+
'&[data-invalid]': {
|
|
19
|
+
borderColor: red[200],
|
|
20
|
+
color: neutral[200],
|
|
21
|
+
'&::placeholder': {
|
|
22
|
+
color: red[200],
|
|
23
|
+
},
|
|
24
|
+
},
|
|
18
25
|
},
|
|
19
26
|
label: {
|
|
20
27
|
...fontBase,
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { NumberInputProps as MantineNumberInputProps } from '@mantine/core';
|
|
2
|
+
import { CSSObject } from '@mantine/styles';
|
|
3
|
+
import { componentSizes } from '../shared/sizes';
|
|
4
|
+
interface NumberInputProps extends MantineNumberInputProps {
|
|
5
|
+
size?: keyof typeof componentSizes;
|
|
6
|
+
width?: string | number;
|
|
7
|
+
fullWidth?: boolean;
|
|
8
|
+
styles?: Record<string, CSSObject>;
|
|
9
|
+
}
|
|
10
|
+
declare const NumberInput: ({ size, width, fullWidth, styles, step, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export { NumberInput };
|
|
12
|
+
//# sourceMappingURL=NumberInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { NumberInput as MantineNumberInput, } from '@mantine/core';
|
|
3
|
+
import { neutral, red } from '../../../../constants/colors';
|
|
4
|
+
import { fontBase } from '../../../../constants/font';
|
|
5
|
+
import { componentSizes } from '../shared/sizes';
|
|
6
|
+
const NumberInput = ({ size = 'md', width, fullWidth = false, styles, step = 1, ...props }) => {
|
|
7
|
+
const selectedSize = componentSizes[size];
|
|
8
|
+
const computedWidth = fullWidth ? '100%' : width || `${selectedSize.width}rem`;
|
|
9
|
+
const hasError = !!props.error;
|
|
10
|
+
const style = {
|
|
11
|
+
input: {
|
|
12
|
+
height: `${selectedSize.height}rem`,
|
|
13
|
+
fontSize: selectedSize.fontSize,
|
|
14
|
+
padding: '0 1rem',
|
|
15
|
+
...fontBase,
|
|
16
|
+
color: neutral[200],
|
|
17
|
+
transition: 'all 200ms ease-in-out',
|
|
18
|
+
borderRadius: '8px',
|
|
19
|
+
'&[data-invalid]': {
|
|
20
|
+
borderColor: red[200],
|
|
21
|
+
color: neutral[200],
|
|
22
|
+
'&::placeholder': {
|
|
23
|
+
color: red[200],
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
rightSection: {
|
|
28
|
+
height: 'auto',
|
|
29
|
+
margin: 'auto 0',
|
|
30
|
+
gap: 0,
|
|
31
|
+
width: '4.8rem',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
},
|
|
34
|
+
control: {
|
|
35
|
+
color: hasError ? red[200] : neutral[200],
|
|
36
|
+
border: 'none',
|
|
37
|
+
background: 'transparent',
|
|
38
|
+
width: '2rem',
|
|
39
|
+
height: '1.2rem',
|
|
40
|
+
flex: '0 0 auto',
|
|
41
|
+
'& svg': {
|
|
42
|
+
width: '2rem',
|
|
43
|
+
height: '1.2rem',
|
|
44
|
+
},
|
|
45
|
+
'&:hover': {
|
|
46
|
+
cursor: 'pointer',
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
label: {
|
|
50
|
+
...fontBase,
|
|
51
|
+
fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
|
|
52
|
+
color: neutral[200],
|
|
53
|
+
},
|
|
54
|
+
error: {
|
|
55
|
+
...fontBase,
|
|
56
|
+
fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
|
|
57
|
+
color: red[200],
|
|
58
|
+
},
|
|
59
|
+
...styles,
|
|
60
|
+
};
|
|
61
|
+
return (_jsx(MantineNumberInput, { w: computedWidth, size: size, step: step, hideControls: false, styles: style, type: "number", ...props }));
|
|
62
|
+
};
|
|
63
|
+
export { NumberInput };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { NumberInput } from './NumberInput';
|
|
3
|
+
declare const meta: Meta<typeof NumberInput>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Variants: Story;
|
|
8
|
+
export declare const Sizes: Story;
|
|
9
|
+
export declare const States: Story;
|
|
10
|
+
export declare const AdditionalFunctionality: Story;
|
|
11
|
+
export declare const CustomStyling: Story;
|
|
12
|
+
//# sourceMappingURL=NumberInput.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { NumberInput } from './NumberInput';
|
|
3
|
+
import { Group } from '../../../Layout/Group/Group';
|
|
4
|
+
const meta = {
|
|
5
|
+
title: 'Components/Inputs/TextInputs/NumberInput',
|
|
6
|
+
component: NumberInput,
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: 'centered',
|
|
9
|
+
},
|
|
10
|
+
argTypes: {
|
|
11
|
+
size: {
|
|
12
|
+
control: { type: 'select' },
|
|
13
|
+
options: ['sm', 'md', 'lg'],
|
|
14
|
+
description: 'Controls the number input size',
|
|
15
|
+
table: {
|
|
16
|
+
type: { summary: "'sm' | 'md' | 'lg'" },
|
|
17
|
+
defaultValue: { summary: "'md'" },
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
placeholder: {
|
|
21
|
+
control: { type: 'text' },
|
|
22
|
+
description: 'Placeholder text',
|
|
23
|
+
table: {
|
|
24
|
+
type: { summary: 'string' },
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
label: {
|
|
28
|
+
control: { type: 'text' },
|
|
29
|
+
description: 'Number input label',
|
|
30
|
+
table: {
|
|
31
|
+
type: { summary: 'string' },
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
description: {
|
|
35
|
+
control: { type: 'text' },
|
|
36
|
+
description: 'Description text',
|
|
37
|
+
table: {
|
|
38
|
+
type: { summary: 'string' },
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
error: {
|
|
42
|
+
control: { type: 'text' },
|
|
43
|
+
description: 'Error message',
|
|
44
|
+
table: {
|
|
45
|
+
type: { summary: 'string' },
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
disabled: {
|
|
49
|
+
control: { type: 'boolean' },
|
|
50
|
+
description: 'Disabled state',
|
|
51
|
+
table: {
|
|
52
|
+
type: { summary: 'boolean' },
|
|
53
|
+
defaultValue: { summary: 'false' },
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
required: {
|
|
57
|
+
control: { type: 'boolean' },
|
|
58
|
+
description: 'Required field',
|
|
59
|
+
table: {
|
|
60
|
+
type: { summary: 'boolean' },
|
|
61
|
+
defaultValue: { summary: 'false' },
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
fullWidth: {
|
|
65
|
+
control: { type: 'boolean' },
|
|
66
|
+
description: 'Full width of container',
|
|
67
|
+
table: {
|
|
68
|
+
type: { summary: 'boolean' },
|
|
69
|
+
defaultValue: { summary: 'false' },
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
width: {
|
|
73
|
+
control: { type: 'text' },
|
|
74
|
+
description: 'Custom width',
|
|
75
|
+
table: {
|
|
76
|
+
type: { summary: 'string | number' },
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
min: {
|
|
80
|
+
control: { type: 'number' },
|
|
81
|
+
description: 'Minimum value',
|
|
82
|
+
table: {
|
|
83
|
+
type: { summary: 'number' },
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
max: {
|
|
87
|
+
control: { type: 'number' },
|
|
88
|
+
description: 'Maximum value',
|
|
89
|
+
table: {
|
|
90
|
+
type: { summary: 'number' },
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
step: {
|
|
94
|
+
control: { type: 'number' },
|
|
95
|
+
description: 'Step value for increment/decrement',
|
|
96
|
+
table: {
|
|
97
|
+
type: { summary: 'number' },
|
|
98
|
+
defaultValue: { summary: '1' },
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
precision: {
|
|
102
|
+
control: { type: 'number' },
|
|
103
|
+
description: 'Number of decimal places',
|
|
104
|
+
table: {
|
|
105
|
+
type: { summary: 'number' },
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
styles: {
|
|
109
|
+
control: { type: 'object' },
|
|
110
|
+
description: 'Custom styles object',
|
|
111
|
+
table: {
|
|
112
|
+
type: { summary: 'Record<string, CSSObject>' },
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
onChange: {
|
|
116
|
+
action: 'changed',
|
|
117
|
+
description: 'Change handler function',
|
|
118
|
+
table: {
|
|
119
|
+
type: { summary: '(value: number | string) => void' },
|
|
120
|
+
},
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
};
|
|
124
|
+
export default meta;
|
|
125
|
+
export const Default = {
|
|
126
|
+
args: {
|
|
127
|
+
label: 'Age',
|
|
128
|
+
placeholder: 'Enter your age',
|
|
129
|
+
size: 'md',
|
|
130
|
+
disabled: false,
|
|
131
|
+
required: false,
|
|
132
|
+
fullWidth: false,
|
|
133
|
+
step: 1,
|
|
134
|
+
min: 0,
|
|
135
|
+
max: 120,
|
|
136
|
+
},
|
|
137
|
+
parameters: {
|
|
138
|
+
docs: {
|
|
139
|
+
source: {
|
|
140
|
+
code: `<NumberInput
|
|
141
|
+
label="Age"
|
|
142
|
+
placeholder="Enter your age"
|
|
143
|
+
min={0}
|
|
144
|
+
max={120}
|
|
145
|
+
step={1}
|
|
146
|
+
value={age}
|
|
147
|
+
onChange={setAge}
|
|
148
|
+
/>`,
|
|
149
|
+
},
|
|
150
|
+
},
|
|
151
|
+
},
|
|
152
|
+
};
|
|
153
|
+
export const Variants = {
|
|
154
|
+
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 })] })),
|
|
155
|
+
parameters: {
|
|
156
|
+
docs: {
|
|
157
|
+
source: {
|
|
158
|
+
code: false,
|
|
159
|
+
},
|
|
160
|
+
},
|
|
161
|
+
},
|
|
162
|
+
};
|
|
163
|
+
export const Sizes = {
|
|
164
|
+
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" })] })),
|
|
165
|
+
parameters: {
|
|
166
|
+
docs: {
|
|
167
|
+
source: {
|
|
168
|
+
code: `<NumberInput size="sm" label="Small Number Input" placeholder="Small value" />
|
|
169
|
+
<NumberInput size="lg" label="Large Number Input" placeholder="Large value" />`,
|
|
170
|
+
},
|
|
171
|
+
},
|
|
172
|
+
},
|
|
173
|
+
};
|
|
174
|
+
export const States = {
|
|
175
|
+
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" })] })),
|
|
176
|
+
parameters: {
|
|
177
|
+
docs: {
|
|
178
|
+
source: {
|
|
179
|
+
code: false,
|
|
180
|
+
},
|
|
181
|
+
},
|
|
182
|
+
},
|
|
183
|
+
};
|
|
184
|
+
export const AdditionalFunctionality = {
|
|
185
|
+
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" })] })),
|
|
186
|
+
parameters: {
|
|
187
|
+
docs: {
|
|
188
|
+
source: {
|
|
189
|
+
code: `<NumberInput
|
|
190
|
+
label="Step of 0.5"
|
|
191
|
+
placeholder="Decimal values"
|
|
192
|
+
step={0.5}
|
|
193
|
+
precision={1}
|
|
194
|
+
value={amount}
|
|
195
|
+
onChange={setAmount}
|
|
196
|
+
/>
|
|
197
|
+
|
|
198
|
+
<NumberInput
|
|
199
|
+
label="With Min/Max"
|
|
200
|
+
placeholder="Between 0 and 10"
|
|
201
|
+
min={0}
|
|
202
|
+
max={10}
|
|
203
|
+
step={1}
|
|
204
|
+
value={count}
|
|
205
|
+
onChange={setCount}
|
|
206
|
+
/>`,
|
|
207
|
+
},
|
|
208
|
+
},
|
|
209
|
+
},
|
|
210
|
+
};
|
|
211
|
+
export const CustomStyling = {
|
|
212
|
+
render: () => (_jsxs(Group, { gap: "2rem", children: [_jsx(NumberInput, { label: "Custom Styled Number Input", styles: {
|
|
213
|
+
input: {
|
|
214
|
+
borderColor: '#ff6b6b',
|
|
215
|
+
'&:focus': {
|
|
216
|
+
borderColor: '#ff6b6b',
|
|
217
|
+
boxShadow: '0 0 0 2px rgba(255, 107, 107, 0.2)',
|
|
218
|
+
},
|
|
219
|
+
},
|
|
220
|
+
label: {
|
|
221
|
+
color: '#ff6b6b',
|
|
222
|
+
fontWeight: 600,
|
|
223
|
+
},
|
|
224
|
+
} }), _jsx(NumberInput, { label: "Another Custom Style", styles: {
|
|
225
|
+
input: {
|
|
226
|
+
backgroundColor: '#f8f9fa',
|
|
227
|
+
borderColor: '#4CAF50',
|
|
228
|
+
'&:focus': {
|
|
229
|
+
borderColor: '#4CAF50',
|
|
230
|
+
boxShadow: '0 0 0 2px rgba(76, 175, 80, 0.2)',
|
|
231
|
+
},
|
|
232
|
+
},
|
|
233
|
+
label: {
|
|
234
|
+
color: '#4CAF50',
|
|
235
|
+
fontSize: '16px',
|
|
236
|
+
},
|
|
237
|
+
} })] })),
|
|
238
|
+
parameters: {
|
|
239
|
+
docs: {
|
|
240
|
+
source: {
|
|
241
|
+
code: false,
|
|
242
|
+
},
|
|
243
|
+
},
|
|
244
|
+
},
|
|
245
|
+
};
|
|
@@ -1 +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,
|
|
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,4CAsDrI,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { PasswordInput as MantinePasswordInput } from '@mantine/core';
|
|
3
|
-
import { neutral } from '../../../../constants/colors';
|
|
3
|
+
import { neutral, red } from '../../../../constants/colors';
|
|
4
4
|
import { fontBase } from '../../../../constants/font';
|
|
5
5
|
import { componentSizes } from '../shared/sizes';
|
|
6
6
|
// Workaround for Icon sizing since we dont have a Provider setup
|
|
@@ -21,6 +21,12 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
|
|
|
21
21
|
height: `${selectedSize.height}rem`,
|
|
22
22
|
fontSize: selectedSize.fontSize,
|
|
23
23
|
padding: '0 1rem',
|
|
24
|
+
'&[data-invalid]': {
|
|
25
|
+
borderColor: red[200],
|
|
26
|
+
'&::placeholder': {
|
|
27
|
+
color: red[200],
|
|
28
|
+
},
|
|
29
|
+
},
|
|
24
30
|
},
|
|
25
31
|
label: {
|
|
26
32
|
...fontBase,
|
|
@@ -30,6 +36,7 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
|
|
|
30
36
|
error: {
|
|
31
37
|
...fontBase,
|
|
32
38
|
fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
|
|
39
|
+
color: red[200],
|
|
33
40
|
},
|
|
34
41
|
innerInput: {
|
|
35
42
|
...fontBase,
|
|
@@ -37,6 +44,12 @@ const PasswordInput = ({ size = 'md', width, fullWidth = false, styles, placehol
|
|
|
37
44
|
height: `${selectedSize.height}rem`,
|
|
38
45
|
fontSize: selectedSize.fontSize,
|
|
39
46
|
padding: '0 1rem',
|
|
47
|
+
'&[data-invalid]': {
|
|
48
|
+
color: neutral[200],
|
|
49
|
+
'&::placeholder': {
|
|
50
|
+
color: red[200],
|
|
51
|
+
},
|
|
52
|
+
},
|
|
40
53
|
},
|
|
41
54
|
visibilityToggle: {
|
|
42
55
|
color: neutral[200],
|
|
@@ -1 +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,
|
|
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,4CAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { TextInput } from '../TextInput/TextInput';
|
|
3
|
-
import { neutral } from '../../../../constants/colors';
|
|
3
|
+
import { neutral, red } from '../../../../constants/colors';
|
|
4
4
|
import { fontBase } from '../../../../constants/font';
|
|
5
5
|
import { componentSizes } from '../shared/sizes';
|
|
6
6
|
const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props }) => {
|
|
@@ -15,6 +15,13 @@ const SearchBar = ({ width, fullWidth = false, size = 'md', styles, ...props })
|
|
|
15
15
|
borderRadius: '8px',
|
|
16
16
|
height: `${selectedSize.height}rem`,
|
|
17
17
|
transition: 'all 200ms ease-in-out',
|
|
18
|
+
'&[data-invalid]': {
|
|
19
|
+
borderColor: red[200],
|
|
20
|
+
color: neutral[200],
|
|
21
|
+
'&::placeholder': {
|
|
22
|
+
color: red[200],
|
|
23
|
+
},
|
|
24
|
+
},
|
|
18
25
|
},
|
|
19
26
|
...styles,
|
|
20
27
|
};
|
|
@@ -1 +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,
|
|
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,4CAoC3F,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Textarea as MantineTextarea } from '@mantine/core';
|
|
3
|
-
import { neutral } from '../../../../constants/colors';
|
|
3
|
+
import { neutral, red } from '../../../../constants/colors';
|
|
4
4
|
import { fontBase } from '../../../../constants/font';
|
|
5
5
|
import { componentSizes } from '../shared/sizes';
|
|
6
6
|
const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
|
|
@@ -16,6 +16,13 @@ const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) =
|
|
|
16
16
|
transition: 'all 200ms ease-in-out',
|
|
17
17
|
borderRadius: '8px',
|
|
18
18
|
resize: 'vertical',
|
|
19
|
+
'&[data-invalid]': {
|
|
20
|
+
borderColor: red[200],
|
|
21
|
+
color: neutral[200],
|
|
22
|
+
'&::placeholder': {
|
|
23
|
+
color: red[200],
|
|
24
|
+
},
|
|
25
|
+
},
|
|
19
26
|
},
|
|
20
27
|
label: {
|
|
21
28
|
...fontBase,
|
|
@@ -25,6 +32,7 @@ const TextArea = ({ size = 'md', width, fullWidth = false, styles, ...props }) =
|
|
|
25
32
|
error: {
|
|
26
33
|
...fontBase,
|
|
27
34
|
fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
|
|
35
|
+
color: red[200],
|
|
28
36
|
},
|
|
29
37
|
...styles,
|
|
30
38
|
};
|
|
@@ -1 +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,
|
|
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,4CAmC7F,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { TextInput as MantineTextInput } from '@mantine/core';
|
|
3
|
-
import { neutral } from '../../../../constants/colors';
|
|
3
|
+
import { neutral, red } from '../../../../constants/colors';
|
|
4
4
|
import { fontBase } from '../../../../constants/font';
|
|
5
5
|
import { componentSizes } from '../shared/sizes';
|
|
6
6
|
const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props }) => {
|
|
@@ -15,6 +15,13 @@ const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props })
|
|
|
15
15
|
color: neutral[200],
|
|
16
16
|
transition: 'all 200ms ease-in-out',
|
|
17
17
|
borderRadius: '8px',
|
|
18
|
+
'&[data-invalid]': {
|
|
19
|
+
borderColor: red[200],
|
|
20
|
+
color: neutral[200],
|
|
21
|
+
'&::placeholder': {
|
|
22
|
+
color: red[200],
|
|
23
|
+
},
|
|
24
|
+
},
|
|
18
25
|
},
|
|
19
26
|
label: {
|
|
20
27
|
...fontBase,
|
|
@@ -24,6 +31,7 @@ const TextInput = ({ size = 'md', width, fullWidth = false, styles, ...props })
|
|
|
24
31
|
error: {
|
|
25
32
|
...fontBase,
|
|
26
33
|
fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
|
|
34
|
+
color: red[200]
|
|
27
35
|
},
|
|
28
36
|
...styles,
|
|
29
37
|
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
interface ColumnConfig {
|
|
3
|
+
heading?: string;
|
|
4
|
+
style?: CSSProperties;
|
|
5
|
+
}
|
|
6
|
+
interface TableProps<T> {
|
|
7
|
+
columnConfigs: ColumnConfig[];
|
|
8
|
+
data: T[];
|
|
9
|
+
ListItem: React.ComponentType<{
|
|
10
|
+
data: T;
|
|
11
|
+
}>;
|
|
12
|
+
}
|
|
13
|
+
declare const Table: <T>({ columnConfigs, data, ListItem }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export { Table, type ColumnConfig, type TableProps };
|
|
15
|
+
//# sourceMappingURL=Table.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAC;AAIhE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,UAAU,CAAC,CAAC;IACpB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,QAAA,MAAM,KAAK,GAAI,CAAC,EAAG,mCAAmC,UAAU,CAAC,CAAC,CAAC,4CAsElE,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef } from 'react';
|
|
3
|
+
import { Box } from '../Box/Box';
|
|
4
|
+
import { fontWeight, neutral } from '../../../constants';
|
|
5
|
+
const Table = ({ columnConfigs, data, ListItem }) => {
|
|
6
|
+
const tableRef = useRef(null);
|
|
7
|
+
/**
|
|
8
|
+
* Apply column styles to the table cells.
|
|
9
|
+
*/
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const table = tableRef.current;
|
|
12
|
+
if (!table)
|
|
13
|
+
return;
|
|
14
|
+
const tbody = table.querySelector('tbody');
|
|
15
|
+
if (!tbody)
|
|
16
|
+
return;
|
|
17
|
+
const rows = tbody.querySelectorAll('tr');
|
|
18
|
+
if (!rows || !rows.length)
|
|
19
|
+
return;
|
|
20
|
+
rows.forEach((row) => {
|
|
21
|
+
const cells = row.querySelectorAll('td');
|
|
22
|
+
cells.forEach((cell, columnIndex) => {
|
|
23
|
+
var _a;
|
|
24
|
+
const columnStyle = (_a = columnConfigs[columnIndex]) === null || _a === void 0 ? void 0 : _a.style;
|
|
25
|
+
if (columnStyle) {
|
|
26
|
+
Object.assign(cell.style, columnStyle);
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
});
|
|
30
|
+
}, [columnConfigs, data]);
|
|
31
|
+
return (_jsx(Box, { sx: {
|
|
32
|
+
borderTopLeftRadius: '8px',
|
|
33
|
+
borderTopRightRadius: '8px',
|
|
34
|
+
boxShadow: '0px 2px 6px -3px #AFAFAF',
|
|
35
|
+
overflow: 'hidden',
|
|
36
|
+
}, children: _jsxs("table", { ref: tableRef, style: {
|
|
37
|
+
width: '100%',
|
|
38
|
+
}, children: [_jsx("thead", { children: _jsx("tr", { children: columnConfigs.map((column, index) => (_jsx("th", { style: {
|
|
39
|
+
backgroundColor: neutral[50],
|
|
40
|
+
color: neutral[300],
|
|
41
|
+
fontSize: '14px',
|
|
42
|
+
fontWeight: fontWeight.bold,
|
|
43
|
+
paddingBottom: '9px',
|
|
44
|
+
paddingTop: '9px',
|
|
45
|
+
...column.style,
|
|
46
|
+
}, children: column.heading }, column.heading || `column-${index}`))) }) }), _jsx("tbody", { children: data.map((item) => (_jsx(ListItem, { data: item }, String(item).slice(0, 10)))) })] }) }));
|
|
47
|
+
};
|
|
48
|
+
export { Table };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Table } from './Table';
|
|
3
|
+
declare const meta: Meta<typeof Table>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const BasicTable: Story;
|
|
7
|
+
export declare const TableWithCustomComponents: Story;
|
|
8
|
+
export declare const TableWithProgressBars: Story;
|
|
9
|
+
export declare const StyledColumns: Story;
|
|
10
|
+
//# sourceMappingURL=Table.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAKhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAiB5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAyPnC,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqBvC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC"}
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Table } from './Table';
|
|
3
|
+
import { Badge } from '../../Info/Badge/Badge';
|
|
4
|
+
import { Button } from '../../Inputs/Buttons/Button/Button';
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Layouts/Table',
|
|
7
|
+
component: Table,
|
|
8
|
+
argTypes: {
|
|
9
|
+
columnConfigs: {
|
|
10
|
+
control: { type: 'object' },
|
|
11
|
+
description: 'Array of column configurations with headings and styles',
|
|
12
|
+
},
|
|
13
|
+
data: {
|
|
14
|
+
control: { type: 'object' },
|
|
15
|
+
description: 'Array of data items to display',
|
|
16
|
+
},
|
|
17
|
+
ListItem: {
|
|
18
|
+
control: false,
|
|
19
|
+
description: 'Component that renders each table row',
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
export default meta;
|
|
24
|
+
// Mock data
|
|
25
|
+
const userData = [
|
|
26
|
+
{
|
|
27
|
+
id: '1',
|
|
28
|
+
name: 'John Doe',
|
|
29
|
+
email: 'john.doe@example.com',
|
|
30
|
+
role: 'Administrator',
|
|
31
|
+
status: 'active',
|
|
32
|
+
lastLogin: '2024-01-15',
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
id: '2',
|
|
36
|
+
name: 'Jane Smith',
|
|
37
|
+
email: 'jane.smith@example.com',
|
|
38
|
+
role: 'Editor',
|
|
39
|
+
status: 'active',
|
|
40
|
+
lastLogin: '2024-01-14',
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
id: '3',
|
|
44
|
+
name: 'Bob Johnson',
|
|
45
|
+
email: 'bob.johnson@example.com',
|
|
46
|
+
role: 'Viewer',
|
|
47
|
+
status: 'inactive',
|
|
48
|
+
lastLogin: '2024-01-10',
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
id: '4',
|
|
52
|
+
name: 'Alice Williams',
|
|
53
|
+
email: 'alice.williams@example.com',
|
|
54
|
+
role: 'Editor',
|
|
55
|
+
status: 'active',
|
|
56
|
+
lastLogin: '2024-01-15',
|
|
57
|
+
},
|
|
58
|
+
];
|
|
59
|
+
const productData = [
|
|
60
|
+
{
|
|
61
|
+
id: '1',
|
|
62
|
+
name: 'Premium Widget',
|
|
63
|
+
category: 'Electronics',
|
|
64
|
+
price: 99.99,
|
|
65
|
+
stock: 150,
|
|
66
|
+
status: 'in-stock',
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
id: '2',
|
|
70
|
+
name: 'Standard Widget',
|
|
71
|
+
category: 'Electronics',
|
|
72
|
+
price: 49.99,
|
|
73
|
+
stock: 3,
|
|
74
|
+
status: 'low-stock',
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
id: '3',
|
|
78
|
+
name: 'Basic Widget',
|
|
79
|
+
category: 'Accessories',
|
|
80
|
+
price: 19.99,
|
|
81
|
+
stock: 0,
|
|
82
|
+
status: 'out-of-stock',
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
id: '4',
|
|
86
|
+
name: 'Deluxe Widget',
|
|
87
|
+
category: 'Electronics',
|
|
88
|
+
price: 149.99,
|
|
89
|
+
stock: 45,
|
|
90
|
+
status: 'in-stock',
|
|
91
|
+
},
|
|
92
|
+
];
|
|
93
|
+
const projectData = [
|
|
94
|
+
{
|
|
95
|
+
id: '1',
|
|
96
|
+
title: 'Website Redesign',
|
|
97
|
+
team: ['Alice', 'Bob', 'Charlie'],
|
|
98
|
+
progress: 75,
|
|
99
|
+
deadline: '2024-02-15',
|
|
100
|
+
priority: 'high',
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
id: '2',
|
|
104
|
+
title: 'Mobile App Update',
|
|
105
|
+
team: ['David', 'Eve'],
|
|
106
|
+
progress: 45,
|
|
107
|
+
deadline: '2024-03-01',
|
|
108
|
+
priority: 'medium',
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
id: '3',
|
|
112
|
+
title: 'API Documentation',
|
|
113
|
+
team: ['Frank', 'Grace'],
|
|
114
|
+
progress: 90,
|
|
115
|
+
deadline: '2024-01-20',
|
|
116
|
+
priority: 'low',
|
|
117
|
+
},
|
|
118
|
+
];
|
|
119
|
+
// ListItem Components
|
|
120
|
+
const UserListItem = ({ data }) => {
|
|
121
|
+
return (_jsxs("tr", { children: [_jsx("td", { children: data.name }), _jsx("td", { children: data.email }), _jsx("td", { children: data.role }), _jsx("td", { children: _jsx(Badge, { color: data.status === 'active' ? 'success' : 'neutral', variant: "filled", size: "sm", children: data.status === 'active' ? 'Active' : 'Inactive' }) }), _jsx("td", { children: data.lastLogin })] }));
|
|
122
|
+
};
|
|
123
|
+
const ProductListItem = ({ data }) => {
|
|
124
|
+
const getStatusColor = (status) => {
|
|
125
|
+
switch (status) {
|
|
126
|
+
case 'in-stock':
|
|
127
|
+
return 'success';
|
|
128
|
+
case 'low-stock':
|
|
129
|
+
return 'warning';
|
|
130
|
+
case 'out-of-stock':
|
|
131
|
+
return 'error';
|
|
132
|
+
default:
|
|
133
|
+
return 'neutral';
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
const getStatusLabel = (status) => {
|
|
137
|
+
switch (status) {
|
|
138
|
+
case 'in-stock':
|
|
139
|
+
return 'In Stock';
|
|
140
|
+
case 'low-stock':
|
|
141
|
+
return 'Low Stock';
|
|
142
|
+
case 'out-of-stock':
|
|
143
|
+
return 'Out of Stock';
|
|
144
|
+
default:
|
|
145
|
+
return status;
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
return (_jsxs("tr", { children: [_jsx("td", { children: data.name }), _jsx("td", { children: data.category }), _jsxs("td", { children: ["$", data.price.toFixed(2)] }), _jsx("td", { children: data.stock }), _jsx("td", { children: _jsx(Badge, { color: getStatusColor(data.status), variant: "filled", size: "sm", children: getStatusLabel(data.status) }) }), _jsx("td", { children: _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx(Button, { size: "sm", variant: "primary", children: "Edit" }), _jsx(Button, { size: "sm", variant: "secondary", children: "View" })] }) })] }));
|
|
149
|
+
};
|
|
150
|
+
const ProjectListItem = ({ data }) => {
|
|
151
|
+
const getPriorityColor = (priority) => {
|
|
152
|
+
switch (priority) {
|
|
153
|
+
case 'high':
|
|
154
|
+
return 'error';
|
|
155
|
+
case 'medium':
|
|
156
|
+
return 'warning';
|
|
157
|
+
case 'low':
|
|
158
|
+
return 'success';
|
|
159
|
+
default:
|
|
160
|
+
return 'neutral';
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
return (_jsxs("tr", { children: [_jsx("td", { children: data.title }), _jsx("td", { children: data.team.join(', ') }), _jsx("td", { children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("div", { style: {
|
|
164
|
+
flex: 1,
|
|
165
|
+
height: '8px',
|
|
166
|
+
backgroundColor: '#e0e0e0',
|
|
167
|
+
borderRadius: '4px',
|
|
168
|
+
overflow: 'hidden',
|
|
169
|
+
}, children: _jsx("div", { style: {
|
|
170
|
+
width: `${data.progress}%`,
|
|
171
|
+
height: '100%',
|
|
172
|
+
backgroundColor: data.progress >= 75 ? '#4caf50' : data.progress >= 50 ? '#ff9800' : '#f44336',
|
|
173
|
+
transition: 'width 0.3s ease',
|
|
174
|
+
} }) }), _jsxs("span", { style: { fontSize: '12px', minWidth: '35px' }, children: [data.progress, "%"] })] }) }), _jsx("td", { children: data.deadline }), _jsx("td", { children: _jsx(Badge, { color: getPriorityColor(data.priority), variant: "outline", size: "sm", children: data.priority.charAt(0).toUpperCase() + data.priority.slice(1) }) })] }));
|
|
175
|
+
};
|
|
176
|
+
// Stories
|
|
177
|
+
export const BasicTable = {
|
|
178
|
+
args: {
|
|
179
|
+
columnConfigs: [
|
|
180
|
+
{ heading: 'Name', style: { width: '25%' } },
|
|
181
|
+
{ heading: 'Email', style: { width: '30%' } },
|
|
182
|
+
{ heading: 'Role', style: { width: '20%' } },
|
|
183
|
+
{ heading: 'Status', style: { width: '15%' } },
|
|
184
|
+
{ heading: 'Last Login', style: { width: '10%' } },
|
|
185
|
+
],
|
|
186
|
+
data: userData,
|
|
187
|
+
ListItem: UserListItem,
|
|
188
|
+
},
|
|
189
|
+
parameters: {
|
|
190
|
+
docs: {
|
|
191
|
+
description: {
|
|
192
|
+
story: 'A basic table displaying user information with text fields and status badges.',
|
|
193
|
+
},
|
|
194
|
+
},
|
|
195
|
+
},
|
|
196
|
+
};
|
|
197
|
+
export const TableWithCustomComponents = {
|
|
198
|
+
args: {
|
|
199
|
+
columnConfigs: [
|
|
200
|
+
{ heading: 'Product Name', style: { width: '20%' } },
|
|
201
|
+
{ heading: 'Category', style: { width: '15%' } },
|
|
202
|
+
{ heading: 'Price', style: { width: '15%' } },
|
|
203
|
+
{ heading: 'Stock', style: { width: '10%', textAlign: 'center' } },
|
|
204
|
+
{ heading: 'Status', style: { width: '15%' } },
|
|
205
|
+
{ heading: 'Actions', style: { width: '25%', textAlign: 'center' } },
|
|
206
|
+
],
|
|
207
|
+
data: productData,
|
|
208
|
+
ListItem: ProductListItem,
|
|
209
|
+
},
|
|
210
|
+
parameters: {
|
|
211
|
+
docs: {
|
|
212
|
+
description: {
|
|
213
|
+
story: 'A table showcasing custom components including badges for status and action buttons. This demonstrates the versatility of the Table component.',
|
|
214
|
+
},
|
|
215
|
+
},
|
|
216
|
+
},
|
|
217
|
+
};
|
|
218
|
+
export const TableWithProgressBars = {
|
|
219
|
+
args: {
|
|
220
|
+
columnConfigs: [
|
|
221
|
+
{ heading: 'Project Title', style: { width: '25%' } },
|
|
222
|
+
{ heading: 'Team Members', style: { width: '25%' } },
|
|
223
|
+
{ heading: 'Progress', style: { width: '20%' } },
|
|
224
|
+
{ heading: 'Deadline', style: { width: '15%' } },
|
|
225
|
+
{ heading: 'Priority', style: { width: '15%' } },
|
|
226
|
+
],
|
|
227
|
+
data: projectData,
|
|
228
|
+
ListItem: ProjectListItem,
|
|
229
|
+
},
|
|
230
|
+
parameters: {
|
|
231
|
+
docs: {
|
|
232
|
+
description: {
|
|
233
|
+
story: 'A table with custom progress bars and priority badges, showing how complex UI elements can be integrated into table cells.',
|
|
234
|
+
},
|
|
235
|
+
},
|
|
236
|
+
},
|
|
237
|
+
};
|
|
238
|
+
export const StyledColumns = {
|
|
239
|
+
args: {
|
|
240
|
+
columnConfigs: [
|
|
241
|
+
{ heading: 'Name', style: { width: '25%', paddingLeft: '20px', fontWeight: '600' } },
|
|
242
|
+
{ heading: 'Email', style: { width: '30%', textAlign: 'left' } },
|
|
243
|
+
{ heading: 'Role', style: { width: '20%', textAlign: 'center' } },
|
|
244
|
+
{ heading: 'Status', style: { width: '15%', textAlign: 'center' } },
|
|
245
|
+
{ heading: 'Last Login', style: { width: '10%', textAlign: 'right', paddingRight: '20px' } },
|
|
246
|
+
],
|
|
247
|
+
data: userData,
|
|
248
|
+
ListItem: UserListItem,
|
|
249
|
+
},
|
|
250
|
+
parameters: {
|
|
251
|
+
docs: {
|
|
252
|
+
description: {
|
|
253
|
+
story: 'A table with custom column styling including padding, text alignment, and font weights.',
|
|
254
|
+
},
|
|
255
|
+
},
|
|
256
|
+
},
|
|
257
|
+
};
|
|
@@ -32,6 +32,7 @@ export { TextArea } from './Inputs/TextInputs/TextArea/TextArea';
|
|
|
32
32
|
export { TextInput } from './Inputs/TextInputs/TextInput/TextInput';
|
|
33
33
|
export { PasswordInput } from './Inputs/TextInputs/PasswordInput/PasswordInput';
|
|
34
34
|
export { DatePicker } from './Inputs/Dates/DatePicker/DatePicker';
|
|
35
|
+
export { NumberInput } from './Inputs/TextInputs/NumberInput/NumberInput';
|
|
35
36
|
export { AutoGrid } from './Layout/AutoGrid/AutoGrid';
|
|
36
37
|
export { Grid } from './Layout/Grid/Grid';
|
|
37
38
|
export { Box } from './Layout/Box/Box';
|
|
@@ -43,6 +44,8 @@ export { Loader } from './Layout/Loader/Loader';
|
|
|
43
44
|
export { Stack } from './Layout/Stack/Stack';
|
|
44
45
|
export { Card } from './Layout/Card/Card';
|
|
45
46
|
export { SectionCard } from './Layout/SectionCard/SectionCard';
|
|
47
|
+
export { Table } from './Layout/Table/Table';
|
|
48
|
+
export type { ColumnConfig } from './Layout/Table/Table';
|
|
46
49
|
export { Tabs } from './Layout/Tabs/Tabs';
|
|
47
50
|
export { CollapsibleText } from './Typography/CollapsibleText/CollapsibleText';
|
|
48
51
|
export { Text } from './Typography/Text/Text';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAG1D,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,oDAAoD,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
package/dist/components/index.js
CHANGED
|
@@ -35,6 +35,7 @@ export { TextArea } from './Inputs/TextInputs/TextArea/TextArea';
|
|
|
35
35
|
export { TextInput } from './Inputs/TextInputs/TextInput/TextInput';
|
|
36
36
|
export { PasswordInput } from './Inputs/TextInputs/PasswordInput/PasswordInput';
|
|
37
37
|
export { DatePicker } from './Inputs/Dates/DatePicker/DatePicker';
|
|
38
|
+
export { NumberInput } from './Inputs/TextInputs/NumberInput/NumberInput';
|
|
38
39
|
//Layout
|
|
39
40
|
export { AutoGrid } from './Layout/AutoGrid/AutoGrid';
|
|
40
41
|
export { Grid } from './Layout/Grid/Grid';
|
|
@@ -47,6 +48,7 @@ export { Loader } from './Layout/Loader/Loader';
|
|
|
47
48
|
export { Stack } from './Layout/Stack/Stack';
|
|
48
49
|
export { Card } from './Layout/Card/Card';
|
|
49
50
|
export { SectionCard } from './Layout/SectionCard/SectionCard';
|
|
51
|
+
export { Table } from './Layout/Table/Table';
|
|
50
52
|
export { Tabs } from './Layout/Tabs/Tabs';
|
|
51
53
|
//Typography
|
|
52
54
|
export { CollapsibleText } from './Typography/CollapsibleText/CollapsibleText';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export declare const white = "#FFFFFF";
|
|
1
2
|
export declare const gray: {
|
|
2
3
|
readonly 25: "#F8FAFC";
|
|
3
4
|
readonly 50: "#EDEDED";
|
|
@@ -79,6 +80,7 @@ export declare const salmon: {
|
|
|
79
80
|
readonly 200: "#FF806F";
|
|
80
81
|
};
|
|
81
82
|
export declare const colors: {
|
|
83
|
+
readonly white: "#FFFFFF";
|
|
82
84
|
readonly neutral: {
|
|
83
85
|
readonly 25: "#F8FAFC";
|
|
84
86
|
readonly 50: "#EDEDED";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/constants/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAQ,CAAC;AAE7B,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAS,CAAC;AAE9B,eAAO,MAAM,GAAG;;;;;;CAMN,CAAC;AACX,eAAO,MAAM,KAAK;;;;;;CAAM,CAAC;AAGzB,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAGX,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/constants/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAO,CAAC;AAE5B,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAQ,CAAC;AAE7B,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AACX,eAAO,MAAM,OAAO;;;;;;CAAS,CAAC;AAE9B,eAAO,MAAM,GAAG;;;;;;CAMN,CAAC;AACX,eAAO,MAAM,KAAK;;;;;;CAAM,CAAC;AAGzB,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOT,CAAC;AAGX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQb,CAAC"}
|
package/dist/constants/colors.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export const white = '#FFFFFF';
|
|
1
2
|
export const gray = {
|
|
2
3
|
25: '#F8FAFC',
|
|
3
4
|
50: '#EDEDED',
|
|
@@ -51,6 +52,7 @@ export const salmon = {
|
|
|
51
52
|
};
|
|
52
53
|
// Primary semantic/functional color exports - for use in UI, actions, states, etc. anything that would be affected by theme changes down the line
|
|
53
54
|
export const colors = {
|
|
55
|
+
white,
|
|
54
56
|
neutral,
|
|
55
57
|
primary,
|
|
56
58
|
success,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taiv/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.9",
|
|
4
4
|
"author": "Taiv",
|
|
5
5
|
"description": "Taiv's web UI Toolkit built on Mantine v6",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
"files": [
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/alborz-taiv/taiv-ui"
|
|
14
|
+
},
|
|
11
15
|
"scripts": {
|
|
12
16
|
"build": "tsc",
|
|
13
17
|
"dev": "npm link && tsc --watch",
|