@godxjp/ui 33.13.0 → 33.15.0

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type { PersonaProp, PersonaProp as PersonaProps, } from "../../props/components/data-display.prop.js";
+/** A person's identity, independent of row chrome, navigation and account actions. */
+export declare const Persona: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    name: string;
+    description?: string;
+    avatarSrc?: string;
+    avatarFallback?: React.ReactNode;
+    trailing?: React.ReactNode;
+    size?: Extract<import("../../props/index.js").SizeProp, "sm" | "md">;
+} & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+const Persona = React.forwardRef(
+  ({ name, description, avatarSrc, avatarFallback, trailing, size = "md", className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "data-slot": "persona",
+      "data-size": size,
+      className: cn("ui-persona", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(Avatar, { size, "aria-hidden": "true", children: [
+          avatarSrc ? /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: "" }) : null,
+          /* @__PURE__ */ jsx(AvatarFallback, { children: avatarFallback ?? Array.from(name)[0] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { "data-slot": "persona-body", children: [
+          /* @__PURE__ */ jsxs("span", { "data-slot": "persona-name-line", children: [
+            /* @__PURE__ */ jsx("span", { "data-slot": "persona-name", dir: "auto", title: name, children: name }),
+            trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "persona-trailing", children: trailing }) : null
+          ] }),
+          description != null ? /* @__PURE__ */ jsx("span", { "data-slot": "persona-description", dir: "auto", title: description, children: description }) : null
+        ] })
+      ]
+    }
+  )
+);
+Persona.displayName = "Persona";
+export {
+  Persona
+};

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

@@ -119,6 +119,7 @@ function Upload({
   const fieldName = React.useContext(FieldNameContext);
   const triggerId = React.useId();
   const selectionId = React.useId();
+  const dropzoneHintId = React.useId();
   const triggerRef = React.useRef(null);
   const ownAriaLabel = fieldA11y["aria-label"];
   const callerAriaLabel = !fieldLabelledBy || fieldName && ownAriaLabel !== fieldName.label ? ownAriaLabel : void 0;
@@ -476,6 +477,12 @@ function Upload({
     if (!disabled && openFileDialogOnClick) inputRef.current?.click();
   };
   if (variant === "dropzone") {
+    const hintText = t("dataEntry.upload.dropzoneHint");
+    const named = triggerA11y(hintText);
+    const dropzoneA11y = callerAriaLabel !== void 0 ? { ...named, "aria-label": callerAriaLabel } : {
+      ...named,
+      "aria-labelledby": named["aria-labelledby"] ? `${fieldLabelledBy} ${dropzoneHintId}` : dropzoneHintId
+    };
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
@@ -487,8 +494,7 @@ function Upload({
           role: openFileDialogOnClick ? "button" : "group",
           tabIndex: disabled ? -1 : 0,
           "aria-disabled": disabled,
-          ...triggerA11y(t("dataEntry.upload.dropzoneLabel")),
-          "aria-label": callerAriaLabel ?? t("dataEntry.upload.dropzoneLabel"),
+          ...dropzoneA11y,
           onClick: openPicker,
           onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
@@ -515,7 +521,7 @@ function Upload({
           className: "ui-upload-dropzone",
           children: [
             /* @__PURE__ */ jsx(UploadIcon, { className: "ui-upload-dropzone-icon", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("p", { className: "ui-upload-dropzone-hint", children: t("dataEntry.upload.dropzoneHint") }),
+            /* @__PURE__ */ jsx("p", { id: dropzoneHintId, className: "ui-upload-dropzone-hint", children: t("dataEntry.upload.dropzoneHint") }),
             /* @__PURE__ */ jsx("p", { className: "ui-upload-dropzone-meta", children: t("dataEntry.upload.dropzoneMeta") })
           ]
         }

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": "33.13.0",
+  "version": "33.15.0",
   "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

@@ -74,7 +74,6 @@
       "presetEmpty": "Empty"
     },
     "upload": {
-      "dropzoneLabel": "Upload files",
       "dropzoneHint": "Drag and drop files here, or click to browse",
       "dropzoneMeta": "Selected files appear here.",
       "buttonLabel": "Choose file",

package/dist/i18n/messages/ja.json

@@ -73,7 +73,6 @@
       "presetEmpty": "空"
     },
     "upload": {
-      "dropzoneLabel": "ファイルをアップロード",
       "dropzoneHint": "ここにドラッグ＆ドロップ、またはクリックして選択",
       "dropzoneMeta": "選択したファイルはここに表示されます。",
       "buttonLabel": "ファイルを選択",

package/dist/i18n/messages/vi.json

@@ -73,7 +73,6 @@
       "presetEmpty": "Trống"
     },
     "upload": {
-      "dropzoneLabel": "Tải file lên",
       "dropzoneHint": "Kéo thả file vào đây, hoặc bấm để chọn",
       "dropzoneMeta": "Tệp đã chọn sẽ hiển thị tại đây.",
       "buttonLabel": "Chọn file",

package/dist/props/components/data-display.prop.d.ts

@@ -1424,3 +1424,13 @@ export type TextDiffProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children"
     lang?: string;
     className?: ClassNameProp;
 };
+/** @see Persona — static identity; pass translated labels and badge content from the consumer. */
+export type PersonaProp = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    name: string;
+    description?: string;
+    avatarSrc?: string;
+    avatarFallback?: React.ReactNode;
+    /** Optional inline badge beside the name, never part of the clipped name. */
+    trailing?: React.ReactNode;
+    size?: Extract<SizeProp, "sm" | "md">;
+};

package/dist/props/registry.d.ts

@@ -2171,6 +2171,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp", "GetRowLabelProp", "HandlerProp", "TablePresetProp", "TableColumnPriorityProp", "BreakpointProp", "ColumnFixedProp", "ColumnFilterItemProp", "ColumnFilterStateProp", "ColumnSorterProp", "TableRowSelectionProp", "TableSelectionBuiltInProp", "TableSelectAllMatchingProp", "TableExpandableProp", "TableSummaryProp", "TableScrollProp", "TableStickyProp", "OnRowProp", "TablePaginationProp", "TablePaginationPositionProp", "SortDirectionProp", "OnColumnFilterChangeProp"];
     };
+    readonly PersonaProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["SizeProp", "ClassNameProp", "DescriptionProp"];
+    };
     readonly ListRowDensityProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";

package/dist/props/registry.js

@@ -2651,6 +2651,11 @@ const COMPONENT_PROP_REGISTRY = {
       "OnColumnFilterChangeProp"
     ]
   },
+  PersonaProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: ["SizeProp", "ClassNameProp", "DescriptionProp"]
+  },
   ListRowDensityProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",

package/dist/styles/data-display-layout.css

@@ -1,4 +1,62 @@
 @layer components {
+  .ui-persona {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    gap: var(--persona-avatar-gap, var(--space-2));
+  }
+
+  .ui-persona [data-slot="persona-body"] {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-inline-size: 0;
+    gap: var(--persona-label-gap, 0);
+  }
+
+  .ui-persona [data-slot="persona-name-line"] {
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    gap: var(--persona-trailing-gap, var(--space-1));
+  }
+
+  .ui-persona [data-slot="persona-name"],
+  .ui-persona [data-slot="persona-description"] {
+    display: block;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: start;
+    line-height: var(--persona-label-line-height);
+  }
+
+  .ui-persona [data-slot="persona-name"] {
+    font-size: var(--persona-name-font-size, var(--font-size-sm));
+    font-weight: var(--persona-name-font-weight, var(--font-weight-medium));
+    color: var(--persona-name-color, hsl(var(--foreground)));
+  }
+
+  .ui-persona[data-size="sm"] [data-slot="persona-name"] {
+    font-size: var(--persona-name-font-size-sm, var(--font-size-xs));
+  }
+
+  .ui-persona [data-slot="persona-description"] {
+    align-self: flex-start;
+    max-inline-size: 100%;
+    font-size: var(--persona-description-font-size, var(--font-size-xs));
+    color: var(--persona-description-color, hsl(var(--muted-foreground)));
+  }
+
+  .ui-persona [data-slot="persona-trailing"] {
+    flex: none;
+    display: inline-flex;
+    white-space: nowrap;
+  }
+
   .ui-avatar {
     position: relative;
     display: inline-flex;

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.13.0",
+  "version": "33.15.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -768,6 +768,11 @@
         "form-layout.css"
       ]
     },
+    "Persona": {
+      "layers": [
+        "data-display-layout.css"
+      ]
+    },
     "PieChart": {
       "layers": [
         "layout.css",

package/dist/styles/table-layout.css

@@ -646,6 +646,12 @@
     table-layout: fixed;
   }
 
+  .ui-data-table-surface[data-table-layout="fixed"]
+    [data-slot="table-cell"]:not(.ui-data-table-ellipsis) {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
   .ui-data-table-scroll[data-scroll-y] {
     overflow-y: auto;
     max-block-size: var(--table-scroll-block-size, none);
@@ -1050,22 +1056,24 @@
       display: block;
 
       height: auto;
-      border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+
+      border: 0;
+      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
-        var(
-          --table-stacked-collection-card-padding-x,
-          calc(var(--card-space-inset) - var(--stroke-hairline))
-        );
+        var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
       margin-block-end: var(--table-stacked-collection-card-gap);
     }
 
     [data-collapse-below="sm"] .ui-table-row:last-child {
       margin-block-end: 0;
+      border-block-end-width: 0;
     }
 
     [data-collapse-below="sm"] [data-slot="table-cell"] {
       display: block;
+
+      inline-size: auto !important;
       padding-block: var(--table-stacked-collection-cell-padding-y);
 
       padding-inline: var(--table-stacked-collection-cell-padding-x);
@@ -1107,22 +1115,24 @@
       display: block;
 
       height: auto;
-      border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+
+      border: 0;
+      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
-        var(
-          --table-stacked-collection-card-padding-x,
-          calc(var(--card-space-inset) - var(--stroke-hairline))
-        );
+        var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
       margin-block-end: var(--table-stacked-collection-card-gap);
     }
 
     [data-collapse-below="md"] .ui-table-row:last-child {
       margin-block-end: 0;
+      border-block-end-width: 0;
     }
 
     [data-collapse-below="md"] [data-slot="table-cell"] {
       display: block;
+
+      inline-size: auto !important;
       padding-block: var(--table-stacked-collection-cell-padding-y);
       padding-inline: var(--table-stacked-collection-cell-padding-x);
       white-space: normal;
@@ -1162,22 +1172,24 @@
       display: block;
 
       height: auto;
-      border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+
+      border: 0;
+      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
-        var(
-          --table-stacked-collection-card-padding-x,
-          calc(var(--card-space-inset) - var(--stroke-hairline))
-        );
+        var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
       margin-block-end: var(--table-stacked-collection-card-gap);
     }
 
     [data-collapse-below="lg"] .ui-table-row:last-child {
       margin-block-end: 0;
+      border-block-end-width: 0;
     }
 
     [data-collapse-below="lg"] [data-slot="table-cell"] {
       display: block;
+
+      inline-size: auto !important;
       padding-block: var(--table-stacked-collection-cell-padding-y);
       padding-inline: var(--table-stacked-collection-cell-padding-x);
       white-space: normal;
@@ -1217,22 +1229,24 @@
       display: block;
 
       height: auto;
-      border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+
+      border: 0;
+      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
-        var(
-          --table-stacked-collection-card-padding-x,
-          calc(var(--card-space-inset) - var(--stroke-hairline))
-        );
+        var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
       margin-block-end: var(--table-stacked-collection-card-gap);
     }
 
     [data-collapse-below="xl"] .ui-table-row:last-child {
       margin-block-end: 0;
+      border-block-end-width: 0;
     }
 
     [data-collapse-below="xl"] [data-slot="table-cell"] {
       display: block;
+
+      inline-size: auto !important;
       padding-block: var(--table-stacked-collection-cell-padding-y);
       padding-inline: var(--table-stacked-collection-cell-padding-x);
       white-space: normal;