@squadbase/vantage 0.6.2-dev1.3e69e88 → 0.6.2-dev1.54bde93

package/registry/ui/trend-indicator.tsx

@@ -0,0 +1,74 @@
+// Copied by `vantage add ui trend-indicator`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/trend-indicator.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * TrendIndicator — an arrow plus percentage change. Colour tracks *sentiment*,
+ * not direction: set `positiveIsGood={false}` for metrics where going up is bad
+ * (churn, error rate) and a rise renders as negative.
+ *
+ * @deprecated 新規は Delta を使う。value/direction を別々に受けるため食い違える（C4）。
+ */
+import { forwardRef } from "react"
+import { ArrowDown, ArrowUp, Minus } from "lucide-react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@squadbase/vantage/ui"
+import type { TrendDirection } from "@squadbase/vantage/components"
+
+const trendIndicatorVariants = cva("inline-flex items-center gap-0.5 text-sm font-medium", {
+  variants: {
+    sentiment: {
+      positive: "text-positive",
+      negative: "text-negative",
+      neutral: "text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    sentiment: "neutral",
+  },
+})
+
+/**
+ * @deprecated 新規は Delta を使う。value/direction を別々に受けるため食い違える（C4）。
+ */
+export interface TrendIndicatorProps {
+  value: number
+  direction: TrendDirection
+  positiveIsGood?: boolean
+  className?: string
+}
+
+/**
+ * Arrow plus percentage change.
+ *
+ * @deprecated 新規は Delta を使う。value/direction を別々に受けるため食い違える（C4）。
+ */
+export const TrendIndicator = forwardRef<HTMLSpanElement, TrendIndicatorProps>(
+  ({ value, direction, positiveIsGood = true, className }, ref) => {
+    const isGood = direction === "neutral" ? null : (direction === "up") === positiveIsGood
+    const sentiment = isGood === null ? "neutral" : isGood ? "positive" : "negative"
+
+    const Icon = direction === "up" ? ArrowUp : direction === "down" ? ArrowDown : Minus
+
+    const ariaLabel =
+      direction === "neutral"
+        ? `変化なし ${value}%`
+        : direction === "up"
+          ? `${value}% 増加`
+          : `${value}% 減少`
+
+    return (
+      <span
+        ref={ref}
+        data-slot="trend-indicator"
+        className={cn(trendIndicatorVariants({ sentiment }), className)}
+        aria-label={ariaLabel}
+      >
+        <Icon className="size-3.5" aria-hidden="true" />
+        <span>{value}%</span>
+      </span>
+    )
+  },
+)
+TrendIndicator.displayName = "TrendIndicator"

package/registry/ui/updated-at.tsx

@@ -0,0 +1,122 @@
+// Copied by `vantage add ui updated-at`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/updated-at.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * UpdatedAt — freshness label. Renders a `<time>` whose `dateTime` is the ISO
+ * instant, with the absolute time and zone ("2026/10/20 16:41 JST") in both a
+ * tooltip and the `title` attribute.
+ *
+ * `variant="relative"` (default) reads "23 分前に更新"; `"absolute-first"` reads
+ * "16:41 更新（23 分前）" (the date is added when it is not today).
+ *
+ * Hydration-safe: the first render (server and client) is an empty `<time>`
+ * carrying only the ISO `dateTime`, because the text depends on the clock and
+ * time zone of whoever renders. After mount it shows the label and refreshes
+ * every 60 seconds; the interval is cleared on unmount. `now` pins the clock
+ * (tests, fixtures) and skips the timer; `timeZone` pins the zone. The `<time>`
+ * sets `suppressHydrationWarning` so sample data built from `Date.now()` at
+ * module load (which differs between server and client) does not warn.
+ */
+import { forwardRef, useEffect, useState } from "react"
+
+import { EMPTY_VALUE, formatDate } from "@squadbase/vantage/components"
+import { formatRelativeTime } from "@squadbase/vantage/components"
+import { cn } from "@squadbase/vantage/ui"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@squadbase/vantage/ui"
+
+const REFRESH_MS = 60_000
+
+export interface UpdatedAtProps {
+  /** When the data was last updated. */
+  at: Date | string | number
+  /** `"relative"` (default): "23 分前に更新". `"absolute-first"`: "16:41 更新（23 分前）" — for pages where "now" matters. */
+  variant?: "relative" | "absolute-first"
+  /** IANA time zone (e.g. `"Asia/Tokyo"`) for the absolute time. Defaults to the runtime's zone. */
+  timeZone?: string
+  /** Text placed before the label, e.g. `"売上データ: "`. */
+  prefix?: string
+  /** Fixed "current time" for tests and fixtures. Disables the 60 s refresh. */
+  now?: Date | number
+  className?: string
+}
+
+const toMs = (value: Date | string | number) =>
+  value instanceof Date ? value.getTime() : new Date(value).getTime()
+
+function relative(at: number, now: number): string {
+  if (now - at < REFRESH_MS && now - at > -REFRESH_MS) return "たった今"
+  return formatRelativeTime(at, { now })
+}
+
+/** "2026/10/20 16:41 JST" */
+function absolute(at: number, timeZone?: string): string | undefined {
+  if (!Number.isFinite(at)) return undefined
+  const zone = new Intl.DateTimeFormat("ja-JP", { timeZone, timeZoneName: "short" })
+    .formatToParts(at)
+    .find((part) => part.type === "timeZoneName")?.value
+  const text = formatDate(at, "datetime", "ja-JP", { timeZone })
+  return zone ? `${text} ${zone}` : text
+}
+
+function label(at: number, now: number, variant: "relative" | "absolute-first", timeZone?: string): string {
+  if (!Number.isFinite(at) || !Number.isFinite(now)) return EMPTY_VALUE
+  if (variant === "relative") {
+    return now - at < REFRESH_MS && now - at > -REFRESH_MS ? "たった今" : `${relative(at, now)}に更新`
+  }
+  const today = formatDate(at, "date", "ja-JP", { timeZone }) === formatDate(now, "date", "ja-JP", { timeZone })
+  const when = formatDate(at, "datetime", "ja-JP", { timeZone })
+  // "2026/10/20 16:41" -> time only when it is today.
+  const shown = today ? when.slice(-5) : when
+  return `${shown} 更新（${relative(at, now)}）`
+}
+
+export const UpdatedAt = forwardRef<HTMLTimeElement, UpdatedAtProps>(
+  ({ at, variant = "relative", timeZone, prefix, now, className }, ref) => {
+    const atMs = toMs(at)
+    const [current, setCurrent] = useState<number | null>(null)
+    const fixed = now === undefined ? undefined : toMs(now as Date | number)
+
+    useEffect(() => {
+      if (fixed !== undefined) return
+      setCurrent(Date.now())
+      const id = setInterval(() => setCurrent(Date.now()), REFRESH_MS)
+      return () => clearInterval(id)
+    }, [fixed])
+
+    const clock = fixed ?? current
+    const ready = clock !== null
+    const dateTime = Number.isFinite(atMs) ? new Date(atMs).toISOString() : undefined
+    const full = ready ? absolute(atMs, timeZone) : undefined
+    const classes = cn("text-sm text-muted-foreground tabular-nums", className)
+    const text = ready ? `${prefix ?? ""}${label(atMs, clock, variant, timeZone)}` : null
+
+    if (!full) {
+      return (
+        <time ref={ref} data-slot="updated-at" dateTime={dateTime} className={classes} suppressHydrationWarning>
+          {text}
+        </time>
+      )
+    }
+    return (
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <time
+              ref={ref}
+              data-slot="updated-at"
+              dateTime={dateTime}
+              title={full}
+              className={classes}
+              suppressHydrationWarning
+            />
+          }
+        >
+          {text}
+        </TooltipTrigger>
+        <TooltipContent className="tabular-nums">{full}</TooltipContent>
+      </Tooltip>
+    )
+  },
+)
+UpdatedAt.displayName = "UpdatedAt"