@nexub/react 7.3.0 → 7.5.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.3.0",
+  "version": "7.5.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",

package/dist/components/Avatar/Avatar.d.ts

@@ -3,11 +3,14 @@ import { type VariantProps } from 'class-variance-authority';
 export declare const avatarVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
 export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof avatarVariants> {
     src?: string;
     name?: string;
     fallback?: React.ReactNode;
     badge?: boolean;
     badgeColor?: string;
+    /** Presence dot, added to the accessible name ("Ada Lovelace, Away"). Replaces `badge` when both are set. */
+    status?: AvatarStatus;
 }
 export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Avatar/Avatar.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { safeSrc } from "../../utils/safeHref.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 const avatarVariants = cva(
   "relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-muted)] font-medium select-none",
   {
@@ -28,6 +29,12 @@ const badgeSizeMap = {
   lg: "h-3 w-3",
   xl: "h-3.5 w-3.5"
 };
+const statusColor = {
+  online: "bg-[var(--color-success)]",
+  away: "bg-[var(--color-warning)]",
+  busy: "bg-[var(--color-error)]",
+  offline: "bg-[var(--color-outline)]"
+};
 function getInitials(name) {
   const parts = name.trim().split(/\s+/);
   const first = parts[0] ?? "";
@@ -44,19 +51,30 @@ const Avatar = React.forwardRef(
     fallback,
     badge,
     badgeColor,
+    status,
     ...props
   }, ref) => {
     const src = safeSrc(srcProp);
     const [failedSrc, setFailedSrc] = React.useState();
+    const [pendingSrc, setPendingSrc] = React.useState();
+    const hideUntilLoaded = React.useCallback(
+      (img) => {
+        if (img && !img.complete) setPendingSrc(img.getAttribute("src") ?? void 0);
+      },
+      []
+    );
+    const messages = useNexubMessages();
+    const statusLabel = status ? messages.presence[status] : void 0;
+    const label = [name, statusLabel].filter(Boolean).join(", ") || void 0;
     const showImage = Boolean(src) && failedSrc !== src;
     const initials = name ? getInitials(name) : null;
-    const labelled = Boolean(name || props["aria-label"] || props["aria-labelledby"]);
+    const labelled = Boolean(label || props["aria-label"] || props["aria-labelledby"]);
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
         className: cn(avatarVariants({ size }), className),
-        "aria-label": name ?? void 0,
+        "aria-label": label,
         role: labelled ? "img" : void 0,
         "aria-hidden": labelled ? void 0 : true,
         ...props,
@@ -66,7 +84,12 @@ const Avatar = React.forwardRef(
             {
               src,
               alt: name ?? "",
-              className: "h-full w-full object-cover",
+              ref: hideUntilLoaded,
+              className: cn(
+                "h-full w-full object-cover transition-opacity duration-effects-default ease-effects-default",
+                pendingSrc === src && "opacity-0"
+              ),
+              onLoad: () => setPendingSrc(void 0),
               onError: () => setFailedSrc(src)
             }
           ) : initials ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initials }) : fallback ? fallback : (
@@ -82,13 +105,13 @@ const Avatar = React.forwardRef(
               }
             )
           ),
-          badge && /* @__PURE__ */ jsx(
+          (badge || status) && /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(
                 "absolute bottom-0 end-0 rounded-full ring-2 ring-[var(--color-surface)]",
                 badgeSizeMap[size ?? "md"],
-                badgeColor ?? "bg-[var(--color-success)]"
+                status ? statusColor[status] : badgeColor ?? "bg-[var(--color-success)]"
               ),
               "aria-hidden": "true"
             }

package/dist/components/Avatar/index.d.ts

@@ -1,2 +1,2 @@
 export { Avatar, avatarVariants } from './Avatar.js';
-export type { AvatarProps } from './Avatar.js';
+export type { AvatarProps, AvatarStatus } from './Avatar.js';

package/dist/components/Button/Button.d.ts

@@ -14,7 +14,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     /** Async feedback. `loading` blocks clicks (aria-disabled, focus kept),
      *  `success` draws a check, `error` shakes once. Not applied with `asChild`. */
     status?: ButtonStatus;
-    /** Alias for `status="loading"`. */
+    /** Alias for `status="loading"`. A `type="submit"` button also shows loading
+     *  while its parent `<form action>` is pending (React 19 `useFormStatus`). */
     loading?: boolean;
     /** Announced while loading. @default 'Loading' */
     loadingLabel?: string;

package/dist/components/Button/Button.js

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useFormStatus } from "react-dom";
 import { Slot } from "@radix-ui/react-slot";
 import { Loader2 } from "@nexub/icons";
 import { cva } from "class-variance-authority";
@@ -67,6 +68,22 @@ const buttonVariants = cva(
   }
 );
 const CheckIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { className: "nx-check-draw", pathLength: 1, d: "M20 6 9 17l-5-5" }) });
+const SPINNER_DELAY = 150;
+const SPINNER_MIN = 400;
+function useSpinner(busy) {
+  const [shown, setShown] = React.useState(busy);
+  const shownAt = React.useRef(0);
+  React.useEffect(() => {
+    if (shown) shownAt.current = Date.now();
+  }, [shown]);
+  React.useEffect(() => {
+    if (busy === shown) return;
+    const wait = busy ? SPINNER_DELAY : Math.max(0, SPINNER_MIN - (Date.now() - shownAt.current));
+    const t = setTimeout(() => setShown(busy), wait);
+    return () => clearTimeout(t);
+  }, [busy, shown]);
+  return shown;
+}
 const Button = React.forwardRef(
   ({
     className,
@@ -89,7 +106,9 @@ const Button = React.forwardRef(
     children,
     ...props
   }, ref) => {
-    const status = statusProp ?? (loading ? "loading" : "idle");
+    const formPending = useFormStatus().pending && props.type === "submit";
+    const status = statusProp ?? (loading || formPending ? "loading" : "idle");
+    const spinner = useSpinner(status === "loading");
     const handlePointerMove = usePointerSheen(magnetic, onPointerMove);
     const sharedProps = {
       className: cn(
@@ -111,7 +130,7 @@ const Button = React.forwardRef(
     }
     const busy = status === "loading";
     const swapLabel = status === "success" && successLabel !== void 0;
-    const overlay = busy ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : status === "success" && !swapLabel ? /* @__PURE__ */ jsx(CheckIcon, {}) : null;
+    const overlay = spinner ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : status === "success" && !swapLabel ? /* @__PURE__ */ jsx(CheckIcon, {}) : null;
     const announcement = status === "loading" ? loadingLabel : status === "success" ? successLabel ?? "Done" : status === "error" ? errorLabel : "";
     const button = /* @__PURE__ */ jsxs(
       "button",
@@ -130,14 +149,25 @@ const Button = React.forwardRef(
         "data-status": status === "idle" ? void 0 : status,
         ...sharedProps,
         children: [
-          /* @__PURE__ */ jsx("span", { className: cn("contents", overlay && "text-transparent [&_img]:invisible [&_svg]:invisible"), children: swapLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(CheckIcon, {}),
-            successLabel
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          successLabel === void 0 ? /* @__PURE__ */ jsxs("span", { className: cn("contents", overlay && "text-transparent [&_img]:invisible [&_svg]:invisible"), children: [
             leadingIcon,
             children,
             trailingIcon
-          ] }) }),
+          ] }) : (
+            // Both labels share one grid cell, so the button is as wide as the wider one
+            // whichever shows; the hidden one keeps its space.
+            /* @__PURE__ */ jsxs("span", { className: cn("inline-grid", overlay && "text-transparent [&_img]:invisible [&_svg]:invisible"), children: [
+              /* @__PURE__ */ jsxs("span", { className: cn("col-start-1 row-start-1 inline-flex items-center justify-center gap-2", swapLabel && "invisible"), "aria-hidden": swapLabel || void 0, children: [
+                leadingIcon,
+                children,
+                trailingIcon
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: cn("col-start-1 row-start-1 inline-flex items-center justify-center gap-2", !swapLabel && "invisible"), "aria-hidden": !swapLabel || void 0, children: [
+                swapLabel ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx("span", { className: "h-4 w-4" }),
+                successLabel
+              ] })
+            ] })
+          ),
           overlay && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true", children: overlay })
         ]
       }

package/dist/components/Combobox/Combobox.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
+import { Command } from 'cmdk';
+export interface ComboboxListProps extends React.ComponentProps<typeof Command.List> {
+    /** Options are loading: shows a loading row, sets aria-busy and hides Empty. */
+    loading?: boolean;
+}
 export declare const Combobox: {
     Root: React.ForwardRefExoticComponent<Omit<{
         children?: React.ReactNode;
@@ -25,15 +30,7 @@ export declare const Combobox: {
         value?: string;
         onValueChange?: (search: string) => void;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-    List: React.ForwardRefExoticComponent<Omit<{
-        children?: React.ReactNode;
-    } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: React.Ref<HTMLDivElement>;
-    } & {
-        asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        label?: string;
-    } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<Omit<ComboboxListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Empty: React.ForwardRefExoticComponent<Omit<{
         children?: React.ReactNode;
     } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {

package/dist/components/Combobox/Combobox.js

@@ -1,8 +1,10 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Command } from "cmdk";
 import { cn } from "../../utils/cn.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { Spinner } from "../Spinner/Spinner.js";
 function scrollWithinList(el) {
   if (!el) return;
   el.scrollIntoView = () => {
@@ -47,14 +49,33 @@ const Input = React.forwardRef(
 );
 Input.displayName = "Combobox.Input";
 const List = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    Command.List,
-    {
-      ref,
-      className: cn("max-h-64 overflow-y-auto overflow-x-hidden p-1", className),
-      ...props
-    }
-  )
+  ({ className, loading, children, ...props }, ref) => {
+    const messages = useNexubMessages();
+    return /* @__PURE__ */ jsxs(
+      Command.List,
+      {
+        ref,
+        "aria-busy": loading || void 0,
+        className: cn(
+          // cmdk measures its content into --cmdk-list-height; box-content keeps the padding outside it.
+          "box-content h-[var(--cmdk-list-height)] max-h-64 overflow-y-auto overflow-x-hidden p-1",
+          "transition-[height] duration-spatial-default ease-spatial-default motion-reduce:transition-none",
+          loading && "[&_[cmdk-empty]]:hidden",
+          className
+        ),
+        ...props,
+        children: [
+          loading && // Not Command.Loading: its role="progressbar" isn't allowed inside a listbox
+          // (axe aria-required-children). The listbox's aria-busy carries the state.
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2.5 py-2 text-body-sm text-[var(--color-on-surface-muted)]", children: [
+            /* @__PURE__ */ jsx(Spinner, { size: "sm", "aria-hidden": "true" }),
+            messages.loading
+          ] }),
+          children
+        ]
+      }
+    );
+  }
 );
 List.displayName = "Combobox.List";
 const Empty = React.forwardRef(

package/dist/components/DataTable/DataTable.d.ts

@@ -91,5 +91,9 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     onRowOrderChange?: (data: TData[]) => void;
     /** Names a row in "Move ‹label›" and the move announcements. @default its position */
     getRowLabel?: (row: TData) => string;
+    /** Shows skeleton rows (one page's worth) and sets aria-busy on the table. */
+    loading?: boolean;
+    /** Shown in a full-width row when there are no rows. @default messages.noResults */
+    emptyState?: React.ReactNode;
 }
-export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, onRowOrderChange, getRowLabel, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, onRowOrderChange, getRowLabel, loading, emptyState, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -23,6 +23,7 @@ import { Button } from "../Button/Button.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import { createGridNavigation } from "./gridNavigation.js";
 import { useReorder } from "../Sortable/reorder.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
 const alignText = {
   start: "text-start",
   end: "text-end",
@@ -170,6 +171,8 @@ function DataTable({
   onExpandedChange,
   onRowOrderChange,
   getRowLabel,
+  loading = false,
+  emptyState,
   caption,
   captionHidden = false,
   className,
@@ -429,6 +432,7 @@ function DataTable({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         "aria-rowcount": rowWin.virtual ? rows.length + 1 : void 0,
+        "aria-busy": loading || void 0,
         role: grid ? "grid" : void 0,
         onKeyDown: grid ? gridNav.onKeyDown : void 0,
         onFocus: grid ? gridNav.onFocus : void 0,
@@ -528,7 +532,7 @@ function DataTable({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsx(TableBody, { children: rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TableBody, { children: loading ? Array.from({ length: pagination?.pageSize ?? 5 }, (_, i) => /* @__PURE__ */ jsx(TableRow, { "data-loading": "", className: "hover:bg-transparent", children: table.getVisibleLeafColumns().map((c) => /* @__PURE__ */ jsx(TableCell, { className: cn(compact && "py-1.5"), children: /* @__PURE__ */ jsx(Skeleton, {}) }, c.id)) }, i)) : rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
             rowWin.before > 0 && /* @__PURE__ */ jsx(Spacer, { height: rowWin.before }),
             rowWin.indexes.map((i) => {
               const row = rows[i];
@@ -564,7 +568,7 @@ function DataTable({
             {
               colSpan: table.getVisibleLeafColumns().length,
               className: "h-24 text-center text-[var(--color-on-surface-muted)]",
-              children: messages.noResults
+              children: emptyState ?? messages.noResults
             }
           ) }) })
         ]

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ChevronProps, type Labels } from 'react-day-picker';
+import { type ChevronProps, type Labels, type Matcher } from 'react-day-picker';
 import { type Locale } from 'date-fns';
 /**
  * A date-fns Locale wins (date-fns 'PP'); else with a NexubProvider locale,
@@ -34,6 +34,21 @@ export interface DatePickerProps {
     'aria-label'?: string;
     /** date-fns Locale for the calendar and trigger text; wins over NexubProvider's `dateLocale`. */
     locale?: Locale;
+    /** Days that can't be picked (react-day-picker Matcher), e.g. `{ dayOfWeek: [0, 6] }`. */
+    disabledDates?: Matcher | Matcher[];
+    /** Quick picks under the calendar (Today, In a week…); choosing one sets the value and closes. */
+    presets?: {
+        label: string;
+        date: Date;
+    }[];
+    /**
+     * The trigger is a text input that also accepts a typed date in the locale's
+     * short format (date-fns `P`, e.g. 01/15/2024). Enter or blur commits; an
+     * invalid or unavailable date stays as typed, marked aria-invalid, and the
+     * value is unchanged. `id` and `aria-label` go to the input, `ref` to the
+     * calendar button.
+     */
+    typeable?: boolean;
 }
 export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/DatePicker/DatePicker.js

@@ -2,13 +2,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixPopover from "@radix-ui/react-popover";
-import { DayPicker } from "react-day-picker";
-import { format } from "date-fns";
+import { DayPicker, dateMatchModifiers } from "react-day-picker";
+import { format, isValid, parse } from "date-fns";
 import { CalendarDays, ChevronLeft, ChevronRight } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { useIntlLocale, useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
-import { field, fieldFocusVisible } from "../../utils/control.js";
+import { field, fieldDisabled, fieldFocusVisible, fieldFocusWithin, fieldInvalid } from "../../utils/control.js";
 import { floatingSurface } from "../../utils/surface.js";
+import { Button } from "../Button/Button.js";
 function formatDate(date, locale, dateLocale) {
   if (dateLocale) return format(date, "PP", { locale: dateLocale });
   return locale ? new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date) : format(date, "PP");
@@ -71,7 +72,18 @@ const calendarClassNames = {
   today: "[&>button]:border-[var(--color-primary)]",
   outside: "[&:not([data-selected]):not([data-disabled])>button]:text-[var(--color-on-surface-muted)]",
   disabled: "",
-  hidden: "invisible"
+  hidden: "invisible",
+  // Month change (animate): the months crossfade. react-day-picker adds each of
+  // these with classList.add, so one class apiece. Keyframes from @nexub/themes
+  // core.css; reduced motion collapses them and animationend still cleans up.
+  caption_after_enter: "animate-[nx-fade-in_var(--motion-spring-effects-default-duration)_var(--motion-spring-effects-default-easing)]",
+  caption_before_enter: "animate-[nx-fade-in_var(--motion-spring-effects-default-duration)_var(--motion-spring-effects-default-easing)]",
+  weeks_after_enter: "animate-[nx-fade-in_var(--motion-spring-effects-default-duration)_var(--motion-spring-effects-default-easing)]",
+  weeks_before_enter: "animate-[nx-fade-in_var(--motion-spring-effects-default-duration)_var(--motion-spring-effects-default-easing)]",
+  caption_after_exit: "animate-[nx-fade-out_var(--motion-spring-effects-fast-duration)_var(--motion-spring-effects-fast-easing)_forwards]",
+  caption_before_exit: "animate-[nx-fade-out_var(--motion-spring-effects-fast-duration)_var(--motion-spring-effects-fast-easing)_forwards]",
+  weeks_after_exit: "animate-[nx-fade-out_var(--motion-spring-effects-fast-duration)_var(--motion-spring-effects-fast-easing)_forwards]",
+  weeks_before_exit: "animate-[nx-fade-out_var(--motion-spring-effects-fast-duration)_var(--motion-spring-effects-fast-easing)_forwards]"
 };
 const DatePicker = React.forwardRef(
   function DatePicker2({
@@ -84,15 +96,75 @@ const DatePicker = React.forwardRef(
     className,
     id,
     "aria-label": ariaLabel,
-    locale: localeProp
+    locale: localeProp,
+    disabledDates,
+    presets,
+    typeable = false
   }, ref) {
     const [open, setOpen] = React.useState(false);
     const messages = useNexubMessages();
     const placeholder = placeholderProp ?? messages.pickDate;
     const calendar = useCalendarLocale(localeProp);
     const display = value ? calendar.format(value) : placeholder;
+    const [text, setText] = React.useState(null);
+    const dateLocale = calendar.dayPickerProps.locale;
+    const typed = text?.trim() ? parse(text.trim(), "P", /* @__PURE__ */ new Date(), { locale: dateLocale }) : void 0;
+    const invalid = typed !== void 0 && (!isValid(typed) || minDate !== void 0 && typed < minDate || maxDate !== void 0 && typed > maxDate || disabledDates !== void 0 && dateMatchModifiers(typed, disabledDates));
+    const commit = () => {
+      if (text === null || invalid) return;
+      onChange?.(typed);
+      setText(null);
+    };
+    const pick = (date) => {
+      onChange?.(date);
+      setText(null);
+      setOpen(false);
+    };
     return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      typeable ? /* @__PURE__ */ jsx(RadixPopover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex h-control-md w-full items-center gap-1 ps-3.5 pe-1",
+            field,
+            fieldFocusWithin,
+            invalid && fieldInvalid,
+            disabled && fieldDisabled,
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id,
+                type: "text",
+                disabled,
+                "aria-label": ariaLabel,
+                "aria-invalid": invalid || void 0,
+                placeholder,
+                value: text ?? (value ? format(value, "P", { locale: dateLocale }) : ""),
+                onChange: (e) => setText(e.target.value),
+                onBlur: commit,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commit();
+                },
+                className: "min-w-0 flex-1 bg-transparent text-body-md outline-none placeholder:text-[var(--color-on-surface-muted)] disabled:cursor-not-allowed"
+              }
+            ),
+            /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref,
+                type: "button",
+                disabled,
+                "aria-label": messages.pickDate,
+                className: "nx-state-layer inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full disabled:pointer-events-none",
+                children: /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" })
+              }
+            ) })
+          ]
+        }
+      ) }) : /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",
         {
           ref,
@@ -115,7 +187,7 @@ const DatePicker = React.forwardRef(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs(
         RadixPopover.Content,
         {
           align: "start",
@@ -124,25 +196,27 @@ const DatePicker = React.forwardRef(
             floatingSurface,
             "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
           ),
-          children: /* @__PURE__ */ jsx(
-            DayPicker,
-            {
-              mode: "single",
-              selected: value,
-              defaultMonth: value,
-              onSelect: (date) => {
-                onChange?.(date);
-                setOpen(false);
-              },
-              startMonth: minDate,
-              endMonth: maxDate,
-              autoFocus: true,
-              showOutsideDays: true,
-              className: "relative p-3",
-              classNames: calendarClassNames,
-              ...calendar.dayPickerProps
-            }
-          )
+          children: [
+            /* @__PURE__ */ jsx(
+              DayPicker,
+              {
+                mode: "single",
+                selected: value,
+                defaultMonth: value,
+                onSelect: pick,
+                disabled: disabledDates,
+                startMonth: minDate,
+                endMonth: maxDate,
+                autoFocus: true,
+                animate: true,
+                showOutsideDays: true,
+                className: "relative p-3",
+                classNames: calendarClassNames,
+                ...calendar.dayPickerProps
+              }
+            ),
+            presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 border-t border-[var(--color-outline-variant)] p-2", children: presets.map((p) => /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", onClick: () => pick(p.date), children: p.label }, p.label)) })
+          ]
         }
       ) })
     ] });