@godxjp/ui 33.25.1 → 33.26.0

package/dist/components/layout/flex.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children } from "react";
+import { Children, useEffect, useRef } from "react";
 import { mergeAriaIds } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { flexGapClass, padStyle, padStepToken } from "../../lib/variants.js";
@@ -18,6 +18,12 @@ function Flex(props) {
 }
 function LayoutFlex({
   as: Element = "div",
+  viewport,
+  ref: forwardedRef,
+  basis,
+  overflow,
+  rotate,
+  animated,
   direction = "row",
   marker,
   grow,
@@ -47,6 +53,31 @@ function LayoutFlex({
   children,
   ...props
 }) {
+  const viewportRef = useRef(null);
+  useEffect(() => {
+    const node = viewportRef.current;
+    if (!viewport || !node) return;
+    const update = () => {
+      const visual = window.visualViewport;
+      const bottom = visual ? visual.height + visual.offsetTop : window.innerHeight;
+      const available = Math.max(0, bottom - Math.max(0, node.getBoundingClientRect().top));
+      node.style.setProperty("--flex-viewport-available", `${available}px`);
+    };
+    update();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(document.documentElement);
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    window.visualViewport?.addEventListener("resize", update);
+    window.visualViewport?.addEventListener("scroll", update);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+      window.visualViewport?.removeEventListener("resize", update);
+      window.visualViewport?.removeEventListener("scroll", update);
+    };
+  }, [viewport, Element]);
   let domProps = props;
   if (props.role === void 0 && !HAS_IMPLICIT_ROLE.has(typeof Element === "string" ? Element : "") && (props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0)) {
     const {
@@ -75,6 +106,16 @@ function LayoutFlex({
   return /* @__PURE__ */ jsxs(
     Element,
     {
+      ref: (node) => {
+        viewportRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      "data-viewport": viewport ? "" : void 0,
+      "data-basis": basis,
+      "data-overflow": overflow,
+      "data-rotate": rotate,
+      "data-animated": animated ? "" : void 0,
       "data-direction": responsive ? "responsive" : direction,
       "data-grow": grow ? "" : void 0,
       "data-shrink": shrink === false ? "false" : void 0,
@@ -112,6 +153,11 @@ function LayoutFlex({
   );
 }
 function AttachedFlex({
+  viewport: _viewport,
+  basis: _basis,
+  overflow: _overflow,
+  rotate: _rotate,
+  animated: _animated,
   as: _as,
   direction,
   marker: _marker,

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.25.1",
+  "version": "33.26.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

@@ -805,6 +805,7 @@
   "chart": {
     "datumLabel": "{label}, {series}: {value}",
     "empty": "No data to display",
+    "summaryRadar": "Profile with {points} axes on a common scale from 0 to {maximum}",
     "summaryCartesian": "Chart with {series} series across {points} data points",
     "summaryPie": "Pie chart with {slices} slices",
     "summaryTrend": "Bar trend with {points} data points",

package/dist/i18n/messages/ja.json

@@ -779,6 +779,7 @@
   "chart": {
     "datumLabel": "{label}, {series}: {value}",
     "empty": "データがありません",
+    "summaryRadar": "{points}軸のプロファイル（共通尺度：0〜{maximum}）",
     "summaryCartesian": "{series}系列・{points}データ点のグラフ",
     "summaryPie": "{slices}区分の円グラフ",
     "summaryTrend": "{points}データ点の推移棒グラフ",

package/dist/i18n/messages/vi.json

@@ -780,6 +780,7 @@
   "chart": {
     "datumLabel": "{label}, {series}: {value}",
     "empty": "Không có dữ liệu",
+    "summaryRadar": "Hồ sơ {points} trục trên thang chung từ 0 đến {maximum}",
     "summaryCartesian": "Biểu đồ gồm {series} chuỗi trên {points} điểm dữ liệu",
     "summaryPie": "Biểu đồ tròn gồm {slices} phần",
     "summaryTrend": "Biểu đồ cột xu hướng gồm {points} điểm dữ liệu",

package/dist/props/components/charts.prop.d.ts

@@ -252,4 +252,23 @@ export type PieChartProp = {
     className?: ClassNameProp;
     id?: IdProp;
 };
+/** Single quantitative profile on a shared zero-based scale; incomplete data is never zero-filled. */
+export type RadarChartProp = {
+    data: ChartDatum[];
+    categoryKey: string;
+    valueKey: string;
+    /** Required common ceiling, strictly positive; values outside [0,valueMax] are invalid. */
+    valueMax: number;
+    valueTicks?: number[];
+    label: LabelProp;
+    showCaption?: boolean;
+    description?: DescriptionProp;
+    size?: SizeProp;
+    numberFormat?: Intl.NumberFormatOptions;
+    emptyMessage?: EmptyMessageProp;
+    footer?: FooterProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+    ref?: React.Ref<HTMLElement>;
+};
 export {};

package/dist/props/components/layout.prop.d.ts

@@ -171,9 +171,21 @@ export type FlexJustifyProp = "start" | "center" | "end" | "between" | "around"
  * Bringhurst's 45–75 character reading band, `wide` (72rem) is the MARKETING measure. Do not give
  * a reading column `wide` — that rule is `--page-measure-wide`'s own, and it travels with the word.
  */
-export type FlexMeasureProp = "narrow" | "medium" | "wide";
+export type FlexMeasureProp = "narrow" | "medium" | "wide" | "card" | "card-compact";
 /** @see Flex */
 export type FlexProp = React.HTMLAttributes<HTMLElement> & {
+    /** React19 ref to the rendered element. */
+    ref?: React.Ref<HTMLElement>;
+    /** Fit the visual viewport below this element's measured top; observes resize and scroll. */
+    viewport?: boolean;
+    /** Equal flexible region: flex 1 1 0 with zero minimum block size. */
+    basis?: "equal";
+    /** Internal scrolling; scroll-x and scroll-y constrain the other axis. */
+    overflow?: "hidden" | "auto" | "scroll-x" | "scroll-y";
+    /** Declarative orientation; no implied domain action. */
+    rotate?: 0 | 90 | 180 | 270;
+    /** Animate orientation changes only. Reduced motion always settles immediately. */
+    animated?: boolean;
     /**
      * Render element — `div` (default) or `span` when the Flex sits in a PHRASING context and a
      * `<div>` would be invalid HTML: inside a `TabsTrigger`/`PopoverTrigger`/`Button` (all of which
@@ -203,7 +215,7 @@ export type FlexProp = React.HTMLAttributes<HTMLElement> & {
      */
     marker?: FlexMarkerProp;
     /** Lightweight surfaces for rows and notices; no Card elevation by default. */
-    surface?: "muted" | "popover" | "warning";
+    surface?: "muted" | "popover" | "warning" | "felt" | "etched";
     /** Negative inline inset, using the same spacing scale as pad. */
     bleed?: GapProp;
     /** Floating row actions: show on parent hover, focus-within, and touch. */

package/dist/props/registry.d.ts

@@ -909,6 +909,26 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly [{
+            readonly field: "viewport";
+            readonly local: true;
+            readonly reason: "Generic bounded composition and declarative orientation capability; inert when omitted.";
+        }, {
+            readonly field: "basis";
+            readonly local: true;
+            readonly reason: "Generic bounded composition and declarative orientation capability; inert when omitted.";
+        }, {
+            readonly field: "overflow";
+            readonly local: true;
+            readonly reason: "Generic bounded composition and declarative orientation capability; inert when omitted.";
+        }, {
+            readonly field: "rotate";
+            readonly local: true;
+            readonly reason: "Generic bounded composition and declarative orientation capability; inert when omitted.";
+        }, {
+            readonly field: "animated";
+            readonly local: true;
+            readonly reason: "Generic bounded composition and declarative orientation capability; inert when omitted.";
+        }, {
             readonly field: "as";
             readonly local: true;
             readonly reason: "Closed tag seam (div | span) so a Flex stays valid HTML inside a phrasing-only parent such as the <button> a TabsTrigger renders — same shape as ListRow's `as` (gh#354).";
@@ -3616,6 +3636,43 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "Chart-specific point-marker toggle.";
         }];
     };
+    readonly RadarChartProp: {
+        readonly group: "data-display";
+        readonly file: "components/charts.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "FooterProp", "ClassNameProp", "IdProp", {
+            readonly field: "data";
+            readonly local: true;
+            readonly reason: "Complete same-unit polar profile rows.";
+        }, {
+            readonly field: "categoryKey";
+            readonly local: true;
+            readonly reason: "Accessor for translated axis labels.";
+        }, {
+            readonly field: "valueKey";
+            readonly local: true;
+            readonly reason: "Accessor for the quantitative axis value.";
+        }, {
+            readonly field: "valueMax";
+            readonly local: true;
+            readonly reason: "Required positive shared scale ceiling.";
+        }, {
+            readonly field: "valueTicks";
+            readonly local: true;
+            readonly reason: "Optional positive shared scale ticks.";
+        }, {
+            readonly field: "showCaption";
+            readonly local: true;
+            readonly reason: "Hide visible caption while preserving figure name.";
+        }, {
+            readonly field: "numberFormat";
+            readonly local: true;
+            readonly reason: "Intl options for exact profile values.";
+        }, {
+            readonly field: "ref";
+            readonly local: true;
+            readonly reason: "Forwarded figure reference.";
+        }];
+    };
     readonly BarChartProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";

package/dist/props/registry.js

@@ -912,6 +912,31 @@ const COMPONENT_PROP_REGISTRY = {
     group: "layout",
     file: "components/layout.prop.ts",
     vocabulary: [
+      {
+        field: "viewport",
+        local: true,
+        reason: "Generic bounded composition and declarative orientation capability; inert when omitted."
+      },
+      {
+        field: "basis",
+        local: true,
+        reason: "Generic bounded composition and declarative orientation capability; inert when omitted."
+      },
+      {
+        field: "overflow",
+        local: true,
+        reason: "Generic bounded composition and declarative orientation capability; inert when omitted."
+      },
+      {
+        field: "rotate",
+        local: true,
+        reason: "Generic bounded composition and declarative orientation capability; inert when omitted."
+      },
+      {
+        field: "animated",
+        local: true,
+        reason: "Generic bounded composition and declarative orientation capability; inert when omitted."
+      },
       {
         field: "as",
         local: true,
@@ -3809,6 +3834,31 @@ const COMPONENT_PROP_REGISTRY = {
       { field: "showDots", local: true, reason: "Chart-specific point-marker toggle." }
     ]
   },
+  RadarChartProp: {
+    group: "data-display",
+    file: "components/charts.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "DescriptionProp",
+      "SizeProp",
+      "EmptyMessageProp",
+      "FooterProp",
+      "ClassNameProp",
+      "IdProp",
+      { field: "data", local: true, reason: "Complete same-unit polar profile rows." },
+      { field: "categoryKey", local: true, reason: "Accessor for translated axis labels." },
+      { field: "valueKey", local: true, reason: "Accessor for the quantitative axis value." },
+      { field: "valueMax", local: true, reason: "Required positive shared scale ceiling." },
+      { field: "valueTicks", local: true, reason: "Optional positive shared scale ticks." },
+      {
+        field: "showCaption",
+        local: true,
+        reason: "Hide visible caption while preserving figure name."
+      },
+      { field: "numberFormat", local: true, reason: "Intl options for exact profile values." },
+      { field: "ref", local: true, reason: "Forwarded figure reference." }
+    ]
+  },
   BarChartProp: {
     group: "data-display",
     file: "components/charts.prop.ts",

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.25.1",
+  "version": "33.26.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -1094,6 +1094,12 @@
         "data-display-layout.css"
       ]
     },
+    "RadarChart": {
+      "layers": [
+        "layout.css",
+        "chart-layout.css"
+      ]
+    },
     "Radio": {
       "layers": [
         "control.css",

package/dist/styles/layout.css

@@ -2515,12 +2515,30 @@
     inline-size: var(--affix-content-inline-size, auto);
   }
 
-  .ui-affix-content[data-affixed][data-clamped] {
+  .ui-affix-content[data-affixed][data-clamped],
+  .ui-affix[data-pin] > .ui-affix-content[data-clamped] {
     max-block-size: var(--affix-content-max-block-size, none);
     overflow-y: auto;
     overscroll-behavior: contain;
   }
 
+  .ui-affix[data-pin="sticky-start"] {
+    position: sticky;
+    inset-block-start: var(--affix-inset-block-start);
+    z-index: var(--sticky-z-index);
+  }
+
+  .ui-affix[data-pin="sticky-end"] {
+    position: sticky;
+    inset-block-end: var(--affix-inset-block-end);
+    z-index: var(--sticky-z-index);
+  }
+
+  .ui-affix[data-pin] > .ui-affix-content[data-affixed] {
+    position: static;
+    inline-size: auto;
+  }
+
   .ui-affix-content[data-affixed][data-edge="block-start"] {
     inset-block-start: calc(var(--affix-target-inset, 0px) + var(--affix-inset-block-start));
   }
@@ -2560,5 +2578,158 @@
     grid-template-columns: var(--responsive-grid-panels-track-size);
     gap: var(--responsive-grid-panels-gap);
   }
+}
+
+@layer components {
+  .ui-flex[data-viewport] {
+    block-size: var(--flex-viewport-available, 100dvh);
+    min-block-size: 0;
 
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
+  }
+  .ui-flex[data-basis="equal"] {
+    flex: 1 1 0;
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+  .ui-flex[data-overflow] {
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+  .ui-flex[data-overflow="hidden"] {
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
+  }
+  .ui-flex[data-overflow="auto"] {
+    overflow: auto;
+  }
+  .ui-flex[data-overflow="scroll-x"] {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  .ui-flex[data-overflow="scroll-y"] {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .ui-flex[data-measure="card"],
+  .ui-flex[data-measure="card-compact"] {
+    margin-inline: 0;
+    flex: 0 0 auto;
+    max-inline-size: none;
+  }
+  .ui-flex[data-measure="card"] {
+    inline-size: calc(var(--flex-card-width) * var(--flex-card-size-ratio));
+    block-size: calc(var(--flex-card-width) * var(--flex-card-size-ratio));
+    align-items: center;
+    justify-content: center;
+  }
+  .ui-flex[data-measure="card-compact"] {
+    inline-size: calc(var(--flex-compact-card-width) * var(--flex-card-size-ratio));
+    block-size: calc(var(--flex-compact-card-width) * var(--flex-card-size-ratio));
+    align-items: center;
+    justify-content: center;
+  }
+  .ui-flex[data-rotate="0"] {
+    transform: rotate(0deg);
+  }
+  .ui-flex[data-rotate="90"] {
+    transform: rotate(90deg);
+  }
+  .ui-flex[data-rotate="180"] {
+    transform: rotate(180deg);
+  }
+  .ui-flex[data-rotate="270"] {
+    transform: rotate(270deg);
+  }
+  .ui-flex[data-animated][data-rotate] {
+    transition: transform var(--flex-orientation-duration) var(--ease-decelerate);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ui-flex[data-animated][data-rotate] {
+      transition: none;
+    }
+  }
+}
+
+@layer components {
+  .ui-flex[data-measure="card"] > * {
+    inline-size: var(--flex-card-width);
+    max-inline-size: var(--flex-card-width);
+  }
+  .ui-flex[data-measure="card-compact"] > * {
+    inline-size: var(--flex-compact-card-width);
+    max-inline-size: var(--flex-compact-card-width);
+  }
+  .ui-flex[data-viewport] {
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+    box-sizing: border-box;
+  }
+}
+
+@layer components {
+  .ui-flex[data-surface="felt"] {
+    --background: var(--flex-felt-background, var(--primary));
+    --button-outline-foreground: hsl(var(--foreground));
+    --button-outline-background: transparent;
+    --button-outline-border-color: hsl(
+      var(--flex-etched-border-color, var(--foreground)) / var(--flex-felt-control-border-alpha)
+    );
+    --button-link-foreground: hsl(var(--foreground));
+    --control-surface-background: hsl(var(--background));
+    --control-surface-border-color: hsl(
+      var(--flex-etched-border-color, var(--foreground)) / var(--flex-felt-control-border-alpha)
+    );
+    --secondary: var(--background);
+    --secondary-foreground: var(--foreground);
+    --accent: var(--foreground);
+    --accent-foreground: var(--background);
+    --slider-track-background: hsl(
+      var(--flex-etched-border-color, var(--foreground)) / var(--flex-felt-track-alpha)
+    );
+    --slider-range-background: hsl(var(--foreground));
+
+    --foreground: var(--flex-felt-foreground, var(--primary-foreground));
+    --muted-foreground: var(--flex-felt-muted-foreground, var(--primary-foreground));
+    --ring: var(--flex-felt-focus-color, var(--primary-foreground));
+    color: hsl(var(--foreground));
+    background-color: hsl(var(--flex-felt-background, var(--primary)));
+    background-image:
+      radial-gradient(
+        ellipse at center,
+        hsl(var(--foreground) / var(--flex-felt-highlight-alpha)),
+        transparent var(--flex-felt-highlight-size)
+      ),
+      repeating-linear-gradient(
+        0deg,
+        hsl(var(--foreground) / var(--flex-felt-grain-alpha)) 0,
+        transparent var(--flex-felt-grain-width),
+        transparent var(--flex-felt-grain-size)
+      ),
+      repeating-linear-gradient(
+        90deg,
+        hsl(var(--foreground) / var(--flex-felt-grain-alpha)) 0,
+        transparent var(--flex-felt-grain-width),
+        transparent var(--flex-felt-grain-size)
+      );
+  }
+  .ui-flex[data-surface="etched"] {
+    border: var(--flex-etched-border-size) solid
+      hsl(var(--flex-etched-border-color, var(--foreground)) / var(--flex-etched-border-alpha));
+    border-radius: var(--flex-etched-radius, var(--radius-md));
+    background: transparent;
+    box-sizing: border-box;
+  }
+}
+
+@layer components {
+  .ui-flex[data-surface="felt"] .ui-button--default {
+    --primary-foreground: var(--background);
+    --primary-hover: var(--foreground);
+    --button-default-background: hsl(var(--foreground));
+  }
+  .ui-flex[data-surface="felt"] .ui-slider-thumb {
+    background: hsl(var(--foreground));
+    border-color: hsl(var(--flex-etched-border-color, var(--foreground)));
+  }
 }