@wellingtonhlc/shared-ui 0.25.4 → 0.25.6

package/dist/components/CopyableField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableField.d.ts","sourceRoot":"","sources":["../../src/components/CopyableField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,wFAiExB,CAAC"}
+{"version":3,"file":"CopyableField.d.ts","sourceRoot":"","sources":["../../src/components/CopyableField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,wFAuGxB,CAAC"}

package/dist/components/CopyableField.js

@@ -1,17 +1,38 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Slot } from '@radix-ui/react-slot';
+import { ClipboardCheckIcon, ClipboardIcon } from 'lucide-react';
 import { toast } from 'sonner';
 import { cn } from '../utils/cn';
 export const CopyableField = React.forwardRef(function CopyableField({ asChild = false, children, className, errorMessage = 'Nao foi possivel copiar o valor.', onClick, onKeyDown, successMessage = 'Valor copiado.', title = 'Clique para copiar', value, ...props }, ref) {
     const Component = asChild ? Slot : 'span';
     const copyValue = value === null || value === undefined ? '' : String(value);
     const canCopy = copyValue.trim().length > 0;
+    const [copied, setCopied] = React.useState(false);
+    const feedbackTimerRef = React.useRef(null);
+    React.useEffect(() => {
+        return () => {
+            if (feedbackTimerRef.current) {
+                clearTimeout(feedbackTimerRef.current);
+            }
+        };
+    }, []);
+    function showCopiedFeedback() {
+        setCopied(true);
+        if (feedbackTimerRef.current) {
+            clearTimeout(feedbackTimerRef.current);
+        }
+        feedbackTimerRef.current = setTimeout(() => {
+            setCopied(false);
+            feedbackTimerRef.current = null;
+        }, 1200);
+    }
     async function copy() {
         if (!canCopy)
             return;
         try {
             await navigator.clipboard.writeText(copyValue);
+            showCopiedFeedback();
             toast.success(successMessage);
         }
         catch {
@@ -33,6 +54,7 @@ export const CopyableField = React.forwardRef(function CopyableField({ asChild =
             void copy();
         }
     }
-    return (_jsx(Component, { ref: ref, role: canCopy ? 'button' : undefined, tabIndex: canCopy ? 0 : -1, title: canCopy ? title : undefined, "aria-disabled": !canCopy, className: cn(canCopy &&
-            'hover:border-brand/60 hover:bg-brand/10 focus-visible:border-brand/60 focus-visible:ring-brand/40 cursor-pointer rounded-md border border-transparent transition-colors focus-visible:ring-2 focus-visible:outline-none', className), onClick: handleClick, onKeyDown: handleKeyDown, ...props, children: children }));
+    return (_jsxs(Component, { ref: ref, role: canCopy ? 'button' : undefined, tabIndex: canCopy ? 0 : -1, title: canCopy ? title : undefined, "aria-disabled": !canCopy, "aria-label": canCopy && copied ? 'Copiado' : undefined, "data-copied": copied ? 'true' : undefined, className: cn(canCopy &&
+            'group/copyable relative cursor-pointer rounded-md border border-transparent focus-visible:outline-none', className), onClick: handleClick, onKeyDown: handleKeyDown, ...props, children: [children, canCopy && !asChild ? (_jsx("span", { "aria-hidden": "true", className: cn('border-app-border bg-[color-mix(in_srgb,var(--foreground-muted)_3%,var(--background-secondary))] text-foreground-muted pointer-events-none absolute top-1/2 right-0 inline-flex size-6 translate-x-[calc(100%+0.25rem)] -translate-y-1/2 items-center justify-center rounded-md border opacity-0 shadow-sm transition-[opacity,color,border-color,background-color] duration-150 group-hover/copyable:opacity-100 group-focus-visible/copyable:opacity-100', copied &&
+                    'bg-[color-mix(in_srgb,var(--brand)_9%,var(--background-secondary))] text-brand opacity-100'), children: copied ? _jsx(ClipboardCheckIcon, { className: "size-3.5" }) : _jsx(ClipboardIcon, { className: "size-3.5" }) })) : null] }));
 });

package/dist/components/TabsUnderlined.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsUnderlined.d.ts","sourceRoot":"","sources":["../../src/components/TabsUnderlined.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9E,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,cAAsB,EACtB,KAAK,GACN,EAAE,mBAAmB,+BA2DrB"}
+{"version":3,"file":"TabsUnderlined.d.ts","sourceRoot":"","sources":["../../src/components/TabsUnderlined.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAa9E,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,cAAsB,EACtB,KAAK,GACN,EAAE,mBAAmB,+BA4DrB"}

package/dist/components/TabsUnderlined.js

@@ -3,6 +3,9 @@ import { useMemo, useState } from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
 import { cn } from '../utils/cn';
 const DEFAULT_TAB_MIN_WIDTH = '8.75rem';
+const TAB_BAR_BACKGROUND = 'bg-[color-mix(in_srgb,var(--foreground-muted)_5%,var(--background-secondary))]';
+const TAB_INACTIVE_BACKGROUND = 'bg-[color-mix(in_srgb,var(--foreground-muted)_5%,var(--background-secondary))]';
+const TAB_INACTIVE_HOVER_BACKGROUND = 'hover:bg-[color-mix(in_srgb,var(--foreground-muted)_8%,var(--background-secondary))]';
 export function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, tabMaxWidth, tabMinWidth, tabWidth, triggerClassName, truncateLabels = false, value, }) {
     const visibleItems = useMemo(() => items.filter((item) => item.visible ?? true), [items]);
     const initialValue = defaultValue && visibleItems.some((item) => item.id === defaultValue)
@@ -14,7 +17,7 @@ export function TabsUnderlined({ className, contentClassName, defaultValue, item
         setInternalValue(nextValue);
         onValueChange?.(nextValue);
     }
-    return (_jsx("div", { className: cn('border-app-border bg-surface flex h-full min-w-0 flex-col overflow-hidden rounded-xl border', className), children: _jsxs(Tabs.Root, { value: resolvedValue, onValueChange: handleValueChange, className: "flex min-w-0 flex-1 flex-col", children: [_jsx(Tabs.List, { className: cn('border-app-border flex min-w-0 overflow-x-auto overflow-y-hidden border-b bg-[color-mix(in_srgb,var(--foreground-muted)_5%,var(--surface))] text-sm', listClassName), children: visibleItems.map((item) => (_jsx(TabTrigger, { value: item.id, className: triggerClassName, maxWidth: tabMaxWidth, minWidth: tabMinWidth, width: tabWidth, truncate: truncateLabels, children: item.label }, item.id))) }), visibleItems.map((item) => (_jsx(Tabs.Content, { value: item.id, className: cn('flex h-full min-w-0 flex-1 flex-col overflow-hidden', contentClassName), children: item.children }, item.id)))] }) }));
+    return (_jsx("div", { className: cn('border-app-border bg-background-secondary flex h-full min-w-0 flex-col overflow-hidden rounded-xl border', className), children: _jsxs(Tabs.Root, { value: resolvedValue, onValueChange: handleValueChange, className: "flex min-w-0 flex-1 flex-col", children: [_jsx(Tabs.List, { className: cn('border-app-border flex min-w-0 overflow-x-auto overflow-y-hidden border-b text-sm', TAB_BAR_BACKGROUND, listClassName), children: visibleItems.map((item) => (_jsx(TabTrigger, { value: item.id, className: triggerClassName, maxWidth: tabMaxWidth, minWidth: tabMinWidth, width: tabWidth, truncate: truncateLabels, children: item.label }, item.id))) }), visibleItems.map((item) => (_jsx(Tabs.Content, { value: item.id, className: cn('flex h-full min-w-0 flex-1 flex-col overflow-hidden', contentClassName), children: item.children }, item.id)))] }) }));
 }
 function TabTrigger({ children, className, value, maxWidth, minWidth, width, truncate, }) {
     const style = {
@@ -22,5 +25,5 @@ function TabTrigger({ children, className, value, maxWidth, minWidth, width, tru
         minWidth: minWidth ?? DEFAULT_TAB_MIN_WIDTH,
         width,
     };
-    return (_jsx(Tabs.Trigger, { value: value, style: style, className: cn('text-foreground-muted hover:text-foreground focus-visible:ring-brand/50 data-[state=active]:border-app-border data-[state=active]:border-b-surface data-[state=active]:bg-surface data-[state=active]:text-foreground -mb-px inline-flex shrink-0 cursor-pointer items-center justify-center border border-t-0 border-transparent bg-[color-mix(in_srgb,var(--foreground-muted)_7%,var(--surface))] px-4 py-2 text-sm font-medium transition-colors first:border-l-0 hover:bg-[color-mix(in_srgb,var(--foreground-muted)_10%,var(--surface))] focus:outline-none focus-visible:ring-2', className), children: _jsx("span", { className: cn('min-w-0', truncate && 'overflow-hidden text-ellipsis whitespace-nowrap'), children: children }) }));
+    return (_jsx(Tabs.Trigger, { value: value, style: style, className: cn('text-foreground-muted hover:text-foreground focus-visible:ring-brand/50 data-[state=active]:border-app-border data-[state=active]:border-b-background-secondary data-[state=active]:bg-background-secondary data-[state=active]:text-foreground -mb-px inline-flex shrink-0 cursor-pointer items-center justify-center border border-t-0 border-transparent px-4 py-2 text-sm font-medium transition-colors first:border-l-0 focus:outline-none focus-visible:ring-2', TAB_INACTIVE_BACKGROUND, TAB_INACTIVE_HOVER_BACKGROUND, className), children: _jsx("span", { className: cn('min-w-0', truncate && 'overflow-hidden text-ellipsis whitespace-nowrap'), children: children }) }));
 }

package/dist/styles.css

@@ -1102,6 +1102,10 @@ h2.react-datepicker__current-month {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .size-7 {
     width: calc(var(--spacing) * 7);
     height: calc(var(--spacing) * 7);
@@ -1549,6 +1553,10 @@ h2.react-datepicker__current-month {
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-\[calc\(100\%\+0\.25rem\)\] {
+    --tw-translate-x: calc(100% + 0.25rem);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1897,6 +1905,12 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in srgb,var(--brand) 5%,var(--surface));
     }
   }
+  .bg-\[color-mix\(in_srgb\,var\(--brand\)_9\%\,var\(--background-secondary\)\)\] {
+    background-color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--brand) 9%,var(--background-secondary));
+    }
+  }
   .bg-\[color-mix\(in_srgb\,var\(--brand\)_10\%\,var\(--surface\)\)\] {
     background-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1921,16 +1935,22 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in srgb,var(--destructive) 12%,var(--surface));
     }
   }
-  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_5\%\,var\(--surface\)\)\] {
+  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_3\%\,var\(--background-secondary\)\)\] {
     background-color: var(--foreground-muted);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,var(--foreground-muted) 5%,var(--surface));
+      background-color: color-mix(in srgb,var(--foreground-muted) 3%,var(--background-secondary));
+    }
+  }
+  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_5\%\,var\(--background-secondary\)\)\] {
+    background-color: var(--foreground-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--foreground-muted) 5%,var(--background-secondary));
     }
   }
-  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_7\%\,var\(--surface\)\)\] {
+  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_5\%\,var\(--surface\)\)\] {
     background-color: var(--foreground-muted);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,var(--foreground-muted) 7%,var(--surface));
+      background-color: color-mix(in srgb,var(--foreground-muted) 5%,var(--surface));
     }
   }
   .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,var\(--surface\)\)\] {
@@ -2739,6 +2759,11 @@ h2.react-datepicker__current-month {
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[opacity\,color\,border-color\,background-color\] {
+    transition-property: opacity,color,border-color,background-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[opacity\,transform\,visibility\] {
     transition-property: opacity,transform,visibility;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2808,6 +2833,18 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .group-hover\/copyable\:opacity-100 {
+    &:is(:where(.group\/copyable):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
+  .group-focus-visible\/copyable\:opacity-100 {
+    &:is(:where(.group\/copyable):focus-visible *) {
+      opacity: 100%;
+    }
+  }
   .placeholder\:text-foreground-muted {
     &::placeholder {
       color: var(--color-foreground-muted);
@@ -2899,16 +2936,6 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:border-brand\/60 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-brand);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-brand) 60%, transparent);
-        }
-      }
-    }
-  }
   .hover\:border-transparent {
     &:hover {
       @media (hover: hover) {
@@ -3040,12 +3067,12 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_10\%\,var\(--surface\)\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,var\(--background-secondary\)\)\] {
     &:hover {
       @media (hover: hover) {
         background-color: var(--foreground-muted);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--foreground-muted) 10%,var(--surface));
+          background-color: color-mix(in srgb,var(--foreground-muted) 8%,var(--background-secondary));
         }
       }
     }
@@ -3135,16 +3162,6 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:bg-brand\/10 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-brand);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-brand) 10%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-destructive {
     &:hover {
       @media (hover: hover) {
@@ -3344,14 +3361,6 @@ h2.react-datepicker__current-month {
       --tw-ring-inset: inset;
     }
   }
-  .focus-visible\:border-brand\/60 {
-    &:focus-visible {
-      border-color: var(--color-brand);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-brand) 60%, transparent);
-      }
-    }
-  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3382,14 +3391,6 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .focus-visible\:ring-brand\/40 {
-    &:focus-visible {
-      --tw-ring-color: var(--color-brand);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-brand) 40%, transparent);
-      }
-    }
-  }
   .focus-visible\:ring-brand\/50 {
     &:focus-visible {
       --tw-ring-color: var(--color-brand);
@@ -3587,14 +3588,14 @@ h2.react-datepicker__current-month {
       border-color: var(--color-app-border);
     }
   }
-  .data-\[state\=active\]\:border-b-surface {
+  .data-\[state\=active\]\:border-b-background-secondary {
     &[data-state="active"] {
-      border-bottom-color: var(--color-surface);
+      border-bottom-color: var(--color-background-secondary);
     }
   }
-  .data-\[state\=active\]\:bg-surface {
+  .data-\[state\=active\]\:bg-background-secondary {
     &[data-state="active"] {
-      background-color: var(--color-surface);
+      background-color: var(--color-background-secondary);
     }
   }
   .data-\[state\=active\]\:text-foreground {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wellingtonhlc/shared-ui",
-    "version": "0.25.4",
+    "version": "0.25.6",
     "private": false,
     "type": "module",
     "main": "./dist/index.js",