@boxcustodia/library 2.0.0-alpha.22 → 2.0.0-alpha.23

package/dist/index.es.js

@@ -68,8 +68,8 @@ import { Tooltip as Mp, TooltipArrow as hp, TooltipPopup as Lp, TooltipProvider
 import { Tooltip as Hp } from "@base-ui/react/tooltip";
 import { TreeDragLine as Vp, TreeItem as Bp, TreeItemLabel as Op, TreeRoot as zp } from "./components/tree/tree.es.js";
 import { useControllableState as Kp } from "@radix-ui/react-use-controllable-state";
-import { useArray as Zp } from "./hooks/use-array/use-array.es.js";
-import { useAsync as qp } from "./hooks/use-async/use-async.es.js";
+import { useAction as Zp } from "./hooks/use-action/use-action.es.js";
+import { useArray as qp } from "./hooks/use-array/use-array.es.js";
 import { useBoolean as Up } from "./hooks/use-boolean/use-boolean.es.js";
 import { useClickOutside as Xp } from "./hooks/use-click-outside/use-click-outside.es.js";
 import { useClipboard as $p } from "./hooks/use-clipboard/use-clipboard.es.js";
@@ -78,32 +78,31 @@ import { useDebouncedValue as ta } from "./hooks/use-debounce-value/use-debounce
 import { useDisclosure as pa } from "./hooks/use-disclosure/use-disclosure.es.js";
 import { useDocumentTitle as ma } from "./hooks/use-document-title/use-document-title.es.js";
 import { useEventListener as na } from "./hooks/use-event-listener/use-event-listener.es.js";
-import { useFocusTrap as ua } from "./hooks/use-focus-trap/use-focus-trap.es.js";
-import { getHotkeyHandler as ba, useHotkey as ca } from "./hooks/use-hotkey/use-hotkey.es.js";
-import { useHover as ga } from "./hooks/use-hover/use-hover.es.js";
-import { useIsVisible as Pa } from "./hooks/use-is-visible/use-is-visible.es.js";
-import { useLocalStorage as da } from "./hooks/use-local-storage/use-local-storage.es.js";
-import { useMediaQuery as Aa } from "./hooks/use-media-query/use-media-query.es.js";
-import { useMemoizedFn as Da } from "./hooks/use-memoized-fn/use-memoized-fn.es.js";
-import { useMutation as Fa } from "./hooks/use-mutation/use-mutation.es.js";
-import { useObject as ka } from "./hooks/use-object/use-object.es.js";
-import { useOnMount as ha } from "./hooks/use-on-mount/use-on-mount.es.js";
-import { usePagination as ya } from "./hooks/use-pagination/use-pagination.es.js";
-import { usePortal as Na } from "./hooks/use-portal/use-portal.es.js";
-import { usePreventPageClose as Ha } from "./hooks/use-prevent-page-close/use-prevent-page-close.es.js";
-import { DOTS as Va, useRangePagination as Ba } from "./hooks/use-range-pagination/use-range-pagination.es.js";
-import { useSelection as za } from "./hooks/use-selection/use-selection.es.js";
-import { useStep as Ka } from "./hooks/use-step/use-step.es.js";
-import { cn as Za, twMerge as _a } from "./lib/cn.es.js";
-import { LibraryProvider as Ja } from "./providers/library-provider.es.js";
-import { ThemeProvider as Wa, useTheme as Xa } from "./providers/theme/ThemeProvider.es.js";
-import { useThemeProps as $a } from "./providers/theme/useThemeProps.es.js";
-import { HookField as em, HookForm as rm, parseFormValues as tm, useHookForm as im } from "./utils/form.es.js";
-import { createSafeContext as am } from "./utils/functions/createSafeContext.es.js";
-import { ensureReactElement as lm } from "./utils/functions/ensureReactElement.es.js";
-import { getFormData as sm } from "./utils/functions/getFormData.es.js";
-import { mergeRefs as xm } from "./utils/functions/mergeRefs.es.js";
-import { extractInitials as cm } from "./utils/strings/extractInitials.utility.es.js";
+import { getHotkeyHandler as ua, useHotkey as xa } from "./hooks/use-hotkey/use-hotkey.es.js";
+import { useHover as ca } from "./hooks/use-hover/use-hover.es.js";
+import { useIsVisible as ga } from "./hooks/use-is-visible/use-is-visible.es.js";
+import { useLocalStorage as Pa } from "./hooks/use-local-storage/use-local-storage.es.js";
+import { useMediaQuery as da } from "./hooks/use-media-query/use-media-query.es.js";
+import { useMemoizedFn as Aa } from "./hooks/use-memoized-fn/use-memoized-fn.es.js";
+import { useObject as Da } from "./hooks/use-object/use-object.es.js";
+import { useOnMount as Fa } from "./hooks/use-on-mount/use-on-mount.es.js";
+import { usePagination as ka } from "./hooks/use-pagination/use-pagination.es.js";
+import { usePortal as ha } from "./hooks/use-portal/use-portal.es.js";
+import { usePreventPageClose as ya } from "./hooks/use-prevent-page-close/use-prevent-page-close.es.js";
+import { DOTS as Na, useRangePagination as Ea } from "./hooks/use-range-pagination/use-range-pagination.es.js";
+import { useSelection as wa } from "./hooks/use-selection/use-selection.es.js";
+import { useSessionStorage as Ba } from "./hooks/use-session-storage/use-session-storage.es.js";
+import { useStep as za } from "./hooks/use-step/use-step.es.js";
+import { cn as Ka, twMerge as Qa } from "./lib/cn.es.js";
+import { LibraryProvider as _a } from "./providers/library-provider.es.js";
+import { ThemeProvider as Ja, useTheme as Ua } from "./providers/theme/ThemeProvider.es.js";
+import { useThemeProps as Xa } from "./providers/theme/useThemeProps.es.js";
+import { HookField as $a, HookForm as om, parseFormValues as em, useHookForm as rm } from "./utils/form.es.js";
+import { createSafeContext as im } from "./utils/functions/createSafeContext.es.js";
+import { ensureReactElement as am } from "./utils/functions/ensureReactElement.es.js";
+import { getFormData as lm } from "./utils/functions/getFormData.es.js";
+import { mergeRefs as sm } from "./utils/functions/mergeRefs.es.js";
+import { extractInitials as xm } from "./utils/strings/extractInitials.utility.es.js";
 export {
   r as Accordion,
   t as AccordionContent,
@@ -196,7 +195,7 @@ export {
   ee as ComboboxStatus,
   re as ComboboxTrigger,
   te as ComboboxValue,
-  Va as DOTS,
+  Na as DOTS,
   le as DateInput,
   se as DatePicker,
   xe as Dialog,
@@ -242,14 +241,14 @@ export {
   Be as FileTypeGroups,
   br as Form,
   fr as FormPrimitive,
-  em as HookField,
-  rm as HookForm,
+  $a as HookField,
+  om as HookForm,
   Tr as Input,
   dr as InputPrimitive,
   Ar as Kbd,
   vr as KbdGroup,
   Ir as Label,
-  Ja as LibraryProvider,
+  _a as LibraryProvider,
   Rr as Loader,
   Mr as Menu,
   Lr as MenuCheckboxItem,
@@ -366,7 +365,7 @@ export {
   rp as TabsTrigger,
   ap as Tag,
   np as Textarea,
-  Wa as ThemeProvider,
+  Ja as ThemeProvider,
   up as Timeline,
   xp as TimelineContent,
   bp as TimelineDate,
@@ -390,25 +389,25 @@ export {
   Op as TreeItemLabel,
   zp as TreeRoot,
   mo as buttonVariants,
-  Za as cn,
-  am as createSafeContext,
+  Ka as cn,
+  im as createSafeContext,
   Ap as createToastManager,
-  lm as ensureReactElement,
-  cm as extractInitials,
-  sm as getFormData,
-  ba as getHotkeyHandler,
+  am as ensureReactElement,
+  xm as extractInitials,
+  lm as getFormData,
+  ua as getHotkeyHandler,
   Pr as inputBaseClasses,
-  xm as mergeRefs,
+  sm as mergeRefs,
   pr as normalizeError,
-  tm as parseFormValues,
+  em as parseFormValues,
   bi as selectTriggerClasses,
   ci as selectTriggerIconClassName,
   mp as tagVariants,
   vp as toast,
   Dp as toastVariants,
-  _a as twMerge,
-  Zp as useArray,
-  qp as useAsync,
+  Qa as twMerge,
+  Zp as useAction,
+  qp as useArray,
   _ as useAutocompleteFilter,
   Up as useBoolean,
   Xp as useClickOutside,
@@ -421,27 +420,26 @@ export {
   ma as useDocumentTitle,
   na as useEventListener,
   ar as useFieldName,
-  ua as useFocusTrap,
-  im as useHookForm,
-  ca as useHotkey,
-  ga as useHover,
+  rm as useHookForm,
+  xa as useHotkey,
+  ca as useHover,
   mr as useIsInsideFieldRoot,
-  Pa as useIsVisible,
-  da as useLocalStorage,
-  Aa as useMediaQuery,
-  Da as useMemoizedFn,
-  Fa as useMutation,
-  ka as useObject,
-  ha as useOnMount,
-  ya as usePagination,
-  Na as usePortal,
-  Ha as usePreventPageClose,
-  Ba as useRangePagination,
-  za as useSelection,
-  Ka as useStep,
+  ga as useIsVisible,
+  Pa as useLocalStorage,
+  da as useMediaQuery,
+  Aa as useMemoizedFn,
+  Da as useObject,
+  Fa as useOnMount,
+  ka as usePagination,
+  ha as usePortal,
+  ya as usePreventPageClose,
+  Ea as useRangePagination,
+  wa as useSelection,
+  Ba as useSessionStorage,
+  za as useStep,
   Gi as useStepItem,
   Ni as useStepper,
-  Xa as useTheme,
-  $a as useThemeProps,
+  Ua as useTheme,
+  Xa as useThemeProps,
   Ip as useToastManager
 };

package/dist/src/components/select/select.d.ts

@@ -4,11 +4,16 @@ import * as React from "react";
 export declare const selectTriggerClasses: string;
 export declare const selectTriggerIconClassName = "-me-1 size-4.5 opacity-80 sm:size-4";
 export declare function SelectRoot<Value = string, Multiple extends boolean | undefined = false>({ ...props }: SelectPrimitive.Root.Props<Value, Multiple>): React.ReactElement;
-export declare function SelectTrigger({ className, children, ...props }: SelectPrimitive.Trigger.Props): React.ReactElement;
+export declare function SelectTrigger({ className, children, icon, ...props }: SelectPrimitive.Trigger.Props & {
+    /** Icon rendered inside the trigger. Defaults to a chevrons-up-down glyph. */
+    icon?: React.ReactNode;
+}): React.ReactElement;
 export type SelectButtonProps = useRender.ComponentProps<"button"> & {
     ref?: React.Ref<HTMLButtonElement>;
+    /** Icon rendered inside the button. Defaults to a chevrons-up-down glyph. */
+    icon?: React.ReactNode;
 };
-export declare function SelectButton({ className, render, children, ...props }: SelectButtonProps): React.ReactElement;
+export declare function SelectButton({ className, render, children, icon, ...props }: SelectButtonProps): React.ReactElement;
 export declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): React.ReactElement;
 export declare function SelectPopup({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, anchor, portalProps, ...props }: SelectPrimitive.Popup.Props & {
     portalProps?: SelectPrimitive.Portal.Props;
@@ -35,6 +40,8 @@ type SelectBaseProps<TItem = unknown> = Omit<SelectPrimitive.Root.Props<string,
     renderItem?: (item: TItem) => React.ReactNode;
     placeholder?: string;
     className?: string;
+    /** Icon rendered inside the trigger. Defaults to a chevrons-up-down glyph. */
+    icon?: React.ReactNode;
     /** Styles applied to each internal slot. */
     classNames?: {
         /** Popup panel containing the item list. */

package/dist/src/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export { useControllableState } from '@radix-ui/react-use-controllable-state';
+export * from './use-action';
 export * from './use-array';
-export * from './use-async';
 export * from './use-boolean';
 export * from './use-click-outside';
 export * from './use-clipboard';
@@ -9,14 +9,12 @@ export * from './use-debounce-value';
 export * from './use-disclosure';
 export * from './use-document-title';
 export * from './use-event-listener';
-export * from './use-focus-trap';
 export * from './use-hotkey';
 export * from './use-hover';
 export * from './use-is-visible';
 export * from './use-local-storage';
 export * from './use-media-query';
 export * from './use-memoized-fn';
-export * from './use-mutation';
 export * from './use-object';
 export * from './use-on-mount';
 export * from './use-pagination';
@@ -24,4 +22,5 @@ export * from './use-portal';
 export * from './use-prevent-page-close';
 export * from './use-range-pagination';
 export * from './use-selection';
+export * from './use-session-storage';
 export * from './use-step';

package/dist/src/hooks/internal/index.d.ts

@@ -1,4 +1,5 @@
 export { isAppleDevice } from './is-apple-device';
 export { isBrowser } from './is-browser';
+export type { Serializer } from './serializer';
 export { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
 export { useLatestRef } from './use-latest-ref';

package/dist/src/hooks/internal/serializer.d.ts

@@ -0,0 +1,4 @@
+export interface Serializer<T> {
+    read: (raw: string) => T;
+    write: (value: T) => string;
+}

package/dist/src/hooks/use-action/index.d.ts

@@ -0,0 +1 @@
+export * from './use-action';

package/dist/src/hooks/use-action/use-action.d.ts

@@ -0,0 +1,22 @@
+type ActionStatus = "idle" | "pending" | "success" | "error";
+export interface UseActionOptions<TVariables = void, TData = unknown> {
+    fn: (variables: TVariables) => Promise<TData>;
+    onExecute?: (variables: TVariables) => void;
+    onSuccess?: (data: TData, variables: TVariables) => void;
+    onError?: (error: Error, variables: TVariables) => void;
+    onSettled?: (data: TData | null, error: Error | null, variables: TVariables) => void;
+}
+export interface UseActionReturn<TVariables = void, TData = unknown> {
+    execute: (variables: TVariables) => void;
+    executeAsync: (variables: TVariables) => Promise<TData>;
+    reset: () => void;
+    data: TData | null;
+    error: Error | null;
+    status: ActionStatus;
+    isIdle: boolean;
+    isPending: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+}
+export declare const useAction: <TVariables = void, TData = unknown>(options: UseActionOptions<TVariables, TData>) => UseActionReturn<TVariables, TData>;
+export {};

package/dist/src/hooks/use-local-storage/use-local-storage.d.ts

@@ -1,7 +1,5 @@
-export interface Serializer<T> {
-    read: (raw: string) => T;
-    write: (value: T) => string;
-}
+import { Serializer } from '../internal';
+export type { Serializer };
 export interface UseLocalStorageOptions<T> {
     serializer?: Serializer<T>;
 }

package/dist/src/hooks/use-pagination/use-pagination.d.ts

@@ -1,46 +1,61 @@
-export type usePaginationProps = {
-    /**
-     * Cantidad total de elementos
-     */
+export interface UsePaginationProps {
+    /** Total number of items. Required. */
     totalItems: number;
+    /** Controlled page size. Pair with defaultPageSize / onPageSizeChange. */
+    pageSize?: number;
+    /** Initial page size (uncontrolled). @default 10 */
+    defaultPageSize?: number;
+    /** Fired when page size changes. Stable via useLatestRef. */
+    onPageSizeChange?: (size: number) => void;
+    /** Controlled current page. */
+    page?: number;
+    /** Initial page (uncontrolled). @default 1 */
+    defaultPage?: number;
+    /** Fired when page changes. Stable via useLatestRef. */
+    onPageChange?: (page: number) => void;
     /**
-     * Cantidad de elementos por página
-     */
-    pageSize: number;
-    /**
-     * Página controlada
-     */
-    currentPage?: number;
-    /**
-     * Página inicial (uncontrolled)
+     * Fired once with BOTH resolved values whenever page or pageSize changes.
+     * Ideal as a single data-fetching trigger — no need to wire a `useEffect` on
+     * both `page` and `pageSize`. NOT called on mount. Stable via useLatestRef.
      */
-    defaultCurrentPage?: number;
-    /**
-     * Callback cuando cambia la página
-     */
-    onCurrentPageChange?: (page: number) => void;
-    /**
-     * @deprecated Usá `defaultCurrentPage`
-     */
-    initialCurrentPage?: number;
-    /**
-     * @deprecated Usá `onCurrentPageChange`
-     */
-    onChange?: (value: {
-        currentPage: number;
+    onPaginationChange?: (state: {
+        page: number;
         pageSize: number;
     }) => void;
-};
-export declare function usePagination({ totalItems, pageSize, currentPage: currentPageProp, defaultCurrentPage, onCurrentPageChange, initialCurrentPage, onChange, }: usePaginationProps): {
+}
+export interface UsePaginationActions {
+    /** Go to the next page. No-op on last page. Stable reference. */
     next: () => void;
+    /** Go to the previous page. No-op on first page. Stable reference. */
     prev: () => void;
+    /** Jump to the first page. Stable reference. */
+    firstPage: () => void;
+    /** Jump to the last page. Stable reference. */
+    lastPage: () => void;
+    /** Jump to a specific page, clamped to [1, pageCount]. Stable reference. */
     goTo: (page: number) => void;
-    currentPage: number;
-    maxPage: number;
+    /** Change the page size. Resets to page 1. Stable reference. */
+    setPageSize: (size: number) => void;
+}
+export interface UsePaginationReturn extends UsePaginationActions {
+    /** Current active page (1-indexed). */
+    page: number;
+    /** Current page size. */
+    pageSize: number;
+    /** Total number of pages. 0 when there are no items. */
+    pageCount: number;
+    /** Whether the current page is the first. */
     isFirstPage: boolean;
+    /** Whether the current page is the last. */
     isLastPage: boolean;
+    /** Whether there is a previous page. */
+    hasPrevPage: boolean;
+    /** Whether there is a next page. */
+    hasNextPage: boolean;
+    /** 1-based item range for the current page. */
     range: {
         start: number;
         end: number;
     };
-};
+}
+export declare function usePagination({ totalItems, pageSize: pageSizeProp, defaultPageSize, onPageSizeChange, page: pageProp, defaultPage, onPageChange, onPaginationChange, }: UsePaginationProps): UsePaginationReturn;

package/dist/src/hooks/use-range-pagination/use-range-pagination.d.ts

@@ -1,22 +1,28 @@
-import { usePaginationProps } from '../../hooks';
+import { UsePaginationProps } from '../../hooks';
 export declare const DOTS = "...";
-export type useRangePaginationProps = {
+export type UseRangePaginationProps = {
     /**
-     * Cantidad de elementos visibles al lado de la pagina actual
+     * Visible siblings on each side of the current page.
      */
     siblingCount?: number;
-} & usePaginationProps;
-export declare const useRangePagination: ({ siblingCount, ...paginationProps }: useRangePaginationProps) => {
+} & UsePaginationProps;
+export declare const useRangePagination: ({ siblingCount, ...paginationProps }: UseRangePaginationProps) => {
     paginationRange: (string | number)[];
-    next: () => void;
-    prev: () => void;
-    goTo: (page: number) => void;
-    currentPage: number;
-    maxPage: number;
+    page: number;
+    pageSize: number;
+    pageCount: number;
     isFirstPage: boolean;
     isLastPage: boolean;
+    hasPrevPage: boolean;
+    hasNextPage: boolean;
     range: {
         start: number;
         end: number;
     };
+    next: () => void;
+    prev: () => void;
+    firstPage: () => void;
+    lastPage: () => void;
+    goTo: (page: number) => void;
+    setPageSize: (size: number) => void;
 };

package/dist/src/hooks/use-selection/use-selection.d.ts

@@ -1,54 +1,48 @@
-type Return<T> = {
-    /**
-     * Indica si todos los elementos están seleccionados.
-     */
+/** Stable identity projected from an item. */
+export type Key = string | number | symbol;
+export interface UseSelectionOptions<T> {
+    /**
+     * Projects a stable key from an item. Frozen on mount.
+     * When omitted, the item itself is used as its key (reference identity for
+     * objects, value identity for primitives). Pass this for object lists that
+     * are re-created across renders (e.g. after a fetch) so selection survives.
+     */
+    keyFn?: (item: T) => Key;
+    /** Initial selection. Frozen on mount — never re-applied on re-render. */
+    defaultSelected?: T[];
+    /** Called after every selection change. NOT called on initial mount. */
+    onChange?: (selected: T[]) => void;
+}
+export interface UseSelectionReturn<T> {
+    /** Currently-selected items present in `items`. Stable reference. */
+    selected: T[];
+    /** All selected keys, including keys whose item is absent (sticky). */
+    selectedKeys: ReadonlySet<Key>;
+    /** True when every item in `items` is selected (false when empty). */
     isAllSelected: boolean;
-    /**
-     * Indica si algunos elementos están seleccionados.
-     */
+    /** True when at least one — but not all — items are selected. */
     isSomeSelected: boolean;
-    /**
-     * Indica si ningun elemento está seleccionado.
-     */
+    /** True when nothing is selected. */
     isNoneSelected: boolean;
-    /**
-     * Función que devuelve true si el elemento dado está seleccionado, false de lo contrario.
-     * @param item El elemento a verificar.
-     * @returns true si el elemento está seleccionado, false de lo contrario.
-     */
+    /** Stable fn ref: true if `item` is selected. */
     isSelected: (item: T) => boolean;
-    /**
-     * Array de elementos seleccionados.
-     */
-    selected: T[];
-    /**
-     * Establece los elementos seleccionados.
-     * @param items Los elementos seleccionados.
-     */
-    setSelected: (items: T[]) => void;
-    /**
-     * Selecciona un elemento.
-     * @param item El elemento a seleccionar.
-     */
+    /** Selects one item. No-op if already selected. */
     select: (item: T) => void;
-    /**
-     * Deselecciona un elemento.
-     * @param item El elemento a deseleccionar.
-     */
+    /** Unselects one item. No-op if not selected. */
     unselect: (item: T) => void;
-    /**
-     * Alterna la selección de un elemento (si está seleccionado, lo deselecciona y viceversa).
-     * @param item El elemento cuya selección se alternará.
-     */
+    /** Toggles one item's selection. */
     toggle: (item: T) => void;
-    /**
-     * Alterna la selección de todos los elementos (si todos están seleccionados, los deselecciona; de lo contrario, los selecciona).
-     */
+    /** Replaces the entire selection with `items`. */
+    setSelected: (items: T[]) => void;
+    /** Selects every item currently in `items` (additive). */
+    selectAll: () => void;
+    /** Selects all if not all selected, otherwise clears. */
     toggleAll: () => void;
-    /**
-     * Deselecciona todos los elementos.
-     */
+    /** Clears the entire selection (including sticky orphaned keys). */
     clear: () => void;
-};
-export declare function useSelection<T>(items: T[]): Return<T>;
-export {};
+    /** Inverts selection relative to current `items`. */
+    invert: () => void;
+    /** Selects items in the inclusive index range [from, to] of `items` (additive). */
+    selectRange: (from: number, to: number) => void;
+}
+export declare function useSelection<T>(items: T[], options?: UseSelectionOptions<T>): UseSelectionReturn<T>;

package/dist/src/hooks/use-session-storage/index.d.ts

@@ -0,0 +1 @@
+export * from './use-session-storage';

package/dist/src/hooks/use-session-storage/use-session-storage.d.ts

@@ -0,0 +1,11 @@
+import { Serializer } from '../internal';
+export type { Serializer };
+export interface UseSessionStorageOptions<T> {
+    serializer?: Serializer<T>;
+}
+export declare function useSessionStorage<T>(key: string): [
+    T | undefined,
+    (value: T | ((prev: T | undefined) => T)) => void,
+    () => void
+];
+export declare function useSessionStorage<T>(key: string, initialValue: T, options?: UseSessionStorageOptions<T>): [T, (value: T | ((prev: T) => T)) => void, () => void];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boxcustodia/library",
-  "version": "2.0.0-alpha.22",
+  "version": "2.0.0-alpha.23",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/components/calendar/calendar.tsx

@@ -2,15 +2,15 @@
 
 import { es } from "date-fns/locale";
 import {
+  ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  ChevronsUpDownIcon,
 } from "lucide-react";
 import type * as React from "react";
 import type { DropdownProps } from "react-day-picker";
 import { DayPicker } from "react-day-picker";
 import { cn } from "@/lib";
-import { Select } from "../select/select";
+import { Select, selectTriggerIconClassName } from "../select/select";
 
 const _year = new Date().getFullYear();
 const DEFAULT_START_MONTH = new Date(_year - 100, 0);
@@ -33,11 +33,12 @@ function CalendarDropdown({
     <Select
       items={items}
       value={selected}
+      icon={<ChevronDownIcon className={selectTriggerIconClassName} />}
       // Month/year dropdowns are calendar navigation, not form fields. Force
       // off the invalid state so a surrounding invalid Field never paints them
       // with the error border.
       aria-invalid={false}
-      className="py-1 h-7"
+      className="py-1 h-7 border-none font-medium! w-fit! [&>span]:capitalize"
       getLabel={(o) => o.label}
       getId={(o) => String(o.value)}
       onValueChange={(item) => {
@@ -145,11 +146,7 @@ export function Calendar({
       }
 
       return (
-        <ChevronsUpDownIcon
-          className={className}
-          {...props}
-          aria-hidden="true"
-        />
+        <ChevronDownIcon className={className} {...props} aria-hidden="true" />
       );
     },
   };
@@ -162,6 +159,11 @@ export function Calendar({
   const dayPickerProps = {
     className: cn(
       "w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]",
+      // Standalone container surface. Inside a popover (DatePicker) the
+      // popup already paints border + background + padding, so strip ours
+      // to avoid a double border.
+      "rounded-xl border bg-background p-3",
+      "in-data-[slot=popover-popup]:rounded-none in-data-[slot=popover-popup]:border-0 in-data-[slot=popover-popup]:bg-transparent in-data-[slot=popover-popup]:p-0",
       className,
     ),
     classNames: mergedClassNames,

package/src/components/combobox/combobox.stories.tsx

@@ -219,6 +219,22 @@ export const StringItems: Story = {
   ),
 };
 
+/**
+ * The popup caps its height at `min(--available-height, 23rem)` and the list
+ * scrolls natively — no extra props needed. With a long list the dropdown stays
+ * anchored and scrollable instead of overflowing the viewport. Typing filters
+ * the list, so the scroll only appears while many items still match.
+ */
+export const ManyItems: Story = {
+  render: () => {
+    const manyItems: Item[] = Array.from({ length: 50 }, (_, index) => ({
+      label: `Item ${index + 1}`,
+      value: `item-${index + 1}`,
+    }));
+    return <Combobox<Item> items={manyItems} placeholder="Select an item…" />;
+  },
+};
+
 export const LibraryForm: Story = {
   name: "Form",
   render: () => {