@godxjp/ui 13.0.0 → 13.2.0

package/dist/props/registry.d.ts

@@ -204,6 +204,41 @@ declare const VOCABULARY_REGISTRY: {
         readonly category: "interaction";
         readonly description: "Button size preset; includes documented icon-only subset";
     };
+    readonly BadgeVariantProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Badge visual variant (default | secondary | outline | dashed)";
+    };
+    readonly ShapeProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Corner shape default | pill | sharp — shared by Button + Badge (radius tokens)";
+    };
+    readonly TextSizeProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Text size — golden-ratio type-scale steps (2xs…xl), never an arbitrary px";
+    };
+    readonly TextToneProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Text colour intent — semantic foreground tokens";
+    };
+    readonly FontWeightProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Font weight regular | medium | semibold (system 2-weight, 400/500)";
+    };
+    readonly HeadingLevelProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Heading level 1-4 — sizes from --heading-h* and the semantic element";
+    };
+    readonly TextAlignProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Inline text alignment start | center | end (logical, RTL-safe)";
+    };
     readonly SizeProp: {
         readonly file: "vocabulary/interaction.prop.ts";
         readonly category: "interaction";
@@ -436,7 +471,17 @@ declare const COMPONENT_PROP_REGISTRY: {
     readonly ButtonProp: {
         readonly group: "general";
         readonly file: "components/general.prop.ts";
-        readonly vocabulary: readonly ["ButtonVariantProp", "SizeProp", "AsChildProp", "DisabledProp", "OnClickProp"];
+        readonly vocabulary: readonly ["ButtonVariantProp", "SizeProp", "ShapeProp", "AsChildProp", "DisabledProp", "OnClickProp"];
+    };
+    readonly TextProp: {
+        readonly group: "general";
+        readonly file: "components/general.prop.ts";
+        readonly vocabulary: readonly ["TextSizeProp", "TextToneProp", "FontWeightProp", "TextAlignProp", "ClassNameProp"];
+    };
+    readonly HeadingProp: {
+        readonly group: "general";
+        readonly file: "components/general.prop.ts";
+        readonly vocabulary: readonly ["HeadingLevelProp", "TextToneProp", "TextAlignProp", "ClassNameProp"];
     };
     readonly InputProp: {
         readonly group: "data-entry";
@@ -623,7 +668,7 @@ declare const COMPONENT_PROP_REGISTRY: {
     readonly BadgeProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["ToneProp", "ChildrenProp", "ClassNameProp"];
+        readonly vocabulary: readonly ["BadgeVariantProp", "ShapeProp", "ToneProp", "ChildrenProp", "ClassNameProp"];
     };
     readonly DataTableProp: {
         readonly group: "data-display";

package/dist/props/registry.js

@@ -1 +1 @@
-export { COMPONENT_PROP_REGISTRY, PROP_ALIASES_FORBIDDEN, VOCABULARY_REGISTRY } from '../chunk-XTVUYEJD.js';
+export { COMPONENT_PROP_REGISTRY, PROP_ALIASES_FORBIDDEN, VOCABULARY_REGISTRY } from '../chunk-Z37463ZK.js';

package/dist/props/vocabulary/index.d.ts

@@ -1,7 +1,7 @@
 export { A as AsChildProp, C as ChildrenProp, a as ClassNameProp, D as DefaultOpenProp, b as DefaultValueProp, c as DisabledProp, E as ErrorProp, H as HandlerProp, d as HelperProp, I as IdProp, L as LabelProp, N as NameProp, O as OnChangeProp, e as OnClickProp, f as OnOpenChangeProp, g as OnValueChangeProp, h as OpenProp, P as PendingProp, i as PlaceholderProp, R as RequiredProp, V as ValueProp, W as WidthProp } from '../../shared.prop-BvMSLFJ6.js';
 export { A as ActionProp, a as ActionsProp, C as CancelLabelProp, b as ConfirmLabelProp, D as DescriptionProp, E as EmptyMessageProp, c as ExtraProp, F as FooterProp, I as IconProp, S as SubtitleProp, T as TitleProp } from '../../content.prop-DrV_zDy-.js';
 export { D as DensityProp, G as GapProp, P as PageContainerVariantProp, a as PageDensityProp, T as TableDensityProp } from '../../layout.prop-CXvl2rVR.js';
-export { A as AlertVariantProp, B as BreakpointProp, a as ButtonSizeProp, b as ButtonVariantProp, C as ColumnAlignProp, c as ConfirmVariantProp, F as FormLayoutProp, S as SizeProp, d as SortDirectionProp, e as SortStateProp, T as ToneProp } from '../../interaction.prop-R77MnAMZ.js';
+export { A as AlertVariantProp, B as BadgeVariantProp, a as BreakpointProp, b as ButtonSizeProp, c as ButtonVariantProp, C as ColumnAlignProp, d as ConfirmVariantProp, F as FontWeightProp, e as FormLayoutProp, H as HeadingLevelProp, S as ShapeProp, f as SizeProp, g as SortDirectionProp, h as SortStateProp, T as TextAlignProp, i as TextSizeProp, j as TextToneProp, k as ToneProp } from '../../interaction.prop-B44hePpl.js';
 export { B as BreadcrumbItemProp, a as BreadcrumbProp } from '../../navigation.prop-CXDaVNaR.js';
-export { C as ColumnDefProp, G as GetRowIdProp, H as HasActiveFiltersProp, O as OnClearFiltersProp, a as OnRowClickProp, b as OnSearchChangeProp, c as OnSelectChangeProp, d as OnSortChangeProp, e as OnTableDensityChangeProp, S as SelectedIdsProp } from '../../data.prop-D4uDw_SW.js';
+export { C as ColumnDefProp, G as GetRowIdProp, H as HasActiveFiltersProp, O as OnClearFiltersProp, a as OnRowClickProp, b as OnSearchChangeProp, c as OnSelectChangeProp, d as OnSortChangeProp, e as OnTableDensityChangeProp, S as SelectedIdsProp } from '../../data.prop-H9nROsUg.js';
 import 'react';

package/dist/{query.prop-CyNxaCHe.d.ts → query.prop-cp6fEgOD.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { UseQueryResult, UseInfiniteQueryResult, InfiniteData, QueryKey, UseMutationResult } from '@tanstack/react-query';
 import { LinkProps } from 'react-router-dom';
-import { B as ButtonProp } from './general.prop-1GgJkf4b.js';
+import { B as ButtonProp } from './general.prop-4ERae5Sj.js';
 import { H as HandlerProp, a as ClassNameProp } from './shared.prop-BvMSLFJ6.js';
 
 /** Query / async lifecycle helpers — @see docs/COMPONENTS.md#query */

package/dist/{search-input-BPtjUAa1.d.ts → search-input-CxGW8_7q.d.ts}

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { g as FormFieldProp, F as FieldProp } from './data-entry.prop-BGxD81Lf.js';
+import { g as FormFieldProp, F as FieldProp } from './data-entry.prop-BGlwRXlJ.js';
 import * as React from 'react';
 
 declare function FormField({ id, label, required, helper, error, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, }: FormFieldProp): react_jsx_runtime.JSX.Element;

package/dist/styles/badge-layout.css

@@ -6,6 +6,10 @@
   [data-slot="badge"] {
     display: inline-flex;
     align-items: center;
+    /* Center on the text x-height when the badge sits INLINE with running text (an inline-flex box
+     * defaults to baseline → it rides high / "valign top" next to a label). Ignored in flex/grid
+     * containers, so table cells and Flex rows are unaffected. */
+    vertical-align: middle;
     gap: var(--badge-space-gap);
     padding: var(--badge-space-y) var(--badge-space-x);
     border-radius: var(--radius-md);

package/dist/styles/dialog-layout.css

@@ -11,6 +11,16 @@
     --sheet-pad-y: var(--space-chrome-y);
   }
 
+  /* Sheet header/footer dividers appear ONLY when a SheetBody is present (mirrors the dialog rule) —
+   * a body-less sheet never shows a doubled header-bottom + footer-top line. */
+  [data-slot="sheet-content"]:has([data-slot="sheet-body"]) [data-slot="sheet-header"] {
+    border-bottom: 1px solid hsl(var(--border));
+  }
+
+  [data-slot="sheet-content"]:has([data-slot="sheet-body"]) [data-slot="sheet-footer"] {
+    border-top: 1px solid hsl(var(--border));
+  }
+
   .ui-dialog-overlay {
     position: fixed;
     inset: 0;
@@ -55,28 +65,20 @@
     scroll-padding-block: var(--space-1);
   }
 
-  /* Header = full-bleed band with a bottom border + the shared chrome padding — MIRRORS the footer so
-   * the two are symmetric pinned bars (same as Sheet/Drawer). */
+  /* Header & footer are PLAIN stacked sections by default — the dialog padding gives the inset and the
+   * content `gap` gives the header↔footer spacing. No border band here, so a simple confirm dialog
+   * (header + footer, NO body) never shows an internal divider or a doubled line + padding. */
   [data-slot="dialog-header"] {
     display: flex;
     flex-direction: column;
     gap: var(--space-stack-xs);
     text-align: start;
-    margin-inline: calc(-1 * var(--dialog-space-x));
-    margin-block-start: calc(-1 * var(--dialog-space-y));
-    padding: var(--dialog-space-y) var(--dialog-space-x);
-    border-bottom: 1px solid hsl(var(--border));
   }
 
-  /* Footer = full-bleed band with a top border + the same chrome padding (mirror of the header). */
   [data-slot="dialog-footer"] {
     display: flex;
     flex-direction: column-reverse;
     gap: var(--space-inline-sm);
-    margin-inline: calc(-1 * var(--dialog-space-x));
-    margin-block-end: calc(-1 * var(--dialog-space-y));
-    padding: var(--dialog-space-y) var(--dialog-space-x);
-    border-top: 1px solid hsl(var(--border));
   }
 
   @media (min-width: 640px) {
@@ -86,6 +88,23 @@
     }
   }
 
+  /* Scrollable-body layout (Ant Modal): ONLY when a body is present do header & footer become
+   * full-bleed pinned bands with a divider, so the body scrolls between two fixed bars. Without a
+   * body the dividers (and their band padding) collapse — fixes the double-border + oversized gap. */
+  [data-slot="dialog-content"]:has([data-slot="dialog-body"]) [data-slot="dialog-header"] {
+    margin-inline: calc(-1 * var(--dialog-space-x));
+    margin-block-start: calc(-1 * var(--dialog-space-y));
+    padding: var(--dialog-space-y) var(--dialog-space-x);
+    border-bottom: 1px solid hsl(var(--border));
+  }
+
+  [data-slot="dialog-content"]:has([data-slot="dialog-body"]) [data-slot="dialog-footer"] {
+    margin-inline: calc(-1 * var(--dialog-space-x));
+    margin-block-end: calc(-1 * var(--dialog-space-y));
+    padding: var(--dialog-space-y) var(--dialog-space-x);
+    border-top: 1px solid hsl(var(--border));
+  }
+
   [data-slot="dialog-close"] {
     position: absolute;
     inset-inline-end: var(--dialog-close-space-offset);

package/dist/styles/index.css

@@ -30,6 +30,7 @@
 @import "./layout.css";
 @import "./control.css";
 @import "./card-layout.css";
+@import "./text-layout.css";
 @import "./table-layout.css";
 @import "./dialog-layout.css";
 @import "./alert-layout.css";

package/dist/styles/text-layout.css

@@ -0,0 +1,119 @@
+/*
+ * TEXT / HEADING — typographic primitives (@godxjp/ui).
+ * Token-driven ONLY: size = golden-ratio type scale, weight = the 2-weight system (400/500),
+ * tone = semantic foreground tokens. No arbitrary px, no font-semibold=600. Components emit
+ * data-slot + data-* flags; all styling lives here.
+ */
+
+@layer components {
+  .ui-text {
+    margin: 0;
+  }
+
+  /* Size — steps of the golden-ratio scale (sm = base). */
+  [data-slot="text"][data-size="2xs"] {
+    font-size: var(--font-size-2xs);
+  }
+  [data-slot="text"][data-size="xs"] {
+    font-size: var(--font-size-xs);
+  }
+  [data-slot="text"][data-size="sm"] {
+    font-size: var(--font-size-sm);
+  }
+  [data-slot="text"][data-size="md"] {
+    font-size: var(--font-size-base);
+  }
+  [data-slot="text"][data-size="lg"] {
+    font-size: var(--font-size-lg);
+  }
+  [data-slot="text"][data-size="xl"] {
+    font-size: var(--font-size-xl);
+  }
+
+  /* Weight — system 2-weight; semibold resolves to the 500 token (not 600). */
+  [data-slot="text"][data-weight="regular"] {
+    font-weight: var(--font-weight-normal);
+  }
+  [data-slot="text"][data-weight="medium"] {
+    font-weight: var(--font-weight-medium);
+  }
+  [data-slot="text"][data-weight="semibold"] {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  /* Tone + Heading tone — semantic foreground tokens. */
+  [data-slot="text"][data-tone="default"],
+  [data-slot="heading"][data-tone="default"] {
+    color: hsl(var(--foreground));
+  }
+  [data-slot="text"][data-tone="muted"],
+  [data-slot="heading"][data-tone="muted"] {
+    color: hsl(var(--muted-foreground));
+  }
+  [data-slot="text"][data-tone="primary"],
+  [data-slot="heading"][data-tone="primary"] {
+    color: hsl(var(--primary));
+  }
+  [data-slot="text"][data-tone="success"],
+  [data-slot="heading"][data-tone="success"] {
+    color: hsl(var(--success));
+  }
+  [data-slot="text"][data-tone="warning"],
+  [data-slot="heading"][data-tone="warning"] {
+    color: hsl(var(--warning));
+  }
+  [data-slot="text"][data-tone="destructive"],
+  [data-slot="heading"][data-tone="destructive"] {
+    color: hsl(var(--destructive));
+  }
+  [data-slot="text"][data-tone="info"],
+  [data-slot="heading"][data-tone="info"] {
+    color: hsl(var(--info));
+  }
+
+  /* Alignment (logical), truncate, tabular, mono — shared by text + heading. */
+  [data-slot="text"][data-align="start"],
+  [data-slot="heading"][data-align="start"] {
+    text-align: start;
+  }
+  [data-slot="text"][data-align="center"],
+  [data-slot="heading"][data-align="center"] {
+    text-align: center;
+  }
+  [data-slot="text"][data-align="end"],
+  [data-slot="heading"][data-align="end"] {
+    text-align: end;
+  }
+  [data-slot="text"][data-truncate],
+  [data-slot="heading"][data-truncate] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-slot="text"][data-tabular] {
+    font-variant-numeric: tabular-nums;
+  }
+  [data-slot="text"][data-mono] {
+    font-family: var(--font-family-mono, ui-monospace, "SFMono-Regular", monospace);
+  }
+
+  /* Heading — sized from the --heading-h* tokens, medium weight, tight rhythm. */
+  [data-slot="heading"] {
+    margin: 0;
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-tight);
+    line-height: var(--line-height-tight);
+  }
+  [data-slot="heading"][data-level="1"] {
+    font-size: var(--heading-h1);
+  }
+  [data-slot="heading"][data-level="2"] {
+    font-size: var(--heading-h2);
+  }
+  [data-slot="heading"][data-level="3"] {
+    font-size: var(--heading-h3);
+  }
+  [data-slot="heading"][data-level="4"] {
+    font-size: var(--heading-h4);
+  }
+}

package/package.json

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

package/dist/general.prop-1GgJkf4b.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { A as AsChildProp, e as OnClickProp, c as DisabledProp } from './shared.prop-BvMSLFJ6.js';
-import { b as ButtonVariantProp, a as ButtonSizeProp } from './interaction.prop-R77MnAMZ.js';
-
-/** Foundation component prop types — @see docs/COMPONENTS.md#foundation */
-
-/** @see Button */
-type ButtonProp = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: ButtonVariantProp;
-    size?: ButtonSizeProp;
-    asChild?: AsChildProp;
-    onClick?: OnClickProp;
-    disabled?: DisabledProp;
-};
-
-export type { ButtonProp as B };

package/dist/interaction.prop-R77MnAMZ.d.ts

@@ -1,31 +0,0 @@
-/**
- * Interaction & visual variant prop types.
- * @see docs/PROPS-VOCABULARY.md#interaction-variants
- */
-/** Button visual style. */
-type ButtonVariantProp = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-/** Button size preset. */
-type SizeProp = "xs" | "sm" | "md" | "lg";
-/** Button size preset; icon-only sizes are a documented Button subset. */
-type ButtonSizeProp = SizeProp | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
-/** Form layout — label position relative to its control (Ant-style). */
-type FormLayoutProp = "vertical" | "horizontal" | "inline";
-/** Responsive breakpoint name (mobile-first); used by `collapseBelow` etc. */
-type BreakpointProp = "sm" | "md" | "lg" | "xl";
-/** Dialog confirm button emphasis. */
-type ConfirmVariantProp = "default" | "destructive";
-/** Semantic color/status intent. */
-type ToneProp = "default" | "success" | "warning" | "destructive" | "info" | "muted" | "neutral";
-/** Inline Alert visual treatment. */
-type AlertVariantProp = "default";
-/** Sort direction for table columns. */
-type SortDirectionProp = "asc" | "desc";
-/** Table column text alignment. */
-type ColumnAlignProp = "left" | "center" | "right";
-/** Active sort state on DataTable. */
-type SortStateProp = {
-    key: string;
-    direction: SortDirectionProp;
-};
-
-export type { AlertVariantProp as A, BreakpointProp as B, ColumnAlignProp as C, FormLayoutProp as F, SizeProp as S, ToneProp as T, ButtonSizeProp as a, ButtonVariantProp as b, ConfirmVariantProp as c, SortDirectionProp as d, SortStateProp as e };

package/dist/{chunk-DEUHS5A2.js → chunk-QATON677.js}

@@ -1,5 +1,5 @@
-import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-32WO3YLB.js';
 import { DropdownMenu, DropdownMenuTrigger } from './chunk-LMKUKCTN.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-32WO3YLB.js';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './chunk-DV52WNXO.js';
 import { densityClass, pageContainerVariantClass } from './chunk-INIIF7F7.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';

package/dist/{chunk-XZXE5KVV.js → chunk-ZFBIKJSJ.js}

@@ -1,6 +1,6 @@
 import { Input } from './chunk-BNXPDUO4.js';
-import { useTranslation } from './chunk-H2TX3OPW.js';
 import { Label } from './chunk-7PWBC4BY.js';
+import { useTranslation } from './chunk-H2TX3OPW.js';
 import { useDebouncedValue } from './chunk-LFW37FGG.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';