@wellingtonhlc/shared-ui 0.0.0

package/dist/components/ConfirmationDialog.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { AlertTriangleIcon, HelpCircleIcon, InfoIcon, XIcon } from 'lucide-react';
+import { cn } from '../utils/cn';
+import { Button as BaseButton } from './Button';
+const ConfirmationDialogContext = createContext(null);
+const dialogVariantStyles = {
+    default: {
+        icon: InfoIcon,
+        iconClassName: 'text-brand',
+        titleClassName: 'text-foreground',
+    },
+    question: {
+        icon: HelpCircleIcon,
+        iconClassName: 'text-foreground-muted',
+        titleClassName: 'text-foreground',
+    },
+    destructive: {
+        icon: AlertTriangleIcon,
+        iconClassName: 'text-destructive',
+        titleClassName: 'text-foreground',
+    },
+};
+const buttonVariantDefaults = {
+    cancel: { label: 'Cancelar', buttonVariant: 'outline' },
+    confirm: { label: 'Confirmar', buttonVariant: 'default' },
+    danger: { label: 'Não', buttonVariant: 'outline' },
+    success: { label: 'Sim', buttonVariant: 'default' },
+};
+function useConfirmationDialog() {
+    const context = useContext(ConfirmationDialogContext);
+    if (!context) {
+        throw new Error('ConfirmationDialog components must be used inside ConfirmationDialog.Root.');
+    }
+    return context;
+}
+function Root({ children, className, closeOnEscape = true, onOpenChange, open, overlayClassName, variant = 'default', }) {
+    const titleId = useId();
+    const descriptionId = useId();
+    const [submittingId, setSubmittingId] = useState(null);
+    const [focusedId, setFocusedId] = useState(null);
+    const buttonRefs = useRef({});
+    const buttonOrder = useRef([]);
+    const isBusy = submittingId !== null;
+    function close() {
+        if (!isBusy) {
+            onOpenChange(false);
+        }
+    }
+    function registerButton(id, element) {
+        buttonRefs.current[id] = element;
+        if (element && !buttonOrder.current.includes(id)) {
+            buttonOrder.current.push(id);
+        }
+        if (!element) {
+            buttonOrder.current = buttonOrder.current.filter((buttonId) => buttonId !== id);
+            delete buttonRefs.current[id];
+        }
+    }
+    function focusButton(direction) {
+        const availableButtons = buttonOrder.current
+            .map((id) => buttonRefs.current[id])
+            .filter((button) => !!button && !button.disabled);
+        if (!availableButtons.length)
+            return;
+        const currentIndex = availableButtons.findIndex((button) => button === document.activeElement);
+        const nextIndex = currentIndex === -1
+            ? 0
+            : (currentIndex + direction + availableButtons.length) % availableButtons.length;
+        availableButtons[nextIndex]?.focus();
+    }
+    async function runAction(id, action, submit = false, closeOnSuccess = true) {
+        if (isBusy)
+            return;
+        if (submit) {
+            setSubmittingId(id);
+        }
+        try {
+            await action?.();
+            if (closeOnSuccess) {
+                onOpenChange(false);
+            }
+        }
+        finally {
+            if (submit) {
+                setSubmittingId(null);
+            }
+        }
+    }
+    useEffect(() => {
+        if (!open)
+            return;
+        function handleKeyDown(event) {
+            if (event.key === 'Escape' && closeOnEscape && !isBusy) {
+                event.preventDefault();
+                onOpenChange(false);
+            }
+            if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+                event.preventDefault();
+                focusButton(1);
+            }
+            if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                focusButton(-1);
+            }
+        }
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [closeOnEscape, isBusy, onOpenChange, open]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const timeoutId = window.setTimeout(() => {
+            const firstButton = buttonOrder.current
+                .map((id) => buttonRefs.current[id])
+                .find((button) => !!button && !button.disabled);
+            firstButton?.focus();
+        }, 0);
+        return () => window.clearTimeout(timeoutId);
+    }, [open]);
+    const value = useMemo(() => ({
+        close,
+        descriptionId,
+        focusButton,
+        focusedId,
+        isBusy,
+        registerButton,
+        runAction,
+        setFocusedId,
+        submittingId,
+        titleId,
+        variant,
+    }), [descriptionId, focusedId, isBusy, submittingId, titleId, variant]);
+    if (!open) {
+        return null;
+    }
+    return createPortal(_jsx(ConfirmationDialogContext.Provider, { value: value, children: _jsx("div", { className: cn('fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-[2px]', overlayClassName), role: "presentation", children: _jsxs("section", { "aria-describedby": descriptionId, "aria-labelledby": titleId, "aria-modal": "true", className: cn('border-app-border bg-background-secondary text-foreground relative grid gap-4 rounded-xl border p-6 shadow-2xl', className), role: "alertdialog", style: { width: 'min(29rem, calc(100vw - 2rem))' }, children: [_jsx("button", { "aria-label": "Fechar", className: cn('text-foreground-muted hover:bg-background hover:text-foreground absolute right-4 top-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-md opacity-60 transition disabled:cursor-not-allowed disabled:opacity-30'), disabled: isBusy, onClick: close, type: "button", children: _jsx(XIcon, { className: "size-3.5" }) }), children] }) }) }), document.body);
+}
+function Icon({ className }) {
+    const { variant } = useConfirmationDialog();
+    const variantStyle = dialogVariantStyles[variant];
+    const DialogIcon = variantStyle.icon;
+    return _jsx(DialogIcon, { className: cn('size-4 shrink-0', variantStyle.iconClassName, className) });
+}
+function Title({ children, className }) {
+    const { titleId, variant } = useConfirmationDialog();
+    const variantStyle = dialogVariantStyles[variant];
+    return (_jsxs("h2", { className: cn('flex items-center gap-2 text-base font-semibold leading-tight', variantStyle.titleClassName, className), id: titleId, children: [_jsx(Icon, {}), _jsx("span", { children: children })] }));
+}
+function Description({ children, className }) {
+    const { descriptionId } = useConfirmationDialog();
+    return (_jsx("p", { className: cn('text-foreground-muted min-h-[2.5rem] min-w-[18rem] text-sm leading-relaxed', className), id: descriptionId, children: children }));
+}
+function Body({ children, className }) {
+    return _jsx("div", { className: cn('text-foreground-muted text-sm', className), children: children });
+}
+function Footer({ children, className }) {
+    return (_jsx("footer", { className: cn('border-app-border mt-2 flex justify-end gap-2 border-t pt-4', className), children: children }));
+}
+function Button({ children, closeOnSuccess = true, disabled, label, minWidth = 100, onClick, size = 'sm', submit = false, variant = 'confirm', ...props }) {
+    const id = useId();
+    const { focusedId, isBusy, registerButton, runAction, setFocusedId, submittingId } = useConfirmationDialog();
+    const defaults = buttonVariantDefaults[variant];
+    const { buttonVariant, className, onBlur, onFocus, style, ...buttonProps } = props;
+    const isSubmitting = submittingId === id;
+    const isFocused = focusedId === id;
+    function handleClick() {
+        void runAction(id, onClick, submit, closeOnSuccess);
+    }
+    function handleFocus(event) {
+        setFocusedId(id);
+        onFocus?.(event);
+    }
+    function handleBlur(event) {
+        setFocusedId(null);
+        onBlur?.(event);
+    }
+    return (_jsx(BaseButton, { ...buttonProps, ref: (element) => registerButton(id, element), disabled: disabled || (isBusy && !isSubmitting), isSubmitting: isSubmitting, minWidth: minWidth, onBlur: handleBlur, onClick: handleClick, onFocus: handleFocus, size: size, variant: buttonVariant ?? defaults.buttonVariant, className: cn('h-9 min-h-9 rounded-md px-3 py-0 text-sm leading-none', 'focus:outline-none focus-visible:outline-none', className), style: {
+            ...style,
+            ...(isFocused
+                ? {
+                    boxShadow: '0 0 0 2px var(--background-secondary), 0 0 0 4px rgba(245, 158, 11, 0.62)',
+                }
+                : {}),
+        }, children: children ?? label ?? defaults.label }));
+}
+function ConfirmationDialogSimple({ actions, cancelLabel = 'Não', children, className, confirmLabel = 'Sim', description, onClose, onConfirm, open, title = 'Tem certeza?', variant = 'default', }) {
+    function handleOpenChange(nextOpen) {
+        if (!nextOpen) {
+            onClose();
+        }
+    }
+    function handleConfirm() {
+        return onConfirm?.();
+    }
+    const resolvedActions = actions?.length
+        ? actions.map((action, index) => {
+            const { children: actionChildren, label: actionLabel, onSelect, variant: actionVariant, ...actionProps } = action;
+            return (_jsx(Button, { ...actionProps, buttonVariant: actionVariant, closeOnSuccess: true, label: actionLabel, onClick: onSelect, submit: index === actions.length - 1, variant: index === actions.length - 1 ? 'success' : 'cancel', children: actionChildren }, index));
+        })
+        : [
+            _jsx(Button, { label: cancelLabel, onClick: onClose, variant: "danger" }, "cancel"),
+            _jsx(Button, { label: confirmLabel, onClick: handleConfirm, submit: true, variant: "success" }, "confirm"),
+        ];
+    return (_jsxs(Root, { className: className, onOpenChange: handleOpenChange, open: open, variant: variant, children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Title, { children: title }), description ? _jsx(Description, { children: description }) : null] }), children ? _jsx(Body, { children: children }) : null, _jsx(Footer, { children: resolvedActions })] }));
+}
+export const ConfirmationDialog = Object.assign(ConfirmationDialogSimple, {
+    Root,
+    Icon,
+    Title,
+    Description,
+    Body,
+    Footer,
+    Button,
+});

package/dist/components/CopyableField.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface CopyableFieldProps extends React.HTMLAttributes<HTMLElement> {
+    value?: string | number | null;
+    children: React.ReactNode;
+    asChild?: boolean;
+    successMessage?: string;
+    errorMessage?: string;
+}
+export declare const CopyableField: React.ForwardRefExoticComponent<CopyableFieldProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=CopyableField.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/CopyableField.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+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;
+    async function copy() {
+        if (!canCopy)
+            return;
+        try {
+            await navigator.clipboard.writeText(copyValue);
+            toast.success(successMessage);
+        }
+        catch {
+            toast.error(errorMessage);
+        }
+    }
+    function handleClick(event) {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        void copy();
+    }
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            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 }));
+});

package/dist/components/DateField.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface DateFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'onChange'> {
+    label?: string;
+    value?: string | Date | null;
+    onChange?: ((value: string) => void) | React.ChangeEventHandler<HTMLInputElement>;
+    inputRef?: React.Ref<HTMLInputElement>;
+    errorMessage?: string;
+    wrapperClassName?: string;
+    labelClassName?: string;
+    size?: 'sm' | 'md' | 'lg';
+    roundedFull?: boolean;
+    enableTime?: boolean;
+    timeIntervals?: number;
+    noPortal?: boolean;
+}
+export declare const DateField: React.ForwardRefExoticComponent<DateFieldProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=DateField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/components/DateField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiE1B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/H,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,yFAwIrB,CAAC"}

package/dist/components/DateField.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import DatePicker, { registerLocale } from 'react-datepicker';
+import { Calendar, CalendarClock } from 'lucide-react';
+import { ptBR } from 'date-fns/locale';
+import { cn } from '../utils/cn';
+import { controlClasses } from './form-control-helpers';
+import { FieldControl } from './FieldControl';
+registerLocale('pt-BR', ptBR);
+function toDateOnlyString(value) {
+    if (value === undefined)
+        return undefined;
+    if (value === null || value === '')
+        return '';
+    if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value))
+        return value;
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return '';
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+function toDateTimeString(value) {
+    if (value === undefined)
+        return undefined;
+    if (value === null || value === '')
+        return '';
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return '';
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function toDateOnlyObject(value) {
+    const str = toDateOnlyString(value);
+    if (!str)
+        return null;
+    const [year, month, day] = str.split('-').map(Number);
+    const d = new Date(year, month - 1, day);
+    return Number.isNaN(d.getTime()) ? null : d;
+}
+function toDateTimeObject(value) {
+    if (!value)
+        return null;
+    const date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+function toOptionalDate(value) {
+    if (typeof value !== 'string' || !value)
+        return undefined;
+    return toDateOnlyObject(value) ?? undefined;
+}
+function assignRef(ref, value) {
+    if (!ref)
+        return;
+    if (typeof ref === 'function') {
+        ref(value);
+        return;
+    }
+    ref.current = value;
+}
+export const DateField = React.forwardRef(({ label, onChange, onBlur, inputRef, disabled, errorMessage, id, className, wrapperClassName, labelClassName, size = 'sm', roundedFull = false, noPortal = false, enableTime = false, timeIntervals = 5, value, name, placeholder, min, max, autoComplete = 'off', autoFocus, }, ref) => {
+    const sizeMap = {
+        sm: 'h-9 text-sm px-3 rounded-md',
+        md: 'h-12 text-sm px-4 rounded-md',
+        lg: 'h-14 text-base px-6 rounded-lg',
+    };
+    const sizeClass = sizeMap[size ?? 'sm'];
+    const hiddenInputRef = React.useRef(null);
+    const toInputValue = enableTime ? toDateTimeString : toDateOnlyString;
+    const toDateObj = enableTime ? toDateTimeObject : toDateOnlyObject;
+    const normalizedValue = toInputValue(value);
+    const [selectedDate, setSelectedDate] = React.useState(() => toDateObj(value));
+    React.useEffect(() => {
+        if (value !== undefined)
+            setSelectedDate(toDateObj(value));
+    }, [value, enableTime]);
+    React.useEffect(() => {
+        if (hiddenInputRef.current && normalizedValue !== undefined) {
+            hiddenInputRef.current.value = normalizedValue;
+        }
+    }, [normalizedValue]);
+    const emitChange = (nextValue) => {
+        if (hiddenInputRef.current)
+            hiddenInputRef.current.value = nextValue;
+        if (!onChange)
+            return;
+        const syntheticEvent = {
+            target: { name, value: nextValue },
+            currentTarget: { name, value: nextValue },
+            type: 'change',
+        };
+        if (onChange.length === 1 && onChange.toString().includes('event')) {
+            onChange(syntheticEvent);
+            return;
+        }
+        onChange(nextValue);
+    };
+    const handleDateChange = (nextDate) => {
+        const resolved = Array.isArray(nextDate) ? (nextDate[0] ?? null) : nextDate;
+        setSelectedDate(resolved);
+        emitChange(toInputValue(resolved) ?? '');
+    };
+    return (_jsx(FieldControl, { label: label, id: id || name, wrapperClassName: wrapperClassName, labelClassName: labelClassName, errorMessage: errorMessage, roundedFull: roundedFull, size: size, disabled: disabled, children: ({ controlId, describedBy, errorMessage: controlError, disabled: controlDisabled }) => (_jsxs("div", { className: "relative", children: [_jsx("input", { type: "hidden", ref: (node) => {
+                        hiddenInputRef.current = node;
+                        assignRef(ref, node);
+                        assignRef(inputRef, node);
+                    }, name: name, disabled: controlDisabled, defaultValue: normalizedValue }), _jsx(DatePicker, { id: controlId, selected: selectedDate, onChange: handleDateChange, ...(!noPortal && { portalId: 'datepicker-portal' }), onBlur: (event) => {
+                        if (!onBlur || !hiddenInputRef.current)
+                            return;
+                        const syntheticEvent = {
+                            ...event,
+                            target: hiddenInputRef.current,
+                            currentTarget: hiddenInputRef.current,
+                        };
+                        onBlur(syntheticEvent);
+                    }, ...(enableTime
+                        ? { showTimeSelect: true, timeIntervals, dateFormat: 'dd/MM/yyyy HH:mm', timeFormat: 'HH:mm', timeCaption: 'Hora' }
+                        : { dateFormat: 'dd/MM/yyyy', minDate: toOptionalDate(min), maxDate: toOptionalDate(max) }), locale: "pt-BR", placeholderText: placeholder ?? label, disabled: controlDisabled, showPopperArrow: false, popperClassName: "app-datepicker-popper", calendarClassName: "app-datepicker", wrapperClassName: "w-full", formatWeekDay: (day) => day.slice(0, 3), ariaDescribedBy: describedBy, ariaInvalid: controlError ? 'true' : undefined, autoComplete: autoComplete, autoFocus: autoFocus, className: controlClasses({
+                        errorMessage: controlError,
+                        disabled: controlDisabled,
+                        extra: cn(className, 'w-full cursor-pointer pr-10', sizeClass),
+                    }) }), _jsx("div", { className: "pointer-events-none absolute top-1/2 right-3 flex -translate-y-1/2 items-center justify-center", children: enableTime ? _jsx(CalendarClock, { className: "text-foreground-muted h-4 w-4" }) : _jsx(Calendar, { className: "text-foreground-muted h-4 w-4" }) })] })) }));
+});
+DateField.displayName = 'DateField';

package/dist/components/DecimalField.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type FieldValues } from 'react-hook-form';
+export interface DecimalFieldProps<TFieldValues extends FieldValues = FieldValues> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange'> {
+    value?: number | null;
+    onChange?: ((value: number) => void) | React.ChangeEventHandler<HTMLInputElement>;
+    decimals?: number;
+    currency?: string | null;
+    locale?: string;
+    control?: unknown;
+    rules?: unknown;
+    label?: string;
+    errorMessage?: string;
+    wrapperClassName?: string;
+    labelClassName?: string;
+    roundedFull?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    labelPosition?: 'top' | 'right' | 'bottom' | 'left';
+    variant?: 'default' | 'neutral';
+}
+export declare const DecimalField: <TFieldValues extends FieldValues = FieldValues>(props: DecimalFieldProps<TFieldValues> & React.RefAttributes<HTMLInputElement>) => React.ReactElement;
+//# sourceMappingURL=DecimalField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DecimalField.d.ts","sourceRoot":"","sources":["../../src/components/DecimalField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAGL,KAAK,WAAW,EAGjB,MAAM,iBAAiB,CAAC;AAMzB,MAAM,WAAW,iBAAiB,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC/E,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IACxF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA+PD,eAAO,MAAM,YAAY,EAQnB,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EACnD,KAAK,EAAE,iBAAiB,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAC3E,KAAK,CAAC,YAAY,CAAC"}

package/dist/components/DecimalField.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { useController, } from 'react-hook-form';
+import { cn } from '../utils/cn';
+import { controlClasses } from './form-control-helpers';
+import { FieldControl } from './FieldControl';
+function assignInputRef(forwardedRef, inputRef, node) {
+    if (typeof inputRef === 'function')
+        inputRef(node);
+    else if (inputRef)
+        inputRef.current = node;
+    if (typeof forwardedRef === 'function') {
+        forwardedRef(node);
+        return;
+    }
+    if (forwardedRef)
+        forwardedRef.current = node;
+}
+const DecimalFieldBase = React.forwardRef(function DecimalFieldBase({ value, onChange, decimals = 2, currency = null, className = '', placeholder = '', id, label, errorMessage, wrapperClassName = '', labelClassName = '', labelPosition = 'top', disabled = false, locale = 'pt-BR', roundedFull = false, size = 'sm', name, onBlur, onKeyDown, inputName, inputValue, inputDisabled, inputOnBlur, inputRef, onValueChange, variant, ...props }, ref) {
+    const [digits, setDigits] = useState('');
+    const previousValueRef = useRef(undefined);
+    const resolvedValue = inputValue ?? value;
+    const resolvedName = inputName ?? name;
+    const resolvedDisabled = inputDisabled ?? disabled;
+    useEffect(() => {
+        if (previousValueRef.current === resolvedValue)
+            return;
+        if (resolvedValue === null || resolvedValue === undefined || Number(resolvedValue) === 0) {
+            setDigits('');
+        }
+        else {
+            const factor = Math.pow(10, decimals);
+            const integerValue = Math.round(Number(resolvedValue) * factor);
+            setDigits(String(integerValue));
+        }
+        previousValueRef.current = resolvedValue;
+    }, [resolvedValue, decimals]);
+    function notify(nextDigits, event) {
+        setDigits(nextDigits);
+        const factor = Math.pow(10, decimals);
+        const nextValue = nextDigits === '' ? 0 : Number(nextDigits) / factor;
+        previousValueRef.current = nextValue;
+        if (onValueChange) {
+            onValueChange(nextValue, event);
+            return;
+        }
+        if (!onChange)
+            return;
+        if (event && onChange.length === 1 && event.nativeEvent) {
+            onChange(event);
+            return;
+        }
+        onChange(nextValue);
+    }
+    function formatDisplay(valueToFormat) {
+        if (valueToFormat === '')
+            return '';
+        const factor = Math.pow(10, decimals);
+        const numericValue = Number(valueToFormat) / factor;
+        return numericValue.toLocaleString(locale, {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+        });
+    }
+    function handleKeyDown(event) {
+        if (resolvedDisabled)
+            return;
+        const { key } = event;
+        if (key === 'Backspace' ||
+            key === 'Delete' ||
+            key === 'ArrowLeft' ||
+            key === 'ArrowRight' ||
+            key === 'Tab' ||
+            key === 'Enter') {
+            if (key === 'Backspace' || key === 'Delete') {
+                event.preventDefault();
+                notify(digits.slice(0, -1), undefined);
+            }
+            if (key === 'Enter')
+                onKeyDown?.(event);
+            return;
+        }
+        if (/^[0-9]$/.test(key)) {
+            event.preventDefault();
+            notify(digits + key, undefined);
+            return;
+        }
+        event.preventDefault();
+    }
+    function handlePaste(event) {
+        if (resolvedDisabled)
+            return;
+        event.preventDefault();
+        const pasted = event.clipboardData.getData('text').replace(/\D/g, '');
+        if (!pasted)
+            return;
+        notify(digits + pasted, undefined);
+    }
+    function handleBlur(event) {
+        inputOnBlur?.(event);
+        onBlur?.(event);
+    }
+    function handleChange(event) {
+        notify(event.target.value.replace(/\D/g, ''), event);
+    }
+    const sizeMap = {
+        xs: 'h-7 text-xs px-2 rounded-md',
+        sm: 'h-9 text-sm px-3 rounded-md',
+        md: 'h-12 text-sm px-4 rounded-md',
+        lg: 'h-14 text-base px-6 rounded-lg',
+    };
+    return (_jsx(FieldControl, { label: label, id: id || resolvedName, labelClassName: labelClassName, labelPosition: labelPosition, wrapperClassName: wrapperClassName, errorMessage: errorMessage, roundedFull: roundedFull, size: size, disabled: resolvedDisabled, children: ({ controlId, describedBy, errorMessage: controlError, disabled: controlDisabled }) => (_jsxs("div", { className: "relative", children: [currency ? (_jsx("span", { className: "text-foreground-muted absolute top-1/2 left-3 -translate-y-1/2 text-sm", children: currency })) : null, _jsx("input", { ref: (node) => assignInputRef(ref, inputRef, node), inputMode: "numeric", ...props, id: controlId, name: resolvedName, disabled: controlDisabled, placeholder: placeholder ||
+                        (0).toLocaleString(locale, {
+                            minimumFractionDigits: decimals,
+                            maximumFractionDigits: decimals,
+                        }), value: formatDisplay(digits), onKeyDown: handleKeyDown, onPaste: handlePaste, onBlur: handleBlur, onChange: handleChange, "aria-label": props['aria-label'] ?? placeholder ?? label ?? 'campo numérico', "aria-invalid": !!controlError, "aria-describedby": describedBy, className: controlClasses({
+                        errorMessage: controlError,
+                        disabled: controlDisabled,
+                        variant,
+                        extra: cn(className, 'field-decimal text-right', currency ? 'pr-4 pl-12' : 'px-4', sizeMap[size ?? 'sm']),
+                    }) })] })) }));
+});
+function HookFormDecimalField(props) {
+    const { control, rules, name, forwardedRef, variant, ...rest } = props;
+    const { field } = useController({
+        control: control,
+        name: name,
+        rules: rules,
+    });
+    return (_jsx(DecimalFieldBase, { ...rest, ref: forwardedRef, name: name, variant: variant, inputName: field.name, inputValue: Number(field.value ?? 0), inputDisabled: field.disabled, inputRef: field.ref, inputOnBlur: field.onBlur, onValueChange: field.onChange }));
+}
+export const DecimalField = React.forwardRef(function DecimalField(props, ref) {
+    if (props.control && props.name) {
+        return _jsx(HookFormDecimalField, { ...props, forwardedRef: ref });
+    }
+    return _jsx(DecimalFieldBase, { ...props, ref: ref });
+});

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export type EmptyStateVariant = 'default' | 'compact';
+export interface EmptyStateProps {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    variant?: EmptyStateVariant;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function EmptyState({ title, description, icon, showIcon, variant, className, children, }: EmptyStateProps): import("react").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAwB,EACxB,WAAW,EACX,IAA2B,EAC3B,QAAe,EACf,OAAmB,EACnB,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BA4BjB"}

package/dist/components/EmptyState.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+import { cn } from '../utils/cn';
+export function EmptyState({ title = 'Nada por aqui.', description, icon = _jsx(DefaultEmptyIcon, {}), showIcon = true, variant = 'default', className, children, }) {
+    const isCompact = variant === 'compact';
+    const styledIcon = isValidElement(icon)
+        ? cloneElement(icon, {
+            className: cn('h-10 w-10 text-foreground-muted', icon.props.className),
+        })
+        : icon;
+    return (_jsx("div", { className: cn('m-2 flex min-h-0 flex-1 items-center justify-center rounded-[1.5rem] border border-dashed rounded rounded-md bg-surface text-center text-foreground-muted', isCompact ? 'px-4 py-6' : 'px-5 py-10', 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/FieldControl.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type FormControlRenderProps, type FormControlSize } from './form-control-helpers';
+export interface FieldControlProps {
+    label?: string;
+    id?: string;
+    labelClassName?: string;
+    wrapperClassName?: string;
+    errorMessage?: string | undefined;
+    hasValidation?: boolean;
+    roundedFull?: boolean;
+    size?: FormControlSize;
+    labelPosition?: 'top' | 'right' | 'bottom' | 'left';
+    disabled?: boolean;
+    children?: React.ReactNode | ((props: FormControlRenderProps) => React.ReactNode);
+}
+export declare const FieldControl: React.FC<FieldControlProps>;
+//# sourceMappingURL=FieldControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldControl.d.ts","sourceRoot":"","sources":["../../src/components/FieldControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAEL,KAAK,sBAAsB,EAC3B,KAAK,eAAe,EAErB,MAAM,wBAAwB,CAAC;AAGhC,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACnF;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmHpD,CAAC"}