@squadbase/vantage 0.6.2-dev1.ac99e02 → 0.6.2-dev1.d7c0911

package/registry/ui/trend-indicator.tsx

@@ -1,9 +1,13 @@
 // Copied by `vantage add ui trend-indicator`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/trend-indicator.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/components/trend-indicator.tsx by `npm 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"
@@ -25,6 +29,9 @@ const trendIndicatorVariants = cva("inline-flex items-center gap-0.5 text-sm fon
   },
 })
 
+/**
+ * @deprecated 新規は Delta を使う。value/direction を別々に受けるため食い違える（C4）。
+ */
 export interface TrendIndicatorProps {
   value: number
   direction: TrendDirection
@@ -32,6 +39,11 @@ export interface TrendIndicatorProps {
   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

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 `npm 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"