@godxjp/ui 33.13.0 → 33.14.0

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/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.14.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

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.14.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

@@ -1050,22 +1050,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 +1109,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 +1166,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 +1223,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;