@siyahi/ui 0.1.9-next.35 → 0.1.9-next.37

package/agents/examples/section-cards-trend.tsx

@@ -1,32 +0,0 @@
-import { Delta, SectionCards, Sparkline, useFormat, type SectionCard } from "@siyahi/ui";
-
-export default function SectionCardsTrendExample() {
-  const { money, moneyCompact } = useFormat();
-  const items: SectionCard[] = [
-    {
-      label: "Revenue",
-      value: money(4512300),
-      badge: <Delta value={0.031} />,
-      trend: <Sparkline data={[3820000, 3950000, 4110000, 4020000, 4380000, 4512300]} />,
-      detail: "Month-end, last six months",
-    },
-    {
-      label: "Cash flow this year",
-      value: moneyCompact(-61200),
-      badge: <Delta value={-61200} format="money" />,
-      // A run of losses: the meaning colour, not a chart slot.
-      trend: <Sparkline data={[0, -8200, -14100, -30400, -52800, -61200]} color="var(--negative)" />,
-      detail: "Running total since April",
-      // The one figure on the page that needs a look, marked by the page: a falling cost would not be.
-      tone: "negative",
-    },
-    {
-      label: "Gift cards this year",
-      value: moneyCompact(38400),
-      badge: <Delta value={0.18} />,
-      trend: <Sparkline data={[4100, 0, 12800, 3300, 9900, 8300]} variant="line" curve="linear" />,
-      detail: "Sold each month",
-    },
-  ];
-  return <SectionCards items={items} />;
-}

package/agents/examples/section-cards.tsx

@@ -1,48 +0,0 @@
-import { Delta, SectionCards, type SectionCard, useFormat } from "@siyahi/ui";
-
-export default function SectionCardsExample() {
-  const { money, moneyCompact } = useFormat();
-  const items: SectionCard[] = [
-    {
-      label: "Revenue",
-      value: money(4512300),
-      badge: <Delta value={0.031} />,
-      headline: "Up for the third month",
-      detail: "Paid orders, less refunds",
-    },
-    {
-      label: "Target",
-      value: money(4025000),
-      headline: "Set at the start of the quarter",
-      detail: "Across 4 stores",
-    },
-    {
-      label: "Ahead of target",
-      value: moneyCompact(487300),
-      badge: <Delta value={0.121} />,
-      headline: "Gross margin 14.2%",
-      detail: "Since April",
-    },
-    {
-      label: "Cash flow this year",
-      value: moneyCompact(-61200),
-      badge: <Delta value={-61200} format="money" />,
-      headline: "Two large inventory buys",
-      detail: "Before tax",
-    },
-    {
-      label: "Gift cards this year",
-      value: moneyCompact(38400),
-      badge: <Delta value={0.18} />,
-      headline: "Sold in 11 stores",
-      detail: "Paid at purchase",
-    },
-  ];
-  return (
-    <div className="flex flex-col gap-6">
-      <SectionCards items={items.slice(0, 3)} />
-      <SectionCards items={items.slice(0, 4)} />
-      <SectionCards items={items} />
-    </div>
-  );
-}

package/dist/components/registry/dashboard-01/section-cards.d.ts

@@ -1,30 +0,0 @@
-import * as React$1 from "react";
-//#region src/components/registry/dashboard-01/section-cards.d.ts
-export interface SectionCard {
-  /** Muted label above the value. */
-  label: string;
-  value: React$1.ReactNode;
-  /** Outline badge, top right; usually a <Delta />. */
-  badge?: React$1.ReactNode;
-  /** A small chart under the value, usually a <Sparkline /> of the recent run. */
-  trend?: React$1.ReactNode;
-  /** Bold first footer line. */
-  headline?: React$1.ReactNode;
-  /** Muted second footer line. */
-  detail?: React$1.ReactNode;
-  /** In a picker, a tile that cannot be picked, such as one with nothing in it: faded, and its button disabled. */
-  disabled?: boolean | undefined;
-  /** Marks the tile as the exception on the page: a faint wash of the colour and an outline of it. */
-  tone?: "negative" | "warning" | undefined;
-  /** Marks the tile's data as old, with since when, such as "3 Nov": the tile greys out and says so. */
-  stale?: React$1.ReactNode;
-}
-export interface SectionCardsProps {
-  items: SectionCard[];
-  /** The label of the picked tile. */
-  selected?: string | undefined;
-  /** Makes each tile one button, so keep tile content non-interactive; gets the label of the tile picked. */
-  onSelect?: ((label: string) => void) | undefined;
-}
-export declare function SectionCards({ items, selected, onSelect }: SectionCardsProps): React$1.JSX.Element;
-//#endregion

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

@@ -1,74 +0,0 @@
-"use client";
-import { Badge } from "../../ui/badge.js";
-import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
-import { cn } from "../../../lib/utils.js";
-import { StaleNote } from "../../siyahi/stale-note.js";
-import { useSurface } from "../../siyahi/siyahi-provider.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, selected, onSelect }) {
-	const surface = useSurface();
-	const ruled = surface === "ruled";
-	return /* @__PURE__ */ jsx("div", {
-		"data-surface": surface,
-		className: cn("@container/main", ruled && "overflow-hidden border-y"),
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn("grid grid-cols-1", ruled ? "-me-px -mb-px bg-card" : surface === "open" ? "gap-4" : "gap-2", COLUMNS[items.length] ?? COLUMNS[4]),
-			children: items.map((item) => /* @__PURE__ */ jsx("div", {
-				"data-slot": "section-card",
-				className: cn("min-w-0", ruled && "border-e border-b"),
-				children: /* @__PURE__ */ jsxs(Card, {
-					"data-tone": item.tone,
-					"data-stale": item.stale ? "" : void 0,
-					className: cn("@container/card h-full [--card-spacing:--spacing(3)]", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", item.label === selected && ruled && "ring-inset", onSelect && item.disabled && "opacity-60"),
-					children: [
-						onSelect && /* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-label": item.label,
-							"aria-pressed": item.label === selected,
-							disabled: item.disabled,
-							onClick: () => onSelect(item.label),
-							className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring focus-visible:ring-inset"
-						}),
-						/* @__PURE__ */ jsxs(CardHeader, { children: [
-							/* @__PURE__ */ jsx(CardDescription, {
-								className: "font-mono text-2xs tracking-wider uppercase",
-								children: item.label
-							}),
-							item.stale && /* @__PURE__ */ jsx(StaleNote, { since: item.stale }),
-							/* @__PURE__ */ jsx(CardTitle, {
-								className: "text-2xl font-semibold tabular-nums",
-								children: item.value
-							}),
-							item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
-								variant: "outline",
-								children: item.badge
-							}) })
-						] }),
-						item.trend && /* @__PURE__ */ jsx(CardContent, { children: item.trend }),
-						(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
-							className: "flex-col items-start gap-1 font-mono text-2xs tracking-wider uppercase",
-							children: [item.headline && /* @__PURE__ */ jsx("div", {
-								className: "flex flex-wrap gap-2 font-medium",
-								children: item.headline
-							}), item.detail && /* @__PURE__ */ jsx("div", {
-								className: "text-muted-foreground",
-								children: item.detail
-							})]
-						})
-					]
-				})
-			}, item.label))
-		})
-	});
-}
-//#endregion
-export { SectionCards };