@fragment-build/ui 1.13.3 → 1.13.5
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 +4 -2
- package/dist/components/color-input/ColorInput.js +4 -3
- package/dist/components/color-input/ColorInput.js.map +1 -1
- package/dist/components/color-input/ColorInput.stories.d.ts +1 -0
- package/dist/components/color-input/ColorInput.stories.js +6 -0
- package/dist/components/color-input/ColorInput.stories.js.map +1 -1
- package/package.json +4 -4
|
@@ -2,5 +2,7 @@ import type { InputProps } from '@nextui-org/react';
|
|
|
2
2
|
/**
|
|
3
3
|
* Primary UI component for selecting a color
|
|
4
4
|
*/
|
|
5
|
-
export
|
|
6
|
-
|
|
5
|
+
export interface ColorInputProps extends InputProps {
|
|
6
|
+
placeholderValue?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const ColorInput: ({ defaultValue, placeholderValue, label, errorMessage, onValueChange, isInvalid, value: controlledValue, placeholder, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,8 +2,9 @@ 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
|
-
|
|
6
|
-
|
|
5
|
+
;
|
|
6
|
+
export const ColorInput = withFragment(({ defaultValue = '', placeholderValue, label = 'Color', errorMessage = "Please enter a valid color in hex format e.g. #f3f or #ff33ff", onValueChange, isInvalid, value: controlledValue, placeholder, ...rest }) => {
|
|
7
|
+
const [value, setValue] = useState(controlledValue || defaultValue);
|
|
7
8
|
useEffect(() => onValueChange && onValueChange(value), [value, onValueChange]);
|
|
8
9
|
useEffect(() => {
|
|
9
10
|
if (!controlledValue)
|
|
@@ -21,6 +22,6 @@ export const ColorInput = withFragment(({ defaultValue, label = 'Color', errorMe
|
|
|
21
22
|
rest.onChange(e);
|
|
22
23
|
setValue(e.currentTarget.value);
|
|
23
24
|
};
|
|
24
|
-
return (_jsx(Input, { ...rest, label: label, type: "text", value: value, onValueChange: setValue, isInvalid: invalid, errorMessage: invalid && errorMessage, endContent: (_jsx(Avatar, { as: "button", size: "sm", showFallback: true, fallback: _jsx("input", { type:
|
|
25
|
+
return (_jsx(Input, { ...rest, label: label, type: "text", value: value, onValueChange: setValue, isInvalid: invalid, errorMessage: invalid && errorMessage, placeholder: placeholder || placeholderValue, endContent: (_jsx(Avatar, { as: "button", size: "sm", showFallback: true, fallback: (_jsx("input", { type: "color", className: "w-full h-full opacity-0 cursor-pointer", value: placeholderValue && !value ? placeholderValue : value, onChange: handleOnChange })), style: { backgroundColor: value || placeholderValue }, classNames: { base: 'shrink-0 self-center -mb-0.5', fallback: 'w-full h-full' } })) }));
|
|
25
26
|
}, 'colorInput');
|
|
26
27
|
//# sourceMappingURL=ColorInput.js.map
|
|
@@ -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;
|
|
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;AAQjD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,EACtC,YAAY,GAAG,EAAE,EACjB,gBAAgB,EAChB,KAAK,GAAG,OAAO,EACf,YAAY,GAAG,+DAA+D,EAC9E,aAAa,EACb,SAAS,EACT,KAAK,EAAE,eAAe,EACtB,WAAW,EACX,GAAG,IAAI,EACS,EAAE,EAAE;IACpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,eAAe,IAAI,YAAY,CAAC,CAAC;IAEpE,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,CAAC;IAClC,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,WAAW,EAAE,WAAW,IAAI,gBAAgB,EAC5C,UAAU,EAAE,CACV,KAAC,MAAM,IACL,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,IAAI,EACT,YAAY,QACZ,QAAQ,EAAE,CACR,gBACE,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,wCAAwC,EAClD,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,EAC5D,QAAQ,EAAE,cAAc,GACxB,CACH,EACD,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,IAAI,gBAAgB,EAAE,EACrD,UAAU,EAAE,EAAE,IAAI,EAAE,8BAA8B,EAAE,QAAQ,EAAE,eAAe,EAAE,GAC/E,CACH,GACD,CACH,CAAC;AACJ,CAAC,EAAE,YAAY,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorInput.stories.js","sourceRoot":"","sources":["../../../src/components/color-input/ColorInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,qGAAqG;AACrG,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,aAAa,EAAE,OAAO,CAAC,GAAG;KAC3B;CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"ColorInput.stories.js","sourceRoot":"","sources":["../../../src/components/color-input/ColorInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,qGAAqG;AACrG,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,aAAa,EAAE,OAAO,CAAC,GAAG;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,IAAI,EAAE;QACJ,aAAa,EAAE,OAAO,CAAC,GAAG;QAC1B,gBAAgB,EAAE,SAAS;KAC5B;CACF,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.5",
|
|
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.10.0",
|
|
25
|
+
"@typescript-eslint/parser": "8.10.0",
|
|
26
26
|
"@vitejs/plugin-react": "4.3.2",
|
|
27
27
|
"@vitejs/plugin-react-swc": "3.7.1",
|
|
28
28
|
"autoprefixer": "10.4.20",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"storybook": "8.3.5",
|
|
37
37
|
"storybook-dark-mode": "4.0.2",
|
|
38
38
|
"typescript": "5.6.3",
|
|
39
|
-
"typescript-eslint": "8.
|
|
39
|
+
"typescript-eslint": "8.10.0",
|
|
40
40
|
"vite": "5.4.9"
|
|
41
41
|
},
|
|
42
42
|
"scripts": {
|