@wellingtonhlc/shared-ui 0.25.4 → 0.25.7

package/README.md

@@ -205,6 +205,40 @@ para declarar o formato esperado pelo campo:
 
 `enableTime` permanece suportado como alias legado para `mode="dateTime"`.
 
+## FieldGroup
+
+`FieldGroup` renderiza um grupo visual de campos com legenda. A borda vem ativa por
+padrao; use `bordered={false}` quando o consumidor precisar manter a semantica de
+grupo sem adicionar contorno visual.
+
+```tsx
+import { FieldGroup, TextField } from '@wellingtonhlc/shared-ui';
+
+<FieldGroup title="Endereco" bordered={false}>
+  <TextField label="CEP" />
+  <TextField label="Cidade" />
+</FieldGroup>;
+```
+
+## RadioGroup
+
+`RadioGroup` segue a mesma escala de altura dos campos base (`xs`, `sm`, `md`,
+`lg`) para alinhar visualmente com `TextField`, `SelectField` e demais controles
+na mesma linha de formulario.
+
+O padrao `boxed` renderiza um `fieldset` com legenda, fazendo a borda contornar
+o grupo a partir da label. Use `variant="plain"` quando precisar do grupo sem
+borda.
+
+```tsx
+import { RadioGroup } from '@wellingtonhlc/shared-ui';
+
+<RadioGroup label="Tipo Pessoa" value={1} onChange={setType}>
+  <RadioGroup.Item value={1} label="Fisica" />
+  <RadioGroup.Item value={2} label="Juridica" />
+</RadioGroup>;
+```
+
 ## AppShell.Topbar.Button
 
 Use `AppShell.Topbar.Button` para acoes de icone na barra superior, como notificacoes,

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

@@ -12,7 +12,7 @@ export const FieldControl = ({ label, id, wrapperClassName, labelClassName = '',
     const roundedClass = roundedFull ? 'fc-rounded-full' : '';
     const isHorizontal = labelPosition === 'left' || labelPosition === 'right';
     const labelSizeClassMap = {
-        xs: 'text-[10px] mb-0.5',
+        xs: 'text-[10px]',
         sm: 'text-xs',
         md: 'text-sm',
         lg: 'text-base',

package/dist/components/FieldGroup.d.ts

@@ -3,8 +3,9 @@ export interface FieldGroupProps {
     title: string;
     children: ReactNode;
     className?: string;
+    bordered?: boolean;
     titleAlign?: 'left' | 'center' | 'right';
 }
-export declare function FieldGroup({ children, className, title, titleAlign }: FieldGroupProps): import("react").JSX.Element;
+export declare function FieldGroup({ bordered, children, className, title, titleAlign }: FieldGroupProps): import("react").JSX.Element;
 export declare const FormSection: typeof FieldGroup;
 //# sourceMappingURL=FieldGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../src/components/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC1C;AAQD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,UAAmB,EAAE,EAAE,eAAe,+BAS9F;AAED,eAAO,MAAM,WAAW,mBAAa,CAAC"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../src/components/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC1C;AAQD,wBAAgB,UAAU,CAAC,EAAE,QAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,UAAmB,EAAE,EAAE,eAAe,+BAS/G;AAED,eAAO,MAAM,WAAW,mBAAa,CAAC"}

package/dist/components/FieldGroup.js

@@ -5,7 +5,7 @@ const titleAlignClass = {
     center: 'mx-auto',
     right: 'ml-auto',
 };
-export function FieldGroup({ children, className, title, titleAlign = 'left' }) {
-    return (_jsxs("fieldset", { className: cn('border-app-border rounded-xl border px-4 pb-4 pt-2', className), children: [_jsx("legend", { className: cn('text-foreground-muted px-2 text-xs font-medium', titleAlignClass[titleAlign]), children: title }), children] }));
+export function FieldGroup({ bordered = true, children, className, title, titleAlign = 'left' }) {
+    return (_jsxs("fieldset", { className: cn('rounded-xl px-4 pb-4 pt-2', bordered && 'border-app-border border', className), children: [_jsx("legend", { className: cn('text-foreground-muted px-2 text-xs font-medium', titleAlignClass[titleAlign]), children: title }), children] }));
 }
 export const FormSection = FieldGroup;

package/dist/components/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type FieldValues } from 'react-hook-form';
-import type { FormControlSize } from './form-control-helpers';
+import { type FormControlSize } from './form-control-helpers';
 export interface RadioGroupProps<TFieldValues extends FieldValues = FieldValues> {
     value?: string | number | null;
     onChange?: (value: string | number) => void;
@@ -12,6 +12,7 @@ export interface RadioGroupProps<TFieldValues extends FieldValues = FieldValues>
     disabled?: boolean;
     size?: FormControlSize;
     direction?: 'row' | 'column';
+    variant?: 'plain' | 'boxed';
     children?: React.ReactNode;
     control?: unknown;
     rules?: unknown;

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,WAAW,EAGjB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAe9D,MAAM,WAAW,eAAe,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0DD,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,mBAAmB,qBA6BrF;AAaD,iBAAS,cAAc,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EAAE,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC,qBAM3G;AAED,eAAO,MAAM,UAAU;;CAA0C,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,WAAW,EAGjB,MAAM,iBAAiB,CAAC;AAKzB,OAAO,EAAgB,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAe5E,MAAM,WAAW,eAAe,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2JD,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,mBAAmB,qBA6BrF;AAaD,iBAAS,cAAc,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EAAE,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC,qBAM3G;AAED,eAAO,MAAM,UAAU;;CAA0C,CAAC"}

package/dist/components/RadioGroup.js

@@ -3,6 +3,8 @@ import React from 'react';
 import { useController, } from 'react-hook-form';
 import { cn } from '../utils/cn';
 import { FieldControl } from './FieldControl';
+import { FieldValidationError } from './FieldValidationError';
+import { fieldWrapper } from './form-control-helpers';
 const RadioGroupContext = React.createContext({
     size: 'sm',
     onChange: () => { },
@@ -13,15 +15,48 @@ const sizeStyles = {
     md: { outer: 'h-5 w-5', dot: 'h-2.5 w-2.5', text: 'text-sm' },
     lg: { outer: 'h-6 w-6', dot: 'h-3 w-3', text: 'text-base' },
 };
-function RadioGroupBase({ children, direction = 'row', disabled = false, errorMessage, inputDisabled, inputName, inputOnBlur, inputValue, label, labelClassName = '', name, onChange, onValueChange, size = 'sm', value, wrapperClassName, }) {
+const groupHeightStyles = {
+    xs: 'h-7',
+    sm: 'h-9',
+    md: 'h-12',
+    lg: 'h-14',
+};
+const groupMinHeightStyles = {
+    xs: 'min-h-7',
+    sm: 'min-h-9',
+    md: 'min-h-12',
+    lg: 'min-h-14',
+};
+const groupPaddingStyles = {
+    xs: 'px-2',
+    sm: 'px-3',
+    md: 'px-4',
+    lg: 'px-6',
+};
+const boxedFieldsetHeightStyles = {
+    xs: 'min-h-12',
+    sm: 'min-h-14',
+    md: 'min-h-[4.25rem]',
+    lg: 'min-h-[4.75rem]',
+};
+function RadioGroupBase({ children, direction = 'row', disabled = false, errorMessage, inputDisabled, inputName, inputOnBlur, inputValue, label, labelClassName = '', name, onChange, onValueChange, size = 'sm', value, variant = 'boxed', wrapperClassName, }) {
+    const generatedId = React.useId().replace(/:/g, '');
     const resolvedValue = inputValue ?? value;
     const resolvedName = inputName ?? name;
     const resolvedDisabled = inputDisabled ?? disabled;
+    const legendId = `rg-${generatedId}-legend`;
+    const errorId = `rg-${generatedId}-error`;
+    const describedBy = errorMessage ? errorId : undefined;
     function handleChange(nextValue) {
         onValueChange?.(nextValue);
         onChange?.(nextValue);
     }
-    return (_jsx(RadioGroupContext.Provider, { value: { name: resolvedName, value: resolvedValue, disabled: resolvedDisabled, size, onChange: handleChange }, children: _jsx(FieldControl, { label: label, wrapperClassName: wrapperClassName, labelClassName: labelClassName, errorMessage: errorMessage, size: size, disabled: resolvedDisabled, children: () => (_jsx("div", { role: "radiogroup", "aria-label": label, onBlur: inputOnBlur, className: cn('flex gap-3', direction === 'column' ? 'flex-col' : 'flex-row flex-wrap'), children: children })) }) }));
+    const groupClassName = cn('flex gap-3', direction === 'column' ? groupMinHeightStyles[size] : groupHeightStyles[size], direction === 'column' ? 'flex-col items-start justify-center' : 'flex-row flex-wrap items-center');
+    const boxedGroupClassName = cn(groupClassName, direction === 'row' && 'justify-around', groupPaddingStyles[size]);
+    if (variant === 'plain') {
+        return (_jsx(RadioGroupContext.Provider, { value: { name: resolvedName, value: resolvedValue, disabled: resolvedDisabled, size, onChange: handleChange }, children: _jsx(FieldControl, { label: label, wrapperClassName: wrapperClassName, labelClassName: labelClassName, errorMessage: errorMessage, size: size, disabled: resolvedDisabled, children: () => (_jsx("div", { role: "radiogroup", "aria-label": label, "aria-describedby": describedBy, onBlur: inputOnBlur, className: groupClassName, children: children })) }) }));
+    }
+    return (_jsx(RadioGroupContext.Provider, { value: { name: resolvedName, value: resolvedValue, disabled: resolvedDisabled, size, onChange: handleChange }, children: _jsxs("div", { className: cn(fieldWrapper, wrapperClassName), "data-disabled": resolvedDisabled || undefined, "data-invalid": !!errorMessage || undefined, children: [_jsxs("fieldset", { className: cn('border-app-border flex h-full flex-1 flex-col justify-center rounded-xl border px-3 pb-2 pt-0 transition-[background-color,border-color,box-shadow,color] duration-200', boxedFieldsetHeightStyles[size], resolvedDisabled && 'cursor-not-allowed opacity-60', errorMessage && 'border-red-500 dark:border-red-400'), children: [label ? (_jsx("legend", { id: legendId, className: cn('text-foreground-muted px-2 text-xs font-medium transition-colors', resolvedDisabled && 'cursor-not-allowed opacity-70', errorMessage && 'text-red-600 dark:text-red-400', labelClassName), children: label })) : null, _jsx("div", { role: "radiogroup", "aria-label": label ? undefined : resolvedName, "aria-labelledby": label ? legendId : undefined, "aria-describedby": describedBy, onBlur: inputOnBlur, className: boxedGroupClassName, children: children })] }), _jsx(FieldValidationError, { id: errorId, message: errorMessage })] }) }));
 }
 function Item({ className, disabled: itemDisabled, label, value }) {
     const { value: groupValue, disabled: groupDisabled, size, onChange } = React.useContext(RadioGroupContext);

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/components/form-control-helpers.d.ts

@@ -1,5 +1,5 @@
 export declare const fieldWrapper = "flex w-full flex-col space-y-1";
-export declare const labelBase = "mb-1 text-md font-medium";
+export declare const labelBase = "text-md font-medium";
 export type FormControlVariant = 'default' | 'filled' | 'ghost' | 'neutral';
 interface ControlClassOptions {
     errorMessage?: string;

package/dist/components/form-control-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-control-helpers.d.ts","sourceRoot":"","sources":["../../src/components/form-control-helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,mCAAmC,CAAC;AAE7D,eAAO,MAAM,SAAS,6BAA6B,CAAC;AAEpD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAgC5E,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;AAClG,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,MAAM,CAAC"}
+{"version":3,"file":"form-control-helpers.d.ts","sourceRoot":"","sources":["../../src/components/form-control-helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,mCAAmC,CAAC;AAE7D,eAAO,MAAM,SAAS,wBAAwB,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAgC5E,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;AAClG,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,MAAM,CAAC"}

package/dist/components/form-control-helpers.js

@@ -1,6 +1,6 @@
 import { cn } from '../utils/cn';
 export const fieldWrapper = 'flex w-full flex-col space-y-1';
-export const labelBase = 'mb-1 text-md font-medium';
+export const labelBase = 'text-md font-medium';
 const controlShared = cn('text-foreground placeholder:text-foreground-muted w-full rounded-md px-3 py-2 font-medium border', 'transition-[background-color,border-color,box-shadow,color] duration-200', 'disabled:cursor-not-allowed disabled:opacity-60');
 const controlDefault = cn(controlShared, 'bg-surface border-app-border', 'enabled:hover:border-brand', 'focus:outline-none focus:bg-surface focus:border-brand focus:ring-2 focus:ring-inset focus:ring-brand/35', 'disabled:bg-input-bg disabled:border-app-border');
 const controlFilled = cn(controlShared, 'bg-input-bg border-app-border', 'enabled:hover:border-brand enabled:hover:bg-[color-mix(in_srgb,var(--input-bg)_75%,var(--surface))]', 'focus:outline-none focus:bg-surface focus:border-brand focus:ring-2 focus:ring-inset focus:ring-brand/35', 'disabled:bg-input-bg disabled:border-app-border');

package/dist/styles.css

@@ -956,6 +956,9 @@ h2.react-datepicker__current-month {
   .order-3 {
     order: 3;
   }
+  .col-span-4 {
+    grid-column: span 4 / span 4;
+  }
   .col-span-12 {
     grid-column: span 12 / span 12;
   }
@@ -1019,9 +1022,6 @@ h2.react-datepicker__current-month {
   .mb-0 {
     margin-bottom: calc(var(--spacing) * 0);
   }
-  .mb-0\.5 {
-    margin-bottom: calc(var(--spacing) * 0.5);
-  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -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);
@@ -1285,6 +1289,12 @@ h2.react-datepicker__current-month {
   .min-h-\[2rem\] {
     min-height: 2rem;
   }
+  .min-h-\[4\.25rem\] {
+    min-height: 4.25rem;
+  }
+  .min-h-\[4\.75rem\] {
+    min-height: 4.75rem;
+  }
   .min-h-\[10rem\] {
     min-height: 10rem;
   }
@@ -1549,6 +1559,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);
@@ -1583,6 +1597,9 @@ h2.react-datepicker__current-month {
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
   .grid-cols-\[8rem_minmax\(0\,1fr\)\] {
     grid-template-columns: 8rem minmax(0,1fr);
   }
@@ -1634,6 +1651,9 @@ h2.react-datepicker__current-month {
   .items-stretch {
     align-items: stretch;
   }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -1897,6 +1917,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 +1947,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\)\)\] {
@@ -2161,6 +2193,9 @@ h2.react-datepicker__current-month {
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2739,6 +2774,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 +2848,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 +2951,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 +3082,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 +3177,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 +3376,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 +3406,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 +3603,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 {
@@ -3838,6 +3854,11 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .dark\:border-red-400 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-red-400);
+    }
+  }
   .dark\:\!bg-\[rgb\(var\(--color-brand\)\/0\.13\)\] {
     @media (prefers-color-scheme: dark) {
       background-color: rgb(var(--color-brand)/0.13) !important;

package/package.json

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