@godxjp/ui 33.25.2 → 33.27.0

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. */
@@ -261,8 +273,18 @@ export type FlexProp = React.HTMLAttributes<HTMLElement> & {
      * Ghi đè `pad` ở TỪNG CẠNH, không phải cả cụm.
      */
     padRaw?: PadRawProp;
+    /** Cross-axis alignment of the children (`align-items`). Unset keeps the browser default, `stretch`. */
     align?: FlexAlignProp;
+    /** Main-axis distribution of the children (`justify-content`). Unset keeps the browser default, `start`. */
     justify?: FlexJustifyProp;
+    /**
+     * Let the children wrap onto further lines (`flex-wrap: wrap`) instead of overflowing one line.
+     *
+     * It also changes the Flex's behaviour INSIDE a table cell: it emits `data-wrap`, which opts the
+     * row out of the table-cell rule that pulls buttons, badges and avatars up with a negative
+     * `margin-block` (table-layout.css). A wrapping chip list needs that opt-out: with the negative
+     * margin, its second line overlaps the first (gh#1495).
+     */
     wrap?: boolean;
     /**
      * Drop this region below a breakpoint step (`sm` 40rem · `md` 48rem · `lg` 64rem · `xl` 80rem).

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.2",
+  "version": "33.27.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -334,7 +334,8 @@
     },
     "CenteredShell": {
       "layers": [
-        "shell-layout.css"
+        "shell-layout.css",
+        "text-layout.css"
       ]
     },
     "ChatBubble": {
@@ -1094,6 +1095,12 @@
         "data-display-layout.css"
       ]
     },
+    "RadarChart": {
+      "layers": [
+        "layout.css",
+        "chart-layout.css"
+      ]
+    },
     "Radio": {
       "layers": [
         "control.css",

package/dist/styles/layout.css

@@ -2578,5 +2578,161 @@
     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, calc(var(--radius) / var(--radius-ratio)))
+    );
+    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)));
+  }
 }