@taiv/ui 1.10.2 → 1.10.4

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.
Files changed (8) hide show
  1. package/dist/components/Inputs/Dropdowns/Select/Select.d.ts.map +1 -1
  2. package/dist/components/Inputs/Dropdowns/Select/Select.js +14 -3
  3. package/dist/components/Layout/Table/Table.d.ts +7 -3
  4. package/dist/components/Layout/Table/Table.d.ts.map +1 -1
  5. package/dist/components/Layout/Table/Table.js +4 -4
  6. package/dist/components/Layout/Table/Table.stories.d.ts.map +1 -1
  7. package/dist/components/Layout/Table/Table.stories.js +11 -0
  8. package/package.json +1 -1
package/dist/components/Inputs/Dropdowns/Select/Select.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,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,MAAM,GAAI,2DAA+F,WAAW,4CA0DhI,CAAC"}
1
+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Dropdowns/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,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,MAAM,GAAI,2DAA+F,WAAW,4CAqEhI,CAAC"}
package/dist/components/Inputs/Dropdowns/Select/Select.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Select as MantineSelect } 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
  export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'Select an option', styles, ...props }) => {
@@ -14,12 +14,18 @@ export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'S
14
14
  paddingRight: selectedSize.inputPadding,
15
15
  ...fontBase,
16
16
  fontSize: selectedSize.fontSize,
17
- color: neutral[300],
17
+ color: neutral[200],
18
18
  borderRadius: '8px',
19
- border: `1px solid ${neutral[100]}`,
20
19
  textOverflow: 'ellipsis',
21
20
  overflow: 'hidden',
22
21
  transition: 'all 200ms ease-in-out',
22
+ '&[data-invalid]': {
23
+ borderColor: red[200],
24
+ color: neutral[200],
25
+ '&::placeholder': {
26
+ color: red[200],
27
+ },
28
+ },
23
29
  },
24
30
  label: {
25
31
  ...fontBase,
@@ -56,6 +62,11 @@ export const Select = ({ size = 'md', width, fullWidth = false, placeholder = 'S
56
62
  rightSection: {
57
63
  color: neutral[200],
58
64
  },
65
+ error: {
66
+ ...fontBase,
67
+ fontSize: `calc(${selectedSize.fontSize} - 0.05rem)`,
68
+ color: red[200]
69
+ },
59
70
  ...styles,
60
71
  };
61
72
  return _jsx(MantineSelect, { radius: "md", size: size, styles: style, placeholder: placeholder, maxDropdownHeight: selectedSize.dropdownHeight, ...props });
package/dist/components/Layout/Table/Table.d.ts CHANGED
@@ -3,7 +3,10 @@ interface ColumnConfig {
3
3
  heading?: string;
4
4
  style?: CSSProperties;
5
5
  }
6
- interface TableProps<T> {
6
+ interface TableItem {
7
+ key: string | number;
8
+ }
9
+ interface TableProps<T extends TableItem> {
7
10
  columnConfigs: ColumnConfig[];
8
11
  data: T[];
9
12
  ListItem: React.ComponentType<{
@@ -13,6 +16,7 @@ interface TableProps<T> {
13
16
  shadow?: boolean;
14
17
  divider?: boolean;
15
18
  }
16
- declare const Table: <T>({ columnConfigs, data, ListItem, placeholder, shadow, divider }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
17
- export { Table, type ColumnConfig, type TableProps };
19
+ declare const TableComponent: <T extends TableItem>({ columnConfigs, data, ListItem, placeholder, shadow, divider }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
20
+ export declare const Table: typeof TableComponent;
21
+ export { type ColumnConfig, type TableProps };
18
22
  //# sourceMappingURL=Table.d.ts.map
package/dist/components/Layout/Table/Table.d.ts.map CHANGED
@@ -1 +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;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,KAAK,GAAI,CAAC,EAAG,iEAAgF,UAAU,CAAC,CAAC,CAAC,4CA4E/G,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}
1
+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA2B,MAAM,OAAO,CAAC;AAItE,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,SAAS;IACjB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AAED,UAAU,UAAU,CAAC,CAAC,SAAS,SAAS;IACtC,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;IAC3C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,SAAS,EAAE,iEAAgF,UAAU,CAAC,CAAC,CAAC,4CA4EzI,CAAC;AAEF,eAAO,MAAM,KAAK,EAA2B,OAAO,cAAc,CAAC;AAEnE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,CAAC"}
package/dist/components/Layout/Table/Table.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useEffect, useRef } from 'react';
2
+ import { memo, useEffect, useRef } from 'react';
3
3
  import { Box } from '../Box/Box';
4
4
  import { fontWeight, neutral } from '../../../constants';
5
- const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false, divider = true }) => {
5
+ const TableComponent = ({ columnConfigs, data, ListItem, placeholder, shadow = false, divider = true }) => {
6
6
  const tableRef = useRef(null);
7
7
  /**
8
8
  * Apply column styles to the table cells.
@@ -47,6 +47,6 @@ const Table = ({ columnConfigs, data, ListItem, placeholder, shadow = false, div
47
47
  paddingBottom: '9px',
48
48
  paddingTop: '9px',
49
49
  ...column.style,
50
- }, children: column.heading }, column.heading || `column-${index}`))) }) }), _jsx("tbody", { children: (!data || data.length === 0) && placeholder ? _jsx("tr", { children: _jsx("td", { colSpan: columnConfigs.length, children: placeholder }) }) : data.map((item) => (_jsx(ListItem, { data: item }, String(item).slice(0, 10)))) })] }) }));
50
+ }, children: column.heading }, column.heading || `column-${index}`))) }) }), _jsx("tbody", { children: (!data || data.length === 0) && placeholder ? _jsx("tr", { children: _jsx("td", { colSpan: columnConfigs.length, children: placeholder }) }) : data.map((item) => (_jsx(ListItem, { data: item }, item.key))) })] }) }));
51
51
  };
52
- export { Table };
52
+ export const Table = memo(TableComponent);
package/dist/components/Layout/Table/Table.stories.d.ts.map CHANGED
@@ -1 +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;AAUhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA6B5B,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;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC"}
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;AAUhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA6B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAuQnC,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;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAerC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAC"}
package/dist/components/Layout/Table/Table.stories.js CHANGED
@@ -41,6 +41,7 @@ export default meta;
41
41
  // Mock data
42
42
  const userData = [
43
43
  {
44
+ key: 'user-1',
44
45
  id: '1',
45
46
  name: 'John Doe',
46
47
  email: 'john.doe@example.com',
@@ -49,6 +50,7 @@ const userData = [
49
50
  lastLogin: '2024-01-15',
50
51
  },
51
52
  {
53
+ key: 'user-2',
52
54
  id: '2',
53
55
  name: 'Jane Smith',
54
56
  email: 'jane.smith@example.com',
@@ -57,6 +59,7 @@ const userData = [
57
59
  lastLogin: '2024-01-14',
58
60
  },
59
61
  {
62
+ key: 'user-3',
60
63
  id: '3',
61
64
  name: 'Bob Johnson',
62
65
  email: 'bob.johnson@example.com',
@@ -65,6 +68,7 @@ const userData = [
65
68
  lastLogin: '2024-01-10',
66
69
  },
67
70
  {
71
+ key: 'user-4',
68
72
  id: '4',
69
73
  name: 'Alice Williams',
70
74
  email: 'alice.williams@example.com',
@@ -75,6 +79,7 @@ const userData = [
75
79
  ];
76
80
  const productData = [
77
81
  {
82
+ key: 'product-1',
78
83
  id: '1',
79
84
  name: 'Premium Widget',
80
85
  category: 'Electronics',
@@ -83,6 +88,7 @@ const productData = [
83
88
  status: 'in-stock',
84
89
  },
85
90
  {
91
+ key: 'product-2',
86
92
  id: '2',
87
93
  name: 'Standard Widget',
88
94
  category: 'Electronics',
@@ -91,6 +97,7 @@ const productData = [
91
97
  status: 'low-stock',
92
98
  },
93
99
  {
100
+ key: 'product-3',
94
101
  id: '3',
95
102
  name: 'Basic Widget',
96
103
  category: 'Accessories',
@@ -99,6 +106,7 @@ const productData = [
99
106
  status: 'out-of-stock',
100
107
  },
101
108
  {
109
+ key: 'product-4',
102
110
  id: '4',
103
111
  name: 'Deluxe Widget',
104
112
  category: 'Electronics',
@@ -109,6 +117,7 @@ const productData = [
109
117
  ];
110
118
  const projectData = [
111
119
  {
120
+ key: 'project-1',
112
121
  id: '1',
113
122
  title: 'Website Redesign',
114
123
  team: ['Alice', 'Bob', 'Charlie'],
@@ -117,6 +126,7 @@ const projectData = [
117
126
  priority: 'high',
118
127
  },
119
128
  {
129
+ key: 'project-2',
120
130
  id: '2',
121
131
  title: 'Mobile App Update',
122
132
  team: ['David', 'Eve'],
@@ -125,6 +135,7 @@ const projectData = [
125
135
  priority: 'medium',
126
136
  },
127
137
  {
138
+ key: 'project-3',
128
139
  id: '3',
129
140
  title: 'API Documentation',
130
141
  team: ['Frank', 'Grace'],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taiv/ui",
3
- "version": "1.10.2",
3
+ "version": "1.10.4",
4
4
  "author": "Taiv",
5
5
  "description": "Taiv's web UI Toolkit built on Mantine v6",
6
6
  "main": "dist/index.js",