@wellingtonhlc/shared-ui 0.29.0 → 0.29.1

package/dist/components/DateField.js

@@ -0,0 +1,172 @@
+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 toTimeOnlyString(value) {
+    if (value === undefined)
+        return undefined;
+    if (value === null || value === '')
+        return '';
+    if (typeof value === 'string' && /^\d{2}:\d{2}$/.test(value))
+        return value;
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return '';
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${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 toTimeOnlyObject(value) {
+    const str = toTimeOnlyString(value);
+    if (!str)
+        return null;
+    const [hours, minutes] = str.split(':').map(Number);
+    const d = new Date();
+    d.setHours(hours, minutes, 0, 0);
+    return Number.isNaN(d.getTime()) ? null : d;
+}
+function toOptionalDate(value) {
+    if (typeof value !== 'string' || !value)
+        return undefined;
+    return toDateOnlyObject(value) ?? undefined;
+}
+function getDateFieldMode(mode, enableTime) {
+    if (mode)
+        return mode;
+    return enableTime ? 'dateTime' : 'date';
+}
+function toInputValueByMode(mode, value) {
+    if (mode === 'time')
+        return toTimeOnlyString(value);
+    if (mode === 'dateTime')
+        return toDateTimeString(value);
+    return toDateOnlyString(value);
+}
+function toDateObjectByMode(mode, value) {
+    if (mode === 'time')
+        return toTimeOnlyObject(value);
+    if (mode === 'dateTime')
+        return toDateTimeObject(value);
+    return toDateOnlyObject(value);
+}
+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, calendarClassName, mode, 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 resolvedMode = getDateFieldMode(mode, enableTime);
+    const isTimeOnly = resolvedMode === 'time';
+    const isDateTime = resolvedMode === 'dateTime';
+    const isDateOnly = resolvedMode === 'date';
+    const normalizedValue = toInputValueByMode(resolvedMode, value);
+    const [selectedDate, setSelectedDate] = React.useState(() => toDateObjectByMode(resolvedMode, value));
+    React.useEffect(() => {
+        if (value !== undefined)
+            setSelectedDate(toDateObjectByMode(resolvedMode, value));
+    }, [value, resolvedMode]);
+    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(toInputValueByMode(resolvedMode, 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);
+                    }, ...(isTimeOnly
+                        ? { showTimeSelect: true, showTimeSelectOnly: true, timeIntervals, dateFormat: 'HH:mm', timeFormat: 'HH:mm', timeCaption: 'Hora' }
+                        : isDateTime
+                            ? { 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: cn('app-datepicker', calendarClassName), 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: isDateOnly ? _jsx(Calendar, { className: "text-foreground-muted h-4 w-4" }) : _jsx(CalendarClock, { 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/DismissiblePopover.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode, type RefObject } from 'react';
+export interface DismissiblePopoverProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    trigger: ReactNode;
+    content: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    containerRef?: RefObject<HTMLDivElement | null>;
+    closeDelay?: number;
+    animationDuration?: number;
+}
+export declare function DismissiblePopover({ open, onOpenChange, trigger, content, className, contentClassName, containerRef, closeDelay, animationDuration, }: DismissiblePopoverProps): import("react").JSX.Element;
+//# sourceMappingURL=DismissiblePopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DismissiblePopover.d.ts","sourceRoot":"","sources":["../../src/components/DismissiblePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpF,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,UAAiB,EACjB,iBAAuB,GACxB,EAAE,uBAAuB,+BA6EzB"}

package/dist/components/DismissiblePopover.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../utils/cn';
+export function DismissiblePopover({ open, onOpenChange, trigger, content, className, contentClassName, containerRef, closeDelay = 1500, animationDuration = 180, }) {
+    const closeTimerRef = useRef(null);
+    const animationTimerRef = useRef(null);
+    const [contentVisible, setContentVisible] = useState(open);
+    useEffect(() => {
+        if (closeTimerRef.current !== null) {
+            window.clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+        if (open) {
+            setContentVisible(true);
+            return undefined;
+        }
+        animationTimerRef.current = window.setTimeout(() => {
+            setContentVisible(false);
+            animationTimerRef.current = null;
+        }, animationDuration);
+        return () => {
+            if (animationTimerRef.current !== null) {
+                window.clearTimeout(animationTimerRef.current);
+                animationTimerRef.current = null;
+            }
+        };
+    }, [animationDuration, open]);
+    useEffect(() => () => {
+        if (closeTimerRef.current !== null)
+            window.clearTimeout(closeTimerRef.current);
+        if (animationTimerRef.current !== null)
+            window.clearTimeout(animationTimerRef.current);
+    }, []);
+    function clearCloseTimer() {
+        if (closeTimerRef.current !== null) {
+            window.clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    }
+    function handleMouseEnter() {
+        clearCloseTimer();
+    }
+    function handleMouseLeave() {
+        clearCloseTimer();
+        closeTimerRef.current = window.setTimeout(() => {
+            onOpenChange(false);
+            closeTimerRef.current = null;
+        }, closeDelay);
+    }
+    return (_jsxs("div", { ref: containerRef, className: cn('relative', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, children: [trigger, contentVisible ? (_jsx("div", { "data-state": open ? 'open' : 'closed', className: cn('transition-[opacity,transform] ease-out', open ? 'translate-x-0 opacity-100' : 'pointer-events-none translate-x-2 opacity-0', contentClassName), style: { transitionDuration: `${animationDuration}ms` }, children: content })) : null] }));
+}

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type EmptyStateVariant = 'default' | 'compact';
+export interface EmptyStateProps {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    variant?: EmptyStateVariant;
+    fill?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export declare function EmptyState({ title, description, icon, showIcon, variant, fill, className, style, 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,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMzF,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,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAwB,EACxB,WAAW,EACX,IAA2B,EAC3B,QAAe,EACf,OAAmB,EACnB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,QAAQ,GACT,EAAE,eAAe,+BA8CjB"}

package/dist/components/EmptyState.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+import { cn } from '../utils/cn';
+import { WorkspaceResultContext } from './WorkspaceContext';
+import { useContext } from 'react';
+export function EmptyState({ title = 'Nada por aqui.', description, icon = _jsx(DefaultEmptyIcon, {}), showIcon = true, variant = 'default', fill, className, style, children, }) {
+    const isCompact = variant === 'compact';
+    const workspaceFill = useContext(WorkspaceResultContext);
+    const resolvedFill = fill ?? workspaceFill;
+    const shouldFillWithMargin = resolvedFill;
+    const styledIcon = isValidElement(icon)
+        ? cloneElement(icon, {
+            className: cn('h-10 w-10 text-foreground-muted', icon.props.className),
+        })
+        : icon;
+    return (_jsx("div", { className: cn('flex min-h-0 w-full items-center justify-center rounded-md border border-dashed border-[color-mix(in_srgb,var(--foreground-muted)_24%,transparent)] bg-surface text-center text-foreground-muted', !resolvedFill
+            ? 'h-auto w-fit flex-none px-5 py-10'
+            : isCompact
+                ? 'px-4 py-6'
+                : 'h-full flex-1 px-5 py-10', shouldFillWithMargin && 'm-3', className), "data-slot": "empty-state", style: {
+            ...style,
+            ...(shouldFillWithMargin
+                ? {
+                    width: 'calc(100% - 1.5rem)',
+                    height: 'calc(100% - 1.5rem)',
+                }
+                : {}),
+        }, 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,20 @@
+import React from 'react';
+import { type FormControlRenderProps, type FormControlSize } from './form-control-helpers';
+export interface FieldControlProps {
+    label?: string;
+    id?: string;
+    labelClassName?: string;
+    labelAction?: React.ReactNode;
+    wrapperClassName?: string;
+    errorMessage?: string | undefined;
+    hasValidation?: boolean;
+    roundedFull?: boolean;
+    size?: FormControlSize;
+    labelPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /** Faz o campo preencher a altura disponivel do container (wrapper e controle crescem). */
+    stretch?: boolean;
+    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,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,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,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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,CA2HpD,CAAC"}

package/dist/components/FieldControl.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../utils/cn';
+import { fieldWrapper, labelBase, } from './form-control-helpers';
+import { FieldValidationError } from './FieldValidationError';
+export const FieldControl = ({ label, id, wrapperClassName, labelClassName = '', labelAction, labelPosition = 'top', errorMessage, roundedFull = false, size = 'sm', stretch = false, disabled = false, hasValidation = false, children, }) => {
+    const generatedId = React.useId().replace(/:/g, '');
+    const componentId = id ?? `fc-${generatedId}`;
+    const errorId = `${componentId}-error`;
+    const describedBy = errorMessage ? errorId : undefined;
+    const scopeClass = 'fc-placeholder-scope';
+    const roundedClass = roundedFull ? 'fc-rounded-full' : '';
+    const isHorizontal = labelPosition === 'left' || labelPosition === 'right';
+    const labelSizeClassMap = {
+        xs: 'text-[length:var(--font-size-2xs)]',
+        sm: 'text-xs',
+        md: 'text-sm',
+        lg: 'text-base',
+    };
+    const mergedLabelClassName = cn(labelBase, 'font-medium transition-colors', isHorizontal && 'mb-0', errorMessage ? 'text-red-600 dark:text-red-400' : 'text-foreground-muted', disabled && 'cursor-not-allowed opacity-70', labelClassName, labelSizeClassMap[size ?? 'sm']);
+    let flexDirection = 'flex-col';
+    let labelOrder = 0;
+    let inputOrder = 1;
+    if (labelPosition === 'left') {
+        flexDirection = 'flex-row items-center';
+        labelOrder = 0;
+        inputOrder = 1;
+    }
+    else if (labelPosition === 'right') {
+        flexDirection = 'flex-row items-center';
+        labelOrder = 1;
+        inputOrder = 0;
+    }
+    else if (labelPosition === 'bottom') {
+        flexDirection = 'flex-col';
+        labelOrder = 1;
+        inputOrder = 0;
+    }
+    const renderProps = {
+        controlId: componentId,
+        errorId,
+        describedBy,
+        errorMessage,
+        disabled,
+        label,
+        roundedFull,
+        size,
+    };
+    const renderedChildren = typeof children === 'function' ? children(renderProps) : children;
+    const renderedLabel = label ? (_jsxs("div", { className: cn('flex items-center justify-between gap-2', isHorizontal && 'shrink-0'), style: { order: labelOrder }, children: [_jsx("label", { htmlFor: componentId, className: mergedLabelClassName, children: label }), labelAction] })) : null;
+    return (_jsxs("div", { className: cn(fieldWrapper, stretch && 'h-full min-h-0', wrapperClassName, scopeClass, roundedClass), "data-disabled": disabled || undefined, "data-invalid": !!errorMessage || undefined, children: [_jsx("style", { children: `
+        .${scopeClass} input,
+        .${scopeClass} textarea,
+        .${scopeClass} select { color: var(--foreground); }
+        .${scopeClass} input::placeholder,
+        .${scopeClass} textarea::placeholder,
+        .${scopeClass} select::placeholder { color: var(--muted-foreground); opacity: 0.34; }
+        .dark .${scopeClass} input::placeholder,
+        .dark .${scopeClass} textarea::placeholder,
+        .dark .${scopeClass} select::placeholder { color: var(--muted-foreground); opacity: 0.50; }
+        .${scopeClass} input::-webkit-input-placeholder,
+        .${scopeClass} textarea::-webkit-input-placeholder { color: var(--muted-foreground); opacity: 0.34; }
+        .dark .${scopeClass} input::-webkit-input-placeholder,
+        .dark .${scopeClass} textarea::-webkit-input-placeholder { color: var(--muted-foreground); opacity: 0.50; }
+        .${roundedClass} input,
+        .${roundedClass} textarea,
+        .${roundedClass} select { border-radius: var(--radius-full); padding: var(--space-1-5) var(--space-4); min-height: var(--space-8); }
+        .${roundedClass} input::placeholder,
+        .${roundedClass} textarea::placeholder,
+        .${roundedClass} select::placeholder { opacity: 0.5; }
+      ` }), _jsxs("div", { className: cn('flex gap-2', flexDirection, stretch && 'min-h-0 flex-1'), children: [labelOrder === 0 && renderedLabel, _jsx("div", { style: { order: inputOrder }, className: cn(isHorizontal && 'flex-1', stretch && 'min-h-0 flex-1'), children: renderedChildren }), labelOrder === 1 && renderedLabel] }), _jsx(FieldValidationError, { id: errorId, message: errorMessage, hasValidation: hasValidation })] }));
+};
+FieldControl.displayName = 'FieldControl';

package/dist/components/FieldGroup.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export interface FieldGroupProps {
+    title: string;
+    children: ReactNode;
+    className?: string;
+    bordered?: boolean;
+    titleAlign?: 'left' | 'center' | 'right';
+}
+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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../utils/cn';
+const titleAlignClass = {
+    left: 'mr-auto',
+    center: 'mx-auto',
+    right: 'ml-auto',
+};
+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/FieldSkeleton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { FormControlSize } from './form-control-helpers';
+export interface FieldSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    isLoading: boolean;
+    hasLabel?: boolean;
+    labelPosition?: 'top' | 'right' | 'bottom' | 'left';
+    size?: FormControlSize;
+    children: React.ReactNode;
+}
+export declare const FieldSkeleton: {
+    ({ isLoading, hasLabel, labelPosition, size, className, children, ...divProps }: FieldSkeletonProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+    displayName: string;
+};
+//# sourceMappingURL=FieldSkeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldSkeleton.d.ts","sourceRoot":"","sources":["../../src/components/FieldSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAgBD,eAAO,MAAM,aAAa;qFAQvB,kBAAkB;;CAsCpB,CAAC"}

package/dist/components/FieldSkeleton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../utils/cn';
+const labelSizeClasses = {
+    xs: 'h-4 w-20',
+    sm: 'h-4 w-24',
+    md: 'h-5 w-32',
+    lg: 'h-6 w-36',
+};
+const controlSizeClasses = {
+    xs: 'h-7',
+    sm: 'h-9',
+    md: 'h-12',
+    lg: 'h-14',
+};
+export const FieldSkeleton = ({ isLoading, hasLabel = true, labelPosition = 'top', size = 'md', className, children, ...divProps }) => {
+    const isHorizontal = labelPosition === 'left' || labelPosition === 'right';
+    const content = (_jsxs(_Fragment, { children: [hasLabel && (_jsx("div", { className: cn('block rounded bg-[color-mix(in_srgb,var(--foreground-muted)_18%,var(--surface))] dark:bg-[color-mix(in_srgb,var(--foreground-muted)_30%,var(--surface))]', labelSizeClasses[size], isHorizontal ? 'mb-0 shrink-0' : 'mb-1') })), _jsx("div", { className: cn('w-full animate-pulse rounded-md bg-[color-mix(in_srgb,var(--foreground-muted)_16%,var(--surface))] dark:bg-[color-mix(in_srgb,var(--foreground-muted)_28%,var(--surface))]', controlSizeClasses[size]) })] }));
+    if (isLoading) {
+        return (_jsx("div", { className: cn(isHorizontal ? 'flex items-center gap-2' : 'flex flex-col gap-1', labelPosition === 'right' && 'flex-row-reverse', className), ...divProps, children: content }));
+    }
+    return children;
+};
+FieldSkeleton.displayName = 'FieldSkeleton';

package/dist/components/FieldValidationError.d.ts

@@ -0,0 +1,8 @@
+interface FieldValidationErrorProps {
+    id?: string;
+    message?: string | null;
+    hasValidation?: boolean;
+}
+export declare function FieldValidationError({ id, message, hasValidation }: FieldValidationErrorProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=FieldValidationError.d.ts.map