@beweco/aurora-ui 0.1.31 → 0.1.34
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/index.cjs.js
CHANGED
|
@@ -762,16 +762,15 @@ var ColorPicker = function (_a) {
|
|
|
762
762
|
/**
|
|
763
763
|
* Render a color circle button
|
|
764
764
|
*/
|
|
765
|
-
var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsxRuntime.jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-
|
|
766
|
-
? "border-primary
|
|
767
|
-
: "border-default-
|
|
768
|
-
return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxRuntime.jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsxRuntime.jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
}, startContent: jsxRuntime.jsx("span", { className: "text-default-400 text-sm", children: "#" }) }) })] }), showPredefinedColors && predefinedColors.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
|
|
765
|
+
var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsxRuntime.jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-8 h-8 rounded-full border-2 cursor-pointer transition-all\n\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1\n\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110", "\n\t\t\t\t").concat(isSelected
|
|
766
|
+
? "border-primary-500 scale-110 ring-2 ring-primary-500 ring-offset-1"
|
|
767
|
+
: "border-default-700", "\n\t\t\t"), style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue)); };
|
|
768
|
+
return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxRuntime.jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsxRuntime.jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("input", { type: "color", id: inputId, name: name, value: textValue, onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0\n\t\t\t\t\t\t\ttransition-colors appearance-none bg-transparent p-0.5\n\t\t\t\t\t\t\tfocus:border-primary-500\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400", "\n\t\t\t\t\t\t\t").concat(error
|
|
769
|
+
? "border-danger dark:border-danger-400"
|
|
770
|
+
: "border-default-300 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }), jsxRuntime.jsx(react.Input, { type: "text", value: textValue, onValueChange: handleTextChange, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", classNames: {
|
|
771
|
+
input: "uppercase font-mono text-small",
|
|
772
|
+
inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
|
|
773
|
+
}, startContent: jsxRuntime.jsx("span", { className: "text-default-400 text-sm", children: "#" }) })] }), (error || isInvalidFormat) && (jsxRuntime.jsx("p", { className: "text-tiny text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
|
|
775
774
|
return renderColorCircle(color.value, color.name, normalizeHexColor(value) === normalizeHexColor(color.value));
|
|
776
775
|
}) })] })), enableRecentColors && recentColors.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: recentColors.map(function (color) {
|
|
777
776
|
return renderColorCircle(color, color, normalizeHexColor(value) === color);
|
package/dist/index.esm.js
CHANGED
|
@@ -763,16 +763,15 @@ var ColorPicker = function (_a) {
|
|
|
763
763
|
/**
|
|
764
764
|
* Render a color circle button
|
|
765
765
|
*/
|
|
766
|
-
var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-
|
|
767
|
-
? "border-primary
|
|
768
|
-
: "border-default-
|
|
769
|
-
return (jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxs("div", { className: "flex
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
}, startContent: jsx("span", { className: "text-default-400 text-sm", children: "#" }) }) })] }), showPredefinedColors && predefinedColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
|
|
766
|
+
var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-8 h-8 rounded-full border-2 cursor-pointer transition-all\n\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1\n\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110", "\n\t\t\t\t").concat(isSelected
|
|
767
|
+
? "border-primary-500 scale-110 ring-2 ring-primary-500 ring-offset-1"
|
|
768
|
+
: "border-default-700", "\n\t\t\t"), style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue)); };
|
|
769
|
+
return (jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "color", id: inputId, name: name, value: textValue, onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0\n\t\t\t\t\t\t\ttransition-colors appearance-none bg-transparent p-0.5\n\t\t\t\t\t\t\tfocus:border-primary-500\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400", "\n\t\t\t\t\t\t\t").concat(error
|
|
770
|
+
? "border-danger dark:border-danger-400"
|
|
771
|
+
: "border-default-300 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }), jsx(Input$1, { type: "text", value: textValue, onValueChange: handleTextChange, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", classNames: {
|
|
772
|
+
input: "uppercase font-mono text-small",
|
|
773
|
+
inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
|
|
774
|
+
}, startContent: jsx("span", { className: "text-default-400 text-sm", children: "#" }) })] }), (error || isInvalidFormat) && (jsx("p", { className: "text-tiny text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
|
|
776
775
|
return renderColorCircle(color.value, color.name, normalizeHexColor(value) === normalizeHexColor(color.value));
|
|
777
776
|
}) })] })), enableRecentColors && recentColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: recentColors.map(function (color) {
|
|
778
777
|
return renderColorCircle(color, color, normalizeHexColor(value) === color);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACX,gBAAgB,EAGhB,MAAM,qBAAqB,CAAC;AA4C7B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACX,gBAAgB,EAGhB,MAAM,qBAAqB,CAAC;AA4C7B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsPlD,CAAC"}
|