@wellingtonhlc/shared-ui 0.29.0 → 0.29.1

package/dist/components/Page.js

@@ -0,0 +1,347 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, cloneElement, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { CaptionsIcon, CaptionsOffIcon, CircleHelpIcon, GripVerticalIcon } from 'lucide-react';
+import { ActionButtonPrimitive, ActionGroupPrimitive, ActionSeparatorPrimitive, } from './ActionPrimitives';
+import { Tooltip } from './Tooltip';
+import { cn } from '../utils/cn';
+const PageActionsContext = createContext(null);
+const PageActionsRenderContext = createContext(null);
+const allPositions = ['left', 'top', 'right', 'bottom'];
+const positionLabels = {
+    left: 'Esquerda',
+    top: 'Topo',
+    right: 'Direita',
+    bottom: 'Rodape',
+};
+function PageActionsMoveOption({ active, label, onSelect, position }) {
+    function handleClick() {
+        onSelect(position);
+    }
+    return (_jsx("button", { type: "button", role: "menuitemradio", "aria-checked": active, className: cn('hover:bg-background-secondary flex w-full cursor-pointer items-center rounded px-2 py-1.5 text-left', active && 'font-semibold text-brand'), onClick: handleClick, children: label }));
+}
+function ActionsHelpContent({ children, className, items, title }) {
+    return (_jsxs("div", { className: cn('max-w-[22rem] space-y-2 text-xs leading-5 [overflow-wrap:anywhere]', className), children: [title && _jsx("p", { className: "font-semibold text-foreground", children: title }), children && _jsx("div", { className: "text-foreground-muted", children: children }), items?.length ? (_jsx("ul", { className: "list-disc space-y-1 pl-4 text-foreground-muted", children: items.map((item, index) => (_jsx("li", { children: item }, index))) })) : null] }));
+}
+function getHelpSide(position) {
+    const sideByPosition = {
+        top: 'bottom',
+        bottom: 'top',
+        left: 'right',
+        right: 'left',
+    };
+    return sideByPosition[position];
+}
+function hasHelpContent(helpContent) {
+    return helpContent !== null && helpContent !== undefined && helpContent !== false && helpContent !== '';
+}
+function isPageActionsMetaElement(child) {
+    return Boolean(child
+        && typeof child === 'object'
+        && 'type' in child
+        && child.type
+        && child.type.pageActionMeta);
+}
+function getAllowedPositions(props, preferences) {
+    const allowed = props.allowedPositions ?? preferences?.allowedPositions ?? allPositions;
+    return allowed.filter((position, index, array) => allPositions.includes(position) && array.indexOf(position) === index);
+}
+function firstAllowedPosition(allowedPositions, fallback) {
+    return allowedPositions.includes(fallback) ? fallback : (allowedPositions[0] ?? fallback);
+}
+function resolvePageActionsPosition(props, preferences, isMobile) {
+    const allowedPositions = getAllowedPositions(props, preferences);
+    const explicitPosition = props.position;
+    const preferredPosition = preferences?.position;
+    const defaultPosition = props.defaultPosition ?? preferences?.defaultPosition ?? 'left';
+    const mobilePosition = props.mobilePosition ?? preferences?.mobilePosition ?? 'bottom';
+    if (explicitPosition)
+        return firstAllowedPosition(allowedPositions, explicitPosition);
+    if (isMobile)
+        return firstAllowedPosition(allowedPositions, mobilePosition);
+    if (preferredPosition)
+        return firstAllowedPosition(allowedPositions, preferredPosition);
+    return firstAllowedPosition(allowedPositions, defaultPosition);
+}
+function resolvePageActionsMovable(props, preferences) {
+    return props.movable ?? preferences?.movable ?? false;
+}
+function resolvePageActionsPositionChange(props, preferences) {
+    return props.onPositionChange ?? preferences?.onPositionChange;
+}
+function resolvePageActionsShowLabels(props, preferences) {
+    return props.showLabels ?? preferences?.showLabels ?? true;
+}
+function resolvePageActionsShowLabelsChange(props, preferences) {
+    return props.onShowLabelsChange ?? preferences?.onShowLabelsChange;
+}
+function getVerticalMetaAlignment(position) {
+    return position === 'left' ? 'items-start' : 'items-end';
+}
+function getVerticalMetaJustification(position) {
+    return position === 'left' ? 'justify-start' : 'justify-end';
+}
+function useIsMobile() {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return undefined;
+        const media = window.matchMedia('(max-width: 767px)');
+        function handleChange() {
+            setIsMobile(media.matches);
+        }
+        handleChange();
+        media.addEventListener('change', handleChange);
+        return () => {
+            media.removeEventListener('change', handleChange);
+        };
+    }, []);
+    return isMobile;
+}
+function getPointerPosition(event) {
+    const workspace = event.currentTarget instanceof HTMLElement
+        ? event.currentTarget.closest('[data-page-actions-workspace]')
+        : null;
+    const rect = workspace?.getBoundingClientRect();
+    const width = rect?.width || window.innerWidth || 1;
+    const height = rect?.height || window.innerHeight || 1;
+    const x = rect ? event.clientX - rect.left : event.clientX;
+    const y = rect ? event.clientY - rect.top : event.clientY;
+    const leftDistance = x;
+    const rightDistance = width - x;
+    const topDistance = y;
+    const bottomDistance = height - y;
+    const minDistance = Math.min(leftDistance, rightDistance, topDistance, bottomDistance);
+    if (minDistance === leftDistance)
+        return 'left';
+    if (minDistance === rightDistance)
+        return 'right';
+    if (minDistance === bottomDistance)
+        return 'bottom';
+    return 'top';
+}
+function coerceDropPosition(position, allowedPositions) {
+    return allowedPositions.includes(position) ? position : firstAllowedPosition(allowedPositions, position);
+}
+function Actions({ align = 'start', __fromSlot = false, children, className, defaultPosition, mobilePosition, allowedPositions, helpClassName, helpContent, helpLabel = 'Ajuda da tela', metaActions, movable, onShowLabelsChange, onPositionChange, position, showLabels, size = 'md', }) {
+    const actionsContext = useContext(PageActionsContext);
+    const preferences = actionsContext?.preferences;
+    const setPageActions = actionsContext?.setActions;
+    const isMobile = useIsMobile();
+    const propsForResolution = {
+        align,
+        children,
+        className,
+        defaultPosition,
+        mobilePosition,
+        allowedPositions,
+        helpClassName,
+        helpContent,
+        helpLabel,
+        metaActions,
+        movable,
+        onShowLabelsChange,
+        onPositionChange,
+        position,
+        showLabels,
+        size,
+    };
+    const effectivePosition = resolvePageActionsPosition(propsForResolution, preferences, isMobile);
+    const effectiveAllowedPositions = getAllowedPositions(propsForResolution, preferences);
+    const effectiveMovable = resolvePageActionsMovable(propsForResolution, preferences);
+    const effectiveOnPositionChange = resolvePageActionsPositionChange(propsForResolution, preferences);
+    const effectiveShowLabels = resolvePageActionsShowLabels(propsForResolution, preferences);
+    const effectiveOnShowLabelsChange = resolvePageActionsShowLabelsChange(propsForResolution, preferences);
+    const canMove = effectiveMovable && !!effectiveOnPositionChange && effectiveAllowedPositions.length > 1;
+    const canToggleLabels = !!effectiveOnShowLabelsChange;
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [dragTarget, setDragTarget] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const draggedRef = useRef(false);
+    useLayoutEffect(() => {
+        if (!setPageActions || __fromSlot)
+            return undefined;
+        setPageActions(_jsx(Actions, { align: align, allowedPositions: allowedPositions, className: className, defaultPosition: defaultPosition, helpClassName: helpClassName, helpContent: helpContent, helpLabel: helpLabel, metaActions: metaActions, mobilePosition: mobilePosition, movable: movable, onShowLabelsChange: onShowLabelsChange, onPositionChange: onPositionChange, position: position, showLabels: showLabels, size: size, __fromSlot: true, children: children }));
+        return () => {
+            setPageActions(null);
+        };
+    }, [
+        __fromSlot,
+        align,
+        allowedPositions,
+        children,
+        className,
+        defaultPosition,
+        helpClassName,
+        helpContent,
+        helpLabel,
+        metaActions,
+        mobilePosition,
+        movable,
+        onShowLabelsChange,
+        onPositionChange,
+        position,
+        showLabels,
+        setPageActions,
+        size,
+    ]);
+    if (setPageActions && !__fromSlot)
+        return null;
+    const verticalWidthClass = effectiveShowLabels ? 'w-[min(10rem,24vw)] max-w-40' : 'w-auto max-w-none';
+    const positionClasses = {
+        top: 'w-full max-w-full self-stretch border-b border-app-border bg-background-secondary p-1',
+        bottom: 'w-full border-t border-app-border bg-background-secondary p-1',
+        left: cn('h-full min-h-0 self-stretch flex-none flex-col items-stretch border-r border-app-border bg-background-secondary p-1', verticalWidthClass),
+        right: cn('h-full min-h-0 self-stretch flex-none flex-col items-stretch border-l border-app-border bg-background-secondary p-1', verticalWidthClass),
+    };
+    const alignClasses = {
+        start: effectivePosition === 'left' || effectivePosition === 'right' ? 'justify-start' : 'justify-start',
+        end: effectivePosition === 'left' || effectivePosition === 'right' ? 'justify-end' : 'ml-auto justify-end self-end',
+    };
+    const helpVisible = hasHelpContent(helpContent);
+    const isVertical = effectivePosition === 'left' || effectivePosition === 'right';
+    const childrenArray = Children.toArray(children);
+    const mainChildren = childrenArray.filter((child) => !isPageActionsMetaElement(child));
+    const metaChildren = childrenArray.filter(isPageActionsMetaElement);
+    function handleMoveMenuToggle() {
+        if (isDragging)
+            return;
+        setIsMenuOpen((current) => !current);
+    }
+    function handleMoveKeyDown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        setIsMenuOpen((current) => !current);
+    }
+    function handleMovePointerDown(event) {
+        if (!canMove || !effectiveOnPositionChange)
+            return;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        draggedRef.current = false;
+        setIsDragging(true);
+        setIsMenuOpen(false);
+        setDragTarget(effectivePosition);
+    }
+    function handleMovePointerMove(event) {
+        if (!isDragging)
+            return;
+        draggedRef.current = true;
+        const nextTarget = coerceDropPosition(getPointerPosition(event), effectiveAllowedPositions);
+        setDragTarget(nextTarget);
+    }
+    function handleMovePointerUp(event) {
+        if (!isDragging || !effectiveOnPositionChange)
+            return;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        const nextTarget = dragTarget ?? coerceDropPosition(getPointerPosition(event), effectiveAllowedPositions);
+        setIsDragging(false);
+        setDragTarget(null);
+        if (draggedRef.current && nextTarget !== effectivePosition) {
+            effectiveOnPositionChange(nextTarget);
+        }
+    }
+    function handleMovePointerCancel(event) {
+        if (!isDragging)
+            return;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        setIsDragging(false);
+        setDragTarget(null);
+    }
+    function handleSelectPosition(nextPosition) {
+        effectiveOnPositionChange?.(nextPosition);
+        setIsMenuOpen(false);
+    }
+    function handleToggleLabels() {
+        effectiveOnShowLabelsChange?.(!effectiveShowLabels);
+    }
+    const verticalMetaAlignment = getVerticalMetaAlignment(effectivePosition);
+    const verticalMetaJustification = getVerticalMetaJustification(effectivePosition);
+    const helpButton = helpVisible ? (_jsx("div", { className: cn('flex shrink-0', isVertical && 'w-full', isVertical && verticalMetaJustification), children: _jsx(Tooltip, { className: cn('max-w-[22rem] px-3 py-2', helpClassName), content: helpContent, delayDuration: 120, openOnClick: true, side: getHelpSide(effectivePosition), children: _jsx(ActionButtonPrimitive, { "aria-label": helpLabel, icon: _jsx(CircleHelpIcon, { "aria-hidden": "true" }), tooltip: helpLabel }) }) })) : null;
+    const labelToggleButton = canToggleLabels ? (_jsx(ActionButtonPrimitive, { "aria-pressed": effectiveShowLabels, "aria-label": effectiveShowLabels ? 'Ocultar labels das acoes' : 'Mostrar labels das acoes', icon: effectiveShowLabels ? _jsx(CaptionsOffIcon, { "aria-hidden": "true" }) : _jsx(CaptionsIcon, { "aria-hidden": "true" }), tooltip: effectiveShowLabels ? 'Ocultar labels das acoes' : 'Mostrar labels das acoes', onClick: handleToggleLabels })) : null;
+    const moveButton = canMove ? (_jsxs("div", { className: cn('relative flex shrink-0', isVertical && 'w-full', isVertical && verticalMetaJustification), children: [_jsx(ActionButtonPrimitive, { "aria-haspopup": "menu", "aria-label": "Mover barra de acoes", "aria-expanded": isMenuOpen, className: cn('touch-none [&]:cursor-grab [&_*]:cursor-grab active:[&]:cursor-grabbing active:[&_*]:cursor-grabbing', isDragging && '[&]:cursor-grabbing [&_*]:cursor-grabbing'), icon: _jsx(GripVerticalIcon, { "aria-hidden": "true" }), tooltip: "Mover barra de acoes", onClick: handleMoveMenuToggle, onKeyDown: handleMoveKeyDown, onPointerCancel: handleMovePointerCancel, onPointerDown: handleMovePointerDown, onPointerMove: handleMovePointerMove, onPointerUp: handleMovePointerUp }), isMenuOpen ? (_jsx("div", { role: "menu", className: cn('border-app-border bg-surface text-foreground absolute z-[var(--z-popover)] min-w-36 rounded-md border p-1 text-xs shadow-[var(--shadow-md)]', isVertical && effectivePosition === 'left' && 'left-full top-0 ml-2', isVertical && effectivePosition === 'right' && 'right-full top-0 mr-2', !isVertical && 'right-0 top-full mt-2'), children: effectiveAllowedPositions.map((nextPosition) => (_jsx(PageActionsMoveOption, { active: nextPosition === effectivePosition, label: positionLabels[nextPosition], onSelect: handleSelectPosition, position: nextPosition }, nextPosition))) })) : null] })) : null;
+    const actions = (_jsxs("div", { className: cn('flex min-h-0 min-w-0 gap-2', isVertical ? 'h-full w-full flex-col' : 'w-full items-center'), children: [_jsx(PageActionsRenderContext.Provider, { value: { showLabels: effectiveShowLabels }, children: _jsx(ActionGroupPrimitive, { align: align, size: size, className: cn('min-w-0 flex-1', isVertical
+                        ? cn('min-h-0 flex-col content-start [&>[data-action-separator=true]]:h-px [&>[data-action-separator=true]]:min-h-0 [&>[data-action-separator=true]]:w-full [&>[data-action-separator=true]]:self-auto', effectiveShowLabels
+                            ? 'w-full items-stretch [&>button]:w-full [&>button]:justify-start [&>div]:w-full [&>div>button]:w-full [&>div>button]:justify-start'
+                            : 'w-auto items-center')
+                        : 'overflow-x-auto overflow-y-hidden', alignClasses[align]), children: mainChildren }) }), _jsx(PageActionsRenderContext.Provider, { value: { showLabels: !isVertical && effectiveShowLabels }, children: _jsxs("div", { className: cn('flex shrink-0 gap-2', isVertical ? cn('w-full flex-col', verticalMetaAlignment) : 'ml-auto items-center'), children: [helpButton, metaActions, metaChildren, labelToggleButton, moveButton] }) })] }));
+    return (_jsxs("div", { className: cn('flex min-w-0', positionClasses[effectivePosition], isVertical ? 'flex-col' : 'items-center', className), children: [actions, isDragging ? _jsx(PageActionsDropZones, { activePosition: dragTarget ?? effectivePosition, allowedPositions: effectiveAllowedPositions }) : null] }));
+}
+function PageActionsDropZones({ activePosition, allowedPositions }) {
+    return (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-[var(--z-popover)]", children: allPositions.map((position) => {
+            if (!allowedPositions.includes(position))
+                return null;
+            return (_jsx("div", { className: cn('absolute border-2 border-dashed border-brand/50 bg-brand/10 transition-colors', position === 'left' && 'left-2 top-2 h-[calc(100%-1rem)] w-20 rounded-md', position === 'right' && 'right-2 top-2 h-[calc(100%-1rem)] w-20 rounded-md', position === 'top' && 'left-2 top-2 h-14 w-[calc(100%-1rem)] rounded-md', position === 'bottom' && 'bottom-2 left-2 h-14 w-[calc(100%-1rem)] rounded-md', activePosition === position && 'border-brand bg-brand/20 shadow-[0_0_0_4px_color-mix(in_srgb,var(--brand)_18%,transparent)]') }, position));
+        }) }));
+}
+function ActionsSeparator(props) {
+    return _jsx(ActionSeparatorPrimitive, { ...props });
+}
+function ActionButton({ label, tooltip, ...props }) {
+    const renderContext = useContext(PageActionsRenderContext);
+    const showLabels = renderContext?.showLabels ?? true;
+    const resolvedTooltip = tooltip ?? (typeof label === 'string' ? label : undefined);
+    return (_jsx(ActionButtonPrimitive, { label: showLabels ? label : undefined, tooltip: resolvedTooltip, ...props }));
+}
+function Root({ actions, children, className, ...props }) {
+    const actionsContext = useContext(PageActionsContext);
+    const isMobile = useIsMobile();
+    const preferences = actionsContext?.preferences;
+    const setPageActions = actionsContext?.setActions;
+    const position = actions ? resolvePageActionsPosition(actions.props, preferences, isMobile) : 'left';
+    const hasHorizontalActions = position === 'left' || position === 'right';
+    const topActions = position === 'top' ? actions : null;
+    const bottomActions = position === 'bottom' ? actions : null;
+    const leftActions = position === 'left' ? actions : null;
+    const rightActions = position === 'right' ? actions : null;
+    useLayoutEffect(() => {
+        if (!setPageActions)
+            return undefined;
+        setPageActions(actions ?? null);
+        return () => {
+            setPageActions(null);
+        };
+    }, [actions, setPageActions]);
+    if (setPageActions) {
+        return (_jsx("section", { className: cn('flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', className), ...props, children: children }));
+    }
+    if (hasHorizontalActions) {
+        return (_jsx("section", { className: cn('flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', className), ...props, children: _jsxs("div", { className: "flex h-full min-h-0 w-full min-w-0 gap-3", children: [leftActions, _jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: children }), rightActions] }) }));
+    }
+    return (_jsxs("section", { className: cn('flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', className), ...props, children: [topActions, children, bottomActions] }));
+}
+function ActionsProvider({ children, preferences }) {
+    const [actions, setActions] = useState(null);
+    const value = useMemo(() => ({ actions, preferences, setActions }), [actions, preferences]);
+    return _jsx(PageActionsContext.Provider, { value: value, children: children });
+}
+function ActionsSlot({ className, position }) {
+    const actionsContext = useContext(PageActionsContext);
+    const isMobile = useIsMobile();
+    const actions = actionsContext?.actions ?? null;
+    const actionsPosition = actions ? resolvePageActionsPosition(actions.props, actionsContext?.preferences, isMobile) : null;
+    if (!actions || actionsPosition !== position)
+        return null;
+    return (_jsx("div", { className: cn('flex min-w-0 flex-none', (position === 'top' || position === 'bottom') && 'w-full', (position === 'left' || position === 'right') && 'min-h-0 self-stretch', className), children: cloneElement(actions, { __fromSlot: true }) }));
+}
+function Title({ children, className, ...props }) {
+    return (_jsx("h1", { className: cn('text-xl font-semibold tracking-[var(--letter-spacing-tight)] text-foreground', className), ...props, children: children }));
+}
+function Description({ children, className, ...props }) {
+    return (_jsx("p", { className: cn('text-sm leading-6 text-foreground-muted', className), ...props, children: children }));
+}
+function Header({ actions, description, eyebrow, title }) {
+    const hasLeft = eyebrow || title || description;
+    return (_jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [hasLeft && (_jsxs("div", { children: [eyebrow && _jsx("span", { className: "text-xs font-semibold uppercase tracking-[var(--letter-spacing-caps)] text-foreground-muted", children: eyebrow }), title && _jsx(Title, { children: title }), description && _jsx(Description, { children: description })] })), actions && _jsx("div", { className: "flex min-w-0 justify-end", children: actions })] }));
+}
+export const Page = {
+    Root,
+    Header,
+    Title,
+    Description,
+    Actions,
+    ActionsHelpContent,
+    ActionButton,
+    ActionsSeparator,
+    ActionsProvider,
+    ActionsSlot,
+};

package/dist/components/PageMessage.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export type PageMessageVariant = 'default' | 'info' | 'success' | 'warning' | 'danger';
+export interface PageMessageProps {
+    children?: ReactNode;
+    className?: string;
+    icon?: ReactNode | false;
+    message?: ReactNode;
+    title?: ReactNode;
+    variant?: PageMessageVariant;
+}
+export declare function PageMessage({ children, className, icon, message, title, variant, }: PageMessageProps): import("react").JSX.Element;
+//# sourceMappingURL=PageMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageMessage.d.ts","sourceRoot":"","sources":["../../src/components/PageMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAqCD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAmB,GACpB,EAAE,gBAAgB,+BAgBlB"}

package/dist/components/PageMessage.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon, AlertTriangleIcon, CheckCircle2Icon, InfoIcon, } from 'lucide-react';
+import { cn } from '../utils/cn';
+const variantClasses = {
+    default: {
+        container: 'app-page-message--default',
+        icon: 'app-page-message__icon--default',
+        defaultIcon: _jsx(InfoIcon, { className: "size-4" }),
+    },
+    info: {
+        container: 'app-page-message--info',
+        icon: 'app-page-message__icon--info',
+        defaultIcon: _jsx(InfoIcon, { className: "size-4" }),
+    },
+    success: {
+        container: 'app-page-message--success',
+        icon: 'app-page-message__icon--success',
+        defaultIcon: _jsx(CheckCircle2Icon, { className: "size-4" }),
+    },
+    warning: {
+        container: 'app-page-message--warning',
+        icon: 'app-page-message__icon--warning',
+        defaultIcon: _jsx(AlertTriangleIcon, { className: "size-4" }),
+    },
+    danger: {
+        container: 'app-page-message--danger',
+        icon: 'app-page-message__icon--danger',
+        defaultIcon: _jsx(AlertCircleIcon, { className: "size-4" }),
+    },
+};
+export function PageMessage({ children, className, icon, message, title, variant = 'default', }) {
+    const variantStyle = variantClasses[variant];
+    const resolvedIcon = icon === false ? null : icon ?? variantStyle.defaultIcon;
+    const content = children ?? message;
+    return (_jsxs("div", { className: cn('app-page-message flex min-w-0 items-start gap-3 rounded-lg border px-4 py-3 text-sm shadow-sm', variantStyle.container, className), children: [resolvedIcon ? (_jsx("span", { className: cn('mt-0.5 shrink-0', variantStyle.icon), children: resolvedIcon })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("div", { className: "font-semibold leading-5", children: title }) : null, content ? _jsx("div", { className: cn('leading-5', title ? 'mt-0.5' : undefined), children: content }) : null] })] }));
+}

package/dist/components/Pagination.d.ts

@@ -0,0 +1,15 @@
+export type PaginationSize = 'sm' | 'md' | 'lg';
+export interface PaginationProps {
+    page: number;
+    totalPages: number;
+    totalItems?: number;
+    pageSize: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    pageSizeOptions?: number[];
+    label?: string;
+    isLoading?: boolean;
+    size?: PaginationSize;
+}
+export declare function Pagination({ page, totalPages, totalItems, pageSize, onPageChange, onPageSizeChange, pageSizeOptions, label, isLoading, size, }: PaginationProps): import("react").JSX.Element;
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA+ChD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,eAA+B,EAC/B,KAA0B,EAC1B,SAAiB,EACjB,IAAW,GACZ,EAAE,eAAe,+BA0GjB"}

package/dist/components/Pagination.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { cn } from '../utils/cn';
+import { Button } from './Button';
+const sizeClasses = {
+    sm: {
+        root: 'gap-2 md:gap-3',
+        count: 'text-xs md:min-w-[7rem] md:text-[length:var(--font-size-compact)]',
+        controls: 'gap-1',
+        iconButton: 'h-8 min-h-8 min-w-8 px-2 py-0 [&_svg]:size-3.5',
+        navButton: 'h-8 min-h-8 min-w-8 px-2 py-0 min-[901px]:min-w-[5.75rem] [&_svg]:size-3.5',
+        pageIndicator: 'h-8 px-2 text-xs md:min-w-[6.75rem] md:text-[length:var(--font-size-compact)]',
+        select: 'h-8 min-w-18 px-2.5 text-xs',
+        selectLabel: 'text-xs md:text-[length:var(--font-size-compact)]',
+    },
+    md: {
+        root: 'gap-2.5 md:gap-3',
+        count: 'text-[length:var(--font-size-compact)] md:min-w-[7.5rem]',
+        controls: 'gap-1.5',
+        iconButton: 'h-9 min-h-9 min-w-9 px-2.5 py-0 [&_svg]:size-4',
+        navButton: 'h-9 min-h-9 min-w-9 px-3 py-0 min-[901px]:min-w-[6.25rem] [&_svg]:size-4',
+        pageIndicator: 'h-9 px-3 text-[length:var(--font-size-compact)] md:min-w-[7.25rem]',
+        select: 'h-9 min-w-20 px-3 text-[length:var(--font-size-compact)]',
+        selectLabel: 'text-[length:var(--font-size-compact)]',
+    },
+    lg: {
+        root: 'gap-3 md:gap-4',
+        count: 'text-sm md:min-w-[8rem]',
+        controls: 'gap-2',
+        iconButton: 'h-10 min-h-10 min-w-10 px-3 py-0 [&_svg]:size-[1.125rem]',
+        navButton: 'h-10 min-h-10 min-w-10 px-3.5 py-0 min-[901px]:min-w-[6.75rem] [&_svg]:size-[1.125rem]',
+        pageIndicator: 'h-10 px-3.5 text-sm md:min-w-[7.75rem]',
+        select: 'h-10 min-w-22 px-3.5 text-sm',
+        selectLabel: 'text-sm',
+    },
+};
+export function Pagination({ page, totalPages, totalItems, pageSize, onPageChange, onPageSizeChange, pageSizeOptions = [20, 50, 100], label = 'Itens por pagina', isLoading = false, size = 'sm', }) {
+    const isFirstPage = page <= 1;
+    const isLastPage = page >= totalPages;
+    const resolvedSize = sizeClasses[size];
+    function handleFirstPage() {
+        onPageChange(1);
+    }
+    function handlePrevPage() {
+        onPageChange(Math.max(page - 1, 1));
+    }
+    function handleNextPage() {
+        onPageChange(Math.min(page + 1, totalPages));
+    }
+    function handleLastPage() {
+        onPageChange(totalPages);
+    }
+    function handleSizeChange(event) {
+        onPageSizeChange(Number(event.target.value));
+    }
+    return (_jsxs("div", { className: cn('flex w-full min-w-0 flex-wrap items-center justify-between md:flex-nowrap', resolvedSize.root), children: [_jsx("div", { className: cn('flex min-w-0 shrink-0 items-center justify-start whitespace-nowrap font-medium text-foreground-muted', resolvedSize.count), children: _jsx("span", { children: typeof totalItems === 'number' ? `${totalItems} registro(s)` : 'Nenhum resultado' }) }), _jsxs("div", { className: cn('order-3 flex min-w-0 flex-1 flex-nowrap items-center justify-center md:order-none', resolvedSize.controls), children: [_jsx(Button, { variant: "outline", size: "xs", className: resolvedSize.iconButton, onClick: handleFirstPage, disabled: isFirstPage || isLoading, "aria-label": "Primeira pagina", tooltip: "Primeira pagina", children: _jsx(ChevronsLeft, { "aria-hidden": "true" }) }), _jsxs(Button, { variant: "outline", size: "xs", className: resolvedSize.navButton, onClick: handlePrevPage, disabled: isFirstPage || isLoading, "aria-label": "Pagina anterior", children: [_jsx(ChevronLeft, { "aria-hidden": "true" }), _jsx("span", { className: "hidden min-[901px]:inline", children: "Anterior" })] }), _jsxs("span", { className: cn('inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--radius)] font-semibold text-foreground', resolvedSize.pageIndicator), children: ["Pagina ", page, " de ", totalPages] }), _jsxs(Button, { variant: "outline", size: "xs", className: resolvedSize.navButton, onClick: handleNextPage, disabled: isLastPage || isLoading, "aria-label": "Proxima pagina", children: [_jsx("span", { className: "hidden min-[901px]:inline", children: "Proxima" }), _jsx(ChevronRight, { "aria-hidden": "true" })] }), _jsx(Button, { variant: "outline", size: "xs", className: resolvedSize.iconButton, onClick: handleLastPage, disabled: isLastPage || isLoading, "aria-label": "Ultima pagina", tooltip: "Ultima pagina", children: _jsx(ChevronsRight, { "aria-hidden": "true" }) })] }), _jsxs("div", { className: cn('flex min-w-0 shrink-0 items-center justify-end gap-1.5 md:min-w-[9rem]', pageSizeOptions.length <= 1 && 'invisible'), children: [_jsx("span", { className: cn('whitespace-nowrap text-foreground-muted', resolvedSize.selectLabel), children: label }), _jsx("select", { className: cn('border-app-border bg-surface cursor-pointer rounded-[var(--radius)] border text-foreground transition-colors focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20 disabled:cursor-not-allowed disabled:opacity-50', resolvedSize.select), value: pageSize, onChange: handleSizeChange, disabled: isLoading, "aria-label": "Itens por pagina", children: pageSizeOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] })] }));
+}

package/dist/components/PasswordInput.d.ts

@@ -0,0 +1,8 @@
+import { type InputHTMLAttributes } from 'react';
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label?: string;
+    helperText?: string;
+    error?: string;
+}
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=PasswordInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../src/components/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAwBvE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,iHA6BzB,CAAC"}

package/dist/components/PasswordInput.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { TextField } from './TextField';
+function EyeIcon({ hidden }) {
+    if (hidden) {
+        return (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "m9.88 9.88 4.24 4.24" }), _jsx("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c5 0 9 5 9 7a8.25 8.25 0 0 1-1.67 2.68" }), _jsx("path", { d: "M6.61 6.61C3.98 8.23 2 10.93 2 12c0 2 4 7 10 7a9.74 9.74 0 0 0 4.34-1" }), _jsx("path", { d: "M2 2l20 20" })] }));
+    }
+    return (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }));
+}
+export const PasswordInput = forwardRef(({ className, ...props }, ref) => {
+    const [isVisible, setIsVisible] = useState(false);
+    function toggleVisibility() {
+        setIsVisible((current) => !current);
+    }
+    return (_jsx(TextField, { ref: ref, className: className, type: isVisible ? 'text' : 'password', children: (_jsx("button", { type: "button", className: "pointer-events-auto inline-flex size-7 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground-muted transition-[background-color,color,box-shadow] hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30 disabled:cursor-not-allowed disabled:opacity-45", onClick: toggleVisibility, "aria-label": isVisible ? 'Ocultar senha' : 'Mostrar senha', title: isVisible ? 'Ocultar senha' : 'Mostrar senha', disabled: props.disabled, children: _jsx(EyeIcon, { hidden: isVisible }) })), ...props }));
+});
+PasswordInput.displayName = 'PasswordInput';

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { type FieldValues } from 'react-hook-form';
+import { type FormControlSize } from './form-control-helpers';
+export interface RadioGroupProps<TFieldValues extends FieldValues = FieldValues> {
+    value?: string | number | null;
+    onChange?: (value: string | number) => void;
+    name?: string;
+    label?: string;
+    errorMessage?: string;
+    wrapperClassName?: string;
+    labelClassName?: string;
+    disabled?: boolean;
+    size?: FormControlSize;
+    direction?: 'row' | 'column';
+    variant?: 'plain' | 'boxed';
+    children?: React.ReactNode;
+    control?: unknown;
+    rules?: unknown;
+}
+export interface RadioGroupItemProps {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare function Item({ className, disabled: itemDisabled, label, value }: RadioGroupItemProps): React.JSX.Element;
+declare function RadioGroupRoot<TFieldValues extends FieldValues = FieldValues>(props: RadioGroupProps<TFieldValues>): React.JSX.Element;
+export declare const RadioGroup: typeof RadioGroupRoot & {
+    Item: typeof Item;
+};
+export {};
+//# sourceMappingURL=RadioGroup.d.ts.map

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

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