@pagamio/frontend-commons-lib 0.8.271 → 0.8.273

package/lib/components/ui/DatePicker.js

@@ -14,8 +14,6 @@ function DatePicker({ value, disabled, name, placeholder, onChange }) {
     useEffect(() => {
         setSelectedDate(getValidDate(value));
     }, [value]);
-    // Only set defaultValue when a value is explicitly provided
-    const datepickerDefaultValue = selectedDate ?? undefined;
     const datepickerTheme = {
         root: {
             input: {
@@ -74,12 +72,16 @@ function DatePicker({ value, disabled, name, placeholder, onChange }) {
             },
         },
     };
-    return (_jsx("div", { children: _jsx(Datepicker, { value: selectedDate ?? undefined, onChange: (date) => {
-                const validDate = date ? new Date(date) : new Date();
+    return (_jsx("div", { children: _jsx(Datepicker, { value: selectedDate ?? null, label: placeholder || 'Select date', onChange: (date) => {
+                if (!date) {
+                    setSelectedDate(null);
+                    return;
+                }
+                const validDate = new Date(date);
                 setSelectedDate(validDate);
                 if (onChange && !Number.isNaN(validDate.getTime())) {
                     onChange(validDate);
                 }
-            }, defaultValue: datepickerDefaultValue, name: name, className: "", disabled: disabled, theme: datepickerTheme }) }));
+            }, name: name, className: "", disabled: disabled, theme: datepickerTheme }) }));
 }
 export default DatePicker;

package/lib/components/ui/HoverableValue.js

@@ -1,9 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HiClipboardCopy } from 'react-icons/hi';
+import { HiCheck, HiClipboardCopy } from 'react-icons/hi';
 import { useState } from 'react';
 import Button from './Button';
 const HoverableValue = ({ value, truncatedValue }) => {
     const [isHovered, setIsHovered] = useState(false);
-    return (_jsxs(Button, { type: "button", size: "icon", variant: "ghost", "aria-label": "Copy to clipboard", className: "relative flex cursor-pointer items-center", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => navigator.clipboard.writeText(value), children: [_jsx("span", { title: value, children: truncatedValue }), isHovered && (_jsx(HiClipboardCopy, { className: "ml-2 text-foreground/70 hover:text-foreground", title: "Copy to clipboard" }))] }));
+    const [isCopied, setIsCopied] = useState(false);
+    const handleCopy = () => {
+        navigator.clipboard.writeText(value);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 1500);
+    };
+    let icon = null;
+    if (isCopied) {
+        icon = _jsx(HiCheck, { className: "h-3.5 w-3.5 text-success shrink-0" });
+    }
+    else if (isHovered) {
+        icon = _jsx(HiClipboardCopy, { className: "h-3.5 w-3.5 text-foreground/50 shrink-0" });
+    }
+    return (_jsxs(Button, { type: "button", size: "sm", variant: "ghost", "aria-label": "Copy to clipboard", className: "gap-1 whitespace-nowrap font-normal", title: value, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
+            setIsHovered(false);
+            setIsCopied(false);
+        }, onClick: handleCopy, children: [_jsx("span", { className: "font-mono", children: truncatedValue }), icon] }));
 };
 export default HoverableValue;

package/lib/styles.css

@@ -3034,6 +3034,9 @@ video {
 .text-foreground {
   color: hsl(var(--foreground));
 }
+.text-foreground\/50 {
+  color: hsl(var(--foreground) / 0.5);
+}
 .text-foreground\/70 {
   color: hsl(var(--foreground) / 0.7);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.271",
+  "version": "0.8.273",
   "publishConfig": {
     "access": "public",
     "provenance": false