mblabs-roccato-frontend-commons 0.2.10 → 0.2.12

package/dist/index.d.ts

@@ -480,6 +480,7 @@ export declare interface ColorPickerProps extends Omit<ComponentProps<'input'>,
     value?: string;
     onChange?: (value: string) => void;
     error?: string;
+    buttonText?: string;
 }
 
 export declare function ColorScale({ colors, principalLabel, copiedLabel }: ColorScaleProps): JSX.Element;

package/dist/mblabs-roccato-frontend-commons.js

@@ -40150,22 +40150,22 @@ function MNe({
   );
 }
 const Rve = tn(
-  ({ label: n, helperText: e, value: t = "", onChange: r, error: i, disabled: o = !1, ...s }, a) => {
-    const l = Oe(null), c = () => {
-      var d;
-      o || (d = l.current) == null || d.click();
-    }, u = (d) => {
-      r == null || r(d.target.value);
+  ({ label: n, helperText: e, value: t = "", onChange: r, error: i, disabled: o = !1, buttonText: s = "Selecionar", ...a }, l) => {
+    const c = Oe(null), u = () => {
+      var f;
+      o || (f = c.current) == null || f.click();
+    }, d = (f) => {
+      r == null || r(f.target.value);
     };
     return /* @__PURE__ */ p.jsxs(Yt, { children: [
       n && /* @__PURE__ */ p.jsx(G1, { className: "mb-1.5 block", children: n }),
-      /* @__PURE__ */ p.jsxs(bt, { className: "items-center", children: [
+      /* @__PURE__ */ p.jsxs(bt, { className: "items-center relative", children: [
         /* @__PURE__ */ p.jsx(
           "input",
           {
             type: "text",
             value: t,
-            onChange: (d) => r == null ? void 0 : r(d.target.value),
+            onChange: (f) => r == null ? void 0 : r(f.target.value),
             placeholder: "#D92D20",
             disabled: o,
             className: G(
@@ -40174,39 +40174,42 @@ const Rve = tn(
               i && "border-error-500",
               o && "bg-gray-100 text-gray-400 cursor-not-allowed"
             ),
-            ...s
+            ...a
           }
         ),
         /* @__PURE__ */ p.jsxs(
           "button",
           {
             type: "button",
-            onClick: c,
+            onClick: u,
             disabled: o,
             className: G(
-              "h-10 px-3 border border-l-transparent rounded-r-2xl flex items-center gap-2 text-sm",
+              "h-10 px-3 border border-l-transparent rounded-r-2xl flex items-center gap-2 relative",
               "transition-colors",
+              "font-semibold text-sm text-gray-700 whitespace-nowrap",
+              "cursor-pointer",
               !o && "hover:bg-gray-50",
               o && "text-gray-400 cursor-not-allowed"
             ),
             children: [
               /* @__PURE__ */ p.jsx(kne, { className: "size-4 text-gray-500" }),
-              "Selecionar"
+              s,
+              /* @__PURE__ */ p.jsx(
+                "input",
+                {
+                  ref: (f) => {
+                    typeof l == "function" ? l(f) : l && (l.current = f), c.current = f;
+                  },
+                  type: "color",
+                  value: t,
+                  onChange: d,
+                  disabled: o,
+                  className: "absolute inset-0 opacity-0 cursor-pointer",
+                  style: { width: "100%", height: "100%" }
+                }
+              )
             ]
           }
-        ),
-        /* @__PURE__ */ p.jsx(
-          "input",
-          {
-            ref: (d) => {
-              typeof a == "function" ? a(d) : a && (a.current = d), l.current = d;
-            },
-            type: "color",
-            value: t,
-            onChange: u,
-            disabled: o,
-            className: "hidden"
-          }
         )
       ] }),
       (e || i) && /* @__PURE__ */ p.jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mblabs-roccato-frontend-commons",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "type": "module",
   "engines": {
     "node": ">=20.11.1"

package/src/components/molecules/ColorPicker/color-picker.tsx

@@ -12,10 +12,11 @@ export interface ColorPickerProps extends Omit<ComponentProps<'input'>, 'value'
   value?: string;
   onChange?: (value: string) => void;
   error?: string;
+  buttonText?: string;
 }
 
 export const ColorPicker = forwardRef<HTMLInputElement, ColorPickerProps>(
-  ({ label, helperText, value = '', onChange, error, disabled = false, ...props }, ref) => {
+  ({ label, helperText, value = '', onChange, error, disabled = false, buttonText = 'Selecionar', ...props }, ref) => {
     const inputRef = useRef<HTMLInputElement | null>(null);
 
     const handleClick = () => {
@@ -36,7 +37,7 @@ export const ColorPicker = forwardRef<HTMLInputElement, ColorPickerProps>(
           </Label>
         )}
 
-        <Flex className="items-center">
+        <Flex className="items-center relative">
           <input
             type="text"
             value={value}
@@ -57,32 +58,34 @@ export const ColorPicker = forwardRef<HTMLInputElement, ColorPickerProps>(
             onClick={handleClick}
             disabled={disabled}
             className={cn(
-              'h-10 px-3 border border-l-transparent rounded-r-2xl flex items-center gap-2 text-sm',
+              'h-10 px-3 border border-l-transparent rounded-r-2xl flex items-center gap-2 relative',
               'transition-colors',
+              'font-semibold text-sm text-gray-700 whitespace-nowrap',
+              'cursor-pointer',
               !disabled && 'hover:bg-gray-50',
               disabled && 'text-gray-400 cursor-not-allowed'
             )}
           >
             <Dropper className="size-4 text-gray-500" />
-            Selecionar
-          </button>
-
-          <input
-            ref={(node) => {
-              if (typeof ref === 'function') {
-                ref(node);
-              } else if (ref) {
-                ref.current = node;
-              }
+            {buttonText}
+            <input
+              ref={(node) => {
+                if (typeof ref === 'function') {
+                  ref(node);
+                } else if (ref) {
+                  ref.current = node;
+                }
 
-              inputRef.current = node;
-            }}
-            type="color"
-            value={value}
-            onChange={handleChange}
-            disabled={disabled}
-            className="hidden"
-          />
+                inputRef.current = node;
+              }}
+              type="color"
+              value={value}
+              onChange={handleChange}
+              disabled={disabled}
+              className="absolute inset-0 opacity-0 cursor-pointer"
+              style={{ width: '100%', height: '100%' }}
+            />
+          </button>
         </Flex>
 
         {(helperText || error) && (