@scaleflex/ui-tw 0.0.67 → 0.0.69
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ColorPickerProps } from '@scaleflex/ui-tw/color-picker/color-picker.types';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
declare function ColorPicker({ value, placeholder, onChange, onCancel, onSelect, className, children, presetColors, }: ColorPickerProps): React.JSX.Element;
|
|
3
|
+
declare function ColorPicker({ title, value, placeholder, onChange, onCancel, onSelect, onFocus, className, inputClassName, cancelLabel, selectLabel, children, presetColors, displayAsInput, }: ColorPickerProps): React.JSX.Element;
|
|
4
4
|
export { ColorPicker };
|
|
@@ -10,14 +10,21 @@ import { PaletteIcon } from 'lucide-react';
|
|
|
10
10
|
import React, { useState } from 'react';
|
|
11
11
|
import { HexColorInput, HexColorPicker } from 'react-colorful';
|
|
12
12
|
function ColorPicker(_ref) {
|
|
13
|
-
var
|
|
13
|
+
var title = _ref.title,
|
|
14
|
+
value = _ref.value,
|
|
14
15
|
placeholder = _ref.placeholder,
|
|
15
16
|
_onChange = _ref.onChange,
|
|
16
17
|
onCancel = _ref.onCancel,
|
|
17
18
|
onSelect = _ref.onSelect,
|
|
19
|
+
onFocus = _ref.onFocus,
|
|
18
20
|
className = _ref.className,
|
|
21
|
+
inputClassName = _ref.inputClassName,
|
|
22
|
+
cancelLabel = _ref.cancelLabel,
|
|
23
|
+
selectLabel = _ref.selectLabel,
|
|
19
24
|
children = _ref.children,
|
|
20
|
-
presetColors = _ref.presetColors
|
|
25
|
+
presetColors = _ref.presetColors,
|
|
26
|
+
_ref$displayAsInput = _ref.displayAsInput,
|
|
27
|
+
displayAsInput = _ref$displayAsInput === void 0 ? false : _ref$displayAsInput;
|
|
21
28
|
var _useState = useState(value),
|
|
22
29
|
_useState2 = _slicedToArray(_useState, 2),
|
|
23
30
|
tempValue = _useState2[0],
|
|
@@ -29,9 +36,33 @@ function ColorPicker(_ref) {
|
|
|
29
36
|
onCancel === null || onCancel === void 0 || onCancel();
|
|
30
37
|
setTempValue(value);
|
|
31
38
|
};
|
|
32
|
-
return /*#__PURE__*/React.createElement(Dialog, null, /*#__PURE__*/React.createElement(DialogTrigger, {
|
|
39
|
+
return /*#__PURE__*/React.createElement(Dialog, null, children ? /*#__PURE__*/React.createElement(DialogTrigger, {
|
|
33
40
|
asChild: true
|
|
34
|
-
}, children
|
|
41
|
+
}, children) : displayAsInput ? /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
className: 'relative'
|
|
43
|
+
}, /*#__PURE__*/React.createElement(DialogTrigger, {
|
|
44
|
+
asChild: true
|
|
45
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
46
|
+
type: "button",
|
|
47
|
+
className: "border-border absolute top-1.5 left-1.5 h-7 w-7 shrink-0 rounded border shadow-inner",
|
|
48
|
+
style: {
|
|
49
|
+
backgroundColor: value
|
|
50
|
+
},
|
|
51
|
+
"aria-label": "Open color picker"
|
|
52
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
53
|
+
className: "text-muted-foreground absolute left-11 h-10 leading-10"
|
|
54
|
+
}, "#"), /*#__PURE__*/React.createElement(HexColorInput, {
|
|
55
|
+
color: value,
|
|
56
|
+
onFocus: onFocus,
|
|
57
|
+
onChange: function onChange(color) {
|
|
58
|
+
setTempValue(color);
|
|
59
|
+
onSelect === null || onSelect === void 0 || onSelect(color);
|
|
60
|
+
},
|
|
61
|
+
placeholder: placeholder || 'Enter hex color',
|
|
62
|
+
className: cn.apply(void 0, ['w-full bg-transparent font-mono outline-none', 'flex items-center gap-2'].concat(_toConsumableArray(getBaseInputClasses()), [readOnlyClassNames, selectionHighlightClassNames, inputVariants(), 'pl-14', inputClassName]))
|
|
63
|
+
})) : /*#__PURE__*/React.createElement(DialogTrigger, {
|
|
64
|
+
asChild: true
|
|
65
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
35
66
|
type: "button",
|
|
36
67
|
className: "border-muted h-8 w-8 rounded border shadow-inner",
|
|
37
68
|
style: {
|
|
@@ -40,7 +71,7 @@ function ColorPicker(_ref) {
|
|
|
40
71
|
"aria-label": "Open color picker"
|
|
41
72
|
})), /*#__PURE__*/React.createElement(DialogFormContent, {
|
|
42
73
|
className: cn('w-[316px]', className)
|
|
43
|
-
}, /*#__PURE__*/React.createElement(DialogFormHeader, null, /*#__PURE__*/React.createElement(DialogFormIcon, null, /*#__PURE__*/React.createElement(PaletteIcon, null)), /*#__PURE__*/React.createElement(DialogFormTitle, null,
|
|
74
|
+
}, /*#__PURE__*/React.createElement(DialogFormHeader, null, /*#__PURE__*/React.createElement(DialogFormIcon, null, /*#__PURE__*/React.createElement(PaletteIcon, null)), /*#__PURE__*/React.createElement(DialogFormTitle, null, title || 'Pick color')), /*#__PURE__*/React.createElement(DialogFormBody, {
|
|
44
75
|
className: "space-y-4"
|
|
45
76
|
}, /*#__PURE__*/React.createElement(HexColorPicker, {
|
|
46
77
|
color: tempValue,
|
|
@@ -70,11 +101,11 @@ function ColorPicker(_ref) {
|
|
|
70
101
|
variant: "outline",
|
|
71
102
|
className: "flex-1",
|
|
72
103
|
onClick: handleCancel
|
|
73
|
-
},
|
|
104
|
+
}, cancelLabel || 'Cancel')), /*#__PURE__*/React.createElement(DialogTrigger, {
|
|
74
105
|
asChild: true
|
|
75
106
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
76
107
|
className: "flex-1",
|
|
77
108
|
onClick: handleSelect
|
|
78
|
-
},
|
|
109
|
+
}, selectLabel || 'Select')))));
|
|
79
110
|
}
|
|
80
111
|
export { ColorPicker };
|
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
import type { ReactElement, ReactNode } from 'react';
|
|
1
|
+
import type { FocusEvent, ReactElement, ReactNode } from 'react';
|
|
2
2
|
export type ColorPickerProps = {
|
|
3
3
|
value: string;
|
|
4
4
|
onSelect: (value: string) => void;
|
|
5
5
|
onChange?: (value: string) => void;
|
|
6
6
|
onCancel?: () => void;
|
|
7
|
+
onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
|
|
7
8
|
className?: string;
|
|
9
|
+
title?: string | ReactElement;
|
|
10
|
+
cancelLabel?: string | ReactElement;
|
|
11
|
+
selectLabel?: string | ReactElement;
|
|
12
|
+
inputClassName?: string;
|
|
8
13
|
children?: ReactNode;
|
|
9
14
|
placeholder?: ReactElement | string;
|
|
10
15
|
presetColors?: string[];
|
|
16
|
+
displayAsInput?: boolean;
|
|
11
17
|
};
|
|
@@ -5,8 +5,12 @@ declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimiti
|
|
|
5
5
|
declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
|
|
6
6
|
declare function DialogClose({ ...props }: ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
|
|
7
7
|
declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
|
|
8
|
-
declare function DialogWideContent({ className, children, ...props }: ComponentProps<typeof DialogPrimitive.Content>
|
|
9
|
-
|
|
8
|
+
declare function DialogWideContent({ className, children, overlayClassName, ...props }: ComponentProps<typeof DialogPrimitive.Content> & {
|
|
9
|
+
overlayClassName?: string;
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function DialogFormContent({ className, children, overlayClassName, ...props }: ComponentProps<typeof DialogPrimitive.Content> & {
|
|
12
|
+
overlayClassName?: string;
|
|
13
|
+
}): React.JSX.Element;
|
|
10
14
|
declare function DialogWideHeader({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
|
|
11
15
|
declare function DialogFormHeader({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
|
|
12
16
|
declare function DialogWideBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
|
|
@@ -2,8 +2,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
2
2
|
import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
|
|
3
3
|
import _extends from "@babel/runtime/helpers/extends";
|
|
4
4
|
var _excluded = ["className"],
|
|
5
|
-
_excluded2 = ["className", "children"],
|
|
6
|
-
_excluded3 = ["className", "children"],
|
|
5
|
+
_excluded2 = ["className", "children", "overlayClassName"],
|
|
6
|
+
_excluded3 = ["className", "children", "overlayClassName"],
|
|
7
7
|
_excluded4 = ["className"],
|
|
8
8
|
_excluded5 = ["className"],
|
|
9
9
|
_excluded6 = ["className"],
|
|
@@ -57,10 +57,13 @@ function DialogOverlay(_ref5) {
|
|
|
57
57
|
function DialogWideContent(_ref6) {
|
|
58
58
|
var className = _ref6.className,
|
|
59
59
|
children = _ref6.children,
|
|
60
|
+
overlayClassName = _ref6.overlayClassName,
|
|
60
61
|
props = _objectWithoutProperties(_ref6, _excluded2);
|
|
61
62
|
return /*#__PURE__*/React.createElement(DialogPortal, {
|
|
62
63
|
"data-slot": "dialog-portal"
|
|
63
|
-
}, /*#__PURE__*/React.createElement(DialogOverlay,
|
|
64
|
+
}, /*#__PURE__*/React.createElement(DialogOverlay, {
|
|
65
|
+
className: overlayClassName
|
|
66
|
+
}), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
|
|
64
67
|
"data-slot": "dialog-content",
|
|
65
68
|
className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border shadow-lg duration-200 lg:max-w-[62rem] xl:max-w-5xl', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className)
|
|
66
69
|
}, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
|
|
@@ -77,10 +80,13 @@ function DialogWideContent(_ref6) {
|
|
|
77
80
|
function DialogFormContent(_ref7) {
|
|
78
81
|
var className = _ref7.className,
|
|
79
82
|
children = _ref7.children,
|
|
83
|
+
overlayClassName = _ref7.overlayClassName,
|
|
80
84
|
props = _objectWithoutProperties(_ref7, _excluded3);
|
|
81
85
|
return /*#__PURE__*/React.createElement(DialogPortal, {
|
|
82
86
|
"data-slot": "dialog-portal"
|
|
83
|
-
}, /*#__PURE__*/React.createElement(DialogOverlay,
|
|
87
|
+
}, /*#__PURE__*/React.createElement(DialogOverlay, {
|
|
88
|
+
className: overlayClassName
|
|
89
|
+
}), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
|
|
84
90
|
"data-slot": "dialog-content",
|
|
85
91
|
className: cn('bg-background text-foreground border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className)
|
|
86
92
|
}, props), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scaleflex/ui-tw",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.69",
|
|
4
4
|
"author": "scaleflex",
|
|
5
5
|
"repository": "github:scaleflex/ui",
|
|
6
6
|
"homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"@radix-ui/react-slot": "^1.1.2",
|
|
24
24
|
"@radix-ui/react-switch": "^1.0.1",
|
|
25
25
|
"@radix-ui/react-tooltip": "^1.2.6",
|
|
26
|
-
"@scaleflex/icons-tw": "^0.0.
|
|
26
|
+
"@scaleflex/icons-tw": "^0.0.69",
|
|
27
27
|
"@tanstack/react-table": "^8.21.3",
|
|
28
28
|
"@types/lodash.merge": "^4.6.9",
|
|
29
29
|
"class-variance-authority": "^0.7.1",
|