@godxjp/ui 32.0.5 → 32.1.1

package/dist/components/data-entry/date-picker.js

@@ -13,6 +13,7 @@ import {
 } from "../../lib/datetime/picker-format.js";
 import { Button } from "../general/button.js";
 import { Flex } from "../layout/flex.js";
+import { Text } from "../general/typography.js";
 import { TimePicker } from "./time-picker.js";
 import { useControlledLatch } from "../../lib/hooks.js";
 import { pickFieldA11y, pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
@@ -75,6 +76,7 @@ function DatePicker(props) {
     preserveInvalidOnBlur,
     placement = "bottom-start",
     renderExtraFooter,
+    showSummary = true,
     size,
     status,
     variant,
@@ -166,6 +168,7 @@ function DatePicker(props) {
   React.useEffect(() => {
     if (open) setInternalView(defaultPickerValue ?? valueAnchor);
   }, [open]);
+  const halfRange = Boolean(rangeValue?.from && !rangeValue.to);
   const resolvedPlaceholder = placeholder ?? (isPeriod ? t("dataEntry.monthPicker.placeholder") : range ? t("dataEntry.dateRangePicker.placeholder") : t("dataEntry.datePicker.placeholder")) ?? PERIOD_HINT[picker];
   const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
   const showClear = clearControl.enabled && !anyDisabled && (range ? allowEmpty.every(Boolean) && Boolean(committedRange?.from || committedRange?.to) : text !== "");
@@ -389,6 +392,22 @@ function DatePicker(props) {
       ) }, index);
     }) }, row)) })
   ] });
+  const renderSummary = () => {
+    const from = rangeValue?.from;
+    const to = rangeValue?.to;
+    const dates = dateTimeFormat(locale, { year: "numeric", month: "short", day: "numeric" });
+    let content;
+    if (from && to) {
+      const utc = (date) => Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+      const count = Math.round(Math.abs(utc(to) - utc(from)) / 864e5) + 1;
+      const [start, end] = +from <= +to ? [from, to] : [to, from];
+      content = t("dataEntry.dateRangePicker.summary", {
+        range: dates.formatRange(start, end),
+        days: t("dataEntry.dateRangePicker.days", { count })
+      });
+    } else if (from) content = dates.format(from);
+    return /* @__PURE__ */ jsx("div", { "data-slot": "date-picker-summary", "aria-live": "polite", "aria-atomic": "true", children: content ? /* @__PURE__ */ jsx(Flex, { pad: "sm", children: /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", tabular: true, children: content }) }) : null });
+  };
   const calendarBounds = [
     ...minimum ? [{ before: minimum }] : [],
     ...maximum ? [{ after: maximum }] : [],
@@ -510,6 +529,7 @@ function DatePicker(props) {
           index
         )) }) : null,
         isPeriod ? renderPeriodPanel() : renderDayPanel(),
+        range && showSummary && !isPeriod ? renderSummary() : null,
         showTime ? /* @__PURE__ */ jsx(
           Flex,
           {
@@ -579,7 +599,7 @@ function DatePicker(props) {
         "aria-readonly": inputReadOnly || void 0,
         value: edge === "from" ? fromText : toText,
         disabled: edgeDisabled(edge),
-        placeholder: resolvedPlaceholder,
+        placeholder: edge === "to" && halfRange && !isPeriod ? t("dataEntry.dateRangePicker.selectEnd") ?? resolvedPlaceholder : resolvedPlaceholder,
         inputMode: "numeric",
         autoComplete: "off",
         "aria-label": (edge === "from" ? t("dataEntry.dateRangePicker.from") : t("dataEntry.dateRangePicker.to")) ?? edge,

package/dist/components/data-entry/index.d.ts

@@ -50,7 +50,7 @@ export type { TransferProps, TransferItemProp } from "./transfer.js";
 export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
 export type { CommandProps } from "./command.js";
 export { CommandPalette } from "./command-palette.js";
-export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteLabels, CommandPaletteProps, CommandPaletteSelectModifiers, } from "./command-palette.js";
+export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteLabels, CommandPaletteProps, CommandPaletteRecent, CommandPaletteSelectModifiers, } from "./command-palette.js";
 export { PasswordInput } from "./password-input.js";
 export type { PasswordInputProps, PasswordVisibilityToggleProp } from "./password-input.js";
 export { PasswordStrength, usePasswordStrength } from "./password-strength.js";

package/dist/components/data-entry/password-strength.d.ts

@@ -8,6 +8,8 @@ export type PasswordStrengthLabels = {
     weak?: string;
     fair?: string;
     strong?: string;
+    /** The neutral line shown while nothing has been typed (gh#1247). */
+    empty?: string;
     /** Checklist line per rule. */
     rules?: Partial<Record<PasswordRule, string>>;
     /** Screen-reader prefix before a met rule (e.g. "Passed: "). */

package/dist/components/data-entry/password-strength.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, X } from "lucide-react";
+import { Check, Minus, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 const DEFAULT_PASSWORD_RULES = ["length", "upper", "lower", "number", "symbol"];
 function usePasswordStrength(value, rules = [...DEFAULT_PASSWORD_RULES], minLength = 8) {
@@ -36,12 +36,13 @@ function PasswordStrength({
   const { t } = useTranslation();
   const normalizedRules = [...new Set(rules)];
   const { score, checks } = usePasswordStrength(value, normalizedRules, minLength);
-  const tone = scoreTone(score);
+  const empty = value.trim() === "";
+  const tone = empty ? void 0 : scoreTone(score);
   const segments = Array.from({ length: 5 });
   const key = scoreKey(score);
-  const strength = labels[key] ?? t(`dataEntry.passwordStrength.${key}`);
+  const strength = empty ? labels.empty ?? t("dataEntry.passwordStrength.empty") : labels[key] ?? t(`dataEntry.passwordStrength.${key}`);
   const ruleLabel = (rule) => labels.rules?.[rule] ?? t(`dataEntry.passwordStrength.rules.${rule}`, { n: String(minLength) });
-  const announcement = labels.announcement ? labels.announcement(strength) : t("dataEntry.passwordStrength.announcement", { strength });
+  const announcement = empty ? "" : labels.announcement ? labels.announcement(strength) : t("dataEntry.passwordStrength.announcement", { strength });
   return /* @__PURE__ */ jsxs("div", { className: "ui-password-strength", children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -50,7 +51,7 @@ function PasswordStrength({
         role: "img",
         "aria-label": t("dataEntry.passwordStrength.meter", { score: String(score) }),
         children: segments.map((_, index) => {
-          const filled = index < score + 1;
+          const filled = !empty && index < score + 1;
           return /* @__PURE__ */ jsx(
             "span",
             {
@@ -75,9 +76,9 @@ function PasswordStrength({
       "li",
       {
         className: "ui-password-strength-checklist-item",
-        "data-state": checks[rule] ? "passed" : "failed",
+        "data-state": empty ? "pending" : checks[rule] ? "passed" : "failed",
         children: [
-          checks[rule] ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+          empty ? /* @__PURE__ */ jsx(Minus, { "aria-hidden": "true" }) : checks[rule] ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: checks[rule] ? labels.passed ?? t("dataEntry.passwordStrength.passed") : labels.failed ?? t("dataEntry.passwordStrength.failed") }),
           /* @__PURE__ */ jsx("span", { children: ruleLabel(rule) })
         ]

package/dist/components/data-entry/search-input.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { SearchInputProp } from "../../props/components/data-entry.prop.js";
 export type SearchInputProps = SearchInputProp;
-export declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onValueChange, onSearch, label, ariaLabel, className, inputClassName, id, disabled, status, variant, ...ariaProps }: SearchInputProps): React.JSX.Element;
+export declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onValueChange, onSearch, label, ariaLabel, className, inputClassName, id, disabled, status, variant, shortcut, ...ariaProps }: SearchInputProps): React.JSX.Element;

package/dist/components/data-entry/search-input.js

@@ -8,6 +8,8 @@ import { Label } from "../data-entry/label.js";
 import { cn } from "../../lib/utils.js";
 import { resolveFieldA11y } from "../../lib/field-a11y.js";
 import { useDebouncedValue } from "../../lib/hooks.js";
+import { isImeComposing } from "../../lib/ime.js";
+import { parseShortcut, shortcutHint, shortcutMatches } from "../../lib/shortcut.js";
 function SearchInput({
   value: controlledValue,
   defaultValue = "",
@@ -23,9 +25,12 @@ function SearchInput({
   disabled = false,
   status,
   variant,
+  shortcut = false,
   ...ariaProps
 }) {
   const { t } = useTranslation();
+  const inputRef = React.useRef(null);
+  const shortcutSpec = React.useMemo(() => parseShortcut(shortcut), [shortcut]);
   const isControlled = controlledValue !== void 0;
   const [internal, setInternal] = React.useState(defaultValue);
   const value = isControlled ? controlledValue : internal;
@@ -48,6 +53,17 @@ function SearchInput({
     lastSearch.current = debounced;
     onSearchRef.current?.(debounced);
   }, [debounced]);
+  React.useEffect(() => {
+    if (!shortcutSpec || disabled) return;
+    const handleKeyDown = (event) => {
+      if (isImeComposing(event) || !shortcutMatches(shortcutSpec, event)) return;
+      event.preventDefault();
+      inputRef.current?.focus();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [shortcutSpec, disabled]);
+  const showShortcut = Boolean(shortcutSpec && !value && !disabled);
   const setValue = (v) => {
     if (!isControlled) setInternal(v);
     onValueChange?.(v);
@@ -59,6 +75,7 @@ function SearchInput({
       /* @__PURE__ */ jsx(
         Input,
         {
+          ref: inputRef,
           id: inputId,
           type: "text",
           role: "searchbox",
@@ -78,7 +95,9 @@ function SearchInput({
           variant,
           ...fieldA11y,
           className: cn(
-            "ui-search-input-control !ps-[var(--search-input-start-padding)] !pe-[var(--search-input-end-padding)]",
+            "ui-search-input-control !ps-[var(--search-input-start-padding)]",
+            // gh#1250 — while the key cap shows, the text stops before it instead of running under it.
+            showShortcut ? "!pe-[calc(var(--search-input-edge-inset)+6ch)]" : "!pe-[var(--search-input-end-padding)]",
             inputClassName
           ),
           disabled
@@ -95,7 +114,8 @@ function SearchInput({
           className: "ui-search-input-clear",
           children: /* @__PURE__ */ jsx(X, {})
         }
-      )
+      ),
+      showShortcut && shortcutSpec ? /* @__PURE__ */ jsx("kbd", { className: "kbd ui-search-input-shortcut", "aria-hidden": "true", children: shortcutHint(shortcutSpec) }) : null
     ] })
   ] });
 }

package/dist/components/data-entry/search-select.js

@@ -16,6 +16,8 @@ import {
 } from "./control-surface.js";
 import { normalizeSelectOptions } from "../../lib/select-options.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
+import { Button } from "../general/button.js";
+import { Flex } from "../layout/flex.js";
 import { Command, CommandGroup } from "./command.js";
 import { Input } from "./input.js";
 const DEBOUNCE_MS = 250;
@@ -97,6 +99,8 @@ function SearchSelect(props) {
   const allowCreate = props.mode !== void 0 ? props.allowCreate : void 0;
   const createLabel = props.mode !== void 0 ? props.createLabel : void 0;
   const onCreate = props.mode !== void 0 ? props.onCreate : void 0;
+  const needConfirm = props.mode !== void 0 ? Boolean(props.needConfirm) : false;
+  const [pending, setPending] = React.useState(null);
   const fold = React.useCallback(
     (text) => caseSensitive ? text : text.toLowerCase(),
     [caseSensitive]
@@ -125,6 +129,7 @@ function SearchSelect(props) {
   const setOpen = React.useCallback(
     (next) => {
       if (!isOpenControlled) setInternalOpen(next);
+      if (!next) setPending(null);
       onOpenChange?.(next);
     },
     [isOpenControlled, onOpenChange]
@@ -158,8 +163,10 @@ function SearchSelect(props) {
     if (!multiple) return [];
     return Array.isArray(rawValue) ? rawValue : rawValue ? [rawValue] : [];
   }, [multiple, rawValue]);
+  const drafting = needConfirm && open;
+  const working = drafting ? pending ?? values : values;
   const value = multiple ? "" : Array.isArray(rawValue) ? rawValue[0] ?? "" : rawValue;
-  const isSelected = (optionValue) => multiple ? values.includes(optionValue) : value === optionValue;
+  const isSelected = (optionValue) => multiple ? working.includes(optionValue) : value === optionValue;
   const hasSelection = multiple ? values.length > 0 : Boolean(value);
   const reqId = React.useRef(0);
   const [freshPage, setFreshPage] = React.useState(0);
@@ -220,7 +227,7 @@ function SearchSelect(props) {
     if (!tagsMode) return { displayOptions: loaded, createOption: void 0 };
     const known = new Set(loaded.map((option) => option.value));
     const extras = [];
-    for (const entry of values) {
+    for (const entry of working) {
       if (known.has(entry)) continue;
       known.add(entry);
       const held = pickedOptions[entry] ?? { value: entry, label: entry };
@@ -232,7 +239,7 @@ function SearchSelect(props) {
     );
     const create = typedText && !exists && canCreate(typedText) ? { value: typedText, label: typedText } : void 0;
     const exact = typedText ? loaded.find(
-      (option) => !values.includes(option.value) && (fold(option.value) === typed || fold(option.label) === typed)
+      (option) => !working.includes(option.value) && (fold(option.value) === typed || fold(option.label) === typed)
     ) : void 0;
     const rest = exact ? loaded.filter((option) => option !== exact) : loaded;
     return {
@@ -242,7 +249,7 @@ function SearchSelect(props) {
   }, [
     tagsMode,
     loaded,
-    values,
+    working,
     typedText,
     pickedOptions,
     staticOptions,
@@ -302,16 +309,23 @@ function SearchSelect(props) {
     props.mode !== void 0 ? props.maxTagPlaceholder : void 0
   );
   const maxCount = props.mode !== void 0 ? props.maxCount : void 0;
-  const atMaxCount = maxCount !== void 0 && values.length >= maxCount;
+  const atMaxCount = maxCount !== void 0 && working.length >= maxCount;
   const remember = (option) => setPickedOptions((prev) => ({ ...prev, [option.value]: option }));
   const isInvented = (entry) => tagsMode && !(staticOptions ?? []).some((option) => option.value === entry) && !loaded.some((option) => option.value === entry);
-  const select = (option) => {
+  const select = (option, { commit = false } = {}) => {
     if (option.disabled) return;
     if (props.mode !== void 0) {
-      const already = values.includes(option.value);
-      if (!already && atMaxCount) return;
-      const next = already ? values.filter((entry) => entry !== option.value) : [...values, option.value];
+      const toDraft = drafting && !commit;
+      const base = toDraft ? working : values;
+      const already = base.includes(option.value);
+      if (!already && maxCount !== void 0 && base.length >= maxCount) return;
+      const next = already ? base.filter((entry) => entry !== option.value) : [...base, option.value];
       remember(option);
+      if (toDraft) {
+        setPending(next);
+        if (autoClearSearchValue) setQuery("");
+        return;
+      }
       if (!isControlled) setInternalValue(next);
       props.onValueChange?.(
         next,
@@ -334,7 +348,7 @@ function SearchSelect(props) {
   };
   const selectTokens = (text) => {
     if (props.mode === void 0) return;
-    const next = [...values];
+    const next = [...working];
     const picked = [];
     for (const raw of splitByTokenSeparators(text, tokenSeparators ?? [])) {
       const token = raw.trim();
@@ -351,6 +365,10 @@ function SearchSelect(props) {
     }
     if (picked.length === 0) return;
     for (const option of picked) remember(option);
+    if (drafting) {
+      setPending(next);
+      return;
+    }
     if (!isControlled) setInternalValue(next);
     props.onValueChange?.(
       next,
@@ -362,7 +380,19 @@ function SearchSelect(props) {
     }
   };
   const deselect = (chipValue) => {
-    select(optionFor(chipValue) ?? { value: chipValue, label: chipValue });
+    select(optionFor(chipValue) ?? { value: chipValue, label: chipValue }, { commit: true });
+  };
+  const confirm = () => {
+    if (props.mode !== void 0) {
+      const next = working;
+      if (!isControlled) setInternalValue(next);
+      props.onValueChange?.(
+        next,
+        next.map(optionFor).filter((entry) => entry !== null)
+      );
+    }
+    if (autoClearSearchValue) setQuery("");
+    setOpen(false);
   };
   const clear = () => {
     if (props.mode !== void 0) {
@@ -458,8 +488,11 @@ function SearchSelect(props) {
       // order and make that token dead. Same reasoning as SelectTrigger.
       width === "auto" && "w-auto",
       width === "full" && "w-full",
-      // Reserve trailing room for the single clear-or-chevron overlay rendered below.
-      "ui-control-trigger-affixed"
+      // Reserve trailing room for the single clear-or-chevron overlay rendered below — only when
+      // something can sit there. `suffixIcon={null}` with no clear and no loading renders an empty
+      // overlay, and reserving the chevron's room anyway left a dead 2.25rem gap at the end of a
+      // `width="auto"` trigger (gh#1257).
+      (loadingProp || clearControl.enabled || suffixIcon !== null) && "ui-control-trigger-affixed"
     )
   };
   const chipsRemovable = !disabled && !readOnly;
@@ -713,6 +746,28 @@ function SearchSelect(props) {
                       }
                     })
                   }
+                ) : null,
+                needConfirm ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "ui-search-select-footer",
+                    "data-slot": "search-select-confirm",
+                    onKeyDown: (event) => event.stopPropagation(),
+                    children: /* @__PURE__ */ jsxs(Flex, { justify: "end", gap: "sm", children: [
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "button",
+                          variant: "ghost",
+                          size: "sm",
+                          disabled: working.length === 0,
+                          onClick: () => setPending([]),
+                          children: t("common.clear")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: confirm, children: t("dataEntry.timePicker.confirm") })
+                    ] })
+                  }
                 ) : null
               ] }) })
             }

package/dist/components/data-entry/toggle.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | "soft" | null | undefined;
+    variant?: "default" | "outline" | "quiet" | "soft" | null | undefined;
     size?: "lg" | "md" | "sm" | "xs" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -78,7 +78,7 @@ declare function restoreDomProps<P extends {
 export type ToggleProp = React.ComponentPropsWithoutRef<"button"> & TogglePressedFields & VariantProps<typeof toggleVariants> & ToggleCountFields;
 export type ToggleProps = ToggleProp;
 export declare const Toggle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & TogglePressedFields & VariantProps<(props?: ({
-    variant?: "default" | "outline" | "soft" | null | undefined;
+    variant?: "default" | "outline" | "quiet" | "soft" | null | undefined;
     size?: "lg" | "md" | "sm" | "xs" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & ToggleCountFields & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/data-entry/toggle.js

@@ -18,7 +18,11 @@ const toggleVariants = cva("ui-toggle", {
       // no pressed state at all. `soft` is antd `Tag`'s resting surface, on the SAME
       // `hsl(var(--secondary))` fill `Badge variant="secondary"` and `Button variant="secondary"`
       // already paint, so a chip, a badge and a button on one row are one family.
-      soft: "ui-toggle-soft"
+      soft: "ui-toggle-soft",
+      // A LOW-KEY pressed state (gh#1257): the `default` rest, and pressed as a --secondary fill with
+      // --foreground text and the primary hairline instead of a solid primary block — for a comment
+      // star or a reaction, where a pressed toggle is a mark beside content, not a selected filter.
+      quiet: "ui-toggle-quiet"
     },
     size: {
       // The fourth step of the shared control ladder (gh#716): 24px, `--control-height-xs`, the

package/dist/components/feedback/sonner.d.ts

@@ -1,10 +1,16 @@
 import * as React from "react";
 import { type ToasterProps } from "sonner";
+/**
+ * `--toast-duration` → milliseconds for Sonner's `duration` (gh#1253). Accepts the two CSS time
+ * units; anything else (unset, `initial`, a typo) is `undefined`, which leaves Sonner's own
+ * 4000ms default in charge rather than inventing a second one here.
+ */
+export declare function parseToastDuration(raw: string): number | undefined;
 /**
  * `richColors` defaults ON: it is the switch that makes sonner apply the per-type properties at
  * all (`[data-rich-colors='true'][data-type='success'] { … }`), so without it the tokens above
  * are declared and never read. A consumer can still pass `richColors={false}` for a deliberately
  * monochrome stack.
  */
-declare function Toaster({ style, richColors, ...props }: ToasterProps): React.JSX.Element;
+declare function Toaster({ style, richColors, toastOptions, ...props }: ToasterProps): React.JSX.Element;
 export { Toaster };

package/dist/components/feedback/sonner.js

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { CheckCircle2, Info, Loader2, OctagonX, TriangleAlert } from "lucide-react";
 import { Toaster as Sonner } from "sonner";
 import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
+import { useTranslation } from "../../i18n/use-translation.js";
 function useDocumentTheme() {
   return React.useSyncExternalStore(
     (onStoreChange) => {
@@ -25,6 +26,20 @@ function useDocumentTheme() {
     () => "light"
   );
 }
+function parseToastDuration(raw) {
+  const match = /^\s*(\d+(?:\.\d+)?)(ms|s)\s*$/.exec(raw);
+  if (!match) return void 0;
+  const ms = Number(match[1]) * (match[2] === "s" ? 1e3 : 1);
+  return ms > 0 ? ms : void 0;
+}
+function useToastDurationToken(host) {
+  const [duration, setDuration] = React.useState(void 0);
+  React.useEffect(() => {
+    const element = host ?? document.documentElement;
+    setDuration(parseToastDuration(getComputedStyle(element).getPropertyValue("--toast-duration")));
+  }, [host]);
+  return duration;
+}
 const TOAST_TONES = [
   { type: "success", hue: "success", ink: "text-success" },
   { type: "error", hue: "destructive", ink: "text-error" },
@@ -45,9 +60,11 @@ const toneVars = Object.fromEntries(
     [`--${type}-text`, `hsl(var(--${ink}))`]
   ])
 );
-function Toaster({ style, richColors = true, ...props }) {
+function Toaster({ style, richColors = true, toastOptions, ...props }) {
   const theme = useDocumentTheme();
+  const { t } = useTranslation();
   const overlayPortalContainer = useOverlayPortalContainer();
+  const tokenDuration = useToastDurationToken(overlayPortalContainer);
   const toaster = /* @__PURE__ */ jsx(
     Sonner,
     {
@@ -86,11 +103,14 @@ function Toaster({ style, richColors = true, ...props }) {
         bottom: "var(--toast-mobile-offset)",
         right: "var(--toast-mobile-offset)"
       },
+      duration: tokenDuration,
+      toastOptions: { closeButtonAriaLabel: t("feedback.toast.close"), ...toastOptions },
       ...props
     }
   );
   return overlayPortalContainer ? createPortal(toaster, overlayPortalContainer) : toaster;
 }
 export {
-  Toaster
+  Toaster,
+  parseToastDuration
 };

package/dist/components/feedback/use-toast.d.ts

@@ -1,3 +1,5 @@
 import { toast as sonnerToast } from "sonner";
+type SonnerToast = typeof sonnerToast;
+declare const toast: SonnerToast;
 export type { ExternalToast } from "sonner";
-export { sonnerToast, sonnerToast as toast };
+export { sonnerToast, toast };

package/dist/components/feedback/use-toast.js

@@ -1,6 +1,15 @@
 "use client";
 import { toast as sonnerToast } from "sonner";
+const withCloseButton = (show) => (message, data) => show(message, { closeButton: true, ...data });
+const toast = Object.assign(
+  (...args) => sonnerToast(...args),
+  sonnerToast,
+  {
+    error: withCloseButton(sonnerToast.error),
+    warning: withCloseButton(sonnerToast.warning)
+  }
+);
 export {
   sonnerToast,
-  sonnerToast as toast
+  toast
 };

package/dist/components/navigation/dropdown-menu.d.ts

@@ -154,6 +154,12 @@ interface DropdownMenuItemPropsOwn {
     disabled?: boolean;
     onSelect?: (event: Event) => void;
     textValue?: string;
+    /**
+     * A second, muted line under the label — the two-line row (gh#1246, parity with
+     * `MegaMenuLinkProp.description`). Rendered as RAC `<Text slot="description">`, so the item's
+     * accessible NAME stays the label and the description is wired as its `aria-describedby`.
+     */
+    description?: React.ReactNode;
     /** Mượn thẻ của con thay vì dựng `<div>` riêng — chỗ để nhét một `<Link>` vào một mục menu. */
     asChild?: boolean;
     /**
@@ -170,7 +176,7 @@ interface DropdownMenuItemPropsOwn {
     id?: string;
 }
 type DropdownMenuItemProps = React.PropsWithChildren<DropdownMenuItemPropsOwn> & Record<`data-${string}`, unknown>;
-export declare function DropdownMenuItem({ children, className, inset, variant, disabled, onSelect, textValue, asChild, ...forwarded }: DropdownMenuItemProps): React.JSX.Element;
+export declare function DropdownMenuItem({ children, className, inset, variant, disabled, onSelect, textValue, description, asChild, ...forwarded }: DropdownMenuItemProps): React.JSX.Element;
 interface DropdownMenuLabelPropsOwn {
     className?: string;
     inset?: boolean;

package/dist/components/navigation/dropdown-menu.js

@@ -16,6 +16,7 @@ import {
   Separator,
   OverlayArrow,
   SubmenuTrigger,
+  Text,
   useLocale
 } from "react-aria-components";
 import { Check, ChevronRight } from "lucide-react";
@@ -397,15 +398,18 @@ function DropdownMenuItem({
   disabled,
   onSelect,
   textValue,
+  description,
   asChild,
   ...forwarded
 }) {
   const tag = borrowedTag(children, asChild);
+  const label = tag ? tag.props.children : children;
+  const hasDescription = description != null && description !== false;
   return /* @__PURE__ */ jsx(
     MenuItem,
     {
       isDisabled: disabled,
-      textValue,
+      textValue: textValue ?? (typeof label === "string" ? label : void 0),
       onAction: onSelect ? () => onSelect(selectEvent("dropdownmenu.itemSelect")) : void 0,
       className: cn(
         "ui-dropdown-menu-item [&_svg:not([class*='text-'])]:text-muted-foreground",
@@ -420,6 +424,7 @@ function DropdownMenuItem({
             "data-slot": "dropdown-menu-item",
             "data-inset": inset,
             "data-variant": variant,
+            "data-description": hasDescription ? "" : void 0,
             ...radixItemState(state),
             // LAST, so a consumer's own `id`/`data-*` wins over ours rather than being
             // overwritten by the slot bookkeeping above (gh#631).
@@ -428,7 +433,18 @@ function DropdownMenuItem({
           content
         );
       },
-      children: tag ? tag.props.children : children
+      children: hasDescription ? /* @__PURE__ */ jsxs("span", { className: "ui-dropdown-menu-item-text", children: [
+        /* @__PURE__ */ jsx(Text, { slot: "label", className: "ui-dropdown-menu-item-label", children: label }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            slot: "description",
+            "data-slot": "dropdown-menu-item-description",
+            className: "ui-dropdown-menu-item-description",
+            children: description
+          }
+        )
+      ] }) : label
     }
   );
 }

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "32.0.5",
+  "version": "32.1.1",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -14,6 +14,7 @@
     "previous": "Previous",
     "next": "Next",
     "selectedCount": "{count} selected",
+    "selectedOfTotal": "{count} of {total} selected",
     "typeToConfirm": "Type {phrase} to confirm"
   },
   "dataEntry": {
@@ -32,7 +33,13 @@
       "placeholder": "Select date range",
       "from": "From",
       "to": "To",
-      "openCalendar": "Open calendar"
+      "openCalendar": "Open calendar",
+      "selectEnd": "Select end date",
+      "days": {
+        "one": "{count} day",
+        "other": "{count} days"
+      },
+      "summary": "{range} · {days}"
     },
     "timePicker": {
       "placeholder": "Select time",
@@ -50,6 +57,10 @@
     "searchInput": {
       "placeholder": "Search…"
     },
+    "commandPalette": {
+      "recent": "Recent searches",
+      "clearRecent": "Clear recent searches"
+    },
     "autocomplete": {
       "placeholder": "Search or select…",
       "empty": "No results found"
@@ -241,10 +252,14 @@
       "dropped": "Dropped {label} at position {position} of {count}.",
       "cancelled": "Move cancelled. {label} is back at position {position} of {count}."
     },
+    "checkboxGroup": {
+      "selectAll": "Select all"
+    },
     "passwordStrength": {
       "weak": "Weak",
       "fair": "Fair",
       "strong": "Strong",
+      "empty": "Enter a password",
       "meter": "Password strength {score} of 4",
       "passed": "Passed: ",
       "failed": "Not yet: ",
@@ -267,6 +282,9 @@
       "dismiss": "Dismiss",
       "verifying": "Verifying…",
       "stepUpFailed": "Re-authentication failed. Please try again."
+    },
+    "toast": {
+      "close": "Close notification"
     }
   },
   "layout": {