@godxjp/ui 13.11.2 → 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/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/package.json

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