@wellingtonhlc/shared-ui 0.25.3 → 0.25.6

package/README.md

@@ -221,6 +221,29 @@ import { Bell, Settings } from 'lucide-react';
 </AppShell.Actions>
 ```
 
+## TabsUnderlined
+
+`TabsUnderlined` renderiza abas sublinhadas com conteudo controlado ou nao controlado.
+As abas ja possuem tamanho minimo padrao e padding horizontal para comportar labels
+medias, como `Configuracoes` e `Fornecedor`, sem ficarem apertadas.
+
+Quando houver labels longas, use `tabWidth` e `truncateLabels` para manter abas
+uniformes e aplicar ellipsis no texto que exceder o limite.
+
+```tsx
+import { TabsUnderlined } from '@wellingtonhlc/shared-ui';
+
+<TabsUnderlined
+  items={items}
+  tabWidth="12rem"
+  truncateLabels
+/>;
+```
+
+Quando a largura puder variar dentro de uma faixa, use `tabMinWidth` e `tabMaxWidth`.
+`truncateLabels` nao altera o comportamento sozinho; defina tambem `tabWidth` ou
+`tabMaxWidth` para que o navegador saiba quando abreviar o texto.
+
 ## ThemePreferencesSelector
 
 `ThemePreferencesSelector` centraliza a escolha de cor e aparencia (`system`, `light`, `dark`) usada pelos consumidores.

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/EmptyState.js

@@ -8,7 +8,7 @@ export function EmptyState({ title = 'Nada por aqui.', description, icon = _jsx(
             className: cn('h-10 w-10 text-foreground-muted', icon.props.className),
         })
         : icon;
-    return (_jsx("div", { className: cn('flex min-h-0 w-full items-center justify-center rounded-md border border-dashed bg-surface text-center text-foreground-muted', isCompact ? 'px-4 py-6' : 'h-full flex-1 px-5 py-10', withMargin && 'm-2', className), children: _jsxs("div", { className: cn('mx-auto grid justify-items-center', isCompact ? 'max-w-xs gap-1.5' : 'max-w-sm gap-2'), children: [showIcon && styledIcon ? (_jsx("div", { className: "text-foreground-muted mb-1 flex h-11 w-11 items-center justify-center", children: styledIcon })) : null, _jsx("strong", { className: "text-foreground text-sm font-semibold", children: title }), description ? _jsx("p", { className: "text-foreground-muted text-xs leading-5", children: description }) : null, children ? _jsx("div", { className: cn('mt-2 flex flex-wrap items-center justify-center gap-2', isCompact ? 'text-xs' : 'text-sm'), children: children }) : null] }) }));
+    return (_jsx("div", { className: cn('flex min-h-0 w-full items-center justify-center rounded-md border border-dashed border-[color-mix(in_srgb,var(--foreground-muted)_24%,transparent)] bg-surface text-center text-foreground-muted', isCompact ? 'px-4 py-6' : 'h-full flex-1 px-5 py-10', withMargin && 'm-2', className), children: _jsxs("div", { className: cn('mx-auto grid justify-items-center', isCompact ? 'max-w-xs gap-1.5' : 'max-w-sm gap-2'), children: [showIcon && styledIcon ? (_jsx("div", { className: "text-foreground-muted mb-1 flex h-11 w-11 items-center justify-center", children: styledIcon })) : null, _jsx("strong", { className: "text-foreground text-sm font-semibold", children: title }), description ? _jsx("p", { className: "text-foreground-muted text-xs leading-5", children: description }) : null, children ? _jsx("div", { className: cn('mt-2 flex flex-wrap items-center justify-center gap-2', isCompact ? 'text-xs' : 'text-sm'), children: children }) : null] }) }));
 }
 function DefaultEmptyIcon() {
     return (_jsx("svg", { "aria-hidden": "true", className: "h-10 w-10", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "1.8", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 8.75 6.2 5.4A2 2 0 0 1 7.82 4.6h8.36a2 2 0 0 1 1.62.8l2.45 3.35M3.75 8.75v6.9A3.75 3.75 0 0 0 7.5 19.4h9a3.75 3.75 0 0 0 3.75-3.75v-6.9M3.75 8.75h4.92a1.5 1.5 0 0 1 1.34.83l.28.56a1.5 1.5 0 0 0 1.34.83h.74a1.5 1.5 0 0 0 1.34-.83l.28-.56a1.5 1.5 0 0 1 1.34-.83h4.92" }) }));

package/dist/components/TabsUnderlined.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 export interface UnderlinedTabItem {
     id: string;
     label: string;
@@ -14,6 +14,10 @@ export interface TabsUnderlinedProps {
     listClassName?: string;
     triggerClassName?: string;
     contentClassName?: string;
+    tabWidth?: CSSProperties['width'];
+    tabMinWidth?: CSSProperties['minWidth'];
+    tabMaxWidth?: CSSProperties['maxWidth'];
+    truncateLabels?: boolean;
 }
-export declare function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, triggerClassName, value, }: TabsUnderlinedProps): import("react").JSX.Element;
+export declare function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, tabMaxWidth, tabMinWidth, tabWidth, triggerClassName, truncateLabels, value, }: TabsUnderlinedProps): import("react").JSX.Element;
 //# sourceMappingURL=TabsUnderlined.d.ts.map

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,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1D,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;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,KAAK,GACN,EAAE,mBAAmB,+BAmDrB"}
+{"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

@@ -2,7 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
 import { cn } from '../utils/cn';
-export function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, triggerClassName, value, }) {
+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)
         ? defaultValue
@@ -13,8 +17,13 @@ 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, 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, }) {
-    return (_jsx(Tabs.Trigger, { value: value, 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 border border-t-0 border-transparent bg-[color-mix(in_srgb,var(--foreground-muted)_7%,var(--surface))] px-3 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: children }));
+function TabTrigger({ children, className, value, maxWidth, minWidth, width, truncate, }) {
+    const style = {
+        maxWidth,
+        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-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);
@@ -1192,6 +1196,9 @@ h2.react-datepicker__current-month {
   .h-56 {
     height: calc(var(--spacing) * 56);
   }
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
   .h-72 {
     height: calc(var(--spacing) * 72);
   }
@@ -1372,6 +1379,9 @@ h2.react-datepicker__current-month {
   .w-\[42rem\] {
     width: 42rem;
   }
+  .w-\[44rem\] {
+    width: 44rem;
+  }
   .w-\[46rem\] {
     width: 46rem;
   }
@@ -1543,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);
@@ -1891,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)) {
@@ -1915,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\)_7\%\,var\(--surface\)\)\] {
+  .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) 7%,var(--surface));
+      background-color: color-mix(in srgb,var(--foreground-muted) 5%,var(--background-secondary));
+    }
+  }
+  .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) 5%,var(--surface));
     }
   }
   .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,var\(--surface\)\)\] {
@@ -2733,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));
@@ -2802,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);
@@ -2893,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) {
@@ -3034,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));
         }
       }
     }
@@ -3129,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) {
@@ -3338,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);
@@ -3376,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);
@@ -3581,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.3",
+    "version": "0.25.6",
     "private": false,
     "type": "module",
     "main": "./dist/index.js",