@godxjp/ui 23.4.5 → 23.4.7

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

@@ -73,6 +73,7 @@ import {
   tableCellPaddingClass,
   tableRowHeightClass
 } from "../../lib/control-styles.js";
+import { isDevelopment } from "../../lib/dev.js";
 function resolveColumnHideBelow(col) {
   if (col.hideBelow) return col.hideBelow;
   if (col.hiddenOnMobile) return "md";
@@ -796,7 +797,7 @@ DataTable.Content = function DataTableContent() {
   const fixedTableLayout = scroll?.x !== void 0 || visibleColumns.some((col) => col.ellipsis || columnWidth(col.width).style !== void 0);
   const missingHeaderNames = visibleColumns.filter((col) => isEmptyHeader(col.header) && !col.ariaLabel).map((col) => col.key).join("|");
   React.useEffect(() => {
-    if (process.env.NODE_ENV === "production" || !missingHeaderNames) return;
+    if (!isDevelopment() || !missingHeaderNames) return;
     for (const key of missingHeaderNames.split("|")) {
       console.warn(
         `[DataTable] Column "${key}" renders a <th> with no visible or accessible text. Give it a visible \`header\`, or set \`ariaLabel\` (e.g. "Actions"/"Select") so screen readers can announce the column and axe reports no empty-table-header violation.`

package/dist/components/data-entry/form-field.js

@@ -10,6 +10,7 @@ import { FieldIdentityContext, FieldNameContext, mergeAriaIds } from "../../lib/
 import { useOptionalAppContext } from "../../app/app-provider.js";
 import { useFormLayout } from "./form.js";
 import { firstBagMessage, useClaimErrorKey, useFormErrorsRegistry } from "./form-errors.js";
+import { isDevelopment } from "../../lib/dev.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
 const FOCUSABLE_SELECTOR = 'input:not([type="hidden"]), select, textarea, button, [tabindex]:not([tabindex="-1"])';
 function FormField({
@@ -55,7 +56,7 @@ function FormField({
   const fieldKey = field ?? name ?? id;
   const emitFieldNames = useOptionalAppContext()?.emitFieldNames ?? false;
   const isStatic = staticText !== void 0;
-  if (!isStatic && typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && !React.isValidElement(children)) {
+  if (!isStatic && isDevelopment() && !React.isValidElement(children)) {
     console.warn(
       "FormField expects a single React element child to receive aria-describedby/aria-errormessage; the helper text and error message will not be associated with the control. Pass plain text via `staticText` instead of `children` for a read-only value row."
     );

package/dist/components/general/float-button.js

@@ -8,6 +8,7 @@ import { numberFormat } from "../../lib/intl-cache.js";
 import { cn } from "../../lib/utils.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
 import { Button } from "./button.js";
+import { isDevelopment } from "../../lib/dev.js";
 const GroupContext = React.createContext(null);
 const DEFAULT_ICON = /* @__PURE__ */ jsx(FileText, { "aria-hidden": "true" });
 const BUTTON_VARIANT = {
@@ -67,7 +68,7 @@ const FloatButtonRoot = React.forwardRef(function FloatButton({
   const mergedContent = isRenderable(content) ? content : description;
   const hasContent = isRenderable(mergedContent);
   const mergedIcon = !hasContent && icon == null ? DEFAULT_ICON : icon;
-  if (process.env.NODE_ENV !== "production" && mergedShape === "circle" && hasContent) {
+  if (isDevelopment() && mergedShape === "circle" && hasContent) {
     console.warn(
       "[@godxjp/ui] FloatButton: `content` is supported only when `shape` is `square` \u2014 a circle has no room for a line of text."
     );
@@ -153,7 +154,7 @@ function FloatButtonGroup({
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const isControlled = open != null;
   const isOpen = isControlled ? open : uncontrolledOpen;
-  if (process.env.NODE_ENV !== "production" && isControlled && !trigger) {
+  if (isDevelopment() && isControlled && !trigger) {
     console.warn(
       "[@godxjp/ui] FloatButton.Group: `open` needs to be used together with `trigger`."
     );

package/dist/components/general/typography.js

@@ -6,6 +6,7 @@ import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
 import { Textarea } from "../data-entry/textarea.js";
+import { isDevelopment } from "../../lib/dev.js";
 const COPIED_RESET_MS = 3e3;
 const DECORATION_ELEMENTS = [
   ["strong", "strong"],
@@ -409,7 +410,7 @@ const TextBase = React.forwardRef((props, ref) => {
   const ellipsisRowCount = ellipsis ? ellipsisRows(ellipsis) : 0;
   const effectiveClamp = ellipsisRowCount > 1 ? ellipsisRowCount : ellipsis ? void 0 : clampLines;
   const truncating = (truncate === true || ellipsisRowCount === 1) && effectiveClamp === void 0;
-  if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+  if (isDevelopment()) {
     if (clamp !== void 0 && clampLines === void 0) {
       console.warn(`Text: \`clamp\` must be a finite number \u2265 1 (got ${String(clamp)}); ignored.`);
     }

package/dist/components/layout/app-shell.js

@@ -7,6 +7,7 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../feedback/sheet.js";
 import { NavSurfaceProvider } from "./nav-surface.js";
 import { TopbarItem } from "./topbar-item.js";
+import { isDevelopment } from "../../lib/dev.js";
 function useAppShellNavigationMode() {
   return useMediaQuery("(width <= 56.25rem)") ? "drawer" : "docked";
 }
@@ -59,7 +60,7 @@ function AppShell({
     }
   };
   const hasTopbarContent = topbar !== void 0 || topbarLeft !== void 0 || topbarRight !== void 0 || logo !== void 0;
-  if (process.env.NODE_ENV !== "production" && topbar !== void 0) {
+  if (isDevelopment() && topbar !== void 0) {
     const ignored = [
       topbarLeft !== void 0 && "topbarLeft",
       topbarRight !== void 0 && "topbarRight"

package/dist/components/layout/error-surface.js

@@ -9,6 +9,7 @@ import { Progress } from "../data-display/progress.js";
 import { Text } from "../general/typography.js";
 import { CenteredShell } from "./centered-shell.js";
 import { dateTimeFormat, numberFormat } from "../../lib/intl-cache.js";
+import { isDevelopment } from "../../lib/dev.js";
 const STATUS_META = {
   400: { icon: TriangleAlert, tone: "warning" },
   403: { icon: ShieldAlert, tone: "warning" },
@@ -23,7 +24,7 @@ function singleAction(action) {
   const flattened = React.Children.toArray(action).flatMap(
     (child) => React.isValidElement(child) && child.type === React.Fragment ? React.Children.toArray(child.props.children) : [child]
   );
-  if (flattened.length > 1 && process.env.NODE_ENV !== "production") {
+  if (flattened.length > 1 && isDevelopment()) {
     console.error(
       "[@godxjp/ui] ErrorSurface: `action` takes EXACTLY ONE recovery action. The extra elements were dropped. Put support contact or secondary guidance in `description`."
     );

package/dist/components/ui/password-input.js

@@ -5,6 +5,7 @@ import { Eye, EyeOff } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { Input } from "../data-entry/input.js";
+import { isDevelopment } from "../../lib/dev.js";
 const PasswordInput = React.forwardRef(
   ({ className, visibilityToggle = true, iconRender, suffix, trailingIcon, allowClear, ...props }, ref) => {
     const { t } = useTranslation();
@@ -19,7 +20,7 @@ const PasswordInput = React.forwardRef(
       onVisibleChange?.(next);
     };
     const toggleOwnsTrailing = showToggle;
-    if (toggleOwnsTrailing && process.env?.NODE_ENV !== "production" && (suffix != null || trailingIcon != null || allowClear)) {
+    if (toggleOwnsTrailing && isDevelopment() && (suffix != null || trailingIcon != null || allowClear)) {
       console.warn(
         "[godxjp-ui] PasswordInput: the reveal toggle owns the trailing slot, so `suffix` / `trailingIcon` / `allowClear` are ignored. Use `leadingIcon` (or `prefix`), or pass `visibilityToggle={false}` to hand the slot back."
       );

package/dist/components/ui/separator.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Separator as AriaSeparator } from "react-aria-components";
 import { padStepToken } from "../../lib/variants.js";
 import { cn } from "../../lib/utils.js";
+import { isDevelopment } from "../../lib/dev.js";
 const Separator = React.forwardRef(
   ({
     className,
@@ -20,7 +21,7 @@ const Separator = React.forwardRef(
   }, ref) => {
     const hasLabel = typeof label === "string" && label.trim() !== "";
     const labelled = hasLabel && orientation === "horizontal";
-    if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+    if (isDevelopment()) {
       if (hasLabel && orientation === "vertical") {
         console.warn(
           'Separator: `label` is rendered on orientation="horizontal" only; it was ignored. Use a horizontal rule for a day divider / unread watermark.'

package/dist/lib/dev.d.ts

@@ -0,0 +1,45 @@
+/**
+ * `isDevelopment()` — the ONE place this package is allowed to ask whether it is in a dev build.
+ *
+ * WHY THIS EXISTS, and it is a crash rather than a tidiness question. Eight shipped modules read
+ * `process.env.NODE_ENV` to decide whether to emit a development warning. Three of them guarded
+ * the read with `typeof process !== "undefined"`; five did not, and `process` is not a browser
+ * global. Nothing in the build replaces it either — `tsup.config.ts` declares no `define`, and
+ * `grep -o 'process\.env' dist` on the published tarball of 23.4.4 returns 9 hits, raw.
+ *
+ * Measured, not theorised: this repo's own preview app (Vite 8, dev mode) renders
+ * `/isolate/data-entry-password-strength` as **"Preview render failed — process is not defined"**,
+ * six DOM nodes and nothing else. `PasswordInput` is one of the five unguarded modules and that
+ * page renders it. A bundler that happens to define `process.env.NODE_ENV` papers over it, which
+ * is exactly why it survived: most consumers' toolchains do, and the ones that do not get a blank
+ * screen rather than a warning.
+ *
+ * The helper reads the guard ONCE so the two halves cannot drift apart again, and it fails SAFE:
+ * where `process` is absent we cannot tell dev from production, so the answer is `false` and the
+ * warnings go quiet. A missing warning is a cost; a component that throws while rendering is not
+ * a cost, it is a broken page.
+ *
+ * A new bare `process.env` read in `src/components/**` is a CI failure — see
+ * `src/lib/__tests__/dev-guard.test.ts`.
+ *
+ * TWO THINGS ABOUT THE SHAPE BELOW, and the first one is why the three "guarded" modules were
+ * only half guarded.
+ *
+ * NO OPTIONAL CHAINING ON `process.env`. It does not survive the build. Written as
+ * `process.env?.NODE_ENV`, the transformed output measured in this repo's own vitest pipeline is
+ *
+ *     return typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+ *
+ * — the `?.` is GONE, because a bundler `define` matches the text `process.env` and substitutes
+ * through it, discarding the chain. So `?.` is not a guard here; it reads like one, which is
+ * worse than nothing. `typeof process` does survive (measured in the same dump), and a truthiness
+ * test on `process.env` survives as a truthiness test whatever it is replaced with.
+ *
+ * THE LITERAL IS KEPT ON THE LAST LINE ON PURPOSE. `process.env.NODE_ENV` is the exact text every
+ * bundler's `define` looks for, and that substitution is what lets a consumer's production build
+ * fold these branches away and drop the warning strings entirely. Reading the global indirectly
+ * (`globalThis.process`) would be equally crash-proof and would cost every consumer that
+ * dead-code elimination, so the order of the checks does the work instead: the guard runs first,
+ * and the replaceable literal is only reached once `env` is known to exist.
+ */
+export declare function isDevelopment(): boolean;

package/dist/lib/dev.js

@@ -0,0 +1,7 @@
+function isDevelopment() {
+  if (typeof process === "undefined" || !process.env) return false;
+  return process.env.NODE_ENV !== "production";
+}
+export {
+  isDevelopment
+};

package/dist/styles/chart-layout.css

@@ -27,6 +27,10 @@
   color: hsl(var(--muted-foreground));
 }
 
+.ui-chart .recharts-legend-item-text {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
 .ui-chart .recharts-default-tooltip {
   border-radius: var(--radius);
   border: 1px solid hsl(var(--border)) !important;

package/dist/styles/navigation-layout.css

@@ -219,6 +219,32 @@
     box-shadow: inset 0 var(--tabs-card-rail-border-width) 0 hsl(var(--border));
   }
 
+  [data-slot="tabs"][data-variant="card"][data-placement="start"] [data-slot="tabs-list"],
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
+    [data-slot="tabs-list"] {
+    box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
+  }
+
+  [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
+    [data-slot="tabs-list"] {
+    box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
+  }
+
+  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="start"]
+    [data-slot="tabs-list"],
+  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
+    [data-slot="tabs-list"] {
+    box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
+  }
+
+  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"]
+    [data-slot="tabs-list"],
+  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
+    [data-slot="tabs-list"] {
+    box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
+  }
+
   .ui-tabs-tab-remove {
     display: inline-flex;
     flex: 0 0 auto;

package/dist/styles/table-layout.css

@@ -121,6 +121,7 @@
   }
 
   .ui-data-table-sort-button {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: var(--space-inline-xs);
@@ -132,6 +133,18 @@
     outline: none;
   }
 
+  .ui-data-table-sort-button::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+    min-inline-size: var(--touch-target-min);
+    min-block-size: var(--touch-target-min);
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
   .ui-data-table-bulk {
     display: flex;
     align-items: center;

package/docs/navigation/tabs.tsx

@@ -600,6 +600,26 @@ export default function Demo() {
                 size="lg"
                 items={journalItems}
               />
+              {/* CARD on the vertical axis. `card` + `bottom` above had shipped upside down, and
+                  `start`/`end` had no card example at all — so the rail, which is drawn with a
+                  box-shadow and therefore cannot be logical, had nothing to be measured against
+                  in either direction. */}
+              <Tabs
+                id="antd-card-start"
+                defaultValue="pending"
+                variant="card"
+                tabPlacement="start"
+                size="sm"
+                items={journalItems}
+              />
+              <Tabs
+                id="antd-card-end"
+                defaultValue="pending"
+                variant="card"
+                tabPlacement="end"
+                size="sm"
+                items={journalItems}
+              />
             </Flex>
           </CardContent>
         </Card>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "23.4.5",
-  "godxUiMcp": "23.4.5",
+  "version": "23.4.7",
+  "godxUiMcp": "23.4.7",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",