@pagamio/frontend-commons-lib 0.8.333 → 0.8.335

package/lib/api/swr.d.ts

@@ -42,5 +42,5 @@ export declare function useApiSWRWithMutation<ResponseData>(endpoint: Key, confi
     data: ResponseData | undefined;
     error: ApiErrorResponse | undefined;
     isValidating: boolean;
-    isLoading: import("swr/dist/_internal").IsLoadingResponse<Data, Config>;
+    isLoading: import("swr/_internal").IsLoadingResponse<Data, Config>;
 };

package/lib/components/ui/Label.d.ts

@@ -1,5 +1,5 @@
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
 export default Label;

package/lib/components/ui/PagamioSearchableCombobox.d.ts

@@ -16,6 +16,8 @@ export interface PagamioSearchableComboboxProps<T extends {
     selectedOption?: T | null;
     /** Trigger placeholder when nothing is selected. */
     placeholder?: string;
+    /** Search-input placeholder inside the dropdown. */
+    searchPlaceholder?: string;
     /** Shown in dropdown when no results match. */
     emptyMessage?: string;
     /** Shown at the bottom of the list when the server returned a full page. */
@@ -25,8 +27,6 @@ export interface PagamioSearchableComboboxProps<T extends {
     disabled?: boolean;
     required?: boolean;
     name?: string;
-    /** Allow clearing the selected value via an inline ✕. Default true. */
-    clearable?: boolean;
     /** How to render an option as a string label. Default: `o.name` (must exist). */
     getLabel?: (option: T) => string;
     /** Optional custom row renderer inside the dropdown. */
@@ -39,4 +39,4 @@ export interface PagamioSearchableComboboxProps<T extends {
 }
 export declare function PagamioSearchableCombobox<T extends {
     id: string;
-}>({ combobox, value, onChange, selectedOption, placeholder, emptyMessage, cappedMessage, loadingMessage, disabled, required, name, clearable, getLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }: PagamioSearchableComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ combobox, value, onChange, selectedOption, placeholder, searchPlaceholder, emptyMessage, cappedMessage, loadingMessage, disabled, required, name, getLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }: PagamioSearchableComboboxProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/components/ui/PagamioSearchableCombobox.js

@@ -2,24 +2,34 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /**
  * PagamioSearchableCombobox — server-driven, debounced, single-select combobox.
  *
- * Built on top of the existing Command (cmdk) primitive + Popover.
+ * Visual contract: matches the look & feel of `Select` + `SelectContent` with
+ * the embedded search input (the "Authentication Method" picker in the
+ * employees form is the reference). Trigger styling, dropdown shadow/border,
+ * and selected-item highlight all mirror `Select`.
+ *
  * State is owned by `usePagamioCombobox` (created by the caller).
  *
  * See .agent/conventions/lookup-endpoints.md (backend) for the contract.
  */
-import { CheckIcon, ChevronDownIcon, Cross2Icon } from '@radix-ui/react-icons';
+import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
 import * as React from 'react';
 import { cn } from '../../helpers';
-import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from './Command';
 import { Popover, PopoverContent, PopoverTrigger } from './Popover';
 function defaultGetLabel(option) {
-    // Assumes `name` exists. Override via `getLabel` for resources that use
-    // a different display field.
     const o = option;
     return o.name ?? option.id;
 }
-export function PagamioSearchableCombobox({ combobox, value, onChange, selectedOption, placeholder = 'Select…', emptyMessage = 'No results.', cappedMessage = 'Showing top results — refine your search.', loadingMessage = 'Loading…', disabled, required, name, clearable = true, getLabel = defaultGetLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }) {
+export function PagamioSearchableCombobox({ combobox, value, onChange, selectedOption, placeholder = 'Select…', searchPlaceholder = 'Search...', emptyMessage = 'No options found', cappedMessage = 'Showing top results — refine your search.', loadingMessage = 'Loading…', disabled, required, name, getLabel = defaultGetLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }) {
     const [open, setOpen] = React.useState(false);
+    const inputRef = React.useRef(null);
+    // Focus the search input when the popover opens — matches the Select's
+    // built-in behavior where the search field is immediately ready.
+    React.useEffect(() => {
+        if (open) {
+            const id = window.setTimeout(() => inputRef.current?.focus(), 0);
+            return () => window.clearTimeout(id);
+        }
+    }, [open]);
     // Resolve the option object for the current value: caller-supplied wins,
     // then the hook's options (top-N), then restored.
     const resolvedSelected = React.useMemo(() => {
@@ -33,16 +43,20 @@ export function PagamioSearchableCombobox({ combobox, value, onChange, selectedO
         onChange(id === value ? null : id);
         setOpen(false);
     };
-    const handleClear = (e) => {
-        e.stopPropagation();
-        onChange(null);
-    };
-    return (_jsxs("div", { className: cn('w-full', className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-required": required, disabled: disabled, name: name, className: cn('flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-background text-foreground px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground', 'focus:outline-none focus:ring-1 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50', triggerClassName), children: [_jsx("span", { className: cn('line-clamp-1 text-left flex-1', !resolvedSelected && 'text-muted-foreground'), children: resolvedSelected
+    return (_jsxs("div", { className: cn('w-full', className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-required": required, disabled: disabled, name: name, className: cn(
+                            // Mirrors SelectTrigger styling exactly.
+                            'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-background text-foreground px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground', 'focus:outline-none focus:ring-1 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50', '[&>span]:line-clamp-1', triggerClassName), children: [_jsx("span", { className: cn('line-clamp-1 text-left flex-1', !resolvedSelected && 'text-muted-foreground'), children: resolvedSelected
                                         ? renderSelected
                                             ? renderSelected(resolvedSelected)
                                             : getLabel(resolvedSelected)
-                                        : placeholder }), clearable && resolvedSelected && !disabled ? (_jsx("span", { role: "button", tabIndex: -1, "aria-label": "Clear selection", onClick: handleClear, onMouseDown: (e) => e.preventDefault(), className: "ml-2 inline-flex h-4 w-4 items-center justify-center rounded-sm opacity-60 hover:opacity-100", children: _jsx(Cross2Icon, { className: "h-3 w-3" }) })) : (_jsx(ChevronDownIcon, { className: "ml-2 h-4 w-4 opacity-50 shrink-0" }))] }) }), _jsx(PopoverContent, { align: "start", sideOffset: 4, className: cn('p-0 w-[var(--radix-popover-trigger-width)] min-w-[240px]', contentClassName), children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: placeholder, value: combobox.search, onValueChange: combobox.setSearch }), _jsx(CommandList, { children: combobox.isLoading && combobox.options.length === 0 ? (_jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: loadingMessage })) : combobox.error ? (_jsx("div", { className: "py-6 text-center text-sm text-destructive", children: combobox.error.message || 'Failed to load options.' })) : combobox.options.length === 0 ? (_jsx(CommandEmpty, { children: emptyMessage })) : (_jsxs(_Fragment, { children: [combobox.options.map((option) => {
-                                                const isSelected = option.id === value;
-                                                return (_jsx(CommandItem, { value: option.id, onSelect: () => handleSelect(option.id), children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 line-clamp-1", children: getLabel(option) }), isSelected ? _jsx(CheckIcon, { className: "ml-2 h-4 w-4 opacity-100" }) : null] })) }, option.id));
-                                            }), combobox.isCapped ? (_jsx("div", { className: "border-t px-3 py-2 text-xs text-muted-foreground", children: cappedMessage })) : null] })) })] }) })] }), name ? _jsx("input", { type: "hidden", name: name, value: value ?? '' }) : null] }));
+                                        : placeholder }), _jsx(ChevronDownIcon, { className: "ml-2 h-4 w-4 opacity-50 shrink-0" })] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 4, 
+                        // Mirrors SelectContent: same shadow + animation classes, popover
+                        // background, popover-foreground text. Width matches trigger.
+                        className: cn('p-0 w-[var(--radix-popover-trigger-width)] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md', contentClassName), children: [_jsx("div", { className: "p-2 border-b border-border", children: _jsx("input", { ref: inputRef, type: "text", placeholder: searchPlaceholder, value: combobox.search, onChange: (e) => combobox.setSearch(e.target.value), onKeyDown: (e) => e.stopPropagation(), className: "w-full px-2 py-1 text-sm border border-input rounded bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring" }) }), _jsx("div", { className: "p-1 max-h-[200px] overflow-y-auto", children: combobox.isLoading && combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: loadingMessage })) : combobox.error ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-destructive", children: combobox.error.message || 'Failed to load options.' })) : combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: emptyMessage })) : (_jsxs(_Fragment, { children: [combobox.options.map((option) => {
+                                            const isSelected = option.id === value;
+                                            return (_jsx("button", { type: "button", role: "option", "aria-selected": isSelected, onClick: () => handleSelect(option.id), className: cn(
+                                                // Mirrors SelectItem styling: padding, hover via
+                                                // focus:bg-muted, selected via bg-accent.
+                                                'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none text-left', 'hover:bg-muted focus:bg-muted focus:text-foreground', isSelected && 'bg-accent text-foreground'), children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "line-clamp-1", children: getLabel(option) }), isSelected ? (_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(CheckIcon, { className: "h-4 w-4" }) })) : null] })) }, option.id));
+                                        }), combobox.isCapped ? (_jsx("div", { className: "mt-1 border-t px-2 py-1.5 text-xs text-muted-foreground", children: cappedMessage })) : null] })) })] })] }), name ? _jsx("input", { type: "hidden", name: name, value: value ?? '' }) : null] }));
 }

package/lib/components/ui/PagamioSearchableMultiCombobox.d.ts

@@ -13,6 +13,7 @@ export interface PagamioSearchableMultiComboboxProps<T extends {
      */
     selectedOptions?: readonly T[];
     placeholder?: string;
+    searchPlaceholder?: string;
     emptyMessage?: string;
     cappedMessage?: string;
     loadingMessage?: string;
@@ -28,4 +29,4 @@ export interface PagamioSearchableMultiComboboxProps<T extends {
 }
 export declare function PagamioSearchableMultiCombobox<T extends {
     id: string;
-}>({ combobox, value, onChange, selectedOptions, placeholder, emptyMessage, cappedMessage, loadingMessage, disabled, required, name, getLabel, renderOption, renderChip, className, triggerClassName, contentClassName, }: PagamioSearchableMultiComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ combobox, value, onChange, selectedOptions, placeholder, searchPlaceholder, emptyMessage, cappedMessage, loadingMessage, disabled, required, name, getLabel, renderOption, renderChip, className, triggerClassName, contentClassName, }: PagamioSearchableMultiComboboxProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/components/ui/PagamioSearchableMultiCombobox.js

@@ -2,6 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /**
  * PagamioSearchableMultiCombobox — server-driven, debounced, multi-select combobox.
  *
+ * Visual contract: matches the look & feel of `Select` + `SelectContent`
+ * (the "Authentication Method" reference). Trigger styling is identical
+ * except for chip rendering. Dropdown shadow/border, embedded search,
+ * and item highlight all mirror `Select` / `PagamioSearchableCombobox`.
+ *
  * Sibling of PagamioSearchableCombobox. Differences:
  *   - `value` is `string[]`, `onChange` toggles ids.
  *   - The trigger shows chips for each selected option (resolved via the
@@ -13,14 +18,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronDownIcon, Cross2Icon } from '@radix-ui/react-icons';
 import * as React from 'react';
 import { cn } from '../../helpers';
-import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from './Command';
 import { Popover, PopoverContent, PopoverTrigger } from './Popover';
 function defaultGetLabel(option) {
     const o = option;
     return o.name ?? option.id;
 }
-export function PagamioSearchableMultiCombobox({ combobox, value, onChange, selectedOptions, placeholder = 'Select…', emptyMessage = 'No results.', cappedMessage = 'Showing top results — refine your search.', loadingMessage = 'Loading…', disabled, required, name, getLabel = defaultGetLabel, renderOption, renderChip, className, triggerClassName, contentClassName, }) {
+export function PagamioSearchableMultiCombobox({ combobox, value, onChange, selectedOptions, placeholder = 'Select…', searchPlaceholder = 'Search...', emptyMessage = 'No options found', cappedMessage = 'Showing top results — refine your search.', loadingMessage = 'Loading…', disabled, required, name, getLabel = defaultGetLabel, renderOption, renderChip, className, triggerClassName, contentClassName, }) {
     const [open, setOpen] = React.useState(false);
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        if (open) {
+            const id = window.setTimeout(() => inputRef.current?.focus(), 0);
+            return () => window.clearTimeout(id);
+        }
+    }, [open]);
     // Resolve labels for currently-selected ids. Caller's `selectedOptions`
     // wins; otherwise look in the hook's options + restoredOptions.
     const selectedById = React.useMemo(() => {
@@ -35,25 +46,23 @@ export function PagamioSearchableMultiCombobox({ combobox, value, onChange, sele
         return map;
     }, [selectedOptions, combobox.options, combobox.restoredOptions]);
     const chips = React.useMemo(() => value.map((id) => selectedById.get(id)).filter((o) => o !== undefined), [value, selectedById]);
-    // Ids in `value` that we couldn't resolve to a label — render as raw id.
     const unresolvedIds = React.useMemo(() => value.filter((id) => !selectedById.has(id)), [value, selectedById]);
     const toggle = (id) => {
         onChange(value.includes(id) ? value.filter((v) => v !== id) : [...value, id]);
     };
     const remove = (id) => onChange(value.filter((v) => v !== id));
-    const clearAll = (e) => {
-        e.stopPropagation();
-        onChange([]);
-    };
     const hasSelection = value.length > 0;
-    return (_jsxs("div", { className: cn('w-full', className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-required": required, disabled: disabled, className: cn('flex min-h-9 w-full items-center justify-between whitespace-normal rounded-md border bg-background text-foreground px-2 py-1 text-sm shadow-sm ring-offset-background', 'focus:outline-none focus:ring-1 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50', triggerClassName), children: [_jsx("div", { className: "flex flex-wrap gap-1 items-center flex-1 min-w-0", children: hasSelection ? (_jsxs(_Fragment, { children: [chips.map((option) => renderChip ? (_jsx(React.Fragment, { children: renderChip(option, () => remove(option.id)) }, option.id)) : (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-sm bg-muted px-1.5 py-0.5 text-xs text-foreground", children: [_jsx("span", { className: "line-clamp-1 max-w-[160px]", children: getLabel(option) }), _jsx("span", { role: "button", tabIndex: -1, "aria-label": `Remove ${getLabel(option)}`, onClick: (e) => {
+    return (_jsxs("div", { className: cn('w-full', className), children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-required": required, disabled: disabled, className: cn(
+                            // Mirrors SelectTrigger styling. Slightly taller min-height so
+                            // chips fit comfortably.
+                            'flex min-h-9 w-full items-center justify-between rounded-md border bg-background text-foreground px-3 py-1.5 text-sm shadow-sm ring-offset-background', 'focus:outline-none focus:ring-1 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50', triggerClassName), children: [_jsx("div", { className: "flex flex-wrap gap-1 items-center flex-1 min-w-0", children: hasSelection ? (_jsxs(_Fragment, { children: [chips.map((option) => renderChip ? (_jsx(React.Fragment, { children: renderChip(option, () => remove(option.id)) }, option.id)) : (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-sm bg-muted px-1.5 py-0.5 text-xs text-foreground", children: [_jsx("span", { className: "line-clamp-1 max-w-[160px]", children: getLabel(option) }), _jsx("span", { role: "button", tabIndex: -1, "aria-label": `Remove ${getLabel(option)}`, onClick: (e) => {
                                                             e.stopPropagation();
                                                             remove(option.id);
                                                         }, onMouseDown: (e) => e.preventDefault(), className: "inline-flex h-3 w-3 items-center justify-center opacity-60 hover:opacity-100", children: _jsx(Cross2Icon, { className: "h-3 w-3" }) })] }, option.id))), unresolvedIds.map((id) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-sm bg-muted px-1.5 py-0.5 text-xs text-muted-foreground italic", children: [_jsx("span", { className: "line-clamp-1 max-w-[140px]", children: id }), _jsx("span", { role: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
                                                             e.stopPropagation();
                                                             remove(id);
-                                                        }, onMouseDown: (e) => e.preventDefault(), className: "inline-flex h-3 w-3 items-center justify-center opacity-60 hover:opacity-100", children: _jsx(Cross2Icon, { className: "h-3 w-3" }) })] }, id)))] })) : (_jsx("span", { className: "text-muted-foreground px-1", children: placeholder })) }), _jsxs("div", { className: "flex items-center", children: [hasSelection && !disabled ? (_jsx("span", { role: "button", tabIndex: -1, "aria-label": "Clear all", onClick: clearAll, onMouseDown: (e) => e.preventDefault(), className: "ml-2 inline-flex h-4 w-4 items-center justify-center rounded-sm opacity-60 hover:opacity-100", children: _jsx(Cross2Icon, { className: "h-3 w-3" }) })) : null, _jsx(ChevronDownIcon, { className: "ml-2 h-4 w-4 opacity-50 shrink-0" })] })] }) }), _jsx(PopoverContent, { align: "start", sideOffset: 4, className: cn('p-0 w-[var(--radix-popover-trigger-width)] min-w-[240px]', contentClassName), children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: placeholder, value: combobox.search, onValueChange: combobox.setSearch }), _jsx(CommandList, { children: combobox.isLoading && combobox.options.length === 0 ? (_jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: loadingMessage })) : combobox.error ? (_jsx("div", { className: "py-6 text-center text-sm text-destructive", children: combobox.error.message || 'Failed to load options.' })) : combobox.options.length === 0 ? (_jsx(CommandEmpty, { children: emptyMessage })) : (_jsxs(_Fragment, { children: [combobox.options.map((option) => {
-                                                const isSelected = value.includes(option.id);
-                                                return (_jsx(CommandItem, { value: option.id, onSelect: () => toggle(option.id), children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('mr-2 inline-flex h-4 w-4 items-center justify-center rounded-sm border', isSelected ? 'bg-primary text-primary-foreground border-primary' : 'border-input'), children: isSelected ? '✓' : null }), _jsx("span", { className: "flex-1 line-clamp-1", children: getLabel(option) })] })) }, option.id));
-                                            }), combobox.isCapped ? (_jsx("div", { className: "border-t px-3 py-2 text-xs text-muted-foreground", children: cappedMessage })) : null] })) })] }) })] }), name ? value.map((id) => _jsx("input", { type: "hidden", name: name, value: id }, id)) : null] }));
+                                                        }, onMouseDown: (e) => e.preventDefault(), className: "inline-flex h-3 w-3 items-center justify-center opacity-60 hover:opacity-100", children: _jsx(Cross2Icon, { className: "h-3 w-3" }) })] }, id)))] })) : (_jsx("span", { className: "text-muted-foreground", children: placeholder })) }), _jsx(ChevronDownIcon, { className: "ml-2 h-4 w-4 opacity-50 shrink-0" })] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 4, className: cn('p-0 w-[var(--radix-popover-trigger-width)] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md', contentClassName), children: [_jsx("div", { className: "p-2 border-b border-border", children: _jsx("input", { ref: inputRef, type: "text", placeholder: searchPlaceholder, value: combobox.search, onChange: (e) => combobox.setSearch(e.target.value), onKeyDown: (e) => e.stopPropagation(), className: "w-full px-2 py-1 text-sm border border-input rounded bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring" }) }), _jsx("div", { className: "p-1 max-h-[200px] overflow-y-auto", children: combobox.isLoading && combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: loadingMessage })) : combobox.error ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-destructive", children: combobox.error.message || 'Failed to load options.' })) : combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: emptyMessage })) : (_jsxs(_Fragment, { children: [combobox.options.map((option) => {
+                                            const isSelected = value.includes(option.id);
+                                            return (_jsx("button", { type: "button", role: "option", "aria-selected": isSelected, onClick: () => toggle(option.id), className: cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none text-left', 'hover:bg-muted focus:bg-muted focus:text-foreground', isSelected && 'bg-accent text-foreground'), children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('mr-2 inline-flex h-4 w-4 items-center justify-center rounded-sm border', isSelected ? 'bg-primary text-primary-foreground border-primary' : 'border-input'), children: isSelected ? '✓' : null }), _jsx("span", { className: "line-clamp-1", children: getLabel(option) })] })) }, option.id));
+                                        }), combobox.isCapped ? (_jsx("div", { className: "mt-1 border-t px-2 py-1.5 text-xs text-muted-foreground", children: cappedMessage })) : null] })) })] })] }), name ? value.map((id) => _jsx("input", { type: "hidden", name: name, value: id }, id)) : null] }));
 }

package/lib/components/ui/Sheet.d.ts

@@ -9,7 +9,7 @@ declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
     side?: "left" | "right" | "bottom" | "top" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
 declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/ui/StatCard.d.ts

@@ -3,15 +3,15 @@ import * as React from 'react';
 declare const statCardVariants: (props?: ({
     variant?: "green" | "orange" | "teal" | "dark" | "light" | "primary" | "light-orange" | "light-teal" | "light-green" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const iconContainerVariants: (props?: ({
     variant?: "green" | "orange" | "teal" | "dark" | "light" | "primary" | "light-orange" | "light-teal" | "light-green" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const changeIndicatorVariants: (props?: ({
     direction?: "up" | "down" | "neutral" | null | undefined;
     onSolid?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface StatCardChange {
     /** Percentage value (e.g., 22 for 22%) */
     value: number;

package/lib/dashboard-visuals/hooks/useChartData.d.ts

@@ -7,7 +7,7 @@ import type { MetricData } from '../types';
  */
 export declare const useChartData: <T = MetricData[], TransformReturnType = T>(url: string, query: QueryProps, transform?: (data: T) => TransformReturnType) => {
     data: T | TransformReturnType | undefined;
-    error: import("../../api").ApiErrorResponse | undefined;
+    error: import("../..").ApiErrorResponse | undefined;
     loading: boolean;
     isEmpty: boolean;
     refresh: () => Promise<any>;

package/lib/dashboard-visuals/utils/formatUtil.js

@@ -227,6 +227,7 @@ export const formatDate = (date, options) => {
                 day: '2-digit',
                 hour: '2-digit',
                 minute: '2-digit',
+                hour12: false,
                 ...(includeSeconds && { second: '2-digit' }),
             });
         }

package/lib/pagamio-table/data-table/exportUtils.js

@@ -57,6 +57,7 @@ const formatDateValue = (value) => {
             day: 'numeric',
             hour: '2-digit',
             minute: '2-digit',
+            hour12: false,
         });
     }
     // Handle ISO date strings - more comprehensive regex
@@ -72,6 +73,7 @@ const formatDateValue = (value) => {
                     day: 'numeric',
                     hour: '2-digit',
                     minute: '2-digit',
+                    hour12: false,
                 });
             }
         }
@@ -246,6 +248,7 @@ export const exportToCsv = (data, columns, options = {}) => {
             day: 'numeric',
             hour: '2-digit',
             minute: '2-digit',
+            hour12: false,
         })}`;
         csvRows.push(`# ${timestamp}`);
     }
@@ -330,6 +333,7 @@ const createWorksheetData = (title, subtitle, includeTimestamp, headers, formatt
             day: 'numeric',
             hour: '2-digit',
             minute: '2-digit',
+            hour12: false,
         })}`;
         worksheetData.push([timestamp]);
         currentRow++;
@@ -582,6 +586,7 @@ export const exportToPdf = async (data, columns, options = {}) => {
         day: 'numeric',
         hour: '2-digit',
         minute: '2-digit',
+        hour12: false,
     })}`, colors, logo, } = options;
     // Create PDF document with better settings
     const doc = new jsPDF({

package/lib/pagamio-table/data-table/pdfExportUtils.js

@@ -14,6 +14,7 @@ export const createPdfExportOptions = (config, title) => {
             day: 'numeric',
             hour: '2-digit',
             minute: '2-digit',
+            hour12: false,
         })}`,
         colors: {
             primary: config.theme.colors.primary,
@@ -42,6 +43,7 @@ export const createXlsxExportOptions = (config, title, sheetName) => {
             day: 'numeric',
             hour: '2-digit',
             minute: '2-digit',
+            hour12: false,
         })}`,
         colors: {
             primary: config.theme.colors.primary,
@@ -67,6 +69,7 @@ export const createDefaultXlsxExportOptions = (title, sheetName) => {
             day: 'numeric',
             hour: '2-digit',
             minute: '2-digit',
+            hour12: false,
         })}`,
         colors: {
             primary: {

package/lib/styles.css

@@ -1488,9 +1488,6 @@ video {
 .min-w-\[20px\] {
   min-width: 20px;
 }
-.min-w-\[240px\] {
-  min-width: 240px;
-}
 .min-w-\[52px\] {
   min-width: 52px;
 }
@@ -1990,9 +1987,6 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.whitespace-normal {
-  white-space: normal;
-}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2851,10 +2845,6 @@ video {
   padding-left: 0px;
   padding-right: 0px;
 }
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
 .px-1\.5 {
   padding-left: 0.375rem;
   padding-right: 0.375rem;

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.333",
+  "version": "0.8.335",
   "publishConfig": {
     "access": "public",
     "provenance": false
@@ -83,7 +83,7 @@
     "build:watch": "tsc --watch",
     "build": "rm -rf lib && tsc && yarn build:css && yarn copy-locale-files",
     "build:css": "postcss src/index.css -o lib/styles.css",
-    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss}\"",
     "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss}\"",