@squadbase/vantage 0.6.2-stg.3a2ba98 → 0.7.0-dev1.1197de7

package/registry/ui/delta.tsx

@@ -0,0 +1,352 @@
+// Copied by `vantage add ui delta`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/delta.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * Delta — the change of a value against a comparison, as arrow + signed change + comparison label on one line; it is not a card, so place it beside a value.
+ *
+ * It renders as arrow + signed
+ * change + comparison label ("↑ +12.4% vs. prior month"; ja: "↑ +12.4% 前月比") on one line, in the page's
+ * language (`<html lang>`) unless `locale` is given.
+ *
+ * Direction, rate, colour and wording are all derived here from `value` and
+ * `comparison` (via `computeComparison`); none of them can be passed in, so they
+ * cannot contradict each other. Colour is never the only signal: the arrow and
+ * the sign always accompany it. Set `betterWhen="down"` for metrics
+ * where a rise is bad (churn, error rate).
+ *
+ * - A flat change (inside `neutralBand`) uses a right arrow (→), never a minus-like dash, so it cannot
+ *   read as "− +0.19pt".
+ * - The label comes from `comparison.vs` and `comparison.grain`: a monthly
+ *   `prior-period` reads "前月比", `prior-year` "前年同月比".
+ * - Pass the metric's `format`: a `percent` metric (a rate) shows the difference
+ *   in percentage points ("−0.5pt") instead of a relative change ("−19.2%"). A minus is
+ *   always U+2212, and the digits of a relative change / points are fixed (default 1:
+ *   "+14.0%" beside "+11.9%"); `digits` sets the same count for every card in a group.
+ * - A running total (YTD / MTD) sets `comparison.toDate`: `prior-year` then reads
+ *   "前年同期比" instead of "前年比" whatever the grain.
+ * - When the values cannot be compared (a null value, no previous one), it shows a single muted
+ *   "—" with no arrow (and the label, so "— 前年同月比" says which comparison is missing). The
+ *   screen-reader text says "比較できません".
+ *
+ * @example
+ * import { Delta } from "@/components/delta"
+ * // Vantage: import { Delta } from "@squadbase/vantage/components"
+ *
+ * <Delta value={48_200_000} comparison={{ previous: 42_900_000, vs: "prior-period", grain: "month" }} />
+ * <Delta value={0.021} format="percent" betterWhen="down"
+ *   comparison={{ previous: 0.026, vs: "prior-year", grain: "month" }} />
+ */
+import { forwardRef, type HTMLAttributes } from "react"
+import { ArrowDown, ArrowRight, ArrowUp } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@squadbase/vantage/ui"
+import {
+  computeComparison,
+  defaultChangeDisplay,
+  formatChange,
+  formatChangeAmount,
+  type ChangeDisplay,
+  type Comparison,
+  type ComparisonResult,
+  type Polarity,
+} from "@squadbase/vantage/components"
+import { EMPTY_VALUE, type ValueFormat } from "@squadbase/vantage/components"
+import { useSyncExternalStore } from "react"
+
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
+
+const listeners = new Set<() => void>()
+let observer: MutationObserver | null = null
+
+/** One observer on `<html lang>` for every subscribed part. */
+function subscribe(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
+  listeners.add(onChange)
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      for (const listener of [...listeners]) listener()
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
+  }
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0 && observer) {
+      observer.disconnect()
+      observer = null
+    }
+  }
+}
+
+const serverLocale = () => FALLBACK_LOCALE
+
+/**
+ * The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
+ * hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
+ */
+function useDocumentLocale(): string {
+  return useSyncExternalStore(subscribe, documentLocale, serverLocale)
+}
+
+/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
+function useLocale(locale?: string | null): string {
+  const page = useDocumentLocale()
+  return locale || page
+}
+
+/* ---------- end of inlined code ---------- */
+
+const deltaVariants = cva(
+  "inline-flex w-fit shrink-0 items-center gap-1 font-medium whitespace-nowrap tabular-nums",
+  {
+    variants: {
+      variant: {
+        badge: "h-5 rounded-md border px-2 py-0.5 text-xs font-medium [&>svg]:size-3",
+        inline: "text-sm [&>svg]:size-3.5",
+      },
+      sentiment: {
+        positive: "text-positive",
+        negative: "text-negative",
+        neutral: "text-neutral",
+      },
+    },
+    compoundVariants: [
+      { variant: "badge", sentiment: "positive", className: "border-positive/20 bg-positive-subtle dark:border-positive/25" },
+      { variant: "badge", sentiment: "negative", className: "border-negative/20 bg-negative-subtle dark:border-negative/25" },
+      { variant: "badge", sentiment: "neutral", className: "border-neutral/20 bg-neutral-subtle dark:border-neutral/25" },
+    ],
+    defaultVariants: {
+      variant: "badge",
+      sentiment: "neutral",
+    },
+  },
+)
+
+export interface DeltaProps
+  extends
+    Omit<HTMLAttributes<HTMLSpanElement>, "children">,
+    Pick<VariantProps<typeof deltaVariants>, "variant"> {
+  /** The current value. The previous one comes from `comparison`. */
+  value: number | null | undefined
+  /** What the value is compared against. Required so the delta always carries its label. */
+  comparison: Comparison
+  /** Which direction is good: `"up"` (default) or `"down"` (churn, error rate). Wins over `polarity`. */
+  betterWhen?: "up" | "down"
+  /** @deprecated Older name of `betterWhen` (`"higher-is-better"` / `"lower-is-better"`); `"neutral"` is only reachable here. `betterWhen` wins if both are given. */
+  polarity?: Polarity
+  /** Absolute ratio below which the change reads as flat (0.01 = 1%). Default 0.01. */
+  neutralBand?: number
+  /** Format of the metric itself; a `percent` metric shows its change in points. */
+  format?: ValueFormat
+  /**
+   * `"relative"` ("+12.4%"), `"points"` ("-0.5pt") or `"difference"` (the absolute difference in the
+   * metric's own `format`, "+¥530万"). Default: points for a `percent` format, else relative.
+   */
+  change?: ChangeDisplay
+  /**
+   * 変化（`"relative"` の率・`"points"` の pt）の小数桁数。固定で、末尾の 0 も出す。例: `digits={2}` → "+0.14pt"。
+   * 同じカード群で桁がばらつかないよう、全部に同じ値を渡す。未指定は 1 桁（"+14.0%"）。`"points"` は未指定のとき `format.digits` に従う。
+   */
+  digits?: number
+  /** Locale for the change and its label. Default: the page's (`<html lang>`, else `"en-US"`). */
+  locale?: string
+  /** Show the comparison label ("前月比") after the change. Default true. */
+  showLabel?: boolean
+}
+
+/** Text shown when the values cannot be compared (no previous value, or a zero baseline): the same "—" as every missing value. */
+export const DELTA_NOT_COMPARABLE = EMPTY_VALUE
+
+const ARIA_TEXT = {
+  ja: {
+    none: (label: string) => `${label} 比較できません`,
+    flat: (label: string) => `${label} 横ばい`,
+    points: " ポイント",
+    change: (label: string, amount: string, up: boolean) => `${label} ${amount} ${up ? "増加" : "減少"}`,
+  },
+  en: {
+    none: (label: string) => `${label}: not comparable`,
+    flat: (label: string) => `Flat ${label}`,
+    points: " points",
+    change: (label: string, amount: string, up: boolean) => `${up ? "Up" : "Down"} ${amount} ${label}`,
+  },
+}
+
+/**
+ * Screen-reader text, e.g. "Up 12.4% vs. prior month" / "Down 0.5 points vs. prior month" / "Flat vs. prior month" /
+ * "vs. prior month: not comparable" (ja: "前月比 12.4% 増加" / "前月比 0.5 ポイント 減少" / "前月比 横ばい" / "前月比 比較できません").
+ * The amount carries no sign, since the verb already says the direction ("−0.5 ポイント 減少" would negate twice).
+ * `locale` defaults to the page's (`<html lang>`).
+ */
+export function deltaAriaLabel(
+  result: ComparisonResult,
+  locale?: string,
+  change: ChangeDisplay = "relative",
+  format?: ValueFormat,
+  digits?: number,
+): string {
+  const resolved = resolveLocale(locale)
+  const t = ARIA_TEXT[uiLanguage(resolved)]
+  const { label, direction, ratio } = result
+  if (direction === "none" || ratio === null) return t.none(label)
+  if (direction === "flat") return t.flat(label)
+  const amount = formatChangeAmount(result, change, resolved, format, digits)
+  if (amount === null) return t.none(label)
+  return t.change(label, change === "points" ? amount.replace(/pt$/, t.points) : amount, direction === "up")
+}
+
+export const Delta = forwardRef<HTMLSpanElement, DeltaProps>(
+  (
+    {
+      value,
+      comparison,
+      betterWhen,
+      polarity,
+      neutralBand,
+      format,
+      change,
+      digits,
+      locale: localeProp,
+      showLabel = true,
+      variant = "badge",
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const locale = useLocale(localeProp)
+    // Nothing to compare against yet (a draft fills props in steps).
+    if (!comparison) return null
+    const result = computeComparison(value, comparison, {
+      polarity: betterWhen ? (betterWhen === "down" ? "lower-is-better" : "higher-is-better") : polarity,
+      neutralBand,
+      locale,
+    })
+    const display = change ?? defaultChangeDisplay(format)
+    const formatDigits = typeof format === "object" && format !== null && "digits" in format ? format.digits : undefined
+    const changeDigits = display === "points" ? (digits ?? formatDigits) : digits
+    const comparable = result.direction !== "none"
+    const Icon = result.direction === "up" ? ArrowUp : result.direction === "down" ? ArrowDown : ArrowRight
+    const text = formatChange(result, display, locale, format, changeDigits)
+
+    return (
+      <span
+        ref={ref}
+        role="img"
+        data-slot="delta"
+        data-direction={result.direction}
+        data-sentiment={result.sentiment}
+        aria-label={deltaAriaLabel(result, locale, display, format, changeDigits)}
+        className={cn(
+          deltaVariants({ variant, sentiment: result.sentiment }),
+          !comparable && "text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {comparable && <Icon aria-hidden="true" />}
+        <span aria-hidden="true">{text ?? DELTA_NOT_COMPARABLE}</span>
+        {showLabel && (
+          <span aria-hidden="true" className="font-normal text-muted-foreground">
+            {result.label}
+          </span>
+        )}
+      </span>
+    )
+  },
+)
+Delta.displayName = "Delta"
+
+export { deltaVariants }

package/registry/ui/dialog.tsx

@@ -0,0 +1,161 @@
+// Copied by `vantage add ui dialog`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/dialog.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Button } from "@squadbase/vantage/ui"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in motion-reduce:animate-none! data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in motion-reduce:animate-none! data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "cn-font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}