@godxjp/ui 31.31.8 → 32.0.0

package/dist/app/settings-scope.d.ts

@@ -0,0 +1,54 @@
+import type { Locale } from "date-fns";
+import type { AppDateFormat, AppLocale, AppRequestHeaders, AppTimeFormat, AppTimezone } from "./types.js";
+/**
+ * THE PER-REQUEST HOME OF EVERYTHING A NON-REACT CALLER READS (v32, gh#1219).
+ *
+ * Locale, timezone, the date/time formats and the request headers used to be three module-level
+ * variables (`translate.ts`, `request-headers.ts`, `lib/datetime/sync.ts`). In a browser that is
+ * one user and harmless. On a server it is every request at once: the last `AppProvider` to render
+ * wrote them, so a `translateCurrent` / `formatDate` / `getAppRequestHeaders` call in request A
+ * answered with request B's language and zone — measured in `ssr-request-isolation.test.tsx`.
+ *
+ * Now each of those modules keeps its slot in ONE `AppSettingsState` object, and which object is
+ * "current" depends on where the call runs:
+ *
+ * 1. inside `runWithAppSettings(settings, fn)` → that call's own object. On a server it is carried
+ *    by `AsyncLocalStorage`, so it survives every `await` inside `fn`; where no AsyncLocalStorage
+ *    exists it covers the synchronous part of `fn` only.
+ * 2. otherwise → one module-level object, which is the browser's single-user case.
+ *
+ * React components do not need this: they read `AppProvider`'s context, which is per tree by
+ * construction. The scope is for code that has no React context to read.
+ */
+export type AppSettings = {
+    locale: AppLocale;
+    fallbackLocale: AppLocale;
+    timezone: AppTimezone;
+    timeFormat: AppTimeFormat;
+    dateFormat: AppDateFormat;
+};
+/** @internal Each module owns one slot; an unset slot means "nothing chose it — use the default". */
+export type AppSettingsState = {
+    i18n?: Partial<Pick<AppSettings, "locale" | "fallbackLocale">>;
+    datetime?: Partial<Pick<AppSettings, "locale" | "timezone" | "timeFormat" | "dateFormat">> & {
+        dateFnsLocale?: Locale;
+    };
+    headers?: Partial<AppRequestHeaders>;
+};
+/** @internal The state object the current call belongs to. Mutated in place by the `sync*` writers. */
+export declare function getAppSettingsState(): AppSettingsState;
+/**
+ * Run `fn` with its own locale / timezone / format / header state — one call per server request.
+ *
+ * Everything `fn` reaches without a React context (`translateCurrent`, `formatDate` with no
+ * options, `getAppRequestHeaders`, and an `AppProvider` rendered inside it syncing its values for
+ * those callers) reads and writes THIS call's state, never another request's. Unset fields keep
+ * the neutral defaults (`<html lang>`/`en`, UTC on a server, formats from `Intl`).
+ *
+ * ```ts
+ * const html = await runWithAppSettings({ locale: "de", timezone: "Europe/Berlin" }, () =>
+ *   renderToString(<App />),
+ * );
+ * ```
+ */
+export declare function runWithAppSettings<R>(settings: Partial<AppSettings>, fn: () => R): R;

package/dist/app/settings-scope.js

@@ -0,0 +1,46 @@
+function findAsyncLocalStorage() {
+  const g = globalThis;
+  if (typeof g.AsyncLocalStorage === "function") return g.AsyncLocalStorage;
+  const proc = globalThis.process;
+  if (proc && typeof proc.getBuiltinModule === "function") {
+    try {
+      return proc.getBuiltinModule("node:async_hooks")?.AsyncLocalStorage ?? null;
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+let als;
+let syncScope = null;
+const globalState = {};
+function getAppSettingsState() {
+  return als?.getStore() ?? syncScope ?? globalState;
+}
+function definedOnly(value) {
+  const entries = Object.entries(value).filter(([, v]) => v !== void 0);
+  return entries.length > 0 ? Object.fromEntries(entries) : void 0;
+}
+function runWithAppSettings(settings, fn) {
+  const { locale, fallbackLocale, timezone, timeFormat, dateFormat } = settings;
+  const state = {
+    i18n: definedOnly({ locale, fallbackLocale }),
+    datetime: definedOnly({ locale, timezone, timeFormat, dateFormat })
+  };
+  if (als === void 0) {
+    const Ctor = findAsyncLocalStorage();
+    als = Ctor ? new Ctor() : null;
+  }
+  if (als) return als.run(state, fn);
+  const previous = syncScope;
+  syncScope = state;
+  try {
+    return fn();
+  } finally {
+    syncScope = previous;
+  }
+}
+export {
+  getAppSettingsState,
+  runWithAppSettings
+};

package/dist/app/tenant-theme.js

@@ -2,10 +2,15 @@ import { isDevelopment } from "../lib/dev.js";
 const AA_NORMAL_TEXT = 4.5;
 const AA_LARGE_TEXT = 3;
 const STEPS = {
-  darken: { hover: (l) => l - 8.4, active: (l) => l - 15.5 },
+  // Below 12% L the darken steps turn UP (+9.6 / +4.8), above 94% L the lighten steps turn DOWN
+  // (v32, gh#1220): at the ends of the ramp the conventional step had no room and hover vanished.
+  darken: {
+    hover: (l) => l < 12 ? l + 9.6 : l - 8.4,
+    active: (l) => l < 12 ? l + 4.8 : l - 15.5
+  },
   lighten: {
-    hover: (l) => l + 5.8,
-    active: (l) => l > 83.4 ? l - 5.8 : l + 11.6
+    hover: (l) => l > 94 ? l - 5.8 : l + 5.8,
+    active: (l) => l > 94 ? l - 11.6 : l > 83.4 ? l - 5.8 : l + 11.6
   }
 };
 const INK_STEPS = {

package/dist/app/time-format-labels.d.ts

@@ -4,5 +4,8 @@ export declare const APP_TIME_FORMAT_OPTIONS: {
     value: "12h" | "24h";
 }[];
 export declare function getTimeFormatLabel(timeFormat: AppTimeFormat, locale: AppLocale, fallbackLocale?: AppLocale): string;
-/** Suggested default per locale — vi/ja → 24h, en → 12h. */
+/**
+ * Suggested default per locale: the locale's own clock from `Intl`'s hour cycle (v32, gh#1219) —
+ * `h11`/`h12` → 12h, otherwise 24h. vi/ja → 24h and en → 12h, as before; en-GB / de → 24h.
+ */
 export declare function resolveDefaultTimeFormat(locale: AppLocale): AppTimeFormat;

package/dist/app/time-format-labels.js

@@ -1,11 +1,17 @@
 import { APP_TIME_FORMATS } from "./time-formats.js";
 import { translate } from "../i18n/translate.js";
+import { dateTimeFormat } from "../lib/intl-cache.js";
 const APP_TIME_FORMAT_OPTIONS = APP_TIME_FORMATS.map((value) => ({ value }));
 function getTimeFormatLabel(timeFormat, locale, fallbackLocale = "en") {
   return translate(locale, fallbackLocale, `timeFormat.${timeFormat}`);
 }
 function resolveDefaultTimeFormat(locale) {
-  return locale === "en" ? "12h" : "24h";
+  try {
+    const { hourCycle } = dateTimeFormat(locale, { hour: "numeric" }).resolvedOptions();
+    return hourCycle === "h11" || hourCycle === "h12" ? "12h" : "24h";
+  } catch {
+    return "24h";
+  }
 }
 export {
   APP_TIME_FORMAT_OPTIONS,

package/dist/app/types.d.ts

@@ -1,7 +1,14 @@
 import type { AppTimeFormat } from "./time-formats.js";
 import type { AppDateFormat } from "./date-formats.js";
-/** Supported UI locales — sent as `x-locale` to backend. */
-export type AppLocale = "vi" | "en" | "ja";
+/**
+ * A UI locale: any REGISTERED BCP-47 tag (`registerLocale`) — sent as `x-locale` to the backend.
+ *
+ * v32 widened it from the closed union `"vi" | "en" | "ja"` (gh#1219); those three remain
+ * pre-registered and are named by {@link BuiltInLocale}.
+ */
+export type AppLocale = string;
+/** The locales the library ships packs (messages + date adapters) for. */
+export type BuiltInLocale = "vi" | "en" | "ja";
 /** IANA timezone identifier — sent as `x-timezone` to backend. */
 export type AppTimezone = string;
 /** How to resolve the initial timezone when nothing is stored. */
@@ -10,6 +17,7 @@ export type { AppTimeFormat } from "./time-formats.js";
 export type { AppDateFormat } from "./date-formats.js";
 export { APP_TIME_FORMATS, APP_REQUEST_HEADER_TIME_FORMAT, getTimePattern, isAppTimeFormat, } from "./time-formats.js";
 export { APP_DATE_FORMATS, APP_REQUEST_HEADER_DATE_FORMAT, getDatePattern, getDateTimePattern, isAppDateFormat, } from "./date-formats.js";
+/** The built-in locales. For everything registered at runtime, read `getRegisteredLocales()`. */
 export declare const APP_LOCALES: readonly ["vi", "en", "ja"];
 export declare const APP_REQUEST_HEADER_LOCALE: "x-locale";
 export declare const APP_REQUEST_HEADER_TIMEZONE: "x-timezone";

package/dist/app/use-formatting.d.ts

@@ -1,7 +1,7 @@
 import { formatDate, type FormatDateOptions } from "../lib/datetime/index.js";
 /** Date/time formatters bound to the current AppProvider preferences. */
 export declare function useFormatting(): {
-    locale: import("./types.js").AppLocale;
+    locale: string;
     timezone: string;
     timeFormat: import("./time-formats.js").AppTimeFormat;
     dateFormat: import("./date-formats.js").AppDateFormat;

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

@@ -18,7 +18,7 @@ export { Cascader } from "../data-entry/cascader.js";
 export { TreeSelect } from "../data-entry/tree-select.js";
 export { Transfer } from "../data-entry/transfer.js";
 export { Pagination, Steps, Tabs, TabsContent, TabsList, TabsTrigger } from "../navigation/index.js";
-export { Toolbar, ToolbarGroup } from "../navigation/filter-bar.js";
+export { Toolbar, ToolbarGroup } from "../navigation/toolbar.js";
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, AlertDialog, } from "../feedback/dialog.js";
 export { Toaster } from "../feedback/sonner.js";
 export { toast } from "../feedback/use-toast.js";

package/dist/components/admin/index.js

@@ -26,7 +26,7 @@ import { Cascader } from "../data-entry/cascader.js";
 import { TreeSelect } from "../data-entry/tree-select.js";
 import { Transfer } from "../data-entry/transfer.js";
 import { Pagination, Steps, Tabs, TabsContent, TabsList, TabsTrigger } from "../navigation/index.js";
-import { Toolbar, ToolbarGroup } from "../navigation/filter-bar.js";
+import { Toolbar, ToolbarGroup } from "../navigation/toolbar.js";
 import {
   Dialog,
   DialogTrigger,

package/dist/components/data-display/accordion.d.ts

@@ -1 +1,51 @@
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../ui/accordion.js";
+import * as React from "react";
+interface AccordionBaseProps extends Omit<React.ComponentPropsWithRef<"div">, "dir"> {
+    /** Trục xếp mục — đổi cặp phím mũi tên điều hướng. */
+    orientation?: "vertical" | "horizontal";
+    /** Chiều viết; chỉ đổi mũi tên trái/phải khi `orientation="horizontal"`. */
+    dir?: "ltr" | "rtl";
+    /** Khoá mọi mục. */
+    disabled?: boolean;
+}
+interface AccordionSingleProps extends AccordionBaseProps {
+    /** Chỉ một mục mở tại một thời điểm. */
+    type: "single";
+    /** Mục đang mở, có kiểm soát. */
+    value?: string;
+    /** Mục mở ban đầu khi không kiểm soát. */
+    defaultValue?: string;
+    /** Gọi khi mục đang mở đổi; chuỗi rỗng nghĩa là đã đóng hết. */
+    onValueChange?: (value: string) => void;
+    /** Cho phép đóng chính mục đang mở. Mặc định sai, như Radix. */
+    collapsible?: boolean;
+}
+interface AccordionMultipleProps extends AccordionBaseProps {
+    /** Nhiều mục mở độc lập. */
+    type: "multiple";
+    /** Các mục đang mở, có kiểm soát. */
+    value?: string[];
+    /** Các mục mở ban đầu khi không kiểm soát. */
+    defaultValue?: string[];
+    /** Gọi khi tập mục đang mở đổi. */
+    onValueChange?: (value: string[]) => void;
+}
+type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+export declare function Accordion(accordionProps: AccordionProps): React.JSX.Element;
+interface AccordionItemProps extends React.ComponentPropsWithRef<"div"> {
+    /** Khoá riêng mục này. */
+    disabled?: boolean;
+    /** Khoá định danh của mục — khớp với `value` của `Accordion`. */
+    value: string;
+}
+export declare function AccordionItem({ className, disabled, value, children, ref, ...props }: AccordionItemProps): React.JSX.Element;
+interface AccordionTriggerProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
+export declare function AccordionTrigger({ asChild, className, children, onClick, ...props }: AccordionTriggerProps): React.JSX.Element;
+interface AccordionContentProps extends React.ComponentPropsWithRef<"div"> {
+    /** Giữ nội dung trong DOM cả khi đóng. */
+    forceMount?: true;
+}
+export declare function AccordionContent({ className, forceMount, children, ref, ...props }: AccordionContentProps): React.JSX.Element;
+export {};

package/dist/components/data-display/accordion.js

@@ -1,5 +1,251 @@
 "use client";
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../ui/accordion.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { chain, mergeRefs } from "@react-aria/utils";
+import {
+  ButtonContext,
+  Disclosure,
+  DisclosureGroup,
+  DisclosureGroupStateContext,
+  DisclosurePanel,
+  DisclosureStateContext,
+  useSlottedContext
+} from "react-aria-components";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Slot } from "../../lib/slot.js";
+const AccordionGroupContext = React.createContext({
+  orientation: "vertical"
+});
+const AccordionItemContext = React.createContext(null);
+function useAccordionItem(component) {
+  const item = React.useContext(AccordionItemContext);
+  const state = React.useContext(DisclosureStateContext);
+  if (!item || !state) {
+    throw new Error(`\`${component}\` ph\u1EA3i n\u1EB1m trong \`AccordionItem\`.`);
+  }
+  return { item, state };
+}
+const TRIGGER_SELECTOR = '[data-slot="accordion-trigger"]:not([disabled])';
+function toArray(value) {
+  if (value === void 0) {
+    return [];
+  }
+  return Array.isArray(value) ? value : [value];
+}
+function Accordion(accordionProps) {
+  const {
+    type,
+    value,
+    defaultValue,
+    onValueChange,
+    collapsible,
+    orientation = "vertical",
+    dir,
+    disabled,
+    onKeyDown,
+    children,
+    ref,
+    ...props
+  } = accordionProps;
+  const [uncontrolled, setUncontrolled] = React.useState(() => toArray(defaultValue));
+  const isControlled = value !== void 0;
+  const expandedKeys = new Set(isControlled ? toArray(value) : uncontrolled);
+  function handleExpandedChange(keys) {
+    const next = [...keys].map(String);
+    if (type === "single" && !collapsible && next.length === 0) {
+      return;
+    }
+    if (!isControlled) {
+      setUncontrolled(next);
+    }
+    onValueChange?.(type === "multiple" ? next : next[0] ?? "");
+  }
+  function moveFocus(event) {
+    const from = event.target.closest?.(TRIGGER_SELECTOR);
+    if (!from) {
+      return;
+    }
+    const horizontal = orientation === "horizontal";
+    const forward = horizontal ? dir === "rtl" ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+    const backward = horizontal ? dir === "rtl" ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+    const triggers = [...event.currentTarget.querySelectorAll(TRIGGER_SELECTOR)];
+    const at = triggers.indexOf(from);
+    if (at < 0) {
+      return;
+    }
+    let to;
+    if (event.key === forward) {
+      to = (at + 1) % triggers.length;
+    } else if (event.key === backward) {
+      to = (at - 1 + triggers.length) % triggers.length;
+    } else if (event.key === "Home") {
+      to = 0;
+    } else if (event.key === "End") {
+      to = triggers.length - 1;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    triggers[to].focus();
+  }
+  return /* @__PURE__ */ jsx(
+    DisclosureGroup,
+    {
+      allowsMultipleExpanded: type === "multiple",
+      expandedKeys,
+      onExpandedChange: handleExpandedChange,
+      isDisabled: disabled,
+      render: (racProps) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            dir,
+            "data-orientation": orientation,
+            onKeyDown: chain(onKeyDown, moveFocus)
+          }
+        );
+      },
+      children: /* @__PURE__ */ jsx(AccordionGroupContext.Provider, { value: { orientation }, children })
+    }
+  );
+}
+function AccordionItem({
+  className,
+  disabled,
+  value,
+  children,
+  ref,
+  ...props
+}) {
+  const { orientation } = React.useContext(AccordionGroupContext);
+  const groupState = React.useContext(DisclosureGroupStateContext);
+  const isDisabled = Boolean(disabled || groupState?.isDisabled);
+  return /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      id: value,
+      isDisabled,
+      render: (racProps, { isExpanded }) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "accordion-item",
+            className: cn("ui-accordion-item", className),
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            "data-state": isExpanded ? "open" : "closed",
+            "data-disabled": isDisabled ? "" : void 0,
+            "data-orientation": orientation,
+            children: /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { orientation, isDisabled }, children })
+          }
+        );
+      }
+    }
+  );
+}
+function AccordionTrigger({
+  asChild,
+  className,
+  children,
+  onClick,
+  ...props
+}) {
+  const { item, state } = useAccordionItem("AccordionTrigger");
+  const trigger = useSlottedContext(ButtonContext, "trigger");
+  const Comp = asChild ? Slot : "button";
+  const dataState = state.isExpanded ? "open" : "closed";
+  const dataDisabled = item.isDisabled ? "" : void 0;
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: "ui-accordion-header",
+      "data-orientation": item.orientation,
+      "data-state": dataState,
+      "data-disabled": dataDisabled,
+      children: /* @__PURE__ */ jsxs(
+        Comp,
+        {
+          type: "button",
+          id: trigger?.id,
+          "aria-controls": state.isExpanded ? trigger?.["aria-controls"] : void 0,
+          "aria-expanded": state.isExpanded,
+          "data-slot": "accordion-trigger",
+          "data-state": dataState,
+          "data-disabled": dataDisabled,
+          "data-orientation": item.orientation,
+          disabled: item.isDisabled,
+          className: cn("ui-accordion-trigger", className),
+          ...props,
+          onClick: chain(onClick, () => {
+            if (!item.isDisabled) {
+              state.toggle();
+            }
+          }),
+          children: [
+            children,
+            /* @__PURE__ */ jsx(ChevronDown, { className: "ui-accordion-chevron", "aria-hidden": "true" })
+          ]
+        }
+      )
+    }
+  );
+}
+function AccordionContent({
+  className,
+  forceMount,
+  children,
+  ref,
+  ...props
+}) {
+  const { item, state } = useAccordionItem("AccordionContent");
+  return /* @__PURE__ */ jsx(
+    DisclosurePanel,
+    {
+      role: "region",
+      render: (racProps) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          children: _racChildren,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "accordion-content",
+            className: cn("ui-accordion-content", className),
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            "data-state": state.isExpanded ? "open" : "closed",
+            "data-disabled": item.isDisabled ? "" : void 0,
+            "data-orientation": item.orientation,
+            children: state.isExpanded || forceMount ? /* @__PURE__ */ jsx("div", { className: "ui-accordion-content-inner", children }) : null
+          }
+        );
+      },
+      children: null
+    }
+  );
+}
 export {
   Accordion,
   AccordionContent,

package/dist/components/data-display/avatar.d.ts

@@ -1 +1,16 @@
-export { Avatar, AvatarImage, AvatarFallback } from "../ui/avatar.js";
+import * as React from "react";
+import { type ImageLoadingStatus } from "../../lib/image-loading-status.js";
+import type { AvatarImageFitProp, AvatarProp } from "../../props/components/data-display.prop.js";
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    asChild?: boolean;
+} & Pick<AvatarProp, "appearance" | "presence" | "presenceLabel" | "shape" | "size"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    asChild?: boolean;
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+    /** `cover` (default) crops to fill; `contain` shows a logo or app icon whole (gh#1176). */
+    fit?: AvatarImageFitProp;
+} & React.RefAttributes<HTMLImageElement>>;
+export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    asChild?: boolean;
+    delayMs?: number;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/data-display/avatar.js

@@ -1,5 +1,113 @@
 "use client";
-import { Avatar, AvatarImage, AvatarFallback } from "../ui/avatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffectEvent, useLayoutEffect } from "@react-aria/utils";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useImageLoadingStatus } from "../../lib/image-loading-status.js";
+import { Slot } from "../../lib/slot.js";
+import { cn } from "../../lib/utils.js";
+const AvatarContext = React.createContext(null);
+function useAvatarContext(part) {
+  const context = React.useContext(AvatarContext);
+  if (context === null) {
+    throw new Error(`\`${part}\` must be used within \`Avatar\``);
+  }
+  return context;
+}
+const Avatar = React.forwardRef(
+  ({
+    className,
+    shape = "circle",
+    size = "md",
+    appearance = "default",
+    presence,
+    presenceLabel,
+    asChild = false,
+    children,
+    ...props
+  }, ref) => {
+    const { t } = useTranslation();
+    const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
+    const context = React.useMemo(
+      () => ({ imageLoadingStatus, setImageLoadingStatus }),
+      [imageLoadingStatus]
+    );
+    const Comp = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        "data-slot": "avatar",
+        "data-shape": shape === "square" ? "square" : void 0,
+        "data-size": size === "md" ? void 0 : size,
+        "data-appearance": appearance === "tinted" ? "tinted" : void 0,
+        "data-presence": presence,
+        className: cn("ui-avatar", className),
+        ...props,
+        children: [
+          children,
+          presence !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "avatar-presence", "data-presence": presence, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: presenceLabel ?? t(`dataDisplay.avatar.presence.${presence}`) }) }) : null
+        ]
+      }
+    ) });
+  }
+);
+Avatar.displayName = "Avatar";
+const AvatarImage = React.forwardRef(({ className, src, onLoadingStatusChange, asChild = false, fit, ...props }, ref) => {
+  const { imageLoadingStatus, setImageLoadingStatus } = useAvatarContext("AvatarImage");
+  const status = useImageLoadingStatus(src, {
+    referrerPolicy: props.referrerPolicy,
+    crossOrigin: props.crossOrigin,
+    loadingStatus: imageLoadingStatus,
+    setLoadingStatus: setImageLoadingStatus
+  });
+  const handleLoadingStatusChange = useEffectEvent((next) => {
+    onLoadingStatusChange?.(next);
+  });
+  const previousStatus = React.useRef(status);
+  useLayoutEffect(() => {
+    const previous = previousStatus.current;
+    previousStatus.current = status;
+    if (status !== previous) {
+      handleLoadingStatusChange(status);
+    }
+  }, [status]);
+  const Comp = asChild ? Slot : "img";
+  return status === "loaded" ? /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "avatar-image",
+      "data-fit": fit === "contain" ? "contain" : void 0,
+      className: cn("ui-avatar-image", className),
+      ...props,
+      src
+    }
+  ) : null;
+});
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = React.forwardRef(({ className, delayMs, asChild = false, ...props }, ref) => {
+  const { imageLoadingStatus } = useAvatarContext("AvatarFallback");
+  const [canRender, setCanRender] = React.useState(delayMs === void 0);
+  React.useEffect(() => {
+    if (delayMs === void 0) {
+      return;
+    }
+    const timerId = window.setTimeout(() => setCanRender(true), delayMs);
+    return () => window.clearTimeout(timerId);
+  }, [delayMs]);
+  const Comp = asChild ? Slot : "span";
+  return canRender && imageLoadingStatus !== "loaded" ? /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "avatar-fallback",
+      className: cn("ui-avatar-fallback", className),
+      ...props
+    }
+  ) : null;
+});
+AvatarFallback.displayName = "AvatarFallback";
 export {
   Avatar,
   AvatarFallback,

package/dist/components/data-display/credential-reveal.d.ts

@@ -1,2 +1,9 @@
-export { CredentialReveal } from "../ui/credential-reveal.js";
-export type { CredentialRevealProp, CredentialRevealProps, CredentialRevealTone, } from "../ui/credential-reveal.js";
+import * as React from "react";
+import type { CredentialRevealProp } from "../../props/components/data-display.prop.js";
+export type { CredentialRevealProp, CredentialRevealProp as CredentialRevealProps, CredentialRevealTone, } from "../../props/components/data-display.prop.js";
+/**
+ * CredentialReveal — one-time secret surface (device credential / API key / service-account
+ * secret). Masked by default with a show/hide toggle, a copy button that confirms the copy, an
+ * optional download, and an optional acknowledge action to pair with a Dialog.
+ */
+export declare const CredentialReveal: React.ForwardRefExoticComponent<CredentialRevealProp & React.RefAttributes<HTMLDivElement>>;