@capyx/components-library 0.0.18 → 0.0.19

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 (4) hide show
  1. package/dist/components/TagsInput.d.ts +47 -3
  2. package/dist/components/TagsInput.d.ts.map +1 -1
  3. package/dist/components/TagsInput.js +79 -23
  4. package/package.json +1 -1
package/dist/components/TagsInput.d.ts CHANGED
@@ -3,6 +3,22 @@ import { type FC } from 'react';
3
3
  * Props for the TagsInput component
4
4
  */
5
5
  export type TagsInputProps = {
6
+ chipStyle?: {
7
+ backgroundColor?: string;
8
+ borderColor?: string;
9
+ color?: string;
10
+ hoverBackgroundColor?: string;
11
+ hoverBorderColor?: string;
12
+ hoverColor?: string;
13
+ deleteIconColor?: string;
14
+ deleteIconHoverColor?: string;
15
+ };
16
+ inputStyle?: {
17
+ borderColor?: string;
18
+ errorBorderColor?: string;
19
+ hoverBorderColor?: string;
20
+ focusBorderColor?: string;
21
+ };
6
22
  /** Field name — required for form integration and the hidden native input */
7
23
  name: string;
8
24
  /** Array of current tag values */
@@ -37,16 +53,44 @@ export type TagsInputProps = {
37
53
  * constraint validation (`required` attribute), making it compatible with
38
54
  * any form library that relies on `checkValidity()` / `reportValidity()`.
39
55
  *
56
+ * ## Customization
57
+ *
58
+ * - `chipStyle`: Minimal style customization for all chips. Only the following keys are supported:
59
+ * - backgroundColor
60
+ * - borderColor
61
+ * - color
62
+ * - hoverBackgroundColor
63
+ * - hoverBorderColor
64
+ * - hoverColor
65
+ * - deleteIconColor
66
+ * - deleteIconHoverColor
67
+ * - `inputStyle`: Minimal style customization for the input border. Only the following keys are supported:
68
+ * - borderColor
69
+ * - errorBorderColor
70
+ * - hoverBorderColor
71
+ * - focusBorderColor
72
+ *
40
73
  * @example
41
74
  * ```tsx
42
75
  * <TagsInput
43
76
  * name="skills"
44
77
  * value={tags}
45
78
  * onChange={setTags}
46
- * placeholder="Add skills..."
47
79
  * required
48
- * min={1}
49
- * max={5}
80
+ * chipStyle={{
81
+ * backgroundColor: tagsError ? '#ffeaea' : '#212529',
82
+ * borderColor: tagsError ? '#ff4d4f' : '#212529',
83
+ * color: tagsError ? '#ff4d4f' : '#fff',
84
+ * hoverBackgroundColor: tagsError ? '#ffd6d6' : '#343a40',
85
+ * hoverBorderColor: tagsError ? '#ff4d4f' : '#343a40',
86
+ * hoverColor: tagsError ? '#ff4d4f' : '#fff',
87
+ * }}
88
+ * inputStyle={{
89
+ * borderColor: '#ced4da',
90
+ * errorBorderColor: '#ff4d4f',
91
+ * hoverBorderColor: '#86b7fe',
92
+ * focusBorderColor: '#1976d2',
93
+ * }}
50
94
  * />
51
95
  * ```
52
96
  */
package/dist/components/TagsInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../lib/components/TagsInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAGnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA2OxC,CAAC"}
1
+ {"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../lib/components/TagsInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAGnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,SAAS,CAAC,EAAE;QACX,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC9B,CAAC;IACF,UAAU,CAAC,EAAE;QACZ,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA4QxC,CAAC"}
package/dist/components/TagsInput.js CHANGED
@@ -18,20 +18,48 @@ import { Controller, useFormContext } from 'react-hook-form';
18
18
  * constraint validation (`required` attribute), making it compatible with
19
19
  * any form library that relies on `checkValidity()` / `reportValidity()`.
20
20
  *
21
+ * ## Customization
22
+ *
23
+ * - `chipStyle`: Minimal style customization for all chips. Only the following keys are supported:
24
+ * - backgroundColor
25
+ * - borderColor
26
+ * - color
27
+ * - hoverBackgroundColor
28
+ * - hoverBorderColor
29
+ * - hoverColor
30
+ * - deleteIconColor
31
+ * - deleteIconHoverColor
32
+ * - `inputStyle`: Minimal style customization for the input border. Only the following keys are supported:
33
+ * - borderColor
34
+ * - errorBorderColor
35
+ * - hoverBorderColor
36
+ * - focusBorderColor
37
+ *
21
38
  * @example
22
39
  * ```tsx
23
40
  * <TagsInput
24
41
  * name="skills"
25
42
  * value={tags}
26
43
  * onChange={setTags}
27
- * placeholder="Add skills..."
28
44
  * required
29
- * min={1}
30
- * max={5}
45
+ * chipStyle={{
46
+ * backgroundColor: tagsError ? '#ffeaea' : '#212529',
47
+ * borderColor: tagsError ? '#ff4d4f' : '#212529',
48
+ * color: tagsError ? '#ff4d4f' : '#fff',
49
+ * hoverBackgroundColor: tagsError ? '#ffd6d6' : '#343a40',
50
+ * hoverBorderColor: tagsError ? '#ff4d4f' : '#343a40',
51
+ * hoverColor: tagsError ? '#ff4d4f' : '#fff',
52
+ * }}
53
+ * inputStyle={{
54
+ * borderColor: '#ced4da',
55
+ * errorBorderColor: '#ff4d4f',
56
+ * hoverBorderColor: '#86b7fe',
57
+ * focusBorderColor: '#1976d2',
58
+ * }}
31
59
  * />
32
60
  * ```
33
61
  */
34
- export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder = 'Add tags...', disabled = false, required = false, label, min, max, }) => {
62
+ export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder = 'Add tags...', disabled = false, required = false, label, min, max, chipStyle, inputStyle, }) => {
35
63
  const formContext = useFormContext();
36
64
  const nativeInputRef = useRef(null);
37
65
  const fieldLabel = label || 'This field';
@@ -91,11 +119,31 @@ export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder =
91
119
  }
92
120
  return cleaned;
93
121
  };
94
- const renderChips = (tagValue, getTagProps) => tagValue.map((option, index) => (_createElement(Chip, { ...getTagProps({ index }), key: option, label: option, sx: {
122
+ const renderChips = (tagValue, getTagProps) => tagValue.map((option, index) => {
123
+ const baseChipSx = {
95
124
  backgroundColor: '#212529',
96
125
  color: '#ffffff',
126
+ border: '1px solid transparent',
127
+ ...(chipStyle?.backgroundColor && {
128
+ backgroundColor: chipStyle.backgroundColor,
129
+ }),
130
+ ...(chipStyle?.borderColor && {
131
+ borderColor: chipStyle.borderColor,
132
+ border: `1px solid ${chipStyle.borderColor}`,
133
+ }),
134
+ ...(chipStyle?.color && { color: chipStyle.color }),
135
+ '&:hover': {
136
+ ...(chipStyle?.hoverBackgroundColor && {
137
+ backgroundColor: chipStyle.hoverBackgroundColor,
138
+ }),
139
+ ...(chipStyle?.hoverBorderColor && {
140
+ borderColor: chipStyle.hoverBorderColor,
141
+ border: `1px solid ${chipStyle.hoverBorderColor}`,
142
+ }),
143
+ ...(chipStyle?.hoverColor && { color: chipStyle.hoverColor }),
144
+ },
97
145
  '& .MuiChip-deleteIcon': {
98
- color: 'rgba(255, 255, 255, 0.7)',
146
+ color: chipStyle?.deleteIconColor || 'rgba(255, 255, 255, 0.7)',
99
147
  userSelect: 'none',
100
148
  WebkitUserSelect: 'none',
101
149
  MozUserSelect: 'none',
@@ -111,26 +159,34 @@ export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder =
111
159
  pointerEvents: 'none',
112
160
  },
113
161
  '&:hover': {
114
- color: '#dc3545',
162
+ color: chipStyle?.deleteIconHoverColor || '#dc3545',
115
163
  },
116
164
  },
117
- } })));
118
- const inputSx = (hasError) => ({
119
- '& .MuiOutlinedInput-root': {
120
- padding: '4px',
121
- minHeight: '38px',
122
- '& fieldset': {
123
- borderColor: hasError ? '#dc3545' : '#ced4da',
124
- },
125
- '&:hover fieldset': {
126
- borderColor: hasError ? '#dc3545' : '#86b7fe',
127
- },
128
- '&.Mui-focused fieldset': {
129
- borderColor: hasError ? '#dc3545' : '#86b7fe',
130
- borderWidth: '1px',
131
- },
132
- },
165
+ };
166
+ return (_createElement(Chip, { ...getTagProps({ index }), key: option, label: option, sx: baseChipSx }));
133
167
  });
168
+ const inputSx = (hasError) => {
169
+ const borderColor = inputStyle?.borderColor || '#ced4da';
170
+ const errorBorderColor = inputStyle?.errorBorderColor || '#dc3545';
171
+ const hoverBorderColor = inputStyle?.hoverBorderColor || '#86b7fe';
172
+ const focusBorderColor = inputStyle?.focusBorderColor || '#86b7fe';
173
+ return {
174
+ '& .MuiOutlinedInput-root': {
175
+ padding: '4px',
176
+ minHeight: '38px',
177
+ '& fieldset': {
178
+ borderColor: hasError ? errorBorderColor : borderColor,
179
+ },
180
+ '&:hover fieldset': {
181
+ borderColor: hasError ? errorBorderColor : hoverBorderColor,
182
+ },
183
+ '&.Mui-focused fieldset': {
184
+ borderColor: hasError ? errorBorderColor : focusBorderColor,
185
+ borderWidth: '1px',
186
+ },
187
+ },
188
+ };
189
+ };
134
190
  // ── react-hook-form mode ──────────────────────────────────────────────
135
191
  if (formContext) {
136
192
  const errorMessage = getFieldError(name);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@capyx/components-library",
3
- "version": "0.0.18",
3
+ "version": "0.0.19",
4
4
  "description": "Shared React component library for Capyx applications",
5
5
  "publishConfig": {
6
6
  "access": "public"