@wellingtonhlc/shared-ui 0.24.6 → 0.24.7

package/README.md

@@ -91,6 +91,35 @@ Tambem e possivel apontar um diretorio explicitamente:
 shared-ui-check-page-actions ./src
 ```
 
+## Page Actions
+
+`Page.Actions` e a raiz visual das acoes de tela. O pacote suporta `left`, `top`, `right` e
+`bottom`, com `left` como padrao desktop e `bottom` como fallback mobile quando permitido.
+
+Persistencia de preferencia continua sendo responsabilidade do consumidor. Use
+`Page.ActionsProvider` para fornecer a preferencia global sem acoplar o pacote a
+`localStorage`:
+
+```tsx
+<Page.ActionsProvider
+  preferences={{
+    movable: true,
+    onPositionChange: setActionsPosition,
+    position: actionsPosition,
+  }}
+>
+  <App />
+</Page.ActionsProvider>
+```
+
+Telas podem limitar o contrato localmente:
+
+```tsx
+<Page.Actions allowedPositions={['top', 'bottom']} movable={false}>
+  <Page.ActionButton label="Salvar" />
+</Page.Actions>
+```
+
 ## Storybook
 
 O Storybook esta na linha `10.4.6` (`storybook`, `@storybook/react-vite`, `@storybook/addon-docs` e `@storybook/addon-a11y`).

package/dist/components/Page.d.ts

@@ -7,15 +7,29 @@ export interface PageActionsProps {
     children: ReactNode;
     className?: string;
     position?: PageActionsPosition;
+    defaultPosition?: PageActionsPosition;
+    mobilePosition?: PageActionsPosition;
+    allowedPositions?: PageActionsPosition[];
+    movable?: boolean;
+    onPositionChange?: (position: PageActionsPosition) => void;
     align?: PageActionsAlign;
     size?: PageActionsSize;
     helpContent?: ReactNode;
     helpLabel?: string;
     helpClassName?: string;
+    __fromSlot?: boolean;
 }
 export type PageActionsElement = ReactElement<PageActionsProps, typeof Actions>;
 export type PageActionsSeparatorProps = ActionSeparatorPrimitiveProps;
 export type PageActionButtonProps = ActionButtonPrimitiveProps;
+export interface PageActionsPreferences {
+    allowedPositions?: PageActionsPosition[];
+    defaultPosition?: PageActionsPosition;
+    mobilePosition?: PageActionsPosition;
+    movable?: boolean;
+    onPositionChange?: (position: PageActionsPosition) => void;
+    position?: PageActionsPosition;
+}
 export interface PageActionsHelpContentProps {
     children?: ReactNode;
     className?: string;
@@ -23,7 +37,7 @@ export interface PageActionsHelpContentProps {
     title?: ReactNode;
 }
 declare function ActionsHelpContent({ children, className, items, title }: PageActionsHelpContentProps): import("react").JSX.Element;
-declare function Actions({ align, children, className, helpClassName, helpContent, helpLabel, position, size, }: PageActionsProps): import("react").JSX.Element;
+declare function Actions({ align, __fromSlot, children, className, defaultPosition, mobilePosition, allowedPositions, helpClassName, helpContent, helpLabel, movable, onPositionChange, position, size, }: PageActionsProps): import("react").JSX.Element | null;
 declare function ActionsSeparator(props: PageActionsSeparatorProps): import("react").JSX.Element;
 interface PageRootProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
@@ -32,8 +46,9 @@ interface PageRootProps extends HTMLAttributes<HTMLElement> {
 declare function Root({ actions, children, className, ...props }: PageRootProps): import("react").JSX.Element;
 interface PageActionsProviderProps {
     children: ReactNode;
+    preferences?: PageActionsPreferences;
 }
-declare function ActionsProvider({ children }: PageActionsProviderProps): import("react").JSX.Element;
+declare function ActionsProvider({ children, preferences }: PageActionsProviderProps): import("react").JSX.Element;
 interface PageActionsSlotProps {
     className?: string;
     position: PageActionsPosition;

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

@@ -1 +1 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../src/components/Page.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../src/components/Page.tsx"],"names":[],"mappings":"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"}

package/dist/components/Page.js

@@ -1,10 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useLayoutEffect, useMemo, useState, } from 'react';
-import { CircleHelpIcon } from 'lucide-react';
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { 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 allPositions = ['left', 'top', 'right', 'bottom'];
+const positionLabels = {
+    left: 'Esquerda',
+    top: 'Topo',
+    right: 'Direita',
+    bottom: 'Rodape',
+};
 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] }));
 }
@@ -20,7 +27,126 @@ function getHelpSide(position) {
 function hasHelpContent(helpContent) {
     return helpContent !== null && helpContent !== undefined && helpContent !== false && helpContent !== '';
 }
-function Actions({ align = 'start', children, className, helpClassName, helpContent, helpLabel = 'Ajuda da tela', position = 'top', size = 'md', }) {
+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 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 width = window.innerWidth || 1;
+    const height = window.innerHeight || 1;
+    const x = event.clientX;
+    const y = 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', movable, onPositionChange, position, 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,
+        movable,
+        onPositionChange,
+        position,
+        size,
+    };
+    const effectivePosition = resolvePageActionsPosition(propsForResolution, preferences, isMobile);
+    const effectiveAllowedPositions = getAllowedPositions(propsForResolution, preferences);
+    const effectiveMovable = resolvePageActionsMovable(propsForResolution, preferences);
+    const effectiveOnPositionChange = resolvePageActionsPositionChange(propsForResolution, preferences);
+    const canMove = effectiveMovable && !!effectiveOnPositionChange && effectiveAllowedPositions.length > 1;
+    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, mobilePosition: mobilePosition, movable: movable, onPositionChange: onPositionChange, position: position, size: size, __fromSlot: true, children: children }));
+        return () => {
+            setPageActions(null);
+        };
+    }, [
+        __fromSlot,
+        align,
+        allowedPositions,
+        children,
+        className,
+        defaultPosition,
+        helpClassName,
+        helpContent,
+        helpLabel,
+        mobilePosition,
+        movable,
+        onPositionChange,
+        position,
+        setPageActions,
+        size,
+    ]);
+    if (setPageActions && !__fromSlot)
+        return null;
     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',
@@ -28,17 +154,71 @@ function Actions({ align = 'start', children, className, helpClassName, helpCont
         right: 'h-full min-h-0 self-stretch w-[min(10rem,24vw)] max-w-40 flex-none flex-col items-stretch border-l border-app-border bg-background-secondary p-1 [&>button]:w-full [&>button]:justify-start [&>[role=separator]]:h-px [&>[role=separator]]:min-h-0 [&>[role=separator]]:w-auto',
     };
     const alignClasses = {
-        start: position === 'left' || position === 'right' ? 'justify-start' : 'justify-start',
-        end: position === 'left' || position === 'right' ? 'justify-end' : 'ml-auto justify-end self-end',
+        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);
-    if (helpVisible) {
-        const isVertical = position === 'left' || position === 'right';
-        const actions = (_jsx(ActionGroupPrimitive, { align: align, size: size, className: cn('min-w-0', isVertical ? 'w-full flex-col items-stretch' : 'min-w-0 flex-1 overflow-x-auto overflow-y-hidden', alignClasses[align]), children: children }));
-        const helpButton = (_jsx("div", { className: cn('flex shrink-0', isVertical && 'mt-auto w-full justify-center pt-2', !isVertical && align === 'start' && 'ml-auto pl-2', !isVertical && align === 'end' && 'mr-auto pr-2'), children: _jsx(Tooltip, { className: cn('max-w-[22rem] px-3 py-2', helpClassName), content: helpContent, delayDuration: 120, openOnClick: true, side: getHelpSide(position), children: _jsx(ActionButtonPrimitive, { "aria-label": helpLabel, icon: _jsx(CircleHelpIcon, { "aria-hidden": "true" }), tooltip: helpLabel }) }) }));
-        return (_jsxs("div", { className: cn('flex min-w-0', positionClasses[position], isVertical ? 'flex-col' : 'items-center', className), children: [align === 'end' && !isVertical ? helpButton : null, actions, align === 'start' || isVertical ? helpButton : null] }));
+    const isVertical = effectivePosition === 'left' || effectivePosition === 'right';
+    function handleMoveMenuToggle() {
+        if (isDragging)
+            return;
+        setIsMenuOpen((current) => !current);
     }
-    return (_jsx(ActionGroupPrimitive, { align: align, size: size, className: cn('min-w-0', positionClasses[position], alignClasses[align], className), children: children }));
+    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);
+    }
+    const helpButton = helpVisible ? (_jsx("div", { className: cn('flex shrink-0', isVertical && 'w-full justify-center'), 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 moveButton = canMove ? (_jsxs("div", { className: cn('relative flex shrink-0', isVertical && 'w-full justify-center'), children: [_jsx(ActionButtonPrimitive, { "aria-haspopup": "menu", "aria-label": "Mover barra de acoes", "aria-expanded": isMenuOpen, className: cn(isDragging ? 'cursor-grabbing' : 'cursor-grab'), 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-40 min-w-36 rounded-md border p-1 text-xs shadow-lg', isVertical ? 'left-full top-0 ml-2' : 'right-0 top-full mt-2'), children: effectiveAllowedPositions.map((nextPosition) => (_jsx("button", { type: "button", role: "menuitemradio", "aria-checked": nextPosition === effectivePosition, className: cn('hover:bg-background-secondary flex w-full cursor-pointer items-center rounded px-2 py-1.5 text-left', nextPosition === effectivePosition && 'font-semibold text-brand'), onClick: () => handleSelectPosition(nextPosition), children: positionLabels[nextPosition] }, nextPosition))) })) : null] })) : null;
+    const actions = (_jsxs(ActionGroupPrimitive, { align: align, size: size, className: cn('min-w-0', isVertical ? 'w-full flex-col items-stretch' : 'min-w-0 overflow-x-auto overflow-y-hidden', alignClasses[align]), children: [children, helpButton, 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 fixed inset-0 z-50", 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 });
@@ -46,8 +226,10 @@ function ActionsSeparator(props) {
 const ActionButton = ActionButtonPrimitive;
 function Root({ actions, children, className, ...props }) {
     const actionsContext = useContext(PageActionsContext);
+    const isMobile = useIsMobile();
+    const preferences = actionsContext?.preferences;
     const setPageActions = actionsContext?.setActions;
-    const position = actions?.props.position ?? 'top';
+    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;
@@ -69,15 +251,16 @@ function Root({ actions, children, className, ...props }) {
     }
     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 }) {
+function ActionsProvider({ children, preferences }) {
     const [actions, setActions] = useState(null);
-    const value = useMemo(() => ({ actions, setActions }), [actions]);
+    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?.props.position ?? 'top';
+    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: actions }));

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { TextareaField, type TextareaFieldProps } from './components/TextareaFie
 export { DateField, type DateFieldProps } from './components/DateField';
 export { DecimalField, type DecimalFieldProps } from './components/DecimalField';
 export { Pagination, type PaginationProps, type PaginationSize } from './components/Pagination';
-export { Page, type PageActionButtonProps, type PageActionsAlign, type PageActionsElement, type PageActionsHelpContentProps, type PageActionsPosition, type PageActionsProps, type PageActionsSeparatorProps, type PageActionsSize, type PageDescriptionProps, type PageTitleProps, } from './components/Page';
+export { Page, type PageActionButtonProps, type PageActionsAlign, type PageActionsElement, type PageActionsHelpContentProps, type PageActionsPreferences, type PageActionsPosition, type PageActionsProps, type PageActionsSeparatorProps, type PageActionsSize, type PageDescriptionProps, type PageTitleProps, } from './components/Page';
 export { PageMessage, type PageMessageProps, type PageMessageVariant } from './components/PageMessage';
 export { PasswordInput, type PasswordInputProps } from './components/PasswordInput';
 export { Filter, type FilterFooterProps, type FilterRootProps } from './components/Filter';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/styles.css

@@ -864,6 +864,9 @@ h2.react-datepicker__current-month {
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -876,6 +879,9 @@ h2.react-datepicker__current-month {
   .top-full {
     top: 100%;
   }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
   .right-1\.5 {
     right: calc(var(--spacing) * 1.5);
   }
@@ -894,6 +900,9 @@ h2.react-datepicker__current-month {
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .bottom-2 {
+    bottom: calc(var(--spacing) * 2);
+  }
   .bottom-full {
     bottom: 100%;
   }
@@ -918,6 +927,9 @@ h2.react-datepicker__current-month {
   .left-\[calc\(100\%\+0\.375rem\)\] {
     left: calc(100% + 0.375rem);
   }
+  .left-full {
+    left: 100%;
+  }
   .z-40 {
     z-index: 40;
   }
@@ -990,9 +1002,6 @@ h2.react-datepicker__current-month {
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
-  .mt-auto {
-    margin-top: auto;
-  }
   .mt-px {
     margin-top: 1px;
   }
@@ -1017,6 +1026,9 @@ h2.react-datepicker__current-month {
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -1159,6 +1171,9 @@ h2.react-datepicker__current-month {
   .h-\[32rem\] {
     height: 32rem;
   }
+  .h-\[calc\(100\%-1rem\)\] {
+    height: calc(100% - 1rem);
+  }
   .h-fit {
     height: fit-content;
   }
@@ -1312,6 +1327,12 @@ h2.react-datepicker__current-month {
   .w-\[46rem\] {
     width: 46rem;
   }
+  .w-\[52rem\] {
+    width: 52rem;
+  }
+  .w-\[calc\(100\%-1rem\)\] {
+    width: calc(100% - 1rem);
+  }
   .w-\[min\(10rem\,24vw\)\] {
     width: min(10rem, 24vw);
   }
@@ -1399,6 +1420,9 @@ h2.react-datepicker__current-month {
   .min-w-24 {
     min-width: calc(var(--spacing) * 24);
   }
+  .min-w-36 {
+    min-width: calc(var(--spacing) * 36);
+  }
   .min-w-52 {
     min-width: calc(var(--spacing) * 52);
   }
@@ -1460,6 +1484,12 @@ h2.react-datepicker__current-month {
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .cursor-grab {
+    cursor: grab;
+  }
+  .cursor-grabbing {
+    cursor: grabbing;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1762,6 +1792,12 @@ h2.react-datepicker__current-month {
   .border-brand {
     border-color: var(--color-brand);
   }
+  .border-brand\/50 {
+    border-color: var(--color-brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-brand) 50%, transparent);
+    }
+  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
@@ -1879,12 +1915,24 @@ h2.react-datepicker__current-month {
   .bg-brand {
     background-color: var(--color-brand);
   }
+  .bg-brand\/10 {
+    background-color: var(--color-brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-brand) 10%, transparent);
+    }
+  }
   .bg-brand\/15 {
     background-color: var(--color-brand);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-brand) 15%, transparent);
     }
   }
+  .bg-brand\/20 {
+    background-color: var(--color-brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-brand) 20%, transparent);
+    }
+  }
   .bg-input-bg {
     background-color: var(--color-input-bg);
   }
@@ -2029,9 +2077,6 @@ h2.react-datepicker__current-month {
   .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
-  }
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
@@ -2053,9 +2098,6 @@ h2.react-datepicker__current-month {
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
-  .pl-2 {
-    padding-left: calc(var(--spacing) * 2);
-  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -2389,6 +2431,13 @@ h2.react-datepicker__current-month {
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_0_0_4px_color-mix\(in_srgb\,var\(--brand\)_18\%\,transparent\)\] {
+    --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--brand));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0 0 0 4px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 18%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_2px_8px_-2px_color-mix\(in_srgb\,\#000_6\%\,transparent\)\] {
     --tw-shadow: 0 2px 8px -2px var(--tw-shadow-color, color-mix(in srgb,#000 6%,transparent));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2892,6 +2941,13 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:bg-background-secondary {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background-secondary);
+      }
+    }
+  }
   .hover\:bg-background\/40 {
     &:hover {
       @media (hover: hover) {

package/package.json

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