@siyahi/ui 0.1.7-next.1 → 0.1.7-next.3

package/README.md

@@ -79,7 +79,10 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 - **Cards and badges as installed**: every `Card`, stat tiles included, keeps
   luma's `rounded-4xl`, `shadow-md` and faint ring. A category (a sector, a
   broker, a unit's kind) is an outline `Badge`: categories stay neutral, and
-  colour is left to the four meaning colours and the charts.
+  colour is left to the four meaning colours and the charts. On a narrow card
+  (header under 24rem, so any phone) a header action such as a toggle drops
+  under the title and description, left-aligned; a stat tile's badge stays
+  top right.
 - **Formatters**: `money`, `moneyCompact`, `pct` and `time`, or `useFormat()`
   for the same bound to the provider's locale.
   `useFormat().time(value, { withDate: true })` (or

package/dist/components/registry/dashboard-01/section-cards.js

@@ -1,14 +1,22 @@
 "use client";
 import { Badge } from "../../ui/badge.js";
 import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
+import { cn } from "../../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 //#region src/components/registry/dashboard-01/section-cards.tsx
+const COLUMNS = {
+	2: "@xl/main:grid-cols-2",
+	3: "@3xl/main:grid-cols-3",
+	4: "@xl/main:grid-cols-2 @5xl/main:grid-cols-4",
+	5: "@3xl/main:grid-cols-3 @7xl/main:grid-cols-5",
+	6: "@3xl/main:grid-cols-3"
+};
 function SectionCards({ items }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "@container/main",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "grid grid-cols-1 gap-4 @xl/main:grid-cols-2 @5xl/main:grid-cols-4",
+			className: cn("grid grid-cols-1 gap-4", COLUMNS[items.length] ?? COLUMNS[4]),
 			children: items.map((item) => /* @__PURE__ */ jsxs(Card, {
 				className: "@container/card",
 				children: [/* @__PURE__ */ jsxs(CardHeader, { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.7-next.1",
+  "version": "0.1.7-next.3",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",

package/styles/siyahi.css

@@ -194,3 +194,24 @@
     }
   }
 }
+
+/*
+ * On a narrow card a header action (a toggle, a button) drops under the title
+ * and description, left-aligned. Stock CardHeader keeps the action in its own
+ * column at every width, so a two-item toggle squeezes the title and runs past
+ * the card's edge, where the card's overflow-hidden cuts it off. card.tsx is
+ * core, so the fix lives here, unlayered to outrank its utility classes.
+ * A lone Badge, the stat tile's figure, is short and stays top right: tiles in
+ * a four-column row are as narrow as a phone card.
+ */
+@container card-header (width < 24rem) {
+  [data-slot="card-header"]:not(:has(> [data-slot="card-action"] > [data-slot="badge"]:only-child)) {
+    > * {
+      grid-column: 1 / -1;
+    }
+    > [data-slot="card-action"] {
+      grid-row: auto;
+      justify-self: start;
+    }
+  }
+}