@godxjp/ui 16.2.1 → 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/components/data-display/table.js

@@ -3,7 +3,15 @@ import * as React from "react";
 import { tableHeadHeightClass } from "../../lib/control-styles";
 import { cn } from "../../lib/utils";
 const Table = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      ref,
+      "data-slot": "table",
+      className: cn("w-full caption-bottom text-sm", className),
+      ...props
+    }
+  ) })
 );
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));

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/styles/card-layout.css

@@ -285,7 +285,7 @@
   /* A non-banded header before a FLUSH full-bleed table supplies its OWN bottom gap: the table's
    * content padding is zeroed above, so without this the title/subtitle butt against the header
    * row. Match the header's top inset so the header block reads balanced top↕bottom. */
-  [data-slot="card"]:has([data-slot="card-content"][data-flush] table)
+  [data-slot="card"]:has([data-slot="card-content"][data-flush] [data-slot="table"])
     [data-slot="card-header"]:not([data-banded]) {
     padding-bottom: var(--card-space-body-y);
   }

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/card.css

@@ -1,16 +1,23 @@
 /* Card component tokens: card chrome derives from semantic layout tokens. */
 
 :root {
+  /* Horizontal inset of every slot (header / content / footer) + the resting top/bottom
+   * shell padding. This is the column the title, body and footer all align to. */
   --card-space-inset: var(--space-section-active);
+  /* Vertical padding of a BANDED header band (top = bottom). Drives --card-space-divided-y. */
   --card-space-header-y: var(--space-stack-sm);
+  /* Gap between the header and the body, and the body's own top padding — the breathing
+   * room under a title before content begins. */
   --card-space-body-y: var(--space-section-active);
+  /* Vertical padding of a SEPARATED footer band (top = bottom). Drives --card-space-divided-y. */
   --card-space-footer-y: var(--space-stack-sm);
-  /* DIVIDED-section vertical padding (rule #44/#45). A header/footer that carries a
-   * divider border (banded header, separated footer) reads as its own band, so it gets
-   * SYMMETRIC top+bottom padding — distinct from a plain header that flows into the body
-   * (top inset, no bottom). One themeable knob keeps the header- and footer-band rhythm in
-   * sync; a service theme tunes the band density here instead of forking per-slot CSS. */
+  /* DIVIDED-section vertical padding (rule #44/#45). A header/footer that carries a divider
+   * border (banded header, separated footer) reads as its own band, so it pads SYMMETRICALLY
+   * top+bottom — distinct from a plain header that flows into the body (top inset, no bottom).
+   * One themeable knob keeps the header- and footer-band rhythm in sync; a service theme tunes
+   * the band density here instead of forking per-slot CSS. */
   --card-space-divided-y: var(--card-space-header-y);
+  /* Vertical gap between stacked items WITHIN a slot (e.g. title ↕ description in the header). */
   --card-space-gap: var(--space-stack-xs);
   --card-title-font-size: var(--font-size-base);
   --card-title-line-height: var(--line-height-tight);

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.1",
+  "version": "16.3.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,