@godxjp/ui 16.2.2 → 16.3.0

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

@@ -1,10 +1,14 @@
 import * as React from "react";
+import type { DescriptionsLayoutProp } from "../../props/vocabulary/interaction.prop";
+export type { DescriptionsLayoutProp };
 export interface DescriptionsProps {
     columns?: 1 | 2 | 3;
+    /** Label placement within each item. Default `vertical` (label over value). */
+    layout?: DescriptionsLayoutProp;
     className?: string;
     children: React.ReactNode;
 }
-export declare function Descriptions({ columns, className, children }: DescriptionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Descriptions({ columns, layout, className, children, }: DescriptionsProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Descriptions {
     var Item: ({ label, mono, span, className, children, }: DescriptionsItemProps) => import("react/jsx-runtime").JSX.Element;
 }

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

@@ -1,8 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../../lib/utils";
-function Descriptions({ columns = 2, className, children }) {
+const DescriptionsLayoutContext = React.createContext("vertical");
+function Descriptions({
+  columns = 2,
+  layout = "vertical",
+  className,
+  children
+}) {
   const colsClass = columns === 1 ? "grid-cols-1" : columns === 3 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1 sm:grid-cols-2";
-  return /* @__PURE__ */ jsx("dl", { className: cn("grid gap-x-6 gap-y-3", colsClass, className), children });
+  return /* @__PURE__ */ jsx(DescriptionsLayoutContext.Provider, { value: layout, children: /* @__PURE__ */ jsx("dl", { className: cn("grid gap-x-6 gap-y-3", colsClass, className), children }) });
 }
 Descriptions.Item = function DescriptionsItem({
   label,
@@ -11,13 +18,29 @@ Descriptions.Item = function DescriptionsItem({
   className,
   children
 }) {
+  const layout = React.useContext(DescriptionsLayoutContext);
   const spanClass = span === 2 ? "sm:col-span-2" : span === 3 ? "sm:col-span-2 lg:col-span-3" : "";
-  return (
-    // grid + the shared --field-label-gap so the label→value gap matches FormField / Form everywhere.
-    /* @__PURE__ */ jsxs("div", { className: cn("grid gap-[var(--field-label-gap)]", spanClass, className), children: [
-      /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground text-xs", children: label }),
-      /* @__PURE__ */ jsx("dd", { className: cn("text-sm break-all", mono && "font-mono"), children })
-    ] })
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        layout === "horizontal" ? (
+          // Label beside value — a token-aligned label column so the values line up. The
+          // `--descriptions-label-width` knob aligns labels (rule #44/#45).
+          "grid grid-cols-[var(--descriptions-label-width)_minmax(0,1fr)] items-baseline gap-x-3"
+        ) : (
+          // Vertical (default): label over value. The shared --field-label-gap matches
+          // FormField / Form so the label→value gap is consistent everywhere.
+          "grid gap-[var(--field-label-gap)]"
+        ),
+        spanClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground text-xs", children: label }),
+        /* @__PURE__ */ jsx("dd", { className: cn("text-sm break-all", mono && "font-mono"), children })
+      ]
+    }
   );
 };
 export {

package/dist/props/registry.d.ts

@@ -249,6 +249,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "interaction";
         readonly description: "Form label layout: vertical | horizontal | inline";
     };
+    readonly DescriptionsLayoutProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Descriptions label layout: vertical (over) | horizontal (beside)";
+    };
     readonly BreakpointProp: {
         readonly file: "vocabulary/interaction.prop.ts";
         readonly category: "interaction";

package/dist/props/registry.js

@@ -248,6 +248,11 @@ const VOCABULARY_REGISTRY = {
     category: "interaction",
     description: "Form label layout: vertical | horizontal | inline"
   },
+  DescriptionsLayoutProp: {
+    file: "vocabulary/interaction.prop.ts",
+    category: "interaction",
+    description: "Descriptions label layout: vertical (over) | horizontal (beside)"
+  },
   BreakpointProp: {
     file: "vocabulary/interaction.prop.ts",
     category: "interaction",

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -26,6 +26,9 @@ export type SizeProp = "xs" | "sm" | "md" | "lg";
 export type ButtonSizeProp = SizeProp | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
 /** Form layout — label position relative to its control (Ant-style). */
 export type FormLayoutProp = "vertical" | "horizontal" | "inline";
+/** Descriptions layout — label over value (`vertical`) or beside it (`horizontal`); the
+ *  `FormLayoutProp` subset that a metadata grid supports (no `inline`). */
+export type DescriptionsLayoutProp = Extract<FormLayoutProp, "vertical" | "horizontal">;
 /** Responsive breakpoint name (mobile-first); used by `collapseBelow` etc. */
 export type BreakpointProp = "sm" | "md" | "lg" | "xl";
 /** Dialog confirm button emphasis. */

package/dist/tokens/base.css

@@ -9,6 +9,7 @@
 @import "./components/control.css";
 @import "./components/form.css";
 @import "./components/card.css";
+@import "./components/descriptions.css";
 @import "./components/table.css";
 @import "./components/feedback.css";
 @import "./components/badge.css";

package/dist/tokens/components/descriptions.css

@@ -0,0 +1,9 @@
+/* Descriptions component tokens. */
+
+:root {
+  /* Width of the label column when <Descriptions layout="horizontal">. Labels align to this
+   * shared column so the values line up (the horizontal-detail look, mirroring <Form layout>).
+   * A rem value gives a fixed aligned column; set `max-content` to size each label to its text.
+   * (rule #44/#45 — a service theme tunes it here instead of forking CSS.) */
+  --descriptions-label-width: 8rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "16.2.2",
+  "version": "16.3.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,