@godxjp/ui 13.11.1 → 13.12.0

package/dist/components/data-display/card.d.ts

@@ -65,6 +65,22 @@ export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttri
     /** Full-bleed footer (Ant Design `actions` bar). */
     flush?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
+export type CardBarProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Right-aligned actions slot (settings/save), Ant `tabBarExtraContent`-style. */
+    extra?: React.ReactNode;
+};
+/**
+ * CardBar — a horizontal bar (view tabs, toolbar, filter chips) that can sit at
+ * ANY position inside a Card. It draws its own separators FROM its position: a
+ * top bar gets a bottom border, a bottom bar gets a top border, a middle bar
+ * gets both, and a sole child gets none (the card border is enough). The main
+ * area scrolls horizontally; the `extra` slot is pinned to the inline-end edge
+ * for actions (column settings, save view, …).
+ */
+export declare const CardBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /** Right-aligned actions slot (settings/save), Ant `tabBarExtraContent`-style. */
+    extra?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants> & {
     label: React.ReactNode;
     value: React.ReactNode;

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

@@ -77,6 +77,13 @@ const CardFooter = React.forwardRef(
   )
 );
 CardFooter.displayName = "CardFooter";
+const CardBar = React.forwardRef(
+  ({ className, children, extra, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, "data-slot": "card-bar", className: cn("ui-card-bar", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { "data-slot": "card-bar-main", className: "ui-card-bar-main", children }),
+    extra != null ? /* @__PURE__ */ jsx("div", { "data-slot": "card-bar-extra", className: "ui-card-bar-extra", children: extra }) : null
+  ] })
+);
+CardBar.displayName = "CardBar";
 function getDeltaTone(delta, inverse) {
   const text = typeof delta === "string" || typeof delta === "number" ? String(delta).trim() : "";
   const sign = text.match(/^[+\-−]/)?.[0];
@@ -143,6 +150,7 @@ CardAction.displayName = "CardAction";
 export {
   Card,
   CardAction,
+  CardBar,
   CardContent,
   CardCover,
   CardDescription,

package/dist/components/data-display/index.d.ts

@@ -1,8 +1,8 @@
 export { Badge } from "./badge";
 export type { BadgeProps } from "./badge";
 export { Avatar, AvatarImage, AvatarFallback } from "./avatar";
-export { Card, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, CardAction, StatCard, } from "./card";
-export type { StatCardProps } from "./card";
+export { Card, CardBar, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, CardAction, StatCard, } from "./card";
+export type { StatCardProps, CardBarProps } from "./card";
 export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
 export { Descriptions } from "./descriptions";
 export { DataTable } from "./data-table";

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

@@ -2,6 +2,7 @@ import { Badge } from "./badge";
 import { Avatar, AvatarImage, AvatarFallback } from "./avatar";
 import {
   Card,
+  CardBar,
   CardContent,
   CardCover,
   CardDescription,
@@ -51,6 +52,7 @@ export {
   Badge,
   Card,
   CardAction,
+  CardBar,
   CardContent,
   CardCover,
   CardDescription,

package/dist/components/data-entry/date-picker.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { CalendarIcon, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
 import { parseDateInput, toIsoDate } from "../../lib/datetime/parse";
+import { useControlledLatch } from "../../lib/hooks";
 import { cn } from "../../lib/utils";
 import { Button } from "../general/button";
 import { Input } from "./input";
@@ -26,7 +27,7 @@ function DatePicker({
   const { t } = useTranslation();
   const { dayPickerLocale } = usePickerLocales(localeProp);
   const [open, setOpen] = React.useState(false);
-  const isControlled = React.useRef(valueProp !== void 0).current;
+  const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
   const emit = (next) => {

package/dist/components/data-entry/date-range-picker.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { ArrowRight, CalendarIcon, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
 import { parseDateInput, toIsoDate } from "../../lib/datetime";
+import { useControlledLatch } from "../../lib/hooks";
 import { cn } from "../../lib/utils";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
 import { Calendar } from "./calendar";
@@ -27,7 +28,7 @@ function DateRangePicker({
   const autoId = React.useId();
   const fromId = id ?? autoId;
   const toId = `${fromId}-to`;
-  const isControlled = React.useRef(valueProp !== void 0).current;
+  const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
   const [fromText, setFromText] = React.useState(() => toIsoDate(value?.from));

package/dist/components/data-entry/month-picker.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
+import { useControlledLatch } from "../../lib/hooks";
 import { cn } from "../../lib/utils";
 import { Button } from "../general/button";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
@@ -32,7 +33,7 @@ function MonthPicker({
   const [open, setOpen] = React.useState(false);
   const autoId = React.useId();
   const inputId = id ?? autoId;
-  const isControlled = React.useRef(valueProp !== void 0).current;
+  const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
   const [text, setText] = React.useState(() => toYmText(value));

package/dist/components/data-entry/month-range-picker.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ArrowRight, CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
+import { useControlledLatch } from "../../lib/hooks";
 import { cn } from "../../lib/utils";
 import { Button } from "../general/button";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
@@ -34,7 +35,7 @@ function MonthRangePicker({
   const autoId = React.useId();
   const fromId = id ?? autoId;
   const toId = `${fromId}-to`;
-  const isControlled = React.useRef(valueProp !== void 0).current;
+  const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
   const [fromText, setFromText] = React.useState(() => toYmText(value?.from));

package/dist/lib/hooks.d.ts

@@ -11,5 +11,20 @@ export declare function useDebouncedValue<T>(value: T, delay?: number): T;
  * setState is scheduled asynchronously (setTimeout 0 / ms) — Rules of React safe.
  */
 export declare function useTimeoutFlag(signal: unknown, ms?: number): boolean;
+/**
+ * Controlled-ness latch for `value`/`defaultValue`/`onValueChange` controls
+ * whose empty state is `undefined` (pickers carrying `Date`/`DateRange`).
+ *
+ * A control counts as controlled once a DEFINED `value` has EVER been passed:
+ * - mounted with a defined `value` → controlled, and a later `value={undefined}`
+ *   stays controlled-EMPTY (not mistaken for uncontrolled);
+ * - mounted with `value={undefined}` (an empty form that later restores a
+ *   saved value) → uncontrolled until the first defined value arrives, then
+ *   PROMOTES to controlled for good.
+ *
+ * Fixing controlled-ness at mount (the previous behaviour) silently ignored
+ * every later controlled value in the second case.
+ */
+export declare function useControlledLatch(valueIsDefined: boolean): boolean;
 export declare function useMediaQuery(query: string): boolean;
 export declare function useIsMobile(): boolean;

package/dist/lib/hooks.js

@@ -35,6 +35,11 @@ function useTimeoutFlag(signal, ms = 2e3) {
   }, [signal, ms]);
   return Boolean(signal) && active;
 }
+function useControlledLatch(valueIsDefined) {
+  const [latched, setLatched] = useState(valueIsDefined);
+  if (valueIsDefined && !latched) setLatched(true);
+  return valueIsDefined || latched;
+}
 function useMediaQuery(query) {
   const isBrowser = typeof window !== "undefined";
   const getMatch = () => isBrowser ? window.matchMedia(query).matches : false;
@@ -63,6 +68,7 @@ function useIsMobile() {
   return useMediaQuery("(max-width: 767px)");
 }
 export {
+  useControlledLatch,
   useDebouncedValue,
   useIsMobile,
   useMediaQuery,

package/dist/props/registry.d.ts

@@ -914,6 +914,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display/card.tsx";
         readonly vocabulary: readonly ["ClassNameProp", "ChildrenProp"];
     };
+    readonly CardBarProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display/card.tsx";
+        readonly vocabulary: readonly ["ClassNameProp", "ChildrenProp"];
+    };
     readonly StatCardProp: {
         readonly group: "data-display";
         readonly file: "components/data-display/card.tsx";

package/dist/props/registry.js

@@ -966,6 +966,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display/card.tsx",
     vocabulary: ["ClassNameProp", "ChildrenProp"]
   },
+  CardBarProp: {
+    group: "data-display",
+    file: "components/data-display/card.tsx",
+    vocabulary: ["ClassNameProp", "ChildrenProp"]
+  },
   StatCardProp: {
     group: "data-display",
     file: "components/data-display/card.tsx",

package/dist/styles/card-layout.css

@@ -103,6 +103,43 @@
     padding-bottom: 0;
   }
 
+  /* ── CardBar — positionable tab/toolbar strip (CardBar in card.tsx) ───────
+   * Separators come from POSITION: a top bar gets a bottom border, a bottom
+   * bar a top border, a middle bar both, a sole child none. `border-block` is
+   * the block (top/bottom) axis — RTL-neutral. The card's own overflow:hidden
+   * clips the bar to the rounded corners, so it needs no radius of its own. */
+  [data-slot="card-bar"] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-inline-md);
+    padding: var(--card-space-header-y) var(--card-space-inset);
+    border-block: 1px solid hsl(var(--card-border));
+  }
+
+  [data-slot="card-bar"]:first-child {
+    border-block-start-width: 0;
+  }
+
+  [data-slot="card-bar"]:last-child {
+    border-block-end-width: 0;
+  }
+
+  [data-slot="card-bar-main"] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-inline-sm);
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow-x: auto;
+  }
+
+  [data-slot="card-bar-extra"] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-inline-xs);
+    flex-shrink: 0;
+  }
+
   .ui-card-header--banded {
     border-bottom: var(--card-header-border-bottom);
     background-color: hsl(var(--card-header-background) / var(--card-header-background-alpha));

package/dist/styles/form-layout.css

@@ -39,6 +39,14 @@
     min-width: 0;
     /* Cap the control width when a controlWidth is set; otherwise fill the column. */
     max-inline-size: var(--form-control-width, none);
+    /* Reserve the control-row height and centre the content so a SHORT control
+     * (switch, slider, rating, a bare checkbox/radio — anything thinner than an
+     * input) lines up with the label in a horizontal field instead of sitting
+     * high. `align-content: center` centres the content row without stretching
+     * the control; full-width inputs still fill via the 1fr column, and taller
+     * controls (textarea) simply grow past the floor. */
+    min-height: var(--control-height);
+    align-content: center;
   }
 
   /* Let controls (and helper/error) shrink within the cell instead of forcing

package/package.json

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