@godxjp/ui 23.0.0 → 23.2.0

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

@@ -1,8 +1,20 @@
 import type { AppLocale } from "./types.js";
 import type { AppDateFormat } from "./date-formats.js";
 export declare const APP_DATE_FORMAT_OPTIONS: {
-    value: "dmy" | "iso" | "mdy";
+    value: "dmy" | "iso" | "mdy" | "ymd";
 }[];
 export declare function getDateFormatLabel(dateFormat: AppDateFormat, locale: AppLocale, fallbackLocale?: AppLocale): string;
-/** Suggested default per locale — vi → dmy, ja → iso, en → mdy. */
+/**
+ * Suggested default per locale — vi → dmy, ja → ymd, en → mdy.
+ *
+ * `ja` used to be `iso` (`yyyy-MM-dd`). Nothing recorded a reason for it, and it is not the form a
+ * Japanese business document is written in: those use `YYYY/MM/DD` (or `YYYY年MM月DD日`). The cost
+ * of the old default was measured in a consumer — gino-cloud shipped its own date formatter as an
+ * explicit stopgap purely to get the slashes, which is the package's own rule 1 broken by the
+ * package's own default.
+ *
+ * ONLY THE DEFAULT MOVES. A stored preference still wins (see `resolveDateFormat` in
+ * app-provider.tsx), a service can pin any value through `defaultDateFormat`, and `iso` is still
+ * one keystroke away in `DateFormatPicker`.
+ */
 export declare function resolveDefaultDateFormat(locale: AppLocale): AppDateFormat;

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

@@ -6,7 +6,7 @@ function getDateFormatLabel(dateFormat, locale, fallbackLocale = "en") {
 }
 function resolveDefaultDateFormat(locale) {
   if (locale === "en") return "mdy";
-  if (locale === "ja") return "iso";
+  if (locale === "ja") return "ymd";
   return "dmy";
 }
 export {

package/dist/app/date-formats.d.ts

@@ -1,7 +1,19 @@
 /** Date-only display preset — sent as `x-date-format` to backend. */
 import { type AppTimeFormat } from "./time-formats.js";
-export type AppDateFormat = "iso" | "dmy" | "mdy";
-export declare const APP_DATE_FORMATS: readonly ["iso", "dmy", "mdy"];
+export type AppDateFormat = "iso" | "ymd" | "dmy" | "mdy";
+/**
+ * `ymd` (`yyyy/MM/dd`) IS THE JAPANESE BUSINESS FORM, AND ITS ABSENCE WAS A HOLE WITH NO WAY OUT.
+ *
+ * The axis shipped three values and none of them said `2026/05/01`: `iso` writes hyphens, and the
+ * two slash forms put the day or the month first. A Japanese-first consumer (gino-cloud) therefore
+ * wrote its own formatter and marked it an explicit stopgap — the tell that a named axis was
+ * missing a value rather than the consumer wanting something exotic, since the only alternative
+ * the package left was the thing docs/DATETIME.md rule 1 forbids ("never use date-fns/format,
+ * toLocaleString, or raw ISO slices for UI").
+ *
+ * It sits BEFORE the day/month-first pair because it is the other year-first form, next to `iso`.
+ */
+export declare const APP_DATE_FORMATS: readonly ["iso", "ymd", "dmy", "mdy"];
 export declare const APP_REQUEST_HEADER_DATE_FORMAT: "x-date-format";
 /** date-fns pattern for date-only display. */
 export declare function getDatePattern(dateFormat: AppDateFormat): string;

package/dist/app/date-formats.js

@@ -1,8 +1,15 @@
 import { getTimePattern } from "./time-formats.js";
-const APP_DATE_FORMATS = ["iso", "dmy", "mdy"];
+const APP_DATE_FORMATS = [
+  "iso",
+  "ymd",
+  "dmy",
+  "mdy"
+];
 const APP_REQUEST_HEADER_DATE_FORMAT = "x-date-format";
 function getDatePattern(dateFormat) {
   switch (dateFormat) {
+    case "ymd":
+      return "yyyy/MM/dd";
     case "dmy":
       return "dd/MM/yyyy";
     case "mdy":
@@ -16,7 +23,7 @@ function getDateTimePattern(timeFormat, dateFormat) {
   return `${getDatePattern(dateFormat)} ${getTimePattern(timeFormat)}`;
 }
 function isAppDateFormat(value) {
-  return value === "iso" || value === "dmy" || value === "mdy";
+  return APP_DATE_FORMATS.includes(value);
 }
 export {
   APP_DATE_FORMATS,

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

@@ -13,8 +13,13 @@ type CardAccent = "primary" | "success" | "warning" | "info" | "attention" | "de
  * borrowing the brand colour.
  */
 type CardAccentPlacement = "edge" | "perimeter";
-/** Surface fill — plain card, muted band, borderless outline, or emphasized featured ring. */
-type CardVariant = "default" | "muted" | "outline" | "featured";
+/**
+ * Surface fill and edge. `outline` is antd's `outlined` — it drops the FILL and keeps the
+ * hairline; `borderless` is antd's `variant="borderless"` (its deprecated `bordered={false}`) —
+ * it drops the HAIRLINE and keeps the fill. They are two different cards, which is why both
+ * values exist: neither one substitutes for the other.
+ */
+type CardVariant = "default" | "muted" | "outline" | "borderless" | "featured";
 /** Padding density — base 16px · tight 12px · cozy 20px. */
 type CardDensity = "tight" | "cozy";
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -26,6 +31,16 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     accentPlacement?: CardAccentPlacement;
     variant?: CardVariant;
     density?: CardDensity;
+    /**
+     * Lift the card on hover (antd `hoverable`) — the resting elevation steps up to
+     * `--card-hover-shadow` and the pointer becomes a `pointer`.
+     *
+     * This is a PRESENTATION flag, not an interaction: it announces nothing and binds no handler.
+     * A card that looks clickable has to BE clickable for everyone, so pair it with a real control
+     * — a `Link`/`Button` in the header or footer, or the whole card rendered as one — never with a
+     * bare `onClick` on this div, which a keyboard or screen-reader user cannot reach.
+     */
+    hoverable?: boolean;
 };
 export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     accent?: CardAccent;
@@ -36,6 +51,16 @@ export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<
     accentPlacement?: CardAccentPlacement;
     variant?: CardVariant;
     density?: CardDensity;
+    /**
+     * Lift the card on hover (antd `hoverable`) — the resting elevation steps up to
+     * `--card-hover-shadow` and the pointer becomes a `pointer`.
+     *
+     * This is a PRESENTATION flag, not an interaction: it announces nothing and binds no handler.
+     * A card that looks clickable has to BE clickable for everyone, so pair it with a real control
+     * — a `Link`/`Button` in the header or footer, or the whole card rendered as one — never with a
+     * bare `onClick` on this div, which a keyboard or screen-reader user cannot reach.
+     */
+    hoverable?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 /** Full-bleed cover media — first child; header below uses section top (φ⁰), not shell. */
 export type CardCoverProps = React.HTMLAttributes<HTMLDivElement>;
@@ -90,12 +115,30 @@ export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
     separated?: boolean;
     /** Full-bleed footer (the conventional `actions` bar). */
     flush?: boolean;
+    /**
+     * Split the footer into EQUAL-WIDTH cells divided by vertical rules — antd's `actions` row.
+     *
+     * A different band from `separated`, which packs its children at the inline end at their
+     * natural widths: that is the right shape for a Save/Cancel pair and the wrong one for antd's
+     * divided strip. Self-sufficient — it draws its own top rule and full-bleed edges, because
+     * upstream's actions row is never anything else.
+     */
+    actions?: boolean;
 };
 export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /** Top border + symmetric action band — form Save/Cancel, table summary. */
     separated?: boolean;
     /** Full-bleed footer (the conventional `actions` bar). */
     flush?: boolean;
+    /**
+     * Split the footer into EQUAL-WIDTH cells divided by vertical rules — antd's `actions` row.
+     *
+     * A different band from `separated`, which packs its children at the inline end at their
+     * natural widths: that is the right shape for a Save/Cancel pair and the wrong one for antd's
+     * divided strip. Self-sufficient — it draws its own top rule and full-bleed edges, because
+     * upstream's actions row is never anything else.
+     */
+    actions?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export type CardBarProps = React.HTMLAttributes<HTMLDivElement> & {
     pad?: PadProp;

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

@@ -3,13 +3,14 @@ import { padStyle, padStepToken } from "../../lib/variants.js";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 const Card = React.forwardRef(
-  ({ className, accent, accentPlacement, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, accent, accentPlacement, variant, density, hoverable, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       className: cn("group/card", className),
       "data-slot": "card",
       "data-accent": accent,
+      "data-hoverable": hoverable ? "" : void 0,
       "data-accent-placement": accentPlacement === "perimeter" ? "perimeter" : void 0,
       "data-variant": variant && variant !== "default" ? variant : void 0,
       "data-density": density,
@@ -61,13 +62,14 @@ const CardContent = React.forwardRef(
 );
 CardContent.displayName = "CardContent";
 const CardFooter = React.forwardRef(
-  ({ className, separated, flush, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, separated, flush, actions, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       "data-slot": "card-footer",
       "data-separated": separated ? "" : void 0,
       "data-flush": flush ? "" : void 0,
+      "data-actions": actions ? "" : void 0,
       className,
       ...props
     }

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

@@ -13,6 +13,13 @@ interface DataTableProps<T> {
     columns: ColumnDef<T>[];
     /** Required when `selectable` is true. Default: assume row.id (typed as any). */
     getRowId?: (row: T) => string;
+    /**
+     * Human name of a row, announced by its selection checkbox or radio as "Select row {label}".
+     * Default: the text of the `priority: "primary"` column, else of the first column, when that
+     * value is a string or number; the row id only as a last resort — an id is a KEY, and announced
+     * it reads a UUID aloud. `rowSelection.getCheckboxProps` `aria-label` still overrides a row.
+     */
+    getRowLabel?: (row: T) => string;
     selectable?: boolean;
     selected?: Set<string>;
     onSelectChange?: (next: Set<string>) => void;
@@ -130,7 +137,7 @@ interface DataTableProps<T> {
     className?: string;
     children?: React.ReactNode;
 }
-export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: paginationProp, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, rowTone, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
+export declare function DataTable<T>({ data, columns, getRowId, getRowLabel, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: paginationProp, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, rowTone, rowSelection, expandable, summary, scroll, sticky, onRow, bordered, showSorterTooltip, sortDirections, onFilterChange, className, children, }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;

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

@@ -190,6 +190,7 @@ function DataTable({
   data,
   columns,
   getRowId = noopGetRowId,
+  getRowLabel,
   selectable = false,
   selected: controlledSelected,
   onSelectChange,
@@ -443,6 +444,7 @@ function DataTable({
     toggleExpanded,
     rowSelection,
     getRowId,
+    getRowLabel,
     showSorterTooltip,
     sortDirections,
     sortPriorities,
@@ -764,6 +766,7 @@ DataTable.Content = function DataTableContent() {
     toggleExpanded,
     rowSelection,
     getRowId,
+    getRowLabel,
     showSorterTooltip,
     sortDirections,
     sortPriorities
@@ -791,6 +794,7 @@ DataTable.Content = function DataTableContent() {
       );
     }
   }, [missingHeaderNames]);
+  const selectLabelColumn = visibleColumns.find((col) => col.priority === "primary") ?? visibleColumns[0];
   const scrollRef = React.useRef(null);
   const [hasOverflowEnd, setHasOverflowEnd] = React.useState(false);
   React.useEffect(() => {
@@ -1096,6 +1100,9 @@ DataTable.Content = function DataTableContent() {
                   const rowKey = getRowId(original);
                   const isSelected = row.getIsSelected();
                   const checkboxProps = rowSelection?.getCheckboxProps?.(original) ?? {};
+                  const labelValue = selectLabelColumn ? original[selectLabelColumn.key] : void 0;
+                  const rowLabel = getRowLabel?.(original) ?? (typeof labelValue === "string" && labelValue.trim() !== "" || typeof labelValue === "number" ? String(labelValue) : row.id);
+                  const selectRowLabel = checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: rowLabel });
                   const canExpand = expandColumnShown && (expandable?.rowExpandable?.(original) ?? true);
                   const isExpanded = canExpand && expandedKeys.includes(rowKey);
                   const rowProps = onRow?.(original, rowIndex) ?? {};
@@ -1206,7 +1213,7 @@ DataTable.Content = function DataTableContent() {
                                       RadioItem,
                                       {
                                         value: rowKey,
-                                        "aria-label": checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: row.id }),
+                                        "aria-label": selectRowLabel,
                                         onClick: (e) => {
                                           e.stopPropagation();
                                         }
@@ -1222,7 +1229,7 @@ DataTable.Content = function DataTableContent() {
                                   onCheckedChange: (v) => {
                                     row.toggleSelected(!!v);
                                   },
-                                  "aria-label": checkboxProps["aria-label"] ?? t("dataTable.selectRow", { id: row.id }),
+                                  "aria-label": selectRowLabel,
                                   onClick: (e) => {
                                     e.stopPropagation();
                                   }

package/dist/components/data-display/feature-list.d.ts

@@ -0,0 +1,26 @@
+export type { FeatureItemProp, FeatureListProp, FeatureListProp as FeatureListProps, FeatureStateProp, } from "../../props/components/data-display.prop.js";
+import type { FeatureListProp } from "../../props/components/data-display.prop.js";
+/**
+ * FeatureList — a list of STATEMENTS, each carrying a leading state glyph: what a plan includes,
+ * what a tier supports, which requirements a submission met.
+ *
+ * ## Why it is not one of the three components it looks like
+ *
+ * - **`ListRow`** is a single-line ENTITY row — a session, a token, a passkey — with entity
+ *   padding, a divider between every row and a trailing action slot. A feature line is none of
+ *   those: it has no action, it is not a thing you can open, and reading a plan's contents
+ *   through a stack of ruled rows makes six facts look like six records.
+ * - **`Timeline`** has the glyph rail, but it is an ORDERED event list: a connector line runs
+ *   dot-to-dot and the statuses are `done`/`current`/`pending`, which is time, not inclusion.
+ * - **`Descriptions`** is a term/value grid. A feature line has no value column — the state IS
+ *   the value, and it is drawn, not written.
+ *
+ * ## The alignment, which is the actual reason this exists
+ *
+ * The glyph column is one line box tall (`1lh`) and the glyph is centred in it, so it lands on
+ * the FIRST line of a label that wraps to three. That is why the component can be handed a
+ * one-word label and a paragraph and both come out aligned, at any font size and at any density,
+ * with no number in the call site. The shape it replaces reached for `mt-0.5` — 2px, below
+ * `--space-1`, off every scale, and wrong the moment the text beside it changes size.
+ */
+export declare function FeatureList({ items, className, ...props }: FeatureListProp): import("react").JSX.Element;

package/dist/components/data-display/feature-list.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Minus, X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+const STATE = {
+  included: { Icon: Check, key: "dataDisplay.featureList.included" },
+  excluded: { Icon: X, key: "dataDisplay.featureList.excluded" },
+  limited: { Icon: Minus, key: "dataDisplay.featureList.limited" }
+};
+function FeatureList({ items, className, ...props }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("ul", { className: cn("ui-feature-list", className), ...props, children: items.map((item, index) => {
+    const { Icon, key } = STATE[item.state];
+    return /* @__PURE__ */ jsxs("li", { className: "ui-feature-list-item", "data-state": item.state, children: [
+      /* @__PURE__ */ jsx("span", { className: "ui-feature-list-mark", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+      /* @__PURE__ */ jsxs("span", { className: "ui-feature-list-body", children: [
+        /* @__PURE__ */ jsxs("span", { className: "ui-feature-list-label", children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t(key) }),
+          item.label
+        ] }),
+        item.description != null ? /* @__PURE__ */ jsx("span", { className: "ui-feature-list-description", children: item.description }) : null
+      ] })
+    ] }, index);
+  }) });
+}
+export {
+  FeatureList
+};

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

@@ -2,6 +2,12 @@ export { Badge, StatusBadge } from "./badge.js";
 export type { BadgeProps, BadgeTone } from "./badge.js";
 export { Legend } from "./legend.js";
 export type { LegendItemProp, LegendProp, LegendProps } from "./legend.js";
+export { Swatch } from "./swatch.js";
+export type { SwatchProp, SwatchProps } from "./swatch.js";
+export { FeatureList } from "./feature-list.js";
+export type { FeatureItemProp, FeatureListProp, FeatureListProps, FeatureStateProp, } from "./feature-list.js";
+export { Thumbnail } from "./thumbnail.js";
+export type { ThumbnailProp, ThumbnailProps, ThumbnailSizeProp } from "./thumbnail.js";
 export { ListRow } from "./list-row.js";
 export type { ListRowProps, ListRowDensity } from "./list-row.js";
 export { CredentialReveal } from "./credential-reveal.js";

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

@@ -1,5 +1,8 @@
 import { Badge, StatusBadge } from "./badge.js";
 import { Legend } from "./legend.js";
+import { Swatch } from "./swatch.js";
+import { FeatureList } from "./feature-list.js";
+import { Thumbnail } from "./thumbnail.js";
 import { ListRow } from "./list-row.js";
 import { CredentialReveal } from "./credential-reveal.js";
 import { QrCode } from "./qr-code.js";
@@ -90,6 +93,7 @@ export {
   DataTable,
   Descriptions,
   EmptyState,
+  FeatureList,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -114,12 +118,14 @@ export {
   ServiceLauncherCardSkeleton,
   StatCard,
   StatusBadge,
+  Swatch,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
+  Thumbnail,
   Timeline,
   TimelineGrid,
   Tree,

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

@@ -0,0 +1,24 @@
+import type { SwatchProp } from "../../props/components/data-display.prop.js";
+export type { SwatchProp, SwatchProp as SwatchProps, } from "../../props/components/data-display.prop.js";
+/**
+ * Swatch — a READ-ONLY sample of one colour a person chose (gh#527).
+ *
+ * The colour arrives as a VALUE, never as a token: it is a brand's `primary_color`, a calendar
+ * category, a tag a user tinted. That is the axis `Legend` cannot express — its `tone` is a closed
+ * set of semantic roles — and the reason there was no legal way to draw one: a hand-rolled
+ * `<span className="w-[10px] h-[10px] rounded-[2px] bg-[#c0392f]" />` is blocked by ui-audit three
+ * times over, so the only remaining move was a suppression comment.
+ *
+ * It is the same square mark `Legend` draws (a sample reads as a SAMPLE; a pill reads as a chip
+ * you could click), one step larger, because it stands beside a name rather than inside an 11px
+ * key. The hairline is not decoration: without it a white or near-white value is invisible on a
+ * white card, and the sample stops showing anything at all.
+ *
+ * ## The accessible name
+ *
+ * Given an `aria-label` the mark is a `role="img"` that announces it, which is what lets the
+ * colour be shown with no visible label beside it. Given none it is `aria-hidden` — the Legend
+ * rule, for the same reason: a swatch that repeats a label already on screen would announce the
+ * same thing twice. Colour is never the sole carrier either way.
+ */
+export declare function Swatch({ color, className, style, ...props }: SwatchProp): import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Swatch({ color, className, style, ...props }) {
+  const named = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "swatch",
+      className: cn("ui-swatch", className),
+      style: { ...style, ["--swatch-color"]: color },
+      role: named ? "img" : void 0,
+      "aria-hidden": named ? void 0 : true,
+      ...props
+    }
+  );
+}
+export {
+  Swatch
+};

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+export type { ThumbnailProp, ThumbnailProp as ThumbnailProps, ThumbnailSizeProp, } from "../../props/components/data-display.prop.js";
+/**
+ * Thumbnail — a framed picture at a FIXED HEIGHT and its OWN intrinsic width.
+ *
+ * That combination is the whole component. A wrapping row of screenshots holds portrait and
+ * landscape shots together; equal heights make the row read as one strip, and letting each
+ * width follow its own ratio is what keeps every shot uncropped.
+ *
+ * ## Why not the four components it is mistaken for
+ *
+ * - **`AspectRatio`** constrains a RATIO and spans `width: 100%`. Two different intrinsic ratios
+ *   in one row can only be forced into one number by letterboxing or cropping them, which is the
+ *   opposite of the requirement. It also draws no frame.
+ * - **`Avatar`** is an identity mark (with initials fallback), not a picture.
+ * - **`Card`** puts padding between its edge and the picture. The frame here is ON the image.
+ * - **`CardCover`** is the full-bleed media slot INSIDE a Card, not a standalone thumbnail.
+ *
+ * ## The frame is on the `<img>` itself
+ *
+ * No wrapper element. A wrapper would have to be told the image's width to hug it, which is
+ * exactly the number nobody has until the picture loads; a border on the replaced element is
+ * flush by construction at every ratio.
+ *
+ * ## Reserve the width before the picture arrives
+ *
+ * With an intrinsic width there is nothing to lay out until the bytes land, so a row of these
+ * reflows as they load. Pass the file's real pixel `width` and `height` attributes — the browser
+ * derives the ratio from them, and with the block size already fixed the frame takes its final
+ * width on the first paint (`<Thumbnail width={1280} height={800} … />`).
+ */
+export declare const Thumbnail: React.ForwardRefExoticComponent<Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt"> & {
+    src: string;
+    alt: string;
+    size?: import("./thumbnail.js").ThumbnailSizeProp;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLImageElement>>;

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

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Thumbnail = React.forwardRef(
+  ({ size = "md", className, alt, ...props }, ref) => /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      "data-slot": "thumbnail",
+      "data-size": size,
+      alt,
+      className: cn("ui-thumbnail", className),
+      ...props
+    }
+  )
+);
+Thumbnail.displayName = "Thumbnail";
+export {
+  Thumbnail
+};

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

@@ -94,7 +94,7 @@ const CheckboxRoot = React.forwardRef((props, ref) => {
         // itself). react-aria's root is a `<label>`, which is `display:inline` — without this the
         // 16px box collapses to nothing. CheckboxVisual already carries the same three for the
         // same reason.
-        "peer ui-checkbox data-[invalid]:border-destructive data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow outline-none",
+        "peer ui-checkbox data-[invalid]:border-destructive data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow",
         className
       ),
       render: (domProps) => /* @__PURE__ */ jsx("label", { ...domProps, children: withOwnHitTarget(domProps.children) }),

package/dist/components/data-entry/form-field.js

@@ -47,7 +47,7 @@ function FormField({
   const resolvedId = id ?? autoId;
   const labelId = `${resolvedId}-label`;
   const helperId = helper ? `${resolvedId}-helper` : void 0;
-  const helperNode = helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null;
+  const helperNode = helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "ui-form-field-note text-muted-foreground text-xs", children: helper }) : null;
   const validationStatus = error ? "error" : validateStatus;
   const feedbackId = hasFeedback && validationStatus ? `${resolvedId}-feedback` : void 0;
   const FeedbackIcon = validationStatus === "validating" ? LoaderCircle : validationStatus === "error" ? CircleAlert : validationStatus === "warning" ? TriangleAlert : CheckCircle;
@@ -175,7 +175,7 @@ function FormField({
             t(`dataEntry.form.${validationStatus}`)
           ] }) : null,
           helperPlacement === "after" ? helperNode : null,
-          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }) : null
+          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-destructive text-xs", children: error }) : null
         ] })
       ]
     }

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

@@ -13,7 +13,7 @@ import {
 } from "./control-appearance.js";
 import { resolveAllowClear } from "./control-surface.js";
 const inputBaseClass = [
-  "ui-control ui-input w-full rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
+  "ui-control ui-input w-full rounded-[var(--control-radius)] transition-[color,box-shadow]",
   "selection:bg-primary selection:text-primary-foreground",
   "placeholder:text-muted-foreground",
   "aria-invalid:border-destructive",

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

@@ -57,6 +57,21 @@ const NumberInput = React.forwardRef(
   }, ref) => {
     const { t, locale } = useTranslation();
     const fieldA11y = pickFieldA11y(ariaProps);
+    const stepperVerbId = React.useId();
+    const fieldLabel = typeof fieldA11y["aria-label"] === "string" ? fieldA11y["aria-label"] : void 0;
+    const fieldLabelledBy = typeof fieldA11y["aria-labelledby"] === "string" ? fieldA11y["aria-labelledby"] : void 0;
+    const stepperName = (direction) => {
+      const verb = t(`ui.numberInput.${direction}`);
+      if (fieldLabelledBy) {
+        return { "aria-labelledby": `${fieldLabelledBy} ${stepperVerbId}-${direction}` };
+      }
+      if (fieldLabel) {
+        return {
+          "aria-label": t(`ui.numberInput.${direction}Field`, { label: fieldLabel }) || verb
+        };
+      }
+      return { "aria-label": verb };
+    };
     const isControlled = controlledValue !== void 0;
     const [internal, setInternal] = React.useState(defaultValue);
     const numericValue = isControlled ? controlledValue ?? null : internal;
@@ -228,7 +243,7 @@ const NumberInput = React.forwardRef(
             }
           ) : null,
           controls ? /* @__PURE__ */ jsxs("span", { "data-slot": "number-input-steppers", className: "ui-number-input-steppers", children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               Button,
               {
                 type: "button",
@@ -237,12 +252,15 @@ const NumberInput = React.forwardRef(
                 className: "ui-number-input-step ui-number-input-step-up",
                 tabIndex: -1,
                 disabled: !interactive || atMax,
-                "aria-label": t("ui.numberInput.increment"),
+                ...stepperName("increment"),
                 onClick: () => stepBy(1),
-                children: /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" })
+                children: [
+                  /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { id: `${stepperVerbId}-increment`, className: "sr-only", children: t("ui.numberInput.increment") })
+                ]
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               Button,
               {
                 type: "button",
@@ -251,9 +269,12 @@ const NumberInput = React.forwardRef(
                 className: "ui-number-input-step ui-number-input-step-down",
                 tabIndex: -1,
                 disabled: !interactive || atMin,
-                "aria-label": t("ui.numberInput.decrement"),
+                ...stepperName("decrement"),
                 onClick: () => stepBy(-1),
-                children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })
+                children: [
+                  /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { id: `${stepperVerbId}-decrement`, className: "sr-only", children: t("ui.numberInput.decrement") })
+                ]
               }
             )
           ] }) : null

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

@@ -62,7 +62,7 @@ const RadioItem = React.forwardRef(
           // records: react-aria's root is a `<label>`, which is `display:inline`, so without it the
           // 16px dot collapses to nothing. `data-[invalid]` replaces `aria-invalid:` because
           // react-aria puts `aria-invalid` on the `<input>` and `data-invalid` on this box.
-          "ui-radio data-[invalid]:border-destructive inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow outline-none",
+          "ui-radio data-[invalid]:border-destructive inline-flex shrink-0 items-center justify-center shadow-xs transition-shadow",
           className
         ),
         ...props,

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

@@ -80,7 +80,7 @@ const Switch = React.forwardRef(
             // components, so it silently outranked that token. Byte-identical: the token
             // defaults to 0.5. (`shadow-xs` STAYS — .ui-switch declares --shadow-sm, so this
             // utility is the switch's real resting elevation, not a duplicate.)
-            "peer ui-switch shadow-xs transition-all outline-none",
+            "peer ui-switch shadow-xs transition-all",
             className
           ),
           children: [

package/dist/components/feedback/dialog.js

@@ -149,7 +149,7 @@ function DialogContent({
     showCloseButton ? /* @__PURE__ */ jsxs(
       DialogClose,
       {
-        className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
+        className: "ui-focus-ring transition-opacity disabled:pointer-events-none",
         children: [
           /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
@@ -265,7 +265,7 @@ function AlertDialogContent({
       {
         type: "button",
         "data-slot": "dialog-close",
-        className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
+        className: "ui-focus-ring transition-opacity disabled:pointer-events-none",
         "aria-label": t("feedback.alert.dismiss"),
         onClick: () => {
           state.setOpen(false);