@fragment-build/ui 1.13.0 → 1.13.1
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/color-input/ColorInput.d.ts +1 -1
- package/dist/components/color-input/ColorInput.js +6 -1
- package/dist/components/color-input/ColorInput.js.map +1 -1
- package/dist/components/color-selector/ColorSelector.d.ts +1 -0
- package/dist/components/color-selector/ColorSelector.js +6 -1
- package/dist/components/color-selector/ColorSelector.js.map +1 -1
- package/package.json +9 -9
|
@@ -3,4 +3,4 @@ import type { InputProps } from '@nextui-org/react';
|
|
|
3
3
|
* Primary UI component for selecting a color
|
|
4
4
|
*/
|
|
5
5
|
export type ColorInputProps = InputProps;
|
|
6
|
-
export declare const ColorInput: ({ defaultValue, label, errorMessage, onValueChange, isInvalid, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const ColorInput: ({ defaultValue, label, errorMessage, onValueChange, isInvalid, value: controlledValue, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,9 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useEffect, useMemo, useState } from 'react';
|
|
3
3
|
import { Avatar, Input } from '../base';
|
|
4
4
|
import { withFragment } from '../../withFragment';
|
|
5
|
-
export const ColorInput = withFragment(({ defaultValue, label = 'Color', errorMessage = "Please enter a valid color in hex format e.g. #f3f or #ff33ff", onValueChange, isInvalid, ...rest }) => {
|
|
5
|
+
export const ColorInput = withFragment(({ defaultValue, label = 'Color', errorMessage = "Please enter a valid color in hex format e.g. #f3f or #ff33ff", onValueChange, isInvalid, value: controlledValue, ...rest }) => {
|
|
6
6
|
const [value, setValue] = useState(defaultValue || '#7d7d7d');
|
|
7
7
|
useEffect(() => onValueChange && onValueChange(value), [value, onValueChange]);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (!controlledValue)
|
|
10
|
+
return;
|
|
11
|
+
setValue(controlledValue);
|
|
12
|
+
}, [controlledValue]);
|
|
8
13
|
const validateHexColor = (value) => value.match(/^#(?:[0-9a-fA-F]{3}){1,2}$/i);
|
|
9
14
|
const invalid = useMemo(() => {
|
|
10
15
|
if (value === "")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorInput.js","sourceRoot":"","sources":["../../../src/components/color-input/ColorInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAe,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAQlD,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,EACtC,YAAY,EACZ,KAAK,GAAG,OAAO,EACf,YAAY,GAAG,+DAA+D,EAC9E,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACS,EAAE,EAAE;IACpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,SAAS,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/E,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAEvF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,KAAK,KAAK,EAAE;YAAE,OAAO,KAAK,CAAC;QAE/B,OAAO,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9D,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC1D,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACpC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,KAAK,OACA,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,OAAO,IAAI,YAAY,EACrC,UAAU,EAAE,CACV,KAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,IAAI,EACT,YAAY,QACZ,QAAQ,EAAE,gBAAO,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,wCAAwC,EAAC,QAAQ,EAAE,cAAc,GAAI,EAC7G,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,UAAU,EAAE,EAAE,IAAI,EAAE,8BAA8B,EAAE,QAAQ,EAAE,eAAe,EAAE,GAC/E,CACH,GACD,CACH,CAAC;AACJ,CAAC,EAAE,YAAY,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"ColorInput.js","sourceRoot":"","sources":["../../../src/components/color-input/ColorInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAe,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAQlD,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,EACtC,YAAY,EACZ,KAAK,GAAG,OAAO,EACf,YAAY,GAAG,+DAA+D,EAC9E,aAAa,EACb,SAAS,EACT,KAAK,EAAE,eAAe,EACtB,GAAG,IAAI,EACS,EAAE,EAAE;IACpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,SAAS,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/E,SAAS,CAAC,GAAG,EAAE;QACb,IAAG,CAAC,eAAe;YAAE,OAAO;QAC5B,QAAQ,CAAC,eAAe,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAEvF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,KAAK,KAAK,EAAE;YAAE,OAAO,KAAK,CAAC;QAE/B,OAAO,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9D,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC1D,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACpC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,KAAK,OACA,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,OAAO,IAAI,YAAY,EACrC,UAAU,EAAE,CACV,KAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,IAAI,EACT,YAAY,QACZ,QAAQ,EAAE,gBAAO,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,wCAAwC,EAAC,QAAQ,EAAE,cAAc,GAAI,EAC7G,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,UAAU,EAAE,EAAE,IAAI,EAAE,8BAA8B,EAAE,QAAQ,EAAE,eAAe,EAAE,GAC/E,CACH,GACD,CACH,CAAC;AACJ,CAAC,EAAE,YAAY,CAAC,CAAC"}
|
|
@@ -2,9 +2,14 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
3
|
import { Avatar, Button } from '../base';
|
|
4
4
|
import { withFragment } from '../../withFragment';
|
|
5
|
-
export const ColorSelector = withFragment(({ values, defaultValue, onValueChange, icon, ...rest }) => {
|
|
5
|
+
export const ColorSelector = withFragment(({ values, value: controlledValue, defaultValue, onValueChange, icon, ...rest }) => {
|
|
6
6
|
const [value, setValue] = useState(defaultValue && values.includes(defaultValue) ? defaultValue : values[0]);
|
|
7
7
|
useEffect(() => onValueChange(value), [value, onValueChange]);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (!controlledValue)
|
|
10
|
+
return;
|
|
11
|
+
setValue(controlledValue);
|
|
12
|
+
}, [controlledValue]);
|
|
8
13
|
return (_jsx("div", { className: 'flex gap-3', children: values.map((color) => (_jsx(Button, { radius: "full", size: rest.size, isIconOnly: true, disableRipple: true, className: "overflow-visible", children: _jsx(Avatar, { showFallback: true, fallback: value === color && icon ? icon : _jsx(_Fragment, {}), style: { backgroundColor: color }, classNames: { base: 'shrink-0' }, isBordered: value === color, onClick: () => setValue(color), ...rest }) }))) }));
|
|
9
14
|
}, 'colorSelector');
|
|
10
15
|
//# sourceMappingURL=ColorSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorSelector.js","sourceRoot":"","sources":["../../../src/components/color-selector/ColorSelector.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorSelector.js","sourceRoot":"","sources":["../../../src/components/color-selector/ColorSelector.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAiBlD,MAAM,CAAC,MAAM,aAAa,GAAiC,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACzJ,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7G,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAG,CAAC,eAAe;YAAE,OAAO;QAC5B,QAAQ,CAAC,eAAe,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,cAAK,SAAS,EAAC,YAAY,YACxB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,MAAM,IAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,QAAC,aAAa,QAAC,SAAS,EAAC,kBAAkB,YAC1F,KAAC,MAAM,IACL,YAAY,QACZ,QAAQ,EAAE,KAAK,KAAK,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAK,EAChD,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,UAAU,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAChC,UAAU,EAAE,KAAK,KAAK,KAAK,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,KAC1B,IAAI,GACR,GACK,CACV,CAAC,GACE,CACP,CAAC;AACJ,CAAC,EAAE,eAAe,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fragment-build/ui",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"repository": {
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
"@types/lodash.defaultsdeep": "4.6.9",
|
|
22
22
|
"@types/react": "18.3.11",
|
|
23
23
|
"@types/react-dom": "18.3.1",
|
|
24
|
-
"@typescript-eslint/eslint-plugin": "8.
|
|
25
|
-
"@typescript-eslint/parser": "8.
|
|
24
|
+
"@typescript-eslint/eslint-plugin": "8.9.0",
|
|
25
|
+
"@typescript-eslint/parser": "8.9.0",
|
|
26
26
|
"@vitejs/plugin-react": "4.3.2",
|
|
27
27
|
"@vitejs/plugin-react-swc": "3.7.1",
|
|
28
28
|
"autoprefixer": "10.4.20",
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"react-dom": "18.3.1",
|
|
36
36
|
"storybook": "8.3.5",
|
|
37
37
|
"storybook-dark-mode": "4.0.2",
|
|
38
|
-
"typescript": "5.
|
|
39
|
-
"typescript-eslint": "8.
|
|
40
|
-
"vite": "5.4.
|
|
38
|
+
"typescript": "5.6.3",
|
|
39
|
+
"typescript-eslint": "8.9.0",
|
|
40
|
+
"vite": "5.4.9"
|
|
41
41
|
},
|
|
42
42
|
"scripts": {
|
|
43
43
|
"build": "tsc",
|
|
@@ -50,11 +50,11 @@
|
|
|
50
50
|
"@nextui-org/react": "2.4.8",
|
|
51
51
|
"@react-hooks-library/core": "0.6.2",
|
|
52
52
|
"@tabler/icons-react": "3.19.0",
|
|
53
|
-
"apexcharts": "3.54.
|
|
54
|
-
"framer-motion": "11.11.
|
|
53
|
+
"apexcharts": "3.54.1",
|
|
54
|
+
"framer-motion": "11.11.9",
|
|
55
55
|
"lodash.defaultsdeep": "4.6.1",
|
|
56
56
|
"next-themes": "0.3.0",
|
|
57
57
|
"react-apexcharts": "1.4.1",
|
|
58
|
-
"tailwindcss": "3.4.
|
|
58
|
+
"tailwindcss": "3.4.14"
|
|
59
59
|
}
|
|
60
60
|
}
|